/* Design tokens and kit ported from the Presence app (globals.css + components/kit). */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(/fonts/plex-sans-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(/fonts/plex-sans-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(/fonts/plex-sans-600.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(/fonts/plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/fonts/plex-mono-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url(/fonts/plex-mono-600.woff2) format("woff2"); }

:root {
  --paper: #f5f5f3; --surface: #ffffff; --subtle: #efefec; --line: #dadad5; --line-strong: #a9a9a2;
  --ink: #141414; --ink-2: #4b4b47; --ink-3: #7c7c76;
  --ok: #1e7b3c; --warn: #a95c00; --crit: #c4271f; --on-accent: #ffffff;
  --accent: #3a49c9;
  --overlay: rgb(0 0 0 / 0.45);
  --shadow-toast: 0 6px 20px -8px rgb(0 0 0 / 0.25);
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}
.dark {
  --paper: #0d0d0e; --surface: #151516; --subtle: #1d1d1f; --line: #2c2c2f; --line-strong: #4a4a4f;
  --ink: #ececea; --ink-2: #b3b3ae; --ink-3: #85857f;
  --ok: #4cae6c; --warn: #e09a3a; --crit: #ee5a4f; --on-accent: #ffffff;
  --accent: #7d8bff;
  --overlay: rgb(0 0 0 / 0.65);
  --shadow-toast: 0 6px 20px -8px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--line); }
html { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.45; font-feature-settings: "tnum" 1; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; background: none; padding: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
svg.i { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--ink-3); }
.t-ink2 { color: var(--ink-2); } .t-ok { color: var(--ok); } .t-warn { color: var(--warn); } .t-crit { color: var(--crit); }
.hatch { background-image: repeating-linear-gradient(-45deg, currentColor 0 1.5px, transparent 1.5px 5px); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* App shell */
.shell { display: flex; min-height: 100dvh; width: 100%; }
.sidebar { position: sticky; top: 0; display: none; height: 100dvh; width: 56px; flex-shrink: 0; flex-direction: column; border-right-width: 1px; background: var(--surface); }
.side-brand { display: flex; height: 44px; align-items: center; gap: 8px; padding: 0 16px; border-bottom-width: 1px; }
.wordmark { display: none; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; white-space: nowrap; }
.side-brand { min-width: 0; }
.side-brand .label { display: none; min-width: 0; margin-left: auto; padding: 1px 4px; border: 1px solid var(--line); border-radius: 2px; font-size: 9px; line-height: 14px; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 3px; background: var(--accent); color: #fff; }
.brand-mark svg.i { width: 12px; height: 12px; stroke-width: 2.5; }
.side-nav { display: flex; flex-direction: column; padding: 8px 0; }
.nav-item { position: relative; display: flex; height: 36px; align-items: center; justify-content: center; gap: 10px; border-left: 2px solid transparent; font-size: 13px; color: var(--ink-2); }
.nav-item:hover { background: color-mix(in srgb, var(--subtle) 60%, transparent); color: var(--ink); }
.nav-item[aria-current="page"] { border-left-color: var(--ink); background: var(--subtle); color: var(--ink); font-weight: 500; }
.nav-item .text { display: none; }
.nav-badge { display: grid; place-items: center; height: 16px; min-width: 16px; padding: 0 4px; border-radius: 2px; background: var(--warn); color: var(--on-accent); font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1; }
.side-nav .nav-badge { position: absolute; right: 6px; top: 4px; }
.side-foot { margin-top: auto; }
.view-switch { width: 100%; border-top-width: 1px; }
.view-banner { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; padding: 2px 8px; border: 1px solid var(--warn); border-radius: 3px; font-family: var(--mono); font-size: 11px; color: var(--warn); white-space: nowrap; }
.view-banner .tone-dot { width: 6px; height: 6px; background: currentColor; }
.view-banner button { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.view-banner button:hover { color: var(--accent); }
@media (max-width: 420px) { .view-banner button { display: none; } }
.side-user { border-top-width: 1px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; }
.side-user .who { display: none; min-width: 0; flex: 1; }
.who-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-role { font-size: 12px; color: var(--ink-3); }
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; color: var(--ink-3); flex-shrink: 0; }
.icon-btn:hover { background: var(--subtle); color: var(--ink); }
.icon-btn.bordered { border-width: 1px; }
.shell-main { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom-width: 1px; background: var(--surface); }
.dateline { display: none; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.dateline .sep { color: var(--line-strong); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-day { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
main { width: 100%; min-width: 0; flex: 1; padding: 20px 16px 96px; }
.page { display: flex; flex-direction: column; gap: 16px; max-width: 1200px; }
.tabbar { position: fixed; inset: auto 0 0 0; z-index: 40; border-top-width: 1px; background: var(--surface); padding-bottom: env(safe-area-inset-bottom); }
.tabbar ul { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 56px; }
.tab-item { position: relative; display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-top: 2px solid transparent; font-size: 11px; color: var(--ink-3); }
.tab-item[aria-current="page"] { border-top-color: var(--ink); color: var(--ink); font-weight: 500; }
.tab-item .nav-badge { position: absolute; left: 50%; top: 4px; margin-left: 8px; }
@media (min-width: 768px) {
  .sidebar { display: flex; }
  .md-hidden, .tabbar { display: none !important; }
  .dateline { display: flex; }
  .topbar { padding: 0 24px; }
  main { padding: 24px 24px 48px; }
}
@media (min-width: 1024px) {
  .sidebar { width: 208px; }
  .wordmark, .side-brand .label, .nav-item .text, .side-user .who { display: inline; }
  .side-user .who { display: block; }
  .side-brand .label { display: inline-block; }
  .nav-item { justify-content: flex-start; padding: 0 16px; }
  .side-nav .nav-badge { position: static; margin-left: auto; }
  .side-user { justify-content: flex-start; padding: 12px 16px; }
}

/* PageHeader */
.page-header { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border-bottom-width: 1px; }
.page-header.has-tabs { padding-bottom: 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); min-width: 0; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.crumbs .current { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ph-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.ph-row > div:first-child { min-width: 0; }
.page-header h1 { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ph-meta { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--ink-2); }
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.meta-item { display: inline-flex; align-items: baseline; gap: 6px; }
.meta-item .label { font-size: 10px; }
.meta-item .mono { color: var(--ink); }
.tabs { display: flex; gap: 20px; margin-top: 4px; }
.tab { margin-bottom: -1px; padding: 6px 0 9px; border-bottom: 2px solid transparent; font-size: 13px; color: var(--ink-2); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 500; }

/* Panel, KPIs, Facts, Callout */
.panel { min-width: 0; border-width: 1px; border-radius: 3px; background: var(--surface); }
.panel-header { display: flex; min-height: 40px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 8px 16px; border-bottom-width: 1px; }
.panel-header > div { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.panel-header h2 { font-size: 13px; font-weight: 600; }
.panel-header p { font-size: 12px; color: var(--ink-3); }
.panel-body { padding: 16px; }
.panel-note { padding: 8px 16px; border-top-width: 1px; background: color-mix(in srgb, var(--subtle) 60%, transparent); font-size: 12px; color: var(--ink-3); }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border-width: 1px; border-radius: 3px; background: var(--line); }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: var(--surface); }
a.kpi:hover { background: var(--subtle); }
.kpi dt { display: flex; align-items: center; gap: 6px; }
.kpi .tone-dot { width: 6px; height: 6px; background: currentColor; }
.kpi .value { font-family: var(--mono); font-size: 22px; font-weight: 500; line-height: 1.25; }
.kpi .hint { font-size: 12px; color: var(--ink-3); }
@media (min-width: 1024px) { .kpis { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } }
.facts { font-size: 13px; }
.fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; }
.fact + .fact { border-top-width: 1px; }
.fact:first-child { padding-top: 0; } .fact:last-child { padding-bottom: 0; }
.fact dt { color: var(--ink-2); }
.fact dd { text-align: right; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.callout { border-width: 1px; border-left: 3px solid var(--ink); border-radius: 3px; background: var(--surface); padding: 12px 16px; }
.callout.ok { border-left-color: var(--ok); } .callout.warn { border-left-color: var(--warn); } .callout.crit { border-left-color: var(--crit); }
.callout .title { font-size: 13px; font-weight: 600; }
.callout.ok .title { color: var(--ok); } .callout.warn .title { color: var(--warn); } .callout.crit .title { color: var(--crit); }
.callout .body { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1280px) { .grid-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.empty { padding: 32px 16px; text-align: center; }
.empty .title { font-size: 13px; font-weight: 500; }
.empty .desc { margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.empty.boxed { margin: 16px; border: 1px dashed var(--line-strong); border-radius: 3px; }
.skeleton { border-radius: 3px; background: var(--subtle); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* Div-grid tables */
.thead { display: none; align-items: center; gap: 12px; padding: 8px 16px; border-bottom-width: 1px; background: color-mix(in srgb, var(--subtle) 60%, transparent); font-size: 10px; }
.trow { position: relative; display: grid; align-items: center; gap: 4px 12px; padding: 10px 16px; border-bottom-width: 1px; transition: background-color .15s; }
.trow:last-child { border-bottom-width: 0; }
.trow:hover { background: color-mix(in srgb, var(--subtle) 50%, transparent); }
.right { text-align: right; justify-self: end; }
.issue-grid { grid-template-columns: auto minmax(0, 1fr); }
.top-grid { grid-template-columns: auto minmax(0, 1fr) auto; }
.digest-grid { grid-template-columns: minmax(0, 1fr) auto; }
.digest-grid > :nth-child(3) { grid-column: 1 / -1; }
.issue-row .vote { grid-row: span 2; align-self: start; }
.issue-row .cell-title { min-width: 0; }
.issue-row .cell-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; grid-column: 2; }
.md-cell { display: none; }
.row-link { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.row-snippet { margin-top: 2px; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .vote, .trow details, .trow button { position: relative; z-index: 1; }
.trow.is-hidden .row-link, .trow.is-hidden .row-snippet { opacity: .6; }
@media (min-width: 768px) {
  .thead { display: grid; }
  .issue-grid { grid-template-columns: 64px minmax(0, 1fr) 120px 7.25rem 72px; }
  .issue-row .vote { grid-row: auto; align-self: center; }
  .issue-row .cell-sub { display: none; }
  .md-cell { display: block; }
  .top-grid { grid-template-columns: 64px minmax(0, 1fr) 7.25rem 72px; }
  .digest-grid { grid-template-columns: 180px 70px minmax(0, 1fr); }
  .digest-grid > :nth-child(3) { grid-column: auto; }
}
.digest-row { display: block; padding: 0; }
.digest-row summary { display: grid; gap: 4px 12px; align-items: center; padding: 10px 16px; cursor: pointer; list-style: none; }
.digest-row summary::-webkit-details-marker { display: none; }
.digest-row[open] summary { border-bottom-width: 1px; }
.digest-row pre { margin: 0; padding: 12px 16px; white-space: pre-wrap; overflow-x: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-2); background: color-mix(in srgb, var(--subtle) 60%, transparent); }

/* StatusTag */
.status-tag { display: inline-flex; height: 20px; width: 7.25rem; flex-shrink: 0; align-items: center; gap: 6px; padding: 0 6px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 2px; background: var(--surface); font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.status-tag.auto { width: auto; }
.status-tag.strong { border-color: var(--crit); background: var(--crit); color: var(--on-accent); }
.mark { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; }
.mark.solid { background: currentColor; }
.mark.hollow, .mark.hatch { border: 1px solid currentColor; }
.mark.dashed { border: 1px dashed currentColor; }

/* Buttons */
.btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; user-select: none; transition: background-color .15s, border-color .15s; }
.btn svg.i { width: 14px; height: 14px; }
.btn:hover { background: var(--subtle); }
.btn:disabled { pointer-events: none; opacity: .4; }
.btn.primary { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.btn.primary:hover { border-color: var(--ink-2); background: var(--ink-2); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--subtle); color: var(--ink); }
.btn.danger { border-color: var(--crit); background: var(--crit); color: var(--on-accent); }
.btn.danger:hover { opacity: .9; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; gap: 6px; }
.btn.lg { height: 40px; padding: 0 16px; font-size: 14px; }
.btn.icon { width: 32px; padding: 0; }
/* Vote button: the one accent-coloured control */
.vote { display: inline-flex; height: 28px; min-width: 56px; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink-2); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.vote svg.i { width: 14px; height: 14px; stroke-width: 2.5; }
.vote:hover { border-color: var(--accent); color: var(--accent); }
.vote.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.vote.lg { height: 32px; min-width: 64px; font-size: 13px; }

/* Fields */
.fields { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.field-label .label { font-size: 10px; }
.field-hint { font-size: 12px; color: var(--ink-3); }
.field-error { font-size: 12px; color: var(--crit); }
.input, .textarea, .select { width: 100%; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); padding: 0 10px; font-size: 13px; color: var(--ink); outline: none; transition: border-color .15s; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--ink); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--crit); }
.input { height: 32px; }
.textarea { min-height: 96px; padding: 8px 10px; line-height: 20px; resize: vertical; }
.select-wrap { position: relative; display: block; }
.select { height: 32px; appearance: none; padding-right: 32px; }
.select-wrap svg.i, .search svg.i { position: absolute; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.select-wrap svg.i { right: 10px; }
.search { position: relative; }
.search svg.i { left: 10px; }
.search .input { height: 36px; padding-left: 32px; }
.check { display: flex; min-height: 32px; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }
.toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.toolbar .search { grid-column: 1 / -1; }
@media (min-width: 768px) { .toolbar { grid-template-columns: minmax(0, 1fr) 180px 180px; } .toolbar .search { grid-column: auto; } }

/* Dialog: centred on md+, bottom sheet below */
.overlay { position: fixed; inset: 0; z-index: 60; background: var(--overlay); animation: fade .1s; }
.dialog { position: fixed; inset: auto 0 0 0; z-index: 61; width: 100%; max-height: 90dvh; overflow-y: auto; border-width: 1px; border-radius: 4px 4px 0 0; background: var(--surface); animation: sheet .15s; padding-bottom: env(safe-area-inset-bottom); }
.dialog.danger { border-top: 3px solid var(--crit); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom-width: 1px; }
.dialog-head h2 { font-size: 14px; font-weight: 600; }
.dialog.danger .dialog-head h2 { color: var(--crit); }
.dialog-head p { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.dialog-head .btn { margin: -4px -8px 0 0; }
.dialog-body { padding: 16px; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top-width: 1px; background: color-mix(in srgb, var(--subtle) 60%, transparent); }
@media (min-width: 768px) {
  .dialog { inset: 50% auto auto 50%; max-width: 32rem; border-radius: 4px; transform: translate(-50%, -50%); animation: fade .15s; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes sheet { from { opacity: 0; transform: translateY(8px); } }

/* Toasts (sonner-like) */
.toasts { position: fixed; z-index: 70; right: 16px; bottom: 72px; left: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
@media (min-width: 768px) { .toasts { left: auto; bottom: 24px; right: 24px; } }
.toast { pointer-events: auto; position: relative; display: flex; width: 100%; max-width: 24rem; align-items: center; gap: 12px; padding: 8px 36px 8px 12px; border-width: 1px; border-left: 3px solid var(--ink); border-radius: 3px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-toast); animation: sheet .15s; }
@media (min-width: 768px) { .toast { width: 22rem; } }
.toast.error { border-left-color: var(--crit); }
.toast .t-title { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast .t-desc { margin-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.toast .content { min-width: 0; flex: 1; }
.toast .close { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink-3); }
.toast .close:hover { color: var(--ink); }
.toast .close svg.i { width: 14px; height: 14px; }

/* Sign-in page (Presence login layout, plus an ambient example board) */
.signin { display: flex; flex-direction: column; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; }
.signin-main { position: relative; display: grid; flex: 1; place-items: center; padding: 40px 16px; }
.signin-main::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--paper) 55%, transparent) 0, var(--paper) 70%); pointer-events: none; }
.signin-top { padding: 0 16px; }
.signin-brand { display: flex; align-items: center; gap: 8px; }
.signin-brand .wordmark { display: inline; }
.signin-card { position: relative; display: grid; width: 100%; max-width: 24rem; overflow: hidden; border-width: 1px; border-radius: 3px; background: var(--surface); }
.signin-form { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 24px; min-width: 0; }
.signin-hero { display: flex; flex-direction: column; gap: 8px; }
.signin-hero h1 { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.hero-line { display: block; }
.hero-word { display: inline-block; color: var(--accent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 35%, transparent); }
.hero-word.swap { animation: word .35s ease-out; }
@keyframes word { from { opacity: 0; transform: translateY(6px); } }
.signin-lede { font-size: 13px; color: var(--ink-2); }
.signin-state { display: flex; flex-direction: column; gap: 16px; }
.signin-btn { width: 100%; }
.signin-note { text-align: center; font-size: 12px; color: var(--ink-3); }
.signin-loading { display: flex; flex-direction: column; gap: 12px; }
.signin-loading .title { font-size: 13px; font-weight: 500; }
.signin-loading .signin-note { text-align: left; }
.progress { height: 4px; overflow: hidden; background: var(--subtle); }
.progress > div { height: 100%; width: 33%; background: var(--ink); animation: slide 1.1s ease-in-out infinite alternate; }
@keyframes slide { to { transform: translateX(200%); } }
.dev-login { border: 1px dashed var(--line-strong); border-radius: 3px; }
.dev-login summary { display: flex; align-items: center; gap: 6px; padding: 8px 12px; cursor: pointer; color: var(--warn); list-style: none; }
.dev-login summary::-webkit-details-marker { display: none; }
.dev-login .tone-dot { width: 6px; height: 6px; background: currentColor; }
.dev-login form { padding: 4px 12px 12px; }
.signin-kpis { grid-template-columns: repeat(3, 1fr); }
.signin-kpis .kpi { padding: 8px 10px; gap: 2px; }
.signin-kpis .label { font-size: 10px; }
.signin-kpis dd { margin: 0; }
.signin-kpis .value { font-size: 15px; }
.signin-kpis .hint { font-size: 11px; }
.board { display: none; min-width: 0; flex-direction: column; border-right-width: 1px; background: color-mix(in srgb, var(--subtle) 45%, var(--surface)); }
.board-head { display: flex; justify-content: space-between; padding: 10px 16px; border-bottom-width: 1px; font-size: 10px; }
.board-head .label { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.live-dot { width: 6px; height: 6px; background: var(--ok); animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.board-window { position: relative; flex: 1; min-height: 0; overflow: hidden; mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.board-list { animation: scroll 60s linear infinite; }
.board:hover .board-list { animation-play-state: paused; }
@keyframes scroll { to { transform: translateY(-50%); } }
.board-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom-width: 1px; }
.board-row .vote { pointer-events: none; }
.board-row .vote.bump { animation: bump .6s ease-out; }
@keyframes bump { from { border-color: var(--accent); background: var(--accent); color: #fff; } }
.board-title { display: flex; min-width: 0; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 500; }
.board-title .label { font-size: 10px; }
.board-note { padding: 8px 16px; border-top-width: 1px; font-size: 12px; color: var(--ink-3); }
@media (min-width: 900px) {
  .signin-top { padding: 0 24px; }
  .signin-card { max-width: 60rem; grid-template-columns: minmax(0, 1fr) 24rem; min-height: 32rem; }
  .board { display: flex; contain: size; } /* the form sets the card height; the board scrolls inside it */
  .signin-form { padding: 32px; }
  .signin-hero h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .board-list, .live-dot, .progress > div { animation: none !important; } }

/* Users and roles */
.chip { display: inline-block; margin-left: 6px; padding: 0 4px; border: 1px solid var(--line); border-radius: 2px; font-size: 9px; line-height: 14px; vertical-align: 1px; }
.row-name { min-width: 0; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; grid-column: 1 / -1; }
.cell-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-tag .tag-text { overflow: hidden; text-overflow: ellipsis; }
.trow.is-off .row-name, .trow.is-off .cell-email { opacity: .6; }
.user-grid { grid-template-columns: minmax(0, 1fr) auto; }
.role-grid { grid-template-columns: minmax(0, 1fr) auto auto; }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 3px; overflow: hidden; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: block; padding: 6px 12px; font-size: 13px; color: var(--ink-2); }
.segmented label + label span { border-left: 1px solid var(--line-strong); }
.segmented input:checked + span { background: var(--ink); color: var(--surface); font-weight: 500; }
.segmented input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -4px; }
.perm-picker { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }
.perm-group { border: 1px solid var(--line); border-radius: 3px; padding: 6px 10px; }
.perm-group > .label { font-size: 10px; }
.perm-row { justify-content: flex-start; border-bottom: 1px solid var(--line); }
.perm-row:last-child { border-bottom: 0; }
.perm-note { margin-left: auto; font-size: 10px; text-align: right; }
@media (min-width: 1024px) {
  .user-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 8.5rem 7.25rem 90px 210px; }
  .role-grid { grid-template-columns: minmax(0, 1fr) 100px 70px 140px; }
  .row-actions { grid-column: auto; }
}