/* ─── Variables ─────────────────────────────────────────── */
:root {
  --ink:          #10233f;
  --route:        #163b70;
  --signal:       #f3a712;
  --white:        #ffffff;
  --bg:           #f4f7f6;
  --slate-50:     #f8fafc;
  --slate-100:    #f1f5f9;
  --slate-200:    #e2e8f0;
  --slate-300:    #cbd5e1;
  --slate-400:    #94a3b8;
  --slate-500:    #64748b;
  --slate-600:    #475569;
  --slate-700:    #334155;
  --red-50:       #fef2f2;
  --red-700:      #b91c1c;
  --terminal-bg:  #101827;
  --terminal-fg:  #e8eefb;
  --card-shadow:  0 1px 4px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  /* brand tint helper — rgb of --route (#163b70) */
  --brand-r: 22; --brand-g: 59; --brand-b: 112;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { overflow-x: hidden; font-size: 16px; }

body {
  margin: 0;
  font-family: Inter, "Noto Sans JP", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--route); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.3; }
h1:focus { outline: none; }

/* ─── Layout helpers ────────────────────────────────────── */
.container {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }

/* ─── Header ────────────────────────────────────────────── */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-top: .875rem;
  padding-bottom: .875rem;
}
.logo-link { display: flex; align-items: center; text-decoration: none; }
.logo-link:hover { text-decoration: none; }
.logo-badge {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--ink);
  border-radius: .625rem;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
  user-select: none;
}
.site-name { font-size: 1.125rem; font-weight: 700; color: var(--ink); display: block; }
.site-desc { font-size: .75rem; color: var(--slate-500); display: block; }
.header-nav { margin-left: auto; display: flex; gap: 1rem; }
.header-nav a {
  font-size: .875rem;
  font-weight: 600;
  color: var(--slate-600);
  transition: color .15s;
  white-space: nowrap;
}
.header-nav a:hover { color: var(--route); text-decoration: none; }
.site-desc { display: none; }
@media (min-width: 480px) { .site-desc { display: block; } }

/* ─── Page main ─────────────────────────────────────────── */
.page-main { padding: 2rem 0 4rem; }

/* ─── Hero (Home) ───────────────────────────────────────── */
.hero-section { padding: 2.5rem 0 3rem; }
.hero-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--route);
  margin-bottom: .625rem;
}
.hero-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1rem;
  line-height: 1.2;
}
@media (min-width: 640px) { .hero-title { font-size: 2.5rem; } }
.hero-body {
  font-size: .9375rem;
  color: var(--slate-600);
  max-width: 34rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* ─── Page header (Scenarios) ───────────────────────────── */
.page-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--route);
  margin-bottom: .5rem;
}
.page-h1 {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .625rem;
}
.page-lead { font-size: .9375rem; color: var(--slate-600); }

/* ─── Cards grid ────────────────────────────────────────── */
.cards-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 560px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }

.scenario-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: .625rem;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  text-decoration: none;
  color: inherit;
}
.scenario-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  border-color: rgba(22,59,112,.3);
  text-decoration: none;
}
/* disabled category cards */
.scenario-card[aria-disabled="true"] {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}
.scenario-card[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: var(--card-shadow);
  border-color: var(--slate-200);
}
.scenario-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.scenario-card h2, .scenario-card h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; flex: 1; }
.scenario-meta { font-size: .75rem; color: var(--slate-400); }
.scenario-meta.meta-progress { color: #d97706; font-weight: 600; }
.scenario-meta.meta-done { color: #15803d; font-weight: 600; }
.scenario-summary { font-size: .8125rem; color: var(--slate-600); flex: 1; line-height: 1.6; }
.scenario-card-foot { margin-top: auto; padding-top: .875rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ─── Badges ────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .2em .65em;
  border-radius: 9999px;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Use InfraLab navy tint for category badge */
.badge-route   { background: rgba(22,59,112,.1);  color: var(--route);  border-color: rgba(22,59,112,.25); }
.badge-log     { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge-cmd     { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.badge-metric  { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.badge-config  { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.badge-unknown { background: var(--slate-100); color: var(--slate-500); border-color: var(--slate-200); }

/* ─── Buttons ───────────────────────────────────────────── */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--slate-200);
  border-radius: 9999px;
  background: var(--white);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  min-height: 2.25rem;
}
button:hover, .btn:hover { border-color: var(--route); color: var(--route); text-decoration: none; }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
button:focus-visible, .btn:focus-visible { outline: 3px solid rgba(22,59,112,.4); outline-offset: 2px; }
a:focus-visible { outline: 3px solid rgba(22,59,112,.4); outline-offset: 2px; }

.btn-primary {
  background: var(--route);
  border-color: var(--route);
  color: var(--white);
  border-radius: .5rem;
}
.btn-primary:hover { background: #0e2552; border-color: #0e2552; color: var(--white); }

/* ─── Error / status messages ───────────────────────────── */
.msg-error {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid #fecaca;
  border-radius: .5rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 600;
}
.msg-business, .msg-conflict, .msg-success {
  border-radius: .5rem;
  padding: .75rem 1rem;
  font-size: .875rem;
}
.msg-business { background: #fff8e6; color: #7a4a00; border: 1px solid #f5c66b; }
.msg-conflict { background: #eef6ff; color: #174a7a; border: 1px solid #90bde8; }
/* Green for success is semantically correct (correct-answer indicator) */
.msg-success { background: #ecfdf5; color: #166534; border: 1px solid #86d7ad; }
.message-title { margin: 0 0 .35rem; font-weight: 700; }
.status-loading {
  color: var(--slate-500);
  font-style: italic;
  padding: .5rem 0;
}
.empty-state {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--slate-400);
  font-size: .9375rem;
}

/* ─── Section card ──────────────────────────────────────── */
.section-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.section-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--route);
  margin-bottom: .875rem;
}

/* ─── Attempt page wrapper — two-panel on mobile/tablet ─── */
/* Desktop: single flex column (original behavior) */
.attempt-page-wrapper {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
/* On desktop, panels are transparent wrappers */
.attempt-left-panel,
.attempt-right-panel {
  display: contents;
}
/* Desktop ordering */
.attempt-left-panel .evidence-panel { order: 1; height: 360px; overflow-y: auto; }
.attempt-left-panel .phase-bar { order: 0; }
.attempt-left-panel .attempt-collapsible { order: 0; }
.attempt-right-panel .review-result-card { order: 0; }
.attempt-right-panel .attempt-operation { order: 2; }
.attempt-right-panel .attempt-return { order: 4; }
.attempt-right-panel > .section-card { order: 0; }
.debug-details { order: 3; }

/* Mobile/tablet: true two-column grid */
@media (max-width: 1023px) {
  /* Reduce page-main padding when attempt page is active */
  .page-main:has(.attempt-page-wrapper) {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .page-main:has(.attempt-page-wrapper) .container {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .attempt-page-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: .5rem;
    height: calc(100vh - 5.5rem);
    height: calc(100svh - 5.5rem);
    overflow: hidden;
  }
  .attempt-left-panel,
  .attempt-right-panel {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1rem;
    /* panel handles scrolling — children don't scroll independently */
  }
  /* Evidence panel: no fixed height, expands in left panel */
  .attempt-left-panel .evidence-panel {
    order: unset;
    height: auto;
    min-height: 8rem;
    overflow: visible;
    flex: 1;
  }
  .attempt-left-panel .attempt-collapsible { order: unset; }
  .attempt-left-panel .phase-bar { order: unset; }
  .attempt-right-panel .review-result-card { order: unset; }
  .attempt-right-panel .attempt-operation { order: unset; }
  .attempt-right-panel .attempt-return { order: unset; }
  .attempt-right-panel > .section-card { order: unset; }
}

/* On desktop, force collapsibles open (override <details> closed state) */
@media (min-width: 1024px) {
  .attempt-collapsible > summary { display: none; }
  .attempt-collapsible > :not(summary) { display: block; }
  .attempt-collapsible {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: .75rem;
    padding: .875rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
  }
}

/* Collapsible summary (mobile/tablet) */
.attempt-collapsible {
  min-width: 0;
}
.attempt-collapsible-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .875rem;
  cursor: pointer;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--route);
  list-style: none;
  user-select: none;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: .625rem;
  gap: .5rem;
}
.attempt-collapsible[open] > .attempt-collapsible-summary {
  border-radius: .625rem .625rem 0 0;
  border-bottom: 1px solid var(--slate-200);
}
.attempt-collapsible-summary::-webkit-details-marker { display: none; }
.attempt-collapsible-summary::marker { content: none; }
.attempt-collapsible-icon::before { content: '▶'; font-size: .55rem; display: inline-block; transition: transform .15s; }
.attempt-collapsible[open] .attempt-collapsible-icon::before { transform: rotate(90deg); }
.attempt-collapsible-body {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-top: none;
  border-radius: 0 0 .625rem .625rem;
  padding: .625rem .875rem .75rem;
}

/* Scenario title inside collapsible */
.attempt-head-inner {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-top: none;
  border-radius: 0 0 .625rem .625rem;
  padding: .5rem .875rem .625rem;
}
.attempt-head-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: .75rem;
  padding: 1rem 1.5rem;
}
.attempt-head-sub { font-size: .75rem; font-weight: 600; color: var(--slate-400); margin-bottom: .2rem; }
.attempt-head-title { font-size: 1.125rem; font-weight: 700; color: var(--ink); }

/* Shared panel and evidence styles */
.evidence-panel-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-bottom: .75rem; background: var(--white); }
.evidence-panel-head > span { color: var(--slate-500); font-size: .8rem; font-weight: 600; }
.evidence-empty { margin: 0; min-height: 5rem; display: grid; place-items: center; text-align: center; color: var(--slate-400); font-size: .8rem; line-height: 1.5; }

.attempt-head-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: .75rem;
  padding: 1rem 1.5rem;
}
.attempt-head-sub { font-size: .75rem; font-weight: 600; color: var(--slate-400); margin-bottom: .2rem; }
.attempt-head-title { font-size: 1.125rem; font-weight: 700; color: var(--ink); }

/* ─── Phase progress bar ────────────────────────────────── */
.phase-bar {
  display: flex;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.phase-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6rem .2rem;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--slate-400);
  border-right: 1px solid var(--slate-200);
  text-align: center;
  line-height: 1.3;
}
.phase-step:last-child { border-right: none; }
.phase-step.done {
  color: var(--slate-400);
  background: var(--slate-50);
}
.phase-step.active {
  background: var(--route);
  color: var(--white);
  font-weight: 700;
}
@media (max-width: 479px) {
  .phase-step { font-size: .6rem; padding: .5rem .1rem; }
  .site-header .container { flex-wrap: wrap; gap: .5rem; }
  .site-desc { display: none; }
  .header-nav { margin-left: auto; }
  .header-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .phase-bar { display: block; padding: .65rem .85rem; overflow: visible; }
  .phase-step { display: none; }
  .phase-step.active { display: flex; justify-content: flex-start; background: transparent; color: var(--route); padding: 0; font-size: .875rem; }
  .phase-step.active::before { content: "現在の段階 / 5: "; color: var(--slate-600); }
  .score-breakdown { display: flex; flex-direction: column; align-items: stretch; }
  .score-pill { justify-content: space-between; }
  .btn { min-height: 2.75rem; }
}
@media (max-width: 479px) {
  .phase-bar { display: block; padding: .5rem .75rem; }
  .phase-step { display: none; border: 0; }
  .phase-step.active { display: flex; justify-content: flex-start; background: transparent; color: var(--route); padding: 0; font-size: .875rem; }
  .phase-step.active::before { content: "現在の段階: "; color: var(--slate-600); margin-right: .25rem; }
}

/* ─── Symptoms ──────────────────────────────────────────── */
.symptom-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.symptom-item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .875rem;
  padding: .45rem .75rem;
  background: rgba(243,167,18,.08);
  border-left: 3px solid var(--signal);
  border-radius: 0 .375rem .375rem 0;
}

/* ─── Evidence / Operation log ──────────────────────────── */
.evidence-list { display: flex; flex-direction: column; gap: .75rem; }
.evidence-item {
  border: 1px solid var(--slate-200);
  border-radius: .625rem;
  overflow: hidden;
}
.evidence-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
}
.evidence-pre {
  margin: 0;
  background: var(--terminal-bg);
  color: var(--terminal-fg);
  padding: .875rem 1rem;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-size: .8rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.evidence-part { padding: .75rem .875rem; border-bottom: 1px solid var(--slate-200); font-size: .875rem; }
.evidence-part:last-child { border-bottom: none; }
.evidence-part > p { margin: 0 0 .35rem; color: var(--slate-500); font-size: .75rem; font-weight: 700; }
.evidence-part code { font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace; overflow-wrap: anywhere; }
.evidence-part .evidence-pre { margin: .25rem -.875rem -.75rem; }
/* Interpretation uses neutral blue (not green) */
.evidence-interpretation { background: #eff6ff; color: #1d4ed8; }

/* ─── Learning controls ────────────────────────────────── */
.learning-copy { margin: 0 0 .75rem; color: var(--slate-600); font-size: .875rem; line-height: 1.55; }
.selection-count { margin: -.4rem 0 .75rem; color: var(--slate-600); font-size: .875rem; font-weight: 600; }
.disabled-reason { margin: .5rem 0 0; color: var(--slate-600); font-size: .8rem; }
.answer-summary { margin-bottom: .75rem; }
.answer-summary-label { margin: .5rem 0 .15rem; font-size: .75rem; font-weight: 700; }
.answer-summary-label:first-child { margin-top: 0; }
.answer-summary-value { margin: 0; line-height: 1.55; }
.phase-cta { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--slate-200); }
.phase-cta p { margin: 0 0 .75rem; font-size: .875rem; line-height: 1.5; }
.phase-cta.waiting p { color: var(--slate-600); }
.phase-cta.ready p { color: var(--route); font-weight: 600; }
.command-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: .1rem 0; background: transparent; border: 0; color: var(--route); font-weight: 700; text-align: left; }
.command-panel { padding-top: .875rem; }

/* ─── Terminal command input ────────────────────────────── */
.terminal-form {
  display: flex;
  gap: .5rem;
  background: var(--terminal-bg);
  border: 1px solid #2a3b52;
  border-radius: .625rem;
  padding: .625rem .875rem;
  align-items: center;
}
.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--terminal-fg);
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-size: .875rem;
  line-height: 1.5;
  min-height: 1.875rem;
}
.terminal-input::placeholder { color: rgba(186,210,255,.4); }
.terminal-submit {
  background: rgba(22,59,112,.3);
  border: 1px solid rgba(22,59,112,.5);
  border-radius: 9999px;
  color: rgba(186,210,255,.9);
  padding: .35rem .875rem;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  min-height: unset;
}
@media (max-width: 479px) {
  .section-card { padding: 1rem; }
  .terminal-form { align-items: stretch; flex-direction: column; }
  .terminal-submit { min-height: 2.5rem; }
}
.terminal-submit:hover { background: rgba(22,59,112,.5); color: rgba(186,210,255,1); }
.terminal-submit:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ─── Action buttons grid ───────────────────────────────── */
.action-grid {
  display: grid;
  gap: .5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 480px) { .action-grid { grid-template-columns: 1fr 1fr; } }

.action-btn {
  min-width: 0;
  text-align: left;
  border: 1px solid var(--slate-200);
  border-radius: .5rem;
  padding: .625rem 1rem;
  background: var(--white);
  color: var(--ink);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: border-color .15s, background .15s, color .15s;
}
.action-btn:hover { border-color: var(--route); background: rgba(22,59,112,.04); color: var(--route); text-decoration: none; }
.action-btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.action-btn.executed { display: flex; flex-direction: column; gap: .2rem; background: var(--slate-100); border-color: var(--slate-300); color: var(--slate-600); }
.action-btn.executed small { color: var(--slate-500); font-size: .75rem; font-weight: 700; }
.action-btn code { min-width: 0; font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace; overflow-wrap: anywhere; white-space: normal; }
.action-display-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin: 0 0 .75rem; font-size: .8rem; color: var(--slate-600); }
.action-display-toggle button { min-height: 2.25rem; padding: .35rem .65rem; border: 1px solid var(--slate-300); border-radius: .4rem; background: var(--white); color: var(--ink); font: inherit; font-weight: 700; }
.action-display-toggle button.active { border-color: var(--route); background: rgba(22,59,112,.08); color: var(--route); }

/* ─── Choice cards (diagnosis / remediation / verification) */
.choice-grid { display: flex; flex-direction: column; gap: .5rem; }
.choice-label {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 2px solid var(--slate-200);
  border-radius: .625rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-size: .875rem;
  line-height: 1.5;
  justify-content: flex-start;
  text-align: left;
}
.choice-label:hover { border-color: var(--route); background: rgba(22,59,112,.03); }
.choice-label input[type=radio],
.choice-label input[type=checkbox] { display: none; }
.choice-label.selected,
.choice-label.checked { border-color: var(--route); background: rgba(22,59,112,.07); font-weight: 600; }
.choice-button {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 2px solid var(--slate-200);
  border-radius: .625rem;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  justify-content: flex-start;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.5;
  min-height: 52px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.choice-button:hover, .choice-button:focus-visible { border-color: var(--route); background: rgba(22,59,112,.03); }
.choice-button.selected { border-color: var(--route); background: rgba(22,59,112,.07); font-weight: 600; }
.choice-button:disabled { cursor: not-allowed; opacity: .6; }
.choice-button.incorrect { background: var(--slate-100); border-color: var(--slate-300); color: var(--slate-500); opacity: .8; }
.choice-button.incorrect .choice-indicator::after { content: "×"; display: grid; place-items: center; font-weight: 800; line-height: .8; }

.choice-button.selected .choice-indicator {
  border-color: var(--route);
  background: var(--route);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='2.8' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.choice-indicator {
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid var(--slate-300);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .2rem;
  transition: border-color .15s, background .15s;
}
.choice-label.selected .choice-indicator {
  border-color: var(--route);
  background: var(--route);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2020/12/schema' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='2.8' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.choice-indicator-check {
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid var(--slate-300);
  border-radius: .3rem;
  flex-shrink: 0;
  margin-top: .2rem;
  transition: border-color .15s, background .15s;
}
.choice-label.checked .choice-indicator-check {
  border-color: var(--route);
  background: var(--route);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ─── Answer feedback zone (P0) ─────────────────────────── */
/* Always-present reserved area prevents layout jump */
.answer-feedback-zone {
  min-height: 4.75rem;
  margin-top: .75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.answer-feedback-sending {
  padding: .5rem 0;
  color: var(--slate-500);
  font-style: italic;
  font-size: .875rem;
}
/* Incorrect feedback — amber/red tint */
.answer-feedback-incorrect {
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-left: 3px solid var(--red-700);
  border-radius: .5rem;
  padding: .75rem 1rem;
}
/* Correct feedback — blue tint (distinct from brand, limited) */
.answer-feedback-correct {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 3px solid #2563eb;
  border-radius: .5rem;
  padding: .75rem 1rem;
}
.feedback-correct-title {
  font-weight: 700;
  color: #1d4ed8;
  margin: 0 0 .35rem;
  font-size: .875rem;
}
.feedback-title {
  font-weight: 700;
  color: var(--red-700);
  margin: 0 0 .35rem;
  font-size: .875rem;
}
.feedback-selected {
  margin: 0 0 .35rem;
  font-size: .8rem;
  color: var(--slate-700);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.feedback-body {
  margin: 0 0 .25rem;
  font-size: .875rem;
  color: var(--slate-700);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.feedback-body:last-child { margin-bottom: 0; }
.feedback-next {
  margin: .5rem 0 0;
  font-size: .8rem;
  color: var(--slate-500);
  font-style: italic;
}

/* ─── Score / review ────────────────────────────────────── */
.score-display { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .75rem; }
.score-total { font-size: 3rem; font-weight: 700; color: var(--route); line-height: 1; }
.score-unit { font-size: .9375rem; color: var(--slate-500); }
.score-breakdown {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.score-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .875rem;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 9999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--slate-600);
}

/* ─── Review collapsible details (mobile-first) ─────────── */
.review-section { border-top: 1px solid var(--slate-100); padding-top: 1rem; }
.review-details {
  border: 1px solid var(--slate-200);
  border-radius: .625rem;
  margin-bottom: .625rem;
  overflow: hidden;
}
.review-details:last-child { margin-bottom: 0; }
.review-summary {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .2rem .5rem;
  padding: .7rem 1rem;
  cursor: pointer;
  background: var(--slate-50);
  user-select: none;
  list-style: none;
  font-size: .875rem;
}
.review-summary::-webkit-details-marker { display: none; }
.review-summary::marker { content: none; }
.review-summary-toggle {
  font-size: .65rem;
  color: var(--slate-400);
  flex-shrink: 0;
  align-self: center;
  margin-right: .25rem;
  display: inline-block;
  transition: transform .15s;
}
.review-details[open] > .review-summary > .review-summary-toggle { transform: rotate(90deg); }
.review-summary-phase {
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}
.review-summary-score {
  font-weight: 600;
  color: var(--route);
  flex-shrink: 0;
}
.review-summary-incorrect {
  color: var(--slate-500);
  font-size: .8rem;
  flex-shrink: 0;
}
.review-summary-label {
  color: var(--slate-600);
  font-size: .8rem;
  flex-basis: 100%;
  overflow-wrap: anywhere;
  margin-top: .15rem;
}
.review-detail-body {
  padding: .75rem 1rem;
  font-size: .875rem;
}
.review-detail-body .review-dd { margin: 0 0 .3rem; color: var(--slate-600); }
.review-detail-body .review-explain { margin: .25rem 0 0; font-size: .8rem; color: var(--slate-500); line-height: 1.6; }
.review-detail-body ul { margin: .2rem 0 .5rem; padding-left: 1.25rem; font-size: .875rem; color: var(--slate-600); }

/* old non-details review styles kept for reference */
.review-h { font-size: .875rem; font-weight: 700; color: var(--ink); margin-bottom: 1rem; }
.review-block { margin-bottom: 1.25rem; }
.review-block:last-child { margin-bottom: 0; }
.review-dt { font-size: .7rem; font-weight: 700; color: var(--slate-400); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3rem; }
.review-dd { margin: 0 0 .2rem; font-size: .875rem; color: var(--slate-600); }
.review-correct   { color: var(--route); font-weight: 700; }
.review-incorrect { color: var(--red-700); font-weight: 700; }
.review-explain   { font-size: .8rem; color: var(--slate-500); margin-top: .25rem; }

/* ─── Review result card — scroll target ────────────────── */
.review-result-card:focus { outline: none; }

/* ─── Debug info ────────────────────────────────────────── */
.debug-details {
  font-size: .75rem;
  color: var(--slate-400);
  border: 1px dashed var(--slate-200);
  border-radius: .5rem;
  padding: .5rem .875rem;
}
.debug-details summary {
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  list-style: none;
}
.debug-details summary::before { content: '▶ '; font-size: .65rem; }
.debug-details[open] summary::before { content: '▼ '; }
.debug-dl { margin: .5rem 0 0; }
.debug-dt { font-weight: 700; display: inline; }
.debug-dd { display: inline; margin: 0 0 0 .3rem; overflow-wrap: anywhere; }
.debug-dd::after { content: '\A'; white-space: pre; }

/* ─── Blazor error UI ───────────────────────────────────── */
#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0,0,0,.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: .6rem 1.25rem .7rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.blazor-error-boundary {
  background: #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}
.blazor-error-boundary::after { content: "エラーが発生しました。"; }

/* ─── WASM initial load progress ────────────────────────── */
.loading-progress {
  position: absolute;
  display: block;
  width: 8rem;
  height: 8rem;
  inset: 20vh 0 auto 0;
  margin: 0 auto;
}
.loading-progress circle {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: .6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.loading-progress circle:last-child {
  stroke: var(--route);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%;
  transition: stroke-dasharray .05s ease-in-out;
}
.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto .2rem;
}
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }