/* =========================================================
   CoreFlow 見た目の基準（全アプリ共通）
   ---------------------------------------------------------
   ボタンの大きさ・角の丸み・すき間・アイコンの大きさを、
   ここ1か所の数字で決める。各アプリの CSS は var(--ui-…) を使う。
   ⚠ このファイルは <style> より先に読み込むこと。
      （各アプリ側で上書きしたい時に上書きできるようにするため）
   ⚠ 直す時は _shared/ の中を直して、sync-shared.ps1 で全アプリに配ること。
      アプリの js/ css/ に入っているのは配られたコピー。直接直すと次の配布で消える。
   ========================================================= */
:root{
  /* --- ボタン --- */
  --ui-btn-h: 30px;        /* 文字つきボタンの高さのめやす */
  --ui-btn-px: 11px;       /* 文字つきボタンの左右の余白 */
  --ui-btn-py: 5px;        /* 文字つきボタンの上下の余白 */
  --ui-btn-fs: 12.5px;     /* 文字つきボタンの文字の大きさ */
  --ui-ib: 32px;           /* アイコンだけのボタン（正方形） */
  --ui-ib-sm: 26px;        /* 小さいアイコンボタン（一覧の中など） */
  --ui-tool: 36px;         /* 道具箱のボタン */

  /* --- アイコン --- */
  --ui-ic: 18px;           /* ふつう */
  --ui-ic-sm: 15px;        /* 小さい（一覧の中・チップの中） */
  --ui-ic-lg: 20px;        /* 大きい（道具箱） */

  /* --- 角の丸み --- */
  --ui-r-sm: 6px;
  --ui-r: 8px;
  --ui-r-lg: 12px;

  /* --- すき間 --- */
  --ui-gap: 6px;           /* アイコンと文字のあいだ */
  --ui-gap-btn: 6px;       /* ボタンとボタンのあいだ */

  /* --- 帯の高さ --- */
  --ui-topbar: 48px;       /* 一番上の帯 */
  --ui-subbar: 48px;       /* 2段目の帯（ノート名の行など）。道具箱がぴったり収まる高さ */
}

/* アイコンの土台。IC() が返す <svg class="ic"> に効く。
   ⚠ display は inline のまま。flex の箱の中では自動で block 扱いになるので、
     文字と並べても、道具箱のように並べても、どちらでも崩れない。 */
.ic{ flex:none; pointer-events:none; vertical-align:-.18em; }

/* アイコン＋文字のボタン（使いたいアプリだけ使う） */
.ui-btn{
  display:inline-flex; align-items:center; gap:var(--ui-gap);
  padding:var(--ui-btn-py) var(--ui-btn-px);
  font-size:var(--ui-btn-fs); border-radius:var(--ui-r);
  line-height:1.4; white-space:nowrap; cursor:pointer;
}
.ui-ib{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--ui-ib); height:var(--ui-ib);
  border-radius:var(--ui-r); cursor:pointer; padding:0;
}

/* 指で押す端末では、押せる範囲を広げる（見た目は変えない） */
@media (pointer:coarse){
  :root{ --ui-btn-py: 7px; --ui-ib: 36px; --ui-tool: 40px; }
}

/* =========================================================
   スクロールの棒（全アプリ共通・細くて控えめ）
   ---------------------------------------------------------
   ブラウザ既定の太いグレーの棒は、どのアプリでも浮いて見えるので、
   ここで一度だけ形を決めて全アプリにそろえる。
   マウスを乗せた時だけ、そのアプリの色（--acc）になる。
   ⚠ --acc を決めていないアプリでもグレーで出るので、そのまま使える。
   ========================================================= */
:root{
  --ui-sb: 10px;                              /* 棒の太さ */
  --ui-sb-thumb: rgba(148,163,184,.35);       /* ふだんの色 */
}
*{ scrollbar-width: thin; scrollbar-color: var(--ui-sb-thumb) transparent; }
::-webkit-scrollbar{ width: var(--ui-sb); height: var(--ui-sb); }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-corner{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: var(--ui-sb-thumb);
  border-radius: 8px;
  border: 2px solid transparent;   /* 棒を細く見せるための余白 */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--acc, #94a3b8) 55%, transparent);
  background-clip: padding-box;
}

/* 数字の印（1課・2課・順番など。絵文字の 1️⃣2️⃣ の代わり）
   ⚠ 色は書かない＝文字色をそのまま継ぐ（線画アイコンと同じ考え方）。 */
.ic-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border:1.6px solid currentColor; border-radius:5px;
  font-size:11px; font-weight:700; line-height:1; flex:none; vertical-align:-.18em;
}