/* Jevetica Automod dashboard — neon-pink glitch on gothic black.
   Voice of the public landing (deploy/static/style.css): near-black bands,
   hairline borders, zero radius, crimson enforcement + neon-pink signal,
   Helvetica display caps, fixed tower-art backdrop under a heavy scrim. */

:root{
  color-scheme:dark;
  --ink:#070308;          /* page base (site --black) */
  --panel:#0c0202;        /* rail, cards, fieldsets, details (site --band) */
  --raise:#170a0e;        /* inputs, code wells, evidence, hover */
  --line:rgba(247,238,240,.14);   /* hairline (site --hairline) */
  --rowline:rgba(247,238,240,.09);
  --bright:#f7eef0;       /* paper — titles */
  --text:#cfc4c9;
  --dim:#a2959c;
  --muted:#8b7d85;
  --accent:#c22430;       /* the crimson — enforcement, primary actions */
  --accent-hover:#da3040;
  --accent-soft:rgba(194,36,48,.14);
  --accent-line:rgba(194,36,48,.5);
  --pink:#ff2e7e;         /* neon pink — signal, glitch */
  --pink-line:rgba(255,46,126,.38);
  --pink-dim:rgba(255,46,126,.13);
  --hot:#ff1f3d;          /* chromatic partner */
  --ok:#5fc08e;
  --ok-soft:rgba(95,192,142,.10);
  --ok-line:rgba(95,192,142,.4);
  --warn:#d9a558;
  --warn-soft:rgba(217,165,88,.10);
  --warn-line:rgba(217,165,88,.4);
  --bad:#ff5566;
  --bad-soft:rgba(255,85,102,.10);
  --bad-line:rgba(255,85,102,.42);
  --link:#ff6fa4;
  --sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --mono:ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  --r:0;                  /* brutalist: no radius anywhere */
}

*{box-sizing:border-box}
html{background:var(--ink);height:100%}
body{margin:0;color:var(--text);font:14px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(7,3,8,.82),rgba(7,3,8,.88) 420px,rgba(7,3,8,.94)) fixed,
    url("/static/tower-bg.jpg") center 20%/cover no-repeat fixed var(--ink)}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--bright);text-decoration:underline;text-underline-offset:2px}
strong{color:var(--bright)}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
::selection{background:rgba(255,46,126,.45);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2a1119;border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:#47182a}
::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- eyebrow label: the recurring voice of the system ---- */
h2,.railgroup,th,label{
  font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted)}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;gap:16px;height:52px;padding:0 20px;flex:none;
  background:rgba(7,3,8,.88);backdrop-filter:blur(8px);
  border-top:2px solid var(--accent);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:10}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--pink) 55%,rgba(255,46,126,.25) 80%,transparent);
  pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
/* the mark carries the glitch: static chromatic fringe + periodic slice burst */
.brandname{position:relative;isolation:isolate;color:var(--bright);
  font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:2px 0 rgba(255,46,126,.35),-2px 0 rgba(255,31,61,.35)}
.brandname::before,.brandname::after{content:attr(data-text);position:absolute;inset:0;
  opacity:0;pointer-events:none;white-space:pre}
.brandname::before{color:var(--pink);z-index:-1;animation:glitch-a 6s infinite steps(1)}
.brandname::after{color:var(--hot);z-index:-2;animation:glitch-b 6s infinite steps(1)}
@keyframes glitch-a{
  0%,89%,100%{opacity:0}
  90%{opacity:.85;transform:translate(-6px,2px);clip-path:inset(8% 0 58% 0)}
  93%{opacity:.85;transform:translate(4px,-2px);clip-path:inset(55% 0 12% 0)}
  96%{opacity:.85;transform:translate(-3px,1px);clip-path:inset(30% 0 42% 0)}
}
@keyframes glitch-b{
  0%,89%,100%{opacity:0}
  91%{opacity:.85;transform:translate(5px,-1px);clip-path:inset(42% 0 22% 0)}
  94%{opacity:.85;transform:translate(-4px,2px);clip-path:inset(4% 0 72% 0)}
  97%{opacity:.85;transform:translate(2px,0);clip-path:inset(66% 0 6% 0)}
}
@media (prefers-reduced-motion:reduce){
  .brandname::before,.brandname::after{display:none}
}
.brand:hover{text-decoration:none}
.brand:hover .brandname{color:#fff}
.brand img{flex:none;border-radius:50%}
.guild{color:var(--dim);font-size:13px;font-weight:500;padding-left:16px;
  border-left:1px solid var(--line);
  max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{flex:1}
.who{color:var(--muted);font-size:12px;background:rgba(7,3,8,.6);
  border:1px solid var(--line);padding:4px 10px;
  max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- shell: rail + page. The shell is the viewport under the topbar;
   the rail and the page each scroll, so a long nav stays put. ---- */
.shell{flex:1;min-height:0;min-width:0;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.shell:has(.rail){grid-template-columns:216px minmax(0,1fr)}
.rail{background:rgba(12,2,2,.9);border-right:1px solid var(--line);
  padding:16px 10px 24px 0;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain}
.railgroup{margin:20px 0 6px 14px;display:flex;align-items:center;gap:8px;color:var(--pink)}
.railgroup::before{content:"";width:14px;height:1px;background:var(--pink)}
.railgroup:first-child{margin-top:4px}
.rail a{display:block;position:relative;margin-left:14px;padding:6px 12px;
  color:var(--dim);font-size:13.5px;font-weight:500;line-height:1.5}
.rail a:hover{background:rgba(23,10,14,.9);color:var(--bright);text-decoration:none}
.rail a.active{background:var(--pink-dim);color:var(--bright)}
.rail a.active::before{content:"";position:absolute;left:-14px;top:5px;bottom:5px;
  width:2px;background:var(--pink)}

.page{padding:28px 36px 16px;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.page>*{max-width:1100px}
footer{margin-top:40px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12px}
footer a{color:var(--muted)}
footer a:hover{color:var(--dim)}

/* ---- hero banner (server list) ---- */
.hero{display:block;width:100%;height:180px;object-fit:cover;object-position:center 30%;
  border:1px solid var(--line);margin:0 0 24px;
  filter:saturate(.85) brightness(.9)}

/* ---- type ---- */
h1{font-size:26px;font-weight:800;line-height:1.2;text-transform:uppercase;
  letter-spacing:-.01em;color:var(--bright);margin:0 0 18px;
  text-shadow:2px 0 rgba(255,46,126,.22),-2px 0 rgba(255,31,61,.22)}
/* glitch motif on the page title: the underline bar slices sideways */
h1::after{content:"";display:block;width:56px;height:2px;background:var(--pink);
  margin-top:12px}
@media (prefers-reduced-motion:reduce){h1::after{animation:none}}
h2{margin:32px 0 10px}
h3{font-size:14px;font-weight:700;color:var(--bright);margin:20px 0 8px;
  letter-spacing:.02em}
p{margin:.5em 0}
code{font:11.5px/1.4 var(--mono);background:var(--pink-dim);color:#ff85b2;
  border:1px solid var(--pink-line);padding:1px 8px;
  white-space:nowrap}
pre{background:var(--panel);border:1px solid var(--line);
  padding:12px 16px;overflow-x:auto;font-size:12px;color:var(--dim)}
pre code{border:none;background:none;padding:0;color:inherit;white-space:pre}
.mono{font-family:var(--mono);font-size:12.5px}
hr{border:none;border-top:1px solid var(--line);margin:28px 0}
q{quotes:"“" "”";color:var(--dim)}

/* the overview sparkline */
svg rect.bar{fill:var(--accent)}
svg rect.bar:hover{fill:var(--pink)}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;padding:8px 12px;border-bottom:1px solid var(--accent-line)}
td{padding:10px 12px;border-bottom:1px solid var(--rowline);vertical-align:top;
  color:var(--text)}
tr:hover td{background:rgba(23,10,14,.75)}
td .mono,td code{font-size:11.5px}
td.wrap{overflow-wrap:anywhere} /* full message content (flags page) wraps, never widens its column */
td button{padding:4px 10px;font-size:11px}

/* ---- forms ---- */
input,select,textarea{font:inherit;color:var(--text);
  background:var(--raise);border:1px solid var(--line);
  padding:7px 10px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pink);
  box-shadow:0 0 0 1px var(--pink-line)}
input::placeholder,textarea::placeholder{color:#6b5c64}
input[type=checkbox]{accent-color:var(--pink);width:15px;height:15px;
  padding:0;vertical-align:middle}
textarea{width:100%;min-height:6em;resize:vertical;line-height:1.55}
textarea.mono{font-family:var(--mono);font-size:12.5px}
label{display:inline-flex;flex-direction:column;gap:6px;vertical-align:top;
  font-size:10.5px}
label:has(> input[type=checkbox]){flex-direction:row;align-items:center;gap:8px;
  font-size:13.5px;font-weight:500;text-transform:none;letter-spacing:0;
  color:var(--text);cursor:pointer}
fieldset{display:grid;grid-auto-flow:dense;min-width:0;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px 16px;border:1px solid var(--line);background:var(--panel);
  border-left:2px solid var(--pink);
  padding:16px 18px 18px;margin:0 0 16px}
fieldset>legend{grid-column:1/-1;background:var(--panel);padding:0 8px;
  margin:-4px 0 6px -6px;font-size:12px;font-weight:700;color:var(--bright);
  letter-spacing:.06em;text-transform:uppercase}
fieldset label{margin:0}
fieldset label :is(input:not([type=checkbox]),select,textarea){width:100%}
label:has(> textarea){grid-column:1/-1}
form p{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
form p label input,form p label select{min-width:9ch}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:14px 0}
.filters label{flex-direction:row;align-items:center;font-size:13.5px;
  font-weight:500;text-transform:none;letter-spacing:0;color:var(--text)}

/* ---- step number chip: marks a fieldset as one step of a real sequence
   (setup wizard) — pink-ringed chip inside the legend ---- */
.stepnum{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:19px;height:19px;margin-right:9px;vertical-align:-4px;
  background:var(--pink-dim);border:1px solid var(--pink-line);
  color:var(--pink);font-size:11px;font-weight:700;letter-spacing:0}

/* ---- buttons: crimson slab; hover inverts to white with the
   chromatic glitch shadow, straight off the landing CTA ---- */
button{font:inherit;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;background:var(--accent);color:#fdf6f6;
  border:1px solid transparent;padding:8px 16px;cursor:pointer;
  white-space:nowrap;transition:background .15s,color .15s}
button:hover:not(:disabled){background:#fff;color:var(--ink);border-color:#fff;
  text-shadow:2px 0 var(--pink),-2px 0 var(--hot)}
button:disabled{opacity:.45;cursor:default}
button.ok{background:transparent;color:var(--ok);
  border-color:var(--ok-line)}
button.ok:hover:not(:disabled){background:var(--ok-soft);border-color:var(--ok);
  color:var(--ok);text-shadow:none}
button.no{background:transparent;color:var(--bad);
  border-color:var(--bad-line)}
button.no:hover:not(:disabled){background:var(--bad-soft);border-color:var(--bad);
  color:var(--bad);text-shadow:none}
form.inline{display:inline-block;margin:0 8px 8px 0;vertical-align:middle}
button.linkish{background:none;color:var(--muted);padding:4px 8px;font-size:12.5px;
  border-color:transparent;text-transform:none;letter-spacing:0}
button.linkish:hover:not(:disabled){background:none;color:var(--bright);
  text-decoration:underline;text-shadow:none}
button.quiet{background:transparent;color:var(--muted);border-color:var(--line)}
button.quiet:hover:not(:disabled){background:var(--warn-soft);border-color:var(--warn-line);
  color:var(--warn);text-shadow:none}

/* ---- panels & messages ---- */
.card{background:var(--panel);border:1px solid var(--line);
  border-left:2px solid var(--pink);
  padding:16px 20px;margin:0 0 16px}
.card h2{margin:0 0 8px}
/* document sections inside a card (draft review): hairline between sections */
.card h2:not(:first-child){margin-top:22px;padding-top:14px;border-top:1px solid var(--rowline)}
.evidence{background:var(--raise);border-left:2px solid var(--pink-line);
  padding:10px 14px;
  font-size:13px;color:var(--dim);margin:8px 0}
.banner{display:block;padding:10px 14px;font-weight:500;
  margin:0 0 16px;border:1px solid transparent;font-size:13.5px}
.banner.ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.banner.bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}
.banner.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.banner ul{margin:6px 0 0;padding-left:20px}
.notice{background:var(--ok-soft);border:1px solid var(--ok-line);
  color:var(--ok);padding:10px 14px;font-weight:500;
  font-size:13.5px}
.errors{background:var(--bad-soft);border:1px solid var(--bad-line);
  color:var(--bad);padding:10px 14px;font-size:13.5px}
.errors ul{margin:6px 0 0;padding-left:20px}
.readonly-note{background:var(--warn-soft);border:1px solid var(--warn-line);
  color:var(--warn);padding:10px 14px;font-size:13px;
  margin-bottom:16px}
.ok{color:var(--ok);font-weight:600}
.bad{color:var(--bad);font-weight:600}
.empty{border:1px dashed var(--line);color:var(--muted);
  padding:32px 20px;text-align:center;font-size:13.5px;margin:8px 0}
.empty::before{content:"✦";color:var(--pink);margin-right:8px;font-size:.9em}

/* ---- status pill: eyebrow-voice stamp, square, hairline border ---- */
.pill{display:inline-block;padding:3px 8px;line-height:1.3;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  border:1px solid var(--line);background:rgba(7,3,8,.55);color:var(--dim);
  white-space:nowrap}
.pill.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}
.pill.warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
.pill.bad{color:var(--bad);border-color:var(--bad-line);background:var(--bad-soft)}
.pill.accent{color:var(--pink);border-color:var(--pink-line);background:var(--pink-dim)}
a.pill{text-decoration:none}
a.pill:hover{color:var(--pink);border-color:var(--pink);text-decoration:none;
  text-shadow:1px 0 rgba(255,46,126,.5),-1px 0 rgba(255,31,61,.5)}

/* ---- quiet action link: bordered button-voice anchor ---- */
.btn{display:inline-block;padding:6px 14px;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  border:1px solid var(--line);background:rgba(7,3,8,.55);color:var(--text)}
.btn:hover{color:var(--pink);border-color:var(--pink-line);background:var(--raise);
  text-decoration:none}

/* ---- focus: centers a .card as a narrow standalone notice (login, errors) ---- */
.focus{max-width:56ch;margin:56px auto 0;padding:28px 32px}

/* ---- card grid: responsive grid of .card panels ---- */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;margin:8px 0 16px}
.cardgrid .card{margin:0}
.card h3{margin:0 0 10px}
a.card{display:block;color:inherit;text-decoration:none;transition:border-color .15s}
a.card:hover{border-color:var(--pink-line);text-decoration:none}
a.card:hover h3{color:var(--pink)}

/* ---- page head: h1 with inline status + actions on one row ---- */
.pagehead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.pagehead h1{margin:0}

/* ---- stat strip: eyebrow label + display number per block,
   hairline dividers, pink left edge ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-left:2px solid var(--pink);overflow:hidden;
  margin:0 0 16px}
.stat{display:flex;flex-direction:column;gap:4px;background:var(--panel);
  padding:14px 18px 16px}
.stat h2{margin:0}
.stat b{font-size:30px;font-weight:800;line-height:1.15;letter-spacing:-.02em;
  color:var(--bright)}
.stat b a{color:inherit}
.stat b a:hover{color:var(--pink);text-decoration:none}
.stat .sub{font-size:12px;color:var(--muted)}
.stat.hot{background:linear-gradient(var(--pink-dim),var(--pink-dim)),var(--panel)}
.stat.hot b{color:var(--pink)}
.stat .chart{margin-top:auto;display:flex;flex-direction:column;gap:4px;
  padding-top:10px}
.stat .chart svg{width:280px;max-width:100%;height:60px;
  border-bottom:1px solid var(--line)}
/* ponytail: the spend svg has no viewBox (pages.go), so CSS can't rescale its
   drawing — natural 280px keeps bars anchored left; columns narrower than 280px
   clip the right edge. Add viewBox="0 0 280 60" in Go if narrow widths matter. */

/* ---- collapsibles ---- */
details{border:1px solid var(--line);background:var(--panel);
  margin:8px 0}
details summary{padding:10px 14px;cursor:pointer;font-weight:500;color:var(--bright);
  font-size:13.5px}
details[open] summary{border-bottom:1px solid var(--line);color:var(--pink)}
details summary:hover{background:var(--raise)}
.md{font-size:13px;color:var(--dim);white-space:pre-wrap}
fieldset>details{grid-column:1/-1} /* span the whole editor, not one grid column */
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:6px 20px;padding:10px 14px}
.checks label{flex-direction:row;align-items:start;gap:8px;min-width:0;
  text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:400;
  color:var(--text)}

/* ---- small screens ---- */
@media (max-width:800px){
  body{background-attachment:scroll,scroll} /* iOS fixed-attachment cover bug */
  .shell:has(.rail){grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .rail{display:flex;align-items:center;gap:4px;overflow-x:auto;overflow-y:hidden;
    padding:8px 12px;border-right:none;border-bottom:1px solid var(--line)}
  .railgroup{display:none}
  .rail a{margin:0;padding:6px 10px;white-space:nowrap;flex:none}
  .rail a.active::before{display:none}
  .page{padding:16px}
  table{display:block;overflow-x:auto}
  .hero{height:120px}
}
.dim{color:var(--dim);font-size:13px}

/* ---- case file: decision-card variant of .card — heavier pink keyline,
   identity row, and a footer row for the decision controls ---- */
.card.case{border-left-width:3px;border-left-color:var(--pink)}
.casehead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 10px}
.casehead .whois{font-size:16px;font-weight:700;color:var(--bright)}
.casefoot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
  border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.casefoot form{margin:0}
.casefoot details{margin:0;background:none;border-color:transparent}
.casefoot details summary{padding:6px 8px;color:var(--muted);font-size:12.5px}
.casefoot details[open]{flex:1 1 100%;background:var(--panel);border-color:var(--line)}
.casefoot details[open] summary{color:var(--pink)}

/* ---- leaderboard rank: CSS-counter rank column for .ranklist tables.
   The header row is tr 1, so the first member row (pink accent) is tr 2. */
table.ranklist{counter-reset:rank}
.ranklist td.rank{counter-increment:rank;
  font-size:17px;font-weight:700;color:var(--muted);width:2.5em}
.ranklist td.rank::before{content:counter(rank)}
.ranklist tr:nth-child(2) td.rank{color:var(--pink)}

/* sortable column headers: the whole th label is one link, the active
   sort carries a small direction mark */
th a{color:var(--muted);text-transform:inherit;letter-spacing:inherit;
  font-size:inherit;font-weight:inherit}
th a:hover{color:var(--bright);text-decoration:none}
.sortmark{color:var(--pink);margin-left:2px}

/* member avatar: Discord CDN headshot beside the name, neutral initial
   in a circle when no hash is known */
a.member{display:inline-flex;align-items:center;gap:8px}
img.avatar{border-radius:50%;object-fit:cover;flex:none;
  background:var(--raise);border:1px solid var(--line)}
span.avatar.initial{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:none;border-radius:50%;background:var(--raise);
  border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--dim)}

/* ---- num: display figure for a number that leads its cell;
   tint with .ok/.bad ---- */
.num{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.num.ok{color:var(--ok)}
.num.bad{color:var(--bad)}

/* tinted figures in the .stats strip (mirrors .pill.ok) */
.stat b.ok{color:var(--ok)}
.stat b.bad{color:var(--bad)}

/* ---- meter: thin probability bar beside a mono figure. Native <progress>,
   fill driven by the value attribute — CSP (default-src 'self') blocks inline
   style attributes, so no --p var. ---- */
progress.meter{appearance:none;-webkit-appearance:none;display:inline-block;
  vertical-align:middle;width:110px;height:2px;border:none;padding:0;
  background:var(--line);margin:0 0 1px 8px;overflow:hidden}
progress.meter::-webkit-progress-bar{background:var(--line)}
progress.meter::-webkit-progress-value{background:var(--pink)}
progress.meter::-moz-progress-bar{background:var(--pink)}

/* ---- quiet mono stat row under an excerpt (evidence cards, hits) ---- */
.metarow{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin:6px 0 0;
  font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.metarow .pill{font-size:10px}

/* ---- full-width explainer line inside a fieldset grid ---- */
.fieldhint{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--muted)}
fieldset>.checks{grid-column:1/-1}
fieldset>.empty{grid-column:1/-1}

/* ---- settings editors: save action pinned to the viewport bottom while
   the form scrolls under it ---- */
.savebar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;
  align-items:center;gap:6px 14px;background:rgba(7,3,8,.92);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);margin:22px -36px -16px;padding:13px 36px 15px}
.savebar .fieldhint{grid-column:auto}

/* ---- decision matrix: one row per option inside a fieldset — identity and
   description left, control right, hairline between rows ---- */
.optrow{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;
  padding:11px 0;border-bottom:1px solid var(--rowline)}
.optrow:last-of-type{border-bottom:none}
.optrow.open{border-bottom:none;padding-bottom:2px}
.optid{display:flex;flex-direction:column;gap:3px;flex:1 1 260px;min-width:220px}
.optdesc{font-size:12.5px;color:var(--muted)}
.optrow>label{flex-direction:row;align-items:center;gap:8px;font-size:13.5px;
  font-weight:500;text-transform:none;letter-spacing:0;color:var(--text)}
.optsub{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;
  padding:4px 0 10px 26px}
.optsub label{margin:0}
fieldset.severe{border-left-color:var(--bad)}

/* tall comfortable mono well for the raw JSON editor */
textarea.editor{min-height:26rem;font-size:12.5px;line-height:1.6}

@media (max-width:800px){.savebar{margin:18px -16px -16px;padding:12px 16px}}