/* Dark console look. One bundled monospace font (fonts/), phosphor green and amber on near-black.
   Panel borders are real box-drawing characters; the side lines are CSS lines placed on the glyph centre. */
@font-face { font-family: "Tailmono"; src: url("fonts/tailmono-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tailmono"; src: url("fonts/tailmono-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg: #060906;
  --bg2: #0a110b;
  --bg3: #0f1a11;
  --line: #2b6b3d;
  --line-dim: #1b3d26;
  --text: #b9d8c0;
  --muted: #6f8f78;
  --green: #5dff8a;
  --green-dim: #2f9d55;
  --amber: #ffb000;
  --critical: #ff5f5f;
  --high: #ffa31a;
  --medium: #62d4e8;
  --low: #7f9a87;
  --font: "Tailmono", "IBM Plex Mono", "DejaVu Sans Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 13px/1.5 var(--font); font-variant-ligatures: none;
  padding-bottom: 44px;
  background-image: radial-gradient(ellipse at 50% -20%, #0e2415 0%, transparent 60%);
  background-attachment: fixed;
}
body::after {   /* faint scanlines */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0, 0, 0, .13) 3px);
}
::selection { background: var(--amber); color: #000; }
a { color: var(--green); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
a:hover { color: #fff; }
code { color: var(--amber); }
.mono { font-family: var(--font); }
.muted, .meta { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1px dashed var(--amber); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ------------------------------------------------------------ tmux-style status bar */
.statusbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1.6ch; flex-wrap: nowrap;
  background: var(--green-dim); color: #021006; padding: 0 1ch; height: 26px; overflow: hidden; white-space: nowrap;
  border-bottom: 1px solid #000; font-weight: 400;
}
.sb-session { font-weight: 700; }
.sb-windows { display: flex; gap: 1ch; }
.win { color: #021006; text-decoration: none; padding: 0 .6ch; }
.win:hover { background: #021006; color: var(--green); }
.win.on { background: var(--amber); color: #000; font-weight: 700; }
.win-guide { flex: none; background: var(--amber); color: #000; border: 0; font-weight: 700; padding: 0 1.2ch; align-self: stretch; line-height: 1; }
.win-guide:hover { background: #021006; color: var(--amber); }
.win-guide:focus-visible { outline: 2px solid #021006; outline-offset: -3px; }
.gl-short { display: none; }
.sb-title { font: inherit; font-weight: 700; margin: 0 auto 0 1ch; overflow: hidden; text-overflow: ellipsis; }
.sb-title .by { font-weight: 400; opacity: .8; }
.sb-counts { display: flex; gap: 1.4ch; }
.sb-counts span { font-weight: 700; }
.sb-counts .critical { color: #5a0000; } .sb-counts .high { color: #4a2c00; } .sb-counts .medium { color: #00323a; } .sb-counts .low { color: #1f2f24; }
.sb-clock { background: #021006; color: var(--green); padding: 0 1ch; align-self: stretch; display: flex; align-items: center; min-width: 22ch; justify-content: center; }

.banner {
  margin: 6px 1ch 0; padding: 1px 1.5ch; border: 0; border-left: 2px solid var(--amber); color: var(--amber); background: none;
  font-size: 12px;
}
.banner strong { letter-spacing: .08em; }
.banner.real { border-color: var(--green); color: var(--green); }
.banner span { color: inherit; opacity: .92; }

main { padding: 8px 1ch 0; max-width: 1500px; margin: 0 auto; }
.error { border: 1px solid var(--critical); color: var(--critical); padding: 6px 1.5ch; margin-bottom: 8px; background: rgba(255, 95, 95, .06); }

/* ------------------------------------------------------------ htop-style header */
.htop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 4ch; padding: 14px 1ch 4px; align-items: start; }
.kpis { display: contents; }
.meter { grid-column: 1; }
.stat-col { grid-column: 2; grid-row: 1 / span 3; }
.meter {
  display: flex; align-items: center; gap: 1ch; width: 100%; background: none; border: 0; padding: 0 .5ch; text-align: left; color: var(--text);
  white-space: pre; line-height: 1.55;
}
.meter:hover { background: var(--bg3); }
.meter .lbl { width: 9ch; color: var(--muted); }
.meter .br { color: var(--line); } .meter .fillc { color: var(--c, var(--green)); letter-spacing: 0; } .meter .emp { color: #1f3a27; }
.meter .n { color: var(--c); font-weight: 700; min-width: 3ch; text-align: right; }
.meter[aria-pressed="true"] { background: var(--c); color: #000; }
.meter[aria-pressed="true"] .lbl, .meter[aria-pressed="true"] .n, .meter[aria-pressed="true"] .br, .meter[aria-pressed="true"] .fillc, .meter[aria-pressed="true"] .emp { color: #000; }
.stat { display: flex; gap: 1ch; padding: 0 .5ch; white-space: pre; line-height: 1.55; }
.stat .lbl { width: 16ch; color: var(--muted); } .stat .n { color: var(--green); font-weight: 700; }
.stat-col { display: flex; flex-direction: column; }
.dataset-meta { margin: 0; color: var(--muted); grid-column: 2; grid-row: 4; padding: 0 .5ch; }

/* ------------------------------------------------------------ box-drawing panels */
.box { display: flex; flex-direction: column; min-width: 0; }
.bt, .bf { display: flex; align-items: center; margin: 0; font: inherit; font-weight: 400; color: var(--line); white-space: nowrap; overflow: hidden; line-height: 1.2; height: 1.2em; }
.bt .t { color: var(--green); font-weight: 700; padding: 0 1ch; text-shadow: 0 0 8px rgba(93, 255, 138, .35); }
.bt .t::before { content: "["; color: var(--line); font-weight: 400; margin-right: .5ch; }
.bt .t::after { content: "]"; color: var(--line); font-weight: 400; margin-left: .5ch; }
.bt .t { padding: 0 .5ch; }
.fill { flex: 1 1 auto; overflow: hidden; min-width: 0; height: 1.2em; }
.fill::after { content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; display: block; }
.bf { color: var(--line); }
.bb { margin: 0 .5ch; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 6px 1.5ch 6px; flex: 1 1 auto; min-width: 0; }
.tag-state { color: var(--amber); padding: 0 .5ch; }
.mini { background: none; border: 1px solid var(--line); color: var(--amber); padding: 0 1ch; line-height: 1.2; height: 1.4em; margin: 0 .5ch; }
.mini:hover { background: var(--amber); color: #000; }
.hint { color: var(--muted); margin: 0 0 6px; font-size: 12px; }
.hint::before { content: "# "; color: var(--line); }

.row { display: grid; gap: 14px 2ch; margin-top: 22px; }
.r1, .r2 { grid-template-columns: minmax(0, 1fr); }
#sec-alerts > .bb { display: flex; flex-direction: column; min-height: 0; }

/* timeline */
.chart-wrap { position: relative; height: 150px; }
#timeline { width: 100%; height: 100%; display: block; cursor: crosshair; }
.legend { display: flex; gap: 1.5ch; padding: 0 1ch; font-size: 12px; }
.legend span { color: var(--muted); }
.legend span::before { content: "█ "; color: var(--c); }
.tooltip {
  position: absolute; pointer-events: none; z-index: 5; width: 280px; background: #020402; border: 1px solid var(--amber); color: var(--text);
  padding: 4px 1ch; font-size: 12px; box-shadow: 0 0 0 1px #000;
}
.tooltip strong { color: var(--amber); }

/* tail */
.tail-bb { position: relative; }
.tail-wrap { position: relative; height: 260px; border: 1px solid var(--line-dim); background: #020402; }
.tail { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 1ch; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.tl-line { display: flex; gap: 1ch; width: 100%; background: none; border: 0; padding: 0; text-align: left; white-space: nowrap; line-height: 1.5; color: var(--text); font-size: 12px; }
.tl-line:hover { background: var(--bg3); }
.tl-line .ts { color: var(--muted); flex: none; }
.tl-line .sv { flex: none; width: 4ch; color: var(--c); font-weight: 700; }
.tl-line .id { flex: none; color: var(--green-dim); }
.tl-line .ev { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tl-line.new { animation: flash 900ms ease-out; }
@keyframes flash { from { background: rgba(93, 255, 138, .22); } to { background: transparent; } }
.tl-sep { color: var(--amber); padding: 0; font-size: 12px; }
.tail-cursor { display: inline-block; width: 1ch; height: 1.1em; background: var(--green); vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite; margin: 0 1ch; }
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------ filters */
.filters { display: flex; flex-wrap: wrap; gap: 6px 1ch; align-items: center; margin-bottom: 4px; }
.prompt { color: var(--green); font-weight: 700; }
#f-search { flex: 1 1 30ch; min-width: 18ch; background: var(--bg2); border: 0; border-bottom: 1px solid var(--line); padding: 1px 1ch; color: var(--amber); caret-color: var(--green); }
#f-search::placeholder { color: #47604d; }
#f-search:focus { outline: none; border-bottom-color: var(--amber); background: var(--bg3); }
select { background: var(--bg2); border: 1px solid var(--line-dim); padding: 1px .5ch; max-width: 24ch; color: var(--text); }
select:focus { border-color: var(--amber); outline: none; }
.chips { display: flex; gap: .5ch; }
.chip { background: none; border: 1px solid var(--line-dim); padding: 0 1ch; color: var(--c); }
.chip:hover { border-color: var(--c); }
.chip[aria-pressed="true"] { background: var(--c); color: #000; border-color: var(--c); font-weight: 700; }
.btn { display: inline-block; background: none; border: 1px solid var(--line); color: var(--green); padding: 0 1.2ch; line-height: 1.5; text-decoration: none; }
.btn:hover { background: var(--green); color: #000; }
label.btn { cursor: pointer; }
.active-filters { display: flex; flex-wrap: wrap; gap: .8ch; min-height: 0; margin: 2px 0 4px; }
.pill { color: var(--amber); }
.pill::before { content: "["; } .pill::after { content: "]"; }
.pill button { background: none; border: 0; color: var(--critical); padding: 0 0 0 1ch; }

/* ------------------------------------------------------------ tables */
.table-scroll { overflow: auto; max-width: 100%; }
.alert-scroll { flex: 1 1 0; min-height: 0; border-top: 1px solid var(--line-dim); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; color: var(--muted); font-weight: 400; padding: 1px 1.5ch 1px 0; border-bottom: 1px solid var(--line-dim); white-space: nowrap; position: sticky; top: 0; background: var(--bg); z-index: 2; }
table.data td { padding: 1px 1.5ch 1px 0; vertical-align: top; }
table.alerts td.mono { white-space: nowrap; }
table.data .num { text-align: right; }
table.data tbody tr[data-id], table.data tbody tr[data-tech] { cursor: pointer; }
table.data tbody tr:hover td { background: var(--bg3); }
table.data tbody tr.cur td { background: #14301c; }
table.data tbody tr.cur td.cur-col { color: var(--amber); font-weight: 700; }
table.data tbody tr.active td { background: #2a2208; }
td.cur-col, th.cur-col { width: 2ch; padding-right: 0; color: var(--amber); }
tr.cur td.cur-col::before { content: ">"; }
button.sort { background: none; border: 0; padding: 0; color: var(--muted); }
button.sort:hover, button.sort.on { color: var(--amber); }
button.sort.on::after { content: " " attr(data-dir); }
.linklike { background: none; border: 0; padding: 0; color: var(--text); text-align: left; }
tr.cur .linklike, tr:hover .linklike { color: #fff; }
.sub { display: block; color: var(--muted); font-size: 12px; }
.chip-ip { color: var(--muted); white-space: nowrap; }
.empty { color: var(--amber); margin: 8px 0 0; }

.sev-badge { display: inline-block; min-width: 6ch; text-align: center; padding: 0 .6ch; font-weight: 700; color: #000; background: var(--c, var(--low)); text-transform: uppercase; font-size: 11.5px; line-height: 1.45; }
.sev-critical { --c: var(--critical); } .sev-high { --c: var(--high); } .sev-medium { --c: var(--medium); } .sev-low { --c: var(--low); }
.tag { color: var(--muted); margin-left: 1ch; }
.tag::before { content: "("; } .tag::after { content: ")"; }

/* top IPs / incidents */
.ip-list, .incident-list { list-style: none; padding: 0; margin: 0; }
.ip-row, .inc { display: block; width: 100%; background: none; border: 0; text-align: left; padding: 1px .5ch; border-left: 2px solid transparent; }
.ip-row:hover, .inc:hover { background: var(--bg3); }
.ip-row.active, .inc.active { background: #2a2208; border-left-color: var(--amber); }
.ip-top { display: flex; justify-content: space-between; gap: 1ch; }
.ip-addr { color: var(--green); font-weight: 700; }
.ip-bar { color: var(--c); white-space: pre; letter-spacing: 0; }
.ip-bar .emp { color: #1f3a27; }
.ip-sub { color: var(--muted); font-size: 12px; }
.ip-list li { margin-bottom: 3px; }
.inc { --c: var(--low); }
.inc .t { display: flex; gap: 1ch; align-items: center; }
.inc .t .mono { color: var(--green); font-weight: 700; }
.inc .s { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc { margin-bottom: 4px; }

/* details / rules */
details.rules { margin-top: 8px; border-top: 1px dashed var(--line-dim); padding-top: 4px; }
details.rules summary { cursor: pointer; color: var(--green); list-style: none; }
details.rules summary::-webkit-details-marker { display: none; }
details.rules summary::before { content: "+ "; color: var(--amber); }
details.rules[open] summary::before { content: "- "; }
details.rules .table-scroll { max-height: 280px; margin-top: 6px; }
.rules td.muted { font-size: 12px; }

/* why note */
.note p { margin: 0 0 9px; color: var(--text); max-width: 78ch; }
.note p:last-child { margin-bottom: 0; color: var(--muted); }
.note::before { content: "$ cat why-i-built-this.txt"; display: block; color: var(--green-dim); margin-bottom: 6px; }

.foot { color: var(--muted); font-size: 12px; margin: 10px 1ch 0; max-width: 120ch; }
.foot.meta { margin-bottom: 4px; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ htop-style key bar */
.keybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 1px; background: #000; height: 26px; overflow: hidden; white-space: nowrap; }
.keybar button { flex: 1 1 0; display: flex; align-items: center; gap: .8ch; background: #0b3a58; color: #000; border: 0; padding: 0 1ch; min-width: 0; background: var(--green-dim); font-size: 12.5px; }
.keybar button b { background: #021006; color: var(--green); padding: 0 .8ch; font-weight: 700; }
.keybar button:hover { background: var(--amber); }
.keybar button:hover b { color: var(--amber); }

/* ------------------------------------------------------------ drawer (the drill-down pane) */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .66); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100%); z-index: 50; background: var(--bg); border-left: 1px solid var(--amber);
  display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0, 0, 0, .8); outline: none;
}
.drawer[hidden], .scrim[hidden], .help[hidden], .guide[hidden], .start[hidden] { display: none; }
.drawer-head { padding: 8px 2ch 6px; border-bottom: 1px dashed var(--line); position: relative; }
.drawer-head h2 { font: inherit; font-weight: 700; color: var(--green); margin: 2px 0 6px; padding-right: 16ch; font-size: 15px; line-height: 1.35; }
.drawer-head .btn { position: absolute; top: 8px; right: 2ch; }
.drawer-body { overflow: auto; padding: 4px 2ch 24px; flex: 1; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.d-sec { margin-top: 12px; }
.d-sec h3 { font: inherit; font-weight: 700; color: var(--amber); margin: 0 0 4px; }
.d-sec h3::before { content: "== "; color: var(--line); } .d-sec h3::after { content: " =="; color: var(--line); }
.d-sec p { margin: 0 0 6px; }
dl.kv { display: grid; grid-template-columns: 14ch minmax(0, 1fr); gap: 0 1ch; margin: 0; }
dl.kv dt { color: var(--muted); text-transform: lowercase; } dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.chip-row { display: flex; flex-wrap: wrap; gap: .6ch 1ch; }
.chip-btn { background: none; border: 1px solid var(--line); color: var(--green); padding: 0 1ch; text-decoration: none; font-size: 12px; line-height: 1.5; }
.chip-btn:hover { background: var(--green); color: #000; }
ol.steps, ul.steps { margin: 0; padding-left: 3ch; } ol.steps li, ul.steps li { margin-bottom: 3px; }
ol.tl { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; border-left: 1px solid var(--line-dim); }
ol.tl li { padding: 0 0 4px 1.5ch; position: relative; font-size: 12.5px; }
ol.tl li::before { content: ""; position: absolute; left: -3px; top: .6em; width: 5px; height: 5px; background: var(--c, var(--green)); }
ol.tl time { display: block; color: var(--muted); font-size: 11.5px; }
pre.evidence { margin: 0; padding: 6px 1ch; background: #020402; border: 1px solid var(--line-dim); color: #a6e3b3; max-height: 260px; overflow: auto; font: 12px/1.45 var(--font); white-space: pre-wrap; word-break: break-all; }
.btn-row { display: flex; gap: 1ch; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.toast { color: var(--amber); }
.keyhint { margin-left: auto; font-size: 12px; }

/* help overlay */
.help { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .78); display: flex; align-items: center; justify-content: center; padding: 12px; outline: none; }
.help-box { background: var(--bg); border: 1px double var(--green); border-style: double; border-width: 3px; padding: 10px 3ch 12px; max-width: 70ch; width: 100%; max-height: 92vh; overflow: auto; }
.help-box h2 { font: inherit; font-weight: 700; color: var(--green); margin: 0 0 8px; }
dl.keys { display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: 2px 1.5ch; margin: 0 0 8px; }
dl.keys dt { color: var(--amber); font-weight: 700; } dl.keys dd { margin: 0; }

/* start-here callout and the guide dialog */
.start { margin: 10px 1ch 0; color: var(--muted); }
.start p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 1.2ch; }
.start-t { color: var(--amber); }
.btn.quiet { border-color: transparent; color: var(--muted); }
.btn.quiet:hover { color: var(--text); background: none; text-decoration: underline; }
.btn-go { border-color: var(--amber); color: var(--amber); }
.btn-go:hover { background: var(--amber); color: #000; }
.guide { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .8); display: flex; align-items: center; justify-content: center; padding: 12px; }
.guide-box { background: var(--bg); border: 3px double var(--green); width: 100%; max-width: 92ch; max-height: 94vh; display: flex; flex-direction: column; min-height: 0; }
.guide-head { position: relative; padding: 8px 3ch 6px; border-bottom: 1px dashed var(--line); }
.guide-cmd { margin: 0; color: var(--muted); }
.guide-head h2 { font: inherit; font-weight: 700; font-size: 16px; color: var(--green); margin: 2px 0 0; padding-right: 14ch; }
.guide-head .btn { position: absolute; top: 8px; right: 2ch; }
.guide-scroll { overflow: auto; padding: 4px 3ch 14px; flex: 1 1 auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.guide-scroll section { margin-top: 12px; }
.guide-scroll h3 { font: inherit; font-weight: 700; color: var(--amber); margin: 0 0 4px; }
.guide-scroll h3::before { content: "== "; color: var(--line); } .guide-scroll h3::after { content: " =="; color: var(--line); }
.guide-scroll p { margin: 0 0 6px; }
.g-steps { margin: 0; padding-left: 3ch; } .g-steps li { margin-bottom: 7px; padding-left: .4ch; } .g-steps li::marker { color: var(--amber); font-weight: 700; }
.g-steps b { color: var(--green); font-weight: 700; }
dl.g-gloss { display: grid; grid-template-columns: 24ch minmax(0, 1fr); gap: 3px 1.5ch; margin: 0; }
dl.g-gloss dt { color: var(--amber); font-weight: 700; } dl.g-gloss dd { margin: 0; }
.g-foot { margin-top: 14px; }
.guide-scroll:focus-visible { outline-offset: -3px; }

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 1100px) {
  .alert-scroll { flex: none; max-height: 70vh; }
  .htop { grid-template-columns: minmax(0, 1fr); } .dataset-meta { grid-column: 1; grid-row: auto; } .stat-col { grid-column: 1; grid-row: auto; margin-top: 4px; }
  .sb-counts { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 12.5px; padding-bottom: 40px; }
  .statusbar { gap: 1ch; }
  .sb-title, .sb-clock, .sb-session { display: none; }
  .sb-windows { gap: 0; } .win { padding: 0 .4ch; } .win:nth-child(n+4) { display: none; }
  .win-guide { margin-left: auto; padding: 0 1.4ch; min-width: 44px; }
  .gl-long { display: none; } .gl-short { display: inline; }
  .guide { padding: 0; align-items: stretch; } .guide-box { max-height: none; height: 100%; border-width: 0 0 0 0; }
  .guide-head { padding: 8px 12px 6px; } .guide-head .btn { right: 12px; min-height: 36px; }
  .guide-scroll { padding: 4px 12px 24px; }
  dl.g-gloss { grid-template-columns: 1fr; } dl.g-gloss dd { margin-bottom: 6px; }
  .start .btn, .g-foot .btn { min-height: 38px; }
  .hide-sm { display: none; }
  .filters .btn, .filters select { flex: 1 1 auto; }
  .legend { display: none; }
  .chart-wrap { height: 180px; }
  .keybar button { font-size: 11px; gap: .4ch; padding: 0 .5ch; }
  .keybar button:nth-child(n+7) { display: none; }
  .meter .lbl { width: 8ch; }
  dl.kv { grid-template-columns: 1fr; } dl.kv dd { margin-bottom: 4px; }
  .drawer-head h2 { padding-right: 0; margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-line.new { animation: none; } .tail-cursor { animation: none; }
}

/* ------------------------------------------------------------ simplified layout: one main list, the rest folded away */
.alert-scroll { flex: 0 1 auto; max-height: min(58vh, 540px); }
.more { margin-top: 26px; display: grid; gap: 10px; }
details.fold > summary.bt { cursor: pointer; list-style: none; }
details.fold > summary.bt::-webkit-details-marker { display: none; }
details.fold > summary.bt:hover .t { color: #fff; }
details.fold:not([open]) > .bf { display: none; }
.tog::before { content: "[+]"; color: var(--amber); padding: 0 .5ch; }
details.fold[open] > summary .tog::before { content: "[-]"; }
details.fold > summary.bt .fill { opacity: .7; }
details.fold:not([open]) > summary.bt { color: var(--line); }
.clock { color: var(--amber); }
.tail-bb .mini { margin: 0 0 0 1ch; }
.tools { flex: 1 0 100%; }
.tools > summary { cursor: pointer; color: var(--muted); list-style: none; display: inline-block; }
.tools > summary::-webkit-details-marker { display: none; }
.tools > summary::before { content: "+ "; color: var(--amber); }
.tools[open] > summary::before { content: "- "; }
.tools > summary:hover { color: var(--text); }
.tools-row { display: flex; flex-wrap: wrap; gap: 6px 1ch; align-items: center; margin-top: 6px; }
.kpis .meter { line-height: 1.7; }