/* ブドウ品種図鑑 詳細（F-4・案A v2 画面2）と出典一覧（F-9）
   目的：案A v2 の詳細画面の規則（.hero・.sh・.kv・.src・.near・.actions・見出し直下の旬の帯）を写す。値は design-vars.css の変数だけ
   作成 2026-09-30 CTO（T5）。出典：../../デザイン/案A_旬の棚_v2.html の 104〜124 行（収穫暦の部品）・150〜178 行（詳細）・.foot
   詳細は [data-screen="detail"]、出典一覧と共有する部品は :is(detail, sources) の中に閉じる（一覧・品種グラフの同名の部品と混ざらない）
   アプリで足したもの（モックに無い）は「★」印 */

/* ===== 見出し直下の旬の帯（育成地／山梨・露地の 2 段）＝一覧の棚と同じ部品 ===== */
[data-screen="detail"] .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="detail"] .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="detail"] .cal-head .m{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
[data-screen="detail"] .cal-head .m+.m{border-left:.5px solid var(--rule-2)}
[data-screen="detail"] .cal-head .m b{grid-column:1/-1;color:var(--ink);padding-bottom:2px}
[data-screen="detail"] .cal-head .m i{font-style:normal;color:var(--ink-2)}
[data-screen="detail"] .shelf{display:block;width:100%;padding:10px 14px;border-top:.5px solid var(--rule);color:inherit}
[data-screen="detail"] .cal-head+.shelf,[data-screen="detail"] .sep+.shelf{border-top:0}
[data-screen="detail"] .shelf .l1{display:flex;align-items:center;gap:6px 8px;min-height:24px;flex-wrap:wrap}
[data-screen="detail"] .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="detail"] .shelf .sub{font-size:14px;color:var(--ink-2);line-height:1.4}
[data-screen="detail"] .shelf .tags{margin-left:auto}
[data-screen="detail"] .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="detail"] .track::before,[data-screen="detail"] .track::after{content:"";position:absolute;top:0;bottom:0;width:.5px;background:var(--rule-2);left:calc(100%/3)}   /* 月の境だけ細い線 */
[data-screen="detail"] .track::after{left:calc(200%/3)}
[data-screen="detail"] .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="detail"] .track .bar.b{background:var(--skin-b)} [data-screen="detail"] .track .bar.r{background:var(--skin-r)} [data-screen="detail"] .track .bar.g{background:var(--skin-g)}
[data-screen="detail"] .track .bar.est{opacity:.45}   /* 育成地の値（山梨の値なし）は薄く出す。換算はしない */
[data-screen="detail"] .track .bar.own{background:none;box-shadow:inset 0 0 0 1.5px var(--own);height:14px}   /* 自園＝金の輪 */
[data-screen="detail"] .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="detail"] .track .when{z-index:1;padding:0 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
[data-screen="detail"] .track .when.l{text-align:right}

/* ===== 詳細：大きな名前と余白、注意タグ→特徴タグ ===== */
[data-screen="detail"] .hero{padding:16px 16px 4px}
[data-screen="detail"] .hero .kana{font-size:14px;color:var(--ink-2);line-height:1.4;margin-bottom:3px}
[data-screen="detail"] .hero h3{font-size:28px;line-height:1.25;font-weight:500;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-break:strict}
[data-screen="detail"] .hero h3 .dot{width:14px;height:14px}
[data-screen="detail"] .hero .meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:6px;font-size:14px;color:var(--ink-2);line-height:1.5}
[data-screen="detail"] .hero .rtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;align-items:center}
[data-screen="detail"] .hero .rtags .none{font-size:14px;color:var(--ink-2)}

/* ===== 項目のカード・出典番号（出典一覧と共有） ===== */
:is([data-screen="detail"],[data-screen="sources"]) .sh{margin:20px 16px 0;padding:0 2px;display:flex;align-items:baseline;gap:8px;font-size:16px;line-height:1.4}
:is([data-screen="detail"],[data-screen="sources"]) .sh small{font-size:14px;color:var(--ink-2)}
:is([data-screen="detail"],[data-screen="sources"]) .kv{margin:8px 16px 0;padding:0 14px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow)}
:is([data-screen="detail"],[data-screen="sources"]) .kv li{display:grid;grid-template-columns:5.5em 1fr auto;column-gap:10px;align-items:center;min-height:48px;padding:8px 0;border-top:.5px solid var(--rule)}
:is([data-screen="detail"],[data-screen="sources"]) .kv li:first-child{border-top:0}
:is([data-screen="detail"],[data-screen="sources"]) .kv .k{font-size:14px;color:var(--ink-2);line-height:1.4}
:is([data-screen="detail"],[data-screen="sources"]) .kv .v{font-size:16px;line-height:1.4;min-width:0;overflow-wrap:anywhere}
:is([data-screen="detail"],[data-screen="sources"]) .kv .v .num{font-size:17px}
:is([data-screen="detail"],[data-screen="sources"]) .kv .v .u{font-size:14px;color:var(--ink-2);margin-left:3px}
:is([data-screen="detail"],[data-screen="sources"]) .kv .v small{display:block;font-size:14px;color:var(--ink-2);line-height:1.4;margin-top:2px}
:is([data-screen="detail"],[data-screen="sources"]) .kv .v.unk{color:var(--ink-2)}
:is([data-screen="detail"],[data-screen="sources"]) .src{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 8px;border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:14px;line-height:1;text-decoration:none;font-family:var(--num)}
:is([data-screen="detail"],[data-screen="sources"]) .src::after{content:"";position:absolute;inset:-10px -8px}   /* 見た目 24px、押せる範囲 44px */
:is([data-screen="detail"],[data-screen="sources"]) .src.t2{background:none;box-shadow:inset 0 0 0 1px var(--rule-2)}   /* 二次出典は枠だけ */
:is([data-screen="detail"],[data-screen="sources"]) .foot{padding:8px 16px 0;font-size:14px;color:var(--ink-2);line-height:1.5}

/* ===== 同じ頃に採れる品種・下のボタン ===== */
[data-screen="detail"] .near{display:flex;gap:8px;margin:8px 0 0;padding:4px 16px 6px;overflow-x:auto;scrollbar-width:none}
[data-screen="detail"] .near::-webkit-scrollbar{display:none}
[data-screen="detail"] .near button{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:var(--r-ctl);background:var(--surface);font-size:16px;white-space:nowrap}
[data-screen="detail"] .actions{display:flex;gap:10px;padding:16px 16px 22px;margin-top:12px;background:var(--paper)}


/* ★ モックに無い場合の最小の形（CMO 未設計。止めない指摘の範囲） */
[data-screen="detail"] .hero .rtags .grp{display:contents}   /* 注意タグ・特徴タグの組（F-4 の順を DOM に持つだけ。見た目はモックの 1 列） */
[data-screen="detail"] .dot.x{background:var(--skin-x);box-shadow:inset 0 0 0 1px var(--skin-x-line)}   /* 果皮色 不明（一覧と同じ） */
[data-screen="detail"] .track .bar.x{background:var(--skin-x);box-shadow:inset 0 0 0 1px var(--skin-x-line)}
[data-screen="detail"] .kv li .tags{flex-wrap:wrap}
/* 出典一覧：番号・題名（発行者・年・格・参照日）・開く。?id= の行は左に深紫の線（一覧の「いま開いている品種」と同じ印） */
[data-screen="sources"] .srcs li{grid-template-columns:auto 1fr auto}
[data-screen="sources"] .srcs li[aria-current="true"]{box-shadow:inset 2px 0 0 var(--sel);margin:0 -14px;padding-left:14px;padding-right:14px}
[data-screen="sources"] .srcs .go{min-height:var(--tap)}
[data-screen="sources"] .kv{margin-bottom:0}
[data-screen="sources"] > div:last-child{padding-bottom:22px}

/* ===== CMO 決定 2026-09-30（docs/2026-09-30_未設計部分の見た目_CMO決定.md） ===== */
/* §3 暦の外へ続く帯は、続く側の角丸を 0（一覧と同じ） */
[data-screen="detail"] .track .bar.cut-l{border-radius:0 var(--r-pill) var(--r-pill) 0}
[data-screen="detail"] .track .bar.cut-r{border-radius:var(--r-pill) 0 0 var(--r-pill)}
[data-screen="detail"] .track .bar.cut-l.cut-r{border-radius:0}
/* §7「候補に入れる」の切り替え：2026-10-31 から操作バー（base.css の .vsheet .sh-act .btn.on）へ移した */
/* §5-2 段階の対応表：項目ごとの .kv カード。先頭の行が項目名（幅いっぱいの淡い面） */
[data-screen="sources"] .kv.cw{overflow:hidden}
[data-screen="sources"] .kv.cw li.hd{display:flex;align-items:center;min-height:40px;margin:0 -14px;padding:0 14px;font-size:14px;color:var(--ink-2);line-height:1.4;background:var(--surface)}

/* ===== 2026-10-02 品種のモーダルの「詳細」（CMO 決定 2026-10-02 §1-C・§4。見本の .ownrow・.ownbtn・.judge を写した） ===== */
[data-screen="detail"].enter .hero{animation:ped-rise .28s ease-out both}
[data-screen="sources"].enter > div{animation:ped-rise .28s ease-out both}   /* 2026-10-31 出典の面に入ったとき（品種を重ねたときと同じ入り） */   /* 品種が替わったとき（v7 の ped-rise。keyframes は pedigree.css） */
/* 見出しの「うちの畑にある」（自園ビルドだけ）。押すと --pollen-bg 地・--own の枠・丸に金の輪 */
[data-screen="detail"] .ownrow{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
[data-screen="detail"] .ownrow small{font-size:14px;color:var(--ink-2);line-height:1.4}
[data-screen="detail"] .ownbtn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 10px;border:1px solid var(--rule-3);border-radius:999px;font-size:14px;line-height:1;color:var(--ink);background:var(--paper);position:relative}
[data-screen="detail"] .ownbtn::after{content:"";position:absolute;inset:-5px 0 -6px}   /* 2026-10-04：外形 36→44（shelf.css の .chip::after と同じ理由で下を厚く） */
[data-screen="detail"] .ownbtn .dot{width:12px;height:12px}
[data-screen="detail"] .ownbtn[aria-pressed="true"]{border-color:var(--own);background:var(--pollen-bg);color:var(--str-ink);font-weight:500}
/* タグの根拠（栽培の下・畳んで置く。オーナー決定 2026-10-02）。行は見本の .judge（旧 血統表の特徴タブと同じ 4 列） */
[data-screen="detail"] .judge li{grid-template-columns:3.2em 6.2em 1.4em 1fr;column-gap:8px;min-height:52px}
[data-screen="detail"] .judge .tn{font-size:16px;line-height:1.3}
[data-screen="detail"] .judge .tv{font-family:var(--num);font-size:17px;color:var(--plum-bright);text-align:center}
[data-screen="detail"] .judge .tv.no{color:var(--ink-3)}
[data-screen="detail"] .judge .tv.q{color:var(--str-ink)}
[data-screen="detail"] .judge small{font-size:14px;color:var(--ink-2);line-height:1.4}
/* ★ 畳む見出し（CMO 未設計の最小の形）：矢印アイコンは使わず、右端に文字「開く／閉じる」（.go と同じ深紫の文字リンク型）。押せる範囲 44px */
[data-screen="detail"] .judge-wrap > summary{list-style:none;cursor:pointer;min-height:var(--tap);align-items:center;flex-wrap:wrap;border-radius:8px}
[data-screen="detail"] .judge-wrap > summary::-webkit-details-marker{display:none}
[data-screen="detail"] .judge-wrap > summary .op{margin-left:auto;font-weight:400;font-size:14px;color:var(--plum);white-space:nowrap}
[data-screen="detail"] .judge-wrap > summary .op i{font-style:normal}
[data-screen="detail"] .judge-wrap > summary .op .c,[data-screen="detail"] .judge-wrap[open] > summary .op .o{display:none}
[data-screen="detail"] .judge-wrap[open] > summary .op .c{display:inline}
[data-screen="detail"] .judge-wrap > summary small{flex:1 1 auto;min-width:0}
[data-screen="detail"] .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：果皮色不明の品種も「うちの畑」に入れられるようになった＝金の輪を残す */
[data-screen="detail"] .ownbtn .dot.own{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)}   /* 押した見出しのボタン＝丸に金の輪（チップ「うちの畑」と同じ） */
/* この端末の保存（2026-10-31 CTO）：候補の画面の末尾に見出し・文・2 つのボタン（CMO 決定 2026-10-31_絞り込みの3項目と出典のシート §4。出典の末尾から移した） */
[data-screen="candidates"] .bk{display:flex;flex-wrap:wrap;gap:8px;margin:10px 16px 24px}
[data-screen="candidates"] .bk button{min-height:44px;padding:0 16px;border:1px solid var(--rule-3);border-radius:var(--r-pill);background:var(--paper);color:var(--ink);font-size:15px}
[data-screen="candidates"] .sh{margin:24px 16px 0;padding:0 2px;font-size:16px;line-height:1.4}   /* 見出しは出典の .sh と同じ字 */

/* 2026-11-02 CMO 決定 §10-6（オーナー選択 案1）：帯・段・収穫がある旬のマス・点線の枠の角丸＝高さの半分（var(--r-pill)）。cut 側は 0 のまま */
/* ===== 2026-11-01 暦の帯の両端のマスに時期（案 A・オーナー決定。CMO 決定 2026-11-01_一般公開の見た目と言葉_決定.md §10-2・§10-4）=====
   （detail.css の末尾に置く＝shelf.css・detail.css の .track .bar より後に読む。一覧と詳細の帯の共通の規則）
   横の文（.when）をやめ、帯（20px）の最初と最後のマスに「8下」。数字 12px（Inter・tabular）＋旬 11px・中央そろえ。端の span の幅＝1 マス（--n＝見えているマスの数）。
   文字の色は帯の色で：黒・赤は白、緑・白・ピンク・黄・不明・うちの畑（輪）は墨。育成地の値（薄い帯）は地を淡く混ぜ、文字は墨（.55 の不透明度では白文字が 3.8:1 に落ちるため。
   実測：薄い黒の地に墨 4.7:1・薄い赤 7.1:1） */
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar{height:20px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;
  color:var(--ink);font-size:11px;line-height:20px;font-style:normal;border-radius:var(--r-pill)}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar .ends{display:contents}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar .e{flex:none;width:calc(100% / var(--n, 1));text-align:center;white-space:nowrap}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar .e.one{width:100%}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar .e b{font-family:var(--num);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar:is(.b,.r){color:#fff}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar.own{height:20px}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar.est{opacity:1;color:var(--ink)}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar.est.b{background:color-mix(in srgb,var(--skin-b) 55%,var(--surface))}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar.est.r{background:color-mix(in srgb,var(--skin-r) 55%,var(--surface))}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar.est.g{background:color-mix(in srgb,var(--skin-g) 55%,var(--surface))}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar.est.x{background:var(--skin-x)}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar.est.kp{background:color-mix(in srgb,var(--peel-p) 55%,var(--surface))}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar.est.ky{background:color-mix(in srgb,var(--peel-y) 55%,var(--surface))}
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar.est.kw{background:var(--peel-w)}
/* 帯でない点線の枠（「8〜10 月の外（…）」・「値なし」）は §10-2 の 5 で「変えない」＝上の帯の規則（flex・11px・墨）を戻す（2026-11-01 e2e test_detail の mock 照合） */
:is([data-screen="shelf"],[data-screen="detail"]) .track .bar.none{display:block;font-size:inherit;color:inherit}
/* 「うちの畑の収穫がある旬」の行（.cell.on）も同じ規則（§10-2 の 8）：20px・両端のマスに時期・文字は墨（淡い金の地）。空き旬の点線の枠（.cell.off）は変えない */
[data-screen="shelf"] .track .cell.on{height:20px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;
  color:var(--ink);font-size:11px;line-height:20px}
[data-screen="shelf"] .track .cell.on .e{flex:none;width:calc(100% / var(--n, 1));text-align:center;white-space:nowrap}
[data-screen="shelf"] .track .cell.on .e.one{width:100%}
[data-screen="shelf"] .track .cell.on .e b{font-family:var(--num);font-size:12px;font-weight:400;font-variant-numeric:tabular-nums}
/* 頭（月と上中下）を固定：一覧を下へ送っても列が読める（§10-2 の 9）。.cal の overflow:hidden は sticky を殺すので clip に */
[data-screen="shelf"] .cal{overflow:clip}
[data-screen="shelf"] .cal-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:2}