/**
 * LineAlgo Design System v3 — promo / live newspaper alignment (2026-06-28)
 * Source: assets/research/prototypes/linealgo_live_sports_dfs_claude_prototype.html
 */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --la-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
  --la-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --la-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --la-navy: #07101c;
  --la-paper: #f7f5ee;
  --la-surface-paper: #f0ede4;
  --la-bg: #f7f5ee;
  --la-surface: #ffffff;
  --la-surface-muted: #f0ede4;
  --la-ink: #101827;
  --la-muted: #667085;
  --la-border: #d4cfc4;
  --la-border-strong: #bdb8aa;
  --la-blue: #125cff;
  --la-blue-hover: #0b4ad4;
  --la-green: #34a853;
  --la-green-brand: #8fd923;
  --la-radius-sm: 8px;
  --la-radius-md: 12px;
  --la-radius-lg: 18px;
  --la-radius-pill: 980px;
  --la-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.04);
  --la-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.06);
  --la-blur: saturate(180%) blur(20px);
  /* Mastery-aligned dark tokens */
  --la-dark-bg: #0f1218;
  --la-dark-surface: #1a1f28;
  --la-dark-surface-2: #222833;
  --la-dark-border: #343d4d;
  --la-dark-ink: #e8ecf1;
  --la-dark-muted: #8b95a8;
  --la-dark-blue: #1a73e8;
  --la-dark-blue-hover: #1557b0;
  --la-dark-brand: #9bd51c;
  --la-dark-green: #5fba7d;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--la-font) !important;
}

/* ── Live newspaper shell — promo dark masthead (homepage, live-sports, live-dfs) ── */
body.la-branded.la-platform {
  background: var(--la-dark-bg, #0f1218) !important;
  color: var(--la-dark-ink, #e8ecf1) !important;
}

.live-header {
  background: var(--la-navy) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  color: #f7f5ee !important;
  padding: 10px 20px !important;
  box-shadow: none !important;
}

.live-wordmark span {
  color: #fff !important;
  font-family: var(--la-display) !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.live-wordmark em {
  color: var(--la-green-brand) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

.live-wordmark small {
  color: var(--la-green-brand) !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.masthead-right {
  color: #94a3b8 !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.6875rem !important;
}

.masthead-right strong {
  color: #fff !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.live-nav {
  background: var(--la-navy) !important;
  border-top: 1px solid #1a2a3a !important;
  border-bottom: none !important;
  color: #64748b !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  gap: 0 !important;
  padding: 0 !important;
  justify-content: stretch !important;
}

.live-nav a {
  flex: 1 1 auto !important;
  min-height: 44px !important;
  padding: 10px 8px !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  text-align: center !important;
  color: #64748b !important;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.live-nav a:hover {
  color: #94a3b8 !important;
  background: transparent !important;
}

.live-nav a.active {
  color: #fff !important;
  background: transparent !important;
  border-bottom-color: var(--la-green-brand) !important;
}

.section-switch {
  background: var(--la-navy) !important;
  border-top: 1px solid #1a2a3a !important;
  border-bottom: none !important;
  padding: 0 !important;
  gap: 0 !important;
  display: flex !important;
}

.section-switch a {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 10px 8px !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  background: transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-align: center !important;
}

.section-switch a:hover {
  color: #94a3b8 !important;
  background: transparent !important;
}

.section-switch a.active {
  border-bottom-color: var(--la-green-brand) !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

.live-dateline,
.archive-date-bar {
  background: var(--la-navy) !important;
  border-top: 1px solid #1a2a3a !important;
  border-bottom: none !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 8px 20px !important;
}

.archive-toolbar {
  background: var(--la-surface) !important;
  color: var(--la-ink) !important;
}

/* ── Product paper shell ── */
body.la-branded,
body:not(.ms-body) {
  background: var(--la-dark-bg, #0f1218) !important;
  color: var(--la-dark-ink, #e8ecf1) !important;
}

.paper-shell {
  width: min(1200px, calc(100% - 32px)) !important;
}

body.la-branded .paper-header {
  background: var(--la-navy) !important;
  color: #f7f5ee !important;
  padding: 12px 16px !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  gap: 16px !important;
  margin: 0 calc(-1 * min(16px, 2vw)) !important;
  width: calc(100% + min(32px, 4vw)) !important;
}

body.la-branded .paper-wordmark,
body.la-branded .paper-wordmark span {
  color: #fff !important;
  font-family: var(--la-display) !important;
}

body.la-branded .paper-wordmark em {
  color: var(--la-green-brand) !important;
}

.paper-nav {
  gap: 0 !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

body.la-branded .paper-nav a {
  padding: 10px 12px !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  color: #94a3b8 !important;
  transition: color 0.15s ease, border-color 0.15s ease;
}

body.la-branded .paper-nav a:hover {
  color: #cbd5e1 !important;
  background: transparent !important;
}

body.la-branded .paper-nav a.active {
  color: #fff !important;
  background: transparent !important;
  border-bottom-color: var(--la-green-brand) !important;
}

.paper-nav a {
  padding: 8px 12px !important;
  border-radius: var(--la-radius-sm) !important;
  border-bottom: none !important;
  color: var(--la-muted) !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.paper-nav a:hover,
.paper-nav a.active {
  color: var(--la-blue) !important;
  background: rgba(18, 92, 255, 0.08) !important;
  border-bottom-color: transparent !important;
}

.paper-cta {
  border-radius: var(--la-radius-pill) !important;
  background: var(--la-blue) !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  padding: 0 18px !important;
  box-shadow: 0 2px 12px rgba(18, 92, 255, 0.22) !important;
  transition: background 0.15s ease, transform 0.15s ease;
}

.paper-cta:hover {
  background: var(--la-blue-hover) !important;
  transform: translateY(-1px);
}

.dateline {
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-size: 0.75rem !important;
  color: var(--la-muted) !important;
  border-bottom-color: var(--la-border) !important;
}

.page-title {
  padding: 28px 0 20px !important;
  border-bottom-color: var(--la-border) !important;
  gap: 24px !important;
}

.page-title h1 {
  font-family: var(--la-display) !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
  color: var(--la-ink) !important;
}

.page-title p {
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--la-muted) !important;
  max-width: 52ch;
}

.scorecard,
.news-panel,
.step-card,
.status-card {
  border-radius: var(--la-radius-md) !important;
  border: 1px solid var(--la-border) !important;
  background: var(--la-surface) !important;
  box-shadow: var(--la-shadow-sm) !important;
}

.agate-table {
  border-radius: var(--la-radius-md) !important;
  border: 1px solid var(--la-border) !important;
  overflow: hidden;
}

.agate-table th {
  background: var(--la-surface-muted) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: var(--la-muted) !important;
}

.agate-table td {
  font-size: 0.875rem !important;
  border-bottom-color: var(--la-border) !important;
}

/* ── Stats / today bars (date band + newsprint filter row) ── */
.la-stats-bar--light {
  background: var(--la-navy) !important;
  border-top: 1px solid #1a2a3a !important;
  border-bottom: none !important;
  color: #94a3b8 !important;
  font-size: 0.6875rem !important;
}

.la-stats-bar--light span[id^="stat-"],
.la-stats-bar--light #stat-time {
  font-weight: 500 !important;
  color: #cbd5e1 !important;
}

.la-stats-bar--light .la-stats-sep {
  color: #334155 !important;
}

#la-today-hero {
  background: var(--la-surface-paper) !important;
  border-bottom: 1px solid var(--la-border) !important;
  font-size: 0.75rem !important;
}

#la-today-hero span[style*="125cff"] {
  color: var(--la-blue) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* ── Mobile nav + footer ── */
.la-mobile-nav {
  background: var(--la-navy) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid #1a2a3a !important;
}

.la-mobile-nav a {
  color: #94a3b8 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.625rem !important;
  letter-spacing: 0.04em !important;
}

.la-mobile-nav a.active,
.la-mobile-nav a:hover {
  color: var(--la-green-brand) !important;
}

/* ── Cookie banner ── */
#la-cookie-banner {
  background: rgba(29, 29, 31, 0.94) !important;
  backdrop-filter: var(--la-blur);
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── BangIt dark page → light when branded ── */
body.la-branded:has(.bangit-hero) {
  background: var(--la-bg) !important;
  color: var(--la-ink) !important;
}

body.la-branded .bangit-hero:not(.bangit-hero--banner),
body.la-branded .bangit-grid article,
body.la-branded .bangit-card {
  background: var(--la-surface) !important;
  color: var(--la-ink) !important;
  border-color: var(--la-border) !important;
  border-radius: var(--la-radius-md) !important;
  box-shadow: var(--la-shadow-sm) !important;
}

body.la-branded .bangit-hero--banner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.la-branded .paper-nav a {
  color: var(--la-muted) !important;
}

/* ── Utility: kill legacy uppercase shout ── */
body.la-branded .new-tag {
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* ── Platform shell marker ── */
body.la-platform {
  font-family: var(--la-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Mastery-aligned dark mode (DFS terminals, SYSTEM, BangIt) ── */
body.la-platform-dark {
  background: var(--la-dark-bg) !important;
  color: var(--la-dark-ink) !important;
}

body.la-platform-dark .paper-shell,
body.la-platform-dark .paper-main,
body.la-platform-dark main,
body.la-platform-dark .product-main {
  background: transparent !important;
  color: var(--la-dark-ink) !important;
}

body.la-platform-dark .paper-header,
body.la-platform-dark .la-header,
body.la-platform-dark header.product-header,
body.la-platform-dark .system-header,
body.la-platform-dark .dfs-lab-header {
  background: var(--la-dark-surface) !important;
  border-bottom: 1px solid var(--la-dark-border) !important;
  color: var(--la-dark-ink) !important;
}

body.la-platform-dark .paper-nav a,
body.la-platform-dark .system-nav a,
body.la-platform-dark .live-nav a {
  color: var(--la-dark-muted) !important;
}

body.la-platform-dark .paper-nav a:hover,
body.la-platform-dark .paper-nav a.active,
body.la-platform-dark .system-nav a:hover,
body.la-platform-dark .system-nav a.active,
body.la-platform-dark .live-nav a:hover,
body.la-platform-dark .live-nav a.active {
  color: var(--la-dark-blue) !important;
  background: rgba(26, 115, 232, 0.12) !important;
}

body.la-platform-dark .paper-cta,
body.la-platform-dark .la-btn-primary {
  background: var(--la-dark-blue) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(26, 115, 232, 0.28) !important;
}

body.la-platform-dark .paper-cta:hover,
body.la-platform-dark .la-btn-primary:hover {
  background: var(--la-dark-blue-hover) !important;
}

body.la-platform-dark .dateline,
body.la-platform-dark .live-dateline,
body.la-platform-dark .archive-date-bar {
  background: var(--la-dark-surface) !important;
  border-color: var(--la-dark-border) !important;
  color: var(--la-dark-muted) !important;
}

body.la-platform-dark .page-title {
  border-bottom-color: var(--la-dark-border) !important;
}

body.la-platform-dark .page-title h1 {
  color: var(--la-dark-ink) !important;
}

body.la-platform-dark .page-title p {
  color: var(--la-dark-muted) !important;
}

body.la-platform-dark .scorecard,
body.la-platform-dark .news-panel,
body.la-platform-dark .step-card,
body.la-platform-dark .status-card,
body.la-platform-dark .agate-table,
body.la-platform-dark .la-glass-card {
  background: var(--la-dark-surface) !important;
  border-color: var(--la-dark-border) !important;
  color: var(--la-dark-ink) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35) !important;
}

body.la-platform-dark .agate-table th {
  background: var(--la-dark-surface-2) !important;
  color: var(--la-dark-muted) !important;
}

body.la-platform-dark .agate-table td {
  border-bottom-color: var(--la-dark-border) !important;
  color: var(--la-dark-ink) !important;
}

body.la-platform-dark .la-header-wordmark em,
body.la-platform-dark .live-wordmark em,
body.la-platform-dark .system-brand-name em {
  color: var(--la-dark-brand) !important;
}

body.la-platform-dark input,
body.la-platform-dark select,
body.la-platform-dark textarea {
  background: var(--la-dark-surface-2) !important;
  border: 1px solid var(--la-dark-border) !important;
  color: var(--la-dark-ink) !important;
}

body.la-platform-dark .la-mobile-nav {
  background: rgba(26, 31, 40, 0.94) !important;
  border-top-color: var(--la-dark-border) !important;
}

body.la-platform-dark .la-mobile-nav a {
  color: var(--la-dark-muted) !important;
}

body.la-platform-dark .la-mobile-nav a.active,
body.la-platform-dark .la-mobile-nav a:hover {
  color: var(--la-dark-blue) !important;
}