/* ================= 配色 =================
   ライブ用双眼鏡の主購買層はドーム・アリーナ公演の客層（女性比率が高い）。
   メーカー側も「アリーナ」「ライブ用」を軽量・白やピンクの筐体で出していて、
   野鳥用のラインとは明確に分けている。そこに寄せた色温度にする。

   ただし暗さは落とさないこと。このアプリは像の明るさを比べるので、
   明るいUIで囲むと目の順応が変わり、暗い会場での比較が成立しなくなる。
   なので「明るくする」のではなく、青寄りの暗さをバイオレット寄りに振り、
   アクセントをペンライトの色域（ピンク／アンバー）に置き換える。 */
/* ================= 配色「開演前」 =================
   客電が落ちきる直前、会場に残っているのはタングステンの琥珀だけ。
   その一色に賭けて、あとは温かい黒に沈める。

   彩度のある色は「購入リンク」と「防振ON」にしか出てこない。だから押しつけなくても
   そこが一番目立つ。主力が8.6万〜11万円の防振機である以上、画面が安く見えることが
   そのまま売上に効くので、色数を絞るほうを選んでいる。

   視野の中（#stage の黒とWebGL側）はここでは一切いじらない。像の明るさを比べる
   場所なので、周囲が明るいと目の順応が変わり 8×42 と 10×25 の差が見えなくなる。 */
:root{
  --bg:#0a0908; --bg2:#151311; --bg3:#211d19; --line:#41382d;
  --fg:#f2ede5; --fg2:#a89d8e;
  --accent:#e8a33d;          /* 主アクション。タングステンの琥珀 */
  --accentB:#7fa8b8;         /* B。舞台の煙にかかる寒色 */
  --on-accent:#1a1206;       /* アクセント上に載せる文字色 */
  /* warn は彩度を落としてある。琥珀と明度が近い（1.22:1）ので、
     同じ鮮やかさだと「押せる色」に見えてアクセントと喧嘩する。 */
  --ok:#8fbf8a; --warn:#c9bda0; --danger:#e07a6a;
  --glass:rgba(21,19,17,.84);      /* 像の上に浮かせるパネル */
  --glass-line:rgba(168,157,142,.32);
  --scrim:rgba(5,4,3,.78);         /* シート背後の暗幕 */

  /* 和文で「高く」見せる最短の道は書体。ゴシックのまま色をいじっても届かない。
     見出しだけ明朝にする。本文と数値はゴシックのまま（可読性を優先）。 */
  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;
}
*{box-sizing:border-box}
/* hidden 属性はUA既定の display:none で効くが、こちらで display:flex 等を書いた
   セレクタのほうが強く、黙って無効化される。実際 .bigbtn と .row の2箇所で
   「hidden なのに見えている」を踏んだので、個別対処をやめて全体で塞ぐ。 */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  font-size:13px; line-height:1.6;
}
h1{font-family:var(--mincho);font-size:17px;font-weight:600;margin:0;letter-spacing:.08em}
/* 小見出しはゴシックのまま、アキだけ開く。12pxの明朝は潰れて読めない。 */
h2{font-size:12px;margin:0 0 8px;color:var(--fg2);letter-spacing:.22em;font-weight:600}
.ver{font-size:10px;color:var(--fg2);border:1px solid var(--line);border-radius:3px;padding:1px 5px;margin-left:6px;vertical-align:2px}

.topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;flex-wrap:wrap;
  background:linear-gradient(180deg,#221b13 0%,var(--bg2) 100%);
  border-bottom:1px solid var(--line)}
/* タイトルはグラデーションを掛けず、象牙色の明朝で置く。この配色は
   彩度をアクセントに集中させるのが趣旨なので、題字で色を使ってしまわない。 */
.topbar h1{color:var(--fg)}
.banner{font-size:11px;color:var(--warn);background:rgba(201,189,160,.08);border:1px solid rgba(201,189,160,.25);border-radius:6px;padding:4px 10px}
.banner.ok{color:var(--ok);background:rgba(143,191,138,.08);border-color:rgba(143,191,138,.25)}
.tablewrap a{color:var(--accent)}

/* ================= レイアウト =================
   既定をスマホにしてある。以前はPCの2カラムが基準で、狭い画面はその折り返しだった。
   スマホでは操作パネルを縦に積むと、見たい像が画面外に押し出されて使えない。
   像を上に固定し、操作はタブで1枚ずつ出す。PCでは従来どおり2カラムに戻す。 */
main{display:block;padding:0}

/* ステージとタブをまとめて上に固定する。タブはこの中（HTML側）に入れてある。
   別々に position:sticky; top:0 を掛けると、背の高いステージがタブを覆って
   タップを奪う。同じブロックにしておけば重なる余地がない。 */
.stagewrap{position:sticky;top:0;z-index:5;background:var(--bg);padding:0}
#stage{position:relative;width:100%;height:56vh;height:56dvh;min-height:260px;background:#000;
  border:none;border-bottom:1px solid var(--line);border-radius:0;overflow:hidden;cursor:grab;touch-action:none}

/* タブ。指で押す前提なので高さを確保する。固定は親（.stagewrap）に任せる。 */
.tabs{display:flex;background:var(--bg2);
  border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs button{
  flex:1 0 auto;min-width:64px;min-height:44px;padding:0 12px;
  background:none;border:none;border-bottom:2px solid transparent;border-radius:0;
  color:var(--fg2);font:inherit;font-size:13px;letter-spacing:.06em;white-space:nowrap;cursor:pointer
}
.tabs button:hover{color:var(--fg)}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

.controls{display:block}
.tablewrap{margin:0}
[data-tab]{display:none}
[data-tab].paneOn{display:block}
details[data-tab].paneOn{display:block}

/* PC は従来の2カラム。タブは隠して全部出す。 */
@media(min-width:900px){
  main{display:grid;grid-template-columns:1fr 320px;grid-template-areas:"stage ctl" "table ctl";
    gap:14px;padding:14px;align-items:start}
  .stagewrap{grid-area:stage;position:static;padding:0}
  #stage{height:64vh;min-height:380px;border:1px solid var(--line);border-radius:6px}
  .tabs{display:none}
  .controls{grid-area:ctl}
  .tablewrap{grid-area:table}
  [data-tab]{display:block}
}
#stage.dragging{cursor:grabbing}
#gl{display:block;width:100%;height:100%}
#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stagehint{position:absolute;left:10px;bottom:8px;font-size:11px;color:var(--fg2);background:var(--glass);padding:2px 8px;border-radius:3px;pointer-events:none}

/* 画面内の操作ボタン。スマホで指が届く位置・大きさにする。 */
/* ボタンは最大6個まで並ぶ。狭い画面では収まらないので折り返す（切れると押せない） */
.stagebtns{position:absolute;right:10px;bottom:8px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;z-index:2}
.bigbtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:78px;min-height:46px;padding:6px 12px;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:8px;
  color:var(--fg);font:inherit;font-size:13px;font-weight:600;line-height:1.15;
  cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;
  backdrop-filter:blur(3px)
}
/* display:flex は hidden 属性より強いので、明示的に打ち消す */
.bigbtn[hidden]{display:none}
.bigbtn .sub{font-size:9px;font-weight:400;color:var(--fg2);margin-top:1px}
.bigbtn:hover{border-color:var(--accent)}
.bigbtn:active,.bigbtn.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.bigbtn:active .sub,.bigbtn.on .sub{color:var(--on-accent)}
.bigbtn.ghost{min-width:64px}
.bigbtn:disabled,.bigbtn.off{opacity:.42;cursor:default;border-color:var(--line)}
.bigbtn:disabled:hover,.bigbtn.off:hover{border-color:var(--line)}
/* センサー未有効のスマホで、最初に押してほしいボタンを目立たせる */
@keyframes attnPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,163,61,.55)}50%{box-shadow:0 0 0 6px rgba(232,163,61,0)}}
.bigbtn.attn{border-color:var(--accent);animation:attnPulse 1.8s ease-out infinite}
@media(max-width:899px){
  /* iOS は入力欄のフォントが16px未満だと、フォーカス時に勝手に拡大する。
     選択肢を触るたびに画面が飛ぶので、スマホでは16pxを死守する。 */
  .row select{font-size:16px;min-height:44px}
  .check{min-height:38px}
  .check input{width:20px;height:20px}
  .ctlgroup{border-radius:0;border-left:none;border-right:none}
  .tablewrap{border-radius:0;border-left:none;border-right:none}
  /* ヘッダーは限界まで詰める。スマホは縦が全てで、1行ぶんが像の大きさに直結する。
     出典の注記は比較表の下と機種タブにも出ているので、ここでは省く。 */
  .topbar{padding:6px 12px;gap:8px}
  /* 明朝は13pxまで落とすと字面が潰れて、ただの読みにくいゴシックに見える。
     題字として成立する下限が15px。 */
  .topbar h1{font-size:15px}
  .banner{display:none}
  /* ノッチ・ホームバーを避ける */
  .controls,.tablewrap{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .stagebtns{bottom:calc(8px + env(safe-area-inset-bottom)/2)}
  .row>span:first-child{flex-basis:68px}
  .stagebtns{left:6px;right:6px;gap:5px}
  /* ボタンは最大8個。flex:1 1 auto だと文字数の少ない「A」が30pxまで潰れるので下限を張る。
     8×40 + 隙間7×5 = 355px で、375px端末でも1行に収まる。 */
  .bigbtn{flex:1 1 auto;min-width:40px;min-height:46px;font-size:11px;padding:4px 3px;border-radius:6px}
  .bigbtn.ghost{min-width:40px}
  .bigbtn .sub{font-size:8px}
  .stagehint{display:none}
}

/* 全画面（没入）モード。iPhone は任意要素の Fullscreen API に対応しないので、
   API は「使えれば使う」に留め、実体はこのクラスで作る。どの端末でも同じ見た目になる。 */
body.immersive{overflow:hidden}
body.immersive .topbar,body.immersive .controls,body.immersive .tablewrap,
body.immersive .tabs{display:none}
body.immersive main{display:block;padding:0;gap:0}
body.immersive #stage{
  position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;
  min-height:0;border:none;border-radius:0;z-index:40
}

@media(min-width:900px){.controls{display:flex;flex-direction:column;gap:10px}}
.ctlgroup{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
/* 詳細設定は畳んでおく。一般の人が機種を選ぶのに要るのは上の3つだけなので。 */
details.adv{padding:0}
details.adv>summary{
  list-style:none;cursor:pointer;padding:9px 12px;font-size:12px;color:var(--fg2);
  letter-spacing:.08em;font-weight:600;display:flex;align-items:center;gap:6px;user-select:none
}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::before{content:"▸";color:var(--fg2);font-size:10px;transition:transform .15s}
details.adv[open]>summary::before{transform:rotate(90deg)}
details.adv>summary:hover{color:var(--fg)}
details.adv>*:not(summary){margin-left:12px;margin-right:12px}
details.adv>*:last-child{margin-bottom:10px}

/* ================= 像の上の情報帯 =================
   1行目＝機種名（押すと機種選択シートが開く）、2行目＝その機種の数値。
   像の下のキャプション（旧 .panelLabels）を廃止して数値をここへ集約したので、
   全画面でも数値が読める。ここが唯一の数値表示になる。

   2行目は「ラベルを上・値を下」に積む。横に並べると1項目に「ラベル幅＋値幅」が
   要るが、積めば max(ラベル, 値) だけで済む。ラベル語を1文字も略さないまま
   5項目が1行に入るのはこのためで、実測（375px・2ペイン、1枚の内寸167px）で
   必要幅は典型145.5px／最悪144.2px（12.8°/68.6°/7.1mm/100%/2.84°）。

   高さはファイル末尾の @media(max-width:899px){button{min-height:40px}} の床に
   ほぼ吸われる（現行パネルは中身22.85pxで17px空回りしている）。実測で
   パネル 40px→43px、像の上端を覆う量 46px→47px。PCは床が無いので 31.8px→51px。 */
.stagetop{position:absolute;left:0;right:0;top:0;display:flex;gap:6px;padding:4px 6px;
  pointer-events:none;z-index:2}
.stag{
  flex:1;min-width:0;display:block;text-align:center;font-family:inherit;color:var(--fg);
  /* var(--glass) の .84 のままだと、明るい像の上で 9px の --fg2 ラベルが
     4.33:1 まで落ちて AA(4.5:1) を割る。.88 で 4.98:1 に戻る
     （値の --fg は 11.39:1、--warn は 7.13:1）。像の透過は 16%→12%。
     ラベルが読めないと数値の意味を画面内から復元できないので、この4ポイントは払う。 */
  background:rgba(21,19,17,.88);border:1px solid transparent;border-radius:6px;
  padding:2px 5px;backdrop-filter:blur(3px);overflow:hidden;
  text-shadow:0 1px 1px rgba(5,4,3,.6);
  pointer-events:auto;cursor:pointer;touch-action:manipulation
}
.stag:hover{border-color:var(--accent)}
.stag.solo{flex:0 1 auto;margin:0 auto;max-width:88%}

/* --- 1行目：[タグ][機種名][12×30][防振][ケラレ][▾]。伸縮するのは機種名だけ --- */
.stag .l1{display:flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;line-height:14px}
.stag .nm{flex:1 1 auto;min-width:0;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stag .tag{flex:none;min-width:14px;border-radius:3px;color:var(--on-accent);font-size:10px}
.stag .tag.a{background:var(--accent)}
.stag .tag.b{background:var(--accentB)}
.stag .tag.eye{background:var(--fg2)}
.stag .sp{flex:none;color:var(--fg2);font-weight:400;font-size:10px;
  font-variant-numeric:tabular-nums}
/* 状態チップ。防振は 塗り＝作動中／枠線＝載っているが切ってある。
   色だけに頼らないので、色が見分けにくくても形で区別がつく。 */
.stag .chip{flex:none;font-size:9px;font-weight:600;line-height:11px;padding:0 3px;
  border-radius:3px;border:1px solid var(--glass-line);color:var(--fg2)}
.stag .chip.on{background:var(--ok);border-color:var(--ok);color:var(--on-accent)}
.stag .chip.clip{color:var(--warn);border-color:var(--warn)}
/* ▾ は実体の要素。旧実装の .stag::after は .stag 全体に掛けた text-overflow に
   食われるので、機種名が長い端末ほど「押せる」合図が消えていた（375pxで再現）。 */
.stag .cv{flex:none;color:var(--fg2);font-size:9px;font-weight:400}

/* --- 2行目：数値。ラベルの下に値を積む --- */
/* 溢れたら折り返す（切り落とさない）。数字が桁の途中で切れると、
   読めないのではなく誤読するので、壊れ方は折返しに倒してある。
   折り返しても帯は約70pxで、円の上端（2ペインで実測94px超）には届かない。 */
.stag .l2{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;
  font-variant-numeric:tabular-nums}
.stag .m{display:flex;flex-direction:column;align-items:center}
.stag .m .k{font-size:9px;line-height:10px;color:var(--fg2);white-space:nowrap}
.stag .m .v{font-size:11px;line-height:12px;font-weight:600;color:var(--fg);white-space:nowrap}
.stag .m .u{font-size:8px;color:var(--fg2);margin-left:1px}
.stag .m.warn .v{color:var(--warn)}

/* PCはステージが広い（1280pxで1枚430px）ので一段大きく置く。落とす項目は無い。 */
@media(min-width:900px){
  .stag .l1{font-size:12px;line-height:15px}
  .stag .m .k{font-size:10px;line-height:11px}
  .stag .m .v{font-size:12px;line-height:13px}
}
/* 2ペインではメーカー名を落とす。タグ色・機種名・数値で特定でき、メーカー名は
   機種選択シートが見出しで持っている。実測で「Vixen アテラⅡ H12×3…」だったのが
   「アテラⅡ H12×30」が丸ごと出るに変わる（名前の実効幅 102px、省略なし）。 */
@media(max-width:599px){.stag:not(.solo) .br{display:none}}
/* 320px級（iPhone SE 初代）の2ペインだけ5項目が入らない（必要144.2px / 内寸139px）。
   落とすのは見掛視界——円の大きさが見掛視界そのものを実スケールで描いているので、
   5つのうち消して失われる情報が最も少ない。実測116.5pxで1行に収まる。
   単独表示（スマホの既定）では落とさない。 */
@media(max-width:339px){.stag:not(.solo) .m.afov{display:none}}


/* 明るさのポップオーバー */
.popover{
  position:absolute;left:50%;transform:translateX(-50%);bottom:64px;z-index:6;
  background:rgba(21,19,17,.94);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px 6px;width:min(320px,86%);backdrop-filter:blur(4px)
}
.popname{text-align:center;font-size:12px;font-weight:600;margin-bottom:4px}
.popover input[type=range]{width:100%;accent-color:var(--accent);height:32px}
.popticks{display:flex;justify-content:space-between;font-size:9px;color:var(--fg2);margin-top:-2px}

/* 機種の選び直しシート */
.pickwrap{position:absolute;inset:0;z-index:20;background:var(--scrim);display:flex;
  align-items:flex-end;justify-content:center}
.picksheet{
  width:100%;max-width:520px;max-height:86%;display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--line);border-radius:10px 10px 0 0
}
.pickhead{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.pickhead button{background:none;border:none;color:var(--fg2);font-size:22px;line-height:1;padding:0 6px;min-height:40px}
.picklist{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0}
.picklist .grp{padding:6px 12px 2px;font-size:10px;color:var(--fg2);letter-spacing:.08em}
.picklist button{
  display:block;width:100%;text-align:left;background:none;border:none;border-radius:0;
  color:var(--fg);font:inherit;font-size:13px;padding:10px 12px;min-height:44px;cursor:pointer
}
.picklist button:hover{background:var(--bg3)}
.picklist button.cur{background:var(--accent);color:var(--on-accent);font-weight:600}
.picklist .sp{color:var(--fg2);font-size:11px;margin-left:8px}
.picklist button.cur .sp{color:var(--on-accent)}
.stag[hidden]{display:none}

/* 機種の絞り込み */
details.subdet{border:1px solid var(--line);border-radius:4px;margin:10px 0 0;background:var(--bg)}
details.subdet>summary{
  list-style:none;cursor:pointer;padding:8px 10px;min-height:40px;font-size:12px;color:var(--fg2);
  display:flex;align-items:center;gap:6px;user-select:none
}
details.subdet>summary::-webkit-details-marker{display:none}
details.subdet>summary::before{content:"▸";font-size:10px;transition:transform .15s}
details.subdet[open]>summary::before{transform:rotate(90deg)}
details.subdet>summary:hover{color:var(--fg)}
details.subdet>*:not(summary){margin:0 10px}
details.subdet>*:last-child{margin-bottom:10px}
#filterCount{margin-left:auto;color:var(--fg2);font-size:11px;font-weight:400}
#filterCount.on{color:var(--accent)}

/* 購入リンク */
/* 平面図。タップで席を選ぶので touch-action:none にして、SVG内のドラッグを
   ページのスクロールに奪われないようにする（#stage と同じ理由）。
   viewBoxは会場の実寸（メートル）をそのまま使い、拡縮はSVG任せにする。 */
.seatplanWrap{margin:6px 0}
/* 階ボタン。表示（今どの階か）と操作（押すとその階に限定）を兼ねる軽いボタン。
   .bigbtnほど主張させたくないので、.tabs button に近い作りにする。
   高さだけは指の当てやすさを優先して44px（375px幅で折り返しても押せるように）。 */
.seatplanTabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}
.seatplanTabs button{
  min-height:44px;padding:4px 10px;
  background:var(--bg3);border:1px solid var(--line);border-radius:4px;
  color:var(--fg2);font:inherit;font-size:11px;letter-spacing:.02em;
  cursor:pointer;touch-action:manipulation
}
.seatplanTabs button:hover{border-color:var(--accent);color:var(--fg)}
.seatplanTabs button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}
.seatplanSvg{display:block;width:100%;height:200px;background:var(--bg);
  border:1px solid var(--line);border-radius:6px;touch-action:none;cursor:pointer}

.buyrow{display:flex;gap:6px;margin:0 0 8px 26px;flex-wrap:wrap}
/* 先頭のショップだけ琥珀で塗る。彩度のある色をここと防振ONにしか出さないので、
   押しつけなくても画面の中で一番強くなる。2つを同じ強さで並べると、
   どちらを押せばいいのか決められずどちらも押されない。 */
.buylink{
  display:inline-block;padding:4px 10px;border-radius:4px;font-size:11px;text-decoration:none;
  letter-spacing:.08em;
  background:var(--bg3);border:1px solid var(--line);color:var(--fg)
}
.buylink.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.buylink:hover{border-color:var(--accent);color:var(--accent)}
.buylink.primary:hover{color:var(--on-accent);filter:brightness(1.08)}
.buylink .pr{color:var(--fg2);font-size:9px;margin-left:4px}
.row{display:flex;align-items:center;gap:8px;margin:5px 0}
.row>span:first-child{flex:0 0 76px;color:var(--fg2);font-size:11px}
.row select{flex:1;min-width:0;background:var(--bg3);color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:4px 6px;font:inherit}
.row input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.row output{flex:0 0 46px;text-align:right;color:var(--fg2);font-variant-numeric:tabular-nums;font-size:11px}
.unit{color:var(--fg2);font-size:11px}
.check{display:flex;align-items:center;gap:6px;margin:6px 0;font-size:12px;cursor:pointer}
.check input{accent-color:var(--accent)}
.hint{font-size:11px;color:var(--fg2);margin:6px 0 0}
.btnrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
button{background:var(--bg3);color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:5px 10px;font:inherit;cursor:pointer}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}
button.danger:hover{border-color:var(--danger);color:var(--danger)}
.tagA,.tagB{flex:0 0 18px !important;height:18px;line-height:18px;text-align:center;border-radius:3px;font-weight:700;font-size:11px;color:var(--on-accent)}
.tagA{background:var(--accent)}
.tagB{background:var(--accentB)}
/* A/Bタグは .row の first-child なので `.row>span:first-child` に色を奪われ、
   上の指定が負けていた（実測 1.24:1 ＝ 文字が見えていない）。
   :first-child は擬似クラスなので向こうは 0-2-1 と高く、`.row>.tagA`（0-2-0）でも
   まだ足りない。同じ行の flex が既に !important で同じ衝突を回避しているので、
   色もそれに合わせる。 */
.tagA,.tagB{color:var(--on-accent) !important}

.tablewrap{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
/* 表は値の列を nowrap にしてあるので、狭い画面では枠より広くなる（375px幅で426px出た）。
   本文を横スクロールさせるのは論外なので、表だけ自分の中でスクロールさせる。 */
#specTable{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:4px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left;color:var(--fg2);white-space:normal}
thead th{color:var(--fg);font-weight:600;border-bottom:2px solid var(--line)}
thead th.colA{color:var(--accent)}
thead th.colB{color:var(--accentB)}
td.win{color:var(--ok);font-weight:600}
tr.sep td{border-bottom:2px solid var(--line);padding-top:10px;color:var(--fg2);font-size:11px}
.unver{color:var(--warn);font-size:10px;margin-left:4px}

kbd{background:var(--bg3);border:1px solid var(--line);border-radius:3px;padding:0 4px;font-size:10px}

/* センサーの診断表示。実機でしか再現しない不具合を、その場で読めるようにする。 */
.diag{margin:8px 0 0;padding:6px 8px;background:var(--bg3);border:1px solid var(--line);border-radius:4px;
  font-family:Consolas,monospace;font-size:10px;line-height:1.55;color:var(--fg2);white-space:pre-wrap;word-break:break-word}
.diag[hidden]{display:none}
.diag b{color:var(--fg)}
.diag .ng{color:var(--danger)}
.diag .okv{color:var(--ok)}

/* ================= スマホ用の最終上書き =================
   .row select 等の `font:inherit` は宣言位置が後ろなので、
   前方の media クエリで font-size を書いても勝てない（実測13pxのままだった）。
   iOS は入力欄が16px未満だとフォーカス時に勝手にズームし、選択のたびに画面が飛ぶ。
   ここはファイル末尾に置いて確実に効かせる。 */
@media(max-width:899px){
  .row select{font-size:16px;min-height:44px}
  .row input[type=range]{height:34px}
  button{min-height:40px;font-size:13px}
  .buylink{min-height:36px;line-height:26px;font-size:12px}
}

/* 狭い画面での比較表。セルを詰めて、横スクロールする幅そのものを減らす。 */
@media(max-width:899px){
  #specTable table{font-size:12px}
  #specTable th,#specTable td{padding:4px 6px}
  #specTable th:first-child,#specTable td:first-child{
    position:sticky;left:0;background:var(--bg2);z-index:1;max-width:44vw
  }
  #specTable thead th:first-child{background:var(--bg2)}
}