/* ct-core-strip.css — Circle of Thirds (Hortus Soni Core)
   Machine-only override. Hides the teaching/extras layer; keeps circles,
   pitch picking, chord/stack tools, generate/transform, playback, pool, nav.
   Paired with ct-core-strip.js (same folder). */

html body :is(
/* ---- REMOVED: READ ME / WHY? openers and their panels / lesson dumps ---- */
.ct-read-me:not(.ct-chord-mode),
.ct-why-button,
.ct-learn-panel, .ct-why-panel,

[data-compose-lesson],
/* ---- REMOVED: Bending Major / Major Bender (Explore) ---- */
#ct-minor-bend-dock,
#ct-explore-bend-pills-host, #ct-bend-pill-strip, .ct-bend-pill-strip, .ct-bend-pill,
/* ---- REMOVED: info / teaching blurbs ---- */
#app .suite-stage-prompt,                       /* "Hear, compare, and understand..." */
#app .interval-workbench > header > small,      /* "Choose two notes to measure..." */
#app .ct-complement-panel > p,                  /* complement explanation paragraph */
#app .ct-voicing-teach,                         /* Make Composition "TEACH" box */
/* ---- REMOVED: bottom education strip (Generate: RI/Mirror/... lesson text) ---- */
#app .work-learning-row, #app .ct-transform-teach,
[data-ct-core-stripped],
#ct-core-boost#ct-core-boost#ct-core-boost /* specificity booster: beats the app's own !important show rules */
) {
  display: none !important;
}

/* ---- REFLOW: no blank holes ---- */
/* Make Composition: voicing column starts flush at the top (STACK rows
   move up under the header now that the Teach box is gone). */
#app .suite-stage-3 .ct-voicing-teach + * { margin-top: 0 !important; }
/* Generate Material: side columns fill the height the removed bottom
   lesson strip used to occupy. */
html body #app .suite-stage-2 .work-grid > :is(.work-left-stack, .work-right-stack) {
  display: flex !important; flex-direction: column !important;
}
html body #app .suite-stage-2 .work-grid > :is(.work-left-stack, .work-right-stack) > :last-child {
  flex: 1 1 auto !important;
}
/* Make Composition: the three panels stretch to the bottom of the window
   instead of leaving an empty band under them. */
html body #app .suite-stage-3 .compose-workspace {
  grid-template-rows: minmax(0, 1fr) !important; align-content: stretch !important;
  height: 100% !important; max-height: 100% !important;
}
html body #app .suite-stage-3 .compose-workspace > :is(.compose-motif-panel, .compose-voicing-panel, .compose-rail-panel),
html body #app .suite-stage-3 .compose-play-row > :is(.compose-motif-panel, .compose-voicing-panel, .compose-rail-panel) {
  height: 100% !important; max-height: 100% !important; align-self: stretch !important; overflow-y: auto !important;
}
/* Explore: chord list may scroll rather than clip its last row. */
#app .suite-stage-1 .chord-list { overflow-y: auto !important; min-height: 0 !important; padding-bottom: 6px !important; }

/* ---------------------------------------------------------------
   FIX (a) EXPLORE CIRCLE POSITION LOCK
   composition-header-actions.js re-measures on every DOM mutation and
   writes --ct-explore-unit-drop, and the circle was place-self:center in
   a stretchy grid row. Whenever the side columns (modes list / chord
   list) re-rendered, the circle got re-translated/re-centred and slid
   out of place. Lock it: no translate/rotate, pinned to the top of its
   row, drop variable forced to 0.
   --------------------------------------------------------------- */
#app .suite-stage-1 .circle-column { --ct-explore-unit-drop: 0px !important; }
#app .suite-stage-1 .circle-column > :is(.circle, .ct-circle-display-key, .opening-interval-reader) {
  translate: none !important;
  rotate: none !important;
}
#app .suite-stage-1 .circle-column > .circle {
  transform: none !important;
  align-self: start !important;
  justify-self: center !important;
}
#app .suite-stage-1 .circle-column > .circle :is(.circle-note, .circle-third) {
  transform: translate(-50%, -50%) !important;
  translate: none !important;
  rotate: none !important;
}
/* ---------------------------------------------------------------
   FIX (b) PRESSED-BUTTON JUMP
   The shared rule "#app button:not(:disabled):active { transform:
   translateY(1px) scale(0.98) }" REPLACED each button's own transform.
   Circle pitch buttons are centred with transform:translate(-50%,-50%),
   so pressing one dropped that centring and the letter jumped ~half a
   button right+down (the ~45 degree jump). ct-core-strip.js strips every
   transform/translate/rotate/scale declaration out of :active rules at
   runtime; the rules below make the pressed feedback brightness/shadow
   only and restore the centring transform as a CSS fallback.
   --------------------------------------------------------------- */
#app button:not(:disabled):active,
#app [role="button"]:not([aria-disabled="true"]):active,
#app [data-mode]:active {
  translate: none !important;
  rotate: none !important;
  scale: none !important;
  filter: brightness(0.86) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18), 0 0 10px rgba(255,255,255,0.12) !important;
  transition: filter 70ms, box-shadow 70ms !important;
}
/* Buttons whose resting transform is the centring translate keep it. */
#app .circle-note:active, #app .circle-third:active,
#app .source-circle > .tone:active, #app .sculpt-circle-stage .tone:active,

#app .suite-stage-2 [data-ct-generate-pool]:active,
#app .circle-scale-name:active {
  transform: translate(-50%, -50%) !important;
}

/* ---------------------------------------------------------------
   CT-FIX1 #5 THIRDS STACK COLUMN FITS BELOW 1280px
   The Explore grid used fixed minimums (300px + 420px + 310px + gaps),
   so at 1024px the STACK/chord column ran 38px off the right edge and at
   800px 262px, half-hiding ADD TO POOL. Below 1280px the three columns
   now share the width (they may shrink, never overflow). The column's
   own rules are untouched: header flush at the top, chord list scrolls
   inside the column, last row fully visible. 1280px and wider: no change.
   --------------------------------------------------------------- */
@media (max-width: 1279px) {
  html body #app .suite-stage-1 .explore-window {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.08fr) minmax(0, 1fr) !important;
    max-width: 100% !important; min-width: 0 !important;
  }
  html body #app .suite-stage-1 .explore-window > * { min-width: 0 !important; max-width: 100% !important; }
  html body #app .suite-stage-1 .chords-column > * { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  html body #app .suite-stage-1 .chords-column .educational-harmony-head { grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important; }
  html body #app .suite-stage-1 .chords-column .transform-chord-playback { flex-wrap: wrap !important; min-width: 0 !important; }
}
@media (max-width: 900px) {
  /* narrow: title above the ARPEGGIO / BLOCK CHORD / ADD TO POOL buttons so they fit;
     chord rows keep their natural height and the list scrolls inside the column */
  html body #app .suite-stage-1 .chords-column .educational-harmony-head { grid-template-columns: minmax(0, 1fr) !important; height: auto !important; }
  html body #app .suite-stage-1 .chords-column .transform-chord-playback { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; }
  html body #app .suite-stage-1 .chord-list { grid-template-rows: none !important; grid-auto-rows: max-content !important; align-content: start !important; }
  html body #app .suite-stage-1 .chord-list > .chord-row { min-height: max-content !important; height: auto !important; }
}

/* BUILD 190: hide unbuilt placeholder — FOR LATER VERSIONS (disabled placeholder, 'Reserved for later versions') */
.ct-later-tools { display: none !important; }

/* BUILD 190: building a chord must not move the page. The Transformations chord cards grew
   with the chord size (triad → 13th adds tone rows), pushing every row below them down.
   Reserve the 13th-chord height up front so the column stays perfectly still. */
.transform-chord-reveal .transform-scale-chords { min-height: 104px !important; align-items: stretch !important; }
.transform-chord-reveal .transform-scale-chords > button { min-height: 104px !important; }

/* BUILD 190: opening screen note names — dark and solid (were pale grey). */
.ct-curtain-fifths-names em b { color: #141418 !important; }

/* BUILD 190 (George): opening-screen circle placement — IDENTICAL to the
   Hortus Soni opening (src-dist/ct-core-strip.css). The grey ring and the
   12 note names are lifted by --ct-letter-lift = 1.035 x clamp(14px,1.65vw,21px)
   (1.5 letter heights of the opening's letters; 21.7 CSS px in a 1280pt
   window), <=700px: 1.035 x 12px. Only the ring (::before) and the names layer
   move, via top/bottom; .ct-curtain-fifths itself (shared geometry, !important
   heartbeat transform), the drawing, lights, title and PLAY/SKIP do not move. */
.ct-curtain > .ct-curtain-fifths {
  --ct-letter-lift: calc(clamp(14px, 1.65vw, 21px) * 1.035);
}
.ct-curtain > .ct-curtain-fifths::before {
  top: calc(9% - var(--ct-letter-lift)) !important;
  bottom: calc(9% + var(--ct-letter-lift)) !important;
}
.ct-curtain > .ct-curtain-fifths > .ct-curtain-fifths-names {
  top: calc(0px - var(--ct-letter-lift)) !important;
  bottom: var(--ct-letter-lift) !important;
}
@media (max-width: 700px) {
  .ct-curtain > .ct-curtain-fifths { --ct-letter-lift: calc(12px * 1.035); }
}

/* BUILD 190 (George): no READ ME pill on the Circle of Thirds opening screen.
   The live READ ME (<ct-readme-host>, ../ct-readme/ct-readme.js) is fixed at
   the top-right with the same z-index as the curtain and was painting over it.
   Hidden only while the opening curtain is in the DOM; the curtain removes
   itself on SKIP / end, and the READ ME returns in the Thirds app unchanged.
   Fixed-position, so hiding it leaves no gap. */
body:has(> .ct-curtain) > ct-readme-host { display: none !important; }

/* Build 190: "Why Thirds?" caption with a snapshot of C, e and G from the real circle
   (picture to the RIGHT of the text), drawn in the empty header space just above the
   SOURCE/KEY legend (Explore). Pseudo-element only: nothing moves, nothing is clickable. */
.circle-tone-key{position:relative}
body:has(main.suite-stage-1) .circle-tone-key::before{
  content:"Why \201CThirds\201D?\A The circle of fifths, with the major 3rd that sits inside each 5th (E between C and G).";
  /* slrow1: placed above the tab row, right of the title, left of READ ME (vars set by ct-core-strip.js whyPlace) */
  position:absolute; left:var(--ct-why-left,630px); right:auto; bottom:calc(100% + var(--ct-why-lift,0px));
  width:max-content; max-width:var(--ct-why-maxw,calc(100% - 786px));
  min-height:64px; box-sizing:border-box; padding-right:115px;
  display:flex; align-items:center;
  background:url("assets/why-threes-ceg.png") right center / 105px 64px no-repeat;
  font:600 13px/15px Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  color:rgba(244,241,234,.8); letter-spacing:.01em; text-transform:none; white-space:pre-line;
  pointer-events:none; user-select:none; -webkit-user-select:none;
}
@media (max-width:1100px){
  body:has(main.suite-stage-1) .circle-tone-key::before{min-height:52px; padding-right:94px; background-size:86px 52px}
}

/* Build 190: Common Tones rows play their notes (no dead clicks). Press = darken only; nothing moves. */
.suite-stage-2 .common-tone-hub .hub-row[data-play-pcs] { cursor: pointer; }
/* Build 191: the hub box inherited pointer-events:none from the old centre overlay, so mouse clicks never reached these rows. */
.suite-stage-2 .common-tone-hub, .suite-stage-2 .common-tone-hub .hub-row[data-play-pcs] { pointer-events: auto; }
.suite-stage-2 .common-tone-hub .hub-row[data-play-pcs]:active { filter: brightness(0.82); }

/* Build 190: the Thirds 'fish in the sea' caption sits right after the pink 'Hortus Soni'
   title (Explore only). Same 9px size as the title words, never larger; normal case, light and readable. */
.ct-suite-eyebrow .ct-eyebrow-quote { display: none; }
#app:has(main.suite-stage-1) .ct-suite-eyebrow .ct-eyebrow-quote {
  display: inline; margin-left: 10px; font-size: 9px; font-weight: 600; font-style: italic;
  letter-spacing: .02em; text-transform: none; color: #f6d9ea;
}

/* Build 190: chord name box shows common alternate names and colour-note tip under the chord symbol. */
#app .ct-pool-chord-name > .ct-chord-alt{
  font:700 11px/1.2 system-ui,sans-serif!important;
  font-style:normal!important;
  color:#c9d3df!important;
}
#app .ct-pool-chord-name > .ct-chord-colour{
  font:600 10px/1.25 system-ui,sans-serif!important;
  color:#f0d78c!important;
}

/* Reduce motion (only when the macOS setting is on): no sliding or pulsing in the strip; the heart and the fish keep their own rules. */
@media (prefers-reduced-motion: reduce) { .ct-scroll-cue[data-dir] { animation: none !important; } .ct-thirds-pulse { animation: none !important; } }

/* 191: the Generate Material chord box keeps one fixed height. When an extra line appears ("also Asus♭9" or a colour-note tip)
   the name and the extra line shrink to fit inside (explore-chord-pool.js fitName); the box never grows, so nothing below jumps. */
#app .suite-stage-2 .page2-transform-playback > [data-generate-chord-name].ct-pool-chord-name{height:49px!important;min-height:49px!important;max-height:49px!important;overflow:hidden!important}
#app .suite-stage-2 .page2-transform-playback > [data-generate-chord-name].ct-has-extra{padding-top:3px!important;padding-bottom:3px!important;gap:1px!important}
#app .suite-stage-2 .page2-transform-playback > [data-generate-chord-name].ct-has-extra > small{font-size:7px!important}
#app .suite-stage-2 .page2-transform-playback > [data-generate-chord-name].ct-has-extra > :is(.ct-chord-alt,.ct-chord-colour){white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-height:0!important;flex:0 0 auto!important}