/* ==========================================================================
   LearnSQL — shared design system
   Modern clean/light. One accent, strong type, subtle borders.
   Every page extends templates/base.html and inherits these tokens.
   ========================================================================== */

:root {
  /* LearnSQL maps its component tokens onto the canonical CPE Today tokens in
     brand.css. Brand tokens (--accent blue, --cta orange, --bg/--bg-elev/
     --surface/--surface-2, --border(-strong), --font-*, --radius, --container)
     are already theme-aware, so these follow the theme automatically; the
     *-soft tints use color-mix so they re-tint per theme too.
     Never hardcode a brand hex here — reference the token. */

  /* Accent (blue) — links, highlights, active states. */
  --accent-dark:   var(--blue-600);
  --accent-soft:   color-mix(in srgb, var(--accent) 14%, var(--surface));
  --accent-ring:   color-mix(in srgb, var(--accent) 42%, transparent);

  /* Secondary accent for data-viz / dashboards (brand cyan). */
  --accent2:       var(--cyan-400);
  --accent2-dark:  #0e7490;
  --accent2-soft:  color-mix(in srgb, var(--cyan-400) 16%, var(--surface));

  /* Text + surfaces → brand tokens. */
  --ink:           var(--text);
  --body:          var(--text-2);
  --faint:         var(--muted);
  --bg-soft:       var(--bg-elev);
  --bg-sunken:     var(--surface-2);
  --line:          var(--border);
  --line-strong:   var(--border-strong);

  /* Status colours (not brand tokens; warn uses the brand --star amber). */
  --ok:            #16a34a;
  --ok-soft:       color-mix(in srgb, var(--ok) 15%, var(--surface));
  --warn:          var(--star);
  --warn-soft:     color-mix(in srgb, var(--star) 18%, var(--surface));
  --danger:        #ef4444;

  /* Code surface (kept dark in both themes). */
  --code-bg:       #0b1120;
  --code-ink:      #e2e8f0;
  --code-comment:  #7dd3fc;
  --code-keyword:  #c4b5fd;
  --code-string:   #6ee7b7;
  --code-num:      #fca5a5;

  /* Depth, layout, type — from brand where defined. */
  --shadow-sm:     0 1px 2px rgba(2,6,23,.10);
  --shadow-md:     var(--shadow);
  --shadow-lg:     var(--shadow);
  --nav-bg:        var(--header-bg);
  /* ---- Page width: exactly two, and NEITHER may exceed the chrome ----------
     <cpe-header>/<cpe-footer> cap their content at var(--container) = 1200px.
     Any page shell wider than that visibly overhangs the header and footer and
     reads as "blown out" — which is what a 1360px shell used to do here, back
     when we had our own 1360px nav. Every page shell must use one of these:
       --maxw        app / wide layouts (editor, playground, schema, docs)
       --maxw-prose  reading layouts (guides, samples, FAQ)  */
  --maxw:          var(--container);
  --maxw-prose:    900px;
  /* Height of the sticky <cpe-header>: 13px pad + 34px logo + 13px + 1px border.
     Sticky sub-bars key off this so they never slide under the header. The
     component shrinks at its 1100px breakpoint, so this tracks it below. */
  --header-h:      61px;
  --font:          var(--font-body);
  --mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* ---- Type scale -------------------------------------------------------
     ONE ladder for the whole site. Page styles must reference these instead
     of inventing near-duplicate sizes (.85/.86/.88/.9/.92/.94rem all render
     within a pixel of each other and just read as sloppy). Headings use
     clamp() so they scale down on phones without a media query. */
  --fs-2xs:  0.72rem;   /* micro: uppercase labels, badges, kbd */
  --fs-xs:   0.8rem;    /* captions, notes, meta, table meta */
  --fs-sm:   0.875rem;  /* secondary text, table cells, chips */
  --fs-base: 1rem;      /* body copy */
  --fs-lg:   1.125rem;  /* lead paragraphs, large buttons */
  --fs-xl:   1.25rem;   /* h3 / card titles */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Never let a page scroll sideways. `clip` (not `hidden`) avoids creating a
   scroll container, so the sticky nav keeps working. */
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: clip; }

body {
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

/* Form controls follow the theme by default (pages may override). */
select, input, textarea { color: var(--ink); background-color: var(--surface); }

/* "Show all N rows" reveal button under result tables */
.show-more { display: block; width: 100%; margin-top: 10px; padding: 10px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 9px; color: var(--accent-dark); font-weight: 650;
  cursor: pointer; font-family: var(--font); font-size: .88rem; }
.show-more:hover { background: var(--accent-soft); }

/* The light/dark theme toggle lives inside the shared <cpe-footer> (brand.js,
   `theme-toggle` attribute); there's no floating control bar. */

/* Autocomplete dropdown (SQL editor + sandbox) */
.ac-wrap { position: relative; }
.ac-menu {
  position: fixed; z-index: 70; min-width: 190px; max-height: 230px; overflow: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 9px;
  box-shadow: var(--shadow-md); font-family: var(--mono); font-size: 13px; padding: 4px; display: none;
}
.ac-menu.open { display: block; }
.ac-item {
  padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; white-space: nowrap;
}
.ac-item .kind { color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.ac-item.active, .ac-item:hover { background: var(--accent-soft); color: var(--accent-dark); }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; font-weight: 750; letter-spacing: -0.02em;
  font-family: var(--font-display); text-wrap: balance; }
/* Lower clamp floors so long headings don't overflow narrow phones. */
h1 { font-size: clamp(1.85rem, 5.2vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); }
h3 { font-size: var(--fs-xl); font-weight: 700; }
h4 { font-size: var(--fs-base); }
p  { margin: 0.6em 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.section { padding: 72px 0; }
.section-soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.eyebrow {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.lead { font-size: var(--fs-lg); color: var(--muted); max-width: 640px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---- Top navigation ------------------------------------------------------ */
/* Chrome is the shared <cpe-header> web component (brand.js). It owns its own
   markup/styling via shadow DOM and inherits the brand tokens; we only make it
   stick to the top of the viewport. --header-bg drives its translucent bar. */
cpe-header {
  display: block; position: sticky; top: 0; z-index: 50;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-weight: 650; font-size: .98rem; padding: 12px 22px; border-radius: 10px;
  border: 1px solid transparent; transition: transform .12s, background .15s, box-shadow .15s;
  text-decoration: none; line-height: 1;
}
.btn:hover { text-decoration: none; }
/* Primary product actions use the blue accent. */
.btn-primary { background: var(--accent); color: var(--accent-ink, #fff); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--accent-ink, #fff); }
/* The orange CTA is reserved for the single conversion action per view
   (enroll / get access) — brand rule: don't dilute it on secondary UI. */
.btn-cta { background: var(--cta); color: var(--cta-ink); box-shadow: var(--shadow-sm); }
.btn-cta:hover { background: var(--cta-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--cta-ink); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-soft); transform: translateY(-1px); }
.btn-lg { padding: 15px 28px; font-size: 1.05rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---- Cards & grids ------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card.hover:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--line-strong); }
.card h3 { margin-bottom: 8px; }
.card .ico {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-size: 22px; margin-bottom: 16px;
}
.card p { color: var(--muted); font-size: .96rem; margin: 0; }
a.card { color: inherit; }
a.card:hover { text-decoration: none; }

/* ---- Chips / badges ------------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 650;
  padding: 5px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark);
}
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.badge-method {
  display: inline-block; font-family: var(--mono); font-weight: 700; font-size: .72rem;
  padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-dark);
  letter-spacing: .04em;
}

/* ---- Code ---------------------------------------------------------------- */
code {
  font-family: var(--mono); font-size: .875em;
  background: var(--bg-sunken); color: #be185d;
  padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line);
}
pre {
  background: var(--code-bg); color: var(--code-ink); border-radius: var(--radius-sm);
  padding: 18px 20px; overflow-x: auto; margin: 14px 0; font-size: 13.5px; line-height: 1.7;
  font-family: var(--mono); border: 1px solid #1e293b;
}
pre code { background: none; border: none; color: inherit; padding: 0; font-size: inherit; }
pre .c  { color: var(--code-comment); }   /* comment */
pre .k  { color: var(--code-keyword); }    /* keyword */
pre .s  { color: var(--code-string); }     /* string  */
pre .n  { color: var(--code-num); }        /* number  */

.codeblock { position: relative; }
.codeblock .copy {
  position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.08);
  color: #cbd5e1; border: 1px solid rgba(255,255,255,.15); border-radius: 7px;
  font-size: .72rem; font-weight: 600; padding: 5px 10px; cursor: pointer; font-family: var(--font);
}
.codeblock .copy:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ---- Tables -------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th, table.data td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--line); }
table.data th { background: var(--bg-soft); color: var(--ink); font-weight: 700; white-space: nowrap; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover, table.data tr:hover td { background: var(--bg-soft); }

/* ---- Callouts ------------------------------------------------------------ */
.callout {
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: 10px; padding: 16px 20px; margin: 18px 0;
}
.callout.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout.ok   { border-left-color: var(--ok); background: var(--ok-soft); }
.callout h4 { margin-bottom: 4px; font-size: 1rem; }
.callout p { margin: 0; color: var(--body); font-size: .94rem; }

/* ---- Stat tiles ---------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 620px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; padding: 8px; }
.stat .num { font-size: 2.4rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.stat .lbl { color: var(--muted); font-size: .9rem; margin-top: 8px; }

/* ---- Steps --------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 16px; }
.step { display: flex; gap: 16px; }
.step .n {
  counter-increment: step; flex: none; width: 34px; height: 34px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center;
}
.step .n::before { content: counter(step); }
.step .body h4 { margin-bottom: 2px; }
.step .body p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ---- Footer -------------------------------------------------------------- */
/* Chrome is the shared <cpe-footer> web component (brand.js): it renders the
   CPE Today lockup, our link columns, and the verbatim NASBA sponsor / "Built
   by CPE Today" credit from source. It inherits the brand tokens — no styling
   needed here. */

/* ---- Mobile refinements --------------------------------------------------
   The layout is desktop-first; this tightens spacing on phones and keeps long
   words / wide content from forcing horizontal page scroll. */
/* Matches the <cpe-header> breakpoint in vendor/brand.js, where the bar shrinks
   to 11px padding + a 30px logo. Keep these two numbers in sync. */
@media (max-width: 1100px) { :root { --header-h: 53px; } }

@media (max-width: 640px) {
  .container, .container-wide { padding: 0 16px; }
  /* Page shells live in per-page <style> blocks but share this gutter. */
  .ed-wrap, .faq-wrap, .pg-wrap, .rel-wrap { padding-left: 16px; padding-right: 16px; }
  .section { padding: 48px 0; }
  .card { padding: 20px; }
  .card .ico { width: 38px; height: 38px; font-size: 19px; margin-bottom: 12px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stat .num { font-size: 1.9rem; }
  .btn { width: auto; }
  .btn-lg { padding: 13px 22px; font-size: var(--fs-base); }
  pre { padding: 14px; font-size: 12.5px; }
  .callout { padding: 14px 16px; }
}
/* Recurring-bug guard: a grid/flex track defaults to min-width:auto, so wide
   content (a long <pre>, a wide results table, an unbreakable identifier) grows
   the track and shoves the whole PAGE sideways rather than scrolling inside its
   own box. Zeroing the floor on our layout containers makes overflow behave.
   Both .docs and .ed-grid shipped this bug before the guard existed. */
.grid > *, .docs > *, .ed-grid > *, .hero-grid > *, .dash-grid > *, .erd > * { min-width: 0; }

/* Long identifiers, URLs and connection strings must never widen the page. */
code { overflow-wrap: anywhere; }
.table-wrap, .res-scroll { -webkit-overflow-scrolling: touch; }

/* ---- Utilities ----------------------------------------------------------- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.muted { color: var(--muted); } .small { font-size: .88rem; }
.hstack { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hide-sm { }
@media (max-width: 620px) { .hide-sm { display: none; } }