/* BBS Directory, modern site. One file, no build step.
   Dark by default (it is a BBS list); a light scheme follows the system. */

:root {
  --bg: #0b0f0c;
  --panel: #121914;
  --line: #213026;
  --text: #d6e4d9;
  --muted: #8aa08f;
  --accent: #4ade80;
  --accent-ink: #052e14;
  --down: #f87171;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f8f6; --panel: #ffffff; --line: #d9e2db; --text: #142018;
    --muted: #5b6e60; --accent: #15803d; --accent-ink: #ffffff; --down: #b91c1c;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--sans); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 1.5rem 0 0.25rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }
p { margin: 0.5rem 0 1rem; }
/* line breaks: headings and ledes even out their lines, paragraphs avoid a
   lone last word (browsers without text-wrap wrap as before) */
h1, h2, .lede { text-wrap: balance; }
p { text-wrap: pretty; }
.nw { white-space: nowrap; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* header / footer */
.top { border-bottom: 1px solid var(--line); background: var(--panel); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700;
         color: var(--accent); font-size: 1.1rem; }
.brand:hover { text-decoration: none; }
.brand-icon { display: block; width: 32px; height: 26px; flex: none; }   /* art/logo.py: the 16 px folder, 2x */
.top nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.top nav a { color: var(--muted); }
.top nav a[aria-current] { color: var(--text); font-weight: 600; }
.foot { margin-top: 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.foot .wrap { padding-top: 16px; padding-bottom: 32px; }

/* home */
/* the logo with the headline beside it; under it on narrow screens */
.hero { margin: 8px 0 4px; }
.hero h1 { margin-top: 0; }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 32px; }
  .hero .logo { margin: 0; font-size: clamp(8px, calc((100vw - 32px) * 0.58 / 51), 11.5px); }
  .hero .lede { margin-bottom: 0; }
}
.lede { color: var(--muted); font-size: 1.05rem; max-width: 46rem; }
/* statistics: three groups of three, side by side or stacked */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 8px; }
.stat-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; align-content: start;
              background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; }
.stat-h { grid-column: 1 / -1; margin: 0 0 2px; color: var(--muted); font-size: 0.75rem; font-weight: 600;
          letter-spacing: 0.06em; text-transform: uppercase; }
.stat-h span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.stat { color: var(--text); min-width: 0; }
a.stat:hover { text-decoration: none; }
a.stat:hover b { color: var(--accent); }
.stat b { display: block; font-family: var(--mono); font-size: 1.45rem; line-height: 1.25; }
.stat span { display: block; color: var(--muted); font-size: 0.85rem; line-height: 1.3; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr; } }
.search { display: flex; gap: 10px; margin: 24px 0; max-width: 34rem; }
.search input { flex: 1; min-width: 0; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 24px; padding: 0; list-style: none; }
.cols li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: 4px 0; }
.cols li span { color: var(--muted); font-family: var(--mono); }
.note { color: var(--muted); font-size: 0.9rem; }
.prose { max-width: 46rem; }
.points { padding-left: 1.2rem; }
.points li { margin: 0 0 0.6rem; padding-left: 0.2rem; }
.points li::marker { color: var(--accent); }

/* forms: every text box, select, checkbox and button shares one height,
   radius, border and focus ring, so nothing looks like a browser default. */
:root { color-scheme: dark; --ctl-h: 42px; --ctl-r: 8px;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238aa08f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2l3 3 6-6.7' fill='none' stroke='%23052e14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: light) {
  :root { color-scheme: light;
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6e60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2l3 3 6-6.7' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
input, select, button { font: inherit; color: var(--text); margin: 0; }
input[type=search], input[type=text], input[type=email], input[type=password], select {
  -webkit-appearance: none; appearance: none; width: 100%; height: var(--ctl-h); padding: 0 14px;
  background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--ctl-r);
  font-size: 0.95rem; transition: border-color .15s, box-shadow .15s;
}
input[type=search]::placeholder { color: var(--muted); opacity: 1; }
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; height: 14px; width: 14px; cursor: pointer;
  background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
select { padding-right: 36px; cursor: pointer; text-overflow: ellipsis;
  background-image: var(--chev); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
select option { background: var(--panel); color: var(--text); }
input[type=search]:hover, input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; cursor: pointer;
  background: var(--bg); border: 1.5px solid color-mix(in srgb, var(--muted) 70%, var(--line)); border-radius: 5px;
  transition: background-color .15s, border-color .15s; }
input[type=checkbox]:checked { background: var(--accent) var(--tick) center/11px 9px no-repeat; border-color: var(--accent); }
button, .btn { height: var(--ctl-h); padding: 0 20px; border: 1px solid var(--accent); border-radius: var(--ctl-r);
  background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer; transition: filter .15s; }
button:hover, .btn:hover { filter: brightness(1.08); text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.filters { display: grid; grid-template-columns: 1fr 1.4fr 0.9fr 1.3fr auto auto; gap: 10px; align-items: end; margin: 16px 0; }
.filters .grow { grid-column: 1 / -1; }   /* the search box has a row to itself */
.filters .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filters .lbl { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the checkbox sits in a box the same size as the other controls */
.filters .check { display: flex; align-items: center; gap: 9px; height: var(--ctl-h); padding: 0 14px; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--ctl-r); font-size: 0.95rem; cursor: pointer;
  transition: border-color .15s; }
.filters .check:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.filters .check:has(:checked) { border-color: var(--accent); }
@media (max-width: 760px) { .filters { grid-template-columns: 1fr 1fr; } .filters .grow { grid-column: 1 / -1; } }

.letters { display: flex; flex-wrap: wrap; gap: 2px; margin: 8px 0 16px; font-family: var(--mono); }
.letters a { padding: 2px 7px; border-radius: 4px; color: var(--muted); }
.letters a[aria-current] { background: var(--accent); color: var(--accent-ink); }
.count { color: var(--muted); font-size: 0.9rem; }

/* tables */
table { width: 100%; border-collapse: collapse; }
.systems th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: 8px; }
.systems td { border-bottom: 1px solid var(--line); padding: 10px 8px; vertical-align: middle; }
.systems .name a { font-weight: 600; }
.systems .thumb { width: 128px; padding-right: 4px; }
.systems .thumb a { display: block; width: 112px; height: 67px; border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden; background: #000; }
.systems .thumb a:hover { border-color: var(--accent); }
.systems .thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.systems .noshot { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 0.7rem;
  color: color-mix(in srgb, var(--muted) 70%, transparent); background: var(--panel); text-transform: uppercase; letter-spacing: 0.05em; }
.place { display: block; color: var(--muted); font-size: 0.85rem; }
.kind { color: var(--muted); font-size: 0.8rem; }
.addr code { word-break: break-all; }
.st { text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  .systems thead { display: none; }
  .systems tr { display: grid; grid-template-columns: 96px 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .systems td { border: 0; padding: 0; }
  .systems .thumb { grid-column: 1; grid-row: 1 / span 3; width: auto; padding: 0; }
  .systems .thumb a { width: 96px; height: 57px; }
  .systems .name { grid-column: 2; }
  .systems .addr, .systems .sw { grid-column: 2 / -1; font-size: 0.9rem; }
  .systems .st { grid-column: 3; grid-row: 1; }
}

.badge { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.badge::before { content: "●"; margin-right: 5px; }
.badge.up { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.badge.down { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.chip { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 1px 8px; border-radius: 999px;
        color: var(--muted); border: 1px solid var(--line); cursor: help; }

.pager { display: flex; justify-content: space-between; align-items: center; margin: 16px 0; color: var(--muted); }
.empty { color: var(--muted); padding: 24px 0; }

/* listing page */
.meta { color: var(--muted); font-size: 0.9rem; }
.title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 16px; }
.connect td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.connect tr:last-child td { border-bottom: 0; }
.connect .k { width: 7rem; color: var(--muted); }
.connect .s { text-align: right; white-space: nowrap; color: var(--muted); font-size: 0.875rem; }
.connect .hint { display: block; color: var(--muted); font-size: 0.85rem; }
.copy { height: auto; border-radius: 6px; margin-left: 8px; padding: 1px 8px; font-size: 0.75rem; background: transparent; color: var(--muted); border-color: var(--line); font-weight: 400; }
dl.facts { display: grid; grid-template-columns: 9rem 1fr; gap: 6px 16px; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
.desc { max-width: 46rem; white-space: pre-line; }

/* captured intro screen on a board page */
figure.screen { margin:16px 0; }
figure.screen img { max-width:100%; height:auto; display:block; background:#000;
  border:1px solid var(--line); border-radius:6px; image-rendering:pixelated; }
figure.screen figcaption { color:var(--muted); font-size:.85rem; margin-top:4px; }

/* screen gallery */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; list-style:none; padding:0; margin:16px 0; }
.gallery li { background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.gallery a { color:inherit; display:block; }
.gallery a:hover { text-decoration:none; }
.gallery img { width:100%; height:auto; aspect-ratio:400/238; object-fit:contain; display:block;
  background:#000; border-bottom:1px solid var(--line); }
/* kind links above the gallery */
.kinds { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
.kinds a { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:1px solid var(--line);
  border-radius:999px; color:var(--text); font-size:.9rem; background:var(--panel); }
.kinds a:hover { border-color:var(--accent); text-decoration:none; }
.kinds a[aria-current] { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.kinds .n { color:var(--muted); font-size:.8rem; }
.kinds a[aria-current] .n { color:inherit; opacity:.75; }
.gallery .cap { padding:7px 10px; font-size:.9rem; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gallery .cap .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gallery .cap .pct { margin-left:auto; color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; }


/* health: four-bar signal meter (listing_health.bars) */
.signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; vertical-align: -1px; margin-right: 8px; }
.signal i { width: 4px; border-radius: 1px; background: color-mix(in srgb, var(--muted) 30%, transparent); }
.signal i:nth-child(1) { height: 25%; } .signal i:nth-child(2) { height: 50%; }
.signal i:nth-child(3) { height: 75%; } .signal i:nth-child(4) { height: 100%; }
.signal.lv4 i.on, .signal.lv3 i.on { background: var(--accent); }
.signal.lv2 i.on { background: #eab308; }
.signal.lv1 i.on { background: var(--down); }
.title-row .signal { height: 18px; } .title-row .signal i { width: 5px; }

/* board page: 30-day uptime strip */
.uptime { padding: 14px 16px; }
.up-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; }
.up-head b { font-family: var(--mono); font-size: 1.4rem; }
.up-head .signal { height: 20px; margin: 0; } .up-head .signal i { width: 6px; }
.days { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; list-style: none; padding: 0; margin: 0; }
.days li { height: 28px; border-radius: 3px; }
.days .first, .legend .first { background: var(--accent); }
.days .retry, .legend .retry { background: color-mix(in srgb, var(--accent) 45%, #eab308); }
.days .down, .legend .down { background: var(--down); }
.days .none, .legend .none { background: color-mix(in srgb, var(--muted) 22%, transparent); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; color: var(--muted); font-size: 0.8rem; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legend .span { margin-left: auto; }
@media (max-width: 640px) { .days { gap: 2px; } .days li { height: 22px; } .legend .span { margin-left: 0; } }

/* ANSI logo on the home page: text from art/logo.py (src/lib/logo.html), in
   its own font (built by the same script). Each tone of green is a layer of
   text (.t-X; the tones match TONE in logo.py). A bright sheen crosses the
   art diagonally, and a pulse runs round the border from the top-left corner
   to the bottom-right both ways (top then right, left then bottom): each
   edge's gradient is offset by how far along the border it starts (--off, in
   cells), so the two meet at the bottom-right. The folder opens once.
   Reduced motion, or no background-clip:text / color-mix: still. */
.logo {
  --bp: 36;                       /* border cells per pulse */
  --dp: 40em;                     /* the sheen's repeat across the art */
  --cw: 0.6em;                    /* one column: the logo font's cells are 600/1000 */
  --border: #16a34a; --pulse: #bbf7d0;
  display: grid; grid-template-columns: auto auto auto; justify-content: start;
  width: max-content; max-width: 100%; box-sizing: border-box;
  margin: 8px 0 20px; padding: 0.7em 0.9em; background: #000; border-radius: 10px; overflow: hidden;
  font: clamp(4px, calc((100vw - 34px) / 51), 13px)/1 BBSLogo, var(--mono);
}
.logo pre { margin: 0; font: inherit; line-height: 1; white-space: pre; }
.logo-b { color: var(--border); }
.logo-top, .logo-bot { grid-column: 1 / -1; }
.logo-top { --off: 0; }      /* cells from the top-left corner where each edge starts */
.logo-left { --off: -1; }
.logo-right { --off: -82; }  /* 81 along the top, then down from row 1 */
.logo-bot { --off: -12; }    /* 12 down the left, then along */
.logo-in, .logo-f { display: grid; align-items: start; justify-items: start; }
.logo-in > *, .logo-f > * { grid-area: 1 / 1; }
.logo .t-L { --tone: #4ade80; }
.logo .t-S { --tone: #166534; }
.logo .t-F { --tone: #4ade80; }
.logo .t-B { --tone: #15803d; }
.logo .t-P { --tone: #dcfce7; }
.logo .t-O { --tone: #052e16; }
.logo-art { color: var(--tone); }
/* the folder: closed, opening, open -- once */
.logo-f1, .logo-f2 { visibility: hidden; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) and (color: color-mix(in srgb, red, blue)) {
  .logo pre { color: transparent; -webkit-background-clip: text; background-clip: text; }
  .logo-top, .logo-bot {
    background-image: linear-gradient(90deg, var(--border) 0 38%, var(--pulse) 50%, var(--border) 62% 100%);
    background-size: calc(var(--bp) * var(--cw)) 100%;
    background-position: calc(var(--off) * var(--cw)) 0;
    animation: logo-x 6s linear infinite;
  }
  .logo-left, .logo-right {
    background-image: linear-gradient(180deg, var(--border) 0 38%, var(--pulse) 50%, var(--border) 62% 100%);
    background-size: 100% calc(var(--bp) * 1em);
    background-position: 0 calc(var(--off) * 1em);
    animation: logo-y 6s linear infinite;
  }
  .logo-art {
    --hi: color-mix(in srgb, var(--tone) 70%, #fff);
    /* two sheens a tile, so tiles join seamlessly */
    background-image: linear-gradient(135deg, var(--tone) 0 17%, var(--hi) 25%, var(--tone) 33% 67%,
                                      var(--hi) 75%, var(--tone) 83% 100%);
    background-size: var(--dp) var(--dp);
    animation: logo-diag 7s linear infinite;
  }
  .logo .t-O { --hi: var(--tone); }
}
@keyframes logo-x { to { background-position: calc((var(--off) + var(--bp)) * var(--cw)) 0; } }
@keyframes logo-y { to { background-position: 0 calc((var(--off) + var(--bp)) * 1em); } }
@keyframes logo-diag { to { background-position: var(--dp) 0; } }
.logo-f0 { animation: logo-off 0.01s 0.9s forwards; }
.logo-f1 { animation: logo-on 0.25s 0.9s; }
.logo-f2 { animation: logo-on 0.01s 1.15s forwards; }
@keyframes logo-off { to { visibility: hidden; } }
@keyframes logo-on { from, to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .logo pre, .logo-f { animation: none !important; }
  .logo-f0 { visibility: hidden; }
  .logo-f2 { visibility: visible; }
}

/* account pages: narrow stacked forms */
/* the account box at the right of the header */
/* just the buttons are boxed; the group itself isn't (no box in a box) */
.acct-box { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 0.875rem; }
.acct-box .who { color: var(--muted); white-space: nowrap; }
.acct-box .who b { color: var(--text); font-weight: 600; }
.acct-box .who:hover, .acct-box .who[aria-current] b { color: var(--accent); text-decoration: none; }
.acct-box form { margin: 0; }
.acct-btn, button.acct-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
           border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text);
           font: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.acct-btn:hover, button.acct-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; filter: none; }
.acct-btn.admin { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent); }
.acct-btn.admin[aria-current] { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.acct-btn .count { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 6px;
                   font-size: 0.75rem; font-weight: 700; line-height: 1.5; }
@media (max-width: 640px) { .acct-box { margin-left: 0; width: 100%; justify-content: flex-end; padding-top: 8px;
                                         border-top: 1px solid var(--line); }
                            .acct-box .who { margin-right: auto; overflow: hidden; text-overflow: ellipsis; } }
.narrow { max-width: 28rem; }
.stack { display: grid; gap: 14px; margin: 16px 0 8px; }
.stack label { display: grid; gap: 6px; }
.stack .lbl { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.stack .hint { font-size: 0.85rem; color: var(--muted); }
.stack .check { display: flex; gap: 9px; align-items: flex-start; font-size: 0.95rem; }
.stack .check input { margin-top: 4px; }
.stack button { justify-self: start; }
.stack .hp { position: absolute; left: -10000px; }
.alert { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 16px 0; }
.alert p { margin: 0.2rem 0; }
.alert.err { border-color: var(--down); color: var(--down); background: color-mix(in srgb, var(--down) 8%, transparent); }
.alert.ok { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.acct-section { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 28px; }
.keybox { font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0.04em; background: var(--panel);
          border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: inline-block; }
.codes { columns: 2; font-family: var(--mono); font-size: 1.05rem; list-style: none; padding: 0; max-width: 20rem; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
.legal h2 { margin-top: 1.6rem; }
.legal { max-width: 46rem; }
.claim code { word-break: break-all; }
.narrow.claim { max-width: 46rem; }
/* the board's screen as the checker saw it: 80 columns, never wrapped */
details.seen pre { max-height: 24rem; overflow: auto; background: #000; color: #b7f5c9; padding: 10px; border-radius: 8px;
                   font-size: 0.72rem; line-height: 1.15; white-space: pre; }
textarea { width: 100%; box-sizing: border-box; padding: 10px 14px; background: var(--panel); color: var(--text);
           border: 1px solid var(--line); border-radius: var(--ctl-r); font: inherit; font-size: 0.95rem; }
textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.langs { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 6px 12px; }
.langs legend { margin-bottom: 6px; }
.ep { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px 12px; margin: 0 0 10px; }
.ep p { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.check.inline { display: inline-flex; margin-left: auto; font-size: 0.9rem; }
.add-ep { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; margin-bottom: 8px; }

/* admin pages */
.admin-tabs { margin: 8px 0 20px; }
.admin-card { border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px 12px; margin: 0 0 12px; background: var(--panel); }
.admin-card.asked { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.admin-card p { margin: 6px 0; }
.admin-card blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--line); color: var(--muted); white-space: pre-line; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form input[type=text] { width: 16rem; height: 36px; }
.inline-form button { height: 36px; padding: 0 14px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th, .admin-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table tr.off td { opacity: 0.55; }
table.diff { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 8px 0; }
table.diff th, table.diff td { text-align: left; vertical-align: top; padding: 5px 8px; border-bottom: 1px solid var(--line); }
table.diff th:first-child { width: 9rem; color: var(--muted); font-weight: 600; }
table.diff td { width: 45%; overflow-wrap: anywhere; }