/* Learning Maturity Workbench v0.3.1. Dubai Health brand tokens (dubaihealth.ae :root), Dubai Font when installed, system fallback. No external loads. */
:root{
  color-scheme:light;
  --dh-primary:#002F70; --dh-primary-700:#001F4D; --dh-blue:#32AFFC; --dh-blue-500:#5BBFFD; --dh-light-blue:#77DEFC;
  --dh-blue-black:#0A233C; --dh-blue-black-500:#3B4F63; --dh-blue-black-900:#9DA7B1;
  --dh-page:#ECF2F5; --dh-white:#FFFFFF; --dh-tint-100:#EBF7FF; --dh-tint-200:#D6EFFE; --dh-tint-300:#ADDFFE;
  --dh-green:#A5FFBC; --dh-green-300:#DBFFE4; --dh-orange:#FABC4C; --dh-orange-100:#FEF8ED; --dh-red:#FF8F8A; --dh-purple:#AC9DFF;
  --bg:var(--dh-page); --surface:var(--dh-white); --surface-2:#F4F8FA; --fg:var(--dh-blue-black); --muted:var(--dh-blue-black-500); --faint:var(--dh-blue-black-900); --line:#D5DEE6; --line-2:#C2CFDA;
  --accent:var(--dh-primary); --accent-ink:#FFFFFF; --accent-soft:var(--dh-tint-100); --accent-soft-2:var(--dh-tint-200); --focus:var(--dh-blue);
  --good:#1E6B3A; --good-bg:var(--dh-green-300); --warn:#7A4F00; --warn-bg:var(--dh-orange-100); --warn-line:var(--dh-orange); --crit:#9B1C1C; --crit-bg:#FFF1F0; --crit-line:var(--dh-red);
  --font:"Dubai","Dubai Regular","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,Menlo,Consolas,monospace;
  --radius:10px; --radius-s:6px; --shadow:0 1px 2px rgba(10,35,60,.06),0 1px 1px rgba(10,35,60,.04);
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15.5px;line-height:1.5}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}

/* Skip link */
.skip{position:absolute;left:-999px;top:8px;background:var(--dh-primary);color:#fff;padding:8px 12px;border-radius:var(--radius-s);z-index:50}
.skip:focus{left:8px}

/* Brand bar: text wordmark only, no logo */
.brandbar{background:var(--dh-primary);color:#fff}
.brandbar .in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between}
.wordmark{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wordmark .org{font-weight:700;letter-spacing:.01em;font-size:1.05rem}
.wordmark .unit{opacity:.85;font-size:.92rem;border-left:1px solid rgba(255,255,255,.35);padding-left:10px}
.brandbar .tool{font-size:.92rem;opacity:.9}
.brandbar .tag{font-size:.78rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:2px 9px;border-radius:999px}
.brandbar .tag.example,.brandbar .tag:not([hidden])#exampleTag{background:var(--dh-orange);color:var(--dh-blue-black);border-color:transparent;font-weight:600}

.wrap{max-width:1180px;margin:0 auto;padding-block:14px 56px;padding-inline:16px}

/* Classification line */
.banner{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--muted);padding:6px 2px 10px}
.banner strong{color:var(--fg)}
.banner.example{color:var(--warn)}

/* Page header */
header.top{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:flex-end;justify-content:space-between;margin:4px 0 14px}
header.top h1{font-weight:700;font-size:1.65rem;line-height:1.2;margin:0;color:var(--dh-primary);letter-spacing:-.01em}
header.top .sub{color:var(--muted);font-size:.9rem;max-width:70ch;margin-top:2px}

/* Record strip: the identity of the record, editable; compact summary elsewhere */
.record{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 14px;margin-bottom:16px}
.record .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 14px}
.record .fields>label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--muted);letter-spacing:.02em;text-transform:uppercase;min-width:0}
.record .fields>label>input,.record .fields>label>select{width:100%;font-size:.95rem;text-transform:none;letter-spacing:0}
.record .fields>label.wide2{grid-column:span 2}
.record .summary{display:none;align-items:center;gap:6px 14px;flex-wrap:wrap;font-size:.92rem;padding-top:2px}
.record .summary .id{font-weight:700;color:var(--dh-primary)}
.record .summary .dim{color:var(--muted)}
.record.compact .fields{display:none}.record.compact .summary{display:flex}
.record .rolefield{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:.9rem;color:var(--fg);padding-bottom:8px;margin-bottom:8px;border-bottom:1px dashed var(--line)}
.record .rolefield label{font-weight:600;color:var(--dh-primary)}

/* Layout */
.grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:820px){.grid{grid-template-columns:minmax(0,1fr)}}
aside.side{position:sticky;top:12px;align-self:start;display:flex;flex-direction:column;gap:12px}
.progress{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow)}
.progress .ttl{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;display:flex;justify-content:space-between}
.progress ol{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:.85rem}
.progress li{display:flex;gap:8px;align-items:center;color:var(--muted)}
.progress li .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);display:inline-grid;place-items:center;font-size:.7rem;flex:none}
.progress li.done{color:var(--fg)}
.progress li.done .dot{background:var(--good);border-color:var(--good);color:#fff}
nav.rail{display:flex;flex-direction:column;gap:1px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:6px;box-shadow:var(--shadow)}
nav.rail small{display:block;font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding:10px 10px 4px}
nav.rail button{font:inherit;text-align:left;background:none;border:0;padding:7px 10px 7px 8px;color:var(--fg);cursor:pointer;border-radius:var(--radius-s);display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:center;line-height:1.3}
nav.rail button:hover{background:var(--surface-2)}
nav.rail button[aria-current="page"]{background:var(--accent-soft);color:var(--dh-primary);font-weight:600}
nav.rail .n{width:22px;height:22px;border-radius:50%;background:var(--surface-2);color:var(--muted);font-size:.74rem;display:grid;place-items:center;font-weight:600}
nav.rail button[aria-current="page"] .n{background:var(--dh-primary);color:#fff}
nav.rail .n.done{background:var(--good);color:#fff}
nav.rail .lbl{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline}
nav.rail .owner{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stage-select{display:none;margin-bottom:12px}
@media (max-width:820px){nav.rail{display:none}.stage-select{display:block}aside.side{position:static}}
.stage-select select{width:100%}
.stage-select label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* Focus */
:focus-visible{outline:2px solid var(--dh-primary);outline-offset:2px;box-shadow:0 0 0 5px rgba(50,175,252,.45)}

/* Panel typography */
section.panel{min-width:0}
h2{font-weight:700;font-size:1.3rem;margin:0 0 6px;color:var(--dh-primary);letter-spacing:-.005em}
h3{font-size:1.02rem;margin:22px 0 8px;font-weight:700;color:var(--dh-primary)}
h4{font-size:.95rem;margin:14px 0 6px;font-weight:700}
p{max-width:72ch;margin:0 0 10px}
.lead{color:var(--muted);margin-bottom:14px;max-width:78ch}
details.help{max-width:78ch;margin:0 0 14px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);font-size:.92rem}
details.help summary{cursor:pointer;padding:7px 12px;color:var(--dh-primary);font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
details.help summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin-left:2px}
details.help[open] summary::before{transform:rotate(45deg)}
details.help summary::-webkit-details-marker{display:none}
details.help .body{padding:0 12px 10px;color:var(--muted)}
details.help .body p{max-width:none}
a{color:var(--dh-primary)}

/* Cards and pills */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-width:0;box-shadow:var(--shadow)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.kpi .v{font-size:1.5rem;font-weight:700;color:var(--dh-primary);line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .k{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.pill{display:inline-block;font-size:.8rem;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);border:1px solid transparent;line-height:1.5}
.pill.good{background:var(--good-bg);color:var(--good)}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.pill.crit{background:var(--crit-bg);color:var(--crit);border-color:var(--crit-line)}
.pill.brand{background:var(--accent-soft);color:var(--dh-primary)}

/* Domains and items */
.domain{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow)}
.domain>header{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--accent-soft);border-bottom:1px solid var(--line)}
.domain>header h3{margin:0;color:var(--dh-primary)}
.level-big{font-size:1.25rem;font-weight:700;color:var(--dh-primary);font-variant-numeric:tabular-nums}
.item{display:grid;grid-template-columns:60px minmax(0,1fr);gap:8px 12px;padding:14px 16px;border-top:1px solid var(--line)}
@media (max-width:480px){.item{grid-template-columns:minmax(0,1fr)}}
.item .num{font-family:var(--mono);color:var(--muted);font-size:.82rem;padding-top:3px}
.item .q{margin:0 0 6px;font-weight:500}
.item .art{font-size:.86rem;color:var(--muted);margin:0 0 8px}
.item.unscored{background:var(--warn-bg)}
.part{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}
.part span{flex:1 1 260px;min-width:0}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--radius-s);overflow:hidden;background:var(--surface)}
.seg button{font:inherit;border:0;background:var(--surface);color:var(--fg);padding:5px 14px;cursor:pointer;min-width:52px}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--dh-primary);color:#fff}
.seg button:disabled{color:var(--faint);cursor:default}
.artwrap{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.artwrap.collapsed .artgrid,.artwrap.collapsed .artmore{display:none}
.artwrap .arttoggle{font:inherit;font-size:.85rem;background:none;border:0;color:var(--dh-primary);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.artgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:8px}
.artgrid label{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--muted)}

/* Forms */
input[type=text],input[type=number],input[type=date],input[type=url],select,textarea{font:inherit;padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--surface);color:var(--fg);max-width:100%;min-width:0;line-height:1.35}
input::placeholder,textarea::placeholder{color:#6B7A8B}
input.wide,textarea.wide,select.wide{width:100%}
textarea{min-height:72px}
label.req::after{content:" *";color:var(--crit)}
.btn{font:inherit;font-weight:600;border:1px solid var(--dh-primary);background:var(--surface);color:var(--dh-primary);padding:7px 14px;border-radius:var(--radius-s);cursor:pointer;line-height:1.35}
.btn:hover{background:var(--accent-soft)}
.btn.primary{background:var(--dh-primary);color:var(--accent-ink)}
.btn.primary:hover{background:var(--dh-primary-700)}
.btn.danger{border-color:var(--crit);color:var(--crit)}
.btn.danger:hover{background:var(--crit-bg)}
.btn.quiet{border-color:var(--line-2);color:var(--fg);font-weight:500}
.btn.small{padding:4px 10px;font-size:.85rem}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row label{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Tables */
table{border-collapse:collapse;width:100%;font-size:.92rem;background:var(--surface)}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:700;color:var(--muted);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;background:var(--surface-2)}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.tablewrap table{font-size:.9rem}
@media (max-width:640px){table.stack thead{display:none}table.stack tr{display:block;border-bottom:1px solid var(--line);padding:6px 8px}table.stack td{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px;border:0;padding:4px 0}table.stack td::before{content:attr(data-l);color:var(--muted);font-size:.8rem}table.stack td.num{text-align:left}}
.note{font-size:.88rem;color:var(--muted)}

/* Messages */
.toast{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--dh-blue-black);color:#fff;padding:9px 14px;border-radius:var(--radius-s);font-size:.9rem;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;max-width:min(90vw,420px);box-shadow:0 6px 18px rgba(10,35,60,.25);pointer-events:none}
.toast.show{opacity:1;transform:none}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:.92rem}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.chart{width:100%;height:auto;display:block}
.anchor-cell{border-top:1px solid var(--line);padding:10px 16px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 12px;font-size:.92rem}
@media (max-width:480px){.anchor-cell{grid-template-columns:minmax(0,1fr)}}
.anchor-cell .lv{font-weight:700;color:var(--dh-primary)}
.action{border-top:1px solid var(--line);padding:8px 16px}
.action label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.action input[type=checkbox]{margin-top:5px}
.warnbox{border:1px solid var(--warn-line);border-left-width:4px;padding:8px 12px;background:var(--warn-bg);border-radius:var(--radius-s);margin:10px 0;max-width:none}
.critbox{border:1px solid var(--crit-line);border-left-width:4px;padding:8px 12px;background:var(--crit-bg);border-radius:var(--radius-s);margin:10px 0;max-width:none}
.okbox{border:1px solid var(--good);border-left-width:4px;padding:8px 12px;background:var(--good-bg);border-radius:var(--radius-s);margin:10px 0;max-width:none}
.confirm{border:1px solid var(--dh-primary);border-left-width:4px;border-radius:var(--radius-s);padding:10px 12px;margin:10px 0;background:var(--accent-soft)}
.empty{border:1px dashed var(--line-2);border-radius:var(--radius);padding:18px;color:var(--muted);background:var(--surface);text-align:center}
.gloss dt{font-weight:700;margin-top:10px;color:var(--dh-primary)}.gloss dd{margin:0 0 4px}.gloss .ar{direction:rtl;text-align:right;color:var(--muted);font-size:.95rem}
pre.copybox{white-space:pre-wrap;word-break:break-word;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:10px;font-family:var(--mono);font-size:.8rem;max-height:320px;overflow:auto}
.hidden{display:none !important}
[hidden]{display:none !important}

/* Utility classes (CSP forbids inline style attributes) */
.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}.mt18{margin-top:18px}.mt22{margin-top:22px}.mtn6{margin-top:-6px}
.mb6{margin-bottom:6px}.mb10{margin-bottom:10px}.mb12{margin-bottom:12px}.my10{margin:10px 0}.my12{margin:12px 0}
.dn{display:none}.block{display:block}.between{justify-content:space-between}.gap6{gap:6px}
.w80{width:80px}.w90{width:90px}.w110{width:110px}.w120{width:120px}.w260{width:260px}.w300{width:300px}.w320{width:320px}
.grow300{flex:1 1 300px}.fixed160{flex:0 0 160px}
.mono-area{font-family:var(--mono);font-size:.8rem}.mh80{min-height:80px}.mh120{min-height:120px}
.roster select{max-width:100%;width:100%}.roster td{min-width:120px}.roster td:nth-child(2){min-width:260px}

/* Print: the decision note and profile print clean */
@media print{
  body{background:#fff;font-size:11pt}
  .brandbar{background:#fff;color:#000;border-bottom:2px solid #000}
  .brandbar .tag,.skip,.stage-select,aside.side,.toast,.btn,.record .fields,#errbox,#confirmbox{display:none !important}
  .record.compact .summary,.record .summary{display:flex}
  .grid{grid-template-columns:minmax(0,1fr)}
  .card,.domain,.tablewrap,.record{box-shadow:none;border-color:#999}
  h2,h3{color:#000}
  pre.copybox{max-height:none}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
td.num,td[data-l="Date"]{white-space:nowrap}

/* Journey scaffold */
.mt0{margin-top:0}
.welcome{border-left:4px solid var(--dh-blue);margin-bottom:14px}
.journey{margin-bottom:6px}
.steps{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line);color:var(--muted)}
.steps li:first-child{border-top:0}
.steps li .dot{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:.78rem;font-weight:700;color:var(--muted);background:var(--surface);margin-top:1px}
.steps li.done{color:var(--fg)}.steps li.done .dot{background:var(--good);border-color:var(--good);color:#fff}
.steps li.current{color:var(--fg);background:var(--accent-soft);margin:0 -16px;padding-inline:16px;border-radius:var(--radius-s)}
.steps li.current .dot{background:var(--dh-primary);border-color:var(--dh-primary);color:#fff}
.steps li.waiting .dot{border-style:dashed}
.steps .t{font-weight:600}.steps .who{font-weight:400;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-left:4px}
.linkbtn{font:inherit;background:none;border:0;padding:0;color:var(--dh-primary);cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-weight:inherit;text-align:left}
.nextbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.nexthint{flex:1 1 240px;text-align:center;font-size:.9rem;color:var(--muted)}
@media print{.nextbar,.welcome{display:none}}

.win{background:var(--accent-soft);color:var(--dh-primary);padding:0 6px;border-radius:4px;font-weight:600;white-space:nowrap}
input.ro{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
#refWarn.warn{color:var(--crit);font-weight:600}

/* ---------- Phone layout (≤820px) ---------- */
@media (max-width:820px){
  body{font-size:16px}
  input[type=text],input[type=number],input[type=date],input[type=url],select,textarea{font-size:16px;min-height:44px}
  .btn,.seg button,nav.rail button,.linkbtn,.arttoggle,details.help summary{min-height:44px}
  .btn{padding:10px 14px}
  .btn.small{min-height:40px;padding:8px 12px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  .brandbar .in{padding:8px 12px;gap:4px 10px}
  .wordmark .org{font-size:1rem}.wordmark .unit{display:none}
  .brandbar .tool{display:none}
  .brandbar .tag{font-size:.74rem;padding:1px 8px}
  .wrap{padding-inline:12px;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .banner{font-size:.8rem;padding:4px 0 6px;gap:2px 10px}
  header.top{margin:2px 0 10px}
  header.top h1{font-size:1.25rem}
  header.top .sub{display:none}
  .record{padding:10px 12px;margin-bottom:12px}
  .record .rolefield{font-size:.85rem;padding-bottom:6px;margin-bottom:6px}
  .record .rolefield .note{display:none}
  .record .rolefield select{flex:1 1 100%}
  .record .fields{grid-template-columns:1fr 1fr;gap:8px 10px}
  .record .fields>label.wide2{grid-column:1/-1}
  .record .summary{font-size:.88rem}
  .record .summary .id{font-size:1rem}
  .progress{padding:8px 12px}
  .progress ol{grid-template-columns:1fr 1fr;font-size:.8rem}
  .progress li .dot{width:14px;height:14px;font-size:.6rem}
  #refWarn{font-size:.8rem}
  /* bottom stage bar */
  .stage-select{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:8px;align-items:center;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(10,35,60,.12);margin:0}
  .stage-select label{display:none}
  .stage-select select{flex:1 1 auto;min-width:0;font-weight:600}
  .stage-select .btn{flex:0 0 48px;width:48px;padding:0;font-size:1.4rem;line-height:1}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px));left:12px;right:12px;max-width:none;transform:none}
  .toast.show{transform:none}
  /* journey */
  .steps li{padding:10px 0}
  .steps li.current{margin:0 -12px;padding-inline:12px}
  .welcome .row .btn{flex:1 1 100%}
  /* Tier A */
  h2{font-size:1.15rem}
  .domain>header{padding:10px 12px}
  .level-big{font-size:1.05rem}
  .item{padding:12px;grid-template-columns:minmax(0,1fr);gap:4px}
  .item .num{display:flex;gap:8px;align-items:center;padding:0}
  .item .q{font-size:.98rem}
  .part{flex-direction:column;align-items:stretch;gap:6px;margin:10px 0}
  .part span{flex:none}
  .seg{display:flex;width:100%}
  .seg button{flex:1 1 0;padding:10px}
  .artgrid{grid-template-columns:1fr}
  .artwrap .arttoggle{display:block;width:100%;text-align:left;padding:8px 0}
  .win{white-space:normal}
  /* nextbar */
  .nextbar{flex-direction:column;align-items:stretch}
  .nextbar .btn{width:100%}
  .nexthint{text-align:left}
  /* tables: stacked at this width too */
  table.stack thead{display:none}
  table.stack tr{display:block;border-bottom:1px solid var(--line);padding:8px 10px}
  table.stack td{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px;border:0;padding:4px 0}
  table.stack td::before{content:attr(data-l);color:var(--muted);font-size:.78rem}
  table.stack td.num{text-align:left;white-space:normal}
  table.stack td:not([data-l]){grid-template-columns:1fr}
  .roster td{min-width:0}.roster td:nth-child(2){min-width:0}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi .v{font-size:1.25rem}
  .cards{grid-template-columns:1fr}
  .row>.btn,.row>label.btn{flex:1 1 calc(50% - 10px)}
  .row .w80,.row .w90,.row .w110,.row .w120{width:auto;flex:1 1 90px}
  .confirm .row .btn{flex:1 1 100%}
  pre.copybox{font-size:.75rem}
}
@media (max-width:820px) and (hover:none){ :focus-visible{box-shadow:none} }
@media (max-width:820px){.record .fields>label>input,.record .fields>label>select,.stage-select select,.seg button,.btn{font-size:16px}}

.phonebar{display:none}
@media (max-width:820px){
  .phonebar{display:grid;grid-template-columns:auto minmax(0,1fr) 20px;gap:4px 10px;align-items:center;width:100%;font:inherit;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:10px;cursor:pointer;box-shadow:var(--shadow)}
  .phonebar .pb-id{font-weight:700;color:var(--dh-primary)}
  .phonebar .pb-meta{font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .phonebar .pb-caret{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);justify-self:center}
  body.top-open .phonebar .pb-caret{transform:rotate(-135deg)}
  #classification,header.top,.record,.progress{display:none}
  body.top-open #classification,body.top-open header.top,body.top-open .record,body.top-open .progress{display:block}
  body.top-open .record.compact .summary{display:flex}
  #classification{display:none}
  body.top-open #classification{display:flex}
  .brandbar .tag:not(#exampleTag){display:none}
}
@media (max-width:820px){.row>.btn,.row>label.btn{flex:1 1 100%}.row>.btn.small{flex:1 1 calc(50% - 10px)}.banner>span:first-child{display:block}}