/* ============================================================================
   Dr. Ijezie's STEM Studio — Architect / Blueprint Theme  (v9)
   ----------------------------------------------------------------------------
   A LIGHT-FIRST override layer. Loads AFTER global.css + design-tokens.css
   (injected by shared.js), so it is the final cascade layer. It re-skins the
   ~90 existing pages to a refined, high-school-grade "architect / blueprint"
   look without touching individual HTML files.

   Strategy:
     1. Import display + mono typefaces (Outfit is already loaded for body).
     2. Re-point every DARK variable in global.css + design-tokens.css to the
        light architect palette, so token-driven UI flips automatically.
     3. Re-skin the structural classes (header, nav, cards, buttons, badges,
        footer, hero) for the light theme.
     4. Provide reusable utilities (.eyebrow, .panel, .blueprint-rule, .stat).
     5. Override the dark JS-injected inline-styled widgets (SFX toggle, cookie
        banner, feedback modal) for light surfaces.
     6. Optional [data-theme="dark"] variants for a future toggle. Light = default.

   WCAG AA targeted on all text/background pairs.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* ============================================================
   1. PALETTE + TOKEN REMAP
   ============================================================ */
:root {
  /* ---- Architect palette (canonical) ---- */
  --paper:        #F7F6F2;
  --surface:      #FFFFFF;
  --recessed:     #ECEAE3;
  --ink:          #1B2A4A;
  --ink-2:        #44506B;
  --muted:        #5C6473;   /* darkened from #707A8C -> ~4.6:1 on paper (WCAG AA) */
  --line:         rgba(27,42,74,.10);
  --line-strong:  rgba(27,42,74,.20);
  --accent:       #1C4E80;
  --accent-bright:#2E73C4;

  /* ---- Per-course hues ---- */
  --c-alg1: #1C6DD0;   /* Algebra I   — architect blue   */
  --c-geo:  #0E8A6B;   /* Geometry    — drafting green   */
  --c-alg2: #6D49C4;   /* Algebra II  — violet           */
  --c-sci:  #B7791F;   /* Science     — amber (archive)  */

  /* ---- Tints for badges / soft fills (light theme) ---- */
  --c-alg1-tint: rgba(28,109,208,.12);
  --c-geo-tint:  rgba(14,138,107,.12);
  --c-alg2-tint: rgba(109,73,196,.12);
  --c-sci-tint:  rgba(183,121,31,.14);
  --accent-tint: rgba(28,78,128,.10);

  /* ---- Typography stacks ---- */
  --font-display: 'Space Grotesk', 'Outfit', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Soft elevation (architect = quiet shadows) ---- */
  --arch-shadow-sm: 0 1px 2px rgba(27,42,74,.05), 0 1px 3px rgba(27,42,74,.06);
  --arch-shadow-md: 0 4px 14px rgba(27,42,74,.07), 0 2px 6px rgba(27,42,74,.05);
  --arch-shadow-lg: 0 14px 38px rgba(27,42,74,.10), 0 4px 12px rgba(27,42,74,.06);

  /* ============================================================
     REMAP — global.css dark variables -> light architect
     ============================================================ */
  --dark-bg:        var(--paper);
  --dark-card:      var(--surface);
  --dark-border:    var(--line);
  --header-bg:      var(--surface);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--muted);
  --glass-bg:       var(--surface);
  --glass-border:   var(--line);
  --glass-hover-border: var(--line-strong);
  --glass-hover-shadow: rgba(27,42,74,.10);

  /* Keep neon accent vars defined (legacy refs) but soften to architect hues
     so any leftover usage reads as calm accents, not glow. */
  --neon-purple: var(--c-alg2);
  --neon-blue:   var(--accent-bright);
  --neon-pink:   #C2557A;
  --neon-green:  var(--c-geo);
  --neon-gold:   var(--c-sci);
  --neon-cyan:   #1C8FA8;
  --neon-red:    #C0473B;

  /* ============================================================
     REMAP — design-tokens.css (--ah-*) dark stack -> light
     ============================================================ */
  --ah-surface-0:    var(--paper);
  --ah-surface-1:    var(--surface);
  --ah-surface-2:    var(--surface);
  --ah-surface-3:    var(--surface);
  --ah-surface-blur: 0px;
  --ah-surface-ring: inset 0 0 0 1px var(--line);

  --ah-accent:     var(--accent);
  --ah-accent-2:   var(--accent-bright);
  --ah-accent-ink: #FFFFFF;
  --ah-glow:       rgba(28,78,128,.16);

  --ah-text-1:        var(--ink);
  --ah-text-2:        var(--ink-2);
  --ah-text-3:        var(--muted);
  --ah-text-on-accent:#FFFFFF;

  --ah-elev-1:     var(--arch-shadow-sm);
  --ah-elev-2:     var(--arch-shadow-md);
  --ah-elev-3:     var(--arch-shadow-lg);
  --ah-glow-soft:  var(--arch-shadow-sm);
  --ah-glow-hard:  var(--arch-shadow-md);
  --ah-ring:       0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* Theme hooks read by design-tokens.css */
  --theme-accent:  var(--accent);
  --theme-accent2: var(--accent-bright);
  --theme-text:    var(--ink);
  --theme-text2:   var(--ink-2);
  --theme-glow:    rgba(28,78,128,.16);
}

/* ============================================================
   2. BASE — paper background + subtle blueprint grid
   ============================================================ */
html { background: var(--paper); }

body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink);
  /* Subtle blueprint graph-paper grid (24px), very light hairlines.
     Replaces the dark radial gradients from global.css. */
  background-image:
    repeating-linear-gradient(to right,  var(--line) 0, var(--line) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 24px);
  background-size: 24px 24px;
  background-attachment: fixed;
  background-position: 0 0;
}

/* Tailwind's .text-white sits on <body> in most pages — force ink. */
body.text-white { color: var(--ink); }

/* General readability: default body copy + list/table text -> ink-2.
   (Headings get the strong ink below.) */
body p, body li, body td, body th, body dd, body dt,
body figcaption, body blockquote {
  color: var(--ink-2);
}

/* Common inline "color: white" pattern in existing pages — pull to ink so
   light backgrounds stay legible. Scoped to body to keep specificity sane. */
body [style*="color: white"],
body [style*="color:#fff"],
body [style*="color: #fff"],
body [style*="color:white"] {
  color: var(--ink) !important;
}

/* Gradient text helpers from global.css become calm solid accents. */
.gradient-text,
.gradient-text-gold,
.gradient-text-green {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--accent);
}
.gradient-text-gold  { color: var(--c-sci); }
.gradient-text-green { color: var(--c-geo); }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.page-hero h1,
.section-heading h2 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.font-breathing { font-family: var(--font-display) !important; }

/* Logo + footer brand: replace Breathing cursive with Space Grotesk. */
.header-logo-text,
.footer-brand-name {
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.header-logo-sub {
  font-family: var(--font-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ============================================================
   4. STRUCTURE — header / nav
   ============================================================ */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--arch-shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header-logo img {
  border: 2px solid var(--accent);
  background: var(--surface);
}

.nav-link {
  color: var(--ink-2);
  font-family: var(--font-body);
}
.nav-link:hover,
.nav-link.active {
  color: var(--accent);
}

/* Dropdown — white surface, hairline, soft shadow (NOT dark). */
.nav-dropdown {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--arch-shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-dropdown a { color: var(--ink-2); }
.nav-dropdown a:hover {
  color: var(--accent);
  background: var(--accent-tint);
}

/* Mobile slide-in panel — light surface. */
@media (max-width: 768px) {
  .nav-container {
    background: var(--surface);
    border-left: 1px solid var(--line);
    backdrop-filter: none;
  }
  .nav-link {
    border-bottom: 1px solid var(--line);
  }
  .nav-item.expanded > .nav-link { color: var(--accent); }
  .nav-divider {
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  }
}

.mobile-toggle span { background: var(--ink); }

/* ============================================================
   5. CARDS / SURFACES
   ============================================================ */
.glass-card,
.glass-card-static {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--arch-shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.glass-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--arch-shadow-lg);
}

/* Neutralize neon glow utilities — architect light has no glow. */
.neon-glow,
.neon-glow-blue,
.neon-glow-green,
.neon-glow-pink,
.neon-glow-gold {
  box-shadow: var(--arch-shadow-md) !important;
}

/* The iframe wrapper background should be paper, not void. */
.iframe-container {
  border: 1px solid var(--line);
  background: var(--surface);
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-family: var(--font-body);
}
.btn-primary:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: var(--arch-shadow-md);
}

.btn-secondary {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-family: var(--font-body);
}
.btn-secondary:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ============================================================
   7. BADGES — light tints on per-course / accent hues
   ============================================================ */
.badge {
  font-family: var(--font-mono);
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.badge-purple { background: var(--c-alg2-tint); color: var(--c-alg2); }
.badge-blue   { background: var(--c-alg1-tint); color: var(--c-alg1); }
.badge-green  { background: var(--c-geo-tint);  color: var(--c-geo);  }
.badge-pink   { background: var(--c-alg2-tint); color: var(--c-alg2); }
.badge-gold   { background: var(--c-sci-tint);  color: var(--c-sci);  }
.badge-red    { background: rgba(192,71,59,.12); color: #A23A30; }

/* ============================================================
   8. FOOTER
   ============================================================ */
.site-footer {
  background: var(--recessed);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.footer-brand-desc { color: var(--ink-2); }
.footer-heading {
  font-family: var(--font-mono);
  color: var(--muted);
}
.footer-links a { color: var(--ink-2); }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--line); }
.footer-copy { color: var(--muted); }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--accent); }
.footer-attribution {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 0.6rem;
}
.footer-attribution a { color: var(--accent); text-decoration: underline; }

/* Footer feedback button -> architect accent (override dark/gold). */
.footer-feedback-btn {
  border: 1px solid var(--accent) !important;
  background: var(--accent-tint) !important;
  color: var(--accent) !important;
  font-family: var(--font-body) !important;
  border-radius: 8px !important;
}
.footer-feedback-btn:hover {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
}

/* ============================================================
   9. PAGE HERO + SECTION HEADINGS
   ============================================================ */
.page-hero h1 {
  font-family: var(--font-display);
  color: var(--ink);
}
.page-hero p { color: var(--ink-2); }

.section-heading h2 { font-family: var(--font-display); color: var(--ink); }
.section-heading p  { color: var(--ink-2); }
.section-heading-icon {
  background: var(--accent-tint) !important;
  color: var(--accent);
}

/* ============================================================
   10. REUSABLE ARCHITECT UTILITIES
   ============================================================ */

/* .eyebrow — mono uppercase accent label */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/* .panel — hairline card on surface, soft shadow */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--arch-shadow-sm);
  padding: 1.5rem;
}
.panel--recessed { background: var(--recessed); box-shadow: none; }

/* .blueprint-rule — thin ruled divider with a small tick, drafting feel */
.blueprint-rule {
  border: 0;
  height: 1px;
  background: var(--line-strong);
  margin: 2rem 0;
}
.blueprint-rule--ticked {
  position: relative;
  background: var(--line);
}
.blueprint-rule--ticked::before {
  content: "";
  position: absolute;
  left: 0; top: -3px;
  width: 40px; height: 7px;
  border-left: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}

/* .stat — figure + label pairing (mono label) */
.stat { display: flex; flex-direction: column; gap: 0.15rem; }
.stat__figure {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Per-course accent helpers (apply to a wrapper to theme accents within). */
.course-alg1 { --accent: var(--c-alg1); --accent-bright: #3D86E0; --accent-tint: var(--c-alg1-tint); }
.course-geo  { --accent: var(--c-geo);  --accent-bright: #16A582; --accent-tint: var(--c-geo-tint);  }
.course-alg2 { --accent: var(--c-alg2); --accent-bright: #845FDB; --accent-tint: var(--c-alg2-tint); }
.course-sci  { --accent: var(--c-sci);  --accent-bright: #D08F2E; --accent-tint: var(--c-sci-tint);  }

/* ============================================================
   11. OVERRIDE JS-INJECTED DARK WIDGETS  (light surfaces)
   ============================================================ */

/* SFX toggle button (shared.js #ah-sfx-toggle) */
#ah-sfx-toggle {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  box-shadow: var(--arch-shadow-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Cookie consent banner (shared.js #cookie-consent-banner) */
#cookie-consent-banner {
  background: var(--surface) !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 -6px 24px rgba(27,42,74,.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#cookie-consent-banner p { color: var(--ink-2) !important; }
#cookie-consent-banner p a { color: var(--accent) !important; }
#cookie-consent-banner #consent-decline {
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: var(--ink-2) !important;
}
#cookie-consent-banner #consent-accept {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--accent) !important;
}

/* Feedback modal (footer-template.js .dji-fb-*) */
.dji-fb-backdrop {
  background: rgba(27,42,74,.45) !important;
}
.dji-fb-modal {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--arch-shadow-lg) !important;
  color: var(--ink) !important;
}
.dji-fb-header { border-bottom: 1px solid var(--line) !important; }
.dji-fb-title {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
}
.dji-fb-sub { color: var(--muted) !important; }
.dji-fb-close { color: var(--muted) !important; }
.dji-fb-close:hover { background: rgba(192,71,59,.10) !important; color: #A23A30 !important; }
.dji-fb-label { color: var(--ink-2) !important; }
.dji-fb-hint  { color: var(--muted) !important; }
.dji-fb-select,
.dji-fb-input,
.dji-fb-textarea {
  background: var(--paper) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink) !important;
}
.dji-fb-select:focus,
.dji-fb-input:focus,
.dji-fb-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-tint) !important;
}
.dji-fb-footer { border-top: 1px solid var(--line) !important; }
.dji-fb-btn-ghost {
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line-strong) !important;
}
.dji-fb-btn-ghost:hover { background: var(--recessed) !important; }
.dji-fb-btn-primary {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  box-shadow: var(--arch-shadow-sm) !important;
}
.dji-fb-btn-primary:hover:not([disabled]) {
  background: var(--accent-bright) !important;
  box-shadow: var(--arch-shadow-md) !important;
}
.dji-fb-status { color: var(--muted) !important; }
.dji-fb-status.ok  { color: var(--c-geo) !important; }
.dji-fb-status.err { color: #A23A30 !important; }
.dji-fb-identity {
  background: var(--paper) !important;
  border-left: 3px solid var(--accent) !important;
  color: var(--ink-2) !important;
}

/* ============================================================
   12. ACCESSIBILITY MODE — keep usable on light bg
   ============================================================ */
body.a11y-high-contrast .glass-card,
body.a11y-high-contrast .glass-card-static {
  background: var(--surface) !important;
  border-color: var(--ink) !important;
}

/* ============================================================
   13. OPTIONAL DARK MODE  (future toggle; light is default)
   Set <html data-theme="dark"> to activate.
   ============================================================ */
[data-theme="dark"] {
  --paper:        #0F1626;
  --surface:      #16203A;
  --recessed:     #0B1120;
  --ink:          #E8ECF4;
  --ink-2:        #B6C0D4;
  --muted:        #8593AB;
  --line:         rgba(232,236,244,.10);
  --line-strong:  rgba(232,236,244,.20);
  --accent:       #5B9BE0;
  --accent-bright:#7DB2EA;

  --c-alg1-tint: rgba(91,155,224,.18);
  --c-geo-tint:  rgba(22,165,130,.18);
  --c-alg2-tint: rgba(132,95,219,.18);
  --c-sci-tint:  rgba(208,143,46,.18);
  --accent-tint: rgba(91,155,224,.16);

  /* re-point the remapped dark/ah tokens to the new dark palette */
  --dark-bg: var(--paper);
  --surface: var(--surface);
  --header-bg: var(--surface);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--muted);
  --glass-bg: var(--surface);
  --glass-border: var(--line);
  --dark-card: var(--surface);
  --dark-border: var(--line);

  --ah-surface-0: var(--paper);
  --ah-surface-1: var(--surface);
  --ah-surface-2: var(--surface);
  --ah-surface-3: var(--surface);
  --ah-text-1: var(--ink);
  --ah-text-2: var(--ink-2);
  --ah-text-3: var(--muted);
  --ah-accent: var(--accent);
  --ah-accent-2: var(--accent-bright);
  --theme-text: var(--ink);
  --theme-text2: var(--ink-2);
  --theme-accent: var(--accent);
  --theme-accent2: var(--accent-bright);
}

[data-theme="dark"] body {
  /* dim the blueprint grid on dark */
  background-image:
    repeating-linear-gradient(to right,  var(--line) 0, var(--line) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 24px);
}
[data-theme="dark"] body [style*="color: white"],
[data-theme="dark"] body [style*="color:#fff"],
[data-theme="dark"] body [style*="color: #fff"],
[data-theme="dark"] body [style*="color:white"] {
  color: var(--ink) !important;
}
[data-theme="dark"] .site-header,
[data-theme="dark"] .nav-dropdown,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .glass-card-static,
[data-theme="dark"] .panel { background: var(--surface); }
[data-theme="dark"] .site-footer { background: var(--recessed); }
[data-theme="dark"] .btn-primary { color: #0F1626; }

/* ============================================================
   14. MOTION RESPECT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .glass-card:hover,
  .btn-primary:hover,
  .btn-secondary:hover { transform: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      scroll-behavior: auto !important; }
}

/* ============================================================
   15. ACCESSIBILITY — skip link + visible focus (disabled-friendly)
   Loaded site-wide via shared.js. These are ADDITIVE and safe on every
   page (light or intentional-dark) — they only add a focus ring + a
   keyboard skip target, never recolor content.
   ============================================================ */

/* Skip-to-content link — visually hidden until keyboard-focused. */
.skip-link {
  position: fixed;
  left: 12px;
  top: -64px;
  z-index: 4000;
  background: var(--accent);
  color: #FFFFFF;
  padding: 11px 18px;
  border-radius: 0 0 10px 10px;
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--arch-shadow-md);
  transition: top .16s ease;
}
.skip-link:focus { top: 0; outline: 3px solid #FFFFFF; outline-offset: -3px; }

/* Visible keyboard focus on every interactive element (0 focus rules existed). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.nav-link:focus-visible,
.mobile-toggle:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On dark/immersive pages a blue ring still reads; bump contrast there. */
[data-theme="dark"] :focus-visible { outline-color: #8Fc0ff; }

/* Keyboard-open dropdowns on desktop (mouse uses :hover; keyboard needs this). */
@media (min-width: 769px) {
  .nav-item.has-dropdown:focus-within > .nav-dropdown,
  .nav-item.has-dropdown.expanded > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================================
   16. CROSS-PAGE LEGACY CLASS REPAIRS (light theme)
   These class names recur ONLY on the light "science" pages (never on the
   intentional-dark game/sim pages), so correcting them globally is safe.
   architect-tokens.css is injected AFTER each page's inline <style>, so
   these win the cascade.
   ============================================================ */

/* science timeline "type" pills — were light-on-light neon (#93c5fd etc.) */
.type-content      { background: var(--c-alg1-tint) !important; color: var(--c-alg1) !important; }
.type-project      { background: var(--c-alg2-tint) !important; color: var(--c-alg2) !important; }
.type-break        { background: var(--recessed)    !important; color: var(--ink-2)  !important; }
.type-capstone     { background: var(--c-geo-tint)  !important; color: var(--c-geo)  !important; }
.type-sub-content,
.type-sub-project  { background: var(--c-sci-tint)  !important; color: #8A5A12       !important; }

/* glass "quick link" cards — were rgba(255,255,255,.1) fills that vanish on paper */
.quick-link-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--arch-shadow-sm) !important;
}
.quick-link-card:hover {
  border-color: var(--line-strong) !important;
  box-shadow: var(--arch-shadow-lg) !important;
}