/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", Helvetica, Arial;
  line-height: 1.6;
  color: #0f172a;
  background: #f1f5f9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { max-width: 720px; margin: 0 auto; padding: 16px; }

/* ===== Cards & Typography ===== */
.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  margin: 14px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.h2 { font-size: 18px; margin: 0 0 8px; }
.h3 { font-size: 16px; margin: 0 0 8px; }
.muted { color: #64748b; }

/* ===== Forms & Buttons ===== */
.actions { margin-top: 10px; }
.status { margin-top: 8px; }

select, textarea {
  width: 100%; margin-top: 6px;
  padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px;
  font-size: 16px; background: #fff;
}
textarea { resize: vertical; min-height: 88px; }
small { display: block; margin-top: 4px; color: #64748b; }

button, .button-like {
  display: inline-block; cursor: pointer; user-select: none;
  background: #1e2a78; color: #fff; border: none; border-radius: 10px;
  padding: 10px 14px; font-size: 16px; font-weight: 700;
  transition: background .2s ease, transform .02s ease;
  text-decoration: none; /* for .button-like */
}
button:hover:not(:disabled), .button-like:hover { background: #16205a; }
button:active:not(:disabled), .button-like:active { transform: translateY(1px); }
button:disabled { background: #94a3b8; cursor: not-allowed; }

/* ===== Steps ===== */
.step-card { position: relative; }
/* Step header */
.step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.step-head .h2 { margin: 0; line-height: 1.1; }

/* Step badge */
.step-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .04em;
  color: #0f172a;
  background: #e2e8f0;
}

/* 画面が広い時は少しだけ大きく */
@media (min-width: 640px) {
  .step-badge { height: 24px; font-size: 12px; }
}

.step-done {
  position: absolute; right: 12px; top: 12px;
  color: #16a34a; font-weight: 800; font-size: 12px;
}

/* --- Tags --- */
.tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-badge {
  display:inline-block; padding:4px 8px; border-radius:999px;
  font-size:12px; font-weight:700; background:#e2e8f0; color:#0f172a;
}

/* ===== Appendix (Nested) — refined ===== */
.appendix { margin-top: 10px; }

/* details のベースは枠を消してフラットに */
.appendix details {
  border: none;
  border-radius: 10px;
  background: transparent;
}

/* summary（見出し）: 三角は左、右端は親と揃える */
.appendix summary {
  position: relative;
  cursor: pointer;
  font-weight: 700;
  color: #0f172a;
  list-style: none;
  padding: 10px 12px;          /* 上右下左（親はここでOK） */
  border-radius: 10px;
}

/* 三角（左） */
.appendix summary { padding-left: 28px; }
.appendix summary::before {
  content: "▸";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: bold;
  color: #475569;
  transition: transform .18s ease;
}
.appendix details[open] > summary::before {
  transform: translateY(-50%) rotate(90deg);
}

/* 親 Appendix: 初期状態も淡い背景で目立たせる */
.appendix .ap-parent > summary {
  background: #f8fafc;         /* ← quiz と同じ色 */
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

/* hover/open の時は少し濃く */
.appendix .ap-parent > summary:hover,
.appendix .ap-parent[open] > summary {
  background: #f1f5f9;         /* ← 一段濃い色でアクセント */
}


/* 子セクション: 右は親とピタ、左だけ“少し”インデント */
.appendix .ap-child {
  margin: 8px 0 10px 6px;                  /* ← 左だけ +6px で段差をつける */
  border-radius: 10px;
}

/* 子 summary: 右端を親と揃え、左はアイコン分＋統一 */
.appendix .ap-child > summary {
  background: #f5f7fa;
  padding: 10px 12px 10px 28px;            /* 上右下左 */
  border-radius: 10px;
}
.appendix .ap-child > summary:hover {
  background: #eef2f7;
}

/* 中身ラッパー：右端は親と揃える（右12px固定）、左は本文開始位置をsummaryに合わせる */
.appendix .ap-items {
  padding: 0 12px 10px 28px;               /* 上右下左 */
}

/* 中身はフラット & 横幅いっぱい（丸みナシ、仕切り線のみ） */
.appendix .ap-item {
  margin: 0;
  padding: 12px 0;
  border-radius: 0;
  border-left: none;
  border-bottom: 1px solid #e2e8f0;
  background: transparent;
}
.appendix .ap-item:last-child { border-bottom: none; }

.appendix .ap-label   { font-weight: 700; color: #334155; margin-bottom: 2px; }
.appendix .ap-content { color: #475569; }

/* JSONの \n を改行として表示（保険） */
.appendix-content,
.appendix .ap-content.appendix-content {
  white-space: pre-line !important;
  line-height: 1.6;
}

/* --- Quiz (single question) --- */
.quiz { margin:12px 0 4px; padding:12px; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; }
.quiz h4 { margin:0 0 8px; font-size:15px; }
.quiz .choice { display:flex; gap:8px; align-items:flex-start; margin:6px 0; }
.quiz .result { margin-top:8px; font-weight:700; }
.quiz .ok { color:#16a34a; }
.quiz .ng { color:#b91c1c; }

/* ===== Fixed Top Header with Progress ===== */
:root { --topbar-h: 58px; }

.topbar-dock {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: calc(4.5px + env(safe-area-inset-top)) 12px 4.5px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid #e2e8f0;
  z-index: 1000;
}
.topbar-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar-row h1 { font-size: 15px; line-height: 1.1; margin: 0; font-weight: 600; }

/* Episodes nav */
.episodes a {
  display: inline-block; text-decoration: none;
  border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 4px 8px;
  color: #0f172a; background: #fff; font-size: 11px; font-weight: 600;
}
.episodes a:hover { background: #f8fafc; }
.episodes a.active { background: #0f172a; color: #fff; }

/* Progress line & text */
.pg-track {
  margin-top: 8px;
  width: 100%; height: 4px; border-radius: 999px;
  background: #e2e8f0; overflow: hidden;
}
.pg-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #1e2a78, #3b82f6);
  transition: width .25s ease;
  border-radius: 999px;
}
.pg-text {
  margin-top: 4px;
  font-size: 11px; font-weight: 800; color: #334155;
  text-align: right;
}

/* content spacer (prevents overlap under fixed header) */
.topbar-spacer { height: calc(var(--topbar-h) + env(safe-area-inset-top)); }

/* ===== Responsive header sizing ===== */
@media (min-width: 640px) {
  :root { --topbar-h: 74px; }
  .topbar-dock { padding: calc(8px + env(safe-area-inset-top)) 14px 8px; }
  .topbar-row { gap: 14px; }
  .topbar-row h1 { font-size: 18px; }
  .episodes a { font-size: 13px; padding: 5px 10px; border-radius: 10px; }
  .pg-track { height: 6px; }
  .pg-text  { font-size: 12px; }
}

@media (min-width: 1024px) {
  :root { --topbar-h: 86px; }
  .topbar-dock { padding: calc(10px + env(safe-area-inset-top)) 18px 10px; }
  .topbar-row { gap: 16px; }
  .topbar-row h1 { font-size: 20px; font-weight: 700; }
  .episodes a { font-size: 14px; padding: 6px 12px; border-radius: 12px; }
  .pg-track { height: 8px; }
  .pg-text  { font-size: 13px; }
}

/* audio player */
.audio-box { margin: 12px 0 4px; }
.audio-box figcaption { font-size: 13px; color: #334155; margin: 0 0 6px; font-weight: 700; }
.audio-box audio { width: 100%; outline: none; }

/* Dialogue */
.dialogue { margin: 12px 0; display: grid; gap: 6px; }
.dialogue .line { display: flex; gap: 8px; }
.dialogue .speaker { font-weight: 700; color: #0f172a; min-width: 70px; }
.dialogue .utterance { flex: 1; }
.dialogue .narration { font-style: italic; color: #475569; margin: 10px 0 6px; }
.dialogue .dlg-sep { border: 0; border-top: 1px dashed #cbd5e1; margin: 10px 0; }
.dialogue .utterance { white-space: pre-wrap; }
.dialogue .narration { white-space: pre-wrap; }

/* Episode info (右上タブ表示専用) */
.episode-info {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 10px;
  white-space: nowrap;
  pointer-events: none;
}
@media (min-width: 640px) {
  .episode-info {
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 10px;
  }
}

/* ===== Fix: quiz radio & text alignment (PC/Mobile) ===== */
.quiz .choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;            /* 先頭行の高さに合わせる */
}

.quiz .choice input[type="radio"] {
  /* 各OSの既定スタイル差を吸収して、先頭行と水平に見せる */
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin: 6px 0 0;                   /* ← ここで“ちょい上げ” */
  /* 端末ごとの微妙な差を更に吸収 */
  transform: translateY(1px);
  accent-color: #1e2a78;             /* 視認性（任意） */
}

.quiz .choice > div {
  flex: 1 1 auto;
  line-height: 1.6;                  /* 折り返し時の行間を統一 */
}

/* iOS/Safari系は少し低く見えがちなので微調整 */
@supports (-webkit-touch-callout: none) {
  .quiz .choice input[type="radio"] {
    margin-top: 6.2px;
    transform: none;
  }
}