/* ct-quickwins.css: build 191 quick wins. Overlays and additions only: no existing control moves. */

/* Visible keyboard focus on every page (keyboard only; mouse clicks show no ring). An outline takes no layout space. */
/* The :not(#…) parts only raise priority over page rules that switch outlines off; they match everything. */
html:not(#ct-a1):not(#ct-a2):not(#ct-a3) body :focus-visible { outline: 2px solid #ffcf5a !important; outline-offset: 2px !important; }

/* About & Privacy link: small text in the empty right end of the chooser's top bar. */
header.nav .ctq-about-link {
  position: absolute; top: 14px; right: 24px; z-index: 5;
  padding: 3px 9px; border: 1px solid #3a4150; border-radius: 999px; background: transparent;
  font: 700 10px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: #c9d1dc; cursor: pointer;
}
header.nav .ctq-about-link:hover { color: #ffffff; border-color: #7a8696; background: #1a2230; }
header.nav .ctq-about-link:active { filter: brightness(.82); }

/* About & Privacy dialog (dark) */
.ctq-about { position: fixed; inset: 0; z-index: 2147483300; display: grid; place-items: center; background: rgba(0,0,0,.62); }
.ctq-about-card {
  width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box;
  padding: 22px 26px 18px; background: #11151c; color: #e9edf2; border: 1px solid #3a4150; border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  font: 500 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
.ctq-about-title { margin: 0 0 10px; font-size: 22px; line-height: 1.25; font-weight: 700; color: #ffffff; letter-spacing: .01em; }
.ctq-about-sec { margin: 14px 0 0; }
.ctq-about-sec h3 { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #f0c75e; }
.ctq-about-sec ul { margin: 0; padding-left: 18px; }
.ctq-about-sec li { margin: 2px 0; color: #e9edf2; }
.ctq-about-p { margin: 0 0 10px; color: #cfd6df; }
.ctq-switch-row { display: flex; align-items: center; gap: 12px; }
.ctq-switch { flex: none; position: relative; width: 50px; height: 28px; padding: 0; border-radius: 999px; border: 1px solid #5a6474; background: #2a303b; cursor: pointer; }
.ctq-switch .ctq-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #c9d1dc; transition: left 120ms; }
.ctq-switch.on { background: #2f6f45; border-color: #58b275; }
.ctq-switch.on .ctq-knob { left: 25px; background: #ffffff; }
.ctq-switch-state { color: #e9edf2; font-weight: 600; }
.ctq-about-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 12px; border-top: 1px solid #2a303b; }
.ctq-about-build { font-size: 12px; color: #9aa4b2; letter-spacing: .06em; }
.ctq-about-close { min-width: 96px; min-height: 34px; padding: 0 18px; border-radius: 999px; border: 1px solid #c9d1dc; background: #e9edf2; color: #11151c; font-family: inherit; font-size: 13px; line-height: 1; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
.ctq-about-close:hover { background: #ffffff; }
.ctq-about-close:active { filter: brightness(.85); }

/* Music Theory export buttons, after Print / Save as PDF in the Print view bar */
.ctq-export { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctq-export-btn { cursor: pointer; }
.ctq-export-status { min-width: 0; max-width: 360px; }

/* ---------- Classroom / Projector mode: larger READ ME and caption text ---------- */
html.ct-projector .trinityCard .ct-card-caption { font-size: 13px !important; line-height: 1.35 !important; }
html.ct-projector .ct-suite-eyebrow .ct-eyebrow-quote { font-size: 12px !important; }
html.ct-projector #readme { font-size: 1.28em !important; }
html.ct-projector #readme h2 { font-size: 1.5em !important; }
html.ct-projector #readme h4, html.ct-projector #readme .tag, html.ct-projector #readme .live { font-size: 1em !important; }
html.ct-projector #readme .soni .bubble, html.ct-projector #readme p { font-size: 1em !important; line-height: 1.5 !important; }
html.ct-projector .tblurb, html.ct-projector .tabout, html.ct-projector #subtitle, html.ct-projector .exprhint, html.ct-projector .exprinfo { font-size: 15px !important; line-height: 1.45 !important; }
html.ct-projector .sonipop { font-size: 17px !important; }

/* 191: Circle of Infinity — Generate / Make Composition need 3+ selected pitches (no unselected pitches downstream) */
.ct-inf-gate { max-width: 620px; margin: 64px auto; padding: 28px 32px; background: #121821; border: 1px solid #2c3746; border-radius: 14px; color: #e8edf3; text-align: center; }
.ct-inf-gate h2 { margin: 0 0 12px; font-size: 22px; color: #ffcf5a; letter-spacing: .02em; }
.ct-inf-gate p { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: #c9d2dd; }
.ct-inf-gate-go { font: inherit; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 10px 18px; border-radius: 10px; border: 1px solid #ffcf5a; background: #1b2330; color: #ffcf5a; cursor: pointer; }
.ct-inf-gate-go:hover { background: #243044; }
.ct-inf-gate-go:active { filter: brightness(.82); }
html.ct-projector .ct-inf-gate h2 { font-size: 28px; }
html.ct-projector .ct-inf-gate p { font-size: 19px; }

/* 191: About · Your work (project file save / open, clear saved work) */
.ctq-work-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ctq-work-btn { min-height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid #5b6878; background: #1a2230; color: #e8edf3; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ctq-work-btn:hover { background: #243044; border-color: #7a8696; }
.ctq-work-btn:active { filter: brightness(.82); }
.ctq-work-clear, .ctq-work-yes { border-color: #ffb347; color: #ffcf8a; }
.ctq-work-confirm { margin-top: 10px; padding: 10px 12px; border: 1px solid #ffb347; border-radius: 10px; background: #211a10; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ctq-work-confirm[hidden] { display: none; }
.ctq-work-confirm-msg { flex: 1 1 100%; margin: 0 0 4px; color: #ffe2b0; font-size: 13px; line-height: 1.45; }
.ctq-work-status { min-height: 1.2em; margin: 8px 0 0; color: #c9d2dd; font-size: 13px; }
html.ct-projector .ctq-work-btn, html.ct-projector .ctq-work-status, html.ct-projector .ctq-work-confirm-msg { font-size: 16px; }

/* Reduce motion (macOS System Settings > Accessibility > Display > Reduce motion). Applies only when that setting is on;
   the default experience is unchanged. Moving decoration stops; the flashes that show a note or beat sounding stay,
   as a soft glow instead of a pulse, so the picture still matches the sound. The heart and the fish are left exactly
   as they are (their own rules decide). Loaded on every page. */
@keyframes ctA11yGlow { 0% { opacity: .45; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  html body *:not(.ct-mark):not(.ct-mark *):not(.ct-trio):not(.ct-trio *):not(.ct-heart-beats):not(.ct-heart-beats *):not(.ct-curtain > .ct-note-lights):not(.ct-curtain > .ct-note-lights *):not([class*="heart"]):not([class*="fish"]), html body *:not(.ct-mark):not(.ct-mark *):not(.ct-trio):not(.ct-trio *):not(.ct-heart-beats):not(.ct-heart-beats *):not(.ct-curtain > .ct-note-lights):not(.ct-curtain > .ct-note-lights *):not([class*="heart"]):not([class*="fish"])::before, html body *:not(.ct-mark):not(.ct-mark *):not(.ct-trio):not(.ct-trio *):not(.ct-heart-beats):not(.ct-heart-beats *):not(.ct-curtain > .ct-note-lights):not(.ct-curtain > .ct-note-lights *):not([class*="heart"]):not([class*="fish"])::after { transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .dust, .hanging-bagpipe, .hanging-guitar, .hanging-saxophone, .ct-scroll-cue[data-dir], .spiral-map .tone, .suite-stage-2 [data-ct-generate-pool].is-confirmed, .ct-thirds-pulse { animation: none !important; }
  .step.sounding, .reference-dot.sounding, .source-ghost.sounding, .shape-layer circle.vertex-sounding, .center-step-grid button.sounding,
  .ct-note-flashes i.active, .ct-infinity-stars i.active, .ear-beat-rings i, .beat-audio-pulse i, [data-ear-beat-pulse] i { animation-name: ctA11yGlow !important; animation-iteration-count: 1 !important; transform: none; }
}

/* Increase contrast (macOS System Settings > Accessibility > Display > Increase contrast). Applies only when that
   setting is on; the default look is unchanged. Dimmed or dark-gray text that measures under WCAG AA on its dark
   background is brought up to at least 4.5:1 (same wording, sizes and layout; nothing added). */
@media (prefers-contrast: more) {
  html:not(#ct-a1):not(#ct-a2):not(#ct-a3) body .circle .circle-third.out { opacity: .95 !important; }                       /* 1.40 -> 4.59:1 */
  html:not(#ct-a1):not(#ct-a2):not(#ct-a3) body .ct-fifths-ring .ct-fifth-node.complement { opacity: .93 !important; }       /* 1.78 -> 4.59:1 */
  html:not(#ct-a1):not(#ct-a2):not(#ct-a3) body .ct-key-out { opacity: .7 !important; }                                      /* 2.54 -> 4.9:1 */
  html:not(#ct-a1):not(#ct-a2):not(#ct-a3) body .pitch-detail.empty.pick-a, html:not(#ct-a1):not(#ct-a2):not(#ct-a3) body .pitch-detail.empty.pick-b { opacity: .85 !important; } /* 2.29-3.44 -> 5.02:1+ */
  html:not(#ct-a1):not(#ct-a2):not(#ct-a3) body .center-step-grid button:not(.active) { color: #8a929e !important; }         /* #707782 4.33 -> 6.22:1 */
  html:not(#ct-a1):not(#ct-a2):not(#ct-a3) body .reference-note-count small { color: #8a929e !important; }                   /* #737b84 4.41 -> 6.03:1 */
  html:not(#ct-a1):not(#ct-a2):not(#ct-a3) body .selection-wait { color: #8a929e !important; }                               /* #68717d 3.98 -> 6.27:1 */
  html:not(#ct-a1):not(#ct-a2):not(#ct-a3) body :focus-visible { outline-width: 3px !important; }
}

/* build 191 leftovers: opening circle. The bottom letter of the ring (F♯) sits at the horizontal center, between
   PLAY and SKIP; on short windows the two buttons covered it. They now stand farther apart so F♯ shows in the gap.
   Nothing added; the ring, fish, heart and marks are untouched. */
@media (min-width:701px){html body .ct-intro-controls{gap:64px!important;column-gap:64px!important}}

/* Build 191 VoiceOver pass 3: text for VoiceOver only (never seen), and the spoken-only Explore button shows its focus on its card. */
.ct-a11y-sr{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important}
html:not(#ct-a1):not(#ct-a2):not(#ct-a3) body .mode-choice:has(> .ct-explore-sr:focus-visible){outline:2px solid #ffcf5a !important;outline-offset:2px !important}

/* 191: Circle mottos are removed; hide them from the first frame so a re-draw never flashes them */
.ct-suite-eyebrow .ct-eyebrow-quote, .topbar .ct-suite-tagline { display: none !important; }

/* 191 extremes (largest sets) */
/* Infinity MATERIAL POOL: cards are as tall as what they hold; a chord's degrees wrap onto more rows instead of running off the card */
html body #app .material-pool .pitch-memory-chip{flex:0 0 auto!important;height:auto!important;min-height:0!important}
html body #app .material-pool .chord-material-card .source-pitch-list{flex-wrap:wrap!important;overflow:visible!important;row-gap:4px;height:auto!important;max-height:none!important}
/* Infinity WORKING row: the source name gets the room the tools don't use */
html body #app .compose-pitch-set-working > header > div:first-child{flex:0 0 auto!important;min-width:0!important;max-width:48%!important}
html body #app .compose-pitch-set-working > header > .compose-working-tools{flex:1 1 0!important;min-width:0!important}
/* Thirds COMPOSITION POOL: "Chord 12" stays on one line like "Chord 2" */
.ct-composition-pool .ct-pool-slot > button[data-ct-pool-item]{white-space:nowrap!important;padding-right:11px!important}
/* Thirds Library: a scroll bar that always shows, and a fade at the bottom when there is more below */
.library-dropdown-scroll{scrollbar-width:thin;scrollbar-color:#c9a227 rgba(255,255,255,.1)}
.library-dropdown-scroll::-webkit-scrollbar{width:10px;-webkit-appearance:none}
.library-dropdown-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:5px}
.library-dropdown-scroll::-webkit-scrollbar-thumb{background:#c9a227;border-radius:5px;border:2px solid #14161c;min-height:28px}
.library-dropdown-scroll.ct-more-below{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),rgba(0,0,0,.25));mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),rgba(0,0,0,.25))}

/* George 8:50: 'Pick at least 3 pitches to start.' in the Infinity Pitch set box (dark text on a light strip, readable) */
html body #app .ct-min3{display:block;margin:8px auto 0;padding:5px 10px;max-width:92%;background:#fff3c4;color:#1c2230;border:1px solid #1c2230;border-radius:8px;font:700 13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;text-align:center;letter-spacing:0;text-transform:none}
/* build 200: About > Classroom: bring back Soni's HARMONIC / MELODIC notes */
.ctq-soni-row { margin-top: 12px; align-items: flex-start; }
.ctq-soni-back { flex: none; min-height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid #c9d1dc; background: #e9edf2; color: #11151c; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.ctq-soni-back:disabled { opacity: .55; cursor: default; }
.ctq-soni-back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }