/* ============================================================================
 * Paper Boat · Quick-Commerce Intelligence — application stylesheet
 *
 * Token grammar mirrors the assistents.ai app-renderer (`--app-*`): white, flat,
 * hairline-separated surfaces, one accent, card 8 / control 6 / badge 5 radii,
 * Hanken Grotesk, 24-column grid. Brand layer: charcoal ink from the Paper Boat
 * wordmark, a mango (Aamras) accent, warm-cream navigation rail, product-line
 * chart palette. Designed for 1280 first; verified 320 → 2560, light and dark.
 * ========================================================================== */
:root {
  --app-accent: #d2601a;
  --app-accent-strong: #b34f12;
  --app-accent-tint: color-mix(in srgb, var(--app-accent) 7%, #ffffff);
  --app-accent-tint-strong: color-mix(in srgb, var(--app-accent) 12%, #ffffff);
  --app-on-accent: #ffffff;
  --app-focus-ring: color-mix(in srgb, var(--app-accent) 30%, transparent);
  --app-bg: #ffffff;
  --app-bg-subtle: #faf8f4;
  --app-card: #ffffff;
  --app-row-hover: #faf8f4;
  --app-overlay: rgba(31, 30, 28, 0.36);
  --app-border: #e7e2d9;
  --app-border-strong: #d9d3c8;
  --app-ink: #24262b;
  --app-ink-secondary: #545860;
  --app-ink-muted: #767b85;
  --app-success-fg: #0e6245; --app-success-bg: #d7f1d3;
  --app-warning-fg: #8a4b06; --app-warning-bg: #fdecc4;
  --app-danger-fg: #b3093c; --app-danger-bg: #fce4ea;
  --app-neutral-fg: #4f566b; --app-neutral-bg: #e9e6df;
  --app-info-fg: #1f5f8b; --app-info-bg: #e3f0fa;
  --sev-critical: #b3093c; --sev-high: #d2601a; --sev-medium: #b58a00; --sev-low: #4f7fa8;
  /* heat cells (availability / rank) */
  --heat-good-bg: #d7f1d3; --heat-good-fg: #0e6245;
  --heat-ok-bg: #eaf3d2; --heat-ok-fg: #4c6a12;
  --heat-warn-bg: #fdecc4; --heat-warn-fg: #8a4b06;
  --heat-bad-bg: #fce4ea; --heat-bad-fg: #b3093c;
  --heat-none-bg: #e9e6df; --heat-none-fg: #767b85;
  --on-color: #ffffff; /* glyphs on coloured icon tiles, both themes */
  --sidebar-bg: #f6f2ea;
  --sidebar-ink: #3a3d44;
  --sidebar-accent: #efe4d3;
  --sidebar-accent-ink: #9a4410;
  --sidebar-border: #e7e2d9;
  --c1: #d2601a; --c2: #4f9d3a; --c3: #2f6f94; --c4: #c94b6b; --c5: #8c6a2f; --c6: #6f7278; --c7: #1d5c3a; --c8: #d8a23a;
  --radius-card: 8px; --radius-control: 6px; --radius-badge: 5px; --radius-pill: 999px;
  --shadow-flat: 0 1px 1px rgba(0, 0, 0, 0.02);
  --shadow-overlay: 0 4px 12px rgba(48, 49, 61, 0.10), 0 16px 32px rgba(48, 49, 61, 0.12);
  --font: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sidebar-w: 232px; --topbar-h: 56px; --dock-w: 380px; --dock-rail: 48px; --control-h: 34px;
}
:root[data-theme="dark"] {
  --app-accent: #f08b44; --app-accent-strong: #ff9d5a; --app-on-accent: #1a120c;
  --app-accent-tint: color-mix(in srgb, var(--app-accent) 14%, #1c1b1a);
  --app-accent-tint-strong: color-mix(in srgb, var(--app-accent) 22%, #1c1b1a);
  --app-bg: #1a1918; --app-bg-subtle: #222120; --app-card: #201f1e; --app-row-hover: #262524;
  --app-overlay: rgba(0, 0, 0, 0.55);
  --app-border: #35332f; --app-border-strong: #46433d;
  --app-ink: #f1ede6; --app-ink-secondary: #bcb6ac; --app-ink-muted: #8f8a80;
  --app-success-fg: #8fe0b4; --app-success-bg: #143b2a; --app-warning-fg: #f3c980; --app-warning-bg: #3f2c0c;
  --app-danger-fg: #ff9db1; --app-danger-bg: #43121f; --app-neutral-fg: #cfcac0; --app-neutral-bg: #33312d;
  --app-info-fg: #9cc9ec; --app-info-bg: #14303f;
  --sev-medium: #d8a23a; --sev-low: #7fa9cc;
  --heat-good-bg: #143b2a; --heat-good-fg: #8fe0b4; --heat-ok-bg: #26361a; --heat-ok-fg: #b9d98a;
  --heat-warn-bg: #3f2c0c; --heat-warn-fg: #f3c980; --heat-bad-bg: #43121f; --heat-bad-fg: #ff9db1;
  --heat-none-bg: #33312d; --heat-none-fg: #8f8a80;
  --sidebar-bg: #1f1e1c; --sidebar-ink: #d6d0c5; --sidebar-accent: #3a2a1c; --sidebar-accent-ink: #f0a468; --sidebar-border: #35332f;
  --shadow-overlay: 0 4px 12px rgba(0, 0, 0, .4), 0 16px 32px rgba(0, 0, 0, .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--app-ink);
  background: var(--app-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { flex: 0 0 auto; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; }
h2 { font-size: 16px; line-height: 1.35; }
h3 { font-size: 14px; }
p { margin: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--app-ink-muted); }
.sec { color: var(--app-ink-secondary); }
.small { font-size: 12px; line-height: 1.35; }
.xs { font-size: 11px; line-height: 1.3; }
.eyebrow { font-size: 12px; font-weight: 500; color: var(--app-ink-muted); }
.strong { font-weight: 600; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hstack { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vstack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-4 { gap: 4px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.hide { display: none !important; }
.accent { color: var(--app-accent); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.ico { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--sidebar-bg); color: var(--sidebar-ink);
  border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; min-width: 0; }
.brand img { height: 36px; width: auto; flex: 0 0 auto; }
.brand .wm { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand .wm b { font-size: 13px; font-weight: 600; color: var(--app-ink); letter-spacing: -0.01em; }
.brand .wm span { font-size: 11px; color: var(--app-ink-muted); white-space: nowrap; }
.nav { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 1px; }
.nav .group-label { font-size: 11px; font-weight: 500; color: var(--app-ink-muted); padding: 12px 10px 4px; white-space: nowrap; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-control); font-size: 13px; font-weight: 500; color: var(--sidebar-ink); white-space: nowrap; }
.nav a:hover { background: color-mix(in srgb, var(--sidebar-accent) 60%, transparent); }
.nav a.active { background: var(--sidebar-accent); color: var(--sidebar-accent-ink); }
.nav a svg { width: 16px; height: 16px; opacity: .85; }
.nav a .cnt { margin-left: auto; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--app-danger-bg); color: var(--app-danger-fg); }
.nav a .cnt.n { background: var(--app-neutral-bg); color: var(--app-neutral-fg); }
.sidebar-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--sidebar-border); display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--c3); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.scrim { position: fixed; inset: 0; background: var(--app-overlay); z-index: 39; display: none; }
body.nav-open .scrim { display: block; }
.iconbtn.navclose { display: none; margin-left: auto; }

/* icon rail — set by PB.nav() above 1024 px, default below 1280 px */
body.rail { --sidebar-w: 64px; }
body.rail .brand { justify-content: center; padding: 14px 8px 8px; }
body.rail .brand .wm, body.rail .nav .group-label, body.rail .nav a span, body.rail .nav a .cnt, body.rail .sidebar-foot > div { display: none; }
body.rail .nav { padding: 4px 10px; }
body.rail .nav a { justify-content: center; padding: 9px 0; position: relative; }
body.rail .nav a svg { width: 18px; height: 18px; }
body.rail .nav a[title]:has(.cnt)::after { content: ""; position: absolute; top: 6px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--app-danger-fg); }
body.rail .sidebar-foot { justify-content: center; }

.main { min-width: 0; display: flex; flex-direction: column; padding-right: var(--dock-rail); }
body.no-dock .main { padding-right: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 20px;
  background: color-mix(in srgb, var(--app-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--app-border); min-width: 0;
}
.menubtn { display: inline-flex; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--app-ink-muted); white-space: nowrap; flex: 0 0 auto; }
.crumbs b { color: var(--app-ink); font-weight: 600; }
.filters { display: flex; align-items: center; gap: 6px; margin-left: 8px; min-width: 0; overflow: hidden; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--app-border-strong); border-radius: var(--radius-control); background: var(--app-card); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; flex: 0 0 auto; }
.chip:hover { background: var(--app-bg-subtle); }
.chip .k { color: var(--app-ink-muted); font-weight: 400; }
.chip svg { width: 12px; height: 12px; opacity: .6; }
.search { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 32px; width: 220px; padding: 0 10px; border: 1px solid var(--app-border-strong); border-radius: var(--radius-control); background: var(--app-card); color: var(--app-ink-muted); font-size: 13px; white-space: nowrap; overflow: hidden; flex: 0 0 auto; cursor: text; }
.search svg { width: 15px; height: 15px; }
.search span { overflow: hidden; text-overflow: ellipsis; }
.search kbd { margin-left: auto; font-family: var(--font); font-size: 11px; padding: 1px 5px; border: 1px solid var(--app-border); border-radius: 4px; background: var(--app-bg-subtle); }
.iconbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; cursor: pointer; position: relative; color: var(--app-ink-secondary); flex: 0 0 auto; padding: 0; }
.iconbtn:hover { background: var(--app-bg-subtle); border-color: var(--app-border); }
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn .pip { position: absolute; top: 4px; right: 4px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--sev-critical); color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

.page { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 16px; min-width: 0; width: 100%; max-width: 1760px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.page-head .sub { color: var(--app-ink-muted); font-size: 13px; margin-top: 4px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ---------------------------------------------------------------- grid (24 col, like the renderer) */
.grid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.grid > * { min-width: 0; }
/* a band label across the grid, so a long screen reads as sections rather than a wall of cards */
.sec-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 -6px; }
.sec-head b { font-size: 13.5px; font-weight: 600; }
.sec-head span { font-size: 12px; color: var(--app-ink-muted); }
.sec-head a { font-size: 12px; margin-left: auto; }
.c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; }
.c9 { grid-column: span 9; } .c10 { grid-column: span 10; } .c12 { grid-column: span 12; } .c14 { grid-column: span 14; } .c15 { grid-column: span 15; }
.c16 { grid-column: span 16; } .c18 { grid-column: span 18; } .c24 { grid-column: span 24; }

/* ---------------------------------------------------------------- card */
.card { background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--radius-card); box-shadow: var(--shadow-flat); display: flex; flex-direction: column; min-width: 0; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--app-border); flex-wrap: wrap; min-width: 0; }
/* the title block takes whatever width is left and wraps its own text, so a header button never
 * gets pushed onto a second line */
.card-h > div:first-child { min-width: 0; flex: 1 1 0; }
.card-h h2, .card-h h3 { font-size: 14px; font-weight: 600; }
.card-h .sub { font-size: 12px; color: var(--app-ink-muted); margin-top: 1px; }
.card-h .actions { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.card-b { padding: 16px; flex: 1; min-width: 0; }
.card-b.tight { padding: 0; overflow-x: auto; }
.card-f { padding: 10px 16px; border-top: 1px solid var(--app-border); font-size: 12px; color: var(--app-ink-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chart { width: 100%; height: 260px; min-width: 0; }
.chart.sm { height: 180px; } .chart.lg { height: 340px; } .chart.xl { height: 420px; }
/* A card stretched by its grid row is taller than its chart; `fill` hands the leftover height to
 * the chart instead of leaving it blank under the plot. The min-height is what the chart falls
 * back to when the card hugs its content (one column, or no taller neighbour in the row). */
.card-b.fill { display: flex; flex-direction: column; }
.card-b.fill > .chart { flex: 1 1 auto; height: auto; min-height: 320px; }
.chart.err { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px dashed var(--app-border-strong); border-radius: var(--radius-control); color: var(--app-ink-muted); font-size: 12.5px; }
.chart.err button { height: 26px; }
.prov { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--app-ink-muted); }
.prov.model { color: var(--app-accent-strong); font-weight: 500; }

/* ---------------------------------------------------------------- kpi */
.kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi .l { font-size: 12px; color: var(--app-ink-muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi .v { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .v small { font-size: 13px; font-weight: 500; color: var(--app-ink-muted); margin-left: 4px; letter-spacing: 0; }
.kpi .d { font-size: 12px; display: flex; align-items: center; gap: 6px; color: var(--app-ink-muted); flex-wrap: wrap; }
.kpi .d b { font-weight: 600; }
.up { color: var(--app-success-fg); } .down { color: var(--app-danger-fg); } .flat { color: var(--app-ink-muted); }
.danger { color: var(--app-danger-fg); }
.kpi .spark { height: 34px; margin-top: 4px; }
.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpi-grid .card { min-width: 0; }

/* ---------------------------------------------------------------- badges */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; font-size: 11.5px; font-weight: 500; border-radius: var(--radius-badge); white-space: nowrap; line-height: 1.5; }
.badge.success { background: var(--app-success-bg); color: var(--app-success-fg); }
.badge.warning { background: var(--app-warning-bg); color: var(--app-warning-fg); }
.badge.danger { background: var(--app-danger-bg); color: var(--app-danger-fg); }
.badge.neutral { background: var(--app-neutral-bg); color: var(--app-neutral-fg); }
.badge.info { background: var(--app-info-bg); color: var(--app-info-fg); }
.badge.accent { background: var(--app-accent-tint-strong); color: var(--app-accent-strong); }
.badge.outline { background: transparent; border: 1px solid var(--app-border-strong); color: var(--app-ink-secondary); }
.sev { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.sev::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.feed .sev::before, .timeline .sev::before { display: none; }
.sev.critical { color: var(--sev-critical); } .sev.high { color: var(--sev-high); } .sev.medium { color: var(--sev-medium); } .sev.low { color: var(--sev-low); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-control); border: 1px solid var(--app-border-strong); background: var(--app-card); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; color: var(--app-ink); }
.btn:hover { background: var(--app-bg-subtle); }
.btn.primary { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-on-accent); }
.btn.primary:hover { background: var(--app-accent-strong); border-color: var(--app-accent-strong); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--app-ink-secondary); }
.btn.ghost:hover { background: var(--app-bg-subtle); }
.btn.danger { color: var(--app-danger-fg); }
.btn.sm { height: 28px; padding: 0 9px; font-size: 12px; }
.btn.xs { height: 24px; padding: 0 8px; font-size: 11.5px; }
.btn svg { width: 14px; height: 14px; }
.btn:focus-visible, .chip:focus-visible, .iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--app-focus-ring); }
.seg { display: inline-flex; border: 1px solid var(--app-border-strong); border-radius: var(--radius-control); overflow: hidden; background: var(--app-card); flex: 0 0 auto; max-width: 100%; }
.seg button { height: 30px; padding: 0 12px; border: 0; background: transparent; font-size: 12.5px; font-weight: 500; color: var(--app-ink-secondary); cursor: pointer; white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--app-border); }
.seg button.on { background: var(--app-accent-tint-strong); color: var(--app-accent-strong); }
.seg.scroll { overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 0 1 auto; }
.seg.scroll::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--app-border); padding: 0 4px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { padding: 8px 2px 10px; font-size: 13px; font-weight: 500; color: var(--app-ink-muted); border: 0; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; flex: 0 0 auto; }
.tabs .on { color: var(--app-ink); border-bottom-color: var(--app-accent); }
.tabs .n { font-size: 11px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--app-neutral-bg); color: var(--app-neutral-fg); }

/* ---------------------------------------------------------------- tables */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--app-ink-muted); padding: 9px 12px; border-bottom: 1px solid var(--app-border); white-space: nowrap; background: var(--app-card); position: sticky; top: 0; z-index: 1; }
.table td { padding: 9px 12px; border-bottom: 1px solid var(--app-border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--app-row-hover); }
.table tr.sel td { background: var(--app-accent-tint); }
.table tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--app-accent); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.num { font-weight: 500; }
.table.dense th, .table.dense td { padding: 6px 10px; font-size: 12.5px; }
.table.wide { min-width: 900px; }
.bar { position: relative; height: 6px; border-radius: 3px; background: var(--app-neutral-bg); overflow: hidden; min-width: 60px; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--app-accent); border-radius: 3px; }
.bar.g > i { background: var(--c2); } .bar.b > i { background: var(--c3); } .bar.r > i { background: var(--sev-critical); }

.plat { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.plat img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; border: 1px solid var(--app-border); background: #fff; }
.plat.lg img { width: 26px; height: 26px; border-radius: 6px; }
.pimg { width: 40px; height: 40px; border-radius: 6px; object-fit: contain; background: #fff; border: 1px solid var(--app-border); flex: 0 0 auto; }
.pimg.lg { width: 56px; height: 56px; }
.heat { display: inline-block; min-width: 46px; padding: 3px 6px; border-radius: 4px; text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; white-space: nowrap; }
.heat.good { background: var(--heat-good-bg); color: var(--heat-good-fg); }
.heat.ok { background: var(--heat-ok-bg); color: var(--heat-ok-fg); }
.heat.warn { background: var(--heat-warn-bg); color: var(--heat-warn-fg); }
.heat.bad { background: var(--heat-bad-bg); color: var(--heat-bad-fg); }
.heat.none { background: var(--heat-none-bg); color: var(--heat-none-fg); }

/* ---------------------------------------------------------------- lists / feed */
.feed { display: flex; flex-direction: column; }
.feed .item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--app-border); cursor: pointer; }
.feed .item:last-child { border-bottom: 0; }
.feed .item:hover { background: var(--app-row-hover); }
.feed .item.sel { background: var(--app-accent-tint); }
.feed .item.sel .sevbar { box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 40%, transparent); }
.feed .t { font-weight: 600; font-size: 13.5px; }
.feed .m { font-size: 12px; color: var(--app-ink-muted); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sevbar { width: 4px; border-radius: 2px; margin-top: 3px; height: 34px; }
.sevbar.critical { background: var(--sev-critical); } .sevbar.high { background: var(--sev-high); } .sevbar.medium { background: var(--sev-medium); } .sevbar.low { background: var(--sev-low); }
.empty { padding: 32px 16px; text-align: center; color: var(--app-ink-muted); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty b { color: var(--app-ink); font-weight: 600; }

.insight { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--app-border); font-size: 13px; }
.insight:last-child { border-bottom: 0; }
.insight .ic { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--app-accent-tint-strong); color: var(--app-accent-strong); }
.insight .ic svg { width: 14px; height: 14px; }
.insight b { font-weight: 600; }
.insight .why { color: var(--app-ink-secondary); margin-top: 2px; }
.insight .acts { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

.timeline { display: flex; flex-direction: column; }
.timeline .ev { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; padding: 0 0 14px; position: relative; font-size: 12.5px; }
.timeline .ev::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: -2px; width: 1px; background: var(--app-border); }
.timeline .ev:last-child::before { display: none; }
.timeline .ev .dot { width: 13px; height: 13px; border: 2px solid var(--app-card); box-shadow: 0 0 0 1px var(--app-border); background: var(--app-neutral-fg); margin-top: 3px; }
.timeline .ev .dot.ok { background: var(--app-success-fg); } .timeline .ev .dot.warn { background: var(--sev-high); } .timeline .ev .dot.act { background: var(--app-accent); }
.timeline .ev .when { color: var(--app-ink-muted); font-size: 11.5px; }

/* ---------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 12px; font-weight: 500; color: var(--app-ink-secondary); }
.input, select.input, textarea.input { height: var(--control-h); padding: 0 10px; border: 1px solid var(--app-border-strong); border-radius: var(--radius-control); background: var(--app-card); font: inherit; font-size: 13px; color: var(--app-ink); width: 100%; max-width: 100%; }
textarea.input { height: auto; padding: 8px 10px; resize: vertical; }
.input:focus { outline: none; border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-focus-ring); }
.switch { width: 34px; height: 20px; border-radius: 999px; background: var(--app-border-strong); position: relative; display: inline-block; flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.switch.on, .switch[aria-checked="true"] { background: var(--app-accent); }
.switch.on::after, .switch[aria-checked="true"]::after { left: 16px; }
/* the same control as a real button, for the screens that let you flip it */
button.switch { border: 0; padding: 0; cursor: pointer; }
button.switch:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.kv { display: grid; grid-template-columns: minmax(100px, 140px) minmax(0, 1fr); gap: 6px 12px; font-size: 12.5px; }
.kv dt { color: var(--app-ink-muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- split / panels */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.split.wide { grid-template-columns: minmax(0, 1fr) 440px; }
.split.left { grid-template-columns: 260px minmax(0, 1fr); }
.split > * { min-width: 0; }
.detail { position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow: auto; }
.panel-h { padding: 14px 16px; border-bottom: 1px solid var(--app-border); }
.panel-s { padding: 12px 16px; border-bottom: 1px solid var(--app-border); }
.panel-s:last-child { border-bottom: 0; }
.panel-s h4 { font-size: 12px; font-weight: 500; color: var(--app-ink-muted); margin-bottom: 8px; }
.hypo { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; font-size: 12.5px; align-items: start; }
.hypo .st { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; margin-top: 2px; }
.hypo .st.yes { background: var(--app-danger-bg); color: var(--app-danger-fg); } .hypo .st.no { background: var(--app-success-bg); color: var(--app-success-fg); } .hypo .st.unk { background: var(--app-neutral-bg); color: var(--app-neutral-fg); }

/* ---------------------------------------------------------------- assistant dock (one agent, every screen) — overlay */
.dock { position: fixed; top: 0; right: 0; bottom: 0; width: var(--dock-rail); background: var(--app-card); border-left: 1px solid var(--app-border); z-index: 30; display: flex; flex-direction: column; overflow: hidden; transition: width .18s ease; }
.dock.open { width: var(--dock-w); box-shadow: var(--shadow-overlay); }
.dock-rail { width: var(--dock-rail); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; flex: 0 0 auto; }
.dock.open .dock-rail { display: none; }
.dock-rail .ask { width: 34px; height: 34px; border-radius: 8px; background: var(--app-accent); color: var(--app-on-accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 0; padding: 0; }
.dock-rail .ask svg { width: 17px; height: 17px; }
.dock-rail .vlabel { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 500; color: var(--app-ink-muted); margin-top: 6px; letter-spacing: .02em; }
.dock-body { display: none; flex-direction: column; height: 100%; width: var(--dock-w); }
.dock.open .dock-body { display: flex; }
.dock-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--app-border); }
.dock-h .ai { width: 26px; height: 26px; border-radius: 7px; background: var(--app-accent); color: var(--app-on-accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dock-h .ai svg { width: 14px; height: 14px; }
.dock-msgs { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.dock-ctx { padding: 8px 14px; border-top: 1px solid var(--app-border); font-size: 11.5px; color: var(--app-ink-muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fab-ask { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 52px; height: 52px; border-radius: 50%; background: var(--app-accent); color: var(--app-on-accent); border: 0; box-shadow: var(--shadow-overlay); align-items: center; justify-content: center; cursor: pointer; }
.fab-ask svg { width: 22px; height: 22px; }
@media (min-width: 1680px) { body.dock-open .main { padding-right: var(--dock-w); } }

.composer { border-top: 1px solid var(--app-border); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.composer .box { border: 1px solid var(--app-border-strong); border-radius: var(--radius-card); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--app-card); }
.composer .box:focus-within { border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-focus-ring); }
.composer textarea { border: 0; resize: none; font: inherit; font-size: 13px; outline: none; background: transparent; color: var(--app-ink); min-height: 38px; width: 100%; }
.composer .tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.composer .tools .scope { margin-left: auto; font-size: 11px; color: var(--app-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.composer .tools .send { width: 28px; height: 28px; border-radius: 6px; background: var(--app-accent); color: var(--app-on-accent); border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.composer .tools .send svg { width: 14px; height: 14px; }
.sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.sugg button { font-size: 12px; padding: 5px 10px; border: 1px solid var(--app-border-strong); border-radius: var(--radius-pill); background: var(--app-card); cursor: pointer; color: var(--app-ink-secondary); text-align: left; }
.sugg button:hover { border-color: var(--app-accent); color: var(--app-accent-strong); }

/* chat messages — user turns are right-aligned bubbles, assistant turns are open answers */
.msg { display: flex; gap: 10px; min-width: 0; align-items: flex-start; }
.msg.user { flex-direction: row-reverse; }
.msg .who { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.msg.user .who { background: var(--c3); color: #fff; }
.msg.ai .who { background: var(--app-accent); color: var(--app-on-accent); }
.msg.ai .who svg { width: 14px; height: 14px; }
.msg .body { flex: 1 1 auto; min-width: 0; font-size: 13.5px; display: flex; flex-direction: column; gap: 10px; }
.msg.user .body {
  flex: 0 1 auto; max-width: min(620px, 84%); background: var(--app-accent-tint-strong); color: var(--app-ink);
  border: 1px solid color-mix(in srgb, var(--app-accent) 22%, transparent); border-radius: 12px 12px 4px 12px; padding: 9px 13px;
}
.msg .stamp { font-size: 11px; color: var(--app-ink-muted); margin-top: 2px; }
.msg.user .stamp { text-align: right; }
.msg .body p b { font-weight: 600; }
.msg .body ul { margin: 0; padding-left: 18px; }
.msg .body li { margin: 2px 0; }
.cite { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--app-neutral-bg); color: var(--app-neutral-fg); vertical-align: middle; font-weight: 500; }
.trace { border: 1px solid var(--app-border); border-radius: var(--radius-control); background: var(--app-bg-subtle); font-size: 12px; }
.trace summary { padding: 6px 10px; cursor: pointer; color: var(--app-ink-secondary); font-weight: 500; list-style: none; display: flex; gap: 8px; align-items: center; }
.trace summary svg { width: 14px; height: 14px; }
.trace summary::-webkit-details-marker { display: none; }
.trace .step { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--app-border); align-items: center; }
.trace .step .ok { color: var(--app-success-fg); font-weight: 700; }
.msg-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- the Assistant answering
 * An answer arrives in three beats: the trace steps resolve one at a time, the lead sentence
 * types itself, then the evidence fades in. The caret and the spinner are the only motion. */
.ag-steps { display: flex; flex-direction: column; gap: 2px; }
.ag-step { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; color: var(--app-ink-muted); opacity: .45; transition: opacity .2s ease; }
.ag-step .sp { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--app-border-strong); justify-self: center; }
.ag-step .ms { font-size: 11px; font-variant-numeric: tabular-nums; }
.ag-step.on { opacity: 1; color: var(--app-ink-secondary); }
.ag-step.on .sp { border-color: var(--app-accent); border-top-color: transparent; animation: ag-spin .6s linear infinite; }
.ag-step.done { opacity: 1; }
.ag-step.done .sp { border-color: var(--app-success-fg); background: var(--app-success-fg); position: relative; }
.ag-step.done .sp::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: var(--app-card); }
@keyframes ag-spin { to { transform: rotate(360deg); } }

.ag-lead:empty { display: none; }
.ag-lead.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--app-accent); vertical-align: -2px; margin-left: 2px; animation: ag-caret .8s steps(1) infinite; }
@keyframes ag-caret { 50% { opacity: 0; } }

.ag-body:empty, .ag-foot:empty { display: none; }
.ag-in { animation: ag-rise .26s ease both; }
@keyframes ag-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ai-turn { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ai-turn .ag-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ai-turn .ag-foot { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* a cell that opens another answer reads as a link, not a button */
.ag-link { border: 0; background: none; padding: 0; font: inherit; color: var(--app-accent-strong); cursor: pointer; text-align: left; }
.ag-link:hover { text-decoration: underline; }

/* the composer's send button while an answer is running */
.composer .tools .send.busy { background: var(--app-neutral-bg); color: var(--app-neutral-fg); cursor: default; }
.composer .tools .stop { font-size: 11.5px; }

/* ---------------------------------------------------------------- new conversation
 * The welcome screen is what an empty thread shows: what the Assistant can see, and a way in. */
/* The empty state sits in the middle of whatever height it is given and never scrolls: it is a
 * prompt to ask something, and a prompt you have to scroll is a worse prompt. */
.msgs.is-welcome { overflow: hidden; display: flex; align-items: center; }
.msgs.is-welcome > .stream { width: 100%; }
/* the chips above the composer are follow-ups; while the welcome is up its cards already say it */
.msgs.is-welcome + .composer .starters { display: none; }
.welcome { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.welcome .hero { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.welcome .mark { width: 36px; height: 36px; border-radius: 10px; background: var(--app-accent); color: var(--app-on-accent); display: inline-flex; align-items: center; justify-content: center; }
.welcome .mark svg { width: 20px; height: 20px; }
.welcome h2 { font-size: 20px; letter-spacing: -0.02em; }
.welcome .hero p { font-size: 13px; color: var(--app-ink-secondary); max-width: 60ch; line-height: 1.5; }
.wcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.wcard { text-align: left; border: 1px solid var(--app-border); border-radius: var(--radius-card); background: var(--app-card); padding: 11px 13px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wcard:hover { border-color: var(--app-accent); box-shadow: var(--shadow-flat); }
.wcard .q { font-size: 12.5px; font-weight: 500; color: var(--app-ink); line-height: 1.35; }
.wcard .m { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--app-ink-muted); }
.wcard .m .out { display: inline-flex; align-items: center; gap: 4px; }
.wcard .m .out svg { width: 12px; height: 12px; }
.wmore { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wmore .eyebrow { margin-right: 2px; }
/* stacked into one column the cards get tall, so the kind/category line goes before a question does */
@media (max-width: 860px) {
  .wcards { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .wcard { padding: 10px 12px; }
  .wcard .m { display: none; }
  .welcome { gap: 14px; }
}
/* Short screens shed the least load-bearing things in order, so the empty state never scrolls:
 * first the mark and the kind labels, then on a small phone the fourth question and the saved
 * row — the prompt library is still one tap away on the composer. */
@media (max-height: 700px) {
  .welcome { gap: 12px; }
  .welcome .mark { display: none; }
  .welcome h2 { font-size: 18px; }
  .wcard .m { display: none; }
}
@media (max-height: 880px) and (max-width: 860px) {
  .wcards .wcard:nth-child(n+4) { display: none; }
}
@media (max-height: 720px) and (max-width: 860px) {
  .wmore { display: none; }
}

/* the dock runs the same answers in a narrower column */
.dock-msgs .ai-turn { gap: 10px; }
.dock-msgs .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dock-msgs .kpis > div { border: 1px solid var(--app-border); border-radius: var(--radius-control); padding: 7px 8px; background: var(--app-bg-subtle); min-width: 0; }
.dock-msgs .kpis .v { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dock-msgs .kpis .l { font-size: 10px; color: var(--app-ink-muted); line-height: 1.3; }
.dock-msgs .chart { height: 168px; }
.dock-msgs .grid { display: flex; flex-direction: column; gap: 10px; }
.dock-msgs .grid > * { grid-column: auto; }
.dock-msgs .card-h { padding: 8px 10px; } .dock-msgs .card-b { padding: 10px; }
.dock-msgs .card-h h3 { font-size: 12.5px; }
.dock-msgs .block { padding: 10px; }
.dock-msgs .table { font-size: 11.5px; }
.dock-msgs .reportcard { padding: 10px; gap: 10px; }

/* ---------------------------------------------------------------- step kinds (run steps, task sources) */
.k-ico { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.k-ico svg { width: 12px; height: 12px; color: var(--on-color); }
.k-trig { background: var(--c3); } .k-data { background: var(--c7); } .k-ai { background: var(--app-accent); } .k-rule { background: var(--c5); } .k-cond { background: var(--c6); } .k-human { background: var(--c4); } .k-sig { background: var(--sev-critical); } .k-act { background: var(--c2); } .k-notify { background: var(--c8); }

/* ---------------------------------------------------------------- misc */
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--app-ink-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.map { width: 100%; height: 430px; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.leaflet-container { font-family: var(--font); background: var(--app-bg-subtle); }
/* the basemap is a light raster; dim it in dark mode so it does not glare, leaving the store
   markers (a separate pane) at full strength */
:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.72) saturate(.75) contrast(1.05); }
/* Leaflet chrome in app tokens, so a popup reads as one of our cards in either theme */
.leaflet-popup-content-wrapper { background: var(--app-card); color: var(--app-ink); border: 1px solid var(--app-border); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); padding: 0; }
.leaflet-popup-content { margin: 0; font-family: var(--font); font-size: 13px; line-height: 1.45; max-height: 320px; overflow-y: auto; }
.leaflet-popup-tip { background: var(--app-card); border: 1px solid var(--app-border); box-shadow: none; }
.leaflet-container a.leaflet-popup-close-button { color: var(--app-ink-muted); width: 26px; height: 26px; font-size: 18px; padding: 3px 0 0; }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--app-ink); background: transparent; }
.leaflet-tooltip { background: var(--app-ink); color: var(--app-bg); border: 0; box-shadow: var(--shadow-flat); font-size: 11.5px; padding: 3px 8px; border-radius: var(--radius-badge); }
.leaflet-tooltip-top::before { border-top-color: var(--app-ink); }
.leaflet-tooltip-bottom::before { border-bottom-color: var(--app-ink); }
.leaflet-container .leaflet-control-zoom a { background: var(--app-card); color: var(--app-ink-secondary); border-color: var(--app-border); }
.leaflet-container .leaflet-control-zoom a:hover { background: var(--app-bg-subtle); color: var(--app-ink); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--app-card) 86%, transparent) !important; color: var(--app-ink-muted) !important; font-size: 10.5px; }
.leaflet-control-attribution a { color: var(--app-ink-secondary) !important; }
.progress { height: 6px; border-radius: 3px; background: var(--app-neutral-bg); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--app-accent); }
.callout { border-left: 3px solid var(--app-accent); background: var(--app-accent-tint); padding: 10px 12px; border-radius: 0 6px 6px 0; font-size: 12.5px; }
.pillnav { display: flex; gap: 6px; flex-wrap: wrap; }
.pillnav a { font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--app-border-strong); white-space: nowrap; }
.pillnav a.on { background: var(--app-accent-tint-strong); border-color: transparent; color: var(--app-accent-strong); font-weight: 500; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--app-border); border-radius: var(--radius-card); padding: 12px 14px; background: var(--app-card); min-width: 0; }
.tile .l { font-size: 12px; color: var(--app-ink-muted); }
.tile .v { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc { max-width: 860px; margin: 0 auto; background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--radius-card); padding: 40px 48px; }
.doc h1 { font-size: 22px; }
.doc h2 { font-size: 15px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--app-border); }
.doc p { font-size: 13.5px; color: var(--app-ink-secondary); margin-top: 6px; }
.doc .doc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.doc .doc-kpis > div { border: 1px solid var(--app-border); border-radius: 6px; padding: 10px 12px; min-width: 0; }
.doc .doc-kpis .v { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.doc .doc-kpis .l { font-size: 11.5px; color: var(--app-ink-muted); }
/* ---------------------------------------------------------------- dropdown menu */
.menu {
  position: fixed; z-index: 55; background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; max-height: min(420px, calc(100vh - 24px)); overflow: hidden;
}
.menu-s { padding: 8px; border-bottom: 1px solid var(--app-border); }
.menu-q { width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--app-border-strong); border-radius: var(--radius-control); background: var(--app-card); font: inherit; font-size: 13px; color: var(--app-ink); outline: none; }
.menu-q:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-focus-ring); }
.menu-list { overflow: auto; padding: 4px; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-control); background: none; font: inherit; font-size: 13px; color: var(--app-ink); text-align: left; cursor: pointer; }
.menu-item:hover, .menu-item.hot { background: var(--app-bg-subtle); }
.menu-item[aria-selected="true"] { color: var(--app-accent-strong); font-weight: 500; }
.menu-item .tick { width: 14px; height: 14px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.menu-item .tick svg { width: 13px; height: 13px; }
.menu-item .hint { font-size: 11px; color: var(--app-ink-muted); white-space: nowrap; }
.menu-item .mimg { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; background: #fff; border: 1px solid var(--app-border); flex: 0 0 auto; }
.chip .cimg { width: 15px; height: 15px; border-radius: 3px; object-fit: contain; background: #fff; border: 1px solid var(--app-border); margin-right: 5px; vertical-align: -3px; }
.fresh-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: 12.5px; border-bottom: 1px solid var(--app-border); }
.fresh-row:last-child { border-bottom: 0; }
.iconbtn .pip.ok { background: var(--app-success-fg); min-width: 8px; width: 8px; height: 8px; padding: 0; top: 5px; right: 5px; }
.menu-g { font-size: 11px; font-weight: 500; color: var(--app-ink-muted); padding: 8px 8px 4px; }
.menu-f { padding: 8px; border-top: 1px solid var(--app-border); display: flex; gap: 6px; align-items: center; }
.chip.set { border-color: var(--app-accent); background: var(--app-accent-tint); color: var(--app-accent-strong); }
.chip.set .k { color: color-mix(in srgb, var(--app-accent-strong) 70%, transparent); }
.chip[aria-expanded="true"] { background: var(--app-bg-subtle); }
.chip[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.chip .v { overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- modal (prompt library) */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-scrim { position: absolute; inset: 0; background: var(--app-overlay); }
.modal-card {
  position: relative; background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay); width: min(860px, 100%); max-height: min(760px, calc(100vh - 48px)); display: flex; flex-direction: column; min-height: 0;
}
.modal-b { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.modal-h { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--app-border); position: sticky; top: 0; background: var(--app-card); z-index: 2; }
.modal-h b { font-size: 15px; font-weight: 600; }
.modal-s { padding: 12px 16px; border-bottom: 1px solid var(--app-border); }
.modal-s:last-child { border-bottom: 0; }
.modal-s h4 { font-size: 11.5px; font-weight: 500; color: var(--app-ink-muted); margin-bottom: 8px; }
.modal-f { padding: 12px 16px; border-top: 1px solid var(--app-border); display: flex; gap: 8px; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--app-card); }
.plib-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.plib-tools .search input { border: 0; background: transparent; outline: none; font: inherit; font-size: 13px; color: var(--app-ink); width: 100%; }
.plib-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.plib-cats .chip.on { background: var(--app-accent-tint-strong); border-color: transparent; color: var(--app-accent-strong); }
.plib-cats .chip b { font-weight: 600; opacity: .7; }
.plib-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plib-card {
  text-align: left; border: 1px solid var(--app-border); border-radius: var(--radius-card); background: var(--app-card);
  padding: 12px; display: flex; flex-direction: column; gap: 7px; cursor: pointer; min-width: 0; font: inherit; color: inherit;
}
.plib-card:hover { border-color: var(--app-accent); }
.plib-card:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
/* the card asks the question; "Adjust" is the way to the parameters, and only shows on approach */
.plib-card .plib-edit { opacity: 0; flex: 0 0 auto; }
.plib-card:hover .plib-edit, .plib-card:focus-within .plib-edit, .plib-card .plib-edit:focus-visible { opacity: 1; }
@media (hover: none) { .plib-card .plib-edit { opacity: 1; } }
.plib-card .t { font-weight: 600; font-size: 13px; }
.plib-card .tpl { font-size: 12px; color: var(--app-ink-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.plib-card .meta { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--app-ink-muted); flex-wrap: wrap; }
.var { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--app-accent-tint-strong); color: var(--app-accent-strong); font-weight: 500; font-size: 12px; }
.out { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.out svg { width: 12px; height: 12px; }
.pgrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.plib-preview { border: 1px solid var(--app-border); border-radius: var(--radius-control); background: var(--app-bg-subtle); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
/* ---------------------------------------------------------------- drill-down grid
 * The rows behind a chart or a table: search, sort, page, export. The grid scrolls inside the
 * card so the toolbar and the pager stay put. */
.drill-card { width: min(1240px, 100%); max-height: calc(100vh - 48px); }
.drill-b { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.drill-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--app-border); }
.drill-tools .search { height: 32px; }
.drill-tools .search input { border: 0; background: transparent; outline: none; font: inherit; font-size: 13px; color: var(--app-ink); width: 100%; }
.drill-tools .chip.on { background: var(--app-accent-tint); border-color: var(--app-accent); color: var(--app-accent-strong); }
.drill-tools .chip i { display: inline-flex; opacity: .65; }
.drill-tools .chip i svg { width: 11px; height: 11px; }
.drill-tools .btn svg { width: 13px; height: 13px; margin-right: 4px; }
.drill-note { padding: 8px 16px; font-size: 12px; color: var(--app-ink-muted); background: var(--app-bg-subtle); border-bottom: 1px solid var(--app-border); }
.drill-grid { flex: 1 1 auto; overflow: auto; min-height: 120px; }
.drill-grid .table th { position: sticky; top: 0; z-index: 2; cursor: pointer; user-select: none; }
.drill-grid .table th.sortable:hover { color: var(--app-ink); }
.drill-grid .table th.sorted::after { content: '↓'; margin-left: 4px; font-size: 11px; }
.drill-grid .table th.sorted.asc::after { content: '↑'; }
.drill-grid .table td { white-space: nowrap; }
.drill-f { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--app-border); }
.drill-load { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 48px 16px; color: var(--app-ink-muted); font-size: 13px; }
.spin { width: 15px; height: 15px; border: 2px solid var(--app-border-strong); border-top-color: var(--app-accent); border-radius: 50%; animation: pbspin .7s linear infinite; }
@keyframes pbspin { to { transform: rotate(360deg); } }
/* a long table inside a card scrolls itself rather than stretching the page */
.scrollbox { max-height: 420px; overflow: auto; }
.btn.dbtn { gap: 6px; white-space: nowrap; }
.btn.dbtn svg { width: 14px; height: 14px; opacity: .8; }
.dbtn .dl-short { display: none; }
@media (max-width: 900px) {
  .dbtn .dl-long { display: none; }
  .dbtn .dl-short { display: inline; }
}
/* anything that opens its rows says so on hover: the pointer, and a tint on a matrix cell */
tr.drillable, .drillable { cursor: pointer; }
tr.drillable:hover td { background: var(--app-row-hover); }
td.drillable:hover { background: var(--app-accent-tint); box-shadow: inset 0 0 0 1px var(--app-accent); }
.skucard.drillable:hover { border-color: var(--app-accent); }
@media (max-width: 767px) {
  .modal { padding: 0; align-items: stretch; }
  .modal-card { width: 100%; max-height: 100vh; border: 0; border-radius: 0; }
  .plib-list, .pgrid2 { grid-template-columns: minmax(0, 1fr); }
  .drill-card { max-height: 100vh; }
}

/* ---------------------------------------------------------------- shared module components
 * The pieces the Content, Ratings, Alerts, Matching and Value screens are all built from. They
 * live here rather than in each screen's own <style> because the same control has to mean the
 * same thing wherever it appears. */

/* the platform's own listing, one click away — the capture carries a deeplink on every row */
.linkout { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--app-accent-strong); white-space: nowrap; }
.linkout svg { width: 12px; height: 12px; }
.linkout:hover { text-decoration: underline; }
td .linkout { opacity: .85; }
tr:hover td .linkout { opacity: 1; }

/* product shot from the shelf capture, falling back to the platform's CDN */
.thumb { width: 32px; height: 32px; border-radius: 6px; object-fit: contain; background: var(--app-bg-subtle); border: 1px solid var(--app-border); flex: none; }
.thumb.sm { width: 24px; height: 24px; } .thumb.lg { width: 48px; height: 48px; }

/* a rating as five stars plus the number — ratings only exist where the platform exposes them */
.stars { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.stars .s { position: relative; display: inline-block; width: 66px; height: 12px; color: var(--app-border-strong); }
.stars .s i { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; color: #e8a33d; }
.stars .s b, .stars .s i span { display: block; font-size: 12px; line-height: 12px; letter-spacing: 1px; font-weight: 400; white-space: nowrap; font-style: normal; }
.stars .v { font-size: 12px; font-weight: 600; } .stars .n { font-size: 11px; color: var(--app-ink-muted); }

/* a 0–100 measure with its bar: content score, match confidence, attribute coverage */
.meter { display: flex; align-items: center; gap: 8px; min-width: 0; }
.meter .bar { flex: 1 1 auto; height: 6px; min-width: 40px; border-radius: 3px; background: var(--app-neutral-bg); overflow: hidden; }
.meter .bar span { display: block; height: 100%; border-radius: 3px; background: var(--app-accent); }
.meter .bar.good span { background: var(--app-success-fg); } .meter .bar.ok span { background: var(--c2); }
.meter .bar.warn span { background: var(--app-warning-fg); } .meter .bar.bad span { background: var(--app-danger-fg); }
.meter .v { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* what passed and what failed on one listing */
.checks { display: flex; flex-direction: column; gap: 4px; }
.checks div { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.checks svg { width: 13px; height: 13px; flex: none; }
.checks .pass { color: var(--app-ink-secondary); } .checks .pass svg { color: var(--app-success-fg); }
.checks .fail { color: var(--app-ink); } .checks .fail svg { color: var(--app-danger-fg); }
.checks .na { color: var(--app-ink-muted); } .checks .na svg { opacity: .5; }

/* the action lifecycle: prepared → approved → submitted → acknowledged → verified → measured.
 * A stage is only "done" when the evidence for it exists, which is the whole point of the rail. */
.track { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }
.track .st { flex: 1 1 0; min-width: 96px; position: relative; padding: 0 4px; text-align: center; }
.track .st::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--app-border-strong); }
.track .st:first-child::before { left: 50%; } .track .st:last-child::before { right: 50%; }
.track .st.done::before, .track .st.now::before { background: var(--app-accent); }
.track .st i { position: relative; display: block; width: 16px; height: 16px; margin: 0 auto 6px; border-radius: 50%; background: var(--app-card); border: 2px solid var(--app-border-strong); }
.track .st.done i { background: var(--app-accent); border-color: var(--app-accent); }
.track .st.now i { border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-accent-tint); }
.track .st b { display: block; font-size: 11.5px; font-weight: 500; }
.track .st span { display: block; font-size: 11px; color: var(--app-ink-muted); }
.track .st.todo b { color: var(--app-ink-muted); }

/* a view that needs a feed we do not have yet says so, instead of showing an invented number */
.gate { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px dashed var(--app-border-strong); border-radius: var(--radius-card); background: var(--app-bg-subtle); }
.gate > svg { width: 18px; height: 18px; color: var(--app-ink-muted); flex: none; margin-top: 1px; }
.gate b { display: block; font-size: 13px; font-weight: 600; }
.gate p { font-size: 12.5px; color: var(--app-ink-secondary); line-height: 1.5; margin-top: 2px; }
.gate .actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.card.gated .card-b { opacity: .45; filter: saturate(.4); pointer-events: none; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 60; background: var(--app-ink); color: var(--app-bg); padding: 10px 14px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow-overlay); display: none; max-width: calc(100vw - 32px); }
.toast.show { display: block; }

/* ---------------------------------------------------------------- responsive bands */
@media (max-width: 1399px) {
  .search { width: 32px; padding: 0; justify-content: center; }
  .search span, .search kbd { display: none; }
}
@media (max-width: 1359px) { .chip .k { display: none; } }
@media (max-width: 1279px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .c14, .c15, .c16, .c18 { grid-column: span 24; }
  .c9, .c10, .c12 { grid-column: span 24; }
  .c6, .c7, .c8 { grid-column: span 12; }
  .c4, .c5 { grid-column: span 8; }
  .split, .split.wide, .split.left { grid-template-columns: minmax(0, 1fr); }
  .split > .detail { order: -1; position: static; max-height: none; }
  .table.frozen th:first-child, .table.frozen td:first-child { position: sticky; left: 0; background: var(--app-card); z-index: 2; box-shadow: 1px 0 0 var(--app-border); }
}
@media (max-width: 1023px) {
  :root { --sidebar-w: 0px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; transform: translateX(-100%); transition: transform .18s ease; border-right: 1px solid var(--sidebar-border); }
  body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-overlay); }
  .iconbtn.navclose { display: inline-flex; }
  .filters { display: none; }
  .topbar { padding: 0 12px; gap: 8px; }
  .page { padding: 16px; }
}
@media (max-width: 767px) {
  :root { --dock-w: 100vw; --dock-rail: 0px; --control-h: 40px; }
  .main { padding-right: 0; }
  .dock { width: 0; border: 0; }
  .dock.open { width: 100vw; }
  .dock-rail { display: none; }
  .fab-ask { display: inline-flex; }
  .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px; } .kpi .v { font-size: 20px; }
  .page-head .actions { margin-left: 0; width: 100%; justify-content: flex-start; }
  .page-head .actions .btn { flex: 1 1 auto; }
  .btn, .chip { min-height: 40px; }
  .btn.sm, .btn.xs { min-height: 36px; }
  .grid { gap: 12px; }
  .card-b { padding: 12px; } .card-h { padding: 10px 12px; }
  .doc { padding: 20px 16px; }
  .doc .doc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crumbs > span:not(:last-child) { display: none; }
}
@media (max-width: 479px) {
  .c4, .c5, .c6, .c7, .c8, .c12 { grid-column: span 24; }
  .feed .item { grid-template-columns: 16px minmax(0, 1fr); gap: 8px 10px; padding: 12px; }
  .feed .item > :last-child { grid-column: 2; flex-direction: row; align-items: center; gap: 8px; text-align: left; }
  .feed .item > :last-child .nowrap { white-space: normal; }
  .split.wide, .split { gap: 12px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .v { font-size: 19px; }
  h1 { font-size: 20px; }
}
@media (pointer: coarse) { .btn, .chip, .iconbtn, .seg button, .tabs button { min-height: 40px; } .nav a { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { .dock, .sidebar { transition: none; } }