/* CollegeStones - block stylesheet, base layer (plan 05-04; UI-SPEC 4.3, 4.4, 4.6, 11).
   First file of site/blocks.css. The build concatenates design/blocks/css/ in a fixed order and no later plan edits that order:
     base.css, app-core.css, marketing.css, app.css, counselor.css, admin.css, server.css
   (a file that does not exist yet is skipped). The result is linked by every built page after tokens.css.

   LEGACY PAGES MUST NOT MOVE. Every rule below is scoped to block markup: pages built from blocks put class="b-page" on <body>
   (server-rendered pages and previews do the same), and every block class starts with "b-". A page that is not rebuilt yet has
   neither, so this file cannot restyle it (D-26, D-27). Do not add a bare element selector here.

   Role tokens only, no hex (tokens.json is the one value source). Block authors:
   - Breakpoints are min-width first and exactly these four: 561px, 768px, 1024px, 1280px. Base styles target 320px. CSS cannot
     read variables in a media query, so the values are written out; a source guard rejects any other media query in block CSS.
   - Never write outline:none or outline:0 (one focus ring, below). Never put a bare element selector outside .b-page.
   - Animate opacity and transform only, with --dur-fast / --dur-base / --dur-slow and --ease-out; translate by var(--b-shift). */

/* ---- Scope root: reset, ground, text, motion variables ---- */
.b-page {
  /* motion: the duration and easing the blocks use; --b-shift is the distance anything slides (zero under reduced motion) */
  --dur-fast: var(--dur-1);
  --dur-base: var(--dur-2);
  --dur-slow: var(--dur-3);
  --ease-out: var(--ease);
  --b-shift: 8px;

  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}
.b-page, .b-page *, .b-page *::before, .b-page *::after { box-sizing: border-box; }
.b-page img, .b-page video { max-width: 100%; height: auto; }

/* Long names, emails and org names wrap instead of widening the page (11: Reflow). */
.b-wrap { overflow-wrap: anywhere; }

/* Children of a layout block must be allowed to shrink below their content width, or one long word forces horizontal scroll. */
.b-page :where(.b-grid, .b-split, .b-cluster) > * { min-width: 0; }

/* ---- The one focus ring (D-26): 3px, 2px offset; on primary-filled grounds the ring is the on-primary colour ---- */
.b-page :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.b-page .b-on-primary:focus-visible,
.b-page .b-on-primary :focus-visible {
  outline-color: var(--on-primary);
}

/* ---- Skip link: first focusable element on the page, hidden until focused, then top-left on --surface with the ring ---- */
.b-skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.b-skip {
  position: absolute;
  z-index: 100;
  inset-block-start: var(--s-2);
  inset-inline-start: var(--s-2);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-4);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r-sm);
  font-weight: 700;
  text-decoration: underline;
}
.b-skip:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- Reduced motion (4.6): transitions near zero, nothing translates ---- */
@media (prefers-reduced-motion: reduce) {
  .b-page { --b-shift: 0px; scroll-behavior: auto; }
  .b-page, .b-page *, .b-page *::before, .b-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Shared primitives (plan 05-05; UI-SPEC 4.3-4.6, 5.3, 11). Second file of site/blocks.css, after base.css. Marketing blocks, app pages and
   server-rendered pages all draw from this one set (D-19, D-26). Plan 05-11 owns later edits to this file; 05-10 must not edit it.
   Rules (source-guarded by server/blocks.test.ts and server/assetManifest.test.ts):
   - every selector starts with .b-; role tokens only, never a hex value, never a direction-specific number
   - min-width first; the only media queries are min-width 561 / 768 / 1024 / 1280 and prefers-reduced-motion
   - spacing from --s-1, --s-2, --s-4, --s-5, --s-6, --s-7, --s-8 only (not --s-3, --s-9, --s-10)
   - 44px minimum hit area on every control; 48px minimum height on text inputs and primary buttons; 16px text in inputs
   - never outline:none (base.css owns the one focus ring); only opacity and transform animate */

/* ---- Type scale and layout variables: four sizes, two weights (400, 700). Marketing blocks use the -m fluid pair. ---- */
.b-page {
  --b-fs-small: 0.875rem;
  --b-fs-body: 1rem;
  --b-fs-heading: 1.5rem;
  --b-fs-display: 2rem;
  --b-fs-heading-m: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --b-fs-display-m: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
  --b-lh-small: 1.45;
  --b-lh-body: 1.6;
  --b-lh-heading: 1.25;
  --b-lh-display: 1.1;
  --b-app-maxw: 960px;
  --header-h: 56px;
  font-size: var(--b-fs-body);
  line-height: var(--b-lh-body);
  font-weight: 400;
}

@media (min-width: 561px) {
  .b-page { --header-h: 64px; }
}

/* A hidden attribute always wins over a display rule (price states and block states rely on it). */
.b-page [hidden] { display: none !important; }

.b-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Layout hooks (base.css lets their children shrink) ---- */
.b-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.b-split { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.b-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.b-stack > * + * { margin-block-start: var(--s-4); }
@media (min-width: 768px) {
  .b-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
}

/* ---- Headings, eyebrow, links ---- */
.b-h1 { margin: 0; font-size: var(--b-fs-display); font-weight: 700; line-height: var(--b-lh-display); letter-spacing: -0.01em; }
.b-h2 { margin: 0 0 var(--s-5); font-size: var(--b-fs-heading-m); font-weight: 700; line-height: var(--b-lh-heading); letter-spacing: -0.01em; }
.b-h3 { margin: 0 0 var(--s-2); font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); letter-spacing: -0.01em; }
.b-eyebrow {
  margin: 0 0 var(--s-2);
  color: var(--text-muted);
  font-size: var(--b-fs-small);
  font-weight: 700;
  line-height: var(--b-lh-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.b-link { color: var(--primary); text-decoration: underline; text-underline-offset: 0.15em; }
.b-link:hover { color: var(--primary-700); }
.b-muted { color: var(--text-muted); }

/* ---- Buttons (A: UI-SPEC 4.5, 5.3): 44px hit area, primary 48px ---- */
.b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--b-fs-body);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.b-btn:active { transform: translateY(1px); }
.b-btn--primary { min-height: 48px; background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.b-btn--primary:hover { background: var(--primary-700); border-color: var(--primary-700); }
.b-btn--ghost { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.b-btn--ghost:hover { background: var(--surface-2); }
/* The accent carries ink text (two-role structure, D-31). Reserved uses only (UI-SPEC 4.5): style tiles and the editor swatch. */
.b-btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.b-btn--accent:hover { opacity: 0.92; }
/* The destructive confirm: outlined, never filled (UI-SPEC 4.5, 7.5). */
.b-btn--danger { background: var(--surface); border-color: var(--alert); color: var(--alert); }
.b-btn--danger:hover { background: var(--alert-tint); }
.b-btn--block { width: 100%; }
.b-btn[disabled], .b-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.b-btn[aria-busy="true"] { opacity: 0.8; cursor: progress; }
@media (min-width: 561px) {
  .b-btn--block { width: auto; }
}

/* ---- Fields (A-12): a visible label, help and error tied by aria-describedby, 48px / 16px inputs ---- */
.b-field { display: flex; flex-direction: column; gap: var(--s-2); margin-block-end: var(--s-4); }
.b-field__label { font-size: var(--b-fs-body); font-weight: 700; line-height: var(--b-lh-small); }
.b-input, .b-select, .b-textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.25;
}
.b-textarea { min-height: 8rem; padding: var(--s-2) var(--s-4); line-height: var(--b-lh-body); resize: vertical; }
.b-input[aria-invalid="true"], .b-select[aria-invalid="true"], .b-textarea[aria-invalid="true"] {
  border-color: var(--alert);
  box-shadow: inset 0 0 0 1px var(--alert);
}
.b-field__help { margin: 0; color: var(--text-muted); font-size: var(--b-fs-small); line-height: var(--b-lh-small); }
.b-field__error { margin: 0; color: var(--alert); font-size: var(--b-fs-small); font-weight: 700; line-height: var(--b-lh-small); }
/* A honeypot for bots: off-screen, never a control a person meets. */
.b-hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Cards, tags, notices, empty state ---- */
.b-card {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow-wrap: anywhere;
}
@media (min-width: 561px) {
  .b-card { padding: var(--s-5); }
}

/* Status is a word AND a shape; colour only reinforces it. The shape is drawn by ::before so the word stays the accessible text. */
.b-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--b-fs-small);
  font-weight: 700;
  line-height: var(--b-lh-small);
}
.b-tag--ok, .b-tag--warn, .b-tag--alert, .b-tag--info { padding-inline-start: var(--s-2); }
.b-tag--ok::before, .b-tag--warn::before, .b-tag--alert::before, .b-tag--info::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  background: currentColor;
}
.b-tag--ok { background: var(--ok-tint); color: var(--ok); }
.b-tag--ok::before { border-radius: 50%; }
.b-tag--warn { background: var(--warn-tint); color: var(--warn); }
.b-tag--warn::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.b-tag--alert { background: var(--alert-tint); color: var(--alert); }
.b-tag--alert::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.b-tag--info { background: var(--info-tint); color: var(--info); }
.b-tag--info::before { border-radius: 2px; }

.b-notice {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line-strong);
  border-inline-start-width: 4px;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
}
.b-notice__icon { flex: none; width: 24px; height: 24px; }
.b-notice__text { min-width: 0; overflow-wrap: anywhere; }
.b-notice__title { margin: 0 0 var(--s-1); font-weight: 700; }
.b-notice__title:empty, .b-notice__action:empty { display: none; }
.b-notice__body > :first-child { margin-block-start: 0; }
.b-notice__body > :last-child { margin-block-end: 0; }
.b-notice__action { margin-block-start: var(--s-2); }
.b-notice--info { background: var(--info-tint); border-color: var(--info); }
.b-notice--info .b-notice__icon { color: var(--info); }
.b-notice--ok { background: var(--ok-tint); border-color: var(--ok); }
.b-notice--ok .b-notice__icon { color: var(--ok); }
.b-notice--warn { background: var(--warn-tint); border-color: var(--warn); }
.b-notice--warn .b-notice__icon { color: var(--warn); }
.b-notice--alert { background: var(--alert-tint); border-color: var(--alert); }
.b-notice--alert .b-notice__icon { color: var(--alert); }

.b-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-7) var(--s-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
}
.b-empty__title { margin: 0; font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); }
.b-empty__body { margin: 0; max-width: var(--measure); color: var(--text-muted); }
.b-empty__action { margin-block-start: var(--s-2); }

/* ---- Progress ---- */
.b-progress { display: flex; align-items: center; gap: var(--s-2); font-size: var(--b-fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.b-progress__track { flex: 1; min-width: 0; height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.b-progress__fill { display: block; height: 100%; background: var(--primary); }

/* ---- Stone card (A-04): crossed / current / ahead / content-pending. The status WORD is always in the markup. ---- */
.b-stone-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  padding-inline-start: var(--s-6);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--b-yr, var(--line-strong));
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  overflow-wrap: anywhere;
}
.b-stone-card::before {
  content: "";
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-start: var(--s-2);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: var(--surface);
}
.b-stone-card__when { color: var(--text-muted); font-size: var(--b-fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.b-stone-card__title { margin: 0; font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); }
.b-stone-card__status { align-self: flex-start; }
.b-stone-card[data-state="crossed"]::before { background: var(--primary); }
/* The one accent use here: the "you are here" marker (UI-SPEC 4.5, accent use 1). */
.b-stone-card[data-state="current"] { border-color: var(--primary); }
.b-stone-card[data-state="current"]::before { background: var(--lime-mark, var(--accent)); border-color: var(--text); }
.b-stone-card[data-state="pending"] { border-style: dashed; }
@media (min-width: 561px) {
  .b-stone-card { padding: var(--s-5); padding-inline-start: var(--s-7); }
  .b-stone-card::before { inset-block-start: var(--s-5); inset-inline-start: var(--s-4); }
}

/* ---- Checklist (A-06): 48px rows, a tick plus a hidden "done" word, the label is never struck through ---- */
.b-checklist { margin: 0; padding: 0; list-style: none; }
.b-checklist__item { border-block-end: 1px solid var(--line); }
.b-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 48px;
  padding-block: var(--s-2);
  cursor: pointer;
}
/* The native input stays in the page, focusable and 44px, but is not painted: the box beside it is. */
.b-check__input { position: absolute; inset-block-start: 50%; inset-inline-start: 0; width: 44px; height: 44px; margin: 0; opacity: 0; transform: translateY(-50%); cursor: pointer; }
.b-check__box {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin-inline: 10px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.b-check__input:focus-visible + .b-check__box { outline: 3px solid var(--focus); outline-offset: 2px; }
.b-check__input:checked + .b-check__box { background: var(--primary); border-color: var(--primary); }
.b-check__input:checked + .b-check__box::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 7px;
  width: 6px;
  height: 12px;
  border: solid var(--on-primary);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.b-check__label { min-width: 0; overflow-wrap: anywhere; }
.b-checklist__item[data-state="saving"] { opacity: 0.7; }
.b-checklist__error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-2); padding-inline-start: 44px; color: var(--alert); font-size: var(--b-fs-small); font-weight: 700; }

/* ---- Conversation prompts (A-07) ---- */
.b-conversation { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-4); }
.b-conversation__intro { margin: 0 0 var(--s-4); }
.b-conversation__prompt {
  padding: var(--s-4);
  border-inline-start: 3px solid var(--primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-2);
  overflow-wrap: anywhere;
}

/* ---- Table (A-11): stacks into label/value cards under 561px; a 2-D grid uses the labelled scroll region ---- */
.b-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.b-table, .b-table tbody, .b-table tr, .b-table td { display: block; }
.b-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.b-table tr { margin-block-end: var(--s-4); padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.b-table td { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; overflow-wrap: anywhere; }
.b-table td::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--text-muted); font-size: var(--b-fs-small); font-weight: 700; }
.b-table caption { text-align: start; font-weight: 700; padding-block-end: var(--s-2); }
.b-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.b-table-scroll .b-table { min-width: 36rem; }
@media (min-width: 561px) {
  .b-table { display: table; }
  .b-table thead { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; display: table-header-group; }
  .b-table tbody { display: table-row-group; }
  .b-table tr { display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .b-table td, .b-table th { display: table-cell; padding: var(--s-2) var(--s-4); border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
  .b-table td::before { content: none; }
  .b-table th { background: var(--surface-2); font-size: var(--b-fs-small); font-weight: 700; }
}

/* ---- Dialog (A-15): the native element; a full-screen sheet on phones, a centred card from 561px ---- */
.b-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--s-5) var(--s-4);
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  overflow-y: auto;
}
.b-dialog::backdrop { background: var(--scrim); }
.b-dialog__title { margin: 0 0 var(--s-4); font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); }
.b-dialog__body { margin: 0 0 var(--s-5); overflow-wrap: anywhere; }
.b-dialog__actions { display: flex; flex-direction: column-reverse; gap: var(--s-2); }   /* DOM order is cancel, then confirm: the confirm sits on top on a phone */
@media (min-width: 561px) {
  .b-dialog { width: min(32rem, calc(100% - 2 * var(--s-4))); height: fit-content; max-height: calc(100% - 2 * var(--s-4)); margin: auto; padding: var(--s-5); border-radius: var(--r-md); box-shadow: var(--shadow-md); }
  .b-dialog__actions { flex-direction: row; justify-content: flex-end; flex-wrap: wrap; }
}

/* ---- Article (A-19): 66ch measure ---- */
.b-article { max-width: var(--measure); overflow-wrap: anywhere; }
.b-article h1 { margin: 0 0 var(--s-4); font-size: var(--b-fs-display); font-weight: 700; line-height: var(--b-lh-display); letter-spacing: -0.01em; }
.b-article h2 { margin: var(--s-6) 0 var(--s-2); font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); letter-spacing: -0.01em; }
.b-article h3 { margin: var(--s-5) 0 var(--s-2); font-size: var(--b-fs-body); font-weight: 700; }
.b-article p, .b-article li { font-size: var(--b-fs-body); line-height: var(--b-lh-body); }
.b-article p { margin: 0 0 var(--s-4); }
.b-article ul, .b-article ol { margin: 0 0 var(--s-4); padding-inline-start: var(--s-5); }
.b-article a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.15em; }
.b-article blockquote { margin: 0 0 var(--s-4); padding-inline-start: var(--s-4); border-inline-start: 3px solid var(--line-strong); color: var(--text-muted); }

/* Marketing blocks (plan 05-05; UI-SPEC 4.3-4.6, 5.2, 11). Third file of site/blocks.css, after base.css and app-core.css.
   Rules for this file (source-guarded by server/blocks.test.ts and server/assetManifest.test.ts):
   - every selector starts with .b-; role tokens only, never a hex value, never a direction-specific number
   - min-width first; the only media queries are min-width 561 / 768 / 1024 / 1280 and prefers-reduced-motion
   - spacing from --s-1, --s-2, --s-4, --s-5, --s-6, --s-7, --s-8 only (not --s-3, --s-9, --s-10)
   - never outline:none; only opacity and transform animate
   - every grid child may shrink: grids use minmax(0, 1fr) or min(100%, N), children carry min-width: 0 */

/* ---- Shared page scaffolding for marketing pages (type and header variables live in app-core.css) ---- */
.b-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 561px) {
  .b-container { padding-inline: var(--s-5); }
}

/* ---- M-01 site-header: the reference light header (05.1-07, D-06), on role tokens ---- */
.b-site-header {
  position: relative;
  background: color-mix(in srgb, var(--ground) 85%, transparent);
  border-block-end: 1px solid var(--line);
}
.b-site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
}
.b-site-header__home {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  flex-shrink: 0;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
/* The product mark is the owner's logo image and never takes an org colour. */
.b-site-header__home .mark {
  flex: none;
  width: clamp(40px, 4.4vw, 80px);
  height: clamp(40px, 4.4vw, 80px);
}
.b-site-header__word { font-weight: 900; letter-spacing: -0.03em; font-size: clamp(1.15rem, 3vw, 3rem); line-height: 1.1; white-space: nowrap; }

.b-site-header__nav { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-5); }
.b-site-header__nav > a,
.b-site-header__end a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.15vw, 1.45rem);
  text-decoration: none;
  white-space: nowrap;
}
.b-site-header__nav > a:hover { color: var(--text); }
.b-site-header__nav > a[aria-current="page"] { color: var(--primary); }
/* The Log in oval (D-06): 1.5px outline, 14px 32px padding, pill radius. Hover fills it. */
.b-site-header__end { display: inline-flex; flex-shrink: 0; margin-inline-start: var(--s-2); }
.b-site-header__end a {
  padding: 14px 32px;
  border: 1.5px solid var(--primary);
  border-radius: var(--r-pill);
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}
.b-site-header__end a:hover { background: var(--primary); color: var(--on-primary); }
/* Phones: only the Log in oval stays in the header; the same links are in the footer. */
.b-site-header__nav > a { display: none; }
@media (min-width: 561px) {
  .b-site-header__nav > a { display: inline-flex; }
}

/* ---- M-14 prose ---- */
.b-prose {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: var(--s-8);
  overflow-wrap: anywhere;
  color: var(--text);
}
.b-prose__title {
  margin: 0 0 var(--s-2);
  font-size: var(--b-fs-display-m, clamp(2rem, 1.3rem + 3.2vw, 3.5rem));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.b-prose__body > :first-child { margin-block-start: 0; }
.b-prose__body h2 {
  margin: var(--s-6) 0 var(--s-2);
  font-size: var(--b-fs-heading-m, clamp(1.5rem, 1.2rem + 1.2vw, 2rem));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.b-prose__body p,
.b-prose__body li {
  font-size: 1rem;
  line-height: 1.6;
}
.b-prose__body p { margin: 0 0 var(--s-4); }
.b-prose__body ul,
.b-prose__body ol { margin: 0 0 var(--s-4); padding-inline-start: var(--s-5); }
.b-prose__body li { margin-block: var(--s-1); }
.b-prose__body a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.15em; }
.b-prose__body strong { font-weight: 700; }
.b-prose__lead { font-size: 1.125rem; }
.b-prose__meta { color: var(--text-muted); font-size: 0.875rem; line-height: 1.45; }
/* The draft marker keeps its words; this is a tag, not a banner. Word plus shape, never colour alone. */
.b-prose__flag {
  display: inline-block;
  padding: var(--s-1) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
}

/* ---- M-18 site-footer: the reference footer (05.1-07, D-08) ---- */
.b-site-footer {
  padding-block: var(--s-8);
  background: var(--ground);
  border-block-start: 1px solid var(--line);
  color: var(--text);
}
.b-site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-8); }
.b-site-footer__brand { max-width: 340px; min-width: 0; }
.b-site-footer__logo { font-weight: 900; font-size: 1.375rem; letter-spacing: -0.01em; color: var(--primary); text-decoration: none; }
.b-site-footer__tag { margin: var(--s-2) 0 0; color: var(--text-muted); font-size: 0.875rem; line-height: 1.55; }
.b-site-footer__cols { display: flex; flex-wrap: wrap; gap: var(--s-8); min-width: 0; }
.b-site-footer__col { display: flex; flex-direction: column; min-width: 132px; }
.b-site-footer__col ul { margin: 0; padding: 0; list-style: none; }
.b-site-footer__head { margin: 0 0 var(--s-1); color: var(--text); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.b-site-footer__col a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 32px;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.b-site-footer__col a:hover { color: var(--primary); }
/* the reference inner-page footer (variant=minimal): one row, links left, the quiet line right */
.b-site-footer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.b-site-footer__fnav { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.b-site-footer__fnav a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-muted); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.b-site-footer__fnav a:hover { color: var(--text); }
.b-site-footer__addr { margin: 0; color: var(--text-muted); font-size: 0.875rem; font-style: normal; line-height: 1.6; }
.b-site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
}
.b-site-footer__quiet { color: var(--text-muted); font-size: 0.75rem; }

/* ---- Sections ---- */
.b-section { padding-block: var(--s-8); }
.b-section > .b-container > :last-child { margin-block-end: 0; }

/* ---- M-20 page-intro ---- */
.b-page-intro { padding-block: var(--s-7) var(--s-5); }
.b-page-intro__title { margin: 0 0 var(--s-2); font-size: var(--b-fs-display-m); font-weight: 700; line-height: var(--b-lh-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.b-page-intro__lede { max-width: var(--measure); margin: 0; font-size: 1.125rem; line-height: var(--b-lh-body); }
.b-page-intro__lede:empty { display: none; }

/* ---- M-02 hero ---- */
.b-hero { padding-block: var(--s-7) var(--s-8); background: var(--ground); }
.b-hero__inner { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
.b-hero__copy { min-width: 0; }
.b-hero__title { margin: 0 0 var(--s-4); font-size: var(--b-fs-display-m); font-weight: 700; line-height: var(--b-lh-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.b-hero__lede { max-width: var(--measure); margin: 0 0 var(--s-5); font-size: 1.125rem; line-height: var(--b-lh-body); }
.b-hero__actions { display: flex; flex-direction: column; gap: var(--s-2); }
.b-hero__media { min-width: 0; }
.b-hero__media:empty { display: none; }
.b-hero__media img { display: block; width: 100%; border-radius: var(--r-lg); }
@media (min-width: 561px) {
  .b-hero__actions { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 768px) {
  .b-hero { padding-block: var(--s-8); }
  .b-hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-7); }
  .b-hero__inner:has(> .b-hero__media:empty) { grid-template-columns: minmax(0, 1fr); }
}

/* ---- M-03 price-slot: state A is what ships; state B appears only when cs-price.js removes the hidden attributes ---- */
.b-price { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.b-price__cta { width: 100%; }
.b-price__quote { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
.b-price__amt { font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); font-variant-numeric: tabular-nums; }
.b-price__cap { color: var(--text-muted); font-size: var(--b-fs-small); line-height: var(--b-lh-small); }
.b-price__alt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.b-price__note { margin: 0; color: var(--text-muted); font-size: var(--b-fs-small); line-height: var(--b-lh-small); }
@media (min-width: 561px) {
  .b-price__cta { width: auto; }
}

/* ---- M-04 how-it-works ---- */
.b-steps { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: b-step; }
.b-steps > li {
  position: relative;
  min-width: 0;
  padding-inline-start: calc(40px + var(--s-4));
  counter-increment: b-step;
  overflow-wrap: anywhere;
}
.b-steps > li::before {
  content: counter(b-step);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.b-steps h3 { margin: 0 0 var(--s-1); font-size: var(--b-fs-body); font-weight: 700; line-height: var(--b-lh-heading); }
.b-steps p { margin: 0; }
.b-how--compact .b-steps { gap: var(--s-4); }
@media (min-width: 768px) {
  .b-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
  .b-steps > li { padding-inline-start: 0; padding-block-start: calc(40px + var(--s-4)); }
}

/* ---- M-05 stone-path ---- */
.b-pathblock__grid { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.b-pathblock__main, .b-pathblock__focus { min-width: 0; }
.b-path { position: relative; max-height: 26rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.b-path__list { margin: 0; padding: var(--s-4); list-style: none; }
.b-path__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: 0 0 var(--s-4) var(--s-6);
  border-inline-start: 2px solid var(--line-strong);
  margin-inline-start: var(--s-2);
  overflow-wrap: anywhere;
}
.b-path__item:last-child { padding-block-end: 0; border-inline-start-color: transparent; }
.b-path__item::before {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: var(--surface);
}
.b-path__item[data-state="crossed"]::before { background: var(--primary); }
/* The accent marker: the only accent use in this block (UI-SPEC 4.5, accent use 1). */
.b-path__item[data-state="current"]::before { background: var(--lime-mark, var(--accent)); border-color: var(--text); }
.b-path__when { color: var(--text-muted); font-size: var(--b-fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.b-path__title { font-weight: 700; }
.b-path__status { color: var(--text-muted); font-size: var(--b-fs-small); }
.b-path__item[data-state="current"] .b-path__status { color: var(--text); font-weight: 700; }
.b-pathblock__focus { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-4); }
.b-pathblock__focus:empty { display: none; }
.b-pathblock__focus h3 { margin: 0 0 var(--s-1); font-size: var(--b-fs-body); font-weight: 700; }
.b-pathblock__focus p { margin: 0; }
@media (min-width: 1024px) {
  .b-pathblock__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-7); }
  .b-path { max-height: 32rem; }
}

/* ---- M-06 proof-artifacts: stacked without JS and on phones; manual tabs from 561px once the block's script runs ---- */
.b-proof__items { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.b-proof__item { min-width: 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow-wrap: anywhere; }
.b-proof__fig { margin: 0 0 var(--s-4); }
.b-proof__fig img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); }
.b-proof__name { margin: 0 0 var(--s-1); font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); }
.b-proof__src { margin: 0 0 var(--s-2); color: var(--text-muted); font-size: var(--b-fs-small); font-weight: 700; }
.b-proof__body { margin: 0; }
.b-proof__tabs { display: none; }
@media (min-width: 561px) {
  .b-proof[data-tabs-ready] .b-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--s-6); align-items: start; }
  .b-proof[data-tabs-ready] .b-h2 { grid-column: 1 / -1; }
  .b-proof[data-tabs-ready] .b-proof__tabs { display: flex; flex-direction: column; gap: var(--s-2); grid-column: 1; grid-row: 2; }
  .b-proof[data-tabs-ready] .b-proof__items { grid-column: 2; grid-row: 2; }
  .b-proof__tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
    min-height: 44px;
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  .b-proof__tab[aria-selected="true"] { border-color: var(--primary); background: var(--surface-2); }
  .b-proof__tab-name { font-weight: 700; }
  .b-proof__tab-src { color: var(--text-muted); font-size: var(--b-fs-small); }
  .b-proof[data-tabs-ready] .b-proof__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---- M-07 goal-routes ---- */
.b-routes__grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.b-route { min-width: 0; }
.b-route h3 { margin: 0 0 var(--s-2); font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); }
.b-route p { margin: 0 0 var(--s-2); }
.b-route__traits { margin: 0; padding-inline-start: var(--s-5); }
.b-routes__coda { margin-block-start: var(--s-5); color: var(--text-muted); }
.b-routes__coda:empty { display: none; }
.b-routes__coda > :first-child { margin-block-start: 0; }
.b-routes__coda > :last-child { margin-block-end: 0; }
@media (min-width: 768px) {
  .b-routes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
}

/* ---- M-08 cta-band and M-09 counselor-band ---- */
.b-band { padding-block: var(--s-7); background: var(--surface-2); }
.b-band__inner { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: center; }
.b-band__copy, .b-band__action { min-width: 0; }
.b-band .b-h2 { margin-block-end: var(--s-2); }
.b-band__body:empty { display: none; }
.b-band__body > :first-child { margin-block-start: 0; }
.b-band__body > :last-child { margin-block-end: 0; }
@media (min-width: 768px) {
  .b-band__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-7); }
}

.b-counselor-band { padding-block: var(--s-5); border-block: 1px solid var(--line); background: var(--surface); }
.b-counselor-band__inner { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: center; }
.b-counselor-band__line { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .b-counselor-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); }
}

/* ---- M-08 cta-band, variant demo (07-13, PD-1): an offer of a demo built for the reader; the band's own layout, a touch more air above the button ---- */
.b-band--demo .b-band__action .b-btn { max-width: 24rem; }
.b-band--demo .b-band__body { max-width: var(--measure); overflow-wrap: anywhere; }

/* ---- M-09 counselor-band, optional second link (07-13) ---- */
.b-counselor-band__action:has(> * + *) { display: flex; flex-direction: column; gap: var(--s-2); }
@media (min-width: 561px) {
  .b-counselor-band__action:has(> * + *) { flex-direction: row; flex-wrap: wrap; }
}

/* ---- M-21 audience-chooser (07-13): two cards, stacked on phones, side by side from 768px ---- */
.b-choices__grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.b-choice { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow-wrap: anywhere; }
.b-choice h3 { margin: 0; font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); }
.b-choice p { margin: 0 0 var(--s-2); }
.b-choice .b-btn { margin-block-start: auto; }
@media (min-width: 768px) {
  .b-choices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}

/* ---- M-10 faq: native details, all closed, no JS ---- */
.b-faq__inner { max-width: 48rem; }
.b-faq__item { border-block-end: 1px solid var(--line-strong); }
.b-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 48px;
  padding-block: var(--s-2);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  overflow-wrap: anywhere;
}
.b-faq__item > summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus: a shape, so the state is not colour alone. */
.b-faq__item > summary::after { content: "+"; flex: none; font-size: var(--b-fs-heading); line-height: 1; }
.b-faq__item[open] > summary::after { content: "\2212"; }
.b-faq__a { padding-block-end: var(--s-4); overflow-wrap: anywhere; }
.b-faq__a > :first-child { margin-block-start: 0; }
.b-faq__a > :last-child { margin-block-end: 0; }

/* ---- M-11 feature-grid ---- */
.b-features__grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.b-feature { min-width: 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow-wrap: anywhere; }
.b-feature h3 { margin: 0 0 var(--s-2); font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); }
.b-feature p:last-child { margin-block-end: 0; }
@media (min-width: 768px) {
  .b-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}
@media (min-width: 1024px) {
  .b-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- M-12 cobrand-showcase: the pinned lockup style (14px, org name 700 uppercase, "with" 400, product 700) drawn as a picture ---- */
.b-cobrand__fig { margin: 0; }
.b-cobrand__lockup {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-block-end: 4px solid var(--lime-mark, var(--accent));
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--b-fs-small);
  overflow-wrap: anywhere;
}
.b-cobrand__org { max-width: 12rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.b-cobrand__with { color: var(--text-muted); font-weight: 400; }
.b-cobrand__product { font-weight: 700; color: var(--cs-primary); }
.b-cobrand__caption { margin-block-start: var(--s-2); color: var(--text-muted); font-size: var(--b-fs-small); }

/* ---- M-13 form-panel: data-state idle | submitting | sent | error ---- */
.b-form-panel { max-width: 40rem; }
.b-form-panel__intro:empty, .b-form-panel__aside:empty { display: none; }
.b-form-panel__intro > :first-child { margin-block-start: 0; }
.b-form__error { display: none; margin: 0 0 var(--s-4); color: var(--alert); font-weight: 700; }
.b-form__summary { margin-block-end: var(--s-4); color: var(--alert); font-weight: 700; }
.b-form-panel[data-state="submitting"] .b-form button[type="submit"] { opacity: 0.6; pointer-events: none; }
.b-form-panel[data-state="error"] .b-form__error { display: block; }
.b-form-panel[data-state="sent"] .b-form { display: none; }
.b-form-panel__sent { display: none; padding: var(--s-4); border-inline-start: 4px solid var(--ok); border-radius: var(--r-sm); background: var(--ok-tint); }
.b-form-panel[data-state="sent"] .b-form-panel__sent { display: block; }
.b-form-panel__aside { margin-block-start: var(--s-5); color: var(--text-muted); }

/* ---- M-15 final-cta ---- */
.b-final { background: var(--surface-2); }
.b-final__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.b-final__inner .b-price { align-items: center; }
.b-final__points { margin: 0 0 var(--s-5); padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.b-final__points li { overflow-wrap: anywhere; }

/* ---- M-17 checkout-panel: only the active state's region shows (data-state on the root) ---- */
.b-checkout { padding-block: var(--s-7); }
.b-checkout__grid { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.b-checkout__summary, .b-checkout__main { min-width: 0; }
.b-checkout [data-when] { display: none; }
.b-checkout[data-state="loading"] [data-when="loading"],
.b-checkout[data-state="ready"] [data-when="ready"],
.b-checkout[data-state="not-open"] [data-when="not-open"],
.b-checkout[data-state="failed"] [data-when="failed"] { display: block; }
.b-checkout__closed > * + *, .b-checkout__failed > * + * { margin-block-start: var(--s-4); }
.b-checkout__loading { margin: 0; color: var(--text-muted); }
@media (min-width: 768px) {
  .b-checkout__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-7); }
}

/* ---- M-19 preview-flow: data-state questions | stone | saved ---- */
.b-preview-flow { padding-block: var(--s-6); }
.b-preview-flow__steps { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-5); padding: 0; list-style: none; counter-reset: b-pf; color: var(--text-muted); font-size: var(--b-fs-small); font-weight: 700; }
.b-preview-flow__steps > li { counter-increment: b-pf; }
.b-preview-flow__steps > li::before { content: counter(b-pf) ". "; font-variant-numeric: tabular-nums; }
.b-preview-flow__steps > li[aria-current="step"] { color: var(--text); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
.b-preview-flow [data-when] { display: none; min-width: 0; }
.b-preview-flow[data-state="questions"] [data-when="questions"],
.b-preview-flow[data-state="stone"] [data-when="stone"],
.b-preview-flow[data-state="saved"] [data-when="saved"] { display: block; }

/* ---- Page wrappers used by the marketing pages built in plan 05-10 (about, contact, counselors, guide, teacher, checkout) ---- */
.b-page-form, .b-page-prose, .b-page-article { padding-block-end: var(--s-8); }
.b-page-article { padding-block-start: var(--s-6); }
.b-page-article > div { min-width: 0; }
.b-checkout__summary > * { margin-block: 0; }
.b-checkout__summary > * + * { margin-block-start: var(--s-4); }
.b-checkout__summary .b-price { margin-block-start: var(--s-4); }
.b-checkout__list { margin: var(--s-5) 0 0; padding-inline-start: var(--s-5); }
.b-checkout__list li { margin-block: var(--s-2); overflow-wrap: anywhere; }
.b-teacher-list { margin-block-end: var(--s-6); }
.b-teacher-list__note { color: var(--text-muted); }
.b-teacher-list__links { display: flex; flex-direction: column; align-items: flex-end; }
.b-teacher-list__links a { display: inline-flex; align-items: center; min-height: 44px; }
.b-teacher-note { max-width: var(--measure); margin-block: var(--s-6) 0; color: var(--text-muted); font-size: var(--b-fs-small); line-height: var(--b-lh-small); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .b-teacher-list__links { align-items: flex-start; }
}

/* ---- /preview (plan 05-10): the Stone, the save band under the checklists, the locked teaser, the inline code form ---- */
.b-form[data-failed] .b-form__error { display: block; }
.b-pv__lede { max-width: var(--measure); margin: 0 0 var(--s-5); }
.b-pv__note { margin: var(--s-4) 0 0; color: var(--text-muted); font-size: var(--b-fs-small); line-height: var(--b-lh-small); overflow-wrap: anywhere; }
.b-pv__toolbar { display: flex; justify-content: flex-end; margin-block-end: var(--s-4); }
.b-pv__label { margin-block: var(--s-6) var(--s-4); }
.b-pv__prios { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.b-pv__prio { min-width: 0; overflow-wrap: anywhere; }
.b-pv__prio .b-eyebrow { margin-block-end: var(--s-1); }
.b-pv__prio .b-h3 { margin: 0 0 var(--s-2); }
.b-pv__why { margin: 0 0 var(--s-4); color: var(--text-muted); }
.b-pv__conversation { margin-block-start: var(--s-6); padding: var(--s-5); border-inline-start: 4px solid var(--primary); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.b-pv__conversation p { max-width: var(--measure); overflow-wrap: anywhere; }
.b-pv__conversation > :last-child { margin-block-end: 0; }
.b-pv__sheet .b-progress { margin-block: var(--s-4) 0; max-width: 28rem; }
.b-pv__save { margin-block: var(--s-6); padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.b-pv__save > :first-child { margin-block-start: 0; }
.b-pv__saveform, .b-pv__codeform { max-width: 28rem; }
.b-pv__codeform { margin-block-start: var(--s-4); }
.b-pv__teaser { margin-block-start: var(--s-7); padding-block-start: var(--s-6); border-block-start: 1px solid var(--line); }
.b-pv__teaser > :first-child { margin-block-start: 0; }
.b-pv__teaser p { max-width: var(--measure); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .b-pv__prios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Member app blocks (plan 05-11; UI-SPEC 5.3 A-01 to A-28, 5.4, 8, 11). Fourth file of site/blocks.css, after marketing.css.
   Same rules as app-core.css (source-guarded by server/appBlocks.test.ts and server/a11ySource.test.ts):
   - every selector starts with .b-; role tokens only, never a hex value; spacing from --s-1, --s-2, --s-4 to --s-8 (not --s-3, --s-9, --s-10)
   - min-width first; the only media queries are min-width 561 / 768 / 1024 / 1280 and prefers-reduced-motion
   - 44px hit area on every control; never outline:none; only opacity and transform animate; nothing is sticky
   - org hosts: primary-coloured things use var(--primary) / var(--focus) (the tenant block re-points them); the current-Stone marker uses
     var(--accent); status colours and the sample banner use the status roles and the pinned --cs-spark, never a tenant variable
   Hook classes tour.js looks for (current-hero, scard, calpeek, conversation, priorities, the-path-wrap, q) are only hooks; they carry no rules. */

/* ---- A-01 app header: skip link first, mark pinned to the product colour (.brand), nav, child switcher, settings ---- */
.b-app-head { background: var(--surface); border-block-end: 1px solid var(--line); }
.b-app-head__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-4);
  max-width: var(--b-app-maxw);
  min-height: var(--header-h);
  margin-inline: auto;
  padding: var(--s-1) var(--s-4);
}
.b-app-head__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}
.b-app-head__brand .mark { flex: none; width: 28px; height: 28px; color: var(--primary); }
.b-app-head__word { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.b-app-head__right { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; min-width: 0; }
.b-app-nav { display: flex; order: 3; width: 100%; gap: var(--s-2); }
.b-app-nav a {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--s-2);
  border-block-end: 3px solid transparent;
  color: var(--text-muted);
  font-weight: 700;
  text-decoration: none;
}
.b-app-nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
.b-app-nav a[aria-current="page"] { color: var(--text); border-block-end-color: var(--primary); }
.b-app-nav__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.b-icon-btn {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.b-icon-btn:hover { background: var(--surface-2); }
/* The markup order is brand, account controls, nav (05-14): on a phone the controls share the first row with the brand and the nav is the row
   below, so Tab follows what the eye sees. From 561px the nav sits between the brand and the controls, as it always did. */
@media (min-width: 561px) {
  .b-app-nav { order: 1; width: auto; margin-inline-start: auto; }
  .b-app-head__right { order: 2; }
  .b-app-nav a { flex: none; padding-inline: var(--s-4); }
  .b-app-nav__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  .b-app-head__right { margin-inline-start: 0; }
}

/* the account menu */
.b-menu-wrap { position: relative; }
.b-pop {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--s-2));
  z-index: 60;
  display: none;
  width: min(18rem, calc(100vw - 2 * var(--s-4)));
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.b-pop.open { display: block; }
.b-pop__head { padding: var(--s-2) var(--s-4); border-block-end: 1px solid var(--line); margin-block-end: var(--s-2); overflow-wrap: anywhere; }
.b-pop__name { font-weight: 700; }
.b-pop__sub { color: var(--text-muted); font-size: var(--b-fs-small); }
.b-pop__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: var(--s-1) var(--s-4);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.b-pop__item:hover { background: var(--surface-2); text-decoration: underline; text-underline-offset: 0.2em; }
.b-pop__rule { height: 1px; margin: var(--s-2) var(--s-1); background: var(--line); }

/* the child switcher (Phase 4 contract: one child = a static name, two or more = a listbox; keys and roles live in shell.js) */
.b-kid {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 14rem;
  min-height: 44px;
  padding: var(--s-1) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.b-kid[disabled] { opacity: 0.6; cursor: progress; }
.b-kid__av {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  font-size: var(--b-fs-small);
  font-weight: 700;
}
.b-kid__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-kid-switch { position: relative; }
.b-kid-menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--s-1));
  z-index: 70;
  display: none;
  width: max-content;
  min-width: 13rem;
  max-width: min(20rem, calc(100vw - 2 * var(--s-4)));
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.b-kid-menu.open { display: block; }
.b-kid-list { max-height: 20rem; overflow-y: auto; }
.b-kid-opt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 44px;
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.b-kid-opt:hover { background: var(--surface-2); }
.b-kid-opt[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--primary); }
.b-kid-opt__g { margin-inline-start: auto; padding-inline-start: var(--s-2); color: var(--text-muted); font-size: var(--b-fs-small); font-weight: 400; white-space: nowrap; }
.b-kid-opt--add { margin-block-start: var(--s-1); border-block-start: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--primary); }
.b-kid-one { max-width: 10rem; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.b-kid-err { max-width: var(--b-app-maxw); margin: var(--s-2) auto 0; padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); background: var(--surface-2); }

/* ---- the page frame, A-02 page header ---- */
.b-app-main { display: block; padding-block: var(--s-6) var(--s-8); }
.b-app-wrap { max-width: var(--b-app-maxw); margin-inline: auto; padding-inline: var(--s-4); }
.b-page-header { display: grid; gap: var(--s-2); margin-block-end: var(--s-6); }
.b-page-header__lede { margin: 0; max-width: var(--measure); }
.b-page-header__chip { margin-block-start: var(--s-2); }
.b-page-header__actions { margin-block-start: var(--s-2); }
.b-stack-6 > * + * { margin-block-start: var(--s-6); }
.b-section-title { margin: 0 0 var(--s-4); font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); }
@media (min-width: 561px) {
  .b-app-wrap { padding-inline: var(--s-5); }
  .b-page-header { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-4); }
  .b-page-header__text { min-width: 0; }
  .b-page-header__actions { margin-block-start: 0; justify-content: flex-end; }
}

/* ---- A-22 sample banner: the pinned product accent, never a tenant colour ---- */
.b-sample-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: var(--cs-spark);
  color: var(--text);
  font-weight: 700;
  text-align: center;
}
.b-sample-banner__btn { background: var(--surface); border-color: var(--text); color: var(--text); }

/* ---- A-03 next step ---- */
.b-next-step {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 2px solid var(--primary);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow-wrap: anywhere;
}
.b-next-step__when { margin: 0; color: var(--text-muted); font-weight: 700; }
.b-next-step[data-state="current"] .b-next-step__when::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-end: var(--s-2);
  border: 2px solid var(--text);
  border-radius: 50%;
  background: var(--lime-mark, var(--accent));
}
.b-next-step__title { margin: 0; }
.b-next-step__next, .b-next-step__pending { margin: 0; max-width: var(--measure); }
.b-next-step__k { margin-inline-end: var(--s-2); color: var(--text-muted); font-size: var(--b-fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.b-next-step__count { margin: 0; font-size: var(--b-fs-small); }
.b-next-step__actions { margin-block-start: var(--s-2); }
.b-progress__label { flex: none; }
.b-progress__value { flex: none; min-width: 3ch; text-align: end; }
@media (min-width: 561px) {
  .b-next-step { padding: var(--s-6); }
}

/* ---- A-04 stone card as a link, A-05 path ---- */
.b-stone-card { text-decoration: none; }
.b-stone-card:hover .b-stone-card__title { text-decoration: underline; text-underline-offset: 0.2em; }
.b-journey__title { margin-block-end: var(--s-2); }
.b-journey__sub { margin: 0 0 var(--s-4); max-width: var(--measure); }
.b-journey__list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.b-journey__before, .b-journey__joined { padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.b-journey__before-title, .b-journey__joined-label { margin: 0 0 var(--s-1); font-weight: 700; }
.b-journey__before p, .b-journey__joined p { margin: 0; }
.b-journey__before .b-cluster { margin-block-start: var(--s-2); }
.b-journey-nav { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .b-journey-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- A-06 checklist inside a focus item, A-07 conversation, A-08 focus list ---- */
.b-conversation-block { padding: var(--s-5); border-radius: var(--r-md); background: var(--surface-2); }
.b-conversation__script p { margin: 0 0 var(--s-4); max-width: var(--measure); }
.b-conversation__script { margin-block-end: var(--s-4); }
.b-conversation-block .b-conversation__prompt { background: var(--surface); }
.b-focus-list__grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.b-focus-list__item { display: flex; flex-direction: column; gap: var(--s-2); }
.b-focus-list__item .b-eyebrow { margin: 0; }
.b-focus-list__item .b-h3 { margin: 0; }
.b-focus-list__item > p { margin: 0; }
.b-note { margin: var(--s-4) 0 0; color: var(--text-muted); font-size: var(--b-fs-small); }
.b-aside-card h3 { margin: 0 0 var(--s-2); }
.b-aside-card ul { margin: 0; padding-inline-start: var(--s-5); }
.b-aside-card .b-eyebrow { margin-block-end: var(--s-1); }
.b-month-group { margin-block-end: var(--s-5); }
.b-month-group h3 { margin: 0 0 var(--s-2); font-size: var(--b-fs-body); }
.b-chip-when { margin-inline-start: var(--s-2); color: var(--text-muted); font-size: var(--b-fs-small); }
.b-toggle-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.b-segment { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.b-segment__btn { min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.b-segment__btn[aria-selected="true"] { border-width: 2px; border-color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }

/* ---- A-09 empty states placed on the page, A-10 notices stack ---- */
.b-notices { display: grid; gap: var(--s-4); }
.b-notices:empty { display: none; }

/* ---- quick links on the dashboard, student cards, calendar peek ---- */
.b-quick { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.b-quick__link { display: flex; flex-direction: column; justify-content: center; gap: var(--s-1); min-height: 44px; color: var(--text); text-decoration: none; }
.b-quick__link:hover .b-quick__title { text-decoration: underline; text-underline-offset: 0.2em; }
.b-quick__title { font-weight: 700; }
.b-students { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.b-student-card { display: flex; flex-direction: column; gap: var(--s-2); }
.b-student-card .b-progress { margin-block-start: var(--s-1); }
.b-student-card__head { display: flex; align-items: center; gap: var(--s-4); }
.b-student-card__name { margin: 0; font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); }
.b-student-card__next { margin: 0; }
.b-cal-peek { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.b-cal-peek__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-block-end: var(--s-2); }
.b-cal-peek__head h2 { margin: 0; font-size: var(--b-fs-heading); font-weight: 700; }
.b-cal-list { margin: 0; padding: 0; list-style: none; }
.b-cal-list__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-1) var(--s-4);
  align-items: baseline;
  padding-block: var(--s-2);
  border-block-start: 1px solid var(--line);
}
.b-cal-list__row:first-child { border-block-start: 0; }
.b-cal-list__date { padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--surface-2); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.b-cal-list__row[data-kind="conversation"] .b-cal-list__date { box-shadow: inset 0 -3px 0 var(--primary); }
.b-cal-list__who { grid-column: 2; color: var(--text-muted); font-size: var(--b-fs-small); }
@media (min-width: 561px) {
  .b-cal-list__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .b-cal-list__who { grid-column: auto; }
}

/* ---- A-27 toast ---- */
.b-toast {
  position: fixed;
  inset-inline: var(--s-4);
  inset-block-end: var(--s-4);
  z-index: 90;
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--text);
  color: var(--surface);
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
@media (min-width: 561px) {
  .b-toast { inset-inline-start: auto; max-width: 24rem; }
}

/* ---- loading rows ---- */
.b-skeleton { display: grid; gap: var(--s-2); }
.b-skeleton__row { display: block; height: 3rem; border-radius: var(--r-sm); background: var(--surface-2); }

/* ---- small layout and control helpers the app pages share ---- */
.b-stack-4 > * + * { margin-block-start: var(--s-4); }
.b-plan-actions { margin-block-start: var(--s-2); }
.b-pdf-row__fail:empty { display: none; }
.b-pdf-row__fail { margin-block-start: var(--s-2); }
.b-form-inline { display: contents; }
.b-setting-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding-block: var(--s-4); border-block-start: 1px solid var(--line); }
.b-setting-row:first-child { border-block-start: 0; }
.b-setting-row__text { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.b-setting-row__label { font-weight: 700; }
.b-setting-row__action { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.b-upsell h2 { margin-block-end: var(--s-2); }
.b-upsell p { margin-block-end: var(--s-4); max-width: var(--measure); }

/* compact Path rows on the dashboard: the stone card lies down into one line of when, title and status */
.b-journey--compact .b-journey__list { gap: var(--s-2); }
.b-journey--compact .b-stone-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); padding-block: var(--s-2); }
.b-journey--compact .b-stone-card::before { inset-block-start: 50%; transform: translateY(-50%); }
.b-journey--compact .b-stone-card__title { font-size: var(--b-fs-body); }
.b-journey--compact .b-stone-card__status { margin-inline-start: auto; align-self: center; }

/* the sample-data switch (counselors and preview): the pinned product accent when on, never a tenant colour */
.b-sample-toggle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); border-color: var(--cs-spark); }
.b-sample-toggle__text { display: grid; gap: var(--s-1); flex: 1 1 16rem; min-width: 0; }
.b-switch { position: relative; flex: none; width: 62px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface-2); cursor: pointer; }
.b-switch__knob { position: absolute; inset-block-start: 7px; inset-inline-start: 7px; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text); transition: transform var(--dur-fast) var(--ease-out); }
.b-switch[aria-checked="true"] { background: var(--cs-spark); border-color: var(--text); }
.b-switch[aria-checked="true"] .b-switch__knob { transform: translateX(18px); }

/* how this works */
.b-explain__summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.b-explain__steps { display: grid; gap: var(--s-4); margin: 0 0 var(--s-4); padding-inline-start: var(--s-5); }
.b-explain__steps p { margin: 0; }

/* ---- settings (A-14 section navigation, A-11 people, A-15 dialog content) ---- */
.b-settings { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.b-section-nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.b-section-nav__link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-weight: 700; text-decoration: none; }
.b-section-nav__link:hover { background: var(--surface-2); text-decoration: underline; text-underline-offset: 0.2em; }
.b-card-section { scroll-margin-block-start: var(--s-4); }
.b-section__title { margin-block-end: var(--s-2); }
.b-section__sub { margin: 0 0 var(--s-4); max-width: var(--measure); }
.b-card-section > .b-note { margin-block: var(--s-4) 0; }
.b-avatar { display: inline-grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text); font-weight: 700; }
.b-person, .b-person__who { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.b-person { flex-wrap: wrap; padding-block: var(--s-4); border-block-start: 1px solid var(--line); }
.b-person:first-child { border-block-start: 0; }
.b-person__text { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.b-person__name { font-weight: 700; }
.b-person__line { font-size: var(--b-fs-small); }
.b-person__empty h3 { margin-block-end: var(--s-1); }
.b-person__empty p { margin: 0 0 var(--s-4); }
.b-people + .invite-actions, .b-person__empty + .invite-actions, .b-people + .b-p-cap { margin-block-start: var(--s-4); }
.b-card-section .invite-actions { margin-block-start: var(--s-4); }
.b-p-cap { margin: var(--s-4) 0 0; }
.b-note-box { padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); overflow-wrap: anywhere; }
.b-note-box p { margin: var(--s-1) 0 0; }
.b-log { margin: 0; padding: 0; list-style: none; }
.b-log__item { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); padding-block: var(--s-2); border-block-start: 1px solid var(--line); }
.b-log__item:first-child { border-block-start: 0; }
.b-log__when { min-width: 6rem; color: var(--text-muted); font-size: var(--b-fs-small); white-space: nowrap; }
@media (min-width: 768px) {
  .b-settings { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-7); }
  .b-section-nav { flex-direction: column; align-items: stretch; }
  .b-section-nav__link { border-radius: var(--r-sm); border-color: transparent; background: none; }
}

/* ---- calendar (A-18 legend, A-20 grouped list): personal and shared told apart by a word and a mark, never by colour alone ---- */
.b-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); color: var(--text-muted); }
.b-legend__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.b-legend__mark { flex: none; width: 12px; height: 12px; }
.b-legend__mark--personal { border-radius: 50%; background: var(--primary); }
.b-legend__mark--shared { background: var(--cs-spark); border: 1px solid var(--text); transform: rotate(45deg); }
.b-cal-month { margin-block-end: var(--s-6); }
.b-cal-month__title { margin: 0 0 var(--s-2); padding-block-end: var(--s-2); border-block-end: 1px solid var(--line); font-size: var(--b-fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.b-cal-items { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.b-cal-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--s-1) var(--s-4);
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: start;
  overflow-wrap: anywhere;
}
.b-cal-row--edit { cursor: pointer; }
.b-cal-row--edit:hover { background: var(--surface-2); border-color: var(--line); }
.b-cal-row[data-past="true"] { color: var(--text-muted); }
.b-cal-row__date { display: grid; justify-items: center; line-height: 1.1; }
.b-cal-row__day { font-size: var(--b-fs-heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.b-cal-row__wk { color: var(--text-muted); font-size: var(--b-fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.b-cal-row.shared .b-cal-row__date { box-shadow: inset 0 -3px 0 var(--cs-spark); }
.b-cal-row.conversation { box-shadow: inset 3px 0 0 var(--primary); }
.b-cal-row__main { display: grid; gap: var(--s-1); min-width: 0; }
.b-cal-row__title { font-weight: 700; }
.b-cal-row__notes { color: var(--text-muted); font-size: var(--b-fs-small); }
.b-cal-row__who { grid-column: 2; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: var(--b-fs-small); font-weight: 700; }
@media (min-width: 561px) {
  .b-cal-row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
  .b-cal-row__who { grid-column: auto; justify-content: flex-end; }
}

/* ---- onboarding (A-28 focused shell, A-12 fields, A-13 choice cards) ---- */
.b-onboard-head__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--header-h); }
.b-onboard { display: grid; justify-items: center; padding: var(--s-5) var(--s-4) var(--s-8); }
.b-onboard-card { width: 100%; max-width: 36rem; padding: var(--s-5); }
.b-onboard-card + .b-onboard-card { margin-block-start: var(--s-5); }
.b-onboard-card .b-h1 { margin-block-end: var(--s-2); }
.b-onboard-card .lede { margin: 0 0 var(--s-5); }
.b-onboard-student { display: grid; gap: var(--s-1) var(--s-4); grid-template-columns: minmax(0, 1fr); }
.b-stone-line { margin: 0 0 var(--s-5); padding: var(--s-2) var(--s-4); border-inline-start: 4px solid var(--lime-mark, var(--accent)); background: var(--surface-2); font-weight: 700; }
.b-choices { margin: 0 0 var(--s-5); padding: 0; border: 0; min-width: 0; }
.b-choices legend { padding: 0; }
.b-choices .b-field__help { margin-block: var(--s-1) var(--s-4); }
.b-choice { position: relative; display: block; margin-block-end: var(--s-2); }
.b-choice__input { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.b-choice__body {
  display: grid;
  gap: var(--s-1);
  min-height: 44px;
  padding: var(--s-4);
  padding-inline-end: calc(var(--s-7) + var(--s-2));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  position: relative;
}
.b-choice__title { font-weight: 700; }
.b-choice__desc { color: var(--text-muted); font-size: var(--b-fs-small); }
.b-choice__input:checked + .b-choice__body { border: 2px solid var(--primary); padding: calc(var(--s-4) - 1px); padding-inline-end: calc(var(--s-7) + var(--s-2) - 1px); }
.b-choice__input:checked + .b-choice__body::after {
  content: "";
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-end: var(--s-4);
  width: 8px;
  height: 14px;
  border: solid var(--primary);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.b-choice__input:focus-visible + .b-choice__body { outline: 3px solid var(--focus); outline-offset: 2px; }
.b-onboard-actions { display: flex; flex-direction: column-reverse; gap: var(--s-2); margin-block-start: var(--s-5); }
.b-onboard-actions .b-btn { width: 100%; }
.b-onboard-errors { margin: 0 0 var(--s-5); padding: var(--s-4); border: 1px solid var(--alert); border-inline-start-width: 4px; border-radius: var(--r-md); background: var(--alert-tint); }
.b-onboard-errors__lead { margin: 0 0 var(--s-2); font-weight: 700; }
.b-onboard-errors ul { margin: 0; padding-inline-start: var(--s-5); }
.b-onboard-errors a { color: var(--text); font-weight: 700; }
@media (min-width: 561px) {
  .b-onboard { padding-block-start: var(--s-7); }
  .b-onboard-card { padding: var(--s-7); }
  .b-onboard-student { grid-template-columns: minmax(0, 1fr) 11rem; }
  .b-onboard-actions { flex-direction: row; justify-content: flex-end; }
  .b-onboard-actions .b-btn { width: auto; }
}

/* ---- Core Narrative (A-12 per prompt) ---- */
.b-back { align-self: flex-start; width: fit-content; }
.b-lede { margin: 0; max-width: var(--measure); color: var(--text-muted); }
.b-addq { display: flex; flex-direction: column; gap: var(--s-2); }
.b-prompts { counter-reset: q; display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.b-prompt { counter-increment: q; display: grid; gap: var(--s-4); }
.b-prompt.done { border-color: var(--primary); }
.b-prompt__head { display: flex; align-items: flex-start; gap: var(--s-4); }
.b-prompt__n { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.b-prompt__n::before { content: counter(q); }
.b-prompt.done .b-prompt__n { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.b-prompt__text { flex: 1; min-width: 0; font-weight: 700; padding-block-start: var(--s-1); }
.b-prompt__del { flex: none; }
.b-prompt .b-field__help { margin: 0; }
.b-save-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.b-save-status__note { margin: 0; color: var(--text-muted); }

/* ---- Bookshelf (A-18 search, chapter cards in the stone-card visual, A-19 article) ---- */
.b-explainer { margin: 0; max-width: var(--measure); color: var(--text-muted); }
.b-toolbar { max-width: 36rem; }
.b-toolbar .b-field { margin: 0; }
.b-cards { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.b-article-card, .b-chapter-card { display: flex; flex-direction: column; gap: var(--s-2); color: var(--text); text-decoration: none; }
.b-article-card .b-h3, .b-chapter-card .b-h3 { margin: 0; }
.b-article-card p, .b-chapter-card p { margin: 0; }
.b-article-card:hover .b-h3, .b-chapter-card:hover .b-h3 { text-decoration: underline; text-underline-offset: 0.2em; }
.b-article-card__read, .b-chapter-card__open { display: inline-flex; align-items: center; gap: var(--s-1); margin-block-start: auto; font-weight: 700; color: var(--primary); }
.b-chapter-card { border-inline-start: 4px solid var(--primary); }
.b-section-card { margin-block-end: var(--s-6); }
.b-section-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); margin-block-end: var(--s-4); }
.b-section-card__head .b-h2 { margin: 0; }
.b-article-col { max-width: var(--measure); margin-inline: auto; display: grid; gap: var(--s-5); }
.b-article-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.b-crumb { margin-block-end: var(--s-4); color: var(--text-muted); font-weight: 700; overflow-wrap: anywhere; }
.b-article__dek { padding-block-end: var(--s-5); border-block-end: 1px solid var(--line); color: var(--text-muted); font-weight: 700; }
.b-article .b-notice { margin-block-end: var(--s-5); }
.b-article__body li { min-width: 0; }
.b-article__body ul.checklist { margin-inline-start: 0; padding-inline-start: 0; list-style: none; }
.b-article__body ul.checklist label { display: flex; align-items: flex-start; gap: var(--s-2); min-height: 44px; padding-block: var(--s-1); cursor: pointer; }
.b-article__body ul.checklist input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--primary); }
.b-related { max-width: var(--measure); }
.b-related__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.b-related__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary); }
@media (min-width: 561px) {
  .b-addq { flex-direction: row; }
  .b-addq .b-input { flex: 1; }
}

/* ---- Story (student data): zones, section cards, tables, chips, the editor dialog (A-11, A-12, A-14, A-15, A-16) ---- */
.b-zone { margin-block-end: var(--s-7); }
.b-zone__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-block-end: var(--s-4); }
.b-zone__head .b-h2 { margin: 0; }
.b-stack-5 > * + * { margin-block-start: var(--s-5); }
.b-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.b-summary__who { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.b-stats { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); margin: 0; }
.b-stat { display: flex; flex-direction: column-reverse; margin: 0; }
.b-stat__value { margin: 0; font-size: var(--b-fs-heading); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.b-stat__label { color: var(--text-muted); font-size: var(--b-fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.b-sd-card { display: grid; gap: var(--s-4); align-content: start; }
.b-sd-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.b-sd-card__label { margin: 0; font-size: var(--b-fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.b-sd-card__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-inline-start: auto; }
.b-gpas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4) var(--s-6); }
.b-gpa { display: flex; flex-direction: column; }
.b-gpa__n { font-size: var(--b-fs-display); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.b-sd-card .rigor { margin: var(--s-2) 0 0; max-width: var(--measure); }
.b-sd-card .updated { margin: var(--s-2) 0 0; font-size: var(--b-fs-small); }
.b-chips { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.b-chip { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--b-fs-small); }
.b-chip.planned { background: var(--surface); font-style: italic; }
.b-cell-stack { display: grid; gap: var(--s-1); min-width: 0; }
.b-cell-line { font-size: var(--b-fs-small); }
.b-prewrap { white-space: pre-wrap; }
.b-sd-card .b-table td .desc { white-space: pre-wrap; }
.b-sd-card .b-empty { padding-block: var(--s-5); }
.b-sd-card .b-empty__title { font-size: var(--b-fs-body); font-weight: 400; color: var(--text-muted); }
.b-story-tiles { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin-block-start: var(--s-4); }
.b-story-tile { display: grid; gap: var(--s-2); align-content: start; }
.b-story-tile .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.b-story-tile p { margin: 0; }
.b-story-tile .kind { margin: 0; }
.b-dialog--wide { max-width: 100%; }
.b-field-group { margin-block-start: var(--s-5); padding-block-start: var(--s-4); border-block-start: 1px solid var(--line); }
.b-toggle-field { display: flex; align-items: center; gap: var(--s-4); margin-block: var(--s-4); }
.b-checks { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.b-checks .checks { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.b-check-inline { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: 700; cursor: pointer; }
.b-check-inline input { width: 24px; height: 24px; margin: 0; accent-color: var(--primary); }
.b-total { display: inline-block; font-size: var(--b-fs-heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.b-field__hint { margin-inline-start: var(--s-1); color: var(--text-muted); font-weight: 400; font-size: var(--b-fs-small); }
.b-btn.toggle[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
@media (min-width: 561px) {
  .b-dialog--wide { width: min(36rem, calc(100% - 2 * var(--s-4))); }
}

/* ---- Course planner (A-11 two-dimensional grid in a labelled scroll region, A-16 credit totals) ---- */
.b-app {
  /* a category is told apart by its name and these tints; the tint is a ground for charcoal text, never a text colour */
  --b-cat-1: var(--panel-sky);
  --b-cat-2: var(--panel-mint);
  --b-cat-3: var(--panel-lavender);
  --b-cat-4: var(--panel-yellow);
  --b-cat-5: var(--panel-peach);
  --b-cat-6: var(--panel-pink);
  --b-cat-7: var(--panel-aqua);
  --b-cat-8: var(--decor-grey);
  --b-cat-9: var(--decor-teal);
  --b-cat-10: var(--decor-orange);
}
.b-app-wrap--wide { max-width: 1320px; }
.b-cp-stats { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.b-cp-stat { display: grid; gap: var(--s-1); align-content: start; }
.b-cp-stat .b-eyebrow { margin: 0; }
.b-cp-stat__v { margin: 0; font-size: var(--b-fs-display); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.b-cp-stat__of { margin-inline-start: var(--s-1); font-size: var(--b-fs-body); font-weight: 700; color: var(--text-muted); }
.b-cp-phead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-block-end: var(--s-4); }
.b-cp-phead .b-h3 { margin: 0; }
.b-cp-phead .hint { font-weight: 400; font-size: var(--b-fs-small); }
.b-cp-chips { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
.b-cp-chip {
  display: grid;
  gap: var(--s-1);
  min-height: 44px;
  padding: var(--s-2) var(--s-2);
  border: 1px solid var(--line-strong);
  border-inline-start: 4px solid var(--b-c, var(--line-strong));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--b-c, var(--surface-2)) 22%, var(--surface));
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: grab;
}
.b-cp-chip:active { cursor: grabbing; }
.b-cp-chip.armed { border-width: 2px; border-color: var(--primary); border-inline-start-width: 4px; }
.b-cp-chip .cname { font-weight: 700; line-height: 1.25; }
.b-cp-chip.met .cname::after { content: " \2713"; font-weight: 700; }
.b-cp-chip .cnum { font-size: var(--b-fs-small); font-variant-numeric: tabular-nums; }
.b-cp-chip .b-progress__fill { background: var(--text); }
.b-cp-scroll { padding: var(--s-4); background: var(--surface); }
.b-cp-sched {
  display: grid;
  grid-template-columns: repeat(12, minmax(6rem, 1fr));
  grid-template-rows: auto auto;
  grid-auto-rows: minmax(5.75rem, auto);
  gap: var(--s-1);
  align-items: stretch;
  min-width: 72rem;
}
.b-cp-yhead { grid-row: 1; padding: 0 0 var(--s-1) var(--s-1); border-block-end: 2px solid var(--line-strong); font-size: var(--b-fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.b-cp-thead { grid-row: 2; padding: var(--s-1) var(--s-1); font-size: var(--b-fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.b-cp-ystart { border-inline-start: 2px solid var(--line-strong); padding-inline-start: var(--s-2); margin-inline-start: -2px; }
.b-cp-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}
.b-cp-slot::after { content: "+"; font-size: var(--b-fs-body); font-weight: 700; }
.b-cp-slot.summer { border-style: dotted; }
.b-cp-slot:hover { background: var(--surface-2); }
.b-cp-slot.over { border-style: solid; border-color: var(--primary); background: var(--surface-2); }
.b-cp-slot.target { border-style: solid; background: var(--surface-2); }
.b-cp-course {
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-inline-start: 4px solid var(--b-c, var(--line-strong));
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: grab;
  overflow: hidden;
}
.b-cp-course.has-cat { background: color-mix(in srgb, var(--b-c) 22%, var(--surface)); }
.b-cp-course.plan { border-style: dashed; border-inline-start-style: solid; background: var(--surface); }
.b-cp-course.plan.has-cat { background: color-mix(in srgb, var(--b-c) 13%, var(--surface)); }
.b-cp-course.drag { opacity: 0.4; }
.b-cp-course:active { cursor: grabbing; }
.b-cp-name, .b-cp-alloc {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--s-1) var(--s-2);
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.b-cp-name { font-weight: 700; line-height: 1.25; }
.b-cp-name:hover, .b-cp-alloc:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.b-cp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0; padding-inline: var(--s-2); font-size: var(--b-fs-small); font-variant-numeric: tabular-nums; }
.b-cp-alloc { font-size: var(--b-fs-small); font-weight: 700; }
.b-cp-alloc.none { text-decoration: underline; }
.b-cp-alloc.maybe { font-weight: 400; }
.b-cp-shelf { padding-block-start: var(--s-2); }
.b-cp-shelfline { height: 0; margin-block-start: var(--s-4); border-block-start: 2px solid var(--line-strong); }
.b-cp-shelfhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); margin-block-end: var(--s-2); }
.b-cp-shelfhead .b-h3 { margin: 0; }
.b-cp-shelfrow { display: grid; grid-template-columns: repeat(12, minmax(6rem, 1fr)); gap: var(--s-1); align-items: start; min-width: 72rem; }
.b-cp-shelfzone { display: grid; gap: var(--s-1); align-content: start; min-height: 5rem; padding: var(--s-1); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }
.b-cp-shelfzone.over { border-style: solid; border-color: var(--primary); background: var(--surface-2); }
.b-cp-shelfzone.target { border-style: solid; }
.b-cp-szlabel { font-size: var(--b-fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.b-cp-pop { position: absolute; z-index: 60; width: min(15rem, calc(100vw - 2 * var(--s-4))); padding: var(--s-1); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-md); }
.b-cp-catopt { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 44px; padding: var(--s-1) var(--s-2); border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.b-cp-catopt:hover { background: var(--surface-2); }
.b-cp-catopt.on::after { content: "\2713"; margin-inline-start: auto; }
.b-cp-sw { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--text); background: var(--b-c, var(--surface-2)); }
.b-cp-pop .catdone { width: 100%; margin-block-start: var(--s-1); }
.b-cp-three { display: grid; gap: 0 var(--s-4); grid-template-columns: minmax(0, 1fr); }
.b-cp-cats { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.b-cp-reqhead, .b-cp-reqrow { display: grid; gap: var(--s-2); grid-template-columns: minmax(0, 1fr) 6rem 44px; align-items: center; }
.b-cp-reqhead { padding-inline: var(--s-1); color: var(--text-muted); font-size: var(--b-fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.b-cp-reqrows { display: grid; gap: var(--s-2); margin-block: var(--s-2) var(--s-4); }
.b-cp-reqrow .rc { text-align: center; font-variant-numeric: tabular-nums; }
.b-cp-reqrow .rdel { min-width: 44px; padding: 0; }
.b-cp-reqfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.b-dialog .dnote { margin: 0 0 var(--s-4); color: var(--text-muted); max-width: var(--measure); }
@media (min-width: 561px) {
  .b-cp-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- the first-visit tour: a card in the page (it covers nothing) and a ring drawn around the step's target ---- */
.b-tour { border-color: var(--primary); border-width: 2px; }
.b-tour .tour-body { margin: 0 0 var(--s-4); max-width: var(--measure); }
.b-tour .b-h3 { margin-block-end: var(--s-2); }
.b-tour__foot { justify-content: flex-end; }
.b-tour__foot .tour-dots { margin-inline-end: auto; font-variant-numeric: tabular-nums; }
.b-tour-ring { position: fixed; z-index: 90; border: 3px solid var(--primary); border-radius: var(--r-md); outline: 2px solid var(--surface); pointer-events: none; }

/* Counselor app blocks (plan 05-12; UI-SPEC 5.3 A-11, A-12, A-15 to A-18, A-24, A-25, 5.4 counselor rows, 6.3, 11). Fifth file of site/blocks.css, after app.css.
   Same rules as app.css (source-guarded by server/counselorUi.test.ts and server/a11ySource.test.ts):
   - every selector starts with .b-; role tokens only, never a hex value; spacing from --s-1, --s-2, --s-4 to --s-8 (not --s-3, --s-9, --s-10)
   - min-width first; the only media queries are min-width 561 / 768 / 1024 / 1280 and prefers-reduced-motion
   - 44px hit area on every control; never outline:none; only opacity and transform animate
   - the bulk bar (.b-bulkbar) is the only sticky element in the app; the page keeps room under it and scroll-padding so a focused row is never hidden
   - org hosts: primary-coloured things use var(--primary) / var(--focus) (the tenant block re-points them); status colours use the status roles
   Legacy class names a page keeps beside the b- ones (btn, nm, dname, star, tile, cap, twrap ...) are hooks for tests and scripts; they carry no rules. */

/* ---- A-01 on the counselor pages: five text links instead of the member app's three icons ---- */
.b-app--wide { --b-wide: 1320px; }
.b-app--wide .b-app-head__bar { max-width: var(--b-wide); }
.b-app-nav--text { flex-wrap: wrap; }
.b-app-nav--text a { flex: 1 1 auto; text-align: center; }
.b-app-nav--text a[aria-current="page"] { color: var(--text); border-block-end-color: var(--primary); }
@media (min-width: 561px) {
  .b-app-nav--text a { flex: none; }
}

/* ---- small page helpers ---- */
.b-said { margin: 0; min-height: 1.4em; color: var(--text-muted); font-size: var(--b-fs-small); }
.b-msg { margin: 0; padding-block: var(--s-6); color: var(--text-muted); }
.b-scope { margin: 0; max-width: var(--measure); }
.b-field--inline { margin: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
.b-field--inline .b-select { width: auto; min-width: 12rem; max-width: 100%; }
.b-lede-block { margin: 0; max-width: var(--measure); color: var(--text-muted); overflow-wrap: anywhere; }
.b-section-title { margin: 0 0 var(--s-2); font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); }
.b-section-hint { margin: 0 0 var(--s-4); color: var(--text-muted); max-width: var(--measure); }
.b-panel > * + * { margin-block-start: var(--s-4); }
.b-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.b-actions--end { margin-block-start: var(--s-5); }
.b-inline-note { margin: 0; color: var(--text-muted); font-size: var(--b-fs-small); line-height: var(--b-lh-small); }
.b-alert-line { margin: 0; }

/* ---- A-16 stat tiles ---- */
.b-stat-row { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); margin: 0; }
.b-stat-card { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.b-stat-card .b-stat { margin: 0; }
.b-stat-card .b-stat__label { color: var(--text); letter-spacing: 0; text-transform: none; font-size: var(--b-fs-small); }
.b-stat-card .b-stat__value { font-size: var(--b-fs-display); overflow-wrap: anywhere; }
.b-stat-card__note, .b-stat-card .b-muted { margin: 0; font-size: var(--b-fs-small); font-variant-numeric: tabular-nums; }
@media (min-width: 561px) {
  .b-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- A-17 setup steps: a number, a title, a status word with its shape, the action ---- */
.b-setup-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-4); }
.b-setup-steps__item {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.b-setup-steps__item[data-state="done"] { background: var(--surface-2); }
.b-setup-steps__item[data-state="doing"] { border-color: var(--primary); }
.b-setup-steps__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.b-setup-steps__n {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.b-setup-steps__item[data-state="done"] .b-setup-steps__n { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.b-setup-steps__title { flex: 1 1 12rem; min-width: 0; font-size: var(--b-fs-body); font-weight: 700; overflow-wrap: anywhere; }
.b-setup-steps__note { margin: 0; }
.b-setup-steps__action { margin-block-start: var(--s-1); }
@media (min-width: 768px) {
  .b-setup-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .b-setup-steps__item { align-content: start; }
}

/* ---- A-25 meter: the words say it, the bar draws it ---- */
.b-meter { max-width: 30rem; min-width: 0; }
.b-meter__label { margin: 0 0 var(--s-1); }
.b-meter__track { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.b-meter__fill { height: 100%; background: var(--primary); }
.b-meter__cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin-block-start: var(--s-2); color: var(--text-muted); font-size: var(--b-fs-small); }

/* ---- the lead's tools row and the work queues ---- */
.b-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.b-tools:empty { display: none; }
.b-queues { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.b-queue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--s-4);
  align-items: center;
  min-height: 44px;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--primary);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.b-queue:hover { background: var(--surface-2); }
.b-queue[aria-pressed="true"] { border-width: 2px; border-inline-start-width: 4px; border-color: var(--primary); background: var(--surface-2); }
.b-queue__n { grid-row: 1 / span 2; font-size: var(--b-fs-heading); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.b-queue__lab { font-weight: 700; overflow-wrap: anywhere; }
.b-queue__sub { color: var(--text-muted); font-size: var(--b-fs-small); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .b-queues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .b-queues { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- A-18 toolbar: filters as pressed buttons, the search ---- */
.b-toolbar--roster { max-width: none; display: grid; gap: var(--s-2); }
.b-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.b-filters:empty { display: none; }
.b-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.b-filter:hover { background: var(--surface-2); }
.b-filter[aria-pressed="true"] { border-width: 2px; border-color: var(--primary); background: var(--surface-2); }
.b-filter__c { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.b-search { width: 100%; max-width: 20rem; margin-inline-start: auto; }

/* ---- A-11 roster: the table stacks to cards on phones; the detail sits above it on a phone and beside it on a wide screen ---- */
.b-roster-layout { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.b-roster-layout[data-selected="false"] .b-detail { display: none; }
.b-roster-layout[data-selected="true"] .b-detail { order: -1; }
.b-roster-main { min-width: 0; }
.b-roster { padding: 0; overflow: hidden; }
.b-roster .b-table { margin: 0; }
.b-roster .b-table tr { margin: var(--s-2); }
.b-shown { margin: var(--s-2) 0 0; color: var(--text-muted); font-size: var(--b-fs-small); font-variant-numeric: tabular-nums; }
.b-th-text { white-space: nowrap; }
.b-sort { padding: 0; min-width: 44px; min-height: 44px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.b-pick { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
.b-pick input { width: 24px; height: 24px; margin: 0; cursor: pointer; accent-color: var(--primary); }
.b-star { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.b-star.on { color: var(--text); }
.b-star[disabled] { cursor: default; }
.b-namebtn { padding: 0; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--text); font: inherit; font-weight: 700; text-align: start; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.b-yr { display: inline-flex; align-items: center; gap: var(--s-2); font-variant-numeric: tabular-nums; }
.b-dot { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--line-strong); }
.b-cnm { overflow-wrap: anywhere; }
.b-row-sel { background: var(--surface-2); }
.b-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2); }
.b-pv { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); min-width: 0; }
.b-why { display: block; max-width: 24ch; color: var(--text-muted); font-size: var(--b-fs-small); overflow-wrap: anywhere; }
.b-why:empty { display: none; }
.b-none-text { margin: 0; padding: var(--s-6) var(--s-4); text-align: center; }
.b-roster .b-empty { border: 0; border-radius: 0; }
/* phones: the header row is not drawn, but the select-all box stays reachable as the first line of the list */
.b-roster-tbl thead { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; display: block; }
.b-roster-tbl thead tr { display: flex; flex-wrap: wrap; margin: 0; padding: 0 var(--s-2); border: 0; border-radius: 0; background: none; }
.b-roster-tbl thead th { display: block; padding: 0; border: 0; background: none; }
.b-roster-tbl thead th.b-th-text { display: none; }
.b-cell-pick::before, .b-cell-star::before, .b-cell-act::before { content: none; }
.b-roster .b-table td.b-cell-pick, .b-roster .b-table td.b-cell-star { display: inline-flex; width: 50%; padding-block: 0; }
.b-roster .b-table td.b-cell-star { justify-content: flex-end; }
.b-cell-act { display: block; }
.b-roster .b-tag, .b-acts .b-btn { white-space: nowrap; }
@media (min-width: 561px) {
  .b-roster .b-table tr { margin: 0; }
  .b-roster-tbl thead { display: table-header-group; }
  .b-roster-tbl thead tr { display: table-row; padding: 0; background: none; }
  .b-roster-tbl thead th { display: table-cell; padding: var(--s-2) var(--s-4); border-block-end: 1px solid var(--line); background: var(--surface-2); }
  .b-roster-tbl thead th.b-th-text { display: table-cell; white-space: nowrap; }
  .b-roster .b-table td.b-cell-pick, .b-roster .b-table td.b-cell-star { display: table-cell; width: auto; padding-block: var(--s-2); }
  .b-cell-act { display: table-cell; }
  .b-roster-tbl td { vertical-align: middle; }
}
@media (min-width: 1280px) {
  .b-roster-layout[data-selected="true"] { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
  .b-roster-layout[data-selected="true"] .b-detail { order: 0; }
}

/* ---- the detail panel ---- */
.b-detail { min-width: 0; }
.b-detail__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-block-end: var(--s-4); }
.b-detail__who { min-width: 0; }
.b-detail__who .b-h3 { margin: 0; overflow-wrap: anywhere; }
.b-detail__who .b-muted { margin: var(--s-1) 0 0; }
.b-detail__act { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-2) var(--s-4); }
.b-detail__none { margin: 0; }
.b-detail__secs { display: grid; gap: var(--s-5); }
.b-sibs { margin-block-end: var(--s-2); }
.b-sibs:empty { display: none; }
.b-sib { margin: 0 0 var(--s-1); color: var(--text-muted); font-size: var(--b-fs-small); }
.b-sib__name { font-weight: 700; color: var(--text); }
.b-dgrid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.b-dcol { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.b-dsec__h { margin: 0 0 var(--s-2); font-size: var(--b-fs-body); font-weight: 700; }
.b-part { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; }
.b-part__box { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: var(--b-fs-small); font-weight: 700; }
.b-part.on .b-part__box { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.b-part__label { overflow-wrap: anywhere; }
.b-listing { font-weight: 700; }
.b-listing.zero { color: var(--text-muted); font-weight: 400; }
.b-recs { display: grid; gap: var(--s-5); }
.b-rline { padding-block: var(--s-1); overflow-wrap: anywhere; }
.b-rline__d { display: block; color: var(--text-muted); }
@media (min-width: 768px) {
  .b-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- A-24 bulk bar: the one sticky element; the page keeps room for it and scroll-padding keeps a focused row clear of it ---- */
.b-bulkbar {
  position: sticky;
  inset-block-end: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border-block-start: 1px solid var(--line-strong);
  background: var(--surface);
}
.b-bulkbar .b-select, .b-bulkbar .b-btn { width: 100%; }
.b-bulkbar__count { font-weight: 700; }
.b-has-bar { scroll-padding-block-end: 14rem; }
.b-page.has-bar .b-app-main { padding-block-end: var(--s-8); }
@media (min-width: 561px) {
  .b-bulkbar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4); }
  .b-bulkbar__count { margin-inline-end: auto; }
  .b-bulkbar .b-select, .b-bulkbar .b-btn { width: auto; }
  .b-bulkbar .b-select { min-width: 14rem; }
  .b-has-bar { scroll-padding-block-end: 8rem; }
}

/* ---- Class Manager: the upload card, the preview table, the class rows ---- */
.b-upload > * + * { margin-block-start: var(--s-4); }
.b-upload [hidden] { display: none !important; }
.b-callout { margin: 0; padding: var(--s-4); border-inline-start: 4px solid var(--info); border-radius: var(--r-sm); background: var(--info-tint); }
.b-filebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.b-filebar__name { max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--b-fs-small); }
.b-fileinput:focus-visible + .b-btn { outline: 3px solid var(--focus); outline-offset: 2px; }
.b-details { margin: 0; }
.b-details > summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; cursor: pointer; }
.b-details .b-textarea { font-family: ui-monospace, monospace; font-size: 1rem; margin-block-start: var(--s-2); }
.b-counts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.b-counts b { font-weight: 700; }
.b-cb { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; cursor: pointer; }
.b-cb input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--primary); }
.b-segment-group { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }
.b-segment__btn[aria-pressed="true"] { border-width: 2px; border-color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
.b-rowtag { display: inline-flex; margin-block-end: var(--s-1); }
.b-reason { margin: var(--s-1) 0 0; }
.b-tnote { margin: var(--s-1) 0 0; color: var(--text-muted); font-size: var(--b-fs-small); }
.b-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.b-pager p { margin: 0; }
.b-preview-wrap { max-width: 100%; }
.b-preview-wrap .b-table td.c-email { font-weight: 700; overflow-wrap: anywhere; }
.b-rowline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-block: var(--s-2); border-block-end: 1px solid var(--line); }
.b-rowline:last-child { border-block-end: 0; }
.b-rowline__y { min-width: 4ch; font-weight: 700; font-variant-numeric: tabular-nums; }
.b-rowline__n { margin-inline-end: auto; color: var(--text-muted); overflow-wrap: anywhere; }
.b-sendblock > * + * { margin-block-start: var(--s-2); }

/* ---- the Adoption report ---- */
.b-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); }
.b-controls .b-field { margin: 0; }
.b-controls .b-select { min-width: 12rem; }
.b-report-tiles { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.b-report-tiles .b-stat-card { min-width: 0; }
.b-counted { margin: 0; }
.b-twrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.b-twrap .b-table { margin: 0; }
.b-table td.n, .b-table th.n { font-variant-numeric: tabular-nums; }
.b-table td.g { overflow-wrap: anywhere; }
.b-table tfoot, .b-table tfoot tr, .b-table tfoot th { display: block; }
.b-table tfoot tr { margin-block-start: var(--s-4); padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); font-weight: 700; }
.b-table tfoot th { padding: var(--s-2) 0; text-align: start; }
@media (min-width: 561px) {
  .b-report-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-table td.n, .b-table th.n { text-align: end; }
  .b-table tfoot { display: table-footer-group; }
  .b-table tfoot tr { display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; }
  .b-table tfoot th { display: table-cell; padding: var(--s-2) var(--s-4); }
  .b-table tfoot th, .b-table tfoot td { border-block-end: 0; }
}

/* ---- What your families see (read-only), Message Center ---- */
.b-pick-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); }
.b-pick-row .b-field { flex: 1 1 15rem; margin: 0; min-width: 0; }
.b-items { margin: 0; padding: 0; list-style: none; }
.b-items li { padding-block: var(--s-2); border-block-start: 1px solid var(--line); overflow-wrap: anywhere; }
.b-items li:first-child { border-block-start: 0; }
.b-items__t { font-weight: 700; }
.b-items__m { display: block; color: var(--text-muted); font-size: var(--b-fs-small); }
.b-skel { height: var(--s-5); border-radius: var(--r-sm); background: var(--surface-2); margin-block-end: var(--s-2); }
.b-skel--title { width: 40%; height: var(--s-6); }
.b-footnote { margin: 0; max-width: var(--measure); color: var(--text-muted); font-size: var(--b-fs-small); overflow-wrap: anywhere; }
.b-compose > * + * { margin-block-start: var(--s-4); }
.b-compose .b-field { margin-block-end: 0; }
.b-checks { display: grid; gap: 0; }
.b-summary-card { padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-2); }
.b-summary-card__n { font-size: var(--b-fs-heading); font-weight: 700; font-variant-numeric: tabular-nums; }
.b-who { max-height: 12rem; margin: var(--s-2) 0 0; padding-inline-start: var(--s-5); overflow: auto; }
.b-who .skip { color: var(--text-muted); }
.b-sent-list { margin: 0; padding: 0; list-style: none; }
.b-sent-list li { display: grid; gap: var(--s-1); padding-block: var(--s-2); border-block-start: 1px solid var(--line); overflow-wrap: anywhere; }
.b-sent-list li:first-child { border-block-start: 0; }
.b-sent-list__t { font-weight: 700; }
.b-sent-list__m { color: var(--text-muted); font-size: var(--b-fs-small); }

/* The operator console on the identity (plan 05-12; UI-SPEC 5.3 A-15, A-17, 5.4 admin row, 6.4, 7.5). Sixth file of site/blocks.css, after counselor.css.
   Admin-only leftovers: the console's layout and its legacy component names stay in design/admin/index.html (D-20); what is new here is the
   confirmation dialog and the setup rail, both built from the shared blocks (b-dialog, b-btn, b-tag, b-setup-steps, whose styles live in
   app-core.css and counselor.css). Same rules as the other block files: every selector starts with .b-; role tokens only, never a hex value;
   min-width first and only the four breakpoints; spacing from --s-1, --s-2, --s-4 to --s-8; 44px targets; never outline:none; nothing animates. */

/* ---- A-15: the one confirmation. The destructive confirm is outlined in the alert colour, never filled (org-admin.css owns that rule) ---- */
.b-org-dlg { color: var(--text); }
.b-org-dlg p { margin: 0 0 var(--s-2); overflow-wrap: anywhere; }
.b-org-dlg #orgDlgWarn { margin-block-start: var(--s-2); }
.b-org-dlg #orgDlgExtra { margin-block-start: var(--s-2); }

/* ---- A-17: the org-setup rail above the editor's tabs. Five steps; each title is the control that opens the tab it lives in ---- */
.b-org-rail { margin-block: var(--s-4) var(--s-5); }
.b-rail-go {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: start;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Server-rendered pages (plan 05-13; UI-SPEC 5.3 S-01 to S-04, A-26; 8 and 11). Appended to site/blocks.css by tools/build-full-site.py after
   app.css, counselor.css and admin.css. Every server-rendered page (server/pages.ts page()) draws from these classes and the shared primitives in
   app-core.css (.b-field, .b-input, .b-btn, .b-dialog); it never redeclares :root.
   Rules (the same as the other block files): every selector starts with .b-; role tokens only, never a hex value; min-width first, only the
   four breakpoints; spacing from --s-1, --s-2, --s-4, --s-5, --s-6, --s-7, --s-8; 44px minimum hit area on controls, 48px on inputs; never
   outline:none (base.css owns the one focus ring).
   The legacy hook classes the server markup keeps (.muted, .note, .addr, .authrow, .lockup) are styled only inside a card, so nothing else moves. */

/* ---- The page frame: the body carries b-page b-server, the card sits centred on the ground ---- */
.b-server {
  display: flex;
  min-height: 100vh;
  padding: var(--s-4);
}
.b-server__main {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-block: var(--s-4);
}

/* ---- S-01: the sign-in card (440px). S-02 and S-04 are this card with a modifier. ---- */
.b-signin-card {
  width: 100%;
  max-width: 440px;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--text);
  overflow-wrap: anywhere;
}
@media (min-width: 561px) {
  .b-signin-card { padding: var(--s-6); }
}
.b-signin-card h1 {
  margin: 0 0 var(--s-2);
  font-size: var(--b-fs-heading);
  font-weight: 700;
  line-height: var(--b-lh-heading);
  letter-spacing: -0.01em;
}
.b-signin-card h2 {
  margin: 0 0 var(--s-2);
  font-size: var(--b-fs-body);
  font-weight: 700;
  line-height: var(--b-lh-heading);
}
.b-signin-card p {
  margin: 0 0 var(--s-4);
  color: var(--text-muted);
  font-size: var(--b-fs-body);
  line-height: var(--b-lh-body);
}
.b-signin-card p a,
.b-signin-card .b-signin-card__link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.b-signin-card p a:hover,
.b-signin-card .b-signin-card__link:hover { color: var(--primary-700); }
.b-signin-card hr {
  margin: var(--s-5) 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.b-signin-card form { margin: 0; }
.b-signin-card .b-btn--block { width: 100%; }
.b-signin-card .b-btn { margin-block-start: var(--s-2); }
.b-signin-card .muted { font-size: var(--b-fs-small); line-height: var(--b-lh-small); }
.b-signin-card .addr { color: var(--text); overflow-wrap: anywhere; }
.b-signin-card .authrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
}
.b-signin-card .note {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--info-tint);
  color: var(--text);
  font-size: var(--b-fs-small);
  line-height: var(--b-lh-small);
}
.b-signin-card .b-btn + .muted { margin-block-start: var(--s-2); }
.b-signin-card form + p { margin-block-start: var(--s-4); }
/* The native dialog inside a card: the shared sheet makes it a full-height sheet on phones; from 561px it is as tall as its content
   (app-core.css gives it height:auto, which a modal dialog stretches to the viewport; fit-content is what centres it). */
@media (min-width: 561px) {
  .b-signin-card .b-dialog { height: fit-content; }
}
/* A form that holds several fields under one question ("Have a code already?"). */
.b-signin-card__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.b-signin-card__set legend { margin: 0 0 var(--s-2); padding: 0; font-weight: 700; }
/* Text links that stand alone on a line still get a 44px hit area. */
.b-signin-card__help-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---- Who is signing in: the product row on the apex, the Phase 3 lockup on an org host (UI-SPEC 8) ---- */
.b-brandrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  color: var(--cs-cobalt);
  font-size: var(--b-fs-body);
  font-weight: 700;
  line-height: 1.25;
}
.b-brandrow__mark { flex: none; width: 32px; height: 32px; color: var(--cs-cobalt); }
.b-lockup { margin: 0 0 var(--s-6); text-align: center; }
.b-lockup .b-lockup__logo {
  display: block;
  margin: 0 auto;
  height: 72px;   /* the partner leads on its own pages: at least 72px tall, aspect ratio kept, never cropped (quick 261024-wgq) */
  width: auto;
  max-width: 280px;
  object-fit: contain;
}
.b-signin-card .b-lockup__name {
  margin: 0;
  color: var(--text);
  font-size: var(--b-fs-heading);
  font-weight: 700;
  line-height: var(--b-lh-heading);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.b-signin-card .b-lockup__with {
  margin: var(--s-2) 0 0;
  color: var(--text-muted);
  font-size: var(--b-fs-small);
  line-height: var(--b-lh-small);
}
/* The product name never takes the org colour: --cs-cobalt is pinned and a tenant theme cannot reach it. */
.b-lockup__cs { color: var(--cs-cobalt); font-weight: 700; }

/* ---- Google first on an org host, then the emailed code below ---- */
.b-or {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-5) 0;
  color: var(--text-muted);
  font-size: var(--b-fs-small);
}
.b-or::before, .b-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.b-gbtn { gap: var(--s-4); }
.b-gbtn svg { flex: none; }

/* ---- S-02: the confirm card (one filled button; the disclosure, when there is one, sits above it) ---- */
.b-confirm-card form { margin-block: var(--s-4); }

/* ---- S-04: the error card (the problem, the next step, one link) ---- */
.b-error-card { border-inline-start: 4px solid var(--line-strong); }

/* ---- S-03: the holding card (mark, one line, no navigation) ---- */
.b-holding {
  width: 100%;
  max-width: 440px;
  text-align: center;
  color: var(--text);
  overflow-wrap: anywhere;
}
.b-holding__mark { display: flex; justify-content: center; }
.b-holding__word {
  margin: 0 0 var(--s-4);
  color: var(--cs-cobalt);
  font-size: var(--b-fs-heading);
  font-weight: 700;
  line-height: var(--b-lh-heading);
  letter-spacing: -0.01em;
}
.b-holding h1 {
  margin: 0 0 var(--s-2);
  font-size: var(--b-fs-heading);
  font-weight: 700;
  line-height: var(--b-lh-heading);
  letter-spacing: -0.01em;
}
.b-holding p { margin: 0 0 var(--s-4); color: var(--text-muted); line-height: var(--b-lh-body); }
.b-holding .b-btn { margin-block-start: var(--s-2); }
.b-holding .b-btn--block { width: 100%; }
.b-holding .muted { margin-block-start: var(--s-5); font-size: var(--b-fs-small); line-height: var(--b-lh-small); }

/* ---- A-26: the staff-visibility disclosure on confirm pages (the block's markup is unchanged) ---- */
.b-disclosure {
  margin: var(--s-4) 0;
  padding: var(--s-4);
  border-inline-start: 4px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  text-align: start;
}
.b-signin-card .b-disclosure p {
  margin: 0 0 var(--s-2);
  color: var(--text);
  font-size: var(--b-fs-body);
  line-height: var(--b-lh-small);
}
.b-signin-card .b-disclosure .cs-d-title,
.b-signin-card .b-disclosure .cs-d-head { font-weight: 700; }
.b-signin-card .b-disclosure .cs-d-head { margin-block-start: var(--s-4); }
.b-disclosure ul { margin: 0 0 var(--s-2); padding-inline-start: var(--s-5); }
.b-disclosure li { margin: 0 0 var(--s-1); color: var(--text); line-height: var(--b-lh-small); }
.b-signin-card .b-disclosure .cs-d-close { margin-block-end: 0; }

/* ---- The invitee line on a named invitation page ---- */
.b-signin-card .b-signin-card__invitee { color: var(--text); font-weight: 700; }

/* What an org adds to its families' pages (plan 07-06; UI-SPEC B1-B4, C; blocks A-29 b-org-content, A-30 b-org-links, the origin line, the
   "adjusted by" line and the search tag). Appended to site/blocks.css by tools/build-full-site.py after server.css.
   Rules (the same as the other block files): every selector starts with .b-; role tokens only, never a hex value; min-width first, only the
   four breakpoints; spacing from --s-1, --s-2, --s-4, --s-5, --s-6, --s-7, --s-8; 44px minimum hit area on links; never outline:none.
   These blocks sit on legacy app pages (plan, Bookshelf), so nothing here may depend on .b-page being on the body. */

/* ---- A-29: the "From {Org}" group ---- */
.b-org-content { margin-block: var(--s-6); }
.b-org-content__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-4);
}
.b-org-content__logo { height: 24px; width: auto; max-width: 96px; object-fit: contain; background: var(--surface); }
.b-org-content__title {
  margin: 0;
  min-width: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;          /* an org name up to the 60-character cap wraps, never truncates */
}

/* One note: a card with a 4px rule in the primary colour. */
.b-org-card {
  margin-block-end: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--primary);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  overflow-wrap: anywhere;
}
@media (min-width: 561px) {
  .b-org-card { padding: var(--s-5); }
}
.b-org-card__title { margin: 0 0 var(--s-2); font-size: 1rem; font-weight: 700; line-height: 1.25; }
.b-org-card__body { max-width: 66ch; font-size: 1rem; line-height: 1.6; }
.b-org-card__body p { margin: 0 0 var(--s-4); }
.b-org-card__body ul, .b-org-card__body ol { margin: 0 0 var(--s-4); padding-inline-start: var(--s-5); }
.b-org-card__body > :last-child { margin-block-end: 0; }

/* The Bookshelf group reuses the page's own article cards (.card, .cards); only the group spacing is ours. */
.b-org-content--bookshelf { margin-block-start: var(--s-7); }
.b-org-article { overflow-wrap: anywhere; }
.b-org-article:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- A-30: the structured link list, one link per line, each followed by where it goes ---- */
.b-org-links { margin-block-start: var(--s-4); max-width: 66ch; }
.b-org-links__title { margin: 0 0 var(--s-1); font-size: 0.875rem; font-weight: 700; line-height: 1.45; }
.b-org-links__list { margin: 0; padding: 0; list-style: none; }
.b-org-links__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
}
.b-org-links__item a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.15em; min-width: 0; }
.b-org-links__item a:hover { color: var(--primary-700); }
.b-org-links__item a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The host, in muted small text and not underlined; a long host wraps at any character. */
.b-link-host { color: var(--text-muted); font-size: 0.875rem; font-weight: 400; text-decoration: none; overflow-wrap: anywhere; }

/* ---- Origin line (an org article's page), search tag, and the quiet "adjusted by" line ---- */
.b-org-origin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.b-org-origin__label { min-width: 0; }
.b-org-tag {
  display: block;
  margin-block-start: var(--s-1);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.b-org-adjusted {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-4);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
}
/* The info shape (a rounded square, the same as the info tag), drawn so the sentence stays the accessible text. */
.b-org-adjusted::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 2px;
  background: currentColor;
}

/* The Content tab of the organization editor in /admin (plan 07-07; UI-SPEC surface A; blocks A-32 b-piece-row, A-33 b-field editor, A-34 b-diff).
   Appended to site/blocks.css by tools/build-full-site.py after org-content.css. The admin page is never themed by an org, so every colour is
   a role or status token and nothing here is a hex value. Same rules as the other block files: every selector starts with .b-; min-width
   first and only the four breakpoints; spacing from --s-1, --s-2, --s-4, --s-5, --s-6, --s-7, --s-8; 44px targets; never outline:none;
   nothing animates; grid tracks are minmax(0, ...). The admin page is not a .b-page, so nothing here relies on that class. */

.b-content { min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.b-content :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.b-content .btn { min-height: 44px; }
.b-content select, .b-content input[type="text"], .b-content textarea {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
}
.b-content textarea { min-height: 96px; resize: vertical; }
.b-content label { display: block; font-size: 0.875rem; font-weight: 700; margin-block-end: var(--s-1); }
.b-content .org-chk { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; font-size: 1rem; font-weight: 400; }
.b-content .org-chk input { width: 20px; min-height: 20px; height: 20px; flex: 0 0 auto; }

/* ---- the draft line, tiles and sub-section tabs (A1, A2) ---- */
.b-draftline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-block-end: var(--s-4); }
.b-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-block-end: var(--s-5); }
.b-tile { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.b-tile__n { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.b-tile__label { font-size: 0.875rem; font-weight: 700; color: var(--text-muted); }
@media (min-width: 768px) {
  .b-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.b-subnav { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-block-end: var(--s-5); }
.b-subnav__select { flex: 1 1 100%; }
.b-content .b-subtabs { display: none; }
.b-subnav__right { display: flex; flex: 1 1 100%; }
.b-subnav__right .btn { width: 100%; }
@media (min-width: 561px) {
  .b-subnav__select { display: none; }
  .b-content .b-subtabs { display: flex; flex: 1 1 auto; }
  .b-subnav__right { flex: 0 0 auto; }
  .b-subnav__right .btn { width: auto; }
}

/* ---- loading: three static rows, nothing animates ---- */
.b-skeleton__row { height: 44px; margin-block-end: var(--s-2); border-radius: var(--r-sm); background: var(--surface-2); }

/* ---- Stones: list column and editor column (A3) ---- */
.b-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.b-split__list, .b-split__main { min-width: 0; }
.b-stone-list { display: none; list-style: none; margin: 0; padding: 0; }
.b-stone-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  width: 100%; min-height: 44px; padding: var(--s-2) var(--s-4);
  border: 0; border-inline-start: 4px solid transparent; background: transparent; color: var(--text);
  font: inherit; text-align: start; cursor: pointer;
}
.b-stone-row:hover { background: var(--surface-2); }
.b-stone-row[aria-current="true"] { border-inline-start-color: var(--primary); background: var(--surface-2); }
.b-stone-row__title { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.b-stone-row__count { flex: 1 1 100%; }
@media (min-width: 1024px) {
  .b-split { grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-6); }
  .b-stone-select { display: none; }
  .b-stone-list { display: block; }
}

.b-editor-head { margin-block-end: var(--s-5); }
.b-editor-head__title { margin: 0 0 var(--s-1); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.b-editor-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: var(--s-2) 0; }
.b-editor-head__controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-4); margin-block-start: var(--s-4); }
.b-editor-head__goal { margin: 0; }
.b-seg { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }
.b-seg .btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.b-editor-section { margin-block-end: var(--s-6); }
.b-editor-section > h3 { margin: 0 0 var(--s-4); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.b-glyph { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; font-size: 0.75rem; line-height: 1; }
.b-content .tag.info { background: var(--info-tint); color: var(--text); }

.b-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-block-end: var(--s-4); }
.b-lifecycle__actions { margin-block: var(--s-4) var(--s-5); }

/* ---- A-32: one piece of a Stone ---- */
.b-piece-row { padding: var(--s-4); margin-block-end: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.b-piece-row.is-edited { border-inline-start: 4px solid var(--primary); }
.b-piece-row__label { margin: 0 0 var(--s-1); font-size: 0.875rem; font-weight: 700; color: var(--text-muted); }
.b-piece-row__text { margin: 0 0 var(--s-2); font-size: 1rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.b-piece-row__text--muted { color: var(--text-muted); }
.b-piece-row__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-2); }
.b-piece-row__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.b-piece-row__actions .btn { flex: 1 1 100%; }
.b-piece-row__canon { margin-block: var(--s-2); }
.b-piece-row__canon summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.b-priority { padding: var(--s-4); margin-block-end: var(--s-4); background: var(--surface-2); border-radius: var(--r-md); }
.b-priority.is-hidden { color: var(--text-muted); }
.b-priority__title { margin: 0 0 var(--s-2); font-size: 1rem; font-weight: 700; }
@media (min-width: 561px) {
  .b-piece-row__actions .btn { flex: 0 0 auto; }
}

/* the goal reach notice and other info lines (A-10 info) */
.b-notice { margin: var(--s-2) 0; padding: var(--s-2) var(--s-4); border-inline-start: 4px solid var(--info); background: var(--info-tint); color: var(--text); font-size: 0.875rem; }

/* ---- A-33: the field editor ---- */
.b-field { margin-block: var(--s-2) var(--s-4); }
.b-field__counter { margin: var(--s-1) 0; font-size: 0.875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.b-field__counter--over { color: var(--alert); font-weight: 700; }
.b-field__preview { margin-block: var(--s-2); }
.b-field__preview summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.b-field__preview-body { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.b-field .org-actions .btn { flex: 1 1 100%; }
@media (min-width: 561px) {
  .b-field .org-actions .btn { flex: 0 0 auto; }
}
.b-linkbtn { min-height: 44px; padding: 0; border: 0; background: none; color: var(--primary); text-decoration: underline; font: inherit; font-weight: 700; cursor: pointer; text-align: start; }

/* ---- the Links list editor (A4, A5, A6) ---- */
.b-links-edit { margin: var(--s-5) 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); }
.b-links-edit legend { font-size: 1rem; font-weight: 700; padding-inline: var(--s-2); }
.b-link-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding-block: var(--s-4); border-block-end: 1px solid var(--line); }
.b-link-row:last-child { border-block-end: 0; }
@media (min-width: 768px) {
  .b-link-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; align-items: start; }
}

/* ---- tables that stack on phones (A-11): versions, org items ---- */
.b-versions, .b-items-table { display: block; width: 100%; }
.b-versions tbody, .b-items-table tbody { display: block; }
.b-versions thead, .b-items-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.b-versions tr, .b-items-table tr { display: block; padding: var(--s-2) var(--s-4); border-block-end: 1px solid var(--line); }
.b-versions td, .b-items-table td { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-1) 0; border: 0; }
.b-versions td::before, .b-items-table td::before { content: attr(data-label); flex: 0 0 100%; font-size: 0.875rem; font-weight: 700; color: var(--text-muted); }
.b-versions td:last-child::before, .b-items-table td:last-child::before { content: none; }
.b-versions td[data-label="Actions"] .btn, .b-items-table td[data-label="Actions"] .btn { flex: 1 1 100%; }
@media (min-width: 768px) {
  .b-versions, .b-items-table { display: table; }
  .b-versions tbody, .b-items-table tbody { display: table-row-group; }
  .b-versions thead, .b-items-table thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .b-versions tr, .b-items-table tr { display: table-row; padding: 0; }
  .b-versions td, .b-items-table td { display: table-cell; padding: var(--s-2) var(--s-4); }
  .b-versions td::before, .b-items-table td::before { content: none; }
  .b-versions td[data-label="Actions"] .btn, .b-items-table td[data-label="Actions"] .btn { flex: 0 0 auto; }
}
.b-history, .b-changes { margin-block: var(--s-5); }

/* ---- A-34: what changed, as two or three columns that stack on phones ---- */
.b-diff { margin-block: var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.b-diff h5 { margin: 0 0 var(--s-2); font-size: 1rem; font-weight: 700; }
.b-diff__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.b-diff__head { margin: 0 0 var(--s-1); font-size: 0.875rem; font-weight: 700; color: var(--text-muted); }
.b-diff__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.b-diff__text del { text-decoration: line-through; }
.b-diff__text ins { text-decoration: underline; }
.b-diff__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-4); }
.b-diff__actions .btn { flex: 1 1 100%; }
@media (min-width: 768px) {
  .b-diff__cols--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-diff__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-diff__actions .btn { flex: 0 0 auto; }
}
.b-review-group { margin-block: var(--s-5); }
.b-review-group h3 { margin: 0 0 var(--s-2); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }

/* ---- the confirmation dialog: a destructive confirm is outlined in the alert colour, never filled ---- */
.b-dlg--destructive #orgDlgOk { background: var(--surface); color: var(--alert); border: 1px solid var(--alert); }

/* ---- the owner's preview (A9) ---- */
.b-preview { margin-block: var(--s-6); padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.b-preview__controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-block-end: var(--s-4); }
.b-preview__label { margin: var(--s-4) 0; padding: var(--s-2) var(--s-4); border-inline-start: 4px solid var(--info); background: var(--info-tint); }
.b-preview__view { padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
.b-preview__buttons { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-4); }
@media (min-width: 768px) {
  .b-preview__controls { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
}
.b-resolved h4 { margin: var(--s-4) 0 var(--s-2); font-size: 1rem; font-weight: 700; }
.b-resolved p, .b-resolved li { overflow-wrap: anywhere; }
.b-resolved .is-null { display: none; }

/* ---- empty states, org items table ---- */
.b-empty { padding: var(--s-5); }
.b-empty h3 { margin: 0 0 var(--s-2); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.b-item-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-5); }
.b-order { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.b-lib-chapter h3 { margin: var(--s-5) 0 var(--s-2); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.b-review-modal { padding: var(--s-5); }

/* Banners that name a mode the page is in (Phase 7). Appended to site/blocks.css by tools/build-full-site.py after org-admin.css.
   07-16 puts the counselor's preview banner here (UI-SPEC A-31, D3); 07-12 adds the demo surfaces to this file.
   Rules (the same as the other block files): every selector starts with .b-; role tokens only, never a hex value; min-width first, only the
   four breakpoints; spacing from --s-1, --s-2, --s-4, --s-5, --s-6, --s-7, --s-8; 44px minimum hit area; never outline:none.
   These blocks sit on legacy app pages (plan, Bookshelf), so nothing here may depend on .b-page being on the body. A banner is status UI and is
   never themed by an org: it uses --info, --info-tint and --text only. */

/* ---- A-31: the counselor's preview banner. Not sticky; directly under the header. ---- */
.b-preview-banner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-4);
  padding: var(--s-4);
  border-inline-start: 4px solid var(--info);
  background: var(--info-tint);
  color: var(--text);
}
.b-preview-banner__text { min-width: 0; }
/* The student's first name and the org name can be long: they wrap at any character and are never truncated. */
.b-preview-banner__lead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.b-preview-banner__word { font-weight: 700; }
.b-preview-banner__note {
  margin: var(--s-1) 0 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.b-preview-banner__exit,
.b-preview-banner__retry {
  width: 100%;
  min-height: 44px;
}
.b-preview-banner__exit:focus-visible,
.b-preview-banner__retry:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.b-preview-banner__error {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
  padding-block-start: var(--s-2);
}
@media (min-width: 561px) {
  .b-preview-banner { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
  .b-preview-banner__exit,
  .b-preview-banner__retry { width: auto; flex: none; }
  .b-preview-banner__error { flex: 1 0 100%; flex-direction: row; align-items: center; flex-wrap: wrap; }
}

/* ---- The shared message bar (08-10; R-9, R-11): one bar directly below the nav, like a streaming service's payment notice. Not sticky.
   Families see it for the May 1 senior message and the access-ended state; staff reuse it in 08-07. Status UI: --info and --text only. ---- */
.b-message-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
  padding: var(--s-4);
  border-inline-start: 4px solid var(--info);
  background: var(--info-tint);
  color: var(--text);
}
.b-message-bar__text {
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.b-message-bar__link {
  width: 100%;
  min-height: 44px;
}
.b-message-bar__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (min-width: 561px) {
  .b-message-bar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .b-message-bar__link { width: auto; flex: none; }
}

/* ---- Phase 7 plan 07-12: the demo host's surfaces (UI-SPEC E1, E2, E3, A-22 demo variant, A-35, S-05) ----
   The demo banner is status UI in the pinned product colours: it reuses .b-sample-banner (--cs-spark ground, --text ink) and is never themed by an org. */

/* ---- A-22 demo variant: line 1 says it is made up; line 2 (only with a persona) says who is viewed and holds the two controls. ---- */
.b-sample-banner--demo {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--s-2);
  font-weight: 400;
  text-align: start;
}
.b-demo-banner__lead { margin: 0; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.b-demo-banner__lead strong { font-weight: 700; }
.b-demo-banner__row { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); }
/* The persona's name and role can be long: they wrap at any character and are never cut. */
.b-demo-banner__who { margin: 0; min-width: 0; font-size: 0.875rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.b-demo-banner__form { margin: 0; display: contents; }
.b-demo-banner__link,
.b-demo-banner__btn {
  width: 100%;
  min-height: 44px;
  background: var(--surface);
  border-color: var(--text);
  color: var(--text);
}
.b-demo-banner__link:focus-visible,
.b-demo-banner__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (min-width: 561px) {
  .b-demo-banner__row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
  .b-demo-banner__who { flex: 1 1 auto; }
  .b-demo-banner__link,
  .b-demo-banner__btn { width: auto; flex: none; }
}

/* ---- On a server page the body is a flex row (server.css); with the banner in it the body becomes a column and the banner runs edge to edge. ---- */
.b-server--demo { flex-direction: column; }
.b-server--demo > .b-sample-banner--demo { flex: none; margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-4); }
.b-server--demo .b-server__main { padding-block-start: 0; }

/* ---- The form note: one muted line under a control that would send mail on a demo host (E2). It follows its control, so it goes with it. ---- */
.b-demo-note { margin: var(--s-2) 0 0; color: var(--text-muted); font-size: 0.875rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.b-actions[hidden] + .b-demo-note,
.b-actions:has(> [data-sends-mail][hidden]) + .b-demo-note { display: none; }

/* ---- S-05: the entry page. The page() card wrapper is .b-demo-entry (a centred column, max 720px); the cards sit side by side from 768px. ---- */
.b-demo-entry {
  width: 100%;
  max-width: 720px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.b-demo-entry .b-lockup__name {
  margin: 0;
  color: var(--text);
  font-size: var(--b-fs-heading);
  font-weight: 700;
  line-height: var(--b-lh-heading);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.b-demo-entry .b-lockup__with { margin: var(--s-2) 0 0; color: var(--text-muted); font-size: var(--b-fs-small); line-height: var(--b-lh-small); }
.b-demo-entry .b-lockup { margin-block-end: var(--s-4); }
.b-demo-entry__main > * + * { margin-block-start: var(--s-5); }
.b-demo-entry__title { margin: 0; font-size: var(--b-fs-display); font-weight: 700; line-height: var(--b-lh-display); letter-spacing: -0.01em; text-align: center; }
.b-demo-entry__lede { margin: var(--s-2) 0 var(--s-4); color: var(--text-muted); font-size: var(--b-fs-body); line-height: var(--b-lh-body); text-align: center; }
.b-demo-entry__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.b-demo-entry__footer { margin: var(--s-6) 0 0; color: var(--text-muted); font-size: var(--b-fs-small); line-height: var(--b-lh-small); text-align: center; }
.b-demo-entry__footer a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.15em; }
.b-demo-entry__footer a:hover { color: var(--primary-700); }
.b-demo-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.b-demo-card__title { margin: 0 0 var(--s-2); font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); }
.b-demo-card__body { margin: 0 0 var(--s-4); color: var(--text-muted); font-size: var(--b-fs-body); line-height: var(--b-lh-body); }
/* Small type for the three points on a phone, so the first filled button is inside the first screen (375x667); Body from 561px. */
.b-demo-card__points { margin: 0 0 var(--s-4); padding-inline-start: var(--s-5); font-size: var(--b-fs-small); line-height: var(--b-lh-small); }
.b-demo-card__points li + li { margin-block-start: var(--s-1); }
.b-demo-card__form { margin: 0; }
.b-demo-card__form + .b-demo-card__form { margin-block-start: var(--s-2); }
.b-demo-card__form .b-btn--block { width: 100%; }
/* A secondary button's text may run to two lines: the button grows to fit it (min-height, not a fixed height) and never clips or squeezes it. */
.b-demo-card__form .b-btn { height: auto; padding-block: var(--s-2); line-height: var(--b-lh-small); text-align: center; }
.b-demo-card__form:first-of-type { margin-block-start: auto; }
@media (min-width: 561px) {
  .b-demo-card { padding: var(--s-5); }
  .b-demo-entry .b-lockup { margin-block-end: var(--s-6); }
  .b-demo-entry__lede { margin: var(--s-4) 0 var(--s-6); }
  .b-demo-card__points { margin-block-end: var(--s-5); font-size: var(--b-fs-body); line-height: var(--b-lh-body); }
}
@media (min-width: 768px) {
  .b-demo-entry__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}

/* ---- A-35: the visitor's outbox. The table is the A-11 block (cards under 561px). The detail replaces the list below 1024px, with a Back button,
   and sits under it from 1024px. ---- */
.b-outbox { display: grid; gap: var(--s-5); }
.b-outbox__count { margin: 0 0 var(--s-2); font-size: var(--b-fs-small); font-variant-numeric: tabular-nums; }
.b-outbox__count:empty { display: none; }
.b-outbox[data-detail="open"] .b-outbox__list { display: none; }
.b-outbox__detail {
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow-wrap: anywhere;
}
.b-outbox__back { width: 100%; margin-block-end: var(--s-4); }
.b-outbox__subject { margin: 0 0 var(--s-2); font-size: var(--b-fs-heading); font-weight: 700; line-height: var(--b-lh-heading); }
.b-outbox__meta { margin: 0 0 var(--s-4); font-size: var(--b-fs-small); line-height: var(--b-lh-small); color: var(--text-muted); }
.b-outbox__meta div { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.b-outbox__meta dt { font-weight: 700; }
.b-outbox__meta dd { margin: 0; font-variant-numeric: tabular-nums; }
/* The message is plain text: it keeps its line breaks and wraps, whatever it holds. */
.b-outbox__text { margin: 0; font: inherit; font-size: var(--b-fs-body); line-height: var(--b-lh-body); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 561px) {
  .b-outbox__detail { padding: var(--s-5); }
  .b-outbox__back { width: auto; }
}
@media (min-width: 1024px) {
  .b-outbox[data-detail="open"] .b-outbox__list { display: block; }
  .b-outbox__back { display: none; }
}