/* Genius Kids — user guide.
 *
 * The whole visual language of the guide is in this file: the generator emits
 * no inline styles and no class this file does not define. Change anything
 * about how the guide looks here and nowhere else.
 *
 * Tokens are copied from app/lib/app/theme.dart, which stays the source of
 * truth for the palette — the guide borrows the app's colours and typographic
 * feel, but it is a document rather than a screen, so it keeps a long measure
 * and quiet hierarchy instead of the app's card language.
 */

:root {
  --primary:      #7CC4C4;  /* decorative tint */
  --primary-dark: #298C95;  /* everything interactive */
  --accent:       #C4886B;
  --bg:           #F5F2EE;
  --surface:      #FFFFFF;
  --ink:          #2C3E3B;
  --muted:        #6B7C79;
  --edge:         #E4DED6;
  --attention:    #A16207;
  --success:      #487F52;
  --danger:       #C0392B;

  --bar-h: 56px;
  --measure: 40rem;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(44, 62, 59, .06), 0 6px 18px rgba(44, 62, 59, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #1B2422;
    --surface:   #232E2C;
    --ink:       #E8EDEB;
    --muted:     #9CAFAB;
    --edge:      #33413E;
    --primary-dark: #7CC4C4;
    --attention: #D8A13C;
    --success:   #7FB98A;
    --danger:    #F0857A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .28);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--primary-dark); text-decoration-color: color-mix(in srgb, var(--primary-dark) 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  min-height: var(--bar-h);
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--edge);
}
.topbar__brand { font-weight: 700; color: var(--primary-dark); text-decoration: none; letter-spacing: -.01em; }

/* Where the reader is, and the way into the tree — the narrow layout only,
   where the tree is folded and nothing else says either. It replaces the
   product's name rather than standing under it: two bands of chrome over
   every page, one of them the same three words every time, is what this
   costs otherwise. */
.topbar__here {
  display: none; align-items: center; gap: 6px; min-width: 0;
  font-weight: 650; color: var(--primary-dark); cursor: pointer;
}
.topbar__here > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__here::after { content: "▾"; flex: none; color: var(--primary-dark); font-size: 12px; }
body:has(#nav-toggle:checked) .topbar__here::after { content: "▴"; }
.topbar--located .topbar__brand { display: none; }
.topbar--located .topbar__here { display: flex; }
.topbar__role, .roles__current {
  font-size: 13px; font-weight: 600; color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  padding: 4px 12px; border-radius: 999px;
}
.topbar__role, .roles { margin-left: auto; }

/* the role chip is a menu: the same task in another role's guide */
.roles { position: relative; }
.roles__current { cursor: pointer; list-style: none; white-space: nowrap; }
.roles__current::-webkit-details-marker { display: none; }
.roles__current::after { content: " ▾"; }
.roles[open] .roles__current::after { content: " ▴"; }
.roles__list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  list-style: none; margin: 0; padding: 6px; min-width: 190px;
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow);
  border: 1px solid var(--edge);
}
.roles__list li { margin: 0; }
.roles__list a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14.5px; }
.roles__list a:hover { background: var(--bg); }
/* «Выйти» ends the visit, so it is not a mis-tap away from the row above it. */
.roles__list li.roles__out { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--edge); }
/* Where nobody has signed in the chip is the one thing it would have offered. */
.topbar__signin { text-decoration: none; }
.topbar__signin:hover { background: color-mix(in srgb, var(--primary) 34%, transparent); }

/* ── layout ──────────────────────────────────────────────────────────────── */
.layout { max-width: 1180px; margin: 0 auto; padding: 0 20px 80px; }
.main { min-width: 0; }

@media (min-width: 940px) {
  .layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }
  .layout--plain { display: block; }
  .layout--plain .main { max-width: 46rem; margin: 0 auto; }
}

/* ── sidebar ─────────────────────────────────────────────────────────────── */
.nav__toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav__list { display: none; }
.nav__toggle:checked ~ .nav__list {
  display: block;
  position: fixed; left: 0; right: 0; top: var(--bar-h); z-index: 9;
  margin: 0; padding: 14px 20px 28px;
  max-height: calc(100vh - var(--bar-h)); overflow-y: auto;
  background: var(--surface); border-bottom: 1px solid var(--edge); box-shadow: var(--shadow);
}
.nav__backdrop { display: none; }
.nav__toggle:checked ~ .nav__backdrop {
  display: block; position: fixed; inset: var(--bar-h) 0 0; z-index: 8;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.nav__list ul { list-style: none; margin: 0; padding: 0; }
.nav__list { margin-top: 14px; font-size: 14.5px; }
.nav__home { display: block; font-weight: 600; padding: 5px 0; margin-bottom: 16px; }
.nav__section { margin-bottom: 2px; }
.nav__fold { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav__fold:not(:checked) ~ ul { display: none; }

.nav__head { display: flex; align-items: center; }
.nav__chevron {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; margin-left: -8px; border-radius: 8px;
  cursor: pointer; color: var(--primary-dark);
}
.nav__chevron:hover { background: var(--surface); }
.nav__chevron svg { transition: transform .12s ease; }
.nav__fold:checked ~ .nav__head .nav__chevron svg { transform: rotate(90deg); }

.nav__title {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
  padding: 6px 8px; border-radius: 8px; text-decoration: none;
  font-size: 15.5px; font-weight: 650; color: var(--ink);
}
.nav__title:hover { background: var(--surface); color: var(--primary-dark); }
.nav__fold:checked ~ .nav__head .nav__title { color: var(--primary-dark); }

.nav__section ul { padding: 2px 0 10px 1.5em; border-left: 1px solid var(--edge); margin-left: 14px; }
.nav__section li a { display: block; padding: 5px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.nav__section li a:hover { background: var(--surface); }
.nav__section li.is-current > a { background: color-mix(in srgb, var(--primary) 24%, transparent); color: var(--primary-dark); font-weight: 600; }

/* section icons, the same ones the app draws (icons.mjs) */
.nav__icon, .sections__icon { flex: none; fill: currentColor; }
.nav__icon { opacity: .8; }
.sections__icon { color: var(--primary-dark); margin-top: 2px; }

.todo-dot { color: var(--accent); font-weight: 700; }

@media (min-width: 940px) {
  .nav { padding: 28px 0 40px; position: sticky; top: var(--bar-h); max-height: calc(100vh - var(--bar-h)); overflow-y: auto; }
  .topbar--located .topbar__brand { display: block; }
  .topbar--located .topbar__here { display: none; }
  /* the tree is a column of the page again, whatever the checkbox says */
  .nav__list, .nav__toggle:checked ~ .nav__list {
    display: block; position: static; max-height: none;
    margin-top: 14px; padding: 0; background: none; box-shadow: none; border-bottom: 0;
  }
  .nav__toggle:checked ~ .nav__backdrop { display: none; }
}

/* ── prose ───────────────────────────────────────────────────────────────── */
.main > * { max-width: var(--measure); }
h1 { font-size: clamp(28px, 5vw, 38px); line-height: 1.2; letter-spacing: -.02em; margin: 28px 0 16px; }
h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.01em; margin: 44px 0 12px; }
h3 { font-size: 17px; margin: 28px 0 8px; }
p, ul, ol { margin: 0 0 16px; }
ul, ol { padding-left: 24px; }
li { margin-bottom: 6px; }
li > ul, li > ol { margin-top: 6px; }
strong { font-weight: 650; }
code { font: 600 .88em/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface); border: 1px solid var(--edge); border-radius: 6px; padding: 2px 6px; }

.lead { font-size: 19px; color: var(--muted); margin-bottom: 28px; }

blockquote {
  margin: 24px 0; padding: 14px 18px;
  background: var(--surface); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow);
}
blockquote p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; font-size: 15.5px; margin: 0 0 20px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--edge); vertical-align: top; }
th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.table-scroll { overflow-x: auto; }

hr { border: 0; border-top: 1px solid var(--edge); margin: 40px 0; }

/* ── screenshots ─────────────────────────────────────────────────────────── */
/* A screenshot is a phone screen: tall and narrow, and it is drawn at three
   sizes. On a narrow window it is four fifths of the column — a share rather
   than a figure, so it follows whatever width the window has. From 940px it is
   a fixed 410 and centred, far under the measure: printed at the measure's
   full width one picture fills a desktop window top to bottom, and one set
   against the left margin of a 40rem column reads as a layout accident. From
   1400px it moves into a column of its own, which is the width the page is
   laid out for.
   The file behind it is 750px wide whichever size is drawn, so tapping the
   picture opens it over the page. That is a `:target` overlay and a cross that
   untargets it, which needs no script — no page of this guide carries one —
   and gives the Back button the same effect as the cross. */
.shot { margin: 26px auto; max-width: 80%; }
.shot__open { display: block; text-decoration: none; cursor: zoom-in; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.shot figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.shot--todo img { opacity: .85; }
.shot--todo figcaption b { color: var(--accent); font-weight: 650; }

@media (min-width: 940px) {
  .shot { max-width: 410px; }
}

/* the picture, opened over the page */
.zoom { display: none; }
.zoom:target {
  display: flex; align-items: center; justify-content: center;
  /* it is a child of .main, which sets the measure on everything it holds —
     and an overlay is not prose */
  position: fixed; inset: 0; max-width: none; z-index: 20; padding: 24px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
}
.zoom__veil { position: absolute; inset: 0; cursor: zoom-out; }
.zoom__shot {
  /* Sized against the window rather than the box around it: a flex item's
     automatic minimum is its own width, and 750px of screenshot then hangs off
     both edges of a phone. */
  position: relative; min-width: 0;
  max-width: min(750px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.zoom__close {
  position: absolute; top: 16px; right: 18px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 26px; line-height: 1; text-decoration: none;
  color: var(--ink); background: var(--surface); box-shadow: var(--shadow);
}

@media (min-width: 1400px) {
  .layout { max-width: 1400px; }
  .shot { float: right; width: 384px; max-width: 384px; margin: 6px 0 22px 44px; clear: right; }
  .main::after { content: ""; display: block; clear: both; }
}

/* ── a role's front page ─────────────────────────────────────────────────── */
.start { list-style: none; padding: 0; margin: 0 0 8px; }
.start li { margin-bottom: 8px; }
.start a { font-weight: 600; }

.sections { list-style: none; padding: 0; margin: 0; }
.sections li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--edge); }
.sections--roles li a { font-size: 18px; }
.sections li:first-child { border-top: 1px solid var(--edge); }
.sections a { font-weight: 600; text-decoration: none; }
.sections span { display: block; margin-top: 2px; font-size: 15px; color: var(--muted); }
.sections i { font-style: normal; white-space: nowrap; opacity: .75; }
.sections span i::before { content: "· "; }

/* ── index ───────────────────────────────────────────────────────────────── */
.group { margin-top: 44px; }
.group__lead { color: var(--muted); margin-top: -6px; }
.tasks { list-style: none; padding: 0; margin: 16px 0 0; }
.tasks li {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 18px; margin-bottom: 10px;
}
.tasks li a { display: block; font-weight: 600; text-decoration: none; }
.tasks li span { display: block; margin-top: 3px; font-size: 15px; color: var(--muted); }
.tasks--roles li a { font-size: 19px; }
.todo { color: var(--accent); }

.stub {
  background: var(--surface); border: 1px dashed var(--edge); border-radius: var(--radius);
  padding: 20px; color: var(--muted); font-size: 15.5px;
}

/* ── pager ───────────────────────────────────────────────────────────────── */
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--edge); }
.pager__link { flex: 1; text-decoration: none; font-weight: 600; }
.pager__link:last-child { text-align: right; }
.pager__link span { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }