/* Circle of fifths tool (/circle-of-fifths). Everything is scoped to .cc. Dark skin on screen, black on white in print. */
@font-face { font-family: 'MtpKsBravura'; src: url('/vendor/vexflow/fonts/bravura-staff.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: block; }

.cc { padding: 14px; margin: 0; }
.cc-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 880px) { .cc-layout { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 28px; } }
.cc-main { min-width: 0; }
.cc-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 8px; }
.cc-bar button { padding: 6px 12px; }
.cc-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--mtp-muted); cursor: pointer; }
.cc-check input { width: 18px; height: 18px; accent-color: var(--mtp-brass); }
.cc-circle { width: min(100%, 480px); margin: 0 auto; aspect-ratio: 1 / 1; }
.cc-svg { display: block; width: 100%; height: auto; }
.cc-hint { margin: 8px 0 0; font-size: 13px; color: var(--mtp-muted); max-width: 52ch; }

/* ring segments */
.cc-svg .cc-bg { stroke: var(--mtp-line); stroke-width: 1; }
.cc-majring .cc-bg { fill: var(--mtp-raised-2); }
.cc-minring .cc-bg { fill: var(--mtp-night); }
.cc-sigring .cc-bg { fill: var(--mtp-raised); }
.cc-seg { cursor: pointer; outline: none; }
.cc-seg:hover .cc-bg { fill: #2a1f3a; }
.cc-svg .cc-lab { fill: var(--mtp-paper); font: 600 21px "Cormorant Garamond", Georgia, serif; pointer-events: none; }
.cc-minor .cc-lab { fill: var(--mtp-brass-bright); font-size: 16px; }
.cc-svg .cc-lab.cc-small { font-size: 17px; }
.cc-svg .cc-minor .cc-lab.cc-small, .cc-svg .cc-lab.cc-small.cc-minor { font-size: 12.5px; }
.cc-svg .cc-num { fill: var(--mtp-brass-bright); font: 700 11px "Source Sans 3", system-ui, sans-serif; pointer-events: none; }
.cc-svg .cc-sig { fill: var(--mtp-muted); font: 14px "Source Sans 3", system-ui, sans-serif; }
.cc-svg .cc-sig.cc-small { font-size: 11px; }
.cc-svg .cc-disc { fill: var(--mtp-night); stroke: var(--mtp-line); }
.cc-svg .cc-cname { fill: var(--mtp-paper); font: 700 17px "Source Sans 3", system-ui, sans-serif; text-anchor: middle; }
.cc-svg .cc-csig { fill: var(--mtp-brass-bright); font: 600 15px "Source Sans 3", system-ui, sans-serif; text-anchor: middle; }
/* the chords of the chosen key */
.cc-seg.ch .cc-bg { fill: #3a2c14; stroke: var(--mtp-brass); stroke-width: 1.5; }
.cc-seg.ch.dim .cc-bg { stroke-dasharray: 4 3; }
.cc-seg.rel .cc-bg { fill: #5a4420; }
.cc-seg.ch-on .cc-bg { fill: var(--mtp-copper); stroke: var(--mtp-brass-bright); }
.cc-seg.ch-on .cc-lab, .cc-seg.ch-on .cc-num { fill: #fff; }
.cc-seg.sel .cc-bg { fill: var(--mtp-brass-bright); stroke: var(--mtp-paper); stroke-width: 2; }
.cc-seg.sel .cc-lab, .cc-seg.sel .cc-num { fill: #1a1209; }
.cc-seg:focus-visible .cc-bg { stroke: #fff; stroke-width: 3; }

/* panel */
.cc-side { min-width: 0; }
.cc-title { margin: 0 0 6px; font-size: 26px; font-weight: 700; line-height: 1.1; }
.cc-facts { margin: 0 0 8px; display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.cc-facts > div { min-width: 0; }
.cc-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mtp-muted); }
.cc-facts dd { margin: 0; font-size: 16px; }
.cc-dim { color: var(--mtp-muted); font-size: 13px; }
.mtp-tool-panel button.cc-link { min-height: 0; padding: 0; border: 0; background: none; color: var(--mtp-brass-bright); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.cc-staves { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0; }
.cc-fig { margin: 0; flex: 1 1 110px; max-width: 200px; }
.cc-fig figcaption { font-size: 12px; color: var(--mtp-muted); text-align: center; }
.cc-spell { margin: 4px 0; }
.cc-sub { margin: 10px 0 4px; font-weight: 600; }
.cc .cc-chords { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 4px 0 8px; padding: 0; list-style: none; }
.cc-chords li { margin: 0; padding: 0; min-width: 0; }
.mtp-tool-panel .cc-chords button { width: 100%; min-height: 50px; padding: 4px 1px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cc-num2 { font-size: 12px; color: var(--mtp-muted); }
.cc-nm { font-size: 15px; font-weight: 700; }
.mtp-tool-panel .cc-chords button[aria-pressed="true"] .cc-num2 { color: inherit; }
.cc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0; }
.cc-status { font-size: 13px; color: var(--mtp-muted); }
.cc-trans { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--mtp-line); }
.cc-trans .cc-sub { margin-top: 0; }
.cc-trow { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cc-trow label { display: inline-flex; align-items: center; gap: 8px; }
.cc-result { margin: 8px 0 0; max-width: 70ch; }

/* key signature staves (shared with the finder) */
.ks-staff { display: block; width: 100%; height: auto; color: var(--mtp-paper); }
.ks-staff .ks-line { stroke: currentColor; stroke-width: 1; }
.ks-staff .ks-glyph { fill: currentColor; font-family: 'MtpKsBravura'; font-size: 40px; }
.ks-staff .ks-ghost { opacity: .2; }

@media (max-width: 480px) {
  .cc { padding: 8px 6px; }
  .cc-title { font-size: 23px; }
  .cc .cc-chords { gap: 3px; }
  .cc-nm { font-size: 13px; }
}

/* print: black on white; the circle with the chosen key marked by a heavier outline and light grey */
@media print {
  html.mtp-print-tool .cc { border: 0; padding: 0; }
  html.mtp-print-tool .cc-layout { display: block; }
  html.mtp-print-tool .cc-circle { width: 100mm; margin: 1mm 0; }
  html.mtp-print-tool .cc-svg .cc-bg { fill: #fff !important; stroke: #111 !important; stroke-width: 1; stroke-dasharray: none; }
  html.mtp-print-tool .cc-svg text { fill: #111 !important; }
  html.mtp-print-tool .cc-svg .cc-lab { font-weight: 700; }
  html.mtp-print-tool .cc-svg .cc-disc { fill: #fff; stroke: #111; }
  html.mtp-print-tool .cc-seg.ch .cc-num { display: none; }
  html.mtp-print-tool .cc[data-print-hl="on"] .cc-seg.sel .cc-bg { fill: #ccc !important; stroke: #000 !important; stroke-width: 3; }
  html.mtp-print-tool .cc[data-print-hl="on"] .cc-seg.rel .cc-bg { fill: #e6e6e6 !important; }
  html.mtp-print-tool .cc[data-print-hl="on"] .cc-seg.ch .cc-bg { stroke-width: 2.2; }
  html.mtp-print-tool .cc[data-print-hl="on"] .cc-seg.ch .cc-num { display: block; }
  html.mtp-print-tool .cc[data-print-hl="off"] .cc-center, html.mtp-print-tool .cc[data-print-hl="off"] .cc-cname, html.mtp-print-tool .cc[data-print-hl="off"] .cc-csig { display: none; }
  html.mtp-print-tool .cc-title { font-size: 20pt; }
  html.mtp-print-tool .cc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 8mm; margin: 0 0 2mm; }
  html.mtp-print-tool .cc-link { text-decoration: none !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; }
  html.mtp-print-tool .cc-staves { display: flex; gap: 8mm; }
  html.mtp-print-tool .cc-fig { max-width: 44mm; flex: 0 0 44mm; }
  html.mtp-print-tool .cc-staves { margin: 0; }
  html.mtp-print-tool .cc-title { margin: 0 0 1mm; }
  html.mtp-print-tool .ks-staff { color: #111; }
  html.mtp-print-tool .mtp-tool-panel button:not(.cc-link) { border: 1px solid #555 !important; }
  html.mtp-print-tool .cc-chords { grid-template-columns: repeat(7, 1fr); max-width: 150mm; }
  html.mtp-print-tool .cc[data-print-hl="off"] .cc-side { display: none; }
}