/*
 * Parent chrome. UX-05, rewritten from UX-01's header.
 *
 * WHAT WAS WRONG
 *
 * Everything lived in one flat row: a mark, seven destinations, a learner
 * switcher, an email address and a sign-out button. On any real screen width it
 * wrapped into two or three ragged lines with no order to them, and it read as a
 * list of everything the app can do rather than as a place you are in.
 *
 * THE SHAPE NOW
 *
 * A thin bar across the top holds only what says WHERE YOU ARE — the mark, and
 * which child you are looking at. A sidebar down the left holds everything that
 * GOES SOMEWHERE, including the way out. Two questions, two places.
 *
 * The sidebar collapses, and the state is read before first paint by an inline
 * script in the head. Without that it would flash open and snap shut on every
 * navigation. Without any script at all it stays open, which is the safe
 * direction: a parent sees every destination rather than none.
 *
 * Guide §2: "The learner side and the parent side share design tokens and share
 * almost nothing else." Nothing here is reused from the learner surface. The
 * numbers are the guide's — 14px parent body, 10px radius on controls, two font
 * weights, 120ms on a parent hover — and the palette comes from tokens.css
 * rather than being redefined.
 */

:root {
  --sidebar-w: 208px;
  --topbar-h: 56px;
}

/* Loaded after `tokens.css`, and these three rules are the reason.
 *
 * Tokens set the body for the LEARNER surface: `--paper` background, and 18px
 * type sized for a nine-year-old reading one word at a time. The guide gives
 * the parent side 14px, and half of these screens are dense tables.
 *
 * So the background is taken as-is — one colour across the whole app is the
 * point — and the type is not. Guide §2: "the two sides share design tokens and
 * share almost nothing else."
 */
body {
  margin: 0;
  background: var(--paper);
  /* System stack. Guide §6, and §4's reason on the learner side — no web font
     anywhere in this app. */
  font: 400 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
  color: var(--ink);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   The top bar
   --------------------------------------------------------------------------- */

.topbar {
  position: sticky;             /* It says where you are, so it stays visible. */
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--topbar-h);
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;          /* Guide §7: 10px on controls. */
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--border); }
.nav-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--indigo-200);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
}
.mark svg { display: block; }
.mark span { font-size: 15px; }

/* The switcher sits at the far end of the bar, away from the mark. It answers
   "whose figures are these", which is a different question from "where am I". */
.switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Guide §12: never colour alone. The current tab is named by the label beside
   it and by `aria-current`, so the indigo border is the third signal rather than
   the only one. */
.switcher-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-right: 4px;
}

.switch {
  display: inline-block;
  padding: 5px 12px;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: color 120ms, border-color 120ms;   /* Guide §10: parent hover 120ms. */
}
.switch-on { border-color: var(--indigo); color: var(--indigo); }
/* Guide §12: every interactive element keeps a visible focus ring. */
.switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--indigo-200); }

/* ---------------------------------------------------------------------------
   The sidebar
   --------------------------------------------------------------------------- */

.sidebar {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 12px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  /* Only the transform animates, so a collapse does not reflow the page. */
  transition: transform 160ms ease;
  z-index: 10;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

.sidebar-nav a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 120ms;
}
.sidebar-nav a:hover { background: var(--indigo-50, rgba(90, 100, 160, 0.09)); }
.sidebar-nav a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--indigo-200); }

.sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.learner-link { padding: 0 12px; font-size: 13px; color: var(--ink); }

.signout { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.signed-in-as {
  font-size: 12px;
  color: var(--ink-muted);
  /* An address longer than the sidebar must not push it wider. */
  overflow-wrap: anywhere;
}
.signout button {
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.signout button:hover { border-color: var(--ink-muted); }
.signout button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--indigo-200); }

/* ---------------------------------------------------------------------------
   The page beside it
   --------------------------------------------------------------------------- */

.page {
  margin-left: var(--sidebar-w);
  transition: margin-left 160ms ease;
}

.messages {
  max-width: 1200px;            /* Guide §2, the same cap as the screens. */
  margin: 16px auto 0;
  padding: 0 24px;
  list-style: none;
}

/* Collapsed: slid out AND hidden.
 *
 * `transform` alone only moves it. The links stay focusable, so tabbing from
 * the top bar walks into a panel nobody can see — the caret disappears and the
 * page appears to stop responding to the keyboard. It is also announced to a
 * screen reader as present, which it is not.
 *
 * `visibility: hidden` takes it out of the tab order and out of the
 * accessibility tree while leaving it in the document, and the toggle's
 * `aria-expanded` is what says it can be brought back. Delayed by the same
 * 160ms so the slide is still seen rather than snapping away.
 *
 * An earlier note here argued the opposite — that off-screen was better than
 * hidden because a screen reader could still follow the toggle. That was wrong
 * in the way that matters: it made the panel reachable by accident and
 * unreachable on purpose. */
[data-nav="closed"] .sidebar {
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 160ms ease, visibility 0s linear 160ms;
}
[data-nav="closed"] .page { margin-left: 0; }

/* ---------------------------------------------------------------------------
   Narrow
   --------------------------------------------------------------------------- */

/* Guide §9: stack below 640px — the common case is a parent checking something
   one-handed. The sidebar covers the page there rather than squeezing it, and
   starts closed, because 208px of a 390px screen is most of it. */
@media (max-width: 860px) {
  .page { margin-left: 0; }
  .sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.18);
  }
  [data-nav="open"] .sidebar { transform: translateX(0); visibility: visible; }
  .switcher-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .switch, .sidebar, .page, .sidebar-nav a { transition: none; }
}


/* ---------------------------------------------------------------------------
   Form controls follow the theme
   --------------------------------------------------------------------------- */

/* WHAT WENT WRONG
 *
 * Moving `tokens.css` into the parent base gave every screen a `--paper`
 * background that flips in dark mode. Seven screens had written their text
 * colour out as `#1C1B19` — which IS the light `--ink`, copied by hand — so on
 * a phone in dark mode they became near-black text on a near-black page. The
 * signup form's labels vanished entirely.
 *
 * The literals are now the tokens, which is exact: light mode is unchanged to
 * the byte. These are the defaults for anything that did not name a colour at
 * all, and they sit here rather than in each template because chrome.css loads
 * before `{% block head %}` — so a screen that wants something different still
 * wins.
 *
 * `color-scheme` is what makes the browser's own parts follow: the caret, the
 * scrollbar, a date picker, the inside of a select. Without it a dark page gets
 * a light scrollbar down the side of it.
 */
:root { color-scheme: light dark; }

input, select, textarea {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-str);
  border-radius: 8px;
  font: inherit;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--indigo-200);
}

/* Checkboxes and radios are drawn by the browser; `accent-color` is the one
   property that tints them without replacing them with something worse. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--indigo);
  min-height: auto;
}