/* ===========================================
   Theme v6 primitives: the shared pieces every page builds from.
   Tokens only (variables.css, v6 vocabulary block). Rules of the look:
   - neutral surfaces, one hairline, no glows; blue only for actions/links/switches
   - selected = lifted neutral surface + outline, never blue
   - green/red/amber only where they carry meaning, purple only for AI
   - status is a dot or a tag, never a colored stripe down a row
   =========================================== */

/* ---------- Text helpers ---------- */
.micro { font: 500 11px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--label-3); }
.faint { color: var(--label-3); }
.label-2 { color: var(--label-2); }
.pos { color: var(--green); }
.neg { color: var(--red); }
.grow { flex: 1 1 auto; min-width: 0; }
.when { font-size: 12.5px; color: var(--label-3); white-space: nowrap; }
.handle { font-size: 12.5px; color: var(--label-3); }
.link { color: var(--accent-text); font-size: 12px; font-weight: 500; }
.link:hover { text-decoration: underline; }
.ai-word { color: var(--ai); font-weight: 500; }
/* "a · b · c" separators between inline metadata */
.sep-dot::before { content: '·'; margin: 0 6px; color: var(--label-3); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--label-3); }
.dot-green { background: var(--green); }
.dot-red { background: var(--red); }
.dot-amber { background: var(--amber); }
.dot-volume { background: var(--dv-volume); }

/* ---------- Page head ---------- */
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head > :first-child { min-width: 0; }
.page-head h1, .page-head .page-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--label-1); }
.page-head .page-subtitle { margin: 4px 0 0; color: var(--label-2); font-size: 13px; }
.page-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Card internals ---------- */
.card-head { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.card-head > .link { margin-left: auto; }
.card-name { font-size: 14px; font-weight: 600; color: var(--label-1); }
.card-desc { margin: 2px 0 0; font-size: 13px; color: var(--label-2); }

/* ---------- Stat cards (KPIs) ---------- */
.kpis { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--gap); }
.kpi { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 15px 16px 16px; background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-card); color: inherit; }
a.kpi:hover { background: var(--card-hover); color: inherit; }
.kpi-value { font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--label-1); }
.kpi-sub { font-size: 13px; color: var(--label-2); }
.kpi-sub b { color: var(--label-1); font-weight: 500; }
.kpi-spark { position: absolute; right: 18px; bottom: 44px; display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.kpi-spark i { width: 5px; border-radius: 2px; background: var(--dv-volume-2); }
.kpi-spark i.hl { background: var(--accent); }

/* One card split into zones by hairlines */
.split { display: grid; grid-template-columns: var(--split, 1fr 1fr 1fr); padding: 0; }
.split > * { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 15px 16px 16px; }
.split > * + * { border-left: 1px solid var(--hairline); }
.hero { display: flex; align-items: baseline; gap: 8px; }
.big { font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--label-1); }
.delta { font-size: 12px; font-weight: 500; }

/* ---------- Data viz ---------- */
.bar { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; }
.inline-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--label-2); }
.inline-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.inline-legend b { color: var(--label-1); font-weight: 500; }
.takeaway { margin-left: auto; font-size: 12px; color: var(--label-2); }
.takeaway b { color: var(--label-1); font-weight: 500; }
/* Static bar chart: every bar shows its number */
.bars { flex: 1 1 auto; display: grid; grid-template-columns: repeat(var(--n, 7), 1fr); gap: var(--bar-gap, 10px); align-items: end; min-height: var(--bars-h, 96px); }
.bars > div { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; }
.bars > div > b { display: block; text-align: center; font-size: 12px; font-weight: 500; line-height: 1; color: var(--label-2); }
.bars i { display: block; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--dv-volume); }
.bars span { font-size: 11px; color: var(--label-3); text-align: center; white-space: nowrap; }
.bars span.today { color: var(--accent-text); }
.bars-stack .stack { display: flex; flex-direction: column; gap: 1px; min-height: 2px; border-radius: 3px 3px 0 0; overflow: hidden; }
.bars-stack .stack i { border-radius: 0; min-height: 0; }
:is(.bars-stack, .type-bar, .bar) i.a-banned { background: var(--act-banned); }
:is(.bars-stack, .type-bar, .bar) i.a-muted { background: var(--act-muted); }
:is(.bars-stack, .type-bar, .bar) i.a-deleted { background: var(--act-deleted); }
/* "By type" rows: icon, name, action bar, count. A row filters the list */
.type-row { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 30px; margin: 0 -6px; padding: 0 6px; border-radius: var(--r-sm); color: var(--label-1); text-decoration: none; }
.type-row:hover { background: var(--fill-1); color: var(--label-1); }
.type-row.is-on { background: var(--sel-bg); box-shadow: inset 0 0 0 1px var(--hairline); }
.type-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--fill-2); color: var(--label-2); flex-shrink: 0; }
.type-ic svg { width: 13px; height: 13px; }
/* A type's tile takes its colour (src_tone: .tone-* from status.css, .src-ai the accent). */
.type-ic[class*="tone-"], .type-ic.src-ai { background: var(--tone-ghost); color: var(--tone); }
.type-l { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.type-bar > span { display: flex; height: 6px; gap: 1px; border-radius: 3px; overflow: hidden; }
.type-bar i { display: block; height: 100%; }
.type-row b { min-width: 28px; text-align: right; font-size: 13.5px; font-weight: 500; }

/* ---------- People ---------- */
/* A steady color per person: style="--h:<0-359>" from avatar_hue(name) */
.avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface-2); font-size: 11px; font-weight: 500; color: var(--label-2); overflow: hidden; }
.avatar-lg { width: 28px; height: 28px; font-size: 12px; }
.avatar.hue { background: hsl(var(--h) 60% 50% / 0.22); border-color: hsl(var(--h) 60% 55% / 0.35); color: hsl(var(--h) 70% 74%); font-weight: 600; }
:root:not([data-theme="dark"]) .avatar.hue { background: hsl(var(--h) 60% 50% / 0.12); color: hsl(var(--h) 70% 36%); }
.avatar-ai { background: var(--ai-tint); border-color: transparent; color: var(--ai); }
.avatar svg { width: 12px; height: 12px; }
.cell-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-user b { display: block; color: var(--label-1); font-weight: 500; }

/* ---------- What the bot did: one tag style everywhere ---------- */
.act-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.act-tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.act-banned { background: var(--red-tint); color: var(--red); }
.act-muted { background: var(--amber-tint); color: var(--amber); }
.act-deleted { background: var(--fill-1); border-color: var(--hairline); color: var(--label-2); }
.act-free { background: var(--green-tint); color: var(--green); }
/* Suggested, not done yet: the action's color, outlined instead of filled */
.act-suggested { border-color: color-mix(in srgb, var(--red) 45%, transparent); color: var(--red); }
.act-sugg-mute { border-color: color-mix(in srgb, var(--amber) 50%, transparent); color: var(--amber); }
.act-by { font-size: 12.5px; color: var(--label-3); }

/* Severity / state: a dot and a word, no box */
.state { font-size: 12.5px; color: var(--label-2); white-space: nowrap; }
.state::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--label-3); vertical-align: 1px; }
.state-on::before { background: var(--green); }
.state-warn::before { background: var(--amber); }
.state-bad::before { background: var(--red); }
.state-off::before { background: var(--dv-volume); }

/* Category / topic: plain text joined by a dot */
.rule-text { color: var(--label-1); font-size: 13.5px; font-weight: 500; }
.rule-text + .rule-text::before { content: '·'; margin: 0 6px; color: var(--label-3); }
/* The message that caused an incident, one italic line */
.inc-quote { max-width: 72ch; overflow: hidden; color: var(--label-3); font-size: 13.5px; font-style: italic; white-space: nowrap; text-overflow: ellipsis; }
/* Mood score: a colored signed number */
.score { font-size: 12.5px; font-weight: 500; color: var(--label-2); }
.score.pos { color: var(--green); }
.score.neg { color: var(--red); }

/* ---------- Tables ---------- */
.table { width: 100%; margin: 0; border-collapse: collapse; background: none; font-size: 13.5px; }
.table th { padding: 8px 10px 8px 0; border: 0; border-top: 1px solid var(--hairline); background: none; text-align: left; white-space: nowrap; font: 500 11px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--label-3); }
.table td { padding: 9px 10px 9px 0; border: 0; border-top: 1px solid var(--hairline); background: none; vertical-align: middle; color: var(--label-body); }
.table th.r, .table td.r { text-align: right; }
.table td.num { font-weight: 500; color: var(--label-1); white-space: nowrap; }
.table tbody tr:hover td { background: var(--hover-tint); }

/* ---------- Controls ---------- */
/* Filter chips inside a card */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tabs > :is(a, button) { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border: 0; border-radius: var(--r-sm); background: none; color: var(--label-2); font: 500 12px var(--font); text-decoration: none; cursor: pointer; }
.tabs > :is(a, button):hover { color: var(--label-1); }
.tabs > .is-on { background: var(--sel-bg); color: var(--label-1); box-shadow: inset 0 0 0 1px var(--hairline); }
.tabs .n { color: var(--label-3); }
/* Search box with an icon */
.input { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-1); color: var(--label-3); font-size: 13px; }
.input:focus-within { border-color: var(--accent); }
.input > svg { width: 14px; height: 14px; flex-shrink: 0; }
.input > input { all: unset; flex: 1; min-width: 0; color: var(--label-1); }
.input > input::placeholder { color: var(--label-3); }
/* Filter dropdown button: "Type  All types ▾" */
.filter { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 9px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--fill-1); color: var(--label-2); font: 500 12px var(--font); white-space: nowrap; cursor: pointer; }
.filter b { color: var(--label-1); font-weight: 500; }
/* Numbered pager */
.pager { display: flex; align-items: center; gap: 4px; }
.pg { min-width: 28px; height: 24px; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--label-2); font: 500 12px var(--font); display: inline-grid; place-items: center; text-decoration: none; }
.pg:hover { background: var(--fill-1); color: var(--label-1); }
.pg.is-on { background: var(--surface-2); color: var(--label-1); box-shadow: inset 0 0 0 1px var(--hairline); }
.list-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); }

/* ---------- Filter rail (Incidents, Chat History) ---------- */
.rail { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; }
.rail .micro { padding: 10px 8px 6px; }
.rail .micro:first-child { padding-top: 2px; }
.rail-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: var(--r-md); color: var(--label-2); font-size: 13.5px; text-decoration: none; }
.rail-item:hover { background: var(--fill-1); color: var(--label-1); }
.rail-item.is-on { background: var(--sel-bg); color: var(--label-1); font-weight: 500; box-shadow: inset 0 0 0 1px var(--hairline); }
.rail-item .n { margin-left: auto; font-size: 12px; color: var(--label-3); }
.rail-item.child { padding-left: 24px; }
.rail-sub { display: flex; align-items: center; gap: 6px; padding: 8px 8px 2px 16px; font-size: 12px; color: var(--label-3); }
.rail-sub svg { width: 12px; height: 12px; }

/* ---------- Menus (inside .popover) ---------- */
.pop-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-md); background: none; color: var(--label-1); font: 400 13.5px var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.pop-item:hover { background: var(--fill-1); color: var(--label-1); }
.pop-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--label-2); }
.pop-item .sub { margin-left: auto; font-size: 12px; color: var(--label-3); }
.pop-item.danger, .pop-item.danger svg { color: var(--red); }
.pop-item:disabled { opacity: 0.45; cursor: default; }
.pop-sep { height: 1px; margin: 6px 4px; background: var(--hairline); }
.pop-label { padding: 8px 10px 4px; font: 500 11px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--label-3); }
/* A row's single "Actions" menu */
.row-menu { position: relative; display: inline-flex; }
.row-menu > .popover { top: calc(100% + 6px); right: 0; min-width: 220px; }
.row-menu-left > .popover { right: auto; left: 0; }
.row-menu > .popover:not(.open) { display: none; }
.row-menu:has(> .popover.open) > .btn { background: var(--fill-2); }

/* ---------- Add to Telegram / Discord: the one place brand color lives ---------- */
.add-to { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--fill-1); color: var(--label-1); font-size: 13.5px; font-weight: 500; text-decoration: none; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.add-to svg { width: 16px; height: 16px; fill: var(--b, currentColor); }
.add-to.tg { --b: var(--platform-telegram); }
.add-to.dc { --b: var(--platform-discord); }
.add-to:hover { color: var(--label-1); border-color: color-mix(in srgb, var(--b) 55%, transparent); background: color-mix(in srgb, var(--b) 6%, var(--fill-1)); }
/* Small platform marks, in their brand color (reset.css). */
svg.plat { width: 13px; height: 13px; flex-shrink: 0; vertical-align: -2px; }

/* ---------- Two-column page body: filter rail + list ---------- */
.with-rail { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1000px) {
    .with-rail { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
    .split > * + * { border-left: 0; border-top: 1px solid var(--hairline); }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .kpis { grid-template-columns: 1fr; }
}

/* ---------- Row hover toolbar (row_tool / row_tools in _macros.html) ----------
   On a .has-tools row (message rows, Recent incidents) a small bar floats in the row's
   top-right corner while it is hovered (or a menu of it is open): no room at rest. Every
   tool keeps its slot; one that doesn't apply is greyed (aria-disabled) and its tip says
   why. Under the pointer each tool takes its own color. */
.has-tools { position: relative; }
.row-tools {
    position: absolute; top: 6px; right: 8px; z-index: 4;
    display: none; align-items: center; gap: 1px; padding: 2px;
    border: 1px solid var(--hairline); border-radius: var(--r-md);
    background: var(--surface-2); box-shadow: var(--shadow-float);
    cursor: default;
}
.has-tools:hover .row-tools,
.has-tools:focus-within .row-tools,
.has-tools:has(.popover.open) .row-tools { display: inline-flex; }
.has-tools:has(.popover.open) { z-index: 5; background: var(--hover-tint); }
.row-tools-sep { width: 1px; height: 16px; margin: 0 3px; background: var(--hairline); }
.row-tool {
    display: inline-grid; place-items: center; width: 26px; height: 26px;
    margin: 0; padding: 0; border: 0; border-radius: var(--r-sm);
    background: none; color: var(--label-2); cursor: pointer;
    transition: color var(--dur-fast), background-color var(--dur-fast);
}
.row-tool svg { width: 15px; height: 15px; }
/* An idle tool is grey: a platform mark lights up on hover like every other tool. */
.row-tool svg:has(> use[href^="#icon-"]) { fill: currentColor; }
.row-tool:hover, .row-menu:has(> .popover.open) > .row-tool { color: var(--label-1); background: var(--fill-2); }
.row-tool.tone-warn:hover, .row-menu:has(> .popover.open) > .row-tool.tone-warn { color: var(--amber); background: var(--amber-tint); }
.row-tool.tone-bad:hover { color: var(--red); background: var(--red-tint); }
.row-tool.tone-good:hover { color: var(--green); background: var(--green-tint); }
.row-tool.tone-telegram:hover { color: var(--platform-telegram); }
.row-tool.tone-discord:hover { color: var(--platform-discord); }
.row-tool[aria-disabled="true"],
.row-tool[aria-disabled="true"]:hover { color: var(--label-3); background: none; opacity: 0.4; cursor: not-allowed; }
.row-tools .row-menu > .popover { top: calc(100% + 4px); min-width: 220px; }
.row-tools .pop-label { padding-top: 6px; }

/* In a More menu: Mute on one line with its lengths as chips */
.pop-mute-row { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; color: var(--label-1); font-size: 13.5px; }
.pop-mute-row > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--label-2); }
.pop-mute-row.is-off { opacity: 0.45; }
.pop-chips { display: flex; gap: 4px; margin-left: auto; padding-left: 8px; }
.pop-chip { height: 22px; padding: 0 7px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--fill-1); color: var(--label-2); font-size: 12px; white-space: nowrap; cursor: pointer; }
.pop-chip:hover:not(:disabled) { color: var(--amber); background: var(--amber-tint); border-color: transparent; }
.pop-chip:disabled { cursor: not-allowed; }

/* No hover on touch screens: only the More button, in the row's corner (its menu has everything). */
@media (hover: none) {
    .row-tools { position: static; display: inline-flex; padding: 0; border: 0; background: none; box-shadow: none; }
    .row-tools > :not(.row-menu:last-child) { display: none; }
}

/* Incident types (partials/_incident_tools.html; Incidents page and Recent incidents): AI in
   the accent blue, the rest in their status tone. The type rides the member's avatar as a tinted badge; its name is tinted. */
.src-ai { --tone: var(--accent-text); --tone-ghost: var(--accent-tint); }
.inc-av { position: relative; display: inline-flex; flex-shrink: 0; align-self: flex-start; }
.inc-av-badge {
    position: absolute; right: -5px; bottom: -5px;
    display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
    background: color-mix(in srgb, var(--tone) 22%, var(--surface-1)); color: var(--tone);
    box-shadow: 0 0 0 2px var(--surface-1); cursor: help;
}
.inc-av-badge svg { width: 10px; height: 10px; }
.inc-src[class*="tone-"], .inc-src.src-ai { color: var(--tone); font-weight: 500; }
.ov-inc .inc-src { font-size: 12.5px; }

/* A page's view switch: Feed / Table, Simple / Advanced. page-title-row seats it beside the title. */
.view-toggle .preset-btn { text-decoration: none; }
.view-toggle .preset-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; }
.page-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }