/* LG Circle of Fifths — integration only. No canonical SVG artwork is rewritten. */
#c5-app{min-width:0;box-sizing:border-box}
#c5-app .c5-card,#c5-app .c5-panel,#c5-app .c5-staff,#c5-app .c5-svg-wrap{min-width:0;max-width:100%;box-sizing:border-box}
#c5-app .c5-svg-wrap{overflow:hidden}
#c5-app #c5-circle{display:block;max-width:100%;height:auto}
#c5-app #c5-staff-scale,#c5-app #c5-staff-chords{display:block;min-width:0;max-width:100%;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x;box-sizing:border-box}
#c5-app #c5-staff-scale>svg,#c5-app #c5-staff-chords>svg{display:block!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;flex:none!important;overflow:visible!important}
/* The Library supplies the complete icon SVG. Scale only its outer presentation wrapper. */
#c5-app .c5-tool-icon{overflow:visible}
#c5-app .c5-tool-icon .lg-c5-icon-artwork{display:block;flex:none;min-width:0;transform-origin:center center;transform:scale(var(--lg-c5-local-scale,1))}
#c5-app .c5-tool-icon .lg-c5-icon-artwork>svg{display:block;overflow:visible;flex:none}
#c5-app .lg-c5-dependency-warning{padding:10px 12px;margin:10px 0;border:1px solid #efd788;border-radius:8px;background:#fff8dc;color:#725000;font:13px/1.5 system-ui,sans-serif}
@media(max-width:700px){#c5-app .c5-svg-wrap{padding-inline:6px}#c5-app .c5-panel-wide{padding-inline:10px}}

/* =========================================================
   0.1.1 — local presentation corrections
   Consumer-only: canonical SVG artwork remains untouched.
========================================================= */

/*
 * Relative icon sizing contract:
 * rendered Library size × local module multiplier.
 * Changing an icon's scale in LG SVG Library therefore remains observable here.
 */
#c5-app #c5-langBtn{
  --lg-c5-local-scale:.65;
}
#c5-app .c5-chord-tool-group .c5-tool-btn{
  --lg-c5-local-scale:.64;
}

/* Give Settings/Scale a little more desktop width while keeping the circle dominant. */
@media (min-width:1101px){
  #c5-app{
    grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  }
}

/* Scale notation must always fit its own module; never make Scale a horizontal viewport. */
#c5-app #c5-staff-scale{
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  overscroll-behavior-x:auto;
  touch-action:auto;
}
#c5-app #c5-staff-scale>svg{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  overflow:visible!important;
}

/* Degree notation: compact text box; radial spacing is handled in the module JS. */
#c5-app #c5-circle .c5-roman-notation{
  letter-spacing:-.015em;
}

/* Mobile/tablet: same rules, tuned to the narrower physical button/circle presentation. */
@media (max-width:1100px){
  #c5-app{
    min-width:0;
    max-width:100%;
  }
  #c5-app .c5-card,
  #c5-app .c5-panel,
  #c5-app .c5-output,
  #c5-app .c5-staff{
    min-width:0;
    max-width:100%;
  }
}

@media (max-width:700px){
  #c5-app #c5-langBtn{
    --lg-c5-local-scale:.60;
  }
  #c5-app .c5-chord-tool-group .c5-tool-btn{
    --lg-c5-local-scale:.58;
  }

  #c5-app .c5-chord-tool-group{
    flex-wrap:wrap;
  }

  #c5-app #c5-staff-scale{
    width:100%;
    max-width:100%;
    padding-bottom:0;
  }

  /* Keep the circle generous but never wider than its WordPress container. */
  #c5-app .c5-svg-wrap{
    min-width:0;
    max-width:100%;
    overflow:hidden;
  }
  #c5-app #c5-circle{
    width:100%;
    max-width:620px;
    height:auto;
  }
}

@media (max-width:1100px) and (orientation:landscape){
  #c5-app{
    width:auto;
    max-width:100%;
    min-width:0;
  }
  #c5-app #c5-staff-scale{
    overflow-x:hidden!important;
  }
}


/* =========================================================
   0.1.3 — LG RESEARCH / WORDS / PROFILE VISUAL LANGUAGE
   Visual layer only. Functional geometry from 0.1.2 is preserved.
   The WordPress theme remains authoritative over the outer app width.
========================================================= */
#c5-app{
  --lg-accent:#F6A400;
  --lg-blue:#0A84FF;
  --lg-ink:#171717;
  --lg-muted:#62666d;
  --lg-line:#d8d8d8;
  --lg-line-soft:#ececec;
  --lg-paper:#ffffff;
  --lg-soft:#f7f7f7;

  /* aliases retained for the authored circle/notation code */
  --text:var(--lg-ink);
  --muted:var(--lg-muted);
  --border:var(--lg-line);
  --border-strong:#bfc3c7;
  --panel:transparent;
  --surface:var(--lg-paper);
  --amber:var(--lg-accent);
  --amber-dark:#a96f00;
  --amber-soft:rgba(246,164,0,.10);
  --teal:var(--lg-blue);
  --teal-dark:#0068c9;
  --teal-soft:rgba(10,132,255,.07);
  --shadow:none;

  color:var(--lg-ink);
  background:transparent;
  font-family:inherit;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

#c5-app button,
#c5-app input,
#c5-app select{
  font:inherit;
}

/* Major regions: no decorative outer cards. */
#c5-app .c5-card,
#c5-app .c5-circle-card,
#c5-app .c5-chords-card{
  color:var(--lg-ink);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}

#c5-app .c5-panel,
#c5-app .c5-panel-wide{
  padding:0;
  gap:1.35rem;
  background:transparent;
}

/* Functional toolbar: same flat grammar as the canonical academic modules. */
#c5-app .c5-toolbar{
  min-height:0;
  margin:0 0 2rem;
  padding:0 0 1rem;
  gap:8px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--lg-line);
  border-radius:0;
  box-shadow:none;
}

#c5-app .c5-tool-divider{
  background:var(--lg-line);
}

#c5-app .c5-tool-btn,
#c5-app .c5-toolbar .c5-tool-btn{
  --btn-size:48px;
  position:relative;
  width:var(--btn-size);
  height:var(--btn-size);
  color:var(--lg-ink);
  background:var(--lg-paper);
  border:1px solid var(--lg-ink);
  border-radius:6px;
  box-shadow:none;
  transform:none;
  transition:color .12s ease,border-color .12s ease,background .12s ease;
}

#c5-app .c5-tool-btn:hover,
#c5-app .c5-state-tool[data-on]:hover{
  color:var(--lg-blue);
  background:var(--lg-soft);
  border-color:var(--lg-blue);
  box-shadow:none;
  transform:none;
}

#c5-app .c5-state-tool[data-on],
#c5-app .c5-tool-btn[data-on]{
  color:var(--lg-ink)!important;
  background:var(--lg-soft)!important;
  border-color:var(--lg-ink)!important;
  box-shadow:inset 0 -3px 0 var(--lg-accent)!important;
}

#c5-app button:focus-visible,
#c5-app .c5-tool-btn:focus-visible{
  outline:2px solid var(--lg-blue);
  outline-offset:3px;
}

/* Section headings: canonical Research/Profile rule + yellow signature. */
#c5-app #c5-titleSettings,
#c5-app .c5-staff h3{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  margin:0 0 1.35rem;
  padding:0 0 .7rem;
  color:var(--lg-ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--lg-ink);
  border-radius:0;
  box-shadow:none;
  font-size:.80rem;
  line-height:1.22;
  font-weight:780;
  letter-spacing:.145em;
  text-transform:uppercase;
}

#c5-app #c5-titleSettings::after,
#c5-app .c5-staff h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:34px;
  height:3px;
  border-radius:99px;
  background:var(--lg-accent);
}

/* Internal labels are typographic, not cards. */
#c5-app .c5-sub{
  margin:0 0 .7rem!important;
  color:var(--lg-muted);
  font-size:11.5px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
}

#c5-app .c5-controls,
#c5-app .c5-chord-tools,
#c5-app .c5-output{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}

#c5-app .c5-controls > div,
#c5-app .c5-chord-tools-card,
#c5-app .c5-staff,
#c5-app .c5-staff-wide{
  min-width:0;
  padding:0;
  color:var(--lg-ink);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

#c5-app .c5-section{
  gap:0;
}

/* Mode controls: neutral by default; yellow marks the selected state. */
#c5-app .c5-row{
  gap:7px;
}

#c5-app .c5-chip,
#c5-app .c5-mode-major,
#c5-app .c5-mode-minor,
#c5-app .c5-mode-exotic{
  min-height:34px;
  padding:6px 10px;
  color:var(--lg-ink);
  background:var(--lg-paper);
  border:1px solid var(--lg-line);
  border-radius:4px;
  box-shadow:none;
  font-size:13px;
  line-height:1.2;
  font-weight:650;
  transform:none;
  transition:color .12s ease,border-color .12s ease,background .12s ease;
}

#c5-app .c5-chip:hover{
  color:var(--lg-blue);
  background:var(--lg-soft);
  border-color:var(--lg-blue);
  box-shadow:none;
  transform:none;
}

#c5-app .c5-chip[data-on]{
  color:var(--lg-ink)!important;
  background:var(--lg-soft)!important;
  border-color:var(--lg-ink)!important;
  box-shadow:inset 0 -3px 0 var(--lg-accent)!important;
}

/* Circle: preserve musical information, but use the site interaction palette. */
#c5-app .c5-svg-wrap{
  background:transparent;
}

#c5-app #c5-circle .wedge.major{
  fill:#f7f7f7!important;
  stroke:var(--lg-line)!important;
}

#c5-app #c5-circle .wedge:hover{
  filter:none;
  stroke:var(--lg-blue)!important;
}

#c5-app #c5-circle .wedge.selected{
  fill:var(--lg-accent)!important;
  stroke:#a96f00!important;
}

#c5-app #c5-circle .label-badge{
  fill:var(--lg-paper)!important;
  stroke:var(--lg-line)!important;
}

#c5-app #c5-circle text.label{
  fill:var(--lg-ink)!important;
}

#c5-app #c5-circle .quality-arc.arc-major{
  stroke:rgba(246,164,0,.52)!important;
}

#c5-app #c5-circle .quality-arc.arc-minor{
  stroke:rgba(10,132,255,.38)!important;
}

#c5-app #c5-circle .quality-arc.arc-dim{
  stroke:#b9bdc1!important;
}

/* Current mode reads as an editorial status, not a pill/card. */
#c5-app .c5-mode-bottom{
  position:relative;
  width:max-content;
  max-width:calc(100% - 24px);
  margin:.45rem auto .8rem;
  padding:.2rem 0 .2rem .75rem;
  color:var(--lg-ink);
  background:transparent;
  border:0;
  border-left:3px solid var(--lg-accent);
  border-radius:0;
  box-shadow:none;
  font-size:11.5px;
  line-height:1.3;
  font-weight:750;
  letter-spacing:.06em;
  text-align:left;
}

/* Engraving containers stay neutral; music itself remains untouched. */
#c5-app #c5-staff-scale,
#c5-app #c5-staff-chords{
  background:var(--lg-paper);
}

#c5-app .c5-vf-label-top{
  fill:var(--lg-ink);
  font-family:inherit;
  font-weight:700;
}

#c5-app .c5-vf-label-bottom{
  fill:#4f5357;
}

/* The final full-width chord section is separated by space/rule rather than a card. */
#c5-app .c5-chords-card{
  margin-top:.6rem;
  padding-top:1.6rem;
  border-top:1px solid var(--lg-line);
}

@media (min-width:1101px){
  #c5-app{
    gap:2rem 2.4rem;
  }
  #c5-app .c5-panel{
    gap:1.35rem;
  }
}

@media (max-width:1100px){
  #c5-app{
    gap:1.8rem;
  }
  #c5-app .c5-circle-card{
    padding-bottom:.4rem;
  }
}

@media (max-width:700px){
  #c5-app{
    padding:0 0 1.5rem;
    gap:1.55rem;
    font-size:16px;
  }

  #c5-app .c5-toolbar{
    margin-bottom:1.5rem;
    padding-bottom:.8rem;
  }

  #c5-app .c5-tool-btn,
  #c5-app .c5-toolbar .c5-tool-btn{
    --btn-size:46px;
  }

  #c5-app #c5-titleSettings,
  #c5-app .c5-staff h3{
    margin-bottom:1.1rem;
  }

  #c5-app .c5-chip,
  #c5-app .c5-mode-major,
  #c5-app .c5-mode-minor,
  #c5-app .c5-mode-exotic{
    min-height:33px;
    padding:6px 9px;
    font-size:12.5px;
  }

  #c5-app .c5-chords-card{
    margin-top:0;
    padding-top:1.35rem;
  }
}