/* Screens of workstream W2b: the book builder, the teaching view, book
   content (list and review), all skills, the weekly email preview.
   Tokens only: no raw colours, sizes off the scale, weight 700 or zoom. */

/* ---- shared bits ---------------------------------------------------------- */
.spinner { display: inline-block; width: 18px; height: 18px; border-radius: var(--r-full); flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.spinner.small { width: 14px; height: 14px; }
.kbd, kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface);
  font: var(--t-caption); font-weight: var(--w-semibold); color: var(--muted); font-family: var(--font-ui); }

/* save indicator (on the dark hero) */
.save-state { display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-4);
  border-radius: var(--r-full); font: var(--t-label); color: var(--on-band); background: rgba(211, 255, 233, .08); }
.save-state.saved svg { color: var(--green-400); }
.save-state.error { background: var(--error-bg); color: var(--error-text); padding-right: var(--s-1); }
.save-state.error .btn { height: 28px; margin-left: var(--s-2); background: var(--surface); color: var(--error-text); border-color: transparent; }

/* ---- book builder ----------------------------------------------------------- */
.bb-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); align-items: start; }
.bb-plan { padding: var(--s-6) var(--s-6) var(--s-5); }
.bb-plan-head { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.bb-plan-head h2 { font: var(--t-h3); flex: 1; }
.bb-legend { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.bb-legend .caption { margin-right: var(--s-3); color: var(--muted); }
.bb-lessons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bb-lesson { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0;
  border-top: 1px solid var(--line); border-radius: var(--r-md); transition: background var(--dur-1) var(--ease); }
.bb-lesson.over { background: var(--surface-quiet); }
.bb-lesson-head { display: flex; align-items: flex-start; gap: var(--s-3); padding-top: 2px; }
.bb-lesson-what { display: flex; flex-direction: column; }
.bb-lesson-what b { font-weight: var(--w-semibold); }
.bb-lesson-what .caption { color: var(--muted); }
.bb-lesson.empty .bb-lesson-what b { color: var(--muted); font-weight: var(--w-medium); }
.bb-lesson-what .bb-over { color: var(--ink); font-weight: var(--w-semibold); }
.bb-state { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: var(--s-1); height: 22px; padding: 0 var(--s-2);
  border-radius: var(--r-full); font: var(--t-caption); font-weight: var(--w-semibold); }
.bb-state.taught { background: var(--surface-quiet); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.bb-state.now { background: var(--surface-mint); color: var(--green-800); }
.bb-lesson.taught .bb-skill { background: var(--surface-quiet); }
.bb-heavy { display: flex; gap: var(--s-3); align-items: flex-start; margin: var(--s-3) 0 var(--s-1); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); background: var(--surface-quiet); border: 1px solid var(--line-strong); color: var(--ink); font: var(--t-body); }
.bb-heavy > svg { flex-shrink: 0; margin-top: 3px; color: var(--primary); }
.bb-heavy b { font-weight: var(--w-semibold); }
.bb-heavy svg:not(:first-child) { vertical-align: -2px; }
.bb-rows { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.bb-empty { display: flex; align-items: center; height: 48px; padding: 0 var(--s-4); border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md); font: var(--t-caption); color: var(--muted); }
.bb-lesson.over .bb-empty { border-color: var(--primary); background: var(--surface-mint); color: var(--green-800); }
.bb-drop-line { height: 3px; border-radius: 2px; background: var(--green-400); margin: -2px 0; box-shadow: 0 0 0 2px var(--surface-mint); }

.bb-skill { position: relative; display: grid; grid-template-columns: 18px 64px minmax(0, 1fr) auto 58px 36px; gap: var(--s-3); align-items: center;
  min-height: 60px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--e1); cursor: grab;
  transition: box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.bb-skill:hover { border-color: var(--green-300); box-shadow: var(--e2); }
.bb-skill.dragging { opacity: .45; transform: scale(.99); }
.bb-skill.menu-open { z-index: 5; border-color: var(--green-300); }
.bb-skill.st-shaky { box-shadow: inset 3px 0 0 var(--amber), var(--e1); }
.bb-skill.st-new { box-shadow: inset 3px 0 0 var(--primary), var(--e1); }
.bb-skill.st-added { box-shadow: inset 3px 0 0 var(--green-300), var(--e1); }
.bb-grip { color: var(--control-line); display: flex; }
.bb-skill:hover .bb-grip { color: var(--muted); }
.bb-tag { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 var(--s-2); border-radius: var(--r-full);
  font: var(--t-caption); font-weight: var(--w-semibold); white-space: nowrap; justify-self: start; }
.bb-tag.new { background: var(--surface); color: var(--green-800); box-shadow: inset 0 0 0 1.5px var(--primary); }
.bb-tag.shaky { background: var(--amber-bg); color: var(--amber-text); box-shadow: inset 0 0 0 1px var(--amber); }
.bb-tag.added { background: var(--surface-quiet); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.bb-name { display: flex; flex-direction: column; min-width: 0; }
.bb-name a { color: var(--ink); text-decoration: none; font-weight: var(--w-medium); }
.bb-name a:hover { color: var(--primary); text-decoration: underline; }
.bb-name .caption { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-cards { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bb-cards .caption { color: var(--muted); }
.bb-rings { display: inline-flex; gap: 3px; }
.bb-rings .ring { width: 9px; height: 9px; border-radius: var(--r-full); border: 1.5px solid var(--green-300); background: var(--surface-quiet); }
.bb-pp { font: var(--t-label); text-align: right; color: var(--ink); }
.bb-pp.about { color: var(--muted); font-weight: var(--w-medium); }
.bb-menu-wrap { position: relative; display: flex; justify-content: center; }
.bb-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 248px; padding: var(--s-2);
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e4); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px; animation: rise var(--dur-2) var(--ease); cursor: default; }
.bb-menu.up { top: auto; bottom: calc(100% + 6px); }
.bb-menu-label { padding: var(--s-1) var(--s-2) var(--s-2); font-size: 12px; }
.bb-menu-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0 var(--s-1); }
.bb-menu-l { height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface);
  font: var(--t-label); color: var(--ink); font-variant-numeric: tabular-nums; }
.bb-menu-l:hover:not(:disabled), .bb-menu-l:focus-visible { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.bb-menu-l.here { background: var(--surface-mint); border-color: var(--surface-mint); color: var(--green-800); }
.bb-menu-sep { height: 1px; background: var(--line); margin: var(--s-2) 0; }
.bb-menu > button { display: flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm);
  background: none; font: var(--t-body); color: var(--ink); text-align: left; }
.bb-menu > button .kbd { margin-left: auto; }
.bb-menu > button:hover:not(:disabled), .bb-menu > button:focus-visible { background: var(--surface-quiet); }
.bb-menu > button:disabled { color: var(--disabled-text); }
.bb-menu > button.danger { color: var(--error-text); }

.bb-add { margin-top: var(--s-4); }
.bb-add-btn { display: flex; align-items: center; gap: var(--s-2); width: 100%; height: 52px; padding: 0 var(--s-4); border-radius: var(--r-md);
  border: 1.5px dashed var(--control-line); background: none; font: var(--t-body); font-weight: var(--w-semibold); color: var(--primary); }
.bb-add-btn .caption { color: var(--muted); font-weight: var(--w-regular); }
.bb-add-btn:hover { background: var(--surface-quiet); border-color: var(--primary); }
.bb-add.open { padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface-quiet); display: flex; flex-direction: column; gap: var(--s-3); }
.bb-add-row { display: flex; align-items: center; gap: var(--s-3); }
.bb-into { display: inline-flex; align-items: center; gap: var(--s-2); }
.bb-into select { width: 128px; }
.bb-hits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bb-hit { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-md);
  background: none; text-align: left; font: var(--t-body); font-weight: var(--w-medium); color: var(--ink); }
.bb-hit .grow { display: flex; flex-direction: column; }
.bb-hit .grow .caption { color: var(--muted); font-weight: var(--w-regular); }
.bb-hit > .caption { color: var(--primary); opacity: 0; }
.bb-hit.on { background: var(--surface); box-shadow: var(--e1); }
.bb-hit.on > .caption { opacity: 1; }
.bb-hit > svg { flex-shrink: 0; color: var(--primary); }
.bb-nohit { padding: var(--s-2) var(--s-3); }

.bb-known { margin-top: var(--s-5); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.bb-known summary { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; list-style: none; padding: var(--s-2); border-radius: var(--r-md); }
.bb-known summary::-webkit-details-marker { display: none; }
.bb-known summary:hover { background: var(--surface-quiet); }
.bb-known summary > svg:first-child { color: var(--primary); }
.bb-known summary .caption { color: var(--muted); margin-left: var(--s-2); flex: 1; }
.bb-known[open] summary > svg:last-child { transform: rotate(180deg); }
.bb-known ul { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.bb-known li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-8); border-top: 1px solid var(--line); color: var(--muted); }
.bb-known li .caption { color: var(--muted); }

.bb-side { position: sticky; top: calc(var(--topbar-h) + var(--s-6)); display: flex; flex-direction: column; gap: var(--s-5); }
.bb-summary { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-6); }
.bb-cover { position: relative; height: 150px; border-radius: 3px var(--r-sm) var(--r-sm) 3px; background: var(--band); color: var(--green-100);
  padding: var(--s-3); display: flex; flex-direction: column; gap: 2px; box-shadow: var(--e2), inset 4px 0 0 rgba(0, 0, 0, .25); transform: rotate(-2deg); }
.bb-cover img { width: 62px; margin-bottom: auto; }
.bb-cover-t { font-size: 12px; line-height: 16px; color: var(--on-band-muted); }
.bb-cover b { font: var(--t-label); font-weight: var(--w-semibold); color: var(--green-50); }
.bb-cover-c { font-size: 12px; line-height: 14px; color: var(--on-band-muted); }
.bb-cover .ed-tile { position: absolute; right: 10px; bottom: 10px; }
.bb-stats { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.bb-total { display: flex; align-items: baseline; gap: var(--s-2); }
.bb-total b { font: var(--t-display); font-size: 48px; line-height: 52px; color: var(--ink); }
.bb-total span { color: var(--muted); font-weight: var(--w-medium); }
.bb-stats .caption { color: var(--muted); display: flex; align-items: center; gap: var(--s-2); }
.bb-over-note { display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-1); font: var(--t-caption); color: var(--ink); }
.bb-over-note svg { flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.bb-counting { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--green-400); animation: shimmer 1s ease-in-out infinite; }
.bb-facts { display: flex; gap: var(--s-6); margin: var(--s-3) 0 0; }
.bb-facts div { display: flex; flex-direction: column; }
.bb-facts dt { font: var(--t-caption); color: var(--muted); }
.bb-facts dd { margin: 0; font: var(--t-h3); }
.bb-balance { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; height: 72px;
  padding-top: var(--s-3); border-top: 1px solid var(--line); }
/* a lesson's worth of pages: bars sit 20px up (the label), 40px tall at most */
.bb-budget { position: absolute; left: -4px; right: -4px; bottom: calc(20px + 40px * var(--at)); border-top: 1.5px dashed var(--control-line); pointer-events: none; }
.bb-bar.over > span { background: var(--primary); }
.bb-budget-key { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-2); margin-top: calc(-1 * var(--s-3)); color: var(--muted); }
.bb-budget-key span { width: 18px; border-top: 1.5px dashed var(--control-line); }
.bb-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.bb-bar > span { width: 100%; border-radius: 4px 4px 2px 2px; background: var(--green-300); transition: height var(--dur-3) var(--ease); }
.bb-bar:hover > span { background: var(--primary); }
.bb-bar i { font: var(--t-caption); font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.bb-generate { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.bb-generate .caption { color: var(--muted); }
.bb-generate .btn .spinner { margin-right: var(--s-1); }
.bb-calc { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; font: var(--t-caption); color: var(--ink); }
.bb-calc svg { flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.bb-calc b { font-weight: var(--w-semibold); }
.bb-calc.unset { padding: var(--s-2) var(--s-3); border-radius: var(--r-sm, 6px); background: var(--amber-bg); color: var(--amber-text); }
.bb-calc.unset svg { color: var(--amber-text); }

/* the book is ready */
.book-ready { width: min(820px, calc(100vw - 64px)); padding: var(--s-8); }
.br-top { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.br-cover { width: 200px; border-radius: var(--r-sm); box-shadow: var(--e3); transform: rotate(-2deg); background: var(--band); }
.br-what { display: flex; flex-direction: column; gap: var(--s-2); }
.br-what h2 { font: var(--t-h2); }
.br-docs { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
.br-doc { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.br-doc .grow { display: flex; flex-direction: column; }
.br-doc .caption { color: var(--muted); }
.br-foot { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }

/* ---- teaching: a presentation view ------------------------------------------ */
.teach { height: 100vh; display: flex; flex-direction: column; background: var(--green-900); overflow: hidden; }
.teach-bar { position: relative; z-index: 10; flex-shrink: 0; height: var(--topbar-h); display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-5); background: var(--band); color: var(--on-band); border-bottom: 1px solid rgba(211, 255, 233, .08);
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease); }
.teach-bar :focus-visible { box-shadow: var(--focus-ring-band); }
.tb-back { display: inline-flex; align-items: center; gap: var(--s-2); height: 40px; padding: 0 var(--s-3) 0 var(--s-2); border-radius: var(--r-md);
  color: var(--on-band); text-decoration: none; font-weight: var(--w-medium); }
.tb-back:hover { background: rgba(211, 255, 233, .1); }
.tb-sep { width: 1px; height: 28px; background: rgba(211, 255, 233, .16); }
.tb-lessons { display: flex; align-items: center; gap: 2px; }
.tb-lessons .lesson-tile { padding: 3px; border-radius: var(--r-sm); }
.tb-lessons button.lesson-tile:hover { background: rgba(211, 255, 233, .1); }
.tb-where { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-left: var(--s-2); }
.tb-eyebrow { font: var(--t-caption); font-weight: var(--w-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--green-400); }
.tb-where b { font-weight: var(--w-medium); color: var(--green-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-pager { display: flex; align-items: center; gap: var(--s-1); }
.tb-page { min-width: 112px; text-align: center; color: var(--on-band-muted); }
.tb-page b { color: var(--green-50); font-weight: var(--w-semibold); font-size: 17px; }
.teach-bar .icon-btn { background: transparent; border-color: transparent; color: var(--on-band); }
.teach-bar .icon-btn:hover:not(:disabled) { background: rgba(211, 255, 233, .1); color: var(--white); border-color: transparent; }
.teach-bar .icon-btn:disabled { color: rgba(211, 255, 233, .3); background: transparent; }
.tb-icon { font: var(--t-label); font-size: 16px; border: 1px solid rgba(211, 255, 233, .22) !important; }
.tb-icon.on, .tb-btn.on { background: rgba(211, 255, 233, .14) !important; }
.tb-btn { background: transparent; color: var(--on-band); border-color: rgba(211, 255, 233, .22); }
.tb-btn:hover:not(:disabled) { background: rgba(211, 255, 233, .1); border-color: rgba(211, 255, 233, .4); }
.tb-btn kbd { background: transparent; color: var(--on-band-muted); border-color: rgba(211, 255, 233, .22); height: 20px; min-width: 20px; }
.tb-full { background: var(--green-400); color: var(--green-950); border-color: var(--green-400); }
.tb-full:hover:not(:disabled) { background: var(--green-100); }
.tb-full kbd { color: var(--green-900); border-color: rgba(1, 18, 9, .25); }
.tb-eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a laptop screen: the bar keeps the lesson and skill in view (the keys are
   in the ? panel, the button names in their tooltips) */
@media (max-width: 1599px) { .teach-bar .tb-btn kbd { display: none; } }
@media (max-width: 1439px) {
  .teach-bar { gap: var(--s-3); }
  .tb-contents .tb-label, .tb-page-word { display: none; }
  .tb-contents { padding: 0 var(--s-3); }
  .tb-page { min-width: 76px; }
  .tb-where .tb-eyebrow { display: none; }     /* the lesson tile already says which lesson */
}

.teach-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: var(--s-6);
  padding: var(--s-5) var(--s-6) var(--s-6); cursor: pointer; }
.sheet-wrap { height: 100%; display: flex; align-items: center; justify-content: center; min-width: 0; }
.teach-stage .sheet { display: block; height: 100%; max-width: 100%; width: auto; object-fit: contain; aspect-ratio: 210 / 297;
  background: var(--white); border-radius: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 64px rgba(0, 0, 0, .35); cursor: default;
  opacity: .0; transition: opacity var(--dur-2) var(--ease); }
.sheet-wrap.ready .sheet { opacity: 1; }
.stage-edge { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--r-full); border: 0; display: grid; place-items: center;
  background: rgba(211, 255, 233, .08); color: var(--green-100); transition: background var(--dur-1) var(--ease), opacity var(--dur-2) var(--ease); }
.stage-edge:hover:not(:disabled) { background: rgba(211, 255, 233, .18); }
.stage-edge:disabled { opacity: .25; cursor: default; }
.stage-edge:focus-visible { box-shadow: var(--focus-ring-band); }
.stage-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(211, 255, 233, .08); }
.stage-progress span { display: block; height: 100%; background: var(--green-400); transition: width var(--dur-3) var(--ease); }

/* presenting: the bar floats over the stage and steps aside when still */
.teach.is-full .teach-bar { position: absolute; left: 0; right: 0; top: 0; box-shadow: var(--e3); }
.teach.is-full .teach-stage { padding: var(--s-3) var(--s-4) var(--s-5); }
.teach.is-full.is-idle .teach-bar { transform: translateY(-100%); opacity: 0; }
.teach.is-full.is-idle { cursor: none; }
.teach.is-full.is-idle .stage-edge { opacity: 0; }
body.presenting { overflow: hidden; }

.teach-panel { position: absolute; z-index: 20; top: calc(var(--topbar-h) + var(--s-3)); right: var(--s-4); width: 380px;
  max-height: calc(100vh - var(--topbar-h) - var(--s-8)); overflow: auto; background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--e4); padding: var(--s-4) var(--s-4) var(--s-5); animation: rise var(--dur-2) var(--ease); }
.teach-panel :focus-visible { box-shadow: var(--focus-ring); }
.tp-head { display: flex; align-items: center; margin-bottom: var(--s-2); }
.tp-head h2 { flex: 1; font: var(--t-h3); padding-left: var(--s-2); }
.tp-list, .tp-list ul { list-style: none; margin: 0; padding: 0; }
.tp-list button { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 36px; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-3);
  border: 0; border-radius: var(--r-sm); background: none; text-align: left; font: var(--t-body); color: var(--ink); }
.tp-list button:hover { background: var(--surface-quiet); }
.tp-list button.on { background: var(--surface-mint); color: var(--green-800); font-weight: var(--w-medium); }
.tp-list .caption { color: var(--muted); }
.tp-front button { padding-left: var(--s-3); }
.tp-lesson { padding-top: var(--s-3); margin-top: var(--s-2); border-top: 1px solid var(--line); }
.tp-lh { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-2) var(--s-1); }
.tp-lh b { flex: 1; font: var(--t-label); }
.tp-lh .caption { color: var(--muted); }
.tp-lesson ul button { padding-left: calc(26px + var(--s-5)); }
.tp-none { padding: 0 0 var(--s-1) calc(26px + var(--s-5)); color: var(--muted); }
.tp-keys { margin: 0 0 var(--s-4); display: flex; flex-direction: column; }
.tp-keys div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-items: center; padding: var(--s-2); border-top: 1px solid var(--line); }
.tp-keys div:first-child { border-top: 0; }
.tp-keys dt { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tp-keys dd { margin: 0; color: var(--ink); }
.teach-panel > .caption { color: var(--muted); padding: 0 var(--s-2); }

/* ---- book content: status ------------------------------------------------------ */
.cs-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-3); border-radius: var(--r-full);
  font: var(--t-caption); font-weight: var(--w-semibold); white-space: nowrap; }
.cs-chip.draft { background: var(--track); color: var(--ink); }
.cs-chip.reviewed { background: var(--surface-mint); color: var(--green-800); }
.cs-bar { display: inline-flex; width: 72px; height: 6px; border-radius: var(--r-full); background: var(--track); overflow: hidden; flex-shrink: 0; }
.cs-bar.big { width: 240px; height: 8px; }
.cs-bar span { height: 100%; }
.cs-bar .reviewed { background: var(--green-400); }
.on-band .cs-bar { background: rgba(211, 255, 233, .14); }
.cs-overall { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); color: var(--on-band-muted); }
.cs-overall b { color: var(--green-50); font-weight: var(--w-semibold); }

/* the list */
.cl-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.cl-nav { position: sticky; top: calc(var(--topbar-h) + var(--s-6)); max-height: calc(100vh - var(--topbar-h) - var(--s-12)); overflow: auto;
  padding: var(--s-4) var(--s-3); display: flex; flex-direction: column; gap: var(--s-4); }
.cl-nav-unit { display: flex; flex-direction: column; gap: 2px; }
.cl-nav-unit .eyebrow { padding: 0 var(--s-2) var(--s-1); font-size: 12px; }
.cl-nav-t { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--s-2); row-gap: 4px; align-items: start;
  padding: var(--s-2); border: 0; border-radius: var(--r-sm); background: none; text-align: left; font: var(--t-caption); font-size: 13px; color: var(--ink); }
.cl-nav-t:hover { background: var(--surface-quiet); }
.cl-nav-t .grow { overflow-wrap: anywhere; text-wrap: balance; line-height: 1.3; }
.cl-nav-t .caption { color: var(--muted); }
.cl-nav-t .cs-bar { grid-column: 2 / 4; width: 100%; height: 4px; }
.cl-nav-n { font-weight: var(--w-semibold); color: var(--muted); text-align: center; }
.cl-main { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.cl-tools { display: flex; align-items: center; gap: var(--s-4); }
.cl-tools .search { max-width: 360px; margin-left: auto; }
.cl-topic { scroll-margin-top: calc(var(--topbar-h) + var(--s-4)); }
.cl-topic-head { display: flex; align-items: flex-end; gap: var(--s-5); padding: var(--s-5) var(--s-6) var(--s-4); }
.cl-topic-head h2 { font: var(--t-h3); }
.cl-topic-head h2:focus { outline: none; }
.cl-topic-prog { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); font: var(--t-caption); color: var(--muted); }
.cl-topic-prog b { color: var(--ink); font-weight: var(--w-semibold); }
.cl-topic-prog .cs-bar { width: 160px; }
.cl-rows { list-style: none; margin: 0; padding: 0; }
.cl-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 18px; gap: var(--s-4); align-items: center;
  padding: var(--s-2) var(--s-6); border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background var(--dur-1) var(--ease); }
.cl-row:hover { background: var(--surface-quiet); }
.cl-row:hover .cl-name > .name { color: var(--primary); text-decoration: underline; }
.cl-row > svg { color: var(--muted); }
.cl-n { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-quiet); color: var(--muted); font: var(--t-caption); font-weight: var(--w-semibold); }
.cl-name { display: flex; flex-direction: column; min-width: 0; }
.cl-name > .name { font-weight: var(--w-medium); }
.cl-name .caption { color: var(--muted); }

/* one skill */
.cr-step { display: inline-flex; gap: var(--s-2); }
.hero .icon-btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.cr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-8); align-items: start; }
.cr-side { position: sticky; top: calc(var(--topbar-h) + var(--s-6)); display: flex; flex-direction: column; gap: var(--s-5);
  max-height: calc(100vh - var(--topbar-h) - var(--s-12)); overflow: auto; padding: 2px; margin: -2px; }
.cr-side > * { flex-shrink: 0; }
.cr-status { display: flex; flex-direction: column; gap: var(--s-3); }
.cr-seg { display: flex; }
.cr-seg button { flex: 1; height: 40px; }
.cr-seg button[aria-pressed="true"] { pointer-events: none; }
.cr-next { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.cr-next .caption { color: var(--muted); }
.cr-exlist .card-head { margin-bottom: var(--s-2); }

/* ---- all skills ---------------------------------------------------------------- */
.as-bar { display: inline-flex; width: 120px; height: 6px; border-radius: var(--r-full); background: var(--track); overflow: hidden; flex-shrink: 0; }
.as-bar.big { width: 240px; height: 8px; }
.as-bar span { height: 100%; }
.as-bar .m, .as-dot.m { background: var(--primary); }
.as-bar .s, .as-dot.s { background: var(--green-400); }
.as-dot { width: 9px; height: 9px; border-radius: var(--r-full); display: inline-block; }
.as-dot.n { box-shadow: inset 0 0 0 1.5px var(--control-line); }
.on-band .as-bar { background: rgba(211, 255, 233, .14); }
.on-band .as-bar .m, .on-band .as-dot.m { background: var(--green-100); }
.on-band .as-dot.n { box-shadow: inset 0 0 0 1.5px var(--on-band-muted); }
.as-overall { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); color: var(--on-band-muted); font: var(--t-caption); }
.as-overall b { color: var(--green-50); font-weight: var(--w-semibold); }
.as-k { display: inline-flex; align-items: center; gap: var(--s-2); }
.as-tools { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.as-unit-head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line); }
.as-unit-head h2 { font: var(--t-h2); flex: 1; }
.as-unit-head .caption { color: var(--muted); }
.as-unit-head .caption b { color: var(--ink); font-weight: var(--w-semibold); }
.as-topic { padding: var(--s-4) var(--s-6) var(--s-5); border-top: 1px solid var(--line); }
.as-unit-head + .as-topic { border-top: 0; }
.as-topic-head, .as-quiet summary { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.as-topic h3 { font: var(--t-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); flex: 1; }
.as-topic-head .caption { color: var(--muted); }
.as-quiet summary { cursor: pointer; list-style: none; margin: 0; padding: var(--s-1) 0; }
.as-quiet summary::-webkit-details-marker { display: none; }
.as-quiet summary h3 { color: var(--muted); flex: 0 1 auto; }
.as-quiet summary .caption { color: var(--muted); flex: 1; }
.as-show { display: inline-flex; align-items: center; gap: var(--s-1); font: var(--t-label); color: var(--primary); }
.as-quiet[open] .as-show svg { transform: rotate(180deg); }
.as-quiet[open] summary { margin-bottom: var(--s-3); }
.as-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s-8); }
.as-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 236px 32px; gap: var(--s-3); align-items: center; min-height: 44px;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-md); }
.as-row:hover { background: var(--surface-quiet); }
.as-row.is-mastered .as-name { color: var(--green-800); }
.as-name { color: var(--ink); text-decoration: none; font-weight: var(--w-medium); min-width: 0; }
a.as-name:hover { color: var(--primary); text-decoration: underline; }
.as-none { color: var(--muted); padding-right: var(--s-2); }
.as-row .icon-btn { color: var(--muted); }
.as-row:hover .icon-btn { color: var(--primary); }

/* ---- weekly email ---------------------------------------------------------------- */
.em-cols { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.em-side { position: sticky; top: calc(var(--topbar-h) + var(--s-6)); display: flex; flex-direction: column; gap: var(--s-4); }
.em-who { display: flex; }
.em-who button { flex: 1; }
.em-env { display: flex; flex-direction: column; gap: var(--s-5); }
.em-env dl { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.em-env dl div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-3); }
.em-env dt { font: var(--t-label); color: var(--muted); }
.em-env dd { margin: 0; overflow-wrap: anywhere; }
.em-env dd b { font-weight: var(--w-semibold); }
.em-actions { display: flex; flex-direction: column; gap: var(--s-3); }
.em-foot { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; color: var(--muted); padding: 0 var(--s-1); }
.em-preview { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e2); min-width: 0; }

/* ---- student page: the book's lessons (StudentPage BookCard) ------------------- */
.bk-lessons ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bk-lessons li > a, .bkl-empty { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s-2); align-items: center;
  min-height: 36px; padding: 2px var(--s-2); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.bk-lessons li > a:hover { background: var(--surface-quiet); }
.bk-lessons li > a:hover .bkl-name { color: var(--primary); }
.bk-lessons li.on > a { background: var(--surface-mint); }
.bkl-name { font: var(--t-caption); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkl-name .caption { color: var(--muted); }
.bkl-page { font: var(--t-caption); font-weight: var(--w-semibold); color: var(--muted); }
.bkl-empty { grid-template-columns: 32px minmax(0, 1fr); color: var(--muted); }
.sp-side { position: sticky; top: calc(var(--topbar-h) + var(--s-6)); }

/* the unit's syllabus name under its eyebrow in the topic list */
.cl-nav-uname { display: block; font: var(--t-caption); color: var(--muted); padding: 0 var(--s-2) var(--s-2); margin-top: calc(-1 * var(--s-1)); }

/* ---- teaching: the tablet (book B5, B6) ------------------------------------------ */
.sheet-wrap { position: relative; }
.sheet-ink { position: absolute; pointer-events: none; opacity: .5; mix-blend-mode: multiply; }
.tb-follow { gap: var(--s-2); }
.tb-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--on-band-muted); }
.tb-follow.on .tb-dot { background: var(--green-400); box-shadow: 0 0 0 3px rgba(91, 210, 154, .25); }
.teach-stage.has-prompts { padding-right: 396px; }
.teach-prompts { position: absolute; z-index: 5; right: var(--s-5); top: var(--s-5); width: 356px; max-height: calc(100% - var(--s-10)); overflow: auto;
  padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--e3); cursor: default;
  animation: rise var(--dur-2) var(--ease); }
.tpr-eyebrow { font: var(--t-caption); font-weight: var(--w-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.teach-prompts h2 { font: var(--t-h3); margin: var(--s-1) 0 var(--s-3); }
.teach-prompts ol { margin: 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); font: var(--t-body-lg); }
.teach-prompts li { padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); }
.teach-prompts li.on { background: var(--surface-mint); color: var(--green-800); }
.stage-sheet-note { position: absolute; left: 50%; top: var(--s-2); transform: translateX(-50%); padding: var(--s-1) var(--s-4); border-radius: var(--r-full);
  background: var(--amber-bg); color: var(--amber-text); font: var(--t-label); box-shadow: var(--e2); }
.teach-panel.tablet { width: 400px; }
.tp-status { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-2) var(--s-3); color: var(--muted); }
.tp-status.on { color: var(--green-800); }
.tp-dot { width: 10px; height: 10px; border-radius: var(--r-full); background: var(--track); box-shadow: inset 0 0 0 1px var(--control-line); }
.tp-status.on .tp-dot { background: var(--green-400); box-shadow: none; }
.tp-follow { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3); margin-bottom: var(--s-3); border-radius: var(--r-md);
  background: var(--surface-quiet); cursor: pointer; }
.tp-follow input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }
.tp-follow b { font-weight: var(--w-medium); }
.tp-qr { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-2); }
.tp-qr .qr { flex-shrink: 0; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line-strong); }
.tp-steps { margin: 0; font: var(--t-body-lg); }
.tp-url { padding: 0 var(--s-2) var(--s-2); color: var(--muted); }
.tp-off { padding: var(--s-3); margin-bottom: var(--s-3); border-radius: var(--r-md); background: var(--amber-bg); color: var(--amber-text); }
.teach-panel.tablet > .caption { padding: var(--s-2) var(--s-2) 0; }
/* round 2: the laptop says when Edvanced is down, when the book was
   regenerated, and when the Wi-Fi address changed */
.teach-bar .tb-icon.on { color: var(--green-50); }
.tb-down { display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-3); border-radius: var(--r-full);
  background: var(--amber-bg); color: var(--amber-text); font: var(--t-label); white-space: nowrap; }
.stage-regen { position: absolute; z-index: 6; left: 50%; top: var(--s-3); transform: translateX(-50%); display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5); border-radius: var(--r-full); background: var(--band); color: var(--on-band);
  box-shadow: var(--e3); cursor: default; --focus-shadow: var(--focus-ring-band); }
.stage-regen b { color: var(--green-50); font-weight: var(--w-semibold); }
.tp-status.down { color: var(--amber-text); }
.tp-status.down .tp-dot { background: var(--amber); box-shadow: none; }
.tp-moved { padding: var(--s-3); margin-bottom: var(--s-2); border-radius: var(--r-md); background: var(--amber-bg); color: var(--amber-text); }
.tp-rotate { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-2) var(--s-2); }
.tp-rotate .btn { gap: var(--s-1); flex-shrink: 0; }
.tp-rotate-ask { padding: var(--s-3); margin: 0 0 var(--s-2); border-radius: var(--r-md); background: var(--surface-quiet); }
.tp-rotate-row { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.teach-prompts h2 sup, .teach-prompts li sup { font-size: .7em; }

/* ---- book content: the student view (ContentReview.js, StudentView.js) ---- */
.cr-main { min-width: 0; }
.cr-view-bar { width: min(860px, 100%); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: calc(var(--s-3) - var(--s-8)); }
.cr-view-bar .caption { color: var(--muted); }
.sv-live { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 2 * var(--s-6)); min-height: 520px;
  border-radius: var(--r-lg); overflow: hidden; background: var(--canvas); box-shadow: var(--e3); }
.sv-live-head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5); background: var(--band); color: var(--on-band); }
.sv-live-head .btn { background: rgba(211, 255, 233, .14); color: var(--on-band); border-color: transparent; }
.sv-live-head .caption { color: var(--on-band-muted); }
.sv-live-title { font: var(--t-h3); margin: 0; }
.sv-live-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.sv-live-failed { padding: var(--s-6); color: var(--muted); }

/* ---- an interaction's student task (book v3 `task`), before its prompts ---- */
.live-task { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0; font: var(--t-body); }
.live-task-tag { flex-shrink: 0; padding: 2px 10px; border-radius: var(--r-full); background: var(--amber-bg); color: var(--amber-text);
  font: var(--t-caption); font-weight: var(--w-semibold); letter-spacing: .05em; text-transform: uppercase; }

/* ---- Book content: the teaching manual (ManualReview.js) ---- */
.mr-lesson { padding: var(--s-2) 0 var(--s-3); border-top: 1px solid var(--line); }
.mr-lesson:first-of-type { border-top: 0; }
.mr-lesson-h { display: block; padding: var(--s-3) var(--s-5) var(--s-1); }
.mr-bar { margin-bottom: var(--s-4); }
.mr-calc { display: flex; align-items: center; gap: var(--s-2); }
.mr-calc select { width: auto; }
.mr-frame-wrap { position: relative; width: min(860px, 100%); overflow: hidden; border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 36, 20, .12), var(--e3); }
.mr-frame-wrap.loading { background: linear-gradient(90deg, var(--track) 0%, var(--green-50) 50%, var(--track) 100%); background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite; }
.mr-frame { display: block; border: 0; transform-origin: 0 0; }
/* the card names: a plain list in the card's padding */
.mr-cards { list-style: none; margin: 0; padding: 0 var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.mr-src { padding: 0 var(--s-2); }
.mr-src code { font-size: 12px; }

/* a planned skill with no page in the teaching manual: left out of the printed book */
.bb-nopage, .br-missing { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--amber-text); font-size: 12.5px; }
.br-missing { display: block; font-size: 13.5px; }
.br-missing svg { vertical-align: -3px; margin-right: var(--s-1); }

/* an interaction opened from a page: the whole window, as on the board (over the top bar and any banner) */
.mr-live { position: fixed; inset: 0; z-index: 60; background: var(--surface); padding: var(--s-4) var(--s-6) var(--s-6); display: flex; }
.mr-live .sv-live { flex: 1; height: auto; min-height: 0; }

/* ===================================================== plan the term == */
/* the skill picker (SkillPicker.js): units, their topics, their skills */
.sp { display: flex; flex-direction: column; }
.sp-tools { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
  position: sticky; top: var(--topbar-h); z-index: 2; background: var(--surface); }
.sp.compact .sp-tools { top: 0; padding: 0 0 var(--s-3); }
.sp-none { padding: var(--s-4) var(--s-5); }
.sp-tick { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }
.sp-tick:disabled { cursor: default; }
.sp-unit { border-bottom: 1px solid var(--line); }
.sp-unit:last-child { border-bottom: 0; }
.sp-unit-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); background: var(--surface-quiet); }
.sp-unit-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--s-3); padding: 0; border: 0; background: none;
  text-align: left; color: var(--ink); cursor: pointer; }
.sp-unit-name b { font: var(--t-h3); white-space: nowrap; }
.sp-unit-name .caption { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-count { color: var(--muted); white-space: nowrap; }
.sp-topics, .sp-skills { list-style: none; margin: 0; padding: 0; }
.sp-topic { border-top: 1px solid var(--line); }
.sp-topic:first-child { border-top: 0; }
.sp-topic-head { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-5) 0 calc(var(--s-5) + var(--s-6)); }
.sp-topic-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: var(--s-2) 0;
  border: 0; background: none; text-align: left; color: var(--ink); font: var(--t-body); cursor: pointer; }
.sp-topic-name > span:first-child { flex: 1; min-width: 0; }
.sp-topic-name:disabled { cursor: default; }
.sp-topic-name svg { color: var(--muted); flex-shrink: 0; }
.sp-topic-name:hover:not(:disabled) > span:first-child { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.sp-skills { padding: 0 var(--s-5) var(--s-2) calc(var(--s-5) + var(--s-12)); }
.sp-skill { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding: var(--s-1) var(--s-3); border-radius: var(--r-md); cursor: pointer; }
.sp-skill:hover { background: var(--surface-quiet); }
.sp-skill.on { background: var(--surface-mint); }
.sp-skill.fixed { cursor: default; background: none; color: var(--muted); }
.sp-skill-name { flex: 1; min-width: 0; }
.sp-cards { color: var(--muted); white-space: nowrap; min-width: 56px; text-align: right; }
.sp-nopage { color: var(--amber-text); white-space: nowrap; }

/* the page (TermPlan.js): the picker, and the summary and two ways on beside it */
.tp-note { margin: 0 0 var(--s-5); }
.tp-note a { color: inherit; font-weight: var(--w-semibold); }
.tp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); align-items: start; }
.tp-pick-head { display: flex; flex-direction: column; gap: 2px; padding: var(--s-5) var(--s-5) 0; }
.tp-pick-head h2 { font: var(--t-h2); }
.tp-pick-head .caption { color: var(--muted); }
.card.flush.tp-pick { overflow: clip; }   /* clip, not hidden, so the search stays pinned while the list scrolls */
.tp-pick .sp-tools { border-top: 0; }
.tp-side { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); display: flex; flex-direction: column; gap: var(--s-4);
  max-height: calc(100vh - var(--topbar-h) - var(--s-8)); overflow: auto; }
.tp-sum { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.tp-total { display: flex; align-items: baseline; gap: var(--s-2); }
.tp-total b { font: var(--t-display); font-weight: var(--w-light); line-height: 1; }
.tp-total span { color: var(--muted); }
.tp-warn { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--amber-bg); color: var(--amber-text); font: var(--t-caption); }
.tp-warn svg { flex-shrink: 0; margin-top: 2px; }
.tp-chosen { list-style: none; margin: var(--s-2) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-3);
  max-height: 260px; overflow: auto; }
.tp-chosen > li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-2); }
.tp-chosen > li > b { font-weight: var(--w-semibold); }
.tp-chosen ul { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-chosen ul li { display: flex; justify-content: space-between; gap: var(--s-3); font: var(--t-caption); color: var(--muted); }
.tp-way { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); }
.tp-way-head { display: flex; align-items: center; gap: var(--s-3); }
.tp-way-head .ed-tile { transform: rotate(-4deg); }
.tp-way-head h2 { font: var(--t-h3); }
.tp-way p { margin: 0; }
.tp-len { font: var(--t-caption); color: var(--muted); }
.tp-len b { font: var(--t-label); font-size: 15px; color: var(--ink); margin-right: 2px; }
@media (max-width: 1100px) {
  .tp-cols { grid-template-columns: minmax(0, 1fr); }
  .tp-side { position: static; max-height: none; }
}

/* the builder's Choose skills dialog */
.dialog.bb-choose { width: min(880px, calc(100vw - 48px)); gap: var(--s-3); }
.bb-choose h2 { font: var(--t-h2); }
.bb-choose > p { margin: 0; }
.bb-choose-body { max-height: min(62vh, 640px); overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.bb-choose-body .sp-tools { position: sticky; top: 0; }
.bb-choose-foot { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.bb-add-row2 { display: flex; gap: var(--s-3); }
.bb-add-row2 .bb-add-btn { flex: 1; }