/* Hallmark · genre: modern-minimal · macrostructure: Workbench (search-led) · theme: custom (ASP brand) · enrichment: branch marquee · nav: N5 floating pill · footer: Ft1-style contact mast
 * tone: utilitarian-clinical · anchor hue: ASP blue 243° · paper light / display Manrope sans / accent logo blue
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 * Public job portal (home.html, job.html). Colours, type and spacing come from css/tokens.css.
 */
html:has(body.public-page), .public-page { overflow-x:clip; }
.public-page { background:var(--color-paper); color:var(--color-ink); font-family:var(--font-body); }
.public-page [hidden] { display:none !important; }
.public-page h1, .public-page h2, .public-page h3, .public-page strong, .public-page .brand { font-family:var(--font-display); font-style:normal; }
.public-container { margin:0 auto; max-width:1180px; padding:0 var(--space-md); }
.skip-link { background:var(--color-accent); border-radius:var(--radius-input); color:var(--color-accent-ink); left:var(--space-xs); padding:var(--space-2xs) var(--space-sm); position:absolute; top:-60px; z-index:50; }
.skip-link:focus { top:var(--space-xs); }

/* Focus: instant, never animated */
.public-page a:focus-visible, .public-page button:focus-visible, .public-page select:focus-visible, .public-page input:focus-visible, .public-page textarea:focus-visible { outline:2px solid var(--color-focus); outline-offset:2px; }
.public-page input:focus, .public-page select:focus, .public-page textarea:focus { border-color:var(--color-accent); box-shadow:none; }

/* Buttons (public pages use the pill voice) */
.public-page .button { border-radius:var(--radius-pill); font-family:var(--font-body); white-space:nowrap; }
.public-page .button-primary { background:var(--color-accent); color:var(--color-accent-ink); }
.public-page .button-primary:hover { background:var(--color-accent-deep); color:var(--color-accent-ink); }
.public-page .button-secondary { background:var(--color-paper-2); box-shadow:inset 0 0 0 1px var(--color-rule-strong); color:var(--color-accent-deep); }
.public-page .button-secondary:hover { background:var(--color-paper-3); }
.public-page .button:active { transform:translateY(0); transition-duration:60ms; }
.public-page .button:disabled { background:var(--color-paper-sunk); box-shadow:inset 0 0 0 1px var(--color-rule); color:var(--color-faint); }

/* ── Header · N5 floating pill ── */
/* min-height holds the header's space before js/public-shell.js fills it in, so nothing jumps on load. */
.public-header { min-height:72px; padding:var(--space-xs) var(--space-md) 0; position:sticky; top:0; z-index:30; }
.public-header > .public-container { align-items:center; background:var(--color-paper-2); border:var(--rule); border-radius:var(--radius-pill); display:flex; gap:var(--space-md); height:60px; max-width:1132px; padding:0 var(--space-2xs) 0 var(--space-md); position:relative; transition:box-shadow var(--dur-med) var(--ease-out); }
.public-header.is-scrolled > .public-container { box-shadow:var(--shadow-float); }
.public-header .brand { color:var(--color-ink); }
.public-header .brand em { color:var(--color-accent); }
.public-nav { align-items:center; display:flex; gap:var(--space-3xs); margin-left:auto; }
.public-nav a { border-radius:var(--radius-pill); color:var(--color-ink-2); font-size:var(--text-sm); font-weight:700; padding:var(--space-2xs) var(--space-sm); white-space:nowrap; }
.public-nav a:hover { background:var(--color-paper-3); color:var(--color-accent-deep); }
.public-nav a[aria-current="page"] { background:var(--color-paper-3); color:var(--color-accent-deep); }
.public-nav [data-auth-links] { display:flex; gap:var(--space-3xs); }
.public-nav .button { font-size:var(--text-sm); padding:var(--space-2xs) var(--space-sm); }
.public-nav .button-outline { box-shadow:inset 0 0 0 1px var(--color-rule-strong); color:var(--color-accent-deep); }
.public-nav .button-outline:hover { background:var(--color-paper-3); }
/* Log in dropdown: Locum / Branch-PIC (js/public-shell.js) */
.login-menu { position:relative; }
.public-nav .login-toggle { gap:var(--space-2xs); }
.login-toggle svg { fill:none; height:12px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; transition:transform var(--dur-short) var(--ease-out); width:12px; }
.login-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.login-options { background:var(--color-paper-2); border:var(--rule); border-radius:var(--radius-card); box-shadow:var(--shadow-float); list-style:none; margin:0; min-width:200px; padding:var(--space-3xs); position:absolute; right:0; top:calc(100% + var(--space-2xs)); z-index:40; }
.public-nav .login-options a { border-radius:var(--radius-input); color:var(--color-ink); display:block; font-size:var(--text-md); font-weight:500; padding:var(--space-xs) var(--space-sm); }
.public-nav .login-options a:hover, .public-nav .login-options a:focus-visible { background:var(--color-paper-3); color:var(--color-accent-deep); }
.public-nav .login-options a:active { background:var(--color-rule); }
.public-nav .button-primary:hover { background:var(--color-accent-deep); color:var(--color-accent-ink); }
.public-menu-toggle { background:none; border:var(--rule); border-radius:var(--radius-pill); color:var(--color-accent-deep); display:none; font-size:var(--text-lg); margin-left:auto; padding:var(--space-3xs) var(--space-xs); }

/* ── Hero · title left, working copy right ── */
/* The hero wash runs up behind the floating header (72px = header offset + pill height). */
.public-hero { --header-space:72px; background:linear-gradient(180deg, var(--color-paper-3), var(--color-paper)); margin-top:calc(var(--header-space) * -1); padding:calc(var(--header-space) + var(--space-xl)) 0 var(--space-xl); }
/* Headline runs full width on two set lines; the description, buttons and stats sit in one row below it. */
.hero-grid { display:grid; gap:var(--space-lg); grid-template-columns:minmax(0,1fr); }
/* Hero headline in Manrope ExtraBold; the connecting word "with" is set in Instrument Serif italic. */
.public-hero h1 { font-family:var(--font-display); font-size:clamp(2.125rem, 4.8vw + 0.5rem, 4.5rem); font-weight:800; letter-spacing:-0.035em; line-height:1.05; margin:0; min-width:0; overflow-wrap:anywhere; text-wrap:balance; }
.public-hero h1 span { color:var(--color-accent); display:block; font-weight:400; letter-spacing:-0.03em; }
.public-hero h1 em { color:var(--color-accent); font-family:var(--font-script); font-size:1.08em; font-style:italic; font-weight:400; letter-spacing:-0.01em; line-height:0; }
.hero-title { min-width:0; }
.hero-title .eyebrow { color:var(--color-accent); font-size:var(--text-2xs); font-weight:700; letter-spacing:0.14em; margin:0 0 var(--space-sm); }
.public-hero .lead { color:var(--color-ink-2); font-size:var(--text-md); line-height:1.65; margin:0 0 var(--space-md); max-width:28.25rem; }
.hero-side { align-items:start; column-gap:var(--space-2xl); grid-template-rows:auto 1fr; display:grid; grid-template-areas:"lead stats" "actions stats"; grid-template-columns:minmax(0,1fr) auto; }
.hero-side .lead { grid-area:lead; }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--space-2xs); grid-area:actions; }
/* "Start in three steps": numbered path from registration to payment, joined by a thin line. */
.hero-steps { align-self:start; border-left:var(--rule); grid-area:stats; max-width:25rem; padding:var(--space-3xs) 0 var(--space-3xs) var(--space-2xl); }
.hero-steps-link { color:var(--color-accent-deep); display:inline-block; font-size:var(--text-sm); font-weight:700; margin-top:var(--space-sm); }
.hero-steps-link:hover { text-decoration:underline; text-underline-offset:3px; }
.hero-steps-title { color:var(--color-ink-2); font-family:var(--font-display); font-size:var(--text-sm); font-weight:700; margin:0 0 var(--space-sm); }
.hero-steps ol { display:grid; gap:var(--space-sm); list-style:none; margin:0; padding:0; }
.hero-steps li { align-items:start; display:grid; gap:var(--space-xs); grid-template-columns:28px minmax(0,1fr); position:relative; }
.hero-steps li:not(:last-child)::before { background:var(--color-rule-strong); bottom:calc(var(--space-sm) * -1); content:""; left:13.5px; position:absolute; top:30px; width:1px; }
.step-num { align-items:center; background:var(--color-paper-2); border:1.5px solid var(--color-accent); border-radius:50%; color:var(--color-accent-deep); display:flex; font-family:var(--font-display); font-size:var(--text-xs); font-weight:800; height:28px; justify-content:center; width:28px; }
.hero-steps strong { color:var(--color-ink); display:block; font-family:var(--font-display); font-size:var(--text-md); font-weight:700; line-height:1.3; }
.hero-steps li span:not(.step-num) { color:var(--color-muted); display:block; font-size:var(--text-sm); line-height:1.45; margin-top:2px; }
/* Onboarding walk-through. js/public-portal.js adds .is-animated and steps through .is-reached /
   .is-active on each <li>; without the script, or with reduced motion, the list stays as above. */
@media (prefers-reduced-motion:no-preference) {
  .hero-steps.is-animated li:not(:last-child)::after { background:var(--color-accent); bottom:calc(var(--space-sm) * -1); content:""; left:13px; position:absolute; top:30px; transform:scaleY(0); transform-origin:top; transition:transform 400ms var(--ease-in); width:2px; }
  .hero-steps.is-animated li.is-reached:not(:last-child)::after { transform:scaleY(1); transition:transform 1300ms var(--ease-in-out); }
  .hero-steps.is-animated .step-num { border-color:var(--color-rule-strong); color:var(--color-faint); transition:background 450ms var(--ease-out), border-color 450ms var(--ease-out), color 450ms var(--ease-out), transform 450ms var(--ease-out); }
  .hero-steps.is-animated li.is-reached .step-num { background:var(--color-accent); border-color:var(--color-accent); color:var(--color-accent-ink); }
  .hero-steps.is-animated li.is-active .step-num { animation:step-pulse 1.6s var(--ease-out) infinite; transform:scale(1.08); }
  .hero-steps.is-animated li > div { opacity:.5; transform:translate3d(0,4px,0); transition:opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
  .hero-steps.is-animated li.is-reached > div { opacity:1; transform:none; }
  .hero-steps.is-animated li.is-active strong { color:var(--color-accent-deep); }
  .hero-steps.is-animated.is-complete li.is-active .step-num { animation-iteration-count:2; }
}
@keyframes step-pulse { 0% { box-shadow:0 0 0 0 var(--color-accent-glow); } 70%, 100% { box-shadow:0 0 0 9px transparent; } }

/* ── Logo strip · every image in assets/branch-logos, greyscale, colour on hover ── */
.branch-band { background:var(--color-paper-2); padding:var(--space-sm) 0; }
/* The strip keeps its height from the first paint and fades the logos in once they are ready. */
.branch-marquee { height:44px; opacity:0; transition:opacity 500ms var(--ease-out); -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); overflow:hidden; }
.branch-band.is-ready .branch-marquee { opacity:1; }
.branch-track { display:flex; width:max-content; }
/* Logos are greyscaled, trimmed and sized by js/public-portal.js (--logo-w / --logo-h). */
.branch-list { --logo-scale:1; align-items:center; display:flex; gap:var(--space-2xl); list-style:none; margin:0; padding:0 var(--space-2xl) 0 0; }
.branch-list li { align-items:center; display:flex; height:44px; justify-content:center; }
.branch-list img { display:block; height:calc(var(--logo-h, 30px) * var(--logo-scale)); max-width:110px; object-fit:contain; opacity:.55; transition:opacity var(--dur-med) var(--ease-out); width:calc(var(--logo-w, auto) * var(--logo-scale)); }
.branch-list img.raw { filter:grayscale(1); width:auto; }
.branch-list img:hover { opacity:.9; }
.branch-band[data-static] .branch-marquee { -webkit-mask-image:none; mask-image:none; }
.branch-band[data-static] .branch-track { margin:0 auto; max-width:100%; overflow:auto hidden; scrollbar-width:none; }
.branch-band[data-static] .branch-list { gap:var(--space-2xl); padding:0 var(--space-md); }
@media (prefers-reduced-motion:no-preference) {
  .branch-band:not([data-static]) .branch-track { animation:branch-marquee var(--marquee-duration, 40s) linear infinite; }
  .branch-marquee:hover .branch-track { animation-play-state:paused; }
}
@keyframes branch-marquee { to { transform:translate3d(-50%,0,0); } }
@media (max-width:640px) {
  .branch-list { --logo-scale:.8; gap:var(--space-xl); padding-right:var(--space-xl); }
  .branch-list li, .branch-marquee { height:36px; }
}

/* ── Promotional banners ── */
.banner-section { padding:var(--space-lg) 0 0; }
.banner-carousel { background:var(--color-deep); border-radius:var(--radius-card); overflow:hidden; position:relative; }
.banner-track, .banner-carousel:empty { aspect-ratio:16 / 5; position:relative; }
.banner-carousel:empty { background:var(--color-paper-sunk); box-shadow:inset 0 0 0 1px var(--color-rule); }
.banner-slide { inset:0; opacity:0; position:absolute; transition:opacity 500ms var(--ease-in-out); visibility:hidden; }
.banner-slide.active { opacity:1; visibility:visible; }
.banner-slide img { display:block; height:100%; object-fit:cover; width:100%; }
.banner-caption { background:linear-gradient(0deg, oklch(22% 0.040 250 / 0.85), oklch(22% 0.040 250 / 0)); bottom:0; color:var(--color-accent-ink); left:0; padding:var(--space-xl) var(--space-lg) var(--space-md); position:absolute; right:0; text-align:left; }
.banner-caption h2 { color:var(--color-accent-ink); font-size:var(--text-xl); margin:0 0 var(--space-3xs); }
.banner-caption p { color:var(--color-deep-ink); font-size:var(--text-sm); margin:0; max-width:640px; }
.banner-caption a { color:var(--color-accent-soft); display:inline-block; font-size:var(--text-xs); font-weight:700; margin-top:var(--space-2xs); }
.banner-arrow { align-items:center; background:var(--color-paper-2); border:0; border-radius:50%; color:var(--color-accent-deep); display:flex; font-size:var(--text-lg); height:38px; justify-content:center; position:absolute; top:50%; transform:translateY(-50%); width:38px; }
.banner-arrow.prev { left:var(--space-sm); } .banner-arrow.next { right:var(--space-sm); }
.banner-dots { bottom:var(--space-sm); display:flex; gap:7px; position:absolute; right:var(--space-md); }
.banner-dots button { background:oklch(100% 0 0 / 0.45); border:0; border-radius:var(--radius-pill); height:8px; padding:0; transition:background var(--dur-short) var(--ease-out); width:8px; }
.banner-dots button[aria-current="true"] { background:var(--color-paper-2); width:22px; }

/* ── Search workbench ── */
.jobs-section { padding:var(--space-xl) 0 var(--space-2xl); scroll-margin-top:84px; }
.search-card { background:var(--color-paper-2); border:var(--rule); border-radius:var(--radius-card); padding:var(--space-md); }
.search-card-head { align-items:center; display:flex; flex-wrap:wrap; gap:var(--space-sm); justify-content:space-between; margin-bottom:var(--space-sm); }
.search-card-head h2 { font-size:var(--text-xl); letter-spacing:-0.02em; margin:0; }
.position-toggle { background:var(--color-paper-sunk); border:var(--rule); border-radius:var(--radius-pill); display:inline-flex; padding:3px; }
.position-toggle button { background:none; border:0; border-radius:var(--radius-pill); color:var(--color-ink-2); font-size:var(--text-sm); font-weight:700; padding:var(--space-2xs) var(--space-sm); white-space:nowrap; }
.position-toggle button:hover { color:var(--color-accent-deep); }
.position-toggle button[aria-pressed="true"] { background:var(--color-paper-2); box-shadow:0 0 0 1px var(--color-rule-strong); color:var(--color-accent-deep); }
.search-input { position:relative; }
.search-input input { border-color:var(--color-rule); border-radius:var(--radius-input); font-size:var(--text-md); padding:var(--space-sm) var(--space-sm) var(--space-sm) 44px; }
.search-input svg { fill:none; height:18px; left:15px; position:absolute; stroke:var(--color-faint); stroke-width:2; top:50%; transform:translateY(-50%); width:18px; }
.filter-head { align-items:center; display:flex; justify-content:space-between; margin:var(--space-sm) 0 var(--space-2xs); }
.filter-head span { color:var(--color-muted); font-size:var(--text-xs); font-weight:700; }
.filter-head button { background:none; border:0; color:var(--color-accent); font-size:var(--text-xs); font-weight:700; padding:var(--space-3xs) 0; }
.filter-head button:hover { color:var(--color-accent-deep); text-decoration:underline; }
.filter-grid { display:grid; gap:var(--space-xs) var(--space-2xs); grid-template-columns:repeat(4,minmax(0,1fr)); }
.filter-grid label { color:var(--color-ink-2); font-size:var(--text-2xs); gap:var(--space-3xs); min-width:0; }
.filter-grid select, .filter-grid input { border-color:var(--color-rule); border-radius:var(--radius-input); font-size:var(--text-sm); min-width:0; padding:var(--space-2xs) var(--space-xs); }
.filter-grid select:disabled { background:var(--color-paper-sunk); color:var(--color-faint); }
.results-bar { align-items:center; color:var(--color-muted); display:flex; flex-wrap:wrap; font-size:var(--text-sm); gap:var(--space-2xs); justify-content:space-between; margin:var(--space-md) var(--space-3xs) var(--space-xs); }
.results-bar strong { color:var(--color-ink); font-size:var(--text-md); }

/* ── Shift cards ── */
.shift-list { display:grid; gap:var(--space-xs); transition:opacity var(--dur-short) var(--ease-out); }
.shift-list.is-updating { opacity:.5; pointer-events:none; }
.shift-card { background:var(--color-paper-2); border:var(--rule); border-radius:var(--radius-card); display:grid; gap:var(--space-md); grid-template-columns:96px minmax(0,1fr) auto; padding:var(--space-sm) var(--space-md); transition:border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.shift-card:hover { border-color:var(--color-rule-strong); box-shadow:var(--shadow-lift); }
.shift-when { border-right:var(--rule); color:var(--color-muted); font-size:var(--text-2xs); padding-right:var(--space-sm); text-align:center; }
.shift-when .month { display:block; font-weight:700; text-transform:uppercase; }
.shift-when .day { color:var(--color-ink); display:block; font-family:var(--font-display); font-size:var(--text-2xl); font-variant-numeric:tabular-nums; font-weight:800; line-height:1.1; }
.shift-when .weekday { display:block; margin-bottom:var(--space-2xs); }
.shift-when .times { color:var(--color-ink-2); display:block; font-weight:700; line-height:1.5; }
.shift-when .duration { background:var(--color-paper-3); border-radius:var(--radius-pill); color:var(--color-accent-deep); display:inline-block; font-weight:700; margin-top:var(--space-2xs); padding:2px var(--space-2xs); }
.shift-main { min-width:0; }
.shift-main h3 { font-size:var(--text-lg); letter-spacing:-0.01em; margin:0 0 var(--space-3xs); overflow-wrap:anywhere; }
.shift-main h3 a:hover { color:var(--color-accent-deep); text-decoration:underline; text-underline-offset:3px; }
.shift-location { align-items:center; color:var(--color-muted); display:flex; font-size:var(--text-xs); gap:5px; margin-bottom:var(--space-xs); }
.shift-location svg { fill:none; flex:0 0 auto; height:13px; stroke:currentColor; stroke-width:2; width:13px; }
.chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--space-2xs); }
.chip { border:var(--rule); border-radius:var(--radius-pill); color:var(--color-ink-2); font-size:var(--text-2xs); font-weight:700; padding:var(--space-3xs) 10px; }
.chip-doctor { background:var(--color-doctor-bg); border-color:transparent; color:var(--color-doctor); }
.chip-nurse { background:var(--color-nurse-bg); border-color:transparent; color:var(--color-nurse); }
.chip-pay { background:var(--color-paper-2); border:1.5px solid var(--color-pay-rule); border-radius:var(--radius-input); color:var(--color-pay); font-size:var(--text-sm); font-variant-numeric:tabular-nums; padding:6px var(--space-xs); }
.chip-total { border:1.5px solid var(--color-rule); border-radius:var(--radius-input); color:var(--color-ink); font-size:var(--text-sm); font-variant-numeric:tabular-nums; padding:6px var(--space-xs); }
.shift-meta { color:var(--color-faint); font-size:var(--text-2xs); }
.shift-side { align-items:flex-end; display:flex; flex-direction:column; gap:var(--space-xs); justify-content:space-between; }
.shift-side .button { font-size:var(--text-xs); padding:var(--space-2xs) var(--space-sm); }
.listing-status { border-radius:var(--radius-pill); font-size:var(--text-2xs); font-weight:700; padding:5px 10px; }
.listing-open { background:var(--color-open-bg); color:var(--color-open); }
.listing-filled { background:var(--color-filled-bg); color:var(--color-filled); }
.listing-closed { background:var(--color-closed-bg); color:var(--color-closed); }
.state-panel { background:var(--color-paper-2); border:1px dashed var(--color-rule-strong); border-radius:var(--radius-card); color:var(--color-muted); padding:var(--space-xl) var(--space-md); text-align:center; }
.state-panel h3 { color:var(--color-ink); margin-bottom:6px; }
.skeleton { animation:shimmer 1.4s var(--ease-in-out) infinite; background:linear-gradient(90deg, var(--color-paper-sunk) 0%, var(--color-paper-2) 40%, var(--color-paper-sunk) 80%); background-size:200% 100%; border-radius:var(--radius-card); height:130px; }
@keyframes shimmer { from { background-position:100% 0; } to { background-position:-100% 0; } }
.inline-loading { align-items:center; color:var(--color-accent-deep); display:inline-flex; font-size:var(--text-xs); font-weight:700; gap:var(--space-2xs); }
.inline-loading:before { animation:spin .7s linear infinite; border:2px solid currentColor; border-radius:50%; border-right-color:transparent; content:''; height:12px; width:12px; }
.pagination { align-items:center; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:var(--space-md); }
.pagination button { background:var(--color-paper-2); border:var(--rule); border-radius:var(--radius-pill); color:var(--color-ink); font-weight:700; min-width:40px; padding:var(--space-2xs) var(--space-xs); white-space:nowrap; }
.pagination button:hover:not(:disabled) { border-color:var(--color-rule-strong); }
.pagination button[aria-current="page"] { background:var(--color-accent); border-color:var(--color-accent); color:var(--color-accent-ink); }
.pagination button:disabled { color:var(--color-faint); cursor:default; }
.pagination span { color:var(--color-muted); padding:0 var(--space-3xs); }

/* ── About ── */
.about-section { background:var(--color-paper-2); border-top:var(--rule); padding:var(--space-2xl) 0; scroll-margin-top:84px; }
.about-grid { display:grid; gap:var(--space-xl); grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
.about-grid h2 { font-size:var(--text-2xl); letter-spacing:-0.025em; margin-bottom:var(--space-sm); }
.about-grid p { color:var(--color-ink-2); line-height:1.7; max-width:36rem; }
.audience-card { border-top:var(--rule); padding:var(--space-md) 0; }
.audience-card:first-child { border-top:0; padding-top:0; }
.audience-label { color:var(--color-accent); font-size:var(--text-xs); font-weight:700; margin:0 0 var(--space-3xs); }
.audience-card h3 { font-size:var(--text-lg); margin-bottom:var(--space-2xs); }
.audience-card ul { color:var(--color-ink-2); font-size:var(--text-sm); line-height:1.9; margin:0; padding-left:var(--space-sm); }

/* ── Footer ── */
.public-footer { background:var(--color-paper-sunk); border-top:var(--rule); color:var(--color-muted); font-size:var(--text-sm); padding:var(--space-xl) 0 var(--space-md); }
.public-footer .brand { color:var(--color-ink); margin-bottom:var(--space-sm); }
.footer-grid { display:grid; gap:var(--space-lg); grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); }
.public-footer h3 { color:var(--color-accent); font-size:var(--text-sm); margin-bottom:var(--space-xs); }
.public-footer a { color:var(--color-ink-2); }
.public-footer a:hover { color:var(--color-accent-deep); text-decoration:underline; }
.public-footer ul { line-height:2; list-style:none; margin:0; padding:0; }
.public-footer address { font-style:normal; line-height:1.6; }
.footer-bottom { border-top:var(--rule); color:var(--color-muted); font-size:var(--text-xs); margin-top:var(--space-lg); padding-top:var(--space-sm); }

/* ── Job details ── */
.job-page { padding:var(--space-lg) 0 var(--space-2xl); }
.job-back { align-items:center; color:var(--color-accent); display:inline-flex; font-size:var(--text-sm); font-weight:700; gap:6px; margin-bottom:var(--space-sm); }
.job-back:hover { color:var(--color-accent-deep); text-decoration:underline; }
.job-grid { align-items:start; display:grid; gap:var(--space-md); grid-template-columns:minmax(0,1fr) 340px; }
.job-card, .apply-card { background:var(--color-paper-2); border:var(--rule); border-radius:var(--radius-card); padding:var(--space-md); }
.apply-card { position:sticky; top:96px; }
.job-card h1 { font-size:var(--text-2xl); letter-spacing:-0.025em; margin-bottom:6px; overflow-wrap:anywhere; }
.job-facts { border-bottom:var(--rule); border-top:var(--rule); display:grid; gap:var(--space-sm) var(--space-md); grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin:var(--space-md) 0; padding:var(--space-md) 0; }
.job-facts dt { color:var(--color-muted); font-size:var(--text-2xs); font-weight:700; }
.job-facts dd { font-family:var(--font-display); font-size:var(--text-md); font-variant-numeric:tabular-nums; font-weight:800; margin:var(--space-3xs) 0 0; }
.job-facts dd.pay { color:var(--color-open); }
.job-section { background:var(--color-paper-sunk); border-radius:var(--radius-input); margin-top:var(--space-sm); padding:var(--space-sm) var(--space-md); }
.job-section h2 { font-size:var(--text-md); margin-bottom:var(--space-2xs); }
.job-section p { color:var(--color-ink-2); line-height:1.7; margin:0; white-space:pre-line; }
.apply-card h2 { font-size:var(--text-lg); }
.apply-card .button { margin-top:var(--space-2xs); width:100%; }
.apply-card textarea { margin-top:6px; min-height:80px; }
.apply-card .form-error, .apply-card .form-success { margin-top:var(--space-2xs); }
.apply-note { color:var(--color-muted); font-size:var(--text-xs); line-height:1.6; margin:var(--space-xs) 0 0; }

/* ── Responsive (verified at 320 / 375 / 414 / 768) ── */
@media (max-width:980px) {
  .hero-grid { gap:var(--space-md); }
  .hero-side { display:block; }
  .hero-steps { border-left:0; border-top:var(--rule); margin-top:var(--space-lg); max-width:none; padding:var(--space-md) 0 0; }
  .filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .job-grid, .about-grid { grid-template-columns:minmax(0,1fr); }
  .apply-card { position:static; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px) {
  .public-menu-toggle { display:block; }
  .public-nav { align-items:stretch; background:var(--color-paper-2); border:var(--rule); border-radius:var(--radius-card); box-shadow:var(--shadow-float); display:none; flex-direction:column; left:0; padding:var(--space-2xs); position:absolute; right:0; top:calc(100% + var(--space-2xs)); }
  .public-nav.open { display:flex; }
  .public-nav a { padding:var(--space-xs) var(--space-sm); }
  .public-nav [data-auth-links] { border-top:var(--rule); flex-direction:column; margin-top:var(--space-3xs); padding-top:var(--space-2xs); }
  .public-nav [data-auth-links] .button { width:100%; }
  .login-options { border:0; box-shadow:none; min-width:0; padding:var(--space-3xs) 0 0; position:static; }
  .banner-track, .banner-carousel:empty { aspect-ratio:16 / 8; }
  .banner-caption { padding:var(--space-lg) var(--space-sm) var(--space-lg); } .banner-caption h2 { font-size:var(--text-lg); }
  .banner-arrow { display:none; }
}
@media (max-width:640px) {
  .public-container { padding:0 var(--space-sm); }
  .public-header { min-height:62px; padding:var(--space-2xs) var(--space-sm) 0; }
  .public-header > .public-container { height:54px; padding:0 var(--space-3xs) 0 var(--space-sm); }
  .public-hero { --header-space:62px; padding:calc(var(--header-space) + var(--space-xl)) 0 var(--space-lg); }
  .hero-actions .button { flex:1 1 auto; }
  .search-card { padding:var(--space-sm); }
  .shift-card { gap:var(--space-sm); grid-template-columns:78px minmax(0,1fr); padding:var(--space-sm); }
  .shift-when { padding-right:var(--space-xs); }
  .shift-side { align-items:center; border-top:var(--rule); flex-direction:row; grid-column:1 / -1; padding-top:var(--space-xs); }
  .footer-grid { grid-template-columns:minmax(0,1fr); }
  .job-card, .apply-card { padding:var(--space-md) var(--space-sm); }
}
@media (max-width:380px) {
  .filter-grid { grid-template-columns:minmax(0,1fr); }
  .position-toggle button { padding:var(--space-2xs) var(--space-xs); }
}
@media (prefers-reduced-motion:reduce) {
  .banner-slide, .skeleton { animation:none; transition:opacity 150ms linear; }
  .inline-loading:before { animation-duration:2s; }
}

/* ── Scroll reveal (js/public-motion.js) — shift cards only; a failsafe shows anything the script never armed ── */
@media (prefers-reduced-motion:no-preference) {
  html:has(body.public-page) { scroll-behavior:smooth; }
  .public-page main { animation:page-enter .4s var(--ease-out) both; }
  .public-page [data-reveal] { animation:reveal-failsafe .5s var(--ease-out) 2.5s forwards; opacity:0; transform:translate3d(0,12px,0); }
  .public-page [data-reveal="fade"] { transform:none; }
  .public-page [data-reveal].reveal-armed { animation:none; transition:opacity 400ms var(--ease-out) var(--reveal-delay,0ms), transform 400ms var(--ease-out) var(--reveal-delay,0ms); }
  .public-page [data-reveal].is-visible { animation:none; opacity:1; transform:none; }
  .public-page [data-reveal].reveal-done { transition:border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
  .public-page .button { transition:background var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
}
@keyframes reveal-failsafe { to { opacity:1; transform:none; } }
@media print { .public-page [data-reveal] { opacity:1 !important; transform:none !important; } .page-loader, .branch-band { display:none; } }

/* Open slots by area (home.html): totals per state and area only, no branch or slot details. */
.area-intro { color:var(--color-muted); font-size:var(--text-sm); margin:0 0 var(--space-sm); max-width:62ch; }
.area-actions { margin:0; }
.area-list { display:grid; gap:var(--space-md); transition:opacity var(--dur-short) var(--ease-out); }
.area-list.is-updating { opacity:.5; }
.area-group-head { align-items:baseline; border-bottom:var(--rule); display:flex; flex-wrap:wrap; gap:var(--space-2xs) var(--space-sm); justify-content:space-between; margin-bottom:var(--space-xs); padding-bottom:var(--space-2xs); }
.area-group-head h3 { font-size:var(--text-lg); margin:0; }
.area-group-head span { color:var(--color-muted); font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
.area-grid { display:grid; gap:var(--space-xs); grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.area-card { background:var(--color-paper-2); border:var(--rule); border-radius:var(--radius-card); padding:var(--space-sm) var(--space-md); }
.area-card h4 { font-family:var(--font-display); font-size:var(--text-md); margin:0 0 var(--space-3xs); }
.area-count { color:var(--color-muted); font-size:var(--text-sm); margin:0 0 var(--space-2xs); }
.area-count strong { color:var(--color-ink); font-size:var(--text-xl); font-variant-numeric:tabular-nums; margin-right:4px; }
.area-card .chip-row { margin-bottom:0; }
@media (max-width:640px) {
  .area-grid { grid-template-columns:1fr; }
  .area-card { padding:var(--space-sm); }
}

/* Brand logo in the public header and footer. */
.public-header .brand-logo { height:34px; }
.public-footer .brand-logo { height:36px; }
@media (max-width:560px) { .public-header .brand-logo { height:28px; } }