/* Hebrew reading app. Plain CSS, no framework, no web fonts, no build step.
   The palette and the component look come from mockup.html, the owner
   approved UI contract. Regenerate the mockup with:
       python3 data/mockup_page.py
   Token values below are copied from that file byte for byte. Keep them in
   step: the mockup is the source of truth, this file follows it. */

/* --- palette ------------------------------------------------------------ */

:root {
  color-scheme: light dark;
  --paper:#EFEDE6; --card:#FBFAF6; --ink:#1A2330; --soft:#4A5566;
  --faint:#7C8798; --rule:#DCD8CC; --teal:#14655F; --teal-bg:#E2EEEC;
  --gold:#8A6413; --gold-bg:#F5EBD4; --gold-ln:#C3A253;
  --made:#5B4A78; --made-bg:#ECE7F3; --red:#B3372B;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#10151D; --card:#1A212B; --ink:#E7E5DE; --soft:#A9B2BF;
  --faint:#78828F; --rule:#2C3542; --teal:#63C0B8; --teal-bg:#16302E;
  --gold:#D8AC4E; --gold-bg:#2E2716; --gold-ln:#7A6128;
  --made:#B9A6E0; --made-bg:#262135; --red:#E06A5E;}}
:root[data-theme="dark"]{
  --paper:#10151D; --card:#1A212B; --ink:#E7E5DE; --soft:#A9B2BF;
  --faint:#78828F; --rule:#2C3542; --teal:#63C0B8; --teal-bg:#16302E;
  --gold:#D8AC4E; --gold-bg:#2E2716; --gold-ln:#7A6128;
  --made:#B9A6E0; --made-bg:#262135; --red:#E06A5E;}
:root[data-theme="light"]{
  --paper:#EFEDE6; --card:#FBFAF6; --ink:#1A2330; --soft:#4A5566;
  --faint:#7C8798; --rule:#DCD8CC; --teal:#14655F; --teal-bg:#E2EEEC;
  --gold:#8A6413; --gold-bg:#F5EBD4; --gold-ln:#C3A253;
  --made:#5B4A78; --made-bg:#ECE7F3; --red:#B3372B;}

/* --- frame -------------------------------------------------------------- */

*{box-sizing:border-box}

/* The hidden attribute is a promise: nothing carrying it is on the page. Its
   own default rule is display:block, which any later display rule beats. This
   one wins instead, for every element and for good. */
[hidden]{display:none !important}

body{margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.5;padding-bottom:70px}

a{color:var(--teal)}

.chrome{max-width:560px;margin:0 auto;padding:18px 12px}

.phone{background:var(--card);border:1px solid var(--rule);border-radius:22px;
  min-height:640px;padding:18px 16px 26px;box-shadow:0 8px 30px rgba(0,0,0,.08)}

/* Keyboard focus must be visible. The ring uses --teal, which is defined in
   both themes, so it stays legible on the light paper and on the dark card.
   Only keyboard focus draws it; a mouse click does not. */
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}

/* Read by a screen reader, never shown. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- header bar --------------------------------------------------------- */

.bar{display:flex;align-items:center;gap:10px;padding-bottom:12px;
  border-bottom:1px solid var(--rule);margin-bottom:14px}
.bar-t{font-weight:700;flex:1;font-size:1.02rem}
.back,.gear{border:none;background:none;color:var(--soft);font-size:1.15rem;
  cursor:pointer;text-decoration:none;line-height:1}

/* --- messages ----------------------------------------------------------- */

.messages{list-style:none;padding:0;margin:0 0 14px}
.msg{background:var(--teal-bg);color:var(--ink);border:1px solid var(--teal);
  border-radius:10px;padding:8px 12px;margin-bottom:6px;font-size:.85rem}

/* --- home: your path ---------------------------------------------------- */

.prog{height:8px;border-radius:99px;background:var(--rule);overflow:hidden}
.prog-fill{height:100%;background:var(--teal)}
.prog-t{font-size:.8rem;color:var(--faint);margin:6px 0 16px}

.lcard{display:flex;align-items:center;gap:12px;padding:13px 14px;margin-bottom:9px;
  border:1px solid var(--rule);border-radius:12px;background:var(--paper);
  color:var(--ink);text-decoration:none}
.lcard.donecard{cursor:pointer}
.lcard.current{border-color:var(--teal);background:var(--teal-bg);cursor:pointer}
.lcard.locked{opacity:.55}
.lnum{width:26px;text-align:center;color:var(--faint)}
.donecard .lnum{color:var(--teal);font-weight:700}
.lname{flex:1;font-size:.92rem}
.lstate{font-size:.72rem;color:var(--faint)}
.cont{border:none;background:var(--teal);color:#fff;border-radius:8px;
  padding:7px 14px;font-weight:700;cursor:pointer;font-size:.9rem}
.tail{color:var(--faint);font-size:.82rem;text-align:center;margin-top:14px}

/* --- lesson ------------------------------------------------------------- */

.intro p{margin:0 0 12px;font-size:.95rem}
.ltext{margin:0 0 12px}

.sec{margin-top:20px}
.sec-k{font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--faint);font-weight:700}
.instr{margin:5px 0 10px;font-size:.85rem;color:var(--soft);font-style:italic}

.row-chips{display:flex;flex-wrap:wrap;gap:8px;direction:rtl;padding-top:12px}

.chip{position:relative;font-family:"Frank Ruehl CLM",FrankRuehl,"Times New Roman",serif;
  font-size:1.7rem;line-height:1.25;padding:8px 16px;border-radius:12px;cursor:pointer;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.chip.made{background:var(--made-bg);color:var(--made);border-color:transparent}
.chip.real{background:var(--teal-bg);color:var(--teal);border-color:transparent}
.chip.read{background:var(--gold-bg);color:var(--ink);border-color:var(--gold-ln)}
.chip:active{transform:scale(.96)}
.chip.playing{box-shadow:0 0 0 3px var(--teal);}

/* Phase 1 has no recordings. A silent item is visible but not tappable. */
.chip.no-clip{cursor:default;opacity:.72}
.chip.no-clip:active{transform:none}

/* A divine name is shown, never played, and carries no tap affordance. */
.chip.divine{background:none;border-color:transparent;cursor:default;
  padding:8px 6px}
.chip.divine:active{transform:none}

.chip-tag{position:absolute;top:-9px;right:0;direction:ltr;background:var(--gold-bg);
  color:var(--gold);border:1px solid var(--gold-ln);font-size:.58rem;font-weight:700;
  font-family:-apple-system,sans-serif;padding:1px 7px;border-radius:99px;white-space:nowrap}

.milestone{display:inline-block;margin:8px 0 2px;padding:8px 13px;background:var(--gold-bg);
  color:var(--gold);border:1px solid var(--gold-ln);border-radius:8px;
  font-size:.88rem;font-weight:700}

.note{color:var(--faint);font-size:.78rem;margin:8px 0 0}

.done-form{margin:0}
.done{display:block;margin:26px auto 0;padding:12px 34px;border:none;border-radius:12px;
  background:var(--teal);color:#fff;font-weight:800;font-size:1rem;cursor:pointer}
.done-note{text-align:center}

/* --- editor mode -------------------------------------------------------- */

/* Copied from mockup.html, screen s-edit. The switch, the gold banner, the
   dashed click-to-edit boxes, the + chip and the exercise builder. */

.switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--rule);border-radius:999px;padding:4px 10px 4px 4px;
  text-decoration:none}
.switch .knob{width:16px;height:16px;border-radius:50%;background:var(--faint)}
.switch.on{border-color:var(--gold-ln);background:var(--gold-bg)}
.switch.on .knob{background:var(--gold)}
.sw-t{font-size:.72rem;font-weight:700;color:var(--soft)}
.switch.on .sw-t{color:var(--gold)}

.editmode .bar{border-bottom-color:var(--gold-ln)}
.editnote{background:var(--gold-bg);border:1px solid var(--gold-ln);color:var(--ink);
  font-size:.82rem;border-radius:10px;padding:9px 12px;margin-bottom:14px}
/* The dashed resting box is drawn with a border, not with an outline. The
   outline belongs to keyboard focus: while it drew this box as well, a focus
   ring on an editable paragraph was invisible. */
.editable{border:1.5px dashed var(--gold-ln);border-radius:4px;padding:3px 5px;
  cursor:text;position:relative}
.pencil{color:var(--gold);font-size:.8rem;margin-left:6px}
.addchip{font-family:-apple-system,sans-serif;font-weight:700;color:var(--faint);
  border-style:dashed}
.addsec{display:block;margin:24px auto 0;padding:10px 22px;border:1.5px dashed var(--gold-ln);
  background:none;border-radius:12px;color:var(--gold);font-weight:700;cursor:pointer}

.palette{margin-top:18px;border:1px solid var(--gold-ln);border-radius:14px;
  padding:12px;background:var(--paper)}
.pal-k{font-size:.8rem;font-weight:700;display:flex;justify-content:space-between}
.pal-x{border:none;background:none;color:var(--faint);font-size:1rem;cursor:pointer}
.pal-k2{font-size:.68rem;color:var(--faint);text-transform:uppercase;
  letter-spacing:.1em;margin-top:10px}
.pal-grid{display:flex;flex-wrap:wrap;gap:5px;direction:rtl;margin-top:8px}
.pal{font-family:"Frank Ruehl CLM",FrankRuehl,"Times New Roman",serif;font-size:1.25rem;
  min-width:40px;padding:5px 8px;border:1px solid var(--rule);border-radius:8px;
  background:var(--card);color:var(--ink);cursor:pointer}
.pal-out{margin-top:12px;font-size:.85rem;display:flex;align-items:center;gap:8px}
.pal-slot{min-width:70px;display:inline-block;border-bottom:2px solid var(--gold-ln);
  font-size:1.4rem;text-align:center}
.mini{border:none;border-radius:8px;background:var(--gold);color:#fff;
  padding:5px 12px;font-weight:700;cursor:pointer}
/* One key back in the builder. Quiet, beside the composition it undoes. */
.palback{border:1px solid var(--rule);border-radius:8px;background:var(--card);
  color:var(--soft);font:inherit;font-size:.78rem;padding:4px 10px;cursor:pointer;
  min-height:24px}

/* --- editor mode: additions the mockup does not draw -------------------- */

/* Remove controls (OWNER-APPROVED 2026-08-05) and the section-kind picker.
   Both are quiet: gold or faint, never a red button, and only in edit mode. */

/* Both remove controls are at least 24px square, so a finger can hit them,
   and both are drawn in --soft, a step darker than the --faint they used,
   because they have to be readable to be used on purpose. The item control sits inside its own tile, not over the
   edge of it, so it cannot land on the chip beside it. */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.delsec,.delx{border:none;background:none;color:var(--soft);cursor:pointer;
  font-family:-apple-system,sans-serif;line-height:1;padding:0;
  min-width:24px;min-height:24px}
.delsec{font-size:1.1rem}
.itemwrap{position:relative;display:inline-block}
.delx{position:absolute;top:0;left:0;width:24px;height:24px;
  border:1px solid var(--rule);border-radius:50%;background:var(--card);
  font-size:.85rem;direction:ltr}

.kindpick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
/* The question sits on its own line, above the four choices. */
.kindpick .pal-k2{flex-basis:100%;text-align:center;margin-top:0}
.kindbtn{border:1px solid var(--gold-ln);background:var(--gold-bg);color:var(--gold);
  border-radius:999px;padding:6px 13px;font-size:.8rem;font-weight:700;cursor:pointer;
  font-family:inherit}

/* The box that replaces a paragraph while it is being edited. */
.edit-area{width:100%;min-height:5.5em;padding:8px 10px;border:1px solid var(--gold-ln);
  border-radius:8px;background:var(--card);color:var(--ink);font:inherit;
  font-style:normal}
.editrow{display:flex;align-items:center;gap:10px;margin-top:6px}

/* Wording the script needs. Read by JavaScript, shown to nobody. */
.editstrings{display:none}

/* --- sign in and the other auth pages ----------------------------------- */

.brandmark{font-size:2.2rem;text-align:center;margin-top:40px}
.brand{font-family:"Iowan Old Style",Palatino,Georgia,serif;text-align:center;
  font-size:1.8rem;margin:6px 0 2px}
.sub{text-align:center;color:var(--soft);font-size:.92rem;margin:0 0 26px}
.sub em{color:var(--faint)}
.auth-h{font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--faint);font-weight:700;text-align:center;margin:0 0 10px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:12px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);
  color:var(--ink);font-size:.95rem;cursor:pointer;font-weight:600;text-decoration:none}
.gicon{font-weight:800;color:var(--teal)}
.plist{list-style:none;padding:0;margin:0}
.or{display:flex;align-items:center;gap:10px;color:var(--faint);margin:16px 0;font-size:.8rem}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--rule)}
.rule{border:none;border-top:1px solid var(--rule);margin:16px 0}

/* The mockup calls this .inp. Django renders its own widgets without a class,
   so the same look is also matched by form scoped selectors. */
.inp,
.authform input[type="text"],
.authform input[type="email"],
.authform input[type="password"],
.stack input[type="text"],
.stack input[type="email"],
.stack input[type="password"],
.stack select{width:100%;padding:11px 12px;margin-bottom:10px;
  border:1px solid var(--rule);border-radius:10px;background:var(--paper);
  color:var(--ink);font-size:.95rem;font-family:inherit}

.authform{margin:0}
.frow{margin:0 0 4px}
.tick{margin-right:8px}
.btn-link{display:inline-block;color:var(--teal);font-size:.85rem;margin-top:10px}
.primary{width:100%;padding:12px;border:none;border-radius:10px;background:var(--teal);
  color:#fff;font-weight:700;font-size:.98rem;cursor:pointer;display:block;
  text-align:center;text-decoration:none;margin-top:4px}
.small{text-align:center;font-size:.82rem;color:var(--soft)}
.small a{color:var(--teal)}
.fieldset{border:none;padding:0;margin:0}
.fhelp{display:block;font-size:.78rem;color:var(--faint);margin:-6px 0 10px}
.flabel{display:block;font-size:.8rem;color:var(--soft);margin-bottom:4px}
.ferr{color:var(--red);font-size:.82rem;padding-left:18px;margin:0 0 6px}
.errorlist{color:var(--red);font-size:.82rem;padding-left:18px}
.helptext{display:block;font-size:.78rem;color:var(--faint)}

/* --- settings ----------------------------------------------------------- */

.stack{margin:0}
.stack label{display:block;font-size:.8rem;color:var(--soft);margin-bottom:4px}
.stack p{margin:0 0 6px}

/* --- one deliberate change to the mockup -------------------------------- */

/* In dark mode --teal is a pale mint and --gold a pale sand. White on either
   reads at about 2:1, which is not legible. The mockup already flips its own
   teal filled control (.tab.on) to dark ink; the same flip is applied here to
   every filled button, teal (.cont, .done, .primary) and gold (.mini). */
@media (prefers-color-scheme: dark){.cont,.done,.primary,.mini{color:#0e1418}}
:root[data-theme="dark"] .cont,
:root[data-theme="dark"] .done,
:root[data-theme="dark"] .primary,
:root[data-theme="dark"] .mini{color:#0e1418}
:root[data-theme="light"] .cont,
:root[data-theme="light"] .done,
:root[data-theme="light"] .primary,
:root[data-theme="light"] .mini{color:#fff}

.linkish{background:none;border:0;padding:0;color:var(--teal);font:inherit;
  cursor:pointer;text-decoration:underline}
.plain{list-style:none;padding:0;margin:18px 0 0;font-size:.88rem}
.plain li{margin-bottom:8px}