/* ============================================================
 * GLOBAL MATCH LAYOUT
 * ============================================================ */

.gbi-match {
    width: 100%;
}

.gbi-match .gbi-match__header {
    margin-bottom: 32px;
}

.gbi-match .gbi-match__title {
    margin-bottom: 8px;
}

.gbi-match .gbi-match__intro {
    margin-bottom: 0;
}


/* ============================================================
 * WORKSPACE
 *
 * Desktop:
 * questions left / live ranking right
 * ============================================================ */

.gbi-match .gbi-match__workspace {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, 0.65fr);
    gap: 48px;
    align-items: start;
}

.gbi-match .gbi-match__quiz-column,
.gbi-match .gbi-match__ranking-column {
    min-width: 0;
}

.gbi-match .gbi-match__ranking-column .gbi-match__results-container {
    position: static;
    top: var(--gbi-match-sticky-top, var(--gbi-match-measured-top, 32px));
}


/* Stretch the containing aside so a sticky child can follow the quiz column. */
@media (min-width: 901px) {
    .gbi-match .gbi-match__ranking-column { align-self: stretch; }
    .gbi-match .gbi-match__ranking-column .gbi-match__results-container { position: sticky; }
}

/* ============================================================
 * FIXED QUESTIONS
 * ============================================================ */

.gbi-match .gbi-match__question {
    margin-bottom: 36px;
}

.gbi-match .gbi-match__question-heading {
    position: relative;
}

.gbi-match .gbi-match__question-title {
    margin-top: 0;
    margin-bottom: 8px;
}

.gbi-match .gbi-match__question-intro {
    margin-top: 0;
    margin-bottom: 0;
}


/* ============================================================
 * STEP INDICATOR
 * ============================================================ */

.gbi-match .gbi-match__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    margin-bottom: 10px;

    border-radius: 50%;
    background: #e9eef4;

    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}


/*
 * Answered questions use a checkmark instead
 * of their step number.
 */
.gbi-match .gbi-match__question.is-answered .gbi-match__step,
.gbi-match .gbi-match__adaptive-item.is-answered .gbi-match__step {
    font-size: 0;
}

.gbi-match .gbi-match__question.is-answered .gbi-match__step::after,
.gbi-match .gbi-match__adaptive-item.is-answered .gbi-match__step::after {
    content: "\2713";
    font-size: 0.9rem;
}


/* ============================================================
 * ANSWER CARDS
 * ============================================================ */

.gbi-match .gbi-match__answers {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.gbi-match .gbi-match__answer {
    appearance: none;

    width: 100%;
    padding: 16px 18px;

    text-align: left;

    background: #ffffff;
    color: inherit;

    border: 1px solid #d8dee6;
    border-radius: 10px;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.gbi-match .gbi-match__answer:hover {
    border-color: #0873ce;
}

.gbi-match .gbi-match__answer:focus-visible {
    outline: 2px solid #0873ce;
    outline-offset: 2px;
}

.gbi-match .gbi-match__answer.is-selected {
    border-color: #0873ce;
    background: #f2f8fd;
    box-shadow: 0 0 0 1px #0873ce;
}

.gbi-match .gbi-match__answer-title {
    display: block;
    font-weight: 700;
}

.gbi-match .gbi-match__answer-text {
    display: block;

    margin-top: 5px;

    font-weight: 400;
    line-height: 1.45;

    opacity: 0.78;
}


/*
 * An answered question can be reopened for editing.
 * While editing, show its answer options again.
 */
.gbi-match .gbi-match__question.is-answered.is-editing .gbi-match__answers,
.gbi-match .gbi-match__adaptive-item.is-answered.is-editing .gbi-match__answers {
    display: grid;
}


/*
 * Adaptive answers use the same horizontal layout
 * while an answered adaptive question is being edited.
 */
.gbi-match .gbi-match__adaptive-item.is-answered.is-editing
.gbi-match__answers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.gbi-match .gbi-match__adaptive-item.is-answered.is-editing
.gbi-match__answer {
    width: auto;
    min-width: 130px;
    flex: 1 1 130px;
    text-align: center;
}

/* ============================================================
 * ANSWERED QUESTIONS
 *
 * Once answered, a question becomes a compact summary.
 * ============================================================ */

.gbi-match .gbi-match__question.is-answered,
.gbi-match .gbi-match__adaptive-item.is-answered {
    padding: 16px 18px;
    margin-bottom: 16px;

    border: 1px solid #e1e5e9;
    border-radius: 10px;

    background: #fafbfc;
}


/*
 * The answer buttons themselves are no longer needed once
 * a question has been answered.
 */
.gbi-match .gbi-match__question.is-answered .gbi-match__answers,
.gbi-match .gbi-match__adaptive-item.is-answered .gbi-match__answers {
    display: none;
}


/*
 * Introductory explanatory copy is useful while answering,
 * but unnecessary in the compact history.
 */
.gbi-match .gbi-match__question.is-answered .gbi-match__question-intro {
    display: none;
}


.gbi-match .gbi-match__question.is-answered .gbi-match__question-title,
.gbi-match .gbi-match__adaptive-item.is-answered .gbi-match__question-title {
    margin-bottom: 2px;
    font-size: 1rem;
}


/*
 * Answered questions are interactive: clicking the compact
 * card reopens the question.
 */
.gbi-match .gbi-match__question.is-answered,
.gbi-match .gbi-match__adaptive-item.is-answered {
    cursor: pointer;
}

.gbi-match .gbi-match__question.is-answered:hover,
.gbi-match .gbi-match__adaptive-item.is-answered:hover {
    border-color: #b8c3cf;
}


/* ============================================================
 * ADAPTIVE QUESTION AREA
 * ============================================================ */

.gbi-match .gbi-match__question--adaptive {
    margin-top: 24px;
    margin-bottom: 0;
}


/*
 * The outer adaptive section is only a container.
 * It should not look like a question itself.
 */
.gbi-match .gbi-match__question--adaptive:not(.is-answered) {
    padding: 0;
    border: 0;
    background: transparent;
}


/*
 * Each generated adaptive question gets its own item.
 */
.gbi-match .gbi-match__adaptive-item {
    margin-bottom: 24px;
}


/*
 * The current unanswered adaptive question receives
 * a stronger card treatment.
 */
.gbi-match .gbi-match__adaptive-item:not(.is-answered) {
    padding: 22px;

    border: 1px solid #d8dee6;
    border-radius: 12px;

    background: #ffffff;
}


/*
 * Adaptive answers are short, so they can sit next
 * to one another instead of becoming large rows.
 */
.gbi-match .gbi-match__adaptive-item:not(.is-answered)
.gbi-match__answers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 18px;
}

.gbi-match .gbi-match__adaptive-item:not(.is-answered)
.gbi-match__answer {
    width: auto;
    min-width: 130px;
    flex: 1 1 130px;
    text-align: center;
}


/* ============================================================
 * LIVE RANKING PANEL
 * ============================================================ */

.gbi-match .gbi-match__live-ranking {
    padding: 24px;

    border: 1px solid #e1e5e9;
    border-radius: 12px;

    background: #ffffff;
}

.gbi-match .gbi-match__results-heading {
    margin-bottom: 20px;
}

.gbi-match .gbi-match__results-title {
    margin-top: 0;
    margin-bottom: 6px;
}

.gbi-match .gbi-match__results-intro {
    margin-top: 0;
    margin-bottom: 0;

    font-size: 0.9rem;
    line-height: 1.45;
}


/* ============================================================
 * LIVE RANKING ROWS
 * ============================================================ */

.gbi-match .gbi-match__ranking-list {
    display: grid;
    gap: 13px;

    margin-top: 20px;
}

.gbi-match .gbi-match__ranking-row {
    display: grid;

    grid-template-columns:
        24px
        minmax(0, 1fr);

    gap: 9px;
    align-items: center;
}

.gbi-match .gbi-match__ranking-name {
    min-width: 0;

    font-weight: 600;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
 * STATUS / LOADING
 * ============================================================ */

.gbi-match.is-loading {
    cursor: progress;
}

.gbi-match.is-loading button {
    cursor: wait;
}

.gbi-match .gbi-match__status {
    margin-top: 20px;
}


/* ============================================================
 * FINAL CARDS
 * ============================================================ */

.gbi-match .gbi-match__result-list {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
    align-items: end;

    margin-top: 32px;
}

.gbi-match .gbi-match__result {
    padding: 24px;

    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;

    background: #ffffff;
}

.gbi-match .gbi-match__result-rank {
    margin-bottom: 12px;

    font-size: 1.25rem;
    font-weight: 700;
}

.gbi-match .gbi-match__result-name {
    margin-top: 0;
}

.gbi-match .gbi-match__result-link {
    display: inline-block;
    margin-top: 18px;
}


/* ============================================================
 * TABLET / NARROW DESKTOP
 * ============================================================ */

@media (max-width: 900px) {

    .gbi-match .gbi-match__workspace {
        display: block;
    }

    .gbi-match .gbi-match__ranking-column {
        margin-top: 32px;
    }

    .gbi-match .gbi-match__ranking-column
    .gbi-match__results-container {
        position: static;
    }
}


/* ============================================================
 * MOBILE
 * ============================================================ */

@media (max-width: 767px) {

    .gbi-match .gbi-match__header {
        margin-bottom: 24px;
    }

    .gbi-match .gbi-match__question {
        margin-bottom: 28px;
    }

    .gbi-match .gbi-match__question.is-answered,
    .gbi-match .gbi-match__adaptive-item.is-answered {
        padding: 14px 16px;
    }

    .gbi-match .gbi-match__adaptive-item:not(.is-answered) {
        padding: 18px;
    }

    .gbi-match .gbi-match__adaptive-item:not(.is-answered)
    .gbi-match__answers {
        display: grid;
    }

    .gbi-match .gbi-match__adaptive-item:not(.is-answered)
    .gbi-match__answer {
        width: 100%;
        min-width: 0;
    }



    .gbi-match .gbi-match__result-list {
        display: flex;
        flex-direction: column;
    }

    .gbi-match .gbi-match__result {
        width: 100%;
    }
}

/* Native edit control shares the existing card click behaviour. */
.gbi-match .gbi-match__edit {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.gbi-match .gbi-match__edit:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Canonical presentation: all positions use the same card treatment. */
.gbi-match .gbi-match__canonical .gbi-match__result-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    margin-top: 20px;
}
.gbi-match .gbi-match__canonical .gbi-match__result {
    padding: 20px;
    transform: none;
    order: 0;
    width: auto;
}
.gbi-match .gbi-match__canonical .gbi-match__ranking-row {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: baseline;
}
.gbi-match .gbi-match__canonical .gbi-match__ranking-name {
    white-space: normal;
    overflow: visible;
    margin: 0;
    font-size: 1rem;
}
.gbi-match .gbi-match__canonical .gbi-match__result-rank { margin: 0 0 6px; font-size: 1rem; }
.gbi-match .gbi-match__canonical .gbi-match__result-name { margin: 0 0 6px; font-size: 1.25rem; }
.gbi-match .gbi-match__family { margin: 0 0 12px; font-weight: 600; font-size: 0.9rem; }
.gbi-match .gbi-match__description { margin: 0; font-size: 0.95rem; line-height: 1.6; }
.gbi-match .gbi-match__tie-notice { margin: 16px 0 0; font-size: 0.9rem; line-height: 1.5; }
.gbi-match .gbi-match__why { margin-top: 18px; border-top: 1px solid #d8dee6; padding-top: 12px; }
.gbi-match .gbi-match__why summary { cursor: pointer; font-weight: 600; }
.gbi-match .gbi-match__why summary:focus-visible { outline: 2px solid #0873ce; outline-offset: 4px; }
.gbi-match .gbi-match__why ul { margin: 12px 0 0; padding-left: 20px; }
.gbi-match .gbi-match__reason { margin-bottom: 8px; line-height: 1.5; }
.gbi-match .gbi-match__why p { margin-top: 12px; }
.gbi-match .gbi-match__restart { margin-top: 24px; padding: 10px 16px; cursor: pointer; }
.gbi-match .gbi-match__restart:focus-visible { outline: 2px solid #0873ce; outline-offset: 3px; }

/* Question help and compact history share the existing answer/edit states. */
.gbi-match .gbi-match__title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.gbi-match .gbi-match__title-row .gbi-match__question-title { flex: 1; min-width: 0; }
.gbi-match .gbi-match__help-toggle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 28px;
    width: 28px;
    min-height: 28px;
    padding: 0;
    border: 1px solid #b8c3cf;
    border-radius: 50%;
    background: #fff;
    color: #25557c;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}
.gbi-match .gbi-match__help-toggle:focus-visible {
    outline: 2px solid #0873ce;
    outline-offset: 3px;
}
.gbi-match .gbi-match__question-help {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-left: 3px solid #b8c3cf;
    color: #354554;
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: text;
}
.gbi-match .gbi-match__question-help[hidden] { display: none; }
.gbi-match .gbi-match__question.is-answered:not(.is-editing),
.gbi-match .gbi-match__adaptive-item.is-answered:not(.is-editing) {
    padding: 8px 12px;
    margin-bottom: 8px;
}
.gbi-match .is-answered:not(.is-editing) > .gbi-match__question-heading {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 8px;
    align-items: baseline;
}
.gbi-match .is-answered:not(.is-editing) > .gbi-match__question-heading > .gbi-match__step {
    width: 20px;
    height: 20px;
    margin: 0;
    background: transparent;
}
.gbi-match .is-answered:not(.is-editing) .gbi-match__title-row .gbi-match__question-title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}
.gbi-match .is-answered:not(.is-editing) .gbi-match__question-help,
.gbi-match .gbi-match__answer-summary { grid-column: 2; }
.gbi-match .gbi-match__answer-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    font-size: 0.9rem;
    line-height: 1.4;
}
.gbi-match .gbi-match__selected-label { font-weight: 600; }
.gbi-match .gbi-match__answer-summary .gbi-match__edit::before {
    content: "\00b7";
    display: inline-block;
    margin-right: 8px;
}
.gbi-match .is-editing .gbi-match__selected-label { display: none; }
.gbi-match .is-editing .gbi-match__edit::before { content: none; }
.gbi-match .gbi-match__update-notice {
    margin: 0 0 8px;
    padding: 8px 12px;
    background: #f2f8fd;
    border-left: 3px solid #0873ce;
    color: #354554;
    font-size: 0.9rem;
    line-height: 1.5;
}
.gbi-match .is-stale .gbi-match__update-notice {
    border-color: #9a5a00;
    background: #fff6e8;
}
.gbi-match .gbi-match__announcement {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Optional results choice; the current question remains available. */
.gbi-match .gbi-match__exit-choice { margin: 1rem 0; padding: 1rem; border: 1px solid #d8ded8; border-radius: 8px; }
.gbi-match .gbi-match__exit-choice p { margin: 0 0 .75rem; }
.gbi-match .gbi-match__exit-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.gbi-match .gbi-match__exit-actions button { min-height: 44px; white-space: normal; }
.gbi-match .gbi-match__exit-actions button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Explicit comparison context; remains in normal document flow. */
.gbi-match .gbi-match__scope {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
}
.gbi-match .gbi-match__scope p { margin: 0.5rem 0; }
.gbi-match .gbi-match__scope:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Equal choices use the existing native button actions. */
.gbi-match .gbi-match__scope--choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
}
.gbi-match .gbi-match__scope-choice {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0.875rem 1rem;
    text-align: left;
    white-space: normal;
}
.gbi-match .gbi-match__scope-choice:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}
.gbi-match .gbi-match__scope-choice:only-child { grid-column: 1 / -1; }
@media (max-width: 600px) {
    .gbi-match .gbi-match__scope--choices { grid-template-columns: minmax(0, 1fr); }
}

/* Answer importance changes the budget, not the answer path. */
.gbi-match .gbi-match__adaptive-item.is-important {
    box-shadow: inset 4px 0 0 #b8860b;
    background-color: #fff8e7;
}
.gbi-match .gbi-match__important[aria-pressed="true"] {
    font-weight: 700;
}