/* NextGen public portal — shared styles.
   One stylesheet for the careers and credit pages. No framework, no build step:
   this site is deliberately plain files so that mynextgenportal.com cannot
   serve a 2.0 page — the code simply is not here. */
:root{
  --ground:#F7F5F5; --ground-tint:#FBF9F9; --surface:#FFFFFF;
  --ink:#17171A; --ink-soft:#3D3D44; --muted:#6E6A6C; --faint:#9A9497;
  --line:#E5E0E1; --line-strong:#D3CCCE;
  --accent:#A61D22; --accent-hover:#8E181C; --accent-tint:#FAEDED; --accent-ink:#FFFFFF;
  --field:#FFFFFF; --ok:#1C7A46; --bad:#B3261E;
  --shadow:0 1px 2px rgba(23,23,26,.05), 0 8px 24px rgba(23,23,26,.06);
  --shadow-lift:0 2px 4px rgba(23,23,26,.06), 0 14px 34px rgba(23,23,26,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1115; --ground-tint:#12151A; --surface:#191D24;
    --ink:#F3F4F6; --ink-soft:#D2D6DD; --muted:#9AA0AA; --faint:#6F757F;
    --line:#272C35; --line-strong:#39404B;
    --accent:#E0474C; --accent-hover:#EF5A5F; --accent-tint:#2A1417; --accent-ink:#FFFFFF;
    --field:#12151A; --ok:#4ADE80; --bad:#F2726B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --ground:#0F1115; --ground-tint:#12151A; --surface:#191D24;
  --ink:#F3F4F6; --ink-soft:#D2D6DD; --muted:#9AA0AA; --faint:#6F757F;
  --line:#272C35; --line-strong:#39404B;
  --accent:#E0474C; --accent-hover:#EF5A5F; --accent-tint:#2A1417; --accent-ink:#FFFFFF;
  --field:#12151A; --ok:#4ADE80; --bad:#F2726B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0;
  background:radial-gradient(1100px 460px at 50% -160px, var(--ground-tint), transparent 70%), var(--ground);
  color:var(--ink); font-family:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
/* ⚠️ 900px, NOT 760. Four tiles across 760px left ~135px of text each, which is
   why "Generator Technician" wrapped; 900px gives ~170px and it fits on one
   line.
   🐞 The previous attempt broke the tile row OUT to 1040px while leaving the
   rest of the page at 760 — so the tiles floated free of the headline and the
   form, and the hint line under them landed against the left edge of the
   window. Widening the SHARED container is the fix, because the point is that
   everything sits on one alignment. The headline (18ch) and the lede (56ch) are
   capped independently, so neither stretches with it. */
.wrap{max-width:900px;margin:0 auto;padding:0 24px 80px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 24px}
/* The real NextGen mark (badge + wordmark), not a redrawn approximation.
   It is a single flat red on transparent, so dark mode lifts it rather than
   swapping in a second file — the brand red reads as muddy on a dark ground. */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);min-width:0}
.brand img{height:30px;width:auto;display:block;flex-shrink:0}
@media (max-width:620px){.brand img{height:25px}}
.brand span{
  font-family:Archivo,sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
  padding-left:11px;border-left:1px solid var(--line-strong);align-self:center;
}
@media (max-width:520px){.brand span{display:none}}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand img{filter:brightness(1.45) saturate(1.05)}
}
:root[data-theme="dark"] .brand img{filter:brightness(1.45) saturate(1.05)}
.pill{font-family:Archivo,sans-serif;font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted)}
.bar-right{display:flex;align-items:center;gap:8px}
.tbtn{font:inherit;font-size:13px;cursor:pointer;padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted)}
.tbtn:hover{color:var(--ink);border-color:var(--muted)}

h1{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(2.05rem,5vw,2.95rem);line-height:1.07;letter-spacing:-.028em;margin:12px 0 16px;text-wrap:balance;max-width:18ch}
.lede{font-size:1.0625rem;color:var(--ink-soft);max-width:56ch;margin:0 0 28px}
.lede em{font-style:normal;color:var(--accent);font-weight:600}

/* Four across on a wide screen — one column per role, matching the Candidates
   board in 2.0 and the marketing site. Two up at tablet, one on a phone. */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:10px}
@media (max-width:1100px){.roles{grid-template-columns:1fr 1fr}}
.roles-hint{font-size:.8125rem;color:var(--faint);margin:0 0 26px}
@media (max-width:620px){.roles{grid-template-columns:1fr}}
.role{display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.role:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift);border-color:var(--line-strong)}
.role.sel{border-color:var(--accent);background:var(--accent-tint)}
/* The whole tile is a column, and the picker fills it, so every tile ends at
   the same place regardless of how long its title or summary runs. */
.role-pick{text-align:left;font:inherit;cursor:pointer;background:none;border:0;padding:15px 17px 13px;flex:1;
  display:flex;flex-direction:column;color:inherit}
/* ⚠️ TWO LINES RESERVED FOR THE TITLE, ALWAYS. "Generator Technician" wraps and
   "Site Watch" does not, so without a reserved height the summaries beneath
   them start at different points and the row of tiles reads as broken. Holding
   the space costs one empty line on the short ones and buys four tiles that
   line up. */
.role .t{display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:.9375rem;color:var(--ink);
  margin-bottom:4px;line-height:1.3;min-height:2.6em}
/* Same idea for the summary: clamped to two lines so one long subtitle cannot
   push its tile taller than its neighbours. */
.role .s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.8125rem;line-height:1.45;color:var(--accent);min-height:2.9em}
/* `.role-check` (the word "Selected") was removed Sep 17 2026 — the tile's red
   border already reads as "this is the one I clicked". */
/* The shortcut into "my city isn't listed", last row of the city list. Muted
   rather than accent: the four job subtitles are now accent red, and a fifth
   red thing per tile would leave nothing quieter to contrast against. */
.role-nocity{padding-top:5px !important}
.role-nocity span{font-size:.75rem;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.role:hover .role-nocity span,.role.sel .role-nocity span{color:var(--accent)}
.role-desc{font-family:Archivo,sans-serif;font-size:.8125rem;font-weight:600;cursor:pointer;text-align:left;background:none;border:0;border-top:1px solid var(--line);color:var(--accent);padding:9px 17px;display:flex;align-items:center;gap:6px}
.role.sel .role-desc{border-top-color:var(--line-strong)}
.role-desc:hover{background:var(--ground-tint)}
.role-desc svg{flex-shrink:0}
/* Cities and headcount. Same sentence shape as the 2.0 board: a total line,
   then one row per city with its own number right-aligned. */
/* margin-top:auto pins the cities to the BOTTOM of the picker, so the divider
   above them sits at the same height on all four tiles. */
.role-cities{margin:auto 0 0;padding:8px 0 0;list-style:none;border-top:1px solid var(--line)}
.role-openings{display:block;font-family:Archivo,sans-serif;font-size:.75rem;font-weight:600;color:var(--ink);margin-top:10px}
/* 🐞 THIS WAS nowrap + ellipsis FOR ONE COMMIT, and it truncated to "1 open s…"
   — hiding the number, which is the only part of the line anyone reads. Never
   trade information for tidiness. The line may wrap if it must; what it may not
   do is split "1 open spot" across two lines, which is the ugliness the nowrap
   was aimed at. So: the row wraps, the unit does not. */
.role-cities li{font-size:.75rem;color:var(--muted);padding:1px 0}
.role-cities .n{white-space:nowrap}
.role-cities .sep{margin:0 6px;opacity:.5}
.role-cities b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
/* Which city the applicant wants. Hidden unless the chosen role runs in more
   than one — a one-option control is a question with no answer to give. */
.city-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px}
.city-label{font-family:Archivo,sans-serif;font-size:.8125rem;font-weight:600;color:var(--ink)}
.city-chip{display:inline-flex;align-items:baseline;gap:6px;font:inherit;font-size:.8125rem;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--ink);
  transition:border-color .15s,background .15s}
.city-chip:hover{border-color:var(--line-strong)}
.city-chip.sel{border-color:var(--accent);background:var(--accent-tint)}
/* Set apart from the real cities: this one is not an opening, it is a way to
   say "not here". Dashed, so it does not read as a fifth city. */
.city-chip.city-other{border-style:dashed;color:var(--muted)}
.city-chip.city-other.sel{border-style:solid;color:inherit}
.other-city{margin-top:12px;max-width:420px}
.other-city label{display:block;font-size:.8125rem;font-weight:600;margin-bottom:4px}
.other-city input{width:100%}
.other-city-note{margin:8px 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.city-pay{color:var(--muted);font-size:.75rem}

.scrim{position:fixed;inset:0;z-index:40;background:rgba(15,17,21,.52);display:flex;justify-content:flex-end}
.jd{background:var(--surface);width:min(620px,100%);height:100%;overflow-y:auto;box-shadow:var(--shadow-lift);border-left:1px solid var(--line)}
@media (max-width:620px){.scrim{align-items:flex-end}.jd{height:92%;border-left:0;border-radius:18px 18px 0 0}}
.jd-top{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--line);padding:16px 26px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.jd-top h2{margin:0;font-size:1.2rem}
.jd-top .tag{display:block;font-size:.8125rem;color:var(--muted);margin-top:2px}
.jd-x{font:inherit;font-size:20px;line-height:1;cursor:pointer;background:none;border:1px solid var(--line-strong);border-radius:9px;color:var(--muted);width:34px;height:34px;flex-shrink:0}
.jd-x:hover{color:var(--ink);border-color:var(--muted)}
.jd-body{padding:22px 26px 30px}
@media (max-width:620px){.jd-top,.jd-body,.jd-apply{padding-left:18px;padding-right:18px}}
.jd-body h3{font-family:Archivo,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);margin:26px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.jd-body h3:first-child{margin-top:0}
.jd-body p{font-size:.9375rem;color:var(--ink-soft);margin:0 0 12px}
.jd-body ul{margin:0;padding-left:20px}
.jd-body li{font-size:.9375rem;color:var(--ink-soft);margin-bottom:8px}
.jd-meta{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--muted)}
.jd-meta b{font-family:Archivo,sans-serif;color:var(--ink-soft)}
.jd-meta div{margin-bottom:5px}
.jd-apply{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:14px 26px;display:flex;gap:12px;align-items:center;justify-content:flex-end}

.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.steps{display:flex;gap:6px}
.seg{height:4px;flex:1;background:var(--line);transition:background .2s}
.seg.on{background:var(--accent)}
.card-body{padding:26px 26px 28px}
@media (max-width:620px){.card-body{padding:22px 18px 24px}}
.eyebrow{font-family:Archivo,sans-serif;font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
h2{font-family:Archivo,sans-serif;font-weight:600;font-size:1.35rem;letter-spacing:-.015em;margin:0 0 4px}
h3.sec{font-family:Archivo,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--accent);margin:28px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.hint{font-size:.9375rem;color:var(--muted);margin:0 0 22px}

.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media (max-width:620px){.grid{grid-template-columns:1fr}.f{grid-column:1/-1!important}}
.f{display:flex;flex-direction:column;gap:6px}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:1/-1}
label{font-size:.8125rem;font-weight:600;color:var(--ink-soft);font-family:Archivo,sans-serif}
label .req{color:var(--accent);margin-left:2px}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],select,textarea{
  font:inherit;font-size:.9375rem;color:var(--ink);background:var(--field);
  border:1px solid var(--line-strong);border-radius:10px;padding:11px 12px;width:100%;appearance:none;
}
textarea{resize:vertical;min-height:88px}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 19px) 51%,calc(100% - 14px) 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input.bad,select.bad{border-color:var(--bad)}
.sub{font-size:.75rem;color:var(--faint)}
.prefix{position:relative}
.prefix span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:.9375rem}
.prefix input{padding-left:26px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:.875rem;cursor:pointer;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--field);color:var(--ink-soft)}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.chip.sm{padding:6px 12px;font-size:.8125rem}
.yn{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--field)}
.yn p{margin:0;font-size:.9375rem;color:var(--ink-soft)}
.yn .pair{display:flex;gap:6px;flex-shrink:0}

.rows{display:flex;flex-direction:column;gap:10px}
.rowbox{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--ground-tint)}
.addrow{font:inherit;font-size:.875rem;cursor:pointer;align-self:flex-start;background:none;border:1px dashed var(--line-strong);border-radius:10px;padding:9px 14px;color:var(--muted)}
.addrow:hover{border-color:var(--accent);color:var(--accent)}
.rmrow{font:inherit;font-size:.75rem;cursor:pointer;background:none;border:0;color:var(--faint);padding:2px}
.rmrow:hover{color:var(--bad)}

.drop{border:1.5px dashed var(--line-strong);border-radius:12px;padding:22px;text-align:center;background:var(--field);cursor:pointer;display:block}
.drop:hover{border-color:var(--accent)}
.drop b{display:block;font-family:Archivo,sans-serif;font-size:.9375rem;color:var(--ink);margin-bottom:2px}
.drop span{font-size:.8125rem;color:var(--muted)}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.consent{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--field)}
.consent input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--accent)}
.consent label{font-weight:400;font-family:inherit;font-size:.875rem;color:var(--ink-soft)}

.actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px}
.ghost{font:inherit;font-size:.9375rem;cursor:pointer;background:none;border:0;color:var(--muted);padding:10px 2px}
.ghost:hover{color:var(--ink)}
.cta{font-family:Archivo,sans-serif;font-weight:600;font-size:.9375rem;cursor:pointer;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:12px 24px;transition:background .15s}
.cta:hover{background:var(--accent-hover)}
.cta[disabled]{opacity:.55;cursor:progress}
.err{margin-top:16px;padding:12px 14px;border-radius:10px;border:1px solid var(--bad);background:var(--accent-tint);color:var(--bad);font-size:.875rem}
.foot{margin-top:26px;font-size:.8125rem;color:var(--faint);max-width:62ch}
.foot b{color:var(--muted);font-weight:600}

.done{text-align:center;padding:44px 26px 48px}
.tick{width:54px;height:54px;border-radius:50%;background:var(--accent-tint);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.done h2{font-size:1.5rem;margin-bottom:8px}
.done p{color:var(--muted);max-width:46ch;margin:0 auto 8px}
.ref{display:inline-block;margin-top:16px;font-family:ui-monospace,Menlo,monospace;font-size:.875rem;color:var(--ink-soft);background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:7px 14px}
.skel{height:76px;border-radius:14px;background:linear-gradient(90deg,var(--line) 25%,var(--ground-tint) 50%,var(--line) 75%);background-size:200% 100%;animation:sh 1.3s linear infinite}
@keyframes sh{to{background-position:-200% 0}}


/* ---------------------------------------------------------------------------
   iOS
   Safari zooms the whole page whenever you focus a form control whose font is
   under 16px, and the visitor then has to pinch back out — on every field, on
   every form. Our controls were 15px, so this hit every input. Meeting the
   16px floor on small screens is the entire fix; nothing else about the layout
   changes. (Tested on emulated iPhone SE, 12 and 14 Pro Max.)

   Touch targets are raised to Apple's 44px minimum in the same breakpoint.
   "Full description" was a 34px strip, which is a miss on a moving bus.
--------------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%}

@media (max-width:820px){
  input[type=text],input[type=tel],input[type=email],input[type=date],
  input[type=number],select,textarea{font-size:16px}

  .chip{font-size:15px;padding:11px 16px;min-height:44px}
  .chip.sm{font-size:14px;padding:10px 15px;min-height:40px}
  .role-desc{padding:13px 17px;min-height:46px}
  .role-pick{padding:16px 17px 14px}
  .addrow{padding:12px 16px;min-height:44px}
  .rmrow{padding:9px 6px;min-height:38px}
  .cta{padding:14px 24px;min-height:48px;font-size:1rem}
  .ghost{padding:14px 4px;min-height:44px;font-size:1rem}
  .tbtn{padding:9px 14px;min-height:40px}
  .jd-x{width:42px;height:42px}
  .consent input{width:20px;height:20px}
  .drop{padding:26px 18px}
  /* a form field under a thumb wants a little more room than one under a mouse */
  input[type=text],input[type=tel],input[type=email],input[type=date],
  input[type=number],select{padding:13px 12px}
}