/**
 * SME Business Planner — base styles & brand tokens (Phase 1).
 * Full experience styling, layout and animation arrive in Phase 4.
 * Palette derived from craftbook.co.uk. Self-hosted fonts bundled in Phase 4.
 */
.sbp-root{
  /* Brand tokens (CraftBook) */
  --sbp-ink:#1b2530;
  --sbp-ink-fixed:#1b2530;
  --sbp-ink-2:#3a4654;
  --sbp-paper:#f1eadd;
  --sbp-paper-2:#e7ddcb;
  --sbp-card:#fbf7ef;
  --sbp-teal:#1f6f6b;
  --sbp-clay:#bd6238;
  --sbp-clay-text:#a04f2a;
  --sbp-teal-text:#1f6f6b;
  --sbp-gold:#a87d2b;
  --sbp-slate:#46566f;
  --sbp-slate-text:#46566f;
  --sbp-green:#3f7d5a;
  --sbp-line:#cdbfa6;
  --sbp-muted:#6e6553;
  --sbp-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sbp-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  box-sizing:border-box;
  font-family:var(--sbp-sans);
  color:var(--sbp-ink);
  background:var(--sbp-paper);
  border-radius:14px;
  padding:18px;
  position:relative;
  container-type:inline-size;
}
.sbp-root *{box-sizing:border-box;}
.sbp-booting{font-family:var(--sbp-serif);color:var(--sbp-muted);padding:40px 10px;text-align:center;}
.sbp-noscript{color:var(--sbp-clay);font-weight:600;}
.sbp-footer-title{
  margin-top:14px;text-align:center;
  font-family:var(--sbp-sans);font-size:12px;letter-spacing:1px;
  text-transform:uppercase;color:var(--sbp-muted);
}
@media (prefers-color-scheme:dark){
  .sbp-root{--sbp-paper:#171c22;--sbp-paper-2:#11161b;--sbp-card:#1f262e;
    --sbp-ink:#eee6d9;--sbp-ink-2:#cdd4dc;--sbp-line:#3a4654;--sbp-muted:#9aa3ad;--sbp-clay-text:#d98a5f;--sbp-teal-text:#4fb3ad;--sbp-slate-text:#97a4bc;}
}

/* ===========================================================================
   Phase 3 — functional component styling.
   (The SVG map/gameboard, richer layout and animation arrive in Phase 4.)
   =========================================================================== */
.sbp-root .sbp-view{max-width:720px;margin:0 auto;}
.sbp-view-title{font-family:var(--sbp-serif);font-weight:600;font-size:clamp(22px,4vw,30px);
  line-height:1.12;margin:2px 0 10px;color:var(--sbp-ink);outline:none;}
.sbp-eyebrow{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--sbp-clay-text);
  font-weight:600;margin:0 0 4px;}
.sbp-q{font-family:var(--sbp-serif);font-size:16px;margin:16px 0 10px;color:var(--sbp-ink);}
.sbp-h3{font-family:var(--sbp-serif);font-size:17px;margin:22px 0 8px;color:var(--sbp-ink);}
.sbp-progress-line{font-size:13px;color:var(--sbp-muted);margin:0 0 14px;}

/* guide card */
.sbp-guide{display:flex;gap:12px;align-items:flex-start;background:var(--sbp-ink-fixed);
  color:#f3ecdf;border-radius:13px;padding:15px 16px;margin:14px 0;}
.sbp-guide-emblem{flex:0 0 36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,var(--sbp-clay) 0 28%,transparent 29%),
             conic-gradient(from 0deg,var(--sbp-gold),var(--sbp-clay),var(--sbp-slate),var(--sbp-gold));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.15);}
.sbp-guide-name{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#b9a98f;font-weight:600;}
.sbp-guide-tag{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#9a8f76;}
.sbp-guide-say{font-family:var(--sbp-serif);font-size:16px;line-height:1.5;color:#f3ecdf;margin-top:4px;}
.sbp-guide-say strong{color:#fff;}

/* choices / branch */
.sbp-choices{display:flex;flex-direction:column;gap:9px;margin:6px 0;}
.sbp-choice{font-family:var(--sbp-sans);font-size:15px;text-align:left;background:var(--sbp-card);
  border:1px solid var(--sbp-line);border-radius:10px;padding:12px 14px;cursor:pointer;color:var(--sbp-ink);
  transition:border-color .15s,background .15s;}
.sbp-choice:hover{border-color:var(--sbp-teal);}
.sbp-choice.sbp-picked{border-color:var(--sbp-teal);background:rgba(31,111,107,.08);font-weight:600;}
.sbp-reply{font-family:var(--sbp-serif);font-size:15px;line-height:1.5;color:var(--sbp-ink-2);
  border-left:2px solid var(--sbp-teal);padding-left:13px;margin:12px 2px;}

/* links / buttons */
.sbp-link{background:none;border:0;color:var(--sbp-teal-text);cursor:pointer;font-family:var(--sbp-sans);
  font-size:14px;padding:6px 0;text-decoration:underline;text-underline-offset:3px;}
.sbp-back{display:inline-block;margin-bottom:8px;}
.sbp-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 6px;}
.sbp-btn{font-family:var(--sbp-sans);font-size:14px;font-weight:600;border:1px solid var(--sbp-line);
  background:var(--sbp-card);color:var(--sbp-ink);border-radius:10px;padding:11px 16px;cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s;}
.sbp-btn:hover{border-color:var(--sbp-ink-2);}
.sbp-btn:active{transform:translateY(1px);}
.sbp-btn-primary{background:var(--sbp-ink-fixed);color:#fff;border-color:var(--sbp-ink-fixed);}
.sbp-btn-primary:hover{background:#0f1822;}
.sbp-btn-primary.sbp-is-done{background:var(--sbp-green);border-color:var(--sbp-green);}

/* stage list (placeholder for the map) */
.sbp-stage-list{list-style:none;margin:0;padding:0;}
.sbp-stage-item{margin:0 0 8px;}
.sbp-stage-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:var(--sbp-card);border:1px solid var(--sbp-line);border-radius:11px;padding:12px 14px;
  color:var(--sbp-ink);transition:border-color .15s,transform .1s;}
.sbp-stage-btn:hover{border-color:var(--sbp-teal);}
.sbp-stage-num{flex:0 0 30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--sbp-paper-2);color:var(--sbp-ink);font-weight:700;font-size:14px;}
.sbp-is-done .sbp-stage-num{background:var(--sbp-teal);color:#fff;}
.sbp-is-current .sbp-stage-num{background:var(--sbp-clay);color:#fff;}
.sbp-stage-meta{display:flex;flex-direction:column;flex:1;}
.sbp-stage-name{font-weight:600;font-size:15px;}
.sbp-stage-sum{font-size:13px;color:var(--sbp-muted);}
.sbp-stage-badge{font-size:12px;color:var(--sbp-muted);font-weight:600;}
.sbp-is-done .sbp-stage-badge{color:var(--sbp-green);}

/* matters / resources */
.sbp-matters{margin:0;padding-left:18px;}
.sbp-matters li{margin:0 0 9px;font-size:15px;line-height:1.5;}
.sbp-resources{display:flex;flex-direction:column;gap:9px;}
.sbp-res{display:block;text-decoration:none;color:inherit;border:1px solid var(--sbp-line);
  border-radius:11px;padding:12px 14px;transition:border-color .15s,transform .1s;}
.sbp-res:hover{border-color:var(--sbp-ink-2);}
.sbp-res-top{display:flex;align-items:center;gap:8px;}
.sbp-res-label{font-weight:600;font-size:14px;}
.sbp-res-tag{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;}
.sbp-res-int{color:var(--sbp-clay-text);border:1px solid var(--sbp-clay-text);}
.sbp-res-ext{color:var(--sbp-slate-text);border:1px solid var(--sbp-slate-text);}
.sbp-res-arrow{margin-left:auto;color:var(--sbp-muted);}
.sbp-res-note{display:block;font-family:var(--sbp-serif);font-size:13.5px;color:var(--sbp-ink-2);margin-top:3px;}
.sbp-hint{font-size:12px;color:var(--sbp-muted);margin:8px 2px 0;}

/* completion */
.sbp-recap{list-style:none;margin:6px 0;padding:0;}
.sbp-recap-item{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--sbp-line);font-size:14px;}
.sbp-recap-item:last-child{border-bottom:1px solid var(--sbp-line);}
.sbp-recap-stamp{color:var(--sbp-muted);font-weight:700;}
.sbp-recap-item.sbp-is-done .sbp-recap-stamp{color:var(--sbp-green);}
.sbp-recap-sum{color:var(--sbp-muted);}
.sbp-capture{border:1px solid var(--sbp-line);border-radius:12px;padding:15px 16px;margin:18px 0;background:var(--sbp-card);}
.sbp-capture-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.sbp-input{flex:1;min-width:160px;font-family:var(--sbp-sans);font-size:14px;padding:11px 13px;
  border:1px solid var(--sbp-line);border-radius:9px;background:#fff;color:#222;}
.sbp-input:focus{outline:none;border-color:var(--sbp-teal);}
.sbp-ok{font-family:var(--sbp-serif);font-size:15px;color:var(--sbp-ink);}

/* meta footer */
.sbp-meta{margin-top:20px;padding-top:12px;border-top:1px solid var(--sbp-line);font-size:12px;color:var(--sbp-muted);line-height:1.5;}
.sbp-meta-actions{margin-top:8px;}

/* focus visibility (refined further in the Phase 6 a11y pass) */
.sbp-root :focus-visible{outline:2px solid var(--sbp-teal);outline-offset:2px;border-radius:6px;}

/* explicit theme overrides (when admin forces light/dark) */
.sbp-root[data-sbp-theme="dark"]{--sbp-paper:#171c22;--sbp-paper-2:#11161b;--sbp-card:#1f262e;
  --sbp-ink:#eee6d9;--sbp-ink-2:#cdd4dc;--sbp-line:#3a4654;--sbp-muted:#9aa3ad;--sbp-clay-text:#d98a5f;--sbp-teal-text:#4fb3ad;--sbp-slate-text:#97a4bc;}
.sbp-root[data-sbp-theme="light"]{--sbp-paper:#f1eadd;--sbp-paper-2:#e7ddcb;--sbp-card:#fbf7ef;
  --sbp-ink:#1b2530;--sbp-ink-2:#3a4654;--sbp-line:#cdbfa6;--sbp-muted:#6e6553;--sbp-clay-text:#a04f2a;--sbp-teal-text:#1f6f6b;--sbp-slate-text:#46566f;}

@media print{
  .sbp-actions,.sbp-capture,.sbp-meta-actions,.sbp-back,.sbp-link{display:none !important;}
  .sbp-root{background:#fff;padding:0;}
}

/* ===========================================================================
   Phase 4 — fonts, gameboard, visual polish, animation, responsiveness.
   =========================================================================== */
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* guide emblem (overrides the Phase 3 placeholder) */
.sbp-root .sbp-guide-emblem{flex:0 0 40px;width:40px;height:40px;background:none;border-radius:0;}
.sbp-root .sbp-guide-emblem svg{display:block;width:40px;height:40px;}

/* gameboard */
.sbp-board{position:relative;margin:8px 0 6px;}
.sbp-board-svg{width:100%;height:auto;display:block;overflow:visible;}
.sbp-board-overlay{position:absolute;left:0;top:0;right:0;bottom:0;}
.sbp-node-btn{position:absolute;transform:translate(-50%,-50%);width:66px;height:80px;
  min-width:44px;min-height:44px;background:none;border:0;padding:0;margin:0;cursor:pointer;
  border-radius:40px;-webkit-tap-highlight-color:transparent;}
.sbp-node-btn::after{content:"";position:absolute;left:50%;top:26px;width:48px;height:48px;
  transform:translate(-50%,-50%);border-radius:50%;transition:background .15s;}
.sbp-node-btn:hover::after{background:rgba(31,111,107,.12);}
.sbp-node-btn:focus{outline:none;}
.sbp-node-btn:focus-visible::after{outline:2px solid var(--sbp-teal);outline-offset:2px;}

/* svg element colours (class-driven so theming works) */
.sbp-contour{fill:none;stroke:var(--sbp-line);stroke-width:1;opacity:.30;}
.sbp-trail-ahead{fill:none;stroke:var(--sbp-ink);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round;opacity:.42;}
.sbp-trail-done{fill:none;stroke:var(--sbp-teal);stroke-width:3.2;stroke-linecap:round;}
.sbp-dot-ring{fill:none;stroke:var(--sbp-clay);stroke-width:2;opacity:.45;}
.sbp-dot-current{fill:var(--sbp-clay);}
.sbp-dot-core{fill:var(--sbp-paper);}
.sbp-dot-done{fill:var(--sbp-teal);}
.sbp-dot-tick{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sbp-dot-todo{fill:var(--sbp-card);stroke:var(--sbp-ink);stroke-width:1.6;}
.sbp-node-num{fill:var(--sbp-ink);font-size:12px;font-family:var(--sbp-sans);}
.sbp-node-label{fill:var(--sbp-ink);font-size:15px;font-family:var(--sbp-serif);}
.sbp-node-here{fill:var(--sbp-clay-text);font-size:11px;font-family:var(--sbp-sans);font-weight:600;}
.sbp-compass{opacity:.85;}
.sbp-compass-ring{fill:none;stroke:var(--sbp-ink);stroke-width:1.1;}
.sbp-compass-ring2{fill:none;stroke:var(--sbp-line);stroke-width:1;}
.sbp-compass-n{fill:var(--sbp-clay);}
.sbp-compass-s{fill:var(--sbp-ink);}

.sbp-board-cta{margin-top:10px;}

/* bottom title — sits under the board */
.sbp-footer-title{margin-top:16px;padding-top:12px;border-top:1px solid var(--sbp-line);}

/* animation (only when the visitor hasn't asked for reduced motion) */
@keyframes sbpFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes sbpPop{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:no-preference){
  .sbp-view{animation:sbpFade .35s ease both;}
  .sbp-board-svg .sbp-node{animation:sbpPop .45s both;}
}

/* responsive */
@media (max-width:560px){
  .sbp-root{padding:14px 12px;}
  .sbp-view-title{font-size:22px;}
  .sbp-node-label{font-size:13px;}
  .sbp-guide{padding:13px 13px;}
  .sbp-guide-say{font-size:15px;}
  .sbp-actions .sbp-btn{flex:1 1 auto;}
}
@media (min-width:900px){
  .sbp-root{padding:26px 30px;}
  .sbp-board{margin:14px 0 10px;}
}

/* the gameboard view may use more width than the reading views */
.sbp-view.sbp-overview{max-width:1040px;}

/* ===========================================================================
   Phase 5 — passport & stamps, rewards, interactions, glossary, action plan.
   =========================================================================== */

/* passport strip + full */
.sbp-passport{margin:6px 0 10px;}
.sbp-passport-full{margin:18px 0;}
.sbp-stamps{display:flex;flex-wrap:wrap;gap:8px;}
.sbp-stamp{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:84px;min-height:54px;border-radius:10px;text-align:center;padding:6px 4px;line-height:1.2;}
.sbp-stamp-empty{border:1px dashed var(--sbp-line);color:var(--sbp-muted);background:transparent;}
.sbp-stamp-empty .sbp-stamp-num{font-family:var(--sbp-serif);font-size:16px;opacity:.7;}
.sbp-stamp-done{border:2px solid var(--sbp-teal);color:var(--sbp-teal-text);background:rgba(31,111,107,.06);
  transform:rotate(-3deg);}
.sbp-stamp-done:nth-child(even){transform:rotate(2deg);}
.sbp-stamp-tick{font-size:14px;font-weight:700;}
.sbp-stamp-text{font-family:var(--sbp-sans);font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;}
.sbp-passport-full .sbp-stamp{width:96px;min-height:62px;}

/* stamp reward overlay */
.sbp-reward{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:30;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;}
.sbp-reward-seal{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:128px;height:128px;border-radius:50%;border:4px solid var(--sbp-clay);color:var(--sbp-clay);
  background:var(--sbp-card);box-shadow:0 14px 40px rgba(27,37,48,.28);text-align:center;padding:10px;}
.sbp-reward-seal .sbp-stamp-tick{font-size:34px;}
.sbp-reward-label{color:var(--sbp-clay-text);font-family:var(--sbp-sans);font-size:12px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;margin-top:2px;}
.sbp-reward-cap{font-family:var(--sbp-serif);font-size:15px;color:var(--sbp-ink);
  background:var(--sbp-card);padding:4px 14px;border-radius:20px;box-shadow:0 6px 18px rgba(27,37,48,.18);}
@media (prefers-reduced-motion:no-preference){
  .sbp-reward:not(.sbp-reward-still){animation:sbpRewardOut 1.5s ease forwards;}
  .sbp-reward:not(.sbp-reward-still) .sbp-reward-seal{animation:sbpSeal .5s cubic-bezier(.2,1.3,.4,1) both;}
}
.sbp-reward-still{animation:sbpRewardOut 1.1s ease forwards;}
@keyframes sbpSeal{0%{transform:scale(1.5) rotate(-12deg);opacity:0;}60%{opacity:1;}100%{transform:scale(1) rotate(-4deg);opacity:1;}}
@keyframes sbpRewardOut{0%{opacity:1;}70%{opacity:1;}100%{opacity:0;}}

/* interactions */
.sbp-interaction{background:var(--sbp-card);border:1px solid var(--sbp-line);border-radius:12px;
  padding:14px 16px;margin:18px 0;}
.sbp-interaction .sbp-h3{margin-top:0;}
.sbp-check-list{display:flex;flex-direction:column;gap:8px;}
.sbp-check-item{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;cursor:pointer;}
.sbp-check-box{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--sbp-teal);}
.sbp-check-summary{font-family:var(--sbp-sans);font-size:13px;color:var(--sbp-muted);margin:10px 0 0;font-weight:600;}
.sbp-decision-intro{font-size:14.5px;color:var(--sbp-ink-2);margin:0 0 10px;}
.sbp-decision-q{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0;border-top:1px solid var(--sbp-line);}
.sbp-decision-text{font-size:14.5px;}
.sbp-toggle-group{display:flex;gap:6px;flex:0 0 auto;}
.sbp-toggle{font-family:var(--sbp-sans);font-size:13px;font-weight:600;border:1px solid var(--sbp-line);
  background:var(--sbp-paper);color:var(--sbp-ink);border-radius:8px;padding:7px 14px;cursor:pointer;min-width:48px;}
.sbp-toggle:hover{border-color:var(--sbp-ink-2);}
.sbp-toggle.sbp-on{background:var(--sbp-teal);border-color:var(--sbp-teal);color:#fff;}
.sbp-verdict{font-family:var(--sbp-serif);font-size:15px;line-height:1.5;color:var(--sbp-muted);
  margin:12px 0 0;padding-top:10px;border-top:1px solid var(--sbp-line);}
.sbp-verdict-ready{color:var(--sbp-ink);border-left:3px solid var(--sbp-teal);border-top:0;
  padding:2px 0 2px 13px;}

/* glossary modal */
.sbp-modal-scrim{position:fixed;left:0;top:0;right:0;bottom:0;z-index:60;
  background:rgba(27,37,48,.42);display:flex;align-items:center;justify-content:center;padding:18px;}
.sbp-modal{position:relative;background:var(--sbp-card);color:var(--sbp-ink);border-radius:16px;
  max-width:520px;width:100%;max-height:82vh;overflow-y:auto;padding:24px 26px 28px;
  box-shadow:0 30px 80px rgba(27,37,48,.3);}
.sbp-modal-close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:24px;
  line-height:1;color:var(--sbp-muted);cursor:pointer;width:36px;height:36px;border-radius:50%;}
.sbp-modal-close:hover{background:var(--sbp-paper-2);color:var(--sbp-ink);}
.sbp-modal-title{font-family:var(--sbp-serif);font-size:21px;margin:0 0 12px;outline:none;}
.sbp-glossary{margin:0;}
.sbp-glossary dt{font-family:var(--sbp-sans);font-weight:600;font-size:14.5px;color:var(--sbp-ink);margin-top:14px;}
.sbp-glossary dt:first-child{margin-top:0;}
.sbp-glossary dd{margin:3px 0 0;font-family:var(--sbp-serif);font-size:14.5px;line-height:1.5;color:var(--sbp-ink-2);}

/* action plan */
.sbp-plan-host{margin:6px 0;}
.sbp-plan-meta{font-family:var(--sbp-sans);font-size:13px;color:var(--sbp-muted);margin:0 0 14px;}
.sbp-plan-stage{border-top:1px solid var(--sbp-line);padding:12px 0;}
.sbp-plan-stage-title{font-family:var(--sbp-serif);font-size:17px;margin:0 0 4px;}
.sbp-plan-stamp{color:var(--sbp-muted);font-weight:700;}
.sbp-plan-stage.sbp-is-done .sbp-plan-stamp{color:var(--sbp-green);}
.sbp-plan-sum{color:var(--sbp-ink-2);font-size:14px;margin:0 0 6px;}
.sbp-plan-decision{background:rgba(31,111,107,.08);border-radius:8px;padding:6px 11px;font-size:14px;margin:0 0 8px;}
.sbp-plan-actions{margin:6px 0;padding-left:20px;}
.sbp-plan-actions li{font-size:14px;margin:0 0 3px;}
.sbp-plan-res{margin:6px 0 0;padding-left:20px;font-family:var(--sbp-sans);font-size:13px;}
.sbp-plan-res li{margin:0 0 3px;}
.sbp-plan-link{color:var(--sbp-teal-text);}

/* print: show the plan cleanly, hide interactive chrome */
@media print{
  .sbp-board,.sbp-board-overlay,.sbp-passport,.sbp-capture,.sbp-actions,
  .sbp-meta-actions,.sbp-back,.sbp-link,.sbp-reward,.sbp-modal-scrim{display:none !important;}
  .sbp-root{background:#fff;padding:0;border-radius:0;}
  .sbp-plan-link{color:#1f6f6b;text-decoration:underline;}
  .sbp-plan-stage{break-inside:avoid;}
}