/* The four data hubs of the jobs host (web build slice 2, round 3): city, role, facet and "new this week"
   (design/mockups/web-final/hub-city.html, hub-role.html, hub-facet.html, new-this-week.html; growth.css for the components).
   Linked by routers/jobs_hubs.py. Every class here starts with hx-, so nothing leaks into another page group.
   Tokens only (daylight.css), so the dark scheme follows. */

.hx-hero h1.hx-h1{font-size:clamp(2.6rem,7vw,6rem);overflow-wrap:anywhere;line-height:1}
.hx-hero mark{background:var(--lime);color:#111827;padding:0 .06em}
.hx-fact{font:600 1.35rem/1.45 var(--f-d);max-width:40em;border-left:6px solid var(--cobalt);padding-left:18px;margin:20px 0 30px}
.hx-fact b{font-weight:800}
.hx-lede{color:var(--ink2);font-size:1.05rem;max-width:40em}
.hx-samp{font:500 .72rem/1.4 var(--f-m);letter-spacing:.04em;color:var(--ink2);margin-top:12px}
.hx-fine{font-size:.84rem;color:var(--ink2);margin:14px 0 0;max-width:46em}
.hx-fine a{color:var(--cobalt);font-weight:600}
.hx-note{display:block;margin-top:8px;font-size:.84rem;line-height:1.4;color:var(--ink2)}

/* the headline figures */
.hx-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border:2px solid var(--ink);background:var(--base);box-shadow:8px 8px 0 var(--cobalt)}
.hx-tiles>div{padding:22px 26px;border-right:2px solid var(--ink);min-width:0}
.hx-tiles>div:last-child{border-right:0}
.hx-tiles .big-num{display:block;margin-top:8px;font-size:clamp(2.6rem,5vw,4.6rem);overflow-wrap:anywhere}
.hx-tiles .big-num.small{font-size:clamp(1.9rem,3.2vw,3rem);line-height:1}

/* the facet strip: each facet is its own page, so these are links */
.hx-tabs{display:flex;border:1.5px solid var(--ink);width:max-content;max-width:100%;overflow:auto;margin:0 0 26px}
.hx-tabs a{display:flex;align-items:center;min-height:48px;padding:11px 20px;font:700 .78rem var(--f-m);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;background:var(--base);color:var(--ink);border-right:1.5px solid var(--ink);white-space:nowrap}
.hx-tabs a:last-child{border-right:0}
.hx-tabs a[aria-current=page]{background:var(--ink);color:var(--canvas)}
.hx-tabs a:hover:not([aria-current=page]){background:var(--lime);color:#111827}

/* the ranked ledger */
.hx-led{border:1.5px solid var(--rule);background:var(--base)}
.hx-lh,.hx-lr{display:grid;grid-template-columns:48px 1.6fr 120px 170px 110px 1fr;gap:18px;align-items:center;padding:14px 22px}
.hx-lh{font:600 .68rem var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);border-bottom:1.5px solid var(--rule)}
.hx-lr{border-bottom:1px solid var(--soft);text-decoration:none;color:var(--ink)}
.hx-lr:last-child{border:0}
.hx-lr:hover{background:var(--lav)}
.hx-lr .rk{font:800 1.9rem/1 var(--f-d);font-stretch:62%;color:var(--cobalt)}
.hx-lr .nm b{font-size:1.08rem;overflow-wrap:anywhere}
.hx-lr .nm .s{display:none;font-size:.84rem;color:var(--ink2)}
.hx-lr .n{font-variant-numeric:tabular-nums;font-weight:700}
.hx-lr .vb{height:14px;background:var(--sand)}
.hx-lr .vb i{display:block;height:100%;background:var(--cobalt)}
.hx-up{color:#111827;background:var(--lime);padding:2px 7px;font:600 .72rem var(--f-m)}

/* the same job in five places (role hub) */
.hx-cities{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.hx-cc{display:block;text-decoration:none;color:var(--ink);background:var(--base);border:1.5px solid var(--rule);padding:18px;transition:transform .2s,box-shadow .2s;min-width:0}
.hx-cc:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--cobalt)}
.hx-cc h3{font-size:2rem;margin:4px 0 14px;overflow-wrap:anywhere}
.hx-cc .m{margin-top:12px}
.hx-cc .m b{display:block;font:800 1.9rem/1 var(--f-d);font-stretch:62%;font-variant-numeric:tabular-nums}
.hx-cc .m b.p{font-size:1.3rem;overflow-wrap:anywhere}
.hx-cc .tr{height:12px;background:var(--sand);margin-top:6px}
.hx-cc .tr i{display:block;height:100%;background:var(--cobalt)}
.hx-cc .go{display:block;margin-top:14px;color:var(--cobalt)}

.hx-chips{display:flex;gap:10px;flex-wrap:wrap}
.hx-chips .chip{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.hx-thin{border:2px dashed var(--ink);background:var(--base);padding:26px 28px;margin-bottom:22px}
.hx-thin h3{margin:12px 0 10px;font-size:1.8rem}

/* the newest jobs (the shared card, restyled as the design's rows) */
.hx-latest ul{list-style:none;border:1.5px solid var(--rule);background:var(--base);margin-top:18px}
.hx-latest li{border-bottom:1px solid var(--soft)}.hx-latest li:last-child{border-bottom:0}
.hx-latest a.job{display:grid;grid-template-columns:1fr auto;gap:2px 20px;align-items:center;padding:18px 22px;text-decoration:none;color:var(--ink)}
.hx-latest a.job:hover{background:var(--lav)}
.hx-latest a.job .jt{grid-column:1;font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}
.hx-latest a.job .jm{grid-column:1;color:var(--ink2);font-size:.88rem}
.hx-latest a.job .jc{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.hx-latest a.job .jc .chip{min-height:0;padding:3px 8px;border-width:1.5px;font-size:.68rem;cursor:inherit;background:var(--base);color:var(--ink)}
.hx-latest a.job .jc .chip.pay{background:var(--lime);color:#111827;border-color:#111827}
.hx-latest a.job .when{font:500 .72rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.hx-latest .mark{position:relative;flex:none;width:var(--ms,44px);height:var(--ms,44px);background:var(--sand);overflow:hidden;box-sizing:border-box}
.hx-latest .mark::before{content:"";position:absolute;inset:0;background:url(/app/tunai-icon-512.png) center/cover no-repeat;filter:grayscale(1) opacity(.45)}
.hx-latest .mark .mk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:5px;box-sizing:border-box;opacity:0}
.hx-latest .mark .mk-img.ok{opacity:1}
.hx-latest a.job.has-mark{grid-template-columns:auto 1fr auto;column-gap:14px}
.hx-latest a.job.has-mark .mark{grid-column:1;grid-row:1/span 2;align-self:center}
.hx-latest a.job.has-mark .jt,.hx-latest a.job.has-mark .jm{grid-column:2}
.hx-latest a.job.has-mark .jc{grid-column:3}
.seeall{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

/* questions */
.hx-faq{display:grid;max-width:900px;border:1.5px solid var(--rule);background:var(--base)}
.hx-faq details{border-bottom:1px solid var(--soft)}.hx-faq details:last-child{border:0}
.hx-faq summary{cursor:pointer;list-style:none;padding:20px 24px;font:800 1.5rem/1.1 var(--f-d);font-stretch:66%;text-transform:uppercase;display:flex;justify-content:space-between;gap:16px;min-height:56px;align-items:center}
.hx-faq summary::-webkit-details-marker{display:none}
.hx-faq summary::after{content:"+";font-size:1.6rem;color:var(--cobalt)}
.hx-faq details[open] summary::after{content:"\2212"}
.hx-faq details p{padding:0 24px 22px;font-size:1.02rem;line-height:1.55;max-width:46em}

/* the weekly note */
.hx-wk{background:var(--lav);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:28px 32px}
.hx-wk h2{font-size:clamp(2rem,3.4vw,3.2rem);margin:0 0 8px;overflow-wrap:anywhere}
.hx-wk p{margin:0 0 16px;max-width:36em}
.hx-wk .alert-box{margin:0;padding:0;background:none;border:0;max-width:560px;position:relative}
.hx-wk .alert-box .row{display:flex;box-shadow:6px 6px 0 #111827}
.hx-wk .alert-box input[type=email]{flex:1;min-width:0;min-height:52px;font:500 16px var(--f-d);padding:12px 14px;border:1.5px solid #111827;background:var(--canvas);color:var(--ink)}
.hx-wk .alert-box .btn{clip-path:none;background:var(--lime);color:#111827;border:1.5px solid #111827;border-left:0;min-height:52px;white-space:nowrap}
.hx-wk .alert-box h3{font-size:1.5rem;margin:0 0 6px}
.hx-wk .alert-box .what,.hx-wk .alert-box .again{margin:8px 0 0;font-size:.95rem}
.hx-wk .alert-box .aerr{margin:10px 0 0;font-weight:700;color:var(--ink)}
.hx-wk .alert-box.sent,.hx-wk .alert-box.err{padding-left:14px;border-left:6px solid var(--cobalt)}
.hx-wk .alert-box.err{border-left-color:var(--coral)}
.hx-wk .alert-box a{color:var(--cobalt);font-weight:600}
.hx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* share and cite */
.hx-share{display:flex;flex-wrap:wrap;align-items:stretch;border:2px solid var(--ink);background:var(--base);box-shadow:6px 6px 0 var(--ink);width:max-content;max-width:100%}
.hx-share>.mono{display:flex;align-items:center;padding:0 16px;color:var(--ink2);border-right:2px solid var(--ink);order:-2}
.hx-share a,.hx-share button{font:700 .78rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:transparent;border:0;border-right:1.5px solid var(--soft);padding:14px 18px;min-height:48px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.hx-share a:last-child,.hx-share button:last-child{border-right:0}
.hx-share a:hover,.hx-share button:hover{background:var(--lav)}
.hx-share .wa{background:var(--lime);color:#111827;font-size:.95rem;padding:14px 24px;order:-1;border-right:2px solid var(--ink)}
.hx-share .wa::before{content:"";width:12px;height:12px;border-radius:50%;background:#111827}
.hx-cite{border:1.5px solid var(--rule);background:var(--base);padding:22px 24px;min-width:0}
.hx-cite .q{background:var(--sand);border-left:6px solid var(--cobalt);padding:14px 16px;margin:12px 0 16px;font:500 .86rem/1.55 var(--f-m);color:var(--ink);overflow-wrap:anywhere}
.hx-cite .act{display:flex;gap:10px;flex-wrap:wrap}
.hx-cite .act button,.hx-cite .act a{display:inline-flex;align-items:center;text-decoration:none;font:700 .78rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--base);border:1.5px solid var(--ink);padding:11px 16px;min-height:44px;cursor:pointer}
.hx-cite .act button:hover,.hx-cite .act a:hover,.hx-cite .act button.ok,.hx-share button.ok{background:var(--lime);color:#111827}

@media(max-width:1100px){
  .hx-cities{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  .hx-tiles{grid-template-columns:1fr}
  .hx-tiles>div{border-right:0;border-bottom:2px solid var(--ink)}.hx-tiles>div:last-child{border-bottom:0}
  .hx-lh{display:none}
  .hx-lr{grid-template-columns:36px 1fr auto;gap:12px;padding:14px 16px}
  .hx-lr>:nth-child(n+4){display:none}
  .hx-lr .nm .s{display:block}
  .hx-wk{padding:22px 20px}
  .hx-share{width:100%}.hx-share>.mono{display:none}
  .hx-share .wa{flex:1 1 100%;justify-content:center;border-right:0;border-bottom:2px solid var(--ink)}
  .hx-share a,.hx-share button{flex:1 1 auto;justify-content:center;padding:13px 10px}
  .hx-fact{font-size:1.15rem}
}
@media(max-width:700px){
  .hx-hero h1.hx-h1{line-height:.98}
  .hx-cities{grid-template-columns:1fr}
  .hx-latest a.job{grid-template-columns:1fr;padding:16px 18px}
  .hx-latest a.job .jc{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:6px}
  .hx-latest a.job.has-mark{grid-template-columns:auto 1fr}
  .hx-latest a.job.has-mark .jc{grid-column:1/-1}
  .hx-faq summary{font-size:1.25rem;padding:16px 18px}.hx-faq details p{padding:0 18px 18px}
  .hx-wk .alert-box .row{flex-direction:column;box-shadow:none;gap:10px}
  .hx-wk .alert-box .btn{border-left:1.5px solid #111827;justify-content:center}
  .hx-tabs{flex-wrap:wrap;width:100%}.hx-tabs a{flex:1 1 45%;justify-content:center;border-bottom:1.5px solid var(--ink)}
  .hx-thin{padding:20px 18px}
}

/* Phone: the tab strip wraps, so every label is readable without a swipe */
@media(max-width:700px){.hx-tabs{flex-wrap:wrap;overflow:visible;width:100%}.hx-tabs a{flex:1 1 auto;justify-content:center;text-align:center;padding:11px 10px;letter-spacing:.06em;box-shadow:inset 0 0 0 .75px var(--ink);border-right:0}}