/* Circle of Fifths Tool Styles */

/* Layout */
.cof-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.cof-circle-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

#cof-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 20px rgba(0, 255, 65, 0.08));
}

/* SVG Circle Segments */
.cof-segment {
  cursor: pointer;
  transition: all 0.25s ease;
}

.cof-segment path {
  stroke: rgba(0, 255, 65, 0.25);
  stroke-width: 1.5;
  transition: all 0.25s ease;
}

.cof-segment.cof-major path {
  fill: rgba(0, 255, 65, 0.06);
}

.cof-segment.cof-minor path {
  fill: rgba(0, 212, 255, 0.06);
}

.cof-segment:hover path {
  stroke: rgba(0, 255, 65, 0.6);
}

.cof-segment.cof-major:hover path {
  fill: rgba(0, 255, 65, 0.15);
}

.cof-segment.cof-minor:hover path {
  fill: rgba(0, 212, 255, 0.15);
}

.cof-segment.cof-selected path {
  stroke: #00ff41;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 8px rgba(0, 255, 65, 0.6));
}

.cof-segment.cof-selected.cof-major path {
  fill: rgba(0, 255, 65, 0.25);
}

.cof-segment.cof-selected.cof-minor path {
  fill: rgba(0, 212, 255, 0.25);
}

.cof-segment.cof-neighbor path {
  stroke: rgba(0, 255, 65, 0.45);
  stroke-width: 2;
}

.cof-segment.cof-neighbor.cof-major path {
  fill: rgba(0, 255, 65, 0.1);
}

.cof-segment.cof-neighbor.cof-minor path {
  fill: rgba(0, 212, 255, 0.1);
}

.cof-segment.cof-relative path {
  stroke: #00d4ff;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.5));
}

.cof-segment.cof-relative.cof-major path {
  fill: rgba(0, 212, 255, 0.15);
}

.cof-segment.cof-relative.cof-minor path {
  fill: rgba(0, 212, 255, 0.2);
}

/* SVG Text Labels */
.cof-label {
  font-family: 'Orbitron', 'Share Tech Mono', monospace;
  fill: rgba(255, 255, 255, 0.8);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  transition: fill 0.25s ease;
  font-weight: 700;
}

.cof-label-major {
  font-size: 14px;
}

.cof-label-minor {
  font-size: 11px;
  fill: rgba(0, 212, 255, 0.7);
}

.cof-segment.cof-selected .cof-label {
  fill: #00ff41;
}

.cof-segment.cof-selected .cof-label-minor {
  fill: #00d4ff;
}

/* Center decoration */
.cof-center-circle {
  fill: var(--color-bg, #0a0a0a);
  stroke: rgba(0, 255, 65, 0.2);
  stroke-width: 1;
}

.cof-center-text {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  fill: rgba(0, 255, 65, 0.4);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* Info Panel */
.cof-info-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.key-display {
  text-align: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.key-display__name {
  display: block;
  font-family: 'Orbitron', monospace;
  font-size: 2rem;
  color: #00ff41;
  text-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
  margin-bottom: var(--space-xs);
}

.key-display__relative {
  display: block;
  font-family: 'Share Tech Mono', monospace;
  font-size: var(--fs-sm);
  color: #00d4ff;
}

.info-section {
  margin-bottom: var(--space-md);
}

.info-section__title {
  font-family: 'Orbitron', monospace;
  font-size: var(--fs-sm);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-sm);
}

/* Key signature text */
.key-sig-text {
  font-family: 'Share Tech Mono', monospace;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

/* Staff canvas */
#staff-canvas {
  display: block;
  width: 100%;
  max-width: 340px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Chord grid */
.chord-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-xs);
}

.chord-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xs);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: all 0.2s;
}

.chord-chip:hover {
  border-color: var(--color-primary);
}

.chord-chip__numeral {
  font-family: 'Share Tech Mono', monospace;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.chord-chip__name {
  font-family: 'Orbitron', monospace;
  font-size: var(--fs-xs);
  color: var(--color-primary);
  font-weight: 700;
}

.chord-chip__quality {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.chord-chip--tonic {
  border-color: rgba(0, 255, 65, 0.4);
  background: rgba(0, 255, 65, 0.05);
}

.chord-chip--dominant {
  border-color: rgba(255, 149, 0, 0.4);
  background: rgba(255, 149, 0, 0.05);
}

.chord-chip--dominant .chord-chip__name {
  color: #ff9500;
}

.chord-chip--subdominant {
  border-color: rgba(0, 212, 255, 0.4);
  background: rgba(0, 212, 255, 0.05);
}

.chord-chip--subdominant .chord-chip__name {
  color: #00d4ff;
}

/* Enharmonic display */
.enharmonic-display {
  font-family: 'Share Tech Mono', monospace;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding: var(--space-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.enharmonic-display .enharmonic-eq {
  color: #ff9500;
  font-weight: 600;
}

/* Progressions */
.progressions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.progression-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: 'Share Tech Mono', monospace;
  font-size: var(--fs-sm);
}

.progression-item__name {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.progression-item__chords {
  color: var(--color-primary);
}

/* Modulation display */
.modulation-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}

.modulation-card {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.modulation-card:hover {
  border-color: var(--color-primary);
  background: rgba(0, 255, 65, 0.05);
}

.modulation-card__direction {
  font-family: 'Share Tech Mono', monospace;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.modulation-card__key {
  font-family: 'Orbitron', monospace;
  font-size: var(--fs-sm);
  color: var(--color-primary);
  font-weight: 700;
}

.modulation-card--relative .modulation-card__key {
  color: #00d4ff;
}

/* Info actions */
.info-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.info-actions .btn {
  flex: 1;
  min-width: 120px;
  font-size: var(--fs-sm);
  padding: var(--space-xs) var(--space-sm);
}

/* Related tools */
.related-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  max-width: 800px;
  margin: 0 auto;
}

.related-tool-card {
  display: block;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  text-align: center;
  transition: all 0.2s;
}

.related-tool-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.related-tool-card__icon {
  font-size: 2rem;
  margin-bottom: var(--space-xs);
}

.related-tool-card__name {
  font-family: 'Orbitron', monospace;
  font-size: var(--fs-sm);
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.related-tool-card__desc {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Content / FAQ reuse */
.content-section h2 { color: var(--color-primary); font-family: var(--font-display); margin-bottom: var(--space-md); }
.content-section h3 { color: var(--color-secondary); margin: var(--space-lg) 0 var(--space-sm); }
.content-list { padding-left: var(--space-lg); line-height: 1.8; }
.content-list li { margin-bottom: var(--space-sm); }
.formula-explainer { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin: var(--space-md) 0; }
.formula-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); }
.fc-title { font-size: var(--fs-sm); color: var(--color-primary); font-weight: 600; margin-bottom: var(--space-xs); }
.fc-desc { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.6; }

.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-sm); overflow: hidden; }
.faq-question { padding: var(--space-md); cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: '+'; color: var(--color-primary); font-size: 1.2em; }
details[open] .faq-question::after { content: '\2212'; }
.faq-answer { padding: 0 var(--space-md) var(--space-md); color: var(--color-text-muted); line-height: 1.7; border-top: 1px solid var(--color-border); }

/* Print styles */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .header, .footer, .mobile-menu, .breadcrumb, .skip-link,
  .info-actions, #how-to-use, #faq, .related-tools-grid,
  .back-to-top, .hamburger { display: none !important; }
  .cof-layout { grid-template-columns: 1fr 1fr; }
  .cof-info-panel { background: #fff; border-color: #ccc; }
  .cof-segment path { stroke: #333; }
  .cof-segment.cof-major path { fill: #f0f0f0; }
  .cof-segment.cof-minor path { fill: #e0e0e0; }
  .cof-segment.cof-selected path { fill: #ccc; stroke: #000; stroke-width: 3; }
  .cof-label { fill: #000; }
  .cof-label-minor { fill: #444; }
  .key-display__name { color: #000; text-shadow: none; }
  .key-display__relative { color: #444; }
  .info-section__title { color: #000; }
  .chord-chip { background: #f5f5f5; border-color: #ccc; }
  .chord-chip__name { color: #000; }
  #staff-canvas { background: #fff; border-color: #ccc; }
  .progression-item, .modulation-card, .enharmonic-display { background: #f5f5f5; border-color: #ccc; color: #000; }
  .progression-item__chords { color: #000; }
  .modulation-card__key { color: #000; }
}

/* Print view toggle class */
body.print-view {
  background: #fff !important;
  color: #000 !important;
}

body.print-view .header,
body.print-view .footer,
body.print-view .mobile-menu,
body.print-view .breadcrumb,
body.print-view .skip-link,
body.print-view #how-to-use,
body.print-view #faq,
body.print-view .related-tools-grid,
body.print-view .back-to-top,
body.print-view .info-actions { display: none !important; }

body.print-view .cof-info-panel { background: #fff; border-color: #ccc; }
body.print-view .key-display__name { color: #000; text-shadow: none; }
body.print-view .cof-segment path { stroke: #333; }
body.print-view .cof-segment.cof-major path { fill: #f0f0f0; }
body.print-view .cof-segment.cof-minor path { fill: #e0e0e0; }
body.print-view .cof-segment.cof-selected path { fill: #ccc; stroke: #000; stroke-width: 3; }
body.print-view .cof-label { fill: #000; }

/* Responsive */
@media (max-width: 900px) {
  .cof-layout {
    grid-template-columns: 1fr;
  }
  .cof-circle-wrap {
    max-width: 440px;
  }
  .chord-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .modulation-display {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .formula-explainer { grid-template-columns: 1fr; }
  .related-tools-grid { grid-template-columns: 1fr; }
  .cof-circle-wrap { max-width: 360px; }
  .cof-label-major { font-size: 12px; }
  .cof-label-minor { font-size: 9px; }
  .chord-grid { grid-template-columns: repeat(4, 1fr); }
  .info-actions { flex-direction: column; }
  .info-actions .btn { min-width: unset; }
}

@media (max-width: 480px) {
  .cof-circle-wrap { max-width: 300px; }
  .cof-label-major { font-size: 10px; }
  .cof-label-minor { font-size: 8px; }
  .chord-grid { grid-template-columns: repeat(3, 1fr); }
  .key-display__name { font-size: 1.5rem; }
}