@font-face{font-family:Brico;src:url(fonts/BricolageGrotesque-500-800.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:DMMono;src:url(fonts/DMMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:DMMono;src:url(fonts/DMMono-500.woff2) format("woff2");font-weight:500;font-display:swap}

/* ---------- palettes (pick one in config.json "theme") ---------- */
:root,[data-theme=sunset]{--bg:#fff6ea;--card:#fff;--ink:#1d1a22;--muted:#6d6874;--line:#e8dccb;--brand:#ff541c;--brand-dark:#c9390a;--on-brand:#fff;--pop:#ffd23f;
  --s1:#ffd23f;--s2:#ffb3c7;--s3:#bfe3ff;--s4:#c8f2d9;--s5:#ffcfa8;--ok:#14864f;--bad:#c4271c;color-scheme:light}
[data-theme=desert]{--bg:#f6efe3;--card:#fffdf8;--ink:#13201f;--muted:#5f6b69;--line:#e3d8c4;--brand:#0b7f73;--brand-dark:#085f56;--on-brand:#fff;--pop:#ff7a59;
  --s1:#ffd9a0;--s2:#bfe6df;--s3:#ffc7b8;--s4:#e2d9ff;--s5:#f3e6a6}
[data-theme=cobalt]{--bg:#f3f3ee;--card:#fff;--ink:#0f1222;--muted:#5d6072;--line:#dcdcd2;--brand:#2d4bff;--brand-dark:#1c33c9;--on-brand:#fff;--pop:#c6f432;
  --s1:#c6f432;--s2:#ffb8ca;--s3:#bfd0ff;--s4:#ffe08a;--s5:#b8f0e0}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 Brico,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:500;overflow-wrap:anywhere}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
svg{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:10px;z-index:20}
.skip:focus{left:8px}
.srlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main,footer,.top{max-width:760px;margin:0 auto;padding:0 16px}
.js .nojs{display:none}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;padding-top:14px;padding-bottom:8px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.mark{width:36px;height:36px;stroke:none}
.m-bg{fill:var(--brand);stroke:var(--ink);stroke-width:3}
.m-bell{fill:#fff;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.m-line{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.m-dot{fill:var(--pop);stroke:var(--ink);stroke-width:2.4}
.word{font:800 22px/1 Brico,sans-serif;letter-spacing:-.6px}
.word b{color:var(--brand)}
.logo small{font:500 11px DMMono,monospace;border:2px solid var(--ink);border-radius:7px;padding:1px 6px;letter-spacing:.5px}
.top nav{display:flex;gap:2px;font-size:14px;font-weight:700;width:100%;justify-content:space-between}
@media (min-width:640px){.top nav{width:auto;gap:6px}}
.top nav a{display:inline-flex;align-items:center;gap:4px;text-decoration:none;padding:7px 10px;white-space:nowrap;border-radius:99px;border:2px solid transparent;min-height:38px}
.top nav a:hover{border-color:var(--ink)}
.top nav a[aria-current=page]{background:var(--ink);color:#fff}
.navsaved svg{color:var(--brand);fill:currentColor;stroke:none}
.savecount{background:var(--brand);color:var(--on-brand);font:500 11px DMMono,monospace;border-radius:99px;padding:1px 7px;margin-left:1px}

/* ---------- text ---------- */
h1{font:800 clamp(38px,10vw,72px)/1.06 Brico,sans-serif;letter-spacing:-2px;margin:16px 0 16px}
.hl{background:linear-gradient(transparent 16%,var(--pop) 16%,var(--pop) 96%,transparent 96%);padding:0 .12em;border-radius:.15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sub{margin:0;color:#3f3b45;font-weight:500}
.kicker{font:500 12px DMMono,monospace;margin:0;color:var(--brand-dark);letter-spacing:1px;text-transform:uppercase}
.drophead{margin:22px 0 18px}
.drophead h1{font-size:clamp(34px,8.5vw,56px)}
.checked{font:400 12px DMMono,monospace;color:var(--muted);margin:16px 0 0;display:flex;align-items:center;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent);flex:none}

/* ---------- Noor intro ---------- */
.intro{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-top:14px}
.noor{width:84px;height:84px;border-radius:50%;border:3px solid var(--ink);box-shadow:3px 4px 0 var(--ink);object-fit:cover;background:#6b4a3a}
@media (prefers-reduced-motion:no-preference){.noor{animation:bob 3.2s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-4px) rotate(-2deg)}}}
.bubble{margin:0;background:var(--card);border:3px solid var(--ink);border-radius:20px 20px 20px 6px;padding:11px 15px;box-shadow:3px 4px 0 var(--ink);font-size:15px;line-height:1.4}
.inl{display:inline-flex;align-items:center;gap:3px;font-weight:800;color:var(--brand-dark)}
.inl svg{fill:currentColor;stroke:none}

/* ---------- latest video banner ---------- */
.latest{display:grid;gap:3px;text-decoration:none;background:var(--ink);color:#fff;border-radius:20px;padding:15px 18px;margin:0 0 18px;box-shadow:5px 6px 0 var(--brand)}
.latest .kicker{color:var(--pop)}
.latest b{font:800 20px/1.2 Brico,sans-serif;letter-spacing:-.3px}
.latest .go{color:#dcd8e0;font-size:14px}
.latest .go:after{content:" ›";font-weight:800}

/* ---------- search + filters ---------- */
.no-js .finder{display:none}
.finder{display:grid;gap:12px;margin-bottom:4px}
.qwrap{position:relative;display:flex;align-items:center}
.qwrap>svg{position:absolute;left:16px;width:20px;height:20px;color:var(--muted);pointer-events:none}
.finder input[type=search]{width:100%;font:600 17px Brico,sans-serif;padding:15px 48px 15px 46px;border:3px solid var(--ink);border-radius:18px;background:var(--card);box-shadow:4px 5px 0 var(--ink);-webkit-appearance:none;appearance:none}
.finder input[type=search]::-webkit-search-cancel-button{display:none}
.qclear{position:absolute;right:9px;width:34px;height:34px;border:0;border-radius:50%;background:var(--bg);font-size:22px;line-height:1;cursor:pointer}
.cats{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:4px 16px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cats::-webkit-scrollbar{display:none}
.cat{flex:none;border:2.5px solid var(--ink);background:var(--card);border-radius:12px;padding:7px 12px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;min-height:42px;transition:transform .12s}
.cat b{font:500 12px DMMono,monospace;opacity:.75;margin-left:3px}
.cat.s1{background:var(--s1)}.cat.s2{background:var(--s2)}.cat.s3{background:var(--s3)}.cat.s4{background:var(--s4)}.cat.s5{background:var(--s5)}
.cat:nth-child(4n+2){rotate:-1.5deg}.cat:nth-child(4n+3){rotate:1deg}.cat:nth-child(4n){rotate:-.8deg}
.cat:hover{transform:translateY(-1px)}
.cat[aria-pressed=true]{background:var(--ink);color:#fff;rotate:0deg}
.frow{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap}
.frow select{border:2.5px solid var(--ink);border-radius:12px;padding:9px 12px;background:var(--card);min-height:44px;font-weight:700;font-size:15px;max-width:100%}
.tog{display:flex;align-items:center;gap:8px;font-size:15px;min-height:44px;cursor:pointer}
.tog input{width:20px;height:20px;accent-color:var(--ink)}
.count{font:400 13px DMMono,monospace;color:var(--muted);margin:14px 0 10px}

/* ---------- job tiles ---------- */
.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.list{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
.mini{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--card);border:2.5px solid var(--ink);border-radius:18px;padding:12px;box-shadow:3px 4px 0 var(--ink);transition:transform .1s,box-shadow .1s;min-width:0}
.mini:hover{transform:translate(-1px,-1px);box-shadow:4px 5px 0 var(--ink)}
.mini:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.mbody{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.mbody p{margin:0}
.mco{font-size:12px;line-height:1.3;color:var(--muted);font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mrole{font:800 17px/1.15 Brico,sans-serif;letter-spacing:-.4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mrole a{text-decoration:none}
.mrole a:after{content:"";position:absolute;inset:0;border-radius:16px}
.mmeta{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:center;font:400 11.5px DMMono,monospace;color:var(--muted)}
.mini .mmeta{margin-top:auto!important;padding-top:4px}
.tag{font:700 11.5px/1.5 Brico,sans-serif;color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:0 7px;background:var(--s1);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag.s2{background:var(--s2)}.tag.s3{background:var(--s3)}.tag.s4{background:var(--s4)}.tag.s5{background:var(--s5)}
.msal{font-size:12.5px;line-height:1.3;color:#3f3b45;border-top:1.5px dashed var(--line);padding-top:6px!important}
.closedtag{color:var(--bad)}
.badge{flex:none;width:42px;height:42px;border-radius:12px;background:var(--b);color:#fff;border:2.5px solid var(--ink);display:grid;place-items:center;font:800 16px Brico,sans-serif;letter-spacing:-.5px}
.badge.lg{width:60px;height:60px;border-radius:17px;font-size:22px;border-width:3px}
.mini.is-closed{background:color-mix(in srgb,var(--card) 65%,var(--bg));border-color:#a9a5ad;box-shadow:3px 4px 0 #a9a5ad}
.mini.is-closed .mrole,.job.is-closed h1,.job.is-closed h2{color:var(--muted)}
.is-closed .badge{filter:grayscale(1);opacity:.55}
.gone{grid-column:1/-1}

/* save button */
.savebtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;border:2.5px solid var(--ink);background:var(--card);border-radius:99px;font-weight:800;font-size:14px;transition:transform .12s}
.savebtn svg{width:18px;height:18px}
.mini .savebtn{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;padding:0}
.mini .savebtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.savebtn[aria-pressed=true]{background:var(--brand);color:var(--on-brand);border-color:var(--ink)}
.savebtn[aria-pressed=true] svg{fill:currentColor}
.savebtn.pop{animation:pop .3s ease}
@keyframes pop{40%{transform:scale(1.18)}}

.more{display:block;width:100%;margin:16px 0 0;padding:14px;border:3px solid var(--ink);border-radius:99px;background:var(--card);font-weight:800;cursor:pointer;min-height:52px;box-shadow:3px 4px 0 var(--ink)}
.more.ghost{box-shadow:none;border-style:dashed;color:var(--muted);font-weight:700}
.empty{background:var(--card);border:3px dashed var(--line);border-radius:20px;padding:24px;text-align:center}
.empty p{margin:6px 0 12px}
.empty button{border:0;background:none;color:var(--brand-dark);font-weight:800;text-decoration:underline;cursor:pointer;padding:0}
.empty .btn{display:inline-block}
.gone{background:var(--card);border:2.5px dashed #a9a5ad;border-radius:18px;padding:14px;display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--muted)}
.gone button{border:2px solid var(--ink);background:var(--card);border-radius:99px;padding:6px 12px;font-weight:700;cursor:pointer}

/* ---------- full job card ---------- */
.jobs{display:grid;gap:22px}
.job{background:var(--card);border:3px solid var(--ink);border-radius:24px;padding:18px 18px 20px;box-shadow:6px 7px 0 var(--ink)}
.jobtop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.num{font:500 12px DMMono,monospace;background:var(--ink);color:#fff;border-radius:99px;padding:4px 11px}
.ok{font:400 12px DMMono,monospace;color:var(--ok)}
.stamp{font:800 15px Brico,sans-serif;color:var(--bad);border:2.5px solid var(--bad);border-radius:8px;padding:0 8px;rotate:-4deg}
.head{display:flex;gap:14px;align-items:center;margin:16px 0 10px}
.co{margin:0;font-weight:700}
.co span{font-weight:500;color:var(--muted)}
.job h1,.job h2{font:800 clamp(28px,7.4vw,40px)/1.02 Brico,sans-serif;margin:2px 0 0;letter-spacing:-1.2px}
.reqs{margin:16px 0;padding:0;list-style:none;display:grid;gap:9px}
.reqs li{padding-left:24px;position:relative}
.reqs li:before{content:"";position:absolute;left:2px;top:8px;width:11px;height:11px;border-radius:4px;background:var(--brand)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.facts div{background:var(--bg);border-radius:14px;padding:10px 12px}
.facts dt{font:400 11px DMMono,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.facts dd{margin:2px 0 0}
.facts b{display:block;font-size:17px;font-weight:800}
.facts small{display:block;color:var(--muted);font-size:13px;line-height:1.35;margin-top:2px}
.muted{color:var(--muted)}
.left.soon{color:var(--brand-dark)}
.apply,.btn{display:block;text-align:center;text-decoration:none;font:800 19px Brico,sans-serif;letter-spacing:-.2px;background:var(--brand);color:var(--on-brand);
  border:3px solid var(--ink);border-radius:18px;padding:14px 18px;box-shadow:4px 5px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.apply:after{content:" ↗"}
.apply:active,.btn:active{transform:translate(4px,5px);box-shadow:0 0 0 var(--ink)}
.via{font-size:13px;color:var(--muted);text-align:center;margin:10px 0 0}
.via b{color:var(--ink)}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.tools .savebtn,.tool{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:2.5px solid var(--ink);border-radius:14px;background:var(--card);padding:9px 6px;font-size:14px;font-weight:800;text-decoration:none;cursor:pointer;min-height:46px}
.tool svg{width:17px;height:17px}
.tool.report{border-color:var(--line);color:var(--muted)}
.jlink{display:block;text-align:center;margin-top:14px;font-weight:800;color:var(--brand-dark)}
.jlink:after{content:" ›"}
.job.is-closed{background:color-mix(in srgb,var(--card) 70%,var(--bg));box-shadow:6px 7px 0 #a9a5ad;border-color:#a9a5ad}
.closedbox{border:2.5px dashed #a9a5ad;border-radius:16px;padding:12px;text-align:center}
.closedbox b{display:block}
.closedbox a{font-weight:800;color:var(--brand-dark)}
.crumbs{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 6px;font-size:14px;font-weight:800}
.crumbs a{text-decoration:none;border-bottom:2.5px solid var(--ink)}
.crumbs .back{display:inline-flex;align-items:center;gap:4px;border:2.5px solid var(--ink);border-bottom-width:2.5px;border-radius:99px;padding:6px 14px 6px 10px;background:var(--card);min-height:40px}
.crumbs .back:before{content:"‹";font-size:20px;line-height:1;margin-top:-2px}
.crumbs .fwd{align-self:center}
.crumbs .fwd:after{content:" ›"}
.similar{margin:30px 0}
.similar h2,.follow h2,.teaser h2{font:800 26px/1.05 Brico,sans-serif;letter-spacing:-.8px;margin:0 0 10px}

/* ---------- boxes ---------- */
.follow,.teaser{margin:30px 0;padding:18px;border:3px solid var(--ink);border-radius:22px;background:var(--ink);color:#fff}
.follow p{margin:0 0 14px;color:#d6d2dc}
.btns{display:grid;gap:12px}
.btn.alt{background:var(--card);color:var(--ink)}
.follow .btn{border-color:#fff;box-shadow:4px 5px 0 var(--brand)}
.teaser{background:var(--card);color:var(--ink);box-shadow:4px 5px 0 var(--pop)}
.teaser p{margin:0 0 8px}
.teaser a{font-weight:800;color:var(--brand-dark)}
.teaser a:after{content:" ›"}
.alist{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.alist a{display:block;text-decoration:none;background:var(--card);border:3px solid var(--ink);border-radius:18px;padding:14px 16px;box-shadow:3px 4px 0 var(--ink)}
.alist b{display:block;font-size:18px}
.alist span{display:block;color:var(--muted);font-size:14px}
.alist em{font:400 12px DMMono,monospace;font-style:normal;color:var(--ok)}
.prose{background:var(--card);border:3px solid var(--ink);border-radius:22px;padding:6px 20px 18px}
.prose h2{font:800 22px/1.15 Brico,sans-serif;letter-spacing:-.5px;margin:20px 0 4px}
.prose li{margin:6px 0}
.prose .btns{margin:12px 0}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:18px;translate:-50% 0;z-index:30;background:var(--ink);color:#fff;border-radius:16px;padding:12px 16px;font-weight:700;font-size:15px;
  display:flex;gap:14px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:calc(100% - 32px);width:max-content}
.toast a,.toast .undo{color:var(--pop);font-weight:800;white-space:nowrap}
.toast .undo{background:none;border:0;padding:4px 0;text-decoration:underline;cursor:pointer;font-size:15px}

/* ---------- footer ---------- */
footer{margin-top:44px;padding-bottom:40px;font-size:14px;color:#3f3b45;border-top:3px solid var(--ink);padding-top:16px}
footer .warn{background:var(--ink);color:#fff;padding:12px 14px;border-radius:14px;border-left:7px solid var(--brand)}
.flinks{display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:700}

/* ---------- preview-only colour picker ---------- */
.themepick{position:fixed;right:12px;bottom:12px;z-index:40;display:flex;gap:6px;align-items:center;background:#fff;border:2px solid #111;border-radius:14px;padding:6px 8px;font:500 11px DMMono,monospace;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.themepick button{border:2px solid #111;border-radius:9px;padding:5px 8px;font:700 12px Brico,sans-serif;cursor:pointer;color:#fff}
.sw-sunset{background:#ff541c}.sw-desert{background:#0b7f73}.sw-cobalt{background:#2d4bff}
.has-toast .themepick{bottom:80px}

@media (min-width:640px){.btns{grid-template-columns:1fr 1fr}.job{padding:22px 24px 24px}.cats{flex-wrap:wrap;margin:0;padding:4px 0 8px;overflow:visible}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- bottom menu bar (phones) ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border-top:2.5px solid var(--ink);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;font-size:11.5px;font-weight:700;color:var(--muted);padding:5px 2px;border-radius:12px;min-height:50px;justify-content:center}
.tabbar svg{width:22px;height:22px}
.tabbar a[aria-current=page]{color:var(--ink);background:var(--bg)}
.tabbar a[aria-current=page] svg{color:var(--brand)}
.tabbar a[data-tab=saved] svg{fill:none}
.tabbar a[data-tab=saved][aria-current=page] svg{fill:currentColor}
.tabbar .savecount{position:absolute;top:2px;left:calc(50% + 6px);font-style:normal}
body{padding-bottom:84px}
.toast{bottom:88px}
@media (max-width:639px){.top nav{display:none}.top{padding-bottom:4px}}
@media (min-width:640px){.tabbar{display:none}body{padding-bottom:0}.toast{bottom:18px}}

/* ---------- filters button, sort, active labels ---------- */
.frow{justify-content:space-between}
.fbtn{display:inline-flex;align-items:center;gap:8px;border:2.5px solid var(--ink);background:var(--card);border-radius:12px;padding:8px 14px;font-weight:800;font-size:15px;min-height:44px;cursor:pointer;box-shadow:2px 3px 0 var(--ink)}
.fbtn svg{width:19px;height:19px}
.fcount{background:var(--brand);color:var(--on-brand);font:500 12px DMMono,monospace;border-radius:99px;padding:1px 8px}
.sortwrap{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--muted)}
.sortwrap select{border:2.5px solid var(--ink);border-radius:12px;padding:8px 10px;background:var(--card);min-height:44px;font-weight:800;font-size:15px;color:var(--ink)}
.active{display:flex;flex-wrap:wrap;gap:8px}
.chipx{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--ink);background:var(--pop);border-radius:99px;padding:5px 8px 5px 12px;font-weight:700;font-size:13px;cursor:pointer;min-height:36px}
.chipx span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;line-height:1}
.chipx.clearall{background:none;border-style:dashed;padding-right:12px}

/* ---------- filter panel (slides up on phones, centred on computers) ---------- */
.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;max-height:88vh;max-height:88dvh;background:var(--bg);color:var(--ink);
  border-radius:24px 24px 0 0;border-top:3px solid var(--ink);display:none;flex-direction:column;overflow:hidden}
.sheet[open]{display:flex;animation:up .22s ease}
@keyframes up{from{transform:translateY(40px)}}
.sheet::backdrop{background:rgba(20,16,24,.45)}
@media (min-width:640px){.sheet{margin:auto;border-radius:24px;border:3px solid var(--ink);max-height:82vh}}
.sheet-in{overflow-y:auto;padding:4px 18px 10px;-webkit-overflow-scrolling:touch}
.sheet-head{position:sticky;top:0;background:var(--bg);display:flex;justify-content:space-between;align-items:center;padding:14px 0 6px;z-index:1}
.sheet-head h2{font:800 26px/1 Brico,sans-serif;letter-spacing:-.8px;margin:0}
.x{width:42px;height:42px;border-radius:50%;border:2.5px solid var(--ink);background:var(--card);font-size:24px;line-height:1;cursor:pointer}
.sheet section{padding:12px 0;border-bottom:2px dashed var(--line)}
.sheet section:last-child{border-bottom:0}
.sheet h3{font:800 16px Brico,sans-serif;margin:0 0 10px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:2.5px solid var(--ink);background:var(--card);border-radius:12px;padding:7px 12px;font-weight:700;font-size:14px;cursor:pointer;min-height:42px}
.opt[aria-pressed=true]{background:var(--ink);color:#fff}
.hint{font:400 12px DMMono,monospace;color:var(--muted);margin:8px 0 0}
.cq{width:100%;border:2.5px solid var(--ink);border-radius:12px;padding:11px 12px;font:600 16px Brico,sans-serif;background:var(--card);margin-bottom:10px;-webkit-appearance:none;appearance:none}
.clist{display:grid;gap:6px}
.copt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:2px solid var(--line);background:var(--card);border-radius:12px;padding:9px 12px;font-weight:700;font-size:15px;cursor:pointer;min-height:46px}
.copt b{margin-left:auto;font:500 12px DMMono,monospace;color:var(--muted)}
.tick{flex:none;width:20px;height:20px;border:2.5px solid var(--ink);border-radius:6px;background:var(--card);display:grid;place-items:center}
.copt[aria-pressed=true]{border-color:var(--ink)}
.copt[aria-pressed=true] .tick{background:var(--brand)}
.copt[aria-pressed=true] .tick:after{content:"";width:9px;height:5px;border:solid #fff;border-width:0 0 2.5px 2.5px;rotate:-45deg;margin-top:-2px}
.sheet .tog{font-weight:600}
.sheet-foot{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:2.5px solid var(--ink);background:var(--card)}
.sheet-foot .btn{font-size:17px;padding:12px}
.ghostbtn{border:0;background:none;font-weight:800;text-decoration:underline;cursor:pointer;padding:0 8px;color:var(--ink)}
body.sheet-open{overflow:hidden}

/* ---------- badges on tiles ---------- */
.flags{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 2px!important}
.flag{font:800 11px/1 Brico,sans-serif;text-transform:uppercase;letter-spacing:.4px;border-radius:6px;padding:4px 6px}
.flag.new{background:var(--brand);color:var(--on-brand)}
.flag.soon{background:var(--ink);color:var(--pop)}

/* ---------- company links on job pages ---------- */
.colink{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
.morefrom{display:block;text-align:center;margin-top:12px;font-weight:800;color:var(--brand-dark)}
.morefrom:after{content:" ›"}

/* ---------- I applied + reminder ---------- */
.track{display:grid;gap:8px;margin-top:12px}
.trackbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:2.5px dashed var(--ink);background:var(--card);border-radius:14px;padding:10px 12px;font-weight:800;font-size:15px;cursor:pointer;min-height:46px;text-align:center}
.trackbtn svg{width:19px;height:19px}
.trackbtn[aria-pressed=true]{border-style:solid;background:var(--s4)}
.flag.applied{background:var(--s4);color:var(--ink);border:1.5px solid var(--ink)}

/* ---------- recently viewed ---------- */
.recent{margin:0 0 18px}
.recent h2{font:800 18px Brico,sans-serif;letter-spacing:-.3px;margin:0 0 8px}
.rrow{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none}
.rrow::-webkit-scrollbar{display:none}
.rcard{flex:none;display:flex;gap:10px;align-items:center;width:230px;text-decoration:none;background:var(--card);border:2.5px solid var(--ink);border-radius:14px;padding:8px 10px}
.rcard .badge{width:34px;height:34px;border-radius:10px;font-size:13px;border-width:2px}
.rcard b{display:block;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.rcard small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.rcard.is-closed{opacity:.6}
.rclear{flex:none;align-self:center;border:0;background:none;font-weight:700;color:var(--muted);text-decoration:underline;cursor:pointer;padding:8px}

/* ---------- Saved / Applied tabs ---------- */
.seg{display:grid;grid-template-columns:1fr 1fr;border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--card);margin:0 0 4px}
.seg button{border:0;background:none;padding:11px 8px;font-weight:800;font-size:15px;cursor:pointer;min-height:46px}
.seg button+button{border-left:2.5px solid var(--ink)}
.seg button b{font:500 12px DMMono,monospace;background:var(--bg);border-radius:99px;padding:1px 8px;margin-left:4px}
.seg button[aria-selected=true]{background:var(--ink);color:#fff}
.seg button[aria-selected=true] b{background:var(--brand);color:var(--on-brand)}
.gone button{display:inline-flex}

/* ---------- official careers sites ---------- */
.dir{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px}
.dir li{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:2.5px solid var(--ink);border-radius:16px;padding:12px 14px}
.dir b{display:block;font-size:17px}
.dir .site{display:inline-block;font:500 14px DMMono,monospace;color:var(--brand-dark);margin:2px 10px 0 0;word-break:break-all}
.dir .hint{margin-top:4px}
.dir .hint a{color:var(--ink);font-weight:700}

/* ---------- pressed states win over layout rules (keep last) ---------- */
.savebtn[aria-pressed=true],.tools .savebtn[aria-pressed=true]{background:var(--brand);color:var(--on-brand);border-color:var(--ink)}
.savebtn[aria-pressed=true] svg{fill:currentColor;stroke:currentColor}
/* small text on orange uses the deeper orange so it stays readable outdoors */
.savebtn[aria-pressed=true],.tools .savebtn[aria-pressed=true]{background:var(--brand-dark)}
.savecount,.fcount,.seg button[aria-selected=true] b,.flag.new{background:var(--brand-dark)}
.sheet-foot .btn{font-size:19px}