/* ct-core-strip.css — Circle of Time (Hortus Soni Core)
   Machine-only override. Hides the teaching/extras layer; keeps the
   circle, voices, pulses, generate/geometry tools, playback, material
   pool, composition cycle and navigation. Paired with ct-core-strip.js. */

html body :is(
/* ---- REMOVED: READ ME / "Why the Heart" openers and their panels ---- */
.ct-read-me:not(.ct-chord-mode),
.ct-why-button,
.ct-learn-panel, .ct-why-panel, .ct-read-me-selections, .ct-why-grid,
/* ---- REMOVED: per-tab info blurb in the nav row
   ("Place, remove, and hear percussion attacks..." etc.) ---- */
:is(#app, #root) nav.suite-window-nav > p,
[data-ct-core-stripped],
#ct-core-boost#ct-core-boost#ct-core-boost /* specificity booster */
) {
  display: none !important;
}
/* ---------------------------------------------------------------
   FIX (b) PRESSED-BUTTON JUMP
   The shared rule ":is(#app, #root) 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.
   --------------------------------------------------------------- */
:is(#app, #root) button:not(:disabled):active,
:is(#app, #root) [role="button"]:not([aria-disabled="true"]):active,
:is(#app, #root) [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. */
:is(#app, #root) .circle-note:active, :is(#app, #root) .circle-third:active,
:is(#app, #root) .source-circle > .tone:active, :is(#app, #root) .sculpt-circle-stage .tone:active,

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

/* ---------------------------------------------------------------
   CT-FIX1 #4 TIME NARROW WINDOWS (<= 900px): WHEEL + CONTROLS FIT
   The wheel kept a fixed min(650px, 96vw) width inside the right-hand
   grid column of .circle-stage (176px rail + ~515px), so it ran ~100-180px
   past the right edge at 600-800px. The wheel now fills its column and
   stays round; at <= 600px the rail sits above the wheel. Nothing
   changes at 901px and wider.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  :is(#app, #root) .circle-stage { grid-template-columns: auto minmax(0, 1fr) !important; max-width: 100% !important; min-width: 0 !important; }
  :is(#app, #root) .circle-stage > .wheel {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    height: auto !important; max-height: none !important; aspect-ratio: 1 / 1 !important;
  }
  :is(#app, #root) .wheel-wrap, :is(#app, #root) .circle-stage { height: auto !important; max-height: none !important; }
  :is(#app, #root) .wheel-wrap, :is(#app, #root) .workspace, :is(#app, #root) .controls-panel, :is(#app, #root) .wheel-panel { min-width: 0 !important; max-width: 100% !important; }
}
@media (max-width: 600px) {
  :is(#app, #root) .circle-stage { grid-template-columns: minmax(0, 1fr) !important; }
  :is(#app, #root) .circle-stage > .track-rail { width: auto !important; min-width: 0 !important; }
}

/* BUILD 190: hide unbuilt placeholder — FOR LATER · ADVANCED TIME (disabled placeholder) */
.advanced-time-future { 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); }
}

/* BUILD 190 (George): Circle of Time opening — the heart pulses at rest like the
   other three openings (same 1.08s heartbeat as Infinity's .ct-mark / the
   Hortus Soni trio). Time never had this idle rule (absent since the 188
   baseline). During PLAY the kick-drum .beat animation takes over, unchanged.
   Scale only, around the heart's centre: nothing moves. */
@keyframes ctTimeIdleHeart{0%,to{transform:scale(1)}9%{transform:scale(1.024)}18%{transform:scale(1)}26%{transform:scale(1.016)}35%,60%{transform:scale(1)}}
.ct-curtain > .ct-mark:not(.beat) { animation: ctTimeIdleHeart 1.08s infinite; transform-origin: center center; }
@media (prefers-reduced-motion: reduce) { .ct-curtain > .ct-mark:not(.beat) { animation: none; } }