/* ============================================================
   String Hopper — site styles
   Tokens ported from the app's Theme.swift. Warm-biased palette:
   never pure white or black, every neutral carries a drop of yellow.
   Type is the system serif + system rounded, same as the app.

   Light and dark: like the app's Color(light:dark:), the grounds, inks and
   tints each carry a dark twin; mid-ramp brand colours stay fixed. The page
   follows the system setting unless <html data-theme="light|dark"> is set
   by the header control (see site.js).
   ============================================================ */

:root {
  --sage-50: #f1f4e8; --sage-100: #e4ead2; --sage-200: #c9d5b0; --sage-300: #aec088;
  --sage-500: #6f8a4e; --sage-600: #5a7240; --sage-700: #4f6340; --sage-800: #3d4e32;
  --honey-50: #fdf6e3; --honey-100: #fbecc4; --honey-300: #f4d98a; --honey-500: #e8b658; --honey-700: #a9792d;
  --denim-100: #d8e1ea; --denim-300: #8ba8c2; --denim-500: #527393; --denim-700: #33475c;
  --peach-50: #fdf1ea; --peach-100: #fadfcf; --peach-200: #f5cbb3; --peach-500: #d98a67; --peach-600: #b16a4a; --peach-700: #8c4e34;
  --cream-50: #fdfaf2; --cream-100: #faf4e8; --cream-200: #f2e8d3; --cream-300: #e8dbbf; --cream-400: #d9c9a6;
  --ink-900: #2a2620; --ink-800: #3a342c; --ink-700: #4a4238; --ink-600: #6b6052; --ink-500: #807564; --ink-400: #9c927f;
  --plum: #4a2b40; --rose: #cdaa9f;

  --bg-0: var(--cream-50); --bg-1: var(--cream-100); --bg-2: var(--cream-200);
  --fg-0: var(--ink-900); --fg-1: var(--ink-700); --fg-2: var(--ink-600); --fg-3: var(--ink-500);
  --accent: var(--sage-500); --accent-fg: var(--sage-700);
  --grout: rgba(60, 48, 30, 0.10); --grout-strong: rgba(60, 48, 30, 0.18);

  --r-tile: 6px; --r-pebble: 14px; --r-nest: 28px;
  --shadow-tile: 0 1px 1px rgba(60, 48, 30, 0.06);
  --shadow-lift: 0 4px 14px rgba(60, 48, 30, 0.12);
  --settle: 220ms cubic-bezier(0.34, 1.2, 0.5, 1);

  --display: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --ui: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Fixed in both appearances: things that sit on a solid brand colour. */
:root {
  --on-solid: #fdfaf2;
  --paper: #faf4e8;
  --ink-solid: #2a2620;
  --code-bg: #2a2620; --code-fg: #f2e8d3;
  --shadow-ink: rgba(60, 48, 30, 0.12);
  color-scheme: light;
}

/* Dark twins. Browsers without light-dark() keep the light values above. */
@supports (color: light-dark(#000, #fff)) {
  :root { color-scheme: light dark; }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
  :root {
    --sage-50: light-dark(#f1f4e8, #22271b); --sage-100: light-dark(#e4ead2, #2c3422); --sage-200: light-dark(#c9d5b0, #3c4a2c);
    --sage-600: light-dark(#5a7240, #86a062); --sage-700: light-dark(#4f6340, #b5c795); --sage-800: light-dark(#3d4e32, #cbd8b3);
    --honey-50: light-dark(#fdf6e3, #2e2717); --honey-100: light-dark(#fbecc4, #3a301a); --honey-700: light-dark(#a9792d, #e3bd6c);
    --denim-100: light-dark(#d8e1ea, #232d38); --denim-700: light-dark(#33475c, #a9c1d8);
    --peach-50: light-dark(#fdf1ea, #2f211a); --peach-100: light-dark(#fadfcf, #3d2a20); --peach-200: light-dark(#f5cbb3, #5a3b2c);
    --peach-600: light-dark(#b16a4a, #e09a78); --peach-700: light-dark(#8c4e34, #f0b79b);
    --cream-50: light-dark(#fdfaf2, #27231d); --cream-100: light-dark(#faf4e8, #1e1b16); --cream-200: light-dark(#f2e8d3, #332e26);
    --cream-300: light-dark(#e8dbbf, #403a30); --cream-400: light-dark(#d9c9a6, #564e41);
    --ink-900: light-dark(#2a2620, #f3ead8); --ink-800: light-dark(#3a342c, #e6dcc8); --ink-700: light-dark(#4a4238, #d6cbb5);
    --ink-600: light-dark(#6b6052, #b5aa94); --ink-500: light-dark(#807564, #9c917c); --ink-400: light-dark(#9c927f, #7f7564);
    --grout: light-dark(rgba(60, 48, 30, 0.10), rgba(255, 240, 215, 0.10));
    --grout-strong: light-dark(rgba(60, 48, 30, 0.18), rgba(255, 240, 215, 0.20));
    --ink-solid: light-dark(#2a2620, #5a5146);
    --paper: light-dark(#faf4e8, #d8ccb0);
    --code-bg: light-dark(#2a2620, #14120e);
    --shadow-tile: 0 1px 1px light-dark(rgba(60, 48, 30, 0.06), rgba(0, 0, 0, 0.28));
    --shadow-lift: 0 4px 14px light-dark(rgba(60, 48, 30, 0.12), rgba(0, 0, 0, 0.4));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--bg-1); color: var(--fg-1);
  font: 400 16px/1.6 var(--ui); -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--accent-fg); text-decoration-color: var(--sage-300); text-underline-offset: 3px; }
a:hover { color: var(--sage-800); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--sage-500); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); color: var(--fg-0); font-weight: 600; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); letter-spacing: -0.02em; }
h2 { font-size: 1.6rem; letter-spacing: -0.012em; margin-top: 3.2rem; }
h3 { font-size: 1.16rem; letter-spacing: -0.005em; margin-top: 2rem; }
p { margin: 0.8rem 0 0; }
ul, ol { padding-left: 1.2rem; margin: 0.8rem 0 0; }
li + li { margin-top: 0.35rem; }
strong { color: var(--fg-0); font-weight: 700; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; z-index: 20; background: var(--bg-0); padding: 8px 12px; border-radius: var(--r-tile); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--cream-100) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--grout);
}
.site-head .wrap { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg-0); margin-right: auto; }
.brand img { width: 34px; height: 34px; border-radius: 8px; box-shadow: var(--shadow-tile); }
.brand span { font: 600 1.16rem var(--display); letter-spacing: -0.01em; }
.menu-btn {
  display: none; font: 700 0.88rem var(--ui); cursor: pointer; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--grout-strong); background: var(--bg-0); color: var(--fg-0);
}

/* ---------- docs layout: one sidebar lists every page ---------- */
.layout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start;
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
}
/* The links sit 10px left of the group labels so their text lines up with them. The sidebar
   scrolls, which clips anything outside it, so it carries that 10px as padding of its own. */
.side { position: sticky; top: 65px; max-height: calc(100vh - 65px); overflow-y: auto; padding: 30px 0 40px 10px; margin-left: -10px; }
.side-group + .side-group { margin-top: 22px; }
.side ul { list-style: none; padding: 0; margin: 6px 0 0 -10px; }
.side li { margin: 0; }
.side a {
  display: block; padding: 6px 10px; border-radius: 8px; text-decoration: none;
  font-weight: 600; font-size: 0.93rem; line-height: 1.3; color: var(--fg-2);
}
.side a:hover { background: var(--bg-2); color: var(--fg-0); }
.side a[aria-current] { background: var(--sage-100); color: var(--sage-800); font-weight: 700; }
.doc { min-width: 0; max-width: 800px; padding: 40px 0 0; }
.doc > .banner:first-child { margin-top: 0; }
.doc-head h1 { margin-top: 8px; }
.doc-head + h2, .doc-head + .prose > h2:first-child { margin-top: 2.4rem; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 3.6rem; }
.pager a { text-decoration: none; color: inherit; display: block; padding: 16px 18px; transition: transform var(--settle), box-shadow var(--settle); }
.pager a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.pager b { display: block; font: 600 1.08rem var(--display); color: var(--fg-0); margin-top: 4px; }
.pager .next { text-align: right; }

/* ---------- small pieces ---------- */
.eyebrow {
  font: 600 0.7rem var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-3); display: block;
}
.lede { font-size: 1.13rem; color: var(--fg-1); max-width: 660px; margin-top: 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 600 0.78rem var(--ui); color: var(--fg-1);
  padding: 4px 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--grout);
}
.chip.dashed { background: transparent; border-style: dashed; border-color: var(--grout-strong); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.9rem; }
kbd {
  font: 600 0.8em var(--mono); background: var(--bg-0); border: 1px solid var(--grout-strong);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--fg-0); white-space: nowrap;
}
code { font: 0.88em var(--mono); background: var(--bg-2); padding: 2px 6px; border-radius: 5px; color: var(--fg-0); }
.ui { font-weight: 700; color: var(--fg-0); white-space: nowrap; }
.quiet { color: var(--fg-3); font-size: 0.9rem; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; font: 700 0.95rem var(--ui); text-decoration: none; cursor: pointer;
  padding: 11px 18px; border-radius: 999px; border: 1px solid var(--grout-strong); background: var(--bg-0); color: var(--fg-0);
  box-shadow: var(--shadow-tile); transition: transform var(--settle), box-shadow var(--settle), background var(--settle);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); color: var(--fg-0); }
.btn.primary { background: var(--accent); border-color: var(--sage-600); color: var(--on-solid); }
.btn.primary:hover { background: #5a7240; color: var(--on-solid); }
.btn svg { width: 16px; height: 16px; }
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 22px 0 0; }

.card {
  background: var(--bg-0); border: 1px solid var(--grout); border-radius: var(--r-pebble);
  box-shadow: var(--shadow-tile); padding: 20px;
}
.tile {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-tile); display: grid; place-items: center;
  background: var(--sage-100); color: var(--sage-700); border: 1px solid var(--grout);
}
.tile svg { width: 22px; height: 22px; }
.tone-sage  { --t-tint: var(--sage-100);  --t-fg: var(--sage-700);  --t-solid: var(--sage-500); }
.tone-peach { --t-tint: var(--peach-100); --t-fg: var(--peach-700); --t-solid: var(--peach-500); }
.tone-denim { --t-tint: var(--denim-100); --t-fg: var(--denim-700); --t-solid: var(--denim-500); }
.tone-honey { --t-tint: var(--honey-100); --t-fg: var(--honey-700); --t-solid: var(--honey-500); }
.tone-ink   { --t-tint: var(--cream-200); --t-fg: var(--ink-800);   --t-solid: var(--ink-900); }
[class*="tone-"] .tile { background: var(--t-tint); color: var(--t-fg); }
[class*="tone-"] .eyebrow.toned { color: var(--t-fg); }

/* ---------- home banner ----------
   Same as the app's welcome banner: a sunrise ground with seven garment tiles strung along a
   dotted string, then the mark and wordmark underneath. Tile positions, tilts and colours are
   the app's (WelcomeBanner in WelcomeView.swift). */
.banner {
  --h: clamp(140px, 26vw, 240px); --u: calc(var(--h) / 240); --gap: 18px;
  position: relative; overflow: hidden; height: var(--h); margin-top: 28px;
  /* 104deg runs corner to corner along the diagonal on this wide shape, as SwiftUI's topLeading → bottomTrailing does. */
  background: linear-gradient(104deg, var(--honey-500), #e8a88b, var(--peach-200));
  border: 1px solid var(--grout); border-radius: var(--r-nest); box-shadow: var(--shadow-lift);
}
.banner .string { position: absolute; inset: 0; width: 100%; height: 100%; animation: string-draw 1.4s ease-out both; }
.banner .string path { fill: none; stroke: rgba(140, 78, 52, 0.75); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2.5 6; }
.gt {
  position: absolute; left: calc((var(--i) + 0.5) / 7 * 100%); top: calc(50% + var(--dy) * var(--u));
  width: min(calc(92 * var(--u)), calc(100% / 7 - var(--gap))); aspect-ratio: 1 / 1.3; display: grid; place-items: center;
  background: var(--fill); border-radius: calc(14 * var(--u)); box-shadow: 0 6px 18px rgba(60, 48, 30, 0.2);
  transform: translate(-50%, -50%) rotate(var(--tilt));
  animation: tile-settle 0.3s cubic-bezier(0.34, 1.2, 0.5, 1) both; animation-delay: calc(0.15s + var(--i) * 0.08s);
}
.gt svg { width: 62%; aspect-ratio: 1; fill: none; stroke: rgba(60, 48, 30, 0.5); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes tile-settle {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) rotate(0deg); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--tilt)); }
}
@keyframes string-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.wordmark { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.wordmark img { width: 56px; height: 56px; border-radius: 28%; border: 1px solid var(--grout); }
.wordmark h1 { font-size: 2.125rem; letter-spacing: -0.015em; }

/* ---------- on this page ---------- */
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
a.chip { text-decoration: none; }
a.chip:hover { background: var(--cream-300); color: var(--fg-0); }

/* ---------- tutorials: numbered steps with screenshots ---------- */
.flow { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: flow; }
.flow > li { counter-increment: flow; position: relative; margin: 0; padding: 0 0 36px 58px; }
.flow > li::before {
  content: counter(flow); position: absolute; left: 0; top: 0; width: 38px; height: 38px; display: grid; place-items: center;
  font: 700 0.95rem var(--mono); border-radius: var(--r-tile); border: 1px solid var(--grout);
  background: var(--honey-100); color: var(--honey-700);
}
.flow > li:not(:last-child)::after {
  content: ""; position: absolute; left: 18.25px; top: 44px; bottom: 6px; width: 1.5px; border-radius: 2px; background: var(--grout-strong);
}
.flow h3 { margin: 0; padding-top: 6px; font-size: 1.22rem; }
.shot { margin: 16px 0 0; }
.shot img { display: block; max-width: 100%; height: auto; border-radius: var(--r-pebble); border: 1px solid var(--grout); box-shadow: var(--shadow-lift); }
.shot .dark { display: none; }
:root[data-theme="dark"] .shot.has-dark .light { display: none; }
:root[data-theme="dark"] .shot.has-dark .dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot.has-dark .light { display: none; }
  :root:not([data-theme="light"]) .shot.has-dark .dark { display: block; }
}
/* Draft builds only (site/build.py --draft): where a screenshot is still to be added. */
.shot.missing {
  display: grid; gap: 5px; padding: 16px 18px; font-size: 0.9rem; color: var(--fg-2);
  border: 1.5px dashed var(--grout-strong); border-radius: var(--r-pebble); background: var(--bg-0);
}
.shot.missing code { justify-self: start; }
.tuts { display: grid; gap: 10px; margin-top: 26px; }
.tut { display: flex; align-items: center; gap: 16px; padding: 14px 18px; text-decoration: none; color: inherit; transition: transform var(--settle), box-shadow var(--settle); }
.tut:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); color: inherit; }
.tut .num {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center; font: 700 0.95rem var(--mono);
  border-radius: var(--r-tile); border: 1px solid var(--grout); background: var(--honey-100); color: var(--honey-700);
}
.tut .what { flex: 1; display: grid; gap: 1px; }
.tut b { font: 600 1.12rem var(--display); color: var(--fg-0); }
.tut .what span { font-size: 0.93rem; color: var(--fg-2); }

/* ---------- grids ---------- */
.grid { display: grid; gap: 16px; margin-top: 22px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.sect-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; transition: transform var(--settle), box-shadow var(--settle); }
a.sect-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); color: inherit; }
.sect-card h3 { margin: 0; font-size: 1.28rem; }
.sect-card p { margin: 0; font-size: 0.96rem; }
.sect-card ul { list-style: none; padding: 0; margin: 4px 0 0; font-size: 0.93rem; }
.sect-card li { padding: 7px 0; border-top: 1px solid var(--grout); margin: 0; }
.sect-card li a { text-decoration: none; font-weight: 600; display: flex; justify-content: space-between; gap: 10px; }
.sect-card li a::after { content: "→"; color: var(--fg-3); }

/* ---------- steps on a strand ---------- */
.steps { list-style: none; padding: 0; margin: 26px 0 0; counter-reset: step; }
.steps > li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; margin: 0; position: relative; padding-bottom: 16px; }
.steps > li:not(:last-child)::before {
  content: ""; position: absolute; left: 21.25px; top: 50px; bottom: 6px; width: 1.5px; background: var(--grout-strong); border-radius: 2px;
}
.steps .num { counter-increment: step; }
.steps .num::before { content: counter(step); font: 700 0.95rem var(--mono); }
.steps .body h3 { margin: 0; font-size: 1.22rem; }
.steps .body > :first-child { margin-top: 0; }
.steps .body .eyebrow + h3 { margin-top: 6px; }

/* ---------- callouts ---------- */
.note {
  margin-top: 1.2rem; padding: 14px 16px; border-radius: var(--r-pebble);
  background: var(--honey-50); border: 1px solid var(--grout); font-size: 0.95rem;
}
.note.warn { background: var(--peach-50); border-color: var(--peach-200); }
.note.good { background: var(--sage-50); border-color: var(--sage-200); }
.note > :first-child { margin-top: 0; }
.note .eyebrow { margin-bottom: 4px; color: var(--honey-700); }
.note.warn .eyebrow { color: var(--peach-700); }
.note.good .eyebrow { color: var(--sage-700); }

/* ---------- code blocks ---------- */
.code { position: relative; margin-top: 1rem; }
.code pre {
  margin: 0; padding: 16px 18px; padding-right: 84px; overflow-x: auto; border-radius: var(--r-pebble);
  background: var(--code-bg); color: var(--code-fg); font: 0.86rem/1.6 var(--mono);
}
.code pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.code .copy { position: absolute; top: 9px; right: 9px; background: rgba(253, 250, 242, 0.1); color: var(--code-fg); border-color: rgba(253, 250, 242, 0.18); }
.code .copy:hover { background: rgba(253, 250, 242, 0.2); }
.copy {
  font: 700 0.76rem var(--ui); cursor: pointer; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--grout-strong); background: var(--bg-0); color: var(--fg-1);
  transition: background var(--settle);
}
.copy:hover { background: var(--bg-2); }
.copy.done { background: var(--sage-100); border-color: var(--sage-300); color: var(--sage-800); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin-top: 1.2rem; border: 1px solid var(--grout); border-radius: var(--r-pebble); background: var(--bg-0); box-shadow: var(--shadow-tile); }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
th, td { text-align: left; padding: 12px 16px; vertical-align: top; border-top: 1px solid var(--grout); }
thead th { border-top: 0; font: 600 0.68rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); background: var(--bg-1); white-space: nowrap; }
tbody th { font-weight: 700; color: var(--fg-0); }
td .chip { font-size: 0.72rem; padding: 2px 8px; }
.yes { color: var(--sage-700); font-weight: 700; }
.no { color: var(--fg-3); }

/* ---------- lens library ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.filters button {
  font: 700 0.86rem var(--ui); cursor: pointer; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--grout-strong); background: var(--bg-0); color: var(--fg-2);
}
.filters button[aria-pressed="true"] { background: var(--ink-solid); border-color: var(--ink-solid); color: var(--on-solid); }
.lens-group { margin-top: 2.6rem; }
.lens-group > h2 { margin-top: 0; }
.lens-group > p { max-width: 660px; }
.lenses { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; margin-top: 20px; }
.lens { display: flex; flex-direction: column; gap: 14px; }
.lens header { display: flex; gap: 13px; align-items: flex-start; }
.lens header h3 { margin: 1px 0 0; font-size: 1.14rem; }
.lens header p { margin: 2px 0 0; font-size: 0.87rem; color: var(--fg-2); line-height: 1.35; }
.lens blockquote {
  margin: 0; padding: 12px 14px 12px 16px; border-radius: var(--r-tile); position: relative; flex: 1;
  background: var(--bg-1); border: 1px solid var(--grout); font-size: 0.93rem; line-height: 1.55; color: var(--fg-0);
}
.lens blockquote::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--t-solid, var(--accent)); }
.lens footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lens .meta { display: flex; gap: 6px; flex-wrap: wrap; }
.shape { background: var(--denim-100); color: var(--denim-700); border-color: transparent; }
.lens[hidden], .lens-group[hidden] { display: none; }

/* ---------- field grid (what a lens can read) ---------- */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 1.1rem; }
.field { display: flex; gap: 10px; padding: 11px 12px; background: var(--bg-0); border: 1px solid var(--grout); border-radius: var(--r-tile); }
.field svg { width: 18px; height: 18px; color: var(--sage-700); flex: none; margin-top: 2px; }
.field b { display: block; color: var(--fg-0); font-size: 0.9rem; }
.field span { font: 0.72rem var(--mono); color: var(--fg-2); }
.swap { display: grid; gap: 10px; margin-top: 1.1rem; }
.swap > div { padding: 14px 16px; background: var(--peach-50); border: 1px solid var(--peach-200); border-radius: var(--r-tile); }
.swap b { display: block; color: var(--fg-0); }
.swap span { display: block; font-size: 0.92rem; color: var(--fg-2); }
.swap em { display: block; font-style: normal; font-size: 0.92rem; color: var(--accent-fg); margin-top: 3px; }
.swap em::before { content: "↳ "; }

/* ---------- FAQ ---------- */
details { border: 1px solid var(--grout); border-radius: var(--r-pebble); background: var(--bg-0); margin-top: 10px; box-shadow: var(--shadow-tile); }
summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--fg-0); list-style: none; display: flex; justify-content: space-between; gap: 14px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 1.2rem var(--mono); color: var(--fg-3); line-height: 1; }
details[open] summary::after { content: "–"; }
details .ans { padding: 0 18px 16px; font-size: 0.96rem; }
details .ans > :first-child { margin-top: 0; }
summary q { quotes: none; font: 600 0.88rem var(--mono); }

/* ---------- footer ---------- */
.site-foot { margin-top: 84px; border-top: 1px solid var(--grout); padding: 30px 0 46px; font-size: 0.9rem; color: var(--fg-3); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
.site-foot a { color: var(--fg-2); text-decoration: none; }
.site-foot a:hover { color: var(--fg-0); }
.site-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .banner { --gap: 8px; border-radius: 20px; }
  .wordmark img { width: 44px; height: 44px; }
  .wordmark h1 { font-size: 1.7rem; }
  .flow > li { padding-left: 48px; }
  .steps > li { grid-template-columns: 38px 1fr; gap: 12px; }
  .steps .tile { width: 38px; height: 38px; }
  .steps > li:not(:last-child)::before { left: 18.25px; top: 44px; }
  h2 { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
@media print {
  .site-head, .site-foot, .side, .pager, .copy, .filters { display: none; }
  .layout { display: block; }
  body { background: #fff; }
}

/* Icons come from /assets/icons.svg via <use>; stroke styling is inherited from here. */
svg.i { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sect-card h3 a { color: inherit; text-decoration: none; }
.sect-card h3 a:hover { color: var(--accent-fg); }

/* Tables keep a readable width and scroll sideways on small screens. */
.table-wrap table { min-width: 560px; }
.table-wrap table.wide { min-width: 780px; }

/* ---------- theme control (System / Light / Dark, as in the app) ---------- */
.theme { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--grout); }
.theme button {
  width: 28px; height: 26px; display: grid; place-items: center; cursor: pointer; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--fg-3);
}
.theme button:hover { color: var(--fg-0); }
.theme button[aria-pressed="true"] { background: var(--bg-0); color: var(--fg-0); box-shadow: var(--shadow-tile); }
.theme svg { width: 15px; height: 15px; }
html:not(.js) .theme { display: none; }

/* Narrow screens: the sidebar folds behind the Menu button. Without JavaScript it stays open. */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .side { position: static; max-height: none; overflow: visible; margin-left: 0; padding: 18px 0 20px; border-bottom: 1px solid var(--grout); }
  html.js .side { display: none; }
  html.js .side.open { display: block; }
  html.js .menu-btn { display: inline-block; }
  .doc { padding-top: 28px; }
  .site-head .wrap { gap: 10px; }
}
@media (max-width: 430px) { .brand span { display: none; } }
@media print { .theme { display: none; } }