/* Tickets page. Shared chrome (tokens, top bar, dialog base) is tickets.css.
   Rationale and the numbers behind every size: docs/design/TICKETS.md.
   Type scale 13 · 16 · 20 · 31 · 49 (ratio 1.25 from 16), 8px spacing grid,
   one hero number, whitespace instead of boxes, columns that line up. */
.tk-page { --tk-gutter:32px; --tk-gap:32px; --tk-row-x:12px; --tk-hover:rgba(239,233,219,.035); --tk-rule:rgba(239,233,219,.06); }
.tk { max-width:1440px; margin:0 auto; height:calc(100% - 64px); padding:24px var(--tk-gutter) 0; display:flex; flex-direction:column; }
.tk .num { font-variant-numeric:tabular-nums; }
.tk-page .connection-age { color:var(--mute); }

/* Header: the title and two records. Everything else on this row is gone. */
.tk-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; min-height:40px; flex:none; }
.tk-head h1 { font:600 25px/40px var(--serif); letter-spacing:-.02em; }
.tk-head h1 > span { color:var(--pre); }
.tk-head-actions { display:flex; align-items:center; gap:24px; min-width:0; margin-left:auto; }
.tk-link { border:0; background:none; padding:8px 0; font:400 16px/24px var(--sans); color:var(--dim); white-space:nowrap; }
.tk-link:hover { color:var(--ivory); }
.tk-icon { width:32px; height:32px; margin-left:-8px; padding:0; display:inline-grid; place-items:center; border:0; border-radius:8px; background:none; color:var(--mute); }
.tk-icon:hover { color:var(--ivory); background:var(--tk-hover); }
.tk-icon svg { width:16px; height:16px; }
/* Price-stream state only earns space when it is degraded. */
.tk-price:not([data-state='delayed']):not([data-state='paused']) { display:none; }
.tk-price { font-size:13px; color:var(--pre); }

.tk-notice { flex:none; display:flex; align-items:center; gap:16px; margin-top:16px; padding:8px 12px; border-radius:8px; background:var(--goldT); color:var(--ivory); font-size:13px; line-height:20px; }
.tk-notice button { margin-left:auto; flex:none; border:0; background:none; padding:4px 0; color:var(--pre); font:600 13px/20px var(--sans); text-decoration:underline; text-underline-offset:3px; }

/* The four numbers. One 12-column grid for the whole page, so Settled result
   and Root against share a left edge, and the labels, values and notes each
   sit on one line across all four. */
.tk-kpis { flex:none; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--tk-gap); margin-top:24px; }
.tk-kpi { display:contents; }
.tk-kpi:nth-child(1) > * { grid-column:1 / span 3; }
.tk-kpi:nth-child(2) > * { grid-column:4 / span 3; }
.tk-kpi:nth-child(3) > * { grid-column:7 / span 3; }
.tk-kpi:nth-child(4) > * { grid-column:10 / span 3; }
.tk-kpi-label { grid-row:1; display:flex; align-items:baseline; gap:12px; min-width:0; font-size:13px; line-height:20px; color:var(--mute); white-space:nowrap; }
.tk-kpi-value { grid-row:2; align-self:baseline; margin-top:8px; font:600 31px/1 var(--sans); letter-spacing:-.02em; color:var(--ivory); white-space:nowrap; }
.tk-hero .tk-kpi-value { font:600 clamp(39px,3.4vw,49px)/1 var(--serif); letter-spacing:-.03em; }
.tk-kpi-note { grid-row:3; margin-top:8px; min-width:0; font-size:13px; line-height:20px; color:var(--mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-range select { border:0; background:transparent; padding:0 2px 0 0; margin:0; font:400 13px/20px var(--sans); color:var(--dim); cursor:pointer; max-width:100%; }
.tk-range select:hover { color:var(--ivory); }

/* A term with a definition: dotted underline, the law-5 pattern. */
.tk-term { border:0; padding:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-align:left; text-decoration:underline dotted; text-decoration-thickness:1px; text-decoration-color:rgba(149,141,123,.55); text-underline-offset:4px; cursor:help; }
.tk-term:hover { color:var(--ivory); text-decoration-color:currentColor; }
.tk-term:active { transform:none; }

/* Two zones below the numbers: the tickets (9 columns) and what to root
   against (3 columns). No panel, no rail divider: the gap is the divider. */
.tk-body { flex:1; min-height:0; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--tk-gap); margin-top:48px; }
.tk-board { grid-column:1 / 10; grid-row:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.tk-picks { grid-column:10 / 13; grid-row:1; min-width:0; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line2) transparent; padding-bottom:32px; }

.tk-toolbar { flex:none; display:flex; align-items:center; gap:24px; min-height:40px; }
.tk-tabs { display:flex; gap:24px; }
.tk-tab { position:relative; display:inline-flex; align-items:baseline; gap:8px; border:0; background:none; padding:8px 0; font:400 16px/24px var(--sans); color:var(--mute); white-space:nowrap; }
.tk-tab:hover { color:var(--ivory); }
.tk-tab[aria-pressed='true'] { color:var(--ivory); }
.tk-tab[aria-pressed='true']::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--pre); }
.tk-tab-count { color:var(--mute); }
.tk-filter { display:inline-flex; align-items:center; gap:6px; max-width:280px; border:0; border-radius:999px; padding:4px 8px 4px 12px; background:var(--preT); color:var(--pre); font:400 13px/20px var(--sans); }
.tk-filter span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-filter svg { width:14px; height:14px; }
.tk-search { margin-left:auto; display:flex; align-items:center; gap:8px; width:200px; min-width:120px; padding:6px 0; color:var(--mute); box-shadow:0 1px 0 transparent; transition:box-shadow var(--t-hover) var(--e-hover); }
.tk-search:focus-within { box-shadow:0 1px 0 var(--pre); color:var(--dim); }
.tk-search svg { width:16px; height:16px; }
.tk-search input { width:100%; min-width:0; border:0; padding:0; background:none; outline:none; color:var(--ivory); font:400 16px/24px var(--sans); }
.tk-search input::placeholder { color:var(--mute); }
.tk-search input::-webkit-search-cancel-button { filter:invert(.6); }
.tk-sort { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--mute); white-space:nowrap; }
.tk-sort select { padding:4px 0; font:400 13px/20px var(--sans); color:var(--dim); }
.tk-board[data-view='settled'] .tk-sort { display:none; }

/* Column heads are said once, here, instead of on every ticket. The feed and
   the heads reserve the same scrollbar gutter, so the columns line up. */
.tk-board { --tk-cols:96px 128px 128px; }
.tk-board[data-view='settled'] { --tk-cols:160px; }
.tk-cols { flex:none; display:grid; grid-template-columns:minmax(0,1fr) var(--tk-cols) 32px; align-items:end; column-gap:0; padding:24px 0 8px; font-size:13px; line-height:20px; color:var(--mute); overflow:hidden; scrollbar-gutter:stable; scrollbar-width:thin; }
.tk-cols:has(.tk-col-heads:empty) { visibility:hidden; }
.tk-count { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-col-heads { display:contents; }
.tk-col-heads > * { justify-self:end; white-space:nowrap; }
.tk-sort-head { display:inline-flex; align-items:baseline; gap:4px; border:0; background:none; padding:0; font:inherit; color:var(--mute); cursor:pointer; }
.tk-sort-head:hover, .tk-sort-head[aria-pressed='true'] { color:var(--ivory); }
.tk-sort-arrow { display:inline-block; width:8px; color:var(--pre); }
.tk-feed { flex:1; min-height:0; overflow:auto; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--line2) transparent; padding-bottom:32px; }
.tk-list { display:flex; flex-direction:column; margin:0 calc(-1 * var(--tk-row-x)); }
.tk-row { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 32px; align-items:start; border-radius:10px; transition:background var(--t-hover) var(--e-hover); }
.tk-row + .tk-row::before { content:''; position:absolute; top:0; left:var(--tk-row-x); right:var(--tk-row-x); height:1px; background:var(--tk-rule); }
.tk-row:hover { background:var(--tk-hover); }
.tk-row:hover::before, .tk-row:hover + .tk-row::before { opacity:0; }
.tk-open { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) var(--tk-cols); grid-template-areas:'legs chance risk keep' 'sub . . .'; align-items:baseline; padding:14px var(--tk-row-x); border:0; background:none; color:inherit; text-align:left; font:inherit; border-radius:10px; }
.tk-board[data-view='settled'] .tk-open { grid-template-areas:'legs result' 'sub .'; }
.tk-open:active { transform:scale(.995); }
.tk-open:focus-visible { outline:2px solid var(--pre); outline-offset:-2px; }
.tk-legs { grid-area:legs; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; line-height:24px; color:var(--ivory); padding-right:24px; }
.tk-leg.hit, .tk-leg.missed, .tk-dot { color:var(--mute); }
.tk-leg.missed { text-decoration:line-through; text-decoration-color:rgba(149,141,123,.6); }
.tk-board[data-view='settled'] .tk-leg.hit { color:var(--dim); }
.tk-leg.match { color:var(--pre); font-weight:600; }
.tk-sub { grid-area:sub; min-width:0; display:flex; align-items:center; gap:12px; margin-top:4px; font-size:13px; line-height:20px; color:var(--mute); white-space:nowrap; overflow:hidden; }
.tk-sub > span:last-child { overflow:hidden; text-overflow:ellipsis; }
.tk-meter { flex:none; display:inline-flex; gap:3px; }
.tk-meter i { width:12px; height:4px; border-radius:2px; background:var(--line2); }
.tk-meter i.hit { background:var(--pre); }
.tk-meter i.missed { background:var(--felt); }
.tk-num { text-align:right; white-space:nowrap; font-size:16px; line-height:24px; font-variant-numeric:tabular-nums; }
.tk-chance { grid-area:chance; font-weight:600; color:var(--ivory); }
.tk-chance-x { display:none; }
.tk-row[data-heat='high'] .tk-chance { color:var(--gold); }
.tk-risk { grid-area:risk; font-weight:600; color:var(--ivory); }
.tk-keep { grid-area:keep; color:var(--dim); }
.tk-result { grid-area:result; font-weight:600; }
.tk-result.flat { color:var(--dim); }
.tk-pin { width:32px; height:32px; margin-top:10px; padding:0; display:grid; place-items:center; border:0; border-radius:8px; background:none; color:var(--mute); opacity:0; transition:opacity var(--t-hover) var(--e-hover),color var(--t-hover) var(--e-hover); }
.tk-pin svg { width:16px; height:16px; }
.tk-row:hover .tk-pin, .tk-pin:focus-visible, .tk-pin[aria-pressed='true'] { opacity:1; }
.tk-pin:hover { color:var(--ivory); }
.tk-pin[aria-pressed='true'] { color:var(--pre); }
.tk-pinned { display:none; flex:none; color:var(--pre); }
.tk-pinned svg { width:12px; height:12px; }

/* Root against: a ranked bar list. Length is the one encoding people read
   most accurately (Cleveland & McGill), so every bar starts at the same edge. */
.tk-picks h2 { font:600 20px/28px var(--sans); letter-spacing:-.01em; color:var(--ivory); }
.tk-picks h2 .tk-term { text-decoration-color:rgba(149,141,123,.4); }
.tk-picks-sub { margin-top:4px; font-size:13px; line-height:20px; color:var(--mute); }
.tk-pick-list { display:flex; flex-direction:column; margin-top:16px; }
.tk-pick { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'name amt' 'bar bar' 'meta meta'; column-gap:16px; width:calc(100% + 2 * var(--tk-row-x)); margin:0 calc(-1 * var(--tk-row-x)); padding:8px var(--tk-row-x) 10px; border:0; border-radius:10px; background:none; color:inherit; text-align:left; font:inherit; }
.tk-pick:hover, .tk-pick[aria-pressed='true'] { background:var(--tk-hover); }
.tk-pick:active { transform:scale(.99); }
.tk-pick-name { grid-area:name; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; line-height:24px; color:var(--ivory); }
.tk-pick-amt { grid-area:amt; font-size:16px; line-height:24px; font-weight:600; color:var(--ivory); font-variant-numeric:tabular-nums; }
.tk-pick-bar { grid-area:bar; height:3px; margin:6px 0; }
.tk-pick-bar i { display:block; height:100%; min-width:3px; border-radius:0 2px 2px 0; background:var(--pre); opacity:.5; transition:opacity var(--t-hover) var(--e-hover); }
.tk-pick:hover .tk-pick-bar i, .tk-pick[aria-pressed='true'] .tk-pick-bar i { opacity:1; }
.tk-pick-meta { grid-area:meta; font-size:13px; line-height:20px; color:var(--mute); }
.tk-more { align-self:flex-start; margin-top:8px; border:0; background:none; padding:6px 0; font:400 13px/20px var(--sans); color:var(--dim); text-decoration:underline; text-decoration-color:var(--line2); text-underline-offset:4px; }
.tk-more:hover { color:var(--ivory); }
.tk-quiet { font-size:13px; line-height:20px; color:var(--mute); max-width:32ch; }

.tk-empty { padding:64px 0; text-align:center; }
.tk-empty h2 { font:600 25px/32px var(--serif); letter-spacing:-.01em; }
.tk-empty p { max-width:42ch; margin:8px auto 0; font-size:16px; line-height:24px; color:var(--mute); }
.tk-empty .button { margin-top:24px; }
.tk-skeleton { display:flex; flex-direction:column; gap:28px; padding-top:20px; }
.tk-skeleton i { display:block; height:44px; border-radius:6px; background:linear-gradient(var(--panel2),var(--panel2)) 0 0/62% 16px no-repeat,linear-gradient(var(--panel),var(--panel)) 0 28px/34% 12px no-repeat; }

/* Ticket details: dense on demand, same scale as the page. */
/* PG-93 ticket timeline: a quiet rail of recorded steps. Neutral ink for what
   happened; red only for a step that failed; gold only for review. */
.ticket-timeline { margin-top:28px; }
.timeline-title { font:600 20px/28px var(--sans); letter-spacing:-.01em; }
.timeline-note { font-size:13px; line-height:20px; color:var(--mute); margin-top:4px; }
.timeline-list { list-style:none; margin:14px 0 0; padding:0; }
.timeline-step { position:relative; display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:10px; padding-bottom:14px; }
.timeline-step:not(:last-child)::before { content:''; position:absolute; left:10px; top:22px; bottom:0; width:1px; background:var(--line2); }
.timeline-mark { width:21px; height:21px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:13px; line-height:1; border:1px solid var(--line2); background:var(--panel2); color:var(--pre); }
.timeline-step[data-status="pending"] .timeline-mark { color:var(--mute); background:transparent; border-style:dashed; }
.timeline-step[data-status="failed"] .timeline-mark { color:var(--signal); border-color:var(--signal); background:var(--signalT); }
.timeline-step[data-status="review"] .timeline-mark { color:var(--gold); border-color:var(--gold); background:var(--goldT); }
.timeline-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:21px; }
.timeline-label { font-size:16px; font-weight:600; }
.timeline-step[data-status="pending"] .timeline-label { color:var(--dim); font-weight:500; }
.timeline-row time { font-size:13px; color:var(--mute); font-variant-numeric:tabular-nums; white-space:nowrap; }
.timeline-detail { font-size:13px; color:var(--dim); margin-top:2px; overflow-wrap:anywhere; }
.timeline-link { display:inline-block; margin-top:4px; font-size:13px; color:var(--pre); border-bottom:1px solid var(--line2); }
.timeline-link:hover { color:var(--ivory); border-color:var(--pre); }
.timeline-retry { margin-top:10px; }
.dialog-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:28px; }
.copy-status { color:var(--dim); font-size:13px; line-height:20px; }
.copy-link-fallback { width:100%; padding:10px; border:1px solid var(--line2); border-radius:8px; background:var(--vault); color:var(--ivory); font:13px var(--sans); }
.help-copy { font-size:16px; color:var(--dim); line-height:1.6; }
#ticket-dialog { width:min(600px,calc(100vw - 32px)); }
#ticket-dialog .dialog-header h2, #help-dialog .dialog-header h2 { font:600 25px/32px var(--serif); letter-spacing:-.01em; }
.tk-dialog-kicker { font-size:13px; line-height:20px; color:var(--mute); margin-bottom:4px; }
#ticket-detail .ticket-money { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:0 0 20px; }
#ticket-detail .ticket-risk { font:600 31px/1.1 var(--sans); letter-spacing:-.02em; }
#ticket-detail .ticket-upside { text-align:right; }
#ticket-detail .ticket-upside b { font-size:20px; font-weight:600; color:var(--dim); }
#ticket-detail .ticket-money-label { margin-top:4px; font-size:13px; color:var(--mute); }
#ticket-detail .ticket-legs { margin:0; }
#ticket-detail .leg-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; column-gap:12px; min-height:48px; box-shadow:0 1px 0 var(--tk-rule); font-size:16px; }
#ticket-detail .leg-mark { display:flex; align-items:center; justify-content:center; color:var(--mute); }
#ticket-detail .leg-mark svg { width:14px; height:14px; }
#ticket-detail .leg-mark.open::after { content:''; width:7px; height:7px; border:1px solid #756d5b; border-radius:50%; }
#ticket-detail .leg-name { padding:12px 0; line-height:24px; color:var(--ivory); overflow-wrap:anywhere; }
#ticket-detail .leg-row.missed .leg-name { text-decoration:line-through; color:var(--mute); }
#ticket-detail .leg-row.hit .leg-name { color:var(--dim); }
#ticket-detail .leg-price { font-size:16px; color:var(--dim); font-variant-numeric:tabular-nums; }
#ticket-detail .leg-price.settled { color:var(--mute); }
#ticket-detail .chance-row { display:flex; align-items:baseline; gap:8px; margin-top:20px; font-size:13px; color:var(--mute); }
#ticket-detail .chance-row strong { font-size:16px; font-weight:600; color:var(--ivory); }
#ticket-detail .chance-row strong svg { width:14px; height:14px; vertical-align:-2px; }
#ticket-detail .heat-label { margin-left:auto; color:var(--dim); }
#ticket-detail[data-heat='high'] .heat-label { color:var(--gold); }
#ticket-detail[data-heat='kept'] .heat-label { color:var(--felt); }
#ticket-detail[data-heat='paid'] .heat-label { color:#e78981; }
#ticket-detail .chance-track { height:4px; margin-top:8px; border-radius:2px; overflow:hidden; background:var(--line); }
#ticket-detail .chance-track span { display:block; height:100%; border-radius:0 2px 2px 0; background:#82765a; }
#ticket-detail[data-heat='high'] .chance-track span { background:var(--gold); }
#ticket-detail[data-heat='kept'] .chance-track span { background:var(--felt); }
#ticket-detail[data-heat='paid'] .chance-track span { background:var(--signal); }
#ticket-detail .detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; margin-top:28px; }
#ticket-detail .detail-grid dt { font-size:13px; line-height:20px; color:var(--mute); }
#ticket-detail .detail-grid dd { margin:2px 0 0; font-size:16px; line-height:24px; overflow-wrap:anywhere; }
#ticket-detail .detail-note { margin-top:24px; font-size:13px; line-height:20px; color:var(--mute); }
#ticket-detail .receipt-availability { font-size:13px; color:var(--mute); }

@media (min-width:1700px) { .tk-page { --tk-gap:40px; } }
@media (max-width:1200px) { .tk-page { --tk-gutter:24px; --tk-gap:24px; } .tk-board { --tk-cols:88px 112px 112px; } .tk-search { width:160px; } }

/* Tablet and phone: one page scroll, stacked in reading order. */
@media (max-width:1000px) {
  body.tk-page { height:auto; min-height:100dvh; overflow:visible; }
  .tk { height:auto; }
  .tk-body { display:flex; flex-direction:column; margin-top:40px; }
  .tk-picks { overflow:visible; padding-bottom:0; margin-bottom:40px; }
  .tk-board { min-height:100dvh; }
  .tk-feed { flex:none; overflow:visible; }
  .tk-toolbar { position:sticky; top:0; z-index:4; background:var(--vault); box-shadow:0 1px 0 var(--tk-rule); }
  /* The four numbers as a 2×2 that still shares baselines row by row. */
  .tk-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tk-kpi:nth-child(odd) > * { grid-column:1; }
  .tk-kpi:nth-child(even) > * { grid-column:2; }
  .tk-kpi:nth-child(n+3) > .tk-kpi-label { grid-row:4; margin-top:24px; }
  .tk-kpi:nth-child(n+3) > .tk-kpi-value { grid-row:5; }
  .tk-kpi:nth-child(n+3) > .tk-kpi-note { grid-row:6; }
  .tk-kpi-note { white-space:normal; }
  .tk-page .topbar { gap:24px; }
  .tk-page .topnav { gap:20px; }
  .tk-page .topnav a { white-space:nowrap; }
  .tk-page .topnav svg { display:none; }
}
@media (max-width:700px) {
  .tk-page { --tk-gutter:16px; --tk-row-x:8px; }
  .tk { padding-top:16px; }
  .tk-page .topbar { gap:12px; }
  .tk-page .topnav { gap:14px; }
  .tk-page .connection:not([data-state='stale']) { display:none; }
  .tk-page .connection > span { display:none; }
  .tk-head-actions { gap:16px; }
  .tk-link { font-size:13px; line-height:20px; }
  .tk-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; row-gap:24px; margin-top:16px; }
  .tk-kpi { display:block; min-width:0; }
  .tk-kpi.tk-hero, .tk-kpi:nth-child(4) { grid-column:1 / -1; }
  .tk-kpi:nth-child(n+3) > .tk-kpi-label { margin-top:0; }
  .tk-kpi-value { font-size:25px; }
  .tk-hero .tk-kpi-value { font-size:39px; }
  .tk-kpi-note { white-space:normal; }
  .tk-body { margin-top:32px; }
  .tk-picks { margin-bottom:32px; }
  .tk-toolbar { flex-wrap:wrap; gap:8px 24px; padding:8px 0; }
  .tk-search { order:3; flex:1 1 100%; width:auto; }
  .tk-sort { margin-left:auto; }
  .tk-board { --tk-cols:auto; }
  .tk-board[data-view='settled'] { --tk-cols:auto; }
  .tk-cols { grid-template-columns:minmax(0,1fr) auto; padding-top:16px; }
  .tk-col-heads > :not(.tk-col-risk):not(.tk-col-result) { display:none; }
  .tk-row { grid-template-columns:minmax(0,1fr); }
  .tk-open { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'legs risk' 'sub chance'; column-gap:12px; padding-right:var(--tk-row-x); }
  .tk-board[data-view='settled'] .tk-open { grid-template-areas:'legs result' 'sub .'; }
  .tk-legs { padding-right:0; }
  .tk-keep { display:none; }
  .tk-chance { margin-top:4px; font-size:13px; line-height:20px; font-weight:400; color:var(--mute); }
  .tk-chance-x { display:inline; }
  .tk-row[data-heat='high'] .tk-chance { font-weight:600; }
  .tk-pin { display:none; }
  .tk-pinned { display:inline-flex; }
  #ticket-detail .detail-grid { grid-template-columns:1fr; }
}
@media (hover:none) { .tk-pin:not([aria-pressed='true']) { visibility:hidden; } }
@media (pointer:coarse) {
  .tk-tab, .tk-link, .tk-more, .tk-notice button { min-height:44px; }
  .tk-search input { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { .tk-open:active, .tk-pick:active { transform:none; } }