/* Spot (decision node) card. Load after styles.css and figure-frame.css; colours come from the site tokens. */
.frame.spot{container-type:inline-size}
.frame.spot>.frame-body{overflow:visible}
/* Size colours as text. Dark: the ramp as is, except all-in, whose fill (--act-purple-4) is too dark to read,
   so it uses a lifted tint. Light: the pale end of each ramp is too faint for text, so text shifts one step darker. */
:root{--allin-ink:#c4a2ff;--sp-r1:var(--act-red-1);--sp-r2:var(--act-red-2);--sp-r3:var(--act-red-3);--sp-p1:var(--act-purple-1);--sp-p2:var(--act-purple-2);--sp-p3:var(--act-purple-3)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--allin-ink:var(--act-purple-4);--sp-r1:var(--act-red-2);--sp-r2:var(--act-red-3);--sp-r3:var(--act-red-4);--sp-p1:var(--act-purple-2);--sp-p2:var(--act-purple-3);--sp-p3:var(--act-purple-4)}}
:root[data-theme="light"]{--allin-ink:var(--act-purple-4);--sp-r1:var(--act-red-2);--sp-r2:var(--act-red-3);--sp-r3:var(--act-red-4);--sp-p1:var(--act-purple-2);--sp-p2:var(--act-purple-3);--sp-p3:var(--act-purple-4)}

.sp-meta{display:flex;flex-wrap:wrap;gap:0 10px;margin:-6px 0 10px!important;font-size:12px!important;line-height:1.6!important;color:var(--muted)}
.sp-meta span:not(:last-child)::after{content:'·';margin-left:10px;color:var(--faint)}

/* Line: one row per street; the pot at the start of the street follows the street name. */
.sp-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;padding:8px 12px;border-radius:6px;background:var(--surface-2);font-size:13px;line-height:1.7}
.sp-st{color:var(--faint);font-size:12px;white-space:nowrap;min-width:64px}
.sp-pot-at{font-family:var(--mono);font-size:11px;color:var(--faint);margin-left:4px}
.sp-pot-at::before{content:'('}.sp-pot-at::after{content:')'}
.sp-acts{display:flex;flex-wrap:wrap;gap:0 4px;min-width:0}
.sp-acts>span{white-space:nowrap}
.sp-acts>.sp-gap{max-width:100%;white-space:normal;overflow-wrap:anywhere}
/* Separators trail each action so a wrapped line never starts with one. */
.sp-acts>span:not(:last-child)::after{content:'·';display:inline-block;color:var(--faint);margin-left:4px}
.sp-pos{color:var(--fg);font-weight:500;margin-right:3px}
.sp-num{font-family:var(--mono);font-size:12px}
.sp-gap{color:var(--faint);font-style:italic}
.sp-fold,.sp-fold .sp-pos{color:var(--faint);font-weight:400}
.sp-check{color:var(--act-check)}.sp-call{color:var(--act-call)}.sp-raise,.sp-bet{color:var(--act-raise)}
.sp-r1{color:var(--sp-r1)}.sp-r2{color:var(--sp-r2)}.sp-r3{color:var(--sp-r3)}
.sp-p1{color:var(--sp-p1)}.sp-p2{color:var(--sp-p2)}.sp-p3{color:var(--sp-p3)}
.sp-allin{color:var(--allin-ink);font-weight:500}
.sp-other{color:var(--muted)}
/* Hero's own actions are underlined (Hand2Note convention). */
.sp-hero .sp-txt{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.sp-now{color:var(--accent);font-weight:500}
.sp-now::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:6px;vertical-align:middle;animation:sp-pulse 1.6s ease-in-out infinite}
@keyframes sp-pulse{50%{opacity:.25}}

/* Table, after GTO Wizard's: an outline rail, round seats centred on it, solid four-colour cards.
   Hero (or the actor) sits at the bottom centre. A seat is placed at (50% + rx·u, cy + ry·v); spot.js passes (u, v) as --cos and --sin, taken
   from the same curve the rail is drawn with, so every disc stays on the line at any width.
   Card faces (.face) are styled in equity.css, which every page that shows a spot also loads. */
:root{--sp-villain:#f0a23c;--sp-back:#2e2e35;--sp-back-line:#474750}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--sp-villain:#d97a16;--sp-back:#d6d6d0;--sp-back-line:#bdbdb5}}
:root[data-theme="light"]{--sp-villain:#d97a16;--sp-back:#d6d6d0;--sp-back-line:#bdbdb5}
/* rx never lets a side seat's disc leave the table box. ry leaves room, above and below the pot and board,
   for the chip a top or bottom seat puts in front of itself. */
.sp-table{--disc:54px;--card:30px;--rx:min(42%,calc(50% - var(--disc) / 2 - 2px));--cy:151px;--ry:106px;
  --ring:color-mix(in srgb,var(--fg) 32%,var(--surface));position:relative;height:303px;margin:12px 0 4px}
.sp-felt{position:absolute;left:calc(50% - var(--rx));top:calc(var(--cy) - var(--ry));width:calc(var(--rx) * 2);height:calc(var(--ry) * 2)}
.sp-felt svg{display:block;width:100%;height:100%;overflow:visible}
.sp-felt path{fill:color-mix(in srgb,var(--fg) 4%,var(--surface));stroke:color-mix(in srgb,var(--fg) 17%,var(--surface));stroke-width:2.5px;vector-effect:non-scaling-stroke}
.sp-center{position:absolute;left:50%;top:var(--cy);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.sp-pot{font-size:12px;line-height:1;color:var(--muted);white-space:nowrap}
.sp-pot b{font:600 19px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--fg);margin:0 3px 0 5px}
/* Streets stand slightly apart: flop, turn, river. */
.sp-board{display:flex;gap:8px}
.spot .tiles{gap:4px}
.sp-table .face{--w:var(--card);width:var(--w);height:calc(var(--w) * 1.42);flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.22)}
.sp-board .face{--w:38px}
/* A rank whose suit the source does not give: no fill colour, no suit mark. */
.sp-table .face.sp-nosuit{background:#6d6d76}
.sp-table .face.sp-nosuit::before{content:none}
.sp-table .face.sp-back{background:var(--sp-back);text-shadow:none}
.sp-table .face.sp-back::before{left:3px;top:3px;right:3px;bottom:3px;width:auto;height:auto;border-radius:2px;-webkit-mask:none;mask:none;
  background:repeating-linear-gradient(135deg,transparent 0 3px,var(--sp-back-line) 3px 4.5px)}
.sp-cardtext{font-family:var(--mono);font-weight:600;padding:2px 8px;border:1px solid var(--line);border-radius:5px;background:var(--surface)}
/* A seat's box is its disc, centred on the rail point. Ring colour says who it is: Hero, an opponent, or a role. */
.sp-seat{position:absolute;left:calc(50% + var(--rx) * var(--cos));top:calc(var(--cy) + var(--ry) * var(--sin));transform:translate(-50%,-50%);z-index:1}
.sp-actor{--ring:var(--accent)}
.sp-vs{--ring:var(--sp-villain)}
.sp-is-hero{--ring:var(--accent)}
.sp-tone-attack{--ring:var(--act-raise)}.sp-tone-defend{--ring:var(--act-fold)}
.sp-disc{position:relative;box-sizing:border-box;height:var(--disc);min-width:var(--disc);padding:0 9px;border-radius:999px;background:var(--surface);border:2.5px solid var(--ring);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.1;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sp-seat-pos{display:block;font-size:12.5px;font-weight:600}
.sp-stack{font:500 12px/1.1 var(--mono);color:var(--muted)}
/* Whoever is to act carries a halo in their own ring colour. */
.sp-actor .sp-disc{box-shadow:0 0 0 4px color-mix(in srgb,var(--ring) 26%,transparent),0 1px 3px rgba(0,0,0,.2)}
/* Hole cards sit beside the disc, on the side spot.js picked; a pair of backs overlaps. */
.sp-hole{position:absolute;top:50%;left:calc(100% + 6px);transform:translateY(-50%)}
.sp-cl .sp-hole{left:auto;right:calc(100% + 6px)}
.sp-hole .tiles{gap:3px}
.sp-closed .face+.face{margin-left:calc(var(--w) * -.45);box-shadow:-1.5px 0 0 var(--surface),0 1px 2px rgba(0,0,0,.22)}
/* The chip a player has put in this street lies in front of the seat, toward the middle of the table. */
.sp-chip{position:absolute;left:calc(50% - var(--cos) * 22px);top:calc(100% + 5px);transform:translateX(-50%);box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px 0 7px;
  border-radius:999px;font:500 12px/1 var(--mono);white-space:nowrap;background:color-mix(in srgb,currentColor 12%,var(--surface));border:1px solid color-mix(in srgb,currentColor 50%,transparent)}
.sp-lower>.sp-chip{top:auto;bottom:calc(100% + 5px)}
.sp-chip::before{content:'';width:7px;height:7px;margin-left:2px;border-radius:50%;background:currentColor;box-shadow:0 0 0 1.5px var(--surface),0 0 0 2.5px currentColor}
.sp-chip.sp-plain{color:var(--muted)}
/* Hero / to-act tag, or a role: outside the table, below a lower seat and above an upper one. */
.sp-tag{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);font-size:10.5px;font-weight:500;line-height:1.2;color:var(--accent);letter-spacing:.04em;white-space:nowrap}
.sp-seat:not(.sp-lower) .sp-tag{top:auto;bottom:calc(100% + 6px)}
/* What a label says besides the position, e.g. a player's name. */
.sp-name{font-weight:400;letter-spacing:0;color:var(--muted)}
.sp-tag.sp-role{letter-spacing:0;color:var(--muted)}
.sp-tag.sp-role-attack{color:var(--act-raise)}.sp-tag.sp-role-defend{color:var(--act-fold)}
/* The dealer button rides the rim of the disc in the corner between the chip and the cards, toward the middle. */
.sp-dealer{position:absolute;right:-2px;top:-2px;width:17px;height:17px;border-radius:50%;background:var(--fg);color:var(--surface);font:600 9.5px/1 var(--sans);display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface);z-index:2}
.sp-seat:not(.sp-lower) .sp-dealer{top:auto;bottom:-2px}
.sp-cl .sp-dealer{right:auto;left:-2px}
/* Folded seats: a small quiet ring with the position inside; seats the source never mentions are dashed. */
.sp-out .sp-dot{display:none}
.sp-out .sp-seat-pos{display:grid;place-items:center;box-sizing:border-box;min-width:34px;height:34px;padding:0 6px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--fg) 17%,var(--surface));
  background:var(--surface);font-size:10.5px;font-weight:500;color:var(--faint);white-space:nowrap}
.sp-unlisted .sp-seat-pos{border-style:dashed}
.sp-out .sp-dealer,.sp-seat.sp-out:not(.sp-lower) .sp-dealer{left:auto;right:-6px;top:-6px;bottom:auto;width:15px;height:15px;font-size:9px}
/* Opt-in table options (view.table). None of these classes appears unless a spot asks for it. */
/* Folded seats whose names matter to the reader (a positions-only table): the same ring, stronger text. */
.sp-named .sp-seat-pos{color:var(--muted)}
/* Compact rail for a side column: a lower oval and smaller discs. Sized for seats without hole cards. */
.sp-table.sp-tight{--disc:44px;--cy:104px;--ry:64px;height:208px;margin:6px 0 2px}
.sp-tight .sp-seat-pos{font-size:12px}
.sp-tight .sp-out .sp-seat-pos{min-width:30px;height:30px;font-size:10px}
.sp-tight .sp-pot b{font-size:16px}
.sp-tight .sp-board .face{--w:32px}
.sp-table.sp-tight.sp-many{--cy:120px;--ry:80px;height:240px}
.sp-commentary{margin-top:10px;font-size:14px;line-height:1.8}
.sp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Seven or more seats: neighbours near the bottom share a column, so the oval is taller to keep their cards apart. */
.sp-table.sp-many{--cy:210px;--ry:165px;height:421px}

@container (max-width:480px){
  .sp-line{padding:8px 10px;column-gap:8px}
  .sp-st{min-width:0}
}
/* Narrow frames: smaller cards and discs, and a chip stays over its own seat instead of leaning toward the board. */
@container (max-width:640px){
  .sp-table{--disc:50px;--card:26px}
  .sp-table.sp-tight{--disc:44px}
  .sp-board{gap:5px}
  .sp-board .face{--w:31px}
  .spot .sp-board .tiles{gap:3px}
  .sp-pot b{font-size:17px}
  .sp-chip{left:50%;height:18px;padding:0 6px 0 5px;gap:5px;font-size:11px}
  .sp-chip::before{width:6px;height:6px}
  .sp-many{--card:22px}
}

/* One-line form for lists and indexes. */
.sp-compact{display:grid;grid-template-columns:52px minmax(0,1fr);gap:2px 12px;padding:10px 0}
.sp-c-hand{grid-row:span 2;align-self:center;font-family:var(--mono);font-weight:600;font-size:15px;white-space:nowrap}
.sp-c-title{font-size:14px;font-weight:500;line-height:1.5}
.sp-c-line{display:flex;flex-wrap:wrap;gap:0 10px;font-size:13px;line-height:1.7;min-width:0}
.sp-seg{display:inline-flex;flex-wrap:wrap;gap:0 4px;align-items:baseline}
.sp-seg+.sp-seg{border-left:1px solid var(--line);padding-left:10px}
.sp-seg .sp-st{min-width:0}
.sp-brd{font-family:var(--mono);font-weight:600;letter-spacing:.3px}
.sp-hidden-card{color:var(--faint);font-weight:400}
.sp-abc .sp-acts{gap:0 6px;font-family:var(--mono);font-size:12.5px}
.sp-abc .sp-acts>span::after{content:none!important}
.sp-abc .sp-pos{font-family:var(--sans);font-size:12px}
@container (max-width:420px){.sp-compact{grid-template-columns:1fr}.sp-c-hand{grid-row:auto}}
@media (prefers-reduced-motion:reduce){.sp-now::after{animation:none}}