/* =========================================================
   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; }
}