/* ====== Design tokens ====== */
:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-soft: #fafaf9;
  --color-border: #e7e5e4;
  --color-border-strong: #d6d3d1;
  --color-text: #1c1917;
  --color-text-muted: #78716c;
  --color-text-subtle: #a8a29e;
  --color-primary: #0f172a;
  --color-primary-hover: #1e293b;
  --color-accent: #0d9488;
  --color-success: #059669;
  --color-success-soft: #d1fae5;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;
  --color-warning: #d97706;
  --color-info: #0284c7;

  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.06);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
}

/* ====== Base ====== */
html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont,
               'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif;
  font-feature-settings: 'palt' 1;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
  color: var(--color-primary);
  font-weight: 700;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover { color: var(--color-accent); }

/* ====== Navbar ====== */
.app-site-title {
  background: #111;
  padding: 0.6rem 2rem;
}
.app-site-title-link {
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.app-navbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1020;
}
.app-nav-link {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms ease;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border);
}
.app-nav-link:first-child { border-left: none; padding-left: 0; }
.app-nav-link:hover { color: var(--color-primary); }
.app-nav-link.active { color: var(--color-primary); font-weight: 700; }

/* ====== Hero ====== */
.app-hero {
  background: linear-gradient(135deg, #0f172a 0%, #134e4a 100%);
  color: #f8fafc;
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.app-hero::after {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(13,148,136,0.35) 0%, transparent 70%);
  pointer-events: none;
}
.app-hero h1 {
  color: #f8fafc;
  font-size: 1.85rem;
  margin: 0 0 0.5rem;
}
.app-hero p {
  color: #cbd5e1;
  margin: 0;
  max-width: 60ch;
}

/* ====== Cards ====== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.card-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.card-body { padding: 1.25rem; }
.card-link-row:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ====== Magazine list ====== */
.magazine-row {
  display: block;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: all 150ms ease;
  color: inherit;
  margin-bottom: 0.75rem;
}
.magazine-row:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: inherit;
}
.magazine-row .issue-number {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}
.magazine-row .magazine-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111 !important;
  margin: 0.25rem 0;
}
.magazine-row .magazine-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* ====== KPI cards ====== */
.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.kpi-card .kpi-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}
.kpi-card .kpi-value {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.15;
  font-feature-settings: 'tnum' 1;
}
.kpi-card .kpi-sub {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  margin-top: 0.35rem;
}
.kpi-card.kpi-positive { border-color: var(--color-success); background: linear-gradient(180deg, var(--color-success-soft) 0%, transparent 60%); }
.kpi-card.kpi-positive .kpi-value { color: var(--color-success); }
.kpi-card.kpi-negative { border-color: var(--color-danger); background: linear-gradient(180deg, var(--color-danger-soft) 0%, transparent 60%); }
.kpi-card.kpi-negative .kpi-value { color: var(--color-danger); }

/* ====== Race group card ====== */
.race-card { margin-bottom: 1.25rem; }
.race-card .card-body { padding: 0.85rem 1.1rem; }
.race-card .section-heading { margin-bottom: 0.4rem; }
.race-card .payout-table td,
.race-card .prediction-table td,
.race-card .prediction-table th { padding-top: 0.1rem; padding-bottom: 0.1rem; }
.race-card .race-header {
  padding: 0.7rem 1.25rem;
  background: linear-gradient(180deg, var(--color-surface-soft) 0%, var(--color-surface) 100%);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.race-card .race-title { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.race-card .race-date {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.race-card .race-course {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
}
.race-card .race-name {
  color: #111;
  font-size: 1rem;
  font-weight: 700;
}
.race-card .race-header small {
  font-size: 1rem;
}

/* ====== Grade badges ====== */
.grade-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  vertical-align: middle;
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
}
.grade-badge.grade-g1 { background: #fbbf24; color: #7c2d12; border-color: #f59e0b; }
.grade-badge.grade-g2 { background: #cbd5e1; color: #1e293b; border-color: #94a3b8; }
.grade-badge.grade-g3 { background: #d4a373; color: #3f1d0c; border-color: #a87148; }
.grade-badge.grade-l  { background: #e0e7ff; color: #312e81; border-color: #a5b4fc; }
.grade-badge.grade-op { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

/* ====== Result list ====== */
.result-month-group { }
.result-month-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0.25rem 0.6rem;
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: 0.65rem;
}
.result-month-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}
.result-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface-soft);
}
.result-table tbody td { padding: 0.6rem 0.8rem; }
.result-table .race-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  color: inherit;
  text-decoration: none;
}
.result-table .race-link:hover .race-name-cell { color: var(--color-accent); }
.result-table .course-cell {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}
.result-table .race-name-cell {
  color: var(--color-primary);
  font-size: 1.0rem;
  font-weight: 700;
  line-height: 1.25;
}
.result-table .winner-cell { font-weight: 500; }
.result-table .honmei-cell { font-weight: 500; }
.result-table .honmei-cell.honmei-win {
  color: var(--color-success);
  font-weight: 700;
}
.result-table .headline-cell {
  color: var(--color-text);
  font-size: 0.88rem;
  line-height: 1.45;
}


/* ====== Tables ====== */
.table {
  --bs-table-color: var(--color-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--color-border);
  font-size: 0.92rem;
  margin-bottom: 0;
}
.table thead th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-border);
  padding: 0.4rem 0.85rem;
}
.table tbody td { padding: 0.4rem 0.85rem; vertical-align: middle; }
.table tbody tr:hover { background: var(--color-surface-soft); }
.table-tnum td:not(.text-start), .table-tnum th:not(.text-start) {
  font-feature-settings: 'tnum' 1, 'palt' 0;
}

/* ====== Badges ====== */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35em 0.65em;
  border-radius: var(--radius-sm);
}
.badge.bg-success { background: var(--color-success) !important; }
.badge.bg-danger { background: var(--color-danger) !important; }
.badge.bg-secondary { background: #94a3b8 !important; }
.badge.bg-warning { background: var(--color-warning) !important; color: #fff !important; }
.badge-soft-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-soft-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-outline {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

/* ====== Form / filter bar ====== */
.filter-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.filter-bar .form-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--color-border-strong);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

/* ====== Buttons ====== */
.btn {
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.95rem;
  transition: transform 80ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}

/* ====== Breadcrumb ====== */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
}
.breadcrumb-item { color: var(--color-text-muted); }
.breadcrumb-item.active { color: var(--color-text); }
.breadcrumb-item a { color: var(--color-text-muted); }
.breadcrumb-item a:hover { color: var(--color-primary); }

/* ====== Footer ====== */
.app-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 1.25rem 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  margin-top: 3rem;
}

/* ====== Misc utilities ====== */
.text-tnum { font-feature-settings: 'tnum' 1; }
.text-mono { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; }
.text-muted-2 { color: var(--color-text-subtle); }

.mail-body-pre {
  white-space: pre;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  max-height: 420px;
  overflow-y: auto;
}

details > summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-weight: 500;
}
details > summary:hover { color: var(--color-primary); }

/* page section heading */
.section-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin: 1.5rem 0 0.75rem;
}

/* finishing position colors */
.finishing-pos-1 { color: #c0392b; }
.finishing-pos-2 { color: #2471a3; }
.finishing-pos-3 { color: #1e8449; }

/* year filter links */
.year-filter-link { color: var(--color-text-muted); text-decoration: none; font-size: 0.9rem; }
.year-filter-link:hover { color: var(--color-primary); }
.year-filter-link.active { color: var(--color-primary); font-weight: 700; }

/* summary stats bar */
.summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.75rem;
}
.summary-stat { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.summary-stat-label { color: var(--color-text-muted); }
.summary-stat-value { font-weight: 600; }

/* details open/close hint */
details .details-hint-close { display: none; }
details[open] .details-hint-open { display: none; }
details[open] .details-hint-close { display: inline; }

/* mail body expandable */
.mail-body-wrap {
  position: relative;
  max-height: 400px;
  overflow: hidden;
}
.mail-body-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(transparent, var(--color-surface));
  pointer-events: none;
}

/* ====== Mobile font size adjustments ====== */
@media (max-width: 576px) {
  body { font-size: 0.88rem; }
  .mail-body-pre { font-size: 0.62rem; line-height: 1.5; }
  .table { font-size: 0.8rem; }
  .table tbody td { padding: 0.25rem 0.5rem; }
  .table thead th { padding: 0.25rem 0.5rem; }
  .race-card .race-course, .race-card .race-name, .race-card .race-header small { font-size: 0.88rem; }
  .magazine-row .magazine-title { font-size: 0.92rem; }
  .magazine-row .magazine-meta { font-size: 0.78rem; }
  .col-sp-hide { display: none; }
  .race-name-cell { font-size: 0.82rem; }
}

/* result row mobile layout */
.result-row-sub { margin-top: 4px; color: #111; font-size: 0.82rem; line-height: 1.6; }