/* =============================================================
   /hit-rate  AI 命中率儀表板  — F3 hit-rate v4
   -------------------------------------------------------------
   規則對齊：
     ui-rules §2 Typography、§3 Color、§4 Spacing、§5 Surface、
     §6 Data Display、§7 Table/List、§12 Page Hierarchy、
     §13 Empty/Loading/Error、§14 Do/Don't
   -------------------------------------------------------------
   色彩重點：
     hit/miss 用 .hit-success / .hit-miss（severity，非 price token）
     硬編 #2a7a50 / #b83232 — severity 非方向性，非 price token，v4 §6 L 輪教訓
     price token（--al-up / --al-dn）不在此檔出現
   ============================================================= */

/* ── 頁面容器 ─────────────────────────────────────────────────────── */
.hr-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

/* ── Section rhythm（ui-rules §4：sp-6=32px between sections）────── */
.hr-section {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--al-border);
}
.hr-section:last-child {
  border-bottom: none;
}

/* ── Hero（首屏）───────────────────────────────────────────────────── */
.hr-hero {
  padding-top: var(--sp-8);
}

.hr-page-kicker {
  font-family: var(--ff-body);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--al-ink-muted);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.hr-page-kicker::before {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

/* H1 — every page, one only (ui-rules §2 / §14 Do #1) */
.hr-page-h1 {
  font-family: var(--ff-serif);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--al-ink-deep);
  line-height: 1.2;
  margin-bottom: var(--sp-4);
}

/* Big accuracy number */
.hr-big-rate {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.hr-big-number {
  font-family: var(--ff-mono);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  color: var(--al-ink-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hr-big-number.hr-muted {
  color: var(--al-ink-muted);
}

.hr-big-label {
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  color: var(--al-ink-2);
}

/* Insignificant warning chip */
.hr-insig-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--al-ink-2);
  background: var(--al-surface-2);
  border: 1px dashed var(--al-border-md);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-4);
}

/* Since-date meta */
.hr-since {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  color: var(--al-ink-muted);
  margin-bottom: var(--sp-5);
}

/* SVG sparkline container */
.hr-sparkline-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  padding: var(--sp-4);
  margin-top: var(--sp-4);
}

.hr-sparkline-title {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--al-ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.hr-svg-chart {
  width: 100%;
  height: 120px;
  display: block;
}

@media (min-width: 960px) {
  .hr-svg-chart {
    height: 140px;
  }
}

.hr-sparkline-pending {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  color: var(--al-ink-muted);
  text-align: center;
  padding: var(--sp-5) 0;
}

/* ── 分類命中率（次屏）──────────────────────────────────────────────── */
.hr-section-h2 {
  font-family: var(--ff-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  color: var(--al-ink-deep);
  margin-bottom: var(--sp-4);
}

/* Stance row */
.hr-stance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

@media (min-width: 960px) {
  .hr-stance-grid {
    grid-template-columns: repeat(2, 280px);
  }
}

@media (max-width: 480px) {
  .hr-stance-grid {
    grid-template-columns: 1fr;
  }
}

.hr-stance-card {
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
}

.hr-stance-label {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--al-ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.hr-stance-value {
  font-family: var(--ff-mono);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--al-ink-deep);
  font-variant-numeric: tabular-nums;
}
.hr-stance-value.hr-muted {
  color: var(--al-ink-muted);
  font-size: var(--fs-body);
}

/* Key driver cards */
.hr-driver-sub-hd {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--al-ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  margin-top: var(--sp-5);
}

.hr-driver-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}

@media (min-width: 760px) {
  .hr-driver-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .hr-driver-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 390px) {
  .hr-driver-grid {
    grid-template-columns: 1fr;
  }
}

.hr-driver-card {
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
}

.hr-driver-tag {
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--al-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}

.hr-driver-rate {
  font-family: var(--ff-mono);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--al-ink-deep);
  font-variant-numeric: tabular-nums;
}

.hr-driver-total {
  font-family: var(--ff-body);
  font-size: var(--fs-meta);
  color: var(--al-ink-muted);
  margin-top: var(--sp-1);
}

.hr-driver-empty {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  color: var(--al-ink-muted);
  padding: var(--sp-4) 0;
}

/* ── 方法論（三屏）─────────────────────────────────────────────────── */
.hr-method-body {
  background: var(--al-paper);
  border: 1px solid var(--al-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.hr-method-body p {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--al-ink-2);
  line-height: 1.7;
  margin-bottom: var(--sp-4);
}
.hr-method-body p:last-child {
  margin-bottom: 0;
}

.hr-method-body strong {
  color: var(--al-ink);
  font-weight: var(--fw-semibold);
}

/* ── 案例表格（四屏）──────────────────────────────────────────────── */
.hr-outcomes-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--al-border);
}

.hr-outcomes-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  background: var(--al-surface);
}
.hr-outcomes-table caption {
  font-family: var(--ff-body);
  font-size: var(--fs-meta);
  color: var(--al-ink-muted);
  text-align: left;
  padding: var(--sp-2) var(--sp-4);
  caption-side: top;
}
.hr-outcomes-table th {
  font-family: var(--ff-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--al-ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  background: var(--al-surface-2);
  border-bottom: 1px solid var(--al-border);
  white-space: nowrap;
}
.hr-outcomes-table th[scope="col"] {
  /* explicit, satisfies a11y rule */
}
.hr-outcomes-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid rgba(39,48,67,0.05);
  vertical-align: middle;
  color: var(--al-ink);
  min-height: 48px;
}
.hr-outcomes-table tr:last-child td {
  border-bottom: none;
}

/* Symbol — mono */
.hr-td-symbol {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--al-ink-deep);
  white-space: nowrap;
}

/* Stance badge */
.hr-stance-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-xs);
  white-space: nowrap;
}
.hr-stance-badge--bullish {
  background: var(--al-up-bg);
  color: var(--al-up);
}
.hr-stance-badge--cautious {
  background: var(--al-dn-bg);
  color: var(--al-dn);
}
.hr-stance-badge--neutral {
  background: rgba(138,150,168,0.1);
  color: var(--al-ink-muted);
}

/* Return percentage — mono, sign-prefixed */
.hr-td-return {
  font-family: var(--ff-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Hit / Miss badge
   severity: non-directional (not price token)
   hit-success = #2a7a50  (not --al-dn, severity non-directional, v4 §6 L lesson)
   hit-miss    = #b83232  (not --al-up, severity non-directional, v4 §6 L lesson) */
.hit-success {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-xs);
  background: rgba(42, 122, 80, 0.10);
  /* severity non-directional — NOT price token, v4 §6 L-round lesson */
  color: #2a7a50;
}
.hit-miss {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-xs);
  background: rgba(184, 50, 50, 0.08);
  /* severity non-directional — NOT price token, v4 §6 L-round lesson */
  color: #b83232;
}

/* Date — mono */
.hr-td-date {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  color: var(--al-ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── 不命中案例（五屏）─────────────────────────────────────────────── */
.hr-misses-intro {
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  color: var(--al-ink-2);
  margin-bottom: var(--sp-5);
  line-height: 1.6;
}

.hr-misses-count {
  font-family: var(--ff-mono);
  font-weight: var(--fw-bold);
  color: var(--al-ink-deep);
  font-variant-numeric: tabular-nums;
}

/* "no misses" state — intentionally honest (not hidden) */
.hr-no-misses {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--al-ink-2);
}
.hr-no-misses-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* severity success, non-directional — hardcoded #2a7a50 */
  color: #2a7a50;
}

/* Tags row in misses table */
.hr-td-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.hr-tag {
  display: inline-flex;
  padding: 1px 6px;
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--al-ink-2);
  background: var(--al-surface-2);
  border: 1px solid var(--al-border);
  border-radius: var(--r-xs);
  white-space: nowrap;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.hr-footer {
  padding: var(--sp-6) 0 var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hr-footer-meta {
  font-family: var(--ff-body);
  font-size: var(--fs-meta);
  color: var(--al-ink-muted);
}

.hr-disclaimer {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  color: var(--al-ink-muted);
  line-height: 1.6;
  padding: var(--sp-3) var(--sp-4);
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--r-sm);
}

.hr-footer-link {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  color: var(--al-accent);
  text-decoration: underline;
}
.hr-footer-link:hover {
  color: var(--al-ink);
}

/* ── Loading skeleton ───────────────────────────────────────────── */
.hr-loading {
  padding: var(--sp-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.hr-sk {
  background: var(--al-surface-2);
  border-radius: var(--r-sm);
  animation: hr-shimmer 1.6s ease-in-out infinite;
}
.hr-sk--hero {
  height: 64px;
  width: 60%;
}
.hr-sk--line {
  height: 18px;
  width: 80%;
}
.hr-sk--short {
  width: 45%;
}

@keyframes hr-shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.08; }
}

/* ── Empty / Error state ─────────────────────────────────────────── */
.hr-empty {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
}

.hr-empty-title {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--al-ink-2);
  margin-bottom: var(--sp-3);
}

.hr-empty-desc {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  color: var(--al-ink-muted);
  line-height: 1.65;
  max-width: 400px;
  margin: 0 auto var(--sp-4);
}

.hr-empty-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--al-ink-2);
  border: 1px solid var(--al-border-md);
  border-radius: var(--r-sm);
  text-decoration: none;
  min-height: 44px; /* al-tap rule */
  transition: border-color 0.15s;
}
.hr-empty-cta:hover {
  border-color: rgba(39,48,67,0.3);
  color: var(--al-ink);
}

/* Error variant */
.hr-empty-err-label {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  /* severity non-directional — hardcoded #b83232, not price token */
  color: #b83232;
  margin-bottom: var(--sp-2);
}

/* ── RWD — Tablet 768 ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hr-svg-chart {
    height: 100px;
  }
  .hr-big-number {
    font-size: 2.4rem;
  }
}

/* ── A8.2：AI 本週觀察段（第 6 屏）──────────────────────────────── */
.hr-section--ai-insight .hr-section-h2 {
  margin-bottom: var(--sp-4);
}
.hr-ai-insight-loading {
  color: var(--al-ink-muted);
  font-size: var(--fs-body);
}
.hr-ai-insight-highlight,
.hr-ai-insight-underperform {
  font-size: var(--fs-body);
  color: var(--al-ink);
  line-height: 1.6;
  margin: 0 0 var(--sp-3);
}
.hr-ai-insight-fallback {
  font-size: var(--fs-body);
  color: var(--al-ink-muted);
  font-style: italic;
}
.hr-ai-insight-disclaimer {
  margin-top: var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--al-ink-muted);
  border-top: 1px solid var(--al-hairline);
  padding-top: var(--sp-3);
}

/* ── RWD — Mobile 390 ───────────────────────────────────────────── */
@media (max-width: 420px) {
  .hr-page {
    padding: 0 var(--sp-3);
  }
  .hr-outcomes-table-wrap {
    /* Mobile: 4 cols (symbol/stance/return/hit), narrow → horizontal scroll */
    border-radius: 0;
    margin: 0 calc(-1 * var(--sp-3));
  }
  .hr-svg-chart {
    height: 80px;
  }
  .hr-big-number {
    font-size: 2rem;
  }
  .hr-stance-grid {
    grid-template-columns: 1fr;
  }
}