/* Design Press, the context panel: an optional brief for the roll.

   A bonus menu, so it carries no frame of its own: one toggle, and a rule to
   separate what it unfolds from the formula above. Closed, the press shows
   nothing but the toggle, the terms included. */

.context {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: clamp(12px, 2vw, 16px);
}

/* ---------- the brief itself ---------- */
.ctx-line {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding-bottom: 2px;
}

.ctx-lead {
    font-family: var(--fp-display);
    font-weight: 600;
    font-size: .58rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accentColor);
    opacity: .75;
    padding-top: 3px;
    user-select: none;
}

/* Caret drawn in CSS rather than a glyph, so it matches the play triangles
   elsewhere in the tool and rotates cleanly. */
.ctx-caret {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 3.5px 0;
    border-color: currentColor transparent transparent;
    transition: transform .26s cubic-bezier(.2, .85, .3, 1);
}

.ctx-open.open .ctx-caret {
    transform: rotate(180deg);
}

.ctx-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

/* Label stacked over the word, like a slot but without the box, so the terms
   stay legible as pairs while the region around them does the framing. */
.ctx-term {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ctx-term-head {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.ctx-term-label {
    font-family: var(--fp-display);
    font-weight: 500;
    font-size: .53rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fp-muted);
    white-space: nowrap;
    transition: color .15s;
}

.ctx-term:hover .ctx-term-label,
.ctx-term.locked .ctx-term-label {
    color: var(--accentColor);
}

.ctx-term .reel-window {
    margin-block: 0;
}

.ctx-term .word {
    font-size: .98rem;
    font-weight: 500;
    letter-spacing: .2px;
    line-height: 1.35;
    color: color-mix(in srgb, var(--textColor) 88%, transparent);
}

.ctx-term .lock {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
}

/* The magnifier is dead weight on a caption, so it only appears on approach.
   Focus counts as approach, otherwise it is unreachable by keyboard. */
.ctx-term .lookup {
    margin-left: 0;
    padding: 0;
    opacity: 0;
    transition: opacity .15s, color .15s;
}

.ctx-term:hover .lookup,
.ctx-term .lookup:focus-visible {
    opacity: 1;
}

.ctx-term .lookup svg {
    width: 11px;
    height: 11px;
}

/* ---------- the fold ---------- */
/* 0fr to 1fr animates to the panel's real height with no magic number, and the
   inner wrapper is what actually clips during the transition. */
.ctx-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .26s cubic-bezier(.2, .85, .3, 1);
}

.ctx-panel.open {
    grid-template-rows: 1fr;
}

/* overflow alone only clips the paint: the lock, word and lookup buttons inside
   stay in the tab order, so a keyboard would walk into controls nobody can see.
   visibility takes them out of it, delayed by the fold so it does not blank the
   panel mid-collapse, and dropped to zero delay on the way open. */
.ctx-panel-inner {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility 0s .26s;
}

/* The rule is the whole frame, in place of the outlined box: it separates the
   brief from the formula above and is drawn only while open, so a collapsed
   panel cannot leave a stray line behind. */
.ctx-panel.open .ctx-panel-inner {
    visibility: visible;
    transition-delay: 0s;
    border-top: 1px solid var(--fp-edge);
    padding-top: 12px;
}

/* ---------- the toggle ---------- */
/* The only context control on the press, and the only thing left of the whole
   feature while it is closed. */
.ctx-open {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--fp-ui);
    font-size: .62rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--fp-muted);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color .15s;
}

.ctx-open:hover,
.ctx-open.open {
    color: var(--accentColor);
}

/* A running session freezes the brief along with everything else. */
.press.locked-in .ctx-term .word,
.press.locked-in .ctx-term .lock {
    cursor: default;
}

.press.locked-in .ctx-open {
    pointer-events: none;
    opacity: .4;
}

@media (prefers-reduced-motion: reduce) {
    .ctx-panel,
    .ctx-caret {
        transition: none;
    }
}

@media (max-width: 560px) {
    .ctx-terms {
        gap: 8px 16px;
    }

    .ctx-term .word {
        font-size: .92rem;
    }

    /* No hover on touch, so the magnifiers would never be reachable. */
    .ctx-term .lookup {
        opacity: .55;
    }
}