/* ============================================================
   Rake Calculator — Page Styles
   All styles scoped to this page. Shared styles in site.css.
   ============================================================ */

/* CONTROLS */
.controls-panel {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.controls-inner {
  max-width: var(--max-width-full);
  margin: 0 auto;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: flex-end;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.control-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
}

/* Segmented controls */
.seg-control {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.seg-btn {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  background: var(--color-surface);
  border: none;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  padding: var(--space-2) var(--space-4);
  line-height: 1;
  white-space: nowrap;
}

.seg-btn:last-child {
  border-right: none;
}

.seg-btn.active {
  background: var(--color-accent);
  color: var(--color-text-on-dark);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.seg-btn:hover:not(.active) {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}

.seg-btn.player {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
}

/* Stake dropdown */
.stake-select {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding: var(--space-2) var(--space-7) var(--space-2) var(--space-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A5A5A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  box-shadow: var(--shadow-sm);
  height: 36px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.stake-select:hover {
  border-color: var(--color-border-heavy);
}

.stake-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-subtle);
}

/* Compare button */
.compare-btn {
  padding: var(--space-2) var(--space-6);
  background: var(--color-accent);
  color: var(--color-text-on-dark);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(107, 31, 42, 0.25), 0 1px 2px rgba(0, 0, 0, 0.08);
  height: 36px;
}

.compare-btn:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 3px 8px rgba(107, 31, 42, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.compare-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(107, 31, 42, 0.2);
}

/* RESULTS */
.results-section {
  padding: var(--space-7) var(--space-6);
}


.table-wrapper {
  width: 100%;
  max-width: var(--max-width-full);
  margin: 0 auto;
  overflow-x: auto;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  border: 1px solid rgba(107, 31, 42, 0.15);
}

/* PROSE between calculators — uses .pd-prose from base.css */
.rake-prose-section {
  padding: var(--space-7) var(--space-6);
}

.rake-prose-inner {
  max-width: var(--max-width-full);
  margin: 0 auto;
}

@media (max-width: 640px) {
  .rake-prose-section {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

.pd-rake-calc table {
  width: 100%;
  border-collapse: collapse;
}

.pd-rake-calc thead tr {
  border-bottom: none;
}

.pd-rake-calc thead th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
}

.pd-rake-calc thead th:first-child { border-radius: var(--radius-md) 0 0 0; }
.pd-rake-calc thead th:last-child { border-radius: 0 var(--radius-md) 0 0; }

.pd-rake-calc thead th.right { text-align: right; }

/* Sortable headers */
.pd-rake-calc th[data-sort] { cursor: pointer; user-select: none; }
.pd-rake-calc th[data-sort]::after { content: ' \2195'; opacity: 0.4; font-size: 0.8em; }
.pd-rake-calc th[data-sort][data-dir="asc"]::after { content: ' \2191'; opacity: 1; }
.pd-rake-calc th[data-sort][data-dir="desc"]::after { content: ' \2193'; opacity: 1; }

.pd-rake-calc tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.pd-rake-calc tbody tr:last-child { border-bottom: none; }

.pd-rake-calc tbody td {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-small);
  line-height: var(--leading-data);
  vertical-align: middle;
  background: var(--color-surface);
}

.pd-rake-calc tbody tr:nth-child(even) td { background: var(--color-surface-2); }
.pd-rake-calc tbody tr:hover td { background: var(--color-accent-subtle); }

/* Table columns */
.col-rank {
  font-family: var(--font-serif);
  color: var(--color-text-muted);
  font-size: var(--text-label);
  width: 40px;
}

.col-room {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  white-space: nowrap;
}

/* Wide 2:1 box so wordmark logos (WPT, Unibet, Ipoker) read at full
   width while square icons (Bet365, CoinPoker) still land at 32x32.
   object-fit:contain preserves aspect for everything in between. */
.col-room .room-logo {
  width: 140px;
  height: 40px;
  object-fit: contain;
  object-position: left center;
  vertical-align: middle;
  margin-right: 14px;
  flex-shrink: 0;
}

.col-room .room-name,
.col-room .room-name-link {
  vertical-align: middle;
}

.col-room small {
  display: block;
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.fallback-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  cursor: help;
}

/* Room name clickable link */
.room-name-link {
  cursor: pointer;
  border-bottom: 1px dotted var(--color-text-muted);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.room-name-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Row expansion */
.row-expansion td {
  padding: 0 !important;
  background: var(--color-surface-2) !important;
}

.expansion-cell {
  border-top: 2px solid var(--color-accent);
}

.expansion-inner {
  padding: var(--space-5);
}

.expansion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.expansion-title {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.expansion-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.expansion-table th {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.expansion-table th.right { text-align: right; }

.expansion-table td {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-serif);
  border-bottom: 1px solid var(--color-border);
}

.expansion-table td.right { text-align: right; }

.expansion-loading,
.expansion-empty {
  padding: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  text-align: center;
}

.fallback-notice {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: var(--max-width-full);
  margin: var(--space-4) auto 0;
  padding: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.col-rake {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  text-align: right;
  font-size: var(--text-body);
}

.col-cap {
  font-family: var(--font-serif);
  text-align: right;
  color: var(--color-text-secondary);
}

.cap-bb {
  display: block;
  font-size: var(--text-label);
  color: var(--color-text-muted);
  margin-top: 1px;
}

.col-bb100 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  text-align: right;
  font-size: var(--text-body);
}

.col-rakeback {
  font-family: var(--font-serif);
  text-align: right;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

.col-netbb100 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  text-align: right;
  font-size: var(--text-body);
}

.rb-note {
  cursor: help;
  border-bottom: 1px dotted var(--color-text-muted);
}

.col-action { text-align: right; white-space: nowrap; }

.play-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 10px;
  background: var(--color-accent);
  color: var(--color-text-on-dark);
  text-decoration: none;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 1px 2px rgba(107, 31, 42, 0.2);
}

.play-link:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-on-dark);
  box-shadow: 0 2px 6px rgba(107, 31, 42, 0.3);
}

.visit-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
}

.visit-link:hover {
  color: var(--color-text-secondary);
}

/* Best/worst row highlight — data values only */
.row-best .col-rake,
.row-best .col-bb100,
.row-best .col-netbb100 { color: var(--color-positive); font-weight: var(--weight-bold); }
.row-worst .col-rake,
.row-worst .col-bb100,
.row-worst .col-netbb100 { color: var(--color-danger); font-weight: var(--weight-bold); }


/* Rake/100 hands column */
.col-rake100 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  text-align: right;
  font-size: var(--text-body);
}

/* NET RAKE column */
.col-netrake {
  font-family: var(--font-serif);
  text-align: right;
  color: var(--color-text-secondary);
}

/* ============================================================
   RESPONSIVE — progressive column hiding so the table never
   horizontally scrolls. Inline logo lives inside .col-room.
   Breakpoints (least essential drops first):
     1024  -> drop Cap
     900   -> drop Net Rake
     640   -> tighten padding, allow Room to wrap
     480   -> drop # (rank), shrink Action button
   ============================================================ */

/* iPad landscape and smaller: lose the Cap column.
   Cap is implicit in Rake/100 and bb/100. */
@media (max-width: 1024px) {
  .col-cap, .th-cap { display: none; }
  .pd-rake-calc thead th { padding: var(--space-3) var(--space-4); font-size: 11px; letter-spacing: 0.04em; }
  .pd-rake-calc tbody td { padding: var(--space-3) var(--space-4); }
  .pd-rake-calc .col-room { font-size: var(--text-small); }
  .pd-rake-calc .col-room .room-logo { width: 110px; height: 34px; margin-right: 12px; }
  .pd-rake-calc .col-rake100,
  .pd-rake-calc .col-bb100 { font-size: var(--text-small); }
  .pd-rake-calc .col-netrake { font-size: var(--text-small); }
}

/* iPad portrait and small tablets: lose Net Rake too. */
@media (max-width: 900px) {
  .col-netrake, .th-netrake { display: none; }
  .pd-rake-calc tbody td { padding: var(--space-3); }
  .pd-rake-calc thead th { padding: var(--space-2) var(--space-3); white-space: normal; line-height: 1.2; }
  .results-section { padding: var(--space-6) var(--space-5); }
}

/* Phone landscape: tighten padding, allow Room to wrap. */
@media (max-width: 640px) {
  .pd-rake-calc tbody td { padding: 10px var(--space-3); }
  .pd-rake-calc thead th { padding: var(--space-2) var(--space-3); font-size: 10px; }
  .pd-rake-calc .col-room { white-space: normal; line-height: 1.3; }
  .pd-rake-calc .col-room .room-logo { width: 60px; height: 28px; margin-right: 10px; }
  .pd-rake-calc .col-rake100,
  .pd-rake-calc .col-bb100 { font-size: 13px; }
  .results-section { padding: var(--space-5) var(--space-4); }
}

/* Phone portrait: drop rank, compact Action button. */
@media (max-width: 480px) {
  .col-rank, .th-rank { display: none; }
  .pd-rake-calc tbody td { padding: 10px var(--space-2); }
  .pd-rake-calc thead th { padding: var(--space-2); font-size: 10px; }
  .pd-rake-calc .col-room { font-size: 13px; }
  .pd-rake-calc .col-room .room-logo { width: 52px; height: 24px; margin-right: 8px; }
  .pd-rake-calc .play-link,
  .pd-rake-calc .visit-link { font-size: 10px; padding: 6px 8px; letter-spacing: 0.02em; }
}


/* PERSONAL COST CALCULATOR */
.cost-section {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.cost-inner {
  max-width: var(--max-width-full);
  margin: 0 auto;
  padding: var(--space-7) var(--space-6);
}

.cost-inner h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.cost-inputs {
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}

.cost-inputs .control-group { flex: 0 0 auto; }

.hands-input {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  height: 36px;
  width: 140px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hands-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-subtle), inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Timeframe cost grid */
.cost-tf-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border-heavy);
  margin-bottom: var(--space-6);
}

.cost-tf-table th,
.cost-tf-table td {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-small);
  line-height: var(--leading-data);
  border-bottom: 1px solid var(--color-border);
}

.cost-tf-table thead th {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: right;
  background: var(--color-surface);
}

.cost-tf-table thead th:first-child { text-align: left; }

.cost-tf-table tbody td {
  font-family: var(--font-serif);
  text-align: right;
  background: var(--color-surface);
}

.cost-tf-table tbody td:first-child {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  text-align: left;
  color: var(--color-text-primary);
}

.cost-tf-table tbody tr:nth-child(even) td { background: var(--color-surface-2); }

.cost-tf-table .cost-row-savings td {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  border-top: 2px solid var(--color-border-heavy);
}

.cost-tf-table .cost-row-savings td:first-child {
  color: var(--color-accent);
}

.cost-save-hint {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--color-positive);
  margin-left: var(--space-2);
}

.cost-tf-action {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

.cost-tf-action .play-link {
  font-size: var(--text-label);
}

.cost-yearly-highlight {
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
}

.cost-action {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.cost-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: var(--color-text-on-dark);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(107, 31, 42, 0.25), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.cost-cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-on-dark);
  box-shadow: 0 3px 8px rgba(107, 31, 42, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.cost-cta:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(107, 31, 42, 0.2);
}

.cost-note {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 480px;
}

.cost-placeholder {
  padding: var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: var(--text-body);
}

.cost-rb-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.cost-rb-toggle input {
  accent-color: var(--color-accent);
}

/* SWITCH AND SAVE CALLOUT */
.switch-save-section {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.switch-save-inner {
  max-width: var(--max-width-full);
  margin: 0 auto;
  padding: var(--space-6) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.switch-save-content {
  flex: 1;
  min-width: 0;
}

.switch-save-headline {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
  line-height: var(--leading-snug);
}

.switch-save-detail {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.switch-save-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: var(--color-text-on-dark);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(107, 31, 42, 0.25), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.switch-save-cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-on-dark);
  box-shadow: 0 3px 8px rgba(107, 31, 42, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.switch-save-cta:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(107, 31, 42, 0.2);
}

/* CATEGORY PICKS */
.category-picks-section {
  padding: var(--space-7) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.category-picks-inner {
  max-width: var(--max-width-full);
  margin: 0 auto;
}

.category-picks-heading {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.category-picks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.category-pick-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.category-pick-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  border-color: var(--color-accent);
}

.category-pick-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.category-pick-name {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.category-pick-bb100 {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.category-pick-savings {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--color-positive);
  font-weight: var(--weight-medium);
}

.category-pick-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-5);
  background: var(--color-accent);
  color: var(--color-text-on-dark);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 1px 2px rgba(107, 31, 42, 0.2);
  margin-top: var(--space-1);
}

.category-pick-cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-on-dark);
  box-shadow: 0 2px 6px rgba(107, 31, 42, 0.3);
}

@media (max-width: 768px) {
  .category-picks-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .switch-save-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .switch-save-cta {
    align-self: center;
  }
}

@media (max-width: 640px) {
  .category-picks-section {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .switch-save-inner {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* FULL RAKE COMPARISON (OVERVIEW HEATMAP) */
.overview-section {
  padding: var(--space-7) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.overview-inner {
  max-width: var(--max-width-full);
  margin: 0 auto;
}

.overview-inner h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.overview-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border-heavy);
}

/* Controls bar above table */
.ov-controls {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: flex-end;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.ov-control-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ov-controls-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
}

/* Table */
.overview-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

/* Show toggle -- same row as variant/players */
.ov-show-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ov-show-group {
  display: flex;
  gap: 0;
}

.ov-show-btn {
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-heavy);
  border-right-width: 0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  user-select: none;
  white-space: nowrap;
}

.ov-show-btn:first-child {
  border-radius: 4px 0 0 4px;
}

.ov-show-btn:last-child {
  border-right-width: 1px;
  border-radius: 0 4px 4px 0;
}

.ov-show-btn:hover {
  background: var(--color-accent-subtle);
  color: var(--color-text-primary);
}

.ov-show-btn.active {
  background: var(--color-accent);
  color: #fff;
  font-weight: var(--weight-semibold);
  border-color: var(--color-accent);
}

/* Stake headers */
.overview-table thead th {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid var(--color-border-heavy);
  border-right: 1px solid var(--color-border);
}

.overview-table thead th:last-child { border-right: none; }

.ov-th-room {
  text-align: left !important;
  font-weight: var(--weight-medium) !important;
  font-style: italic;
  width: 180px;
}

/* Room cell — small inline icon + name, matching legacy */
.ov-room {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-surface);
  white-space: nowrap;
  border-right: 1px solid var(--color-border-heavy);
  vertical-align: middle;
  text-align: left;
}

.ov-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 2px;
}

.ov-logo--dark {
  background: var(--color-text-primary);
  padding: 2px;
}

/* Data cells */
.ov-cell {
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  vertical-align: middle;
}

.ov-cell:last-child { border-right: none; }

.ov-val {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.ov-bb {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.3;
}

.ov-cell--empty {
  color: var(--color-text-muted);
  background: var(--color-surface-2) !important;
  font-size: var(--text-small);
}

/* Rows */
.overview-table tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.overview-table tbody tr:last-child { border-bottom: none; }

.overview-table tbody tr:nth-child(even) .ov-room {
  background: var(--color-surface-2);
}

.overview-loading {
  padding: var(--space-6) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  text-align: center;
  font-family: var(--font-sans);
}

@media (max-width: 640px) {
  .overview-section {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .ov-controls {
    gap: var(--space-4);
  }
}


/* METHODOLOGY */
.methodology-section {
  padding: var(--space-7) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.methodology-section + .methodology-section {
  border-top: none;
  padding-top: 0;
}

.methodology-inner {
  max-width: var(--max-width-full);
  margin: 0 auto;
}
/* Prose typography now handled by .pd-prose in base.css */

/* TOURNAMENT RAKE */
.tournament-section {
  padding: var(--space-7) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.methodology-section + .tournament-section {
  border-top: none;
  padding-top: 0;
}

.tournament-inner {
  max-width: var(--max-width-full);
  margin: 0 auto;
}
/* Prose typography now handled by .pd-prose in base.css */

.tournament-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border-heavy);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}

.tournament-table-wrapper table {
  min-width: 560px;
}

.fee-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fee-bar-track {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  max-width: 120px;
}

.fee-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--color-accent);
  transition: width 0.3s ease;
}

.fee-bar-fill--low { background: var(--color-positive); }
.fee-bar-fill--high { background: var(--color-danger); }

/* RESPONSIVE */
@media (max-width: 768px) {
  .cost-tf-table .cost-tf-hide { display: none; }
}

@media (max-width: 640px) {
  .controls-inner { gap: var(--space-4); }
  .results-section,
  .methodology-section,
  .tournament-section { padding-left: var(--space-4); padding-right: var(--space-4); }
  .cost-inner { padding-left: var(--space-4); padding-right: var(--space-4); }
}


/* ============================================================
   Sticky Mobile CTA
   ============================================================ */

.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}

.mobile-sticky-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--max-width-full);
  margin: 0 auto;
}

.mobile-sticky-cta-text {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.7);
  line-height: var(--leading-snug);
  min-width: 0;
}

.mobile-sticky-cta-text strong {
  color: var(--color-text-on-dark);
  display: block;
}

.mobile-sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 10px var(--space-5);
  background: var(--color-text-on-dark);
  color: var(--color-accent);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.mobile-sticky-cta-btn:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent-hover);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
  .mobile-sticky-cta.is-visible {
    display: block;
  }
  /* Add bottom padding to page so sticky doesn't cover content */
  body:has(.mobile-sticky-cta.is-visible) {
    padding-bottom: 64px;
  }
}