/* 反復試行の確率のページ専用。共通の部品は style.css を使い、ここには、このページだけのものを書く */
.hs-sim [hidden], #plot2[hidden] { display: none !important; }
.hs-defs { position: absolute; width: 0; height: 0; }
.hs-sim .sim-stage, .hs-sim .sim-side, .hs-sim .ctrl-group { min-width: 0; }

#plot, #plot2 { display: block; width: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
#plot2 { border-top: 1px solid var(--line); }

.hs-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.hs-tabs .btn { line-height: 1.3; padding: 6px 4px; font-size: 0.95rem; }
.hs-tabs .btn[aria-selected="true"] { background: var(--blue); color: #fff; }

.hs-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.hs-btns .btn { flex: 1 1 auto; }
.hs-p-input { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin: 6px 0; font-size: 0.9rem; }
.hs-p-input input { width: 6.5em; font: inherit; padding: 6px 8px; min-height: 40px; border: 1px solid #aeb8cc; border-radius: 6px; }
.hs-kinds, .hs-run { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 4px 0 8px; }
.hs-run { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hs-kinds .btn { padding: 6px 4px; line-height: 1.3; }
.hs-kinds .btn[aria-pressed="true"] { background: var(--blue); color: #fff; }
.hs-run .btn { padding: 6px 4px; }

/* ○×のマス：色のほかに、記号でも区別する */
.hs-c {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
  border: 1px solid #aeb8cc; border-radius: 4px; background: #fff; color: #566078;
  font-size: 0.8rem; font-weight: 700; line-height: 1;
}
.hs-c.on { background: var(--blue); border-color: #0d2f73; color: #fff; }
.hs-cells-inline { display: inline-flex; flex-wrap: wrap; gap: 2px; vertical-align: -5px; margin: 0 2px; }

.hs-my { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg-soft); }
.hs-my h3 { margin: 0 0 8px; font-size: 0.98rem; }
.hs-my-cells { display: flex; flex-wrap: wrap; gap: 4px; }
.hs-cell-btn {
  width: 44px; height: 44px; padding: 0; border: 2px solid var(--blue); border-radius: 8px;
  background: #fff; color: #566078; font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; position: relative;
}
.hs-cell-btn[aria-pressed="true"] { background: var(--blue); color: #fff; }
.hs-cell-btn:disabled { cursor: not-allowed; border-style: dashed; border-color: #0d2f73; opacity: 1; }
.hs-cell-btn .no { position: absolute; left: 3px; top: 0; font-size: 0.62rem; font-weight: 500; line-height: 1.4; }
.hs-product { margin: 8px 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.7; }
.hs-product b { color: var(--blue-dark); }

.hs-list-head { margin: 10px 0 4px; font-weight: 700; }
.hs-list { max-height: 360px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fff; }
.hs-group-head { margin: 6px 0; font-weight: 700; font-size: 0.92rem; }
.hs-group-head:first-child { margin-top: 0; }
.hs-group-head.is-out { color: var(--muted); }
.hs-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 3px 10px; }
.hs-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px; width: 100%; min-height: 36px; padding: 3px 6px; min-width: 0;
  background: #fff; border: 1px solid transparent; border-radius: 6px; font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.hs-row:hover { background: var(--bg-soft); }
.hs-row .no { flex: none; width: 2.3em; font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hs-row .pr { margin-left: auto; padding-left: 6px; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-row .hs-c { width: 16px; height: 18px; font-size: 0.68rem; border-radius: 3px; }
.hs-row.is-now { border: 2px solid #c2410c; background: #fdf0e6; }
.hs-row.is-out { opacity: 0.55; }
.hs-more { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); }

.hs-ro { margin-top: 14px; }
.hs-table th { font-weight: 500; white-space: nowrap; width: 1%; padding-right: 12px; }
.hs-table td { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hs-table .is-total th, .hs-table .is-total td { font-weight: 700; color: var(--blue-dark); background: var(--blue-soft); }
.hs-advice { margin: 8px 0 0; font-weight: 700; color: #9a3412; }
.hs-line { margin: 6px 0 0; overflow-wrap: anywhere; }
.hs-line:empty { display: none; }
.hs-details { margin: 8px 0 0; }
.hs-details summary { cursor: pointer; font-weight: 700; color: var(--blue-dark); min-height: 36px; }
.hs-dist-table td, .hs-dist-table th { white-space: nowrap; }
.hs-dist-table tr.is-in td { font-weight: 700; background: var(--blue-soft); }
.hs-last { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; }
.hs-log { margin-top: 8px; }
.hs-log caption { text-align: left; }
.hs-legend { margin-top: 10px; }

/* 図の中 */
.hs-grid { stroke: #e8edf5; stroke-width: 1; }
.hs-zero { stroke: #3b4457; stroke-width: 1.5; }
#plot .hs-tick, #plot2 .hs-tick { font-size: 11px; fill: var(--muted); }
#plot .hs-axis, #plot2 .hs-axis { font-size: 11.5px; fill: var(--text); }
#plot .hs-title, #plot2 .hs-title { font-size: 12.5px; font-weight: 700; fill: var(--text); }
#plot2 text { font-family: var(--font); }
.hs-bar { fill: #eef1f6; stroke: #8a93a6; stroke-width: 1; }
.hs-bar-in { fill: url(#hs-hatch); stroke: #1f5fd6; stroke-width: 1.5; }
.hs-bar-comp { fill: url(#hs-dots); stroke: #c2410c; stroke-width: 1; }
.hs-bar-freq { fill: #bcd2fa; stroke: #1f5fd6; stroke-width: 1.2; }
.hs-theory { fill: #fff; stroke: #1c2333; stroke-width: 1.8; }
.hs-peak { fill: #1c2333; }
.hs-sel { fill: none; stroke: #1c2333; stroke-width: 1.5; stroke-dasharray: 3 2; }
.hs-hit { fill: transparent; cursor: pointer; }
#plot .hs-val { font-size: 12px; font-weight: 700; fill: var(--text); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.hs-line2 { fill: none; stroke: #1f5fd6; stroke-width: 2.5; stroke-linejoin: round; }
.hs-half { stroke: #6d28d9; stroke-width: 1.5; stroke-dasharray: 8 3 2 3; }
.hs-now { fill: #fff; stroke: #1f5fd6; stroke-width: 3; }

/* 式の 3 つの部分 */
.hs-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 14px; }
.hs-part { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--bg-soft); font-size: 0.9rem; }
.hs-part-math { font-size: 1.3rem; font-family: "Times New Roman", serif; color: var(--blue-dark); }

/* 言い換えの練習 */
.hs-drill-q { font-size: 1.08rem; margin: 8px 0; }
.hs-drill-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
.hs-drill-bars .btn { padding: 4px 2px; }
.hs-drill-bars .btn[aria-pressed="true"] { background: var(--blue); color: #fff; }

@media (max-width: 600px) {
  .hs-parts { grid-template-columns: 1fr; }
  .hs-tabs .btn { font-size: 0.86rem; }
  .hs-table th { white-space: normal; width: 6.2em; padding-right: 6px; }
  .hs-list { max-height: 300px; }
}