/* Shared stylesheet for every page of the Keyfield site. The palette is Keyfield's own, lifted
   verbatim from KeyfieldTokens.Light / .Dark (apps/keyfield/app/src/main/kotlin/dev/machado001/
   keyfield/ui/theme/KeyfieldTokens.kt): direction A, the greenbar printout. Colour is spent on the
   paper (bands, header), never on the chrome: primary actions are ink on paper, as in the app, and
   the green accent is only for links. Instrument Sans speaks, JetBrains Mono measures (numbers,
   labels, file names, SQL), as KeyfieldType.kt sets them. Served from 'self', which _headers allows. */
:root {
  --ground: #F4F6F3; --paper: #FFFFFF; --band: #E4F0E4; --head: #D3E5D5;
  --ink: #17201A; --ink2: #4A574D; --rule: #C5D3C7; --perf: #9DB3A1; --outline: #728676;
  --accent: #1F6B45; --on-ink: #FFFFFF;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F1411; --paper: #141A16; --band: #1C271F; --head: #23332A;
    --ink: #E3EBE4; --ink2: #A3B3A6; --rule: #2E3B32; --perf: #4F6455; --outline: #6F8575;
    --accent: #6CCB94; --on-ink: #141A16;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }
code, pre, .mono { font-variant-ligatures: none; }
code, .mono { font-family: var(--mono); font-size: 0.88em; font-variant-numeric: tabular-nums; }
code { background: var(--band); padding: 1px 5px; border-radius: 3px; }
.wrap { max-width: 800px; margin: 0 auto; padding-inline: 20px; }
h1, h2, h3, .brand-name { font-family: var(--sans); font-weight: 650; line-height: 1.15; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(31px, 5.2vw, 46px); margin-bottom: 18px; }
h2 { font-size: clamp(24px, 3.1vw, 30px); margin: 50px 0 14px; }
h3 { font-size: 20px; margin: 28px 0 6px; }
p { margin: 0 0 16px; text-wrap: pretty; }
ul, ol { padding-left: 22px; margin: 0 0 16px; }
li { margin-bottom: 7px; }
.muted { color: var(--ink2); }
.note { border-left: 3px solid var(--rule); padding: 2px 0 2px 16px; color: var(--ink2); font-size: 16px; }
.label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); }

/* ---- header ------------------------------------------------------------------------------ */
.site-head { border-bottom: 1px solid var(--rule); background: var(--ground); }
.site-head .wrap { max-width: 1000px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 15px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: 34px; }
.brand-name { font-size: 21px; }
.head-nav { display: flex; align-items: center; gap: 20px; }
.navlink { font-size: 15px; color: var(--ink2); text-decoration: none; }
.navlink:hover, .navlink[aria-current] { color: var(--ink); }
.head-cta { font-size: 15px; font-weight: 600; text-decoration: none; color: var(--on-ink); background: var(--ink); padding: 8px 16px; border-radius: 6px; white-space: nowrap; }
.head-cta:hover { color: var(--on-ink); opacity: 0.88; }

/* ---- article ----------------------------------------------------------------------------- */
main { padding-block: 42px 72px; }
.crumbs { font-size: 14px; color: var(--ink2); margin-bottom: 18px; }
.crumbs a { color: var(--ink2); }
.standfirst { font-size: clamp(18px, 2vw, 20px); color: var(--ink2); }
.byline { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink2); margin-bottom: 30px; }

/* The short answer is a band of greenbar paper with its tractor-feed edge. */
.answer { position: relative; background: var(--band); border: 1px solid var(--rule); border-left: 0; border-radius: 0 6px 6px 0; padding: 20px 22px 20px 34px; }
.answer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; border-right: 1.5px dashed var(--perf); background: radial-gradient(circle, var(--perf) 2.4px, transparent 2.9px) center 9px / 18px 18px repeat-y; }
.answer h2 { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 8px; color: var(--ink2); }
.answer p { margin: 0; }
.answer p + p { margin-top: 10px; }
.inline-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 18px 0 0; font-size: 15px; color: var(--ink2); }
.inline-cta a { font-weight: 600; text-decoration: none; color: var(--on-ink); background: var(--ink); padding: 9px 18px; border-radius: 6px; }
.inline-cta a:hover { color: var(--on-ink); opacity: 0.88; }

/* Tables are printouts: a header band, a double ink rule under it, alternate rows banded green,
   no vertical rules, figures in mono. */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; margin: 8px 0 12px; background: var(--paper); }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; line-height: 1.5; }
th, td { text-align: left; padding: 11px 14px; vertical-align: top; }
thead th { background: var(--head); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); font-weight: 600; border-bottom: 3px double var(--ink); }
tbody tr:nth-child(even) td { background: var(--band); }
td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tablenote { font-size: 14px; color: var(--ink2); }

pre.sql { font-family: var(--mono); font-size: 13.5px; line-height: 1.75; background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--head); border-radius: 6px; padding: 14px 16px; overflow-x: auto; white-space: pre; margin: 8px 0 16px; }

.cta { border: 1px solid var(--rule); background: var(--paper); border-radius: 8px; padding: 26px clamp(20px, 3.5vw, 32px); margin-top: 56px; }
.cta-top { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.cta-top img { width: 52px; height: 52px; }
.cta h2 { font-size: clamp(21px, 2.7vw, 26px); margin: 0; }
.cta p { color: var(--ink2); }
.cta .badge { display: inline-block; }
.cta .badge img { width: 180px; }

.related { margin-top: 46px; }
.related h2 { font-size: 21px; margin: 0 0 12px; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--paper); }
.related li { margin: 0; }
.related li:nth-child(even) a { background: var(--band); }
.related a { display: block; padding: 13px 16px; text-decoration: none; color: var(--ink); font-weight: 500; }
.related a:hover { color: var(--accent); }

/* ---- blog hub ---------------------------------------------------------------------------- */
.post-group { margin-top: 42px; }
.post-group h2 { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); margin: 0 0 10px; }
.posts { list-style: none; padding: 0; margin: 0; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--paper); }
.posts li { margin: 0; }
.posts li:nth-child(even) a { background: var(--band); }
.posts a { display: block; padding: 17px 20px; text-decoration: none; color: var(--ink); }
.posts a:hover strong { color: var(--accent); }
.posts strong { display: block; font-size: 19px; font-weight: 650; line-height: 1.3; margin-bottom: 3px; }
.posts span { color: var(--ink2); font-size: 15px; line-height: 1.5; display: block; }

/* ---- footer ------------------------------------------------------------------------------ */
.site-foot { border-top: 1px solid var(--rule); padding-block: 32px 50px; font-size: 15px; color: var(--ink2); }
.site-foot .wrap { max-width: 1000px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; justify-content: space-between; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.site-foot small { flex-basis: 100%; font-size: 13px; line-height: 1.55; }

/* On phones, multi-column tables stack: each row becomes a card, each cell carries its column
   name (data-label, written into the HTML), so nothing has to scroll sideways. */
@media (max-width: 600px) {
  table.stack { min-width: 0; }
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack tbody tr:nth-child(even) { background: var(--band); }
  table.stack td { padding: 4px 16px; background: transparent !important; text-align: left; white-space: normal; }
  table.stack td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
  table.stack td.n { text-align: left; }
  table.stack td:first-child { font-weight: 600; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .head-nav { gap: 14px; }
  .head-cta { padding: 7px 12px; font-size: 14px; }
  .answer { padding: 18px 18px 18px 30px; }
}