/* AI Resume Builder feature styles.
   Aligned with the dashboard design system (var(--dash-*) tokens declared in
   dashboard-shell.css).

   DELIBERATELY SMALL. Cards, headers, labels, inputs, grids, and buttons all come
   from the shared dashboard classes that the Dashboard and the Cover Letter
   Creator use (card dashboard-card, section-head, dashboard-controls-container,
   row gx-md-3 gy-3, label.fw-bolder.pb-2, form-control, btn btn-primary). Only
   what has no equivalent anywhere else is defined here: the step rail, the
   listening state on the dictation button, and the review preview.

   The JS in resume-builder.js depends on these class names being preserved:
   rb-rail-item, is-current, is-done, rb-mic, is-listening, rb-preview, rb-entry,
   rb-skill-grid, rb-skill-card, rb-skill-check, rb-skill-label, is-checked.
*/

/* ---------- step card header ----------
   The shared .card-header is a click target on the Dashboard's accordions. This
   card never collapses, so it must not look interactive. */
.dashboard-v2 .dashboard-card > .card-header.rb-static-header {
    cursor: default;
}

/* A class rule setting display on a button beats the user-agent [hidden] rule, so these
   stayed visible even though the script had hidden them: Back on step one, Start over on
   an empty draft. */
[data-rb-back][hidden],
[data-rb-start-over][hidden] {
    display: none !important;
}

/* ---------- the partial owns its own appearance ----------
   This wizard is a dashboard component that also renders on a marketing page, under a
   layout that loads a completely different base: no style.css, and a marketing.css that
   claims .btn-primary for its own nav. Every property left to the host layout has
   diverged at least once, and patching each one from the page's own stylesheet made it
   worse, because a page-scoped override outranks the shared rules here and changes only
   one of the two surfaces.

   The rule from here on: anything the wizard's own markup needs is declared in THIS
   file, which travels with the partial and loads after both style.css and marketing.css
   on their respective layouts. Nothing about the wizard should depend on which layout it
   landed in. */

/* Cleared of the fixed marketing header, which sits above the page on the public
   landing page and would otherwise cover the rail whenever a step scrolls into view. */
[data-rb-root] {
    scroll-margin-top: 88px;
    /* The dashboard gets 1.7 from its themed bootstrap's body rule and the marketing
       layout does not, which is what made a hero CTA on the landing page stand 7px
       taller than the checker's. Declared here so the interview's text rhythm is the
       same under either layout instead of borrowing whatever the host body carries. */
    line-height: 1.7;
}

/* ---------- step transition ----------
   The card carrying the questions slides in from the side the step came from, so moving
   through the interview reads as movement rather than the form being replaced under the
   cursor. Applied to the card and not the fields, so the header, badge and border travel
   with the content they describe.

   `both` holds the final frame, which is transform: none, so the finished card is not
   left as a containing block for the date popover inside it. */
@keyframes rb-step-in-forward {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes rb-step-in-back {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: none; }
}

.rb-enter-forward {
    animation: rb-step-in-forward 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.rb-enter-back {
    animation: rb-step-in-back 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .rb-enter-forward,
    .rb-enter-back {
        animation: none;
    }
}

/* ---------- step rail ----------
   The one genuinely new element on the page: no other page runs a multi-step
   flow. Built from the same tokens as everything else so it reads as native. */
/* The rail is a map of the whole interview, not a caption for the card under it, so it
   is given enough room to read as its own band. At 14px it sat close enough to the step
   card to look attached to it. */
.rb-rail {
    margin-bottom: 30px;
}

.rb-rail-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.rb-rail-item {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

/* The first step is the only one with no connector before it, so letting it
   grow dumps its share of the free space after the "You" label instead of into
   a line, which is what made the row look unevenly spaced. It hugs its content
   instead. Every other step grows equally, and since the connector is the only
   flexible child inside a step, all the connectors come out the same length. */
.rb-rail-item:first-child {
    flex: 0 0 auto;
}

/* The connector between steps. Drawn on the item so it stretches with the row
   rather than being a fixed width that breaks when labels wrap. */
.rb-rail-item + .rb-rail-item::before {
    content: "";
    height: 2px;
    flex: 1 1 12px;
    min-width: 12px;
    background: var(--dash-border);
    margin-right: 8px;
}

.rb-rail-item.is-current + .rb-rail-item::before,
.rb-rail-item.is-done + .rb-rail-item::before {
    background: var(--dash-blue-mid);
}

.rb-rail-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 999px;
    color: var(--dash-text-3);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.rb-rail-btn:disabled {
    cursor: default;
}

.rb-rail-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--dash-white);
    border: 2px solid var(--dash-border);
    font-size: 0.78rem;
    line-height: 1;
    flex: 0 0 auto;
}

.rb-rail-item.is-done .rb-rail-btn {
    color: var(--dash-text-2);
}

.rb-rail-item.is-done .rb-rail-marker {
    background: var(--dash-blue-light);
    border-color: var(--dash-blue-mid);
    color: var(--dash-blue);
}

.rb-rail-item.is-current .rb-rail-btn {
    color: var(--dash-blue);
}

.rb-rail-item.is-current .rb-rail-marker {
    background: var(--dash-blue);
    border-color: var(--dash-blue);
    color: var(--dash-white);
}

/* ---------- repeated entries ----------
   Inner cards use the shared `card shadow-sm border-0` treatment; this only
   tints them so a job or program reads as nested inside the step card. */
.dashboard-v2 .rb-entry {
    background: #fbfdff;
    border: 1px solid var(--dash-border) !important;
}

/* ---------- one job open at a time ----------
   An expanded job card is about 530px: five fields, a checkbox and a six-row textarea.
   Three of them made the Experience step 1,875px against the Education step's 534px,
   so the page lurched on every step change and the preview panel was left far above
   the fold. Folding the finished ones down to a summary strip keeps the step roughly
   one screen however many jobs someone adds. */
.rb-entry-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rb-entry.is-open .rb-entry-head {
    margin-bottom: 14px;
}

.rb-entry-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: none;
    padding: 2px 0;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.rb-entry-toggle:focus-visible {
    outline: 2px solid var(--dash-blue);
    outline-offset: 3px;
    border-radius: 6px;
}

.rb-entry-chevron {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: var(--dash-text-3);
    transition: transform 0.18s ease;
}

/* Pointing right when shut, down when open, which is the only direction cue a
   collapsed strip carries. */
.rb-entry:not(.is-open) .rb-entry-chevron {
    transform: rotate(-90deg);
}

.rb-entry-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dash-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}

/* Employer and dates. Shown only while collapsed, and allowed to disappear before the
   title does, since the title is the half that identifies the job. */
.rb-entry-summary {
    font-size: 0.82rem;
    color: var(--dash-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.rb-entry-remove {
    flex: 0 0 auto;
}

.rb-entry-fields[hidden] {
    display: none !important;
}

/* ---------- card headings inside a step ----------
   The education entry and the gap panel group both use an h6, and h6 is one of the
   properties the two host layouts disagree about: the themed bootstrap.min.css says
   Ubuntu at 700, style.css on the dashboard says the system stack at 500. Neither is
   what these are meant to look like, and with nothing in the partial claiming them the
   same markup rendered in a different face and weight on each surface.

   Claimed here, as the rule at the top of this file requires. font-family: inherit takes
   the wizard's own face from .dashboard-v2, which is loaded on both surfaces, so this
   follows the interview rather than whichever layout it landed in.

   The weight is 500 because style.css sets `h4, h5, h6 { font-weight: 500 !important }`
   and that cannot be outranked from here without an !important of our own. Same approach
   as the step buttons below: where the dashboard forces a value, state that value, so the
   two surfaces resolve identically whichever rule gets there first. It leaves these a
   step lighter than .rb-entry-title on the job card, which is a span and so escapes the
   rule; that difference is what the dashboard has always shown. */
[data-rb-root] h6 {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

/* ---------- label hint ----------
   The question-mark beside a label that carries a tooltip. dashboard.css styles the
   Dashboard's Font Awesome version of this; the wizard's is a Bootstrap Icon (see
   fieldLabel in resume-builder.ts for why), so the same treatment is given here. */
.rb-field-hint {
    color: var(--dash-text-3);
    font-size: 0.8rem;
    margin-left: 3px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.rb-field-hint:hover {
    color: var(--dash-blue);
}

/* ---------- validation message ----------
   Nothing had ever set its size, so it inherited the 1rem body default and came out at
   16px against 12.8px labels and 14px inputs: the largest text in the step was the
   sentence saying something had gone wrong. Sized to the fields it is about, and given
   a tighter leading than the interview's 1.7, which is set for reading prose rather than
   for a two line notice. */
[data-rb-error] {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ---------- checkbox caption ----------
   "I still work here" is a plain label rather than a .form-check-label, so nothing had
   ever set its size and it inherited the 1rem body default. That left the one optional
   caption in the step as the largest text in it, above both the 0.8rem field labels and
   the 0.875rem values being typed. Sized to the input text: it is an answer, not a
   heading for one. */
.rb-check-label {
    font-size: 0.875rem;
    color: var(--dash-text-2);
}

/* ---------- month/year picker ----------
   The input-group is a plain Bootstrap group; only the popover needs rules,
   since Bootstrap has no month-only picker to inherit from. */
.rb-monthyear {
    position: relative;
}

.rb-monthyear .rb-cal-btn {
    border-color: var(--dash-border);
    color: var(--dash-text-3);
}

.rb-monthyear .rb-cal-btn:hover:not(:disabled) {
    background: var(--dash-blue-light);
    border-color: var(--dash-blue-mid);
    color: var(--dash-blue);
}

.rb-monthyear-pop {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    min-width: 260px;
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
}

/* An input-group child is a flex item by default, which would stretch the
   popover into the row. It is positioned, so it must not participate. */
.rb-monthyear > .rb-monthyear-pop {
    flex: none;
}

.rb-monthyear-pop[hidden] {
    display: none !important;
}

/* ---------- dictation ----------
   The button itself is a plain btn btn-sm btn-outline-primary. Listening is a
   state a person needs to see at a glance, so it changes color and pulses. */
.rb-mic.is-listening {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
    animation: rb-pulse 1.4s ease-in-out infinite;
}

.rb-mic.is-listening:hover {
    background: #fecaca;
    border-color: #f87171;
    color: #991b1b;
}

@keyframes rb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.28); }
    50%      { box-shadow: 0 0 0 6px rgba(185, 28, 28, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .rb-mic.is-listening {
        animation: none;
    }
}

/* ---------- review preview ----------
   A read-only rendering of what we will build from, so it is typography rather
   than form controls. */
/* ---------- the page before it is written ----------
   The panel used to hold a single centred sentence until the first answer landed, which
   put a 90px box beside a 700px form and made the split look broken at the exact moment
   someone is deciding whether to start. It now draws the whole page from the outset:
   every section keeps its heading, each contact detail holds its place, and the lines
   still to be written are dashed rules that real text replaces where it stands. The
   shape of the finished document is what is being promised, so showing it empty argues
   for it better than a sentence describing it.

   Two tones, declared here rather than reached for from the dashboard palette, because
   nothing else in the product needs an unwritten line. */
.rb-preview {
    --rb-ghost-ink: #b6c3d8;
    --rb-ghost-rule: #d5dfec;
}

/* Name, role and contact details are one block above a rule, the way the top of a
   resume is set. */
.rb-preview-header {
    padding-bottom: 11px;
    border-bottom: 1.5px solid var(--dash-text);
}

.rb-preview-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dash-text);
}

/* The role being targeted, as the headline under the name. */
.rb-preview-role {
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dash-text-2);
    margin-top: 4px;
}

.rb-preview-contact {
    font-size: 0.82rem;
    color: var(--dash-text-2);
    margin-top: 7px;
}

.rb-preview-sep {
    color: var(--dash-text-3);
    margin: 0 6px;
}

/* Anything standing in for an answer: the name, the role, a contact detail. Set at the
   size and position of the real thing so nothing moves when it arrives, only lighter. */
.rb-preview .is-ghost {
    color: var(--rb-ghost-ink);
}

/* A line of text not written yet. Dashed rather than solid so it reads as a space to
   fill rather than a rule, and given the width of the line it will become. */
.rb-ghost-line {
    display: block;
    height: 10px;
    border: 1px dashed var(--rb-ghost-rule);
    border-radius: 3px;
    margin-top: 9px;
}

.rb-ghost-line.is-title {
    height: 13px;
    margin-top: 0;
}

.rb-ghost-entry {
    margin-top: 2px;
}

.rb-preview-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dash-blue);
    border-bottom: 1px solid var(--dash-border);
    padding-bottom: 6px;
    margin: 20px 0 12px;
}

.rb-preview-entry + .rb-preview-entry {
    margin-top: 14px;
}

.rb-preview-entry-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--dash-text);
}

.rb-preview-entry-meta {
    font-size: 0.78rem;
    color: var(--dash-text-3);
    margin-top: 2px;
}

.rb-preview-entry-body {
    font-size: 0.85rem;
    color: var(--dash-text-2);
    line-height: 1.6;
    margin: 6px 0 0;
    white-space: pre-wrap;
}

/* ---------- submit row ----------
   Mirrors .clc-submit-row / .clc-button-group on the Cover Letter Creator so the
   two pages end the same way. */
/* ---------- step footer ----------
   Save state left, buttons right, on one line under the card. The row used to stack
   them centred, which left the reassurance line hanging under the button as if it were
   the button's caption. */
.rb-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 22px 0 14px;
}

.rb-button-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto;
}

/* The arrow after "Continue to Experience". Plain text rather than an icon glyph so it
   sits on the label's own baseline in the label's own weight. Hidden on the last step,
   whose button creates rather than continues. */
.rb-next-arrow {
    margin-left: 7px;
}

.rb-next-arrow[hidden] {
    display: none;
}

/* Step count and, on the two skippable steps, the Optional pill beside it. */
.rb-step-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.rb-step-badges .section-badge {
    margin-right: 0;
}

.rb-step-badges .section-badge[hidden] {
    display: none;
}

/* ---------- start over ----------
   A link, not a third button: it sits beside the two controls that move the interview
   forward and must not read as one of them. Declared in full for the same reason the
   step buttons below are, since .btn-link belongs to Bootstrap on one layout and is
   dressed by marketing.css on the other. Extra space to its right so it reads as its
   own thing rather than the first item in the button pair. */
.rb-reset-link {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 4px 2px;
    margin-right: 6px;
    font: inherit;
    font-size: 0.85rem;
    color: var(--dash-blue);
    text-decoration: none;
    cursor: pointer;
}

/* Every state restated at the same value. Left alone, the hover would be decided by
   whichever sheet the layout happened to bring: Bootstrap's Reboot dresses a button's
   states on one surface and marketing.css on the other, and the two disagree. Stating it
   is also what keeps the label from shifting colour or gaining a rule under the cursor,
   which on a control this quiet reads as a warning it is not meant to carry. */
.rb-reset-link:hover,
.rb-reset-link:focus,
.rb-reset-link:active {
    color: var(--dash-blue);
    text-decoration: none;
}

.rb-reset-link:focus-visible {
    outline: 2px solid var(--dash-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The two step buttons, declared in full.
   Values are what the authenticated screen resolves to today, which is Bootstrap's
   themed .btn-primary / .btn-outline-secondary as amended by style.css. Restated here
   rather than inherited, because style.css reaches the dashboard and marketing.css
   reaches the landing page and the two disagree about .btn-primary. Where style.css
   still wins on the dashboard through !important it now sets the same value, so the two
   pages resolve identically whichever rule gets there first. */
.rb-back-btn,
.rb-next-btn {
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* marketing.css dresses .btn-primary for its nav, in Geist. */
    font-family: inherit;
    transition: 0.5s;
}

.rb-next-btn {
    background-color: #1363c6;
    border-color: #1363c6;
    color: #fff;
}

.rb-next-btn:hover,
.rb-next-btn:focus,
.rb-next-btn:active {
    background-color: #0f56ad;
    border-color: #0f56ad;
    color: #fff;
}

.rb-next-btn:hover {
    transform: translateY(-1px);
}

.rb-back-btn {
    background-color: transparent;
    border-color: #15ace1;
    color: #15ace1;
}

/* Bootstrap fills an outline-secondary button solid with the theme cyan on hover;
   style.css replaces that with a near-white fill and brand-blue text, and the dashboard
   is what this has to match. */
.rb-back-btn:hover {
    background-color: #f8f9fa;
    border-color: #1363c6;
    color: #1363c6;
}

/* The thin focus ring style.css gives every dashboard button, in place of Bootstrap's
   thicker one in the button's own hue. */
.rb-back-btn:focus,
.rb-back-btn:active:focus,
.rb-next-btn:focus,
.rb-next-btn:active:focus {
    box-shadow: 0 0 0 0.1rem rgba(13, 110, 253, 0.5);
}

.rb-save-state {
    font-size: 0.8rem;
    color: var(--dash-text-3);
    margin: 0;
    min-height: 1rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------- small screens ---------- */
@media (max-width: 575.98px) {
    /* The rail keeps its markers but drops the labels, so five steps still fit
       on a phone without wrapping into three rows. */
    .rb-rail-label {
        display: none;
    }

    /* The footer stacks: buttons first and full width, since they are what a thumb is
       looking for, the save state centred beneath. */
    .rb-submit-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rb-button-group {
        order: 1;
    }

    .rb-button-group .rb-next-btn {
        flex: 1 1 auto;
    }

    .rb-save-state {
        order: 2;
        text-align: center;
    }
}

/* ---------- questions / preview split ----------
   Deliberately NOT Bootstrap's .row and .col-lg-*. The wizard partial renders under two
   layouts, and only one of them has ever loaded Bootstrap by default, so the split
   collapsed to a single full-width column on the public page while looking correct on
   the dashboard. Owning the grid here means the partial renders the same way wherever
   it is dropped, whatever the host layout happens to ship. */
/* The form track is capped rather than given the larger share. The questions pane is a
   fixed two-up field grid whose content stops needing width at about 552px, so a
   fractional share just handed it space it could not use, while the preview, which is a
   document and scales with whatever it gets, was left at 458px against an 816px letter
   page. Capping the form and letting the preview take the remainder is what widens the
   resume without touching either page's container. */
/* Three children in two rows. The step card and the preview share row one and both
   stretch to it, so their bottom edges line up whichever is the taller; the footer takes
   row two under the form column alone, since buttons that ran the full width of the
   split would sit under the preview rather than under the form they submit.

   Row gap is zero because .rb-submit-row carries its own top margin. */
.rb-split {
    display: grid;
    grid-template-columns: minmax(0, 580px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0 22px;
    align-items: stretch;
}

.rb-split-card {
    grid-column: 1;
    grid-row: 1;
    display: flex;
}

/* Floor for row one, because the step card alone sizes it (see .rb-split-aside below)
   and step 1 is the shortest card in the interview. At its natural 485px the panel beside
   it gave the preview 440px of page against a 467px empty skeleton, so the very first
   thing a visitor saw was a scrollbar on a document they had not written yet. 516px is
   that 467 plus the 45px the panel header and padding take, plus a few px of headroom so
   a font fallback cannot bring the scrollbar back.

   A floor rather than a fixed height: every later step asks for more than a contact
   block, so this changes nothing from step 2 on, and it also stops the row resizing
   under the visitor as they move between steps. Scoped to the split, since below 1200
   the panel stacks under the form and is bounded by its own max-height instead. */
@media (min-width: 1200px) {
    .rb-split-card {
        min-height: 516px;
    }
}

.rb-split-foot {
    grid-column: 1;
    grid-row: 2;
}

/* The panel is taken out of the row's sizing entirely: its only child is absolutely
   positioned, so the aside contributes no height and the STEP CARD alone decides how tall
   the row is. The panel then fills whatever that comes to.

   This is what stops a long resume running the layout. Both panes stretched to the taller
   of the two before, so a finished document, which is several times the height of the
   questions beside it, dragged the row down with it and left the form card as a short
   form floating at the top of a very tall white box. The document scrolls inside its own
   page now instead, which is what a page is: the preview is not truncated and nothing is
   hidden, it is just no longer allowed to set the height of the form next to it. */
.rb-split-aside {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    position: relative;
}

.rb-split-card,
.rb-split-foot,
.rb-split-aside {
    min-width: 0;
}

/* The card fills the row it was given. Its own bottom margin is dropped, since the
   footer below it is spaced by the submit row instead. */
.rb-split-card > .dashboard-card {
    flex: 1 1 auto;
    margin-bottom: 0;
}

/* The review step, where the preview moves into the step card and the panel goes away.
   Capped near a letter page rather than left to fill the widened card: the review is a
   document being read, and 1,280px of line length is not. */
.rb-split.is-single {
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
}

.rb-split-aside[hidden] {
    display: none;
}

/* Stacked below 1200 rather than 992. With the form track capped at 580 the preview
   takes what is left, and under roughly 1000px of split that leaves it around 300px,
   which is worse than putting it under the questions at full width.

   Placement is released here so the three children auto-place down one column in
   document order: card, buttons, preview. The buttons stay directly under the form
   rather than below a full-height preview a thumb has to scroll past. */
@media (max-width: 1199.98px) {
    .rb-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .rb-split-card,
    .rb-split-foot,
    .rb-split-aside {
        grid-column: auto;
        grid-row: auto;
    }

    /* Back into normal flow. Stacked, there is no card beside the panel to take a height
       from, so it sizes to its own content and the cap below is what bounds it. */
    .rb-split-aside {
        position: static;
    }

    .rb-preview-wrap {
        position: static;
        flex: 1 1 auto;
    }
}

/* ---------- live preview panel ----------
   Added when the builder gained a public entrance. The panel shows the answers as a
   resume while they are being typed, which is what allows the signup wall to sit after
   the interview instead of in front of it: the visitor receives something before being
   asked for anything. It reuses .rb-preview and its children, so the review step and
   this panel render from one builder (buildPreview in resume-builder.ts). */
/* Fills the row the grid gives it, which is the step card's height, so the two panes end
   on the same line. It used to be sticky and sized to its content, which left the empty
   panel a short box floating beside a full card.

   Nothing is lost by dropping sticky: the panel is now as tall as the form beside it, so
   it is in view for as long as the form is. */
.rb-preview-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--dash-border, #e2e8f0);
    border-radius: 12px;
    background: var(--dash-surface, #fff);
    overflow: hidden;
}

.rb-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--dash-border, #e2e8f0);
    background: var(--dash-surface-sunk, #f8fafc);
}

.rb-preview-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dash-text, #1e293b);
}

/* Says plainly that this is not the finished article. The gap between what the panel
   shows and what we hand back is the argument for signing up, so understating it here
   would be selling the wrong thing. */
.rb-preview-note {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dash-text-muted, #64748b);
    white-space: nowrap;
}

/* Takes whatever height is left under the panel header. min-height:0 is what allows a
   flex item to be shorter than its content and therefore to scroll at all. A document
   longer than the form beside it scrolls here rather than stretching the page. */
.rb-preview-paper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: #fff;
}

/* Page margins. buildPreview returns a .card-body, whose 1rem is right for the review
   step's card and thin for a panel wide enough to read as a document. Scoped to the
   aside so the review step keeps the card padding it shares with every other step. */
.rb-preview-paper .rb-preview {
    padding: 30px 34px;
}

.rb-preview-empty {
    margin: 0;
    padding: 28px 18px;
    text-align: center;
    font-size: 0.86rem;
    color: var(--dash-text-muted, #64748b);
}

/* Below the questions on narrow screens, where the panel has no card to match the height
   of and would otherwise run the full length of whatever it contains. Capped so the
   preview stays a glance rather than a second page to scroll through on the way to the
   buttons. */
@media (max-width: 1199.98px) {
    .rb-preview-paper {
        max-height: 40vh;
    }
}

/* ---------- skills picker ----------
   Shown once, in the panel between Create and the build, and only to someone past the
   signup wall. The checkbox cards are the ones Career Climber uses for the same job, kept
   as a separate set rather than shared: those are declared under .cc-shell in a stylesheet
   neither builder surface loads, and the rule for this partial is that everything its
   markup needs is declared here, so the dashboard screen and the landing page cannot
   drift apart. */
.rb-skill-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 991.98px) {
    .rb-skill-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .rb-skill-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A label wrapping the box and the name, so the whole tile is the hit area without a
   click handler behind it. Twenty of these is a lot of small targets otherwise. */
.rb-skill-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    border: 1.5px solid #b7c6dd;
    border-radius: var(--dash-radius-sm, 8px);
    background: var(--dash-white, #fff);
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease;
}

.rb-skill-card:hover {
    border-color: #8fa8cb;
    background: rgba(19, 99, 198, 0.08);
}

.rb-skill-card.is-checked {
    border-color: var(--dash-blue);
    background: rgba(19, 99, 198, 0.14);
}

.rb-skill-check {
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

.rb-skill-check:checked {
    background-color: var(--dash-blue);
    border-color: var(--dash-blue);
}

.rb-skill-check:focus {
    box-shadow: 0 0 0 0.18rem rgba(19, 99, 198, 0.22);
}

/* Ellipsis rather than wrap: a two-line tile among one-line tiles breaks the grid's
   rhythm, and a skill long enough to truncate is readable from its first few words. */
.rb-skill-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dash-text-2, #3d4a6b);
    cursor: pointer;
}

.rb-skill-card.is-checked .rb-skill-label {
    color: var(--dash-blue);
}

@media (prefers-reduced-motion: reduce) {
    .rb-skill-card {
        transition: none;
    }
}