/* 宝石性格診断の「みんなの統計」（2026-10-05）: 結果の画面の「いまの統計」の箱（.hst-box）と、統計のページ /hoseki/stats/（.hst-pg）
   部品は site/js/pages/hoseki-stats-ui.js・hoseki-stats.js が作る。256のマスは夜の地（宝石の色が光るように）
   押せるものは高さ 44px 以上・幅320pxで横にはみ出さない・そろえて読む数字は tabular-nums（.mono）・大きな人数は比例の数字 */
:root { --hst-night: #151a26; --hst-sub: #9aa5bb; --hst-on: #dfe4ef; }

/* ─── 256のマスの地図（16行×16列・見るだけ）───────────────── */
.hst-map { margin: 0; padding: 12px 12px 10px; border-radius: 18px; color: var(--hst-on); display: grid; gap: 10px;
  background: radial-gradient(90% 60% at 50% 0%, rgba(123, 92, 255, .16), transparent 70%), var(--hst-night); }
.hst-grid { display: grid; grid-template-columns: 30px repeat(8, minmax(0, 1fr)) 5px repeat(8, minmax(0, 1fr)); gap: 2px; align-items: center; }
.hst-gh { grid-row: 1; font-family: var(--f-round); font-size: 11px; font-weight: 800; color: var(--hst-sub); text-align: center; letter-spacing: .06em; padding-bottom: 2px; }
.hst-rh { grid-column: 1; font-family: var(--f-round); font-size: 9.5px; font-weight: 700; color: var(--hst-sub); line-height: 1; letter-spacing: .02em; }
.hst-c { position: relative; display: block; aspect-ratio: 1; border-radius: 2px; }
.hst-c::before, .hst-cell::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--c); opacity: var(--a); }
.hst-c.z, .hst-cell.z { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }
.hst-c.z::before, .hst-cell.z::before { opacity: 0; }
.hst-c.me { z-index: 1; outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 3px rgba(10, 13, 22, .8), 0 0 14px 4px color-mix(in srgb, var(--c) 80%, #fff); animation: hst-me 1.4s ease-in-out infinite alternate; }
@keyframes hst-me { from { outline-color: #fff; } to { outline-color: color-mix(in srgb, var(--c) 60%, #fff); } }
.hst-map figcaption { display: grid; gap: 6px; }
.hst-key { font-size: 11.5px; color: var(--hst-sub); line-height: 1.6; }
.hst-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--hst-on); }
.hst-legend li { display: inline-flex; align-items: center; gap: 5px; }
.hst-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: rgba(255, 255, 255, var(--a, 0)); }
.hst-legend i.z { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.hst-legend i.me { background: rgba(255, 255, 255, .25); outline: 2px solid #fff; outline-offset: 1px; margin: 0 2px; }
.hst-lv { gap: 3px !important; }
.hst-lv span { color: var(--hst-sub); }
.hst-lv span:first-child { margin-right: 3px; }
.hst-lv span:last-child { margin-left: 3px; }
.hst-map.big { padding: 14px 12px 12px; }
.hst-map.big .hst-rh { font-size: 10.5px; }
@media (min-width: 420px) { .hst-grid { grid-template-columns: 36px repeat(8, minmax(0, 1fr)) 7px repeat(8, minmax(0, 1fr)); } .hst-rh { font-size: 10.5px; } }

/* ─── 結果の画面の「いまの統計」の箱 ─────────────────────── */
.hst-box { min-height: 200px; }
.hst-box h3 { font-size: 15.5px; margin-bottom: 6px; }
.hst-wait { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; min-height: 120px; }
.hst-spin { width: 22px; height: 22px; margin: 0; border-width: 3px; flex: none; }
.hst-err p { color: var(--danger); font-size: 14.5px; }
.hst-total { font-size: 13.5px; color: var(--ink2); }
.hst-total b { font-family: var(--f-round); font-size: 18px; color: var(--ink); margin-right: 2px; }
.hst-me { grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border-left: 4px solid var(--c); }
.hst-me .hst-gem { width: 56px; height: 56px; }
.hst-me p { font-size: 14.5px; line-height: 1.7; }
.hst-me p b { font-family: var(--f-round); }
.hst-me-type { color: var(--ink2); font-size: 13.5px !important; margin-top: 2px; }
.hst-unseen { font-size: 14px; color: var(--ink2); }
.hst-unseen b { font-family: var(--f-round); color: var(--ink); font-size: 16px; }
.hst-more { margin-top: -4px; }

/* 箱を縦に詰める（2026-10-06: たくさん集まったあと 390 幅で約1,470px → 約950px。中身は減らさない） */
.hst-box { gap: 8px; }
.hst-box > h2 { margin-top: -4px; }
.hst-box .hst-total { line-height: 1.45; }
.hst-box .hst-total b { font-size: 17px; }
.hst-box .hst-total small { font-size: 12px; color: var(--muted); }
.hst-box .hst-me { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 9px 12px; }
.hst-box .hst-me .hst-gem { width: 40px; height: 40px; }
.hst-box .hst-me p { font-size: 13.5px; line-height: 1.55; }
.hst-box .hst-me-type { font-size: 12.5px !important; margin-top: 0; }
/* 256のマスは、この箱では少し横長に（行の高さを詰める）。統計のページの大きな地図は正方形のまま */
.hst-box .hst-map { padding: 8px 10px; gap: 6px; }
.hst-box .hst-c { aspect-ratio: 3 / 2; }
.hst-box .hst-gh { font-size: 10.5px; padding-bottom: 0; }
.hst-box .hst-map figcaption { gap: 3px; }
.hst-box .hst-key { font-size: 11px; line-height: 1.5; }
.hst-box .hst-map .hst-unseen { font-size: 12.5px; color: var(--hst-on); line-height: 1.5; }
.hst-box .hst-map .hst-unseen b { color: #fff; font-size: 14px; }
/* 多い宝石と少ない宝石を横に2列（幅320でも）。見出し・並び・注を行でそろえる（subgrid） */
.hst-box .hst-ranks2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 8px; }
.hst-box .hst-ranks2 > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; row-gap: 5px; min-width: 0; }
.hst-box .hst-ranks2 h3 { font-size: 14px; line-height: 1.35; margin: 0; align-self: start; }
.hst-box .hst-ranks2 h3 small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.hst-box .hst-ranks2 .hst-rank { gap: 5px; align-content: start; }
/*   1つの札: 1行目に名前（いっぱいの幅・順位の丸のぶんだけ字下げ）、その下に宝石の絵と「コード × 輝き」「1,000人に◯人」 */
.hst-box .hst-ranks2 .hst-rank a { position: relative; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "t t" "g c" "g v"; gap: 2px 8px; min-height: 44px; padding: 6px 8px 7px 7px; border-radius: 12px; }
.hst-box .hst-ranks2 .hst-rank .hst-no { position: absolute; left: 7px; top: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 10.5px; line-height: 17px; box-sizing: border-box; }
.hst-box .hst-ranks2 .hst-rank .hst-name { display: contents; }
.hst-box .hst-ranks2 .hst-rank .hst-name b { grid-area: t; font-size: 13px; line-height: 17px; text-indent: 22px; }
.hst-box .hst-ranks2 .hst-rank .hst-gem { grid-area: g; width: 34px; height: 34px; border-radius: 9px; align-self: center; }
.hst-box .hst-ranks2 .hst-rank .hst-name small { grid-area: c; align-self: end; font-size: 11px; line-height: 1.3; word-break: auto-phrase; }
.hst-box .hst-ranks2 .hst-rank .hst-name em { margin-left: 4px; padding: 0 5px; font-size: 10px; }
.hst-box .hst-ranks2 .hst-rank .hst-val { grid-area: v; align-self: start; text-align: left; font-size: 12.5px; }
.hst-box .hst-ranks2 .note { font-size: 12px; line-height: 1.5; }
.hst-notes { display: grid; gap: 2px; }
.hst-notes .note { font-size: 12.5px; line-height: 1.6; }
@media (max-width: 359px) {
  .hst-box .hst-ranks2 .hst-rank a { grid-template-columns: 30px minmax(0, 1fr); gap: 2px 6px; padding: 6px 6px 6px 5px; }
  .hst-box .hst-ranks2 .hst-rank .hst-no { left: 5px; }
  .hst-box .hst-ranks2 .hst-rank .hst-gem { width: 30px; height: 30px; border-radius: 8px; }
  .hst-box .hst-ranks2 .hst-rank .hst-name b { font-size: 12.5px; }
}
@media (min-width: 560px) {
  .hst-box .hst-ranks2 { gap: 0 12px; }
  .hst-box .hst-ranks2 .hst-rank a { grid-template-columns: 40px minmax(0, 1fr); gap: 3px 10px; padding: 8px 12px 8px 9px; }
  .hst-box .hst-ranks2 .hst-rank .hst-no { left: 9px; top: 8px; }
  .hst-box .hst-ranks2 .hst-rank .hst-gem { width: 40px; height: 40px; }
  .hst-box .hst-ranks2 .hst-rank .hst-name b { font-size: 14.5px; line-height: 19px; text-indent: 24px; }
  .hst-box .hst-ranks2 .hst-rank .hst-name small { font-size: 12px; }
  .hst-box .hst-ranks2 .hst-rank .hst-val { font-size: 13.5px; }
}

/* 集計中（100人まで）・段階のメーター */
.hst-collect { gap: 10px; padding: 14px 16px; }
.hst-collect-h { font-size: 15px; }
.hst-collect-h b { font-family: var(--f-round); font-size: 17px; margin-right: 2px; }
.hst-meter { display: grid; gap: 5px; }
.hst-meter-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 13px; color: var(--ink2); }
.hst-meter-head b { font-family: var(--f-round); color: var(--ink); }
.hst-meter-bar { height: 8px; border-radius: 4px; background: #eceef3; overflow: hidden; }
.hst-meter-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #4cc9f0, #7b5cff 60%, #c24f9b); }
.hst-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.hst-steps li { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 8px; }
.hst-steps b { font-family: var(--f-round); color: var(--ink2); white-space: nowrap; }
.hst-steps li.on { color: var(--ink2); }
.hst-steps li.on b::after { content: " ✓"; color: #2fbf7f; }

/* 多い・少ないの並び（宝石の絵つき） */
.hst-ranks { display: grid; gap: 14px; }
.hst-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hst-rank a { display: grid; grid-template-columns: 1.5em 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 52px; padding: 6px 12px 6px 8px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 12px; text-decoration: none; color: inherit; }
.hst-rank a:hover { border-color: #c9d3e3; border-left-color: var(--c); }
.hst-rank li.me a { background: color-mix(in srgb, var(--c) 10%, #fff); }
.hst-gem { display: block; width: 40px; height: 40px; border-radius: 10px; background: #171c27; object-fit: cover; }
.hst-no { font-family: var(--f-round); font-weight: 800; font-size: 15px; color: var(--muted); text-align: center; }
.hst-name { display: grid; gap: 1px; min-width: 0; }
.hst-name b { font-size: 15px; line-height: 1.35; word-break: auto-phrase; }
.hst-name small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.hst-name small .mono { font-family: var(--f-round); font-weight: 700; letter-spacing: .03em; }
.hst-name em { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.6; }
.hst-val { font-family: var(--f-round); font-weight: 800; font-size: 13.5px; text-align: right; white-space: nowrap; }
/* 幅400px未満: 値（1,000人に◯人）を名前の下に（名前を1行に収めるため） */
@media (max-width: 399px) {
  .hst-rank:not(.hst-rank-bars) a { grid-template-columns: 1.5em 40px minmax(0, 1fr); grid-template-areas: "no img name" "no img val"; row-gap: 0; }
  .hst-rank:not(.hst-rank-bars) .hst-no { grid-area: no; }
  .hst-rank:not(.hst-rank-bars) .hst-gem { grid-area: img; }
  .hst-rank:not(.hst-rank-bars) .hst-name { grid-area: name; }
  .hst-rank:not(.hst-rank-bars) .hst-val { grid-area: val; text-align: left; font-size: 13px; }
}

/* ─── 統計のページ ───────────────────────────── */
.hst-pg { padding-bottom: 8px; }
.hst-hero { margin-top: 2px; padding: 18px 16px 16px; border-radius: 24px; color: var(--hk-ink-on, #f4f6fb); display: grid; gap: 8px;
  background: radial-gradient(110% 55% at 50% 0%, rgba(123, 92, 255, .22), transparent 70%), var(--hk-night, #171c27); box-shadow: 0 22px 48px -30px rgba(10, 14, 24, .75); }
.hst-hero .hk-eyebrow { text-align: center; }
.hst-hero h1 { font-family: var(--hk-serif, serif); font-size: clamp(26px, 7.4vw, 34px); letter-spacing: .05em; line-height: 1.3; color: #fff; text-align: center; text-shadow: 0 0 22px rgba(143, 182, 255, .35); }
.hst-hero-lead { font-size: 14px; line-height: 1.75; color: var(--hst-sub); text-align: center; }
.hst-hero-body { display: grid; gap: 10px; min-height: 160px; }
.hst-hero-body > .spinner { border-color: rgba(255, 255, 255, .2); border-top-color: #fff; }
.hst-big { display: flex; justify-content: center; align-items: baseline; gap: 6px; margin-top: 4px; }
.hst-big b { font-family: var(--f-round); font-size: 50px; font-weight: 800; line-height: 1; color: #fff; letter-spacing: .01em; }
.hst-big span { font-size: 16px; font-weight: 700; color: var(--hst-on); }
.hst-at { text-align: center; font-size: 12.5px; color: var(--hst-sub); }
.hst-collect-dark { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.hst-collect-dark .hst-collect-h, .hst-collect-dark .hst-meter-head, .hst-collect-dark .hst-meter-head b, .hst-collect-dark .hst-steps li.on, .hst-collect-dark .hst-steps b { color: var(--hst-on); }
.hst-collect-dark .hst-collect-h { font-size: 14px; }
.hst-collect-dark .hst-steps { color: var(--hst-sub); }
.hst-collect-dark .hst-meter-bar { background: rgba(255, 255, 255, .14); }
.hst-hero .hst-map { padding: 4px 0 0; background: none; }
.hst-you { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 13.5px; color: var(--hst-on); }
.hst-you i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; outline: 2px solid #fff; outline-offset: 1px; margin-right: 6px; background: rgba(255, 255, 255, .25); }
.hst-err-dark { display: grid; gap: 10px; padding: 8px 0; }
.hst-err-dark p { color: #ffc7d2; font-size: 14.5px; }
.hst-err-dark .btn { background: #fff; color: #15171c; }
.hst-sec { scroll-margin-top: 70px; }
.hst-sub { font-size: 14px; color: var(--ink2); }
.hst-locked { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; padding: 14px; border: 1px dashed #c9ced8; border-radius: 14px; background: #fff; }
.hst-locked p { font-size: 14px; color: var(--ink2); margin: 0; }
.hst-lock { position: relative; width: 22px; height: 18px; margin-top: 8px; border-radius: 4px; background: #a3a8b3; justify-self: center; }
.hst-lock::before { content: ""; position: absolute; left: 4px; top: -9px; width: 14px; height: 12px; border: 3px solid #a3a8b3; border-bottom: 0; border-radius: 8px 8px 0 0; box-sizing: border-box; }
.hst-fold summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: 14.5px; list-style: none; }
.hst-fold summary::-webkit-details-marker { display: none; }
.hst-fold summary::after { content: "＋"; margin-left: auto; padding-left: 10px; font-weight: 800; color: var(--muted); }
.hst-fold[open] summary::after { content: "−"; }
.hst-fold > ol, .hst-fold > ul, .hst-fold > .tbl { margin-top: 4px; }

/* 256のマス（宝石ごとの表・マスは押せる 44px） */
.hst-table { background: var(--hst-night); color: var(--hst-on); border-radius: 18px; padding: 4px 8px 12px; display: grid; gap: 3px; }
.hst-tr { display: grid; grid-template-columns: 78px repeat(8, minmax(0, 1fr)); gap: 3px; align-items: stretch; }
.hst-thead { position: sticky; top: 56px; z-index: 3; background: var(--hst-night); padding: 8px 0 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hst-th { writing-mode: vertical-rl; justify-self: center; font-size: 11px; font-weight: 700; line-height: 1.1; letter-spacing: .04em; color: var(--hst-sub); white-space: nowrap; }
.hst-tgroup { display: grid; gap: 3px; }
.hst-tg-h { margin: 8px 0 2px; font-size: 12px; color: var(--hst-sub); }
.hst-tg-h b { font-family: var(--f-round); color: var(--hst-on); margin-right: 6px; letter-spacing: .06em; }
.hst-tl { display: flex; align-items: center; gap: 5px; min-height: 44px; min-width: 0; text-decoration: none; color: inherit; border-radius: 8px; }
.hst-tl .hst-gem { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.hst-tl > span { display: grid; min-width: 0; }
.hst-tl b { font-family: var(--f-round); font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; }
.hst-tl small { display: none; font-size: 11px; color: var(--hst-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hst-cell { position: relative; display: block; min-height: 44px; border-radius: 6px; }
.hst-cell.me { z-index: 1; outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 12px 3px color-mix(in srgb, var(--c) 70%, #fff); }
.hst-cell:hover::after, .hst-tl:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.hst-cell:hover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hst-cell:focus-visible, .hst-tl:focus-visible { outline: 3px solid #7ff0ff; outline-offset: 1px; z-index: 2; }
.hst-table > .hst-legend { margin-top: 8px; }
/* 幅360px未満: 宝石の表の行の頭は4文字だけ（絵を出すとマスが細くなりすぎる） */
@media (max-width: 359px) {
  .hst-tr { grid-template-columns: 46px repeat(8, minmax(0, 1fr)); }
  .hst-tl .hst-gem { display: none; }
}
@media (min-width: 400px) {
  .hst-tr { grid-template-columns: 116px repeat(8, minmax(0, 1fr)); }
  .hst-tl small { display: block; }
  .hst-tl b { font-size: 11.5px; }
}

/* 32の宝石の順位（棒つき）・8つの輝き */
.hst-rank-bars a { grid-template-columns: 1.5em 32px minmax(0, 1fr) minmax(32px, 22%) 3.4em; gap: 8px; min-height: 46px; padding: 5px 10px 5px 6px; }
.hst-rank-bars .hst-gem { width: 32px; height: 32px; border-radius: 8px; }
.hst-rank-bars .hst-name b { font-size: 14px; }
.hst-bar { display: block; height: 10px; border-radius: 0 4px 4px 0; background: #eef0f4; overflow: hidden; }
.hst-bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--c, #7b5cff) 72%, #15171c); }
.hst-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hst-hbars li { display: grid; grid-template-columns: 14px minmax(0, 1fr) minmax(48px, 30%) 3.4em; gap: 8px; align-items: center; min-height: 32px; font-size: 14px; }
.hst-hbars .hst-bar i { background: #6a55d8; }
.hst-hbars li.me { font-weight: 700; }
.hst-hbars .hst-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.hst-hbars .hst-name em { margin-left: 0; }
.hst-sw { width: 14px; height: 14px; border-radius: 4px; transform: rotate(45deg) scale(.82); background: var(--c); box-shadow: 0 0 0 1px rgba(21, 23, 28, .35); }

/* 4文字の軸と -A/-T（左右に分かれた1本の帯） */
.hst-axes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hst-axes li { display: grid; gap: 4px; }
.hst-axis-h { font-size: 12px; color: var(--muted); font-weight: 700; }
.hst-axis { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "l r" "bar bar"; gap: 4px 8px; }
.hst-axis-l { grid-area: l; display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
.hst-axis-r { grid-area: r; display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; font-size: 14px; }
.hst-axis b { font-family: var(--f-round); font-size: 16px; }
.hst-axis em { font-style: normal; font-family: var(--f-round); font-weight: 800; }
.hst-axis-bar { grid-area: bar; display: flex; gap: 2px; height: 14px; position: relative; }
.hst-axis-bar i { display: block; height: 100%; }
.hst-axis-bar .hi { background: var(--c); border-radius: 4px 0 0 4px; }
.hst-axis-bar .lo { background: color-mix(in srgb, var(--c) 30%, #fff); border-radius: 0 4px 4px 0; }
.hst-axis-bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: #15171c; opacity: .35; }

/* 5つの物差しの分布（同じ目盛り） */
.hst-hists { display: grid; gap: 12px; }
@media (min-width: 520px) { .hst-hists { grid-template-columns: 1fr 1fr; } }
.hst-hist { margin: 0; padding: 12px 12px 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 8px; }
.hst-hist figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink2); }
.hst-hist figcaption > b { font-size: 15px; color: var(--ink); }
.hst-hist figcaption span b { font-family: var(--f-round); color: var(--ink); }
.hst-plot { display: grid; grid-template-columns: 2.8em minmax(0, 1fr); grid-template-rows: 96px auto; column-gap: 6px; row-gap: 3px; padding-top: 6px; }
.hst-yax { position: relative; grid-row: 1; grid-column: 1; }
.hst-yax span { position: absolute; right: 0; transform: translateY(50%); font-size: 10.5px; color: var(--muted); line-height: 1; }
.hst-area { position: relative; grid-row: 1; grid-column: 2; }
.hst-grid-l { position: absolute; left: 0; right: 0; height: 1px; background: #eceef3; }
.hst-grid-l:first-child { background: #b9bec9; }
.hst-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.hst-cols span { flex: 1 1 0; max-width: 24px; background: var(--c); border-radius: 4px 4px 0 0; }
.hst-mean { position: absolute; top: -6px; bottom: 0; width: 2px; margin-left: -1px; background: #15171c; border-radius: 1px; }
.hst-xax { grid-row: 2; grid-column: 2; position: relative; height: 1.3em; font-size: 10.5px; color: var(--muted); }
.hst-xax span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.hst-xax span:first-child { transform: none; }
.hst-xax span:last-child { transform: translateX(-100%); }
.hst-ntable { font-size: 12.5px; }
.hst-ntable th, .hst-ntable td { padding: 4px 6px; text-align: right; white-space: nowrap; }
.hst-ntable thead th, .hst-ntable tbody th { text-align: left; }
.hst-mean-row { font-weight: 700; }

/* まだ誰も出していない結果 */
.hst-unseen-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px; }
.hst-unseen-list a { display: grid; align-content: center; min-height: 44px; padding: 6px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; }
.hst-unseen-list b { font-size: 14px; }
.hst-unseen-list small { font-size: 12px; color: var(--muted); }

/* 数え方 */
.hst-how-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 14px; color: var(--ink2); line-height: 1.75; }
.hst-how-list b { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .hst-c.me { animation: none; } }
@media print { .hst-box { display: none; } }