/*
  This file replaces peitho's embedded themes/base.css for this deck.
  Edit it as your deck's complete theme.

  ---------------------------------------------------------------------------
  デザインの方針: Azusa 3 (sanographix) の考え方を下敷きにした、日本語前提のライトテーマ。

  Azusa から取っているもの:
    - 白背景 + 黒に近い文字 + 差し色1色。装飾は足さない
    - 見出しは大きく太く、本文との比を明確につける
    - 日本語の可読性優先 (行間ゆったり、行頭行末の詰め込みをしない)
    - タイトルはベタ塗り1枚で切り替える

  今風に振っている(= Azusa から変えている)もの:
    - 書体は M PLUS 2 / M PLUS 1 Code の可変フォント (wght 軸) を同梱。
      Latin と 日本語が同じ設計の書体で揃うので、混植のガタつきが出ない
    - 見出しの letter-spacing をマイナスに詰め、ウェイトを 800 まで上げる
    - コードは「面」として持ち上げる (角丸カード + わずかな段差)
    - 差し色は Go の Gopher Blue 系。トーンを1段落として projector で沈まない濃度にする

  フォントは deck 隣接の ./fonts にあり、peitho が出力側の fonts/ にそのままコピーする (theme-fonts/ は組み込みテーマ用の別枠)。
  可変フォントなので 1 ファイルで全ウェイトを賄う (font-weight にレンジを書く)。
  ---------------------------------------------------------------------------
*/

@font-face {
  font-family: "M PLUS 2";
  src: url("fonts/MPLUS2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  /* PDF export / headless では swap だとフォールバックのまま焼き付くことがあるので block */
  font-display: block;
}

@font-face {
  font-family: "M PLUS 1 Code";
  src: url("fonts/MPLUS1Code.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}

.peitho-slide {
  /* --- palette ------------------------------------------------------- */
  --ink: #12181d;          /* 本文 */
  --ink-mute: #66727d;     /* 脚注・ページ番号・コメント */
  --ink-quote: #3b4750;    /* 引用本文 */
  --paper: #ffffff;
  --surface: #f2f5f7;      /* コードカードの面 */
  --rule: #dde3e8;

  --accent: #007d9c;       /* Go のダークブルー。文字に乗せても読める濃度 */
  --accent-bright: #00add8; /* Gopher Blue。面や罫に使う */
  --accent-wash: rgba(0, 173, 216, 0.22); /* 強調のマーカー */

  --peitho-emphasis-background: rgba(0, 173, 216, 0.16);
  --peitho-emphasis-marker: var(--accent-bright);
  --peitho-emphasis-dim: 0.4;

  width: var(--peitho-canvas-width, 1280px);
  height: var(--peitho-canvas-height, 720px);
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 56px 76px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "M PLUS 2", system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", sans-serif;
  /* 日本語の行頭行末を機械的に詰めない。Azusa が調整していた部分 */
  font-feature-settings: "palt" 0;
  text-spacing-trim: normal;
}

.peitho-slide:where([data-peitho-page-number]) {
  position: relative;
}

.peitho-slide[data-peitho-page-number]::after {
  content: attr(data-peitho-page-number);
  position: absolute;
  right: 30px;
  bottom: 22px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

.peitho-slide[data-peitho-page-total]::after {
  content: attr(data-peitho-page-number) " / " attr(data-peitho-page-total);
}

.peitho-slide h1 {
  margin: 0;
  font-size: 56px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  /*
   * 見出しが2行になったとき、2行目に1〜2文字だけ落ちるのを防ぐ。
   * 折り返し位置を均等に配るので「…解消され / た」のような泣き別れが出ない。
   * auto-phrase は日本語を文節で折る (「…通るが / メソッドだと…」)。
   * どちらも1行に収まる見出しには影響しない。
   */
  text-wrap: balance;
  word-break: auto-phrase;
}

.slot-title {
  display: inline-block;
}

/*
 * セクションの先頭スライドにだけ、見出しの上へ短いアクセントバーを置く。
 * front matter の section は HTML に出てこないので、data-slide-key で名指しする。
 * セクションを増減したらこのリストも直すこと。
 */
.peitho-slide[data-slide-key="recap"]::before,
.peitho-slide[data-slide-key="how-to-write"]::before,
.peitho-slide[data-slide-key="must-problem"]::before,
.peitho-slide[data-slide-key="cant-interface"]::before,
.peitho-slide[data-slide-key="stdlib"]::before {
  content: "";
  display: block;
  width: 72px;
  height: 7px;
  margin-bottom: -8px;
  border-radius: 4px;
  background: var(--accent-bright);
}

.body {
  min-width: 0;
  overflow: hidden;
}

.slot-body {
  font-size: 32px;
  line-height: 1.45;
  font-weight: 450;
}

.slot-body p {
  margin: 0 0 22px;
}

.slot-body p:last-child {
  margin-bottom: 0;
}

.slot-body ul {
  margin: 0;
  padding-left: 32px;
}

.slot-body li {
  margin-bottom: 8px;
}

/* 箇条書きのあとに地の文が続く回 (why-yes など) で、行が詰まって見えるのを防ぐ */
.slot-body ul + p {
  margin-top: 20px;
}

.slot-body li::marker {
  color: var(--accent-bright);
}

/*
 * 強調は太らせるだけだと日本語では効きが弱いので、Azusa 的にマーカーを敷く。
 * 背景なので行の高さを変えず、lint の overflow に影響しない。
 */
.slot-body strong {
  font-weight: 700;
  background: linear-gradient(transparent 58%, var(--accent-wash) 58%);
}

.slot-body code {
  font-family: "M PLUS 1 Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /*
   * 地の文と同じ実寸にする。M PLUS 1 Code は M PLUS 2 と設計が揃っていて
   * x-height も近いので、1em でも「コードだけ大きい」ようには見えない。
   * 0.92em に落とすと 22.1pt になり lint の下限 (24pt) を割るのが実害。
   */
  font-size: 1em;
  color: var(--accent);
}

/*
 * ただし stream スライドだけは例外。
 * 本文が `iter.Seq[E]` = `func(yield func(E) bool)` … の1行で、
 * 1em にすると 1128px をわずかに超えて2行に折れ、その46pxぶん
 * 下のコードブロック(9行)が枠からあふれる。
 * ここだけ 0.92em に戻す = このスライドの 22.1pt 警告1件は残す、という判断。
 * 本文を全角2文字ほど詰められるなら、この例外は消せる。
 */
.peitho-slide[data-slide-key="stream"] .slot-body code {
  font-size: 0.92em;
}

.footnotes {
  min-width: 0;
  margin-top: auto;
  overflow: hidden;
  font-size: 30px;
  line-height: 1.4;
}

.footnotes:empty {
  display: none;
}

.peitho-footnotes {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 0.62em;
  line-height: 1.4;
  color: var(--ink-mute);
}

.peitho-footnotes ol {
  margin: 0;
  padding-left: 1.45em;
}

.peitho-footnotes li {
  padding-left: 0.25em;
}

.peitho-footnotes p {
  margin: 0 0 10px;
}

.peitho-footnote-ref {
  font-size: 0.62em;
  line-height: 0;
  vertical-align: super;
}

/*
 * コードは地の文と同じ平面に置かず、一段持ち上げた面として扱う。
 * padding の上下は 12px まで。コード9行のスライド (slide 8) が限界で、
 * ここを 20px にすると lint の overflow に触れる。
 */
.code {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  padding: 12px 24px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.code:not(:has(.slot-code)) {
  display: none;
}

.slot-code {
  display: block;
  margin: 0;
  font-family: "M PLUS 1 Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 450;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.slot-code .hl-comment {
  color: #7c8b99;
}

.slot-code .hl-string {
  color: #0f7b5f;
}

.slot-code .hl-keyword,
.slot-code .hl-storage {
  color: #7c3aed;
}

.slot-code .hl-constant {
  color: #b45309;
}

.slot-code .hl-function {
  color: #1d4ed8;
}

/*
 * syntect は `type X ...` の宣言を meta.type のスパンで丸ごと包む。
 * `.hl-type` だけで指定すると、その宣言全体 (`[E any] iter.Seq[E]` の部分まで) が
 * 型名の色になり、コードブロック1行目が浮いて見える。meta は色を付けない。
 * なお Go の syntax では func / type / interface と string / int / error が
 * どちらも storage.type なので、そこは分離できない (まとめてこの色)。
 */
.slot-code .hl-type:not(.hl-meta) {
  color: #0e7490;
}

/*
 * Static code line emphasis — "these lines are the important ones".
 *
 * A separate layer from syntax highlighting above: `hl-*` colors code by what
 * it is, emphasis points at what the speaker is discussing.
 *
 * Only the *static* form lives here, because it is baked into the build output
 * and must render with no shell present (PDF, preview, dist/). Stepped
 * emphasis is styled by the present shell itself, so that it keeps working for
 * decks that ship their own CSS and thus never load this file.
 */
.slot-code .code-line {
  display: inline-block;
  width: 100%;
}

.slot-code .code-line-emphasis {
  background: var(--peitho-emphasis-background, rgba(0, 173, 216, 0.16));
  box-shadow: inset 3px 0 0 var(--peitho-emphasis-marker, #00add8);
}

/*
 * Dim the surrounding lines, scoped by `:has()` so a block with no emphasis
 * never renders faded.
 */
.slot-code:has(.code-line-emphasis) .code-line:not(.code-line-emphasis) {
  opacity: var(--peitho-emphasis-dim, 0.4);
}

/*
 * Quote slot — peitho の Markdown は blockquote (`>`) を受け付けないので、
 * レイアウト側に `quote` スロットを置き、`::: {slot=quote}` で明示的に流す。
 * 引用そのもの(FAQ・proposal の原文)を地の文と視覚的に分けるためのもの。
 */
.quote {
  min-width: 0;
  margin: 0;
  padding: 2px 0 2px 26px;
  border-left: 5px solid var(--accent-bright);
  overflow: hidden;
}

/* スロットが空のスライドでは枠線ごと消す (空白ノードが残るので :empty では効かない) */
.quote:not(:has(.slot-quote)),
.diagram:not(:has(.slot-diagram)) {
  display: none;
}

.slot-quote {
  font-size: 30px;
  line-height: 1.5;
  color: var(--ink-quote);
}

.slot-quote p {
  margin: 0 0 12px;
}

.slot-quote p:last-child {
  margin-bottom: 0;
}

.slot-quote strong {
  font-weight: 700;
  color: var(--ink);
}

/* 出典行。引用の最後に「— 誰々」を置く用 */
.slot-quote p:last-child:not(:only-child) {
  font-size: 0.72em;
  color: var(--ink-mute);
}

/*
 * Diagram slot — mermaid はビルド時に SVG 化され、通常の画像として
 * accepts="image" のスロットに流れる。図を出すスライドだけで使う。
 */
.diagram {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.diagram img {
  max-width: 100%;
  max-height: 380px;
  height: auto;
}

/*
 * 自己紹介スライドだけ、アイコンを本文の右に置く。
 * レイアウトは縦一列 (title / quote / body / diagram / code / footnotes) なので、
 * diagram スロットだけ絶対配置で流れから抜き、その幅ぶん body に右余白を作る。
 * スライドは page-number 属性を持つと position: relative になるので、
 * 基準はスライド自身。top は h1 (56px * 1.12) + padding + gap の実測合わせ。
 */
.peitho-slide[data-slide-key="self-intro"] .diagram {
  position: absolute;
  right: 76px;
  /* 見出しの下の帯 (padding 56 + h1 63 + gap 26 〜 padding 56) の中央に置く。
     スライド中央から、見出しぶんの半分 (45px) だけ下にずらすと一致する */
  top: 50%;
  transform: translateY(-50%);
  margin-top: 45px;
  width: 300px;
  display: block;
}

.peitho-slide[data-slide-key="self-intro"] .diagram img {
  width: 100%;
  max-height: none;
  box-sizing: border-box;
  border: 1px solid var(--rule);
  border-radius: 30px;
}

/*
 * 本文の最終行 (kamakura.go の告知) と、脚注に置いた connpass の URL を
 * ※ で結ぶ。両方を差し色にして、離れていても対応が見えるようにする。
 * 本文側は CSS で足しているので、**箇条書きの並びを変えたらこのセレクタも直すこと**
 * (最終行に付く前提)。脚注側は Markdown に書いた ※ を先頭文字として着色している。
 */
.peitho-slide[data-slide-key="self-intro"] .slot-body li:last-child::after {
  content: "※";
  margin-left: 0.35em;
  color: var(--accent);
  font-weight: 700;
}

.peitho-slide[data-slide-key="self-intro"] .slot-footnotes p::first-letter {
  color: var(--accent);
  font-weight: 700;
}

/* 本文は4行しかないので、見出しの下の帯いっぱいに広げて縦中央に置く */
.peitho-slide[data-slide-key="self-intro"] .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 340px;
}

/*
 * footnotes スロットに直接流した本文 (`::: {slot=footnotes}`) の見た目。
 * 出典・自作プロジェクトの URL を、スライド下端に控えめに置くためのもの。
 * 通常の Markdown 脚注 (.peitho-footnotes) とは別扱い。
 */
.slot-footnotes {
  font-size: 24px;
  color: var(--ink-mute);
}

.slot-footnotes p {
  margin: 0;
}

.slot-footnotes code {
  font-family: "M PLUS 1 Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.94em;
}

/*
 * 表紙だけベタ塗り。Azusa のタイトルスライドに相当する扱いで、
 * ここだけ地の色を反転させて「始まった」ことを分からせる。
 */
.peitho-slide[data-slide-key="cover"] {
  --ink: #ffffff;
  --ink-mute: rgba(255, 255, 255, 0.72);
  justify-content: center;
  gap: 34px;
  background: linear-gradient(135deg, #05303f 0%, #007d9c 62%, #00add8 100%);
}

.peitho-slide[data-slide-key="cover"] h1 {
  font-size: 68px;
  line-height: 1.14;
  max-width: 20em;
}

.peitho-slide[data-slide-key="cover"] .body {
  overflow: visible;
}

.peitho-slide[data-slide-key="cover"] .slot-body {
  /* 名乗りの行。30px だと 22.5pt で lint の下限を割るので 32px */
  font-size: 32px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}

/* 表紙の1段落目は副題扱い。見出しの続きとして読ませ、2段落目 (名乗り) と差をつける */
.peitho-slide[data-slide-key="cover"] .slot-body p:first-child {
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 30px;
}

/* 表紙のページ番号は出さない */
.peitho-slide[data-slide-key="cover"]::after {
  content: none;
}