/* ct-core-strip.css — Circle of Infinity (Hortus Soni Core)
   Machine-only override. Hides the teaching/extras layer; keeps the
   circle, pitch picking, stack/chord tools, generate/sculpt/transform,
   playback, material pool, navigation. Paired with ct-core-strip.js. */

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,
/* ---- REMOVED: bottom info/education strips ---- */
#app .sculpt-education-strip,          /* Explore: Who/History/Fun/Jump source story;
                                          Generate: "Traditional naming · live" lesson text */
#app .ct-interval-calc-blurbs, #app .ct-source-history, #app .ct-bottom-l-story,
/* ---- REMOVED: info blurbs ---- */
#app .source-pitch-blurb,              /* per-pitch description text in pool chips */
#app .compose-source-pool-hint,        /* "Full source scale + made/sculpted chords live in ..." */
[data-ct-core-stripped],
#ct-core-boost#ct-core-boost#ct-core-boost /* specificity booster */
) {
  display: none !important;
}

/* ---- REFLOW: the Explore columns fill the height the removed bottom
   story strip used to occupy (no blank band at the bottom). ---- */
html body #app main.opening-explorer.infinity-face > :is(.explore-source-modes, .explore-circle-column) {
  align-self: stretch !important; height: auto !important; max-height: 100% !important;
}
html body #app main.opening-explorer.infinity-face > .explore-source-modes { align-content: start !important; }
html body #app main.opening-explorer.infinity-face > .explore-circle-column { justify-content: center !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 #2 INFINITY NOTE PRESS: NO LABEL SIZE CHANGE
   Pressing a note on the dense source circle (Partch 43, 11-limit, ...)
   picks it, and the picked rule ".source-circle.dense-source-circle
   .tone.source-picked { font-size:10px }" grew the label from 7px to 10px
   (4.1px text-size change, 1.9px label shift). Picked notes now keep the
   resting label size; the gold ring/border still marks them, and the
   press itself only darkens (FIX (b) above). Button boxes are unchanged.
   --------------------------------------------------------------- */
html body #app .source-circle.dense-source-circle:not(.dense-edo-circle) > .tone.source-tone.source-picked:not(.root) {
  font-size: clamp(7px, calc(var(--source-tone-size) * .4), 11px) !important;
}

/* ---------------------------------------------------------------
   CT-FIX1 #3 INFINITY NARROW WINDOWS (<= 900px): NO SIDEWAYS SCROLL
   The top buttons (Undo/Redo/Reset All/Listening/Later) stayed on the
   brand row and ran off the right edge, and the Compose working-pitch
   strip was forced to 43 x 54px columns (2494px). Top buttons now wrap
   onto their own row; the pitch strip and its tool row wrap to the
   window width. Nothing changes at 901px and wider.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  html body #app .topbar { height: auto !important; max-height: none !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; min-width: 0 !important; max-width: 100% !important; }
  html body #app .topbar > .brand { min-width: 0 !important; max-width: 100% !important; }
  html body #app .topbar > .top-actions {
    flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important;
    flex-wrap: wrap !important; justify-content: flex-start !important; margin-left: 0 !important;
  }
  html body #app .topbar > .top-actions > * { min-width: 0 !important; max-width: 100% !important; }
  html body #app .compose-pitch-set { grid-template-columns: minmax(0, 1fr) !important; min-width: 0 !important; max-width: 100% !important; }
  html body #app .compose-pitch-set > header { flex-wrap: wrap !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; }
  html body #app .compose-pitch-set > header > * { min-width: 0 !important; max-width: 100% !important; }
  html body #app .compose-working-tools { flex-wrap: wrap !important; min-width: 0 !important; width: auto !important; }
  html body #app .compose-pitch-strip {
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)) !important;
    grid-auto-flow: row !important; min-width: 0 !important; width: auto !important; max-width: 100% !important;
  }
}
/* CT-FIX1 #3b: Explore at <= 1000px. The three Explore columns had fixed
   minimums (220 + 300 + 280px at 800 wide), so the right-hand column was
   cut off at the window edge. They now share the width in the same
   proportions as at 1280px. */
@media (max-width: 1000px) {
  html body #app main.opening-explorer.infinity-face {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1fr) !important; max-width: 100% !important;
  }
  html body #app main.opening-explorer.infinity-face > .explore-column { min-width: 0 !important; max-width: 100% !important; }
}

/* BUILD 190: hide unbuilt placeholder — FOR FUTURE VERSIONS · LOCKED (disabled placeholder) */
.future-versions-locked { display: none !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); }
}

/* Reduce motion (only when the macOS setting is on): no pulsing scroll cues; the heart keeps its own rules. */
@media (prefers-reduced-motion: reduce) { .ct-scroll-cue[data-dir] { animation: none !important; } .spiral-map .tone { animation: none !important; } }