/* Money Moves University — Personal Finance Foundations Workbook
   Print-ready styling. Brand tokens come from ../../styles.css (navy lead, gold accent).
   Body reads as a continuous column on screen; exports clean to Letter PDF. */

* { box-sizing: border-box; }
body { margin: 0; background: var(--neutral-100); color: var(--text-primary); }

/* ---- Page frame (repeats margins on every printed page) ---- */
.doc { max-width: 8.5in; margin: 0 auto; background: var(--neutral-0); box-shadow: var(--shadow-lg); }
.doc-frame { width: 100%; border-collapse: collapse; }
.doc-frame td { padding: 0; }
.hdr-space, .ftr-space { display: none; }
.page { padding: 0.7in 0.85in; }

/* ---- Screen chrome ---- */
.toolbar { position: sticky; top: 0; z-index: 20; display: flex; gap: 12px; align-items: center;
  background: var(--navy-900); color: var(--neutral-50); padding: 12px 20px; }
.toolbar .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; color: var(--neutral-50); }
.toolbar .brand img { height: 26px; }
.toolbar .spacer { flex: 1; }
.toolbar button { font-family: var(--font-sans); font-weight: 700; font-size: 13px; cursor: pointer;
  border: 1px solid var(--border-on-dark); background: var(--gradient-gold); color: var(--navy-900);
  padding: 8px 16px; border-radius: var(--radius-sm); }

/* ---- Typography ---- */
.wb-eyebrow { font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-700); }
h1.wb-h1 { font-family: var(--font-serif); font-weight: 700; font-size: 32px; line-height: 1.12;
  letter-spacing: -0.02em; color: var(--navy-900); margin: 8px 0 0; text-wrap: balance; }
h2.wb-h2 { font-family: var(--font-serif); font-weight: 700; font-size: 23px; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--navy-800); margin: 34px 0 10px; text-wrap: balance; }
h3.wb-h3 { font-family: var(--font-sans); font-weight: 800; font-size: 15px; line-height: 1.3;
  letter-spacing: 0.01em; color: var(--navy-700); margin: 22px 0 6px; }
.wb p { font-family: var(--font-serif); font-size: 15px; line-height: 1.66; color: var(--neutral-800);
  margin: 0 0 12px; text-wrap: pretty; }
.wb p .em { font-style: italic; }
.wb strong, .wb b { font-weight: 700; color: var(--navy-800); }
.lead { font-size: 16.5px !important; color: var(--neutral-700) !important; }

/* ---- Section divider number ---- */
.section-open { display: flex; align-items: flex-end; gap: 14px; margin: 44px 0 16px;
  padding-bottom: 10px; border-bottom: 2px solid var(--navy-800); }
.section-open .num { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--gold-600); width: 26px; flex-shrink: 0; padding-bottom: 4px; }
.section-open h2 { margin: 0; flex: 1; text-wrap: pretty; }

/* ---- Pull quote / epigraph ---- */
.pullquote { margin: 16px 0 18px; padding: 10px 0 10px 18px; border-left: 3px solid var(--gold-400); }
.pullquote p { font-family: var(--font-serif); font-size: 15px; line-height: 1.66;
  color: var(--neutral-800); margin: 0; text-wrap: pretty; }
.pullquote cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--font-sans);
  font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-700); }

/* ---- Key term / definition ---- */
.keyterm { background: var(--navy-50); border: 1px solid var(--navy-100); border-radius: var(--radius-md);
  padding: 16px 18px; margin: 16px 0; }
.keyterm .label { font-family: var(--font-sans); font-weight: 800; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-500); margin-bottom: 4px; }
.keyterm .term { font-family: var(--font-serif); font-weight: 700; font-size: 16px; color: var(--navy-900); }
.keyterm p { font-size: 14px !important; margin: 4px 0 0 !important; }

/* ---- Stat callout ---- */
.stat { display: flex; gap: 18px; align-items: center; background: var(--gradient-navy);
  border-radius: var(--radius-lg); padding: 22px 24px; margin: 20px 0; color: var(--neutral-50); }
.stat .fig { font-family: var(--font-mono); font-weight: 700; font-size: 44px; line-height: 0.95;
  color: var(--gold-300); flex-shrink: 0; }
.stat .body { display: flex; flex-direction: column; gap: 6px; }
.stat .body .txt { font-family: var(--font-serif); font-size: 15px; line-height: 1.45; color: var(--neutral-50); }
.stat .body .src { font-family: var(--font-sans); font-size: 11px; color: var(--neutral-50); opacity: 0.85; }
.stat b, .stat strong, .stat .body .txt b, .stat .body .txt strong { color: var(--gold-300); }

/* ---- Figure / graphic wrapper ---- */
figure.graphic { margin: 22px 0; }
figure.graphic figcaption { font-family: var(--font-sans); font-size: 11.5px; color: var(--text-muted);
  margin-top: 8px; text-align: center; }
.graphic-head { font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-700); text-align: center; margin-bottom: 12px; }

/* Numbered step list (frameworks, playbooks) */
.numlist { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.numlist .nl { display: flex; gap: 16px; align-items: flex-start; background: var(--neutral-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 18px; }
.numlist .n { font-family: var(--font-mono); font-weight: 700; font-size: 22px; color: var(--gold-700); flex-shrink: 0; width: 34px; line-height: 1.25; }
.numlist .nb .t { font-family: var(--font-serif); font-weight: 700; font-size: 16px; color: var(--navy-800); }
.numlist .nb p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }

/* Money scripts 2x2 */
.grid2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scriptcard { background: var(--neutral-0); border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.scriptcard .ico { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-gold-soft);
  border: 1px solid var(--gold-200); color: var(--gold-700); display: flex; align-items: center; justify-content: center; }
.scriptcard .t { font-family: var(--font-serif); font-weight: 700; font-size: 15px; color: var(--navy-800); }
.scriptcard .d { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }

/* Scarcity vs abundance split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-default); }
.split .col { padding: 18px; }
.split .scarcity { background: var(--neutral-100); }
.split .abundance { background: var(--surface-gold-soft); border-left: 2px solid var(--gold-400); }
.split .h { font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 10px; }
.split .scarcity .h { color: var(--neutral-600); }
.split .abundance .h { color: var(--gold-700); }
.split .row { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--navy-800);
  padding: 7px 0; border-top: 1px solid rgba(0,0,0,0.07); }
.split .row .k { display: block; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 2px; }

/* Bridge flowchart */
.bridge { display: flex; align-items: stretch; gap: 0; }
.bridge .node { flex: 1; background: var(--navy-700); color: var(--neutral-50); padding: 14px 10px; text-align: center;
  display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.bridge .node:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--gradient-navy); }
.bridge .node:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--gradient-gold); color: var(--navy-900); }
.bridge .node .k { font-family: var(--font-sans); font-weight: 800; font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.8; }
.bridge .node .v { font-family: var(--font-serif); font-weight: 700; font-size: 13px; line-height: 1.2; }
.bridge .arrow { display: flex; align-items: center; color: var(--gold-500); font-weight: 700; padding: 0 4px; }

/* ---- Tables ---- */
table.wbtable { width: 100%; border-collapse: collapse; margin: 18px 0; font-family: var(--font-sans); }
table.wbtable th { background: var(--navy-700); color: var(--gold-300); font-weight: 700; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; text-align: left; padding: 11px 14px; }
table.wbtable td { border-bottom: 1px solid var(--border-subtle); padding: 11px 14px; font-size: 13px;
  line-height: 1.5; color: var(--navy-800); vertical-align: top; }
table.wbtable td:first-child { font-weight: 700; color: var(--navy-900); white-space: nowrap; }
table.wbtable tr:nth-child(even) td { background: var(--neutral-50); }

/* ---- Activity / worksheet ---- */
.activity { border: 1.5px solid var(--gold-300); border-radius: var(--radius-lg); margin: 22px 0; overflow: hidden;
  background: var(--neutral-0); }
.activity > .head { background: var(--gradient-gold); padding: 12px 18px; display: flex; align-items: center; gap: 10px; }
.activity > .head .tag { font-family: var(--font-sans); font-weight: 800; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-900); background: rgba(10,19,34,0.12); padding: 3px 8px; border-radius: var(--radius-pill); }
.activity > .head .ttl { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--navy-900); }
.activity > .inner { padding: 18px; }
.activity .step { font-family: var(--font-sans); font-weight: 800; font-size: 12px; color: var(--gold-700);
  letter-spacing: 0.04em; margin: 14px 0 6px; }
.activity .step:first-child { margin-top: 0; }
.activity p { font-family: var(--font-sans) !important; font-size: 13.5px !important; color: var(--neutral-700) !important; }
.activity ul { margin: 6px 0 12px; padding-left: 18px; }
.activity li { font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--navy-800); margin-bottom: 5px; }

/* Writing lines */
.lines { background-image: repeating-linear-gradient(transparent, transparent 31px, var(--border-default) 31px, var(--border-default) 32px);
  margin: 10px 0 4px; }
.lines.h3 { height: 96px; } .lines.h5 { height: 160px; } .lines.h8 { height: 256px; } .lines.h10 { height: 320px; }

/* Numbered goal grid (50) */
.goalgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin: 8px 0; }
.goalrow { display: flex; align-items: flex-end; gap: 8px; padding: 9px 0 3px; }
.goalrow .gn { font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: var(--gold-600); width: 20px; flex-shrink: 0; }
.goalrow .gl { flex: 1; border-bottom: 1px solid var(--border-default); height: 16px; }

/* SMART field block */
.field { margin: 8px 0; }
.field .flabel { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--navy-600); margin-bottom: 4px; }
.field .fline { border-bottom: 1px solid var(--border-default); height: 22px; }

/* Price-it-out table (fillable) */
table.pricetable { width: 100%; border-collapse: collapse; margin: 10px 0; font-family: var(--font-sans); }
table.pricetable td { border-bottom: 1px solid var(--border-default); padding: 9px 6px; font-size: 13px; color: var(--navy-800); }
table.pricetable td:last-child { width: 130px; text-align: right; color: var(--gold-700); font-family: var(--font-mono); font-weight: 700; }
table.pricetable tr.total td { border-top: 2px solid var(--navy-700); border-bottom: none; font-weight: 800; padding-top: 11px; }

/* Facilitator note */
.facilitator { display: flex; gap: 12px; background: var(--navy-50); border: 1px dashed var(--navy-200);
  border-radius: var(--radius-md); padding: 13px 16px; margin: 16px 0; }
.facilitator .pin { font-family: var(--font-sans); font-weight: 800; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-600); flex-shrink: 0; padding-top: 1px; }
.facilitator p { font-family: var(--font-sans) !important; font-size: 13px !important; line-height: 1.55 !important;
  color: var(--navy-700) !important; margin: 0 !important; }

/* Reflection block — student writing space woven through the teaching pages */
.reflect { background: var(--navy-50); border: 1px solid var(--navy-100); border-left: 4px solid var(--navy-400);
  border-radius: var(--radius-md); padding: 16px 20px 18px; margin: 20px 0; }
.reflect .label { font-family: var(--font-sans); font-weight: 800; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-500); display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.reflect .label::before { content: "✎"; font-size: 13px; color: var(--gold-600); }
.reflect .prompt { font-family: var(--font-serif); font-size: 15px; line-height: 1.5; color: var(--navy-800); margin: 0; }
.reflect .prompt + .prompt { margin-top: 4px; }
.reflect .sub { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-secondary); margin: 4px 0 0; }
.reflect .lines { background-image: repeating-linear-gradient(transparent, transparent 31px, var(--navy-200) 31px, var(--navy-200) 32px); }
.reflect .qrow { margin-top: 12px; }
.reflect .qrow .flabel { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.03em;
  color: var(--navy-600); margin-bottom: 3px; }

/* Formula callout (Assets − Liabilities = Net Worth, etc.) */
.formula { background: var(--gradient-navy); color: var(--neutral-50); border-radius: var(--radius-lg); padding: 26px 24px; margin: 20px 0; text-align: center; }
.formula .eq { font-family: var(--font-serif); font-weight: 700; font-size: 32px; letter-spacing: -0.01em; }
.formula .eq .op { color: var(--gold-300); margin: 0 8px; }
.formula .note { font-family: var(--font-sans); font-size: 13px; color: var(--navy-200); margin-top: 10px; line-height: 1.5; }

/* 70-10-10-10 buckets */
.buckets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.bucket { border-radius: var(--radius-md); padding: 16px 14px; text-align: center; border: 1px solid var(--gold-200); background: var(--surface-gold-soft); }
.bucket:first-child { background: var(--navy-50); border-color: var(--navy-100); }
.bucket .pct { font-family: var(--font-mono); font-weight: 700; font-size: 30px; color: var(--gold-700); }
.bucket:first-child .pct { color: var(--navy-600); }
.bucket .nm { font-family: var(--font-serif); font-weight: 700; font-size: 15px; color: var(--navy-800); margin-top: 4px; }
.bucket .ds { font-family: var(--font-sans); font-size: 11.5px; color: var(--text-secondary); margin-top: 6px; line-height: 1.4; }

/* Three-layer protection */
.layers { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.layer { display: flex; gap: 16px; align-items: flex-start; border-radius: var(--radius-md); padding: 15px 18px; background: var(--neutral-0); border: 1px solid var(--border-default); border-left: 4px solid var(--gold-500); }
.layer .ln { font-family: var(--font-sans); font-weight: 800; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-700); flex-shrink: 0; width: 70px; padding-top: 3px; }
.layer .lt { font-family: var(--font-serif); font-weight: 700; font-size: 16px; color: var(--navy-800); }
.layer .ld { font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }

/* Your money move */
.move { background: var(--surface-gold-soft); border: 1px solid var(--gold-200); border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-md); padding: 14px 18px; margin: 18px 0; }
.move .label { font-family: var(--font-sans); font-weight: 800; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-700); margin-bottom: 4px; }
.move p { font-family: var(--font-serif) !important; font-size: 14.5px !important; color: var(--navy-800) !important; margin: 0 !important; }

/* Recap list */
.recap { background: var(--navy-900); border-radius: var(--radius-lg); padding: 24px 26px; margin: 22px 0; color: var(--neutral-50); }
.recap h3 { color: var(--gold-300); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.recap ol { margin: 0; padding-left: 0; list-style: none; counter-reset: r; }
.recap li { counter-increment: r; position: relative; padding: 9px 0 9px 40px; border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; color: var(--navy-100); }
.recap li:first-child { border-top: none; }
.recap li b { color: var(--neutral-50); }
.recap li::before { content: counter(r); position: absolute; left: 0; top: 8px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--gradient-gold); color: var(--navy-900); font-family: var(--font-mono);
  font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }

/* Inherited-belief chips */
.beliefs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.beliefs span { font-family: var(--font-serif); font-style: italic; font-size: 13.5px; color: var(--navy-700);
  background: var(--neutral-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 6px 14px; }

/* ---- Cover ---- */
.cover { background: var(--gradient-navy); color: var(--neutral-50); min-height: 10.6in; padding: 0.9in 0.85in;
  display: flex; flex-direction: column; position: relative; overflow: hidden; }
.cover .crest { height: 92px; width: auto; }
.cover .topband { display: flex; align-items: center; gap: 16px; }
.cover .topband .wm { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--neutral-50); }
.cover .mid { margin-top: auto; margin-bottom: auto; }
.cover .prog { font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--neutral-50); }
.cover .module { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--neutral-50); margin-top: 28px; }
.cover h1 { font-family: var(--font-serif); font-weight: 700; font-size: 52px; line-height: 1.04; letter-spacing: -0.02em;
  color: var(--neutral-50); margin: 8px 0 0; max-width: 8in; }
.cover .sub { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--neutral-50); margin-top: 14px; }
.cover .rule { height: 3px; width: 120px; background: var(--gradient-gold); margin: 30px 0; border-radius: 2px; }
.cover .foot { display: flex; justify-content: space-between; align-items: flex-end; }
.cover .foot .meta { font-family: var(--font-sans); font-size: 12px; color: var(--navy-200); line-height: 1.7; }
.cover .foot .meta b { color: var(--neutral-50); }
.cover .glow { position: absolute; top: -20%; right: -10%; width: 60%; height: 70%;
  background: radial-gradient(circle, rgba(226,186,88,0.16), transparent 70%); pointer-events: none; }

/* How to use band */
.howto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.howto .card { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px 18px; }
.howto .card.classroom { background: var(--navy-50); border-color: var(--navy-100); }
.howto .card.standalone { background: var(--surface-gold-soft); border-color: var(--gold-200); }
.howto .card .h { font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.howto .card.classroom .h { color: var(--navy-600); }
.howto .card.standalone .h { color: var(--gold-700); }
.howto .card p { font-family: var(--font-sans) !important; font-size: 13px !important; line-height: 1.55 !important;
  color: var(--navy-700) !important; margin: 0 !important; }

/* Objectives */
.objectives { background: var(--neutral-50); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 20px 24px; margin: 20px 0; }
.objectives .h { font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-700); margin-bottom: 12px; }
.objectives ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 9px; }
.objectives li { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.5; color: var(--navy-800);
  padding-left: 26px; position: relative; }
.objectives li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--gold-500); font-size: 14px; }

/* legend */
.legend { display: flex; gap: 22px; flex-wrap: wrap; margin: 14px 0 0; }
.legend .item { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; color: var(--text-secondary); }
.legend .sw { width: 26px; height: 16px; border-radius: 4px; flex-shrink: 0; }

/* ---- Print ---- */
@page { size: letter; margin: 0; }
@media print {
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { margin: 0; padding: 0; background: #fff; }
  .doc { max-width: none !important; margin: 0 !important; box-shadow: none !important; }
  .page { padding: 0 0.85in !important; }
  .hdr-space, .ftr-space { display: table-cell; height: 0.7in; }
  .toolbar { display: none !important; }
  .cover { height: 100vh; break-after: page; }
  .force-break { break-before: page; }
  h1, h2, h3, h4 { break-after: avoid; }
  .section-open { break-after: avoid; }
  /* Small & medium blocks stay whole */
  figure, table, blockquote, .stat, .keyterm, .move, .facilitator, .recap, .split, .bridge, .grid2x2,
  .objectives, .howto, .pullquote, .reflect, .formula, .buckets, .layers, .layer, .numlist, .nl { break-inside: avoid; }
  /* Keep an epigraph attached to the paragraph it follows so it never strands alone */
  .pullquote { break-before: avoid; }
  p + .pullquote { break-before: avoid; }
  /* Tall worksheets may split across pages to avoid dumping white space,
     but their internal units never break, and the header stays with its body */
  .activity > .head { break-after: avoid; }
  .activity > .inner { break-before: avoid; }
  .field, .goalrow, .qrow, .activity .step, table.pricetable, .lines { break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }
}