/* Trainer app layout (kit-local, not part of styles.css) */
.tr-app{height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--bg-0);overflow:hidden}
.tr-header{flex:0 0 var(--header-h);display:flex;align-items:center;gap:24px;padding:0 16px;background:var(--bg-1);border-bottom:1px solid var(--border-1)}
.tr-brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.tr-brand:hover{text-decoration:none}
.tr-brand-mark{width:30px;height:30px;display:block;border-radius:7px;flex:0 0 auto}
.tr-brand-text{display:flex;flex-direction:column;gap:2px;line-height:1}
.tr-brand-co{font:600 12px/1 var(--font-mono);letter-spacing:.02em;color:var(--text-1);white-space:nowrap}
.tr-brand-prod{font:500 9px/1 var(--font-mono);letter-spacing:.1em;color:var(--text-3);white-space:nowrap}
.tr-brand-prod b{color:var(--accent);font-weight:500}
.tr-wm{font:600 13px/1 var(--font-mono);letter-spacing:.04em;color:var(--text-1);white-space:nowrap}
.tr-wm b{color:var(--accent);font-weight:600}
.tr-header .pt-tabs{align-self:stretch;align-items:stretch}
.tr-header .pt-tab{height:100%}
.tr-spacer{flex:1}
.tr-grid{flex:1;display:grid;grid-template-columns:var(--rail-w) 1fr var(--panel-w);min-height:0}
.tr-rail{border-right:1px solid var(--border-1);background:var(--bg-1);padding:10px 8px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.tr-railhead{font:var(--type-microlabel);text-transform:uppercase;letter-spacing:var(--track-wide);color:var(--text-4);padding:10px 8px 4px}
.tr-fmt{padding:0 8px 8px}
.tr-fmt .pt-tabs{width:100%}
.tr-fmt .pt-tab{flex:1;justify-content:center}
.tr-spotitem{display:flex;align-items:center;justify-content:space-between;gap:6px;height:26px;padding:0 8px;font:var(--w-med) var(--fs-xs)/1 var(--font-mono);color:var(--text-2);border:none;background:none;border-left:2px solid transparent;border-radius:var(--r-1);cursor:pointer;text-align:left;white-space:nowrap}
.tr-spotitem:hover{background:var(--bg-2);color:var(--text-1)}
.tr-spotitem.is-active{background:var(--accent-dim);border-left-color:var(--accent);color:var(--text-1)}
.tr-spotitem .n{font-weight:400;color:var(--text-4);font-size:var(--fs-2xs)}
.tr-center{min-width:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
.tr-panel{border-left:1px solid var(--border-1);background:var(--bg-1);padding:14px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.tr-panelhead{font:var(--type-microlabel);text-transform:uppercase;letter-spacing:var(--track-wide);color:var(--text-4)}
.tr-statusbar{flex:0 0 var(--statusbar-h);display:flex;align-items:center;gap:16px;padding:0 14px;background:var(--bg-1);border-top:1px solid var(--border-1);font:var(--w-reg) var(--fs-2xs)/1 var(--font-mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden}
.tr-statusbar kbd{display:inline-flex;align-items:center;justify-content:center;min-width:14px;height:14px;padding:0 3px;font:500 9px/1 var(--font-mono);color:var(--text-2);background:var(--bg-0);border:1px solid var(--border-2);border-radius:2px;margin-right:4px}
/* drill */
.tr-drill-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:16px 20px 12px;border-bottom:1px solid var(--border-1);flex-wrap:wrap}
.tr-drill-stage{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 20px 6px;min-height:0;overflow:hidden}
.tr-tablewrap{flex:1 1 auto;min-height:96px;width:100%;display:flex;align-items:center;justify-content:center}
.tr-herohand{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:calc(-1 * clamp(4px,2.2vh,26px));position:relative;z-index:1}
/* hero hand scales with viewport height so the stage never clips */
.tr-herohand .pt-holecards{gap:clamp(5px,1.1vh,13px)}
.tr-herohand .pt-pcard{width:clamp(54px,8.6vh,116px);height:clamp(75px,11.9vh,160px)}
.tr-herohand .pt-pcard-corner{top:clamp(4px,.8vh,10px);left:clamp(5px,1vh,13px)}
.tr-herohand .pt-pcard-rank{font-size:clamp(10px,1.4vh,19px)}
.tr-herohand .pt-pcard-suit{font-size:clamp(7px,.9vh,12px)}
.tr-herohand .pt-pcard-crank{font-size:clamp(28px,4.6vh,62px)}
.tr-herohand .pt-pcard-csuit{font-size:clamp(13px,2.1vh,28px);margin-top:clamp(2px,.4vh,5px)}
.tr-herohand .pt-pcard-bigpip{font-size:clamp(30px,5vh,68px)}
.tr-herohand .pt-pcard-maker{font-size:clamp(6px,.85vh,9.5px)}
.tr-actionrow{flex:0 0 auto;display:flex;justify-content:center;padding:6px 20px 14px}
.tr-hand-note{font:var(--w-reg) var(--fs-xs)/1 var(--font-mono);color:var(--text-3);letter-spacing:.05em}
.tr-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tr-reveal{flex:0 0 auto;min-height:118px;border-top:1px solid var(--border-1);background:var(--bg-1);padding:12px 20px;display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,170px);gap:16px;align-items:center}
.tr-reveal-hand{display:flex;align-items:center;gap:10px}
.tr-reveal-meta{display:flex;flex-direction:column;gap:2px}
.tr-reveal-meta .h{font:var(--w-med) var(--fs-lg)/1.1 var(--font-mono);color:var(--text-1)}
.tr-reveal-meta .s{font:var(--w-reg) var(--fs-2xs)/1.3 var(--font-mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.tr-reveal-mid{display:flex;flex-direction:column;gap:7px;min-width:0}
.tr-reveal-hand{min-width:0}
.tr-reveal-right{min-width:0}
.tr-reveal-line{display:flex;gap:14px;font:var(--w-reg) var(--fs-xs)/1 var(--font-mono);color:var(--text-2);flex-wrap:wrap}
.tr-reveal-right{display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right}
.tr-empty-reveal{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;font:var(--w-reg) var(--fs-xs)/1.5 var(--font-mono);color:var(--text-4);text-transform:uppercase;letter-spacing:.08em}
.tr-histrow{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;height:22px;font:var(--w-reg) var(--fs-xs)/1 var(--font-mono);color:var(--text-2)}
.tr-histrow .a{text-transform:uppercase;font-size:var(--fs-2xs);letter-spacing:.04em}
.tr-statgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* ranges */
.tr-range-top{display:flex;align-items:center;gap:14px;padding:14px 20px 10px;flex-wrap:wrap}
.tr-range-title{font:var(--w-med) var(--fs-lg)/1.2 var(--font-mono);color:var(--text-1);margin-right:auto}
.tr-legend{display:flex;gap:12px;flex-wrap:wrap}
.tr-legend .it{display:inline-flex;align-items:center;gap:6px;font:var(--w-reg) var(--fs-2xs)/1 var(--font-mono);color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}
.tr-legend .sw{width:9px;height:9px;border-radius:2px}
.tr-matrix-wrap{padding:6px 20px 20px;max-width:660px}
.tr-detail-row{display:grid;grid-template-columns:14px 1fr 44px 64px;gap:8px;align-items:center;height:24px;font:var(--w-reg) var(--fs-xs)/1 var(--font-mono);color:var(--text-2)}
.tr-detail-row .sw{width:8px;height:8px;border-radius:2px}
.tr-detail-row .f{text-align:right;color:var(--text-1)}
.tr-detail-row .e{text-align:right}
/* leaks */
.tr-leaks{padding:18px 20px;display:flex;flex-direction:column;gap:18px;max-width:1080px}
.tr-tilerow{display:flex;gap:36px;flex-wrap:wrap}
.tr-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tr-boxpanel{border:1px solid var(--border-1);background:var(--bg-1);border-radius:var(--r-2);padding:12px;display:flex;flex-direction:column;gap:8px}
.tr-table{border-collapse:collapse;width:100%;font-family:var(--font-mono);font-size:var(--fs-sm)}
.tr-table th{font:var(--type-microlabel);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);text-align:left;padding:0 10px 6px;border-bottom:1px solid var(--border-2);white-space:nowrap}
.tr-table td{height:26px;padding:0 10px;border-bottom:1px solid var(--border-1);color:var(--text-1);white-space:nowrap}
.tr-table tr:hover td{background:var(--bg-2)}
.tr-table .r{text-align:right}
.tr-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text-3);font:var(--w-reg) var(--fs-sm)/1.5 var(--font-mono);text-align:center}
.tr-sb-fact{margin-left:auto;color:var(--text-4)} /* statusbar fact line — class (not inline) so mobile can brighten it */
.tr-empty-reveal .tr-er-t{display:none} /* touch phrasing — mobile only */

/* ---- mobile (≤760px): rail becomes a horizontal strip, panels stack, touch targets grow.
   Same tokens, same color language — the terminal just reflows. ---- */
@media (max-width:760px){
  /* chrome: logo + mode tabs; session stats live in the drill panel instead */
  .tr-header{gap:10px;padding:0 10px}
  .tr-brand-text{display:none}
  .tr-header .pt-sessionstrip{display:none}
  .tr-header .pt-keycap{display:none}
  .tr-statusbar{padding:0 10px;padding-bottom:env(safe-area-inset-bottom)}
  .tr-statusbar span:not(:last-child){display:none}
  /* keycaps mean nothing on touch */
  .tr-fmt .pt-keycap,.tr-actions .pt-keycap,.tr-empty-reveal .pt-keycap{display:none}

  /* the three-column grid becomes one scrolling column */
  .tr-grid{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
  .tr-center{flex:0 0 auto;overflow:visible}
  .tr-panel{flex:0 0 auto;border-left:none;border-top:1px solid var(--border-1)}

  /* rail → horizontal chip strip */
  .tr-rail{flex:0 0 auto;flex-direction:row;align-items:center;gap:4px;padding:8px 10px;overflow-x:auto;overflow-y:hidden;border-right:none;border-bottom:1px solid var(--border-1);scrollbar-width:none}
  .tr-rail::-webkit-scrollbar{display:none}
  .tr-fmt{padding:0;flex:0 0 auto}
  .tr-fmt .pt-tabs{width:auto}
  .tr-fmt .pt-tab{flex:0 0 auto}
  .tr-railhead{padding:0 4px 0 10px;white-space:nowrap}
  .tr-spotitem{flex:0 0 auto;height:30px;border-left:none;border-bottom:2px solid transparent}
  .tr-spotitem.is-active{border-bottom-color:var(--accent)}
  .tr-rail .pt-switch{flex:0 0 auto;padding:0 4px 0 8px}
  .tr-rail .pt-switch .pt-check-label{white-space:nowrap}

  /* drill */
  .tr-drill-top{padding:10px 12px 8px;gap:10px}
  .pt-spotheader{flex-wrap:wrap;gap:10px 16px}
  .pt-spotfield-v{font-size:var(--fs-sm)}
  .tr-drill-stage{padding:8px 12px 4px;gap:6px}
  .tr-tablewrap{flex:0 0 auto;height:140px;min-height:0}
  .tr-herohand{margin-top:-10px}
  .tr-herohand .pt-pcard{width:clamp(54px,7vh,84px);height:clamp(75px,9.7vh,116px)}
  .tr-actionrow{padding:6px 10px 12px}
  .tr-actions{width:100%;gap:6px;flex-wrap:wrap}
  .tr-actions .pt-actionbtn{flex:1 1 40%;min-width:0;height:46px}
  .tr-reveal{grid-template-columns:1fr;gap:10px;padding:10px 12px;min-height:0}
  .tr-reveal-right{flex-direction:row;align-items:center;justify-content:space-between;text-align:left}
  .tr-panel{padding:12px 10px}

  /* ranges */
  .tr-range-top{padding:10px 12px 8px;gap:10px}
  .tr-matrix-wrap{padding:4px 8px 14px;max-width:none}

  /* leaks */
  .tr-leaks{padding:12px 10px}
  .tr-tilerow{gap:14px 22px}
  .tr-panels{grid-template-columns:1fr}
  .tr-boxpanel{overflow-x:auto}
  .pt-meter{grid-template-columns:96px 1fr 52px;gap:8px}
}

/* ---- mobile legibility: handheld re-tune of the token ladder — same dark-terminal brand,
   larger optics. type up one notch, muted greys lifted off the ground, hairlines
   strengthened. desktop (>760px) keeps the dense ladder untouched. ---- */
@media (max-width:760px){
  :root{
    --fs-2xs:11px;--fs-xs:12px;--fs-sm:13.5px;--fs-md:15px;--fs-lg:17px;--fs-xl:20px;--fs-2xl:24px;
    --text-2:#AEBAC9;--text-3:#8492A2;--text-4:#5C6875;
    --border-1:#242C36;--border-2:#333E4C;--border-3:#46536A;
  }
  /* oval seat chips + pot: floor the container-query clamps that collapse at phone table height */
  .tr-tablewrap .pt-table-seat .pt-seat{font-size:10.5px;height:21px;padding:0 7px;gap:4px}
  .tr-tablewrap .pt-table-pot{font-size:10.5px;height:22px;padding:0 9px}
  .pt-table-seat .pt-seat--folded{opacity:.6}
  .pt-table-seat .pt-seat-note{color:var(--text-3)}
  /* info-bearing text promoted one tier — text-4 stays decorative-only on phones */
  .tr-hand-note{color:var(--text-2)}
  .tr-sb-fact{color:var(--text-3)}
  .tr-railhead,.tr-panelhead,.tr-spotitem .n{color:var(--text-3)}
  .tr-empty-reveal{color:var(--text-3)}
  /* touch copy: hide the keyboard phrasing, show the tap phrasing */
  .tr-empty-reveal .tr-er-k{display:none}
  .tr-empty-reveal .tr-er-t{display:inline}
  /* the 13.5px ladder must not clip flop facing strings or wrap ALL-IN labels */
  .pt-spotfield-v{white-space:normal}
  .tr-actions .pt-actionbtn{letter-spacing:.02em}
}

/* ---- drill verdict toast: pops over the table, floats up, fades. Solid surface (no
   glass), severity color language, pointer-events none — the next hand still deals
   instantly; this is the one sanctioned >120ms motion (documented in readme). ---- */
.tr-tablewrap{position:relative}
.tr-toast{position:absolute;left:50%;top:26%;z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 16px;background:var(--bg-1);border:1px solid var(--border-2);border-radius:var(--r-2);opacity:0;animation:tr-toast-float 1.9s linear forwards}
.tr-toast .v{font:var(--w-semi) var(--fs-xl)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tr-toast .e{font:var(--w-med) var(--fs-sm)/1 var(--font-mono);color:var(--text-2)}
.tr-toast--good .v{color:var(--sev-ok)}
.tr-toast--warn .v{color:var(--sev-minor)}
.tr-toast--bad .v{color:var(--sev-major)}
.tr-toast--good{border-color:color-mix(in srgb,var(--sev-ok) 40%,var(--border-2))}
.tr-toast--warn{border-color:color-mix(in srgb,var(--sev-minor) 40%,var(--border-2))}
.tr-toast--bad{border-color:color-mix(in srgb,var(--sev-major) 45%,var(--border-2))}
@keyframes tr-toast-float{
  0%{opacity:0;transform:translate(-50%,10px)}
  6%{opacity:1;transform:translate(-50%,0)}
  60%{opacity:1;transform:translate(-50%,-14px)}
  100%{opacity:0;transform:translate(-50%,-40px)}
}
@media (prefers-reduced-motion:reduce){
  .tr-toast{animation:tr-toast-fade 1.9s linear forwards}
  @keyframes tr-toast-fade{0%{opacity:0;transform:translate(-50%,0)}8%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,0)}}
}

/* ---- mobile flop board: more room, less noise, toast clears the board,
   shrunk hero cards drop the bottom-right index instead of squishing it ---- */
@media (max-width:760px){
  .tr-tablewrap.has-board{height:190px}
  .tr-tablewrap.has-board + .tr-herohand{margin-top:2px}
  .tr-tablewrap .pt-table-felt::after{display:none}
  .tr-toast{top:4%}
  /* flop nodes: the board is sacred — the toast spawns above the felt entirely */
  .tr-tablewrap.has-board .tr-toast{top:-10px}
  .tr-herohand .pt-pcard-corner--flip{display:none}
  .tr-herohand .pt-pcard-bigpip{font-size:clamp(22px,3.4vh,30px)}
  .tr-herohand .pt-pcard-maker{font-size:6px}
}