/* Mailroom website styles. One stylesheet for both companies.
   The look is switched by <html data-side="eagle|illuminate"> and by the colour scheme.
   Everything that has a colour reads one of the tokens below, so a side is a block of values.

   Two layers, after Apple's Human Interface Guidelines (Materials and Liquid Glass, read
   1 October 2026):
   - The glass layer: the top bar, the navigation, the phone decision bar on a bill, Back to
     bills and the health popover. Regular Liquid Glass, one layer only: it blurs and dims
     what is behind it, with a lit top edge and a soft shadow. Controls on it use plain
     fills, never a second glass. Inline confirmations take the same look as fills, because
     they always open on a content panel.
   - The content layer: cards, lists, tables, the message panel, tiles. Apple's standard
     materials, not glass: thick for anything with text, regular for the small number tiles.
     On a phone they stay solid, to keep the number of blurred layers (and the battery cost
     over the moving background) small.
   The blur only applies inside @supports; without it, with Reduce Transparency, or with
   Increase Contrast every surface is solid. Fills are opaque enough that body text keeps
   4.5 to 1 even if the brightest part of the background sat directly behind (checked for
   all four themes by test/ui-static.test.mjs). Status colours (good, warning, serious,
   critical) mean state only, and always come with an icon and a word. */

/* ---------- tokens: Eagle dark is the default until the server names the side ---------- */

html,
html[data-side="eagle"] {
  color-scheme: dark;

  --page: #07080f;
  --surface: #0d1028;
  --raised: #151b3d;
  --panel: rgba(13, 16, 40, 0.95);
  --panel-raised: rgba(21, 27, 61, 0.95);
  --panel-soft: rgba(13, 16, 40, 0.92);
  --field: rgba(7, 8, 15, 0.55);
  --line: rgba(190, 171, 109, 0.18);
  --control-border: #7f7a68;
  --edge: rgba(236, 232, 218, 0.14);
  --text: #ece8da;
  --text-2: #b9b4a3;
  --muted: #8a8676;
  --accent: #beab6d;
  --accent-text: #d4c285;
  --accent-strong: #d4c285;
  --heading: #ece8da;
  --on-accent: #07080f;
  --button-bg: #beab6d;
  --button-hover: #d4c285;
  --focus: #d4c285;
  --glare: rgba(255, 255, 255, 0.08);
  --good: #3fb27f;
  --warning: #d9a520;
  --serious: #ec8358;
  --critical: #f5767a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 26px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -24px rgba(0, 0, 0, 0.55);
  --material-thick: rgba(13, 16, 40, 0.88);
  --material-regular: rgba(13, 16, 40, 0.8);
  --material-dim: 0.5;
  --glass-fill: rgba(16, 20, 48, 0.66);
  --glass-dim: 0.42;
  --glass-solid: #11153a;
  --glass-border: rgba(236, 232, 218, 0.14);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -12px rgba(0, 0, 0, 0.65);
  --glass-control: rgba(255, 255, 255, 0.08);
  --glass-control-hover: rgba(255, 255, 255, 0.14);
  --glow:
    radial-gradient(1100px 700px at 12% -12%, rgba(0, 9, 112, 0.6), transparent 62%),
    radial-gradient(800px 520px at 100% 0%, rgba(190, 171, 109, 0.12), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(0, 9, 112, 0.32), transparent 65%);
}

html[data-side="illuminate"] {
  color-scheme: dark;

  --page: #0a0a0a;
  --surface: #141414;
  --raised: #1d1d1d;
  --panel: rgba(20, 20, 20, 0.94);
  --panel-raised: rgba(29, 29, 29, 0.95);
  --panel-soft: rgba(20, 20, 20, 0.92);
  --field: rgba(0, 0, 0, 0.45);
  --line: rgba(255, 122, 26, 0.2);
  --control-border: #7a7a7a;
  --edge: rgba(255, 255, 255, 0.12);
  --text: #f2f2f2;
  --text-2: #bdbdbd;
  --muted: #8c8c8c;
  --accent: #ff7a1a;
  --accent-text: #ff9440;
  --accent-strong: #ff9440;
  --heading: #f2f2f2;
  --on-accent: #0a0a0a;
  --button-bg: #ff7a1a;
  --button-hover: #ff9440;
  --focus: #ff9440;
  --glare: rgba(255, 255, 255, 0.08);
  --good: #3fb27f;
  --warning: #d9a520;
  --serious: #ec8358;
  --critical: #f5767a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 26px -8px rgba(0, 0, 0, 0.6), 0 32px 64px -24px rgba(0, 0, 0, 0.65);
  --material-thick: rgba(20, 20, 20, 0.88);
  --material-regular: rgba(20, 20, 20, 0.8);
  --material-dim: 0.5;
  --glass-fill: rgba(22, 22, 22, 0.66);
  --glass-dim: 0.42;
  --glass-solid: #191919;
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --glass-control: rgba(255, 255, 255, 0.08);
  --glass-control-hover: rgba(255, 255, 255, 0.14);
  --glow:
    radial-gradient(900px 600px at 15% -10%, rgba(255, 122, 26, 0.16), transparent 62%),
    radial-gradient(700px 500px at 100% 100%, rgba(255, 122, 26, 0.08), transparent 60%);
}

@media (prefers-color-scheme: light) {
  html,
  html[data-side="eagle"] {
    color-scheme: light;

    --page: #f6f4ec;
    --surface: #ffffff;
    --raised: #f1eee2;
    --panel: rgba(255, 255, 255, 0.96);
    --panel-raised: rgba(251, 250, 245, 0.97);
    --panel-soft: rgba(255, 255, 255, 0.94);
    --field: rgba(255, 255, 255, 0.92);
    --line: rgba(20, 22, 43, 0.14);
    --control-border: #8a8676;
    --edge: rgba(255, 255, 255, 0.95);
    --text: #14162b;
    --text-2: #4a4c63;
    --muted: #666880;
    --accent: #8c7a3e;
    --accent-text: #76662b;
    --accent-strong: #5e5120;
    --heading: #000970;
    --on-accent: #ffffff;
    --button-bg: #76662b;
    --button-hover: #5e5120;
    --focus: #000970;
    --glare: rgba(140, 122, 62, 0.14);
    --good: #17704a;
    --warning: #7f5c00;
    --serious: #a8400c;
    --critical: #b91c28;
    --shadow: 0 1px 2px rgba(20, 22, 43, 0.1), 0 10px 26px -8px rgba(20, 22, 43, 0.16), 0 32px 64px -24px rgba(20, 22, 43, 0.2);
    --material-thick: rgba(255, 255, 255, 0.95);
    --material-regular: rgba(255, 255, 255, 0.92);
    --material-dim: 1.2;
    --glass-fill: rgba(255, 255, 255, 0.8);
    --glass-dim: 1.2;
    --glass-solid: #fbfaf6;
    --glass-border: rgba(20, 22, 43, 0.1);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(20, 22, 43, 0.04);
    --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%);
    --glass-shadow: 0 1px 2px rgba(20, 22, 43, 0.08), 0 12px 32px -12px rgba(20, 22, 43, 0.32);
    --glass-control: rgba(20, 22, 43, 0.06);
    --glass-control-hover: rgba(20, 22, 43, 0.1);
    --glow:
      radial-gradient(900px 600px at 10% -10%, rgba(0, 9, 112, 0.07), transparent 60%),
      radial-gradient(700px 500px at 100% 0%, rgba(140, 122, 62, 0.14), transparent 60%);
  }

  html[data-side="illuminate"] {
    color-scheme: light;

    --page: #fafafa;
    --surface: #ffffff;
    --raised: #f2f2f2;
    --panel: rgba(255, 255, 255, 0.96);
    --panel-raised: rgba(250, 250, 250, 0.97);
    --panel-soft: rgba(255, 255, 255, 0.94);
    --field: rgba(255, 255, 255, 0.92);
    --line: rgba(196, 85, 0, 0.2);
    --control-border: #8a8a8a;
    --edge: rgba(255, 255, 255, 0.95);
    --text: #111111;
    --text-2: #444444;
    --muted: #626262;
    --accent: #c45500;
    --accent-text: #ae4b00;
    --accent-strong: #8f3e00;
    --heading: #111111;
    --on-accent: #ffffff;
    --button-bg: #ae4b00;
    --button-hover: #8f3e00;
    --focus: #ae4b00;
    --glare: rgba(255, 122, 26, 0.14);
    --good: #17704a;
    --warning: #7f5c00;
    --serious: #a8400c;
    --critical: #b91c28;
    --shadow: 0 1px 2px rgba(17, 17, 17, 0.1), 0 10px 26px -8px rgba(17, 17, 17, 0.16), 0 32px 64px -24px rgba(17, 17, 17, 0.2);
    --material-thick: rgba(255, 255, 255, 0.95);
    --material-regular: rgba(255, 255, 255, 0.92);
    --material-dim: 1.2;
    --glass-fill: rgba(255, 255, 255, 0.8);
    --glass-dim: 1.2;
    --glass-solid: #f8f8f8;
    --glass-border: rgba(17, 17, 17, 0.1);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(17, 17, 17, 0.04);
    --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%);
    --glass-shadow: 0 1px 2px rgba(17, 17, 17, 0.08), 0 12px 32px -12px rgba(17, 17, 17, 0.32);
    --glass-control: rgba(17, 17, 17, 0.06);
    --glass-control-hover: rgba(17, 17, 17, 0.1);
    --glow:
      radial-gradient(900px 600px at 15% -10%, rgba(255, 122, 26, 0.1), transparent 60%),
      radial-gradient(700px 500px at 100% 100%, rgba(196, 85, 0, 0.07), transparent 60%);
  }
}

/* Names the 3D flow on the board reads, as aliases of the tokens above. */
html {
  --text-muted: var(--muted);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* The soft halo behind text that sits straight on the moving background: the page colour,
     near black in dark and near white in light. */
  --halo: color-mix(in srgb, var(--page) 92%, transparent);

  /* Liquid Glass and the content materials. The blur softens what is behind, saturate keeps
     its colour, and brightness is the luminosity adjustment: dark glass dims a bright
     background before its fill goes on, so text keeps its contrast over the brightest crest. */
  --glass-filter: blur(20px) saturate(180%) brightness(var(--glass-dim));
  --material-filter: blur(32px) saturate(150%) brightness(var(--material-dim));

  /* One spacing scale, in quarter rems. */
  --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;

  /* Corner radii. Shapes are concentric: a control's radius plus the padding around it is
     its container's radius. Controls in bars are 2.5rem capsules with a 0.5rem inset, so a
     bar is a 1.75rem radius; a sidebar link sits 0.5rem inside a 1.5rem panel, so 1rem. */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 1.5rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;
  --control-h: 2.5rem;
  --bar-inset: var(--space-2);
  --radius-bar: calc(var(--control-h) / 2 + var(--bar-inset));
  --topbar-h: 3.5rem;
}

/* ---------- base ---------- */

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

[hidden] { display: none !important; }

html {
  background: var(--page);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  font: 400 1rem/1.55 var(--font);
  color: var(--text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

* { scrollbar-width: thin; scrollbar-color: var(--control-border) transparent; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { color: var(--heading); line-height: 1.15; }
ul, ol { padding: 0; }
a { color: var(--accent-text); text-underline-offset: 0.18em; }
a:hover { color: var(--text); }
img, svg, canvas { max-width: 100%; }
code, pre { font-family: var(--mono); }

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

/* Headings and panels that are focused by the script, not by the person tabbing. */
[tabindex="-1"]:focus { outline: none; }

.num {
  font-variant-numeric: tabular-nums lining-nums;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.muted { color: var(--muted); }
.hint { margin-top: 0.25rem; font-size: 0.85rem; color: var(--text-2); }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.right { text-align: right !important; }
.slot:empty { display: none; }
.boot { padding: 2rem; text-align: center; color: var(--text-2); }

.eyebrow {
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.label-inline {
  margin-right: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}

/* Single column grids may shrink below their content, so a long word or a wide table can
   never push the page wider than a phone. */
.page, .panel, .block, .reading, .cards, .message-header, .notes, .attachments, .answers,
.form, .field, .notice-body, .row, .meta, .tile, .page-head, .action-controls, .steps,
.lookups, .secret-box, .confirm-inline, .tile-section, .auth-card, .list-error {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- the page background ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* The gradient is also the fallback when the 3D canvas cannot run. */
.backdrop-glow { background: var(--glow); }
.backdrop-canvas { display: block; width: 100%; height: 100%; }

/* ---------- content panels: a hairline border, a lit top edge and layered shadows ----------
   This is the solid base of the content layer. The materials section near the end turns the
   top level panels into Apple's thick material where the browser can blur. */

.list-col,
.detail-col,
.card,
.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--edge), var(--shadow);
}

.tile { background: var(--panel-soft); }

/* ---------- the glass layer: solid base ----------
   The bars, the navigation, the popover and Back to bills float above the content. Without
   blur (an older browser, Reduce Transparency) they are a solid fill with the same lit edge
   and shadow; the materials section adds the translucent glass where it is supported. The top
   bar draws its glass on a pseudo element, so the popover inside it can still blur the page
   beneath. */

.topbar::before,
.nav,
.popover,
.bill-back .btn {
  background-color: var(--glass-solid);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

/* A panel inside a panel sits one step lighter and keeps only the lit edge. */
.detail-col .card,
.card .card,
.popover .card {
  background: var(--panel-raised);
  box-shadow: inset 0 1px 0 var(--edge);
}

.card {
  position: relative;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
}

.card.pad { padding: 1.3rem 1.5rem; }
.cards { list-style: none; display: grid; gap: 1rem; }
.card-title { margin-bottom: 0.4rem; font-size: 1.2rem; font-weight: 400; letter-spacing: -0.01em; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-pill);
  background: var(--panel-raised);
  color: var(--text);
  font: 600 0.9rem/1.1 var(--font);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--edge);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--edge), 0 8px 20px -10px rgba(0, 0, 0, 0.5);
}

.btn:active:not(:disabled) { transform: translateY(0); }
.btn:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 35%, transparent); }

.btn-primary {
  border-color: transparent;
  background: var(--button-bg);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 22px -8px color-mix(in srgb, var(--button-bg) 75%, transparent);
}

.btn-primary:hover:not(:disabled) { background: var(--button-hover); color: var(--on-accent); border-color: transparent; }

.btn-quiet { border-color: transparent; background: transparent; box-shadow: none; }
.btn-quiet:hover:not(:disabled) { box-shadow: none; }
.btn-danger { border-color: var(--critical); }
.btn-small { min-height: 2rem; padding: 0.3rem 0.85rem; font-size: 0.8rem; }
.btn-wide { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.75rem; }

/* ---------- forms ---------- */

.form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.35rem; }

.field label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}

input,
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--text);
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--focus);
  outline: 2px solid var(--focus);
  outline-offset: 0;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--focus) 28%, transparent);
}

.reason { max-width: 28rem; min-height: 2.5rem; }
.link-field { font-family: var(--mono); font-size: 0.85rem; }

.code-input {
  text-align: center;
  font-family: var(--mono);
  font-size: 1.7rem;
  letter-spacing: 0.45em;
  padding-left: 1.2em;
}

.search { display: flex; gap: var(--space-2); }
.search input { flex: 1 1 auto; min-width: 0; padding-inline: var(--space-4); border-radius: var(--radius-pill); }
.search-big input { font-size: 1.05rem; }

/* ---------- chips and notices ---------- */

.chip {
  --chip: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.75rem 0.18rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--chip) 45%, transparent);
  border-radius: var(--radius-pill);
  background: var(--panel-raised);
  background: color-mix(in srgb, var(--chip) 10%, transparent);
  color: var(--chip);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.chip .icon {
  width: 0.95rem;
  height: 0.95rem;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--chip) 85%, transparent));
}

.chip-good { --chip: var(--good); }
.chip-warning { --chip: var(--warning); }
.chip-serious { --chip: var(--serious); }
.chip-critical { --chip: var(--critical); }
.chip-accent { --chip: var(--accent-text); }

.notice {
  --chip: var(--text-2);
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--chip) 50%, transparent);
  border-radius: var(--radius-sm);
  background: var(--panel-raised);
  background-image: linear-gradient(color-mix(in srgb, var(--chip) 10%, transparent), color-mix(in srgb, var(--chip) 10%, transparent));
}

.notice-good { --chip: var(--good); }
.notice-warning { --chip: var(--warning); }
.notice-serious { --chip: var(--serious); }
.notice-critical { --chip: var(--critical); }
.notice-info { --chip: var(--accent-text); }
.notice-icon { width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; color: var(--chip); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--chip) 70%, transparent)); }
.notice-body { display: grid; gap: 0.4rem; min-width: 0; overflow-wrap: anywhere; }
.notice-title { font-weight: 700; }

.empty { color: var(--text-2); }
.page .slot > .empty,
.page > .empty,
.list-error {
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.list-error { display: grid; gap: 0.75rem; margin: 1rem; }

.bullets { display: grid; gap: 0.25rem; margin: 0.25rem 0; padding-left: 1.25rem; }
.inline-icon { margin-right: 0.35rem; color: var(--critical); }

/* ---------- headings ---------- */

.page-head { display: grid; gap: 0.2rem; }

.page-title {
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 200;
  letter-spacing: -0.03em;
}

.page-sub { color: var(--text-2); }

.section-title {
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}

.block { display: grid; gap: 0.6rem; }

.block-title {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
}

.mini-title {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ---------- tables ---------- */

.table-wrap { max-width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }

.kv th {
  width: 11rem;
  padding: 0.45rem 0.9rem 0.45rem 0;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  vertical-align: top;
  color: var(--text-2);
}

.kv td { padding: 0.45rem 0; overflow-wrap: anywhere; }
.kv tr + tr > * { border-top: 1px solid var(--line); }

.grid th {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--control-border);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  color: var(--text-2);
}

.grid td,
.grid tbody th {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  vertical-align: top;
  color: var(--text);
}

.grid select { min-width: 14rem; }

/* ---------- folds, code, progress ---------- */

.fold {
  margin-top: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-raised);
}

.fold > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

.fold > summary::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.fold[open] > summary::before { transform: rotate(45deg); }
.fold-body { padding: 0 0.9rem 0.9rem; }

.plain-block,
.email-body {
  max-width: 100%;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.email-body { font-family: var(--font); font-size: 0.92rem; }

.email-body.collapsed {
  max-height: 45em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
}

.progress {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-sm);
  background: var(--panel-raised);
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 9%, transparent));
}

.spinner {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent-text);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.progress-text { font-weight: 600; }
.progress-hint { margin-top: 0.15rem; font-size: 0.85rem; color: var(--text-2); }
.progress-time { margin-left: 0.4rem; font-weight: 400; color: var(--text-2); }

/* ---------- the frame: top bar, navigation, content ---------- */

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: 600 0.9rem var(--font);
}

.skip-link:focus { top: 0.5rem; }

.app { display: flex; flex-direction: column; min-height: 100vh; padding-right: env(safe-area-inset-right); padding-left: env(safe-area-inset-left); }

/* The top bar floats: a glass bar inset from the edges, sticky on a phone so the page
   scrolls under it. Its controls are capsules of --control-h, inset by --bar-inset, so the
   bar's corners are concentric with theirs. */
.topbar {
  position: sticky;
  top: max(var(--space-2), env(safe-area-inset-top));
  z-index: 30;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: max(var(--space-2), env(safe-area-inset-top)) var(--space-2) 0;
  padding: var(--bar-inset) var(--bar-inset) var(--bar-inset) var(--space-5);
  border-radius: var(--radius-bar);
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

.brand { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-app { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--heading); }

.brand-company {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}

.topbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-left: auto; }
.who { font-size: 0.9rem; color: var(--text-2); }

/* Controls on the glass use fills, never a second glass. */
.topbar .btn-quiet { min-height: var(--control-h); }
.topbar .btn-quiet:hover:not(:disabled) { background: var(--glass-control-hover); border-color: transparent; transform: none; }

.health { position: static; }

.health-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 0.9rem 0 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--glass-control);
  color: var(--text);
  font: 600 0.85rem var(--font);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.health-btn:hover { background: var(--glass-control-hover); }

.health-dot {
  --dot: var(--text-2);
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dot) 18%, transparent);
  color: var(--dot);
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--dot) 75%, transparent);
}

.health-good { --dot: var(--good); }
.health-warning { --dot: var(--warning); }
.health-serious { --dot: var(--serious); }

/* A popover is glass over the content, never over the bar's own glass: it opens below it. */
.popover {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 40;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
}

.popover-title { font-weight: 700; }

.shell { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }

/* The navigation is glass too: a capsule row on phones and tablets, a floating sidebar on a
   desktop. Its links are capsules inside it, the current page tinted with the side's accent. */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) var(--space-2) 0;
  padding: 0.375rem;
  overflow-x: auto;
  border-radius: var(--radius-pill);
}

.nav-list { display: flex; flex: none; gap: 0.125rem; padding: 0; list-style: none; }
.nav-list-agent { padding-left: var(--space-2); border-left: 1px solid var(--line); }

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.375rem;
  padding: var(--space-2) 0.9rem;
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-link:hover { color: var(--text); background: var(--glass-control-hover); }

.nav-link[aria-current="page"] {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.count {
  min-width: 1.5rem;
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-2) 16%, transparent);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.count:empty { display: none; }
.count-alert { background: var(--button-bg); color: var(--on-accent); }

.content { min-width: 0; }

/* ---------- pages (everything except the inbox) ---------- */

.page {
  display: grid;
  gap: 1.1rem;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem 0.75rem 4rem;
}

.page.board { max-width: 76rem; }
.two-up { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }

/* ---------- sign in ---------- */

.auth { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem 1rem; }

.auth-card {
  display: grid;
  gap: 1.1rem;
  width: min(100%, 27rem);
  padding: 2.4rem 2.1rem 2rem;
  border-radius: var(--radius-xl);
}

.brand-large { gap: 0.3rem; margin-bottom: 0.4rem; text-align: center; }

.brand-large .brand-app {
  font-size: clamp(2.3rem, 9vw, 3.2rem);
  font-weight: 200;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-large .brand-app {
    background-image: linear-gradient(115deg, var(--text) 0%, var(--accent-text) 55%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.brand-large .brand-company { font-size: 0.72rem; }
.auth-title { font-size: 1.1rem; font-weight: 500; text-align: center; letter-spacing: 0.01em; }
.lede { color: var(--text-2); text-align: center; }
.auth-links { text-align: center; font-size: 0.9rem; }

.secret-box {
  display: grid;
  gap: 0.4rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-raised);
}

.secret { font-family: var(--mono); font-size: 1.2rem; letter-spacing: 0.08em; overflow-wrap: anywhere; }

/* ---------- inbox: list and message ---------- */

.inbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 0.5rem; }
.inbox[data-pane="list"] .detail-col { display: none; }
.inbox[data-pane="message"] .list-col { display: none; }
.list-col, .detail-col { min-width: 0; border-radius: var(--radius); }

.list-head {
  z-index: 2;
  display: grid;
  gap: 0.6rem;
  padding: 1rem 1rem 0.8rem;
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--panel);
}

.list-head-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.list-title { font-size: 1.7rem; font-weight: 200; letter-spacing: -0.025em; }
.list-count { font-size: 0.8rem; color: var(--text-2); }
.rows { list-style: none; margin: 0; padding: 0; }

.row {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.row:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, transparent); }

.row[aria-current="true"] {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.row-top { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; color: var(--text-2); }
.row-top time { flex: none; }

.row-sender {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.row-subject,
.row-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.row-subject { font-weight: 500; }
.row-line { font-size: 0.85rem; color: var(--text-2); }
.row-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.detail-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  min-height: 14rem;
  padding: 2rem;
  text-align: center;
  color: var(--text-2);
}

.detail-empty .icon { width: 2rem; height: 2rem; }

.panel {
  display: grid;
  gap: 1.4rem;
  max-width: 58rem;
  padding: 1.1rem 1.1rem 4rem;
  animation: slide-in 0.3s ease-out backwards;
}

.panel-bar { display: flex; }

.panel-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.panel-title:focus { outline: none; }

.meta { display: grid; gap: 0.4rem; }
.meta-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

.meta dt {
  padding-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}

.meta dd { overflow-wrap: anywhere; }
.message-header { display: grid; gap: 0.8rem; }
.badges, .status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.status-reason { flex-basis: 100%; color: var(--text-2); }

.reading { display: grid; gap: 0.5rem; }
.reading-meta { font-size: 0.85rem; }
.reading-summary { font-size: 1.1rem; font-weight: 500; }
.reading-reason { color: var(--text-2); }
.gate-route { margin-top: 0.5rem; font-weight: 600; }

.lookups { display: grid; gap: 0.6rem; margin: 0; padding-left: 1.4rem; }
.lookup { overflow-wrap: anywhere; }
.lookup-name { margin-right: 0.5rem; font-weight: 600; }
.lookup-input { display: block; font-size: 0.8rem; white-space: pre-wrap; color: var(--text-2); }

.attachments { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.attachment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-raised);
}

.attachment-main { display: grid; min-width: 0; }
.attachment-name { font-weight: 600; overflow-wrap: anywhere; }
.attachment-error { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--serious); }

.notes { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.note {
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-raised);
}

.note-agent { border-left: 3px solid var(--accent); }
.note-head { margin-bottom: 0.2rem; font-size: 0.85rem; color: var(--text-2); }

.timeline { margin: 0 0 0 0.35rem; padding: 0 0 0 1.1rem; list-style: none; border-left: 1px solid var(--control-border); }

.timeline li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.8rem;
  padding: 0.4rem 0;
  font-size: 0.88rem;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -1.45rem;
  top: 0.85rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.timeline-time { color: var(--text-2); }
.timeline-step { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); align-self: center; }
.timeline-text { flex-basis: 100%; overflow-wrap: anywhere; }

.answers { display: grid; gap: 0.75rem; margin-top: 1rem; }
.answer-q { margin-bottom: 0.5rem; color: var(--text-2); }

/* ---------- actions, plans, rules ---------- */

.action-context { margin-bottom: 0.5rem; font-size: 0.9rem; }
.action-subject { font-weight: 700; }
.action-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.action-desc { flex: 1 1 14rem; font-weight: 600; overflow-wrap: anywhere; }
.action-why, .step-why { margin-top: 0.35rem; color: var(--text-2); overflow-wrap: anywhere; }
.action-note { display: flex; gap: 0.4rem; margin-top: 0.5rem; overflow-wrap: anywhere; }
.action-controls { display: grid; gap: 0.5rem; margin-top: 0.5rem; }

.plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-bottom: 0.5rem; }
.plan-title { font-size: 1.05rem; font-weight: 500; }
.plan-asked, .plan-understanding { margin: 0.4rem 0; overflow-wrap: anywhere; }
.steps { display: grid; gap: 0.8rem; margin: 0.8rem 0; padding-left: 1.5rem; }
.step-text { font-weight: 600; overflow-wrap: anywhere; }
.step-result { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.plan .notice { margin-top: 0.6rem; }

.rule-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.rule-match { font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.rule-effect { margin: 0.4rem 0; }
.rule-meta { margin: 0.3rem 0; font-size: 0.9rem; }

.save-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.save-result { display: inline-flex; align-items: center; gap: 0.35rem; }
/* An inline confirmation is a transient alert, so it takes the glass look: the tint, the lit
   edge and a soft shadow. It always opens on a content panel, so it uses a fill rather than a
   second blur (Apple: nothing stacks glass on glass, and a blur over a solid panel shows
   nothing). Its 2.5rem capsule buttons sit 0.75rem in, so its corners are 2rem. */
.confirm-inline {
  display: grid;
  gap: var(--space-2);
  max-width: 24rem;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--glass-border));
  border-radius: calc(var(--control-h) / 2 + var(--space-3));
  background-color: var(--panel-raised);
  background-image: var(--glass-sheen), linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

.confirm-inline .button-row { margin-top: var(--space-1); }
.confirm-inline :is(input, textarea, select) { border-radius: calc(var(--control-h) / 2); }

/* ---------- board ---------- */

.flow-stage { position: relative; height: 15rem; overflow: hidden; border-radius: var(--radius-sm); }
.flow-canvas { display: block; width: 100%; height: 100%; }

.tile-section { display: grid; gap: 0.6rem; }

.tile-section > .section-title {
  justify-self: start;
  margin: 0;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel);
}

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }

.tile {
  position: relative;
  display: grid;
  gap: 0.45rem;
  padding: 1.35rem 1.15rem 1.15rem;
  border-radius: var(--radius);
}

.tile::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  right: 1.15rem;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.75;
}

.tile-value {
  font-size: clamp(2.5rem, 7vw, 3.8rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--heading);
  font-variant-numeric: tabular-nums lining-nums;
}

.tile-label {
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}

.tile-critical { border-color: color-mix(in srgb, var(--critical) 60%, transparent); }
.tile-critical .tile-label .icon { color: var(--critical); filter: drop-shadow(0 0 5px var(--critical)); }

.feed { margin: 0; padding: 0; list-style: none; }

.feed-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}

.feed-item:first-child { border-top: 0; }
.feed-time { font-size: 0.85rem; color: var(--text-2); }
.feed-line { overflow-wrap: anywhere; }
.feed-item .chip { justify-self: start; }

/* ---------- home ---------- */

.page.home { max-width: 76rem; }

/* Today's mail is drawn straight on the page background: no panel, border or shadow. Only
   the heading gets a soft halo, the same as the graphic's labels, so it stays readable. */
.home-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }

.home-flow-title {
  justify-self: start;
  padding: 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--heading);
  font-weight: 400;
  /* A stronger halo, no pane (Jacob, 1 Oct 2026): a tight edge, then wider soft light. */
  text-shadow: 0 0 1px var(--halo), 0 0 2px var(--halo), 0 0 6px var(--halo), 0 0 14px var(--halo), 0 0 24px var(--halo);
}
/* Where the browser paints the outline behind the letters, the heading gets the same solid
   halo edge as the graphic's labels. */
@supports (paint-order: stroke fill) {
  .home-flow-title { -webkit-text-stroke: 0.3rem var(--halo); paint-order: stroke fill; }
}

.home-flow .flow-stage { height: 17.5rem; }

.home-health { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; color: var(--text-2); }

/* The compact row of today's numbers, much smaller than the board's tiles. */
.mini-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-tiles > li { display: grid; }

.mini-tile {
  display: grid;
  align-content: center;
  gap: 0.1rem;
  padding: 0.55rem 0.8rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  box-shadow: inset 0 1px 0 var(--edge);
  color: var(--text);
  text-decoration: none;
}

a.mini-tile { transition: border-color 0.2s ease; }
a.mini-tile:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

.mini-value {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--heading);
  font-variant-numeric: tabular-nums lining-nums;
}

.mini-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-wrap: anywhere;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-2);
}

.mini-critical { border-color: color-mix(in srgb, var(--critical) 60%, transparent); }
.mini-critical .mini-label .icon { color: var(--critical); }

/* What is waiting for the person signed in. */
.wait-list { margin: 0; padding: 0; list-style: none; }
.wait-item { display: grid; gap: 0.3rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.wait-item:first-child { padding-top: 0; border-top: 0; }
.wait-title { font-weight: 600; overflow-wrap: anywhere; }
.wait-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; overflow-wrap: anywhere; font-size: 0.9rem; color: var(--text-2); }
.wait-amount { font-weight: 600; color: var(--text); }

/* ---------- bill approvals: the list and the bill page ---------- */

/* The lanes (or the approver's three sections) as a row of tabs that scrolls sideways on a phone. */
.lane-tabs {
  display: flex;
  gap: 0.125rem;
  padding: 0.375rem;
  overflow-x: auto;
  border-radius: var(--radius-pill);
}

.lane-tabs .nav-link { flex: none; min-height: 2.75rem; justify-content: flex-start; border-radius: var(--radius-pill); }
.filter-row { max-width: 24rem; }

.bill-list { margin: 0; padding: 0; }

.bill-card {
  display: grid;
  gap: 0.5rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.bill-card:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.bill-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.bill-supplier { min-width: 0; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.bill-amount { flex: none; font-size: 1.15rem; font-weight: 300; letter-spacing: -0.01em; color: var(--heading); }
.bill-card-number { font-size: 0.9rem; color: var(--text-2); overflow-wrap: anywhere; }
.bill-card-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; font-size: 0.9rem; color: var(--text-2); }

/* A reason or an outside change on a card, in the warning colour with an icon and words. */
.bill-flag {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent);
  border-radius: var(--radius-sm);
  background: var(--panel-raised);
  background-image: linear-gradient(color-mix(in srgb, var(--warning) 10%, transparent), color-mix(in srgb, var(--warning) 10%, transparent));
  font-size: 0.9rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.bill-flag-icon { margin-top: 0.15rem; color: var(--warning); }

/* Back to bills is a navigation control, so it is a small glass capsule: it sits straight on
   the moving background, and the glass keeps it readable there in both schemes. */
.bill-back { display: flex; }
.bill-back .btn { border-radius: var(--radius-pill); }
.bill-back .btn:hover:not(:disabled) { border-color: var(--glass-border); box-shadow: var(--glass-highlight), var(--glass-shadow); transform: none; }
.bill-head { gap: 0.5rem; }

.bill-total {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--heading);
}

.bill-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bill-facts { display: flex; flex-wrap: wrap; gap: 0.15rem 1.1rem; }
.bill-notices { display: grid; gap: 0.75rem; }
.bill-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; min-width: 0; }
.bill-buttons { margin-top: 0; }
.bill-confirm { max-width: 36rem; }
.confirm-words { font-weight: 600; overflow-wrap: anywhere; }
.bill-page .fold > summary { min-height: 2.75rem; }
.bill-page .card > .fold:first-child { margin-top: 0; }

.doc { display: grid; gap: 0.75rem; }
.doc-links { margin-top: 0; }

.doc-frame {
  display: block;
  width: 100%;
  height: min(75vh, 60rem);
  min-height: 26rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field);
}

.doc-image { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }

.choices { display: grid; gap: 0.25rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.choice { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; cursor: pointer; }
input[type="radio"] { flex: none; width: 1.3rem; height: 1.3rem; min-height: 0; padding: 0; accent-color: var(--accent); }

.note-refused { border-left: 3px solid var(--serious); }
.note-refusal { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; font-size: 0.9rem; color: var(--serious); }
.reply { display: grid; gap: 0.5rem; margin-top: 1rem; }
.email-scroll { max-height: 28rem; overflow: auto; }

/* The bills made from one email, on the message panel. */
.bill-links { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.bill-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; }

/* ---------- depth and motion ---------- */

/* Lifts and turns toward the pointer; fx.js sets --rx, --ry, --gx and --gy. */
.tilt {
  isolation: isolate;
  transition: transform 0.22s ease-out, border-color 0.25s ease;
}

.tilt:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  transform: perspective(900px) translate3d(0, -3px, 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.tilt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), var(--glare), transparent 65%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.tilt:hover::before { opacity: 1; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: none; }
}

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

.page > *, .auth-card { animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.page > :nth-child(2) { animation-delay: 60ms; }
.page > :nth-child(3) { animation-delay: 120ms; }
.page > :nth-child(4) { animation-delay: 180ms; }
.page > :nth-child(5) { animation-delay: 240ms; }
.tiles > :nth-child(2) { animation-delay: 60ms; }
.tiles > :nth-child(3) { animation-delay: 120ms; }
.tiles > :nth-child(4) { animation-delay: 180ms; }
.tiles > :nth-child(5) { animation-delay: 240ms; }
.tiles > * { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.mini-tiles > :nth-child(2) { animation-delay: 50ms; }
.mini-tiles > :nth-child(3) { animation-delay: 100ms; }
.mini-tiles > :nth-child(4) { animation-delay: 150ms; }
.mini-tiles > :nth-child(5) { animation-delay: 200ms; }
.mini-tiles > * { animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }

/* ---------- wider screens ---------- */

@media (min-width: 560px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .meta-row { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; }
  .feed-item { grid-template-columns: 9.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.3rem 1rem; }
  .timeline-text { flex-basis: auto; }
}

@media (min-width: 700px) {
  .app { height: 100vh; height: 100dvh; }
  .topbar { flex-wrap: nowrap; min-height: var(--topbar-h); margin: var(--space-3) var(--space-3) 0; }
  .health { position: relative; }
  .popover { left: auto; right: 0; top: calc(100% + var(--space-3)); width: min(24rem, calc(100vw - 2rem)); }
  .nav { margin: var(--space-3) var(--space-3) 0; }
  .shell { min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .shell.has-nav { grid-template-rows: auto minmax(0, 1fr); }
  .content { min-height: 0; overflow: auto; }
  .page { padding: 1.5rem 1.25rem 4rem; }

  .content[data-mode="inbox"] { display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .inbox { gap: 0.75rem; padding: 0.75rem; min-height: 0; grid-template-columns: minmax(18rem, 23rem) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .list-head { position: sticky; top: 0; }
  .inbox[data-pane] .list-col,
  .inbox[data-pane] .detail-col { display: block; min-height: 0; overflow: auto; }
  .panel { padding: 1.4rem 1.6rem 4rem; }
  /* Wrapped onto several rows: 2.75rem capsules 0.375rem in, so 1.75rem corners. */
  .lane-tabs { flex-wrap: wrap; overflow-x: visible; border-radius: calc(1.375rem + 0.375rem); }
  .only-narrow { display: none !important; }
  .tile-section > .section-title { margin-left: 0.25rem; }
  .flow-stage { height: 22.5rem; }
  .home-flow .flow-stage { height: 26.25rem; }
}

/* Today's numbers on Home: two across on the narrowest phones, three across on wider phones
   and tablets, all five in one row on a desktop. */
@media (max-width: 419px) {
  .mini-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-tiles > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .mini-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .shell.has-nav { grid-template-columns: 15.5rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }

  /* The sidebar: a floating glass panel. Its links sit --space-2 inside, so their corners
     are the panel's radius less that inset. */
  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin: var(--space-3) 0 var(--space-3) var(--space-3);
    padding: var(--space-2);
    overflow: auto auto;
    border-radius: var(--radius-lg);
  }

  .nav-list { flex-direction: column; }
  .nav-list-agent { padding: var(--space-3) 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .nav-link { justify-content: space-between; padding-inline: var(--space-3); border-radius: calc(var(--radius-lg) - var(--space-2)); }
  .inbox { grid-template-columns: minmax(22rem, 28rem) minmax(0, 1fr); padding-left: 0.75rem; }
}

/* ---------- phones ---------- */

@media (max-width: 699px) {
  .doc-preview { display: none; }
  .card.pad { padding: 1.1rem 1.1rem; }

  /* Approve, Query and Reject stay in reach: a bar fixed to the bottom, above the phone's own
     home bar. A question or a code field opens inside it and scrolls if it is tall. */
  .bill-page.has-bar { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }

  /* It is glass (the materials section adds the blur): it floats --space-2 above the edges,
     and its 2.75rem capsule buttons sit --space-3 in, so its corners are 2.125rem. */
  .bill-page .bill-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    margin: 0 calc(var(--space-2) + env(safe-area-inset-right)) calc(var(--space-2) + env(safe-area-inset-bottom)) calc(var(--space-2) + env(safe-area-inset-left));
    padding: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: calc(1.375rem + var(--space-3));
    background-color: var(--glass-solid);
    background-image: var(--glass-sheen);
    box-shadow: var(--glass-highlight), var(--glass-shadow);
    animation: none;
  }

  /* On the glass, the other buttons and an open question use fills, not another glass. */
  .bill-page .bill-actions .btn:not(.btn-primary) { border-color: transparent; background: var(--glass-control); box-shadow: none; }
  .bill-page .bill-actions .btn:not(.btn-primary):hover:not(:disabled) { background: var(--glass-control-hover); }
  .bill-page .bill-actions .confirm-inline { max-width: none; padding: 0; border: 0; background: none; box-shadow: none; }

  .bill-actions .section-title { display: none; }
  .bill-buttons .btn { flex: 1 1 0; }
  .btn { min-height: 2.75rem; }
  .btn-small { min-height: 2.5rem; }
  .auth-card { padding: 2rem 1.35rem 1.6rem; }
  .kv th { width: 7.5rem; }
  .grid select { min-width: 0; }

  .stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .stack,
  .stack tbody,
  .stack tr,
  .stack td,
  .stack th { display: block; }

  .stack tr { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
  .stack .right { text-align: left !important; }
  .stack td, .stack tbody th { padding: 0.25rem 0; border: 0; }

  .stack td::before,
  .stack tbody th::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-2);
  }
}

/* ---------- approval routing editor ---------- */

.page.routing { max-width: 76rem; }
.routing-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; min-width: 0; }
.route-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.route-state:empty { display: none; }
.route-intro { max-width: 46rem; margin-bottom: 0.9rem; color: var(--text-2); }

.route-kind { display: block; font-size: 0.78rem; color: var(--text-2); }
.route-value { display: block; font-weight: 600; overflow-wrap: anywhere; }
.route-note { display: block; margin-top: 0.35rem; font-size: 0.85rem; font-weight: 400; color: var(--text-2); }
.route-name { display: block; font-weight: 600; }
.route-email { display: block; font-size: 0.8rem; color: var(--text-2); overflow-wrap: anywhere; }
.route-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.route-edit-row td { padding: 1rem 0.8rem; background: var(--panel-raised); }
.route-form { max-width: 40rem; }
.route-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.route-test { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.route-save { max-width: 40rem; }

.route-result {
  display: grid;
  gap: 0.4rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-raised);
  overflow-wrap: anywhere;
}

.route-verdict { font-weight: 600; }

input[type="checkbox"] { flex: none; width: 1.3rem; height: 1.3rem; min-height: 0; padding: 0; accent-color: var(--accent); }

/* Wide enough for a real table: fixed column widths, and it scrolls sideways rather than squeezing
   below 52rem. Narrower than that, the .stack rules turn each rule into a block. */
@media (min-width: 700px) {
  .route-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route-test { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-table { table-layout: fixed; min-width: 52rem; }
  .route-table th,
  .route-table td,
  .route-table tbody th { padding-right: 0.5rem; padding-left: 0.5rem; }
  .route-table thead th:nth-child(1) { width: 8%; }
  .route-table thead th:nth-child(2) { width: 24%; }
  .route-table thead th:nth-child(3) { width: 18%; }
  .route-table thead th:nth-child(4) { width: 18%; }
  .route-table thead th:nth-child(5) { width: 9%; }
  .route-table thead th:nth-child(6) { width: 23%; }
  .route-actions .btn { padding: 0.3rem 0.65rem; font-size: 0.82rem; }
}

/* On a phone the empty answer (no limit) is left out, so each rule is short. */
@media (max-width: 699px) {
  .route-table td.route-empty { display: none; }
  .route-edit-row td { padding: 0.8rem 0; background: transparent; }
}

/* ---------- materials: glass and the content materials, where the browser can blur ----------
   Everything above is the solid base. Only the selectors below ever blur, and only here. */

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  /* Regular Liquid Glass: the top bar, the navigation, the popover and Back to bills. */
  .topbar::before,
  .nav,
  .popover,
  .bill-back .btn {
    background-color: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
  }

  /* The decision bar on a bill is glass on a phone; on a wider screen it is a content card. */
  @media (max-width: 699px) {
    .bill-page .bill-actions {
      background-color: var(--glass-fill);
      -webkit-backdrop-filter: var(--glass-filter);
      backdrop-filter: var(--glass-filter);
    }
  }

  /* The content layer, on wider screens only: thick material for every panel with text,
     regular material for the number tiles. On a phone they keep their solid fill, so only the
     bars blur over the moving background. */
  @media (min-width: 700px) {
    .card,
    .list-col,
    .detail-col {
      background-color: var(--material-thick);
      -webkit-backdrop-filter: var(--material-filter);
      backdrop-filter: var(--material-filter);
    }

    .tile,
    .mini-tile {
      background-color: var(--material-regular);
      -webkit-backdrop-filter: var(--material-filter);
      backdrop-filter: var(--material-filter);
    }

    /* A panel inside a panel is a fill on its parent's material, never a second blur. */
    .detail-col .card,
    .card .card,
    .popover .card {
      background-color: var(--panel-raised);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}

/* ---------- the person's accessibility settings always win ---------- */

/* Reduce Transparency: every glass and material surface turns solid. */
@media (prefers-reduced-transparency: reduce) {
  .topbar::before,
  .nav,
  .popover,
  .bill-back .btn {
    background-color: var(--glass-solid);
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .card,
  .list-col,
  .detail-col,
  .tile,
  .mini-tile {
    background-color: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .detail-col .card,
  .card .card,
  .popover .card { background-color: var(--raised); }

  .confirm-inline { background-image: none; }

  @media (max-width: 699px) {
    .bill-page .bill-actions {
      background-color: var(--glass-solid);
      background-image: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}

/* Increase Contrast: solid fills and clear borders everywhere, and no faint text. */
@media (prefers-contrast: more) {
  html,
  html[data-side] {
    --line: var(--control-border);
    --glass-border: var(--control-border);
    --muted: var(--text-2);
  }

  .topbar::before,
  .nav,
  .popover,
  .bill-back .btn {
    background-color: var(--glass-solid);
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .card,
  .list-col,
  .detail-col,
  .tile,
  .mini-tile {
    background-color: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .detail-col .card,
  .card .card,
  .popover .card { background-color: var(--raised); }

  .confirm-inline { background-image: none; background-color: var(--raised); }

  @media (max-width: 699px) {
    .bill-page .bill-actions {
      background-color: var(--glass-solid);
      background-image: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}

/* ---------- less motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The glass has no moving light; the pointer glare on cards and tiles is the only one. */
  .tilt, .tilt:hover { transform: none; }
  .tilt::before { display: none; }
  .btn:hover:not(:disabled) { transform: none; }
  .spinner { animation: none; border-top-color: var(--accent-text); border-right-color: var(--accent-text); }
}