/* ct-scorelab-link.css — Music Theory entry points . Solid, readable, no fades.
   Host pages style header buttons aggressively, so the button's own look is locked with !important. */
html body button.ct-sl-open{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  width:auto!important;min-width:0!important;max-width:none!important;height:32px!important;min-height:32px!important;margin:0 4px!important;padding:0 12px!important;
  border-radius:8px!important;border:1.5px solid #8fb8ff!important;background:#0f1a30!important;color:#ffffff!important;
  font:800 11px/1 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif!important;letter-spacing:.06em!important;text-transform:none!important;
  white-space:nowrap!important;overflow:visible!important;cursor:pointer!important;opacity:1!important;filter:none!important;transform:none!important;
  box-shadow:none!important;flex:0 0 auto!important;vertical-align:middle!important;text-indent:0!important}
html body button.ct-sl-open:hover{background:#18284a!important;border-color:#b9d3ff!important}
html body button.ct-sl-open:active{background:#0a1224!important;transform:none!important}
html body button.ct-sl-open:focus-visible{outline:2px solid #fff!important;outline-offset:2px!important}
html body button.ct-sl-open > svg.ct-sl-icon{display:block!important;width:16px!important;height:16px!important;color:#ffd76a!important;flex:0 0 16px!important}
html body button.ct-sl-open > .ct-sl-text{display:inline!important;font:inherit!important;color:#ffffff!important;letter-spacing:inherit!important;opacity:1!important;visibility:visible!important}
html body button.ct-sl-open > .ct-sl-sub{display:inline-block!important;font:800 10px/1 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif!important;color:#0f1a30!important;
  background:#ffd76a!important;border-radius:5px!important;padding:4px 6px!important;letter-spacing:.04em!important;opacity:1!important}
html body button.ct-sl-open > .ct-sl-sub[hidden],html body button.ct-sl-open > .ct-sl-sub:empty{display:none!important}
/* landing card */
html body a.ct-sl-card{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;margin:18px auto 0;
  width:100%;box-sizing:border-box;padding:18px 24px;border-radius:6px;border:1px solid #302d33;background:#09090b;color:#ffffff;text-decoration:none;opacity:1}
html body a.ct-sl-card:hover{border-color:#302d33;background:#18171c}
html body a.ct-sl-card:focus:not(:focus-visible){outline:none}
html body a.ct-sl-card:focus-visible{outline:3px solid #fff;outline-offset:2px} /* George 9:40 PM: same white focus ring as the other circle cards */
a.ct-sl-card .ct-sl-card-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;background:#0f1a30;border:1.5px solid #8fb8ff}
a.ct-sl-card .ct-sl-icon{width:32px;height:32px;color:#ffd76a}
a.ct-sl-card .ct-sl-card-body{display:grid;gap:4px}
a.ct-sl-card .ct-sl-card-body small{font:800 10px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.12em;color:#ffffff}
a.ct-sl-card .ct-sl-card-body strong{font:400 26px/1.1 Georgia,"Times New Roman",serif;color:#ffffff}
a.ct-sl-card .ct-sl-card-body span{font:500 13px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;color:#e8ecf4}
html body a.ct-sl-card .ct-sl-card-start{display:inline-block;font:800 11px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;color:#ffffff!important;background:#15151b!important;
  border:1px solid #ffffff;border-radius:4px;padding:10px 26px;white-space:nowrap;opacity:1}
html body a.ct-sl-card:hover .ct-sl-card-start{border-color:#ffffff}
/* build 191: the landing fits one window (no scrolling). Music Theory is a fourth card in the Circles row; all four
   cards share one fixed frame (same width and height, tops and bottoms flush), with smaller type inside. */
html body main.site.ct-sl-fit{grid-template-rows:48px minmax(0,1fr) auto!important}
html body main.site.ct-sl-fit .trinity{height:auto!important;padding-bottom:18px!important}
html body main.site.ct-sl-fit .trinityGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:start!important;gap:10px!important}
html body main.site.ct-sl-fit .trinityGrid>.trinityCard,html body main.site.ct-sl-fit .trinityGrid>a.ct-sl-card{box-sizing:border-box!important;height:var(--ct-card-h,204px)!important;min-height:0!important;max-height:none!important;width:auto!important;margin:0!important;
  display:grid!important;grid-template-rows:30px auto auto minmax(0,1fr) 30px!important;grid-template-columns:minmax(0,1fr)!important;align-content:stretch!important;align-items:start!important;gap:4px!important;padding:10px 12px!important;overflow:hidden}
html body main.site.ct-sl-fit .trinityGrid>a.ct-sl-card{grid-template-rows:30px minmax(0,1fr) 30px!important}
html body main.site.ct-sl-fit .trinityCard .symbolBox{height:30px!important;width:60px!important}
html body main.site.ct-sl-fit .trinityCard .symbolBox svg{height:26px!important;width:52px!important}
html body main.site.ct-sl-fit .trinityCard .ct-card-caption{font-size:9.5px!important;line-height:1.25!important}
html body main.site.ct-sl-fit .trinityCard>strong,html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-card-body strong{font:400 19px/23px Georgia,"Times New Roman",serif!important}
html body main.site.ct-sl-fit .trinityCard>span:not(.symbolBox):not(.module-start),html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-card-body span{font-size:11px!important;line-height:1.3!important}
html body main.site.ct-sl-fit .trinityCard .module-start,html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-card-start{height:30px!important;min-height:0!important;box-sizing:border-box;align-self:end;display:grid!important;place-items:center;padding:0!important;text-align:center}
html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-card-icon{width:30px;height:30px;border-radius:7px}
html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-icon{width:18px;height:18px}
html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-card-body{display:grid;gap:4px;align-content:start}
/* build 191 leftovers: each card shows only its symbol, its name and START. Symbols share one row and names share one
   line across all four cards; Music Theory's symbol is plain white like the others (no blue box). */
html body main.site.ct-sl-fit .trinityGrid>.trinityCard,html body main.site.ct-sl-fit .trinityGrid>a.ct-sl-card{grid-template-rows:30px 23px minmax(0,1fr) 30px!important}
html body main.site.ct-sl-fit .trinityCard .symbolBox,html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-card-icon{grid-row:1}
html body main.site.ct-sl-fit .trinityCard>strong,html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-card-body{grid-row:2;align-self:end}
html body main.site.ct-sl-fit .trinityCard .module-start,html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-card-start{grid-row:4}
html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-card-icon{width:60px;height:30px;border:0;border-radius:0;background:transparent;justify-self:start;display:grid;place-items:center start;padding-left:4px;box-sizing:border-box}
html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-icon{width:26px;height:26px;color:#ffffff}
@media (max-width:760px){html body a.ct-sl-card{grid-template-columns:auto 1fr}a.ct-sl-card .ct-sl-card-start{grid-column:1/-1;text-align:center}}
/* Music Theory: Return to the page it was opened from */
html body button.ct-sl-return{display:inline-flex!important;align-items:center;gap:6px;height:30px;margin:0 0 0 14px;padding:0 13px;border-radius:8px;
  border:1.5px solid #8fb8ff;background:#0f1a30;color:#ffffff;font:800 12px/1 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;letter-spacing:.04em;
  white-space:nowrap;cursor:pointer;opacity:1;flex:0 0 auto}
html body button.ct-sl-return > span{color:#ffd76a;font-size:14px}
html body button.ct-sl-return:hover{background:#18284a;border-color:#b9d3ff}
html body button.ct-sl-return:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:1100px){html body main.site.ct-sl-fit .trinityCard .ct-card-caption{font-size:9px!important;line-height:1.2!important;letter-spacing:0!important}
  html body main.site.ct-sl-fit .trinityCard>strong,html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-card-body strong{font-size:17px!important;line-height:21px!important}
  html body main.site.ct-sl-fit .trinityCard>span:not(.symbolBox):not(.module-start),html body main.site.ct-sl-fit a.ct-sl-card .ct-sl-card-body span{font-size:10.5px!important;line-height:1.25!important}}
/* build 191 leftovers: limit caution, spoken by Soni in her small caption style (like the Music Theory tips) */
html body .ct-sl-limit{display:flex;align-items:flex-start;gap:7px;margin:8px 0 6px;padding:5px 7px;background:#fffaf0;border:1.2px solid #1c2230;border-radius:9px}
html body .ct-sl-limit svg{flex:none;width:22px;height:auto;max-height:28px}
html body .ct-sl-limit p{margin:0 0 5px;font:600 12px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#1c2230}
html body .ct-sl-limit-row{display:flex;flex-wrap:wrap;gap:6px}
html body .ct-sl-limit-return{min-height:24px;padding:3px 10px;border-radius:999px;border:1.2px solid #1c2230;font:700 11.5px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
html body .ct-sl-limit-return{background:#1c2230;color:#fff}
html body .ct-sl-limit-return:hover{background:#2f3850}
html body .ct-sl-limit-dismiss{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
html body .ct-sl-limit-return:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* George 9:40 PM: all four cards on the opening screen share one focus ring (white, like the circle cards); the app-wide gold ring was winning on the Music Theory card only */
html:not(#ct-a1):not(#ct-a2):not(#ct-a3):not(#ct-a4) body .trinityGrid > a:focus-visible{outline:3px solid #fff!important;outline-offset:2px!important}

/* slrow1 (191, George 6:43): Circle of Thirds - the button is one of the tab-row buttons: same 28px height, same top line,
   8px after RESET ALL; the chord count is plain words in the button (no yellow badge, no bare number). */
html body .suite-stage-nav > button.ct-sl-open[data-ct-scorelab="threes"]{position:static!important;inset:auto!important;order:0!important;align-self:flex-start!important;
  height:28px!important;min-height:28px!important;margin:0 0 0 8px!important;padding:0 10px!important;gap:6px!important;font-size:10px!important;border-radius:6px!important}
html body .suite-stage-nav > button.ct-sl-open[data-ct-scorelab="threes"] > svg.ct-sl-icon{width:14px!important;height:14px!important;flex-basis:14px!important}
html body button.ct-sl-open[data-ct-scorelab="threes"] > .ct-sl-sub{display:inline!important;width:auto!important;min-width:0!important;flex:0 0 auto!important;border:0!important;
  background:none!important;padding:0!important;border-radius:0!important;font:inherit!important;
  color:#ffd76a!important;letter-spacing:inherit!important}

/* slrow2 (191, George 7:36 PM): Circle of Thirds button = the Circle of Infinity Explore button (size, type, yellow count pill),
   in the header row just left of READ ME. Left/top come from threes/ct-core-strip.js (--ct-sl-x / --ct-sl-y). */
html body .rebuild-topbar > button.ct-sl-open[data-ct-scorelab="threes"],
html body > button.ct-sl-open[data-ct-scorelab="threes"]{position:fixed!important;left:var(--ct-sl-x,auto)!important;top:var(--ct-sl-y,7px)!important;right:auto!important;bottom:auto!important;
  z-index:30!important;display:inline-flex!important;align-items:center!important;gap:6px!important;height:32px!important;min-height:32px!important;margin:0!important;padding:4px 9px!important;
  font:800 9px/9px Inter,ui-sans-serif,system-ui,-apple-system,sans-serif!important;letter-spacing:.06em!important;white-space:nowrap!important;
  background:#0f1a30!important;border:1px solid #8fb8ff!important;border-radius:8px!important;color:#fff!important;width:auto!important;max-width:none!important}
html body button.ct-sl-open[data-ct-scorelab="threes"] > svg.ct-sl-icon{width:14px!important;height:14px!important;flex:0 0 14px!important}
html body .rebuild-topbar > button.ct-sl-open[data-ct-scorelab="threes"] > .ct-sl-sub,
html body > button.ct-sl-open[data-ct-scorelab="threes"] > .ct-sl-sub{display:inline-block!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;
  padding:4px 6px!important;border:0!important;border-radius:5px!important;background:#ffd76a!important;color:#0f1a30!important;
  font:800 9px/9px Inter,ui-sans-serif,system-ui,-apple-system,sans-serif!important;letter-spacing:.04em!important}
html body button.ct-sl-open[data-ct-scorelab="threes"] > .ct-sl-sub[hidden]{display:none!important}

/* 191: Soni cents note beside the score (visible text, dark on light) */
html body .ct-cents-note{display:flex;align-items:flex-start;gap:7px;margin:4px 0 6px;padding:5px 8px;background:#fffaf0;border:1.2px solid #1c2230;border-radius:9px}
html body .ct-cents-note svg{flex:none;width:20px;height:auto;max-height:26px}
html body .ct-cents-note p{margin:0;font:600 12px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#1c2230}

/* 191 (George 7:13): link from the cents note to READ ME > HISTORY */
html body .ct-cents-note a.ct-cents-more{display:inline-block;margin-top:3px;font:700 12px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#0b4a9e;text-decoration:underline}
html body .ct-cents-note a.ct-cents-more:focus-visible{outline:2px solid #0b4a9e;outline-offset:2px}
html body #rmhistory{scroll-margin-top:8px;border-radius:6px}
html body #rmhistory:focus{outline:none}
html body #rmhistory.ct-flash{outline:3px solid #ffd76a;outline-offset:3px}
html body #rmhowused{border-radius:6px}html body #rmhowused:focus{outline:none}html body #rmhowused.ct-flash{outline:3px solid #ffd76a;outline-offset:3px}
html body .ct-cents-note.ct-tip{position:relative;padding-right:30px}html body .ct-cents-note[hidden]{display:none!important}
html body .ct-sl-limit.ct-tip{position:relative;padding-right:30px}html body .ct-sl-limit .ct-tip-never{margin:0 0 0 6px}