/* commons.css: The Growth Pathway Tools shared stylesheet.
   One file. Every tool links this instead of inlining CSS, so a tweak here updates all of them.
   Colours are named by job, so a new palette is a change to the :root block only.
   Type roles: Cormorant Garamond for page titles, Source Serif 4 for reading,
   DM Sans for the interface (labels, hints, buttons, chips, the all-caps eyebrows).
   Contrast figures are WCAG ratios; AA is 4.5 for text, 3.0 for borders and focus rings.
   commons.js reads these same colour tokens for the PDFs. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Palette: olive, brown, gold on cream */
  --page:#FDFAF6;           /* background, a pale cream */
  --surface:#ffffff;        /* fields and cards, a step lighter than the page */
  --ink:#344016;            /* headings and primary text: 10.67 on the page */
  --ink-2:#5f4d3b;          /* supporting text and hints: 7.73 on the page */
  --ink-3:#76604A;          /* placeholders and empty states: 5.93 on white */
  --line:#76604A;           /* dividers and field borders: 5.93 against white */
  --gold:#D6AA68;           /* buttons, highlights, small callouts. Fills only: as text on cream it's 2.0 */
  --on-gold:#344016;        /* text on gold: 5.19 */
  --deep:#344016;           /* the header and payoff blocks */
  --on-deep:#FDFAF6;        /* text on the dark blocks: 10.67 */
  --accent-on-deep:#D6AA68; /* labels on the dark blocks: 5.19 */
  --serif:'Source Serif 4','Source Serif Pro',Georgia,serif;
  --display:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--serif);background:var(--page);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- Header ---------- */
.hero{background:var(--deep);padding:30px 40px 32px}
.hero-inner,.sv-inner{max-width:720px;margin:0 auto}
.hero-inner.wide,.sv-inner.wide{max-width:960px}
.hero-back{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--on-deep);text-decoration:none;display:inline-block;margin-bottom:20px}
.hero-back:hover{text-decoration:underline;text-underline-offset:3px}
.hero :focus-visible{outline-color:var(--gold)}
.hero-eye{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-on-deep);display:block;margin-bottom:13px}
.hero-h{font-family:var(--display);font-size:40px;font-weight:500;color:var(--on-deep);line-height:1.06;margin-bottom:11px;letter-spacing:-.01em}
.hero-deck{font-size:16px;color:var(--on-deep);line-height:1.55;max-width:600px}
.hero-meta{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(253,250,246,.25)}
.hm{font-family:var(--sans);font-size:13.5px;color:var(--on-deep);line-height:1.4}
.hm b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-on-deep);margin-bottom:3px}

/* ---------- Save indicator ---------- */
.sv{font-family:var(--sans);background:var(--page);border-bottom:1px solid var(--line);padding:9px 40px;font-size:12px;color:var(--ink-2);position:sticky;top:0;z-index:100}
.sv.ok{color:var(--ink)}
.sv-inner{display:flex;align-items:center;gap:7px;width:100%}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0}

/* ---------- Body ---------- */
.wrap{max-width:720px;margin:0 auto;padding:0 40px 90px}
.wrap.wide{max-width:960px}
.part-banner{padding:40px 0 2px}
.pb-tag{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--on-gold);background:var(--gold);display:inline-block;padding:4px 9px;border-radius:4px;margin-bottom:9px}
.pb-title{font-family:var(--display);font-size:27px;font-weight:600;color:var(--ink);display:block;line-height:1.1}
.sec{padding:26px 0;border-bottom:1px solid var(--line)}
.sec.last{border-bottom:none}
.q-num{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:6px}
.q-title{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:5px}
.q-sub{font-family:var(--serif);font-size:15.5px;color:var(--ink-2);line-height:1.55;margin-bottom:18px}
.voice-line,.callout,.voice-box{font-family:var(--sans);font-size:14px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);padding:12px 15px;border-radius:0 6px 6px 0;margin-bottom:20px;line-height:1.55}
.callout{margin-top:26px}
.callout strong,.voice-line strong,.voice-box strong{color:var(--ink);font-weight:600}
.voice-box .gen-row{margin-top:12px}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--sans);font-size:13px;color:var(--ink-2);margin:22px 0 4px}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend .cbx{width:24px;height:24px;font-size:12px;cursor:default}
.divider{border:none;border-top:1px solid var(--line);margin:8px 0}

/* ---------- Fields ---------- */
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.field-lbl{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);display:block;margin-bottom:4px}
.field-opt{font-weight:400;color:var(--ink-2)}
.field-hint{font-family:var(--sans);font-size:13px;color:var(--ink-2);display:block;margin-bottom:8px;line-height:1.5}
input.fi,textarea.fi,select.fi{width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:11px 13px;line-height:1.55;outline:none;transition:border-color .15s,box-shadow .15s;resize:vertical}
input.fi:focus,textarea.fi:focus,select.fi:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(214,170,104,.45)}
input.fi::placeholder,textarea.fi::placeholder,.note-subj::placeholder,.note-body::placeholder{color:var(--ink-3);opacity:1;font-size:15px}
.fi-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fi-row .fi{flex:1;min-width:160px}
.fi-key{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);width:120px;flex-shrink:0}
.numbered{display:flex;flex-direction:column;gap:10px}
.nrow{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:10px}
.nnum{font-family:var(--display);font-size:24px;font-weight:600;color:var(--ink);text-align:center;line-height:1}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--sans);font-size:13px;font-weight:500;padding:8px 15px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--gold);border-color:var(--ink);color:var(--on-gold);font-weight:600}

/* ---------- Checklist rows: ✓ looks good, ! needs work ---------- */
.checks{display:flex;flex-direction:column;gap:8px}
.check{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;background:var(--surface);border:1px solid var(--line);border-radius:6px;transition:border-color .15s,background .15s,box-shadow .15s}
.check.pass{border-color:var(--ink);box-shadow:inset 4px 0 0 var(--deep)}
.check.fail{border-color:var(--ink);background:rgba(214,170,104,.16);background:color-mix(in srgb,var(--gold) 16%,var(--surface));box-shadow:inset 4px 0 0 var(--gold)}
.check-btns{display:flex;gap:6px;flex-shrink:0}
.cbx{width:34px;height:34px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.cbx:hover{border-color:var(--ink);color:var(--ink)}
.cbx.on-pass{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
.cbx.on-fail{background:var(--gold);border-color:var(--ink);color:var(--on-gold)}
.check-txt{font-family:var(--serif);font-size:15.5px;color:var(--ink);line-height:1.5;padding-top:5px;flex:1}
.check-tip{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.check.tickable{cursor:pointer;user-select:none;align-items:center}
.tick{width:24px;height:24px;border-radius:5px;border:1px solid var(--line);background:var(--surface);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--on-deep);font-family:var(--sans);font-size:13px;font-weight:700}
.check.done{border-color:var(--ink);box-shadow:inset 4px 0 0 var(--deep)}
.check.done .tick{background:var(--deep);border-color:var(--deep)}
.check.tickable .check-txt{padding-top:0}
.group{margin-bottom:28px}
.group:last-child{margin-bottom:0}
.group-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:8px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.group-name{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.group-count{font-family:var(--sans);font-size:12.5px;color:var(--ink-2)}
.group-sub{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:16px 0 8px}
.group-sub:first-of-type{margin-top:4px}

/* ---------- Score tiles ---------- */
.score{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.sc{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px 8px;text-align:center}
.sc-n{font-family:var(--display);font-size:30px;font-weight:600;color:var(--ink);line-height:1}
.sc-l{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink-2);margin-top:5px}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin-bottom:12px}
.card:last-child{margin-bottom:0}
.card-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.card-num{font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink);line-height:1}
.card-title{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);flex:1}
.card-hint{font-family:var(--sans);font-size:13px;color:var(--ink-2);line-height:1.5;margin-bottom:10px}
.card-hint a{color:var(--ink);font-weight:600}
.badge{font-family:var(--sans);font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:var(--surface);white-space:nowrap}
.badge.good{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
.badge.warn{background:var(--gold);border-color:var(--ink);color:var(--on-gold)}
.example{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin-bottom:18px}
.example-lbl{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:8px}
.example-txt{font-family:var(--serif);font-size:15.5px;color:var(--ink);line-height:1.6}
.example-txt+.example-lbl{margin-top:12px}

/* ---------- Buttons ---------- */
.pbtn,.gen-btn{font-family:var(--sans);font-size:14px;font-weight:600;background:var(--gold);color:var(--on-gold);border:none;border-radius:6px;padding:12px 22px;cursor:pointer;transition:background .15s,color .15s;display:inline-flex;align-items:center;gap:7px}
.pbtn:hover,.gen-btn:hover{background:var(--deep);color:var(--on-deep)}
.pbtn:disabled,.gen-btn:disabled{opacity:.6;cursor:default}
.cbtn,.rewrite{font-family:var(--sans);font-size:13px;background:transparent;border:1px solid var(--line);color:var(--ink-2);border-radius:6px;padding:10px 15px;cursor:pointer;transition:all .15s}
.cbtn:hover,.rewrite:hover{border-color:var(--ink);color:var(--ink)}
.mini-copy{font-family:var(--sans);font-size:12px;font-weight:600;background:var(--gold);border:1px solid var(--gold);color:var(--on-gold);border-radius:5px;padding:5px 12px;cursor:pointer;transition:all .15s;letter-spacing:0;text-transform:none;white-space:nowrap}
.mini-copy:hover{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
.gen-row{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.gen-status{font-family:var(--sans);font-size:13px;color:var(--ink-2)}
.gen-status.err{color:var(--ink);font-weight:700}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(52,64,22,.3);border-top-color:var(--on-gold);border-radius:50%;animation:cs-spin .7s linear infinite;vertical-align:-2px}
@keyframes cs-spin{to{transform:rotate(360deg)}}

/* ---------- Written output, shown inline once it exists ---------- */
.note-out{display:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:24px 26px;margin-top:22px}
.note-out.show{display:block}
.note-lbl,.payoff-lbl{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.note-subj{display:block;width:100%;border:none;border-bottom:1px dashed var(--line);background:transparent;outline:none;padding:4px 0 9px;margin-bottom:12px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink)}
.note-subj:focus{border-bottom-color:var(--ink)}
.note-body{display:block;width:100%;border:none;background:transparent;outline:none;font-family:var(--serif);font-size:16px;color:var(--ink);line-height:1.7;white-space:pre-wrap}
textarea.note-body{resize:vertical;min-height:200px;margin-bottom:12px}
.copied-note{font-family:var(--sans);font-size:12px;color:var(--ink-2);margin-top:10px;display:none}

/* ---------- Payoff: the dark result card ---------- */
.draft-sec{background:var(--deep);border-radius:10px;padding:32px 34px;margin-top:38px}
.draft-eye{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-on-deep);display:block;margin-bottom:8px}
.draft-h{font-family:var(--display);font-size:27px;font-weight:600;color:var(--on-deep);margin-bottom:8px}
.draft-intro{font-family:var(--serif);font-size:15px;color:var(--on-deep);line-height:1.6;margin-bottom:22px}
.payoff-card{background:var(--surface);border-radius:8px;padding:24px 26px;margin-bottom:16px}
.sum-row{display:grid;grid-template-columns:170px 1fr;gap:4px 18px;padding:11px 0;border-bottom:1px solid var(--line)}
.sum-row:last-child{border-bottom:none;padding-bottom:0}
.sum-row:first-child{padding-top:0}
.sum-lbl{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-2);padding-top:2px}
.sum-val{font-family:var(--serif);font-size:15.5px;color:var(--ink);line-height:1.55;white-space:pre-wrap}
.plain-list,.num-list{list-style:none;padding:0;margin:0}
.plain-list li,.num-list li{position:relative;font-family:var(--serif);font-size:15.5px;color:var(--ink);line-height:1.5;padding:8px 0 8px 26px;border-bottom:1px solid var(--line)}
.plain-list li:last-child,.num-list li:last-child{border-bottom:none}
.plain-list li::before{content:'';position:absolute;left:3px;top:16px;width:9px;height:9px;border-radius:2px;background:var(--gold)}
.num-list{counter-reset:n}
.num-list li{counter-increment:n}
.num-list li::before{content:counter(n);position:absolute;left:0;top:6px;font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink);line-height:1.2}
.payoff-sub{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:18px 0 6px}
.payoff-sub:first-child{margin-top:0}
.empty{font-family:var(--sans);font-size:13.5px;color:var(--ink-3);line-height:1.55}
.btn-row{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.draft-sec .cbtn{color:var(--on-deep);border-color:rgba(253,250,246,.55)}
.draft-sec .cbtn:hover{color:var(--on-deep);border-color:var(--on-deep)}
.draft-sec .pbtn:hover{background:var(--on-deep);color:var(--ink)}
.draft-sec :focus-visible{outline-color:var(--gold)}
.draft-sec>.copied-note{color:var(--on-deep)}
.footer-txt{font-family:var(--sans);text-align:center;font-size:11px;letter-spacing:.05em;color:var(--accent-on-deep);margin-top:22px}

/* ---------- The Growth Pathway Tools index ---------- */
.phase{padding:40px 0 6px}
.phase-title{font-family:var(--display);font-size:34px;font-weight:600;color:var(--ink);line-height:1.1;margin-bottom:4px}
.phase-sub{font-family:var(--serif);font-size:15.5px;color:var(--ink-2);margin-bottom:8px}
.cell{padding:18px 0;border-top:1px solid var(--line)}
.cell-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cell-name{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.cell-q{font-family:var(--sans);font-size:13px;color:var(--ink-2)}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tool-card{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 18px;transition:border-color .15s,box-shadow .15s}
.tool-card:hover{border-color:var(--ink);box-shadow:inset 4px 0 0 var(--gold)}
.tool-name{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:4px}
.tool-desc{font-family:var(--sans);font-size:13px;color:var(--ink-2);line-height:1.5}

@media(max-width:600px){
  .hero{padding:24px 22px 24px}.hero-h{font-size:31px}
  .wrap{padding:0 22px 70px}.sv{padding:9px 22px}
  .draft-sec{padding:26px 20px}.part-banner{padding:32px 0 2px}
  .payoff-card,.note-out{padding:20px 18px}
  .sum-row{grid-template-columns:1fr}
  .score{gap:6px}.sc-n{font-size:26px}
  .check{padding:10px 11px;gap:10px}
  .fi-key{width:100%}
  .phase-title{font-size:29px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{
  .sv,.btn-row,.gen-row,.voice-box,.rewrite,.mini-copy,.hero-back,.copied-note{display:none!important}
  body>div[style*="position:fixed"]{display:none!important} /* the sign-in pill from auth.js */
  .hero,.draft-sec,.chip.on,.pb-tag,.cbx,.check{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sec,.card,.check,.payoff-card,.note-out{break-inside:avoid;page-break-inside:avoid}
  @page{size:letter;margin:.5in}
}