/* =======================================================================
   The Settings dialog
   =======================================================================
   One popup: a sidebar of panes on the left, the rows on the right, a search
   box over all of them. It replaces the full-height sheet plus three sub-pages
   (Piece style, Board settings, Account) that Settings used to be - a phone
   pattern that, on a desktop, hid every second setting behind a chevron and a
   trip back.

   ITS OWN FILE, not a block in styles.css, for the reason css/unlocks.css gives
   for the same choice: the settings surface is one feature, it is now the size
   of a small page, and the whole of it should be one file to read, change or
   pull. styles.css keeps only what other screens share - .settings-row,
   .settings-block, .toggle, .seg - because the analysis popup
   (#review-settings-screen) is built from those same parts and must not move
   when this file changes. Everything here is scoped under .settings-modal so
   that stays true.

   THE COLOURS ARE THE APP'S. Sidebar on --color-bg, panes on --color-surface,
   one step apart exactly as the rail and the board panel already are; hairlines
   on --color-border; the accent green only where something is switched ON, so
   the dialog reads as quiet chrome and the toggles read as state.
   ======================================================================= */

/* The backdrop: an ordinary centred overlay. (The sheet used to override
   .overlay-screen to stretch edge to edge; nothing does now.) */
.settings-page { padding: 24px; }

.settings-modal {
  position: relative;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  width: 100%;
  max-width: 1020px;
  /* Tall enough that Board - the longest pane - needs little scrolling, capped
     so the dialog never runs past a laptop screen. */
  height: min(86vh, 740px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  overflow: hidden;
  animation: settings-in .18s ease-out;
}
@keyframes settings-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.settings-modal:focus { outline: none; }   /* focused on open, for the keyboard */

/* ---- the title bar ------------------------------------------------------
   On a desktop there is no title: the sidebar says where you are, and all this
   carries is the way out, floated over the top-right corner of the panes. On a
   phone the dialog fills the screen and this becomes a real title bar (see the
   media query at the foot). */
.settings-topbar {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.settings-title { display: none; margin: 0; font-size: 18px; font-weight: 800; }
.settings-dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--color-text-muted); cursor: pointer;
  transition: var(--transition-fast);
}
.settings-dismiss:hover { background: var(--color-surface-raised); color: var(--color-text-primary); }

/* ---- the sidebar -------------------------------------------------------- */
.settings-nav {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 0;                  /* a grid child scrolls only if it may shrink */
  padding: 16px 12px 20px;
  overflow-y: auto;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
}
.settings-search { position: relative; margin: 2px 2px 14px; }
.settings-search .ic {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--color-text-muted); pointer-events: none;
}
.settings-search input {
  width: 100%; height: 38px; box-sizing: border-box; padding: 0 12px 0 34px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-radius: 999px;
  color: var(--color-text-primary); font: inherit; font-size: 14px;
  transition: var(--transition-fast);
}
.settings-search input::placeholder { color: var(--color-text-muted); }
.settings-search input:focus { outline: none; border-color: var(--color-accent); }
/* The native clear cross is a dark glyph on a dark field in Chrome; the Escape
   key and the sidebar both already clear the box. */
.settings-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.settings-nav-group {
  margin: 14px 0 6px; padding: 0 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-muted);
}
.settings-nav-group:first-of-type { margin-top: 2px; }

.settings-nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-muted);
  font: inherit; font-size: 14.5px; font-weight: 600; text-align: left;
  cursor: pointer; transition: var(--transition-fast);
}
.settings-nav-item .ic { width: 18px; height: 18px; flex: none; }
.settings-nav-item:hover { background: var(--color-surface-raised); color: var(--color-text-primary); }
.settings-nav-item.is-active {
  background: var(--color-surface-raised); color: var(--color-text-primary);
}
/* Searching dims the sections with nothing in them rather than removing them:
   the sidebar is the map, and a map that loses its roads while you look at it
   is worse than one that greys them. The highlight comes off the pane you were
   in for the same honesty - results span every section, so nothing is "where
   you are" until the box is empty again. */
.settings-nav-item.is-empty { opacity: .3; }
.settings-modal.is-searching .settings-nav-item.is-active {
  background: transparent; color: var(--color-text-muted);
}

/* ---- the panes ---------------------------------------------------------- */
.settings-panes {
  min-height: 0; overflow-y: auto;
  padding: 34px 44px 44px;
}
.settings-pane { max-width: 680px; }

/* The pane's own name. Redundant while you are standing in it - the sidebar is
   showing you the same word - so it appears only in search results, where
   several panes are stacked and each block needs to say where it came from. */
.settings-pane-title { display: none; }
.settings-modal.is-searching .settings-pane-title {
  display: block; margin: 0 0 14px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-muted);
}
/* Below rather than above each pane: the panes that did not match are
   display:none, and a top margin would still be paid by whichever visible pane
   happened to follow one. */
.settings-modal.is-searching .settings-pane { margin-bottom: 38px; }

/* A section inside a pane: a heading and the rows under it, separated by
   hairlines. No box, no card - the dialog is quiet and the rows are the
   content. */
.settings-modal .settings-block { padding: 0; border-bottom: 0; }
.settings-modal .settings-block + .settings-block { margin-top: 36px; }
.settings-modal .settings-block-title {
  margin: 0 0 4px;
  font-size: 19px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--color-text-primary);
}
.settings-modal .settings-row {
  gap: 24px; padding: 15px 0; min-height: 52px;
  border-bottom: 1px solid var(--color-border);
}
.settings-modal .settings-row-label { font-size: 15px; font-weight: 600; gap: 3px; }
.settings-modal .settings-hint-text { font-size: 13px; line-height: 1.45; max-width: 46ch; }
/* Rows whose control is a grid or a segmented bar stack it under the label, and
   want room between the two. */
.settings-modal .settings-row-col { gap: 12px; padding-bottom: 18px; }
.settings-modal .settings-row-col .settings-hint-text { max-width: none; }
/* Five themes, five columns: the dialog is wide enough to show the whole choice
   at once, where the 640px sheet could only fit four and wrapped the fifth onto
   a row of its own. The four-column base stays for the phone. */
.settings-modal .theme-grid { grid-template-columns: repeat(5, 1fr); }

/* Account. Its sub-headings are the same size as a block title - inside the
   dialog they ARE block titles, one pane's worth of them - and the rows below
   carry the separators, so the old top border on each group would double up. */
.settings-modal .account-sub { padding: 0; border-top: 0; }
.settings-modal .account-sub + .account-sub { margin-top: 32px; }
.settings-modal .account-sub-title {
  margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--color-text-primary);
}
.settings-modal .account-form { gap: 10px; margin-top: 14px; max-width: 340px; }
.settings-modal .account-danger { margin-top: 32px; border-top: 0; }

/* Nothing matched. */
.settings-no-results {
  margin: 8px 0 0; font-size: 14.5px; color: var(--color-text-muted);
}
.settings-no-results b { color: var(--color-text-primary); font-weight: 600; }

/* ---- the phone ---------------------------------------------------------
   No room for a 264px sidebar beside a readable column, so the dialog takes the
   whole screen and the sidebar becomes a row of chips across the top - still
   every pane, one tap each, and still no back button anywhere. The search box
   goes with the sidebar: on a phone it costs a keyboard over the very rows it
   is filtering, and four chips are quicker than typing. */
@media (max-width: 860px) {
  .settings-page { padding: 0; }
  .settings-modal {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    max-width: none; width: 100%; height: 100%;
    border: 0; border-radius: 0;
  }
  .settings-topbar {
    position: static;
    padding: 12px 8px 12px 20px;
    border-bottom: 1px solid var(--color-border);
  }
  .settings-title { display: block; }
  .settings-nav {
    flex-direction: row; align-items: center; gap: 6px;
    padding: 10px 14px;
    overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--color-border);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-search, .settings-nav-group { display: none; }
  .settings-nav-item {
    flex: none; width: auto; white-space: nowrap;
    padding: 8px 14px; border-radius: 999px;
    background: var(--color-surface-raised);
  }
  .settings-nav-item .ic { display: none; }   /* a chip is its word */
  .settings-nav-item.is-active {
    background: var(--color-accent); color: #fff;
  }
  .settings-panes { padding: 20px 18px 40px; }
  .settings-pane { max-width: none; }
  .settings-modal .settings-hint-text { max-width: none; }
  /* Five swatches across a 390pt phone is 70pt a cell, and a locked one has to
     fit "1,400 ELO" inside that. Back to the four the sheet always used. */
  .settings-modal .theme-grid { grid-template-columns: repeat(4, 1fr); }
}

/* In the app the dialog fills the screen edge to edge, which puts its title bar
   under the notch and its last row under the home indicator. The tab bar hides
   itself behind any open overlay (styles.css), so the foot only owes the inset.
   Gated on body.has-tabbar, which js/tabbar.js sets and only the app has. */
@media (max-width: 860px) {
  body.has-tabbar .settings-topbar { padding-top: calc(12px + env(safe-area-inset-top)); }
  body.has-tabbar .settings-panes { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}