/* "How long will my slot bankroll last?" (/tools/session-bankroll/). Loaded after site.css, guides.css and
   pay-table.css, whose .pt calculator panel (16px / 44px fields, errors, hints) it reuses. */
.sb .theo-calc select { width: 100%; }
.sb .theo-out small { overflow-wrap: anywhere; }
.sb .sb-h { color: #fff; font-size: 1.05rem; margin: 22px 0 0; }
.sb .sb-progress { min-height: 1.3em; margin: 8px 0 0; }
.sb.sb-busy #sb-sim b, .sb.sb-busy .sb-chart { opacity: .55; }
/* Fan chart: one blue hue, darker outer band, lighter inner band, a solid median line, a dashed start line. */
.sb .sb-fig { margin: 16px 0 0; }
.sb .sb-chart { max-width: 600px; }
.sb .sb-viz .pt-msg { margin-top: 16px; }
@media (min-width: 900px) {
  .sb .sb-viz { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; }
  .sb .sb-viz .sb-fig { margin-top: 16px; }
}
.sb .sb-svg { display: block; width: 100%; height: auto; }
.sb .sb-grid { stroke: rgba(255,255,255,.10); stroke-width: 1; }
.sb .sb-axis { stroke: rgba(255,255,255,.45); stroke-width: 1; }
.sb .sb-ax { fill: var(--muted); font-size: 11.5px; font-family: inherit; }
.sb .sb-b90 { fill: #24507e; }
.sb .sb-b75 { fill: #3b78b4; }
.sb .sb-med { fill: none; stroke: #f3d38c; stroke-width: 2.5; stroke-linejoin: round; }
.sb .sb-start { stroke: #e9eef5; stroke-width: 1.25; stroke-dasharray: 5 4; opacity: .8; }
.sb .sb-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: .85rem; color: var(--muted); }
.sb .sb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sb .sb-k { display: inline-block; width: 18px; height: 12px; border-radius: 3px; }
.sb .sb-k90 { background: #24507e; }
.sb .sb-k75 { background: #3b78b4; }
.sb .sb-kmed { height: 3px; background: #f3d38c; border-radius: 2px; }
.sb .sb-kstart { height: 0; border-top: 2px dashed #e9eef5; border-radius: 0; opacity: .7; }
.sb .sb-details { margin-top: 12px; }
.sb .sb-details summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--gold-soft); font-weight: 600; }
.sb .sb-details summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sb .sb-details .table-wrap, .sb .sb-compare .table-wrap { margin-top: 8px; }
.sb td.num, .sb th[scope="col"] { white-space: nowrap; }
.sb .sb-compare { margin-top: 18px; }
.sb .sb-compare caption { caption-side: top; text-align: left; color: #fff; font-weight: 700; padding: 0 0 8px; }
.sb .sb-share { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sb .sb-share .btn { min-height: 44px; font-size: 1rem; }
.sb .sb-share .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sb .sb-share .pt-hint { flex-basis: 100%; margin: 0; min-height: 1.2em; }
.sb-model { margin-top: 16px; }
.sb-model caption { caption-side: top; text-align: left; font-weight: 700; padding: 10px 12px 6px; }
.sb-model td.num, .sb-model th[scope="col"] { white-space: nowrap; }
/* Compact tables, and two tiles a row on phones (pay-table.css stacks them one per row under 400px). */
.sb .table-wrap th, .sb .table-wrap td, .sb-model th, .sb-model td { padding: 9px 12px; }
@media (max-width: 400px) {
  .sb .theo-out { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sb .theo-out div { padding: 10px 11px; }
  .sb .theo-out small { font-size: .66rem; letter-spacing: .05em; }
  .sb .theo-out b { font-size: 1.08rem; }
}
@media (max-width: 480px) { .sb .sb-ax { font-size: 16px; } }