/* The Loop — styles, from the "Homeschool lesson tracker app" design canvas.
   Reads tokens.css only. Old TV browsers: no flex gap, no inset, no :is(), no dialog. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--ground); }
body {
  background: var(--ground); background-image: var(--ground-glow); background-attachment: fixed;
  color: var(--ink); font-family: var(--font); font-size: var(--fs-16); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
button, input, select, textarea { font: inherit; color: inherit; font-family: var(--font); }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: var(--lh-tight); }
p { margin: 0; }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; border-radius: 4px; }
html.tv :focus { outline: var(--focus-w) solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 calc(var(--focus-w) + 4px) rgba(201,111,44,.22); }

.wrap { max-width: var(--content-max); margin: 0 auto; padding: var(--s-8) var(--gutter) var(--s-10); }

/* ---------- header ---------- */
.hdr { position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: var(--s-6); }
.hdr .brand { min-width: 0; }
.hdr h1 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-40); line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.hdr h1 em { display: block; font-style: italic; font-weight: 400; color: var(--muted); }
.hdr .pass { margin-top: var(--s-2); font-size: var(--fs-17); color: var(--muted); font-variant-numeric: tabular-nums; }
.hdr .pass b { color: var(--ink); font-weight: 700; }
.hdr-right { display: flex; align-items: center; flex: 0 0 auto; margin-left: var(--s-4); }
.hdr-right > * + * { margin-left: var(--s-2); }
/* the account: an initial in a circle, a menu underneath */
.umenu-wrap { position: relative; }
.ucircle { width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; background: var(--accent);
  color: var(--on-accent); font-weight: 700; font-size: var(--fs-15); letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center; }
.ucircle:hover, .ucircle.on { background: var(--accent-hover); }
.ucircle.on { border-color: var(--terracotta); }
.umenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-3); box-shadow: var(--shadow-card);
  padding: var(--s-4); }
.umenu .who { margin: 0 0 var(--s-3); font-size: var(--fs-13); text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); font-weight: 700; display: block; }
.umenu .btn { width: 100%; }
.umenu .btn + .btn { margin-top: var(--s-2); }
.umenu .hint { color: var(--muted); font-size: var(--fs-13); margin: 0 0 var(--s-3); text-transform: none; letter-spacing: 0; }
.pill.demo { background: var(--tint-terracotta); color: var(--terracotta); }
html.tv .ucircle { width: 72px; height: 72px; font-size: var(--fs-19); }
html.tv .umenu { min-width: 320px; padding: var(--s-5); }

.sprig { position: absolute; right: 88px; top: -8px; width: 120px; height: 80px; pointer-events: none; }
.sprig span { position: absolute; display: block; }
.sprig .l1 { left: 0; top: 34px; width: 44px; height: 18px; border-radius: 0 100% 0 100%; background: #5f8a63; transform: rotate(-28deg); }
.sprig .l2 { left: 26px; top: 12px; width: 40px; height: 16px; border-radius: 0 100% 0 100%; background: #3d6b4f; transform: rotate(18deg); }
.sprig .f1 { left: 58px; top: 26px; width: 26px; height: 26px; border-radius: 50%; background: #e0893a; box-shadow: inset -4px -4px 0 rgba(120,60,10,.18); }
.sprig .f2 { left: 74px; top: 2px; width: 22px; height: 22px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #f0c419; transform: rotate(20deg); }
.sprig .f3 { left: 96px; top: 34px; width: 12px; height: 12px; border-radius: 50%; background: #f3a892; }
@media (max-width: 900px) { .sprig { display: none; } }
html.tv .sprig { display: none; }

/* ---------- the wreath mark ---------- */
.mark { display: flex; align-items: center; min-width: 0; }
.wreath { position: relative; width: var(--wreath, 96px); height: var(--wreath, 96px); flex: 0 0 auto; margin-right: 18px; }
.wreath i { position: absolute; display: block; }
.wreath .lf { left: 36.46%; top: 6.25%; width: 27.08%; height: 11.46%; border-radius: 0 100% 0 100%;
  transform-origin: 50% 381.82%; background: var(--leaf-a); }
.wreath .lf.b { background: var(--leaf-b); }
.wreath .orange { left: 64.58%; top: 2.08%; width: 18.75%; height: 18.75%; border-radius: 50%;
  background: #e0893a; box-shadow: inset -3px -3px 0 rgba(120, 60, 10, .18); }
.wreath .apple { left: 10.42%; top: 66.67%; width: 18.75%; height: 17.71%;
  border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; background: #c8453a; box-shadow: inset -3px -3px 0 rgba(90, 20, 10, .2); }
.wreath .stem { left: 18.75%; top: 62.5%; width: 2.08%; height: 6.25%; border-radius: 1px; background: #5a3a1e; }
.wreath .aleaf { left: 20.83%; top: 60.42%; width: 9.38%; height: 4.17%; border-radius: 0 100% 0 100%;
  background: #7fa66f; transform: rotate(-20deg); }
@media (max-width: 560px) { :root { --wreath: 52px; } .wreath { margin-right: 14px; } }
html.tv { --wreath: 120px; }

.pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--muted); font-size: var(--fs-13); font-weight: 600; white-space: nowrap; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--faint); }
.pill.live { background: var(--pill-bg); color: var(--pill-ink); }
.pill.live::before { background: var(--pill-dot); }
.pill.warn { background: var(--pill-bg); color: var(--pill-ink); }
.pill.bad { background: rgba(168,69,47,.14); color: var(--danger); }
.pill.bad::before { background: var(--danger); }

/* ---------- tabs: bottom bar on phones, pills under the header everywhere else ---------- */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface); border-top: 1px solid var(--line); }
.tabs button { flex: 1; border: 0; background: transparent; color: var(--muted); font-size: var(--fs-15); font-weight: 600; }
.tabs button.on { color: var(--accent); }
@media (min-width: 720px) {
  html:not(.tv) body { padding-bottom: var(--s-10); }
  html:not(.tv) .wrap { display: flex; flex-direction: column; }
  html:not(.tv) .wrap > .hdr { order: 1; }
  html:not(.tv) .wrap > .tabs { order: 2; }
  html:not(.tv) .wrap > .banner { order: 3; }
  html:not(.tv) .wrap > *:not(.hdr):not(.tabs):not(.banner) { order: 4; }
  html:not(.tv) .tabs { position: static; height: auto; border-top: 0; border-bottom: 1px solid var(--line);
    padding: 0 0 var(--s-3); margin-bottom: var(--s-5); background: transparent; }
  html:not(.tv) .tabs button { flex: 0 0 auto; padding: 10px 20px; border-radius: var(--r-pill);
    margin-right: 6px; font-weight: 500; color: var(--ink-2); font-size: var(--fs-16); }
  html:not(.tv) .tabs button:hover { background: var(--hover); }
  html:not(.tv) .tabs button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
}
html.tv .tabs { position: static; height: auto; border: 0; padding: 0; background: transparent; }
html.tv .tabs button { flex: 0 0 auto; min-height: var(--tap); padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill); margin-right: var(--s-3); background: var(--surface-2); }
html.tv .tabs button.on { background: var(--accent); color: var(--on-accent); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
  padding: 11px 18px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); font-weight: 500; font-size: var(--fs-15); transition: background var(--t-fast) var(--ease); }
.btn:hover { background: var(--hover); }
.btn:disabled { cursor: default; background: transparent; color: var(--disabled); border-color: var(--line-2); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 700; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.primary:disabled { background: var(--line-2); color: var(--disabled); border-color: var(--line-2); }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.sm { min-height: 40px; padding: 8px 14px; }
html.tv .btn.sm { min-height: 64px; }

/* ---------- banner / prose ---------- */
.banner { background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); display: flex; align-items: center; justify-content: space-between; }
.banner p { color: var(--ink-2); font-size: var(--fs-15); }
.banner .btn { margin-left: var(--s-3); }
.explain { color: var(--muted); font-size: var(--fs-15); margin: 0 0 var(--s-5); }

/* ---------- pass navigation ---------- */
.passnav { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: var(--s-5); }
.passnav .btn { margin-right: var(--s-2); white-space: nowrap; background: var(--surface-2); }
.passnav .btn.primary { background: var(--surface-2); color: var(--ink); border-color: var(--accent); font-weight: 600; }
.passnav .btn.primary:hover { background: var(--hover); }
.passnav .pv { color: var(--muted); font-size: var(--fs-15); margin-left: auto; padding-left: var(--s-3); }
html.tv .passnav .pv { font-size: var(--fs-17); }

/* ---------- the loop ---------- */
.loop { position: relative; }
.loop .rows { position: relative; padding-left: var(--s-8); }
.loop .rows::before { content: ''; position: absolute; left: 5px; top: 36px; bottom: 28px; width: 2px; background: var(--vine); z-index: 0; }
.vine { position: absolute; left: -30px; top: 36px; bottom: 28px; width: 70px; overflow: hidden; pointer-events: none; z-index: 0; }
.vine i { position: absolute; display: block; }
.vine .vl { transform-origin: 0 50%; }
.vine .vl.r { transform-origin: 100% 50%; border-radius: 100% 0 100% 0; }
.vine .vl.l { border-radius: 0 100% 0 100%; }
.vine .vl.a { background: #7fa66f; }
.vine .vl.b { background: #5f8a63; }
.vine .berry { border-radius: 50%; background: #f3a892; }
.loop .row, .loop .card { position: relative; z-index: 1; }
html.tv .loop .rows { padding-left: var(--s-10); }

.row { position: relative; border-bottom: 1px solid var(--line); }
.row > button { display: flex; align-items: center; width: 100%; min-height: var(--tap); padding: 20px 0;
  background: transparent; border: 0; text-align: left; color: inherit; font: inherit; }
.row .dot { position: absolute; left: -27px; top: 50%; margin-top: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.row .lbl { flex: 0 1 auto; min-width: 0; font-size: var(--fs-17); font-weight: 600; color: var(--ink); }
/* the tag belongs to the title, so it sits beside it; the minutes get pushed to the edge */
.row .tag { flex: 0 0 auto; font-size: var(--fs-13); background: var(--surface-2); color: var(--muted);
  padding: 2px 10px; border-radius: var(--r-pill); margin-left: var(--s-3); font-weight: 600; }
.row .tag.now { background: var(--c); color: #fff; }
.row .tag.was { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 600; }
.row .tag.nil { background: transparent; color: var(--terracotta); border: 1px solid var(--terracotta); font-weight: 600; }
.row.done { opacity: .65; }
.row.done .dot { background: var(--faint); }
.row > button:hover .lbl { color: var(--terracotta); }
html.tv .row .dot { left: -37px; width: 16px; height: 16px; margin-top: -8px; }

/* ---------- the tile ---------- */
.card { position: relative; background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-4);
  padding: 34px 36px 32px; box-shadow: var(--shadow-card); margin: var(--s-3) 0; }
.card::before { content: ''; position: absolute; left: -34px; top: 30px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--c, var(--accent)); border: 3px solid var(--ground); }
.card::after { content: ''; position: absolute; left: 0; top: 28px; bottom: 28px; width: 5px;
  border-radius: 0 4px 4px 0; background: var(--c, var(--accent)); }
.card .subject { font-family: var(--serif); font-weight: 500; font-size: var(--fs-48); line-height: 1; color: var(--ink);
  display: inline-block; background: linear-gradient(transparent 68%, var(--highlight) 68%, var(--highlight) 92%, transparent 92%); }
.card .eyebrow { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 700; }
/* what this tile is, said plainly at the top of it */
.badge { display: inline-block; margin-bottom: var(--s-3); padding: 5px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-13); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.badge.done { background: var(--accent); color: var(--on-accent); }
.badge.nil { background: var(--terracotta); color: #fff; }
.badge.next { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
html.tv .badge { font-size: var(--fs-15); padding: 8px 20px; }
@media (max-width: 560px) { .card { padding: var(--s-5); } }
html.tv .card::before { left: -44px; width: 20px; height: 20px; }

/* Every open tile has the same shape. What it is gets said in words, not in styling. */

.status { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.status li { font-size: var(--fs-15); color: var(--muted); padding: 1px 0; }
.status li b { font-weight: 600; color: var(--ink-2); }

.tasks { list-style: none; margin: 22px 0 0; padding: 0; }
.tasks li + li { margin-top: var(--s-3); }
/* everything below this line is beyond what the year asks for today */
.tasks li.edge { padding-bottom: var(--s-3); border-bottom: 1px dashed var(--line); }
.tasks li .tick { display: flex; align-items: flex-start; width: 100%; text-align: left; background: transparent;
  border: 0; padding: 0; min-height: 34px; color: var(--ink); font-size: var(--fs-19); line-height: 1.4; }
.tasks li .tick:disabled { cursor: default; }
.tasks .box { flex: 0 0 auto; width: 26px; height: 26px; margin-right: 14px; margin-top: 2px;
  border: 2px solid #b6c2ae; border-radius: 8px; background: var(--surface-3);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; }
.tasks li.on .box { background: var(--c, var(--accent)); border-color: transparent; }
.tasks li.on .txt { color: var(--muted); }
.tasks .txt { flex: 1; }
.tasks .txt b { color: var(--terracotta); font-weight: 700; }
.tasks .txt i, .status i, .steps i, .chip i, .glab i { font-family: var(--serif); font-style: italic; font-size: 1.06em; }
.tasks li.on .txt b { color: var(--faint); }
html.tv .tasks li .tick { font-size: var(--fs-19); }
html.tv .card { padding: var(--s-5) var(--s-6) var(--s-6); }
html.tv .card .subject { font-size: var(--fs-40); }
html.tv .tasks { margin-top: var(--s-4); }
html.tv .tasks .box { width: 34px; height: 34px; font-size: 21px; border-radius: 9px; }

/* Literature only: a book takes as long as it takes, so finishing one is asked on the
   reading task itself rather than on a line of its own. One pill: "Finished?" until it
   is, then "Yes". Clicking it again puts the book back. */
.tasks li { display: flex; align-items: center; }
.tasks li .tick { flex: 1; min-width: 0; }
.bookpill { flex: 0 0 auto; margin-left: var(--s-4); margin-right: var(--s-1); min-height: 34px; padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-pill); background: var(--tint-danger); color: var(--danger);
  font-size: var(--fs-13); font-weight: 700; white-space: nowrap; }
.bookpill:hover { background: var(--tint-danger-hi); }
.bookpill.on { background: var(--tint-accent); color: var(--accent); }
.bookpill.on:hover { background: var(--tint-accent-hi); }
.bookpill:disabled { background: var(--surface-2); color: var(--disabled); }
html.tv .bookpill { min-height: 60px; padding: 0 var(--s-5); font-size: var(--fs-17); }
@media (max-width: 620px) { .bookpill { margin-left: var(--s-2); padding: 0 var(--s-3); font-size: var(--fs-11); } }
}


.proc { margin-top: 0; }
/* Details and More sit on one line: one row of secondary controls, not two stacked. */
.procrow { display: flex; align-items: center; flex-wrap: wrap; }
.procrow .morerow { margin-top: 0; margin-left: var(--s-3); }
.proc::before { content: ''; display: block; height: 1px; background: var(--line-2); margin: var(--s-6) 0 var(--s-5); }
/* The two secondary controls carry translucent fills so they read as buttons and as
   two different actions, without becoming solid chips competing with Done. */
.steps-toggle { border: 0; padding: 0 var(--s-4); min-height: 40px; border-radius: var(--r-pill);
  background: var(--tint-accent); color: var(--accent); font-size: var(--fs-16); font-weight: 600; text-align: left; }
.steps-toggle:hover { background: var(--tint-accent-hi); }
.steps { list-style: none; margin: 14px 0 0; padding: 0; color: var(--ink-2); font-size: var(--fs-16); line-height: 1.4; }
.steps li { position: relative; padding-left: var(--s-6); }
.steps li + li { margin-top: var(--s-3); }
.steps li::before { content: '\2022'; position: absolute; left: 0; color: #9fb28f; }
html.tv .steps { font-size: var(--fs-17); }

/* reveal another set of pages for a session that wants to push on.
   Same plain-text treatment as Details: they are two controls of the same weight. */
.morerow { display: flex; margin-top: var(--s-3); }
.morerow .more + .more { margin-left: var(--s-2); }
.more { border: 0; padding: 0 var(--s-4); min-height: 40px; border-radius: var(--r-pill);
  background: var(--tint-terracotta); color: var(--terracotta); font-size: var(--fs-16); font-weight: 600; text-align: left; }
.more:hover { background: var(--tint-terracotta-hi); }
.more:disabled { opacity: .5; cursor: default; }
html.tv .steps-toggle, html.tv .more { font-size: var(--fs-19); min-height: 64px; padding: 0 var(--s-5); }


/* The lesson's own action leads the row that Details and the item controls sit in. */
.act { min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-pill); font-size: var(--fs-15);
  font-weight: 700; background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); }
.act:hover { background: var(--hover); }
.act.primary { padding: 0 var(--s-6); background: var(--accent); color: var(--on-accent); border-color: transparent; }
.act.primary:hover { background: var(--accent-hover); }
.act:disabled { background: var(--surface-3); border-color: var(--line-2); color: var(--disabled); }
.act.primary:disabled { background: var(--line-2); border-color: transparent; }
.procrow .act { margin-right: var(--s-3); }
html.tv .act { min-height: 72px; padding: 0 var(--s-6); font-size: var(--fs-19); }

/* TV: the title, pass count and pass navigation hold their place while the loop scrolls
   under them. The same fixed glow as the page behind, so there is no seam. */
html.tv .hdr, html.tv .passnav {
  position: sticky; z-index: 20;
  background: var(--ground); background-image: var(--ground-glow); background-attachment: fixed;
}
html.tv .hdr { top: 0; padding: var(--s-5) 0 var(--s-4); align-items: center; }
/* A three-line hero would eat a third of the screen once it is pinned there. */
html.tv .hdr h1 { font-size: var(--fs-28); white-space: nowrap; }
html.tv .hdr .wreath { --wreath: 104px; }
/* .brand carries min-width:0 so long titles can wrap; on one line that lets it overflow
   under the tabs instead of pushing them along. */
html.tv .hdr .mark { flex: 0 0 auto; min-width: auto; }
html.tv .hdr .brand { min-width: auto; }
/* The right side takes what is left and wraps inside it, so with the tabs, the pill and
   the account circle all up here nothing is ever pushed off the edge of the screen. */
html.tv .hdr-right { margin-left: var(--s-6); flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: var(--s-2); }
html.tv .hdr .mark { align-items: center; }
html.tv .hdr .pass { margin-top: 2px; font-size: var(--fs-17); }

html.tv .passnav { top: var(--hdr-h, 220px); z-index: 15; padding: var(--s-2) 0 var(--s-4); margin-bottom: 0; }
/* the D-pad does its own scrolling against topGuard(); this is only for anything else */
html.tv .loop .row, html.tv .loop .card { scroll-margin-top: calc(var(--hdr-h, 220px) + 120px); }

.done-year { text-align: center; padding: var(--s-10) var(--s-4); }
.done-year h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-40); }

/* ---------- Progress ---------- */
.pcard { position: relative; background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-3);
  padding: var(--s-5); margin-bottom: var(--s-3); overflow: hidden; }
.pcard::after { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 5px;
  border-radius: 0 4px 4px 0; background: var(--c, var(--accent)); }
.pcard .top { display: flex; align-items: baseline; justify-content: space-between; }
.pcard h3 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-22); color: var(--ink); }
.pcard .count { color: var(--muted); font-size: var(--fs-15); font-variant-numeric: tabular-nums; }
.pcard .fin { color: var(--ok); font-weight: 700; font-size: var(--fs-13); }
.bar { position: relative; height: 10px; background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-pill); margin: var(--s-3) 0; }
.bar > div { height: 100%; background: var(--c); border-radius: var(--r-pill); transition: width var(--t-base) var(--ease); }
/* where the year says you should be: to the right of the fill means behind */
.bar > .want { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px;
  background: var(--ink); opacity: .5; border-radius: 1px; transition: left var(--t-base) var(--ease); }

.pcard .state { font-size: var(--fs-13); font-weight: 700; padding: 2px 10px; border-radius: var(--r-pill);
  margin-left: var(--s-3); margin-right: auto; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.pcard .state.on { background: rgba(61, 107, 79, .12); color: var(--accent); }
.pcard .state.ahead { background: rgba(61, 107, 79, .12); color: var(--accent); }
.pcard .state.behind { background: rgba(201, 111, 44, .16); color: var(--terracotta); }
.pcard .state.done { background: rgba(61, 107, 79, .12); color: var(--accent); }
.pcard .top { flex-wrap: wrap; }
.note { width: 100%; margin-top: var(--s-4); padding: var(--s-3); border: 1px solid var(--line);
  border-radius: var(--r-2); background: var(--surface-3); min-height: 64px; resize: vertical; color: var(--ink); }
.who { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-13);
  text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: var(--s-4) 0 0; font-weight: 700; }
.linky { background: transparent; border: 0; padding: 0 0 0 var(--s-3); color: var(--accent); font-size: var(--fs-13);
  font-weight: 700; text-transform: none; letter-spacing: 0; min-height: 44px; text-decoration: underline; }
.linky:hover { color: var(--terracotta); }
.empty { color: var(--faint); font-size: var(--fs-15); padding: var(--s-2) 0; }

/* ---------- Curriculum ---------- */
.cwrap { padding-bottom: var(--s-10); }
.csec { background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-3);
  margin-bottom: var(--s-3); box-shadow: var(--shadow-card); overflow: hidden; }
.chead { display: flex; align-items: center; width: 100%; background: transparent; border: 0;
  min-height: var(--tap); padding: var(--s-3) var(--s-5); text-align: left; color: var(--ink); }
.chead:hover { background: var(--hover); }
.chead .cchev { color: var(--faint); width: 1.4em; }
.chead .cname { flex: 1; font-family: var(--serif); font-weight: 500; font-size: var(--fs-22); }
.chead .ccount { color: var(--muted); font-size: var(--fs-15); font-variant-numeric: tabular-nums; }
.cbody { padding: 0 var(--s-5) var(--s-5); border-top: 1px solid var(--line-2); }
.ctrack + .ctrack { margin-top: var(--s-5); border-top: 1px solid var(--line-2); }
.cgroup { display: flex; align-items: flex-start; margin-top: var(--s-4); }
.glab { flex: 0 0 9.5em; padding: 10px var(--s-3) 0 0; font-size: var(--fs-13); text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint); font-weight: 700; }
.chips { flex: 1; min-width: 0; }
@media (max-width: 620px) {
  .cgroup { display: block; }
  .glab { padding: 0 0 var(--s-2); }
}
.chips { display: flex; flex-wrap: wrap; }
.chip { margin: 0 var(--s-2) var(--s-2) 0; min-height: 40px; padding: 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-3);
  color: var(--ink-2); font-size: var(--fs-15); font-variant-numeric: tabular-nums; }
.chip:hover { background: var(--hover); }
.chip.on { background: var(--c); border-color: transparent; color: #fff; }
.chip i { font-style: italic; opacity: .75; margin-left: .45em; font-size: .9em; }
.cgroup.wide .chips { display: block; }
.cgroup.wide .chip { display: block; width: 100%; margin-right: 0; text-align: left;
  min-height: var(--tap); font-variant-numeric: normal; }
.cnote { color: var(--faint); font-size: var(--fs-15); margin-top: var(--s-4); }

/* ---------- the door ---------- */
.door { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s-6) var(--gutter); }
.doorcard { width: 100%; max-width: 420px; text-align: center; background: var(--surface); border: 1px solid var(--line-3);
  border-radius: var(--r-4); box-shadow: var(--shadow-card); padding: var(--s-8) var(--s-8) var(--s-8); }
.doorcard .wreath { --wreath: 96px; margin: 0 auto var(--s-4); display: block; }
.doorcard h1 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-40); line-height: 1.05; letter-spacing: -.01em; color: var(--ink); }
.doorcard .tag { margin: var(--s-2) 0 var(--s-6); color: var(--muted); font-family: var(--serif); font-style: italic; font-size: var(--fs-19); }
.doorcard form { text-align: left; }
.doorcard label { display: block; margin: var(--s-4) 0 var(--s-1); color: var(--ink-2); font-size: var(--fs-13); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; }
.doorcard input { width: 100%; min-height: 48px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface-3); color: var(--ink); font-size: var(--fs-17); }
.doorcard input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.doorcard .btn.primary { width: 100%; margin-top: var(--s-6); min-height: 52px; font-size: var(--fs-17); font-weight: 700; }
.doorcard .err { margin-top: var(--s-4); }
html.tv .doorcard { max-width: 760px; }
.doorcard .qr { display: block; width: 260px; height: 260px; margin: var(--s-4) auto 0; background: #fff; border-radius: var(--r-3); padding: 10px; box-sizing: content-box; }
html.tv .doorcard .qr { width: 420px; height: 420px; }
.doorcard .code { margin-top: var(--s-5); color: var(--muted); font-size: var(--fs-16); }
.doorcard .code b { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.doorcard h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-28); margin-bottom: var(--s-3); }
.doorcard.approve input { text-align: center; letter-spacing: .18em; font-size: var(--fs-22); text-transform: uppercase; margin-top: var(--s-4); }
.doorcard .ok { color: var(--accent); font-size: var(--fs-17); margin: var(--s-4) 0; }

/* ---------- Setup ---------- */
/* Which code is this device actually running: the first thing on the screen, because
   the TV pulls app.js fresh and this is how we tell whether it got the new one. */
.build { display: inline-block; margin-bottom: var(--s-3); padding: 4px var(--s-4); border-radius: var(--r-pill);
  background: var(--tint-accent); color: var(--accent); font-size: var(--fs-13); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.sec { background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-3);
  padding: var(--s-2) var(--s-5) var(--s-5); margin-bottom: var(--s-3); }
.sec h3 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-22); margin: var(--s-4) 0 var(--s-2); }
.sec .hint { color: var(--muted); font-size: var(--fs-15); margin-bottom: var(--s-2); }
.field { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap);
  border-top: 1px solid var(--line-2); }
.field label { color: var(--ink-2); font-size: var(--fs-15); flex: 1; padding-right: var(--s-3); }
.field input[type=number], .field input[type=text] { width: 7em; min-height: 42px; padding: 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-3); text-align: right; color: var(--ink); }
.field input[type=text] { width: 12em; text-align: left; }
.slot { display: flex; align-items: center; border-top: 1px solid var(--line-2); min-height: var(--tap); padding: var(--s-1) 0; }
.slot .n { width: 2em; flex: 0 0 auto; color: var(--faint); font-variant-numeric: tabular-nums; font-size: var(--fs-13); }
.slot select { flex: 1 1 0; min-width: 0; min-height: 42px; border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface-3); padding: 0 var(--s-2); color: var(--ink); }
.slot input { width: 3.6em; flex: 0 0 auto; min-height: 42px; margin-left: var(--s-2); border: 1px solid var(--line);
  border-radius: var(--r-2); background: var(--surface-3); text-align: right; padding: 0 var(--s-2); color: var(--ink); }
.slot .btn.sm { margin-left: var(--s-1); min-width: 36px; padding: 0; flex: 0 0 auto; }
.ta { width: 100%; min-height: 130px; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface-3); resize: vertical; color: var(--ink); }
.btnrow { display: flex; flex-wrap: wrap; margin-top: var(--s-4); }
.btnrow .btn { margin: 0 var(--s-2) var(--s-2) 0; }
html.tv .btnrow .btn.sm { min-height: 72px; padding: 0 var(--s-5); font-size: var(--fs-17); }
.confirm { background: rgba(168,69,47,.08); border: 1px solid var(--danger); border-radius: var(--r-2);
  padding: var(--s-4); margin-top: var(--s-2); }
.saved { color: var(--ok); font-weight: 700; font-size: var(--fs-15); }
.pinbox { display: flex; margin-top: var(--s-2); }
.pinbox input { flex: 1; min-height: var(--tap); padding: 0 var(--s-3); border: 1px solid var(--line);
  border-radius: var(--r-2); background: var(--surface-3); font-size: var(--fs-22); letter-spacing: .2em; color: var(--ink); }
.pinbox .btn { margin-left: var(--s-2); }
.err { color: var(--danger); font-size: var(--fs-15); margin-top: var(--s-2); }

/* ---------- phones ---------- */
@media (max-width: 560px) {
  .field { flex-direction: column; align-items: stretch; padding: var(--s-3) 0; min-height: 0; }
  .field label { padding: 0 0 var(--s-1); }
  .field input[type=number], .field input[type=text] { width: 100%; text-align: left; }
  .field .pinbox { width: 100%; }
  .field .pinbox input { width: auto !important; flex: 1; }
  .card::before { left: -28px; }
  .vine { left: -36px; }
  .wrap { padding-top: var(--s-5); }
}