/* The machine selector on find-your-machine.html.
 *
 * Unlike the enquiry form, this sits on the ordinary page background, so it
 * uses the theme tokens and inverts correctly with the colour scheme. Text on a
 * token background uses --primary-text, never --primary: #475a75 measures 2.4:1
 * on the dark surfaces and fails WCAG, which is the whole reason the
 * --primary-text token exists.
 */

.selector {
    margin: 2rem 0 2.5rem;
}

.sel-step {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.25rem 1.4rem;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.sel-step legend {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-text);
}

.sel-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.85rem;
    color: #ffffff;
    background: var(--primary);
    border-radius: 50%;
}

.sel-options {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

@media (min-width: 640px) {
    .sel-options-tight {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* The whole block is the hit target, not just the 16px radio. */
.sel-option {
    display: block;
    position: relative;
    padding: 0.75rem 0.9rem 0.75rem 2.4rem;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--bg-primary);
    cursor: pointer;
}

.sel-option input {
    position: absolute;
    left: 0.85rem;
    top: 1rem;
    margin: 0;
    accent-color: var(--primary);
}

.sel-option:hover {
    border-color: var(--primary-light);
}

/* :has() carries the selected state; browsers without it simply show the
   radio's own checked state, which is still perfectly usable. */
.sel-option:has(input:checked) {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.sel-option:has(input:focus-visible) {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

.sel-option-title {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.sel-option-note {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.sel-rate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.sel-inline-label {
    font-weight: 500;
    color: var(--text-primary);
}

.sel-rate input,
.sel-rate select {
    padding: 0.6rem 0.7rem;
    font-family: inherit;
    /* 16px: anything smaller makes iOS Safari zoom the page on focus. */
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--hairline);
    border-radius: 6px;
}

.sel-rate input {
    width: 9rem;
}

.sel-rate input:focus-visible,
.sel-rate select:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

.sel-hint {
    margin: 0.85rem 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.sel-submit {
    padding: 0.9rem 1.75rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.sel-submit:hover {
    background: var(--primary-dark);
}

.sel-submit:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 3px;
}

.sel-error {
    margin: 0.85rem 0 0;
    color: #b3261e;
    font-weight: 500;
}

.sel-error[hidden] {
    display: none;
}

/* ----- result ----- */

.sel-result {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--hairline);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    background: var(--bg-secondary);
    scroll-margin-top: 1.5rem;
}

.sel-result[hidden] {
    display: none;
}

.sel-result-head {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    color: var(--primary-text);
}

/* The three verdicts have to be distinguishable by more than colour, so the
   heading text states the verdict in words as well. */
.sel-result-head.sel-over::before,
.sel-result-head.sel-under::before {
    content: '\26A0\FE0E';
    margin-right: 0.5rem;
}

.sel-echo {
    margin: 0 0 1.25rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.sel-verdict-note {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    border-radius: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--hairline);
}

.sel-verdict-note p {
    margin: 0 0 0.7rem;
}

.sel-verdict-note p:last-child {
    margin-bottom: 0;
}

.sel-machine h4,
.sel-gap h4,
.sel-notes h4 {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
    color: var(--primary-text);
}

.sel-models {
    font-weight: 500;
    color: var(--text-secondary);
}

.sel-spec-table {
    width: 100%;
    margin: 0.9rem 0;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.sel-spec-table th,
.sel-spec-table td {
    padding: 0.55rem 0.6rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--hairline);
}

.sel-spec-table th {
    width: 42%;
    font-weight: 600;
    color: var(--text-primary);
}

.sel-spec-table td {
    color: var(--text-secondary);
}

.sel-more a {
    color: var(--primary-text);
    font-weight: 600;
}

.sel-gap,
.sel-notes {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
}

.sel-gap ul,
.sel-notes ul {
    margin: 0;
    padding-left: 1.2rem;
}

.sel-gap li,
.sel-notes li {
    margin-bottom: 0.6rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.sel-caveat {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* A wide spec table must scroll inside itself rather than pushing the page
   sideways on a phone. */
@media (max-width: 560px) {
    .sel-spec-table th {
        width: 50%;
    }
    .sel-result {
        padding: 1.1rem;
    }
}