/* coin 固有 */
:root{--s0:#8a5a1c;--s1:#2f6f8f;--s2:#6a7f2a;--few:#b0302a;--grid:#e6e2da;--axis:#6b6f76}
@media (prefers-color-scheme:dark){:root{--s0:#e0b06a;--s1:#7cc0e0;--s2:#b7cf6a;--few:#ff8f86;--grid:#2e3033;--axis:#9a9ca1}}

/* ツール */
.tool{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem 1.1rem;box-shadow:var(--shadow);margin:1.2rem 0 1.6rem}
.tool .inline .field{flex:1 1 9rem;min-width:8.5rem}
.tool select{font-size:1.05rem}
.result{margin-top:1rem}
.result:empty{display:none}
.res-card{border-top:1px solid var(--line);padding-top:.9rem;margin-top:.9rem}
.res-card:first-child{border-top:0;padding-top:0;margin-top:0}
.res-name{font-weight:700;margin:0;color:var(--ink-2)}
.res-num{margin:.15rem 0 .1rem}
.res-num .unit{font-size:1rem;font-weight:400;color:var(--ink-3);margin-left:.25rem}
.res-rank{font-size:1.1rem;margin:.2rem 0}
.res-rank strong{font-size:1.5rem;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.res-meta{font-size:.9rem;color:var(--ink-3);margin:.3rem 0 0}
.tag{display:inline-block;font-size:.75rem;font-weight:700;padding:.05rem .5rem;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);margin-left:.3rem;vertical-align:.12em;white-space:nowrap}
.tag.few{border-color:var(--few);color:var(--few)}
.tag.zero{background:var(--ink-3);border-color:var(--ink-3);color:var(--bg)}
.tag.top{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){.tag.top{color:#151617}}

/* グラフ */
figure.chartbox{margin:1rem 0 1.4rem;padding:.6rem .4rem .4rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
figure.chartbox figcaption{font-size:.85rem;color:var(--ink-3);padding:.2rem .5rem 0}
svg.chart{display:block;width:100%;height:auto}
svg.chart .grid{stroke:var(--grid);stroke-width:1}
svg.chart .base,svg.chart .tick{stroke:var(--axis);stroke-width:1}
svg.chart .ax{fill:var(--axis);font-size:14px;font-family:var(--font)}
svg.chart .bar.s0{fill:var(--s0)}
svg.chart .bar.s1{fill:var(--s1)}
svg.chart .bar.s2{fill:var(--s2)}
svg.chart .few{fill:var(--few)}
svg.chart .zero text{fill:var(--few);font-size:11px;font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:.2rem 1rem;list-style:none;padding:0 .5rem;margin:.3rem 0 0;font-size:.85rem;color:var(--ink-2)}
.legend li{margin:0;display:flex;align-items:center;gap:.35rem}
.sw{display:inline-block;width:.85rem;height:.85rem;border-radius:2px;background:var(--s0)}
.sw.s1{background:var(--s1)}.sw.s2{background:var(--s2)}
.sw.few{background:var(--few);border-radius:50%;width:.5rem;height:.5rem}
.sw.zero{background:none;color:var(--few);font-weight:700;width:auto;height:auto;line-height:1}

/* 表 */
table.years td.r .bar-in{display:inline-block;height:.55rem;background:var(--s0);border-radius:1px;vertical-align:middle;margin-right:.4rem;opacity:.55}
tr.zero-row td{color:var(--ink-3)}
tr.low td{background:var(--wash)}
td.rank{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table-wrap.tall{max-height:34rem;overflow:auto}
tr:target td,tr:target th{outline:2px solid var(--accent);outline-offset:-2px;background:var(--wash)}
.spec{display:grid;gap:12px;margin:1rem 0}
@media (min-width:640px){.spec{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
.spec .card h3{font-size:1rem;margin:0 0 .3rem}
.spec .card p{margin:.2rem 0;font-size:.92rem}
.spec .card .years{color:var(--ink-3);font-size:.85rem}
.jump{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:1rem 0}
.jump a{display:inline-block;padding:.25rem .8rem;border:1px solid var(--line-2);border-radius:999px;text-decoration:none;font-size:.92rem}
.jump a:hover{background:var(--wash)}
figure.chartbox{position:relative}
.chart-tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font-size:.82rem;padding:.2rem .5rem;border-radius:6px;white-space:nowrap;z-index:2}
svg.chart [data-tip]{cursor:pointer}
