/* =====================================================================
   cat lap // bbs.css: the shared CRT / bulletin-board terminal theme
   ---------------------------------------------------------------------
   This is the canonical "cat lap" look, extracted from index.html so
   EVERY 2027 page can share one source of truth.

   To build a new page:
     1. copy _template.html
     2. <link rel="stylesheet" href="/css/bbs.css">  (already in template)
     3. write your content inside .screen > .inner
     4. add page-only tweaks in a <style> block or page CSS file

   Structure (outer shell -> content):
     .crt-stage      dark room the monitor sits in
       .crt-monitor  the plastic bezel + power LED
         .crt-glass  the curved glass
           .bbs-nav  optional terminal nav bar (sticky top)
           .screen   the phosphor content area (scrolls)
             .inner  centered content column (max-width)
           .sweep    moving scanline highlight
           .overlay  scanlines + vignette
   ===================================================================== */

:root {
  /* ---- palette (the cat lap phosphor set) ---------------------------
     lowercase = dim/body, Capitalized = bright/accent. keep using these
     tokens instead of raw hex so the whole site recolors from one place. */
  --blk:#05070b;          /* true black / button text          */
  --scr-bg:#060a0b;       /* screen background                  */
  --grn:#2bb44c;          /* dim green: body copy, borders     */
  --Grn:#5dff77;          /* bright green: default text/glow    */
  --gry:#7f8794;          /* muted gray: captions, footnotes    */
  --cyn:#16bcc4;          /* dim cyan                            */
  --Cyn:#5ff0f0;          /* bright cyan: headings, links       */
  --Yel:#ffd84d;          /* bright yellow: CTAs, "loading"     */
  --yel:#e0b020;          /* dim yellow                          */
  --Mag:#ff79ef;          /* magenta: highlights, accents       */
  --Red:#ff6f63;          /* red: errors                        */
  --Wht:#ffffff;          /* white: hover states                */

  /* ---- type + rhythm ---- */
  --bbs-font: "VT323", "Courier New", monospace;
  --bbs-content-w: 640px;          /* default content column width      */
  --bbs-content-w-wide: 860px;     /* .inner--wide for tables/leaderboards */
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; background: #000; }

body {
  font-family: var(--bbs-font);
  /* landing pages stay fixed; content pages scroll inside .screen.
     overflow is hidden on body because the GLASS is the viewport. */
  overflow: hidden;
}

/* =====================================================================
   1. THE MONITOR SHELL
   ===================================================================== */
.crt-stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 2.4vmin, 34px);
  background: radial-gradient(120% 120% at 50% 38%, #15171c 0%, #050506 60%, #000 100%);
}

.crt-monitor {
  position: relative; aspect-ratio: 4 / 3;
  width: min(96vw, calc((100vh - 2 * clamp(8px, 2.4vmin, 34px)) * 4 / 3));
  max-height: 96vh;
  border-radius: clamp(22px, 3.4vmin, 46px);
  padding: clamp(10px, 2vmin, 26px);
  background: linear-gradient(160deg, #2b2d31, #16171a 46%, #0c0d0f);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.10),
    inset 0 -6px 18px rgba(0,0,0,.7),
    0 30px 80px rgba(0,0,0,.8),
    0 0 0 2px #000;
}
/* power LED */
.crt-monitor::after {
  content: ""; position: absolute;
  right: clamp(16px,3vmin,34px); bottom: clamp(6px,1.4vmin,16px);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--Grn);
  box-shadow: 0 0 8px var(--Grn), 0 0 16px rgba(93,255,119,.7);
  animation: bbs-led 5s ease-in-out infinite;
}
@keyframes bbs-led { 0%,100%{opacity:.9} 50%{opacity:.55} }

.crt-glass {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: clamp(16px, 2.6vmin, 34px);
  background: radial-gradient(125% 130% at 50% 44%, #0b1112 0%, var(--scr-bg) 52%, #02040a 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), inset 0 0 70px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
}

/* =====================================================================
   2. THE SCREEN (phosphor content area)
   - default: top-aligned + scrolls  (content pages: tables, articles)
   - .screen--center: vertically centered (landing pages like index)
   ===================================================================== */
.screen {
  position: relative; z-index: 2; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: clamp(28px, 5vmin, 64px) clamp(22px, 5vmin, 60px);
  color: var(--Grn);
  font-size: clamp(17px, 2.05vmin, 23px); line-height: 1.25;
  text-shadow: -1.1px 0 rgba(255,30,90,.30), 1.1px 0 rgba(40,150,255,.30), 0 0 7px currentColor;
  animation: bbs-flick 5s infinite steps(50);
  scrollbar-width: thin; scrollbar-color: var(--grn) transparent;
}
.screen--center { justify-content: center; }
.screen::-webkit-scrollbar { width: 9px; }
.screen::-webkit-scrollbar-thumb { background: var(--grn); }
.screen::-webkit-scrollbar-track { background: transparent; }

@keyframes bbs-flick {
  0%,100%{opacity:1} 84%{opacity:1} 86%{opacity:.86} 88%{opacity:1}
  93%{opacity:.94} 94%{opacity:1} 97%{opacity:.97} 98%{opacity:1}
}

.inner {
  width: 100%; max-width: var(--bbs-content-w);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.inner--wide { max-width: var(--bbs-content-w-wide); }

/* =====================================================================
   3. TERMINAL NAV (optional, for multi-page navigation)
   ===================================================================== */
.bbs-nav {
  position: sticky; top: 0; z-index: 4; flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px clamp(6px, 1.6vmin, 16px);
  padding: clamp(8px,1.6vmin,14px) clamp(14px,3vmin,28px);
  font-family: var(--bbs-font);
  font-size: clamp(15px, 1.9vmin, 20px);
  color: var(--Grn);
  background: linear-gradient(180deg, rgba(6,10,11,.96), rgba(6,10,11,.82));
  border-bottom: 1px solid var(--grn);
  text-shadow: 0 0 6px currentColor;
}
.bbs-nav__brand { color: var(--Cyn); margin-right: auto; white-space: nowrap; }
.bbs-nav__brand b { color: var(--Mag); }
.bbs-nav a {
  color: var(--Grn); text-decoration: none; padding: 1px 8px;
  border: 1px solid transparent; white-space: nowrap;
}
.bbs-nav a::before { content: "["; color: var(--gry); margin-right: 3px; }
.bbs-nav a::after  { content: "]"; color: var(--gry); margin-left: 3px; }
.bbs-nav a:hover { color: var(--Wht); }
.bbs-nav a[aria-current="page"] { color: var(--Yel); }

/* =====================================================================
   4. TYPOGRAPHY + COMMON BLOCKS
   ===================================================================== */
.screen h1, .screen h2, .screen h3 {
  font-weight: normal; line-height: 1.1; margin: 0;
  text-transform: lowercase; letter-spacing: .02em;
}
.screen h1 { color: var(--Cyn); font-size: 1.7em; margin-top: .2em; }
.screen h2 { color: var(--Cyn); font-size: 1.3em; margin-top: 1.1em; }
.screen h3 { color: var(--Mag); font-size: 1.1em; margin-top: .9em; }
.screen p  { margin: .55em 0 0; color: var(--grn); text-wrap: pretty; }
.screen a  { color: var(--Cyn); text-decoration: none; }
.screen a:hover { background: var(--cyn); color: var(--blk); text-shadow: none; }
.screen strong { color: var(--Grn); }
.screen hr {
  width: 100%; border: 0; border-top: 1px dashed var(--grn);
  opacity: .6; margin: 1.1em 0;
}

/* ascii-art figlet block (e.g. the CAT / LAP logo) */
.fig { display: flex; justify-content: center; align-items: flex-start; gap: clamp(8px, 1.4vmin, 16px); margin: 0; }
.figpart { white-space: pre; line-height: 1.02; margin: 0; font-size: clamp(10px, 1.9vmin, 19px); text-shadow: 0 0 6px currentColor; }
.figpart.cat { color: var(--Cyn); }
.figpart.lap { color: var(--Mag); }

.tag { color: var(--Grn); margin-top: 14px; }
.tag .m { color: var(--Mag); }
.loc { color: var(--gry); margin-top: 2px; }
.blurb { color: var(--grn); margin-top: 18px; max-width: 460px; text-wrap: pretty; }

/* a bordered content panel (good for grouping sections on content pages) */
.panel {
  width: 100%; text-align: left; margin-top: 20px;
  border: 1px solid var(--grn); padding: clamp(14px,2.4vmin,22px);
  background: rgba(43,180,76,.04);
}
.panel > :first-child { margin-top: 0; }

/* =====================================================================
   5. PILLS / BADGES
   ===================================================================== */
.pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.pill { border: 1px solid currentColor; padding: 1px 11px; white-space: nowrap; flex: 0 0 auto; }
.pill.load { color: var(--Yel); }
.pill.here { color: var(--Cyn); }
.pill.done { color: var(--grn); }

/* =====================================================================
   6. TABLES (leaderboards, schedules, terminal style)
   ===================================================================== */
.bbs-table-wrap { width: 100%; overflow-x: auto; margin-top: 16px; }
.bbs-table {
  width: 100%; border-collapse: collapse; text-align: left;
  font-size: .95em; color: var(--grn);
}
.bbs-table caption { color: var(--Cyn); text-align: left; padding-bottom: 8px; }
.bbs-table th, .bbs-table td {
  padding: 6px 12px; border: 1px solid rgba(43,180,76,.45); white-space: nowrap;
}
.bbs-table thead th {
  color: var(--Cyn); text-transform: lowercase; letter-spacing: .03em;
  border-color: var(--grn); background: rgba(22,188,196,.06);
}
.bbs-table tbody tr:nth-child(odd) td { background: rgba(43,180,76,.05); }
.bbs-table tbody tr:hover td { background: rgba(95,240,240,.08); color: var(--Grn); }
.bbs-table .num { text-align: right; color: var(--Grn); }

/* --- race / results domain helpers (shared by lifetime.html + results.html) --- */
.race-tag { border: 1px solid currentColor; padding: 0 8px; white-space: nowrap; font-size: .85em; }
.race-tag--three-hour { color: var(--Cyn); }
.race-tag--six-hour   { color: var(--Yel); }
.race-tag--last-cat   { color: var(--Mag); }
/* tint a number cell by the format it belongs to */
.bbs-table .num.fmt-3h { color: var(--Cyn); }   /* 3-Hour   */
.bbs-table .num.fmt-6h { color: var(--Yel); }   /* 6-Hour   */
.bbs-table .num.fmt-lc { color: var(--Mag); }   /* Last Cat */
/* number-cell roles */
.bbs-table .total { color: var(--Grn); }         /* headline / lifetime total */
.bbs-table .mi    { color: var(--gry); }         /* secondary miles figure    */
.bbs-table .dash  { color: var(--gry); }         /* "-" no-participation cell */
/* small caption + footnote text */
.sub { color: var(--gry); margin-top: .35em; }
.section-note { color: var(--gry); font-size: .85em; margin-top: 12px; }

/* =====================================================================
   7. FORMS (email signup, etc.)
   ===================================================================== */
.signup { margin-top: 22px; width: 100%; max-width: 440px; text-align: left; }
.signup .lead { color: var(--Cyn); text-align: center; }
.row { display: flex; gap: 8px; margin-top: 9px; }
.row input {
  flex: 1 1 auto; min-width: 0; font: inherit; color: var(--Grn);
  background: rgba(95,240,240,.05); border: 1px solid var(--grn);
  padding: 6px 11px; text-shadow: inherit; outline: none;
}
.row input::placeholder { color: var(--grn); opacity: .55; }
.row input:focus { border-color: var(--Cyn); background: rgba(95,240,240,.10); }
.row button {
  font: inherit; cursor: pointer; color: var(--blk); background: var(--Yel);
  border: 0; padding: 6px 18px; text-shadow: none; letter-spacing: .03em; white-space: nowrap;
}
.row button:hover { background: var(--Wht); }
.row button:disabled { opacity: .6; cursor: default; }
.note { color: var(--gry); font-size: .82em; margin-top: 8px; text-align: center; }
.err { color: var(--Red); text-align: center; margin-top: 10px; }

.thanks { border: 1px solid var(--Yel); padding: 13px 18px; margin-top: 22px; max-width: 440px; }
.thanks .h { color: var(--Yel); }

/* blinking block cursor: drop after any "live typing" line */
.cursor {
  display: inline-block; width: .5em; height: 1em; background: var(--Grn);
  vertical-align: -2px; box-shadow: 0 0 8px var(--Grn); margin-left: 3px;
  animation: bbs-blink 1.06s steps(1) infinite;
}
@keyframes bbs-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* =====================================================================
   8. FOOTER
   ===================================================================== */
.foot { color: var(--gry); margin-top: 24px; font-size: .85em; }
.foot a { color: var(--Cyn); text-decoration: none; }
.foot a:hover { background: var(--cyn); color: var(--blk); text-shadow: none; }

/* =====================================================================
   9. CRT OVERLAYS (scanlines, vignette, moving sweep)
   ===================================================================== */
.overlay {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px),
    radial-gradient(112% 112% at 50% 44%, transparent 48%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.9) 100%),
    radial-gradient(70% 50% at 30% 14%, rgba(255,255,255,.07) 0, transparent 60%);
}
.overlay::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
}
.sweep {
  position: absolute; left: -6%; right: -6%; top: 0; z-index: 5; height: 22%; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(120,255,160,.025) 42%,
    rgba(150,255,180,.06) 50%, rgba(120,255,160,.025) 58%, transparent 100%);
  filter: blur(2.5px); animation: bbs-sweep 13s linear infinite;
}
@keyframes bbs-sweep { 0% { top: -24%; } 100% { top: 108%; } }

/* =====================================================================
   10. ACCESSIBILITY + RESPONSIVE
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .screen, .sweep, .crt-monitor::after, .cursor { animation: none; }
  .sweep { display: none; }
}
@media (max-width: 620px) {
  .crt-monitor { width: 98vw; aspect-ratio: auto; height: 96vh; }
  .screen { font-size: clamp(15px, 4.2vw, 19px); }
  .fig { gap: 6px; }
  .figpart { font-size: clamp(8px, 3vw, 13px); }
  .row { flex-direction: column; }
  .row button { padding: 8px; }
  .bbs-nav { font-size: clamp(13px, 3.6vw, 17px); }
  .bbs-table th, .bbs-table td { padding: 5px 8px; }
}