/* GENERATED by site/build-site.mjs from tokens/tokens.json — do not edit. */
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/SchibstedGrotesk.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('fonts/InstrumentSans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --radius: 0.625rem;
  --radius-card: 16px;
  --radius-band: 24px;
  --shadow-float: 0 18px 50px rgba(24, 34, 43, 0.16);
  --motion-arrive: 700ms;
  --motion-land: 600ms;
  --motion-micro: 180ms;
  --motion-press-in: 90ms;
  --motion-press-out: 260ms;
  --motion-ambient-min: 4s;
  --motion-ambient-max: 8s;
  --motion-scrub-damping: 0.6;
  --motion-reduced: 200ms;
  --motion-ease-arrive: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-land: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-micro: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-ease-press-in: ease-out;
  --motion-ease-press-out: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-ease-ambient: cubic-bezier(0.37, 0, 0.63, 1);
  --type-h1: 56px;
  --type-h1-phone: 40px;
  --type-h2: 42px;
  --type-h2-phone: 30px;
  --type-tile-title: 19px;
  --type-label: 11px;
  --type-label-tracking: 0.08em;
  --section-gap: 112px;
  --section-gap-phone: 80px;
  --content-width: 1120px;
  --gutter-phone: 16px;
  --stage-dusk-ground: #171E2A;
  --stage-dusk-ink: #DCE0E5;
  --stage-dusk-secondary: rgba(220, 224, 229, 0.68);
  --stage-dusk-fill: rgba(220, 224, 229, 0.1);
  --stage-dusk-hairline: rgba(220, 224, 229, 0.3);
  --stage-dusk-stop: #FF453A;
  --stage-off-record-ground: #E8A317;
  --stage-off-record-ink: #18222B;
  --stage-off-record-secondary: rgba(24, 34, 43, 0.75);
  --stage-off-record-fill: rgba(24, 34, 43, 0.1);
  --stage-off-record-hairline: rgba(24, 34, 43, 0.28);
  --stage-off-record-stop: #FF3B30;
  --stage-on-stop: #18222B;
  --stage-live-dot: #E8574A;
  --stage-card-hairline-dusk: rgba(220, 224, 229, 0.22);
  --stage-card-hairline-off-record: rgba(24, 34, 43, 0.22);
  --stage-speaker-1: #5CB8F0;
  --stage-speaker-2: #FAB55C;
  --stage-speaker-3: #B899F5;
  --stage-speaker-4: #EC8DEC;
  --stage-speaker-5: #F58FAD;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-card: var(--radius-card);
  --radius-band: var(--radius-band);
  --shadow-float: var(--shadow-float);
}
:root {
  --background: #F8FAFC;
  --foreground: #18222B;
  --card: #FFFFFF;
  --card-foreground: #18222B;
  --popover: #FFFFFF;
  --popover-foreground: #18222B;
  --primary: #FF6B5A;
  --primary-foreground: #18222B;
  --secondary: #EAF0F4;
  --secondary-foreground: #18222B;
  --muted: #F1F5F8;
  --muted-foreground: #4E5E6B;
  --accent: #EAF0F4;
  --accent-foreground: #18222B;
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: #FFFFFF;
  --border: #E2E9EF;
  --input: #E2E9EF;
  --rule: rgba(78, 94, 107, 0.7);
  --disabled-fill: #EAF0F4;
  --on-disabled: #4E5E6B;
  --ring: #FF6B5A;
  --confirm: #3E5D86;
  --confirm-soft: #E8EEF7;
  --waiting: #A9560B;
  --waiting-soft: #FBF1DE;
  --bubble-member: #E8EEF7;
  --coral-deep: #C63A28;
  --coral-soft: #FFF2EF;
  --coral-hover: #FF7A6B;
  --sidebar: #F1F5F8;
  --sidebar-foreground: #18222B;
  --sidebar-primary: #FF6B5A;
  --sidebar-primary-foreground: #18222B;
  --sidebar-accent: #EAF0F4;
  --sidebar-accent-foreground: #18222B;
  --sidebar-border: #E2E9EF;
  --sidebar-ring: #FF6B5A;
}
@media (prefers-color-scheme: dark) {
  :root {
  --background: #171E2A;
  --foreground: #DCE0E5;
  --card: #1F2833;
  --card-foreground: #DCE0E5;
  --popover: #1F2833;
  --popover-foreground: #DCE0E5;
  --primary: #E38273;
  --primary-foreground: #18222B;
  --secondary: #2A3646;
  --secondary-foreground: #DCE0E5;
  --muted: #1F2833;
  --muted-foreground: #93A0AD;
  --accent: #2A3646;
  --accent-foreground: #DCE0E5;
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: #FFFFFF;
  --border: #2A3646;
  --input: #2A3646;
  --rule: rgba(147, 160, 173, 0.7);
  --disabled-fill: #2A3646;
  --on-disabled: #93A0AD;
  --ring: #E38273;
  --confirm: #8FB2DC;
  --confirm-soft: #2E3E58;
  --waiting: #D9BC6A;
  --waiting-soft: #3A3524;
  --bubble-member: #2E3E58;
  --coral-deep: #FF9081;
  --coral-soft: #3A282A;
  --coral-hover: #E98F80;
  --sidebar: #131926;
  --sidebar-foreground: #DCE0E5;
  --sidebar-primary: #E38273;
  --sidebar-primary-foreground: #18222B;
  --sidebar-accent: #2A3646;
  --sidebar-accent-foreground: #DCE0E5;
  --sidebar-border: #2A3646;
  --sidebar-ring: #E38273;
}
}
.scheme-light {
  --background: #F8FAFC;
  --foreground: #18222B;
  --card: #FFFFFF;
  --card-foreground: #18222B;
  --popover: #FFFFFF;
  --popover-foreground: #18222B;
  --primary: #FF6B5A;
  --primary-foreground: #18222B;
  --secondary: #EAF0F4;
  --secondary-foreground: #18222B;
  --muted: #F1F5F8;
  --muted-foreground: #4E5E6B;
  --accent: #EAF0F4;
  --accent-foreground: #18222B;
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: #FFFFFF;
  --border: #E2E9EF;
  --input: #E2E9EF;
  --rule: rgba(78, 94, 107, 0.7);
  --disabled-fill: #EAF0F4;
  --on-disabled: #4E5E6B;
  --ring: #FF6B5A;
  --confirm: #3E5D86;
  --confirm-soft: #E8EEF7;
  --waiting: #A9560B;
  --waiting-soft: #FBF1DE;
  --bubble-member: #E8EEF7;
  --coral-deep: #C63A28;
  --coral-soft: #FFF2EF;
  --coral-hover: #FF7A6B;
  --sidebar: #F1F5F8;
  --sidebar-foreground: #18222B;
  --sidebar-primary: #FF6B5A;
  --sidebar-primary-foreground: #18222B;
  --sidebar-accent: #EAF0F4;
  --sidebar-accent-foreground: #18222B;
  --sidebar-border: #E2E9EF;
  --sidebar-ring: #FF6B5A;
}
.scheme-dark {
  --background: #171E2A;
  --foreground: #DCE0E5;
  --card: #1F2833;
  --card-foreground: #DCE0E5;
  --popover: #1F2833;
  --popover-foreground: #DCE0E5;
  --primary: #E38273;
  --primary-foreground: #18222B;
  --secondary: #2A3646;
  --secondary-foreground: #DCE0E5;
  --muted: #1F2833;
  --muted-foreground: #93A0AD;
  --accent: #2A3646;
  --accent-foreground: #DCE0E5;
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: #FFFFFF;
  --border: #2A3646;
  --input: #2A3646;
  --rule: rgba(147, 160, 173, 0.7);
  --disabled-fill: #2A3646;
  --on-disabled: #93A0AD;
  --ring: #E38273;
  --confirm: #8FB2DC;
  --confirm-soft: #2E3E58;
  --waiting: #D9BC6A;
  --waiting-soft: #3A3524;
  --bubble-member: #2E3E58;
  --coral-deep: #FF9081;
  --coral-soft: #3A282A;
  --coral-hover: #E98F80;
  --sidebar: #131926;
  --sidebar-foreground: #DCE0E5;
  --sidebar-primary: #E38273;
  --sidebar-primary-foreground: #18222B;
  --sidebar-accent: #2A3646;
  --sidebar-accent-foreground: #DCE0E5;
  --sidebar-border: #2A3646;
  --sidebar-ring: #E38273;
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px; line-height: 1.55;
}
h1, h2, h3 { font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; }
h1 { font-size: 2.4rem; font-weight: 800; margin: 0 0 .4rem; }
h2 { font-size: 1.5rem; font-weight: 700; margin: 2.6rem 0 .8rem; }
h3 { font-size: 1.1rem; font-weight: 700; margin: 1.8rem 0 .5rem; }
a { color: var(--foreground); }
p.lede { color: var(--muted-foreground); max-width: 46rem; margin-top: 0; }
/* overflow-wrap: a long unbreakable path in an inline <code> (the stage cites
 * one 63 characters long) is otherwise the one thing that makes a page scroll
 * sideways on a phone. */
code { background: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: .1em .35em; font-size: .88em; overflow-wrap: anywhere; }
pre { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; font-size: .85rem; }
pre code { background: none; border: none; padding: 0; }

.shell { display: flex; min-height: 100vh; }
nav#airmond-nav {
  width: 230px; flex: none; padding: 28px 20px; border-right: 1px solid var(--border);
  background: var(--sidebar); position: sticky; top: 0; align-self: flex-start; min-height: 100vh;
}
nav#airmond-nav .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
nav#airmond-nav .brand img { width: 30px; height: 30px; border-radius: 7px; }
nav#airmond-nav .brand span { font-family: 'Schibsted Grotesk'; font-weight: 800; font-size: 1.15rem; }
nav#airmond-nav a {
  display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none;
  color: var(--sidebar-foreground); font-size: .95rem; margin-bottom: 2px;
}
nav#airmond-nav a:hover { background: var(--sidebar-accent); }
nav#airmond-nav a.active { background: var(--sidebar-accent); font-weight: 700; }
nav#airmond-nav a.active::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 3px; background: var(--sidebar-primary); margin-right: 8px; vertical-align: 2px; }
main { flex: 1; min-width: 0; padding: 44px clamp(20px, 5vw, 64px) 90px; max-width: 1100px; }
@media (max-width: 820px) {
  .shell { display: block; }
  nav#airmond-nav { width: auto; min-height: 0; position: static; border-right: none; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 2px; padding: 14px 16px; }
  nav#airmond-nav .brand { margin: 0 12px 0 0; }
  main { padding: 28px 18px 70px; }
}

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.swatch { cursor: pointer; }
.swatch .chip { height: 64px; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--border); margin-bottom: 10px; }
.swatch .name { font-weight: 700; font-size: .92rem; }
.swatch .hex { font-family: ui-monospace, monospace; font-size: .82rem; color: var(--muted-foreground); }
.swatch .ratios { font-size: .74rem; color: var(--muted-foreground); margin-top: 6px; line-height: 1.5; }
.swatch.copied .hex::after { content: ' — copied'; color: var(--confirm); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted-foreground); font-weight: 600; }
.table-scroll { overflow-x: auto; }
/* A token name is ONE word, and breaking it across four lines makes the
 * contract look like a typo: layout.control.secondaryBorderWidth did exactly
 * that the moment the control block gained its longest key. The first column
 * holds the name, so the name does not break and the table scrolls instead.
 * Same rule, same reason, as .th-tokens code. */
.table-scroll td:first-child code, .table-scroll th:first-child code { white-space: nowrap; }
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .74rem; font-weight: 600; }
.pill.ok { background: var(--confirm-soft); color: var(--confirm); }
.dl { display: inline-block; margin: 2px 6px 2px 0; font-size: .82rem; }
.preview { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; align-items: center; justify-content: center; }
.preview img { max-width: 100%; max-height: 150px; }
.on-l { background: #F8FAFC; }
.on-d { background: #171E2A; }
.warn { border-left: 4px solid var(--waiting); background: var(--waiting-soft); color: var(--foreground); padding: 12px 16px; border-radius: 8px; }
.note { border-left: 4px solid var(--confirm); background: var(--confirm-soft); color: var(--foreground); padding: 12px 16px; border-radius: 8px; }

/* shadcn-style static component previews, rendered purely from the vars */
.panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; background: var(--background); color: var(--foreground); }
.panel h4 { margin: 0 0 16px; font-family: 'Schibsted Grotesk'; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.btn { font: inherit; font-size: .9rem; font-weight: 600; border-radius: calc(var(--radius) - 2px); padding: 9px 16px; border: 1px solid transparent; cursor: default; }
.btn.primary { background: var(--primary); color: var(--primary-foreground); }
.btn.secondary { background: var(--secondary); color: var(--secondary-foreground); }
/* An outline button is found by its outline, so it takes --rule (3.24:1 on the
 * ground) rather than --border (1.16:1), per the mark rule on this page. */
.btn.outline { background: transparent; color: var(--foreground); border-color: var(--rule); }
/* Disabled is a TOKEN PAIR at full strength, never a group opacity: the plate
 * says unavailable, the outline says it is still a control, and the label is
 * held to the body bar because the dim is what hides the copy explaining what
 * enabling it would cost. */
.btn.disabled { background: var(--disabled-fill); color: var(--on-disabled); border-color: var(--rule); }
.btn.ghost { background: transparent; color: var(--foreground); }
.btn.destructive { background: var(--destructive); color: var(--destructive-foreground); }
.btn.confirm { background: var(--confirm); color: #FFFFFF; }
.badge { display: inline-block; border-radius: 999px; padding: 3px 11px; font-size: .76rem; font-weight: 600; }
.badge.confirm { background: var(--confirm-soft); color: var(--confirm); }
.badge.waiting { background: var(--waiting-soft); color: var(--waiting); }
.badge.coral { background: var(--coral-soft); color: var(--coral-deep); }
.badge.neutral { background: var(--secondary); color: var(--secondary-foreground); }
.input { font: inherit; font-size: .9rem; background: var(--card); color: var(--foreground); border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); padding: 9px 12px; width: 240px; }
.input:focus { outline: 2px solid var(--ring); outline-offset: 1px; }
.tabs { display: inline-flex; background: var(--muted); border-radius: calc(var(--radius) - 2px); padding: 3px; gap: 2px; }
.tab { font-size: .85rem; font-weight: 600; padding: 6px 14px; border-radius: calc(var(--radius) - 4px); color: var(--muted-foreground); }
.tab.active { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.demo-card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; max-width: 330px; }
.demo-card .t { font-family: 'Schibsted Grotesk'; font-weight: 700; margin-bottom: 4px; }
.demo-card .m { color: var(--muted-foreground); font-size: .86rem; margin-bottom: 12px; }
.alert { display: flex; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; max-width: 430px; font-size: .88rem; }
.alert.confirm { border-color: var(--confirm); background: var(--confirm-soft); color: var(--confirm); }
.alert.waiting { border-color: var(--waiting); background: var(--waiting-soft); color: var(--waiting); }
.bubble { border-radius: 16px; padding: 10px 14px; max-width: 280px; font-size: .9rem; }
.bubble.member { background: var(--bubble-member); color: var(--foreground); }
.type-row td:first-child { color: var(--muted-foreground); white-space: nowrap; }

/* ---- The RECORDING STAGE, drawn in its own two grounds ------------------
 * Every component below reads --rs-*, and the only thing the two ground
 * classes do is point --rs-* at one --stage-* set or the other. That is the
 * stage's whole architecture in CSS: ONE anatomy, TWO worlds, and a member
 * two metres away can tell them apart without reading a word. */
.rs { --rs-radius: 12px; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin: 0 0 14px; background: var(--rs-ground); color: var(--rs-ink); }
.rs-dusk {
  --rs-ground: var(--stage-dusk-ground); --rs-ink: var(--stage-dusk-ink);
  --rs-secondary: var(--stage-dusk-secondary); --rs-fill: var(--stage-dusk-fill);
  --rs-hairline: var(--stage-dusk-hairline); --rs-card-line: var(--stage-card-hairline-dusk);
  --rs-stop: var(--stage-dusk-stop); --rs-chip-ink: var(--confirm);
}
.rs-amber {
  --rs-ground: var(--stage-off-record-ground); --rs-ink: var(--stage-off-record-ink);
  --rs-secondary: var(--stage-off-record-secondary); --rs-fill: var(--stage-off-record-fill);
  --rs-hairline: var(--stage-off-record-hairline); --rs-card-line: var(--stage-card-hairline-off-record);
  --rs-stop: var(--stage-off-record-stop); --rs-chip-ink: var(--stage-off-record-ink);
}
.rs-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 0 0 6px; }
.rs-lbl { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rs-secondary); margin: 0 0 10px; }
.rs-stack { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* The capture card: transparent with a currentColor-strength outline, never a filled card. */
.rs-cap { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--rs-radius); border: 1px solid var(--rs-card-line); background: transparent; width: 100%; }
.rs-kind { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.rs-dusk .rs-kind { background: rgba(143, 178, 220, .18); color: var(--confirm); }
.rs-amber .rs-kind { background: rgba(24, 34, 43, .12); color: var(--rs-ink); }
.rs-cap .h { font-size: 17px; font-weight: 600; line-height: 1.35; }
.rs-cap .d { font-size: 15px; line-height: 1.45; color: var(--rs-secondary); }

/* The feed header: an eyebrow and, on the right, the count. */
.rs-feedhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.rs-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--rs-secondary); }
.rs-count { font-size: 13px; color: var(--rs-secondary); white-space: nowrap; }

/* The speaker chip: one capsule, two controls, the roster hue as a mark. */
.rs-chip { display: inline-flex; align-items: center; border-radius: 999px; min-height: 44px; border-style: solid; }
.rs-chip .n { display: inline-flex; align-items: center; gap: 7px; padding: 0 6px 0 12px; font-size: 15px; }
.rs-chip.speaking .n { font-weight: 700; }
.rs-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hue); flex: none; }
.rs-chip .x { width: 34px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; opacity: .55; font-size: 13px; }
.rs-roster { display: flex; flex-wrap: wrap; gap: 8px; }

/* The status pill: the one element that must read from across a table. */
.rs-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--rs-ink); font-size: 13px; font-weight: 600; }
.rs-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--stage-live-dot); flex: none; animation: rs-pulse .9s ease-in-out infinite alternate; }
.rs-status .pause { display: inline-flex; gap: 3px; }
.rs-status .pause b { width: 4px; height: 11px; border-radius: 1.5px; background: currentColor; }
@keyframes rs-pulse { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rs-status i { animation: none; opacity: .6; } }

/* The control pair: TWO EQUAL HALVES of one switch. */
.rs-controls { display: flex; gap: 12px; width: 100%; }
.rs-ctl { flex: 1 1 0; min-width: 0; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: 14px; font-size: 17px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.rs-ctl.quiet { background: var(--rs-fill); border-color: var(--rs-hairline); color: var(--rs-ink); }
.rs-ctl.solid { background: var(--rs-ink); color: var(--rs-ground); }
.rs-ctl.stop { background: var(--rs-stop); color: var(--stage-on-stop); }
.rs-caveat { font-size: 13px; line-height: 1.45; text-align: center; color: var(--rs-secondary); margin: 9px 0 0; }
.rs-note { font-size: .84rem; color: var(--muted-foreground); margin: 6px 0 0; }
td small { color: var(--muted-foreground); font-size: .78em; white-space: nowrap; }

/* ---- THE CHAT SURFACE ---------------------------------------------------
 * Seven components, every state, in BOTH schemes. Each specimen carries one
 * scheme's palette on itself (the --ch-* set, mapped once from tokens.json in
 * site/chat.mjs), so a specimen renders the same whichever scheme the page
 * around it happens to be in — and both are always on screen together. */
.ch {
  --ch-ground: #F8FAFC;
  --ch-panel: #F1F5F8;
  --ch-surface: #FFFFFF;
  --ch-field: #FFFFFF;
  --ch-quiet: #EAF0F4;
  --ch-primary-fill: #18222B;
  --ch-on-primary: #FFFFFF;
  --ch-ink: #18222B;
  --ch-muted: #4E5E6B;
  --ch-coral: #FF6B5A;
  --ch-on-coral: #18222B;
  --ch-confirm: #3E5D86;
  --ch-confirm-soft: #E8EEF7;
  --ch-warning: #A9560B;
  --ch-line: rgba(24, 34, 43, 0.10);
  --ch-coral-deep: #C63A28;
  --ch-warning-soft: #FBF1DE;
  --ch-edge: #E2E9EF;
}
.ch.dk {
  --ch-ground: #171E2A;
  --ch-panel: #131926;
  --ch-surface: #1F2833;
  --ch-field: #273240;
  --ch-quiet: #2A3646;
  --ch-primary-fill: #DCE0E5;
  --ch-on-primary: #171E2A;
  --ch-ink: #DCE0E5;
  --ch-muted: #93A0AD;
  --ch-coral: #E38273;
  --ch-on-coral: #18222B;
  --ch-confirm: #8FB2DC;
  --ch-confirm-soft: #2E3E58;
  --ch-warning: #D9BC6A;
  --ch-line: rgba(220, 224, 229, 0.12);
  --ch-coral-deep: #FF9081;
  --ch-warning-soft: #3A3524;
  --ch-edge: #2A3646;
}
.ch {
  background: var(--ch-ground); color: var(--ch-ink);
  border: 1px solid var(--ch-edge); border-radius: var(--radius);
  padding: 16px; overflow: hidden;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}
.ch-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 0 0 6px; }
.ch-lbl { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ch-muted); margin: 0 0 14px; }
.ch-item + .ch-item { margin-top: 20px; }
.ch-slbl { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ch-muted); margin: 0 0 8px; }
.ch-slbl.now { color: var(--ch-coral-deep); }
.ch-ico { display: block; flex: none; }
.ch-note { font-size: .84rem; color: var(--muted-foreground); margin: 6px 0 0; }

/* The icon set, drawn once and used everywhere below. */
.ch-icons { display: flex; flex-wrap: wrap; gap: 12px; }
.ch-icons span { width: 76px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; line-height: 14px; text-align: center; color: var(--ch-muted); }
.ch-icons .ch-ico { color: var(--ch-ink); }

/* The message bar: ONE pill and three controls that are all the same disc —
 * the + is INSIDE the pill, so the bar is one object rather than a disc
 * standing next to a pill. Every number is density.composer in tokens.json,
 * once per density: the native bar is the default, .web is app.airmond.com. */
.ch-bar { --ch-bar-r: 24px; --ch-bar-inset: 6px; --ch-bar-disc: 36px; --ch-bar-text: 17px; --ch-bar-lh: 23px; }
.ch-bar.web { --ch-bar-r: 21px; --ch-bar-inset: 6px; --ch-bar-disc: 30px; --ch-bar-text: 14px; --ch-bar-lh: 20px; }
.ch-bar { display: flex; align-items: center; gap: 10px; background: var(--ch-field); box-shadow: inset 0 0 0 1px var(--ch-line); border-radius: var(--ch-bar-r); padding: var(--ch-bar-inset); }
.ch-ctl { width: var(--ch-bar-disc); height: var(--ch-bar-disc); border-radius: 999px; flex: none; display: grid; place-items: center; }
.ch-ctl.quiet { background: var(--ch-quiet); color: var(--ch-ink); }
.ch-ctl.mic { background: var(--ch-ink); color: var(--ch-ground); }
.ch-ctl.send { background: var(--ch-coral); color: var(--ch-on-coral); }
.ch-fld { flex: 1; min-width: 0; font-size: var(--ch-bar-text); line-height: var(--ch-bar-lh); color: var(--ch-muted); }
.ch-fld.typed { color: var(--ch-ink); }
.ch-fld.rec { display: flex; align-items: center; gap: 10px; color: var(--ch-ink); }
.ch-wave { display: flex; align-items: center; gap: 3px; height: var(--ch-bar-lh); flex: 1; min-width: 0; overflow: hidden; }
.ch-wave b { width: 3px; border-radius: 2px; background: var(--ch-confirm); flex: none; }
.ch-timer { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; line-height: var(--ch-bar-lh); flex: none; }

/* The cards: full width of the thread, radius 18, a 14/16 header and a body
 * that is only there when the card still wants something. */
.ch-card { background: var(--ch-surface); border: 1px solid var(--ch-line); border-radius: 18px; overflow: hidden; }
.ch-card + .ch-card, .ch-scr-wrap + .ch-scr-wrap { margin-top: 10px; }
.ch-hd { padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.ch-hd .tx { flex: 1; min-width: 0; }
.ch-t { font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 17px; line-height: 24px; letter-spacing: -0.01em; }
.ch-s { color: var(--ch-muted); font-size: 15px; line-height: 22px; margin-top: 2px; }
.ch-s.refused { color: var(--ch-warning); }
.ch-body { padding: 0 16px 14px; }
.ch-x { color: var(--ch-muted); flex: none; margin-top: 3px; }
.ch-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ch-input { flex: 1 1 150px; min-width: 0; background: var(--ch-ground); border: 1px solid var(--ch-line); border-radius: 12px; padding: 11px 13px; color: var(--ch-muted); font-size: 15px; line-height: 22px; }
.ch-dots { letter-spacing: 2px; color: var(--ch-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ch-btn { padding: 11px 15px; border-radius: 12px; background: var(--ch-quiet); color: var(--ch-ink); font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 14px; line-height: 20px; flex: none; }
/* The one filled control on a card — ink, never coral: the armed send disc is
 * this surface's single coral, and a password card is not where to spend it. */
.ch-btn.solid { background: var(--ch-primary-fill); color: var(--ch-on-primary); }
.ch-btn.plain { background: transparent; color: var(--ch-muted); padding-left: 4px; padding-right: 4px; }
.ch-btn.with-ico { display: inline-flex; align-items: center; gap: 7px; }
/* A labelled field: the label is above the input, not inside it as a
 * placeholder — a placeholder disappears exactly when it is needed. */
.ch-lab { display: flex; gap: 3px; align-items: baseline; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ch-muted); margin-bottom: 6px; }
.ch-req { color: var(--ch-coral-deep); }
.ch-labelled .ch-input { display: block; flex: none; width: 100%; }
.ch-labelled + .ch-labelled { margin-top: 10px; }
.ch-val { color: var(--ch-ink); }
.ch-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ch-actions.center { justify-content: center; }
.ch-foot { display: flex; gap: 7px; align-items: flex-start; color: var(--ch-muted); font-size: 13.5px; line-height: 19px; margin-top: 10px; }
.ch-foot .ch-ico { color: var(--ch-confirm); margin-top: 2px; }
.ch-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; background: var(--ch-confirm-soft); color: var(--ch-confirm); font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 13.5px; line-height: 18px; padding: 6px 11px; border-radius: 999px; }
.ch-pill.refused { background: var(--ch-warning-soft); color: var(--ch-warning); }
.ch-logo { width: 40px; height: 40px; border-radius: 11px; flex: none; background: var(--ch-confirm-soft); color: var(--ch-confirm); display: grid; place-items: center; }

/* The choice group: ONE hairline-separated group, never floating rows. */
.ch-grp { border: 1px solid var(--ch-line); border-radius: 12px; overflow: hidden; }
.ch-opt { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; background: var(--ch-panel); }
.ch-opt + .ch-opt { border-top: 1px solid var(--ch-line); }
.ch-opt .k { width: 22px; height: 22px; border-radius: 6px; flex: none; background: var(--ch-quiet); color: var(--ch-muted); display: grid; place-items: center; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; margin-top: 1px; }
.ch-opt.chosen .k { background: var(--ch-confirm-soft); color: var(--ch-confirm); }
.ch-opt .txt { flex: 1; min-width: 0; }
.ch-opt .ot { font-size: 15px; line-height: 22px; font-weight: 600; }
.ch-opt .od { font-size: 13.5px; line-height: 19px; color: var(--ch-muted); }
.ch-opt .tick { color: var(--ch-confirm); flex: none; margin-top: 4px; }

/* Her screen: a LIVE view, 16:10 at radius 12 — a thumbnail beside the thread
 * while she drives, expanded while you watch or while you hold it. The bar
 * across the top is the part that changes, because "who has control" is the
 * only question this component exists to answer. */
.ch-scr { width: 100%; max-width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--ch-line); background: var(--ch-panel); color: var(--ch-muted); overflow: hidden; display: flex; flex-direction: column; }
.ch-scr.thumb { max-width: 260px; }
.ch-scr .glass { flex: 1; min-height: 0; display: grid; place-items: center; }
.ch-scr .bar { display: flex; align-items: center; gap: 7px; padding: 7px 10px; font-size: 12.5px; line-height: 16px; background: var(--ch-quiet); color: var(--ch-ink); border-bottom: 1px solid var(--ch-line); }
/* Control has changed hands. The waiting amber, because a screen you are
 * holding is precisely the system's waiting-on-you state: she is blocked. */
.ch-scr.taken { border: 2px solid var(--ch-warning); }
.ch-scr.taken .bar { background: var(--ch-warning-soft); color: var(--ch-warning); border-bottom-color: var(--ch-warning); font-weight: 600; }
.ch-cap { display: flex; gap: 7px; align-items: center; justify-content: center; flex-wrap: wrap; color: var(--ch-muted); font-size: 13.5px; line-height: 19px; margin-top: 8px; text-align: center; }
.ch-live { width: 8px; height: 8px; border-radius: 999px; background: var(--ch-coral-deep); flex: none; animation: ch-breathe var(--motion-ambient-min) var(--motion-ease-ambient) infinite alternate; }
@keyframes ch-breathe { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ch-live { animation: none; opacity: .9; } }

/* The end of an OAuth round trip: a pill, a title, one line. Centred, because
 * there is nothing else on the page it lands on. */
.ch-done { background: var(--ch-surface); border: 1px solid var(--ch-line); border-radius: 18px; padding: 34px 16px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.ch-done .ch-s { margin-top: 0; }


/* ---- CHAT DENSITY -------------------------------------------------------
 * Every number is a custom property set once per density from the density
 * block in tokens.json; the rules below are written once and read them. */
.dn {
  --dn-ground: #F8FAFC;
  --dn-field: #F1F5F8;
  --dn-surface: #FFFFFF;
  --dn-sidebar: #F1F5F8;
  --dn-accent: #EAF0F4;
  --dn-ink: #18222B;
  --dn-muted: #4E5E6B;
  --dn-coral: #FF6B5A;
  --dn-on-coral: #18222B;
  --dn-confirm: #3E5D86;
  --dn-confirm-soft: #E8EEF7;
  --dn-primary-fill: #18222B;
  --dn-on-primary: #FFFFFF;
  --dn-border: rgba(24, 34, 43, 0.10);
  --dn-rule: rgba(78, 94, 107, 0.7);
  --dn-bubble-her: #F1F5F8;
  --dn-bubble-me: #E8EEF7;
  --dn-edge: #E2E9EF;
}
.dn.dk {
  --dn-ground: #171E2A;
  --dn-field: #131926;
  --dn-surface: #1F2833;
  --dn-sidebar: #131926;
  --dn-accent: #2A3646;
  --dn-ink: #DCE0E5;
  --dn-muted: #93A0AD;
  --dn-coral: #E38273;
  --dn-on-coral: #18222B;
  --dn-confirm: #8FB2DC;
  --dn-confirm-soft: #2E3E58;
  --dn-primary-fill: #DCE0E5;
  --dn-on-primary: #171E2A;
  --dn-border: rgba(220, 224, 229, 0.12);
  --dn-rule: rgba(147, 160, 173, 0.7);
  --dn-bubble-her: #1F2833;
  --dn-bubble-me: #2E3E58;
  --dn-edge: #2A3646;
}
.dn-native {
  --dn-body: 17px;
  --dn-lh: 26px;
  --dn-max: 640px;
  --dn-share: 0.78;
  --dn-col-inset: 14px;
  --dn-inx: 14px;
  --dn-iny: 9px;
  --dn-bub-r: 18px;
  --dn-card-r: 14px;
  --dn-gap-same: 12px;
  --dn-gap-new: 12px;
  --dn-hd-av: 34px;
  --dn-hd-gap: 9px;
  --dn-hd-pv: 8px;
  --dn-hd-margin: 16px;
  --dn-hd-name: 17px;
  --dn-hd-name-lh: 23px;
  --dn-hd-weight: 600;
  --dn-cp-h: 48px;
  --dn-cp-disc: 36px;
  --dn-cp-r: 24px;
  --dn-cp-text: 17px;
  --dn-cp-text-lh: 23px;
  --dn-rl-w: 300px;
  --dn-rl-pv: 20px;
  --dn-rl-ph: 12px;
  --dn-rl-rowgap: 2px;
  --dn-rl-rpv: 10px;
  --dn-rl-rph: 12px;
  --dn-rl-glyphgap: 12px;
  --dn-rl-r: 10px;
  --dn-rl-slot: 24px;
  --dn-rl-label: 15px;
  --dn-rl-label-lh: 21px;
  --dn-rl-headgap: 10px;
  --dn-rl-headtop: 6px;
  --dn-rl-headbottom: 18px;
  --dn-rl-portrait: 108px;
  --dn-rl-disc: 48px;
  --dn-rl-discgap: 12px;
  --dn-rl-discabove: 16px;
  --dn-rl-cap: 12px;
  --dn-rl-cap-lh: 15px;
  --dn-rl-name: 20px;
  --dn-rl-fpv: 10px;
  --dn-rl-fph: 12px;
}
.dn-web {
  --dn-body: 14px;
  --dn-lh: 20px;
  --dn-max: 640px;
  --dn-share: 0.78;
  --dn-col-inset: 16px;
  --dn-inx: 12px;
  --dn-iny: 8px;
  --dn-bub-r: 10px;
  --dn-card-r: 14px;
  --dn-gap-same: 5px;
  --dn-gap-new: 16px;
  --dn-hd-av: 24px;
  --dn-hd-gap: 10px;
  --dn-hd-pv: 10px;
  --dn-hd-margin: 16px;
  --dn-hd-name: 14px;
  --dn-hd-name-lh: 20px;
  --dn-hd-weight: 600;
  --dn-cp-h: 42px;
  --dn-cp-disc: 30px;
  --dn-cp-r: 21px;
  --dn-cp-text: 14px;
  --dn-cp-text-lh: 20px;
  --dn-rl-w: 300px;
  --dn-rl-pv: 20px;
  --dn-rl-ph: 12px;
  --dn-rl-rowgap: 2px;
  --dn-rl-rpv: 6px;
  --dn-rl-rph: 10px;
  --dn-rl-glyphgap: 10px;
  --dn-rl-r: 8px;
  --dn-rl-slot: 18px;
  --dn-rl-label: 14px;
  --dn-rl-label-lh: 20px;
  --dn-rl-headgap: 10px;
  --dn-rl-headtop: 6px;
  --dn-rl-headbottom: 18px;
  --dn-rl-portrait: 108px;
  --dn-rl-disc: 48px;
  --dn-rl-discgap: 12px;
  --dn-rl-discabove: 16px;
  --dn-rl-cap: 12px;
  --dn-rl-cap-lh: 15px;
  --dn-rl-name: 18px;
  --dn-rl-fpv: 8px;
  --dn-rl-fph: 10px;
}
.dn {
  background: var(--dn-ground); color: var(--dn-ink);
  border: 1px solid var(--dn-edge); border-radius: var(--radius);
  padding: 16px; overflow: hidden;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}
.dn-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 0 0 6px; }
.dn-wide { overflow-x: auto; }
.dn-wide .dn-pair { grid-template-columns: max-content; }
.dn-lbl { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dn-muted); margin: 0 0 14px; }
.dn-slbl { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dn-muted); margin: 0 0 8px; }
.dn-item + .dn-item { margin-top: 20px; }
.dn-ico { display: block; flex: none; }
.dn-note { font-size: .84rem; color: var(--muted-foreground); margin: 6px 0 0; }
.dn-tokens code { white-space: nowrap; }

/* The frame a chat is drawn in: the window at 858 with its sidebar, or a
 * phone-width column for the side-by-side. */
.dn-win { display: flex; width: 858px; height: 660px; border: 1px solid var(--dn-edge); border-radius: 12px; overflow: hidden; background: var(--dn-ground); }
/* A 393 browser has no sidebar, so its thread takes the phone's inset (the
 * native columnInset), not the stage's 16: the web half of the pair draws
 * what a phone browser actually draws. */
.dn-mini.dn-web { --dn-col-inset: 14px; }
.dn-mini { display: flex; flex-direction: column; max-width: 393px; border: 1px solid var(--dn-edge); border-radius: 12px; overflow: hidden; background: var(--dn-ground); }

/* ---- the sidebar: the hero head over compact rows */
.dn-rail { flex: none; width: var(--dn-rl-w); box-sizing: border-box; padding: var(--dn-rl-pv) var(--dn-rl-ph); background: var(--dn-sidebar); box-shadow: inset -1px 0 0 var(--dn-border); display: flex; flex-direction: column; }
.dn-head { display: flex; flex-direction: column; align-items: center; gap: var(--dn-rl-headgap); padding-top: var(--dn-rl-headtop); }
.dn-portrait { width: var(--dn-rl-portrait); height: var(--dn-rl-portrait); border-radius: 999px; object-fit: cover; display: block; }
/* The heading step: 18/24 on the wide ramp, 20/26 native; both are size + 6. */
.dn-head-name { font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: var(--dn-rl-name); line-height: calc(var(--dn-rl-name) + 6px); }
.dn-acts { display: flex; justify-content: center; gap: var(--dn-rl-discgap); margin-top: var(--dn-rl-discabove); margin-bottom: var(--dn-rl-headbottom); }
/* 4 and 64 are the app's own RailAction (spacing.xs, and a minWidth so the
 * three captions share one pitch). */
.dn-act { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; }
.dn-disc { width: var(--dn-rl-disc); height: var(--dn-rl-disc); border-radius: 999px; display: grid; place-items: center; background: var(--dn-surface); color: var(--dn-ink); }
.dn-disc.call { background: var(--dn-coral); color: var(--dn-on-coral); }
.dn-act span { font-size: var(--dn-rl-cap); line-height: var(--dn-rl-cap-lh); color: var(--dn-ink); }
.dn-rows { display: flex; flex-direction: column; gap: var(--dn-rl-rowgap); }
.dn-row { display: flex; align-items: center; gap: var(--dn-rl-glyphgap); padding: var(--dn-rl-rpv) var(--dn-rl-rph); border-radius: var(--dn-rl-r); font-size: var(--dn-rl-label); line-height: var(--dn-rl-label-lh); font-weight: 600; color: var(--dn-muted); }
.dn-row.on { background: var(--dn-accent); color: var(--dn-ink); }
.dn-row i { width: var(--dn-rl-slot); display: grid; place-items: center; flex: none; }
.dn-foot { margin-top: auto; }
.dn-foot .dn-row { padding: var(--dn-rl-fpv) var(--dn-rl-fph); }

/* ---- the pane: header, thread, composer */
.dn-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dn-hd { flex: none; display: flex; align-items: center; gap: var(--dn-hd-gap); padding: var(--dn-hd-pv) var(--dn-hd-margin); background: var(--dn-surface); box-shadow: inset 0 -1px 0 var(--dn-border); }
.dn-hd img { width: var(--dn-hd-av); height: var(--dn-hd-av); border-radius: 999px; object-fit: cover; display: block; flex: none; }
.dn-hd b { font-size: var(--dn-hd-name); line-height: var(--dn-hd-name-lh); font-weight: var(--dn-hd-weight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-thread { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--dn-col-inset) var(--dn-col-inset) 0; }
.dn-msg { display: flex; }
.dn-msg.me { justify-content: flex-end; }
.dn-msg + .dn-msg { margin-top: var(--dn-gap-same); }
.dn-msg + .dn-msg.turn { margin-top: var(--dn-gap-new); }
/* The bubble's hairline (thread.bubble.borderWidth) is drawn INSIDE the box,
 * so a one-line bubble is insets + line exactly: 8 + 20 + 8 = 36 on the web,
 * which lands within two of Grok's measured 34. The header's bottom edge is
 * drawn inside the same way, so the band is exactly its 44. */
.dn-bub {
  width: fit-content; max-width: min(var(--dn-max), calc(var(--dn-share) * 100%));
  box-sizing: border-box;
  background: var(--dn-bubble-her); box-shadow: inset 0 0 0 1px var(--dn-border);
  border-radius: var(--dn-bub-r); padding: var(--dn-iny) var(--dn-inx);
  font-size: var(--dn-body); line-height: var(--dn-lh);
}
.dn-msg.me .dn-bub { background: var(--dn-bubble-me); }
.dn-bub p { margin: 0; }
/* A card in the thread keeps its own corner and never reads the bubble's. */
.dn-card { width: 100%; max-width: min(var(--dn-max), 100%); box-sizing: border-box; background: var(--dn-surface); border: 1px solid var(--dn-rule); border-radius: var(--dn-card-r); overflow: hidden; font-size: var(--dn-body); line-height: var(--dn-lh); }
/* The app's DraftCard (thread.draft; drawn state by state in the thread
 * section): the head, her text in a band, and the foot, a quiet "Change it"
 * and the ink "Open in Gmail". There is no Send: Airmond never sends from a
 * member's mailbox, so the library never draws one. On the web her text takes
 * the web thread's size, like every word in this window. */
.dn-card-hd { display: flex; align-items: center; gap: 12px; padding: 16px; }
.dn-card-mark { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--dn-field); color: var(--dn-muted); display: grid; place-items: center; }
.dn-card-hd div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dn-card-hd b { font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; font-weight: 600; }
.dn-card-hd small { font-size: 13px; line-height: 18px; color: var(--dn-muted); }
.dn-card-body { border-top: 1px solid var(--dn-rule); padding: 12px 16px; }
.dn-card-act { border-top: 1px solid var(--dn-rule); padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dn-card-act span { padding: 8px; color: var(--dn-muted); }
.dn-card-act span.solid { display: inline-flex; align-items: center; height: 38px; box-sizing: border-box; padding: 0 16px; border-radius: 14px; font-weight: 600; background: var(--dn-primary-fill); color: var(--dn-on-primary); }
.dn-cp { flex: none; padding: var(--dn-col-inset); }
/* The edge is drawn inside, so the bar is exactly its height and every disc
 * sits exactly (height - disc) / 2 in. The 10 between controls is page
 * spacing, the same as the MessageBar's. */
.dn-bar { display: flex; align-items: center; gap: 10px; height: var(--dn-cp-h); box-sizing: border-box; padding: calc((var(--dn-cp-h) - var(--dn-cp-disc)) / 2); border-radius: var(--dn-cp-r); background: var(--dn-field); box-shadow: inset 0 0 0 1px var(--dn-border); }
.dn-bar i { width: var(--dn-cp-disc); height: var(--dn-cp-disc); border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--dn-accent); color: var(--dn-ink); }
.dn-bar i.mic { background: var(--dn-ink); color: var(--dn-ground); }
.dn-bar span { flex: 1; min-width: 0; font-size: var(--dn-cp-text); line-height: var(--dn-cp-text-lh); color: var(--dn-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ---- THE THREAD --------------------------------------------------------
 * Nine components, every state, in BOTH schemes. Each specimen carries one
 * scheme's palette on itself (the --th-* set, mapped once from tokens.json in
 * site/thread.mjs), so a specimen renders the same whichever scheme the page
 * around it is in, and both are always on screen together.
 *
 * Every distance below is interpolated from the thread block in tokens.json. The
 * only literal numbers are in the specimen frame, which mirrors the chat
 * surface's furniture on purpose. */
.th {
  --th-ground: #F8FAFC;
  --th-surface: #FFFFFF;
  --th-ink: #18222B;
  --th-muted: #4E5E6B;
  --th-confirm: #3E5D86;
  --th-coral: #FF6B5A;
  --th-border: rgba(24, 34, 43, 0.10);
  --th-alt: #F1F5F8;
  --th-primary-fill: #18222B;
  --th-on-primary: #FFFFFF;
  --th-confirm-soft: #E8EEF7;
  --th-coral-deep: #C63A28;
  --th-bubble-her: #F1F5F8;
  --th-bubble-me: #E8EEF7;
  --th-edge: #E2E9EF;
  --th-rule: rgba(78, 94, 107, 0.7);
  --th-plate: rgba(78, 94, 107, 0.14);
  --th-card-inset: #F1F5F8;
}
.th.dk {
  --th-ground: #171E2A;
  --th-surface: #1F2833;
  --th-ink: #DCE0E5;
  --th-muted: #93A0AD;
  --th-confirm: #8FB2DC;
  --th-coral: #E38273;
  --th-border: rgba(220, 224, 229, 0.12);
  --th-alt: #131926;
  --th-primary-fill: #DCE0E5;
  --th-on-primary: #171E2A;
  --th-confirm-soft: #2E3E58;
  --th-coral-deep: #FF9081;
  --th-bubble-her: #1F2833;
  --th-bubble-me: #2E3E58;
  --th-edge: #2A3646;
  --th-rule: rgba(147, 160, 173, 0.7);
  --th-plate: rgba(147, 160, 173, 0.14);
  --th-card-inset: #273240;
}
.th {
  background: var(--th-ground); color: var(--th-ink);
  border: 1px solid var(--th-edge); border-radius: var(--radius);
  padding: 16px; overflow: hidden;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}
.th-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 0 0 6px; }
.th-lbl { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--th-muted); margin: 0 0 14px; }
.th-item + .th-item { margin-top: 20px; }
.th-slbl { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--th-muted); margin: 0 0 8px; }
.th-slbl.now { color: var(--th-coral-deep); }
.th-note { font-size: .84rem; color: var(--muted-foreground); margin: 6px 0 0; }
.th-ico { display: block; flex: none; }
/* The contract tables (the geometry and the palette): a token name is one
 * word, and breaking it across two lines makes the contract look like a typo.
 * The table scrolls instead. */
.th-tokens code { white-space: nowrap; }

/* The thread's own column. maxColumn caps it. The one pair drawn at TRUE
 * bubble width sets the column to maxBubble, and that pair stacks its two
 * schemes instead of setting them beside each other: two 640px
 * threads do not fit across this page, and a specimen clipped at the edge of a
 * scroller is a specimen half-seen, which is the thing the both-schemes rule
 * exists to prevent. Stacked, both are still on screen together. */
.th-thread { max-width: 900px; }
.th-wide { overflow-x: auto; }
.th-wide .th-pair { grid-template-columns: max-content; }
.th-wide .th-thread { width: 640px; max-width: none; }
/* The draft card is drawn at true width for the same reason the bubble at the
 * cap is: a card that takes the full measure has to be seen taking it. */
.th-wide .th-dc { width: 640px; max-width: none; }

/* A row: the bubble, then the rail, then the timestamp, all one gap apart.
 * The member's row is the same row reversed, which is the whole of how a
 * speaker is identified here besides the fill. */
.th-row { display: flex; align-items: flex-end; gap: 12px; }
.th-row.me { flex-direction: row-reverse; }
.th-row + .th-row { margin-top: 12px; }
.th-row + .th-row.turn { margin-top: 12px; }
/* Both sit off the bottom by the bubble's own inset, so they line up with the
 * last line of text rather than with the bubble's edge. */
.th-row > .th-rail, .th-row > .th-stamp { margin-bottom: 9px; }

/* The bubble. It hugs its text and stops at maxBubble. */
.th-bub {
  width: fit-content; max-width: min(100%, 640px);
  background: var(--th-bubble-her);
  border: 1px solid var(--th-border);
  border-radius: 18px;
  padding: 9px 14px;
  font-size: 17px; line-height: 26px;
}
.th-row.me .th-bub { background: var(--th-bubble-me); }
/* Zero every block child first, then give the gaps back below. A type
 * selector here (.th-bub p) would outrank the sibling rule that follows and
 * silently eat the paragraph gap, which is exactly what it did once. */
.th-bub > * { margin: 0; }
.th-bub ul, .th-bub ol { padding: 0; list-style: none; }
/* Every block value is the EXTRA space on top of the line, so a change to
 * lineHeight carries through instead of being silently overridden. */
.th-bub > * + * { margin-top: 8px; }
.th-bub > .th-h { margin-top: 24px; margin-bottom: 12px; }
.th-bub > :first-child { margin-top: 0; }
.th-t { font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; font-weight: 700; }
.th-h { font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; font-weight: 600; }
.th-li { position: relative; padding-left: 22px; }
.th-li + .th-li { margin-top: 6px; }
.th-bub ul .th-li::before {
  content: ''; position: absolute; left: 0;
  top: 10.5px;
  width: 5px; height: 5px;
  border-radius: 50%; background: var(--th-muted);
}
/* A number is wider than a dot, so the numbered list gets the wider indent and
 * a wrapped line still returns to the text edge. */
.th-bub ol { counter-reset: th-n; }
.th-bub ol .th-li { padding-left: 28px; counter-increment: th-n; }
.th-bub ol .th-li::before { content: counter(th-n) '.'; position: absolute; left: 0; color: var(--th-muted); }
.th-a { color: var(--th-confirm); text-decoration: underline; }
/* THE THREE MARKS THAT SEPARATE OR ENCLOSE, and the correction they carry.
 * The section rule and the code plate's edge used to be --th-border, which is
 * the hairline token for the PAGE ground and measures 1.21:1 on a bubble; the
 * quote's rule used to be full --th-muted at 6.11:1. Three marks doing one
 * job, two of them invisible and the third six times louder. All three are
 * --th-rule now: one ink, one strength, and it clears 3.0 on the BUBBLE
 * rather than on the page the specimen was measured against. */
.th-q { border-left: 1px solid var(--th-rule); padding-left: 22px; color: var(--th-muted); }
.th-hr { border: 0; border-top: 1px solid var(--th-rule); margin-top: 12px; margin-bottom: 12px; }
/* Code: a tinted plate and its edge. The FILL is a tint (1.22:1 against the
 * bubble) and is not asked to be anything else, which is exactly why the edge
 * takes the full rule strength: with a fill this quiet, an edge under 3.0
 * would leave the plate drawn by nothing measurable at all. */
.th-ic { background: var(--th-plate); border: 1px solid var(--th-rule); border-radius: var(--radius-sm); padding: 0 7px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.th-pre { background: var(--th-plate); border: 1px solid var(--th-rule); border-radius: var(--radius); padding: 9px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow-x: auto; }

/* The rail: reply and a three-dot menu, and no reaction button. At rest it is
 * invisible and its space is still reserved, so the bubble does not move when
 * it appears. */
.th-rail { display: flex; align-items: center; gap: 4px; flex: none; opacity: 0; transition: opacity 120ms var(--motion-ease-micro); }
.th-rail.on { opacity: 1; }
.th-rail b { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; color: var(--th-muted); }
@media (prefers-reduced-motion: reduce) { .th-rail { transition: none; } }

/* The timestamp: revealed beside the rail on a pointer device, shown at rest
 * on the last message of a run on touch. One home, two ways of reaching it. */
.th-stamp { flex: none; font-size: 12px; line-height: 26px; color: var(--th-muted); }

/* A centred line: the day break, and the activity line that copies it. No
 * pill, no rule, no plate. */
.th-meta { text-align: center; font-size: 12.5px; line-height: 26px; color: var(--th-muted); margin: 22px 0 16px; }

/* The unread divider: the same vertical furniture as a day break, a hairline
 * across the measure, broken for the label. */
.th-unread { display: flex; align-items: center; gap: 14px; margin: 22px 0 16px; }
.th-unread i { flex: 1; height: 1px; background: var(--th-border); }
.th-unread span { flex: none; font-size: 12px; line-height: 26px; font-weight: 600; color: var(--th-coral-deep); }

/* ---- DraftCard ---------------------------------------------------------
 * The app's DraftCard (mb-airmond-app src/features/drafts/draft-card.tsx,
 * MAR-173/174), and every number from thread.draft. ⛔ THERE IS NO SEND:
 * Airmond never sends from a member's mailbox, so this card has no Send
 * button and no Sent, Sending or failed state. It takes the FULL measure
 * where a bubble hugs its text, because a card is a document. Its edge and
 * its band hairlines are --th-rule, the mark tone. */
.th-dc { width: 100%; max-width: 640px; box-sizing: border-box; background: var(--th-surface); border: 1px solid var(--th-rule); border-radius: 14px; overflow: hidden; }
.th-dc + .th-dc, .th-row + .th-dc, .th-dc + .th-row { margin-top: 12px; }
.th-dc-hd { display: flex; align-items: center; gap: 12px; padding: 16px; }
.th-dc-mark { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--th-alt); color: var(--th-muted); display: grid; place-items: center; }
.th-dc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.th-dc-t { font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 17px; line-height: 23px; }
/* Who and what. It wraps rather than cuts: the address is the fact a member
 * checks before opening. */
.th-dc-cap { font-size: 13px; line-height: 18px; color: var(--th-muted); overflow-wrap: anywhere; }
/* Her text, in a band under a hairline. The cut is made IN THE TEXT by
 * previewOf below, never by the renderer. */
.th-dc-band { border-top: 1px solid var(--th-rule); padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 22px; }
.th-dc-band p { margin: 0; white-space: pre-line; }
.th-dc-band.was p { color: var(--th-muted); }
.th-dc-more { align-self: flex-start; color: var(--th-confirm); }
/* The foot: a quiet word and the ONE ink primary, never coral. */
.th-dc-foot { border-top: 1px solid var(--th-rule); padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 22px; }
.th-dc-quiet { padding: 8px; color: var(--th-muted); }
.th-dc-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 14px; font-weight: 600; background: var(--th-primary-fill); color: var(--th-on-primary); white-space: nowrap; }
/* The replaced record (MAR-174): an inert strip in place of the foot, lighter
 * than the live card below it, never the quiet button's face. */
.th-dc-was { border-top: 1px solid var(--th-rule); background: var(--th-alt); padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 18px; color: var(--th-muted); }

/* ---- NewMessagesPill ---------------------------------------------------
 * ONE component, TWO anchors: unread BEHIND you gives a pill at the top with
 * an up arrow, new messages arriving BELOW while you read history give one at
 * the bottom with a down arrow. Same count either way. Ink filled with ground
 * text: not confirm, which means confirmed and succeeded and live; not coral,
 * already spent. */
.th-nm { display: inline-flex; align-items: center; height: 28px; border-radius: 14px; padding: 0 10px 0 9px; background: var(--th-ink); color: var(--th-ground); }
.th-nm .lbl { font-size: 13px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 0 9px; white-space: nowrap; }
/* The ✕ dismisses the pill WITHOUT marking anything read. A drawn glyph, not
 * the letter: at 10px a text ✕ is the single most missable empty box in the
 * product. */
.th-nm .dis { flex: none; width: 16px; height: 16px; display: grid; place-items: center; }
/* The specimen frame: a fixed-height slice of thread with the pill floating
 * 12px in from the edge it anchors to, centred in the column. The height and the
 * clipping are page furniture. */
.th-nm-stage { position: relative; overflow: hidden; height: 190px; }
.th-nm-stage > .th-nm { position: absolute; left: 50%; transform: translateX(-50%); }
.th-nm-stage.top > .th-nm { top: 12px; }
.th-nm-stage.bot > .th-nm { bottom: 12px; }

/* ---- LongMessage -------------------------------------------------------
 * HIS long message folds; hers never does. Whether it folds is decided by the
 * script at the foot of the section from the body's RENDERED height (the
 * `tall` class), never from a character count, so without script a message
 * is simply drawn whole. Folded: clipped at 14 lines of the body's own
 * 26px line (364px), the last 2.5 of them (65px) under a fade into
 * the bubble's OWN fill. `clip`, not `hidden`: a hidden box is still a
 * scroll container, so find-in-page or a focused link inside the clipped lines
 * would scroll the top of the message away under a fade that no longer lines
 * up. The clipped text stays in the tree. */
.th-lm-clip { position: relative; }
.th-lm.tall:not(.open) .th-lm-clip { max-height: 364px; overflow: clip; }
.th-lm-fade { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 65px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--th-bubble-me) 0%, transparent), var(--th-bubble-me)); }
.th-lm.tall:not(.open) .th-lm-fade { display: block; }
.th-lm-body > * { margin: 0; }
/* The control: the body's size and ink at 600, on the text's own left edge,
 * a real button. Never muted, never onCoral. */
.th-lm-ctl { display: none; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  align-items: center; gap: 4px; font: inherit; font-size: 17px; line-height: 26px; font-weight: 600; color: var(--th-ink); border-radius: 4px; }
.th-lm.tall .th-lm-ctl { display: inline-flex; }
.th-lm-ctl:focus-visible { outline: 3px solid var(--th-confirm); outline-offset: 2px; }
.th-lm-ctl .th-ico { transition: transform 120ms var(--motion-ease-micro); }
.th-lm.open .th-lm-ctl .th-ico { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .th-lm-ctl .th-ico { transition: none; } }

/* ---- ActionCard (CallCard) ---------------------------------------------
 * A neutral card inside the call's own bubble. While live nothing is quiet but
 * the brief; once finished the title stays ink and every explanatory line
 * takes muted. The edge, the brief's rule and the foot's hairline are the
 * mark tone, --th-rule. */
.th-stack { grid-template-columns: 1fr; }
.th-ac-row > .th-item { margin-top: 0; }
.th-ac-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.th-row .th-bub.call { background: var(--th-confirm-soft); width: auto; max-width: min(100%, 640px); }
.th-bub.call > .th-ac { margin-top: 9px; }
.th-ac { background: var(--th-surface); border: 1px solid var(--th-rule); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.th-ac-hd { display: flex; align-items: flex-start; gap: 12px; }
.th-ac-mark { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--th-confirm-soft); color: var(--th-confirm); display: grid; place-items: center; }
.th-ac-tx { flex: 1; min-width: 0; }
.th-ac-t { font-weight: 600; font-size: 17px; line-height: 23px; color: var(--th-ink); }
.th-ac-cap { font-size: 13px; line-height: 18px; color: var(--th-muted); font-variant-numeric: tabular-nums; }
.th-ac-pill { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 13px; line-height: 18px; font-weight: 600; }
.th-ac-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.th-ac-pill.live { background: var(--th-confirm-soft); color: var(--th-confirm); }
.th-ac-pill.done { background: var(--th-alt); color: var(--th-muted); }
.th-ac-brief { border-left: 2px solid var(--th-rule); padding-left: 12px; }
.th-ac-d { font-size: 15px; line-height: 22px; margin: 0; }
.th-ac-in { background: var(--th-card-inset); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.th-ac-who { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--th-confirm); }
.th-ac-foot { border-top: 1px solid var(--th-rule); padding-top: 12px; }
.th-ac-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--th-rule); color: var(--th-ink); font-weight: 600; font-size: 15px; }
/* The tones the rule is about, resolved from the token block. */
.th-ac .quiet { color: var(--th-muted); }
.th-ac .news { color: var(--th-ink); }


/* ---- FOUR CONTROL FIXES -------------------------------------------------
 * Every specimen carries one scheme's palette on itself (the --co-* set,
 * mapped once from tokens.json in site/controls.mjs), so a specimen renders
 * the same whichever scheme the page around it is in, and both schemes are
 * always on screen together. The only literal numbers below are in the
 * specimen frame, which mirrors the chat surface's furniture on purpose. */
.co {
  --co-ground: #F8FAFC;
  --co-panel: #F1F5F8;
  --co-surface: #FFFFFF;
  --co-raised: #FFFFFF;
  --co-quiet: #EAF0F4;
  --co-member-bubble: #E8EEF7;
  --co-ink: #18222B;
  --co-muted: #4E5E6B;
  --co-faint: #8595A2;
  --co-coral: #FF6B5A;
  --co-on-coral: #18222B;
  --co-primary-fill: #18222B;
  --co-on-primary: #FFFFFF;
  --co-disabled-fill: #EAF0F4;
  --co-on-disabled: #4E5E6B;
  --co-line: rgba(24, 34, 43, 0.10);
  --co-rule: rgba(78, 94, 107, 0.7);
  --co-coral-deep: #C63A28;
  --co-edge: #E2E9EF;
}
.co.dk {
  --co-ground: #171E2A;
  --co-panel: #131926;
  --co-surface: #1F2833;
  --co-raised: #273240;
  --co-quiet: #2A3646;
  --co-member-bubble: #2E3E58;
  --co-ink: #DCE0E5;
  --co-muted: #93A0AD;
  --co-faint: #6C7987;
  --co-coral: #E38273;
  --co-on-coral: #18222B;
  --co-primary-fill: #DCE0E5;
  --co-on-primary: #171E2A;
  --co-disabled-fill: #2A3646;
  --co-on-disabled: #93A0AD;
  --co-line: rgba(220, 224, 229, 0.12);
  --co-rule: rgba(147, 160, 173, 0.7);
  --co-coral-deep: #FF9081;
  --co-edge: #2A3646;
}
.co {
  background: var(--co-ground); color: var(--co-ink);
  border: 1px solid var(--co-edge); border-radius: var(--radius);
  padding: 16px; overflow: hidden;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}
.co-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 0 0 6px; }
.co-lbl { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--co-muted); margin: 0 0 14px; }
.co-item + .co-item { margin-top: 20px; }
.co-slbl { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--co-muted); margin: 0 0 8px; }
.co-slbl.now { color: var(--co-coral-deep); }
.co-ico { display: block; flex: none; }
.co-note { font-size: .84rem; color: var(--muted-foreground); margin: 6px 0 0; }
/* A token name is one word, and breaking it across two lines makes the
 * contract look like a typo. The table scrolls instead. */
.co-tokens code { white-space: nowrap; }

/* The icon set, drawn once and used by every specimen below. */
.co-icons { display: flex; flex-wrap: wrap; gap: 12px; }
.co-icons span { width: 92px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; line-height: 14px; text-align: center; color: var(--co-muted); }
.co-icons .co-ico { color: var(--co-ink); }

/* ---- 1 · THE CARD -------------------------------------------------------
 * The unruled card keeps a transparent border of the same width, so the two
 * specimens are the same size and the comparison is about the LINE rather than
 * about two boxes an odd 2px apart.
 *
 * ⚠️ THAT WIDTH IS THE TOKEN, not a literal, and that is the whole point of
 * this section. The page says the hairline is reversible in one value; drawing
 * it at a hard-coded 1px would have meant the page could not lose the line the
 * way it tells you to. Set control.card.borderWidth to 0 and this specimen
 * becomes the one above it, which is the honest thing for it to become. */
.co-card {
  background: var(--co-surface); border-radius: var(--radius-card);
  border: 1px solid transparent; padding: 14px 16px;
  box-shadow: 0 4px 10px rgba(24, 34, 43, 0.06);
}
.co.dk .co-card { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); }
.co-card.ruled { border-color: var(--co-rule); }
.co-card + .co-card { margin-top: 12px; }
.co-t { font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 17px; line-height: 24px; letter-spacing: -0.01em; }
.co-c { color: var(--co-muted); font-size: 14.5px; line-height: 20px; margin-top: 2px; }
.co-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.co-row .lbl { flex: 1; min-width: 0; font-size: 15px; line-height: 22px; }
.co-row .co-ico { color: var(--co-muted); }
.co-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ---- 2 · THE CONTROLS ---------------------------------------------------
 * One anatomy, four fills. The outline width is the same 1px the card's
 * hairline takes, in the same tone: one mark, one strength, every surface. */
.co-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 38px; padding: 0 16px; border-radius: 14px;
  border: 1px solid transparent;
  font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-size: 14px; line-height: 20px;
}
/* The one FILLED control a surface is allowed. Ink, never coral, except where
 * the specimen is deliberately showing a coral primary. */
.co-btn.solid { background: var(--co-primary-fill); color: var(--co-on-primary); }
.co-btn.coral { background: var(--co-coral); color: var(--co-on-coral); }
/* ⛔ THE RETIRED SECONDARY. A fill that measures nothing against either the
 * ground or a card, at 24 call sites. Drawn here and nowhere else. */
.co-btn.fill { background: var(--co-panel); color: var(--co-ink); }
/* The secondary now: no fill at all, the rule outline, an ink label. */
.co-btn.out { background: transparent; border-color: var(--co-rule); color: var(--co-ink); }
/* Disabled: the pair at full strength, keeping the outline an enabled
 * secondary has, because the PLATE cannot be what says this is still a
 * control. */
.co-btn.off { background: var(--co-disabled-fill); border-color: var(--co-rule); color: var(--co-on-disabled); }
.co-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- 3 · THE DISABLED GROUP --------------------------------------------- */
.co-grp { display: flex; flex-direction: column; gap: 9px; }
.co-grp .cap { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; line-height: 20px; color: var(--co-muted); max-width: 42ch; }
.co-grp .cap .co-ico { margin-top: 3px; }
/* ⛔ THE RETIRED RECIPE, drawn so it can be measured rather than described: one
 * opacity over the whole group, which halves the label and the plate together
 * and takes the caption explaining the state down with them. */
.co-grp.dim { opacity: 0.5; }

/* ---- 4 · PROVENANCE ----------------------------------------------------- */
.co-body { font-size: 15px; line-height: 22px; margin-top: 2px; }
.co-prov { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.co-prov > div { display: flex; align-items: center; gap: 7px; font-size: 13.5px; line-height: 19px; color: var(--co-muted); }
/* The tone this section exists to retire. It is drawn only inside a specimen
 * labelled "before". */
.co-prov.was > div { color: var(--co-faint); }
/* The member's own bubble, where faint got its worst reading in the product. */
.co-bub { width: fit-content; max-width: 100%; margin-left: auto; background: var(--co-member-bubble); border-radius: 18px; padding: 9px 14px; font-size: 17px; line-height: 26px; }
.co-bub .co-prov { margin-top: 6px; }
.co-under { display: flex; justify-content: flex-end; margin-top: 4px; }
.co-under .co-prov { margin-top: 0; }


/* ---- THE CALL -----------------------------------------------------------
 * One ground, pinned. Each specimen carries the call palette on itself (the
 * --ca-* set, mapped once from tokens.json in site/call.mjs), so a specimen
 * renders the same whichever scheme the page around it happens to be in. */
/* The palette is declared on the specimen AND on the bare ground swatch,
 * because that swatch is deliberately not a specimen: it is the ground with
 * nothing on it, so it cannot sit inside a .ca that would paint one for it.
 * Declaring the set in one place and painting in another is how the swatch
 * first rendered as nothing at all — a var that is not in scope resolves to
 * an invalid value and the browser drops the declaration in silence. */
.ca, .ca-ground {
  --ca-ground: #171E2A;
  --ca-ink: #DCE0E5;
  --ca-secondary: #9DA2A9;
  --ca-fill: #2B313D;
  --ca-hairline: #424953;
  --ca-rule: #6E7986;
  --ca-end-fill: #FF453A;
  --ca-on-end-glyph: #FFFFFF;
  --ca-live-dot: #E8574A;
  --ca-coral: #E38273;
  --ca-confirm: #8FB2DC;
  --ca-control-wash: #3A414C;
}
.ca {
  background: var(--ca-ground); color: var(--ca-ink);
  border: 1px solid var(--ca-hairline); border-radius: var(--radius);
  padding: 18px; overflow: hidden;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}
.ca-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 0 0 6px; }
.ca-lbl { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ca-secondary); margin: 0 0 14px; }
.ca-lbl.gone { color: var(--coral-deep); }
.ca-note { font-size: .84rem; color: var(--muted-foreground); margin: 6px 0 0; }
.ca-ico { display: block; flex: none; }
.ca-icons { display: flex; flex-wrap: wrap; gap: 14px; }
.ca-icons span { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ca-secondary); }

/* The two grounds, for the before/after. The retired one is drawn with the
 * literal it used to hold, which is the ONLY place in this file a hex appears
 * — a retired value has no token to read, and showing it is the point. */
.ca-ground { height: 132px; border-radius: 12px; position: relative; overflow: hidden; }
.ca-ground.was { background: #000000; }
.ca-ground.was::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(227,130,115,.34) 0%, rgba(227,130,115,.09) 25%, rgba(227,130,115,0) 50%);
}
.ca-ground.is { background: var(--ca-ground); }

/* The header row: her chip, her name, the clock, the pill under it. */
.ca-head { display: flex; align-items: center; gap: 14px; }
.ca-portrait { width: 58px; height: 58px; border-radius: 50%; flex: none; background: var(--ca-fill); border: 2px solid var(--ca-coral); }
.ca-portrait.hero { width: 132px; height: 132px; border-width: 3px; }
.ca-name { font-size: 1.05rem; font-weight: 600; margin: 0; }
.ca-clock { font-size: 2.6rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 2px 0 0; line-height: 1.05; }
.ca-clock.hero { font-size: 3.4rem; }

/* The status pill: the stage's chrome exactly — same radius, the same 1.5px
 * outline at 0.9 of the foreground, the same paddings. */
.ca-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--ca-ink) 90%, transparent); font-size: .82rem; font-weight: 600; }
.ca-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ca-live-dot); flex: none; }
.ca-cap { font-size: .8rem; color: var(--ca-secondary); margin: 8px 0 0; }

/* The control row. */
.ca-controls { display: flex; gap: 18px; align-items: center; justify-content: center; }
.ca-ctl { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ca-control-wash); color: var(--ca-ink); flex: none; }
.ca-ctl.outlined { border: 1px solid var(--ca-rule); }
.ca-ctl.end { background: var(--ca-end-fill); color: var(--ca-on-end-glyph); border: 0; }
/* Muted: the loud state. A FILLED disc separates on its own and takes no
 * outline -- an edge on top of a fill reads as a second state. */
.ca-ctl.loud { background: #DCE0E5; color: #171E2A; border: 0; }
.ca-ctl-lbl { font-size: .7rem; color: var(--ca-secondary); text-align: center; margin: 6px 0 0; }
.ca-ctl-wrap { display: flex; flex-direction: column; align-items: center; }

/* The capture feed: the stage's own two headings, plus the one it has no use for. */
.ca-feedhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 8px; }
.ca-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ca-secondary); }
.ca-tally { font-size: .8rem; color: var(--ca-secondary); }
.ca-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ca-hairline); }
.ca-row + .ca-row { margin-top: 8px; }
.ca-row h5 { margin: 0; font-size: .9rem; font-weight: 600; }
.ca-row p { margin: 2px 0 0; font-size: .82rem; color: var(--ca-secondary); }

/* The minimised banner is NOT on the call ground: it is a strip across the
 * member's own page, so it is the one thing here drawn in both schemes. */
.ca-banner { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font-size: .88rem; font-weight: 600; }
.ca-banner.lt { background: #34517A; color: #FFFFFF; }
.ca-banner.dk { background: #3E5D86; color: #FFFFFF; }
.ca-banner .sp { margin-left: auto; font-variant-numeric: tabular-nums; }


/* ---- ADA'S MEETING TILE -------------------------------------------------
 * Always the dusk. Each specimen carries the tile's palette on itself (the
 * --mt-* set, resolved by build/meeting-tile.mjs from tokens.json), so a
 * specimen renders the same whichever scheme the page around it is in. */
.mt, .mt-frame {
  --mt-ground: #171E2A;
  --mt-ground-centre: #1F2833;
  --mt-ground-edge: #131926;
  --mt-card: #1F2833;
  --mt-ink: #DCE0E5;
  --mt-muted: #93A0AD;
  --mt-hairline: rgba(220, 224, 229, 0.12);
  --mt-raised: #2A3646;
  --mt-portrait-ring: rgba(220, 224, 229, 0.3);
  --mt-portrait-ring-speaking: #171E2A;
  --mt-kind-action: #FF9081;
  --mt-kind-note: #93A0AD;
  --mt-kind-memory: #D9BC6A;
  --mt-kind-answer: #8FB2DC;
  --mt-kind-summary: #8FB2DC;
  --mt-pin-icon: #D9BC6A;
  --mt-pin-hairline: rgba(217, 188, 106, 0.28);
  --mt-edited-fill: #3A3524;
  --mt-edited-ink: #D9BC6A;
  --mt-removed-fill: rgba(242, 133, 124, 0.16);
  --mt-removed-ink: #F2857C;
  --mt-reading-fill: rgba(227, 130, 115, 0.20);
  --mt-reading-ink: #FF9081;
  --mt-owner-fill: #2A3646;
  --mt-due: #D9BC6A;
  --mt-confirmed: #8FB2DC;
  --mt-on-confirmed: #171E2A;
  --mt-live-dot: #FF9081;
  --mt-initials: #18222B;
  --mt-avatar-ring: #171E2A;
  --mt-shadow: #000000;
  --mt-speaker-1: #5CB8F0;
  --mt-speaker-2: #FAB55C;
  --mt-speaker-3: #B899F5;
  --mt-speaker-4: #EC8DEC;
  --mt-speaker-5: #F58FAD;
  --mt-ground-image: radial-gradient(ellipse 70% 80% at 50% 40%, #1F2833 0%, #171E2A 58%, #131926 100%);
  --mt-shadow-portrait: 0 8px 22px rgba(0, 0, 0, 0.4);
  --mt-shadow-idle: 0 24px 60px rgba(0, 0, 0, 0.45);
  --mt-orb-hue-1: #E38273;
  --mt-orb-hue-2: #F58FAD;
  --mt-orb-hue-3: #FAB55C;
  --mt-orb-hue-4: #8FB2DC;
  --mt-orb-glow: 0 0 56px 14px rgba(227, 130, 115, 0.5), 0 0 120px 30px rgba(245, 143, 173, 0.22);
}
/* The outer edge is the PAGE's border, so a dusk specimen still reads as a
 * card on a Low flame page. */
.mt { background: var(--mt-ground-image); color: var(--mt-ink); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; overflow: hidden;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; }
.mt-col-w { width: calc(1280px * 0.3333 - 2 * 12px); max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.mt-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 0 0 6px; align-items: start; }
.mt-lbl { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mt-muted); margin: 0 0 14px; }
.mt-note { font-size: .84rem; color: var(--muted-foreground); margin: 6px 0 0; }
.mt-cap { font-size: .84rem; color: var(--muted-foreground); margin: 8px 0 0; }
.mt-cap b { color: var(--foreground); }
.mt-gl { display: block; flex: none; fill: currentColor; }

/* THE FRAME: the real 1280x720 page, drawn at 1:1 and scaled to fit by the
 * script at the foot of the section (--mt-s). */
.mt-frame { position: relative; width: 100%; aspect-ratio: 1280 / 720; overflow: hidden; border-radius: 12px; background: var(--mt-ground);
  box-shadow: 0 0 0 1px var(--border); }
.mt-stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; transform: scale(var(--mt-s, .3));
  overflow: hidden; background: var(--mt-ground-image); color: var(--mt-ink); font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; --lv: 0; }
.mt-col { position: absolute; top: 0; bottom: 0; left: calc(33.33% + 12px); width: calc(33.33% - 2 * 12px);
  display: flex; flex-direction: column; }

/* MeetingHeader */
.mt-head { flex: none; position: relative; height: 116px; }
.mt-ring { position: absolute; left: 0; top: 26px; width: 64px; height: 64px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--mt-portrait-ring); box-shadow: var(--mt-shadow-portrait); z-index: 1; }
.mt-port { position: absolute; left: 2px; top: calc(26px + 2px); width: calc(64px - 2 * 2px);
  height: calc(64px - 2 * 2px); border-radius: 50%; overflow: hidden; background: var(--mt-raised); z-index: 1; }
.mt-port img, .mt-idle-port img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.speaking .mt-ring { border: 3px solid var(--mt-portrait-ring-speaking); box-shadow: none; }
.mt-text { position: absolute; left: 106px; right: 0; top: 30px; }
.mt-title { font: 700 24px/1.15 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; color: var(--mt-ink); letter-spacing: -0.015em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt-sub { margin-top: 6px; font-size: 15px; color: var(--mt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 7px; }
.mt-live { width: 7px; height: 7px; border-radius: 50%; background: var(--mt-live-dot); flex: none; }
.speaking .mt-live { animation: mt-pulse 1200ms ease-in-out infinite; }
@keyframes mt-pulse { 50% { opacity: .35; } }

/* LiquidOrb: two conic layers of the four hues, screen-blended behind the
 * portrait; the edge morphs, the gradient turns, and the size follows --lv. */
.mt-orb { position: absolute; width: 128px; height: 128px; margin: -64px 0 0 -64px; pointer-events: none; opacity: 0;
  transform: scale(calc(0.86 + var(--lv) * 0.26));
  transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1), transform 130ms ease-out; }
.mt-stage > .mt-orb { left: calc(33.33% + 12px + 32px); top: 58px; }
.mt-head > .mt-orb { left: 32px; top: 58px; }
.speaking .mt-orb { opacity: 1; }
.mt-orb b { position: absolute; inset: 0; mix-blend-mode: screen; border-radius: 46% 54% 58% 42% / 44% 50% 50% 56%;
  background: conic-gradient(from 0deg, var(--mt-orb-hue-1), var(--mt-orb-hue-2), var(--mt-orb-hue-3), var(--mt-orb-hue-4), var(--mt-orb-hue-1));
  box-shadow: var(--mt-orb-glow); animation: mt-morph 5000ms ease-in-out infinite, mt-spin 7000ms linear infinite; }
.mt-orb b + b { inset: 6px; opacity: 0.75; box-shadow: none; animation-duration: 3600ms, 5000ms; animation-direction: alternate, reverse; }
@keyframes mt-morph { 0%, 100% { border-radius: 46% 54% 58% 42% / 44% 50% 50% 56%; } 33% { border-radius: 58% 42% 40% 60% / 55% 40% 60% 45%; } 66% { border-radius: 40% 60% 55% 45% / 42% 58% 42% 58%; } }
@keyframes mt-spin { to { transform: rotate(360deg); } }

/* StatusPill */
.mt-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 0 0 12px;
  padding: 6px 12px 6px calc(12px - 2px); border-radius: 999px; background: var(--mt-raised);
  color: var(--mt-ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
.mt-pill .mt-gl { width: 17px; height: 17px; color: var(--mt-muted); }
.mt-pill .mt-plab { color: var(--mt-ink); font-weight: 600; }
.mt-pill .mt-plab span { color: var(--mt-muted); font-weight: 500; }

/* The feed */
.mt-feed { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
  -webkit-mask-image: linear-gradient(black 72%, transparent 100%); mask-image: linear-gradient(black 72%, transparent 100%); }

/* FeedCard */
.mt-card { background: var(--mt-card); color: var(--mt-ink); border-radius: 16px; flex: none;
  padding: 14px 16px 15px; box-shadow: inset 0 0 0 1px var(--mt-hairline); }
.mt-khd { display: flex; align-items: center; gap: 8px; }
.mt-khd > .mt-gl { width: 19px; height: 19px; }
.mt-k-action .mt-khd > .mt-gl { color: var(--mt-kind-action); }
.mt-k-note .mt-khd > .mt-gl { color: var(--mt-kind-note); }
.mt-k-memory .mt-khd > .mt-gl { color: var(--mt-kind-memory); }
.mt-k-answer .mt-khd > .mt-gl { color: var(--mt-kind-answer); }
.mt-k-summary .mt-khd > .mt-gl { color: var(--mt-kind-summary); }
.mt-klabel { font-size: 15px; font-weight: 600; color: var(--mt-muted); }
.mt-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  padding: 3px 9px 3px calc(9px - 2px); font-size: 13px; font-weight: 600; white-space: nowrap; }
.mt-tag .mt-gl { width: 13px; height: 13px; }
.mt-tag.edited { background: var(--mt-edited-fill); color: var(--mt-edited-ink); }
.mt-tag.removed { background: var(--mt-removed-fill); color: var(--mt-removed-ink); padding-left: 9px; }
.mt-tag.reading { background: var(--mt-reading-fill); color: var(--mt-reading-ink); }
.mt-ctxt { margin-top: 7px; font-size: 21px; line-height: 1.28; font-weight: 450; }
.mt-k-action .mt-ctxt { font-size: 22px; font-weight: 600; letter-spacing: -0.005em; }
.mt-cold { margin-top: 7px; font-size: 16px; line-height: 1.3; color: var(--mt-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.mt-card.removed .mt-ctxt { color: var(--mt-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.mt-cmeta { margin-top: 11px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; color: var(--mt-muted); }
.mt-owner { display: inline-flex; align-items: center; gap: 7px; background: var(--mt-owner-fill); color: var(--mt-ink); border-radius: 999px;
  padding: 3px 11px 3px 3px; font-weight: 600; }
.mt-owner .mt-av { width: 22px; height: 22px; font-size: 10px; }
.mt-due { display: inline-flex; align-items: center; gap: 5px; color: var(--mt-due); font-weight: 600; }
.mt-due .mt-gl { width: 15px; height: 15px; }
.mt-card.new { animation: mt-arrive var(--motion-arrive) var(--motion-ease-arrive) both; }
@keyframes mt-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* The summary: a heading, then one line per point behind the card's hairline. */
.mt-shead { margin-top: 7px; font-size: 21px; line-height: 1.28; font-weight: 600; }
.mt-sline { border-top: 1px solid var(--mt-hairline); margin-top: 10px; padding-top: 9px; }
.mt-ltop { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.mt-ltop b { font-weight: 700; }
.mt-ltop span { color: var(--mt-muted); font-weight: 600; }
.mt-ltext { margin-top: 2px; font-size: 21px; line-height: 1.25; font-weight: 450; }

/* ConfirmationPin */
.mt-card.pin { box-shadow: inset 0 0 0 1px var(--mt-pin-hairline); }
.mt-card.pin .mt-khd > .mt-gl { color: var(--mt-pin-icon); }
.mt-pin-title { font-size: 18px; font-weight: 600; }
.mt-pin-body { margin-top: 5px; font-size: 15px; line-height: 1.35; color: var(--mt-muted); }

/* JoinRow and ConfirmedRow */
.mt-row { display: flex; align-items: center; gap: 12px; padding: 3px 0; flex: none; }
.mt-av { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 700 13px 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; color: var(--mt-initials); }
.mt-h0 { background: var(--mt-speaker-1); }
.mt-h1 { background: var(--mt-speaker-2); }
.mt-h2 { background: var(--mt-speaker-3); }
.mt-h3 { background: var(--mt-speaker-4); }
.mt-h4 { background: var(--mt-speaker-5); }
.mt-stack { display: flex; flex: none; }
.mt-stack .mt-av { box-shadow: 0 0 0 2.5px var(--mt-avatar-ring); }
.mt-stack .mt-av + .mt-av { margin-left: -10px; }
.mt-rwords { min-width: 0; font-size: 19px; color: var(--mt-muted); line-height: 1.25; }
.mt-rwords b { color: var(--mt-ink); font-weight: 600; }
.mt-rsub { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--mt-confirmed); }
.mt-okdot { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--mt-confirmed); color: var(--mt-on-confirmed); box-shadow: 0 0 0 2px var(--mt-ground); display: flex; align-items: center; justify-content: center; }
.mt-okdot .mt-gl { width: 11px; height: 11px; }

/* IdlePortrait: before anyone joins, her portrait is the tile. */
.mt-idle-ring { position: absolute; left: 50%; top: 42%; width: 330px; height: 330px; transform: translate(-50%, -50%);
  border-radius: 50%; box-sizing: border-box; border: 3px solid var(--mt-portrait-ring); box-shadow: var(--mt-shadow-idle); }
.speaking .mt-idle-ring { border-color: var(--mt-portrait-ring-speaking); box-shadow: none; }
/* The photo's inset is measured from the ring's OUTER edge; an absolute child
 * is placed from inside the border, so the ring's width comes off it. */
.mt-idle-port { position: absolute; inset: calc(7px - 3px); border-radius: 50%; overflow: hidden; background: var(--mt-raised); }
.mt-idle-name { position: absolute; left: 0; right: 0; top: calc(42% + 236px); text-align: center; }
.mt-idle-name b { display: block; font: 700 42px/1 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; color: var(--mt-ink); letter-spacing: -0.02em; }
.mt-idle-name span { display: block; margin-top: 10px; font-size: 19px; color: var(--mt-muted); }
.mt-stage > .mt-orb.idle { left: 50%; top: 42%; width: 396px; height: 396px; margin: -198px 0 0 -198px; }

/* The crop map: what each platform keeps. */
.mt-crop { position: absolute; top: 0; bottom: 0; width: 280px; background: rgba(0, 0, 0, 0.62); z-index: 3; }
.mt-crop.l { left: 0; } .mt-crop.r { right: 0; }
.mt-band { position: absolute; top: 0; bottom: 0; left: 33.33%; width: 33.33%; border-left: 3px dashed var(--mt-kind-action); border-right: 3px dashed var(--mt-kind-action); z-index: 4; }
.mt-band span { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 22px; font-weight: 600; white-space: nowrap; color: var(--mt-ink); }
.mt-crop span { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); font-size: 22px; font-weight: 600; white-space: nowrap; color: var(--mt-muted); }

/* The legend and the controls */
.mt-legend { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.mt-lg { display: flex; gap: 12px; align-items: flex-start; }
.mt-lg .mt-gl { width: 24px; height: 24px; margin-top: 2px; }
.mt-lg-action .mt-gl { color: var(--mt-kind-action); }
.mt-lg-note .mt-gl { color: var(--mt-kind-note); }
.mt-lg-memory .mt-gl { color: var(--mt-kind-memory); }
.mt-lg-answer .mt-gl { color: var(--mt-kind-answer); }
.mt-lg-summary .mt-gl { color: var(--mt-kind-summary); }
.mt code { background: var(--mt-raised); border-color: var(--mt-hairline); color: var(--mt-ink); }
/* A header specimen that shows the orb needs room on the leading side: at
 * full level the orb reaches past the portrait by its radius less the
 * portrait's, plus the glow. */
.mt.orbroom { padding-left: 62px; }
.mt-lg b { display: block; font-family: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif; color: var(--mt-ink); }
.mt-lg span { color: var(--mt-muted); font-size: .86rem; }
.mt-toggle { font: 600 .88rem 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; color: var(--foreground); background: var(--card); border: 1px solid var(--rule); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.mt-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.mt-toggle i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--muted-foreground); }
.mt-toggle[aria-pressed="true"] i { background: var(--primary); border-color: var(--primary); }
.mt-orb-demo { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; }
.mt-orb-demo .mt-head { width: 64px; height: calc(64px + 2 * 26px); }

@media (prefers-reduced-motion: reduce) {
  .mt-orb b { animation: none; }
  .mt-orb { transition: opacity var(--motion-reduced) ease; }
  .speaking .mt-live, .mt-card.new { animation: none; }
}


/* ---- Landing-page recipes (2026-09-02 rebuild), drawn from the tokens ---- */
.lp-stage { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; background: var(--background); color: var(--foreground); margin: 0 0 18px; }
.lp-stage.on-card { background: var(--card); }
.lp-row { display: flex; flex-wrap: wrap; gap: 22px 28px; align-items: flex-start; }
.lp-state { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.lp-state .lbl, .lp-lbl { font-size: .72rem; color: var(--muted-foreground); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.lp-figcap { font-size: .84rem; color: var(--muted-foreground); margin: 8px 0 0; }

/* The primary button, every state (components/one/OneButton.tsx, one.css .one-btn) */
.lp-btn { display: inline-grid; align-items: center; justify-items: center; height: 52px; padding: 0 26px; border: 0; border-radius: 12px; background: var(--primary); color: var(--primary-foreground); font: inherit; font-size: 17px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 24px rgba(255,107,90,0); -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-press-out) var(--motion-ease-press-out), background-color var(--motion-micro) var(--motion-ease-micro), box-shadow var(--motion-micro) var(--motion-ease-micro), opacity var(--motion-micro) var(--motion-ease-micro); }
.lp-btn .l { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity var(--motion-micro) var(--motion-ease-micro); }
.lp-btn .l[data-active="false"] { opacity: 0; visibility: hidden; }
.lp-btn.is-hover, .lp-btn:hover:not(:disabled):not(.is-static) { background: var(--coral-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,107,90,.35); }
.lp-btn.is-press, .lp-btn:active:not(:disabled):not(.is-static) { transform: scale(.98); box-shadow: 0 2px 6px rgba(255,107,90,.15); transition-duration: var(--motion-press-in); transition-timing-function: var(--motion-ease-press-in); }
.lp-btn.is-focus, .lp-btn:focus-visible { outline: 3px solid var(--confirm); outline-offset: 2px; }
.lp-btn:disabled, .lp-btn.is-disabled { opacity: .6; cursor: default; }
.lp-btn.is-busy { cursor: wait; }
.lp-btn.pill { height: 44px; padding: 0 22px; border-radius: 999px; background: var(--foreground); color: var(--background); font-size: 15px; box-shadow: none; }
.lp-btn.pill.is-hover, .lp-btn.pill:hover:not(:disabled) { background: var(--foreground); color: var(--background); transform: scale(1.02); box-shadow: none; }
.lp-dots { display: inline-flex; align-items: center; gap: 3px; margin-left: 1px; }
.lp-dots b { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .3; animation: lp-dots 1.2s ease-in-out infinite; }
.lp-dots b:nth-child(2) { animation-delay: .2s; } .lp-dots b:nth-child(3) { animation-delay: .4s; }
@keyframes lp-dots { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.lp-btn.block { width: 100%; }

/* The phone-first sign-up card (components/one/SignupCard.tsx, one.css .one-card) */
.lp-card { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 640px; padding: 20px 24px; border-radius: 18px; background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); box-shadow: var(--shadow-float); }
.lp-card-title { margin: 0; font-family: 'Schibsted Grotesk'; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.lp-card-row { display: flex; gap: 10px; }
.lp-prefix { display: inline-flex; align-items: center; gap: 6px; height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--background); font-size: 16px; font-weight: 600; flex: none; color: var(--foreground); }
.lp-prefix svg { transform: rotate(90deg); color: var(--muted-foreground); }
.lp-input { display: flex; align-items: center; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); font-size: 17px; color: var(--foreground); flex: 1 1 0; min-width: 0; }
.lp-input.ph { color: #8595A2; }
.lp-input.sm { height: 44px; flex: none; }
.lp-input.is-focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,107,90,.3); }
.lp-card-micro { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted-foreground); }
.lp-card-recap { display: flex; flex-direction: column; gap: 6px; }
.lp-card-recap-label { font-size: 12px; color: var(--muted-foreground); }
.lp-doors { display: flex; flex-wrap: wrap; gap: 10px; min-height: 40px; }
.lp-door { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 14px; font-weight: 500; white-space: nowrap; flex: 1 1 auto; }
.lp-door.soon { opacity: .55; }
.lp-soon { font-family: 'Schibsted Grotesk'; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); background: var(--muted); border-radius: 999px; padding: 3px 7px; }
.lp-consent { margin: 0; font-size: 11px; line-height: 1.4; color: var(--muted-foreground); }
.lp-consent a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.lp-trust-block { display: flex; flex-direction: column; gap: 10px; }
.lp-trust { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 0; padding: 0; list-style: none; }
.lp-trust li { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 12px; font-weight: 500; white-space: nowrap; }
.lp-trust svg { flex: none; display: block; }
.lp-lock { display: flex; align-items: center; gap: 8px; margin-top: -2px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }
.lp-lock a { color: var(--confirm); font-weight: 500; text-decoration: none; }
.lp-card.closing { background: transparent; border: 0; box-shadow: none; padding: 0; color: #FFFFFF; }
.lp-band { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 32px; align-items: center; padding: 40px 44px; border-radius: var(--radius-band); background: #18222B; color: #FFFFFF; }
.lp-band h4 { margin: 0 0 8px; font-family: 'Schibsted Grotesk'; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.lp-band p { margin: 0; color: #DCE0E5; font-size: 15px; line-height: 1.5; }
.lp-band .lp-prefix, .lp-band .lp-input { background: #1F2833; border-color: #2A3646; color: #DCE0E5; }
.lp-band .lp-input.ph { color: #93A0AD; }
.lp-band .lp-card-micro { color: #93A0AD; }
@media (max-width: 720px) { .lp-band { grid-template-columns: 1fr; padding: 24px 20px; } }

/* Live chip: Feather at 92%, 32px, radius 999, breathing confirm dot */
.lp-oncall { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; background: rgba(248,250,252,.92); color: #18222B; font-size: 13px; font-weight: 600; }
.lp-oncall i { width: 8px; height: 8px; border-radius: 50%; background: #3E5D86; animation: lp-pulse 2.4s ease-in-out infinite; }
@keyframes lp-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.lp-plate { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--muted); }
.lp-plate img { display: block; width: 100%; height: auto; }
.lp-plate .lp-oncall { position: absolute; left: 14px; bottom: 14px; }

/* Status pills, three tones (one.css .one-chip) */
.lp-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; flex: none; }
.lp-chip.waiting { background: var(--waiting-soft); color: var(--waiting); }
.lp-chip.confirm { background: var(--confirm-soft); color: var(--confirm); }
.lp-chip.muted { background: var(--muted); color: var(--muted-foreground); }
.lp-chip.card { background: var(--card); color: var(--muted-foreground); }

/* Screen vignette (one.css .one-screen / .one-wcard) and the tile around it */
.lp-tile { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--border); width: 100%; max-width: 360px; }
.lp-tile-label { font-size: var(--type-label); font-weight: 600; letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--confirm); }
.lp-tile-title { margin: 2px 0 0; font-family: 'Schibsted Grotesk'; font-size: var(--type-tile-title); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.lp-screen { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--muted); }
.lp-wcard { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); }
.lp-task-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); padding-top: 2px; }
.lp-task-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lp-task-title { font-size: 14px; font-weight: 600; }
.lp-task-sub { font-size: 12px; color: var(--waiting); }
.lp-call-head { display: flex; align-items: center; gap: 10px; }
.lp-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lp-call-name { font-size: 14px; font-weight: 600; }
.lp-call-meta { font-size: 12px; color: var(--muted-foreground); }
.lp-wave { display: flex; align-items: flex-end; gap: 3px; height: 28px; padding: 0 4px; }
.lp-wave span { width: 3px; border-radius: 2px; background: var(--confirm); }

/* Flags */
.lp-flags { display: flex; align-items: center; gap: 14px; }
.lp-flags-caption { font-size: 13px; font-weight: 500; color: var(--muted-foreground); margin-top: 8px; }

/* Footer anatomy (components/one/Footer.tsx) */
.lp-footer { display: flex; flex-direction: column; gap: 24px; padding: 28px 0 0; border-top: 1px solid var(--border); }
.lp-footer-grid { display: grid; grid-template-columns: 1.1fr 1.6fr .8fr .9fr; gap: 24px; }
.lp-footer-col { display: flex; flex-direction: column; gap: 4px; }
.lp-footer-h { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--foreground); }
.lp-footer-col a { display: inline-flex; align-items: center; align-self: flex-start; min-height: 24px; font-size: 14px; color: var(--muted-foreground); line-height: 1.4; text-decoration: none; }
.lp-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--muted-foreground); }
.lp-footer-brand { display: flex; align-items: center; gap: 8px; }
.lp-mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px; background: var(--primary); flex: none; }
.lp-footer-ai { max-width: 640px; line-height: 1.5; }
@media (max-width: 720px) { .lp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-footer-bottom { flex-direction: column; align-items: flex-start; } }

/* Marketing type specimens */
.lp-h1 { font-family: 'Schibsted Grotesk'; font-size: var(--type-h1); line-height: 1.04; font-weight: 700; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.lp-h2 { font-family: 'Schibsted Grotesk'; font-size: var(--type-h2); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0; }
@media (max-width: 720px) { .lp-h1 { font-size: var(--type-h1-phone); } .lp-h2 { font-size: var(--type-h2-phone); } }

/* Motion demo */
.lp-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.lp-demo-cell { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
.lp-demo-cell .lbl { font-family: 'Schibsted Grotesk'; font-weight: 700; font-size: .95rem; }
.lp-demo-box { height: 64px; border-radius: 12px; background: var(--confirm-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--confirm); font-weight: 600; }
.lp-demo-box.play[data-box="arrive"] { animation: lp-arrive var(--motion-arrive) var(--motion-ease-arrive) both; }
.lp-demo-box.play[data-box="land"] { animation: lp-land var(--motion-land) var(--motion-ease-land) both; }
.lp-demo-box.play[data-box="micro"] { animation: lp-micro var(--motion-micro) var(--motion-ease-micro) both; }
@keyframes lp-arrive { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lp-land { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lp-micro { from { transform: none; background: var(--confirm-soft); } to { transform: translateY(-2px); background: var(--bubble-member); box-shadow: 0 8px 24px rgba(24,34,43,.12); } }
.lp-demo .play-btn { align-self: flex-start; font: inherit; font-size: .85rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); cursor: pointer; }
.lp-demo .play-btn:hover { border-color: var(--foreground); }
.lp-breathe { width: 96px; height: 96px; border-radius: 18px; overflow: hidden; background: var(--muted); }
.lp-breathe img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; animation: lp-breathe 6s var(--motion-ease-ambient) infinite; }
@keyframes lp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@media (prefers-reduced-motion: reduce) {
  .lp-demo-box.play { animation: lp-fade var(--motion-reduced) ease both !important; }
  .lp-breathe img, .lp-oncall i, .lp-dots b { animation: none !important; }
  .lp-btn, .lp-btn.pill { transition-property: background-color, box-shadow, opacity, color; }
  .lp-btn:hover, .lp-btn:active, .lp-btn.is-hover, .lp-btn.is-press { transform: none; }
}
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }

/* Frame-rule diagram and portrait tiles */
.lp-frame { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--muted); }
.lp-frame img { display: block; width: 100%; height: auto; }
.lp-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.lp-plates img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); }
.lp-portraits { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.lp-person { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-portrait { width: 132px; height: 132px; border-radius: 18px; overflow: hidden; background: var(--muted); }
.lp-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.lp-person-name { font-size: 14px; font-weight: 600; }
.lp-prompt { white-space: pre-wrap; font-size: .8rem; line-height: 1.5; }
.lp-honest { font-size: 18px; line-height: 1.5; max-width: 640px; text-align: center; margin: 24px auto 0; }
.lp-voice-rule { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--card); margin-bottom: 12px; }
.lp-voice-rule .q { font-family: 'Schibsted Grotesk'; font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; }
.lp-voice-rule p { margin: 0; font-size: .92rem; }
.lp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }