/* YELL 教材コンポーネントの見た目。色・余白は tokens.css の変数を使う。 */

.yell-component {
  margin: var(--yell-space-5) 0;
}

.yell-fallback {
  color: var(--yell-color-text-muted);
  font-size: 0.8rem;
}

/* 長いインライン数式も、本文や解説の枠内で横に送って最後まで読めるようにする。
   印刷では MathJax 本来の幅を使い、スクロール枠による欠けを作らない。 */
@media screen {
  .md-main:has(.yell-page-header) .md-typeset mjx-container:not([display="true"]) {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 0.15em;
    vertical-align: middle;
  }
}

/* ── 静止図（ビルド時に作った SVG）─────────────────── */

.yell-figure {
  max-width: 560px;
  margin-inline: auto;
}

/* 図の入れ物（静止図・問題図・解説図）。Material は figure を「中身の幅」にするので、
   ここで幅を 100% に戻す（そうしないと SVG が既定の 300px になり、STEP の文字で幅が変わる）。
   --yell-svg-width は viewBox の幅（inline_svg が付ける）。1 単位 = 最大 1.3px にして、
   どの図でも点名が同じくらいの大きさに見えるようにする。 */
.md-typeset .yell-figure,
.md-typeset .yell-question-figure,
.md-typeset .yell-visual {
  display: block;
  width: 100%;
}

.yell-figure__svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--md-text-font-family, sans-serif);
}

.yell-c-positive { fill: var(--yell-figure-positive); }
.yell-c-negative { fill: var(--yell-figure-negative); }
.yell-c-result { fill: var(--yell-figure-result); }
.yell-c-neutral { fill: var(--yell-figure-neutral); }
.yell-c-ink { fill: var(--yell-figure-ink); }
.yell-s-positive { stroke: var(--yell-figure-positive); }
.yell-s-negative { stroke: var(--yell-figure-negative); }
.yell-s-result { stroke: var(--yell-figure-result); }
.yell-s-neutral { stroke: var(--yell-figure-neutral); }
.yell-s-ink { stroke: var(--yell-figure-ink); }
.yell-f-positive { fill: var(--yell-figure-positive); }
.yell-f-negative { fill: var(--yell-figure-negative); }
.yell-f-result { fill: var(--yell-figure-result); }
.yell-f-neutral { fill: var(--yell-figure-neutral); }
.yell-f-ink { fill: var(--yell-figure-ink); }

/* ── 操作できる数直線 ─────────────────────────────── */

.yell-number-line[data-yell] {
  padding: var(--yell-space-4);
  border: 1px solid var(--yell-color-border);
  border-radius: var(--yell-radius-md);
}

.yell-explorer__equation {
  margin: 0 0 var(--yell-space-2);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.yell-number-line .yell-explorer__board {
  /* JSXGraph の文字の z-index を図の中に閉じ込め、固定ヘッダーより上に出さない。 */
  isolation: isolate;
  width: 100%;
  max-width: 560px;
  height: 190px;
  margin: 0 auto;
  border: 0;
  background: transparent;
  touch-action: pan-y;
}

.yell-explorer__controls {
  display: grid;
  gap: var(--yell-space-2) var(--yell-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-top: var(--yell-space-3);
}

.yell-explorer__control {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) 3em;
  align-items: center;
  gap: var(--yell-space-2);
  font-size: 0.8rem;
}

.yell-explorer__control input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  accent-color: var(--yell-color-primary);
}

.yell-explorer__control output {
  font-weight: 700;
  text-align: right;
}

.yell-explorer__explanation {
  margin: var(--yell-space-2) 0 0;
  color: var(--yell-color-text-muted);
  text-align: center;
}

/* ── クイズ ───────────────────────────────────────── */

.yell-quiz {
  padding: var(--yell-space-3) var(--yell-space-4);
  border: 1px solid var(--yell-color-border);
  border-radius: var(--yell-radius-md);
  background: var(--yell-color-surface);
}

.yell-quiz__title {
  margin: 0 0 var(--yell-space-3);
  font-weight: 700;
}

.yell-quiz__card + .yell-quiz__card {
  margin-top: var(--yell-space-4);
  padding-top: var(--yell-space-4);
  border-top: 1px dashed var(--yell-color-border);
}

/* 1つの元の問題を分けたときの続き（(13)(b) など）：区切り線を出さず、左の線でつなげる */
.yell-quiz__card + .yell-quiz__card--continued {
  margin-top: var(--yell-space-2);
  padding-top: var(--yell-space-2);
  padding-left: var(--yell-space-3);
  border-top: 0;
  border-left: 3px solid var(--yell-color-border);
}

.yell-quiz__question {
  margin: 0 0 var(--yell-space-2);
}

.yell-quiz__label {
  margin-right: 0.4em;
  font-weight: 700;
}

.yell-quiz__input {
  width: min(100%, 16rem);
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: var(--yell-radius-sm);
  background: var(--yell-color-surface);
  color: var(--yell-color-text);
  font-size: 1rem;
}

.yell-quiz__choices {
  display: grid;
  gap: 0.35rem;
}

.yell-quiz__choice {
  display: flex;
  align-items: center;
  gap: var(--yell-space-2);
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--yell-color-border);
  border-radius: var(--yell-radius-sm);
  cursor: pointer;
}

.yell-quiz__choice:has(input:checked) {
  border-color: var(--yell-color-primary);
}

.yell-quiz__choice:has(input:focus-visible) {
  outline: 3px solid var(--yell-color-primary);
  outline-offset: 2px;
}

.yell-quiz__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yell-space-2);
  margin-top: var(--yell-space-3);
}

.md-typeset .yell-quiz .md-button {
  margin: 0;
  min-height: 44px;
  padding: 0.5em 1.2em;
  font-size: 0.75rem;
}

.yell-quiz__hint {
  margin: var(--yell-space-2) 0 0;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--yell-color-accent);
  background: var(--yell-feedback-hint-surface);
}

.yell-quiz__feedback > p {
  margin: var(--yell-space-2) 0 0;
}

.yell-quiz__feedback .yell-quiz__reveal {
  margin-top: var(--yell-space-2);
}

.yell-quiz__feedback.is-correct .yell-quiz__result {
  color: var(--yell-feedback-correct);
  font-weight: 700;
}

.yell-quiz__feedback.is-retry .yell-quiz__result {
  color: var(--yell-feedback-retry);
  font-weight: 700;
}

.yell-quiz__retry-help {
  color: var(--yell-color-text-muted);
}

.yell-quiz__progress {
  margin: 0 0 var(--yell-space-1);
  color: var(--yell-color-text-muted);
  font-size: 0.75rem;
}

.md-typeset .yell-quiz .yell-quiz__next {
  margin-top: var(--yell-space-3);
}

.yell-quiz__score {
  margin: 0 0 var(--yell-space-2);
  font-size: 1rem;
}

.yell-quiz__meter {
  height: 0.6rem;
  border-radius: var(--yell-radius-sm);
  background: var(--yell-color-border);
  overflow: hidden;
}

.yell-quiz__meter span {
  display: block;
  height: 100%;
  background: var(--yell-color-primary);
}

.md-typeset .yell-quiz__summary {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.md-typeset .yell-quiz__summary li {
  margin-left: 0;
}

.yell-quiz__summary li.is-wrong {
  color: var(--yell-feedback-retry);
}

.yell-quiz__print {
  display: none !important; /* 画面では隠す（Material の ol の指定より強くする） */
}

@media print {
  .yell-quiz__stage {
    display: none !important;
  }

  .yell-quiz__print {
    display: block !important;
    margin: 0;
  }

  .yell-quiz__print li {
    margin-bottom: 0.8rem;
  }

  .yell-quiz__print-blank {
    display: inline-block;
    width: 8rem;
    margin-left: 1rem;
    border-bottom: 1px solid #000;
  }

  .yell-quiz__actions,
  .yell-quiz__feedback,
  .yell-quiz__next,
  .yell-quiz__hint,
  .yell-explorer__controls,
  .yell-explorer__explanation {
    display: none !important;
  }

  .yell-quiz,
  .yell-number-line[data-yell] {
    border-color: #999;
    break-inside: avoid;
  }

  .yell-figure {
    break-inside: avoid;
  }

  .yell-quiz__input {
    border: 0;
    border-bottom: 1px solid #000;
    border-radius: 0;
  }
}

/* ── 問題図・式の入力・小問 ───────────────────────────── */

.yell-question-figure {
  max-width: 420px;
  margin: var(--yell-space-3) auto;
}

.yell-question-figure svg,
.yell-visual svg {
  display: block;
  width: 100%;
  max-width: calc(var(--yell-svg-width, 320) * 1.3px);
  height: auto;
  margin-inline: auto;
  overflow: visible;
  font-family: var(--md-text-font-family, sans-serif);
}

.yell-quiz__input-row {
  display: flex;
  align-items: center;
  gap: var(--yell-space-2);
}

.yell-quiz__unit {
  color: var(--yell-color-text-muted);
}

.yell-quiz__keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yell-space-1);
  margin-top: var(--yell-space-2);
}

.yell-quiz__key {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--yell-color-border);
  border-radius: var(--yell-radius-sm);
  background: var(--yell-color-surface);
  color: var(--yell-color-text);
  font: inherit;
  cursor: pointer;
}

/* 文字のキー（x・y など）は数式の文字と同じ斜体 */
.yell-quiz__key--letter {
  font-family: "Times New Roman", serif;
  font-style: italic;
  font-size: 1.1em;
}

.yell-quiz__key:focus-visible {
  outline: 3px solid var(--yell-color-primary);
  outline-offset: 2px;
}

.yell-quiz__preview {
  min-height: 1.5em;
  margin: var(--yell-space-1) 0 0;
  color: var(--yell-color-text-muted);
  font-size: var(--yell-font-size-sm);
}

/* 小問：ラベルの列は、いちばん長いラベルに合わせる（入力欄の左端をそろえる） */
.yell-quiz__parts {
  display: grid;
  grid-template-columns: minmax(2.5rem, max-content) minmax(0, 1fr);
  gap: var(--yell-space-3) var(--yell-space-2);
  align-items: start;
}

.yell-quiz__part {
  display: contents;
}

.yell-quiz__part-label {
  max-width: 12em;
  padding-top: 0.6rem;
  font-weight: var(--yell-font-weight-bold);
  line-height: 1.4;
}

@media (max-width: 36em) {
  .yell-quiz__part-label {
    max-width: 7em;
  }
}

.yell-quiz__legend {
  margin-bottom: var(--yell-space-1);
  font-size: var(--yell-font-size-sm);
}

fieldset.yell-quiz__choices {
  margin: 0;
  padding: 0;
  border: 0;
}

/* ── 自己採点（証明・作図・説明） ─────────────────────── */

.yell-self__prompt {
  margin: var(--yell-space-3) 0 var(--yell-space-2);
  font-weight: var(--yell-font-weight-bold);
}

.yell-self__textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 9rem;
  padding: var(--yell-space-2);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: var(--yell-radius-sm);
  background: var(--yell-color-surface);
  color: var(--yell-color-text);
  font: inherit;
  line-height: 1.7;
  resize: vertical;
}

.yell-self__paper {
  display: none;
}

.yell-self__lab {
  margin: var(--yell-space-2) 0;
}

.md-typeset .yell-self .yell-self__open {
  margin: var(--yell-space-3) 0 0;
  min-height: 44px;
}

.yell-self__answer {
  margin-top: var(--yell-space-4);
  padding-top: var(--yell-space-3);
  border-top: 2px solid var(--yell-color-border);
}

.md-typeset h4.yell-self__heading {
  margin: var(--yell-space-4) 0 var(--yell-space-2);
  color: var(--yell-color-secondary);
  font-size: var(--yell-font-size-md);
}

.md-typeset ol.yell-self__steps {
  margin: var(--yell-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.md-typeset .yell-self__step {
  margin: 0 0 var(--yell-space-2);
  padding: var(--yell-space-2) var(--yell-space-3);
  border-left: 3px solid var(--yell-color-border);
}

.md-typeset .yell-self__step[aria-current] {
  border-left-color: var(--yell-color-primary);
  background: var(--yell-color-primary-soft);
}

.yell-self__step-title {
  margin: 0;
  font-weight: var(--yell-font-weight-bold);
}

.yell-self__model {
  padding: var(--yell-space-3);
  background: var(--yell-color-surface-sunken);
  border-radius: var(--yell-radius-sm);
}

.yell-self__points,
.yell-self__evaluation {
  margin: var(--yell-space-4) 0 0;
  padding: 0;
  border: 0;
}

.yell-self__points legend,
.yell-self__evaluation legend {
  margin-bottom: var(--yell-space-2);
  color: var(--yell-color-secondary);
  font-weight: var(--yell-font-weight-bold);
}

.yell-self__point {
  display: flex;
  align-items: flex-start;
  gap: var(--yell-space-2);
  min-height: 44px;
  padding: var(--yell-space-1) 0;
}

.yell-self__point input {
  margin-top: 0.35rem;
}

.yell-self__evaluation {
  display: grid;
  gap: var(--yell-space-2);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.yell-self__evaluation legend {
  grid-column: 1 / -1;
}

.md-typeset .yell-self .yell-self__rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: var(--yell-space-2);
  text-transform: none;
}

.md-typeset .yell-self .yell-self__rate[aria-pressed="true"] {
  background: var(--yell-color-primary);
  color: var(--yell-color-on-primary);
}

.yell-self__mark {
  font-size: 1.3rem;
}

.yell-self__note {
  font-size: var(--yell-font-size-sm);
  font-weight: normal;
}

.yell-self__result {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--yell-feedback-correct);
}

/* ── Visual（解説の図） ───────────────────────────────── */

.yell-visual {
  max-width: 460px;
  margin: var(--yell-space-3) auto;
}

.yell-visual.is-stepped [data-step].is-hidden {
  display: none;
}

.yell-step-visual__controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--yell-space-2);
  margin-top: var(--yell-space-2);
}

.md-typeset .yell-step-visual__controls .md-button {
  margin: 0;
  min-height: 44px;
}

.yell-step-visual__controls .md-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.yell-step-visual__status {
  margin: 0;
  text-align: center;
  font-weight: var(--yell-font-weight-bold);
}

.yell-step-visual__title {
  display: block;
  font-size: var(--yell-font-size-sm);
  font-weight: normal;
}

/* スマホ：STEP の表示を1行使い、ボタンはその下に左右に並べる（真ん中が細くならないように） */
@media (max-width: 36em) {
  .yell-step-visual__controls {
    grid-template-columns: 1fr 1fr;
  }

  .yell-step-visual__status {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .md-typeset .yell-step-visual__controls .md-button {
    width: 100%;
  }
}

/* 印刷：問題・問題図・解答スペースだけ。解説は出さず、Step Visual は完成図にする */
@media print {
  .yell-self__answer,
  .yell-self__open,
  .yell-self__lab,
  .yell-quiz__keys,
  .yell-quiz__preview,
  .yell-step-visual__controls {
    display: none !important;
  }

  .yell-self__textarea {
    min-height: 14rem;
    border: 1px solid #000;
    resize: none;
  }

  .yell-self__textarea::placeholder {
    color: transparent;
  }

  .yell-self__paper {
    display: block;
    height: 14rem;
    border: 1px solid #000;
  }

  .yell-self__paper span {
    color: #555;
    font-size: 0.7rem;
  }

  .yell-visual.is-stepped [data-step].is-hidden {
    display: inline;
  }

  .yell-quiz__card {
    break-inside: avoid;
  }
}
.yell-science { margin: 1.4rem 0; }
.yell-science__controls { display: flex; flex-wrap: wrap; gap: 1rem; }
.yell-science__controls label { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 12rem; }
.yell-science__controls input, .yell-science__controls select {
  padding: .55rem; min-height: 44px; max-width: 100%; border: 1px solid var(--yell-color-border);
  background: var(--yell-color-surface); color: var(--yell-color-text); font: inherit;
}
.yell-science__controls :focus-visible { outline: 3px solid var(--yell-color-secondary); outline-offset: 3px; }
.yell-science__table { overflow-x: auto; }
/* 表は画面の幅で折り返す（狭い画面でも値の列が見える）。列が多い表だけ横スクロールになる */
.md-typeset .yell-science__table table { display: table; width: 100%; white-space: normal; }
.md-typeset .yell-science__table table:not([class]) th, .md-typeset .yell-science__table table:not([class]) td { white-space: normal; overflow-wrap: break-word; min-width: 0; }
.md-typeset .yell-science__table caption { text-align: start; caption-side: top; padding-bottom: .4rem; }
@media (max-width: 600px) {
  .md-typeset .yell-science__table table:not([class]) th, .md-typeset .yell-science__table table:not([class]) td { padding: .5em .45em; }
}
.yell-science__result { min-height: 3em; }
.yell-science__graph { width: 100%; height: 280px; background: #fff; color: #111; }
.yell-science.is-mounted > .yell-fallback-content { display: none; }
.yell-science.has-graph-fallback > .yell-fallback-content { display: block; }
@media print {
  .yell-science__interactive, .yell-science__graph { display: none !important; }
  .yell-science > .yell-fallback-content { display: block !important; }
}
@media (prefers-reduced-motion: reduce) {
  .yell-science *, .yell-science *::before, .yell-science *::after { animation: none !important; transition: none !important; }
}