/*
 * "Is this your channel?" (js/self_check.js) and the fix lines it adds to the
 * indicator rows.
 *
 * Closed, it is one line between the heart.id card and the gauge, the question as
 * a button, pulled a little closer to its neighbours: at 1280x800 the gauge has
 * under 40px to spare above the fold. Open, it moves under the gauge and stays
 * compact, so an owner still sees the score on a laptop's first screen. The move
 * is a flex order, not a second container: the column is a flex column
 * (main.css), and the calculator line goes last so it never splits the two.
 */

.results-side > .self-check-open {
    order: 1;
}

.results-side > .results-calculator {
    order: 2;
}

/* The owner's Aegis card (js/whats_next.js show_aegis) shows only with the checklist
   open, and follows it in document order: under the panel, above the calculator line.
   Below the gauge, so the score keeps its place above the fold. It wears the heart.id
   card's dress (main.css .whats-next), tightened as that card is beside the result. */

.results-side > .owner-offer {
    order: 1;
}

.owner-offer .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    padding: 1.125rem 1.25rem;
}

.owner-offer .whats-next-headline {
    margin-top: .375rem;
    font-size: 1.05rem;
    line-height: 1.3;
}

.owner-offer .whats-next-sub {
    margin: .375rem 0 .875rem;
}

.owner-offer .btn {
    width: 100%;
}

.self-check-closed {
    margin-block: -.25rem;
}

.self-check-ask {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    font: inherit;
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--text-muted);
    text-align: center;
    background: none;
    border: 0;
    cursor: pointer;
}

/* The one line is 19px tall. Its hit area reaches past it into the space around it,
   to 25px, and to 45px on a touch screen (WCAG 2.5.8), so the line itself does not
   move: above it is the card's padding, below it the gauge, neither of them a control. */
.self-check-ask::before {
    content: "";
    position: absolute;
    inset: -3px 0;
}

@media (pointer: coarse) {
    .self-check-ask::before {
        inset: -13px 0;
    }
}

.self-check-ask span {
    color: var(--brand);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
}

.self-check-ask:hover span {
    color: var(--brand-hover);
}

.self-check {
    padding: .875rem var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.self-check-owner {
    border-top: 4px solid var(--brand);
    box-shadow: var(--shadow-1);
}

.self-check-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.self-check-title {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
}

.self-check-text,
.self-check-note,
.self-check-limit,
.self-check-offer {
    margin: .25rem 0 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text-muted);
}

.self-check-note,
.self-check-limit {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.self-check-exit {
    flex-shrink: 0;
    padding: 0;
    font: inherit;
    font-size: var(--fs-xs);
    color: var(--brand);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
}

/* Check again and the channel count on one row; the count's question sits over its answers */
.self-check-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2) var(--space-3);
    margin-top: .625rem;
}

.self-check-channels-label {
    display: block;
    font-size: var(--fs-2xs);
    color: var(--text-subtle);
}

.self-check-choices {
    display: flex;
    gap: .375rem;
    padding-top: var(--space-1);
}

.self-check-choice {
    padding: .35rem .7rem;
    font: inherit;
    font-size: var(--fs-xs);
    line-height: 1.2;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
}

.self-check-choice:hover {
    background: var(--surface-2);
}

/* Pressed is more than a colour (WCAG 1.4.11): the chosen answer also gets a 2px ring in
   the text colour, a border plus an inset shadow so the pill keeps its size. In the light
   theme the accent fill is only 1.94:1 against the white unpressed pill; the ring is 3:1
   and more against both. */
.self-check-choice[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--text);
    box-shadow: inset 0 0 0 1px var(--text);
    color: var(--on-accent);
}

.self-check-offer a {
    color: var(--brand);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
}

/* the fix line under a fired indicator, owner mode only; spans the row's grid */
.indicator-fix {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text);
}