/* The browser's own [hidden] rule is display:none, and ANY display declaration
   in a stylesheet beats it — demo.css declares `.row { display: flex }`, which
   is why a `.row` marked hidden stayed on screen. Restate it as a backstop so
   setting .hidden always actually hides. The same rule, for the same reason, is
   in shell.css and puzzles.css. */
[hidden] { display: none !important; }

/* Settings tab. Structure only — every color comes from theme.css, the same
   rule the board follows. */

.settings {
  /* The width of one column of panels, and the space between panels. One
     column on a laptop; two and then three side by side on a big monitor —
     see BIG SCREENS just below. Change the width here and every column moves. */
  --settings-column: 40rem;
  --settings-gap: 0.875rem;
  max-width: var(--settings-column);
  margin: 0 auto;
  padding: 1rem 1.125rem 2.5rem;
  display: grid;
  gap: var(--settings-gap);
}

.settings .panel { margin: 0; }

/* ── BIG SCREENS — 2026-09-14 ─────────────────────────────────────────────────
   Settings, Pro, Admin and Lessons are a stack of panels, and one 40rem stack
   down the middle of a 2560px monitor left three quarters of the screen empty.
   Past 1800px the panels flow into two columns, and past 2800px into three,
   each column still exactly --settings-column wide, so no panel is ever wider
   than it was designed to be — there are just more of them in view.

   CSS columns rather than a grid, because the panels are very different
   heights: a grid would line their tops up and leave holes under the short
   ones, where columns stack each panel straight under the last. Reading order
   is down the first column, then down the next.

   The breakpoints are window widths in px, which the page's own scaling does
   not change. The Lessons Classroom is left out on purpose: it is a video room
   with a board beside it, and lessons.css already gives it its own wide layout.
   Below 1800px nothing here applies and the page is exactly what it was. */
@media (min-width: 1800px) {
  main.settings:not(:has(.subpanel[data-subpanel="classroom"]:not([hidden]))) {
    display: block;
    max-width: calc(2 * var(--settings-column) + var(--settings-gap));
    columns: 2;
    column-gap: var(--settings-gap);
  }
  /* ANY panel, however deep. Pro wraps its panels in screen sections
     (#screenPlans) and Lessons in sub-tabs, and the first version of this rule
     named only direct children — so on Pro the Plans panel was torn in half
     across the column break, its last line at the top of the next column. The
     spacing goes on outermost panels only, so a panel inside a panel is not
     pushed away from its parent's edge. */
  main.settings:not(:has(.subpanel[data-subpanel="classroom"]:not([hidden]))) .panel {
    break-inside: avoid;
  }
  main.settings:not(:has(.subpanel[data-subpanel="classroom"]:not([hidden]))) .panel:not(.panel .panel) {
    margin-bottom: var(--settings-gap);
  }
  /* The Lessons sub-tabs are a heading for everything below them, not a panel. */
  main.settings > .subtabbar { column-span: all; margin-bottom: var(--settings-gap); }
}
@media (min-width: 2800px) {
  main.settings:not(:has(.subpanel[data-subpanel="classroom"]:not([hidden]))) {
    max-width: calc(3 * var(--settings-column) + 2 * var(--settings-gap));
    columns: 3;
  }
}

/* ── account ─────────────────────────────────────────────────────────────── */

.acct { display: grid; gap: 0.625rem; }

.who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.who img {
  border-radius: 50%;
  border: 1px solid var(--ui-line);
}

.acct-name { font-size: 0.9375rem; /* 15px */ font-weight: 600; }

.badge {
  font-size: max(0.625rem, var(--text-min)); /* 10px */
  letter-spacing: 1.5px;
  padding: 2px 0.4375rem;
  border-radius: var(--ui-radius);
  background: var(--ui-accent);
  color: var(--ui-accent-text);
}

/* Google asks that the button be recognizable as theirs: their mark on a plain
   surface, their wording, not restyled into the app's accent color. */
.btn.google {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  font-weight: 500;
  padding: 0.5625rem 1rem;
}

@media (hover: hover) { .btn.google:hover { background: #f7f8f8; } }

.btn.google .g {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: #4285f4;
}

.userrow {
  font-size: 0.75rem;
  font-family: var(--ui-mono);
  color: var(--ui-dim);
  padding: 0.3125rem 0;
  border-bottom: 1px solid var(--ui-line);
}
.userrow:last-child { border-bottom: 0; }

/* ── shared bits ─────────────────────────────────────────────────────────── */

.checkline {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  font-size: 0.875rem; /* 14px */
  cursor: pointer;
  padding: 0.1875rem 0;
}

.settings input[type="text"],
.settings input[type="number"],
.settings input[type="password"],
.settings select {
  width: 100%;
  font-family: var(--ui-mono);
  font-size: 0.75rem;
  /* These had no color/border/background of their own before item 15 —
     .settings only ever set width and font, so every text box on this page
     was rendering as a bare, un-themed browser default. Not visible unless
     something on the page needed a text box badly enough to notice, which
     is exactly what adding the fail-time field did. */
  color: var(--ui-text);
  background: var(--ui-input-bg);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 0.375rem 0.5rem;
}
.settings input:focus, .settings select:focus { outline: 1px solid var(--ui-accent); }

.settings select { max-width: 13.75rem; }
/* A seconds field is a number, not a paragraph — full width here would put
   thirty empty pixels between the digits and the "0 turns it off" hint
   sitting right next to it in the same .row. */
.settings input[type="number"] { width: 5rem; flex: 0 0 auto; }

/* ── the profile panel ──────────────────────────────────────────────────────
   A label above its input, which is the one arrangement that survives a narrow
   window: a label beside an input either wraps under it anyway or squeezes the
   input to nothing, and this panel has a 300-character textarea in it. */

.settings .field { display: grid; gap: 0.25rem; margin: 0 0 0.75rem; }
.settings .field label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ui-dim);
}
.settings .field .hint { margin: 0; }
.settings .field.grow { flex: 1 1 13.75rem; }

/* The two short fields share a row until there is no room, and then they do
   not. `align-items: start` so a validation message under one does not drag
   the other's input down with it. */
.settings .profrow { align-items: start; gap: 0.75rem; }
.settings .profrow .field { margin-bottom: 0; }

.settings textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.45;
  color: var(--ui-text);
  background: var(--ui-input-bg);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 0.5rem;
  resize: vertical;
}
.settings textarea:focus { outline: 1px solid var(--ui-accent); }

/* A message about something being wrong has to look different from one that is
   only advice, or the form says nothing when it refuses. `.hint.err` is
   demo.css's, which this page already links — the same red the review screen
   uses for a wrong move, rather than a second red that means the same thing. */
.settings .hint.ok { color: var(--learn-right); }

/* ── the appearance pickers ─────────────────────────────────────────────────
   Swatches and piece previews, because a colour and a piece shape are the two
   things a dropdown of names cannot describe. */

.swatches, .pieceoptions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.375rem 0 0.25rem;
}

.swatch, .pieceopt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  color: var(--ui-text);
  /* --ui-btn, not --ui-panel: this sits directly on a panel of that same
     colour, so with --ui-panel here only the 1px border was ever visible.
     See theme.css, item 11 ("border-only buttons"). */
  background: var(--ui-btn);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  padding: 0.375rem 0.625rem 0.375rem 0.375rem;
  cursor: pointer;
}
@media (hover: hover) { .swatch:hover, .pieceopt:hover { background: var(--ui-btn-hover); border-color: var(--ui-accent); } }
.swatch.on, .pieceopt.on { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }

.swatch .chip { width: 1.125rem; height: 1.125rem; border-radius: 0.1875rem; }
.swatch .chip + .chip { margin-left: -0.75rem; }
.swatch .label, .pieceopt .label { font-size: 0.75rem; }

/* The preview pieces sit on a real square colour, or a white king on a light
   panel would be an invisible outline. */
.pieceopt .pv {
  display: inline-flex;
  background: var(--sq-dark);
  border-radius: 0.1875rem;
  padding: 2px;
}
/* svg for a built-in set, img or span for one from a folder — see
   board/pieces.js. All three are the same size here. */
.pieceopt .pv svg,
.pieceopt .pv img,
.pieceopt .pv span { display: block; width: 1.625rem; height: 1.625rem; }
.pieceopt .pv img { object-fit: contain; }

/* A folder that is not a complete set yet, and what it is missing. */
#pieceSetsIssues { margin: 2px 0 0.375rem; }
#pieceSetsIssues .hint { margin: 2px 0; }

/* One row per opening database. The rows are .checkline like every other
   toggle here; this only stops them touching each other. */
.dblist { display: grid; gap: 0.5rem; margin: 0.375rem 0 0.875rem; }
.dblist .checkline { align-items: flex-start; }
.dblist .checkline input { margin-top: 0.1875rem; }

/* ── one piece at a time ──────────────────────────────────────────────────
   A row per piece, an option per set. The preview is the real renderer, so
   what is shown is exactly what lands on the board — see paintPieceMix. */

.piecemix {
  display: grid;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}

.mixrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.mixname {
  flex: 0 0 3.625rem;
  font-size: 0.75rem;
  color: var(--ui-dim);
}

.mixopts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.mixopt {
  background: var(--ui-btn);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  cursor: pointer;
  padding: 0.1875rem 0.375rem;
  line-height: 0;
}

@media (hover: hover) { .mixopt:hover { border-color: var(--ui-accent); } }

.mixopt.on {
  border-color: var(--ui-accent);
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}

/* The two pieces sit on a board-coloured tile, because a piece set is only
   readable against the squares it will actually stand on. */
.mixopt .pv {
  display: flex;
  gap: 2px;
  /* The real square colour, so the preview is judged against the board it will
     stand on and follows the Squares setting above. */
  background: var(--sq-light);
  border-radius: 0.1875rem;
  padding: 2px;
}

/* The 26px box, whatever the piece is drawn with: an <svg> for a built-in set,
   an <img> for a folder of artwork, a masked <span> for a tinted silhouette. */
.mixopt .pv > * {
  width: 1.625rem;
  height: 1.625rem;
  display: block;
  flex: 0 0 auto;
}

/* `object-fit` ONLY. Giving this rule a width and height as well made it beat
   the box above — it is one class more specific — and `height: 100%` against a
   parent sized by its own content resolved to the image's natural 512px. Six
   rows of that made the picker nine thousand pixels tall. */
.mixopt .pv img { object-fit: contain; }


/* The microphone level bar on the Voice panel. Same shape and same job as the
   one on the review screen (repertoire.css) — watching it move is the only
   proof a device name in a dropdown can never give. Duplicated rather than
   shared because these two stylesheets are loaded by different documents and
   neither has ever imported the other. */
.meter {
  height: 0.5rem;
  margin-top: 0.375rem;
  border-radius: 62.4375rem;
  background: var(--ui-btn);
  border: 1px solid var(--ui-line);
  overflow: hidden;
  max-width: 26.25rem;
}
.meterbar {
  height: 100%;
  width: 0%;
  background: var(--learn-right);
  transition: width 90ms linear;
}
#voicePanel select { max-width: 26.25rem; width: 100%; }