/* Study cards (cards.js). Inside the panel every colour is a custom property set in the inline style of
   <div id="ann-cards" class="sim-panel">, in GitHub's dark palette; sim-theme.js rewrites that style
   to the light palette when the page is light, so no rule of the panel names a colour of its own.
   The only colours written here are those of the key in the page text, at the end. */

.ac {
    font-size: .74rem;
    line-height: 1.45;
    color: var(--ac-fg);
    background: var(--ac-bg);
    border-radius: 12px;
    padding: 1rem 1.1rem 1.1rem;
    margin: 1.4em 0;
}

.ac-k-d { --ac-k: var(--ac-d); }
.ac-k-a { --ac-k: var(--ac-a); }
.ac-k-t { --ac-k: var(--ac-t); }
.ac-k-e { --ac-k: var(--ac-e); }
.ac-k-g { --ac-k: var(--ac-g); }

.md-typeset .ac button { font: inherit; color: inherit; }
.md-typeset .ac p { margin: 0; }
.ac kbd {
    font: inherit; font-size: .6rem; padding: 0 .3em; margin-left: .45em;
    border: 1px solid currentColor; border-radius: .2rem; opacity: .65;
    background: transparent; box-shadow: none; color: inherit;
}
.ac button:focus-visible, .ac .ac-card:focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 2px; }

/* ─── modes ─── */
.ac-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .85rem; }
.ac-tab {
    display: flex; flex-direction: column; gap: .1rem; text-align: left;
    padding: .6rem .8rem; border: 1px solid var(--ac-line); border-radius: .5rem;
    background: var(--ac-card); cursor: pointer;
}
.ac-tab strong { font-size: .85rem; color: var(--ac-strong); }
.ac-tab span { color: var(--ac-muted); font-size: .66rem; }
.ac-tab[aria-selected="true"] { border-color: var(--ac-focus); box-shadow: inset 0 -3px 0 var(--ac-focus); }

/* ─── filters ─── */
.ac-filters { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .9rem; }
.ac-row { display: flex; align-items: flex-start; gap: .5rem; }
.ac-label {
    flex: none; min-width: 4.6rem; padding-top: .2rem;
    font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ac-muted);
}
.ac-chips { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.ac-chip {
    padding: .15rem .55rem; border: 1px solid var(--ac-line); border-radius: 1rem;
    background: var(--ac-card); cursor: pointer; font-size: .66rem; line-height: 1.5;
}
.ac-chip:hover { border-color: var(--ac-muted); }
.ac-chip-n { min-width: 1.9rem; padding: .15rem .35rem; text-align: center; font-variant-numeric: tabular-nums; }
.ac-chip[aria-pressed="true"] { background: var(--ac-strong); color: var(--ac-bg) !important; border-color: var(--ac-strong); }
.ac-chip[class*="ac-k-"] { color: var(--ac-k) !important; border-color: var(--ac-k); }
.ac-chip[class*="ac-k-"][aria-pressed="true"] { background: var(--ac-k); color: var(--ac-bg) !important; }
.ac-count { font-size: .62rem; color: var(--ac-muted); }

/* ─── progress (three boxes) ─── */
.ac-progress { margin-bottom: .85rem; }
.ac-bar { display: flex; height: .45rem; border-radius: .3rem; overflow: hidden; background: var(--ac-card2); }
.ac-seg { transition: width .3s; }
.ac-seg1 { background: var(--ac-bad); }
.ac-seg2 { background: var(--ac-mid); }
.ac-seg3 { background: var(--ac-ok); }
.ac-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .3rem; font-size: .62rem; color: var(--ac-muted); }
.ac-l::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .35em; vertical-align: .05em; }
.ac-l1::before { background: var(--ac-bad); }
.ac-l2::before { background: var(--ac-mid); }
.ac-l3::before { background: var(--ac-ok); }
.ac-l0::before { background: var(--ac-line); }

/* ─── the card that flips ─── */
.ac-stage { display: flex; justify-content: center; perspective: 1400px; }
.ac-card { width: 100%; max-width: 34rem; cursor: pointer; outline: none; border-radius: .8rem; }
.ac-turn { display: grid; transition: transform .5s; transform-style: preserve-3d; }
.ac-card.is-flipped .ac-turn { transform: rotateY(180deg); }
.ac-face {
    grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 15rem;
    border: 2px solid var(--ac-k); border-radius: .8rem; overflow: hidden;
    background: var(--ac-card); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ac-back { transform: rotateY(180deg); background: linear-gradient(color-mix(in srgb, var(--ac-k) 9%, transparent), color-mix(in srgb, var(--ac-k) 9%, transparent)), var(--ac-card); }
.ac-band {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .35rem .8rem; background: var(--ac-k); color: var(--ac-bg);
    font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.ac-ch { padding: 0 .4rem; border: 1px solid currentColor; border-radius: .3rem; letter-spacing: .02em; white-space: nowrap; }
.ac-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .45rem; padding: 1rem 1.3rem; }
.md-typeset .ac .ac-question { font-size: .98rem; font-weight: 600; line-height: 1.38; text-align: center; color: var(--ac-strong); }
.md-typeset .ac .ac-name { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-k); }
.md-typeset .ac .ac-answer { font-size: .8rem; line-height: 1.5; }
.ac-foot {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .4rem .8rem; border-top: 1px solid var(--ac-line); font-size: .62rem; color: var(--ac-muted);
}
.ac-level { letter-spacing: .04em; white-space: nowrap; }
.ac-foot a { font-weight: 600; text-align: right; }
@media (prefers-reduced-motion: reduce) { .ac-turn { transition: none; } }

/* ─── buttons ─── */
.ac-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .9rem; }
.ac-bt {
    padding: .45rem 1rem; border: 1px solid var(--ac-line); border-radius: .4rem;
    background: var(--ac-card); cursor: pointer; font-weight: 600;
}
.ac-bt:hover { border-color: var(--ac-muted); }
.md-typeset .ac .ac-bt-main { background: var(--ac-main); border-color: var(--ac-main); color: var(--ac-bg); }
.ac-bt-main:hover { filter: brightness(1.08); }
.ac-rate { min-width: 7rem; }
.md-typeset .ac .ac-missed { color: var(--ac-bad); border-color: var(--ac-bad); background: color-mix(in srgb, var(--ac-bad) 12%, var(--ac-card)); }
.md-typeset .ac .ac-almost { color: var(--ac-mid); border-color: var(--ac-mid); background: color-mix(in srgb, var(--ac-mid) 12%, var(--ac-card)); }
.md-typeset .ac .ac-got { color: var(--ac-ok); border-color: var(--ac-ok); background: color-mix(in srgb, var(--ac-ok) 12%, var(--ac-card)); }
.ac-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin-top: .6rem; }
.md-typeset .ac .ac-link { background: none; border: 0; padding: 0; cursor: pointer; font-size: .62rem; color: var(--ac-muted); text-decoration: underline; }
.md-typeset .ac .ac-empty { text-align: center; color: var(--ac-muted); padding: 2rem 0; }

/* ─── challenge ─── */
.ac-open { max-width: 36rem; margin: 0 auto; text-align: center; }
.md-typeset .ac .ac-open > p { margin: .5em 0; }
.md-typeset .ac .ac-title { font-size: 1.05rem; font-weight: 700; color: var(--ac-strong); }
.md-typeset .ac .ac-sub { font-size: .66rem; color: var(--ac-muted); }
.md-typeset .ac .ac-record { font-weight: 600; color: var(--ac-ok); }
.md-typeset .ac .ac-score { font-size: 1.6rem; font-weight: 800; color: var(--ac-strong); }
.ac-hud {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .8rem;
    padding: .4rem .7rem; margin-bottom: .7rem; border-radius: .4rem; background: var(--ac-card); font-weight: 600; font-size: .68rem;
}
.ac-lives { color: var(--ac-bad); letter-spacing: .1em; font-size: .85rem; line-height: 1; }
.ac-streak { color: var(--ac-muted); }
.ac-streak.is-on { color: var(--ac-mid); }
.ac-scene { padding: .8rem 1rem; border-left: 4px solid var(--ac-strong); border-radius: .3rem; background: var(--ac-card); margin-bottom: .8rem; }
.md-typeset .ac .ac-scene p { margin-top: .25em; font-size: .9rem; font-weight: 600; line-height: 1.4; color: var(--ac-strong); }
.ac-hand { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ac-option {
    display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; min-height: 7rem;
    border: 2px solid var(--ac-k); border-radius: .6rem; background: var(--ac-card); cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.ac-option:hover:not(:disabled), .ac-option:focus-visible { transform: translateY(-.2rem); box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .25); }
.ac-option .ac-band { font-size: .55rem; }
.ac-optname { flex: 1; display: flex; align-items: center; padding: .6rem .8rem; font-size: .85rem; font-weight: 700; color: var(--ac-strong); }
.ac-option kbd { align-self: flex-end; margin: 0 .5rem .4rem; }
.ac-option:disabled { cursor: default; opacity: .45; }
.ac-option.is-right { opacity: 1; box-shadow: 0 0 0 3px var(--ac-ok); }
.ac-option.is-wrong { opacity: 1; box-shadow: 0 0 0 3px var(--ac-bad); }
.ac-feedback:empty { display: none; }
.ac-feedback { margin-top: .9rem; padding: .7rem 1rem; border-radius: .5rem; border-left: 4px solid; }
.ac-feedback.is-ok { border-color: var(--ac-ok); background: color-mix(in srgb, var(--ac-ok) 12%, var(--ac-card)); }
.ac-feedback.is-bad { border-color: var(--ac-bad); background: color-mix(in srgb, var(--ac-bad) 12%, var(--ac-card)); }
.md-typeset .ac .ac-feedback p { margin: .3em 0; }
.md-typeset .ac .ac-verdict { font-weight: 700; }
.is-ok .ac-verdict { color: var(--ac-ok); }
.is-bad .ac-verdict { color: var(--ac-bad); }
.ac-feedback .ac-bt { margin-top: .4rem; }
.ac-review { text-align: left; margin-top: .8rem; }
.md-typeset .ac .ac-review ul { margin: .3em 0 0; }
.md-typeset .ac .ac-review li { margin-bottom: .45em; }

/* ─── phones ─── */
@media (max-width: 44.9375em) {
    .ac { padding: .75rem .7rem .9rem; }
    .ac-tab span { display: none; }
    .ac-row { flex-direction: column; gap: .25rem; }
    .ac-label { min-width: 0; padding-top: 0; }
    .ac-hand { grid-template-columns: 1fr; }
    .ac-option { min-height: 0; }
    .ac-optname { padding: .5rem .8rem; }
    .md-typeset .ac .ac-question { font-size: .9rem; }
    .ac-face { min-height: 13rem; }
    .ac-body { padding: .8rem 1rem; }
    .ac-rate { min-width: 0; flex: 1; }
    .ac kbd { display: none; }
}

/* ─── the colour key in the page text, outside the panel: it follows the page's own scheme ─── */
.md-typeset .ac-sw-d { color: #0969da; }
.md-typeset .ac-sw-a { color: #8250df; }
.md-typeset .ac-sw-t { color: #bc4c00; }
.md-typeset .ac-sw-e { color: #1a7f37; }
.md-typeset .ac-sw-g { color: #9a6700; }
[data-md-color-scheme="slate"] .md-typeset .ac-sw-d { color: #79c0ff; }
[data-md-color-scheme="slate"] .md-typeset .ac-sw-a { color: #bc8cff; }
[data-md-color-scheme="slate"] .md-typeset .ac-sw-t { color: #f0883e; }
[data-md-color-scheme="slate"] .md-typeset .ac-sw-e { color: #3fb950; }
[data-md-color-scheme="slate"] .md-typeset .ac-sw-g { color: #d29922; }