:root {
  color-scheme: light;
  --page: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781;
  --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11,11,11,0.10);
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --good: #0ca30c; --warning: #fab219; --critical: #d03b3b;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781;
    --grid: #2c2c2a; --axis: #383835; --border: rgba(255,255,255,0.10);
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }
a { color: var(--s1); }
h1 { font-size: 24px; margin: 0 0 4px; } h2 { font-size: 19px; margin: 32px 0 12px; } h3 { font-size: 16px; margin: 24px 0 8px; }
.muted { color: var(--muted); } .sub { color: var(--ink-2); margin: 0 0 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin: 12px 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.tile .label { color: var(--ink-2); font-size: 13px; } .tile .value { font-size: 22px; font-weight: 600; white-space: nowrap; }
.delta { display: block; color: var(--ink-2); font-size: 13px; font-weight: 400; }
.status { font-weight: 600; } .status-good { color: var(--good); } .status-critical { color: var(--critical); } .status-warning { color: var(--ink); }
.status-warning::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); margin-right: 6px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
th { color: var(--ink-2); font-weight: 600; white-space: nowrap; } td:first-child { white-space: nowrap; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
details summary { cursor: pointer; color: var(--s1); }
td.out { min-width: 320px; }
pre { white-space: pre-wrap; word-break: break-word; background: var(--page); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-size: 12px; max-height: 320px; overflow: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-2); margin: 4px 0 8px; }
.legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 6px; }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; }
.tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.15); display: none; white-space: nowrap; }
.ok { color: var(--good); } .ko { color: var(--critical); }

:root, :root:where(:not([data-theme="light"])) { color-scheme:dark; --page:#0a0f1d; --surface:#111a2c; --surface-2:#16213a; --ink:#e8edf7; --ink-2:#b3bed3; --muted:#8190ab; --border:#22304b; --grid:#1b2640; --axis:#2d3b58; --good:#22c55e; --critical:#f05252; --warning:#f59e0b; --warn-ink:#fbbf24; --accent:#7c5cff; --accent-soft:rgba(124,92,255,.16); --link:#7aa7ff; --s1:#7c5cff; --s2:#f97316; --s3:#22c55e; --s4:#eab308; --radius:12px; }
:root[data-theme="light"] { color-scheme:light; --page:#f4f6fb; --surface:#ffffff; --surface-2:#f7f8fc; --ink:#101828; --ink-2:#475467; --muted:#667085; --border:#e3e8f0; --grid:#edf0f6; --axis:#cfd6e3; --good:#16a34a; --critical:#dc2626; --warning:#d97706; --warn-ink:#b45309; --accent:#6941f5; --accent-soft:rgba(105,65,245,.10); --link:#2f5fe0; --s1:#6941f5; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { font-size:14px; -webkit-font-smoothing:antialiased; background:var(--page); color:var(--ink); }
a { color:var(--link); text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
[hidden] { display:none !important; }
.skip-link { position:absolute; left:12px; top:-100px; z-index:30; background:var(--surface); padding:12px; }
.skip-link:focus { top:12px; }
.app-header { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.app-header-inner { max-width:1480px; margin:auto; padding:10px 24px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:750; font-size:16px; color:var(--ink); text-decoration:none; letter-spacing:-.3px; white-space:nowrap; }
.brand-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:#fff; background:linear-gradient(135deg,#8b5cf6,#6366f1); font-size:17px; }
.primary-nav { display:flex; gap:2px; }
.primary-nav a { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; text-decoration:none; border-radius:8px; color:var(--ink-2); font-size:13px; font-weight:600; border-bottom:2px solid transparent; }
.primary-nav a:hover { color:var(--ink); background:var(--surface); }
.primary-nav a[aria-current="page"] { color:var(--ink); background:var(--accent-soft); box-shadow:inset 0 -2px 0 var(--accent); }
.nav-icon { width:16px; height:16px; flex:none; }
.header-tools { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:12px; color:var(--muted); }
.updated-dot { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.updated-dot::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--good); }
.updated-dot:empty { display:none; }
.theme-toggle { min-height:32px; padding:4px 10px; font-size:12px; }
.source-link { font-size:12px; }
.app-body { max-width:1480px; margin:auto; display:grid; grid-template-columns:220px minmax(0,1fr); gap:0; }
.app-body.no-side { grid-template-columns:minmax(0,1fr); }
.sidebar { position:sticky; top:56px; align-self:start; max-height:calc(100vh - 56px); overflow:auto; padding:22px 14px 40px 20px; border-right:1px solid var(--border); }
.side-nav { display:grid; gap:2px; margin-bottom:22px; }
.side-nav a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:var(--ink-2); text-decoration:none; font-weight:600; font-size:13px; }
.side-nav a:hover { background:var(--surface); color:var(--ink); }
.side-nav a[aria-current="page"] { background:var(--accent-soft); color:var(--ink); box-shadow:inset 3px 0 0 var(--accent); }
.nav-badge { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--critical); color:#fff; font-size:11px; display:inline-grid; place-items:center; }
.nav-badge:empty { display:none; }
.side-title { text-transform:uppercase; letter-spacing:1.1px; font-size:10.5px; font-weight:750; color:var(--muted); margin:18px 10px 8px; }
.facet { display:grid; gap:1px; margin:0 0 6px; border:0; padding:0; }
.facet legend { font-size:12px; font-weight:650; color:var(--ink-2); margin:10px 10px 6px; padding:0; }
.facet label { display:flex; align-items:center; gap:8px; padding:5px 10px; border-radius:6px; font-size:12.5px; color:var(--ink-2); cursor:pointer; }
.facet label:hover { background:var(--surface); }
.facet input { accent-color:var(--accent); width:15px; height:15px; margin:0; }
.facet .n { margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums; font-size:11.5px; }
.facet-note { font-size:11px; color:var(--muted); margin:8px 10px 0; line-height:1.4; }
main { max-width:none; margin:0; padding:24px 28px 80px; min-width:0; }
.legacy-nav { font-size:11px; margin:0 0 14px; color:var(--muted); }
.legacy-nav a { color:var(--muted); }
h1 { font-size:clamp(22px,3vw,28px); line-height:1.2; letter-spacing:-.6px; margin:0 0 4px; overflow-wrap:anywhere; }
h2 { font-size:18px; letter-spacing:-.3px; margin-top:28px; overflow-wrap:anywhere; }
h3 { font-size:15px; }
.sub { max-width:95ch; line-height:1.6; color:var(--ink-2); }
.eyebrow { text-transform:uppercase; letter-spacing:1.1px; font-size:10.5px; font-weight:750; color:var(--muted); }
.section-intro { display:flex; align-items:start; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:24px 0 14px; }
.section-intro h2 { margin:0 0 4px; }
.section-intro p { margin:0; color:var(--muted); }
.card,.tile { border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); }
.card { padding:16px; }
.tiles { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.tile .value { font-size:22px; white-space:normal; overflow-wrap:anywhere; }
.tile .label { font-size:12px; }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }
.stat-card { display:flex; flex-direction:column; gap:8px; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--ink); text-decoration:none; min-width:0; }
.stat-card:hover { border-color:var(--accent); }
.stat-card strong { font-size:30px; line-height:1.15; letter-spacing:-1px; }
.stat-note { color:var(--muted); font-size:12px; }
.stat-card.good strong { color:var(--good); } .stat-card.bad strong { color:var(--critical); }
.widget-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.widget { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; min-width:0; }
.widget h3 { margin:0; font-size:16px; }
.widget-head { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:start; margin-bottom:12px; }
.widget p { color:var(--ink-2); font-size:13px; overflow-wrap:anywhere; }
.widget-meta { display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted); font-size:12px; margin:12px 0; }
.result-badge { display:inline-flex; align-items:center; gap:6px; border:1px solid currentColor; border-radius:30px; padding:2px 10px; font-size:12px; font-weight:650; line-height:1.5; }
.result-badge.good { color:var(--good); } .result-badge.bad { color:var(--critical); } .result-badge.neutral { color:var(--ink-2); }
.metric-big { font-size:30px; font-weight:750; letter-spacing:-1px; }
.metric-name { color:var(--muted); font-size:12px; display:block; }
meter { display:block; width:100%; height:10px; margin:12px 0; accent-color:var(--good); }
.button-link,button { display:inline-flex; justify-content:center; align-items:center; gap:6px; padding:8px 13px; min-height:38px; background:var(--surface); border:1px solid var(--border); border-radius:8px; font:inherit; font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; cursor:pointer; }
.button-link:hover,button:hover { background:var(--surface-2); border-color:var(--accent); }
button:disabled { opacity:.6; cursor:wait; }
.link-row { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.detail-panel { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:0 18px; margin:16px 0; }
.detail-panel > summary { color:var(--ink); font-weight:650; min-height:48px; padding:14px 0; }
.detail-panel[open] { padding-bottom:14px; }
.detail-panel .card { box-shadow:none; }
details summary { cursor:pointer; color:var(--ink); }
section[id],article[id] { scroll-margin-top:90px; }
/* Between the mobile layout and a one-line header it takes two lines (brand and tools, then the navigation: about 100px): anchors clear it. */
@media(min-width:761px) and (max-width:1180px) { .header-tools { order:2; } .primary-nav { order:3; flex-basis:100%; } section[id],article[id] { scroll-margin-top:130px; } }
.nav2 { display:flex; flex-wrap:wrap; padding:0 0 12px; gap:6px 16px; border-bottom:1px solid var(--border); margin:0 0 16px; font-size:13px; }
.nav2 a { padding:4px 0; color:var(--ink-2); }
.filters { background:var(--surface); border:1px solid var(--border); padding:12px; border-radius:var(--radius); }
.filters select,.filters input,input[type="search"],select[data-pick],select { min-height:38px; min-width:0; max-width:100%; border:1px solid var(--border); padding:7px 10px; border-radius:8px; font:inherit; color:var(--ink); background:var(--surface-2); }
.browse-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:18px 0; }
.browse-toolbar label { display:grid; gap:5px; font-size:12px; color:var(--ink-2); }
.browse-toolbar label:first-child { flex:1; min-width:180px; }
.browse-toolbar input { width:100%; }
.browse-count,.empty-message { color:var(--muted); font-size:13px; }
.flow-steps { list-style:none; padding:0; margin:18px 0; display:grid; gap:10px; }
.flow-step { position:relative; padding:14px 16px; border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:10px; background:var(--surface); }
.flow-step .widget-head { margin:0; }
.flow-step p { margin:8px 0 0; color:var(--muted); font-size:13px; }
.table-wrap { max-width:100%; overscroll-behavior-x:contain; }
table { font-size:13px; } th,td { padding:9px 12px; border-bottom-color:var(--grid); }
th { color:var(--muted); font-weight:600; font-size:12px; }
td,th,code { overflow-wrap:anywhere; }
code { font-size:.92em; }
pre { max-width:100%; background:var(--surface-2); }
.wf-track { min-width:180px; }
.notice { padding:12px 16px; border:1px solid var(--border); border-left:4px solid var(--accent); background:var(--surface); border-radius:10px; color:var(--ink-2); font-size:13px; }
.note { border-left-color:var(--axis); }
.page-footer { border-top:1px solid var(--border); margin-top:40px; padding-top:16px; font-size:12px; color:var(--muted); }
.mobile-nav { display:none; }
@media(min-width:900px) { .suite-details > .tiles { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1100px) { .app-body { grid-template-columns:minmax(0,1fr); } .sidebar { position:static; max-height:none; border-right:0; padding:16px 24px 0; } .side-nav { display:none; } .sidebar .side-title:first-child { display:none; } .side-filters { display:flex; flex-wrap:wrap; gap:0 18px; } .facet { min-width:150px; } }
@media(max-width:850px) { .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .source-link { display:none; } }
@media(max-width:760px) {
  .primary-nav,.theme-toggle { display:none; } .app-header-inner { padding:10px 16px; }
  .mobile-nav { display:grid; grid-template-columns:repeat(5,1fr); position:fixed; bottom:0; left:0; right:0; z-index:25; background:var(--surface); border-top:1px solid var(--border); padding:4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .mobile-nav a,.mobile-nav summary { display:grid; justify-items:center; gap:2px; padding:6px 2px; font-size:10.5px; font-weight:600; color:var(--muted); text-decoration:none; list-style:none; min-height:44px; }
  .mobile-nav summary::-webkit-details-marker { display:none; }
  .mobile-nav a[aria-current="page"] { color:var(--accent); }
  .mobile-nav details { position:relative; }
  .mobile-nav details > div { position:absolute; bottom:56px; right:4px; display:grid; min-width:170px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:6px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
  .mobile-nav details > div a { display:block; padding:10px 12px; font-size:13px; color:var(--ink); text-align:left; }
  body { padding-bottom:72px; }
  .sidebar { display:none; }
}
@media(max-width:600px) {
  main { padding:18px 14px 48px; }
  .brand { font-size:15px; } .summary-grid { gap:10px; } .stat-card { padding:14px; } .stat-card strong { font-size:26px; }
  .widget-grid { grid-template-columns:1fr; } .widget { padding:16px; } .detail-panel { padding-left:12px; padding-right:12px; }
  .card { padding:12px; } .legacy-nav { overflow-wrap:anywhere; } .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .mobile-stack thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .mobile-stack,.mobile-stack tbody { display:block; width:100%; }
  .mobile-stack tbody tr { display:block; padding:10px 0; border-bottom:1px solid var(--border); }
  .mobile-stack tbody td { display:block; position:relative; border:0; padding:5px 0 5px 36%; text-align:left; white-space:normal; min-width:0; min-height:28px; }
  .mobile-stack td::before { content:attr(data-label); position:absolute; left:0; width:32%; color:var(--muted); font-size:12px; font-weight:500; }
  .mobile-stack td.out,.mobile-stack td.wrap { min-width:0; }
  .mobile-stack td > * { min-width:0; }
  .tip { white-space:normal; max-width:100%; }
  .browse-toolbar > label { flex:1; } .filters label { flex:1; } .filters select,.filters input { width:100%; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

:root { --bad-bg:color-mix(in srgb, var(--critical) 13%, var(--surface)); --warn-bg:color-mix(in srgb, var(--warning) 14%, var(--surface)); --good-bg:color-mix(in srgb, var(--good) 12%, var(--surface)); }
.tone-good { --tone:var(--good); } .tone-bad { --tone:var(--critical); } .tone-warn { --tone:var(--warn-ink); } .tone-neutral { --tone:var(--ink-2); } .tone-unknown { --tone:var(--muted); }
.tone-mark { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--tone); color:var(--tone); font-size:12px; font-weight:800; line-height:1; flex:none; }
.tone-unknown .tone-mark,.tone-mark.tone-unknown { border-style:dashed; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 4px; border-radius:20px; border:1px solid var(--border); color:var(--tone); font-size:12px; font-weight:650; background:var(--surface); white-space:nowrap; }
.pill.tone-bad { background:var(--bad-bg); } .pill.tone-warn { background:var(--warn-bg); }
.status-banner { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:18px 20px; border:1px solid var(--border); border-left:6px solid var(--tone); border-radius:var(--radius); background:var(--surface); margin:20px 0; }
.status-banner .tone-mark { width:34px; height:34px; font-size:18px; }
.status-banner h2 { margin:0; font-size:20px; }
.status-banner p { margin:4px 0 0; color:var(--ink-2); font-size:13px; }
.status-banner > div { flex:1; min-width:220px; }
.kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:18px 0; }
.kpi { display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid var(--border); border-top:4px solid var(--tone, var(--border)); border-radius:12px; background:var(--surface); color:var(--ink); text-decoration:none; min-width:0; }
.kpi:hover { border-color:var(--s1); }
.kpi .kpi-value { font-size:30px; font-weight:750; letter-spacing:-.8px; line-height:1.1; color:var(--tone, var(--ink)); font-variant-numeric:tabular-nums; }
.kpi .kpi-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-2); }
.kpi .kpi-note { font-size:12px; color:var(--muted); }
.kpi-def { font-size:11px; }
.console-grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:16px; }
.panel { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:18px 20px; min-width:0; margin:16px 0; }
.panel > h3 { margin:0 0 12px; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; align-items:baseline; }
.panel > h3 a { font-size:13px; font-weight:600; }
.problem-list,.state-list,.key-events,.gap-list { list-style:none; margin:0; padding:0; }
.problem-list li,.state-list li { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--grid); }
.problem-list li:first-child,.state-list li:first-child { border-top:0; }
.problem-list p,.state-list p { margin:2px 0 0; font-size:12px; color:var(--muted); }
.state-list li { align-items:center; } .state-list .count { margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; }
.state-list li[data-resolved] { opacity:.55; }
.stackbar { display:flex; height:12px; border-radius:6px; overflow:hidden; background:var(--grid); margin:4px 0 14px; }
.stackbar span { display:block; height:100%; background:var(--tone); }
.stackbar span + span { border-left:2px solid var(--surface); }
.trend-note { font-size:13px; color:var(--ink-2); }
.finding { border:1px solid var(--border); border-left:5px solid var(--tone); border-radius:12px; background:var(--surface); padding:16px 20px; margin:14px 0; scroll-margin-top:100px; }
.finding header { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.finding h2 { font-size:18px; margin:0; flex:1; min-width:200px; }
.finding .eyebrow { margin-right:4px; }
.facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px; margin:12px 0; }
.facts dt { font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-2); }
.facts dd { margin:2px 0 0; font-size:14px; }
.facts .wide { grid-column:1 / -1; }
.hypothesis, .lever { border:1px dashed var(--axis); border-radius:8px; padding:8px 12px; background:var(--page); }
.hypothesis dt::after { content:' — interpretation, not verified'; text-transform:none; letter-spacing:0; font-weight:500; color:var(--muted); }
.lever dt::after { content:' — where to look, not verified'; text-transform:none; letter-spacing:0; font-weight:500; color:var(--muted); }
.lever ul, .targets { margin:6px 0; padding-left:20px; }
.nowrap { white-space:nowrap; }
.lever .copy { user-select:all; }
@media(min-width:761px) and (max-width:1180px) { .finding { scroll-margin-top:130px; } }
.gap-list li { padding:10px 0; border-top:1px solid var(--grid); }
.gap-list li:first-child { border-top:0; }
.key-events li { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; padding:8px 0; border-top:1px solid var(--grid); }
.key-events li:first-child { border-top:0; }
.key-events .ke-meta { grid-column:2; font-size:12px; color:var(--muted); }
.journey { list-style:none; padding:0; margin:12px 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.journey > li { border:1px solid var(--border); border-top:4px solid var(--tone); border-radius:10px; padding:10px 12px; background:var(--surface); min-width:0; }
.journey strong { display:block; font-size:13px; }
.journey p { margin:4px 0 0; font-size:12px; color:var(--ink-2); }
.attempt-strip { display:flex; flex-wrap:wrap; gap:3px; margin-top:6px; }
.attempt-strip a,.attempt-strip span { text-decoration:none; }
.filterbar { display:flex; flex-wrap:wrap; gap:10px 12px; align-items:end; margin:16px 0; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.filterbar label { display:grid; gap:4px; font-size:12px; color:var(--ink-2); }
.filterbar label.grow { flex:1; min-width:180px; }
.filterbar input,.filterbar select { min-height:40px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; font:inherit; color:var(--ink); background:var(--surface); width:100%; }
.filterbar [data-filter-count] { font-size:13px; color:var(--muted); margin-left:auto; }
.tablist { display:flex; gap:2px; border-bottom:1px solid var(--border); margin:18px 0 0; overflow-x:auto; }
.tab { border:0; border-radius:0; background:none; min-height:40px; padding:8px 14px; color:var(--ink-2); font-weight:600; box-shadow:inset 0 -2px 0 transparent; white-space:nowrap; }
.tab:hover { background:var(--surface); }
.tab[aria-selected="true"] { color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent); }
[data-tabs] > section[role="tabpanel"] > h2:first-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.trace-overview { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.trace-overview .key-info { margin-top:16px; }
@media(max-width:1000px) { .trace-overview { grid-template-columns:1fr; } }
.finding-meta { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin:6px 0 0; }
.chip-row { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 10px; }
.chip { min-height:30px; padding:3px 12px; border-radius:16px; font-size:12px; font-weight:600; color:var(--ink-2); background:var(--surface); }
.chip .n { color:var(--muted); font-variant-numeric:tabular-nums; }
.chip[aria-pressed="true"] { color:var(--ink); background:var(--accent-soft); border-color:var(--accent); }
@media(max-width:760px) { .status-banner { padding:12px 14px; gap:10px; } .status-banner h2 { font-size:16px; } .status-banner .tone-mark { width:26px; height:26px; font-size:14px; } .nav2 { flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; } .finding { padding:14px; } .finding h2 { font-size:16px; } }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.crumbs { font-size:13px; color:var(--muted); margin:0 0 8px; }
.crumbs a { color:var(--ink-2); }
@media(max-width:900px) { .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .console-grid { grid-template-columns:1fr; } .journey { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .kpi-grid { grid-template-columns:1fr 1fr; gap:10px; } .kpi { padding:12px; } .kpi .kpi-value { font-size:24px; } .facts { grid-template-columns:1fr; } .journey { grid-template-columns:1fr; } .filterbar label { flex:1 1 140px; } .filterbar [data-filter-count] { margin-left:0; width:100%; } }

.page-head { display:flex; justify-content:space-between; align-items:start; gap:16px; flex-wrap:wrap; }
.page-head .sub { margin:4px 0 0; font-size:13px; }
.flow-status-line { font-size:12px; margin:6px 0; }
.pl-table { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.pl-head, .flow-summary { display:grid; grid-template-columns:minmax(140px,1.5fr) minmax(178px,1.2fr) minmax(250px,1.7fr) 70px 68px 86px 84px 18px; gap:10px; align-items:center; padding:10px 16px; }
.pl-head { font-size:11.5px; font-weight:650; color:var(--muted); border-bottom:1px solid var(--border); background:var(--surface-2); }
.flow-list { display:grid; }
.flow-card { overflow-wrap:anywhere; border-bottom:1px solid var(--grid); box-shadow:inset 3px 0 0 var(--tone, transparent); }
.flow-card:last-child { border-bottom:0; }
.flow-card:hover { background:var(--surface-2); }
.flow-summary { list-style:none; min-height:52px; cursor:pointer; }
.flow-summary::-webkit-details-marker { display:none; }
.flow-summary h2 { display:inline; margin:0; font-size:14px; font-weight:700; letter-spacing:0; }
.col-title { display:grid; min-width:0; }
.live-title { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.col-num { font-variant-numeric:tabular-nums; font-size:13px; }
.chevron { color:var(--muted); font-size:18px; transition:transform .15s; }
.flow-details[open] .chevron { transform:rotate(90deg); }
.flow-details[open] > .flow-summary { background:var(--surface-2); }
.flow-status { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.col-status .pill { white-space:normal; line-height:1.25; }
.flow-step-icon { position:relative; display:inline-flex; }
.flow-retry { position:absolute; right:-7px; top:-7px; font-size:9.5px; font-weight:700; color:var(--ink-2); background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:0 2px; line-height:1.3; }
.flow-status-icon { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1.5px solid var(--border); border-radius:50%; font-weight:800; font-size:12px; }
.flow-status-icon.success { color:var(--good); border-color:var(--good); } .flow-status-icon.failed { color:var(--critical); border-color:var(--critical); background:var(--bad-bg); }
.flow-status-icon.decision-warn { border:2px solid var(--warning); color:var(--warn-ink); background:var(--warn-bg); }
.flow-status-icon.skipped { color:var(--ink-2); } .flow-status-icon.not-recorded { color:var(--muted); border-style:dashed; }
.flow-cost-chip { font-size:12.5px; font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums; }
.pl-detail { padding:6px 16px 18px; border-top:1px solid var(--grid); background:var(--surface-2); }
.pl-detail-head p { margin:8px 0; font-size:13px; }
.pl-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:18px; }
.flow-pipeline { list-style:none; padding:0; margin:8px 0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.flow-node { position:relative; border:1px solid var(--border); border-top:3px solid var(--tone, var(--axis)); border-radius:10px; padding:10px; min-width:0; background:var(--surface); font-size:12px; }
.flow-node.missing { border-top-color:var(--axis); color:var(--muted); background:transparent; border-style:dashed; }
.flow-node p { margin:4px 0; font-size:12px; color:var(--ink-2); }
.box-head { display:flex; align-items:center; gap:6px; font-size:12.5px; }
.box-head .tone-mark { width:18px; height:18px; font-size:11px; }
.box-time { display:block; margin-top:6px; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.box-status { display:block; font-size:12px; font-weight:650; color:var(--tone); }
.flow-step-cost { font-variant-numeric:tabular-nums; }
.flow-step-final { font-size:12px; } .flow-step-final .pill { white-space:normal; }
.attempt-list summary { font-size:12px; color:var(--link); min-height:28px; padding-top:4px; }
.flow-attempts { list-style:none; padding:0; margin:6px 0 0; display:grid; gap:4px; }
.flow-attempts summary { min-height:28px; font-size:11.5px; color:var(--ink-2); }
.flow-attempts p { font-size:11.5px; }
.flow-attempt { display:inline-flex; gap:5px; align-items:center; font-weight:650; color:var(--ink); }
.flow-attempt .tone-mark { width:16px; height:16px; font-size:10px; }
.flow-escalation { display:flex; gap:8px; align-items:center; }
.cost-note { font-size:12px; color:var(--muted); }
.key-info { margin:8px 0 12px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); display:grid; gap:8px; font-size:12.5px; }
.key-info > div { display:flex; justify-content:space-between; gap:12px; }
.key-info dt { color:var(--muted); } .key-info dd { margin:0; text-align:right; }
@media(max-width:1300px) { .flow-pipeline { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1000px) {
  .pl-head { display:none; }
  .flow-summary { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:12px 14px; }
  .col-title { flex:1 1 140px; } .col-status { flex:0 1 auto; }
  .col-stages { flex:1 1 100%; }
  .flow-summary .col-num { flex:0 0 auto; font-size:12px; } .flow-summary .col-num::before { content:attr(data-col) ' '; color:var(--muted); font-size:11px; }
  .chevron { display:none; }
  .pl-detail-grid { grid-template-columns:1fr; }
}
@media(max-width:600px) { .flow-pipeline { grid-template-columns:1fr 1fr; } .flow-summary h2 { font-size:14px; } [data-flow-search] { width:100%; } }

/* The h1 is for screen readers; the hero names the page. */
.glance h1 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.g-status.status-banner { margin:0 0 8px; padding:8px 10px; gap:8px; border-left-width:5px; color:var(--ink); text-decoration:none; flex-wrap:nowrap; }
.g-status .tone-mark { width:24px; height:24px; font-size:13px; flex:none; }
.g-status > span:not(.chevron):not(.tone-mark) { flex:1; min-width:0; display:grid; }
.g-status strong { color:var(--tone); font-size:14px; } .g-status small { color:var(--ink-2); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g-row { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); margin:0 0 8px; padding:8px 10px; }
.g-head { display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:'label value chev' 'sub sub sub'; align-items:baseline; column-gap:8px; color:var(--ink); text-decoration:none; }
.g-label { grid-area:label; font-size:11px; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.g-value { grid-area:value; justify-self:end; font-size:18px; font-weight:750; font-variant-numeric:tabular-nums; line-height:1.2; white-space:nowrap; }
.g-value .kpi-delta { font-size:11px; vertical-align:middle; }
.g-sub { grid-area:sub; font-size:11.5px; color:var(--muted); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .g-sub .segbar { margin-top:5px; height:6px; }
.g-head .chevron { grid-area:chev; color:var(--muted); font-size:18px; }
.g-chips { display:flex; flex-wrap:nowrap; gap:6px; margin:6px -10px 0; padding:0 10px; overflow-x:auto; scrollbar-width:none; }
.g-chips::-webkit-scrollbar { display:none; }
.g-chip { flex:none; display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:2px 9px; border:1px solid color-mix(in srgb, var(--tone) 40%, var(--border)); border-radius:999px; background:color-mix(in srgb, var(--tone) 8%, var(--surface)); color:var(--ink); font-size:12.5px; text-decoration:none; font-variant-numeric:tabular-nums; white-space:nowrap; }
.g-chip .tone-mark { width:16px; height:16px; font-size:10px; }
.g-chip.g-more { --tone:var(--muted); }
.g-foot { margin:2px 0 0; font-size:12px; }
@media(max-width:600px) { main:has(> .glance) { padding-top:10px; } }
.glance { --st-issue:#7aa7ff; --st-code:#22c55e; --st-review:#a78bfa; --st-fix:#8b5cf6; --st-merge:#2dd4bf; }
:root[data-theme="light"] .glance { --st-issue:#2f5fe0; --st-code:#16a34a; --st-review:#7c3aed; --st-fix:#6d28d9; --st-merge:#0d9488; }
.home-hero { position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin:0 0 14px; padding:22px 26px; border:1px solid var(--border); border-radius:var(--radius); background:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--accent) 30%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 55%); }
.home-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0, var(--surface) 38%); pointer-events:none; }
.home-hero > * { position:relative; }
.hero-brand { display:flex; align-items:center; gap:16px; }
.hero-logo { display:grid; place-items:center; width:52px; height:52px; border-radius:14px; color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.hero-logo svg { width:30px; height:30px; }
.hero-title { margin:0; font-size:clamp(24px,2.6vw,34px); font-weight:800; letter-spacing:-.8px; line-height:1.1; color:var(--ink); }
.hero-title span { background:linear-gradient(90deg, var(--link), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-flow { margin:8px 0 0; font-size:11.5px; font-weight:650; letter-spacing:3.2px; text-transform:uppercase; color:var(--ink-2); }
.hero-tag { display:grid; gap:6px; justify-items:end; text-align:right; }
.hero-tag p { margin:0; font-size:11px; font-weight:650; letter-spacing:3px; text-transform:uppercase; color:var(--ink-2); }
.hero-tag p + p { color:var(--muted); }
.hero-rule { width:min(260px,22vw); height:1px; background:linear-gradient(90deg, transparent, var(--accent)); position:relative; }
.hero-rule::after { content:''; position:absolute; right:-3px; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good); }
.cockpit .kpi-grid4 { margin:14px 0; }
.cockpit .kpi2 { padding:18px; background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 60%, var(--surface)), var(--surface)); }
.cockpit .kpi-icon { width:46px; height:46px; border-radius:12px; } .cockpit .kpi-icon svg { width:22px; height:22px; }
.cockpit .kpi2 .kpi-value { font-size:34px; }
.cockpit .kpi2 .spark { height:56px; }
.cockpit [data-kpi="llm_cost"] .kpi-icon { background:color-mix(in srgb, var(--link) 16%, transparent); color:var(--link); }
.cockpit [data-kpi="llm_cost"] .spark { --tone:var(--link); }
.cockpit-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,300px); gap:14px; align-items:stretch; margin:0 0 14px; }
.cockpit-grid > .panel { margin:0; }
.cockpit-grid > .quality-panel:only-child { grid-column:1 / -1; }
.stage-strip { display:flex; align-items:stretch; gap:4px; padding:12px; overflow-x:auto; }
.stage-card { flex:1 1 0; min-width:132px; display:flex; flex-direction:column; gap:8px; padding:14px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--ink); text-decoration:none; --tone:var(--accent); }
.stage-card:hover { border-color:var(--tone); }
.st-issue { --tone:var(--st-issue); } .st-code { --tone:var(--st-code); } .st-review { --tone:var(--st-review); } .st-fix { --tone:var(--st-fix); } .st-merge { --tone:var(--st-merge); }
.stage-head { display:grid; grid-template-columns:auto 1fr; grid-template-areas:'icon name' 'icon sub'; align-items:center; column-gap:10px; min-width:0; }
.stage-head .stage-icon { grid-area:icon; }
.stage-head strong { grid-area:name; font-size:14px; white-space:nowrap; } .stage-head small { grid-area:sub; font-size:11.5px; color:var(--muted); }
.stage-icon { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--tone); background:color-mix(in srgb, var(--tone) 15%, transparent); }
.stage-icon svg { width:19px; height:19px; }
.stage-value { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:4px; }
.stage-value strong { font-size:30px; font-weight:750; letter-spacing:-.8px; line-height:1; font-variant-numeric:tabular-nums; }
.stage-value span { font-size:12px; color:var(--ink-2); }
.stage-note { font-size:11.5px; color:var(--muted); min-height:2.6em; }
.day-bars { width:100%; height:34px; display:block; margin-top:auto; } .day-bars rect { fill:var(--tone); } .day-bars rect.zero { fill:var(--grid); }
.stage-arrow { flex:none; align-self:center; color:var(--muted); } .stage-arrow svg { width:18px; height:18px; display:block; }
.quality-panel h3 { display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:center; gap:10px; margin:0 0 14px; white-space:nowrap; }
.quality-panel h3 a { margin-left:auto; font-size:12px; font-weight:600; }
.q-shield { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:var(--good); background:var(--good-bg); } .q-shield svg { width:18px; height:18px; }
.q-list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.q-list a { display:grid; grid-template-columns:1fr auto; grid-template-areas:'name value' 'bar bar' 'note note'; gap:5px 10px; color:var(--ink); text-decoration:none; }
.q-name { grid-area:name; font-size:13px; color:var(--ink-2); text-transform:capitalize; } .q-value { grid-area:value; color:var(--tone); font-variant-numeric:tabular-nums; }
.q-bar { grid-area:bar; height:8px; border-radius:4px; background:var(--grid); overflow:hidden; } .q-bar span { display:block; height:100%; border-radius:4px; background:var(--tone); }
.q-list small { grid-area:note; font-size:11px; color:var(--muted); }
@media(max-width:1250px) { .cockpit-grid { grid-template-columns:1fr; } .q-list { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); column-gap:24px; } }
/* Phone (ADR-0043 amendment 2026-10-28): the same content stacked — a compact hero, the indicators two by two
   with their notes, the stages as a vertical pipeline (value right, daily bars beside the note), the gates. */
@media(max-width:760px) {
  .home-hero { padding:14px 16px; gap:10px; margin-bottom:8px; }
  .hero-brand { gap:12px; } .hero-logo { width:40px; height:40px; border-radius:11px; } .hero-logo svg { width:24px; height:24px; }
  .hero-title { font-size:22px; } .hero-flow { margin-top:5px; font-size:9px; letter-spacing:1px; white-space:nowrap; }
  .hero-tag { display:none; }
  .stage-strip { flex-direction:column; gap:0; padding:8px; overflow:visible; }
  .stage-card { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'head value' 'note bars'; align-items:center; gap:6px 12px; min-width:0; padding:10px 12px; }
  .stage-head { grid-area:head; } .stage-value { grid-area:value; justify-self:end; flex-direction:column; align-items:flex-end; gap:2px; margin:0; }
  .stage-value strong { font-size:24px; } .stage-value span { font-size:11px; text-align:right; }
  .stage-note { grid-area:note; min-height:0; } .day-bars { grid-area:bars; width:96px; height:24px; margin:0; }
  .stage-arrow { transform:rotate(90deg); margin:2px 0; } .stage-arrow svg { width:14px; height:14px; }
  .q-list { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .cockpit .kpi-grid4 { margin:8px 0; }
  .cockpit .kpi2 { padding:12px; gap:6px; }
  .cockpit .kpi2 .kpi-value { font-size:24px; }
  .cockpit .kpi2 .kpi-label { font-size:11.5px; }
  .cockpit .kpi2 .spark { height:36px; }
  .cockpit .kpi2 .kpi-note { display:block; font-size:10.5px; line-height:1.35; }
  .cockpit-grid { gap:8px; margin-bottom:8px; }
  .quality-panel { padding:12px; }
}
.head-tools { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.range-select { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.status-badge { display:flex; align-items:center; gap:10px; padding:9px 14px; border:1px solid var(--tone); border-radius:10px; background:color-mix(in srgb, var(--tone) 12%, var(--surface)); color:var(--ink); text-decoration:none; }
.status-badge strong { display:block; color:var(--tone); font-size:14px; } .status-badge small { color:var(--ink-2); font-size:11.5px; }
.kpi-grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0; }
.kpi2 { display:grid; grid-template-columns:auto 1fr; grid-template-areas:'icon body' 'visual visual' 'note note'; gap:8px 12px; padding:16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--ink); text-decoration:none; min-width:0; }
.kpi2:hover { border-color:var(--accent); }
.kpi-icon { grid-area:icon; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); }
.kpi2.tone-bad .kpi-icon { background:var(--bad-bg); color:var(--critical); } .kpi2.tone-warn .kpi-icon { background:var(--warn-bg); color:var(--warn-ink); } .kpi2.tone-good .kpi-icon { background:var(--good-bg); color:var(--good); }
.kpi-icon svg { width:20px; height:20px; }
.kpi-body { grid-area:body; display:grid; gap:2px; min-width:0; }
.kpi2 .kpi-label { font-size:12.5px; color:var(--ink-2); font-weight:600; text-transform:none; letter-spacing:0; }
.kpi-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.kpi2 .kpi-value { font-size:28px; font-weight:750; letter-spacing:-.8px; line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi-delta { font-size:11.5px; font-weight:650; color:var(--tone); }
.kpi-delta.tone-unknown,.kpi-delta.tone-neutral { color:var(--muted); font-weight:500; }
.kpi2 .spark, .kpi2 .segbar { grid-area:visual; }
.kpi2 .kpi-note { grid-area:note; font-size:11.5px; color:var(--muted); }
.spark { width:100%; height:44px; display:block; } .spark.tone-accent { --tone:var(--accent); } .spark.tone-info { --tone:var(--link); }
.segbar { display:flex; height:8px; margin-top:14px; border-radius:4px; overflow:hidden; background:var(--grid); gap:2px; }
.segbar span { background:var(--tone); }
.chart-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1fr); gap:14px; }
.chart-grid .panel { margin:0; }
.line-key { display:inline-block; width:16px; height:0; border-top:2px solid var(--accent); vertical-align:middle; margin-right:6px; } .line-key.dashed { border-top:2px dashed var(--link); }
.dot-accent { fill:var(--accent); stroke:var(--surface); stroke-width:1.5; }
.dot-p95 { fill:var(--link); stroke:var(--surface); stroke-width:1.5; }
.provider-list { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.provider-list li { display:grid; grid-template-columns:22px 1fr auto 44px; grid-template-areas:'rank name cost share' 'rank bar bar bar' 'rank calls calls calls'; gap:3px 10px; align-items:center; font-size:13px; }
.rank { grid-area:rank; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:700; }
.pname { grid-area:name; font-weight:650; } .pcost { grid-area:cost; font-variant-numeric:tabular-nums; } .pshare { grid-area:share; text-align:right; color:var(--muted); font-size:12px; }
.pbar { grid-area:bar; height:6px; border-radius:3px; background:var(--grid); overflow:hidden; } .pbar span { display:block; height:100%; background:var(--link); }
.pcalls { grid-area:calls; font-size:11.5px; }
.mini-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:14px 0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--border); }
.mini-stats a { display:grid; gap:2px; padding:10px 14px; background:var(--surface); color:var(--ink); text-decoration:none; }
.mini-stats a:hover { background:var(--surface-2); }
.mini-stats span { font-size:11.5px; color:var(--muted); } .mini-stats strong { font-size:15px; font-variant-numeric:tabular-nums; }
.attention-panel { border-color:color-mix(in srgb, var(--tone) 45%, var(--border)); background:linear-gradient(180deg, color-mix(in srgb, var(--tone) 7%, var(--surface)), var(--surface)); }
.attention-panel h3 small { display:block; font-weight:500; font-size:12px; margin-top:2px; }
.waiting-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.waiting-row { padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.waiting-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.waiting-reason { margin:6px 0 4px; overflow-wrap:anywhere; }
.waiting-meta { margin:0; font-size:12px; color:var(--ink-2); }
.issue-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.issue-card { display:grid; gap:8px; padding:14px; border:1px solid color-mix(in srgb, var(--tone) 40%, var(--border)); border-radius:10px; background:var(--surface); color:var(--ink); text-decoration:none; }
.issue-card:hover { border-color:var(--tone); }
.issue-head { display:flex; gap:8px; align-items:center; } .issue-head strong { flex:1; font-size:14px; }
.issue-text { font-size:12.5px; color:var(--ink-2); }
.issue-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); }
.toolbar-inline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.toolbar-inline input { min-width:220px; }
@media(max-width:1250px) { .kpi-grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .chart-grid { grid-template-columns:1fr 1fr; } .chart-grid .panel:last-child { grid-column:1 / -1; } }
@media(max-width:760px) { .chart-grid,.issue-grid { grid-template-columns:1fr; } .mini-stats { grid-template-columns:1fr 1fr; } .head-tools { width:100%; justify-content:space-between; } .toolbar-inline input { min-width:0; flex:1; } }
@media(max-width:600px) { .kpi-grid4 { grid-template-columns:1fr 1fr; gap:10px; } .kpi2 { grid-template-columns:1fr; grid-template-areas:'body' 'visual' 'note'; padding:12px; } .kpi-icon { display:none; } .kpi2 .kpi-value { font-size:22px; } .kpi2 .kpi-note { display:none; } }