/* Tool-Lifes portal frame -- loaded LAST so every app inherits one typeface.
 * Remaps per-app font variables to Pretendard without touching content CSS.
 * Also locks dark-hero contrast (visual.css :where() lost to later .hero h1).
 * Prefix: --* font vars, .tl-* chrome, hero contrast. Never .lab. */

html {
  --font-sans: var(--tl-font) !important;
  --font-display: var(--tl-font) !important;
  --font-body: var(--tl-font) !important;
  --job-body: var(--tl-font) !important;
  --job-disp: var(--tl-font) !important;
  --body: var(--tl-font) !important;
  --disp: var(--tl-font) !important;
  --body-font: var(--tl-font) !important;
  --pg-font-display: var(--tl-font) !important;
  --pg-font-body: var(--tl-font) !important;
  --rh-font-display: var(--tl-font) !important;
  --rh-font-body: var(--tl-font) !important;
  --br-font-display: var(--tl-font) !important;
  --br-font-body: var(--tl-font) !important;
  --mc-font-display: var(--tl-font) !important;
  --mc-font-body: var(--tl-font) !important;
  --sh-font-display: var(--tl-font) !important;
  --sh-font-body: var(--tl-font) !important;
  --mjr-disp: var(--tl-font) !important;
  --mjr-sans: var(--tl-font) !important;
  --ppl-display: var(--tl-font) !important;
}

.site-header,
.site-footer,
.brand,
.appname,
.tl-nav-link,
.tl-search-pill,
.tl-search-btn,
.lang-select,
.tl-apps,
.tl-dock,
.tl-palette,
.hub-page,
.tl-article,
.section-intro {
  font-family: var(--tl-font);
}

.site-header .brand,
.site-header .appname,
.site-header .tl-nav-link,
.site-header .lang-select,
.site-header .tl-apps > summary {
  font-family: var(--tl-font) !important;
}

/* --------------------------------------------------------------------------
 * Dark-hero contrast lock
 * Hub stays light-on-light. Every other .hero / .jhero / .mast is a dark wash.
 * !important beats app-scoped teal-on-teal / --muted-on-charcoal regressions.
 * -------------------------------------------------------------------------- */
body:not(.hub-page) .hero,
body:not(.hub-page) .jhero,
body:not(.hub-page) .mast {
  color: #f8fafc;
}

body:not(.hub-page) .hero h1,
body:not(.hub-page) .jhero h1,
body:not(.hub-page) .mast h1,
body:not(.hub-page) .jhero-text h1 {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: -0.022em;
}

body:not(.hub-page) .hero .lede,
body:not(.hub-page) .jhero .lede,
body:not(.hub-page) .mast .lede,
body:not(.hub-page) .jhero-text .lede,
body:not(.hub-page) .hero .sub,
body:not(.hub-page) .jhero .aka {
  color: rgba(255, 255, 255, .78) !important;
  font-size: max(1rem, 16px);
}

body:not(.hub-page) .hero .crumbs,
body:not(.hub-page) .hero .crumbs a,
body:not(.hub-page) .hero .crumbs span,
body:not(.hub-page) .hero .crumbs .sep,
body:not(.hub-page) .jhero .crumbs,
body:not(.hub-page) .jhero .crumbs a,
body:not(.hub-page) .jhero .crumbs span,
body:not(.hub-page) .mast .crumbs,
body:not(.hub-page) .mast .crumbs a {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  font-weight: 650;
}
body:not(.hub-page) .hero .crumbs a:hover,
body:not(.hub-page) .jhero .crumbs a:hover {
  color: #fff !important;
}

body:not(.hub-page) .hero .kicker,
body:not(.hub-page) .jhero .kicker {
  color: #fff !important;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .32);
}

/* Newsstand text-tabs on dark bars — slim underline, not stadium chips. */
body:not(.hub-page) .hero .pills,
body:not(.hub-page) .jhero .pills,
.spills .pills {
  gap: 2px 18px;
}

body:not(.hub-page) .hero .pill,
body:not(.hub-page) .hero a.pill,
body:not(.hub-page) .jhero .pill,
body:not(.hub-page) .jhero a.pill,
body:not(.hub-page) .jhero.has-art .pill,
.spills .pill {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 2px 8px !important;
  color: rgba(255, 255, 255, .88) !important;
  font-weight: 600;
  font-size: .86rem;
  box-shadow: none !important;
  text-shadow: none !important;
}

body:not(.hub-page) .hero .pill:hover,
body:not(.hub-page) .hero a.pill:hover,
body:not(.hub-page) .jhero .pill:hover,
body:not(.hub-page) .jhero a.pill:hover,
.spills .pill:hover {
  color: #fff !important;
  background: transparent !important;
  transform: none !important;
  text-decoration: none;
}

body:not(.hub-page) .hero .pill.active,
body:not(.hub-page) .hero a.pill.active,
body:not(.hub-page) .jhero .pill.active,
body:not(.hub-page) .jhero a.pill.active,
.spills .pill.active {
  color: #fff !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--accent, #f59e0b) !important;
  font-weight: 700;
}

.spills {
  background: color-mix(in srgb, #0b1220 88%, transparent) !important;
  padding: 6px 0 !important;
  box-shadow: none !important;
}

/* Delicate cards — hairline + soft lift, 2px accent not a fat strip. */
body:not(.hub-page) .card,
.s-feat,
.sport-card {
  border-radius: var(--tl-radius, 12px);
  box-shadow: var(--tl-shadow, 0 2px 8px rgba(0, 0, 0, .05));
}
.s-feat,
.sport-card,
.team-card,
.match-card,
.job-card,
.field-card {
  border-top-width: 2px;
}

body:not(.hub-page) .hero,
body:not(.hub-page) .jhero,
body:not(.hub-page) .mast {
  background-color: #141414;
  margin-top: 0;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
body:not(.hub-page):not(.tl-light-hero):not(.money) .site-header {
  border-bottom-color: #141414;
}

/* Softer dark-hero → light-body handoff (no harsh color cliff).
 * Photo heroes (.has-art) keep their own darken overlay — do not replace it
 * with this paper fade, or a white gap appears under the header. */
body:not(.hub-page) .hero:not(.has-art)::after,
body:not(.hub-page) .jhero:not(.has-art)::after,
body:not(.hub-page) .mast:not(.has-art)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom, transparent, var(--tl-bg, #f4f6f8));
}
body:not(.hub-page) .jhero.has-art {
  box-shadow: inset 0 -36px 32px -24px var(--tl-bg, #f4f6f8);
}

body:not(.hub-page) .tl-hero-meta .tl-read-time,
body:not(.hub-page) .jhero .tl-read-time {
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
}

@media (prefers-reduced-motion: reduce) {
  body:not(.hub-page) .hero .pill,
  .spills .pill { transition: none; }
}

/* --------------------------------------------------------------------------
 * Light-surface heroes (Money atlas, .tl-light-hero).
 * The dark-hero lock above assumes a charcoal wash. Money's hero is a pale
 * cyan→white gradient, so white title/crumb/pill text is unreadable and
 * browsers (or line-box backgrounds) paint saturated “title blocks”.
 * These rules load last and beat the lock with !important.
 * -------------------------------------------------------------------------- */
body.tl-light-hero .hero,
body.tl-light-hero .jhero,
body.tl-light-hero .mast,
body.money .hero,
body.money .jhero,
body.money .mast,
body.money .money-hero {
  color: #191919 !important;
  background-color: #fff !important;
}
body.tl-light-hero .hero h1,
body.tl-light-hero .jhero h1,
body.tl-light-hero .mast h1,
body.tl-light-hero .jhero-text h1,
body.money .hero h1,
body.money .jhero h1,
body.money .mast h1,
body.money .jhero-text h1,
body.money .money-hero h1 {
  color: #191919 !important;
  -webkit-text-fill-color: #191919;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  display: block;
  padding: 0;
}
body.tl-light-hero .hero .lede,
body.tl-light-hero .jhero .lede,
body.tl-light-hero .mast .lede,
body.tl-light-hero .jhero-text .lede,
body.tl-light-hero .hero .sub,
body.tl-light-hero .jhero .aka,
body.money .hero .lede,
body.money .jhero .lede,
body.money .mast .lede,
body.money .jhero-text .lede,
body.money .hero .sub,
body.money .jhero .aka {
  color: #333333 !important;
  background: none !important;
  -webkit-text-fill-color: #333333;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.tl-light-hero .hero .crumbs,
body.tl-light-hero .hero .crumbs a,
body.tl-light-hero .hero .crumbs span,
body.tl-light-hero .hero .crumbs .sep,
body.tl-light-hero .jhero .crumbs,
body.tl-light-hero .jhero .crumbs a,
body.tl-light-hero .jhero .crumbs span,
body.tl-light-hero .mast .crumbs,
body.tl-light-hero .mast .crumbs a,
body.money .hero .crumbs,
body.money .hero .crumbs a,
body.money .hero .crumbs span,
body.money .hero .crumbs .sep,
body.money .jhero .crumbs,
body.money .jhero .crumbs a,
body.money .jhero .crumbs span,
body.money .mast .crumbs,
body.money .mast .crumbs a,
html body.money.tl-light-hero .hero .crumbs,
html body.money.tl-light-hero .hero .crumbs a,
html body.money.tl-light-hero .hero .crumbs span,
html body.money.tl-light-hero .hero .crumbs .sep {
  color: #191919 !important;
  font-weight: 650;
}
body.tl-light-hero .hero .crumbs a:hover,
body.tl-light-hero .jhero .crumbs a:hover,
body.money .hero .crumbs a:hover,
body.money .jhero .crumbs a:hover {
  color: #134e4a !important;
}
body.tl-light-hero .hero .kicker,
body.tl-light-hero .jhero .kicker,
body.money .hero .kicker,
body.money .jhero .kicker {
  color: #191919 !important;
  background: #fff !important;
  border-color: #e5e7eb !important;
}
body.tl-light-hero .hero .pill,
body.tl-light-hero .hero a.pill,
body.tl-light-hero .jhero .pill,
body.tl-light-hero .jhero a.pill,
body.money .hero .pill,
body.money .hero a.pill,
body.money .jhero .pill,
body.money .jhero a.pill,
body.money .pills .pill,
html body.money.tl-light-hero .hero.jhero.has-art .pill,
html body.money.tl-light-hero .hero.jhero.has-art a.pill,
html body.money .jhero.has-art .pill,
html body.money .jhero.has-art a.pill,
html body.tl-light-hero .jhero.has-art .pill,
html body.tl-light-hero .jhero.has-art a.pill {
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  color: #191919 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 650;
}
body.tl-light-hero .hero .pill:hover,
body.tl-light-hero .jhero .pill:hover,
body.money .hero .pill:hover,
body.money .jhero .pill:hover,
body.money .pills .pill:hover,
html body.money.tl-light-hero .hero.jhero.has-art .pill:hover,
html body.money .jhero.has-art a.pill:hover,
html body.tl-light-hero .jhero.has-art .pill:hover {
  color: #134e4a !important;
  border-color: #134e4a !important;
  background: #fff !important;
}
body.tl-light-hero .hero .pill.active,
body.tl-light-hero .jhero .pill.active,
body.money .hero .pill.active,
body.money .jhero .pill.active,
body.money .pills .pill.active,
html body.money.tl-light-hero .hero.jhero.has-art .pill.active,
html body.money.tl-light-hero .hero.jhero.has-art a.pill.active,
html body.money .jhero.has-art .pill.active,
html body.money .jhero.has-art a.pill.active,
html body.tl-light-hero .jhero.has-art .pill.active {
  color: #fff !important;
  background: #191919 !important;
  border-color: #191919 !important;
  box-shadow: none !important;
  font-weight: 800;
}
body.tl-light-hero .tl-hero-meta .tl-read-time,
body.tl-light-hero .jhero .tl-read-time,
body.money .tl-hero-meta .tl-read-time,
body.money .jhero .tl-read-time {
  color: #191919 !important;
  background: #fff !important;
  border-color: #e5e7eb !important;
}
body.tl-light-hero .hero::after,
body.tl-light-hero .jhero::after,
body.tl-light-hero .mast::after,
body.money .hero::after,
body.money .jhero::after,
body.money .mast::after {
  background: linear-gradient(to bottom, transparent, var(--tl-bg, #f4f6f8));
}

html body.money .site-header .appname,
html body.tl-light-hero .site-header .appname {
  color: #191919 !important;
}