/* ================================================================
   Support / contact form
   ================================================================ */

.support-container {
    max-width: var(--toddyi-size-640px);
    margin: 0 auto;
}

.support-icon {
    font-size: var(--toddyi-size-1-6rem);
}

.support-intro {
    color: var(--text-muted);
    font-size: var(--toddyi-size-0-93rem);
    line-height: 1.8;
    margin-bottom: var(--toddyi-size-28px);
    border-bottom: var(--toddyi-size-1px) solid var(--border);
    padding-bottom: var(--toddyi-size-20px);
}

.support-form {
    display: flex;
    flex-direction: column;
    gap: var(--toddyi-size-18px);
}

.support-field {
    display: flex;
    flex-direction: column;
    gap: var(--toddyi-size-6px);
}

.support-field label {
    font-size: var(--toddyi-size-0-85rem);
    font-weight: 600;
    color: var(--text);
}

.support-field input,
.support-field select,
.support-field textarea {
    width: var(--toddyi-size-100pct);
    padding: var(--toddyi-size-10px) var(--toddyi-size-12px);
    border: var(--toddyi-size-1px) solid var(--border);
    border-radius: var(--toddyi-size-10px);
    font: inherit;
    font-size: var(--toddyi-size-0-95rem);
    background: white;
    color: var(--text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.support-field input:focus,
.support-field select:focus,
.support-field textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) var(--toddyi-size-50pct), white);
    box-shadow: 0 0 0 var(--toddyi-size-3px) color-mix(in srgb, var(--primary) var(--toddyi-size-12pct), transparent);
}

.support-field textarea {
    resize: vertical;
    min-height: var(--toddyi-size-140px);
}

.support-honeypot {
    position: absolute;
    left: var(--toddyi-size-neg-9999px);
    width: var(--toddyi-size-1px);
    height: var(--toddyi-size-1px);
    opacity: 0;
    pointer-events: none;
}

.support-submit {
    align-self: flex-start;
    margin-top: var(--toddyi-size-4px);
}

.support-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.support-feedback {
    margin-top: var(--toddyi-size-20px);
    padding: var(--toddyi-size-14px) var(--toddyi-size-16px);
    border-radius: var(--toddyi-size-10px);
    font-size: var(--toddyi-size-0-92rem);
    line-height: 1.6;
}

.support-feedback--success {
    background: color-mix(in srgb, var(--success, var(--toddyi-support-success)) var(--toddyi-size-12pct), white);
    border: var(--toddyi-size-1px) solid color-mix(in srgb, var(--success, var(--toddyi-support-success)) 35%, white);
    color: var(--text);
}

.support-feedback--error {
    background: color-mix(in srgb, var(--error, var(--toddyi-support-error)) 10%, white);
    border: var(--toddyi-size-1px) solid color-mix(in srgb, var(--error, var(--toddyi-support-error)) 30%, white);
    color: var(--text);
}

.support-fallback {
    margin-top: var(--toddyi-size-24px);
    padding-top: var(--toddyi-size-20px);
    border-top: var(--toddyi-size-1px) solid var(--border);
    font-size: var(--toddyi-size-0-85rem);
    color: var(--text-muted);
    line-height: 1.7;
}

.support-fallback a {
    color: var(--primary);
}

.footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--toddyi-size-12px);
    justify-content: center;
    margin-top: var(--toddyi-size-32px);
}

/* ===== Linux install guide =====
 * One block of commands per distribution, collapsed so the page is a list of
 * distributions rather than a wall of shell. (#329) */
.linux-guide__intro,
.linux-guide__note {
    max-width: 68ch;
    color: var(--text-muted);
    line-height: 1.75;
}

.linux-family {
    margin-top: var(--toddyi-size-24px);
}

.linux-family__name {
    margin: 0 0 var(--toddyi-size-8px);
}

.linux-release {
    border-bottom: var(--toddyi-size-1px) solid var(--border);
}

.linux-release__summary {
    padding: var(--toddyi-size-10px) 0;
    cursor: pointer;
}

/* The commands are the one thing on this page that must not be reflowed: a
   wrapped shell line is a line someone pastes in two halves. */
.linux-release__commands {
    margin: 0 0 var(--toddyi-size-10px);
    padding: var(--toddyi-size-16px);
    border-radius: var(--toddyi-size-8px);
    overflow-x: auto;
    white-space: pre;
}