/* ============================================================================
   /panel.css = hub 全パネルの【大枠の箱】。ここ1枚が箱の正本。 (2026-08-23 v22)
   2026-08-22 Makoto「雛形の意味わかってない。プログラム書く時の大枠の箱を一緒にして
   中に入れるものだけ入れ替えるように修正しろ」で新設。

   ■ 分け方 (これが雛形の定義)
       箱  = このファイル。下バー・段・ボタン・本文の下余白・表の行の刻み・
             文字と地の色。全パネルで【1バイトも違わない】。
       中身 = 各 index.html の <style> と本文。パネルごとに違ってよいのは中身だけ。
   ■ leaf が箱をいじる唯一の口 = 下の【つまみ (トークン)】を上書きする1行。
       例:  :root{ --pnl-gap:var(--fbh,0px) }  (帯の上にフィルタ帯を載せている時)
             ★数字で隙間を空けるのは禁止 = check_hub_bar.py F22 で公開が止まる
       箱の中身 (.hub-bar / .hb-row / #hub-back / #hub-reload / .hub-action の見た目、
       body の padding-bottom) を leaf の CSS に書き写すな = 公開が止まる
       (check_hub_bar.py F17)。
   ■ 誰が読み込むか
       各 index.html の <!--SHELL:HEAD--> ブロック (panel_shell.py が入れる)。
       書き忘れても hubbar.js が読み込む = どのパネルでも必ず効く。
   ============================================================================ */

:root{
  /* ---- つまみ (leaf が上書きしてよい唯一の物) ---- */
  --pnl-gap:0px;           /* 本文の最後と下バーの間 = 0 (2026-08-23 v26)
                              Makoto「タイ語の操作パネルと入力パネルと2段目との間に隙間開けるのやめろ」。
                              16px 空けていたので 入力の一式・表の最後のカードと帯の一番上の段の間に
                              黒い帯が1本見えていた。段と段の間 (操作↔2段目↔最下段) は 0 なので、
                              本文と帯の間だけ 16px 空くのが不揃いだった = 0 に揃える。
                              余白が要る中身は【中身の側】が自分の padding で持つ (箱は空けない)。 */
  /* ---- 箱の寸法 (leaf は書き換えるな) ---- */
  --hb-row:36px;           /* タブ・操作の段の高さ (2026-08-23 v24: 44→36) */
  --hb-btn:36px;           /* 最下段の押せる物 (2026-08-23 v24: 44→36) */
  --hb-btn-sub:36px;       /* 上の段の押せる物 */

  /* ===== 色 = 箱の持ち物 (2026-08-24 v42) ================================
     Makoto「なんでサプリと母で色が違うの」。
     これまで箱は【色を1バイトも書かない】決まりだった。理由はただ1つ、
     サプリだけが明るい地 (#f5f5f0 ＋ 端末の設定で緑がかった暗い地) を自前で持っていて、
     箱が白い字を配ると読めなくなるからだった = 例外1枚のために全パネルが色を自前で持つ形。
     ∴ サプリを他の26枚と同じ地に揃え、色も箱が持つ物にした。
     leaf が書いてよいのは【差し色 (--pnl-accent)】だけ。地・罫線・字・表の色は箱。 */
  --pnl-bg:#14161c;        /* 地 (27枚中11枚が既にこの値・母もこれ) */
  --pnl-card:#1d212b;      /* 箱・表の地 */
  --pnl-head:#232836;      /* 表の見出し行の地 */
  --pnl-field:#10131a;     /* 入力欄の地 */
  --pnl-line:#2c3140;      /* 罫線・枠 */
  --pnl-grid:#39405260;    /* 表の中の細い縦罫 */
  --pnl-ink:#e8e6df;       /* 本文の字 */
  --pnl-key:#e3e6ea;       /* 見出し・添えの字 (薄いグレーは禁止=2026-08-04) */
  --pnl-accent:#6366f1;    /* 差し色。leaf が上書きしてよい唯一の色 */
}
/* 詳細度0で置く = leaf が自分の色を書いていればそちらが勝つ。
   leaf の色の指定を消すと、消えた分だけこの値に落ちる (寸法と同じ手口)。 */
:where(html){background:var(--pnl-bg)}
:where(body){background:var(--pnl-bg);color:var(--pnl-ink)}


/* ===== 2026-08-24 v37 【箱の寸法は "数えて" 決める。中身は1バイトも測らない】=========
   Makoto「雛形の作り方を中身が何でも動かないようにしろ」

   ■ v36 までの作り方の何が悪かったか
     箱は「形」を持っていたが、【寸法を決める手順】が
        ① 中身を並べる → ② hubbar.js が出来上がった帯を測る (getBoundingClientRect)
        → ③ 測った値を --hubh / --hubpad として配る
     だった。②が【中身を見る】∴ 中身が変われば寸法が変わりうる = 原理的に「中身が何でも
     動かない」を約束できない。実害の出方も 中身ではなく【手順】の側に出ていた:
       ・段組みは JS が .hb-stack を付けて初めて効く ∴ 最初の1枚目の描画は
         【素の横並びの帯】= /thai/ 実測 169px → JS が走ると 161px へ縮む
         (2026-08-24 の公開時試験の NG そのもの。中身は1文字も変えていないのに動く)
       ・測って配るのは「静かになってから」しかできない ∴ 開いた直後・スクロール直後は
         古い値のまま = パネルによって・見ている長さによって帯の厚みが違って見えた

   ■ v37 の決まり = 寸法は【数えられる物】だけで決まる
        帯の丈   --hb-h   = 上の段の数 × 36px + 最下段 + 境目1px
        最下段   --hb-mainh = 36px + 上8px + 下 --hb-pb
        下の余白 --hb-pb  = 端末の下の余白 (iPhone 34px) + 8px  … 詰めた時は 8px
        本文の下 --hb-pad = 上の式の --hb-pb を【いちばん厚い時の値】で固定した物
                            = アドレスバーが伸縮しても本文の総高が動かない
     入力は3つだけ: (1) 段がいくつ在るか (2) 端末の下の余白 (3) 詰めた状態か。
     【中身の高さ・字数・画像・折返しは どれも入力に入っていない】= 中身では動かない。

   ■ 段の数え方 = 中身ではなく【構造】を数える
     段は data-hb="sub" / "sub2" / "ops" の3つしか名前が無い ∴ CSS が :has() で
     そのまま数えられる (下の --hb-r1..r3)。JS を待たない = 最初の1枚目の描画から
     もう最終形の丈で出る。hubbar.js は実際に描かれた段を数え直して --hb-rows を
     上書きするだけ (leaf が CSS で段を1つ隠している等の食い違いの後始末)。
     ★数えるのは段の【数】= 中身は見ない。
   ■ 段組み (縦積み・順番・36px) も data-hb を書いた時点で効く (.hb-stack を待たない)。
   ■ leaf は --hb-* を書くな (check_hub_bar.py F29 で公開が止まる)。 */
:root{
  --hb-pb:calc(max(env(safe-area-inset-bottom),8px) + 8px);  /* 帯の下の内余白 (生きた値) */
  --hb-pb-max:42px;                                          /* 同 いちばん厚い時 (34+8) */
  --hb-r1:0; --hb-r2:0; --hb-r3:0;
  --hb-rows:calc(var(--hb-r1) + var(--hb-r2) + var(--hb-r3));   /* 上の段の数 */
  --hb-mainh:calc(var(--hb-row) + 8px + var(--hb-pb));          /* 最下段の丈 */
  --hb-h:calc(var(--hb-row) * var(--hb-rows) + var(--hb-mainh) + 1px);      /* 帯ぜんぶの丈 */
  --hb-pad:calc(var(--hb-row) * var(--hb-rows) + var(--hb-row) + 8px
                + var(--hb-pb-max) + 1px);                     /* 本文の下余白 (一定) */
}
/* 詰めた時 (ホーム画面のappで見える高さが縮んだまま) = 下の余白だけ 8px に落とす。
   1行で 帯・最下段・本文の下余白が同時に詰まる = 詰め忘れる場所が作れない */
html.hb-short{ --hb-pb:8px; --hb-pb-max:8px; }
/* 段の数 = 構造から数える (JS を待たない)。中身が空の段は数えない */
html:has(.hub-bar>[data-hb="sub"]:not(.hb-empty):not([hidden])){ --hb-r1:1 }
html:has(.hub-bar>[data-hb="sub2"]:not(.hb-empty):not([hidden])){ --hb-r2:1 }
html:has(.hub-bar>[data-hb="ops"]:not(.hb-empty):not([hidden])){ --hb-r3:1 }
/* 帯の丈は式で【固定】= 中に何を入れても 1px も伸びない (はみ出す物は段が切る) */
.hub-bar{ box-sizing:border-box!important;
  height:var(--hb-h)!important; min-height:var(--hb-h)!important; max-height:var(--hb-h)!important; }

/* 本文の下余白 = 全パネル共通の1つの式。leaf 側で padding-bottom を書くな。
   --hubpad (帯の一番厚い時の高さ) は hubbar.js が配る = safe-area の伸縮で動かない */
body{ padding-bottom:calc(var(--hb-pad) + var(--pnl-gap))!important; }

/* ===== 2026-08-24 v53 【本文の上の余白も箱の持ち物】=================================
   Makoto「全パネル上部のタイトルの上に適切なスペースを入れろ、これも雛形化しろ」

   ■ 何が起きていたか
     下の余白 (--hb-pad) は 2026-08-19 から箱の1つの式だったが、【上】は箱が
     1バイトも持っていなかった ∴ 28枚がそれぞれ自前で書いていて、実測で 8通りに割れていた:
        0px / 10 / 12 / 14 / 16 / 18 / 20 / 24 …
     しかも全パネルは viewport-fit=cover ＋ status-bar-style=black-translucent
     (SHELL:HEAD が配る) = ホーム画面のappで開くと【本文が時計・電波の帯の下に潜る】。
     上の逃げ (env(safe-area-inset-top)) を書いていたのは 28枚中18枚だけで、その18枚も
        max(env(...),20px)  calc(14px + env(...))  env(...) 単体  calc(clamp(18px,4vw,40px)+env(...))
     と式が4通り。とくに max(env,20px) は 逃げ(62px) が余白(20px)を飲み込むので
     【題が時計にぴったり貼り付く】= 空きゼロ。これが「上にスペースが無い」の中身。
   ■ v53 の決まり = 上の余白は下と同じく【箱の1つの式】
        --pnl-safe-top … 端末が要求する上の逃げ (Safariのタブでは 0・ホームappでは 47〜62px)
        --pnl-top-gap  … その【下】に必ず空ける一定の隙間 (16px)
        --pnl-top      … 上2つの和 = body の padding-top
     ∴ どの端末・どのパネルでも「時計の下に必ず16px空いてから題が出る」。
   ■ leaf は上の余白を書くな (check_hub_bar.py F37 で公開が止まる)
     ・body / .wrap / .container / .page / main の padding-top・margin-top
     ・env(safe-area-inset-top) を直接書くこと (要るなら var(--pnl-safe-top) を読め)
     panel_shell.py が公開のたびに剥がす = 生成器が作り直しても戻らない。
   ■ 例外 = 画面の上端まで届く【貼り付く帯】を持つパネル (依頼パネルの見出しの帯)
     その帯に data-pnl="top" と書く。本文の上余白は 0 になり、代わりに箱が
     【帯の内側】に同じ --pnl-top を入れる = 帯は上端まで届き、中の題は同じ位置に出る。 */
:root{
  --pnl-safe-top:env(safe-area-inset-top,0px);
  --pnl-top-gap:16px;
  --pnl-top:calc(var(--pnl-safe-top) + var(--pnl-top-gap));
}
:where(body){ box-sizing:border-box }
body{ padding-top:var(--pnl-top)!important; }
/* 中身の一番上の物が自分の上マージンを足さない = 28枚とも同じ隙間で始まる */
body>:first-child:not(.hub-bar),
body>:first-child:not(.hub-bar)>:first-child{ margin-top:0!important }
/* 上端に貼り付く帯を持つパネルだけ、余白を本文から帯の中へ移す */
body:has([data-pnl="top"]){ padding-top:0!important }
[data-pnl="top"]{ padding-top:var(--pnl-top)!important }

/* ★2026-08-24 【帯を持つページは どのタブでも必ず1pxだけスクロールできる】= 箱の持ち物。
   Makoto「サプリパネルの帯位置が安定しない」の中身。
   iPhone は【そのページをスクロールできる量】でアドレスバーを伸ばすか縮めるかを決める。
   中身の短いタブ (サプリの 就寝/飲酒/筋トレ = 390x844 実測 scrollHeight 844 = innerHeight 844
   でスクロール量 0) へ移った瞬間にアドレスバーが伸び直し、見える高さが縮む
   → 底に貼り付いている帯と足元一式が丸ごと上下する。長いタブへ戻すとまた動く。
   PC では再現しない (アドレスバーが伸縮しない) ので測っても出ない。
   ∴ 丈を【バーが縮んだ時の高さ (100lvh) より必ず1px高い】に固定する
     = どのタブでも必ずスクロールできる = アドレスバーの状態がタブで変わらない。
   2026-08-14 に /req/ だけで直した物 (Makoto「下のタブの選択によって高さが変わるぞ、
   何回も言わせるな 似たようなこと何回もやってるだろ」) を、同じ病気が場所を変えて出たので
   【箱】へ上げた = 以後どのパネルでも leaf 側の手当ては要らない。
   ★100svh / 100dvh / 100vh を単独で書くな (= +1px を外すな) = 書いた瞬間に再発する。
   ★html に高さ・min-height を書いてよいのは箱だけ (leaf が書くと check_hub_bar.py F28 で
     公開が止まる)。
   印 hb-bar-on は hubbar.js が【帯の在るページ】にだけ付ける
   (ppt のデッキ等 帯を持たない全画面ページに 1px のスクロールを足さないため)。 */
html.hb-bar-on{ min-height:calc(100svh + 1px)!important; }
@supports (height:100lvh){ html.hb-bar-on{ min-height:calc(100lvh + 1px)!important; } }

/* ===== 下バーの見た目 (旧 hubbar.js BASE) ================================= */
.hub-bar{position:fixed;bottom:0;left:0;right:0;z-index:99999;background:rgba(15,17,23,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.08);padding:8px 12px var(--hb-pb);display:flex;align-items:center;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.hub-bar::-webkit-scrollbar{display:none}
.hub-bar #hub-back{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:#000;color:#fff;font-size:24px;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-0.5px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid rgba(255,255,255,0.12);-webkit-tap-highlight-color:transparent;transition:transform 0.12s}
.hub-bar #hub-back:active{transform:scale(0.92)}
.hub-bar #hub-reload{flex-shrink:0;background:#6366f1;color:#fff;border:none;height:36px;min-width:36px;padding:0 14px;font-size:20px;font-weight:700;border-radius:10px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 0.12s;white-space:nowrap}
.hub-bar #hub-reload:active{transform:scale(0.94)}
.hub-bar .hub-action{flex-shrink:0;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform 0.12s;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:600;padding:0 14px;background:rgba(255,255,255,0.08);color:#e8eaed;border:1px solid rgba(255,255,255,0.1);white-space:nowrap}
.hub-bar .hub-action:active{transform:scale(0.94)}
.hub-bar .hub-action.active{background:#2d3344;border-color:rgba(255,255,255,0.18);color:#fff;box-shadow:inset 0 -3px 0 #6366f1}
.hub-bar .hub-action:disabled{opacity:0.35;cursor:default}
.hub-bar .hub-action:disabled:active{transform:none}
/* ↻ の別名 (株=#pf-refresh-btn / Mini=#mini-refresh-btn / 印だけの物) も同じ形 */
.hub-bar #pf-refresh-btn,.hub-bar #mini-refresh-btn,.hub-bar [data-hubbar-reload]{flex-shrink:0;background:#6366f1;color:#fff;border:none;height:36px;min-width:36px;padding:0 14px;font-size:20px;font-weight:700;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 0.12s;white-space:nowrap}
.hub-bar #pf-refresh-btn:active,.hub-bar #mini-refresh-btn:active{transform:scale(0.94)}
/* 帯の中の1行 (leaf が .hub-bar-row と書いている物) = 段と同じ並べ方 */
.hub-bar-row{display:flex;align-items:center;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hub-bar-row::-webkit-scrollbar{display:none}


/* ===== 段組み・高さ・表の行の刻み (旧 hubbar.js STYLE) ================== */
/* 単段の帯だけ内側余白を統一する (.hb-1row はこのscriptが付ける) */
.hub-bar.hb-1row{padding:8px 12px var(--hb-pb)!important;box-sizing:border-box}
/* ↻ = 左端に固定 (margin-left:0!important = memory/ai-server/mini が leaf CSS で
↻に margin-left:auto を持っており、そのままだと order:-1 でも右へ流されるため) */
.hub-bar #hub-reload,.hub-bar #pf-refresh-btn,.hub-bar #mini-refresh-btn,.hub-bar [data-hubbar-reload]{order:-1;margin-left:0!important;position:sticky;left:0;z-index:3}
/* H = 右隅に固定 */
.hub-bar #hub-back{order:9999;margin-left:auto!important;position:sticky;right:0;z-index:3}
/* Hが無い帯にこのscriptが足す標準H (2026-07-25 「どのパネルからもHで戻れる」の保険) */
.hubbar-made-back{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:#000;color:#fff;font-size:20px;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-0.5px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid rgba(255,255,255,0.12);-webkit-tap-highlight-color:transparent}
/* ↻が無い帯にこのscriptが足す標準↻ (ppt等) */
.hubbar-made-reload{flex-shrink:0;background:#6366f1;color:#fff;border:none;height:36px;min-width:36px;padding:0 12px;font-size:20px;font-weight:700;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* 帯そのものが無いleafにこのscriptが足す標準の帯 (tabelog等・今後の新leafの保険) */
.hubbar-made-bar{position:fixed;bottom:0;left:0;right:0;z-index:99999;background:rgba(15,17,23,0.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;gap:6px;padding:8px 12px var(--hb-pb)}
.hubbar-made-bar #hub-back{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:#000;color:#fff;font-size:20px;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-0.5px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid rgba(255,255,255,0.12);-webkit-tap-highlight-color:transparent}
body.hubbar-autopad{padding-bottom:calc(var(--hubpad, var(--hubh,87px)) + var(--pnl-gap))!important}

/* ===== 下バーの段組み (2026-08-19 v8) =====================================
Makoto「下バーそのものを hubbar.js の持ち物にしろ / 雛形をいくつかに絞れ」。
雛形は【1つ】= 「最下段(↻+主タブ+H) + その上に36pxの段を必要なだけ」(v24で44→36)。
段の高さ・段の順・safe-areaの足し方・空段の残し方は全部ここが決める =
leaf側のCSSでは書けない (ここが !important で上書きする)。      */
:root{--hb-row:36px}
/* 段を持つ帯 = 縦積みの入れ物。内側の余白は段が持つので帯自身は0 */
.hub-bar.hb-stack,.hub-bar:has(>[data-hb]){border-top:1px solid rgba(255,255,255,0.08)!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-end!important;padding:0!important;gap:0!important;box-sizing:border-box;overflow:visible!important}
.hub-bar.hb-stack>*,.hub-bar:has(>[data-hb])>*{flex:0 0 auto}
/* 36px固定の段。横に入り切らない時は段の中だけ横スクロール = 高さは変わらない */
.hub-bar.hb-stack>.hb-row,.hub-bar>[data-hb]{box-sizing:border-box!important;height:var(--hb-row)!important;min-height:var(--hb-row)!important;max-height:var(--hb-row)!important;margin:0!important;padding:0 10px!important;display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;position:static!important;inset:auto!important;border:0!important;border-top:1px solid rgba(255,255,255,0.06)!important;background:transparent!important;transform:none!important;scrollbar-width:none}
.hub-bar.hb-stack>.hb-row::-webkit-scrollbar,.hub-bar>[data-hb]::-webkit-scrollbar{display:none}
.hub-bar.hb-stack>.hb-row>*,.hub-bar>[data-hb]>*{max-height:var(--hb-row)}
/* 最下段だけ safe-area を足す (=底の丸みの上にボタンが来る) */
.hub-bar.hb-stack>.hb-main,.hub-bar>[data-hb="main"]{border-top:0!important;height:var(--hb-mainh)!important;min-height:var(--hb-mainh)!important;max-height:var(--hb-mainh)!important;padding:8px 12px var(--hb-pb)!important;overflow:visible!important}
/* ★v13 viewport が縮んだまま戻らず、web view の底が画面の底より上にある時。
ホームインジケータは web view の外に居る = 底に 34px 空ける意味が無いので 8px に落とす。
帯の位置は動かさない (下げると切り取られる)。
★2026-08-24 v37 ここに個別の上書きは書かない = 詰めた時の値も【1つの式】(--hb-pb) が持つ。
  html.hb-short{--hb-pb:8px} の1行だけで 帯も最下段も本文の下余白も同時に詰まる。 */
/* 段の順 = 下から 主 → サブ → サブサブ → 操作 → (空段)  (2026-08-19 v10)
Makoto「b にして」= 操作の段は【帯の一番上】(本文のすぐ下)。
タブの段だけが下から浅→深で連続する = 雛形は「タブの深さ」1本で決まる。 */
.hub-bar.hb-stack>.hb-main,.hub-bar>[data-hb="main"]{order:50!important}
.hub-bar>[data-hb="sub"]{order:40!important}
.hub-bar>[data-hb="sub2"]{order:30!important}
/* ★2026-08-23 v25 中身の無い段は【高さを持たない】(Makoto「タイ語の操作パネルと
   入力パネルと2段目との間に隙間開けるのやめろ」)。空のまま場所だけ空ける段 =
   帯の中に何も入っていない隙間が1本挟まる、が正体だった。空段 (.hb-pad) も廃止。
   帯は bottom:0 ∴ 段が消えても下の段は1pxも動かない = 本文がその分広がるだけ。 */
.hub-bar.hb-stack>.hb-row.hb-empty,.hub-bar>[data-hb].hb-empty,.hub-bar.hb-stack>.hb-pad{display:none!important}
.hub-bar>[data-hb="ops"]{order:10!important}
.hub-bar.hb-stack>.hb-row[hidden],.hub-bar>[data-hb][hidden]{display:none!important}
/* 最下段の中に引き取ったタブ帯 (本文の上に置かれていた物を含む) */
.hub-bar .hb-tabs{flex:1 1 auto;min-width:0;display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:6px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin:0!important;padding:0!important;border:0!important;background:transparent!important;position:static!important;height:36px;scrollbar-width:none}
.hub-bar .hb-tabs::-webkit-scrollbar{display:none}
.hub-bar .hb-tabs>*{flex:0 0 auto}
/* leafが帯全体に掛けている「ボタンは44px角」の類は、引き取ったタブ帯・上の段には効かせない
(幅は中身なりにする)。leaf が自分のタブに直接書いた指定 (#tabs button 等) の方が強いので、
leaf の意図した見た目は残る。2026-08-19 ai-server で確認 */
.hub-bar .hb-tabs>a,.hub-bar .hb-tabs>button,.hub-bar .hb-tabs>div{width:auto}
.hub-bar.hb-stack>.hb-row:not(.hb-main)>a,.hub-bar.hb-stack>.hb-row:not(.hb-main)>button,.hub-bar.hb-stack>.hb-row:not(.hb-main)>div{width:auto}

/* ===== 段の中のボタンの高さも共通化 (2026-08-19 v11) ======================
Makoto「最下部の帯の位置がパネルによって違うのでは? それは好ましくない」。
帯・段・↻・H は全パネルで1pxも違わなかったが、【段の中に並ぶタブ/操作ボタンそのもの】は
leaf の CSS 任せで バラバラだった (実測 390x844):
最下段のタブ  タイ語/サプリ/プーケット 44px ・ 母 42.4 ・ ワイン 40 ・ タイ文字 38 ・ 食べログ 37
上の段のボタン 持ち物/OEM/ワイン絞り込み 44 ・ タイ語の再生 38 ・ プーケット 34 ・ 株 26〜31
段の中では上下中央に置かれるので、低いタブほど上端が下がる = パネルを行き来すると
タブの並びが最大3.5px 上下し、上の段では10px以上ずれていた。
→ 押せる物の高さもこの1本が決める: 全段 36px (↻/H も同じ・2026-08-23 v24)。
leaf の CSS では変えられない (!important)。印は hbBtns() が自動で付ける。 */
:root{--hb-btn:36px;--hb-btn-sub:36px}
.hub-bar .hb-btn{box-sizing:border-box!important;padding-top:0!important;padding-bottom:0!important;align-self:center!important;flex-shrink:0}
.hub-bar .hb-main .hb-btn{height:var(--hb-btn)!important;min-height:var(--hb-btn)!important;max-height:var(--hb-btn)!important}
.hub-bar .hb-row:not(.hb-main) .hb-btn{height:var(--hb-btn-sub)!important;min-height:var(--hb-btn-sub)!important;max-height:var(--hb-btn-sub)!important}
.hub-bar .hb-btn-c{display:inline-flex!important;align-items:center!important;justify-content:center!important}
/* 入れ物 (タブ帯・セグメント) の中身も上下中央 = 中の高さが揃っていても入れ物が上寄せだとズレる */
.hub-bar .hb-row>div,.hub-bar .hb-row>nav,.hub-bar .hb-row>span{align-items:center}

/* ===== 段に並ぶ物は【押せる物だけではない】(2026-08-23 v29) ==================
Makoto「依頼パネルだけ最下部の使用量表示が大きいのだが、どういう仕様だ?
        最下部もボタンの大きさは2、3段目と同じにしてるからここに大きな表示は置けないはずだろ」
v28 までの箱が高さを当てていたのは .hb-btn = <button>/<a>/タブの印が付いた物【だけ】。
依頼パネルの利用量3枚は「押しても何も起きない表示専用」(2026-07-26 Makoto指示) なので
その網に最初から掛からず、44px のまま取り残された → 今日ボタンを44→36pxに下げた時に
最下段だけ8px高い状態になった。同じ病気は「押せない物を置いた瞬間」どのパネルでも再発する。
∴ 高さの持ち物を【押せる物】から【段に並ぶ板すべて】へ広げる:
   hubbar.js hbItems() が 段の中の“1枚の板”(地か枠を持つ物) 全部に hb-item を付け、
   ここで .hb-btn と同じ高さに揃える。次に寸法を変えても取り残される物が無くなる。
※ 当てるのは【高さ】だけ。ボタンの形 (角丸・字・左右余白・地色) は当てない
   = 表示物をボタンに化けさせない。 */
.hub-bar .hb-item{box-sizing:border-box!important;align-self:center!important}
.hub-bar .hb-main .hb-item{height:var(--hb-btn)!important;min-height:var(--hb-btn)!important;max-height:var(--hb-btn)!important}
.hub-bar .hb-row:not(.hb-main) .hb-item{height:var(--hb-btn-sub)!important;min-height:var(--hb-btn-sub)!important;max-height:var(--hb-btn-sub)!important}

/* ===== 本文の表 = 行の刻みを表ごとに1つに揃える (2026-08-22 v14) =============
Makoto「通知パネルで高さズレるぞ。なんでまだ起きる?」。
帯(下バー)は v8〜v13 でこの1本の持ち物にしたが、【本文の中の表】は各パネルの
CSS任せのままだった。列ごとに font-size が違い line-height を倍率(1.45等)で
書いているので、列ごとに行の刻みが変わる:
/notify/ の点検表  #=17.4px 間隔=18.13 名前=19.58 確かめ方=18.85
行の高さは「その行でいちばん高い列」で決まる ∴ 見た目が同じ3行の行でも
名前が3行の行=71.7px / 確かめ方が3行の行=69.5px と 2.2px 食い違う =
罫線の並びが不揃いになる (タイ語パネルの 46 vs 48px と同じ病気)。
→ 表ごとに「その表でいちばん大きい刻み」を全セルに配る = 行が同じ格子に乗る。
いちばん大きい値を採るので、タイ文字のように背の高い字でも切れない。 */
.hb-grid>tbody>tr>td,.hb-grid>tbody>tr>th{line-height:var(--hb-lh)!important}

/* 画面より広い表を入れる箱 (hubbar.js hbWide が作る)。
   ページごと横に滑らせない = 帯も本文も横にずれない */
.hb-xbox{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.hb-xbox::-webkit-scrollbar{height:0}

/* ===== 下バーの中の「押せる物」の形も箱が決める (2026-08-23 Makoto ①⑤⑧) ==========
   > お前雛形の意味わかってない。プログラム書く時の大枠の箱を一緒にして
   > 中に入れるものだけ入れ替えるように修正しろ   /   aiサーバーも違う

   8/22 までの箱が持っていたのは【帯・段・ボタンの高さ】まで。ボタンの
   「角の丸み・字の大きさ・太さ・左右の余白・地と枠」は leaf 任せだった。
   実測 (440x956・公開版) では 同じ最下段のタブが:
       角丸 999px/16px/10px ・ 字 17px/14px/13.5px/13px ・ 太さ 700/600/400
       AIサーバーの [$] と 株の読み上げ操作 = 地も枠も無い【素のボタン/素のリンク】
   ∴ パネルを行き来するとタブの形が毎回変わって見えた。

   ■ 分け方 (ここが決まり)
       形 (大きさ・角・字・左右の余白) = 箱。leaf では変えられない (!important)
       色 (地・枠・字の色)             = 中身。leaf が書いた色はそのまま残す
                                        書いていない物にだけ箱の既定色が入る
   ■ 既定色は :where() で書く = 重みゼロ ∴ leaf のどんな指定でも勝てる           */

/* --- 形 (箱が決める) --- */
.hub-bar .hb-btn{
  border-radius:10px!important;
  padding-left:14px!important; padding-right:14px!important;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif!important;
  font-size:14px!important; font-weight:600!important;
  white-space:nowrap!important; text-decoration:none!important;
  box-sizing:border-box!important;
}
/* 上の段 (サブ・サブサブ・操作) は一回り小さい */
.hub-bar .hb-row:not(.hb-main) .hb-btn{
  font-size:13px!important; padding-left:12px!important; padding-right:12px!important;
}
/* 中が縦積みのタブ (サプリの 印+名前 等) は字の大きさだけ箱に合わせ、並びは壊さない */
.hub-bar .hb-btn>*{max-width:100%}
/* ↻ と H は元から箱の持ち物 = 上の形を当てない (36px角・20px の字。v24で44/24から) */
.hub-bar #hub-back,.hub-bar #hub-reload,.hub-bar #pf-refresh-btn,
.hub-bar #mini-refresh-btn,.hub-bar [data-hubbar-reload],
.hub-bar .hubbar-made-back,.hub-bar .hubbar-made-reload{
  border-radius:10px!important; font-size:20px!important; font-weight:700!important;
  padding-left:0!important; padding-right:0!important;
}

/* ★2026-08-25 帯の中の【消す】ボタンだけ赤 = 色も箱の持ち物 (F23)。
   印(⭐️)を付けるつもりで消してしまう事故を防ぐため、消す物だけ地の色を変える。
   leaf は class="hb-danger" と書くだけ = 赤の数値を各パネルが持たない (色が割れない)。
   字は明るい赤 (暗い地の上で読める明るさ・2026-08-04 薄い字の禁止)。 */
.hub-bar .hb-danger{
  background:rgba(224,85,85,0.20)!important; color:#ffb9b9!important;
  border:1px solid rgba(224,85,85,0.62)!important; }
.hub-bar .hb-danger:active{transform:scale(0.94)}

/* --- 色 (leaf が書いていない物だけに入る既定) --- */
.hub-bar :where(.hb-btn:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn):not([data-hubbar-reload])){
  background:rgba(255,255,255,0.08);
  color:#e8eaed;
  border:1px solid rgba(255,255,255,0.1);
  -webkit-appearance:none; appearance:none;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}


/* ===== 2026-08-23 v18 ボタンの【幅・中の字・素のボタン】と【帯の地】も箱が決める ==========
   Makoto「まだできてない 見直せ」。実測 (440x956) で残っていた食い違い:
     プーケット  タブが flex:1 で 38px に潰れ、字が隣と重なっていた (12.5px)
     サプリ      タブの字が 9.5px (中の span が箱の 14px を上書き)
     タイ文字    タブが background:transparent = 地も枠も無い素の字
     帯の地      ページごとに rgba .92 / .95 / 不透明 がばらばら = 下の色が透けて帯の色が変わる
   ■ 決まり
     ・ボタンは中身なりの幅で縮まない (flex:0 0 auto)。入り切らなければ箱が横に送る
     ・名前 (hb-txt) は箱の字の大きさを継ぐ / 数 (hb-cnt) だけ 12px
     ・素のボタン (hb-bare) には箱の既定色。選択中 (.on/.active) は leaf の色が勝つ
     ・帯の地は不透明 #0f1117 で全パネル同じ。入れ物 (div/nav/span) には地も枠も付けない */
.hub-bar{background:#0f1117!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.hub-bar .hb-btn:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn):not([data-hubbar-reload]){
  flex:0 0 auto!important;min-width:0!important;max-width:none!important;width:auto!important;
}
/* ★2026-08-25 【字1文字だけの操作ボタン】= class="hb-ico1" (/req/ 最下段の ✕ / ☆ / 題)。
   同じ段に利用量パネル3枚が同居する段では、既定の札 (左右14pxの余白=1枚43px) を3枚並べると
   利用量が 58px まで痩せる。字1文字なら余白は要らない ∴ 32px角の四角にして残りを利用量へ回す。
   高さ・角丸・色・押した時の縮みは今までどおり箱の持ち物 = ここで決めるのは幅と字の大きさだけ。
   :not(#…) を4つ足しているのは、下の「ボタンは中身なりの幅 (width:auto!important)」より
   強くするため = 同じ書き方をそろえないと幅が効かない。 */
.hub-bar .hb-btn.hb-ico1:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn):not([data-hubbar-reload]){
  width:32px!important;min-width:32px!important;max-width:32px!important;
  padding-left:0!important;padding-right:0!important;
  font-size:17px!important;font-weight:700!important;
}
/* ★2026-09-06 【字2文字だけの操作ボタン】= class="hb-ico2" (タイ語パネル最下段の〈分解〉)。
   hb-ico1 の2文字版。最下段に 章えらび▼ と 操作ボタンが同居する段では、既定の札
   (左右14pxの余白=1枚58px) を並べると 章の名前が1文字も出せなくなる ∴ 2文字なら
   余白を落として44px角の札にし、空いた分を章えらび▼へ回す。
   高さ・角丸・色・押した時の縮みは今までどおり箱の持ち物 = ここで決めるのは幅と字の大きさだけ。
   :not(#…) を4つ足す理由は hb-ico1 と同じ (「中身なりの幅」より強くしないと効かない)。 */
.hub-bar .hb-btn.hb-ico2:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn):not([data-hubbar-reload]){
  width:40px!important;min-width:40px!important;max-width:40px!important;
  padding-left:0!important;padding-right:0!important;
  font-size:14px!important;font-weight:700!important;
}
/* ★2026-09-06 【段の残り幅いっぱいに伸びる〈選ぶ〉ボタン】= class="hb-wide"
   (タイ語パネル最下段の 章えらび▼ / 会話えらび▼)。伸びる物は 左右14pxの余白が
   そのまま【名前に使えない幅】になる ∴ 余白だけ6pxに詰めて 名前へ回す。
   幅そのものは書かない = 何pxまで伸びるかは段の残り (leaf のグリッド) が決める。 */
.hub-bar .hb-btn.hb-wide:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn):not([data-hubbar-reload]){
  padding-left:6px!important;padding-right:6px!important;
}
/* ★2026-10-02 【枚数が多くて電話の幅に入り切らないタブ】= class="hb-slim"
   (ワイン会パネル最下段の 概要/在庫/過去/案内/集計/参加者/更新 の7枚)。
   Makoto「ワイン会パネルの下のボタン位置がタブによって変わるのやめろ」。
   既定の札 (左右14pxの余白) だと 7枚で456px = 440pxの電話の箱 (332px) に入り切らず、
   箱が【選んでいるタブが見える所まで】横に送る ∴ 参加者で68px・更新で124px 並びがずれていた。
   電話の幅の時だけ 余白を5px・札の間を4pxに詰めて 7枚を1画面に収める (318px)
   = 横に送る物が無い = どのタブを開いても全部の札が同じ場所に居る。
   高さ・角丸・色・字の大きさは今までどおり箱の持ち物 = ここで決めるのは左右の余白と間だけ。 */
@media (max-width:600px){
  .hub-bar .hb-btn.hb-slim:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn):not([data-hubbar-reload]){
    padding-left:5px!important;padding-right:5px!important;
  }
  .hub-bar .hb-tabs:has(>.hb-slim){gap:4px}
}
/* ★2026-09-06 最下段で【H の左に right 詰め】する操作ボタン = class="hb-tail"。
   最下段の並びは ↻(order:-1) … タブ/テーマ帯(既定0) … hb-tail(60) … H(9999)。
   /hubbar.js が data-hb="tabs" の帯を H の直前へ引き取っても、この印が付いた物は
   必ずその右 = H の隣に残る (leaf が並べ替えを書かなくてよい)。 */
.hub-bar>[data-hb="main"] .hb-tail,.hub-bar .hb-main .hb-tail{order:60}
.hub-bar .hb-btn .hb-txt{font-size:inherit!important;font-weight:inherit!important;line-height:1.2!important}
.hub-bar .hb-btn .hb-cnt{font-size:12px!important;font-weight:700!important;line-height:1.2!important}
.hub-bar .hb-btn.hb-bare:not(.on):not(.active):not(.sel):not(.selected):not(.cur):not([aria-selected="true"]):not([aria-pressed="true"]){
  background:rgba(255,255,255,0.08)!important;color:#e8eaed!important;border:1px solid rgba(255,255,255,0.1)!important;
}
.hub-bar .hb-row>div:not(.hb-btn):not(.hb-tabs):not(.hb-xbox),.hub-bar .hb-row>nav:not(.hb-btn),.hub-bar .hb-row>span:not(.hb-btn){
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
}


/* ===== 2026-08-23 v19 【帯が流れの中に在るパネル】と【↻の絵】も箱が決める ==================
   Makoto「作り方に問題ある スクロールの最後に来るとボタンが浮く 依頼の経路とかだとずれる
          あと reload ボタンが変」
   実測 (440x956・公開版 /req/): 一番下まで送ると 帯の底が 845px = 画面の底 956 より
   【111px 浮く】。/req/ は帯を position:fixed ではなく 足元一式 (#foot・sticky) の中に
   置く作り = 帯は文書の一部。それなのに上の body{padding-bottom:(帯の高さ)} が
   !important で効いて、帯の【下】に 111px の空白が出来ていた = 空白ぶん帯が持ち上がる。
   ■ 決まり: 帯が fixed でない (流れの中に在る) なら本文の下余白は 0。
     判定は hubbar.js が帯の computed position を見て html.hb-inflow を付ける。
     (leaf が body の padding-bottom を書いて打ち消すのは禁止 = 箱が決める) */
html.hb-inflow body{padding-bottom:0!important}
html.hb-inflow body.hubbar-autopad{padding-bottom:0!important}
/* ★2026-08-24 v37 判定を JS に頼らない。帯が流れの中に在るパネルは HTML に
   data-hb-flow と1つ書く = 最初の描画から下余白 0 (JS が付ける html.hb-inflow を待つと
   開いた直後だけ 帯のぶんの空白が出て、その後 消える = 見ている途中で本文が動く)。
   hubbar.js は今までどおり実際の position を見て html.hb-inflow を付ける = 書き忘れの保険。 */
html:has(.hub-bar[data-hb-flow]) body{padding-bottom:0!important}
html:has(.hub-bar[data-hb-flow]) body.hubbar-autopad{padding-bottom:0!important}
/* ↻ = 元どおり字 (U+21BB)。2026-08-23 v19 で SVG の線画にしたが Makoto「もとに戻せ」で撤回。
   形は箱の #hub-reload (24px/太さ700) が決める = 全パネル同じ大きさ。 */


/* ===== 2026-08-23 v21 【帯の外に在る ↻】も箱が形を決める =======================
   Makoto「リロードボタンが前のままのものがあるな。お前雛形を全部に当てはめるはずなのに
          何で変わってないパネルがあるんだ？ 全部のパネルやらなかっただろ？」
   v20 までの箱は .hub-bar の【中】の ↻ しか持っていなかった = 帯の外に置かれた ↻ は
   各パネルの手書きのままだった (hubトップ 48px角の暗いボタン / 依頼のヘッダ 15pxの丸 /
   株「↻ 更新」13px / ワイン履歴「🔄 シート再チェック」)。
   ■ 決まり: ↻ はページのどこに在っても 高さ36px・角丸10px・地 #6366f1・白字。
     印 (.hb-reload / .hb-reload-ico) は hubbar.js がページ全体を見て付ける。 */
.hb-reload{
  box-sizing:border-box!important;height:36px!important;min-height:36px!important;
  background:#6366f1!important;color:#fff!important;border:none!important;border-radius:10px!important;
  font-size:14px!important;font-weight:700!important;line-height:36px!important;
  text-align:center!important;padding:0 14px!important;vertical-align:middle!important;
  box-shadow:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif!important;
}
.hb-reload.hb-reload-ico{width:36px!important;min-width:36px!important;padding:0!important;font-size:20px!important}
.hb-reload:active{transform:scale(0.94)}


/* ===== 2026-08-23 v22 【↻ と H の 中の字を真ん中に置く】のも箱の持ち物 ==================
   Makoto「リロードはまだ治ってない　真ん中にきてない」

   実測 (440x956・公開版・24ページ)。↻ の字の中心と ボタンの中心の ずれ:
       leaf が手書きした <button id="hub-reload">      … 左へ 11.9px ずれる (15ページ)
       箱が作った .hubbar-made-reload / 株 / Mini / oem … ずれ 0        (9ページ)
   ∴ 「真ん中に来ているパネル」は箱が揃えていたのではなく、たまたま そのボタンに
   別の決まり (箱が作った物の形・別id用の形) が当たっていただけだった。

   理由: 箱は ↻ を 44px角・地・角丸・字の大きさ まで決めていたが、
   横方向の置き方 (justify-content) を書いていなかった。
   ボタンは display:flex ∴ 既定は左詰め = 44px の箱の中で 24px の字が左に寄る。
   text-align:center は flex の中では効かない (中の字は「並べられる物」になるため)。
   高さ方向は align-items:center が書いてあったので、横だけ ずれていた。

   ■ 決まり: ↻ と H は【いつでも 縦横とも真ん中】。leaf の CSS では変えられない。
     字を添えた物 (「↻ 更新」「↻ シート再チェック」) も 記号と字をまとめて真ん中に置く。 */
.hub-bar #hub-reload,.hub-bar #pf-refresh-btn,.hub-bar #mini-refresh-btn,
.hub-bar [data-hubbar-reload],.hub-bar .hubbar-made-reload,
.hub-bar #hub-back,.hub-bar .hubbar-made-back,
.hubbar-made-bar #hub-back,.hb-reload{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
/* H の大きさも leaf では変えられない (依頼パネルが状態によって 38px に縮めていた =
   「パネルによって H の形が違う」の残り最後の1つ。2026-08-23 実測で発見) */
.hub-bar #hub-back,.hub-bar .hubbar-made-back,.hubbar-made-bar #hub-back{
  width:36px!important;min-width:36px!important;height:36px!important;
  padding:0!important;font-size:20px!important;
}


/* ===== 2026-08-23 v23 【本文の横幅】も箱の持ち物 ==========================
   Makoto「依頼は横幅広いウィンドウで幅に制限かかるがかからないパネルもあるが
           それは雛形が違うのか？」

   ■ 答え = 雛形は同じ。箱が【横幅を持っていなかった】だけ。
     実測 (窓 1400px・公開版・26ページ):
       .wrap で止めていた   … 依頼760 / 通知760 / 動画760 / 献立640 / サプリ900 / プーケット1120
       body で止めていた    … 資料760 / ワイン履歴760 / Mini760 / 覚え書き1100 / AIサーバー1360 / OEM1500
       止めていない         … 株・写真・RGB・帯検査・ワイン・レクサス2枚・タイ語・
                              タイ文字・持ち物・todo・連絡・母 = 13枚が窓いっぱいに広がる
     ∴ 8通りの数字 + 13枚の無指定 = パネルごとの手書き。同じ病気 (寸法が2か所で決まる)。

   ■ 決まり = 幅は箱が持つ。中身が選べるのは【2つの名前】だけ
       --pnl-w-read  760px   読み物・入力の幅 (既定)。依頼パネルと同じ
       --pnl-w-board 1400px  一覧・表・写真の幅
     leaf は `:root{--pnl-max:var(--pnl-w-board)}` の1行で選ぶだけ (panel_shell.py が配る)。
     数字を直接書くな = また8通りに枝分かれする。
   ■ 帯の中の段も同じ幅で真ん中に置く = 広い窓で ↻ と H が本文の左端・右端に揃う
     (地は今まで通り窓いっぱい ∴ 底が透けない)。iPhone (440px) では1pxも変わらない。 */
:root{ --pnl-w-read:760px; --pnl-w-board:1400px; --pnl-max:var(--pnl-w-read); }
body{ max-width:var(--pnl-max)!important; margin-left:auto!important; margin-right:auto!important; }

/* ★スクロール棒の場所は【常に】確保する (2026-08-23 v30)
   Makoto「タイ語パネルの横幅が選択タブによって変わるのやめろ」。
   同じ指摘の2回目 = 2026-08-14「タイ語選ぶとずれたぞ」で /req/ だけ直した物が、
   箱に上げていなかったので タイ語パネル本体で再発した。
   症状の実体 (実測 窓500px):
     本8234px / 会話24711px / 単語2396px … 縦に長い = スクロール棒が出る → 版面 485px
     料理・感動詞 (1画面で収まる短いタブ)   … スクロール棒が出ない       → 版面 500px
   = タブを選ぶたびに版面が15px広がり、真ん中に置いた本文が7.5px横へ動く。
   scrollbar-gutter:stable は【棒が出ない時も棒のぶんの場所を空けておく】 ∴ 幅が動かない。
   iPhone (棒が中身の上に重なる作り) では1pxも変わらない = 損はしない。
   ★leaf 側で html{overflow-y:hidden} 等を書いてこれを潰すな (check_hub_bar.py F25 で公開が止まる) */
html{ scrollbar-gutter:stable; }
.hub-bar.hb-stack>.hb-row,.hub-bar>[data-hb]{
  width:100%!important; max-width:var(--pnl-max)!important;
  margin-left:auto!important; margin-right:auto!important;
}


/* ===== 2026-08-23 v24 【押せる物は全段 36px】に統一・帯もその分低く ==================
   Makoto「押しやすさの問題だけであれば36にして 帯もそれに合わせて低くする
           ↻ と H も同じ大きさにするぞ 当然」

   v11〜v23 の箱は 最下段だけ 44px角 (Apple の当たり判定の下限)、上の段は 36px の
   二本立てだった。∴ 最下段と上の段でボタンの大きさが違い、↻/H だけ 44px角で残っていた。
   ■ 決まり (ここが唯一の持ち主)
       押せる物   = 全段 36px (主タブ・サブ・サブサブ・操作・↻・H・帯の外の↻ 全部)
       段の高さ   = 36px (--hb-row)
       最下段     = 36px + 上下の余白16px + 端末の下の余白 (iPhone 34px)
       帯ぜんぶ   = 87 / 123 / 159 / 195px  (= 86 + 36×上の段の数 + 境目1px)
       ↻ と H の字 = 20px (36px の器に 24px の字は入らないため 24→20)
   ■ 高さが 44→36 に変わったので、寸法を数字で持っている検査も同時に直してある
     (hubbar.js hbAudit / hub_panel_audit.py / 雛形PPT)。箱だけ変えると全ページで公開が止まる。 */


/* ===== 2026-08-23 v26 【キーボードが出ている間は帯を畳む】のも箱の持ち物 ==================
   Makoto「依頼パネルでキーボード出した時の動作が仕様通りでない」

   仕様 (hub構造.md / 2026-07-27 Makoto指示) =
       文字を打っている間は タブ帯・下バー・⬆⬇・検索帯 を引っ込め、
       【キーボードのすぐ上をモデル選択+送信の行にする】。
   /req/ は昔からその通りに `body.typing .hub-bar{display:none}` と書いてあった。
   実測 (440x956・公開版・キーボード414px) では そうなっていなかった:
       #qbar (検索帯) 消える ・ #modes (タブの段) 消える ・ **下バーだけ 87px 居残る**
       ∴ 送信の行の下に帯が1本挟まり、キーボードとの間が 87px 空いていた。
   理由 = v8 で帯を箱の持ち物にした時に .hub-bar.hb-stack{display:flex!important} と書いた。
   !important ∴ leaf 側の display:none には勝てない = 箱が leaf の指示を握り潰していた。
   「箱が帯の見た目を全部持つ」なら【畳む条件も箱が持つ】のが筋 ∴ ここに書く。

   ■ 決まり: 【流れの中に帯がある型 (= 入力欄つき・html.hb-inflow)】は、
     文字を打っている間 (body.typing) 帯を畳む。
       ・流れの中の帯 = 文書の一部 ∴ キーボードが出ると入力欄との間に居座り、
         その高さぶん 送信の行がキーボードから離れる = 仕様が守れない。
       ・position:fixed の帯 (他の24枚) は元からキーボードの下に隠れる ∴ 対象外
         = タイ語のように別の意味で typing の印を使っているパネルを巻き込まない。
     印 (body.typing) を立てるのは各パネル = キーボードの出入りの判定は端末ごとの
     癖が濃い (hub構造.md「基準からの縮みで測る」) ∴ 中身の持ち分。 */
/* ★:not(.caret-in) = いまカーソルが入っている物は畳まない (2026-08-30)。
   帯の中に文字を打つ欄 (絞り込みの欄など) があると、キーボードが出た瞬間に欄ごと消えて
   1文字も打てなくなる (依頼パネルの🔎検索で実際に起きた)。
   印は /hubbar.js hbCaretMark が全パネルに配る。付け忘れは check_hub_bar.py F33 が止める。 */
/* ★2026-09-30(2) Makoto「まだpcでスクロールすると消えるぞ、pcでは常時表示させとけよ」(/req/)
   = 畳む規則は【指で操作する端末 (hover:none か pointer:coarse)】にしか存在させない。
     PC (マウス/トラックパッドが主の端末) に画面キーボードは無い ∴ 帯を畳む理由も無い。
     leaf が body.typing を誤って立てても (PC で窓を縮めた・拡大した 等)、規則そのものが
     無いので帯は消えない = 判定を直す後追いでなく「書けなくする」形。 */
@media (hover:none), (pointer:coarse) {
html.hb-inflow body.typing .hub-bar:not(.caret-in),
html.hb-inflow body.typing .hub-bar.hb-stack:not(.caret-in),
html.hb-inflow body.typing .hub-bar.hb-1row:not(.caret-in),
html.hb-inflow body.typing .hubbar-made-bar:not(.caret-in){ display:none!important; }
}


/* ===== 2026-08-23 v27 【タブの状態 (選ばれている/いない) の見た目】も箱の持ち物 ==========
   Makoto「同じ雛形を使ってるのに各パネルのタブの形やフォーカスの時の色がまちまちなのは
           なんでだ？ 統一すればいいだろ、どんどん雛形で作る範囲を広げるように
           意味のない分岐はやめていけ」

   ■ 何が残っていたか
     v18 (8/23) で決めた分け方は【形=箱 / 色=中身】だった。∴ 角丸・高さ・字の大きさは
     全パネル同じに揃ったが、「いま選ばれているタブをどう見せるか」は leaf 任せのまま =
     実測 (440x956・公開版・24パネル) で **見せ方が5通り・色が12通り** に割れていた:

       地を濃くして下に線     通知・写真・株・ワイン・ワイン履歴・サプリ・プーケット
       枠の色だけ変える       レクサス・食べログ・AIサーバー
       べた塗り               持ち物(緑)・タイ語(朱)・タイ文字(朱)・写真の大きさ(青)
       影の輪郭 (地は透明)    依頼
       地を濃くするだけ       OEM・RGB案件
       線の太さ               3px と 2px が混在 (プーケットの中で両方)
       選ばれていない時の地    rgba .04 / .05 / .06 / .08 / #101317 / #1d212b / #262626 / #13171e
       選ばれていない時の字    #dce0e5 / #e8eaed / #e8e6df / #dfdfdf / #dae0ea

     ∴ パネルを行き来するたびに「押した所がどう光るか」が変わる。
     さらに /photo/ の大きさの選択は【選ばれていないのに青のべた塗り】= 選択中と見分けが付かない。

   ■ 決まり (ここが唯一の持ち主。leaf では色も変えられない)
       選ばれていない  地 rgba(255,255,255,.08) / 字 #e8eaed / 枠 1px rgba(255,255,255,.10)
       選ばれている    地 #2d3344 / 字 #fff / 枠 1px rgba(255,255,255,.18)
                       + 下から3px の線 #6366f1 (↻ と同じ色 = 帯の中で色は1色だけ)
       押している間    0.96倍に縮む / キーボードのフォーカス 2px の枠 #6366f1
       使えない時      薄く (0.35) する。字を薄くしてよいのはこの1つだけ
     ★色を分ける理由が無い (パネルごとの橙・朱・緑・黄・桃は【意味のない分岐】) ∴ 廃止。
     中身 (本文) の色は今まで通り自由 = ここで揃えるのは【帯の中】だけ。

   ■ 誰が印を付けるか
     hubbar.js の hbSel() が、leaf の書き方 (.on / .active / .sel / .selected / .cur /
     .current / aria-selected / aria-pressed / aria-current) を **1つの印 .hb-sel** に
     読み替える = leaf は今までどおり自分の書き方のままでよい (HTMLは1文字も直さない)。

   ■ 二度と枝分かれしない形
     ・この規則は :not(#…) を4つ持つ = 詳細度が id 4つぶん。leaf が #id 付きの
       !important で書いても勝てない (実測で確かめた)
     ・leaf が帯のボタンに色を書いていたら hubbarAudit() が拾って公開が止まる (F23)      */
:root{
  --hb-tab-bg:rgba(255,255,255,0.08);   /* 選ばれていないタブの地 */
  --hb-tab-fg:#e8eaed;                  /* 同 字 */
  --hb-tab-bd:rgba(255,255,255,0.10);   /* 同 枠 */
  --hb-tab-on-bg:#2d3344;               /* 選ばれているタブの地 */
  --hb-tab-on-fg:#ffffff;               /* 同 字 */
  --hb-tab-on-bd:rgba(255,255,255,0.18);/* 同 枠 */
  --hb-accent:#6366f1;                  /* 下の線・フォーカスの枠 (↻ と同じ色) */
}
.hub-bar .hb-btn:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn):not([data-hubbar-reload]){
  background:var(--hb-tab-bg)!important;
  color:var(--hb-tab-fg)!important;
  border:1px solid var(--hb-tab-bd)!important;
  box-shadow:none!important;
  opacity:1!important;
  text-shadow:none!important;
  transition:transform 0.12s;
}
.hub-bar .hb-btn.hb-sel:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn):not([data-hubbar-reload]){
  background:var(--hb-tab-on-bg)!important;
  color:var(--hb-tab-on-fg)!important;
  border:1px solid var(--hb-tab-on-bd)!important;
  box-shadow:inset 0 -3px 0 var(--hb-accent)!important;
}
/* ★2026-09-07(4) 【札の中の★を黄にする印】= class="hb-star" (タイ語パネルの ★ボタン #seqfav の印)。
   同日朝の「3つから選ぶ札の 2つ目・3つ目の色」(hb-sel2=青 / hb-sel3=金 の地) は
   Makoto「星の種類も 中抜けか黄色だけにしろ 紛らわしいぞ」で【廃止】した =
   札の地に色を敷くと ☆ / 青地の★ / 金地の★ の3種類の星に見える。
   ∴ 札の地は素のまま・印だけ ☆(色なし) と ★(黄 #ffd23f = 本文の★と同じ色) の2つ。
   ★hb-sel2 / hb-sel3 を書き戻すな = 3種類目の星がまた生まれる。
   ★下の「中の字はボタンの色を継ぐ」(color:inherit!important) より【後ろ】に置き、
     :not(#…) を同じ数だけ付けて 上回る = 前に置くと黄が負けて白い★になる。 */
/* 中の字・印 (hb-txt / hb-cnt / アイコンの span) はボタンの色を継ぐ = 中だけ別の色にしない */
.hub-bar .hb-btn:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn) *{
  color:inherit!important; background:transparent!important; text-shadow:none!important;
}
.hub-bar .hb-btn:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn) .hb-star{
  color:#ffd23f!important;
}
.hub-bar .hb-btn:active{transform:scale(0.96)}
.hub-bar .hb-btn:focus-visible{outline:2px solid var(--hb-accent)!important;outline-offset:2px!important}
.hub-bar .hb-btn:disabled,.hub-bar .hb-btn[disabled],.hub-bar .hb-btn[aria-disabled="true"]{
  opacity:0.35!important; transform:none!important;
}
/* 旧 .hub-action.active (v8 から在る同じ形) は上の1本にまとめた = 二重に持たない */

/* ===== 2026-08-23 v31 【表型】= 中身(本文)の側の 1つめの箱 ==================
   Makoto「これを表型の基本形にして、機能を追加して、他のタブもこの型に当てはめられる
           ようにしたら？ 今かけてるのは、手入力での編集と、縦の順番変更、フィルタリング機能？」

   ■ 基本形の出どころ = サプリの表 (table.t)。実測で【箱の値と1つも食い違わない】唯一の表
     だったので、これを写して基本形にした: 字12.5px / 余白8-10px / 区切りは下線1px /
     器は角丸12px・枠1px・入り切らなければ器の中だけ横に送る / 1行目の列は左に貼り付く。
   ■ 使い方 (leaf 側)   表に  data-tbl="sort,filter"  と1行書くだけ。
       sort   = 見出しを押すと その列で縦の順番が変わる (もう一度押すと逆)
       filter = 表の上に絞り込みの欄が出る。打った字を含む行だけ残る
       order  = 掴む所を持って行を上下に動かす ([data-grip] が在ればそれ・無ければ ⠿ を足す)
       edit   = [data-edit="鍵"] と書いた所が【最初から箱】になり、押せばその場で打てる
       ★2026-08-24 v36: 「直す」を押している間だけ という状態は廃止 (Makoto
         「内容を直接変更できるようなボックスにする」) = 箱も掴む所も常に出ている
       ★何も書いていない表には 1バイトも当たらない = 既存の表は動かない
   ■ 見た目の既定は :where() で書く = 詳細度0。
     leaf が今まで通り自分の値を書いていれば必ず leaf が勝つ ∴ 当てても画面は動かない。
     leaf の CSS を1枚ずつ消していくと、消えた分だけこの値に落ちる (帯の色と同じ手口)。
   ■ 動き (並べ替え・絞り込み・行の入れ替え) は hubbar.js の hbTable() が持つ。
     3つとも今は 通知/食べログ/RGB案件/持ち物/todo/株… に別々の実装で散らばっている =
     箱に集めて、当てたパネルから 1本ずつ捨てる。
   ========================================================================= */
:root{
  --tbl-fs:12.5px;                      /* セルの字 */
  --tbl-hfs:11.5px;                     /* 見出しの字 (2026-08-24 v54: 11→11.5) */
  --tbl-pad:8px 10px;                   /* セルの余白 (古い書き方の互換。新規は下の2つを使う) */
  /* ★2026-08-24 v45 上下の余白は【表ごとに1つ】= 行の中で列ごとに変えられなくする。
     (直す欄が入るセルだけ縦3pxに詰めていたので、同じ行の空のセルだけ縦8pxのまま残り、
      同じ行でも字の高さがズレていた = /supp/ 実測 3px/8px。列ごとの上下指定は禁止。) */
  --tbl-pad-y:8px;                      /* セルの上下 (行の中では必ず同じ値) */
  --tbl-pad-x:10px;                     /* セルの左右 (列ごとに変えてよい) */
  --tbl-line:color-mix(in srgb,currentColor 18%,transparent);  /* 区切りの線 (地の明暗に付いていく) */
  --tbl-radius:12px;                    /* 器の角 */
  --tbl-row:36px;                       /* 押せる行の最低の高さ */
  /* ★2026-08-26 v64 表の中の欄 (.hb-fi/.hb-fs) の字。既定は 16px のまま = 今ある表は動かない。
     16px 未満にしたい表だけ leaf が :root で この名前を書き換える (母= 14px)。
     iPhone が「押すと画面ごと拡大する」のは【押した瞬間の字が16px未満】の時だけなので、
     下の .hb-fz / :focus で 押す瞬間に必ず16pxへ戻す = 小さくしても拡大しない。 */
  --tbl-fld-fs:16px;                    /* 欄の字 (押していない間) */
  /* ★2026-10-02 表の中の欄の高さ。既定は 30px のまま = 今ある表は動かない。
     行を詰めたい表だけ leaf が :root で書き換える (サプリ= 22px・Makoto「縦の行間も詰めろ」)。 */
  --tbl-fld-h:30px;                     /* 欄の高さ */
}
:where(table.hb-t){border-collapse:collapse;width:100%;font-size:var(--tbl-fs)}
:where(table.hb-t th){text-align:left;font-size:var(--tbl-hfs);font-weight:800;
  padding:var(--tbl-pad-y) var(--tbl-pad-x);border-bottom:1px solid var(--tbl-line);white-space:nowrap}
:where(table.hb-t td){padding:var(--tbl-pad-y) var(--tbl-pad-x);border-bottom:1px solid var(--tbl-line);
  vertical-align:middle;line-height:18.1px}
:where(table.hb-t tr:last-child td){border-bottom:none}
:where(.hb-twrap){overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid var(--tbl-line);border-radius:var(--tbl-radius)}
/* ---- 表の色も箱 (2026-08-24 v42「なんでサプリと母で色が違うの」) ----
   見出し行の地・罫線・表の地は【全パネル同じ】。leaf は書かない。
   ここだけ :where() を外して普通の詳細度で書く = 表型の雛形に載せたパネル
   (サプリ・母) は必ず同じ色になる。載せていない表 (.hb-t が付かない) には当たらない。 */
/* ★2026-08-24 v44 セルの余白 (=行の高さ) も普通の詳細度で書く。
   :where() で書いていたので、leaf が `*{padding:0}` と書いているだけで消え、
   その leaf だけ行が31pxに潰れていた (サプリを作り直して実測)。寸法は箱の持ち物 ∴
   leaf の書き癖では消せない強さで書く。 */
table.hb-t th,table.hb-t td{padding:var(--tbl-pad-y) var(--tbl-pad-x)}
/* 直す欄が1つでも入る表は【表ごと】上下を詰める (欄30px + 上下3px = 行36px)。
   セル単位ではなく表単位 ∴ 空のセルだけ取り残されることが起きない。 */
table.hb-t.hb-ted{--tbl-pad-y:3px}
/* ★2026-08-24 v46 【欄が1つでも入る表は、どのパネルでも同じ行の高さ】
   Makoto「サプリパネルは一番上の項目の枠と入力欄との連動がとにかくおかしい、
   全然母と同じ雛形使ってないのでは？」「ぜろからやりなおせ」。
   v44 で hubbar.js が表に印 (.hb-tfields) を付けるようにしたのに、
   【この印を読む決まりを1行も書いていなかった】= 印だけ付いて何も起きない状態だった。
   ∴ 母は自前の td 余白 (上下3px + line-height 24px) のまま 行48px・見出し33px、
   サプリは箱の値で 行37px・見出し23.5px = 同じ雛形を通っているのに別物に見えていた。
   ここで印を読む = 欄を持つ表は 欄30px + 上下3px = 行36px(罫線込み37px) で必ず揃う。 */
table.hb-t.hb-tfields{--tbl-pad-y:3px}
/* 欄が入っているセルは【セルの左右の余白を欄に譲る】= 欄の枠が列の枠とぴったり重なる
   (譲らないと欄は列の内側10pxから始まり、見出しの列と欄の枠が別々に見える
    = Makoto「一番上の項目の枠と入力欄との連動がとにかくおかしい」の実体) */
table.hb-t.hb-tfields tbody td:has(input,select,textarea,.hb-robox){
  padding:var(--tbl-pad-y) 2px}
/* 見出しにも欄を置く表 (列の名前をその場で直す) は、見出しの左右の余白も欄に譲る
   = 見出しの欄と本文の欄が1本の線でそろう (2026-08-24 v48) */
table.hb-t.hb-tfields thead th:has(input,select){padding:var(--tbl-pad-y) 2px}
/* ★2026-08-24 v49 見出しの字も【欄と同じ x】から始める。
   Makoto「サプリパネルは一番上の項目の枠と入力欄との連動がとにかくおかしい、
           全然母と同じ雛形使ってないのでは？」
   本文のセルは欄に余白を譲って 欄の字が x+6 から始まるのに、
   見出しだけ セルの余白 10px のままだった = 全部の列で 4px、掴む所の帯がある1列目は
   30px ずれ、見出しの枠と下の欄が別々の物に見えていた (/supp/ 実測 24px ずれ)。
   母は見出しにも欄を置いているので元から x+6 = ここで【同じ1つの値】に揃う。 */
table.hb-t.hb-tfields thead th{padding-left:6px}
table.hb-t.hb-tfields thead th.hb-gutth{padding-left:34px}
table.hb-t th{background:var(--pnl-head);color:var(--pnl-key);
  border-bottom:1px solid var(--pnl-line)}
table.hb-t td{border-bottom:1px solid var(--pnl-line)}
table.hb-t td,table.hb-t th{border-right:1px solid var(--pnl-grid)}
table.hb-t td:last-child,table.hb-t th:last-child{border-right:0}
.hb-twrap{background:var(--pnl-card);border-color:var(--pnl-line)}
.hb-t td.hb-pin{background:var(--pnl-card)}
.hb-t thead th.hb-pin{background:var(--pnl-head)}

/* ---- 機能の見た目 (ここは箱が持つ = leaf に書かせない) ---- */
.hb-t th.hb-sortable{cursor:pointer;-webkit-tap-highlight-color:transparent;
  padding-right:16px!important;position:relative}
.hb-t th.hb-sortable:after{content:"";position:absolute;right:5px;top:50%;
  margin-top:-2px;border:4px solid transparent;border-top-color:currentColor;opacity:.35}
.hb-t th.hb-asc:after{margin-top:-6px;border-top-color:transparent;
  border-bottom-color:currentColor;opacity:1}
.hb-t th.hb-desc:after{opacity:1}
/* ★色は書かない = 地と字はパネルから継ぐ (currentColor)。
   明るい地のパネル (サプリ) で白い字を書くと読めなくなる = 2026-08-04 の色の決まり違反 */
.hb-tfil{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.hb-tfil .hb-tfil-w{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.hb-tfil input{flex:1 1 auto;min-width:0;height:36px;font-size:16px;border-radius:8px;
  border:1px solid color-mix(in srgb,currentColor 25%,transparent);background:transparent;
  color:inherit;font-weight:600;padding:0 10px;-webkit-appearance:none;appearance:none}
.hb-tfil input::placeholder{color:inherit;font-weight:600}
.hb-tfil .hb-tfil-n{flex:0 0 auto;font-size:12px;font-weight:700;color:inherit}
.hb-tfil .hb-tfil-x{flex:0 0 auto;height:36px;min-width:36px;padding:0 10px;border-radius:8px;
  border:1px solid color-mix(in srgb,currentColor 25%,transparent);background:transparent;
  color:inherit;font-size:15px;font-weight:700;cursor:pointer}
.hb-t tr.hb-drag{opacity:.55}
.hb-t tr.hb-drag td{background:rgba(99,102,241,0.18)!important}

/* ---- 表の中の【欄】は 母もサプリも1つの物 (2026-08-24 v47) ----
   Makoto「サプリパネルは一番上の項目の枠と入力欄との連動がとにかくおかしい、
           全然母と同じ雛形使ってないのでは？」「ぜろからやりなおせ」。
   v36〜v46 の「押すと欄に変わる箱」(.hb-edbox / .hb-edin) は【全廃】した:
     ・母は最初から本物の欄 input.hb-fi ∴ 同じ雛形と言いながら中身が2通りあった
     ・押した時だけ列を320pxまで広げていたので、見出しの列は元の幅・中の欄だけ広がる
       = 「枠と入力欄が連動しない」の実体
   いま表の中に出る物は3つだけ:
     入力欄 input.hb-fi / ドロップダウン select.hb-fs / 直せない値の枠 .hb-robox
   寸法 (高さ30px・字16px・角8px) は下の1か所で決まる = leaf は書けない。 */
/* ★2026-08-24 v43 直せない値 (計算で出る物・リンク) の箱。直せる箱と同じ形・同じ高さで
   【地を持たない】= 表の見え方は箱でそろい、押しても欄にならないことは見て分かる。
   Makoto「表の内容に入力欄以外の文字を書くな」= 値は必ず箱の中に入れる。 */
.hb-t .hb-robox{display:inline-flex;align-items:center;box-sizing:border-box;
  max-width:100%;min-width:0;min-height:var(--tbl-fld-h);padding:0 3px;border-radius:8px;
  border:0;box-shadow:inset 0 0 0 1px var(--pnl-grid);
  background:transparent;color:inherit;vertical-align:middle}
.hb-t .hb-robox>.hb-edtx{flex:1 1 auto;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hb-t td.d .hb-robox,.hb-t td.q .hb-robox{justify-content:flex-end}
.hb-t td.d .hb-fi,.hb-t td.q .hb-fi{text-align:right}
/* 箱が入っているセルは【セルの余白を箱に譲る】= 箱の枠のぶん字が細くならない
   (譲らないと 62pxの「粒数」の列で 60粒 が「6…」になる。2026-08-24 実測)。
   縦は3px = 箱30px と足して 行36px ちょうど (箱が決める1つの高さ)。 */
.hb-t tbody td.hb-edcell{padding:var(--tbl-pad-y) 2px!important}   /* 上下は表の値のまま = 行の中で揃う */
/* 欄も枠だけの箱も【列の幅そのもの】= 見出しの列と中身が必ず同じ枠になる */
.hb-t tbody td.hb-edcell>.hb-fi,.hb-t tbody td.hb-edcell>.hb-fs,
.hb-t tbody td.hb-edcell>.hb-robox{width:100%}
/* ★2026-08-24 v38 【名前の箱を 札に潰させない】
   Makoto「筋トレタブ これだけ?」で見つけた物。同じ列に 通し番号・↗・札 が同居すると、
   縮めるのは箱だけ (箱は max-width:100% で縮み放題・札は縮まない) ∴ サプリ 筋トレの
   L-シトルリンは 名前の箱が【10px】= 中身が1文字も見えていなかった (166pxの列を
   ↗・Amazon・「他: 10:30 6g」が食い尽くしていた)。
   → 箱に【読める下限 96px】を持たせ、入り切らない札は列の右へはみ出させて切る
     (札を細く潰すと 16px の欠片が並んで もっと読めない = 実測して切る方を採った)。
     続きは列の境目をつまんで広げれば出る。何を先に諦めるかを箱が決める。
   ★列の幅そのものは触らない (2026-07-26 Makoto「勝手に列幅いじらなくて良い」)。 */
.hb-t td.hb-edcell>*:has(>.hb-fi){min-width:0!important;overflow:hidden}
.hb-t td.hb-edcell>*:has(>.hb-fi)>.hb-fi{
  flex-shrink:1!important;min-width:min(100%,96px)!important}

/* ---- 表の中の【欄】(ドロップダウン・打ち込む欄) も箱の持ち物 (2026-08-24 v44) ----
   Makoto「一番上の項目の枠と入力欄との連動がとにかくおかしい」。
   原因は leaf が欄の寸法を自分で書いていたこと: サプリの服用量は min-width:88px を
   持っていたので、列を狭くしても欄が縮まず【右隣の列へはみ出す】= 見出しの列の枠と
   欄の枠が別々に動く。∴ 欄は【列の幅そのもの】にする = 幅は箱が1本で決める。
   字は16px = iPhone がこれ未満の欄を押すと画面ごと拡大するため (好みではない)。
   高さ30px = 行36px を1pxも動かさない (枠だけの箱 .hb-robox と同じ)。 */
.hb-t .hb-fs,.hb-t .hb-fi{box-sizing:border-box;width:100%;min-width:0;max-width:100%;
  height:var(--tbl-fld-h);border-radius:8px;border:0;box-shadow:inset 0 0 0 1px var(--pnl-line);
  background:var(--pnl-field);color:var(--pnl-ink);
  font-family:inherit;font-size:var(--tbl-fld-fs);font-weight:600;padding:0 4px;
  text-overflow:ellipsis}
/* ★2026-08-26 v64 【押す瞬間だけ必ず16px】= 小さい字にしても iPhone が画面ごと拡大しない。
   拡大するかどうかを Safari が決めるのは「focus した時の字の大きさ」1点だけなので、
   focus より前に来る pointerdown で箱が .hb-fz を付ける (/hubbar.js) → その時点で16px。
   :focus は キーボードの Tab で入った時と、.hb-fz が外れた後の押しっぱなしの保険。
   高さ (30px) も枠も変わらない ∴ 行の高さも列の幅も1pxも動かない。 */
.hb-t .hb-fi.hb-fz,.hb-t .hb-fs.hb-fz,
.hb-t .hb-fi:focus,.hb-t .hb-fs:focus{font-size:16px}
/* ★2026-09-05 v73 【長い字の欄】= 折り返して全部見せる欄
   (Makoto「コメントが読みづらい 長いコメントも読んだり書き換えたりしやすいようにして」)。
   1行の欄 (input.hb-fi) は高さ30pxに決まっている ∴ 長い字は右端が「…」で切れ、
   読むにも直すにも 欄の中を横に送るしかなかった (母の PayPay の行= 693字)。
   ∴ leaf が textarea.hb-fi を置いた所だけ【中身の行数ぶんだけ高さが伸びる】。
   見え方 (地・枠・角・字・色) は1行の欄と同じ物を継ぐ = ここで書き足すのは
   「折り返す・伸びる・自分では引き伸ばさせない」の3つだけ。高さを測って書くのは
   箱 (/hubbar.js の hbFldGrow) ∴ leaf は寸法を1行も書かない (v47 の決まりのまま)。 */
.hb-t textarea.hb-fi{height:auto;min-height:var(--tbl-fld-h);padding:5px 4px;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere;overflow:hidden;resize:none;display:block;
  text-overflow:clip}
/* 長い欄が入る行だけ 中身を【上ぞろえ】= 隣の短い欄が高い行の真ん中に浮かない */
table.hb-t.hb-tfields tbody tr:has(textarea.hb-fi) td{vertical-align:top}
/* 入り切らない字は「…」で終える = 枠だけの箱 (.hb-robox) と同じ見え方。
   欄は素のままだと途中でぶつ切れになり「壊れている」ように見える (2026-08-24 v47 実測) */
.hb-t .hb-fs{-webkit-appearance:none;appearance:none;text-align:center;
  text-align-last:center;cursor:pointer}
.hb-t .hb-fs:focus,.hb-t .hb-fi:focus{outline:none;box-shadow:inset 0 0 0 2px #6366f1}
/* 飲まない (0) は地を持たない = 押せる物であることは枠で分かる */
.hb-t .hb-fs.hb-fs-off{background:transparent;box-shadow:inset 0 0 0 1px var(--pnl-grid)}
/* 掴む所。leaf が [data-grip] を書いていればそれを掴む所にする (列の幅を1pxも食わない)。
   書いていない表には ⠿ を1列目の【上に浮かせて】足す = 行の中身の並び方を崩さない */
.hb-t .hb-grip{cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hb-t .hb-grip.hb-grip-own{border-radius:6px;
  background:color-mix(in srgb,currentColor 10%,transparent)}
/* ★2026-08-24 v42 掴む所は【セルの中に字を置かない】(Makoto「表の内容に入力欄以外の文字を書くな」)。
   行の左に空けた30pxの帯に浮かせ、点は絵 (地) で描く。
   leaf が tr に data-no を書いた表 (サプリ) だけ、この帯に行の番号が出る = 番号は
   セルの中身ではなく【行の見出し】。名前の箱の幅を1pxも食わない。 */
.hb-t .hb-grip:not(.hb-grip-own){position:absolute;left:2px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:36px;margin:0;font-size:11px;font-weight:700;line-height:1;z-index:3;
  color:var(--pnl-key);border-radius:6px;
  background-image:radial-gradient(currentColor 1.1px,transparent 1.2px);
  background-size:6px 6px;background-position:center;background-repeat:repeat-y;
  background-clip:content-box;padding:9px 8px}
.hb-t .hb-grip.hb-grip-no{background-image:none;padding:0}
.hb-t tbody td.hb-gripcell{position:relative;padding-left:30px!important}
/* 帯を空けるなら見出しにも空ける (v49)。ここが無いと1列目だけ見出しと欄がずれる */
.hb-t thead th.hb-gutth{padding-left:34px!important}
/* 行を掴んで画面の端まで運んでいる間、画面が弾んで行き先を見失わないようにする */
html.hb-dragging,html.hb-dragging body{overscroll-behavior:contain}
html.hb-dragging{-webkit-user-select:none;user-select:none}

/* ---- 縦の一覧を【つまんで動かす】(2026-08-26 v62 Makoto「ならびかえはつまんでいどう
   できるようにしてよ」) ----
   取っ手 (.hb-hand) は表の掴む所と同じ【点の絵】= 字を1つも増やさない。
   touch-action:none = 取っ手を押さえた指では画面が動かない ∴ 引く/送る が混ざらない。
   掴んでいる間だけ その行が浮いて見える (影 + 差し色) = どれを運んでいるか分かる。 */
.hb-hand{flex:0 0 auto;width:38px;align-self:stretch;min-height:36px;padding:9px 12px;
  border:1px solid var(--pnl-line);border-radius:9px;background-color:transparent;
  color:var(--pnl-key);cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  background-image:radial-gradient(currentColor 1.1px,transparent 1.2px);
  background-size:6px 6px;background-position:center;background-repeat:repeat-y;
  background-clip:content-box}
.hb-hand:active{cursor:grabbing;background-color:color-mix(in srgb,#6366f1 22%,transparent)}
.hb-sorting>.hb-drag{position:relative;z-index:2;border-radius:10px;
  background:color-mix(in srgb,#6366f1 24%,var(--pnl-card));
  box-shadow:0 6px 18px rgba(0,0,0,.45)}

/* ---- 列幅を変えるつまみ = 見出し行だけに立てた縦線 (2026-08-24 母管理パネルで先行・恒久共通化) ----
   Makoto「列幅変えにくい」の直し方。見出しセルの角の小さい取っ手 (旧: サプリの .colgrip 等・
   5通りバラバラだった) は【見出しの高さしか掴めず指で当たらない】のが原因だった。
   ★一度は表の高さいっぱいに伸ばしたが、それだと本文行を横スクロールで流そうとした指も
   境目の近くなら全部つまみに取られ「スクロールのつもりが列幅変更になる」事故が出た
   (母管理パネルで先に発覚・直した)。∴ つまみは【見出し行の高さぶんだけ】。
   本文行 (表の大部分) は掴む場所が一切無い=スクロールだけの領域になり、混ざらない。
   境目の縦線そのもの (罫線) は本文の td/th の border-right でそのまま続くので目印は消えない
   (leaf 側がその罫線を持つ。ここは見出しの取っ手だけを持つ)。
   置き場所 = 表を包む「position:relative な入れ物(host)」の中に、列の境目の位置へ
   1本ずつ置く (高さは leaf が heightOf() で「見出し行の高さ」を渡す)。 */
/* table を包むだけの透明な箱。横スクロールの枠(overflow-x:auto)は外側の親が持つ。 */
/* ---- 表型の雛形が組む大枠 (2026-08-24 v41「共通で使える雛形を作れ」) ----
   幅を決めた表は固定レイアウト = 全行の列が1本の線でそろう。入り切らない字は … で切り、
   押しっぱなしで全文が出る (title は箱が付ける)。
   ★地と字の色は書かない = leaf の持ち物 (明るい地のサプリでも読めるように)。
   貼り付く列の地も leaf が持つ = ここで塗ると 1行おきの色分け(縞)を潰すため。
   塗り忘れ(下が透ける)は パネル内蔵の自己点検が見つけて公開を止める。 */
.hb-t.hb-tfix{table-layout:fixed}
.hb-t.hb-tfix th,.hb-t.hb-tfix td{overflow:hidden;text-overflow:ellipsis}
/* ★2026-08-24 v43 貼り付く列は【必ず sticky】= !important で書く。
   事故: 見出しを押して並べ替えられる列 (.hb-t th.hb-sortable) と leaf の
   `table.t th{position:relative}` がこの規則より強く、2列目以降の貼り付く列が
   relative のまま left:○○px を受け取り【そのぶん右へずれて他の列に重なった】。
   広い窓のサプリ集計タブで 粒数/g数 が 204px/257px 右へ飛び、列が総崩れしていた
   (iPhone幅は貼り付く列が1列に減るので出ない = 窓を広げた時だけ出る型)。
   ∴ 箱が !important で握り、JS もインライン important で押さえる (二重)。 */
.hb-t th.hb-pin,.hb-t td.hb-pin{position:sticky!important;z-index:2}
.hb-t thead .hb-pin{z-index:6}
html.hb-colw,html.hb-colw *{cursor:col-resize;-webkit-user-select:none;user-select:none}
.hb-tempty{padding:36px 0;text-align:center;font-weight:600}
/* ★2026-08-24 v48 入れ物は【表の幅そのもの】まで伸ばす (width:max-content)。
   今まで普通のブロックだったので幅は「画面の幅」で止まり、表だけが外へはみ出していた。
   すると入れ物の中に置く列の境目のつまみが【画面の幅より右へ行けない】=
   横に送らないと見えない列の境目が全部いちばん右に積み上がっていた
   (母管理パネルで実測。Makoto「横スクロールと列幅の調整がおかしい」)。 */
.hb-tinner{position:relative;width:max-content;min-width:100%}
/* ★2026-08-24 v52 【つまみは見出しセルの中】(Makoto「もっとスマートに作れないのか？」)
   v51 までは表に重ねた層 (.hb-rzl) に座標で置いていた ∴ 横に送るたび・幅が変わるたびに
   JS が置き直す必要があり、置き直し漏れが 事故3種 (積み上がる・はみ出す・貼り付く列の上に浮く)
   になっていた。セルの中に入れた今は 列と一緒に動く = 置き直す処理そのものが要らない。
   貼り付く見出し (z-index 6) より下の層 ∴ 流れて行った棒は自分で隠れる。 */
.hb-t thead th{position:relative}
.hb-rz{position:absolute;top:0;right:0;width:14px;height:100%;z-index:3;cursor:col-resize;
  touch-action:none;-webkit-tap-highlight-color:transparent}
.hb-rz::before{content:"";position:absolute;right:4px;top:3px;bottom:3px;width:4px;
  border-radius:2px;background:#7b86a6}
.hb-rz.hb-act::before{background:var(--pink,#e8a0c8);box-shadow:0 0 0 1px var(--pink,#e8a0c8)}
/* 見出しの字がつまみの下へ潜らないよう、つまみのぶんだけ右を空ける */
.hb-t.hb-trz thead th{padding-right:15px}
/* ★2026-08-25 v55 【細い列 (.hb-cnar) は余白を譲る】
   Makoto「最小の列幅は一文字くらいで良い」。セルの左右の余白は 10px+10px、
   見出しはつまみのぶん更に15px ∴ 何も直さずに列を24pxまで細くすると
   【余白だけで35px】= 字が1文字も出ない列になる (細くできても読めない)。
   ∴ 64pxより細い列は 余白を2pxまで詰め、つまみも細くする = 1文字は必ず出る。
   印 (.hb-cnar) を付けるのは箱 (/hubbar.js hbTNarrow) = leaf は書かない。 */
.hb-t th.hb-cnar,.hb-t td.hb-cnar{padding-left:2px;padding-right:2px}
.hb-t.hb-trz thead th.hb-cnar{padding-right:2px}
.hb-t.hb-trz th.hb-sortable.hb-cnar{padding-right:2px!important}
.hb-t th.hb-cnar .hb-rz{width:8px}
.hb-t th.hb-cnar .hb-rz::before{right:2px}
/* ★2026-08-26 td だけでなく【見出しのマスも】詰める。td だけに書いていたので
   細い列は 見出しの字が 3px 右へずれ、公開の自己点検 (F26) が落ちていた。 */
.hb-t .hb-cnar .hb-fi,.hb-t .hb-cnar .hb-fs,.hb-t .hb-cnar .hb-robox{padding:0 1px}
/* 欄の「読める下限96px」も細い列では外す = 列の幅より欄がはみ出さない */
.hb-t td.hb-cnar.hb-edcell>*:has(>.hb-fi)>.hb-fi{min-width:0!important}
.hb-t.hb-trz th.hb-sortable{padding-right:30px!important}
.hb-t.hb-trz th.hb-sortable:after{right:19px}
/* ★2026-08-24 v52 【左に貼り付く列の境目は 表の高さいっぱいの1本の線】
   Makoto「口座サービスの列は縦に棒を全区間つけるのが普通では」。
   掴んで引く所は見出し行の中だけ (本文行まで掴めると 指の横なぞりが列幅変更に取られる)。
   線は貼り付く区画の右端の列だけに引く = 3列貼る表でも内側の境目は細いまま。
   幅に響かない inset の影で描く ∴ 列の寸法は1pxも動かない。 */
.hb-t th.hb-pinend,.hb-t td.hb-pinend{box-shadow:inset -2px 0 0 var(--pnl-pinline,#7b86a6)}
/* 横にずらしている間だけ 貼り付く列の右に落ち影 = 「まだ左に列がある」が分かる */
.hb-scrolled .hb-t th.hb-pinend,.hb-scrolled .hb-t td.hb-pinend{
  box-shadow:inset -2px 0 0 var(--pnl-pinline,#7b86a6),7px 0 9px -7px rgba(0,0,0,.45)}


/* ===== 2026-08-24 v54 【表の見た目】も箱が1枚で決める ==============================
   Makoto「あと表はもう少しデザイン良くしてくれ」

   ■ 直す前の見え方 (母/サプリ 実測)
     ・行の区別が【下線1本】だけ = 横に長い台帳を右まで送ると、どの行を見ているか見失う
     ・マスの中の欄が【地より暗い穴】(--pnl-field #10131a < 表の地 #1d212b) ∴ 表というより
       「穴が並んだ用紙」に見えていた。縦罫と欄の枠が二重に走るので線の本数も多い
     ・見出し行と本文の境が 本文どうしの区切りと同じ太さ1px = 見出しが見出しに見えない
     ・横に送る棒 (スクロールバー) が端末既定の太い灰色
   ■ v54 の決まり
     ① 1行おきの色分け (縞) は箱が持つ。貼り付く列も【同じ濃さの不透明な色】を持つ
        = 横に送っても縞が途切れない (貼り付く列は下が透けてはいけないので混ぜて作る)
     ② マスの欄は【穴】をやめて【薄い枠の札】= 縞が欄の下を通って見える。
        押している間だけ地が入り差し色の枠が出る = どこを打っているかが一目で分かる
     ③ 見出し行の下だけ 2px の線 (差し色を混ぜた色) = 見出しと中身が分かれる
     ④ 縦の細罫は本文だけ薄くする (欄の枠と二重に見えない)。見出しはそのまま
     ⑤ 横に送る棒は細い丸棒。器には落ち影を1枚
   ■ 色は【地・罫線・棒】だけ = 字は 2026-08-04 の決まり通り --pnl-ink / --pnl-key のまま
     (中間の灰色を字に使わない)。
   ■ leaf は書くな = ここが唯一の持ち主。書いた分は次の公開で剥がれる。
   ================================================================================= */
:root{
  --tbl-zebra:color-mix(in srgb,var(--pnl-ink) 5.5%,transparent);          /* 1行おきの地 */
  --tbl-zebra-pin:color-mix(in srgb,var(--pnl-ink) 5.5%,var(--pnl-card));  /* 同・貼り付く列 (不透明) */
  --tbl-hover:color-mix(in srgb,var(--pnl-ink) 7%,transparent);          /* 指・カーソルが乗った行 */
  --tbl-hover-pin:color-mix(in srgb,var(--pnl-ink) 7%,var(--pnl-card));
  --tbl-vline:color-mix(in srgb,var(--pnl-grid) 50%,transparent);        /* 本文の縦の細罫 */
  --tbl-boxline:color-mix(in srgb,var(--pnl-ink) 16%,transparent);       /* 欄の枠 */
  --tbl-headline:color-mix(in srgb,var(--pnl-accent) 42%,var(--pnl-line)); /* 見出しの下の線 */
}
/* ① 1行おきの色分け。貼り付く列 (.hb-pin) は透けてはいけないので混ぜた不透明色を当てる。
   .hb-t td.hb-pin{background:var(--pnl-card)} より強い書き方 = 縞が貼り付く列で切れない */
.hb-t tbody tr:nth-of-type(even)>td{background:var(--tbl-zebra)}
.hb-t tbody tr:nth-of-type(even)>td.hb-pin{background:var(--tbl-zebra-pin)}
/* 指を離しても残る「乗っている」印は触る端末では邪魔なので、本物のカーソルがある時だけ */
@media (hover:hover) and (pointer:fine){
  .hb-t tbody tr:hover>td{background:var(--tbl-hover)}
  .hb-t tbody tr:hover>td.hb-pin{background:var(--tbl-hover-pin)}
}
/* 押している行 (打ち込んでいる欄の在る行) は差し色をうっすら敷く = 今どの行に居るかが分かる */
.hb-t tbody tr:focus-within>td{background:color-mix(in srgb,var(--pnl-accent) 12%,transparent)}
.hb-t tbody tr:focus-within>td.hb-pin{background:color-mix(in srgb,var(--pnl-accent) 12%,var(--pnl-card))}

/* ③ 見出し行の下だけ 2px = 見出しと中身が分かれて見える */
table.hb-t thead th{border-bottom:2px solid var(--tbl-headline)}
table.hb-t thead th{letter-spacing:.03em}
/* ④ 縦の細罫は本文だけ薄く (欄の枠と二重に走らない)。見出しは列の切れ目が要るのでそのまま */
table.hb-t tbody td{border-right:1px solid var(--tbl-vline)}
table.hb-t tbody td:last-child{border-right:0}

/* ② 欄は【穴】ではなく【薄い枠の札】= 行の色分けが欄の下を通って見える。
   押している間だけ地と差し色の枠が出る (打っている場所が一目で分かる)。
   寸法 (高さ30px・字16px・角8px) は v44 の値を1pxも動かさない = 行の高さは変わらない。 */
.hb-t .hb-fs,.hb-t .hb-fi{background:transparent;
  box-shadow:inset 0 0 0 1px var(--tbl-boxline)}
.hb-t .hb-robox{box-shadow:inset 0 0 0 1px var(--tbl-vline)}   /* 直せない値は もっと控えめ */
@media (hover:hover) and (pointer:fine){
  .hb-t .hb-fi:hover,.hb-t .hb-fs:hover{background:color-mix(in srgb,var(--pnl-ink) 6%,transparent)}
}
.hb-t .hb-fs:focus,.hb-t .hb-fi:focus{background:var(--pnl-field);
  box-shadow:inset 0 0 0 2px var(--pnl-accent)}
.hb-t .hb-fs.hb-fs-off{background:transparent;box-shadow:inset 0 0 0 1px var(--tbl-vline)}

/* ⑤ 器 = 落ち影を1枚。横に送る棒は細い丸棒 (端末既定の太い灰色をやめる) */
.hb-twrap{box-shadow:0 10px 26px -20px rgba(0,0,0,.85)}
.hb-twrap{scrollbar-width:thin;scrollbar-color:var(--pnl-line) transparent}
.hb-twrap::-webkit-scrollbar{height:8px}
.hb-twrap::-webkit-scrollbar-track{background:transparent}
.hb-twrap::-webkit-scrollbar-thumb{border-radius:99px;
  background:color-mix(in srgb,var(--pnl-ink) 22%,transparent)}
.hb-twrap::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--pnl-ink) 34%,transparent)}
/* 列幅を変える棒 = 主張しすぎない太さにして、触れた時だけ差し色で立つ */
.hb-rz::before{right:4px;width:3px;background:color-mix(in srgb,var(--pnl-ink) 30%,transparent)}
.hb-rz:hover::before{background:color-mix(in srgb,var(--pnl-ink) 55%,transparent)}
.hb-rz.hb-act::before{background:var(--pnl-accent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pnl-accent) 60%,transparent)}
/* 器の角が丸いパネル (サプリ等) では 表の四隅も器の丸みに合わせる */
.hb-twrap>.hb-tinner>table.hb-t>thead>tr>th:first-child{border-top-left-radius:var(--tbl-radius)}
.hb-twrap>.hb-tinner>table.hb-t>thead>tr>th:last-child{border-top-right-radius:var(--tbl-radius)}
.hb-twrap>.hb-tinner>table.hb-t>tbody>tr:last-child>td:first-child{border-bottom-left-radius:var(--tbl-radius)}
.hb-twrap>.hb-tinner>table.hb-t>tbody>tr:last-child>td:last-child{border-bottom-right-radius:var(--tbl-radius)}
/* 行の名前が並ぶ【貼り付く列】は字を太く = 横に送っている間の道しるべになる */
.hb-t tbody td.hb-pin .hb-fi,.hb-t tbody td.hb-pin .hb-edtx{font-weight:700}

/* ★2026-08-25 【消すボタンの赤】を最後にもう一度置く = 実際に赤で出させるため。
   .hub-bar .hb-danger だけだと、上の「タブの地色」(.hub-bar .hb-btn:not(#hub-back)…) の方が
   :not(#…) の分だけ強く、あとから書かれている ∴ 押せる物の印 (hb-btn) が付いた瞬間に
   赤が地色で塗り潰されていた (実測: /req/ の ✕ は 表に出た瞬間だけ普通の灰色に戻る)。
   同じ書き方に .hb-danger を足して並べ直す = 印が付いても赤のまま。
   色は暗い地の上で読める明るさ (2026-08-04 薄い字の禁止)。 */
.hub-bar .hb-btn.hb-danger:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn):not([data-hubbar-reload]),
.hub-bar .hb-danger{
  background:rgba(224,85,85,0.20)!important; color:#ffb9b9!important;
  border:1px solid rgba(224,85,85,0.62)!important; box-shadow:none!important; }

/* ===== 2026-08-25 v56 下タブの【リスト版】================================
   Makoto「最下部のボタンをリスト版に変えて」。
   横に並べたタブが入り切らない帯は、これまで【その中だけ横スクロール】にしていた。
   母管理パネルの実測 (390x844) では 8本のうち画面に出るのは3本だけで、
   残りは指で払わないと在ることに気付けない = どの分類が有るのか一目で分からない。
   ∴ 最下段には【いま選んでいる名前】を1つだけ出し、押すと帯の上に縦のリストが開いて
   全部の名前が一度に見える形にする。押して選べば閉じる。
   使うパネルはタブ帯に data-hb-list="1" と書くだけ = 形も色もここ (箱) の持ち物。
   窓が上へ開けるのは 最下段が overflow:visible だから (v16 からの決まり)。 */
.hub-bar .hb-listwrap{flex:1 1 auto!important;min-width:0!important;position:relative!important;
  display:flex!important;align-items:center!important;background:transparent!important;border:0!important}
/* 帯に出す1枚 = 段いっぱいに広げ、名前は左・▾ は右 */
.hub-bar .hb-btn.hb-listbtn:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn):not([data-hubbar-reload]){
  flex:1 1 auto!important;width:100%!important;min-width:0!important;max-width:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:space-between!important;
  gap:8px!important;overflow:hidden!important}
.hub-bar .hb-listbtn .hb-listnow{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-align:left;font-size:14px!important;font-weight:700!important}
.hub-bar .hb-listbtn .hb-listcar{flex:0 0 auto;font-size:12px!important;font-weight:700!important;
  transition:transform .16s}
.hub-bar.hb-list-open .hb-listbtn .hb-listcar{transform:rotate(180deg)}
/* 開いている間は「選ばれている物」と同じ見え方 = どこを開いているか分かる */
.hub-bar.hb-list-open .hb-btn.hb-listbtn:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn):not([data-hubbar-reload]){
  background:var(--hb-tab-on-bg)!important;color:var(--hb-tab-on-fg)!important;
  border:1px solid var(--hb-tab-on-bd)!important}
/* 外を押したら閉じる受け皿 (帯より下の層・帯の中に置くので帯の重なり順を崩さない) */
.hub-bar .hb-listscrim{position:fixed!important;inset:0!important;z-index:1!important;
  background:rgba(0,0,0,0.28)!important;border:0!important}
/* 開く窓 = 帯【まるごと】の上。段の高さには数えない (流れの外に出す)。
   位置は箱が持っている帯の丈の式 (--hb-h) から決める = 段が増えても数字を直さない。
   ★ position:fixed = 帯 (fixed) の中に居ても画面を基準にできる ∴ 一番上の段
   (操作の段) に被せずに 帯の真上へ出せる。 */
.hub-bar .hb-listpanel{position:fixed!important;left:12px!important;right:auto!important;
  width:min(420px,calc(100vw - 24px))!important;
  bottom:calc(var(--hb-h) + 8px)!important;z-index:2!important;
  max-height:min(62vh,420px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  background:#161922!important;border:1px solid rgba(255,255,255,0.14)!important;
  border-radius:14px!important;padding:6px!important;
  box-shadow:0 18px 40px -12px rgba(0,0,0,0.75)!important}
.hub-bar .hb-listpanel[hidden],.hub-bar .hb-listscrim[hidden]{display:none!important}
/* 中のタブ帯 = 横並びをやめて縦に積む (元は .hb-tabs = 横スクロールの箱) */
.hub-bar .hb-tabs.hb-listbox{flex-direction:column!important;align-items:stretch!important;
  flex-wrap:nowrap!important;height:auto!important;max-height:none!important;
  overflow:visible!important;gap:4px!important}
/* 1行 = 窓いっぱい・字は左寄せ。高さは段のボタンより一回り大きい (指で押す行)。
   ★幅の指定には :not(#…) を4つ足す = 上の「ボタンは中身なりの幅 (width:auto!important)」と
   同じ重みにしないと効かず、行が字の幅のまま真ん中に浮く (実測 60px・中央)。 */
.hub-bar .hb-tabs.hb-listbox>a,.hub-bar .hb-tabs.hb-listbox>button,.hub-bar .hb-tabs.hb-listbox>div{
  width:100%!important;max-width:none!important;flex:0 0 auto!important;align-self:stretch!important}
.hub-bar .hb-listbox>.hb-btn:not(#hub-back):not(#hub-reload):not(#pf-refresh-btn):not(#mini-refresh-btn):not([data-hubbar-reload]){
  width:100%!important;max-width:none!important;min-width:0!important;flex:0 0 auto!important;
  align-self:stretch!important;
  height:42px!important;min-height:42px!important;max-height:42px!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  text-align:left!important;border-radius:10px!important}

/* ---- 保存の状態を出す札 (2026-08-26 v61・Makoto「編集したものが保存されてない」) ----
   打った物が Mini に届かなかった時、これまでは画面が何も言わなかった
   ∴ 本人は保存できたと思い、次に開くと消えていた。
   届かない間はここが赤く出続ける = 黙って落ちることが起こせない。
   字は必ず白 (#fff) の帯 = 薄い字の禁止 (2026-08-04) に触れない。 */
.hb-save{position:fixed;left:12px;z-index:9999;
  bottom:calc(var(--hb-h,0px) + env(safe-area-inset-bottom,0px) + 12px);
  max-width:calc(100vw - 24px);
  padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:700;line-height:1.3;color:#fff;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.7);pointer-events:none}
.hb-save[hidden]{display:none}
.hb-save.busy{background:#334155}
.hb-save.ok{background:#15803d}
.hb-save.ng{background:#b91c1c;pointer-events:auto}