/* Be the house: the stats column, plus a bar strip of measured bells and the depositor's seat. */

.house .lede b { color: var(--ink); font-weight: 600; }

.hist { margin: 0 0 48px; }
.hist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.hist-head h2, .hist-head p { margin: 0; }
.hist-head p { font-size: 13.5px; }
.bars { display: flex; align-items: center; gap: 3px; height: 132px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); position: relative; }
.bars::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--hair2); pointer-events: none; }
.bars .b { flex: 1 1 0; min-width: 2px; height: 100%; position: relative; }
.bars .b i { position: absolute; left: 0; right: 0; border-radius: 1px; }
.bars .b.up i { bottom: 50%; background: var(--gain); }
.bars .b.down i { top: 50%; background: var(--loss); }
.bars .b.flat i { top: calc(50% - 0.5px); height: 1px; background: var(--ink3); }
.bars .empty { margin: auto; font-size: 14px; color: var(--ink3); }
.bars-axis { display: flex; justify-content: space-between; font-size: 11.5px; padding-top: 8px; }

.seat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin: 0 0 48px; }
.seat, .rules-h { background: var(--bg); padding: 24px 24px 26px; min-width: 0; }
.seat h2, .rules-h h2 { margin: 0 0 16px; }

.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 0 0 14px; }
.kv div { min-width: 0; }
.kv dt { font-size: 13px; color: var(--ink3); margin: 0 0 3px; }
.kv dd { margin: 0; font-size: 18px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.seat-msg { min-height: 1.5em; margin: 0 0 14px; font-size: 14px; color: var(--ink2); }
.seat-msg.bad { color: var(--loss); }

.act { border-top: 1px solid var(--hair2); padding: 16px 0 4px; }
.act .label { display: block; margin: 0 0 8px; }
.act .row { display: flex; gap: 8px; }
.act input, .act select {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--hair); background: var(--panel); color: var(--ink); font-size: 15px;
}
.act input:focus-visible, .act select:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.act .btn { flex: 0 0 auto; }
.help { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.help span { color: var(--ink2); }
.ready { border-top: 1px solid var(--hair2); padding: 16px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ready p { margin: 0; font-size: 14.5px; color: var(--ink2); }
.ready b { color: var(--ink); font-weight: 560; font-family: var(--mono); }

.rules-h ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.rules-h li { counter-increment: r; position: relative; padding: 11px 0 11px 34px; border-bottom: 1px solid var(--hair2); color: var(--ink2); font-size: 14.5px; line-height: 1.55; }
.rules-h li:last-child { border-bottom: 0; }
.rules-h li::before { content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 13px; font-family: var(--mono); font-size: 11px; color: var(--ink3); }
.rules-h li b { color: var(--ink); font-weight: 560; }

.house .acct { position: relative; }

@media (max-width: 960px) { .seat-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .seat, .rules-h { padding: 18px 16px 20px; }
  .bars { height: 104px; gap: 2px; }
  .kv dd { font-size: 16px; }
  .house .topbar .right .btn:not(.primary) { display: none; }
}
@media (max-width: 360px) {
  .act .row { flex-direction: column; }
  .act .btn { width: 100%; }
}
.ready[hidden] { display: none; }