/*
 * Model pages (web/hounds.html, web/hound.html, web/build-a-hound.html, web/learning.html). Dark slate, built on the
 * app's own tokens (tokens.css) and base/components/nav. Phone first: one column, 16px gutters, the
 * bets table scrolls inside its own box, nothing makes the page scroll sideways.
 *
 * Colour is never the only signal: every verdict, result and who-decided label carries words and a
 * glyph. Motion is one draw-in of the chart lines, off for prefers-reduced-motion.
 */

.hounds-page {
  --hd-bg: #0E1116;
  --hd-card: #141920;
  --hd-card-2: #1A2029;
  --hd-line: rgba(255, 255, 255, .09);
  --hd-text: #F2F4F8;
  --hd-text-2: #D6DBE4;
  --hd-mute: #9AA3B2;          /* 6.6:1 on the card */
  --hd-good: #3DDC84;
  --hd-bad: #FF6B7A;
  --hd-warn: #F2B84B;
  --hd-flat: #B9C0CC;
  --hd-accent: #2FD07A;
  background: var(--hd-bg);
  color: var(--hd-text);
}

.hd-skip {
  position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: 10px 14px; z-index: 100;
}
.hd-skip:focus { left: 8px; top: 8px; }

.hd-nav__links { display: flex; gap: 18px; margin-left: auto; }
.hd-nav__links a { color: var(--hd-text-2); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.hd-nav__links a[aria-current="page"] { color: var(--hd-text); box-shadow: inset 0 -2px 0 var(--primary); }
@media (max-width: 899px) { .hd-nav__links { display: flex; } .hounds-page .site-nav { padding: 0 16px; gap: 12px; } }

.hd-wrap { max-width: 1040px; margin: 0 auto; padding: 20px 16px 48px; }
.hd-wrap--narrow { max-width: 720px; }
.hd-wrap h1 { font-size: clamp(30px, 7vw, 46px); line-height: 1.05; margin: 8px 0 10px; }
.hd-wrap h2 { font-size: 24px; line-height: 1.15; margin: 0 0 8px; }
.hd-h3 { font-size: 18px; margin: 18px 0 6px; font-family: var(--font-display); }
.hd-lede { font-size: 18px; color: var(--hd-text-2); max-width: 680px; margin: 0 0 12px; }
.hd-back { margin: 0 0 4px; }
.hd-muted { color: var(--hd-mute); font-size: 15px; margin: 0 0 10px; }
.hd-fine { color: var(--hd-mute); font-size: 13px; line-height: 1.4; }
.hd-explainer { font-size: 16px; color: var(--hd-text-2); background: var(--hd-card-2); border-left: 3px solid var(--hd-accent); padding: 10px 12px; margin: 8px 0; }

.hd-paper, .hd-notice {
  margin: 12px 0 18px; padding: 10px 14px; border: 1px solid var(--hd-line); background: var(--hd-card-2);
  border-left: 3px solid var(--hd-warn); font-size: 15px; color: var(--hd-text-2);
}
.hd-notice { font-size: 16px; }

.hd-panel { background: var(--hd-card); border: 1px solid var(--hd-line); padding: 16px; margin: 0 0 18px; }
.hd-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 4px; }
.hd-chart-title { font-weight: 700; color: var(--hd-warn); margin: 4px 0; font-size: 15px; }

/* segmented filter buttons */
.hd-segs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.hd-segs--cats { margin-top: 0; }
.hd-seg {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--hd-line); color: var(--hd-text-2);
  background: transparent; font-weight: 600; font-size: 15px;
}
.hd-seg[aria-pressed="true"] { background: rgba(143, 233, 250, .14); border-color: var(--hd-accent); color: #fff; }
.hd-seg--cat { border-left: 4px solid var(--cat, var(--hd-line)); }

/* chart */
.hd-chart { margin: 8px 0 0; position: relative; }
.hd-chart:focus-visible { outline: 3px solid var(--fresh, #00E0FF); outline-offset: 2px; }
.hd-chart__svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.hd-chart__grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.hd-chart__zero { stroke: #D6DBE4; stroke-width: 1.5; stroke-dasharray: 5 3; opacity: .8; }
.hd-chart__zero-label, .hd-chart__tick { fill: var(--hd-mute); font-size: 11px; font-family: var(--font-mono); }
.hd-chart__cross { stroke: rgba(255, 255, 255, .45); stroke-width: 1; }
.hd-chart__frame { fill: none; stroke: var(--hd-line); stroke-dasharray: 4 4; }
.hd-chart__empty { fill: var(--hd-mute); font-size: 14px; }
.hd-chart__caption { color: var(--hd-mute); font-size: 13px; }
.hd-chart__empty-note { color: var(--hd-mute); font-size: 14px; margin: 6px 0 0; }
.hd-tip {
  position: absolute; top: 8px; transform: translateX(10px); min-width: 170px; max-width: 280px; pointer-events: none;
  background: #0B0C0E; border: 1px solid var(--hd-line); padding: 8px 10px; font-size: 13px; z-index: 5;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .55);
}
.hd-tip[data-side="left"] { transform: translateX(calc(-100% - 10px)); }
.hd-tip__date { font-weight: 700; margin: 0 0 4px; color: var(--hd-text); }
.hd-tip__row { display: flex; align-items: center; gap: 6px; margin: 2px 0; color: var(--hd-text-2); }
.hd-tip__swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.hd-tip__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-tip__val { font-family: var(--font-mono); color: #fff; }
.hd-tip__bets { color: var(--hd-mute); font-size: 12px; }

@media (prefers-reduced-motion: no-preference) {
  /* one-time draw-in for solid lines only (a dashed line keeps its dashes) */
  .hd-line__path--solid { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hd-draw .9s var(--ease-draw, ease-out) forwards; }
}
@keyframes hd-draw { to { stroke-dashoffset: 0; } }

/* legend */
.hd-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.hd-legend--static { flex-direction: column; font-size: 14px; color: var(--hd-text-2); gap: 4px; }
.hd-legend__item {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 6px; border: 1px solid var(--hd-line);
  color: var(--hd-text-2); font-size: 14px; background: transparent;
}
.hd-legend__item[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.hd-legend__line { flex: none; }

/* badges */
.hd-badges { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 4px 0; font-size: 13px; }
.hd-badge, .hd-style, .hd-chip-cat {
  border: 1px solid var(--hd-line); padding: 1px 8px; color: var(--hd-text-2); font-size: 13px; line-height: 1.6;
}
.hd-chip-cat { border-left: 4px solid var(--hd-mute); font-weight: 700; }
.hd-chip-cat[data-category="stats"] { border-left-color: #6E9BFF; }
.hd-chip-cat[data-category="history"] { border-left-color: #FFB020; }
.hd-chip-cat[data-category="market"] { border-left-color: #00E0FF; }
.hd-chip-cat[data-category="math"] { border-left-color: #B58CFF; }
.hd-chip-cat[data-category="intangibles"] { border-left-color: #FF8AD8; }
.hd-chip-cat[data-category="esoteric"] { border-left-color: #F2E34B; }
.hd-chip-cat[data-category="random"] { border-left-color: #FF7A7A; }
.hd-chip-cat[data-category="mixed"] { border-left-color: #2ED47A; }
.hd-chip-cat[data-category="simple"] { border-left-color: #7FD6C2; }
.hd-chip-cat[data-category="baseline"] { border-left-color: #A3A9B5; }
.hd-style { font-style: italic; color: var(--hd-mute); }
/* the for-fun / control tag is the same size as the hound's name: it is never fine print */
.hd-tag { font-size: 1em; font-weight: 700; color: var(--hd-warn); border: 1px dashed var(--hd-warn); padding: 0 8px; }
.hd-row__namebar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 20px; }
.hd-row__namebar .hd-tag { font-size: 20px; }

/* verdict chips */
.hd-chip { display: inline-block; padding: 4px 10px; font-weight: 800; font-size: 14px; letter-spacing: .02em; border: 1px solid; }
.hd-chip--lg { font-size: 18px; padding: 6px 14px; }
.hd-chip--good { color: var(--hd-good); border-color: var(--hd-good); background: rgba(46, 212, 122, .1); }
.hd-chip--flat { color: var(--hd-flat); border-color: var(--hd-flat); background: rgba(185, 192, 204, .08); }
.hd-chip--early { color: var(--hd-warn); border-color: var(--hd-warn); background: rgba(255, 176, 32, .09); }
.hd-chip--bad { color: var(--hd-bad); border-color: var(--hd-bad); background: rgba(255, 61, 87, .1); }
.hd-chip--unknown { color: var(--hd-mute); border-color: var(--hd-mute); }

/* leaderboard rows */
.hd-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.hd-row {
  display: grid; gap: 10px 16px; padding: 14px; background: var(--hd-card-2); border: 1px solid var(--hd-line);
  border-left: 4px solid var(--hd-mute); grid-template-columns: 1fr;
}
.hd-row[data-verdict="good"] { border-left-color: var(--hd-good); }
.hd-row[data-verdict="flat"] { border-left-color: var(--hd-flat); }
.hd-row[data-verdict="early"] { border-left-color: var(--hd-warn); }
.hd-row[data-verdict="bad"] { border-left-color: var(--hd-bad); }
.hd-row__who { display: flex; gap: 12px; align-items: flex-start; }
.hd-row__name { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: #fff; }
.hd-row__tagline { color: var(--hd-text-2); font-size: 15px; }
.hd-row__vsent { color: var(--hd-text-2); font-size: 14px; margin-top: 6px; max-width: 46ch; }
.hd-row__facts { display: grid; gap: 6px; margin: 0; }
.hd-row__facts div { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.hd-row__facts dt { color: var(--hd-mute); font-size: 13px; min-width: 9.5em; }
.hd-row__facts dd { margin: 0; font-size: 15px; color: var(--hd-text); }
.hd-facts--big dd { font-size: 17px; }
.hd-row__line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hd-row__units { color: var(--hd-mute); font-size: 12px; }
.hd-row__replay { grid-column: 1 / -1; color: var(--hd-mute); font-size: 13px; border-top: 1px dashed var(--hd-line); padding-top: 8px; }
.hd-spark { overflow: visible; }
.hd-spark__zero { stroke: rgba(255, 255, 255, .3); stroke-dasharray: 2 2; }
.hd-spark--none { color: var(--hd-mute); font-size: 12px; }
@media (min-width: 880px) {
  .hd-row { grid-template-columns: minmax(260px, 1.5fr) minmax(190px, 1fr) minmax(250px, 1.3fr) 150px; align-items: start; }
}

.hd-status { font-weight: 700; }
.hd-status--running { color: var(--hd-good); }
.hd-status--benched { color: var(--hd-warn); }
.hd-status--retired { color: var(--hd-bad); }
.hd-verified { color: var(--hd-accent); font-weight: 700; }
.hd-unverified { color: var(--hd-mute); font-size: 13px; }

.hd-baselines { margin-top: 14px; border: 1px solid var(--hd-line); background: var(--hd-card-2); padding: 0 14px 12px; }
.hd-baselines > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--hd-text-2); }
.hd-basis { color: var(--hd-mute); font-size: 14px; margin-top: 14px; }
.hd-order-note { font-size: 13px; }

.hd-cta { text-align: left; border-left: 4px solid var(--primary); }
.hd-cta p { color: var(--hd-text-2); margin: 0 0 14px; max-width: 620px; }

/* states */
.hd-state { border: 1px solid var(--hd-line); background: var(--hd-card-2); padding: 12px 14px; margin: 8px 0; color: var(--hd-text-2); }
.hd-state--down { border-color: var(--hd-bad); }
.hd-state--missing { border-color: var(--hd-warn); }
.hd-state--warming { border-color: var(--hd-accent); }
.hd-desk__stage { border: 1px solid var(--hd-line); background: var(--hd-card-2); padding: 8px 12px; margin: 8px 0; }
.hd-desk__stage > summary { cursor: pointer; font-weight: 600; }
.hd-desk__text { white-space: pre-wrap; }
.hd-desk__claims { margin: 6px 0 6px 18px; padding: 0; }
.hd-desk__struck { margin: 6px 0 6px 18px; padding: 0; color: var(--hd-warn); }
.hd-desk__game { font-weight: 600; }
.hd-desk__me { background: rgba(143, 233, 250, .08); }
.hd-desk__strike { display: block; }
.hd-state--retired { border-color: var(--hd-bad); }
.hd-retry { margin-top: 8px; }
.hd-empty { padding: 18px; border: 1px dashed var(--hd-line); text-align: center; }
.hd-empty p { margin-bottom: 12px; color: var(--hd-text-2); }

/* stream */
.hd-stream__list, .hd-grave__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hd-stream__item { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 8px 10px; background: var(--hd-card-2); border: 1px solid var(--hd-line); }
.hd-stream__hound { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.hd-stream__text { flex: 1 1 260px; color: var(--hd-text-2); }
.hd-who { font-size: 12px; font-weight: 800; padding: 1px 8px; border: 1px solid var(--hd-mute); color: var(--hd-text-2); }
.hd-who--rule { color: #A8F4FF; border-color: #A8F4FF; }
.hd-who--code { color: #FFD98A; border-color: #FFD98A; }
.hd-who--model { color: #E0C8FF; border-color: #E0C8FF; }
.hd-grave__item { display: flex; gap: 12px; padding: 10px 12px; background: var(--hd-card-2); border: 1px solid var(--hd-line); }
.hd-grave__cause { color: var(--hd-text-2); margin: 2px 0; }

/* detail */
.hd-verdict__sentence { font-size: 18px; margin: 10px 0 4px; max-width: 60ch; }
.hd-verdict__meaning { color: var(--hd-text-2); margin: 4px 0 8px; max-width: 64ch; }
.hd-rule {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 10px; padding: 14px; background: #0B0C0E;
  border: 1px solid var(--hd-line); font-family: var(--font-mono); font-size: 15px; color: #F2F4F8; line-height: 1.55;
}
.hd-rule--preview { background: var(--hd-card-2); }
.hd-rule__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hd-tablewrap { overflow-x: auto; border: 1px solid var(--hd-line); max-width: 100%; }
.hd-tablewrap:focus-visible { outline: 3px solid var(--fresh, #00E0FF); }
.hd-table { border-collapse: collapse; width: 100%; min-width: 880px; font-size: 14px; }
.hd-table th, .hd-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hd-line); vertical-align: top; }
.hd-table th { color: var(--hd-mute); font-weight: 600; white-space: nowrap; background: var(--hd-card-2); }
.hd-table td:nth-child(2), .hd-table td:nth-child(5) { white-space: nowrap; }
.hd-td-reason { min-width: 280px; max-width: 360px; color: var(--hd-text-2); font-size: 12.5px; line-height: 1.4; cursor: pointer; }
.hd-why { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.hd-td-reason[aria-expanded="true"] .hd-why { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; display: block; }
.hd-result { font-weight: 800; white-space: nowrap; }
.hd-result--win { color: var(--hd-good); }
.hd-result--loss { color: var(--hd-bad); }
.hd-result--push, .hd-result--void, .hd-result--pending, .hd-result--unknown { color: var(--hd-flat); }
.hd-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }

/* build form */
.hd-form { display: grid; gap: 16px; margin: 14px 0; }
.hd-field { display: grid; gap: 6px; }
.hd-field label, .hd-fieldset legend { font-weight: 700; color: var(--hd-text); }
.hd-field input[type="text"], .hd-field input[type="number"], .hd-field select {
  min-height: 44px; padding: 8px 10px; background: #0B0C0E; border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-size: 16px; width: 100%;
}
.hd-fieldset { border: 1px solid var(--hd-line); padding: 10px 14px 12px; margin: 0; }
.hd-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--hd-line); cursor: pointer; }
.hd-check input { width: 20px; height: 20px; accent-color: #00E0FF; }
.hd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hd-limit { color: var(--hd-text-2); margin: 8px 0; }
.hd-gate__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.hd-preview h2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* footer */
.hd-foot { max-width: 1040px; margin: 0 auto; padding: 16px; border-top: 1px solid var(--hd-line); color: var(--hd-mute); font-size: 14px; display: grid; gap: 6px; }
.hd-foot a { color: var(--hd-accent); }

/* learning loop: versions, challengers, lessons, the scorecard */
.hd-list-plain { margin: 8px 0 12px 18px; padding: 0; color: var(--hd-text-2); display: grid; gap: 6px; }
.hd-versions, .hd-challengers, .hd-lessons { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 8px; }
.hd-version, .hd-challenger, .hd-lesson { padding: 10px 12px; background: var(--hd-card-2); border: 1px solid var(--hd-line); }
.hd-version[data-current="true"] { border-left: 4px solid var(--hd-good); }
.hd-challenger--failed { border-left: 4px solid var(--hd-bad); }
.hd-challenger { border-left: 4px solid var(--hd-accent); }
.hd-version__head, .hd-challenger__head { margin: 0 0 4px; }
.hd-challenger__diff { margin: 2px 0; font-family: var(--font-mono); font-size: 14px; color: var(--hd-text); overflow-wrap: anywhere; }
.hd-challenger__look { margin: 4px 0 0; color: var(--hd-text-2); }
.hd-lesson__line { margin: 0 0 4px; }
.hd-lesson[data-outcome="promoted"] { border-left: 4px solid var(--hd-good); }
.hd-lesson[data-outcome="retired"] { border-left: 4px solid var(--hd-bad); }
.hd-lesson[data-outcome="undecided"] { border-left: 4px solid var(--hd-flat); }
/* the coach report card's tips: the border says the live verdict (web/js/hounds-learning.js coachItem) */
.hd-coach-item { border-left: 4px solid var(--hd-warn); }
.hd-coach-item[data-label="HELPED"] { border-left-color: var(--hd-good); }
.hd-coach-item[data-label="HURT"] { border-left-color: var(--hd-bad); }
.hd-coach-item[data-label="NO DIFFERENCE"] { border-left-color: var(--hd-flat); }


/* =====================================================================================================
 * THE MODEL LEADERBOARD AND THE MODEL PAGE (professional pass, 2026-10-19). A dark slate sportsbook look:
 * one accent (green for up, red for down, neutral greys for everything else), tabular numerals, compact
 * tables, small-caps labels. Meaning never rides on colour alone: every status, result and sign carries its
 * words or its sign. docs/VOICE.md is the guide for the copy that goes in these boxes.
 * ===================================================================================================== */
.hd-num, .hd-table td.hd-num, .hd-table th.hd-th--num, .hd-kpi__big, .hd-asof { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.hd-nowrap { white-space: nowrap; }
.hd-aux { display: block; color: var(--hd-mute); font-size: 12px; line-height: 1.3; font-weight: 400; }
.hd-na { color: var(--hd-mute); }
.hd-wrap--wide { max-width: 1240px; }
.hounds-page h1, .hounds-page h2, .hounds-page h3 { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
.hounds-page h1 { font-weight: 700; font-size: clamp(24px, 4.2vw, 32px); line-height: 1.15; margin: 4px 0 4px; }
.hounds-page h2 { font-weight: 650; font-size: 17px; line-height: 1.25; margin: 0 0 6px; }
.hd-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 10px; }
.hd-pagehead .hd-lede { font-size: 15px; margin: 0; color: var(--hd-mute); }
.hd-pagehead .btn { min-height: 40px; }
.hounds-page .btn--primary { background: var(--hd-accent); border-color: var(--hd-accent); color: #04140B; }
.hounds-page .btn--primary:hover { background: #4BE08F; border-color: #4BE08F; }
.hounds-page .btn--ghost { color: var(--hd-text-2); border-color: var(--hd-line); }
.hd-disclosure {
  margin: 0 0 14px; padding: 8px 12px; border: 1px solid var(--hd-line); background: var(--hd-card);
  border-left: 3px solid var(--hd-mute); font-size: 13px; color: var(--hd-mute);
}
.hd-disclosure strong { color: var(--hd-text-2); font-weight: 600; }
.hd-panel { border-radius: 6px; padding: 14px 16px; }
.hd-panel__head h2 { margin: 0; }
.hd-count { color: var(--hd-mute); font-weight: 400; font-size: 14px; margin-left: 6px; }
.hd-asofline { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--hd-mute); }
.hd-updating { color: var(--hd-warn); font-weight: 600; border: 1px solid rgba(242, 184, 75, .45); background: rgba(242, 184, 75, .08); padding: 1px 8px; border-radius: 4px; font-size: 12px; }

/* the season switcher (added 2026-10-19) */
.hd-seasonbar { margin: 6px 0 10px; display: grid; gap: 4px; }
.hd-segs--season .hd-seg { min-height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; }
.hd-seasonline { margin: 0; font-size: 13px; color: var(--hd-text-2); }
.hd-seasonchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.hd-seasonchips .hd-fine { margin: 0; }

/* the qualifying round: models short of the ranking bar, with their progress (added 2026-10-19) */
.hd-qual { margin: 8px 0 14px; }
.hd-qual__title { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--hd-text); }
.hd-qual__ranked { margin: 14px 0 8px; font-size: 14px; font-weight: 600; color: var(--hd-text-2); }
.hd-pill { display: inline-block; padding: 2px 9px; border: 1px solid var(--hd-line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--hd-text-2); background: var(--hd-card-2); white-space: nowrap; }
.hd-roi--small { color: var(--hd-mute); opacity: .7; cursor: help; }

/* segmented filters */
.hd-filters { display: grid; gap: 6px; margin: 6px 0 10px; }
.hd-segs { gap: 4px; margin: 0; }
.hd-seg { min-height: 32px; padding: 0 10px; border-radius: 4px; font-size: 13px; font-weight: 500; background: transparent; }
.hd-seg[aria-pressed="true"] { background: rgba(47, 208, 122, .13); border-color: var(--hd-accent); color: #fff; }
.hd-seg:focus-visible, .hd-sort:focus-visible, .hd-expand:focus-visible, .hd-warm__toggle:focus-visible { outline: 2px solid var(--hd-accent); outline-offset: 1px; }

/* the table */
.hd-tablewrap { overflow-x: auto; border: 1px solid var(--hd-line); border-radius: 4px; max-width: 100%; background: var(--hd-card); }
.hd-table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 0; }
.hd-table th, .hd-table td { padding: 7px 10px; border-bottom: 1px solid var(--hd-line); vertical-align: middle; text-align: left; }
.hd-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--hd-mute); background: var(--hd-card-2); white-space: nowrap; padding-top: 6px; padding-bottom: 6px; }
.hd-table--board { min-width: 1060px; }
.hd-table--tickets { min-width: 900px; }
.hd-table tbody tr:hover { background: rgba(255, 255, 255, .025); }
.hd-th--num, .hd-table td.hd-num { text-align: right; }
.hd-table th.hd-col-clv, .hd-table th.hd-col-last10, .hd-table th.hd-col-status, .hd-table th.hd-col-model, .hd-table th.hd-col-type { text-align: left; }
.hd-sort { background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; min-height: 28px; }
.hd-sort:hover { color: var(--hd-text); }
.hd-table th[aria-sort="ascending"], .hd-table th[aria-sort="descending"] { color: var(--hd-text); }
.hd-col-rank { width: 34px; color: var(--hd-mute); text-align: right; }
.hd-col-model { min-width: 250px; }
.hd-modelcell { display: flex; align-items: center; gap: 8px; }
.hd-modelid { display: grid; min-width: 0; line-height: 1.2; }
.hd-modelname { font-weight: 600; color: #fff; text-decoration: none; }
.hd-modelname:hover { text-decoration: underline; text-underline-offset: 3px; }
.hd-tag--follow { display: inline-block; justify-self: start; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--hd-accent); border: 1px solid rgba(47, 208, 122, .45); border-radius: 3px; padding: 0 5px; margin: 2px 0; }
.hd-expand { flex: none; width: 24px; height: 28px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--hd-mute); display: inline-grid; place-items: center; }
.hd-chev { display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .12s; }
[aria-expanded="true"] > .hd-chev, [aria-expanded="true"].hd-expand > .hd-chev { transform: rotate(45deg); }
.hd-tr { cursor: pointer; }
.hd-tr[data-open="true"] { background: rgba(255, 255, 255, .03); }
.hd-typechip { display: inline-block; font-size: 11.5px; padding: 1px 7px; border: 1px solid var(--hd-line); border-radius: 3px; color: var(--hd-text-2); border-left: 3px solid var(--hd-mute); white-space: nowrap; }
.hd-typechip[data-category="stats"] { border-left-color: #6E9BFF; }
.hd-typechip[data-category="history"] { border-left-color: #E0A458; }
.hd-typechip[data-category="market"] { border-left-color: #4FC3D9; }
.hd-typechip[data-category="math"] { border-left-color: #B58CFF; }
.hd-typechip[data-category="intangibles"] { border-left-color: #D68FB3; }
.hd-typechip[data-category="esoteric"] { border-left-color: #C9B458; }
.hd-typechip[data-category="random"] { border-left-color: #C97B7B; }
.hd-typechip[data-category="mixed"] { border-left-color: #5CC8B5; }
.hd-typechip[data-category="simple"] { border-left-color: #7FB8A8; }
.hd-typechip[data-category="baseline"] { border-left-color: #9AA3B2; }
.hd-chip-plain { display: inline-block; font-size: 12px; color: var(--hd-mute); }
.hd-tone--up { color: var(--hd-good); }
.hd-tone--down { color: var(--hd-bad); }
.hd-tone--flat, .hd-tone--none { color: var(--hd-flat); }
.hd-col-units, .hd-col-roi { font-weight: 600; }
.hd-col-record, .hd-col-price, .hd-col-bets { white-space: nowrap; }
.hd-col-record .hd-aux { text-align: right; }
.hd-clv { display: grid; line-height: 1.2; }
.hd-clv .hd-aux { display: block; }
.hd-dots { display: inline-flex; gap: 3px; align-items: center; }
.hd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hd-flat); display: inline-block; }
.hd-dot--W { background: var(--hd-good); }
.hd-dot--L { background: var(--hd-bad); }
.hd-dot--P { background: #6A707B; }
.hd-statuswrap { display: grid; justify-items: start; gap: 2px; }
.hd-st { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 3px; border: 1px solid; white-space: nowrap; letter-spacing: .01em; }
.hd-st--lg { font-size: 14px; padding: 4px 12px; }
.hd-st--good { color: var(--hd-good); border-color: rgba(61, 220, 132, .5); background: rgba(61, 220, 132, .08); }
.hd-st--flat { color: var(--hd-flat); border-color: rgba(185, 192, 204, .4); background: rgba(185, 192, 204, .06); }
.hd-st--early, .hd-st--unknown { color: var(--hd-mute); border-color: var(--hd-line); background: transparent; }
.hd-st--bad { color: var(--hd-bad); border-color: rgba(255, 92, 108, .5); background: rgba(255, 92, 108, .08); }
.hd-verified { color: var(--hd-good); font-size: 12px; font-weight: 600; }
.hd-unverified { color: var(--hd-mute); font-size: 12px; }
.hd-drawer > td { padding: 0; background: var(--hd-card-2); }
.hd-drawer__body { padding: 10px 14px 12px 42px; }
.hd-drawer__title { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--hd-mute); }
.hd-drawer__more { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--hd-accent); }
.hd-warm__head td { padding: 0; background: var(--hd-card-2); }
.hd-warm__toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; color: var(--hd-text-2); padding: 9px 10px; font: inherit; cursor: pointer; text-align: left; }
.hd-warm__toggle .hd-aux { display: inline; }
.hd-tr--warm { cursor: default; }
.hd-tr--warm td { font-size: 13px; }
.hd-warm__note { color: var(--hd-mute); }
.hd-mono {
  flex: none; display: inline-grid; place-items: center; border-radius: 6px; font-weight: 700; letter-spacing: .02em;
  font-family: var(--font-body); color: var(--mono, #9AA3B2); background: color-mix(in srgb, var(--mono, #9AA3B2) 14%, #12161C);
  border: 1px solid color-mix(in srgb, var(--mono, #9AA3B2) 45%, transparent); line-height: 1;
}
.hd-mono-svg { flex: none; }
.hd-legend-box { margin-top: 10px; font-size: 13px; color: var(--hd-mute); }
.hd-legend-box > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.hd-defs { display: grid; gap: 6px; margin: 4px 0 0; }
.hd-defs > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.hd-defs dt { color: var(--hd-text-2); font-weight: 600; }
.hd-defs dd { margin: 0; }
.hd-defs--row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 10px; }
.hd-defs--row > div { grid-template-columns: 1fr; gap: 0; }

/* tickets */
.hd-tickets { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hd-line); border-radius: 4px; background: var(--hd-card); }
.hd-tickets__head, .hd-ticket { display: grid; grid-template-columns: 150px minmax(0, 2.2fr) minmax(110px, .9fr) minmax(190px, 1.4fr) 130px; gap: 6px 14px; align-items: center; padding: 8px 12px; }
.hd-tickets__head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--hd-mute); background: var(--hd-card-2); padding-top: 6px; padding-bottom: 6px; }
.hd-ticket { border-top: 1px solid var(--hd-line); font-size: 13.5px; }
.hd-ticket__when { display: grid; line-height: 1.25; }
.hd-ticket__model { font-weight: 600; color: #fff; text-decoration: none; }
a.hd-ticket__model:hover { text-decoration: underline; text-underline-offset: 3px; }
.hd-ticket__bet { display: grid; gap: 1px; min-width: 0; }
.hd-ticket__game { color: var(--hd-mute); font-size: 12.5px; }
.hd-ticket__pick strong { color: #fff; font-weight: 600; }
.hd-ticket__mkt { margin-left: 8px; font-size: 12px; color: var(--hd-mute); }
.hd-price { display: grid; line-height: 1.2; }
.hd-price .hd-aux { display: block; }
.hd-ticket__res { display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.hd-rec { font-size: 12.5px; color: var(--hd-mute); }
.hd-rec--before { color: var(--hd-text-2); }
.hd-rec--after { color: var(--hd-warn); }
.hd-res { display: inline-block; min-width: 68px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 3px; border: 1px solid var(--hd-line); color: var(--hd-text-2); }
.hd-res--won { color: #04140B; background: var(--hd-good); border-color: var(--hd-good); }
.hd-res--lost { color: #2A0710; background: var(--hd-bad); border-color: var(--hd-bad); }
.hd-res--push, .hd-res--void { color: var(--hd-flat); }
.hd-res--pending { color: var(--hd-warn); border-color: rgba(242, 184, 75, .5); }
.hd-res--ungraded { color: var(--hd-text-2); border-style: dashed; border-color: var(--hd-mute); }
/* Where a ticket's game stands (web/js/ticket-live.js): the word beside the status chip, and the grading badge. */
.hd-live { font-size: 12px; font-weight: 600; color: var(--hd-text-2); white-space: nowrap; }
.hd-live[hidden], .hd-graded[hidden], .hd-graded__pill[hidden] { display: none; }
.hd-live--live { color: var(--hd-good); }
.hd-live--grading { color: var(--hd-warn); }
.hd-live--up { color: var(--hd-good); }
.hd-live--down { color: var(--hd-bad); }
.hd-live--flat, .hd-live--postponed, .hd-live--cancelled { color: var(--hd-flat); }
.hd-res[data-live="live"] { color: var(--hd-good); border-color: var(--hd-good); }
.hd-res[data-live="grading"] { color: var(--hd-warn); border-style: dashed; }
.hd-graded { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 12.5px; color: var(--hd-mute); }
.hd-graded__pill { font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 3px; border: 1px dashed var(--hd-warn); color: var(--hd-warn); }
.hd-units-text--up { color: var(--hd-good); }
.hd-units-text--down { color: var(--hd-bad); }
.hd-units-text--flat { color: var(--hd-flat); }
.hd-drawer .hd-tickets { background: transparent; }
.hd-drawer .hd-tickets__head, .hd-drawer .hd-ticket { grid-template-columns: 70px minmax(0, 2.2fr) minmax(110px, .9fr) minmax(190px, 1.4fr) 130px; }
.hd-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.hd-pager .btn { min-height: 34px; padding: 0 14px; }
@media (max-width: 760px) {
  .hd-tickets__head { display: none; }
  .hd-ticket, .hd-drawer .hd-ticket { grid-template-columns: 1fr auto; grid-template-areas: "bet res" "when price" "rec rec"; gap: 4px 10px; }
  .hd-ticket__bet { grid-area: bet; }
  .hd-ticket__res { grid-area: res; flex-direction: column; align-items: flex-end; gap: 2px; }
  .hd-ticket__when { grid-area: when; grid-auto-flow: column; justify-content: start; gap: 8px; align-items: baseline; }
  .hd-ticket__price { grid-area: price; justify-self: end; }
  .hd-ticket__rec { grid-area: rec; }
  .hd-drawer__body { padding-left: 12px; }
}

/* Tickets as stacked cards on a phone (web/js/hounds-tickets.js ticketCard). Under 640px a ticket table is swapped
   for the same tickets as cards and a ticket row's grid is swapped for its card, so pick, price and result are never
   cut off by a sideways scroll. Wider than that nothing changes: the table and the row grid are as they were. */
.hd-cards { display: none; list-style: none; margin: 0; padding: 0; }
.hd-card { display: none; }
.hd-card__l1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hd-card__pick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; font-size: 15px; color: #fff; overflow-wrap: anywhere; }
.hd-card__price { font-size: 15px; color: #fff; }
.hd-card__l2, .hd-card__l3, .hd-card__l4 { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: var(--hd-mute); overflow-wrap: anywhere; min-width: 0; }
.hd-card__l2 { margin-top: 3px; }
.hd-card__l3 { margin-top: 2px; }
.hd-card__l4 { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--hd-line); color: var(--hd-text-2); }
.hd-card__model { font-weight: 600; color: #fff; text-decoration: none; }
.hd-card__why { margin-top: 4px; font-size: 12.5px; color: var(--hd-mute); }
.hd-card__why summary { cursor: pointer; }
.hd-card__why p { margin: 4px 0 0; overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .hd-ticketview > .hd-tablewrap--tickets { display: none; }
  .hd-ticketview > .hd-cards { display: block; border: 1px solid var(--hd-line); border-radius: 4px; background: var(--hd-card); }
  .hd-cardrow { padding: 10px 12px; border-top: 1px solid var(--hd-line); }
  .hd-cardrow:first-child { border-top: 0; }
  .hd-ticket > :not(.hd-card) { display: none; }
  .hd-ticket { display: block; padding: 10px 12px; }
  .hd-card { display: block; min-width: 0; }
  .hd-ticketview, .hd-tickets, .hd-card { max-width: 100%; }
}

/* the model page */
.hd-modelhead { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; }
.hd-modelhead__text { min-width: 0; }
.hd-modelhead h1 { margin: 0; }
.hd-catch { margin: 2px 0 4px; font-size: 13px; font-style: italic; color: var(--hd-mute); font-weight: 400; }
.hd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; }
.hd-actions { margin: 0 0 12px; }
.hd-actions .btn { min-height: 34px; padding: 0 14px; font-size: 14px; }
.hd-follow[aria-pressed="true"] { border-color: var(--hd-accent); color: var(--hd-accent); }
.hd-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 760px) { .hd-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hd-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--hd-card-2); border: 1px solid var(--hd-line); border-radius: 4px; min-width: 0; }
.hd-kpi__label { color: var(--hd-mute); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.hd-kpi__big { font-size: clamp(20px, 5vw, 26px); font-weight: 700; line-height: 1.1; color: #fff; overflow-wrap: anywhere; }
.hd-kpi__small { color: var(--hd-mute); font-size: 12px; line-height: 1.3; }
.hd-kpi--up .hd-kpi__big { color: var(--hd-good); }
.hd-kpi--down .hd-kpi__big { color: var(--hd-bad); }
.hd-oldrule { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--hd-line); border-radius: 3px; color: var(--hd-mute); font-size: 11px; white-space: nowrap; cursor: help; }
.hd-basis { display: block; color: var(--hd-mute); font-size: 11px; font-weight: 400; cursor: help; }
.hd-kpitabs { display: flex; gap: 4px; margin: 2px 0; }
.hd-kpitab { background: transparent; border: 1px solid var(--hd-line); border-radius: 3px; color: var(--hd-mute); font: inherit; font-size: 11px; padding: 1px 6px; cursor: pointer; }
.hd-kpitab[aria-selected="true"] { color: #fff; border-color: var(--hd-text-2); background: var(--hd-card); }
.hd-bankrollline { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--hd-text-2); }
.hd-scoreboard { padding: 10px; }
.hd-badgeline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hd-badgeline__explain { margin: 0; flex: 1 1 260px; font-size: 14px; color: var(--hd-text-2); }
.hd-verdict__meaning { color: var(--hd-text-2); margin: 8px 0 4px; max-width: 70ch; font-size: 14px; }
.hd-verdict__sentence { font-size: 14px; margin: 6px 0 4px; max-width: 70ch; }
.hd-rule { font-size: 13.5px; border-radius: 4px; }
.hd-today, .hd-poll, .hd-panel--grave { border-left: 1px solid var(--hd-line); }
.hd-coach { border-left: 3px solid var(--hd-accent); }

@media (max-width: 420px) {
  .hd-nav__links { gap: 12px; }
  .hd-nav__links a { font-size: 14px; white-space: nowrap; }
  .hounds-page .site-nav .wordmark__text { display: none; }
  .hounds-page .site-nav { gap: 10px; padding: 0 12px; }
}

/* build a model: live card */
.hd-dogcard { border-left: 3px solid var(--hd-accent); }
.hd-dogcard__body { display: flex; align-items: center; gap: 16px; min-height: 100px; }
.hd-dogcard__name { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.hd-dogcard__bio { margin: 4px 0 8px; color: var(--hd-text-2); font-size: 16px; }
.hd-check { align-items: flex-start; padding: 8px 12px; }
.hd-check__label { display: block; font-weight: 700; color: #fff; }
.hd-check__hint { display: block; font-size: 13px; color: var(--hd-mute); }

.hd-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- watchable / transparent / showable / coachable (owner, 2026-10-18) ------------------------------------ */

.hd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; }
.hd-actions .btn { min-height: 44px; }
.hd-follow[aria-pressed="true"] { border-color: var(--hd-warn); color: var(--hd-warn); }
.hd-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; max-width: min(92vw, 420px);
  background: #0B0C0E; color: var(--hd-text); border: 1px solid var(--hd-accent); padding: 10px 14px; font-size: 15px;
}
.hd-toast[hidden] { display: none; }

.hd-trigger { margin: 12px 0 6px; color: var(--hd-text-2); }
.hd-h3 { font-size: 16px; margin: 14px 0 6px; }
.hd-dials { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 6px; }
.hd-dial { color: var(--hd-text-2); }
.hd-dial__value { color: var(--hd-text); }

.hd-coach { border-left: 3px solid var(--hd-accent); }
.hd-coach__rule { background: var(--hd-card-2); border-left: 3px solid var(--hd-warn); padding: 8px 12px; margin: 8px 0 12px; color: var(--hd-text-2); }
.hd-coach__dials { display: grid; gap: 14px; margin: 8px 0; }
.hd-coach__label { margin: 0 0 4px; color: var(--hd-text-2); }
.hd-coach__value { color: var(--hd-text); }
.hd-coach__controls { display: flex; align-items: center; gap: 8px; }
.hd-coach__dial[data-changed="true"] .hd-coach__value { color: var(--hd-warn); }
.hd-range { flex: 1; min-width: 0; min-height: 44px; accent-color: var(--hd-accent); }
.hd-step { min-width: 44px; min-height: 44px; padding: 0 10px; }
.hd-coach__send { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; align-items: center; }
.hd-input {
  min-height: 44px; padding: 0 10px; background: var(--hd-card-2); color: var(--hd-text); border: 1px solid var(--hd-line);
  font: inherit; flex: 1 1 200px; min-width: 0;
}
.hd-tiplist { margin: 6px 0 0; padding-left: 18px; color: var(--hd-text-2); font-size: 14px; }
.hd-row__star { margin-left: 6px; }
.hd-td-stamp { min-width: 200px; font-size: 13px; color: var(--hd-mute); }
@media (max-width: 480px) {
  .hd-pick { grid-template-columns: 1fr; }
  .hd-pickchip { justify-self: start; }
}

/* ---- Log a bet: the member's own bet log (web/js/member-bets.js). Phone first: 16px text in every field (no zoom on focus), 44px buttons, nothing wider than its box. ---- */
.mb-panel { display: grid; gap: 10px; min-width: 0; max-width: 100%; padding: 10px 0 4px; }
.mb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; color: var(--hd-text); }
.mb-game { min-width: 0; overflow-wrap: anywhere; font-size: 16px; }
.mb-pill {
  display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--hd-accent); border-radius: 4px; color: var(--hd-accent);
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.mb-form { display: grid; gap: 12px; min-width: 0; }
.mb-field { display: grid; gap: 4px; min-width: 0; }
.mb-label { font-size: 13px; font-weight: 600; color: var(--hd-text-2); }
.mb-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; min-width: 0; }
.mb-input {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 0 10px; background: var(--hd-card-2); color: var(--hd-text);
  border: 1px solid var(--hd-line); border-radius: 6px; font: inherit; font-size: 16px;
}
.mb-input:focus-visible, .mb-side:focus-visible { outline: 2px solid var(--hd-accent); outline-offset: 2px; }
.mb-hint { margin: 0; font-size: 12.5px; color: var(--hd-mute); overflow-wrap: anywhere; }
.mb-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-width: 0; }
.mb-side {
  box-sizing: border-box; min-width: 0; min-height: 44px; padding: 6px 10px; background: var(--hd-card-2); color: var(--hd-text);
  border: 1px solid var(--hd-line); border-radius: 6px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; overflow-wrap: anywhere; cursor: pointer;
}
.mb-side[aria-pressed="true"] { border-color: var(--hd-accent); box-shadow: inset 0 0 0 1px var(--hd-accent); color: #fff; }
.mb-status { margin: 0; font-size: 14px; color: #FFD7DB; overflow-wrap: anywhere; }
.mb-status[data-kind="ok"] { color: var(--hd-text-2); }
.mb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-save, .mb-open, .mb-remove { min-height: 44px; }
.mb-done { margin: 0; font-size: 15px; color: var(--hd-text); overflow-wrap: anywhere; }
.mb-ticketlog { display: grid; gap: 8px; margin-top: 8px; min-width: 0; }
.mb-slot { min-width: 0; }
/* My bets tab */
.mb-record { margin: 4px 0 var(--lh-s4, 16px); }
.mb-section { display: grid; gap: 8px; margin: 18px 0; min-width: 0; }
.mb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.mb-bet { display: grid; gap: 4px; padding: 10px 14px 12px; min-width: 0; background: var(--hd-card); border: 1px solid var(--hd-line); border-radius: 6px; }
.mb-bet__main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.mb-bet__pick { min-width: 0; overflow-wrap: anywhere; font-size: 16px; color: var(--hd-text); }
.mb-bet__game, .mb-bet__meta, .mb-bet__note { font-size: 13px; color: var(--hd-mute); overflow-wrap: anywhere; }
.mb-bet__result { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--hd-text-2); }
.mb-units--up { color: #5BE39A; }
.mb-units--down { color: #FF8A94; }
.kn-pagetabs { margin: 8px 0 var(--lh-s4, 16px); }
.kn-pagetabs [role="tab"] { min-height: 44px; }
.kn-mybets { min-width: 0; max-width: 100%; }
.mb-res { font-weight: 700; color: var(--hd-text); }
.mb-units { font-weight: 700; }
.mb-units--flat { color: var(--hd-text-2); }
.mb-close { color: var(--hd-mute); }
.mb-bet__actions { display: flex; gap: 8px; margin-top: 4px; }
.mb-manual { padding-top: 14px; border-top: 1px solid var(--hd-line); }