/* what-to-say.css: the Toolkit's What to Say area (Area Rail, Ryan 2026-11-10). BUILT by patient-scripts/build_wts_module.py.
   Scoped to .wt; uses the portal's tokens (--text, --muted, --surface, --elev, --border) so dark mode follows Settings.
   Area colors are fixed brand fills with maroon (or cream) text, AA in both themes. Layout follows the space it gets
   (container queries), so it works beside the portal menu on a computer and full width on a phone. */
.wt{--wtAcc:#CE3D1C;--wtSay:#602D36;--wtSayInk:#fff;--wtWarn:#FFF1C9;--wtWarnLine:#C99A1E;--wtWarnInk:#4D3A08;container-type:inline-size;padding-bottom:40px}
html.u2[data-theme="dark"] .wt{--wtAcc:#FF8A6B;--wtSay:#FAF8EE;--wtSayInk:#231215;--wtWarn:#3D3217;--wtWarnLine:#B08A2E;--wtWarnInk:#FBE7B0}
.wt *{box-sizing:border-box}
.wtIc{flex:none;display:inline-block;vertical-align:middle}
.wt :focus-visible{outline:3px solid var(--wtAcc);outline-offset:2px;border-radius:10px}
.wt mark{background:#E1E782;color:#602D36;border-radius:4px;padding:0 2px}
.wt [hidden]{display:none!important}
.wtTop{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 24px;margin:4px 0 18px}
.wtTop>div:first-child{flex:1 1 320px}
.wtKick{margin:0 0 2px;font:700 12px Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wtTop h1{margin:0 0 4px;font:800 clamp(30px,4vw,40px)/1.02 'EC',Poppins,serif;color:var(--text)}
.wtLead{margin:0;color:var(--muted);max-width:560px}
.wtSearch{position:relative;flex:1 1 300px;max-width:520px}
.wtSearch>.wtIc{position:absolute;left:15px;top:14px;color:var(--muted)}
.wtSearch input{width:100%;min-height:48px;border-radius:16px;border:2px solid var(--border);background:var(--elev);color:var(--text);padding:0 48px 0 46px;font:400 16px Poppins,sans-serif;outline:none}
.wtSearch input:focus{border-color:var(--text)}
.wtClr{position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;background:transparent;border-radius:12px;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.wtShell{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start}
.wtShell>*{min-width:0;max-width:100%}
.wtRail{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wtRail h2{grid-column:1/-1;margin:0 4px 2px;font:700 11.5px Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wtArea{all:unset;box-sizing:border-box;cursor:pointer;border-radius:16px;padding:8px 10px 8px 12px;min-height:48px;display:flex;align-items:center;gap:8px;transition:opacity .15s,transform .12s}
.wtArea .nm{flex:1;font:800 15px/1.1 'EC',Poppins,serif}
.wtArea .ct{font:700 12.5px Poppins,sans-serif;background:rgba(255,255,255,.6);color:#602D36;border-radius:99px;padding:3px 9px;min-width:28px;text-align:center}
.wtArea[aria-pressed=true]{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--text)}
.wtArea.zero{opacity:.32}
.wtArea:focus-visible{outline:3px solid var(--wtAcc);outline-offset:3px}
.wtH{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:800 22px/1.1 'EC',Poppins,serif;color:var(--text)}
.wtH .sw{width:16px;height:16px;border-radius:50%;flex:none}
.wtList{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.wtList button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:block;padding:12px 14px;border-radius:16px;border:1.5px solid var(--border);background:var(--surface);min-height:44px}
.wtList button:hover{border-color:var(--text)}
.wtList button[aria-current=true]{border-color:var(--text);background:var(--elev);box-shadow:inset 4px 0 0 var(--wtAcc)}
.wtList button:focus-visible{outline:3px solid var(--wtAcc)}
.wtList b{display:block;font-weight:600;color:var(--text);font-size:15.5px;line-height:1.4}
.wtList small{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:4px}
.wtList small i{width:9px;height:9px;border-radius:50%}
.wtDet{background:var(--surface);border:1.5px solid var(--border);border-radius:24px;padding:18px 16px}
.wtBack{margin:0 0 14px}
.wtSit{margin:0 0 8px;font:700 12px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wtPq{margin:0 0 14px;font:800 clamp(22px,3cqi,30px)/1.15 'EC',Poppins,serif;color:var(--wtAcc)}
.wtSay{background:var(--wtSay);color:var(--wtSayInk);border-radius:20px;padding:16px 18px}
.wtLb{display:block;margin-bottom:4px;font:700 11.5px Poppins,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.wtSay p{margin:0;font-size:19px;line-height:1.55;font-weight:500;max-width:68ch}
.wtBar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.wtBtn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font:600 15px/1 Poppins,sans-serif;text-decoration:none;cursor:pointer}
.wtBtn:hover{border-color:var(--text)}
.wtBtn.pri{background:var(--wtAcc);border-color:var(--wtAcc);color:#fff}
html.u2[data-theme="dark"] .wtBtn.pri{color:#231215}
.wtTwo{display:grid;gap:12px;grid-template-columns:1fr}
.wtTwo div{border-radius:16px;padding:14px;font-size:15px;color:#2D2326}
.wtTwo .w{background:#F3F6D2}.wtTwo .d{background:#FCE9F2}
.wtTwo b{display:flex;gap:6px;align-items:center;margin-bottom:4px;font:700 11.5px Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#602D36}
.wtTwo s{text-decoration-color:rgba(206,61,28,.7)}
.wtSrc{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.wtNav{display:flex;justify-content:space-between;gap:8px;margin-top:16px}
.wtSafety{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;background:var(--wtWarn);border:1.5px solid var(--wtWarnLine);color:var(--wtWarnInk);border-radius:14px;padding:10px 12px;font-size:14px;line-height:1.45}
.wtEmpty{border:2px dashed var(--border);border-radius:20px;padding:22px;text-align:center;color:var(--muted);margin-bottom:16px}
.wtEmpty h3{margin:0 0 6px;color:var(--text);font-size:19px}
.wtClosed{grid-column:1/-1;max-width:560px;margin:10px auto}
.wtLoad{grid-column:1/-1;color:var(--muted);padding:30px 0;text-align:center}
.wtAi{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0}
.wtTip{margin-top:14px}
.wt kbd{font:600 12px Poppins,sans-serif;background:var(--elev);border:1px solid var(--border);border-radius:6px;padding:1px 6px}
.wtToast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;background:#602D36;color:#fff;padding:12px 18px;border-radius:14px;
  font:600 15px Poppins,sans-serif;display:flex;gap:8px;align-items:center;transition:opacity .2s,transform .2s;z-index:200;pointer-events:none;box-shadow:0 10px 30px rgba(96,45,54,.25)}
.wtToast.on{opacity:1;transform:translate(-50%,0)}
@container (min-width:640px){
  .wtShell{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
  .wtRail{grid-column:1/-1;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .wtList{max-height:calc(100vh - var(--hdrH,64px) - 120px);overflow:auto;padding:2px 4px 2px 2px}
  .wtDet{position:sticky;top:calc(var(--hdrH,64px) + 12px);padding:22px}
  .wtTwo{grid-template-columns:1fr 1fr}
}
@container (min-width:1040px){
  .wtShell{grid-template-columns:230px minmax(0,330px) minmax(0,1fr)}
  .wtRail{grid-column:auto;display:flex;flex-direction:column;gap:6px;position:sticky;top:calc(var(--hdrH,64px) + 12px)}
  .wtArea{min-height:46px}.wtArea .nm{font-size:16px}.wtArea:hover{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){.wt *,.wtToast{transition:none!important}}