[x-cloak] { display: none !important; }

/* ここにあった `html.tw-loading body { visibility: hidden }` は
   2026-08-11 に落とした。Tailwind を **手元で焼いて配る**ようにしたので、
   「CSS が組み上がるまで画面を隠す」仕掛けごと要らなくなったため
   （Play CDN 版のころは、画面を開くたびに 0.8〜1.7 秒まっ白だった）。
   **画面を白くできる規則を、二度と足さないこと。** */

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
}

/* ────────────────────────────────────────────────────────────
   文字の大きさ（小・普通・大・特大）。**実寸を持つのはここだけ。**

   語彙（どんな段階があるか）と「誰の設定を使うか」はサーバー側で決める。
   `<html data-ui-scale="…">` は `base.html` がサーバー側で書く。

   Tailwind は**文字も余白も rem** なので、根っこを動かすだけで
   文字・ボタン・入力欄・チェックボックス・行の高さが揃って大きくなる。
   年配の方には、読めることと同じくらい**押す的が大きくなる**のが効く。

   **`px` ではなく `%` で書く。** ブラウザや OS の側で既定の文字を大きく
   している人がいる —— `16px` と書くとその指定を打ち消してしまう。
   % なら掛け算になるので、その人には「大きめ ×大」で効く。

   **「普通」（m）には規則を置かない**（同じ理由。書くと打ち消しになる）。
   書き忘れ・書きすぎは `ui_scale.check_css()` が起動時に落とす。
   ──────────────────────────────────────────────────────────── */
html[data-ui-scale="s"]  { font-size: 93.75%; }   /* 既定 16px なら 15px */
html[data-ui-scale="l"]  { font-size: 112.5%; }   /*      〃      18px */
html[data-ui-scale="xl"] { font-size: 131.25%; }  /*      〃      21px */

/* 印刷は据え置き。**帳票の寸法はサーバー側が pt と mm で決めて
   いて、そちらに文字の大きさの設定が既にある**（紙は紙の都合で決まる）。
   `cards/print.html` も `cards/report.html` も base.html を継承しているので、
   ここで戻さないと画面の設定が紙まで付いてくる。
   **上の規則と同じ強さ**（`html[…]`）で書くこと —— `html` だけだと負ける */
@media print {
  html[data-ui-scale] { font-size: 100%; }
}

/* `text-[Npx]` の直書きは rem ではないので、上の規則では伸びない
   （ナビの小さいラベルやバッジ、一覧の本文など約 210 か所・7 種類）。
   rem に読み替えて、ほかと一緒に大きくなるようにする。
   **普通（16px）ではちょうど元の px** になるので、見た目は今までどおり。

   Tailwind の側にも同じ名前の規則があるので、**`html` を付けて強さで
   勝たせる**（付けないと黙って負ける）。焼いた `tailwind.css` を先に
   読むようにしたので順番でも勝つが、**順番に頼らない形は崩さない**

   ★ **13px は 2026-08-26 に足した。それまで漏れていた。**
     `text-[13px]` は**一覧の表の本文**（design-system §7）で、
     **この製品でいちばん長く眺める文字**。読み替えが無かったので、
     「文字の大きさ」を大・特大にしても**1px も動かず**、
     特大では**見出し（12px → 15.75px）の方が本文（13px）より大きくなって
     逆転していた**（実測）。この製品の決まりが「px の直書きはこの拡大に
     付いてこない」と、まさにこの値を名指しで警告していたところ。
     **普通では 1px も変わらない**ので、いまの画面は 1 つも動かない。

   ★ **顔ぶれをここに書き並べない。** 見張りが**画面の実物から
     `text-[Npx]` を集めて**、読み替えの無いものを赤くする（13px を直した回に、
     7 / 8 / 9 / 12px も一緒に出てきた）。**新しい px を書いたら、その場で
     気づける。** */
html .text-\[7px\]  { font-size: 0.4375rem; }
html .text-\[8px\]  { font-size: 0.5rem; }
html .text-\[9px\]  { font-size: 0.5625rem; }
html .text-\[10px\] { font-size: 0.625rem; }
html .text-\[11px\] { font-size: 0.6875rem; }
html .text-\[12px\] { font-size: 0.75rem; }
html .text-\[13px\] { font-size: 0.8125rem; }

/* スクロールバー軽量化 */
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* 計算式の結果が変わったときの合図。数字だけ差し替わると
   変わったことに気づけないので、一瞬だけ色を差す */
.cardf-calc-flash {
  background-color: #eef2ff;   /* indigo-50 */
  transition: background-color 0.4s ease-out;
}

/* 明細の行をドラッグで入れ替えるとき（SortableJS）。
   つかむのは左端のハンドルだけ。セルのクリック編集と取り合いにならないようにする */
.cards-drag { cursor: grab; touch-action: none; }
.cards-drag:active { cursor: grabbing; }
.cards-row-ghost { opacity: 0.35; }
.cards-row-ghost > td { background-color: #eef2ff; }   /* indigo-50 */
.cards-row-chosen > td { background-color: #eef2ff; }

/* 会員サイトのページの部品を、つまんで並べ替えるとき（SortableJS）。
   **表ではない**ので `.cards-row-ghost > td` の規則は 1 つも当たらない。
   落とし先が線で見えるように、影ではなく破線の枠で示す */
.mpd-ghost { opacity: .4; outline: 2px dashed #6366f1; outline-offset: -2px; }  /* indigo-500 */
.mpd-chosen { background-color: #eef2ff; }                                      /* indigo-50 */

/* 行が増えたときの合図。表の下の方に足すと、増えたことに気づきにくい */
.cardf-row-flash > td { animation: cardf-row-flash 1.2s ease-out; }
@keyframes cardf-row-flash {
  from { background-color: #d1fae5; }   /* emerald-100 */
  to   { background-color: transparent; }
}

/* パレットから部品をドラッグしているときの、指の下の分身と落とし先の枠。
   カードの設計モードとホーム画面の設計モードで共有（palette-drag.js） */
.palette-ghost {
  position: fixed; z-index: 70; pointer-events: none;
  padding: 4px 10px; border-radius: 6px; font-size: 12px;
  background: #eef2ff; color: #4338ca;           /* indigo-50 / indigo-700 */
  border: 1px solid #6366f1;                      /* indigo-500 */
  box-shadow: 0 8px 20px rgb(0 0 0 / .18);
}
.palette-spot {
  position: absolute; z-index: 5; pointer-events: none; display: none;
  border: 2px dashed #6366f1; background: rgb(99 102 241 / .10);
  border-radius: .5rem;
}

/* 待ちの帯 —— **割合が分からない待ち**のためのバー（upload.js の ⑤）。

   1 回の POST の中でサーバーが処理している間は、途中経過を返す口が無いので
   **何 % 終わったかは原理的に出せない**。左右に流れる帯にすることで
   「動いている」ことだけを言い、**満杯にはしない** ——
   伸びて止まるバーは嘘になる（開設のウィザードで先に決めた線と同じ）。

   `prefers-reduced-motion` を尊重する（動きが苦手な方の設定を上書きしない）。
   止めたときも帯は見えるので、待っていることは伝わる。 */
@keyframes card-busy-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(420%); }
}
.card-busy-bar { animation: card-busy-slide 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .card-busy-bar { animation: none; }
}

/* カーソルで囲んで選ぶときの帯（`static/js/grid-select.js`）。

   **部品そのものの見た目なので、置き場所はここ 1 箇所。**
   使う画面が 2 枚（カードの設計モード・印刷レイアウトの設計）あり、
   ページのテンプレートに 2 つ持つと、片方を直した日にもう片方だけ古くなる。

   置かれる先は `hostEl`（呼ぶ側が渡す箱）なので、その箱に `relative` が要る。
   `z-index` は**印刷レイアウトの飾りの層（3）より上**にしてある ——
   下だと、囲んでいる最中の帯が横線や囲み枠に隠れて見えない。
   選ばれている印（`is-picked`）は画面ごとに当てる先が違うので、そちらは各ページ。 */
.grid-select-band {
  position: absolute; z-index: 5; pointer-events: none;
  border: 1px solid #6366f1;               /* indigo-500 */
  background: rgb(99 102 241 / 0.10);
  border-radius: 4px;
}

/* ────────────────────────────────────────────────────────────
   見出しの帯を折りたたむ（markup は `_page_head.html`、動きは
   `static/js/head-fold.js`）。

   **畳んだ姿を持つのはここだけ。** JS が足すのは `<html>` の印 2 つで、
   「何を隠すか」「余白をいくつにするか」を 1 行も持たない ——
   Tailwind は焼いて配るので、JS が実行時に組み立てたクラス名は
   1 つも生成されないため（`static/js/copy.js` と同じ決まり）。

     head-fold-on … この係が生きている（ボタンを出してよい）
     head-folded  … いま畳んでいる

   ★ **ちらつかない。** 印は `<head>` の時点で付くので、
   一度 開いた帯が出てから縮む、が起きない。

   ★ **畳むのは画面だけ**（規則ぜんぶ `@media screen` の中）。
   紙には元の帯がそのまま出るので、打ち消しを 1 行も書かずに済む。

   ★ **隠すのは 2 つだけ** —— アイコンの丸と、説明の文。
   **戻り先（パンくず）と「この画面の使い方」は残す。**
   下の画面（新規登録など）では**パンくずが唯一の戻り道**で、
   隠すとその画面から戻れなくなる。残りは 1 行に並べるので、
   隠したときと高さは変わらない。

   ★ **数字は rem。** 文字の大きさ（小・普通・大・特大）と一緒に伸びる。
   ──────────────────────────────────────────────────────────── */

/* ボタンの既定は「出さない」。この係が読まれた画面でだけ出す ——
   **押しても何も起きないボタンを画面に出さない**（`copy.js` と同じ形）。
   媒体の外に置くので、紙にも出ない。 */
html [data-head-fold] { display: none; }

@media screen {
  html.head-fold-on [data-head-fold] {
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* `py-3.5`（0.875rem）→ 0.25rem */
  html.head-folded [data-head-inner] {
    padding-top: .25rem; padding-bottom: .25rem;
  }
  html.head-folded [data-head-icon],
  html.head-folded [data-head-sub]   { display: none; }

  /* 残ったもの（戻り先・見出し・使い方）を 1 行に並べる。
     `min-width: 0` は `truncate` を効かせるため（flex の子には要る） */
  html.head-folded [data-head-text] {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  }
  html.head-folded [data-head-title] {
    font-size: .875rem; line-height: 1.25rem; min-width: 0;
  }
  html.head-folded [data-head-note]  { margin-top: 0; }
  html.head-folded [data-head-fold] i { transform: rotate(180deg); }

  /* 本文の上の余白も詰める。

     ★ **`+ main` で絞るのが要点。** ここを `html.head-folded main` と書くと、
     帯を持たない画面（ログイン・印刷・設計モードなど）でも余白が縮み、
     **押した覚えのない画面が変わる** —— とくにログインの 5 枚は
     `min-h-screen flex items-center justify-center` で上下の余白を持たない
     ので、当てると中央寄せがずれる。帯は `<main>` のすぐ上に置かれるので、
     隣接兄弟で「帯がある画面だけ」に当たる。
     **下の余白は触らない** —— 画面の高さをその場で実測して詰める作りの
     ページが、下の余白を数に入れているため。 */
  html.head-folded [data-page-head] + main { padding-top: .5rem; }
}

/* ────────────────────────────────────────────────────────────
   狭い画面の入力欄は、16px を下回らせない（2026-08-16）。

   iOS Safari は **文字が 16px 未満の欄に触ると、画面ごと拡大する**。
   そのぶん右端が画面の外へ出るので、**すぐ横の「送信」や「保存」が
   押せなくなる**（社内チャットで実際に起きて、利用者から指摘された）。
   この製品の欄はほとんどが `text-xs`（12px）／`text-sm`（14px）なので、
   **どの画面のどの欄に触っても同じことが起きていた。**

   ★ **`max(16px, 1rem)`。素の `16px` にしない。**
   1rem は「文字の大きさ」（小・普通・大・特大）で伸びるので、これなら
   **下は 16px で止め、上は今までどおり付いてくる**（小 16 ／ 普通 16 ／
   大 18 ／ 特大 21）。**`text-base`（＝1rem）では足りない** ——
   「小」は根っこが 15px なので、**1rem = 15px で また拡大する**。

   ★ **ビューポートで拡大を禁じない**（`maximum-scale=1`）。指で広げて
   読む道を塞ぐことになり、この製品が文字の大きさを 4 段持っている理由と
   正面からぶつかる。**直すのは欄の側**。

   ★ **既に 16px 以上のものは触らない**（`text-lg` 以上を外す）。当てると
   **6 桁の確認コードやメモの表題が縮む** —— 押した覚えのない画面が変わる。
   外した 4 つより大きい指定（`text-[20px]` など）を欄に付けると、ここが
   黙って縮めるので、**見張りが「欄に 1rem 以上の指定が無いか」を数える**。

   ★ **文字を打たない欄は外す**（チェック・ラジオ・ファイル・スライダー・
   色・ボタン）。あれらは拡大の対象ではないし、当てると「ファイルを選ぶ」
   ボタンの大きさが変わる。

   ★ **`:disabled` も外す。** 拡大が起きるのは**触ったとき**で、
   触れない欄では起きない —— 得るものが無いのに、設計モードの見本の欄
   （19 個ぜんぶ `disabled`）が升目からはみ出す（実測で 3px、10 個）。
   **`readonly` は外さない**（触れて拡大するので）。

   ★ **境目は 640px**（Tailwind の `sm:` と同じ）。ここは素の CSS なので
   `sm:` が書けない —— **数を持つのはこの 1 箇所だけ**にする。

   ★ **紙には当てない**（`@media screen` の中）。紙の寸法はサーバー側が
   pt と mm で決めている。
   ──────────────────────────────────────────────────────────── */
@media screen and (max-width: 639.98px) {
  textarea:not(:disabled):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl),
  select:not(:disabled):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl),
  input:not(:disabled):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl) {
    font-size: max(16px, 1rem);
  }
}

/* ────────────────────────────────────────────────────────────
   カード 1 枚の画面だけ、値を大きく（2026-08-26）。

   利用者からのご指摘 ——「**値の文字が小さい**ので、実際に使う方にとっては、
   老眼で見にくいかもしれません」「**背景の薄いグレーのところの余白が多い**」。

   数えたら、**いちばん読む場所がいちばん小さかった** —— 一覧の表のセルは
   `text-[13px]`（design-system §7）なのに、カードの値は `text-xs`（12px）。
   しかも升目は 68px 固定なので、中身 48px との差 20px が薄いグレーの
   下に余っていた。**文字を上げると、その空きも一緒に埋まる**。

   ★ **14px にした理由**（2026-08-26 の夕方。いちど 16px にしてから下げた）——
     利用者からのご指摘「**他の箇所の文字の 12px と、16px との差がありすぎる**」。
     カードの外（一覧・帳票・管理の画面）はぜんぶ 12〜13px なので、
     ここだけ 16px だと**画面を移るたびに文字の大きさが変わって見える**。
     14px なら一覧の本文（13px）の隣に置いても自然で、それでも 12px より
     はっきり読める。**もっと大きくしたい方は「文字の大きさ」を大・特大に
     すればよい**（そのための設定が既にある）—— 既定を上げすぎない。

   ★ **狙うのは `.card-grid` の中だけ。** あれは `_layout.html` の
     `render_layout()` が出すクラスで、通るのは `record.html`（閲覧・編集）と
     `_row_card.html`（明細の行カード）だけ。**設計モードには 1 件も無い**ので、
     `.grid-stack-item-content`（中身 52px・`overflow: hidden`）から
     はみ出して枠が切れる心配が構造的に無い（design.html:2074 が前に踏んだ形）。

   ★ **`@media screen` に閉じる。** 紙（`print.html`）も同じ `.card-grid` を
     使うので、囲まないと A4 の紙まで大きくなる。見出しの帯の畳みと同じ作法。

   ★ **`line-height` も一緒に書く。** Tailwind の `.text-xs` は
     `font-size:.75rem; line-height:1rem` の**2 つ**を持つので、font-size だけ
     上げると 14px の文字が 16px の行に詰まる。**`.text-sm` と同じ組**
     （`.875rem` / `1.25rem`）にそろえる —— 片方だけ書き換えない。

   ★ **項目名にも同じだけ字下げする。** 値は入力欄と同じ寸法
     （枠 1px ＋ 内側 8px）の中に入るので、足さないと項目名と値の左端が
     9px ずれて読みにくい。

   ★ **rem で書く**（px 直書きにしない）。「小・普通・大・特大」の設定に
     付いてこなくなる。升目（`4.25rem`）も余白も rem なので、どの段でも
     比率が保たれる。

   ★ **値そのものは、明細の表と逆引きの表では 12px のまま**（`cell_body` の
     別の枝で `.card-val` の印を通らない）。表は詰めて見せるものなので、
     そこは上げない。**上げるのは 11px の側だけ**（下記）。

   ★ **11px は、カードの画面のどこにも残さない**（2026-08-26 に足した）。
     `.card-val` の中だけを 12px にしていたので、**表の側に 11px が
     取り残されていた** —— 逆引きの項目名・逆引きの表の見出し・明細の
     項目名・明細の選択肢のチップ・明細の行番号の 5 つ（実測）。
     とくに**明細の表の見出しは 12px なのに、逆引きだけ 11px**で、
     同じカードの中で食い違っていた。`.card-val` を外して
     `.card-grid` の中の 11px を丸ごと 12px にすると、
     **前回「項目名は 12px」と決めた線が、表の側にもそのまま届く**。

   ★ **`text-[10px]` / `text-[9px]` は触らない。** 中身はアイコン
     （ドラッグの点々・矢印・リンクの印）・小さなバッジ（必須・キー・編集中）・
     破線の「＋行を追加」で、**どれも値ではない**。しかも後者 2 つは
     design-system §2-6 / §3 の全画面共通のパターンなので、ここで動かすと
     カードの中だけ別の大きさになる。

   ★ **表の側は 11px → 12px でも升目が伸びない。** 明細も逆引きも
     `flex-1 min-h-0 overflow-auto` の中なので、中身が伸びても
     **箱の中で流れるだけ**（実測でチップは 2px 高くなるが、升目は 68px のまま）。

   ★ **選択肢のチップは 12px まで。13px 以上にしない**（実測）。
     チップは `px-2 py-0.5 border` の箱に入っているので、文字 1px の差が
     箱の高さ 2px になる。`grid-auto-rows: minmax(4.25rem, auto)` の `auto` が
     伸びたぶんを吸うので**切れはしない**が、**その行がまるごと下へ伸びて、
     設計で置いた位置と少しずつずれる**。

   ★ **12px でも、チップのあるセルは 1.5px 伸びる**（2026-08-26 に測り直した。
     顧客管理の「継続中 ON」で 68 → **69.5px**）。**これは受け入れる** ——
     切れていない（あふれ 0）し、ずれるのは 1.5px で、どの項目がどこに並ぶかは
     1 つも変わらない。**升目（68px）と設計モード（`cellHeight: 80` /
     `margin: 6`）は `grid-auto-rows = cellHeight - gap` の式で対**なので、
     ここを合わせるために升目を動かさない。
     （足した日は「12px なら 68px にぴったり」と書いていたが、
     測ったのがチップを持たない社員名簿だった —— **1 枚で測って言い切らない**）
   ──────────────────────────────────────────────────────────── */
@media screen {
  .card-grid .card-lbl { font-size: .75rem; padding-left: .5rem; padding-right: .5rem; }
  .card-grid .card-val .text-xs { font-size: .875rem; line-height: 1.25rem; }
  .card-grid .text-\[11px\] { font-size: .75rem; }
}

/* ────────────────────────────────────────────────────────────
   共有リンクの印刷レイアウト（`public/share_print.html`）を
   狭い画面で横に流す。

   A4 の紙は 210mm（約 794px）で、375px の画面には入らない。
   **紙の寸法は 1 ミリも変えない**（`print_layout` が持つ数が答えで、
   ここで縮めると「印刷すると A4 に収まる」が嘘になる）——
   代わりに**箱の中で横に動かす**。

   ★ `transform: scale()` は採らない。あれは見た目だけ縮めるので
     **高さの箱は縮まず、紙の下に大きな余白が残る**。
   ★ `@media screen` の中に置く —— 紙には 1 文字も効かせない
     （`print_styles` の `@media print` が `.pl-page` の幅を
     `@page` の箱に任せている）。
   ──────────────────────────────────────────────────────────── */
@media screen {
  .pl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ────────────────────────────────────────────────────────────
   上部の帯の区切りも、文字の大きさに合わせてずらす（2026-09-26）。

   画面の幅の区切り（Tailwind の md / lg / xl）は **px** なので、ファイルの先頭で
   文字を大きくしても**区切りは据え置きのまま中身だけ太る**。特大の 768px は、
   ふつうの大きさでいう 585px（スマホの幅）と同じ広さしかない ——
   アイコンだけに畳んでも、帯が右の横断検索の箱の下へ潜っていた（実測）。

   だから帯まわりの区切りだけ、**文字の大きさの倍率（ファイルの先頭）をそのまま掛けてずらす**:

                 帯を出す（md）   見出しを出す（lg）   先に畳む見出しを出す（xl）
       普通          768px            1024px              1280px
       大 ×1.125     864px            1152px              1440px
       特大 ×1.3125  1008px           1344px              1680px

   ずらした範囲では、帯は ≡ のドロワーへ（スマホと同じ）。横断検索の箱は
   入るので残す。目印は `base.html` / `_nav_label.html` / `_cross_search.html` の
   `data-nav-bp`。**横断検索の箱の幅**（`w-32 xl:w-44 2xl:w-52` ＝ 8 / 11 / 13rem）
   の区切りも同じ倍率でずらす —— 据え置くと、箱だけ先に広がって帯の見出しを
   押し縮める（特大の 1344〜1679px で実測）。

   ★ **文字の大きさの % を変えたら、ここの数字も同じ倍率で直す**（上部メニューの
     見張りの ⑫ が突き合わせる）。この規則はファイルの**末尾**に置く —— 畳む帯の
     見張りが「最初の @media screen より前に既定の規則がある」を数えている。
   ★ **強さで勝つ**（`html[…] [data-nav-bp]`）—— Tailwind の `md:flex` などに
     順番で勝とうとしない。
   ★ ドロワーは閉じているあいだ Alpine が `style="display:none"` を付けるので、
     ここで `display:block` にしても**開くまでは出ない**。
   ──────────────────────────────────────────────────────────── */
@media screen and (min-width: 768px) and (max-width: 863.98px) {
  html[data-ui-scale="l"] [data-nav-bp="bar"]    { display: none; }
  html[data-ui-scale="l"] [data-nav-bp="burger"] { display: block; }
  html[data-ui-scale="l"] [data-nav-bp="drawer"] { display: block; }
}
@media screen and (min-width: 768px) and (max-width: 1007.98px) {
  html[data-ui-scale="xl"] [data-nav-bp="bar"]    { display: none; }
  html[data-ui-scale="xl"] [data-nav-bp="burger"] { display: block; }
  html[data-ui-scale="xl"] [data-nav-bp="drawer"] { display: block; }
}
@media screen and (max-width: 1151.98px) {
  html[data-ui-scale="l"] [data-nav-bp="lg"] { display: none; }
}
@media screen and (max-width: 1343.98px) {
  html[data-ui-scale="xl"] [data-nav-bp="lg"] { display: none; }
}
@media screen and (max-width: 1439.98px) {
  html[data-ui-scale="l"] [data-nav-bp="xl"] { display: none; }
}
@media screen and (max-width: 1679.98px) {
  html[data-ui-scale="xl"] [data-nav-bp="xl"] { display: none; }
}
/* 横断検索の箱（2xl は 1536px → 大 1728px ／ 特大 2016px） */
@media screen and (max-width: 1439.98px) {
  html[data-ui-scale="l"] [data-nav-bp="search"] { width: 8rem; }
}
@media screen and (min-width: 1440px) and (max-width: 1727.98px) {
  html[data-ui-scale="l"] [data-nav-bp="search"] { width: 11rem; }
}
@media screen and (max-width: 1679.98px) {
  html[data-ui-scale="xl"] [data-nav-bp="search"] { width: 8rem; }
}
@media screen and (min-width: 1680px) and (max-width: 2015.98px) {
  html[data-ui-scale="xl"] [data-nav-bp="search"] { width: 11rem; }
}

/* ★ 帯の見出しが「…」で切れるときは、切らずに畳む（2026-10-03・利用者のご指摘
   「メニューの文字が切れています」）。印は `nav-fit.js` が帯（`[data-nav-bp="bar"]`）に付ける:
     early … 先に畳む見出し（`nav_label(early=True)`）をアイコンだけに
     ★ 目印は `data-nav-label`（`data-nav-bp` は入れ物にも付くので、それで畳むとメニューごと消える）
     all   … それでも切れるなら、全部の見出しをアイコンだけに（名前は各ボタンの title）
   ★ 「…」で縮む形（`line-clamp`）は、JS が読めなかった日の最後の守りとして残す */
[data-nav-fit="early"] [data-nav-label="early"],
[data-nav-fit="all"] [data-nav-label] { display: none !important; }