/**
 * Grill & Smoker Finder styles.
 * Mobile-first; scales up at 640px. Honors prefers-reduced-motion.
 *
 * All tokens and rules are scoped under .dqbq-gsf so other Destination BBQ
 * tools and global site chrome are unaffected.
 */

.dqbq-gsf {
    /* Surface: warmer cream so the tool separates from a white page */
    --gsf-paper: #faf5ee;
    /*
     * Borders started from the preferred #d8c9bb but were darkened to
     * #a08978 so UI-component edges meet WCAG 2.2 AA non-text contrast
     * (≥3:1) against both the cream Finder surface and white answer cards,
     * while staying a warm taupe rather than a heavy outline.
     */
    --gsf-line: #a08978;
    /* Answer cards stay white against the cream surface */
    --gsf-answer: #ffffff;
    --gsf-answer-border: #a08978;
    /* Selected answer: stronger than a faint radio alone */
    --gsf-selected-border: #b9402d;
    --gsf-selected-surface: #fff7f3;
    --gsf-accent: #b3402a;
    --gsf-accent-dark: #8f3221;
    --gsf-ink: #26221e;
    /* Secondary text: readable muted, not washed-out */
    --gsf-muted: #665e57;
    --gsf-focus: #1f5a96;
    /* Sticky site chrome clearance when scrolling the Finder into view (restart). */
    scroll-margin-top: 5.5rem;
    --gsf-focus-ring: 3px solid var(--gsf-focus);
    --gsf-focus-offset: 2px;
    box-sizing: border-box;
    max-width: 44rem;
    margin: 1.5rem auto;
    padding: 1.25rem;
    border: 1px solid var(--gsf-line);
    border-radius: 12px;
    background: var(--gsf-paper);
    color: var(--gsf-ink);
    font-size: 1rem;
    line-height: 1.55;
}

.dqbq-gsf *,
.dqbq-gsf *::before,
.dqbq-gsf *::after {
    box-sizing: inherit;
}

.dqbq-gsf__title {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--gsf-ink);
}

.dqbq-gsf__subtitle {
    margin: 0 0 1rem;
    color: var(--gsf-muted);
    font-size: 0.95rem;
}

.dqbq-gsf__visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* ---------- Question form ---------- */

.dqbq-gsf__progress {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--gsf-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.dqbq-gsf__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.dqbq-gsf__legend {
    padding: 0;
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--gsf-ink);
}

/* Programmatic focus target only (tabindex=-1); not in tab order. */
.dqbq-gsf__legend-text:focus {
    outline: none;
}

.dqbq-gsf__options {
    display: grid;
    gap: 0.5rem;
}

.dqbq-gsf__option {
    position: relative;
    display: flex;
    align-items: flex-start;
    border: 1px solid var(--gsf-answer-border);
    border-radius: 8px;
    background: var(--gsf-answer);
    /* Color/background only — no size change that would shift layout */
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.dqbq-gsf__option:hover {
    border-color: #8f7a68;
    background: #fffcf9;
}

.dqbq-gsf__option:active {
    border-color: #7a6758;
    background: #f7f1ea;
}

.dqbq-gsf__option-input {
    margin: 0.9rem 0 0.9rem 0.9rem;
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--gsf-selected-border);
}

.dqbq-gsf__option-label {
    display: block;
    width: 100%;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    color: var(--gsf-ink);
}

.dqbq-gsf__option-label--structured {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dqbq-gsf__option-label-text {
    font-weight: 600;
}

.dqbq-gsf__option-description {
    font-weight: 400;
    font-size: 0.95em;
    line-height: 1.35;
}

.dqbq-gsf__edit-note,
.dqbq-gsf__recovery-note {
    margin: 0.75rem 0 0;
    font-size: 0.95rem;
}

.dqbq-gsf__recovery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0;
}

.dqbq-gsf__option-input:checked + .dqbq-gsf__option-label {
    font-weight: 600;
}

.dqbq-gsf__option:has(.dqbq-gsf__option-input:checked) {
    border-color: var(--gsf-selected-border);
    background: var(--gsf-selected-surface);
    box-shadow: inset 0 0 0 1px var(--gsf-selected-border);
}

/* Hover must not erase a clear selected state */
.dqbq-gsf__option:has(.dqbq-gsf__option-input:checked):hover {
    border-color: var(--gsf-selected-border);
    background: #fff1eb;
    box-shadow: inset 0 0 0 1px var(--gsf-selected-border);
}

.dqbq-gsf__option:has(.dqbq-gsf__option-input:checked):active {
    border-color: var(--gsf-accent-dark);
    background: #ffe8df;
}

/* Focus on the whole answer row when the native control is keyboard-focused */
.dqbq-gsf__option:has(.dqbq-gsf__option-input:focus-visible) {
    outline: var(--gsf-focus-ring);
    outline-offset: var(--gsf-focus-offset);
}

.dqbq-gsf__option-input:focus {
    outline: none;
}

.dqbq-gsf__option-input:focus-visible {
    outline: none;
}

.dqbq-gsf__why-asked {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--gsf-muted);
}

.dqbq-gsf__why-asked summary,
.dqbq-gsf__answers summary,
.dqbq-gsf__safety-more summary,
.dqbq-gsf__used-inspection summary {
    cursor: pointer;
    color: var(--gsf-muted);
    font-weight: 600;
}

.dqbq-gsf__why-asked summary:hover,
.dqbq-gsf__answers summary:hover,
.dqbq-gsf__safety-more summary:hover,
.dqbq-gsf__used-inspection summary:hover {
    color: var(--gsf-ink);
}

.dqbq-gsf__why-asked summary:focus-visible,
.dqbq-gsf__answers summary:focus-visible,
.dqbq-gsf__safety-more summary:focus-visible,
.dqbq-gsf__used-inspection summary:focus-visible {
    outline: var(--gsf-focus-ring);
    outline-offset: var(--gsf-focus-offset);
    border-radius: 4px;
}

.dqbq-gsf__field-error {
    margin: 0.75rem 0 0;
    color: #a02020;
    font-weight: 600;
}

/* ---------- Navigation ---------- */

.dqbq-gsf__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.dqbq-gsf__nav-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.dqbq-gsf__nav-row .dqbq-gsf__btn--secondary[data-gsf-action="back"] {
    flex: 0 1 38%;
    min-width: 0;
    max-width: 40%;
}

.dqbq-gsf__nav-row .dqbq-gsf__btn--primary {
    flex: 1 1 62%;
    min-width: 0;
}

.dqbq-gsf__nav-row--solo .dqbq-gsf__btn--primary {
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
}

.dqbq-gsf__btn {
    font: inherit;
    padding: 0.65rem 1.15rem;
    min-height: 2.75rem;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-sizing: border-box;
}

.dqbq-gsf__btn-arrow {
    flex: 0 0 auto;
    line-height: 1;
}

.dqbq-gsf__btn-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dqbq-gsf__btn:focus-visible {
    outline: var(--gsf-focus-ring);
    outline-offset: var(--gsf-focus-offset);
}

/*
 * Primary Continue sits on a warm accent fill. A light halo keeps the blue
 * focus ring ≥3:1 against an adjacent light surface (cream/white), because
 * blue (#1f5a96) against the accent alone is only ~1.24:1.
 */
.dqbq-gsf__btn--primary:focus-visible {
    outline: var(--gsf-focus-ring);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px #ffffff;
}

.dqbq-gsf__btn--primary {
    background: var(--gsf-accent);
    color: #fff;
    font-weight: 600;
}

.dqbq-gsf__btn--primary:hover {
    background: var(--gsf-accent-dark);
}

.dqbq-gsf__btn--primary:active {
    background: #7a2b1c;
}

.dqbq-gsf__btn--primary:disabled,
.dqbq-gsf__btn--primary[disabled] {
    background: #c48a7d;
    color: #fff;
    cursor: not-allowed;
}

.dqbq-gsf__btn--secondary {
    background: var(--gsf-answer);
    border-color: var(--gsf-answer-border);
    color: var(--gsf-ink);
}

.dqbq-gsf__btn--secondary:hover {
    border-color: #8f7a68;
    background: #fffcf9;
}

.dqbq-gsf__btn--secondary:active {
    background: #f7f1ea;
    border-color: #7a6758;
}

/*
 * Disabled Back: programmatically disabled via the HTML disabled attribute.
 * Visual distinction uses muted ink + border (not opacity alone) so the label
 * stays readable while clearly inactive.
 */
.dqbq-gsf__btn--secondary:disabled,
.dqbq-gsf__btn--secondary[disabled] {
    background: #f3ebe3;
    border-color: #a08978;
    color: #5f5852;
    cursor: not-allowed;
    opacity: 1;
}

.dqbq-gsf__btn--link {
    background: none;
    border: none;
    color: var(--gsf-focus);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    padding: 0.65rem 0.5rem;
    min-height: 2.75rem;
}

.dqbq-gsf__btn--link:hover {
    color: #174878;
}

.dqbq-gsf__btn--link:active {
    color: #123a60;
}

.dqbq-gsf__btn--link:disabled,
.dqbq-gsf__btn--link[disabled] {
    color: #5f5852;
    cursor: not-allowed;
    text-decoration: none;
}

/*
 * Tertiary Start over — questions, results, and errors share this class.
 * Explicitly neutralize theme / global filled-button inheritance under .dqbq-gsf.
 */
.dqbq-gsf button.dqbq-gsf__btn.dqbq-gsf__btn--restart,
.dqbq-gsf .dqbq-gsf__btn--restart {
    align-self: center;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 0.65rem 0.75rem;
    min-height: 2.75rem;
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--gsf-muted);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.dqbq-gsf button.dqbq-gsf__btn.dqbq-gsf__btn--restart:hover,
.dqbq-gsf .dqbq-gsf__btn--restart:hover {
    background: transparent;
    background-color: transparent;
    color: var(--gsf-ink);
}

.dqbq-gsf button.dqbq-gsf__btn.dqbq-gsf__btn--restart:active,
.dqbq-gsf .dqbq-gsf__btn--restart:active {
    background: transparent;
    background-color: transparent;
    color: var(--gsf-ink);
}

.dqbq-gsf button.dqbq-gsf__btn.dqbq-gsf__btn--restart:focus-visible,
.dqbq-gsf .dqbq-gsf__btn--restart:focus-visible {
    outline: var(--gsf-focus-ring);
    outline-offset: var(--gsf-focus-offset);
    border-radius: 4px;
}

.dqbq-gsf button.dqbq-gsf__btn.dqbq-gsf__btn--restart:disabled,
.dqbq-gsf .dqbq-gsf__btn--restart:disabled,
.dqbq-gsf button.dqbq-gsf__btn.dqbq-gsf__btn--restart[disabled],
.dqbq-gsf .dqbq-gsf__btn--restart[disabled] {
    color: #5f5852;
    cursor: not-allowed;
    text-decoration: none;
    background: transparent;
}

.dqbq-gsf__btn--skip {
    align-self: center;
}

/* Result and card links */
.dqbq-gsf a {
    color: var(--gsf-focus);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.dqbq-gsf a:hover {
    color: #174878;
}

.dqbq-gsf a:focus-visible {
    outline: var(--gsf-focus-ring);
    outline-offset: var(--gsf-focus-offset);
    border-radius: 2px;
}

/* ---------- Result ---------- */

.dqbq-gsf__result-heading {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--gsf-ink);
}

/* Programmatic focus target only (tabindex=-1); not in tab order. */
.dqbq-gsf__result-heading:focus {
    outline: none;
}

.dqbq-gsf__badge {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.dqbq-gsf__badge--final {
    background: #e8f3e6;
    color: #235c2a;
}

.dqbq-gsf__badge--provisional {
    background: #fdf0dc;
    color: #7a5310;
}

.dqbq-gsf__result-summary {
    margin: 0 0 1rem;
}

.dqbq-gsf__card {
    border: 1px solid var(--gsf-answer-border);
    border-radius: 10px;
    background: var(--gsf-answer);
    padding: 1rem;
    margin: 0 0 1rem;
}

.dqbq-gsf__card-row {
    display: grid;
    gap: 1rem;
}

.dqbq-gsf__card-title {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
}

.dqbq-gsf__section-heading {
    margin: 0.9rem 0 0.3rem;
    font-size: 0.95rem;
}

.dqbq-gsf__card-summary {
    margin: 0;
}

.dqbq-gsf__card-list {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.dqbq-gsf__compromise {
    margin: 0;
    color: var(--gsf-muted);
}

.dqbq-gsf__alternative,
.dqbq-gsf__confirmations,
.dqbq-gsf__next-steps,
.dqbq-gsf__safety,
.dqbq-gsf__model-guidance,
.dqbq-gsf__gift {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: #f3ebe3;
    border: 1px solid var(--gsf-line);
}

.dqbq-gsf__alternative h4,
.dqbq-gsf__confirmations h4,
.dqbq-gsf__next-steps h4,
.dqbq-gsf__safety h4,
.dqbq-gsf__model-guidance h4,
.dqbq-gsf__gift h4 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
}

.dqbq-gsf__used-heading {
    margin: 0.75rem 0 0.35rem;
    font-size: 0.95rem;
}

.dqbq-gsf__used-note {
    margin: 0;
    color: var(--gsf-muted);
}

.dqbq-gsf__two-cooker-why {
    margin: 0.5rem 0 1rem;
    color: var(--gsf-muted);
}

.dqbq-gsf__alternative-name {
    margin: 0 0 0.25rem;
    font-weight: 700;
}

.dqbq-gsf__alternative-reason {
    margin: 0 0 0.25rem;
}

.dqbq-gsf__confirmations ul,
.dqbq-gsf__safety ul,
.dqbq-gsf__model-guidance-list,
.dqbq-gsf__two-cooker-jobs {
    margin: 0;
    padding-left: 1.2rem;
}

.dqbq-gsf__confirmations li,
.dqbq-gsf__safety li {
    margin-bottom: 0.35rem;
}

.dqbq-gsf__next-steps ol {
    margin: 0;
    padding-left: 1.2rem;
}

.dqbq-gsf__answers {
    margin: 0 0 1rem;
    font-size: 0.92rem;
}

.dqbq-gsf__answers-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.dqbq-gsf__answers-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--gsf-line);
}

.dqbq-gsf__answers-q {
    flex: 1 1 100%;
    color: var(--gsf-muted);
}

.dqbq-gsf__answers-a {
    font-weight: 600;
}

/* ---------- Compare layout ---------- */

.dqbq-gsf__compare {
    display: grid;
    gap: 1.25rem;
    margin: 1rem 0 1.25rem;
}

.dqbq-gsf__compare-column {
    padding: 0;
}

.dqbq-gsf__compare-column h4 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.dqbq-gsf__compare-column ul {
    margin: 0 0 0.75rem;
    padding-left: 1.15rem;
}

.dqbq-gsf__compare-column li {
    margin: 0.25rem 0;
}

.dqbq-gsf__gift ul {
    margin: 0.4rem 0 0;
    padding-left: 1.15rem;
}

.dqbq-gsf__shopping-cta {
    margin: 1rem 0 0.35rem;
}

.dqbq-gsf__shopping-cta a {
    font-weight: 600;
}

.dqbq-gsf__cta-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.25rem 0 0.5rem;
}

/*
 * Must beat `.dqbq-gsf a` (class + element), which otherwise forces blue
 * underlined link chrome onto these button-styled CTAs.
 */
.dqbq-gsf a.dqbq-gsf__cta,
.dqbq-gsf a.dqbq-gsf__cta:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dqbq-gsf a.dqbq-gsf__cta:focus-visible {
    outline: var(--gsf-focus-ring);
    outline-offset: var(--gsf-focus-offset);
}

.dqbq-gsf a.dqbq-gsf__cta--primary,
.dqbq-gsf a.dqbq-gsf__cta--primary:visited {
    padding: 0.7rem 1.1rem;
    background: var(--gsf-accent);
    border: 1px solid var(--gsf-accent);
    color: #fff;
}

.dqbq-gsf a.dqbq-gsf__cta--primary:hover,
.dqbq-gsf a.dqbq-gsf__cta--primary:focus-visible {
    background: var(--gsf-accent-dark);
    border-color: var(--gsf-accent-dark);
    color: #fff;
    text-decoration: none;
}

.dqbq-gsf a.dqbq-gsf__cta--primary:active {
    background: #7a2b1c;
    border-color: #7a2b1c;
    color: #fff;
}

.dqbq-gsf a.dqbq-gsf__cta--secondary,
.dqbq-gsf a.dqbq-gsf__cta--secondary:visited {
    padding: 0.55rem 0.95rem;
    background: var(--gsf-answer);
    border: 1px solid var(--gsf-answer-border);
    color: var(--gsf-ink);
}

.dqbq-gsf a.dqbq-gsf__cta--secondary:hover,
.dqbq-gsf a.dqbq-gsf__cta--secondary:focus-visible {
    border-color: var(--gsf-accent);
    color: var(--gsf-accent-dark);
    text-decoration: none;
}

.dqbq-gsf a.dqbq-gsf__cta--secondary:active {
    background: #f7f1ea;
    border-color: #7a6758;
    color: var(--gsf-ink);
}

.dqbq-gsf__result-link {
    margin: 0.85rem 0 0;
}

.dqbq-gsf__result-link a {
    color: var(--gsf-focus);
    font-weight: 600;
}

.dqbq-gsf__safety-more {
    margin-top: 0.75rem;
}

.dqbq-gsf__safety-more ul {
    margin: 0.5rem 0 0;
    padding-left: 1.15rem;
}

.dqbq-gsf__used-inspection {
    margin-top: 0.5rem;
}

.dqbq-gsf__used-inspection ul {
    margin: 0.5rem 0 0;
    padding-left: 1.15rem;
}

/* ---------- States ---------- */

.dqbq-gsf__loading,
.dqbq-gsf__noscript {
    padding: 1rem 0;
    color: var(--gsf-muted);
}

.dqbq-gsf__error {
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: #fbeeee;
    border: 1px solid #e5b9b4;
}

.dqbq-gsf__error p {
    margin: 0 0 0.5rem;
}

.dqbq-gsf__error p:last-child {
    margin-bottom: 0;
}

/* ---------- Larger screens ---------- */

@media (min-width: 640px) {
    .dqbq-gsf {
        padding: 1.75rem 2rem;
    }

    .dqbq-gsf__card-row {
        grid-template-columns: 1fr 1fr;
    }

    .dqbq-gsf__compare {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .dqbq-gsf__answers-q {
        flex: 1 1 55%;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .dqbq-gsf *,
    .dqbq-gsf *::before,
    .dqbq-gsf *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}