
/* ===== タブ ===== */
.tabs{display:grid;gap:.5rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.tab{
  -webkit-appearance:none;appearance:none;cursor:pointer;text-align:left;
  background:var(--panel2);border:2px solid var(--line);border-radius:10px;
  padding:.55rem .7rem;min-height:64px;display:flex;flex-direction:column;gap:.1rem
}
.tab .tn{font-weight:700;font-size:.95rem}
.tab .td{font-size:.74rem;color:var(--chalk-faint);line-height:1.4}
.tab[aria-selected="true"]{border-color:var(--accent);background:rgba(255,217,120,.14)}
.tab:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
@media (max-width:620px){.tab .td{display:none}.tab{min-height:48px}}


/* ===== タブ ===== */
.tabs{display:grid;gap:.5rem;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tab{
  -webkit-appearance:none;appearance:none;cursor:pointer;text-align:left;
  background:var(--panel2);border:2px solid var(--line);border-radius:10px;
  padding:.55rem .7rem;min-height:66px;display:flex;flex-direction:column;gap:.1rem
}
.tab .tn{font-weight:700;font-size:.95rem}
.tab .td{font-size:.74rem;color:var(--chalk-faint);line-height:1.4}
.tab[aria-selected="true"]{border-color:var(--accent);background:rgba(255,217,120,.14)}
.tab:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
@media (max-width:620px){.tab .td{display:none}.tab{min-height:48px}}
.panel[hidden]{display:none!important}
canvas.drag{touch-action:none;cursor:crosshair}

.facts{display:grid;gap:.4rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:.6rem}
.fact{background:var(--board2);border:1px solid var(--line);border-radius:8px;padding:.4rem .55rem}
.fact .k{font-size:.72rem;color:var(--chalk-faint)}
.fact .v{font-size:.98rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.fact.wide{grid-column:1/-1}

/* 観測地点の表 */
.ptable{width:100%;border-collapse:collapse;margin-top:.5rem;font-size:.86rem;font-variant-numeric:tabular-nums}
.ptable th{font-size:.72rem;color:var(--chalk-faint);font-weight:400;text-align:left;padding:.2rem .3rem;border-bottom:1px solid var(--line)}
.ptable td{padding:.3rem .3rem;border-bottom:1px solid rgba(60,91,78,.5)}
.chip{display:inline-block;min-width:3.6em;text-align:center;border-radius:6px;padding:.05rem .4rem;font-weight:700;color:#14110a}
.ebar{display:flex;align-items:flex-end;gap:.5rem;margin-top:.45rem;min-height:84px}
.ebar div{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.74rem;color:var(--chalk-dim)}
.ebar span{display:block;width:100%;background:var(--accent);border-radius:4px 4px 0 0;min-height:2px}
.ebar div.cur span{background:var(--quake)}
.ebar div.cur{color:var(--chalk);font-weight:700}

.seg{display:flex;gap:.3rem;background:var(--board2);border:1px solid var(--line);border-radius:999px;padding:.2rem;flex-wrap:wrap}
.seg button{
  -webkit-appearance:none;appearance:none;cursor:pointer;background:transparent;border:0;
  border-radius:999px;padding:.45rem .85rem;min-height:44px;font-size:.86rem;white-space:nowrap
}
.seg button[aria-pressed="true"]{background:var(--accent);color:#2a2110;font-weight:700}
.steps{counter-reset:st;list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.4rem}
.steps li{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;background:var(--board2);border:1px solid var(--line);border-radius:8px;padding:.4rem .5rem;font-size:.86rem}
.steps li::before{counter-increment:st;content:counter(st);width:1.5rem;height:1.5rem;border-radius:50%;background:var(--accent);color:#2a2110;font-weight:700;display:grid;place-items:center;flex:none}
.steps li .btn{margin-left:auto;padding:.35rem .7rem;min-height:44px}
.btn[aria-pressed="true"]{border-color:var(--accent);background:rgba(255,217,120,.18)}
.calc{background:var(--board2);border:1px solid var(--line);border-radius:8px;padding:.5rem .6rem;margin-top:.5rem;font-size:.88rem;font-variant-numeric:tabular-nums}
.calc b{color:var(--accent)}
.verdict{margin-top:.55rem;border-radius:8px;padding:.55rem .7rem;font-size:.9rem;display:none}
.verdict.show{display:block}
.verdict.ok{background:rgba(70,198,168,.14);border:1px solid var(--ridge)}
.verdict.ng{background:rgba(255,77,77,.12);border:1px solid var(--quake)}
.grounds{display:grid;gap:.4rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.grounds .btn{justify-content:flex-start;text-align:left;flex-direction:column;align-items:flex-start;gap:0}
.grounds .btn small{font-weight:400;font-size:.72rem;color:var(--chalk-faint)}
.lg{display:flex;align-items:center;gap:.45rem;font-size:.84rem}
.lg.off{opacity:.38}
.lg.off .nm::after{content:"（いまは見られない）";font-size:.7rem;color:var(--chalk-faint)}
