/* ======================================================================
   TapliMIX-style refresh (site-wide override, appended last so it wins).
   Flat clean ground, filled rounded cards with soft shadows, rounded
   controls. Theme-aware (light/dark) through the existing tokens; the
   gold accent is unchanged.
   ====================================================================== */

/* 1. Ground: flat, and remove the drawn grid + circles. */
body.study-page::before,
body.study-page::after { background-image: none !important; }
:root {
  --mc-ground: #f4f4f8;
  --mc-surface: #ffffff;
  --mc-line: #e6e6ee;
  --mc-ink: #14141a;
  --mc-muted: #6b6b77;
}
:root[data-theme="dark"] {
  --mc-ground: #0b0b0d;
  --mc-surface: #17171a;
  --mc-line: #2a2a2f;
  --mc-ink: #f4f4f5;
  --mc-muted: #9a9a9e;
}
html, body, body.study-page { background: var(--mc-ground) !important; }

/* 2. Surfaces: filled cards, rounded 18px, soft shadow. */
.study-page .panel,
.study-page .perf-panel,
.study-page .perf-card,
.study-page .metric,
.study-page .result-summary,
.study-page .reddit-card,
.study-page .landing-card,
.study-page .table-builder,
.study-page .session-sidebar,
.study-page .table-deck-panel,
.study-page .table-surface {
  background: var(--mc-surface) !important;
  border: var(--mc-hair) solid var(--mc-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(15, 15, 35, .04), 0 12px 32px rgba(15, 15, 35, .06) !important;
}
:root[data-theme="dark"] .study-page .panel,
:root[data-theme="dark"] .study-page .perf-panel,
:root[data-theme="dark"] .study-page .perf-card,
:root[data-theme="dark"] .study-page .metric,
:root[data-theme="dark"] .study-page .result-summary,
:root[data-theme="dark"] .study-page .reddit-card,
:root[data-theme="dark"] .study-page .landing-card,
:root[data-theme="dark"] .study-page .table-builder,
:root[data-theme="dark"] .study-page .session-sidebar,
:root[data-theme="dark"] .study-page .table-deck-panel,
:root[data-theme="dark"] .study-page .table-surface {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .35) !important;
}

/* 3. The solver board rows/slots read as inset surfaces on the card. */
.study-page #studyBoard .board-row,
.study-page .board-row,
.study-page .slot,
.study-page .metric,
.study-page .evidence-label {
  background: var(--mc-ground) !important;
  border: var(--mc-hair) solid var(--mc-line) !important;
  border-radius: 14px !important;
}
.study-page .board-row.can-place { border-color: var(--mc-accent) !important; background: color-mix(in srgb, var(--mc-accent) 10%, var(--mc-ground)) !important; }

/* 4. Controls: rounded, TapliMIX-like. */
.study-page button,
.study-page input:not([type=range]):not([type=file]),
.study-page select,
.study-page textarea,
.study-page .landing-cta { border-radius: 12px !important; }
.study-page .landing-cta { border-radius: 14px !important; }

/* 5. Header + nav hairlines in the surface tone. */
.study-header, .study-nav { border-color: var(--mc-line) !important; }

/* 6. Landing cards: filled surface with a soft accent hover. */
.study-page .landing-card:hover { border-color: var(--mc-accent) !important; }
.study-page .landing-intro { background: var(--mc-surface) !important; border-radius: 20px !important; box-shadow: 0 1px 2px rgba(15,15,35,.04), 0 12px 32px rgba(15,15,35,.06) !important; }


/* 7. Bespoke pages (plans / legal) follow the same light ground + card surfaces. */
body.study-page.plans-page,
body.study-page.legal-page {
  --mc-ground: #f4f4f8;
  --mc-surface: #ffffff;
  --mc-line: #e6e6ee;
  --mc-ink: #14141a;
  --mc-muted: #6b6b77;
  --mc-accent: #8a6a1f;
  background: var(--mc-ground) !important;
  color: var(--mc-ink) !important;
}
:root[data-theme="dark"] body.study-page.plans-page,
:root[data-theme="dark"] body.study-page.legal-page {
  --mc-ground: #0b0b0d;
  --mc-surface: #17171a;
  --mc-line: #2a2a2f;
  --mc-ink: #f4f4f5;
  --mc-muted: #9a9a9e;
  --mc-accent: #d9b34a;
  background: var(--mc-ground) !important;
  color: var(--mc-ink) !important;
}
html:has(.plans-page), html:has(.legal-page) { background: var(--mc-ground) !important; }

.study-page .plan,
.study-page .plans-tier,
.study-page .legal-table,
.study-page .reddit-card,
.study-page .ui-pane,
.study-page .ui-frame {
  background: var(--mc-surface) !important;
  border: var(--mc-hair) solid var(--mc-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(15, 15, 35, .04), 0 12px 32px rgba(15, 15, 35, .06) !important;
}
.study-page.plans-page .brand,
.study-page.legal-page .legal-brand { color: var(--mc-ink) !important; }
.study-page.plans-page .plans-cta,
.study-page.plans-page .plan .plans-cta {
  background: var(--mc-accent) !important;
  border-color: var(--mc-accent) !important;
  border-radius: 12px !important;
}

/* 8. Plans page: legible ink on the light surface (it was designed for a black ground). */
.study-page.plans-page { color: var(--mc-ink) !important; }
.study-page.plans-page .plan-name { color: var(--mc-accent) !important; }
.study-page.plans-page td,
.study-page.plans-page th,
.study-page.plans-page .plan-price,
.study-page.plans-page .plans-period,
.study-page.plans-page .plans-period-label,
.study-page.plans-page .plans-head,
.study-page.plans-page strong,
.study-page.plans-page b,
.study-page.plans-page h1,
.study-page.plans-page h2 { color: var(--mc-ink) !important; }
.study-page.plans-page .plans-note,
.study-page.plans-page .plans-legal,
.study-page.plans-page .plans-clock-label,
.study-page.plans-page .small,
.study-page.plans-page .muted,
.study-page.plans-page p { color: var(--mc-muted) !important; }
.study-page.plans-page .plan[data-tier="pro"] { border-color: var(--mc-accent) !important; }
.study-page.plans-page .plans-cta { color: #1a1408 !important; }



/* 9. Plans comparison rows + labels (they use cmp-* classes, not td). */
.study-page.plans-page [class^="cmp-"],
.study-page.plans-page [class*=" cmp-"],
.study-page.plans-page .plan-rows li,
.study-page.plans-page .plan-rows .v { color: var(--mc-ink) !important; }
.study-page.plans-page .cmp-label,
.study-page.plans-page .plan-rows .k { color: var(--mc-muted) !important; }
.study-page.plans-page .plans-clock-label { color: var(--mc-ink) !important; }


/* 10. Plans CTA bar: keep its note dark on the gold plate. */
.study-page.plans-page .plans-cta .plans-note,
.study-page.plans-page .plans-cta p { color: #1a1408 !important; }


/* 11. Plans: in light mode the Early Bird headline matches the tier names. */
:root:not([data-theme="dark"]) .study-page.plans-page .plans-title { color: var(--mc-accent) !important; }


/* mobile: keep the Upgrade button on the left of its row */
@media (max-width: 720px) {
  .study-page .study-header { flex-wrap: wrap; row-gap: 10px; }
  .study-page .study-header .study-upgrade { order: 1 !important; margin-left: 0 !important; margin-right: auto !important; }
}


/* mobile: brand on its own row, Upgrade left on the next */
@media (max-width: 720px) {
  .study-page .study-header { flex-wrap: wrap; row-gap: 10px; }
  .study-page .study-header .brand { flex: 1 1 100%; }
  .study-page .study-header .study-upgrade { order: 90 !important; margin-left: 0 !important; margin-right: auto !important; }
}


/* plans countdown: one line — the seconds sit on the same baseline, only smaller */
.plans-page #plansUntil { letter-spacing: 0; white-space: nowrap; }
.plans-page #plansUntil .eb-lead {
  font-style: normal; font-size: .48em; line-height: 1;
  opacity: .85; margin-right: .45em; letter-spacing: .02em;
}
.plans-page #plansUntil .eb-sec { font-size: .58em; line-height: 1; margin-left: .32em; }
:root:not([data-theme="dark"]) .study-page.plans-page #plansUntil { color: var(--mc-accent) !important; }

/* performance stat cards: keep the text off the edge */
.study-page .perf-card { padding: 16px 24px !important; text-align: right; }
.study-page .perf-card b { margin-bottom: 8px; }

/* 4. seat chips are perfect circles */
.study-page .position-map .position-chip { border-radius: 50% !important; }

/* 8. rank/suit switch reads as the same segmented control as the HU / 3way switch */
.study-page .fantasy-sort {
  display: inline-flex; align-items: stretch; gap: 0; overflow: hidden;
  border: 1px solid var(--mc-line) !important; border-radius: 9px;
  margin-bottom: 9px;
}
.study-page .fantasy-sort button {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 9px 16px !important; background: transparent !important;
  color: var(--mc-ink) !important; font-size: 12.5px; text-align: center;
}
.study-page .fantasy-sort button.active {
  background: var(--mc-accent) !important; color: #fff !important; font-weight: 800;
}
:root[data-theme="dark"] .study-page .fantasy-sort button.active { color: #0c0c0d !important; }

/* 8. a hand category this hand cannot make is drawn faint */
.study-page .fantasy-categories button { text-align: center; }
.study-page .fantasy-categories button.unavailable { opacity: .32 !important; }

/* 9. Fantasyland discards: one horizontal row of plain frames (the QQ/KK labels are dropped) */
.study-page #studyDiscards.fantasy-discards {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important; gap: 7px !important;
}
.study-page .fantasy-discard-slot .discard-rank,
.study-page .fantasy-discard-slot .discard-count { display: none !important; }

/* 12. Plans headline + countdowns: Josefin Sans, no display face, no italic, no skew */
.study-page.plans-page .plans-clock,
.study-page.plans-page .plans-title,
.study-page.plans-page .plans-until {
  font-family: "Josefin Sans", Inter, "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-style: normal !important;
  transform: none !important;
  font-weight: 700;
  letter-spacing: -.01em;
}
.study-page.plans-page .plans-until { letter-spacing: 0; }

/* 12b. Clearance under the nav hairline. Josefin Sans has taller ascenders than the sans it
   replaced, so the headline's glyphs rise above their own 1em line box and crossed the
   divider above it: the main column carries no top padding at all (--sp-6 is 0px in the
   shared tokens). A margin, not a padding, for two reasons: the countdown is absolutely
   positioned against this box, so a padding would push the wordmark down and leave the
   numbers behind, and the head's own margin-bottom is untouched. */
.study-page.plans-page .plans-head { margin-top: var(--sp-2, 16px); }

/* 12c. Phones: the deadline is pinned to the right edge of the head, so as soon as the
   centred wordmark is wide enough the two collide - measured, they meet at about 480px, so
   every phone narrower than that had the countdown printed over the headline. Under the
   page's own phone breakpoint the deadline drops onto its own centred line instead, which is
   also how the trial clock above already reads. */
@media (max-width: 620px) {
  .study-page.plans-page .plans-head.early .plans-until {
    position: static;
    text-align: center;
    margin-top: 6px;
  }
}