/* RecapWP Docs page — "Ledger" design, page sheet.
 *
 * A faithful port of the design handoff's Docs sheet:
 *   docs/design_handoff_marketing_site_Ledger/design_files/site/docs-ledger.css
 * Ported VERBATIM so the design is pixel-exact. Local changes live in the marked
 * "THEME ADDITIONS" block at the foot — keep the ported rules untouched so the
 * next design drop can be diffed against this file.
 *
 * Layers ON TOP of ledger.css (the shared Ledger base), which must load first —
 * see the enqueue map in functions.php.
 *
 * SHARED WITH CHANGELOG: the handoff's Changelog page loads docs-ledger.css +
 * changelog-ledger.css. So when Changelog migrates it must load THIS sheet as its
 * base too (hero-docs, .docsearch, rail/prose atoms) plus its own ledger-changelog
 * sheet — the enqueue map takes an array for exactly that reason. Treat the ported
 * rules here as shared between the two pages, not docs-only.
 *
 * NAMING TRAP: `.docsearch` here is the design's HERO SEARCH FIELD. In the legacy
 * design (foundation.css) `.docsearch` is the search OVERLAY — a different thing
 * with the same name. They never collide because the two stacks never share a page,
 * but the Ledger search overlay is deliberately named `.dsq-*` below to keep it
 * unambiguous.
 */
/* RecapWP Docs — "Ledger" documentation page · extends site/home-ledger.css */

/* ── docs hero (inside .mast) ── */
.hero-docs{padding:64px 0 64px;max-width:860px}
.hero-docs h1{font:500 clamp(40px,4.6vw,58px)/1.08 var(--serif);letter-spacing:-.015em;color:#F5F1E7}
.hero-docs h1 em{font-style:normal;color:color-mix(in oklab,var(--ac) 82%,#fff)}
.hero-docs .sub{font:400 15px/1.75 var(--sans);color:#9AA5AE;margin-top:18px;max-width:620px}
.hero-docs .sub b{color:#D5DCE1;font-weight:600}
.docsearch{margin-top:30px;display:flex;align-items:center;gap:12px;max-width:560px;padding:0 16px;height:50px;
  border:1px solid var(--navy-ln);border-radius:3px;background:rgba(255,255,255,.045)}
.docsearch:focus-within{border-color:color-mix(in oklab,var(--ac) 55%,transparent)}
.docsearch svg{flex-shrink:0;color:#6E7B86}
.docsearch input{flex:1;min-width:0;background:transparent;border:0;outline:0;font:400 13.5px var(--sans);color:#E9E4D8}
.docsearch input::placeholder{color:#6E7B86}
.docsearch .k{flex-shrink:0;font:600 10px var(--mono);letter-spacing:.06em;color:#6E7B86;
  border:1px solid var(--navy-ln);padding:4px 8px 3px;border-radius:2px}
.hero-docs .hero-marks{max-width:620px}

/* ── two-column body ── */
.docs-main{padding:64px 0 92px}
.docs-grid{display:grid;grid-template-columns:232px minmax(0,1fr);gap:64px;align-items:start}

/* left rail */
.rail{position:sticky;top:28px;display:flex;flex-direction:column;gap:26px;
  max-height:calc(100vh - 56px);overflow-y:auto;padding-bottom:8px}
.rail-g .rl{font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--hint);margin-bottom:8px}
.rail-g a{display:flex;align-items:center;gap:8px;font:500 13px var(--sans);color:var(--mut);
  padding:7px 10px 7px 12px;border-left:2px solid var(--card-ln);border-radius:0}
.rail-g a:hover{color:var(--ink);text-decoration:none}
.rail-g a.on{color:var(--ac);border-left-color:var(--ac);font-weight:600}
.rail-g a .c{margin-left:auto;font:600 10px var(--mono);color:var(--hint)}
.rail-g a .ext{margin-left:auto;font:400 12px var(--serif);color:var(--hint)}

/* browse intro */
.browse-hd h2{font:500 clamp(24px,2.4vw,30px)/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.browse-hd h2 em{font-style:normal;color:var(--ac)}
.browse-hd .sub{font:400 13.5px/1.7 var(--sans);color:var(--mut);margin-top:10px;max-width:600px}
.browse-hd .sub b{font-weight:600;color:var(--ink)}

/* section cards */
.doc-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
.dcard{background:var(--card);border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);
  padding:20px 22px 18px;display:flex;flex-direction:column;color:inherit}
.dcard:hover{text-decoration:none;border-color:color-mix(in oklab,var(--ac) 45%,var(--card-ln))}
.dcard .hd{display:flex;align-items:baseline;gap:10px}
.dcard .n{font:500 14px var(--serif);color:color-mix(in oklab,var(--ac) 80%,#5B4A1E)}
.dcard h3{font:600 15px var(--serif);color:var(--ink)}
.dcard p{font:400 12.5px/1.65 var(--sans);color:var(--mut);margin-top:7px}
.dcard .ft{font:600 9.5px var(--mono);letter-spacing:.14em;color:var(--hint);margin-top:auto;padding-top:14px}

/* pro tag */
.protag{display:inline-block;font:600 8.5px var(--mono);letter-spacing:.16em;color:var(--ac);
  border:1px solid color-mix(in oklab,var(--ac) 35%,#fff);background:color-mix(in oklab,var(--ac) 7%,#fff);
  padding:3px 7px 2px;border-radius:2px;vertical-align:2px}

/* ── article ── */
.doc-art{margin-top:76px;padding-top:56px;border-top:1px solid var(--card-ln)}
.art-crumb{display:flex;align-items:center;gap:8px;font:600 10px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--hint)}
.art-crumb a{color:var(--hint)}
.art-crumb a:hover{color:var(--ac);text-decoration:none}
.art-crumb .sep{color:var(--card-ln)}
.doc-art h2{font:500 clamp(28px,3vw,38px)/1.14 var(--serif);letter-spacing:-.01em;color:var(--ink);margin-top:16px}
.doc-art h2 em{font-style:normal;color:var(--ac)}
.art-std{font:400 15px/1.7 var(--sans);color:var(--mut);margin-top:14px;max-width:620px;text-wrap:pretty}
.art-meta{display:flex;margin-top:26px;border:1px solid var(--card-ln);border-radius:3px;background:var(--card);
  box-shadow:var(--shadow-1);overflow:hidden;max-width:640px}
.art-meta .m{flex:1;padding:12px 16px 11px;border-right:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.art-meta .m:last-child{border-right:0}
.art-meta .l{font:600 8.5px var(--mono);letter-spacing:.16em;color:var(--hint)}
.art-meta .v{font:600 12.5px var(--serif);color:var(--ink);margin-top:5px}

.doc-art h3{display:flex;align-items:center;gap:10px;font:600 17px var(--serif);color:var(--ink);margin-top:36px}
.doc-art h3 .hn{font:500 12px var(--mono);color:color-mix(in oklab,var(--ac) 80%,#5B4A1E);letter-spacing:.06em}
.doc-art p{font:400 13.5px/1.75 var(--sans);color:var(--mut);margin-top:10px;max-width:640px;text-wrap:pretty}
.doc-art p b,.doc-art li b{font-weight:600;color:var(--ink)}
.doc-art code{font:500 12px var(--mono);color:var(--ink);background:color-mix(in oklab,var(--card-ln) 38%,#fff);
  border:1px solid color-mix(in oklab,var(--card-ln) 80%,#fff);padding:1px 5px;border-radius:2px;white-space:nowrap}
.doc-art ul{list-style:none;margin:12px 0 0;display:flex;flex-direction:column;gap:8px;max-width:640px}
.doc-art li{position:relative;padding-left:18px;font:400 13.5px/1.65 var(--sans);color:var(--mut);text-wrap:pretty}
.doc-art li::before{content:'·';position:absolute;left:2px;top:-1px;color:var(--ac);font:600 16px var(--serif)}

/* callout */
.callout{margin-top:24px;max-width:640px;background:var(--card);border:1px solid var(--card-ln);
  border-radius:3px;box-shadow:var(--shadow-1);overflow:hidden}
.callout .cl{display:flex;align-items:center;gap:10px;padding:10px 18px 9px;font:600 9px var(--mono);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ac);
  border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff);
  background:color-mix(in oklab,var(--paper) 55%,#fff)}
.callout .cl::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ac)}
.callout p{margin:0;padding:13px 18px 15px;max-width:none;font-size:13px}

/* inline fix chip */
.fixchip{display:inline-block;font:600 9px var(--sans);letter-spacing:.1em;color:var(--pass);
  background:color-mix(in oklab,var(--pass) 8%,#fff);border:1px solid color-mix(in oklab,var(--pass) 24%,#fff);
  padding:2px 7px;border-radius:2px;vertical-align:1px}

/* settings register */
.setlist{margin-top:14px;max-width:640px;border:1px solid var(--card-ln);border-radius:3px;
  background:var(--card);box-shadow:var(--shadow-1);overflow:hidden}
.set{padding:14px 18px 13px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.set:last-child{border-bottom:0}
.set .shd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.set .nm{font:600 13px var(--sans);color:var(--ink)}
.set .shd .sp{flex:1}
.set .val{font:600 12.5px var(--serif);color:var(--ink);white-space:nowrap}
.set p{margin-top:6px;font-size:12.5px;max-width:none}

/* troubleshooting entries */
.trouble p .tl{font:600 9.5px var(--mono);letter-spacing:.16em;color:var(--hint);margin-right:8px}

/* next-up */
.next-up{margin-top:44px;max-width:640px;display:flex;align-items:center;gap:16px;padding:16px 22px;
  border:1px solid var(--card-ln);border-radius:3px;background:var(--card);box-shadow:var(--shadow-1);color:inherit}
.next-up:hover{text-decoration:none;border-color:color-mix(in oklab,var(--ac) 45%,var(--card-ln))}
.next-up .nl{font:600 9px var(--mono);letter-spacing:.16em;color:var(--hint)}
.next-up .nt{font:600 15px var(--serif);color:var(--ink);margin-top:3px}
.next-up .arw{margin-left:auto;font:400 18px var(--serif);color:var(--ac)}

@media (max-width:1080px){
  .docs-grid{grid-template-columns:1fr;gap:40px}
  .rail{position:static;max-height:none;flex-direction:row;flex-wrap:wrap;gap:24px}
  .doc-cards{grid-template-columns:1fr}
  .art-meta{flex-wrap:wrap}
  .art-meta .m{min-width:45%}
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME ADDITIONS — everything above this line is the verbatim design port.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── WP admin bar ─────────────────────────────────────────────────────────
 * .rail is position:sticky (top:28px). Every sticky top offset owes a matching
 * admin-bar rule or the rail tucks under the fixed bar for logged-in users.
 * Mirrors foundation.css's 32px desktop / 46px ≤782px pattern. Compound
 * selector on the single <body> — never `.admin-bar body …`.
 */
body.admin-bar .rail{top:calc(28px + 32px)}
@media screen and (max-width:782px){
  body.admin-bar .rail{top:calc(28px + 46px)}
}

/* ── search palette (.dsq-*) ──────────────────────────────────────────────
 * The design draws the hero search FIELD (.docsearch) and a ⌘K hint, but never
 * draws what opens — the handoff calls the field "presentational." A search box
 * and a ⌘K promise that do nothing are a defect, and the theme already ships a
 * working palette (main.js module 13, for the legacy design), so the Ledger docs
 * search is wired for real; this is the overlay it opens.
 *
 * Not in the design, so it is built FROM the design: the navy plate + top gold
 * hairline of .mock/.tier-col.pop, the mono letterspaced labels of .hero-marks,
 * 2-5px radii, and the same token set. No new colours are introduced.
 *
 * Named .dsq-* rather than .docsearch-* on purpose: `.docsearch` is already the
 * hero field in this sheet (and the overlay in the legacy foundation.css) — see
 * the NAMING TRAP note at the top of this file.
 */
.dsq{position:fixed;inset:0;z-index:60;display:none;padding:12vh 20px 20px;
  background:rgba(8,20,30,.62);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dsq.open{display:block}
.dsq-box{max-width:560px;margin:0 auto;border-radius:5px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,var(--navy2),var(--navy));border:1px solid var(--navy-ln);
  box-shadow:0 30px 70px rgba(0,0,0,.5)}
.dsq-box::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--ac) 80%,#fff) 30%,color-mix(in oklab,var(--ac) 80%,#fff) 70%,transparent)}
.dsq-in{display:flex;align-items:center;gap:12px;padding:0 16px;height:52px;border-bottom:1px solid var(--navy-ln)}
.dsq-in svg{flex-shrink:0;color:#6E7B86}
.dsq-in input{flex:1;min-width:0;background:transparent;border:0;outline:0;font:400 14px var(--sans);color:#E9E4D8}
.dsq-in input::placeholder{color:#6E7B86}
.dsq-esc{flex-shrink:0;font:600 9px var(--mono);letter-spacing:.14em;color:#6E7B86;
  padding:4px 7px;border:1px solid var(--navy-ln);border-radius:2px}
.dsq-list{max-height:52vh;overflow-y:auto;padding:6px 0}
.dsq-item{display:flex;align-items:baseline;gap:12px;padding:10px 18px;cursor:pointer;text-decoration:none}
.dsq-item:hover{text-decoration:none}
.dsq-item .t{flex:1;font:500 13px var(--sans);color:#D5DCE1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsq-item .c{flex-shrink:0;font:600 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6E7B86}
.dsq-item.sel{background:rgba(255,255,255,.06)}
.dsq-item.sel .t{color:#F3EFE5}
.dsq-item.sel .c{color:color-mix(in oklab,var(--ac) 85%,#fff)}
.dsq-empty{padding:18px;text-align:center;font:12px var(--mono);letter-spacing:.08em;color:#6E7B86}
.dsq-ft{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--navy-ln);
  font:600 8.5px var(--mono);letter-spacing:.14em;color:#5C6a76}

/* The hero field is a real control once wired — say so on hover/focus. */
.docsearch{cursor:text}
.docsearch:hover{border-color:color-mix(in oklab,var(--ac) 40%,transparent)}

@media (prefers-reduced-motion:reduce){
  .dsq{backdrop-filter:none;-webkit-backdrop-filter:none}
}