/* 「時限措置」はなぜ時限で終わらないのか — この記事だけで使う図版の定義。
   共通シェル（タブ・ヒーロー・本文・節見出し・出典バッジ・サイドナビ・
   About・Contact・フッター・印刷・レスポンシブ）は /assets/report.css が持つ。
   このファイルは report.css より後に読むこと。

   色の使い分けは共通シェルの方針を引き継ぐ。紙面で色がつくのは2系統だけ。
     弁柄（--reason ＝ 共通の --quit）  導入の理由。実在したが、消えたもの
     藍  （--persist ＝ 共通の --g1）   存続の仕組み。理由が消えても残るもの
   この対応を図6点すべてで崩さない。読者はこの2色だけ覚えればよい。

   この2色は記事固有の意味づけなので :root には置かず、使う側に定義する。
   共通CSSのカスタムプロパティを記事側から書き換えると、他の記事に響くため。 */

figure.dia,
.takeaway {
  --reason: var(--quit);
  --reason-pale: var(--quit-pale);
  --reason-wash: #f6ede6;
  --persist: var(--g1);
  --persist-pale: var(--g1-mid);
  --persist-wash: var(--g1-wash);
}

/* -------------------------------------------------------------- 図版 */

figure.dia {
  margin: 34px 0 30px;
  padding: 24px 22px 18px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow-x: auto;
}

figure.dia > svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 460px;
}

figure.dia .fig-lab {
  font-family: var(--grotesk);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

figure.dia figcaption {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-body-2);
  max-width: 46em;
}

figure.dia figcaption b {
  color: var(--ink);
}

/* SVGのペイントはクラス経由にする。色の定義を1か所に閉じ込めるため。 */
.s-ink { stroke: var(--chrome); }
.s-rule { stroke: var(--rule-2); }
.s-mut { stroke: var(--muted); }
.s-rea { stroke: var(--reason); }
.s-per { stroke: var(--persist); }
.f-ink { fill: var(--ink); }
.f-rea { fill: var(--reason); }
.f-reap { fill: var(--reason-wash); }
.f-per { fill: var(--persist); }
.f-perp { fill: var(--persist-wash); }
.f-panel { fill: var(--panel); }
.f-none { fill: none; }

figure.dia text {
  font-family: var(--zen);
  fill: var(--ink-body);
}

figure.dia text.f-paper {
  fill: var(--paper);
}

figure.dia text.m {
  font-family: var(--grotesk);
  fill: var(--muted-2);
}

/* --------------------------------------------- 事実と解釈の境目の注 */

.qual {
  margin: 26px 0;
  padding: 15px 18px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-2);
  border-radius: 2px;
  background: var(--panel);
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-body-2);
}

.qual p {
  margin: 0;
}

.qual b {
  color: var(--ink);
}

/* ------------------------------------------------------- 持ち帰り表 */

.takeaway {
  margin: 34px 0 30px;
  border: 2px solid var(--chrome);
  border-radius: 3px;
  background: var(--panel);
  overflow: hidden;
}

.takeaway__head {
  padding: 15px 22px;
  border-bottom: 1px solid var(--chrome);
  background: var(--green-wash, #eeece7);
}

.takeaway__head span {
  display: block;
  font-family: var(--grotesk);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.takeaway__head strong {
  font-size: 16px;
  color: var(--ink);
}

/* --------------------------------------------------------- 出典一覧 */

#sources ol.refs {
  list-style: none;
  counter-reset: src;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#sources ol.refs li {
  counter-increment: src;
  position: relative;
  padding-left: 36px;
  font-size: 13.5px;
  line-height: 1.8;
}

#sources ol.refs li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--grotesk);
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 640px) {
  figure.dia {
    padding: 18px 14px 14px;
  }
}

.takeaway__body {
  padding: 24px 32px 28px;
  background: #fff;
}
.takeaway__body > :first-child { margin-top: 0; }
.takeaway__body > :last-child { margin-bottom: 0; }
.takeaway__body p {
  line-height: 2;
}

/* Older previews had the template paragraph directly below .takeaway.
   Keep that markup padded as well so cached HTML cannot render against the border. */
.takeaway > p {
  margin: 0;
  padding: 24px 32px 28px;
  background: #fff;
  line-height: 2;
}

@media (max-width: 640px) {
  .takeaway__body,
  .takeaway > p {
    padding: 20px 18px 22px;
  }
}