/* Squawk console stylesheet.
   Brand rules (non-negotiable):
   - Palette only: navy #1B365D, navy2 #27466F, deep #132845, orange #E35205,
     orange-dark #C6470A, gold #FFC72C, pale #C2DFFD, ice #F2F5FA.
     Dark-mode steps: good #2EA35F, warn #FFC72C, crit #E0564A, series #4E8FD0,
     muted #8DA2BE (minimum for small text; darker slates are hairlines only).
   - Orange is NEVER severity or state. Orange means: the lockup dash, the proof
     mark, the now cursor, live human action (buttons a human presses).
   - Status is never colour-alone: every status carries an icon or a text label.
   - Raleway, lining numerals. Text is ice, not pure white.
   - Motion encodes state: arrival transitions and one-shot flashes only. */

@font-face{
  font-family:Raleway;
  src:url('fonts/Raleway-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:Raleway;
  src:url('fonts/Raleway-Bold.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}

:root{
  --navy:#1B365D;--navy2:#27466F;--deep:#132845;
  --orange:#E35205;--orange-d:#C6470A;--gold:#FFC72C;
  --pale:#C2DFFD;--ice:#F2F5FA;--mute:#8DA2BE;
  --good:#2EA35F;--warn:#FFC72C;--crit:#E0564A;--series:#4E8FD0;
  --hair:rgba(194,223,253,.14);--hair-soft:rgba(194,223,253,.07);
  --card:#1B365D;
  --crit-fill:rgba(224,86,74,.28);--warn-fill:rgba(255,199,44,.14);
  --good-fill:rgba(46,163,95,.20);--adv-fill:rgba(78,143,208,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
/* The hidden attribute must always win, including over display:flex rules. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:Raleway,'Segoe UI',sans-serif;background:var(--deep);color:var(--ice);
  font-feature-settings:'lnum' 1;font-size:12.5px;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* Keyboard focus: visible on navy, never colour-alone information. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--pale);outline-offset:2px;border-radius:3px}

/* ================= SHELL ================= */
.shell{display:grid;grid-template-columns:206px minmax(0,1fr);height:100vh}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}

/* ================= RAIL ================= */
.rail{background:var(--deep);border-right:1px solid var(--hair-soft);display:flex;flex-direction:column;box-shadow:inset -18px 0 30px rgba(0,0,0,.22);min-height:0}
.rail .crown{padding:18px 18px 14px;border-bottom:1px solid var(--hair-soft)}
.rail .word{font-weight:700;font-size:17px;letter-spacing:3.2px;color:var(--ice)}
.rail .dash{width:48px;height:3px;background:var(--orange);border-radius:2px;margin:7px 0 6px}
.rail .desc{color:var(--pale);font-size:8.5px;letter-spacing:2.6px}
.rail .poc{margin-top:12px;color:var(--gold);font-size:9px;letter-spacing:1.6px;font-weight:700}
.rail nav{padding:10px 0;flex:1;overflow:auto}
.item{display:flex;align-items:center;gap:11px;padding:9px 18px;color:var(--mute);font-size:10.5px;font-weight:700;letter-spacing:1.6px;border-left:3px solid transparent;cursor:pointer}
.item svg{width:14px;height:14px;flex:none}
.item:hover{color:var(--pale);background:rgba(194,223,253,.04)}
.item.on{color:var(--ice);border-left-color:var(--orange);background:rgba(227,82,5,.08)}
.item .n{margin-left:auto;font-size:9.5px;background:var(--crit-fill);border:1px solid rgba(224,86,74,.5);color:var(--ice);border-radius:999px;padding:1px 7px}
.item .n:empty{display:none}
.rail .endorse{padding:12px 18px 14px;border-top:1px solid var(--hair-soft)}
.rail .agency{color:var(--mute);font-size:8.5px;letter-spacing:1.4px;line-height:1.7}
.holdshort{display:flex;align-items:center;gap:8px;margin-top:10px}
.holdshort .glyph{width:26px;height:8px;background:repeating-linear-gradient(45deg,var(--orange) 0 4px,var(--ice) 4px 8px);border-radius:2px;flex:none}
.holdshort span{color:var(--mute);font-size:8.5px;letter-spacing:1.4px}

/* ================= TOP BAR ================= */
.bar{display:flex;align-items:center;gap:16px;padding:0 20px;height:52px;flex:none;background:var(--navy);border-bottom:1px solid var(--hair-soft)}
.bar h1{font-size:12px;letter-spacing:3px;font-weight:700;white-space:nowrap}
.bar .sub{color:var(--pale);font-size:10px;letter-spacing:1.5px;border-left:1px solid var(--navy2);padding-left:13px;white-space:nowrap}
.bar .spacer{flex:1}
.posture{display:flex;align-items:center;gap:9px;border:1px solid var(--hair);border-radius:999px;padding:5px 13px;font-size:9.5px;font-weight:700;letter-spacing:1.4px;white-space:nowrap}
.posture .seg{display:flex;align-items:center;gap:5px}
.posture .seg+.seg{border-left:1px solid var(--hair);padding-left:9px}
.posture svg{width:11px;height:11px}
.posture.flash{animation:flash 1s ease 1}
@keyframes flash{0%{background:rgba(194,223,253,.18)}100%{background:transparent}}
.clock{text-align:right;line-height:1.35;letter-spacing:1.4px;white-space:nowrap}
.clock b{font-size:15px;color:var(--ice)}
.clock span{font-size:9.5px;color:var(--mute)}
.duty{display:flex;align-items:center;gap:8px;background:var(--navy2);border-radius:999px;padding:4px 6px 4px 12px}
.duty .who{font-size:10px;font-weight:700;letter-spacing:1.2px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duty .signout{border:1px solid var(--hair);border-radius:999px;padding:3px 9px;font-size:8.5px;font-weight:700;letter-spacing:1.2px;color:var(--pale)}
.duty .signout:hover{color:var(--ice);border-color:var(--pale)}

/* ================= BANNERS ================= */
.banner{display:none;flex:none;padding:8px 16px;font-size:10px;font-weight:700;letter-spacing:1.2px;border-bottom:1px solid rgba(255,199,44,.45);background:rgba(255,199,44,.12);color:var(--gold)}
.banner.crit{background:rgba(224,86,74,.18);border-bottom-color:rgba(224,86,74,.55);color:#F0A8A2}
.banner.show{display:block}

/* ================= FIELDLINE ================= */
.fieldline{display:flex;align-items:stretch;flex:none;background:var(--navy);border-bottom:1px solid var(--hair-soft);padding:0 8px;min-height:56px}
.fieldline:empty{display:none}
.cell{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:7px 12px 6px;border-left:1px solid var(--hair-soft);min-width:0}
.cell:first-child{border-left:none}
.cell .lbl{display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;letter-spacing:1.6px;color:var(--mute);white-space:nowrap}
.cell .lbl .glyph{font-size:8px;font-weight:700;color:var(--good)}
.cell .val{font-size:12.5px;font-weight:700;color:var(--ice);white-space:nowrap;display:flex;align-items:baseline;gap:6px;overflow:hidden}
.cell .fresh{font-weight:400;font-size:9px;color:var(--mute)}
.cell .statusbar{height:2px;border-radius:1px;margin-top:2px;background:var(--good)}
.cell.warn .statusbar{background:var(--warn)}
.cell.warn .lbl .glyph{color:var(--warn)}
.cell.crit .statusbar,.cell.high .statusbar{background:var(--crit)}
.cell.crit .lbl .glyph,.cell.high .lbl .glyph{color:var(--crit)}
.cell.crit{background:rgba(224,86,74,.07)}
/* The AI watch is a program, not an alarm and not a human: neutral series accent.
   Orange is reserved for live human action; severity steps are reserved for risk. */
.cell.ai .statusbar{background:var(--series)}
.cell.ai .lbl .glyph{color:var(--series)}
.cell.off .statusbar{background:var(--hair)}
.cell.off .lbl .glyph{color:var(--mute)}

/* ================= CONTENT ================= */
.content{flex:1;min-height:0;overflow:auto;padding:12px;scrollbar-gutter:stable}
.view{display:none;min-height:100%}
.view.on{display:block}
.grid2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:12px;align-items:start}
.stack{display:flex;flex-direction:column;gap:12px;min-width:0}

.panel{background:var(--card);border:1px solid var(--hair-soft);border-radius:8px;box-shadow:0 1px 0 rgba(194,223,253,.06) inset,0 8px 22px rgba(0,0,0,.25);display:flex;flex-direction:column;min-height:0;min-width:0}
.phead{display:flex;align-items:baseline;gap:9px;padding:10px 14px 8px;border-bottom:1px solid var(--hair-soft);flex-wrap:wrap}
.phead h2,.phead h3{font-size:10px;letter-spacing:2.2px;color:var(--pale);font-weight:700;white-space:nowrap}
.phead .u{color:var(--mute);font-size:9px;letter-spacing:.8px}
.phead .right{margin-left:auto;color:var(--mute);font-size:9px;letter-spacing:1px;white-space:nowrap}
.pbody{padding:12px 14px;min-height:0}

/* ================= CHIPS ================= */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;letter-spacing:1.2px;padding:2.5px 8px;border-radius:999px;white-space:nowrap;color:var(--ice)}
.chip svg{width:9.5px;height:9.5px;flex:none}
.chip.critical{background:var(--crit-fill);border:1px solid rgba(224,86,74,.6)}
.chip.high{background:transparent;border:1px solid rgba(224,86,74,.6)}
.chip.caution{background:var(--warn-fill);border:1px solid rgba(255,199,44,.45);color:var(--gold)}
.chip.advisory{background:var(--adv-fill);border:1px solid rgba(78,143,208,.5);color:var(--pale)}
.chip.resolved,.chip.good{background:var(--good-fill);border:1px solid rgba(46,163,95,.5)}
.chip.neutral{border:1px solid var(--hair);color:var(--pale)}
.klass{font-size:8.5px;font-weight:700;letter-spacing:1.4px;color:var(--mute)}

/* ================= FIRST LIGHT TILES ================= */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.tile{border:1px solid var(--hair-soft);border-radius:7px;padding:11px 13px;background:rgba(19,40,69,.35);display:flex;flex-direction:column;gap:7px;min-width:0}
.tile .thead{display:flex;align-items:center;gap:7px}
.tile .thead h4{font-size:9px;font-weight:700;letter-spacing:1.8px;color:var(--pale);flex:1;min-width:0}
.tile .big{font-size:22px;font-weight:700;line-height:1.1}
.tile .big .of{font-size:12px;color:var(--mute);font-weight:400}
.tile .rows{display:flex;flex-direction:column;gap:3px}
.tile .kv{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--mute);letter-spacing:.4px}
.tile .kv b{color:var(--ice);font-weight:700;white-space:nowrap}
.tile .kv .k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .foot{font-size:8.5px;color:var(--mute);letter-spacing:.8px;border-top:1px solid var(--hair-soft);padding-top:6px;margin-top:auto}
/* Empty states: three visually distinct treatments. Honest limits.
   1. notconnected  - never wired (dashed, no figure)
   2. nodata        - wired, nothing arrived (solid mute, no figure)
   3. clear         - measured nothing found (may show a real zero) */
.tile.notwatched,.tile.notconnected{border-style:dashed;border-color:var(--hair);background:transparent}
.tile.notwatched .big,.tile.notconnected .big{color:var(--mute);font-size:12px;letter-spacing:1.2px}
.tile.notwatched p,.tile.notconnected p{color:var(--mute);font-size:9.5px;line-height:1.6}
.tile.notwatched .kv,.tile.notconnected .kv{flex-direction:column;align-items:flex-start;gap:1px}
.tile.notwatched .kv .k,.tile.notconnected .kv .k{white-space:normal;color:var(--pale)}
.tile.notwatched .kv b,.tile.notconnected .kv b{color:var(--mute);font-weight:400;white-space:normal}
.tile.nodata{border-style:solid;border-color:var(--hair);background:rgba(19,40,69,.18)}
.tile.nodata .big{color:var(--mute);font-size:12px;letter-spacing:1.2px}
.tile.nodata p{color:var(--mute);font-size:9.5px;line-height:1.6}
.tile.clear{border-color:rgba(46,163,95,.35)}

/* ================= PLATES (lead squawks) ================= */
.plate{display:block;width:100%;text-align:left;border:1px solid var(--hair-soft);border-left:3px solid var(--mute);border-radius:7px;padding:11px 13px;background:rgba(19,40,69,.35);cursor:pointer}
.plate:hover{background:rgba(194,223,253,.05)}
.plate.critical{border-left-color:var(--crit)}
.plate.high{border-left-color:var(--crit);border-left-style:double}
.plate.caution{border-left-color:var(--warn)}
.plate.advisory{border-left-color:var(--series)}
.plate .rowline{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.plate h4{font-size:12.5px;font-weight:700;line-height:1.35;color:var(--ice)}
.plate .meta{color:var(--mute);font-size:10px;line-height:1.5;margin-top:3px}
.overflowline{color:var(--mute);font-size:9.5px;letter-spacing:1.2px;text-align:center;padding:2px 0}
.overflowline a{color:var(--orange);font-weight:700}

/* ================= FILTER BAR ================= */
.filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--hair-soft)}
.filters label{display:flex;flex-direction:column;gap:3px;font-size:8.5px;font-weight:700;letter-spacing:1.4px;color:var(--mute)}
.filters select{background:var(--deep);color:var(--ice);border:1px solid var(--hair);border-radius:5px;padding:5px 8px;font:inherit;font-size:10.5px;min-width:120px}
.filters .count{margin-left:auto;color:var(--mute);font-size:9.5px;letter-spacing:1px;white-space:nowrap}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hair);color:var(--pale);border-radius:5px;padding:6px 11px;font-size:9px;font-weight:700;letter-spacing:1.2px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--pale);color:var(--ice)}
.btn[disabled]{opacity:.4;cursor:default}
/* Orange border = a control a human presses (live human action). */
.btn.act{border-color:var(--orange);color:var(--orange)}
.btn.act:hover{border-color:var(--orange-d);color:var(--ice);background:rgba(227,82,5,.12)}

/* ================= BOARD TABLE ================= */
table.board{width:100%;border-collapse:collapse}
table.board th{font-size:8.5px;letter-spacing:1.6px;color:var(--mute);text-align:left;padding:8px 12px;border-bottom:1px solid var(--hair)}
table.board td{padding:10px 12px;border-bottom:1px solid var(--hair-soft);font-size:11.5px;vertical-align:top}
table.board tr.row{cursor:pointer}
table.board tr.row:hover td{background:rgba(194,223,253,.04)}
table.board tr.row:focus-visible{outline:2px solid var(--pale);outline-offset:-2px}
table.board tr.arrive{animation:arrive .5s ease 1}
@keyframes arrive{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.urgstack{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.bcell .t{font-weight:700;color:var(--ice);font-size:11.5px;line-height:1.35}
.bcell .d{color:var(--mute);font-size:9.5px;line-height:1.4;margin-top:2px}
.bcell .cor{color:var(--mute);font-weight:400}
.srccell{color:var(--pale);font-size:9.5px;letter-spacing:.5px;white-space:nowrap}
.agecell{color:var(--mute);font-size:10px;white-space:nowrap}
.statecell{font-size:9px;font-weight:700;letter-spacing:1.1px;white-space:nowrap}
.statecell.new{color:var(--gold)}
.statecell.ack{color:var(--pale)}
.statecell.active{color:var(--ice)}
.statecell.resolved{color:var(--good)}
.pager{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--hair-soft);color:var(--mute);font-size:9.5px;letter-spacing:1px}
.pager .gap{flex:1}

/* ================= STATE BLOCKS (loading / empty / error / missing) ================= */
.stateblock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:34px 18px;text-align:center;color:var(--mute)}
.stateblock .mark{font-size:16px;font-weight:700;letter-spacing:2px}
.stateblock .mark.err{color:var(--crit)}
.stateblock .mark.okk{color:var(--good)}
.stateblock h5{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--pale)}
.stateblock p{font-size:10px;line-height:1.7;max-width:440px}
.stateblock.loading .mark{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ================= SOURCES ================= */
.srcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.srccard{border:1px solid var(--hair-soft);border-radius:7px;padding:12px 14px;background:rgba(19,40,69,.35);display:flex;flex-direction:column;gap:8px}
.srccard.unwatched,.srccard.notconnected{border-style:dashed;border-color:var(--hair);background:transparent}
.srccard.nodata{border-style:solid;border-color:var(--hair);background:rgba(19,40,69,.18)}
.srccard .shead{display:flex;align-items:center;gap:8px}
.srccard .shead .nm{font-weight:700;font-size:11.5px;letter-spacing:.6px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srccard .place{color:var(--mute);font-size:8.5px;letter-spacing:1.2px}
.srccard .willshow{color:var(--mute);font-size:9.5px;line-height:1.6}
.dims{display:flex;flex-direction:column;gap:3px}
.dim{display:flex;align-items:baseline;gap:7px;font-size:9.5px;letter-spacing:.4px;color:var(--mute)}
.dim .g{width:12px;flex:none;text-align:center;font-weight:700;font-size:9px}
.dim.ok .g{color:var(--good)}
.dim.bad .g{color:var(--crit)}
.dim.bad{color:var(--ice)}
.dim.na .g{color:var(--mute)}
.dim b{font-weight:700;letter-spacing:1px}
.srccard .lastline{border-top:1px solid var(--hair-soft);padding-top:7px;font-size:9px;color:var(--mute);letter-spacing:.6px;line-height:1.6;overflow-wrap:anywhere}
.domaingrouproup{margin-bottom:16px}
.domainhead{display:flex;align-items:baseline;gap:10px;margin:4px 0 8px}
.domainhead h3{font-size:10px;letter-spacing:2.2px;color:var(--pale);font-weight:700}
.domainhead .u{color:var(--mute);font-size:9px;letter-spacing:.8px}
.covsum{margin-top:8px;color:var(--mute);font-size:9px;letter-spacing:1px}
.feednote{border:1px dashed var(--hair);border-radius:6px;padding:10px 12px;color:var(--mute);font-size:9.5px;line-height:1.7;margin-bottom:12px;letter-spacing:.3px}
.muted{color:var(--mute);font-size:10px;line-height:1.7}
.runbook{color:var(--pale);font-size:11px;line-height:1.7}
.runbook .mono,.mono{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;letter-spacing:.3px;color:var(--ice)}
.runbookhint{color:var(--mute);font-size:9.5px;line-height:1.6;margin-top:6px}

/* ================= COVERAGE MAP ================= */
.cov-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:14px}
.cov-stat{border:1px solid var(--hair-soft);border-radius:7px;padding:10px 12px;background:rgba(19,40,69,.35)}
.cov-stat .lbl{display:block;font-size:8.5px;font-weight:700;letter-spacing:1.4px;color:var(--mute);margin-bottom:4px}
.cov-stat b{font-size:18px;font-weight:700;color:var(--ice)}
.cov-stat.notconn{border-style:dashed;background:transparent}
.cov-stat.notconn b{color:var(--mute)}
.covtable td.cov-id{font-family:ui-monospace,Consolas,monospace;font-size:10px;color:var(--pale);white-space:nowrap}
.covtable td.cov-contrib{color:var(--mute);font-size:10px;line-height:1.45;max-width:320px}
.covtable tr.cov-not_connected td{opacity:.85}

/* ================= SIGNAL TAPE ================= */
.tape-list{display:flex;flex-direction:column;gap:4px}
.tape-row{display:grid;grid-template-columns:150px auto 90px minmax(0,1fr) 110px;gap:10px;align-items:center;width:100%;text-align:left;border:1px solid var(--hair-soft);border-radius:6px;padding:9px 12px;background:rgba(19,40,69,.35);cursor:pointer}
.tape-row:hover{background:rgba(194,223,253,.05)}
.tape-when{font-size:9.5px;color:var(--mute);letter-spacing:.4px;white-space:nowrap}
.tape-src{font-size:9.5px;color:var(--pale);letter-spacing:.5px;white-space:nowrap}
.tape-title{font-size:11.5px;font-weight:700;color:var(--ice);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tape-state{font-size:9px;font-weight:700;letter-spacing:1px;color:var(--mute);text-align:right;white-space:nowrap}
@media(max-width:980px){
  .tape-row{grid-template-columns:1fr 1fr;gap:6px}
  .tape-title{grid-column:1/-1}
}

/* ================= DETAIL ================= */
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.detailhead{display:flex;flex-direction:column;gap:8px;padding:14px;border-bottom:1px solid var(--hair-soft)}
.detailhead h2{font-size:16px;font-weight:700;line-height:1.3}
.detailhead .rowline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.detailhead .idtag{margin-left:auto;color:var(--mute);font-size:9.5px;letter-spacing:1.2px}
.story p{color:var(--pale);font-size:11px;line-height:1.7}
.kvlist{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:10px}
.kvlist dt{color:var(--mute);font-weight:700;letter-spacing:1.2px;font-size:8.5px;padding-top:2px;white-space:nowrap}
.kvlist dd{color:var(--ice);overflow-wrap:anywhere}
.evt{border-left:2px solid var(--series);padding:6px 0 6px 12px;margin-bottom:8px}
.evt .ehead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:9px;color:var(--mute);letter-spacing:.6px}
.evt .ehead .pm{width:12px;height:3px;background:var(--orange);border-radius:2px;flex:none;align-self:center}
.evt .ehead b{color:var(--pale);font-weight:700}
.evt .attrs{margin-top:4px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:9.5px}
.evt .attrs .ak{color:var(--mute);letter-spacing:.6px;white-space:nowrap}
.evt .attrs .av{color:var(--ice);overflow-wrap:anywhere}
.actionpanel p{color:var(--pale);font-size:11px;line-height:1.7}

/* ================= GATE (signed out / expired) ================= */
.gate{display:none;flex:1;min-height:0;overflow:auto;padding:12px}
.gate.on{display:grid;grid-template-columns:minmax(300px,520px);justify-content:center;align-content:center;gap:12px}
.gate .panel{padding-bottom:4px}
.gate .pbody p{color:var(--pale);font-size:11px;line-height:1.8}
.gate .pbody .limit{color:var(--mute);font-size:9.5px;line-height:1.7;border-top:1px solid var(--hair-soft);padding-top:9px;margin-top:11px}
.gate .actions{display:flex;gap:12px;margin:14px 0 10px}
.gate .notice{display:none;border:1px solid rgba(255,199,44,.45);background:rgba(255,199,44,.10);color:var(--gold);border-radius:6px;padding:9px 11px;font-size:10px;line-height:1.6;margin-bottom:10px}
.gate .notice.show{display:block}

/* ================= RIBBON ================= */
.ribbon{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;background:var(--deep);border-top:1px solid var(--hair-soft);padding:6px 16px;color:var(--mute);font-size:8.5px;letter-spacing:1.3px;white-space:nowrap;overflow:hidden}
.ribbon .l{display:flex;align-items:center;gap:9px;overflow:hidden;text-overflow:ellipsis}
.ribbon .pm{width:14px;height:3px;background:var(--orange);border-radius:2px;flex:none}

/* Stale data stops moving. */
.stale .cell,.stale .posture{opacity:.75}
.stale *{animation-play-state:paused!important}

@media(max-width:980px){
  .shell{grid-template-columns:64px minmax(0,1fr)}
  .rail .desc,.rail .poc,.rail .endorse,.item span.txt{display:none}
  .rail .word{font-size:11px;letter-spacing:1.5px}
  .bar .sub{display:none}
  .grid2{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}