/* ============================================================
   Dealmaking OS — Editorial Playbook
   Direction B · Ocean + Cream · print-first (US Letter 816×1056)
   Requires playbook.css (fonts + :root tokens) loaded first.
   ============================================================ */

/* ---------- deeper, text-legible framework accents ---------- */
:root{
  --acc-reach:   #005175;  /* ocean   */
  --acc-learn:   #5d8170;  /* forest, deepened */
  --acc-value:   #c0563a;  /* terracotta, deepened */
  --acc-resolve: #b0801f;  /* sunray, deepened */
  --acc-reach-08:   #eff4f8;
  --acc-learn-08:   #eef3f0;
  --acc-value-08:   #fbefe9;
  --acc-resolve-08: #fbf3e0;
  --paper:#fbf8f3;
}

/* ---------- screen presentation: stacked pages on a warm backdrop ---------- */
html,body{ margin:0; }
body.doc{
  background:#cfcabf;
  display:flex; flex-direction:column; align-items:center;
  gap:26px; padding:34px 20px 60px;
}
.page{
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 12px 40px rgba(14,29,39,.22);
  flex:0 0 auto;
}

/* page interior */
.page__pad{ padding:70px 74px; }

/* ---------- per-page framework accent ---------- */
.fw-reach{   --accent:var(--acc-reach);   --accent-08:var(--acc-reach-08); }
.fw-learn{   --accent:var(--acc-learn);   --accent-08:var(--acc-learn-08); }
.fw-value{   --accent:var(--acc-value);   --accent-08:var(--acc-value-08); }
.fw-resolve{ --accent:var(--acc-resolve); --accent-08:var(--acc-resolve-08); }

/* ============================================================
   RUNNING CHROME
   ============================================================ */
.run-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px; border-bottom:1px solid var(--mist);
  margin-bottom:38px;
}
.run-top .l{ display:flex; align-items:center; gap:11px; }
.run-top .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent,var(--ocean)); }
.run-top .nm{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.run-top .r{ font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); }

.run-foot{
  position:absolute; left:74px; right:74px; bottom:42px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone);
  padding-top:14px; border-top:1px solid var(--mist);
}
.run-foot .pg{ color:var(--slate); font-weight:600; }

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */
.ey{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--accent,var(--ocean)); margin:0; }
.kicker{ font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--slate); margin:0; }
.h-fw{ font-weight:500; font-size:62px; line-height:.98; letter-spacing:-.015em; color:var(--ink); margin:6px 0 4px; }
.h-sec{ font-weight:500; font-size:40px; line-height:1.04; letter-spacing:-.01em; color:var(--ink); margin:0; }
.lead{ font-size:15px; line-height:1.55; color:var(--slate); margin:0; max-width:62ch; }
.body{ font-size:13px; line-height:1.55; color:var(--charcoal); }

/* ============================================================
   PURPOSE CALLOUT (ocean / accent fill)
   ============================================================ */
.purpose{
  background:var(--accent,var(--ocean)); color:var(--white);
  border-radius:14px; padding:20px 24px; margin:24px 0;
}
.purpose .lab{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.62); margin:0 0 7px; font-weight:600; }
.purpose p{ margin:0; font-size:17px; font-weight:500; line-height:1.4; }

/* ============================================================
   STEP LADDER (reference pages)
   ============================================================ */
.ladder{ display:flex; flex-direction:column; }
.step{ display:flex; gap:22px; align-items:flex-start; padding:17px 0; border-bottom:1px solid var(--mist); }
.step:last-child{ border-bottom:none; }
.step .num{ font-size:11px; font-weight:600; color:var(--accent); width:26px; flex:0 0 auto; padding-top:13px; letter-spacing:.05em; }
.step .glyph{ font-weight:600; font-size:40px; line-height:1; color:var(--accent); width:46px; flex:0 0 auto; text-align:center; }
.step .txt h4{ margin:0 0 4px; font-weight:600; font-size:17px; color:var(--ink); letter-spacing:.01em; }
.step .txt p{ margin:0; font-size:13px; line-height:1.5; color:var(--slate); max-width:60ch; }

/* compact ladder variant (when 7 steps need to fit) */
.ladder.tight .step{ padding:12.5px 0; }
.ladder.tight .step .glyph{ font-size:34px; width:42px; }
.ladder.tight .step .txt h4{ font-size:15.5px; }
.ladder.tight .step .txt p{ font-size:12.5px; line-height:1.45; }
.ladder.tight .step .num{ padding-top:11px; }

/* RESOLVE reference carries 7 steps — tighten to fit one page */
.fw-resolve .ladder .step{ padding:10px 0; }
.fw-resolve .purpose{ margin:18px 0; }

/* ============================================================
   SYSTEM MAP / CLOSE SPINE
   ============================================================ */
.close-list{ display:flex; flex-direction:column; }
.close-row{ display:grid; grid-template-columns:60px 1fr; gap:22px; align-items:start;
  padding:18px 0; border-top:1px solid var(--mist); }
.close-row:last-child{ border-bottom:1px solid var(--mist); }
.close-row .badge{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:24px; color:var(--white); background:var(--ocean); }
.close-row.hot .badge{ background:var(--sunray); color:var(--ink); }
.close-row .nm{ font-weight:600; font-size:19px; color:var(--ink); }
.close-row .df{ font-size:13px; color:var(--slate); margin-top:3px; line-height:1.5; max-width:64ch; }
.close-row .tag{ display:inline-block; font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ocean); margin-top:8px; }

/* stage rail (horizontal) */
.rail{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.rail .seg{ text-align:center; padding:14px 6px 16px; border-bottom:2px solid var(--mist); color:var(--stone); }
.rail .seg.on{ border-bottom-color:var(--accent,var(--ocean)); color:var(--ink); }
.rail .seg .l{ font-weight:700; font-size:22px; line-height:1; }
.rail .seg.on .l{ color:var(--accent,var(--ocean)); }
.rail .seg .t{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; margin-top:6px; font-weight:600; }

/* ============================================================
   SECURE — four framework cards
   ============================================================ */
.fw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fw-card{ border:1px solid var(--mist); border-top:4px solid var(--c); border-radius:12px;
  padding:22px 22px 20px; background:var(--white); }
.fw-card .n{ font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--c); margin:0 0 8px; }
.fw-card h3{ margin:0 0 2px; font-weight:600; font-size:26px; color:var(--ink); letter-spacing:-.01em; }
.fw-card .role{ font-size:11px; color:var(--stone); letter-spacing:.04em; text-transform:uppercase; font-weight:600; }
.fw-card p{ margin:11px 0 0; font-size:12.5px; line-height:1.5; color:var(--slate); }
.fw-card .letters{ margin-top:14px; display:flex; gap:6px; }
.fw-card .letters span{ width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:var(--c); background:var(--c-soft); }

/* ============================================================
   FIELD-NOTE COMPONENTS (training pages)
   ============================================================ */
.note-h{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }

.two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.card{ border:1px solid var(--mist); border-radius:12px; padding:20px 22px; background:var(--white); }
.card h5{ margin:0 0 9px; font-weight:600; font-size:14px; color:var(--ink); }
.card p{ margin:0; font-size:12.5px; line-height:1.55; color:var(--slate); }
.card.soft{ background:var(--accent-08); border-color:transparent; }

/* do / avoid */
.da{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.da .col{ border-radius:12px; padding:18px 20px; }
.da .do{ background:var(--acc-learn-08); }
.da .avoid{ background:#f8eee9; }
.da .lab{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0 0 10px; }
.da .do .lab{ color:#4a7a5e; }
.da .avoid .lab{ color:#b4503a; }
.da ul{ margin:0; padding:0; list-style:none; }
.da li{ font-size:12px; line-height:1.45; color:var(--charcoal); padding:5px 0 5px 18px; position:relative; }
.da li::before{ content:""; position:absolute; left:0; top:10px; width:7px; height:7px; border-radius:50%; }
.da .do li::before{ background:#5d8170; }
.da .avoid li::before{ background:#c0563a; }

/* numbered layer list (LEARN explore) */
.layers{ display:flex; flex-direction:column; gap:0; }
.layer{ display:grid; grid-template-columns:40px 1fr; gap:18px; align-items:start; padding:14px 0; border-bottom:1px dashed var(--fog); }
.layer:last-child{ border-bottom:none; }
.layer .ix{ width:34px; height:34px; border-radius:9px; background:var(--accent-08); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.layer h5{ margin:0 0 2px; font-size:15px; font-weight:600; color:var(--ink); }
.layer p{ margin:0; font-size:12.5px; color:var(--slate); line-height:1.45; }

/* meta strip (timing / roles / location) */
.meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--mist); border-radius:12px; overflow:hidden; }
.meta .m{ padding:16px 18px; border-right:1px solid var(--mist); }
.meta .m:last-child{ border-right:none; }
.meta .m .k{ font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 5px; }
.meta .m .v{ font-size:13.5px; font-weight:500; color:var(--ink); line-height:1.3; }

/* readiness scale */
.scale{ display:flex; gap:6px; margin-top:10px; }
.scale span{ flex:1; height:34px; border-radius:6px; background:var(--accent-08); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }

/* pull quote / mentor voice */
.pull{ border-left:3px solid var(--accent); padding:6px 0 6px 20px; margin:0; }
.pull p{ margin:0; font-size:17px; font-weight:500; line-height:1.4; color:var(--ink); font-style:italic; }
.pull cite{ display:block; margin-top:8px; font-size:11px; font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }

/* applied-across diagram (RESOLVE) */
.applied{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.applied .a{ border:1px solid var(--mist); border-radius:12px; padding:16px 14px; text-align:center; background:var(--white); }
.applied .a .stg{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 7px; }
.applied .a p{ margin:0; font-size:11.5px; line-height:1.4; color:var(--slate); }

/* recommended reading rows */
.read{ display:flex; flex-direction:column; }
.read .row{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--mist); }
.read .row .t{ font-size:14px; font-weight:600; color:var(--ink); }
.read .row .by{ font-size:12px; color:var(--slate); margin-top:2px; }
.read .row .c{ font-size:11px; color:var(--stone); text-align:right; max-width:34ch; line-height:1.4; }

/* generic spacer utility */
.mt-auto{ margin-top:auto; }
.gap-s{ height:14px; } .gap-m{ height:24px; } .gap-l{ height:36px; }

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  @page{ size:8.5in 11in; margin:0; }
  body.doc{ background:#fff; gap:0; padding:0; display:block; }
  .page{ box-shadow:none; break-after:page; page-break-after:always; }
  .page:last-child{ break-after:auto; page-break-after:auto; }
  .no-print{ display:none !important; }
}