/* ==========================================================================
   Quadrant Focus — [primer_quadrant_focus]
   One quadrant open at a time; the grid's tracks slide between states.
   Axes follow the primer convention: Individual top, Collective bottom,
   Interior left, Exterior right. Quadrant colors match the AQAL scenes.
   ========================================================================== */

.primer-qfocus {
    --qf-ul: #a15d48;
    --qf-ur: #537793;
    --qf-ll: #5f8d6d;
    --qf-lr: #8f7f4a;
    /* Darker variants for small text (>= 4.5:1 on the card and tints). */
    --qf-ul-ink: #8a4b39;
    --qf-ur-ink: #46667e;
    --qf-ll-ink: #4a7357;
    --qf-lr-ink: #6e6236;

    --qf-text: var(--primer-text, #1a1a2e);
    --qf-body: #3a3a4a;
    --qf-muted: var(--primer-text-muted, #5a5a6e);
    --qf-border: var(--primer-border, #e8e4dc);
    --qf-card: #ffffff;
    --qf-serif: var(--font-new, var(--primer-font-display, Georgia, serif));
    --qf-radius: 12px;
    --qf-dur: 520ms;
    --qf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    container-type: inline-size;
    margin: 2.5em 0;
    color: var(--qf-text);
}

.primer-qfocus *,
.primer-qfocus *::before,
.primer-qfocus *::after {
    box-sizing: border-box;
}

/* Breakout: widen past the ~780px primer column on wide screens
 * (same technique as .qe-explorer and .cd-eight-zones). */
@media (min-width: 1000px) {
    .primer-qfocus--breakout {
        --qf-w: min(1100px, calc(100vw - 40px));
        width: var(--qf-w);
        max-width: none;
        margin-left: calc((100% - var(--qf-w)) / 2);
        margin-right: calc((100% - var(--qf-w)) / 2);
    }
}

.primer-qfocus__cell--ul { --q: var(--qf-ul); --q-ink: var(--qf-ul-ink); --q-tint: rgba(161, 93, 72, 0.07); }
.primer-qfocus__cell--ur { --q: var(--qf-ur); --q-ink: var(--qf-ur-ink); --q-tint: rgba(83, 119, 147, 0.07); }
.primer-qfocus__cell--ll { --q: var(--qf-ll); --q-ink: var(--qf-ll-ink); --q-tint: rgba(95, 141, 109, 0.08); }
.primer-qfocus__cell--lr { --q: var(--qf-lr); --q-ink: var(--qf-lr-ink); --q-tint: rgba(143, 127, 74, 0.08); }

/* Editors only: shown when the block is missing quadrants. */
.primer-qfocus .primer-qfocus__notice {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: #fff6e5;
    border: 1px solid #e8c98a;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #6b4a12;
}

/* ---------- Head ---------- */

.primer-qfocus .primer-qfocus__head {
    max-width: 720px;
    margin: 0 auto 24px;
    text-align: center;
}

.primer-qfocus .primer-qfocus__heading {
    margin: 0 0 10px;
    font-family: var(--qf-serif);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--qf-text);
}

.primer-qfocus .primer-qfocus__intro {
    margin: 0 0 8px;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--qf-body);
}

.primer-qfocus .primer-qfocus__hint {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qf-muted);
}

/* ---------- Grid ---------- */

/* Axis labels and the 2x2 share one grid, so the labels track the rows
 * and columns as they resize. JS replaces these track sizes with measured
 * px values (same line names) so both axes can transition smoothly and
 * the overall height stays constant. */
.primer-qfocus__grid {
    display: grid;
    grid-template-columns: [lab-l] 30px [c1] 2.3fr [c2] 1fr [lab-r] 30px;
    grid-template-rows: [lab-t] auto [r1] auto [r2] auto [lab-b] auto;
    transition:
        grid-template-columns var(--qf-dur) var(--qf-ease),
        grid-template-rows var(--qf-dur) var(--qf-ease);
}

.primer-qfocus__grid[data-active="ur"],
.primer-qfocus__grid[data-active="lr"] {
    grid-template-columns: [lab-l] 30px [c1] 1fr [c2] 2.3fr [lab-r] 30px;
}

.primer-qfocus__grid.is-measuring {
    transition: none;
}

.primer-qfocus__frame {
    grid-column: c1 / lab-r;
    grid-row: r1 / lab-b;
    background: var(--qf-card);
    border: 1px solid var(--qf-border);
    border-radius: var(--qf-radius);
    box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 12px 32px rgba(26, 26, 46, 0.05);
}

.primer-qfocus__axis {
    align-self: center;
    justify-self: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--qf-muted);
    white-space: nowrap;
}

.primer-qfocus__axis--top    { grid-column: c1 / lab-r; grid-row: lab-t; padding-bottom: 14px; }
.primer-qfocus__axis--bottom { grid-column: c1 / lab-r; grid-row: lab-b; padding-top: 14px; }
.primer-qfocus__axis--left,
.primer-qfocus__axis--right {
    grid-row: r1 / lab-b;
    writing-mode: vertical-rl;
}
.primer-qfocus__axis--left  { grid-column: lab-l; transform: rotate(180deg); }
.primer-qfocus__axis--right { grid-column: lab-r; }

/* ---------- Cells ---------- */

.primer-qfocus__cell {
    position: relative;
    min-width: 0;
    min-height: 116px;
    padding: 22px 24px;
    overflow: hidden;
    transition: background-color var(--qf-dur) var(--qf-ease);
}

.primer-qfocus__cell--ul { grid-column: c1; grid-row: r1; border-right: 1px solid var(--qf-border); border-bottom: 1px solid var(--qf-border); border-top-left-radius: var(--qf-radius); }
.primer-qfocus__cell--ur { grid-column: c2; grid-row: r1; border-bottom: 1px solid var(--qf-border); border-top-right-radius: var(--qf-radius); }
.primer-qfocus__cell--ll { grid-column: c1; grid-row: r2; border-right: 1px solid var(--qf-border); border-bottom-left-radius: var(--qf-radius); }
.primer-qfocus__cell--lr { grid-column: c2; grid-row: r2; border-bottom-right-radius: var(--qf-radius); }

.primer-qfocus__cell.is-active {
    background: var(--q-tint);
}

.primer-qfocus__cell:not(.is-active):hover {
    background: rgba(26, 26, 46, 0.025);
}

/* ---------- Tab (the quadrant's header + trigger) ---------- */

.primer-qfocus .primer-qfocus__tab {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 4px;
    width: 100%;
    margin: -10px 0;
    padding: 10px 0;
    background: none;
    border: 0;
    border-radius: 4px;
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

/* A collapsed quadrant is clickable anywhere inside it. */
.primer-qfocus__cell:not(.is-active) .primer-qfocus__tab::after {
    content: '';
    position: absolute;
    inset: 0;
}

.primer-qfocus__cell.is-active .primer-qfocus__tab {
    cursor: default;
}

.primer-qfocus .primer-qfocus__tab:focus {
    outline: none;
}

.primer-qfocus .primer-qfocus__tab:focus-visible {
    outline: 2px solid var(--q-ink);
    outline-offset: 4px;
}

.primer-qfocus__pronoun {
    font-family: var(--qf-serif);
    font-size: 1.55rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    color: var(--q);
}

.primer-qfocus__pos {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--q-ink);
}

.primer-qfocus__label {
    grid-column: 1 / -1;
    font-family: var(--qf-serif);
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--qf-muted);
}

.primer-qfocus__cell.is-active .primer-qfocus__label {
    display: none;
}

/* ---------- Body (open quadrant only) ---------- */

.primer-qfocus__cell:not(.is-active) .primer-qfocus__body {
    display: none;
}

.primer-qfocus__body {
    margin-top: 14px;
}

/* Fades in as the quadrant opens; JS adds .is-entering on selection only,
 * so re-measuring on resize never replays it. */
.primer-qfocus__cell.is-entering .primer-qfocus__body {
    animation: primer-qfocus-in var(--qf-dur) var(--qf-ease) 90ms both;
}

@keyframes primer-qfocus-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.primer-qfocus .primer-qfocus__title {
    margin: 0 0 14px;
    font-family: var(--qf-serif);
    font-size: clamp(1.45rem, 2.4vw, 1.95rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--qf-text);
}

.primer-qfocus .primer-qfocus__text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--qf-body);
}

.primer-qfocus .primer-qfocus__text p {
    margin: 0 0 0.9em;
}

.primer-qfocus .primer-qfocus__text > :last-child {
    margin-bottom: 0;
}

.primer-qfocus .primer-qfocus__note {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--qf-border);
}

.primer-qfocus .primer-qfocus__note-label {
    margin: 0 0 6px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--qf-muted);
}

.primer-qfocus .primer-qfocus__note-text {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--qf-body);
}

/* ---------- Narrow: compact 2x2 map, open quadrant in a card below ---------- */

@container (max-width: 560px) {
    .primer-qfocus__grid {
        /* Read by JS: skip measured sizing in this layout. */
        --qf-narrow: 1;
        grid-template-columns: [lab-l] 22px [c1] 1fr [c2] 1fr [lab-r] 22px;
        grid-template-rows: [lab-t] auto [r1] auto [r2] auto [lab-b] auto [panel] auto;
    }

    .primer-qfocus__grid[data-active="ur"],
    .primer-qfocus__grid[data-active="lr"] {
        grid-template-columns: [lab-l] 22px [c1] 1fr [c2] 1fr [lab-r] 22px;
    }

    .primer-qfocus__cell {
        display: contents;
    }

    /* Stack pronoun, position, and label so "Lower Left" never wraps
     * beside the pronoun in a narrow cell. */
    .primer-qfocus .primer-qfocus__tab {
        position: relative;
        grid-template-columns: 1fr;
        row-gap: 3px;
        align-content: start;
        min-height: 92px;
        margin: 0;
        padding: 14px;
        border-radius: 0;
        transition: background-color var(--qf-dur) var(--qf-ease);
    }

    .primer-qfocus__cell--ul .primer-qfocus__tab { grid-column: c1; grid-row: r1; border-right: 1px solid var(--qf-border); border-bottom: 1px solid var(--qf-border); border-top-left-radius: var(--qf-radius); }
    .primer-qfocus__cell--ur .primer-qfocus__tab { grid-column: c2; grid-row: r1; border-bottom: 1px solid var(--qf-border); border-top-right-radius: var(--qf-radius); }
    .primer-qfocus__cell--ll .primer-qfocus__tab { grid-column: c1; grid-row: r2; border-right: 1px solid var(--qf-border); border-bottom-left-radius: var(--qf-radius); }
    .primer-qfocus__cell--lr .primer-qfocus__tab { grid-column: c2; grid-row: r2; border-bottom-right-radius: var(--qf-radius); }

    .primer-qfocus__cell.is-active .primer-qfocus__tab {
        background: var(--q-tint);
    }

    .primer-qfocus__cell:not(.is-active) .primer-qfocus__tab:hover {
        background: rgba(26, 26, 46, 0.025);
    }

    .primer-qfocus__cell:not(.is-active) .primer-qfocus__tab::after {
        content: none;
    }

    .primer-qfocus .primer-qfocus__tab:focus-visible {
        outline-offset: -3px;
    }

    .primer-qfocus__pronoun {
        font-size: 1.35rem;
    }

    .primer-qfocus__label,
    .primer-qfocus__cell.is-active .primer-qfocus__label {
        display: block;
        font-size: 0.95rem;
    }

    .primer-qfocus__body {
        grid-column: c1 / lab-r;
        grid-row: panel;
        margin-top: 16px;
        padding: 20px 18px;
        background: var(--qf-card);
        border: 1px solid var(--qf-border);
        border-top: 3px solid var(--q);
        border-radius: var(--qf-radius);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .primer-qfocus__grid,
    .primer-qfocus__cell,
    .primer-qfocus .primer-qfocus__tab {
        transition: none;
    }

    .primer-qfocus__cell.is-entering .primer-qfocus__body {
        animation: none;
    }
}