/* ===========================================================================
   PostgreSQL Master — the single design system
   ---------------------------------------------------------------------------
   Every module on this site draws from this file. One palette, one type scale,
   one SQL token colouring. Dark only — there is no light palette to fall out
   of sync, and no toggle to leave half the site untested.
   Token names are kept from the original light system so module CSS did not
   have to be rewritten: --white is the raised SURFACE (not the colour white),
   and --ink/--ink-2/--ink-3 run light-to-dim rather than dark-to-light.
   =========================================================================== */

:root{
  /* brand ---------------------------------------------------------------- */
  --accent:#4d9bff;        /* borders, focus ring, rules */
  --accent-solid:#2f6fe4;  /* filled surfaces carrying white text */
  --accent-deep:#9cc6ff;   /* links and label text — LIGHT on dark */
  --accent-wash:#16243a;   /* tinted background */
  --accent-line:#31455f;

  /* ink — light to dim --------------------------------------------------- */
  --ink:#e9edf2;
  --ink-2:#b4becc;
  --ink-3:#8f9aab;

  /* surfaces ------------------------------------------------------------- */
  --white:#161b22;      /* raised surface (cards, panels, editors) */
  --ground:#0e1116;     /* page background */
  --line:#2c3440;
  --line-soft:#222935;
  --band:#1b2230;       /* contrasting band (hero, footer) */
  --band-fg:#e9edf2;

  /* semantic ------------------------------------------------------------- */
  --good:#74dfa2;   --good-wash:#11291d;   --good-line:#2f6b49;
  --warn:#f0c274;   --warn-wash:#2a2114;   --warn-line:#6d5423;
  --bad:#ff9d96;    --bad-wash:#2d1618;    --bad-line:#7a3733;
  --note:#c9b3ff;   --note-wash:#221a33;   --note-line:#4b3a78;

  /* SQL syntax — one palette for every module that prints SQL ------------ */
  --sql-kw:#7cb7f0;
  --sql-ctrl:#d7a6e8;
  --sql-str:#e0a080;
  --sql-num:#b5cea8;
  --sql-com:#8fbf8f;
  --sql-fn:#e6d9a3;
  --sql-type:#6fd3bd;
  --sql-meta:#e0bd85;
  --sql-punct:#c2cbd8;

  /* type ----------------------------------------------------------------- */
  --sans:Arial,Helvetica,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;

  /* form ----------------------------------------------------------------- */
  --r-sm:4px; --r:6px; --r-lg:12px;
  --shadow:0 5px 16px rgba(0,0,0,.4);
  --shadow-lift:0 14px 30px rgba(0,0,0,.5);
  --topbar-h:58px;
  --ctx-h:46px;
  --foot-h:42px;
}
/* ------------------------------------------------------------------ reset */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%; color-scheme:dark}
body{
  font-family:var(--sans); color:var(--ink); background:var(--ground);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-deep)}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
button{cursor:pointer; background:none; border:none}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}
img{max-width:100%}
[hidden]{display:none !important}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:900px; margin:0 auto; padding:0 24px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ----------------------------------------------------------------- topbar */
.topbar{
  position:sticky; top:0; z-index:60; height:var(--topbar-h);
  background:var(--band); border-bottom:1px solid var(--line);
  display:flex; align-items:center;
}
.topbar-in{
  max-width:1180px; margin:0 auto; padding:0 24px; width:100%;
  display:flex; align-items:center; gap:10px;
}
.brand{
  display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);
  font-weight:700; font-size:15px; letter-spacing:-.01em; flex-shrink:0; margin-right:8px;
}
.brand svg{width:20px; height:20px; color:var(--accent-solid); flex-shrink:0}
.brand span{white-space:nowrap}
.navscroll{
  display:flex; align-items:center; gap:2px; overflow-x:auto; flex:1; min-width:0;
  scrollbar-width:none; -ms-overflow-style:none;
}
.navscroll::-webkit-scrollbar{display:none}
.navscroll a{
  display:flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
  font-size:13.5px; color:var(--ink-2); padding:7px 11px; border-radius:var(--r);
}
.navscroll a:hover{background:var(--ground); color:var(--ink)}
.navscroll a.on{background:var(--accent-wash); color:var(--accent-deep); font-weight:700}
.navscroll a .st{
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  border:1px solid var(--line); border-radius:3px; padding:0 4px; flex-shrink:0;
}
.navscroll a.on .st{border-color:var(--accent-line); color:var(--accent-deep)}

/* site-wide fullscreen toggle, in every top bar */
.fsbtn{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0; margin-left:8px;
  background:var(--white); color:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r); padding:6px 11px; font-size:13px; white-space:nowrap;
}
.fsbtn:hover{border-color:var(--accent); color:var(--ink)}
.fsbtn[aria-pressed="true"]{background:var(--accent-wash); border-color:var(--accent-line); color:var(--accent-deep)}
@media (max-width:860px){ .fsbtn span{display:none} .fsbtn{padding:6px 9px} }

/* ------------------------------------------------------------------ pages */
.band{padding:66px 0}
.band-grey{background:var(--ground); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band-tight{padding:34px 0}

.pagehead{
  background:var(--ground); border-bottom:1px solid var(--line); padding:30px 0;
}
.pagehead .eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-deep); margin-bottom:7px;
}
.pagehead h1{font-size:31px; font-weight:600; letter-spacing:-.015em; line-height:1.2}
.pagehead p{margin-top:9px; color:var(--ink-2); font-size:16px; max-width:76ch}
.pagehead-row{display:flex; gap:24px; align-items:flex-end; flex-wrap:wrap; justify-content:space-between}

.head{text-align:center; max-width:64ch; margin:0 auto 48px}
.head h2{font-size:32px; font-weight:600; letter-spacing:-.015em; line-height:1.25}
.head p{margin-top:13px; font-size:17px; color:var(--ink-2)}

h1,h2,h3,h4{font-weight:600; letter-spacing:-.01em}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent-solid); color:#fff; text-decoration:none;
  font-size:14.5px; font-weight:700; padding:11px 20px; border-radius:var(--r);
  transition:background .15s ease, transform .15s ease; border:1px solid transparent;
}
.btn:hover{background:var(--accent-deep); transform:translateY(-1px)}
.btn:disabled{opacity:.42; pointer-events:none}
.btn-quiet{background:var(--white); color:var(--ink); border-color:var(--line); font-weight:400}
.btn-quiet:hover{background:var(--ground); border-color:var(--ink-3); transform:none; color:var(--ink)}
.btn-sm{padding:7px 13px; font-size:13px}
.btn-dark{background:transparent; color:var(--ink); border-color:var(--line); font-weight:400}
.btn-dark:hover{background:var(--band); border-color:var(--ink-3); transform:none}

/* ------------------------------------------------------------------ cards */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 28px; box-shadow:var(--shadow);
}
.panel{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden;
}
.panel-hd{
  padding:11px 16px; border-bottom:1px solid var(--line); background:var(--ground);
  font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2); display:flex; align-items:center; gap:10px;
}
.panel-hd .fill{flex:1}
.panel-bd{padding:16px}

.tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 9px; border-radius:var(--r-sm);
  background:var(--accent-wash); color:var(--accent-deep);
}
.tag-note{background:var(--note-wash); color:var(--note)}
.tag-good{background:var(--good-wash); color:var(--good)}
.tag-warn{background:var(--warn-wash); color:var(--warn)}
.tag-bad{background:var(--bad-wash); color:var(--bad)}

.chip{
  font-family:var(--mono); font-size:12.5px; color:var(--ink-2);
  background:var(--ground); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:5px 10px; display:inline-block;
}
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none}

.lbl{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.lbl::after{content:""; flex:1; height:1px; background:var(--line)}

/* ------------------------------------------------------------------- code */
code{
  font-family:var(--mono); font-size:.87em; background:var(--ground);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:1px 5px; color:var(--ink);
}
pre.sql, .codeblock{
  font-family:var(--mono); font-size:14px; line-height:1.62; color:var(--ink);
  background:var(--ground); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:14px 16px; overflow-x:auto; white-space:pre;
  tab-size:2;
}
pre.sql code, .codeblock code{background:none; border:none; padding:0; font-size:inherit}

/* the one SQL token palette */
.k,.tok-kw    {color:var(--sql-kw);   font-weight:700}
.cf,.tok-ctrl {color:var(--sql-ctrl); font-weight:700}
.s,.tok-str   {color:var(--sql-str)}
.nu,.tok-num  {color:var(--sql-num)}
.c,.tok-com   {color:var(--sql-com);  font-style:italic}
.f,.tok-fn    {color:var(--sql-fn)}
.t,.tok-type  {color:var(--sql-type)}
.tok-meta     {color:var(--sql-meta); font-weight:700}
.tok-punct    {color:var(--sql-punct)}

/* ------------------------------------------------------------------ grids */
table.grid{border-collapse:collapse; width:100%; font-size:13.5px; font-family:var(--mono)}
table.grid th{
  text-align:left; font-weight:700; font-size:11.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-2); background:var(--ground);
  border-bottom:1px solid var(--line); padding:7px 11px; white-space:nowrap;
}
table.grid td{
  border-bottom:1px solid var(--line-soft); padding:6px 11px; color:var(--ink);
  vertical-align:top;
}
table.grid tr:last-child td{border-bottom:none}
table.grid td.n, table.grid th.n{text-align:right; font-variant-numeric:tabular-nums}
table.grid td.wrap{white-space:pre-wrap; word-break:break-word}
table.grid .nil, table.grid .nullcell{color:var(--ink-3); font-style:italic}
.grid-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r)}
.grid-wrap table.grid{border-radius:0}
.rowcount{font-family:var(--mono); font-size:12px; color:var(--ink-3); padding:6px 11px}

/* ------------------------------------------------------------------ notes */
.note{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  background:var(--accent-wash); border-radius:var(--r);
  padding:11px 14px; font-size:14.5px; color:var(--ink-2);
}
.note b{color:var(--ink)}
.note.warn{background:var(--warn-wash); border-left-color:#d08700}
.note.bad{background:var(--bad-wash); border-left-color:var(--bad)}
.note.good{background:var(--good-wash); border-left-color:var(--good)}

.banner{
  display:flex; gap:11px; align-items:flex-start; border-radius:var(--r);
  padding:13px 16px; font-size:14.5px; border:1px solid var(--line);
  background:var(--accent-wash); color:var(--ink-2); margin-bottom:18px;
}
.banner b{color:var(--ink)}
.banner.warn{background:var(--warn-wash); border-color:#f0dcb4}
.banner.bad{background:var(--bad-wash); border-color:#f5cfcb}


/* ================================================================= context bar
   Module pages carried a 209px marketing header that pushed the actual module
   below the fold and forced two scrollbars (page + panel). This replaces it:
   one compact row with the step, its title, the blurb behind a disclosure, and
   prev/next always in reach. */
.ctxbar{
  position:sticky; top:var(--topbar-h); z-index:50; min-height:var(--ctx-h);
  background:var(--band); border-bottom:1px solid var(--line);
  display:flex; align-items:center;
}
.ctxbar-in{
  max-width:1180px; margin:0 auto; padding:0 24px; width:100%;
  display:flex; align-items:center; gap:12px; min-height:var(--ctx-h);
}
.ctxbar .step-no{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em;
  background:var(--accent-solid); color:#fff; padding:3px 7px; border-radius:var(--r-sm);
  flex-shrink:0;
}
.ctxbar h1{font-size:15.5px; font-weight:700; letter-spacing:-.005em; flex-shrink:0}
.ctxbar .meta{
  font-size:13px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; min-width:0; flex:1;
}
.ctxbar .acts{display:flex; align-items:center; gap:7px; flex-shrink:0; margin-left:auto}
.ctx-about{
  background:var(--white); border-bottom:1px solid var(--line);
  font-size:15px; color:var(--ink-2); line-height:1.6;
}
.ctx-about .wrap{padding-top:16px; padding-bottom:18px; max-width:82ch}
.ctx-about b{color:var(--ink)}

/* lecture decks listed inside a step's "About this step" panel */
.ctx-notes{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:14px;
           padding-top:13px; border-top:1px solid var(--line)}
.ctx-notes .lbl{margin:0; flex:0 0 auto}
.ctx-notes .lbl::after{display:none}
.ctx-notes a{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:13.5px;
  background:var(--accent-wash); color:var(--accent-deep);
  border:1px solid var(--accent-line); border-radius:var(--r); padding:5px 11px;
}
.ctx-notes a:hover{border-color:var(--accent); text-decoration:underline}

/* app pages: the module owns the viewport, so only its own panes scroll */
body.fixed{height:100vh; overflow:hidden; display:flex; flex-direction:column}
body.fixed main{flex:1; min-height:0; display:flex; flex-direction:column}
/* the footer is fixed, so it sits outside the flex flow; body's
   padding-bottom is what keeps the module clear of it */
.fillhost{flex:1; min-height:0; display:flex; flex-direction:column; background:var(--ground)}
/* App pages run full-bleed: capping them at the 1180px document measure left a
   third of a wide screen empty on either side. Documents keep the measure. */
.fillhost > .wrap{flex:1; min-height:0; width:100%; max-width:none; display:flex;
                  flex-direction:column; padding:14px 16px}
/* width:100% matters: `margin:0 auto` on a column flex item disables cross-axis
   stretch, so without it .wrap shrinks to its content instead of filling. */
.fillhost.bleed > .wrap{padding-left:14px; padding-right:14px}

/* short or narrow screens: stacking and scrolling beat a squeezed panel */
@media (max-width:900px), (max-height:600px){
  body.fixed{height:auto; overflow:visible; display:block}
  body.fixed main{display:block}
  .fillhost{display:block}
  .fillhost > .wrap{display:block}
  .ctxbar{position:static}
  .ctxbar-in{flex-wrap:wrap; padding-top:8px; padding-bottom:8px}
  .ctxbar .meta{flex-basis:100%; white-space:normal}
}

/* module pager, emitted by Shell.pager() */
.modpager{display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
          padding:26px 0 0; border-top:1px solid var(--line)}
.modpager .btn{flex:1 1 auto; min-width:0}

/* ----------------------------------------------------------------- footer
   Pinned to the viewport on every page. Its height is reserved on <body> so
   nothing is ever hidden underneath it — on app pages that reservation also
   shrinks the box the module fills. */
.sitefoot{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  height:var(--foot-h); display:flex; align-items:center;
  background:var(--band); border-top:1px solid var(--line);
  color:var(--ink-2); font-size:13px;
}
.sitefoot-in{
  display:flex; flex-wrap:nowrap; gap:16px; justify-content:space-between;
  align-items:center; width:100%; min-width:0;
}
.sitefoot-in > *{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sitefoot b{color:var(--ink); font-weight:600}
.sitefoot a{color:var(--accent-deep)}
body{padding-bottom:var(--foot-h)}
/* narrow screens: drop the repo link rather than ellipsing the byline */
@media (max-width:560px){
  .sitefoot-in > :last-child{display:none}
  .sitefoot-in{justify-content:center}
}

/* full-height module pages sit in a flex column so the footer lands correctly */
body.app{display:flex; flex-direction:column; min-height:100vh}
body.app main{flex:1 0 auto}

/* ------------------------------------------------------------------ phone */
@media (max-width:860px){
  .topbar-in{padding:0 14px}
  .brand span{display:none}
  .navscroll a .st{display:none}
}
@media (max-width:640px){
  .band{padding:46px 0}
  .head{margin-bottom:32px}
  .head h2{font-size:25px}
  .pagehead h1{font-size:24px}
  .pagehead{padding:22px 0}
  .wrap,.wrap-narrow{padding:0 16px}
  .card{padding:20px}
  pre.sql,.codeblock{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}