/* ui/Settings — the gear and its panel. Contract: ./Settings.spec.md
   Tokens only (ui/Theme C8): no colour literals live here. */

/* The layer itself is inert: only the gear and the panel take a pointer, so a
   match underneath keeps taking aim, movement and fire while it is open. */
.sp-settings {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  font-family: var(--sp-font-ui);
}

.sp-settings__gear {
  pointer-events: auto;
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--sp-text-dim);
  background: color-mix(in oklab, var(--sp-space-1) 78%, transparent);
  border: 1px solid var(--sp-line-strong);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  transition: color var(--sp-dur-fast) var(--sp-ease-out), border-color var(--sp-dur-fast) var(--sp-ease-out);
}

.sp-settings__gear:hover,
.sp-settings__gear[aria-expanded="true"] {
  color: var(--sp-text);
  border-color: var(--sp-accent-2);
}

.sp-settings__cog {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54A.48.48 0 0 0 13.9 2h-3.84a.48.48 0 0 0-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.71 8.47a.49.49 0 0 0 .12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 0 0-.12-.61zM12 15.6A3.6 3.6 0 1 1 15.6 12 3.6 3.6 0 0 1 12 15.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54A.48.48 0 0 0 13.9 2h-3.84a.48.48 0 0 0-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.71 8.47a.49.49 0 0 0 .12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 0 0-.12-.61zM12 15.6A3.6 3.6 0 1 1 15.6 12 3.6 3.6 0 0 1 12 15.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Over the arena every corner belongs to ui/Hud — announcer log, kill feed,
   minimap, vitals, special, tray — so the gear takes the one gap the HUD keeps
   empty in every layout: the top strip just right of the match clock. It is
   also above every thumb zone, which a control over a touch match has to be. */
.sp-settings[data-screen="arena"] .sp-settings__gear {
  right: auto;
  left: calc(50% + 92px);
}

/* The desktop menu's way of closing (dismiss: 'outside'), the ☰ dropdown's:
   a transparent layer under the panel takes the click outside it. Only
   rendered there, so the arena never loses a click to it. */
.sp-settings__scrim {
  pointer-events: auto;
  position: absolute;
  inset: 0;
  background: transparent;
}

/* ------------------------------------------------------------- the panel --- */

.sp-settings__panel {
  pointer-events: auto;
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 68px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 28px));
  max-height: calc(100vh - 96px);
  color: var(--sp-text);
  background: color-mix(in oklab, var(--sp-space-1) 94%, transparent);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius);
  /* A layer over the page, not part of it: a deep shadow in the seam's black and a lit edge. */
  box-shadow: 0 18px 48px color-mix(in oklab, var(--sp-seam) 85%, transparent), 0 0 0 1px color-mix(in oklab, var(--sp-seam) 60%, transparent);
  backdrop-filter: blur(16px);
  animation: sp-settings-in var(--sp-dur) var(--sp-ease-out) both;
}

/* Under its gear, but never off the right edge on a narrow screen. */
.sp-settings[data-screen="arena"] .sp-settings__panel {
  right: auto;
  left: clamp(14px, calc(50% + 92px), calc(100vw - 354px));
}

/* A touch match keeps the top-right corner empty for the gear (ui/Hud C157):
   the centred spot above sits beside a match card the touch HUD no longer
   draws there, so the gear goes back to the menu's corner, panel under it. */
.sp-settings[data-screen="arena"][data-touch="true"] .sp-settings__gear,
.sp-settings[data-screen="arena"][data-touch="true"] .sp-settings__panel {
  left: auto;
  right: calc(env(safe-area-inset-right, 0px) + 14px);
}

/* Dropped from the top bar at the ☰ dropdown's spot (ui/MoreMenu C11). */
.sp-settings[data-dismiss="outside"] .sp-settings__panel {
  top: calc(56px + 4px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  max-height: calc(100vh - 76px);
  border-color: var(--sp-line);
  animation-duration: 160ms;
}

/* With no ✕ the header is only the title: keep its row the same height. */
.sp-settings[data-dismiss="outside"] .sp-settings__header {
  padding: 14px 18px;
}

@keyframes sp-settings-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.sp-settings__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid var(--sp-line);
}

.sp-settings__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--sp-text);
}

.sp-settings__close {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--sp-text-faint);
  border-radius: 999px;
  transition: color var(--sp-dur-fast) var(--sp-ease-out);
}

.sp-settings__close:hover {
  color: var(--sp-text);
}

.sp-settings__cross {
  position: relative;
  width: 14px;
  height: 14px;
}

.sp-settings__cross::before,
.sp-settings__cross::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.sp-settings__cross::before { transform: rotate(45deg); }
.sp-settings__cross::after { transform: rotate(-45deg); }

/* The body scrolls, so every control stays reachable on a short viewport; its last line fades
   out, so a list that goes on below the panel's edge says so. */
.sp-settings__body {
  overflow-y: auto;
  mask-image: linear-gradient(to bottom, var(--sp-seam) calc(100% - 28px), transparent);
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 18px 20px;
}

.sp-settings__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-settings__section + .sp-settings__section {
  padding-top: 16px;
  border-top: 1px solid var(--sp-line);
}

.sp-settings__legend {
  margin: 0;
}

/* --------------------------------------------------------------- mixer ---- */

.sp-settings__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}

.sp-settings__row-label {
  font-size: 12px;
  color: var(--sp-text-dim);
}

.sp-settings__row-value {
  font: 600 12px/1 var(--sp-font-mono);
  color: var(--sp-text-faint);
  text-align: right;
}

.sp-settings__slider {
  width: 100%;
  height: 24px;
  margin: 0;
  accent-color: var(--sp-accent-2);
  cursor: pointer;
}

.sp-settings__check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}

.sp-settings__checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--sp-accent-2);
  cursor: pointer;
}

.sp-settings__check-label {
  flex: 1;
  font-size: 12px;
  color: var(--sp-text-dim);
  cursor: pointer;
}

/* ----------------------------------------------------------- call sign ---- */

.sp-settings__field {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  font: 500 14px/1 var(--sp-font-ui);
  color: var(--sp-text);
  background: color-mix(in oklab, var(--sp-space-0) 70%, transparent);
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius-sm);
}

.sp-settings__field::placeholder {
  color: var(--sp-text-faint);
}

.sp-settings__field:focus-visible {
  border-color: var(--sp-accent-2);
}

.sp-settings__note {
  margin: 0;
  font-size: 12px;
  color: var(--sp-text-faint);
}

/* ------------------------------------------------------------ practice ---- */

/* The one sentence a player ever reads about the opening assist, so it sits
   with the box it describes rather than under the section: indented past the
   checkbox and its gap, the way a caption belongs to its control. */
.sp-settings__section[data-section="practice"] .sp-settings__note,
.sp-settings__section[data-section="controls"] .sp-settings__note {
  margin-top: -4px;
  padding-left: 28px; /* the box (18px) and the row's gap (10px) */
  line-height: 1.45;
}

/* ------------------------------------------------------------- effects ---- */

.sp-settings__fieldset {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.sp-settings__option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
  transition: border-color var(--sp-dur-fast) var(--sp-ease-out), background var(--sp-dur-fast) var(--sp-ease-out);
}

.sp-settings__option:hover {
  border-color: var(--sp-line-strong);
}

.sp-settings__option:has(:focus-visible) {
  outline: 2px solid var(--sp-accent-2);
  outline-offset: 2px;
}

.sp-settings__option[data-selected="true"] {
  background: color-mix(in oklab, var(--sp-accent) 12%, transparent);
  border-color: color-mix(in oklab, var(--sp-accent-2) 70%, transparent);
}

.sp-settings__option-mark {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: 1px solid var(--sp-line-strong);
  border-radius: 999px;
}

.sp-settings__option[data-selected="true"] .sp-settings__option-mark {
  background: radial-gradient(circle, var(--sp-accent-2) 0 45%, transparent 46%);
  border-color: var(--sp-accent-2);
}

.sp-settings__option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-settings__option-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text);
}

.sp-settings__option-detail {
  font-size: 12px;
  line-height: 1.35;
  color: var(--sp-text-faint);
}

/* Screen shake: one row of three under the effects level. */
.sp-settings__fieldset--row {
  margin-top: 10px;
}

.sp-settings__row-legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text);
}

.sp-settings__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

/* Three to a row while the words fit; a longer translation ("Reduziert",
   "Сниженный") wraps the row to two lines instead of spilling out of its box. */
.sp-settings__fieldset--row > .sp-settings__row {
  display: flex;
  flex-wrap: wrap;
}

.sp-settings__fieldset--row > .sp-settings__row > .sp-settings__option {
  flex: 1 1 0;
  grid-template-columns: 14px auto;
}

.sp-settings__option--compact {
  align-items: center;
  gap: 8px;
}

.sp-settings__option--compact .sp-settings__option-mark {
  margin-top: 0;
}

/* Region (step H): Auto across the top, then the regions two to a row, each a
   name over its place. Auto's "Nearest: Singapore" is the longest line, and a
   whole row keeps it on one. */
.sp-settings__fieldset--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.sp-settings__fieldset--grid > .sp-settings__option[data-region="auto"] {
  grid-column: 1 / -1;
}

/* A landscape phone has almost no height for a panel: take back the margins. */
@media (max-height: 560px) {
  .sp-settings__panel {
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    max-height: calc(100vh - 72px);
  }
}

/* The way out of a match (claims 47-48). The one destructive control in the
   panel, so it is set apart by a rule above it and wears the danger colour
   only on hover: present, not shouting. */
.sp-settings__footer {
  flex: 0 0 auto;        /* never scrolls away with the body above it */
  border-top: 1px solid var(--sp-line);
  padding: 14px 18px 16px;
}

.sp-settings__leave {
  width: 100%;
  min-height: 34px;
}

.sp-settings__leave:hover,
.sp-settings__leave:focus-visible {
  color: var(--sp-danger);
  border-color: var(--sp-danger);
}

.sp-settings__hint {
  margin: 8px 0 0;
  color: var(--sp-text-dim);
  font-size: 12px;
}

/* A landscape phone (740 x 360): one column under the gear left a 90px window
   of body between the header and Leave match. The panel instead rises to the
   top edge beside the gear (menu) or across the top (arena), the header and the
   footer shrink to one row each, and the sections sit in two columns, Audio
   and Pilot on the left, Graphics and Practice on the right, so every section
   starts on the first screen. */
@media (max-height: 560px) and (min-width: 600px) {
  .sp-settings__panel,
  .sp-settings[data-screen="arena"] .sp-settings__panel {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: calc(env(safe-area-inset-left, 0px) + 14px);
    right: calc(env(safe-area-inset-right, 0px) + 68px); /* clear of the menu gear */
    width: auto;
    max-width: 660px;
    margin-left: auto;
    max-height: calc(100dvh - 16px);
  }

  .sp-settings[data-screen="arena"] .sp-settings__panel {
    right: calc(env(safe-area-inset-right, 0px) + 14px);
  }

  .sp-settings[data-screen="arena"][data-touch="true"] .sp-settings__panel {
    left: calc(env(safe-area-inset-left, 0px) + 14px);
    right: calc(env(safe-area-inset-right, 0px) + 68px); /* beside the corner gear */
  }

  .sp-settings__header {
    padding: 2px 6px 2px 16px;
  }

  .sp-settings__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px 24px;
    padding: 10px 16px 12px;
  }

  .sp-settings__section { gap: 6px; }

  .sp-settings__section[data-section="audio"] { grid-column: 1; grid-row: 1; }
  .sp-settings__section[data-section="pilot"] { grid-column: 1; grid-row: 2; }
  .sp-settings__section[data-section="graphics"] { grid-column: 2; grid-row: 1; }
  .sp-settings__section[data-section="practice"] { grid-column: 2; grid-row: 2; }
  /* Region takes the whole third row, its six choices three to a row. */
  .sp-settings__section[data-section="region"] { grid-column: 1 / -1; grid-row: 3; }
  .sp-settings__fieldset--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-settings__fieldset--grid > .sp-settings__option[data-region="auto"] { grid-column: auto; }

  /* The rule between sections now runs only between the two rows. */
  .sp-settings__section + .sp-settings__section {
    padding-top: 0;
    border-top: 0;
  }

  .sp-settings__section[data-section="pilot"],
  .sp-settings__section[data-section="region"],
  .sp-settings__section[data-section="practice"] {
    padding-top: 12px;
    border-top: 1px solid var(--sp-line);
  }

  .sp-settings__row,
  .sp-settings__check { min-height: 30px; }

  .sp-settings__option { min-height: 40px; padding: 6px 10px; }

  /* Leave match and its sentence share one row instead of stacking. */
  .sp-settings__footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
  }

  .sp-settings__leave {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    padding-inline: 18px;
  }

  .sp-settings__hint { margin: 0; }
}

/* Thumbs (docs/premium-pass.md §1.11 rule 1): every control is 44 px tall on a
   touch screen, and a check row's label fills the row so the whole row takes
   the tap. After the landscape rules, so it wins there too. */
@media (pointer: coarse) {
  .sp-settings__row,
  .sp-settings__check,
  .sp-settings__slider,
  .sp-settings__option,
  .sp-settings__field,
  .sp-settings__leave { min-height: 44px; }
  .sp-settings__slider { height: 44px; }
  .sp-settings__check-label { align-self: stretch; display: flex; align-items: center; }
}