/* All styles are scoped. Typography and page layout remain owned by the theme. */
.mcc {
  --mcc-accent: var(--cyan-text, var(--wp--preset--color--primary, var(--theme-palette-color-1, currentColor)));
  --mcc-border: var(--card-border, var(--theme-border-color, currentColor));
  --mcc-surface: var(--card-bg-solid, transparent);
  --mcc-radius: var(--radius-md, var(--theme-border-radius, .5em));
  --mcc-space: var(--wp--preset--spacing--40, 1.5em);
  width: 100%;
  max-width: var(--max-narrow, var(--wp--style--global--content-size, 100%));
  margin-inline: auto;
  color: inherit;
  font: inherit;
  overflow-wrap: anywhere;
}
.mcc, .mcc * { box-sizing: border-box; }
.mcc [hidden] { display: none !important; }
.mcc [data-mcc-view] { scroll-margin-top: calc(var(--nav-height, 0px) + 3em); }
.mcc [data-mcc-view] > :first-child { margin-top: 0; }
.mcc .mcc-intro { text-align: center; padding-block: var(--mcc-space); }
.mcc .mcc-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em 1.5em; padding: 0; list-style: none; }
.mcc .mcc-small { font-size: .875em; }
.mcc .mcc-intro-note { margin-top: var(--mcc-space); }
.mcc .mcc-current-context { text-align: start; margin-block: var(--mcc-space); }
.mcc .mcc-current-context p { margin-block: 0 .65em; }
.mcc .mcc-question-context { margin-block: 0 .75em; }
.mcc .mcc-question-context + h2 { margin-top: 0; }
.mcc .mcc-progress { height: .25em; background: var(--mcc-border); overflow: hidden; border-radius: var(--mcc-radius); }
.mcc .mcc-progress > span { display: block; height: 100%; background: var(--mcc-accent); }
.mcc .mcc-count { margin-block: .75em var(--mcc-space); }
.mcc .mcc-answers { display: grid; gap: .75em; margin-block: var(--mcc-space); }
.mcc .mcc-answer, .mcc .mcc-theme-choice {
  width: 100%; min-height: 3em; padding: .85em 1em;
  font: inherit; color: inherit; text-align: start; white-space: normal;
  background: var(--mcc-surface); border: 1px solid var(--mcc-border);
  border-radius: var(--mcc-radius); cursor: pointer;
}
.mcc .mcc-answer:hover, .mcc .mcc-theme-choice:hover { border-color: var(--mcc-accent); }
.mcc .mcc-answer[aria-pressed="true"] { border-color: var(--mcc-accent); box-shadow: inset 0 0 0 1px var(--mcc-accent); }
.mcc .mcc-selected { float: right; font-size: .875em; margin-inline-start: .5em; }
.mcc .mcc-back { font: inherit; font-size: .875em; color: inherit; background: transparent; border: 0; padding: .6em 0; text-decoration: underline; cursor: pointer; min-height: 44px; }
.mcc :is(button, a, summary):focus-visible { outline: 2px solid var(--mcc-accent); outline-offset: 4px; }
.mcc [tabindex="-1"]:focus { outline: none; }
.mcc .mcc-loading { padding-block: calc(var(--mcc-space) * 2); text-align: center; animation: mcc-fade .25s ease both; }
.mcc .mcc-result-section { margin-block: calc(var(--mcc-space) * 1.5); }
.mcc .mcc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75em; }
.mcc .mcc-card { min-width: 0; padding: 1em; border: 1px solid var(--mcc-border); border-radius: var(--mcc-radius); background: var(--mcc-surface); }
.mcc .mcc-card > :first-child { margin-top: 0; }
.mcc .mcc-card > :last-child { margin-bottom: 0; }
.mcc .mcc-body-label { display: block; margin-bottom: .5em; font-size: .875em; }
.mcc .mcc-related { display: grid; gap: 1em; }
.mcc .mcc-related summary { cursor: pointer; padding-block: .75em; }
.mcc .mcc-related details .mcc-card { margin-block: .75em; }
.mcc .mcc-cta { margin-top: 1em; }
.mcc .mcc-actions { margin-block: var(--mcc-space); display: flex; flex-wrap: wrap; gap: 1.5em; }
.mcc .mcc-score-list { display: grid; gap: 1em; }
.mcc .mcc-score-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35em .75em; align-items: start; }
.mcc .mcc-score-label { display: flex; flex-direction: column; min-width: 0; }
.mcc .mcc-score-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mcc .mcc-score-track { grid-column: 1 / -1; height: .4em; border-radius: var(--mcc-radius); background: var(--mcc-border); overflow: hidden; }
.mcc .mcc-score-track > span { display: block; height: 100%; background: var(--mcc-accent); }
.mcc .mcc-notice { margin-top: calc(var(--mcc-space) * 2); border-top: 1px solid var(--mcc-border); padding-top: var(--mcc-space); }
/* Morikawa's prose links would otherwise override its own button styles. */
.mcc[data-mcc-theme="morikawa"] a.btn { text-decoration: none; }
.mcc[data-mcc-theme="morikawa"] a.btn-primary { color: var(--bg-1); }
@keyframes mcc-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mcc .mcc-loading { animation: none; } }