/* The public careers site (careers.htw.com.au), styled to match htw.com.au/careers.
   Loaded only by careers_base.html, after app.css, so nothing here reaches the admin app or
   the referral form.

   The values were measured off the live website (designlang + the browser's computed
   styles, Oct 2026) and mapped onto htw-style's tokens wherever one exists: the website's
   navy, cyan, 16px card radius and pill buttons are htw-style's --htw-navy, --htw-cyan,
   --radius-lg and --radius-full. Two deliberate differences from the website, both from the
   HTW design system:
   - Small coloured text is HTW blue (--htw-blue), not cyan: the website's cyan eyebrows are
     about 2.6:1 on white, under WCAG AA's 4.5:1. (The BUTTONS are the website's cyan, on
     purpose; see "Buttons" below.)
   - The font is Arial. The website uses aktiv-grotesk from Adobe Fonts; this site's CSP
     allows fonts from itself only, and the website falls back to Arial anyway.

   Apart from the block below, no token is redefined here (tests/test_htw_style_linked.py). */

/* --- IP-718: careers keeps its look under htw-style 2.0.0 ----------------------------------
   The staff app moved to htw-style 2.0.0 (the HTW UI Style Guide v1.0); this public site stays
   exactly as it was (IP-716's hard limit: the website's look, IP-572). careers_base.html still
   draws base.html, so 2.0.0 and app.css load underneath this file. Two things hold it still,
   and this file loads only on careers pages (and the staff app's ad preview of one), so neither
   reaches the staff app or the referral site:
   1. The tokens 2.0.0 changed, set back to the htw-style 1.1.0 values this site was built on.
      The action colour (--htw-action-*) is not set: careers buttons, checks and the stepper
      are .careers-btn and .apply-steps rules with their own cyan, and its links were HTW blue
      under 1.1.0, which 2.0.0's default still is.
   2. The rules careers used to inherit: app.css's IP-676 type and surfaces, which IP-718
      removed from app.css, and Bootstrap's own values where 2.0.0 now sets different ones.
   Delete this block when careers moves to 2.0.0 on purpose. */
:root {
  --htw-ink: #171717;
  --htw-slate: #5A6570;
  --htw-neutral-50: #F4F7F9;
  --htw-neutral-200: #E4EBF0;
  --htw-neutral-300: #D3DDE4;
  --htw-destructive: #E7000B;
  --htw-destructive-text: #C10007;
  --htw-input-border: #8A96A3;
  --htw-success: #157347;
  --htw-warning: #FFC107;
  --shadow-1: 0 1px 2px rgba(16,42,66,.10), 0 1px 3px 1px rgba(16,42,66,.06);
  --shadow-2: 0 1px 2px rgba(16,42,66,.10), 0 2px 6px 2px rgba(16,42,66,.07);
  --shadow-3: 0 1px 3px rgba(16,42,66,.10), 0 4px 8px 3px rgba(16,42,66,.07);
  --focus-ring: 0 0 0 2px #fff, 0 0 0 3.5px var(--htw-cyan-mid);
  --bs-body-color-rgb: 23,23,23;
  --bs-secondary-rgb: 90,101,112;
  --bs-info-text-emphasis: var(--htw-navy);
  --bs-info-bg-subtle: var(--htw-blue-100);
  --bs-info-border-subtle: var(--htw-blue-200);
  --bs-danger: var(--htw-destructive);
  --bs-danger-rgb: 231,0,11;
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  /* Bootstrap 5.3.3's own, which 1.1.0 left alone and 2.0.0 maps to its status colours. */
  --bs-success: #198754;
  --bs-success-rgb: 25,135,84;
  --bs-success-text-emphasis: #0a3622;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-success-border-subtle: #a3cfbb;
  --bs-warning: #ffc107;
  --bs-warning-rgb: 255,193,7;
  --bs-warning-text-emphasis: #664d03;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-text-emphasis: #58151c;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-danger-border-subtle: #f1aeb5;
}
/* What app.css gave every page before IP-718 (IP-676's type and surfaces). */
body { font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
                    "Helvetica Neue", Arial, sans-serif;
       color: #1A2433; -webkit-font-smoothing: antialiased; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui,
                                       -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
                                     font-weight: 600; letter-spacing: -.01em; color: var(--htw-navy); }
h5, .h5, h6, .h6 { font-weight: 600; }
.text-muted, .form-text { color: #5A6570 !important; }
.form-label { font-weight: 600; font-size: .875rem; }
.card { border-color: #E3E8EE; }
.card-header { background: #fff; border-bottom-color: #E3E8EE; font-weight: 600; padding: .8rem 1.1rem; }
.card-body { padding: 1.1rem; }
.list-group-item { border-color: #E3E8EE; }
.alert { border-width: 1px; }
/* What htw-style 1.1.0 and Bootstrap drew for the components a careers page uses (cards, the
   status page's alert and the flash messages, form fields and checks), where 2.0.0 now draws
   them differently. The apply form's own rules (.apply-steps, below) still outrank these. */
.card { --bs-card-border-radius: var(--radius-lg); --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
        --bs-card-spacer-y: 1rem; --bs-card-spacer-x: 1rem; --bs-card-cap-padding-y: .5rem;
        --bs-card-title-color: initial; }
.alert { --bs-alert-border-radius: var(--radius-md); --bs-alert-padding-x: 1rem; --bs-alert-padding-y: 1rem;
         --bs-alert-color: inherit; --bs-alert-link-color: inherit; }
.alert-heading { font-size: inherit; }
.alert-primary { --bs-alert-color: var(--bs-primary-text-emphasis); --bs-alert-bg: var(--bs-primary-bg-subtle);
                 --bs-alert-border-color: var(--bs-primary-border-subtle); --bs-alert-link-color: var(--bs-primary-text-emphasis); }
.alert-info { --bs-alert-color: var(--bs-info-text-emphasis); --bs-alert-bg: var(--bs-info-bg-subtle);
              --bs-alert-border-color: var(--bs-info-border-subtle); --bs-alert-link-color: var(--bs-info-text-emphasis); }
.alert-success { --bs-alert-color: var(--bs-success-text-emphasis); --bs-alert-bg: var(--bs-success-bg-subtle);
                 --bs-alert-border-color: var(--bs-success-border-subtle); --bs-alert-link-color: var(--bs-success-text-emphasis); }
.alert-warning { --bs-alert-color: var(--bs-warning-text-emphasis); --bs-alert-bg: var(--bs-warning-bg-subtle);
                 --bs-alert-border-color: var(--bs-warning-border-subtle); --bs-alert-link-color: var(--bs-warning-text-emphasis); }
.alert-danger { --bs-alert-color: var(--bs-danger-text-emphasis); --bs-alert-bg: var(--bs-danger-bg-subtle);
                --bs-alert-border-color: var(--bs-danger-border-subtle); --bs-alert-link-color: var(--bs-danger-text-emphasis); }
.alert-secondary { --bs-alert-color: var(--bs-secondary-text-emphasis); --bs-alert-bg: var(--bs-secondary-bg-subtle);
                   --bs-alert-border-color: var(--bs-secondary-border-subtle); --bs-alert-link-color: var(--bs-secondary-text-emphasis); }
.alert-light { --bs-alert-color: var(--bs-light-text-emphasis); --bs-alert-bg: var(--bs-light-bg-subtle);
               --bs-alert-border-color: var(--bs-light-border-subtle); --bs-alert-link-color: var(--bs-light-text-emphasis); }
:where(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset]), select, textarea) {
  min-height: 0; border-radius: var(--radius-sm); }
::placeholder, .form-control::placeholder { color: var(--htw-slate); }
.form-label { margin-bottom: .5rem; line-height: inherit; color: inherit; }
.form-text { margin-top: .25rem; font-size: .875em; line-height: inherit; }
.form-control, .form-select { border-radius: var(--bs-border-radius); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--htw-cyan-mid); box-shadow: 0 0 0 3px rgba(0,145,214,.25); }
.form-control.is-invalid, .form-select.is-invalid { box-shadow: none; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(231,0,11,.2); }
.form-control:disabled, .form-select:disabled { color: inherit; background-color: var(--bs-secondary-bg);
                                                border-color: var(--htw-input-border); }
.form-check-input { width: 1em; height: 1em; margin-top: .25em; border: var(--bs-border-width) solid var(--htw-input-border); }
.form-check-input[type=checkbox] { border-radius: .25em; }
.form-check-input:focus-visible { outline: 0; }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--htw-blue); border-color: var(--htw-blue); }
.form-check-input[type=radio]:checked { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
                                        background-color: var(--htw-blue); border: var(--bs-border-width) solid var(--htw-blue); }
.form-check-input:disabled { background-color: var(--bs-form-check-bg); opacity: .5; }
.invalid-feedback { margin-top: .25rem; font-size: .875em; }
.btn { font-weight: 600; }
.btn-sm { font-size: .8125rem; }
.badge { font-weight: 600; letter-spacing: .01em; }
/* htw-style 2.1.0 keeps a staff page's closed <select> to one line, ending in "…" (where the
   browser draws the customisable select): a line clamp on a -webkit-box. A careers select wraps
   as it did, so the clamp is off and a .form-select is Bootstrap's block again (the same
   selector as htw-bootstrap.css's, later). A native select ignores these. */
select:not([multiple], [size]) { white-space: normal; overflow: visible; overflow-clip-margin: 0px;
                                 text-overflow: clip; -webkit-line-clamp: none; }
select.form-select:not([multiple], [size]) { display: block; }

/* --- Page --------------------------------------------------------------------------------- */
body { background: #fff; }
/* One column width for header, hero, page and footer, so their left edges line up as on
   the website (its content column is ~1220px). A form page narrows the band above it and the
   page together (.careers-narrow), for a readable line length. */
.careers-header .container, .careers-hero .container, .careers-page-head .container,
.careers-footer .container, .careers-ambient > .container, .careers-main { max-width: 1200px; }
.careers-page-head .container.careers-narrow, .careers-main:has(> .careers-narrow) { max-width: 920px; }
.careers-main { padding-top: 3rem; padding-bottom: 4rem; }

/* --- Header: the website's navy bar, logo left, links and a ghost pill right. ------------- */
.careers-header { background: var(--htw-navy); color: #fff; }
.careers-header-inner { display: flex; align-items: center; justify-content: space-between;
                        gap: 1rem; min-height: 4.5rem; padding-block: .75rem; }
.careers-brand { display: inline-flex; align-items: center; gap: .875rem; color: #fff;
                 text-decoration: none; }
.careers-brand img { display: block; height: 2.5rem; width: auto; }
.careers-brand-label { padding-left: .875rem; border-left: 1px solid rgba(255,255,255,.35);
                       font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.careers-brand:hover { color: #fff; }
.careers-header-links { display: flex; align-items: center; gap: 1.5rem; }
.careers-header-link { color: #fff; font-weight: 500; text-decoration: none; }
.careers-header-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 575.98px) {
  .careers-header-link { display: none; }
  .careers-brand img { height: 2.125rem; }
  .careers-brand-label { font-size: 1rem; padding-left: .625rem; }
  .careers-brand { gap: .625rem; }
}

/* --- Buttons: the website's own, look and behaviour (IP-572). Copied from htw.com.au's
   .cg-company-cta + .htw-trace-button, measured 23 Oct 2026:
   - a cyan pill (#00AEEF, white 600 label) that darkens to #009DD6 on hover;
   - a frosted ghost pill for dark backgrounds, and a hairline outline pill for white ones;
   - on hover or keyboard focus a 2px cyan ring, 5px outside the button, draws itself
     clockwise from the top centre in .42s (the clip-path keyframes below). Reduced motion
     shows the whole ring at once instead.
   Shane asked for the website's buttons exactly, cyan included. White on #00AEEF is about
   2.6:1, under WCAG AA's 4.5:1 for text; the label is kept at 15px/600 and the hover colour
   is the darker #009DD6.

   Careers pages use .careers-btn, not Bootstrap's .btn: htw-style's button recipe (gradient,
   glow, press shift) is what the staff app uses, and overriding it rule by rule would be a
   fight with every Bootstrap state selector. tests/test_careers_look.py pins this. */
.careers-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border: 0; border-radius: 999px;
  background: #00AEEF; color: #fff;
  font: 600 15px/1.5 var(--font-sans); text-align: center; text-decoration: none;
  cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.careers-btn:hover { background: #009DD6; color: #fff; }
.careers-btn:focus-visible { outline: 3px solid #0078A3; outline-offset: 3px; }
.careers-btn:disabled { opacity: .45; cursor: not-allowed; }

/* The ring. Collapsed to a point at the top centre until hover or focus runs the trace. */
.careers-btn:not(:disabled)::after {
  content: ""; position: absolute; inset: -5px; z-index: 2; pointer-events: none;
  border: 2px solid #00AEEF; border-radius: inherit;
  clip-path: polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0); }
.careers-btn:not(:disabled):is(:hover, :focus-visible)::after {
  animation: careers-btn-trace .42s ease-out both; }
@keyframes careers-btn-trace {
  0%   { clip-path: polygon(50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0); }
  25%  { clip-path: polygon(50% 0, 100% 0, 100% 50%, 100% 50%, 100% 50%, 100% 50%); }
  50%  { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 50% 100%, 50% 100%); }
  75%  { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 0 50%); }
  100% { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .careers-btn:not(:disabled):is(:hover, :focus-visible)::after { animation: none; clip-path: inset(0); }
}

/* On a dark band: frosted white, brighter on hover. */
.careers-btn-ghost { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
                     -webkit-backdrop-filter: blur(14px) saturate(1.5);
                     backdrop-filter: blur(14px) saturate(1.5); }
.careers-btn-ghost:hover { background: rgba(255,255,255,.24); color: #fff; }
/* On white: transparent, ink label, hairline; hover turns the line cyan and the label teal. */
.careers-btn-outline { background: transparent; color: #0F172A; border: 1.5px solid #E2E8F0; }
.careers-btn-outline:hover { background: transparent; border-color: #00AEEF; color: #0078A3; }
/* The UI Style Guide's tertiary: no fill, no line and no trace, the label darker on hover. Cyan
   700 rather than the guide's Cyan 500, which is about 2.6:1 on white. */
.careers-btn-tertiary { background: none; color: #0078A3; padding-inline: 14px; }
.careers-btn-tertiary:hover { background: none; color: #005270; text-decoration: underline;
                              text-underline-offset: 3px; }
.careers-btn.careers-btn-tertiary::after { display: none; }
/* Buttons side by side in a form (Send / Save and finish later) sit 12px apart, as on the
   website, so a ring traced 5px outside one never runs into the next; on a phone they wrap
   with the same space between rows. A .d-grid form already spaces its own. */
form:not(.d-grid) > .careers-btn { margin: 0 .5rem .75rem 0; }
/* The header's smaller pills (the website's "Client login" / "Get a Quote"). */
.careers-btn-sm { padding: 9px 16px; font-weight: 500; }

/* --- Hero: the aerial photo under a navy wash, bold white headline, second line in cyan. -- */
.careers-hero {
  color: #fff; padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  background:
    linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    url("/static/careers/hero.webp") center / cover no-repeat var(--htw-navy); }
@media (min-width: 1200px) {
  .careers-hero {
    background:
      linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.6) 45%, rgba(5,25,58,.2) 100%),
      url("/static/careers/hero-2x.webp") center / cover no-repeat var(--htw-navy); }
}
.careers-display { margin: 0; font-size: clamp(2.25rem, 1.25rem + 3.6vw, 3.375rem);
                   font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.careers-display-accent { display: block; color: var(--htw-cyan); }
.careers-hero-lede { margin: 1.25rem 0 0; font-size: 1.125rem; color: rgba(255,255,255,.88); }
.careers-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; }
@media (max-width: 700px) { .careers-hero-actions .careers-btn { width: 100%; } }

/* The job and intake pages: the same navy, as a shorter band with the role's facts. */
.careers-page-head { color: #fff; padding-block: 2.5rem 2.75rem;
  background:
    radial-gradient(circle at 85% 0%, rgba(0,159,227,.30), transparent 40%),
    linear-gradient(118deg, var(--htw-navy) 0%, #0d3553 70%, #0b4c72 100%); }
.careers-back { display: inline-flex; align-items: center; gap: .375rem; margin-bottom: 1.25rem;
                color: rgba(255,255,255,.88); font-size: .9375rem; text-decoration: none; }
.careers-back:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.careers-page-title { margin: 0; max-width: 28ch; font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
                      font-weight: 700; line-height: 1.15; color: #fff; }
.careers-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.25rem 0 0;
                 padding: 0; list-style: none; color: rgba(255,255,255,.88); }
.careers-facts li { display: inline-flex; align-items: center; gap: .4rem; }
.careers-facts .bi { color: var(--htw-cyan); }

/* IP-580 -- a role's cover image (service.COVER_IMAGES) behind the job page head, under the
   hero's navy wash. One class per key, added by careers_job.html only for a key in the set.
   ⚠️ THE WASH IS THE HERO'S NARROW-SCREEN STOPS (.9 / .72 / .35) AT EVERY WIDTH, ON PURPOSE. The
   hero's wide-screen stops (.9 / .6 / .2) leave white title text at 3.9-4.1:1 over the lightest
   part of five of the six images, under the 4.5:1 the HTW Design System asks for; these give
   5.8:1 or better on all six (IP-580, reviewer's decision). A new image must clear 4.5:1 under
   these stops too. tests/test_job_ad_covers.py pins the stops.
   Each rule says the background twice: a plain url() first, then image-set() (1x 1200px, 2x
   1600px), which a browser without image-set() drops, keeping the first. The wash is written
   out in full in each rule, not as a var(): a declaration holding var() is only checked when
   it is used, so an unsupported image-set() would blank the head instead of falling back.
   From 1200px wide the 2x file is used whatever the screen's density, as the hero does. */
.careers-page-head.careers-cover-brisbane-river {
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    url("/static/careers/covers/brisbane-river.webp") center / cover no-repeat var(--htw-navy);
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    image-set(url("/static/careers/covers/brisbane-river.webp") 1x, url("/static/careers/covers/brisbane-river-2x.webp") 2x) center / cover no-repeat var(--htw-navy); }
.careers-page-head.careers-cover-suburbs-aerial {
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    url("/static/careers/covers/suburbs-aerial.webp") center / cover no-repeat var(--htw-navy);
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    image-set(url("/static/careers/covers/suburbs-aerial.webp") 1x, url("/static/careers/covers/suburbs-aerial-2x.webp") 2x) center / cover no-repeat var(--htw-navy); }
.careers-page-head.careers-cover-city-towers {
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    url("/static/careers/covers/city-towers.webp") center / cover no-repeat var(--htw-navy);
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    image-set(url("/static/careers/covers/city-towers.webp") 1x, url("/static/careers/covers/city-towers-2x.webp") 2x) center / cover no-repeat var(--htw-navy); }
.careers-page-head.careers-cover-industrial-shed {
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    url("/static/careers/covers/industrial-shed.webp") center / cover no-repeat var(--htw-navy);
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    image-set(url("/static/careers/covers/industrial-shed.webp") 1x, url("/static/careers/covers/industrial-shed-2x.webp") 2x) center / cover no-repeat var(--htw-navy); }
.careers-page-head.careers-cover-huon-valley {
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    url("/static/careers/covers/huon-valley.webp") center / cover no-repeat var(--htw-navy);
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    image-set(url("/static/careers/covers/huon-valley.webp") 1x, url("/static/careers/covers/huon-valley-2x.webp") 2x) center / cover no-repeat var(--htw-navy); }
.careers-page-head.careers-cover-outback-town {
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    url("/static/careers/covers/outback-town.webp") center / cover no-repeat var(--htw-navy);
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
    image-set(url("/static/careers/covers/outback-town.webp") 1x, url("/static/careers/covers/outback-town-2x.webp") 2x) center / cover no-repeat var(--htw-navy); }
@media (min-width: 1200px) {
  .careers-page-head.careers-cover-brisbane-river { background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
      url("/static/careers/covers/brisbane-river-2x.webp") center / cover no-repeat var(--htw-navy); }
  .careers-page-head.careers-cover-suburbs-aerial { background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
      url("/static/careers/covers/suburbs-aerial-2x.webp") center / cover no-repeat var(--htw-navy); }
  .careers-page-head.careers-cover-city-towers { background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
      url("/static/careers/covers/city-towers-2x.webp") center / cover no-repeat var(--htw-navy); }
  .careers-page-head.careers-cover-industrial-shed { background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
      url("/static/careers/covers/industrial-shed-2x.webp") center / cover no-repeat var(--htw-navy); }
  .careers-page-head.careers-cover-huon-valley { background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
      url("/static/careers/covers/huon-valley-2x.webp") center / cover no-repeat var(--htw-navy); }
  .careers-page-head.careers-cover-outback-town { background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.72) 45%, rgba(5,25,58,.35) 100%),
      url("/static/careers/covers/outback-town-2x.webp") center / cover no-repeat var(--htw-navy); }
}

/* IP-752 -- a banner from the library P&C upload (_careers_banner.html): a real <img> behind the
   head, under a wash drawn over it, both beneath the text (isolation keeps the negative z-index
   inside the band). The <img> is cropped to fit by object-fit, so the band is as tall as its
   text at every width and never scrolls sideways.
   ⚠️ ANY PHOTO CAN BE UPLOADED, SO THE WASH HOLDS OVER THE WORST ONE THERE IS: PURE WHITE. IP-580's
   six were each measured; these cannot be. The wash is never lighter than .6, and navy at .6 over
   white is rgb(105,117,137), which white text clears at 4.66:1, above the 4.5:1 the HTW Design
   System asks for, wherever the text lands. tests/test_careers_banners.py works that out from
   these stops: a lighter stop fails it.
   So on a banner the eyebrow, the facts and the back link are full white too: cyan and the 88%
   white they use on navy fall to about 3:1 over a pale photo. The icons stay cyan; they are
   decoration (aria-hidden). */
.careers-page-head-banner { position: relative; isolation: isolate; overflow: hidden;
                            background: var(--htw-navy); }
.careers-banner-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
                      object-fit: cover; }
.careers-page-head-banner::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(5,25,58,.9) 0%, rgba(5,25,58,.75) 45%, rgba(5,25,58,.6) 100%); }
.careers-page-head.careers-page-head-banner :is(.careers-eyebrow, .careers-facts, .careers-back) {
  color: #fff; }

/* --- Section headings: a small uppercase eyebrow over a large bold heading. --------------- */
.careers-section + .careers-section { margin-top: 4.5rem; }
.careers-eyebrow { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600;
                   letter-spacing: .08em; text-transform: uppercase; color: var(--htw-blue); }
.careers-page-head .careers-eyebrow { color: var(--htw-cyan); }
.careers-heading { margin: 0; max-width: 56ch; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.375rem);
                   font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.careers-intro { margin: 1rem 0 0; max-width: 60ch; font-size: 1.125rem; color: var(--htw-slate); }

/* --- Role cards: the website's .cg-vacancy-card, look and behaviour (IP-572), measured off
   htw.com.au 23 Oct 2026. White, 1px #E2E8F0, 16px radius, a 2px shadow; on hover the card
   lifts 4px over .2s with a deeper shadow and a pale cyan border. "Apply now" is the website's
   cyan, deepening on hover. Three across, two under 1024px, one under 640px. The whole card is
   the link (the title's stretched-link), so keyboard focus outlines the card as the website does. */
.careers-cards { display: grid; gap: 24px; margin-top: 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .careers-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .careers-cards { grid-template-columns: minmax(0, 1fr); } }
.careers-card { position: relative; display: flex; flex-direction: column; height: 100%;
                padding: 24px; background: #fff; color: inherit;
                border: 1px solid #E2E8F0; border-radius: 16px; box-shadow: 0 2px 4px #0F172A14;
                transition: transform .2s, box-shadow .2s; }
.careers-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px #0F172A1F; border-color: #D8F3FD; }
.careers-card:has(a:focus-visible) { outline: 3px solid #0078A3; outline-offset: 4px; }
/* The website's card head: the office photo (72px, 12px radius) beside the title and details. */
.careers-card-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px;
                     align-items: start; margin-bottom: 24px; }
.careers-card-thumb { display: block; width: 72px; height: 72px; border-radius: 12px;
                      object-fit: cover; background: #fff; }
.careers-card-copy { min-width: 0; }
@media (max-width: 720px) {
  .careers-card-head { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .careers-card-thumb { width: 64px; height: 64px; }
}
.careers-card-title { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.25; color: #0F172A; }
.careers-card-title a { color: inherit; text-decoration: none; }
.careers-card-title a:focus-visible { outline: 0; }
.careers-card-meta { display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
                     font-size: 14px; color: #475569; }
.careers-card-cta { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
                    margin-top: auto; font-size: 15px; font-weight: 600; color: #00AEEF; }
.careers-card-cta:hover { color: #0078A3; }

/* Nothing open: the website's "Don't see the right role?" banner, used as the empty state. */
.careers-empty { margin-top: 2rem; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); color: #fff;
                 border-radius: 24px;
                 background:
                   radial-gradient(circle at 78% 18%, rgba(0,159,227,.34), transparent 34%),
                   linear-gradient(118deg, #0e1b22 0%, #123f58 62%, #075d82 100%); }
.careers-empty h3 { margin: 0 0 .5rem; font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem);
                    font-weight: 700; color: #fff; }
.careers-empty p { margin: 0; max-width: 60ch; color: rgba(255,255,255,.88); }
.careers-empty a { color: #fff; }

/* --- The ambient section: the website's .cg-ambient-section (IP-572). A white band with a
   76px white grid over two soft cyan orbs, faded to white top and bottom. Where an orb sits,
   the grid shows as white lines through the blue. Orb A drifts on an 8s loop and orb B on a
   10s loop. While the pointer is over the band, careers.js stops orb A and glides it under
   the pointer (.is-follow: a 1.8s ease), then sends it home when the pointer leaves.
   Decoration only: aria-hidden, pointer-events none, still under reduced motion. */
/* max-width: none undoes app.css's `main { max-width: 1200px }`: this <main> is the full-width
   band, and its .container is the 1200px column. overflow: CLIP, not hidden: a hidden box is
   still a scroll container, so the hero's #openings link scrolled the band's own contents
   (the orbs jumped ~100px and the top of the section was cut off) instead of the page. clip
   cannot scroll. Browsers without clip keep hidden. */
.careers-ambient { position: relative; overflow: hidden; overflow: clip; background: #fff; max-width: none;
                   padding-block: clamp(3.5rem, 2rem + 5vw, 6.3rem); }
.careers-ambient::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 76px 76px; }
.careers-ambient::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #fff 0%, transparent clamp(70px, 8vw, 150px)),
              linear-gradient(0deg, #fff 0%, transparent clamp(70px, 8vw, 150px)); }
.careers-ambient > :not(.careers-orb) { position: relative; z-index: 2; }
.careers-ambient > .alert { max-width: 1176px; margin-inline: auto; }
.careers-orb { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
               will-change: transform, opacity; }
.careers-orb-a { top: -12%; left: -6%; width: clamp(600px, 56vw, 1400px); height: clamp(420px, 38vw, 950px);
                 background: radial-gradient(closest-side, #009FE340, #009FE317 55%, transparent 76%);
                 animation: careers-orb-a 8s ease-in-out infinite; }
.careers-orb-b { bottom: -14%; right: -8%; width: clamp(460px, 44vw, 1100px); height: clamp(340px, 30vw, 760px);
                 background: radial-gradient(closest-side, #009FE336, #009FE313 55%, transparent 76%);
                 animation: careers-orb-b 10s ease-in-out infinite; }
.careers-orb.is-follow { animation: none; transition: transform 1.8s cubic-bezier(.22, 1, .36, 1); }
@keyframes careers-orb-a {
  0%, 100% { opacity: .7; transform: translate(0) scale(1); }
  25% { transform: translate(14%, 20%) scale(1.22); }
  50% { opacity: 1; transform: translate(26%, 6%) scale(1.45); }
  75% { transform: translate(8%, -18%) scale(.85); }
}
@keyframes careers-orb-b {
  0%, 100% { opacity: 1; transform: translate(0) scale(1); }
  25% { transform: translate(-17%, -14%) scale(1.26); }
  50% { opacity: .68; transform: translate(-28%, -30%) scale(1.5); }
  75% { transform: translate(-7%, 11%) scale(.84); }
}

/* --- Content cards on the role, form and status pages ------------------------------------- */
main .card { border-color: var(--htw-neutral-200); box-shadow: var(--shadow-1); }
main .card > .card-body { padding: clamp(1.25rem, .75rem + 2vw, 2.25rem); }
.careers-card-heading { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 700; }
/* IP-578 -- the description is HTML (sanitize.job_ad_html, which paragraphs plain text too), so
   no pre-line: the tags carry the shape. Spacing reads like htw.com.au/careers. */
.careers-prose { font-size: 1.0625rem; line-height: 1.65; overflow-wrap: anywhere; }
.careers-prose > :first-child { margin-top: 0; }
.careers-prose > :last-child { margin-bottom: 0; }
.careers-prose p, .careers-prose ul, .careers-prose ol { margin: 0 0 1rem; }
.careers-prose h3 { margin: 1.75rem 0 .75rem; font-size: 1.3125rem; font-weight: 700; line-height: 1.3; }
.careers-prose h4 { margin: 1.5rem 0 .5rem; font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.careers-prose ul, .careers-prose ol { padding-left: 1.5rem; }
.careers-prose li { margin-bottom: .375rem; padding-left: .25rem; }
.careers-prose li::marker { color: var(--htw-blue); }
/* An intake's Apply Now, under About the program: full width on a phone, like Next and Send. */
.careers-apply-cta { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #E2E8F0; }
@media (max-width: 575.98px) { .careers-apply-cta .careers-btn { width: 100%; } }
/* The key selling points, at the top of "About the role": a blue tick per point. */
.careers-selling-points { display: grid; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none;
                          font-size: 1.0625rem; font-weight: 600; }
.careers-selling-points li { display: flex; align-items: baseline; gap: .5rem; }
.careers-selling-points .bi { flex-shrink: 0; color: var(--htw-blue); }
.careers-card-summary { margin: 0 0 .25rem; color: var(--htw-ink); }
main .form-label, main legend { font-weight: 600; }
main .form-control, main .form-select { min-height: 2.75rem; }
main .list-group { border-radius: var(--radius-lg); }

/* --- Footer: white, logo and tagline, a hairline, link columns, then the legal line. ------ */
.careers-footer { border-top: 1px solid var(--htw-neutral-200); background: #fff;
                  color: var(--htw-ink); padding-block: 3rem 2rem; font-size: .875rem; }
.careers-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
                      gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--htw-neutral-200); }
.careers-footer-top img { display: block; height: 2.75rem; width: auto; }
.careers-tagline { margin: 0; font-style: italic; text-align: right; }
.careers-footer-cols { display: grid; gap: 2rem; padding-block: 2rem;
                       grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.careers-footer-cols h2 { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 700;
                          letter-spacing: .04em; text-transform: uppercase; }
.careers-footer-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.careers-footer-cols a { display: inline-flex; align-items: center; gap: .375rem;
                         color: var(--htw-slate); text-decoration: none; }
.careers-footer-cols a::before { content: "\203A"; color: var(--htw-cyan-mid); font-weight: 700; }
.careers-footer-cols a:hover { color: var(--htw-blue-700); text-decoration: underline; }
.careers-legal { margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--htw-neutral-200);
                 font-size: .75rem; color: var(--htw-slate); }
@media (max-width: 575.98px) {
  .careers-tagline { text-align: left; }
}

/* --- The apply form (Academy form feedback, Nov 2026) ------------------------------------
   The HTW UI Style Guide v1.0's form fields (section 7), selection controls (8), segmented
   stepper (12) and inline banners (15), on the careers look. Scoped to .apply-steps
   (_apply_fields.html), so no other careers page changes. Where this differs from the guide,
   it is on purpose:
   - Fields keep 16px type and 44px height. The guide's 14px makes iPhones zoom into a field
     when it is tapped, and 44px is the guide's own touch minimum.
   - Borders on fields are Slate 300 and on checkboxes and radios #64748B, not the guide's
     Muted Border: a public form's empty boxes have to be findable (WCAG 1.4.11, 3:1).
   - Small coloured text (the current step, links, Edit) is Cyan 700 (#0078A3), as the rest of
     careers.css does: Cyan 500 text is about 2.6:1 on white. Error text is Error 800 (#991B1B),
     the guide's badge-text step, for the same reason.
   - The required * is the guide's Error Red, as in its "Required Field" example.
   - In an open dropdown the chosen row's text is #005270, not Cyan 600 (2.7:1 on its Cyan 100
     tint), and a row under the pointer or the keyboard is Slate 100, not Slate 50, which is
     hard to see on white. */
.apply-steps legend { float: none; width: auto; padding: 0; }
.apply-steps .form-label { margin-bottom: 7px; font-size: .875rem; font-weight: 600;
                           line-height: 1.4; color: #475569; }
.apply-steps .form-text { margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: #475569; }
.apply-req { margin-left: .2em; color: #EF4444; font-weight: 700; }
.apply-required-note { margin: 0 0 1.25rem; font-size: .8125rem; color: #475569; }

.apply-steps .form-control, .apply-steps .form-select {
  min-height: 2.75rem; padding: 10px 14px; font-size: 1rem; line-height: 1.5; color: #0F172A;
  background-color: #fff; border: 1px solid #CBD5E1; border-radius: 6px; box-shadow: none;
  transition: border-color .15s, box-shadow .15s; }
.apply-steps .form-select { padding-right: 2.5rem; }
.apply-steps .form-control[type=file] { padding: 8px 14px; }
.apply-steps .form-control:focus, .apply-steps .form-select:focus {
  border-color: #00AEEF; outline: 0; box-shadow: inset 0 0 0 1px #00AEEF, 0 0 0 3px #D8F3FD; }
.apply-steps .form-control.is-invalid, .apply-steps .form-select.is-invalid {
  border-color: #EF4444; box-shadow: inset 0 0 0 1px #EF4444; }
.apply-steps .form-control.is-invalid { padding-right: 14px; background-image: none; }
.apply-steps .form-select.is-invalid { --bs-form-select-bg-icon: none; padding-right: 2.5rem; }
.apply-steps .form-control.is-invalid:focus, .apply-steps .form-select.is-invalid:focus {
  box-shadow: inset 0 0 0 1px #EF4444, 0 0 0 3px #FEE2E2; }

/* Dropdowns, open: the guide's list (a white panel, 8px radius, a soft navy shadow, rows that
   tint, the chosen one Cyan 100 and bold, the chevron turned up). Only a browser with the
   customisable <select> (appearance: base-select; Chrome and Edge 135 on) lets a page draw the
   open list. The others keep their own, which on a phone is the better picker anyway; the
   closed box is the same everywhere. */
@supports (appearance: base-select) {
  .apply-steps select.form-select { appearance: base-select; }
  .apply-steps select.form-select::picker(select) {
    appearance: base-select; margin-top: 4px; padding: 6px; background: #fff;
    border: 1px solid #E2E8F0; border-radius: 8px; box-shadow: 0 16px 32px rgba(15, 23, 42, .18); }
  .apply-steps select.form-select::picker-icon { display: none; }   /* Bootstrap's chevron stays */
  .apply-steps select.form-select:open {
    border-color: #00AEEF; box-shadow: inset 0 0 0 1px #00AEEF, 0 0 0 3px #D8F3FD;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300AEEF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 11 6-6 6 6'/%3e%3c/svg%3e"); }
  .apply-steps select.form-select option {
    padding: 9px 12px; border-radius: 6px; font-size: 1rem; color: #0F172A; }
  .apply-steps select.form-select option::checkmark { display: none; }
  .apply-steps select.form-select option:is(:hover, :focus-visible) { background: #F1F5F9; outline: 0; }
  .apply-steps select.form-select option:focus-visible { box-shadow: inset 0 0 0 2px #00AEEF; }
  .apply-steps select.form-select option:checked { background: #D8F3FD; color: #005270; font-weight: 600; }
  /* "Please choose…" is a prompt, not an answer: never tinted as the chosen one. */
  .apply-steps select.form-select option[value=""] { color: #64748B; font-weight: 400; }
  .apply-steps select.form-select option[value=""]:checked:not(:hover, :focus-visible) { background: none; }
}

/* Documents: the guide's drag-and-drop zone (_apply_fields.html's file_drop). Without the
   script it is the plain file input and its hint; with it the input covers the zone, unseen,
   and takes the click and the drop. Focus shows as the guide's field focus ring. */
.apply-drop { position: relative; }
.apply-drop-icon, .apply-drop-title, .apply-drop-btn { display: none; }
.apply-drop-hint { display: block; margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: #475569; }
.is-stepped .apply-drop { display: flex; flex-direction: column; align-items: center; padding: 24px 20px;
                          text-align: center; background: #F8FAFC; border: 1.5px dashed #A7E5FB;
                          border-radius: 10px; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.is-stepped .apply-drop .apply-drop-input { position: absolute; inset: 0; z-index: 1; width: 100%;
                                            height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.is-stepped .apply-drop .apply-drop-input::file-selector-button { cursor: pointer; }
.is-stepped .apply-drop-icon { display: flex; align-items: center; justify-content: center; width: 40px;
                               height: 40px; border-radius: 10px; background: #D8F3FD; color: #0078A3;
                               font-size: 1.125rem; }
.is-stepped .apply-drop-title { display: block; margin-top: 12px; font-size: .9375rem; font-weight: 600;
                                color: #0F172A; }
.is-stepped .apply-drop-hint { margin-top: 4px; }
.is-stepped .apply-drop-btn { display: inline-flex; margin-top: 14px; }
.is-stepped .apply-drop:hover, .is-stepped .apply-drop.is-over { border-color: #00AEEF; background: #F0FAFE; }
.is-stepped .apply-drop:hover .apply-drop-btn, .is-stepped .apply-drop.is-over .apply-drop-btn { background: #009DD6; }
.is-stepped .apply-drop:focus-within { border-style: solid; border-color: #00AEEF; box-shadow: 0 0 0 3px #D8F3FD; }
.is-stepped .apply-drop:has(.is-invalid) { border-style: solid; border-color: #EF4444; }
/* A phone has nothing to drag from: the zone is the icon, the hint and Browse files. */
@media (hover: none) and (pointer: coarse) {
  .is-stepped .apply-drop { padding-block: 18px; }
  .is-stepped .apply-drop-title { display: none; }
  .is-stepped .apply-drop-hint { margin-top: 10px; }
}
/* The file picked: the guide's uploaded-file row. */
.apply-drop-picked { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px;
                     background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 8px; }
.apply-drop-picked:empty { display: none; }
.apply-drop-file-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 32px;
                        height: 32px; border-radius: 8px; background: #D8F3FD; color: #0078A3; }
.apply-drop-file-text { flex: 1; min-width: 0; }
.apply-drop-file-name { display: block; overflow: hidden; font-size: .875rem; font-weight: 600; color: #0F172A;
                        text-overflow: ellipsis; white-space: nowrap; }
.apply-drop-file-meta { display: block; margin-top: 2px; font-size: .75rem; color: #475569; }
.apply-drop-remove { display: flex; align-items: center; justify-content: center; flex: none; width: 32px;
                     height: 32px; padding: 0; border: 1px solid #E2E8F0; border-radius: 999px;
                     background: #fff; color: #475569; font-size: .75rem; }
.apply-drop-remove:hover { border-color: #EF4444; color: #B91C1C; }
.apply-drop-remove:focus-visible { outline: 3px solid #0078A3; outline-offset: 2px; }

/* Checkboxes and radios: 18px, a 4px-radius box or a circle; checked is HTW Cyan, a radio as a
   5px cyan ring. */
.apply-steps .form-check { min-height: 1.5rem; margin: 0; padding-left: 1.875rem; }
.apply-steps .form-check-input { width: 18px; height: 18px; margin-top: .1875rem; margin-left: -1.875rem;
                                 background-color: #fff; border: 1.5px solid #64748B; cursor: pointer; }
.apply-steps .form-check-input[type=checkbox] { border-radius: 4px; }
/* A radio group nobody has answered matches :indeterminate too, hence [type=checkbox]. */
.apply-steps .form-check-input:checked, .apply-steps .form-check-input[type=checkbox]:indeterminate {
  background-color: #00AEEF; border-color: #00AEEF; }
.apply-steps .form-check-input[type=radio]:checked {
  --bs-form-check-bg-image: none; background-color: #fff; border: 5px solid #00AEEF; }
.apply-steps .form-check-input:focus { border-color: #00AEEF; box-shadow: 0 0 0 3px #D8F3FD; }
.apply-steps .form-check-label { cursor: pointer; color: #0F172A; }
.apply-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.apply-group-title { margin-bottom: 12px; font-size: 1rem; font-weight: 700; color: #0F172A; }
.apply-radios, .apply-checks { display: grid; gap: 10px; margin-top: 4px; }
.apply-radios-inline { display: flex; flex-wrap: wrap; gap: 10px 32px; }
/* A long pick-any list reads down its columns, as the office picker does. */
.apply-checks-cols { display: block; columns: 3 12rem; column-gap: 32px; }
.apply-checks-cols .form-check { break-inside: avoid; margin-bottom: 10px; }
.is-invalid-group .form-check-input:not(:checked) { border-color: #EF4444; }

/* 113 -- an option's description (_apply_question.html): a dark tooltip under the option on hover
   or keyboard focus, which stays while the pointer moves onto it (WCAG 1.4.13: hoverable) and
   which Escape closes (apply_form.js, `.is-tip-closed`). On a touch screen, which cannot hover,
   it is plain grey words under the option instead, always shown. */
.apply-has-tip { position: relative; }
.apply-tip-mark { margin-left: 6px; font-size: .875em; color: #64748B; }
.apply-tip { position: absolute; z-index: 30; top: calc(100% + 8px); left: 1.875rem;
             width: max-content; max-width: min(26rem, calc(100vw - 4rem));
             padding: 10px 12px; border-radius: 8px; background: #0F172A; color: #fff;
             font-size: .875rem; line-height: 1.45; box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
             opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility .12s; }
/* The arrow, and an invisible bridge over the 8px gap so the pointer can reach the tooltip. */
.apply-tip::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.apply-tip::after { content: ""; position: absolute; top: -5px; left: 14px; width: 10px; height: 10px;
                    background: #0F172A; transform: rotate(45deg); }
.apply-has-tip:hover .apply-tip, .apply-has-tip:focus-within .apply-tip { opacity: 1; visibility: visible; }
.apply-has-tip.is-tip-closed .apply-tip { opacity: 0; visibility: hidden; }
@media (hover: none) {
  .apply-tip-mark { display: none; }
  .apply-tip, .apply-has-tip.is-tip-closed .apply-tip {
    position: static; display: block; width: auto; max-width: none; margin-top: 2px; padding: 0;
    background: none; box-shadow: none; color: #475569; font-size: .8125rem;
    opacity: 1; visibility: visible; transition: none; }
  .apply-tip::before, .apply-tip::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .apply-tip { transition: none; } }

/* The office picker: a column per state group on a wide screen, the state's box ticking all its
   offices; on a phone, one column of states that fold away (apply_form.js). */
.apply-office-groups { columns: 3 13rem; column-gap: 32px; margin-top: 10px; }
/* "Anywhere": above the states, ruled off from them like a state's heading. */
.apply-steps .apply-office-anywhere { margin-top: 10px; padding-bottom: 12px; border-bottom: 1px solid #E2E8F0; }
.apply-office-anywhere .form-check-label { font-weight: 700; }
.apply-office-anywhere-hint { font-weight: 400; color: #475569; }
.apply-office-group { break-inside: avoid; margin-bottom: 26px; }
.apply-office-head { display: flex; align-items: center; gap: 12px; min-height: 2rem;
                     padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #E2E8F0; }
.apply-office-head .form-check-input { flex: none; margin: 0; }
.apply-office-name { display: flex; flex: 1; align-items: baseline; justify-content: space-between;
                     gap: 8px; min-width: 0; }
.apply-office-name label { font-weight: 700; color: #0F172A; cursor: pointer; }
.apply-office-count { display: none; font-size: .8125rem; color: #475569; white-space: nowrap; }
.is-stepped .apply-office-count { display: inline; }
.apply-office-count-word { display: none; }
.apply-office-list { display: grid; gap: 10px; padding-left: 30px; }
.apply-office-collapse { display: inline-flex; align-items: center; justify-content: center; flex: none;
                         width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px;
                         background: none; color: #475569; }
.apply-office-collapse:hover { background: #F1F5F9; }
.apply-office-collapse:focus-visible { outline: 3px solid #0078A3; outline-offset: 1px; }
.apply-office-group.is-collapsed .bi-chevron-up { transform: rotate(180deg); }
@media (max-width: 767.98px) {
  .apply-office-groups { columns: 1; }
  .apply-office-group { margin-bottom: 6px; }
  .apply-office-group.is-collapsed .apply-office-head { margin-bottom: 0; }
  .apply-office-name { flex-direction: column; align-items: flex-start; gap: 0; }
  .apply-office-count-word { display: inline; }
  .apply-office-list { padding-bottom: 8px; }
}
/* The "which states?" question the office picker answers (see _apply_fields.html). */
.apply-derived { display: none !important; }

/* Steps. Without JavaScript they are sections of one page, ruled off; with it, one shows. */
.apply-step + .apply-step { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #E2E8F0; }
.is-stepped .apply-step + .apply-step { margin-top: 0; padding-top: 0; border-top: 0; }
/* The step's name and the progress labels are in capitals (P&C, Nov 2026), as the guide's
   section labels are. Capitals by CSS, so a screen reader still reads words, not letters. */
.apply-step-title { margin: 0 0 1.25rem; font-size: 1.25rem; font-weight: 700; color: #0F172A; outline: 0;
                    letter-spacing: .03em; text-transform: uppercase; }
.apply-step-count { display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 600;
                    letter-spacing: .06em; text-transform: uppercase; color: #475569; }
.apply-step-intro { margin: 0 0 1rem; color: #475569; }

/* The progress bar: the guide's segmented stepper. Equal segments, 8px, 6px apart; done and
   current are cyan, the rest Muted Border; only the current label is coloured. */
.apply-progress { margin: 0 0 1.25rem; }
.apply-progress-list { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.apply-progress-item { flex: 1 1 0; min-width: 0; }
.apply-progress-btn { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0;
                      border: 0; background: none; text-align: left; font-size: .75rem;
                      font-weight: 500; line-height: 1.3; letter-spacing: .06em;
                      text-transform: uppercase; color: #94A3B8; }
.apply-progress-btn:not(:disabled) { cursor: pointer; }
.apply-progress-bar { display: block; height: 8px; border-radius: 999px; background: #E2E8F0; }
.is-done .apply-progress-bar, .is-current .apply-progress-bar { background: #00AEEF; }
.is-done .apply-progress-btn { font-weight: 600; color: #475569; }
.is-done .apply-progress-btn:hover .apply-progress-label { color: #0078A3; text-decoration: underline; }
.is-current .apply-progress-btn { font-weight: 600; color: #0078A3; }
.apply-progress-btn:focus-visible { outline: 3px solid #0078A3; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 767.98px) { .apply-progress-label { display: none; } }

/* Problems: the guide's error banner (Error 100 tint, 4px Error Red rule), each a link. */
.apply-error-summary { margin: 0 0 1.5rem; padding: 14px 16px; background: #FEE2E2;
                       border-left: 4px solid #EF4444; border-radius: 8px; outline: 0; }
.apply-error-summary:focus-visible { box-shadow: 0 0 0 3px #0078A3; }
.apply-error-summary-title { margin: 0 0 6px; font-size: .9375rem; font-weight: 700; color: #0F172A; }
.apply-error-summary-list { margin: 0; padding-left: 1.125rem; }
.apply-error-summary-list a { color: #991B1B; font-weight: 600; text-decoration: underline;
                              text-underline-offset: 2px; }
.apply-error { margin: 6px 0 0; font-size: .8125rem; font-weight: 600; color: #991B1B; }
.apply-group > .apply-error { margin: 0 0 8px; }
.apply-group > .apply-consent + .apply-error { margin: 6px 0 0; }

/* The summary on the last step. */
.apply-review-card { padding: 16px 18px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; }
.apply-review-card + .apply-review-card { margin-top: 12px; }
.apply-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
                     margin-bottom: 10px; }
.apply-review-title { margin: 0; font-size: .9375rem; font-weight: 700; }
.apply-review-list { display: grid; grid-template-columns: minmax(9rem, 2fr) 3fr; gap: 6px 20px;
                     margin: 0; font-size: .875rem; }
.apply-review-list dt { font-weight: 600; color: #475569; }
.apply-review-list dd { margin: 0; color: #0F172A; overflow-wrap: anywhere; white-space: pre-line; }
.apply-review-list dd.is-empty { color: #64748B; }
@media (max-width: 575.98px) {
  .apply-review-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .apply-review-list dd { margin-bottom: 10px; }
}
.apply-link-btn { padding: 0; border: 0; background: none; font-size: .875rem; font-weight: 600;
                  color: #0078A3; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.apply-link-btn:hover { color: #005270; }
.apply-link-btn:focus-visible { outline: 3px solid #0078A3; outline-offset: 2px; border-radius: 2px; }

/* The privacy notice in two layers, and the consent box as the guide's option card. */
.apply-privacy-summary { margin: 0 0 12px; font-size: .875rem; color: #475569; }
.apply-privacy-full summary { font-size: .875rem; font-weight: 600; color: #0078A3; cursor: pointer; }
.apply-privacy-body { max-height: 16rem; margin-top: 10px; padding: 14px 16px; overflow-y: auto;
                      font-size: .875rem; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 8px; }
.apply-steps .apply-consent { margin-top: 16px; padding: 14px 16px 14px calc(16px + 1.875rem);
                              border: 1px solid #E2E8F0; border-radius: 10px; }
.apply-consent:has(.form-check-input:checked) { background: #D8F3FD; border-color: #00AEEF; }
.apply-consent:has(.is-invalid) { border-color: #EF4444; }
.apply-steps .form-check-input.is-invalid ~ .form-check-label { color: #0F172A; }

/* The buttons: Back on the left; Save and finish later (tertiary), then Next or Send, on the
   right, as the guide's button group runs. apply_form.js puts Save in front of Next. On a
   phone Next or Send takes a row of its own, full width, under the other two. */
.apply-actions { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #E2E8F0; }
.apply-actions .cf-turnstile:not(:empty) { margin-bottom: 12px; }
.apply-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.apply-actions-row [data-step-save] { margin-left: auto; }
.apply-autosave-note, .apply-restored-note { margin: 14px 0 0; }
@media (max-width: 575.98px) {
  .apply-actions-row .careers-btn { padding-inline: 18px; }
  .apply-actions-row [data-step-next], .apply-actions-row [data-step-send] { flex: 1 1 100%; }
}

/* IP-579 -- the staff app's ad preview (careers_job.html with ad_preview): a banner that stays
   at the top while P&C scroll, and the note standing in for the apply form. */
.careers-preview-banner { background: var(--htw-warning); color: #212529; padding-block: .625rem;
                          z-index: 1030; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.careers-preview-banner .bi { margin-right: .375rem; }
.careers-preview-apply { color: var(--htw-slate); }
.careers-preview-apply .bi { margin-right: .375rem; }

@media (prefers-reduced-motion: reduce) {
  .careers-card, .careers-btn { transition: none; }
  .careers-orb { animation: none; }
}