/* App styles. Every value comes from design/tokens.css (the "Ledger" look, RULES 5.1); nothing here picks a color,
   size or space of its own. */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--c-page); color: var(--c-ink); font-family: var(--font);
  font-size: var(--fs-body); line-height: var(--lh-body); }
button, select, input { font: inherit; font-size: var(--fs-control); color: var(--c-ink); }
button { background: var(--c-surface-raised); border: 1px solid var(--c-ring); border-radius: var(--r-control);
  height: var(--l-control-height); padding: 0 var(--sp-3); cursor: pointer; }
button:hover { background: var(--c-hover-wash); }
/* interaction is tint, never travel (S76, design\craft\principles.md 12): colors settle in tokens motion.hover_ms, a
   pressed control takes the selected wash, and the focus ring stands 2px clear of the control (14) */
button, select, input, .jump a { transition: background-color var(--m-hover), border-color var(--m-hover), color var(--m-hover); }
button:active:not([disabled]):not(.primary) { background: var(--c-selected-wash); }
button.primary:active:not([disabled]) { filter: brightness(0.9); }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* numbers settle, never count (principles 3): on a page's first draw a figure fades in once (card.js KPI_MOTION) */
@keyframes kpi-settle { from { opacity: 0; } }
#page.motion-fresh .head-fig .v, #page.motion-fresh .figure .value, #page.motion-fresh .j-num,
  #page.motion-fresh .br-big, #page.motion-fresh .br-mid { animation: kpi-settle var(--m-settle) var(--m-ease) both; }
/* page to page (hub for Sam, Oct 9: fluid): the shell stays put and the new page's content arrives softly, from a light
   veil rather than from nothing, so there is never an empty frame (tokens motion.page_ms) */
@keyframes kpi-arrive { from { opacity: 0.4; } }
#page.motion-fresh > :not(.page-skel) { animation: kpi-arrive var(--m-page) var(--m-ease) both; }
/* the same page for a new range or bar size: its charts morph (card.js KPI_MOTION) and its new figures cross-fade in;
   the old sections, dimmed while they wait, never fade again */
#page.motion-morph > :not(.stale) .head-fig .v, #page.motion-morph > :not(.stale) .figure .value,
  #page.motion-morph > :not(.stale) .j-num, #page.motion-morph > :not(.stale) .answer { animation: kpi-settle var(--m-settle) var(--m-ease) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
button[disabled] { color: var(--c-ink-muted); cursor: not-allowed; background: transparent; }
button.on { background: var(--c-selected-wash); border-color: var(--c-data); font-weight: var(--fw-medium); }
button.primary { background: var(--c-data); border-color: var(--c-data); color: #fff; }
/* S114 (S111's touches, Oct 13): before connecting the top bar's Connect is the one call to action; the checklist step and the
   Data page's lock line say it again as a plain link, not a second and third primary button */
button.as-link { background: transparent; border-color: transparent; color: var(--c-link); padding: 0 var(--sp-2); }
button.as-link:hover { background: transparent; text-decoration: underline; }
select, input { background: var(--c-surface-raised); border: 1px solid var(--c-ring); border-radius: var(--r-control);
  height: var(--l-control-height); padding: 0 var(--sp-2); }
input[type="number"] { width: 72px; }
/* a box to tick is its own size, not a 32 px control, so it sits on its words' line (S76 review r5, D9: To do's header
   box floated about 10 px above its labels) */
input[type="checkbox"], input[type="radio"] { height: auto; padding: 0; }
/* a heading or a line that wraps never leaves one word alone on its last line (S76 review r5, D5: the Brief's title
   line left "Sep-26" by itself at 1280) */
h1, h2, h3, p, .card .title, .card > .answer, .card > .line-row > .answer, .br-head .br-sent { text-wrap: pretty; }
/* one link style everywhere (S76): link blue, underlined only under the pointer, a focus ring like every control */
a { color: var(--c-link); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 2px; }

.topbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: var(--sp-4);
  height: var(--l-top-bar-height); padding: 0 var(--l-page-margin) 0 var(--sp-5); background: var(--c-surface); border-bottom: 1px solid var(--c-ring); }
/* the bar's right end meets the content's right edge (S76 review r1, R14: Connect stood 16 px past the cards), and on a
   wide screen the content's capped edge (Sam, Oct 9 night: content_max_width) */
.topbar { padding-right: max(var(--l-page-margin), calc((100% - var(--l-nav-width) - var(--l-content-max-width)) / 2)); }
/* and the range control moves with the content, the same 24 px before its left edge as at any width (a scrollbar's
   width either way is not seen) */
.topbar > .period { margin-left: max(0px, calc((100vw - var(--l-nav-width) - var(--l-content-max-width)) / 2 - var(--l-page-margin))); }
.practice { font-weight: var(--fw-strong); width: calc(var(--l-nav-width) - var(--sp-5)); }
.period { position: relative; display: flex; align-items: center; gap: var(--sp-1); }
/* one width whatever the range says, its words from the left, so the Week / Month control beside it never moves under
   the pointer (S76 review r3, P8: it moved 10 px when the label changed); a longer range ends in an ellipsis */
.period-label { position: relative; width: 320px; min-width: 0; font-weight: var(--fw-medium); text-align: left; padding-right: 30px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* it opens a menu, so it says so like the card's Menu does (S76 review r2, Q22) */
.period-label::after { content: ""; position: absolute; right: 12px; top: 50%; width: 10px; height: 6px; margin-top: -3px;
  background: var(--chev) no-repeat center; }
.seg { display: flex; }
.seg button { border-radius: 0; margin-left: -1px; position: relative; }
.seg button:disabled { opacity: 0.45; cursor: not-allowed; }   /* S113: a greyed-out bar size looks greyed out */
.grain-why { font-size: var(--fs-small, 12px); line-height: 1.25; color: var(--c-ink-2, #6b6a63); margin-left: 8px; max-width: 250px; }
.seg button.on { z-index: 1; }                      /* the selected button's whole outline shows (Sam, Sep 29) */
.seg button:first-child { border-radius: var(--r-control) 0 0 var(--r-control); margin-left: 0; }
.seg button:last-child { border-radius: 0 var(--r-control) var(--r-control) 0; }
/* S100g: the Provider button names eCW's field in use, in its tint, a small caret to change it (card.js provDecor); the
   name is always written, so the tint is never the only signal. S123 (Sam, Oct 16: "very subtle ... no unique outside
   color band"): a much paler tint and the neighbours' own neutral edge; picked, a thin edge in the field's own color
   (Sam via the hub, Oct 16), never bold, blue or underlined */
.seg button.prov { background: var(--c-provider-tint-resource); padding-right: 4px; }
.seg button.prov.prov-appointment { background: var(--c-provider-tint-appointment); }
.seg button.prov.prov-rendering { background: var(--c-provider-tint-rendering); }
.seg button.prov.on { font-weight: var(--fw-regular); border-color: var(--c-provider-edge-resource); }
.seg button.prov.prov-appointment.on { border-color: var(--c-provider-edge-appointment); }
.seg button.prov.prov-rendering.on { border-color: var(--c-provider-edge-rendering); }
.prov-caret { display: inline-block; margin-left: 4px; padding: 0 4px; font-size: 10px; line-height: 1; color: var(--c-ink-2);
  border-radius: 3px; cursor: pointer; }
.prov-caret:hover, .prov-caret:focus-visible { background: var(--c-hover-wash); outline: 1px solid var(--c-ring); }
.prov-menu { position: absolute; z-index: 40; min-width: 260px; max-width: 340px; background: var(--c-surface-raised);
  border: 1px solid var(--c-ring); border-radius: var(--r-menu); box-shadow: 0 4px 16px rgba(0,0,0,.14); padding: 4px 0; }
.prov-item { display: flex; gap: 8px; align-items: flex-start; width: 100%; border: 0; border-radius: 0; background: transparent;
  text-align: left; padding: 6px 12px; cursor: pointer; font: inherit; color: var(--c-ink); height: auto; }
.prov-item:hover:not([disabled]), .prov-item:focus-visible { background: var(--c-hover-wash); }
.prov-item[disabled] { cursor: default; opacity: .6; }
.prov-item.picked .prov-name::after { content: " \2713"; }
.prov-swatch { flex: none; width: 12px; height: 12px; margin-top: 3px; border-radius: 3px; border: 1px solid var(--c-provider-edge-resource);
  background: var(--c-provider-tint-resource); }
.prov-appointment .prov-swatch { border-color: var(--c-provider-edge-appointment); background: var(--c-provider-tint-appointment); }
.prov-rendering .prov-swatch { border-color: var(--c-provider-edge-rendering); background: var(--c-provider-tint-rendering); }
.prov-head { padding: 6px 10px 8px; font-size: var(--fs-small); color: var(--c-ink-2); border-bottom: 1px solid var(--c-grid); margin-bottom: 4px; white-space: normal; }
.prov-text { display: flex; flex-direction: column; min-width: 0; }
.prov-name { font-weight: var(--fw-medium); }
.prov-words { font-size: var(--fs-small); color: var(--c-ink-muted); white-space: normal; }
.prov-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: var(--c-surface-raised);
  border: 1px solid var(--c-ring); border-radius: var(--r-menu); box-shadow: 0 4px 16px rgba(0,0,0,.14); padding: 8px 16px;
  font-size: var(--fs-small); color: var(--c-ink); max-width: min(560px, 92vw); }
.prov-toast[hidden] { display: none; }
.spacer { flex: 1; }
.switch { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-control); color: var(--c-ink-2); }

.menu { position: absolute; top: calc(var(--l-control-height) + var(--sp-1)); left: 0; z-index: 10; width: 440px;
  padding: var(--sp-4); background: var(--c-surface-raised); border: 1px solid var(--c-ring); border-radius: var(--r-menu);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.menu .row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.menu h4 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-muted); }
.menu .hint { font-size: var(--fs-small); color: var(--c-ink-muted); margin-top: var(--sp-1); }
.menu .err { font-size: var(--fs-small); color: var(--c-status-text-critical); min-height: 0; }

.shell { display: flex; align-items: flex-start; }
.ribbon { position: sticky; top: var(--l-top-bar-height); flex: 0 0 var(--l-nav-width); height: calc(100vh - var(--l-top-bar-height));
  display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) var(--sp-3); border-right: 1px solid var(--c-ring); background: var(--c-surface); }
.ribbon .nav { text-align: left; border: 0; background: transparent; height: 32px; }
.ribbon .nav.on { background: var(--c-selected-wash); color: var(--c-ink); font-weight: var(--fw-strong); }
.ribbon .nav[data-page="my-charts"]::before { content: "+"; margin-right: var(--sp-1); color: var(--c-ink-muted); font-weight: var(--fw-strong); }   /* the plus mark: you can build one (Sam, Oct 8, F125) */
/* the plus hangs in the gutter, so "My charts" starts on the same line as every other name (S76 review r2, Q24) */
.shell > .ribbon .nav[data-page="my-charts"] { position: relative; }
.shell > .ribbon .nav[data-page="my-charts"]::before { position: absolute; left: 2px; margin: 0; }
main { flex: 1; min-width: 0; padding: var(--sp-5) var(--l-page-margin) var(--sp-7); }   /* fills the window, even margins (Sam, Sep 29) */
/* a wide screen (Sam, Oct 9 night): the content stops at content_max_width, centered beside the menu; the side padding
   grows to the half of what is left over (percentages here are of the full width, so the menu's width comes off first) */
main { padding-left: max(var(--l-page-margin), calc((100% - var(--l-nav-width) - var(--l-content-max-width)) / 2));
  padding-right: max(var(--l-page-margin), calc((100% - var(--l-nav-width) - var(--l-content-max-width)) / 2)); }
h1 { font-size: var(--fs-page); font-weight: var(--fw-strong); margin: 0; }
.lede { color: var(--c-ink-2); margin: var(--sp-1) 0 var(--sp-3); }
/* a page's pinned picks (S88, Gross margin: Insurer type and Drug, "anchored ... like freeze panes"): held under the top bar */
.page-filters { position: sticky; top: var(--l-top-bar-height); z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3); padding: var(--sp-2) 0; margin-bottom: var(--sp-4); background: var(--c-page); border-bottom: 1px solid var(--c-ring); }
.page-filters .pf-note { color: var(--c-ink-muted); font-size: var(--fs-small); cursor: help; }
.jump { position: sticky; top: var(--l-top-bar-height); z-index: 5; display: flex; gap: var(--sp-2); padding: var(--sp-2) 0;
  background: var(--c-page); border-bottom: 1px solid var(--c-ring); margin-bottom: var(--sp-5); overflow-x: auto; }
/* the section links look like buttons (Sam, Oct 7, F72: "it's a thing to click. You should put those in like little boxes"):
   each a small bordered box, the section in view filled; one style for every page that has them (the sections of a page,
   the chart types) */
.jump a { display: flex; flex-direction: column; text-decoration: none; color: var(--c-ink-2); font-size: var(--fs-small); white-space: nowrap;
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--c-axis); border-radius: var(--r-control); background: var(--c-surface-raised); cursor: pointer; }
.jump a:hover { background: var(--c-hover-wash); }
.jump a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.jump a.on { background: var(--c-data); border-color: var(--c-data); color: #fff; }
.jump a.on .j-num { color: #fff; }
.jump .j-num { color: var(--c-ink); font-weight: var(--fw-strong); font-size: var(--fs-body); }

/* A click never moves the page (Sam, S86): the browser's own scroll anchoring moved the page by itself when a clicked row
   or a card was drawn again (a table row opening scrolled the page 84 px; Owed, Oct 10). The app keeps the place itself
   (app.js holdAnchor, the redraws' scrollTo), so the page is not an anchor for the browser. */
#page { overflow-anchor: none; }
.section { margin-bottom: var(--l-section-gap); scroll-margin-top: calc(var(--l-top-bar-height) + 60px); }
.section h2 { font-size: var(--fs-section); font-weight: var(--fw-strong); margin: 0 0 var(--sp-3); }
/* the section's headline figures sit on its title's line, not a row of their own (Sam, Oct 4, S33 N14: less space
   between charts, nothing smaller) */
.section:not(.waiting) { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--sp-4); }
.section:not(.waiting) > * { grid-column: 1 / -1; }
.section:not(.waiting) > h2 { grid-column: 1; margin: 0; }
.section:not(.waiting) > .figures { grid-column: 2; margin: 0; }
.section:not(.waiting) > h2 ~ :not(.figures) { margin-top: var(--sp-3); }
.figures { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
/* a section's headline figures are small boxed tiles, the same on every section (Sam, Sep 30; tokens layout.figure_tiles) */
.section > .figures .figure { min-width: var(--l-figure-min-width); padding: var(--sp-1) var(--sp-3); border: var(--ss-card-border);
  border-radius: var(--r-panel); background: var(--ss-card-fill); }
.section > .figures .figure .value { font-size: var(--fs-brief-sentence); }
.section > .figures .figure .vs:empty { display: none; }
.figure .label { font-size: var(--fs-small); color: var(--c-ink-muted); }
.figure .value { font-size: var(--fs-tile-value); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
/* the look's number font goes on figures and numeric cells only, never on names or sentences */
.figure .value.num, .jump .j-num, .tablewrap table.data td:not(:first-child):not(.txt), table.data.sc td:not(:first-child),
  table.data.wl td.wl-num { font-family: var(--ss-number-font); }
/* a menu page being built (S22 chunk 6): its name in the menu in the second ink, one line under its title */
.ribbon .nav.building { color: var(--c-ink-2); }
.ribbon .nav.building.on { color: var(--c-ink); }
.ribbon .nav-star { margin-left: var(--sp-1); font-size: var(--fs-axis); color: var(--c-ink-muted); }   /* built for this practice (S87) */
.building-note { color: var(--c-ink-2); margin: var(--sp-1) 0 var(--sp-4); }
.card .figure.inline { margin: var(--sp-1) 0 var(--sp-2); }
.card .figure.inline .value { font-size: var(--fs-section); }
.money-cell { min-width: 0; }
.ribbon .board-link { margin-top: var(--sp-4); border-top: 1px solid var(--c-ring); border-radius: 0; }
/* the practice's own menu (S108, Sam Oct 13, option A): a small link under the menu; the tiles, each dragged by its arrow,
   each with an on/off switch; the pages off under "Turned off" */
.ribbon .menu-edit-link { order: 99; align-self: flex-start; margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-3); height: auto;
  border: 0; background: transparent; color: var(--c-link); font-size: var(--fs-small); }
.ribbon .menu-edit-link:hover { text-decoration: underline; }
.ribbon .nav-new { margin-left: var(--sp-2); padding: 0 6px; border-radius: 8px; font-size: var(--fs-axis); font-weight: var(--fw-medium);
  background: var(--c-selected-wash); color: var(--c-link); }
.ribbon.menu-editing { gap: var(--sp-1); overflow-y: auto; }
.me-head { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--sp-1) var(--sp-2); font-size: var(--fs-small); color: var(--c-ink-2); }
.me-head strong { color: var(--c-ink); font-weight: var(--fw-strong); }
.me-row { display: flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: 0 var(--sp-2); border-radius: var(--r-control);
  background: var(--c-surface-raised); box-shadow: inset 0 0 0 1px var(--c-grid); cursor: grab; user-select: none; }
.me-row:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
/* the drag (S108b): the tile lifted follows the pointer; the others slide out of its way */
.me-row { position: relative; touch-action: none; }
.me-sorting .me-row:not(.lifted), .me-sorting .me-off-head { transition: transform 150ms ease; }
.me-row.lifted { z-index: 3; cursor: grabbing; box-shadow: 0 6px 18px rgba(0,0,0,0.16), inset 0 0 0 1px var(--c-focus); }
body.me-grabbing, body.me-grabbing * { cursor: grabbing !important; user-select: none; }
.me-off-empty { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-small); color: var(--c-ink-muted); border: 1px dashed var(--c-grid);
  border-radius: var(--r-control); }
.me-row.off .me-name { color: var(--c-ink-muted); }
.me-grip { flex: none; width: 12px; color: var(--c-ink-muted); text-align: center; }
.me-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-always { flex: none; font-size: var(--fs-axis); color: var(--c-ink-muted); }
.me-switch { flex: none; position: relative; width: 28px; height: 16px; padding: 0; border: 0; border-radius: 8px; background: var(--c-axis); cursor: pointer; }
.me-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff;
  transition: left var(--m-settle) var(--m-ease); }
.me-switch[aria-checked="true"] { background: var(--c-data); }
.me-switch[aria-checked="true"]::after { left: 14px; }
.me-off-head { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-1) var(--sp-1); border-top: 1px solid var(--c-ring);
  font-size: var(--fs-small); font-weight: var(--fw-strong); color: var(--c-ink-2); }
.me-off-head.drop { color: var(--c-focus); }
.me-btns { display: flex; gap: var(--sp-2); padding: var(--sp-3) 0 var(--sp-1); }
.me-btns button { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.figure .vs { font-size: var(--fs-small); color: var(--c-ink-2); min-height: 1em; }
.controls { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--l-control-legend-gap); }
.controls .seg button { height: 28px; font-size: var(--fs-small); }
/* a pair of cards governed by one control: one panel holds the control row, the cards and their shared footnote */
.panel { background: var(--ss-panel-fill); border: var(--ss-panel-border); border-radius: var(--r-panel); padding: var(--l-panel-padding); }
.panel > .footnote { margin-top: var(--sp-3); }
/* a pair's lines keep their room whatever the split or view says (Sam, Oct 1: nothing jumps): the footnote and each
   card's one line under its chart hold one line even when empty */
.panel > .footnote, .panel .card > .notes { min-height: calc(var(--fs-small) * 1.42); }   /* the height of one drawn line */
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-small); color: var(--c-ink-2);
  min-height: 18px; margin-bottom: var(--sp-3); }
.legend .key { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; max-width: 100%; min-width: 0; }
.legend .key > span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* a key wider than its card is cut with an ellipsis (F33) */
.legend .swatch { width: 12px; height: 9px; display: inline-block; border: 1px solid transparent; }
.legend .swatch.est { border-style: dashed; }
.legend .swatch.band { width: 14px; height: 12px; }
.legend svg.whisker { width: 10px; height: 12px; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--l-grid-gap); }
.card { background: var(--ss-card-fill); border: var(--ss-card-border); box-shadow: var(--ss-card-shadow); border-radius: var(--r-panel);
  padding: var(--l-card-padding); min-width: 0; }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; }
.card .head { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--l-control-height); }
.card .title { font-size: var(--fs-lede); font-weight: var(--fw-strong); margin: 0; }
.card .tools { margin-left: auto; display: flex; gap: var(--sp-1); }
/* the card's two buttons sit at the head's top on every card, not centred on however tall its figures are (S76 review
   r2, Q6: 34, 27 and 34 px from the card's top on one page) */
.card > .head > .tools { align-self: flex-start; }
.card .tools button { height: 28px; padding: 0 var(--sp-2); font-size: var(--fs-small); }
/* the info button is a drawn circled i, not typed "(i)" (S76); its words stay for screen readers and the hover */
.card .tools button.info-btn, .my-card .tools button.info-btn { position: relative; width: 28px; padding: 0; font-size: 0; }
.tools button.info-btn::before { content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; background: var(--c-ink-2);
  -webkit-mask: var(--icon-info) center / contain no-repeat; mask: var(--icon-info) center / contain no-repeat; }
.tools button.info-btn:hover::before { background: var(--c-ink); }
:root { --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.75' fill='none' stroke='black' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='4.9' r='0.95' fill='black'/%3E%3Cpath d='M8 7.3v4.4' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* chips on the title's row (one row of words): the title never gives way; the chips do first (cut with an ellipsis,
   the whole text in their hover) */
/* a title is never cut (Sam via S17, Oct 1): it keeps its words, wrapping only when its row is too narrow for it and
   the card's buttons; the chips give way first: when the title, the chips and the buttons do not fit on one row the
   chips move to a row of their own under the title (root.fitHead), whole, never cut */
.card .head .title { flex: 0 1 auto; min-width: 0; }
.card .chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; flex: 0 0 auto; }
/* the line under every chart title (DEFINITIONS "How a block is shown"): one short line, wrapped, never cut */
.card .pick { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-control); color: var(--c-ink-2); }
.card .pick select { font: inherit; color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-axis);
  border-radius: var(--r-control); padding: 2px var(--sp-1); max-width: 260px; }
/* a select draws our own quiet chevron, not the browser's (S76 review r1, R22): the same in every menu, light and dark */
:root { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2352514e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c3c2b7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c3c2b7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
select:not([multiple]), .card .pick select { -webkit-appearance: none; appearance: none; padding-right: 26px;
  background-image: var(--chev); background-repeat: no-repeat; background-position: right 9px center; }
/* our own pick list (card.js pickControl, F48): opens directly below its button and scrolls inside */
.pick-wrap { position: relative; }
/* its words and chevron sit on the button's middle line (S76 review r4, S3: they sat off-centre) */
.pick-btn { display: inline-flex; align-items: center; max-width: 320px; overflow: hidden; white-space: nowrap; text-align: left; padding-right: var(--sp-5);
  border: 1px solid var(--c-data); background-color: var(--c-surface); color: var(--c-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234985cf'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center;
  height: 28px; font-size: var(--fs-small); }
.pick-btn:hover { background-color: var(--c-selected-wash); }
.pick-what { color: var(--c-ink-2); flex: 0 0 auto; }
.pick-val { margin-left: 4px; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-medium); }
.pick-list { position: absolute; top: calc(100% + 2px); left: 0; z-index: 30; min-width: 220px; max-width: min(360px, 90vw); display: flex; flex-direction: column;
  gap: 4px; padding: 4px; background: var(--c-surface-raised); border: 1px solid var(--c-ring); border-radius: var(--r-menu);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.pick-list[hidden] { display: none; }
.pick-search { width: 100%; height: 28px; font-size: var(--fs-small); }
.pick-items { max-height: 264px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.pick-opt { border: 0; background: transparent; text-align: left; height: 28px; flex: 0 0 auto; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-size: var(--fs-small); padding: 0 var(--sp-2); }
.pick-opt.on { background: var(--c-selected-wash); font-weight: var(--fw-medium); }
.pick-none { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-small); color: var(--c-ink-muted); }
.pick-none[hidden] { display: none; }
/* the line under a card's title is one slot with one font whether it holds the computed answer or the card's own words:
   which one shows changes with the split, and a change of size moved the buttons and the chart under it (Sam, S86) */
.card > .subtitle { margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink-muted); }
/* the card template (SPEC 1.5, S58; the S57 mockups): figures on the title line, the answer line, one Menu */
.card > .head { flex-wrap: wrap; row-gap: var(--sp-2); }
.card .head-figs { display: flex; gap: var(--sp-3); align-items: stretch; margin-left: var(--sp-4); flex-wrap: wrap; min-width: 0; max-width: 100%; }
/* a wide card's title holds a fixed column, so every card's figures start at the same x down the page (S76 review r1,
   R1: they started wherever the title ended, 532, 667 and 786 px on Cash); a longer title wraps inside its column */
.card { container-type: inline-size; }
/* one head for every card with figures (S76 review r5, D1: from 1280 down the buttons dropped to a row of their own and
   the figures sat 16 px in): a grid of the title (380 px at most), the figures, then the two buttons, always on the
   title's row. The title's baseline meets the figures' numbers: one figure label's line lower (measured: 13.2 px). */
.card > .head:has(> .head-figs) { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr) auto;
  align-items: start; column-gap: var(--sp-4); row-gap: var(--sp-2); }
.card > .head:has(> .head-figs) > .title { grid-column: 1; grid-row: 1; margin-top: calc(var(--fs-axis) * 1.2); }
.card > .head:has(> .head-figs) > .head-figs { grid-column: 2; grid-row: 1; margin-left: 0; }
.card > .head:has(> .head-figs) > .tools { grid-column: 3; grid-row: 1; margin-left: 0; }
.card > .head:has(> .head-figs) > .chips { grid-column: 1 / -1; }
/* a narrower card (a 1024 or half-screen window): the title and its buttons on the first row, the figures on their own under them */
@container (max-width: 859px) {
  .card > .head:has(> .head-figs) { grid-template-columns: minmax(0, 1fr) auto; }
  .card > .head:has(> .head-figs) > .title { margin-top: 0; }
  .card > .head:has(> .head-figs) > .tools { grid-column: 2; }
  .card > .head:has(> .head-figs) > .head-figs { grid-column: 1 / -1; grid-row: 2; }
}
/* top-aligned (S76): every figure's label on one line and every value on one baseline, whatever lines sit under it */
.card .head-fig { display: flex; flex-direction: column; justify-content: flex-start; padding: 1px var(--sp-3); border-left: 2px solid var(--c-ring); min-width: 96px; max-width: 100%; }
.card .head-fig .l { font-size: var(--fs-axis); color: var(--c-ink-muted); line-height: 1.2; white-space: nowrap; }
.card .head-fig .v { font-size: var(--fs-section); font-weight: var(--fw-strong); line-height: 1.15; font-variant-numeric: tabular-nums; }
.card .head-fig .s { font-size: var(--fs-axis); color: var(--c-ink-2); line-height: 1.2; }   /* wraps: never wider than the card */
.card .head-fig .r { font-size: var(--fs-axis); color: var(--c-ink-muted); line-height: 1.2; }   /* the range, under the month (Oct 9); wraps in its own figure: a custom range's words ran into the next figure on a phone (S77) */
.card > .answer { margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink); }
.card-menu .dl-menu button { border: 0; background: transparent; text-align: left; height: 28px; font-size: var(--fs-small); white-space: nowrap; }
.card-menu .dl-menu button.on { font-weight: var(--fw-medium); }
.card-menu .menu-dim { color: var(--c-ink-muted); font-size: var(--fs-axis); padding: 2px 8px; max-width: 240px; }
/* the page template (SPEC 1.4): the trust chip beside the title, the "Not shown here" footer */
.trust-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); padding: 2px var(--sp-3); border: 1px solid var(--c-ring);
  border-radius: var(--r-chip); color: var(--c-ink-2); background: var(--c-surface-raised); cursor: pointer; vertical-align: middle; }   /* the chip radius, not a pill (RULES 5.1; S76 review r1, R28) */
.trust-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-up-good-text); }
.trust-chip.off::before { background: var(--c-ink-muted); }
.page-question { margin: 0 0 var(--sp-3); color: var(--c-ink-2); font-size: var(--fs-lede); }
#page.one-section > nav.jump { display: none; }
/* a flat page reads as one flow, so its sections sit one card gap apart (S76 review r1, R15: What we bill read 36 px
   between two cards where every other page reads 16) */
#page.one-section > section.section:not(.waiting) { margin-bottom: var(--l-grid-gap); }
#page.one-section > section.section:not(.waiting) > h2 ~ :not(.figures) { margin-top: 0; }   /* never the waiting block (r2, Q12) */
#page.one-section > section.section > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.not-shown { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--c-ring); color: var(--c-ink-muted); font-size: var(--fs-small); }
.card .chips .chip { white-space: nowrap; }
.card .head.chips-below { flex-wrap: wrap; row-gap: var(--sp-1); }
.card .head.chips-below .chips { order: 3; flex: 1 0 100%; }
.card .chips:empty { display: none; }             /* no empty row: plot tops line up by root.alignRows instead */
.chip { font-size: var(--fs-small); padding: 1px var(--sp-2); border: 1px solid var(--c-ring); border-radius: var(--r-chip); color: var(--c-ink-2); }
.card .plot { height: var(--h-card); }
.card .notes { font-size: var(--fs-small); color: var(--c-ink-muted); margin-top: var(--sp-2); }
.card > .notes:empty { margin-top: 0; }                /* no line under the chart: no strip of space either (S33 N14) */
.card .notes p { margin: 0 0 var(--sp-1); }
/* one row of words (RULES 2.3): the line under a chart never wraps; the whole text is in its hover and the (i) */
.card .notes p.one, .footnote p.one { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .notes .warn { color: var(--c-status-text-warning); }
.footnote { font-size: var(--fs-small); color: var(--c-ink-muted); margin: var(--sp-2) 0 0; }
.footnote p { margin: 0 0 var(--sp-1); }
.grid.later { margin-top: var(--sp-4); }
.card.placeholder { border-style: dashed; background: transparent; min-height: 72px; align-self: start; }
.card.placeholder .q { margin: var(--sp-1) 0; color: var(--c-ink-2); font-size: var(--fs-small); }
.card.placeholder .soon { margin: 0; color: var(--c-ink-muted); font-size: var(--fs-small); }

/* the map's day slider: our own track and a thumb a finger can take (S76 review r3, P7: the browser's was about 14 px) */
.map-slider input[type=range] { -webkit-appearance: none; appearance: none; height: 32px; background: transparent; border: 0; padding: 0; cursor: pointer; }
.map-slider input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--c-axis); }
.map-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--c-data); border: 2px solid var(--c-surface-raised); box-shadow: 0 0 0 1px var(--c-data); }
.map-slider input[type=range]:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
@media (max-width: 600px) {
  .map-slider input[type=range] { height: 44px; }
  .map-slider input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; }
}
/* round 6 (S76, the desktop matrix) */
/* E1: the Brief tiles' "open" chevron is a mark you can see and hit, on the title's line */
#page .br-go { font-size: var(--fs-lede); line-height: 1; padding: 2px 4px; margin: -2px -4px 0 0; color: var(--c-ink-2); }
#page .br-go:hover { color: var(--c-link); }
/* E2, E3: To do's empty line wraps its status under the name when the column is narrow, never mid-words; an inline
   "How this is set" is word-high, so the lines around it keep one leading */
.sl-empty .sl-lh { flex-wrap: wrap; row-gap: var(--sp-1); }
.sl-empty .sl-quiet { white-space: nowrap; }
.sl-how { height: auto; line-height: inherit; vertical-align: baseline; }
/* E5: the Brief's head line never leaves one word alone, and its chip and pack button share one height and line */
.br-head .br-sent { text-wrap: balance; }
.br-head .trust-chip { height: 28px; align-self: center; }
/* Data's "Not shown, and why": a table you can read row by row (S76 review r3, P15: no row rules, centered heads over
   long cells, its first column off the gutter) */
table.dp-hidden { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
table.dp-hidden th { text-align: left; vertical-align: bottom; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-2);
  padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--c-axis); }
table.dp-hidden td { text-align: left; vertical-align: top; padding: var(--sp-2); border-bottom: 1px solid var(--c-grid); }
table.dp-hidden th:first-child, table.dp-hidden td:first-child { padding-left: 0; }
/* the map's zoom buttons wear the app's surfaces, and their icons turn light in dark mode (S76 review r3, P14: a white
   tile on a dark map) */
.maplibregl-ctrl-group { background: var(--c-surface-raised) !important; border: 1px solid var(--c-ring); box-shadow: none !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--c-ring) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .maplibregl-ctrl-icon { filter: invert(1) brightness(0.85); } }
:root[data-theme="dark"] .maplibregl-ctrl-icon { filter: invert(1) brightness(0.85); }
/* more to the right (card.js scrollCue): a soft shadow at the frame's right edge, over no cell's digits */
.x-cue { position: relative; min-width: 0; }
.x-cue.x-more::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 14px; pointer-events: none;
  background: linear-gradient(to left, var(--c-ring), transparent); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-table); font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--c-grid); text-align: right; white-space: nowrap; }
table.data th:first-child, table.data td:first-child, table.data th.txt, table.data td.txt { text-align: left; }
table.data th { font-weight: var(--fw-medium); color: var(--c-ink-2); font-size: var(--fs-small); }
.tablewrap { height: var(--h-card); overflow: auto; }

.modal { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,0.35); display: flex; align-items: flex-start; justify-content: center; padding-top: 10vh; }
.modal[hidden] { display: none; }
.modal .box { width: min(620px, 92vw); background: var(--c-surface-raised); border-radius: var(--r-menu); border: 1px solid var(--c-ring); padding: var(--sp-5); }
.modal h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-section); }
.modal .plain { font-size: var(--fs-lede); margin: 0 0 var(--sp-4); }
.modal dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-2) var(--sp-3); margin: 0; font-size: var(--fs-body); }
.modal dt { color: var(--c-ink-muted); }
.modal dd { margin: 0; }
.modal details { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--c-ink-2); }
.modal .close { float: right; }

/* the page frame (phase 4): the availability line, a card's own controls, waiting cards, the side panel */
/* one line, never wrapped (S76: it wrapped to two at 1440); cut with an ellipsis when the bar is short of room, the
   whole line in its hover */
.topbar .status { border: 0; background: transparent; height: auto; padding: 0; min-width: 0; flex: 0 1 auto;
  font-size: var(--fs-small); line-height: var(--lh-tight); color: var(--c-ink-2); text-align: right; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.topbar .status:hover { color: var(--c-link); text-decoration: underline; }
.topbar .status.quiet { color: var(--c-ink-muted); }   /* all held: the quiet date (Sam, Oct 9 night) */
.topbar .status[hidden] { display: none; }
.ribbon .nav.extra { color: var(--c-ink-2); }
.ribbon .nav.extra.on { color: var(--c-ink); }
.card .card-controls { margin: var(--sp-2) 0 var(--l-control-legend-gap); }   /* clear space before the legend */
.card .open-list { margin-top: var(--sp-2); border: 0; background: transparent; padding: 0; height: auto; color: var(--c-link); font-size: var(--fs-small); text-align: left; }   /* a link's words start on the left, wrapped or not (r3, P12) */
.card .open-list:hover { text-decoration: underline; }
.panel-cell { min-width: 0; }
/* the Detail view (RULES 1.2): a full-width strip under a card's row, outlined like a card; its button ends the row */
.controls .detail-btn { margin-left: auto; height: 28px; font-size: var(--fs-small); }
.controls .same-scale { margin-left: auto; height: 28px; font-size: var(--fs-small); }
.detail-strip { grid-column: 1 / -1; background: var(--ss-card-fill); border: var(--ss-card-border); box-shadow: var(--ss-card-shadow);
  border-radius: var(--r-panel); padding: var(--l-card-padding); min-width: 0; }
.detail-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.detail-name { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.detail-name h3 { margin: 0; font-size: var(--fs-lede); font-weight: var(--fw-strong); }
.detail-sub { font-size: var(--fs-small); color: var(--c-ink-muted); }
.detail-ctl { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-left: auto; }
.detail-ctl button { height: 28px; font-size: var(--fs-small); }
.detail-strip > .line { margin: 0; font-size: var(--fs-small); color: var(--c-ink-muted); }
.detail-rest-title { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.detail-rest-wrap { overflow-x: auto; }
.detail-strip .notes { font-size: var(--fs-small); color: var(--c-ink-muted); margin-top: var(--sp-3); }
.detail-strip .notes p { margin: 0 0 var(--sp-1); }
/* the chart type gallery (phase 4) */
.gal-head { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.gal-note { margin: calc(-1 * var(--sp-1)) 0 var(--sp-3); font-size: var(--fs-body); color: var(--c-ink-2); }
.gal-rule { margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); font-size: var(--fs-small); color: var(--c-ink-muted); }
/* S67 round 2: a young practice's short history is as tall as its figures and line, not an empty chart's height */
.card .short { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); align-content: flex-start; padding: var(--sp-3) 0 var(--sp-2); }
.card .short .figure .value { font-size: var(--fs-section); }
.card .short .line { flex: 1 1 100%; margin: 0; font-size: var(--fs-small); color: var(--c-ink-muted); }
.waiting-line { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--c-ink-muted); }
.waiting-line p { margin: 0 0 var(--sp-1); }
.waiting-line a { color: var(--c-link); }
.section.waiting { color: var(--c-ink-2); border-top: 1px solid var(--c-ring); padding-top: var(--sp-5); }
.section.waiting h2 { color: var(--c-ink-2); }
.section.waiting .w-section { font-size: var(--fs-body); font-weight: var(--fw-medium); margin: var(--sp-3) 0 var(--sp-1); }
.w-list { list-style: none; margin: 0; padding: 0; }
.w-list li { padding: var(--sp-1) 0; border-bottom: 1px solid var(--c-grid); font-size: var(--fs-control); }
.w-list .w-title { color: var(--c-ink); margin-right: var(--sp-2); }
.w-list .w-need { color: var(--c-ink-muted); }
.w-list details { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--c-ink-2); }
.w-list details p { margin: var(--sp-1) 0 0; }
.section.waiting .w-data { margin-top: var(--sp-3); }
.jump a.j-waiting, .jump a.j-waiting .j-num { color: var(--c-ink-muted); }
.side { position: fixed; top: var(--l-top-bar-height); right: 0; bottom: 0; z-index: 15; width: min(420px, 100vw);
  overflow: auto; padding: var(--sp-4) var(--sp-5); background: var(--c-surface-raised); border-left: 1px solid var(--c-ring);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.side[hidden] { display: none; }
/* the Download menu carries an inline display:flex (card.js), which beats the browser's own [hidden] rule: without this
   every card's menu was drawn open (found by the consistency audit, Oct 6) */
.dl-menu[hidden] { display: none !important; }
.side-head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.side-head > div { flex: 1; min-width: 0; }
.side-head h3 { margin: 0; font-size: var(--fs-section); }
.side-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-small); color: var(--c-ink-muted); }
.side-dl { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-table); }
.side-dl dt { color: var(--c-ink-2); }
.side-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-family: var(--ss-number-font); }
.side-note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--c-ink-muted); }

@media (max-width: 1100px) {
  .span-8, .span-6, .span-4 { grid-column: span 12; }
}
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; height: auto; padding: var(--sp-2) var(--sp-4); }
  .practice { width: auto; }
  /* never wider than its row: a long range is cut with an ellipsis, its words whole in the hover (S76: with its new
     chevron a long label made the page 411 px wide at 390, on Sam's data) */
  .period { max-width: 100%; min-width: 0; }
  .period-label { width: auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the page menu becomes one row of page tabs under the top bar, scrolling sideways (S76: at 900 px and under it was
     hidden with nothing in its place, so a half-screen window could not change page) */
  .shell { flex-direction: column; align-items: stretch; }
  .ribbon { position: static; flex: none; flex-direction: row; align-items: center; height: auto; width: 100%; gap: var(--sp-1);
    overflow-x: auto; padding: var(--sp-2) var(--l-page-margin-narrow); border-right: 0; border-bottom: 1px solid var(--c-ring);
    scrollbar-width: none; padding-right: 32px;
    /* the row fades at its right edge, so it reads as scrolling, not cut (S76 review r1, R9) */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .ribbon::-webkit-scrollbar { display: none; }
  .ribbon .nav { flex: 0 0 auto; white-space: nowrap; height: 30px; }
  .ribbon .board-link { margin: 0 0 0 var(--sp-2); padding-left: var(--sp-3); border-top: 0; border-left: 1px solid var(--c-ring); }
  .ribbon .menu-edit-link { flex: 0 0 auto; align-self: center; margin: 0; white-space: nowrap; }
  /* arranging the menu in a narrow window: the tiles stand in a column under the top bar, not in the row of tabs */
  .ribbon.menu-editing { flex-direction: column; align-items: stretch; overflow: visible; -webkit-mask-image: none; mask-image: none;
    max-width: 360px; padding-right: var(--l-page-margin-narrow); border-right: 1px solid var(--c-ring); }
  .jump { top: 0; position: static; }
  main { padding: var(--sp-4) var(--l-page-margin-narrow); }
  .panel { padding: var(--sp-2); }
  .menu { width: min(440px, calc(100vw - 32px)); }
  .topbar .status { order: 9; max-width: 100%; flex: 1 1 100%; text-align: left; }   /* one line here too (S76 r1, R9) */
}
@media (max-width: 600px) {
  /* a phone: the title keeps a line of its own (one line where it fits, the screen loop holds it to that), the card's
     two buttons sit right under it, then the figures in an even two-column grid, flush with the title (S76 review r1,
     R11; the hub's screens on Sam's data: buttons on the title's row wrapped the gallery's titles at 390) */
  .card .head { flex-wrap: wrap; align-items: flex-start; }
  .card .head .title { flex: 1 0 100%; min-width: 0; order: 0; }
  .card .tools { order: 1; margin-left: 0; }
  #page .card > .head:has(> .head-figs) { grid-template-columns: minmax(0, 1fr); }
  #page .card > .head:has(> .head-figs) > .tools { grid-column: 1; grid-row: 2; }
  #page .card > .head:has(> .head-figs) > .head-figs { grid-column: 1; grid-row: 3; }
  .card .head-figs { order: 2; flex: 1 0 100%; margin-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .card .head-fig { padding-left: 0; border-left: 0; min-width: 0; }
  .card .head-fig .l { white-space: normal; }   /* a long label wraps in its column, never over its neighbour (r2, Q2) */
  /* targets a thumb can hit (P5, P6): the row boxes 20 px, the small text links at least 32 px tall */
  .sl-table input[type=checkbox] { width: 20px; height: 20px; }
  .card .open-list, .sc-expand, .sl-more, .sl-how, .my-add { min-height: 32px; display: inline-flex; align-items: center; }
  /* the Brief's footer: its link under its words, on the gutter (P13) */
  #page .not-shown .my-foot-inline { float: none; display: block; margin: var(--sp-2) 0 0; }
}
/* a page loading (G1 speed): the page shown stays, dimmed after a moment, until the new one's first section is drawn;
   the sections below the drawn ones say Loading */
#page[aria-busy="true"] { opacity: 0.55; transition: opacity 0.15s 0.25s; }
.loading-line { margin: 16px 0; font-size: var(--fs-small); color: var(--c-ink-muted); }
/* the page skeleton (S76, app.js pageSkeleton): still, never shimmering; the shapes of the title, the question line and
   the cards at their real heights, in the grid and wash colors */
.page-skel .sk-title { width: 180px; height: 22px; margin: 4px 0 12px; }
.page-skel .sk-line { width: min(340px, 70%); height: 14px; margin-bottom: var(--sp-5); }
.page-skel .sk-title, .page-skel .sk-line, .sk-card::before { background: var(--c-grid); border-radius: 2px; }
.sk-card { position: relative; height: calc(var(--h-card) + 132px); margin-bottom: var(--l-section-gap); border: var(--ss-card-border);
  border-radius: var(--r-panel); background: var(--ss-card-fill); }
.sk-card::before { content: ""; position: absolute; left: var(--l-card-padding); top: 22px; width: 40%; max-width: 280px; height: 14px; }
.sk-card::after { content: ""; position: absolute; left: var(--l-card-padding); right: var(--l-card-padding); top: 64px;
  bottom: var(--l-card-padding); background: var(--c-hover-wash); border-radius: 2px; }
.loading-line.sk-card { margin: 0 0 var(--l-section-gap); font-size: 0; color: transparent; }
.sk-brief .sk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-2); }
.sk-brief .sk-tile { height: clamp(230px, calc((100vh - 330px) * 0.52), 340px); margin: 0; }
.sk-brief .sk-tile::after { top: 84px; }
/* a page drawn again (a new range, bar size, the mask; Sam, Oct 1: nothing jumps): its old sections stay in place, dimmed
   after a moment, until each is swapped for its new version; they take no clicks meanwhile */
#page > .stale { opacity: 0.55; transition: opacity 0.15s 0.25s; pointer-events: none; }
/* a page-wide view control under the page title (pages that declare views in cards.json "pages"; Sam via S16, Oct 1) */
#page > .page-views:not(:empty) { margin: var(--sp-2) 0 var(--sp-3); }
.waiting-line.off-view p { color: var(--c-ink-muted); }
/* S79, note 14: the add-chart box (mycharts.js root.myAddBox): a card's thin outline across the page, a green plus and
   the words; beside a half-width last chart it is that half's height, else one row */
.my-add-box { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; height: auto; min-height: 56px;
  padding: var(--sp-3) var(--sp-4); background: var(--ss-card-fill); border: var(--ss-card-border); border-radius: var(--r-panel);
  color: var(--c-ink); font: inherit; font-size: var(--fs-lede); font-weight: var(--fw-strong); cursor: pointer; }
.my-add-box:hover { border-color: var(--c-status-good); }
.my-add-box:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.my-add-box .my-add-plus { flex: none; }
.my-add-box .my-add-plus circle { fill: var(--c-status-good); }
.my-add-box .my-add-plus path { stroke: #fff; stroke-width: 2; stroke-linecap: round; fill: none; }
.my-page-foot .my-adds { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.my-page-foot .my-adds > .my-add-box { align-self: stretch; }
.my-grid > .my-add-cell { display: flex; }
.my-grid > .my-add-cell > .my-add-box { flex: 1; }
/* S79, notes 20 and 24: a card whose only control is the Detail toggle carries it at the right of its line, no row of
   its own (card.js); the line keeps its own look */
.card > .line-row { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--l-control-legend-gap); }
.card > .line-row > p { flex: 1 1 auto; min-width: 0; }
.card > .line-row > .answer { margin: var(--sp-2) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink); }
.card > .line-row > .subtitle { margin: var(--sp-2) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink-muted); }
.card > .line-row > .card-controls.only-detail { flex: none; margin: var(--sp-2) 0 0; }
/* S79, note 30: nothing moves on hover in a heat table: the lit row and column names keep their weight (the bold grew
   the names' column by about 5 px and every column jumped); the wash and the cell's ring still show the pointer */
#page table.data.hm tbody th.hm-hot, #page table.data.hm.hm-tight thead th.hm-hot { font-weight: var(--fw-regular); }
/* S79, answer D: the Definitions button beside the status line, and its list (app.js openDefs) */
.topbar .defs-btn { flex: none; height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-small); color: var(--c-ink-2); }
.topbar .defs-btn:hover { color: var(--c-ink); }
.modal .defs-box { max-height: 80vh; overflow-y: auto; }
.modal .defs-sub { margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--c-ink-muted); }
.modal .defs-item { border-top: 1px solid var(--c-ring); padding: var(--sp-2) 0; }
.modal .defs-item > summary { cursor: pointer; font-weight: var(--fw-strong); font-size: var(--fs-body); }
.modal .defs-plain { margin: var(--sp-2) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.modal .defs-more { margin: var(--sp-1) 0 0; font-size: var(--fs-small); color: var(--c-ink-muted); line-height: var(--lh-body); }
.modal .defs-sub-more { margin-top: var(--sp-1); }
.modal .defs-sub-more > summary { cursor: pointer; font-size: var(--fs-small); color: var(--c-link); }
/* on the Brief's footer line the box is no taller than the line's words (one screen at 1440x900: hub, Oct 10) */
.my-foot-inline .my-adds .my-add-box, .my-page-foot.my-foot-inline .my-adds > .my-add-box { width: auto; min-height: 0; height: 24px;
  margin: -4px 0; padding: 0 var(--sp-2); gap: var(--sp-1); font-size: var(--fs-small); align-self: auto; }
.my-foot-inline .my-add-box .my-add-plus { width: 16px; height: 16px; }
.my-page-foot.my-foot-inline .my-adds { flex-direction: row; align-items: center; gap: var(--sp-3); }

/* S125 the app's own downloads (downloads.js; review\s125-downloads-design.pdf): the arrow in the top bar, the box that
   drops from it, and its list. Tint, not travel (craft 12); one primary (Open) in the box */
.topbar .dlx-btn { flex: none; position: relative; width: 32px; height: 28px; min-width: 0; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid transparent; background: transparent; border-radius: var(--r-control); color: var(--c-ink-2); }
.topbar .dlx-btn:hover { background: var(--c-hover-wash); color: var(--c-ink); }
.topbar .dlx-btn.lit { color: var(--c-link); }
.topbar .dlx-btn.open { background: var(--c-selected-wash); color: var(--c-link); }
.dlx-btn svg { display: block; }
.dlx-btn .dlx-ring { position: absolute; inset: 0; margin: auto; animation: dlx-spin 1s linear infinite; }
.dlx-btn .dlx-dot { position: absolute; top: 3px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-link); box-shadow: 0 0 0 2px var(--c-surface); }
@keyframes dlx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dlx-btn .dlx-ring, .dlx-bar i { animation: none; } }
.dlx-pop { position: fixed; z-index: 50; background: var(--c-surface-raised); border: 1px solid var(--c-ring); border-radius: var(--r-menu);
  box-shadow: 0 6px 24px rgba(11,11,11,0.12); font-size: var(--fs-body); color: var(--c-ink); }
.dlx-pop .dlx-nub { position: absolute; top: -6px; width: 10px; height: 10px; background: var(--c-surface-raised);
  border-left: 1px solid var(--c-ring); border-top: 1px solid var(--c-ring); transform: rotate(45deg); }
.dlx-hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; }
.dlx-hd b { font-weight: var(--fw-strong); }
.dlx-link { font-size: var(--fs-small); }
.dlx-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; }
.dlx-row + .dlx-row { border-top: 1px solid var(--c-grid); }
.dlx-list .dlx-row[role="button"] { cursor: pointer; }
.dlx-list .dlx-row[role="button"]:hover, .dlx-list .dlx-row[role="button"]:focus-visible { background: var(--c-hover-wash); }
.dlx-list .dlx-row .dlx-acts { visibility: hidden; }
.dlx-list .dlx-row:hover .dlx-acts, .dlx-list .dlx-row:focus-within .dlx-acts { visibility: visible; }
.dlx-kind { width: 30px; height: 36px; border: 1px solid var(--c-axis); border-radius: 3px; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 4px; font-size: 9px; font-weight: 600; color: var(--c-ink-2); background: var(--c-surface); position: relative; box-sizing: border-box; }
.dlx-kind::after { content: ""; position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; background: var(--c-surface-raised);
  border-left: 1px solid var(--c-axis); border-bottom: 1px solid var(--c-axis); }
.dlx-kind.busy { border-style: dashed; color: var(--c-ink-muted); }
.dlx-body { min-width: 0; }
.dlx-name { font-size: var(--fs-control); font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.dlx-meta { font-size: var(--fs-small); color: var(--c-ink-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.dlx-meta .phi { color: var(--c-status-text-serious); }
.dlx-note { font-size: var(--fs-small); color: var(--c-ink-2); margin: 3px 0 0; }
.dlx-note.err { color: var(--c-status-text-critical); }
.dlx-note.pad { padding: 0 16px 12px; margin: 0; }
.dlx-acts { display: flex; gap: 4px; align-items: center; }
.dlx-acts button { height: 26px; padding: 0 10px; font-size: var(--fs-small); }
.dlx-acts .dlx-icon { width: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--c-ink-muted); }
.dlx-acts .dlx-icon:hover { color: var(--c-ink); background: var(--c-hover-wash); }
.dlx-day { padding: 10px 16px 4px; font-size: var(--fs-small); font-weight: 600; color: var(--c-ink-2); background: var(--c-surface-raised); position: sticky; top: 0; z-index: 1; }
.dlx-scroll { max-height: min(470px, calc(100vh - 160px)); overflow: auto; }
.dlx-empty { padding: 12px 16px; margin: 0; color: var(--c-ink-muted); font-size: var(--fs-small); }
.dlx-ft { padding: 8px 16px 12px; border-top: 1px solid var(--c-grid); font-size: var(--fs-small); color: var(--c-ink-muted); }
.dlx-bar { height: 3px; background: var(--c-grid); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.dlx-bar i { display: block; height: 100%; width: 38%; background: var(--c-link); border-radius: 2px; animation: dlx-slide 1.4s ease-in-out infinite; }
@keyframes dlx-slide { from { margin-left: -38%; } to { margin-left: 100%; } }