/* ==========================================================================
   Ledger pages: /open-book (lg-*) and /margin-check (mc-*).
   Uses the tokens and surface roles of site.css (docs/DESIGN.md). Square corners,
   one accent, ink = professional, accent = YRproject, no shadows.
   ========================================================================== */

html { scroll-padding-top: 4.5rem; }
.lg-gap { margin-top: var(--s7); }
.lg-h3 { margin-bottom: var(--s4); }

/* ---------- in-page nav (sticky) ---------------------------------------- */
.lg-nav { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.lg-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s5); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; position: relative; }
.lg-nav ul::-webkit-scrollbar { display: none; }
.lg-nav a { display: inline-flex; align-items: center; min-height: 3.25rem; font-size: var(--fs-small); text-decoration: none; white-space: nowrap; color: var(--fg-muted); }
.lg-nav a:hover { color: var(--fg); box-shadow: inset 0 -3px 0 var(--fg); }
.lg-nav a[aria-current] { color: var(--fg); box-shadow: inset 0 -3px 0 var(--accent); }
.lg-nav a:focus-visible { outline-offset: -3px; }
.lg-print { margin-top: var(--s6); }

/* ---------- tables ------------------------------------------------------- */
.lg-table { min-width: 34rem; }
.lg-table caption { font-size: var(--fs-small); color: var(--fg); font-weight: 500; padding-bottom: var(--s4); }
.lg-table tbody th { font-weight: 400; min-width: 11rem; }
.lg-table td { color: var(--fg-muted); }
.lg-table td.num { color: var(--fg); }
.lg-table .is-strong th, .lg-table .is-strong td.num { font-weight: 600; }
.lg-table .is-strong td.num { font-size: var(--fs-body); }
.lg-table--scale, .lg-table--scalepts { min-width: 0; }
.lg-table--scale tbody th { min-width: 0; }
.lg-table--text td, .lg-table--text td.num { color: var(--fg); white-space: normal; text-align: left; padding-left: 0; padding-right: 1em; }
.lg-table--text thead th.num { text-align: left; padding-left: 0; }
.lg-table--buys { min-width: 0; }
.lg-table--buys td.num { white-space: nowrap; text-align: right; padding-right: 0; }
.lg-table--buys thead th.num { text-align: right; }
.lg-table--4 td:nth-child(3) { text-align: right; color: var(--fg); white-space: nowrap; }
.lg-table--4 thead th:nth-child(3) { text-align: right; }
.lg-table--g2 td { white-space: normal; }
.lg-table--g2 td, .lg-table--g2 td.num { text-align: right; color: var(--fg); padding-left: 1em; padding-right: 0; }
.lg-table--g2 thead th { text-align: right; }
.lg-pct { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); letter-spacing: -.04em; line-height: 1; }
.lg-keep { display: flex; align-items: baseline; gap: var(--s4); color: var(--fg-muted); max-width: 26em; }
.lg-keep .fig { color: var(--fg); flex: none; }
.lg-twice { padding-left: 1.2em; margin: var(--s4) 0; }
.lg-twice li { margin-bottom: var(--s4); padding-left: .3em; }
.lg-units { margin-top: var(--s4); }
.lg-units li > :last-child { white-space: normal; text-align: right; }

/* ---------- marginal-scale explainer ------------------------------------ */
.lg-scale { display: grid; gap: var(--s6); }
.lg-scale__form { max-width: 40rem; }
.lg-scale__inputs { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center; }
.lg-scale__inputs input[type="range"] { grid-column: 1; }
.lg-scale.is-live .lg-scale__inputs { grid-template-columns: 1fr 9rem; }
.lg-hoursnum { position: relative; min-width: 8rem; }
.lg-hoursnum input { font-size: 1.375rem; letter-spacing: -.02em; padding-block: .5em; padding-right: 1.8em; -moz-appearance: textfield; appearance: textfield; }
.lg-hoursnum input::-webkit-inner-spin-button, .lg-hoursnum input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lg-hoursnum span { position: absolute; right: .8em; top: 50%; transform: translateY(-50%); color: var(--fg-muted); pointer-events: none; }
.lg-scale__readout { display: grid; gap: var(--s5); border-top: 1px solid var(--line); padding-top: var(--s5); }
@media (min-width: 44rem) { .lg-scale__readout { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } }
.lg-scale__readout .fig { margin-bottom: var(--s2); }
.lg-linekey { width: 1.4em; height: 0; border-top: 3px solid var(--fg); flex: none; display: inline-block; }
.lg-scale__fig { margin: 0; }
.lg-scale__frame { position: relative; height: clamp(15rem, 34vw, 26rem); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); overflow: hidden; }
.lg-scale__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lg-scale__steps rect { fill: var(--accent); }
.lg-scale__curve { fill: none; stroke: var(--fg); stroke-width: 3; stroke-linejoin: round; }
.lg-scale__band { position: absolute; bottom: 0; padding: .55rem .6rem; color: var(--accent-ink); display: flex; flex-direction: column; justify-content: flex-start; gap: .15rem; overflow: hidden; border-left: 1px solid var(--bg); }
.lg-scale__band:first-of-type { border-left: 0; }
.lg-scale__band b { font-weight: 400; font-size: clamp(1.125rem, .8rem + 1.6vw, 2.25rem); letter-spacing: -.04em; line-height: 1; }
.lg-scale__band span { font-size: var(--fs-micro); white-space: nowrap; }
@media (max-width: 43.99rem) { .lg-scale__band { padding: .4rem .3rem; } .lg-scale__band:first-of-type span { display: none; } }
.lg-scale__curvelabel { position: absolute; right: .6rem; font-size: var(--fs-micro); line-height: 1.25; text-align: right; color: var(--fg); background: var(--bg); padding: .15rem .3rem; }
.lg-scale__marker { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--fg); transition: left var(--t) var(--ease); }
.lg-scale__marker i { position: absolute; left: -1px; width: .9rem; height: .9rem; background: var(--bg); border: 3px solid var(--fg); transform: translate(-50%, -50%); transition: top var(--t) var(--ease); }
.lg-scale.is-live .lg-scale__marker, .lg-scale.is-live .lg-scale__marker i { transition-duration: 80ms; }
.lg-scale__axis { position: relative; height: 1.6rem; font-size: var(--fs-micro); color: var(--fg-muted); margin-bottom: var(--s3); }
.lg-scale__axis span { position: absolute; top: .4rem; transform: translateX(-50%); white-space: nowrap; }
.lg-scale__axis span:first-child { transform: none; }
.lg-scale__axis span:last-child { transform: translateX(-100%); }

/* ---------- worked examples --------------------------------------------- */
.lg-exnav { list-style: none; margin: 0 0 var(--s7); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.lg-exnav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9em; border: 1px solid var(--line); font-size: var(--fs-small); text-decoration: none; }
.lg-exnav a:hover { background: var(--sea-3); color: var(--pro); border-color: var(--pro); }
.lg-ex { display: grid; gap: var(--s5) var(--gutter); padding-block: var(--s7); border-top: 1px solid var(--line); }
@media (min-width: 64rem) { .lg-ex { grid-template-columns: 4fr 8fr; } }
.lg-ex__k { font-size: var(--fs-micro); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--s3); }
.lg-ex__head h3 { max-width: 14em; margin-bottom: var(--s3); }
@media (min-width: 64rem) { .lg-ex__head { position: sticky; top: 5rem; align-self: start; } }
.lg-ex__body > * + * { margin-top: var(--s5); }
.lg-ex__sub { margin-top: var(--s7) !important; padding-top: var(--s5); border-top: 1px solid var(--line-soft); }
.lg-ex__sub + p { margin-top: var(--s1); }

.lg-mini { display: grid; gap: var(--s3); }
.lg-bar { display: flex; height: 1.75rem; width: 100%; border: 1px solid var(--fg); }
.lg-bar__seg { display: block; height: 100%; flex: none; }
.lg-bar__seg--pro { background: var(--g-pro); }
.lg-bar__seg--bonus { background: repeating-linear-gradient(135deg, var(--pro) 0 4px, #FFD166 4px 8px); }
.lg-bar__seg--yr { background: var(--g-fee); flex: 1 1 0; }
.lg-mini__key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-small); }
.lg-mini__key li { display: inline-flex; align-items: center; gap: .5em; }
.lg-mini__key b { font-weight: 600; }
.lg-mini__link { justify-self: start; font-size: var(--fs-small); margin-top: var(--s2); padding-block: .5em .1em; }

/* ---------- the sample invoice ------------------------------------------ */
.lg-invwrap { display: grid; gap: var(--s7) var(--gutter); }
@media (min-width: 72rem) { .lg-invwrap { grid-template-columns: 8fr 4fr; align-items: start; } }
/* The sample invoice is PAPER: the one deliberate light object on the site. Tokens are re-scoped
   locally so everything inside reads dark-on-paper. */
.lg-inv { --fg: #0B0D0E; --fg-muted: #565B5A; --fg-dim: #565B5A; --line: #0B0D0E; --line-soft: #D5D1C7; --rule: #0B0D0E; --rule-soft: #D5D1C7;
  --panel: #ECE9E1; --accent: #C43210; --accent-ink: #fff;
  position: relative; background: #F5F3EE; color: #0B0D0E; border: 1px solid var(--edge); box-shadow: var(--lift); padding: clamp(1.25rem, 4vw, 3rem); overflow: hidden; }
.lg-inv__stamp { display: inline-block; background: var(--accent); color: var(--accent-ink); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .45rem .7rem; margin-bottom: var(--s5); }
.lg-inv__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s6); }
.lg-inv__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); letter-spacing: -.045em; line-height: 1; margin: 0 0 var(--s2); }
.lg-inv__from { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); }
.lg-inv__from b { color: var(--fg); }
.lg-inv__facts { margin-bottom: var(--s6); }
.lg-inv__facts dd { font-size: var(--fs-small); }
.lg-inv__table { min-width: 31rem; }
.lg-inv__table th span { display: block; font-weight: 400; color: var(--fg-muted); font-size: var(--fs-micro); margin-top: .15em; }
.lg-inv__table tbody th { font-weight: 500; }
.lg-inv__table td { white-space: nowrap; }
.lg-inv__n { width: 2rem; color: var(--fg-muted); font-size: var(--fs-micro); }
.lg-inv__fee th::before { content: ""; display: inline-block; width: .7em; height: .7em; background: var(--accent); margin-right: .5em; }
.lg-inv__table tfoot th { text-align: left; }
.lg-inv__table tfoot td, .lg-inv__table tfoot th { border-top: 0; border-bottom: 1px solid var(--line-soft); font-weight: 400; }
.lg-inv__table tfoot .lg-inv__sub td, .lg-inv__table tfoot .lg-inv__sub th { color: var(--fg-muted); }
.lg-inv__table tfoot .lg-inv__sub td.num { color: var(--fg); }
.lg-inv__table tfoot .lg-inv__total td, .lg-inv__table tfoot .lg-inv__total th { font-weight: 600; border-top: 1px solid var(--fg); }
.lg-inv__table tfoot .lg-inv__pay td, .lg-inv__table tfoot .lg-inv__pay th { font-size: var(--fs-h3); letter-spacing: -.025em; border-bottom: 3px solid var(--fg); padding-block: .6em; }
.lg-inv__foot { margin-top: var(--s6); border-top: 0; }
.lg-inv__foot dd { font-size: var(--fs-small); font-weight: 400; }
.lg-inv__same { margin-top: var(--s5); font-size: var(--fs-small); padding: var(--s4); background: var(--panel); }
.lg-readers { display: grid; gap: 0; border-top: 1px solid var(--line); }
.lg-readers > div { padding-block: var(--s5); border-bottom: 1px solid var(--line-soft); }
.lg-readers .card__k { margin-bottom: var(--s3); }

/* ---------- payment cards, terms, closing -------------------------------- */
.lg-payfig { margin: 0 0 var(--s3); white-space: normal; line-height: 1.05; }
.lg-terms { margin: 0; padding: 0; list-style: none; counter-reset: term; border-top: 1px solid var(--line); columns: 1; }
@media (min-width: 60rem) { .lg-terms { columns: 2; column-gap: var(--gutter); } }
.lg-terms li { counter-increment: term; display: grid; grid-template-columns: 2.5rem 1fr; padding-block: var(--s4); border-bottom: 1px solid var(--line-soft); break-inside: avoid; }
.lg-terms li::before { content: counter(term, decimal-leading-zero); font-size: var(--fs-micro); color: var(--fg-muted); padding-top: .25em; grid-row: span 2; }
.lg-terms li b { display: block; }
.lg-closing h2 { font-size: var(--fs-h1); max-width: 12em; }

/* ---------- margin check ------------------------------------------------- */
.mc-promises { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s6) 0 0; padding: 0; }
.mc-promises li { font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--fg); padding: .45em .6em; line-height: 1; }
.mc-layout { display: grid; gap: var(--s8) var(--gutter); }
@media (min-width: 64rem) { .mc-layout { grid-template-columns: 5fr 7fr; align-items: start; } .mc-layout__form { position: sticky; top: var(--s5); } }
.mc-form { display: grid; gap: var(--s5); padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--line); }
.mc-form__unit { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; }
.mc-form__who { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; }
.mc-form__who legend { float: left; margin: 0 var(--s4) 0 0; padding-top: .45em; }
.mc-form .form-grid { gap: var(--s5) var(--s5); }
@media (min-width: 64rem) and (max-width: 79.99rem) { .mc-form .form-grid--2 { grid-template-columns: 1fr; } }
.mc-money { position: relative; }
.mc-money span { position: absolute; left: .8em; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 1.25rem; }
.mc-money input { font-size: 1.375rem; letter-spacing: -.02em; padding-block: .5em; padding-left: 1.8em; }
.mc-money--h span { left: auto; right: .8em; color: var(--fg-muted); font-size: 1rem; }
.mc-money--h input { padding-left: .9em; padding-right: 1.8em; }
#mc-parties { font-size: 1.375rem; letter-spacing: -.02em; padding-block: .5em; }
.mc-error { margin: 0; font-size: var(--fs-small); font-weight: 500; }
.mc-privacy { margin-top: var(--s4); }
.mc-example { font-size: var(--fs-small); color: var(--fg-muted); margin-bottom: var(--s5); }
.mc-example .badge { margin-right: .5em; color: var(--bg); }
.mc-cols { display: grid; gap: var(--s7) var(--gutter); }
@media (min-width: 44rem) { .mc-cols { grid-template-columns: 1fr 1fr; } }
.mc-col h3 { margin-bottom: var(--s5); min-height: 2.3em; }
.mc-col > * + * { margin-top: var(--s5); }
.mc-sentence { font-size: var(--fs-body); max-width: 34em; }
.mc-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s4); }
.mc-two .fig { margin-bottom: var(--s1); }
.mc-bar { display: flex; height: 3.25rem; width: 100%; background: transparent; border-right: 1px dashed var(--line-soft); }
.mc-bar__seg { display: flex; align-items: center; height: 100%; flex: none; overflow: hidden; white-space: nowrap; font-size: var(--fs-micro); transition: width var(--t) var(--ease); min-width: 0; }
.mc-bar__seg > span { padding-inline: .6rem; }
.mc-bar__seg--pro { background: var(--g-pro); color: var(--ink); }
.mc-bar__seg--between { background: repeating-linear-gradient(135deg, var(--fg) 0 1px, transparent 1px 7px); border: 1px solid var(--fg); border-left: 0; color: var(--fg); }
.mc-bar__seg--between > span { background: var(--bg); padding-block: .1rem; margin-left: .3rem; padding-inline: .3rem; }
.mc-bar__seg--yr { background: var(--g-fee); color: var(--ink); }
.mc-bar__seg--rest { flex: 1 1 0; }
.mc-bar--sm { height: 1.25rem; border-right: 0; margin-bottom: var(--s4); }
.mc-readings { margin-top: var(--s8); }
.mc-readings__h { margin-bottom: var(--s5); }
.mc-readings .fig { margin-bottom: var(--s4); }
.mc-readings .card p:last-child { font-size: var(--fs-small); color: var(--fg-muted); }
.mc-readings .card p:last-child b { color: var(--fg); }
.mc-dearer { margin-top: var(--s7); }
.mc-result > h3, .mc-result [data-mc-show] > h3 { margin-bottom: var(--s4); max-width: 18em; }
.mc-scns { margin-top: var(--s6); }
@media (min-width: 64rem) and (max-width: 89.99rem) { .mc-scns.cards--3 { grid-template-columns: 1fr; } }
.mc-scn .card__k { margin-bottom: var(--s4); flex-wrap: wrap; }
.mc-scn .ledger li > :first-child { max-width: 16em; }
.mc-rangenote { margin-top: var(--s5); }
.mc-rangenote .badge { margin-right: .4em; }
.mc-em { font-style: normal; font-weight: 600; }
.mc-share { margin-top: var(--s6); }
.mc-cta__h { margin-bottom: var(--s7); max-width: 14em; }

/* ---------- print: a client can print the open book ---------------------- */
@media print {
  @page { margin: 16mm 14mm; }
  html { font-size: 11pt; }
  body { background: #fff !important; color: #000; }
  .lg-nav, .lg-print, .lg-exnav, .lg-mini__link, .lg-scale__form, .lg-closing, #calculator-section,
  .mc-form button, .mc-share, .skip, [data-ob-calc] { display: none !important; }
  .pagehead { padding-block: 0 8mm; }
  .pagehead h1 { font-size: 30pt; }
  h2 { font-size: 20pt; }
  .section, .section--tight { padding-block: 8mm; }
  .section-head { margin-bottom: 6mm; display: block; }
  .section-head .lead { font-size: 11pt; margin-top: 3mm; }
  .table-scroll { overflow: visible; }
  .lg-table, .lg-inv__table { min-width: 0; font-size: 9.5pt; }
  .lg-ex { display: block; padding-block: 6mm; break-inside: auto; }
  .lg-ex__head { position: static; margin-bottom: 4mm; }
  table, .lg-mini, .lg-inv, .card, .lg-terms li, .lg-scale__fig, tr { break-inside: avoid; }
  h2, h3, h4 { break-after: avoid; }
  #sample-invoice { break-before: page; }
  .lg-invwrap { display: block; }
  .lg-inv { border: 1pt solid #000; margin-bottom: 6mm; }
  .lg-scale__frame { height: 60mm; }
  .lg-bar, .lg-bar__seg, .lg-scale__steps rect, .lg-inv__stamp, .lg-inv__fee th::before, .key, .mc-bar__seg {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  a { text-decoration: none; }
  .footnotes a::after { content: ""; }
  .cards { display: block; }
  .cards > .card { margin-bottom: -1px; }
}

/* grid children must be allowed to shrink below their tables' min-width (the tables scroll) */
.lg-ex > *, .lg-invwrap > *, .lg-scale > *, .mc-layout > *, .mc-cols > *, .lg-mini, .lg-ex__body > * { min-width: 0; }
.lg-ex__body { min-width: 0; max-width: 100%; }

/* Visual QA 2026-09-18: between 48rem and 64rem the 5/7 fee-table split squeezed the scale table
   (caption and "fee on top" column cut off). Stack until there is room. */
@media (max-width: 63.99rem) { #fee-table .grid > .col-5, #fee-table .grid > .col-7 { grid-column: span 12; } }
/* Phones: the scale table must show its point (the percentage) without sideways scrolling; the
   working-day equivalents are repeated in "Units" below. */
@media (max-width: 30rem) { .lg-table--scale th:nth-child(2), .lg-table--scale td:nth-child(2) { display: none; } }