/*
  getafjob design system. Layers, from weakest to strongest:
    tokens      custom properties: color, type, space, radius, elevation, motion, z-index
    base        element defaults
    layout, components   page styles of the old views in app.css, until each page is rebuilt
    ui          components of internal/web/views/ui (class prefix ui-), stronger than the old page styles
    utilities
  Themes: light by default, dark from the system setting, both overridable with <html data-theme="light|dark">.
  Contrast pairs are checked by TestTokenContrast (internal/web/views/ui).
*/
@layer tokens, base, layout, components, ui, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    /* neutral */
    --bg: #f6f6f3;
    --surface: #ffffff;
    --surface-2: #f0f0ec;
    --sunken: #e9e9e4;
    --border: #d9d9d2;
    --border-strong: #8a8b85;
    --text: #1b1c1e;
    --text-2: #43454a;
    --text-3: #5f6268;

    /* accent and states: base color, soft background, text on soft background */
    --accent: #0b6e72;
    --accent-hover: #085558;
    --accent-soft: #e0f0f0;
    --accent-text: #0a5f62;
    --on-accent: #ffffff;
    --success: #1d6b3a;
    --success-soft: #e3f2e8;
    --success-text: #1a5f34;
    --warning: #8a5300;
    --warning-soft: #fbefd9;
    --warning-text: #7a4900;
    --danger: #b3261e;
    --danger-hover: #8f1e18;
    --danger-soft: #fbe6e4;
    --danger-text: #9e211a;
    --info: #2554a8;
    --info-soft: #e5ecf8;
    --info-text: #214a95;
    --focus: #0b6e72;

    /* avatars */
    --avatar-0: #0b6e72;
    --avatar-1: #2554a8;
    --avatar-2: #7a3e9d;
    --avatar-3: #8a5300;
    --avatar-4: #1d6b3a;
    --avatar-5: #a12d5a;

    /* typography */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --leading: 1.5;
    --leading-tight: 1.25;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 600;

    /* space, 4 px steps */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* shape */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-full: 999px;
    --control-h: 2.5rem;
    --control-h-sm: 2rem;

    /* elevation */
    --shadow-1: 0 1px 2px rgb(20 20 18 / 0.06), 0 1px 1px rgb(20 20 18 / 0.04);
    --shadow-2: 0 4px 12px rgb(20 20 18 / 0.08), 0 1px 3px rgb(20 20 18 / 0.06);
    --shadow-3: 0 12px 32px rgb(20 20 18 / 0.16), 0 2px 6px rgb(20 20 18 / 0.08);

    /* motion */
    --dur-fast: 120ms;
    --dur: 200ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    /* stacking */
    --z-sticky: 10;
    --z-nav: 20;
    --z-dock: 30;
    --z-toast: 60;
    --z-tooltip: 70;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #121314;
      --surface: #1a1b1d;
      --surface-2: #222326;
      --sunken: #0d0e0f;
      --border: #34363b;
      --border-strong: #7c7f86;
      --text: #ededeb;
      --text-2: #c3c4c7;
      --text-3: #a0a2a7;
      --accent: #5cc2c6;
      --accent-hover: #82d4d7;
      --accent-soft: #11383a;
      --accent-text: #7fd3d6;
      --on-accent: #062023;
      --success: #6fcf8f;
      --success-soft: #133222;
      --success-text: #86dba2;
      --warning: #f0b35a;
      --warning-soft: #3a2a10;
      --warning-text: #f5c27a;
      --danger: #ff8a7f;
      --danger-hover: #ffaaa1;
      --danger-soft: #3d1a17;
      --danger-text: #ffa69d;
      --info: #8fb4ff;
      --info-soft: #172540;
      --info-text: #a9c4ff;
      --focus: #5cc2c6;
      --avatar-0: #1d7f83;
      --avatar-1: #3563b8;
      --avatar-2: #8a4cae;
      --avatar-3: #9a6210;
      --avatar-4: #2b7a48;
      --avatar-5: #b13b69;
      --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
      --shadow-2: 0 4px 12px rgb(0 0 0 / 0.45);
      --shadow-3: 0 12px 32px rgb(0 0 0 / 0.55);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #121314;
    --surface: #1a1b1d;
    --surface-2: #222326;
    --sunken: #0d0e0f;
    --border: #34363b;
    --border-strong: #7c7f86;
    --text: #ededeb;
    --text-2: #c3c4c7;
    --text-3: #a0a2a7;
    --accent: #5cc2c6;
    --accent-hover: #82d4d7;
    --accent-soft: #11383a;
    --accent-text: #7fd3d6;
    --on-accent: #062023;
    --success: #6fcf8f;
    --success-soft: #133222;
    --success-text: #86dba2;
    --warning: #f0b35a;
    --warning-soft: #3a2a10;
    --warning-text: #f5c27a;
    --danger: #ff8a7f;
    --danger-hover: #ffaaa1;
    --danger-soft: #3d1a17;
    --danger-text: #ffa69d;
    --info: #8fb4ff;
    --info-soft: #172540;
    --info-text: #a9c4ff;
    --focus: #5cc2c6;
    --avatar-0: #1d7f83;
    --avatar-1: #3563b8;
    --avatar-2: #8a4cae;
    --avatar-3: #9a6210;
    --avatar-4: #2b7a48;
    --avatar-5: #b13b69;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.45);
    --shadow-3: 0 12px 32px rgb(0 0 0 / 0.55);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 0ms;
      --dur: 0ms;
    }
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Component classes set display; the hidden attribute must still win. */
  [hidden] {
    display: none !important;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: var(--weight-normal) var(--text-md) / var(--leading) var(--font);
    font-variant-numeric: tabular-nums;
  }

  h1,
  h2,
  h3 {
    line-height: var(--leading-tight);
    font-weight: var(--weight-bold);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-4);
  }

  h2 {
    font-size: var(--text-xl);
    margin: 0 0 var(--space-3);
  }

  h3 {
    font-size: var(--text-lg);
    margin: 0 0 var(--space-2);
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: var(--accent-text);
    text-underline-offset: 0.15em;
  }

  a:hover {
    color: var(--accent-hover);
  }

  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  input,
  select,
  textarea,
  button {
    font: inherit;
    color: inherit;
  }

  code,
  kbd {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  kbd {
    padding: 0 var(--space-1);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
  }
}

@layer ui {
  .ui-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .ui-icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    vertical-align: -0.25em;
  }

  /* tones: soft background, readable text, base color for borders and dots */
  .ui-tone-neutral { --tone: var(--text-3); --tone-soft: var(--surface-2); --tone-text: var(--text-2); }
  .ui-tone-accent { --tone: var(--accent); --tone-soft: var(--accent-soft); --tone-text: var(--accent-text); }
  .ui-tone-success { --tone: var(--success); --tone-soft: var(--success-soft); --tone-text: var(--success-text); }
  .ui-tone-warning { --tone: var(--warning); --tone-soft: var(--warning-soft); --tone-text: var(--warning-text); }
  .ui-tone-danger { --tone: var(--danger); --tone-soft: var(--danger-soft); --tone-text: var(--danger-text); }
  .ui-tone-info { --tone: var(--info); --tone-soft: var(--info-soft); --tone-text: var(--info-text); }

  /* buttons */
  .ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-weight: var(--weight-medium);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease);
  }

  .ui-btn-sm {
    min-height: var(--control-h-sm);
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
  }

  .ui-btn-primary {
    background: var(--accent);
    color: var(--on-accent);
  }

  .ui-btn-primary:hover {
    background: var(--accent-hover);
    color: var(--on-accent);
  }

  .ui-btn-secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
  }

  .ui-btn-secondary:hover {
    background: var(--surface-2);
    color: var(--text);
  }

  .ui-btn-ghost {
    background: transparent;
    color: var(--text-2);
  }

  .ui-btn-ghost:hover {
    background: var(--surface-2);
    color: var(--text);
  }

  .ui-btn-danger {
    background: var(--danger);
    color: var(--surface);
  }

  .ui-btn-danger:hover {
    background: var(--danger-hover);
    color: var(--surface);
  }

  .ui-btn-icon {
    width: var(--control-h);
    padding: 0;
  }

  .ui-btn:disabled,
  .ui-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .ui-btn[aria-busy="true"],
  .ui-btn.htmx-request {
    position: relative;
    color: transparent;
    pointer-events: none;
  }

  .ui-btn[aria-busy="true"]::after,
  .ui-btn.htmx-request::after {
    content: "";
    position: absolute;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid var(--text-3);
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-spin 0.7s linear infinite;
  }

  .ui-btn-primary[aria-busy="true"]::after,
  .ui-btn-primary.htmx-request::after,
  .ui-btn-danger[aria-busy="true"]::after,
  .ui-btn-danger.htmx-request::after {
    border-color: var(--on-accent);
    border-right-color: transparent;
  }

  @keyframes ui-spin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-btn[aria-busy="true"]::after,
    .ui-btn.htmx-request::after {
      animation-duration: 2s;
    }
  }

  /* fields */
  .ui-field,
  .ui-fieldset {
    display: grid;
    gap: var(--space-1);
    margin: 0 0 var(--space-4);
  }

  .ui-fieldset {
    border: 0;
    padding: 0;
    min-width: 0;
  }

  .ui-label {
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    padding: 0;
  }

  .ui-req {
    color: var(--danger-text);
    margin-inline-start: var(--space-1);
  }

  .ui-hint {
    margin: 0;
    color: var(--text-3);
    font-size: var(--text-sm);
  }

  .ui-error {
    display: flex;
    gap: var(--space-1);
    align-items: flex-start;
    margin: 0;
    color: var(--danger-text);
    font-size: var(--text-sm);
  }

  .ui-input {
    width: 100%;
    min-height: var(--control-h);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease);
  }

  .ui-input[type="file"] {
    padding: calc(var(--space-1) + 1px) var(--space-2);
    cursor: pointer;
  }

  .ui-input[type="file"]::file-selector-button {
    margin-inline-end: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    cursor: pointer;
  }

  .ui-input::placeholder {
    color: var(--text-3);
  }

  .ui-input:hover {
    border-color: var(--text-2);
  }

  .ui-input:focus-visible {
    outline-offset: 0;
    border-color: var(--focus);
  }

  .ui-input:disabled {
    background: var(--surface-2);
    color: var(--text-3);
    cursor: not-allowed;
  }

  .ui-input[aria-invalid="true"] {
    border-color: var(--danger);
    border-width: 2px;
  }

  .ui-textarea {
    min-height: 6rem;
    resize: vertical;
  }

  .ui-select {
    position: relative;
    display: block;
  }

  .ui-select select {
    appearance: none;
    padding-inline-end: var(--space-8);
  }

  .ui-select .ui-icon {
    position: absolute;
    inset-inline-end: var(--space-2);
    top: 50%;
    translate: 0 -50%;
    pointer-events: none;
    color: var(--text-3);
  }

  .ui-check {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-2);
    align-items: start;
    margin: 0 0 var(--space-2);
  }

  .ui-check input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.2rem 0 0;
    accent-color: var(--accent);
  }

  .ui-check .ui-hint {
    grid-column: 2;
  }

  .ui-options {
    display: grid;
  }

  .ui-inline .ui-options {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-4);
  }

  .ui-switch input {
    appearance: none;
    position: relative;
    width: 2.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    border-radius: var(--radius-full);
    background: var(--border-strong);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
  }

  .ui-switch input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.25rem - 4px);
    height: calc(1.25rem - 4px);
    border-radius: 50%;
    background: var(--surface);
    transition: translate var(--dur) var(--ease);
  }

  .ui-switch input:checked {
    background: var(--accent);
  }

  .ui-switch input:checked::before {
    translate: 1rem 0;
  }

  .ui-switch input:disabled,
  .ui-check input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  /* badges and pills */
  .ui-badge,
  .ui-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.0625rem var(--space-2);
    border-radius: var(--radius-full);
    background: var(--tone-soft);
    color: var(--tone-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.5;
    white-space: nowrap;
  }

  .ui-badge {
    border-radius: var(--radius-sm);
  }

  .ui-pill-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--tone);
  }

  @media (prefers-reduced-motion: no-preference) {
    .ui-pill-live .ui-pill-dot {
      animation: ui-pulse 1.6s ease-in-out infinite;
    }
  }

  @keyframes ui-pulse {
    50% { opacity: 0.35; }
  }

  .ui-count {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 0.3rem;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1.25rem;
    text-align: center;
  }

  /* alerts */
  .ui-alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--tone);
    border-inline-start-width: 4px;
    border-radius: var(--radius-md);
    background: var(--tone-soft);
    color: var(--text);
  }

  .ui-alert > .ui-icon {
    color: var(--tone-text);
    margin-top: 0.15rem;
  }

  .ui-alert p {
    margin: 0;
  }

  .ui-alert-title {
    font-weight: var(--weight-bold);
  }

  /* cards */
  .ui-card {
    position: relative;
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
  }

  .ui-card-head {
    margin-bottom: var(--space-3);
  }

  .ui-card-title {
    font-size: var(--text-lg);
    margin: 0;
  }

  .ui-card-sub {
    margin: var(--space-1) 0 0;
    color: var(--text-3);
    font-size: var(--text-sm);
  }

  .ui-card-link .ui-card-title a {
    color: var(--text);
    text-decoration: none;
  }

  .ui-card-link .ui-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .ui-card-link:hover {
    border-color: var(--border-strong);
  }

  .ui-card-link:has(a:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  .ui-card-link a:focus-visible {
    outline: none;
  }

  /* tables */
  .ui-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .ui-table caption {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    font-weight: var(--weight-bold);
  }

  .ui-table th,
  .ui-table td {
    padding: var(--space-2) var(--space-4);
    text-align: start;
    border-top: 1px solid var(--border);
    vertical-align: top;
  }

  .ui-table th {
    background: var(--surface-2);
    color: var(--text-2);
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  .ui-table tbody tr:hover {
    background: var(--surface-2);
  }

  .ui-table .ui-end {
    text-align: end;
  }

  .ui-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: inherit;
    text-decoration: none;
  }

  .ui-sort .ui-icon {
    width: 1em;
    height: 1em;
    color: var(--text-3);
  }

  th[aria-sort="ascending"] .ui-sort,
  th[aria-sort="descending"] .ui-sort {
    color: var(--text);
  }

  th[aria-sort="ascending"] .ui-icon,
  th[aria-sort="descending"] .ui-icon {
    color: var(--accent-text);
  }

  @media (max-width: 40rem) {
    .ui-table .ui-narrow {
      display: none;
    }
  }

  /* tabs */
  .ui-tabs {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: thin;
    box-shadow: inset 0 -1px var(--border);
    margin-bottom: var(--space-4);
  }

  .ui-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 2px solid transparent;
    color: var(--text-2);
    text-decoration: none;
    white-space: nowrap;
  }

  .ui-tab:hover {
    color: var(--text);
    border-bottom-color: var(--border-strong);
  }

  .ui-tab[aria-current="page"] {
    color: var(--text);
    font-weight: var(--weight-medium);
    border-bottom-color: var(--accent);
  }

  /* empty and loading */
  .ui-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-4);
    text-align: center;
    color: var(--text-2);
  }

  .ui-empty-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-3);
  }

  .ui-empty-title {
    margin: 0;
    color: var(--text);
    font-weight: var(--weight-bold);
  }

  .ui-empty-text {
    margin: 0 0 var(--space-2);
    max-width: 36rem;
  }

  .ui-skeleton {
    display: grid;
    gap: var(--space-2);
  }

  .ui-skeleton-line {
    display: block;
    height: 0.875rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
  }

  .ui-skeleton-line:last-child {
    width: 60%;
  }

  @media (prefers-reduced-motion: no-preference) {
    .ui-skeleton-line {
      animation: ui-pulse 1.4s ease-in-out infinite;
    }
  }

  /* pagination */
  .ui-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-4) 0;
  }

  .ui-pager ul {
    display: flex;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ui-page,
  .ui-page-gap {
    display: grid;
    place-items: center;
    min-width: var(--control-h-sm);
    height: var(--control-h-sm);
    padding: 0 var(--space-2);
    border-radius: var(--radius-md);
    color: var(--text-2);
    text-decoration: none;
  }

  .ui-page:hover {
    background: var(--surface-2);
    color: var(--text);
  }

  .ui-page[aria-current="page"] {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: var(--weight-bold);
  }

  /* avatar */
  .ui-avatar {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    flex: none;
  }

  .ui-avatar-0 { background: var(--avatar-0); }
  .ui-avatar-1 { background: var(--avatar-1); }
  .ui-avatar-2 { background: var(--avatar-2); }
  .ui-avatar-3 { background: var(--avatar-3); }
  .ui-avatar-4 { background: var(--avatar-4); }
  .ui-avatar-5 { background: var(--avatar-5); }

  /* progress */
  .ui-progress {
    display: grid;
    gap: var(--space-1);
  }

  .ui-progress-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }

  .ui-progress-head span {
    color: var(--text-3);
  }

  .ui-progress progress {
    appearance: none;
    width: 100%;
    height: 0.5rem;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--surface-2);
    overflow: hidden;
  }

  .ui-progress progress::-webkit-progress-bar {
    background: var(--surface-2);
  }

  .ui-progress progress::-webkit-progress-value {
    background: var(--tone);
    border-radius: var(--radius-full);
  }

  .ui-progress progress::-moz-progress-bar {
    background: var(--tone);
    border-radius: var(--radius-full);
  }

  /* KPI tiles */
  .ui-kpi {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--tone);
    border-radius: var(--radius-lg);
  }

  .ui-kpi p {
    margin: 0;
  }

  .ui-kpi-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .ui-kpi-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.1;
  }

  .ui-kpi-hint {
    color: var(--text-3);
    font-size: var(--text-sm);
  }

  .ui-kpi-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }

  /* dialogs and drawers */
  .ui-dialog {
    width: min(32rem, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100dvh - 2 * var(--space-8));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-3);
  }

  .ui-dialog::backdrop {
    background: rgb(10 10 10 / 0.5);
  }

  .ui-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border);
  }

  .ui-dialog-head h2 {
    margin: 0;
    font-size: var(--text-lg);
  }

  .ui-dialog-body {
    padding: var(--space-5);
  }

  .ui-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }

  .ui-drawer {
    margin: 0 0 0 auto;
    width: min(28rem, 100vw);
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border-width: 0 0 0 1px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .ui-dialog[open] {
      animation: ui-fade-in var(--dur) var(--ease);
    }

    .ui-drawer[open] {
      animation: ui-slide-in var(--dur) var(--ease);
    }
  }

  @keyframes ui-fade-in {
    from { opacity: 0; translate: 0 0.5rem; }
  }

  @keyframes ui-slide-in {
    from { translate: 100% 0; }
  }

  /* menus (popover, anchored to the button that opens them) */
  .ui-menu {
    display: inline-block;
  }

  .ui-menu-list {
    min-width: 12rem;
    margin: var(--space-1) 0 0;
    padding: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-2);
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline;
  }

  .ui-menu-end {
    position-area: block-end span-inline-start;
  }

  .ui-menu-list form {
    margin: 0;
  }

  .ui-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .ui-menu-item:hover,
  .ui-menu-item:focus-visible {
    background: var(--surface-2);
    color: var(--text);
  }

  .ui-menu-list hr {
    margin: var(--space-1) 0;
    border: 0;
    border-top: 1px solid var(--border);
  }

  /* tooltips */
  .ui-tip {
    position: relative;
    display: inline-flex;
  }

  .ui-tip-text {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    left: 50%;
    translate: -50% 0;
    z-index: var(--z-tooltip);
    width: max-content;
    max-width: 16rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--text);
    color: var(--bg);
    font-size: var(--text-xs);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease);
  }

  .ui-tip:hover .ui-tip-text,
  .ui-tip:focus-within .ui-tip-text {
    opacity: 1;
    visibility: visible;
  }

  /* toasts */
  .ui-toasts {
    position: fixed;
    inset-inline-end: var(--space-4);
    bottom: var(--space-4);
    z-index: var(--z-toast);
    display: grid;
    gap: var(--space-2);
    width: min(24rem, calc(100vw - 2 * var(--space-4)));
  }

  .ui-toast {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--tone);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-2);
  }

  .ui-toast > .ui-icon {
    color: var(--tone-text);
    margin-top: 0.15rem;
  }

  .ui-toast p {
    margin: 0;
  }

  .ui-toast:not(.ui-tone-danger) {
    animation: ui-toast-out var(--dur) var(--ease) 6s forwards;
  }

  @keyframes ui-toast-out {
    to { opacity: 0; visibility: hidden; }
  }

  .ui-drawer-start {
    margin: 0 auto 0 0;
    border-width: 0 1px 0 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .ui-drawer-start[open] {
      animation-name: ui-slide-in-start;
    }
  }

  @keyframes ui-slide-in-start {
    from { translate: -100% 0; }
  }

  .ui-menu-note,
  .ui-menu-heading {
    margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-1);
    color: var(--text-3);
    font-size: var(--text-xs);
  }

  .ui-menu-heading {
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .ui-menu-item[aria-pressed="true"] {
    color: var(--accent-text);
    font-weight: var(--weight-medium);
  }

  .ui-menu-item[aria-pressed="true"]::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-inline-start: auto;
    border-radius: 50%;
    background: var(--accent);
  }

  .ui-toast-close {
    width: var(--control-h-sm);
    min-height: var(--control-h-sm);
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) 0 auto;
  }

  /* app shell (ADR 0025): top bar, sidebar, content, phone tab bar */
  body.shell {
    --top-h: 3.5rem;
    --side-w: 15rem;
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-rows: var(--top-h) 1fr;
    grid-template-areas: "top top" "side main";
    min-height: 100dvh;
  }

  body.shell.nav-collapsed {
    --side-w: 4rem;
  }

  .shell-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-toast);
    height: 3px;
    background: var(--accent);
    transform-origin: left;
    scale: 0 1;
    opacity: 0;
  }

  .is-navigating .shell-progress {
    opacity: 1;
    scale: 0.8 1;
    transition: scale 3s cubic-bezier(0.1, 0.6, 0.2, 1), opacity var(--dur-fast);
  }

  .shell .skip {
    position: fixed;
    top: var(--space-2);
    left: var(--space-2);
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    translate: 0 -200%;
  }

  .shell .skip:focus {
    translate: 0 0;
  }

  .shell-top {
    grid-area: top;
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  .shell-brand {
    color: var(--text);
    font-weight: var(--weight-bold);
    text-decoration: none;
    margin-inline-end: var(--space-4);
  }

  .shell-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 1 26rem;
    min-width: 0;
    min-height: var(--control-h-sm);
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    color: var(--text-3);
    cursor: pointer;
  }

  .shell-search span {
    flex: 1;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-search:hover {
    border-color: var(--border-strong);
  }

  .shell-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
  }

  .shell-user {
    padding: 0 var(--space-2);
  }

  /* notification bell (#185) */
  .shell-bell-btn {
    position: relative;
  }

  .shell-bell-count {
    position: absolute;
    top: 0.125rem;
    inset-inline-end: 0.125rem;
    min-width: 1.125rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.125rem;
    text-align: center;
  }

  .shell-bell-menu {
    width: min(24rem, calc(100vw - 2 * var(--space-4)));
    max-height: min(32rem, 80dvh);
    overflow-y: auto;
  }

  .shell-bell-head {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
  }

  .act-list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .act-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    align-items: center;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
  }

  .act-item:hover {
    background: var(--surface-2);
  }

  .act-icon {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--tone-soft);
    color: var(--tone-text);
  }

  .act-body {
    display: grid;
    min-width: 0;
  }

  .act-title {
    font-weight: 600;
  }

  .act-meta {
    overflow: hidden;
    color: var(--text-2);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .act-time {
    color: var(--text-2);
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .act-side {
    display: grid;
    gap: var(--space-1);
    justify-items: end;
  }

  .act-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent);
  }

  .act-page {
    display: grid;
    gap: var(--space-4);
    max-width: 48rem;
  }

  .act-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
  }

  .act-head h1 {
    margin: 0;
  }

  .act-feed {
    display: grid;
    gap: var(--space-4);
  }

  .act-day h2 {
    margin: 0 0 var(--space-2);
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .shell-user-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shell-side {
    grid-area: side;
    position: sticky;
    top: var(--top-h);
    height: calc(100dvh - var(--top-h));
    overflow-y: auto;
    padding: var(--space-3) var(--space-2);
    background: var(--surface);
    border-right: 1px solid var(--border);
  }

  .shell-nav ul {
    display: grid;
    gap: 2px;
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
  }

  .shell-group {
    margin: var(--space-3) 0 var(--space-1);
    padding: 0 var(--space-3);
    color: var(--text-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .shell-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 2.25rem;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-2);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
  }

  .shell-link:hover {
    background: var(--surface-2);
    color: var(--text);
  }

  .shell-link[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: var(--weight-medium);
  }

  .shell-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-count {
    min-width: 1.25rem;
    padding: 0 0.3rem;
    border-radius: var(--radius-full);
    background: var(--warning-soft);
    color: var(--warning-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1.25rem;
    text-align: center;
  }

  .nav-collapsed .shell-side .shell-label,
  .nav-collapsed .shell-side .shell-group {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .nav-collapsed .shell-side .shell-link {
    position: relative;
    justify-content: center;
    padding: 0;
  }

  .nav-collapsed .shell-side .shell-count {
    position: absolute;
    top: 0;
    right: 0.2rem;
    min-width: 1rem;
    line-height: 1rem;
  }

  .shell-content {
    grid-area: main;
    min-width: 0;
  }

  .shell-drawer-btn,
  .shell-bottom {
    display: none;
  }

  #nav-drawer {
    width: min(18rem, 85vw);
  }

  #nav-drawer .ui-dialog-body {
    padding: var(--space-2);
  }

  .shell-dock {
    position: fixed;
    inset-inline-end: var(--space-4);
    bottom: var(--space-4);
    z-index: var(--z-dock);
  }

  .shell-dock:empty,
  body:has([data-live-center]) .shell-dock {
    display: none;
  }

  .shell-dock[data-dock-side="left"] {
    inset-inline-start: calc(var(--side-w) + var(--space-4));
    inset-inline-end: auto;
  }

  @media (max-width: 63.99rem) {
    .shell-dock[data-dock-side="left"] {
      inset-inline-start: var(--space-4);
    }
  }

  /* command palette */
  .shell-palette {
    width: min(36rem, calc(100vw - 2 * var(--space-4)));
    margin-top: 12vh;
  }

  .palette-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
  }

  .palette-input {
    flex: 1;
    min-width: 0;
    min-height: var(--control-h);
    border: 0;
    background: none;
    font-size: var(--text-lg);
  }

  .palette-input:focus-visible {
    outline: none;
  }

  .palette-list {
    max-height: 50vh;
    overflow-y: auto;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
  }

  .palette-list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none;
  }

  .palette-list a:hover,
  .palette-list [aria-selected="true"] a {
    background: var(--accent-soft);
    color: var(--accent-text);
  }

  .palette-hint {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--text-3);
    font-size: var(--text-xs);
  }

  @media (max-width: 63.99rem) {
    body.shell,
    body.shell.nav-collapsed {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "top" "main";
    }

    .shell-side,
    .shell-collapse-btn,
    .shell-user-name,
    .shell-search kbd {
      display: none;
    }

    .shell-drawer-btn {
      display: inline-flex;
    }

    .shell-brand {
      margin-inline-end: var(--space-1);
    }

    .shell-search {
      flex: 1 1 auto;
    }

    .shell-content {
      padding-bottom: 4.5rem;
    }

    /* the top bar holds menu, brand, search, bell and avatar: on a phone the chevron and gaps give way */
    .shell-user > .ui-icon {
      display: none;
    }

    .shell-actions {
      gap: 0;
    }

    /* the phone tab bar covers the bottom of the page: sticky bars stand on top of it (--bottom-h) */
    body.shell {
      --bottom-h: calc(3.8rem + env(safe-area-inset-bottom));
    }

    .shell-bottom {
      position: fixed;
      inset: auto 0 0;
      min-height: var(--bottom-h);
      z-index: var(--z-nav);
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      padding: var(--space-1) var(--space-1) max(var(--space-1), env(safe-area-inset-bottom));
      background: var(--surface);
      border-top: 1px solid var(--border);
    }

    .shell-bottom .shell-link {
      position: relative;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      min-height: 3.25rem;
      padding: 0 var(--space-1);
      font-size: var(--text-xs);
    }

    .shell-bottom .shell-label {
      flex: none;
      max-width: 100%;
    }

    .shell-bottom .shell-count {
      position: absolute;
      top: var(--space-1);
      left: calc(50% + 0.5rem);
      min-width: 1rem;
      line-height: 1rem;
    }

    .shell-dock {
      bottom: 5rem;
    }

    .ui-toasts {
      bottom: 5rem;
    }
  }

  @media (max-width: 26rem) {
    .shell-search {
      flex: 0 0 auto;
    }

    .shell-search span {
      display: none;
    }
  }

  /* live views, live center and dock (#173) */
  .live-screen {
    display: grid;
    gap: var(--space-2);
  }

  .live-screen .screen-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--sunken);
    aspect-ratio: 16 / 10;
  }

  .live-screen canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .live-screen .live-status {
    margin: 0;
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .live-screen[data-mode="interactive"] .screen-frame {
    border-color: var(--warning);
    box-shadow: 0 0 0 2px var(--warning);
  }

  .live-screen-thumb .live-status,
  .live-screen-dock .live-status {
    order: 2;
    font-size: var(--text-xs);
  }

  .live-lead {
    color: var(--text-2);
  }

  .live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* saved searches (#231) */
  .searches {
    display: grid;
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .search-item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
  }

  .search-item + .search-item {
    border-block-start: 1px solid var(--border);
  }

  .search-main {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    min-inline-size: 0;
  }

  .search-name {
    color: var(--text);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .search-actions,
  .search-rename {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
  }

  .search-actions form {
    margin: 0;
  }

  .search-rename .ui-field {
    margin: 0;
  }

  .search-rename .ui-input {
    inline-size: min(14rem, 60vw);
  }

  .live-queue {
    margin-block-start: var(--space-8);
  }

  .live-queue h2 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-lg);
  }

  .live-queue-list {
    display: grid;
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .live-queue-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
  }

  .live-queue-item + .live-queue-item {
    border-block-start: 1px solid var(--border);
  }

  .live-queue-item[data-paused] .live-queue-text a {
    color: var(--text-2);
  }

  .live-queue-pos {
    min-inline-size: 1.5rem;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }

  .live-queue-text {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    align-items: center;
    min-inline-size: 0;
  }

  .live-queue-text a {
    color: var(--text);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .live-queue-actions {
    display: flex;
    gap: var(--space-1);
  }

  @media (max-width: 40rem) {
    .live-queue-item {
      grid-template-columns: auto 1fr;
    }

    .live-queue-actions {
      grid-column: 2;
    }
  }

  .live-card {
    position: relative;
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .live-card:hover {
    border-color: var(--border-strong);
  }

  .live-card-waiting {
    border-color: var(--warning);
  }

  .live-card-body {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
  }

  .live-card-title {
    margin: 0;
    font-size: var(--text-md);
  }

  .live-card-title a {
    color: var(--text);
    text-decoration: none;
  }

  .live-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .live-card:has(a:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  .live-card-title a:focus-visible {
    outline: none;
  }

  .live-card-company {
    margin: 0;
    color: var(--text-3);
    font-size: var(--text-sm);
  }

  .live-focus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--space-6);
  }

  .live-back {
    margin: 0 0 var(--space-2);
  }

  .live-back a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .live-focus-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    color: var(--text-2);
  }

  .live-actions {
    display: grid;
    gap: var(--space-2);
  }

  .live-actions .ui-btn,
  .live-actions form {
    width: 100%;
    justify-content: flex-start;
  }

  .live-others-title {
    margin-top: var(--space-6);
    font-size: var(--text-md);
  }

  .live-others {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .live-other {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none;
  }

  .live-other:hover {
    background: var(--surface-2);
  }

  @media (max-width: 63.99rem) {
    .live-focus {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .dock {
    --dock-w: 22rem;
    width: min(var(--dock-w), calc(100vw - 2 * var(--space-4)));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-3);
  }

  .dock[hidden] {
    display: none;
  }

  .dock:not(.dock-open) {
    width: auto;
  }

  [data-dock-size="sm"] .dock {
    --dock-w: 16rem;
  }

  [data-dock-size="lg"] .dock {
    --dock-w: 36rem;
  }

  .dock-tools {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  .dock-sizes {
    display: flex;
    gap: 2px;
    margin-inline-end: auto;
  }

  .dock-sizes [aria-pressed="true"] {
    background: var(--accent-soft);
    color: var(--accent-text);
  }

  .dock-head {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
  }

  .dock-toggle {
    display: inline-flex;
    flex: 1;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h-sm);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: var(--weight-medium);
    cursor: pointer;
    --tone: var(--accent);
  }

  .dock-toggle .ui-icon {
    margin-inline-start: auto;
    transition: rotate var(--dur) var(--ease);
  }

  .dock-open .dock-toggle .ui-icon {
    rotate: 180deg;
  }

  @media (prefers-reduced-motion: no-preference) {
    .dock-toggle .ui-pill-dot {
      animation: ui-pulse 1.6s ease-in-out infinite;
    }
  }

  .dock-body {
    display: grid;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-3);
  }

  .dock-body[hidden] {
    display: none;
  }

  .dock-runs {
    display: grid;
    gap: var(--space-1);
    max-height: 9rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dock-run {
    display: grid;
    width: 100%;
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    text-align: start;
    cursor: pointer;
  }

  .dock-run:hover {
    background: var(--surface-2);
  }

  .dock-run[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
  }

  .dock-run-waiting .dock-run-title::after {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-inline-start: var(--space-2);
    border-radius: 50%;
    background: var(--warning);
    vertical-align: middle;
  }

  .dock-run-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dock-run-company {
    color: var(--text-3);
    font-size: var(--text-xs);
  }

  /* dashboard (#174) */
  .dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .dash-head h1 {
    margin: 0;
  }

  .dash {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-4);
  }

  .dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: var(--space-3);
  }

  @media (max-width: 40rem) {
    .dash-kpis .ui-kpi {
      padding: var(--space-3);
    }

    .dash-kpis .ui-kpi-value {
      font-size: var(--text-xl);
    }

    .dash-kpis .ui-kpi-hint {
      display: none;
    }
  }

  .dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-4);
  }

  .dash-panel {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    min-width: 0;
  }

  .dash-panel h2 {
    font-size: var(--text-lg);
  }

  .dash-quiet {
    color: var(--text-3);
  }

  .dash-list,
  .dash-runs {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dash-runs {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: var(--space-3);
  }

  .dash-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none;
  }

  .dash-item:hover {
    background: var(--surface-2);
    color: var(--text);
  }

  .dash-item > .ui-icon {
    color: var(--text-3);
  }

  .dash-item-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--tone-soft);
    color: var(--tone-text);
  }

  .dash-item-body {
    display: grid;
    flex: 1;
    min-width: 0;
  }

  .dash-item-title {
    overflow: hidden;
    font-weight: var(--weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dash-item-meta {
    overflow: hidden;
    color: var(--text-3);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dash-more {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
  }

  .dash-crawl {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    color: var(--text-3);
    font-size: var(--text-sm);
  }

  .dash-stages {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
  }

  .dash-stages div {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    text-align: center;
  }

  .dash-stages dt {
    color: var(--text-2);
    font-size: var(--text-xs);
  }

  .dash-stages dd {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
  }

  .dash-trend {
    margin: 0;
  }

  .dash-trend svg {
    display: block;
    width: 100%;
    height: 3rem;
  }

  .dash-bar {
    fill: var(--border);
  }

  .dash-bar-on {
    fill: var(--success);
  }

  .dash-trend figcaption {
    margin-top: var(--space-1);
    color: var(--text-3);
    font-size: var(--text-sm);
  }

  /* job list (#175) */
  .jobs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .jobs-head h1 {
    margin: 0;
  }

  .jobs-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }

  .jobs-tools .crawl-status-bar {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
  }

  .jobs-tools .crawl-status-bar form {
    margin: 0;
  }

  .jobs-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: 0 var(--space-3);
    align-items: end;
    padding: var(--space-3) var(--space-4) 0;
    margin-bottom: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .jobs-filter-search {
    grid-column: 1 / -1;
  }

  .jobs-filters .ui-field {
    margin-bottom: var(--space-3);
  }

  .jobs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }

  @media (min-width: 75rem) {
    .jobs-layout {
      grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem);
    }
  }

  .jobs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
  }

  .jobs-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
    border: 1px solid var(--accent);
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: var(--text-sm);
    text-decoration: none;
  }

  .jobs-chip:hover {
    color: var(--accent-hover);
  }

  .jobs-chip .ui-icon {
    width: 1em;
    height: 1em;
  }

  .jobs-count {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-weight: var(--weight-medium);
  }

  .jobs-bulk {
    position: sticky;
    top: calc(var(--top-h, 3.5rem) + var(--space-2));
    z-index: var(--z-sticky);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  .jobs-bulk-active {
    border-color: var(--accent);
    background: var(--accent-soft);
  }

  .jobs-bulk-count {
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .jobs-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .job-rows {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--border);
    overflow: hidden;
  }

  .job-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
  }

  .job-row:hover {
    background: var(--surface-2);
  }

  .job-row-current {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .job-check {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--accent);
  }

  .job-row-link {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: var(--space-1) 0;
    color: var(--text);
    text-decoration: none;
  }

  .job-row-link:hover .job-row-title {
    text-decoration: underline;
  }

  .job-row-title {
    font-weight: var(--weight-medium);
  }

  .job-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    color: var(--text-3);
    font-size: var(--text-sm);
  }

  .job-facts span + span::before {
    content: "·";
    margin-inline-end: var(--space-2);
  }

  .job-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1);
  }

  .jobs-keys {
    margin: var(--space-2) 0 0;
    color: var(--text-3);
    font-size: var(--text-xs);
  }

  .job-panel {
    position: sticky;
    top: calc(var(--top-h, 3.5rem) + var(--space-3));
    max-height: calc(100dvh - var(--top-h, 3.5rem) - 2 * var(--space-3));
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .job-panel:empty {
    display: none;
  }

  .job-panel-hint {
    margin: 0;
    padding: var(--space-8) var(--space-5);
    color: var(--text-3);
    text-align: center;
  }

  .job-panel-inner {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
  }

  .job-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .job-panel-title {
    margin: 0;
  }

  .job-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .job-panel-actions form {
    margin: 0;
  }

  .job-panel-sub {
    margin: var(--space-2) 0 0;
    font-size: var(--text-md);
  }

  .job-reasons {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
  }

  .job-reasons li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .job-reason-hard {
    color: var(--danger-text);
  }

  .job-reason-points {
    font-weight: var(--weight-bold);
    white-space: nowrap;
  }

  .job-panel-text {
    margin: 0;
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .job-panel-more {
    margin: 0;
  }

  /* below the side by side width the open job covers the list as a sheet */
  @media (max-width: 74.99rem) {
    .job-panel:not(:has(.job-panel-inner)) {
      display: none;
    }

    .job-panel:has(.job-panel-inner) {
      position: fixed;
      inset: var(--top-h, 3.5rem) 0 0;
      z-index: var(--z-nav);
      max-height: none;
      border-radius: 0;
      border-width: 1px 0 0;
      box-shadow: var(--shadow-3);
    }
  }

  .jobs-dialog-text {
    margin-top: 0;
    color: var(--text-2);
  }

  .jobs-blocklist {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
  }

  .jobs-blocklist li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .jobs-blocklist-pattern {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .jobs-blocklist form,
  .jobs-block-form {
    margin: 0;
  }

  /* applications: list and detail */
  .apps-search {
    max-width: 32rem;
    margin-bottom: var(--space-3);
  }

  .apps-groups {
    margin-bottom: var(--space-3);
  }

  .apps-title {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .apps-company,
  .apps-step,
  .apps-when {
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .apps-company {
    display: block;
  }

  .app-crumbs {
    display: flex;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-2);
  }

  .app-head {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .app-head-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .app-title {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .app-company {
    margin: var(--space-1) 0 0;
    color: var(--text-2);
  }

  .app-next {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  .app-next-text {
    margin: 0;
  }

  .app-reason {
    display: block;
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .app-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .app-actions form {
    margin: 0;
  }

  .app-tab {
    display: grid;
    gap: var(--space-4);
  }

  .app-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-3);
    margin: 0;
  }

  .app-facts dt {
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .app-facts dd {
    margin: 0;
    font-weight: 600;
  }

  .app-list {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-4);
  }

  .app-value {
    overflow-wrap: anywhere;
  }

  .app-source {
    white-space: nowrap;
  }

  .app-source code {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-2);
    font-size: 0.75rem;
  }

  .app-hint {
    margin: 0;
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .app-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .app-step {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) 1fr;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
  }

  .app-step time {
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .app-step-title,
  .app-step-detail {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .app-step-detail {
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .app-evidence {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: var(--space-4);
  }

  .app-shot {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }

  .app-notes {
    display: grid;
    gap: var(--space-3);
    max-width: 40rem;
  }

  .app-live {
    display: grid;
    gap: var(--space-3);
  }

  @media (max-width: 40rem) {
    .app-step {
      grid-template-columns: 1fr;
      gap: var(--space-1);
    }
  }

  /* needs input: inbox beside the open run */
  .ni-layout {
    display: grid;
    gap: var(--space-4);
    align-items: start;
  }

  @media (min-width: 64rem) {
    .ni-layout {
      grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    }
  }

  .ni-items {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ni-item-link {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
  }

  .ni-item-link:hover {
    border-color: var(--accent);
  }

  .ni-item-current .ni-item-link {
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .ni-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .ni-hint {
    color: var(--text-2);
  }

  .ni-panel {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
  }

  .ni-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
  }

  .ni-work {
    display: grid;
    gap: var(--space-4);
    align-items: start;
  }

  @media (min-width: 90rem) {
    .ni-work-live {
      grid-template-columns: minmax(20rem, 28rem) minmax(0, 1fr);
    }
  }

  .ni-form,
  .ni-questions {
    display: grid;
    gap: var(--space-4);
  }

  .ni-question {
    display: grid;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
  }

  .ni-more {
    margin: 0;
    font-size: var(--text-sm);
  }

  /* on small screens the open run replaces the list */
  @media (max-width: 63.99rem) {
    .ni-layout-open .ni-list {
      display: none;
    }
  }

  @media (min-width: 64rem) {
    .ni-back {
      display: none;
    }
  }

  /* job detail */
  .jd {
    display: grid;
    gap: var(--space-4);
  }

  .jd-head {
    display: grid;
    gap: var(--space-2);
  }

  .jd-head .job-badges {
    justify-content: flex-start;
  }

  .jd-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .jd-actions form {
    margin: 0;
  }

  .jd-grid {
    display: grid;
    gap: var(--space-4);
    align-items: start;
  }

  @media (min-width: 64rem) {
    .jd-grid {
      grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    }
  }

  .jd-main,
  .jd-side {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
  }

  .jd-text {
    max-width: 70ch;
    overflow-wrap: anywhere;
  }

  .jd-text p,
  .jd-text ul {
    margin: 0 0 var(--space-3);
  }

  .jd-skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
  }

  .jd-skills form {
    margin: 0;
  }

  .jd-breakdown {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .jd-break-row {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: var(--text-sm);
  }

  .jd-preview {
    display: grid;
    gap: var(--space-4);
  }

  .jd-fields {
    margin: 0;
    border-top: 1px solid var(--border);
  }

  .jd-field {
    display: grid;
    grid-template-columns: minmax(6rem, 2fr) 3fr;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
  }

  .jd-field dt {
    color: var(--text-2);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
  }

  .jd-field dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1);
    margin: 0;
    min-width: 0;
  }

  .jd-more summary {
    cursor: pointer;
    font-weight: 600;
  }

  .jd-answers {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
  }

  .jd-answers dt {
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .jd-answers dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  /* approvals */
  .appr-all {
    margin: 0;
  }

  .appr-rows {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .appr-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .appr-row .job-check {
    margin-top: var(--space-1);
  }

  .appr-main {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
  }

  .appr-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: var(--space-1) 0;
    padding: 0;
    list-style: none;
  }

  /* Reasons are sentences: they wrap instead of pushing the page wider than a phone. */
  .appr-reasons li {
    min-width: 0;
  }

  .appr-reasons .ui-badge {
    white-space: normal;
  }

  .appr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    grid-column: 2;
  }

  .appr-actions form {
    margin: 0;
  }

  @media (min-width: 48rem) {
    .appr-row {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .appr-actions {
      grid-column: auto;
    }
  }

  /* pipeline */
  .pl {
    display: grid;
    gap: var(--space-3);
  }

  .pl-jump {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
  }

  .pl-cols {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 1fr);
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
  }

  .pl-col {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-height: 12rem;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    scroll-snap-align: start;
  }

  .pl-col-target {
    border-style: dashed;
    border-color: var(--accent);
  }

  .pl-col-over {
    background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--accent);
  }

  .pl-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-size: var(--text-sm);
  }

  .pl-cards {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pl-col,
  .pl-card {
    min-width: 0;
  }

  .pl-card .ui-badge {
    white-space: normal;
  }

  .pl-card {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .pl-dragging {
    position: relative;
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-3);
    opacity: 0.92;
  }

  .pl-card-top {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .pl-handle {
    display: inline-flex;
    padding: var(--space-1);
    color: var(--text-2);
    cursor: grab;
    touch-action: none;
  }

  .pl-dragging .pl-handle {
    cursor: grabbing;
  }

  .pl-card-title {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: start;
    overflow-wrap: anywhere;
    cursor: pointer;
  }

  .pl-card-title:hover {
    color: var(--accent);
  }

  @media (min-width: 64rem) {
    .pl-jump {
      display: none;
    }

    .pl-cols {
      grid-auto-flow: row;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      overflow-x: visible;
    }
  }

  @media (max-width: 63.99rem) {
    .pl-cols {
      grid-auto-columns: minmax(16rem, 85%);
    }
  }

  /* CV import review */
  .rv-intro {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
  }

  .rv-section,
  .rv-box {
    margin-bottom: var(--space-5, 2rem);
  }

  .rv-box,
  .rv-item {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .rv-item {
    margin-bottom: var(--space-3);
  }

  .rv-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
  }

  .rv-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
  }

  .rv-strong {
    font-weight: 600;
  }

  .rv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    gap: var(--space-3);
  }

  .rv-mt-sm {
    margin-top: var(--space-2);
  }

  .rv-mt {
    margin-top: var(--space-3);
  }

  .rv-note {
    margin: var(--space-1) 0 0 var(--space-5, 1.5rem);
    font-size: var(--text-sm);
  }

  .rv-note-first {
    margin-top: var(--space-2);
  }

  .rv-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  /* candidate hub: profile, documents, answers, texts */
  .cand {
    display: grid;
    gap: var(--space-4);
  }

  .cand-head {
    display: grid;
    gap: var(--space-3);
  }

  .cand-head h1 {
    margin: 0;
  }

  .cand-meter {
    display: grid;
    gap: var(--space-2);
    max-width: 40rem;
  }

  .cand-gaps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
  }

  .cand-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .cand-tools .apps-search {
    flex: 1;
    margin: 0;
  }

  .cand-list {
    display: grid;
    gap: var(--space-2);
  }

  .cand-item,
  .cand-doc {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .cand-item > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3);
    cursor: pointer;
    list-style: none;
  }

  .cand-item > summary::-webkit-details-marker {
    display: none;
  }

  .cand-item[open] > summary {
    border-bottom: 1px solid var(--border);
  }

  .cand-item > form {
    padding: var(--space-3);
  }

  .cand-item-title {
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .cand-item-preview {
    grid-column: 1 / -1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .cand-item[open] .cand-item-preview {
    display: none;
  }

  .cand-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
  }

  .cand-upload .ui-field {
    flex: 1 1 14rem;
    margin: 0;
  }

  /* the button lines up with the controls, below the labels */
  .cand-upload > .ui-btn {
    margin-top: calc(var(--text-sm) * var(--leading) + var(--space-1));
  }

  .cand-doc {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .cand-doc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .cand-doc-head form {
    margin: 0;
  }

  .cand-variant summary {
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .cand-variant form {
    margin-top: var(--space-3);
  }

  /* settings: section list beside one section */
  .set {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }

  .set-main table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  @media (min-width: 64rem) {
    .set {
      grid-template-columns: 14rem minmax(0, 1fr);
    }

    .set-nav {
      position: sticky;
      top: calc(var(--top-h, 3.5rem) + var(--space-3));
    }
  }

  .set-nav {
    min-width: 0;
  }

  .set-nav-title {
    margin: 0 0 var(--space-2);
    color: var(--text-2);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .set-nav ul {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 63.99rem) {
    .set-nav ul {
      display: flex;
      overflow-x: auto;
    }

    .set-nav .shell-link {
      white-space: nowrap;
    }
  }

  .set-main {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    max-width: 48rem;
  }

  .set-main h1 {
    margin: 0;
  }

  .set-form {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  /* admin console (#183) */
  .adm-invite-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
  }

  @media (min-width: 40rem) {
    .adm-invite-fields {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
  }

  .adm-invite h2,
  .set-main h2 {
    margin: 0;
    font-size: var(--text-md);
  }

  .adm-link {
    display: grid;
    gap: var(--space-2);
  }

  .adm-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .adm-link-row .ui-input {
    flex: 1 1 16rem;
  }

  .adm-list {
    display: grid;
    margin: var(--space-2) 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    list-style: none;
  }

  .adm-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    padding: var(--space-3);
  }

  .adm-row + .adm-row {
    border-top: 1px solid var(--border);
  }

  .adm-who {
    display: grid;
    flex: 1 1 14rem;
    min-width: 0;
  }

  .adm-name {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .adm-meta {
    color: var(--text-2);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
  }

  .adm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .adm-error {
    color: var(--danger-text);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
  }

  .adm-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: end;
    justify-content: space-between;
  }

  .adm-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: end;
  }

  .adm-table {
    max-width: 100%;
    overflow-x: auto;
  }

  /* the wrapper scrolls (focusable, named), not the table as on the settings pages */
  .set-main .adm-table table {
    display: table;
    overflow: visible;
  }

  .adm-audit {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
  }

  .adm-audit time {
    color: var(--text-2);
  }

  .adm-facts {
    display: grid;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .adm-facts > div {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
  }

  .adm-facts > div + div {
    border-top: 1px solid var(--border);
  }

  .adm-facts dt {
    color: var(--text-2);
  }

  .adm-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  /* profile: autosave status and sortable stations (#239) */
  .save-state {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    margin: 0;
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .save-state[data-save-state="saved"] .ui-icon {
    color: var(--success);
  }

  .save-state[data-save-state="invalid"],
  .save-state[data-save-state="conflict"],
  .save-state[data-save-state="error"] {
    color: var(--danger-text);
  }

  .st-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .st-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .st-head h3 {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .st-handle {
    display: grid;
    margin-inline-start: auto;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    cursor: grab;
    touch-action: none;
  }

  .st-handle:hover {
    background: var(--surface-2);
  }

  .st-dragging {
    opacity: 0.7;
    outline: 2px dashed var(--accent);
    outline-offset: 2px;
  }

  .st-dragging .st-handle {
    cursor: grabbing;
  }

  /* pages without sign-in: login, invitation, sign-in link, errors */
  body.pub {
    min-height: 100dvh;
    margin: 0;
    background: var(--bg);
  }

  .pub-main {
    display: grid;
    gap: var(--space-5);
    justify-items: center;
    align-content: start;
    max-width: none;
    min-height: 100dvh;
    padding: clamp(var(--space-5), 8vh, 6rem) var(--space-4) var(--space-5);
  }

  .pub-main:focus {
    outline: none;
  }

  .pub-brand {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: 700;
    text-decoration: none;
  }

  .pub-brand img {
    border-radius: var(--radius-sm);
  }

  /* the card itself is .ui-card; the page sets its width and spacing */
  .pub-card {
    display: grid;
    gap: var(--space-4);
    width: min(100%, 26rem);
  }

  .pub-card-wide {
    width: min(100%, 44rem);
  }

  .pub-head {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    text-align: center;
  }

  .pub-head h1 {
    margin: 0;
    font-size: var(--text-xl);
  }

  .pub-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-text);
  }

  .pub-text {
    margin: 0;
    color: var(--text-2);
  }

  .pub-form {
    display: grid;
    gap: var(--space-4);
  }

  .pub-form .ui-btn,
  .pub-alt .ui-btn {
    justify-content: center;
    width: 100%;
  }

  .pub-alt {
    display: grid;
    gap: var(--space-3);
  }

  .pub-or {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin: 0;
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .pub-or::before,
  .pub-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border);
  }

  .pub-status {
    margin: 0;
    color: var(--text-2);
    font-size: var(--text-sm);
    text-align: center;
  }

  .pub-status:empty {
    display: none;
  }

  .pub-links {
    margin: 0;
    text-align: center;
  }

  .pub-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .app-narrow {
    display: grid;
    gap: var(--space-3);
    max-width: 36rem;
  }

  /* onboarding wizard (#184) */
  .wiz {
    display: grid;
    gap: var(--space-4);
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
  }

  .wiz-head {
    display: grid;
    gap: var(--space-3);
  }

  .wiz-head h1 {
    margin: 0;
  }

  .wiz-kicker {
    margin: 0;
    color: var(--text-2);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .wiz-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
  }

  .wiz-step a,
  .wiz-step [aria-current] {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    color: var(--text-2);
  }

  .wiz-step [aria-current] {
    color: var(--text);
    font-weight: 600;
  }

  .wiz-num {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: var(--text-xs);
  }

  .wiz-step.is-past .wiz-num,
  .wiz-step [aria-current] .wiz-num {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
  }

  @media (max-width: 47.99rem) {
    .wiz-step:not(:has([aria-current])) {
      display: none;
    }
  }

  .wiz-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    min-width: 0;
  }

  .wiz-card h2 {
    margin: 0;
    font-size: var(--text-md);
  }

  .wiz-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
  }

  @media (min-width: 40rem) {
    .wiz-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .wiz-list,
  .wiz-found {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .wiz-found li {
    display: flex;
    gap: var(--space-2);
    align-items: center;
  }

  .wiz-found .ui-icon {
    color: var(--success);
  }

  .wiz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    padding-top: var(--space-2);
  }

  /* on a phone the step's own action comes first and spans the width */
  @media (max-width: 39.99rem) {
    .wiz-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wiz-actions .ui-btn {
      justify-content: center;
    }

    .wiz-actions .ui-btn-primary {
      grid-column: 1 / -1;
      order: -2;
    }

    .wiz-actions [data-setup-skip] {
      order: -1;
    }

    .wiz-actions [data-setup-later] {
      grid-column: 1 / -1;
    }

    .wiz-gap {
      display: none;
    }
  }

  .wiz-gap {
    flex: 1;
  }

  .wiz-crawl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
  }
}

@layer utilities {
  .inline {
    display: inline;
  }
}