/* Rung conversation layout — only the phone-shaped shell, the header, the
   progress bar, and the footer. Every control (page-intro, inline-note,
   form-field, btn) is the imported nyc component, styled by components.css. */

body {
  background: var(--page-gradient, #fafafe);
  color: var(--text-primary, #000);
  font-family: var(--font-body, 'Noto Sans', sans-serif);
}

.rung-shell {
  max-width: 620px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg, 20px) var(--space-base, 16px) var(--space-2xl, 32px);
  gap: var(--space-base, 16px);
}

/* The header floats: it sticks to the top as the page scrolls, on a light-blue pill, so the
   brand and the chosen situation (top-right) stay in view the whole way down the feed. */
.rung-sticky-sentinel { height: 1px; margin: 0; padding: 0; pointer-events: none; }
.rung-top {
  position: sticky; top: 8px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: var(--nyc-red-bg, #e8eeff);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(27, 44, 143, .10);
  transition: top 0.2s ease, border-radius 0.2s ease;
}
/* When scrolled past the sentinel the header has "stuck" — go flush to the top
   with only bottom corners rounded so it reads as attached to the top edge.   */
.rung-top.is-stuck {
  top: 0;
  border-radius: 0 0 14px 14px;
}
.rung-brand { font-family: var(--font-heading, 'Clash Grotesk', sans-serif); font-weight: 600; font-size: 22px; display: inline-flex; align-items: center; gap: 8px; }
.rung-logo-icon { flex-shrink: 0; border-radius: 5px; vertical-align: middle; }
/* The chosen-situation label. Navy and semibold so it reads as the active context on the
   blue pill; truncates with an ellipsis on narrow screens rather than wrapping the header. */
.rung-step {
  color: var(--nyc-red, #1b2c8f); font-weight: 600; font-size: var(--font-size-sm, 14px);
  text-align: right; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rung-progress { height: 6px; border-radius: 999px; background: var(--surface-muted, #eee); overflow: hidden; }
.rung-progress__bar { height: 100%; border-radius: 999px; background: var(--nyc-red, #1b2c8f); transition: width 0.25s ease; }

.rung-body { flex: 1; display: flex; flex-direction: column; gap: var(--space-base, 16px); }

/* Kill the global page-intro margins inside the shell — components.css sets
   .page-intro { margin-bottom: --space-2xl } and .page-intro__title
   { margin-bottom: --space-md }. Both double up with the flex gap already on
   .rung-body, so zero them out here. */
.rung-shell .page-intro,
.rung-card-shell .page-intro { margin-bottom: 0; }
.rung-shell .page-intro__title,
.rung-card-shell .page-intro__title { margin-bottom: 0; }

/* Listen sits flush under the question. The two-class scope (.rung-shell
   .rung-listen) matches the [data-theme] .btn specificity so this wins on load
   order, undoing the big 32px button padding for this quiet helper control. */
.rung-shell .rung-listen {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-sm, 8px) 0;
  font-size: var(--font-size-base, 16px);
}
.rung-listen[aria-pressed="true"] { color: var(--nyc-red-hover, #103fef); }

/* Inline SVG icons — self-contained, no icon font needed (Rung uses font-src 'self' CSP). */
.rung-ico { flex-shrink: 0; vertical-align: middle; }

/* Welcome screen — plain-language framing before any questions. */
.rung-welcome { gap: var(--space-lg, 24px); }

/* NYC-style card shell for the welcome screen — white card, border, shadow,
   matching the Child Care prototype's main form-card container. */
.rung-card-shell {
  background: var(--surface-white, #ffffff);
  border: 1.5px solid var(--border-light, #dde1e9);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Padding inside the card for the main content */
.rung-card-shell .rung-body {
  padding: var(--space-xl, 28px) var(--space-xl, 28px) var(--space-lg, 20px);
}

/* Border-top divider before the CTA — mirrors the Child Care form footer rule */
.rung-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: var(--space-base, 16px) var(--space-xl, 28px);
  border-top: 1.5px solid var(--border-light, #dde1e9);
  background: var(--surface-white, #ffffff);
}

/* Info card — matches the Child Care "Include" panel: light-tinted background,
   circular filled-check badge header, bold label, standard bullet list below. */
.rung-info-card {
  background: var(--nyc-red-bg, #e8eeff);
  border-radius: 12px;
  padding: 18px 20px 20px;
}
.rung-info-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.rung-info-card__badge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #3b9edd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rung-info-card__label {
  font-family: var(--font-heading, 'Clash Grotesk', sans-serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--text-primary, #1a1a1a);
}
.rung-info-card__list {
  margin: 0;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
}
.rung-info-card__list li {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary, #1a1a1a);
}

/* Form fields fill the width of their container. They were rendering far
   narrower than the heading and notes (a 320px max-width and a textarea's
   default cols), wasting the space on their right. */
.rung-body .form-field { width: 100%; max-width: none; }
.rung-body .form-field__input,
.rung-body .form-field__textarea { width: 100%; box-sizing: border-box; }

/* Per-field Talk mic: floats inside the input, hugging its right edge, and fades in when the
   field is focused. The control takes the full width with extra right padding so typed text
   never slides under the mic. It is positioned from the top (the helper line below the input
   never shifts it); the label, when present, is accounted for with :has so it stays centred
   on the input itself, not on the whole field group. */
.rung-field { position: relative; }
.rung-field .form-field { width: 100%; min-width: 0; }
.rung-field .form-field__input,
.rung-field .form-field__textarea { padding-right: 58px; }
.rung-mic {
  position: absolute; right: 8px; top: 6px;
  width: 44px; height: 44px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  /* Secondary-button palette: navy glyph on white with a light-grey border. */
  border-radius: 999px; border: 2px solid var(--border-light, #ddd);
  background: var(--surface-white, #fff); color: var(--nyc-red, #1b2c8f);
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
/* With a label above the control, drop the mic by the label's height so it lands on the input.
   With a textarea (always label-less here), sit near the top-right corner inside the box. */
.rung-field:has(.form-field__label) .rung-mic { top: 48px; }
.rung-field:has(.form-field__textarea) .rung-mic { top: 12px; }
.rung-field:focus-within .rung-mic,
.rung-field:hover .rung-mic,
.rung-field--active .rung-mic,
.rung-mic.is-recording,
.rung-mic:focus-visible { opacity: 1; pointer-events: auto; }
/* Exactly the secondary-button hover: white stays, grey border stays, glyph deepens. */
.rung-mic:hover { background: var(--surface-white, #fff); border-color: var(--border-light, #ddd); color: var(--nyc-red-hover, #103fef); }
.rung-mic:focus-visible { outline: 2px dotted #1b1b1b; outline-offset: 2px; }
/* While recording, the field shows the design system's exact :focus state
   (tokens-nyc.css), so the cue is the one people already know. */
.rung-field--active .form-field__input,
.rung-field--active .form-field__textarea {
  border-color: var(--nyc-red, #1b2c8f);
  background: var(--nyc-red-bg, #e8eeff);
  outline: 2px dotted #1b1b1b;
  outline-offset: 2px;
}

/* Rung has no icon font, so the Material Symbols error glyph is hidden; drop
   its reserved space so the validation message sits flush. */
.rung-shell .form-field__error-icon { display: none; }

.rung-status { min-height: 22px; margin: 4px 0 0; color: var(--text-muted, #666); font-size: var(--font-size-sm, 14px); }

/* Mobile-first footer: stack primary CTA (full-width) above secondary actions.
   The primary always spans the full container; Back / text buttons sit centered
   below. This matches the Child Care prototype's mobile button pattern. */
.rung-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: var(--space-base, 16px);
}
/* All primary buttons inside the shell are full-width */
.rung-shell .btn--primary,
.rung-card-shell .btn--primary {
  width: 100%;
  justify-content: center;
}
/* The rung-card-footer already has its own flex layout — keep CTA full-width there too */
.rung-card-footer .btn--primary {
  width: 100%;
  justify-content: center;
}

/* Recording state: animated pulse on the mic button */
.rung-mic.is-recording {
  border-color: var(--nyc-red-hover, #103fef);
  color: var(--nyc-red-hover, #103fef);
  animation: rung-pulse 1.2s infinite;
}
@keyframes rung-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 44, 143, 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(27, 44, 143, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .rung-progress__bar { transition: none; }
  .rung-mic.is-recording { animation: none; }
}

/* Phone-first pins the footer to the bottom (thumb reach). On a roomy desktop
   window that left a big empty middle, so there the body sizes to its content
   and the footer sits right under it instead of being pushed down. */
@media (min-width: 700px) {
  .rung-body { flex: 0 1 auto; }
}

/* Tappable choice buttons (add another job, education level). */
.rung-choices { display: flex; flex-direction: column; gap: 12px; }
.rung-choices--wrap { flex-direction: row; flex-wrap: wrap; }
.rung-choices--wrap .btn { flex: 0 0 auto; }

/* "Or say which one fits you" — the voice path on the choice page. */
.rung-saymic { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; }
.rung-saymic.is-recording { border-color: var(--nyc-red-hover, #103fef); color: var(--nyc-red-hover, #103fef); animation: rung-pulse 1.2s infinite; }
@media (prefers-reduced-motion: reduce) { .rung-saymic.is-recording { animation: none; } }

/* Scenario picker — big tap cards, one situation each, icon aids recognition. */
.rung-scenarios { display: flex; flex-direction: column; gap: 10px; }
.rung-scenario {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 16px 18px;
  background: #fff;
  border: 2px solid var(--border-light, #ddd);
  border-radius: 12px;
  font-family: var(--font-ui, sans-serif);
  font-size: 18px; font-weight: 600;
  color: var(--text-primary, #000);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.rung-scenario:hover { border-color: var(--nyc-red, #1b2c8f); background: var(--nyc-red-bg, #e8eeff); }
.rung-scenario:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }
.rung-scenario__icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--nyc-red, #1b2c8f); }
.rung-scenario__label { flex: 1; }

/* Job cards (the "Your jobs" entry-list) with edit and delete. */
.rung-jobs { display: flex; flex-direction: column; gap: 10px; }
.rung-jobcard {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--surface-white, #fff);
  border: 1.5px solid var(--border-light, #ddd); border-radius: 12px;
}
.rung-jobcard__body { flex: 1; min-width: 0; }
.rung-jobcard__title { font-weight: 600; }
.rung-jobcard__meta { color: var(--text-muted, #666); font-size: var(--font-size-sm, 14px); margin-top: 2px; }
.rung-jobcard__actions { display: flex; gap: 6px; flex-shrink: 0; }
.rung-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1.5px solid var(--border-light, #ddd); background: var(--surface-white, #fff);
  color: var(--nyc-red, #1b2c8f); cursor: pointer; transition: background .15s ease;
}
.rung-iconbtn:hover { background: var(--nyc-red-bg, #e8eeff); }
.rung-iconbtn:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }
.rung-addjob { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; }
.rung-empty { color: var(--text-muted, #666); margin: 0; }

/* Continue-your-resume card on the welcome screen when a draft exists. */
.rung-resume-card {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: 12px;
  background: var(--nyc-red-bg, #e8eeff); border: 1.5px solid var(--nyc-red, #1b2c8f);
}
.rung-resume-card__body { flex: 1; min-width: 0; }
.rung-resume-card__title { font-family: var(--font-heading, sans-serif); font-weight: 600; font-size: 18px; }
.rung-resume-card__meta { color: var(--text-secondary, #444); font-size: var(--font-size-sm, 14px); margin-top: 2px; }
.rung-resume-card__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Building screen — while the model tidies the words into bullet lines. */
.rung-building { display: flex; gap: 10px; margin-top: var(--space-lg, 24px); }
.rung-building span {
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--nyc-red, #1b2c8f); opacity: .3;
  animation: rung-bounce 1.2s infinite ease-in-out;
}
.rung-building span:nth-child(2) { animation-delay: .2s; }
.rung-building span:nth-child(3) { animation-delay: .4s; }
@keyframes rung-bounce { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .rung-building span { animation: none; opacity: .6; } }

/* Skill chips and the stacked result-screen actions. */
.chip-group { margin: 4px 0 8px; }
.rung-actions { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-lg, 24px); }

/* Review — the fix-anything surface at the end. */
.rung-review__group { margin-top: var(--space-lg, 24px); }
.rung-review__h { font-family: var(--font-heading, sans-serif); font-size: 18px; margin: 0 0 10px; }
.rung-review__job { background: var(--surface-muted, #f5f5f5); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.rung-review__job-h { font-weight: 600; margin-bottom: 8px; }
.rung-review .form-field { margin-bottom: 10px; }

/* The resume / cover letter reuse the portfolio's .cv-* layout (resume.css).
   These few rules are the only glue: a white preview frame, a plain-text name
   in place of the portfolio logo, and a fit so the .cv padding doesn't double
   up inside the frame. */
.rung-doc-frame {
  background: #fff;
  border: 1px solid var(--border-light, #ddd);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .06));
  overflow-wrap: anywhere;
}
.rung-doc-frame .cv { max-width: none; margin: 0; padding: 0; }
.resume-page .cv-fullname {
  margin: 0;
  font-family: var(--display, "Space Grotesk", sans-serif);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.resume-page .cv-letter p { margin: 0 0 .85rem; }
.resume-page .cv-bullets--loose li { margin: .45rem 0; }

/* Confirm-and-enrich screen. The model's lines shown back, editable, each with
   the Talk mic via .rung-field, plus tappable memory-jogs for common duties of
   the role. This is where the human checks the model's output. */
.rung-polish { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border-light, #ddd); }
.rung-polish:last-of-type { border-bottom: 0; }
.rung-polish .rung-review__h { margin-bottom: 8px; }
/* One resume line per row: the field grows, the trash button sits at the end.
   The line's Talk mic appears on focus via .rung-field, so a non-reader can fix
   just this line by voice. */
.rung-lines { display: flex; flex-direction: column; gap: 8px; }
.rung-line { display: flex; align-items: flex-end; gap: 8px; }
.rung-line > .rung-field, .rung-line > .form-field { flex: 1 1 0; min-width: 0; }
.rung-line__del { flex: 0 0 auto; align-self: center; }
.rung-addline { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.rung-polish__more { margin-top: 10px; }
.rung-polish__more-label { font-size: var(--font-size-sm, 14px); color: var(--text-secondary, #444); margin-bottom: 8px; }
.rung-suggests { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rung-suggests__label { flex: 0 0 100%; font-size: var(--font-size-sm, 14px); color: var(--text-secondary, #444); margin-bottom: 2px; }
.rung-suggest {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px dashed var(--border-strong, #999); border-radius: 999px;
  background: var(--surface-white, #fff); color: var(--text-primary, #1a1a1a);
  font: inherit; font-size: 15px; line-height: 1.2; cursor: pointer;
}
.rung-suggest:hover { border-style: solid; border-color: var(--nyc-red, #1b2c8f); background: var(--nyc-red-bg, #e8eeff); }
.rung-suggest:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }
.rung-suggest .rung-ico { color: var(--nyc-red, #1b2c8f); flex-shrink: 0; }

/* The stale-plan banner. Shown under the goal when it changed under existing
   answers, so the person can rebuild the questions or keep what they have. */
.rung-stale { margin: 16px 0 0; }
.rung-stale__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }

/* ── The living feed. one growing page ─────────────────────────────────────── */
.rung-feed { gap: var(--space-base, 16px); }
.rung-blocks { display: flex; flex-direction: column; gap: var(--space-lg, 24px); margin: 8px 0; }
/* Each revealed question sits in its own card — the childcare .layout-wizard__content
   surface scaled to a single question: white, generously rounded, a soft shadow. The
   active card lifts with a navy ring so the person can always see where they are. */
.rung-block {
  display: flex; flex-direction: column; gap: var(--space-base, 16px);
  background: var(--surface-white, #fff);
  border-radius: 20px;
  padding: var(--space-xl, 28px);
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, .12);
  transition: box-shadow .2s ease;
}
.rung-block--active { box-shadow: 0 0 0 2px var(--nyc-red, #1b2c8f), 0 6px 18px rgba(27, 44, 143, .14); }
.rung-block__q { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 0; }
/* The inline "Next" affordance. Hidden by default, shown via :has on the active cell once it
   holds something (the frontier), and on ANY cell the person has gone back into to change an
   answer (:focus-within) — so editing an earlier answer brings its Next back, with no timer. */
.rung-block__foot { margin-top: 4px; }
/* Per-question Next: full width, centered label — matches mobile-first pattern */
.rung-cell-next { display: none; width: 100%; justify-content: center; }
.rung-block--active:has(.form-field__input[data-filled]) .rung-cell-next,
.rung-block--active:has(.form-field__textarea[data-filled]) .rung-cell-next,
.rung-block--active:has(.chip-toggle__input:checked) .rung-cell-next,
.rung-block:focus-within:has(.form-field__input[data-filled]) .rung-cell-next,
.rung-block:focus-within:has(.form-field__textarea[data-filled]) .rung-cell-next,
.rung-block:focus-within:has(.chip-toggle__input:checked) .rung-cell-next { display: flex; }
.rung-scenario.is-chosen { border-color: var(--nyc-red, #1b2c8f); background: var(--nyc-red-bg, #e8eeff); }
.rung-startover { align-self: flex-start; margin-top: var(--space-xl, 32px); opacity: .6; font-size: 14px; }

/* Education / certificates uses the imported childcare "Your family" pattern: an
   entry-list of saved entries, a light-blue dashed add affordance (.entry-list__add),
   a grey reveal form-card (.employment__form), and the shared .button-bar--section
   action row (Cancel left in danger red, Add this primary on the right). */
.rung-edu-form.employment__form { margin-top: 0; }
.rung-edu-form .button-bar { margin-top: var(--space-lg, 24px); }

/* A quiet helper line under a question for choice/chips answers, which have no form
   field to carry their helper text. Same weight as .form-field__helper. */
.rung-help { margin: 0; font-size: var(--font-size-sm, 14px); line-height: 1.45; color: var(--text-secondary, #444); }

/* Print to PDF — show only the document. resume.css already supplies the
   one-page print typography for .cv; this just hides the app chrome around it. */
@media print {
  body * { visibility: hidden !important; }
  .resume-page, .resume-page * { visibility: visible !important; }
  .resume-page { position: absolute; left: 0; top: 0; width: 100%; }
}

.is-hidden { display: none !important; }

/* ── O*NET occupation typeahead ──────────────────────────────────────────────
   All colours from existing tokens; no new values introduced.
   .onet-field-wrap    — relative container so the listbox positions under the input
   .onet-listbox       — absolutely-positioned results panel
   .onet-listbox__item — one result row
   .onet-confirmed     — "Matched to <title>" badge shown after a pick            */
.onet-field-wrap { position: relative; }

.onet-listbox {
  position: absolute; z-index: 100;
  left: 0; right: 0;
  background: #fff;
  border: 1.5px solid var(--border-light, #ddd);
  border-top: none;
  border-radius: 0 0 var(--radius-sm, 6px) var(--radius-sm, 6px);
  box-shadow: 0 6px 20px rgba(27, 44, 143, .13);
  list-style: none;
  margin: 0; padding: 4px 0;
  max-height: 280px;
  overflow-y: auto;
}
.onet-listbox__item {
  padding: 10px var(--space-md, 16px);
  font-family: var(--font-heading, sans-serif);
  font-size: var(--font-size-md, 16px);
  color: var(--text-primary, #111);
  cursor: pointer;
  line-height: 1.3;
}
.onet-listbox__item--active,
.onet-listbox__item:hover {
  background: var(--nyc-red-bg, #e8eeff);
  color: var(--nyc-red, #1b2c8f);
}
/* Bold the matched fragment within the item label */
.onet-listbox__item mark {
  background: none;
  color: var(--nyc-red, #1b2c8f);
  font-weight: 700;
}

/* Confirmed-match badge — shown below the field after the user picks an occupation.
   Reuses the same pill visual language as .rung-suggest. */
.onet-confirmed {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  padding: 5px 10px 5px 8px;
  background: var(--nyc-red-bg, #e8eeff);
  border: 1.5px solid var(--nyc-red, #1b2c8f);
  border-radius: 99px;
  font-family: var(--font-heading, sans-serif);
  font-size: var(--font-size-sm, 14px);
  color: var(--nyc-red, #1b2c8f);
}
.onet-confirmed .rung-ico { flex-shrink: 0; }
.onet-confirmed strong { font-weight: 700; }
.onet-confirmed__clear {
  background: none; border: none; padding: 0 0 0 4px;
  font-size: 12px; line-height: 1;
  color: var(--nyc-red, #1b2c8f); opacity: 0.6;
  cursor: pointer; flex-shrink: 0;
}
.onet-confirmed__clear:hover { opacity: 1; }