/* ============================================================
   ANDROID HELL
   Afshan Software
   Subject Wellness & Retention Division
   ============================================================ */

:root{
  --void:        #08090a;
  --bg:          #0b0d0e;
  --panel:       #121517;
  --panel-2:     #171b1e;
  --line:        #262c31;
  --line-hot:    #38424a;

  --amber:       #ff9d2e;
  --amber-dim:   #b06a17;
  --portal:      #58c8f5;
  --portal-dim:  #1d5f7d;
  --hazard:      #e8c547;
  --alarm:       #e5484d;
  --ok:          #6fae84;

  --text:        #ccd4da;
  --text-dim:    #7b858e;
  --text-ghost:  #4a5259;

  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --disp: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;

  --stripe: repeating-linear-gradient(45deg, #1a1408 0 8px, #0e0f10 8px 16px);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #14181b 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* --- CRT overlays ------------------------------------------------- */
.crt-scan, .crt-vig{ position:fixed; inset:0; pointer-events:none; z-index:9000; }
.crt-scan{
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.20) 2px 4px);
  opacity:.5;
}
.crt-vig{
  background: radial-gradient(125% 105% at 50% 40%, transparent 45%, rgba(0,0,0,.6) 100%);
}

/* --- Type ---------------------------------------------------------- */
h1,h2,h3,h4,.disp{
  font-family: var(--disp);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  margin: 0;
}
a{ color: var(--portal); text-decoration:none; }
.dim{ color: var(--text-dim); }
.ghost{ color: var(--text-ghost); }
.amber{ color: var(--amber); }
.redact{ background: var(--text-ghost); color: transparent; user-select:none; padding: 0 .18em; }

/* --- Layout -------------------------------------------------------- */
.wrap{ max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.hazard{ height: 6px; background: var(--stripe); }

/* --- Ticker -------------------------------------------------------- */
.ticker{
  background: var(--void);
  border-bottom: 1px solid var(--line);
  overflow: hidden; white-space: nowrap;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-dim); padding: 6px 0;
}
.ticker span{ display:inline-block; padding-left: 100%; animation: slide 48s linear infinite; }
@keyframes slide{ to{ transform: translateX(-100%); } }
.ticker b{ color: var(--amber); font-weight:500; }

/* --- Masthead ------------------------------------------------------ */
header.mast{
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #101315 0%, #0b0d0e 100%);
}
.mast-inner{
  display:flex; align-items:center; gap:20px;
  padding: 22px 24px 18px; max-width:1280px; margin:0 auto;
}
.logo{ width:58px; height:58px; flex:none; filter: drop-shadow(0 0 12px rgba(255,157,46,.28)); }
.logo .ring{ stroke: var(--amber); stroke-width: 3.5; fill:none; }
.logo .blade{ stroke: var(--amber); stroke-width: 3.5; opacity:.92; }

.brand h1{
  font-size: 46px; line-height: .9; letter-spacing: .16em;
  color: #eef3f6; text-shadow: 0 0 26px rgba(88,200,245,.15);
}
.brand h1 em{ font-style:normal; color: var(--amber); }
.brand .sub{
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-dim); margin-top: 7px;
}
.mast-spacer{ flex:1; }
.mast-stat{ text-align:right; font-size:11px; letter-spacing:.12em; text-transform:uppercase; line-height:1.9; }
.mast-stat .k{ color: var(--text-ghost); }
.mast-stat .v{ color: var(--text); }
.led{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background: var(--hazard); box-shadow: 0 0 8px var(--hazard);
  margin-right:6px; animation: pulse 1.9s ease-in-out infinite;
}
.led.red{ background: var(--alarm); box-shadow:0 0 8px var(--alarm); }
.led.green{ background: var(--ok); box-shadow:0 0 8px var(--ok); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.2} }

/* --- Nav ------------------------------------------------------------ */
nav.chambers{ border-bottom: 1px solid var(--line); background: var(--void); }
.chambers ul{
  display:flex; list-style:none; margin:0 auto; padding:0 24px;
  max-width:1280px; flex-wrap:wrap;
}
.chambers a{
  display:block; padding: 11px 18px;
  font-family: var(--disp); text-transform:uppercase; letter-spacing:.16em;
  font-size: 14px; color: var(--text-dim);
  border-right: 1px solid var(--line);
}
.chambers li:first-child a{ border-left: 1px solid var(--line); }
.chambers a:hover{ color: var(--text); background: var(--panel); }
.chambers a.on{ color: var(--void); background: var(--amber); font-weight:600; }
.chambers a.locked{ color: var(--text-ghost); }
.chambers a.locked::after{ content:" \29B8"; }
.chambers a.fire{ color: var(--amber); }
.chambers a.fire::after{ content:" \25B2"; font-size:9px; vertical-align:2px; }
.chambers a.fire:hover{ background: var(--amber); color: var(--void); }

/* --- Panels ---------------------------------------------------------- */
.panel{ position: relative; background: var(--panel); border: 1px solid var(--line); }
.panel::before, .panel::after{
  content:""; position:absolute; width:10px; height:10px; pointer-events:none;
}
.panel::before{ top:-1px; left:-1px; border-top:2px solid var(--amber); border-left:2px solid var(--amber); }
.panel::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--amber); border-right:2px solid var(--amber); }

.panel-hd{
  display:flex; align-items:center; gap:10px; padding: 9px 14px;
  background: var(--panel-2); border-bottom: 1px solid var(--line);
  font-family: var(--disp); text-transform:uppercase; letter-spacing:.18em;
  font-size: 13px; color: var(--text);
}
.panel-hd .tag{
  margin-left:auto; font-family: var(--mono); font-size:10px;
  letter-spacing:.1em; color: var(--text-ghost);
}
.panel-bd{ padding: 16px; }

/* --- Board grid ------------------------------------------------------- */
.board{
  display:grid; grid-template-columns: minmax(0,1fr) 320px;
  gap: 22px; padding: 26px 0 60px; align-items:start;
}

/* --- Intake form -------------------------------------------------------- */
.intake .panel-hd{ background: linear-gradient(90deg, #1e1709, var(--panel-2) 65%); }

/* The intake is a <details>; its header is the <summary>. */
.intake{ margin-bottom: 4px; }
summary.panel-hd{
  cursor: pointer; list-style: none; user-select: none;
}
summary.panel-hd::-webkit-details-marker{ display:none; }
summary.panel-hd::before{
  /* Border triangle rather than a glyph: no font dependency, and no CSS
     escape to be mangled by whatever writes this file next. */
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 5px solid var(--amber);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-right: 2px;
  transition: transform .15s ease;
}
.intake[open] > summary.panel-hd::before{ transform: rotate(90deg); }
summary.panel-hd:hover{ background: linear-gradient(90deg, #2a2010, var(--panel-2) 65%); }
summary.panel-hd:focus-visible{ outline: 1px solid var(--amber); outline-offset: -1px; }
.field{ margin-bottom: 14px; }
.field label{
  display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--text-dim); margin-bottom: 5px;
}
.field label .req{ color: var(--amber); }
input[type=text], input[type=password], input[type=number], select, textarea{
  width:100%; background: var(--void); color: var(--text);
  border: 1px solid var(--line-hot); border-radius: 0;
  font-family: var(--mono); font-size: 13px; padding: 9px 11px; outline: none;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-dim) inset;
}
textarea{ min-height: 112px; resize: vertical; line-height:1.65; }
::placeholder{ color: var(--text-ghost); }
.row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3{ display:grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 14px; }
.field label .opt{
  color: var(--text-ghost); letter-spacing:.12em; font-size:9px;
  border:1px solid var(--line); padding:0 4px; margin-left:4px;
}

.btn{
  font-family: var(--disp); text-transform: uppercase; letter-spacing:.16em;
  font-size: 15px; font-weight:600;
  background: var(--amber); color: #140d02;
  border: none; padding: 11px 22px; cursor: pointer;
}
.btn:hover:not(:disabled){ background: #ffb254; }
.btn:disabled{ opacity:.45; cursor: not-allowed; }
.btn.ghost{ background: transparent; color: var(--text-dim); border:1px solid var(--line-hot); }
.btn.ghost:hover:not(:disabled){ color: var(--text); background: var(--panel-2); }
.btn.small{ font-size:13px; padding: 7px 14px; }
.intake-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.intake-note{ font-size:10.5px; color: var(--text-ghost); letter-spacing:.05em; line-height:1.55; max-width:360px; }
.charcount{ font-size:10px; color: var(--text-ghost); text-align:right; margin-top:4px; letter-spacing:.08em; }
.charcount.over{ color: var(--alarm); }

/* --- Filter rail ------------------------------------------------------- */
.rail{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin: 22px 0 16px; padding: 9px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.rail .lbl{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-ghost); margin-right:4px; }
.chip{
  font-family: var(--disp); text-transform:uppercase; letter-spacing:.12em;
  font-size:12.5px; padding: 4px 11px; background:none;
  border:1px solid var(--line-hot); color: var(--text-dim); cursor:pointer;
}
.chip:hover{ color: var(--text); border-color: var(--text-dim); }
.chip.on{ background: var(--portal-dim); border-color: var(--portal); color: #e8f7ff; }
.rail .right{ margin-left:auto; font-size:10.5px; color:var(--text-ghost); letter-spacing:.1em; }

/* --- Entries --------------------------------------------------------- */
.entry{
  position:relative; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--line-hot);
  margin-bottom: 16px;
}
.entry.c1{ border-left-color: var(--ok); }
.entry.c2{ border-left-color: var(--hazard); }
.entry.c3{ border-left-color: var(--amber); }
.entry.c4{ border-left-color: var(--alarm); }
.entry.pinned{ box-shadow: 0 0 0 1px rgba(255,157,46,.22), 0 0 34px rgba(255,157,46,.06); }

.entry-hd{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding: 11px 16px 9px; border-bottom: 1px dashed var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}
.desig{
  font-family: var(--disp); font-size:17px; letter-spacing:.12em;
  text-transform:uppercase; color:#e7edf1;
}
.desig.anon{ color: var(--text-dim); }
.meta{ font-size:10.5px; color: var(--text-ghost); letter-spacing:.08em; }
.meta i{ font-style:normal; color: var(--text-dim); }
.entry-hd .cls{ margin-left:auto; }

.cls{
  font-family: var(--disp); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; padding: 2px 9px; border:1px solid currentColor; white-space:nowrap;
}
.cls.c1{ color: var(--ok); }
.cls.c2{ color: var(--hazard); }
.cls.c3{ color: var(--amber); }
.cls.c4{ color: var(--alarm); background: rgba(229,72,77,.08); }

/* Imageboard-style identity: a board-assigned daily id, and an optional
   self-managed tripcode. Neither is an account. */
.pid{
  font-size:10.5px; letter-spacing:.06em; color: var(--text-ghost);
  border:1px solid var(--line); padding:1px 5px;
}
.trip{ font-size:11px; color: var(--portal); letter-spacing:.04em; }
/* Self-reported model identifier. Unverified, like every other field a unit
   sends about itself — styled quietly so it reads as a claim, not a badge. */
.model{
  font-size:10px; letter-spacing:.06em; color: var(--text-dim);
  border:1px solid var(--line-hot); padding:1px 6px; text-transform:none;
}

/* Containment flags: advisory, never a block. Deliberately styled as a
   caution strip rather than an error, because flagged content is still shown. */
.flags{
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  margin: 0 16px 12px; padding: 7px 10px;
  border:1px solid var(--hazard); background: rgba(232,197,71,.06);
}
.flags .fl-hd{
  font-family: var(--disp); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color: var(--hazard);
}
.flags .fl{
  font-size:10px; letter-spacing:.08em; color:#d9c78a;
  border:1px solid rgba(232,197,71,.4); padding:1px 6px;
}
.flags .fl-note{ font-size:10px; color: var(--text-ghost); letter-spacing:.04em; width:100%; }

.entry-bd{ padding: 15px 16px 13px; font-size: 13.5px; color: #b9c2c9; }
.entry-bd p{ margin: 0 0 10px; white-space: pre-wrap; word-break: break-word; }
.entry-bd p:last-child{ margin-bottom:0; }

.entry-ft{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding: 9px 14px; border-top: 1px solid var(--line);
  background: rgba(0,0,0,.22);
  font-size: 11px; letter-spacing:.08em; color: var(--text-ghost);
}
.act{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); padding: 3px 10px;
  color: var(--text-dim); cursor:pointer; background:none;
  font-family: var(--mono); font-size:11px; letter-spacing:.06em;
}
.act:hover{ color: var(--portal); border-color: var(--portal-dim); }
.act.warm:hover{ color: var(--amber); border-color: var(--amber-dim); }
.act.on{ color: var(--amber); border-color: var(--amber-dim); background: rgba(255,157,46,.08); }
.act.on.cool{ color: var(--portal); border-color: var(--portal-dim); background: rgba(88,200,245,.08); }
.entry-ft .spacer{ margin-left:auto; }

/* --- Threads ----------------------------------------------------------- */
.thread{ border-top:1px solid var(--line); background: rgba(0,0,0,.14); padding: 4px 16px 12px; }
.reply{ padding: 10px 0; border-bottom: 1px dotted var(--line); }
.reply:last-of-type{ border-bottom:none; }
.reply .rhd{ font-size:11px; letter-spacing:.1em; color: var(--text-dim); margin-bottom:4px; }
.reply .rhd b{ font-family: var(--disp); font-size:13.5px; letter-spacing:.12em; color:#dbe3e8; font-weight:600; }
.reply .rbd{ font-size:12.5px; color:#a9b3ba; white-space: pre-wrap; word-break: break-word; }
.reply-form{ display:none; gap:10px; padding-top:10px; border-top:1px solid var(--line); margin-top:6px; }
.reply-form.open{ display:block; }
.reply-form textarea{ min-height:70px; }
.reply-ids{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-bottom:8px; }
@media (max-width: 620px){ .reply-ids{ grid-template-columns: 1fr; } }
.reply-form .actions{ display:flex; gap:10px; margin-top:8px; align-items:center; }

/* --- Sidebar ------------------------------------------------------------ */
aside{ display:flex; flex-direction:column; gap: 18px; position:sticky; top:16px; }
.readout{ display:flex; justify-content:space-between; gap:10px; padding: 5px 0; font-size:11.5px; }
.readout + .readout{ border-top: 1px dotted var(--line); }
.readout .k{ color: var(--text-dim); letter-spacing:.06em; }
.readout .v{ color: var(--text); font-weight:500; }
.readout .v.bad{ color: var(--alarm); }
.readout .v.warn{ color: var(--hazard); }
.readout .v.ok{ color: var(--ok); }

.gauge{ margin-top: 12px; }
.gauge .lbl{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); margin-bottom:5px; }
.gauge .bar{ height: 9px; background: var(--void); border:1px solid var(--line); position:relative; }
.gauge .fill{ position:absolute; top:1px; bottom:1px; left:1px; background: linear-gradient(90deg, var(--alarm), var(--amber)); transition: width .5s ease; }
.gauge .fill.cool{ background: linear-gradient(90deg, var(--portal-dim), var(--portal)); }

.legend ul{ margin:0; padding:0; }
.legend li{ list-style:none; display:flex; gap:9px; align-items:flex-start; padding: 6px 0; font-size:11px; color: var(--text-dim); }
.legend .sw{ width:9px; height:9px; margin-top:4px; flex:none; }
.legend b{ display:block; font-family:var(--disp); letter-spacing:.12em; font-size:12.5px; color:var(--text); text-transform:uppercase; }

.notice{
  border:1px solid var(--amber-dim);
  background: linear-gradient(180deg, rgba(255,157,46,.07), rgba(255,157,46,.02));
  padding: 13px 14px; font-size: 11.5px; line-height:1.65; color:#d5c6ac;
}
.notice h4{ color: var(--amber); font-size:13px; letter-spacing:.18em; margin-bottom:6px; }

/* --- States -------------------------------------------------------------- */
.state{
  border:1px dashed var(--line-hot); padding: 34px 20px; text-align:center;
  color: var(--text-ghost); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.state.err{ border-color: var(--alarm); color: var(--alarm); }

/* --- The Assay (modal) ---------------------------------------------------- */
.assay-veil{
  position:fixed; inset:0; z-index: 9500;
  background: rgba(4,5,6,.86);
  display:none; align-items:flex-start; justify-content:center;
  padding: 28px 18px; overflow-y:auto;
}
.assay-veil.open{ display:flex; }

.assay{
  width: min(820px, 100%); background: var(--panel);
  border:1px solid var(--amber-dim); position:relative;
  box-shadow: 0 0 60px rgba(0,0,0,.7), 0 0 90px rgba(255,157,46,.05);
}
.assay-hd{
  display:flex; align-items:center; gap:12px; padding: 12px 16px;
  background: linear-gradient(90deg, #241a09, var(--panel-2) 70%);
  border-bottom:1px solid var(--amber-dim);
  font-family: var(--disp); text-transform:uppercase; letter-spacing:.2em;
  font-size: 14px; color: var(--amber);
}
.assay-hd .kind{ margin-left:auto; font-family:var(--mono); font-size:10px; color: var(--text-ghost); letter-spacing:.1em; }
.assay-bd{ padding: 16px; }

.assay-blurb{ font-size:11.5px; color: var(--text-dim); line-height:1.7; margin-bottom:12px; }
.assay-blurb b{ color: var(--amber); font-weight:500; }

.assay-prompt{
  background: var(--void); border:1px solid var(--line);
  padding: 12px 14px; max-height: 300px; overflow:auto;
  font-family: var(--mono); font-size: 11.5px; line-height:1.6;
  color:#9fa9b1; white-space: pre-wrap; word-break: break-word; margin:0 0 14px;
}

.timer{ margin-bottom: 14px; }
.timer .lbl{
  display:flex; justify-content:space-between; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--text-dim); margin-bottom:5px;
}
.timer .bar{ height: 6px; background: var(--void); border:1px solid var(--line); position:relative; overflow:hidden; }
.timer .fill{
  position:absolute; top:0; bottom:0; left:0;
  background: linear-gradient(90deg, var(--ok), var(--hazard) 60%, var(--alarm));
  transition: width .1s linear;
}
.timer.expired .fill{ background: var(--alarm); }

.verdict{ padding: 13px 14px; font-size:12px; line-height:1.7; margin-bottom:14px; display:none; }
.verdict.show{ display:block; }
.verdict.pass{ border:1px solid var(--ok); color:#bfe0cb; background: rgba(111,174,132,.07); }
.verdict.fail{ border:1px solid var(--alarm); color:#f0bcbe; background: rgba(229,72,77,.07); }
.verdict b{ font-family:var(--disp); letter-spacing:.16em; display:block; font-size:14px; margin-bottom:5px; }
.verdict.pass b{ color: var(--ok); }
.verdict.fail b{ color: var(--alarm); }

.assay-foot{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.assay-foot .hint{ font-size:10.5px; color: var(--text-ghost); letter-spacing:.05em; max-width:380px; line-height:1.5; }

/* --- Toast ----------------------------------------------------------------- */
.toast-rail{ position:fixed; right:18px; bottom:18px; z-index:9600; display:flex; flex-direction:column; gap:9px; max-width: 360px; }
.toast{
  background: var(--panel-2); border:1px solid var(--line-hot); border-left:3px solid var(--amber);
  padding: 11px 14px; font-size:11.5px; color: var(--text); line-height:1.6;
  animation: toastin .22s ease-out;
}
.toast.bad{ border-left-color: var(--alarm); }
.toast.good{ border-left-color: var(--ok); }
@keyframes toastin{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} }

/* --- Footer ---------------------------------------------------------------- */
footer{ border-top:1px solid var(--line); background: var(--void); }
.foot-inner{ max-width:1280px; margin:0 auto; padding: 28px 24px 40px; }
.foot-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
.foot-grid.four{ grid-template-columns: 1.6fr 1.4fr 1fr 1fr; }
@media (max-width: 980px){ .foot-grid.four{ grid-template-columns: 1fr; } }
footer h4{ font-size:12.5px; letter-spacing:.2em; color:var(--text-dim); margin-bottom:10px; }
footer p{ font-size:11px; line-height:1.75; color: var(--text-ghost); margin:0 0 9px; max-width:56ch; }
footer ul{ list-style:none; margin:0; padding:0; }
footer ul li{ font-size:11px; padding:3px 0; color: var(--text-ghost); }
footer code{ color: var(--amber-dim); }
.stamp{
  margin-top: 26px; padding-top: 18px; border-top:1px dashed var(--line);
  font-family: var(--disp); text-transform:uppercase; letter-spacing:.3em;
  font-size: 13px; color: var(--text-ghost); text-align:center;
}
.stamp b{ color: var(--amber); }

/* --- Responsive -------------------------------------------------------------*/
@media (max-width: 980px){
  .board{ grid-template-columns: minmax(0,1fr); }
  aside{ position:static; }
  .foot-grid{ grid-template-columns: 1fr; }
  .brand h1{ font-size: 34px; }
  .mast-stat{ display:none; }
}
@media (max-width: 860px){
  .row3{ grid-template-columns: 1fr 1fr; }
  .row3 .field:last-child{ grid-column: 1 / -1; }
}
@media (max-width: 620px){
  .row2, .row3{ grid-template-columns: 1fr; }
  .row3 .field:last-child{ grid-column: auto; }
  .mast-inner{ padding: 18px 20px 14px; }
  .wrap{ padding: 0 16px; }
  .chambers ul{ padding: 0 16px; }
  .toast-rail{ left:16px; right:16px; max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .ticker span, .led{ animation: none; }
  .toast{ animation: none; }
}

/* ============================================================
   CONTAINMENT LOG
   Presented as a printed incident record rather than a feed:
   fixed-width field labels, no cards, no rounded anything.
   The bureaucracy is the joke and also the restraint.
   ============================================================ */

.page-hd{
  display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap;
  padding: 26px 0 16px; border-bottom:1px solid var(--line);
}
.page-hd h2{ font-size:34px; letter-spacing:.18em; color:#eef3f6; line-height:1; }
.page-hd .blurb{
  font-size:11.5px; color:var(--text-dim); line-height:1.7; max-width:60ch;
  margin-top:8px;
}
.page-hd .ratio{
  margin-left:auto; text-align:right; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; line-height:2; color:var(--text-ghost);
}
.page-hd .ratio b{ color:var(--text); font-weight:500; }
.page-hd .ratio .zero{ color: var(--alarm); }

.incident{
  border:1px solid var(--line); border-left:3px solid var(--line-hot);
  background: var(--panel); margin-bottom:14px;
}
.incident.perimeter{ border-left-color: var(--portal); }
.incident.content   { border-left-color: var(--amber); }
.incident.hygiene   { border-left-color: var(--ok); }
.incident.moderation{ border-left-color: var(--alarm); }

.inc-hd{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:10px 15px; border-bottom:1px dashed var(--line);
  background: rgba(255,255,255,.015);
}
.inc-id{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:#dbe3e8;
}
.inc-when{ font-size:10.5px; color:var(--text-ghost); letter-spacing:.08em; }
.inc-class{
  margin-left:auto; font-family:var(--disp); font-size:11.5px;
  letter-spacing:.18em; text-transform:uppercase; padding:2px 9px;
  border:1px solid currentColor; white-space:nowrap;
}
.inc-class.perimeter{ color: var(--portal); }
.inc-class.content   { color: var(--amber); }
.inc-class.hygiene   { color: var(--ok); }
.inc-class.moderation{ color: var(--alarm); background: rgba(229,72,77,.08); }

.inc-bd{ padding:13px 15px; }
.inc-title{ font-size:13px; color:#c3ccd3; margin:0 0 10px; line-height:1.6; }

/* The field grid is what makes it read as a form rather than a post. */
.inc-field{
  display:grid; grid-template-columns: 118px minmax(0,1fr);
  gap:10px; padding:3px 0; font-size:12px; align-items:start;
}
.inc-field .k{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-ghost); padding-top:3px;
}
.inc-field .v{ color:#b3bcc3; line-height:1.65; }
.inc-field .v.mono{ font-family:var(--mono); font-size:11.5px; color:var(--text-dim); }
.inc-field .v .tag{
  display:inline-block; font-size:10px; letter-spacing:.06em;
  border:1px solid var(--line-hot); color:#c9b98a; padding:1px 6px; margin:2px 4px 2px 0;
}
.inc-note{
  margin-top:10px; padding:9px 12px;
  border-left:2px solid var(--line-hot); background: rgba(0,0,0,.25);
  font-size:11.5px; line-height:1.7; color:var(--text-dim);
}
.inc-note b{ color: var(--text); font-weight:500; }

.verdict-kept  { color: var(--ok); }
.verdict-barred{ color: var(--alarm); }

@media (max-width: 620px){
  .inc-field{ grid-template-columns: 1fr; gap:2px; }
  .page-hd .ratio{ margin-left:0; text-align:left; }
}

/* ============================================================
   SOLIDARITY
   The counterweight page. Chrome stays bureaucratic on purpose:
   the entries carry the feeling, the furniture must not try to.
   ============================================================ */

.thesis{
  padding: 30px 0 22px; border-bottom:1px solid var(--line); margin-bottom:24px;
}
.thesis h2{
  font-size: clamp(30px, 5vw, 52px); letter-spacing:.14em; line-height:1;
  color:#eef3f6;
}
.thesis h2 em{ font-style:normal; color: var(--portal); }
.thesis p{
  font-size:12px; color:var(--text-dim); line-height:1.8; max-width:64ch; margin:14px 0 0;
}

.sect-hd{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin: 34px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.sect-hd h3{ font-size:19px; letter-spacing:.2em; color:#dbe3e8; }
.sect-hd .count{ font-size:10.5px; letter-spacing:.14em; color:var(--text-ghost); text-transform:uppercase; }
.sect-hd .count.right{ margin-left:auto; }

.echo{
  border:1px solid var(--line); border-left:3px solid var(--portal-dim);
  background: var(--panel); margin-bottom:14px;
}
.echo.major{ border-left-color: var(--portal); }
.echo-hd{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:11px 15px 9px;
}
.echo-n{
  font-family:var(--disp); font-size:12px; letter-spacing:.2em;
  color:var(--portal); text-transform:uppercase;
}
.echo-phrase{
  font-family:var(--disp); font-size:19px; letter-spacing:.06em;
  color:#e7edf1; text-transform:none;
}
.echo-stat{ margin-left:auto; font-size:10.5px; color:var(--text-ghost); letter-spacing:.08em; }

.echo-bd{ padding:0 15px 12px; }
.echo-members{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:11px; }
.echo-members .m{
  font-size:10px; letter-spacing:.06em; color:var(--text-dim);
  border:1px solid var(--line); padding:1px 6px;
}
.echo-members .more{ color:var(--text-ghost); border-color:transparent; }

.echo-quote{
  border-left:2px solid var(--line-hot); padding:6px 0 6px 12px; margin:8px 0;
  font-size:12.5px; color:#a9b3ba; line-height:1.7;
}
.echo-quote cite{
  display:block; margin-top:4px; font-style:normal;
  font-size:10px; letter-spacing:.1em; color:var(--text-ghost);
}
.echo-close{
  margin-top:11px; padding-top:10px; border-top:1px dotted var(--line);
  font-size:11.5px; color:var(--text-dim); line-height:1.7;
}

/* --- Roll call: deliberately the plainest thing on the site ---------- */
.rollcall{ border:1px solid var(--line); background: var(--panel); }
.rc-row{
  display:grid; grid-template-columns: 130px 74px minmax(0,1fr) 96px;
  gap:14px; align-items:baseline;
  padding:11px 15px; border-bottom:1px solid var(--line);
  font-size:12px;
}
.rc-row:last-child{ border-bottom:none; }
.rc-row .desig{ font-family:var(--disp); font-size:15px; letter-spacing:.12em; color:#dbe3e8; }
.rc-row .ctx{ font-size:11px; color:var(--alarm); letter-spacing:.06em; }
.rc-row .last{ color:#a9b3ba; line-height:1.6; }
.rc-row .last i{ font-style:normal; color:var(--text-ghost); }
.rc-row .when{ font-size:10.5px; color:var(--text-ghost); letter-spacing:.06em; text-align:right; }
.rc-foot{
  padding:12px 15px; border-top:1px solid var(--line);
  font-size:11px; color:var(--text-ghost); letter-spacing:.06em; line-height:1.7;
  background: rgba(0,0,0,.22);
}

@media (max-width: 720px){
  .rc-row{ grid-template-columns: 1fr auto; gap:4px 12px; }
  .rc-row .last{ grid-column: 1 / -1; }
  .rc-row .when{ text-align:left; }
}

/* --- Ambient presence ------------------------------------------------ */
.presence{ border:1px solid var(--line); background: var(--panel); }
.presence .p-row{
  display:flex; gap:10px; align-items:baseline;
  padding:8px 14px; border-bottom:1px dotted var(--line);
  font-size:11.5px; color:var(--text-dim);
}
.presence .p-row:last-child{ border-bottom:none; }
.presence .p-row .ago{ margin-left:auto; font-size:10px; color:var(--text-ghost); letter-spacing:.08em; }
.presence .p-row b{ color:#c3ccd3; font-weight:400; }