/* circle-of-fifths.css — /circle-of-fifths/ (learning tools, plan B task B1). Loaded after studio.css and
   key-wheel.css (templates/circle-of-fifths.html page_styles); restyles nothing in the kit, only lays out this page.

   Look: one machine on the page. A charcoal chassis (.st-panel) holds an illuminated dial on the left and a
   readout on the right; 808 chord pads coloured by harmonic function (red tonic, orange subdominant, yellow
   dominant) and four progression pads sit below. Violet is the page accent: the selected key's ring, the hub
   pointer, the playing progression. The dial is the one bold element; the prose around it stays quiet. */

.cof {
    --st-accent: var(--st-violet, #7B61FF);
    --st-on-accent: #ffffff;
    --cof-sharp: #9ED8EA;          /* the wheel's signature ring colours */
    --cof-flat: #F2AECB;
}

/* ── head ── */
.cof-head {
    margin: 0.4rem 0 1.4rem;
}
.cof-title {
    --st-display-size: clamp(2.1rem, 5.2vw, 3.3rem);
    line-height: 0.95;
}
.cof-sub {
    max-width: 52ch;
    margin: 0.75rem 0 0;
    color: var(--st-muted);
    font-family: var(--body-font, "DM Sans", system-ui, sans-serif);
    font-size: 1.05rem;
    line-height: 1.5;
}

/* ── the machine ── */
.cof-machine {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
.cof-top {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
}

/* the dial: a soft violet glow behind the face, as if lit from inside the chassis */
.cof-dial {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}
.cof-dial::before {
    content: "";
    position: absolute;
    inset: 2.6rem 4% 2.4rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(123, 97, 255, 0.24), rgba(123, 97, 255, 0.07) 62%, transparent 100%);
    pointer-events: none;
}
.cof-notation {
    position: relative;
    align-self: center;
}
#cof-svg {
    position: relative;
    width: 100%;
    max-width: 30rem;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
}
.cof-legend {
    position: relative;
    justify-content: center;
    font-size: 0.82rem;
}

/* the readout */
.cof-readout {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-width: 0;
}
.cof-key {
    --st-display-size: clamp(3.4rem, 7.4vw, 5.6rem);
    color: var(--st-panel-ink);
    text-shadow: 0 0 28px rgba(123, 97, 255, 0.35);
    overflow-wrap: anywhere;
}
.cof-long {
    margin: -0.35rem 0 0;
    font-size: 1.12rem;
    font-weight: 650;
    font-stretch: 108%;
    color: var(--st-panel-ink);
}
.cof-enharmonic {
    font-weight: 500;
    font-stretch: 92%;
    color: var(--st-panel-muted);
}

.cof-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
}
.cof-spec {
    position: relative;
    padding: 0.5rem 0.65rem 0.55rem;
    border-radius: 8px;
    background: var(--st-well);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.cof-spec dt {
    font-size: 0.72rem;
    font-weight: 600;
    font-stretch: 88%;
    color: var(--st-panel-muted);
}
.cof-spec dd {
    margin: 0.15rem 0 0;
    font-size: 1.15rem;
    font-weight: 780;
    font-stretch: 108%;
    font-variant-numeric: tabular-nums;
    color: var(--st-panel-ink);
}
.cof-spec.is-current {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(123, 97, 255, 0.55);
}
.cof-spec.is-current::after {      /* lit LED on the notation in use */
    content: "";
    position: absolute;
    top: 0.55rem;
    inset-inline-end: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--st-accent);
    box-shadow: 0 0 6px var(--st-accent);
}

.cof-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.8rem;
}
.cof-label {
    flex: 0 0 auto;
    min-width: 7.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-stretch: 90%;
    color: var(--st-panel-muted);
}
.cof-sigval {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.cof-sig {
    margin-inline-end: 0.2rem;
    font-size: 1.35rem;
    font-weight: 820;
    font-stretch: 110%;
    color: var(--st-panel-ink);
}
.cof-sig[data-sig-type="sharp"] { color: var(--cof-sharp); }
.cof-sig[data-sig-type="flat"] { color: var(--cof-flat); }
.cof-accs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cof-accs:empty { display: none; }
.cof-acc {
    padding: 0.12rem 0.42rem 0.16rem;
    border-radius: 5px;
    background: var(--st-key);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--st-panel-ink);
}
.cof-acc[data-sig-type="sharp"] { color: var(--cof-sharp); }
.cof-acc[data-sig-type="flat"] { color: var(--cof-flat); }
.cof-none {
    font-size: 0.9rem;
    color: var(--st-panel-muted);
}
.cof-none[hidden] { display: none; }
.cof-rel {
    font-size: 1.05rem;
    font-weight: 750;
    font-stretch: 105%;
}
.cof-focus { align-self: flex-start; }

/* ── pad blocks ── */
.cof-block {
    padding-top: 1.2rem;
    border-top: 1px solid var(--st-panel-line);
}
.cof-block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin-bottom: 0.8rem;
}
.cof-h {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 760;
    font-stretch: 108%;
    color: var(--st-panel-ink);
}
.cof-hint {
    margin: 0.7rem 0 0;
    font-size: 0.8rem;
    color: var(--st-panel-muted);
}
.cof-hint--inline { margin: 0; }

.cof-pads {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cof-pad {
    min-height: 6.4rem;
    gap: 0.15rem;
}
.cof-pad-num {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.55rem;
    font-weight: 850;
    font-stretch: 112%;
    line-height: 1;
    letter-spacing: -0.01em;
}
.cof-pad-chord {
    display: block;
    font-size: 1rem;
    font-weight: 750;
    font-stretch: 100%;
    line-height: 1.1;
}
.cof-pad .st-pad-meta { margin-top: 0; }
/* a chord quality longer than the pad (ru уменьшенный, el ελαττωμένη) wraps inside it, hyphenated by the page's
   <html lang> where the device has a dictionary. It may use 0.3rem of the pad's end padding first: EN "diminished"
   at 390 px already does (57 px in a 55 px box) and keeps its one line. */
.cof-pad .st-pad-meta,
.cof-prog .st-pad-meta {
    width: max-content;
    max-width: calc(100% + 0.3rem);
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.cof-progs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cof-prog {
    --st-pc: var(--st-accent);
    min-height: 5.2rem;
}
.cof-prog[aria-pressed="true"] {
    background: var(--st-accent);
    color: var(--st-on-accent);
    transform: translateY(2px);
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.28), 0 0 22px -6px var(--st-accent);
}
.cof-prog[aria-pressed="true"]::before {
    background: var(--st-led);
    box-shadow: 0 0 10px 2px var(--st-led);
}

.cof-transport {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 1.6rem;
    margin-top: 0.9rem;
}
.cof-tempo {
    flex: 1 1 14rem;
}
.cof-bars-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: var(--st-target);
}
.cof-bars-wrap .cof-label { min-width: 0; }
.cof-bars {
    --st-n: 4;
    width: 8.5rem;
    margin: 0;
}
.cof-bars .st-led { min-height: 12px; }

/* ── copy ── */
.cof-copy {
    max-width: 68ch;
    margin: 2.6rem 0 0;
    font-family: var(--body-font, "DM Sans", system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.62;
}
.cof-copy section + section { margin-top: 2.1rem; }
.cof-copy h2 {
    margin: 0 0 0.6rem;
    font-family: var(--st-font);
    font-size: 1.4rem;
    font-weight: 760;
    font-stretch: 112%;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--st-ink);
}
.cof-copy p {
    margin: 0 0 0.9rem;
    color: var(--st-muted);
}
.cof-copy a { color: var(--st-ink); text-decoration-color: var(--st-accent); text-underline-offset: 3px; }

.cof-table-wrap {
    margin: 1.1rem 0 1.2rem;
    overflow-x: auto;
}
.cof-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--st-font);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.cof-table th,
.cof-table td {
    padding: 0.5rem 1rem 0.5rem 0;
    border-bottom: 1px solid var(--st-line);
    text-align: start;
    white-space: nowrap;
}
.cof-table th {
    font-size: 0.8rem;
    font-weight: 650;
    font-stretch: 92%;
    color: var(--st-muted);
}
.cof-table td:first-child { font-weight: 760; font-stretch: 108%; }
.cof-table td:nth-child(3) { text-align: end; padding-inline-end: 1.6rem; }
.cof-table td[data-sig-type="sharp"],
.cof-table td[data-sig-type="flat"] { font-weight: 650; }
.cof-enh { color: var(--st-muted); font-size: 0.88em; }

/* ── narrow screens: the readout drops under the dial, pads wrap 4 + 3 ── */
@media (max-width: 760px) {
    .cof-top { grid-template-columns: minmax(0, 1fr); }
    #cof-svg { max-width: 26rem; }
    .cof-pads { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cof-progs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cof-pad { min-height: 5.6rem; }
    .cof-pad-num { font-size: 1.3rem; }
}
@media (max-width: 400px) {
    .cof-specs dd { font-size: 1rem; }
    .cof-label { min-width: 6.2rem; }
}

@media print {
    .cof-machine,
    .cof-head .cof-sub { display: none; }
    .cof-copy { max-width: none; }
}