/* Miisk design system: tokens.
   Scales hold raw values (Radix Colors, MIT). Roles name a purpose; components read roles only.
   The neutral scale keeps the --gray-* names but holds Radix sand, a warm gray (docs/34 DS-D23).
   Every color is light-dark(light, dark): the theme is just color-scheme, so nothing branches on theme. */

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root {
  /* Neutral scale: Radix sand */
  --gray-1: light-dark(#fdfdfc, #111110);
  --gray-2: light-dark(#f9f9f8, #191918);
  --gray-3: light-dark(#f1f0ef, #222221);
  --gray-4: light-dark(#e9e8e6, #2a2a28);
  --gray-5: light-dark(#e2e1de, #31312e);
  --gray-6: light-dark(#dad9d6, #3b3a37);
  --gray-7: light-dark(#cfceca, #494844);
  --gray-8: light-dark(#bcbbb5, #62605b);
  --gray-9: light-dark(#8d8d86, #6f6d66);
  --gray-11: light-dark(#63635e, #b5b3ad);
  --gray-12: light-dark(#21201c, #eeeeec);
  --gray-a2: light-dark(#25250007, #f4f4f309);
  --gray-a3: light-dark(#20100010, #f6f6f513);
  --gray-a4: light-dark(#1f150019, #fefef31b);
  --gray-a5: light-dark(#1f180021, #fbfbeb23);
  --gray-a6: light-dark(#19130029, #fffaed2d);
  --gray-a7: light-dark(#19140035, #fffbed3c);
  --gray-a8: light-dark(#1915014a, #fff9eb57);
  --gray-a9: light-dark(#0f0f0079, #fffae965);
  --gray-a11: light-dark(#080800a1, #fffcf4b0);
  --gray-a12: light-dark(#060500e3, #fffffded);

  /* Hue scales: 9 solid, 10 solid hover, 11 text, a-steps for fills on any surface.
     Light step 11 is a shade darker than Radix so status text clears 4.5:1 on its own tint. */
  --blue-9: #0090ff;
  --blue-10: light-dark(#0588f0, #3b9eff);
  --blue-11: light-dark(#0c6cc2, #70b8ff);
  --blue-a3: light-dark(#008ff519, #0077ff3a);
  --blue-a4: light-dark(#009eff2a, #0075ff57);
  --blue-a6: light-dark(#0088f653, #0f89fd7f);
  --blue-a8: light-dark(#0084e6a1, #3094feb9);
  --green-9: #30a46c;
  --green-11: light-dark(#1c784f, #3dd68c);
  --green-a3: light-dark(#00a43319, #22ff991e);
  --green-a4: light-dark(#00a83829, #11ff992d);
  --green-a6: light-dark(#00963c52, #44ffaa4b);
  --amber-9: #ffc53d;
  --amber-11: light-dark(#965700, #ffca16);
  --amber-a3: light-dark(#ffde003d, #ffb3002a);
  --amber-a4: light-dark(#ffd30063, #ffaa003a);
  --amber-a6: light-dark(#e9b4008c, #ffb6105c);
  --tomato-9: #e54d2e;
  --tomato-10: light-dark(#dd4425, #ec6142);
  --tomato-11: light-dark(#c22e11, #ff977d);
  --tomato-a3: light-dark(#f52b0018, #ff35232b);
  --tomato-a4: light-dark(#ff35002c, #fd201142);
  --tomato-a5: light-dark(#ff2e003d, #fe332153);
  --tomato-a6: light-dark(#f92d0050, #ff4f3864);

  /* Identity hues: kinds of thing (a channel, a need, a lead), never a status. Step 9 fills dots and bars (dark reads
     step 10 so a bar holds 3:1 on a dark panel, and cyan reads 10 in light too). a5 is the tile and avatar tint (dark reads a4, already strong there).
     Light step 11 is darkened so a glyph or initials clear 4.5:1 on that tint, even over a selected row or the shell. */
  --iris-9: light-dark(#5b5bd6, #6e6ade);
  --iris-11: light-dark(#4b47b5, #b1a9ff);
  --iris-a5: light-dark(#000eff25, #4d58ff5a);
  --cyan-9: light-dark(#0797b9, #23afd0);
  --cyan-11: light-dark(#0a6178, #4ccce6);
  --cyan-a5: light-dark(#01b4cc4a, #00baff3b);
  --plum-9: light-dark(#ab4aba, #b658c4);
  --plum-11: light-dark(#7f2f8c, #e796f3);
  --plum-a5: light-dark(#b700bd2e, #f646ff3a);
  --pink-9: light-dark(#d6409f, #de51a8);
  --pink-11: light-dark(#a01a70, #ff8dcc);
  --pink-a5: light-dark(#d1008331, #fc1ec43f);
  --bronze-9: light-dark(#a18072, #ae8c7e);
  --bronze-11: light-dark(#6a4d43, #d4b3a5);
  --bronze-a5: light-dark(#7423002c, #facdb622);
  --gold-9: light-dark(#978365, #a39073);
  --gold-11: light-dark(#5e503a, #cbb99f);
  --gold-a5: light-dark(#60460030, #ffeec41e);

  /* Surfaces: the shell sits behind everything, the page is the rounded workspace,
     containers group content on it, raised surfaces float. */
  --surface-shell: light-dark(#f4f3f0, #0c0c0b);
  --surface-page: var(--gray-1);
  --surface-container: light-dark(#ffffff, #111110);
  --surface-card: var(--gray-a2);
  --surface-panel: light-dark(#ffffff, #f4f4f309);
  --surface-panel-strong: light-dark(#ffffff, #f6f6f513);
  --surface-inset: light-dark(#00000005, #00000040);
  --surface-page-edge: light-dark(transparent, #f6f6f513);
  --surface-sunken: light-dark(#0000000d, #00000066);
  --surface-raised: light-dark(#ffffff, #222221);
  --surface-overlay: light-dark(#ffffff, #2a2a28);
  --surface-standout: light-dark(#21201c, #222221);
  --surface-backdrop: light-dark(#00000066, #00000099);

  /* Fills for interactive things */
  --fill: var(--gray-a3);
  --fill-hover: var(--gray-a4);
  --fill-active: var(--gray-a5);
  --fill-ghost-hover: light-dark(#20100010, #fefef31b);
  --fill-subtle: var(--gray-a2);
  --spinner-track: var(--gray-a5);
  --scrollbar-thumb: var(--gray-a6);
  --control: light-dark(#ffffff, #f6f6f513);
  --control-hover: light-dark(#f9f9f8, #fefef31b);
  --inverted: light-dark(#1d1c1a, #fffffdf2);
  --inverted-hover: light-dark(#1d1c1ad1, #fffffdcc);
  --inverted-active: light-dark(#1d1c1ab3, #fffffdb3);
  --on-inverted: light-dark(#ffffff, #000000);
  --disabled: light-dark(#0000000f, #ffffff09);

  /* Text */
  --text-primary: var(--gray-a12);
  --text-paragraph: light-dark(#060500df, #fffffdcc);
  --text-secondary: light-dark(#080700b0, #fffcf4b3);
  --text-tertiary: light-dark(#08070096, #fffcf480);
  --text-disabled: var(--gray-a8);
  --text-on-standout: light-dark(#ffffff, #ffffffed);
  --text-on-standout-secondary: #ffffff80;

  /* Lines */
  --border-subtle: var(--gray-a2);
  --border-default: var(--gray-a3);
  --border-strong: var(--gray-a6);
  --border-control: light-dark(#1f18001f, #fefef31b);
  --border-focus: light-dark(#0588f0, #0090ff);
  /* Edges that identify a control on their own: 3:1 against the surface in both themes. */
  --border-input: light-dark(#00000072, #ffffff5c);
  --fill-selected: light-dark(#008ff512, #0077ff26);
  --fill-selected-hover: light-dark(#008ff51c, #0077ff33);

  /* Brand: focus, selection and brand moments. Never an outcome. */
  --brand-solid: var(--blue-9);
  --brand-solid-hover: var(--blue-10);
  --brand-fill: #0d74ce;
  --brand-fill-hover: #0b65b5;
  --brand-subtle: var(--blue-a3);
  --brand-subtle-hover: var(--blue-a4);
  --brand-text: var(--blue-11);
  --brand-border: var(--blue-a6);
  --on-brand: #ffffff;
  --selection: light-dark(#0090ff33, #0090ff59);

  /* Status roles. Confirmed is reserved for an outcome the record supports; unknown is always labeled. */
  --confirmed-solid: var(--green-9);
  --confirmed-subtle: var(--green-a3);
  --confirmed-text: var(--green-11);
  --confirmed-border: var(--green-a6);
  --attention-solid: var(--amber-9);
  --attention-subtle: var(--amber-a3);
  --attention-subtle-hover: var(--amber-a4);
  --attention-text: var(--amber-11);
  --attention-border: var(--amber-a6);
  --failure-solid: var(--tomato-9);
  /* Fills that carry white text: one step deeper than the solid so labels clear 4.5:1. */
  --failure-fill: #d13415;
  --failure-fill-hover: #b82d12;
  --on-failure: #ffffff;
  --failure-solid-hover: var(--tomato-10);
  --failure-subtle: var(--tomato-a3);
  --failure-subtle-hover: var(--tomato-a4);
  --failure-text: var(--tomato-11);
  --failure-border: var(--tomato-a6);
  --info-subtle: var(--blue-a3);
  --info-text: var(--blue-11);
  --info-border: var(--blue-a6);
  --unknown-subtle: var(--gray-a3);
  --unknown-text: var(--gray-a11);
  --unknown-border: var(--gray-a9);

  /* Identity roles. A hue names a kind of thing so the same kind reads the same everywhere: a lead's avatar, a channel,
     a need, a Results series. Never a status: green, amber, tomato and blue keep their meanings above, and every hue
     sits beside its word. Solid draws dots and bars; text and subtle make a tinted tile or avatar. */
  --identity-iris-solid: var(--iris-9);
  --identity-iris-text: var(--iris-11);
  --identity-iris-subtle: var(--iris-a5);
  --identity-cyan-solid: var(--cyan-9);
  --identity-cyan-text: var(--cyan-11);
  --identity-cyan-subtle: var(--cyan-a5);
  --identity-plum-solid: var(--plum-9);
  --identity-plum-text: var(--plum-11);
  --identity-plum-subtle: var(--plum-a5);
  --identity-pink-solid: var(--pink-9);
  --identity-pink-text: var(--pink-11);
  --identity-pink-subtle: var(--pink-a5);
  --identity-bronze-solid: var(--bronze-9);
  --identity-bronze-text: var(--bronze-11);
  --identity-bronze-subtle: var(--bronze-a5);
  --identity-gold-solid: var(--gold-9);
  --identity-gold-text: var(--gold-11);
  --identity-gold-subtle: var(--gold-a5);

  /* Elevation. Light theme casts soft drops; dark theme draws a hairline highlight instead. */
  --shadow-hairline: inset 0 0 0 .5px light-dark(transparent, #f6f6f513), 0 0 0 .5px light-dark(#1c19140f, transparent),
    0 1px 1px -1px light-dark(#1c19141a, transparent), 0 1px 2px 0 light-dark(#1c19140d, transparent);
  --shadow-raised: 0 0 0 1px light-dark(#1c19140d, #ffffff2c), 0 2px 3px -2px light-dark(#1c19140f, #00000026),
    0 3px 12px -4px light-dark(#1c19141a, #00000066), 0 4px 16px -8px light-dark(#1c19140d, #00000080);
  --shadow-overlay: inset 0 0 0 .5px light-dark(transparent, #f6f6f513), 0 0 0 .5px light-dark(#1c19140f, transparent),
    0 8px 40px 0 #0000000d, 0 12px 32px -16px #00000026, 0 24px 64px -16px #00000040;
  /* The raised pill of a segmented control or theme switch. */
  --selected-pill-bg: var(--surface-panel-strong);
  --selected-pill-shadow: inset 0 0 0 1px var(--gray-a5), var(--shadow-hairline);
  --shadow-border: 0 0 0 1px light-dark(#1c191412, #ffffff12);
  --hairline: .5px;

  /* Type. 13px runs the interface; 15px is for reading and for touch. */
  --font-sans: "Inter Variable", "InterVariable", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-features: "ss03", "cv11";
  --text-caption-sm: 10px; --leading-caption-sm: 16px;
  --text-caption: 11px; --leading-caption: 16px;
  --text-caption-lg: 12px; --leading-caption-lg: 16px;
  --text-body-sm: 13px; --leading-body-sm: 20px;
  --text-body: 15px; --leading-body: 24px;
  --text-body-lg: 18px; --leading-body-lg: 26px;
  --text-heading-6: 20px; --leading-heading-6: 26px;
  --text-heading-5: 24px; --leading-heading-5: 32px;
  --text-heading-4: 28px; --leading-heading-4: 36px;
  --text-heading-3: 36px; --leading-heading-3: 44px;
  --tracking-heading: -.012em;
  --tracking-display: -.022em;
  --tracking-label: .05em;
  --weight-regular: 400;
  --weight-book: 450;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Space: a 4px grid */
  --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* Radius: a nested corner steps down one stop per inset */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px;
  --radius-2xl: 12px; --radius-3xl: 16px; --radius-4xl: 20px; --radius-5xl: 24px; --radius-full: 9999px;

  /* Control heights. Fine pointers get the compact size; coarse pointers grow to the touch target. */
  --control-xs: 20px; --control-sm: 24px; --control-md: 28px; --control-lg: 32px; --control-xl: 40px;
  --touch-target: 44px;
  --text-field: var(--text-body-sm);

  /* Motion: the transitions.dev scale */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --duration-settle: 1200ms;
  --ease-smooth-out: cubic-bezier(.22, 1, .36, 1);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-standard: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: ease-in-out;
  --ease-linear: linear;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --scale-large: .96;
  --scale-medium: .97;
  --scale-small: .98;
  --scale-tiny: .99;
  --scale-press: .97;
  --blur-small: 2px;
  --blur-medium: 3px;

  /* Layout */
  --sidebar-width: 248px;
  --content-max: 1360px;
  --reading-max: 68ch;
  --layer-sticky: 10;
  --layer-overlay: 50;
  --layer-toast: 60;
}

/* Coarse pointers grow every control from the token, so no component can miss the touch size.
   Field text reaches 16px so iOS does not zoom on focus. */
@media (pointer: coarse) {
  :root {
    --control-sm: 32px; --control-md: var(--touch-target); --control-lg: var(--touch-target); --control-xl: var(--touch-target);
    --text-field: 16px;
  }
}

@media (prefers-contrast: more) {
  :root {
    --text-secondary: var(--gray-a12);
    --text-tertiary: var(--gray-a11);
    --text-disabled: var(--gray-a11);
    --border-subtle: var(--gray-a6);
    --border-default: var(--gray-a7);
    --border-strong: var(--gray-a8);
    --border-control: var(--gray-a8);
  }
}
/* Miisk design system: base. Element defaults, the browser surfaces nobody draws, and accessibility helpers. */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--surface-shell);
}
body {
  margin: 0;
  min-width: 280px;
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  background: var(--surface-shell);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (pointer: coarse) {
  body { font-size: var(--text-body); line-height: var(--leading-body); }
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-semibold); text-wrap: balance; }
h1 { font-size: var(--text-heading-6); line-height: var(--leading-heading-6); letter-spacing: var(--tracking-heading); }
h2 { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); }
h3, h4, h5, h6 { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-medium); }
p { text-wrap: pretty; }
small { font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); color: var(--text-secondary); }
strong, b { font-weight: var(--weight-medium); }
time, kbd, .numeric { font-variant-numeric: tabular-nums; }
code, pre, samp { font-family: var(--font-mono); font-size: .92em; }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; height: var(--hairline); background: var(--border-default); margin: var(--space-6) 0; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
a:not([class]) {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-quick) var(--ease-standard);
}
a:not([class]):hover { text-decoration-color: currentColor; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button, select, summary, [role="button"], label:has(input:not([type="hidden"])) { cursor: pointer; }
button:disabled, select:disabled, input:disabled { cursor: not-allowed; }
button, select, a, summary { -webkit-tap-highlight-color: transparent; }
input, textarea { caret-color: var(--brand-solid); }
::placeholder { color: var(--text-tertiary); opacity: 1; }

/* The surfaces the browser draws: selection, scrollbars, focus. */
::selection { background: var(--selection); color: inherit; }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Accessibility helpers */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--space-4); top: calc(-1 * var(--space-16)); z-index: var(--layer-toast);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
  background: var(--inverted); color: var(--on-inverted); font-weight: var(--weight-medium);
  box-shadow: var(--shadow-raised);
  transition: top var(--duration-quick) var(--ease-smooth-out);
}
.skip-link:focus-visible { top: var(--space-4); }

/* Icons are inline SVG and inherit the text color. */
.icon { width: 16px; height: 16px; flex: none; stroke-width: 1.75; color: inherit; }
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 20px; height: 20px; stroke-width: 1.6; }

/* Text roles */
.text-secondary, .muted { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.tone-confirmed { color: var(--confirmed-text); }
.tone-attention { color: var(--attention-text); }
.tone-failure { color: var(--failure-text); }
.tone-information { color: var(--info-text); }
.fine-print {
  color: var(--text-secondary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg);
  margin-top: var(--space-3); text-wrap: pretty;
}
.label-caps {
  font-size: var(--text-caption-sm); line-height: var(--leading-caption-sm); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary);
}
.mono { font-family: var(--font-mono); font-size: var(--text-caption-lg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important; animation-duration: 0ms !important;
    animation-iteration-count: 1 !important; scroll-behavior: auto !important;
  }
}
/* Miisk design system: components. Each reads role tokens only and exposes its own --component-* knobs. */

/* ---------- Button ----------
   .button is the secondary action. Variants: --primary (inverted), --tertiary, --ghost, --brand,
   --danger, --danger-subtle. Sizes: --sm 24, (md 28), --lg 32, --xl 40. --icon is square. */
.button {
  --button-h: var(--control-md);
  --button-px: var(--space-2-5);
  --button-gap: var(--space-1-5);
  --button-radius: var(--radius-lg);
  --button-bg: var(--control);
  --button-bg-hover: var(--control-hover);
  --button-bg-active: var(--control-hover);
  --button-fg: var(--text-primary);
  --button-shadow: var(--shadow-hairline), inset 0 0 0 .5px var(--border-control);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--button-gap);
  min-width: 0; height: var(--button-h); min-height: var(--button-h);
  padding: 0 var(--button-px);
  border: 0; border-radius: var(--button-radius);
  background: var(--button-bg); color: var(--button-fg); box-shadow: var(--button-shadow);
  font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-medium);
  text-align: center; white-space: nowrap; text-decoration: none; user-select: none; touch-action: manipulation;
  transition: background-color var(--duration-quick) var(--ease-standard), color var(--duration-quick) var(--ease-standard),
    box-shadow var(--duration-quick) var(--ease-standard), transform 200ms var(--ease-standard);
}
.button .icon { width: 16px; height: 16px; }
.button:has(> .icon:first-child) { padding-inline-start: calc(var(--button-px) - var(--space-1)); }
.button:has(> .icon:last-child) { padding-inline-end: calc(var(--button-px) - var(--space-1)); }
@media (hover: hover) { .button:hover { background: var(--button-bg-hover); } }
.button:active:not(:disabled, [aria-disabled="true"]) { background: var(--button-bg-active); transform: scale(var(--scale-press)); }
.button:disabled, .button[aria-disabled="true"] {
  --button-bg: var(--disabled); --button-bg-hover: var(--disabled); --button-fg: var(--text-disabled); --button-shadow: none;
  cursor: not-allowed;
}
.button[aria-busy="true"] { cursor: progress; }
.button--primary {
  --button-bg: var(--inverted); --button-bg-hover: var(--inverted-hover); --button-bg-active: var(--inverted-active);
  --button-fg: var(--on-inverted); --button-shadow: none;
}
.button--secondary { --button-bg: var(--control); }
.button--tertiary {
  --button-bg: var(--fill); --button-bg-hover: var(--fill-hover); --button-bg-active: var(--fill-active);
  --button-fg: var(--text-secondary); --button-shadow: none;
}
.button--tertiary:hover { --button-fg: var(--text-primary); }
.button--ghost {
  --button-bg: transparent; --button-bg-hover: var(--fill-ghost-hover); --button-bg-active: var(--fill);
  --button-fg: var(--text-secondary); --button-shadow: none;
}
.button--ghost:hover { --button-fg: var(--text-primary); }
.button--brand {
  --button-bg: var(--brand-fill); --button-bg-hover: var(--brand-fill-hover); --button-bg-active: var(--brand-fill-hover);
  --button-fg: var(--on-brand); --button-shadow: none;
}
.button--danger {
  --button-bg: var(--failure-fill); --button-bg-hover: var(--failure-fill-hover); --button-bg-active: var(--failure-fill-hover);
  --button-fg: var(--on-failure); --button-shadow: none;
}
.button--danger-subtle {
  --button-bg: var(--failure-subtle); --button-bg-hover: var(--failure-subtle-hover); --button-bg-active: var(--failure-subtle-hover);
  --button-fg: var(--failure-text); --button-shadow: none;
}
.button--sm { --button-h: var(--control-sm); --button-px: var(--space-2); --button-gap: var(--space-1); --button-radius: var(--radius-md); }
.button--sm .icon { width: 14px; height: 14px; }
@media (pointer: coarse) { .button--sm::after { content: ""; position: absolute; inset: -6px; } }
.button--lg { --button-h: var(--control-lg); --button-px: var(--space-3); }
.button--xl { --button-h: var(--control-xl); --button-px: var(--space-3-5); --button-gap: var(--space-2); --button-radius: var(--radius-xl); }
.button--icon { --button-px: 0; width: var(--button-h); padding: 0; }
.button--pill { --button-radius: var(--radius-full); }
.button--wide { width: 100%; }
@media (pointer: coarse) {
  .button { --button-px: var(--space-3-5); --button-radius: var(--radius-xl); }
  .button--sm { --button-px: var(--space-3); --button-radius: var(--radius-lg); }
}

/* Text link that behaves like a control */
.link { color: var(--brand-text); font-weight: var(--weight-medium); text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Badge ----------
   Status is always a word; tone only reinforces it. */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); flex: none;
  height: 20px; padding: 0 var(--space-1-5); max-width: 100%;
  border-radius: var(--radius-sm);
  background: var(--fill); color: var(--text-secondary);
  font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); font-weight: var(--weight-medium);
  white-space: nowrap; vertical-align: middle;
}
.badge .icon { width: 12px; height: 12px; stroke-width: 2; }
.badge:has(> .icon:first-child) { padding-inline-start: var(--space-1); }
.badge--neutral { background: var(--fill); color: var(--text-secondary); }
.badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); }
.badge--inverted { background: var(--inverted); color: var(--on-inverted); }
.badge--information { background: var(--info-subtle); color: var(--info-text); }
.badge--attention { background: var(--attention-subtle); color: var(--attention-text); }
.badge--failure { background: var(--failure-subtle); color: var(--failure-text); }
.badge--confirmed { background: var(--confirmed-subtle); color: var(--confirmed-text); }
.badge--unknown { background: var(--unknown-subtle); color: var(--unknown-text); box-shadow: inset 0 0 0 1px var(--unknown-border); }
.badge--lg { height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-md); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.badge--pill { border-radius: var(--radius-full); }

/* Status dot, always next to its word */
.dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }

/* ---------- Keyboard key ---------- */
kbd, .kbd {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 18px; min-width: 18px; padding: 0 var(--space-1);
  border-radius: var(--radius-sm); box-shadow: inset 0 0 0 .5px var(--border-strong), inset 0 -1px 0 var(--border-strong);
  background: var(--fill); color: var(--text-secondary);
  font-family: var(--font-sans); font-size: var(--text-caption); line-height: 1; font-weight: var(--weight-medium);
  text-transform: uppercase;
}

/* ---------- Field ----------
   One recipe for every text entry: inputs, selects and textareas look and behave alike.
   The selector below is the single definition of "a text field"; every state reuses it verbatim. */
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"]), select, textarea), .input {
  --field-h: var(--control-lg);
  display: block; width: 100%; min-width: 0; min-height: var(--field-h);
  padding: 0 var(--space-2-5);
  border: 0; border-radius: var(--radius-lg);
  background: var(--control); color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-input);
  font-size: var(--text-field); line-height: var(--leading-body-sm); caret-color: var(--brand-text);
  transition: background-color var(--duration-quick) var(--ease-standard), box-shadow var(--duration-quick) var(--ease-standard);
}
:where(textarea) {
  min-height: 96px; padding: var(--space-2) var(--space-2-5);
  resize: vertical; field-sizing: content; max-height: 40dvh; line-height: var(--leading-body-sm);
}
@media (hover: hover) {
  :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"]), select, textarea):hover:not(:focus, :disabled), .input:hover:not(:focus) { background: var(--control-hover); }
}
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"]), select, textarea):focus-visible, .input:focus-visible {
  outline: 2px solid var(--border-focus); outline-offset: 1px;
  box-shadow: inset 0 0 0 1px var(--border-focus);
}
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"]), select, textarea):disabled { background: var(--disabled); color: var(--text-disabled); box-shadow: none; }
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"]), select, textarea)[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--failure-text); }
:where(input[type="date"], input[type="time"]) { font-variant-numeric: tabular-nums; }
::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
:where(input[type="search"])::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Native select with a drawn caret. The <select> keeps its semantics. */
.select-control { position: relative; display: block; min-width: 0; }
.select-control > select { appearance: none; -webkit-appearance: none; padding-inline-end: var(--space-8); text-overflow: ellipsis; }
.select-control > .icon {
  position: absolute; inset-inline-end: var(--space-2-5); top: 50%; width: 14px; height: 14px;
  transform: translateY(-50%); pointer-events: none; color: var(--text-tertiary);
}

/* Label above a field */
.field { display: grid; gap: var(--space-1-5); min-width: 0; }
.field > label, .field-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--text-primary);
}
.field-hint { font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); color: var(--text-secondary); font-weight: var(--weight-regular); }
.field-error { display: flex; gap: var(--space-1-5); align-items: flex-start; font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); color: var(--failure-text); }

/* Checkbox and radio */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 16px; height: 16px; margin: 0;
  display: inline-grid; place-content: center;
  border-radius: var(--radius-sm);
  background: var(--control);
  box-shadow: inset 0 0 0 1.5px var(--border-input);
  vertical-align: middle;
  transition: background-color 200ms var(--ease-out-quint), box-shadow 200ms var(--ease-out-quint), transform 200ms var(--ease-out-quint);
}
input[type="radio"] { border-radius: var(--radius-full); }
input[type="checkbox"]::before {
  content: ""; width: 10px; height: 10px;
  background: var(--on-brand);
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 37% 70%);
  transform: scale(0); transition: transform 200ms var(--ease-out-quint);
}
input[type="radio"]::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--on-brand);
  transform: scale(0); transition: transform 200ms var(--ease-out-quint);
}
input[type="checkbox"]:checked, input[type="radio"]:checked, input[type="checkbox"]:indeterminate {
  background: var(--brand-solid); box-shadow: inset 0 0 0 1.5px var(--brand-solid);
}
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }
@media (hover: hover) {
  input[type="checkbox"]:hover:not(:checked, :disabled), input[type="radio"]:hover:not(:checked, :disabled) { background: var(--control-hover); }
}
input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled) { transform: scale(var(--scale-press)); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { background: var(--disabled); box-shadow: none; cursor: not-allowed; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); cursor: pointer; }
.check:has(input:disabled) { cursor: not-allowed; color: var(--text-disabled); }
@media (pointer: coarse) { .check { min-height: var(--touch-target); } }
/* A choice card: a whole card that is one option, so tapping anywhere on it chooses it. The radio stays visible and the
   chosen card also takes the selected fill and a focus-colored ring, never color alone. */
.choice-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: var(--space-1) var(--space-2);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); background: var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
}
label.choice-card { cursor: pointer; }
.choice-card > input { margin-block-start: var(--space-0-5); }
.choice-card-title { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.choice-card-body { grid-column: 1 / -1; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); overflow-wrap: anywhere; }
.choice-card > input ~ .choice-card-body { grid-column: 2; }
@media (hover: hover) { label.choice-card:hover:not(:has(input:checked)) { background: var(--fill-ghost-hover); } }
.choice-card:has(input:checked) { background: var(--fill-selected); box-shadow: inset 0 0 0 2px var(--border-focus); }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* ---------- Segmented control and tabs ----------
   Both mark the current item with aria-current, aria-pressed or :checked, never color alone. */
.segmented {
  display: inline-flex; align-items: stretch; gap: 0; padding: 0;
  border-radius: var(--radius-lg); background: var(--fill);
  font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  position: relative; isolation: isolate; max-width: 100%;
}
.segmented > a, .segmented > button, .segmented > label {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5);
  min-height: var(--control-md); padding: 0 var(--space-2-5);
  border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--text-secondary);
  white-space: nowrap; text-decoration: none;
  transition: color var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out);
}
.segmented > :hover { color: var(--text-primary); }
.segmented > [aria-current="page"], .segmented > [aria-current="true"], .segmented > [aria-pressed="true"], .segmented > label:has(input:checked) { color: var(--text-primary); }
.segmented > [aria-pressed="true"], .segmented > label:has(input:checked) { background: var(--selected-pill-bg); box-shadow: var(--selected-pill-shadow); }
/* A current link draws its pill behind its label, so a navigation can slide the pill over from the previous choice.
   It sits a layer below its siblings, so a sliding pill passes under their labels, never over them. */
.segmented > :is([aria-current="page"], [aria-current="true"]) { z-index: 0; }
.segmented > :is([aria-current="page"], [aria-current="true"])::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--selected-pill-bg); box-shadow: var(--selected-pill-shadow);
}
.segmented > label > input { position: absolute; opacity: 0; pointer-events: none; }
.segmented > label:has(input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.segmented .count { color: inherit; font-variant-numeric: tabular-nums; font-weight: var(--weight-regular); }
.segmented--sm > a, .segmented--sm > button, .segmented--sm > label { min-height: var(--control-sm); padding: 0 var(--space-2); border-radius: var(--radius-md); }
.segmented--sm { border-radius: var(--radius-md); }
@media (pointer: coarse) { .segmented--sm > a, .segmented--sm > button, .segmented--sm > label { min-height: var(--control-md); } }
.segmented--wide { display: flex; width: 100%; }
.segmented--scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented--scroll::-webkit-scrollbar { display: none; }
.segmented--scroll > * { flex: none; }
.segmented--wide > * { flex: 1; }
@media (pointer: coarse) { .segmented > a, .segmented > button, .segmented > label { padding: 0 var(--space-3-5); } }

.tabs {
  display: flex; align-items: stretch; gap: var(--space-4);
  box-shadow: inset 0 -1px 0 var(--border-default);
  font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs > a, .tabs > button {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-1-5);
  min-height: var(--control-xl); padding: 0; border: 0; background: none;
  color: var(--text-secondary); white-space: nowrap; text-decoration: none;
  transition: color var(--duration-quick) var(--ease-in-out);
}
.tabs > :hover { color: var(--text-primary); }
.tabs > [aria-current="page"], .tabs > [aria-selected="true"] { color: var(--text-primary); }
.tabs > [aria-current="page"]::after, .tabs > [aria-selected="true"]::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--text-primary);
}
.tabs > a:focus-visible, .tabs > button:focus-visible { outline-offset: -2px; }

/* ---------- Panel ----------
   The grouped-content surface. Header, body and footer share one inset. */
.panel {
  position: relative; min-width: 0;
  padding: var(--space-4);
  border-radius: var(--radius-2xl);
  background: var(--surface-panel);
  box-shadow: var(--shadow-hairline);
}
.panel--flush { padding: 0; overflow: hidden; }
.panel--inset { background: var(--surface-card); box-shadow: inset 0 0 0 .5px var(--border-default); }
.panel-header, .panel-heading {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--control-md); margin-bottom: var(--space-3);
}
.panel-header h2, .panel-heading h2, .panel > h2 {
  font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); letter-spacing: 0;
}
.panel-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* A divided list inside a panel or card */
.divided > * + * { border-top: var(--hairline) solid var(--border-default); }

/* ---------- Table ----------
   A data table sits on the panel surface; headings are quiet, rows separate by hairlines. */
.table-surface {
  position: relative; min-width: 0;
  border-radius: var(--radius-2xl);
  background: var(--surface-panel);
  box-shadow: var(--shadow-hairline);
  overflow: hidden;
}
@supports not (color: light-dark(#000, #fff)) { .table-surface { box-shadow: 0 0 0 1px var(--border-default); } }
.table, .task-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .task-table th { text-align: start; font-weight: var(--weight-medium); }
.table thead th, .task-table thead th {
  height: 36px; padding: var(--space-2) var(--space-3);
  font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg);
  color: var(--text-secondary); white-space: nowrap; vertical-align: middle;
  box-shadow: inset 0 -.5px 0 var(--border-default);
}
.table tbody th, .table td, .task-table tbody th, .task-table td {
  padding: var(--space-2-5) var(--space-3); vertical-align: middle;
  box-shadow: inset 0 -.5px 0 var(--border-default);
  overflow-wrap: anywhere;
}
.table tbody tr:last-child > *, .task-table tbody tr:last-child > * { box-shadow: none; }
.table tbody tr, .task-table tbody tr { transition: background-color var(--duration-quick) var(--ease-standard); }
@media (hover: hover) { .table tbody tr:hover, .task-table tbody tr:hover { background: var(--fill-subtle); } }
.table tr.is-selected, .task-table tr.is-selected, .table tr[aria-selected="true"] { background: var(--fill-selected); }
@media (hover: hover) { .table tr.is-selected:hover, .task-table tr.is-selected:hover { background: var(--fill-selected-hover); } }
.table .numeric, .task-table .numeric { text-align: end; }
.table td small, .task-table td small { display: block; margin-top: var(--space-0-5); }
.table caption { caption-side: bottom; padding: var(--space-2) var(--space-3); text-align: start; font-size: var(--text-caption-lg); color: var(--text-secondary); }

/* ---------- Description list ----------
   Key-value facts. Labels quiet on the left, values readable at body size. */
.facts { display: grid; margin: 0; container-type: inline-size; }
.fact {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-3);
  padding: var(--space-2) 0; align-items: start;
}
.fact + .fact { border-top: var(--hairline) solid var(--border-default); }
.fact dt {
  min-width: 0; color: var(--text-secondary); font-size: var(--text-body-sm); line-height: var(--leading-body-sm);
  overflow-wrap: break-word; hyphens: auto;
}
.fact dt:has(> .icon) { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: var(--space-1-5); }
.fact dt .icon { width: 14px; height: 14px; margin-top: 3px; color: var(--text-tertiary); }
.fact dd { margin: 0; min-width: 0; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fact dd small { display: block; }
.fact dd small:not([class*="tone-"]) { color: var(--text-secondary); }
/* A narrow column stacks the label over its value instead of crushing both. */
@container (max-width: 280px) { .fact { grid-template-columns: minmax(0, 1fr); gap: var(--space-0-5); } }
.facts--small .fact { padding: var(--space-1-5) 0; }
.facts--stacked .fact { grid-template-columns: minmax(0, 1fr); gap: var(--space-0-5); }
.facts--stacked .fact dt { font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); }


/* ---------- Notice ----------
   Inline status message. Tone sets background, icon and text together. */
.notice {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--info-subtle); color: var(--info-text);
  box-shadow: inset 0 0 0 .5px var(--info-border);
  font-size: var(--text-body-sm); line-height: var(--leading-body-sm);
}
.notice > .icon { margin-top: 2px; }
.notice p { margin: 0; text-wrap: pretty; }
.notice a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.notice--information { background: var(--info-subtle); color: var(--info-text); box-shadow: inset 0 0 0 .5px var(--info-border); }
.notice--attention { background: var(--attention-subtle); color: var(--attention-text); box-shadow: inset 0 0 0 .5px var(--attention-border); }
.notice--failure { background: var(--failure-subtle); color: var(--failure-text); box-shadow: inset 0 0 0 .5px var(--failure-border); }
.notice--confirmed { background: var(--confirmed-subtle); color: var(--confirmed-text); box-shadow: inset 0 0 0 .5px var(--confirmed-border); }
.notice--neutral { background: var(--fill); color: var(--text-secondary); box-shadow: none; }

/* ---------- Conversation ----------
   A thread of messages and system events. Inbound sits left, outbound right; meta and receipts stay
   beside the bubble so delivery state is never separated from the words it describes. */
.timeline { list-style: none; display: grid; gap: var(--space-4); margin: 0; padding: var(--space-4); }
.message { display: flex; align-items: flex-end; gap: var(--space-2); max-width: min(560px, 88%); }
.message--outbound { flex-direction: row-reverse; margin-inline-start: auto; }
.message-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--fill); color: var(--text-secondary); box-shadow: inset 0 0 0 .5px var(--border-default);
}
.message-avatar .icon { width: 14px; height: 14px; }
.message-content { display: grid; gap: var(--space-1); min-width: 0; }
.message--outbound .message-content { justify-items: end; }
.message--outbound .message-meta, .message--outbound .message-receipt { justify-content: flex-end; text-align: end; }
.message-meta { display: flex; gap: var(--space-1-5); color: var(--text-tertiary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); }
.message-meta > span:first-child { color: var(--text-secondary); font-weight: var(--weight-medium); }
.message-bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-3xl); border-end-start-radius: var(--radius-sm);
  background: var(--surface-panel-strong); box-shadow: var(--shadow-hairline), inset 0 0 0 .5px var(--border-default);
  color: var(--text-paragraph); font-size: var(--text-body); line-height: var(--leading-body);
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.message--outbound .message-bubble {
  border-end-start-radius: var(--radius-3xl); border-end-end-radius: var(--radius-sm);
  background: var(--fill-hover); box-shadow: none;
}
/* Miisk's own words carry the brand tint; a staff member's stay neutral, so who spoke reads before what was said. */
.message--outbound[data-author="miisk"]:not(.message--call) .message-bubble { background: var(--brand-subtle); }
.message-avatar[data-hue] { background: var(--hue-subtle); color: var(--hue-text); box-shadow: none; }
.message-avatar--mark { background: none; box-shadow: none; }
.message-avatar--mark .wordmark-mark { width: 24px; height: 24px; color: var(--text-primary); }
.message--call .message-bubble { box-shadow: inset 0 0 0 1px var(--border-strong); background: transparent; }
/* The message a page is about (the lead's text being rated): wider, in reading-size type, so it reads before the reply. */
.message--primary { max-width: min(640px, 100%); }
.message--primary .message-bubble { padding: var(--space-3) var(--space-4); font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--text-primary); }
.message-bubble--unavailable { display: flex; gap: var(--space-2); align-items: center; color: var(--text-secondary); font-size: var(--text-body-sm); font-style: italic; }
.message-receipt { display: flex; flex-wrap: wrap; gap: var(--space-0-5) var(--space-2); color: var(--text-tertiary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); }
.message-receipt > span + span::before { content: "·"; margin-inline-end: var(--space-2); color: var(--text-disabled); }
.activity-event {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  color: var(--text-tertiary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); text-align: center;
}
.activity-event::before, .activity-event::after { content: ""; flex: 1; height: var(--hairline); background: var(--border-default); }
.activity-event > .icon { width: 14px; height: 14px; }
.activity-event p { color: var(--text-secondary); font-size: var(--text-caption-lg); }
.activity-event small { display: block; color: var(--text-tertiary); font-size: var(--text-caption-lg); }
/* A call's summary sits under its end marker: quiet, centred, facts at small size. */
.call-summary {
  justify-self: center; width: min(460px, 100%); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: inset 0 0 0 .5px var(--border-default);
}
.call-summary h3 { color: var(--text-secondary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); font-weight: var(--weight-medium); }
.call-summary .badge + .badge { margin-inline-start: var(--space-1); }

/* ---------- Trace ----------
   Why the system acted: one panel per turn, opened by what started it, then its steps as facts. A step's value leads
   with a status word only where its record has one, then plain words, then the internal names in small type.
   Requested, accepted and confirmed stay distinct: green only where a provider record backs the step. */
.trace { list-style: none; display: grid; gap: var(--space-3); margin: 0; padding: 0; }
.trace-turn > .message { margin-bottom: var(--space-3); }
.trace-turn .fact dd > .badge { margin-inline-end: var(--space-1); }

/* ---------- Receipt ----------
   The outcome of a request, tinted by what the record knows: in progress (information, with a spinner), needs a
   person to check (attention, the default), applied (confirmed), not applied (failure). The words carry the state. */
.receipt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-2xl);
  background: var(--attention-subtle); box-shadow: inset 0 0 0 var(--hairline) var(--attention-border);
  outline: none;
}
.receipt > :is(.icon, .spinner) { margin-top: 3px; color: var(--attention-text); }
.receipt :is(h2, h3) { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.receipt p { margin-top: var(--space-0-5); color: var(--text-secondary); max-width: var(--reading-max); }
.receipt-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.receipt--information { background: var(--info-subtle); box-shadow: inset 0 0 0 var(--hairline) var(--info-border); }
.receipt--information > .icon { color: var(--info-text); }
.receipt--confirmed { background: var(--confirmed-subtle); box-shadow: inset 0 0 0 var(--hairline) var(--confirmed-border); }
.receipt--confirmed > .icon { color: var(--confirmed-text); }
.receipt--failure { background: var(--failure-subtle); box-shadow: inset 0 0 0 var(--hairline) var(--failure-border); }
.receipt--failure > .icon { color: var(--failure-text); }

/* Menu items may be links or buttons. */
button.menu-item { width: 100%; border: 0; background: transparent; text-align: start; font: inherit; }
.menu-item:focus-visible { outline-offset: -2px; background: var(--fill-ghost-hover); }
.menu-item > kbd { margin-inline-start: auto; }

/* ---------- Empty state ---------- */
.empty-state {
  display: grid; justify-items: center; gap: var(--space-1-5);
  max-width: 400px; margin: 0 auto; padding: var(--space-10) var(--space-4);
  text-align: center; text-wrap: balance;
}
.empty-state > .icon {
  box-sizing: content-box; width: 16px; height: 16px; padding: var(--space-2); margin-bottom: var(--space-1-5);
  border-radius: var(--radius-lg); background: var(--fill); color: var(--text-secondary);
}
.empty-state h1, .empty-state h2 { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-semibold); }
.empty-state p { color: var(--text-secondary); max-width: 44ch; }
.empty-state .button { margin-top: var(--space-3); }

/* ---------- Dialog ---------- */
.dialog, .action-dialog {
  width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--radius-2xl);
  background: var(--surface-raised); color: var(--text-primary);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.dialog::backdrop, .action-dialog::backdrop { background: var(--surface-backdrop); }
.dialog[open], .action-dialog[open] { display: flex; flex-direction: column; }
.dialog-heading { padding: var(--space-4) var(--space-4) var(--space-3); flex: none; }
.dialog-heading h2 { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-semibold); }
.dialog-heading p { margin-top: var(--space-1); color: var(--text-secondary); }
.dialog-body { padding: 0 var(--space-4) var(--space-4); overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.dialog-body > * + * { margin-top: var(--space-4); }
.dialog-footer {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); flex: none;
  padding: var(--space-3) var(--space-4); box-shadow: inset 0 .5px 0 var(--border-default);
}
.dialog-close {
  position: absolute; inset-inline-end: var(--space-3); top: var(--space-3);
}

/* ---------- Menu ---------- */
.menu {
  min-width: 224px; padding: var(--space-1);
  border-radius: var(--radius-xl);
  background: var(--surface-overlay); color: var(--text-primary);
  box-shadow: var(--shadow-raised);
}
.menu-label { padding: var(--space-1-5) var(--space-2) var(--space-0-5); }
.menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-md); padding: 0 var(--space-1-5) 0 var(--space-2);
  border-radius: var(--radius-md); font-weight: var(--weight-book); color: var(--text-primary);
}
.menu-item:hover, .menu-item.is-highlighted { background: var(--fill-ghost-hover); }
.menu-separator { height: var(--hairline); margin: var(--space-1) 0; background: var(--border-default); }
/* A row that states something rather than doing it, and a quiet value at its end. */
.menu-item--static { color: var(--text-secondary); }
.menu-item--static:hover { background: none; }
.menu-meta { margin-inline-start: auto; color: var(--text-tertiary); font-size: var(--text-caption-lg); font-variant-numeric: tabular-nums; }

/* ---------- Identity ----------
   data-hue names one of six identity hues; a tile, avatar or dot inside reads --hue-*. A hue says what kind of
   thing this is (a channel, a need, one lead across rows), never how it went, and always sits beside its word. */
[data-hue="iris"] { --hue-solid: var(--identity-iris-solid); --hue-text: var(--identity-iris-text); --hue-subtle: var(--identity-iris-subtle); }
[data-hue="cyan"] { --hue-solid: var(--identity-cyan-solid); --hue-text: var(--identity-cyan-text); --hue-subtle: var(--identity-cyan-subtle); }
[data-hue="plum"] { --hue-solid: var(--identity-plum-solid); --hue-text: var(--identity-plum-text); --hue-subtle: var(--identity-plum-subtle); }
[data-hue="pink"] { --hue-solid: var(--identity-pink-solid); --hue-text: var(--identity-pink-text); --hue-subtle: var(--identity-pink-subtle); }
[data-hue="bronze"] { --hue-solid: var(--identity-bronze-solid); --hue-text: var(--identity-bronze-text); --hue-subtle: var(--identity-bronze-subtle); }
[data-hue="gold"] { --hue-solid: var(--identity-gold-solid); --hue-text: var(--identity-gold-text); --hue-subtle: var(--identity-gold-subtle); }

/* A tinted icon tile: the kind of a row's subject, beside its label. */
.tile {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: var(--radius-md);
  background: var(--hue-subtle, var(--fill)); color: var(--hue-text, var(--text-secondary));
}
.tile .icon { width: 13px; height: 13px; }
.tile--lg { width: 32px; height: 32px; border-radius: var(--radius-lg); }
.tile--lg .icon { width: 16px; height: 16px; }
/* The Miisk mark as a kind: quiet, the same size as any tile. */
.tile--mark .wordmark-mark { width: 14px; height: 14px; color: var(--text-secondary); }

/* ---------- Avatar ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--fill); color: var(--text-secondary);
  box-shadow: inset 0 0 0 .5px var(--border-default);
  font-size: var(--text-caption-lg); font-weight: var(--weight-medium);
}
.avatar .icon { width: 14px; height: 14px; }
.avatar[data-hue] { background: var(--hue-subtle); color: var(--hue-text); box-shadow: none; }
.avatar--sm { width: 22px; height: 22px; font-size: var(--text-caption); }
.avatar--sm .icon { width: 12px; height: 12px; }
/* Nobody owns it yet: an outline, never a fill. */
.avatar--empty { background: transparent; color: var(--text-tertiary); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-0-5); color: var(--text-secondary); font-weight: var(--weight-medium); }
.breadcrumb a, .breadcrumb-inline {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  min-height: var(--control-sm); padding: 0 var(--space-1-5); margin: 0 calc(-1 * var(--space-1-5));
  border-radius: var(--radius-md); color: var(--text-secondary);
  transition: background-color var(--duration-quick) var(--ease-standard), color var(--duration-quick) var(--ease-standard);
}
.breadcrumb a:hover, .breadcrumb-inline:hover { background: var(--fill-ghost-hover); color: var(--text-primary); }
.breadcrumb .separator, .breadcrumb > span[aria-hidden="true"] { color: var(--text-disabled); padding: 0 var(--space-1-5); }

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.pagination:empty { display: none; }

/* ---------- Skeleton and spinner ---------- */
.skeleton { display: block; border-radius: var(--radius-sm); background: var(--fill); animation: skeleton-pulse 2s var(--ease-in-out) infinite; }
@keyframes skeleton-pulse { 50% { opacity: .5; } }
.spinner {
  display: inline-block; flex: none; width: 14px; height: 14px; border-radius: var(--radius-full);
  border: 1.5px solid var(--spinner-track); border-top-color: var(--text-secondary);
  animation: spinner-turn 700ms var(--ease-linear) infinite;
}
@keyframes spinner-turn { to { transform: rotate(1turn); } }

/* ---------- Disclosure ---------- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.disclosure > summary {
  display: flex; align-items: center; gap: var(--space-1-5); min-height: var(--control-md);
  color: var(--text-secondary); font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
}
.disclosure > summary:hover { color: var(--text-primary); }
.disclosure > summary .icon { width: 14px; height: 14px; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.disclosure[open] > summary .icon { transform: rotate(90deg); }

/* ---------- Progress and setup card ----------
   A count of steps done, said in words; the bar only repeats it. Neutral, because progress is not an outcome: a step's
   own record carries its result. The card is one link: title and count, the bar, then the next step. */
.progress {
  appearance: none; display: block; width: 100%; height: 4px; border: 0; border-radius: var(--radius-full);
  background: var(--fill); color: var(--inverted); overflow: hidden;
}
.progress::-webkit-progress-bar { background: var(--fill); border-radius: var(--radius-full); }
.progress::-webkit-progress-value { background: var(--inverted); border-radius: var(--radius-full); }
.progress::-moz-progress-bar { background: var(--inverted); border-radius: var(--radius-full); }
.setup-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1-5) var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-xl);
  background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-hairline);
  transition: background-color var(--duration-quick) var(--ease-standard);
}
.setup-card:hover { background: var(--fill-ghost-hover); }
.setup-card-title { min-width: 0; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.setup-card-count { color: var(--text-secondary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.setup-card > .progress { grid-column: 1 / -1; }
/* The title and the count each take the card's width: beside a no-wrap count, a title wrapped into a narrow column. */
.setup-card:not(.setup-card--bar) > .setup-card-title, .setup-card:not(.setup-card--bar) > .setup-card-count { grid-column: 1 / -1; }
.setup-card-next { min-width: 0; color: var(--text-secondary); font-size: var(--text-caption-lg); line-height: var(--leading-caption-lg); }
.setup-card-arrow { width: 14px; height: 14px; color: var(--text-tertiary); transition: transform var(--duration-fast) var(--ease-smooth-out); }
@media (hover: hover) { .setup-card:hover .setup-card-arrow { transform: translateX(2px); } }
/* One line: the title, the count and the arrow, for a narrow header. */
.setup-card--bar { grid-template-columns: minmax(0, 1fr) auto auto; padding: var(--space-2) var(--space-3); }
.setup-card--bar > .progress, .setup-card--bar .setup-card-next, .setup-card--bar .setup-card-done { display: none; }

/* ---------- Environment label ----------
   Says where the person is: synthetic data, a fake provider, a preview. Never green. */
.env-label {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full);
  background: var(--fill); color: var(--text-secondary);
  font-size: var(--text-caption-lg); font-weight: var(--weight-medium); white-space: nowrap;
}
.env-label .icon { width: 13px; height: 13px; }
.env-label--attention { background: var(--attention-subtle); color: var(--attention-text); }

/* ---------- Forced colors ----------
   Windows High Contrast drops shadows and backgrounds; give every edge and selection a real border. */
@media (forced-colors: active) {
  input[type="checkbox"], input[type="radio"] { appearance: auto; box-shadow: none; }
  input[type="checkbox"]::before, input[type="radio"]::before { display: none; }
  .button, .panel, .table-surface, .badge, .notice, .dialog, .menu, .segmented, .env-label, kbd, .tile, .avatar, .setup-card, .progress { border: 1px solid CanvasText; }
  :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) { border: 1px solid CanvasText; }
  .segmented > [aria-pressed="true"], .segmented > [aria-current], .tabs > [aria-current="page"], tr.is-selected, .is-highlighted { outline: 2px solid Highlight; outline-offset: -2px; }
}
/* Miisk design system: motion. transitions.dev hooks, timed from the motion tokens.
   JS reads --modal-close-dur and --dropdown-close-dur, so those names are part of the contract. */

:root {
  --modal-open-dur: var(--duration-fast);
  --modal-close-dur: var(--duration-quick);
  --modal-scale: var(--scale-large);
  --modal-scale-close: var(--scale-large);
  --modal-ease: var(--ease-smooth-out);
  --dropdown-open-dur: var(--duration-fast);
  --dropdown-close-dur: var(--duration-quick);
  --dropdown-pre-scale: var(--scale-medium);
  --dropdown-closing-scale: var(--scale-tiny);
  --dropdown-ease: var(--ease-smooth-out);
  --text-swap-dur: var(--duration-quick);
  --text-swap-translate-y: var(--distance-micro);
  --text-swap-blur: var(--blur-small);
  --text-swap-ease: var(--ease-in-out);
}

/* 06 modal: scale up on open, a softer scale down on close; the backdrop fades with it. */
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal::backdrop { opacity: 0; transition: opacity var(--modal-open-dur) var(--modal-ease); }
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-open::backdrop { opacity: 1; }
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}
.t-modal.is-closing::backdrop { opacity: 0; transition: opacity var(--modal-close-dur) var(--modal-ease); }

/* 05 menu dropdown: grows from its trigger. */
.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }
.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

/* 04 text states swap: a status word changes in place. */
.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter    var(--text-swap-dur) var(--text-swap-ease),
    opacity   var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}

/* 16 tabs sliding: the selected pill travels between options in place. */
.t-tabs { position: relative; }
.t-tabs-pill {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%;
  border-radius: inherit;
  background: var(--selected-pill-bg);
  box-shadow: var(--selected-pill-shadow);
  transform: translateX(var(--pill-x, 0));
  width: var(--pill-w, 0);
  transition: transform var(--duration-fast) var(--ease-smooth-out), width var(--duration-fast) var(--ease-smooth-out);
  pointer-events: none;
}
.t-tabs.is-measured > [aria-pressed="true"] { background: transparent; box-shadow: none; }

/* 07 panel reveal: content that arrives in an existing region, such as a new timeline entry. */
@keyframes t-reveal { from { opacity: 0; transform: translateY(calc(-1 * var(--distance-micro))); filter: blur(var(--blur-small)); } }

/* Arrival, settle and confirmation. From-only keyframes, so each ends on the element's own styles. A surface applies
   them once, to the change that caused them (a navigation, a new entry, a read-back), and only under
   prefers-reduced-motion: no-preference; a re-read of the same view never replays them. */
@keyframes t-rise { from { opacity: 0; transform: translateY(var(--distance-base)); } }
@keyframes t-slide-in { from { opacity: 0; transform: translateX(var(--distance-medium)); } }
@keyframes t-grow-x { from { transform: scaleX(0); } }
@keyframes t-grow-y { from { transform: scaleY(0); } }
/* A wash fades a tint out of something that just changed; --wash picks the role (brand for new, confirmed for applied). */
@keyframes t-wash { from { background-color: var(--wash, var(--brand-subtle)); } }
/* Inset, like the receipts' own hairline, so the ring thins into it instead of switching to it. */
@keyframes t-ring { from { box-shadow: inset 0 0 0 2px var(--ring, var(--brand-border)); } }
/* A small confirmation lands with a spring. Only for an outcome the record already supports. */
@keyframes t-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .t-modal, .t-modal::backdrop, .t-dropdown, .t-text-swap, .t-tabs-pill { transition: none !important; }
}