/* ============================================================================
   The Switchboard — GZS 197.7 OMVFM

   Old-school structure, current feel. Categories, boards, threads, "last post by",
   reply counts: everything a 2003 board had and a feed does not, because what was asked for is
   a place with rooms in it, not a river. What is NOT 2003: the gradients, the 1px table borders,
   the 11px grey-on-grey, the fixed 780px width.

   Same tokens as groundzerosum.com so the board and the station read as one property. Not a
   copy of that sheet: this app is served from a different host and a shared file would be a
   cross-origin request in the critical path of every page.
   ============================================================================ */

@font-face {
  font-family: "GZS Display";
  src: url("https://groundzerosum.com/fonts/Anton-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "GZS Sans";
  src: url("https://groundzerosum.com/fonts/PlexSans-var.woff2") format("woff2");
  font-weight: 100 700; font-display: swap;
}
@font-face {
  font-family: "GZS Mono";
  src: url("https://groundzerosum.com/fonts/PlexMono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}

:root {
  --bg: #050506; --bg-2: #0b0c0f; --surface: #15181e; --surface-2: #232838;
  --ink: #eceef2; --ink-soft: #98a0ad; --ink-dim: #7c8492; --rule: #262b34;
  --accent: #e8a33d; --on-accent: #140d02; --hot: #ff6b60;
  --disp: "GZS Display", "Arial Narrow", Impact, sans-serif;
  --body: "GZS Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "GZS Mono", ui-monospace, SFMono-Regular, Menlo, "Courier New", monospace;
  --radius: 12px;
  --pad: clamp(1rem, 4vw, 2rem);
  --shadow-soft: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -14px rgb(0 0 0 / .6);
  /* The station's readability floor is 11.5px. .72rem = 11.5px at a 16px root. Nothing on this
     board is allowed under it, including the "3 posts" line under a name. */
  --fs-micro: .72rem;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 1rem; line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .18em; }
h1, h2, h3 { line-height: 1.15; margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; z-index: 99; background: var(--accent); color: var(--on-accent);
  padding: .7rem 1rem; font: 700 .85rem/1 var(--mono); letter-spacing: .06em;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- masthead ---------- */
.mast {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: .8rem var(--pad);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule);
}
.mark { display: flex; align-items: baseline; gap: .5rem; text-decoration: none;
  margin-right: auto; color: var(--ink); }
.mark-g { font: 400 1.5rem/1 var(--disp); letter-spacing: .06em; }
.mark-sub { font: 700 var(--fs-micro)/1 var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim); }
.mast nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mast nav a, .mast nav .linkish {
  font: 700 var(--fs-micro)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; padding: .45rem 0;
}
.mast nav a:hover, .mast nav a:focus-visible { color: var(--accent); }
.mast nav a.nav-hot { color: var(--accent); }
.inline-form { display: inline; margin: 0; }
.linkish {
  background: none; border: 0; padding: .45rem 0; cursor: pointer;
  font: 700 var(--fs-micro)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.linkish:hover { color: var(--accent); }

.wrap { width: min(62rem, 100% - 2 * var(--pad)); margin-inline: auto; padding: 2rem 0 4rem; }

/* ---------- shared bits ---------- */
.page-title { font: 400 clamp(1.7rem, 4.5vw, 2.6rem)/1.05 var(--disp); letter-spacing: .01em; }
.page-title.big { font-size: clamp(2.4rem, 8vw, 4.2rem); }
.sec-title { font: 400 clamp(1.25rem, 3vw, 1.6rem)/1.1 var(--disp); margin: 2.4rem 0 .8rem; }
.cat-title {
  font: 700 var(--fs-micro)/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-dim); margin: 2.4rem 0 .8rem;
}
.muted { color: var(--ink-soft); }
.tiny { font-size: .82rem; }   /* 13.1px, over the floor */
.lede { color: var(--ink-soft); max-width: 54ch; margin: .9rem 0 0; font-size: 1.08rem; }
.board-hero { padding: 1rem 0 1.4rem; }
.board-blurb { max-width: 60ch; margin: .6rem 0 0; }
.crumbs {
  font: 700 var(--fs-micro)/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 1rem;
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--rule); margin: 0 .35rem; }
.flash {
  margin: 0 0 1.4rem; padding: .85rem 1.1rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule)); color: var(--ink);
}
.tag {
  display: inline-block; font: 700 var(--fs-micro)/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-accent); background: var(--accent);
  padding: .3rem .5rem; border-radius: 4px; vertical-align: middle;
}
.tag-quiet { background: var(--surface-2); color: var(--ink-soft); }
.badge {
  display: inline-block; margin-left: .4rem; font: 700 var(--fs-micro)/1 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--rule));
  padding: .22rem .45rem; border-radius: 4px;
}
.signin-nudge { margin-top: 1.6rem; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font: 700 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: .85rem 1.2rem; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--surface-2); color: var(--ink); text-decoration: none;
}
.btn:hover, .btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.btn-hot { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-hot:hover, .btn-hot:focus-visible { background: #fff; border-color: #fff; color: var(--on-accent); }

.panel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.7rem); box-shadow: var(--shadow-soft); margin: 1.6rem 0 0;
}
.panel.narrow { max-width: 34rem; }
.stack { display: flex; flex-direction: column; gap: .5rem; margin: 1.2rem 0 0; }
.stack.tight { margin-top: .6rem; }
.stack label { font: 700 var(--fs-micro)/1.5 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: .6rem; }
.stack input[type=text], .stack input[type=email], .stack input:not([type]), .stack textarea {
  font: inherit; color: var(--ink); background: var(--bg-2);
  border: 1px solid var(--rule); border-radius: 8px; padding: .75rem .9rem; width: 100%;
}
.stack textarea { resize: vertical; min-height: 6rem; line-height: 1.6; }
.stack input::placeholder, .stack textarea::placeholder { color: var(--ink-dim); }
.stack input:focus-visible, .stack textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.stack button { align-self: flex-start; margin-top: 1rem; }
.stack input[type=file] { font: .88rem/1.4 var(--body); color: var(--ink-soft); }
.av-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.composer { margin-top: 2.4rem; }

/* ---------- board index ---------- */
.boards, .threads, .posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.board-row, .thread-row {
  display: grid; align-items: center; gap: 1rem;
  padding: 1rem 1.1rem; background: var(--bg-2); border: 1px solid transparent;
  border-radius: 10px;
}
.board-row { grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 12rem); }
.board-row:hover, .thread-row:hover { border-color: var(--rule); background: var(--surface); }
.br-name { font-size: 1.12rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.br-name:hover { color: var(--accent); }
.br-blurb { margin: .3rem 0 0; color: var(--ink-soft); font-size: .92rem; max-width: 56ch; }
.br-counts, .tr-last, .br-last {
  font: var(--fs-micro)/1.6 var(--mono); letter-spacing: .04em; color: var(--ink-dim);
}
.br-counts span { color: var(--ink); font-weight: 700; }
.br-last a, .tr-last a { color: var(--ink-soft); text-decoration: none; }
.br-last a:hover, .tr-last a:hover { color: var(--accent); }

/* ---------- threads ---------- */
.thread-row { grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 11rem); }
.thread-row.is-pinned { background: color-mix(in srgb, var(--accent) 7%, var(--bg-2)); }
.tr-title { font-size: 1.06rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.tr-title:hover { color: var(--accent); }
.tr-meta { margin: .3rem 0 0; font: var(--fs-micro)/1.6 var(--mono); color: var(--ink-dim); }
.tr-meta a { color: var(--ink-soft); text-decoration: none; }
.tr-meta a:hover { color: var(--accent); }
.tr-side { text-align: center; }
.tr-count { display: block; font: 700 1.15rem/1 var(--mono); color: var(--ink); }
.tr-count-lbl { font: var(--fs-micro)/1.8 var(--mono); color: var(--ink-dim); }
.tr-excerpt { margin: .5rem 0 0; color: var(--ink-soft); font-size: .92rem; }
.tr-excerpt p { margin: 0; }

@media (max-width: 46rem) {
  /* The counts and the last-post column stop being columns and become a line under the title.
     A three-column row at 390px is three unreadable columns. */
  .board-row, .thread-row { grid-template-columns: 1fr; gap: .5rem; }
  .tr-side { display: flex; gap: .4rem; align-items: baseline; text-align: left; }
  .tr-count { display: inline; font-size: .95rem; }
}

/* ---------- a thread ---------- */
.posts { gap: 1rem; margin-top: 1.6rem; }
.post {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow-soft);
}
.post:target { border-color: var(--accent); }
.post-who { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding-bottom: .9rem; border-bottom: 1px solid var(--rule); }
.post-name { margin: 0; font-weight: 600; }
.post-name a { color: var(--ink); text-decoration: none; }
.post-name a:hover { color: var(--accent); }
.post-sub { margin: .1rem 0 0; font: var(--fs-micro)/1 var(--mono); color: var(--ink-dim); }
.post-when { margin: 0 0 0 auto; font: var(--fs-micro)/1.6 var(--mono); color: var(--ink-dim); }
.post-when a { color: var(--ink-dim); text-decoration: none; }
.post-when a:hover { color: var(--accent); }
.post-body { margin: 1rem 0 0; max-width: 68ch; overflow-wrap: break-word; }
.post-body p { margin: 0 0 .9rem; }
.post-body p:last-child { margin-bottom: 0; }
.post-body blockquote {
  margin: 0 0 .9rem; padding: .5rem 0 .5rem 1rem; border-left: 3px solid var(--accent);
  color: var(--ink-soft); font-style: italic;
}
/* A pasted URL is often longer than the column. Breaking it is uglier than letting it push the
   layout sideways is unusable. */
.post-body a { overflow-wrap: anywhere; }

.av {
  display: inline-grid; place-items: center; flex: none; border-radius: 8px;
  font-family: var(--mono); font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--rule); overflow: hidden;
}
.av-img { object-fit: cover; background: var(--surface-2); }

.profile { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.bio { margin: .8rem 0 0; color: var(--ink-soft); max-width: 58ch; }

.modbar { display: flex; gap: 1.2rem; margin: 2rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--rule); }

.pager { display: flex; gap: .35rem; flex-wrap: wrap; margin: 1.4rem 0 0; }
.pg {
  min-width: 2.4rem; min-height: 2.4rem; display: grid; place-items: center;
  font: 700 .82rem/1 var(--mono); border: 1px solid var(--rule); border-radius: 8px;
  color: var(--ink-soft); text-decoration: none; background: var(--bg-2);
}
.pg:hover { border-color: var(--accent); color: var(--accent); }
.pg.is-here { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.foot { border-top: 1px solid var(--rule); padding: 2.2rem var(--pad) 3rem; text-align: center; }
.foot-line { margin: 0; font: 700 .76rem/1.7 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); }
.foot-meta { margin: .6rem 0 0; font-size: .86rem; color: var(--ink-dim); }

/* ---------- per-post actions ----------
   Edit, delete and report. These came late: the schema had a reports table and an edited_at
   column that no code path ever touched, so the database described a forum with moderation and
   the app did not have one. */
.post-edited { margin: .7rem 0 0; font: var(--fs-micro)/1 var(--mono); color: var(--ink-dim); }
.post-acts { display: flex; align-items: flex-start; gap: 1.2rem; flex-wrap: wrap;
  margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule); }
.post-edit summary {
  list-style: none; cursor: pointer; padding: .3rem 0;
  font: 700 var(--fs-micro)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.post-edit summary::-webkit-details-marker { display: none; }
.post-edit summary:hover, .post-edit summary:focus-visible { color: var(--accent); }
.post-edit[open] summary { color: var(--accent); }
/* The open form needs the full row, not the width of the word "Edit". */
.post-edit[open] { flex: 1 1 100%; }
.post-edit .stack { margin-top: .6rem; }
.post-acts .modbar, .post-acts .inline-form { margin: 0; padding: 0; border: 0; }