/* Layout: phone-first app. A slim preview strip on top; a side rail on wide screens and a bottom bar on phones; one main screen; the phone preview opens beside it on wide screens.
   Look: white ground, hairline panels, ink for actions, blue for links, amber and red only for things that need attention. The visual system is described in the v31 block below. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --sunk:#F4F6FA; --line:#E3E7EF; --line2:#C6CEDC;
  --ink:#0E1B33; --muted:#55607A;
  --primary:#0C60F3; --accent:#0C60F3; --accent-ink:#FFFFFF; --accent-soft:#E7EFFE; --accent-text:#0C60F3;
  --warn:#8A4A00; --warn-soft:#FFF1DC; --warn-line:#F1D9B2;
  --no:#A92F3D; --no-soft:#FCECEE;
  --good:#1F6440; --good-soft:#E7F4EC;
  --shadow:0 1px 2px rgba(26,34,51,.05),0 4px 14px rgba(26,34,51,.05);
  --display:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --t-h1:27px; --t-h2:17px; --t-big:28px; --strip:44px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--body);font-size:16px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;margin:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.chip{display:inline-flex;align-items:center;font-size:13px;font-weight:500;padding:2px 9px;border-radius:999px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.chip.good{background:var(--good-soft);color:var(--good)} .chip.warn{background:var(--warn-soft);color:var(--warn)} .chip.no{background:var(--no-soft);color:var(--no)} .chip.blue{background:var(--accent-soft);color:var(--accent-text)}
.chips{display:flex;flex-wrap:wrap;gap:5px}

.btn{border:1px solid var(--line2);background:var(--surface);min-height:44px;padding:9px 16px;border-radius:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center}
.btn:hover{background:var(--sunk);border-color:var(--line2)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.15);background:var(--primary)}
.btn.small{min-height:36px;padding:6px 12px;font-size:14px}
.btn.link{border-color:transparent;background:transparent;color:var(--accent);padding-inline:8px}
.btn.link:hover{background:var(--accent-soft)}
.btn.danger{color:var(--no)}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}


.lead{margin:0;color:var(--muted);max-width:62ch}
.muted{color:var(--muted)} .small{font-size:14px}

/* Today */
.tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.task{border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;gap:12px 16px;align-items:center;flex-wrap:wrap;background:var(--surface)}
.task.urgent{border-color:#F1D3B0;background:#FFFBF5}
.task .what{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:2px}
.task .what strong{font-weight:600;font-size:17px;line-height:1.3}
.task .what span{font-size:14px;color:var(--muted)}
.task .btn{flex:0 0 auto;min-width:120px}
.meter{display:flex;gap:3px} .meter i{width:12px;height:16px;border-radius:3px;border:1.5px solid var(--line2)} .meter i.on{background:var(--accent);border-color:var(--accent)}
.coming{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:14px}
.coming li{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:15px}
.coming li:last-child{border-bottom:0}
.coming time{color:var(--muted);font-variant-numeric:tabular-nums}

/* empty / hero */
.steps3{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;counter-reset:n}
.steps3 li{counter-increment:n;background:var(--sunk);border-radius:12px;padding:12px 14px;font-size:14.5px;display:flex;flex-direction:column;gap:2px}
.steps3 li::before{content:counter(n);font-weight:700;color:var(--accent);font-family:var(--display)}
.steps3 span{color:var(--muted)}

/* first run */
.firstrun{max-width:560px;margin:6vh auto 0;display:flex;flex-direction:column;gap:18px}
.firstrun h1{font-family:var(--display);font-size:32px;letter-spacing:-.03em;margin:0;line-height:1.1}
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sizes button{min-height:84px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);font-family:var(--display);font-size:24px;font-weight:700;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:12px 18px;gap:2px}
.sizes button span{font-family:var(--body);font-size:14px;font-weight:500;color:var(--muted)}
.sizes button:hover,.sizes button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--muted)}
.check input{width:20px;height:20px;margin-top:2px;flex:0 0 auto}

/* job screen */
.jobswitch{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.jobswitch button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;min-height:44px;white-space:nowrap;font-weight:500;display:flex;gap:8px;align-items:center}
.jobswitch button[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.jobswitch .n{font-size:13px;color:var(--muted)} .jobswitch [aria-pressed="true"] .n{color:var(--accent)}
.jobhead{display:flex;flex-direction:column;gap:8px}
.jobmeta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;color:var(--muted);font-size:15px}
.group{display:flex;flex-direction:column;gap:8px}
.group h2{font-size:14px;font-weight:600;color:var(--muted);margin:6px 0 0;display:flex;gap:8px}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.prow{width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 14px;display:flex;gap:6px 14px;align-items:center;flex-wrap:wrap;min-height:56px}
.prow:hover{border-color:var(--line2);background:#FCFDFE}
.prow .who{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:4px}
.prow .who strong{font-weight:600}
.prow .st{font-size:14px;color:var(--muted);text-align:right;margin-left:auto}
.prow .st.warn{color:var(--warn);font-weight:600}
.toggle{display:inline-flex;background:var(--sunk);border-radius:10px;padding:3px;gap:2px}
.toggle button{border:0;background:transparent;border-radius:8px;padding:6px 12px;min-height:36px;font-weight:500;color:var(--muted)}
.toggle button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(26,34,51,.1)}
.boardwrap{overflow-x:auto;padding-bottom:6px}
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:10px;align-items:start}
.col{background:var(--sunk);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:120px;min-width:0}
.col.over{outline:2px dashed var(--accent);outline-offset:-2px}
.col h3{margin:2px 4px;font-size:14px;display:flex;justify-content:space-between}
.col h3 span{color:var(--muted);font-weight:500}
.bcard{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;text-align:left;display:flex;flex-direction:column;gap:4px;font-size:14px;min-height:44px}
.bcard strong{font-size:15px}
details.passed summary{cursor:pointer;color:var(--muted);font-weight:500;min-height:44px;display:flex;align-items:center}

/* sheet (person) */
dialog{border:0;padding:0;background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgba(26,34,51,.3)}
.sheet{margin:0 0 0 auto;height:100%;max-height:100%;width:min(520px,100%);max-width:100%;box-shadow:0 0 40px rgba(26,34,51,.15)}
.sh{display:flex;flex-direction:column;gap:18px;padding:18px 20px 40px}
.sh-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sh-top h2{font-family:var(--display);font-size:26px;line-height:1.15;letter-spacing:-.02em;margin:0;overflow-wrap:anywhere}
.sh-sub{font-size:14.5px;color:var(--muted);margin-top:4px}
.track{display:flex;flex-wrap:wrap;gap:6px}
.track button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:14px;min-height:36px}
.track button.done{background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.track button.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.next{border-radius:14px;background:var(--sunk);padding:14px;display:flex;flex-direction:column;gap:10px}
.next p{margin:0}
.next .why{font-size:14.5px;color:var(--muted)}
.sec h3{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;align-items:center}
.kv dt{color:var(--muted);font-size:15px} .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.musts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.musts li{display:flex;gap:8px} .musts .y{color:var(--good)} .musts .n{color:var(--no)} .musts .q{color:var(--muted)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.slots button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px;min-height:48px;font-size:15px;text-align:left}
.slots button:hover{border-color:var(--accent);color:var(--accent)}
.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:5px;font-size:14.5px;color:var(--muted)}
.field input,.field select,.field textarea{border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--ink);font-size:16px;min-height:44px;width:100%}
.field textarea{min-height:160px;line-height:1.5;resize:vertical}
.field small{color:var(--muted);font-size:13px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.reasons{display:flex;flex-wrap:wrap;gap:8px}
.thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.thread li{max-width:85%;padding:8px 12px;border-radius:14px;font-size:14.5px;line-height:1.4}
.thread li.us{background:var(--sunk);align-self:flex-start;border-bottom-left-radius:4px}
.thread li.them{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.thread time{display:block;font-size:12px;opacity:.92;margin-bottom:2px}
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.checks div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:14px;display:flex;flex-direction:column;gap:2px}
.checks b{font-size:13px;color:var(--muted);font-weight:600}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.log time{color:var(--muted);font-size:12.5px;margin-right:6px}
.resume summary{cursor:pointer;color:var(--accent);font-weight:500;min-height:36px;display:flex;align-items:center}
.resume pre{white-space:pre-wrap;font-family:var(--body);font-size:13.5px;background:var(--sunk);border-radius:10px;padding:10px 12px;max-height:300px;overflow-y:auto;margin:6px 0 0}
label.btn{position:relative}

/* modal */
.modal{border-radius:16px;width:min(620px,100vw - 24px);max-width:calc(100% - 24px);max-height:calc(100% - 24px);overflow-y:auto;box-shadow:0 20px 60px rgba(26,34,51,.2)}
.md{padding:22px;display:flex;flex-direction:column;gap:16px}
.md h2{font-family:var(--display);font-size:24px;margin:0;letter-spacing:-.02em}
.md-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;position:sticky;bottom:-22px;background:var(--surface);padding:12px 0 2px;border-top:1px solid var(--line);margin-bottom:-6px}
.mustpick{display:flex;flex-wrap:wrap;gap:8px}
.mustpick button{border:1px solid var(--line2);background:var(--surface);border-radius:999px;padding:8px 14px;min-height:40px;font-size:14.5px}
.mustpick button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{width:44px;height:44px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);font-size:20px}
.stepper output{min-width:36px;text-align:center;font-weight:700;font-size:20px;font-variant-numeric:tabular-nums}

/* flyer */
.flyer{border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;grid-template-columns:1fr auto;gap:16px 20px;align-items:center;background:#fff}
.flyer .fl-co{font-weight:600;color:var(--muted)}
.flyer h3{font-family:var(--display);font-size:30px;margin:2px 0;letter-spacing:-.03em;line-height:1.1}
.flyer .fl-pay{font-size:20px;font-weight:600}
.flyer .qr{width:150px;height:150px}
.flyer .qr svg{width:100%;height:100%}
.flyer .fl-how{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px;font-size:15px;display:flex;flex-direction:column;gap:4px}
@media (max-width:520px){.flyer{grid-template-columns:1fr}.flyer .qr{justify-self:start}}

/* phone preview */
.pv{display:flex;flex-direction:column;gap:10px}
.pv-label{font-size:13px;color:var(--warn);background:var(--warn-soft);border-radius:999px;padding:4px 12px;align-self:flex-start;font-weight:600}
.pv-who{display:flex;gap:8px;align-items:center}
.pv-who select{flex:1;min-width:0;border:1px solid var(--line2);border-radius:10px;padding:8px 10px;min-height:40px;background:var(--surface)}
.device{border:10px solid #1F2633;border-radius:34px;background:#fff;height:min(620px,calc(100vh - 230px));min-height:420px;display:flex;flex-direction:column;overflow:hidden}
.dv-top{padding:12px 14px 10px;border-bottom:1px solid var(--line);text-align:center;font-size:13.5px}
.dv-top strong{display:block;font-size:15px}
.dv-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.dv-act{border-top:1px solid var(--line);padding:10px;display:flex;flex-wrap:wrap;gap:6px}
.dv-act .btn{flex:1 1 auto;min-height:40px;font-size:14px;padding:6px 10px}
.dv-act .slots{grid-template-columns:1fr 1fr;width:100%}
.dv-act .slots button{min-height:40px;font-size:13.5px;padding:6px 8px}
.apply{display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.apply h3{font-family:var(--display);font-size:20px;margin:0;letter-spacing:-.02em}
.apply .field input,.apply .field select{min-height:44px;padding:8px 10px;font-size:16px}
.apply fieldset label{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-right:10px}
.apply fieldset input{width:20px;height:20px;margin:0}
.apply fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.apply legend{padding:0;margin-bottom:4px;color:var(--ink);font-weight:500}
.need{background:var(--sunk);border-radius:10px;padding:8px 12px;font-size:13.5px}
.need ul{margin:4px 0 0;padding-left:18px}
.pv-clock{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.pv-clock .row .btn{min-height:34px;padding:4px 10px;font-size:13.5px}
.pvsheet .sh{padding-bottom:20px}
.pvsheet .device{height:calc(100vh - 230px)}

/* numbers, referrals, pool, 90 */
.prog{height:6px;border-radius:999px;background:var(--sunk);overflow:hidden;min-width:80px}
.prog i{display:block;height:100%;background:var(--accent)}
.panel{border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel h2{font-size:17px;margin:0;font-weight:600}
.panel p{margin:0;color:var(--muted);font-size:15px}
.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;align-items:start}
.sw{display:flex;gap:12px;align-items:flex-start;font-size:15px;padding:6px 0}
.sw input{width:22px;height:22px;flex:0 0 auto;margin-top:1px}
.sw span small{display:block;color:var(--muted);font-size:13.5px}
.slotlist{list-style:none;margin:0;padding:0}
.slotlist li{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:2px 0;font-size:15px}
.copyline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copyline code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;background:var(--sunk);border-radius:6px;padding:4px 8px;user-select:all;overflow-wrap:anywhere}


@media (prefers-reduced-motion:no-preference){.task,.prow{transition:border-color .15s}}
.wi{width:14px;height:14px;flex:0 0 auto;vertical-align:-2px;margin-right:5px}
.prow .st{display:inline-flex;align-items:center}
.task .now{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:var(--warn);text-transform:none}
.flip svg{transform:rotate(180deg)}
.chip svg{width:14px;height:14px;margin-right:4px}
.daypick{display:flex;flex-wrap:wrap;gap:6px}
.daypick button{border:1px solid var(--line2);background:var(--surface);border-radius:10px;min-width:48px;min-height:40px;font-weight:500}
.daypick button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.pv-tabs{display:flex;width:100%} .pv-tabs button{flex:1}
.pv-steps{list-style:none;margin:4px 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.pv-steps li{font-size:11px;color:var(--muted);border-top:3px solid var(--line);padding-top:4px}
.pv-steps li.done{border-color:var(--accent);color:var(--ink)} .pv-steps li.on{border-color:var(--accent);color:var(--accent);font-weight:600}
.pv-foot{width:100%;justify-content:space-between}
.dv-act .pv-foot .btn{flex:0 0 auto;min-height:32px}
.thread li.us,.thread li.them{list-style:none}
.thread li.albtns{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:-2px 0 4px}
h2[tabindex="-1"]:focus{outline:none}
.tally{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tv{font-style:normal;width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--sunk);color:var(--muted)}
.tv.good{background:var(--good-soft);color:var(--good)} .tv.watch{background:var(--warn-soft);color:var(--warn)} .tv.bad{background:var(--no-soft);color:var(--no)}
.rvq{display:flex;flex-direction:column;gap:6px} .rvl{font-weight:600;font-size:15px} .rvopts{display:flex;flex-direction:column;gap:6px}
.rvopts button{border:1px solid var(--line2);background:var(--surface);border-radius:10px;min-height:44px;padding:8px 12px;text-align:left;font-size:15px}
.rvopts button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.rvlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .rvlist li{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.kick{margin:0;font-weight:600;color:var(--accent-text);font-size:16px;max-width:44ch}
.ntrack{position:relative;height:8px;border-radius:999px;background:var(--sunk);overflow:hidden} .ntrack i{display:block;height:100%;background:var(--accent);border-radius:999px} .ntrack b{position:absolute;top:0;bottom:0;width:2px;background:var(--surface)}
.nstat{font-size:14.5px;color:var(--muted);display:inline-flex;align-items:center} .nstat.warn{color:var(--warn);font-weight:600}
.sharebox{border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.sharebox h3{margin:0;font-size:16px;font-weight:600}
.sharebox .copyline code{font-size:16px;padding:6px 10px}
.posttext{margin:0;background:var(--sunk);border-radius:10px;padding:10px 12px;font-size:15px;line-height:1.45;user-select:all;overflow-wrap:anywhere}
details.moreways{border:1px dashed var(--line2);border-radius:14px;padding:4px 16px 14px}
details.moreways:not([open]){padding-bottom:4px}
details.moreways summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.moremenu{position:fixed;right:8px;bottom:calc(60px + env(safe-area-inset-bottom,0px));z-index:7;background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:0 8px 28px rgba(26,34,51,.18);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:210px}
.moremenu .btn{justify-content:flex-start;border-color:transparent;min-height:48px}
.moremenu .btn[aria-current="page"]{background:var(--accent-soft);color:var(--accent-text)}
@media (max-width:720px){
  .btn.small,.track button,.toggle button,.mustpick button,.daypick button,.jobswitch button{min-height:44px}
  .pvsheet .pv-clock .row .btn,.pvsheet .dv-act .btn,.pvsheet .dv-act .pv-foot .btn,.pvsheet .dv-act .slots button{min-height:44px}
  .pvsheet .pv-who select{min-height:44px}
  .check input,.sw input{width:24px;height:24px}
  .check,.sw{min-height:44px;align-items:center}
}

/* ---------- two seats ----------
   One bar on top says whose seat this is. The job seeker's seat replaces the employer app.
   The career page has its own look (sage ground, forest ink, marigold "now hiring" tag,
   a wide grotesque for names and pay) so it reads as the business's page, not as Keepseeker. */
.seatbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:8;display:flex;align-items:center;gap:8px 12px;padding:6px 16px;min-height:54px;background:#1F2633;color:#fff}
.seatbar .sb-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.seatbar strong{font-family:var(--display);font-size:15px;font-weight:700}
.seatbar .sb-who span{font-size:12.5px;overflow-wrap:anywhere}
.seatbar .btn{flex:0 0 auto;min-height:44px;padding:6px 14px;font-size:14.5px;background:#fff;color:#1F2633;border-color:#fff}
.seatbar .btn:hover{background:#EDF2FC;border-color:#EDF2FC}
.seatbar .btn:focus-visible{outline-color:#fff}
.seatbar.js{background:#F2B632;color:#14261F}
.seatbar.js .btn{background:#14261F;color:#fff;border-color:#14261F}
.seatbar.js .btn:hover{background:#1F5A44;border-color:#1F5A44}
.seatbar.js .btn:focus-visible{outline-color:#14261F}
.phone-col .device{height:min(620px,calc(100vh - 284px))}
.task .what .cs-pin{align-items:center;margin-top:6px}
.task .what .cs-pin .chip{font-size:13px}
.task .what .cs-pin .chip.blue{color:var(--accent-text)} .task .what .cs-pin .chip.good{color:var(--good)} .task .what .cs-pin .chip.warn{color:var(--warn)}
#seat{--cs-mark:#F2B632;--bg:#F1F5F0;--surface:#FFFFFF;--sunk:#E8EFE9;--line:#D3DED5;--line2:#AFC2B4;--ink:#14261F;--muted:#4A5E54;
  --accent:#1F5A44;--accent-ink:#FFFFFF;--accent-soft:#DCEAE1;--accent-text:#1A4D3A;
  --display:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);min-height:calc(100vh - 54px)}
#seat .cs{max-width:640px;margin:0 auto;padding-inline:16px;padding-block:16px 56px;display:flex;flex-direction:column;gap:18px}
#seat .cs:focus{outline:none}
#seat .btn{border-radius:8px;border-color:var(--line2)}
#seat .btn.primary{border-color:var(--accent)}
#seat .btn.link{border-color:transparent;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
#seat .btn.small{min-height:44px}
.cs-bar{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.cs-url{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;max-width:100%;overflow-wrap:anywhere;align-self:flex-start}
.cs-head{display:flex;gap:16px;align-items:flex-start;padding-block:8px 4px}
.cs-mono{flex:0 0 auto;width:64px;height:64px;border-radius:8px;background:var(--ink);color:var(--cs-mark);font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;display:flex;align-items:center;justify-content:center}
.cs-id{min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cs-tag{background:var(--cs-mark);color:var(--ink);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:4px;transform:rotate(-2deg)}
.cs-head h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,10vw,54px);line-height:.98;letter-spacing:-.035em;margin:0;text-wrap:balance;overflow-wrap:anywhere}
.cs-about{margin:0;font-size:18px;line-height:1.4;max-width:46ch}
.cs-where{margin:0;color:var(--muted);font-size:15px}
.cs-mine{width:100%;text-align:left;border:1.5px dashed var(--ink);background:var(--surface);border-radius:8px;padding:12px 14px;min-height:52px;display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;align-items:center;color:var(--ink)}
.cs-mine strong{color:var(--accent-text)}
.cs-sec{display:flex;flex-direction:column;gap:12px}
.cs-h2{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0;display:flex;gap:8px;align-items:baseline}
.cs-h2 span{font-family:var(--body);font-size:15px;font-weight:500;color:var(--muted)}
.cs-jobs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cs-job,.cs-card{background:var(--surface);border:1.5px solid var(--ink);border-radius:8px;padding:16px 18px}
.cs-job{display:flex;flex-direction:column;gap:10px}
.cs-jtop{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.cs-jtop h3{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.02em;margin:0;min-width:0;overflow-wrap:anywhere}
.cs-pay{font-family:var(--display);font-weight:600;font-size:22px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-meta{margin:0;color:var(--muted);font-size:16px}
.cs-job details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cs-desc{margin:0 0 4px;white-space:pre-wrap;font-size:15.5px;line-height:1.5;overflow-wrap:anywhere}
.cs-job .btn.primary{align-self:flex-start;min-width:150px;min-height:48px;font-size:17px}
.cs-none{margin:0;border:1.5px dashed var(--line2);border-radius:8px;padding:20px;color:var(--muted)}
.cs-foot{color:var(--muted);font-size:13.5px;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-wrap:wrap;gap:4px 14px}
.cs-help{margin:0;color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
#seat .apply{font-size:16px;gap:14px}
#seat .apply h3{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.025em;overflow-wrap:anywhere}
#seat .apply .chip{font-size:14.5px;padding:3px 11px;background:var(--sunk);color:var(--ink)}
#seat .apply .small,#seat .need{font-size:15px}
#seat .apply .field,#seat .apply legend{font-size:15.5px}
#seat .apply .field input,#seat .apply .field select{border-radius:8px;min-height:48px}
.apply input[type=file]{font-size:15px;padding:8px}
#seat .apply .btn.primary{min-height:50px;font-size:17px}
#seat .apply .check input{width:24px;height:24px}
#seat .pv-steps li{font-size:12.5px;overflow-wrap:anywhere}
#seat .slots button{border-radius:8px;min-height:50px;font-size:16px;border-color:var(--line2)}
.cs-done{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cs-done h1{font-family:var(--display);font-weight:800;font-size:34px;line-height:1.05;letter-spacing:-.03em;margin:0}
.cs-done p{margin:0;font-size:17px;max-width:48ch}
.cs-done .cs-next{background:var(--sunk);border-radius:8px;padding:12px 14px}
.cs-check{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}
.cs-tabs{display:flex;width:100%}
.cs-tabs button{flex:1;min-height:44px}
.cs-msgs{padding:0;display:flex;flex-direction:column}
.cs-mhead{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;align-items:center;font-size:13.5px;color:var(--muted)}
.cs-mhead strong{font-size:16px;color:var(--ink)}
.cs-msgs .thread{padding:16px}
.cs-msgs .thread li{font-size:16px}
.cs-link{border:0;background:none;padding:0;font:inherit;color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;text-align:left}
#seat .dv-act{padding:12px 16px 14px;gap:8px}
#seat .dv-act .btn{min-height:48px;font-size:16px}
#seat .dv-act .pv-foot .btn{min-height:44px;font-size:15px}
#seat .dv-act .slots button{min-height:50px;font-size:15.5px}
.cs-notabs [data-act="pv-status"]{display:none}
/* v28: one clean row everywhere (Today, job list, board, person page) */
.task.t2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:12px 14px}
.task.t2 .what strong{font-size:16px}
.task.t2 .btn{min-width:0;width:auto;max-width:150px;padding:8px 12px}
.task.t2 .tg{grid-column:1/-1}
.tg .chip,.prow .chip,.bcard .chip,.sh-top .chip{white-space:normal;text-align:left;font-size:13px;border-radius:12px}
.tg .chip.blue{color:var(--accent-text)}
.st2{font-size:14px;color:var(--muted)} .st2 .warn{color:var(--warn);font-weight:600} .sh-sub .st2{font-size:inherit}
.boardwrap{position:relative}
.prow{flex-wrap:nowrap} .prow .who{flex:1 1 auto} .prow .chev{color:var(--muted);flex:0 0 auto}
.jl{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:14px}
.jl li{border-bottom:1px solid var(--line)} .jl li:last-child{border-bottom:0}
.jl button{width:100%;border:0;background:none;text-align:left;padding:10px 14px;min-height:56px;display:flex;gap:10px;align-items:center;border-radius:14px}
.jl button:hover{background:var(--sunk)}
.jl .w{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .jl .w span{font-size:14px;color:var(--muted)}
.jl .f{font-size:13px;color:var(--muted);white-space:nowrap}
.later{align-self:flex-start;justify-content:flex-start}
#sh-more{display:flex;flex-direction:column;gap:18px}
#sh-more[hidden]{display:none!important}
/* v29: what early quits cost */
/* v30: the money line on Today */
.roi-how{border-radius:12px;background:var(--sunk);padding:12px 14px;font-size:14.5px;margin:0}
.roi-base{max-width:420px}

/* ================= v31: one visual system for the employer's side =================
   Type: IBM Plex Sans. Sizes: 12.5 small labels, 14 secondary, 16 body, 17 section heading, 27 page title, 28 figures.
   Space: 4, 8, 12, 16, 24, 36. Radius: 10 for controls, 12 for panels.
   Colour: ink for actions and selected states, blue for links and focus, amber and red only when something needs you, green only for a yes.
   Containers: one panel (.pnl) per section, rows divided by hairlines.
   Status: a check and the word for a yes; a pill with an icon and words for a warning. Never colour alone. */

/* The job seeker's seat keeps its v30 look: pin every token it used to inherit. */
#seat,.seatbar.js{--primary:var(--accent);--warn:#8C4D0C;--warn-soft:#FDF3E6;--no:#AE3643;--no-soft:#FCEEEF;--good:#266A48;--good-soft:#EAF5EF;--body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-family:var(--body)}
.seatbar.js{--display:"IBM Plex Sans","Segoe UI",system-ui,sans-serif}

/* ---- preview strip: the one home for the demo tools ---- */
.seatbar.demo{background:#2A3C63;min-height:var(--strip);padding:0 4px 0 16px;gap:0}
.seatbar.demo .sb-who{flex-direction:row;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden}
.seatbar.demo .sb-who span{font-size:inherit}
.seatbar.demo strong{font-family:var(--body);font-size:13.5px;font-weight:700}
.seatbar.demo .sb-who .sb-note{font-size:13.5px;opacity:.82;overflow:hidden;text-overflow:ellipsis}
.sbtn{border:0;background:none;color:#fff;min-height:44px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px;white-space:nowrap;flex:0 0 auto}
.sbtn .ic{width:17px;height:17px}
.sbtn+.sbtn{border-left:1px solid rgba(255,255,255,.18)}
.sbtn:hover{background:rgba(255,255,255,.1)}
.sbtn[aria-pressed="true"]{background:rgba(255,255,255,.18)}
.sbtn:focus-visible{outline-color:#fff;outline-offset:-3px}
.w-wide{display:none}
.ic{width:20px;height:20px;flex:0 0 auto}
.ci{width:14px;height:14px;flex:0 0 auto;vertical-align:-2px;margin-right:4px;color:var(--good)}
.grow{flex:1}
.m0{margin:0}

/* ---- shell: header, side rail (wide) or bottom bar (phone) ---- */
.shell{display:block}
.work{padding:0 16px calc(96px + env(safe-area-inset-bottom,0px));min-width:0}
.top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:2px 8px;align-items:center;padding:12px 0}
.top .ctx{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:13.5px;color:var(--muted);min-width:0}
.top .ctx>*{margin-right:8px}
.top .ctx .bm{font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.top .ctx .bm i,.brand i{width:9px;height:9px;border-radius:3px;background:var(--primary)}
.top .ctx .biz{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.top .ctx .biz::before,.top .ctx .d::before{content:'·';margin-right:8px}
.brand{font-weight:700;font-size:19px;letter-spacing:-.015em;display:flex;align-items:center;gap:8px}
h1.h{font-family:var(--display);font-size:var(--t-h1);font-weight:700;line-height:1.15;letter-spacing:-.015em;margin:0;text-wrap:balance}
.top h1.h{grid-column:1;min-width:0}
.top h1.h:focus{outline:none}
.top h1.h small{display:none}
h2.h{font-family:var(--display);font-size:var(--t-h2);font-weight:700;letter-spacing:-.005em;margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
h2.h .n{font-weight:500;font-size:14px;color:var(--muted);letter-spacing:0}
h2.h.jt{font-size:22px;letter-spacing:-.01em}
.gh{font-size:14px;font-weight:600;color:var(--muted);margin:6px 0 0;display:flex;gap:8px}
.lead{font-size:15px}
.find{width:44px;height:44px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--ink)}
.find:hover{background:var(--sunk)}
.find span,.find kbd{display:none}
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.phone-col{display:none;position:sticky;top:calc(var(--strip) + 12px)}
main{min-width:0;display:flex;flex-direction:column;gap:24px;container-type:inline-size}
section.sec{display:flex;flex-direction:column;gap:10px;min-width:0}
.cols,.side{display:flex;flex-direction:column;gap:24px;min-width:0}
.pagebar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between}
.pagebar .lead{flex:1 1 320px;margin:0}
nav.tabs button{font-family:inherit}
nav.tabs .dot{background:var(--primary);color:#fff;text-align:center;font-weight:600}
.moremenu .btn .ic{color:var(--muted)}

@media (max-width:759px){
  nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;background:var(--surface);border-top:1px solid var(--line);padding:4px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  nav.tabs .brand,nav.tabs .railbiz{display:none}
  nav.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:4px 2px;border:0;background:none;font-size:12px;font-weight:600;color:var(--muted);position:relative;border-radius:10px}
  nav.tabs button[aria-current="page"]{color:var(--ink)}
  nav.tabs button[aria-current="page"] .ic{stroke-width:2.3}
  nav.tabs .dot{position:absolute;top:2px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11.5px;line-height:18px}
  .sheet{width:100%}
  .coming li{grid-template-columns:1fr}
}
@media (min-width:760px){
  .w-wide{display:inline}.w-narrow{display:none}
  .shell{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start}
  .shell.first{display:block}
  nav.tabs{position:sticky;top:var(--strip);height:calc(100vh - var(--strip));display:flex;flex-direction:column;gap:2px;padding:20px 12px;border-right:1px solid var(--line);background:#F8F9FC;overflow-y:auto}
  nav.tabs .brand{padding:0 10px}
  nav.tabs .railbiz{padding:2px 10px 14px;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
  nav.tabs .brand:last-of-type{margin-bottom:14px}
  nav.tabs button{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 10px;border:0;border-radius:10px;background:none;font-weight:600;font-size:15px;color:var(--muted);text-align:left;flex:0 0 auto}
  nav.tabs button:hover{background:#EEF1F7}
  nav.tabs button[aria-current="page"]{background:#E9EDF5;color:var(--ink)}
  nav.tabs .dot{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:10px;font-size:12px;line-height:20px}
  .work{padding:0 32px 56px;max-width:1240px}
  .shell.first .work{max-width:none}
  .top{padding:22px 0 18px}
  .top .ctx .bm,.top .ctx .biz,.top .ctx .d,.top .ctx .flag-s{display:none}
  .top h1.h small{display:inline;font-family:var(--body);font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0;margin-left:10px;white-space:nowrap}
  .find{width:40px;height:40px}
  .top .btn{min-height:40px}
}
@media (min-width:1000px){
  .find{width:240px;justify-content:flex-start;padding:0 12px;color:var(--muted);font-size:14.5px}
  .find span{display:inline}
  .find kbd{display:inline;margin-left:auto;font:inherit;font-size:12px;border:1px solid var(--line2);border-radius:5px;padding:0 6px}
}
@media (min-width:1100px){
  .shell.pvon .layout{grid-template-columns:minmax(0,1fr) 340px}
  .shell.pvon .phone-col{display:block}
}

/* ---- panels and rows ---- */
.pnl{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;min-width:0}
ul.pnl{list-style:none;margin:0;padding:0}
.pnl>li+li,.pnl>.cell+.cell,.pnl.later2>*+*{border-top:1px solid var(--line)}
.pnl.jl>li+li{border-top:0}
.pnl :focus-visible,.plist :focus-visible{outline-offset:-2px}
.pnl.tasks{display:block}
.pnl .task.t2{border:0;border-radius:0;background:none;padding:12px 14px;gap:6px 12px}
.pnl .task.t2+.task.t2{border-top:1px solid var(--line)}
.pnl .task.t2.urgent{background:var(--warn-soft)}
.pnl .task.t2.urgent+.task.t2{border-top-color:var(--warn-line)}
.task.t2 .what{gap:3px}
.task.t2 .what strong{font-size:16px;font-weight:600}
.task.t2 .what .now{font-size:12.5px;font-weight:700;color:var(--warn)}
.task.t2 .what .st2 .warn{color:var(--warn);font-weight:600}
.task.t2 .btn{min-width:92px;max-width:150px}
.dots{display:flex;flex-wrap:wrap;column-gap:.95em;overflow:hidden}
.dots>*{position:relative;min-width:0}
.dots>*+*::before{content:'·';position:absolute;left:-.62em;color:var(--muted);font-weight:400}
.st2 .warn{color:var(--warn);font-weight:600}

.plist{gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.plist>li+li{border-top:1px solid var(--line)}
.plist.flat{border:0;border-radius:0}
.prow{border:0;border-radius:0;padding:12px 14px;min-height:56px;gap:6px 12px}
.prow:hover{background:var(--sunk);border:0}
.prow.static{cursor:default;position:relative;display:flex;align-items:center}
.prow.static:hover{background:none}
.prow .who{gap:3px}
.prow.risk{background:var(--warn-soft)}
.prow.risk:hover{background:#FFEBCB}
.plist>li:has(>.prow.risk)+li{border-top-color:var(--warn-line)}
.chev{color:var(--muted);display:inline-flex;flex:0 0 auto}
.chev .ic{width:18px;height:18px}
.btn.link.nm{padding:0;min-height:0;justify-content:flex-start;text-align:left;font-weight:600;align-self:flex-start}
.btn.link.nm:hover{background:none;text-decoration:underline}
.prow.static .nm::after{content:'';position:absolute;inset:0}
.prow.static .amt .btn,.prow.static .copyline{position:relative;z-index:1}
.amt{font-weight:600;font-variant-numeric:tabular-nums;font-size:14.5px;margin-left:auto;text-align:right;flex:0 0 auto;max-width:45%}
.jl{border-radius:12px}
.jl button{border-radius:0}
.ntrack{display:block;height:6px;background:var(--line);max-width:420px;margin:4px 0 2px}
.ntrack i{background:var(--primary)}
.nstat.warn{color:var(--warn);font-weight:600}
details.passed .plist{margin-top:4px}

/* ---- tags: one way to show status ---- */
.tg .chip,.prow .chip,.bcard .chip,.sh-top .chip,.tagrow .chip{background:var(--sunk);padding:2px 9px;border-radius:999px;color:var(--muted);font-weight:500;font-size:13px;white-space:normal;text-align:left}
.tg .chip.good,.prow .chip.good,.bcard .chip.good,.sh-top .chip.good,.tagrow .chip.good,
.tg .chip.blue,.prow .chip.blue,.bcard .chip.blue,.sh-top .chip.blue{background:none;padding:0;border-radius:0;color:var(--muted)}
.tg .chip.warn,.prow .chip.warn,.bcard .chip.warn,.sh-top .chip.warn,.tagrow .chip.warn,
.tg .chip.no,.prow .chip.no,.bcard .chip.no,.sh-top .chip.no,.tagrow .chip.no{background:var(--warn-soft);color:var(--warn);font-weight:600}
.task.urgent .tg .chip.warn,.prow.risk .chip.warn,.prow.risk .chip.no{background:#fff}
.tg,.prow .chips,.bcard .chips,.sh-top .chips{gap:4px 12px;align-items:center}
.chip .wi{margin-right:4px}
.tally .tv{border-radius:6px}

/* ---- Today: the summary panel, the ruler, Later ---- */
.cell{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;text-align:left;border:0;background:none;width:100%;padding:14px;min-width:0;color:var(--ink)}
button.cell{min-height:64px}
button.cell:hover{background:var(--sunk)}
.cell>*{grid-column:1;min-width:0}
.cell .k{font-size:13.5px;font-weight:600;color:var(--muted)}
.cell .v{font-family:var(--display);font-size:var(--t-big);font-weight:700;letter-spacing:-.015em;line-height:1.15;font-variant-numeric:tabular-nums}
.cell .v.neg{color:var(--no)}
.cell .s{font-size:14px;color:var(--muted)}
.cell .s .warn{color:var(--warn);font-weight:600}
.cell .s.tagrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cell .go{grid-column:2;grid-row:1/5;color:var(--muted);display:flex}
.pnl.sum>.cell:only-child{grid-column:1/-1}
.ruler{position:relative;display:block;height:calc(46px + var(--lv,0)*9px);margin:4px 0 2px}
.ruler.named{height:62px}
.ruler .line{position:absolute;left:0;right:0;bottom:26px;height:4px;border-radius:2px;background:var(--line)}
.ruler .fill{position:absolute;left:0;bottom:26px;height:4px;border-radius:2px;background:var(--primary)}
.ruler .tk{position:absolute;bottom:22px;width:2px;height:12px;background:var(--line2);transform:translateX(-1px)}
.ruler .tl{position:absolute;bottom:0;font-size:11.5px;line-height:1;color:var(--muted);transform:translateX(-50%);font-variant-numeric:tabular-nums;white-space:nowrap}
.ruler .tl.last{transform:translateX(-100%)}
.ruler .p{position:absolute;bottom:calc(21px + var(--l,0)*9px);width:0;height:14px}
.ruler .p i{position:absolute;left:-7px;bottom:0;width:14px;height:14px;border-radius:50%;background:var(--primary);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--primary)}
.ruler .p.risk i{left:-8px;width:0;height:0;border-radius:0;background:none;box-shadow:none;border:8px solid transparent;border-top:0;border-bottom:14px solid var(--warn)}
.ruler .p b{position:absolute;bottom:18px;left:0;transform:translateX(-50%);font-size:12px;font-weight:600;line-height:1;white-space:nowrap;color:var(--ink)}
.ruler .p.risk b{color:var(--warn)}
.ruler .p.a0 b{transform:translateX(-7px)}
.ruler .p.a1 b{transform:translateX(calc(-100% + 7px))}
.ruler.solo{height:30px;margin:0}
.ruler.solo .line,.ruler.solo .fill{bottom:auto;top:4px}
.ruler.solo .tk{bottom:auto;top:0}
.bands{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:14px;color:var(--muted);margin:4px 0}
.bands b{color:var(--ink);font-weight:700}
.disc{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:0 14px;border:0;background:none;text-align:left;font-weight:600;font-size:15px;color:var(--accent)}
.disc:hover{background:var(--sunk)}
.disc .n{color:var(--muted);font-weight:500}
.disc .ic{width:18px;height:18px}
.disc[aria-expanded="true"] .ic,.chev.up .ic{transform:rotate(180deg)}
.later2 .coming{border:0;border-radius:0}
.later2 .coming li{grid-template-columns:1fr;gap:2px}
.later2 p.pad{padding:10px 14px;margin:0}
.btn.inline{padding:0;min-height:0;border:0;justify-content:flex-start;text-align:left;font-size:inherit}
.btn.link.inline:hover{background:none;text-decoration:underline}
.coming .btn.inline{padding-block:4px}
.roi-how .btn.inline{display:inline}
.empty{border:1px dashed var(--line2);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;max-width:720px}
.empty h2,.empty h3{font-family:var(--display);font-size:19px;font-weight:700;margin:0;letter-spacing:-.01em;text-wrap:balance}
.empty .lead{margin:0}
.steps3 li::before{color:var(--ink)}
@container (min-width:860px){
  .cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
  .pnl.sum{display:grid;grid-template-columns:1fr 1fr}
  .pnl.sum>.cell+.cell{border-top:0;border-left:1px solid var(--line)}
  main .twoup{grid-template-columns:1fr 1fr}
}
@container (min-width:640px){
  .pnl.stats{display:grid;grid-template-columns:repeat(3,1fr)}
  .pnl.stats>.cell{align-content:start}
  .pnl.stats>.cell+.cell{border-top:0;border-left:1px solid var(--line)}
}

/* ---- selected states use ink ---- */
.jobswitch button[aria-pressed="true"]{background:var(--primary);color:#fff}
.jobswitch [aria-pressed="true"] .n{color:#fff;opacity:.8}
.track button.done{background:var(--sunk);color:var(--ink)}
.track button.on,.mustpick button[aria-pressed="true"],.daypick button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.daypick.wide button{padding-inline:14px}
.rvopts button[aria-pressed="true"]{border-color:var(--primary);background:var(--sunk);color:var(--ink);box-shadow:inset 0 0 0 1px var(--primary)}
.meter i.on{background:var(--primary);border-color:var(--primary)}
.sizes button{font-family:var(--display)}
.sizes button:hover,.sizes button[aria-pressed="true"]{border-color:var(--primary);background:var(--sunk)}
.panel,.sharebox,.pv-clock,.flyer,.coming,details.moreways,.col{border-radius:12px}
.panel h2{font-size:var(--t-h2);font-weight:700}
.md h2{font-size:22px;font-weight:700;letter-spacing:-.01em}
.firstrun h1{font-weight:700}
.kick{color:var(--ink)}

/* ---- person page ---- */
#sheet .sh{min-height:100%;gap:16px;padding:0 20px}
#sheet .sh>:last-child:not(.stick){margin-bottom:28px}
.sh-bar{display:flex;align-items:center;gap:8px;margin:8px -10px -6px}
.sh-bar .btn.link{padding-inline:8px;color:var(--ink)}
.iconbtn{width:44px;height:44px;border:0;background:none;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.iconbtn:hover{background:var(--sunk)}
#sheet .sh-top{display:block}
#sheet .sh-top h2{font-size:var(--t-h1);font-weight:700;letter-spacing:-.015em}
#sheet .sh-top .chips{margin-top:8px}
.pnl.pad{padding:14px;display:flex;flex-direction:column;gap:12px}
.pnl.pad hr{border:0;border-top:1px solid var(--line);margin:0 -14px}
.fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.fact b{font-size:13px;color:var(--muted);font-weight:600}
.fact strong{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.01em}
.ck3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:13.5px}
.ck3 div{display:flex;flex-direction:column;gap:1px;min-width:0}
.ck3 b{font-weight:600;color:var(--muted);font-size:12.5px}
.ck3 .w{color:var(--warn);font-weight:600}
.ck3 .g{color:var(--good);font-weight:600}
#sheet .next{background:none;padding:0;border-radius:0;gap:8px}
#sheet .next.form{background:var(--sunk);padding:14px;border-radius:12px;gap:10px}
#sheet .next .links{gap:2px 6px;margin-left:-8px}
#sheet .next p.small{margin:0}
.morebtn{justify-content:flex-start;text-align:left;gap:10px;border-color:var(--line);border-radius:12px;min-height:48px}
.morebtn .hint{font-weight:400;font-size:13.5px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.stick{position:sticky;bottom:0;margin:auto -20px 0;padding:10px 20px calc(14px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);z-index:1}
.det{margin:0 0 8px}
.det2{margin:8px 0 0}
.txin{flex:1 1 180px;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;min-height:44px}
.dtin{border:1px solid var(--line2);border-radius:10px;padding:8px;min-height:44px}
.slotlist li{flex-wrap:wrap;gap:2px 10px;padding:8px 0}

/* ---- Numbers ---- */
.seg{display:flex;background:var(--sunk);border-radius:10px;padding:3px;gap:2px;flex:1 1 300px;max-width:460px}
.seg button{flex:1;border:0;background:none;border-radius:8px;min-height:44px;font-weight:600;font-size:14px;color:var(--muted);padding:0 8px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,28,46,.16)}
.brow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 14px}
.brow strong{font-weight:600}
.brow .r{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.brow .d{font-size:13.5px;color:var(--muted);grid-column:1/-1}
.bar2{grid-column:1/-1;display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin:3px 0}
.bar2 i{display:block;height:100%;background:var(--primary)}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:12px 14px;align-items:start}
.mrow .l{display:flex;flex-direction:column;gap:2px;min-width:0}
.mrow .l strong{font-weight:600}
.mrow .l span{font-size:13.5px;color:var(--muted)}
.mrow .v{font-family:var(--display);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;text-align:right;white-space:nowrap}
.mrow .c{grid-column:1/-1;font-size:13.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@container (min-width:700px){.mrow{grid-template-columns:minmax(0,1.6fr) 110px minmax(0,1fr);align-items:center}.mrow .c{grid-column:3}}
.twoup{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.spend{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.field.inline{flex-direction:row;align-items:center;gap:6px}
.field.inline input{width:90px}
.field.narrow{max-width:260px}
.field.grow1{flex:1 1 150px}
.formrow{align-items:flex-end}

/* ---- Settings in sections ---- */
.setwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.setnav{display:flex;flex-direction:column}
.setnav button{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:10px 14px;border:0;background:none;text-align:left}
.setnav button+button{border-top:1px solid var(--line)}
.setnav button:hover,.setnav [aria-current="true"]{background:var(--sunk)}
.setnav .w{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.setnav .w strong{font-weight:600}
.setnav .w span{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.setbody{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:640px}
.setback{align-self:flex-start;margin-left:-8px;color:var(--ink)}
@container (max-width:719px){.setwrap.has .setnav{display:none}}
@container (min-width:720px){.setwrap{grid-template-columns:290px minmax(0,1fr)}.setback{display:none}}

/* ---- find a person ---- */
.findd{margin:max(12px,6vh) auto auto;width:min(560px,100vw - 24px)}
.findd .md{gap:12px;padding:14px}
.findbar{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:10px;padding:0 6px 0 12px;color:var(--muted)}
.findbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.findbar input{flex:1;min-width:0;border:0;outline:0;background:none;min-height:48px;font-size:16px;color:var(--ink)}
#fd-res{max-height:60vh;overflow-y:auto}
#fd-res .lead{margin:4px 2px}

/* ---- messages: at the top, never over what was tapped ---- */
#toast{position:fixed;left:50%;top:calc(4px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.28);padding:0 6px 0 16px;min-height:36px;border-radius:10px;font-weight:500;font-size:15px;width:max-content;max-width:calc(100% - 24px);z-index:20;display:flex;align-items:center;gap:6px;box-shadow:0 8px 28px rgba(20,28,46,.25)}
#toast span{padding:6px 10px 6px 0}
#toast:has(.tundo){padding-block:4px}
.tundo{border:0;background:rgba(255,255,255,.18);color:#fff;font:inherit;font-weight:700;min-height:44px;padding:0 14px;border-radius:9px;flex:0 0 auto}
.tundo:focus-visible{outline-color:#fff}

/* ---- small named helpers that replace inline styles ---- */
.check.ink{color:var(--ink)}
.mb10{margin:0 0 10px}
.row.spread{justify-content:space-between}
.h3{margin:0;font-size:16px;font-weight:700}

/* dialog footers stay fully inside the dialog (they were clipped by 20px in v30) */
.md-foot{bottom:0;margin:0 -22px -22px;padding:12px 22px calc(14px + env(safe-area-inset-bottom,0px))}

.resume summary{min-height:44px}

/* v32: Numbers is one page again, every figure open */
#num-speed,#roi,#num-src,#num-left{scroll-margin-top:calc(var(--strip) + 16px)}
.jump{display:flex;flex-wrap:wrap;gap:8px}
.kpis{display:grid}
.kpi{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:14px;align-items:start}
.kpi+.kpi{border-top:1px solid var(--line)}
.kpi .k{font-weight:600}
.kpi .v{font-family:var(--display);font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap;grid-column:2;grid-row:1/3;text-align:right}
.kpi .d{font-size:13.5px;color:var(--muted);grid-column:1}
.kpi .c{grid-column:1/-1;font-size:13.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
@container (min-width:760px){
  .kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
  .kpi{display:flex;flex-direction:column;gap:4px}
  .kpi+.kpi{border-top:0;border-left:1px solid var(--line)}
  .kpi .k{font-weight:500;color:var(--muted);font-size:14px;min-height:2.6em}
  .kpi .v{text-align:left;font-size:32px}
  .kpi .c{margin:0}
}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.nt{border-collapse:collapse;width:100%;font-size:14.5px;font-variant-numeric:tabular-nums}
.nt th,.nt td{padding:10px 12px;text-align:right;vertical-align:middle;border-top:1px solid var(--line)}
.nt thead th{border-top:0;font-size:13px;font-weight:600;color:var(--muted);background:var(--sunk);white-space:normal}
.nt th:first-child{text-align:left}
.nt tbody th{font-weight:600}
.nt .bar2{display:block;margin-top:4px;min-width:48px}
.nt.left td:nth-child(2),.nt.left td:last-child,.nt.left thead th:nth-child(2),.nt.left thead th:last-child{text-align:left}
.nt .btn.link{min-height:44px;text-align:left}
.h3 .n{color:var(--muted);font-weight:500;margin-left:4px}
@container (max-width:520px){.nt{font-size:13.5px}.nt th,.nt td{padding:9px 8px}}

/* v33: Settings is one page again; the phone preview shows on desktop unless closed */
.setjump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.setall{display:flex;flex-direction:column;gap:16px;max-width:760px}
.setsec{scroll-margin-top:calc(var(--strip) + 16px)}
.nt.lft th,.nt.lft td{text-align:left}
.cstrip .go{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:600;font-size:14.5px;white-space:nowrap}

.sizes button:hover{border-color:var(--primary);background:var(--surface)}
.sizes button[aria-pressed="true"]{border-color:var(--primary);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--primary)}
@container (max-width:499px){.setjump{display:none}}

/* v35: getting-started checklist, grouped Needs you */
.setup{padding:14px;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.setup .sh2{display:flex;align-items:center;justify-content:space-between;gap:12px}
.setup .sh2 .h{margin:0}
.setup .sh2 .btn{min-height:44px}
.setup ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.setup li{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;color:var(--muted)}
.setup li+li{border-top:1px solid var(--line)}
.setup li.su-next{color:var(--ink);font-weight:600}
.setup li.su-ok .t{text-decoration:none;color:var(--ink)}
.setup .t{flex:1;min-width:0}
.setup .ck{width:24px;height:24px;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--good)}
.setup .ck.num{border:1.5px solid var(--line2);border-radius:50%;font-size:13px;font-weight:600;color:var(--muted)}
.setup li.su-next .ck.num{border-color:var(--primary);color:var(--ink)}
.pnl.tasks>.tgrp{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--muted);background:var(--sunk)}
.pnl.tasks>.tgrp:not(:first-child){border-top:1px solid var(--line)}
.pnl.tasks>.tgrp.urgent{color:var(--warn);background:var(--warn-soft);border-bottom:1px solid var(--warn-line)}
.pnl.tasks>.tgrp .n{font-weight:500}
.pnl.tasks>.tgrp+.task.t2{border-top:0}
.pnl .task.t2+.tgrp{border-top:1px solid var(--line)}
.task.t2 .what .one{align-self:flex-start;min-height:32px}
#num-src .roi-how{margin-bottom:12px}