/* ══ AOG-ADULT-SKIN-V2 (2026-10-09) — THE ADULT EDITION, ONE SKIN ═════════════
   Shared by the four Adult pages: adult-edition.html (/adult), adult-workbook.html
   (/adult/workbook), adult-anchors.html (/adult/anchors) and adult-sessions.html
   (/adult/sessions). Light is the base; dark redefines tokens only, never components.
   The four phases keep the rooms' drawn-first palette:
   Foundation teal · Interior plum · Repair rust · Legacy brass.
   aog-grace.js paints the <header class="mast"> navy; anything inside it with its
   own light background carries data-aog-card. ══════════════════════════════════ */
:root{
  --ground:#F5F1E8; --field:#FFFFFF; --field-2:#EFEAE0;
  --ink:#1D2733; --ink-soft:#4F5A67; --ink-faint:#5A6673;
  --navy:#1B3A5F; --gold:#B8893A; --gold-deep:#7A5C1F;
  --rule:rgba(29,39,51,.16); --rule-soft:rgba(29,39,51,.08);
  --lift-sm:0 1px 2px rgba(29,39,51,.07), 0 8px 20px -16px rgba(29,39,51,.4);
  --a:#4A3A8C; --a-wash:rgba(74,58,140,.07);
  --lock:#2E6B4F; --lock-wash:rgba(46,107,79,.09);
  --caution:#9A3412; --caution-wash:rgba(154,52,18,.08); --focus:#B8893A;
  --good:#2E6B4F; --good-wash:rgba(46,107,79,.12);
  --p1:#1F6F6B; --p1-wash:rgba(31,111,107,.12);
  --p2:#5B3A78; --p2-wash:rgba(91,58,120,.12);
  --p3:#9A4A2E; --p3-wash:rgba(154,74,46,.12);
  --p4:#7E611C; --p4-wash:rgba(138,106,31,.14);
  --on-navy:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#12161C; --field:#1A2029; --field-2:#222A34;
    --ink:#E9EEF4; --ink-soft:#B3BECA; --ink-faint:#9AA6B3;
    --navy:#9CC2E8; --gold:#D6A852; --gold-deep:#D6A852;
    --rule:rgba(233,238,244,.18); --rule-soft:rgba(233,238,244,.09);
    --lift-sm:0 1px 2px rgba(0,0,0,.5), 0 10px 24px -18px rgba(0,0,0,.9);
    --a:#B9ADF0; --a-wash:rgba(169,155,232,.12);
    --lock:#79C79E; --lock-wash:rgba(121,199,158,.12);
    --caution:#F0A07C; --caution-wash:rgba(240,160,124,.12); --focus:#D6A852;
    --good:#79C79E; --good-wash:rgba(121,199,158,.16);
    --p1:#6FC7C2; --p1-wash:rgba(111,199,194,.14);
    --p2:#C3A8E0; --p2-wash:rgba(185,155,217,.14);
    --p3:#E8A184; --p3-wash:rgba(232,161,132,.14);
    --p4:#D6A852; --p4-wash:rgba(214,168,82,.16);
    --on-navy:#12161C;
  }
}
:root[data-theme="dark"]{
  --ground:#12161C; --field:#1A2029; --field-2:#222A34;
  --ink:#E9EEF4; --ink-soft:#B3BECA; --ink-faint:#9AA6B3;
  --navy:#9CC2E8; --gold:#D6A852; --gold-deep:#D6A852;
  --rule:rgba(233,238,244,.18); --rule-soft:rgba(233,238,244,.09);
  --lift-sm:0 1px 2px rgba(0,0,0,.5), 0 10px 24px -18px rgba(0,0,0,.9);
  --a:#B9ADF0; --a-wash:rgba(169,155,232,.12);
  --lock:#79C79E; --lock-wash:rgba(121,199,158,.12);
  --caution:#F0A07C; --caution-wash:rgba(240,160,124,.12); --focus:#D6A852;
  --good:#79C79E; --good-wash:rgba(121,199,158,.16);
  --p1:#6FC7C2; --p1-wash:rgba(111,199,194,.14);
  --p2:#C3A8E0; --p2-wash:rgba(185,155,217,.14);
  --p3:#E8A184; --p3-wash:rgba(232,161,132,.14);
  --p4:#D6A852; --p4-wash:rgba(214,168,82,.16);
  --on-navy:#12161C;
}
*{box-sizing:border-box}
html,body{margin:0; overflow-x:clip}
body{background:var(--ground); color:var(--ink); font:17px/1.6 "Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-text-size-adjust:100%}
.wrap{max-width:920px; margin:0 auto; padding:18px 16px 90px}
h1,h2,h3,h4{line-height:1.18; margin:0 0 .35em}
h1{font-size:2rem} h2{font-size:1.36rem} h3{font-size:1.08rem} h4{font-size:1rem; margin-top:1em}
h1,h2,.serif{font-family:"Fraunces","Cormorant Garamond",Georgia,serif; font-weight:600; letter-spacing:-.01em}
p{margin:.45em 0}
a{color:var(--a)}
button,input,select,textarea{font:inherit; color:inherit}
input,select,textarea{font-size:17px}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.mut{color:var(--ink-soft)} .small{font-size:.93rem}
.print-only{display:none}

/* ── masthead (painted navy by aog-grace.js) ── */
.mast .k{font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700}
.mast .deck{max-width:62ch; font-size:1.06rem}
.mast .hubline{margin:.7em 0 0; font-weight:700}
.mast .hubline a{text-decoration:none}

/* ── sections and cards ── */
section{margin-top:36px}
section > h2{padding-bottom:.35em; border-bottom:2px solid var(--rule); margin-bottom:.55em}
.lede{max-width:64ch}
.card{background:var(--field); border:1px solid var(--rule); border-radius:16px; padding:16px 18px 14px; box-shadow:var(--lift-sm); margin-top:14px}
.card h3{margin-top:0}
.card ul{margin:.4em 0 .2em; padding-left:1.2em}
.card li{margin:.35em 0}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:680px){ .two{grid-template-columns:1fr} }

/* ── buttons and chips ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 18px; border:1.5px solid var(--rule); border-radius:999px; background:var(--field); color:var(--ink); cursor:pointer; font-weight:700; text-decoration:none; touch-action:manipulation}
.btn:hover{border-color:var(--gold)}
.btn.primary{background:var(--navy); border-color:var(--navy); color:var(--on-navy)}
.btn[disabled]{opacity:.55; cursor:default}
.chip{display:inline-flex; align-items:center; min-height:44px; padding:6px 14px; border:1.5px solid var(--rule); border-radius:999px; background:var(--field); color:var(--ink); font-weight:700; cursor:pointer; touch-action:manipulation}
.chip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--on-navy)}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

/* ── voices: the boxes the rooms use ── */
.say{border-left:5px solid var(--a); background:var(--a-wash); border-radius:12px; padding:12px 16px; margin-top:14px; font-family:"Fraunces","Cormorant Garamond",Georgia,serif; font-size:1.12rem; line-height:1.55}
.say .who,.who{display:block; font-family:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; font-weight:800; margin-bottom:.35em}
.say .who{color:var(--a)}
.warn{border-left:5px solid var(--caution); background:var(--caution-wash); border-radius:12px; padding:12px 14px; margin-top:14px}
.warn > b:first-child{display:block; color:var(--caution); margin-bottom:.2em}
.note{border-left:5px solid var(--gold); background:var(--field-2); border-radius:12px; padding:12px 14px; margin-top:14px}
.note > b:first-child{display:block; color:var(--gold-deep); margin-bottom:.2em}
.flag{display:inline-block; font-weight:800; white-space:nowrap; color:var(--caution)}
.flag.gate{color:var(--navy)}

/* ── phase colour helpers ── */
.p1c{color:var(--p1)} .p2c{color:var(--p2)} .p3c{color:var(--p3)} .p4c{color:var(--p4)}

/* ── crisis + lock + foot: on every Adult page ── */
.crisis{border:2px solid var(--caution); border-radius:16px; padding:14px 16px; margin-top:28px; background:var(--field)}
.crisis h3{color:var(--caution); margin-top:0}
.crisis ul{margin:.3em 0 0; padding-left:1.1em}
.crisis li{margin:.3em 0}
.crisis b{white-space:nowrap}
.lock{margin-top:18px; border-left:5px solid var(--lock); background:var(--lock-wash); border-radius:12px; padding:12px 14px; font-size:.96rem}
.lock b{color:var(--lock)}
.foot{margin-top:30px; padding-top:14px; border-top:1px solid var(--rule); color:var(--ink-faint); font-size:.88rem}

/* ── the shared progress bar (the SEL tally, adult weight) ── */
.prog{display:flex; align-items:center; gap:12px; margin:12px 0 0}
.prog .bar{flex:1; height:10px; border-radius:999px; background:var(--field-2); border:1px solid var(--rule-soft); overflow:hidden}
.prog .bar i{display:block; height:100%; width:calc(var(--p,0) * 1%); background:var(--good); border-radius:999px}
.prog .lab{font-weight:700; font-size:.92rem; color:var(--ink-soft); white-space:nowrap}

/* ── practice items: tap an answer, see why (the SEL workbook pattern) ── */
.q{background:var(--field); border:1px solid var(--rule); border-radius:14px; padding:14px 16px; margin-top:12px}
.q .qt{font-family:"Fraunces","Cormorant Garamond",Georgia,serif; font-size:1.12rem; margin:0 0 10px}
.q .opts{display:flex; flex-wrap:wrap; gap:8px}
.q .opt{min-height:46px; padding:8px 16px; border:1.5px solid var(--rule); border-radius:999px; background:var(--field-2); color:var(--ink); font-weight:700; cursor:pointer; touch-action:manipulation}
.q .opt.right{background:var(--good-wash); border-color:var(--good); color:var(--ink)}
.q .opt.wrong{border-style:dashed; color:var(--ink-soft)}
.q .why{margin:10px 0 0; padding:10px 12px; border-radius:10px; background:var(--field-2); font-size:.97rem}
.q .why[hidden]{display:none}
.q .why b{color:var(--good)}

@media print{
  body{background:#fff; color:#111; font-size:11pt}
  .wrap{max-width:none; padding:0}
  .no-print{display:none !important}
  .print-only{display:block !important}
  .card,.warn,.note,.say,.crisis,.lock,.q{break-inside:avoid; page-break-inside:avoid; box-shadow:none}
  a{color:inherit; text-decoration:none}
}

/* ── AOG-ADULT-ROOMMENU-V1: "Jump to another room", under the masthead (aog-adult.js) ── */
.aroom{display:flex; flex-direction:column; gap:4px; margin:14px 0 0}
.aroom label{font-weight:800; font-size:.9rem; color:var(--ink-soft)}
.aroom select{width:100%; min-height:48px; padding:8px 12px; border:1.5px solid var(--rule); border-radius:12px; background:var(--field); color:var(--ink); font-weight:700}
@media (min-width:700px){ .aroom{flex-direction:row; align-items:center; gap:12px} .aroom select{flex:1} }