/* A visible place to return, and reachable controls while reflecting. */
body:has(#overview[open]) {overflow: hidden}
#overview .ov-sticky {position: sticky; top: 0; z-index: 4; background: #fff}
#overview .ov-sticky .ov-head {position: static; padding-bottom: 12px; border-bottom: 0}
#overview .ov-tabs {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0 28px 16px; border-bottom: 1px solid var(--rule)}
#overview .ov-tabs button {display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 70px; padding: 9px 16px; border: 1px solid var(--rule); border-radius: 5px; background: var(--pale); color: var(--blue); font: 600 18px/1.5 var(--sans); text-align: left}
#overview .ov-tabs button[aria-selected="true"] {border: 2px solid var(--blue); background: #fff9e7; box-shadow: inset 0 -3px var(--blue)}
#overview .ov-tabs small {display: block; font-size: 15px; font-weight: 400; margin-top: 3px}
#overview .ov-tab-symbol {font-size: 34px; font-weight: 400; line-height: 1}
#overview .ov-map-symbol,.dock-grid {display: inline-block; width: 22px; height: 22px; flex: 0 0 22px; background: linear-gradient(90deg,currentColor 8px,transparent 8px,transparent 14px,currentColor 14px) top/100% 8px no-repeat,linear-gradient(90deg,currentColor 8px,transparent 8px,transparent 14px,currentColor 14px) bottom/100% 8px no-repeat}
#overview .ov-personal {padding-top: 16px}
#overview .ov-personal > section {margin-block: 0}
#overview .ov-empty {display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: center; gap: 32px; padding: 22px; background: var(--pale)}
#overview .ov-empty img {max-height: 220px; width: auto; margin: auto}
#overview .ov-empty h3 {font-size: 24px}
#overview .ov-empty p {font-size: 16px; margin: 12px 0 18px}
#overview .ov-empty .ov-empty-note {font-size: 15px; margin-bottom: 0}
#overview .ov-here {border-color: var(--blue); border-top-width: 5px; background: #fff9e7}
#overview .ov-here .ov-step-number::after {content: ' いまここ'; font: 600 15px/1.5 var(--sans); white-space: nowrap; padding: 3px 6px; color: var(--blue); background: #fff9e7}
#overview .ov-kicker,#overview .ov-step-copy > p,#overview .ov-step-copy > .ov-outcome,#overview .ov-step-link,#overview .ov-support-link,#overview .ov-support-card .ov-kicker {font-size: max(15px,.94rem)}
.scene-sidebar nav button {grid-template-columns: 45px minmax(0,1fr) 31px; gap: 8px; min-height: 70px; padding: 7px}
.scene-sidebar nav button b {font-size: 15px; line-height: 1.5}
.scene-sidebar nav button small {font-size: 15px}
.scene-nav-art {position: relative; display: block; width: 45px; height: 52px; overflow: hidden}
.scene-nav-art .scene-art {position: absolute; inset: 0; width: 45px; height: 45px}
.scene-nav-art em {position: absolute; left: 0; bottom: 0; padding: 0 4px; background: #fff; color: var(--blue); font-size: 12px; font-style: normal; line-height: 1.3}
.scene-sidebar nav button.current {border-left-width: 4px}
.scene-sidebar nav button.complete small::before {content: '✓'; display: block; line-height: 1}
.answer-option > span:last-child b {font-size: 16px}
.answer-option > span:last-child > span {font-size: 16px; line-height: 1.75}
.answer-option {min-height: 62px; padding: 15px 17px}
.axis-tabs button,.question-actions .button,.question-actions .text-button,.check-shortcuts a,.check-shortcuts .text-button,.insight a,.insight .eyebrow,.answer-hint {font-size: 16px}
.axis-tabs button {min-height: 52px}
.insight h3 {font-size: 21px}
.insight p {font-size: 16px}
.check-controls .save-state,.progress-line > span,.scene-sidebar > p,.live-strength p,.live-strength > span {font-size: 15px}
.question-dock {display: none}
.expand-choice {flex: 1 1 100%; padding: 22px; background: var(--pale); border-left: 3px solid var(--accent)}
.expand-choice > p {font-size: 16px; margin-bottom: 14px; max-width: 52em}
.practice-record {scroll-margin-top: 28px}
.hero-nav-link {display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto 0; width: fit-content; min-height: 48px; padding: 10px 18px; border: 1px solid var(--blue); border-radius: 4px; color: var(--blue); background: #fff; font: 600 16px/1.5 var(--sans)}
.hero-nav-link:hover {background: var(--pale)}
.hero-refresh .hero-art figcaption {display: grid; justify-content: stretch; gap: 0}
.hero-flow {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px}
.hero-refresh .hero-nav-link {margin-top: 12px}
.hero-nav-link .dock-grid {width: 18px; height: 18px; flex-basis: 18px; background-size: 100% 7px}
.hero-nav-link:focus-visible {outline: 3px solid var(--accent); outline-offset: 4px}
@media (max-width: 820px) {
  .scene-sidebar nav button {flex-basis: 187px; grid-template-columns: 45px minmax(0,1fr) 30px; min-height: 72px}
  .scene-sidebar nav button b {font-size: 15px}
}
@media (max-width: 700px) {
  body[data-page="check"] #main {padding-bottom: 150px}
  body[data-page="check"] .overview-toggle {display: none}
  body[data-page="check"] #toast {bottom: 124px}
  .question-dock {position: fixed; display: block; left: 0; right: 0; bottom: 0; z-index: 35; padding: 9px 12px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #b9cbd8; background: #fffffff7; box-shadow: 0 -4px 18px #20364b12}
  .question-dock-position {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin-bottom: 8px; font-size: 13px; line-height: 1.5; color: var(--muted)}
  .question-dock-position strong {color: var(--blue); font-size: 14px}
  .question-dock-actions {display: grid; grid-template-columns: 54px minmax(0,1fr) minmax(0,1.15fr); gap: 8px}
  .question-dock-actions button {min-height: 48px; padding: 7px 6px; border: 1px solid var(--blue); border-radius: 4px; font: 600 15px/1.5 var(--sans)}
  .question-dock-actions .dock-nav {display: grid; justify-items: center; align-content: center; gap: 3px; font-size: 12px; color: var(--blue); background: #fff}
  .dock-nav .dock-grid {width: 15px; height: 15px; background-size: 100% 5px; background-image: linear-gradient(90deg,currentColor 5px,transparent 5px,transparent 10px,currentColor 10px),linear-gradient(90deg,currentColor 5px,transparent 5px,transparent 10px,currentColor 10px)}
  .question-dock-actions .dock-insight {color: var(--blue); background: #fff9e7}
  .question-actions .button[data-action="next"] {display: none}
  .question-intro {grid-template-columns: 95px minmax(0,1fr); gap: 15px}
  .question-intro .scene-art {width: 95px; margin: 0}
  .question-intro h2 {font-size: 20px; line-height: 1.6}
  .question-intro .kicker,.question-intro p:not(.kicker) {font-size: 15px}
  .question-card {padding: 18px 14px}
  .reference-text {font-size: 16px; line-height: 1.8}
  .answer-option {padding: 13px 12px; gap: 10px}
  .answer-option > span:last-child b,.answer-option > span:last-child > span {font-size: 16px}
  .axis-tabs button {font-size: 16px; gap: 4px}
  .axis-tabs button > span,.axis-tabs button > b {font-size: 14px}
  .insight {padding: 18px 15px}
  .insight h3 {font-size: 19px}
  .insight p,.insight a {font-size: 16px}
  #overview .ov-tabs {padding: 0 16px 14px; gap: 8px}
  #overview .ov-tabs button {font-size: 16px; gap: 8px; padding: 8px 9px; min-height: 62px}
  #overview .ov-tabs small {font-size: 13px}
  #overview .ov-tab-symbol {font-size: 27px}
  #overview .cty-visual {display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr); align-items: center}
  #overview .cty-scene-art {aspect-ratio: 1}
  #overview .cty-visual-progress {padding: 8px 4px; gap: 4px; border-top: 0}
  #overview .cty-progress-ring,#overview .cty-progress-ring svg {width: 86px; height: 86px}
  #overview .cty-progress-ring {flex-basis: 86px}
  #overview .cty-visual figcaption {padding: 10px; border-top: 0}
  #overview .cty-cover-art {padding: 12px}
  #overview .cty-cover-art > img {height: 110px; max-height: 110px; max-width: 100%}
  #overview .ov-empty {grid-template-columns: minmax(0,1fr); gap: 20px; padding: 18px}
  #overview .ov-empty img {max-height: 150px}
  #overview .ov-empty h3 {font-size: 21px}
}
@media (max-width: 380px) {
  .question-intro {grid-template-columns: minmax(0,1fr); gap: 5px}
  .question-intro .scene-art {width: 126px; margin: 0 auto}
  #overview .ov-tabs small {display: none}
  #overview .ov-tabs button {min-height: 52px; gap: 7px}
}
@media (prefers-reduced-motion: reduce) {
  .question-dock,.hero-nav-link {transition: none}
}
@media print {
  .question-dock,.hero-nav-link,.expand-choice,#overview {display: none !important}
}