/* ==========================================================================
   BellTimes.net — shared design system
   --------------------------------------------------------------------------
   One stylesheet for every page: tokens, themes, and components.
   Loaded by index.html, sscleichhardt.html, info/index.html and contact/index.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS (self-hosted so the app works offline)
   -------------------------------------------------------------------------- */

@font-face {
   font-family: 'Space Mono';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('../../fonts/spacemono-400.woff2') format('woff2');
}
@font-face {
   font-family: 'Space Mono';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('../../fonts/spacemono-700.woff2') format('woff2');
}
@font-face {
   font-family: 'Syne';
   font-style: normal;
   font-weight: 400 800;
   font-display: swap;
   src: url('../../fonts/syne-var.woff2') format('woff2');
}
@font-face {
   font-family: 'lektonregular';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: url('../../lektonregular.woff') format('woff');
}
@font-face {
   font-family: 'lektonbold';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: url('../../lektonbold.woff') format('woff');
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root {
   /* surfaces */
   --bg:            #050505;
   --bg-glow:       rgba(200, 240, 0, 0.10);
   --surface:       #0f0f0f;
   --surface-2:     #171717;
   --surface-3:     #1f1f1f;
   --border:        #262626;
   --border-strong: #383838;

   /* text */
   --text:       #f2f2f2;
   --text-muted: #9a9a9a;
   --text-dim:   #6b6b6b;
   --text-invert:#050505;

   /* accent */
   --accent:         #c8f000;
   --accent-soft:    rgba(200, 240, 0, 0.14);
   --accent-line:    rgba(200, 240, 0, 0.35);
   --accent-contrast:#0a0a0a;

   /* semantic */
   --ok:     #4ade80;
   --warn:   #fbbf24;
   --danger: #fb7185;

   /* geometry */
   --radius-sm: 6px;
   --radius:    10px;
   --radius-lg: 16px;
   --radius-pill: 999px;

   /* type */
   --font-display: 'Syne', 'lektonbold', system-ui, -apple-system, sans-serif;
   --font-mono: 'Space Mono', 'lektonregular', ui-monospace, monospace;
   --font-timer: 'Space Mono', 'lektonbold', ui-monospace, monospace;

   /* effects */
   --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
   --shadow-2: 0 18px 50px -20px rgba(0, 0, 0, 0.85);
   --grain-opacity: 0.45;
   --ring-width: 5px;

   /* motion */
   --ease: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-fast: cubic-bezier(0.4, 0, 0.2, 1);

   /* layout */
   --page-max: 1080px;
   --gutter: 24px;
}

[data-theme="ember"] {
   --bg: #140b05;  --bg-glow: rgba(255, 138, 61, 0.12);
   --surface: #1d1108; --surface-2: #26170b; --surface-3: #301d0e;
   --border: #3a2413; --border-strong: #52331a;
   --text: #fdeee0; --text-muted: #b39681; --text-dim: #7d6552;
   --accent: #ff8a3d; --accent-soft: rgba(255, 138, 61, 0.15);
   --accent-line: rgba(255, 138, 61, 0.38); --accent-contrast: #1a0d04;
}
[data-theme="neon"] {
   --bg: #0a0714;  --bg-glow: rgba(177, 140, 255, 0.13);
   --surface: #120d21; --surface-2: #1a1330; --surface-3: #241a40;
   --border: #2e2148; --border-strong: #402f66;
   --text: #ece7ff; --text-muted: #a396c4; --text-dim: #726590;
   --accent: #b18cff; --accent-soft: rgba(177, 140, 255, 0.16);
   --accent-line: rgba(177, 140, 255, 0.4); --accent-contrast: #120a24;
}
[data-theme="ocean"] {
   --bg: #050d14;  --bg-glow: rgba(56, 189, 248, 0.12);
   --surface: #0a1622; --surface-2: #0f1e2d; --surface-3: #142738;
   --border: #1b3548; --border-strong: #27485f;
   --text: #e2f1fb; --text-muted: #93b3c9; --text-dim: #64889f;
   --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, 0.15);
   --accent-line: rgba(56, 189, 248, 0.38); --accent-contrast: #04141f;
}
[data-theme="forest"] {
   --bg: #040e08;  --bg-glow: rgba(74, 222, 128, 0.10);
   --surface: #08150d; --surface-2: #0c1d13; --surface-3: #12271a;
   --border: #163523; --border-strong: #1f4a31;
   --text: #e2f7ea; --text-muted: #8fbaa1; --text-dim: #5f8a72;
   --accent: #4ade80; --accent-soft: rgba(74, 222, 128, 0.14);
   --accent-line: rgba(74, 222, 128, 0.36); --accent-contrast: #04150b;
}
[data-theme="rose"] {
   --bg: #12060a;  --bg-glow: rgba(251, 113, 133, 0.11);
   --surface: #1c0a10; --surface-2: #260d16; --surface-3: #31111c;
   --border: #421722; --border-strong: #5a202d;
   --text: #fce8ee; --text-muted: #c795a4; --text-dim: #8f6673;
   --accent: #fb7185; --accent-soft: rgba(251, 113, 133, 0.15);
   --accent-line: rgba(251, 113, 133, 0.36); --accent-contrast: #1a0509;
}
[data-theme="mono"] {
   --bg: #000000;  --bg-glow: rgba(255, 255, 255, 0.07);
   --surface: #0a0a0a; --surface-2: #141414; --surface-3: #1d1d1d;
   --border: #2a2a2a; --border-strong: #404040;
   --text: #ffffff; --text-muted: #a0a0a0; --text-dim: #707070;
   --accent: #ffffff; --accent-soft: rgba(255, 255, 255, 0.12);
   --accent-line: rgba(255, 255, 255, 0.3); --accent-contrast: #000000;
}
[data-theme="chalk"] {
   --bg: #f7f7f3;  --bg-glow: rgba(23, 23, 15, 0.05);
   --surface: #ffffff; --surface-2: #f1f1ea; --surface-3: #e8e8df;
   --border: #e0e0d6; --border-strong: #c8c8bb;
   --text: #14140f; --text-muted: #5f5f56; --text-dim: #8a8a7e;
   --accent: #17170f; --accent-soft: rgba(23, 23, 15, 0.07);
   --accent-line: rgba(23, 23, 15, 0.24); --accent-contrast: #f7f7f3;
   --grain-opacity: 0.2;
   --shadow-1: 0 1px 2px rgba(20, 20, 15, 0.07);
   --shadow-2: 0 18px 50px -24px rgba(20, 20, 15, 0.35);
}

/* --------------------------------------------------------------------------
   3. RESET + BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
   background-color: var(--bg);
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

body {
   margin: 0;
   padding: 0;
   min-height: 100vh;
   background-color: var(--bg);
   color: var(--text);
   font-family: var(--font-mono);
   font-size: 15px;
   line-height: 1.6;
   overflow-x: hidden;
   transition: background-color 0.3s var(--ease-fast), color 0.3s var(--ease-fast);
}

/* fine film grain so the flat colours don't band */
body::before {
   content: '';
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   opacity: var(--grain-opacity);
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

a { color: inherit; }

::selection {
   background: var(--accent);
   color: var(--accent-contrast);
}

:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
   border-radius: 3px;
}

.visually-hidden {
   position: absolute !important;
   width: 1px; height: 1px;
   margin: -1px; padding: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.page {
   position: relative;
   z-index: 1;
   max-width: var(--page-max);
   margin: 0 auto;
   padding: 56px var(--gutter) 88px;
}

.section {
   margin-top: 60px;
}

.section-label {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 18px;
   font-size: 0.66rem;
   font-weight: 700;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--accent);
}
.section-label::after {
   content: '';
   flex: 1;
   height: 1px;
   background: var(--border);
}
.section-label .count {
   color: var(--text-dim);
   font-weight: 400;
   letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */

.site-header {
   margin-bottom: 44px;
   /* Lift the header above the page content so the theme dropdown can
      escape it. Without this the menu is clipped by whatever comes
      later in the document. */
   position: relative;
   z-index: 30;
}

.header-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
   min-width: 0;
}

/* The block holding the wordmark and tagline must be allowed to shrink,
   otherwise the wordmark forces the header wider than the viewport on
   narrow screens. */
.header-top > * {
   min-width: 0;
}

.wordmark {
   display: inline-block;
   font-family: var(--font-display);
   font-size: clamp(1.9rem, 5.2vw, 3.1rem);
   font-weight: 800;
   letter-spacing: -0.035em;
   line-height: 1;
   color: var(--text);
   text-decoration: none;
   max-width: 100%;
   overflow-wrap: break-word;
}
.wordmark span { color: var(--accent); }

.site-tagline {
   margin: 18px 0 0;
   max-width: 52ch;
   font-size: 0.92rem;
   color: var(--text-muted);
   line-height: 1.65;
   overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   6. THEME PICKER
   -------------------------------------------------------------------------- */

.theme-picker { position: relative; flex-shrink: 0; }

.theme-trigger {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   height: 40px;
   padding: 0 14px 0 10px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-pill);
   color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 0.72rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   cursor: pointer;
   transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.theme-trigger:hover {
   border-color: var(--border-strong);
   color: var(--text);
}

.theme-swatch {
   width: 20px; height: 20px;
   border-radius: 50%;
   background: var(--accent);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
   flex-shrink: 0;
}

.theme-menu {
   position: absolute;
   top: calc(100% + 10px);
   right: 0;
   z-index: 40;
   min-width: 186px;
   /* The menu can be wider than its trigger; cap it to the viewport so it
      never hangs off the side of the screen on narrow layouts. */
   max-width: calc(100vw - 24px);
   padding: 6px;
   background: var(--surface-2);
   border: 1px solid var(--border-strong);
   border-radius: var(--radius);
   box-shadow: var(--shadow-2);
}
.theme-menu[hidden] { display: none; }

/* When there is not enough room below the trigger, open upward instead so
   the last option is never cut off by the bottom of the viewport. The
   script adds .theme-menu--up when it detects the overflow. */
.theme-menu--up {
   top: auto;
   bottom: calc(100% + 10px);
}

.theme-option {
   display: flex;
   align-items: center;
   gap: 11px;
   width: 100%;
   padding: 9px 11px;
   background: none;
   border: 0;
   border-radius: var(--radius-sm);
   color: var(--text-muted);
   font-family: var(--font-mono);
   font-size: 0.82rem;
   text-align: left;
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
}
.theme-option:hover { background: var(--surface-3); color: var(--text); }
.theme-option[aria-checked="true"] { color: var(--text); }
.theme-option[aria-checked="true"] .theme-option-name::after {
   content: '✓';
   margin-left: auto;
   color: var(--accent);
}

.theme-option-swatch {
   width: 16px; height: 16px;
   border-radius: 50%;
   flex-shrink: 0;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */

.bt-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   height: 40px;
   padding: 0 16px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-pill);
   color: var(--text);
   font-family: var(--font-mono);
   font-size: 0.78rem;
   letter-spacing: 0.04em;
   text-decoration: none;
   cursor: pointer;
   white-space: nowrap;
   transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
}
.bt-btn:hover {
   background: var(--surface-2);
   border-color: var(--border-strong);
}
.bt-btn:active { transform: translateY(1px); }

.bt-btn--accent {
   background: var(--accent);
   border-color: var(--accent);
   color: var(--accent-contrast);
   font-weight: 700;
}
.bt-btn--accent:hover {
   background: var(--accent);
   border-color: var(--accent);
   filter: brightness(1.08);
}

.bt-btn--ghost {
   background: transparent;
   border-color: transparent;
   color: var(--text-muted);
}
.bt-btn--ghost:hover {
   background: var(--surface-2);
   border-color: var(--border);
   color: var(--text);
}

.bt-btn--icon {
   width: 40px;
   padding: 0;
   font-size: 1rem;
}

.bt-btn__key {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 18px;
   height: 18px;
   padding: 0 4px;
   border: 1px solid var(--border-strong);
   border-radius: 4px;
   color: var(--text-dim);
   font-size: 0.62rem;
   line-height: 1;
}

/* --------------------------------------------------------------------------
   8. CARDS + LISTS
   -------------------------------------------------------------------------- */

.card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
}

.list {
   display: grid;
   gap: 8px;
}

.list-row {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 15px 18px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   color: var(--text);
   text-decoration: none;
   position: relative;
   overflow: hidden;
   transition: background 0.18s, border-color 0.18s, transform 0.18s var(--ease);
}
.list-row::before {
   content: '';
   position: absolute;
   left: 0; top: 0; bottom: 0;
   width: 3px;
   background: var(--accent);
   transform: scaleY(0);
   transform-origin: bottom;
   transition: transform 0.22s var(--ease);
}
.list-row:hover {
   background: var(--surface-2);
   border-color: var(--border-strong);
   transform: translateX(4px);
}
.list-row:hover::before { transform: scaleY(1); }

.list-row__main { flex: 1; min-width: 0; }

.list-row__title {
   display: block;
   font-size: 0.95rem;
   color: var(--text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.list-row__meta {
   display: block;
   margin-top: 2px;
   font-size: 0.72rem;
   color: var(--text-dim);
   letter-spacing: 0.03em;
}

.list-row__arrow {
   color: var(--text-dim);
   font-size: 0.9rem;
   transition: color 0.18s, transform 0.18s;
}
.list-row:hover .list-row__arrow { color: var(--accent); transform: translateX(3px); }

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */

.field { margin-bottom: 18px; }

.field-label {
   display: block;
   margin-bottom: 7px;
   font-size: 0.64rem;
   font-weight: 700;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--text-dim);
}

.bt-input,
.bt-textarea {
   width: 100%;
   padding: 12px 15px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   color: var(--text);
   font-family: var(--font-mono);
   font-size: 0.88rem;
   outline: none;
   transition: border-color 0.18s, background 0.18s;
   -webkit-appearance: none;
   appearance: none;
}
.bt-input::placeholder, .bt-textarea::placeholder { color: var(--text-dim); }
.bt-input:focus, .bt-textarea:focus {
   border-color: var(--accent);
   background: var(--surface-2);
}
.bt-textarea {
   min-height: 118px;
   resize: vertical;
   line-height: 1.7;
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
   position: relative;
   z-index: 1;
   margin-top: 72px;
   padding-top: 22px;
   border-top: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 10px;
   font-size: 0.72rem;
   color: var(--text-dim);
}
.site-footer a {
   color: var(--text-muted);
   text-decoration: none;
   transition: color 0.18s;
}
.site-footer a:hover { color: var(--accent); }

.footer-links {
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 6px;
}

/* --------------------------------------------------------------------------
   11. NOTE / CALLOUT
   -------------------------------------------------------------------------- */

.note {
   padding: 18px 22px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-left: 3px solid var(--accent);
   border-radius: var(--radius);
   font-size: 0.83rem;
   color: var(--text-muted);
   line-height: 1.75;
}
.note strong { color: var(--text); font-weight: 700; }

/* --------------------------------------------------------------------------
   12. MOTION
   -------------------------------------------------------------------------- */

@keyframes bt-fade-up {
   from { opacity: 0; transform: translateY(14px); }
   to   { opacity: 1; transform: translateY(0); }
}
@keyframes bt-fade-in {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* `backwards` rather than `both`: a lingering transform would keep the
   header a stacking context forever, trapping the theme dropdown inside
   it and letting later content (the school list) paint over the menu. */
.anim-up { animation: bt-fade-up 0.55s var(--ease) backwards; }

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
   }
}

/* --------------------------------------------------------------------------
   13. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
   :root { --gutter: 18px; }
   .page { padding: 36px var(--gutter) 64px; }
   .site-header { margin-bottom: 34px; }
   .section { margin-top: 48px; }
   .site-footer { margin-top: 56px; }
}

/* Very narrow screens: the wordmark needs to shrink a little more or it
   forces the page wider than the viewport. */
@media (max-width: 400px) {
   .wordmark { font-size: 1.6rem; }
}