/*
 * Wizard Controls – shared layout for the reusable input controls in
 * Views/WizardControls/. Visual styling of the controls themselves lives in
 * wizard-create.css (and Bootstrap CSS variables); this file provides the
 * half-width grid that lays controls out two-per-row, and the question/hint
 * header every control shares.
 *
 * Loaded once by WizardContainer.cshtml, EditContainer.cshtml and
 * ActivitySelector.cshtml — always alongside wizard-create.css.
 */

/* ============================================================
   HALF-WIDTH GRID
   Each wizard control occupies half the wizard view by default;
   controls that need the whole row opt in with wizard-control--full.
   Collapses to a single column on narrow screens.
   ============================================================ */

:root {
    /* The floor under a single control, and the floor under the whole control area
       of a step. Variables so a step that genuinely needs to be shorter can override
       them without a rule of its own. */
    --wc-control-min-height: 96px;
    /* 384px. A step whose questions are short — four cards, or an age and a gender —
       filled so little of the panel that the Back/Continue row rode up under them and
       the step read as though it had failed to finish loading. This is what stops a
       short step from looking unfinished next to the steps either side of it. */
    --wc-grid-min-height: 384px;
}

.wc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 20% more than the 12/16 it was. Two controls on one step were reading as a
       single block of fields; the extra air is what separates them into two
       questions at a glance. */
    gap: 14.4px 19.2px;
    align-items: start;
    margin-bottom: 12px;

    /* The floor is here, on the area the controls sit in, rather than on a control.
       A control cannot know what else is on its step, so a per-control floor still
       let two short controls come to less than this between them. Whatever a step
       holds — one control or two — the area they share is never shorter than this.
       Content taller than it simply grows, so this only ever adds space that was
       missing. */
    min-height: var(--wc-grid-min-height);
}

/* A control rendered by a WizardControls partial. Its inner markup keeps the
   existing .form-group styling; margins are handled by the grid gap so we zero
   the trailing margin to keep rows aligned. */
.wc-grid > .wizard-control {
    margin-bottom: 0;
    min-width: 0;
    min-height: var(--wc-control-min-height);
}

.wc-grid > .wizard-control .form-group {
    margin-bottom: 0;
}

/* Full-width escape hatch — spans both columns. */
.wizard-control--full {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .wc-grid {
        grid-template-columns: 1fr;
        gap: 14.4px;
    }
    /* Every control is full width on mobile anyway. */
    .wizard-control--full {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   QUESTION + HINT  (.wc-field-head / .wc-hint-btn / .input-hint)

   Every control partial renders its question as a .form-label and its
   explanation as a <p class="input-hint">. wizard-hints.js pairs the two at
   runtime: the label is wrapped in a .wc-field-head row, a ⓘ button is added
   beside it, and the hint starts closed.

   The reasoning: on a step of four or five controls the hints outnumbered the
   questions and were set only slightly smaller, so the eye had to sort prose
   from prompts before it could answer anything. Folding them away leaves one
   line of type per control — the question — and puts the explanation one tap
   away for whoever wants it. The ⓘ is a real 34px target (38px on a phone)
   rather than a text-sized glyph, because on a phone it is the only thing on
   the row that is not the question.

   Everything below degrades cleanly if the script never runs: the hint has no
   `hidden` class in the markup, so it simply stays visible under its label.
   ============================================================ */

.wc-field-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

/* The label owns the row's bottom margin only when it is alone; inside the head
   the row owns it, or the two stack. */
.wc-field-head .form-label { margin-bottom: 0; }

/* _Slider.cshtml puts its label in a header row of its own (label ⟷ unit pills).
   The head slots in as that row's first item and must not add a second gap. */
.measure-header .wc-field-head { margin-bottom: 0; min-width: 0; }

.wc-hint-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1.5px solid #93c5fd;
    border-radius: 50%;
    background: rgba(59,130,246,.12);
    color: #2563eb;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .14s, border-color .14s, color .14s;
}

.wc-hint-btn svg { width: 19px; height: 19px; display: block; }

.wc-hint-btn:hover {
    background: rgba(59,130,246,.2);
    border-color: #3b82f6;
    color: #1d4ed8;
}

/* Open — the button holds the state, so it is obvious which question the panel
   below belongs to when several are open at once. */
.wc-hint-btn[aria-expanded="true"] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.wc-hint-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,130,246,.35);
}

[data-bs-theme="dark"] .wc-hint-btn {
    background: rgba(59,130,246,.22);
    border-color: #3b82f6;
    color: #93c5fd;
}

[data-bs-theme="dark"] .wc-hint-btn:hover {
    background: rgba(59,130,246,.32);
    color: #dbeafe;
}

[data-bs-theme="dark"] .wc-hint-btn[aria-expanded="true"] {
    background: #3b82f6;
    border-color: #60a5fa;
    color: #fff;
}

/* The hint itself. Quieter than it was — it is now an answer to a question the
   user asked, not something competing with the label above it. */
.input-hint {
    font-size: 12.5px;
    color: var(--bs-secondary-color);
    margin: 0 0 10px;
    line-height: 1.5;
}

/* Once it is opened by the ⓘ it reads as a panel hanging off that button, so it
   is never mistaken for part of the control below. */
.input-hint--panel {
    padding: 8px 11px;
    border-left: 3px solid rgba(59,130,246,.5);
    border-radius: 0 7px 7px 0;
    background: var(--bs-tertiary-bg, rgba(127,127,127,.07));
}

/* Unpaired hints (a control with a hint but no label) keep the old inline mark,
   since nothing else marks them as explanation. */
.input-hint:not(.input-hint--panel)::before {
    content: "ℹ";
    opacity: 0.6;
    margin-right: 4px;
}

.input-hint:not(.input-hint--panel) { margin-top: 5px; }

@media (max-width: 600px) {
    .wc-hint-btn { width: 38px; height: 38px; }
    .wc-hint-btn svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .wc-hint-btn { transition: none; }
}

/* ============================================================
   WRAP CHECKBOX (_Checkbox.cshtml, Style = "wrap")
   A compact opt-in/opt-out row: one label wrapping the box and its text.
   It turns whatever sits above it on or off, so it gets a real hit target
   rather than a default-size checkbox tucked under the options it affects.
   These rules previously lived inside the delivery step's own <style>; they
   belong to the control, which any activity's wizard may use.
   ============================================================ */

.wc-check-row {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--bs-border-color, #e4e4e4);
}

.wc-check-label {
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--bs-secondary-color, #666);
    padding: 8px;
    margin: -8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.wc-check-label:hover { background: rgba(127, 127, 127, 0.07); }

.wc-check-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #16a34a;
}

.wc-check-label input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3);
    border-radius: 4px;
}