/* furigana.css — サイト全体の振り仮名（design.md §7）
   --------------------------------------------------------------------------
   読む相手は日本語の水準が高く、漢字の意味は見て分かる。
   分からないのは**音**のほうで、これは漢字圏の読み手に固有の詰まり方である。
   だから本文の漢字すべてにルビを振り、**既定で出す**。

   切りたい人のために各ページへ札を置く（.fg-toggle）。切った状態は
   localStorage に覚える ── 読む人の好みであって、その日の作業状態では
   ないため（拼音の帯と同じ扱い。note-cn.js）。

   ここが受け持つのは三つだけ。
     1. ルビの大きさと色    本文より一段落とす。主役は本文のまま
     2. ルビが乗る行の行間  ruby 自身に line-height を持たせる（後述）
     3. 切ったときの見え方  rt を消し、行間も一緒に戻す

   **ルビの行間は ruby 要素自身に持たせる。** 資料の篇は自前の CSS で
   行間を直書きしており（.slide の中は clamp() が並ぶ）、外から親に
   line-height を当てても届かない。ruby は行内の箱なので、そこに
   line-height を置けば、親が何を指定していても行箱がそのぶん伸びる。
   ========================================================================== */

ruby.fg{
  ruby-position:over;
  /* 読みが本文より長いぶんの余りを、語の外側へ寄せる。既定の
     space-around だと余りが語の内側に配られ、「十 四 枚」のように
     語そのものがばらける。語の形は崩さない */
  ruby-align:center;
  line-height:var(--lh-fg, 2.15);
}
ruby.fg > rt{
  /* 本文に対する比で決める。本文 15px では 10px、大見出し 32px では 13px。
     px で固定すると、見出しに乗ったとき豆粒になる */
  font-family:var(--lux-serif, 'Noto Serif JP','Yu Mincho',serif);
  font-size:max(9.5px, .40em);
  font-weight:300;
  line-height:1.25;
  /* 読みが本文より横に長いと、その語だけ字間が開いて見える。
     ルビの側を詰めて、開き方を小さくする */
  letter-spacing:-.01em;
  white-space:nowrap;
  color:var(--lux-text-muted, #6B6B6B);
  user-select:none; -webkit-user-select:none;
  /* ルビは読み上げの助けであって、写す対象ではない。
     本文だけを掴めるよう、選択からは外す */
}
/* 暗い頁（資料の中扉）。地が黒なので、灰色のままでは沈む */
.note-deck .slide.dark ruby.fg > rt{ color:rgba(255,255,255,.62); }

/* --- 切ったとき --------------------------------------------------------
   display:none で消し、行間も一緒に戻す。visibility:hidden で場所を
   残すと、切ったのに行間だけ広いままの、いちばん落ち着かない絵になる */
html.fg-off ruby.fg{ line-height:inherit; }
html.fg-off ruby.fg > rt{ display:none; }

/* --- 札 ----------------------------------------------------------------
   サイトの帯（.masthead）の右端、案内の隣に置く。頁の作りは章・ノート・
   確認テスト・索引でまちまちだが、帯だけはどの頁にもあり、位置も動かない。
   同じ物が同じ所にある ── 一頁ごとに探させない */
.fg-toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px;
  font-family:var(--lux-label, 'JetBrains Mono',ui-monospace,Menlo,monospace);
  font-size:9px; letter-spacing:.18em;
  color:var(--lux-text-muted, #6B6B6B); background:transparent;
  border:1px solid var(--lux-cta-border, #C9C9C9); border-radius:0;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  min-height:26px;
}
.fg-toggle:hover{ background:var(--lux-hover-surface, #FFEFE2); }
.fg-toggle:focus-visible{ outline:2px solid var(--lux-gold, #800020); outline-offset:2px; }
.fg-toggle__box{
  width:20px; height:11px; flex:0 0 auto;
  border:1px solid var(--lux-cta-border, #C9C9C9); background:transparent;
  position:relative;
}
.fg-toggle__box::after{
  content:""; position:absolute; top:1px; left:1px;
  width:7px; height:7px; background:var(--lux-text-muted, #6B6B6B);
  transition:transform .12s ease-out;
}
.fg-toggle[aria-pressed="true"]{
  color:var(--lux-gold-deep, #590016); border-color:var(--lux-gold, #800020);
}
.fg-toggle[aria-pressed="true"] .fg-toggle__box{ border-color:var(--lux-gold, #800020); }
.fg-toggle[aria-pressed="true"] .fg-toggle__box::after{
  background:var(--lux-gold, #800020); transform:translateX(9px);
}
@media (prefers-reduced-motion:reduce){
  .fg-toggle__box::after{ transition:none; }
}

/* details の見出しは gago.css で flex に組んである（札と件数を両端へ置くため）。
   ルビを入れると**語ごとに flex の項目が生まれ**、狭い画面で行が縦に潰れる。
   ルビの乗った見出しだけ、ふつうの行に戻す */
details > summary:has(ruby.fg){ display:block; }
details > summary{ flex-wrap:wrap; }   /* :has() を解さない環境の保険 */

/* 帯は両端揃え（justify-content:space-between）で、これまで題と案内の
   二つだった。三つ目が入ると案内が真ん中へ動いてしまうので、案内の側を
   右へ寄せ直す。札はその隣に並ぶ。
   入口の index.html は class を持たない帯なので、body の直下という形で拾う */
.masthead nav,
body > header > nav{ margin-left:auto; }

@media (max-width:1079px){
  ruby.fg{ line-height:var(--lh-fg, 2.05); }
  ruby.fg > rt{ font-size:max(9px, .40em); }
}

/* 紙に落とすときはルビを残す。読み上げの助けは紙の上でも要る */
@media print{
  .fg-toggle{ display:none; }
  html.fg-off ruby.fg > rt{ display:revert; }
}