/* mod_circleoffifths – (C) 2026 Inaspire – GPL-2.0-or-later */

/* ♯ ♭ ♮ from DejaVu Sans (see fonts/LICENSE-DejaVu.txt), so they look the same with any template font. */
@font-face {
  font-family: "CofAccidentals";
  src: url("../fonts/cof-accidentals.woff") format("woff");
  font-weight: 100 549;
  font-display: block;
  unicode-range: U+266D-266F;
}
@font-face {
  font-family: "CofAccidentals";
  src: url("../fonts/cof-accidentals-bold.woff") format("woff");
  font-weight: 550 900;
  font-display: block;
  unicode-range: U+266D-266F;
}

.cof .cof-acc {
  font-family: "CofAccidentals", "Segoe UI Symbol", "Apple Symbols", sans-serif;
  font-style: normal;
  letter-spacing: 0;
}

.cof {
  --cof-max: 1000px;
  --cof-bg: #ffffff;
  --cof-text: #1d2733;
  --cof-major: #e4eaf1;
  --cof-minor: #cdd8e4;
  --cof-dim: #b6c5d5;
  --cof-selected: #2b59c3;
  --cof-family: #f5dc8f;
  --cof-dots: #1d2733;
  --cof-root: #2b59c3;
  --cof-fretboard: #f3ede4;
  --cof-on-selected: #ffffff;
  --cof-on-family: #111418;
  --cof-on-dots: #ffffff;
  --cof-on-root: #ffffff;
  --cof-line: color-mix(in srgb, var(--cof-text) 16%, transparent);
  --cof-muted: color-mix(in srgb, var(--cof-text) 62%, transparent);

  container-type: inline-size;
  box-sizing: border-box;
  max-width: var(--cof-max);
  margin-inline: auto;
  padding: clamp(12px, 3cqi, 28px);
  background: var(--cof-bg);
  color: var(--cof-text);
  border-radius: 10px;
  line-height: 1.45;
}

.cof *,
.cof *::before,
.cof *::after {
  box-sizing: border-box;
}

.cof-layout {
  display: grid;
  gap: clamp(16px, 4cqi, 36px);
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 720px) {
  .cof-layout {
    grid-template-columns: minmax(300px, 6fr) minmax(0, 5fr);
    align-items: start;
  }
}

/* ---------- Circle ---------- */

.cof-circle {
  width: 100%;
  max-width: 580px;
  margin-inline: auto;
}

.cof-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: inherit;
}

.cof-seg {
  cursor: default;
}

.cof-seg[role="button"] {
  cursor: pointer;
  outline: none;
}

.cof-seg-shape {
  transition: fill 160ms ease;
}

.cof-seg-major .cof-seg-shape { fill: var(--cof-major); }
.cof-seg-minor .cof-seg-shape { fill: var(--cof-minor); }
.cof-seg-dim .cof-seg-shape { fill: var(--cof-dim); }

.cof-seg.is-family .cof-seg-shape { fill: var(--seg-fill, var(--cof-family)); }
.cof-seg.is-selected .cof-seg-shape { fill: var(--seg-fill, var(--cof-selected)); }

.cof-seg[role="button"]:hover:not(.is-selected) .cof-seg-shape {
  fill: color-mix(in srgb, var(--cof-selected) 18%, var(--cof-major));
}
.cof-seg-minor[role="button"]:hover:not(.is-selected) .cof-seg-shape {
  fill: color-mix(in srgb, var(--cof-selected) 18%, var(--cof-minor));
}
.cof-seg.is-family[role="button"]:hover .cof-seg-shape {
  fill: color-mix(in srgb, var(--cof-text) 12%, var(--seg-fill, var(--cof-family)));
}

.cof-seg[role="button"]:focus-visible .cof-seg-shape {
  stroke: var(--cof-text);
  stroke-width: 2.5;
  stroke-dasharray: 4 3;
}

.cof-seg-label {
  fill: var(--cof-text);
  font-weight: 700;
  font-size: 21px;
  pointer-events: none;
}
.cof-seg-minor .cof-seg-label { font-size: 16.5px; font-weight: 650; }
.cof-seg-dim .cof-seg-label { font-size: 11px; font-weight: 500; }
.cof-seg-label.is-small { font-size: 14px; }
.cof-seg-minor .cof-seg-label.is-small { font-size: 12.5px; }
.cof-seg-dim .cof-seg-label.is-small { font-size: 10px; }
.cof-seg-label.is-stacked { font-size: 16px; }
.cof-seg-minor .cof-seg-label.is-stacked { font-size: 14px; }

.cof-seg-roman {
  fill: var(--cof-text);
  font-size: 12.5px;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
  opacity: .9;
}

.cof-seg.is-family .cof-seg-label,
.cof-seg.is-family .cof-seg-roman { fill: var(--seg-on, var(--cof-on-family)); }
.cof-seg.is-selected .cof-seg-label,
.cof-seg.is-selected .cof-seg-roman { fill: var(--seg-on, var(--cof-on-selected)); opacity: 1; }

.cof-numerals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem .75rem;
  margin-top: .9rem;
  font-size: .9em;
}
.cof-numerals-label { color: var(--cof-muted); }

/* Degree numbers in digits: upright, in the site font. */
.cof-digits .cof-seg-roman,
.cof-digits .cof-chord-roman,
.cof-digits .cof-prog-roman {
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
}
.cof-digits .cof-seg-roman { font-size: 13px; }

.cof-center-bg { fill: none; }
.cof-center-key { fill: var(--cof-text); font-size: 34px; font-weight: 700; }
.cof-center-mode { fill: var(--cof-muted); font-size: 13px; }
.cof-center-sig { fill: var(--cof-muted); font-size: 13px; font-weight: 600; }

/* ---------- Panel ---------- */

.cof-panel {
  min-width: 0;
}

.cof-title {
  margin: 0 0 .5rem;
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.15;
}

.cof-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .25rem 1rem;
  margin: 0 0 1.25rem;
  font-size: .95em;
}
.cof-facts dt { color: var(--cof-muted); margin: 0; font-weight: 400; }
.cof-facts dd { margin: 0; font-weight: 600; }
.cof-facts .cof-enh {
  grid-column: 1 / -1;
  color: var(--cof-muted);
  font-weight: 400;
  font-size: .92em;
}

.cof button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  min-height: 0;
  line-height: inherit;
}

.cof button:focus-visible,
.cof [role="tabpanel"]:focus-visible {
  outline: 2px solid var(--cof-selected);
  outline-offset: 2px;
  border-radius: 4px;
}

.cof .cof-link {
  color: var(--cof-selected);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Tabs */
.cof-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: clamp(.8rem, 3cqi, 1.25rem);
  border-bottom: 1px solid var(--cof-line);
  margin-bottom: 1rem;
}

.cof .cof-tab {
  flex: none;
  white-space: nowrap;
  padding: .5rem 0 .55rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--cof-muted);
  font-weight: 600;
}
.cof .cof-tab:hover { color: var(--cof-text); }
.cof .cof-tab[aria-selected="true"] {
  color: var(--cof-text);
  border-bottom-color: var(--cof-selected);
}

.cof-hint {
  margin: 0 0 .9rem;
  color: var(--cof-muted);
  font-size: .9em;
}

/* Chords */
.cof-chord-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem .5rem;
}
.cof-chord-grid.is-compact {
  grid-template-columns: repeat(auto-fill, minmax(72px, 92px));
}

.cof-chord {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cof-chord-roman {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: .85em;
  color: var(--cof-muted);
}
.cof-chord-name {
  font-weight: 700;
  font-size: 1.05em;
  margin-bottom: .2rem;
}

.cof-diagram {
  width: 100%;
  max-width: 80px;
  height: auto;
  overflow: visible;
}
.cof-d-fret { stroke: var(--cof-text); stroke-opacity: .35; stroke-width: 1; }
.cof-d-string { stroke: var(--cof-text); stroke-opacity: .6; stroke-width: 1; }
.cof-d-nut { fill: var(--cof-text); }
.cof-d-base { fill: var(--cof-muted); font-size: 10px; font-weight: 600; }
.cof-d-mute { fill: var(--cof-muted); font-size: 11px; }
.cof-d-open { fill: none; stroke: var(--cof-text); stroke-width: 1.2; }
.cof-d-open.is-root { stroke: var(--cof-root); stroke-width: 2; }
.cof-d-dot { fill: var(--cof-dots); }
.cof-d-dot.is-root { fill: var(--cof-root); }
.cof-d-barre { fill: var(--cof-dots); }

/* Progressions */
.cof-progs {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cof-line);
}
.cof-prog {
  border-bottom: 1px solid var(--cof-line);
  margin: 0;
}
.cof .cof-prog-head {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .1rem 1rem;
  padding: .65rem .25rem;
  text-align: left;
}
.cof-prog-name { font-weight: 600; }
.cof-prog-roman {
  grid-column: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: var(--cof-muted);
  font-size: .9em;
}
.cof-prog-chords {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 700;
  white-space: nowrap;
}
.cof-prog.is-open .cof-prog-chords { color: var(--cof-selected); }
.cof-prog-body { padding: .25rem .25rem 1rem; }
.cof-prog-body .cof-hint { margin: .75rem 0 0; }

/* Capo */
.cof-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cof-capo {
  width: 100%;
  border-collapse: collapse;
  font-size: .95em;
}
.cof-capo th,
.cof-capo td {
  padding: .55rem .6rem .55rem 0;
  border: 0;
  border-bottom: 1px solid var(--cof-line);
  text-align: left;
  vertical-align: middle;
  background: none;
  white-space: nowrap;
}
.cof-capo th { font-weight: 600; }
.cof-capo td:last-child { text-align: right; padding-right: 0; }
.cof-capo-chords { font-weight: 700; word-spacing: .35em; }
.cof-capo tr.is-best th,
.cof-capo tr.is-best td { background: color-mix(in srgb, var(--cof-family) 45%, transparent); }
.cof-capo tr.is-best th { padding-left: .5rem; border-radius: 6px 0 0 6px; }
.cof-capo tr.is-best td:last-child { padding-right: .5rem; border-radius: 0 6px 6px 0; }
.cof-badge {
  display: inline-block;
  font-size: .8em;
  font-weight: 600;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--cof-selected);
  color: var(--cof-on-selected);
}

/* Scale */
.cof-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  margin-bottom: 1rem;
}
.cof-seg-ctl {
  display: inline-flex;
  border: 1px solid var(--cof-line);
  border-radius: 8px;
  padding: 2px;
}
.cof .cof-seg-ctl button {
  padding: .3rem .8rem;
  border-radius: 6px;
  font-size: .9em;
  color: var(--cof-muted);
}
.cof .cof-seg-ctl button[aria-pressed="true"] {
  background: var(--cof-selected);
  color: var(--cof-on-selected);
}

.cof-fretboard {
  display: block;
  width: 100%;
  min-width: 440px;
  height: auto;
  font-family: inherit;
}
.cof-fb-wood { fill: var(--cof-fretboard); }
.cof-fb-inlay { fill: var(--cof-text); fill-opacity: .12; }
.cof-fb-fret { stroke: var(--cof-text); stroke-opacity: .3; stroke-width: 1.5; }
.cof-fb-nut { stroke: var(--cof-text); stroke-width: 4; }
.cof-fb-string { stroke: var(--cof-text); stroke-opacity: .5; }
.cof-fb-num { fill: var(--cof-muted); font-size: 11px; }
.cof-fb-note circle { fill: var(--cof-dots); }
.cof-fb-note text { fill: var(--cof-on-dots); font-size: 10px; font-weight: 700; }
.cof-fb-note.is-root circle { fill: var(--cof-root); }
.cof-fb-note.is-root text { fill: var(--cof-on-root); }

@media (prefers-reduced-motion: reduce) {
  .cof-seg-shape { transition: none; }
}