/* ── stock-detail-v4.css — F1 個股頁 reorg (Sprint 2) ───────────────────────
   x-cloak：Alpine.js hydration 前隱藏（base.html 無全局定義，此檔補上）      */
.v4-archive__body[x-cloak] { display: none !important; }

/* ── stock-detail-v4.css — F1 個股頁 reorg (Sprint 2) ───────────────────────
   範圍：新增 SR 線 AI card、估值分位條、accordion 摺疊區、disclaimer bar、RWD
   不改既有 sd-* / al-ai-* 類別；只新增 v4- 前綴 class。
   ui-rules.md §1-§14 對齊版
   ─────────────────────────────────────────────────────────────────────────── */

/* ── ① Section ordering wrapper ──────────────────────────────────────────── */
/* 新 section 排在 Hero 之後，舊 section 移進 .v4-archive（摺疊區） */

.v4-section {
  margin-bottom: var(--sp-6, 32px);
}

/* ── ② SR Lines AI Card（圖下方三欄）─────────────────────────────────────── */
/* ui-rules §8 AI card、§4 spacing、§3 color */

.v4-sr-card {
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: 4px;
  padding: var(--sp-5, 24px) var(--sp-5, 24px) var(--sp-4, 16px);
  margin-top: var(--sp-4, 16px);
}

.v4-sr-card__kicker {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--al-ink-muted);
  margin-bottom: var(--sp-3, 12px);
}

/* 三欄 grid：桌機並排 / 手機堆疊 */
.v4-sr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4, 16px);
  margin-bottom: var(--sp-3, 12px);
}
@media (max-width: 640px) {
  .v4-sr-grid { grid-template-columns: 1fr; gap: var(--sp-3, 12px); }
}

.v4-sr-col h4 {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--al-ink-2);
  margin: 0 0 var(--sp-2, 8px);
}

/* ul 清單 */
.v4-sr-col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.28rem;
}
.v4-sr-col li {
  font-size: 0.72rem; line-height: 1.45; color: var(--al-ink-2);
}
/* 支撐用綠（hardcoded per handoff doc §3.3，非價格方向 token） */
/* 壓力用紅（hardcoded per handoff doc §3.3） */
.v4-sr-support  { color: #2a7a50; font-weight: 600; }
.v4-sr-resist   { color: #c0392b; font-weight: 600; }

.v4-sr-card__summary {
  font-size: 0.72rem; color: var(--al-ink-2); line-height: 1.5;
  border-top: 1px dashed var(--al-border);
  padding-top: var(--sp-3, 12px);
  margin-top: var(--sp-1, 4px);
}

/* fallback（AI 解讀失敗但 levels 仍可用） */
.v4-sr-fallback {
  font-size: 0.72rem; color: var(--al-ink-muted);
  padding: var(--sp-3, 12px) 0;
  border-top: 1px dashed var(--al-border);
  margin-top: var(--sp-3, 12px);
}

/* ── ③ 估值分位條（D1）─────────────────────────────────────────────────────── */
/* ui-rules §6 data display、§3 color (非漲跌語意，用 accent + 灰階) */

.v4-valuation {
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: 4px;
  overflow: hidden;
}

/* window tab strip (5y / 3y / 1y) */
.v4-val-tabs {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--al-border);
  background: var(--al-surface-2, #FCFCFD);
  padding: 0 var(--sp-4, 16px);
  gap: 0;
}

.v4-val-tab {
  font-size: 0.64rem; font-weight: 500; padding: 0.45rem 0.8rem;
  cursor: pointer; background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--al-ink-muted);
  font-family: inherit; transition: all 0.12s;
  margin-bottom: -1px;
  min-height: 44px; display: flex; align-items: center;
}
.v4-val-tab:hover  { color: var(--al-ink); }
.v4-val-tab.active {
  color: var(--al-ink-deep);
  border-bottom-color: var(--al-ink-deep);
  font-weight: 600;
}

/* three-metric list */
.v4-val-body {
  padding: var(--sp-4, 16px) var(--sp-5, 24px) var(--sp-4, 16px);
  display: flex; flex-direction: column; gap: var(--sp-5, 24px);
}

.v4-val-row {
  display: flex; flex-direction: column; gap: var(--sp-2, 8px);
}

.v4-val-row__head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-1, 4px) var(--sp-3, 12px);
}
.v4-val-metric {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--al-ink-2);
}
.v4-val-current {
  font-size: 0.9rem; font-weight: 700; color: var(--al-ink);
  font-variant-numeric: tabular-nums;
}
.v4-val-tag {
  font-size: 0.6rem; padding: 1px 6px; border-radius: 3px;
  background: rgba(110,143,179,0.1); color: var(--al-accent);
  font-weight: 500; white-space: nowrap;
}
.v4-val-tag.null-tag {
  background: rgba(138,150,168,0.1); color: var(--al-ink-muted);
}

/* bar track */
.v4-val-bar {
  position: relative; height: 6px; border-radius: 3px;
  background: rgba(39,48,67,0.08);
}
/* 藍灰填色段（accent 系列，非漲跌 token） */
.v4-val-bar__fill {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 3px;
  background: var(--al-accent, #6E8FB3); opacity: 0.55;
}
.v4-val-bar__marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--al-accent, #6E8FB3);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--al-accent, #6E8FB3);
}

/* tick row (min / median / max) */
.v4-val-ticks {
  display: flex; justify-content: space-between;
  font-size: 0.58rem; color: var(--al-ink-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.v4-val-no-data {
  font-size: 0.7rem; color: var(--al-ink-muted);
  padding: var(--sp-2, 8px) 0;
}

/* backfilled footnote */
.v4-val-backfilled {
  font-size: 0.6rem; color: var(--al-ink-muted);
  padding: var(--sp-3, 12px) var(--sp-5, 24px) var(--sp-3, 12px);
  border-top: 1px dashed var(--al-border);
  line-height: 1.55;
}

/* unavailable state */
.v4-val-unavail {
  padding: var(--sp-5, 24px) var(--sp-5, 24px);
  font-size: 0.79rem; color: var(--al-ink-muted);
  text-align: center;
}

/* error / API fail */
.v4-val-error {
  padding: var(--sp-4, 16px) var(--sp-5, 24px);
  font-size: 0.72rem; color: var(--al-ink-muted);
  /* severity 非方向性：不用 --al-dn，用灰底 */
  background: rgba(138,150,168,0.06);
  border-radius: 3px;
  margin: var(--sp-3, 12px) var(--sp-5, 24px);
}

/* ── ④ Accordion 摺疊區（下沉舊資料）────────────────────────────────────── */
/* ui-rules §12 Exploration layer */

.v4-archive {
  margin-top: var(--sp-6, 32px);
}

.v4-archive__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 0.7rem var(--sp-4, 16px);
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: 4px;
  cursor: pointer; font-family: inherit;
  transition: background 0.12s;
  min-height: 44px;
}
.v4-archive__toggle:hover { background: var(--al-bg); }

.v4-archive__toggle-label {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--al-ink-muted);
}
.v4-archive__toggle-icon {
  font-size: 0.6rem; color: var(--al-ink-muted); transition: transform 0.2s;
}
.v4-archive__toggle[aria-expanded="true"] .v4-archive__toggle-icon {
  transform: rotate(180deg);
}

.v4-archive__body {
  margin-top: var(--sp-4, 16px);
}
.v4-archive__body[hidden] { display: none; }

/* ── ⑤ Disclaimer bar（AI 免責）─────────────────────────────────────────── */
/* ui-rules §8 必露出 disclaimer */

.v4-disclaimer {
  font-size: 0.62rem; color: var(--al-ink-muted);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  border-top: 1px dashed var(--al-border);
  margin-top: var(--sp-3, 12px);
  line-height: 1.55;
}

/* Quick Card 下方的 disclaimer */
.v4-qc-disclaimer {
  font-size: 0.6rem; color: var(--al-ink-muted);
  padding: var(--sp-2, 8px) var(--sp-4, 16px) var(--sp-3, 12px);
  border-top: 1px dashed var(--al-border);
  margin-top: var(--sp-3, 12px);
  line-height: 1.55;
  opacity: 0.85;
}

/* ── ⑥ Section header for new sections ───────────────────────────────────── */

.v4-hd {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--al-ink-muted);
  margin: var(--sp-6, 32px) 0 var(--sp-4, 16px);
}
.v4-hd::before {
  content: ''; display: block; width: 14px; height: 1px;
  background: currentColor; flex-shrink: 0;
}

/* ── ⑦ Loading skeletons for new sections ────────────────────────────────── */

.v4-skel-bar {
  height: 16px; border-radius: 3px;
  background: var(--al-surface-2, #FCFCFD);
  animation: v4-shimmer 1.4s ease-in-out infinite;
}
@keyframes v4-shimmer { 0%,100%{opacity:0.35;} 50%{opacity:0.75;} }

/* ── ⑧ Mobile accordion RWD (< 640px) ───────────────────────────────────── */
/* brief §5: < 640px 預設展開前 2 屏（AI card + 圖），其他摺疊 */

@media (max-width: 640px) {
  .v4-sr-grid { grid-template-columns: 1fr; }
  .v4-val-body { padding: var(--sp-3, 12px) var(--sp-4, 16px); }
  .v4-val-bar  { height: 8px; }
  .v4-val-bar__marker { width: 13px; height: 13px; }

  /* 在 mobile，archive 預設顯示 toggle 但 body 收起 */
  .v4-archive__body.mobile-collapsed { display: none; }
}

/* ── ⑨ B9 W3: AI 財務體質卡 (.v4-fh-*) ──────────────────────────────────────
   ui-rules §8 AI card、§3 色彩、§4 spacing、§6 data display
   risk flag 色用 severity hardcoded #b83232（非方向性 / 非 price token）
   CLAUDE.md §6 例外：severity 非 var(--al-up)，不受紅綠反轉影響
   ─────────────────────────────────────────────────────────────────────────── */

/* 外層 card：繼承 .al-ai-card 既有樣式，加少量 B9 overrides */
.v4-fh-card {
  padding: var(--sp-5, 24px);
}

.v4-fh-title {
  margin-bottom: var(--sp-3, 12px);
}

/* 健康分大數字 */
.v4-fh-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: var(--sp-3, 12px);
}
.v4-fh-score__num {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--al-ink-deep);
  letter-spacing: -0.03em;
}
.v4-fh-score__suffix {
  font-size: 0.875rem;
  color: var(--al-ink-muted);
}
.v4-fh-score--null {
  color: var(--al-ink-muted);
  font-size: 0.875rem;
  margin-bottom: var(--sp-3, 12px);
}

/* 4 大指標 breakdown */
.v4-fh-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--sp-3, 12px);
  margin-bottom: var(--sp-3, 12px);
}
.v4-fh-dim {
  display: grid;
  grid-template-columns: 80px 1fr 32px;
  gap: 8px;
  align-items: center;
}
.v4-fh-dim__label {
  font-size: 0.8125rem;
  color: var(--al-ink-2);
  white-space: nowrap;
}
.v4-fh-dim__bar {
  background: var(--al-surface-2, #FCFCFD);
  border: 1px solid var(--al-border, rgba(39,48,67,0.09));
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.v4-fh-dim__fill {
  display: block;
  height: 100%;
  /* accent 系藍灰：非漲跌語意，符合 ui-rules §3 accent 用途 */
  background: var(--al-accent, #6E8FB3);
  opacity: 0.7;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.v4-fh-dim__score {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--al-ink-2);
}

/* risk flags */
.v4-fh-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-3, 12px);
  margin-bottom: var(--sp-2, 8px);
}
.v4-fh-flag {
  /* severity 非方向性、非 price token；CLAUDE.md §6 例外：硬編碼 #b83232 */
  background: rgba(184, 50, 50, 0.08);
  color: #b83232;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* AI commentary */
.v4-fh-commentary {
  margin-top: var(--sp-3, 12px);
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--al-ink-2);
}

/* disclaimer（A5 合規） */
.v4-fh-disclaimer {
  display: block;
  margin-top: var(--sp-2, 8px);
  font-size: 0.6875rem;
  color: var(--al-ink-muted);
  line-height: 1.5;
  opacity: 0.85;
}

/* 資料依據展開 */
.v4-fh-source {
  margin-top: var(--sp-3, 12px);
  font-size: 0.8125rem;
  color: var(--al-ink-muted);
  border-top: 1px dashed var(--al-border, rgba(39,48,67,0.09));
  padding-top: var(--sp-3, 12px);
}
.v4-fh-source summary {
  cursor: pointer;
  color: var(--al-ink-muted);
  font-size: 0.75rem;
  user-select: none;
  list-style: none;
}
/* 隱藏預設 details 箭頭（跨瀏覽器） */
.v4-fh-source summary::-webkit-details-marker { display: none; }
.v4-fh-source summary::marker { content: ''; font-size: 0; }
.v4-fh-source p {
  margin: var(--sp-2, 8px) 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Mobile RWD < 480px：4 大指標一欄堆疊 */
@media (max-width: 480px) {
  .v4-fh-dim {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .v4-fh-dim__bar {
    width: 100%;
    height: 8px;
  }
  .v4-fh-dim__score {
    text-align: left;
  }
  .v4-fh-score__num {
    font-size: 2rem;
  }
}