/* Walnut Care — Candidate Portal & Careers
   Brand language matched to the Family Portal (the Connected "luxe" theme):
   warm parchment + plum + terracotta, omnes/pauline (Typekit) type, dark-mode,
   fully var-driven. Candidate-portal flair: careers hero, role cards, stepper.
   Strict CSP retained (Typekit is the only added source). v3 2026-06-27. */
:root{
  /* Walnut brand — luxe (mirrors family portal) */
  --plum:#762661; --plum-d:#5a1a4a; --plum-l:#a13d7a; --plum-soft:#f8e8f3;
  --terra:#b86f54; --terra-d:#9c5740;
  --gold:#b89a5e;
  --bg:#f4ecd8; --surface:#faf3e3; --card:#fffdf8;
  --ink:#3b2f24; --muted:#94806a; --line:#e3d4b6;
  --ok:#3d7a4e; --okbg:#e8f1e4; --bad:#a8453a; --badbg:#f7e6e2; --amber:#9a6700; --amberbg:#f8eed6;
  --shadow:0 1px 3px rgba(91,26,74,.06),0 10px 30px rgba(91,26,74,.08);
  --shadow-lg:0 14px 40px rgba(91,26,74,.16);
  --radius:18px; --radius-sm:12px;
  --display:'pauline','omnes-variable',Georgia,'Times New Roman',serif;
  --body:'omnes-variable',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* legacy aliases so existing selectors keep working */
  --walnut:var(--plum);--walnut-dk:var(--plum-d);--walnut-lt:var(--plum-l);
  --walnut-wash:var(--plum-soft);--err:var(--bad);--errbg:var(--badbg);--warn:var(--amber);--warnbg:var(--amberbg);
}
[data-theme="dark"]{
  --plum:#c66aa8; --plum-d:#a4498a; --plum-l:#d68bc0; --plum-soft:#3a2336;
  --terra:#d08a6e; --terra-d:#b86f54; --gold:#caa968;
  --bg:#1a1620; --surface:#241d2c; --card:#2b2235;
  --ink:#ece6f0; --muted:#a596b0; --line:#3d3348;
  --ok:#5fb377; --okbg:#22311f; --bad:#e0796d; --badbg:#33211d; --amber:#d6a740; --amberbg:#332a18;
  --shadow:0 8px 28px rgba(0,0,0,.4); --shadow-lg:0 14px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;background-image:radial-gradient(120% 80% at 50% -10%,var(--surface) 0%,var(--bg) 60%);background-attachment:fixed}
a{color:var(--plum);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:.005em}

/* ---- Accessibility helpers ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:.5rem;top:-3rem;z-index:60;background:var(--card);color:var(--plum-d);font-weight:700;padding:.55rem .9rem;border-radius:0 0 12px 12px;border:1px solid var(--line);box-shadow:var(--shadow);transition:top .15s ease}
.skip-link:focus{top:0;text-decoration:none;outline:3px solid var(--plum-l);outline-offset:2px}
#app:focus{outline:none}
:focus-visible{outline:3px solid var(--plum-l);outline-offset:2px;border-radius:6px}
.noscript{max-width:980px;margin:1.2rem auto;padding:1rem 1.1rem;background:var(--amberbg);border:1px solid var(--line);color:var(--amber);border-radius:var(--radius)}
.noscript p{margin:.4rem 0}

/* ---- Header ---- */
.site-head{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,var(--plum) 0%,var(--plum-d) 100%);color:#fff;box-shadow:0 2px 18px rgba(40,10,40,.28)}
.site-head .wrap{display:flex;align-items:center;gap:.7rem;max-width:980px;margin:0 auto;padding:.7rem 1rem}
.brand{display:flex;align-items:center;gap:.65rem;color:#fff;font-weight:700;font-size:1.05rem}
.brand:hover{text-decoration:none}
.brand .mark{width:34px;height:34px;border-radius:10px;flex:none;background:#fff;color:var(--plum);font-family:var(--display);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.15rem;box-shadow:0 2px 7px rgba(0,0,0,.22)}
.brand .name{font-family:var(--display);font-weight:600;font-size:1.15rem;line-height:1}
.brand small,.brand .badge{display:block;font-weight:700;font-size:.62rem;opacity:.85;letter-spacing:.18em;text-transform:uppercase;line-height:1;color:#f0d9c9;margin-top:.15rem}
.head-spacer{flex:1}
.head-link{color:#fff;opacity:.95;font-size:.85rem;font-weight:600;padding:.45rem .85rem;border-radius:10px;border:1px solid rgba(255,255,255,.3)}
.head-link:hover{background:rgba(255,255,255,.16);text-decoration:none;opacity:1}
.hdr-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.16);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;cursor:pointer;padding:0}
.hdr-btn:hover{background:rgba(255,255,255,.28)}

/* ---- Layout ---- */
.container{max-width:980px;margin:0 auto;padding:1.5rem 1rem 3rem}
.narrow{max-width:620px}

/* ---- Hero (illustrated, photo-ready) ---- */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--card) 0%,var(--plum-soft) 70%,var(--surface) 100%);border:1px solid var(--line);border-radius:var(--radius);padding:2.1rem 1.6rem;margin-bottom:1.4rem;box-shadow:var(--shadow)}
.hero::after{content:"";position:absolute;right:-12px;bottom:-12px;width:230px;height:230px;background-repeat:no-repeat;background-position:bottom right;background-size:contain;opacity:.85;pointer-events:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="none" stroke="%23a13d7a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M40 120 L100 70 L160 120"/><rect x="60" y="118" width="80" height="62" rx="6" fill="%23f8e8f3"/><path d="M88 180 v-34 h24 v34"/><circle cx="100" cy="44" r="15" fill="%23f4ecd8"/><path d="M70 150 q14 -22 30 -10 q16 -12 30 10" stroke="%23b86f54"/></svg>')}
@media(max-width:560px){.hero::after{width:130px;height:130px;opacity:.55}}
.hero>*{position:relative;z-index:1}
.hero h1{margin:.3rem 0 .55rem;font-size:2rem;color:var(--plum);line-height:1.12;max-width:18ch}
.hero p{margin:0;color:var(--muted);max-width:46ch;font-size:1.05rem}
.hero .btn{margin-top:1.15rem}
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--terra-d);background:var(--card);border:1px solid var(--line);padding:.28rem .65rem;border-radius:999px;box-shadow:var(--shadow)}
.hero--photo{color:#fff}
.hero--photo::before{content:"";position:absolute;inset:0;background-image:var(--hero-photo);background-size:cover;background-position:center;z-index:0}
.hero--photo::after{display:none}
.hero--photo .scrim{position:absolute;inset:0;background:linear-gradient(120deg,rgba(90,26,74,.86),rgba(90,26,74,.34));z-index:0}
.hero--photo h1,.hero--photo p{color:#fff}
.hero--photo .eyebrow{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}

.roles-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin:.2rem .2rem 1rem}
.roles-head h2{font-size:1.25rem;color:var(--ink);margin:0}
.roles-head .count{font-size:.82rem;color:var(--muted);font-weight:600}

/* ---- Cards / roles ---- */
.grid{display:grid;gap:1rem}
@media(min-width:680px){.grid#roles{grid-template-columns:1fr 1fr}}
.role-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.25rem 1.1rem 1.45rem;box-shadow:var(--shadow);display:block;color:inherit;transition:transform .14s ease,box-shadow .14s ease,border-color .14s}
.role-card::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:5px;border-radius:0 6px 6px 0;background:linear-gradient(var(--plum),var(--terra));opacity:.9}
a.role-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--plum-l);text-decoration:none}
.role-card h3{margin:.05rem 0 .55rem;color:var(--plum);font-size:1.22rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .7rem}
.chip{font-size:.74rem;font-weight:600;color:var(--plum-d);background:var(--plum-soft);border:1px solid var(--line);padding:.22rem .6rem;border-radius:999px;display:inline-flex;align-items:center;gap:.32rem}
.chip.gold{color:var(--terra-d);background:var(--amberbg);border-color:var(--line)}
.role-card .desc{color:var(--muted);font-size:.92rem;margin:.2rem 0 .8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.role-card .more{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;color:var(--plum);font-size:.9rem}
.role-card .more::after{content:"\2192";transition:transform .14s}
a.role-card:hover .more::after{transform:translateX(3px)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font:inherit;font-weight:700;font-size:.97rem;cursor:pointer;background:linear-gradient(135deg,var(--plum),var(--plum-d));color:#fff;border:1px solid var(--plum-d);padding:.74rem 1.3rem;border-radius:12px;box-shadow:0 2px 10px rgba(118,38,97,.3);transition:filter .12s,transform .06s,box-shadow .12s}
.btn:hover{filter:brightness(1.08);text-decoration:none;box-shadow:0 5px 16px rgba(118,38,97,.36)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;filter:none}
.btn.ghost{background:var(--card);color:var(--plum);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--plum-soft);filter:none}
.btn.block{width:100%}
.btn.sm{padding:.45rem .85rem;font-size:.85rem}
.linkback{display:inline-flex;align-items:center;gap:.35rem;font-size:.88rem;font-weight:600;margin-bottom:1rem;color:var(--plum)}
.linkback::before{content:"\2190"}

/* ---- Forms ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);margin-bottom:1.1rem}
.card h2{margin:.05rem 0 1rem;font-size:1.35rem;color:var(--plum)}
.field{margin-bottom:1.05rem}
.field>label{display:block;font-weight:700;font-size:.82rem;letter-spacing:.01em;margin-bottom:.38rem;color:var(--ink)}
fieldset.field{margin-bottom:1.05rem;border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem 1rem;min-width:0}
fieldset.field>legend{padding:0 .35rem;font-weight:700;font-size:.95rem;color:var(--ink)}
.field .help{font-size:.79rem;color:var(--muted);margin:-.12rem 0 .42rem}
.req{color:var(--bad);font-weight:700;margin-left:.15rem}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],input[type=month],input[type=search],input[type=url],input:not([type]),select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:.72rem .8rem;transition:border-color .12s,box-shadow .12s}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(118,38,97,.16)}
textarea{min-height:100px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media(max-width:480px){.row2{grid-template-columns:1fr}}
.choice{display:flex;flex-direction:column;gap:.5rem}
.choice label{display:flex;align-items:center;gap:.6rem;font-size:.92rem;font-weight:500;border:1.5px solid var(--line);border-radius:11px;padding:.66rem .78rem;cursor:pointer;background:var(--card);transition:border-color .12s,background .12s}
.choice label:hover{border-color:var(--plum-l);background:var(--plum-soft)}
.choice input{accent-color:var(--plum);width:auto;flex:none;margin:0}
.choice label:has(input:checked){border-color:var(--plum);background:var(--plum-soft);box-shadow:0 0 0 2px rgba(118,38,97,.12);font-weight:700}
.yesno{display:flex;gap:.6rem}
.yesno label{flex:1;justify-content:center}
.consent label{font-weight:500}
.consent a{font-weight:700}

/* ---- Alerts / notes ---- */
.note{border-radius:12px;padding:.78rem .95rem;font-size:.86rem;margin:0 0 1rem;border:1px solid;display:flex;gap:.5rem;align-items:flex-start}
.note.ok{background:var(--okbg);border-color:var(--line);color:var(--ok)}
.note.warn{background:var(--amberbg);border-color:var(--line);color:var(--amber)}
.note.err{background:var(--badbg);border-color:var(--line);color:var(--bad)}
.note.info{background:var(--plum-soft);border-color:var(--line);color:var(--plum-d)}
.note strong{font-weight:800}
.secure-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;color:var(--ok)}

/* ---- Thank-you ---- */
.thanks{text-align:center;padding:2.8rem 1.3rem}
.thanks .tick{width:70px;height:70px;border-radius:50%;background:var(--okbg);color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem;font-size:2.1rem;font-weight:800;box-shadow:0 0 0 8px rgba(61,122,78,.1)}
.thanks h2{color:var(--plum);margin:.2rem 0 .55rem;font-size:1.55rem}
.thanks p{color:var(--muted);max-width:42ch;margin:.3rem auto}

/* ---- Tabs (dashboard) ---- */
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:1.2rem}
.tab{font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;background:none;border:none;color:var(--muted);padding:.64rem .92rem;border-bottom:2.5px solid transparent;margin-bottom:-1px;border-radius:10px 10px 0 0;transition:color .12s,background .12s}
.tab:hover{color:var(--plum);background:var(--plum-soft)}
.tab.active,.tab[aria-selected="true"]{color:var(--plum);border-bottom-color:var(--plum);font-weight:800}
.tab:focus-visible{outline:3px solid var(--plum-l);outline-offset:-2px}
[role="tabpanel"]:focus{outline:none}

/* ---- Lists ---- */
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:.78rem;padding:.82rem .2rem;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:none}
.list .ico{width:38px;height:38px;border-radius:11px;background:var(--plum-soft);color:var(--plum);display:flex;align-items:center;justify-content:center;flex:none;font-size:1.05rem}
.list .meta{flex:1;min-width:0}
.list .meta b{display:block;font-size:.93rem}
.list .meta small{color:var(--muted);font-size:.79rem}
.pill{font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;white-space:nowrap}
.pill.ok{background:var(--okbg);color:var(--ok)}
.pill.warn{background:var(--amberbg);color:var(--amber)}
.pill.info{background:var(--plum-soft);color:var(--plum-d)}
.pill.muted{background:var(--line);color:var(--muted)}

/* ---- Status timeline ---- */
.steps{display:flex;flex-direction:column;gap:0;margin:.5rem 0;padding:0;list-style:none}
.step{display:flex;gap:.9rem;align-items:flex-start;padding-bottom:1.15rem;position:relative}
.step:not(:last-child)::before{content:"";position:absolute;left:15px;top:30px;bottom:-2px;width:2px;background:var(--line)}
.step.done:not(:last-child)::before{background:var(--plum-l)}
.step .dot{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;background:var(--card);border:2px solid var(--line);color:var(--muted);z-index:1}
.step.done .dot{background:var(--plum);border-color:var(--plum);color:#fff}
.step.current .dot{background:var(--card);border-color:var(--plum);color:var(--plum);box-shadow:0 0 0 4px rgba(118,38,97,.16)}
.step b{font-size:.93rem}
.step small{display:block;color:var(--muted);font-size:.79rem}

/* ---- Utility ---- */
.muted{color:var(--muted)}
.center{text-align:center}
.mt{margin-top:1rem}
.spinner{display:inline-block;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn.ghost .spinner{border-color:rgba(118,38,97,.25);border-top-color:var(--plum)}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--plum-soft),var(--surface),var(--plum-soft));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:12px;height:120px;margin-bottom:1rem}
@keyframes sk{to{background-position:-200% 0}}
.empty{text-align:center;color:var(--muted);padding:2.6rem 1rem}
.empty .big{font-size:2.3rem;margin-bottom:.4rem}

.site-foot{text-align:center;color:var(--muted);font-size:.79rem;padding:2.4rem 1rem 2.6rem}
.site-foot a{color:var(--muted);text-decoration:underline}

/* ---- Work history / employment gaps ---- */
label.check{display:flex;align-items:center;gap:.5rem;font-weight:500;cursor:pointer}
label.check input[type=checkbox],label.check input[type=radio]{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--plum)}
.gapExp{width:100%}
.gapMsg{display:inline-block;margin-left:.5rem;vertical-align:middle}
.list .chips{margin:0}

/* ---- Inline field errors ---- */
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--bad);background:var(--badbg)}
input[aria-invalid="true"]:focus,select[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(168,69,58,.18)}
.field-err,.err{color:var(--bad);font-size:.79rem;font-weight:600;margin-top:.3rem}
.field-err{display:none}
.field-err.show{display:block}
.file-hint{font-size:.79rem;color:var(--muted);margin:.3rem 0 0}
.file-name{font-size:.83rem;font-weight:600;color:var(--plum-d);margin-top:.35rem;display:none}
.file-name.show{display:block}

/* ---- Reference-requirement callout (new) ---- */
.ref-rule{background:var(--plum-soft);border:1px solid var(--line);border-left:4px solid var(--plum);border-radius:12px;padding:.9rem 1rem;margin:0 0 1rem}
.ref-rule h3{font-family:var(--body);font-size:.95rem;margin:0 0 .4rem;color:var(--plum-d)}
.ref-rule ul{margin:.3rem 0 0;padding-left:1.2rem;font-size:.88rem;color:var(--ink)}
.ref-rule .met{color:var(--ok);font-weight:700}
.ref-rule .unmet{color:var(--bad);font-weight:700}

/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .role-card:hover{transform:none}
}

/* ---- Profile: fitness / availability / driving ---- */
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.55rem .8rem}
.radio-row{display:flex;gap:1.25rem;flex-wrap:wrap}
.label-as{display:block;font-weight:700;font-size:.82rem;margin-bottom:.4rem;color:var(--ink)}

/* ---- Careers filter bar ---- */
.filters{padding:1.1rem 1.2rem;margin-bottom:1.1rem}
.filter-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem 1rem;margin-bottom:.7rem}
.filter-row:last-of-type{margin-bottom:.2rem}
@media(max-width:680px){.filter-row{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.filter-row{grid-template-columns:1fr}}
.filters .field{margin-bottom:0}
.filters label{font-size:.74rem;font-weight:700;color:var(--muted);margin-bottom:.3rem;display:block}
.filters input[type=search],.filters input[type=text],.filters select{padding:.6rem .7rem}
.pc-wrap{display:flex;gap:.4rem}
.pc-wrap input{flex:1;text-transform:uppercase}
.pc-wrap input::placeholder{text-transform:none}
.filter-actions{display:flex;justify-content:flex-end;margin-top:.3rem}
/* range sliders, on-brand */
.filters input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--line);margin:.85rem 0 .2rem;padding:0;border:none}
.filters input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--plum);border:2px solid var(--card);box-shadow:0 1px 4px rgba(118,38,97,.4);cursor:pointer}
.filters input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--plum);border:2px solid var(--card);box-shadow:0 1px 4px rgba(118,38,97,.4);cursor:pointer}
.filters input[type=range]:focus{outline:none}
.filters input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--plum-l);outline-offset:2px}

/* Pin the form-control colour scheme to the app theme (stops UA dark inputs */
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}

/* header avatar (signed-in) — mirrors the family portal */
.hdr-avatar{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:#fff;background-size:cover;background-position:center;color:var(--plum);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.86rem;cursor:pointer;overflow:hidden;text-decoration:none;flex:none}
.hdr-avatar:hover{text-decoration:none;filter:brightness(.97)}
.hdr-avatar[hidden],.head-link[hidden]{display:none}
.site-head .wrap{gap:.55rem}

/* =====================================================================
   MOBILE-FIRST / FULLY RESPONSIVE PASS (candidate portal)
   Phones are the primary device for applicants. Appended last so it wins
   the cascade; additive only — desktop layout above is untouched.
   ===================================================================== */

/* Never let anything cause horizontal scroll on a phone. */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }
img, svg, video { max-width: 100%; height: auto; }

/* Inputs at 16px+ so iOS Safari doesn't auto-zoom the page on focus, and
   comfortable 44px+ touch targets everywhere. */
input, select, textarea, button { font-size: 16px; }
.btn, .tab, .hdr-btn, .hdr-avatar, .chip, label.check, .choice label,
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], input[type=month], input[type=search],
input[type=url], input:not([type]), select {
  min-height: 44px;
}
/* keep range sliders thin but give the thumb a big hit area */
.filters input[type=range] { min-height: 0; }
.filters input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
.filters input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }

/* Safe-area (notch / home indicator) — viewport-fit=cover is set. */
.site-head .wrap { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.container { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); padding-bottom: max(3rem, env(safe-area-inset-bottom)); }
.site-foot { padding-bottom: max(2.6rem, env(safe-area-inset-bottom)); }

/* Dashboard tabs: scroll horizontally instead of wrapping into a tall block. */
.tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }

/* ---------------- Tablet & below ---------------- */
@media (max-width: 768px) {
  .container { padding-top: 1.1rem; }
  .hero { padding: 1.6rem 1.2rem; }
  .hero h1 { font-size: 1.7rem; }
  .hero p { font-size: 1rem; }
  .card { padding: 1.2rem; }
  .card h2 { font-size: 1.2rem; }
  .roles-head { flex-direction: column; align-items: flex-start; gap: .15rem; }
}

/* ---------------- Phones ---------------- */
@media (max-width: 560px) {
  /* Header: drop the small tagline, tighten, keep brand + login/avatar + toggle on one line */
  .site-head .wrap { gap: .4rem; padding-top: .55rem; padding-bottom: .55rem; }
  .brand .name { font-size: 1.05rem; }
  .brand small, .brand .badge { display: none; }
  .brand .mark { width: 30px; height: 30px; font-size: 1rem; }
  .head-link { font-size: .8rem; padding: .4rem .65rem; }
  .hdr-btn { width: 40px; height: 40px; }
  .hdr-avatar { width: 40px; height: 40px; }

  .hero h1 { font-size: 1.5rem; max-width: 100%; }
  .hero .eyebrow { font-size: .62rem; }
  .hero::after { opacity: .4; }

  /* Single-column everything */
  .grid#roles { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .filter-row { grid-template-columns: 1fr; gap: .7rem; }
  .chk-grid { grid-template-columns: 1fr 1fr; }

  /* Forms full-bleed-feel, comfortable spacing */
  .card { padding: 1.05rem 1rem; border-radius: 14px; }
  .field { margin-bottom: .95rem; }

  /* Buttons: full width by default on phones for thumb reach */
  .card .btn, .hero .btn { width: 100%; }
  .btn.sm, .filter-actions .btn, .chip, .pc-wrap .btn { width: auto; }
  .filter-actions { justify-content: stretch; }
  .filter-actions .btn { width: 100%; }

  /* Postcode row: input takes the space, Use button sits beside it */
  .pc-wrap { gap: .45rem; }
  .pc-wrap .btn { flex: 0 0 auto; padding-left: 1rem; padding-right: 1rem; }

  /* Role cards a touch tighter */
  .role-card { padding: 1.05rem 1rem 1rem 1.2rem; }
  .role-card h3 { font-size: 1.12rem; }

  /* List rows (referees, work history, applications): let meta wrap, keep status pill from squashing */
  .list li { flex-wrap: wrap; gap: .5rem .7rem; }
  .list .meta { flex: 1 1 60%; }
  .list .pill { margin-left: auto; }

  /* Status timeline a little tighter */
  .step .dot { width: 28px; height: 28px; }

  /* Tabs flush to card edges so they can scroll edge-to-edge */
  .tabs { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
}

/* (Candidate portal is fully page-based — no modals/overlays — so no sheet CSS needed.) */

/* ---------------- Very small phones (<=360px) ---------------- */
@media (max-width: 360px) {
  .hero h1 { font-size: 1.35rem; }
  .head-link { font-size: .74rem; padding: .38rem .55rem; }
  .chk-grid { grid-template-columns: 1fr; }
  .brand .name { font-size: 1rem; }
}

/* ---------------- Landscape phones: don't waste vertical space ---------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .site-head { position: static; }
  .hero { padding-top: 1.1rem; padding-bottom: 1.1rem; }
}

/* Larger tap feedback only on touch devices (avoid hover-stick on touch). */
@media (hover: none) {
  .role-card:hover { transform: none; box-shadow: var(--shadow); }
  .role-card:active { transform: scale(.99); }
  .btn:active { transform: scale(.99); }
}

/* rich advert body (sanitised HTML from the job posting) */
.advert-body{font-size:.96rem;line-height:1.6}
.advert-body p{margin:.5rem 0}
.advert-body ul,.advert-body ol{margin:.5rem 0 .5rem 1.2rem;padding-left:.6rem}
.advert-body li{margin:.25rem 0}
.advert-body h3,.advert-body h4{font-family:var(--display);color:var(--plum);margin:.9rem 0 .3rem;font-size:1.1rem}
.advert-body a{color:var(--plum);text-decoration:underline}