/* 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):not(.ftr) { order: 4; }
  html:not(.tv) .wrap > .ftr { order: 5; }
  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 .btn[aria-disabled="true"] { opacity: .55; }
.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.skip { background: var(--tint-terracotta); color: var(--terracotta); border: 1px solid transparent; font-weight: 600; }
.badge.skip { background: var(--tint-terracotta-hi); color: var(--terracotta); }
.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); }
.yearline { color: var(--ink-2); font-size: var(--fs-15); margin: 0 0 var(--s-4); }
.field input[type=date] { min-height: 42px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-3); color: var(--ink); }
.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.poemf input { margin-left: var(--s-2); }
.field.poemf input[type="text"] { flex: 0 1 34%; min-width: 0; }
.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); }
}

/* Curriculum: the per-session kinds of task, counted over the year */
.ctasks { margin-top: var(--s-5); border-top: 1px solid var(--line-2); padding-top: var(--s-3); }
.ctasks .glab { flex: none; padding: 0 0 var(--s-2); }
.ctask { display: grid; grid-template-columns: 5.5em 1fr auto; grid-template-rows: auto auto; column-gap: var(--s-3); align-items: center;
  padding: var(--s-2) 0; border-top: 1px solid var(--line-2); font-size: var(--fs-15); }
.ctask .cwho { color: var(--terracotta); font-weight: 700; }
.ctask.who-both .cwho { color: var(--accent); }
.ctask .clabel { color: var(--ink-2); min-width: 0; }
.ctask .ccount { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctask .cbar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; margin-top: 4px; }
.ctask .cbar i { display: block; height: 100%; background: var(--c); }

/* Curriculum: tracks fold, and many small groups run in columns */
.ctrack + .ctrack, .ctasks { margin-top: var(--s-2); border-top: 1px solid var(--line-2); padding-top: 0; }
.thead { display: flex; align-items: center; width: 100%; min-height: var(--tap); padding: var(--s-2) 0; background: none; border: 0;
  color: var(--ink); font: inherit; font-size: var(--fs-15); text-align: left; cursor: pointer; }
.thead .cchev { width: 1.4em; color: var(--faint); }
.thead .tname { flex: 1; font-weight: 600; }
.thead .tname em { font-weight: 400; color: var(--ink-2); }
.thead .ccount { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: var(--s-3); }
.cgroups { padding: 0 0 var(--s-3) 1.4em; }
.cgroups.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); column-gap: var(--s-4); }
.cgroups.cols .cgroup { display: block; margin-top: var(--s-2); }
.cgroups.cols .glab { flex: none; padding: 0 0 4px; }
.cgroups.cols .chip { margin-bottom: 4px; }
.ctasks .ctask:first-of-type { border-top: 0; }

/* Progress: the three ways of measuring */
.modes { display: flex; margin: 0 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); padding: 3px; width: max-content; max-width: 100%; }
.modes button { min-height: 38px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-15); font-weight: 600; cursor: pointer; }
.modes button.on { background: var(--accent); color: var(--on-accent); }
html.tv .modes button { min-height: 56px; padding: 0 var(--s-5); }
.yearline .field { margin-top: var(--s-2); border-top: 0; }
.modebar { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 var(--s-4); }
.modebar .modes { margin: 0 var(--s-4) 0 0; }
.modebar .yearline { margin: 0; flex: 1; min-width: 12em; }
.modebar .yearline p { margin: 0; }
.tallynote { margin: 0 0 var(--s-2) 1.4em; }
span.chip { cursor: default; }
.cgroups.only { padding-left: 0; }
.cgroup.facts { margin-bottom: var(--s-2); }
.thead .cwho { color: var(--terracotta); font-weight: 700; }
.thead .cwho.who-both { color: var(--accent); }
/* a task that works through a list: the list on the left, the year's chips on the right */
.cgroups.split { display: grid; grid-template-columns: minmax(16em, 2fr) 3fr; column-gap: var(--s-5); align-items: start; }
.cgroups.split .cgroup { margin-top: var(--s-2); }
.cgroups.split .cgroup.facts { grid-column: 1; }
.cgroups.split .cgroup:not(.facts) { grid-column: 2; grid-row: 1 / span 9; }
.cgroups.split .cgroup.facts .chip { display: block; width: 100%; margin-right: 0; text-align: left; }
@media (max-width: 720px) { .cgroups.split { display: block; } .cgroups.split .cgroup:not(.facts) { grid-row: auto; } }
.yearline p { margin: 0; }
.yearline p + p { margin-top: 2px; }
input.inl { width: 3.2em; min-height: 30px; padding: 0 6px; margin: 0 2px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-3); color: var(--ink); font: inherit; text-align: center; }

/* Days Off picker + Current Pace header (design: Days Off Picker.dc.html, revised) */
.pacehead { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 8px; align-items: center; padding-top: 2px; }
.pacehead .pplab { justify-self: start; }
.pacerow { display: flex; align-items: center; column-gap: 12px; line-height: 1; height: 38px; position: relative; }
.pacehead .pacerow:first-of-type { padding-left: 12px; }
.pacenum { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--ink); }
.paceunit { font-family: var(--serif); font-weight: 400; font-size: 18px; color: var(--ink-2); }
.dobtn { display: inline-flex; align-items: center; column-gap: 8px; padding: 4px 10px 4px 12px; border-radius: 6px; background: #fff; border: 1px solid #c7d1bf; color: var(--ink); font: 600 24px var(--serif); line-height: 1; cursor: pointer; }
.dobtn:hover { background: #f4f5ee; border-color: var(--accent); }
.doicons { display: inline-flex; column-gap: 3px; align-items: center; }
.dochev { font: 400 10px inherit; font-family: inherit; color: var(--ink-2); transition: transform .15s; }
.dochev.up { transform: rotate(180deg); }
.dopanel { position: absolute; left: 0; top: calc(100% + 10px); z-index: 10; width: 440px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 0 #cfd7c6, 0 14px 32px -20px rgba(34,53,42,.35); padding: 18px 24px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 22px; align-items: center; box-sizing: border-box; }
.dohead.right { text-align: right; }
.dodone { border: 0; cursor: pointer; padding: 7px 14px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font: 700 13px inherit; font-family: inherit; letter-spacing: .06em; text-transform: uppercase; }
.doname { height: 44px; display: flex; align-items: center; column-gap: 14px; white-space: nowrap; overflow: hidden; }
.doname .doico { display: flex; width: 22px; justify-content: center; flex: none; }
.dolabel { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.doname.other .dolabel { font-style: italic; }
.doname.done { opacity: .55; }
.dodone-tag { font-size: 12px; color: #8a9a8c; letter-spacing: .08em; text-transform: uppercase; }
.doval { height: 44px; display: flex; align-items: center; justify-content: flex-end; }
.doval input { width: 52px; text-align: center; padding: 5px 0; border-radius: 6px; background: #fff; border: 1px solid #c7d1bf; font: 600 16px inherit; font-family: inherit; color: var(--ink); outline: none; -moz-appearance: textfield; }
.doval input::-webkit-outer-spin-button, .doval input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 620px) { .pacenum { font-size: 20px; } .paceunit { font-size: 15px; } .dobtn { font-size: 20px; } .dolabel { font-size: 18px; } }
.oi { display: inline-block; flex: none; position: relative; box-sizing: border-box; }
.oi.sun { border-radius: 50%; background: #f0c419; }
.oi.tree { background: #3d6b4f; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.oi.star { background: #f0c419; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.oi.egg { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #f3a892; }
.oi.else { border-radius: 50%; border: 2px dashed #a9bba2; }
.oi.pumpkin i { position: absolute; left: 0; top: 18%; width: 100%; height: 82%; border-radius: 50%; background: #e0893a; }
.oi.pumpkin b { position: absolute; left: 42%; top: 0; width: 17%; height: 28%; border-radius: 2px; background: #5f8a63; }
.oi.flag i { position: absolute; left: 15%; top: 0; width: 2px; height: 100%; background: #5a3a1e; }
.oi.flag b { position: absolute; left: 25%; top: 1px; width: 70%; height: 50%; background: #c8453a; clip-path: polygon(0 0,100% 0,85% 50%,100% 100%,0 100%); }
/* Current Pace: the finish pill sits in the middle of the pane, nothing on the right */
.pcard .top.centered { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.pcard .top.centered .state { margin: 0; justify-self: center; }

/* Progress Timeline (design: Progress Timeline.dc.html) — shares the .pp card */
.pp.tl { grid-template-columns: 190px minmax(0, 1fr) 190px; }
.pp.tl .ppfill.tint { opacity: .28; }
.tldate { text-align: right; font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.tldate.late { color: var(--ink); }
.tlticks { position: relative; height: 16px; margin-top: 10px; }
.tlticks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
@media (max-width: 620px) { .pp.tl { grid-template-columns: 96px minmax(0, 1fr) 84px; } .tldate { font-size: 13px; } .tlticks span { font-size: 10px; } }

/* Progress Percentage (design: Progress Percentage.dc.html) */
.pp { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px 32px 20px; box-sizing: border-box;
  display: grid; grid-template-columns: 190px minmax(0, 1fr) 150px; column-gap: 22px; align-items: center;
  box-shadow: 0 1px 0 #cfd7c6, 0 14px 32px -20px rgba(34,53,42,.35); }
.pphead.right { text-align: right; }
.pplab { display: inline-block; padding: 5px 10px; border-radius: 6px; background: #dde3d4; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-weight: 700; }
.pprule { grid-column: 1 / -1; height: 1px; background: var(--ink); margin: 10px 0 4px; }
.ppname { font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); height: 44px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppbar { position: relative; height: 44px; }
.pptrack { position: absolute; left: 0; right: 0; top: 16px; height: 12px; border-radius: 6px; opacity: .28; }
.ppfill { position: absolute; left: 0; top: 16px; height: 12px; border-radius: 6px; }
.ppknob { position: absolute; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 3px solid; transform: translateX(-50%); box-sizing: border-box; }
.pppct { text-align: right; font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1; }
.ppaxis { position: relative; height: 16px; margin-top: 10px; }
.ppaxis span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--ink-2); }
.ppaxis span:first-child { transform: none; }
.ppaxis span.end { left: auto; right: 0; transform: none; }
@media (max-width: 620px) {
  .pp { padding: 16px; grid-template-columns: 96px minmax(0, 1fr) 64px; column-gap: 10px; }
  .ppname { font-size: 16px; } .pppct { font-size: 20px; } .pplab { font-size: 11px; padding: 4px 7px; }
}

/* Switching views must not move the card: the line beside the pills always takes the
   two-line height the Current Pace line needs, and the cards share one column layout. */
.modebar { min-height: 90px; align-items: center; }
.modebar .yearline { min-height: 84px; display: flex; flex-direction: column; justify-content: center; }
.modebar .yearline.pacehead { display: grid; }
.pp { grid-template-columns: 190px minmax(0, 1fr) 190px; }
@media (max-width: 620px) { .modebar { min-height: 0; } .modebar .yearline { min-height: 0; } .pp { grid-template-columns: 96px minmax(0, 1fr) 84px; } }
.modebar .yearline .field { display: inline-flex; align-items: center; column-gap: 8px; margin: 0; min-height: 0; border: 0; }
.modebar .yearline .field label { flex: none; padding: 0; }
.modebar .yearline .field input[type=date] { min-height: 34px; }

/* Measure-pace-from window (design: Days Off Picker.dc.html, revised) */
.dopanel.pacepanel { width: 520px; grid-template-columns: 1fr; row-gap: 0; padding-bottom: 18px; }
.dopanel.pacepanel .dohead { display: flex; justify-content: space-between; align-items: center; }
.dopanel.pacepanel .pprule { margin: 10px 0 18px; }
.winlabels { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); }
.winsum { font-family: inherit; font-size: 15px; color: var(--ink-2); font-weight: 500; }
.winslider { position: relative; height: 32px; margin-top: 10px; }
.wintrack { position: absolute; left: 11px; right: 11px; top: 10px; height: 12px; border-radius: 6px; background: #dde3d4; }
.winfill { position: absolute; top: 10px; height: 12px; border-radius: 6px; background: #7fa66f; }
input[type=range].dual { -webkit-appearance: none; appearance: none; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 32px; background: transparent; pointer-events: none; margin: 0; }
input[type=range].dual::-webkit-slider-runnable-track { background: transparent; height: 32px; }
input[type=range].dual::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); box-sizing: border-box; margin-top: 5px; cursor: grab; }
input[type=range].dual::-moz-range-track { background: transparent; height: 32px; }
input[type=range].dual::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); box-sizing: border-box; cursor: grab; }
.winfoot { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-top: 6px; }
/* the dropdowns hang from the right edge of their row so they never run off the page */
.pacehead .dopanel { left: auto; right: 0; }

/* The mode bar is a card of its own (design: Days Off Picker.dc.html, revised): pills on a
   sage track, a vertical rule, then the header block. */
.modebar { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 24px; box-sizing: border-box;
  box-shadow: 0 1px 0 #cfd7c6, 0 14px 32px -20px rgba(34,53,42,.35); column-gap: 28px; flex-wrap: nowrap; min-height: 0; }
.modebar .modes { margin: 0; padding: 5px; background: #e3e8dc; border: 1px solid var(--line); flex: none; }
.modes button { color: var(--ink-2); font-weight: 600; }
.modes button.on { font-weight: 700; }
.modebar::after { content: none; }
.modebar .rule { width: 1px; align-self: stretch; background: var(--ink); opacity: .85; flex: none; }
.modebar .yearline { min-height: 84px; flex: 1; min-width: 0; }
@media (max-width: 720px) { .modebar { flex-wrap: wrap; row-gap: 12px; padding: 14px 16px; } .modebar .rule { display: none; } .modebar .yearline { min-height: 0; flex-basis: 100%; } }
/* the total, as one more subject row in the header */
.pptotal { display: grid; grid-template-columns: 190px minmax(0, 1fr) 190px; column-gap: 22px; align-items: center; }
.pptotal .pptrack, .pptotal .ppfill { background: var(--accent); }
.pptotal .ppknob { border-color: var(--accent); }
.pptotal .pppct { color: var(--ink); }
@media (max-width: 620px) { .pptotal { grid-template-columns: 96px minmax(0, 1fr) 64px; } }
.modebar .yearline.pptotal { display: grid; }
.modebar .yearline.pptotal { grid-template-columns: auto minmax(0, 1fr) auto; }

/* Subject rows on Progress open their lists (the old Curriculum page) underneath */
.ppname { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); }
.ppname .ppchev { display: inline-block; width: 1.1em; font-size: 17px; color: var(--ink-2); flex: none; }
.ppdetail { grid-column: 1 / -1; padding: var(--s-2) 0 var(--s-4) 1.1em; }
.ppdetail .cbody { padding: 0; border-top: 0; }
.ppdetail .ctrack:first-child { border-top: 0; }
.ppdetail .thead .tname { font-family: var(--serif); font-weight: 500; font-size: 18px; }
/* second-level rows on the timeline: a track per row, same bar, same axis */
.ppname.sub { font-size: 18px; height: 40px; padding-left: 1.1em; max-width: 300px; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 40px; }
.ppname.sub .ppchev { font-size: 14px; }
.ppname.sub .cwho { font-weight: 700; color: var(--terracotta); }
.ppname.sub .cwho.who-both { color: var(--accent); }
.ppbar.sub { height: 40px; } .ppbar.sub .ppfill { top: 15px; height: 10px; } .ppbar.sub .ppknob { top: 11px; width: 18px; height: 18px; }
.tldate.sub { font-size: 15px; } .tldate.sub.done { color: var(--muted); font-weight: 600; }
@media (max-width: 620px) { .ppname { font-size: 16px; } .ppname.sub { font-size: 14px; padding-left: .4em; } .ppdetail { padding-left: 0; } .ppdetail .thead .tname { font-size: 15px; } }
.ppname.static { cursor: default; }
/* the name column is as wide as its longest name; never clipped */
.pp, .pp.tl, .pptotal { grid-template-columns: max-content minmax(0, 1fr) 190px; }
/* an open subject lists its books by name; a long title never squeezes the track away (the name shortens instead) */
.pp.tl { grid-template-columns: fit-content(36%) minmax(0, 1fr) 190px; }
.pp.tl .ppname.sub { max-width: 100%; min-width: 0; }
/* below 900px the Selected Loop | All Combined pills get their own row above the timeline's column heads */
@media (max-width: 900px) {
  .pp.tl > .pphead.mid { grid-column: 1 / -1; grid-row: 1; margin-bottom: 10px; }
  .pp.tl > .pphead:not(.mid):not(.right) { grid-column: 1; }
  .pp.tl > .pphead.right { grid-column: 3; }
}
.ppname { white-space: nowrap; overflow: visible; text-overflow: clip; }
@media (max-width: 620px) {
  .pp, .pp.tl, .pptotal { grid-template-columns: max-content minmax(0, 1fr) 64px; column-gap: 10px; }
  .pp.tl { grid-template-columns: max-content minmax(0, 1fr) 84px; }
  .ppname { font-size: 16px; }
}
@media (max-width: 620px) {
  .ppaxis span:not(:first-child):not(.end) { display: none; }
  .ppname .ppchev { font-size: 13px; width: 1em; }
}
.acct-title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-28, 28px); margin: 0 0 var(--s-4); }

/* Loop Setup: Curriculum (subjects > materials > lesson tasks) and Loop (with a live pass) */
.setupbar .yearline { display: flex; flex-direction: row; align-items: center; justify-content: space-between; column-gap: 12px; flex-wrap: wrap; min-height: 0; }
.setupbar .yearline p { margin: 0; color: var(--ink-2); font-size: var(--fs-15); }
.btnrow.tight { margin: 0; display: flex; align-items: center; column-gap: 8px; }
.saved.dirty { color: var(--terracotta); }
.sec.subj { padding: 0; overflow: hidden; }
.subjhead { display: flex; align-items: center; width: 100%; padding: 14px 20px; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; column-gap: 10px; }
.subjhead .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.subjhead .subjname { font-family: var(--serif); font-weight: 500; font-size: 24px; flex: 1; }
.subjhead .ppchev { font-size: 17px; color: var(--ink-2); width: 1.1em; }
.subjhead .ccount { color: var(--muted); font-size: var(--fs-15); }
.subjbody { padding: 0 20px 18px; border-top: 1px solid var(--line-2); }
.mat { margin-top: 14px; padding: 12px 16px 14px; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--surface-2); }
.mathead { display: flex; align-items: center; column-gap: 10px; margin-bottom: 6px; }
.matname { font-family: var(--serif); font-size: 20px; color: var(--ink-2); }
.mat .field { border-top: 0; min-height: 40px; }
.mat .field.ta-field { display: block; }
.mat .field.ta-field .ta { width: 100%; margin-top: 6px; }
.mat .field input[type=text] { width: 16em; max-width: 60%; }
.ltasks { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.pplab.small { font-size: 11px; padding: 3px 8px; }
.ltask { display: flex; align-items: center; column-gap: 12px; min-height: 36px; font-size: var(--fs-15); }
.ltask .cwho { font-weight: 700; color: var(--terracotta); min-width: 5em; }
.ltask .cwho.who-both { color: var(--accent); }
.ltask .ltname { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.ltask .lthow { color: var(--muted); }
.mat .field.sub { padding-left: 5em; }
.loopgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 20px; align-items: start; }
.lpv { position: sticky; top: 12px; background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-3); padding: 16px 18px; }
.lpvrows { margin-top: 10px; }
.lpvrow { display: flex; align-items: center; column-gap: 10px; min-height: 30px; font-size: var(--fs-15); }
.lpvrow .n { width: 1.6em; color: var(--faint); font-variant-numeric: tabular-nums; font-size: var(--fs-13); }
.lpvrow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.lpvsum { margin: 10px 0 0; color: var(--muted); font-size: var(--fs-13); }
@media (max-width: 800px) { .loopgrid { display: block; } .lpv { position: static; margin-top: 16px; } .mat .field input[type=text] { max-width: 50%; } }
html.tv .lpv { position: static; }

/* Loop Setup › Curriculum: Materials, then Lesson Sitting Construction */
.block { margin-top: 16px; }
.block > .hint { margin: 6px 0 4px; }
.matrow { padding: 8px 0; border-top: 1px solid var(--line-2); }
.matrow .matmain .field { border-top: 0; min-height: 40px; }
.matrow .matmain .field input[type=text] { width: 22em; max-width: 65%; }
.matrow .matmain .field.ta-field { display: block; }
.matrow .matmain .field.ta-field .ta { width: 100%; margin-top: 6px; }
.matnums { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 4px; padding-left: 4px; }
.matnums .field { border-top: 0; min-height: 34px; column-gap: 8px; justify-content: flex-start; }
.matnums .field label { flex: none; font-size: var(--fs-13); color: var(--muted); padding-right: 0; }
.matnums .field input[type=number] { width: 4.5em; min-height: 34px; }
.poemlist .field.poemf { border-top: 0; min-height: 36px; }
.poemlist .field.poemf label { flex: none; width: 2.2em; }
.cat { padding: 12px 0 10px; border-top: 1px solid var(--line-2); }
.cathead { display: flex; align-items: baseline; column-gap: 12px; flex-wrap: wrap; }
.cathead .cwho { font-weight: 700; color: var(--terracotta); min-width: 5em; }
.cathead .cwho.who-both { color: var(--accent); }
.catname { font-family: var(--serif); font-size: 20px; color: var(--ink); }
.catrhythm { color: var(--muted); font-size: var(--fs-13); }
.seq { margin-top: 8px; }
.seqtiles { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; column-gap: 4px; position: relative; }
.seqtiles.seqmore::after { content: '…'; color: var(--faint); margin-left: 4px; font-weight: 700; }
.tile { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink); border: 1px solid var(--line); background: var(--surface-2); }
.tile.k0 { background: rgba(224,137,58,.16); border-color: rgba(224,137,58,.4); }
.tile.k1 { background: rgba(233,181,61,.18); border-color: rgba(233,181,61,.45); }
.tile.k2 { background: rgba(227,148,127,.18); border-color: rgba(227,148,127,.45); }
.tile.k3 { background: rgba(79,138,123,.16); border-color: rgba(79,138,123,.4); }
.tile.hi { background: var(--c, var(--accent)); color: #fff; border-color: transparent; }
.seqgap { color: var(--faint); font-size: var(--fs-13); font-style: italic; padding: 0 6px; }
.seqlegend { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 4px; margin-top: 8px; font-size: var(--fs-13); color: var(--ink-2); }
.seqlegend i { width: 22px; height: 22px; font-size: 10px; margin-right: 6px; font-style: normal; vertical-align: middle; }
.catknobs { display: flex; flex-wrap: wrap; column-gap: 14px; margin-top: 6px; }
.catknobs .field.knob { border-top: 0; min-height: 34px; column-gap: 8px; justify-content: flex-start; }
.catknobs .field.knob label { flex: none; font-size: var(--fs-13); color: var(--muted); }
.catknobs .field.knob input { width: 4.5em; min-height: 34px; }
.matlist { margin-top: 8px; }
.matitem .field { border-top: 1px solid var(--line-2); justify-content: flex-start; }
.matitem .field label { display: none; }
.matitem .field input[type=text] { width: 100%; max-width: 32em; text-align: left; }
.lttypes { display: flex; align-items: center; column-gap: 12px; padding: 4px 0 12px 12px; }
.lttype { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.matitem { padding-top: 14px; } .matitem + .matitem { border-top: 1px solid var(--line-2); }
.lttypes input[type=number] { width: 3.6em; min-height: 36px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-3); color: var(--ink); font: inherit; }
.lthint { color: var(--muted); font-size: var(--fs-13); }
.load { padding-top: 14px; }
.excard { margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: var(--r-3); padding: 12px 16px 14px; max-width: 34em; }
.exlabel { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.excard .tasks { list-style: none; margin: 0; padding: 0; }
.excard .tasks li { display: flex; align-items: center; column-gap: 10px; min-height: 36px; }
.excard .tasks .box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); background: #fff; flex: none; }
.excard .tasks .txt b { color: var(--accent); font-weight: 700; margin-right: 4px; }
.exbtns { display: flex; column-gap: 8px; margin-top: 10px; }
.matbooks { list-style: none; margin: 8px 0 12px; padding: 0 0 0 4px; }
.matbooks li { min-height: 28px; display: flex; align-items: center; font-size: var(--fs-15); color: var(--ink-2); }
.excard + .excard { margin-top: 12px; }
.excard .tasks .txt b.who-raef, .excard .tasks .txt b.who-adelaide { color: var(--terracotta); }
.exbtns input[type=number] { width: 3.6em; min-height: 36px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-3); color: var(--ink); font: inherit; }
.exbtns { align-items: center; }
.ttype { display: grid; grid-template-columns: minmax(9em, auto) 1fr auto; column-gap: 14px; align-items: baseline; min-height: 34px; padding-left: 8px; }
.ttcount { color: var(--muted); font-size: var(--fs-13); }
.ttsit { color: var(--ink-2); font-size: var(--fs-13); font-weight: 600; white-space: nowrap; }
.matitem .matbooks { margin-bottom: 4px; }
@media (max-width: 620px) { .ttype { grid-template-columns: 1fr auto; } .ttype .ttcount { grid-column: 1 / -1; } }
.ttsit input[type=number] { width: 3.4em; min-height: 34px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-3); color: var(--ink); font: inherit; margin-right: 6px; }
.ttuse { display: flex; align-items: center; column-gap: 10px; cursor: pointer; }
.ttuse input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; }
.ttype.off .lttype, .ttype.off .ttcount { color: var(--faint); }
.ttsit.muted { color: var(--faint); font-weight: 400; }
/* atom rows: one baseline, fixed name column, note beside it, load on the right */
.ttype { grid-template-columns: 15em minmax(0, 1fr) auto; align-items: center; min-height: 40px; padding: 2px 0 2px 8px; }
.ttype + .ttype { border-top: 1px solid var(--line-2); }
.ttuse { min-height: 36px; }
.ttuse .lttype { font-size: 17px; line-height: 1.2; }
.ttcount { line-height: 1.3; padding-right: 12px; }
.ttsit { display: inline-flex; align-items: center; column-gap: 8px; }
.ttsit input[type=number] { margin: 0; }
.matitem { padding-top: 10px; padding-bottom: 6px; }
.matitem .pplab { margin-bottom: 6px; }
@media (max-width: 720px) { .ttype { grid-template-columns: 1fr auto; row-gap: 0; } .ttype .ttcount { grid-column: 1 / -1; padding-left: 30px; margin-top: -4px; } }
.ttype.kind { grid-template-rows: auto auto; }
.wedo { grid-column: 1 / -1; display: flex; align-items: center; column-gap: 8px; padding: 2px 0 8px 30px; flex-wrap: wrap; row-gap: 6px; }
.wedolab { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-right: 4px; }
.wedopill { min-height: 32px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: var(--fs-13); font-weight: 600; cursor: pointer; }
.wedopill.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.ttype.tree { grid-template-columns: 15em minmax(0, 1fr) auto; }
.ttype.tree.d1 { padding-left: 38px; grid-template-columns: calc(15em - 30px) minmax(0, 1fr) auto; }
.ttype.tree.d2 { padding-left: 68px; grid-template-columns: calc(15em - 60px) minmax(0, 1fr) auto; }
.ttype.tree.d1 .lttype, .ttype.tree.d2 .lttype { font-size: 16px; }
.ttype.tree.d1, .ttype.tree.d2 { min-height: 34px; border-top: 0; }
.matwho { margin-left: 10px; font-size: var(--fs-13); color: var(--muted); }
.ttype { grid-template-columns: 1fr; } .ttype.tree.d1, .ttype.tree.d2 { grid-template-columns: 1fr; }
.custommats { padding-top: 6px; }
.matitem.custom { display: flex; align-items: center; column-gap: 8px; padding: 10px 0; }
.matname-in { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-3); color: var(--ink); font: inherit; }
.custommats .btnrow { margin-top: 8px; }
/* the parts tree: plain — no colour coding (reverted 2026-09-23) */
.ttype.tree { margin: 0; padding-left: 8px; }
.ttype.tree.d1 { padding-left: 38px; }
.ttype.tree.d2 { padding-left: 68px; }
.ttype.tree + .ttype.tree { border-top: 0; }
.ttype.tree.off .lttype { color: var(--faint); }
/* Task Hierarchy design: each top-level group is its own tinted block; the group
   name and its unticked box take the group's colour, ticked boxes are always green. */
.tgroup { --g-bg: #e3ebdf; --g-ink: #2f5a40; --g-line: #3d6b4f; background: var(--g-bg); border-radius: 12px; padding: 6px 14px; margin: 8px 0; }
.tgroup.g1 { --g-bg: #f5e7da; --g-ink: #9a5220; --g-line: #c98d63; }
.tgroup.g2 { --g-bg: #f3edd0; --g-ink: #7d6308; --g-line: #bba451; }
.tgroup .ttype.tree { padding-left: 0; border-top: 0; min-height: 38px; }
.tgroup .ttype.tree.d1 { padding-left: 40px; }
.tgroup .ttype.tree.d2 { padding-left: 80px; }
.tgroup .ttype.tree .lttype { font-size: 19px; }
.tgroup .ttype.tree.d0 .lttype { font-weight: 600; color: var(--g-ink); }
.tgroup .ttype.tree.d0.off .lttype { color: var(--g-ink); }
.tgroup .ttuse { column-gap: 14px; }
.tgroup .ttuse input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 3px; border: 2px solid var(--g-line); background: var(--surface-3); position: relative; cursor: pointer; }
.tgroup .ttuse input[type=checkbox]:checked, .tgroup .ttuse input[type=checkbox]:indeterminate { background: #3d6b4f; border-color: #3d6b4f; }
.tgroup .ttuse input[type=checkbox]:checked::after { content: '\2713'; position: absolute; left: 0; right: 0; top: 0; bottom: 0; color: #fff; font: 700 17px/22px var(--font); text-align: center; }
.tgroup .ttuse input[type=checkbox]:indeterminate::after { content: '\2013'; position: absolute; left: 0; right: 0; top: 0; bottom: 0; color: #fff; font: 700 17px/22px var(--font); text-align: center; }
.tgroup .ttuse input[type=checkbox]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Task Hierarchy design: material title as a serif heading with a rule to the right */
.matitem > .pplab { display: flex; align-items: center; column-gap: 14px; padding: 0; margin: 4px 0 12px; border-radius: 0; background: none; text-transform: none; letter-spacing: 0; font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--ink); }
.matitem > .pplab::after { content: ''; flex: 1; height: 1px; background: #c7d1bf; }
.tgroup .ttype.tree, .tgroup .ttype.tree.d1, .tgroup .ttype.tree.d2 { grid-template-columns: minmax(0, 1fr); }
/* more group colours, same soft-tint family, cycling after eight */
.tgroup.g3 { --g-bg: #e8e3ef; --g-ink: #5b4a7a; --g-line: #9c8bbd; }
.tgroup.g4 { --g-bg: #dfe8ee; --g-ink: #2f5468; --g-line: #7ea3b8; }
.tgroup.g5 { --g-bg: #f3e0e3; --g-ink: #8a3a48; --g-line: #c98594; }
.tgroup.g6 { --g-bg: #dbebe8; --g-ink: #1f5c55; --g-line: #6fa39a; }
.tgroup.g7 { --g-bg: #eee2d6; --g-ink: #7a4a2a; --g-line: #b98a6b; }
/* folded book list under a reading-session group */
.bdrop { padding: 0 0 6px 40px; }
.bdropbtn { display: inline-flex; align-items: center; column-gap: 8px; min-height: 34px; padding: 0 10px 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 15px var(--font); cursor: pointer; }
.bdropbtn:hover { background: rgba(255,255,255,.45); }
.bdrop .matbooks { margin: 2px 0 6px 8px; }
.bdrop .matbooks li { color: var(--ink); }
.bdarrow { display: inline-block; font-size: 15px; transition: transform .15s; }
.bdarrow.open { transform: rotate(90deg); }
.custommats .btnrow.top { margin: 4px 0 14px; }
.matq { margin: 10px 0 12px; font-size: 15px; color: var(--ink-2); }
/* Edit Materials window */
.mwin-bg { position: fixed; inset: 0; left: 0; top: 0; right: 0; bottom: 0; z-index: 60; background: rgba(34,53,42,.35); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; }
.mwin { width: 560px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.25); display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.mwin-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--line-2); }
.mwin-title { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--ink); }
.mwin-body { padding: 8px 20px 14px; overflow-y: auto; }
.mwin-foot { padding: 12px 20px 16px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; }
.mat { padding: 12px 0; } .mat + .mat { border-top: 1px solid var(--line-2); }
.mat-name.fixed { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); }
.mat-hint { display: block; font-size: 13px; color: var(--ink-2); margin: 2px 0 8px; }
.mat-row { display: flex; align-items: center; column-gap: 8px; margin-bottom: 4px; }
.mat .matname-in { width: 100%; box-sizing: border-box; }
.varlist { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-3); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; }
.mwin .btnrow { margin-top: 12px; display: flex; column-gap: 8px; flex-wrap: wrap; row-gap: 8px; }
.matpick { display: grid; row-gap: 8px; flex: 1; min-width: 0; }
.matsel { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-3); color: var(--ink); font: inherit; }
.subjrow { display: flex; align-items: center; padding-right: 20px; }
.subjrow .subjhead { flex: 1; min-width: 0; }
.subjrow .editmats { flex: none; }
.whotag { display: inline-block; flex: none; padding: 3px 10px; border-radius: 999px; font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; background: var(--tint-terracotta); color: var(--terracotta); }
.whotag.who-both { background: var(--tint-accent); color: var(--accent); }
/* Logo Final: SVG mark + two-line wordmark */
.wreath svg { display: block; }
h1.wm { line-height: 1; letter-spacing: -.015em; }
h1.wm .of { display: block; margin-top: .1em; font-size: .76em; letter-spacing: -.01em; }
h1.wm { white-space: nowrap; }
@media (max-width: 560px) { .hdr h1.wm { font-size: 34px; } }
@media (max-width: 400px) { .hdr h1.wm { font-size: 29px; } }


/* ---------- header, Today Screen design rev 2026-09-29 ----------
   Mark and wordmark left; sprig, pass meter, a rule and the account circle right, with
   the sync state as a small badge under the circle. Tabs are underlined text on a rule. */
.hdr { align-items: center; flex-wrap: wrap; row-gap: var(--s-4); padding-bottom: var(--s-6); }
.hdr .wreath { --wreath: 92px; margin-right: 22px; }
.hdr h1.wm { font-size: 48px; }
.hdr-right { margin-left: auto; }
.hdr-right > * + * { margin-left: 28px; }
svg.sprig { position: static; flex: none; width: 120px; height: 70px; }
svg.sprig.art-oak { width: 168px; height: 73px; }
svg.sprig.art-books { width: 86px; height: 68px; }
svg.sprig.art-tree { width: 66px; height: 80px; } svg.sprig.art-garland { width: 200px; height: 67px; } svg.sprig.art-pencil { width: 140px; height: 76px; } svg.sprig.art-seed { width: 92px; height: 68px; }
.passmeter { display: grid; justify-items: end; row-gap: 8px; }
.pm-line { display: flex; align-items: baseline; line-height: 1; }
.pm-line > * + * { margin-left: 8px; }
.pm-lab { font-size: var(--fs-13); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pm-n { font-family: var(--serif); font-weight: 600; font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pm-of { font-family: var(--serif); font-size: 20px; color: var(--muted); }
.pm-bar { display: grid; grid-column-gap: 2px; width: 180px; }
.pm-bar span { height: 7px; border-radius: 2px; background: #b6c2ae; }
.pm-bar span.done { background: var(--accent); }
.pm-bar span.now { background: #e0893a; }
.hdr-rule { display: block; width: 1px; height: 44px; background: var(--line); flex: none; }
.acct { position: relative; flex: none; width: 44px; height: 44px; }
.hdr .ucircle { width: 44px; height: 44px; border: 0; font: 400 21px/1 "Libre Caslon Text", var(--serif); letter-spacing: .02em;
  box-shadow: 0 0 0 3px var(--ground), 0 0 0 4px var(--line); }
.hdr .ucircle.on { box-shadow: 0 0 0 3px var(--ground), 0 0 0 4px var(--terracotta); }
/* the account is the apple tree itself, the initial on its canopy (Cole 2026-10-16) */
.hdr .acct { width: 66px; height: 80px; }
.hdr .ucircle, .hdr .ucircle:hover, .hdr .ucircle.on { position: relative; width: 58px; height: 58px; border-radius: 0; background: none; box-shadow: none; padding: 0; cursor: pointer; }
.ucircle .utree { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .15s; transform-origin: 50% 50%; }
.hdr .ucircle:hover .utree, .hdr .ucircle.on .utree { transform: scale(1.06); }
.ucircle .uinit { position: absolute; left: 50%; top: 17px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 1px 0 0; background: #fbfaf3; border: 1.5px solid var(--accent); font: 700 14px/1 "Libre Caslon Text", var(--serif); color: var(--accent); box-shadow: 0 1px 3px rgba(20,36,26,.3); pointer-events: none; }
.hdr .ucircle.on .uinit { border-color: var(--terracotta); }
.hdr .ucircle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; border-radius: 8px; }
html.tv .hdr .acct, html.tv .hdr .ucircle { width: 90px; height: 109px; } html.tv .ucircle .uinit { top: 26.5px; width: 32px; height: 32px; margin-left: -16px; font-size: 18px; }
.sync { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 1;
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; white-space: nowrap;
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.sync .sdot { width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; background: var(--faint); }
.sync.ok { background: #e4f2dc; border-color: #8cc47a; color: #2f6b2a; }
.sync.ok .sdot { background: #3fae3a; box-shadow: 0 0 0 2px rgba(63,174,58,.25), 0 0 5px rgba(63,174,58,.7); }
.sync.saving, .sync.warn { background: var(--pill-bg); border-color: var(--pill-dot); color: var(--pill-ink); }
.sync.saving .sdot, .sync.warn .sdot { background: var(--pill-dot); }
.sync.bad { background: rgba(168,69,47,.12); border-color: var(--danger); color: var(--danger); }
.sync.bad .sdot { background: var(--danger); }
.sync.demo { background: var(--tint-terracotta); border-color: var(--terracotta); color: var(--terracotta); }
.sync.demo .sdot { background: var(--terracotta); }
.umenu-wrap .umenu { top: calc(100% + 34px); }
@media (max-width: 900px) { svg.sprig { display: none; } }
@media (max-width: 720px) {
  .hdr .wreath { --wreath: 64px; margin-right: 14px; }
  .hdr-right > * + * { margin-left: 18px; }
  .pm-bar { width: 120px; }
  .pm-n { font-size: 24px; } .pm-of { font-size: 17px; }
}
@media (max-width: 560px) { .hdr .wreath { --wreath: 52px; } .hdr-right { margin-left: 0; width: 100%; justify-content: flex-end; } }
@media (min-width: 720px) {
  html:not(.tv) .tabs { border-bottom: 1px solid var(--line); padding: 0; margin: var(--s-2) 0 var(--s-5); }
  html:not(.tv) .tabs > button, html:not(.tv) .tabs > button:hover, html:not(.tv) .tabs > button.on {
    background: transparent; border-radius: 0; margin: 0 32px -1px 0; padding: 0 2px 14px;
    font-size: var(--fs-16); font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; }
  html:not(.tv) .tabs > button:hover { color: var(--ink); }
  html:not(.tv) .tabs > button.on { font-weight: 700; color: var(--ink); border-bottom-color: var(--accent); }
}
html.tv svg.sprig, html.tv .hdr-rule { display: none; }
html.tv .acct { width: 72px; height: 72px; }
html.tv .hdr .ucircle { width: 72px; height: 72px; font-size: 34px; }
html.tv .sync { height: 30px; padding: 0 12px; font-size: 16px; }
html.tv .sync .sdot { width: 10px; height: 10px; margin-right: 8px; }
html.tv .pm-bar { width: 280px; } html.tv .pm-bar span { height: 11px; }
html.tv .pm-n { font-size: 44px; } html.tv .pm-of { font-size: 30px; } html.tv .pm-lab { font-size: 20px; }
html.tv .hdr { padding-bottom: var(--s-6); }
@media (max-width: 720px) { .hdr h1.wm { font-size: 40px; } }
@media (max-width: 560px) { .hdr h1.wm { font-size: 34px; } }
@media (max-width: 400px) { .hdr h1.wm { font-size: 29px; } }
html.tv .hdr h1.wm { font-size: var(--fs-28); }
.modebar .yearline.bare { flex-direction: row; justify-content: flex-end; align-items: center; }

/* ---------- Edit Materials: search the curriculum database ---------- */
.matpick { position: relative; }
.matsearch-in { width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--surface-3); color: var(--ink); font: inherit; -webkit-appearance: none; appearance: none; }
.matresults { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-3); box-shadow: var(--shadow-card); padding: 4px; }
.matres { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: var(--r-2);
  padding: 8px 10px; color: var(--ink); font: inherit; cursor: pointer; }
.matres:hover, .matres.on, .matres:focus { background: var(--hover); }
.mr-title { display: block; font-size: var(--fs-15); line-height: 1.3; }
.mr-meta { display: block; margin-top: 2px; font-size: var(--fs-13); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-ed { display: block; margin-top: 3px; font-size: var(--fs-13); color: var(--ink); }
.mr-isbn { display: inline-block; margin-left: 10px; font-size: var(--fs-11); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.mr-title .mr-kind.incomplete { margin-left: 8px; vertical-align: 2px; }
.mr-kind { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 999px; font-size: var(--fs-11); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; background: var(--surface-2); color: var(--muted); }
.mr-kind.level { background: rgba(61,107,79,.12); color: var(--accent); }
.mr-kind.book { background: var(--tint-terracotta); color: var(--terracotta); }
.mr-kind.incomplete { background: transparent; color: var(--terracotta); box-shadow: inset 0 0 0 1px var(--terracotta); letter-spacing: .06em; }
.matitem > .pplab .mr-kind.incomplete, .mat-kind .mr-kind.incomplete { margin: 0 0 0 8px; flex: 0 0 auto; align-self: center; line-height: 1.6; }
.mr-note { margin: 0; padding: 10px; font-size: var(--fs-13); color: var(--muted); }
html.tv .matresults { max-height: 540px; }
.mwin .matresults { position: static; margin-top: 4px; max-height: 260px; }

/* a database material's breakdown under its name */
.mattree { margin-top: 8px; }
.mt-meta { font-size: var(--fs-13); color: var(--muted); font-variant-numeric: tabular-nums; }
.mt-note { margin: 8px 0 4px; font-size: var(--fs-13); color: var(--muted); }

/* ---------- Loop Setup, design rev 2026-09-29: Curriculum | Your Loop ---------- */
.setup2 .s2grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-column-gap: 18px; align-items: start; margin-top: 4px; }
.s2card { background: var(--surface); border: 1px solid var(--line-3); border-radius: 18px; box-shadow: var(--shadow-card); padding: 18px 22px 22px; box-sizing: border-box; min-width: 0; }
.s2card .pplab { white-space: nowrap; }
.s2rule { height: 1px; background: var(--ink); margin: 12px 0 14px; }
.s2head { display: flex; justify-content: space-between; align-items: center; }
.s2head .s2rebal { border-radius: 8px; padding: 8px 16px; min-height: 0; font-size: var(--fs-15); letter-spacing: .02em; }
.s2note { margin: -4px 0 8px; font-size: var(--fs-13); color: var(--terracotta); }
.s2subjs .sec.subj { margin: 0 0 10px; border-radius: 12px; background: #fbfaf3; border: 1px solid #e3e6da; box-shadow: none; }
.s2subjs .sec.subj:hover { border-color: var(--line); }
.s2subjs .subjhead { min-height: 56px; padding: 0 18px; column-gap: 14px; }
.s2subjs .subjhead .ppchev { font-size: 10px; color: var(--muted); width: auto; }
.s2subjs .subjhead .dot { width: 11px; height: 11px; }
.s2subjs .subjhead .subjname { font-size: 22px; }
.s2subjs .subjrow { padding-right: 14px; }
/* the loop: one row per lesson */
.looplist { margin-top: -10px; }
.lrow { display: grid; grid-template-columns: 22px 11px 1fr 14px; grid-column-gap: 12px; align-items: center; height: 36px;
  border-bottom: 1px solid #e3e6da; border-radius: 6px; padding: 0 6px; margin: 0 -6px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.lrow .n { font-size: var(--fs-13); font-weight: 600; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
.lrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.lrow .nm { font-size: var(--fs-16); font-weight: 600; color: var(--ink); }
.lrow .grip { display: grid; grid-template-columns: 3px 3px; grid-gap: 2px 3px; opacity: .55; cursor: grab; touch-action: none; padding: 8px 4px; margin: -8px -4px; }
.lrow .grip i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.lrow.on { background: color-mix(in srgb, var(--c) 20%, transparent); box-shadow: inset 3px 0 0 var(--c); }
.lrow.act { box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1.5px var(--c); }
.lrow.dim { opacity: .4; }
.lrow.drag { cursor: grabbing; }
.lrow.drag .grip { cursor: grabbing; }
/* Save at the end of the tab row on Loop Setup; on a phone it sits at the top of the page instead */
.tabsave { display: none; }
.s2save-m { display: flex; align-items: center; margin-bottom: 12px; }
.s2save-m > * + * { margin-left: 10px; }
@media (min-width: 720px) {
  html:not(.tv) .tabs { align-items: flex-end; }
  html:not(.tv) .tabsave { display: flex; align-items: center; margin: 0 0 8px auto; }
  html:not(.tv) .tabsave > * + * { margin-left: 10px; }
  html:not(.tv) .tabsave .btn { border-radius: 10px; padding: 8px 20px; min-height: 0; font-size: var(--fs-15); }
  html:not(.tv) .tabsave .btn:disabled { background: #dde3d4; color: var(--faint); border-color: transparent; }
  html:not(.tv) .s2save-m { display: none; }
}
@media (max-width: 860px) { .setup2 .s2grid { grid-template-columns: minmax(0, 1fr); } .setup2 .s2grid > * + * { margin-top: 16px; } }
html:not(.tv) .tabs .tabsave .btn.primary { background: var(--accent); color: var(--on-accent); margin: 0; font-weight: 600; border: 0; }
html:not(.tv) .tabs .tabsave .btn.primary:disabled { background: #dde3d4; color: var(--faint); cursor: not-allowed; }
/* "How much work per sitting?" */
.work { padding-top: 14px; }
.workrow { display: flex; align-items: center; flex-wrap: wrap; column-gap: 14px; row-gap: 6px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--line-2); }
.wr-name { flex: 1 1 14em; min-width: 0; font-size: var(--fs-16); color: var(--ink); }
.wr-name .whotag { margin-right: 8px; }
.wr-ctl { display: inline-flex; align-items: center; column-gap: 6px; }
.wr-ctl .btn.sm { min-width: 36px; padding: 0 10px; min-height: 36px; }
.wr-n { width: 3.2em; min-height: 36px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-3); color: var(--ink); font: inherit; font-weight: 700; -moz-appearance: textfield; }
.wr-n::-webkit-outer-spin-button, .wr-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wr-unit { color: var(--muted); font-size: var(--fs-15); }
.work .excard { margin-top: 12px; }
html.tv .wr-ctl .btn.sm, html.tv .wr-n { min-height: 56px; }
.workrow { display: grid; grid-template-columns: 1fr; row-gap: 6px; }
.workrow .wr-ctl { justify-self: start; }
html.tv .workrow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; }
/* Edit Materials: who a material is for */
.whopick { display: flex; align-items: center; flex-wrap: wrap; column-gap: 6px; row-gap: 4px; margin-top: 8px; }
.wp-lab { font-size: var(--fs-13); color: var(--muted); margin-right: 4px; }
.wp-opt { min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: var(--fs-13); font-weight: 600; cursor: pointer; }
.wp-opt.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.wp-opt.fixed:not(.on) { opacity: .45; cursor: default; }
.wp-opt.fixed.on { cursor: default; }
.wp-note { font-size: var(--fs-11); color: var(--faint); margin-left: 4px; }
html.tv .wp-opt { min-height: 48px; padding: 0 20px; font-size: var(--fs-16); }
/* Loop Setup: the tab toggle, and the panes */
.s2toggle { display: flex; align-items: center; }
.s2toggle > * + * { margin-left: 8px; }
.s2tab { border: 0; cursor: pointer; font-family: inherit; background: transparent; color: var(--muted); }
.s2tab:hover { color: var(--ink); }
.s2tab.on { background: #dde3d4; color: var(--ink); cursor: default; }
.wsubj { padding: 4px 0 18px; }
.wsubj + .wsubj { border-top: 1px solid var(--line-2); padding-top: 14px; }
.wsubj-h { display: flex; align-items: center; margin: 0; font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--ink); }
.wsubj-h .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); margin-right: 12px; flex: none; }
.wsubj .work { padding-top: 6px; }
.wsubj .work > .matq { display: none; }
.s2work > .s2q { margin: 0 0 10px; color: var(--ink-2); font-size: var(--fs-15); }

/* ---------- Loop Setup, design rev 2026-09-30 ---------- */
.setup2 .s2grid { grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); grid-column-gap: 14px; }
/* Students | Curriculum | Adjust: a pill toggle */
.s2toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--ground); border: 1px solid var(--line); }
.s2toggle > * + * { margin-left: 0; }
.s2toggle .s2tab { border: 0; cursor: pointer; padding: 8px 18px; border-radius: 999px; background: transparent; color: var(--muted);
  font: 700 14px var(--font, "Karla", sans-serif); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: background .15s, color .15s; }
.s2toggle .s2tab.on { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgba(34, 53, 42, .3); cursor: default; }
/* Your Loop: a green pill label, an orange Rebalance */
.s2pill { display: block; width: 100%; text-align: center; padding: 12px 0 10px; border-radius: 12px; background: #e9ede3; border: 1px solid var(--line-3); font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; color: var(--accent); white-space: nowrap; }
.s2head .btn.s2rebal { background: #e0893a; color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 700; box-shadow: 0 1px 2px rgba(120, 60, 10, .25); }
.s2head .btn.s2rebal:hover { background: #c96f2c; }
.s2head .btn.s2rebal:disabled { background: #dde3d4; color: var(--faint); box-shadow: none; }
.s2card .s2head + .s2rule { margin: 12px 0 12px; }
/* the pass at a glance */
.s2sum { display: grid; row-gap: 10px; margin-bottom: 16px; padding: 14px 16px 12px; border-radius: 12px; background: #e9ede3; border: 1px solid var(--line-3); }
.s2sum-h { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.s2sum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 8px 24px; }
.s2sum-row { display: flex; align-items: center; padding-bottom: 7px; border-bottom: 1px solid #cfd7c6; color: var(--ink); }
.s2sum-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; margin-right: 10px; }
.s2sum-row .nm { flex: 1; min-width: 0; font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.2; margin-right: 10px; }
.s2sum-row b { font-family: var(--serif); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; }
/* the loop's lessons: cards, like the curriculum rows */
.looplist { margin-top: 0; }
.lrow { grid-template-columns: 24px 11px 1fr 14px; grid-column-gap: 14px; height: auto; min-height: 56px; padding: 8px 18px 8px 14px; margin: 0 0 10px; box-sizing: border-box;
  border-radius: 12px; background: #fbfaf3; border: 1px solid #e3e6da; cursor: grab; }
.lrow .n { font-size: 14px; font-weight: 700; }
.lrow .dot { width: 11px; height: 11px; }
.lrow .nm { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.15; }
.lrow.on { background: color-mix(in srgb, var(--c) 20%, #fbfaf3); }
.lrow .grip { cursor: grab; }
/* motion: cards slide into place when the pass is reordered; the one in hand lifts */
.lrow { transition: transform 420ms var(--ease), background var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
/* arriving: a card grows in from nothing and flashes its subject colour once */
@keyframes lrow-enter { 0% { opacity: 0; transform: scale(.94); background: color-mix(in srgb, var(--c) 45%, #fbfaf3); border-color: transparent; } 45% { opacity: 1; transform: scale(1.02); background: color-mix(in srgb, var(--c) 35%, #fbfaf3); } 100% { transform: scale(1); background: #fbfaf3; } }
/* the card keeps its full height from the first frame: its neighbours are already sliding apart to make
   room, and growing it as well moved them twice (they jumped up, then came back down) */
.lrow.enter { animation: lrow-enter 600ms var(--ease) both; }
/* leaving: the card folds shut and the pass closes over it */
@keyframes lrow-leave { 0% { max-height: 72px; opacity: 1; transform: scale(1); } 40% { opacity: 0; transform: scale(.96); } 100% { max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-color: transparent; } }
.lrow.gone { animation: lrow-leave 400ms var(--ease) both; overflow: hidden; pointer-events: none; background: color-mix(in srgb, var(--c) 20%, #fbfaf3); }
.lrow.drag { transform: scale(1.02); box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1.5px var(--c), 0 10px 24px -12px rgba(34, 53, 42, .45); border-color: transparent; z-index: 1; position: relative; transition: box-shadow var(--t-fast), background var(--t-fast); }
.lrow .n { transition: color var(--t-fast); }
@media (max-width: 420px) { .s2sum-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .setup2 .s2grid { grid-template-columns: minmax(0, 1fr); } }
.wsubj .work .excard { margin-top: 8px; }
.wsubj .exbtns { flex-wrap: wrap; row-gap: 8px; }
.exbtns.exnote { align-items: center; } .exbtns.exnote .lthint { flex: 1; min-width: 10em; color: var(--ink-2); font-size: var(--fs-15); }
.excard .tasks li .txt { flex: 1; min-width: 0; }
.wstep { display: inline-flex; align-items: center; flex: none; margin-left: 12px; }
.wstep .btn.sm { min-width: 34px; min-height: 34px; padding: 0 10px; }
.wstep-n { min-width: 2.2em; text-align: center; font-size: var(--fs-16); font-variant-numeric: tabular-nums; color: var(--ink); }
html.tv .wstep .btn.sm { min-width: 56px; min-height: 56px; }
.wsubj .work .excard { width: 100%; max-width: 34em; min-height: 170px; box-sizing: border-box; }
/* Today: the kind of sitting that is due (from the session layer) */
.sitkind { margin: 4px 0 6px; }
.sitkind-lab { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--tint-accent, rgba(61,107,79,.12)); color: var(--accent); font-size: var(--fs-13); font-weight: 700; letter-spacing: .04em; }
html.tv .sitkind-lab { font-size: var(--fs-16); padding: 6px 14px; }
.s2work > .s2q { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: #e9ede3; border: 1px solid var(--line-3); font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.wstep { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--line-3); border-radius: 999px; background: #fff; overflow: hidden; margin-left: 14px; }
.wstep-b { width: 34px; height: 32px; border: 0; background: transparent; font: 600 18px var(--font); color: var(--accent); cursor: pointer; padding: 0; }
.wstep-b:disabled { color: var(--line); cursor: default; }
.wstep-n { min-width: 26px; text-align: center; font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
html.tv .wstep-b { width: 56px; height: 56px; font-size: 26px; }
.s2togglewrap { display: flex; justify-content: center; }
/* Progress: the sequence ahead, under a subject's lists */
.aheadlist { list-style: none; margin: 0; padding: 0 0 var(--s-3) 1.4em; }
.aheadlist li { background: none; display: flex; align-items: baseline; min-height: 32px; padding: 4px 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-15); color: var(--ink); }
.aheadlist li:last-child { border-bottom: 0; }
.aheadlist .an { flex: none; width: 3.2em; font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.aheadlist li:first-child .an { color: var(--accent); }
.aheadlist .al { flex: 1; min-width: 0; }
.aheadlist li.kind .al { font-weight: 600; color: var(--c); }
.aheadlist .anote { margin-left: 8px; font-size: var(--fs-13); color: var(--muted); }
.aheadlist li.amore { color: var(--muted); font-size: var(--fs-13); background: none; padding-left: 3.2em; }
/* Loop Setup: Rebalance as the third pane on the left */
.rebcard { border-radius: 12px; background: #fbfaf3; border: 1px solid #e3e6da; padding: 6px 18px 8px; }
.rebrow { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid #e3e6da; color: var(--ink); }
.rebrow:last-child { border-bottom: 0; }
.rebrow .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex: none; margin-right: 14px; }
.rebrow .nm { flex: 1; min-width: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; }
.rebrow .rb { width: 5.2em; text-align: center; font-family: var(--serif); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--muted); }
.rebrow .ra { width: 1.6em; text-align: center; color: var(--faint); }
.rebrow.chg .rb.to { color: #c96f2c; }
.rebrow.rebhead { min-height: 34px; }
.rebrow.rebhead .rb { font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rebfoot { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; margin-top: 14px; }
.rebfoot .btn.s2rebal { background: #e0893a; color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 700; box-shadow: 0 1px 2px rgba(120, 60, 10, .25); margin-right: 14px; }
.rebfoot .btn.s2rebal:hover { background: #c96f2c; }
.rebfoot .btn.s2rebal:disabled { background: #dde3d4; color: var(--faint); box-shadow: none; }
.rebfoot .s2note { margin: 0; flex: 1; min-width: 12em; }
@media (max-width: 520px) { .s2toggle .s2tab { padding: 8px 10px; font-size: 12px; letter-spacing: .06em; } .rebrow .rb { width: 4.2em; } .rebrow .nm { font-size: 18px; } }
/* Rebalance pane: a finish-date slider per subject */
.fincard { border-radius: 12px; background: #fbfaf3; border: 1px solid #e3e6da; padding: 4px 18px 6px; margin-bottom: 14px; }
.finrow { padding: 12px 0 10px; border-bottom: 1px solid #e3e6da; }
.finrow:last-child { border-bottom: 0; }
.finhead { display: flex; align-items: baseline; }
.finhead .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex: none; margin-right: 14px; align-self: center; }
.finhead .nm { flex: 1; min-width: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--ink); }
.findate { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); white-space: nowrap; margin-left: 12px; font-variant-numeric: tabular-nums; }
.findate.late { color: var(--ink); }
.finslide { display: block; width: 100%; margin: 10px 0 2px; accent-color: var(--c); height: 22px; cursor: pointer; }
.finslide:disabled { cursor: default; opacity: .6; }
.finends { display: flex; justify-content: space-between; font-size: var(--fs-12); color: var(--faint); letter-spacing: .02em; }
.s2reb .s2sum { margin-bottom: 0; background: #fbfaf3; border: 1px solid #e3e6da; padding: 0 18px 6px; row-gap: 4px; overflow: hidden; }
.s2reb > .s2q { font-weight: 500; font-size: 22px; line-height: 1.25; color: var(--accent); padding: 12px 12px; }
.s2reb .s2sum-h { margin: 0 -18px 6px; padding: 12px 18px; background: #e9ede3; border-bottom: 1px solid var(--line-3); font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--accent); text-align: center; }
html.tv .finslide { height: 44px; }
/* Rebalance pane: every slider on ONE date axis (a knob's place is its date) */
.finslider { position: relative; height: 32px; margin-top: 6px; }
.fintrack { position: absolute; left: 11px; right: 11px; top: 13px; height: 6px; border-radius: 3px; background: #dde3d4; }
.finfill { position: absolute; top: 13px; height: 6px; border-radius: 3px; background: var(--c); opacity: .55; }
.finknob { position: absolute; top: 5px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--c); border: 3px solid #fbfaf3; box-shadow: 0 0 0 1px var(--c), 0 1px 3px rgba(34, 53, 42, .3); box-sizing: border-box; pointer-events: none; }
.finrow.tween .finfill { transition: width var(--t-base) var(--ease); }
.finrow.tween .finknob { transition: left var(--t-base) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
@keyframes finshimmer { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } }
.finrow.bump .finfill { background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%); background-size: 60% 100%; background-repeat: no-repeat; animation: finshimmer 700ms var(--ease); }
@keyframes finglint { 0% { box-shadow: 0 0 0 1px var(--c), 0 1px 3px rgba(34, 53, 42, .3); } 40% { box-shadow: 0 0 0 1px var(--c), 0 0 0 5px rgba(255, 255, 255, .55), 0 1px 3px rgba(34, 53, 42, .3); } 100% { box-shadow: 0 0 0 1px var(--c), 0 1px 3px rgba(34, 53, 42, .3); } }
.finrow.bump .finknob { animation: finglint 700ms var(--ease); }
/* in hand: the knob swells and casts a shadow the moment it is pressed, and shrinks back on release */
.finknob { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.finrow.held .finknob { transform: scale(1.25); box-shadow: 0 0 0 1px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent), 0 3px 8px rgba(34, 53, 42, .35); }
.finrow.held .finfill { opacity: .8; }
.finstop { position: absolute; top: 11px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fbfaf3; border: 2px solid var(--c); box-sizing: border-box; pointer-events: none; }
.finstop.on { opacity: 0; }
.finend { position: absolute; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; background: #c96f2c; opacity: .55; border-radius: 1px; pointer-events: none; }
input[type=range].fin { -webkit-appearance: none; appearance: none; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 32px; background: transparent; margin: 0; cursor: pointer; }
input[type=range].fin::-webkit-slider-runnable-track { background: transparent; height: 32px; }
input[type=range].fin::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: transparent; border: 0; box-shadow: none; margin-top: 5px; cursor: grab; }
input[type=range].fin::-moz-range-track { background: transparent; height: 32px; }
input[type=range].fin::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: transparent; border: 0; box-shadow: none; cursor: grab; }
input[type=range].fin:disabled { cursor: default; }
.finrow:has(.fin:disabled) .finknob { opacity: .6; }
.finrow:has(.fin:focus-visible) .finknob { box-shadow: 0 0 0 1px var(--c), 0 0 0 var(--focus-w) var(--focus); }
.finaxis { position: relative; height: 26px; margin: 8px 0 4px; border-top: 1px solid #cfd7c6; }
.finaxis span { position: absolute; top: 7px; transform: translateX(-50%); font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink-2); white-space: nowrap; }
.finaxis span::before { content: ""; position: absolute; left: 50%; top: -8px; width: 1px; height: 6px; background: #a9bba2; }
.finrow:last-of-type { border-bottom: 0; }
.finper { font-size: 13px; font-weight: 700; color: var(--faint); white-space: nowrap; margin-left: 12px; }
.findate { min-width: 7.2em; text-align: right; }
.finweek { margin: 10px 2px 0; }
/* Rebalance pane: times a pass is a stepper on the subject's own row */
.finhead { align-items: center; }
.finhead .wstep { margin-left: 12px; }
.finhead .wstep-b { width: 30px; height: 28px; font-size: 16px; }
.finhead .wstep-n { min-width: 22px; font-size: 18px; }
.findate { min-width: 6.6em; }
.finweek { margin: 0 2px 4px; }
@media (max-width: 480px) { .finhead { flex-wrap: wrap; } .finhead .nm { flex-basis: 60%; } .findate { min-width: 0; font-size: 17px; } }
.finweek { margin: 10px 2px 0; }
/* Rebalance pane: the slots box carries the minus / number / plus for each subject */
.s2reb .s2sum-row { padding: 10px 0; border-bottom: 1px solid #e3e6da; }
.s2reb .s2sum-row:last-child { border-bottom: 0; }
.s2reb .s2sum-row .dot { width: 11px; height: 11px; margin-right: 14px; }
.s2reb .s2sum-row .nm { font-size: 20px; }
.s2reb .s2sum-row .wstep { margin-left: 8px; }
.s2reb .s2sum-row .wstep-b { width: 30px; height: 28px; font-size: 16px; }
.s2reb .s2sum-row .wstep-n { min-width: 22px; font-size: 18px; border-radius: 6px; }
@keyframes numpop { 0% { transform: scale(1); background: transparent; } 30% { transform: scale(1.35); background: color-mix(in srgb, var(--c) 28%, transparent); color: var(--accent); } 100% { transform: scale(1); background: transparent; } }
.s2reb .s2sum-row.pop .wstep-n { animation: numpop 420ms var(--ease); }
@media (max-width: 560px) { .s2reb .s2sum-grid { grid-template-columns: minmax(0, 1fr); } }
.s2reb .s2sum-grid { grid-template-columns: minmax(0, 1fr); grid-row-gap: 8px; }
/* ---------- more than one loop (Today Loops design, 2026-10-02) ---------- */
.todaybar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: var(--s-5); }
.todaybar .passnav { margin-bottom: 0; flex: 0 1 auto; }
.todaybar .passnav .pv { display: none; }
.looptabs { display: inline-flex; padding: 5px; background: #d8dfd0; border: 1px solid var(--line); border-radius: 999px; margin: 0 16px 10px 0; }
.todaybar .passnav { margin-bottom: 10px; }
.looptab { border: 0; cursor: pointer; padding: 13px 28px; border-radius: 999px; font-family: var(--font); font-weight: 700; font-size: 17px; line-height: 1; opacity: 1;
  transition: background .16s, color .16s, box-shadow .16s, opacity .16s; white-space: nowrap; }
.looptab + .looptab { margin-left: 5px; }
.looptab.on { opacity: 1; cursor: default; }
.pm-loop { padding: 4px 9px; border-radius: 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
html.tv .looptab { padding: 22px 44px; font-size: var(--fs-19); }
html.tv .pm-loop { font-size: var(--fs-13); padding: 8px 16px; }
@media (max-width: 560px) { .looptab { padding: 11px 16px; font-size: 15px; } .looptabs { margin-right: 0; } .pm-loop { font-size: 11px; padding: 3px 7px; } }
/* ---------- Loop Setup: Students (step 1 of the students schema, 2026-10-02) ---------- */
.s2toggle.three .s2tab { padding: 8px 14px; }
.s2stu > .s2q { font-weight: 500; font-size: 22px; line-height: 1.25; color: var(--accent); padding: 12px 16px; }
.stcard { border-radius: 12px; background: #fbfaf3; border: 1px solid #e3e6da; padding: 4px 18px; }
.stcard + .stcard { margin-top: 14px; }
.strow { display: flex; align-items: center; min-height: 60px; padding: 8px 0; border-bottom: 1px solid #e3e6da; }
.strow:last-child { border-bottom: 0; }
.strow > * + * { margin-left: 10px; }
.stdot { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.stdot:disabled { cursor: default; }
.stdot.ghost { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 2px #cfd7c6; cursor: default; }
.stname { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); }
.stname:hover:not(:disabled), .stname:focus { border-color: var(--line); background: #fff; }
.stadd .stname { border-color: var(--line-3); background: #fff; font-size: 18px; }
.stmove { flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-3); background: #fff; color: var(--accent); font-size: 16px; cursor: pointer; padding: 0; }
.stmove:disabled { color: var(--line); cursor: default; }
.strow.gone .stname { color: var(--faint); }
.strow.gone .stdot { opacity: .5; }
.sthead { padding: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stnote { margin: 12px 2px 0; }
html.tv .stdot { width: 60px; height: 60px; font-size: 30px; } html.tv .stname { height: 64px; font-size: var(--fs-19); } html.tv .stmove { width: 60px; height: 60px; font-size: 28px; }
@media (max-width: 560px) { .s2toggle.three .s2tab { padding: 8px 7px; font-size: 11px; letter-spacing: .04em; } .strow > * + * { margin-left: 6px; } .stname { font-size: 18px; padding: 0 8px; } }
/* who-pills follow the student records: one student's own colour is set inline */
.whotag.who-some { background: #e9ede3; color: var(--ink-2); }
/* Today: who is here for the open lesson (each student has their own place) */
.here { display: flex; flex-wrap: wrap; margin: var(--s-4) 0 calc(var(--s-2) * -1); }
.herechip { border: 0; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-family: var(--font); font-weight: 700; font-size: 15px; line-height: 1; margin: 0 8px 8px 0;
  box-shadow: inset 0 0 0 1.5px currentColor; transition: background .16s, color .16s, opacity .16s; }
.herechip.out { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1.5px var(--line); text-decoration: line-through; }
html.tv .herechip { padding: 16px 30px; font-size: var(--fs-17); }
/* the way to the chips on any lesson with more than one student (Cole 2026-10-23): a small link */
.herelink { display: block; width: fit-content; border: 0; background: none; padding: 4px 0; margin: var(--s-2) 0 0; cursor: pointer;
  font-family: var(--font); font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.herelink:hover, .herelink[aria-expanded="true"] { color: var(--ink); }
.herelink + .here { margin-top: var(--s-2); }
/* back from an absence on a shared book: one pill, the other way a tap (a .bookpill, wrapping) */
.joins { display: flex; flex-wrap: wrap; margin: var(--s-3) 0 0; }
.bookpill.joinpill { margin: 0 var(--s-2) var(--s-2) 0; min-height: 34px; padding: 6px var(--s-4); white-space: normal; text-align: left; line-height: 1.3;
  background: var(--tint-accent); color: var(--accent); cursor: pointer; }
.bookpill.joinpill:hover { background: var(--tint-accent-hi); }
.bookpill.joinpill:disabled { background: var(--surface-2); color: var(--disabled); }
.joinswap { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
@media (max-width: 620px) { .bookpill.joinpill { margin-left: 0; padding: 6px var(--s-3); } }
/* Students: who works on each subject at the same time */
.stcard.together .tgrow { display: flex; align-items: center; flex-wrap: wrap; min-height: 52px; padding: 8px 0; border-bottom: 1px solid #e3e6da; }
.stcard.together .tgrow:last-child { border-bottom: 0; }
.tgrow .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex: none; margin-right: 14px; }
.tgrow .nm { flex: 1 1 8em; min-width: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); }
.tgchips { display: flex; flex-wrap: wrap; margin: 4px 0 -8px; }
.tgchips .herechip { font-size: 14px; padding: 7px 14px; }
/* loops: the At a Glance button sits beside the pill tray, squared and outlined, so it never reads as another loop */
.loopbar { display: inline-flex; align-items: center; flex-wrap: wrap; margin: 0 16px 0 0; }
.glancebtn { display: inline-flex; align-items: center; margin: 0 0 10px 14px; padding: 12px 18px; border-radius: 10px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
  font-family: var(--font); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .02em; white-space: nowrap; cursor: pointer; transition: background .16s, color .16s; }
.glancebtn .gico { margin-right: 8px; }
.glancebtn:hover { background: var(--surface-2); }
.glancebtn.on { background: var(--accent); color: #f6f4e8; cursor: default; }
html.tv .glancebtn { padding: 22px 32px; font-size: var(--fs-19); border-width: 2px; } html.tv .glancebtn .gico { width: 24px; height: 24px; }
@media (max-width: 560px) { .loopbar { margin-right: 0; } .glancebtn { margin-left: 8px; padding: 10px 13px; font-size: 14px; } }
.gtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-gap: 14px; margin-top: 4px; }
.gtile { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-height: 150px; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-3); box-shadow: var(--shadow-card), inset 5px 0 0 var(--c); cursor: pointer; font: inherit; color: var(--ink); }
.gtile:hover { background: #fbfaf3; }
.gtile > * + * { margin-top: 8px; }
.gpill { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; line-height: 1; }
.gsubj { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.05; }
.gtask { font-size: var(--fs-15); color: var(--ink-2); line-height: 1.35; }
.gpass { margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
html.tv .gtiles { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); grid-gap: 24px; }
html.tv .gtile { min-height: 260px; padding: 30px 34px; } html.tv .gsubj { font-size: 52px; } html.tv .gtask { font-size: var(--fs-19); } html.tv .gpill { font-size: var(--fs-16); padding: 10px 20px; }

/* ---------- every book as data (migration, 2026-10-04) ---------- */
/* Today: the material and where in it, once above its run of lines */
.tasks li.lhead { margin-top: var(--s-4); padding: 0 0 2px 2px; font-family: var(--serif); font-size: var(--fs-17); color: var(--ink-2); line-height: 1.3; }
.tasks li.lhead:first-child { margin-top: 0; }
.tasks li.lhead + li { margin-top: 2px; }
html.tv .tasks li.lhead { font-size: var(--fs-19); }
/* Curriculum: a material's size and kind */
.mat-sum { margin: 4px 0 8px; font-size: var(--fs-13); color: var(--muted); }
.mat-kind { margin: 4px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.mat-after { display: block; margin: 8px 0 4px; font-size: var(--fs-14); color: var(--ink-2); }
.mat-after select { display: block; max-width: 100%; margin: 6px 0 0; min-height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); padding: 4px 8px; font: inherit; }
.mat-opts { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 8px; margin: 8px 0 6px; font-size: var(--fs-14); color: var(--ink-2); }
.mat-num input { width: 5em; margin-left: 6px; min-height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); padding: 4px 8px; font: inherit; }
.mat-text { display: flex; align-items: center; flex: 1 1 100%; column-gap: 8px; }
.mat-text input { flex: 1; min-height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); padding: 4px 10px; font: inherit; }
.mat-text input.short { flex: 0 0 8em; }
.mat-opts .mat-hint { flex: 1 1 100%; margin: 0; }
.wstep.zero .wstep-n { color: var(--faint); }
.cnotef { flex: 1 1 100%; margin-top: 10px; }
/* The pace finish dates assume (Adjust, Progress) */
.paceline { margin: 6px 0 14px; padding: 12px 14px; border-radius: 12px; background: #eef1e6; border: 1px solid var(--line-3); }
.pl-say { margin: 0; font-size: var(--fs-15); color: var(--ink-2); line-height: 1.4; }
.pl-say b { color: var(--ink); }
.pl-use { display: inline-flex; margin-top: 10px; padding: 3px; border-radius: 999px; background: #dde3d4; }
.pl-use button { border: 0; background: none; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: var(--fs-14); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.pl-use button.on { background: var(--accent); color: var(--on-accent); }
.pl-plan { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 8px; margin-top: 10px; }
.pl-q { font-size: var(--fs-14); color: var(--ink-2); }
.pl-clear { border: 0; background: none; padding: 0; font: inherit; font-size: var(--fs-13); color: var(--accent); text-decoration: underline; cursor: pointer; }
.yearline .paceline { margin: 10px 0 0; }
/* Curriculum: a long book title wraps instead of running off the card */
.matitem > .pplab .mname { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.matitem > .pplab .mname .mr-kind.incomplete { display: inline-block; vertical-align: 4px; white-space: nowrap; margin: 0 0 0 10px; font-family: var(--font); line-height: 1.6; }
.matitem > .pplab::after { min-width: 16px; }
.wtypes { margin: 10px 12px 0; padding: 10px 14px 6px; border-radius: 10px; background: #f4f5ee; border: 1px dashed var(--line); }
.wtypes-h { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wtype { padding: 6px 0; border-top: 1px solid #e6e8de; } .wtype:first-of-type { border-top: 0; }
.wtype-h { margin: 0; display: flex; flex-wrap: wrap; column-gap: 10px; align-items: baseline; font-size: var(--fs-15); color: var(--ink); }
.wtype-h span { font-size: var(--fs-13); color: var(--muted); }
.wtype-tasks { margin: 2px 0 0; font-family: var(--serif); font-size: 16px; color: var(--ink-2); line-height: 1.35; }


/* Adjust: the pace block sits under the weekly question, before the finish dates */
.s2reb > .paceline { margin-bottom: 24px; }

.pl2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 12px; margin: 14px 0 26px; }
.pl2opt { display: flex; flex-direction: column; align-items: center; row-gap: 12px; padding: 16px 14px 18px; border-radius: 14px; background: #fbfaf3; border: 1.5px solid var(--line-3); cursor: pointer; text-align: center; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
.pl2opt:hover { border-color: var(--line); }
.pl2opt.on { background: #e9ede3; border-color: var(--accent); box-shadow: 0 1px 0 #cfd7c6, 0 10px 24px -18px rgba(34,53,42,.45); }
.pl2opt.off { cursor: default; opacity: .6; }
.pl2lab { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.pl2opt.on .pl2lab { color: var(--accent); }
.pl2val { display: flex; align-items: center; column-gap: 10px; min-height: 40px; }
.pl2n { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pl2unit { font-size: var(--fs-15); font-weight: 600; color: var(--ink-2); }
@media (max-width: 480px) { .pl2 { grid-template-columns: minmax(0, 1fr); } }
.pl2note { min-height: 40px; display: flex; align-items: center; max-width: 18em; font-size: var(--fs-15); font-weight: 600; line-height: 1.35; color: var(--ink-2); text-wrap: pretty; }

/* many loops: the pill tray wraps onto a second row instead of pushing past the page */
.loopbar { max-width: 100%; min-width: 0; }
.looptabs { flex-wrap: wrap; gap: 4px; max-width: 100%; box-sizing: border-box; border-radius: 26px; }
.looptab { white-space: nowrap; }
.pagebar { display: flex; margin-bottom: var(--s-4); }
.pagebar .loopbar { margin-right: 0; }
.pagebar .looptabs { margin-bottom: 0; }
/* Progress: Selected Loop | All Combined */
.scopebar { display: flex; justify-content: center; margin: 0; }
.pphead.mid { display: flex; justify-content: center; min-width: 0; }
.s2toggle.sm { padding: 3px; }
.s2toggle.sm .s2tab { padding: 6px 14px; font-size: 13px; }
.pillsdim .looptab:not(:hover) { opacity: .45; box-shadow: none !important; }

/* the selected loop: a bold ring that lifts off the tray */
.looptab.on { position: relative; z-index: 1; transform: translateY(-1px); filter: saturate(1.9) brightness(.94);
  box-shadow: 0 0 0 3px #fbfaf3, 0 0 0 6.5px currentColor, 0 0 0 9px color-mix(in srgb, currentColor 22%, transparent), 0 8px 18px -6px rgba(34,53,42,.5) !important; }
/* Progress at phone width: Selected Loop | All Combined gets its own row above the column heads */
@media (max-width: 620px) {
  .pp > .pphead.mid { grid-column: 1 / -1; grid-row: 1; margin-bottom: 10px; }
  .pp > .pphead:not(.mid):not(.right) { grid-column: 1; }
  .pp > .pphead.right { grid-column: 3; }
}
@media (max-width: 620px) {
  .pp.tl { grid-template-columns: fit-content(44%) minmax(0, 1fr) 84px; }
  .pp.tl .ppname.sub { max-width: 100%; min-width: 0; }
}

/* Current Pace: the finish date, or leave it open */
.finby { display: flex; align-items: center; }
.finby > * + * { margin-left: 10px; }
.fin-in { font: inherit; font-size: var(--fs-15); padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper, #fff); color: var(--ink); }
.s2finby { margin: 0 0 14px; }

/* the scrollbar keeps its place on every screen, so nothing shifts when a taller tab opens */
html { overflow-y: scroll; }

/* the Save button sits beside the tabs without making the row taller: the tabs stay put between screens */
@media (min-width: 621px) { html:not(.tv) .tabs { position: relative; } html:not(.tv) .tabsave { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; } }

/* Current Pace: targets and the pace kept */
.pp.pace { grid-template-columns: max-content minmax(0, 1fr) 120px; }
.pacecell { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; }
.pacefig { display: inline-flex; align-items: baseline; margin: 0 10px; }
.pacefig b { font-size: var(--fs-19); font-variant-numeric: tabular-nums; }
.pacefig .paceunit { margin-left: 5px; }
.pacefoot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.pacefoot > .pacerow + .pacerow { margin-left: 18px; }
.datecard { margin: 0 0 8px; }
.daterow { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.daterow .nm { flex: 1 1 auto; margin-left: 8px; font-size: var(--fs-17); }
.daterow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.fin-in.sm { padding: 4px 8px; font-size: var(--fs-13); }
.datefig { margin-left: 14px; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.datefig .paceunit { margin-left: 4px; font-weight: 400; }
@media (max-width: 620px) { .pp.pace { grid-template-columns: max-content minmax(0, 1fr) 84px; } .pacefig { margin: 0 5px; } .pacefig b { font-size: var(--fs-15); } .pacefoot > .pacerow + .pacerow { margin-left: 0; margin-top: 8px; } }
@media (max-width: 620px) { .daterow { flex-wrap: wrap; } .daterow .nm { flex: 1 1 calc(100% - 24px); } .daterow .fin-in.sm { margin-left: 18px; } .datefig { margin-left: 12px; } }

/* Expected Finish: the pace toggle and its controls */
.pacehead2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pacehead2 .pacefoot { margin-top: 0; }
.pacehead2 > * + * { margin-left: 14px; }
.tlrate { display: block; font-size: var(--fs-11); font-weight: 400; color: var(--muted); letter-spacing: .02em; }
.pp.tl .tldate { line-height: 1.2; }
@media (max-width: 620px) { .pacehead2 { justify-content: center; } .pacehead2 > * + * { margin-left: 0; margin-top: 10px; } .pacehead2 .pacefoot { width: 100%; justify-content: center; } }

.daterow.head { border-bottom: 1px solid var(--line-3, var(--line)); padding: 4px 0; }
.datelab { margin-left: 14px; font-size: var(--fs-11); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; min-width: 64px; text-align: right; }
.daterow .datefig { min-width: 64px; text-align: right; }
.daterow.own .fin-in.sm { border-color: var(--accent); }
@media (max-width: 620px) { .daterow.head { display: none; } }

.finfigs { display: inline-flex; align-items: baseline; margin-left: 12px; white-space: nowrap; }
.finfigs b { font-size: var(--fs-15); font-variant-numeric: tabular-nums; margin-left: 10px; }
.finfigs .paceunit { margin-left: 4px; }
.finaxis { position: relative; height: 16px; margin: 4px 0 2px; }
.finaxis span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 620px) { .finfigs { margin-left: 6px; } .finfigs b { margin-left: 6px; font-size: var(--fs-13); } .finhead .nm { font-size: 17px; } }
.finmark { position: absolute; top: 9px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .35; }

.yearcard { margin: 0 0 14px; }
.lawfigs { display: flex; align-items: baseline; }
.lawfig { display: inline-flex; align-items: baseline; }
.lawfig + .lawfig { margin-left: 18px; }
.lawfig b { font-family: var(--serif); font-size: var(--fs-22, 22px); font-variant-numeric: tabular-nums; }
.lawfig .paceunit { margin-left: 6px; }

.lawfigs { align-items: center; }
.lawstack { margin-left: 14px; display: flex; flex-direction: column; }
.lawline { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-15); line-height: 1.5; }
.lawk { color: var(--muted); margin-right: 12px; white-space: nowrap; }
.lawline b { font-variant-numeric: tabular-nums; }
.pacehead2 .pacefoot { margin-top: 8px; margin-left: 0; width: 100%; }
.lawline b { font-size: var(--fs-17, 17px); }

/* Lessons per week: a tinted panel beside the mode pills, label on top, three equal cells */
.modebar { flex-wrap: nowrap; }
.modebar .modes { flex: none; }
.modebar .modes button { white-space: nowrap; }
.pacehead2 { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 0;
  background: #e9ede3; border: 1px solid var(--line-3, #c7d1bf); border-radius: 14px; }
.pacehead2 > * + * { margin-left: 0; }
.pacehead2 .lawfigs, .pacehead2 .lawstack { display: contents; }
.pacehead2 .lawhd { grid-row: 1; grid-column: 1 / 3; display: flex; align-items: center; padding: 14px 16px 6px; }
.pacehead2 .lawhd.as { grid-column: 3; border-left: 1px solid #c7d1bf; }
.pacehead2 .lawhd .pplab { margin: 0; background: #dde3d4; }
.pacehead2 .lawline, .pacehead2 .pacefoot { grid-row: 2; }
.pacehead2 .lawline, .pacehead2 .pacefoot { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 6px 16px 14px; min-width: 0; margin: 0; width: auto; grid-column: auto; line-height: 1; }
.pacehead2 .lawline + .lawline, .pacehead2 .pacefoot { border-left: 1px solid #c7d1bf; }
.pacehead2 .lawline b { font-family: var(--serif); font-weight: 600; font-size: 32px; color: var(--ink); height: 40px; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.pacehead2 .lawk, .pacehead2 .pacerow .paceunit { margin: 4px 0 0; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink-2); white-space: normal; text-wrap: pretty; }
.pacehead2 .pacerow { flex-direction: column; align-items: flex-start; height: auto; row-gap: 0; padding-left: 0 !important; }
.pacehead2 .dobtn { height: 40px; box-sizing: border-box; padding: 0 8px 0 0; margin-left: -2px; background: transparent; border: 0; border-radius: 8px; font: 600 32px var(--serif); column-gap: 8px; }
.pacehead2 .dobtn:hover { background: #dde3d4; padding-left: 6px; margin-left: -8px; }
.pacehead2 .dochev { font-size: 11px; color: var(--accent); }
@media (max-width: 720px) { .modebar { flex-wrap: wrap; } .pacehead2 { flex-basis: 100%; } .pacehead2 .lawline b, .pacehead2 .dobtn { font-size: 26px; } }
.pacehead2 .dobtn, .pacehead2 .dobtn:hover { padding: 0 6px 0 10px; margin-left: -2px; background: #fbfaf3; border: 1.5px solid #b6c2ae; border-radius: 10px; font-size: 26px; column-gap: 8px; box-shadow: 0 1px 0 #cfd7c6; }
.pacehead2 .dobtn:hover { border-color: var(--accent); background: #fff; }
.pacehead2 .dochev { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--accent); color: #fbfaf3; font-size: 10px; margin-left: 2px; }
.pacehead2 .dobtn[aria-expanded="true"] { border-color: var(--accent); }
.pacehead2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content; }
.pacehead2 .lawline b { font-size: 36px; font-weight: 700; color: #1c2e23; letter-spacing: -.01em; }
.pacehead2 .dobtn, .pacehead2 .dobtn:hover { font-size: 28px; font-weight: 700; color: #1c2e23; }
.pacehead2 .lawk, .pacehead2 .pacerow .paceunit { font-size: 14px; font-weight: 700; color: #22352a; margin-top: 6px; }
.pacehead2 .lawhd .pplab { font-size: 14px; color: #1c2e23; background: #d3dcc8; }
.yearcard .finhead .nm, .fincard .finhead .nm { white-space: nowrap; }
/* Finish Date card: caption over the date so the two never collide */
.yearcard .finhead { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.yearcard .finhead .dot { grid-row: 1; margin-bottom: 4px; }
.yearcard .finhead .nm { grid-column: 2; justify-self: start; display: inline-block; padding: 4px 9px; border-radius: 6px; background: #d3dcc8; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1c2e23; white-space: nowrap; margin-bottom: 4px; }
.yearcard .finhead .findate { grid-column: 2; justify-self: start; margin: 0; white-space: nowrap; text-align: left; width: auto; min-width: 0; }
/* Finish Date card, refined: no dot, tag + date on one line, slider beneath */
.yearcard { background: #e9ede3 !important; border: 1px solid #c7d1bf !important; border-radius: 14px !important; box-shadow: none !important; padding: 0 !important; }
.yearcard .finrow { padding: 14px 16px 16px !important; }
.yearcard .finhead { display: flex !important; align-items: center; justify-content: space-between; column-gap: 12px; margin-bottom: 14px; }
.yearcard .finhead .dot { display: none !important; }
.yearcard .finhead .nm { margin: 0; background: #d3dcc8; }
.yearcard .finhead .findate { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1; color: #1c2e23; letter-spacing: -.01em; }
.yearcard .finhead { flex-wrap: wrap; row-gap: 8px; }
.yearcard .finhead .nm { flex: none; }
.yearcard .finhead .findate { flex: none; font-size: 24px; }

/* Loop Setup: Details — where the pass count comes from */
.dettop { margin: 0 0 10px; }
.dettable { border-radius: 12px; background: #fbfaf3; border: 1px solid #e3e6da; padding: 4px 18px 6px; }
.detrow { display: grid; grid-template-columns: 14px minmax(0, 1fr) 90px 72px 110px; align-items: center; column-gap: 10px; padding: 10px 0; border-bottom: 1px solid #e3e6da; }
.detrow:last-child { border-bottom: 0; }
.detrow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.detrow .nm { font-family: var(--serif); font-size: 19px; color: var(--ink); min-width: 0; }
.detrow .detc { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-16); }
.detrow .detc b { font-size: var(--fs-19); }
.detrow.head { padding: 6px 0; }
.detrow.head .detc { font-size: var(--fs-11); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.detrow.most .detc b { color: var(--terracotta); }
@media (max-width: 620px) { .detrow { grid-template-columns: 10px minmax(0, 1fr) 64px 56px 72px; column-gap: 6px; } .detrow .nm { font-size: 16px; } .detrow .detc { font-size: var(--fs-13); } .detrow .detc b { font-size: var(--fs-15); } .detrow.head .detc { font-size: 9px; } }
@media (max-width: 620px) { .detrow { grid-template-columns: 10px minmax(0, 1fr) 50px 44px 58px; column-gap: 5px; } .detrow .nm { font-size: 15px; line-height: 1.2; } }

/* Details, in the Curriculum tab's shape: a card per subject, the figures on its right */
.dettable { background: transparent; border: 0; padding: 0; }
.detrow { grid-template-columns: 11px minmax(0, 1fr) 96px 80px 110px; column-gap: 14px; margin: 0 0 10px; min-height: 56px; padding: 0 18px; border-radius: 12px; background: #fbfaf3; border: 1px solid #e3e6da; }
.detrow:hover { border-color: var(--line); }
.detrow:last-child { border-bottom: 1px solid #e3e6da; }
.detrow .dot { width: 11px; height: 11px; }
.detrow .nm { font-size: 22px; }
.detrow .detc { font-size: var(--fs-17); }
.detrow .detc b { font-size: var(--fs-22); }
.detrow.head { min-height: 0; margin: 0 0 6px; padding: 0 18px; background: transparent; border: 0; }
.detrow.head:hover { border-color: transparent; }
.detrow.head:last-child { border-bottom: 0; }
@media (max-width: 620px) { .detrow { grid-template-columns: 10px minmax(0, 1fr) 56px 48px 64px; column-gap: 8px; padding: 0 12px; min-height: 50px; } .detrow .nm { font-size: 17px; } .detrow .detc { font-size: var(--fs-13); } .detrow .detc b { font-size: var(--fs-17); } }
.detrow { grid-template-columns: 11px minmax(0, 1fr) 84px 68px 96px; }
.detrow .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) { .detrow { grid-template-columns: 10px minmax(0, 1fr) 54px 46px 60px; } }
.detrow { grid-template-columns: 11px minmax(0, 1fr) 84px 68px 112px; }

.detscope { margin: 0 0 14px; }
.s2details .dettable + .dettable { margin-top: 22px; }
.s2details .dettop { display: flex; align-items: center; }
.s2details .dettop .pm-loop { margin-right: 10px; }

.detrow { grid-template-columns: 11px minmax(0, 1fr) 108px 92px 120px; column-gap: 10px; }
.detrow.head { padding: 0 18px; margin: 0 0 8px; align-items: end; }
.detrow.head .detc { font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: 700; display: flex; justify-content: flex-end; }
.detrow.head .detc .pplab { margin: 0; white-space: nowrap; }
@media (max-width: 620px) { .detrow { grid-template-columns: 10px minmax(0, 1fr) 68px 58px 76px; column-gap: 5px; } .detrow.head { padding: 0 6px; } .detrow.head .detc .pplab { font-size: 9px; padding: 3px 6px; letter-spacing: .04em; } }
.detrow { grid-template-columns: 11px minmax(0, 1fr) 96px 82px 108px; column-gap: 8px; }
.detrow.head .detc .pplab { padding: 3px 7px; font-size: 10px; }
/* Details headings: plain words, big enough to read */
.detrow { grid-template-columns: 11px minmax(0, 1fr) 100px 88px 118px; }
.detrow.head .detc .pplab { background: transparent; padding: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
@media (max-width: 620px) { .detrow.head .detc .pplab { font-size: 12px; } }
.detrow { grid-template-columns: 11px minmax(0, 1fr) 90px 72px 104px; column-gap: 8px; }
.detrow { grid-template-columns: 11px minmax(0, 1fr) 86px 68px 124px; }

/* a material's parts, still on their way from the database: three pulsing rows where the tree will be */
.mt-skel { margin: 10px 0 6px; }
.mt-skel span { display: block; height: 16px; border-radius: 8px; margin: 0 0 10px; background: linear-gradient(90deg, #e6eadf 0%, #f3f5ee 50%, #e6eadf 100%); background-size: 200% 100%; animation: mtskel 1.2s ease-in-out infinite; }
.mt-skel span:nth-child(1) { width: 46%; }
.mt-skel span:nth-child(2) { width: 68%; margin-left: 22px; animation-delay: .15s; }
.mt-skel span:nth-child(3) { width: 54%; margin-left: 22px; animation-delay: .3s; }
@keyframes mtskel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .mt-skel span { animation: none; } }

/* Both header views sit in one cell and the box takes the taller, so toggling Percentage /
   Expected Finish never moves the box, the toggle or anything below (Cole 2026-10-11). */
.modebar .modeslot { display: grid; flex: 1; min-width: 0; align-items: center; }
.modebar .modeslot > .modeview { grid-area: 1 / 1; min-width: 0; display: flex; align-items: center; }
.modebar .modeslot > .modeview > * { flex: 1; min-width: 0; }
.modebar .modeslot > .ghost { visibility: hidden; pointer-events: none; }
@media (max-width: 720px) { .modebar .modeslot { flex-basis: 100%; } }

/* Assuming: start date and days off as two compact rows, label left, picker right (Cole 2026-10-11) */
.pacehead2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content; }
.pacehead2 .pacefoot { display: grid; grid-template-columns: max-content max-content; align-content: start; column-gap: 12px; row-gap: 8px; padding-top: 4px; }
.pacehead2 .pacefoot > .pacerow { display: contents; }
.pacehead2 .pacefoot .paceunit { grid-column: 1; order: 0; align-self: center; margin: 0; white-space: nowrap; }
.pacehead2 .pacefoot .dobtn { grid-column: 2; position: relative; height: 34px; font-size: 20px; justify-self: start; white-space: nowrap; }
.pacehead2 .pacefoot .asstart .paceunit { grid-row: 1; }
.pacehead2 .pacefoot .asstart .dobtn { grid-row: 1; }
.pacehead2 .pacefoot .daysoff .paceunit { grid-row: 2; }
.pacehead2 .pacefoot .daysoff .dobtn { grid-row: 2; }
.pacehead2 .pacefoot { position: relative; }
.pacehead2 .pacefoot .daysoff .dopanel { left: auto; right: 0; top: calc(100% + 6px); }
.pacehead2 .asdate { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.pacehead2 .asdate::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.pacehead2 .asdate:disabled { cursor: default; }
@media (max-width: 720px) { .pacehead2 .pacefoot .dobtn { font-size: 18px; } }
.pacehead2 { grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) max-content; }
.pacehead2 .pacefoot .dobtn { font-size: 18px; }
@media (max-width: 1100px) { .modebar { flex-wrap: wrap; row-gap: 12px; } .modebar .modeslot { flex-basis: 100%; } }
/* labels read first: darker, larger (Cole 2026-10-11) */
.pacehead2 .lawk, .pacehead2 .pacerow .paceunit, .pacehead2 .pacefoot .paceunit { font-size: 16px; font-weight: 700; color: #14241a; opacity: 1; letter-spacing: 0; }
.pacehead2 .lawhd .pplab { font-size: 15px; font-weight: 800; color: #14241a; background: #c9d4bc; padding: 5px 10px; }
.pacehead2 .pacefoot .dobtn, .pacehead2 .pacefoot .dobtn:hover { color: #14241a; border-color: #9fae96; }
@media (max-width: 1100px) { .modebar .rule { display: none; } }
/* tabs: larger, darker, heavier underline (Cole 2026-10-11) */
@media (min-width: 720px) {
  html:not(.tv) .tabs > button, html:not(.tv) .tabs > button:hover, html:not(.tv) .tabs > button.on { font-size: 19px; font-weight: 700; color: #3b4d41; border-bottom-width: 4px; }
  html:not(.tv) .tabs > button:hover { color: #14241a; }
  html:not(.tv) .tabs > button.on { font-weight: 800; color: #14241a; border-bottom-color: var(--accent); }
  html:not(.tv) .tabs { border-bottom: 1.5px solid #b6c2ae; }
}
.tabs button { color: #3b4d41; font-weight: 700; }
.tabs button.on { font-weight: 800; }

/* TV: the pace panel and Progress labels are set in px for the web, so scale them for 10-foot viewing */
html.tv .pacehead2 .lawline b { font-size: 64px; }
html.tv .pacehead2 .lawk, html.tv .pacehead2 .pacerow .paceunit, html.tv .pacehead2 .pacefoot .paceunit { font-size: 26px; }
html.tv .pacehead2 .lawhd .pplab { font-size: 24px; padding: 8px 14px; }
html.tv .pacehead2 .pacefoot { column-gap: 20px; row-gap: 14px; }
html.tv .pacehead2 .pacefoot .dobtn, html.tv .pacehead2 .pacefoot .dobtn:hover { height: 60px; font-size: 32px; padding: 0 10px 0 16px; }
html.tv .pacehead2 .dochev { width: 38px; height: 38px; font-size: 16px; }
html.tv .pphead .pplab { font-size: 18px; padding: 8px 14px; white-space: nowrap; }
html.tv .tldate, html.tv .pppct { font-size: 24px; }
html.tv .ppname { font-size: 30px; }
html.tv .pacehead2 .lawhd { padding-bottom: 16px; }
html.tv .tlticks { height: 28px; } html.tv .tlticks span { font-size: 20px; }
html.tv .pphead.right .pplab { letter-spacing: .04em; padding: 8px 10px; }
/* TV: the Days off panel at 10-foot size */
html.tv .pacehead2 .dopanel { min-width: 520px; padding: 24px 28px; }
html.tv .pacehead2 .dopanel .pplab { font-size: 20px; padding: 8px 12px; }
html.tv .pacehead2 .dopanel .dolabel { font-size: 30px; }
html.tv .pacehead2 .dopanel .doname, html.tv .pacehead2 .dopanel .doval { min-height: 72px; }
html.tv .pacehead2 .dopanel .doval input { width: 96px; height: 56px; font-size: 28px; }
/* before the first pass: no current pace yet */
.pacehead2 .lawline.notyet b { font-size: 26px; color: #4a5c50; }
.modebar .modecol { flex: none; display: flex; flex-direction: column; align-self: stretch; justify-content: center; gap: 10px; max-width: 300px; }
.modebar .lawnote { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #14241a; text-wrap: pretty; }
@media (max-width: 1100px) { .modebar .modecol { max-width: none; } }
.modebar .lawnote { font-size: 16px; font-weight: 500; line-height: 1.5; color: #14241a; background: #fbfaf3; border: 1px solid #c7d1bf; border-radius: 10px; padding: 10px 14px; }
/* first-pass note: a quiet sage card with an info mark, matching the Lessons per week panel */
.modebar .lawnote { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px 13px 12px; background: #e9ede3; border: 1px solid #c7d1bf; border-radius: 14px;
  font-size: 15px; font-weight: 500; line-height: 1.5; color: #22352a; }
.modebar .lnico { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff);
  display: flex; align-items: center; justify-content: center; font: italic 700 14px/1 var(--serif); }
@media (max-width: 1100px) { .modebar .modecol { flex: 1 1 100%; min-width: 0; max-width: 100%; } }
/* the date input stays out of sight; the label opens its picker */
.pacehead2 .asdate { position: absolute; left: 0; bottom: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; inset: auto auto 0 0; opacity: 0; overflow: hidden; clip-path: inset(50%); border: 0; padding: 0; margin: 0; pointer-events: none; }
.pacehead2 .asdate::-webkit-calendar-picker-indicator { display: none; }
.pacehead2 .pacefoot .dobtn { justify-self: stretch; justify-content: space-between; cursor: pointer; }
.pacehead2 .pacefoot { width: auto !important; box-sizing: border-box; min-width: 0; padding-right: 16px; }
.pacehead2 .pacefoot .dobtn { margin-left: 0 !important; max-width: 100%; box-sizing: border-box; }
/* pickers stay inside the panel: the Assuming column may shrink a little, pickers slightly smaller */
.modebar .modecol { max-width: 260px; }
.pacehead2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, max-content); }
.pacehead2 .pacefoot { padding-right: 16px; column-gap: 10px; }
.pacehead2 .pacefoot .dobtn, .pacehead2 .pacefoot .dobtn:hover { font-size: 17px; height: 32px; padding: 0 5px 0 9px; column-gap: 6px; }
.pacehead2 .pacefoot .dochev { width: 22px; height: 22px; }
.pacehead2 .pacefoot .doicons { column-gap: 2px; }
.pacehead2 .lawk { font-size: 15px; }
/* the first-pass note keeps its space in Percentage too, so the box never jumps (Cole 2026-10-11) */
.modebar .lawnote.ghost { visibility: hidden; }
/* TV: the left column holds the full-size toggle; the first-pass note at 10-foot size */
html.tv .modebar .modecol { max-width: 500px; }
html.tv .modebar .lawnote { font-size: 22px; padding: 16px 20px; gap: 16px; }
html.tv .modebar .lnico { width: 32px; height: 32px; font-size: 20px; }
html.tv .pacehead2 .lawline.notyet b { font-size: 44px; }

/* Details: Per pass is a − / + stepper on the selected loop (Cole 2026-10-12) */
.detrow { grid-template-columns: 11px minmax(0, 1fr) 86px 118px 124px; }
.detrow .detc.detper { text-align: center; display: flex; justify-content: center; }
.detrow .detper .wstep { margin-left: 0; }
.detrow .detper .wstep-b { width: 30px; height: 30px; font-size: 17px; }
.detrow .detper .wstep-n { min-width: 26px; font-family: var(--font); font-weight: 700; font-size: var(--fs-19); }
@media (max-width: 620px) { .detrow { grid-template-columns: 10px minmax(0, 1fr) 50px 92px 58px; column-gap: 5px; } .detrow .detper .wstep-b { width: 26px; height: 28px; font-size: 15px; } .detrow .detper .wstep-n { min-width: 20px; font-size: var(--fs-16); } }
html.tv .detrow { grid-template-columns: 14px minmax(0, 1fr) 120px 200px 170px; min-height: 76px; }
html.tv .detrow .detper .wstep-b { width: 56px; height: 56px; font-size: 26px; }
html.tv .detrow .detper .wstep-n { min-width: 40px; font-size: 28px; }
@media (max-width: 620px) {
  .detrow { grid-template-columns: 9px minmax(0, 1fr) 40px 84px 48px; column-gap: 5px; padding: 0 10px; }
  .detrow.head { padding: 0 10px; }
  .detrow.head .detc .pplab { white-space: normal; line-height: 1.15; font-size: 11px; text-align: right; }
  .detrow.head .detc.detper { justify-content: center; } .detrow.head .detc.detper .pplab { text-align: center; }
  .detrow .detper .wstep-b { width: 24px; height: 28px; font-size: 15px; }
  .detrow .detper .wstep-n { min-width: 18px; }
}

/* The loop was rebuilt (a saved curriculum change) */
.rbnote { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: min(480px, calc(100% - 32px));
  background: #fbfaf3; border: 1px solid var(--line-3); border-radius: 14px; box-shadow: 0 10px 30px rgba(30,45,35,.18); padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; column-gap: 14px; row-gap: 4px; align-items: center; }
.rbnote-t { font-family: var(--serif); font-size: 20px; color: var(--ink); grid-column: 1; }
.rbnote-m { font-size: var(--fs-15); color: var(--ink-2); grid-column: 1; font-variant-numeric: tabular-nums; }
.rbnote-n { font-size: var(--fs-15); color: var(--ink-2); grid-column: 1; }
.rbnote .btn { grid-column: 2; grid-row: 1 / span 3; }
html.tv .rbnote { bottom: auto; top: calc(var(--hdr-h, 120px) + 16px); width: 640px; padding: 22px 26px; }
html.tv .rbnote-t { font-size: 30px; } html.tv .rbnote-m, html.tv .rbnote-n { font-size: 22px; }
/* Expected Finish pace panel on a phone: the two figures side by side, Assuming stacked under them */
@media (max-width: 620px) {
  .pacehead2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pacehead2 .lawhd { grid-row: 1; grid-column: 1 / 3; }
  .pacehead2 .lawline { grid-row: 2; }
  .pacehead2 .lawhd.as { grid-row: 3; grid-column: 1 / 3; border-left: 0; border-top: 1px solid #c7d1bf; }
  .pacehead2 .pacefoot { grid-row: 4; grid-column: 1 / 3; border-left: 0; }
  .pacehead2 .lawline b { font-size: 32px; }
}
/* On a phone the two views differ too much in height to share one box: each sizes to itself (Cole 2026-10-12) */
@media (max-width: 620px) { .modebar .modeslot > .ghost { display: none; } }
/* A material's own tick (Curriculum): unticked, it is not part of the loop */
.matitem .matuse { display: inline-flex; align-items: center; margin-right: 10px; cursor: pointer; }
.matitem .matuse input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.matitem.off .mname, .matitem.off .whotag { opacity: .45; }
.matitem.off .mname { text-decoration: line-through; text-decoration-thickness: 1px; }
html.tv .matitem .matuse input { width: 32px; height: 32px; }

/* the footer: a sage panel, the name left, the links, the seedling on books resting on its floor (Cole 2026-10-16) */
.ftr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 28px; row-gap: 18px;
  margin-top: var(--s-10); padding: 26px 32px 0; background: #f7f6ec; border: 1px solid #dfe3d6; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 26px -20px rgba(34,53,42,.45); }
.ftr-l { display: flex; flex-direction: column; gap: 6px; padding-bottom: 26px; }
.ftr-brand { font: 600 22px/1 var(--serif); color: var(--ink); white-space: nowrap; letter-spacing: -.005em; }
.ftr-name { font: 500 14px/1 'Karla', sans-serif; color: #5f6f62; white-space: nowrap; }
.ftr { container-type: inline-size; }
.ftr-links { display: grid; grid-template-columns: repeat(3, max-content); align-items: center; gap: 14px 36px; padding: 0 0 26px 28px; align-self: stretch; align-content: center; border-left: 1px solid #dfe3d6; }
.ftr-links a { position: relative; flex: none; white-space: nowrap; padding: 4px 0; justify-self: start; font: 700 13px/1 'Karla', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #3f5546; text-decoration: none; transition: color .15s; }
.ftr-links a + a::before { content: none; position: absolute; left: -18px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #e0893a; }
.ftr-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.ftr-links a:hover { color: var(--accent); }
.ftr-links a:hover::after { transform: scaleX(1); }
@container (min-width: 1020px) { .ftr-links { display: flex; flex-wrap: nowrap; column-gap: 36px; } .ftr-links a + a::before { content: ''; } }
.ftr svg.sprig.art-seed { display: block; width: 104px; height: 76px; align-self: end; margin-bottom: 18px; overflow: visible; }
@media (max-width: 760px) { .ftr { grid-template-columns: minmax(0, 1fr) auto; } .ftr-links { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, max-content); padding: 0; border-left: 0; } .ftr svg.sprig.art-seed { grid-column: 2; grid-row: 1; align-self: start; margin: -6px 0 0; width: 78px; height: 57px; } .ftr { padding-bottom: 22px; } .ftr-l { padding-bottom: 0; } }
html.tv .ftr-brand { font-size: 28px; } html.tv .ftr-name { font-size: var(--fs-17); } html.tv .ftr-links a { font-size: var(--fs-17); padding: 8px 0; }
html.tv .ftr svg.sprig.art-seed { display: block; width: 130px; height: 95px; }
/* At a Glance sits inside the loop pills' container, as the last pill (Cole 2026-10-16) */
.looptabs .glancebtn { margin: 0 0 0 5px; padding: 13px 22px; border: 0; border-radius: 999px; background: transparent; color: var(--accent); font-weight: 700; font-size: 17px; line-height: 1; white-space: nowrap; box-shadow: inset 0 0 0 1.5px var(--accent); }
.looptabs .glancebtn:hover { background: var(--surface-2); }
.looptabs .glancebtn.on { background: var(--accent); color: #f6f4e8; box-shadow: none; }
html.tv .looptabs .glancebtn { padding: 22px 36px; font-size: var(--fs-19); }
@media (max-width: 560px) { .looptabs .glancebtn { margin-left: 4px; padding: 11px 14px; font-size: 15px; } }
/* even spacing inside the loop pills (Cole: spacing jacked): one gap between every pill, row and column alike; no per-pill margins */
.looptabs { gap: 6px; padding: 6px; }
.looptabs .looptab + .looptab, .looptabs .glancebtn { margin: 0; }
.looptabs .looptab, .looptabs .glancebtn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
html.tv .looptabs { gap: 10px; padding: 10px; }
@media (max-width: 560px) { .looptabs { gap: 5px; padding: 5px; } .looptabs .glancebtn { margin: 0; } }

/* the welcome after onboarding (Cole 2026-10-16): a card above Today, the mark drawing itself once */
.welcome { position: relative; display: flex; align-items: center; gap: 18px; margin: 0 0 18px; padding: 16px 52px 16px 18px; background: var(--surface); border: 1px solid var(--line-3); border-radius: 18px; box-shadow: var(--shadow-card); animation: wl-in .45s var(--ease) both; }
.wl-mark { flex: none; width: 72px; height: 72px; }
.wl-mark svg { overflow: visible; }
.wl-soil { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wl-draw .5s .1s var(--ease) forwards; }
.wl-seed { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: wl-seed 1.1s .35s cubic-bezier(.3, .7, .4, 1) forwards; }
.wl-stem { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wl-draw .9s .8s cubic-bezier(.5, 0, .3, 1) forwards; }
.wl-leaf { transform-box: view-box; transform-origin: -12px 0; transform: scale(0); animation: wl-unfurl .55s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.wl-petal { transform-box: view-box; transform-origin: 0 0; transform: scale(0); animation: wl-bloom .5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.wl-heart { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: wl-bloom .4s 2.05s cubic-bezier(.3, 1.8, .5, 1) forwards; }
.wl-plant { transform-box: view-box; transform-origin: 50px 82px; animation: wl-sway 4.5s 2.5s ease-in-out infinite; }
.wl-text { margin: 0; font-family: var(--serif); font-size: var(--fs-22); line-height: 1.3; color: var(--ink); }
.wl-text b { font-weight: 600; }
.wl-text span { color: var(--ink-2); }
.wl-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.wl-x:hover { background: var(--surface-2); color: var(--ink); }
@keyframes wl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wl-draw { to { stroke-dashoffset: 0; } }
@keyframes wl-seed { 0% { opacity: 0; transform: translateY(-34px); } 30% { opacity: 1; transform: translateY(0) scale(1.15, .8); } 42% { transform: translateY(0) scale(1); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4, .7); } }
@keyframes wl-unfurl { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes wl-bloom { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes wl-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(2.2deg); } 70% { transform: rotate(-1.8deg); } }
@media (prefers-reduced-motion: reduce) { .welcome, .wl-soil, .wl-seed, .wl-stem, .wl-leaf, .wl-petal, .wl-heart, .wl-plant { animation: none; } .wl-soil, .wl-stem { stroke-dashoffset: 0; } .wl-seed { opacity: 0; } .wl-leaf, .wl-petal, .wl-heart { transform: none; } }
html.tv .wl-mark { width: 110px; height: 110px; } html.tv .wl-x { width: 56px; height: 56px; font-size: 34px; }
@media (max-width: 560px) { .welcome { gap: 12px; padding: 14px 44px 14px 14px; } .wl-mark { width: 56px; height: 56px; } .wl-text { font-size: var(--fs-19); } }

/* the welcome's three lines (Cole 2026-10-16) */
.wl-text { display: grid; gap: 6px; }
.wl-text p { margin: 0; }
.wl-text .wl-sub { font-family: var(--font); font-size: var(--fs-16); color: var(--ink-2); }
.welcome { align-items: flex-start; }

/* one voice throughout (Cole 2026-10-16): every line the same type as the first; only the opening sentence is bold */
.wl-text .wl-sub { font-family: var(--serif); font-size: var(--fs-22); line-height: 1.3; color: var(--ink); }
@media (max-width: 560px) { .wl-text .wl-sub { font-size: var(--fs-19); } }

/* Loop Setup: five tabs, following onboarding's steps (Cole 2026-10-16) */
.s2togglewrap { container-type: inline-size; }
.s2toggle.five { max-width: 100%; flex-wrap: nowrap; justify-content: center; }
.s2toggle.five .s2tab { padding: 8px 13px; font-size: 13px; letter-spacing: .08em; }
@container (max-width: 640px) { .s2toggle.five .s2tab { padding: 7px 9px; font-size: 12px; letter-spacing: .05em; } }
/* too narrow for one row: a deliberate 3 + 2 grid of equal cells in a rounded rectangle, never a lopsided wrap */
@container (max-width: 520px) {
  .s2toggle.five { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; width: 100%; box-sizing: border-box; border-radius: 14px; }
  .s2toggle.five .s2tab { grid-column: span 2; padding: 9px 4px; font-size: 12px; letter-spacing: .04em; border-radius: 10px; text-align: center; }
  .s2toggle.five .s2tab:nth-child(n+4) { grid-column: span 3; }
}
.s2subjlist { display: grid; gap: 8px; }
.stcard.subjrow { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 12px 18px; }
.subjrow .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.subjrow .subjname { font: 600 20px/1.1 var(--serif); color: var(--ink); }
.subjrow .subjwho { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

/* the footer seedling blossoms out of the books: the stem draws up, then each leaf unfurls from its base */
.art-seed { pointer-events: auto; }
.art-seed .sd-stem { stroke-dasharray: 1; stroke-dashoffset: 1; }
.art-seed .sd-leaf { transform-origin: -12px 0; transform: scale(0); }
.art-seed.grow .sd-stem { animation: sd-draw .7s cubic-bezier(.5, 0, .3, 1) forwards; }
.art-seed.grow .sd-leaf { animation: sd-unfurl .55s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.art-seed.grow .sd-l1 { animation-delay: .45s; }
.art-seed.grow .sd-l2 { animation-delay: .65s; }
.art-seed.grow .sd-l3 { animation-delay: .85s; }
@keyframes sd-draw { to { stroke-dashoffset: 0; } }
@keyframes sd-unfurl { 0% { transform: scale(0) rotate(-25deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .art-seed .sd-stem { stroke-dashoffset: 0; } .art-seed .sd-leaf { transform: none; } .art-seed.grow .sd-stem, .art-seed.grow .sd-leaf { animation: none; } }

/* the welcome mark's motion ("Welcome Sprout Options" 5a, Cole 2026-10-16) */
@keyframes ws-draw{to{stroke-dashoffset:0}}
@keyframes ws-unfurl{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1) rotate(0)}}
@keyframes ws-open{0%{transform:scale(.25) rotate(70deg)}100%{transform:scale(1) rotate(0)}}
@keyframes ws-bloom{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes ws-seed{0%{opacity:0;transform:translateY(-34px)}30%{opacity:1;transform:translateY(0) scale(1.15,.8)}42%{transform:translateY(0) scale(1)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4,.7)}}
@keyframes ws-sway{0%,100%{transform:rotate(0)}30%{transform:rotate(2.2deg)}70%{transform:rotate(-1.8deg)}}
@keyframes ws-rise{0%{transform:translateY(22px)}100%{transform:translateY(0)}}
@keyframes ws-coil{0%{transform:rotate(-230deg) scale(.22)}100%{transform:rotate(0) scale(1)}}
@keyframes ws-fade{0%{opacity:0}100%{opacity:1}}
@keyframes ws-ripen{0%{fill:#8fb36a}100%{fill:#c8453a}}
@keyframes ws-pencil{0%{transform:translate(0,0);opacity:1}80%{transform:translate(72px,0);opacity:1}100%{transform:translate(78px,-16px);opacity:0}}
@keyframes ws-spin{0%{transform:rotate(-1080deg) scale(.08)}100%{transform:rotate(0) scale(1)}}
@keyframes ws-up{0%{transform:translateY(26px)}100%{transform:translateY(0)}}
@keyframes ws-land{0%{transform:scale(1)}30%{transform:scale(1.14,.84)}60%{transform:scale(.94,1.07)}100%{transform:scale(1)}}
@keyframes ws-wobble{0%{transform:rotate(0)}20%{transform:rotate(20deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-2.5deg)}100%{transform:rotate(0)}}
@keyframes ws-hop{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-5px) scale(1.12)}}
@keyframes ws-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes ws-burst{0%{transform:translate(0,0) rotate(0) scale(.3);opacity:1}75%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1);opacity:0}}
@keyframes ws-float{0%{transform:translateY(0) scale(0);opacity:1}25%{transform:translateY(-3px) scale(1.15)}100%{transform:translateY(-18px) scale(1);opacity:0}}
@keyframes ws-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.55) rotate(25deg)}}
@keyframes ws-hopin{0%{transform:translate(34px,-36px)}55%{transform:translate(4px,-14px)}80%{transform:translate(0,0) scale(1.15,.85)}100%{transform:translate(0,0) scale(1)}}
@keyframes ws-tilt{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(8deg)}55%{transform:rotate(0)}}
@keyframes ws-page{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes ws-popup{0%{transform:scaleY(0)}70%{transform:scaleY(1.08)}100%{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce) { .wl-mark * { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } }
/* the welcome mark, larger so the bird and berries read (Cole 2026-10-16) */
.welcome { align-items: center; }
.wl-mark { width: 132px; height: 132px; margin: -10px 0 -6px -4px; }
html.tv .wl-mark { width: 190px; height: 190px; }
@media (max-width: 560px) { .wl-mark { width: 96px; height: 96px; margin: -6px 0 -4px -2px; } }
/* smoother: the wreath spins as an HTML layer (composited), two turns not three, one combined motion */
.wlm { position: relative; width: 100%; height: 100%; }
.wlm > svg, .wlm > div { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wlm svg { overflow: visible; }
.wlm-wreath { transform-origin: 50% 42%; will-change: transform; animation: wlm-spin 1.6s .55s cubic-bezier(.22, .7, .18, 1) both; }
.wlm-land { position: absolute; inset: 0; transform-origin: 50% 64%; animation: wlm-land .6s 2.1s cubic-bezier(.3, .6, .4, 1) both; }
@keyframes wlm-spin { 0% { transform: translateY(26%) rotate(-720deg) scale(.08); } 100% { transform: translateY(0) rotate(0) scale(1); } }
@keyframes wlm-land { 0% { transform: scale(1); } 35% { transform: scale(1.1, .9); } 70% { transform: scale(.97, 1.03); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .wlm-wreath, .wlm-land { animation: none; } }
/* the bird on its own composited layer too: hop in, squash on landing, one head tilt */
.wlm-bird { transform-origin: 59% 23%; will-change: transform; transform: translate(34%, -36%); animation: wlm-hopin .85s 2.15s cubic-bezier(.33, .6, .4, 1) forwards; }
.wlm-tilt { position: absolute; inset: 0; transform-origin: 59% 20.5%; animation: wlm-tilt 1.4s 3.1s ease-in-out both; }
@keyframes wlm-hopin { 0% { transform: translate(34%, -36%); } 55% { transform: translate(4%, -14%); } 80% { transform: translate(0, 0) scale(1.12, .88); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes wlm-tilt { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-14deg); } 70% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .wlm-bird { animation: none; transform: none; } .wlm-tilt { animation: none; } }

/* Loop Setup is built from onboarding's parts (Cole 2026-10-16): onboarding's own styles for them, copied from
   onboarding/onboarding.css (its ob-* rules only) */
@keyframes ob-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ob-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ob-step { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.ob-note { margin: 20px 0 0; max-width: 560px; padding: 18px 22px 20px; background: #e9ede3; border: 1px solid #c7d1bf; border-radius: 14px; }
.ob-note b { display: inline-block; padding: 4px 9px; border-radius: 6px; background: #d3dcc8; color: #1c2e23; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.ob-note p { margin: 0; font-family: 'Newsreader', serif; font-size: 21px; line-height: 1.45; text-wrap: pretty; }
.ob-note em { font-style: italic; font-weight: 600; color: #3d6b4f; background: linear-gradient(transparent 58%, #c2e0b4 58%, #c2e0b4 94%, transparent 94%); padding: 0 3px; }
.ob-card { position: relative; background: #f7f6ec; border: 1px solid #d9dfd0; border-radius: 16px; box-shadow: 0 1px 0 #cfd7c6, 0 10px 24px -18px rgba(34,53,42,.35); }
.ob-card.big { border-radius: 20px; box-shadow: 0 1px 0 #cfd7c6, 0 14px 32px -20px rgba(34,53,42,.35); }
.ob-card.fresh { animation: ob-in .36s cubic-bezier(.2,.8,.2,1); }
.ob-bar5 { position: absolute; left: 0; top: 14px; bottom: 14px; width: 5px; border-radius: 0 4px 4px 0; }
.ob-lab { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4f6656; margin-bottom: 8px; }
.ob-lab.sm { font-size: 12px; letter-spacing: .1em; margin-bottom: 0; }
.ob-stform { margin-top: 24px; max-width: 420px; padding: 18px 20px 20px; }
.ob-namebox { position: relative; display: block; background: #fff; border-radius: 10px; }
.ob-namehi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; margin-left: -10px; border-radius: 6px; color: transparent; font: 500 17px 'Karla', sans-serif; white-space: pre; }
.ob-namein { position: relative; width: 100%; height: 44px; padding: 0 14px; border: 1.5px solid #c7d1bf; border-radius: 10px; background: transparent; font: 500 17px 'Karla', sans-serif; transition: color .16s; }
.ob-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.ob-sw { cursor: pointer; width: 28px; height: 28px; border-radius: 50%; border: 0; transition: transform .16s, box-shadow .16s; box-shadow: 0 0 0 1px rgba(34,53,42,.1); }
.ob-add { margin-top: 18px; cursor: pointer; border: 1.5px solid #3d6b4f; border-radius: 999px; padding: 12px 22px; font: 700 16px 'Karla', sans-serif; background: #3d6b4f; color: #f6f4e8; transition: background .16s, color .16s; }
.ob-add:disabled { cursor: not-allowed; border-color: #dde3d4; background: transparent; color: #a3b0a1; }
.ob-list { margin-top: 12px; display: grid; gap: 12px; max-width: 420px; }
.ob-strow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; }
.ob-stacts { display: flex; gap: 10px; }
.ob-tagdel:hover { border-color: #b5432f; color: #b5432f; }
.ob-stdel { flex-wrap: wrap; }
.ob-stdel p { margin: 0; flex: 1 1 260px; font: 600 18px/1.3 var(--serif); color: #14241a; }
.ob-stdel .ob-rmacts { display: flex; gap: 10px; }
.ob-stdel .ob-rmacts button { min-height: 42px; padding: 0 20px; border-radius: 10px; font: 700 15px/1 var(--font, 'Karla', sans-serif); cursor: pointer; }
.ob-stdel .ob-rmyes { background: #b5432f; border: 1.5px solid #b5432f; color: #fff; }
.ob-stdel .ob-rmno { background: #fff; border: 1.5px solid #c7d1bf; color: #22352a; }
.ob-stchip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 16px; border-radius: 10px; border: 1.5px solid; font: 700 15px 'Karla', sans-serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 1px 0 rgba(34,53,42,.12); }
.ob-x { cursor: pointer; border: 0; background: transparent; color: inherit; opacity: .6; font: 500 20px 'Karla', sans-serif; padding: 0; line-height: 1; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ob-x:hover { opacity: 1; background: rgba(34,53,42,.1); }
.ob-suform { margin-top: 28px; padding: 22px 24px 24px; }
.ob-suin { width: 100%; height: 50px; padding: 0 16px; border: 1.5px solid #c7d1bf; border-radius: 12px; background: #fff; font: 500 20px 'Karla', sans-serif; }
.ob-sugs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ob-sug { cursor: pointer; border: 0; border-radius: 10px; padding: 8px 14px 8px 10px; display: inline-flex; align-items: center; gap: 10px; font: 500 17px 'Newsreader', serif; color: #22352a; transition: transform .16s, box-shadow .16s; }
.ob-sug:hover { transform: translateY(-1px); box-shadow: 0 3px 8px -4px rgba(34,53,42,.35); }
.ob-sug i { width: 6px; align-self: stretch; border-radius: 3px; margin: -2px 0; }
.ob-sug.on { box-shadow: inset 0 0 0 2px #3d6b4f; }
.ob-who { display: flex; gap: 10px; flex-wrap: wrap; }
.ob-whochip { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 999px; border: 1.5px solid #c7d1bf; background: #f4f5ee; color: #8a9a8c; font: 600 15px 'Karla', sans-serif; white-space: nowrap; }
.ob-tick { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #b6c2ae; color: transparent; background: #fff; transition: background .16s, border-color .16s; }
.ob-whochip.on .ob-tick { border: 0; background: #3d6b4f; color: #f6f4e8; }
.ob-subrow { padding: 18px 20px 18px 24px; }
.ob-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ob-subname { font-family: 'Newsreader', serif; font-weight: 500; font-size: 26px; line-height: 1; }
.ob-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ob-tag { cursor: pointer; border: 1.5px solid #c7d1bf; padding: 4px 9px; border-radius: 6px; background: transparent; color: #8a9a8c; font: 700 13px 'Karla', sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: transform .16s, background .16s, color .16s, border-color .16s; }
.ob-tag:hover { transform: translateY(-1px); }
.ob-groups { margin-top: 28px; display: grid; gap: 12px; max-width: 560px; }
.ob-gcard { padding: 18px 20px 18px 24px; }
.ob-out { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ob-out > span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a9a8c; }
.ob-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.ob-zone { border-radius: 12px; padding: 10px 12px 12px; min-height: 84px; transition: background .16s, box-shadow .16s; border: 1px solid transparent; }
.ob-zone.empty { background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 1.5px #b6c2ae; }
.ob-zone.empty.armed { background: rgba(61,107,79,.06); box-shadow: inset 0 0 0 1.5px #3d6b4f; }
.ob-zone.target { cursor: pointer; }
.ob-zone.hover { background: #fff !important; }
.ob-zlab { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.ob-ztags { display: flex; gap: 6px; flex-wrap: wrap; min-height: 30px; align-content: flex-start; }
.ob-gtag { cursor: grab; border: 0; padding: 6px 10px; border-radius: 6px; font: 700 13px 'Karla', sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: transform .16s, opacity .16s, box-shadow .16s; box-shadow: 0 1px 0 rgba(34,53,42,.12); }
.ob-gtag:hover { transform: translateY(-1px); }
.ob-gtag.lifted { opacity: .35; }
.ob-cur { margin-top: 28px; display: grid; gap: 12px; max-width: 620px; }
.ob-curcard { padding: 18px 20px 18px 24px; container-type: inline-size; }
.ob-currow, .ob-curhead { display: grid; grid-template-columns: minmax(0, 1fr) 220px 32px; column-gap: 20px; }
.ob-currow { align-items: end; padding: 14px 12px 14px 14px; border-radius: 12px; }
.ob-currow + .ob-currow { margin-top: 8px; }
.ob-curcard .ob-subname + .ob-currow { margin-top: 16px; }
.ob-currow.solo, .ob-curhead.solo { grid-template-columns: minmax(0, 1fr) 32px; }
.ob-curhead { padding-bottom: 10px; margin-top: 18px; }
.ob-curcard .ob-subname + .ob-currow { margin-top: 14px; }
.ob-currow.wide { grid-template-columns: minmax(0, 1fr) 32px; row-gap: 12px; }
.ob-currow.wide > :first-child { grid-row: 1; grid-column: 1; }
.ob-currow.wide > .ob-names { grid-row: 2; grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ob-currow.wide > .ob-wholine { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; }
.ob-currow .ob-wholine .ob-names { grid-row: auto; grid-column: auto; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ob-currow.inl > .ob-bookcol { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
.ob-currow.inl > .ob-bookcol > .ob-res { left: 128px; }
.ob-currow .ob-type { padding-top: 8px; padding-bottom: 8px; font-size: 12px; letter-spacing: .1em; }
.ob-currow .ob-bookcol:has(.ob-pqs) { gap: 14px; }
.ob-pqs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-left: 128px; width: calc(100% - 128px); }
.ob-pq { display: grid; gap: 6px; min-width: 0; }
.ob-pqlab { font: 700 11px 'Karla', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8a4a6b; padding-left: 2px; }
.ob-pqs .ob-fbtn { width: 100%; min-width: 0; }
.ob-pqs .ob-fbtn > span { overflow: hidden; text-overflow: ellipsis; }
.ob-pqs .ob-fsel .ob-edmenu { left: 0; right: auto; }
.ob-pqs .ob-pq:last-child .ob-edmenu { left: auto; right: 0; }
.ob-pqs .ob-pq:first-child .ob-edmenu { min-width: 230px; }
.ob-fdate { height: 30px; padding: 0 8px; border: 1.5px solid #c7d1bf; border-radius: 6px; background: #fff; font: 600 14px 'Karla', sans-serif; color: #22352a; }
.ob-fdate:focus { outline: none; border-color: #3d6b4f; box-shadow: 0 0 0 3px rgba(61,107,79,.18); }
@container (max-width: 640px) { .ob-pqs { grid-template-columns: 1fr; gap: 8px; margin-left: 0; width: 100%; } .ob-pq { grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 10px; } .ob-pqlab { text-align: right; padding: 0 4px 0 0; } }
html.tv .ob-pqs { margin-left: 180px; width: calc(100% - 180px); }
html.tv .ob-pqlab { font-size: 16px; }
html.tv .ob-fdate { height: 44px; font-size: 20px; }
.ob-whogap { width: 118px; }
html.tv .ob-whogap { width: 170px; }
.ob-currow.inl > .ob-bookcol > .ob-type, .ob-rline > .ob-type, .ob-whotag { width: 118px; box-sizing: border-box; text-align: center; padding-left: 6px; padding-right: 6px; }
.ob-whotag { background: #e3e8dc; color: #3f5546; }
.ob-currow.wide > .ob-rm, .ob-currow.wide > .ob-keep { grid-row: 1; grid-column: 2; align-self: end; }
@container (max-width: 540px) { .ob-currow { grid-template-columns: minmax(0, 1fr) 32px; row-gap: 12px; } .ob-currow > :first-child { grid-row: 1; grid-column: 1; } .ob-currow .ob-names { grid-row: 2; grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .ob-currow > .ob-rm, .ob-currow > .ob-keep { grid-row: 1; grid-column: 2; align-self: end; } .ob-curhead .ob-whohead { display: none; } }
.ob-bookcol { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; position: relative; }
.ob-type { flex: none; padding: 6px 10px; border-radius: 6px; font: 700 11px 'Karla', sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.ob-bookin { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid #c7d1bf; border-radius: 10px; background: #fff; font: 500 18px 'Karla', sans-serif; }
.ob-bookin.picked { border-color: #3d6b4f; }
.ob-names { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ob-name { cursor: pointer; padding: 5px 9px; border-radius: 6px; font: 700 11px 'Karla', sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; border: 1.5px solid #c7d1bf; background: transparent; color: #8a9a8c; transition: background .16s, color .16s, border-color .16s; }
.ob-rm { flex: none; cursor: pointer; margin-bottom: 7px; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #c7d1bf; background: #fff; color: #3f5546; font: 500 20px 'Karla', sans-serif; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .16s, color .16s, border-color .16s; }
.ob-rm:hover { background: #c96f2c; border-color: #c96f2c; color: #fff; }
.ob-adders { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 16px; border-top: 1px solid #e3e6da; }
.ob-adder { cursor: pointer; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px 0 14px; border-radius: 10px; border: 1px solid; font: 700 14px 'Karla', sans-serif; letter-spacing: .02em; white-space: nowrap; }
.ob-adder:hover { filter: brightness(.97); }
.ob-res { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 5; background: #fff; border: 1.5px solid #c7d1bf; border-radius: 12px; box-shadow: 0 14px 32px -16px rgba(34,53,42,.45); max-height: 340px; overflow: auto; padding: 4px; }
.ob-resrow { display: block; width: 100%; text-align: left; cursor: pointer; border: 0; background: transparent; padding: 10px 12px; border-radius: 8px; }
.ob-resrow:hover, .ob-resrow.on { background: #eef1e6; }
.ob-rt { display: block; font: 500 17px 'Newsreader', serif; color: #22352a; }
.ob-rm2 { display: block; margin-top: 2px; font-size: 13px; color: #4f6656; }
.ob-red { display: block; margin-top: 2px; font-size: 12px; color: #3f5546; }
.ob-rnote { margin: 0; padding: 10px 12px; font-size: 14px; color: #4f6656; }
html.tv .ob-note p { font-size: 28px; }
html.tv .ob-lab, html.tv .ob-zlab, html.tv .ob-out > span { font-size: 20px; }
html.tv .ob-namein, html.tv .ob-suin, html.tv .ob-bookin { height: 64px; font-size: 26px; }
html.tv .ob-stform { max-width: 620px; }
html.tv .ob-list { max-width: 620px; }
html.tv .ob-sw { width: 44px; height: 44px; }
html.tv .ob-add, html.tv .ob-whochip, html.tv .ob-sug { font-size: 24px; }
html.tv .ob-tag, html.tv .ob-gtag, html.tv .ob-stchip, html.tv .ob-name, html.tv .ob-type { font-size: 20px; }
html.tv .ob-subname { font-size: 34px; }
html.tv .ob-groups, html.tv .ob-cur { max-width: 900px; }
html.tv .ob-currow, html.tv .ob-curhead { grid-template-columns: minmax(0, 1fr) 320px 44px; }
html.tv .ob-currow.wide { grid-template-columns: minmax(0, 1fr) 44px; }
html.tv .ob-adder { height: 60px; font-size: 22px; }
.ob-lab.lead { font-family: 'Newsreader', serif; font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -.01em; text-transform: none; color: #14241a; margin-bottom: 12px; }
html.tv .ob-lab.lead { font-size: 40px; }
.ob-res { width: 460px; max-width: calc(100vw - 32px); max-height: 520px; padding: 8px; display: grid; gap: 8px; border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(34,53,42,.5); margin-top: 6px; }
.ob-scard { position: relative; padding: 12px 14px 14px; border-radius: 10px; background: #f7f6ec; border: 1px solid #d9dfd0; }
.ob-shead { display: flex; align-items: flex-start; gap: 12px; }
.ob-cover { flex: none; width: 36px; height: 48px; border-radius: 4px; box-shadow: inset 3px 0 0 rgba(255,255,255,.25); }
.ob-sbody { min-width: 0; flex: 1; }
.ob-stitle { font: 500 23px/1.1 'Newsreader', serif; letter-spacing: -.01em; color: #22352a; }
.ob-stitle mark { background: transparent; color: #c96f2c; }
.ob-smeta { margin-top: 7px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 500 15px 'Karla', sans-serif; color: #22352a; }
.ob-edtag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px 3px 8px; border-radius: 5px; background: #d4e6c9; color: #2f5a3f; font: 700 11px 'Karla', sans-serif; letter-spacing: .08em; text-transform: uppercase; border: 1px solid #b8d0aa; cursor: default; }
.ob-edtag.more { cursor: pointer; }
.ob-edmenu { position: absolute; left: 60px; top: 64px; z-index: 3; min-width: 200px; background: #fff; border: 1.5px solid #c7d1bf; border-radius: 10px; box-shadow: 0 14px 30px -14px rgba(34,53,42,.45); padding: 5px; display: grid; }
.ob-edopt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 7px; border: 0; background: transparent; text-align: left; cursor: pointer; font: 500 14px 'Karla', sans-serif; color: #22352a; }
.ob-edopt.on { background: #eef1e6; font-weight: 600; }
.ob-edopt.on svg { color: #2f5a3f; }
.ob-edopt:hover { background: #eef1e6; }
.ob-srow { margin-top: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px; }
.ob-slab { display: inline-block; margin-top: 9px; padding: 3px 8px; border-radius: 5px; background: #d4e6c9; color: #2f5a3f; font: 700 11px 'Karla', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-chips.grade { display: grid; grid-template-columns: repeat(6, 1fr); }
.ob-chip { cursor: pointer; min-height: 36px; padding: 4px 12px; border-radius: 8px; border: 1.5px solid #a9bba2; background: #fff; font: 600 16px 'Newsreader', serif; color: #22352a; box-shadow: 0 1px 0 #cfd7c6; }
.ob-chips.grade .ob-chip { padding: 0; font-size: 17px; }
.ob-chip:hover { border-color: #3d6b4f; background: #3d6b4f; color: #f6f4e8; }
.ob-custom { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 44px; border-radius: 10px; border: 1px solid #2f5a3f; background: #eef4e8; color: #2f5a3f; font: 700 14px 'Karla', sans-serif; letter-spacing: .02em; }
.ob-custom:hover { filter: brightness(.97); }
.ob-listbody .ob-res { width: auto; left: 0; right: 0; max-width: none; }
html.tv .ob-res { width: 720px; }
html.tv .ob-stitle { font-size: 34px; }
html.tv .ob-smeta { font-size: 22px; }
html.tv .ob-edtag, html.tv .ob-slab { font-size: 18px; }
html.tv .ob-chip { min-height: 56px; font-size: 24px; }
html.tv .ob-custom { height: 64px; font-size: 22px; }
@media (max-width: 720px) { .ob-res { width: auto; left: 0; right: 0; max-width: none; } .ob-chips.grade { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); } }
html.tv .ob-chips.grade .ob-chip { font-size: 24px; }
.ob-chip.hit { border-color: #3d6b4f; background: #3d6b4f; color: #f6f4e8; }
.ob-listbox { width: 100%; box-sizing: border-box; border: 1.5px solid #c7d1bf; border-radius: 10px; background: #fff; }
.ob-listbox.open { border-color: #2f5a3f; box-shadow: 0 0 0 3px rgba(47,90,63,.14); }
.ob-listhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; height: 46px; padding: 0 6px 0 14px; }
.ob-listname { min-width: 0; width: 100%; border: 0; padding: 0; background: transparent; font: 500 18px 'Karla', sans-serif; color: #22352a; outline: none; }
.ob-count { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; border-radius: 7px; border: 1px solid #2f5a3f; background: #eef4e8; color: #2f5a3f; font: 700 13px 'Karla', sans-serif; white-space: nowrap; }
.ob-listbox.open .ob-count { background: #2f5a3f; color: #fff; }
.ob-listbox.open .ob-count svg { transform: rotate(180deg); }
.ob-listbody { border-top: 1px solid #e3e6da; padding: 10px 10px 12px; display: grid; gap: 6px; }
.ob-listbody .ob-bookcol { width: 100%; align-items: stretch; }
.ob-litems { display: grid; gap: 6px; max-height: 138px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c7d1bf transparent; }
html.tv .ob-litems { max-height: 186px; }
.ob-litem { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; column-gap: 10px; height: 42px; padding: 0 4px 0 8px; border-radius: 8px; background: #f7f6ec; }
.ob-lnum { font: 600 13px 'Karla', sans-serif; color: #2f5a3f; }
.ob-ltitle { font: 400 17px 'Newsreader', serif; color: #3f5546; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-lrm { cursor: pointer; width: 28px; height: 28px; border: 0; background: transparent; color: #8a9a8c; font-size: 20px; line-height: 1; border-radius: 50%; }
.ob-lrm:hover { color: #c96f2c; }
.ob-listbody .ob-bookcol { margin-top: 4px; }
.ob-listbody .ob-bookin { height: 44px; font-size: 17px; }
.ob-listbody .ob-bookin:focus { border-color: #3d6b4f; box-shadow: 0 0 0 3px rgba(61,107,79,.18); outline: none; }
.ob-addone { flex: none; cursor: pointer; align-self: center; height: 36px; padding: 0 16px; border-radius: 8px; border: 1.5px solid #3d6b4f; background: #3d6b4f; font: 700 14px 'Karla', sans-serif; color: #f6f4e8; }
.ob-addone:hover { filter: brightness(1.08); }
.ob-rline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: center; width: 100%; }
.ob-rline.routine { grid-template-columns: auto minmax(0, 1fr) auto auto; }   /* a routine: its rhythm and its list (Cole 2026-10-20) */
.ob-rline.routine .ob-fbtn { min-width: 132px; }
.ob-litemin { width: 100%; box-sizing: border-box; }

.ob-fsel { position: relative; }
.ob-rline.list { position: relative; }
.ob-rline.list .ob-fsel { position: static; }
.ob-rline.list .ob-fbtn { min-width: 120px; }
.ob-lpanel { position: relative; margin-left: 128px; width: calc(100% - 128px); box-sizing: border-box; padding: 8px; display: grid; gap: 6px; background: #fff; border: 1.5px solid #c7d1bf; border-radius: 12px; box-shadow: 0 14px 32px -16px rgba(34,53,42,.45); }
.ob-lpanel .ob-bookcol { width: 100%; align-items: stretch; }
.ob-lpanel .ob-bookin { height: 42px; font-size: 16px; }
.ob-lpanel .ob-res { width: auto; left: 0; right: 0; max-width: none; }
html.tv .ob-rline > .ob-type, html.tv .ob-whotag { width: 170px; }
html.tv .ob-lpanel { margin-left: 180px; width: calc(100% - 180px); }
.ob-fbtn { cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 176px; height: 46px; padding: 0 14px; border: 1.5px solid #c7d1bf; border-radius: 10px; background: #fff; font: 500 16px 'Karla', sans-serif; color: #22352a; white-space: nowrap; }
.ob-fbtn:hover { border-color: #a3b0a1; }
.ob-fbtn.open, .ob-fbtn:focus-visible { outline: none; border-color: #3d6b4f; box-shadow: 0 0 0 3px rgba(61,107,79,.18); }
.ob-fbtn svg { color: #5f6f62; transition: transform .15s; }
.ob-fbtn.open svg { transform: rotate(180deg); }
.ob-fsel .ob-edmenu { left: auto; right: 0; top: 100%; margin-top: 6px; width: max-content; min-width: 100%; box-sizing: border-box; display: grid; gap: 2px; }
.ob-fsel .ob-edopt { width: 100%; box-sizing: border-box; min-height: 40px; gap: 18px; white-space: nowrap; font: 500 15px 'Karla', sans-serif; color: #22352a; }
.ob-fsel .ob-edopt.on { font-weight: 700; }
.ob-fevery { display: inline-flex; align-items: center; gap: 6px; }
.ob-fnum { width: 40px; height: 28px; padding: 0; border: 1.5px solid #c7d1bf; border-radius: 6px; background: #fff; font: 700 14px 'Karla', sans-serif; color: #22352a; text-align: center; -moz-appearance: textfield; }
.ob-fnum::-webkit-inner-spin-button, .ob-fnum::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ob-fnum:focus { outline: none; border-color: #3d6b4f; box-shadow: 0 0 0 3px rgba(61,107,79,.18); }
@container (max-width: 440px) { .ob-lpanel { margin-left: 0; width: 100%; } .ob-rline { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; } .ob-rline > .ob-fsel { grid-column: 2; } .ob-fbtn { width: 100%; } }
html.tv .ob-fbtn { height: 64px; font-size: 24px; min-width: 260px; }
html.tv .ob-fsel .ob-edopt { font-size: 22px; min-height: 52px; }
html.tv .ob-fnum { width: 56px; height: 40px; font-size: 20px; }
html.tv .ob-listhead { height: 64px; }
html.tv .ob-listname { font-size: 26px; }
html.tv .ob-count { height: 48px; font-size: 18px; }
html.tv .ob-litem { height: 58px; }
html.tv .ob-ltitle { font-size: 24px; }
html.tv .ob-lnum { font-size: 18px; }
html.tv .ob-listbody .ob-bookin { height: 60px; font-size: 24px; }
html.tv .ob-addone { height: 52px; font-size: 20px; }
@container (max-width: 440px) { .ob-rline, .ob-currow.inl > .ob-bookcol { grid-template-columns: minmax(0, 1fr); row-gap: 8px; } .ob-rline > .ob-type, .ob-currow.inl > .ob-bookcol > .ob-type { width: auto; justify-self: start; } .ob-rline > .ob-fsel { grid-column: 1; } .ob-fbtn, .ob-rline.list .ob-fbtn { width: 100%; min-width: 0; } .ob-currow.inl > .ob-bookcol > .ob-res { left: 0; } .ob-whogap { display: none; } .ob-currow.wide > .ob-wholine { grid-template-columns: minmax(0, 1fr); } .ob-pq { grid-template-columns: minmax(0, 1fr); gap: 4px; } .ob-pqlab { text-align: left; padding-left: 2px; } }
.ob-rline.proj { grid-template-columns: auto minmax(0, 1fr); }
.ob-currow.wide > .ob-rm, .ob-currow.wide > .ob-keep { align-self: start; margin: 7px 0 0; }
html.tv .ob-currow.wide > .ob-rm { margin-top: 16px; }
.ob-currow.wide > .ob-wholine .ob-names, .ob-currow.wide > .ob-names { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
html.tv .ob-currow.wide > .ob-wholine .ob-names { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ob-lpanel { box-shadow: none; border-color: #d3dcc8; }
.ob-rline:not(.list) .ob-fbtn { min-width: 150px; }
.ob-rline { grid-template-columns: auto minmax(120px, 1fr) auto; }
.ob-rline.proj { grid-template-columns: auto minmax(0, 1fr); }
html.tv .ob-currow.inl > .ob-bookcol > .ob-type { width: 170px; }
html.tv .ob-rline:not(.list) .ob-fbtn { min-width: 220px; }
@container (max-width: 440px) { .ob-rline, .ob-rline.proj { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 440px) { .ob-currow .ob-bookin { font-size: 16px; padding: 0 12px; } }
.ob-currow.wide > .ob-wholine .ob-names, .ob-currow.wide > .ob-names { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); }
html.tv .ob-pqs .ob-fbtn { min-width: 0; }
.ob-name { font-size: 13px; letter-spacing: .06em; padding: 7px 6px; border-radius: 7px; }
html.tv .ob-name { font-size: 22px; padding: 9px 8px; }
.ob-litems { gap: 0; }
.ob-litem { background: transparent; border-radius: 0; border-bottom: 1px solid #e3edda; }
.ob-litem:last-child { border-bottom: 0; }
.ob-litem:hover { background: #f3f8ee; }
@keyframes ob-need { 0%, 100% { box-shadow: 0 1px 0 #cfd7c6, 0 10px 24px -18px rgba(34,53,42,.35); } 30%, 70% { box-shadow: 0 0 0 3px #c96f2c, 0 10px 24px -18px rgba(34,53,42,.35); } }
.ob-curcard.need { animation: ob-need 1.4s ease 2; }
html.look .ob-bookin, html.look .ob-fbtn { height: 44px; }
html.look .ob-name { height: 34px; padding: 0 6px; border-radius: 8px; border: 1.5px solid #c7d1bf; background: #fff; color: #8a9a8c; font: 700 14px 'Karla', sans-serif; letter-spacing: 0; text-transform: none; }
html.look .ob-currow.wide > .ob-wholine .ob-names, html.look .ob-currow.wide > .ob-names { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
html.look .ob-adders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border-top: 0; padding-top: 8px; }
html.look .ob-adder { justify-content: center; padding: 0 10px; }
.look-1a .ob-rm { width: 36px; height: 36px; border-radius: 8px; border: 0; background: #fff; color: #5f6f62; }
.look-1a .ob-rm:hover { background: #c96f2c; color: #fff; }
.look-1a .ob-adder { border: 0 !important; background: var(--panel) !important; }
.look-1a .ob-adder svg { box-sizing: border-box; width: 18px; height: 18px; padding: 3px; border-radius: 5px; background: var(--ink); color: #fff; }
.look-1a .ob-pqs { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-left: 0; width: 100%; }
.look-1a .ob-pq { grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 10px; }
.look-1a .ob-pqlab { text-align: right; padding: 0 4px 0 0; color: var(--ink); }
html.look-1b .ob-type, html.look-1c .ob-type { background: none !important; color: var(--ink) !important; width: auto !important; padding: 0 !important; text-align: left; font-size: 12px; }
.look-1b .ob-rline, .look-1c .ob-rline { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
.look-1b .ob-rline.proj, .look-1c .ob-rline.proj, .look-1b .ob-currow.inl > .ob-bookcol, .look-1c .ob-currow.inl > .ob-bookcol { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
.look-1b .ob-rline > .ob-type, .look-1b .ob-currow.inl > .ob-bookcol > .ob-type { grid-column: 1 / -1; justify-self: start; }
.look-1b .ob-currow.inl > .ob-bookcol > .ob-res, .look-1c .ob-currow.inl > .ob-bookcol > .ob-res { left: 0; }
.look-1b .ob-whogap, .look-1c .ob-whogap { display: none; }
.look-1b .ob-currow.wide > .ob-wholine, .look-1c .ob-currow.wide > .ob-wholine { grid-template-columns: minmax(0, 1fr); }
.look-1b .ob-pqs, .look-1c .ob-pqs, .look-1b .ob-lpanel, .look-1c .ob-lpanel { margin-left: 0; width: 100%; }
.look-1b .ob-currow { background: none !important; border-radius: 0; padding: 0 0 0 18px; box-shadow: inset 4px 0 0 var(--ink); }
.look-1b .ob-currow + .ob-currow { margin-top: 24px; }
.look-1b .ob-curcard .ob-subname + .ob-currow { margin-top: 20px; }
.look-1b .ob-currow.wide > .ob-rm { margin-top: 26px; }
.look-1b .ob-rm { border: 0; background: none; color: #6f7f72; font-size: 24px; border-radius: 8px; }
.look-1b .ob-rm:hover { background: #f1e4d8; color: #c96f2c; }
.look-1b .ob-pqlab { color: #5f6f62; }
.look-1b .ob-adders { margin-top: 14px; padding-top: 18px; border-top: 1px solid #e3e6da; }
.look-1b .ob-adder { border: 1.5px solid #c7d1bf !important; background: #fff !important; color: #22352a !important; }
.look-1b .ob-adder svg { color: var(--ink); }
.look-1c .ob-currow { position: relative; background: #fff !important; border: 1.5px solid color-mix(in srgb, var(--ink) 22%, #fff); border-radius: 12px; padding: 52px 14px 14px; }
.look-1c .ob-currow::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 38px; border-radius: 10px 10px 0 0; background: var(--panel); }
.look-1c .ob-currow .ob-type { position: absolute; top: -52px; left: 0; height: 38px; display: flex; align-items: center; z-index: 1; }
.look-1c .ob-currow.wide { grid-template-columns: minmax(0, 1fr); }
html.look-1c .ob-currow > .ob-rm { position: absolute !important; top: 3px !important; right: 6px !important; grid-row: auto !important; margin: 0 !important; z-index: 1; border: 0; background: none; color: var(--ink); font-size: 22px; border-radius: 8px; }
.look-1c .ob-currow > .ob-rm:hover { background: rgba(255,255,255,.7); }
.look-1c .ob-currow + .ob-currow { margin-top: 12px; }
.look-1c .ob-pqlab { color: var(--ink); }
.look-1c .ob-adder { border: 1.5px solid color-mix(in srgb, var(--ink) 22%, #fff) !important; background: var(--panel) !important; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
@container (max-width: 440px) { .look-1b .ob-rline, .look-1c .ob-rline { grid-template-columns: minmax(0, 1fr); } }
.ob-key { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: #f7f6ec; border: 1px solid #d9dfd0; box-shadow: 0 1px 0 #cfd7c6; }
.ob-keyrow { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.ob-keyrow .ob-type { width: 118px; box-sizing: border-box; text-align: center; }
.ob-keytx { font: 500 16px/1.3 'Newsreader', serif; color: #3f5546; }
html.tv .ob-keyrow { grid-template-columns: 170px minmax(0, 1fr); }
html.tv .ob-keyrow .ob-type { width: 170px; }
html.tv .ob-keytx { font-size: 24px; }
@media (max-width: 440px) { .ob-keyrow { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } .ob-keyrow .ob-type { width: auto; justify-self: start; } }
.ob-subnav { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-subtab { cursor: pointer; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px 0 12px; border-radius: 999px; border: 1.5px solid #c7d1bf; background: #f7f6ec; color: #3f5546; font: 500 18px 'Newsreader', serif; letter-spacing: -.005em; transition: border-color .16s, background .16s, color .16s; }
.ob-subtab:hover { border-color: #3d6b4f; }
.ob-subtab.on { background: #22352a; border-color: #22352a; color: #f6f4e8; font-weight: 600; }
.ob-subtab .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ob-subtab.on .dot { box-shadow: 0 0 0 2px rgba(246,244,232,.5); }
.ob-subtab svg { color: #3d6b4f; }
.ob-subtab.on svg { color: #c2e0b4; }
.ob-key { padding: 10px 14px; gap: 5px; }
.ob-keytx { font-size: 15px; }
.ob-subnext { cursor: pointer; justify-self: end; display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px 0 20px; border-radius: 12px; border: 1.5px solid #b6c2ae; background: #f7f6ec; color: #3d6b4f; font: 600 19px 'Newsreader', serif; box-shadow: 0 1px 0 #cfd7c6; }
.ob-subnext:hover { border-color: #3d6b4f; }
.ob-subnext i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #e9ede3; font: 500 17px 'Karla', sans-serif; }
html.tv .ob-subtab { height: 58px; font-size: 26px; }
html.tv .ob-subnext { height: 64px; font-size: 26px; }
.ob-subnav { display: block; position: relative; padding: 11px 0 0; }
.ob-subline, .ob-subfill { position: absolute; left: 0; top: 10px; height: 3px; border-radius: 2px; background: #c7d1bf; }
.ob-subfill { background: #3d6b4f; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.ob-subnav ol { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
.ob-subnav li { flex: 1; display: flex; justify-content: center; }
.ob-subnav li:first-child { justify-content: flex-start; }
.ob-subnav li:last-child { justify-content: flex-end; }
.ob-subnav li:first-child .ob-subtab { align-items: flex-start; }
.ob-subnav li:last-child .ob-subtab { align-items: flex-end; }
.ob-subtab { height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-top: -11px; font: 500 13px 'Karla', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8a9a8c; white-space: nowrap; }
.ob-subtab:hover { border: 0; color: #22352a; }
.ob-subtab.on { background: transparent; border: 0; color: #22352a; font-weight: 700; }
.ob-subtab.past, .ob-subtab.full { color: #3d6b4f; }
.ob-subtab.on.full { color: #22352a; }
.ob-subtab .node { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 3px solid; box-sizing: border-box; background: #e3e8dc; transition: transform .16s, background .16s; }
.ob-subtab.on .node { transform: scale(1.25); box-shadow: 0 0 0 3px #e3e8dc, 0 0 0 5px currentColor; }
.ob-subtab:hover .node { transform: scale(1.15); }
.ob-subtab .dot { display: none; }
html.tv .ob-subtab { font-size: 22px; }
html.tv .ob-subtab .node { width: 28px; height: 28px; }
@media (max-width: 720px) { .ob-subtab { font-size: 11px; letter-spacing: .08em; } }
.ob-subtab { gap: 8px; cursor: pointer; }
.ob-subtab .nm { display: inline-block; height: 34px; line-height: 31px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #c7d1bf; background: #f7f6ec; color: #3f5546; box-shadow: 0 1px 0 #cfd7c6; font: 600 13px 'Karla', sans-serif; letter-spacing: .1em; text-transform: uppercase; transition: transform .16s, border-color .16s, background .16s, color .16s, box-shadow .16s; }
.ob-subtab:hover .nm { transform: translateY(-1px); border-color: #3d6b4f; color: #22352a; box-shadow: 0 3px 8px -4px rgba(34,53,42,.35); }
.ob-subtab.on .nm { background: #22352a; border-color: #22352a; color: #f6f4e8; }
.ob-subtab.full:not(.on) .nm { border-color: #3d6b4f; color: #3d6b4f; }
.ob-subtab:focus-visible { outline: none; }
.ob-subtab:focus-visible .nm { outline: 3px solid #c96f2c; outline-offset: 2px; }
html.tv .ob-subtab .nm { height: 48px; line-height: 45px; font-size: 20px; padding: 0 20px; }
@media (max-width: 720px) { .ob-subtab .nm { height: 30px; line-height: 27px; padding: 0 10px; font-size: 11px; } }
.ob-gtag { display: inline-flex; align-items: center; gap: 7px; cursor: grab; transition: transform .15s, box-shadow .15s; }
.ob-gtag:active { cursor: grabbing; }
.ob-gtag:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(34,53,42,.55); }
.ob-gtag .ob-grip { opacity: .55; flex: none; }
.ob-gtag.hint { animation: ob-nudge 1.6s ease-in-out .8s 2; }
@keyframes ob-nudge { 0%, 100% { transform: none; } 20% { transform: translate(10px, -3px) rotate(2deg); box-shadow: 0 8px 16px -8px rgba(34,53,42,.6); } 40% { transform: none; } }
html.tv .ob-gtag .ob-grip { width: 11px; height: 19px; }
.ob-zone.open { border-color: #3d6b4f !important; background: #eef4e8 !important; box-shadow: 0 0 0 3px rgba(61,107,79,.18); }
.ob-gtag.callable { animation: ob-call 1.1s ease-in-out infinite; }
@keyframes ob-call { 0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(61,107,79,.35); transform: none; } 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #3d6b4f; transform: translateY(-2px); } }
.ob-subnav li, .ob-subnav li:first-child, .ob-subnav li:last-child { flex: 1 1 0; min-width: 0; justify-content: center; }
.ob-subnav li .ob-subtab, .ob-subnav li:first-child .ob-subtab, .ob-subnav li:last-child .ob-subtab { align-items: center; }
.ob-subline { left: calc(50% / var(--n)); right: calc(50% / var(--n)); }
.ob-subfill { left: calc(50% / var(--n)); width: calc(100% * var(--c) / var(--n)); right: auto; }
.ob-curcard .ob-curcta { margin: 18px 0 0; }
.ob-curcard .ob-curcta + .ob-currow { margin-top: 14px; }
.ob-adder { min-width: 0; white-space: nowrap; }
.ob-adder svg { flex: none; }
@container (max-width: 560px) { html.look .ob-adders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ob-subnext { white-space: nowrap; width: max-content !important; max-width: none !important; min-width: 0 !important; }
.ob-subnext span { overflow: visible; }
.ob-cureye { display: inline-flex; align-items: center; gap: 8px; font: 700 13px 'Karla', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #3f5546; }
.ob-cureye i { width: 10px; height: 10px; border-radius: 50%; background: var(--sc); }
.v-a .ob-curcta, .v-c .ob-curcta { margin-top: 8px; }
.look .v-a .ob-currow.hero { border: 0; padding: 0; background: none !important; }
.look .v-a .ob-currow.hero::before, .look .v-a .ob-currow.hero .ob-type { display: none; }
.v-a .ob-currow.hero .ob-bookin { height: 56px; font-size: 20px; border-radius: 12px; }
.v-a .ob-currow.hero + .ob-currow { margin-top: 18px; }
.ob-addtext { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e3e6da; font: 600 15px 'Karla', sans-serif; color: #5f6f62; }
.ob-addtext button { cursor: pointer; border: 0; background: none; padding: 4px 0; font: 700 15px 'Karla', sans-serif; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ob-addtext button:hover { text-decoration-thickness: 3px; }
.ob-curcard.v-b { padding-top: 0; overflow: visible; }
.ob-curband { margin: 0 -20px 4px -24px; padding: 18px 20px 16px 24px; border-radius: 20px 20px 0 0; background: color-mix(in srgb, var(--sc) 18%, #fff); border-bottom: 3px solid var(--sc); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ob-curwho { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-curwho span { padding: 4px 10px; border-radius: 6px; font: 700 13px 'Karla', sans-serif; }
.v-b .ob-curcta { margin-top: 18px; }
.ob-addmenu { margin-top: 14px; }
.ob-addmore { cursor: pointer; width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; border: 1.5px solid #b6c2ae; background: #fff; color: #22352a; font: 700 15px 'Karla', sans-serif; }
.ob-addmore:hover { border-color: #3d6b4f; background: #eef4e8; }
.ob-addopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ob-addopts button { cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--ink) 25%, #fff); background: var(--panel); color: var(--ink); }
.ob-addopts b { font: 700 12px 'Karla', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.ob-addopts span { font: 500 14px 'Karla', sans-serif; color: #3f5546; line-height: 1.3; }
.ob-curcard.v-c { background: none; box-shadow: none; padding-left: 0; padding-right: 0; }
.v-c .ob-bar5 { display: none; }
.v-c .ob-curcta { font-size: 30px; }
.look .v-c .ob-adders { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v-c .ob-adder { height: 40px; font-size: 11px; padding: 0 6px; gap: 5px; }
.ob-subnext.big { width: 100% !important; justify-content: center; height: 56px; background: #3d6b4f; border-color: #3d6b4f; color: #f6f4e8; font-size: 19px; }
.ob-subnext.big i { background: rgba(255,255,255,.18); color: #fff; }
html.look .v-a .ob-currow.hero > .ob-rm { top: 10px !important; right: 8px !important; }
.v-a .ob-currow.hero .ob-bookin { padding-right: 44px; }
.ob-curcard.v-c { background: transparent !important; border: 0 !important; }
.ob-subnav li .ob-subtab { max-width: 100%; min-width: 0; }
.ob-subtab .nm { max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 560px) { .ob-subtab .nm { padding: 0 8px; letter-spacing: .04em; font-size: 11px; } }
@media (max-width: 1100px) { .ob-subtab .nm { padding: 0 8px; letter-spacing: .04em; font-size: 11px; } }
.look3-a .ob-curband, .look3-c .ob-curband, .look3-b .ob-curband { margin-bottom: 18px; }
.look3-a .ob-currow.first .ob-bookin::placeholder { color: #3f5546; font-weight: 600; opacity: 1; }
.ob-curq { font: 600 24px 'Newsreader', serif; color: #14241a; }
html.look3-c .ob-currow .ob-type { font-size: 16px !important; font-weight: 800 !important; letter-spacing: .1em; filter: saturate(1.3) brightness(.85); }
.look3-c .ob-currow.first .ob-type.__off::after { content: 'Type its name'; margin-left: 12px; padding-left: 12px; border-left: 2px solid currentColor; font: 700 17px 'Karla', sans-serif; letter-spacing: 0; text-transform: none; color: #14241a; }
html.look3-c .ob-currow { padding-top: 60px; }
html.look3-c .ob-currow::before { height: 46px; }
html.look3-c .ob-currow .ob-type { top: -60px !important; height: 46px !important; }
html.look3-c .ob-currow > .ob-rm { top: 7px !important; }
.ob-addcard { margin-top: 14px; padding: 14px 16px !important; }
html.look3-c .ob-addcard .ob-adders { margin: 0; padding: 0; border: 0; }
.ob-curins { display: block; margin: 4px 0 14px; }
.ob-rnote { margin: 22px 0 14px; text-wrap: pretty; }
html.look3-c .ob-rnote + .ob-currow { margin-top: 0; }
html.look3-c .ob-subnext.big { margin-top: 18px; height: 60px; border-radius: 14px; font-size: 20px; box-shadow: 0 10px 22px -12px rgba(34,53,42,.6); }
html.look3-c .ob-subnext.big:hover { background: #2f5a3f; border-color: #2f5a3f; }
.ob-subnav li .ob-subtab { width: 100%; max-width: 150px; }
.ob-subtab .nm { display: flex; align-items: center; justify-content: center; width: 100%; height: 38px; line-height: 1; padding: 0 10px; border-radius: 8px; box-sizing: border-box; white-space: nowrap; }
html.tv .ob-subnav li .ob-subtab { max-width: 220px; }
html.tv .ob-subtab .nm { height: 52px; line-height: 1; }
@media (max-width: 720px) { .ob-subtab .nm { height: 32px; line-height: 1; } }
.ob-subtab .node svg { display: none; }
.ob-subtab .nm, .ob-subtab.full:not(.on) .nm { background: color-mix(in srgb, var(--sc) 16%, #fff); border-color: color-mix(in srgb, var(--sc) 55%, #fff); color: color-mix(in srgb, var(--sc) 45%, #14241a); }
.ob-subtab:hover .nm { border-color: var(--sc); color: color-mix(in srgb, var(--sc) 40%, #14241a); }
.ob-subtab.on .nm { background: color-mix(in srgb, var(--sc) 62%, #14241a); border-color: color-mix(in srgb, var(--sc) 62%, #14241a); color: #fff; }
html.look3-c .ob-subline, html.look3-c .ob-subfill, html.look3-c .ob-subtab .node { display: none; }
html.look3-c .ob-subnav { padding: 0; margin-bottom: 0; }
html.look3-c .ob-subnav ol { gap: 4px; align-items: flex-end; }
html.look3-c .ob-subnav li .ob-subtab { max-width: none; margin: 0; }
html.look3-c .ob-subtab .nm { height: 48px; border: 0; border-bottom: 3px solid var(--sc); border-radius: 14px 14px 0 0; background: color-mix(in srgb, var(--sc) 9%, #fff); color: #22352a; font: 600 19px 'Newsreader', serif; letter-spacing: 0; text-transform: none; box-shadow: none; transform: none; }
html.look3-c .ob-subtab:hover .nm { background: color-mix(in srgb, var(--sc) 14%, #fff); color: #14241a; box-shadow: none; transform: none; }
html.look3-c .ob-subtab.on .nm { height: 56px; background: color-mix(in srgb, var(--sc) 18%, #fff); color: #14241a; border-bottom-color: transparent; font-size: 22px; }
html.look3-c .ob-curcard.v-b { margin-top: -12px !important; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
html.look3-c .ob-curband { padding-top: 12px; padding-bottom: 12px; }
html.look3-c .ob-curband { border-radius: 0; }
html.look3-c .ob-curband .ob-subname { display: none; }
html.look3-c .ob-curband { justify-content: flex-end; }
html.look3-c .ob-subnav .ob-subtab:not(.on) .nm { background: color-mix(in srgb, var(--sc) 40%, #fff); }
html.look3-c .ob-subnav .ob-subtab:not(.on):hover .nm { background: color-mix(in srgb, var(--sc) 50%, #fff); }
html.look3-c .ob-subtab.on .nm, html.look3-c .ob-curband { background: color-mix(in srgb, var(--sc) 32%, #fff); }
.ob-howto { display: grid; gap: 6px; padding: 16px 22px; }
.ob-howto p { font-size: 21px; line-height: 1.35; color: #22352a; }
.ob-howto em { font-style: normal; font-weight: 700; background: none; padding: 0; color: #2f5a3f; }
html.tv .ob-howto p { font-size: 28px; }
.ob-howto em { display: inline-block; font-style: normal; font-weight: 700; color: #1c3a27; background: #c2e0b4; padding: 1px 9px 2px; border-radius: 6px; margin-right: 2px; }
.ob-brk { grid-column: 1 / -1; display: grid; gap: 0; margin-top: 4px; border-top: 1px solid #e3e6da; }
.ob-brkrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid #eef0e8; }
.ob-brkrow:last-child { border-bottom: 0; }
.ob-brkrow .nm { font: 600 16px 'Karla', sans-serif; color: #22352a; }
.ob-brkrow .ct { font: 700 15px 'Karla', sans-serif; color: #2f5a3f; font-variant-numeric: tabular-nums; }
.ob-brkrow .tag { font: 700 11px 'Karla', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8a9a8c; }
.ob-brkrow .pt { grid-column: 1 / -1; margin-top: 2px; font: 400 14px 'Karla', sans-serif; color: #5f6f62; }
.ob-brkrow.opt .nm, .ob-brkrow.opt .ct { color: #6f7f72; }
.ob-brk.wait { gap: 8px; padding: 10px 2px; }
.ob-brk.wait span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef0e8, #e1e6d8, #eef0e8); background-size: 200% 100%; animation: ob-shim 1.2s linear infinite; }
.ob-brk.wait span + span { width: 60%; }
@keyframes ob-shim { from { background-position: 100% 0; } to { background-position: -100% 0; } }
html.tv .ob-brkrow .nm { font-size: 24px; }
html.tv .ob-brkrow .ct { font-size: 22px; }
html.tv .ob-brkrow .pt { font-size: 20px; }
.ob-brk.tree { border-top: 0; margin-top: 8px; gap: 8px; }
.ob-ttq { font: 500 15px 'Karla', sans-serif; color: #3f5546; }
.ob-tg { --g-bg: #e3ebdf; --g-ink: #2f5a40; --g-line: #3d6b4f; background: var(--g-bg); border-radius: 12px; padding: 8px 14px 10px; }
.ob-tg.g1 { --g-bg: #f5e7da; --g-ink: #9a5220; --g-line: #c98d63; }
.ob-tg.g2 { --g-bg: #f3edd0; --g-ink: #7d6308; --g-line: #bba451; }
.ob-tt { display: flex; align-items: center; gap: 14px; min-height: 40px; cursor: pointer; }
.ob-tt.d1 { padding-left: 40px; }
.ob-tt.d2 { padding-left: 80px; }
.ob-tt .nm { font: 400 19px 'Newsreader', serif; color: #22352a; }
.ob-tt.d0 .nm { font-weight: 600; color: var(--g-ink); }
.ob-tt.off:not(.d0) .nm { color: #8a9a8c; }
.ob-tt input { -webkit-appearance: none; appearance: none; flex: none; margin: 0; width: 26px; height: 26px; border-radius: 3px; border: 2px solid var(--g-line); background: #fff; position: relative; cursor: pointer; }
.ob-tt input:checked, .ob-tt input:indeterminate { background: #3d6b4f; border-color: #3d6b4f; }
.ob-tt input:checked::after { content: '\2713'; position: absolute; inset: 0; color: #fff; font: 700 17px/22px 'Karla', sans-serif; text-align: center; }
.ob-tt input:indeterminate::after { content: '\2013'; position: absolute; inset: 0; color: #fff; font: 700 17px/22px 'Karla', sans-serif; text-align: center; }
.ob-tt input:focus-visible { outline: 3px solid #c96f2c; outline-offset: 2px; }
.ob-ttmeta { display: block; margin: -4px 0 4px 0; font: 500 13px 'Karla', sans-serif; color: #4f6656; }
html.tv .ob-tt .nm { font-size: 26px; }
html.tv .ob-ttmeta, html.tv .ob-ttq { font-size: 20px; }
html.tv .ob-tt input { width: 34px; height: 34px; }
.ob-ttq { margin: 10px 0 4px; font: 600 22px/1.15 'Newsreader', serif; letter-spacing: -.01em; color: #14241a; }
html.tv .ob-ttq { font-size: 32px; }
.ob-picked { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 6px 8px 6px 12px; border-radius: 10px; background: #e9f2e3; border: 1.5px solid #3d6b4f; box-sizing: border-box; }
.ob-picked .ok { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #3d6b4f; color: #fff; }
.ob-picked .tt { flex: 1; min-width: 0; font: 600 19px/1.2 'Newsreader', serif; color: #14241a; }
.ob-picked .chg { flex: none; cursor: pointer; height: 32px; padding: 0 12px; border-radius: 8px; border: 1.5px solid #b6c2ae; background: #fff; color: #3d6b4f; font: 700 13px 'Karla', sans-serif; letter-spacing: .02em; }
.ob-picked .chg:hover { border-color: #3d6b4f; }
html.tv .ob-picked { min-height: 64px; }
html.tv .ob-picked .tt { font-size: 26px; }
html.tv .ob-picked .chg { height: 44px; font-size: 18px; }
html.tv .ob-picked .ok { width: 32px; height: 32px; }
.ob-name { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ob-name .ck { flex: none; }
html.tv .ob-name .ck { width: 18px; height: 18px; }
html.look .ob-adder { height: 54px; border: 0 !important; background: var(--ink) !important; color: #fff !important; font: 700 14px 'Karla', sans-serif; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 8px 18px -10px var(--ink); transition: transform .16s, box-shadow .16s, filter .16s; }
html.look .ob-adder:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 12px 22px -10px var(--ink); }
html.look .ob-adder svg { box-sizing: content-box; width: 14px; height: 14px; padding: 4px; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; }
html.look .ob-addcard { padding: 14px; }
html.tv.look .ob-adder { height: 72px; font-size: 20px; }
html.look .ob-adder { background: var(--panel) !important; color: var(--ink) !important; border: 2px solid color-mix(in srgb, var(--ink) 55%, #fff) !important; box-shadow: 0 1px 0 rgba(34,53,42,.12), 0 6px 14px -10px rgba(34,53,42,.45); }
html.look .ob-adder:hover { filter: none; border-color: var(--ink) !important; box-shadow: 0 1px 0 rgba(34,53,42,.12), 0 10px 18px -10px rgba(34,53,42,.5); }
html.look .ob-adder svg { background: var(--ink); color: #fff; }
html.look .ob-addcard { container-type: inline-size; }
html.look .ob-adders { gap: 10px; }
html.look .ob-adder { gap: 10px; padding: 0 16px; font-size: 13px; letter-spacing: .05em; white-space: nowrap; min-width: 0; }
html.look .ob-adder svg { width: 12px; height: 12px; padding: 4px; flex: none; }
@container (max-width: 620px) { html.look .ob-adders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.tv.look .ob-adder { font-size: 18px; padding: 0 22px; }
html.tv.look .ob-adder svg { width: 16px; height: 16px; padding: 6px; }
.ob-done { margin-bottom: 6px; }
.ob-donerow { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0; }
.ob-donechoice { cursor: pointer; height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--g-line); background: #fff; color: #22352a; font: 600 17px 'Newsreader', serif; }
.ob-donechoice.on { background: #3d6b4f; border-color: #3d6b4f; color: #fff; }
/* a record's plans: the same pills, a long one wrapping inside its pill */
.ob-plan .ob-donechoice { height: auto; min-height: 40px; padding: 6px 16px; line-height: 1.2; text-align: left; white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.ob-plan .ob-donechoice:disabled:not(.on) { opacity: .45; cursor: default; }
html.tv .ob-plan .ob-donechoice { height: auto; min-height: 56px; }
.ob-donestep { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ob-donestep .lab { font: 600 19px 'Newsreader', serif; color: var(--g-ink); }
.ob-donestep .of { font: 500 17px 'Newsreader', serif; color: #3f5546; }
.ob-donestep .nx { flex-basis: 100%; font: 500 14px 'Karla', sans-serif; color: #4f6656; }
.ob-stepper { display: inline-flex; align-items: center; border: 2px solid var(--g-line); border-radius: 10px; background: #fff; overflow: hidden; }
.ob-stepper button { width: 38px; height: 38px; border: 0; background: transparent; color: #3d6b4f; font: 700 20px 'Karla', sans-serif; cursor: pointer; }
.ob-stepper button:hover { background: #eef1e6; }
.ob-stepper input { width: 64px; height: 38px; border: 0; border-left: 1px solid #dde3d4; border-right: 1px solid #dde3d4; text-align: center; font: 700 18px 'Karla', sans-serif; color: #14241a; -moz-appearance: textfield; }
.ob-stepper input::-webkit-inner-spin-button, .ob-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html.tv .ob-donechoice { height: 56px; font-size: 24px; }
html.tv .ob-donestep .lab, html.tv .ob-donestep .of { font-size: 26px; }
html.tv .ob-stepper button, html.tv .ob-stepper input { height: 54px; font-size: 24px; }
html.tv .ob-stepper button { width: 54px; }
.ob-cal { margin-top: 28px; display: grid; gap: 14px; max-width: 620px; }
.ob-calcard { padding: 20px 24px 22px; }
.ob-dates { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ob-date { display: grid; gap: 6px; }
.ob-date input { height: 48px; padding: 0 12px; border: 1.5px solid #c7d1bf; border-radius: 10px; background: #fff; font: 600 19px 'Karla', sans-serif; color: #14241a; }
.ob-date input:focus { outline: none; border-color: #3d6b4f; box-shadow: 0 0 0 3px rgba(61,107,79,.18); }
.ob-dash { font: 500 22px 'Karla', sans-serif; color: #8a9a8c; padding-bottom: 10px; }
.ob-offhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ob-offtotal { font: 600 26px 'Newsreader', serif; color: #2f5a3f; font-variant-numeric: tabular-nums; }
.ob-offs { display: grid; margin-top: 4px; }
.ob-off { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 52px; border-top: 1px solid #e3e6da; cursor: text; }
.ob-off:first-child { border-top: 0; }
.ob-off .nm { font: 500 21px 'Newsreader', serif; color: #22352a; }
.ob-off.other .nm { font-style: italic; }
.ob-off input { width: 60px; height: 38px; text-align: center; border: 1.5px solid #c7d1bf; border-radius: 8px; background: #fff; font: 700 17px 'Karla', sans-serif; color: #14241a; -moz-appearance: textfield; }
.ob-off input::-webkit-inner-spin-button, .ob-off input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ob-off input:focus { outline: none; border-color: #3d6b4f; box-shadow: 0 0 0 3px rgba(61,107,79,.18); }
.ob-ico { position: relative; display: block; justify-self: center; }
.ob-ico.tree { width: 18px; height: 16px; background: #3d6b4f; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ob-ico.star { width: 18px; height: 18px; background: #f0c419; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ob-ico.egg { width: 14px; height: 18px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #f3a892; }
.ob-ico.else { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #a9bba2; box-sizing: border-box; }
.ob-ico.pumpkin { width: 22px; height: 18px; }
.ob-ico.pumpkin::before { content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 15px; border-radius: 50%; background: #e0893a; }
.ob-ico.pumpkin::after { content: ''; position: absolute; left: 9px; top: 0; width: 4px; height: 5px; border-radius: 2px; background: #5f8a63; }
.ob-ico.flag { width: 18px; height: 18px; }
.ob-ico.flag::before { content: ''; position: absolute; left: 3px; top: 0; width: 2px; height: 18px; background: #5a3a1e; }
.ob-ico.flag::after { content: ''; position: absolute; left: 5px; top: 1px; width: 12px; height: 9px; background: #c8453a; clip-path: polygon(0 0, 100% 0, 85% 50%, 100% 100%, 0 100%); }
html.tv .ob-date input { height: 64px; font-size: 26px; }
html.tv .ob-off .nm { font-size: 28px; }
html.tv .ob-off input { width: 80px; height: 52px; font-size: 24px; }
html.tv .ob-offtotal { font-size: 36px; }
.ob-calcard .ob-date { gap: 12px; }
.ob-calcard .ob-date .ob-lab.lead { margin-bottom: 0; }
.ob-calcard .ob-date input { max-width: 280px; }
.ob-calnote { max-width: none; display: grid; gap: 16px; justify-items: start; }
.ob-skip { cursor: pointer; display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px 0 20px; border-radius: 12px; border: 1.5px solid #3d6b4f; background: #f7f6ec; color: #2f5a3f; font: 600 19px 'Newsreader', serif; box-shadow: 0 1px 0 #cfd7c6; transition: transform .16s, background .16s; }
.ob-skip:hover { transform: translateY(-1px); background: #fff; }
.ob-skip i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #3d6b4f; color: #f6f4e8; font: 500 16px 'Karla', sans-serif; }
.ob-skip:disabled { cursor: wait; opacity: .7; }
html.tv .ob-skip { height: 64px; font-size: 26px; }
.ob-calnote .ob-calok { margin: 0; font: 500 18px/1.5 'Newsreader', serif; color: #1c3a27; }
.ob-calnote .ob-calok span { background: #c2e0b4; padding: 3px 8px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html.tv .ob-calnote .ob-calok { font-size: 26px; }

.obset { display: grid; justify-items: center; font-family: 'Karla', sans-serif; color: #22352a; }
.obset > .ob-card, .obset > .ob-list, .obset > .ob-groups { width: 100%; box-sizing: border-box; }
.obset .ob-stform, .obset .ob-suform, .obset .ob-groups { margin-top: 4px; }
.obset .ob-suform, .obset .obset-wide, .obset .ob-groups { max-width: 560px; }
.obset .ob-list { max-width: 420px; }
.obset .obset-wide { max-width: 560px; }
.obset input:focus { outline: none; border-color: #3d6b4f; box-shadow: 0 0 0 3px rgba(61,107,79,.18); }
.obset button:disabled { cursor: default; }
.obset-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.obset-cancel { margin-top: 18px; cursor: pointer; border: 0; background: none; padding: 8px 4px; font: 700 15px 'Karla', sans-serif; color: #4f6656; text-decoration: underline; text-underline-offset: 3px; }
.obset-name { cursor: pointer; border: 0; background: none; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.obset-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ob-strow.editing { box-shadow: 0 0 0 2px #3d6b4f, 0 10px 24px -18px rgba(34,53,42,.35); }
.obset-gone { margin-top: 22px; }
.obset-gone .ob-tag { color: #3d6b4f; border-color: #3d6b4f; }
.obset.obcur { justify-items: stretch; gap: 14px; }
.obset.obcur > * { max-width: 680px; width: 100%; justify-self: center; box-sizing: border-box; }
.obcur .ob-subnav { margin: 0 0 4px; }
.obcur-who { display: grid; gap: 6px; }
.obcur-tag { justify-self: start; padding: 4px 9px; border-radius: 6px; font: 700 12px 'Karla', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.obset { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.obcur .ob-subnav, .obcur .ob-subnav ol { min-width: 0; max-width: 100%; }
/* the pace note held for Expected Finish takes no room under Percentage: the toggle stays centred (Cole 2026-10-17) */
.modebar .lawnote.ghost { display: none; }

/* Loop Adjustment, reworked (Cole 2026-10-17): one card, a tinted header band, rows divided by hairlines */
.s2card .s2rule { background: var(--line-2, #dfe3d6); }
.s2toggle.five { display: flex; width: 100%; box-sizing: border-box; justify-content: space-between; }
.s2toggle.five .s2tab { flex: 1 1 auto; text-align: center; }
.s2details .detscope { margin: 2px 0 14px; }
.dt2-band.withloop { row-gap: 12px; }
.dt2-band.withloop .dt2-title { grid-column: 1 / -1; }
.dt2-band.withloop .dt2-h:nth-of-type(2) { grid-column: 2; }
.dt2 { --cols: minmax(0, 1fr) 92px 128px 92px; background: #fbfaf3; border: 1px solid #e3e6da; border-radius: 14px; overflow: hidden; padding: 0; }
.dt2-band { display: grid; grid-template-columns: var(--cols); column-gap: 12px; align-items: end; padding: 14px 20px 12px; background: #e9ede3; border-bottom: 1px solid #dfe3d6; }
.dt2-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dt2-pass { font: 500 20px/1 var(--serif); color: var(--ink); white-space: nowrap; }
.dt2-pass b { font-weight: 700; }
.dt2-pass span { color: var(--muted); }
.dt2-h { text-align: center; font: 700 11px/1.2 var(--font, 'Karla', sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #4f6656; }
.dt2-row { position: relative; display: grid; grid-template-columns: var(--cols); column-gap: 12px; align-items: center; min-height: 60px; padding: 6px 20px 6px 26px; }
.dt2-row + .dt2-row { border-top: 1px solid #ebeee4; }
.dt2-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.dt2-row.most { background: color-mix(in srgb, var(--terracotta, #c96f2c) 7%, #fbfaf3); }
.dt2-nm { font: 500 21px/1.15 var(--serif); color: var(--ink); min-width: 0; text-wrap: pretty; }
.dt2-n { text-align: center; font: 700 22px/1 var(--font, 'Karla', sans-serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.dt2-row.most .dt2-n { color: var(--terracotta, #c96f2c); }
.dt2-per { display: flex; justify-content: center; }
.s2details .dt2 + .dt2 { margin-top: 18px; }
@media (max-width: 620px) {
  .dt2 { --cols: minmax(0, 1fr) 56px 104px 56px; }
  .dt2-band { padding: 12px 12px 10px; column-gap: 6px; grid-template-columns: var(--cols); }
  .dt2-band .dt2-title { grid-column: 1 / -1; margin-bottom: 10px; }
  .dt2-band .dt2-h:nth-child(2) { grid-column: 2; }
  .dt2-row { padding: 6px 12px 6px 18px; column-gap: 6px; min-height: 54px; }
  .dt2-nm { font-size: 17px; } .dt2-n { font-size: 18px; } .dt2-h { font-size: 10px; letter-spacing: .06em; }
}
html.tv .dt2 { --cols: minmax(0, 1fr) 130px 180px 130px; } html.tv .dt2-nm { font-size: 28px; } html.tv .dt2-n { font-size: 30px; } html.tv .dt2-h { font-size: 15px; } html.tv .dt2-row { min-height: 84px; }
.dt2-per .wstep { font: 700 20px/1 var(--font, 'Karla', sans-serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.dt2-row.most .dt2-per .wstep { color: var(--terracotta, #c96f2c); }

/* Percentage, the original line; the box sizes to whichever view is showing, so Percentage is short (Cole 2026-10-17) */
.modebar .modeslot > .ghost { display: none; }

/* the subject tabs in two rows past five subjects, from onboarding (Cole 2026-10-17) */
html.look3-c .ob-cur { grid-template-columns: minmax(0, 1fr); }
html.look3-c .ob-cur > *, html.look3-c .ob-subnav { min-width: 0; }
html.look3-c .ob-subnav li, html.look3-c .ob-subnav li:first-child, html.look3-c .ob-subnav li:last-child { flex: 1 1 auto; min-width: 0; }
html.look3-c .ob-subnav li .ob-subtab { width: 100%; }
html.look3-c .ob-subtab .nm { width: 100%; padding: 0 14px; white-space: nowrap; font-size: 18px; }
html.look3-c .ob-subtab.on .nm { font-size: 21px; }
html.look3-c .ob-subnav.two { display: grid; row-gap: 0; }
html.look3-c .ob-subnav.two ol.back { padding: 0 18px; position: relative; z-index: 0; }
html.look3-c .ob-subnav.two ol.back .ob-subtab .nm { height: 40px; border-bottom-width: 0; filter: saturate(.85) brightness(.97); }
html.look3-c .ob-subnav.two ol.front { position: relative; z-index: 1; margin-top: -2px; }
/* Progress's top card stacked at every width, as the design draws it (Cole 2026-10-18): the toggle on top,
   the view beneath it across the card, no divider (these were the under-1100px rules) */
.modebar { flex-wrap: wrap; row-gap: 12px; }
.modebar .modeslot { flex-basis: 100%; }
.modebar .rule { display: none; }
.modebar .modecol { flex: 1 1 100%; min-width: 0; max-width: 100%; }

/* Loop Setup: the loop picker in the Your Loop card, one pill with a dropdown (Cole 2026-10-18) */
.loopdrop { position: relative; display: flex; justify-content: center; margin: 12px 0 2px; }
.ldbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px 0 18px; border: 0; border-radius: 19px; font: 700 15px/1 var(--font, 'Karla', sans-serif); cursor: pointer; box-shadow: inset 0 0 0 2px currentColor; }
.ldbtn .ldchev { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.65); transition: transform .15s; }
.ldbtn.open .ldchev { transform: rotate(180deg); }
.ldbtn:focus-visible { outline: 3px solid rgba(61,107,79,.3); outline-offset: 2px; }
.ldmenu { position: absolute; z-index: 20; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; min-width: 200px; padding: 6px; display: grid; gap: 2px; background: #fff; border: 1.5px solid #c7d1bf; border-radius: 12px; box-shadow: 0 14px 32px -16px rgba(34,53,42,.45); }
.ldopt { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font: 600 15px/1 var(--font, 'Karla', sans-serif); color: var(--ink); text-align: left; white-space: nowrap; cursor: pointer; }
.ldopt:hover { background: #eef1e8; }
.ldopt.on { background: #e3e8dc; font-weight: 700; }
.ldsw { flex: none; width: 22px; height: 14px; border-radius: 7px; }
html.tv .ldbtn { min-height: 54px; font-size: 21px; border-radius: 27px; padding-left: 24px; } html.tv .ldopt { min-height: 52px; font-size: 20px; }
/* Loop Setup's five tabs, with more presence (Cole 2026-10-18) */
.s2toggle.five { padding: 5px; background: #dfe5d6; border: 1px solid #c7d1bf; box-shadow: inset 0 1px 2px rgba(34,53,42,.08); }
.s2toggle.five .s2tab { min-height: 40px; font-size: 14px; color: #3f5546; }
.s2toggle.five .s2tab:not(.on):hover { background: #f3f5ee; color: var(--ink); }
.s2toggle.five .s2tab.on { background: var(--accent); color: #fff; box-shadow: 0 4px 10px -4px rgba(34,53,42,.55), inset 0 1px 0 rgba(255,255,255,.15); }
@container (max-width: 640px) { .s2toggle.five .s2tab { font-size: 12.5px; } }

/* Loop Adjustment polish (Cole 2026-10-18): serif figures like the rest of the app; the − / + a clean
   bordered stepper in the onboarding stepper's style, its glyphs drawn rather than typed */
.dt2 { background: #fbfaf3; border: 1px solid #dfe3d6; box-shadow: 0 10px 24px -20px rgba(34,53,42,.5); }
.dt2-band { padding: 14px 22px 12px; }
.dt2-pass { font: 500 22px/1 var(--serif); }
.dt2-pass b { font-weight: 700; }
.dt2-row { min-height: 66px; padding: 8px 22px 8px 28px; }
.dt2-row::before { width: 4px; }
.dt2-nm { font: 500 21px/1.15 var(--serif); }
.dt2-n { font: 600 26px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.dt2-row.most .dt2-n { color: #c0632a; }
.dt2-per .wstep { margin: 0; height: 38px; border: 1.5px solid #b9c4b4; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 1px 0 rgba(34,53,42,.04); }
.dt2-per .wstep-b { position: relative; width: 36px; height: 100%; font-size: 0; color: #3d6b4f; background: transparent; transition: background .12s; }
.dt2-per .wstep-b:hover:not(:disabled) { background: #eef1e8; }
.dt2-per .wstep-b:active:not(:disabled) { background: #e3e8dc; }
.dt2-per .wstep-b::before, .dt2-per .wstep-b:last-child::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: currentColor; }
.dt2-per .wstep-b:last-child::after { width: 2px; height: 12px; margin: -6px 0 0 -1px; }
.dt2-per .wstep-b:disabled { color: #c7d1bf; }
.dt2-per .wstep-n { min-width: 40px; align-self: stretch; display: flex; align-items: center; justify-content: center; border-left: 1px solid #e3e6da; border-right: 1px solid #e3e6da; font: 600 21px/1 var(--serif); color: var(--ink); }
.dt2-row.most .dt2-per .wstep-n { color: #c0632a; }
html.tv .dt2-per .wstep { height: 56px; } html.tv .dt2-per .wstep-b { width: 54px; } html.tv .dt2-per .wstep-n { min-width: 60px; font-size: 28px; } html.tv .dt2-n { font-size: 34px; }

/* Today: the loop picker and pass buttons stay at the top while the loop scrolls beneath (Cole 2026-10-18) */
.today > .todaybar, .today > .passnav { position: sticky; top: 0; z-index: 15; margin-left: -12px; margin-right: -12px; padding: 10px 12px 12px; background: var(--ground, #e3e8dc); box-shadow: 0 10px 14px -12px rgba(34,53,42,.35); }
.today > .todaybar::before, .today > .passnav::before { content: ''; position: absolute; left: 0; right: 0; top: -40px; height: 40px; background: var(--ground, #e3e8dc); }
/* the pinned bar's strip above it covered whatever sat just above (the welcome card's last line, Cole 2026-10-18): pinned at the very top it has nothing to hide */
.today > .todaybar::before, .today > .passnav::before { content: none; }
/* Loop Adjustment's loop picker, where the Selected Loop / All Combined toggle was (Cole 2026-10-18) */
.s2details .detpick .loopdrop { margin: 2px 0 14px; }
/* Students: the current names together in one card above the new-name card (Cole 2026-10-18) */
.obset .obset-names { display: flex; flex-wrap: wrap; gap: 10px; max-width: 420px; padding: 16px 18px; }
.obset .obset-names + .ob-stform { margin-top: 12px; }
.obset-names .ob-stchip.fresh { animation: ob-pop .4s cubic-bezier(.2,.8,.2,1); }
.obset-names .ob-stchip.editing { box-shadow: 0 0 0 2px #f7f6ec, 0 0 0 4px #3d6b4f; }
html.tv .obset .obset-names { max-width: 620px; }
/* Curriculum cards fold (Cole 2026-10-18): a chevron in the header strip, left of the × */
.obcur .ob-currow > .ob-fold { position: absolute; top: 4px; right: 44px; z-index: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
.obcur .ob-currow > .ob-fold:hover { background: rgba(255,255,255,.7); }
.obcur .ob-currow > .ob-fold svg { transition: transform .15s; }
.obcur .ob-currow > .ob-fold.open svg { transform: rotate(180deg); }
html.tv .obcur .ob-currow > .ob-fold { width: 44px; height: 44px; right: 56px; }
/* the fold arrow, larger (Cole 2026-10-18) */
.obcur .ob-currow > .ob-fold { top: 2px; right: 42px; width: 34px; height: 34px; }
html.tv .obcur .ob-currow > .ob-fold { width: 48px; height: 48px; } html.tv .obcur .ob-currow > .ob-fold svg { width: 30px; height: 30px; }
/* the fold arrow on a highlight, so it reads as a button (Cole 2026-10-18) */
.obcur .ob-currow > .ob-fold { background: #fff; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, #fff); border-radius: 9px; box-shadow: 0 1px 2px rgba(34,53,42,.12); }
.obcur .ob-currow > .ob-fold:hover { background: color-mix(in srgb, var(--ink) 10%, #fff); border-color: var(--ink); }
/* the × on the same white highlight as the fold arrow; deleting asks first (Cole 2026-10-18) */
html.look-1c .obcur .ob-currow > .ob-rm { top: 2px !important; right: 4px !important; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 22px; line-height: 1; background: #fff; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, #fff); border-radius: 9px; box-shadow: 0 1px 2px rgba(34,53,42,.12); }
.obcur .ob-currow > .ob-rm:hover { background: color-mix(in srgb, var(--ink) 10%, #fff); border-color: var(--ink); }
.obcur .ob-rmask { position: absolute; z-index: 3; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px; border-radius: 11px; text-align: center; background: color-mix(in srgb, #fbfaf3 94%, transparent); }
.obcur .ob-rmask p { margin: 0; font: 600 20px/1.3 var(--serif); color: #14241a; text-wrap: balance; }
.obcur .ob-rmacts { display: flex; gap: 10px; }
.obcur .ob-rmacts button { min-height: 42px; padding: 0 20px; border-radius: 10px; font: 700 15px/1 var(--font, 'Karla', sans-serif); cursor: pointer; }
.obcur .ob-rmyes { background: #b5432f; border: 1.5px solid #b5432f; color: #fff; }
.obcur .ob-rmyes:hover { background: #9c3624; }
.obcur .ob-rmno { background: #fff; border: 1.5px solid #c7d1bf; color: #22352a; }
html.tv .obcur .ob-rmask p { font-size: 28px; } html.tv .obcur .ob-rmacts button { min-height: 56px; font-size: 20px; }
.obcur .ob-rmask { justify-content: flex-start; padding-top: 56px; }
.obcur .ob-rmask { background: color-mix(in srgb, #fbfaf3 97%, transparent); }
/* a little more room between the fold arrow and the × (Cole 2026-10-18) */
.obcur .ob-currow > .ob-fold { right: 48px; }
html.tv .obcur .ob-currow > .ob-fold { right: 62px; }
/* the Finish Date slider lives in Loop Adjustment, above the table (Cole 2026-10-18) */
.s2details > .yearcard { margin: 0 0 16px; }
/* too narrow for one row: the 3 + 2 grid again (the full-width rule had overridden it, Cole 2026-10-18) */
@container (max-width: 520px) {
  .s2toggle.five { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; width: 100%; box-sizing: border-box; border-radius: 14px; }
  .s2toggle.five .s2tab { grid-column: span 2; padding: 9px 4px; font-size: 12px; letter-spacing: .04em; border-radius: 10px; text-align: center; white-space: normal; }
  .s2toggle.five .s2tab:nth-child(n+4) { grid-column: span 3; }
}
@container (max-width: 520px) { .s2toggle.five .s2tab { white-space: nowrap; font-size: 11px; letter-spacing: .03em; padding: 9px 2px; } }
/* sign-up on the door (2026-10-18) */
.doorhead { margin: 0 0 14px; font: 600 22px/1.2 var(--serif); color: var(--ink); text-align: center; }
.doorswitch { margin: 16px 0 0; text-align: center; font-size: var(--fs-15, 15px); color: var(--muted); }
.doorforgot { margin: 14px 0 0; text-align: center; font-size: var(--fs-15, 15px); color: var(--muted); }
.doorforgot p { margin: 0 0 6px; line-height: 1.45; }
.doorforgot .err { margin-bottom: 6px; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* phone fixes from the fresh-family walk-through (2026-10-18) */
@media (max-width: 560px) {
  /* a long picked title keeps its width: Change drops under it */
  .ob-picked { flex-wrap: wrap; row-gap: 6px; }
  .ob-picked .tt { flex: 1 1 calc(100% - 40px); font-size: 17px; }
  .ob-picked .chg { margin-left: auto; }
  /* the done-so-far choices stay one line each */
  .ob-donechoice { height: 36px; padding: 0 12px; font-size: 15px; white-space: nowrap; }
}
/* Progress on a phone: room for "Literature" before its bar, and for "Total" before its own */
@media (max-width: 620px) { .pp { grid-template-columns: 104px minmax(0, 1fr) 84px; column-gap: 8px; } .modebar .yearline.pptotal { column-gap: 14px; } }
/* a reading list's search opens in place, inside the list: nothing below peeks out at its edges (Cole 2026-10-18) */
.ob-lpanel .ob-res, .ob-listbody .ob-res { position: static !important; margin-top: 8px; box-shadow: none; max-height: none; }
/* Account: the advertising switch (Privacy §5, 2026-10-19) */
#ads-off { width: 24px; height: 24px; accent-color: #3d6b4f; margin: 0; flex: none; cursor: pointer; }
@media (max-width: 760px) { .field #ads-off { align-self: flex-start; } }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* phones only (Cole 2026-10-19): header right side spans the width, the Synced badge clears the card,
   Progress subject names wrap instead of running under the bars */
@media (max-width: 560px) {
  .hdr { row-gap: 18px; padding-bottom: 34px; }
  .hdr-right { width: 100%; margin-left: 0; justify-content: space-between; }
  .hdr-right > * + * { margin-left: 16px; }
  .hdr-right > :first-child { margin-left: 0; }
  .hdr-right { justify-content: flex-start; }
  .hdr-right .hdr-rule { display: none; }
  .hdr .mark { padding-right: 72px; }
  .hdr-right .acct { position: absolute; top: 0; right: 0; margin: 0; }
  .hdr .ucircle .utree { shape-rendering: geometricPrecision; }
  .hdr .ucircle .uinit { top: 14px; width: 22px; height: 22px; margin-left: -11px; padding: 1.5px 0 0 .8px; font-size: 13px; line-height: 1; }
  .hdr .acct, .hdr .ucircle, .hdr .ucircle:hover, .hdr .ucircle.on { width: 50px; height: 50px; }
  .pp, .pp.tl, .pptotal, .modebar .yearline.pptotal { grid-template-columns: minmax(0, 40%) minmax(0, 1fr) 56px; column-gap: 12px; }
  .pp.tl { grid-template-columns: minmax(0, 36%) minmax(0, 1fr) 84px; }
  .ppname { white-space: normal; height: auto; min-height: 44px; line-height: 1.1; font-size: 19px; overflow-wrap: anywhere; }
  .ppname .ppchev { align-self: center; }
  .pppct { font-size: 22px; }
  .pphead.right .pplab { letter-spacing: .06em; }
}

/* TV header (Cole 2026-10-20): one row on a grid. Logo left, the tabs centred in the open space,
   then the pass meter and a plain initial circle at the right, each with room around it. */
html.tv .hdr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 56px; flex-wrap: nowrap; }
html.tv .hdr-right { display: contents; }
html.tv .hdr-right > * + * { margin-left: 0; }
html.tv .hdr .wreath { --wreath: 120px; margin-right: 24px; }
html.tv .hdr h1.wm { font-size: 52px; }
html.tv .hdr-right .tabs { justify-self: center; display: flex; gap: 14px; }
html.tv .hdr-right .tabs button { margin-right: 0; padding: 0 34px; min-height: 64px; white-space: nowrap; font-size: var(--fs-19, 22px); }
html.tv .pm-bar { width: 260px; }
html.tv .hdr .acct { position: relative; width: 72px; height: 72px; }
html.tv .hdr .ucircle { width: 72px; height: 72px; padding: 0; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; }
html.tv .hdr .ucircle .utree { display: none; }
html.tv .hdr .ucircle .uinit { position: static; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; color: #fff; font: 600 34px/1 var(--serif); }
html.tv .hdr .ucircle.on, html.tv .hdr .ucircle:focus { box-shadow: 0 0 0 4px var(--ground), 0 0 0 8px var(--terracotta); outline: none; }
html.tv .hdr .sync { top: calc(100% + 10px); }
/* the loop picker and Previous / Current / Forward share one row; the picker takes what is left (Cole 2026-10-20) */
.todaybar { flex-wrap: nowrap; column-gap: 20px; }
.todaybar > .loopfit { flex: 1 1 0; min-width: 0; }
.todaybar > .passnav { flex: none; margin-bottom: 0; }
.todaybar .looptabs, .todaybar .glancebtn { margin-bottom: 0; }
.loopfit { min-width: 0; }
@media (max-width: 720px) { html:not(.tv) .todaybar { flex-wrap: wrap; row-gap: 10px; } html:not(.tv) .todaybar > .loopfit { flex: 1 1 100%; } }
.looptabs.compact { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }
.looptabs.compact .loopdrop { flex: 0 1 auto; min-width: 0; }
.looptabs.compact { align-items: center; }
html.tv .looptabs.compact .loopdrop, html.tv .looptabs.compact .ldbtn, html.tv .looptabs.compact .glancebtn { height: 78px; min-height: 78px; box-sizing: border-box; }
/* the compact loop pill is the size of the loop pills it stands in for (Cole 2026-10-20) */
.looptabs.compact .loopdrop { margin: 0; }
.looptabs.compact .ldbtn { min-height: 48px; padding: 0 10px 0 24px; border-radius: 24px; font-size: 17px; gap: 14px; }
.looptabs.compact .ldbtn .ldchev { width: 28px; height: 28px; }
.looptabs.compact .ldmenu { left: 0; transform: none; }
html.tv .looptabs.compact .ldbtn { padding: 0 16px 0 44px; border-radius: 39px; font-size: var(--fs-19); gap: 20px; }
html.tv .looptabs.compact .ldbtn .ldchev { width: 40px; height: 40px; }
html.tv .looptabs.compact .ldbtn .ldchev svg { width: 18px; height: 18px; }
html.tv .looptabs.compact .ldmenu { min-width: 320px; font-size: var(--fs-17); }
.looptabs.compact .loopdrop { flex: none; justify-content: flex-start; }
.looptabs.compact .glancebtn { flex: 0 1 auto; min-width: 0; margin-left: 0; }
.glancebtn .gltxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* phone: no Previous / Current / Forward; swiping the loop moves between passes (Cole 2026-10-20) */
@media (max-width: 720px) { html:not(.tv) .today .passnav { display: none; } html:not(.tv) .today .loop { touch-action: pan-y; } }
/* the glance button: the short label on a phone (Cole 2026-10-20) */
.glancebtn .gl-short { display: none; }
@media (max-width: 720px) {
  html:not(.tv) .glancebtn .gl-long { display: none; }
  html:not(.tv) .glancebtn .gl-short { display: inline; }
  html:not(.tv) .looptabs.compact .glancebtn { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; margin: 0; border-radius: 24px; border: 1.5px solid var(--accent); background: #fbfaf3; color: var(--accent);
    font: 700 16px/1 var(--font, 'Karla', sans-serif); letter-spacing: 0; text-transform: none; }
  html:not(.tv) .looptabs.compact .glancebtn { justify-content: center; }
  html:not(.tv) .looptabs.compact .glancebtn .gltxt { flex: none; }
  html:not(.tv) .looptabs.compact .glancebtn .gico { width: 16px; height: 16px; flex: none; margin: 0; }
}
/* phone: a tighter subject card. Smaller title, the names on one line, task text full width, the book pill under its line (Cole 2026-10-20) */
@media (max-width: 720px) {
  html:not(.tv) .loop .card { padding: 18px 18px 16px; }
  html:not(.tv) .loop .card h2.subject { font-size: 34px; }
  html:not(.tv) .loop .card .here { flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  html:not(.tv) .loop .card .here .herechip { font-size: 13px; padding: 5px 11px; margin: 0; }
  html:not(.tv) .loop .card .tasks { margin-top: 14px; }
  html:not(.tv) .loop .card .tasks li { flex-wrap: wrap; align-items: flex-start; row-gap: 6px; padding: 3px 0; }
  html:not(.tv) .loop .card .tasks li + li { margin-top: 4px; }
  html:not(.tv) .loop .card .tasks li .tick { min-height: 28px; }
  html:not(.tv) .loop .card .tasks li .tick { flex: 1 1 100%; font-size: 17px; line-height: 1.4; gap: 14px; }
  html:not(.tv) .loop .card .tasks li .tick .box { width: 24px; height: 24px; flex: none; margin: 0; }
  html:not(.tv) .loop .card .tasks li .bookpill { margin: 0 0 0 38px; height: 30px; min-height: 30px; font-size: 11px; }
  html:not(.tv) .loop .card .proc { margin-top: 4px; padding-top: 0; }
  html:not(.tv) .loop .card .proc::before { margin: 10px 0 14px; }
  html:not(.tv) .loop .card .procrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html:not(.tv) .loop .card .procrow > *, html:not(.tv) .loop .card .procrow .act, html:not(.tv) .loop .card .procrow .morerow { margin: 0; width: 100%; box-sizing: border-box; }
  html:not(.tv) .loop .card .procrow .act.primary { min-height: 44px; height: 44px; border-radius: 22px; font-size: 17px; letter-spacing: .01em; box-shadow: 0 10px 20px -12px rgba(34,53,42,.75), inset 0 1px 0 rgba(255,255,255,.14); }
  html:not(.tv) .loop .card .procrow .act.primary:active { transform: translateY(1px); box-shadow: 0 5px 12px -8px rgba(34,53,42,.7); }
  html:not(.tv) .loop .card .procrow .morerow > * { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 38px; height: 38px; padding-top: 0; padding-bottom: 0; }
}
/* compact loop row: What's next keeps its size; the loop pill takes the rest and a long name ends in an ellipsis (Cole 2026-10-20) */
.looptabs.compact .loopdrop { flex: 1 1 auto; min-width: 0; }
.looptabs.compact .ldbtn { max-width: 100%; min-width: 0; box-sizing: border-box; }
.looptabs.compact .ldbtn .ldname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.looptabs.compact .ldbtn .ldchev { flex: none; }
.looptabs.compact .glancebtn, html:not(.tv) .looptabs.compact .glancebtn { flex: none; }
.umenu .umlogout { margin-top: 6px; color: #b4502a; }
/* the loop dropdown, cleaned up (Cole 2026-10-20): a calm card, each loop as a row with a pill-shaped colour swatch,
   the chosen one marked with a tick, no grey bars */
.ldmenu { padding: 8px; gap: 2px; border: 1px solid #dfe3d6; border-radius: 16px; background: #fbfaf3; box-shadow: 0 18px 36px -18px rgba(34,53,42,.45), 0 2px 6px -2px rgba(34,53,42,.12); min-width: 240px; }
.ldopt { min-height: 44px; padding: 0 12px 0 10px; gap: 12px; border-radius: 10px; font: 600 16px/1.1 var(--font, 'Karla', sans-serif); color: #22352a; text-align: left; }
.ldopt:hover, .ldopt:focus-visible { background: #eef1e8; outline: none; }
.ldopt.on { background: transparent; font-weight: 700; color: #14241a; }
.ldopt.on:hover { background: #eef1e8; }
.ldsw { width: 30px; height: 18px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(34,53,42,.12); }
.ldopt.on .ldsw { box-shadow: inset 0 0 0 2px #3d6b4f; }
.ldnm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldtick { flex: none; color: #3d6b4f; }
html.tv .ldmenu { min-width: 360px; padding: 12px; border-radius: 22px; }
html.tv .ldopt { min-height: 60px; font-size: 22px; gap: 16px; padding: 0 18px 0 14px; border-radius: 14px; }
html.tv .ldsw { width: 42px; height: 24px; border-radius: 12px; }
html.tv .ldtick { width: 22px; height: 22px; }
/* the dropdown's loop names at reading size everywhere; set on the label itself so no inherited button size shrinks it */
.loopdrop .ldmenu .ldopt, .loopdrop .ldmenu .ldopt .ldnm { font-family: var(--font, 'Karla', sans-serif); font-size: 18px; line-height: 1.15; letter-spacing: 0; text-transform: none; }
.loopdrop .ldmenu .ldopt { min-height: 48px; }
html.tv .loopdrop .ldmenu .ldopt, html.tv .loopdrop .ldmenu .ldopt .ldnm { font-size: var(--fs-19); }
html.tv .loopdrop .ldmenu { min-width: 520px; padding: 14px; border-radius: 26px; }
html.tv .loopdrop .ldmenu .ldopt { min-height: 84px; gap: 22px; padding: 0 24px 0 18px; border-radius: 18px; }
html.tv .loopdrop .ldmenu .ldsw { width: 56px; height: 32px; border-radius: 16px; }
html.tv .loopdrop .ldmenu .ldtick { width: 30px; height: 30px; }
/* pass nav: one segmented control (Cole 2026-10-20) */
.passnav.pn2 { display: flex; align-items: center; gap: 10px; }
.pn2-seg { display: inline-flex; align-items: center; height: 48px; padding: 4px; box-sizing: border-box; border-radius: 24px; background: #d8dfd0; border: 1px solid var(--line); }
.pn2-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #fbfaf3; color: var(--accent); cursor: pointer; box-shadow: 0 1px 2px rgba(34,53,42,.15); transition: background .15s, color .15s; }
.pn2-arrow:hover:not(:disabled) { background: var(--accent); color: #fff; }
.pn2-arrow:disabled { background: transparent; box-shadow: none; color: #a3b0a1; cursor: default; }
.pn2-now { min-width: 92px; padding: 0 12px; text-align: center; font: 600 15px/1 var(--font, 'Karla', sans-serif); color: #4f6656; white-space: nowrap; }
.pn2-now b { font: 700 20px/1 var(--serif); color: var(--ink); margin-left: 3px; }
.pn2-now:not(.live) b { color: var(--terracotta, #c96f2c); }
.pn2-back { height: 40px; padding: 0 16px; border: 1.5px solid var(--terracotta, #c96f2c); border-radius: 20px; background: #fbfaf3; color: var(--terracotta, #c96f2c); font: 700 14px/1 var(--font, 'Karla', sans-serif); white-space: nowrap; cursor: pointer; }
.pn2-back:hover { background: var(--terracotta, #c96f2c); color: #fff; }
html.tv .pn2-seg { height: 78px; padding: 6px; border-radius: 39px; }
html.tv .pn2-arrow { width: 64px; height: 64px; } html.tv .pn2-arrow svg { width: 26px; height: 26px; }
html.tv .pn2-now { min-width: 170px; font-size: var(--fs-17); } html.tv .pn2-now b { font-size: 34px; }
html.tv .pn2-back { height: 64px; padding: 0 28px; border-radius: 32px; font-size: var(--fs-17); }
.looptabs.compact { column-gap: 16px; gap: 16px; } html.tv .looptabs.compact { gap: 24px; }
html.tv .hdr-right .tvexit { position: absolute; left: 0; top: -52px; white-space: nowrap; }   /* browser TV mode only: kept out of the header's one row */
/* phone: Loop Adjustment rows put the subject on its own line and the three figures under the column names, so a name never runs under a number */
@media (max-width: 560px) {
  html:not(.tv) .dt2 { --cols: minmax(0, 1fr) 116px minmax(0, 1fr); }
  html:not(.tv) .dt2-band { padding: 12px 14px 10px; column-gap: 8px; }
  html:not(.tv) .dt2-band .dt2-h:nth-child(2), html:not(.tv) .dt2-band.withloop .dt2-h:nth-of-type(2) { grid-column: auto; }
  html:not(.tv) .dt2-row { row-gap: 8px; column-gap: 8px; min-height: 0; padding: 12px 14px 12px 20px; }
  html:not(.tv) .dt2-row .dt2-nm { grid-column: 1 / -1; font-size: 20px; }
  html:not(.tv) .dt2-n { font-size: 24px; }
  html:not(.tv) .dt2-per .wstep-b { width: 36px; } html:not(.tv) .dt2-per .wstep-n { min-width: 40px; }
}

/* starting up (Cole 2026-10-20): the wreath alone on the ground, no words and no footer, until the loop is ready */
.bootwreath { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: var(--ground); background-image: var(--ground-glow); }
.bootwreath .wreath { --wreath: 132px; margin: 0; }
html.tv .bootwreath .wreath { --wreath: 200px; }
@container (max-width: 440px) { .ob-rline.routine { grid-template-columns: minmax(0, 1fr); } .ob-rline.routine > .ob-fsel { grid-column: 1; } }
/* one subject: its tab stays a tab at the card's left, never a full-width heading over an empty band (Cole 2026-10-20) */
html.look3-c .ob-subnav.one li, html.look3-c .ob-subnav.one li:first-child { flex: 0 0 auto; }
html.look3-c .ob-subnav.one .ob-subtab .nm { min-width: 200px; }

/* the account menu (Cole 2026-10-20): who's signed in at the top, then menu rows, Log out set apart */
.umenu.um2 { min-width: 236px; padding: 6px; border-radius: 16px; }
.um2 .umhead { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; }
.um2 .umav { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-15); }
.um2 .umname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: var(--fs-15); color: var(--ink); }
.um2 .umsep { height: 1px; margin: 0 6px 6px; background: var(--line-3); }
.um2 .umitem { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: var(--fs-15); font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; }
.um2 .umitem svg { flex: none; color: var(--muted); }
.um2 .umitem:hover, .um2 .umitem:focus-visible { background: color-mix(in srgb, var(--accent) 11%, transparent); outline: none; }
.um2 .umitem.out { margin-top: 2px; color: #b4502a; }
.um2 .umitem.out svg { color: currentColor; }
.um2 .umitem.out:hover, .um2 .umitem.out:focus-visible { background: color-mix(in srgb, #b4502a 10%, transparent); }
html.tv .umenu.um2 { min-width: 360px; padding: 10px; }
html.tv .um2 .umav { width: 52px; height: 52px; font-size: var(--fs-19); } html.tv .um2 .umname, html.tv .um2 .umitem { font-size: var(--fs-19); }
html.tv .um2 .umitem { padding: 16px 18px; } html.tv .um2 .umitem svg { width: 26px; height: 26px; }

/* ---------- Account, redesign (Cole 2026-10-20) ---------- */
.acct2 { max-width: 820px; display: flex; flex-direction: column; gap: 18px; container-type: inline-size; }
.ac2-bar { display: flex; align-items: center; gap: 18px; margin: 4px 0 2px; }
.ac2-back { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border: 1px solid var(--line-3, #c7d1bf); border-radius: 12px; background: var(--surface, #fbfaf3); font: 700 15px var(--font); color: #2f5a3f; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-card); }
.ac2-back:hover { border-color: var(--accent); }
.ac2-title { margin: 0; font: 500 46px/1 var(--serif); letter-spacing: -.015em; color: var(--ink); }
/* identity: the sage panel the Progress header uses */
.ac2-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 22px; padding: 26px 150px 26px 28px; background: #e9ede3; border: 1px solid var(--line-3, #c7d1bf); border-radius: 18px; }
.ac2-av { width: 84px; height: 84px; border-radius: 50%; background: var(--accent, #3d6b4f); color: #fbfaf3; display: flex; align-items: center; justify-content: center; font: 500 40px/1 var(--serif); box-shadow: 0 0 0 5px #fbfaf3, 0 10px 22px -12px rgba(34,53,42,.7); }
.ac2-av.sm { font-size: 28px; letter-spacing: .02em; }
.ac2-id { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.ac2-tag { padding: 4px 9px; border-radius: 6px; background: #d3dccb; font: 700 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #2f5a3f; }
.ac2-name { font: 600 40px/1.05 var(--serif); letter-spacing: -.01em; color: #14241a; overflow-wrap: anywhere; }
.ac2-sub { margin: 0; font: 500 16px/1.4 var(--font); color: #4f6656; }
.ac2-sprig { position: absolute; right: 14px; bottom: 8px; width: 120px; height: 80px; pointer-events: none; }
/* tiles */
.ac2-card { background: var(--surface, #fbfaf3); border: 1px solid var(--line-3, #dfe3d6); border-radius: 18px; box-shadow: var(--shadow-card); padding: 22px 28px 8px; }
.ac2-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.ac2-chip { padding: 5px 10px; border-radius: 6px; background: color-mix(in srgb, var(--cc) 16%, #fff); color: var(--cc); font: 700 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ac2-head h3 { margin: 0; font: 600 28px/1.1 var(--serif); color: var(--ink); }
.ac2-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 10px 0; border-top: 1px solid #e6e9df; }
.ac2-row p, .ac2-row label { margin: 0; flex: 1 1 auto; min-width: 0; font: 500 17px/1.45 var(--font); color: #22352a; text-wrap: pretty; }
.ac2-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border: 1.5px solid #c7d1bf; border-radius: 12px; background: #fff; font: 700 16px var(--font); color: #2f5a3f; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.ac2-btn:hover:not(:disabled) { border-color: var(--accent); background: #eef1e8; color: #2f5a3f; }
.ac2-btn.primary { background: var(--accent, #3d6b4f); border-color: var(--accent, #3d6b4f); color: #fff; box-shadow: 0 8px 18px -10px rgba(34,53,42,.7); }
.ac2-btn.primary:hover:not(:disabled) { background: #2f5a3f; color: #fff; }
.ac2-btn:disabled { cursor: default; color: #9aa79c; background: #eef0e8; border-color: #e3e6da; box-shadow: none; }
.ac2-btn.danger { background: #b4502a; border-color: #b4502a; color: #fff; }
.ac2-btn.danger:hover:not(:disabled) { background: #9a4122; color: #fff; }
.ac2-btn.ghostdanger { color: #b4502a; }
.ac2-btn.ghostdanger:hover { border-color: #b4502a; background: #f6e7df; color: #9a4122; }
/* password: an inset sage panel, the two fields side by side */
.ac2-pw, .ac2-del { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin: 0 -10px 18px; padding: 18px; background: #eef1e8; border-radius: 14px; }
.ac2-del { grid-template-columns: minmax(0, 1fr); background: #f6ece5; }
.ac2-fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ac2-fld > span { font: 700 12px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #4f6656; }
.ac2-del .ac2-fld > span { font: 500 16px/1.45 var(--font); letter-spacing: 0; text-transform: none; color: #22352a; }
.ac2-fld input { width: 100%; box-sizing: border-box; height: 50px; padding: 0 14px; border: 1.5px solid #c7d1bf; border-radius: 12px; background: #fff; font: 500 17px var(--font); color: #22352a; }
.ac2-fld input::placeholder { color: #8a9a8c; }
.ac2-fld input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61,107,79,.18); }
.ac2-pwgo { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ac2-msg { font: 700 15px var(--font); color: #2f5a3f; } .ac2-msg.err { color: #b4502a; }
/* the switch (shared with the old markup) */
.acct2 .acswitchwrap { position: relative; flex: none; display: inline-flex; width: 56px; height: 32px; }
.acct2 #ads-off.acswitch { appearance: none; -webkit-appearance: none; position: relative; width: 56px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 16px; background: #cfd6c8; cursor: pointer; transition: background .2s; }
.acct2 #ads-off.acswitch::after { content: none; }
.acct2 #ads-off.acswitch:checked { background: var(--accent, #3d6b4f); }
.acct2 .acswitch:focus-visible { outline: 3px solid rgba(61,107,79,.3); outline-offset: 2px; }
.acct2 .acswitchwrap .knob { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(34,53,42,.25); pointer-events: none; transition: transform .2s; }
.acct2 .acswitch:checked + .knob { transform: translateX(24px); }
@container (max-width: 620px) {
  .ac2-title { font-size: 34px; }
  .ac2-hero { grid-template-columns: auto minmax(0, 1fr); row-gap: 16px; padding: 20px 96px 22px 20px; }
  .ac2-hero > .ac2-btn { grid-column: 1 / -1; justify-self: start; }
  .ac2-av { width: 64px; height: 64px; font-size: 30px; }
  .ac2-name { font-size: 30px; }
  .ac2-sprig { width: 84px; height: 56px; right: 8px; bottom: 6px; opacity: .9; }
  .ac2-card { padding: 18px 18px 6px; }
  .ac2-head h3 { font-size: 23px; }
  .ac2-row { flex-wrap: wrap; gap: 12px; }
  .ac2-pw { grid-template-columns: minmax(0, 1fr); margin: 0 -4px 14px; padding: 14px; }
}
@container (max-width: 400px) {
  .ac2-hero { grid-template-columns: minmax(0, 1fr); padding-right: 20px; }
  .ac2-sprig { opacity: .45; }
}
html.tv .acct2 { max-width: 1200px; gap: 28px; }
html.tv .ac2-title { font-size: 72px; } html.tv .ac2-back { height: 64px; font-size: 22px; padding: 0 28px; }
html.tv .ac2-av { width: 120px; height: 120px; font-size: 56px; } html.tv .ac2-name { font-size: 58px; } html.tv .ac2-tag, html.tv .ac2-chip { font-size: 17px; }
html.tv .ac2-head h3 { font-size: 40px; } html.tv .ac2-row p, html.tv .ac2-row label, html.tv .ac2-sub { font-size: var(--fs-19); }
html.tv .ac2-btn { height: 68px; font-size: 22px; padding: 0 32px; } html.tv .ac2-sprig { width: 180px; height: 120px; } html.tv .ac2-hero { padding-right: 220px; }
/* a smaller identity circle (Cole 2026-10-20) */
.ac2-av { width: 56px; height: 56px; font-size: 27px; box-shadow: 0 0 0 4px #fbfaf3, 0 8px 18px -12px rgba(34,53,42,.7); }
.ac2-av.sm { font-size: 20px; }
@container (max-width: 620px) { .ac2-av { width: 48px; height: 48px; font-size: 23px; } }
html.tv .ac2-av { width: 84px; height: 84px; font-size: 40px; }
/* password reset by email: a sage panel naming the address (Cole 2026-10-20) */
.ac2-reset { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; margin: 0 -10px 18px; padding: 14px 16px; background: #e9ede3; border: 1px solid #d3dccb; border-radius: 14px; }
.ac2-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--accent, #3d6b4f); color: #fbfaf3; display: flex; align-items: center; justify-content: center; }
.ac2-rtxt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ac2-rlab { font: 700 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #4f6656; }
.ac2-mail { font: 600 22px/1.15 var(--serif); color: #14241a; overflow-wrap: anywhere; }
.ac2-rdone { font: 700 15px var(--font); color: #2f5a3f; padding: 0 6px; white-space: nowrap; }
.ac2-reset.sent { background: #dfe9d6; border-color: #b9cfae; }
@container (max-width: 620px) { .ac2-reset { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; margin: 0 -4px 14px; } .ac2-reset > .ac2-btn, .ac2-reset > .ac2-rdone { grid-column: 1 / -1; } .ac2-reset > .ac2-btn { width: 100%; } .ac2-mail { font-size: 19px; } }
html.tv .ac2-ico { width: 68px; height: 68px; } html.tv .ac2-mail { font-size: 32px; } html.tv .ac2-rlab { font-size: 16px; }
/* connected TVs: one sage row per TV, Disconnect at the right (Cole 2026-10-20) */
.ac2-tv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; margin: 0 -10px 10px; padding: 12px 16px; background: #e6eeee; border: 1px solid #cfdcdc; border-radius: 14px; }
.ac2-tv:last-child { margin-bottom: 18px; }
.ac2-tv.empty { grid-template-columns: auto minmax(0, 1fr); }
.ac2-tv.empty p { margin: 0; font: 500 16px/1.45 var(--font); color: #22352a; text-wrap: pretty; }
.ac2-ico.tv { background: #2f6b74; }
.ac2-seen { font: 500 14px/1.2 var(--font); color: #4f6656; }
@container (max-width: 620px) { .ac2-tv { margin: 0 -4px 10px; } .ac2-tv:not(.empty) { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; } .ac2-tv > .ac2-btn { grid-column: 1 / -1; width: 100%; } }
/* Your Records: one export button (Cole 2026-10-20) */
/* Your Records: one export button (Cole 2026-10-20). The rules from here down were rebuilt after the design file
   was cut off when it was read, following the reset and TV panels above. */
.ac2-export { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 8px 22px 8px 8px; border: 0; border-radius: 14px; background: #c96f2c; color: #fff; font: 700 17px var(--font); text-decoration: none; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(150,80,30,.8); }
.ac2-export:hover { background: #b35f22; }
.ac2-ico.rec { background: rgba(255,255,255,.18); color: #fff; }
.ac2-ico.rec2 { width: 42px; height: 42px; background: #c96f2c; color: #fff; }
.ac2-ico.plan { background: #6d3b63; }
.ac2-ico.del { background: #b4502a; }
.ac2-expbox { display: grid; gap: 12px; margin: 0 -10px 18px; padding: 16px; background: #f6ece2; border: 1px solid #ecd6c2; border-radius: 14px; }
.ac2-expbox.sent { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; background: #dfe9d6; border-color: #b9cfae; }
.ac2-expopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ac2-expopt { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px; border: 1.5px solid #e2cdb9; border-radius: 12px; background: #fff; font: inherit; color: #22352a; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.ac2-expopt:hover:not(:disabled) { border-color: #c96f2c; background: #fffaf5; }
.ac2-expopt:disabled { opacity: .7; cursor: default; }
.ac2-expopt b { font: 700 17px var(--font); color: #14241a; }
.ac2-expbox .ac2-pwgo { margin-top: 2px; }
.ac2-plan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; margin: 0 -10px 14px; padding: 14px 16px; background: #efe6ee; border: 1px solid #ddc9db; border-radius: 14px; }
.ac2-subrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.ac2-delbox { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 16px; margin: 0 -10px 18px; padding: 16px; background: #f6e7df; border: 1px solid #e9c9b9; border-radius: 14px; }
.ac2-delbox.sent { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; background: #dfe9d6; border-color: #b9cfae; }
.ac2-delbox .ac2-mail { font-size: 20px; }
.ac2-delnote { margin: 4px 0 0; font: 500 15px/1.45 var(--font); color: #4f6656; }
.ac2-delbox .ac2-pwgo { margin-top: 12px; }
.ac2-card.danger { border-color: #ecd3c6; }
@container (max-width: 620px) {
  .ac2-expopts { grid-template-columns: minmax(0, 1fr); }
  .ac2-expbox, .ac2-plan, .ac2-delbox { margin-left: -4px; margin-right: -4px; }
  .ac2-plan, .ac2-expbox.sent, .ac2-delbox.sent { grid-template-columns: auto minmax(0, 1fr); row-gap: 12px; }
  .ac2-plan > .ac2-btn, .ac2-expbox.sent > .ac2-btn, .ac2-delbox.sent > .ac2-btn { grid-column: 1 / -1; width: 100%; }
}
html.tv .ac2-export { font-size: 24px; } html.tv .ac2-expopt b { font-size: 24px; }

/* TV: Progress at the Today screen's 10-foot scale (Cole 2026-10-20: it read tiny beside the other pages) */
html.tv .pp { padding: 34px 46px 28px; column-gap: 34px; }
html.tv .pp, html.tv .pp.tl, html.tv .pptotal { grid-template-columns: max-content minmax(0, 1fr) 250px; }
html.tv .pphead .pplab { font-size: 24px; padding: 10px 16px; }
html.tv .pprule { margin: 14px 0 6px; }
html.tv .ppname { font-size: 44px; height: 74px; }
html.tv .ppname .ppchev { font-size: 26px; }
html.tv .ppbar { height: 74px; }
html.tv .pptrack, html.tv .ppfill { top: 27px; height: 20px; border-radius: 10px; }
html.tv .ppknob { top: 20px; width: 34px; height: 34px; border-width: 4px; }
html.tv .pppct, html.tv .tldate { font-size: 44px; }
html.tv .ppaxis, html.tv .tlticks { height: 34px; margin-top: 16px; }
html.tv .ppaxis span, html.tv .tlticks span { font-size: 24px; }
html.tv .ppdetail { padding: 10px 0 22px 1.1em; }
html.tv .ppdetail .thead { min-height: 76px; }
html.tv .ppdetail .thead .tname { font-size: 34px; }
html.tv .ppdetail .thead .cchev { font-size: 24px; }
html.tv .ppdetail .ccount { font-size: 36px; }
html.tv .ppname.sub { font-size: 34px; height: 64px; line-height: 64px; max-width: 560px; }
html.tv .ppname.sub .ppchev { font-size: 22px; }
html.tv .ppbar.sub { height: 64px; } html.tv .ppbar.sub .ppfill { top: 24px; height: 16px; } html.tv .ppbar.sub .ppknob { top: 18px; width: 28px; height: 28px; }
html.tv .tldate.sub { font-size: 32px; }
html.tv .scopebar .s2toggle.sm { padding: 5px; } html.tv .scopebar .s2toggle.sm .s2tab { padding: 12px 26px; font-size: 22px; }
/* "Someone's away?" in the card's top-right corner, level with the subject (Cole 2026-10-23) */
.loop .card > .herelink { position: absolute; top: 40px; right: 36px; margin: 0; z-index: 2; }
.loop .card > .herelink + .here { margin-top: var(--s-3); }
@media (max-width: 720px) { html:not(.tv) .loop .card > .herelink { top: 22px; right: 18px; } }
.loop .card:has(> .herelink) > h2.subject { margin-right: 150px; }
@media (max-width: 720px) { html:not(.tv) .loop .card:has(> .herelink) > h2.subject { margin-right: 112px; } }
/* the subject's marker runs under each line of a heading that wraps, not as one block (Cole 2026-10-23) */
.loop .card .subject:has(> .mark) { background: none; }
.loop .card .subject > .mark { display: inline; background: linear-gradient(transparent 68%, var(--highlight) 68%, var(--highlight) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- School record (Cole 2026-10-24): Settings → Your Records; one child, a span of dates, printed or saved ---------- */
.ac2-export.screc-open { margin-right: 12px; }
.screc-page { max-width: 880px; }
.screc-ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 22px; align-items: end; padding-bottom: 22px; }
.screc-kids { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.screc-kid { height: 44px; padding: 0 20px; border: 1.5px solid var(--line-3, #c7d1bf); border-radius: 999px; background: #fff; font: 700 16px var(--font); color: var(--ink); cursor: pointer; }
.screc-kid:hover { border-color: var(--ki); }
.screc-kid.on { background: var(--kh); border-color: var(--ki); color: var(--ki); box-shadow: inset 0 0 0 1px var(--ki); }
.screc-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 190px)); gap: 14px; }
.screc-dates input { font-variant-numeric: tabular-nums; }
.screc-go { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
/* the record itself, as the paper reads */
.screc-sheet { background: #fff; border: 1px solid var(--line-3, #dfe3d6); border-radius: 18px; box-shadow: var(--shadow-card); padding: 40px 48px 34px; color: #14241a; }
.screc-head h1 { margin: 0; font: 600 40px/1.05 var(--serif); letter-spacing: -.01em; }
.screc-span { margin: 8px 0 0; font: 500 19px/1.3 var(--serif); color: #2f4a38; }
.screc-own { margin: 6px 0 0; font: 500 14px/1.45 var(--font); color: #4f6656; text-wrap: pretty; }
.screc-sec { margin-top: 30px; padding-top: 22px; border-top: 1.5px solid #14241a; }
.screc-sec > h2 { margin: 0 0 14px; font: 600 26px/1.1 var(--serif); }
.screc-count { margin: 0 0 4px; font: 500 18px var(--font); color: #2f4a38; }
.screc-count b { font: 600 34px/1 var(--serif); color: #14241a; margin-right: 4px; }
.screc-undated, .screc-bu { font: 500 15px/1.4 var(--font); color: #4f6656; }
.screc-undated { margin: 0 0 6px; }
.screc-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 20px 22px; margin-top: 16px; }
.screc-mo { break-inside: avoid; page-break-inside: avoid; }
.screc-mohead { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid #d9dfd0; font: 600 16px var(--serif); }
.screc-mon { font: 700 13px var(--font); color: var(--accent); }
.screc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.screc-dow { font: 700 10px/20px var(--font); color: #6c7f70; }
.screc-d { display: block; width: 22px; height: 22px; margin: 0 auto; font: 500 12px/22px var(--font); font-variant-numeric: tabular-nums; color: #3f5546; border-radius: 50%; }
.screc-d.out { color: #c3cbbd; }
.screc-d.on { background: var(--accent, #3d6b4f); color: #fff; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.screc-sub { margin-bottom: 18px; }
.screc-sub > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font: 700 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #2f4a38; break-after: avoid; page-break-after: avoid; }
.screc-sub > h3::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--sc, var(--accent)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.screc-book { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; padding: 10px 0; border-bottom: 1px solid #e6e9df; break-inside: avoid; page-break-inside: avoid; }
.screc-bt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.screc-bt b { font: 600 19px/1.25 var(--serif); }
.screc-ed { font: 500 14px/1.35 var(--font); color: #4f6656; }
.screc-bl { grid-column: 1; font: 500 16px/1.4 var(--font); color: #22352a; }
.screc-og { color: #4f6656; }
.screc-bd { grid-column: 2; grid-row: 1 / span 2; align-self: start; font: 600 14px/1.3 var(--font); color: #2f4a38; white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 3px; }
.screc-books { list-style: none; margin: 0; padding: 0; }
.screc-books li { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid #e6e9df; break-inside: avoid; page-break-inside: avoid; }
.screc-bk { font: 500 18px/1.35 var(--serif); min-width: 0; }
.screc-bon { flex: none; font: 600 14px/1.6 var(--font); color: #2f4a38; font-variant-numeric: tabular-nums; }
.screc-none { margin: 0; font: 500 16px var(--font); color: #4f6656; }
@container (max-width: 620px) {
  .screc-ctl { grid-template-columns: minmax(0, 1fr); }
  .screc-go { justify-content: stretch; } .screc-go .ac2-btn { flex: 1 1 auto; }
  .screc-sheet { padding: 24px 18px 22px; border-radius: 14px; }
  .screc-head h1 { font-size: 32px; }
  .screc-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .screc-grid { gap: 1px; } .screc-d { width: 19px; height: 19px; font-size: 10.5px; line-height: 19px; } .screc-mohead { font-size: 14px; }
  .screc-book { grid-template-columns: minmax(0, 1fr); }
  .screc-bd { grid-column: 1; grid-row: auto; padding-top: 0; }
  .screc-books li { flex-direction: column; gap: 2px; }
  .screc-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* printed: the record alone, on Letter paper */
@media print {
  @page { size: letter; margin: 0.6in 0.6in 0.65in; }
  html:has(.screc-page), html:has(.screc-page) body { background: #fff !important; }
  body:has(.screc-page) #root > .wrap > :not(.screc-page), body:has(.screc-page) > :not(#root) { display: none !important; }
  body:has(.screc-page) #root > .wrap { padding: 0 !important; margin: 0 !important; max-width: none !important; background: none !important; }
  .screc-page { max-width: none; display: block; }
  .screc-page > .ac2-bar, .screc-page > .screc-ctl { display: none !important; }
  .screc-sheet { border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .screc-head h1 { font-size: 30pt; }
  .screc-sec { margin-top: 20px; padding-top: 14px; }
  .screc-subj { break-before: page; page-break-before: always; border-top: 0; padding-top: 0; margin-top: 0; }
  .screc-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; }
  .screc-d { width: 19px; height: 19px; line-height: 19px; font-size: 8.5pt; }
  .screc-book { padding: 7px 0; }
  .screc-bt b { font-size: 13pt; }
  .screc-bl, .screc-bk { font-size: 11pt; }
  .screc-ed, .screc-bd, .screc-bon, .screc-own, .screc-undated, .screc-bu { font-size: 9.5pt; }
}

/* a book already part of one in the loop (Cole 2026-10-24) */
.ob-overlap { margin: 4px 4px 8px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid #c96f2c; background: #fbf1e6; color: #4a2f17; font-size: 15px; line-height: 1.4; }
.ob-overlap p { margin: 0 0 10px; text-wrap: pretty; }
.ob-overlap-do { display: flex; gap: 10px; align-items: center; }
.ob-overlap-no { cursor: pointer; height: 36px; padding: 0 14px; border-radius: 8px; border: 1.5px solid #c7d1bf; background: #fff; font: 700 14px 'Karla', sans-serif; color: #3f5546; }
html.tv .ob-overlap { font-size: 22px; } html.tv .ob-overlap-no { height: 52px; font-size: 20px; }
/* Sign-up's consent (Cole 2026-10-24): one checkbox, its links open the policies in a new tab */
.doorcard label.doorterms { display: flex; align-items: flex-start; gap: 10px; margin: var(--s-5) 0 0; text-transform: none; letter-spacing: 0;
  font: 500 var(--fs-15, 15px)/1.45 var(--font); color: var(--ink-2); cursor: pointer; }
.doorcard label.doorterms input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--accent); }
.doorcard label.doorterms a { color: var(--accent); font-weight: 700; }
.doorcard .btn.primary:disabled { opacity: .55; cursor: default; }

/* Settings -> Your family (Cole 2026-10-24): the adults, an invite link to copy or share, remove and leave */
.ac2-ico.fam { background: #7a5a1e; }
.ac2-adult { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 12px; margin: 0 -10px 10px; padding: 12px 16px; background: #f3ede0; border: 1px solid #e3d6bb; border-radius: 14px; }
.ac2-adult.asking { background: #f6e7df; border-color: #e9c9b9; }
.ac2-adult > .ac2-pwgo { grid-column: 1 / -1; } .ac2-adult > .ac2-pwgo .ac2-rlab { flex-basis: 100%; }
.ac2-joinbox { display: grid; gap: 10px; margin: 4px -10px 18px; padding: 16px; background: #eef1e8; border: 1px solid #d3dccb; border-radius: 14px; }
.ac2-joinlink { width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px; border: 1.5px solid #c7d1bf; border-radius: 12px; background: #fff; font: 500 15px var(--font); color: #22352a; }
.ac2-joinlink:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61,107,79,.18); }
.ac2-card .ac2-subrow:first-of-type { margin-top: 8px; }
@container (max-width: 620px) {
  .ac2-adult, .ac2-joinbox { margin-left: -4px; margin-right: -4px; }
  .ac2-adult { grid-template-columns: auto minmax(0, 1fr); }
  .ac2-adult > .ac2-btn { grid-column: 1 / -1; width: 100%; }
}

/* Settings -> School years (Cole 2026-10-28, TODO 4b): each year a row like Your family's; the one in use tinted */
.ac2-ico.yr { background: #2f5a3f; }
.ac2-year { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 10px; margin: 0 -10px 10px; padding: 12px 16px; background: #f4f3ea; border: 1px solid #e2e2d2; border-radius: 14px; }
.ac2-year.on { background: #e6efdf; border-color: #c5d8bb; }
.ac2-year.asking { background: #f6e7df; border-color: #e9c9b9; }
.ac2-year > .ac2-pwgo, .ac2-year > .ac2-yracts { grid-column: 2 / -1; }
.ac2-year > .ac2-pwgo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ac2-year > .ac2-pwgo .ac2-rlab { flex-basis: 100%; }
.ac2-yrname { flex: 1 1 200px; width: auto; }
.ac2-yrtag { padding: 7px 12px; border-radius: 999px; background: #2f5a3f; color: #fbfaf3; font: 700 13px/1 var(--font); letter-spacing: .04em; white-space: nowrap; }
.ac2-yracts { display: flex; gap: 18px; margin-top: -4px; }
.ac2-linkbtn { border: 0; background: none; padding: 2px 0; font: 600 14px var(--font); color: #4f6656; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ac2-linkbtn:hover { color: #22352a; }
.ac2-linkbtn.danger { color: #b4502a; }
@container (max-width: 620px) {
  .ac2-year { margin-left: -4px; margin-right: -4px; }
  .ac2-year > .ac2-btn { grid-column: 1 / -1; width: 100%; }
  .ac2-year > .ac2-pwgo, .ac2-year > .ac2-yracts { grid-column: 1 / -1; }
}
/* the header names the year in use when it isn't the newest: tap for Settings */
.hdr-year { flex: none; align-self: center; margin-left: 12px; padding: 6px 12px; border: 1.5px solid #c5d8bb; border-radius: 999px; background: #e6efdf; color: #2f5a3f; font: 700 14px/1 var(--font); letter-spacing: .02em; white-space: nowrap; cursor: pointer; }
.hdr-year:hover { background: #d8e7cf; }
html.tv .hdr-year { font-size: 22px; padding: 10px 18px; margin-left: 20px; }
@media (max-width: 620px) { .hdr-year { font-size: 12px; padding: 5px 9px; margin-left: 8px; } }

/* Settings as a short list (Cole 2026-10-28): School / Household / Account, each row opening its own page */
.ac2-group { margin: 0 0 22px; }
.ac2-gname { margin: 0 0 8px 6px; font: 700 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #4f6656; }
.ac2-list { background: #f7f6ee; border: 1px solid #e2e2d2; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px -14px rgba(34,53,42,.5); }
.ac2-li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; width: 100%; padding: 16px 20px; border: 0; border-top: 1px solid #e7e6d8; background: none; text-align: left; font: inherit; color: #22352a; cursor: pointer; }
.ac2-li:first-child { border-top: 0; }
.ac2-li:hover { background: #eef1e6; }
.ac2-lico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fbfaf3; background: #2f5a3f; }
.li-record .ac2-lico, .li-export .ac2-lico { background: #c96f2c; }
.li-parents .ac2-lico { background: #7a5a1e; } .li-tvs .ac2-lico { background: #2f6b74; }
.li-sub .ac2-lico { background: #6d3b63; } .li-pw .ac2-lico { background: #3d6b4f; } .li-privacy .ac2-lico { background: #b4502a; }
.ac2-ltxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac2-ltxt b { font: 600 21px/1.15 var(--serif); letter-spacing: -.005em; color: #14241a; }   /* the name alone, in the cards' title face (Cole 2026-10-29) */
.ac2-ltxt span { font: 500 14px/1.3 var(--font); color: #4f6656; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac2-lgo { font: 400 26px/1 var(--serif); color: #8a9a8c; }
/* a page of its own: its title is in the bar, so the card's own heading steps aside */
.ac2-page .ac2-card:only-of-type > .ac2-head { display: none; }
.ac2-page .ac2-card { margin-top: 4px; }
html.tv .ac2-ltxt b { font-size: 30px; } html.tv .ac2-ltxt span { font-size: 20px; } html.tv .ac2-li { padding: 20px 26px; } html.tv .ac2-gname { font-size: 17px; }

/* the demo's menu in the same dress as a family's (Cole 2026-10-29: the button stack "looks shite") */
.um2 .umname .umsub { display: block; margin-top: 2px; font-weight: 500; font-size: var(--fs-13); color: var(--muted); white-space: nowrap; }
.um2 a.umitem { text-decoration: none; color: inherit; box-sizing: border-box; }
.um2 a.umitem.out { color: #b4502a; }

/* Export records (Cole 2026-10-29): three choices side by side, stacked on a phone */
.ac2-expopts.ac2-exp3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
@container (max-width: 720px) { .ac2-expopts.ac2-exp3 { grid-template-columns: minmax(0, 1fr); } }

/* Loop Setup -> Subjects: the family's own time per lesson (Cole 2026-10-29) */
.ob-time { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 600 14px var(--font); color: #4f6656; }
.ob-time select { height: 36px; padding: 0 10px; border: 1.5px solid #c7d1bf; border-radius: 10px; background: #fff; font: 600 15px var(--font); color: #22352a; }
html.tv .ob-time { font-size: 20px; } html.tv .ob-time select { height: 52px; font-size: 20px; }

/* shared dropdown (Transcript) */
.ac2-select { height: 48px; padding: 0 12px; border: 1.5px solid #c7d1bf; border-radius: 12px; background: #fff; font: 600 16px var(--font); color: #22352a; max-width: 360px; }

/* School records -> Export (Cole 2026-10-29): each file named, typed and described, one per row */
.ac2-explist { display: grid; gap: 10px; margin-top: 6px; }
.ac2-exprow { width: 100%; }
.ac2-exprow .ac2-rtxt b { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ac2-kind { padding: 2px 7px; border-radius: 6px; background: #f3e3d4; color: #8a4a1e; font: 700 11px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.ac2-exprow .ac2-seen { white-space: normal; line-height: 1.35; }
.ac2-whynames { margin: 14px 2px 2px; font: 500 14px/1.45 var(--font); color: #4f6656; }

/* Subscription: Pause sits beside Cancel, plainly (Cole 2026-10-29); the cancel and delete boxes offer the records */
.ac2-pausebox { display: grid; gap: 12px; margin: 0 -10px 16px; padding: 16px; background: #efe6ee; border: 1px solid #ddc9db; border-radius: 14px; }
.ac2-pausen { display: flex; flex-wrap: wrap; gap: 8px; }
.ac2-chipbtn { height: 40px; padding: 0 16px; border: 1.5px solid #c7d1bf; border-radius: 999px; background: #fff; font: 600 15px var(--font); color: #22352a; cursor: pointer; }
.ac2-chipbtn.on { background: #6d3b63; border-color: #6d3b63; color: #fff; }
.ac2-recall { display: grid; gap: 10px; margin: 14px 0 4px; padding: 14px; background: rgba(255,255,255,.6); border: 1px solid #e3d6c9; border-radius: 12px; }
.ac2-reckid { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ac2-reckid b { min-width: 70px; font: 700 16px var(--font); color: #22352a; }
.ac2-reckid .ac2-btn { height: 40px; padding: 0 14px; font-size: 14px; }
@container (max-width: 620px) { .ac2-pausebox { margin-left: -4px; margin-right: -4px; } .ac2-reckid b { flex-basis: 100%; } }
@container (max-width: 620px) {
  .ac2-reckid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ac2-reckid b { grid-column: 1 / -1; }
  .ac2-reckid .ac2-btn { width: 100%; padding: 0 8px; white-space: normal; line-height: 1.15; font-size: 13px; }
}

/* Settings -> Transcript (Cole 2026-10-29): per school year, each subject's course title, grade and credit */
.li-transcript .ac2-lico { background: #7a5a1e; }
.trpage .screc-kids { margin-bottom: 8px; }
.trgo { margin-top: 18px; }
/* the transcript pre-filled from the record (Cole 2026-10-29) */
.tryear h4 span { text-align: right; }

/* Transcript courses as cards in the app's dress (Cole 2026-10-29: "make it match the style") */
.tryear { margin: 22px 0 8px; }
.tryhead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1.5px solid #c7d1bf; }
.tryhead h3 { margin: 0; font: 600 26px/1.1 var(--serif); letter-spacing: -.01em; color: #14241a; }
.tryfacts { display: flex; flex-wrap: wrap; gap: 6px; }
.tryfacts span { padding: 4px 10px; border-radius: 999px; background: #e6efdf; color: #2f5a3f; font: 700 12px/1.2 var(--font); letter-spacing: .02em; }
.trcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; align-items: start; margin: 0 0 10px; padding: 14px 18px 14px 22px;
  background: #fbfaf3; border: 1px solid #e2e2d2; border-radius: 14px; box-shadow: 0 6px 16px -14px rgba(34,53,42,.5); overflow: hidden; }
.trcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.trmain { display: grid; gap: 4px; min-width: 0; }
.trtitle { width: 100%; box-sizing: border-box; margin: -4px 0 0 -6px; padding: 3px 6px; border: 1px solid transparent; border-radius: 8px; background: none;
  font: 600 21px/1.2 var(--serif); letter-spacing: -.005em; color: #14241a; }
.trtitle:hover { border-color: #e2e2d2; background: #fff; }
.trtitle:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(61,107,79,.14); }
.trfacts { font: 700 12px/1.3 var(--font); letter-spacing: .04em; text-transform: uppercase; color: #4f6656; }
.trbooks { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.trbooks li { font: 400 15px/1.35 var(--serif); color: #22352a; }
.trbooks li i { font-style: italic; }
.trbooks li span { margin-left: 8px; font: 500 13px var(--font); color: #4f6656; }
.trpicks { display: flex; gap: 10px; }
.trpick { display: grid; gap: 5px; }
.trpick span { font: 700 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #4f6656; }
.trpick select { width: 92px; height: 42px; padding: 0 10px; border: 1.5px solid #c7d1bf; border-radius: 10px; background: #fff; font: 700 16px var(--font); color: #22352a; }
.trpick select.sug { color: #6b7d6f; font-style: italic; font-weight: 600; }
@container (max-width: 620px) {
  .trcard { grid-template-columns: minmax(0, 1fr); }
  .trpicks { gap: 10px; } .trpick { flex: 1; } .trpick select { width: 100%; }
}
.ob-ttq .ob-ttname { padding: 0 .24em; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }   /* the child named in the question, in their colours (Cole 2026-10-30) */

/* Details for this file only: the pop-up (Cole 2026-10-30) */
.dk-back { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,36,26,.42); }
.dk { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; padding: 24px 24px 20px; background: #fbfaf3; border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(20,36,26,.6); }
.dk h3 { margin: 0 0 6px; font: 600 26px/1.15 var(--serif); color: #14241a; }
.dk-why { margin: 2px 0 18px; padding: 12px 14px; border-radius: 12px; background: #e6efdf; font: 600 16px/1.45 var(--font); color: #14241a; }   /* easy to read (Cole 2026-10-30) */
.dk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.dk-f { display: grid; gap: 6px; }
.dk-f span { font: 700 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #4f6656; }
.dk-f input { height: 44px; box-sizing: border-box; padding: 0 12px; border: 1.5px solid #c7d1bf; border-radius: 10px; background: #fff; font: 500 16px var(--font); color: #22352a; }
.dk-f input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61,107,79,.16); }
.dk-go { display: flex; gap: 10px; margin-top: 18px; }
@media (max-width: 520px) { .dk-grid { grid-template-columns: 1fr; } .dk { padding: 20px 18px 16px; } }
.dk-f input::placeholder { color: #9aa79c; font-style: italic; opacity: 1; }

/* Transcript -> Grading scale (Cole 2026-10-30): each grade's percent range and points, the family's to change */
.trscale { margin: 22px 0 6px; }
.trscale-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1.5px solid #c7d1bf; }
.trscale-head h3 { margin: 0; font: 600 22px/1.1 var(--serif); color: #14241a; }
.trscale-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.trsc { display: grid; gap: 4px; justify-items: center; padding: 8px 6px; border-radius: 8px; }
.trsc b { font: 700 16px var(--font); color: #14241a; }
.trsc input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 4px; border: 1px solid rgba(34,53,42,.18); border-radius: 6px; background: rgba(255,255,255,.75); font: 600 13px var(--font); color: #22352a; text-align: center; }
.trsc input:focus { outline: none; border-color: var(--accent); background: #fff; }
.trsc.band-a { background: #d6e6d9; } .trsc.band-b { background: #e6efdc; } .trsc.band-c { background: #fbebd2; } .trsc.band-d { background: #f6dcd8; } .trsc.band-p { background: #e6e9ef; }
@container (max-width: 620px) { .trscale-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trscale-key { margin: -4px 0 10px; font: 700 11px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #4f6656; }
.ac2-tvcode { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 14px; }
.ac2-tvcode label { display: grid; gap: 6px; flex: 1 1 220px; }
.ac2-tvcode input { text-transform: uppercase; letter-spacing: .12em; }

/* Settings -> School years -> Set up next year (Cole 2026-10-30): onboarding's look — big serif questions, soft cards */
.nypage .ny-card { margin: 0 0 16px; padding: 22px 24px 24px; background: #fbfaf3; border: 1px solid #e2e2d2; border-radius: 18px; box-shadow: 0 10px 24px -20px rgba(34,53,42,.5); }
.ny-q { margin: 0 0 16px; font: 500 28px/1.15 var(--serif); letter-spacing: -.01em; color: #14241a; }
.ny-dates { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.ny-dates label { display: grid; gap: 8px; }
.ny-dates input { height: 48px; padding: 0 12px; border: 1.5px solid #c7d1bf; border-radius: 12px; background: #fff; font: 600 16px var(--font); color: #22352a; }
.ny-subj { position: relative; margin: 0 0 12px; padding: 14px 16px 6px 22px; border: 1px solid #e7e6d8; border-radius: 14px; background: #fff; overflow: hidden; }
.ny-subj::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.ny-subname { margin: 0 0 6px; font: 600 20px/1.2 var(--serif); color: #14241a; }
.ny-book { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid #efeee4; opacity: .62; }
.ny-book:first-of-type { border-top: 0; }
.ny-book.on { opacity: 1; }
.ny-tick { width: 26px; height: 26px; margin-top: 2px; border: 2px solid #b6c2ae; border-radius: 8px; background: #fff; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ny-tick.on { background: var(--accent); border-color: var(--accent); }
.ny-btxt { display: grid; gap: 3px; min-width: 0; }
.ny-btxt > i { font: 400 18px/1.3 var(--serif); font-style: italic; color: #14241a; }
.ny-btxt > span { font: 500 14px/1.4 var(--font); color: #4f6656; }
.ny-btxt .ny-next { color: #2f5a3f; font-weight: 600; }
.ny-next i { font-family: var(--serif); font-weight: 400; }
.ny-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 24px; }
.ny-done h3 { margin: 0 0 16px; font: 500 28px/1.15 var(--serif); color: #14241a; }
@container (max-width: 620px) { .ny-q { font-size: 24px; } .nypage .ny-card { padding: 18px 16px 20px; } }
.ny-fin { grid-template-columns: auto minmax(0, 1fr); }
.ny-done-dot { width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: #e6efdf; color: #2f5a3f; display: inline-flex; align-items: center; justify-content: center; font: 700 14px var(--font); }
/* next year, from Today (Cole rollover step 4, 2026-11-02): the card, and the Year complete choices */
.nycard .ny-mark { flex: none; width: 64px; height: 64px; display: block; }
.nycard .ny-mark .wreath { display: block; width: 100%; height: 100%; }
.nycard .wl-text p b { font-family: var(--serif); font-weight: 600; font-size: var(--fs-22); }
.ny-cardgo { margin: 10px 0 8px; }
.dy-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--s-6); }
@media (max-width: 560px) { .nycard .ny-mark { width: 48px; height: 48px; } .dy-go .btn { width: 100%; } }
/* a new version is ready (Cole 2026-11-02) */
.newver { position: fixed; left: 50%; bottom: calc(var(--bar-h) + 14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px;
  max-width: calc(100% - 32px); padding: 10px 10px 10px 18px; border-radius: 14px; background: #22352a; color: #f7f6ec; box-shadow: 0 18px 36px -18px rgba(20,36,26,.6);
  font: 600 15px/1.3 var(--font); animation: wl-in .35s var(--ease) both; }
.newver .btn { flex: none; }
@media (min-width: 720px) { .newver { bottom: 24px; } }
/* Look up by ISBN, at the foot of the curriculum search (dashboard E8, 2026-11-02) */
.ob-isbnbtn { margin-bottom: 8px; }
.ob-isbn { margin: 4px 0 10px; padding: 12px; border-radius: 12px; background: #eef3f8; border: 1px solid #c9d8e6; display: flex; flex-direction: column; gap: 10px; }
.ob-isbnrow { display: flex; gap: 8px; }
.ob-isbnin { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1.5px solid #9fc0dc; border-radius: 10px; background: #fff; font: 600 16px 'Karla', sans-serif; color: #22352a; letter-spacing: .04em; }
.ob-isbnfound { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #d9dfd0; }
.ob-isbnfound.book { flex-direction: column; align-items: stretch; }
.ob-isbnfound .tt { font: 600 17px/1.25 'Newsreader', serif; color: #14241a; }
.ob-isbnfound .mt { font: 500 13px 'Karla', sans-serif; color: #4f6656; margin-top: -4px; }
.ob-isbnhow { display: flex; flex-direction: column; gap: 6px; }
.ob-isbnunits { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ob-isbnunits .ob-name { height: 36px; padding: 0 12px; }
.ob-isbnn { width: 120px; height: 36px; padding: 0 10px; border: 1.5px solid #c7d1bf; border-radius: 8px; font: 600 15px 'Karla', sans-serif; }
.ob-addone.wide { width: 100%; height: 42px; }
.ob-isbnerr { color: #a8452f; }
.ob-isbnunits .ob-name.on { background: #dceaf5; border-color: #1c547e; color: #1c547e; font-weight: 700; }
/* ---------- Report a problem (Cole 2026-11-02): prominent, never hidden ---------- */
.umitem.rp { color: #a85a1e; font-weight: 700; }
.umitem.rp svg { color: #c96f2c; }
.ftr-report { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; margin-right: 6px; border-radius: 999px; border: 1.5px solid #c96f2c;
  background: #fbeee2; color: #8a4512; font: 700 13px var(--font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.ftr-report:hover { background: #f8e2cd; }
.ftr-report svg { color: #c96f2c; }
.rp-veil { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,36,26,.42); }
.rp-card { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; padding: 24px 22px 20px; border-radius: 20px; background: #f7f6ec; border: 1px solid #d9dfd0; box-shadow: 0 30px 60px -30px rgba(20,36,26,.6); }
.rp-card h2 { margin: 0 0 12px; font: 600 28px/1.1 var(--serif); color: #14241a; }
.rp-lab { display: block; margin: 0 0 6px; font: 700 12px var(--font); letter-spacing: .1em; text-transform: uppercase; color: #4f6656; }
.rp-text { width: 100%; min-height: 120px; padding: 12px 14px; border: 1.5px solid #b6c2ae; border-radius: 12px; background: #fff; font: 500 16px/1.4 var(--font); color: #22352a; resize: vertical; box-sizing: border-box; }
.rp-text:focus { outline: none; border-color: #3d6b4f; box-shadow: 0 0 0 3px rgba(61,107,79,.18); }
.rp-shot { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid #d9dfd0; }
.rp-shot img { width: 96px; height: 72px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid #d9dfd0; flex: none; }
.rp-shot div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-shot b { font: 700 15px var(--font); color: #22352a; }
.rp-shot span { font: 500 14px var(--font); color: #4f6656; }
.rp-x { align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; color: #a8452f; font: 700 14px var(--font); cursor: pointer; }
.rp-err { margin: 10px 0 0; color: #a8452f; font-weight: 600; }
.rp-go { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.rp-lead { margin: 0 0 14px; font: 500 17px/1.4 var(--font); color: #3f5546; }
.rp-tv { max-width: 720px; text-align: center; }
.rp-qr { display: block; width: 300px; height: 300px; margin: 6px auto 12px; background: #fff; border-radius: 16px; padding: 10px; }
.rp-code { margin: 0; font: 500 16px var(--font); color: #3f5546; }
.rp-code b { color: #14241a; letter-spacing: .04em; }
html.tv .rp-card h2 { font-size: 52px; } html.tv .rp-lead, html.tv .rp-code { font-size: 28px; } html.tv .rp-qr { width: 380px; height: 380px; }
html.tv .rp-go { justify-content: center; }
html.tv .ftr-report { height: 56px; font-size: 22px; padding: 0 24px; }
.rp-attach { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #3d6b4f; background: #fff; color: #3d6b4f; font: 700 15px var(--font); cursor: pointer; }
.rp-attach:hover { background: #eef3ea; }
/* the footer's Report a problem on its own line above the links, so they keep their spacing and clear the drawing (2026-11-03) */
.ftr-links { grid-template-columns: repeat(2, max-content); }
.ftr-links .ftr-report { grid-column: 1 / -1; justify-self: start; margin: 0 0 2px; }
@container (min-width: 1020px) { .ftr-links { display: grid; grid-template-columns: repeat(4, max-content); column-gap: 30px; } .ftr-links a + a::before { content: ''; } }
@media (max-width: 760px) { .ftr-links { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 800px) { .ftr { grid-template-columns: minmax(0, 1fr) auto; } .ftr-links { grid-column: 1 / -1; grid-row: 2; padding: 0; border-left: 0; } .ftr svg.sprig.art-seed { grid-column: 2; grid-row: 1; } }
@media (max-width: 800px) { .ftr-links { padding-bottom: 22px; } }
.rp-paste { margin-left: 8px; }
@media (max-width: 480px) { .rp-paste { margin-left: 0; margin-top: 8px; } }

/* Something broken? (Cole 2026-11-04): calm, not a hazard notice: the app's green, sentence case, a wrench */
.umitem.rp { color: var(--accent); font-weight: 700; }
.umitem.rp svg { color: var(--accent); }
.ftr-links .ftr-report { height: 36px; padding: 0 16px 0 13px; border: 1.5px solid #a9bba2; background: #eef3ea; color: #2f5a3f; font: 700 14px var(--font); letter-spacing: 0; text-transform: none; }
.ftr-links .ftr-report:hover { background: #e2ecdc; border-color: #3d6b4f; }
.ftr-links .ftr-report svg { color: #3d6b4f; }
html.tv .ftr-links .ftr-report { height: 56px; font-size: 22px; padding: 0 24px; }
/* Something broken? pops (Cole 2026-11-04): the app's solid green button, cream text, a soft lift */
.ftr-links .ftr-report { height: 40px; padding: 0 18px 0 14px; border: 0; background: linear-gradient(180deg, #467a5a, #3d6b4f); color: #f6f4e8; font: 700 15px var(--font);
  box-shadow: 0 1px 0 #2d5039, 0 8px 18px -10px rgba(45,80,57,.7), inset 0 1px 0 rgba(255,255,255,.14); transition: transform .16s, box-shadow .16s; }
.ftr-links .ftr-report:hover { background: linear-gradient(180deg, #467a5a, #3d6b4f); transform: translateY(-1px); box-shadow: 0 1px 0 #2d5039, 0 12px 22px -10px rgba(45,80,57,.75), inset 0 1px 0 rgba(255,255,255,.14); }
.ftr-links .ftr-report svg { color: #f5e3a0; }
html.tv .ftr-links .ftr-report { height: 60px; font-size: 24px; padding: 0 28px 0 22px; }
/* the onboarding's speed-ups (Cole 2026-11-04): Read "a novel" at the top of Literature's search; + Another level */
.ob-readbook { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 8px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #a9c69a; background: #eef4e8; color: #2f5a3f; text-align: left; cursor: pointer; font: inherit; }
.ob-readbook:hover { background: #e3edda; }
.ob-readbook svg { flex: none; color: #2f5a3f; }
.ob-readbook b { display: block; font: 600 17px/1.25 'Newsreader', serif; color: #14241a; }
.ob-readbook span span { display: block; font: 500 13px 'Karla', sans-serif; color: #4f6656; margin-top: 2px; }
.ob-another { align-self: flex-start; margin: 6px 0 2px; padding: 0; border: 0; background: none; color: #3d6b4f; font: 700 14px 'Karla', sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* one password field with Show (Cole 2026-11-04) */
.door .pwbox { position: relative; display: block; }
.door .pwbox input { width: 100%; padding-right: 72px; box-sizing: border-box; }
.door .pwshow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: #eef1e6; color: #3d6b4f; font: 700 13px var(--font); cursor: pointer; }
/* Phone, swiped off the live pass (Cole 2026-11-04, feature inventory F9): the pass arrows are hidden at this width, so a
   way back sits above the tabs until the loop is on its current pass again */
.pn2-phoneback { display: none; }
@media (max-width: 720px) {
  html:not(.tv) .pn2-phoneback { display: block; position: fixed; z-index: 11; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--bar-h, 64px) + 14px + env(safe-area-inset-bottom, 0px)); height: 44px; padding: 0 20px; border: 0;
    border-radius: 22px; background: var(--terracotta, #c96f2c); color: #fff; font: 700 15px/1 var(--font, 'Karla', sans-serif);
    box-shadow: 0 6px 18px rgba(40, 50, 35, .22); white-space: nowrap; cursor: pointer; }
}