/* gen_z dashboard. The design system behind these tokens and rules is
   in ../DESIGN.md (measured from the shadcnblocks admin reference); read it
   before changing anything here. Inter is bundled (static/fonts, SIL OFL)
   and there are no external assets or inline styles, so the page works
   offline and under a strict Content-Security-Policy.

   Order: tokens (dark, light, the chat's own), base, the app shell,
   components, pages; then the chat's rules, then the people chips. */

@font-face { font-family: "Inter"; font-weight: 300; font-style: normal; font-display: swap; src: url("/static/fonts/inter-300.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); }

/* ——— tokens ———
   Dark is the default (shadcn "neutral" dark, as measured on the
   reference). theme.js sets data-theme="light" when the person picks it. */
:root {
  --background: #0a0a0a; /* the top bar, outline buttons, the login page */
  --bg: #171717;         /* the content surface (the reference's main is bg-card) */
  --card: #171717;
  --sidebar: #171717;
  --pop: #171717;        /* popovers, menus, dialogs */
  --well: #262626;       /* hover, selected, muted fills */
  --inset: rgba(255, 255, 255, .025); /* boxes inside a card */
  --field: rgba(255, 255, 255, .045); /* input fill (input at 30%) */
  --line: rgba(255, 255, 255, .1);    /* every border and hairline */
  --line-2: rgba(255, 255, 255, .1);
  --edge: rgba(255, 255, 255, .15);   /* input and outline-button borders */
  --track: #262626;
  --row-hover: rgba(38, 38, 38, .5);  /* muted at 50% */
  --ink: #fafafa;
  --ink-2: #d4d4d4;
  --dim: #a1a1a1;        /* muted-foreground */
  --faint: #737373;
  --accent: #e5e5e5;     /* primary */
  --accent-ink: #171717;
  --accent-soft: #262626;
  --link: #fafafa;
  --ring: #737373;
  /* status: always with an icon or a word, never colour alone */
  --ok: #2ec18c;
  --warn: #e9b928;
  --crit: #ff6568;
  --off: #737373;
  --info: #60a5fa;
  --ok-ink: #2ec18c;
  --warn-ink: #e9b928;
  --crit-ink: #ff6568;
  --ok-soft: rgba(46, 193, 140, .1);
  --warn-soft: rgba(233, 185, 40, .1);
  --crit-soft: rgba(255, 101, 104, .1);
  --info-soft: rgba(96, 165, 250, .12);
  /* charts: the reference's chart-2 blue; identity hues for portals and channels */
  --series: #3080ff;
  --c1: #3987e5;
  --c2: #d95926;
  --c3: #199e70;
  --c4: #c98500;
  --teams: #8b8ff0;
  --whatsapp: #2fc56b;
  /* the four status tones of chat outputs (see DESIGN.md) */
  --tone-pending: #d98200;
  --tone-ok: #12903f;
  --tone-failed: #c81e1e;
  --tone-cancelled: #6e6e6e;
  --tone-ink: #ffffff;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --shadow-up: 0 16px 40px -12px rgba(0, 0, 0, .6);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --r: 10px;    /* cards */
  --r-sm: 8px;  /* buttons, inputs, menu items */
  --sb-w: 256px;
  --tracking: normal;
  --body-lh: 20px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  color-scheme: dark;
}
:root[data-theme=light] {
  --background: #ffffff;
  --bg: #ffffff;
  --card: #ffffff;
  --sidebar: #fafafa;
  --pop: #ffffff;
  --well: #f5f5f5;
  --inset: #fafafa;
  --field: transparent;
  --line: #e5e5e5;
  --line-2: #e5e5e5;
  --edge: #e5e5e5;
  --track: #ececec;
  --row-hover: rgba(245, 245, 245, .7);
  --ink: #0a0a0a;
  --ink-2: #404040;
  --dim: #737373;
  --faint: #a3a3a3;
  --accent: #171717;
  --accent-ink: #fafafa;
  --accent-soft: #f5f5f5;
  --link: #0a0a0a;
  --ring: #a1a1a1;
  --ok: #00884b;
  --warn: #dca600;
  --crit: #e40014;
  --off: #a3a3a3;
  --info: #2563eb;
  --ok-ink: #00753f;
  --warn-ink: #8a6a00;
  --crit-ink: #c70011;
  --ok-soft: rgba(0, 136, 75, .08);
  --warn-soft: rgba(220, 166, 0, .12);
  --crit-soft: rgba(228, 0, 20, .07);
  --info-soft: rgba(37, 99, 235, .08);
  --series: #155dfc;
  --shadow-up: 0 16px 40px -12px rgba(0, 0, 0, .18);
  color-scheme: light;
}
/* The chat keeps the look it was built in (DESIGN.md, "Chat"): its own
   dark tokens, whatever the dashboard's theme. */
:root[data-page=chat] {
  --background: #0a0a0a;
  --bg: #171717;
  --canvas: #050505;
  --card: #171717;
  --pop: #1c1c1c;
  --well: #212121;
  --inset: rgba(0, 0, 0, .2);
  --field: rgba(0, 0, 0, .2);
  --line: rgba(255, 255, 255, .05);
  --line-2: #262626;
  --edge: #333333;
  --track: #303030;
  --ink: #fafafa;
  --ink-2: #d4d4d4;
  --dim: #a3a3a3;
  --faint: #737373;
  --accent: #fafafa;
  --accent-ink: #171717;
  --accent-soft: #262626;
  --ring: #5a5a5a;
  --ok: #2ebd4e;
  --warn: #fab219;
  --crit: #f06a6a;
  --ok-soft: rgba(46, 189, 78, .12);
  --warn-soft: rgba(250, 178, 25, .12);
  --crit-soft: rgba(240, 106, 106, .13);
  --info-soft: rgba(30, 58, 138, .3);
  --series: #3987e5;
  --shadow: 0 2px 3px -1px rgba(0, 0, 0, .1), 0 0 0 1px rgba(25, 28, 33, .08);
  --shadow-up: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 12px 24px -12px rgba(0, 0, 0, .5);
  --r: 12px;
  --tracking: -.16px;
  --body-lh: 1.5;
  color-scheme: dark;
}

/* ——— base ——— */
* { box-sizing: border-box; }
button, input, select, textarea { letter-spacing: inherit; } /* form controls don't inherit tracking by default */
svg[hidden] { display: none; } /* the icon sprite: SVG has no hidden attribute of its own */
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 14px/var(--body-lh) var(--sans); letter-spacing: var(--tracking); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--link); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
a.item, a.tile, a.stat, a.mark, a.btn, a.back, a.dim, a.row-link, a.sb-brand, a.card-link { text-decoration: none; }
code, pre, .mono, .code { font-family: var(--mono); }
code { font-size: .86em; color: var(--ink-2); word-break: break-all; }
pre { margin: 0; font-size: 12px; white-space: pre-wrap; word-break: break-word; padding: 8px 10px; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); letter-spacing: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.01em; }
strong { font-weight: 500; }
.dim { color: var(--dim); font-size: 13px; }
a.dim:hover { color: var(--ink); }
.fine { color: var(--dim); font-size: 12px; line-height: 18px; margin-top: var(--s2); }
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.num, .tnum { font-variant-numeric: tabular-nums; }

/* ——— the app shell: sidebar | top bar over the content ——— */
.shell { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); min-height: 100vh; background: var(--bg); }
.sb { position: sticky; top: 0; z-index: 30; height: 100vh; height: 100dvh; display: flex; flex-direction: column; min-width: 0; background: var(--sidebar); border-right: 1px solid var(--line); overflow: hidden; }
/* the header: a bordered 32px tile, the name at 12px over a muted line,
   and the fold button at the row's end (the reference's sidebar header) */
.sb-head { flex: none; display: flex; align-items: center; gap: 4px; height: 56px; padding: 4px 8px; }
.sb-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 48px; padding: 8px; border-radius: var(--r-sm); color: var(--ink); }
.sb-brand:hover { background: var(--well); }
.mark-j { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: 700 16px/1 var(--mono); }
.sb-brand .mark-j { border-radius: 10px; background: none; border: 1px solid color-mix(in srgb, var(--dim) 25%, transparent); color: var(--ink); font-size: 15px; }
.sb-brand-text { display: grid; min-width: 0; }
.sb-brand-text strong { font: 600 12px/15px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-brand-text em { font: 400 12px/16px var(--sans); font-style: normal; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-toggle { flex: none; }
.sb-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 8px 8px; scrollbar-width: thin; scrollbar-color: var(--well) transparent; }
.sb-group { display: grid; gap: 4px; padding-top: 8px; }
.sb-label { display: flex; align-items: center; height: 32px; padding: 0 8px; font: 500 12px/16px var(--sans); color: color-mix(in srgb, var(--ink) 70%, transparent); white-space: nowrap; }
.item { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: 400 14px/20px var(--sans); text-align: left; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.item:hover { background: var(--well); }
.item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.item.is-active { background: var(--well); font-weight: 500; }
.item > .ic { color: var(--ink-2); }
.item.is-active > .ic { color: var(--ink); }
/* a connection's status in the sidebar: a small icon whose shape says it */
.item .nav-state { flex: none; width: 14px; height: 14px; stroke-width: 2; }
.nav-state.ok { color: var(--ok); }
.nav-state.warn { color: var(--warn); }
.nav-state.off { color: var(--faint); }
.sb-foot { flex: none; display: grid; gap: 4px; padding: 8px; border-top: 1px solid var(--line); }
.sb-foot form { margin: 0; }
.sb-scrim { display: none; }

.frame { min-width: 0; display: flex; flex-direction: column; }
/* the top bar: the fold button (only when the sidebar can't show its
   own), the group's name, and at the end the alerts bell and the theme */
.topbar { position: sticky; top: 0; z-index: 20; flex: none; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px; background: var(--background); box-shadow: inset 0 -1px 0 var(--line); }
.tb-btn { position: relative; flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; text-decoration: none; transition: background .15s; }
.tb-btn:hover { background: var(--well); }
.sb-head .tb-btn { width: 32px; height: 32px; border-radius: var(--r-sm); }
.tb-title { min-width: 0; font: 500 14px/20px var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* the bell counts the open alerts; the count is the reference's red badge */
.tb-count { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--crit); color: #fff; font: 600 10px/16px var(--sans); letter-spacing: 0; }
/* the theme button shows the theme it switches to */
.theme-dark, :root[data-theme=light] .theme-light { display: none; }
:root[data-theme=light] .theme-dark { display: block; }
/* the tabs bar under the top bar: the pages of the current group */
.tabs { flex: none; background: var(--background); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs ul { display: flex; align-items: center; gap: 24px; min-width: max-content; margin: 0; padding: 0 24px; list-style: none; }
.tabs a { display: inline-flex; align-items: center; height: 48px; border-bottom: 2px solid transparent; color: var(--dim); font: 600 14px/20px var(--sans); text-decoration: none; white-space: nowrap; transition: color .15s; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current=page] { color: var(--ink); border-bottom-color: var(--ink); }
/* the content is a bordered grid on the card surface: no page padding,
   every cell with its own hairlines (the reference's dashboard) */
.frame > .main { flex: 1; width: 100%; padding: 0 0 48px; min-width: 0; background: var(--card); }
.main { position: relative; min-width: 0; }
.main > .flash { margin: 16px 24px 0; }

/* collapsed: a 48px rail of icons (desktop only; the choice is kept). The
   sidebar's own fold button goes with it; the top bar's stands in. */
@media (min-width: 901px) {
  :root:not([data-sidebar=collapsed]) .tb-toggle { display: none; }
  :root[data-sidebar=collapsed] { --sb-w: 48px; }
  :root[data-sidebar=collapsed] .sb-head { padding: 8px; }
  :root[data-sidebar=collapsed] .sb-brand { width: 32px; height: 32px; padding: 0; }
  :root[data-sidebar=collapsed] .sb-brand-text,
  :root[data-sidebar=collapsed] .sb-toggle,
  :root[data-sidebar=collapsed] .item > span,
  :root[data-sidebar=collapsed] .item .nav-state,
  :root[data-sidebar=collapsed] .sb-label { display: none; }
  :root[data-sidebar=collapsed] .sb-nav { padding: 0 8px; scrollbar-width: none; }
  :root[data-sidebar=collapsed] .sb-group + .sb-group { margin-top: 8px; border-top: 1px solid var(--line); }
  :root[data-sidebar=collapsed] .item { width: 32px; padding: 0; justify-content: center; }
}
/* small screens: the sidebar is a sheet over the page, opened from the top bar */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sb { position: fixed; left: 0; top: 0; bottom: 0; width: min(288px, 86vw); transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
  .shell.sb-open .sb { transform: none; box-shadow: var(--shadow-up); }
  .shell.sb-open .sb-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, .5); }
  .sb-toggle { display: none; }
  .topbar { height: 48px; padding: 0 8px; }
  .tb-btn { width: 32px; height: 32px; }
  .tabs ul { padding: 0 16px; gap: 20px; }
  .main > .flash { margin: 16px 16px 0; }
}
@media (prefers-reduced-motion: reduce) { .sb { transition: none; } }

/* ——— page header: "gen_z / Page" over one muted line, with the
   page's status and its one action at the end; a hairline under it ——— */
.head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.head-text { min-width: 0; flex: 1 1 360px; }
.head h1 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; font: 600 16px/28px var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.head h1 .sep { color: color-mix(in srgb, var(--dim) 60%, transparent); font-weight: 400; }
.head h1 a { color: var(--ink); text-decoration: none; }
.head h1 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.head-brand { display: inline-flex; align-items: center; gap: 8px; }
.head-brand .ic.logo { width: 20px; height: 20px; }
.lede { margin-top: 8px; max-width: 96ch; color: var(--dim); font: 400 12px/20px var(--sans); }
.lede strong { color: var(--ink); }
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 13px; color: var(--dim); }
.back:hover { color: var(--ink); }
/* in the app shell the top bar's breadcrumb is the way back */
.frame .back { display: none; }
.back .ic { width: 14px; height: 14px; }
.head-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.head-side .state { margin-right: 4px; }
.head-side form { margin: 0; }

/* ——— stat cells: the reference's KPI row, four cells divided by
   hairlines (two on a phone), each a muted 12px label, the figure, and one
   12px line that says how it stands ——— */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px; background: var(--card); border-right: 1px solid var(--line); color: var(--ink); transition: background .15s; }
.stat:last-child { border-right: 0; }
a.stat:hover { background: color-mix(in srgb, var(--well) 35%, var(--card)); }
.stat-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 400 12px/16px var(--sans); color: var(--dim); }
.stat-label .ic { display: none; }
.stat-value { font: 600 24px/32px var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value small { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.stat-value.text { font-size: 18px; line-height: 32px; font-weight: 500; letter-spacing: -.01em; }
.stat-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 16px; font: 400 12px/16px var(--sans); color: var(--dim); }
.stat-sub .state { font-size: 12px; font-weight: 500; gap: 4px; color: var(--ink-2); white-space: normal; }
.stat-sub .state .ic { width: 14px; height: 14px; }
.stat-foot { margin-top: auto; padding-top: 12px; }
.spark { display: block; width: 100%; height: 32px; }
.spark .bar { fill: var(--series); opacity: .9; }
.spark .bar.none { fill: var(--track); opacity: 1; }

/* ——— the rows of cells and the cells themselves: a 12-column grid with
   no gaps, each cell with a hairline on its right and the row with one
   under it (2/3 + 1/3 on the reference; stacked under 1024px) ——— */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; border-bottom: 1px solid var(--line); }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.card { display: flex; flex-direction: column; min-width: 0; background: var(--card); border-right: 1px solid var(--line); }
.card:last-child { border-right: 0; }
.card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 0; }
.card-h > div { min-width: 0; }
.card-h h2 { font: 500 14px/20px var(--sans); }
.card-h p { margin-top: 2px; font: 400 12px/16px var(--sans); color: var(--dim); }
.card-h .btn { flex: none; }
.card-h + .table-wrap, .card-h + .card-b { margin-top: 16px; }
.card-b { flex: 1; min-width: 0; padding: 0 24px 24px; }
.card-b.flush { padding: 0; }
.card-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.card-f a { color: var(--ink); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.card-f a .ic { width: 14px; height: 14px; transition: transform .15s; }
.card-f a:hover .ic { transform: translateX(2px); }
.card-empty { display: grid; place-content: center; justify-items: center; gap: 6px; height: 100%; min-height: 120px; padding: 24px; text-align: center; color: var(--dim); font-size: 13px; }
.card-empty .ic { width: 20px; height: 20px; color: var(--faint); }
.card-empty strong { color: var(--ink); font-weight: 500; font-size: 14px; }
.card-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* a cell that leads with a figure: a muted 12px label, the figure, and a
   line under it (the reference's chart and customers cells) */
.card-kpi { display: grid; gap: 4px; min-width: 0; }
.card-label { font: 400 12px/16px var(--sans); color: var(--dim); }
.card-big { font: 600 30px/36px var(--sans); letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.span-4 .card-big { font-size: 24px; line-height: 32px; }
.card-big small { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.card-big.text { font-size: 18px; line-height: 32px; font-weight: 500; letter-spacing: -.01em; }
.card-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 400 14px/20px var(--sans); color: var(--dim); }
.span-4 .card-sub { font-size: 12px; line-height: 16px; }
.card-more { margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--dim); }
/* the period chips at a chart's top right: square, on a faint fill */
.chips-stat { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.chip-stat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); background: color-mix(in srgb, var(--well) 30%, transparent); color: var(--dim); font: 400 12px/16px var(--sans); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.chip-stat b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.chip-stat:hover { background: var(--well); color: var(--ink); }
.chip-stat[aria-current=true] { border-color: var(--edge); background: var(--well); color: var(--ink); }
/* a share of the whole as a 6px segmented bar, and its key under it */
.share { display: flex; width: 100%; height: 6px; margin-bottom: 8px; border-radius: 3px; overflow: hidden; background: var(--track); }
.share > i { flex: 1; background: var(--track); }
.share > .ok, .share .ok { background: var(--ok); }
.share > .warn, .share .warn { background: var(--warn); }
.share > .off, .share .off { background: color-mix(in srgb, var(--dim) 40%, transparent); }
svg.share { display: block; }
.share .kind-whatsapp, .dot.kind-whatsapp { fill: var(--whatsapp); background: var(--whatsapp); }
.share .kind-teams, .dot.kind-teams { fill: var(--teams); background: var(--teams); }
.share .kind-sms, .dot.kind-sms { fill: var(--c2); background: var(--c2); }
.share .kind-email, .dot.kind-email { fill: var(--c1); background: var(--c1); }
.keys { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 16px; font: 400 12px/16px var(--sans); color: var(--dim); }
.key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.key .dot { width: 6px; height: 6px; }
.key b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.cap { text-transform: capitalize; }

/* ——— tables: a 12px muted head on a hairline, 12px cell padding, 24px
   at the cell's edges, hairlines between rows ——— */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--sans); }
.table th { height: 33px; padding: 8px 12px; text-align: left; vertical-align: middle; font: 500 12px/16px var(--sans); color: var(--dim); white-space: nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.table td { padding: 12px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.table td small { font-size: 12px; line-height: 16px; }
.table th:first-child, .table td:first-child { padding-left: 24px; }
.table th:last-child, .table td:last-child { padding-right: 24px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--row-hover); }
.table .r { text-align: right; }
.table .nowrap { white-space: nowrap; }
.table .muted { color: var(--dim); }
.table code { font-size: 12px; color: var(--dim); word-break: normal; }
.cell-main { display: grid; min-width: 0; }
.cell-main strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-main strong.mono { font: 500 13px/20px var(--mono); }
.cell-main em { font-style: normal; font-size: 12px; line-height: 16px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono-id { font: 500 13px/20px var(--mono); }
.cell-who { display: flex; align-items: center; gap: 12px; min-width: 160px; }
a.row-link { color: inherit; }
a.row-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
/* a table inside a card runs to the card's edges; inside a section it keeps a frame */
.card .table th { border-top: 0; }
.framed { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.framed .table th { border-top: 0; }
.framed .table th:first-child, .framed .table td:first-child { padding-left: 16px; }
.framed .table th:last-child, .framed .table td:last-child { padding-right: 16px; }

/* ——— status: a word with an icon or a dot, never colour alone ——— */
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--off); }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--off); }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.state .ic { width: 15px; height: 15px; }
.state.ok .ic { color: var(--ok); }
.state.warn .ic { color: var(--warn); }
.state.crit .ic { color: var(--crit); }
.state.off .ic { color: var(--off); }
/* the reference's badge: a pill, a 6px dot and the word, tinted 10% */
.pill, .sev { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 2px 8px; border-radius: 999px; font: 500 12px/16px var(--sans); white-space: nowrap; color: var(--ink-2); background: var(--well); }
.pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--off); }
.pill.ok { color: var(--ok-ink); background: var(--ok-soft); }
.pill.ok::before { background: var(--ok); }
.pill.warn { color: var(--warn-ink); background: var(--warn-soft); }
.pill.warn::before { background: var(--warn); }
.pill.crit { color: var(--crit-ink); background: var(--crit-soft); }
.pill.crit::before { background: var(--crit); }
/* severity: a solid fill in its tone under white words, no dot or icon
   (the user's choice, 2026-10-04; see DESIGN.md rule 1). White on the
   pending amber is 2.9:1, so warning darkens it to 75% (4.9:1). */
.sev { text-transform: capitalize; font-weight: 600; color: var(--tone-ink); background: var(--tone-cancelled); }
.sev-warning { background: color-mix(in srgb, var(--tone-pending) 75%, #000); }
.sev-critical { background: var(--tone-failed); }
.sev.disabled { opacity: .6; }

/* ——— sections: the settings pattern (heading and a line on the left, the controls on the right) ——— */
.page { display: grid; min-width: 0; }
.page-form { display: contents; }
/* each section is one full-width cell of the bordered grid */
.sec { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 12px 48px; padding: 24px; border-bottom: 1px solid var(--line); }
.sec-head { display: grid; align-content: start; gap: 4px; min-width: 0; }
.sec-head h2 { font: 600 15px/22px var(--sans); letter-spacing: -.01em; }
.sec-head h2.mono { font: 500 14px/20px var(--mono); word-break: break-all; }
.sec-head p { color: var(--dim); font-size: 13px; line-height: 20px; }
.sec-head code { word-break: normal; overflow-wrap: anywhere; }
.sec-head .card-act { margin-top: 8px; }
.sec-body { display: grid; align-content: start; gap: 16px; min-width: 0; }
.sec-foot, .savebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.savebar { padding: 16px 24px; border-bottom: 1px solid var(--line); }
.sec-body .savebar { padding: 16px 0 0; border-bottom: 0; }
.summary { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0 0 24px; font-size: 13px; color: var(--ink-2); }
.summary b { font-weight: 500; color: var(--ink); margin-right: 8px; }
div.summary { display: grid; gap: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.lede-sm { font-size: 13px; }
.empty { color: var(--dim); font-size: 13px; }
@media (max-width: 900px) {
  .sec { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 16px; }
  .savebar { padding: 16px; }
}

/* ——— messages: a tinted panel; the words carry the meaning, no coloured edge ——— */
.flash { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); font-size: 14px; line-height: 20px; word-break: break-word; }
.flash p { flex: 1; }
.flash.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.flash.error { background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 30%, transparent); }
.flash.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.sec-body .flash, .card .flash { margin: 0; }
.flash-x { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 6px; background: none; color: inherit; opacity: .6; cursor: pointer; padding: 0; }
.flash-x:hover { opacity: 1; background: var(--well); }
/* a flash going by itself (app.js) fades first */
.flash[data-flash] { transition: opacity .3s ease; }
.flash.is-going { opacity: 0; }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); font-size: 13px; }
.note .ic { margin-top: 2px; color: var(--dim); }
.page > .note { margin: 16px 24px 0; }
.main > .flash + .flash { margin-top: 8px; }
.waiting { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; }

/* ——— buttons ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--background); color: var(--ink); font: 500 14px/20px var(--sans); white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-xs); transition: background .15s, border-color .15s, opacity .15s; }
.btn:hover { background: var(--well); }
.btn .ic { width: 16px; height: 16px; }
.btn.accent { background: var(--accent); border-color: transparent; color: var(--accent-ink); box-shadow: var(--shadow); }
.btn.accent:hover { background: var(--accent); opacity: .9; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--well); }
.btn.danger { color: var(--crit-ink); }
.btn.danger:hover { border-color: color-mix(in srgb, var(--crit) 50%, transparent); background: var(--crit-soft); }
.btn.danger-solid { background: var(--tone-failed); border-color: var(--tone-failed); color: #fff; }
.btn.danger-solid:hover { background: #b01a1a; border-color: #b01a1a; }
.btn.sm { height: 28px; padding: 0 8px; font-size: 12px; line-height: 16px; gap: 6px; justify-self: start; }
.btn.sm .ic { width: 14px; height: 14px; }
.btn.wide { width: 100%; height: 40px; }
button:disabled { opacity: .55; cursor: progress; }
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); border: 0; background: none; color: var(--dim); cursor: pointer; }
.icon-btn:hover { background: var(--crit-soft); color: var(--crit-ink); }
.linkbtn { border: 0; background: none; padding: 0; font: 400 12px/1 var(--sans); color: var(--dim); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.linkbtn.danger:hover { color: var(--crit-ink); text-decoration-color: currentColor; }
.linkbtn[hidden] { display: none; }
/* a small on/off button in a list; "on" carries a drawn tick and the word */
.toggle { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--background); color: var(--ink); font: 500 12px/16px var(--sans); cursor: pointer; box-shadow: var(--shadow-xs); white-space: nowrap; }
.toggle:hover { background: var(--well); }
.toggle.on { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok-ink); }
.toggle.on::before { content: ""; width: 4px; height: 8px; margin: -2px 2px 0 1px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.toggles { display: inline-flex; gap: 6px; margin-left: auto; }

/* ——— forms ——— */
form { margin: 0; }
form[hidden] { display: none; }
.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grow { flex: 1 1 200px; }
.stack { display: grid; gap: 16px; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.field > span { font-size: 14px; font-weight: 500; }
.field em { font-style: normal; font-weight: 400; color: var(--dim); margin-left: 6px; }
input[type=text], input[type=password], input[type=search], input[type=tel], input[type=email], input[type=number], select {
  height: 36px; min-width: 0; padding: 4px 12px; border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--field); color: var(--ink);
  font: 400 14px/20px var(--sans); box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s;
}
input.mono { font-family: var(--mono); font-size: 13px; }
input::placeholder { color: var(--dim); }
input:focus, select:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent); }
input[aria-invalid=true] { border-color: var(--crit); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.radio { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin-right: 6px; }
.checks { display: grid; gap: 8px; padding: 12px 16px; background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-sm); }
.checks label { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.checks em { font-style: normal; color: var(--dim); font-size: 12px; }
details.more summary { cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 500; }
details.more[open] summary { margin-bottom: 12px; }
/* write-only credential fields: one form, one save */
.fields { display: grid; gap: 24px; }
.frow { display: grid; gap: 8px; min-width: 0; }
.frow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.frow-top label { font-size: 14px; font-weight: 500; }
.frow-meta { display: inline-flex; align-items: center; gap: 12px; }
.frow input { width: 100%; }
.frow input:disabled { opacity: .6; }
.fhelp { color: var(--dim); font-size: 13px; line-height: 19px; }
.ferr { display: flex; gap: 6px; align-items: flex-start; color: var(--crit-ink); font-size: 13px; line-height: 19px; }
.ferr[hidden] { display: none; }
.frow.has-error input { border-color: var(--crit); }
.fstate .state { font-size: 12px; font-weight: 400; color: var(--dim); }
.fstate [hidden] { display: none; }
/* the in-place result of a save */
.save-status { flex: 1 1 200px; min-width: 0; font-size: 13px; line-height: 20px; color: var(--dim); overflow-wrap: anywhere; }
.save-status[data-kind=ok] { color: var(--ink); }
.save-status[data-kind=error] { color: var(--crit-ink); }
/* People: the form the header's "Add people" sends; only its status line shows, once it says something */
.people-add:has(> .save-status:empty) { display: none; }
/* tick chips: checkboxes as bordered chips */
.ticks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ticks legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.ticks label { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--background); font-size: 13px; color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow-xs); transition: background .15s, border-color .15s; }
.ticks label:hover { background: var(--well); }
.ticks label:has(input:checked) { border-color: var(--ring); background: var(--well); color: var(--ink); }
.ticks input, .watch-row input { width: 14px; height: 14px; margin: 0; flex: none; }
.ticks label[hidden], .ticks[hidden] { display: none; }
.ticks.hours label { height: 30px; padding: 0 10px 0 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ticks.tight { flex: none; gap: 4px; }
.ticks.tight label { height: 28px; padding: 0 9px 0 7px; font-size: 12px; }
.pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
/* related fields side by side, two to a row; each row starts level, so
   labels and inputs line up; help text runs on under its own field */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; align-items: start; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
.switch input { width: 14px; height: 14px; margin: 0; }
@media (max-width: 760px) { .pair, .fgrid { grid-template-columns: minmax(0, 1fr); } }

/* settings: answer style, each choice a card with an example answer */
.styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.style-opt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: var(--r); background: var(--field); cursor: pointer; }
.style-opt:has(input:checked) { border-color: var(--ring); background: var(--well); }
.style-opt input { position: absolute; top: 14px; right: 14px; margin: 0; }
.style-name { font-size: 14px; font-weight: 600; padding-right: 24px; }
.style-hint { font-size: 12.5px; line-height: 18px; color: var(--dim); }
.style-eg { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; line-height: 19px; color: var(--ink-2); }
@media (max-width: 1100px) { .styles { grid-template-columns: minmax(0, 1fr); } }

/* settings: where each portal's evidence is captured */
.routes { display: grid; gap: 8px; }
.routes-head { margin: 0; font-size: 14px; font-weight: 500; }
.routes ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.routes li { display: grid; grid-template-columns: minmax(140px, 200px) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px; font-size: 13px; }
.routes li + li { border-top: 1px solid var(--line); }
.routes-name { font-weight: 500; }
.routes .dim { font-size: 12px; }
@media (max-width: 760px) { .routes li { grid-template-columns: minmax(0, 1fr) auto; } .routes li .dim { grid-column: 1 / -1; } }

/* settings: which models the chat offers */
.model-groups { display: grid; gap: 16px; }
.ticks.models label em { font-style: normal; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ticks.models label:has(input[type=checkbox]:not(:checked)) span { text-decoration: line-through; color: var(--dim); }
.fold { border-top: 1px solid var(--line); padding-top: 12px; }
.fold summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.fold summary:hover { color: var(--ink); }
.fold[open] summary { margin-bottom: 12px; }
.fold .model-filter { width: min(320px, 100%); margin-bottom: 16px; }

/* ——— balance alerts ——— */
.alert-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; }
.alert-set .field > span:first-child { display: flex; align-items: center; gap: 6px; }
.alert-set .field .ic { width: 14px; height: 14px; }
.alert-set .field .ic.warn { color: var(--warn); }
.alert-set .field .ic.crit { color: var(--crit); }
.money-in { display: flex; align-items: center; gap: 10px; min-width: 0; height: 52px; padding: 0 14px; background: var(--field); border: 1px solid var(--edge); border-radius: var(--r-sm); box-shadow: var(--shadow-xs); }
.money-in:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent); }
.money-in b { font-size: 12px; font-weight: 500; color: var(--dim); }
.money-in input[type=text] { flex: 1; min-width: 0; max-width: 100%; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.money-in input[type=text]:focus { border: 0; box-shadow: none; }
/* a row's own amounts (Balance alerts): two small money fields */
.own-set { display: flex; gap: 8px; flex: 0 1 360px; min-width: 0; }
.money-in.sm { flex: 1 1 0; gap: 6px; height: 36px; padding: 0 10px; }
.money-in.sm .ic { width: 14px; height: 14px; flex: none; }
.money-in.sm .ic.warn { color: var(--warn); }
.money-in.sm .ic.crit { color: var(--crit); }
.money-in.sm input[type=text] { font-size: 14px; font-weight: 500; letter-spacing: normal; }
.own-key { display: flex; gap: 12px; font-size: 12px; }
.watch.own .watch-row:hover { background: none; }
div.watch-row { cursor: default; }
.watch-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); }
.watch-top h3 { flex: 1; font-size: 14px; font-weight: 500; }
.watch-top h3 em { font-style: normal; font-weight: 400; color: var(--dim); margin-left: 4px; }
.watch { display: grid; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.watch-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.watch-row:first-child { border-top: 0; }
.watch-row:hover { background: var(--row-hover); }
.watch-name { display: grid; gap: 1px; flex: 1 1 140px; min-width: 0; }
.watch-name strong { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-name em { font-style: normal; font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* dimmed when its ticks are all off (left out on save); a row with no
   ticks (a report partner: a hidden field and a remove button) never is */
.watch-row:has(input[type=checkbox]):not(:has(input[type=checkbox]:checked)) .watch-name strong { color: var(--dim); font-weight: 400; }
/* controls that work only with the script (the form pickers' add and
   remove buttons), and a picked list while it has no rows */
[data-js-only][hidden], [data-pick-list][hidden] { display: none !important; }
.watch-row.gone .watch-name em { color: var(--warn-ink); }
.amounts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 24px; }
.amount { display: grid; gap: 1px; justify-items: end; text-align: right; }
.amount em { font-style: normal; font-size: 11px; line-height: 14px; color: var(--dim); }
.amount b { font: 500 14px/20px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount.aside b { color: var(--dim); font-weight: 400; }
.amount .state { font-size: 12px; font-weight: 400; }
.form-end { display: flex; align-items: center; gap: 14px; }
.form-end .dim { flex: 1; font-size: 12px; }
.form-end code { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
@media (max-width: 760px) {
  .alert-set { grid-template-columns: minmax(0, 1fr); }
  .watch-row { flex-wrap: wrap; }
  .amounts { flex-basis: 100%; justify-content: flex-start; padding-left: 26px; }
  .amount { justify-items: start; text-align: left; }
  .own-set { order: 3; flex-basis: 100%; }
}

/* ——— lists, facts, chips ——— */
/* a list inside a cell's body: the reference's legend rows, 12px apart,
   no dividers, name on the left and the figure or status at the end */
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.feed > li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.feed-main { display: grid; flex: 1; min-width: 0; }
.feed-main strong { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-main em { font-style: normal; color: var(--dim); font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.feed-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
a.feed-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.feed-end { flex: none; display: grid; justify-items: end; gap: 2px; text-align: right; }
.feed-end .state { font-size: 12px; font-weight: 500; }
.feed-end small { font-size: 12px; line-height: 16px; color: var(--dim); white-space: nowrap; }
.thresholds { display: flex; flex-wrap: wrap; gap: 6px; }
.thr { display: inline-flex; align-items: baseline; gap: 5px; height: 22px; padding: 2px 8px; border-radius: var(--r-sm); background: var(--well); font-size: 12px; line-height: 18px; color: var(--dim); white-space: nowrap; }
.thr b { font: 500 12px/18px var(--mono); color: var(--ink); }
.avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--well); color: var(--dim); font: 500 12px/1 var(--sans); }
.avatar.lg { width: 40px; height: 40px; font-size: 14px; color: var(--ink); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 2px 8px; border-radius: 999px; background: var(--well); color: var(--ink-2); font: 500 12px/16px var(--sans); text-transform: capitalize; white-space: nowrap; }
.chip.warn { background: var(--warn-soft); color: var(--warn-ink); }
.rows { display: grid; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 52px; padding: 10px 16px; border-top: 1px solid var(--line); transition: background .12s; }
.row:first-child { border-top: 0; }
.row:hover { background: var(--row-hover); }
.row-k { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; min-width: 0; flex-wrap: wrap; }
.row-k strong { font-size: 14px; font-weight: 500; }
.row-k code { font-size: 12px; color: var(--dim); }
.row-v { display: flex; gap: 8px; flex: 2 1 280px; }
.row-v input { flex: 1; min-width: 0; }
.row-x { flex: none; margin-left: auto; }
.row-help { flex-basis: 100%; color: var(--dim); font-size: 12px; margin-top: -4px; }
.kind { flex: none; width: 92px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); text-transform: capitalize; }
.kind::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--dim); }
.kind-whatsapp::before { background: var(--whatsapp); }
.kind-teams::before { background: var(--teams); }
.kind-sms::before { background: var(--c2); }
.kind-email::before { background: var(--c1); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.two h3 { font-size: 13px; color: var(--dim); font-weight: 500; margin-bottom: 4px; }
.facts { display: grid; margin: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; }
.facts dt { font-size: 13px; color: var(--dim); padding-top: 1px; text-transform: capitalize; }
.facts dd { margin: 0; min-width: 0; font-size: 14px; }
.params { display: flex; flex-wrap: wrap; gap: 8px; }
.param { display: inline-grid; gap: 2px; min-width: 120px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); }
.param b { font: 600 18px/24px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.param span { font-size: 12px; color: var(--dim); }
/* connections, as tiles (the badge: an identity hue and the portal's letters) */
.badge { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); font: 600 11px/1 var(--sans); letter-spacing: .02em; color: var(--ink); background: var(--well); border: 1px solid var(--line); }
.badge.c1 { background: color-mix(in srgb, var(--c1) 16%, var(--card)); border-color: color-mix(in srgb, var(--c1) 40%, var(--card)); }
.badge.c2 { background: color-mix(in srgb, var(--c2) 16%, var(--card)); border-color: color-mix(in srgb, var(--c2) 40%, var(--card)); }
.badge.c3 { background: color-mix(in srgb, var(--c3) 16%, var(--card)); border-color: color-mix(in srgb, var(--c3) 40%, var(--card)); }
.badge.c4 { background: color-mix(in srgb, var(--c4) 18%, var(--card)); border-color: color-mix(in srgb, var(--c4) 45%, var(--card)); }
.badge.teams { background: color-mix(in srgb, var(--teams) 16%, var(--card)); border-color: color-mix(in srgb, var(--teams) 40%, var(--card)); }
.badge.whatsapp { background: color-mix(in srgb, var(--whatsapp) 16%, var(--card)); border-color: color-mix(in srgb, var(--whatsapp) 40%, var(--card)); }
.badge .ic { width: 17px; height: 17px; }
.meter { display: inline-flex; gap: 2px; flex: 1; min-width: 40px; }
.meter i { flex: 1; height: 6px; border-radius: 3px; background: var(--track); }
.meter i.on { background: var(--ok); }
.segbar { display: flex; gap: 2px; height: 8px; }
.segbar > * { flex: 1; border-radius: 3px; background: var(--track); }
.segbar > .ok { background: var(--ok); }
.segbar > .warn { background: var(--warn); }
.segbar > a:hover { filter: brightness(1.12); }
.segbar.thin { height: 6px; }

/* ——— charts: the reference's bars are the primary mixed into the
   background, the current period in the full primary, no axis lines, a
   label under each column ——— */
.chart { display: block; width: 100%; height: 110px; overflow: visible; }
.chart.tall { height: 220px; }
.chart .axis { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.chart .bar { fill: color-mix(in srgb, var(--accent) 55%, var(--card)); transition: fill .15s; }
.chart .bar.today { fill: var(--accent); }
.chart .bar.none { fill: var(--track); }
.chart .bar:hover { fill: color-mix(in srgb, var(--accent) 80%, var(--card)); }
.chart-ticks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--dim); text-align: center; font-variant-numeric: tabular-nums; }
.chart-x { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
h3.sub { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.tip { position: fixed; z-index: 90; pointer-events: none; padding: 6px 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--background); font: 500 12px/16px var(--sans); white-space: nowrap; box-shadow: var(--shadow-up); }

/* ——— codes ——— */
.totp { display: inline-flex; align-items: baseline; gap: 12px; padding: 10px 16px; background: var(--ink); color: var(--background); border-radius: var(--r-sm); }
.totp .code { font: 600 1.8rem/1 var(--mono); letter-spacing: .14em; }
.totp .left { font: 12px var(--mono); opacity: .65; }
.totp.expired .code { opacity: .3; text-decoration: line-through; }
.dosteps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.code.big { font: 600 1.3rem/1 var(--mono); letter-spacing: .12em; padding: 6px 12px; background: var(--ink); color: var(--background); border-radius: var(--r-sm); user-select: all; display: inline-block; }
.qr-frame { display: inline-block; padding: 12px; background: #fff; border-radius: var(--r); border: 1px solid var(--line); }
img.qr { display: block; width: 264px; height: 264px; image-rendering: pixelated; }
.linking { display: grid; gap: 10px; justify-items: start; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--edge); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ——— the confirmation dialog ——— */
.confirm { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--pop); color: var(--ink); box-shadow: var(--shadow-up); animation: menu-in .12s ease-out; }
.confirm::backdrop { background: rgba(0, 0, 0, .55); }
.confirm p { font-size: 14px; line-height: 21px; color: var(--ink); overflow-wrap: anywhere; }
.confirm-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .confirm { animation: none; } }

/* ——— login and setup ——— */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 40px 16px; background: var(--background); }
.gate-card { width: 100%; max-width: 380px; display: grid; gap: 16px; padding: 32px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.gate-card .mark { display: flex; align-items: center; gap: 8px; color: var(--ink); font: 600 14px/20px var(--sans); }
.gate-card h1 { font: 600 24px/32px var(--sans); letter-spacing: -.025em; }
.gate-card .lede { margin-top: -8px; }
.gate-card input { width: 100%; }
.gate-card .fine { margin-top: 0; }

/* ——— the old chat steps list rules, which the chat's step list still
   relies on for its spacing (kept as they were) ——— */
.steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; }
.steps li { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: .82rem; }
.steps li.done { color: var(--ink-2); }

/* ——— the chat page's frame (its columns are in chat.css) ——— */
.app.solo { display: block; min-height: 100vh; overflow-x: clip; background: linear-gradient(var(--canvas), rgba(5, 5, 5, .5)); }

/* ——— smaller windows: the rows stack under 1024px (each cell then has
   the hairline under it instead of beside it), the KPI row goes to two
   columns under 640px, and the cells' padding drops to 16px ——— */
@media (max-width: 1023px) {
  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
  .card { border-right: 0; border-bottom: 1px solid var(--line); }
  .card:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .head { align-items: flex-start; padding: 16px; }
  .head-side { width: 100%; }
  .card-h { padding: 16px 16px 0; }
  .card-b { padding: 0 16px 16px; }
  .card-f { padding: 12px 16px; }
  .card-big { font-size: 24px; line-height: 32px; }
  .table th:first-child, .table td:first-child { padding-left: 16px; }
  .table th:last-child, .table td:last-child { padding-right: 16px; }
  .table .hide-sm { display: none; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .row-v { flex-basis: 100%; }
  .gate-card { padding: 24px; }
}
@media (max-width: 639px) {
  .stats, .stats.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { border-bottom: 0; }
  .stat { padding: 24px 16px; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(2n+1) { border-right: 1px solid var(--line); }
}

/* ———————————————— the chat ————————————————
   Its conversation, stage, menus and output panel. Shared with the
   dashboard: .chipbtn, the .menu popover, .status. */

/* the messages themselves (the bubbles, the assistant's mark, the time,
   the spacing and the line that closes a question and its answer off from
   the next) are in chat-ui.css, section 6 */
/* a reply that was stopped says so, quietly */
.stopped { display: inline-block; margin-top: 8px; padding: 1px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--dim); font-size: 12px; line-height: 18px; }
/* while a reply runs, the send button gives way to Stop */
.chipbtn.stop { width: 28px; padding: 0; justify-content: center; }
.chipbtn.stop[hidden], .chipbtn.send[hidden] { display: none; }

/* a drafted message: who it is for, what it says, and the two choices */
.draft { display: grid; gap: 8px; max-width: 520px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.draft-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.draft-head .ic { width: 15px; height: 15px; color: var(--dim); }
.draft-head .dim { margin-left: auto; font-size: 11px; }
.msg-body .draft-text { padding: 10px 12px; border-radius: 8px; background: var(--inset); font-size: 14px; line-height: 21px; white-space: pre-wrap; }
.msg-body .draft-note { font-size: 12px; line-height: 18px; color: var(--dim); }
.draft-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.draft-acts .dim { order: -1; margin-right: auto; font-size: 11.5px; }
.msg-body .draft-error { font-size: 12.5px; line-height: 18px; color: var(--crit); }
.draft.discarded { opacity: .6; }

/* an answer's actions: copy, good, bad, try again; shown when it is
   pointed at, and kept in view once it is rated */
.msg-acts { display: flex; align-items: center; gap: 2px; margin: 8px 0 0 -6px; opacity: 0; transition: opacity .12s; }
.msg:hover .msg-acts, .msg-acts:focus-within, .msg-acts.rated { opacity: 1; }
.msg-acts .msg-copy { opacity: 1; }
.msg-act { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--dim); cursor: pointer; transition: background .12s, color .12s; }
.msg-act .ic { width: 14px; height: 14px; stroke-width: 1.8; }
.msg-act:hover { background: var(--well); color: var(--ink); }
.msg-rate[aria-pressed=true] { color: var(--ink); background: var(--well); }
.msg-rate[aria-pressed=true] .ic { fill: currentColor; fill-opacity: .25; }
.rate-note { display: flex; gap: 6px; margin-top: 8px; max-width: 420px; }
.rate-note input { flex: 1; min-width: 0; height: 28px; padding: 0 10px; font-size: 12px; border-radius: 9px; }
.rate-thanks { margin-top: 6px; font-size: 12px !important; line-height: 18px !important; color: var(--dim); }
@media (hover: none) { .msg-acts { opacity: .8; } }

/* a few categories as columns */

/* what to ask next, under the newest reply */
.nexts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* copy a message: shown when the message is pointed at or the button has focus */
.msg-copy { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--dim); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.msg-copy .ic { width: 14px; height: 14px; stroke-width: 1.8; }
.msg:hover .msg-copy, .msg-copy:focus-visible, .msg-copy.copied { opacity: 1; }
.msg-copy:hover { background: var(--well); color: var(--ink); }
.msg-copy.copied { color: var(--ok); }
.msg.user .msg-copy { align-self: center; }
.msg.pending .msg-copy { display: none; }
@media (hover: none) { .msg-copy { opacity: .7; } }

/* the work behind a reply: one line that opens into the list of steps */
.steps { margin-bottom: 8px; }
.steps summary { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 4px; margin-left: -4px; border-radius: 6px; list-style: none; cursor: pointer; font-size: 12px; line-height: 18px; color: var(--dim); user-select: none; }
.steps summary::-webkit-details-marker { display: none; }
.steps summary:hover { background: var(--well); color: var(--ink-2); }
.steps summary .ic { width: 12px; height: 12px; stroke-width: 2; transform: rotate(-90deg); transition: transform .15s; }
.steps[open] summary .ic { transform: none; }
.steps ol { display: grid; gap: 4px; margin: 6px 0 2px; padding: 2px 0 2px 12px; border-left: 1px solid var(--line-2); list-style: none; }
.step { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 18px; color: var(--ink-2); }
.step > span { min-width: 0; overflow-wrap: anywhere; }
.step .ic, .step .spinner { flex: none; width: 12px; height: 12px; margin-top: 3px; stroke-width: 2.4; }
.step .spinner { border-width: 1.5px; }
.step.done .ic { color: var(--ok); }
.step.failed .ic { color: var(--crit); }
.step.failed em { font-style: normal; color: var(--dim); }
.step.running { color: var(--ink); }
/* a note is the model talking while it works, not a step: no mark */
.step.note { padding: 0 0 0 20px; background: none; border-radius: 0; font-size: 12px; color: var(--dim); white-space: pre-wrap; }


/* ——— chat: the stage, measured from the reference (see DESIGN.md) ——— */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the chat is its own page: the reference's header, then the stage to the window's edges */
.app.solo { display: block; }
.topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 16px 48px; border-bottom: 1px solid rgba(51, 51, 51, .3); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.topnav-in { display: flex; align-items: center; justify-content: space-between; height: 40px; max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.topnav-logo { display: block; width: 40px; height: 40px; padding: 4px; border-radius: 12px; text-decoration: none; transition: background .15s; }
.topnav-logo:hover { background: var(--card); }
.topnav-logo .mark-j { width: 32px; height: 32px; border-radius: 9px; font-size: 18px; }
.topnav-links { display: flex; align-items: center; }
.topnav-links a { display: inline-flex; align-items: center; height: 32px; padding: 8px 16px; border-radius: 6px; color: #a6a6a6; font: 400 12px/16px var(--sans); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color .15s; }
.topnav-links a + a { margin-left: 8px; }
.topnav-links a:hover { color: var(--ink); }
.topnav-out { height: 40px; padding: 8px 16px; border: 0; border-radius: 12px; background: none; color: #a6a6a6; font: 500 12px/16px var(--sans); letter-spacing: inherit; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .15s; }
.topnav-out:hover { color: var(--ink); }
.app.solo .main { padding-top: 73px; }
.main.is-stage { padding: 0; max-width: none; }
.main.is-stage .head { display: none; }
.main.is-stage .flash { margin: 0 24px 10px; }
.stage { position: relative; overflow: clip; height: calc(100vh - 73px); min-height: 520px; display: flex; }

/* the conversations kept so far, beside the chat */
.chats { position: relative; z-index: 3; flex: 0 0 216px; width: 216px; min-width: 0; overflow: hidden; height: 100%; display: flex; flex-direction: column; background: #0c0c0c; border-right: 1px solid var(--line-2); }
.chats-top { display: flex; align-items: center; gap: 6px; height: 49px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line-2); flex: none; }
.chats-top strong { flex: 1; font-size: 13px; font-weight: 500; }
.chats-top .chipbtn, .chats-show { width: 28px; padding: 0; justify-content: center; }
.chats-list { flex: 1; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; padding: 6px 6px 16px; scrollbar-color: var(--edge) transparent; }
.chats-label { padding: 12px 10px 4px; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; color: var(--faint); }
.chat-row { display: flex; align-items: center; min-width: 0; border-radius: 8px; }
.chat-row a { flex: 1; min-width: 0; padding: 7px 10px; font-size: 13px; line-height: 18px; color: var(--ink-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row:hover, .chat-row.active { background: var(--well); }
.chat-row.active a { color: var(--ink); font-weight: 500; }
.chat-row form { display: none; flex: none; margin-right: 3px; }
.chat-row:hover form, .chat-row:focus-within form { display: block; }
.chat-row .icon-btn { width: 24px; height: 24px; }
.chats-none { padding: 12px 10px; font-size: 12px; line-height: 18px; color: var(--dim); }
.stage .chats-show { position: absolute; z-index: 3; top: 12px; left: 12px; display: none; }
.stage.no-chats .chats { display: none; }
.stage.no-chats .chats-show { display: inline-flex; }

a.chipbtn { text-decoration: none; }
/* beside the panel the prompt bar has less room: the hint goes, and the
   chips may wrap, the send button staying at the right */
.stage.has-panel .prompt-hint { display: none; }
.stage.has-panel .prompt-bar { flex-wrap: wrap; row-gap: 6px; }
.stage.has-panel .prompt-bar .send, .stage.has-panel .prompt-bar .stop { margin-left: auto; }
/* and the box is taller, so two rows of chips don't cover what is typed */
.stage.has-panel.talk .prompt textarea { height: 132px; padding-bottom: 76px; }

/* drag to resize the output panel */
.split { position: relative; z-index: 4; flex: 0 0 9px; margin: 0 -4px; cursor: col-resize; touch-action: none; outline: none; }
.split[hidden] { display: none; }
.split::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: transparent; transition: background .12s, box-shadow .12s; }
.split:hover::after, .split:focus-visible::after, .split.dragging::after { background: var(--dim); box-shadow: 0 0 0 1px var(--dim); }
body.resizing { cursor: col-resize; user-select: none; }
.stage-col { position: relative; height: 100%; width: min(672px, calc(100% - 16px)); margin: 0 auto; display: flex; flex-direction: column; }
/* the column's two vertical hairlines sit on its edges without taking width */
.stage-col::before, .stage-col::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); pointer-events: none; z-index: 1; }
.stage-col::before { left: 0; }
.stage-col::after { right: 0; }
/* a band's top and bottom hairlines run the stage's full width */
.band { position: relative; }
.band::before, .band::after { content: ""; position: absolute; left: -100vw; right: -100vw; height: 1px; background: var(--line); }
.band::before { top: 0; }
.band::after { bottom: 0; }
/* the reference starts the first band 151px below its header */
.stage.enter .stage-col { justify-content: flex-start; padding-top: clamp(40px, 16.8vh, 151px); }
.stage-hero, .stage-subband { text-align: center; padding: 8px; }
.stage-subband { margin-top: 33px; }
a.announce { text-decoration: none; }
a.announce:hover { border-color: var(--edge); color: var(--ink); }
.announce { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 6px 12px; margin-bottom: 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-2); }
.announce .ic { width: 12px; height: 12px; color: var(--dim); stroke-width: 2; }
.stage h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.stage-sub { font-size: 18px; line-height: 28px; font-weight: 300; color: var(--ink-2); }
.prompt-frame { margin-top: 33px; padding: 16px; background: var(--card); }
.prompt { position: relative; padding-bottom: 6px; }
.prompt textarea {
  display: block; width: 100%; height: 120px; max-height: 400px; resize: none; outline: none;
  padding: 12px 12px 40px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--inset); color: var(--ink);
  font: 400 14px/20px var(--sans);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 1px -.5px rgba(0, 0, 0, .06), 0 3px 3px -1.5px rgba(0, 0, 0, .06), 0 6px 6px -3px rgba(0, 0, 0, .06), 0 12px 12px -6px rgba(0, 0, 0, .06), 0 24px 24px -12px rgba(0, 0, 0, .06);
  transition: border-color .15s;
}
.prompt textarea:focus { border-color: var(--edge); }
.prompt textarea::placeholder { color: var(--faint); }
.stage.talk .prompt textarea { height: 96px; }
.prompt-bar { position: absolute; left: 9px; right: 9px; bottom: 14px; display: flex; align-items: center; gap: 8px; }
/* the reference's toolbar chip: 25px tall, 10px text */
.chipbtn { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 4px 10px; border-radius: 9px; background: var(--card); border: 1px solid rgba(51, 51, 51, .5); box-shadow: var(--shadow); color: var(--ink); font: 400 12px/16px var(--sans); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.chipbtn:hover, .chipbtn[aria-expanded=true] { background: var(--accent-soft); border-color: rgba(51, 51, 51, .7); }
.chipbtn .ic { width: 12px; height: 12px; stroke-width: 2; }
.chipbtn .chev { width: 10px; height: 10px; color: var(--dim); }
.chipbtn.send { padding: 6px 6px 7px; width: 28px; justify-content: center; }
.chipbtn.send .ic { width: 12px; height: 14px; }
.prompt.is-empty .send { color: var(--faint); }
/* While an answer is written the box stays usable: what is sent then waits in the queue. */
.prompt-hint { margin-left: auto; font-size: 10px; color: var(--faint); white-space: nowrap; }
/* a <select> until the script turns it into a menu */
.pick { display: inline-flex; }
.pick select { height: 28px; padding: 0 6px; font-size: 12px; border-radius: 8px; background: var(--card); border: 1px solid rgba(51, 51, 51, .5); color: var(--ink); }
.pick-wrap { position: relative; display: inline-flex; }
/* a picker in a form: the field's size and look, its menu below it */
.pick-wrap.field { display: flex; width: 100%; }
.pick-wrap.field > .chipbtn { width: 100%; height: 36px; padding: 4px 12px; border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--field); box-shadow: var(--shadow-xs); font-size: 14px; }
.pick-wrap.field > .chipbtn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pick-wrap.field > .chipbtn .chev { margin-left: auto; }
.pick-wrap.field > .chipbtn .ic:first-child { color: var(--dim); }
.menu.down { top: calc(100% + 6px); bottom: auto; transform-origin: top left; }
[data-show][hidden] { display: none !important; }
/* the period before the script makes it a chip with a calendar */
.period { display: inline-flex; align-items: center; gap: 4px; }
.period input[type=date] { height: 25px; width: auto; padding: 0 6px; font-size: 10px; border-radius: 8px; background: var(--card); border: 1px solid rgba(51, 51, 51, .5); color: var(--ink); color-scheme: dark; }

/* menu: the reference's popover */
.menu { position: absolute; z-index: 40; left: 0; bottom: calc(100% + 6px); min-width: 233px; max-height: min(80vh, 420px); overflow-y: auto; overscroll-behavior: none; padding: 4px; background: var(--pop); border: 1px solid var(--edge); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1), 0 18px 40px -12px rgba(0, 0, 0, .6); transform-origin: bottom left; animation: menu-in .12s ease-out; }
.menu[hidden] { display: none; }
/* the right-click menu (chat list, tabs): the popover at the pointer */
.menu.ctxmenu { position: fixed; bottom: auto; min-width: 200px; transform-origin: top left; z-index: 60; }
.menu.ctxmenu .menu-item { min-height: 32px; }
.menu.ctxmenu .menu-item.danger { color: var(--crit); }
.menu.ctxmenu .menu-item[disabled] { opacity: .5; }
@keyframes menu-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.menu-label { padding: 6px 8px; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; color: var(--dim); }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 400 13px/18px var(--sans); text-align: left; cursor: default; text-decoration: none; outline: none; }
.menu-item:hover, .menu-item:focus-visible { background: var(--well); }
.menu-item .ic { width: 12px; height: 12px; stroke-width: 2; }
.menu-item[aria-checked=true] { font-weight: 500; }
.menu-item[disabled] { opacity: .5; cursor: not-allowed; }
.menu-item[disabled]:hover { background: none; }
.menu-tag { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--ink-2); font-size: 10px; line-height: 16px; white-space: nowrap; }
.menu-tag.locked { background: var(--info-soft); color: var(--info); }
.menu-foot { min-height: 36px; color: var(--ink-2); }
.menu-item[hidden], .menu-label[hidden], .menu-note[hidden] { display: none; }
/* the profile menu at the top right (layout.html "me"): who is signed in, Account, Log out */
.menu.end { left: auto; right: 0; transform-origin: top right; }
.me-menu { min-width: 220px; max-width: calc(100vw - 32px); }
.me-menu form { margin: 0; }
.me-menu .menu-item { min-height: 32px; }
.me-who { display: grid; gap: 2px; margin: 0 0 4px; padding: 6px 8px 8px; border-bottom: 1px solid var(--line); }
.me-who strong, .me-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-who strong { font: 500 13px/18px var(--sans); color: var(--ink); }
.me-who span { font-size: 12px; line-height: 16px; color: var(--dim); }
.chipbtn.me-btn { width: 28px; padding: 0; justify-content: center; }
/* "Your account…" (account.js) and "Edit…" on Users: a modal (modal.css) as tall as its
   forms ("modal-fit"), a full-screen sheet under 640px as any modal. The account dialog's two
   forms (your name and username; your password) are sections split by a hairline, each with
   its status and its own save button at the right. */
@media (min-width: 641px) { .modal.modal-fit { width: min(520px, calc(100vw - 32px)); height: fit-content; max-height: min(760px, calc(100dvh - 48px)); } }
.acct { display: grid; gap: 0; }
.acct-sec { padding: 12px 0 20px; }
.acct-sec + .acct-sec { border-top: 1px solid var(--line); padding-top: 20px; }
.acct-head h3 { margin: 0; font: 600 14px/20px var(--sans); color: var(--ink); }
.acct-head p { margin: 2px 0 0; font-size: 13px; line-height: 19px; color: var(--dim); }
.acct-acts { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.acct-foot { display: flex; justify-content: flex-end; width: 100%; }
.frow input[readonly] { background: var(--inset); color: var(--dim); }
.menu.wide { width: 340px; max-width: calc(100vw - 32px); }
.menu.wide .menu-item { min-height: 32px; }
.menu.wide .menu-label { padding: 5px 8px 1px; }
.menu.wide .menu-foot { min-height: 32px; }
.menu.wide .menu-item > span:not(.menu-tag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu.wide .menu-tag { font-variant-numeric: tabular-nums; }
.menu.wide .menu-end { position: sticky; bottom: -4px; margin: 4px -4px -4px; padding: 4px; background: var(--pop); border-top: 1px solid var(--line-2); }
.menu-search { position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: -4px -4px 4px; padding: 0 12px; height: 36px; background: var(--pop); border-bottom: 1px solid var(--line-2); color: var(--dim); }
.menu-search .ic { width: 12px; height: 12px; stroke-width: 2; flex: none; }
.menu-search input { flex: 1; min-width: 0; width: auto; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; color: var(--ink); font: 400 12px/16px var(--sans); }
.menu-search input::placeholder { color: var(--faint); }
.menu-search input::-webkit-search-cancel-button { display: none; }
.menu-note { margin: 0; padding: 8px; font-size: 11px; line-height: 16px; color: var(--dim); }

/* the period's popover: presets beside a month */
.menu.cal { display: flex; width: max-content; max-width: none; max-height: none; overflow: visible; padding: 0; }
.menu.cal[hidden] { display: none; }
.cal-presets { display: flex; flex-direction: column; width: 132px; padding: 4px; border-right: 1px solid var(--line-2); }
.cal-presets .menu-item { min-height: 32px; }
.cal-presets .menu-item[aria-checked=true] { background: var(--well); }
.cal-main { padding: 8px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-bottom: 4px; }
.cal-head strong { font-size: 12px; line-height: 16px; font-weight: 500; }
.cal-nav { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--dim); cursor: pointer; }
.cal-nav:hover:not(:disabled) { background: var(--well); color: var(--ink); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-nav .ic { width: 12px; height: 12px; stroke-width: 2; }
.cal-nav.prev .ic { transform: rotate(90deg); }
.cal-nav.next .ic { transform: rotate(-90deg); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 32px); row-gap: 2px; }
.cal-dow span { height: 24px; font-size: 10px; line-height: 24px; text-align: center; color: var(--faint); }
.cal-days { min-height: 202px; align-content: start; }
.cal-day { height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 400 12px/32px var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; outline: none; }
.cal-day:hover:not(:disabled), .cal-day:focus-visible { background: var(--well); color: var(--ink); }
.cal-day:disabled { color: var(--faint); opacity: .45; cursor: default; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--edge); }
/* a range is one band: square inside, rounded at its two ends */
.cal-day.in { background: var(--accent-soft); border-radius: 0; color: var(--ink); }
.cal-day.start, .cal-day.end, .cal-day.start:hover, .cal-day.end:hover { background: var(--accent); color: var(--accent-ink); font-weight: 500; box-shadow: none; }
.cal-day.start:not(.end) { border-radius: 8px 0 0 8px; }
.cal-day.end:not(.start) { border-radius: 0 8px 8px 0; }
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 11px; line-height: 16px; color: var(--dim); }
/* one line, always: the popover hangs from its bottom edge, so a footer
   that grew would move the days under the pointer */
.cal-foot span { min-width: 0; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .menu.cal { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; flex-direction: column; }
  .cal-presets { flex-direction: row; flex-wrap: wrap; width: auto; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .cal-presets .menu-item { width: auto; }
  .cal-main { align-self: center; }
}

.suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 24px 16px 0; }
.sug { min-height: 30px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font: 500 12px/16px var(--sans); cursor: pointer; transition: color .15s, border-color .15s; }
.sug:hover { color: var(--ink); border-color: var(--edge); }

/* conversation */
.talk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.talk-title { min-width: 0; }
.talk-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage.no-chats.has-panel .talk-top { padding-left: 48px; }
.talk-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; letter-spacing: -.02em; }
.msgs { list-style: none; margin: 0; padding: 22px 16px; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; scrollbar-color: var(--edge) transparent; }
.msg { display: flex; gap: 10px; align-items: flex-start; max-width: 100%; }
.msg-body { min-width: 0; }
.msg-body p { white-space: pre-wrap; word-break: break-word; }
.msg.user { justify-content: flex-end; }
.msg.notice .msg-body { padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--edge); color: var(--dim); }
.msg.notice .msg-body p { font-size: 13px; line-height: 20px; }
.msg.pending .msg-body p { color: var(--dim); }
.dots::after { content: "…"; animation: dots 1.2s steps(4, end) infinite; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes dots { 0% { width: 0; } 100% { width: 1.2em; } }
.stage.enter .talk-top, .stage.enter .msgs { display: none; }
.stage.talk .stage-hero, .stage.talk .stage-subband, .stage.talk .suggest { display: none; }
.stage.talk .prompt-frame { margin-top: 0; }
.stage.talk .prompt-frame::after { display: none; }
/* a reply's outputs: cards in the conversation, the panel beside it */
.outs { display: grid; gap: 6px; margin-top: 10px; }
.msg-body p + .outs { margin-top: 12px; }
.out-card { display: flex; align-items: center; gap: 10px; width: min(340px, 100%); padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.out-card:hover { border-color: var(--edge); }
.out-card.is-open { border-color: #525252; background: var(--well); }
.out-card > .ic { width: 16px; height: 16px; color: var(--dim); }
.out-name { display: grid; flex: 1; min-width: 0; }
.out-name strong { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-name em { font-style: normal; font-size: 11px; color: var(--dim); }
.out-card .go { width: 12px; height: 12px; color: var(--faint); transition: transform .15s, color .15s; }
.out-card:hover .go, .out-card.is-open .go { color: var(--ink); transform: translateX(2px); }

/* with the panel open the conversation takes about 40%, the panel the rest */
.stage.has-panel .stage-col { flex: 0 0 34%; width: auto; min-width: 320px; margin: 0; }
.stage.has-panel .stage-col::before { display: none; }
/* beside the panel the bands' hairlines stop at the column */
.stage.has-panel .band::before, .stage.has-panel .band::after { left: 0; right: 0; }
.panel { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--line-2); animation: panel-in .18s ease-out; }
.panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.panel-top { display: flex; align-items: center; gap: 8px; height: 49px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line-2); flex: none; }
.panel-tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.panel-tabs::-webkit-scrollbar { display: none; }
.panel-tab { flex: none; display: inline-flex; align-items: center; max-width: 196px; height: 28px; padding: 0 4px 0 0; border-radius: 8px; color: var(--dim); transition: color .15s, background .15s; }
.panel-tab:hover { color: var(--ink); }
.panel-tab[aria-selected=true] { background: var(--accent-soft); color: var(--ink); font-weight: 500; }
.panel-tab-label { min-width: 0; height: 100%; padding: 0 4px 0 10px; border: 0; background: none; color: inherit; font: inherit; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.panel-tab-x { flex: none; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--faint); cursor: pointer; }
.panel-tab-x:hover { background: var(--line-2); color: var(--ink); }
.panel-tab-x .ic { width: 10px; height: 10px; }
.panel-close { flex: none; width: 28px; padding: 0; justify-content: center; }
.panel-body { flex: 1; min-height: 0; overflow: auto; padding: 20px 20px 28px; scrollbar-color: var(--edge) transparent; }
.panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.panel-head:has(+ .panel-note) { margin-bottom: 4px; }
.panel-note { margin-bottom: 16px; font-size: 12px; line-height: 18px; color: var(--dim); }

/* a status: a solid fill in its tone, with an icon and the word */
.status { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; border-radius: 6px; background: var(--accent-soft); color: var(--ink-2); font: 600 11px/22px var(--sans); letter-spacing: 0; white-space: nowrap; }
.status .ic { width: 11px; height: 11px; stroke-width: 3; }
.status[class*=tone-] { color: var(--tone-ink); }
.status.tone-pending { background: var(--tone-pending); }
.status.tone-ok { background: var(--tone-ok); }
.status.tone-failed { background: var(--tone-failed); }
.status.tone-cancelled { background: var(--tone-cancelled); }

/* the figures that answer the question (.figs, reui chart-1): chat-ui.css, section 3 */
/* several outputs as one view: each under a small heading */
.out-sections { display: grid; gap: 26px; }
.out-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.out-section-head h3 { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.out-section .panel-note { margin-top: -6px; margin-bottom: 10px; }
.panel-head h2 { font-size: 18px; font-weight: 500; letter-spacing: -.03em; overflow-wrap: anywhere; }
.out-table { border: 1px solid var(--line-2); border-radius: 12px; overflow: auto; background: var(--inset); }
.out-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.out-table th { position: sticky; top: 0; text-align: left; padding: 9px 12px; background: var(--pop); color: var(--dim); font-size: 10px; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.out-table td { padding: 9px 12px; border-top: 1px solid var(--line-2); white-space: nowrap; }
.out-table tbody tr:first-child td { border-top: 0; }
.out-table tbody tr:hover td { background: rgba(255, 255, 255, .02); }
.out-table .k-money, .out-table .k-number { text-align: right; font-variant-numeric: tabular-nums; }
.out-table td.k-time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.out-table td.k-status { padding-top: 7px; padding-bottom: 7px; }
.out-table .none, .out-fields .none { color: var(--faint); }
/* a table that fits the panel: hidden columns, a detail line per row,
   cards for a few rows, a footer of totals */
.out-tablewrap { display: grid; gap: 8px; min-width: 0; }
.out-sub { font-size: 12px; line-height: 18px; color: var(--dim); }
.out-tablebar { display: flex; justify-content: flex-end; }
.out-tablebar[hidden], .out-table[hidden], .out-cards[hidden], .out-count[hidden] { display: none; }
.out-table .col-hidden { display: none; }
.out-table td:first-child, .out-table th:first-child { position: sticky; left: 0; z-index: 1; background: #141414; }
.out-table th:first-child { z-index: 2; background: var(--pop); }
.out-table .cell-text { display: inline-block; max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.out-table .cell-text.wrap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 52ch; }
.out-table .pos { color: var(--tone-ok); }
.out-table .neg, .out-fields .neg { color: #f0787c; }
.out-table tfoot td { border-top: 1px solid var(--edge); padding: 9px 12px; font-weight: 500; white-space: nowrap; background: var(--pop); }
.row-open { display: none; width: 18px; height: 18px; margin: 0 6px 0 -4px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--dim); cursor: pointer; vertical-align: middle; }
.out-table.has-detail .row-open, table.has-detail .row-open { display: inline-grid; place-items: center; }
.row-open:hover { background: var(--well); color: var(--ink); }
.row-open .ic { width: 12px; height: 12px; stroke-width: 2; transform: rotate(-90deg); transition: transform .12s; }
.row-open[aria-expanded=true] .ic { transform: none; }
.out-table tr.detail td { position: static; padding: 4px 12px 14px 30px; white-space: normal; background: rgba(255, 255, 255, .015); border-top: 0; }
.out-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; margin: 0; }
.out-detail > div { display: grid; gap: 1px; min-width: 0; }
.out-detail dt { font-size: 10.5px; letter-spacing: .025em; text-transform: uppercase; color: var(--faint); }
.out-detail dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.out-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.out-record-title { padding: 0 2px 8px; font-size: 13px; font-weight: 500; }
.out-count { font-size: 12px; line-height: 18px; color: var(--dim); }
.out-count .chipbtn { margin-left: 6px; }
.out-fields > .out-fields-group { padding: 12px 14px 6px; border-top: 1px solid var(--line-2); font-size: 10.5px; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; color: var(--faint); min-height: 0; display: block; }
.out-fields > .out-fields-group:first-child { border-top: 0; }
.out-fields > .out-fields-group + div { border-top: 0; }
/* a reference: monospace, and a click copies it */
.ref { padding: 1px 5px; margin: -1px -5px; border: 0; border-radius: 5px; background: none; color: var(--ink); font: 12px/1.5 var(--mono); letter-spacing: 0; cursor: copy; }
.ref:hover { background: var(--well); }
.ref.copied { background: var(--ok-soft); color: var(--ok); }
/* one record, as labelled values */
.out-fields { display: grid; margin: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--inset); overflow: hidden; }
.out-fields > div { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 16px; align-items: center; min-height: 40px; padding: 8px 14px; border-top: 1px solid var(--line-2); font-size: 13px; }
.out-fields > div:first-child { border-top: 0; }
.out-fields dt { color: var(--dim); }
.out-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.out-fields dd.k-money, .out-fields dd.k-number, .out-fields dd.k-time { font-variant-numeric: tabular-nums; }
.out-chart { display: grid; gap: 14px; }
.chart .bar.tone-pending { fill: var(--tone-pending); }
.chart .bar.tone-ok { fill: var(--tone-ok); }
.chart .bar.tone-failed { fill: var(--tone-failed); }
.chart .bar.tone-cancelled { fill: var(--tone-cancelled); }
.chart.big { height: 240px; padding: 16px 16px 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--inset); }
.out-pre { margin: 0; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--inset); color: var(--ink-2); font: 12px/1.6 var(--mono); letter-spacing: 0; white-space: pre-wrap; word-break: break-word; }
.out-pre.text { font: 13px/1.6 var(--sans); }
@media (max-width: 900px) {
  /* on a small screen the panel covers the page */
  .panel { position: fixed; inset: 0; z-index: 60; border-left: 0; }
  .stage.has-panel .stage-col { flex: 1; max-width: none; min-width: 0; }
  .split { display: none; }
  /* and the list of chats opens over it */
  .chats { position: absolute; inset: 0 auto 0 0; width: min(280px, 86vw); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
  .stage.no-chats .talk-top { padding-left: 48px; }
}
@media (max-width: 820px) {
  .topnav { padding: 4px 8px; }
  .topnav-in { padding: 0 8px; }
  .topnav-links { overflow-x: auto; scrollbar-width: none; min-width: 0; margin: 0 6px; }
  .topnav-links a { padding: 8px 9px; }
  .topnav-links a + a { margin-left: 0; }
  .topnav-out { padding: 8px 9px; }
  .app.solo .main { padding-top: 49px; }
  .stage { height: auto; min-height: calc(100dvh - 49px); overflow: visible; }
  .stage.talk { height: calc(100dvh - 49px); min-height: 380px; }
  .prompt-hint { display: none; }
  .send { margin-left: auto; }
  .prompt-bar { flex-wrap: wrap; }
  .prompt textarea, .stage.talk .prompt textarea { height: 156px; padding-bottom: 76px; }
  .sug { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { .dots::after, .menu, .panel { animation: none; } }


/* people chips: a person or chat as a pill with a letter avatar (Teams and
   WhatsApp allowed/watched lists, WhatsApp contacts). The avatar hue comes
   from the chat id (avatar.go), so a chat keeps its colour. */
.who-list { display: flex; flex-wrap: wrap; gap: 8px; }
.who { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0;
  height: 32px; padding: 3px 4px 3px 3px; border: 1px solid var(--edge); border-radius: 999px; background: var(--background); box-shadow: var(--shadow-xs); }
.who:not(:has(.who-x)) { padding-right: 12px; }
.who form { display: contents; }
.who-av { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 600 10px/1 var(--sans); letter-spacing: .02em; color: #fff; background: #52525b; }
.who-row .who-av { width: 32px; height: 32px; font-size: 12px; }
/* No name known: the person glyph, never a character of an id. */
.who-av .ic { width: 62%; height: 62%; stroke-width: 2; }
.who-av.h0 { background: #4f46e5; } .who-av.h1 { background: #0f766e; }
.who-av.h2 { background: #b45309; } .who-av.h3 { background: #be185d; }
.who-av.h4 { background: #1d4ed8; } .who-av.h5 { background: #7c3aed; }
.who-av.h6 { background: #15803d; } .who-av.h7 { background: #c2410c; }
.who-name { font: 500 13px/20px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.who-tag { font: 400 12px/16px var(--sans); color: var(--dim); white-space: nowrap; }
/* the line beside the name: a WhatsApp chat's number */
.who-sub { font: 400 12px/16px var(--mono); color: var(--dim); white-space: nowrap; }
.who-x { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 0; padding: 0; background: transparent; color: var(--faint); cursor: pointer; }
.who-x:hover, .who-x:focus-visible { background: var(--crit-soft); color: var(--crit-ink); }
.who-x .ic { width: 12px; height: 12px; }
.who-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pager-btns { display: inline-flex; align-items: center; gap: 8px; }
.pager .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
/* people chips: the contacts view switch (address book / everyone) */
.seg { display: inline-flex; justify-self: start; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--well); }
.seg a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--dim); text-decoration: none; font: 500 14px/20px var(--sans); }
.seg a:hover { color: var(--ink); }
.seg a[aria-current="page"] { background: var(--card); border-color: var(--edge); color: var(--ink); box-shadow: var(--shadow-xs); }
.seg-n { font: 400 12px/16px var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; }
.seg a[aria-current="page"] .seg-n { color: var(--dim); }
.who-kind { color: var(--ink-2); }

/* brand logos: the connections' coloured marks (symbols i-logo-<slug> in
   layout.html). Their colours are drawn in, so only the size is set here. */
.ic.logo { stroke: none; }
.item > .ic.logo { width: 18px; height: 18px; margin: -1px; }
.badge.logo-badge { background: none; border: 0; padding: 0; }
.badge.logo-badge .ic.logo { width: 32px; height: 32px; }

/* Close buttons (a cross that closes or dismisses: tabs, the output panel,
   the picture viewer, dialogs, messages, notes, people chips, a chat's
   delete): a small solid red circle with a white cross, everywhere, at full
   opacity. The user's choice. The red is the "failed" badges' (dark enough
   for white, the same in both themes), not the theme's lighter error tint.
   Specific enough to win over each button's own rules; a tab's cross still
   shows only on the current or pointed-at tab. */
:root { --close-red: #c81e1e; --close-red-hover: #a51616; }
button:is(.ctab-x, .panel-close, .vw-close, .modal-x, .flash-x, .who-x, .dock-x, .icon-btn:has(> svg use[href="#i-x"])) {
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--close-red); color: #fff; box-shadow: none; filter: none;
}
button:is(.ctab-x, .panel-close, .vw-close, .modal-x, .flash-x, .who-x, .dock-x, .icon-btn:has(> svg use[href="#i-x"])):is(:hover, :focus-visible) {
  background: var(--close-red-hover); color: #fff;
}
button:is(.ctab-x, .panel-close, .vw-close, .modal-x, .flash-x, .who-x, .dock-x, .icon-btn:has(> svg use[href="#i-x"])) .ic { width: 8px; height: 8px; color: #fff; stroke-width: 3; }
/* Visible ones are fully opaque (a tab's shows on the current or pointed-at tab only). */
button:is(.panel-close, .vw-close, .modal-x, .flash-x, .who-x, .dock-x) { opacity: 1; }
.ctab:hover .ctab-x, .ctab.is-current .ctab-x, button.ctab-x:focus-visible { opacity: 1; }
.chat-row:hover button.icon-btn, .chat-row:focus-within button.icon-btn { opacity: 1; }
/* Sizes: small everywhere, a little larger on the panel, dialogs and the
   viewer. (!important: each button's own rules set sizes with selectors of
   every weight; these are the user's, for all of them.) */
button:is(.ctab-x, .flash-x, .who-x, .dock-x, .icon-btn:has(> svg use[href="#i-x"])) { width: 16px !important; height: 16px !important; min-width: 16px !important; }
button:is(.panel-close, .modal-x) { width: 20px !important; height: 20px !important; min-width: 20px !important; }
button:is(.panel-close, .modal-x) .ic { width: 9px; height: 9px; }
button.vw-close { width: 24px !important; height: 24px !important; min-width: 24px !important; }
button.vw-close .ic { width: 10px; height: 10px; }