:root {
  --bg: #0f1218;
  --bg-panel: #171b24;
  --bg-elev: #1e2430;
  --line: #2a313f;
  --text: #e7ecf3;
  --text-dim: #97a1b2;
  --maj: #f4c95d;
  --min: #6ab7ff;
  --dim: #ff8b6a;
  --accent: #b98bff;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #1a2030, var(--bg));
  color: var(--text);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}

button, .segment { touch-action: manipulation; }

.topbar { flex: 0 0 auto; text-align: center; padding: 16px 16px 6px; }
.topbar h1 { margin: 0; font-size: 1.7rem; letter-spacing: .5px; }
.tagline { margin: 5px 0 0; color: var(--text-dim); }

.layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr);
  gap: 24px;
  max-width: 1080px;
  width: 100%;
  margin: 8px auto;
  padding: 0 20px;
  align-items: stretch;
  overflow: hidden;
}

@media (max-width: 860px) {
  .layout { display: flex; flex-direction: column; gap: 12px; }
  .circle-wrap { flex: 0 0 auto; }
  #circle { max-width: min(440px, 34vh); }
  .panel { flex: 1 1 auto; }
}

/* Short windows: drop the tagline and tighten the header */
@media (max-height: 620px) {
  .tagline { display: none; }
  .topbar { padding: 8px 16px 2px; }
  .topbar h1 { font-size: 1.4rem; }
}

/* ---- Circle ---- */
.circle-wrap { display: flex; justify-content: center; align-items: center; overflow: hidden; }
#circle { width: 100%; max-width: min(480px, 56vh); height: auto; user-select: none; }

.segment { cursor: pointer; transition: opacity .12s ease; outline: none; }
.segment:focus, .segment:focus-visible { outline: none; }
.seg-shape {
  stroke: var(--bg);
  stroke-width: 2;
  transition: fill .15s ease, filter .15s ease;
}
.seg-major .seg-shape { fill: #232b3a; }
.seg-minor .seg-shape { fill: #1b2130; }
@media (hover: hover) {
  .segment:hover .seg-shape { fill: #2c3648; }
}

.segment.selected .seg-shape { fill: var(--accent); filter: drop-shadow(0 0 8px rgba(185,139,255,.55)); }
.segment.in-maj .seg-shape { fill: var(--maj); }
.segment.in-min .seg-shape { fill: var(--min); }
.segment.in-dim .seg-shape { fill: var(--dim); }
.segment.bhl   .seg-shape { fill: #3fae7a; }

.seg-label { fill: var(--text); font-size: 15px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.seg-minor .seg-label { fill: var(--text-dim); font-size: 12px; font-weight: 500; }
.segment.selected .seg-label,
.segment.bhl .seg-label { fill: #fff; }
.segment.in-maj .seg-label,
.segment.in-min .seg-label,
.segment.in-dim .seg-label { fill: #20242c; }

.role-tag { fill: #fff; font-size: 10px; font-weight: 700; text-anchor: middle; pointer-events: none; letter-spacing: .5px; }

#center-key { fill: var(--text); font-size: 26px; font-weight: 700; text-anchor: middle; }
#center-sub { fill: var(--text-dim); font-size: 12px; text-anchor: middle; }
.center-disc { fill: #10141c; stroke: var(--line); stroke-width: 1.5; }

/* ---- Panel ---- */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}
.panel-inner { transform-origin: top center; will-change: transform; container-type: inline-size; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
#key-title { margin: 0; font-size: 1.4rem; }

.mode-toggle { display: inline-flex; background: var(--bg-elev); border-radius: 10px; padding: 3px; }
.mode-btn {
  border: 0; background: transparent; color: var(--text-dim);
  padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: .9rem; font-weight: 600;
}
.mode-btn.active { background: var(--accent); color: #fff; }

.tabs { display: flex; gap: 6px; margin: 12px 0 6px; background: var(--bg-elev); padding: 4px; border-radius: 10px; }
.tab-btn {
  flex: 1; border: 0; background: transparent; color: var(--text-dim);
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .9rem;
}
.tab-btn.active { background: var(--accent); color: #fff; }
.tab-btn:disabled { opacity: .4; cursor: default; }
[hidden] { display: none !important; }

.hint { color: var(--text-dim); font-size: .9rem; line-height: 1.5; margin: 14px 0 18px; }

.section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin: 20px 0 10px; }

#chords { display: block; }

/* Always 7 columns, one row per group. The three groups hold 7, 7, and 5-or-6
   chords, so an auto-fit grid gave each group a different column count *and*
   wrapped the 6-chord major borrowed set onto a second row. That height change
   flowed into fitPanel(), which rescaled the entire panel on every major/minor
   toggle. Seven fixed tracks means the odd chord out just leaves an empty slot
   and the panel height stops moving. Tiles get narrow, so type and gutters are
   sized against the panel width with container queries. */
.chords {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(4px, 1.2cqi, 8px);
}

.chord {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px clamp(2px, 1cqi, 8px);
  text-align: center;
  cursor: pointer;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
@media (hover: hover) {
  .chord:hover { transform: translateY(-2px); }
}
.chord:active { transform: translateY(0); }
/* The chord name leads. Someone writing a song plays "Am", not "vi" — the name
   is what their hands need, the numeral is context. The numeral stays directly
   above as a small label: still the part that transfers between keys, just no
   longer the loudest thing on the card. */
.chord .rn {
  font-size: clamp(.55rem, 2.1cqi, .8rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-dim);
}
.chord .rn .num { font-family: Georgia, "Times New Roman", "Cambria", serif; letter-spacing: .5px; }
.chord .rn .fig {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: .7em; font-weight: 600; vertical-align: super;
  margin-left: 1px; letter-spacing: 0;
}
.chord .name {
  font-size: clamp(.85rem, 4.2cqi, 1.35rem);
  font-weight: 700;
  line-height: 1.1;
  margin-top: 2px;
}
/* Root full size, extension small and raised — how a lead sheet prints it, and
   the only way "Dbmaj7" fits a ~61px tile at seven columns. */
.chord .name .ext {
  font-size: .5em; font-weight: 600; vertical-align: super;
  margin-left: 1px;
}
.chord.borrowed { border-style: dashed; opacity: .96; }
.chord .src { font-size: clamp(.55rem, 1.8cqi, .68rem); color: var(--text-dim); margin-top: 4px; font-style: italic; }
.chord .res-hint { font-size: clamp(.58rem, 1.9cqi, .74rem); font-weight: 700; color: #3fae7a; margin-top: 3px; }

/* Quality colour rides on the name now, since that's the dominant element. */
.chord.q-maj { border-color: var(--maj); }
.chord.q-maj .name { color: var(--maj); }
.chord.q-min { border-color: var(--min); }
.chord.q-min .name { color: var(--min); }
.chord.q-dim { border-color: var(--dim); }
.chord.q-dim .name { color: var(--dim); }

.actions { margin-top: 18px; }
.prog-btn {
  width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg-elev); color: var(--text); font-size: .95rem; font-weight: 600; cursor: pointer;
}
@media (hover: hover) {
  .prog-btn:hover:not(:disabled) { background: #263042; }
}
.prog-btn:disabled { opacity: .4; cursor: default; }
.prog-btn.playing { background: var(--accent); color: #fff; border-color: var(--accent); }

.relationships { margin-top: 18px; font-size: .9rem; line-height: 1.7; color: var(--text-dim); }
.relationships strong { color: var(--text); }
.key-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin-right: 2px; }
.key-dot.d-key { background: var(--accent); }
.key-dot.d-borrow { background: #3fae7a; }

.legend { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.chip { font-size: .78rem; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line); }
.chip.key { color: var(--accent); border-color: var(--accent); }
.chip.maj { color: var(--maj); border-color: var(--maj); }
.chip.min { color: var(--min); border-color: var(--min); }
.chip.dim { color: var(--dim); border-color: var(--dim); }
.chip.borrow { color: #3fae7a; border-color: #3fae7a; }

/* ---- Glossary ---- */
.gloss-wrap { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 12px; }
.gloss-wrap summary { cursor: pointer; font-weight: 600; color: var(--text); padding: 6px 0; list-style: none; }
.gloss-wrap summary::-webkit-details-marker { display: none; }
.gloss-wrap summary::before { content: '▸ '; color: var(--accent); }
.gloss-wrap[open] summary::before { content: '▾ '; }

.glossary { display: grid; gap: 8px; margin-top: 8px; }
.gloss-row {
  display: block; text-align: left; width: 100%;
  background: var(--bg-elev); border: 1px solid var(--line); border-left-width: 3px;
  border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--text);
  transition: background .12s ease;
}
@media (hover: hover) {
  .gloss-row:hover { background: #263042; }
}
.gloss-main { display: flex; align-items: baseline; gap: 10px; }
.gloss-name { font-size: 1.05rem; font-weight: 700; }
.gloss-label { font-size: .78rem; color: var(--text-dim); }
.gloss-blurb { font-size: .82rem; color: var(--text-dim); margin-top: 3px; line-height: 1.45; }
.gloss-row.q-maj { border-left-color: var(--maj); } .gloss-row.q-maj .gloss-name { color: var(--maj); }
.gloss-row.q-min { border-left-color: var(--min); } .gloss-row.q-min .gloss-name { color: var(--min); }
.gloss-row.q-dim { border-left-color: var(--dim); } .gloss-row.q-dim .gloss-name { color: var(--dim); }

.foot { flex: 0 0 auto; text-align: center; color: var(--text-dim); font-size: .8rem; padding: 8px 20px; max-width: 720px; margin: 0 auto; line-height: 1.45; }
.foot strong { color: var(--text); }
@media (max-height: 620px) { .foot { display: none; } }

/* Attribution + copyright. Unlike .foot this is never hidden — CC BY requires
   the credit to travel with the work. */
.credits {
  flex: 0 0 auto;
  text-align: center;
  color: var(--text-dim);
  font-size: .68rem;
  line-height: 1.6;
  padding: 0 20px 10px;
  max-width: 720px;
  margin: 0 auto;
}
.credits a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.credits .sep { opacity: .5; margin: 0 3px; }
@media (hover: hover) {
  .credits a:hover { color: var(--text); }
}

/* ---- Mobile: the one-screen constraint is a desktop idea. Here we scroll. ----
   Everything above pins the app to the viewport and lets fitPanel() shrink the
   panel to fit. On a phone that bottoms out near scale(0.4) and the text becomes
   unreadable, so below this width we release the height locks and scroll instead.
   fitPanel() bails out on the same breakpoint (see app.js). */
@media (max-width: 700px) {
  body {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .layout {
    margin: 4px auto 0;
    padding: 0 14px;
    overflow: visible;
  }

  .circle-wrap { overflow: visible; }

  /* Override the 860px rule's 34vh cap — on a phone that shrinks the wheel
     until its labels are ~7px. Width-bound it instead. */
  #circle { max-width: min(92vw, 420px); }

  /* Labels are in viewBox units, so they scale down with the SVG. Bump them
     back up to stay legible at ~360px rendered. */
  .seg-label { font-size: 19px; }
  .seg-minor .seg-label { font-size: 15px; }
  #center-key { font-size: 32px; }
  #center-sub { font-size: 14px; }
  .role-tag { font-size: 12px; }

  .panel {
    max-height: none;
    overflow: visible;
    padding: 16px 14px;
  }

  /* Seven across doesn't fit a phone. Fall back to a flowing grid — auto-fill
     rather than auto-fit, so empty tracks are kept and tile widths stay
     identical no matter how many chords a group has. The page scrolls here, so
     differing row counts cost nothing. */
  .chords { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
  .chord { padding: 14px 8px; }
  .chord .rn { font-size: .78rem; }
  .chord .name { font-size: 1.25rem; }
  .chord .src { font-size: .66rem; }
  .chord .res-hint { font-size: .72rem; }
  .mode-btn { padding: 10px 18px; }
  .tab-btn { padding: 11px 10px; }

  .foot { padding: 12px 20px 8px; }
  .credits { padding-bottom: 22px; }
}