/* ============================================================================
   Forms — inputs, checkboxes, sliders
   ========================================================================== */

.form-group { margin-bottom: var(--space-7); }
.form-group-inline { margin-bottom: 0; flex: 1; }
.form-label {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--text-body);
    margin-bottom: var(--space-2);
}
.form-input {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    color: var(--text);
    transition: border-color var(--transition);
    background: var(--surface);
}
.form-input::placeholder { color: var(--text-subtle); }
.form-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
/* Size only. Width is a layout decision and belongs to the container, not to a size token:
   this rule used to carry width:auto, which shrank a control to its content and made the
   class unusable for the common case of a small control filling its column. Thirteen sites
   worked around it by borrowing .card-body-sm for its padding. Pair this with .w-auto when
   the control shares a row rather than owning one. */
.form-input-sm { padding: var(--space-2) var(--space-5); font-size: var(--text-sm); }
textarea.form-input { resize: vertical; min-height: 80px; }
/* THERE IS DELIBERATELY NO `select.form-input` RULE, and this is the note that stops it being
   written a third time.

   A select sitting in a .form-row next to a text input looks very slightly taller, and it is: it was
   measured in a browser on real rendered pages in two products rather than reasoned about. At base
   size, select 35.2px against input 34.4px. At form-input-sm, 24.8 against 24.0. The difference is
   0.8px at both sizes, which on the dpr-1.25 display it was measured on is EXACTLY ONE DEVICE PIXEL.
   It is a rounding artifact and there is no CSS between the two numbers.

   Two attempts were made anyway and both were measured to be worse. `appearance: none` alone changes
   the height by nothing at all. `appearance: none` plus a line-height roughly doubles the gap, to
   28.7 against 24.0. A padding compensation overshoots and lands the select below the input.

   THE FACT THAT EXPLAINS ALL OF THAT: a select ignores `line-height` when computing its own height.
   Pinning line-height on .form-input moves every text input and leaves every select exactly where it
   stood, so any fix expressed through line-height adjusts one side of a comparison and reports
   success.

   What does equalise them is a min-height on both. It also grows every text input in four products
   by 4.7px, which is a redesign wearing a bug fix.

   Option count and label length do not affect a select's height: four selects with 2 to 4 options
   and labels from 9 to 27 characters all measured 35.2px. */
.form-row { display: flex; gap: var(--space-6); align-items: flex-end; }
.form-row .form-group { flex: 1; margin-bottom: 0; }
.form-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
/* Prose under a card body, which is NOT a hint under a field. .form-hint was doing this job in
   eight places across CkAdmin and carries a top margin sized to sit tight under an input, so used
   under a card body it reads as a caption that lost its field. Same tone, spacing of its own, and no
   claim to belong to a control. */
.card-note {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: var(--space-6) 0 0;
}

/* Checkbox + its label as one clickable unit. Used by tile settings and the board
   customize list; it is a form primitive, so it lives with the other form rules. */
.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-md);
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
.form-checkbox input[type="checkbox"] {
    margin: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--brand);
    cursor: pointer;
    flex-shrink: 0;
}

/* Multi-select checkbox box */
.multi-select-box {
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-md);
    max-height: 140px;
    overflow-y: auto;
    padding: var(--space-2) 0;
    background: var(--surface);
}
.multi-select-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    cursor: pointer;
    font-size: var(--text-base);
    color: var(--text-body);
    transition: background var(--transition-fast);
}
.multi-select-item:hover { background: var(--surface-hover); }
.multi-select-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--brand);
    margin: 0;
    flex-shrink: 0;
}

/* Range slider (repository config weights) */
.slider-group { display: flex; flex-direction: column; gap: var(--space-10); }
/* One weight control: the label row, the range input, and the caption naming
   the dimension. The reset zeroes every margin, so the gap is what separates
   them; slider-group sets the larger gap that separates one control from the next. */
.slider-item { display: flex; flex-direction: column; gap: var(--space-3); }
.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}
.slider-header .form-label { margin-bottom: 0; }
.slider-value {
    font-weight: var(--weight-bold);
    font-size: var(--text-xl);
    min-width: var(--space-18);
    text-align: right;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}
.slider {
    width: 100%;
    height: var(--space-3);
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: var(--radius-xs);
    outline: none;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--space-10);
    height: var(--space-10);
    background: var(--brand);
    border-radius: var(--radius-circle);
    cursor: pointer;
    border: var(--border-width-thick) solid var(--surface);
    box-shadow: var(--shadow-sm);
}
.slider::-moz-range-thumb {
    width: var(--space-10);
    height: var(--space-10);
    background: var(--brand);
    border-radius: var(--radius-circle);
    cursor: pointer;
    border: var(--border-width-thick) solid var(--surface);
    box-shadow: var(--shadow-sm);
}

/* Checkbox cards (repository config toggles) */
.check-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.check-item {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    padding: var(--space-5) var(--space-6);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition);
}
.check-item:hover { background: var(--surface-hover); }
.check-item input[type="checkbox"] { margin-top: var(--space-1); flex-shrink: 0; accent-color: var(--brand); }
.check-item div { display: flex; flex-direction: column; gap: var(--space-1); }
.check-item strong { font-size: var(--text-md); }

/* A <summary> that acts as a quiet disclosure link inside a card. */
.summary-link {
    cursor: pointer;
    color: var(--text-body);
    list-style: none;
}
.summary-link::-webkit-details-marker { display: none; }
/* The chevron pinned to the right of a card-header <summary>. */
.summary-caret {
    float: right;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* An input with a leading glyph (the developer search box). */
.input-with-icon { position: relative; }
.input-with-icon .form-input { padding-left: var(--space-16); }
.input-icon {
    position: absolute;
    left: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: var(--text-base);
    pointer-events: none;
}

/* A textarea holding machine text (an SSH public key): monospace-ish, quiet. */
.form-input-code {
    min-height: 72px;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    background: var(--surface-alt);
}