/* Strategy chart, cell bubble, histograms, dealer reference: shared by the trainer and the calculator */
/* Strategy chart panel */
.chart-tabs { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.chart-tabs button { border: 0; background: transparent; padding: 5px 12px; font-weight: 500; color: var(--muted); font-size: .85rem; }
.chart-tabs button + button { border-left: 1px solid var(--line-strong); }
.chart-tabs button[aria-selected="true"] { background: var(--felt); color: #fff; }
.chart-note { margin: 0 0 10px; min-height: 1.3em; font-size: .95rem; }
.chart-note strong.agree { color: var(--felt); } .chart-note strong.differ { color: var(--act-double); }
.big-charts h3 { display: none; }
table.big { border-collapse: separate; border-spacing: 2px; table-layout: fixed; width: 100%; }
table.big th { font-weight: 500; color: var(--muted); padding: 2px 0; text-align: center; font-size: .78rem; }
table.big th.rowh { text-align: right; padding-right: 6px; font-weight: 600; color: var(--ink); white-space: nowrap; width: 30px; font-size: .82rem; }
table.big th.on { color: var(--ink); font-weight: 700; }
table.big td { height: 32px; text-align: center; border-radius: 4px; color: #fff; padding: 0; line-height: 1; cursor: default; transition: transform .12s, opacity .12s; position: relative; }
table.big td b { font-size: .85rem; font-weight: 700; }
table.big td sub { font-size: .6em; font-weight: 500; vertical-align: baseline; position: relative; top: .2em; }
table.big td small { display: block; font-size: .62rem; font-weight: 500; opacity: .92; margin-top: 2px; font-variant-numeric: tabular-nums; }
table.big.noev td { height: 26px; } table.big.noev td small { display: none; }
table.big td.c-D { color: #1A231E; }
table.big td.here { outline: 3px solid var(--ink); outline-offset: 1px; transform: scale(1.18); z-index: 2; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
table.big td.dim { opacity: .35; }
.chart-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; }
.chart-foot .legend { margin: 0; gap: 6px 10px; }
.chart-foot .legend span::before { width: 10px; height: 10px; }
  table.big { border-spacing: 1.5px; }
  table.big th { font-size: .68rem; } table.big th.rowh { width: 24px; padding-right: 4px; font-size: .72rem; }
  table.big td { height: 28px; } table.big td b { font-size: .74rem; } table.big td small { font-size: .5rem; margin-top: 1px; }
  table.big td.here { transform: scale(1.12); outline-width: 2px; }
table.big td.acc-none { background: var(--chip); color: var(--muted); }
table.big td.acc-good { background: var(--felt); }
table.big td.acc-mid { background: var(--act-double); color: #1A231E; }
table.big td.acc-bad { background: var(--act-stand); }
.chart-head-right { display: flex; align-items: center; gap: 8px; }
.collapse-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); display: grid; place-items: center; }
.collapse-btn svg { transition: transform .15s; }
.chart-panel.collapsed .collapse-btn svg { transform: rotate(-90deg); }
.chart-panel.collapsed .big-charts, .chart-panel.collapsed .chart-foot, .chart-panel.collapsed .chart-extra, .chart-panel.collapsed > p { display: none; }
.chart-panel.collapsed .chart-tabs { display: none; }
.chart-panel.collapsed .chart-note { margin-bottom: 0; }
.chart-extra { margin-top: 10px; display: grid; gap: 6px; justify-items: start; }
/* risk columns in the hand box */
table.big td.mask { background: var(--chip); color: var(--ink); border: 2px dashed var(--line-strong); }
table.big td.mask b { font-size: 1rem; }
.dealer-ref-box { margin-top: 10px; }
.dealer-ref-box summary { cursor: pointer; }
table.dealer-ref { border-collapse: collapse; width: 100%; font-size: .8rem; font-variant-numeric: tabular-nums; }
table.dealer-ref th { font-weight: 500; color: var(--muted); padding: 3px 4px; border-bottom: 1px solid var(--line-strong); text-align: right; }
table.dealer-ref th:first-child, table.dealer-ref tbody th { text-align: left; font-weight: 600; color: var(--ink); }
table.dealer-ref td { padding: 3px 4px; border-bottom: 1px solid var(--line); text-align: right; }
table.dealer-ref td.hi { background: var(--felt-tint); font-weight: 600; }
table.dealer-ref td.bust { color: var(--loss); font-weight: 600; }
.chart-panel.collapsed .dealer-ref-box { display: none; }
/* Cell details */
.cell-pop { position: fixed; z-index: 60; width: 360px; max-width: calc(100vw - 16px); border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; background: var(--surface); color: var(--ink); font-size: .86rem; box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.cell-pop::before { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); left: -7px; }
.cell-pop.arrow-left::before { left: auto; right: -7px; transform: translateY(-50%) rotate(-135deg); }
@media (max-width: 600px) {
  .cell-pop { position: fixed; left: 8px !important; right: 8px; top: auto !important; bottom: 12px; width: auto; max-height: 70vh; overflow: auto; }
  .cell-pop::before { display: none; }
}
.cp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cp-head .cp-close { margin-left: auto; font-size: 1rem; }
.cp-lead { margin: 0 0 4px; font-weight: 600; }
.cp-pat { margin: 0 0 2px; color: var(--act-double); font-size: .85rem; }
table.cp-table { border-collapse: collapse; width: 100%; margin-top: 6px; font-variant-numeric: tabular-nums; font-size: .85rem; }
table.cp-table th { text-align: right; font-weight: 500; color: var(--muted); padding: 2px 6px; border-bottom: 1px solid var(--line-strong); }
table.cp-table th:first-child { text-align: left; }
table.cp-table td { padding: 3px 6px; text-align: right; border-bottom: 1px solid var(--line); }
table.cp-table td:first-child { text-align: left; }
table.cp-table tr.best td { background: var(--felt-tint); font-weight: 600; }
table.cp-table td.pos { color: var(--felt); } table.cp-table td.neg { color: var(--loss); }
table.big td[data-key] { cursor: pointer; }
.cell-pop a { color: var(--felt); }
/* Outcome histograms */
.histos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.histo .ht { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.histo { min-width: 0; }
.hbars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; height: 54px; align-items: end; }
.hb { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.hb i { display: block; width: 100%; background: var(--felt); border-radius: 2px 2px 0 0; min-height: 1px; }
.hb.d i { background: var(--line-strong); }
.hb.bust i { background: var(--loss); }
.hb span { position: absolute; top: -2px; left: -4px; right: -4px; text-align: center; font-size: .5rem; color: var(--muted); line-height: 1; }
.hlab { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; margin-top: 2px; }
.hlab span { text-align: center; font-size: .5rem; color: var(--muted); overflow: hidden; white-space: nowrap; }
.flash-box .histo .ht, .flash-box .hb span, .flash-box .hlab span { color: rgba(255,255,255,.7); }
.flash-box .hb i { background: #9fe3bd; } .flash-box .hb.d i { background: rgba(255,255,255,.35); } .flash-box .hb.bust i { background: #ffb3b3; }
@media (max-width: 600px) { .histos { grid-template-columns: 1fr; } }
table.big td.livediff { outline: 2px dashed #ffe08a; outline-offset: -2px; }
.hcap { font-size: .6rem; color: var(--muted); margin: -2px 0 4px; }
.flash-box .hcap { color: rgba(255,255,255,.6); }
/* count-sensitive cells: a corner mark */
table.big td.cs::after, table.big td.cs-far::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent #ffe08a transparent transparent; border-top-right-radius: 4px; }
table.big td.cs-far::after { border-right-color: rgba(255,224,138,.45); }
table.big td.c-D.cs::after { border-right-color: #1a231e; }
table.big td.c-D.cs-far::after { border-right-color: rgba(26,35,30,.45); }
.legend .corner::before { background: linear-gradient(135deg, transparent 50%, #ffe08a 50%); border-radius: 3px; }

.cp-head { position: sticky; top: 0; background: var(--surface); z-index: 1; padding-bottom: 4px; margin-top: -2px; }
.cp-backdrop { display: none; position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.35); }
.cell-pop { z-index: 71; }
@media (max-width: 600px) {
  .cell-pop { padding-top: 6px; max-height: 75vh; }
  .cp-head { padding: 6px 0 6px; }
  .cp-head::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto 8px; }
  .cp-backdrop.show { display: block; }
}