:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --ink: #172033;
  --muted: #667085;
  --line: #d9e0ea;
  --blue: #1f5eff;
  --blue-dark: #0a2a66;
  --green: #247a4d;
  --amber: #996b16;
  --red: #b42318;
  --shadow: 0 12px 32px rgba(23, 32, 51, 0.08);
  --space: clamp(12px, 2.5vw, 24px);
  --space-sm: clamp(10px, 2vw, 16px);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #111827;
  outline-offset: 3px;
}

.skip-link {
  background: #111827;
  color: #ffffff;
  left: 12px;
  padding: 10px 14px;
  position: fixed;
  top: 12px;
  transform: translateY(-160%);
  z-index: 50;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------- Header: mobile-first, scales up ---------- */

.topbar {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.93) 0 42%, rgba(255, 255, 255, 0.62) 42% 67%, rgba(255, 255, 255, 0.14) 100%),
    url("/assets/flag-field-photo-bg.jpg") center / cover no-repeat;
  border-bottom: 1px solid rgba(10, 42, 102, 0.24);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  padding: 8px clamp(12px, 3vw, 24px) 10px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.brand-block {
  display: grid;
  flex: 1 1 240px;
  gap: 4px;
  max-width: min(460px, 78vw);
}

/* Keep anchor-scroll targets clear of the sticky header when jumped to via
   redirect-with-anchor (PRG) after orientation choice, browse update, etc. */
#intake-panel,
#field-analysis-heading,
#analysis-heading,
#eligibility-step,
#field-eligibility-step,
#job-search,
#job-search-heading,
#field-job-search-heading,
#job-results,
#field-job-results,
#field-series-step,
#other-paths {
  scroll-margin-top: 96px;
}

.brand-logo {
  display: block;
  height: auto;
  width: 100%;
}

.status-pill {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(10, 42, 102, 0.22);
  color: var(--blue-dark);
  flex: 0 1 auto;
  font-size: clamp(11px, 2.2vw, 15px);
  font-weight: 700;
  padding: clamp(5px, 1.2vw, 8px) clamp(8px, 1.8vw, 12px);
}

/* On small screens the pill drops below the logo and spans the row */
@media (max-width: 640px) {
  .topbar {
    position: static; /* free up vertical space on small viewports */
    gap: 6px 12px;
    padding: 6px 12px 8px;
  }

  .brand-block {
    gap: 2px;
    max-width: min(320px, 64vw);
  }

  .status-pill {
    flex-basis: 100%;
    text-align: center;
  }
}

/* ---------- Page scaffold ---------- */

.page {
  display: grid;
  gap: var(--space);
  margin: 0 auto;
  max-width: 1240px;
  padding: var(--space);
}

.hero-panel,
.analysis-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  gap: clamp(14px, 2.5vw, 22px);
  padding: clamp(14px, 2.5vw, 22px);
}

.hero-copy {
  display: grid;
  gap: 10px;
  max-width: 900px;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  overflow-wrap: break-word;
}

h1 {
  color: var(--blue-dark);
  font-size: clamp(24px, 5vw, 36px);
  line-height: 1.12;
}

h2 {
  color: var(--blue-dark);
  font-size: clamp(18px, 3vw, 22px);
}

h3 {
  font-size: clamp(16px, 2.5vw, 18px);
}

h4 {
  font-size: 15px;
  margin-top: 6px;
}

.lead {
  color: #344054;
  font-size: clamp(15px, 2.5vw, 18px);
}

.muted {
  color: var(--muted);
}

.eyebrow {
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* ---------- Panels and cards ---------- */

.orientation-panel,
.upload-panel,
.how-it-works,
.card,
.next-panel,
.privacy-actions {
  border: 1px solid var(--line);
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm);
  /* v0.15: pack rows to the TOP, always.
     These are grid containers that are themselves grid ITEMS, so they stretch to the height of the
     tallest thing beside them. The default `align-content: stretch` then hands that leftover height
     to the auto-sized rows inside, and the content drifts down the box. Chef Spanky hit this on the
     analysis results — he scrolled past what looked like an empty "Series matches" panel before the
     matches appeared.
     Applied to the base rule rather than to the one layout where it was reported, because the cause
     is structural: any card whose neighbours are taller behaves this way, so fixing one instance
     just leaves the rest waiting to be found by a user. Verified first that nothing in this sheet
     relies on the old behaviour — no `margin-top: auto` or `align-self: end`, which are the
     patterns that would pin something to the bottom of the leftover space. */
  align-content: start;
}

/* Orientation cards: 1 column on phones, 3 across when space allows */
/* v0.17 K1b: three cards, not four.
   The previous rule was `repeat(auto-fit, minmax(min(240px, 100%), 1fr))`, which was well behaved
   with four cards because they fall into 4 / 2+2 / 1 as the viewport narrows - every row full.
   With three, auto-fit produces a 2+1 at middle widths and the orphan stretches to the full row,
   so the last card renders at double the width of the other two and reads as a different kind of
   thing. Deliberately skipping the two-column step: with three items every 2-up layout orphans
   one, so the only orphan-free choices are 3 and 1. */
.orientation-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  .orientation-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.orientation-grid form {
  display: contents;
}

.orientation-card {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 0;
  padding: 16px;
  text-align: left;
  width: 100%;
}

@media (min-width: 900px) {
  .orientation-card {
    min-height: 204px;
  }
}

.orientation-card.selected {
  border-color: #9cc6ff;
  box-shadow: inset 0 0 0 2px rgba(31, 94, 255, 0.14);
}

.orientation-card strong {
  color: var(--blue-dark);
  font-size: 18px;
}

.orientation-card span {
  color: #475467;
}

.orientation-card em,
.path-label {
  background: #eef5ff;
  color: var(--blue-dark);
  display: inline-flex;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  padding: 5px 7px;
  width: fit-content;
}

/* Intake: stacked on mobile, sidebar appears at 900px */
.intake-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .intake-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  }
}

.upload-form {
  background: #f8fbff;
  border: 1px solid #c9ddff;
  display: grid;
  gap: 10px;
  padding: 14px;
}

label {
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

input[type="file"],
input[type="text"] {
  background: #ffffff;
  border: 1px solid var(--line);
  min-height: 44px;
  padding: 10px;
  width: 100%;
}

.primary,
.secondary {
  align-items: center;
  border: 0;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  text-decoration: none;
}

/* Full-width tap targets on phones */
@media (max-width: 640px) {
  .primary,
  .secondary {
    width: 100%;
  }
}

.primary {
  background: var(--blue);
  color: #ffffff;
}

.secondary {
  background: #eef5ff;
  color: var(--blue-dark);
}

.privacy-note {
  background: #f7f8fb;
  border-left: 4px solid var(--blue);
  display: grid;
  gap: 4px;
  padding: 12px;
}

.warning {
  background: #fff7e8;
  color: var(--amber);
  padding: 12px;
}

.how-it-works ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

.how-it-works li span {
  color: var(--muted);
  display: block;
}

/* ---------- Analysis section ---------- */

.analysis-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding-bottom: 16px;
}

.analysis-head form {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .analysis-head form {
    flex-basis: 100%;
  }
}

/* Analysis cards: 1 col on phones, 2 on tablets, 3 on desktop */
.analysis-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}


@media (min-width: 700px) {
  .analysis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-grid .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1080px) {
  .analysis-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analysis-grid .card:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

.field-list {
  display: grid;
  gap: 8px;
}

.field-list div {
  background: #f7f8fb;
  display: grid;
  gap: 2px;
  padding: 10px;
}

.field-list span {
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips span {
  background: #eef5ff;
  border: 1px solid #c9ddff;
  color: var(--blue-dark);
  padding: 7px 9px;
}

.chip-remove-form {
  display: contents;
}

.chip-removable {
  align-items: center;
  background: #eef5ff;
  border: 1px solid #c9ddff;
  color: var(--blue-dark);
  display: inline-flex;
  gap: 6px;
  padding: 7px 7px 7px 9px;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.chip-removable.chip-removing {
  opacity: 0;
  transform: scale(0.85);
}

.chip-remove-btn {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--blue-dark);
  display: inline-flex;
  font-size: 16px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  line-height: 1;
  min-height: 0;
  padding: 0;
  width: 20px;
}

.chip-remove-btn:hover {
  background: #c9ddff;
}

.series-row {
  align-items: center;
  border: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 84px;
  padding: 12px;
}

@media (max-width: 420px) {
  .series-row {
    grid-template-columns: 1fr;
  }

  .series-row > span {
    justify-self: start;
  }
}

.series-row span {
  background: #ecfdf3;
  color: var(--green);
  font-weight: 700;
  padding: 9px;
  text-align: center;
}

.signal-list {
  display: grid;
  gap: 10px;
}

.signal {
  background: #f7f8fb;
  border-left: 4px solid var(--amber);
  display: grid;
  gap: 4px;
  padding: 10px;
}

.signal span {
  color: var(--amber);
  font-size: 13px;
  font-weight: 700;
}

ul {
  margin: 0;
  padding-left: 20px;
}

li {
  margin: 5px 0;
}

.privacy-actions {
  background: #f8fbff;
  border-color: #c9ddff;
}

/* ---------- Eligibility panel ---------- */

.eligibility-panel {
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue-dark);
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm);
}

.eligibility-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 12px;
}

@media (min-width: 760px) {
  .eligibility-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.eligibility-panel fieldset {
  border: 1px solid var(--line);
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px;
}

/* v0.14 (B1). The grade label and select are wrapped in a div so they can be hidden as a unit for
   senior-executive pay plans. The fieldset is a grid with a 4px gap, so the wrapper repeats that
   layout — without it the pair becomes a single grid item and loses the spacing every other
   label/control pair in this panel has. */
.eligibility-panel .elig-grade-field {
  display: grid;
  gap: 4px;
}

.eligibility-panel legend {
  color: var(--blue-dark);
  font-weight: 700;
  padding: 0 6px;
}

.eligibility-panel .checkbox-label {
  min-height: 36px;
}

.eligibility-saved {
  background: #ecfdf3;
  border-left: 4px solid var(--green);
  color: var(--green);
  font-weight: 700;
  padding: 12px;
}

.doc-checklist {
  background: #f8fbff;
  border: 1px solid #c9ddff;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.eligibility-verdict {
  font-size: 13px;
  font-weight: 700;
  padding: 5px 8px;
  width: fit-content;
}

.verdict-yes {
  background: #ecfdf3;
  color: var(--green);
}

.verdict-no {
  background: #fef3f2;
  color: var(--red);
}

.verdict-unknown {
  background: #f7f8fb;
  color: var(--muted);
}

/* ---------- USAJOBS search ---------- */

.job-search-panel {
  border: 1px solid var(--line);
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm);
}

.job-search-fields {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .job-search-fields {
    /* location | radius | remote-only | button (radius added v0.9.0) */
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }
}

.checkbox-label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-height: 44px;
}

.checkbox-label input {
  height: 20px;
  width: 20px;
}

.job-list {
  display: grid;
  gap: 12px;
}

.job-row {
  border: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  padding: 14px;
}

@media (min-width: 760px) {
  .job-row {
    grid-template-columns: minmax(0, 1fr) 200px;
  }
}

.job-main {
  display: grid;
  gap: 6px;
}

.job-main strong {
  color: var(--blue-dark);
  font-size: 16px;
}

.who-may-apply {
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}

.job-side {
  align-content: start;
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.series-tag {
  background: #eef5ff;
  color: var(--blue-dark);
  font-weight: 700;
  padding: 6px 8px;
  width: fit-content;
}

.job-side a.secondary {
  text-align: center;
}

/* ---------- Announcement translator ---------- */

.breadcrumb a {
  color: var(--blue-dark);
  font-weight: 700;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb.bottom-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
}

.announcement-head {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .announcement-head {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

.announcement-meta span {
  background: #eef5ff;
  border: 1px solid #c9ddff;
  color: var(--blue-dark);
  font-weight: 700;
  padding: 6px 8px;
}

.announcement-actions {
  display: grid;
  gap: 10px;
  align-content: start;
}

.translate-link {
  font-size: 13px;
}

.takeaway-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .takeaway-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.takeaway {
  border: 1px solid var(--line);
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
}

.takeaway.hard-requirements {
  border-left: 4px solid var(--red);
}

.takeaway.disqualifiers {
  border-left: 4px solid var(--amber);
}

.takeaway.fit-notes {
  border-left: 4px solid var(--green);
}

.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legend {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
}

.official-legend {
  background: #f7f8fb;
  border: 1px solid var(--line);
  color: var(--ink);
}

.plain-legend {
  background: #eef5ff;
  border: 1px solid #c9ddff;
  color: var(--blue-dark);
}

.translation-section {
  display: grid;
  gap: 10px;
}

.translation-section h2 {
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

/* Side-by-side on wide screens; stacked official-then-plain pairs on mobile
   so each explanation stays adjacent to its official text. */
.translation-pair {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .translation-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.official-block,
.plain-block {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
}

.official-block {
  background: #f7f8fb;
  border: 1px solid var(--line);
}

.plain-block {
  background: #f3f8ff;
  border: 1px solid #c9ddff;
}

.block-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plain-block .block-label {
  color: var(--blue-dark);
}

.official-block p,
.plain-block p {
  overflow-wrap: break-word;
}

.plain-bullets {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.plain-bullets li {
  margin: 0;
  overflow-wrap: break-word;
}

/* ---------- Field flow: family browse accordion ---------- */

textarea {
  background: #ffffff;
  border: 1px solid var(--line);
  font: inherit;
  padding: 10px;
  resize: vertical;
  width: 100%;
}

.start-over-row {
  display: flex;
  justify-content: flex-end;
}

.start-over-btn {
  font-size: 13px;
}

.field-result-meta {
  border-left: 4px solid var(--green);
  padding: 8px 12px;
  background: #ecfdf3;
}

.field-browse {
  overflow-y: auto;
}

.family-browse {
  display: grid;
  gap: 4px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.family-browse details {
  border: 1px solid var(--line);
}

.family-browse summary {
  align-items: center;
  background: #f7f8fb;
  color: var(--blue-dark);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  justify-content: space-between;
  list-style: none;
  padding: 9px 12px;
  user-select: none;
}

.family-browse summary::-webkit-details-marker {
  display: none;
}

.family-browse details[open] summary {
  border-bottom: 1px solid var(--line);
}

.family-select-all {
  cursor: pointer;
  flex-shrink: 0;
  height: 20px;
  margin: 0;
  width: 20px;
}

.family-summary-name {
  flex: 1;
}

.family-count {
  color: var(--muted);
  font-weight: 400;
}

.family-series-list {
  display: grid;
  gap: 0;
  padding: 4px 0;
}

.family-series-list .checkbox-label {
  border-bottom: 1px solid #f0f2f5;
  font-size: 13px;
  font-weight: 400;
  min-height: 38px;
  padding: 0 12px;
}

.family-series-list .checkbox-label:last-child {
  border-bottom: none;
}

.family-series-list .checkbox-label:hover {
  background: #f3f8ff;
}

.series-selected {
  background: #eef5ff;
  color: var(--blue-dark);
}

.series-code-tag {
  background: #eef5ff;
  border: 1px solid #c9ddff;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  white-space: nowrap;
}

/* Orientation card collapse is now handled by the .flow-step <details> wrapper around
   the whole orientation-grid (all viewports), superseding the old mobile-only :has()
   trick that used to compact just the selected card within the grid. */

/* ---------- Progressive disclosure: collapsible flow steps ---------- */

.flow-step[open] {
  display: grid;
  gap: 12px;
}

.flow-step > .flow-summary {
  align-items: flex-start;
  background: #f7f8fb;
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 12px 16px;
  user-select: none;
}

.flow-step > .flow-summary::-webkit-details-marker {
  display: none;
}

.flow-step > .flow-summary::after {
  color: var(--muted);
  content: "▸";
  font-size: 12px;
  margin-left: auto;
}

.flow-step[open] > .flow-summary::after {
  content: "▾";
}

.flow-check {
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
}

.flow-meta {
  color: var(--muted);
  font-size: 13px;
}

.flow-step-label {
  color: var(--blue-dark);
  font-weight: 700;
}

/* Eligibility compact summary card (inside <summary> when saved) */

.elig-summary {
  display: grid;
  flex: 1;
  gap: 8px;
}

.elig-summary-head {
  align-items: center;
  display: flex;
  gap: 8px;
}

.elig-chip-warn {
  background: #fff7e8;
  border: 1px solid #f9d58c;
  color: var(--amber);
}

/* ---------- Loading overlay (shown while an AI-backed action is in flight) ---------- */

body.is-loading,
body.is-loading * {
  cursor: wait !important;
}

.loading-overlay {
  align-items: center;
  background: rgba(10, 42, 102, 0.55);
  display: none;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 999;
}

.loading-overlay.active {
  display: flex;
}

.loading-card {
  align-items: center;
  background: #ffffff;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
  justify-items: center;
  max-width: min(360px, 84vw);
  padding: 28px 32px;
  text-align: center;
}

.loading-card strong {
  color: var(--blue-dark);
  font-size: 16px;
}

.loading-card p {
  color: var(--muted);
  font-size: 13px;
}

/* The .spinner rules lived here until v0.14. Removed with the element: the overlay was showing a
   spinner and a progress bar side by side, both saying "still working", and the bar says it with
   more information. See .loading-bar further down. */

/* ---------- Accessibility / motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- LLM status (app-wide chip / offline banner) ---- */

.llm-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  padding: 4px 16px;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--bg);
}

.llm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.llm-dot-live {
  background: var(--green);
}

.llm-banner {
  padding: 10px 16px;
  background: #fdf1f0;
  color: var(--red);
  border-bottom: 1px solid var(--red);
  font-size: 0.9rem;
}

.llm-banner-detail {
  color: var(--muted);
}

/* ---- Qualification check (Announcement page) ---- */

.qual-verdict {
  border-left: 5px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  background: var(--bg);
}

.qual-verdict p {
  margin: 6px 0 0;
}

.qual-verdict-likely {
  border-left-color: var(--green);
}

.qual-verdict-borderline {
  border-left-color: var(--amber);
}

.qual-verdict-unlikely {
  border-left-color: var(--red);
}

.qual-verdict-unknown {
  border-left-color: var(--muted);
}

.qual-findings {
  list-style: none;
  padding: 0;
  margin: 8px 0 16px;
  display: grid;
  gap: 10px;
}

.qual-findings li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
}

.qual-findings li p {
  margin: 4px 0 0;
}

.qual-status {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 2px;
}

.qual-status-met {
  background: #e8f4ed;
  color: var(--green);
}

.qual-status-partial {
  background: #fbf3e2;
  color: var(--amber);
}

.qual-status-missing {
  background: #fdf1f0;
  color: var(--red);
}

.qual-status-unclear {
  background: var(--bg);
  color: var(--muted);
}

.qual-fix-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 12px 0;
}

.qual-disclaimer {
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

/* ---- Veteran path: MOS match picker ---- */

.mos-match-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  display: grid;
  gap: 8px;
}

.mos-match {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.mos-match:hover {
  border-color: var(--blue);
}

.mos-match em {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
}

.mos-attribution {
  font-size: 0.78rem;
}

/* ---- Glossary: tap-to-define terms + bottom sheet ---- */

button.term {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted var(--blue) 2px;
  text-underline-offset: 3px;
}

button.term:hover,
button.term:focus-visible {
  color: var(--blue);
}

.glossary-trigger {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  background: var(--blue-dark);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.glossary-trigger span {
  display: inline-block;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin-right: 4px;
}

.glossary-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 32, 51, 0.45);
  z-index: 70;
}

.glossary-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 32px rgba(23, 32, 51, 0.25);
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 80vh;
  overflow-y: auto;
}

@media (min-width: 700px) {
  .glossary-sheet {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(480px, 92vw);
    bottom: 24px;
    border-radius: 16px;
  }
}

.glossary-sheet-handle {
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 4px auto 8px;
}

.glossary-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.glossary-sheet-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.glossary-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
}

.glossary-example {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 6px;
}

.glossary-source {
  font-size: 0.8rem;
}

.glossary-browse-link {
  margin-top: 8px;
}

.glossary-filter-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin: 10px 0 4px;
}

.glossary-filter {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.glossary-sheet-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 4px;
}

.glossary-list-item {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  display: block;
  font: inherit;
  padding: 8px 2px;
  text-align: left;
  width: 100%;
}

.glossary-list-item:hover {
  color: var(--blue);
}

.glossary-ask {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 10px;
}

.glossary-ask label {
  font-weight: 700;
  font-size: 0.85rem;
}

.glossary-ask-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.glossary-ask-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.glossary-ask-note,
.glossary-fallback-note {
  font-size: 0.78rem;
  margin: 8px 0 0;
}

.glossary-list {
  margin: 12px 0;
}

.glossary-entry dt {
  font-weight: 700;
  margin-top: 12px;
}

.glossary-entry dd {
  margin: 2px 0 0;
}

body.glossary-open {
  overflow: hidden;
}

/* ---- Working indicators for background (fetch) requests ---- */

body.is-fetching,
body.is-fetching button {
  cursor: progress;
}

.thinking-dots {
  display: inline-flex;
  gap: 6px;
  padding: 6px 0;
}

.thinking-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  animation: thinking-bounce 1.2s infinite ease-in-out;
}

.thinking-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.thinking-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes thinking-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .thinking-dots span {
    animation: thinking-fade 1.2s infinite ease-in-out;
  }

  @keyframes thinking-fade {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }
}

/* ---- Browse-families continue button ---- */

.browse-continue {
  display: block;
  width: 100%;
  /* Sits clearly below the scrollable family list rather than floating over it. */
  margin-top: 14px;
}

.browse-continue:disabled {
  background: var(--bg);
  border: 1px dashed var(--line);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
}

/* ---- Field path ----
   v0.17 K1 removed .intake-single, .either-or and .browse-accordion along with their markup.
   They implemented the single-column layout where the family browser sat behind a closed
   accordion below an OR divider - the arrangement that made a second "I'm still exploring" card
   necessary in the first place. The merged card uses the standard two-column .intake-grid with
   both routes visible, and the "or" now lives in the browse column's heading, where it reads
   correctly whether the columns sit side by side or stack on a phone.

   Deleted rather than left in place: dead CSS describing a layout that no longer exists is the
   same drift that made docs/RELEASE_NOTES.md wrong for four releases. */

/* The example-led hint under the field textarea. Sits between label and control, so it must read
   as guidance rather than as an error or a value. */
.field-hint {
  margin: -2px 0 8px;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ---- v0.7.0: footer, modals, version, term affordance, responsive hardening ---- */

/* Defensive mobile baseline: nothing gets to force horizontal scroll. */
select,
input,
textarea {
  max-width: 100%;
}

.card,
.qual-findings li,
.mos-match,
.glossary-sheet,
.takeaway,
.job-list article,
.signal {
  overflow-wrap: anywhere;
}

.chips,
.announcement-meta {
  flex-wrap: wrap;
}

.app-version {
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.llm-banner .app-version {
  margin-right: 8px;
}

/* Terms should read as "tap me", not "typo": tint + question mark, not just dots. */
button.term {
  background: rgba(31, 94, 255, 0.07);
  border-radius: 4px;
  padding: 0 2px;
  text-decoration-color: rgba(31, 94, 255, 0.55);
}

button.term::after {
  content: "?";
  display: inline-block;
  font-size: 0.62em;
  font-weight: 800;
  line-height: 1;
  vertical-align: super;
  margin-left: 2px;
  color: var(--blue);
}

/* Site footer */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding: 18px clamp(12px, 3vw, 24px) calc(60px + env(safe-area-inset-bottom));
  background: var(--surface);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 8px;
}

.footer-links a,
.footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue-dark);
  text-decoration: underline;
  cursor: pointer;
}

.footer-links a:hover,
.footer-link-btn:hover {
  color: var(--blue);
}

.footer-meta {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0;
}

/* Reserved ad slots: zero footprint until content is placed. */
.ad-slot:empty {
  display: none;
}

/* Generic modal (contact, what's new) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 32, 51, 0.45);
  z-index: 70;
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 80;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(23, 32, 51, 0.3);
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  width: min(480px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.modal-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
}

.modal form {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.modal form label {
  font-weight: 700;
  font-size: 0.85rem;
}

.modal form input,
.modal form textarea {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

.modal form button.primary {
  margin-top: 6px;
}

/* Honeypot: invisible to humans, present for bots. Not display:none - some bots skip those. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.success-note {
  background: #e8f4ed;
  border: 1px solid var(--green);
  border-radius: 8px;
  color: var(--green);
  font-weight: 700;
  padding: 12px 14px;
  margin-top: 10px;
}

/* Contact page + prose pages */
.contact-form {
  display: grid;
  gap: 6px;
  max-width: 560px;
}

.contact-form label {
  font-weight: 700;
  font-size: 0.9rem;
}

.contact-form input,
.contact-form textarea {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}

.prose-panel {
  max-width: 820px;
}

.prose-panel h2 {
  margin-top: 22px;
}

/* Glossary sheet views */
.glossary-back {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--blue-dark);
  cursor: pointer;
  padding: 4px 8px;
}

.glossary-view {
  padding-top: 4px;
}

.glossary-def-text {
  margin: 8px 0;
}

.glossary-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
}

.glossary-badge-ai {
  color: var(--amber);
  border-color: var(--amber);
  background: #fbf3e2;
}

.glossary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

#whatsnew-list {
  margin: 8px 0 12px;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

/* ===== v0.9.0: feedback categories, welcome + error popups ===== */

.category-group {
  border: 1px solid #d7deeb;
  border-radius: 8px;
  padding: 10px 14px 12px;
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.category-group legend {
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0 4px;
}

.optional-tag {
  font-weight: 400;
  color: #5a6a85;
  font-size: 0.85em;
}

.anon-note {
  margin: 2px 0 10px;
  font-size: 0.85rem;
}

.welcome-dontshow {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#error-modal p code,
.hero-panel p code {
  background: #eef2fa;
  border: 1px solid #d7deeb;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 0.95em;
  letter-spacing: 0.08em;
}

/* ===== v0.9.0: result filters + location typeahead ===== */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
}

.filter-bar form { margin: 0; }

.filter-modal {
  max-height: 82vh;
  overflow-y: auto;
}

.filter-facet {
  border: 1px solid #d7deeb;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0;
}

.filter-facet summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
}

.filter-facet-options {
  display: grid;
  gap: 4px;
  padding: 8px 2px 4px;
  max-height: 220px;
  overflow-y: auto;
}

.filter-ranges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.filter-ranges label,
.filter-toggles label {
  font-size: 0.9rem;
}

.filter-ranges input,
.filter-ranges select {
  width: 100%;
}

.filter-toggles {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}

/* ===== v0.9.0: filter drawer (modern slide-in), pills, active chips ===== */

/* display:flex below would defeat the hidden attribute's display:none - restore it. */
.filter-drawer[hidden] {
  display: none;
}

.filter-drawer {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  transform: none;
  width: min(440px, 94vw);
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  padding-bottom: 0;
  animation: drawer-in 0.25s ease;
  display: flex;
  flex-direction: column;
}

.filter-drawer form {
  flex: 1;
  overflow-y: auto;
  display: block;
  padding-bottom: 8px;
}

@keyframes drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .filter-drawer { animation: none; }
}

.pill-facet {
  margin: 12px 0;
}

.pill-facet-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-toggle {
  cursor: pointer;
}

.pill-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill-toggle span {
  display: inline-block;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.88rem;
  background: var(--surface);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pill-toggle:hover span {
  border-color: var(--blue-dark);
}

.pill-toggle:has(input:checked) span {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
  font-weight: 600;
}

.pill-toggle:has(input:focus-visible) span {
  outline: 2px solid var(--blue-dark);
  outline-offset: 2px;
}

.facet-filter {
  width: 100%;
  margin: 8px 0 2px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
}

.filter-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  margin-top: 10px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}

.active-chips .chip-form {
  margin: 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--blue-dark);
  border-radius: 999px;
  background: #eef2fa;
  color: var(--blue-dark);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.filter-chip:hover {
  background: #dde6f7;
}

.filter-chip span {
  font-size: 1.05em;
  line-height: 1;
}

.filter-chip-clear {
  border-color: var(--muted);
  color: var(--muted);
  background: transparent;
}

/* Full-width qualify row inside the announcement card (below job info + actions). */
.announcement-qualify {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.announcement-qualify form {
  margin: 0;
}

.announcement-qualify p {
  margin: 0;
  flex: 1;
  min-width: 240px;
}

/* ── v0.11: series card classification + "Other paths" ─────────────────────── */

.series-classification {
  font-size: 0.85rem;
  margin: 0.15rem 0 0.4rem;
}

.series-definition {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.series-definition summary {
  cursor: pointer;
  color: var(--accent, #1a4d8f);
}

.series-definition p {
  margin: 0.4rem 0 0;
}

.badge-held {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: #e6f4ea;
  color: #17603a;
  vertical-align: middle;
}

.series-row.series-held { border-left: 3px solid #17603a; padding-left: 0.6rem; }
.series-row.other-path { opacity: 0.85; }

.other-paths-heading {
  margin: 1.2rem 0 0.2rem;
  font-size: 0.95rem;
}

/* ── v0.12: glossary depth, related terms, reference links ─────────────────── */

.glossary-why h3,
.glossary-misconception h3,
.glossary-related h3,
.glossary-references h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.9rem 0 0.25rem;
  opacity: 0.7;
}

.glossary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Related terms are real buttons: they swap the sheet's content in place, and the
   sheet's existing back control handles the return trip. */
.glossary-chip {
  border: 1px solid var(--border, #ccd);
  background: transparent;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.82rem;
  cursor: pointer;
}

.glossary-chip:hover,
.glossary-chip:focus-visible {
  background: var(--surface-2, #eef2f7);
}

.glossary-reference-list { margin: 0; padding-left: 1.1rem; }
.glossary-reference-list li { margin-bottom: 0.35rem; }

/* Names the publisher on every outbound link, so leaving the site is never a surprise. */
.glossary-authority {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--surface-2, #eef2f7);
  opacity: 0.85;
}

.glossary-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1.25rem;
  font-size: 0.85rem;
}

.glossary-category { margin-bottom: 1.75rem; }
.glossary-category h2 { font-size: 1.05rem; margin-bottom: 0.4rem; }

.glossary-why-inline,
.glossary-misconception-inline,
.glossary-related-inline,
.glossary-references-inline {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.88rem;
}

@media (prefers-reduced-motion: no-preference) {
  .glossary-chip { transition: background 120ms ease; }
}

/* ── v0.12: series row remove + collapsed other paths ──────────────────────── */

/* The × sits in the row's corner, same affordance as the field path's chips. */
.series-row {
  position: relative;
  /* Matches the chip fade timing so removing a row and removing a chip feel identical. */
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.series-remove-form {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  margin: 0;
}

/* 44px hit target: this is a phone-first control. */
.series-remove-btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: 1.25rem;
  line-height: 1;
}

/* Keep text clear of the button rather than letting it run underneath. The row is a
   2-column grid (content | fit+score); the form is absolutely positioned and so is out
   of that flow entirely - it must never become a grid item. */
.series-row > div { padding-right: 2.25rem; }

@media (max-width: 420px) {
  /* Single column on phones: the fit/score cell stacks under the content, and the ×
     stays pinned to the row's top-right corner. */
  .series-row > div { padding-right: 2.75rem; }
}

.series-row.chip-removing { opacity: 0; transform: translateY(-4px); }

/* Collapsed by default — on a phone this section was pushing the actual
   recommendations off screen. */
.other-paths { margin-top: 0.75rem; }

.other-paths > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.35rem 0;
}

.chip-removable.chip-restorable { opacity: 0.75; border-style: dashed; }
.chip-restore-btn { font-weight: 700; }

/* ── v0.13 E6: progress in the loading overlay ─────────────────────────────── */

#loading-detail:empty {
  display: none;
}

/* Accumulating checklist. Completed stages keep a checkmark rather than being replaced —
   the file-handling steps finish in milliseconds, and without this they'd flash past
   unseen and the wait would look like nothing had happened yet. */
.loading-stages {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 0.3rem;
  max-width: 22rem;
}

.loading-stage {
  display: grid;
  grid-template-columns: 1.1rem auto;
  align-items: baseline;
  gap: 0.1rem 0.4rem;
  font-size: 0.88rem;
}

.loading-stage-mark {
  font-weight: 700;
  text-align: center;
}

.loading-stage.is-done .loading-stage-mark { color: var(--green, #247a4d); }
.loading-stage.is-done .loading-stage-label { opacity: 0.7; }

/* The current stage is the only one still working — weight it so the eye lands there. */
.loading-stage.is-active .loading-stage-label { font-weight: 700; }
.loading-stage.is-active .loading-stage-mark { opacity: 0.5; }

.loading-stage-detail {
  grid-column: 2;
  font-size: 0.8rem;
  opacity: 0.65;
}

.loading-elapsed {
  margin-top: 0.5rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: no-preference) {
  .loading-stage { transition: opacity 150ms ease; }
}

/* ---- v0.15: typeahead ----
   Replaces <datalist>, which browsers render as a detached, unstyleable panel that doesn't line up
   with its control. Used by both the MOS box and the location box, so the two stop behaving
   differently on the same page. */
.typeahead {
  position: relative;
}

/* The list is absolutely positioned against .typeahead so it hangs directly off the bottom edge of
   the input rather than floating near it. */
.typeahead-list {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  right: 0;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  /* Eight options is the cap, and eight options fit. The scroll is a safety net, not the design. */
  max-height: 19rem;
  overflow-y: auto;
}

.typeahead-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  /* 44px effective target: this is a mobile-first form and a cramped list is unusable on a phone. */
  min-height: 44px;
  box-sizing: border-box;
}

.typeahead-option + .typeahead-option {
  border-top: 1px solid #eef2f7;
}

/* One highlight style for both hover and keyboard, so arrow-keying and mousing look identical. */
.typeahead-option.is-active,
.typeahead-option:hover {
  background: #eef5ff;
}

.typeahead-option-main {
  color: var(--blue-dark);
  font-weight: 600;
}

.typeahead-option-hint {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ---- v0.14 F6: Under-the-hood infographics ----
   The SVGs are authored at 480px wide and scale by their own viewBox, so the only job here is to
   cap the width on desktop and let them fill the column on mobile. max-width is on the figure, not
   the img, so the caption wraps to the same measure as the graphic. */
.infographic {
  margin: 1.4rem 0;
  max-width: 480px;
}

.infographic img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d9e0ea;
  border-radius: 14px;
}

.infographic figcaption {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ---- v0.14 F3: the wait bar ----
   Fills 0→100% over 60 seconds, which is roughly what a résumé analysis takes. Chosen over the
   indeterminate sweep the plan recommended: a moving target to watch is worth more to someone
   staring at a blank overlay than a technically-purer animation that stakes no claim.

   The one place a timed bar goes wrong is the overrun, and that is handled rather than ignored.
   The model can always run past 60s, and a bar parked at a static 100% while nothing happens reads
   as a frozen page — worse than the impatience it was meant to relieve. So the fill uses
   `forwards` to hold at full, and a second animation with a 60s delay takes over with a slow pulse:
   still full, still visibly alive, no claim of completion. The elapsed counter underneath stays the
   authoritative number throughout.

   Deliberately CSS-only. A JS-driven bar would need its own timer alongside the elapsed counter and
   the quip rotation, and timers that must agree with each other are how a "decorative" element
   starts affecting real ones. */
.loading-bar {
  width: min(260px, 70vw);
  height: 5px;
  border-radius: 999px;
  background: #eef5ff;
  overflow: hidden;
}

.loading-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--blue);
  animation:
    loading-bar-fill 60s linear forwards,
    loading-bar-overrun 2s ease-in-out 60s infinite;
}

@keyframes loading-bar-fill {
  from { width: 0; }
  to   { width: 100%; }
}

/* Past 60s: full width, gently breathing. Opacity only — the width must stay at 100% so the bar
   never appears to run backwards, which would look like lost progress. */
@keyframes loading-bar-overrun {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Reduced motion: a static, partially-filled track. It still reads as "in progress" next to the
   elapsed counter without animating, and it deliberately does not sit at 100% — a full bar with no
   motion is indistinguishable from a finished one. */
@media (prefers-reduced-motion: reduce) {
  .loading-bar span {
    animation: none;
    width: 100%;
    opacity: 0.35;
  }
}

/* ---- v0.14 F4: rotating quip ----
   Decorative. If the rotation never starts (JS error, array missing) this element simply stays
   empty and collapses — the real content above and below it is unaffected. */
.loading-quip {
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.75;
  min-height: 1.2em;
  max-width: 22rem;
}

@media (prefers-reduced-motion: no-preference) {
  .loading-quip { transition: opacity 300ms ease; }
  .loading-quip.is-fading { opacity: 0; }
}