/* camelot-wheel.css — the Camelot wheel page (/camelot-wheel/, learning tools task A3), on the studio kit.
   Loaded after studio.css and key-wheel.css (templates/camelot-wheel.html page_styles).

   Look: one piece of hardware. The dial (KeyWheel) on the left, a readout on the right: the Camelot code as a big
   lit numeral in its hour colour, the musical and Open Key names under it, a scope, the sound switches and six move
   pads that light in the same colours as the wheel's LEDs. Below the deck, on the page's own surface, the
   "All 24 keys" table, which is also the printed cheat sheet (wheel + legend + table on one A4 page).

   Structure: .cw.st-root > .cw-deck.st-panel > (.cw-dial > svg#camelot-svg) + .cw-side + .cw-foot
                          > .cw-sheet.st-print */

.cw {
    /* the move colours, the same values as key-wheel.css sets on .kw: the pads are not inside the svg, so they
       cannot inherit them. tests/test_camelot.py::test_moves_listed holds each pad LED to its wheel LED. */
    --kw-same: var(--st-808-ivory, #EEE7D3);
    --kw-adjacent: #1FC2E3;
    --kw-relative: #9A86FF;
    --kw-energy2: #22CC80;
    --kw-semitone: var(--st-pink, #F23A84);
    margin: 0.5rem 0 1.5rem;
}

/* ── deck ─────────────────────────────────────────────────────────────── */
.cw-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19.5rem), 1fr));
    gap: 18px 26px;
    align-items: start;
}
.cw-dial {
    min-width: 0;
    align-self: center;
}
#camelot-svg {
    display: block;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
}
/* style.css gives every path in #camelot-svg a 0.25 s opacity/filter transition (the old wheel); the KeyWheel
   classes carry their own, and the LEDs fade their fill */
#camelot-svg path { transition: none; }
#camelot-svg .kw-key { transition: filter 0.16s ease-out; }
#camelot-svg .kw-led { transition: fill 0.12s ease-out; }

.cw-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.cw-notation { align-self: flex-end; }
.cw-notation .st-notation { max-width: 100%; }

/* ── readout ──────────────────────────────────────────────────────────── */
.cw-info {
    /* the readout's own height, so a selection does not move what sits below it; the hint waits in the middle */
    min-height: 8.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cw-info .camelot-hint {
    margin: 0;
    max-width: 24ch;
    font-family: var(--st-font);
    font-size: 1.15rem;
    font-weight: 600;
    font-stretch: 108%;
    line-height: 1.3;
    color: var(--st-muted);
}
.cw-info .camelot-hint[hidden],
.cw-readout[hidden] { display: none; }
.cw-readout { display: grid; gap: 0.7rem; }
.cw-info .camelot-code {
    margin: 0;
    font-family: var(--st-font);
    font-size: clamp(4.2rem, 8.5vw, 6.2rem);
    font-weight: 850;
    font-stretch: 125%;
    line-height: 0.82;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--st-ink);
    /* a lit numeral: the hour colour glows a little on the charcoal */
    text-shadow: 0 0 22px color-mix(in srgb, currentColor 38%, transparent);
}
.cw-names {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
    margin: 0;
}
.cw-names > div { min-width: 0; }
.cw-names dt {
    font-size: 0.8rem;
    font-weight: 600;
    font-stretch: 92%;
    color: var(--st-muted);
}
.cw-names dd {
    margin: 0.1rem 0 0;
    font-family: var(--st-font);
    font-size: 1.35rem;
    font-weight: 750;
    font-stretch: 105%;
    line-height: 1.15;
    color: var(--st-ink);
    font-variant-numeric: tabular-nums;
}

.cw-scope { height: 3.4rem; }

/* ── sound ────────────────────────────────────────────────────────────── */
.cw-sound {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.cw-label {
    font-size: 0.85rem;
    font-weight: 650;
    font-stretch: 95%;
    color: var(--st-muted);
}
.cw-sound .cw-label { margin-inline-end: 2px; }
/* the 7th switch: a latching button with a square LED (the guides' .tg) */
.cw-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: var(--st-target);
    padding: 0 0.95rem 0 0.8rem;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    background: var(--st-sunk);
    color: var(--st-muted);
    font: inherit;
    font-family: var(--st-font);
    font-size: 0.9rem;
    font-weight: 650;
    font-stretch: 92%;
    cursor: pointer;
}
.cw-toggle::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: #2C3035;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
.cw-toggle:hover { color: var(--st-ink); }
.cw-toggle[aria-pressed="true"] {
    color: var(--st-ink);
    background: var(--st-raised);
}
.cw-toggle[aria-pressed="true"]::before {
    background: var(--st-accent);
    box-shadow: 0 0 7px var(--st-accent);
}

/* ── move pads ────────────────────────────────────────────────────────── */
.cw-moves-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-top: 2px;
}
.cw-moves-note {
    font-size: 0.8rem;
    color: var(--st-muted);
}
.camelot-moves {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    touch-action: manipulation;
}
.camelot-move {
    --st-pc: var(--kw-same);
    min-height: 5.1rem;
    padding: 0.6rem 0.7rem 0.65rem;
    gap: 0.25rem;
}
.camelot-move[data-kind="adjacent"] { --st-pc: var(--kw-adjacent); }
.camelot-move[data-kind="relative"] { --st-pc: var(--kw-relative); }
.camelot-move[data-kind="energy2"] { --st-pc: var(--kw-energy2); }
.camelot-move[data-kind="semitone"] { --st-pc: var(--kw-semitone); }
/* the LED is lit in the move's colour, like the wheel's LED on the target key */
.camelot-move::before {
    background: var(--st-pc);
    box-shadow: 0 0 7px -1px var(--st-pc);
}
.camelot-move .st-pad-name {
    font-size: 1.45rem;
    font-stretch: 115%;
    font-variant-numeric: tabular-nums;
}
.camelot-move .st-pad-meta {
    font-size: 0.74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.camelot-move .cw-step {
    position: absolute;
    top: 0.48rem;
    inset-inline-end: 0.55rem;
}
.cw-step {
    font-size: 0.74rem;
    font-weight: 750;
    font-stretch: 92%;
    font-variant-numeric: tabular-nums;
    color: var(--st-pc, var(--st-muted));
}
.camelot-move:disabled {
    cursor: default;
    color: var(--st-muted);
    filter: none;
    transform: none;
}
.camelot-move:disabled::before {
    background: #2C3035;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.45);
}
.camelot-move:disabled .cw-step { color: var(--st-muted); opacity: 0.6; }
/* while its change plays, the pad fills with its colour (studio.css .is-hit), dark ink on the bright fill */
.st-pad.camelot-move.is-hit {
    color: #121416;
}
.camelot-move.is-hit::before {
    background: #fff;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.85);
}
.camelot-move.is-hit .cw-step { color: #121416; }

/* ── foot: legend + print ─────────────────────────────────────────────── */
.cw-foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding-top: 14px;
    border-top: 1px solid var(--st-line);
}
.cw-legend { font-size: 0.86rem; gap: 0.45rem 1.15rem; }
.cw-print { margin-inline-start: auto; }
.cw-legend .cw-step { color: var(--st-muted); font-weight: 650; }

/* ── the 24 keys (cheat sheet) ────────────────────────────────────────── */
.cw-sheet { margin-top: 1.9rem; }
.cw-sheet-head h2 {
    margin: 0;
    font-family: var(--st-font);
    font-size: 1.45rem;
    font-weight: 780;
    font-stretch: 112%;
    letter-spacing: -0.01em;
    color: var(--st-ink);
}
.cw-sheet-head p {
    margin: 0.35rem 0 0.9rem;
    max-width: 62ch;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--st-muted);
}
.cw-sheet-tables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 0.4rem 2.25rem;
}
.cw-sheet table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}
.cw-sheet caption {
    padding: 0 0 0.35rem;
    text-align: start;
    font-family: var(--st-font);
    font-weight: 700;
    font-stretch: 105%;
    color: var(--st-ink);
}
.cw-sheet th,
.cw-sheet td {
    padding: 0.36rem 0.8rem 0.36rem 0;
    border-bottom: 1px solid var(--st-line);
    text-align: start;
}
.cw-sheet thead th {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--st-muted);
}
.cw-sheet tbody th {
    font-family: var(--st-font);
    font-weight: 780;
    font-stretch: 110%;
}
.cw-sheet td { color: var(--st-ink); }
.cw-sheet td:last-child { color: var(--st-muted); font-weight: 600; }
/* each code carries its hour colour, as on the wheel (CamelotCore.segColor) */
.cw-chip {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-inline-end: 0.5rem;
    border-radius: 2px;
    background: hsl(var(--h) 60% 45%);
    vertical-align: 0.02em;
}
.cw-chip--b { background: hsl(var(--h) 70% 55%); }

@media (max-width: 560px) {
    .cw-deck { gap: 14px; }
    .cw-notation { align-self: stretch; }
    .cw-notation .st-notation { display: flex; }
    .cw-notation .st-notation > button { flex: 1 1 0; justify-content: center; padding: 0 0.5rem; }
    .cw-info { min-height: 7.2rem; }
    .camelot-moves { gap: 6px; }
    .camelot-move { min-height: 4.7rem; padding: 0.55rem 0.55rem 0.6rem; }
    .camelot-move .st-pad-name { font-size: 1.25rem; }
    .camelot-move .st-pad-meta { font-size: 0.68rem; }
    .cw-foot { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    #camelot-svg path,
    #camelot-svg .kw-key,
    #camelot-svg .kw-led { transition: none; }
}

/* ── print: the cheat sheet, one A4 page ──────────────────────────────── */
@media print {
    @page { size: A4; margin: 10mm; }
    html,
    body { background: #fff !important; }
    main > :not(.cw-hero):not(.cw) { display: none !important; }
    .cw-hero { padding: 0 0 3mm !important; overflow: visible; }
    .cw-hero::before,
    .cw-hero .subtitle { display: none !important; }
    /* the site's h1 is gradient-clipped text: without printed backgrounds it would vanish */
    .cw-hero h1 {
        margin: 0;
        font-size: 20pt;
        background: none !important;
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }
    .cw { margin: 0; }
    .cw-side,
    .cw-print { display: none !important; }
    .cw-deck {
        display: block;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        color: #000;
    }
    #camelot-svg { width: 104mm; max-width: 100%; }
    .cw-foot {
        justify-content: center;
        margin-top: 2mm;
        padding-top: 0;
        border: 0;
    }
    .cw-legend { --st-muted: #222; color: #222; font-size: 9pt; }
    .kw-swatch,
    .cw-chip,
    #camelot-svg {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .cw-sheet { margin-top: 4mm; }
    .cw-sheet-head p { margin: 1mm 0 2mm; font-size: 9pt; color: #333; }
    .cw-sheet-head h2 { font-size: 13pt; color: #000; }
    .cw-sheet-tables { grid-template-columns: 1fr 1fr; gap: 0 8mm; }
    .cw-sheet table { font-size: 9pt; }
    .cw-sheet caption { font-size: 9.5pt; color: #000; }
    .cw-sheet th,
    .cw-sheet td { padding: 0.9mm 2mm 0.9mm 0; border-color: #bbb; color: #000; }
    .cw-sheet thead th,
    .cw-sheet td:last-child { color: #333; }
}