/* Helix — Optymum SS Digital Tools.
 *
 * A clean, light, clinical aesthetic: white panels, brand blue and cyan accents,
 * generous spacing, no decoration that carries meaning on its own. Every status is
 * text plus symbol, never colour alone, so the interface survives being printed in
 * greyscale or read by somebody who cannot distinguish the hues.
 *
 * Layout is fluid rather than a set of fixed breakpoints where possible, so the
 * app behaves at 320px and at 1440px without a separate mobile design.
 */

:root {
  --brand-blue: #1878c4;
  --brand-blue-dark: #12629f;
  --brand-cyan: #22a7d0;
  --brand-navy: #17395f;
  --brand-tint: #e9f2fa;

  --bg: #f5f8fb;
  --panel: #ffffff;
  --ink: #101720;
  --muted: #55616f;
  --line: #d5dee7;
  --focus: #0b5fff;

  --good: #17603a;
  --good-bg: #e6f5ec;
  --good-line: #a5d7b9;
  --warn: #7d4a00;
  --warn-bg: #fdf4e3;
  --warn-line: #e5c68d;
  --gap: #8a3320;
  --gap-bg: #fceee9;
  --gap-line: #e8b6a5;
  --info-bg: #eef4fb;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 39, 66, .05), 0 2px 10px rgba(16, 39, 66, .06);
  --space: 1rem;
  --max: 1180px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4 { color: var(--brand-navy); line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
h3 { font-size: 1.05rem; margin-top: 1.4rem; }
h4 { font-size: .95rem; margin-top: 1.1rem; }
p { margin: 0 0 .85rem; max-width: 78ch; }
a { color: var(--brand-blue-dark); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--panel);
  padding: .7rem 1rem;
  z-index: 20;
}
.skip:focus { left: 1rem; top: .6rem; }

/* --------------------------------------------------------------- site frame */

.site-head {
  background: linear-gradient(135deg, var(--brand-navy) 0%, #14538c 60%,
                              var(--brand-blue) 100%);
  color: #fff;
  padding: .9rem 1rem 1.1rem;
}
.bar {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  text-decoration: none;
}
.brand-mark { color: var(--brand-cyan); display: inline-flex; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
/* Both lines are the product name, so both are bold and both are white. The
   second line is smaller only to fit the bar, not because it is a strapline. */
.brand-text strong { font-size: 1.24rem; letter-spacing: -.01em; }
.brand-text small {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .005em;
}

#nav { display: flex; flex-wrap: wrap; gap: .2rem .35rem; }
#nav a {
  color: #eaf3fb;
  text-decoration: none;
  padding: .55rem .7rem;
  border-radius: 8px;
  font-size: .93rem;
  min-height: 2.6rem;
  display: inline-flex;
  align-items: center;
}
#nav a:hover { background: rgba(255, 255, 255, .14); }
#nav a[aria-current="page"] {
  background: #fff;
  color: var(--brand-navy);
  font-weight: 600;
}

.tagline {
  max-width: var(--max);
  margin: .7rem auto 0;
  color: #d6e7f7;
  font-size: .88rem;
}
.dataset-note { color: #a8cbe9; }

main { max-width: var(--max); margin: 0 auto; padding: 1.25rem 1rem 4rem; }
main:focus { outline: none; }

.site-foot {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem;
}
.site-foot h3 { font-size: .95rem; }
.disclaimer { max-width: 90ch; }

.foot-links {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  margin: 0 0 1rem; font-weight: 600;
}
.foot-links a { color: var(--brand-blue-dark); }
.site-foot details { margin-top: 1rem; }
.site-foot summary { cursor: pointer; padding: .4rem 0; }

/* -------------------------------------------------------------- containers */

.stack > * + * { margin-top: 1.1rem; }
.stack-tight > * + * { margin-top: .5rem; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.4rem;
}
.panel-error { border-color: var(--gap-line); background: var(--gap-bg); }

.hero {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.8rem 1.5rem;
}
/* The product name leads the landing page and is given room to breathe. It
   scales with the viewport rather than stepping at a breakpoint, so a long name
   stays on a sensible number of lines from 320px upwards. */
.hero-name {
  font-size: clamp(1.9rem, 5.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--brand-navy);
  margin: .2rem 0 0;
}
.hero-tagline {
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  line-height: 1.45;
  color: var(--brand-blue-dark);
  font-weight: 600;
  max-width: 58ch;
  margin: .55rem 0 1rem;
}
.hero .lede { font-size: 1.06rem; color: var(--muted); max-width: 70ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 .3rem;
}
.lede { color: var(--muted); }
.hint { color: var(--muted); font-size: .9rem; }
.big { font-size: 1.1rem; font-weight: 600; }
.empty { color: var(--muted); font-style: italic; }
.center { justify-content: center; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.card h3 { margin: 0; font-size: 1.02rem; }
.card-head {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: start;
  justify-content: space-between;
}
.card-family { color: var(--muted); font-size: .88rem; margin: 0; }
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: auto;
  padding-top: .5rem;
}
.career-card { min-width: 0; }
.career-header h1 { margin-bottom: .35rem; }

.sticky-actions {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  padding: .75rem 0;
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: .55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--brand-navy);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--brand-blue); background: var(--brand-tint); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn-primary {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--brand-blue-dark); }
.btn-quiet:hover { background: var(--brand-tint); border-color: var(--brand-tint); }
.btn-danger { border-color: var(--gap-line); color: var(--gap); background: var(--gap-bg); }
.btn-lg { min-height: 3rem; font-size: 1rem; padding: .7rem 1.3rem; }
.ext { font-size: .85em; }

/* ------------------------------------------------------------------- chips */

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .3rem 0 .8rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--brand-tint);
  border: 1px solid #cfe1f2;
  color: var(--brand-navy);
  border-radius: 999px;
  padding: .28rem .7rem;
  font-size: .84rem;
}
.chip-good { background: var(--good-bg); border-color: var(--good-line); color: var(--good); }
.chip-gap { background: var(--gap-bg); border-color: var(--gap-line); color: var(--gap); }
.chip-removable { padding-right: .3rem; }
.chip-remove {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 999px;
}
.chip-remove:hover { background: rgba(0, 0, 0, .08); }

/* A checkbox styled as a toggle chip, with the real input kept focusable. */
.chip-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-toggle { cursor: pointer; user-select: none; min-height: 2.2rem; }
.chip-check:checked + .chip-toggle {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.chip-check:focus-visible + .chip-toggle { outline: 3px solid var(--focus); outline-offset: 2px; }
.chips-list { margin-bottom: .6rem; }

/* ------------------------------------------------------------------ badges */

.badges { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.align, .reg, .depth {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border-radius: 999px;
  padding: .22rem .65rem;
  font-size: .8rem;
  font-weight: 700;
  border: 1px solid;
}
.align-strong { background: var(--good-bg); border-color: var(--good-line); color: var(--good); }
.align-good { background: #e8f3fb; border-color: #b3d7ee; color: var(--brand-blue-dark); }
.align-explore { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.align-pivot { background: #f1f3f6; border-color: #d3d9e0; color: #4a5563; }
.reg { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); font-weight: 600; }
.depth { background: #f2f5f8; border-color: var(--line); color: var(--muted); font-weight: 600; }
.depth-deep { background: #eef4fb; border-color: #b9d5ec; color: var(--brand-blue-dark); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .18rem .6rem;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #f4f6f9;
  color: var(--muted);
  white-space: nowrap;
}
.pill-symbol { font-weight: 700; }
.pill-demonstrated, .pill-completed { background: var(--good-bg); border-color: var(--good-line); color: var(--good); }
.pill-developing, .pill-in_progress { background: #eef4fb; border-color: #b9d5ec; color: var(--brand-blue-dark); }
.pill-action_required { background: var(--gap-bg); border-color: var(--gap-line); color: var(--gap); }
.pill-needs_confirmation { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }

.ind { font-weight: 600; }
.ind-strong { color: var(--good); }
.ind-developing { color: var(--brand-blue-dark); }
.ind-not_identified { color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------- callouts */

.callout {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 9px;
  padding: .9rem 1.1rem;
  background: var(--info-bg);
}
.callout p:last-child { margin-bottom: 0; }
.callout-title { font-size: 1rem; margin-bottom: .4rem; }
.callout-good { background: var(--good-bg); border-color: var(--good-line); border-left-color: var(--good); }
.callout-warn { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: var(--warn); }
.callout-info { border-left-color: var(--brand-blue); }
.warn-inline { color: var(--gap); font-weight: 600; }

.notice {
  max-width: var(--max);
  margin: .9rem auto 0;
  padding: .8rem 1.1rem;
  border-radius: 9px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  background: var(--info-bg);
}
.notice p { margin: 0; }
.notice-good { background: var(--good-bg); border-color: var(--good-line); border-left-color: var(--good); }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: var(--warn); }

/* -------------------------------------------------------------------- forms */

.form-section {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
}
.form-section legend { font-weight: 700; color: var(--brand-navy); padding: 0 .4rem; }
.field { margin: 0 0 .85rem; min-width: 0; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.field-action { display: flex; align-items: end; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: start; }
.row .grow { flex: 1 1 14rem; }

input[type="text"], input[type="number"], input[type="search"], select {
  width: 100%;
  min-height: 2.75rem;
  padding: .5rem .65rem;
  /* 16px keeps iOS from zooming the viewport on focus. */
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
input[type="file"] {
  width: 100%;
  padding: .6rem;
  font: inherit;
  font-size: .95rem;
  background: #fff;
  border: 1px dashed var(--brand-blue);
  border-radius: 8px;
}
select { appearance: auto; }

.filters {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.result-count { font-weight: 600; color: var(--brand-navy); margin: .4rem 0 0; }
.signal-group { margin-bottom: .5rem; }

.summary { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .35rem .9rem; margin: .4rem 0 1rem; }
.summary dt { font-weight: 600; color: var(--muted); font-size: .9rem; }
.summary dd { margin: 0; }
@media (max-width: 30rem) {
  .summary { grid-template-columns: 1fr; gap: .1rem; }
  .summary dd { margin-bottom: .5rem; }
}

.steps { margin: 0; padding-left: 1.3rem; }
.steps li { margin-bottom: .5rem; }
.steps strong { display: block; color: var(--brand-navy); }
.steps span { color: var(--muted); font-size: .92rem; }
ul.plain, ol.plain { list-style: none; padding: 0; margin: 0; }

/* ------------------------------------------------------------------ pathway */

.pathway { list-style: none; margin: 1rem 0 0; padding: 0; }
.node {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: .2rem .8rem;
  padding-bottom: 1.4rem;
  position: relative;
}
/* The connecting line, drawn behind the markers rather than as an element. */
.node:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 2.3rem;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.node-marker {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: #f2f5f8;
  border: 2px solid var(--line);
  color: var(--muted);
  z-index: 1;
}
.node-completed .node-marker { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.node-in_progress .node-marker { background: #eef4fb; border-color: var(--brand-blue); color: var(--brand-blue-dark); }
.node-action_required .node-marker { background: var(--gap-bg); border-color: var(--gap); color: var(--gap); }
.node-needs_confirmation .node-marker { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.node-body { min-width: 0; }
.node-body h3 { margin: .25rem 0 .35rem; }
.node-meta { margin-bottom: .4rem; }
.node-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.node-open {
  background: none;
  border: 0;
  /* Padding rather than none: this is the milestone's primary control, and it
     has to be comfortably tappable. 44px is the size a finger actually needs,
     and the old 28px was clearing a lower bar than a phone deserves. */
  padding: .5rem 0;
  min-height: 44px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-navy);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--brand-cyan);
  text-underline-offset: 3px;
}

.progress { margin: .8rem 0; }
.progress-track { height: .55rem; background: #e7ecf2; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--brand-cyan); }

.actions { margin: 0; padding-left: 1.3rem; }
.actions li { margin-bottom: 1.1rem; }
.actions h3 { margin: 0 0 .3rem; }

.key { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; }
.gap-group { margin-bottom: 1.4rem; }
.gap-list, .req-list { list-style: none; padding: 0; margin: 0; }
.gap-list > li, .req-list > li {
  border-top: 1px solid var(--line);
  padding: .7rem 0;
}
.gap-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.gap-area { color: var(--muted); font-size: .82rem; }

.sources { border-top: 1px solid var(--line); padding-top: 1rem; }
.sources h4 { margin-top: 0; }
.sources ul { padding-left: 1.2rem; margin: 0 0 .6rem; }

.indicators, .compare { border-collapse: collapse; width: 100%; font-size: .93rem; }
.indicators th, .indicators td, .compare th, .compare td {
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.indicators thead th, .compare thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.table-scroll { overflow-x: auto; }
.compare { min-width: 40rem; }
.compare-pick { margin-bottom: 1rem; }

/* ------------------------------------------------------------------ dialogs */

.modal {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  max-width: min(38rem, 94vw);
  width: 100%;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 10px 40px rgba(16, 39, 66, .25);
}
.modal::backdrop { background: rgba(16, 39, 66, .45); }
.modal-head {
  display: flex;
  gap: 1rem;
  align-items: start;
  justify-content: space-between;
  padding: 1rem 1.2rem .5rem;
}
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.modal-body { padding: 0 1.2rem 1rem; max-height: 60vh; overflow-y: auto; }
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: end;
  padding: .8rem 1.2rem 1.1rem;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------- plan / print */

.plan {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 2rem;
}
.plan-head { border-bottom: 2px solid var(--brand-blue); padding-bottom: .8rem; margin-bottom: 1.2rem; }
.plan-meta { color: var(--muted); font-size: .9rem; margin: 0; }
.plan-section { margin-bottom: 1.4rem; }
.plan-section h2 { font-size: 1.08rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.plan-milestones li { margin-bottom: .3rem; }
.plan-foot { border-top: 1px solid var(--line); padding-top: .9rem; color: var(--muted); font-size: .85rem; }
.url { word-break: break-all; color: var(--muted); font-size: .85rem; }

@media print {
  :root { --panel: #fff; --bg: #fff; }
  @page { size: A4; margin: 14mm 13mm 16mm; }
  body { background: #fff; font-size: 10.5pt; }
  /* The comparison tray lives outside #view so a selection survives navigation,
     which also means it is not covered by .no-print and was printing a
     "2 careers selected · Compare now" bar into the middle of the career plan. */
  .site-head, .site-foot, #notice, .no-print, #nav, .skip,
  #compare-tray { display: none !important; }
  main { padding: 0; max-width: none; }
  .plan { border: 0; border-radius: 0; padding: 0; }
  .plan-section { break-inside: avoid; }
  .plan-head { break-after: avoid; }
  h1 { font-size: 20pt; }
  h2 { font-size: 12pt; }
  /* The plan gained sub-headings — the three measures, the salary source, the
     reasons behind each one — which otherwise printed larger than the section
     headings above them. */
  h3 { font-size: 10.5pt; margin: .6em 0 .2em; }
  h3 + ul, h3 + p { margin-top: .2em; }
  a { color: #000; text-decoration: none; }
  .plan-foot { break-inside: avoid; }
  /* Long source URLs are printed in full, since a printed link cannot be
     clicked, but they must not push the page wider than A4. */
  .url { word-break: break-all; font-size: 8.5pt; }
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 40rem) {
  .site-head { padding: .7rem .75rem 1rem; }
  main { padding: 1rem .75rem 3rem; }
  .panel, .hero { padding: 1.1rem 1rem; border-radius: 10px; }
  .bar { gap: .5rem; }
  #nav { width: 100%; overflow-x: auto; padding-bottom: .2rem; }
  #nav a { font-size: .88rem; padding: .5rem .55rem; }
  .hero-actions .btn { width: 100%; }
  .node { grid-template-columns: 2rem 1fr; gap: .2rem .6rem; }
  .node:not(:last-child)::before { left: .95rem; }
  .node-marker { width: 1.9rem; height: 1.9rem; font-size: .9rem; }
}

/* --------------------------------------------------- salary, evidence, tray */

.card-pay { margin: .1rem 0 .2rem; display: flex; flex-wrap: wrap;
            gap: .25rem .45rem; align-items: baseline; }
.card-pay strong { font-size: 1.06rem; color: var(--brand-navy); }
.card-why { font-size: .88rem; color: var(--muted); font-style: italic; }

/* Evidence class is text plus a shape, never colour alone. */
.evidence {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 700; border-radius: 999px;
  padding: .1rem .5rem; border: 1px solid var(--line); background: #f4f6f9;
  color: var(--muted); white-space: nowrap;
}
.evidence-verified_guide { background: var(--good-bg); border-color: var(--good-line); color: var(--good); }
.evidence-strong_estimate { background: #e8f3fb; border-color: #b3d7ee; color: var(--brand-blue-dark); }
.evidence-indicative { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.evidence-limited_data { background: #f1f3f6; border-color: #d3d9e0; color: #4a5563; }

.effort, .fit {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: .18rem .6rem; font-size: .78rem; font-weight: 700;
  border: 1px solid var(--line); background: #f4f6f9; color: var(--muted);
}

/* Effort and fit run in opposite directions — a low transition is good news, a
   low fit is not — so they get their own scales rather than sharing one. Each
   still carries its own words, so the colour is reinforcement, never the
   message. */
.effort-lower { background: var(--good-bg); border-color: var(--good-line); color: var(--good); }
.effort-moderate { background: #e8f3fb; border-color: #b3d7ee; color: var(--brand-blue-dark); }
.effort-substantial { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.effort-major { background: var(--gap-bg); border-color: var(--gap-line); color: var(--gap); }

.fit-very_strong { background: var(--good-bg); border-color: var(--good-line); color: var(--good); }
.fit-strong { background: #e8f3fb; border-color: #b3d7ee; color: var(--brand-blue-dark); }
.fit-mixed { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.fit-low { background: #f1f3f6; border-color: #d3d9e0; color: #4a5563; }
.fit-unknown { background: #f4f6f9; border-color: var(--line); color: var(--muted); font-weight: 600; }

/* The priorities questionnaire. One question per nested fieldset so a screen
   reader announces the question with every option. */
.pref-question {
  border: 0; border-top: 1px solid var(--line);
  margin: 0; padding: .9rem 0 .2rem;
}
.pref-question:first-of-type { border-top: 0; padding-top: .2rem; }
.pref-question > legend {
  padding: 0; font-weight: 600; font-size: .96rem; color: var(--ink);
}
.pref-question .hint { margin: .2rem 0 .5rem; }
.pref-question .chips { margin-top: .45rem; }

.pref-disclosure {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .75rem 1rem; background: var(--info-bg);
}
.pref-disclosure > summary { cursor: pointer; }
.pref-disclosure[open] > summary { margin-bottom: .5rem; }
.pref-disclosure .form-section { background: var(--panel); }

.advanced-filters {
  border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .6rem;
}
.advanced-filters > summary { cursor: pointer; font-weight: 600; }
.advanced-filters .hint { margin: .4rem 0 .2rem; }

/* The career-page decision header. A responsive grid rather than fixed columns,
   so four facts sit in a row on a laptop and stack cleanly on a phone without a
   separate mobile rule. */
.decision-facts {
  display: grid; gap: .75rem 1.25rem; margin: 1rem 0 .85rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.decision-fact { margin: 0; }
.decision-fact dt {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin: 0 0 .15rem;
}
.decision-fact dd { margin: 0; }
.pay-headline { font-size: 1.15rem; }

/* The two ends of a published career range, named so the upper figure is not
   read as the ceiling of a single pay grade. */
.pay-ends {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem;
  margin: .1rem 0 .35rem; color: var(--muted);
}
.pay-ends strong { color: var(--brand-navy); }
.pay-ends-sep { color: var(--brand-cyan); font-weight: 700; }

/* Differences from a baseline. A measured figure and a directional word are
   styled differently on purpose: they are not the same kind of claim. */
.delta-card {
  border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem;
  margin-bottom: .8rem;
}
.delta-card h3 { margin: 0 0 .6rem; font-size: 1.02rem; }
.delta-list { list-style: none; margin: 0; padding: 0; }
.delta-row {
  display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: .2rem .8rem; padding: .45rem 0; border-top: 1px solid var(--line);
  align-items: baseline;
}
.delta-row:first-child { border-top: 0; }
.delta-label { color: var(--muted); }
.delta-value { font-weight: 600; }
.delta-measured .delta-value { font-variant-numeric: tabular-nums; }
/* Direction is carried by the word itself; the arrow and colour are extra, so
   the meaning survives greyscale, a screen reader and colour blindness. */
.delta-up .delta-value::before { content: "▲ "; color: #1a7f4b; }
.delta-down .delta-value::before { content: "▼ "; color: #a4442c; }
.delta-same .delta-value, .delta-unknown .delta-value { font-weight: 500; color: var(--muted); }
.delta-detail { grid-column: 1 / -1; color: var(--muted); font-size: .87rem; }
.baseline-picker .card-actions { flex-wrap: wrap; }
.baseline-chip {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand-navy);
  border: 1px solid var(--brand-cyan); border-radius: 999px; padding: .1rem .5rem;
}

@media (max-width: 30rem) {
  .delta-row { grid-template-columns: 1fr; }
  .delta-label { font-size: .87rem; }
}

/* The two routes, shown as equals. The direct route is never styled as the
   lesser option — whether a longer route is worth it is not Helix's call. */
.route-pair {
  display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 1rem;
}
.route-card {
  border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem;
  background: var(--surface-muted, #f7f9fb);
}
.route-card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.route-steps { margin: 0 0 .5rem; padding-left: 1.1rem; }
.route-steps li { margin-bottom: .25rem; }
.route-steps li + li { position: relative; }

.bridge-card {
  border: 1px solid var(--line); border-left: 4px solid var(--brand-cyan);
  border-radius: 10px; padding: .9rem 1rem; margin-bottom: .8rem;
}
.bridge-card h4 { margin: 0 0 .1rem; font-size: 1.02rem; }
.bridge-card .eyebrow { margin: 0 0 .6rem; }
.bridge-card .summary { margin-bottom: .5rem; }

/* Salary by region. Set apart from the UK figure above it, because it answers a
   different question and carries weaker evidence. */
.region-block {
  border-top: 1px solid var(--line); margin-top: 1.1rem; padding-top: .9rem;
}
.region-block h3 { margin-top: 0; }
.region-picker {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  margin-bottom: .7rem;
}
.region-picker label { font-weight: 600; color: var(--brand-navy); }
.region-select {
  padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font: inherit; color: inherit; min-height: 44px;
  max-width: 100%;
}
.region-select:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 1px; }
.region-delta { margin: .1rem 0 .4rem; }
.region-delta strong { color: var(--brand-navy); }

/* Each of the three personal measures gets its own block, so alignment,
   preference fit and effort read as three answers rather than one verdict. */
.fit-block {
  border-top: 1px solid var(--line); margin-top: 1.1rem; padding-top: .9rem;
}
.fit-block h3 { margin-top: 0; }
.fit-block h4 { margin: .8rem 0 .3rem; font-size: .92rem; }

/* The salary bar. Decoration over a number that is always readable in text. */
.pay-line { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: baseline;
            margin: 0 0 .35rem; }
.pay-track { height: .5rem; background: #e7ecf2; border-radius: 999px; margin: 0 0 .35rem; }
.pay-bar { height: 100%; background: var(--brand-cyan); border-radius: 999px; }
.compare-row { padding: .8rem 0; border-top: 1px solid var(--line); }
.compare-row:first-child { border-top: 0; }
.compare-row h3 { margin: 0 0 .3rem; font-size: 1rem; }
.standout { margin: 0 0 .6rem; padding-left: 1.2rem; }
.standout li { margin-bottom: .45rem; }

/* The persistent comparison tray. */
.tray {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--panel); border-top: 2px solid var(--brand-blue);
  box-shadow: 0 -2px 14px rgba(16, 39, 66, .12);
}
.tray-inner {
  max-width: var(--max); margin: 0 auto; padding: .7rem 1rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
}
.tray-count { margin: 0; }
.tray-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem;
              padding: 0; margin: 0; flex: 1 1 12rem; }
.tray-actions { display: flex; gap: .5rem; margin-left: auto; }

/* Comparison grid: a table when there is room, labelled stacks when there is not. */
.compare-grid th[scope="row"] { width: 12rem; }
@media (max-width: 46rem) {
  .compare-grid { min-width: 0; }
  .compare-grid thead { display: none; }
  .compare-grid, .compare-grid tbody, .compare-grid tr, .compare-grid th,
  .compare-grid td { display: block; width: auto; }
  .compare-grid tr { border-bottom: 2px solid var(--line); padding-bottom: .5rem;
                     margin-bottom: .6rem; }
  .compare-grid th[scope="row"] { width: auto; font-size: .95rem;
                                  color: var(--brand-navy); border: 0;
                                  padding-bottom: .2rem; }
  /* Each cell names its own career, since the header row is gone. */
  .compare-grid td::before {
    content: attr(data-career); display: block; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    font-weight: 700;
  }
  .compare-grid td { border-bottom: 1px solid var(--line); padding: .4rem .6rem; }
  .tray-inner { padding: .6rem .75rem; }
  .tray-actions { margin-left: 0; width: 100%; }
  .tray-actions .btn { flex: 1 1 auto; }
}

/* The career-family paragraph, kept as background rather than as the answer to
   "what is this job". Folded away so the composed description leads. */
.family-context { margin-top: .6rem; }
.family-context > summary { cursor: pointer; color: var(--brand-blue-dark);
                            font-weight: 600; font-size: .92rem; }
.family-context p { margin: .5rem 0 0; color: var(--muted); }

/* Why a career was not recommended. Collapsed by default: it is an answer to a
   question, and a page that volunteers it for every career is arguing. */
.why-not > summary {
  cursor: pointer; font-weight: 600; color: var(--brand-blue-dark);
  padding: .5rem 0; min-height: 44px; display: flex; align-items: center;
}
.why-not > summary:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 2px; }
.why-not-section { margin-top: .9rem; }
.why-not-section h3 { margin: 0 0 .35rem; font-size: 1rem; }
.why-not-section ul { margin: 0; padding-left: 1.2rem; }
.why-not-section li { margin-bottom: .35rem; }

/* Labour market signal strength. Word plus shape, never colour alone. */
.signal {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: .15rem .6rem; border: 1px solid;
}
.signal-strong { color: var(--good); background: var(--good-bg); border-color: var(--good-line); }
.signal-moderate { color: var(--brand-navy); background: var(--brand-tint); border-color: var(--brand-cyan); }
.signal-limited { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.signal-insufficient { color: var(--muted); background: #f1f4f7; border-color: var(--line); }

/* The career graph. Shape and label carry meaning; colour is only reinforcement,
   so the picture survives greyscale and colour blindness. */
.graph-stage {
  overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fbfdfe; padding: .5rem;
}
.career-graph {
  display: block; width: 100%; height: auto;
  transform-origin: top center;
}
.graph-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  margin-bottom: .6rem;
}
.graph-edge { stroke: #9fb3c6; stroke-width: 1.6; }
.graph-edge-dashed { stroke-dasharray: 6 4; }
.graph-edge-dotted { stroke-dasharray: 2 4; stroke-width: 2.2; stroke: var(--brand-cyan); }
.graph-node-holder { width: 100%; height: 100%; display: flex;
                     align-items: center; justify-content: center; }
.graph-node {
  /* Fills its foreignObject rather than shrink-wrapping the label, so every
     node clears the 44px tap target a finger needs. */
  display: flex; align-items: center; gap: .25rem;
  width: 100%; height: 100%; min-height: 44px;
  font: inherit; font-size: .78rem; line-height: 1.15; text-align: left;
  background: #fff; border: 1.5px solid var(--line); border-radius: 8px;
  padding: .3rem .4rem; cursor: pointer; color: var(--ink);
  box-shadow: 0 1px 3px rgba(16,39,66,.12);
}
.graph-node:hover { border-color: var(--brand-cyan); }
.graph-node:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.graph-node-title { overflow: hidden; text-overflow: ellipsis;
                    display: -webkit-box; -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical; }
.graph-node-shape { flex: none; color: var(--brand-navy); }
.graph-node-flag { flex: none; font-weight: 700; color: var(--warn); }
.graph-node-target { border-width: 2.5px; border-color: var(--brand-navy); font-weight: 700; }
.graph-node-current { border-width: 2.5px; border-color: var(--brand-blue); font-weight: 700; }
.graph-node-bridge { border-style: dashed; border-color: var(--brand-cyan); }
.graph-node-regulated { border-left-width: 5px; border-left-color: var(--warn-line); }
.graph-key { display: inline-block; width: 1.2rem; color: var(--brand-navy); }
.graph-group { margin-top: 1.2rem; }
.graph-group h3 { margin-top: 0; }
.graph-list { list-style: none; margin: 0; padding: 0; }
.graph-list > li { border-top: 1px solid var(--line); padding: .7rem 0; }
.graph-list > li:first-child { border-top: 0; }
.graph-list-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.graph-connections { margin: .3rem 0 .2rem; color: var(--muted); font-size: .87rem; }

/* An action, elaborated. The label column is narrow so the content leads. */
.action-detail {
  display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: .25rem .9rem; margin: .6rem 0 .4rem;
}
.action-detail dt { color: var(--muted); font-size: .87rem; }
.action-detail dd { margin: 0; }
.action-detail ul { margin: 0; padding-left: 1.1rem; }
.action-detail li { margin-bottom: .2rem; }

/* The development timeline. */
.horizon { margin-top: 1.4rem; }
.horizon h3 { margin-top: 0; }
.milestones { list-style: none; margin: .4rem 0 0; padding: 0; }
.milestone {
  border: 1px solid var(--line); border-left: 4px solid var(--brand-cyan);
  border-radius: 10px; padding: .8rem .9rem; margin-bottom: .7rem;
}
.milestone-completed { border-left-color: var(--good-line); background: var(--good-bg); }
.milestone-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.milestone-head h4 { margin: 0; font-size: 1rem; }
.milestone-controls {
  display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1rem;
  margin: .5rem 0;
}
.field-inline { margin: 0; }
.field-inline label { display: block; font-size: .87rem; color: var(--muted); }
.milestone input[type="date"], .milestone textarea {
  font: inherit; padding: .45rem .6rem; border: 1px solid var(--line);
  border-radius: 8px; min-height: 44px; max-width: 100%;
}
.milestone textarea { width: 100%; min-height: 3rem; }

@media (max-width: 34rem) {
  .action-detail { grid-template-columns: 1fr; }
  .action-detail dt { font-weight: 600; margin-top: .4rem; }
}

/* The explorer's controls. Search and sort sit on one line; everything else is
   folded away, because a filter is something you reach for after seeing
   results, not a toll gate in front of them. */
.explore-controls {
  display: grid; gap: .5rem 1rem; align-items: end;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.explore-controls .field { margin: 0; }
.filter-block { margin: .8rem 0 .4rem; }
.filter-block > summary {
  cursor: pointer; font-weight: 600; color: var(--brand-blue-dark);
  padding: .55rem 0; min-height: 44px; display: flex; align-items: center;
}
.filter-block > summary:focus-visible {
  outline: 3px solid var(--brand-cyan); outline-offset: 2px;
}
.filter-block[open] > summary { margin-bottom: .5rem; }

@media (max-width: 34rem) {
  .explore-controls { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- the menu button */

/* Above the breakpoint nothing changes: the links sit in the bar as before, and
   the button is not rendered at all. */
.nav-toggle { display: none; }

.nav-toggle-bars {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 20px; height: 16px;
}
.nav-toggle-bars span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
}

@media (max-width: 52rem) {
  .bar { flex-wrap: nowrap; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    /* 44px square: the size a thumb needs, and the size the rest of the site
       uses for the same control. */
    width: 44px; height: 44px; flex: none;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 10px; color: #fff; cursor: pointer;
  }
  .nav-toggle:hover { background: rgba(255, 255, 255, .2); }
  .nav-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

  /* The links become a panel under the bar. `display: none` rather than a
     height animation, so a closed menu is genuinely out of the tab order
     instead of being invisible and still focusable. */
  #nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin-top: .7rem;
    border-top: 1px solid rgba(255, 255, 255, .25);
    padding-top: .4rem;
  }
  #nav.is-open { display: flex; }
  #nav a {
    width: 100%;
    border-radius: 8px;
    padding: .7rem .75rem;
    font-size: 1rem;
    min-height: 48px;
  }
  #nav a[aria-current="page"] { background: #fff; color: var(--brand-navy); }
}

/* How many careers landed where. The figures are the full counts, not the
   number of cards on screen — every list below is capped. */
.match-summary {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--brand-tint); padding: .9rem 1.1rem; margin: .9rem 0;
}
.match-total { margin: 0 0 .6rem; }
.match-breakdown {
  list-style: none; margin: 0 0 .6rem; padding: 0;
  display: grid; gap: .35rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.match-breakdown li {
  display: flex; align-items: baseline; gap: .45rem;
  padding: .3rem .1rem; border-top: 1px solid var(--line);
}
.match-breakdown li strong {
  font-size: 1.25rem; color: var(--brand-navy);
  font-variant-numeric: tabular-nums; min-width: 2.5rem;
}
.match-summary .hint { margin: 0; }
.group-count { margin: 0 0 .2rem; }
.group-count strong { color: var(--brand-navy); }

/* Narrowing the options down. Presented as a decision the user makes, with the
   consequence of each choice stated before they make it. */
.narrow-panel {
  border: 1px solid var(--brand-cyan); border-radius: var(--radius);
  background: var(--panel); padding: .9rem 1.1rem; margin: .9rem 0;
}
.narrow-panel > p:first-child { margin-bottom: .6rem; }
.narrow-options { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.narrow-panel .hint { margin: 0 0 .5rem; }

/* A page at a time, so a long group never becomes a wall of cards. */
.page-controls { align-items: center; gap: .6rem 1rem; }
.page-position { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ the analytics footer notice

   Analytics are on by default and there is no banner, so this paragraph is the
   only place a visitor is told. That makes it the wrong thing to set in small
   grey type at the bottom of a stack of legal text: it gets the panel
   treatment, a left rule and the body colour, so it reads as a statement rather
   than as boilerplate somebody hoped you would scroll past.

   It sits above the disclaimer because it is about the reader, and the
   disclaimer is about the product. */
.analytics-notice {
  max-width: var(--max);
  margin: 0 auto 1rem;
  padding: .8rem 1rem;
  border-left: 4px solid var(--brand-blue);
  background: var(--info-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.5;
}
.analytics-notice strong { color: var(--brand-navy); }

/* 44px, the smallest target most accessibility guidance accepts, on the
   analytics control specifically rather than on every button in Helix. */
.btn-tap { min-height: 44px; min-width: 44px; }

@media (max-width: 34rem) {
  .analytics-notice { padding: .7rem .8rem; font-size: .88rem; }
}

/* The "no verified data" marker. Same footprint as the regulation badge so a
   row of cards keeps its rhythm, and amber rather than red because this is an
   absence of evidence, not a warning about the career itself. */
.reg-unverified {
  background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line);
}