/* ═══════════════════════════════════════════════════════════════════
   here.now visual kit — paste this into a <style> block.
   Palette + figure wrapper only. It says nothing about page structure;
   the host page brings its own content and layout.
   ═══════════════════════════════════════════════════════════════════ */

/* ── PALETTE ──
   Nine values. Every figure reads from these, so re-theming a page never
   touches markup. Rules that make it hold together:
     · --paper is never pure white (warmth reads as "designed")
     · exactly ONE --accent; every emphasis uses it
     · --accent-soft is the accent at ~8% — fills, pills, table heads
     · --line is a hairline, used at 1px only                          */
:root {
  --ink:         #1a1815;
  --paper:       #faf7f2;
  --card:        #ffffff;
  --accent:      #c2410c;
  --accent-soft: #fff1e7;
  --muted:       #6b6560;
  --line:        #e8e2d9;
  --good:        #166534;
  --warn:        #92400e;
}

/* Apply with one attribute:  <html data-theme="slate">
   Selectors are deliberately NOT :root-scoped, so you can put several
   themed panels on one page to compare them.
   Ratios are --accent text on --accent-soft ground — the tightest
   pairing in the kit. WCAG AA for normal text is 4.5:1.               */

/* SLATE — cool, institutional. Reports, policy, infra.        5.8:1 */
[data-theme="slate"] {
  --ink: #14181d; --paper: #f5f7fa; --card: #ffffff;
  --accent: #1d4ed8; --accent-soft: #e8effe;
  --muted: #5c6672; --line: #dde3ea;
  --good: #166534; --warn: #92400e;
}

/* MOSS — natural, calm. Energy, climate, health.              4.7:1
   --good is teal so ✓ marks stay distinct from a green accent.      */
[data-theme="moss"] {
  --ink: #17201a; --paper: #f6f6f1; --card: #ffffff;
  --accent: #15803d; --accent-soft: #eefaf2;
  --muted: #5f6a62; --line: #e2e5db;
  --good: #0f766e; --warn: #92400e;
}

/* INK — dark. Note the inversion: --card is LIGHTER than --paper,
   because "raised" on dark means closer to the light. The accent must
   lighten too (#fb923c, not #c2410c) or it disappears.        6.4:1 */
[data-theme="ink"] {
  --ink: #eceae5; --paper: #14130f; --card: #1e1c17;
  --accent: #fb923c; --accent-soft: #3a2416;
  --muted: #a09a91; --line: #302c25;
  --good: #4ade80; --warn: #fbbf24;
}

/* ── FIGURE WRAPPER ──
   The only structural rule in the kit: a figure is a bordered card on
   --card with the SVG at full width and an optional caption.
   `color` is set here so figure SVGs can use currentColor and inherit
   ink from one place instead of repeating var(--ink) per element.     */
.fig {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 20px 14px;
  margin: 28px 0;
  color: var(--ink);
}
.fig svg { width: 100%; height: auto; display: block; }

/* ── .guide — dashed spines, axes, leader lines ──
   MEASURED: a 900-unit viewBox in a 375px viewport renders at scale
   0.317, so a 1.5-unit guide lands at 0.48 device px and disappears.
   non-scaling-stroke pins stroke width to rendered px at any scale, so
   guides survive. Objects deliberately do NOT get this — see .fig.wide. */
.fig .guide { vector-effect: non-scaling-stroke; }
.fig figcaption {
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
  margin: 10px auto 4px;
  max-width: 560px;
  line-height: 1.5;
}

/* Bare variant — no card, for figures that sit directly on --paper. */
.fig.bare { background: none; border: none; padding: 0; }

/* ── .fig.wide — the mobile answer for detailed figures ──
   Below ~640px of render width the 900-unit grid squeezes objects and
   strokes into mush (a 2.5 stroke renders at 0.79 device px on a 375px
   phone — measured). Rather than thicken strokes and distort the
   proportions, stop scaling and let the figure scroll inside its card.
   Use on: flow (4+ nodes), exploded, matrix, network, bars.
   Skip on: compare, stack, short timelines — they read fine squeezed.  */
.fig.wide { overflow-x: auto; }
.fig.wide svg { min-width: 640px; }

/* Escape hatch: when a figure MUST fit the column with no scroll, put
   .solid on it — every stroke pins to rendered px. Legible but visually
   heavier, since strokes stay thick while shapes shrink. Prefer .wide.  */
.fig.solid :is(rect, circle, line, path, ellipse, polyline, polygon) {
  vector-effect: non-scaling-stroke;
}

/* ── page chrome (host layout; kit supplies palette + .fig only) ── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  font-size:17.5px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-underline-offset:3px}
a:hover{opacity:.88}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

.wrap{max-width:920px; margin:0 auto; padding:0 24px 72px}

.topnav{
  display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center;
  padding:1.1rem 0 0.25rem;
  font-size:14px;
}
.topnav a{color:var(--muted); text-decoration:none; font-weight:600}
.topnav a:hover,.topnav a[aria-current="page"]{color:var(--accent)}
.topnav .brand{color:var(--ink); margin-right:auto; letter-spacing:-.01em}

.hero{
  padding:2.25rem 0 0.5rem;
}
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .85rem;
}
h1{
  font-size:clamp(2rem, 5vw, 2.75rem);
  line-height:1.12; letter-spacing:-.02em;
  margin:0 0 1rem; font-weight:800; max-width:18ch;
}
.lede{
  font-size:1.15rem; color:var(--muted); max-width:48ch;
  margin:0 0 1.5rem; line-height:1.55;
}
.actions{display:flex; flex-wrap:wrap; gap:.65rem; margin:0 0 1.75rem}
.btn{
  display:inline-flex; align-items:center;
  font-size:14px; font-weight:600;
  padding:.7rem 1.1rem; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  text-decoration:none;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--paper)}
.btn-primary:hover{opacity:.92; color:var(--paper)}

.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem;
  margin:0 0 .5rem;
}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:1rem .9rem; min-height:4.75rem;
}
.stat b{
  display:block; font-size:1.35rem; font-weight:800; letter-spacing:-.02em;
  color:var(--accent); margin-bottom:.3rem;
}
.stat span{font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase}

.toc{
  position:sticky; top:0; z-index:10;
  display:flex; gap:.25rem; overflow-x:auto;
  margin:1.75rem 0 1.75rem;
  padding:.55rem;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  border:1px solid var(--line); border-radius:999px;
  backdrop-filter:blur(10px);
  scrollbar-width:none;
}
.toc::-webkit-scrollbar{display:none}
.toc a{
  flex:0 0 auto; font-size:12px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; color:var(--muted);
  padding:.5rem .85rem; border-radius:999px;
}
.toc a:hover{background:var(--accent-soft); color:var(--accent)}

section.block{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(1.5rem, 3vw, 2rem);
  margin:0 0 1.75rem;
}
.block-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
  margin:0 0 1rem;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--line);
}
h2{
  font-size:clamp(1.35rem, 2.5vw, 1.65rem);
  margin:0; letter-spacing:-.015em; font-weight:800;
}
.tag{
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  padding:.28rem .6rem; border-radius:999px;
}
.lead{
  font-size:1.08rem; color:var(--ink); max-width:56ch;
  margin:0 0 1.1rem; line-height:1.55;
}
p{margin:0 0 1rem; color:var(--muted); max-width:58ch}
p:last-child{margin-bottom:0}
ul,ol{margin:.2rem 0 1rem; padding-left:1.3rem; color:var(--muted); max-width:58ch}
li{margin:.4rem 0; line-height:1.5}
h3{font-size:1.2rem; margin:1.6rem 0 .55rem; font-weight:800; letter-spacing:-.01em; color:var(--ink)}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:.75rem}
@media (max-width:700px){.grid2{grid-template-columns:1fr}}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:1.25rem 1.2rem;
}
.card ul{max-width:none; margin-bottom:0}
.pill{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.25rem .55rem; border-radius:999px; margin-bottom:.65rem;
}
.pill.ok{background:color-mix(in srgb, var(--good) 14%, var(--paper)); color:var(--good)}
.pill.warn{background:var(--accent-soft); color:var(--warn)}

.table-wrap{
  overflow-x:auto; margin:1.1rem 0 .4rem;
  border:1px solid var(--line); border-radius:14px;
}
table{width:100%; border-collapse:collapse; font-size:16px; min-width:620px}
th,td{padding:1rem 1.1rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.45}
th{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  color:var(--muted); background:var(--accent-soft);
}
tr:last-child td{border-bottom:0}
td:nth-child(2){white-space:nowrap; width:6.5rem}
.yn{font-weight:800; font-size:13px; letter-spacing:.04em}
.yn.y{color:var(--good)}
.yn.n{color:var(--warn)}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em; background:var(--paper); border:1px solid var(--line);
  padding:.1rem .35rem; border-radius:5px;
}
pre{
  background:var(--ink); color:var(--paper);
  border-radius:14px; padding:1.2rem 1.3rem; overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px; line-height:1.6; margin:1rem 0 1.4rem;
}
pre code{background:none; border:0; color:inherit; padding:0; font-size:inherit}

.usecase{
  border-top:1px solid var(--line);
  padding:1.6rem 0 .35rem;
  margin-top:1.35rem;
}
.usecase:first-of-type{border-top:0; margin-top:.15rem; padding-top:.15rem}
.meta-line{
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .45rem;
}
.usecase p{max-width:60ch}

.foot{
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center;
  margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--muted);
}
.foot a{color:var(--muted); text-decoration:none; font-weight:600}
.foot a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* callout under figures — how to read the picture */
.callout{
  margin: 0.25rem 0 0.5rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 12px 12px 0;
}
.callout p{
  margin: 0;
  color: var(--ink);
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.55;
}
.callout strong{ color: var(--accent); }
