/* guide.css — the DIY-hub RESOURCE PAGE KIT, v1 (locked 2026-08-12).
   Sits ON TOP of kit.css (the VV base tokens/atoms). Every class here is a
   named component of the resource-guide design system; the written contract
   is apps/diy-hub/content/RESOURCE-KIT.md and the rendered library is
   kit.html beside this file. Change components only against that spec. */

body { background: var(--paper); }

/* ── the fixed chapter rail (left) with per-chapter done state ─────────── */
.rail2 { position: fixed; left: max(16px, calc(50vw - 660px)); top: 50%; transform: translateY(-50%);
  z-index: 30; display: flex; flex-direction: column; gap: 3px; }
body.in-app .rail2 { left: max(252px, calc(50vw - 542px)); }
.rail2 a { display: flex; align-items: center; gap: 9px; padding: 4px 6px; text-decoration: none; }
.rail2 a i { font-family: var(--mono); font-size: .6rem; font-weight: 700; font-style: normal;
  color: var(--faint); width: 20px; }
.rail2 a span { font-size: .75rem; color: var(--mut); opacity: 0; transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease; white-space: nowrap; }
.rail2:hover a span { opacity: 1; transform: none; }
.rail2 a.on i { color: var(--accent-2); }
.rail2 a.on span { color: var(--ink); font-weight: 600; }
.rail2 a.on::before { content: ""; width: 3px; height: 13px; background: var(--accent); margin-right: -3px; }
.rail2 a.done i { color: var(--ok); }
.rail2 a.done i::after { content: " ✓"; }
@media (max-width: 1320px) { .rail2 { display: none; } }

/* ── page grid: gutter · 680 column · 250 margin lane ──────────────────── */
.page { display: grid; grid-template-columns: 1fr min(680px, calc(100vw - 48px)) 1fr;
  padding: 54px 0 90px; }
body.in-app #resource-root.page, body.in-app #resource-root .page {
  grid-template-columns: 1fr min(680px, calc(100vw - 284px)) 1fr;
}
@media (max-width: 880px) {
  body.in-app #resource-root.page, body.in-app #resource-root .page {
    grid-template-columns: 1fr min(680px, calc(100vw - 108px)) 1fr;
  }
}
.page > * { grid-column: 2; min-width: 0; }
.mstat { grid-column: 3; justify-self: start; width: 200px; margin-left: 46px; align-self: start;
  position: sticky; top: 100px; border-left: 2px solid var(--line); padding-left: 16px; }
.mstat .lbl { display: block; margin-bottom: 7px; }
.mstat .big { display: block; font-family: var(--sans); font-size: 1.6rem; font-weight: 800;
  letter-spacing: -.03em; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.mstat p { font-size: .78rem; line-height: 1.5; color: var(--mut); margin: 0; }
@media (max-width: 1330px) {
  .mstat { grid-column: 2; position: static; width: auto; margin: 0 0 20px; justify-self: stretch; }
}

/* ── header, byline (component: .byline) ───────────────────────────────── */
.kick2 { font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-2); }
.page h1 { font-size: clamp(2rem, 5vw, 2.85rem); line-height: 1.07; letter-spacing: -.03em; margin: 16px 0 18px; }
.standfirst { font-size: 1.15rem; line-height: 1.55; color: var(--mut); margin: 0 0 28px; }
.byline { display: flex; align-items: center; gap: 14px; padding: 18px 0; margin-bottom: 26px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.avat2 { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--mono);
  font-size: .8rem; font-weight: 700; position: relative; flex: 0 0 auto; }
.avat2::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--paper); }
/* Round the img itself, never overflow-hide the container: the ::after brand dot
   overhangs the circle by 1px and container clipping cut it to a crescent. */
.avat2--photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.byline .who b { display: block; font-size: .95rem; color: var(--ink); }
.byline .who span { font-size: .8rem; color: var(--mut); }
.byline .socs { margin-left: auto; display: flex; gap: 8px; }
.socs a { width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.socs a:hover { border-color: var(--ink); color: var(--ink); background: var(--cell); }
.socs svg { width: 14px; height: 14px; fill: currentColor; }

.page > p, .chapx > p { font-size: 1.03rem; line-height: 1.72; color: var(--ink-2); margin: 0 0 22px; }
.page > p.lede { font-size: 1.17rem; color: var(--ink); }
/* Content links: blue, no underline, so they read as clickable without breaking the
   text rhythm. Underline appears on hover only. Scoped to paragraphs and list items so
   button-shaped links (.b), social circles, and nav chrome keep their own treatment.
   The paragraph scope also reaches the Studio's Tiptap editor, keeping canvas parity. */
.page p a, .page li a { color: var(--link); text-decoration: none; font-weight: 500; }
.page p a:hover, .page li a:hover { text-decoration: underline; }
.page p a[data-pending="link"] { color: var(--mut); cursor: default; }

/* ── COMPONENT: chapter head + cover ───────────────────────────────────── */
.chapx { grid-column: 2; margin-top: 74px; min-width: 0; }
.chap-head { margin-bottom: 20px; }
.chap-head .row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.chap-head .row .n { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: #fff;
  background: var(--ink); padding: 4px 9px; }
.chap-head .row svg.i { width: 16px; height: 16px; color: var(--accent-2); }
.chap-head h2 { font-size: 1.9rem; letter-spacing: -.028em; line-height: 1.1; margin: 0 0 6px; }
.chap-head .sub2 { font-size: 1.05rem; color: var(--mut); margin: 0; }
.cover { border: 1px solid var(--line); background: var(--cell); margin: 22px 0 36px; }
.cover .cin { padding: clamp(18px, 3.4vw, 36px); }
.cover .cin svg { display: block; width: 100%; height: auto; }
.cover .cfoot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px;
  border-top: 1px solid var(--line); background: var(--cell-2); }
/* photo figure: kit.css .fig, with the two-label caption strip the guide uses */
.fig--split figcaption { display: flex; justify-content: space-between; gap: 14px; }
.fig__frame { overflow: hidden; }

/* ── COMPONENT: toolcard (real logo, why, price, CTA) ──────────────────── */
.toolcard { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 18px;
  align-items: center; border: 1px solid var(--line); background: var(--cell);
  padding: 18px 20px; margin: 24px 0; }
.toolcard .tile { width: 64px; height: 64px; border: 1px solid var(--line); background: #fff;
  display: flex; align-items: center; justify-content: center; }
.toolcard .tile img { width: 40px; height: 40px; object-fit: contain; display: block; }
.toolcard .meta { min-width: 0; }
.toolcard .meta .toprow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.toolcard .meta b { font-size: 1.02rem; color: var(--ink); letter-spacing: -.01em; }
.toolcard .meta .cat { font-family: var(--mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.toolcard .meta .why { margin: 5px 0 0; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.toolcard .meta .note { margin: 6px 0 0; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.toolcard .meta .note--aff { color: var(--mut); }
.toolcard .act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
@media (max-width: 640px) {
  .toolcard { grid-template-columns: 52px minmax(0,1fr); }
  .toolcard .tile { width: 52px; height: 52px; }
  .toolcard .act { grid-column: 1 / -1; flex-direction: row; }
  .toolcard .act .b { flex: 1; }
}

/* ── COMPONENT: checklist (persists to localStorage) ───────────────────── */
.check { border: 1px solid var(--line); background: var(--cell); margin: 26px 0 0; }
.check__h { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--cell-2); }
.check__h .left { display: flex; align-items: center; gap: 10px; }
.check__h svg.i { width: 15px; height: 15px; color: var(--accent-2); }
.check__h .prog { font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; color: var(--mut); }
.ck { display: flex; align-items: center; gap: 13px; padding: 13px 18px;
  border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; }
.ck:last-child { border-bottom: 0; }
.ck:hover { background: var(--cell-2); }
.ck input { position: absolute; opacity: 0; pointer-events: none; }
.ck .box { width: 18px; height: 18px; border: 1.5px solid var(--line-2); background: #fff;
  flex: 0 0 auto; margin-top: 2px; display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease; }
.ck .box svg { width: 11px; height: 11px; opacity: 0; transform: scale(.6); transition: all .12s ease; }
.ck input:checked ~ .box { background: var(--ok); border-color: var(--ok); }
.ck input:checked ~ .box svg { opacity: 1; transform: none; }
.ck .txt { font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.ck input:checked ~ .txt { color: var(--mut); text-decoration: line-through;
  text-decoration-color: var(--line-2); }
.ck .txt b { color: var(--ink); }
.ck input:checked ~ .txt b { color: var(--mut); }

/* ── COMPONENT: promptcard with a working copy button ──────────────────── */
.promptcard { border: 1px solid var(--line); background: var(--cell); margin: 24px 0; }
.promptcard__h { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid var(--line); }
.promptcard__h .lbl b { color: var(--accent-2); }
.promptcard pre { margin: 0; padding: 17px 18px; font-family: var(--mono); font-size: .84rem;
  line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; }
.copybtn { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: #fff; border: 0; padding: 6px 12px; cursor: pointer; }
.copybtn.ok { background: var(--ok); }

/* ── shared small components ───────────────────────────────────────────── */
.steps2 { counter-reset: st; border: 1px solid var(--line); background: var(--cell); margin: 24px 0; }
.st2 { display: flex; align-items: center; gap: 15px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.st2:last-child { border-bottom: 0; }
.st2::before { counter-increment: st; content: counter(st, decimal-leading-zero);
  font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--accent-2); padding-top: 3px; }
.st2 p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
.st2 b { color: var(--ink); }
.warn2 { display: flex; gap: 14px; border: 1px solid var(--accent); background: var(--accent-wash);
  padding: 16px 20px; margin: 24px 0; }
.warn2 svg.i { color: var(--accent-2); margin-top: 2px; flex: 0 0 auto; transform: rotate(-8deg); }
.warn2 b { display: block; color: var(--ink); font-size: .92rem; }
.warn2 p { margin: 3px 0 0; font-size: .87rem; color: var(--ink-2); }
.shot2 { border: 1px solid var(--line); background: var(--cell-2); aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center; margin: 24px 0; }
.shot2 span { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); text-align: center; padding: 0 20px; }
.pquote { border-left: 3px solid var(--accent); padding: 4px 0 4px 22px; margin: 28px 0; }
.pquote p { font-size: 1.2rem; line-height: 1.45; color: var(--ink); font-weight: 500; margin: 0; }
.pquote .lbl { display: block; margin-top: 8px; }

.endcard { background: var(--ink); color: #fff; padding: 36px; margin-top: 30px; }
.endcard h3 { color: #fff; font-size: 1.35rem; margin: 0 0 8px; letter-spacing: -.02em; }
.endcard p { color: rgba(255,255,255,.66); font-size: .92rem; margin: 0 0 22px; }
.endcard .b--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.disc2 { margin-top: 30px; }
.disc2 p { font-size: .8rem; color: var(--mut); line-height: 1.6; }

/* v1.1 notes (Liam 2026-08-12): deal-forward tool notes, tickable steps */
.toolcard .note--deal { color: var(--accent-2); font-weight: 700; }
.st2 label.tick { display: flex; align-items: center; margin-left: auto; cursor: pointer; padding-left: 12px; }
.st2 label.tick input { position: absolute; opacity: 0; pointer-events: none; }
.st2 label.tick .box { width: 18px; height: 18px; border: 1.5px solid var(--line-2); background: #fff;
  display: flex; align-items: center; justify-content: center; transition: background .12s ease, border-color .12s ease; }
.st2 label.tick .box svg { width: 11px; height: 11px; opacity: 0; transform: scale(.6); transition: all .12s ease; }
.st2 label.tick input:checked ~ .box { background: var(--ok); border-color: var(--ok); }
.st2 label.tick input:checked ~ .box svg { opacity: 1; transform: none; }