/* On My Terms: calm and clean. Four colour sets, each with light and dark.
   Sage and sand is the default (no data-palette). Others: data-palette="navy" | "dusk" | "clay" on <html>.
   All are soft off-white or soft dark backgrounds, muted colours, no red, and text that meets WCAG AA. */
:root{
  --bg:#E6E4DA; --card:#FDFCF9; --ink:#25302A; --muted:#56605A; --line:#D3CEBF; --soft:#E9EDE5;
  --brand:#56705F; --brand-ink:#FFFFFF; --accent:#D8BC8E; --accent-ink:#3A2E1A; --on:#6E9179; --off:#DCD9CE; --focus:#3B6FB6;
  --r:14px; --shadow:0 1px 2px rgba(37,48,42,.05),0 2px 8px rgba(37,48,42,.04);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#131614; --card:#232A24; --ink:#E8ECE7; --muted:#A6B0A7; --line:#3A453B; --soft:#2A322B;
  --brand:#A9C7B2; --brand-ink:#161A17; --accent:#D8BC8E; --accent-ink:#2B2214; --on:#8DBB9C; --off:#3A433B; --focus:#8AB4FF;
  --shadow:none; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#131614; --card:#232A24; --ink:#E8ECE7; --muted:#A6B0A7; --line:#3A453B; --soft:#2A322B;
  --brand:#A9C7B2; --brand-ink:#161A17; --accent:#D8BC8E; --accent-ink:#2B2214; --on:#8DBB9C; --off:#3A433B; --focus:#8AB4FF;
  --shadow:none; color-scheme:dark;
}
/* Navy and gold */
:root[data-palette="navy"]{--bg:#E9E7E1; --card:#FFFFFF; --ink:#1E2A33; --muted:#56616C; --line:#D5D0C6; --soft:#EEF2F5; --brand:#2E4057; --brand-ink:#FFFFFF; --accent:#E8B04B; --accent-ink:#1E2A33; --on:#3E7C6B; --off:#DCD8D1}
@media (prefers-color-scheme:dark){:root[data-palette="navy"]:not([data-theme="light"]){--bg:#12161A; --card:#222930; --ink:#E9ECEF; --muted:#A3ADB7; --line:#3A444F; --soft:#283039; --brand:#9DB7D3; --brand-ink:#15191E; --accent:#E8B04B; --accent-ink:#1E2A33; --on:#6FBFA8; --off:#38414B}}
:root[data-palette="navy"][data-theme="dark"]{--bg:#12161A; --card:#222930; --ink:#E9ECEF; --muted:#A3ADB7; --line:#3A444F; --soft:#283039; --brand:#9DB7D3; --brand-ink:#15191E; --accent:#E8B04B; --accent-ink:#1E2A33; --on:#6FBFA8; --off:#38414B}
/* Dusk and lavender */
:root[data-palette="dusk"]{--bg:#E4E4EE; --card:#FDFDFF; --ink:#262A40; --muted:#575B76; --line:#CFCEDF; --soft:#ECEBF4; --brand:#4A5280; --brand-ink:#FFFFFF; --accent:#BDB3DE; --accent-ink:#2A2450; --on:#6D79B0; --off:#DCDBE7}
@media (prefers-color-scheme:dark){:root[data-palette="dusk"]:not([data-theme="light"]){--bg:#141522; --card:#23253A; --ink:#E9E9F2; --muted:#A9ABC4; --line:#3B3F58; --soft:#2A2D46; --brand:#B4BBE6; --brand-ink:#171826; --accent:#BDB3DE; --accent-ink:#2A2450; --on:#9BA6DA; --off:#3A3D55}}
:root[data-palette="dusk"][data-theme="dark"]{--bg:#141522; --card:#23253A; --ink:#E9E9F2; --muted:#A9ABC4; --line:#3B3F58; --soft:#2A2D46; --brand:#B4BBE6; --brand-ink:#171826; --accent:#BDB3DE; --accent-ink:#2A2450; --on:#9BA6DA; --off:#3A3D55}
/* Oat and clay */
:root[data-palette="clay"]{--bg:#EAE1D3; --card:#FEFBF7; --ink:#33291F; --muted:#665850; --line:#DACCB8; --soft:#F0E8DC; --brand:#8A5A44; --brand-ink:#FFFFFF; --accent:#E0B48F; --accent-ink:#45291A; --on:#7F906F; --off:#E4D9CA}
@media (prefers-color-scheme:dark){:root[data-palette="clay"]:not([data-theme="light"]){--bg:#181411; --card:#2A231E; --ink:#F0E9E2; --muted:#B8A99C; --line:#4A3E35; --soft:#322A23; --brand:#E0B49A; --brand-ink:#1C1714; --accent:#E0B48F; --accent-ink:#45291A; --on:#A9BB98; --off:#45392F}}
:root[data-palette="clay"][data-theme="dark"]{--bg:#181411; --card:#2A231E; --ink:#F0E9E2; --muted:#B8A99C; --line:#4A3E35; --soft:#322A23; --brand:#E0B49A; --brand-ink:#1C1714; --accent:#E0B48F; --accent-ink:#45291A; --on:#A9BB98; --off:#45392F}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:16px/1.5 Lexend,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-text-size-adjust:100%}
.wrap{max-width:760px;margin:0 auto;padding:0 16px calc(96px + env(safe-area-inset-bottom))}
h1,h2,h3{line-height:1.25;margin:0 0 8px}
h1{font:700 26px/1.1 Fraunces,Georgia,serif;letter-spacing:-.01em}
h2{font-size:19px;font-weight:600}
h3{font-size:15px;font-weight:600;color:var(--muted);text-transform:none}
p{margin:0 0 10px}
a{color:var(--brand)}
.muted{color:var(--muted)} .small{font-size:14px} .center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
svg{width:20px;height:20px;flex-shrink:0;vertical-align:-4px}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0 14px}
.top p{margin:2px 0 0;color:var(--muted);font-size:14px}
.top.welcome{flex-direction:column;align-items:flex-start;padding:36px 0 18px}
.top.welcome h1{font-size:34px;color:var(--brand)}
.top.welcome p{font-size:16px}
.hbtns{display:flex;gap:8px}
.hbtn{font:inherit;font-size:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 14px;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:40px}

/* tabs: bottom bar on phones, top row on wider screens */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(5,1fr);background:var(--card);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tab{font:inherit;font-size:12px;background:none;border:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:10px;cursor:pointer;min-height:52px;text-align:center;line-height:1.2}
.tab[aria-current="page"]{color:var(--brand);background:var(--soft);font-weight:600}
@media (min-width:720px){
  .wrap{padding-bottom:48px}
  .tabs{position:sticky;top:0;bottom:auto;border:1px solid var(--line);border-radius:var(--r);margin:0 0 16px;padding:6px;box-shadow:var(--shadow)}
  .tab{flex-direction:row;justify-content:center;font-size:14px;gap:8px}
}

/* blocks */
.block{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 12px;box-shadow:var(--shadow)}
.block.soft{background:var(--soft)}
.note{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin:0 0 12px;font-size:14px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}
.stack{display:grid;gap:10px;margin-top:10px}
fieldset{border:0;padding:0;margin:0 0 10px}
legend{font-weight:600;font-size:15px;margin-bottom:4px}

/* buttons and inputs */
.btn{font:inherit;font-weight:600;font-size:15px;background:var(--brand);color:var(--brand-ink);border:1px solid var(--brand);border-radius:12px;padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--line)}
.btn.small{font-size:14px;padding:7px 12px;min-height:38px}
.btn:disabled{opacity:.5;cursor:default}
.gbtn{width:100%;margin-bottom:6px}
.linkbtn{font:inherit;background:none;border:0;color:var(--brand);text-decoration:underline;cursor:pointer;padding:4px 0}
.iconbtn{background:none;border:0;color:var(--muted);cursor:pointer;padding:8px;border-radius:10px;min-width:44px;min-height:44px}
label{display:grid;gap:5px;font-weight:600;font-size:15px}
.hint{font-weight:400;color:var(--muted);font-size:13px}
input,select,textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;width:100%}
textarea{resize:vertical}
.toggle{display:flex;align-items:flex-start;gap:10px;font-weight:400;padding:8px 0;cursor:pointer}
.toggle input{width:22px;height:22px;min-height:0;margin:1px 0 0;flex-shrink:0;accent-color:var(--brand)}

/* search and area chips */
.searchrow{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:0 10px;color:var(--muted)}
.searchrow input{border:0;padding-left:0;background:transparent}
.chips{display:flex;gap:6px;overflow-x:auto;margin-top:10px;padding-bottom:2px;scrollbar-width:none}
.fchip{font:inherit;font-size:14px;white-space:nowrap;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer;min-height:38px}
.fchip[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.chip{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--muted);margin-left:6px;vertical-align:1px}
.chip.work{background:var(--accent);color:var(--accent-ink)}

/* skill list */
.area h2{color:var(--brand)}
.group{margin-top:12px}
.slist{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.srow{font:inherit;text-align:left;background:var(--card);color:var(--ink);border:0;border-bottom:1px solid var(--line);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;min-height:52px;width:100%}
.srow:last-child{border-bottom:0}
.srow:hover{background:var(--soft)}
.srow.static{cursor:default}.srow.static:hover{background:var(--card)}
.sname{flex:1;min-width:0}
.sside{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.ltxt{font-size:12px;color:var(--muted)}
@media (max-width:420px){.ltxt{display:none}}
.lbar{display:inline-flex;gap:3px}
.lbar i{width:14px;height:8px;border-radius:3px;background:var(--off)}
.lbar i.on{background:var(--on)}
.lbar.big i{width:22px;height:10px}

/* skill sheet */
.modal{position:fixed;inset:0;z-index:20;background:rgba(20,26,32,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:620px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
@media (min-width:720px){.modal{align-items:center}.sheet{border-radius:20px}}
.sheet h2{font-size:21px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border-radius:12px;padding:4px;margin:12px 0}
.seg button{font:inherit;font-size:14px;border:0;background:none;color:var(--muted);border-radius:9px;padding:8px;cursor:pointer;min-height:40px}
.seg button[aria-selected="true"]{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.lvlbtns{display:grid;gap:8px;margin:8px 0}
.lvl{font:inherit;text-align:left;display:flex;align-items:center;gap:12px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;min-height:52px}
.lvl.sel{border:2px solid var(--on);background:var(--soft);font-weight:600}
details.more{border-top:1px solid var(--line);padding:10px 0}
details.more summary{cursor:pointer;font-weight:600;color:var(--brand);min-height:32px}
.edrow{border-top:1px solid var(--line);padding-top:12px}

/* working on */
.wcard h3{color:var(--ink);font-size:17px;margin:0}
.empty{text-align:center}

/* progress */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.stats div{background:var(--soft);border-radius:12px;padding:12px;display:grid;gap:2px}
.stats b{font:700 26px/1 Fraunces,Georgia,serif;color:var(--brand)}
.stats span{font-size:13px;color:var(--muted)}
@media (max-width:420px){.stats{grid-template-columns:1fr}}
.tl{list-style:none;margin:0 0 14px;padding:0;border-left:2px solid var(--line)}
.tl li{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:8px 0 8px 14px;position:relative}
.tl li::before{content:"";position:absolute;left:-6px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--off)}
.tl li.up::before{background:var(--on)}
.tday{font-size:13px;color:var(--muted)}
.tnote{display:block;font-size:14px;color:var(--muted);margin-top:2px}

/* who's here */
.who{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.whobtn{font:inherit;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:18px 10px;display:grid;justify-items:center;gap:8px;cursor:pointer}
.av{width:56px;height:56px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font:700 24px Fraunces,Georgia,serif}

/* sign-in extras */
.feat{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.feat span{font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px}

/* my view page */
.mvpage table{width:100%;border-collapse:collapse;margin:6px 0 14px}
.mvpage th,.mvpage td{border:1px solid var(--line);padding:8px 10px;text-align:left;font-size:15px;vertical-align:top}
.mvpage th{background:var(--soft);font-weight:600}
.mvpage h3{color:var(--brand);margin-top:16px}
.words{background:var(--soft);border-radius:10px;padding:10px 12px}

.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:15px;max-width:calc(100% - 32px);box-shadow:0 4px 16px rgba(0,0,0,.2)}
@media (min-width:720px){.toast{bottom:24px}}

@media print{
  body{background:#fff;color:#000}
  .tabs,.top,.noprint,.toast,.note{display:none!important}
  .block{border:0;box-shadow:none;padding:0}
  .mvpage th,.mvpage td{border-color:#999}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
#onboardPerson,#signinAgree,#signinEmail,#signinCode{display:grid;gap:10px;justify-items:start}
#onboardPerson>*,#signinAgree>*,#signinEmail>*,#signinCode>*{margin:0}
#onboardPerson label,#onboardPerson .slist,#signinAgree label,#signinEmail label,#signinCode label,#signinEmail .gbtn{justify-self:stretch}
/* Working on toggle (11 Nov) */
.srowwrap{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.srowwrap:last-child{border-bottom:0}
.srowwrap .srow{border-bottom:0;flex:1;min-width:0}
.wtog{flex-shrink:0;width:52px;border:0;border-left:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.wtog svg{width:20px;height:20px}
.wtog:hover{background:var(--soft);color:var(--ink)}
.wtog.on{background:var(--accent);color:var(--accent-ink)}
.wrow{border-bottom:1px solid var(--line)}
.wrow:last-child{border-bottom:0}
.wrow .srow{border-bottom:0}
.wacts{display:flex;gap:8px;padding:0 14px 12px}
.wlast{display:block;margin-top:2px}
.btn.small{padding:6px 12px;font-size:14px;min-height:36px}
.btn.sure{border-color:var(--ink);color:var(--ink);font-weight:700}
/* Had a go, Then and now, story, help boxes (12 Nov) */
.goask{padding:4px 14px 14px}
.goask p{margin:0 0 8px}
.gobtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.gobtn{font:inherit;font-size:15px;text-align:left;display:flex;align-items:center;gap:10px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;min-height:52px}
.gobtn:hover{background:var(--soft);border-color:var(--on)}
.wrapchips{flex-wrap:wrap;overflow:visible}
.tn{list-style:none;padding:0;margin:8px 0 0}
.tn li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}
.tn li:last-child{border-bottom:0}
.tn li>span{color:var(--muted)}
.tn li>span b{color:var(--ink)}
.story{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.story h3{font-size:15px;margin:0 0 6px}
.story p{margin:0 0 4px;line-height:1.7}
.story .step{white-space:nowrap}
.tip{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:12px 14px;margin:10px 0;line-height:1.55}
.tip .btn{flex-shrink:0}
@media (max-width:520px){.tip{flex-direction:column}.gobtns{grid-template-columns:1fr}}
@media print{.mvpage .tn li{padding:4px 0}}
.ready{margin:0 14px 10px;padding:12px 14px;border-radius:12px;background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--on)}
.ready p{margin:0 0 8px;line-height:1.5}

/* Colours choice in Settings */
.palopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0}
.palopt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:var(--card);min-height:52px}
.palopt:has(input:checked){border:2px solid var(--on);background:var(--soft)}
.palopt input{position:absolute;opacity:0;pointer-events:none}
.palopt:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.dots{display:inline-flex}.dots i{width:16px;height:16px;border-radius:50%;margin-right:-4px;border:2px solid var(--card)}
/* Tick and move up (12 Nov) */
.tickbtn{flex:1;justify-content:center;display:inline-flex;align-items:center;gap:8px;min-height:48px}
.tickbtn svg{width:20px;height:20px}
.wacts{align-items:center}
.done{display:flex;align-items:center;gap:12px;margin:0 14px 12px;padding:12px 14px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.done .linkbtn{margin-left:auto}
.dtick{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:flex;align-items:center;justify-content:center}
.dtick svg{width:18px;height:18px}
.done.flash{animation:donepop .5s ease-out}
@keyframes donepop{0%{transform:scale(.96);background:var(--accent)}100%{transform:scale(1);background:var(--soft)}}
@media (prefers-reduced-motion:reduce){.done.flash{animation:none}}
.topstep{margin:0 14px 12px}
.lvtiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lvtile{background:var(--soft);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px}
.lvtile b{font-size:24px;line-height:1.1}
.lvtile span:last-child{color:var(--muted);font-size:14px}
/* Own groups (12 Nov) */
.grpRename{flex-wrap:wrap}
.grpname{flex:1;min-width:160px;display:flex;flex-direction:column;gap:2px}
.grpname input{max-width:100%}
/* Working on: how to add and remove (12 Nov) */
.howto{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0}
.howto p{display:flex;gap:10px;align-items:flex-start;margin:6px 0;line-height:1.5}
.howic{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--brand)}
.howic svg{width:14px;height:14px}
.howto .linkbtn{font-weight:600}
.howbtn{flex-shrink:0;width:36px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--muted);display:flex;align-items:center;justify-content:center}
.howbtn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.howbtn svg{width:16px;height:16px}
.howto p{align-items:center}
/* Working on: one card per skill (12 Nov) */
.wlist{display:grid;gap:16px;margin:16px 0}
.wcard2{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--brand);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.wcard2.isdone{border-left-color:var(--on)}
.wcard2 .srow{padding:16px 16px 10px;border-bottom:0;background:transparent}
.wcard2 .srow:hover{background:var(--soft)}
.wname{display:block;font-size:19px;font-weight:600;line-height:1.3}
.wcard2 .wacts,.wcard2 .goask{padding-bottom:16px}
.wcard2 .done{margin-bottom:16px}
.tipopen{font:inherit;font-size:14px;display:inline-flex;align-items:center;gap:6px;margin:6px 0;padding:6px 12px;min-height:36px;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:var(--ink);cursor:pointer}
.tipopen svg{width:16px;height:16px;color:var(--brand)}
.tipopen:hover{border-color:var(--on)}
.mvlabel{font-weight:600;color:var(--muted);margin:18px 4px 6px;font-size:14px;text-transform:none}
/* Report preview (12 Nov) */
.mvwrap{background:var(--soft);border:2px dashed var(--line);border-radius:18px;padding:12px;margin:8px 0 16px}
.mvwrap .mvlabel{margin:2px 4px 10px;color:var(--ink)}
.mvwrap .mvpage{margin:0;box-shadow:0 2px 10px rgba(0,0,0,.08)}
@media print{.mvwrap{background:none;border:0;padding:0;margin:0}}
.editchip{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:500;color:var(--muted);background:var(--card);vertical-align:3px;cursor:pointer}
.editchip svg{width:12px;height:12px}
.editchip:hover{color:var(--ink);border-color:var(--on)}
/* How to use guide (13 Nov) */
.gsec{border:1px solid var(--line);border-radius:12px;margin:10px 0;background:var(--card)}
.gsec summary{cursor:pointer;padding:14px 16px;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.gsec summary::after{content:"+";font-size:22px;color:var(--brand);line-height:1}
.gsec[open] summary::after{content:"−"}
.gsec summary::-webkit-details-marker{display:none}
.gbody{padding:0 16px 14px;line-height:1.6}
.gbody li{margin:6px 0}
.glevels{list-style:none;padding:0}
.glevels li{display:flex;align-items:center;gap:10px}
.howbtn.inl{display:inline-flex;vertical-align:middle;width:30px;height:24px;margin-right:4px}
.hbtn svg{width:20px;height:20px}
.wacts.end{justify-content:flex-end;padding-top:0}