/* ブドウ品種図鑑 共通部品（リセット・アプリの器・上部バー・セグメント・下のタブ・タグ・印・果皮色の粒・シート・トースト）
   目的：採用モックの共通部品を 1 か所に置く。規則はモックから写し、値は design-vars.css の変数だけを使う
   作成 2026-09-30 CTO（T1）。改訂 2026-09-30：CMO 決定（v13 の廃止名 --bg・--line・--line-2 を --paper・--rule・--rule-2 に）
   出典：案A 旬の棚 v2（リセット・.topbar・.big・.tabs・.tabbar・.tag・.mk・.lv・.dot・.btn）、
         血統表 v7（.tabs の focus・.back[disabled]）、品種グラフ v13（.sheet・.grip・.toast・.sr）
   モックの外側の見本枠（.deck・.gallery・.phone・.screen）は写さない。
   アプリで足したもの（モックに無い）は「★」印：アプリの器・下のタブの固定・画面の出し分け */

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol{margin:0} h1,h2,h3,h4,b,strong,th{font-weight:400} ul,ol{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:left}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* 2026-10-31 オーナー「黄色い枠はダサい」：黄＋黒の二重の輪をやめて紫 1 本。指で押したときは描かない＝キーボードの印 html[data-kb]（src/ui/kbmark.js）が
   あるときだけ（作業提案アプリ §20 と同じ。Safari は JS で移した焦点を指のあとでも :focus-visible と見なすため印で切る） */
html:not([data-kb]) :focus-visible{outline:none!important}
/* CMO 決定 §2：文字入力欄はタップでも :focus-visible になるので、共通の輪を使わない（フォーカスは入れ物側で見せる） */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:0;box-shadow:none}
.tabs button:focus-visible{outline-offset:-4px;border-radius:8px}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ★ アプリの器：スマホ幅の 1 列。PC 幅は CMO 未設計のため中央に 1 列で置くだけ */
.app{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--paper);display:flex;flex-direction:column;position:relative;overflow-x:hidden;overflow-x:clip}
/* ★ 2026-10-01：hidden は .app をスクロールの器にし、下のタブの sticky が効かず中身の末尾に置かれていた（長い画面で画面外）。
   clip は横のはみ出しを切るだけでスクロールの器を作らない。clip を知らない古いブラウザは hidden のまま */
.screens{flex:1 0 auto;padding-top:env(safe-area-inset-top)}
[data-screen][hidden]{display:none}

/* ===== 上部：バー（押した画面）・大きな題（根の画面）・セグメント型の切り替え（案A v2） ===== */
.topbar{padding:8px 16px 0;display:flex;align-items:center;gap:8px;min-height:52px}
.topbar .brand{font-size:17px;font-weight:500;line-height:1.3;flex:1;text-align:center;letter-spacing:.02em}
.topbar .brand .cnt{font-family:var(--num);font-weight:400;color:var(--ink-2);margin-left:6px}
.topbar .end{display:inline-flex;justify-content:flex-end;min-width:4.5em}   /* ★ 右端の枠（入口ボタン等）。左の戻ると釣り合わせる */
.who{font-size:14px;color:var(--ink-2);background:var(--surface);border-radius:999px;padding:2px 10px;line-height:1.5;white-space:nowrap}
.back{display:inline-flex;align-items:center;min-height:var(--tap);min-width:4.5em;color:var(--plum);padding:0 8px 0 2px;border-radius:8px;max-width:8em}
.back span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back[disabled]{color:var(--ink-3);cursor:default}
.go{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 2px 0 8px;color:var(--plum);border-radius:8px;white-space:nowrap}   /* ★ 右上の入口（品種グラフ等）。.back と同じ文字リンク型 */
a.go{position:relative}
a.go::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}   /* 見た目はそのまま、押せる範囲を縦横 44 以上に（CMO 決定 2026-10-04 §1・C-6） */
.big{padding:20px 16px 0;display:flex;align-items:flex-end;gap:12px}
.big h2{font-size:28px;font-weight:500;line-height:1.25;letter-spacing:-.01em;flex:1}
.big .who{margin-bottom:6px}
.tabs{display:flex;margin:12px 16px 0;padding:2px;border-radius:9px;background:var(--surface);gap:2px}   /* iOS のセグメントと同じ 32px 高 */
.tabs button{flex:1;height:28px;border-radius:7px;color:var(--ink-2);font-size:14px;text-align:center;position:relative;padding:0 2px;transition:background .15s,color .15s}
.tabs button::after{content:"";position:absolute;inset:-8px 0}   /* 見た目は 28px、押せる範囲は 44px */
.tabs button[aria-selected="true"]{color:var(--plum-ink);font-weight:500;background:var(--paper);box-shadow:0 1px 3px rgba(28,23,32,.12)}
.tabs .cnt{margin-left:4px;font-family:var(--num);font-weight:400;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tabs button[aria-selected="true"] .cnt{color:var(--plum-bright)}

/* ===== 2026-10-03 画面の器 案2（CMO 決定 2026-10-03_画面の器_決定.md §3〜§7。見本の .nav・.fl・.glass・.tbp・.circ・.sdock を写し、absolute を fixed に） ===== */
/* 上：題 17px の行（右端「絞り込み n」）＋セグメント。比較・候補は題の行だけ */
[data-screen] > .top{padding:4px 16px 8px}
.nav{display:flex;align-items:center;gap:8px;min-height:44px}
.nav h2{font-size:17px;font-weight:500;line-height:1.3;letter-spacing:.02em;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav h2 .cnt{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:400;color:var(--ink-2);margin-left:6px}
.nav h2 .cnt:empty{display:none}
.nav .tx{flex:none;min-height:var(--tap);display:inline-flex;align-items:center;gap:5px;padding:0 6px;color:var(--plum);font-size:15px;border-radius:8px;white-space:nowrap}
.nav .tx:last-child{margin-right:-6px}
.nav .tx b{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:400}
.top .tabs.seg{margin:8px 0 0}
/* 根の中身の下余白＝カプセルの分（6＋54＋24。最後の行がカプセルの下に入らない）。系統は舞台が下端まで（graph.css） */
html:not([data-current="graph"]) .screens{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

/* 下：浮いたガラスのカプセル（図鑑・比較・候補）＋右端の検索の丸。z 4＝暗幕 5 ＜ シート 6 ＜ トースト 8 の下 */
.fl{position:fixed;left:max(14px,calc(50% - 266px));right:max(14px,calc(50% - 266px));bottom:calc(6px + env(safe-area-inset-bottom));z-index:4;
  display:flex;align-items:flex-end;gap:10px;pointer-events:none;transition:opacity var(--dur),transform var(--dur) var(--ease)}
.fl > *{pointer-events:auto}
.glass{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(28,23,32,.12),0 8px 28px rgba(28,23,32,.14),0 2px 6px rgba(28,23,32,.06)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(255,255,255,.94)}}
.fl .tbp{position:relative;flex:1;min-width:0;height:54px;border-radius:27px;padding:4px;display:flex;align-items:center;gap:2px;
  transition:height var(--dur) var(--ease),flex var(--dur) var(--ease),border-radius var(--dur)}
.fl .tbp button{position:relative;flex:1;min-width:0;height:46px;border-radius:23px;font-size:14px;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;
  transition:background var(--dur),color var(--dur),flex var(--dur) var(--ease),padding var(--dur),opacity var(--dur),height var(--dur) var(--ease)}
.fl .tbp button[aria-current="page"]{color:var(--plum);font-weight:500;background:rgba(80,0,70,.09);box-shadow:0 1px 2px rgba(28,23,32,.06)}
.fl .tbp .cnt{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:13px;font-weight:400;color:var(--ink-2)}
.fl .tbp .cnt:empty{display:none}
.fl .tbp button[aria-current="page"] .cnt{color:var(--plum)}
.fl .circ{position:relative;flex:none;width:54px;height:54px;border-radius:27px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);text-align:center;
  transition:width var(--dur) var(--ease),height var(--dur) var(--ease)}
.fl .circ svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;transition:width var(--dur),height var(--dur)}
.fl .circ.on{color:var(--plum);box-shadow:0 0 0 1px var(--plum),inset 0 1px 0 rgba(255,255,255,.9),0 8px 28px rgba(28,23,32,.14),0 2px 6px rgba(28,23,32,.06)}
/* 縮んだ形（HIG の minimize）：選んでいるタブの字だけ。見た目は 40px、押せる範囲は 44 を保つ */
html[data-fl="mini"] .fl .tbp{flex:0 0 auto;height:40px;border-radius:20px}
html[data-fl="mini"] .fl .tbp button:not([aria-current="page"]){flex:0 0 0;padding:0;opacity:0;overflow:hidden}
html[data-fl="mini"] .fl .tbp button[aria-current="page"]{flex:0 0 auto;height:32px;padding:0 14px;background:none;box-shadow:none}
html[data-fl="mini"] .fl .tbp button[aria-current="page"]::after{content:"";position:absolute;inset:-6px 0}
html[data-fl="mini"] .fl .circ{width:40px;height:40px}
html[data-fl="mini"] .fl .circ svg{width:18px;height:18px}
html[data-fl="mini"] .fl .circ::after{content:"";position:absolute;inset:-2px}   /* 押せる範囲 44×44（CMO 決定 2026-10-04 §1・C-5。旧 inset:-2px 0 は横 40） */
/* 隠れた形：系統の選択中（10-03 決定の「下のタブなし」）。下端に影もヘアラインも残さない（inert は graph.js） */
html[data-gfocus] .fl{transform:translateY(calc(100% + env(safe-area-inset-bottom) + 12px));opacity:0;pointer-events:none}
html[data-gfocus] .fl > *{pointer-events:none}
/* 検索の欄（HIG の search tab）：丸を押すとカプセルの場所に出る。--dockb はキーボードの高さ（main.js が visualViewport で測る） */
html[data-sdock] .fl{opacity:0;pointer-events:none;transition:none}
html[data-sdock] .fl > *{pointer-events:none}
.sdock{position:fixed;left:max(14px,calc(50% - 266px));right:max(14px,calc(50% - 266px));bottom:calc(6px + var(--dockb, env(safe-area-inset-bottom)));z-index:4;display:flex;align-items:center;gap:8px}
.sdock[hidden],html[data-gfocus] .sdock{display:none}
.sdock .search{position:relative;flex:1;min-width:0;display:flex;align-items:center;height:50px;border:1px solid var(--rule-2);border-radius:25px;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);   /* 2026-10-04 系統の検索結果の見せ方 §6：後ろの字を透かさない */
  box-shadow:0 8px 28px rgba(28,23,32,.14);transition:border-color var(--dur),box-shadow var(--dur)}
.sdock .search:focus-within{border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-soft),0 8px 28px rgba(28,23,32,.14)}
.sdock .search label{flex:none;align-self:stretch;display:flex;align-items:center;padding:0 0 0 18px;font-size:14px;color:var(--ink-2)}   /* 押せる高さ＝欄の 50（§1 の一般規則。見た目は同じ） */
.sdock .search input{flex:1;min-width:0;height:46px;border:0;background:transparent;padding:0 12px;font-size:16px;outline:0;-webkit-appearance:none;appearance:none}
.sdock .search input::-webkit-search-cancel-button{display:none}
.sdock .search input::placeholder{color:var(--ink-2)}
.sdock .clear{flex:none;width:44px;height:44px;margin-right:3px;font-size:14px;color:var(--ink-2);border-radius:22px;text-align:center}
.sdock .clear[hidden]{display:none}
.sdock .cancel{flex:none;height:44px;min-height:var(--tap);padding:0 12px;border-radius:22px;color:var(--plum);font-size:15px;white-space:nowrap}   /* 地は .glass（2026-10-04 §6：丸と同じ素材のピル） */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sdock .search{background:rgba(255,255,255,.97)}}
@media (prefers-reduced-motion:reduce){.fl,.fl .tbp,.fl .tbp button,.fl .circ,.fl .circ svg{transition:none}}

/* ===== 特徴タグ・印（案A v2 ＝ 血統表 v7 と同じ） ===== */
.tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;font-size:14px;line-height:1;color:var(--fruit-ink);white-space:nowrap;background:var(--fruit-bg)}
.t-early,.t-late{border-radius:999px;color:var(--time-ink);background:var(--time-bg);padding:0 10px}
.t-crack,.t-resist,.t-color{color:var(--str-ink);background:var(--str-bg)}
.tag.cau{color:var(--warn-ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--warn-line)}
.tags{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap}
.more{font-family:var(--num);font-size:14px;color:var(--ink-2)}
.mk{display:inline-block;font-style:normal;font-size:14px;line-height:1;padding:4px 7px;border-radius:999px;color:var(--ink-2);background:var(--surface);white-space:nowrap}
.lv{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;font-size:14px;line-height:1;white-space:nowrap;color:var(--ink-2);background:var(--surface)}
.lv.s{color:var(--str-ink);background:var(--str-bg)}
.lv.w{color:var(--warn-ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--warn-line)}
.lv.u{color:var(--ink-3);background:none;padding:0}

/* 果皮色の粒。自園＝金の輪（案A v2 ＝ 品種グラフ v13 と同じ） */
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.dot.b{background:var(--skin-b)} .dot.r{background:var(--skin-r)} .dot.g{background:var(--skin-g)}
.dot.own{box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),0 0 0 2px var(--paper),0 0 0 3.5px var(--own)}

/* ===== ボタン（案A v2 詳細の下のボタン。品種グラフ v13 の .btn は graph.css で画面内に閉じる） ===== */
.btn{flex:1;min-height:48px;border-radius:var(--r-ctl);background:var(--surface);color:var(--plum-ink);font-size:16px;text-align:center}
.btn.pri{font-weight:500;background:var(--plum);color:#fff}

/* ===== 下のシート・トースト（品種グラフ v13） ===== */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--paper);border-radius:20px 20px 0 0;
  box-shadow:0 -6px 28px rgba(50,0,40,.06),0 -1px 0 var(--rule);padding:6px 16px calc(14px + env(safe-area-inset-bottom));
  transform:translateY(105%);visibility:hidden;transition:transform .36s var(--ease),visibility 0s linear .36s;max-height:70vh;overflow:auto;touch-action:pan-y}
.sheet.open{transform:none;visibility:visible;transition-delay:0s}
.grip{width:36px;height:4px;border-radius:2px;background:var(--rule-2);margin:4px auto 10px}
/* 絞り込みシート（一覧・系統。ui/sheet.js）2026-10-03：上の帯（.fs-top＝つまみ・題・閉じる）は動かさず、中身（.fs-body）だけスクロール。
   帯を下へ引く・暗幕（.sdim＝品種モーダルの .dim と同じ色）・右上の「閉じる」（.shclose＝品種モーダルの .vsheet .close と同じ形）で閉じる */
.sheet.fs{display:flex;flex-direction:column;overflow:hidden;padding-top:0;padding-bottom:0;overscroll-behavior:contain}
.sheet.fs.drag{transition:none}
.sheet.fs .fs-top{flex:none;padding-top:6px;touch-action:none;cursor:grab}
.sheet.fs .fs-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;margin:0 -16px;padding:0 16px calc(14px + env(safe-area-inset-bottom))}
.sdim{position:fixed;inset:0;z-index:5;background:rgba(28,23,32,.32);opacity:0;visibility:hidden;touch-action:none;transition:opacity .36s var(--ease),visibility 0s linear .36s}
.sdim.open{opacity:1;visibility:visible;transition-delay:0s}
.shclose{display:inline-flex;align-items:center;justify-content:flex-end;min-height:var(--tap);min-width:4.5em;color:var(--plum);padding:0 2px 0 8px;border-radius:8px;flex:none}
.toast{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:8;background:#2A2230;color:#fff;font-size:14px;line-height:1.5;
  padding:12px 14px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--dur),transform var(--dur)}
.toast.show{opacity:1;transform:none}
/* T9 の更新の知らせ・ログイン帯・ホーム画面の案内。CMO 決定 §4（2026-09-30） */
.toast.act{pointer-events:auto;display:flex;align-items:center;gap:8px}
.toast.act .msg{flex:1;min-width:0}
.toast .later{flex:none;min-height:44px;padding:0 10px;font-size:14px;font-weight:400;color:rgba(255,255,255,.72);text-decoration:none;border-radius:8px}
.toast .do{flex:none;position:relative;height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:500;text-decoration:none}
.toast .do::after{content:"";position:absolute;inset:-4px 0}   /* 見た目 36px、押せる範囲 44px */
.a2hs{display:flex;align-items:center;gap:4px;margin:8px 16px 0;padding:6px 4px 6px 14px;border-radius:12px;background:var(--surface)}
.a2hs p{flex:1;margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.a2hs .close{flex:none;width:44px;height:44px;font-size:18px;color:var(--ink-2);text-align:center}
.a2hs[hidden]{display:none}
html:not([data-current="shelf"]) .a2hs{display:none}   /* 案内は一覧の上だけ */
@media (min-width:768px){
  .sheet{left:auto;right:16px;bottom:16px;width:380px;border-radius:20px;max-height:calc(100% - 32px);
    box-shadow:0 16px 48px rgba(50,0,40,.12),0 0 0 1px var(--rule);transform:translateX(calc(100% + 24px))}
  .sheet.open{transform:none}
  .grip{display:none}
  .toast{left:auto;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));max-width:420px}   /* 2026-10-04：横向き（844×390）で検索の丸に重なっていた。カプセルは幅によらず下にあるので、その上に出す */
}

/* ★ 空の画面（T1 の骨組み。中身は T4 以降） */
.placeholder{margin:16px;padding:16px;border:1px dashed var(--rule-2);border-radius:var(--r-card);font-size:14px;color:var(--ink-2);line-height:1.5}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ===== 品種のモーダル（下からのシート）。CMO 決定 2026-10-02 §4（見本 2026-10-02_検索・比較・候補の3タブ_見本.html の .dim・.vsheet を写し、
   見本の absolute を実装の fixed に、top を safe-area＋12px に）。z：カプセル 4 ＜ 暗幕 5 ＜ シート 6 ＜ トースト 8 ===== */
.dim{position:fixed;inset:0;z-index:5;background:rgba(28,23,32,.32);opacity:0;visibility:hidden;touch-action:none;transition:opacity .36s var(--ease),visibility 0s linear .36s}
.dim.open{opacity:1;visibility:visible;transition-delay:0s}
.vsheet{position:fixed;left:max(0px,calc(50% - 280px));right:max(0px,calc(50% - 280px));bottom:0;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:6;
  background:var(--paper);border-radius:20px 20px 0 0;box-shadow:0 -6px 28px rgba(50,0,40,.06),0 -1px 0 var(--rule);
  transform:translateY(105%);visibility:hidden;transition:transform .36s var(--ease),visibility 0s linear .36s;display:flex;flex-direction:column;overscroll-behavior:contain}
.vsheet.open{transform:none;visibility:visible;transition-delay:0s}
.vsheet.drag{transition:none}
.vsheet .sh-top{flex:none;background:var(--paper);border-radius:20px 20px 0 0;touch-action:none;cursor:grab;padding-bottom:10px;position:relative;z-index:2;transition:box-shadow .15s}
.vsheet .sh-top.scrolled{box-shadow:0 .5px 0 var(--rule)}
.vsheet .grip{width:36px;height:4px;border-radius:2px;background:var(--rule-2);margin:8px auto 0}
.vsheet .topbar{min-height:44px;padding-top:2px}
.vsheet .topbar .brand{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .15s}
.vsheet .topbar .brand.show{opacity:1}
/* 2026-11-02（CQO 公開前検査 N6）：375px で左の「‹ 品種名」（最大 8em）と並ぶと題「この図鑑について」が切れた。題に 8.5em（8 字＋字間）を確保し、
   足りない分は左の戻る（名前は省略記号で切れる・下限 4.5em）が縮む。320px でもはみ出さないよう 40vw を上限に */
.vsheet .topbar .brand{min-width:min(8.5em,40vw)}
.vsheet .close{display:inline-flex;align-items:center;justify-content:flex-end;min-height:var(--tap);min-width:4.5em;color:var(--plum);padding:0 2px 0 8px;border-radius:8px}
.vsheet .tabs{margin-top:4px}
.vsheet .tabs button[aria-disabled="true"]{color:var(--ink-3);cursor:default}   /* ★ 系統番号には詳細が無い（v7 の「‹ 詳細」の無効の形） */
.vsheet .sh-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.vsheet .sh-scroll::-webkit-scrollbar{display:none}
/* 2026-10-31 詳細の操作バー（CMO 決定 2026-10-31 §A・オーナー選択 案A 白い帯）：シートの 3 つ目の子。本文の下に分けて置く（重ねない） */
.vsheet .sh-act{flex:none;display:flex;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);position:relative;z-index:2;touch-action:manipulation}
.vsheet .sh-act[hidden]{display:none}
.vsheet .sh-act .btn{display:inline-flex;align-items:center;justify-content:center;line-height:1.3;padding:0 8px}   /* 文字拡大で折り返す（CMO §E。比較・候補・血統表の .btn は案A のまま＝モックとの照合を崩さない） */
.vsheet .sh-act.more{box-shadow:0 -.5px 0 var(--rule)}   /* 本文がまだ下に続くときだけ（上の帯の .scrolled と鏡） */
.vsheet.has-act .sh-scroll{padding-bottom:12px}         /* safe-area はバーが受け持つ */
/* 入っている状態（§A-3）：字の置き換え＋淡い地＋深紫の輪＋500（色だけに頼らない）。主ボタンも「入っている」ときは同じ見え方 */
.vsheet .sh-act .btn.on,.vsheet .sh-act .btn.pri.on{background:var(--plum-soft);color:var(--plum-ink);font-weight:500;box-shadow:inset 0 0 0 1.5px var(--plum)}
.back.none{visibility:hidden}
/* 下の画面のスクロールを止める（§4。iOS 実機で足りなければ固定に替える＝決定書 §8-2） */
html[data-modal="1"]{overflow:hidden}   /* html だけ（2026-10-02：body にも付けると body がスクロールの器になった。カプセルは fixed なので影響しないが現行のまま） */
/* 検索タブの頭のセグメント「時期・特徴／系統」（base の .tabs のまま。margin 12px 16px 0） */
.vsheet .tabs .cnt{display:inline-block}   /* 血統表 v7 と同じ（子の一覧の数） */


/* ===== 2026-10-28 モモ（CMO 決定 2026-10-28_モモ追加_見た目の決定.md §1・§4〜§6・§9・§11。CTO T-M6/T-M7）=====
   作物ごとに写した節は [data-crop="peach"]。ブドウの節・規則は変えない。色は design-vars.css の変数だけ */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* 「品種図鑑」の字は切り替えが兼ねる（読み上げに残す） */
/* §1 作物の切り替え：題の行の左。ピル 1 本（高さ 32）に 2 つのボタン（高さ 28）。押せる範囲は上下に 8px 足して 44 */
.nav .crop{flex:none;display:inline-flex;align-items:center;height:32px;padding:2px;border-radius:999px;background:var(--surface)}
.nav .crop button{position:relative;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 10px;border-radius:999px;font-size:14px;color:var(--ink-2);white-space:nowrap}
.nav .crop button::after{content:"";position:absolute;inset:-8px 0}
.nav .crop button[aria-pressed="true"]{background:var(--paper);color:var(--plum-ink);font-weight:500;box-shadow:0 1px 3px rgba(28,23,32,.12)}
.nav .crop .cm{display:inline-block;width:9px;height:9px;flex:none}
.nav .crop .cm.grape{border-radius:50%;background:var(--crop-grape)}
.nav .crop .cm.peach{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-bottom:8px solid var(--crop-peach)}
.nav .crop button[aria-pressed="false"] .cm{opacity:.55}
.nav .crop + h2:not(.vh){flex:1;min-width:0}
.nav .crop ~ .tx{margin-left:auto}   /* 「絞り込み n」は題の行の右端のまま（CMO §1・CQO 2026-10-29 N2） */
/* 2026-10-31 外観の色の粒・帯（CMO 決定 2026-10-31 §B-3。種別は k 付き：ブドウの .r・旧 .fw と取り違えない） */
.dot.kw{background:var(--peel-w);box-shadow:inset 0 0 0 1px var(--peel-w-line)}
.dot.kp{background:var(--peel-p)} .dot.ky{background:var(--peel-y)}
.dot.kw.own{box-shadow:inset 0 0 0 1px var(--peel-w-line),0 0 0 2px var(--paper),0 0 0 3.5px var(--own)}
.track .bar.kw,.mini i.kw{background:var(--peel-w);box-shadow:inset 0 0 0 1px var(--peel-w-line)}
.track .bar.kp,.mini i.kp{background:var(--peel-p)} .track .bar.ky,.mini i.ky{background:var(--peel-y)}
.track .bar.kw.est,.mini i.kw.est{opacity:.7}   /* 白の育成地の薄い帯は .45 だと輪郭が消える（§B-3） */
/* §5 暦：6月下旬〜9月下旬の 10 旬（月の境の細い線は 10%・40%・70%） */
[data-crop="peach"] .track{grid-template-columns:repeat(10,1fr);
  background-image:linear-gradient(to right,transparent calc(10% - .25px),var(--rule-2) calc(10% - .25px),var(--rule-2) calc(10% + .25px),transparent calc(10% + .25px)),
    linear-gradient(to right,transparent calc(40% - .25px),var(--rule-2) calc(40% - .25px),var(--rule-2) calc(40% + .25px),transparent calc(40% + .25px)),
    linear-gradient(to right,transparent calc(70% - .25px),var(--rule-2) calc(70% - .25px),var(--rule-2) calc(70% + .25px),transparent calc(70% + .25px))}
[data-crop="peach"] .track::before,[data-crop="peach"] .track::after{display:none}
[data-crop="peach"] .vals .mini.m10{grid-template-columns:repeat(10,1fr);
  background-image:linear-gradient(to right,transparent calc(10% - .25px),var(--rule-2) calc(10% - .25px),var(--rule-2) calc(10% + .25px),transparent calc(10% + .25px))}
[data-crop="peach"] .vals .mini.m10::before{left:40%} [data-crop="peach"] .vals .mini.m10::after{left:70%}
/* §9 名前の下の注記 1 枚 */
.hero div.note{margin-top:12px;padding:8px 12px;border-radius:12px;background:var(--surface);font-size:14px;color:var(--ink-2);line-height:1.5}
.hero div.note p+p{margin-top:4px}
.hero div.note .nlink{color:var(--plum);text-decoration:underline;text-decoration-color:rgba(80,0,70,.3)}
/* §11 品種登録名の行・® */
.regname{font-size:15px;color:var(--ink);margin-top:4px}
/* 2026-11-02 CFO §11-6：登録名の行は h3 の中（flex の 2 段目）。見た目は旧 p.regname と同じ＝字は本文の形（重さ・行の高さ・字間を戻す）、
   行の間は h3 の row-gap 10px を打ち消して 4px（10 − 6） */
[data-screen="detail"] .hero h3 .regname{display:block;flex:0 0 100%;font-size:15px;font-weight:400;line-height:1.7;letter-spacing:normal;margin-top:-6px}
.hero h3 .rm{font-size:14px;vertical-align:super;line-height:0;margin-left:1px}
/* §6 ほか n 項目（タグの根拠と同じ型。右端に字「開く／閉じる」。矢印なし） */
details.fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:var(--tap);font-size:15px;color:var(--ink-2);border-radius:8px}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary .op{margin-left:auto;font-weight:400;font-size:14px;color:var(--plum);white-space:nowrap}
details.fold > summary .op i{font-style:normal}
details.fold > summary .op .c,details.fold[open] > summary .op .o{display:none}
details.fold[open] > summary .op .c{display:inline}
/* §6 F 群の補足（発信者を文頭に・二次の出典ピルは枠だけ） */
.kv small.sup{display:block;margin-top:4px;color:var(--ink-2)}
/* §8 系統図：枝変わりの子に二重の輪・凡例のしるし */
.gr .n.s-kw .c,.gr .n.s-kp .c,.gr .n.s-ky .c{stroke:rgba(0,0,0,.28)}   /* 白の丸が白地に溶けない（§B-3） */
/* 2026-10-31 出典のシート（CMO 決定 2026-10-31_絞り込みの3項目と出典のシート §3 案1）：セグメントは出さない（.tabs の display を打ち消す） */
.vsheet .tabs[hidden]{display:none}

/* ===== 2026-11-01 この図鑑について（CMO 決定 2026-11-01_一般公開の見た目と言葉_決定.md v3 §6）=====
   入口＝各画面の足元。行（.linkrow・44px）は比較・候補・詳細・出典の末尾、文字リンク（.aboutlink）は一覧の注・系統の凡例カードの末尾。
   本文＝品種モーダルと同じシートの面（[data-screen=about]）。見出し 15px 500・本文 15px/1.7・項の間 14px・運営の行 14px --ink-2。
   焦点の輪は共通の :focus-visible（紫 1 本・指では輪なし）のまま */
.linkrow{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:16px 16px 0;padding:0 14px;border:1px solid var(--rule);border-radius:var(--r-card);
  background:var(--paper);color:var(--ink);font-size:15px;text-decoration:none}
.linkrow .chev{color:var(--ink-2);font-size:18px;line-height:1}
.aboutlink{color:var(--plum);text-decoration:underline;text-decoration-color:rgba(80,0,70,.3);text-underline-offset:3px;margin-left:.5em;white-space:nowrap}
.contact{margin:16px 16px 0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.contact a,[data-screen="about"] .about a{color:var(--plum);text-decoration:underline;text-decoration-color:rgba(80,0,70,.3);text-underline-offset:3px}
[data-screen="about"] .about{padding:4px 16px 24px}
[data-screen="about"] .ab-sec{margin-top:14px}
[data-screen="about"] .ab-sec h4{margin:0;font-size:15px;font-weight:500;line-height:1.5;color:var(--ink)}
[data-screen="about"] .ab-sec p{margin:4px 0 0;font-size:15px;line-height:1.7;color:var(--ink)}
[data-screen="about"] .ab-src a{display:inline-flex;align-items:center;min-height:44px}
[data-screen="about"] .run{margin-top:24px;padding-top:14px;border-top:.5px solid var(--rule);font-size:14px;line-height:1.6;color:var(--ink-2)}
[data-screen="about"] .run p{margin:0 0 4px}
[data-screen="about"] .run .links a{display:inline-block;padding:10px 0}
.gr .lgcard .lc-about{margin-top:6px;font-size:14px}
.gr .lgcard .lc-about .aboutlink{margin-left:0;pointer-events:auto;position:relative}
.gr .lgcard .lc-about .aboutlink::after{content:"";position:absolute;inset:-11px 0}   /* 2026-11-01：文字 22 → 押せる範囲 44（ios_basics の一般規則。.nav .tx.on と同じ形） */


/* ===== 2026-11-01 絞り込み中が分かる見せ方（案 A。CMO 決定 2026-11-01_絞り込み中の見せ方_決定.md §2-1・§3・§7-2）=====
   題の行の「絞り込み n」：条件があるときは淡い紫の丸い地（状態の印）。押せる範囲 44 は ::after で保つ */
.nav .tx.on{position:relative;background:var(--plum-soft);border-radius:999px;padding:0 11px;margin-right:-11px;height:32px;min-height:0}
.nav .tx.on::after{content:"";position:absolute;inset:-6px 0}
/* 検索欄の上の結果の帯（一覧＝欄を開いている間だけ。系統は graph.css）。地は .glass（件数ピルと同じ素材） */
.hitbar{display:inline-flex;align-items:center;height:36px;border-radius:18px;padding:0 4px 0 12px;max-width:calc(100% - 28px);font-size:14px;color:var(--ink-2);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.hitbar .hit{overflow:hidden;text-overflow:ellipsis}
.hitbar .n,.hitbar .f{color:var(--ink)}
.hitbar .f{color:var(--ink-2)}
.hitbar b{font-family:var(--num);font-weight:400;color:var(--ink)}
.hitbar .sp{display:inline-block;width:1px;height:16px;background:var(--rule-2);margin:0 10px;vertical-align:-3px}
.hitbar .act{flex:none;color:var(--plum);font-size:15px;height:36px;padding:0 10px;border-radius:18px;position:relative}
.hitbar .act::after{content:"";position:absolute;inset:-4px 0}
.hitbar .act[hidden],.hitbar[hidden]{display:none}
[data-screen="shelf"] .hitbar{display:none}
html[data-sdock] [data-screen="shelf"]:not([hidden]) .hitbar:not([hidden]){display:inline-flex;position:fixed;left:14px;bottom:calc(6px + var(--dockb, env(safe-area-inset-bottom)) + 58px);z-index:4}
/* 一覧の 0 件：文の下に「絞り込みを外す」（輪郭・44px・--plum） */
[data-screen="shelf"] .cal .empty .btn{flex:none;display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:0 16px;background:var(--paper);
  border:1px solid var(--plum);color:var(--plum);font-size:15px}