/* ============================================================================
   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[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{margin-top:22px;height:48px;padding:0 30px;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}
}