/* =========================================================
   mkr's homepage — shared styles
   Aesthetic: a terminal session. Box-framed console, amber
   prompt, an `ls -la` listing where /public is browsable and
   /private reads as permission-denied. Hand-rolled, no deps,
   no network. Retheme the whole site from the tokens below.
   ========================================================= */

:root {
  /* --- core palette (the 6 named colors) --- */
  --void:   #0b0e14;   /* base background (blue-black, not pure #000) */
  --panel:  #11151c;   /* terminal surface                            */
  --fog:    #c7d0d9;   /* body text — ~11:1 on void                   */
  --amber:  #ffb454;   /* signature: prompt + accents                 */
  --cyan:   #5ccfe6;   /* links / browsable                           */
  --rose:   #ff5c8a;   /* reserved: locked / permission denied        */

  /* --- structural greys derived around the palette --- */
  --dim:    #5c6773;   /* borders, shell comments                     */
  --muted:  #8a96a3;   /* secondary text — ~5:1 on void               */

  /* --- type --- */
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono",
          "Source Code Pro", "DejaVu Sans Mono", "Menlo",
          "Consolas", monospace;

  --maxw: 46rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(1rem, 5vw, 3.5rem) 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fog);
  background-color: var(--void);
  /* faint corner glow so the void isn't dead flat */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(92,207,230,.05), transparent 60%),
    radial-gradient(90% 60% at 100% 110%, rgba(255,180,84,.04), transparent 60%);
  background-attachment: fixed;
}

/* ---- static CRT overlay: scanlines + vignette (no motion) ---- */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,.16) 3px,
      rgba(0,0,0,0) 4px
    ),
    radial-gradient(130% 130% at 50% 50%, transparent 62%, rgba(0,0,0,.45));
  mix-blend-mode: multiply;
}

/* accessible visually-hidden helper */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ============================================================
   the terminal window
   ============================================================ */
.term {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  background: var(--panel);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px var(--dim),
    0 0 50px rgba(255,180,84,.035),
    0 24px 60px rgba(0,0,0,.6);
  overflow: hidden;
}

/* ---- title bar ---- */
.term-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  background: linear-gradient(180deg, #161b24, #0f131a);
  border-bottom: 1px solid var(--dim);
  font-size: .82rem;
  color: var(--muted);
}
.term-bar .lights { display: flex; gap: .45rem; }
.term-bar .lights .light {
  width: .72rem; height: .72rem;
  border-radius: 50%;
  display: block;
  opacity: .85;
  position: relative;
  padding: 0; border: 0;                 /* reset for the <button> */
  appearance: none; -webkit-appearance: none;
}
.term-bar .lights .light-close { background: var(--rose);  }  /* close -> home    */
.term-bar .lights .light-back  { background: var(--amber); cursor: pointer; }  /* -> back */
.term-bar .lights .light-dot   { background: var(--cyan);  }  /* decorative       */
a.light-close { cursor: pointer; }

/* glyphs revealed on hover/focus, like real window controls */
.term-bar .lights .light-close::after,
.term-bar .lights .light-back::after {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(0,0,0,.78);
  opacity: 0;
}
.term-bar .lights .light-close::after { content: "×"; font: 700 .58rem/1 var(--mono); }
.term-bar .lights .light-back::after  { content: "‹"; font: 700 .74rem/1 var(--mono); }
.term-bar .lights .light-close:hover,  .term-bar .lights .light-close:focus-visible,
.term-bar .lights .light-back:hover,   .term-bar .lights .light-back:focus-visible { opacity: 1; }
.term-bar .lights .light-close:hover::after,  .term-bar .lights .light-close:focus-visible::after,
.term-bar .lights .light-back:hover::after,   .term-bar .lights .light-back:focus-visible::after { opacity: 1; }
.term-bar .title {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .02em;
}
.term-bar .conn {
  flex: 0 0 auto;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* ---- terminal body ---- */
.term-body {
  padding: clamp(1rem, 4vw, 1.8rem);
  font-size: .95rem;
}

/* ---- shell primitives ---- */
.prompt { color: var(--dim); white-space: nowrap; }
.prompt .u { color: var(--amber); }
.prompt .h { color: var(--cyan); }
.prompt .p { color: var(--muted); }
.prompt .s { color: var(--fog); }

.cmd {
  margin: 0;
  /* NB: normal (not pre-wrap) so an HTML formatter's indentation/newlines
     collapse to single spaces instead of rendering literally. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.cmd .c { color: var(--fog); }                 /* the typed command */
.cmd + .listing,
.cmd + .out { margin-top: .35rem; }

.comment { color: var(--dim); }                /* # shell comments  */

.out {                                         /* command output    */
  margin: 0 0 1.4rem;
  color: var(--fog);
}
.out p { margin: 0 0 .8rem; }
.out p:last-child { margin-bottom: 0; }

/* ---- boot sequence ---- */
.boot {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: .85rem;
}
.boot .line { display: block; }   /* whitespace collapses; formatter-safe */
.boot .ok   { color: var(--cyan); }
.boot .dots { color: var(--dim); }

/* ============================================================
   the signature element — `ls -la` listing as site nav
   ============================================================ */
.listing {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}
.listing li + li { margin-top: .15rem; }

.row {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
  align-items: baseline;
  gap: .25rem .9rem;
  padding: .45rem .55rem;
  border-radius: 5px;
  text-decoration: none;
  color: var(--fog);
  border: 1px solid transparent;
}
.row:hover,
.row:focus-visible { background: rgba(92,207,230,.07); }

.row .perm  { color: var(--dim); white-space: nowrap; }
.row .owner { color: var(--muted); white-space: nowrap; }
.row .fname { color: var(--cyan); font-weight: 700; }
.row .note  {
  grid-column: 3 / 4;
  color: var(--muted);
  font-size: .85rem;
}
.row .tag {
  grid-row: 1;
  grid-column: 4;
  align-self: center;
  font-size: .66rem;
  letter-spacing: .14em;
  padding: .12rem .4rem;
  border-radius: 3px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.row .tag-open   { color: var(--cyan); }
.row .tag-locked { color: var(--rose); }

.row:hover .fname,
.row:focus-visible .fname { text-decoration: underline; }

/* the locked row reads as permission-denied */
.row.locked .fname { color: var(--rose); }
.row.locked .perm  { color: var(--rose); }
.row.locked .owner { color: var(--rose); letter-spacing: .1em; }
.row.locked:hover,
.row.locked:focus-visible { background: rgba(255,92,138,.07); }

/* ---- the resting cursor ---- */
.cursor {
  display: inline-block;
  width: .58em;
  height: 1.05em;
  margin-left: .12em;
  vertical-align: text-bottom;
  background: var(--amber);
  box-shadow: 0 0 6px rgba(255,180,84,.6);
  animation: blink 1.15s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---- prose links (back-links etc.) ---- */
a { color: var(--cyan); }
a:hover { color: var(--amber); }

/* ============================================================
   status line (footer) — tmux/powerline flavored
   ============================================================ */
.statusline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding: .4rem .6rem;
  border-top: 1px solid var(--dim);
  background: #0f131a;
  font-size: .72rem;
  color: var(--muted);
}
.statusline .seg { white-space: nowrap; }
.statusline .seg.host {
  color: var(--void);
  background: var(--amber);
  padding: .12rem .5rem;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: .04em;
}
.statusline .spacer { flex: 1 1 auto; }

/* ============================================================
   forms — login / invite registration
   ============================================================ */
.auth { max-width: 30rem; }

.banner {
  margin: 0 0 1.3rem;
  padding: .6rem .75rem;
  border-radius: 5px;
  border: 1px solid currentColor;
  font-size: .85rem;
}
.banner-error { color: var(--rose); background: rgba(255,92,138,.07); }
.banner-ok    { color: var(--cyan); background: rgba(92,207,230,.07); }

.field { display: grid; gap: .35rem; margin: 0 0 1.1rem; }
.field label {
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
}
.field input,
.field textarea,
.tag-search {
  font: inherit;
  width: 100%;
  color: var(--fog);
  background: var(--void);
  border: 1px solid var(--dim);
  border-radius: 5px;
  padding: .55rem .65rem;
  caret-color: var(--amber);
}
.field textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.5;
}
.field input::placeholder,
.field textarea::placeholder,
.tag-search::placeholder { color: var(--dim); }
.field input:focus-visible,
.field textarea:focus-visible,
.tag-search:focus-visible {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), 0 0 10px rgba(255,180,84,.22);
}
.field .hint { font-size: .76rem; color: var(--dim); }

.btn {
  font: inherit;
  cursor: pointer;
  color: var(--void);
  background: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 5px;
  padding: .55rem 1.1rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.btn:hover { background: #ffc473; }

.auth-actions {
  display: flex;
  align-items: center;
  gap: 1rem .9rem;
  flex-wrap: wrap;
  margin-top: 1.3rem;
}
.auth-alt { font-size: .85rem; color: var(--muted); }

[hidden] { display: none !important; }

/* ============================================================
   blog — threads + comments (served under /private)
   ============================================================ */
.thread { margin: 0 0 1.6rem; }
.thread-title { margin: .2rem 0 .35rem; font-size: 1.2rem; color: var(--fog); }
.thread-meta { margin: 0 0 .9rem; font-size: .78rem; color: var(--muted); }
.thread-body { overflow-wrap: anywhere; }

.comments { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.comments li + li { margin-top: .5rem; }
.comment-item {
  padding: .6rem .75rem;
  border: 1px solid var(--dim);
  border-radius: 6px;
}
.comment-head {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  margin-bottom: .3rem;
}
.comment-user { color: var(--amber); font-weight: 700; }
.comment-time { font-size: .72rem; color: var(--muted); }
.comment-body { overflow-wrap: anywhere; }
.comment-empty { color: var(--dim); }
.comment-check { display: inline-flex; align-items: center; }
.comment-check input { accent-color: var(--amber); }

/* ---- admin delete mode (off by default; toggled on the thread page) ---- */
.comments-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.toggle[aria-pressed="true"] { border-color: var(--rose); color: var(--rose); }
.del-only { display: none !important; }              /* hidden until delete mode */
.delete-mode .del-inline { display: inline !important; }
.delete-mode .del-flex { display: flex !important; }
.delete-mode .del-iflex { display: inline-flex !important; }

/* ---- rendered markdown (thread + comment bodies) ---- */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3 { line-height: 1.25; margin: 1rem 0 .5rem; color: var(--fog); }
.md h1 { font-size: 1.25rem; }
.md h2 { font-size: 1.12rem; }
.md h3 { font-size: 1rem; }
.md p { margin: 0 0 .7rem; }
.md ul, .md ol { margin: 0 0 .7rem; padding-left: 1.4rem; }
.md li { margin: .15rem 0; }
.md a { color: var(--cyan); }
.md a:hover { color: var(--amber); }
.md strong { color: var(--fog); }
.md code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--void);
  border: 1px solid var(--dim);
  border-radius: 4px;
  padding: .05rem .3rem;
}
.md pre {
  background: var(--void);
  border: 1px solid var(--dim);
  border-radius: 6px;
  padding: .7rem .8rem;
  overflow: auto;
  margin: 0 0 .7rem;
}
.md pre code { background: none; border: 0; padding: 0; }
.md blockquote {
  margin: 0 0 .7rem;
  padding: .2rem .9rem;
  border-left: 2px solid var(--amber);
  color: var(--muted);
}
.md hr { border: 0; border-top: 1px solid var(--dim); margin: 1rem 0; }
.md table { border-collapse: collapse; margin: 0 0 .7rem; }
.md th, .md td { border: 1px solid var(--dim); padding: .3rem .5rem; }

/* ---- markdown editor toolbar ---- */
.md-toolbar { display: flex; gap: .3rem; margin-bottom: .4rem; }
.md-btn {
  font: 700 .9rem/1 var(--mono);
  width: 2rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  color: var(--fog);
  background: var(--panel);
  border: 1px solid var(--dim);
  border-radius: 4px;
  cursor: pointer;
}
.md-btn:hover { border-color: var(--amber); color: var(--amber); }
.md-i { font-style: italic; }
.md-u { text-decoration: underline; }
.md-s { text-decoration: line-through; }

/* glitch host: a touch of tracking so the scramble reads cleanly */
.js-host { letter-spacing: .04em; }

/* ---- blog search / filter ---- */
.filters { margin: 0 0 1.5rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.filter-row .field { flex: 1 1 9rem; }
.field select {
  font: inherit;
  width: 100%;
  color: var(--fog);
  background: var(--void);
  border: 1px solid var(--dim);
  border-radius: 5px;
  padding: .55rem .55rem;
  caret-color: var(--amber);
}
.field select:focus-visible {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), 0 0 10px rgba(255,180,84,.22);
}

/* ---- tag flair ---- */
.flairs { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.flair {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .03em;
  padding: .08rem .45rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  text-decoration: none;
  white-space: nowrap;
}
.flair-0 { color: var(--cyan); }
.flair-1 { color: var(--amber); }
.flair-2 { color: var(--rose); }
a.flair:hover { background: rgba(199, 208, 217, .08); }
.thread-tags { margin: 0 0 .9rem; }
/* in the listing row, flairs sit in the right-hand column */
.row .flairs { grid-column: 4; grid-row: 1; justify-content: flex-end; max-width: 15rem; }

/* ---- tag filter: search box + cycling chips ---- */
.tag-filter { margin: 0 0 1.5rem; }
.tag-filter .tag-search { max-width: 18rem; margin-bottom: .55rem; }
.tag-filter .hint { margin: 0 0 .55rem; }
.tag-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-chip {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .02em;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.tag-chip .tag-count { font-size: .62rem; opacity: .6; }
.tag-chip .tag-mode { font-weight: 700; }
a.tag-chip:hover { filter: brightness(1.18); }
.tag-chip[hidden] { display: none; }
/* default (off) state uses the flair color (.flair-0/1/2 above) */
/* active states override color and add a faint fill — placed after flair so they win */
.tag-chip.state-and { color: var(--cyan);  background: rgba(92,207,230,.14); }
.tag-chip.state-or  { color: var(--amber); background: rgba(255,180,84,.14); }
.tag-chip.state-not { color: var(--rose);  background: rgba(255,92,138,.14); text-decoration: line-through; }

/* tiny legend chips in the hint line */
.ex { padding: 0 .3rem; border-radius: 3px; border: 1px solid currentColor; font-size: .64rem; white-space: nowrap; }
.ex.state-and { color: var(--cyan); }
.ex.state-or  { color: var(--amber); }
.ex.state-not { color: var(--rose); }

/* ---- tags input autocomplete ---- */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 20;
  margin-top: 2px;
  max-height: 12rem;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--dim);
  border-radius: 5px;
}
.ac-item { padding: .4rem .55rem; cursor: pointer; font-family: var(--mono); font-size: .85rem; }
.ac-item.active, .ac-item:hover { background: rgba(255,180,84,.15); color: var(--amber); }

/* ============================================================
   game hub (public/games)
   ============================================================ */
.game-stage {
  margin: 0 0 1.5rem;
  border: 1px solid var(--dim);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.game-stage-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  background: var(--panel);
  border-bottom: 1px solid var(--dim);
}
.game-stage-title {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--amber);
}
.game-frame-wrap { width: 100%; height: 70vh; max-height: 80vh; background: #000; }
.game-frame { width: 100%; height: 100%; border: 0; display: block; }

.game-grid {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.game-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dim);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}
.game-card-art {
  aspect-ratio: 3 / 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border-bottom: 1px solid var(--dim);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(92,207,230,.12), transparent 60%),
    var(--void);
}
.art-title {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .18em;
  font-size: 1.1rem;
  color: var(--amber);
  text-shadow: 0 0 12px rgba(255,180,84,.35);
}
.art-sub {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.game-card-body { display: flex; flex-direction: column; gap: .4rem; padding: .8rem .9rem; flex: 1; }
.game-card-title { margin: 0; font-size: 1rem; color: var(--fog); }
.game-card-desc { margin: 0; font-size: .85rem; color: var(--muted); flex: 1; }
.game-card-actions { display: flex; align-items: center; gap: 1rem; margin-top: .3rem; }

/* SlopCade banner */
.slopcade-banner { margin: 0 0 1.3rem; display: flex; flex-direction: column; gap: .2rem; }
.sc-name {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: .12em;
  color: var(--amber);
  text-shadow: 0 0 18px rgba(255,180,84,.35);
}
.sc-tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--muted); }

/* per-game leaderboard (in the card) */
.lb { margin-top: .7rem; border-top: 1px solid var(--dim); padding-top: .5rem; }
.lb-title { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.lb-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.lb-list li { display: flex; gap: .5rem; align-items: baseline; padding: .12rem 0; font-size: .8rem; }
.lb-list li:not(.lb-empty)::before {
  counter-increment: rank;
  content: counter(rank);
  color: var(--amber);
  font-weight: 700;
  width: 1.1rem;
  flex: 0 0 auto;
}
.lb-name { color: var(--fog); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-detail { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.lb-empty { color: var(--dim); font-size: .76rem; }

/* arcade score entry modal */
.arcade-modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 1rem;
  background: rgba(0,0,0,.78);
}
.arcade-modal[hidden] { display: none; }
.arcade-box {
  width: 100%; max-width: 24rem;
  padding: 1.4rem; text-align: center;
  background: var(--panel);
  border: 1px solid var(--amber);
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(255,180,84,.18);
}
.arcade-title {
  font-family: var(--mono); font-weight: 700;
  letter-spacing: .3em; font-size: 1.35rem;
  color: var(--rose); text-shadow: 0 0 16px rgba(255,92,138,.4);
}
.arcade-sub { font-family: var(--mono); color: var(--amber); margin: .45rem 0 1.1rem; font-size: .95rem; }
.arcade-label { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.arcade-box input {
  width: 100%; font: inherit;
  text-align: center; text-transform: uppercase; letter-spacing: .25em; font-size: 1.1rem;
  color: var(--fog); background: var(--void);
  border: 1px solid var(--dim); border-radius: 6px; padding: .55rem;
  caret-color: var(--amber);
}
.arcade-box input:focus-visible {
  outline: none; border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), 0 0 12px rgba(255,180,84,.25);
}
.arcade-actions { display: flex; gap: .7rem; justify-content: center; margin-top: 1.1rem; }

@media (max-width: 34rem) {
  .game-frame-wrap { height: 60vh; }
}

/* ============================================================
   quotebook
   ============================================================ */
.quotes { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.quotes li + li { margin-top: .8rem; }
.quote { border: 1px solid var(--dim); border-radius: 8px; padding: .8rem 1rem; }
.quote-text {
  margin: 0 0 .55rem;
  padding-left: .85rem;
  border-left: 2px solid var(--amber);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--fog);
  font-size: 1.02rem;
}
.quote-attr {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .8rem;
  font-size: .82rem;
}
.quote-author { color: var(--amber); }
.quote-source { color: var(--cyan); }
.quote-date { color: var(--muted); font-size: .72rem; }

/* ============================================================
   project dev log
   ============================================================ */
.devlog { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.devlog-entry {
  position: relative;
  border-left: 2px solid var(--dim);
  padding: 0 0 .2rem 1rem;
  margin-bottom: 1.2rem;
}
.devlog-entry::before {
  content: "";
  position: absolute;
  left: -5px; top: .4rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
}
.devlog-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .35rem; }
.devlog-date { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--amber); }

/* ============================================================
   recs (things I like, by category)
   ============================================================ */
.rec-cat {
  margin: 0 0 .8rem;
  border: 1px solid var(--dim);
  border-radius: 8px;
  overflow: hidden;
}
.rec-cat-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .6rem .8rem;
  font-size: 1.05rem;
  color: var(--fog);
}
.rec-cat-summary::-webkit-details-marker { display: none; }
.rec-cat-summary::before {
  content: "▸";
  color: var(--amber);
  display: inline-block;
  transition: transform .15s ease;
}
.rec-cat[open] > .rec-cat-summary::before { transform: rotate(90deg); }
.rec-cat-summary:hover { background: rgba(199, 208, 217, .04); }
.rec-cat-summary:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.rec-count { color: var(--muted); font-size: .8rem; }
.rec-cat-body { padding: .1rem .8rem .8rem; }
.rec-delcat { margin-top: .5rem; }
.rec-hash { color: var(--amber); }
.rec-list { list-style: none; margin: 0 0 .6rem; padding: 0; }
.rec-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; padding: .18rem 0; }
.rec-bullet { color: var(--dim); }
.rec-name { color: var(--cyan); font-weight: 600; text-decoration: none; }
a.rec-name:hover { color: var(--amber); text-decoration: underline; }
.rec-note { color: var(--muted); font-size: .9rem; }
.rec-additem {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin: .3rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--dim);
}
.rec-additem input {
  font: inherit;
  color: var(--fog);
  background: var(--void);
  border: 1px solid var(--dim);
  border-radius: 5px;
  padding: .4rem .55rem;
  caret-color: var(--amber);
  flex: 1 1 8rem;
  min-width: 0;
}
.rec-additem input[name="title"] { flex: 1 1 11rem; }
.rec-additem input:focus-visible {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber);
}

/* ============================================================
   plans (gated, preformatted)
   ============================================================ */
.plans {
  margin: 0 0 1.4rem;
  padding: .9rem 1rem;
  border: 1px solid var(--dim);
  border-radius: 8px;
  background: var(--void);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--fog);
}

/* ============================================================
   admin tools — invite codes + access management
   ============================================================ */
.codes, .adminlist { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.codes .code { padding: .15rem 0; }
.code {
  font-family: var(--mono);
  color: var(--amber);
  letter-spacing: .08em;
}
.adminlist li + li { margin-top: .4rem; }
.adminrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .8rem;
  padding: .5rem .65rem;
  border: 1px solid var(--dim);
  border-radius: 6px;
}
.adminrow .fname { color: var(--cyan); font-weight: 700; }
.adminrow .note { font-size: .8rem; color: var(--muted); }
.badge-status {
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .12rem .4rem;
  border-radius: 3px;
  border: 1px solid var(--dim);
  color: var(--muted);
}
.status-unused { color: var(--cyan); border-color: var(--cyan); }
.status-revoked { color: var(--rose); border-color: var(--rose); }
.inline { display: inline; margin: 0; }
.btn-sm { padding: .3rem .6rem; font-size: .76rem; }
.btn-danger {
  background: transparent;
  color: var(--rose);
  border-color: var(--rose);
}
.btn-danger:hover { background: rgba(255,92,138,.12); }

/* ============================================================
   pager (next/prev page links, google-style)
   ============================================================ */
.pager { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0 0 1.5rem; }
.pager-link {
  font-family: var(--mono);
  font-size: .85rem;
  padding: .3rem .55rem;
  border-radius: 5px;
  border: 1px solid var(--dim);
  color: var(--cyan);
  text-decoration: none;
}
a.pager-link:hover { border-color: var(--amber); color: var(--amber); }
.pager-link.current {
  background: var(--amber);
  color: var(--void);
  border-color: var(--amber);
  font-weight: 700;
}
.pager-link.disabled { color: var(--dim); border-color: transparent; }
.pager-gap { color: var(--muted); padding: 0 .2rem; }

/* ============================================================
   floating "to top" button (created by identity.js, all pages)
   ============================================================ */
.to-top {
  position: fixed;
  right: clamp(.8rem, 3vw, 1.6rem);
  bottom: clamp(.8rem, 3vw, 1.6rem);
  z-index: 40;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  font-size: 1.1rem;
  color: var(--amber);
  background: var(--panel);
  border: 1px solid var(--dim);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, border-color .15s ease;
}
.to-top.show { opacity: .9; transform: none; pointer-events: auto; }
.to-top:hover { opacity: 1; border-color: var(--amber); }

/* ============================================================
   focus — visible, on-brand
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================
   motion sequencing — flavor only, content readable regardless
   ============================================================ */
.boot .line { opacity: 0; animation: reveal .28s ease forwards; }
.boot .line:nth-child(1) { animation-delay: .08s; }
.boot .line:nth-child(2) { animation-delay: .34s; }
.boot .line:nth-child(3) { animation-delay: .60s; }
.boot .line:nth-child(4) { animation-delay: .86s; }

.session { opacity: 0; animation: reveal .3s ease forwards; animation-delay: 1.05s; }

@keyframes reveal {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   static — longform broadcasts (list + reading view)
   ============================================================ */
.md-input-lg { min-height: 22rem; line-height: 1.55; resize: vertical; }
.static-compose { margin-top: .4rem; }

/* ---- index: the broadcast log ---- */
.static-list { list-style: none; margin: .35rem 0 1.4rem; padding: 0; }
.static-entry + .static-entry { margin-top: .5rem; }
.static-entry-link {
  display: flex;
  gap: .7rem;
  padding: .6rem .7rem;
  text-decoration: none;
  color: var(--fog);
  border: 1px solid var(--dim);
  border-left: 2px solid var(--amber);
  border-radius: 6px;
  background: rgba(255,180,84,.02);
  transition: background .12s ease, border-color .12s ease;
}
.static-entry-link:hover,
.static-entry-link:focus-visible {
  background: rgba(255,180,84,.07);
  border-left-color: var(--cyan);
}
.static-sig { color: var(--amber); font-weight: 700; line-height: 1.5; }
.static-entry-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.static-entry-title { color: var(--cyan); font-weight: 700; font-size: 1.05rem; }
.static-entry-link:hover .static-entry-title { text-decoration: underline; }
.static-entry-sub { color: var(--fog); font-size: .9rem; }
.static-entry-meta { color: var(--muted); font-size: .74rem; }

/* ---- reading view: more air, a wider comfortable column ---- */
.static-post { margin: .3rem 0 1.4rem; }
.static-post-head {
  margin: 0 0 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--dim);
}
.static-post-kicker {
  margin: 0 0 .5rem;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}
.static-post-title {
  margin: 0 0 .5rem;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--fog);
  overflow-wrap: anywhere;
}
.static-post-sub {
  margin: 0 0 .7rem;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--muted);
}
.static-post-meta { margin: 0; font-size: .76rem; color: var(--dim); }
.static-post-body { font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.static-post-body p { margin: 0 0 1rem; }
.static-post-body h1, .static-post-body h2, .static-post-body h3 { margin: 1.6rem 0 .6rem; }
.static-post-end {
  margin: 1.6rem 0 1rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ============================================================
   small screens
   ============================================================ */
@media (max-width: 34rem) {
  .term-body { font-size: .9rem; }
  .static-post-title { font-size: 1.4rem; }
  .static-post-sub { font-size: .98rem; }
  .row {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: .1rem .6rem;
  }
  .row .perm  { grid-column: 1; }
  .row .owner { display: none; }            /* drop owner col when tight */
  .row .fname { grid-column: 2; }
  .row .tag   { grid-column: 3; grid-row: 1; }
  .row .note  { grid-column: 1 / -1; }
  .row .flairs { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; max-width: none; }
  .term-bar .conn { display: none; }
}

/* ============================================================
   reduced motion — snap everything to final state
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .boot .line,
  .session { opacity: 1 !important; animation: none !important; transform: none !important; }
  .cursor  { animation: none !important; }
  * { transition: none !important; }
}