/* ============================================================
   Savory Marketing — mockups.css
   The app-mockup library (App mockups v2, 2026-09-22): every app picture on
   the site is DOM drawn from the shipped app's own metrics and strings, never
   a screenshot. Linked ONLY by the eleven pages that carry a mockup, in the
   page-unique head after shared.css and before utilities.css; cache-busted by
   build.sh like every stylesheet.

   RULES
   - Tokens only: consumes the --am-* register at the foot of variables.css and
     the site's --font-sans / --font-mono / --ease-standard. Zero raw hex, no
     importance flags.
   - Every geometry value is written in APP POINTS: calc(N * var(--u)). N is
     the number the Swift source uses (TypeRamp, Spacing, Radius, LayoutMetrics,
     *Metrics.swift), so a mockup can be checked against the app line for line.
   - Scale: .am is an inline-size container. Its scaled child (.am-s) derives
     --u (one app point, in px) from the container width and the mockup's
     virtual width --am-vw, clamped to [--am-min, --am-max]. The floor is .8px
     (13 pt base text never renders under 10.4px); when a column is narrower
     than .8 × --am-vw the container queries at the foot RESTRUCTURE (hide a
     column, stack, lower --am-vw), never scale below the floor.
   - Browser floor: container queries + cqi units (Safari 16, Chrome 105,
     Firefox 110). An older browser gets an unscaled mockup that still lays
     out; nothing on the page depends on it.
   - Decorative: every .am root is role="img" with a full aria-label; its
     interior (.am-s) is aria-hidden (gate 4 + the accepted a11y residual).
   - Dashes: the app joins two times or two dates with an en dash and writes
     the Meetings search placeholder with an em dash. Each one is wrapped in
     <span class="am-dash"> in the partial, which is what gate 10 strips before
     it fails on any other dash. The span carries no style; it is a marker.
   - Source: one partial per mockup under partials/mock-<name>.html, injected
     by the page's MOCK:<name> marker; the icon sprite (partials/app-icons.svg)
     is injected once per page by the APP_ICONS marker and hidden by .app-icons
     below. (Neither marker is spelled out here: the build fails on a literal
     one anywhere in dist/, comments included.)
   ============================================================ */

/* the inline icon sprite: out of flow and sized to nothing, never display:none
   (a display:none <svg> makes its <symbol>s unreferenceable in some engines) */
.app-icons{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- 0. register root + scale ---------- */
.am{container-type:inline-size;position:relative;
  --am-vw:760;--am-min:.8px;--am-max:1px;
  font-family:var(--font-sans);line-height:1.3;color:var(--am-text-1);text-align:left;
  -webkit-font-smoothing:antialiased;user-select:none}
.am-s{--u:clamp(var(--am-min),calc(100cqi / var(--am-vw)),var(--am-max));font-size:calc(13 * var(--u))}
.am-tab{font-variant-numeric:tabular-nums}
.am-trunc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-grow{flex:1;min-width:0}

/* ---------- 1. atoms ---------- */
/* icon: the app's own outline family (research/Design Revamp v5/styles/icons.js,
   24-unit box, --icon-stroke 1.5); filled only for brand marks + the Savory mark */
.am-i{width:calc(14 * var(--u));height:calc(14 * var(--u));flex:none;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.am-i--10{width:calc(10 * var(--u));height:calc(10 * var(--u))}
.am-i--12{width:calc(12 * var(--u));height:calc(12 * var(--u))}
.am-i--16{width:calc(16 * var(--u));height:calc(16 * var(--u))}
.am-i--18{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.am-i--22{width:calc(22 * var(--u));height:calc(22 * var(--u))}
.am-i--24{width:calc(24 * var(--u));height:calc(24 * var(--u))}
.am-i--fill{fill:currentColor;stroke:none}

.am-kbd{font-family:var(--font-mono);font-size:calc(10 * var(--u));line-height:1;
  padding:calc(3 * var(--u)) calc(5 * var(--u));border-radius:calc(4 * var(--u));
  background:var(--am-surface-2);border:1px solid var(--am-border);color:var(--am-text-2);flex:none}

.am-btn{display:inline-flex;align-items:center;gap:calc(8 * var(--u));flex:none;white-space:nowrap;
  height:calc(32 * var(--u));padding:0 calc(16 * var(--u));border-radius:calc(8 * var(--u));
  border:1px solid transparent;font-size:calc(13 * var(--u));font-weight:500;line-height:1}
.am-btn--sm{height:calc(26 * var(--u));padding:0 calc(12 * var(--u));border-radius:calc(6 * var(--u));
  font-size:calc(12 * var(--u))}
.am-btn--primary{background:var(--am-accent);color:var(--am-on-accent)}
.am-btn--secondary{background:var(--am-surface);border-color:var(--am-border-strong);color:var(--am-text-1)}
.am-btn--danger{background:var(--am-surface);border-color:var(--am-danger-line);color:var(--am-danger)}
.am-btn--danger-solid{background:var(--am-danger);color:var(--am-text-inverse)}
.am-btn--ghost{color:var(--am-text-2)}
.am-ib{width:calc(28 * var(--u));height:calc(28 * var(--u));flex:none;display:grid;place-items:center;
  border-radius:calc(8 * var(--u));color:var(--am-text-2)}

.am-seg{display:inline-flex;flex:none;padding:calc(3 * var(--u));gap:calc(2 * var(--u));
  background:var(--am-sunken);border-radius:calc(8 * var(--u))}
.am-seg__i{display:flex;align-items:center;height:calc(26 * var(--u));padding:0 calc(12 * var(--u));
  border-radius:calc(6 * var(--u));font-size:calc(12 * var(--u));font-weight:500;color:var(--am-text-2);white-space:nowrap}
.am-seg__i.is-on{background:var(--am-surface);color:var(--am-text-1);box-shadow:var(--am-shadow-xs)}

.am-fchip{display:inline-flex;align-items:center;flex:none;height:calc(24 * var(--u));padding:0 calc(10 * var(--u));
  border-radius:999px;border:1px solid var(--am-border);font-size:calc(12 * var(--u));color:var(--am-text-2);white-space:nowrap}
.am-fchip.is-on{background:var(--am-accent-soft);border-color:var(--am-accent-line);color:var(--am-accent)}

.am-eyebrow{font-size:calc(10 * var(--u));text-transform:uppercase;letter-spacing:.06em;color:var(--am-text-3);white-space:nowrap}
.am-h3{font-size:calc(15 * var(--u));font-weight:600;letter-spacing:-.01em;color:var(--am-text-1)}
.am-count{display:inline-grid;place-items:center;min-width:calc(20 * var(--u));height:calc(20 * var(--u));
  padding:0 calc(6 * var(--u));border-radius:calc(6 * var(--u));background:var(--am-sunken);
  font-size:calc(11 * var(--u));font-weight:500;color:var(--am-text-2);font-variant-numeric:tabular-nums}

.am-ava{display:inline-grid;place-items:center;flex:none;border-radius:50%;
  width:calc(22 * var(--u));height:calc(22 * var(--u));font-size:calc(9 * var(--u));font-weight:600;letter-spacing:.02em;
  background:var(--am-accent-soft);color:var(--am-accent)}
.am-ava--lg{width:calc(44 * var(--u));height:calc(44 * var(--u));font-size:calc(15 * var(--u))}

.am-check{width:calc(18 * var(--u));height:calc(18 * var(--u));flex:none;border-radius:calc(6 * var(--u));
  border:1px solid var(--am-border-strong);background:var(--am-surface)}
.am-check.is-done{background:var(--am-accent);border-color:var(--am-accent);display:grid;place-items:center;color:var(--am-on-accent)}
.am-check.is-done .am-i{width:calc(11 * var(--u));height:calc(11 * var(--u));stroke-width:2.5}

.am-pill{display:inline-flex;align-items:center;gap:calc(4 * var(--u));flex:none;height:calc(20 * var(--u));
  padding:0 calc(8 * var(--u));border-radius:calc(6 * var(--u));font-size:calc(11 * var(--u));font-weight:500;white-space:nowrap}
.am-pill--done{background:var(--am-ok-soft);color:var(--am-ok)}
.am-pill--done::before{content:"";width:calc(6 * var(--u));height:calc(6 * var(--u));border-radius:50%;background:currentColor}
.am-pill--info{background:var(--am-info-soft);color:var(--am-info)}
.am-pill--soon{background:var(--am-sunken);color:var(--am-text-2)}

/* calendar-hue identity: a stick (list rows, sources), a dot, a tile, a fill */
.am-stick{width:calc(3 * var(--u));height:calc(14 * var(--u));flex:none;border-radius:calc(1.5 * var(--u));background:var(--am-hue-ink)}
.am-stick--sm{width:calc(2 * var(--u));height:calc(10 * var(--u))}
.am-dot{width:calc(7 * var(--u));height:calc(7 * var(--u));flex:none;border-radius:50%;background:var(--am-hue-ink)}
.am-hue--indigo{--am-hue-fill:var(--am-cal-indigo-fill);--am-hue-ink:var(--am-cal-indigo-ink)}
.am-hue--teal{--am-hue-fill:var(--am-cal-teal-fill);--am-hue-ink:var(--am-cal-teal-ink)}
.am-hue--sage{--am-hue-fill:var(--am-cal-sage-fill);--am-hue-ink:var(--am-cal-sage-ink)}
.am-hue--amber{--am-hue-fill:var(--am-cal-amber-fill);--am-hue-ink:var(--am-cal-amber-ink)}
.am-hue--rose{--am-hue-fill:var(--am-cal-rose-fill);--am-hue-ink:var(--am-cal-rose-ink)}
.am-hue--plum{--am-hue-fill:var(--am-cal-plum-fill);--am-hue-ink:var(--am-cal-plum-ink)}
.am-hue--rust{--am-hue-fill:var(--am-cal-rust-fill);--am-hue-ink:var(--am-cal-rust-ink)}
.am-hue--graphite{--am-hue-fill:var(--am-cal-graphite-fill);--am-hue-ink:var(--am-cal-graphite-ink)}
.am-ava.am-hue--indigo,.am-ava.am-hue--teal,.am-ava.am-hue--sage,.am-ava.am-hue--amber,
.am-ava.am-hue--rose,.am-ava.am-hue--plum,.am-ava.am-hue--rust,.am-ava.am-hue--graphite{background:var(--am-hue-fill);color:var(--am-hue-ink)}

.am-field{display:flex;align-items:center;gap:calc(8 * var(--u));height:calc(32 * var(--u));padding:0 calc(10 * var(--u));
  border:1px solid var(--am-border-strong);border-radius:calc(8 * var(--u));background:var(--am-surface);
  font-size:calc(13 * var(--u));color:var(--am-text-3);min-width:0}
.am-field--q{color:var(--am-text-1)}
.am-hl{background:var(--am-mark-fill);color:var(--am-mark-ink);border-radius:calc(3 * var(--u));padding:0 calc(2 * var(--u))}
.am-hl.is-current{box-shadow:0 0 0 calc(2 * var(--u)) var(--am-mark-ink)}
.am-sep{color:var(--am-text-3)}
.am-link{color:var(--am-accent);font-weight:500}

/* the Savory mark as a status/identity glyph, and the graphite brand tile */
.am-brand{width:calc(30 * var(--u));height:calc(30 * var(--u));flex:none;display:grid;place-items:center;
  border-radius:calc(8 * var(--u));background:var(--am-graphite);color:var(--am-graphite-bright)}

/* ---------- 2. window shell (Mac) ---------- */
/* hidden title bar: traffic lights float over the rail; the rail sits on the
   canvas; the workspace panel (surface, r20, inset 12/12/12/0) holds the top bar */
.am--window{--am-vw:800}
.am-win{--am-rail-w:188;--am-list-w:228;
  position:relative;display:grid;grid-template-columns:calc(var(--am-rail-w) * var(--u)) minmax(0,1fr);
  height:calc(680 * var(--u));background:var(--am-canvas);border-radius:calc(12 * var(--u));
  box-shadow:0 0 0 1px var(--am-border),var(--am-shadow-window);overflow:hidden}
/* window controls: centred in the 28 pt title-bar band the rail reserves (WindowChrome.controlsInset),
   and inside the 64 pt collapsed rail, which they share with the expanded one */
.am-tls{position:absolute;top:calc(8 * var(--u));left:calc(8 * var(--u));display:flex;gap:calc(8 * var(--u))}
.am-tl{width:calc(12 * var(--u));height:calc(12 * var(--u));border-radius:50%}
.am-tl--r{background:var(--am-tl-red)}.am-tl--y{background:var(--am-tl-yellow)}.am-tl--g{background:var(--am-tl-green)}

.am-rail{display:flex;flex-direction:column;min-width:0;min-height:0;
  padding:calc(44 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u))}
.am-id{display:flex;align-items:center;gap:calc(10 * var(--u));padding:0 calc(4 * var(--u)) calc(4 * var(--u))}
.am-id__who{display:flex;flex-direction:column;min-width:0}
.am-id__name{font-size:calc(13 * var(--u));font-weight:600;letter-spacing:-.01em}
.am-id__mode{font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-id .am-ib{margin-left:auto;width:calc(26 * var(--u));height:calc(26 * var(--u));color:var(--am-text-3)}
.am-rail__nav{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:calc(2 * var(--u))}
.am-rail__h{font-size:calc(11 * var(--u));font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--am-text-3);padding:calc(14 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u))}
.am-rail__row{display:flex;align-items:center;gap:calc(10 * var(--u));min-height:calc(30 * var(--u));
  padding:0 calc(10 * var(--u));border-radius:calc(8 * var(--u));font-size:calc(13 * var(--u));font-weight:500;
  color:var(--am-text-2);white-space:nowrap}
.am-rail__row.is-on{background:var(--am-selected);color:var(--am-accent)}
.am-rail__n{margin-left:auto;font-size:calc(11 * var(--u));font-weight:600;color:var(--am-text-3);font-variant-numeric:tabular-nums}
.am-rail__row.is-on .am-rail__n{color:var(--am-accent)}
.am-rail__cal{display:flex;align-items:center;gap:calc(10 * var(--u));min-height:calc(30 * var(--u));
  padding:0 calc(8 * var(--u));font-size:calc(12 * var(--u));color:var(--am-text-2);white-space:nowrap}
.am-caltile{width:calc(20 * var(--u));height:calc(20 * var(--u));flex:none;display:grid;place-items:center;
  border-radius:calc(6 * var(--u));background:var(--am-hue-fill);color:var(--am-cal-mark)}
.am-caltile--add{background:var(--am-sunken);color:var(--am-text-3)}
.am-rail__foot{display:flex;align-items:center;gap:calc(10 * var(--u));min-height:calc(34 * var(--u));
  margin-top:calc(8 * var(--u));padding:calc(8 * var(--u)) calc(8 * var(--u)) 0;border-top:1px solid var(--am-border);
  font-size:calc(13 * var(--u));color:var(--am-text-2);white-space:nowrap}

/* collapsed rail (RailContent collapsed:true, LayoutMetrics.railWCollapsed 64): the identity is its
   brand tile, a row is its glyph, a calendar is its colour tile, the foot is its avatar. Labels,
   section headers, the count, the mode chevron and Connect calendar stand down. The app keeps an
   s1 (4 pt) gap between sections: a header here becomes a zero-height spacer between the nav's
   2 pt row gaps, and the first one goes, since the nav opens straight onto its first row.
   The list takes the app's own browse width (LayoutMetrics.browseListW 320) at every size, so the
   width the rail gives up goes to the list and the plane together. */
.am-win--rail-collapsed{--am-rail-w:64;--am-list-w:320}
.am-win--rail-collapsed .am-rail{padding-inline:calc(12 * var(--u))}
.am-win--rail-collapsed .am-id{justify-content:center;padding:calc(4 * var(--u)) 0 calc(16 * var(--u))}
.am-win--rail-collapsed :is(.am-id__who,.am-id .am-ib,.am-rail__label,.am-rail__n,.am-rail__cal--add,.am-rail__h:first-child){display:none}
.am-win--rail-collapsed .am-rail__h{height:0;padding:0;overflow:hidden}
.am-win--rail-collapsed :is(.am-rail__row,.am-rail__cal,.am-rail__foot){justify-content:center;padding-inline:0}
.am-win--rail-collapsed :is(.am-rail__row,.am-rail__cal){min-height:calc(32 * var(--u))}

.am-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  margin:calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) 0;background:var(--am-surface);
  border:1px solid var(--am-border-subtle);border-radius:calc(20 * var(--u))}
.am-panel--solo{margin:0;box-shadow:0 0 0 1px var(--am-border),var(--am-shadow-window);border:0}
.am-top{display:flex;align-items:center;gap:calc(10 * var(--u));flex:none;min-height:calc(52 * var(--u));
  padding:0 calc(14 * var(--u));border-bottom:1px solid var(--am-border)}
.am-top--rec{border-bottom:calc(2 * var(--u)) solid var(--am-danger)}
.am-crumb{display:flex;align-items:center;gap:calc(6 * var(--u));min-width:0;overflow:hidden;font-size:calc(13 * var(--u));
  color:var(--am-text-3);white-space:nowrap}
.am-crumb b{font-weight:500;color:var(--am-text-1)}
.am-search{display:flex;align-items:center;gap:calc(8 * var(--u));flex:none;height:calc(30 * var(--u));
  width:calc(186 * var(--u));padding:0 calc(6 * var(--u)) 0 calc(12 * var(--u));border:1px solid var(--am-border);
  border-radius:999px;background:var(--am-surface);font-size:calc(13 * var(--u));color:var(--am-text-3);white-space:nowrap}
.am-search .am-kbd{margin-left:auto}

/* ---------- 3. meetings: list, workroom plane, overview, actions ---------- */
.am-work{flex:1;min-height:0;display:grid;grid-template-columns:calc(var(--am-list-w) * var(--u)) minmax(0,1fr)}
.am-list{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  border-right:1px solid var(--am-border);padding-top:calc(14 * var(--u))}
.am-list>.am-field{margin:0 calc(14 * var(--u))}
.am-chips{display:flex;gap:calc(6 * var(--u));margin:calc(10 * var(--u)) calc(14 * var(--u)) calc(2 * var(--u))}
.am-dayh{padding:calc(14 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u))}
.am-mrow{padding:calc(8 * var(--u)) calc(14 * var(--u)) calc(9 * var(--u));border-left:calc(2 * var(--u)) solid transparent}
.am-mrow.is-on{background:var(--am-selected);border-left-color:var(--am-accent)}
.am-mrow__t{display:flex;align-items:center;gap:calc(8 * var(--u));font-size:calc(13 * var(--u));font-weight:500}
.am-mrow__m{margin-top:calc(3 * var(--u));padding-left:calc(11 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-mrow__m em{font-style:normal;color:var(--am-text-2)}

.am-plane{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.am-plane__head{padding:calc(20 * var(--u)) calc(22 * var(--u)) calc(12 * var(--u));border-bottom:1px solid var(--am-border)}
.am-plane__title{margin-top:calc(6 * var(--u));font-size:calc(17 * var(--u));font-weight:600;letter-spacing:-.01em}
.am-src{display:flex;align-items:center;gap:calc(6 * var(--u));margin-top:calc(6 * var(--u));
  font-size:calc(12 * var(--u));color:var(--am-text-2);white-space:nowrap}
.am-tagadd{display:inline-flex;align-items:center;gap:calc(4 * var(--u));height:calc(20 * var(--u));margin-top:calc(8 * var(--u));
  padding:0 calc(8 * var(--u));border:1px dashed var(--am-border-strong);border-radius:calc(6 * var(--u));
  font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-acts{display:flex;flex-wrap:wrap;align-items:center;gap:calc(8 * var(--u)) calc(12 * var(--u));margin-top:calc(12 * var(--u));
  font-size:calc(12 * var(--u));color:var(--am-text-2)}
.am-acts__meta{display:flex;align-items:center;gap:calc(6 * var(--u));white-space:nowrap}
.am-acts__btns{display:flex;gap:calc(8 * var(--u));margin-left:auto}
.am-segrow{display:flex;align-items:center;gap:calc(10 * var(--u));margin-top:calc(14 * var(--u))}
.am-segrow .am-ib{margin-left:auto}

.am-doc{padding:calc(18 * var(--u)) calc(22 * var(--u));font-size:calc(13 * var(--u));line-height:1.5;min-height:0;overflow:hidden}
.am-doc__head{display:flex;align-items:center;gap:calc(10 * var(--u))}
.am-doc__regen{display:flex;align-items:center;gap:calc(4 * var(--u));margin-left:auto;font-size:calc(12 * var(--u));color:var(--am-text-3)}
.am-doc__abs{margin-top:calc(8 * var(--u));color:var(--am-text-2)}
.am-doc__h{margin-top:calc(12 * var(--u));font-weight:600}
.am-doc__li{position:relative;margin-top:calc(3 * var(--u));padding-left:calc(16 * var(--u));color:var(--am-text-1)}
.am-doc__li::before{content:"";position:absolute;left:calc(4 * var(--u));top:.62em;width:calc(4 * var(--u));height:calc(4 * var(--u));
  border-radius:50%;background:var(--am-text-3)}
.am-doc__li--sub{margin-left:calc(16 * var(--u))}
.am-doc__li--sub::before{background:none;border:1px solid var(--am-text-3)}
.am-doc__kt{display:block;margin-top:calc(16 * var(--u))}
.am-topics{display:flex;flex-wrap:wrap;gap:calc(6 * var(--u));margin-top:calc(8 * var(--u))}
.am-topic{display:inline-flex;align-items:center;gap:calc(5 * var(--u));height:calc(22 * var(--u));padding:0 calc(8 * var(--u));
  border-radius:calc(6 * var(--u));background:var(--am-sunken);font-size:calc(12 * var(--u));color:var(--am-text-2);white-space:nowrap}

.am-ai-head{display:flex;align-items:center;gap:calc(8 * var(--u))}
.am-ai-head .am-link{margin-left:auto;font-size:calc(12 * var(--u))}
.am-ai{display:grid;grid-template-columns:auto minmax(0,1fr) calc(88 * var(--u));gap:calc(10 * var(--u));align-items:start;
  padding:calc(10 * var(--u)) 0;border-top:1px solid var(--am-border-subtle)}
.am-ai:first-of-type{border-top:0}
.am-ai .am-check{margin-top:calc(1 * var(--u))}
.am-ai__t{font-size:calc(13 * var(--u))}
.am-ai__c{margin-top:calc(2 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-ai__due{font-size:calc(12 * var(--u));color:var(--am-text-2);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- 4. person page (Mac: pushed full-page view inside People) ---------- */
.am--person{--am-vw:640}
.am-pp{padding:calc(20 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u));min-height:0;overflow:hidden}
.am-back{display:flex;align-items:center;gap:calc(4 * var(--u));font-size:calc(13 * var(--u));color:var(--am-text-2)}
.am-ph{display:flex;align-items:center;gap:calc(14 * var(--u));margin-top:calc(14 * var(--u))}
.am-ph__name{font-size:calc(22 * var(--u));font-weight:600;letter-spacing:-.015em}
.am-ph__sub{margin-top:calc(2 * var(--u));font-size:calc(12 * var(--u));color:var(--am-text-2);white-space:nowrap}
.am-stats{margin-top:calc(14 * var(--u));font-size:calc(13 * var(--u));color:var(--am-text-2);line-height:1.5}
.am-stats b{font-weight:600;color:var(--am-text-1)}
.am-next{display:flex;align-items:center;gap:calc(8 * var(--u));margin-top:calc(12 * var(--u));padding:calc(8 * var(--u)) calc(12 * var(--u));
  border-radius:calc(8 * var(--u));background:var(--am-surface-2);font-size:calc(12 * var(--u));color:var(--am-text-2);white-space:nowrap}
.am-next b{font-weight:500;color:var(--am-text-1)}
.am-next__open{margin-left:auto;color:var(--am-text-2)}
.am-sech{display:flex;align-items:center;gap:calc(8 * var(--u));margin-top:calc(18 * var(--u))}
.am-sech .am-btn,.am-sech__end{margin-left:auto}
.am-sech__end{font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-subh{display:flex;align-items:center;gap:calc(8 * var(--u));margin-top:calc(10 * var(--u));font-size:calc(13 * var(--u));font-weight:600}
.am-ledger{margin-top:calc(6 * var(--u));border:1px solid var(--am-border);border-radius:calc(12 * var(--u))}
.am-lrow{display:grid;grid-template-columns:calc(54 * var(--u)) auto minmax(0,1fr);gap:calc(10 * var(--u));align-items:start;
  padding:calc(9 * var(--u)) calc(14 * var(--u))}
.am-lrow+.am-lrow{border-top:1px solid var(--am-border)}
.am-lrow__due{text-align:right;font-size:calc(11 * var(--u));color:var(--am-text-3);font-variant-numeric:tabular-nums;padding-top:calc(1 * var(--u))}
.am-lrow__t{font-size:calc(13 * var(--u))}
.am-lrow__s{display:flex;align-items:center;gap:calc(5 * var(--u));margin-top:calc(2 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-month{margin-top:calc(12 * var(--u));font-size:calc(13 * var(--u));font-weight:600}
.am-hrow{display:grid;grid-template-columns:calc(78 * var(--u)) minmax(0,1fr) auto;gap:calc(10 * var(--u));align-items:start;
  padding:calc(8 * var(--u)) 0}
.am-hrow__d{font-size:calc(11 * var(--u));color:var(--am-text-3);padding-top:calc(1 * var(--u))}
.am-hrow__t{display:flex;align-items:center;gap:calc(7 * var(--u));font-size:calc(13 * var(--u));font-weight:500}
.am-hrow__m{margin-top:calc(2 * var(--u));padding-left:calc(10 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}

/* ---------- 5. desktop scene: menu bar extra, floating recorder, notices ---------- */
.am--scene{--am-vw:460}
/* the desktop is as tall as the open menu needs: the menu sits in flow under the bar, right-aligned */
.am-desk{position:relative;border-radius:calc(14 * var(--u));overflow:hidden;
  background:var(--am-desktop);box-shadow:0 0 0 1px var(--am-border)}
.am-mbar{display:flex;align-items:center;justify-content:flex-end;gap:calc(14 * var(--u));height:calc(24 * var(--u));
  padding:0 calc(12 * var(--u));background:var(--am-menubar);font-size:calc(12 * var(--u));font-weight:500;color:var(--am-menubar-ink)}
.am-mbar__item{position:relative;display:grid;place-items:center;width:calc(28 * var(--u));height:calc(20 * var(--u));
  border-radius:calc(5 * var(--u))}
.am-mbar__item.is-open{background:var(--am-pressed)}
.am-mbar__badge{position:absolute;right:calc(5 * var(--u));bottom:calc(3 * var(--u));width:calc(6 * var(--u));height:calc(6 * var(--u));
  border-radius:50%;background:var(--am-danger);box-shadow:0 0 0 calc(1.5 * var(--u)) var(--am-menubar)}
.am-menu{margin:calc(4 * var(--u)) calc(8 * var(--u)) calc(28 * var(--u)) auto;width:calc(320 * var(--u));
  padding:calc(12 * var(--u));background:var(--am-overlay);border:1px solid var(--am-border);border-radius:calc(12 * var(--u));
  box-shadow:var(--am-shadow-overlay);font-size:calc(13 * var(--u))}
.am-menu__sec{display:flex;flex-direction:column;gap:calc(4 * var(--u))}
.am-menu__sec+.am-menu__sec{margin-top:calc(10 * var(--u));padding-top:calc(10 * var(--u));border-top:1px solid var(--am-border)}
.am-menu__live{display:flex;align-items:center;gap:calc(8 * var(--u))}
.am-menu__live .am-btn--sm{height:calc(24 * var(--u));padding:0 calc(8 * var(--u));gap:calc(4 * var(--u));font-size:calc(13 * var(--u))} /* MenuBarContent.swift:124-130: its own 4pt gap, 13pt text */
.am-menu__t{font-size:calc(13 * var(--u));font-weight:500}
.am-menu__sub{font-size:calc(12 * var(--u));color:var(--am-text-2);font-variant-numeric:tabular-nums}
.am-menu__row{display:flex;align-items:center;gap:calc(8 * var(--u));min-height:calc(24 * var(--u));color:var(--am-text-1)}
.am-menu__row .am-i{color:var(--am-text-2)}
.am-menu__h{font-size:calc(11 * var(--u));font-weight:600;color:var(--am-text-3)}
.am-menu__ev{display:flex;align-items:flex-start;gap:calc(8 * var(--u))}
.am-menu__ev .am-i{margin-top:calc(1 * var(--u));color:var(--am-text-2)}
.am-menu__foot{display:flex;align-items:center;gap:calc(6 * var(--u));font-size:calc(12 * var(--u));color:var(--am-text-2)}
.am-menu__foot span:last-child{margin-left:auto;color:var(--am-text-1)}
.am-livedot{position:relative;width:calc(8 * var(--u));height:calc(8 * var(--u));flex:none;border-radius:50%;background:var(--am-danger)}
.am-livedot::after{content:"";position:absolute;inset:0;border-radius:50%;border:calc(1.5 * var(--u)) solid var(--am-danger);
  animation:am-breathe 2s var(--ease-standard) infinite}
@keyframes am-breathe{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.9);opacity:0}}

/* the floating recorder (Sentinel, compact chip: the default size), its own mockup. The chip is
   content-sized (SentinelMetrics: no width member), so it centres in its column, drawn at the
   menu bar menu's scale when the two share a stage */
.am--rec{--am-vw:300}
.am-rec{display:flex;width:max-content;margin-inline:auto;align-items:center;gap:calc(2 * var(--u));height:calc(40 * var(--u));
  padding:0 calc(4 * var(--u)) 0 calc(8 * var(--u));background:var(--am-surface-2);border:1px solid var(--am-border);
  border-radius:calc(8 * var(--u));box-shadow:var(--am-shadow-overlay);color:var(--am-text-2)}
.am-rec__mark{color:var(--am-text-1);margin-right:calc(4 * var(--u))}
.am-rec .am-ib{width:calc(32 * var(--u));height:calc(32 * var(--u))}
.am-rec__time{padding:0 calc(6 * var(--u)) 0 calc(2 * var(--u));font-size:calc(13 * var(--u));color:var(--am-text-2);font-variant-numeric:tabular-nums}

/* notification card (SavoryNoticeCard: 380 wide, 14 pad, 14 corner, 30 tile, 28 pills).
   One row (identity, text column, actions, centred), then the body line and the footnote at
   full card width. Title and meta are single lines that truncate at the tail (lineLimit 1). */
.am--notices{--am-vw:400}
.am-notices{display:flex;flex-direction:column;align-items:flex-end}
.am-notice{position:relative;width:calc(380 * var(--u));max-width:100%;padding:calc(14 * var(--u));
  background:var(--am-notice-bg);border:1px solid var(--am-notice-border);border-radius:calc(14 * var(--u));
  box-shadow:var(--am-notice-shadow)}
.am-notice__row{display:flex;align-items:center;gap:calc(10 * var(--u))}
.am-notice__tile{width:calc(30 * var(--u));height:calc(30 * var(--u));flex:none;border-radius:calc(9 * var(--u));
  display:grid;place-items:center;background:var(--am-notice-tile);color:var(--am-notice-tile-mark)}
.am-notice__txt{flex:1;min-width:0}
.am-notice__title{font-size:calc(13.5 * var(--u));font-weight:600;color:var(--am-notice-title);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-notice__meta{margin-top:calc(2 * var(--u));font-size:calc(11.5 * var(--u));color:var(--am-notice-meta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-notice__meta b{font-weight:500;color:var(--am-notice-body)}
.am-notice__acts{display:flex;align-items:center;gap:calc(6 * var(--u));flex:none}
.am-notice__body{margin-top:calc(8 * var(--u));font-size:calc(12 * var(--u));color:var(--am-notice-body)}
.am-notice__foot{margin-top:calc(4 * var(--u));font-size:calc(11 * var(--u));color:var(--am-notice-meta)}
.am-npill{display:inline-flex;align-items:center;gap:calc(6 * var(--u));height:calc(28 * var(--u));padding:0 calc(13 * var(--u));
  border-radius:calc(8 * var(--u));font-size:calc(12.5 * var(--u));font-weight:500;white-space:nowrap;
  background:var(--am-notice-quiet);color:var(--am-notice-quiet-ink);box-shadow:inset 0 0 0 1px var(--am-notice-border)}
.am-npill--primary{background:var(--am-notice-pill);color:var(--am-notice-pill-ink);box-shadow:none}
.am-npill--more{width:calc(28 * var(--u));padding:0;justify-content:center}

/* stop confirmation (StopConfirmModal in the recorder window: ModalCardChrome, 268 wide).
   It REPLACES the recorder chip while the question is up; no icon, no strip. */
.am--confirm{--am-vw:300;--am-max:1.5px}
.am-confirm{width:calc(268 * var(--u));max-width:100%;margin-inline:auto;padding:calc(24 * var(--u));
  background:var(--am-surface);border:1px solid var(--am-border);border-radius:calc(16 * var(--u));box-shadow:var(--am-shadow-lg)}
.am-confirm__t{font-size:calc(15 * var(--u));font-weight:600;letter-spacing:-.01em}
.am-confirm__b{margin-top:calc(8 * var(--u));font-size:calc(13 * var(--u));line-height:1.62;color:var(--am-text-2)}
.am-confirm__acts{display:flex;justify-content:flex-end;gap:calc(8 * var(--u));margin-top:calc(24 * var(--u))}

/* ---------- 6. settings card: transcription models ---------- */
.am--settings{--am-vw:540}
.am-card{background:var(--am-surface);border:1px solid var(--am-border);border-radius:calc(12 * var(--u))}
.am-card--float{box-shadow:0 0 0 1px var(--am-border),var(--am-shadow-window);border:0}
.am-card__head{padding:calc(16 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u))}
.am-card__desc{margin-top:calc(4 * var(--u));font-size:calc(12 * var(--u));color:var(--am-text-2)}
.am-tier{display:flex;align-items:center;gap:calc(12 * var(--u));padding:calc(12 * var(--u)) calc(16 * var(--u));border-top:1px solid var(--am-border)}
.am-tier__name{font-size:calc(13 * var(--u));font-weight:500}
.am-tier__detail{margin-top:calc(2 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-tier__state{display:flex;align-items:center;gap:calc(4 * var(--u));margin-left:auto;font-size:calc(12 * var(--u));
  color:var(--am-text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.am-tier__state.is-use{color:var(--am-ok);font-weight:500}
.am-card__foot{padding:calc(10 * var(--u)) calc(16 * var(--u));border-top:1px solid var(--am-border);font-size:calc(11 * var(--u));color:var(--am-text-3)}

/* ---------- 7. calendar: week view (the default view) ---------- */
.am--cal{--am-vw:700}
.am-calbar{display:flex;flex-wrap:wrap;align-items:center;gap:calc(10 * var(--u));padding:calc(10 * var(--u)) calc(14 * var(--u));border-bottom:1px solid var(--am-border)}
.am-calbar__title{font-size:calc(15 * var(--u));font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.am-calbar__title>span:not(.am-dash){font-weight:400;color:var(--am-text-3)}
.am-calbar__nav{display:flex;align-items:center;gap:calc(2 * var(--u));margin-left:auto;font-size:calc(13 * var(--u));color:var(--am-text-1)}
.am-week{--am-hour:44;--am-gut:44;display:grid;grid-template-columns:calc(var(--am-gut) * var(--u)) repeat(7,minmax(0,1fr))}
.am-week__corner{border-bottom:1px solid var(--am-border)}
.am-week__dh{display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--u));height:calc(38 * var(--u));
  border-bottom:1px solid var(--am-border);border-left:1px solid var(--am-border);font-size:calc(11 * var(--u));
  text-transform:uppercase;letter-spacing:.06em;color:var(--am-text-3)}
.am-week__dh b{font-size:calc(15 * var(--u));font-weight:500;letter-spacing:0;color:var(--am-text-1);text-transform:none}
.am-week__dh.is-today b{display:grid;place-items:center;width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;
  background:var(--am-accent);color:var(--am-on-accent)}
.am-week__adl{padding:calc(7 * var(--u)) 0 0 calc(4 * var(--u));border-bottom:1px solid var(--am-border);
  font-size:calc(9 * var(--u));text-transform:uppercase;letter-spacing:.06em;color:var(--am-text-3);white-space:nowrap}
.am-week__adc{min-height:calc(26 * var(--u));padding:calc(3 * var(--u)) calc(2 * var(--u));border-left:1px solid var(--am-border);
  border-bottom:1px solid var(--am-border)}
.am-week__ad{padding:calc(2 * var(--u)) calc(6 * var(--u));border-radius:calc(4 * var(--u));background:var(--am-hue-fill);color:var(--am-hue-ink);
  box-shadow:inset calc(3 * var(--u)) 0 0 var(--am-hue-ink);font-size:calc(11 * var(--u));font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 7 visible hours; a day column is a grid of quarter-hour rows, so an event is
   placed by class (.am-q<start> + .am-n<quarters>) and never by inline style */
.am-week__gut{display:grid;grid-template-rows:repeat(7,calc(var(--am-hour) * var(--u)));overflow:hidden}
.am-week__hr{align-self:start;line-height:1;padding-right:calc(6 * var(--u));text-align:right;transform:translateY(-50%);font-size:calc(10 * var(--u));
  color:var(--am-text-3);white-space:nowrap}
.am-week__hr:first-child{transform:none}
.am-week__col{display:grid;grid-template-rows:repeat(28,calc(var(--am-hour) / 4 * var(--u)));border-left:1px solid var(--am-border);
  background-image:linear-gradient(var(--am-border-subtle) 1px,transparent 1px);background-size:100% calc(var(--am-hour) * var(--u))}
.am-week__col.is-today{background-color:var(--am-accent-soft)}
.am-week__col.is-weekend{background-color:var(--am-surface-2)}
.am-ev{grid-column:1;position:relative;min-width:0;margin:0 calc(3 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u));
  padding:calc(3 * var(--u)) calc(5 * var(--u)) 0 calc(7 * var(--u));border-radius:calc(4 * var(--u));background:var(--am-hue-fill);
  color:var(--am-hue-ink);box-shadow:inset calc(3 * var(--u)) 0 0 var(--am-hue-ink);overflow:hidden}
.am-ev__t{font-size:calc(11 * var(--u));font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-ev__m{font-size:calc(10 * var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-ev .am-i{position:absolute;top:calc(4 * var(--u));right:calc(4 * var(--u))}
.am-now{grid-column:1;align-self:start;position:relative;z-index:1;height:calc(1.5 * var(--u));background:var(--am-danger)}
.am-now::before{content:"";position:absolute;left:calc(-3.5 * var(--u));top:calc(-2.75 * var(--u));width:calc(7 * var(--u));height:calc(7 * var(--u));
  border-radius:50%;background:var(--am-danger)}
.am-q1{grid-row-start:1}.am-q2{grid-row-start:2}.am-q3{grid-row-start:3}.am-q4{grid-row-start:4}.am-q5{grid-row-start:5}
.am-q6{grid-row-start:6}.am-q7{grid-row-start:7}.am-q8{grid-row-start:8}.am-q9{grid-row-start:9}.am-q10{grid-row-start:10}
.am-q11{grid-row-start:11}.am-q12{grid-row-start:12}.am-q13{grid-row-start:13}.am-q14{grid-row-start:14}.am-q15{grid-row-start:15}
.am-q16{grid-row-start:16}.am-q17{grid-row-start:17}.am-q18{grid-row-start:18}.am-q19{grid-row-start:19}.am-q20{grid-row-start:20}
.am-q21{grid-row-start:21}.am-q22{grid-row-start:22}.am-q23{grid-row-start:23}.am-q24{grid-row-start:24}.am-q25{grid-row-start:25}
.am-q26{grid-row-start:26}.am-q27{grid-row-start:27}.am-q28{grid-row-start:28}
.am-n1{grid-row-end:span 1}.am-n2{grid-row-end:span 2}.am-n3{grid-row-end:span 3}.am-n4{grid-row-end:span 4}
.am-n5{grid-row-end:span 5}.am-n6{grid-row-end:span 6}.am-n7{grid-row-end:span 7}.am-n8{grid-row-end:span 8}

/* ---------- 8. search: list search + transcript find, and the ⌘K palette ---------- */
.am--search{--am-vw:720}
.am-srch{display:grid;grid-template-columns:calc(270 * var(--u)) minmax(0,1fr);height:calc(400 * var(--u))}
.am-srch .am-list{padding-top:calc(14 * var(--u))}
.am-find{display:flex;align-items:center;gap:calc(8 * var(--u));margin:calc(12 * var(--u)) calc(22 * var(--u)) 0;padding:0 calc(6 * var(--u)) 0 calc(10 * var(--u));
  height:calc(32 * var(--u));border:1px solid var(--am-border-strong);border-radius:calc(8 * var(--u));font-size:calc(13 * var(--u))}
.am-find__n{margin-left:auto;font-size:calc(11 * var(--u));color:var(--am-text-3);font-variant-numeric:tabular-nums}
.am-turns{padding:calc(6 * var(--u)) calc(22 * var(--u)) 0 calc(10 * var(--u));min-height:0;overflow:hidden}
.am-turn{display:grid;grid-template-columns:calc(44 * var(--u)) minmax(0,1fr);column-gap:calc(8 * var(--u))}
.am-turn__who{grid-column:2;display:flex;align-items:center;gap:calc(8 * var(--u));margin-top:calc(12 * var(--u));
  font-size:calc(10 * var(--u));font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--am-text-2)}
.am-turn__ts{grid-column:1;text-align:right;padding-top:calc(4 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-4);font-variant-numeric:tabular-nums}
.am-turn__tx{grid-column:2;padding-top:calc(4 * var(--u));font-size:calc(14 * var(--u));line-height:1.55}
.am--palette{--am-vw:600}
.am-pal{width:calc(580 * var(--u));max-width:100%;margin-inline:auto;background:var(--am-overlay);border:1px solid var(--am-border);
  border-radius:calc(16 * var(--u));box-shadow:var(--am-shadow-dialog);overflow:hidden;font-size:calc(13 * var(--u))}
.am-pal__in{display:flex;align-items:center;gap:calc(10 * var(--u));height:calc(48 * var(--u));padding:0 calc(16 * var(--u));
  border-bottom:1px solid var(--am-border);font-size:calc(15 * var(--u))}
.am-pal__in .am-i{color:var(--am-text-3)}
.am-pal__g{padding:calc(12 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u));font-size:calc(11 * var(--u));font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--am-text-3)}
.am-pal__r{display:flex;align-items:center;gap:calc(10 * var(--u));height:calc(34 * var(--u));margin:0 calc(6 * var(--u));
  padding:0 calc(10 * var(--u));border-radius:calc(8 * var(--u));color:var(--am-text-1)}
.am-pal__r .am-i{color:var(--am-text-2)}
.am-pal__r.is-on{background:var(--am-hover)}
.am-pal__end{height:calc(8 * var(--u))}

/* ---------- 9. notes: the editor ---------- */
.am--notes{--am-vw:600}
.am-fbar{display:flex;align-items:center;flex-wrap:wrap;gap:calc(2 * var(--u));padding:calc(8 * var(--u)) calc(16 * var(--u));
  border-bottom:1px solid var(--am-border)}
.am-fbar__sep{width:1px;height:calc(16 * var(--u));margin:0 calc(6 * var(--u));background:var(--am-border)}
.am-fb{display:grid;place-items:center;min-width:calc(26 * var(--u));height:calc(26 * var(--u));padding:0 calc(5 * var(--u));
  border-radius:calc(6 * var(--u));font-size:calc(12 * var(--u));color:var(--am-text-2);white-space:nowrap}
.am-fb.is-on{background:var(--am-selected);color:var(--am-accent)}
.am-fb--b{font-weight:700}.am-fb--i{font-style:italic}.am-fb--s{text-decoration:line-through}
.am-fb--m{font-family:var(--font-mono);font-size:calc(11 * var(--u))}
.am-note{padding:calc(22 * var(--u)) calc(32 * var(--u)) calc(26 * var(--u));font-size:calc(14 * var(--u));line-height:calc(23 / 14)}
.am-note__title{font-size:calc(22 * var(--u));font-weight:600;letter-spacing:-.015em;line-height:1.25}
.am-note__meta{margin-top:calc(4 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-note__h{margin-top:calc(14 * var(--u));font-size:calc(15 * var(--u));font-weight:600}
.am-note p{margin-top:calc(8 * var(--u));color:var(--am-text-1)}
.am-task{display:flex;align-items:center;gap:calc(10 * var(--u));margin-top:calc(4 * var(--u))}
.am-task s{color:var(--am-text-3)}
.am-notelink{color:var(--am-accent);text-decoration:underline;text-decoration-color:var(--am-accent-line);text-underline-offset:calc(3 * var(--u))}
.am-note mark{background:var(--am-mark-fill);color:inherit;border-radius:calc(2 * var(--u));padding:0 calc(2 * var(--u))}

/* ---------- 10. student: the Courses ledger ---------- */
.am--courses{--am-vw:660}
.am-cpage{padding:calc(20 * var(--u)) calc(24 * var(--u)) calc(16 * var(--u))}
.am-cpage__head{display:flex;align-items:center;gap:calc(12 * var(--u))}
.am-cpage__title{font-size:calc(22 * var(--u));font-weight:600;letter-spacing:-.015em}
.am-select{display:flex;align-items:center;gap:calc(24 * var(--u));height:calc(30 * var(--u));padding:0 calc(8 * var(--u)) 0 calc(12 * var(--u));
  border:1px solid var(--am-border-strong);border-radius:calc(8 * var(--u));font-size:calc(13 * var(--u))}
.am-select .am-i{color:var(--am-text-3)}
.am-cpage__head .am-btn{margin-left:auto}
.am-cpage__stats{margin-top:calc(8 * var(--u));font-size:calc(13 * var(--u));color:var(--am-text-2);white-space:nowrap}
.am-cpage__stats b{font-weight:600;color:var(--am-text-1)}
.am-ledg{margin-top:calc(14 * var(--u));width:100%}
.am-ledg__r{display:grid;grid-template-columns:calc(70 * var(--u)) minmax(0,1.3fr) calc(116 * var(--u)) minmax(0,.9fr) minmax(0,1.2fr) calc(30 * var(--u));
  gap:calc(10 * var(--u));align-items:center;min-height:calc(50 * var(--u));border-top:1px solid var(--am-border);padding:0 calc(8 * var(--u))}
.am-ledg__r--h{min-height:calc(28 * var(--u));border-top:0;font-size:calc(10 * var(--u));text-transform:uppercase;letter-spacing:.06em;color:var(--am-text-3)}
.am-code{font-size:calc(10 * var(--u));font-weight:600;letter-spacing:.06em;color:var(--am-hue-ink);white-space:nowrap}
.am-course{min-width:0}
.am-course b{display:block;font-size:calc(13 * var(--u));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-course span{font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-meets{display:flex;gap:calc(3 * var(--u))}
.am-meets i{display:grid;place-items:center;width:calc(20 * var(--u));height:calc(18 * var(--u));border-radius:calc(4 * var(--u));
  font-style:normal;font-size:calc(9 * var(--u));color:var(--am-text-4)}
.am-meets i.is-on{background:var(--am-hue-fill);color:var(--am-hue-ink);font-weight:600}
.am-when{font-size:calc(12 * var(--u));white-space:nowrap}
.am-when>span:not(.am-dash){display:block;font-size:calc(11 * var(--u));color:var(--am-text-3)}

/* ---------- 11. hub vignettes: brief, insights, accounts, modes ---------- */
.am--vig{--am-vw:440}
.am-sheet{padding:calc(20 * var(--u)) calc(22 * var(--u));background:var(--am-surface);border-radius:calc(16 * var(--u));
  box-shadow:0 0 0 1px var(--am-border),var(--am-shadow-window)}
.am-sheet__title{margin-top:calc(4 * var(--u));font-size:calc(22 * var(--u));font-weight:700;letter-spacing:-.02em}
.am-sheet__deck{margin-top:calc(6 * var(--u));font-size:calc(14 * var(--u));line-height:1.5;color:var(--am-text-2)}
.am-quote{display:flex;gap:calc(10 * var(--u));margin-top:calc(10 * var(--u))}
.am-quote .am-stick{height:auto;align-self:stretch}
.am-quote p{font-size:calc(13 * var(--u));line-height:1.5}
.am-quote small{display:block;margin-top:calc(3 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-fold{margin-top:calc(8 * var(--u));font-size:calc(12 * var(--u));color:var(--am-text-2)}
.am-drow{display:flex;align-items:flex-start;gap:calc(10 * var(--u));padding:calc(8 * var(--u)) 0;border-top:1px solid var(--am-border-subtle)}
.am-drow:first-of-type{border-top:0}
.am-drow__t{flex:1;min-width:0;font-size:calc(13 * var(--u))}
.am-drow__t small{display:block;margin-top:calc(1 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-prov{margin-top:calc(12 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}

.am-ins__head{display:flex;align-items:center;gap:calc(10 * var(--u))}
.am-ins__head .am-seg{margin-left:auto}
.am-ins__range{margin-top:calc(2 * var(--u));font-size:calc(12 * var(--u));color:var(--am-text-3)}
.am-ins__sum{margin-top:calc(10 * var(--u));font-size:calc(13 * var(--u));color:var(--am-text-2)}
.am-ins__sum b{font-weight:600;color:var(--am-text-1)}
.am-chart{display:block;width:100%;height:calc(96 * var(--u));margin-top:calc(14 * var(--u));border-bottom:1px solid var(--am-border)}
.am-chart rect{fill:var(--am-data-fill)}
.am-chart rect.is-on{fill:var(--am-accent)}
.am-chart__note{margin-top:calc(6 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-rank{display:grid;grid-template-columns:minmax(0,1fr) calc(96 * var(--u)) calc(76 * var(--u));gap:calc(10 * var(--u));align-items:center;
  padding:calc(6 * var(--u)) 0;font-size:calc(12 * var(--u))}
.am-rank__who{display:flex;align-items:center;gap:calc(8 * var(--u));min-width:0;white-space:nowrap}
.am-meter{display:block;width:100%;height:calc(6 * var(--u))}
.am-meter rect:first-child{fill:var(--am-sunken)}
.am-meter rect+rect{fill:var(--am-data-strong)}
.am-rank__v{text-align:right;color:var(--am-text-2);font-variant-numeric:tabular-nums}

.am-acct{display:flex;align-items:center;gap:calc(10 * var(--u));padding:calc(10 * var(--u)) calc(12 * var(--u));border-top:1px solid var(--am-border)}
.am-acct__t{flex:1;min-width:0;font-size:calc(13 * var(--u));font-weight:500}
.am-acct__t small{display:flex;align-items:center;gap:calc(6 * var(--u));margin-top:calc(1 * var(--u));font-size:calc(11 * var(--u));
  font-weight:400;color:var(--am-text-3)}
.am-acct--add{color:var(--am-accent);font-size:calc(13 * var(--u));font-weight:500}
.am-pref{display:flex;align-items:center;gap:calc(12 * var(--u));padding:calc(10 * var(--u)) calc(12 * var(--u));border-top:1px solid var(--am-border)}
.am-pref__t{flex:1;min-width:0;font-size:calc(13 * var(--u))}
.am-pref__t small{display:block;margin-top:calc(1 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-toggle{position:relative;width:calc(36 * var(--u));height:calc(22 * var(--u));flex:none;border-radius:999px;background:var(--am-border-strong)}
.am-toggle::after{content:"";position:absolute;top:calc(2 * var(--u));left:calc(2 * var(--u));width:calc(18 * var(--u));height:calc(18 * var(--u));
  border-radius:50%;background:var(--am-surface);box-shadow:var(--am-shadow-lift)}
.am-toggle.is-on{background:var(--am-accent)}
.am-toggle.is-on::after{left:auto;right:calc(2 * var(--u))}

.am--modes{--am-vw:340;--am-max:1.3px}
.am-mmenu{width:calc(224 * var(--u));margin-top:calc(6 * var(--u));margin-left:calc(46 * var(--u));padding:calc(6 * var(--u));
  background:var(--am-overlay);border:1px solid var(--am-border);border-radius:calc(12 * var(--u));box-shadow:var(--am-shadow-overlay)}
.am-mmenu__h{padding:calc(6 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u));font-size:calc(10 * var(--u));font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--am-text-3)}
.am-mmenu__r{display:flex;align-items:center;gap:calc(10 * var(--u));height:calc(30 * var(--u));padding:0 calc(8 * var(--u));
  border-radius:calc(6 * var(--u));font-size:calc(13 * var(--u))}
.am-mmenu__r .am-i{color:var(--am-text-2)}
.am-mmenu__r .am-mmenu__check{margin-left:auto;color:var(--am-accent)}
.am-mmenu__r.is-hover{background:var(--am-hover)}
.am-mmenu__sep{height:1px;margin:calc(4 * var(--u)) calc(4 * var(--u));background:var(--am-border)}
.am-idcard{display:flex;align-items:center;gap:calc(10 * var(--u));width:calc(248 * var(--u));padding:calc(10 * var(--u));
  border-radius:calc(12 * var(--u));background:var(--am-canvas);box-shadow:0 0 0 1px var(--am-border)}
.am-idcard .am-ib{margin-left:auto;background:var(--am-hover);color:var(--am-text-1)}

/* ---------- 12. the Live screen (Session desk) ---------- */
.am--live{--am-vw:780}
.am-live{display:grid;grid-template-columns:minmax(0,1fr) calc(270 * var(--u));flex:1;min-height:0}
.am-live__feed{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.am-live__feed .am-turns{flex:1}
.am-nowc{margin:0 calc(14 * var(--u)) calc(8 * var(--u));padding:calc(8 * var(--u)) calc(12 * var(--u));border-radius:calc(12 * var(--u));
  border:1px solid var(--am-border);font-size:calc(13 * var(--u));color:var(--am-text-2)}
.am-nowc--you{border-color:var(--am-border-strong);box-shadow:var(--am-shadow-lift);color:var(--am-text-1)}
.am-nowc__who{display:flex;align-items:center;gap:calc(8 * var(--u));margin-bottom:calc(4 * var(--u));font-size:calc(10 * var(--u));
  font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--am-text-2)}
.am-nowc__who em{margin-left:auto;font-style:normal;text-transform:none;letter-spacing:0;color:var(--am-text-3)}
.am-live__rail{border-left:1px solid var(--am-border-subtle);padding:calc(16 * var(--u));min-height:0;overflow:hidden}
.am-lmark{position:relative;width:calc(18 * var(--u));height:calc(18 * var(--u));flex:none;display:grid;place-items:center;color:var(--am-danger)}
.am-lmark::after{content:"";position:absolute;inset:0;border-radius:50%;border:calc(1.5 * var(--u)) solid var(--am-danger);
  animation:am-breathe 2s var(--ease-standard) infinite}
.am-live__status{display:flex;align-items:center;gap:calc(8 * var(--u))}
.am-live__title{margin-top:calc(10 * var(--u));font-size:calc(15 * var(--u));font-weight:600;letter-spacing:-.01em}
.am-live__src{display:flex;align-items:flex-start;gap:calc(6 * var(--u));margin-top:calc(4 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-live__src .am-dot{margin-top:calc(4 * var(--u));width:calc(5 * var(--u));height:calc(5 * var(--u))}
.am-live__el{margin-top:calc(10 * var(--u));font-size:calc(24 * var(--u));font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.am-live__el small{margin-left:calc(4 * var(--u));font-size:calc(11 * var(--u));font-weight:400;letter-spacing:0;color:var(--am-text-3)}
.am-live__ctl{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6 * var(--u));margin-top:calc(10 * var(--u))}
.am-live__card{margin-top:calc(14 * var(--u));padding:calc(10 * var(--u)) calc(12 * var(--u));border-radius:calc(12 * var(--u));background:var(--am-surface-2)}
.am-live__card .am-eyebrow{display:flex;align-items:center}
.am-live__card .am-eyebrow .am-i{margin-left:auto}
.am-spk{display:flex;align-items:center;gap:calc(8 * var(--u));margin-top:calc(10 * var(--u));font-size:calc(13 * var(--u))}
.am-spk small{display:block;font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-spk .am-btn{margin-left:auto}

/* ---------- 12a. Action items (the Desk: ActionItemsView+Desk.swift, WorkspaceSplit.swift) ---------- */
.am--actions{--am-vw:1000}
.am-aipage{padding:calc(24 * var(--u)) calc(40 * var(--u)) calc(28 * var(--u))}
.am-aipage__title{font-size:calc(28 * var(--u));font-weight:700;letter-spacing:-.02em;line-height:1.2}
.am-aipage__sub{margin-top:calc(4 * var(--u));font-size:calc(13 * var(--u));color:var(--am-text-3);font-variant-numeric:tabular-nums}
.am-aisplit{display:grid;grid-template-columns:calc(212 * var(--u)) minmax(0,1fr);gap:calc(32 * var(--u));margin-top:calc(20 * var(--u))}
.am-airail{display:flex;flex-direction:column;gap:calc(2 * var(--u))}
.am-airail .am-eyebrow{padding:calc(16 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u))}
.am-airail .am-eyebrow:first-child{padding-top:0}
.am-airow{display:flex;align-items:center;gap:calc(12 * var(--u));min-height:calc(32 * var(--u));padding:calc(4 * var(--u)) calc(12 * var(--u));
  border-radius:calc(8 * var(--u));font-size:calc(13 * var(--u));font-weight:500}
.am-airow>.am-i{color:var(--am-text-2)}
.am-airow__n{margin-left:auto;font-size:calc(11 * var(--u));font-weight:400;color:var(--am-text-3);font-variant-numeric:tabular-nums}
.am-airow.is-on{background:var(--am-selected);color:var(--am-accent)}
.am-airow.is-on>.am-i,.am-airow.is-on .am-airow__n{color:var(--am-accent)}
.am-airail__sep{height:1px;margin:calc(8 * var(--u)) calc(12 * var(--u));background:var(--am-border)}
.am-aitools{display:flex;flex-wrap:wrap;align-items:center;gap:calc(12 * var(--u));margin-bottom:calc(16 * var(--u))}
.am-aitools .am-field{width:calc(240 * var(--u))}
.am-aitools__end{display:flex;align-items:center;gap:calc(12 * var(--u));margin-left:auto}
.am-sort{display:flex;align-items:center;gap:calc(4 * var(--u));font-size:calc(12 * var(--u));color:var(--am-text-3);white-space:nowrap}
.am-aigroup+.am-aigroup{margin-top:calc(32 * var(--u))}
.am-aigroup__h{display:flex;align-items:center;gap:calc(8 * var(--u));padding-left:calc(4 * var(--u));margin-bottom:calc(12 * var(--u));
  font-size:calc(13 * var(--u));font-weight:600}
.am-aigroup__h .am-dot{background:var(--am-dot)}
.am-aigroup__n{font-size:calc(11 * var(--u));font-weight:400;color:var(--am-text-3);font-variant-numeric:tabular-nums}
.am-aisub+.am-aisub{margin-top:calc(16 * var(--u))}
.am-aisub__h{display:flex;align-items:center;gap:calc(8 * var(--u));padding-left:calc(4 * var(--u));margin-bottom:calc(8 * var(--u));
  font-size:calc(11 * var(--u));font-weight:600;color:var(--am-text-3)}
.am-aisub__h .am-dot{width:calc(6 * var(--u));height:calc(6 * var(--u));background:var(--am-dot)}
.am-aisub__h .am-aigroup__n{opacity:.7}
.am-dot--you{--am-dot:var(--am-accent)}
.am-dot--others{--am-dot:var(--am-cal-teal-ink)}
.am-dot--none{--am-dot:var(--am-text-3)}
.am-dot--over{--am-dot:var(--am-danger)}
.am-dot--today{--am-dot:var(--am-warn)}
.am-dot--later{--am-dot:var(--am-text-3)}
.am-dot--nodate{--am-dot:var(--am-border-strong)}
.am-aicard{background:var(--am-surface);border:1px solid var(--am-border);border-radius:calc(12 * var(--u));overflow:hidden}
.am-airow2{display:grid;grid-template-columns:auto minmax(0,1fr) calc(96 * var(--u)) calc(24 * var(--u)) calc(148 * var(--u)) calc(20 * var(--u));
  column-gap:calc(16 * var(--u));align-items:center;min-height:calc(48 * var(--u));padding:calc(12 * var(--u)) calc(20 * var(--u))}
.am-airow2+.am-airow2{border-top:1px solid var(--am-border-subtle)}
.am-airow2__t{font-size:calc(13 * var(--u));font-weight:500}
.am-srcl{display:flex;align-items:center;gap:calc(4 * var(--u));margin-top:calc(2 * var(--u));font-size:calc(12 * var(--u));color:var(--am-text-3);
  white-space:nowrap;overflow:hidden}
.am-srcl .am-stick{width:calc(3 * var(--u));height:calc(10 * var(--u));border-radius:0}
.am-srcl__day{opacity:.8;font-variant-numeric:tabular-nums}
.am-unassigned{width:calc(22 * var(--u));height:calc(22 * var(--u));display:grid;place-items:center;border-radius:50%;
  border:1px dashed var(--am-border);color:var(--am-text-3)}
.am-due{display:flex;align-items:center;gap:calc(4 * var(--u));font-size:calc(12 * var(--u));color:var(--am-text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.am-due--add{color:var(--am-text-3)}

/* ---------- 12b-home. Home, Meetings mode (HomeScreen.swift, HomeTodayArea.swift, HomeSections.swift) ---------- */
.am-home{min-height:0;overflow:hidden;padding:calc(28 * var(--u)) calc(32 * var(--u))}
.am-home__title{margin-top:calc(4 * var(--u));font-size:calc(28 * var(--u));font-weight:700;letter-spacing:-.02em;line-height:1.2}
.am-home__facts{margin-top:calc(8 * var(--u));font-size:calc(13 * var(--u));color:var(--am-text-2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.am-home__facts b{font-weight:600;color:var(--am-text-1)}
.am-home__facts i{font-style:normal;color:var(--am-text-3);opacity:.6}
.am-home__facts em{font-style:normal;color:var(--am-danger)}
.am-thead{display:flex;align-items:center;gap:calc(12 * var(--u));margin-top:calc(32 * var(--u))}
.am-thead__next{display:flex;align-items:center;gap:calc(8 * var(--u));flex:0 1 auto;min-width:0;font-size:calc(13 * var(--u));white-space:nowrap}
.am-thead__next .am-dot{background:var(--am-danger)}
.am-thead__next b{min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.am-thead__lead{flex:none;color:var(--am-text-3);font-variant-numeric:tabular-nums}
.am-recordit{display:inline-flex;align-items:center;gap:calc(5 * var(--u));white-space:nowrap;flex:none;font-size:calc(12 * var(--u));font-weight:500;color:var(--am-accent)}
.am-thead .am-seg{margin-left:auto}
.am-linkbtn{display:inline-flex;align-items:center;gap:calc(4 * var(--u));font-size:calc(12 * var(--u));font-weight:500;color:var(--am-text-2);white-space:nowrap}
.am-linkbtn .am-i{color:var(--am-text-3)}
.am-hscale{display:grid;grid-template-columns:repeat(var(--am-hours),minmax(0,1fr));margin-top:calc(16 * var(--u));
  font-size:calc(10 * var(--u));color:var(--am-text-3);font-variant-numeric:tabular-nums}
.am-hscale span{opacity:.8}
.am-track{--am-lane:72;display:grid;grid-template-columns:repeat(var(--am-halfhours),minmax(0,1fr));
  grid-template-rows:repeat(2,calc(var(--am-lane) * var(--u)));row-gap:calc(8 * var(--u));margin-top:calc(4 * var(--u));
  padding:calc(12 * var(--u)) 0;border-radius:calc(12 * var(--u));background-color:var(--am-surface-2);
  background-image:linear-gradient(to right,var(--am-border-subtle) 1px,transparent 1px);
  background-size:calc(100% / var(--am-hours)) 100%;background-position:calc(-1px) 0}
.am-home{--am-hours:10;--am-halfhours:20}
.am-blk{position:relative;min-width:0;margin:0 calc(4 * var(--u));padding:calc(9 * var(--u)) calc(12 * var(--u)) 0 calc(14 * var(--u));
  border-radius:calc(8 * var(--u));background:var(--am-hue-fill);color:var(--am-hue-ink);overflow:hidden}
.am-blk::before{content:"";position:absolute;left:calc(5 * var(--u));top:calc(6 * var(--u));bottom:calc(6 * var(--u));width:calc(3 * var(--u));
  background:var(--am-hue-ink)}
.am-blk__t{font-size:calc(12 * var(--u));font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.am-blk__m{margin-top:calc(3 * var(--u));font-size:calc(10 * var(--u));opacity:.8;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-blk.is-past{opacity:.62}
.am-blk.is-next{box-shadow:inset 0 0 0 calc(1.5 * var(--u)) var(--am-hue-ink)}
.am-tnow{grid-row:1 / -1;position:relative;justify-self:start;width:calc(1.5 * var(--u));margin:calc(-12 * var(--u)) 0;background:var(--am-danger)}
.am-tnow::before{content:"";position:absolute;top:0;left:calc(-2.75 * var(--u));width:calc(7 * var(--u));height:calc(7 * var(--u));border-radius:50%;background:var(--am-danger)}
.am-r1{grid-row:1}.am-r2{grid-row:2}
.am-x1{grid-column-start:1}.am-x2{grid-column-start:2}.am-x3{grid-column-start:3}.am-x4{grid-column-start:4}.am-x5{grid-column-start:5}
.am-x6{grid-column-start:6}.am-x7{grid-column-start:7}.am-x8{grid-column-start:8}.am-x9{grid-column-start:9}.am-x10{grid-column-start:10}
.am-x11{grid-column-start:11}.am-x12{grid-column-start:12}.am-x13{grid-column-start:13}.am-x14{grid-column-start:14}.am-x15{grid-column-start:15}
.am-x16{grid-column-start:16}.am-x17{grid-column-start:17}.am-x18{grid-column-start:18}.am-x19{grid-column-start:19}.am-x20{grid-column-start:20}
.am-w2{grid-column-end:span 2}.am-w3{grid-column-end:span 3}.am-w4{grid-column-end:span 4}.am-w5{grid-column-end:span 5}
.am-w6{grid-column-end:span 6}.am-w7{grid-column-end:span 7}.am-w8{grid-column-end:span 8}
.am-tfoot{display:flex;align-items:center;gap:calc(8 * var(--u));margin-top:calc(12 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.am-tfoot span:last-child{margin-left:auto}
.am-hgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:calc(40 * var(--u));margin-top:calc(40 * var(--u))}
.am-hsec{display:flex;align-items:center;gap:calc(12 * var(--u));min-height:calc(28 * var(--u));margin-bottom:calc(16 * var(--u))}
.am-hsec__t{font-size:calc(17 * var(--u));font-weight:600;letter-spacing:-.01em}
.am-hsec .am-linkbtn{margin-left:auto}
.am-duerow{display:grid;grid-template-columns:auto minmax(0,1fr) calc(76 * var(--u));gap:calc(12 * var(--u));align-items:start;
  min-height:calc(36 * var(--u));padding:calc(8 * var(--u)) calc(12 * var(--u))}
.am-duerow__t{font-size:calc(13 * var(--u))}
.am-duerow__t small{display:block;margin-top:calc(1 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-duerow__d{padding-top:calc(2 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-2);font-variant-numeric:tabular-nums}
.am-waitrow{display:flex;align-items:center;gap:calc(12 * var(--u));min-height:calc(44 * var(--u));padding:calc(8 * var(--u)) calc(12 * var(--u))}
.am-waitrow__t{flex:1;min-width:0;font-size:calc(13 * var(--u));font-weight:500}
.am-waitrow__t small{display:block;font-size:calc(12 * var(--u));font-weight:400;color:var(--am-text-3)}
.am-ava.am-ava--10{font-size:calc(10 * var(--u))}

/* ---------- 12b. composition + helpers used by the specimens ---------- */
.am--summary{--am-vw:560}
.am-stackv{display:grid;gap:calc(14 * var(--u))}
.am-sheet__title--md{margin-top:0;font-size:calc(22 * var(--u));font-weight:600;letter-spacing:-.015em}
.am-sheet__sec{margin-top:calc(18 * var(--u))}
.am-drow__time{flex:none;width:calc(58 * var(--u));padding-top:calc(1 * var(--u));font-size:calc(11 * var(--u));color:var(--am-text-3)}
.am-drow .am-stick{margin-top:calc(1 * var(--u))}
.am-drow .am-check{margin-top:calc(1 * var(--u))}
.am-ins__rankh{display:flex;align-items:baseline;gap:calc(8 * var(--u));margin-bottom:calc(4 * var(--u))}
.am-modestage{padding:calc(4 * var(--u)) 0 calc(8 * var(--u))}
.am-pal__ph{color:var(--am-text-3)}
.am-ai-list{margin-top:calc(8 * var(--u))}
.am-calbar__today{padding:0 calc(4 * var(--u));font-size:calc(13 * var(--u))}
.am-livepanel{height:calc(470 * var(--u))}
.am-live__empty{margin-top:calc(8 * var(--u));font-size:calc(12 * var(--u));line-height:1.5;color:var(--am-text-2)}
.am-live__add{display:flex;align-items:center;gap:calc(6 * var(--u));margin-top:calc(10 * var(--u));font-size:calc(12 * var(--u));color:var(--am-text-2)}

/* ---------- 12c. placements: the layout hooks the host sections need ---------- */
/* a visual column that holds more than one mockup, stacked in flow (a notice card over the
   screen it announces on /features/summaries and /features/calendar) */
.am-stack{display:grid;gap:20px;align-content:start}
/* a section's centred visual between its head and its body (/features/live-recording,
   "Where the audio goes": the Stop listening? card) */
.sec-visual{margin-top:44px;display:flex;justify-content:center}
.sec-visual>.am{width:min(100%,420px)}

/* ---------- 12d. due tones (DueTone.swift:16-35). Declared after every component that sets a
   neutral due ink, so a tone always wins at equal specificity. ---------- */
.am-due--today{color:var(--am-warn)}
.am-due--over{color:var(--am-danger)}

/* ---------- 13. container queries: restructure when the column narrows ---------- */
/* The scale floor (--am-min .8px) means a mockup fits only while its column is at least
   .8 × --am-vw wide. Each tier lowers --am-vw to what the tier's narrowest column can hold
   (620 → 576 at most; 460 → 400, which fits a 368px viewport's 320px column) and hides or
   stacks what no longer fits, so text never renders under the floor and nothing overflows. */
@container (max-width:999px){
  .am-thead .am-linkbtn{display:none}
}
@container (min-width:1000px){
  .am-win:not(.am-win--rail-collapsed){--am-rail-w:220;--am-list-w:290}
  .am-search{width:calc(230 * var(--u))}
}
@container (max-width:620px){
  .am--actions .am-s{--am-vw:560}
  .am-aisplit{grid-template-columns:minmax(0,1fr)}
  .am-airail{display:none}
  .am-airow2{grid-template-columns:auto minmax(0,1fr) calc(24 * var(--u)) calc(110 * var(--u))}
  .am-airow2>:nth-child(3),.am-airow2>:nth-child(6){display:none}
  .am-aitools .am-field{display:none}
  .am-win .am-home .am-hgrid{grid-template-columns:minmax(0,1fr)}
  .am-win .am-home .am-hgrid>:nth-child(2){display:none}
  .am-thead{flex-wrap:wrap;row-gap:calc(10 * var(--u))}
  .am-thead .am-seg{margin-left:0;order:1}
  .am-home__facts{white-space:normal}
  .am--window .am-s{--am-vw:560}
  .am-win{--am-list-w:0}
  .am-win .am-list{display:none}
  .am-win .am-work{grid-template-columns:minmax(0,1fr)}
  .am-win .am-search{width:auto}
  .am-win .am-search>span:not(.am-kbd){display:none}
  .am-win .am-top__theme{display:none}
  .am--search .am-s{--am-vw:450}
  .am-srch{grid-template-columns:minmax(0,1fr)}
  .am-srch .am-list{display:none}
  .am--live .am-s{--am-vw:520}
  .am-live{grid-template-columns:minmax(0,1fr)}
  .am-live__rail{display:none}
  .am--cal .am-s,.am--person .am-s,.am--courses .am-s,.am--palette .am-s,.am--notes .am-s{--am-vw:560}
}
@container (max-width:460px){
  .am--window .am-s{--am-vw:390}
  .am-win{grid-template-columns:minmax(0,1fr)}
  .am-win .am-rail,.am-win .am-tls{display:none}
  .am-win .am-panel{margin:0;border:0;border-radius:0}
  .am-search{width:auto}
  .am-search>span:not(.am-kbd){display:none}
  .am--person .am-s,.am--courses .am-s,.am--cal .am-s,.am--scene .am-s,.am--settings .am-s,
  .am--palette .am-s,.am--notes .am-s,.am--vig .am-s,.am--summary .am-s,.am--search .am-s,
  .am--live .am-s,.am--actions .am-s{--am-vw:400}
  .am-week{grid-template-columns:calc(var(--am-gut) * var(--u)) repeat(3,minmax(0,1fr))}
  .am-week .am-wk-x{display:none}
  .am-ledg__r{grid-template-columns:calc(70 * var(--u)) minmax(0,1fr) calc(34 * var(--u))}
  .am-ledg__r>:nth-child(3),.am-ledg__r>:nth-child(4),.am-ledg__r>:nth-child(5){display:none}
  .am-cpage__stats{white-space:normal}
  .am-calbar__filter,.am-calbar__new{display:none}
  .am-top__theme{display:none}
  .am-top .am-crumb~.am-btn{display:none}
  .am-acts__btns{margin-left:0}
  .am-aitools__end{margin-left:0;flex-wrap:wrap;row-gap:calc(8 * var(--u))}
  .am-aipage{padding-inline:calc(16 * var(--u))}
  .am-airow2{grid-template-columns:auto minmax(0,1fr) calc(22 * var(--u)) auto;column-gap:calc(10 * var(--u));padding:calc(10 * var(--u)) calc(12 * var(--u))}
}

/* ---------- 14. motion ---------- */
@media (prefers-reduced-motion:reduce){
  .am-livedot::after,.am-lmark::after{animation:none;opacity:0}
}