/* ヤマチョウシ ─ 一覧（トップ・/weather/・/weather/{地方}/…）（本番投入② 2026-10-01）
   ==========================================================================
   色トークン・ヘッダー・タブ・.panel は weather.css、表は matrix.css をそのまま使う。
   ★ 700px 以下は表をやめて1格子＝1カードにする（設計メモ §11-7）。
     切り替えは CSS だけ（JS を使わない。JS が落ちても画面が空にならない＝罠 #11）。
   ========================================================================== */
@import url("weather.css");
@import url("matrix.css");

.fstale{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn);
 border-radius:8px;padding:9px 13px;font-size:13px;margin:12px 0}
.pending{background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:10px;padding:16px 18px;margin:12px 0}
.pending .pt{font-size:14px;font-weight:800;margin-bottom:6px}
.pending p{margin:0;font-size:13px;color:var(--text-secondary)}
p.sub{font-size:12px;color:var(--text-muted);margin:6px 0 0}
p.sub b{color:var(--text-secondary)}

/* ---------- 地方・日のナビ ---------- */
.lregs,.ldays{display:flex;gap:5px;flex-wrap:wrap;margin:14px 0 0}
.ldays{margin-top:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.lregs a,.ldays a{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;
 border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-secondary);
 border-radius:6px;padding:5px 11px;font-size:13px;font-weight:700;white-space:nowrap}
.lregs a:hover,.ldays a:hover{border-color:var(--rock);color:var(--text-primary)}
.lregs a[aria-current="page"],.ldays a[aria-current="page"]{background:var(--rock);border-color:var(--rock);color:#fff}
.lregs .n,.lrg .n{font-weight:400;opacity:.75;font-size:11.5px}
.ldays a{flex-direction:column;align-items:flex-start;gap:0;padding:4px 10px;line-height:1.35}
.ldays a b{font-size:12.5px}
.ldays .m{font-size:10px;font-weight:700;color:#fff;border-radius:3px;padding:0 5px;margin-top:2px}
.ldays a[aria-current="page"] .m{outline:1px solid #fff}

h1.lh{font-size:22px;font-weight:800;margin:18px 0 4px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
h1.lh span{font-size:14px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums}

/* ---------- 山域チップ ---------- */
.lrg{display:flex;gap:5px;flex-wrap:wrap}
.lrg a{appearance:none;text-decoration:none;border:1px solid var(--line-strong);background:var(--surface-2);
 color:var(--text-secondary);border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700}
.lrg a:hover{border-color:var(--rock);color:var(--text-primary)}
.lrg a[aria-pressed="true"]{background:var(--rock);border-color:var(--rock);color:#fff}
.lcnt{font-size:12.5px;color:var(--text-muted);margin-top:9px;font-variant-numeric:tabular-nums}
.lcnt b{color:var(--text-primary)}

ul.lsegs{list-style:none;margin:4px 0;padding:0;font-size:12px;color:var(--text-secondary);
 display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
ul.lsegs b{color:var(--text-primary)}

/* ---------- 入口：地方×日の表 ---------- */
.lhub{margin-top:6px}
table.lhubt{border-collapse:separate;border-spacing:0;font-size:12.5px;font-variant-numeric:tabular-nums;width:100%}
table.lhubt th,table.lhubt td{padding:6px 7px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:center}
table.lhubt thead th{background:var(--surface-2);font-size:11.5px;color:var(--text-secondary);font-weight:800}
table.lhubt thead th .hs{font-size:10px;font-weight:600;color:var(--text-muted)}
table.lhubt th.cname{position:sticky;left:0;background:var(--surface-1);text-align:left;z-index:1}
table.lhubt thead th.cname{background:var(--surface-2);z-index:2}
table.lhubt th.cname a{color:inherit;font-size:14px;text-decoration:none}
table.lhubt th.cname a:hover{color:var(--rock);text-decoration:underline}
table.lhubt th.cname .rg{display:block;font-size:10.5px;font-weight:600;color:var(--text-muted)}
a.dl{display:inline-block;min-width:44px;padding:3px 6px;border-radius:5px;color:#fff;text-decoration:none;font-weight:700}
a.dl:hover{filter:brightness(1.1);text-decoration:underline}
.lhubn{margin-top:6px}
.ltaper{display:flex;height:26px;border-radius:6px;overflow:hidden;margin:6px 0 6px}
.ltaper div{display:flex;align-items:center;justify-content:center;color:#fff;font-size:11.5px;font-weight:800;min-width:0;overflow:hidden}

/* ---------- 表（701px 以上） ---------- */
.lmx{margin-top:6px}

/* ---------- カード（700px 以下・1格子＝1カード） ---------- */
.lcards{display:none}
.lc{background:var(--surface-1);border:1px solid var(--line);border-radius:10px;padding:11px 12px 10px;margin:0 0 9px}
.lch{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lcn{display:flex;flex-wrap:wrap;gap:3px 10px;margin:6px 0 8px;font-size:14px;font-weight:700}
.lcn a{color:inherit;text-decoration:none}
.lcn a:hover{color:var(--rock);text-decoration:underline}
.lct{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lct .t{background:var(--surface-2);border-radius:7px;padding:6px 9px;min-width:0}
.lct .t b{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.lct .t span{font-size:11px;color:var(--text-muted);font-weight:700}
.lct .t .bdg{margin:3px 4px 0 0}
.lcs{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px;padding-bottom:2px}
.lcs .in{display:flex;gap:2px;width:max-content}
.lcs p{display:flex;flex-direction:column;align-items:stretch;min-width:38px;margin:0;
 border-top:3px solid var(--line-strong);background:none}
.lcs p.m-msm{border-top-color:var(--msm)}.lcs p.m-gsm{border-top-color:var(--gsm)}.lcs p.m-lfm{border-top-color:var(--lfm)}
.lcs p.bw{border-left:2px solid var(--warn)}
.lcs p.bm{border-left:2px solid var(--line-strong)}
.lcs i{font-style:normal;font-size:9.5px;color:var(--text-muted);text-align:center;font-variant-numeric:tabular-nums;padding:2px 2px 1px}
.lcs i::before{content:"〜"}
.lcs b{font-size:12px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;padding:3px 2px;border-radius:3px}
.lcs b.q0{background:var(--mm0)}.lcs b.q1{background:var(--p1)}.lcs b.q2{background:var(--p2)}
.lcs b.q3{background:var(--p3)}.lcs b.q4{background:var(--p4)}.lcs b.q5{background:var(--p5)}
.lcs b.q6{background:var(--p6)}
.lcs b.q4,.lcs b.q5,.lcs b.q6{color:var(--on-light)}
.lcs .qn{border-bottom:1px dotted var(--warn)}

/* ★ 山域で絞ったときに隠す（list.js が hidden を付け外しする） */
[data-rg][hidden]{display:none!important}

@media (max-width:700px){
  .lmx{display:none}           /* ★ 表をやめてカードにする（§11-7） */
  .lcards{display:block}
  h1.lh{font-size:19px}
  .lrg{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .lrg a{white-space:nowrap}
  .mxhead .mxs.sub{font-size:11.5px}
}

/* 説明文の行は flex にしない（matrix.css の .mxs は flex で、文中の <b> が1つずつ離れて並ぶため） */
.mxhead .mxs.sub{display:block;line-height:1.75}