/* =====================================================================
   FAMILY LEARNING MAP theme (relaunch 2026-10). Loads AFTER quiz.css and
   restyles every screen. Brief: design/CREATIVE-BRIEF.md.
   Single deliberate light look (map paper), like a printed field map.
   Palette:  sea ink #0B3C49 · water #2CC1D0 · trail coral #F26B4F ·
             parent royal #1D4ED8 · spark amber #F59E0B · map paper #EEF5F2
   Type:     Bricolage Grotesque (display) · Figtree (body) · Caveat (map notes)
   ===================================================================== */
:root{
  --sea:#0b3c49; --sea-2:#135a6a; --water:#2cc1d0; --water-soft:#d6f1f3;
  --trail:#f26b4f; --trail-soft:#fde3dc; --parent:#1d4ed8; --spark:#f59e0b;
  --paper:#eef5f2; --sheet:#ffffff; --ink:#12303a; --muted:#4f6b73; --hair:rgba(11,60,73,.12);
  --ok:#157a4f; --ok-soft:#dff3e8;
  --f-display:'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --f-body:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-note:'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
}
html,body{background-color:var(--paper);}
body{background-image:var(--topo,none); background-size:var(--topo-size,auto); background-repeat:repeat;}

.fb{
  --teal:var(--water); --royal:var(--parent); --coral:var(--trail); --deep:var(--sea); --amber:var(--spark);
  --g900:var(--ink); --g800:var(--ink); --g700:#27454f; --g600:var(--muted); --g500:#6a848b; --g400:#93a9ae;
  --g300:#c9d9dc; --g200:#dfe9ea; --border:#d8e5e6; --page:#f5faf8;
  font-family:var(--f-body); color:var(--ink); font-size:17px; line-height:1.6;
}
.fb h1,.fb h2,.fb h3,.fb h4{font-family:var(--f-display); letter-spacing:-.01em;}
.fb-section{background:transparent; padding:28px 0 12px;}
.fb-wrap{padding:0 16px;}

/* the map sheet */
.fb-card{
  width:min(900px,100%); border-radius:28px; background:var(--sheet);
  border:1px solid var(--hair); box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 40px 80px -40px rgba(11,60,73,.45);
  padding:clamp(20px,4.5vw,44px);
}

/* ---------- intro ---------- */
.fb-intro{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(18px,4vw,40px); align-items:center;}
.fb-intro__copy{min-width:0;}
.fb-eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-note); font-size:1.45rem; color:var(--trail); line-height:1; margin-bottom:10px; transform:rotate(-2deg);}
.fb-eyebrow svg{width:26px; height:26px;}
.fb-title{
  font-family:var(--f-display); font-weight:800; color:var(--sea); background:none; -webkit-background-clip:initial; background-clip:initial;
  font-size:clamp(2.3rem,5vw,3.35rem); line-height:1; letter-spacing:-.035em; margin:0 0 14px; text-wrap:balance; text-align:left;
}
.fb-title em{font-style:normal; color:var(--trail); position:relative; white-space:nowrap;}
.fb-title em::after{content:""; position:absolute; left:2%; right:2%; bottom:-.06em; height:.14em; border-radius:99px;
  background:repeating-linear-gradient(90deg,var(--trail) 0 .5em, transparent .5em .75em); opacity:.55;}
.fb-sub{text-align:left; margin:0 0 6px; max-width:34ch; color:var(--muted); font-size:clamp(1.02rem,2.2vw,1.18rem);}
.fb-hero{padding:6px 0 0; text-align:left;}
.fb-badge{display:none;}

/* living mini-map */
.fb-minimap{position:relative; width:100%; max-width:430px; justify-self:center; aspect-ratio:1/1;}
.fb-minimap svg{width:100%; height:100%; display:block; overflow:visible;}
.fb-mm-trail{fill:none; stroke:var(--trail); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:1 9;}
.fb-mm-road{fill:none; stroke:var(--sea); stroke-width:5; stroke-linecap:round; opacity:.9;}
.fb-mm-draw{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:fbDraw 1.6s cubic-bezier(.5,0,.2,1) forwards;}
@keyframes fbDraw{to{stroke-dashoffset:0;}}
.fb-mm-note{font-family:var(--f-note); font-size:21px; fill:var(--sea); opacity:0; animation:fbFadeIn .6s ease forwards;}
.fb-mm-pin{opacity:0; transform-box:fill-box; transform-origin:50% 100%; animation:fbPin .7s cubic-bezier(.3,1.6,.5,1) forwards;}
@keyframes fbPin{0%{opacity:0; transform:translateY(-26px) scale(.7);} 100%{opacity:1; transform:none;}}
@keyframes fbFadeIn{to{opacity:1;}}

/* the two doors */
.fb-doors{grid-template-columns:1fr 1fr; max-width:none; margin:22px 0 6px; gap:14px;}
.fb-door{border-radius:22px; border:2px solid var(--hair); background:var(--sheet); padding:20px 18px 16px; box-shadow:none;}
.fb-door:hover,.fb-door:focus-visible{border-color:var(--sea); transform:translateY(-3px); box-shadow:0 18px 30px -22px rgba(11,60,73,.6);}
.fb-door--map{background:var(--sea); border-color:var(--sea); color:#fff;}
.fb-door--map:hover,.fb-door--map:focus-visible{border-color:var(--sea); background:#0d4756;}
.fb-door__ico{border-radius:50%; width:46px; height:46px; background:var(--water-soft); color:var(--sea);}
.fb-door--map .fb-door__ico{background:var(--trail); color:#fff;}
.fb-door__t{font-family:var(--f-display); font-size:1.28rem; font-weight:800; letter-spacing:-.01em;}
.fb-door__s{color:var(--muted); font-size:.95rem;}
.fb-door--map .fb-door__s{color:#cfe6ea;}
.fb-door__go{color:var(--sea); font-weight:800;}
.fb-door--map .fb-door__go{color:#fff;}
.fb-door__tag{background:var(--spark); color:#3b2600; font-family:var(--f-note); font-size:1.15rem; font-weight:700; text-transform:none; letter-spacing:0; padding:0 10px; transform:rotate(4deg);}
.fb-linkbtn{color:var(--sea); font-weight:700; text-decoration-thickness:1px; text-underline-offset:3px;}
.fb-intro .fb-linkbtn{margin-top:4px;}
.fb-note{background:var(--paper); border:0; border-left:0; border-radius:18px; color:var(--g700); max-width:none; position:relative; padding:16px 18px 16px 52px;}
.fb-note::before{content:""; position:absolute; left:18px; top:18px; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--trail) 0 3px, transparent 4px), conic-gradient(var(--sea) 0 25%, transparent 0 50%, var(--sea) 0 75%, transparent 0); opacity:.9;}
.fb-note strong{color:var(--sea);}
.fb-proof{color:var(--muted);}
.fb-proof i{color:var(--trail);}

/* ---------- progress = a trail with waypoints ---------- */
#fbProgWrap{margin-bottom:6px;}
.fb-prog{height:22px; background:none; overflow:visible; position:relative; margin:0 6px 4px;}
.fb-prog::before{content:""; position:absolute; left:0; right:0; top:50%; height:3px; transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,var(--g300) 0 6px, transparent 6px 12px);}
.fb-prog__bar{position:absolute; left:0; top:50%; height:4px; transform:translateY(-50%); border-radius:99px; background:var(--trail); transition:width .45s cubic-bezier(.5,0,.2,1);}
.fb-prog__bar::after{content:""; position:absolute; right:-9px; top:50%; width:18px; height:18px; transform:translateY(-50%);
  border-radius:50% 50% 50% 0; rotate:-45deg; background:var(--trail); box-shadow:0 0 0 4px #fff, 0 3px 8px rgba(11,60,73,.35);}
.fb-counter{font-family:var(--f-note); font-size:1.3rem; color:var(--sea); font-weight:600; margin-bottom:18px;}

/* ---------- questions ---------- */
.fb-q{font-family:var(--f-display); font-weight:800; color:var(--sea); font-size:clamp(1.45rem,3.6vw,2rem); line-height:1.15; letter-spacing:-.02em; max-width:640px; text-wrap:balance;}
.fb-q .kicker{font-family:var(--f-note); font-size:1.35rem; font-weight:600; text-transform:none; letter-spacing:0; color:var(--trail); margin-bottom:6px;}

/* Likert = five stepping stones, growing */
.fb-scale{gap:clamp(8px,2.2vw,18px); align-items:center; position:relative; max-width:520px;}
.fb-scale::before{content:""; position:absolute; left:8%; right:8%; top:50%; height:2px; background:repeating-linear-gradient(90deg,var(--g300) 0 5px,transparent 5px 10px); z-index:0;}
.fb-scale-opt{z-index:1;}
.fb-scale-btn{min-width:0; border-radius:50%; padding:0; border:2px solid var(--g300); background:#fff; color:var(--muted); font-family:var(--f-display); font-weight:800;}
.fb-scale-opt:nth-child(1) .fb-scale-btn{width:42px; height:42px;}
.fb-scale-opt:nth-child(2) .fb-scale-btn{width:50px; height:50px;}
.fb-scale-opt:nth-child(3) .fb-scale-btn{width:58px; height:58px;}
.fb-scale-opt:nth-child(4) .fb-scale-btn{width:66px; height:66px;}
.fb-scale-opt:nth-child(5) .fb-scale-btn{width:74px; height:74px;}
.fb-scale-btn:hover{border-color:var(--sea); background:var(--water-soft);}
.fb-scale-opt input:checked + .fb-scale-btn{background:var(--sea); border-color:var(--sea); color:#fff; box-shadow:0 10px 20px -8px rgba(11,60,73,.6); transform:translateY(-2px);}
.fb-scale-opt input:focus-visible + .fb-scale-btn{outline:3px solid var(--water); outline-offset:3px;}
.fb-scale-labels{max-width:520px; font-family:var(--f-note); font-size:1.2rem; color:var(--sea); font-weight:600;}

/* choices */
.fb-choice{border-radius:18px; border:2px solid var(--g200); background:#fff; color:var(--ink); font-weight:600; padding:16px;}
.fb .fb-choice, .fb .fb-choice span, .fb .fb-tt{color:var(--ink);}
.fb-choice .ico{border-radius:50%; background:var(--water-soft); color:var(--sea);}
.fb-choice:hover{border-color:var(--sea); background:#f6fbfa;}
.fb-choice.is-sel{border-color:var(--sea); background:#e7f5f3; box-shadow:0 12px 22px -16px rgba(11,60,73,.7);}
.fb-choice.is-sel .ico{background:var(--sea); color:#fff;}

/* this-or-that: two cards with an "or" stone between */
.fb-thisthat{position:relative; gap:18px;}
.fb-thisthat::after{content:"or"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:var(--paper); color:var(--sea); font-family:var(--f-note); font-size:1.35rem; font-weight:700; border:2px solid #fff; pointer-events:none;}
.fb-tt{border-radius:22px; border:2px solid var(--g200); background:#fff; padding:26px 20px; font-weight:700; font-size:1.06rem; line-height:1.35;}
.fb-tt:hover{border-color:var(--trail); background:#fff8f6;}
.fb-tt.is-sel{border-color:var(--trail); background:var(--trail-soft); box-shadow:0 14px 24px -18px rgba(242,107,79,.9);}

/* buttons */
.fb-btn{font-family:var(--f-body); font-weight:800; letter-spacing:.005em;}
.fb-btn--primary{background:var(--trail); box-shadow:0 12px 24px -12px rgba(242,107,79,.9); color:#fff;}
.fb-btn--primary:hover:not([disabled]){background:#e85c40; box-shadow:0 16px 28px -12px rgba(242,107,79,.9);}
.fb-btn--secondary{background:var(--sea); box-shadow:0 12px 24px -14px rgba(11,60,73,.9); color:#fff;}
.fb-btn--secondary:hover:not([disabled]){background:#0d4756; box-shadow:0 16px 28px -14px rgba(11,60,73,.9);}
.fb-btn--ghost{background:transparent; border:2px solid var(--hair); color:var(--sea);}
.fb-btn:focus-visible{outline:3px solid var(--water); outline-offset:3px;}

/* setup + gate */
.fb-toggle .fb-tt{padding:18px 14px;}
.fb-input,.fb-select{border-radius:14px; border-color:var(--g200); font-family:var(--f-body);}
.fb-input:focus,.fb-select:focus{border-color:var(--sea); box-shadow:0 0 0 4px rgba(44,193,208,.18);}
.fb-benefits{background:var(--paper); border-radius:20px;}
.fb-benefits h4{font-family:var(--f-note); font-size:1.3rem; text-transform:none; letter-spacing:0; color:var(--sea);}
.fb-benefits i{color:var(--trail);}
.fb-privacy{color:var(--muted);}

/* ---------- results ---------- */
.fb-rhero .spark{color:var(--trail);}
.fb-rname--grad{background:none; color:var(--sea); -webkit-background-clip:initial; background-clip:initial;}
.fb-rname{font-family:var(--f-display); letter-spacing:-.02em;}
.fb-bar__track{height:10px; background:var(--g200);}
.fb-bar__fill{background:var(--sea);}
.fb-bar--coral .fb-bar__fill{background:var(--trail);}
.fb-dial__track{background:repeating-linear-gradient(90deg,var(--g300) 0 6px, transparent 6px 11px); height:4px;}
.fb-dial__dot{border-color:var(--trail); width:24px; height:24px;}
.fb-dial__ends{font-family:var(--f-note); font-size:1.15rem; color:var(--muted);}
.fb-dial__ends .on{color:var(--sea);}
.fb-chip{background:#fff4dc; color:#6b4400;}

/* persona card lands like a pin */
.fb-pcard{animation:fbLand .8s cubic-bezier(.3,1.5,.5,1) both;}
@keyframes fbLand{0%{opacity:0; transform:translateY(-40px) scale(.92) rotate(-2deg);} 100%{opacity:1; transform:none;}}
.fb-pbanner text{font-family:var(--f-display); font-weight:800;}

/* report */
.fb-report .fb-q{margin-top:6px;}
.fb-fit{background:var(--sea) !important; border-radius:24px; text-align:left; padding:24px 26px; position:relative; overflow:hidden;}
.fb-fit::after{content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%;
  border:2px dashed rgba(255,255,255,.22); box-shadow:0 0 0 22px rgba(255,255,255,.04), 0 0 0 46px rgba(255,255,255,.03);}
.fb-fit .lbl{font-family:var(--f-note); font-size:1.35rem; letter-spacing:0; text-transform:none; color:#ffd2c7; opacity:1;}
.fb-fit h3{font-family:var(--f-display); letter-spacing:-.02em;}
.fb-fit p{margin:0; max-width:60ch;}
.fb-mini{background:var(--paper); border:0; border-radius:20px;}
.fb-mini .tag{font-family:var(--f-note); font-size:1.2rem; letter-spacing:0; text-transform:none; color:var(--trail);}
.fb-block > h3{font-family:var(--f-display); font-size:1.35rem; color:var(--sea); letter-spacing:-.015em;}
.fb-block > h3 i{color:var(--trail);}
.fb-tip{border-radius:18px; border:1px solid var(--hair); box-shadow:none;}
.fb-tip--win .ic{background:var(--ok-soft); color:var(--ok);}
.fb-tip--watch .ic{background:var(--trail-soft); color:#b2412a;}
.fb-tip--do .ic{background:var(--water-soft); color:var(--sea);}
.fb-tip--next .ic{background:#e2e9fd; color:var(--parent);}
.fb-tip .fix b{color:var(--trail);}
.fb-verse{font-family:var(--f-note); font-style:normal; font-size:1.45rem; line-height:1.3; color:var(--sea); border-top:2px dashed var(--g200);}
.fb-verse cite{font-family:var(--f-body); font-size:.85rem; color:var(--muted);}

/* ---------- the Family Learning Map ---------- */
.fb-famap{margin:0 0 26px; border-radius:26px; background:var(--paper); background-image:var(--topo,none); background-size:var(--topo-size,auto); position:relative; overflow:hidden; border:1px solid var(--hair);}
.fb-famap__head{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; justify-content:space-between; padding:18px 20px 0;}
.fb-famap__title{font-family:var(--f-display); font-weight:800; color:var(--sea); font-size:clamp(1.3rem,3.4vw,1.75rem); letter-spacing:-.02em; margin:0;}
.fb-famap__hint{font-family:var(--f-note); color:var(--trail); font-size:1.25rem;}
.fb-famap svg{display:block; width:100%; height:auto;}
.fb-famap .road{fill:none; stroke:var(--sea); stroke-width:6; stroke-linecap:round;}
.fb-famap .road-edge{fill:none; stroke:#fff; stroke-width:12; stroke-linecap:round; opacity:.9;}
.fb-famap .trail{fill:none; stroke:var(--trail); stroke-width:4; stroke-linecap:round; stroke-dasharray:1 10;}
.fb-famap .sib{fill:none; stroke:var(--spark); stroke-width:3; stroke-linecap:round; stroke-dasharray:1 8; opacity:.9;}
.fb-famap .label{font-family:var(--f-note); font-size:22px; fill:var(--sea); paint-order:stroke; stroke:#eef5f2; stroke-width:6px; stroke-linejoin:round;}
.fb-famap .label--trail{fill:#b2412a;}
.fb-famap .label--sib{fill:#8a5a00;}
.fb-famap .kid-name{font-family:var(--f-display); font-weight:800; font-size:24px; fill:var(--sea);}
.fb-famap .kid-type{font-family:var(--f-body); font-weight:700; font-size:16px;}
.fb-famap .home-name{font-family:var(--f-display); font-weight:800; font-size:22px; fill:#fff;}
.fb-famap .home-style{font-family:var(--f-body); font-weight:700; font-size:15px; fill:#cfe6ea;}
.fb-famap .kid-node{cursor:pointer;}
.fb-famap .kid-node:focus-visible circle.ring{stroke:var(--water); stroke-width:8;}
.fb-famap .legend{display:flex; flex-wrap:wrap; gap:8px 18px; padding:0 20px 16px; font-size:.9rem; color:var(--muted);}
.fb-famap .legend span{display:inline-flex; align-items:center; gap:8px;}
.fb-famap .legend i{display:inline-block; width:34px; height:0; border-top:5px solid var(--sea); border-radius:9px;}
.fb-famap .legend i.t{border-top:4px dotted var(--trail);}
.fb-famap .legend i.s{border-top:3px dotted var(--spark);}

/* ---------- layout ---------- */
@media (max-width:760px){
  .fb-intro{grid-template-columns:1fr;}
  .fb-minimap{max-width:320px; order:-1; margin-top:-8px;}
  .fb-doors{grid-template-columns:1fr;}
  .fb-title,.fb-sub,.fb-hero{text-align:left;}
}
@media (max-width:640px){
  .fb{font-size:16px;}
  .fb-card{padding:20px 16px; border-radius:22px;}
  .fb-thisthat::after{top:50%;}
  .fb-scale-opt:nth-child(1) .fb-scale-btn{width:38px; height:38px;}
  .fb-scale-opt:nth-child(2) .fb-scale-btn{width:44px; height:44px;}
  .fb-scale-opt:nth-child(3) .fb-scale-btn{width:50px; height:50px;}
  .fb-scale-opt:nth-child(4) .fb-scale-btn{width:56px; height:56px;}
  .fb-scale-opt:nth-child(5) .fb-scale-btn{width:62px; height:62px;}
}
@media (prefers-reduced-motion:reduce){
  .fb-mm-draw,.fb-mm-pin,.fb-mm-note,.fb-pcard{animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important;}
}

/* fixes after first screenshots (2026-09-28) */
.fb button,.fb input,.fb select,.fb textarea{font-family:inherit;}
.fb-linkbtn{font-family:var(--f-body);}
.fb-minimap .home-name{font-family:var(--f-display); font-weight:800; font-size:17px; fill:#fff;}
.fb-scr-h{font-family:var(--f-note); font-size:1.4rem; font-weight:600; color:var(--sea); text-transform:none; letter-spacing:0;}
.fb-famap .label{font-size:30px;}
.fb-famap .kid-name{font-size:34px;}
.fb-famap .kid-type{font-size:23px;}
.fb-famap .home-name{font-size:28px;}
.fb-famap .home-style{font-size:19px;}
.fb-famap .legend{font-size:.88rem;}

/* art kit placements (art.js) */
.fb-emblem-hero{display:inline-block; animation:fbLand .8s cubic-bezier(.3,1.5,.5,1) both; filter:drop-shadow(0 14px 18px rgba(11,60,73,.22));}
.fb-choice--emblem .ico{width:48px; height:48px; background:none !important; padding:0;}
.fb-choice--emblem .ico svg{display:block;}
.fb-famlabel{display:inline-flex; align-items:center; gap:8px; margin:6px 0 4px; font-family:var(--f-note); font-size:1.45rem; font-weight:700; color:var(--fam,var(--sea));}
.fb-famlabel svg{flex:0 0 auto;}
.fb-mini__emblem{float:right; margin:-4px -4px 6px 10px;}
#scrParentResult .fb-q{font-size:clamp(1.05rem,2.6vw,1.25rem); font-family:var(--f-note); font-weight:700; color:var(--trail); letter-spacing:0; margin-bottom:0;}
#scrParentResult .fb-rname{font-size:clamp(2.3rem,7vw,3.2rem); line-height:1.05; margin-top:2px;}

.fb-share{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:0 20px 20px;}
.fb-share__note{font-size:.88rem; color:var(--muted); flex:1 1 220px;}

/* brand mark above the card (2026-09-29) */
.fb-brand{display:flex;justify-content:center;margin:0 0 14px;}
.fb-brand a{display:inline-block;border-radius:12px;line-height:0;}
.fb-brand a:focus-visible{outline:3px solid var(--water,#2cc1d0);outline-offset:4px;}
.fb-brand img{height:52px;width:auto;}
@media (max-width:560px){.fb-brand{margin-bottom:10px;}.fb-brand img{height:42px;}}
@media print{.fb-brand img{height:40px;}}

/* 2026-10-19: sign-up waiting state (was a red .fb-hint line that read as an error; Ashlynn's report) */
.fb-wait{text-align:center; padding:28px 16px 20px; color:var(--ink);}
.fb-wait-spin{display:inline-block; width:34px; height:34px; border-radius:50%; border:4px solid var(--hair); border-top-color:var(--teal); animation:fbspin .9s linear infinite;}
.fb-wait-h{margin:14px 0 4px; font-weight:700; font-size:1.12rem;}
.fb-wait-s{margin:0 auto; max-width:34ch; color:var(--muted); font-size:.98rem;}
@media (prefers-reduced-motion: reduce){ .fb-wait-spin{animation-duration:2.4s;} }