/* ═══════════════════════════════════════════════════════════════════════
   guide.css — the documentation site at /guide.

   Two halves: the docs chrome (sidebar, article column, changelog), and the
   figure palette that guide-art.js paints its SVG diagrams with. The figures
   are classed rather than colored inline so they follow the theme.
   ═══════════════════════════════════════════════════════════════════════ */

body.docs {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  margin: 0;
  min-height: 100vh;
}

/* ── TOP BAR ────────────────────────────────────────────────────────── */

.doc-top {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 62px;
  padding: 0 22px;
  background: var(--topbar-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.doc-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.doc-logo-mark {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(160deg, var(--green-hi), var(--green-dark));
  box-shadow: 0 8px 20px -10px rgba(26,29,36,.5);
  display: grid; place-items: center; font-size: 18px; color: #fff;
}
.doc-logo-img { display: block; height: 32px; width: auto; }
.doc-logo-text {
  font-family: var(--font); font-size: 18px; font-weight: 700;
  letter-spacing: -.03em; color: var(--text);
}
.doc-logo-tag {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0;
  color: var(--green-dark); background: var(--green-soft);
  padding: 3px 8px; border-radius: 999px; margin-left: 2px;
}

.doc-top-spacer { flex: 1; }

.doc-search {
  position: relative;
  width: min(300px, 34vw);
}
.doc-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: 600 13.5px var(--font-ui);
  outline: none;
}
.doc-search input:focus { border-color: var(--green); }
.doc-search svg {
  position: absolute; left: 11px; top: 11px;
  width: 16px; height: 16px; color: var(--muted);
  pointer-events: none;
}

.doc-top .btn-mini {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--text);
  font: 700 13px var(--font-ui); cursor: pointer; text-decoration: none;
}
.doc-top .btn-mini:hover { border-color: var(--border-2); }
.doc-top .btn-mini.go {
  background: var(--green); border-color: var(--green-dark);
  color: #fff; box-shadow: 0 1px 2px rgba(26,29,36,.06), 0 6px 14px -10px rgba(26,29,36,.4);
}
.doc-top .btn-mini svg { width: 17px; height: 17px; }

.doc-burger {
  display: none;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); color: var(--text); cursor: pointer;
}
.doc-burger svg { width: 18px; height: 18px; }

/* ── SHELL ──────────────────────────────────────────────────────────── */

.doc-shell {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: 40px;
  width: min(1240px, 100% - 44px);
  margin: 0 auto;
  align-items: start;
}

/* ── SIDEBAR ────────────────────────────────────────────────────────── */

.doc-side {
  position: sticky;
  top: 62px;
  max-height: calc(100vh - 62px);
  overflow-y: auto;
  padding: 26px 0 60px;
  scrollbar-width: thin;
}

.doc-side-group + .doc-side-group { margin-top: 22px; }
.doc-side-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: var(--muted);
  padding: 0 12px 8px;
}

.doc-side a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--text-2);
  font: 700 13.5px var(--font-ui);
  text-decoration: none;
  line-height: 1.3;
}
.doc-side a:hover { background: var(--surface-2); color: var(--text); }
.doc-side a.on {
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 700;
}
[data-theme="dark"] .doc-side a.on { color: var(--green-hi); }
.doc-side a .doc-side-dot {
  width: 7px; height: 7px; border-radius: 3px;
  background: currentColor; opacity: .32; flex-shrink: 0;
}
.doc-side a.on .doc-side-dot { opacity: 1; }

/* ── ARTICLE ────────────────────────────────────────────────────────── */

.doc-main { padding: 34px 0 100px; min-width: 0; }

.doc-eyebrow {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: var(--green-dark);
  background: var(--green-soft); padding: 5px 11px; border-radius: 999px;
  margin-bottom: 14px;
}
.doc-eyebrow.blue   { color: var(--blue-dark);   background: var(--blue-soft); }
.doc-eyebrow.purple { color: var(--purple-dark); background: var(--purple-soft); }
.doc-eyebrow.gold   { color: var(--gold-dark);   background: var(--gold-soft); }

.doc-main h1 {
  font-family: var(--font);
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 700; letter-spacing: -.035em;
  line-height: 1.1; margin: 0 0 12px;
}
.doc-lede {
  font-size: 17px; line-height: 1.6; color: var(--text-2);
  margin: 0 0 34px; max-width: 66ch;
}

.doc-main h2 {
  font-family: var(--font);
  font-size: 25px; font-weight: 700; letter-spacing: -.025em;
  margin: 46px 0 12px; scroll-margin-top: 82px;
}
.doc-main h3 {
  font-family: var(--font);
  font-size: 18px; font-weight: 700; letter-spacing: -.015em;
  margin: 30px 0 8px; scroll-margin-top: 82px;
}
.doc-main p { font-size: 15px; line-height: 1.68; color: var(--text-2); margin: 0 0 14px; max-width: 72ch; }
.doc-main p strong, .doc-main li strong { color: var(--text); font-weight: 700; }
.doc-main a { color: var(--green-dark); font-weight: 700; }
[data-theme="dark"] .doc-main a { color: var(--green-hi); }

.doc-main ul, .doc-main ol { margin: 0 0 16px; padding-left: 22px; max-width: 72ch; }
.doc-main li { font-size: 15px; line-height: 1.66; color: var(--text-2); margin-bottom: 7px; }

.doc-main code {
  font-family: var(--font-mono); font-size: 12.8px;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 1.5px 6px; border-radius: 6px; color: var(--text);
}

.doc-hr { border: 0; border-top: 1px solid var(--border); margin: 44px 0; }

/* numbered walkthrough steps */
.doc-steps { list-style: none; padding: 0; margin: 0 0 22px; counter-reset: st; max-width: 74ch; }
.doc-steps > li {
  position: relative;
  counter-increment: st;
  padding: 0 0 22px 46px;
  margin: 0;
  border-left: 1px solid var(--border);
  margin-left: 15px;
}
.doc-steps > li:last-child { border-left-color: transparent; padding-bottom: 4px; }
.doc-steps > li::before {
  content: counter(st);
  position: absolute; left: -16px; top: -2px;
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--green); color: #fff;
  display: grid; place-items: center;
  font: 700 13px var(--font-ui);
  box-shadow: 0 1px 2px rgba(26,29,36,.06), 0 6px 14px -10px rgba(26,29,36,.4);
}
.doc-steps > li > b {
  display: block; color: var(--text); font-size: 15.5px;
  font-weight: 700; margin-bottom: 5px;
}

/* callouts */
.doc-note {
  display: flex; gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--blue-soft);
  border: 1px solid transparent;
  margin: 0 0 20px;
  max-width: 74ch;
}
.doc-note .doc-note-ico { font-size: 16px; line-height: 1.4; flex-shrink: 0; }
.doc-note p { margin: 0; font-size: 14px; color: var(--blue-dark); line-height: 1.6; }
.doc-note p strong { color: var(--blue-dark); }
.doc-note.warn { background: var(--orange-soft); }
.doc-note.warn p, .doc-note.warn p strong { color: var(--orange-dark); }
.doc-note.tip { background: var(--green-soft); }
.doc-note.tip p, .doc-note.tip p strong { color: var(--green-dark); }
[data-theme="dark"] .doc-note p, [data-theme="dark"] .doc-note p strong { color: var(--blue); }
[data-theme="dark"] .doc-note.warn p, [data-theme="dark"] .doc-note.warn p strong { color: var(--orange); }
[data-theme="dark"] .doc-note.tip p, [data-theme="dark"] .doc-note.tip p strong { color: var(--green-hi); }

/* module cards */
.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  margin: 0 0 26px;
}
.doc-card {
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-card);
}
.doc-card-ico {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-size: 19px;
  margin-bottom: 11px;
}
.doc-card b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.doc-card small { display: block; font-size: 13px; line-height: 1.55; color: var(--text-2); }

/* key/value spec table */
.doc-table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14px; }
.doc-table th, .doc-table td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top; line-height: 1.55;
}
.doc-table th { font-weight: 700; color: var(--text); font-size: 12.5px; }
.doc-table td { color: var(--text-2); }
.doc-table td:first-child { color: var(--text); font-weight: 700; white-space: nowrap; }
.doc-table-wrap { overflow-x: auto; }

/* ── FIGURES ────────────────────────────────────────────────────────── */

.doc-fig { margin: 22px 0 30px; }
.doc-fig-frame {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--lift-card);
  overflow: hidden;
}
.doc-fig svg { display: block; width: 100%; height: auto; }
.doc-fig figcaption {
  font-size: 13px; color: var(--muted);
  margin-top: 10px; font-weight: 600; line-height: 1.55;
}
.doc-fig-key {
  list-style: none; counter-reset: fk;
  padding: 0; margin: 14px 0 0; max-width: 74ch;
}
.doc-fig-key li {
  counter-increment: fk;
  position: relative;
  padding-left: 30px;
  font-size: 14px; line-height: 1.6; color: var(--text-2);
  margin-bottom: 8px;
}
.doc-fig-key li::before {
  content: counter(fk);
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--text); color: var(--card);
  display: grid; place-items: center;
  font: 700 11px var(--font-ui);
}
.doc-fig-key li b { color: var(--text); font-weight: 700; }

/* ── the figure palette ─────────────────────────────────────────────── */

.doc-fig svg text { font-family: var(--font-ui); }

.f-bg      { fill: var(--bg); }
.f-surface { fill: var(--surface-2); }
.f-card    { fill: var(--card); stroke: var(--border); stroke-width: 1; }
.f-card-drag { fill: var(--card); stroke: var(--green); stroke-width: 2; stroke-dasharray: 5 3; }
.f-chip    { fill: var(--surface-2); }
.f-input   { fill: var(--surface-2); stroke: var(--border-2); stroke-width: 1; }
.f-scrim   { fill: var(--surface-2); }
.f-chrome  { fill: var(--surface-2); }
.f-dot     { fill: var(--border-2); }
.f-url     { fill: var(--card); }
.f-url-t   { fill: var(--muted); }
.f-topbar  { fill: var(--card); }

.f-nav        { fill: var(--nav-bg); }
.f-nav-on     { fill: rgba(255,255,255,.11); }
.f-nav-t      { fill: #fff; }
.f-nav-m      { fill: rgba(255,255,255,.6); }
.f-nav-ico    { fill: rgba(255,255,255,.32); }
.f-nav-ico-on { fill: var(--green-hi); }

.f-h        { fill: var(--text); }
.f-m        { fill: var(--muted); }
.f-faint    { fill: var(--faint); }
.f-label    { fill: var(--text); }
.f-txt      { fill: var(--border-2); }
.f-txt2     { fill: var(--border); }
.f-on-color { fill: #fff; }

.f-green  { fill: var(--green); }
.f-blue   { fill: var(--blue); }
.f-purple { fill: var(--purple); }
.f-orange { fill: var(--orange); }
.f-red    { fill: var(--red); }

.f-green-soft  { fill: var(--green-soft); }
.f-blue-soft   { fill: var(--blue-soft); }
.f-purple-soft { fill: var(--purple-soft); }
.f-orange-soft { fill: var(--orange-soft); }
.f-gold-soft   { fill: var(--gold-soft); }
.f-red-soft    { fill: var(--red-soft); }

.f-green-t  { fill: var(--green-dark); }
.f-blue-t   { fill: var(--blue-dark); }
.f-purple-t { fill: var(--purple-dark); }
.f-orange-t { fill: var(--orange-dark); }
.f-gold-t   { fill: var(--gold-dark); }
.f-red-t    { fill: var(--red-dark); }

[data-theme="dark"] .f-green-t  { fill: var(--green-hi); }
[data-theme="dark"] .f-blue-t   { fill: var(--blue); }
[data-theme="dark"] .f-purple-t { fill: #c79bff; }
[data-theme="dark"] .f-orange-t { fill: var(--orange); }
[data-theme="dark"] .f-gold-t   { fill: var(--gold); }
[data-theme="dark"] .f-red-t    { fill: var(--red); }

.f-pill   { fill: var(--surface-2); }
.f-pill-t { fill: var(--muted); }
.f-fade   { fill: var(--surface-2); opacity: .65; }
.f-off    { fill: var(--border-2); }
.f-knob   { fill: var(--card); }

.f-marker    { fill: var(--text); }
.f-marker-t  { fill: var(--card); }
/* the inverse pair, for a callout that lands on the navy sidebar */
.f-marker-l  { fill: #ffffff; }
.f-marker-lt { fill: #1a1d24; }

.f-sq-l    { fill: #eef1f8; }
.f-sq-d    { fill: #a9b6dc; }
.f-sq-from { fill: #ffd56b; }
.f-piece-w { fill: #ffffff; stroke: #4a4a4a; stroke-width: .5; }
.f-piece-b { fill: #2b2b2b; }
.f-hint    { fill: rgba(26,29,36,.26); }

.f-link { fill: none; stroke: var(--border-2); stroke-width: 1.6; }
.f-grip { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; }
.f-qr    { fill: #ffffff; stroke: var(--border-2); stroke-width: 1; }
.f-qr-px { fill: #1a1d24; }

/* ── CHANGELOG ──────────────────────────────────────────────────────── */

.cl-entry {
  position: relative;
  padding: 0 0 40px 34px;
  border-left: 1px solid var(--border);
  margin-left: 8px;
}
.cl-entry:last-child { border-left-color: transparent; padding-bottom: 0; }
.cl-entry::before {
  content: '';
  position: absolute; left: -8px; top: 6px;
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--border-2);
  border: 3px solid var(--bg);
}
.cl-entry.latest::before { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }

.cl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.cl-v {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 7px; color: var(--text);
}
.cl-entry.latest .cl-v {
  background: var(--green); border-color: var(--green-dark);
  color: #fff;
}
.cl-date { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.cl-current {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0;
  background: var(--gold-soft); color: var(--gold-dark);
  padding: 3px 9px; border-radius: 999px;
}
[data-theme="dark"] .cl-current { color: var(--gold); }

.cl-entry h3 {
  font-family: var(--font); font-size: 20px; font-weight: 700;
  letter-spacing: -.02em; margin: 6px 0 6px; color: var(--text);
  scroll-margin-top: 82px;
}
.cl-summary { font-size: 14.5px; line-height: 1.62; color: var(--text-2); margin: 0 0 14px; max-width: 70ch; }

.cl-list { list-style: none; padding: 0; margin: 0; max-width: 74ch; }
.cl-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.6; color: var(--text-2);
  margin-bottom: 9px;
}
.cl-kind {
  flex-shrink: 0;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0;
  padding: 3px 8px; border-radius: 999px;
  margin-top: 2px; min-width: 62px; text-align: center;
}
.cl-kind.green  { background: var(--green-soft);  color: var(--green-dark); }
.cl-kind.blue   { background: var(--blue-soft);   color: var(--blue-dark); }
.cl-kind.orange { background: var(--orange-soft); color: var(--orange-dark); }
.cl-kind.red    { background: var(--red-soft);    color: var(--red-dark); }
[data-theme="dark"] .cl-kind.green  { color: var(--green-hi); }
[data-theme="dark"] .cl-kind.blue   { color: var(--blue); }
[data-theme="dark"] .cl-kind.orange { color: var(--orange); }
[data-theme="dark"] .cl-kind.red    { color: var(--red); }

/* ── PAGE FOOT / PREV-NEXT ──────────────────────────────────────────── */

.doc-foot-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 54px; padding-top: 28px;
  border-top: 1px solid var(--border);
}
.doc-foot-nav a {
  display: block; padding: 15px 18px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--card); text-decoration: none;
  box-shadow: var(--lift-card);
}
.doc-foot-nav a:hover { border-color: var(--green); }
.doc-foot-nav a.next { text-align: right; }
.doc-foot-nav span { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: var(--muted); margin-bottom: 4px; }
.doc-foot-nav b { display: block; font-size: 15px; font-weight: 700; color: var(--text); }

/* ── SEARCH RESULTS ─────────────────────────────────────────────────── */

.doc-search-hits {
  position: absolute; top: 46px; left: 0; right: 0; z-index: 80;
  background: var(--card);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--pop);
  max-height: 60vh; overflow-y: auto;
  padding: 6px;
}
.doc-search-hits a {
  display: block; padding: 9px 11px; border-radius: 8px;
  text-decoration: none; color: var(--text);
}
.doc-search-hits a:hover, .doc-search-hits a.on { background: var(--green-soft); }
.doc-search-hits b { display: block; font-size: 13.5px; font-weight: 700; }
.doc-search-hits small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.doc-search-empty { padding: 14px; font-size: 13px; color: var(--muted); text-align: center; }

/* ── WHAT'S NEW MODAL (used inside the app, not on this page) ───────── */

.whats-new-card { max-width: 560px; width: min(560px, calc(100vw - 36px)); }
.whats-new-head {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 4px;
}
.whats-new-badge {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  background: var(--green); color: #fff;
  padding: 4px 10px; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(26,29,36,.06), 0 6px 14px -10px rgba(26,29,36,.4);
}
.whats-new-title {
  font-family: var(--font); font-size: 21px; font-weight: 700;
  letter-spacing: -.02em; margin: 10px 0 6px;
}
.whats-new-sum { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0 0 14px; }
.whats-new-list {
  list-style: none; padding: 0; margin: 0;
  max-height: min(46vh, 340px); overflow-y: auto;
}
.whats-new-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.55; color: var(--text-2);
  margin-bottom: 9px;
}
.whats-new-more { font-size: 13px; color: var(--muted); margin: 10px 0 0; font-weight: 600; }
.whats-new-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.whats-new-foot a { font-size: 13.5px; font-weight: 700; color: var(--green-dark); text-decoration: none; }
.whats-new-foot a:hover { text-decoration: underline; }
[data-theme="dark"] .whats-new-foot a { color: var(--green-hi); }

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .doc-shell { grid-template-columns: 1fr; gap: 0; }
  .doc-burger { display: grid; place-items: center; }
  .doc-search { width: 190px; }
  .doc-side {
    position: fixed; inset: 62px auto 0 0;
    width: 268px; max-height: none; height: calc(100vh - 62px);
    background: var(--card);
    border-right: 1px solid var(--border);
    padding: 22px 14px 60px;
    transform: translateX(-102%);
    transition: transform .24s var(--ease);
    z-index: 55;
  }
  body.docs.nav-open .doc-side { transform: none; box-shadow: var(--pop); }
  .doc-scrim {
    position: fixed; inset: 62px 0 0; z-index: 50;
    background: rgba(10,20,26,.4);
    opacity: 0; pointer-events: none; transition: opacity .24s;
  }
  body.docs.nav-open .doc-scrim { opacity: 1; pointer-events: auto; }
  .doc-main { padding-top: 26px; }
}

@media (max-width: 640px) {
  .doc-top { padding: 0 14px; gap: 9px; height: 58px; }
  .doc-logo-tag, .doc-top .btn-mini span { display: none; }
  .doc-top .btn-mini { padding: 0 11px; }
  .doc-search { flex: 1; width: auto; }
  .doc-shell { width: calc(100% - 30px); }
  .doc-foot-nav { grid-template-columns: 1fr; }
  .doc-side { top: 58px; height: calc(100vh - 58px); }
  .doc-scrim { top: 58px; }
  .doc-fig-frame { padding: 9px; border-radius: 12px; }
  .cl-kind { min-width: 54px; }
}