/* ブドウ品種図鑑 一覧＝収穫暦（棚）。F-3・案A v2 画面1
   目的：案A v2 の検索・絞り込みチップ・件数・収穫暦（棚）・凡例・注記の規則を写す。値は design-vars.css の変数だけ
   作成 2026-09-30 CTO（T4b）。出典：../../デザイン/案A_旬の棚_v2.html の 72〜84 行（検索・チップ）と 104〜141 行（収穫暦）
   すべて [data-screen="shelf"] の中に閉じる（品種グラフの .search・.chip と名前が同じなので混ざらないように）
   アプリで足したもの（モックに無い）は「★」印 */

/* ===== 特徴のチップの行・件数（案A v2。2026-10-03 画面の器 案2：探す欄は下の検索の欄 base.css .sdock、「絞り込み」は題の行の右端 base.css .nav .tx） ===== */
[data-screen="shelf"] .chips{display:flex;gap:8px;margin:0;padding:8px 16px 8px;overflow-x:auto;scrollbar-width:none}   /* 2026-10-03：1 行 52px（8＋36＋8。決定書 §3） */
[data-screen="shelf"] .chips::-webkit-scrollbar{display:none}
[data-screen="shelf"] .chip{position:relative;flex:none;height:36px;padding:0 12px;border:1px solid var(--rule-3);border-radius:999px;font-size:14px;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;background:var(--paper);color:var(--ink)}
[data-screen="shelf"] .chip::after{content:"";position:absolute;inset:-4px -4px -5.5px -3px}   /* 2026-10-04 CQO C-3：外形 36→44（幅 40 のチップも 44）。−4px 0 では下が 2px 足りなかった（枠線の内側から測る＋Chromium のボタンは基準が 1px 上に寄る）。実測（Chromium・WebKit とも）で外形の上 4・下 4・左右 3 に広がる。行の間 8px を上下の行で 4 ずつ分ける */
[data-screen="shelf"] .chip[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:#fff}
[data-screen="shelf"] .chip .x{font-size:17px;line-height:1}
[data-screen="shelf"] .summary{padding:8px 16px 0;font-size:14px;color:var(--ink-2);line-height:1.5}
[data-screen="shelf"] .summary .num{font-size:16px;color:var(--ink)}

/* ===== 収穫暦（棚）：角丸カードの中に、品種ごとの棚＝名前の段＋旬の帯の段 ===== */
[data-screen="shelf"] .cal{margin:12px 16px 0;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
[data-screen="shelf"] .cal-head{display:grid;grid-template-columns:repeat(3,1fr);padding:6px 14px;background:var(--surface);border-bottom:.5px solid var(--rule);font-size:14px;color:var(--ink-2);line-height:1.3}
[data-screen="shelf"] .cal-head .m{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
[data-screen="shelf"] .cal-head .m+.m{border-left:.5px solid var(--rule-2)}
[data-screen="shelf"] .cal-head .m b{grid-column:1/-1;color:var(--ink);padding-bottom:2px}
[data-screen="shelf"] .cal-head .m i{font-style:normal;color:var(--ink-2)}
[data-screen="shelf"] .shelf{display:block;width:100%;padding:10px 14px;border-top:.5px solid var(--rule);color:inherit}
[data-screen="shelf"] .cal-head+.shelf,[data-screen="shelf"] .sep+.shelf{border-top:0}
[data-screen="shelf"] button.shelf:active{background:var(--surface)}
[data-screen="shelf"] .shelf.sel{box-shadow:inset 2px 0 0 var(--sel)}   /* いま開いている品種：左に深紫の線、名前も深紫 */
[data-screen="shelf"] .shelf .l1{display:flex;align-items:center;gap:6px 8px;min-height:24px;flex-wrap:wrap}
[data-screen="shelf"] .shelf .nm{display:inline-flex;align-items:center;gap:8px;font-size:16px;line-height:1.35;color:var(--ink);line-break:strict}
[data-screen="shelf"] .shelf.sel .nm{color:var(--sel);font-weight:500}
[data-screen="shelf"] .shelf .sub{font-size:14px;color:var(--ink-2);line-height:1.4}
[data-screen="shelf"] .shelf .tags{margin-left:auto}
[data-screen="shelf"] .track{position:relative;display:grid;grid-template-columns:repeat(9,1fr);align-items:center;height:22px;margin-top:6px;border-radius:var(--r-pill);background:var(--surface);font-size:14px;line-height:22px;color:var(--ink-2)}
[data-screen="shelf"] .track::before,[data-screen="shelf"] .track::after{content:"";position:absolute;top:0;bottom:0;width:.5px;background:var(--rule-2);left:calc(100%/3)}   /* 月の境だけ細い線 */
[data-screen="shelf"] .track::after{left:calc(200%/3)}
[data-screen="shelf"] .track .bar{height:12px;border-radius:var(--r-pill);z-index:1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
[data-screen="shelf"] .track .bar.b{background:var(--skin-b)} [data-screen="shelf"] .track .bar.r{background:var(--skin-r)} [data-screen="shelf"] .track .bar.g{background:var(--skin-g)}
[data-screen="shelf"] .track .bar.est{opacity:.45}   /* 育成地の値（山梨の値なし）は薄く出す。換算はしない */
[data-screen="shelf"] .track .bar.own{background:none;box-shadow:inset 0 0 0 1.5px var(--own);height:14px}   /* 自園＝金の輪 */
[data-screen="shelf"] .track .bar.none{grid-column:1/-1;height:22px;background:none;box-shadow:none;border:1px dashed var(--rule-2);padding:0 8px;font-style:normal;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-screen="shelf"] .track .when{z-index:1;padding:0 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
[data-screen="shelf"] .track .when.l{text-align:right}
[data-screen="shelf"] .track .cell{z-index:1}
[data-screen="shelf"] .track .cell.on{height:14px;background:var(--str-bg);box-shadow:inset 0 0 0 1px rgba(168,132,63,.45);border-radius:var(--r-pill) 0 0 var(--r-pill)}
[data-screen="shelf"] .track .cell.off{height:22px;background:var(--paper);border:1px dashed var(--rule-2);border-radius:0 var(--r-pill) var(--r-pill) 0;padding:0 8px;line-height:20px;white-space:nowrap}
[data-screen="shelf"] .sep{display:flex;align-items:center;gap:8px;padding:12px 14px 2px;border-top:1px solid var(--rule-2);font-size:14px;color:var(--ink-2);line-height:1.4}
[data-screen="shelf"] .sep .ring{display:inline-block;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--own);flex:none}
[data-screen="shelf"] .gapnote{padding:10px 14px 14px;border-top:.5px solid var(--rule);line-height:1.5}
[data-screen="shelf"] .gapnote p{font-size:16px} [data-screen="shelf"] .gapnote small{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
[data-screen="shelf"] .tkey{display:flex;flex-wrap:wrap;gap:4px 14px;padding:12px 16px 0;font-size:14px;color:var(--ink-2);line-height:1.6;align-items:center}
[data-screen="shelf"] .tkey .dot{vertical-align:-1px;margin-right:4px}
[data-screen="shelf"] .tkey .sw{display:inline-block;width:18px;height:10px;border-radius:var(--r-pill);vertical-align:-1px;margin-right:5px;background:var(--skin-r);opacity:.45}
[data-screen="shelf"] .tkey .sw.own{opacity:1;background:none;box-shadow:inset 0 0 0 1.5px var(--own)}
[data-screen="shelf"] .tkey .sw.sel{opacity:1;width:2px;height:14px;border-radius:0;background:var(--sel);vertical-align:-3px}
[data-screen="shelf"] .foot{padding:8px 16px 0;font-size:14px;color:var(--ink-2);line-height:1.5}

/* ★ モックに無い場合の最小の形（CMO 未設計。止めない指摘の範囲） */
[data-screen="shelf"] .dot.x{background:var(--skin-x);box-shadow:inset 0 0 0 1px var(--skin-x-line)}   /* 果皮色 不明 */
[data-screen="shelf"] .track .bar.x{background:var(--skin-x);box-shadow:inset 0 0 0 1px var(--skin-x-line)}
[data-screen="shelf"] .track .cell.off{overflow:hidden;text-overflow:ellipsis}   /* 狭い空きで文字がはみ出さない */
/* 空き旬が前や間にもあるとき：角丸は帯の両端だけ（案A の並び＝収穫→空き。2026-11-02 CMO 決定 §10-6 で 6px → var(--r-pill)） */
[data-screen="shelf"] .track .cell.on,[data-screen="shelf"] .track .cell.off{border-radius:0}
[data-screen="shelf"] .track .cell:first-child{border-top-left-radius:var(--r-pill);border-bottom-left-radius:var(--r-pill)}
[data-screen="shelf"] .track .cell:last-child{border-top-right-radius:var(--r-pill);border-bottom-right-radius:var(--r-pill)}
[data-screen="shelf"] .empty{padding:14px;font-size:14px;color:var(--ink-2);line-height:1.5}

/* ★ 絞り込みシート（F-2 全軸）。品種グラフ v13 の .sheet・.grip に、案A のチップと .btn を並べただけ */
[data-screen="shelf"] .fs-head{display:flex;align-items:center;gap:8px;min-height:var(--tap)}
[data-screen="shelf"] .fs-head h3{flex:1;font-size:17px;font-weight:500;line-height:1.3}
[data-screen="shelf"] .fs-close{min-height:var(--tap);padding:0 2px 0 8px;color:var(--plum);border-radius:8px}
[data-screen="shelf"] .fs-sec{padding:10px 0 4px;border-top:.5px solid var(--rule)}
[data-screen="shelf"] .fs-sec:has(+ .fs-foot){padding-bottom:8px}   /* 2026-10-04 CQO C-3：最後の行のチップの押せる範囲（下 4px）が下の帯に食われていた */
[data-screen="shelf"] .fs-sec h4{font-size:14px;color:var(--ink-2);line-height:1.5;margin-bottom:6px}
[data-screen="shelf"] .fs-opts{display:flex;flex-wrap:wrap;gap:8px}
[data-screen="shelf"] .fs-opts .chip::after{inset:-4px -4px -5.5px -3px}
[data-screen="shelf"] .fs-sel{height:var(--tap);min-width:8em;padding:0 10px;border:1px solid var(--rule-3);border-radius:var(--r-ctl);background:var(--surface);font:inherit;font-size:16px;color:var(--ink)}
[data-screen="shelf"] .fs-foot{position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom));display:flex;gap:8px;padding:12px 0 calc(14px + env(safe-area-inset-bottom));background:var(--paper)}

/* ===== CMO 決定 2026-09-30（docs/2026-09-30_未設計部分の見た目_CMO決定.md） ===== */
/* §2 シートの select：共通の輪の代わりに入れ物のフォーカス */
[data-screen="shelf"] .fs-sel:focus{background:var(--paper);box-shadow:inset 0 0 0 1px var(--plum),0 0 0 3px var(--plum-soft)}
/* §3 暦の外へ続く帯は、続く側の角丸を 0 */
[data-screen="shelf"] .track .bar.cut-l{border-radius:0 var(--r-pill) var(--r-pill) 0}
[data-screen="shelf"] .track .bar.cut-r{border-radius:var(--r-pill) 0 0 var(--r-pill)}
[data-screen="shelf"] .track .bar.cut-l.cut-r{border-radius:0}

/* ===== 2026-10-02 特徴のチップの行（CMO 決定 2026-10-02 §1-A。見本の .chips・.chip・.sep を写した）。2026-10-03：先頭に「特徴」の字（.trl） ===== */
[data-screen="shelf"] .chips .trl{flex:none;font-size:14px;color:var(--ink-2);padding-right:2px}
[data-screen="shelf"] .chips{gap:6px;align-items:center;touch-action:pan-x}
[data-screen="shelf"] .chip{gap:7px}
[data-screen="shelf"] .chip .dot{width:10px;height:10px;box-shadow:none}
[data-screen="shelf"] .chip[aria-pressed="true"]{font-weight:500}
[data-screen="shelf"] .chip[aria-pressed="true"] .dot{box-shadow:0 0 0 2px #fff}
[data-screen="shelf"] .chip.nc{color:var(--warn-ink);border-color:var(--warn-line)}
[data-screen="shelf"] .chip.nc[aria-pressed="true"]{background:var(--warn-ink);border-color:var(--warn-ink);color:#fff}
[data-screen="shelf"] .chips .sep{flex:none;width:1px;height:20px;padding:0;border:0;background:var(--rule-2);margin:0 4px}
/* 「うちの畑」＝自園の金（--own）。押すと --pollen-bg 地・--own の枠・--str-ink の文字・丸に金の輪（一覧の金の輪と同じ印） */
[data-screen="shelf"] .chip.own{padding-left:10px}
[data-screen="shelf"] .chip.own[aria-pressed="true"]{background:var(--pollen-bg);border-color:var(--own);color:var(--str-ink)}
[data-screen="shelf"] .chip.own[aria-pressed="true"] .dot{box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),0 0 0 2px var(--pollen-bg),0 0 0 3.5px var(--own)}
[data-screen="shelf"] .cal .empty{padding:16px 14px 18px}
[data-screen="shelf"] .dot.x.own{box-shadow:inset 0 0 0 1px var(--skin-x-line),0 0 0 2px var(--paper),0 0 0 3.5px var(--own)}   /* 2026-10-02：果皮色不明でも金の輪 */