/* Free guide pages (/buying-a-restaurant, /before-you-sign). Loaded AFTER
   /site/landing.css and only adds what a long, printable guide needs: the
   reading column, the earnings ladder, source and rule-of-thumb labels, the
   tick-box checklist, and the print sheet. No brand hex is typed here — every
   colour is a token from /brand/tokens.css or an alias in landing.css. */

.guide-hero { padding: var(--sp-8) 0 var(--sp-7); border-bottom: 1px solid var(--hair); }
.guide-hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.75rem, 1.8rem + 3.6vw, 5rem); line-height: .95; letter-spacing: .5px; max-width: 15em; }
.guide-hero .hero__lede { max-width: 38em; }
.disclaimer { margin-top: var(--sp-5); display: inline-block; padding: 8px 12px; border: 1px solid var(--hair); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink-2); }

.guide { max-width: 46em; }
.guide .h2 { margin-bottom: var(--sp-5); }
.guide .h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); }
.guide p, .guide li { font-size: var(--fs-md); line-height: 1.6; color: var(--ink-2); }
.guide p + p { margin-top: var(--sp-4); }
.guide .lead { font-size: var(--fs-lg); color: var(--ink); }
.guide ul.plain { margin: var(--sp-4) 0 0; padding-left: 1.2em; display: grid; gap: var(--sp-2); }
.guide strong { color: var(--ink); }
.guide a:not(.btn) { color: var(--accent); text-underline-offset: 3px; }

/* where a figure came from: sourced, or our own rule of thumb — never mixed */
.src { display: block; margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-2); }
.callout { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--surface); }
.callout--rule { border-color: var(--gold-line); }
.callout__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); }
.callout ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; display: grid; gap: var(--sp-2); }

/* the earnings walk, drawn like the receipt: every line a formula, every
   amount a dash until the buyer's own numbers are in */
.walk { list-style: none; margin: var(--sp-5) 0 0; padding: var(--sp-2) var(--sp-5); background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg); }
.walk .rrow__amt { color: var(--ink-2); }
.walk .rrow--total .rrow__label { font-weight: 700; color: var(--ink); }
.walk .rrow--total { border-bottom: 1px dashed var(--hair); }
.walk .rrow:last-child { border-bottom: 0; }

/* records table */
.guide-table { margin-top: var(--sp-5); overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--r-md); }
.guide-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.guide-table th, .guide-table td { padding: 12px var(--sp-4); border-top: 1px solid var(--hair); text-align: left; vertical-align: top; }
.guide-table thead th { border-top: 0; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .6px; color: var(--ink-2); font-weight: 500; }
.guide-table tbody th { font-weight: 600; color: var(--ink); }
.guide-table td { color: var(--ink-2); }

/* tick-box checklist */
.ticks { list-style: none; margin: var(--sp-5) 0 0; padding: 0; border-top: 1px solid var(--hair); }
.ticks li { border-bottom: 1px solid var(--hair); }
.ticks label { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; cursor: pointer; color: var(--ink); font-size: var(--fs-md); line-height: 1.5; }
.ticks input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); cursor: pointer; }
.ticks .why { display: block; color: var(--ink-2); font-size: var(--fs-sm); margin-top: 2px; }
.print-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-5); }
.print-row p { font-size: var(--fs-sm); }

/* the seven lines */
.lines { list-style: none; margin: var(--sp-6) 0 0; padding: 0; counter-reset: line; }
.line { padding: var(--sp-6) 0; border-top: 1px solid var(--hair); }
.line:last-child { border-bottom: 1px solid var(--hair); }
.line__head { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.line__head input { width: 22px; height: 22px; margin: 8px 0 0; accent-color: var(--accent); cursor: pointer; }
.line__n { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--accent); }
.line__title { font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; }
.line__body { padding-left: calc(28px + var(--sp-3)); }
.line dl { margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-4); }
.line dt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.line dd { margin: var(--sp-1) 0 0; }
@media (max-width: 600px) { .line__body { padding-left: 0; } }

.sources { margin-top: var(--sp-5); padding-left: 1.2em; display: grid; gap: var(--sp-2); }
.sources li { font-size: var(--fs-sm); }

/* ── print ────────────────────────────────────────────────────────────────
   Paper is white and the ink is black, whatever the screen theme. The
   "Print this list" button sets html.print-list, which narrows the sheet to
   the seller questions alone; the browser's own Print prints the whole guide. */
@media print {
  :root { --ink: #000; --ink-2: #222; --bg: #fff; --surface: #fff; --hair: #999; --accent: #000; --gold-line: #666; }
  html, body { background: #fff !important; color: #000 !important; color-scheme: light; }
  body { font-size: 11pt; }
  .site-head, .site-foot, .skip-link, .no-print, .hero__actions, .print-row button, #om-consent, [data-om-consent] { display: none !important; }
  .section, .guide-hero { padding: 14pt 0; border-color: #999; }
  .guide-hero__title, .h2 { font-size: 22pt; line-height: 1.1; }
  .guide p, .guide li, .ticks label { color: #000; }
  a { color: #000 !important; text-decoration: none; }
  .walk, .callout, .guide-table { break-inside: avoid; background: #fff; }
  .line, .ticks li { break-inside: avoid; }
  .ticks input, .line__head input { accent-color: #000; }
  .print-only { display: block !important; }
  html.print-list main > *:not(#questions) { display: none !important; }
  html.print-list #questions { border: 0; padding-top: 0; }
}
.print-only { display: none; }