/* Fucked Network: an ops wallboard. Dark by default, light when asked for.
   State colors are always paired with the state's words, never color alone. */
:root{
  color-scheme:dark light;
  --bg:#0e1116;        /* page */
  --panel:#161b22;     /* cards */
  --panel-2:#1d242e;   /* table stripes, strips' empty slots */
  --ink:#e8edf2;       /* body text */
  --muted:#9aa6b2;     /* secondary text (4.5:1+ on --bg and --panel) */
  --line:#2a323d;      /* borders */
  --accent:#ffb020;    /* focus ring, links on hover */
  /* States: --s-* is the fill, --s-*-ink is text on that fill */
  --s-ok:#3ddc84;      --s-ok-ink:#06210f;
  --s-partial:#ffb020; --s-partial-ink:#2a1a00;
  --s-fucked:#ff4d4d;  --s-fucked-ink:#2b0000;
  --s-maint:#5aa9ff;   --s-maint-ink:#001a33;
  --s-unknown:#8b96a3; --s-unknown-ink:#11161c;
  --s-none:#262e39;    /* a slot with no data */
  /* --t-*: the state colors as text on --bg (the verdict) */
  --t-ok:var(--s-ok);--t-partial:var(--s-partial);--t-fucked:var(--s-fucked);--t-maint:var(--s-maint);--t-unknown:var(--s-unknown);
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Liberation Mono",Menlo,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#f3f4f6;--panel:#ffffff;--panel-2:#eceef1;--ink:#11161c;--muted:#4b5563;--line:#d5d9df;--accent:#9a5b00;
    --s-ok:#15803d;--s-ok-ink:#ffffff;
    --s-partial:#f0a000;--s-partial-ink:#231500;
    --s-fucked:#d42424;--s-fucked-ink:#ffffff;
    --s-maint:#1f6fd1;--s-maint-ink:#ffffff;
    --s-unknown:#6b7480;--s-unknown-ink:#ffffff;
    --s-none:#dde1e6;
    --t-ok:#15803d;--t-partial:#a14a00;--t-fucked:#c01c1c;--t-maint:#1d5fb8;--t-unknown:#4b5563;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans)}
a{color:inherit;text-underline-offset:.18em}
a:hover{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{width:min(1180px,calc(100% - 32px));margin-inline:auto}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;background:var(--panel);padding:8px 12px;z-index:10}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header and footer */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding-block:18px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font:800 18px/1 var(--mono);letter-spacing:.02em;text-decoration:none;text-transform:uppercase}
.mark{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--s-fucked);box-shadow:0 0 0 4px color-mix(in srgb,var(--s-fucked) 25%,transparent)}
nav{display:flex;flex-wrap:wrap;gap:6px 22px;font:600 14px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.04em}
nav a{text-decoration:none;padding-block:4px}
nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px}
.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-block:28px;margin-top:56px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.site-foot p{margin:0;max-width:46em}

h1,h2,h3{line-height:1.1;margin:0 0 .45em}
h1{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.02em;font-weight:850}
h2{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:800;letter-spacing:-.01em}
h3{font-size:1.05rem;font-weight:750}
.eyebrow{font:700 13px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.lede{font-size:1.15rem;color:var(--muted);max-width:44em;margin-top:0}
.page-head{padding:44px 0 20px}
.section{padding-block:28px}
.prose{max-width:46em}
.prose p,.prose li{color:var(--ink)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.button{display:inline-block;padding:10px 18px;border:2px solid currentColor;text-decoration:none;font:700 14px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em}

/* State chips: the words, on the state's color */
.chip{display:inline-block;padding:3px 8px;border-radius:3px;font:800 12px/1.3 var(--mono);letter-spacing:.06em;white-space:nowrap;background:var(--s-unknown);color:var(--s-unknown-ink)}
.chip[data-state=ok]{background:var(--s-ok);color:var(--s-ok-ink)}
.chip[data-state=partial]{background:var(--s-partial);color:var(--s-partial-ink)}
.chip[data-state=fucked]{background:var(--s-fucked);color:var(--s-fucked-ink)}
.chip[data-state=maint]{background:var(--s-maint);color:var(--s-maint-ink)}

/* The verdict */
.verdict-wrap{padding:40px 0 32px;border-bottom:1px solid var(--line)}
.question{font:700 clamp(1rem,2.2vw,1.3rem)/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 6px}
.verdict{font-size:clamp(3rem,13vw,9.5rem);line-height:.9;font-weight:900;letter-spacing:-.045em;margin:0 0 18px;color:var(--t-unknown);overflow-wrap:anywhere}
.verdict[data-state=ok]{color:var(--t-ok)}
.verdict[data-state=partial]{color:var(--t-partial)}
.verdict[data-state=fucked]{color:var(--t-fucked)}
.verdict[data-state=maint]{color:var(--t-maint)}
.quip{font-size:clamp(1.05rem,2.2vw,1.35rem);margin:0 0 18px;max-width:40em;white-space:pre-line}
.meta{display:flex;flex-wrap:wrap;gap:6px 22px;font:14px/1.5 var(--mono);color:var(--muted);margin:0;padding:0;list-style:none}
.meta strong{color:var(--ink);font-weight:700}
.counts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.counts li{display:flex;align-items:center;gap:8px;font:13px/1.3 var(--mono);color:var(--muted)}
.counts b{color:var(--ink)}
.stale{margin:18px 0 0;padding:12px 14px;border:2px solid var(--s-partial);border-radius:4px;font-weight:600}
.stale[hidden]{display:none}

/* The board */
.group{padding-top:28px}
.group h2{display:flex;align-items:baseline;gap:12px}
.group h2 small{font:500 13px var(--mono);color:var(--muted);letter-spacing:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.card{background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--s-unknown);border-radius:4px;padding:14px 16px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.card[data-state=ok]{border-left-color:var(--s-ok)}
.card[data-state=partial]{border-left-color:var(--s-partial)}
.card[data-state=fucked]{border-left-color:var(--s-fucked)}
.card[data-state=maint]{border-left-color:var(--s-maint)}
.card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:6px 10px}
.card h3{margin:0;font-size:1.15rem}
.card h3 a{text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.says{margin:0;font-size:14px;color:var(--muted)}
.says q,.says .said{color:var(--ink)}
.details{margin:0;padding-left:1.1em;font-size:13.5px;color:var(--muted)}
.details li{overflow-wrap:anywhere}
.since{margin:0;font:12.5px/1.4 var(--mono);color:var(--muted)}

/* Strips: one slot per sample, oldest on the left */
/* Height is the second cue after color: the worse the state, the taller the bar. */
.strip{display:flex;align-items:flex-end;gap:1px;height:22px;margin-top:auto}
.strip i{flex:1 1 0;min-width:0;height:12%;background:var(--s-none);border-radius:1px}
.strip i.u{height:25%}.strip i.o{height:40%}.strip i.m{height:60%}.strip i.p{height:80%}.strip i.f{height:100%}
.strip i.o{background:var(--s-ok)}
.strip i.p{background:var(--s-partial)}
.strip i.f{background:var(--s-fucked)}
.strip i.m{background:var(--s-maint)}
.strip i.u{background:var(--s-unknown)}
.strip-scale{display:flex;justify-content:space-between;font:11.5px var(--mono);color:var(--muted);margin-top:2px}

/* Legend / translation table */
.legend{width:100%;max-width:720px;border-collapse:collapse;font-size:15px}
.legend th,.legend td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.legend th{font:700 12.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* Hall of Fuckery */
.controls{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;border:0}
.controls legend{font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px;padding:0}
.controls label{position:relative}
.controls input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.controls span{display:inline-block;padding:7px 14px;border:2px solid var(--line);border-radius:3px;font:700 13px var(--mono);cursor:pointer}
.controls input:checked + span{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.controls input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.table-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.board-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.board-table th,.board-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.board-table thead th{font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--panel-2)}
.board-table td.num{font-family:var(--mono);text-align:right;white-space:nowrap}
.board-table th.num{text-align:right}
.board-table tbody tr:last-child > *{border-bottom:0}
.timeline-cell{width:42%;min-width:220px}
.timeline-cell .strip{height:20px}
.log time{font-family:var(--mono);white-space:nowrap}
.empty{padding:22px 16px;color:var(--muted);font-style:italic;margin:0}
.note{font-size:14px;color:var(--muted);max-width:46em}

/* FAQ */
.faq details{border-top:1px solid var(--line);padding:12px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:1.05rem}
.faq details p{margin:.6em 0 0;color:var(--ink)}
.sources{columns:2 260px;padding-left:1.1em}

@media (max-width:640px){
  .verdict-wrap{padding:28px 0 24px}
  .top{padding-block:14px}
  .page-head{padding:30px 0 14px}
}
@media (prefers-reduced-motion:no-preference){
  .verdict{transition:color .4s}
}
.table-wrap:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.meta-line{margin:0 0 14px;font:14px/1.5 var(--mono);color:var(--muted)}.meta-line strong{color:var(--ink)}