/* Guitar Imp — circle of fifths
   The panel, the controls and the reference table are shared furniture from
   style.css. What is here is the wheel: two rings of keys around a soundhole,
   and how a key marks them. */

/* --------------------------------------------------------------------------
   The wheel

   Drawn as a rosette rather than a pie chart — a bone rim, a hairline of board
   between the rings and a double ring around the hole — so it belongs to the
   same instrument as the rest of the site.
   -------------------------------------------------------------------------- */

.wheel {
    position: relative;
    width: min(100%, 340px);
    margin: 0 auto clamp(12px, 3vw, 16px);
}

.wheel__svg {
    display: block;
    width: 100%;
    height: auto;
}

.wheel__rim {
    fill: none;
    stroke: rgba(236, 226, 207, .16);
    stroke-width: .8;
}

/* The soundhole. Opaque, or the board's inlays ghost up through the readout. */
.wheel__hole { fill: var(--rosewood-dark); }

.wheel__rose {
    fill: none;
    stroke: rgba(236, 226, 207, .22);
    stroke-width: 1.2;
}

/* --------------------------------------------------------------------------
   The segments

   One vocabulary, the same as the neck's: amber is the key you asked about,
   bone is what belongs with it, dim is everything else.
   -------------------------------------------------------------------------- */

.seg { cursor: pointer; }

.seg__face {
    fill: var(--rosewood);
    stroke: rgba(236, 226, 207, .10);
    stroke-width: .6;
    transition: fill .18s ease, stroke .18s ease;
}

.seg__label {
    fill: var(--bone);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    transition: fill .18s ease, opacity .18s ease;
}

.ring--major .seg__label { font-size: 11.5px; }
.ring--minor .seg__label { font-size: 9.5px; font-weight: 500; }

/* The six o'clock spoke is the one that carries two spellings; the second is
   the alternative, not a second key, so it is set smaller and quieter. */
.seg__alt { font-size: 7.4px; font-weight: 500; fill: var(--bone-dim); }
.ring--minor .seg__alt { font-size: 6.6px; }

.seg.is-out .seg__face { fill: #17100e; }
.seg.is-out .seg__label { opacity: .42; }

/* In the key: bone, clearly on the wheel, but quiet enough that the tonic still
   reads as the landmark from arm's length. */
.seg.is-in .seg__face {
    fill: rgba(236, 226, 207, .15);
    stroke: rgba(236, 226, 207, .30);
}

.seg.is-root .seg__face {
    fill: var(--glow);
    stroke: var(--glow);
}

.seg.is-root .seg__label,
.seg.is-root .seg__alt { fill: #22150a; }

/* The chord sounding right now. An amber edge rather than an amber fill, so the
   tonic stays the only solid amber while a run walks past it. */
.seg.is-play .seg__face {
    stroke: var(--glow);
    stroke-width: 2;
}

.seg:focus { outline: none; }

.seg:focus-visible .seg__face {
    stroke: var(--glow);
    stroke-width: 2.4;
}

@media (hover: hover) {
    .seg:hover .seg__face { stroke: rgba(236, 226, 207, .45); }
}

/* --------------------------------------------------------------------------
   The readout in the soundhole
   -------------------------------------------------------------------------- */

.hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.hub__key {
    margin: 0;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(15px, 4.6vw, 20px);
    line-height: 1.1;
    letter-spacing: -.01em;
}

.hub__tonic { color: var(--glow); }

.hub__alt {
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    border-bottom: 1px dotted rgba(245, 163, 60, .55);
    background: none;
    color: var(--glow);
    font: inherit;
    font-size: 10px;
    line-height: 1.3;
    cursor: pointer;
    pointer-events: auto;
}

.hub__rel { margin: 9px 0 0; }

.hub__tag {
    display: block;
    font-size: 8px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nickel);
}

.hub__relkey {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    line-height: 1.2;
    color: var(--bone-dim);
}

/* --------------------------------------------------------------------------
   The key signature and its run

   The signature and the Play button share a row the way the scale tool's name
   and its Play button do: a full-width button here would push the wheel off a
   phone screen.
   -------------------------------------------------------------------------- */

.circle__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: clamp(10px, 3vw, 14px);
}

.circle__sig {
    margin: 0;
    min-width: 0;
    min-height: 1.2em;
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--bone-dim);
}

.circle__go {
    flex: 0 0 auto;
    padding: 11px 20px;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   The seven chords

   One row, because seven across is the fact being taught: these are the chords
   of the key, in order, and the numeral says what each one does.
   -------------------------------------------------------------------------- */

.chips {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 8px 2px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(0, 0, 0, .28);
    color: var(--bone);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color .16s ease, border-color .16s ease;
}

.chip__num {
    font-size: 9.5px;
    line-height: 1;
    letter-spacing: .03em;
    color: var(--nickel);
}

.chip__name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* The diminished chord is the one degree with no key of its own, so it has no
   seat on the wheel. Setting it quieter says so before the tap does. */
.chip.is-odd .chip__name { color: var(--bone-dim); }

.chip.is-play {
    border-color: var(--glow);
    background: rgba(245, 163, 60, .16);
}

@media (hover: hover) {
    .chip:hover { border-color: rgba(236, 226, 207, .3); }
}

/* The status line fills on every chord tap and empties again on every key
   change. Letting it collapse the way it does elsewhere would shuffle the wheel
   up and down under the thumb, so here it holds its row whether or not it has
   anything to say. */
.circle .status:empty {
    margin: 12px 0 0;
    min-height: 1.4em;
}

/* --------------------------------------------------------------------------
   The reference table
   -------------------------------------------------------------------------- */

/* The numeral is the column being looked up, so it keeps the accent. */
.ref__table tbody th.numeral {
    color: var(--bone);
    font-weight: 700;
}

.ref__table tbody tr.is-root th.numeral { color: var(--glow); }

@media (max-width: 359px) {
    .chips { gap: 3px; }
    .chip { padding: 7px 1px; }
    .chip__name { font-size: 11.5px; }
    .chip__num { font-size: 9px; }
    .circle__sig { font-size: 11.5px; letter-spacing: .04em; }
    .circle__go { padding: 11px 15px; }
}