/* ==========================================================================
   Public form runtime + builder canvas
   Model: Crm.Domain.Forms   Design: docs/features/62-ui-ux-design-system.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   Field grid — 12 columns, ColSpan drives placement
   -------------------------------------------------------------------------- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-4);
}

.form-field { min-width: 0; }

/* Below tablet every field is full width — two-up controls are unusable on a phone. */
@media (max-width: 767px) {
    .form-field { grid-column: span 12 !important; }
}

/* --------------------------------------------------------------------------
   Content block / consent
   -------------------------------------------------------------------------- */

.form-field__content { color: var(--text-secondary); font-size: var(--t-body-size); }

.form-field__content-title {
    font-size: var(--t-section-size);
    font-weight: var(--t-section-weight);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.form-field__consent {
    padding: var(--space-3);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.form-field__legal {
    margin-top: var(--space-2);
    padding-left: var(--space-6);
    font-size: var(--t-meta-size);
    line-height: var(--t-body-lh);
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Choice lists and cards
   -------------------------------------------------------------------------- */

.choice-list { display: flex; flex-direction: column; gap: var(--space-2); }

.choice-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
}

.choice-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--motion-fast), background-color var(--motion-fast),
                box-shadow var(--motion-fast);
}
.choice-card:hover:not(:disabled) {
    border-color: var(--text-tertiary);
    background: var(--bg-subtle);
}
/* Two selectors, two different moments.

   --selected is server state: it is what the card looks like after a round trip, and it is all there
   was. The real control is visually hidden inside the label, so ticking a card changed NOTHING on
   screen until the page posted — which reads as "selected" on a single-choice step, because pressing
   Continue immediately shows the result, and reads as "multi-select is broken" on a multi-select
   one, because the visitor ticks three boxes and watches nothing happen.

   :has(input:checked) is the live state, and it is what makes a checkbox group usable at all. It
   degrades to --selected on an engine without :has(), which is the behaviour that shipped. */
.choice-card--selected,
.choice-card:has(input:checked) {
    border-color: var(--action-primary);
    background: var(--bg-surface);
    box-shadow: 0 0 0 1px var(--action-primary);
}

/* Not :has() — the focus ring is the one cue a keyboard user has, and it must not depend on a newer
   selector. :focus-within has been supported far longer and does the same job here. */
.choice-card:focus-within {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}
.choice-card:disabled { opacity: .6; cursor: not-allowed; }

.choice-card__title {
    font-size: var(--t-body-size);
    font-weight: var(--t-body-medium-weight);
    color: var(--text-primary);
}
.choice-card__description {
    font-size: var(--t-meta-size);
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Slider / rating
   -------------------------------------------------------------------------- */

.form-field__slider { display: flex; align-items: center; gap: var(--space-3); }

.form-field__range { flex: 1; accent-color: var(--action-primary); }

.form-field__range-value {
    min-width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: var(--t-body-medium-weight);
}

.form-field__rating { display: flex; gap: var(--space-1); }

.form-field__star {
    display: inline-flex;
    padding: var(--space-1);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color var(--motion-fast);
}
.form-field__star:hover:not(:disabled) { color: var(--tag-warning-dot); }
.form-field__star--on { color: var(--tag-warning-dot); }

/* --------------------------------------------------------------------------
   Public form shell — mobile-first (visitors arrive on phones)
   -------------------------------------------------------------------------- */

.public-form {
    min-height: 100vh;
    background: var(--bg-page);
    padding: var(--space-4);
}

/* The thank-you and the unavailable notice: one short message and nothing else on the page, so it
   sits in the middle of the viewport rather than clinging to the top with an empty screen below it.
   min-height rather than height, so a long thank-you message still scrolls instead of being clipped. */
.public-form--centred {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
}

.public-form--centred .public-form__card { width: 100%; }

.public-form__card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.public-form__header { padding: var(--space-6) var(--space-6) 0; }

.public-form__title {
    font-size: var(--t-record-title-size);
    font-weight: var(--t-record-title-weight);
    line-height: var(--t-record-title-lh);
}

.public-form__description {
    margin-top: var(--space-2);
    color: var(--text-secondary);
}

.public-form__body { padding: var(--space-6); }

.public-form__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border);
}

.public-form__error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--tag-danger-bg);
    color: var(--tag-danger-fg);
    border-radius: var(--radius-md);
    font-size: var(--t-body-size);
}

/* --------------------------------------------------------------------------
   Wizard — sidebar step rail + top progress
   -------------------------------------------------------------------------- */

.wizard { display: grid; grid-template-columns: 1fr; }

@media (min-width: 900px) {
    .wizard--sidebar { grid-template-columns: 260px 1fr; }
    .wizard--sidebar .public-form__card { max-width: 980px; }
}

.wizard__rail {
    display: none;
    padding: var(--space-6);
    background: var(--bg-inset);
    border-right: 1px solid var(--border);
}
@media (min-width: 900px) {
    .wizard--sidebar .wizard__rail { display: block; }
}

.wizard__step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--text-secondary);
    font-size: var(--t-body-size);
}
.wizard__step--current { color: var(--text-primary); font-weight: var(--t-body-medium-weight); }
.wizard__step--done { color: var(--text-secondary); }

.wizard__step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong);
    font-size: var(--t-meta-size);
    background: var(--bg-surface);
}
.wizard__step--current .wizard__step-marker {
    background: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--text-inverse);
}
.wizard__step--done .wizard__step-marker {
    background: var(--tag-success-bg);
    border-color: var(--tag-success-dot);
    color: var(--tag-success-fg);
}

.wizard__progress {
    height: 4px;
    background: var(--bg-muted);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.wizard__progress-fill {
    height: 100%;
    background: var(--action-primary);
    transition: width var(--motion-base);
}

.wizard__progress-label {
    margin-top: var(--space-2);
    font-size: var(--t-meta-size);
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Thank-you
   -------------------------------------------------------------------------- */

.form-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-6);
    text-align: center;
}
.form-done__icon { color: var(--tag-success-dot); }
.form-done__title { font-size: var(--t-record-title-size); font-weight: 600; }
.form-done__message { color: var(--text-secondary); max-width: 420px; }

/* --------------------------------------------------------------------------
   Builder canvas
   -------------------------------------------------------------------------- */

.builder { display: grid; grid-template-columns: 220px 1fr 300px; height: 100%; min-height: 0; }

.builder__palette,
.builder__settings {
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--bg-subtle);
}
.builder__palette { border-right: 1px solid var(--border); }
.builder__settings { border-left: 1px solid var(--border); }

.builder__canvas { overflow-y: auto; padding: var(--space-6); background: var(--bg-surface); }

.builder__palette-group {
    margin-bottom: var(--space-4);
}
.builder__palette-heading {
    font-size: var(--t-meta-size);
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.builder__palette-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2);
    margin-bottom: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--t-label-size);
    color: var(--text-primary);
    cursor: grab;
    text-align: left;
}
.builder__palette-item:hover { border-color: var(--border-strong); background: var(--bg-muted); }

.builder__field {
    position: relative;
    padding: var(--space-3);
    border: 1px dashed transparent;
    border-radius: var(--radius-md);
}
.builder__field:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.builder__field--selected {
    border-color: var(--action-primary);
    border-style: solid;
    background: var(--bg-subtle);
}

.builder__field-actions {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--motion-fast);
}
.builder__field:hover .builder__field-actions,
.builder__field--selected .builder__field-actions { opacity: 1; }

.builder__page {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}
.builder__page-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--t-section-size);
    font-weight: var(--t-section-weight);
}

@media (max-width: 1279px) {
    .builder { grid-template-columns: 180px 1fr 260px; }
}

/* --------------------------------------------------------------------------
   Draft preview bar
   Deliberately loud: an author must never mistake a draft preview for the live
   form, because the two can differ and only one of them is what visitors see.
   -------------------------------------------------------------------------- */

.preview-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--tag-warning-bg);
    border-bottom: 1px solid var(--tag-warning-dot);
    color: var(--tag-warning-fg);
    font-size: var(--t-label-size);
    flex-wrap: wrap;
}

.preview-bar__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font-weight: 500;
    white-space: nowrap;
}

.preview-bar__text { min-width: 0; }

.preview-bar__steps {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.preview-stage { min-height: calc(100vh - 48px); }