/* RecapWP Legal — "Ledger" design, page sheet. Shared by privacy + terms +
 * the cookie policy (the design's own sheet says "Privacy + Terms" but its
 * Cookie Policy prototype loads this same file, for the .ck-* register below).
 *
 * A faithful port of the design handoff's legal sheet:
 *   docs/design_handoff_marketing_site_Ledger/design_files/site/legal-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.
 *
 * ORPHAN ATOM — .legal-rail. It is fully styled below (sticky, numbered, an .on
 * state) and then switched off one line later by `.legal-rail{display:none}`,
 * with .legal-grid set to `display:block` and .legal-flow centred instead. The
 * Privacy + Terms prototypes still carry the <nav> markup; it renders nothing.
 * The markup is NOT ported: a hidden nav that must list every section would
 * drift silently as sections change, and nobody would see it drift. To turn the
 * rail on, restore the two-column grid here and derive the nav from the
 * sections (the way article.php builds its rail) rather than hand-listing them.
 */
/* RecapWP Legal (Privacy + Terms) — Ledger · extends home-ledger.css */

/* ── hero (inside .mast) ── */
.hero-legal{padding:58px 0 58px;max-width:820px}
.hero-legal h1{font:500 clamp(38px,4.4vw,56px)/1.08 var(--serif);letter-spacing:-.015em;color:#F5F1E7}
.hero-legal h1 em{font-style:normal;color:color-mix(in oklab,var(--ac) 82%,#fff)}
.hero-legal .sub{font:400 15px/1.75 var(--sans);color:#9AA5AE;margin-top:18px;max-width:600px}
.hero-legal .meta{display:flex;gap:0;margin-top:30px;border-top:1px solid var(--navy-ln);max-width:520px}
.hero-legal .meta .m{flex:1;padding:16px 18px 0 0}
.hero-legal .meta .m+.m{padding-left:22px;border-left:1px solid var(--navy-ln)}
.hero-legal .meta .l{font:600 9px var(--mono);letter-spacing:.18em;color:#6E7B86}
.hero-legal .meta .v{font:500 15px var(--serif);color:#E9E4D8;margin-top:6px}
.hero-legal .meta .v a{color:color-mix(in oklab,var(--ac) 82%,#fff)}

/* ── body ── */
.legal-main{padding:60px 0 88px}
.legal-grid{display:block}
.legal-flow{max-width:720px;margin:0 auto}
.legal-rail{display:none}

/* left rail */
.legal-rail{position:sticky;top:26px;max-height:calc(100vh - 52px);overflow-y:auto;padding-bottom:8px}
.legal-rail .rl{font:600 9.5px var(--mono);letter-spacing:.2em;color:var(--hint);margin-bottom:10px}
.legal-rail a{display:flex;gap:12px;font:500 12.5px/1.4 var(--sans);color:var(--mut);
  padding:7px 10px 7px 12px;border-left:2px solid var(--card-ln)}
.legal-rail a:hover{color:var(--ink);text-decoration:none}
.legal-rail a.on{color:var(--ac);border-left-color:var(--ac);font-weight:600}
.legal-rail a .rn{font:600 10px var(--mono);color:var(--hint);flex-shrink:0}
.legal-rail a.on .rn{color:var(--ac)}

/* intro */
.legal-intro{font:400 14.5px/1.8 var(--sans);color:var(--mut);max-width:660px;padding-bottom:34px;
  border-bottom:1px solid var(--card-ln);text-wrap:pretty}
.legal-intro b{font-weight:600;color:var(--ink)}
.legal-intro a{font-weight:600}

/* section */
.legal-sec{max-width:660px;margin-top:48px;scroll-margin-top:28px}
.legal-sec .sn{font:600 10px var(--mono);letter-spacing:.18em;color:var(--hint)}
.legal-sec h2{font:500 clamp(22px,2.4vw,28px)/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink);margin-top:8px}
.legal-sec h2 em{font-style:normal;color:var(--ac)}
.legal-sec h3{font:600 14px var(--sans);color:var(--ink);margin-top:24px}
.legal-sec p{font:400 13.5px/1.75 var(--sans);color:var(--mut);margin-top:12px;text-wrap:pretty}
.legal-sec p b{font-weight:600;color:var(--ink)}
.legal-sec p a{font-weight:600}
.legal-sec ul{list-style:none;margin:14px 0 0;display:flex;flex-direction:column;gap:9px}
.legal-sec li{position:relative;padding-left:20px;font:400 13.5px/1.65 var(--sans);color:var(--mut);text-wrap:pretty}
.legal-sec li::before{content:'';position:absolute;left:2px;top:9px;width:8px;height:1px;background:var(--ac)}
.legal-sec li b{font-weight:600;color:var(--ink)}
.legal-sec 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}

/* plain-english callout */
.plain-en{margin-top:16px;background:color-mix(in oklab,var(--paper) 55%,#fff);
  border:1px solid var(--card-ln);border-left:3px solid color-mix(in oklab,var(--ac) 55%,#fff);
  border-radius:0 4px 4px 0;padding:14px 18px 16px}
.plain-en .pl{font:600 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ac)}
.plain-en p{margin-top:8px;font-size:13px;line-height:1.65;color:var(--ink)}
.plain-en p:first-of-type{margin-top:8px}
.plain-en b{font-weight:600}

/* legalese emphasis (all-caps disclaimer paras) */
.legal-sec p.caps{font:500 11.5px/1.7 var(--mono);letter-spacing:.02em;color:var(--mut);
  background:var(--card);border:1px solid var(--card-ln);border-radius:4px;padding:16px 18px}
.legal-sec .important{font:600 10px var(--mono);letter-spacing:.16em;color:var(--crit);margin-top:20px;display:block}

/* end mark */
.legal-end{max-width:660px;margin-top:56px;padding-top:28px;
  display:flex;align-items:center;gap:14px;font:600 9.5px var(--mono);letter-spacing:.16em;color:var(--hint)}
.legal-end::after{content:'';flex:1;height:1px;background:var(--card-ln)}

/* ── cookie register (Placed cookies) ── */
.ck-group{margin-top:18px;background:var(--card);border:1px solid var(--card-ln);border-radius:4px;
  box-shadow:var(--shadow-1);overflow:hidden}
.ck-hd{padding:16px 20px 15px;border-bottom:1px solid var(--card-ln);background:color-mix(in oklab,var(--paper) 55%,#fff);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ck-hd .cn{font:600 16px var(--serif);color:var(--ink)}
.ck-hd .cc{font:600 8.5px var(--mono);letter-spacing:.14em;color:var(--pass);
  background:color-mix(in oklab,var(--pass) 8%,#fff);border:1px solid color-mix(in oklab,var(--pass) 24%,#fff);
  padding:4px 8px 3px;border-radius:2px}
.ck-hd .cc.pend{color:var(--warn);background:color-mix(in oklab,var(--warn) 9%,#fff);border-color:color-mix(in oklab,var(--warn) 28%,#fff)}
.ck-usage{padding:13px 20px 14px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff);
  font:400 12.5px/1.6 var(--sans);color:var(--mut)}
.ck-usage b{font-weight:600;color:var(--ink)}
.ck-usage a{font-weight:600}
.ck-table{width:100%;border-collapse:collapse}
.ck-table thead th{font:600 8.5px var(--mono);letter-spacing:.16em;color:var(--hint);text-align:left;
  padding:11px 20px 9px;border-bottom:1px solid var(--card-ln)}
.ck-table td{padding:12px 20px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff);
  font:400 12.5px/1.5 var(--sans);color:var(--mut);vertical-align:top}
.ck-table tr:last-child td{border-bottom:0}
.ck-table td.nm{font:500 12px var(--mono);color:var(--ink);white-space:nowrap}
.ck-table td.exp{font:500 11px var(--mono);color:var(--hint);white-space:nowrap}
.ck-table col.c-name{width:38%}
.ck-table col.c-exp{width:20%}

@media (max-width:1080px){
  .legal-flow{max-width:100%}
}
@media (max-width:640px){
  .ck-table,.ck-table thead,.ck-table tbody,.ck-table tr,.ck-table td{display:block}
  .ck-table thead{display:none}
  .ck-table td{border-bottom:0;padding:2px 20px}
  .ck-table tr{padding:12px 0;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
  .ck-table td.nm{padding-top:12px}
}


/* ══════════════════════════════════════════════════════════════════════════
   THEME ADDITIONS — not in the design handoff's legal-ledger.css.
   Everything above this line is the verbatim port. Keep new rules below it.
   ══════════════════════════════════════════════════════════════════════════ */

/* The design marks emphasis with <b>; this site's legal text uses <strong>,
   which is the right element for it (importance, not just bold styling) and is
   what the pre-Ledger pages already shipped. Rather than downgrade 50 tags to
   presentational <b>, the <b> rules are aliased — same weight, same ink, same
   render. Keep both selectors on any new emphasis rule. */
.legal-sec p strong,
.legal-sec li strong{font-weight:600;color:var(--ink)}
.plain-en strong{font-weight:600}
.legal-intro strong{font-weight:600;color:var(--ink)}

/* The design styles <code> inside a section but not inside the intro, where its
   own prototype puts one (`recapwp.com`) — so the design renders that one chip
   unstyled, in the browser's default monospace. Matching the section's chip
   instead: the alternative is one stray unstyled chip in the page's opening
   line. This is the only rule here that changes a pixel the prototype draws. */
.legal-intro 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}

/* Keyboard focus — the design ships none for the prose links. */
.legal-flow a:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* Anchored sections must clear the WP admin bar when one is present. */
body.admin-bar .legal-sec{scroll-margin-top:60px}

/* ── COOKIE POLICY — skinning Complianz's generated document ────────────────
   The cookie statement's body is emitted by the Complianz plugin, not written
   here (see cookie-policy.php for why). The design's prototype hand-writes the
   same document into .legal-sec / .ck-group markup we don't control, so instead
   of matching its markup we match its LOOK: the rules below re-state the ported
   .ck-* rules above, retargeted at what Complianz actually emits.

   SCOPE — read before touching a selector here. Two different hooks, on purpose:

   * `.ck-doc` is OUR wrapper div (cookie-policy.php). It owns the measure only.
   * `#cmplz-document` is COMPLIANZ'S own wrapper, nested inside it. Everything
     that has to beat Complianz's own CSS hangs off the ID.

   NEVER scope this block with a bare `.cmplz-document` class. Complianz puts
   that class on the <body> as well as on its wrapper, so `.cmplz-document{...}`
   matches the whole page — the first version of this block clamped <body> to
   max-width:660px and squeezed the entire site, masthead and footer included,
   into a 660px column on production. The id is on the wrapper only, never on
   <body>, so ID-scoping makes that whole class of bug unrepresentable.

   THE ID IS ALSO A SPECIFICITY FLOOR, not decoration. Complianz styles this
   document from ID-scoped rules (`#cmplz-document .cmplz-dropdown .foo`), which
   no class selector can outrank. A class-scoped skin here does not simply lose —
   it half-wins, taking the properties Complianz leaves alone (font-family) while
   losing the ones it sets (font-size), which renders as neither design. Every
   selector below therefore carries the id and at least one more class than the
   Complianz rule it competes with. If you add a rule and it appears to do
   nothing, check its specificity against document.min.css before assuming the
   markup changed.

   Graceful failure: if a future Complianz release renames its wrapper or its
   inner classes, the skin stops applying and the plugin's own styling shows
   through. The statement stays complete and readable, it just loses the Ledger
   look. That is the intended failure mode — do not reimplement Complianz's
   markup or layout to defend against it. */
.ck-doc{max-width:660px}

/* ── document prose ── */
.ck-doc h2{font:500 clamp(22px,2.4vw,28px)/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink);margin-top:48px}
.ck-doc h2:first-child{margin-top:0}
.ck-doc h3{font:600 14px var(--sans);color:var(--ink);margin-top:24px}
.ck-doc p{font:400 13.5px/1.75 var(--sans);color:var(--mut);margin-top:12px;text-wrap:pretty}
.ck-doc p b,
.ck-doc p strong{font-weight:600;color:var(--ink)}
.ck-doc a{font-weight:600;color:var(--ac)}
.ck-doc ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
/* list-style must be killed on the LI, not just the UL: Complianz sets it on the
   item itself, which beats an inherited value from the list and left every row
   with a disc *and* our gold rule. */
.ck-doc li{list-style:none;position:relative;padding-left:20px;font:400 13.5px/1.65 var(--sans);color:var(--mut);text-wrap:pretty}
.ck-doc li::before{content:'';position:absolute;left:2px;top:9px;width:8px;height:1px;background:var(--ac)}

/* ── the cookie register ("Placed cookies") ──
   The design draws one .ck-group card per service. Complianz emits one
   <details class="cmplz-dropdown"> per service: a <summary> header, prose bands,
   then a gap:1px CSS grid standing in for .ck-table (the container's background
   shows through the gaps as the rules, each cell paints its own surface). We
   recolour and retype that grid in place; its layout stays Complianz's. */
.ck-doc #cmplz-document .cmplz-dropdown{margin-top:18px;background:var(--card);
  border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);overflow:hidden}
/* margin:0 is required, not cosmetic. Complianz ships a SECOND `.cmplz-dropdown
   summary` rule further down document.min.css carrying `margin:5px 0` (the first
   one only sets display/cursor — grep for both before concluding a property is
   unset). That 5px inset the header band from the card's edges and left slivers
   of card showing around the tint; the summary IS the card header here, so it
   must sit flush. */
.ck-doc #cmplz-document .cmplz-dropdown .cmplz-service-header{margin:0;padding:16px 20px 15px;
  background:color-mix(in oklab,var(--paper) 55%,#fff);border-bottom:1px solid var(--card-ln);cursor:pointer}
.ck-doc #cmplz-document .cmplz-dropdown .cmplz-service-header h3{font:600 16px var(--serif);color:var(--ink);margin:0;padding:0}
/* The category chip. The design splits it green (approved) vs amber (pending),
   but that split is NOT derivable from this output: Complianz reports
   data-category="functional" on every row, including the one whose label reads
   "Purpose pending investigation". A green chip on a row that says "pending
   investigation" would be a claim, not a style, so the chip stays neutral. */
.ck-doc #cmplz-document .cmplz-dropdown .cmplz-service-header p{font:600 8.5px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--hint);background:color-mix(in oklab,var(--paper) 70%,#fff);
  border:1px solid var(--card-ln);padding:4px 8px 3px;border-radius:2px;margin:0}
/* Usage / sharing prose bands, on the .ck-usage rhythm. These two sit SIDE BY
   SIDE as grid cells of unequal height, so they must not draw their own
   border-bottom — the two lines land at different heights and read as a ragged
   double rule. The band is closed by .cookies-per-purpose's full-width
   border-top below instead. */
.ck-doc #cmplz-document .cmplz-dropdown .cmplz-service-description,
.ck-doc #cmplz-document .cmplz-dropdown .cmplz-sharing-data{padding:13px 20px 14px;border-bottom:0}
.ck-doc #cmplz-document .cmplz-dropdown h4{font:600 12px var(--sans);color:var(--ink);margin:0;text-transform:none}
.ck-doc #cmplz-document .cmplz-dropdown .cmplz-service-description p,
.ck-doc #cmplz-document .cmplz-dropdown .cmplz-sharing-data p{font:400 12.5px/1.6 var(--sans);color:var(--mut);margin-top:6px}
/* The grid: container background becomes the rule colour, cells the card. */
.ck-doc #cmplz-document .cmplz-dropdown .cookies-per-purpose{background:var(--card-ln);
  border:0;border-top:1px solid var(--card-ln);margin-bottom:0;grid-gap:1px}
/* Compound `#cmplz-document.cmplz-document` (id AND class, same element) buys one
   extra class of specificity, to beat Complianz's zebra rule
   `... .cookies-per-purpose div:nth-child(12n+2)` outright instead of tying it and
   depending on stylesheet order — which a caching/merging plugin could reorder.
   Still id-anchored, so it can never match <body>. */
.ck-doc #cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose > div{background:var(--card);padding:12px 20px}
/* Must carry the same compound as the cell rule above AND out-rank it, or our own
   `> div` background wins and the label row loses its tint. */
.ck-doc #cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose > div.purpose,
.ck-doc #cmplz-document.cmplz-document .cmplz-dropdown .cookies-per-purpose > div[class$="-header"]{background:color-mix(in oklab,var(--paper) 55%,#fff)}
.ck-doc #cmplz-document .cmplz-dropdown .cookies-per-purpose .purpose h4{font:600 12px var(--sans);color:var(--ink)}
/* Field labels (Name / Expiration / Function) take .ck-table's mono micro-label;
   the cookie name and retention take td.nm / td.exp. */
.ck-doc #cmplz-document .cmplz-dropdown .cookies-per-purpose h5{font:600 8.5px var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--hint);margin:0;line-height:1.4}
.ck-doc #cmplz-document .cmplz-dropdown .cookies-per-purpose .name,
.ck-doc #cmplz-document .cmplz-dropdown .cookies-per-purpose .name a{font:500 12px var(--mono);color:var(--ink);word-break:break-word}
.ck-doc #cmplz-document .cmplz-dropdown .cookies-per-purpose .retention{font:500 11px var(--mono);color:var(--hint)}
.ck-doc #cmplz-document .cmplz-dropdown .cookies-per-purpose .function{font:400 12.5px/1.5 var(--sans);color:var(--mut)}

/* ── "Manage your consent settings" (.cmplz-categories) ──
   The consent categories, which Complianz renders as its own little register:
   one .cmplz-category per category, each a header grid (title | toggle/status |
   chevron) over a collapsible .cmplz-description. Same anatomy as the
   .cmplz-dropdown cards above, so it gets the same .ck-group treatment — the two
   registers sit within a screen of each other and must read as siblings.

   NOTE THE DIFFERENT CONTAINER. These live under Complianz's
   `#cmplz-manage-consent-container`, NOT `#cmplz-document`, and the plugin styles
   them from `#cmplz-manage-consent-container.cmplz-manage-consent-container ...`
   (id + same-element class). Mirroring that compound and prefixing `.ck-doc`
   puts every rule below exactly one class above the plugin's own — deterministic,
   not order-dependent. The `.ck-doc` prefix also keeps this off the COOKIE BANNER,
   which reuses these same category class names outside the document. */
.ck-doc #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category{
  background:var(--card);border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);
  overflow:hidden;margin-bottom:10px}
.ck-doc #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category:last-child{margin-bottom:0}
.ck-doc #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header{
  padding:16px 20px 15px;background:color-mix(in oklab,var(--paper) 55%,#fff);
  border-bottom:1px solid var(--card-ln);grid-gap:12px;align-items:center}
.ck-doc #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-title{
  font:600 16px var(--serif);color:var(--ink)}
/* "Always active" is the one status chip on this page that IS derivable — the
   markup says so outright — so unlike the neutral service chips above it takes
   the design's green .cc treatment. */
.ck-doc #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-always-active{
  font:600 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pass);
  background:color-mix(in oklab,var(--pass) 8%,#fff);border:1px solid color-mix(in oklab,var(--pass) 24%,#fff);
  padding:4px 8px 3px;border-radius:2px}
/* The opt-in categories carry a real checkbox — tint it to the brand accent
   rather than leave it UA blue. */
.ck-doc #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-consent-checkbox{
  accent-color:var(--ac)}
.ck-doc #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description{
  padding:13px 20px 14px;font:400 12.5px/1.6 var(--sans);color:var(--mut)}