/* Keiba Brief — Component Styles
   From design_handoff_keiba_brief_redesign/docs/COMPONENTS.md */

/* =====================================================
 * 1. Mark Badge (印)  ◎ / ◯ / ▲ / △ / ☆
 * ===================================================== */
.mark {
  display: inline-flex;
  width: var(--size, 30px);
  height: var(--size, 30px);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: calc(var(--size, 30px) * 0.55);
  font-family: var(--font-sans);
  line-height: 1;
  box-shadow: var(--shadow-sm);
}
.mark-honmei { background: var(--mark-honmei-bg); }
.mark-taikou { background: var(--mark-taikou-bg); }
.mark-tanana { background: var(--mark-tanana-bg); }
.mark-renka  { background: var(--mark-renka-bg); }
.mark-ana    { background: var(--mark-ana-bg); }
.mark-empty {
  display: inline-block;
  color: var(--color-text-mute);
}

/* =====================================================
 * 2. Waku Badge (枠番) 1-8 JRA standard
 * ===================================================== */
.waku {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.waku-1 { background: var(--waku-1-bg); color: var(--waku-1-fg); border: 1px solid var(--waku-1-border); }
.waku-2 { background: var(--waku-2-bg); color: var(--waku-2-fg); border: 1px solid var(--waku-2-border); }
.waku-3 { background: var(--waku-3-bg); color: var(--waku-3-fg); border: 1px solid var(--waku-3-border); }
.waku-4 { background: var(--waku-4-bg); color: var(--waku-4-fg); border: 1px solid var(--waku-4-border); }
.waku-5 { background: var(--waku-5-bg); color: var(--waku-5-fg); border: 1px solid var(--waku-5-border); }
.waku-6 { background: var(--waku-6-bg); color: var(--waku-6-fg); border: 1px solid var(--waku-6-border); }
.waku-7 { background: var(--waku-7-bg); color: var(--waku-7-fg); border: 1px solid var(--waku-7-border); }
.waku-8 { background: var(--waku-8-bg); color: var(--waku-8-fg); border: 1px solid var(--waku-8-border); }

/* =====================================================
 * 3. Grade Badge (5軸評価) ◎ / ◯ / △ / × / 特 / 悪
 * ===================================================== */
.grade {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  font-family: var(--font-sans);
  border-width: 1.5px;
  border-style: solid;
}
.grade-filled   { color: #fff; }
.grade-outlined { background: #fff; }

.grade-honmei       { background: var(--grade-double-circle); border-color: var(--grade-double-circle); box-shadow: 0 1px 2px rgba(220,38,38,0.25); color: #fff; }
.grade-circle       { color: var(--grade-circle); border-color: var(--grade-circle); background: #fff; }
.grade-triangle     { background: var(--grade-triangle); border-color: var(--grade-triangle); box-shadow: 0 1px 2px rgba(148,163,184,0.25); color: #fff; }
.grade-cross        { color: var(--grade-cross); border-color: var(--grade-cross); background: #fff; }
.grade-special-good { background: var(--grade-special-good); border-color: var(--grade-special-good); box-shadow: 0 1px 2px rgba(185,28,28,0.25); color: #fff; }
.grade-special-bad  { background: var(--grade-special-bad);  border-color: var(--grade-special-bad);  box-shadow: 0 1px 2px rgba(71,85,105,0.25);  color: #fff; }
.grade-empty {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-mute);
  font-size: 12px;
}

/* =====================================================
 * 4. Class Badge (G1/G2/G3/L/OP)
 * ===================================================== */
.class-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.05em;
}
.class-g1 { background: #dc2626; color: #fff; }
.class-g2 { background: #d97706; color: #fff; }
.class-g3 { background: #1e6fd9; color: #fff; }
.class-l  { background: #7c3aed; color: #fff; }
.class-op { background: #0d9488; color: #fff; }
.class-other { background: var(--color-border); color: var(--color-text-dim); }

/* =====================================================
 * 5. Pill / Tag
 * ===================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
}
.pill-indigo  { background: var(--color-indigo-soft); color: var(--color-indigo-deep); }
.pill-blue    { background: var(--color-blue-soft);   color: var(--color-blue-deep); }
.pill-amber   { background: var(--color-amber);       color: #fff; }
.pill-success { background: var(--color-teal-soft);   color: var(--color-teal); }
.pill-muted   { background: var(--color-panel-alt);   color: var(--color-text-mute); }
.pill-featured { background: var(--color-indigo-soft); color: var(--color-indigo-deep); }
.pill-hotpick { background: var(--color-amber); color: #fff; }
.pill-ghost-light { background: rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(4px); }
.pill-on-white { background: #fff; color: var(--color-indigo-deep); }

/* =====================================================
 * 6. Hero Band
 * ===================================================== */
.hero {
  color: #fff;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.hero--home       { background: var(--hero-home); }
.hero--today      { background: var(--hero-today); }
.hero--race-g1    { background: var(--hero-race-g1); }
.hero--race-g2    { background: var(--hero-race-g2); }
.hero--race-g3    { background: var(--hero-race-g3); }
.hero--race-l     { background: var(--hero-race-l); }
.hero--race-op    { background: var(--hero-race-op); }
.hero--race-other { background: var(--hero-race-other); }
.hero--stats      { background: var(--hero-stats); }
.hero--archive    { background: var(--hero-archive); }
.hero--markdetail { background: var(--hero-markdetail); }
.hero--about      { background: var(--hero-about); }

.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.hero-halo {
  position: absolute;
  right: -80px;
  top: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 1;
}
.hero-kicker {
  font-size: 12px;
  opacity: 0.85;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
  margin-bottom: 6px;
}
.hero-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  line-height: 1.15;
}
.hero-sub {
  font-size: 13px;
  opacity: 0.85;
  margin: 0;
}
.hero-meta {
  font-size: 13px;
  opacity: 0.9;
  margin-top: 8px;
  font-family: var(--font-mono);
}
.hero-crumb {
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 12px;
  font-family: var(--font-mono);
}

/* =====================================================
 * 7. KPI Card
 * ===================================================== */
.kpi-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 22px 20px 18px;
  position: relative;
  overflow: hidden;
}
.kpi-accent {
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--accent, var(--color-indigo));
}
.kpi-label {
  font-size: 12px;
  color: var(--color-text-mute);
  margin-bottom: 8px;
}
.kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 700;
  color: var(--accent, var(--color-text));
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.kpi-suffix {
  font-size: 14px;
  color: var(--color-text-dim);
  margin-left: 3px;
}
.kpi-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-good);
  margin-top: 6px;
}
.kpi-delta.neg { color: var(--color-bad); }

/* =====================================================
 * 8. Section Title
 * ===================================================== */
.section-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.section-accent {
  width: 4px;
  height: 18px;
  background: var(--accent, var(--color-indigo));
  border-radius: 2px;
  display: inline-block;
}
.section-meta {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-mute);
}

/* =====================================================
 * 9. Topbar (PC)
 * ===================================================== */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
}
.brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-indigo-deep), var(--color-purple));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(79,70,229,0.25);
}
.topnav {
  display: flex;
  gap: 4px;
  margin-left: 24px;
}
.nav-link {
  color: var(--color-text-dim);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.nav-link.active {
  color: var(--color-indigo-deep);
  background: var(--color-indigo-soft);
  font-weight: 600;
}
.topbar-right {
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: center;
}
.update-time {
  font-size: 12px;
  color: var(--color-text-mute);
  font-family: var(--font-mono);
}
.live-pill {
  background: var(--color-indigo-soft);
  color: var(--color-indigo-deep);
}

/* =====================================================
 * 10. Bottom Tab Bar (Mobile)
 * ===================================================== */
.bottom-tabbar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: auto;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
  height: 64px;
  padding-bottom: 6px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-mute);
}
.tab-item.active {
  color: var(--color-indigo);
  font-weight: 700;
}
.tab-icon { font-size: 20px; }

/* =====================================================
 * 11. Mobile Topbar
 * ===================================================== */
.m-topbar {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-panel-alt);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--color-text-dim);
  cursor: pointer;
}

/* =====================================================
 * 12. Recovery Bar (回収率バー、中央=100%)
 * ===================================================== */
.recovery-bar {
  height: 8px;
  background: var(--color-panel-alt);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.recovery-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--color-good);
  border-radius: 4px;
}
.recovery-fill.neg { background: var(--color-bad); }
.recovery-marker {
  position: absolute;
  left: 50%;
  top: -2px; bottom: -2px;
  width: 1px;
  background: var(--color-border-strong);
}

/* =====================================================
 * 13. Page layout (.shell, .container)
 * ===================================================== */
.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px;
  width: 100%;
}
.container--compact { padding: 16px 28px; }

/* =====================================================
 * 14. Collapsible
 * ===================================================== */
.collapsible-header {
  width: 100%;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.collapsible-header[aria-expanded="true"] {
  border-radius: 10px 10px 0 0;
}
.collapsible-header .chevron { transition: transform 0.2s; }
.collapsible-header[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.collapsible-body {
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: #fff;
}

/* =====================================================
 * 15. Footer
 * ===================================================== */
.site-footer {
  margin-top: auto;
  padding: 24px 28px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-mute);
  border-top: 1px solid var(--color-border);
}