/* ============================================================================
   eabsurvey - kit/chrome.css : the shell, the primitives. Same bones as eabassets
   (navy bar, white submenu, cards, buttons, forms, modal, toast, login, landing).
   Every colour is a token from tokens.css.
   ==========================================================================*/

/* ---------------------------------------------------------- 1. chrome rows */
.appbar{position:sticky;top:0;z-index:50}
.topbar{display:flex;align-items:center;gap:10px;height:calc(var(--bar-h) + var(--sat));padding:var(--sat) var(--gutter) 0;box-sizing:border-box;background:var(--bar-grad);color:var(--bar-txt)}
.topbar .spacer{flex:1 1 auto;min-width:8px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;padding:4px 2px;border-radius:var(--radius-ctl);text-decoration:none;color:#fff}
.brand img{height:34px;width:auto;display:block}
.brand .word{font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:#fff;padding-left:12px;border-left:1px solid var(--bar-line);line-height:1}
.brand:hover{text-decoration:none;opacity:.9}
.topbar .tb{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px;border-radius:var(--radius-ctl);color:var(--bar-txt);background:transparent;border:0;cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:12.5px;text-decoration:none;white-space:nowrap}
.topbar .tb:hover{background:var(--bar-hover);text-decoration:none}
.topbar .tb .ic{opacity:.9}
.topbar .who{display:flex;align-items:center;gap:8px}
.topbar .avatar{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid var(--bar-line);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:11.5px;color:#fff}

.subbar{display:flex;align-items:stretch;gap:0;height:var(--sub-h);padding:0 var(--gutter);background:var(--sub-bg);border-bottom:1px solid var(--sub-line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.subbar::-webkit-scrollbar{display:none}
.subbar .tab{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:0 16px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--sub-txt);text-decoration:none;white-space:nowrap;cursor:pointer;font-family:var(--font-head);font-size:12.5px;font-weight:600;letter-spacing:.01em;transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.subbar .tab:hover{color:var(--heading);text-decoration:none}
.subbar .tab.on{color:var(--sub-on);border-bottom-color:var(--sub-on);font-weight:700}
.subbar .tab .ic{opacity:.75}
.subbar .subend{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto;padding-left:12px}

/* --------------------------------------------------------------- 2. popover */
.pop{position:absolute;z-index:120;min-width:200px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-md);padding:6px;animation:fadeIn .12s var(--ease) both}
.pop .item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:var(--radius-ctl);background:none;color:var(--txt);font-family:var(--font);font-size:12.5px;text-align:left;cursor:pointer;text-decoration:none}
.pop .item:hover{background:var(--bg2);text-decoration:none}
.pop .item.danger{color:var(--red)}
.pop .sep{height:1px;background:var(--line2);margin:5px 4px}
.pop .phead{padding:6px 10px 4px;font-size:11px;color:var(--faint);font-family:var(--font-head);font-weight:700;letter-spacing:.04em}

/* ------------------------------------------------------------- 3. page frame */
.page{display:block;width:100%;padding:20px var(--gutter) 56px;max-width:1280px;margin:0 auto}
.page.narrow{max-width:860px}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rowend{display:flex;align-items:center;gap:8px;margin-left:auto}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.cols2,.cols3{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow);overflow:hidden}
.card > .cardhead{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.card > .cardhead h3{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.card > .cardhead .rowend{margin-left:auto}
.card > .cardbody{padding:16px}
.card.flush > .cardbody{padding:0}

.page-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.page-title h1{font-size:23px;font-weight:600;letter-spacing:-.005em;line-height:1.2;display:flex;align-items:center;gap:10px;min-width:0}
.page-title .sub{color:var(--muted);font-size:12.5px}
.page-title .acts{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.crumbs{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:8px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs .ic{display:flex;color:var(--faint)}

/* ---------------------------------------------------------------- 4. buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border-radius:var(--radius-ctl);border:1px solid var(--line);background:var(--panel);color:var(--txt);font-family:var(--font-head);font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:0 1px 1px rgba(18,40,76,.03);transition:all var(--t) var(--ease);text-decoration:none}
.btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);text-decoration:none}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.btn:disabled:hover{border-color:var(--line);color:var(--txt);background:var(--panel)}
.btn .ic{opacity:.9;display:flex}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-txt);box-shadow:0 1px 2px rgba(0,85,184,.24)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-txt)}
.btn.primary .ic{opacity:1}
.btn.navy{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.navy:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{color:var(--red);border-color:var(--line)}
.btn.danger:hover{border-color:var(--red);background:var(--red-soft);color:var(--red)}
.btn.danger.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger.solid:hover{background:var(--red);color:#fff;opacity:.9}
.btn.sm{height:28px;padding:0 10px;font-size:12px}
.btn.lg{height:42px;padding:0 20px;font-size:13.5px}
.btn.quiet{border-color:transparent;background:transparent;color:var(--muted);box-shadow:none}
.btn.quiet:hover{color:var(--accent);background:var(--bg2);border-color:transparent}
.btn.block{width:100%}
.btn.busy{opacity:.7}
.btn.iconbtn{width:34px;padding:0}
.btn.iconbtn.sm{width:28px}

/* ---------------------------------------------------------- 5. badge + chip */
.badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--pill);font-family:var(--font-head);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--grey-soft);color:var(--grey);white-space:nowrap}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.red{background:var(--red-soft);color:var(--red)}
.badge.amber{background:var(--amber-soft);color:var(--amber)}
.badge.accent{background:var(--accent-soft);color:var(--accent)}
.badge.sky{background:var(--sky-soft);color:var(--sky)}
.badge.purple{background:var(--purple-soft);color:var(--purple)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--pill);border:1px solid var(--line);background:var(--panel);font-size:12px;color:var(--txt)}

/* ------------------------------------------------------------------ 6. forms */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field > label,.lbl{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.field .help{font-size:11.5px;color:var(--faint);line-height:1.45}
input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],input[type=url],select,textarea{height:34px;padding:0 10px;width:100%;border:1px solid var(--line);border-radius:var(--radius-ctl);background:var(--panel);color:var(--txt);font-size:13px;outline:none;font-family:var(--font);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);max-width:100%}
textarea{height:auto;min-height:76px;padding:8px 10px;line-height:1.55;resize:vertical}
select{padding-right:28px;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 10px) 14px;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input:disabled,select:disabled,textarea:disabled,input[readonly]{background:var(--bg2);color:var(--muted);cursor:default}
input::placeholder,textarea::placeholder{color:var(--faint)}
.err{color:var(--red);font-size:12px;min-height:16px}
.err:empty{min-height:0}
.hint{color:var(--muted);font-size:11.5px;line-height:1.5}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.formgrid .span2{grid-column:1 / -1}
@media (max-width:640px){.formgrid{grid-template-columns:1fr}}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;user-select:none;font-family:var(--font)}
.check input[type=checkbox]{width:15px;height:15px;margin:0;border-radius:3px;border:1px solid var(--faint);background:var(--panel);cursor:pointer;-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:all var(--t) var(--ease)}
.check input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.check input[type=checkbox]:checked::after{content:"";width:4px;height:8px;margin-top:-2px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-ctl);overflow:hidden}
.seg button{height:32px;padding:0 14px;border:0;background:var(--panel);color:var(--muted);cursor:pointer;font-family:var(--font-head);font-size:12px;font-weight:600}
.seg button + button{border-left:1px solid var(--line)}
.seg button.on{background:var(--accent);color:var(--accent-txt)}
.seg button:hover:not(.on){background:var(--bg2);color:var(--accent)}
.switch{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .knob{width:34px;height:20px;border-radius:20px;background:var(--line);position:relative;transition:background var(--t) var(--ease);flex:0 0 auto}
.switch .knob::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--t) var(--ease)}
.switch input:checked + .knob{background:var(--accent)}
.switch input:checked + .knob::after{transform:translateX(14px)}

/* ------------------------------------------------------------------ 7. table */
.table{width:100%;border-collapse:collapse;font-size:12.5px}
.table th{text-align:left;padding:9px 14px;font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--panel2);border-bottom:1px solid var(--line)}
.table td{padding:var(--cell-y) var(--cell-x);border-bottom:1px solid var(--line2);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--bg2)}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ------------------------------------------------------------------ 8. modal */
.modal-back{position:fixed;inset:0;z-index:200;background:var(--backdrop);display:flex;align-items:center;justify-content:center;padding:calc(24px + var(--sat)) 24px calc(24px + var(--sab));animation:fadeIn .14s var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{width:min(560px,100%);max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);overflow:hidden;animation:modalIn .18s var(--ease) both}
.modal.wide{width:min(900px,100%)}
@keyframes modalIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal .mhead{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line2)}
.modal .mhead h2{font-size:15.5px;font-weight:600;flex:1}
.modal .mbody{padding:18px;overflow:auto;flex:1 1 auto}
.modal .mfoot{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line2);background:var(--panel2)}
@media (max-width:640px){.modal-back{padding:0;align-items:flex-end}.modal{max-height:96dvh;border-radius:var(--radius-card) var(--radius-card) 0 0}}

/* ------------------------------------------------------------------ 9. toast */
.toastwrap{position:fixed;right:20px;bottom:calc(20px + var(--sab));z-index:300;display:flex;flex-direction:column;gap:8px;align-items:flex-end;max-width:calc(100vw - 40px)}
.toast{display:flex;align-items:center;gap:9px;max-width:420px;padding:11px 15px;border-radius:var(--radius-card);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-lg);color:var(--txt);font-size:12.5px;animation:toastIn .18s var(--ease) both;cursor:pointer}
.toast.leaving{animation:toastOut .18s var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}
.toast .dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.toast.t-green .dot{background:var(--green)}
.toast.t-red .dot{background:var(--red)}
.toast.t-amber .dot{background:var(--amber)}
.toast.t-accent .dot{background:var(--accent)}

/* ------------------------------------------------------- 10. kpi / empty */
.kpi{display:flex;flex-direction:column;gap:3px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow);min-width:0;color:inherit;text-decoration:none;transition:all var(--t) var(--ease)}
.kpi .k-label{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.kpi .k-value{font-family:var(--font-head);font-size:28px;font-weight:600;color:var(--heading);font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .k-sub{font-size:11.5px;color:var(--muted)}
.kpirow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:48px 24px;text-align:center;color:var(--muted)}
.empty .eic{width:46px;height:46px;border-radius:var(--pill);display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.empty h3{font-size:15px;color:var(--heading)}
.empty p{max-width:380px;font-size:12.5px;margin:0}
.spinner{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------------ 11. login */
.login{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:calc(40px + var(--sat)) 20px calc(40px + var(--sab));background:var(--login-grad)}
.login .lcard{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);padding:32px 32px 26px;position:relative}
.login .lmark{display:flex;justify-content:center;align-items:center;margin-bottom:22px}
.login .lmark img{height:52px;width:auto;display:block}
.login h1{font-size:18px;font-weight:600;text-align:center}
.login .lsub{text-align:center;color:var(--muted);font-size:12.5px;margin:6px 0 0}
.login .lactions{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.login .lerr{color:var(--red);font-size:12.5px;text-align:center;min-height:18px}
.login .lerr:empty{min-height:0}
.login .btn.primary{height:40px;font-size:13px}
.login.overlay{position:fixed;inset:0;z-index:420;min-height:0;background:rgba(2,16,44,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .18s var(--ease)}
.login.overlay .lcard{animation:modalIn .22s var(--ease)}
.login .lclose{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.login .lclose:hover{background:var(--accent-soft);color:var(--txt)}

/* -------------------------------------------------------- 12. landing (signed out) */
.land{min-height:100vh;min-height:100dvh;min-height:100svh;display:flex;flex-direction:column;background:#06101f;color:#fff;overflow-x:hidden;padding-top:var(--sat)}
.land-bar{height:64px;flex:0 0 64px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fff;border-bottom:1px solid #e5e1e6}
.land-logo{height:38px;width:auto;display:block}
.land-bar .land-signin{height:38px;padding:0 20px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;background:#002F87;border-color:#002F87;color:#fff}
.land-bar .land-signin:hover{background:#0055B8;border-color:#0055B8;color:#fff}
.land-hero{position:relative;flex:1 1 auto;min-height:calc(100svh - 64px - 48px);display:flex;align-items:center;justify-content:center;text-align:center;padding:64px 20px;overflow:hidden;isolation:isolate}
.land-bg,.land-bg img{position:absolute;inset:0;width:100%;height:100%;display:block}
.land-bg img{object-fit:cover;object-position:center 55%;z-index:-2}
.land-bg img,.land-film{filter:blur(3px);transform:scale(1.03)}
.land-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;z-index:-2;opacity:0;transition:opacity .6s var(--ease)}
.land-film.on{opacity:1}
.land-shade{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(2,10,28,.55) 0%,rgba(2,10,28,.25) 55%,rgba(2,10,28,0) 100%),linear-gradient(180deg,rgba(2,10,28,.35) 0%,rgba(2,10,28,0) 30%,rgba(2,10,28,.15) 75%,rgba(6,16,31,.95) 100%)}
.land-copy{max-width:760px;display:flex;flex-direction:column;align-items:center;gap:14px}
.land-eyebrow{font-family:var(--font);font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:#A9C6EF}
.land-mark{margin:6px 0 4px;line-height:0}
.land-mark img{width:min(520px,82vw);height:auto;display:block;filter:drop-shadow(0 4px 22px rgba(0,0,0,.55))}
.land-sub{margin:0;font-family:var(--font);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.land-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:22px;height:48px;padding:0 30px;line-height:1;border:1.5px solid rgba(255,255,255,.85);border-radius:var(--radius-ctl);background:rgba(6,16,31,.25);color:#fff;font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(2px);transition:all var(--t) var(--ease)}
.land-cta:hover{background:#fff;color:#002F87;border-color:#fff}
.land-cta.ghost{border-color:rgba(255,255,255,.4);margin-top:0}
.land-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.land-ctas .land-cta{margin-top:0}
.land-foot{height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.5);background:#06101f}

/* ------------------------------------------------------- 13. phone chrome */
@media (max-width:640px){
  :root{--gutter:14px}
  .topbar{gap:4px}
  .brand img{height:26px}
  .brand .word{display:none}
  .topbar .tb{padding:0 8px}
  .topbar .avatar{width:26px;height:26px}
  .page{padding:16px var(--gutter) 48px}
  .page-title h1{font-size:20px}
}

/* ------------------------------------------------- 14. V1.1 phone chrome: dock, back link, skeletons, sheet */
.dock{display:none}
.backlink{display:none;align-items:center;gap:4px;margin:-4px 0 10px -6px;padding:6px 10px 6px 4px;border-radius:var(--pill);color:var(--accent);font-family:var(--font-head);font-weight:600;font-size:14px;text-decoration:none;min-height:40px}
.backlink:active{background:var(--accent-soft)}
.backlink:hover{text-decoration:none}
.btn.iconright{flex-direction:row-reverse}
@media (max-width:640px){
  .subbar{display:none}
  .topbar .tb.who span:not(.avatar),.topbar .tb[title="Sign out"]{display:none}
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:space-around;align-items:stretch;height:calc(58px + var(--sab));padding:0 6px var(--sab);background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(18,40,76,.08)}
  .dock .tab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);text-decoration:none;font-family:var(--font-head);font-weight:600;font-size:10.5px;letter-spacing:.02em;border-radius:var(--r-md);margin:6px 2px;transition:color var(--t) var(--ease),background var(--t) var(--ease)}
  .dock .tab .ic{display:flex}
  .dock .tab.on{color:var(--accent);background:var(--accent-soft)}
  .dock .tab:active{background:var(--bg2)}
  .page{padding-bottom:calc(84px + var(--sab))}
  .backlink{display:inline-flex}
  .crumbs{display:none}
  body.subpage .dock{display:none}
  body.subpage .page{padding-bottom:48px}
  .toastwrap{left:14px;right:14px;bottom:calc(74px + var(--sab));align-items:stretch;max-width:none}
  body.subpage .toastwrap{bottom:calc(16px + var(--sab))}
  .toast{max-width:none;justify-content:center}
  .page-title .acts{width:100%;margin-left:0}
  .page-title .acts .btn{flex:1 1 auto;min-height:40px}
  .page-title .acts .search{flex:1 1 120px;width:auto}
  .search{width:100%}
  .page-title .acts .switch{flex:0 0 auto}
  .page-title .acts .btn.primary{flex:1 1 100%}
}
/* skeletons: the shape of the screen while it loads */
.skel-page{padding:20px var(--gutter);max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.skel{background:linear-gradient(90deg,var(--bg2) 25%,var(--panel) 50%,var(--bg2) 75%);background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:var(--r-md)}
.skel.line{height:22px;width:40%}.skel.line.w60{width:60%}.skel.line.w70{width:70%}.skel.line.w40{width:40%}
.skel.card{height:108px}.skel.card.tall{height:180px}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
/* bottom sheet */
.sheetback{position:fixed;inset:0;z-index:400;background:var(--backdrop);display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .15s;touch-action:none}
.sheetback.leaving{animation:fadeOut .18s both}
.sheetback.leaving .sheet{animation:sheetOut .18s var(--ease) both}
@keyframes fadeOut{to{opacity:0}}
.sheet{width:100%;max-width:560px;max-height:88dvh;background:var(--panel);border-radius:var(--r-lg) var(--r-lg) 0 0;display:flex;flex-direction:column;animation:sheetIn .26s var(--ease);touch-action:pan-y;box-shadow:var(--shadow-lg);transition:transform .08s linear}
@keyframes sheetIn{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheetOut{to{transform:translateY(60px);opacity:0}}
.sheet .grabber{width:38px;height:4px;border-radius:2px;background:var(--line);margin:8px auto 0;flex:0 0 auto}
.sheethead{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 6px 18px}
.sheethead h2{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheetbody{flex:1 1 auto;overflow:auto;padding:0 12px 12px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheetfoot{display:flex;gap:8px;padding:12px 12px calc(12px + var(--sab));border-top:1px solid var(--line2);flex:0 0 auto}
.sheetfoot .btn{min-height:44px;flex:1 1 0}
.sheetfoot textarea{min-height:44px;height:44px;flex:1 1 auto}
.sheetfoot textarea + .btn{flex:0 0 auto}
.sheet.actions .sheetbody{padding-bottom:calc(10px + var(--sab))}
.sheetacts{display:flex;flex-direction:column;gap:2px}
.sheetact{display:flex;align-items:center;gap:14px;min-height:50px;padding:0 10px;border:0;border-radius:var(--r-md);background:none;color:var(--txt);font-family:var(--font);font-size:15px;text-align:left;cursor:pointer;width:100%}
.sheetact .ic{color:var(--muted);display:flex}
.sheetact:active{background:var(--bg2)}
.sheetact.danger{color:var(--red)}.sheetact.danger .ic{color:var(--red)}
.sheetact.on{color:var(--accent);font-weight:600}.sheetact.on .ic{color:var(--accent)}
.sheetact small{display:block;font-size:12px;color:var(--muted);font-weight:400}
@media (min-width:641px){.sheetback{align-items:center;padding:24px}.sheet{border-radius:var(--r-lg);max-height:80vh}.sheet .grabber{display:none}}