/* ============================================================
   LG Chords 0.1.3 — Research / Words / Profile visual language
   Consumer skin only. WordPress owns the outer page geometry.
   Harmonic-semantic colours and Synesthesia artwork are preserved.
   ============================================================ */
#mod-app.lg-chords-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 existing functional CSS */
  --panel:var(--lg-paper);
  --panel-soft:var(--lg-soft);
  --line:var(--lg-line);
  --line-soft:var(--lg-line-soft);
  --text:var(--lg-ink);
  --muted:var(--lg-muted);
  --shadow:none;
  --font-ui:inherit;
  --font-editorial:inherit;

  min-width:0;
  color:var(--lg-ink);
  background:transparent;
  font-family:inherit;
  font-size:16.5px;
  line-height:1.62;
}

#mod-app.lg-chords-app button,
#mod-app.lg-chords-app input,
#mod-app.lg-chords-app select{
  font-family:inherit;
}

/* No decorative outer app card. */
#mod-app.lg-chords-app .app-shell{
  width:100%;
  max-width:100%;
  margin:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}

/* Functional toolbar, integrated into the page. */
#mod-app.lg-chords-app .command-bar{
  width:100%;
  max-width:100%;
  margin:0 0 2rem;
  padding:0 0 1rem;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--lg-line);
  border-radius:0;
  box-shadow:none;
}

/* Shared Library supplies the artwork; the module only styles the control surface. */
#mod-app.lg-chords-app .tb-btn{
  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;
}
#mod-app.lg-chords-app .tb-btn:hover:not(:disabled){
  color:var(--lg-blue);
  background:var(--lg-soft);
  border-color:var(--lg-blue);
  box-shadow:none;
  transform:none;
}
#mod-app.lg-chords-app .tb-btn:active:not(:disabled){
  transform:none;
  box-shadow:inset 0 -2px 0 var(--lg-line);
}
#mod-app.lg-chords-app .tb-btn.active,
#mod-app.lg-chords-app .tb-btn.is-active,
#mod-app.lg-chords-app .tb-btn[aria-pressed="true"],
#mod-app.lg-chords-app .meter-btn[aria-checked="true"]{
  color:var(--lg-ink);
  background:var(--lg-soft);
  border-color:var(--lg-ink);
  box-shadow:inset 0 -3px 0 var(--lg-accent);
  transform:none;
}
#mod-app.lg-chords-app .tb-btn.danger{
  color:var(--lg-ink);
}
#mod-app.lg-chords-app .tb-btn.danger:hover{
  color:var(--danger);
  border-color:var(--danger);
}
#mod-app.lg-chords-app button:focus-visible,
#mod-app.lg-chords-app input:focus-visible,
#mod-app.lg-chords-app select:focus-visible{
  outline:2px solid var(--lg-blue);
  outline-offset:3px;
  box-shadow:none;
}

/* Library intrinsic rendered size × module multiplier. */
#mod-app.lg-chords-app .tb-icon{
  overflow:visible;
}
#mod-app.lg-chords-app .tb-icon .lg-chords-icon-artwork{
  display:block;
  flex:none;
  min-width:0;
  transform-origin:center center;
  transform:scale(var(--lg-chords-local-scale,.58));
}
#mod-app.lg-chords-app .tb-icon .lg-chords-icon-artwork > svg{
  display:block;
  width:auto!important;
  height:auto!important;
  min-width:0;
  min-height:0;
  max-width:none!important;
  max-height:none!important;
  overflow:visible!important;
  flex:none;
}
#mod-app.lg-chords-app #transportBtn{--lg-chords-local-scale:.62}
#mod-app.lg-chords-app #labelBPM{--lg-chords-local-scale:.74}
/* All time-signature icons share one consumer multiplier; Library scale remains authoritative. */
#mod-app.lg-chords-app .meter-btn[data-meter="2"],
#mod-app.lg-chords-app .meter-btn[data-meter="3"],
#mod-app.lg-chords-app .meter-btn[data-meter="4"]{--lg-chords-local-scale:.68}
#mod-app.lg-chords-app #audioBtn{--lg-chords-local-scale:.72}
#mod-app.lg-chords-app #synToggleBtn{--lg-chords-local-scale:.70}
#mod-app.lg-chords-app #langBtn{--lg-chords-local-scale:.58}
#mod-app.lg-chords-app #chordsBtn{--lg-chords-local-scale:.42}
#mod-app.lg-chords-app #helpBtn{--lg-chords-local-scale:.58}
#mod-app.lg-chords-app #clear{--lg-chords-local-scale:.62}
#mod-app.lg-chords-app .chord-remove,
#mod-app.lg-chords-app .help-modal .tb-btn{--lg-chords-local-scale:.60}

/* Labels follow the same restrained typographic grammar as Research. */
#mod-app.lg-chords-app .control-label,
#mod-app.lg-chords-app .step-label,
#mod-app.lg-chords-app .tempo-control span{
  color:var(--lg-muted);
  font-size:11.5px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
}

#mod-app.lg-chords-app input[type="number"],
#mod-app.lg-chords-app #chordInput{
  color:var(--lg-ink);
  background:var(--lg-paper);
  border:1px solid var(--lg-line);
  border-radius:4px;
  box-shadow:none;
}
#mod-app.lg-chords-app #chordInput{
  font-size:16.5px;
}
#mod-app.lg-chords-app #chordInput:focus{
  border-color:var(--lg-blue);
}
#mod-app.lg-chords-app #chordInput[aria-invalid="true"]{
  border-color:var(--danger);
  box-shadow:inset 3px 0 0 var(--danger);
}

#mod-app.lg-chords-app input[type="range"]{
  accent-color:var(--lg-blue);
}

/* Duration controls stay musical, but lose the app-card treatment. */
#mod-app.lg-chords-app .duration-btn{
  color:var(--lg-ink);
  background:var(--lg-paper);
  border:1px solid var(--lg-line);
  border-radius:4px;
  box-shadow:none;
}
#mod-app.lg-chords-app .duration-btn:hover{
  color:var(--lg-blue);
  border-color:var(--lg-blue);
  background:var(--lg-soft);
}
#mod-app.lg-chords-app .duration-btn.is-active{
  color:var(--lg-ink);
  background:var(--lg-soft);
  border-color:var(--lg-ink);
  box-shadow:inset 0 -3px 0 var(--lg-accent);
}
#mod-app.lg-chords-app .duration-btn small,
#mod-app.lg-chords-app .duration-btn.is-active small{
  color:var(--lg-muted);
  background:transparent;
  border-radius:0;
}

/* Workspace uses sections, not stacked decorative cards. */
#mod-app.lg-chords-app .app-workspace{
  gap:2.7rem;
  padding:0;
}
#mod-app.lg-chords-app .app-card,
#mod-app.lg-chords-app .composer-card,
#mod-app.lg-chords-app .progression-card{
  min-width:0;
  color:var(--lg-ink);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* Composer section: editorial separator + yellow signature. */
#mod-app.lg-chords-app .composer-card{
  position:relative;
  padding:0 0 1.35rem;
  border-bottom:1px solid var(--lg-ink);
}
#mod-app.lg-chords-app .composer-card::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:34px;
  height:3px;
  border-radius:99px;
  background:var(--lg-accent);
}
#mod-app.lg-chords-app .composer-card h2,
#mod-app.lg-chords-app .section-heading h2,
#mod-app.lg-chords-app .modal-heading h2{
  color:var(--lg-ink);
  font-size:.80rem;
  line-height:1.22;
  font-weight:780;
  letter-spacing:.145em;
  text-transform:uppercase;
}

/* Progression title uses the canonical Research section rule. */
#mod-app.lg-chords-app .progression-card{
  position:static;
  padding:0;
}
#mod-app.lg-chords-app .section-heading{
  position:relative;
  margin:0 0 1.35rem;
  padding:0 0 .7rem;
  border:0;
  border-bottom:1px solid var(--lg-ink);
}
#mod-app.lg-chords-app .section-heading::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:34px;
  height:3px;
  border-radius:99px;
  background:var(--lg-accent);
}
#mod-app.lg-chords-app .progression-meta,
#mod-app.lg-chords-app #durCapsule{
  color:var(--lg-muted);
  font-family:inherit;
  font-size:11.5px;
}

/* Composer feedback is informational, not a coloured card. */
#mod-app.lg-chords-app .selection-readout{
  color:var(--lg-muted);
  font-family:inherit;
}
#mod-app.lg-chords-app .selection-readout:hover,
#mod-app.lg-chords-app .selection-readout:focus-visible{
  color:var(--lg-blue);
}
#mod-app.lg-chords-app .status-line{
  min-height:0;
  padding:.35rem 0 .35rem .9rem;
  color:var(--lg-muted);
  background:transparent;
  border:0;
  border-left:3px solid var(--lg-accent);
  border-radius:0;
  box-shadow:none;
  font-family:inherit;
}
#mod-app.lg-chords-app .status-line:hover,
#mod-app.lg-chords-app .status-line:focus-visible{
  color:var(--lg-ink);
  border-color:var(--lg-accent);
  box-shadow:none;
}
#mod-app.lg-chords-app .status-dot{
  display:none;
}

/* Suggestions are one of the few floating surfaces that still need elevation. */
#mod-app.lg-chords-app .suggestions{
  padding:6px;
  background:var(--lg-paper);
  border:1px solid var(--lg-ink);
  border-radius:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
#mod-app.lg-chords-app .suggestion-btn{
  border-radius:3px;
  font-family:inherit;
}
#mod-app.lg-chords-app .suggestion-btn:hover,
#mod-app.lg-chords-app .suggestion-btn.is-active{
  color:var(--lg-blue);
  background:var(--lg-soft);
}
#mod-app.lg-chords-app .suggestion-btn small{
  font-family:inherit;
}

/* Bars remain functional containers. Semantic harmonic colours are preserved. */
#mod-app.lg-chords-app .bars{
  gap:9px;
}
#mod-app.lg-chords-app .bar{
  background:var(--lg-paper);
  border:1px solid var(--lg-line);
  border-radius:4px;
  box-shadow:none;
}
#mod-app.lg-chords-app .bar-number{
  color:var(--lg-muted);
  background:transparent;
  border:0;
  border-radius:0;
  font-family:inherit;
}
#mod-app.lg-chords-app .bar-meter,
#mod-app.lg-chords-app .bar-empty,
#mod-app.lg-chords-app .bar-event-label,
#mod-app.lg-chords-app .bar-event-meta,
#mod-app.lg-chords-app .time-block{
  font-family:inherit;
}
#mod-app.lg-chords-app .bar-event{
  border-radius:3px;
  box-shadow:none;
  transform:none;
}
#mod-app.lg-chords-app .bar-event:hover,
#mod-app.lg-chords-app .bar-event:focus-visible{
  outline:2px solid var(--lg-blue);
  outline-offset:1px;
  box-shadow:none;
  transform:none;
}
#mod-app.lg-chords-app .bar-event.is-selected,
#mod-app.lg-chords-app .bar-event.is-playing{
  outline:1px solid var(--lg-ink);
  outline-offset:1px;
  box-shadow:inset 0 -3px 0 var(--lg-accent);
  transform:none;
}
#mod-app.lg-chords-app .insert-slot:hover,
#mod-app.lg-chords-app .insert-slot:focus-visible,
#mod-app.lg-chords-app .insert-slot.is-target{
  color:var(--lg-blue);
  background:var(--lg-soft);
  border-color:var(--lg-blue);
  box-shadow:none;
}

/* Modals: white editorial sheet; no app-card nesting. */
#mod-app.lg-chords-app .help-modal{
  color:var(--lg-ink);
  background:var(--lg-paper);
  border:1px solid var(--lg-ink);
  border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  font-family:inherit;
}
#mod-app.lg-chords-app .help-modal::backdrop{
  background:rgba(0,0,0,.36);
  backdrop-filter:none;
}
#mod-app.lg-chords-app .modal-heading{
  position:relative;
  margin:0 0 1.4rem;
  padding:0 0 .7rem;
  border:0;
  border-bottom:1px solid var(--lg-ink);
}
#mod-app.lg-chords-app .modal-heading::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:34px;
  height:3px;
  border-radius:99px;
  background:var(--lg-accent);
}
#mod-app.lg-chords-app .help-content,
#mod-app.lg-chords-app .catalog-intro{
  color:var(--lg-ink);
  font-family:inherit;
}
#mod-app.lg-chords-app .help-step,
#mod-app.lg-chords-app .chord-type-group{
  padding:1rem 0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--lg-line);
  border-radius:0;
  box-shadow:none;
}
#mod-app.lg-chords-app .help-step h3,
#mod-app.lg-chords-app .chord-type-group h3{
  font-family:inherit;
}
#mod-app.lg-chords-app .chord-type-option{
  color:var(--lg-ink);
  background:var(--lg-paper);
  border:1px solid var(--lg-line);
  border-radius:4px;
  font-family:inherit;
  box-shadow:none;
}
#mod-app.lg-chords-app .chord-type-option:hover,
#mod-app.lg-chords-app .chord-type-option:focus-visible{
  color:var(--lg-blue);
  background:var(--lg-soft);
  border-color:var(--lg-blue);
}

/* Synesthesia is content, not chrome: preserve its authored dark visual field. */
#mod-app.lg-chords-app .syn-overlay{
  border-radius:0;
}
#mod-app.lg-chords-app .syn-overlay-heading h2{
  font-family:inherit;
}

/* Responsive refinement: same language, less chrome; no page overflow. */
@media (max-width:760px){
  #mod-app.lg-chords-app .command-bar{
    margin-bottom:1.6rem;
    padding:0 0 .9rem;
  }
  #mod-app.lg-chords-app .app-workspace{
    gap:2.2rem;
  }
  #mod-app.lg-chords-app .composer-card{
    padding:0 0 1.2rem;
  }
  #mod-app.lg-chords-app .section-heading{
    align-items:flex-start;
    gap:.75rem;
  }
}

@media (max-width:470px){
  #mod-app.lg-chords-app .section-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  #mod-app.lg-chords-app .progression-meta{
    align-items:flex-start;
  }
}


/* 0.1.3 — rhythmic values now use the canonical LG SVG Library artwork.
   The Library remains the size authority; this module only adds one relative factor. */
#mod-app.lg-chords-app .duration-btn > .duration-note-icon{
  --lg-chords-local-scale:1.18;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  font-family:inherit;
  font-size:inherit;
  line-height:0;
}
#mod-app.lg-chords-app .duration-btn > .duration-note-icon .lg-chords-icon-artwork{
  transform:scale(var(--lg-chords-local-scale));
}