/* =============================================================================
   wizard.css — Company setup wizard chrome.

   P3.5 2026-08-03: rewritten by porting design/prototypes/harbor/harbor.css
   `.wiz` / `.card` / `.step` / `.form` / `.form-foot` / `.alert-tile` / `.dl`
   patterns class-by-class into scoped .hrc-wizard__* names. Prototype-first
   rule from ui skill: the shape and density here come from the prototype,
   not the Interface-screens mocks. Mocks are the reference for content
   ordering + copy; the prototype defines how it looks.

   TWO-CARD LAYOUT (harbor `.wiz` shape):
     - Left card  = the vertical stepper (.hrc-wizard__rail-card)
     - Right card = the form panel (.hrc-wizard__form-panel)
     - Optional  = a third right-hand card for Step 1's Upload Company Logo
                   aside (.hrc-wizard__aside). Steps 2..5 skip it and the
                   form panel takes the full right column.

   LABEL-LEFT FORM RHYTHM. The shared .hrc-field ships label-on-top (stacked)
   because that is right for the standalone form pages. Screen01..05 mocks
   use label-LEFT / input-RIGHT rhythm because the wizard's form column is
   narrow and dense. Scoped override below turns .hrc-field into a two-col
   grid inside the form panel — no library change (P3 non-goal 5).

   NARROW WIDTHS. Below 960px the rail card stacks above the form; the
   step-num circles keep their size + spacing so the customer still sees
   which step they are on. No horizontal page scroll at 360px — enforced by
   HrChronicle.ResponsiveTests.CompanyWizardViewportTests.

   Semantic tokens only. DesignTokenTests + HarborTokenSyncTests both police
   this file (the latter added in the drift-guard commit 76dbfba).
   ========================================================================== */

/* =============================================================================
   §1  WIZARD ROOT — the two-card grid
   ========================================================================== */

.hrc-wizard {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: var(--hrc-space-lg);
    align-items: start;
    padding-block: var(--hrc-space-md);
}

/* Content column wraps optional narrow-width pip row + the form body. Its own
   min-inline-size:0 stops a wide inline value inside a field from pushing the
   grid track past 1fr (skill §1b). */
.hrc-wizard__content {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--hrc-space-md);
}

/* Body layout inside the content column. Default = single column (form only).
   Passing an Aside slot switches to a 2-col grid so the aside sits beside the
   form at desktop widths. */
.hrc-wizard__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hrc-space-lg);
    align-items: start;
}

.hrc-wizard__body--with-aside {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

/* =============================================================================
   §2  RAIL CARD — the vertical stepper (harbor `.card` + `.steps`)
   ========================================================================== */

.hrc-wizard__rail {
    background: var(--hrc-surface);
    border: 1px solid var(--hrc-border);
    border-radius: var(--hrc-radius);
    box-shadow: var(--hrc-shadow);
    padding: var(--hrc-space-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    inset-block-start: var(--hrc-space-lg);
}

/* Each step = flex row with numbered badge, then title + sub. A dashed vertical
   connector runs between adjacent steps — harbor's `.step + .step::before` shape,
   positioned to align with the CENTRE of the step-num box (20px = half of 40px). */
.hrc-wizard__step {
    display: flex;
    align-items: flex-start;
    gap: var(--hrc-space-sm);
    padding-block: var(--hrc-space-sm);
    position: relative;
    text-decoration: none;
    min-inline-size: 0;
}

.hrc-wizard__step + .hrc-wizard__step::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 19px;
    block-size: var(--hrc-space-sm);
    inline-size: 0;
    border-inline-start: 1.5px dashed var(--hrc-border-strong);
}

/* Step number badge — rounded-square 40x40, matches harbor + Screen01..05 mocks.
   Three states: default (neutral), current (accent-filled), done (ok-filled). */
.hrc-wizard__step-num {
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-neutral-soft);
    color: var(--hrc-ink-muted);
    font-weight: var(--hrc-weight-semibold);
    font-size: var(--hrc-text-md);
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid var(--hrc-border);
    line-height: 1;
}

.hrc-wizard__step-num > svg {
    inline-size: 18px;
    block-size: 18px;
}

.hrc-wizard__step--current .hrc-wizard__step-num {
    background: var(--hrc-accent);
    color: var(--hrc-accent-on);
    border-color: var(--hrc-accent);
}

.hrc-wizard__step--done .hrc-wizard__step-num {
    background: var(--hrc-ok);
    /* #fff is deliberately exempted by DesignTokenTests (print styles etc.);
       --hrc-ok is dark enough in both themes for white to remain the contrast. */
    color: #fff;
    border-color: var(--hrc-ok);
}

.hrc-wizard__step-text {
    min-inline-size: 0;
    padding-block-start: 2px;
}

.hrc-wizard__step-title {
    font-size: var(--hrc-text-md);
    font-weight: var(--hrc-weight-semibold);
    color: var(--hrc-ink);
    line-height: var(--hrc-leading-tight);
    margin: 0;
}

/* Non-current step titles read as muted so the current step stands out on scan. */
.hrc-wizard__step:not(.hrc-wizard__step--current) .hrc-wizard__step-title {
    color: var(--hrc-ink-muted);
}

.hrc-wizard__step-desc {
    font-size: var(--hrc-text-sm);
    color: var(--hrc-ink-subtle);
    line-height: var(--hrc-leading);
    margin-block-start: 3px;
}

/* =============================================================================
   §3  FORM PANEL CARD — the right-hand content card (harbor `.card`)
   ========================================================================== */

.hrc-wizard__form-panel {
    min-inline-size: 0;
    background: var(--hrc-surface);
    border: 1px solid var(--hrc-border);
    border-radius: var(--hrc-radius);
    box-shadow: var(--hrc-shadow);
    overflow: hidden;
}

/* The Section inside the form panel becomes the card body — no double frame.
   The section header carries the title; the section body carries the fields. */
.hrc-wizard__form-panel .hrc-section {
    padding: var(--hrc-space-lg);
}

.hrc-wizard__form-panel .hrc-section + .hrc-section {
    border-block-start: 1px solid var(--hrc-border);
}

/* Section title matches harbor .card-title: heavier weight, tighter tracking. */
.hrc-wizard__form-panel .hrc-section__title {
    font-size: var(--hrc-text-lg);
    font-weight: var(--hrc-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--hrc-ink);
    margin: 0;
    line-height: var(--hrc-leading-tight);
}

.hrc-wizard__form-panel .hrc-section__description {
    font-size: var(--hrc-text-sm);
    color: var(--hrc-ink-muted);
    margin-block-start: 4px;
    line-height: var(--hrc-leading);
    max-inline-size: 70ch;
}

/* =============================================================================
   §4  LABEL-LEFT FORM RHYTHM — scoped override of .hrc-field default stacked
   ========================================================================== */

/* Fields inside the wizard form panel become two-column: fixed label column
   on the left, input takes the rest. baseline alignment so a hint under the
   input doesn't push the label down. */
.hrc-wizard__form-panel .hrc-field {
    display: grid;
    grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--hrc-space-sm) var(--hrc-space-md);
}

.hrc-wizard__form-panel .hrc-field__label {
    grid-column: 1;
    padding-block-start: 10px;
    font-weight: var(--hrc-weight-semibold);
    color: var(--hrc-ink);
    font-size: var(--hrc-text-sm);
}

/* Every direct child of the field wrapper AFTER the label lives in column 2 —
   the input, the hint, the error. Uses .hrc-field > * because the shared
   library renders the control directly (no wrapper element between). */
.hrc-wizard__form-panel .hrc-field > :not(.hrc-field__label) {
    grid-column: 2;
}

.hrc-wizard__form-panel .hrc-field__hint,
.hrc-wizard__form-panel .hrc-field__error {
    grid-column: 2;
    margin-block-start: 0;
}

/* Remove the shared library's 32rem cap inside the wizard — the form column
   is already narrow, so the input should fill it. */
.hrc-wizard__form-panel .hrc-input,
.hrc-wizard__form-panel .hrc-select {
    max-inline-size: none;
}

/* The inline layout variants (checkbox rows, fieldset groups) fall back to
   their library defaults because grid on a checkbox row would break the
   label-beside-box shape. */
.hrc-wizard__form-panel .hrc-field--inline,
.hrc-wizard__form-panel .hrc-field--grouped {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
}

/* =============================================================================
   §5  ASIDE CARD — Screen01 Upload Company Logo
   ========================================================================== */

.hrc-wizard__aside {
    min-inline-size: 0;
    background: var(--hrc-surface);
    border: 1px solid var(--hrc-border);
    border-radius: var(--hrc-radius);
    box-shadow: var(--hrc-shadow);
    padding: var(--hrc-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--hrc-space-sm);
    position: sticky;
    inset-block-start: var(--hrc-space-lg);
}

.hrc-wizard__aside-title {
    font-weight: var(--hrc-weight-semibold);
    color: var(--hrc-ink);
    font-size: var(--hrc-text-md);
    letter-spacing: -0.01em;
    margin-block-end: var(--hrc-space-xs);
}

.hrc-wizard__aside-hint {
    font-size: var(--hrc-text-xs);
    color: var(--hrc-ink-muted);
    line-height: var(--hrc-leading);
}

/* Dropzone matches Screen01: dashed accent border on soft-accent background,
   centred call-to-action text. Visual only — the real <InputFile> below it is
   the actual click target so keyboard + screen-reader users still work. */
.hrc-wizard__aside-dropzone {
    border: 1.5px dashed var(--hrc-accent);
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-accent-soft);
    color: var(--hrc-accent);
    padding: var(--hrc-space-lg) var(--hrc-space-md);
    text-align: center;
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-medium);
    line-height: var(--hrc-leading);
}

.hrc-wizard__aside-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hrc-space-md);
    background: var(--hrc-surface-raised);
    border: 1px solid var(--hrc-border);
    border-radius: var(--hrc-radius-sm);
    min-block-size: 120px;
}

.hrc-wizard__aside-preview img {
    max-inline-size: 100%;
    max-block-size: 150px;
    object-fit: contain;
}

.hrc-wizard__aside-input {
    display: block;
    inline-size: 100%;
    font-size: var(--hrc-text-xs);
    color: var(--hrc-ink-muted);
}

/* =============================================================================
   §6  STEP 2 — inline add rows + checklist tiles
   ========================================================================== */

.hrc-wizard__inline-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--hrc-space-sm);
    align-items: end;
    margin-block-end: var(--hrc-space-md);
}

.hrc-wizard__checklist {
    display: flex;
    flex-direction: column;
    gap: var(--hrc-space-xs);
    max-block-size: 320px;
    overflow-y: auto;
    padding: var(--hrc-space-sm);
    background: var(--hrc-surface-raised);
    border: 1px solid var(--hrc-border);
    border-radius: var(--hrc-radius-sm);
}

.hrc-wizard__checklist--empty {
    color: var(--hrc-ink-muted);
    text-align: center;
    padding: var(--hrc-space-md);
    font-size: var(--hrc-text-sm);
}

/* P7.5-defects part 2 - shared section-header block for wizard steps 2/3/4.
   Icon + title on line 1, hint on its own line, left-accent bar. Matches
   mockup state F. Rendered by <WizardSectionHeader> inside a Section slot. */
.hrc-wiz-sect-hd {
    display: flex;
    align-items: flex-start;
    gap: var(--hrc-space-sm);
    padding: var(--hrc-space-sm) var(--hrc-space-md);
    border-inline-start: 3px solid var(--hrc-accent);
    background: var(--hrc-accent-soft, var(--hrc-surface-raised));
    border-radius: var(--hrc-radius-sm);
    margin-block-end: var(--hrc-space-md);
}

.hrc-wiz-sect-hd__icon {
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--hrc-radius-sm);
    background: var(--hrc-accent);
    color: var(--hrc-accent-on);
    display: inline-grid;
    place-items: center;
    flex: none;
}

.hrc-wiz-sect-hd__icon svg {
    inline-size: 14px;
    block-size: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hrc-wiz-sect-hd__body {
    min-inline-size: 0;
    flex: 1;
}

.hrc-wiz-sect-hd__title {
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-semibold);
    color: var(--hrc-ink);
    margin: 0;
}

.hrc-wiz-sect-hd__hint {
    font-size: var(--hrc-text-xs);
    color: var(--hrc-ink-muted);
    margin: 4px 0 0;
    line-height: var(--hrc-leading);
}

/* P7.5 map-row polish - clarifies the tick semantics (PDS-1). */
.hrc-wizard__checklist-hint {
    font-size: var(--hrc-text-xs);
    color: var(--hrc-ink-muted);
    margin: 0 0 var(--hrc-space-xs);
    padding-block-end: var(--hrc-space-xs);
    border-block-end: 1px dashed var(--hrc-border);
}

.hrc-checkbox--map-row {
    display: flex;
    align-items: center;
    gap: var(--hrc-space-sm);
    padding: var(--hrc-space-xs) var(--hrc-space-sm);
    border-radius: var(--hrc-radius-sm);
    transition: background-color .12s ease;
}

.hrc-checkbox--map-row:hover {
    background-color: var(--hrc-surface-hover);
}

.hrc-checkbox--map-row .hrc-pill--pushed-end {
    margin-inline-start: auto;
}

/* =============================================================================
   §7  STEP 3 + 4 — ghost preview cards for the stubbed steps
   ========================================================================== */

.hrc-wizard__ghost-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hrc-space-md);
    margin-block-start: var(--hrc-space-md);
}

.hrc-wizard__ghost-col {
    padding: var(--hrc-space-lg) var(--hrc-space-md);
    background: var(--hrc-surface-raised);
    border: 1px dashed var(--hrc-border-strong);
    border-radius: var(--hrc-radius-sm);
    text-align: center;
    color: var(--hrc-ink-muted);
    font-size: var(--hrc-text-sm);
    font-weight: var(--hrc-weight-medium);
    min-block-size: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   §8  STEP 5 — grouped task list (harbor `.dl` row shape)
   ========================================================================== */

.hrc-wizard__task-group {
    display: flex;
    flex-direction: column;
    gap: var(--hrc-space-xs);
    margin-block-end: var(--hrc-space-lg);
}

.hrc-wizard__task-group-title {
    font-weight: var(--hrc-weight-semibold);
    color: var(--hrc-ink);
    font-size: var(--hrc-text-md);
    margin-block-end: var(--hrc-space-xs);
    letter-spacing: -0.005em;
}

.hrc-wizard__task-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--hrc-surface-raised);
    border: 1px solid var(--hrc-border);
    border-radius: var(--hrc-radius-sm);
    overflow: hidden;
}

.hrc-wizard__task-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--hrc-space-sm);
    align-items: center;
    padding: var(--hrc-space-sm) var(--hrc-space-md);
    border-block-end: 1px solid var(--hrc-border);
    background: var(--hrc-surface);
    font-size: var(--hrc-text-sm);
}

.hrc-wizard__task-list li:last-child {
    border-block-end: 0;
}

.hrc-wizard__task--pending {
    color: var(--hrc-ink-muted);
    background: var(--hrc-surface-raised) !important;
}

/* Ready = accent-soft pill; Pending = neutral-soft pill. Honest — no fake ok
   ticks on links that don't exist yet (packet 10.3 non-goal 11 carried into P3). */
.hrc-wizard__task-badge {
    font-size: var(--hrc-text-xs);
    padding: 3px 10px;
    border-radius: var(--hrc-radius-pill);
    background: var(--hrc-accent-soft);
    color: var(--hrc-accent);
    font-weight: var(--hrc-weight-semibold);
    align-self: center;
    white-space: nowrap;
    border: 1px solid var(--hrc-accent-line);
}

.hrc-wizard__task-badge--pending {
    background: var(--hrc-neutral-soft);
    color: var(--hrc-ink-muted);
    border-color: var(--hrc-border);
}

/* =============================================================================
   §9  PIP ROW — narrow-width horizontal progress replacement
   ========================================================================== */

.hrc-wizard__pip-row {
    display: none;
}

/* =============================================================================
   §10  NARROW-WIDTH COLLAPSE — <960px
        Rail card stacks above content; aside stacks below form; ghost-cols
        become single column. No horizontal page scroll — enforced by
        HrChronicle.ResponsiveTests.CompanyWizardViewportTests.
   ========================================================================== */

@media (max-width: 60rem) {
    .hrc-wizard {
        grid-template-columns: 1fr;
    }

    .hrc-wizard__rail {
        position: static;
        /* On narrow widths the vertical stepper takes too much block-size;
           collapse to the pip row above the form panel. */
        display: none;
    }

    .hrc-wizard__pip-row {
        display: flex;
        gap: var(--hrc-space-xs);
        align-items: center;
        overflow-x: auto;
        padding-block: var(--hrc-space-xs);
        margin-block-end: var(--hrc-space-sm);
    }

    .hrc-wizard__pip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-neutral-soft);
        color: var(--hrc-ink-muted);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-medium);
        white-space: nowrap;
        border: 1px solid var(--hrc-border);
    }

    .hrc-wizard__pip--current {
        background: var(--hrc-accent);
        color: var(--hrc-accent-on);
        border-color: var(--hrc-accent);
    }

    .hrc-wizard__pip--done {
        background: var(--hrc-ok);
        color: #fff;
        border-color: var(--hrc-ok);
    }

    .hrc-wizard__body--with-aside {
        grid-template-columns: 1fr;
    }

    .hrc-wizard__aside {
        position: static;
    }

    .hrc-wizard__ghost-cols {
        grid-template-columns: 1fr;
    }

    /* At narrow widths the label-left rhythm becomes wasteful — labels dominate
       the row. Fall back to stacked. */
    .hrc-wizard__form-panel .hrc-field {
        grid-template-columns: 1fr;
    }

    .hrc-wizard__form-panel .hrc-field__label {
        grid-column: 1;
        padding-block-start: 0;
    }

    .hrc-wizard__form-panel .hrc-field > :not(.hrc-field__label) {
        grid-column: 1;
    }

    .hrc-wizard__form-panel .hrc-section {
        padding: var(--hrc-space-md);
    }
}