/* ==========================================================
   Pierce Technical: site theme for the static tool pages
   (SQL Field Guide, SQL Practice Test, and future tools in public/).

   Load this AFTER the tool's own stylesheet. It swaps the tool's
   colors and fonts for the site's: glass panels over soft glows,
   Instrument Sans headings, Bricolage body, JetBrains Mono code.

   The values mirror src/styles/global.css. If you change a site
   color there, change it here too.
   ========================================================== */

/* ---------- Site tokens (same values as global.css) ---------- */
:root,
:root[data-theme='dark'] {
  color-scheme: dark;
  --site-bg: #17131a;
  --site-text: #f1eaec;
  --site-muted: #a99da6;
  --site-accent: #f0727b;
  --site-accent-hover: #ff8f96;
  --site-on-accent: #1a1218;
  --site-wash: rgb(240 114 123 / 0.14);

  --glow-1: rgb(240 114 123 / 0.40);
  --glow-2: rgb(139 92 246 / 0.34);
  --glow-3: rgb(56 189 248 / 0.20);
  --glass: rgb(255 255 255 / 0.06);
  --glass-strong: rgb(255 255 255 / 0.09);
  --glass-line: rgb(255 255 255 / 0.14);
  --glass-hi: rgb(255 255 255 / 0.16);
  --glass-shadow: rgb(0 0 0 / 0.6);
  --glass-sunk: rgb(0 0 0 / 0.22);
}

:root[data-theme='light'] {
  color-scheme: light;
  --site-bg: #fbf7f6;
  --site-text: #221a20;
  --site-muted: #6b5f66;
  --site-accent: #c73c4a;
  --site-accent-hover: #a92f3c;
  --site-on-accent: #ffffff;
  --site-wash: rgb(199 60 74 / 0.09);

  --glow-1: rgb(240 114 123 / 0.30);
  --glow-2: rgb(139 92 246 / 0.22);
  --glow-3: rgb(56 189 248 / 0.20);
  --glass: rgb(255 255 255 / 0.55);
  --glass-strong: rgb(255 255 255 / 0.72);
  --glass-line: rgb(60 30 45 / 0.10);
  --glass-hi: rgb(255 255 255 / 0.95);
  --glass-shadow: rgb(90 40 60 / 0.18);
  --glass-sunk: rgb(60 30 45 / 0.05);
}

/* ---------- Map site tokens onto each tool's own variable names ---------- */
:root,
:root[data-theme='dark'],
:root[data-theme='light'] {
  /* Side margin, same as --gutter in global.css. New tools: use
     var(--site-gutter) for left/right page padding instead of a number. */
  --site-gutter: clamp(1.5rem, 6vw, 2.5rem);

  --font-display: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, 'Cascadia Mono', monospace;

  /* Code blocks stay dark in both modes, like a terminal */
  --site-code-bg: #120f15;
  --site-code-ink: #ece4e8;

  /* SQL Field Guide names */
  --bg: var(--site-bg);
  --surface: var(--glass);
  --ink: var(--site-text);
  --muted: var(--site-muted);
  --line: var(--glass-line);
  --accent: var(--site-accent);
  --accent-soft: var(--site-wash);
  --code-bg: var(--site-code-bg);
  --code-ink: var(--site-code-ink);
  --kw: #f0727b;
  --str: #8fd3a8;
  --num: #f4b860;
  --cmt: #8a7f88;
  --jinja: #c4a7ff;
  --display: var(--font-display);
  --body: var(--font-body);
  --mono: var(--font-mono);

  /* SQL Practice Test names */
  --panel: var(--glass);
  --sunk: var(--glass-sunk);
  --fg: var(--site-text);
  --accent-ink: var(--site-on-accent);
  --code-fg: var(--site-code-ink);
  --syn-clause: #f0727b;
  --syn-kw: #c4a7ff;
  --syn-fn: #9fb8ff;
  --syn-str: #8fd3a8;
  --syn-num: #f4b860;
  --syn-com: #8a7f88;
  --syn-op: #d8cfd4;
  --f-display: var(--font-display);
  --f-body: var(--font-body);
  --f-mono: var(--font-mono);
}

/* ---------- Page background: the same fixed color glows as the site ---------- */
body {
  background: var(--site-bg);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36rem 30rem at 8% 6%, var(--glow-1), transparent 70%),
    radial-gradient(34rem 28rem at 92% 18%, var(--glow-2), transparent 70%),
    radial-gradient(42rem 30rem at 55% 92%, var(--glow-3), transparent 70%);
}
::selection { background: var(--site-accent); color: var(--site-on-accent); }

/* ---------- Headings: Instrument Sans, tight like the site ---------- */
h1, h2, h3, .part-name, .pcard h3, .fmt summary, .xplain h4 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}
h1, .part-name { font-weight: 700; letter-spacing: -0.04em; }
/* Small uppercase section labels (Field Guide). Font only, so their wide letter spacing stays. */
h4, .reft, .card-group, .an-group { font-family: var(--font-display); }

/* ---------- Site header (copy of the Astro header, not sticky here so
   it doesn't fight the tools' own sticky bars) ---------- */
.site-header {
  width: min(100% - 2 * clamp(1.5rem, 6vw, 2.5rem), 75rem);  /* same side margins as the page content */
  margin: 0.75rem auto 0;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-strong);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 12px 30px -14px var(--glass-shadow);
  font-family: var(--font-display); /* matches the main site's header */
  font-size: 1.0625rem;
  line-height: 1.6;
}
.site-header .sh-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding-inline: 0.9rem 0.5rem;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  color: var(--site-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.site-header .brand:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 4px; border-radius: 10px; }
.site-header nav ul { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.site-header nav a {
  position: relative;
  display: block;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  color: var(--site-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms, background-color 160ms;
}
.site-header nav a:hover { color: var(--site-text); background: var(--glass-strong); }
.site-header nav a[aria-current='page'] { color: var(--site-text); }
.site-header nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.05rem;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--site-accent);
}
.site-header .theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass);
  color: var(--site-text);
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 160ms;
}
.site-header .theme-toggle:hover { transform: scale(1.1) rotate(15deg); border-color: var(--site-accent); }
.site-header .theme-toggle svg { grid-area: 1 / 1; transition: opacity 320ms, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-theme='dark'] .site-header .moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
[data-theme='light'] .site-header .sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
.site-header :focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }
/* Practice Test has no top padding of its own under the header */
.site-header + .wrap { margin-top: 1.75rem; }

/* Fixed sizes so a narrow phone can't squeeze the badge or the theme button to nothing */
.site-header .brand, .site-header .theme-toggle { flex: none; }
.site-header .pt-mark { width: 30px; height: 30px; max-width: none; }

@media (max-width: 34rem) {
  .site-header .brand span { display: none; }
  .site-header .sh-bar { gap: 0.5rem; }
  .site-header nav ul { gap: 0; }
  .site-header nav a { padding-inline: 0.5rem; }
}
/* Smallest phones (under ~370px): tighten the header so the theme button stays inside the pill */
@media (max-width: 23rem) {
  .site-header .sh-bar { gap: 0.4rem; padding-inline: 0.6rem 0.35rem; }
  .site-header nav a { padding-inline: 0.4rem; font-size: 1rem; }
  .site-header .theme-toggle { width: 2.25rem; height: 2.25rem; }
}

/* ---------- Glass panels ----------
   Blur only on the few big surfaces. The Field Guide has hundreds of
   cards, and blurring each one slows scrolling on phones. Small cards
   get the see-through fill and bright top edge without the blur. */
.card, .term, .pcard, .anat, .order, .tbl, .jdemo, .schema,
.stat, .seg, .fmt, section.intro, .isteps li, .keys, .xstep, .xsub {
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.schema, .stat, .seg, .fmt, section.intro,
.grid .card, .rail .card {
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 34px -20px var(--glass-shadow);
}

/* Rounder corners, like the site */
.card, .term, .pcard, .anat, .order, .tbl, .jdemo, section.intro, .fmt { border-radius: 14px; }
.schema { border-radius: 12px; }

/* Field Guide sticky filter bar becomes frosted glass */
.bar {
  background: color-mix(in srgb, var(--site-bg) 55%, transparent);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border-bottom-color: var(--glass-line);
}
/* The strip behind a phone's notch uses the page color */
body::before { background: var(--site-bg); }

/* Inputs and selects sit on glass too */
.search, .jump, select {
  background: var(--glass-strong);
  border-color: var(--glass-line);
  color: var(--site-text);
}
select option { background: var(--site-bg); color: var(--site-text); }

/* Table headers in the guide used the page color; make them faint glass */
.tbl th { background: var(--glass-sunk); }

/* ---------- Buttons and chips: pill shapes and the site's "pop" hover ---------- */
.chip, .btn, .helpbtn, .fbtn, .next, .peek {
  border-radius: 999px;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 160ms, border-color 160ms, color 160ms;
}
.chip:hover, .btn:not(:disabled):hover, .helpbtn:not(:disabled):hover, .fbtn:hover, .next:hover {
  transform: translateY(-2px) scale(1.04);
}
.chip:active, .btn:not(:disabled):active, .helpbtn:not(:disabled):active { transform: scale(0.97); }

.chip { background: var(--glass); border-color: var(--glass-line); }
.chip:hover { border-color: var(--site-accent); color: var(--site-text); }
.chip[aria-pressed='true'] {
  background: var(--site-accent);
  border-color: var(--site-accent);
  color: var(--site-on-accent);
}

.btn { background: var(--glass-strong); border-color: var(--glass-line); }
.btn:hover { border-color: var(--site-accent); }
.btn.primary { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-on-accent); }
.btn.primary:not(:disabled):hover { background: var(--site-accent-hover); border-color: var(--site-accent-hover); filter: none; }
.btn.ghost { background: transparent; }

.seg { border-radius: 999px; }
.seg button { border-radius: 999px; }

.fbtn {
  background: var(--glass-strong);
  border-color: var(--glass-line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 24px -12px var(--glass-shadow);
}
.fbtn-back { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-on-accent); }

/* Guide's copy button on dark code blocks */
.copy {
  border-color: rgb(255 255 255 / 0.16);
  background: rgb(255 255 255 / 0.08);
  color: var(--site-code-ink);
  border-radius: 999px;
}
.copy:hover { background: rgb(255 255 255 / 0.16); }

/* Section dividers in the guide were solid ink; use the accent */
.part { border-top-color: var(--site-accent); }

/* Editor gutter and line numbers in the practice test */
.code { border-color: rgb(255 255 255 / 0.08); }
.gutter, pre.excerpt .ln { color: #7d7178; }

/* ---------- Visitors who turn off transparency get solid panels ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme='dark'] { --glass: #211b24; --glass-strong: #2a222e; --glass-sunk: #1d1820; }
  :root[data-theme='light'] { --glass: #ffffff; --glass-strong: #f4ecec; --glass-sunk: #f8f2f2; }
  body::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chip, .btn, .helpbtn, .fbtn, .next, .peek, .site-header *, .site-header .theme-toggle svg {
    transition: none !important;
  }
  .chip:hover, .btn:hover, .helpbtn:hover, .fbtn:hover, .next:hover, .site-header .theme-toggle:hover { transform: none !important; }
}

/* Show code exactly as typed. JetBrains Mono would otherwise draw >= as one
   "≥" symbol, which misleads someone learning what to type. */
code, kbd, pre, textarea, .hl, .tag, .tname, .cname, .schema, .an-name, .card h3 {
  font-variant-ligatures: none;
  font-feature-settings: 'calt' 0, 'liga' 0;
}

/* ---------- Site badge (terminal prompt with hidden P and T) ----------
   Ink follows the text color; the cursor uses the accent red.
   Hover or keyboard focus on the brand link draws the hidden letters:
   P stem and T bar first, then the T stem, then the P bowl. */
.pt-mark { display: block; flex: none; overflow: visible; }
.pt-ghost path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 350ms ease;
}
.brand:hover .pt-ghost path,
.brand:focus-visible .pt-ghost path { stroke-dashoffset: 0; }
.brand:hover .pt-g2, .brand:focus-visible .pt-g2 { transition-delay: 300ms; }
.brand:hover .pt-g3, .brand:focus-visible .pt-g3 { transition-delay: 550ms; }
.pt-dim { fill: currentColor; opacity: 0.35; }
.pt-chev { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.pt-ink { fill: currentColor; }
.pt-cursor path { fill: none; stroke: var(--site-accent); stroke-width: 6; stroke-linecap: round; }
.pt-cursor circle { fill: var(--site-accent); }
@media (prefers-reduced-motion: reduce) {
  .brand:hover .pt-ghost path,
  .brand:focus-visible .pt-ghost path { transition-delay: 0s; }
}