/* ---- tokens lifted from yns-brand.css (live) ---------------------- */
:root{
  --yns-blue:#0057E1; --yns-blue-deep:#2859B6; --yns-blue-press:#0046B8;
  --yns-gold:#E1CC00; --yns-gold-deep:#6B5F00;
  --yns-warm:#E8E6E6; --yns-paper:#FFFFFF; --yns-tint:#EEF2FB; --yns-tint-2:#DCE5F7;
  --yns-gold-tint:#FBF4C4; --yns-sunk:#F4F6FA;
  --yns-ink:#14203A; --yns-muted:#5B6478; --yns-line:#D5DAE3; --yns-line-soft:#E6EAF1;
  --yns-ok:#1F7A4D; --yns-ok-tint:#E7F5EE;
  --yns-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --yns-body:'Questrial','Segoe UI',system-ui,sans-serif;
  --yns-heading:#000; --yns-heading-section:#2859B6;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --r-sm:8px;--r:12px;--r-lg:18px;
  --shadow:0 2px 10px rgba(20,32,58,.06); --shadow-lg:0 10px 34px rgba(20,32,58,.13);
  --focus:0 0 0 3px rgba(0,87,225,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--yns-warm);color:var(--yns-ink);font-family:var(--yns-body);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--yns-display);font-weight:400;margin:0}
h1{font-size:2.25rem;line-height:1.2;color:var(--yns-heading)}
h2{font-size:1.4rem;line-height:1.4;color:var(--yns-heading-section)}
h3{font-size:1.15rem;line-height:1.35;color:var(--yns-heading)}
p{margin:0}
a{color:var(--yns-blue-deep)}
button{font:inherit}
:focus-visible{outline:3px solid var(--yns-blue);outline-offset:2px}
/* Headings take focus only so a screen reader starts reading there. */
[tabindex="-1"]:focus:not(:focus-visible){outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:1240px;margin:0 auto;padding:var(--s4) var(--s4) var(--s8)}
.muted{color:var(--yns-muted)}
.small{font-size:.88rem}

/* ---- top bar ------------------------------------------------------ */
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--yns-blue-deep)}
/* The real brand lockup. It is currentColor, so the link colour above
   drives it; never re-tint it in another blue. */
.brand-lockup{width:104px;height:auto;display:block}
.foot-mark{width:26px;height:26px;display:block;border-radius:6px}
.bar .acct{display:flex;gap:var(--s2);align-items:center;font-size:.88rem;color:var(--yns-muted);flex-wrap:wrap;justify-content:flex-end}
.chip{display:inline-flex;max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--yns-paper);border:1px solid var(--yns-line);font-size:.8rem;color:var(--yns-muted)}


/* ---- buttons ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;font-family:var(--yns-display);font-weight:500;font-size:1rem;line-height:1.2;transition:background .15s,transform .15s}
.btn-primary{background:var(--yns-blue);color:#fff}
.btn-primary:hover{background:var(--yns-blue-press)}
.btn-ghost{background:var(--yns-paper);color:var(--yns-blue-deep);border-color:var(--yns-line)}
.btn-ghost:hover{background:var(--yns-tint)}
.btn-quiet{background:none;border:0;color:var(--yns-muted);text-decoration:underline;cursor:pointer;padding:8px 0;font-size:.9rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---- screens ------------------------------------------------------ */
.screen{display:none}
.screen.is-on{display:block}

/* ---- intake ------------------------------------------------------- */
.intake{max-width:720px;margin:var(--s6) auto 0}
.intake h1{max-width:20ch;margin-bottom:var(--s3)}
.intake .lead{font-size:1.15rem;color:var(--yns-muted);max-width:52ch;margin-bottom:var(--s6)}
.steps{display:flex;gap:6px;margin-bottom:var(--s5)}
.steps i{height:6px;flex:1;border-radius:3px;background:var(--yns-line);transition:background .25s}
.steps i.done{background:var(--yns-blue)}
.steps i.now{background:var(--yns-gold)}
.q{display:none}
.q.is-on{display:block}
.q h2{color:var(--yns-heading);font-size:1.6rem;margin-bottom:var(--s2)}
.q .hint{color:var(--yns-muted);margin-bottom:var(--s4)}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;padding:16px 18px;border-radius:var(--r);background:var(--yns-paper);border:1.5px solid var(--yns-line);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.opt:hover{border-color:var(--yns-blue-deep);background:var(--yns-tint)}
.opt[aria-checked="true"]{border-color:var(--yns-blue);background:var(--yns-tint);box-shadow:inset 0 0 0 1px var(--yns-blue)}
.opt .dot{flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;border:2px solid var(--yns-line)}
.opt[aria-checked="true"] .dot{border-color:var(--yns-blue);background:var(--yns-blue);box-shadow:inset 0 0 0 3px #fff}
.opt strong{display:block;font-family:var(--yns-display);font-weight:500;font-size:1.02rem}
.opt span{display:block;font-size:.9rem;color:var(--yns-muted);margin-top:2px}
.intake-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s5)}
.intake-nav .skip{color:var(--yns-muted);font-size:.88rem;text-decoration:underline;background:none;border:0;cursor:pointer;padding:6px 0}

/* ---- hub layout (same shell as live) ------------------------------ */
.hub{display:block}
.hub__rail{margin-bottom:var(--s4)}
@media (min-width:1080px){
  .hub{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s6);align-items:start}
  .hub__main{min-width:0}
  .hub__rail{position:sticky;top:var(--s4);margin-bottom:0;max-height:calc(100vh - var(--s6));overflow-y:auto}
}

/* ---- hero + avatar ------------------------------------------------ */
.hero{display:grid;grid-template-columns:180px 1fr;gap:var(--s5);align-items:start;margin:var(--s4) 0 var(--s6)}
@media (max-width:560px){.hero{grid-template-columns:1fr;text-align:center;justify-items:center}}
.hero h1{max-width:18ch;margin-bottom:var(--s2)}
.hero .lead{color:var(--yns-muted);font-size:1.1rem;max-width:52ch}
.avatar{position:relative;width:180px;height:180px}
.avatar svg{width:100%;height:100%;display:block;border-radius:50%;background:var(--yns-paper);box-shadow:var(--shadow)}
.avatar .pct{position:absolute;right:-6px;bottom:2px;background:var(--yns-ink);color:#fff;font-family:var(--yns-display);font-size:.78rem;padding:4px 9px;border-radius:999px}
.avatar-caption{font-size:.85rem;color:var(--yns-muted);margin-top:6px;text-align:center;max-width:180px}

/* ---- door panel --------------------------------------------------- */
.door{background:var(--yns-paper);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:0 var(--s5) var(--s5);margin-bottom:var(--s6);border-top:6px solid var(--yns-blue);overflow:hidden}
.door-banner{display:block;width:calc(100% + var(--s5)*2);margin:0 calc(var(--s5)*-1) var(--s4);height:auto;background:var(--yns-warm)}  /* 1400x323 art, shown whole so nobody gets cropped out of it */
.door .eyebrow{font-size:.88rem;color:var(--yns-blue-deep);margin-bottom:6px}
.door h2{color:var(--yns-heading);font-size:1.75rem;margin-bottom:var(--s2)}
.door .why{color:var(--yns-muted);max-width:60ch;margin-bottom:var(--s4)}
.door .because{display:flex;gap:10px;align-items:flex-start;background:var(--yns-tint);border-radius:var(--r-sm);padding:12px 14px;font-size:.92rem;margin-bottom:var(--s5)}
.door .because svg{flex:none;width:18px;height:18px;margin-top:2px}
.acts{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.act{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--r);background:var(--yns-sunk);border:1px solid var(--yns-line-soft);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.act:hover{border-color:var(--yns-blue-deep);background:var(--yns-paper)}
.act h3{font-size:1.05rem;padding-right:28px}
.act p{font-size:.9rem;color:var(--yns-muted)}
.act .meta{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--yns-muted);margin-top:auto;padding-top:6px}
.act .mark{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--yns-line);background:#fff;display:grid;place-items:center}
.act.done{background:var(--yns-ok-tint);border-color:#bfe3cf}
.act.done .mark{background:var(--yns-ok);border-color:var(--yns-ok)}
.act.done .mark::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.act.soon{opacity:.62;cursor:default}
.act.soon:hover{border-color:var(--yns-line-soft);background:var(--yns-sunk)}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.75rem;background:var(--yns-tint-2);color:var(--yns-blue-deep)}
.tag.gold{background:var(--yns-gold-tint);color:var(--yns-gold-deep)}
.tag.tag-ai{background:transparent;border:1px solid var(--yns-blue);color:var(--yns-blue-deep);white-space:nowrap}
.act .meta{flex-wrap:wrap}
.act .meta>span:first-child{white-space:nowrap}
.door-foot{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s5)}

/* ---- other doors -------------------------------------------------- */
.doors h2{margin-bottom:var(--s2)}
.doors .lead{color:var(--yns-muted);margin-bottom:var(--s4);max-width:60ch}
.door-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.dcard{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:var(--r);background:var(--yns-paper);border:1px solid var(--yns-line);box-shadow:var(--shadow);text-align:left;cursor:pointer;transition:border-color .15s,transform .15s}
.dcard:hover{border-color:var(--yns-blue-deep)}
.dcard .num{font-family:var(--yns-display);font-size:.8rem;color:var(--yns-blue-deep)}
.dcard h3{font-size:1.05rem}
.dcard p{font-size:.88rem;color:var(--yns-muted)}
.dcard .prog{height:5px;border-radius:3px;background:var(--yns-line-soft);overflow:hidden;margin-top:auto}
.dcard .prog i{display:block;height:100%;background:var(--yns-blue);width:0;transition:width .4s}
.dcard.full .prog i{background:var(--yns-gold)}
.dcard.current{border-color:var(--yns-blue);box-shadow:inset 0 0 0 1px var(--yns-blue)}

/* ---- rail --------------------------------------------------------- */
.rail-card{background:var(--yns-paper);border-radius:var(--r);box-shadow:var(--shadow);padding:var(--s4);margin-bottom:var(--s3)}
.rail-card h3{font-size:1rem;color:var(--yns-heading-section);margin-bottom:var(--s2)}
.you{display:grid;gap:8px;font-size:.9rem}
.you div{display:flex;justify-content:space-between;gap:10px}
.you span:last-child{color:var(--yns-ink);text-align:right}
.you span:first-child{color:var(--yns-muted)}
.stair{display:flex;align-items:flex-end;gap:3px;height:56px;margin:var(--s2) 0}
.stair i{flex:1;border-radius:2px;background:var(--yns-line);transition:background .4s}
.stair i.on{background:var(--yns-blue)}
.stair i.gold{background:var(--yns-gold)}
.rail-card ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:.88rem}
.rail-card li{display:flex;gap:8px;align-items:center;color:var(--yns-muted)}
.rail-card li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--yns-line)}
.rail-card li.on{color:var(--yns-ink)}
.rail-card li.on::before{background:var(--yns-blue)}
.next{display:flex;gap:10px;align-items:center;padding:12px;border-radius:var(--r-sm);background:var(--yns-tint)}
.next b{font-family:var(--yns-display);font-weight:500;display:block;font-size:.95rem}
.next span{font-size:.82rem;color:var(--yns-muted)}

/* ---- footer ------------------------------------------------------- */
.foot{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--yns-line);color:var(--yns-muted);font-size:.88rem;display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}

/* ---- avatar picker ---------------------------------------------- */
.pick{display:grid;gap:var(--s4)}
.pick-row{display:flex;gap:10px;flex-wrap:wrap}
.pbody{display:flex;align-items:center;justify-content:center;padding:10px;border-radius:var(--r);background:var(--yns-paper);border:1.5px solid var(--yns-line);cursor:pointer}
.pbody svg,.pbody img{width:72px;height:72px;border-radius:50%;display:block}
.pbody span{font-family:var(--yns-display);font-size:.9rem}
.pbody[aria-checked="true"],.ptone[aria-checked="true"]{border-color:var(--yns-blue);box-shadow:inset 0 0 0 1px var(--yns-blue);background:var(--yns-tint)}
.ptone{width:44px;height:44px;border-radius:50%;border:3px solid var(--yns-paper);box-shadow:0 0 0 1.5px var(--yns-line);cursor:pointer;padding:0}
.ptone[aria-checked="true"]{box-shadow:0 0 0 2.5px var(--yns-blue)}
.pick .label{font-size:.9rem;color:var(--yns-muted);margin-bottom:6px}
.preview{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;padding:var(--s4);background:var(--yns-paper);border-radius:var(--r);border:1px solid var(--yns-line)}
.preview>div:first-child{flex:1;min-width:200px}
.preview-minis{display:flex;gap:var(--s4)}
.mini{margin:0;text-align:center}
.mini-card{position:relative;width:96px;height:96px;border-radius:var(--r);background:var(--yns-warm);box-shadow:inset 0 0 0 1px var(--yns-line-soft);overflow:hidden}
.mini-card svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mini-art{position:absolute;left:50%;top:50%;width:44%;height:44%;transform:translate(-50%,-50%);border-radius:50%;background:var(--yns-paper);box-shadow:0 0 0 2px var(--yns-paper);overflow:hidden}
.mini-art img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.mini figcaption{font-size:.75rem;color:var(--yns-muted);margin-top:6px}

/* ---- avatar stages: one image, filters do the "coming into focus" --- */
.avatar .art{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--yns-paper);box-shadow:var(--shadow)}
.avatar .art img,.avatar .art svg{width:100%;height:100%;display:block;object-fit:cover;transition:filter .8s,opacity .8s}
.avatar .art>div{width:100%;height:100%}
/* ---- speech bubble --------------------------------------------- */
.bubble{position:relative;margin-top:14px;background:var(--yns-paper);border:1px solid var(--yns-line);border-radius:var(--r);padding:12px 14px;font-size:.92rem;max-width:420px;box-shadow:var(--shadow);min-height:64px}
.bubble::before{content:"";position:absolute;top:-8px;left:28px;width:14px;height:14px;background:var(--yns-paper);border-left:1px solid var(--yns-line);border-top:1px solid var(--yns-line);transform:rotate(45deg)}
@media (min-width:561px){.bubble{margin-top:0}.bubble::before{top:24px;left:-8px;transform:rotate(-45deg)}}
.bubble .lead-in{color:var(--yns-muted);font-size:.8rem;display:block;margin-bottom:2px}
.bubble .say{display:block;transition:opacity .35s}
.bubble .say.fade{opacity:0}
.bubble .dots{display:flex;gap:4px;margin-top:8px}
.bubble .dots i{width:6px;height:6px;border-radius:50%;background:var(--yns-line)}
.bubble .dots i.on{background:var(--yns-blue)}

.hero-text{display:grid;gap:var(--s3)}
/* ---- activity modal ---------------------------------------------- */
body.modal-open{overflow:hidden}
#actModal{display:none;position:fixed;inset:0;z-index:60;background:rgba(20,32,58,.55);overflow-y:auto;padding:24px 12px}
.am-card{position:relative;max-width:640px;margin:0 auto;background:var(--yns-paper);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-lg)}
.am-top{display:flex;align-items:center;gap:12px;margin-bottom:var(--s3)}
.am-eyebrow{font-size:.85rem;color:var(--yns-blue-deep)}
.am-dots{display:flex;gap:4px;flex:1}
.am-dots i{width:14px;height:4px;border-radius:2px;background:var(--yns-line)}
.am-dots i.done{background:var(--yns-blue)} .am-dots i.now{background:var(--yns-gold)}
.am-x{margin-left:auto;background:none;border:0;font-size:1.5rem;line-height:1;color:var(--yns-muted);cursor:pointer;padding:4px}
.am-card h2{color:var(--yns-heading);font-size:1.5rem;margin-bottom:var(--s3)}
.am-scene{color:var(--yns-muted);margin-bottom:10px;max-width:60ch}
.am-lead{font-size:1.1rem;margin-bottom:var(--s3)}
.am-prompt{font-family:var(--yns-display);margin:var(--s3) 0 8px}
.am-prov{font-size:.85rem;background:var(--yns-tint);padding:8px 12px;border-radius:var(--r-sm);margin-bottom:var(--s3)}
.am-note{font-size:.85rem;color:var(--yns-muted);margin-top:8px}
.am-points{margin:0 0 var(--s3);padding-left:18px;display:grid;gap:6px}
.am-ex{background:var(--yns-sunk);border-radius:var(--r);padding:12px 14px;margin:var(--s3) 0}
.am-ex-l{font-size:.8rem;color:var(--yns-muted);margin-bottom:6px}
.am-ex-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.am-ex-n{font-size:.82rem;color:var(--yns-muted);margin-top:6px}
.am-opts{display:grid;gap:8px}
#actModal textarea{width:100%;font:inherit;padding:12px;border-radius:var(--r-sm);border:1.5px solid var(--yns-line);resize:vertical;line-height:1.5}
#actModal textarea:focus{border-color:var(--yns-blue)}
#actModal textarea:focus-visible{outline:3px solid var(--yns-blue);outline-offset:2px}
.am-examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.am-examples>span{font-size:.8rem;color:var(--yns-muted);width:100%}
.am-chip,.am-tag{font:inherit;font-size:.82rem;padding:6px 10px;border-radius:999px;border:1px solid var(--yns-line);background:var(--yns-sunk);cursor:pointer;text-align:left}
.am-chip:hover,.am-tag:hover{border-color:var(--yns-blue-deep)}
.am-tags{display:flex;flex-wrap:wrap;gap:6px}
.am-tag.on{background:var(--yns-blue);color:#fff;border-color:var(--yns-blue)}
.am-total{display:flex;align-items:baseline;gap:10px;margin:var(--s3) 0}
.am-total b{font-family:var(--yns-display);font-size:2rem;font-weight:500}
.am-total span{color:var(--yns-muted)}
.am-build{display:grid;gap:8px}
.am-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;background:var(--yns-sunk);border-radius:var(--r-sm)}
.am-row span{display:block;font-size:.82rem;color:var(--yns-muted)}
.am-step{display:flex;align-items:center;gap:8px;flex:none}
.am-step button{width:34px;height:34px;border-radius:50%;border:1px solid var(--yns-line);background:#fff;font-size:1.2rem;cursor:pointer}
.am-step b{min-width:64px;text-align:center;font-family:var(--yns-display);font-weight:500}
.am-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:var(--s4)}
/* In the flow, under the footer. Pinned to the card corner it sat on top of the last answer, or on "It's changed" / "Skip this one". */
.am-back{position:static;display:block;margin:var(--s3) 0 0}
.am-results h1{font-size:1.75rem;margin-bottom:var(--s3)}
.am-results .ya-quote{font-family:var(--yns-display);font-size:1.15rem;padding:14px 16px;border-left:4px solid var(--yns-gold);background:var(--yns-gold-tint);border-radius:0 var(--r-sm) var(--r-sm) 0;margin:var(--s3) 0}
.am-results .ya-readout{padding:10px 0;border-top:1px solid var(--yns-line-soft)}
.am-results .ya-readout h3{font-size:.95rem;color:var(--yns-blue-deep);margin-bottom:4px}
.am-results .ya-result-lead{color:var(--yns-muted);margin:10px 0}
.am-seven{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--yns-line)}
.am-seven h3{color:var(--yns-blue-deep);margin-bottom:6px}
.am-seven .opt{margin-bottom:8px}
/* ---- tile reveal avatar ------------------------------------------ */
.avatar .art{position:relative}


/* ---- toast -------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--yns-ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:50;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- extra mechanics (sort, collect, hours, compose, diff, chain, compare, estimate) ---- */
.am-stat{font-family:var(--yns-display);font-size:2rem;color:var(--yns-blue-deep);margin-bottom:6px}
.am-sortcard{background:var(--yns-sunk);border-radius:var(--r);padding:18px;margin:var(--s3) 0}
.am-sortcard strong{display:block;font-family:var(--yns-display);font-size:1.25rem;font-weight:500;margin:4px 0 6px}
.am-piles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.am-pilecount{display:flex;justify-content:space-between;font-size:.82rem;color:var(--yns-muted);margin-top:10px}
.am-items{display:grid;gap:6px;margin-bottom:10px}
.am-item{display:flex;gap:10px;align-items:center;background:var(--yns-ok-tint);border-radius:var(--r-sm);padding:8px 12px}
.am-item span{flex:1}.am-item em{font-style:normal;font-size:.78rem;color:var(--yns-blue-deep)}
.am-item button{border:0;background:none;font-size:1.2rem;cursor:pointer;color:var(--yns-muted)}
#actModal input[type=range]{width:100%;margin:8px 0 0;accent-color:var(--yns-blue)}
.am-hrow{align-items:stretch}.am-hrow>div:first-child{flex:1}
.am-hval{text-align:right;min-width:88px}.am-hval b{display:block;font-family:var(--yns-display);font-weight:500;font-size:1.15rem}
.am-hval span,.am-hval em{display:block;font-size:.75rem;color:var(--yns-muted);font-style:normal}
.am-days{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:.78rem;margin-top:4px}
.am-days button{width:24px;height:24px;border-radius:50%;border:1px solid var(--yns-line);background:#fff;cursor:pointer}
.am-blanks{display:grid;gap:8px;margin:var(--s3) 0}
.am-blanks label span{display:block;font-size:.8rem;color:var(--yns-muted);margin-bottom:2px}
.am-blanks input{width:100%;font:inherit;padding:8px 10px;border-radius:var(--r-sm);border:1.5px solid var(--yns-line)}
.am-msg{white-space:pre-wrap;font:inherit;background:var(--yns-sunk);border-radius:var(--r);padding:14px;line-height:1.5}
.am-diff{display:grid;gap:8px}
.am-drow{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--yns-sunk);border-radius:var(--r-sm);padding:10px 12px}
.am-drow strong{display:block;font-weight:500;font-family:var(--yns-display)}
.am-dbtns,.am-yn{display:flex;gap:6px;flex:none}
.am-dbtns button,.am-yn button{font:inherit;font-size:.82rem;padding:6px 10px;border-radius:999px;border:1px solid var(--yns-line);background:#fff;cursor:pointer}
.am-dbtns button.on,.am-yn button.on{background:var(--yns-blue);color:#fff;border-color:var(--yns-blue)}
.am-chain{background:var(--yns-sunk);border-radius:var(--r);padding:16px;margin:var(--s3) 0}
.am-chain strong{display:block;font-family:var(--yns-display);font-weight:500;font-size:1.15rem;margin-bottom:8px}
.am-cost{font-size:.9rem;color:var(--yns-warn);background:var(--yns-warn-tint);padding:8px 12px;border-radius:var(--r-sm)}
.am-table{overflow-x:auto;margin:var(--s3) 0}
.am-table table{width:100%;border-collapse:collapse;font-size:.88rem}
.am-table th{text-align:left;color:var(--yns-muted);font-weight:400;font-size:.78rem;padding:6px 8px;border-bottom:1px solid var(--yns-line)}
.am-table td{padding:8px;border-bottom:1px solid var(--yns-line-soft);vertical-align:top}
.am-table td span{display:block;font-size:.78rem;color:var(--yns-muted)}
.am-results .ya-stack{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:10px 0}
.am-results .ya-stack i{display:block}
:root{--ya-stack-1:#2859B6;--ya-stack-5:#E1CC00}
.am-results .ya-chip{display:inline-block;font-size:.75rem;padding:2px 8px;border-radius:999px;background:var(--yns-tint-2);color:var(--yns-blue-deep);margin-left:6px}
.am-results ul.ya-roles{padding-left:18px}
.ya-roles li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ya-roles .pay{display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-weight:600}
.ya-roles .pay small,.role .pay small{font-weight:400;color:var(--yns-muted);font-size:12px;margin-right:4px}
.act .ext{font-size:.75rem;color:var(--yns-blue-deep)}

/* ---- standalone apps in a frame ---- */
.am-frame{max-width:1100px;padding:12px 12px 0;height:calc(100vh - 48px);display:flex;flex-direction:column}
.am-frame .am-top{margin-bottom:8px;gap:10px;flex-wrap:wrap}
.am-frame iframe{flex:1;width:100%;border:0;border-radius:var(--r-sm);background:#fff}
.preview img{object-fit:cover}

/* ---- the scene behind the character ------------------------------- */
.avatar{overflow:visible}
/* the portrait sits in the middle of the scene, clear from the start */
.avatar .art{position:absolute;inset:0;border-radius:50%;background:var(--yns-paper);box-shadow:var(--shadow);overflow:hidden}
.avatar .art>div,.avatar .art img,.avatar .art svg{width:100%;height:100%;display:block;border-radius:50%}
.avatar .art img{object-fit:cover}
.avatar .pct{display:none}  /* the count lives in the caption now, so it can't sit on top of a drawing */

/* ---- rail: per-door progress, quiet doors, collapsed list --------- */
.prog{margin-bottom:14px}
.prog:last-child{margin-bottom:0}
.prog .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.88rem;margin-bottom:5px}
.prog .top b{font-family:var(--yns-display);font-weight:500}
.prog .top span{font-size:.8rem;color:var(--yns-muted)}
.prog .pbar{height:8px;border-radius:4px;background:var(--yns-line-soft);overflow:hidden}  /* not .bar: that class is the top nav */
.prog .pbar i{display:block;height:100%;background:var(--yns-blue);transition:width .5s}
.prog.full .pbar i{background:var(--yns-gold)}
.prog .nextline{font-size:.8rem;color:var(--yns-muted);margin-top:5px}
.prog .nextline b{color:var(--yns-ink);font-family:var(--yns-display);font-weight:500}
.quiet-doors{border-top:1px solid var(--yns-line-soft);margin-top:14px;padding-top:10px}
.quiet-doors .qhead{display:flex;justify-content:space-between;font-size:.78rem;color:var(--yns-muted);margin-bottom:2px}
.qd{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.85rem;padding:5px 0;color:var(--yns-muted)}
.qd .nm{flex:1}
.qd.aside .nm{opacity:.6}
.qd .lnk{background:none;border:0;color:var(--yns-blue-deep);text-decoration:underline;cursor:pointer;font-family:var(--yns-body);font-size:.78rem;padding:0}
.acc{border:1px solid var(--yns-line);border-radius:var(--r-sm);overflow:hidden}
.acc details{border-bottom:1px solid var(--yns-line-soft)}
.acc details:last-child{border-bottom:0}
.acc summary{cursor:pointer;list-style:none;padding:9px 11px;display:flex;align-items:center;gap:9px}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--yns-tint)}
.acc summary .car{color:var(--yns-muted);transition:transform .2s}
.acc details[open] summary .car{transform:rotate(90deg)}
.acc summary .nm{font-family:var(--yns-display);flex:1;font-size:.9rem}
.acc summary .st{font-size:.74rem;color:var(--yns-muted)}
.accbody{padding:0 11px 10px 30px;display:grid}
.arow{display:flex;align-items:center;gap:9px;font-size:.85rem;padding:4px 0}
.arow .dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--yns-line);flex:none;display:grid;place-items:center}
.arow.done .dot{background:var(--yns-ok);border-color:var(--yns-ok)}
.arow.done .dot::after{content:"";width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.arow.aside{opacity:.5}
.arow.aside .dot{border-style:dashed}
.arow .nm{flex:1}
.arow .mins{font-size:.75rem;color:var(--yns-muted)}
/* ---- the offer on the door panel ---- */
.offer{display:flex;gap:12px;align-items:flex-start;background:var(--yns-gold-tint);border:1px solid #e7d96a;border-radius:var(--r);padding:14px;margin-bottom:var(--s4)}
.offer svg{flex:none;width:20px;height:20px;margin-top:2px;stroke:var(--yns-gold-deep)}
.offer p{margin:0 0 10px;font-size:.92rem}
.offer-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* ---- set-aside state on an activity card ---- */
.act .notme{align-self:flex-start;background:none;border:0;color:var(--yns-muted);text-decoration:underline;cursor:pointer;font-family:var(--yns-body);font-size:.75rem;padding:6px 0 0}
.act .notme:hover{color:var(--yns-blue-deep)}

.act.aside{opacity:.55}
.act.aside:hover{border-color:var(--yns-line-soft);background:var(--yns-sunk)}
.dcard.aside{opacity:.6}

/* ---- Career ABCs stage cards ------------------------------------- */
.act .bringin{align-self:flex-start;background:none;border:0;border-top:1px dashed var(--yns-line);margin-top:8px;padding:8px 0 0;width:100%;text-align:left;color:var(--yns-blue-deep);text-decoration:underline;cursor:pointer;font-family:var(--yns-body);font-size:.8rem}
.act .bringin:hover{color:var(--yns-blue)}
.act .after{font-size:.78rem;color:var(--yns-muted);background:var(--yns-tint);border-radius:var(--r-sm);padding:6px 9px;margin:0 0 8px}
.am-frame .am-x{font-size:.9rem;font-family:var(--yns-display);white-space:nowrap}

/* ---- the rate mechanic (interest items) --------------------------- */
.am-rate{display:grid;gap:8px;margin:var(--s3) 0}
.am-ritem{display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--yns-sunk);border-radius:var(--r-sm);padding:10px 12px}
.am-rq{flex:1;font-size:.94rem}
.am-ropts{display:flex;gap:6px;flex:none}
.am-ropts button{font:inherit;font-size:.82rem;padding:7px 12px;border-radius:999px;border:1px solid var(--yns-line);background:#fff;cursor:pointer;min-width:58px}
.am-ropts button:hover{border-color:var(--yns-blue-deep)}
.am-ropts button.on{background:var(--yns-blue);color:#fff;border-color:var(--yns-blue)}
.am-results .ya-fine{font-size:.78rem;color:var(--yns-muted);margin-top:4px}
@media (max-width:560px){
  .am-ritem{flex-direction:column;align-items:stretch;gap:8px}
  .am-ropts button{flex:1}
}

/* ---- direction card: many signals, one read ----------------------- */
.dir-top{font-family:var(--yns-display);font-size:1.15rem;margin:0}
.dir-sig{font-size:.8rem;color:var(--yns-muted);margin:8px 0 0}
.dir-note{font-size:.8rem;color:var(--yns-ink);background:var(--yns-tint);border-radius:var(--r-sm);padding:8px 10px;margin:8px 0 0}

/* ---- picker preview, portrait only -------------------------------- */
.mini-card{width:88px;height:88px;border-radius:50%;background:var(--yns-warm)}
.mini-art{position:absolute;inset:0;width:100%;height:100%;transform:none;border-radius:50%;box-shadow:none}

/* ---- the full profile readout ------------------------------------- */
.dir-more{margin-top:10px;width:100%;font-size:.85rem;padding:8px 12px}
.pf-sec{margin-top:var(--s5)}
.pf-sec h3{color:var(--yns-blue-deep);font-size:1.05rem}
.pf-row{display:grid;grid-template-columns:180px 1fr;gap:4px 16px;padding:10px 0;border-top:1px solid var(--yns-line-soft)}
.pf-t{font-family:var(--yns-display);font-size:.92rem}
.pf-v{font-size:.95rem}
.pf-from{grid-column:2;font-size:.75rem;color:var(--yns-muted)}
@media (max-width:560px){.pf-row{grid-template-columns:1fr}.pf-from{grid-column:1}}
/* two actions on a finished card */
.act-actions{display:flex;gap:14px;flex-wrap:wrap;padding-top:6px}

/* ---- typed money and hours --------------------------------------- */
.am-money{display:inline-flex;align-items:center;gap:2px;background:#fff;border:1.5px solid var(--yns-line);border-radius:var(--r-sm);padding:4px 8px}
.am-money i{font-style:normal;color:var(--yns-muted);font-size:.9rem}
.am-money input{border:0;outline:0;font:inherit;font-family:var(--yns-display);font-weight:500;width:78px;text-align:right;background:none;color:var(--yns-ink)}
.am-money:focus-within{border-color:var(--yns-blue);outline:3px solid var(--yns-blue);outline-offset:2px}
.am-hval .am-money input{width:52px;text-align:right}

/* ---- planner ------------------------------------------------------ */
.planner-btn{font:inherit;font-family:var(--yns-display);font-size:.88rem;display:inline-flex;align-items:center;gap:7px;background:var(--yns-paper);border:1px solid var(--yns-line);border-radius:999px;padding:6px 14px;cursor:pointer;color:var(--yns-blue-deep)}
.planner-btn:hover{background:var(--yns-tint)}
.pl-count{background:var(--yns-blue);color:#fff;border-radius:999px;min-width:19px;height:19px;display:inline-grid;place-items:center;font-size:.72rem;padding:0 5px}
.pl-row{display:grid;grid-template-columns:22px 1fr auto;gap:4px 10px;align-items:start;padding:10px 0;border-top:1px solid var(--yns-line-soft)}
.pl-row input[type=checkbox]{margin:0;width:22px;height:22px;accent-color:var(--yns-blue);cursor:pointer}  /* scoped: an unscoped rule here squashed the edit field to tick-box size */
.pl-t{font-size:.96rem}
.pl-from{grid-column:2/4;font-size:.76rem;color:var(--yns-muted)}
.pl-off{grid-template-columns:1fr;opacity:.55;text-decoration:line-through}
.pl-off .pl-from{grid-column:1;text-decoration:none}
.pl-done{margin-top:10px}
.pl-done summary{cursor:pointer;font-size:.85rem;color:var(--yns-muted)}

/* ---- budget and calculator --------------------------------------- */
.am-group{font-family:var(--yns-display);font-size:.9rem;color:var(--yns-blue-deep);margin:var(--s4) 0 6px}
#bgLeft.bg-zero{color:var(--yns-ok)}
#bgLeft.bg-over{color:#B3261E}
.am-calcout{background:var(--yns-sunk);border-radius:var(--r);padding:16px;margin-top:var(--s4);text-align:center}
.calc-big{font-family:var(--yns-display);font-size:2.4rem;line-height:1.1;color:var(--yns-blue-deep)}
.calc-sub{font-size:.85rem;color:var(--yns-muted);margin:2px 0 12px}
.calc-bar{height:14px;border-radius:7px;background:var(--yns-gold);overflow:hidden}
.calc-bar i{display:block;height:100%;background:var(--yns-blue)}
.calc-key{font-size:.8rem;color:var(--yns-muted);margin:8px 0 0}
.calc-key .k1,.calc-key .k2{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.calc-key .k1{background:var(--yns-blue)}
.calc-key .k2{background:var(--yns-gold)}
.calc-late{font-size:.85rem;margin:10px 0 0}

/* ---- a reference card inside a writing screen --------------------- */
.am-aside{background:var(--yns-tint);border:1px solid var(--yns-tint-2);border-radius:var(--r);padding:12px 14px;margin:0 0 var(--s3)}
.am-aside b{font-family:var(--yns-display);font-weight:500;font-size:.92rem}
.am-aside ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
.am-aside li{font-size:.86rem;line-height:1.45}
.am-aside span{display:block;font-size:.8rem;color:var(--yns-muted);margin-top:8px}

.pl-acts{display:flex;gap:10px;flex:none}
.pl-acts .lnk{background:none;border:0;color:var(--yns-blue-deep);text-decoration:underline;cursor:pointer;font-family:var(--yns-body);font-size:.78rem;padding:0}
.pl-acts .lnk:hover{color:var(--yns-blue)}
.pl-dated{grid-template-columns:1fr auto}
.pl-edit{display:block;width:100%;min-width:0;font:inherit;font-size:.95rem;line-height:1.4;padding:7px 10px;border:1.5px solid var(--yns-blue);border-radius:var(--r-sm);background:#fff;color:var(--yns-ink)}
.pl-edit:focus-visible{outline:3px solid var(--yns-blue);outline-offset:2px}

/* ---- the printable portfolio -------------------------------------
   Hidden on screen, and the only thing on the page when printing.
   Every browser's print dialog can save it as a PDF, phones included. */
#printRoot{display:none}
@media print{
  body{background:#fff}
  .wrap,#actModal,.toast,.checkin{display:none !important}
  #printRoot{display:block;font-family:var(--yns-body);color:#14203A;padding:0;max-width:none}
  .pp-head{border-bottom:3px solid var(--yns-blue);padding-bottom:14px;margin-bottom:22px}
  .pp-logo{width:120px;height:auto;display:block;margin-bottom:14px}
  .pp-head h1{font-family:var(--yns-display);font-weight:400;font-size:24pt;margin:0}
  .pp-sub{color:#5B6478;font-size:10pt;margin:4px 0 0}
  .pp-sec{margin:0 0 20px;page-break-inside:avoid}
  .pp-sec h2{font-family:var(--yns-display);font-weight:500;font-size:13pt;color:var(--yns-blue-deep);border-bottom:1px solid #D5DAE3;padding-bottom:4px;margin:0 0 10px}
  .pp-big{font-family:var(--yns-display);font-size:17pt;margin:0 0 6px}
  .pp-label{font-size:9pt;color:#5B6478;margin:10px 0 2px;text-transform:uppercase;letter-spacing:.04em}
  .pp-row{display:grid;grid-template-columns:150px 1fr;gap:6px 16px;padding:7px 0;border-bottom:1px solid #E6EAF1;font-size:11pt;line-height:1.5}
  .pp-t{font-family:var(--yns-display);font-weight:500;color:#2859B6}
  .pp-sec ul{margin:4px 0 0;padding-left:18px;font-size:11pt;line-height:1.6}
  .pp-note{font-size:9pt;color:#5B6478}
  .pp-foot{margin-top:26px;padding-top:10px;border-top:1px solid #D5DAE3;font-size:8.5pt;color:#5B6478}
  .pp-break{page-break-before:always;break-before:page}
  .pp-kit button,.pp-kit .kit-grid{display:none !important}
  @page{margin:16mm}
}
/* Shared by the PDF and the on-screen preview (My Portfolio). */
.pp-kicker{font-family:var(--yns-display);font-size:9pt;letter-spacing:.08em;text-transform:uppercase;color:#2859B6;margin:0 0 4px}
.pp-table{width:100%;border-collapse:collapse;font-size:10.5pt}
.pp-table td{padding:6px 4px;border-bottom:1px solid #E6EAF1;vertical-align:top}
.pp-muted{color:#5B6478}
.pp-d{white-space:nowrap;color:#5B6478;text-align:right}
.pp-letter{white-space:pre-wrap;font-family:Georgia,'Times New Roman',serif;font-size:11pt;line-height:1.5;color:#111}
.pp-story{margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid #E6EAF1;font-size:10.5pt;line-height:1.5}
.pp-story p{margin:0 0 4px}
.pp-story-t{font-family:var(--yns-display);font-weight:500;color:#14203A}

/* ---- My Portfolio (29 Sep 2026) ---------------------------------- */
.pf-page{max-width:1080px}
.pf-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.pf-preview{display:none}
@media(min-width:1000px){ .pf-grid{grid-template-columns:minmax(0,1fr) 400px} .pf-preview{display:block;position:sticky;top:12px} }
.pf-meter-card{background:var(--yns-sunk);border-radius:var(--r);padding:14px 16px;margin:6px 0 14px}
.pf-meter-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pf-meter-h b{font-family:var(--yns-display);font-weight:500}
.pf-meter{height:8px;background:var(--yns-line-soft);border-radius:999px;overflow:hidden}
.pf-meter i{display:block;height:100%;background:var(--yns-blue);border-radius:999px}
.pf-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.pf-bar .btn{flex:1 1 160px}
.pf-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px}
@media(max-width:420px){ .pf-cards{grid-template-columns:1fr} }
.pfc{display:flex;gap:12px;align-items:center;background:var(--yns-paper);border:1px solid var(--yns-line);border-radius:var(--r);padding:12px 14px;cursor:default}
label.pfc{cursor:pointer}
.pfc.off{opacity:.55}
.pfc input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:var(--yns-blue);margin:0}
.pfc-ic{width:38px;height:38px;border-radius:10px;background:var(--yns-tint);color:var(--yns-blue);display:flex;align-items:center;justify-content:center;flex:none}
.pfc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pfc-tx b{font-family:var(--yns-display);font-weight:500}
.pfc-acts{display:flex;gap:6px;flex:none}
.pf-foot{position:sticky;bottom:0;background:var(--yns-paper);padding-top:12px}
.pf-preview-h{display:flex;justify-content:space-between;margin-bottom:8px}
.pf-paper{background:#fff;border:1px solid var(--yns-line);border-radius:6px;box-shadow:0 6px 18px rgba(20,32,58,.10);padding:24px 26px;font-size:12px;max-height:620px;overflow:hidden;position:relative}
.pf-paper::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
.pf-paper .pp-head{border-bottom:3px solid var(--yns-blue);padding-bottom:10px;margin-bottom:12px}
.pf-paper .pp-logo{width:90px;height:auto;display:block;margin-bottom:10px}
.pf-paper h1{font-family:var(--yns-display);font-weight:400;font-size:20px;margin:0}
.pf-paper h2{font-family:var(--yns-display);font-weight:500;font-size:13px;color:var(--yns-blue-deep);border-bottom:1px solid #D5DAE3;padding-bottom:3px;margin:0 0 6px}
.pf-paper .pp-sub,.pf-paper .pp-note{color:#5B6478;font-size:11px;margin:4px 0}
.pf-paper .pp-table{font-size:11px}
@media(max-width:600px){ .pfc{flex-wrap:wrap} .pfc-acts{width:100%;justify-content:flex-end} }

/* ---- next step + places ------------------------------------------- */
.pf-next{background:var(--yns-gold-tint);border-radius:var(--r);padding:14px 16px;margin-top:var(--s3)}
.pf-next h3{color:var(--yns-gold-deep)}
.pf-next-line{font-family:var(--yns-display);font-size:1.15rem;line-height:1.4;margin:4px 0 8px}
.pf-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pf-links .btn{font-size:.85rem;padding:7px 12px}
.pf-zip{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--yns-muted);margin-top:10px}
.pf-zip input{width:72px;font:inherit;padding:5px 8px;border:1.5px solid var(--yns-line);border-radius:var(--r-sm)}
.pf-place{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--yns-line-soft)}
.pf-place-name{font-family:var(--yns-display);font-weight:500}
.pf-place-type{font-size:.76rem;color:var(--yns-muted);margin-left:8px}
.pf-place select{font:inherit;font-size:.82rem;padding:5px 8px;border:1px solid var(--yns-line);border-radius:var(--r-sm);background:#fff}
.pf-add{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:10px}
.pf-add input,.pf-add select{font:inherit;font-size:.9rem;padding:8px 10px;border:1.5px solid var(--yns-line);border-radius:var(--r-sm);background:#fff;min-width:0}
.dir-next{font-size:.88rem;background:var(--yns-gold-tint);border-radius:var(--r-sm);padding:8px 10px;margin:8px 0 0;line-height:1.45}
@media (max-width:560px){.pf-place,.pf-add{grid-template-columns:1fr}.pf-place .pl-acts{justify-content:flex-start}}

/* ---- the course card, the ready state, the signup screen ---------- */
.wix-card{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--yns-tint);border:1px solid var(--yns-tint-2);border-radius:var(--r);padding:14px 16px;margin:var(--s4) 0 0}
.wix-card p{margin:0;flex:1;min-width:220px;font-size:.92rem}
.ready{background:var(--yns-ok-tint);border:1px solid #bfe3cf;border-radius:var(--r);padding:14px 16px;margin-bottom:var(--s4);font-size:.95rem}
.ready .pf-links{margin-top:10px}
.signup-form{display:grid;gap:10px;margin:var(--s4) 0 0}
.signup-form label{display:grid;gap:4px;font-size:.85rem;color:var(--yns-muted)}
.signup-form input[type=email],.signup-form input[type=password]{font:inherit;padding:10px 12px;border:1.5px solid var(--yns-line);border-radius:var(--r-sm)}
.signup-consent{display:flex !important;gap:10px;align-items:flex-start;color:var(--yns-ink) !important;font-size:.92rem !important}
.signup-consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--yns-blue)}

/* ---- investment comparison rows ----------------------------------- */
.iv-rows{display:grid;gap:8px;margin:12px 0 0;text-align:left}
.iv-row{display:grid;grid-template-columns:1fr 2fr auto;gap:10px;align-items:center}
.iv-t b{display:block;font-family:var(--yns-display);font-weight:500;font-size:.88rem}
.iv-t span{font-size:.74rem;color:var(--yns-muted)}
.iv-bar{height:14px;border-radius:7px;background:var(--yns-line-soft);overflow:hidden}
.iv-bar i{display:block;height:100%;background:var(--yns-blue)}
.iv-row:nth-child(1) .iv-bar i,.iv-row:nth-child(2) .iv-bar i{background:var(--yns-ok)}
.iv-row:nth-child(5) .iv-bar i{background:var(--yns-gold)}
.iv-n{font-family:var(--yns-display);font-weight:500;font-size:.9rem;white-space:nowrap}
@media (max-width:560px){.iv-row{grid-template-columns:1fr auto}.iv-bar{display:none}}

/* ---- accessibility and phone fixes (v20 audit) --------------------- */
/* Components with their own box-shadow keep the outline ring on top. */
.dcard:focus-visible,.ptone:focus-visible,.pbody:focus-visible,.opt:focus-visible,.act:focus-visible,
.pbody[aria-checked="true"]:focus-visible,.ptone[aria-checked="true"]:focus-visible,.dcard.current:focus-visible{outline:3px solid var(--yns-blue);outline-offset:3px}
#actModal h1:focus,#actModal h2:focus{outline-offset:4px}
.am-dbtns button[aria-pressed="true"],.am-yn button[aria-pressed="true"],.am-ropts button[aria-pressed="true"]{font-weight:600}

/* A money field that went over its limit. */
.am-cap{flex-basis:100%;margin:2px 0 0;text-align:right;font-size:.8rem;color:var(--yns-muted)}
.am-cap[hidden]{display:none}
.am-row.has-cap{flex-wrap:wrap}
.am-row.has-cap>div:first-child{flex:1 1 0;min-width:0}
.am-resume{margin-top:calc(var(--s2) * -1)}

/* Three Doors: on a phone, one card per route, Yes/No underneath. */
.am-cmp .am-rt{text-align:left;font-weight:400;color:inherit;font-size:inherit;padding:8px;border-bottom:1px solid var(--yns-line-soft);vertical-align:top}
.am-cmp .am-rt strong{display:block;font-weight:500;font-family:var(--yns-display)}
.am-cmp .am-rt span{display:block;font-size:.78rem;color:var(--yns-muted)}
.am-yn button{min-height:36px;min-width:52px}
.am-table td.am-yn{display:table-cell;white-space:nowrap}
.am-table td.am-yn button+button{margin-left:6px}
@media (max-width:600px){
  .am-cmp{overflow:visible}
  .am-cmp table,.am-cmp tbody,.am-cmp tr,.am-cmp th,.am-cmp td{display:block;width:auto}
  .am-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .am-cmp tr{background:var(--yns-sunk);border-radius:var(--r-sm);padding:12px;margin-bottom:10px}
  .am-cmp .am-rt,.am-cmp td{border:0;padding:0}
  .am-cmp .am-rt{margin-bottom:8px}
  .am-cmp .am-rt strong{font-size:1.05rem}
  .am-cmp td[data-label]{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-top:1px solid var(--yns-line-soft);overflow-wrap:anywhere}
  .am-cmp td[data-label]::before{content:attr(data-label);color:var(--yns-muted);font-size:.8rem;flex:none;max-width:45%}
  .am-cmp td[data-label]{text-align:right}
  .am-cmp td.am-yn{display:flex;gap:10px;margin-top:10px;white-space:normal}
  .am-cmp td.am-yn button+button{margin-left:0}
  .am-cmp .am-yn button{flex:1;min-height:44px;font-size:.95rem}
}

/* Small text links: a full-size tap target on touch and narrow screens. */
@media (pointer:coarse),(max-width:600px){
  .lnk,.qd .lnk,.pl-acts .lnk{min-height:44px;min-width:44px;padding:10px 8px;display:inline-flex;align-items:center;justify-content:center}
  .pl-acts{gap:4px}
  .am-days button{width:36px;height:36px}
}

/* ---------- check-ins and the save nudge (on-screen) ---------- */
.checkin{position:fixed;right:16px;bottom:16px;z-index:60;max-width:360px;width:calc(100% - 32px);
  background:var(--yns-paper,#fff);border:1px solid var(--yns-line);border-left:4px solid var(--yns-blue);
  border-radius:14px;box-shadow:0 12px 32px rgba(20,32,58,.18);padding:16px 18px 14px;display:none}
.checkin.show{display:block}
.checkin p{margin:0 0 6px}
.checkin-eyebrow{font-family:var(--yns-display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--yns-blue-deep)}
.checkin-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.checkin-x{position:absolute;top:2px;right:2px;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--yns-muted);min-width:44px;min-height:44px}
body.modal-open .checkin{display:none}
/* The activity title is the card's button, so keyboard and screen readers get one clear control. */
.act h3 .act-open{all:unset;cursor:pointer;font:inherit;color:inherit;display:inline;border-radius:4px}
.act h3 .act-open:focus-visible{outline:3px solid var(--yns-blue);outline-offset:2px}
.act h3 .act-open::after{content:"";position:absolute;inset:0}
.act{position:relative}
.act .act-actions,.act .bringin{position:relative;z-index:1}
@media (max-width:600px),(pointer:coarse){
  .am-x{min-width:44px;min-height:44px}
}

/* ---------- v23: settings, bigger tap targets ---------- */
.pl-row{grid-template-columns:44px 1fr auto}
.pl-tick{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-10px 0 -10px -11px;cursor:pointer;border-radius:10px}
.pl-tick:hover{background:var(--yns-tint)}
/* "Further out" rows have no tick box, so they need their own two
   columns; on the three-column grid the text was squeezed into the
   44px tick column, one word per line. */
.pl-row.pl-dated{grid-template-columns:1fr auto}
.set-list{display:flex;flex-direction:column;gap:10px;margin-top:var(--s3)}
.set-row{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:3px;width:100%;padding:14px 16px;border:1px solid var(--yns-line);border-radius:var(--r);background:var(--yns-paper);cursor:pointer}
.set-row b{font-family:var(--yns-display);font-weight:500;color:var(--yns-blue-deep)}
.set-row span{font-size:.88rem;color:var(--yns-muted)}
.set-row:hover{background:var(--yns-tint)}
.set-row:focus-visible{outline:3px solid var(--yns-blue);outline-offset:2px}
.set-danger b{color:#9B2C2C}
/* Wired account screen and settings (September 2026) */
.signup-google{width:100%;justify-content:center;margin-top:var(--s4)}
.signup-or{text-align:center;margin:var(--s3) 0 0}
.signup-msg{margin:0;color:var(--yns-blue-deep)}
.signup-msg.err{color:#9B2C2C}
.signup-form .am-foot{margin-top:var(--s3)}
.set-toggle{flex-direction:row;align-items:flex-start;gap:12px}
.set-toggle input{margin-top:3px;width:17px;height:17px;accent-color:var(--yns-blue);flex:none}
.set-toggle > span{display:flex;flex-direction:column;gap:3px;color:inherit}
a.set-row{text-decoration:none}
.act .notme{position:relative;z-index:2;min-height:44px;padding:12px 10px 12px 0;display:inline-flex;align-items:center}
@media (max-width:600px),(pointer:coarse){
  .am-step button{width:44px;height:44px}
}
/* Phone top bar: logo, then one row of Portfolio · Planner · Settings, then the sign-in link.
   The status chip repeats what the rail already shows, so it steps aside. */
@media (max-width:600px){
  .bar{flex-wrap:wrap;gap:10px}
  .bar .acct{width:100%;justify-content:flex-start;gap:8px}
  .bar .acct .chip{display:none}
  .bar .acct .planner-btn{padding:8px 12px;min-height:40px}
  .bar .acct a{flex-basis:100%;padding:6px 0}
}
.next-door{margin:10px 0 0;font-size:.95rem}

/* ---- progress ring around the portrait (js/hub.js renderRing) ---- */
.avatar svg.ring{position:absolute;left:-18px;top:-18px;width:216px;height:216px;background:none;box-shadow:none;border-radius:0;overflow:visible;pointer-events:none}
.avatar svg.ring circle{fill:none;stroke-width:8}
.avatar svg.ring .ring-track{stroke:#CDD3DE}
.avatar svg.ring .ring-fill{stroke:var(--yns-blue);stroke-linecap:round;transition:stroke-dasharray .8s ease,stroke .4s}
.avatar svg.ring .ring-fill.is-done{stroke:#D9C200;stroke-linecap:butt}
.avatar svg.ring .ring-fill.is-empty{stroke:transparent}
@media (prefers-reduced-motion:reduce){.avatar svg.ring .ring-fill{transition:none}}
/* room for the ring: 18px on every side of the 180px portrait, so it
   never sits on the caption or off the edge of the page */
@media (min-width:561px){.hero{grid-template-columns:216px 1fr}}
.hero .avatar{margin:18px}
.hero .avatar-caption{max-width:216px;margin-top:0}

/* ---------- phones: an action on the first screen ----------
   After intake the first activity sat about 1.5 screens down. On phones
   the portrait sits small beside the headline, and the starting door
   follows straight after; the intro line and the character's bubble move
   below the door. Nothing in the moved text is focusable, so keyboard
   order is unaffected. The ring keeps its ratio to the portrait (x1.2). */
@media (max-width:560px){
  .hub__main{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:var(--s3);
    grid-template-areas:"av h1" "av cap" "door door" "lead lead" "bubble bubble" "doors doors";align-items:start}
  .hero,.hero-text,.hero-text>div:first-child,.hero>div:first-child{display:contents}
  .hero .avatar{grid-area:av;width:80px;height:80px;margin:10px}
  .avatar svg.ring{left:-8px;top:-8px;width:96px;height:96px}
  .avatar-caption{grid-area:cap;text-align:left;max-width:none;margin:2px 0 0;align-self:start}
  #heroH1{grid-area:h1;text-align:left;font-size:1.7rem;margin:14px 0 0;align-self:end;max-width:none}
  #doorPanel{grid-area:door;margin-top:var(--s4)}
  #heroLead{grid-area:lead;text-align:left;margin:var(--s4) 0 0}
  #bubble{grid-area:bubble;margin:var(--s3) 0 var(--s5);max-width:none}
  .hub__main>.doors{grid-area:doors}
  #doorPanel .door-banner{display:none}  /* decorative; on a phone it pushed the first activity off screen one */
}

/* One-time agreement before the hub (js/hub.js termsGate). Sits above
   every other modal, and cannot be closed without agreeing. */
#termsGate{position:fixed;inset:0;z-index:90;background:rgba(20,32,58,.62);overflow-y:auto;padding:24px 12px;display:flex;align-items:flex-start;justify-content:center}
#termsGate .am-card{width:100%;margin-top:6vh}
#termsGate input[type=checkbox]{width:18px;height:18px;margin-top:3px;flex:none}
#termsGate .terms-list{margin:12px 0 16px;padding-left:1.2em;display:grid;gap:8px}
#termsGate .signup-consent a{color:var(--yns-blue);text-decoration:underline}
#termsGate .am-foot{display:flex;justify-content:flex-end;margin-top:18px}
#termsGate .btn[disabled]{opacity:.5;cursor:not-allowed}
body.terms-open{overflow:hidden}
@media print{#termsGate{display:none !important}}


/* How it's going: the check-in survey */
.pulse h2{margin:0 0 4px}
.pulse-q{border:0;margin:0 0 var(--s4);padding:0;min-width:0}
.pulse-q legend,.pulse-legend{display:block;font-family:var(--yns-display);font-weight:600;color:var(--yns-heading);margin:0 0 8px;padding:0}
.pulse-q .small{margin:-4px 0 8px}
.pulse-row{display:flex;flex-wrap:wrap;gap:8px}
.pulse-chip{padding:9px 14px;border-radius:999px;border:1.5px solid var(--yns-line);background:var(--yns-paper);color:var(--yns-ink);font:inherit;cursor:pointer}
.pulse-chip:hover,.pulse-n:hover{border-color:var(--yns-blue-deep);background:var(--yns-tint)}
.pulse-chip[aria-pressed="true"],.pulse-n[aria-pressed="true"]{border-color:var(--yns-blue);background:var(--yns-blue);color:#fff}
.pulse-nps{display:grid;grid-template-columns:repeat(11,1fr);gap:4px}
.pulse-n{min-width:0;padding:10px 0;border-radius:8px;border:1.5px solid var(--yns-line);background:var(--yns-paper);color:var(--yns-ink);font:inherit;cursor:pointer;text-align:center}
.pulse textarea{width:100%;font:inherit;padding:10px 12px;border-radius:var(--r);border:1.5px solid var(--yns-line);background:var(--yns-paper);color:var(--yns-ink);resize:vertical}
.pulse-chip:focus-visible,.pulse-n:focus-visible,.pulse textarea:focus-visible{outline:none;box-shadow:var(--yns-focus)}
@media(max-width:420px){ .pulse-nps{grid-template-columns:repeat(6,1fr)} }
.pulse > p.muted{margin:0 0 var(--s4)}