/* ============================================================================
   Part 18 / P8 — the pre-order form's channel picker.
   ----------------------------------------------------------------------------
   Three radios rendered as three cards. Radios, not a <select>: there are exactly
   three options, all three fit on one line at any width worth supporting, and the
   answer decides what the rest of the form asks for — a question with that much
   consequence should not be hidden behind a tap.

   The native input stays in the DOM (opacity 0, positioned over its own card) so
   the group is keyboard-navigable with the arrow keys and submits without any
   JavaScript at all. :has() and :checked do the appearance.
   ========================================================================== */

.sd18-channel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sd18-channel-opt {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

.sd18-channel-opt input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.sd18-channel-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    height: 100%;
    padding: 12px 8px;
    border: 1px solid #dde5e3;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.sd18-channel-face i {
    font-size: 17px;
    color: #93a09c;
    transition: color .16s ease;
}

.sd18-channel-face b {
    color: #23312d;
    font-size: 13.5px;
    font-weight: 800;
}

.sd18-channel-face small {
    color: #7d8783;
    font-size: 10.5px;
    line-height: 1.5;
}

.sd18-channel-opt:hover .sd18-channel-face { border-color: #b9d8d0; background: #f7fcfb; }

/* The selected card. `:has()` is used only for the extra polish; the
   `input:checked + .sd18-channel-face` sibling rule below is what actually does
   the work, and it has been supported everywhere for fifteen years. */
.sd18-channel-opt input:checked + .sd18-channel-face {
    border-color: #1abc9c;
    background: #e7f6f2;
    box-shadow: inset 0 0 0 1px #1abc9c;
}

.sd18-channel-opt input:checked + .sd18-channel-face i { color: #0e8a72; }
.sd18-channel-opt input:checked + .sd18-channel-face b { color: #0e8a72; }

/* Keyboard focus has to be visible on the CARD, since the input it belongs to is
   invisible by design. */
.sd18-channel-opt input:focus-visible + .sd18-channel-face {
    border-color: #0e8a72;
    box-shadow: 0 0 0 3px rgba(26, 188, 156, .3);
}

/* A field the chosen channel does not need. `hidden` alone would be enough, but
   .sd-form-field carries `display:flex` from forms14.css, which beats the
   attribute's UA `display:none` — this is that fight, settled. */
.sd18-channel-field[hidden],
.sd18-photo-field[hidden] { display: none !important; }

@media (max-width: 420px) {
    .sd18-channel { gap: 6px; }
    .sd18-channel-face { padding: 10px 4px; }
    .sd18-channel-face small { display: none; }
}