/* ブドウ品種図鑑 比較（F-6・案A v2 画面3）と候補・メモ（F-8）
   目的：案A v2 の比較の規則（.cmp・.cols・.col・.rm・.crow・.vals・.mini・.legend・.actions）を写す。値は design-vars.css の変数だけ
   作成 2026-09-30 CTO（T6）。出典：../../デザイン/案A_旬の棚_v2.html の 141 行（.foot）・174 行（.actions）・178〜207 行（比較）
   比較は [data-screen="compare"]、候補は [data-screen="candidates"] の中に閉じる（一覧・詳細・品種グラフの同名の部品と混ざらない）
   アプリで足したもの（モックに無い）は「★」印 */

/* ===== 比較：横に流さず、項目ごとに値を積む。差のある行＝左に深紫の線、同じ行＝薄く ===== */
[data-screen="compare"] .cmp{margin:12px 16px 0;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden}
/* ★ 列の数は並べた品種の数（--n。4 品種でモックと同じ repeat(4,1fr)） */
[data-screen="compare"] .cols{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:0 6px;padding:10px 12px 8px;background:var(--surface);border-bottom:.5px solid var(--rule)}
[data-screen="compare"] .col{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
[data-screen="compare"] .col .nm{font-size:14px;line-height:1.3;color:var(--ink);display:flex;flex-direction:column;gap:5px;align-items:flex-start;line-break:strict}
[data-screen="compare"] .col .nm .dot{margin:3px 0 0 3px}
[data-screen="compare"] .col.sel .nm{color:var(--sel);font-weight:500}
[data-screen="compare"] .col button.nm{position:relative;min-height:var(--tap);min-width:var(--tap)}   /* 2026-10-04 CQO C-3：2 字の名前で幅 28 だった。背景の無いボタンなので見た目は変わらない */   /* 2026-10-02：名前を押すと品種のモーダル（見た目は名前のまま。押せる範囲 44px） */
[data-screen="compare"] .rm{position:relative;margin-top:auto;width:28px;height:28px;border-radius:50%;background:var(--paper);color:var(--ink-2);font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 .5px var(--rule-2)}
[data-screen="compare"] .rm::after{content:"";position:absolute;inset:-8px}
[data-screen="compare"] .crow{padding:8px 12px 10px;border-top:.5px solid var(--rule)}
[data-screen="compare"] .crow.diff{box-shadow:inset 2px 0 0 var(--plum)}
[data-screen="compare"] .crow .h{font-size:14px;color:var(--ink-2);line-height:1.4;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
[data-screen="compare"] .crow.diff .h{color:var(--plum-ink)}
[data-screen="compare"] .crow .h small{font-size:14px;color:var(--ink-3)}
[data-screen="compare"] .vals{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:0 6px;margin-top:4px;font-feature-settings:"palt" 1}
[data-screen="compare"] .vals>span{font-size:16px;line-height:1.4;min-width:0;overflow-wrap:anywhere;line-break:strict}
[data-screen="compare"] .crow.same .vals>span{color:var(--ink-2)}
[data-screen="compare"] .vals .num{font-size:17px}
[data-screen="compare"] .vals .u{font-size:14px;color:var(--ink-2);margin-left:2px}
[data-screen="compare"] .vals small{display:block;font-size:14px;color:var(--ink-2);line-height:1.4;margin-top:2px}
[data-screen="compare"] .vals .unk{color:var(--ink-2)}
[data-screen="compare"] .vals .mini{display:grid;grid-template-columns:repeat(9,1fr);align-items:center;height:14px;border-radius:var(--r-pill);background:var(--surface);margin:4px 0 6px;position:relative}
[data-screen="compare"] .vals .mini::before,[data-screen="compare"] .vals .mini::after{content:"";position:absolute;top:0;bottom:0;width:.5px;background:var(--rule-2);left:calc(100%/3)}
[data-screen="compare"] .vals .mini::after{left:calc(200%/3)}
[data-screen="compare"] .vals .mini i{height:8px;border-radius:var(--r-pill);z-index:1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
[data-screen="compare"] .vals .mini i.b{background:var(--skin-b)} [data-screen="compare"] .vals .mini i.r{background:var(--skin-r)} [data-screen="compare"] .vals .mini i.g{background:var(--skin-g)}
[data-screen="compare"] .vals .mini i.x{background:var(--skin-x);box-shadow:inset 0 0 0 1px var(--skin-x-line)}   /* ★ 果皮色 不明（一覧と同じ） */
[data-screen="compare"] .vals .mini i.est{opacity:.45}
[data-screen="compare"] .dot.x{background:var(--skin-x);box-shadow:inset 0 0 0 1px var(--skin-x-line)}   /* ★ 果皮色 不明（一覧と同じ） */
[data-screen="compare"] .legend{padding:10px 16px 0;font-size:14px;color:var(--ink-2);line-height:1.5}
[data-screen="compare"] .legend .sw{display:inline-block;width:2px;height:14px;background:var(--plum);vertical-align:-2px;margin-right:6px}
:is([data-screen="compare"],[data-screen="candidates"]) .actions{display:flex;gap:10px;padding:16px 16px 22px;margin-top:12px;background:var(--paper)}
:is([data-screen="compare"],[data-screen="candidates"]) .foot{padding:8px 16px 0;font-size:14px;color:var(--ink-2);line-height:1.5}

/* ===== 候補・メモ（CMO 決定 §5-1・2026-09-30）。カードの枠は比較と同じ。1 品種＝li、区切りはヘアライン ===== */
[data-screen="candidates"] .cand{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="candidates"] .cand li{padding:2px 12px 4px;border-top:.5px solid var(--rule)}
[data-screen="candidates"] .cand li:first-child{border-top:0}
/* 1 段目：行全体が詳細へのリンク。右端に「詳細 ›」（.go と同じ型・14px・深紫） */
[data-screen="candidates"] .cand a.nm{display:flex;align-items:center;gap:8px;min-height:var(--tap);font-size:16px;line-height:1.35;color:var(--ink);border-radius:8px}
[data-screen="candidates"] .cand .nm .t{flex:1;min-width:0}
[data-screen="candidates"] .cand .nm .go{font-size:14px;min-height:0;padding:0 2px 0 8px}
[data-screen="candidates"] .cand .nm.miss{padding:10px 0 4px;font-size:16px;line-height:1.35;color:var(--ink-2)}
[data-screen="candidates"] .cand .nm.miss small{display:block;font-size:14px;line-height:1.4}
[data-screen="candidates"] .dot.x{background:var(--skin-x);box-shadow:inset 0 0 0 1px var(--skin-x-line)}
/* 2 段目：メモ（入力で高さが伸びる。対応しないブラウザは JS が追う） */
[data-screen="candidates"] .memo textarea{display:block;width:100%;margin-top:2px;min-height:44px;padding:8px 10px;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);
  background:var(--surface);border:0;border-radius:12px;resize:none;field-sizing:content}
[data-screen="candidates"] .memo textarea::placeholder{color:var(--ink-2)}
[data-screen="candidates"] .memo textarea:focus{background:var(--paper);box-shadow:inset 0 0 0 1px var(--plum),0 0 0 3px var(--plum-soft)}
/* 3 段目：右寄せの文字ボタン 2 つ */
[data-screen="candidates"] .ops{display:flex;justify-content:flex-end;gap:8px}
[data-screen="candidates"] .ops button{min-height:var(--tap);padding:0 8px;font-size:14px;border-radius:8px}
[data-screen="candidates"] .ops .add{color:var(--plum)}
[data-screen="candidates"] .ops .rm{color:var(--ink-2)}
[data-screen="compare"] .dot.x.own,[data-screen="candidates"] .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：果皮色不明でも金の輪 */

/* 2026-11-01 案 A（CMO 決定 2026-11-01_一般公開の見た目と言葉_決定.md §10-2 の 5・6・8）：比較の小さな帯も一覧と同じ規則に。
   暦の外へ続く側は角を切る（cut-l・cut-r）・育成地の値（薄い帯）は不透明度ではなく地を淡く混ぜる（一覧と同じ 55%）。
   端の文字は入れない：比較の 1 列は 4 品種で約 87px（1 旬 約 10px）・2 品種でも 1 旬 約 20px で「10下」（約 25px）が入らないため、範囲の文字は帯の下に残す（比べる値そのもの） */
[data-screen="compare"] .vals .mini i.cut-l{border-radius:0 var(--r-pill) var(--r-pill) 0}
[data-screen="compare"] .vals .mini i.cut-r{border-radius:var(--r-pill) 0 0 var(--r-pill)}
[data-screen="compare"] .vals .mini i.cut-l.cut-r{border-radius:0}
[data-screen="compare"] .vals .mini i.est{opacity:1}
[data-screen="compare"] .vals .mini i.est.b{background:color-mix(in srgb,var(--skin-b) 55%,var(--surface))}
[data-screen="compare"] .vals .mini i.est.r{background:color-mix(in srgb,var(--skin-r) 55%,var(--surface))}
[data-screen="compare"] .vals .mini i.est.g{background:color-mix(in srgb,var(--skin-g) 55%,var(--surface))}
[data-screen="compare"] .vals .mini i.est.kp{background:color-mix(in srgb,var(--peel-p) 55%,var(--surface))}
[data-screen="compare"] .vals .mini i.est.ky{background:color-mix(in srgb,var(--peel-y) 55%,var(--surface))}