/* 教材ページの見た目をそろえる共通の1枚。
   まとめて公開.mjs が各教材のページ（入口ページ以外）に差し込む。

   ツールが教材ごとに別の版で、同じ所を直すのに4か所まわる状態だったので、
   見た目の最後の調整だけをここに集めてある。
   各サイトの <style> より後ろに置かれるので、同じ強さなら こちらが勝つ。

   方針
     ・密度は変えない。行の高さと余白は元のまま
     ・足すのは「深さが分かる印」と「浮いていることが分かる影」だけ
     ・色は必ず主色（--acc）から作る。特定の色を直接書かない
*/

/* ===== ページ冒頭の「この章の内容」 =====
   字下げだけで階層を示していたので、第1階層に点、第2階層に案内線を足した。
   行の高さは変えていないので、1画面に入る項目数は今までと同じ。 */
.inpage{
  border-color:color-mix(in srgb, var(--line) 72%, transparent);
  padding:18px 24px;
}
/* 見出しは小さな札にして、箱の中身と役割を分ける */
.inpage h2{
  display:inline-block; margin:0 0 12px;
  font-size:11.5px; letter-spacing:.14em; font-weight:700;
  color:var(--acc); background:var(--accbg);
  border-radius:99px; padding:4px 12px;
}
.inpage li{position:relative; padding-left:15px}
.inpage li::before{
  content:""; position:absolute; left:3px; top:.85em;
  width:4px; height:4px; border-radius:50%;
  background:color-mix(in srgb, var(--acc) 55%, transparent);
}
/* 第2階層は点ではなく短い横線にする。
   同じ点を小さくしただけだと見分けがつかないが、形が変わると一目で下の層と分かる。 */
.inpage li.d3{padding-left:28px}
.inpage li.d3::before{
  left:14px; top:.95em; width:8px; height:1.5px; border-radius:1px;
  background:color-mix(in srgb, var(--tx2) 45%, transparent);
}
.inpage li a{padding:3px 0}
.inpage li a:hover{text-decoration:underline; text-underline-offset:3px}

/* ===== 章の題名 =====
   3px の線は本文に対して重かったので 2px に。位置と色はそのまま。 */
h1{border-bottom-width:2px; padding-bottom:14px}

/* 章番号の札から題名までの間隔。1教材だけ 34px で浅かったのでそろえる */
.chaphead{margin-top:44px}

/* ===== 右下の丸ボタン =====
   ・影が青の直書きだったので、教材の主色から作る
   ・文字色が1教材だけ白固定で、暗い配色のとき主色に沈んでいた
   ・本文の上に浮くものなので、少しだけ小さくし、触れるまでは控えめにする */
.fabs{right:18px; bottom:18px; gap:8px; opacity:.93; transition:opacity .14s}
.fabs:hover, .fabs:focus-within{opacity:1}
.tocfab{
  padding:12px 19px; font-size:14px;
  color:var(--onacc, var(--paper, #fff));
  box-shadow:0 4px 16px color-mix(in srgb, var(--acc) 34%, transparent),
             0 1px 3px rgba(0,0,0,.14);
}
.scfab{
  width:46px; height:46px; font-size:17px;
  box-shadow:0 4px 16px rgba(0,0,0,.10);
}

/* ===== 見出しの約物 =====
   「」『』（）が前後に空きを作って間延びするので、見出しだけ詰める。
   本文は読む速さに関わるので触らない。 */
h1, h2, h3, .chaphead{font-feature-settings:"palt" 1}

/* ===== 上の帯 =====
   1教材だけ帯が固定されず、スクロールすると「教材／問題演習／章送り」ごと
   画面から消えていた（html の scroll-padding-top:66px は固定帯を前提にしている）。
   ほかの3つと同じ扱いにそろえる。すでに固定されている教材では値が同じなので何も変わらない。 */
.sitebar{
  position:sticky; top:0; z-index:200;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}

/* 帯の中の並び順。
   1教材だけ〔章送り〕→〔進み具合〕の順で、ほかは逆だった。
   読みながら目が行く順（いまどこ → 次へ）にそろえる。
   並びは order で決め、右へ寄せるのはタブの右の余白ひとつに任せる。 */
.sbin > .mzup{order:0}
.sbin > .sb-brand{order:1}
.sbin > .sb-tabs{order:2; margin-right:auto}
.sbin > .sb-pct{order:3}
.sbin > .sb-nav{order:4; margin-left:0}
.sbin > .sb-th{order:5; margin-left:6px}
.sbin > .sync-b{order:5; margin-left:6px}

/* 狭い画面で絵文字1つになったときに押しやすい大きさを保つ。
   1教材だけこの指定が無かった。 */
@media(max-width:520px){
  .sb-brand{min-width:44px; min-height:44px; padding:6px}
}

/* 狭い画面では画面に対して丸ボタンが大きく、本文の行を広く覆ってしまう。
   押せる大きさ（44px 角）は保ったまま、ひとまわり小さくする。 */
@media(max-width:520px){
  .fabs{right:14px; bottom:14px; gap:7px}
  .tocfab{padding:11px 17px; font-size:13.5px}
  .scfab{width:44px; height:44px; font-size:16px}
}

/* ===== 全体地図へ戻る道 =====
   狭いときに帯が詰まるので丸ごと消していたが、これが唯一の戻り道だった
   （ページ末尾にも同じ行き先はあるが、章が長いので実際には辿り着けない）。
   消すのではなく、文字を畳んで印だけ残す。 */
@media (max-width:820px){
  .mzup{display:inline-flex; padding:5px 10px; gap:0}
  .mzup .mzut{display:none}
  .mzup .mzui svg{width:15px; height:15px}
}
@media (max-width:520px){
  /* 指で押せる大きさを保つ */
  .mzup{padding:6px; min-width:40px; min-height:40px; justify-content:center}
}

/* ===== 節と小見出し =====
   節は太い帯、小見出しは主色の文字、と表し方の種類が違っていた。
   主色は「印」として使い、文字は地の色に統一する。
   目次ボックスの点と同じ語彙にそろえてある。 */
h2{border-left-width:3px; border-radius:2px; padding-left:13px}
h3{color:var(--tx); padding-left:13px; position:relative}
h3::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--acc);
}

/* ===== 引用の箱を意味ごとに描き分ける =====
   原稿では 📘用語 ／ ⚡覚える ／ ⚠やってはいけない ／ 通過チェック と
   書き分けてあるのに、出来上がりはどれも同じ主色の箱で区別できなかった。
   束ねるときに付けた種別（yg-◯◯）で色を変える。
   注意と通過の色は、どの教材でも同じ意味を指すよう主色から独立させている。 */
:root{
  --yg-注意:#c2410c; --yg-注意地:#fff7ed;
  --yg-通過:#15803d; --yg-通過地:#f0fdf4;
}
html[data-theme="dark"]{
  --yg-注意:#fb923c; --yg-注意地:#2a1b10;
  --yg-通過:#4ade80; --yg-通過地:#0e2318;
}
blockquote{border-left-width:3px; border-radius:12px; padding:15px 20px}

/* 📘 用語。読みの助けであって覚える対象ではないので、いちばん静かに置く */
blockquote.yg-用語{
  background:var(--soft);
  border-left-color:color-mix(in srgb, var(--tx2) 38%, transparent);
}
/* ⚡ 覚える中身。主色で、本文の中でいちばん目に入る */
blockquote.yg-暗記{background:var(--accbg); border-left-color:var(--acc)}
/* ⚠ やってはいけない形 */
blockquote.yg-注意{background:var(--yg-注意地); border-left-color:var(--yg-注意)}
blockquote.yg-注意 > p:first-child strong{color:var(--yg-注意)}
/* 通過チェック。次へ進んでよいかを判定する節 */
blockquote.yg-通過{background:var(--yg-通過地); border-left-color:var(--yg-通過)}
blockquote.yg-通過 > p:first-child strong{color:var(--yg-通過)}

/* 狭い画面の帯。戻る印を足したぶん、ほかを詰めて一列に収める。
   それでも入らない幅では、進み具合のピルを畳む
   （％は帯の下辺を走る線でも分かる。章送りと戻り道のほうが要る）。 */
@media (max-width:520px){
  .sbin{gap:3px}
  .sb-tab{padding:7px 9px; font-size:12px}
  .sb-pct{padding:4px 8px; font-size:11px; margin-right:0}
  .mzup{min-width:38px; min-height:38px; padding:5px}
}
@media (max-width:430px){
  .sb-pct{display:none}
}

/* ===== 記録の同期（⇅）=====
   戻るボタンと同じ理由で幅820px以下では消えていた。
   こちらもページ末尾に同じものがあるが、帯にあるほうが状態（色が付く＝預けた印）
   にすぐ気づける。印だけなら入るので戻す。 */
@media (max-width:820px){
  .sync-b{display:inline-flex; align-items:center; justify-content:center}
}
/* いちばん狭いところ。丸ボタンと帯の要素をひとまわり落として一列に収める。
   押せる大きさの下限（32px）は割らない。 */
@media (max-width:430px){
  .sbin{padding:0 12px; gap:2px}
  .mzup{min-width:34px; min-height:34px; padding:4px}
  .mzup .mzui svg{width:14px; height:14px}
  .sb-brand{min-width:38px; min-height:38px; padding:5px}
  .sb-tab{padding:6px 8px; font-size:11.5px}
  .sb-ar, .sb-th{width:32px; height:32px}
}