/* Atlas Due Diligence — graphite tokens + reusable component styles
   Tailwind 處理 layout / spacing / typography；
   這裡只放重複出現、樣式非平凡的元件樣式（::before / 動畫 / grid template）。 */

:root {
  /* Slate (冷灰，hue 245-250) — Palette C：Slate + Royal Blue */
  --bg: oklch(0.985 0.005 245);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.975 0.006 245);
  --surface-sunken: oklch(0.96 0.008 245);
  --line: oklch(0.92 0.011 245);
  --line-2: oklch(0.88 0.013 245);
  --line-3: oklch(0.80 0.015 245);
  --text: oklch(0.20 0.018 250);
  --text-2: oklch(0.40 0.014 250);
  --text-3: oklch(0.56 0.012 250);
  --text-4: oklch(0.70 0.010 250);

  /* Brand accent — royal blue（取代原 amber） */
  --accent: oklch(0.50 0.18 252);
  --accent-strong: oklch(0.42 0.20 252);
  --accent-soft: oklch(0.95 0.04 252);

  /* 給「中等風險／中等變更」這類 semantic 警示用的暖琥珀色，
     跟品牌色獨立 — 不要因為品牌換成藍色就把警示色一起換掉，那會破壞語意。 */
  --warning: oklch(0.65 0.15 65);
  --warning-strong: oklch(0.55 0.16 55);
  --warning-soft: oklch(0.95 0.04 75);

  /* Status */
  --status-done: oklch(0.55 0.10 155);
  --status-running: oklch(0.50 0.18 252);
  --status-error: oklch(0.55 0.16 25);

  /* Risk */
  --risk-high: oklch(0.55 0.18 30);
  --risk-mid: oklch(0.65 0.15 65);
  --risk-low: oklch(0.55 0.10 155);

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
}

[v-cloak] { display: none; }

body {
  font-family: "Noto Sans TC", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  /* 防止 rogue 元素（過長 URL / 表格 / Vue 動態寬度）撐爆造成水平捲軸。
     overflow-x: clip 比 hidden 更乾淨，不影響 sticky positioning。 */
  overflow-x: clip;
}
.mono {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

/* ── Status dot ─────────────────────────── */
.status-dot {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
}
.status-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-4);
}
.status-dot.done      { color: var(--status-done); }
.status-dot.done::before    { background: var(--status-done); }
.status-dot.completed { color: var(--status-done); }
.status-dot.completed::before { background: var(--status-done); }
.status-dot.running   { color: var(--status-running); }
.status-dot.running::before { background: var(--status-running); animation: atlas-pulse 1.4s ease-in-out infinite; }
.status-dot.pending, .status-dot.queued { color: var(--text-3); }
.status-dot.error, .status-dot.failed { color: var(--status-error); }
.status-dot.error::before, .status-dot.failed::before { background: var(--status-error); }

@keyframes atlas-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* ── Workbench 大型輸入框 ────────────────── */
.wb-input {
  width: 100%;
  height: 46px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: 0 14px 0 42px;
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  font-feature-settings: "tnum" 1;
}
.wb-input:focus {
  outline: none;
  border-color: var(--text-2);
  box-shadow: 0 0 0 3px oklch(0.85 0.005 250 / 0.4);
}
.wb-input::placeholder { color: var(--text-4); font-family: "Noto Sans TC", sans-serif; }

/* ── Rail 列表項目（狀態進度條）─────────── */
.rail-progress {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--surface-sunken);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.rail-progress > span {
  display: block; height: 100%;
  background: var(--status-running);
  transition: width 0.3s ease;
}
.rail-meter-bar {
  height: 3px; background: var(--surface-sunken); border-radius: 2px; overflow: hidden;
}
.rail-meter-bar > span { display: block; height: 100%; background: var(--text-2); }

/* ── App shell layout ───────────────────── */
.app-shell {
  display: grid;
  /* minmax(0, 1fr) 而非 1fr：Grid 預設會把 track 撐到 min-content（rail 304px、
     主內容裡長字串、表格等），手機上會造成水平捲軸把整頁推出 viewport。
     minmax(0, 1fr) 強制 track 可壓縮到 0 以下，由內部元素自己處理 overflow。 */
  grid-template-columns: 304px minmax(0, 1fr);
  height: calc(100vh - 48px);
  min-height: 0;
}
.app-shell > .rail {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.app-shell > .main {
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  background: var(--bg);
}
.app-shell > .main::-webkit-scrollbar { width: 10px; }
.app-shell > .main::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }

/* Desktop 收合動畫：transition grid-template-columns，第一條 track 從 304px 滑到 0。
   rail 本身已經 overflow: hidden，內容被自然 clip — 不用 display:none（會打壞
   grid auto-placement，剩下的 .main 會掉到第一個 track）。
   行動裝置走抽屜模式（rail.open），跟 collapsed 互不干涉。 */
@media (min-width: 1280px) {
  .app-shell { transition: grid-template-columns 220ms cubic-bezier(0.4, 0, 0.2, 1); }
  .app-shell > .rail { transition: border-right-color 220ms ease; }
  .app-shell.rail-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
  .app-shell.rail-collapsed > .rail { border-right-color: transparent; }
}

/* 抽屜模式 breakpoint 對齊 Tailwind xl (1280px)：1024px 之前的螢幕（含 iPad
   Pro portrait 1024×1366）都用抽屜＋漢堡，避免 rail 撐爆內容寬度。
   topbar 的漢堡也要同步用 xl:hidden（見 _topbar.html）。 */
@media (max-width: 1279px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-shell > .rail {
    position: fixed; left: 0; top: 48px;
    width: 304px; height: calc(100vh - 48px);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 40;
  }
  .app-shell > .rail.open { transform: translateX(0); box-shadow: 0 0 40px oklch(0.2 0.01 250 / 0.15); }
}
.scrim {
  display: none;
  position: fixed; inset: 48px 0 0 0;
  background: oklch(0.2 0.01 250 / 0.4);
  z-index: 35;
}
.scrim.open { display: block; }
@media (min-width: 1280px) { .scrim { display: none !important; } }

/* ── Topbar avatar ──────────────────────── */
.atlas-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.55 0.08 50), oklch(0.40 0.06 30));
  color: white; font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}

/* Brand mark "思" */
.brand-mark {
  width: 22px; height: 22px;
  background: var(--text);
  color: var(--surface);
  border-radius: 5px;
  display: grid; place-items: center;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
}

/* ── Report header (rh-top) ─────────────── */
.report-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.rh-top {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 28px 12px;
  max-width: 1240px; width: 100%; margin: 0 auto;
}
.rh-back {
  height: 28px; padding: 0 8px 0 6px;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none;
  flex-shrink: 0;
}
.rh-back:hover { background: var(--surface-2); color: var(--text); }
.rh-title-block { flex: 1; min-width: 0; }
.rh-name {
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.rh-name .en { font-size: 12px; color: var(--text-3); font-weight: 400; }
.rh-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--text-3);
  flex-wrap: wrap;
}
.rh-meta .ban { font-family: "Geist Mono", ui-monospace, monospace; color: var(--text-2); }
.rh-meta .sep { color: var(--text-4); }
.rh-parties {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.rh-party-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.rh-party-pill:hover { background: var(--accent-soft); border-color: var(--accent); }
.rh-party-pill .lbl {
  color: var(--text-3);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.rh-party-pill .val {
  font-weight: 500;
  max-width: 12em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rh-actions { display: flex; gap: 6px; align-items: center; }
.rh-act {
  height: 30px; padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.rh-act:hover { background: var(--surface-2); color: var(--text); }
.rh-act:disabled { opacity: 0.6; cursor: not-allowed; }
.rh-act:disabled:hover { background: var(--surface); color: var(--text-2); }
.rh-act-spinner { width: 12px; height: 12px; border-width: 1.5px; }
.rh-act.primary { background: var(--text); color: var(--surface); border-color: var(--text); }
.rh-act.primary:hover { background: var(--text-2); }

/* Tabs */
.rh-tabs {
  display: flex; gap: 0;
  padding: 0 28px;
  max-width: 1240px; width: 100%; margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.rh-tabs::-webkit-scrollbar { display: none; }
.rh-tab {
  position: relative;
  padding: 8px 12px 10px;
  font-size: 13px;
  color: var(--text-3);
  background: transparent;
  border: none;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.rh-tab:hover { color: var(--text); }
.rh-tab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 500; }
.rh-tab .num {
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px;
  color: var(--text-4);
  background: var(--surface-2);
  padding: 0 5px; border-radius: 3px;
}
.rh-tab.active .num { color: var(--text-2); background: var(--surface-sunken); }
.rh-tab .risk-flag {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* ── Section card ───────────────────────── */
.report-body {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 28px 80px;
}
.section-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
  scroll-margin-top: 110px;
}
.section-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-wrap: wrap;
}
.section-head .num {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-4);
  background: var(--surface-sunken);
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.section-head h3 {
  margin: 0;
  font-size: 14px; font-weight: 600;
  color: var(--text);
}
.section-head .summary-pills {
  margin-left: auto;
  display: flex; gap: 6px; align-items: center;
  font-size: 11px;
  color: var(--text-3);
  flex-wrap: wrap;
}
.section-head .summary-pills b {
  font-family: "Geist Mono", ui-monospace, monospace;
  color: var(--text);
  font-weight: 600;
}
.section-body { padding: 16px 18px; }
.section-body.flush { padding: 0; }

/* ── KV table (4-col) ───────────────────── */
.kv {
  display: grid;
  grid-template-columns: 140px 1fr 140px 1fr;
  font-size: 13px;
}
.kv > .kv-row {
  display: contents;
}
.kv > div {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
  word-break: break-word;
}
.kv .k {
  color: var(--text-3) !important;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 400;
  border-right: 1px solid var(--line);
  letter-spacing: 0.01em;
}
.kv .v {
  color: var(--text) !important;
  background: var(--surface);
  font-weight: 500;
}
.kv .v.mono { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; }
.kv > div:nth-last-child(-n+4) { border-bottom: none; }
@media (max-width: 768px) {
  .kv { grid-template-columns: 110px 1fr; }
  .kv > div:nth-last-child(-n+2) { border-bottom: none; }
  .kv > div:nth-last-child(-n+4):not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--line); }
}

/* ── Data table ─────────────────────────── */
table.atlas-data {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.atlas-data thead th {
  text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
table.atlas-data td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
}
table.atlas-data tbody tr:last-child td { border-bottom: none; }
table.atlas-data tbody tr:hover { background: var(--surface-2); }
table.atlas-data .num {
  font-family: "Geist Mono", ui-monospace, monospace; text-align: right;
}

/* ── Tags / badges ──────────────────────── */
.tag {
  display: inline-flex; align-items: center;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--surface-sunken);
  color: var(--text-2);
  font-weight: 500;
}
/* 判決書 角色標籤 — 三色語意要分得開：
   rel = 關係人（warning 黃，提醒但非高風險）
   def = 被告（risk-high 紅）
   app = 上訴人（accent 藍，brand info） */
.tag.role-rel { background: var(--warning-soft); color: var(--warning-strong); }
.tag.role-def { background: oklch(0.96 0.03 25);  color: var(--risk-high); }
.tag.role-app { background: var(--accent-soft);   color: var(--accent-strong); }

.outcome { font-size: 11px; padding: 1px 5px; border-radius: 3px; font-weight: 500; }
.outcome.win { background: oklch(0.95 0.04 155); color: var(--risk-low); }
.outcome.lose { background: var(--surface-sunken); color: var(--text-3); }

.risk-level {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px; padding: 1px 6px; border-radius: 3px;
  font-weight: 600; text-transform: uppercase;
}
.risk-level.high { background: oklch(0.96 0.04 25); color: var(--risk-high); }
.risk-level.mid  { background: var(--warning-soft); color: var(--warning-strong); }
.risk-level.low  { background: oklch(0.95 0.04 155); color: var(--risk-low); }

/* ── AI panel ───────────────────────────── */
.ai-panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 80%);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
  position: relative;
  scroll-margin-top: 110px;
}
.ai-panel.ai-panel-danger {
  background: linear-gradient(180deg, oklch(0.96 0.04 25) 0%, var(--surface) 80%);
  border-color: oklch(0.85 0.08 25);
}
.ai-panel.ai-panel-danger .ai-icon { background: var(--risk-high); }
.ai-panel .ai-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.ai-panel .ai-icon {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--text);
  color: var(--surface);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  font-family: "Geist Mono", ui-monospace, monospace;
}
.ai-panel h3 { margin: 0; font-size: 14px; font-weight: 600; }
.ai-panel .ai-tag {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  font-family: "Geist Mono", ui-monospace, monospace;
}
.ai-summary { font-size: 13px; line-height: 1.65; color: var(--text-2); margin-bottom: 14px; }

.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 768px) { .risk-grid { grid-template-columns: 1fr; } }
.risk-cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.risk-cell .label {
  font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.risk-cell .value {
  font-size: 13px; font-weight: 500; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}

.observations {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.observations li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}
.observations .marker {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-4);
  padding-top: 2px;
}

/* ── Legacy rpt-* classes mapped to Atlas tokens
   (report_detail.html 既有 markup 不必動，視覺自動套上) ── */
.rpt-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: none;
  scroll-margin-top: 120px;
}
.rpt-hd {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  letter-spacing: -0.01em;
}
.rpt-hd > span:not(.num):not(.tag):not(.summary-pills),
.rpt-hd > b {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  font-family: "Geist Mono", ui-monospace, monospace;
}
.rpt-hd .summary-pills {
  margin-left: auto;
  display: flex; gap: 6px; align-items: center;
  font-size: 11px;
  color: var(--text-3);
  flex-wrap: wrap;
  font-weight: 400;
}
.rpt-hd .summary-pills b {
  font-family: "Geist Mono", ui-monospace, monospace;
  color: var(--text);
  font-weight: 600;
}
.rpt-bd {
  padding: 16px 18px;
}
/* kv 直接子元素：滿版（負 margin 撞掉 rpt-bd padding）。 */
.rpt-bd > .kv { margin: 0 -18px; }
.rpt-bd > .kv:first-child { margin-top: -16px; }
.rpt-bd > .kv:last-child  { margin-bottom: -16px; }
.rpt-bd > .kv:not(:last-child) { margin-bottom: 16px; }
/* kv-list 也滿版，並改成連續長表（不再每張小卡邊框） */
.rpt-bd > .kv-list { margin: 0 -18px; }
.rpt-bd > .kv-list:not(:last-child) { margin-bottom: 16px; }
.rpt-sub-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  padding: 3px 0 3px 10px;
  border-left: 3px solid var(--accent-strong);
  line-height: 1.4;
}

/* 公司判決 / 個人判決 兩邊指到同一份裁判書時，標示同一 row。
   配對 key = j.url || j.title。
   背景用左→右的 accent-soft 漸層淡入 transparent，比平鋪有層次。
   `> div` 透明蓋掉內層 hover:bg-gray-50，避免 hover 時漸層消失。 */
.judg-matched {
  background: linear-gradient(90deg, oklch(0.95 0.04 25) 0%, transparent 70%);
  border-color: oklch(0.82 0.09 25);
}
.judg-matched > div,
.judg-matched > div:hover {
  background: transparent;
}

/* kv-table（既有 2-col 表，地籍 土地/建物 用） → 套 Atlas kv 視覺 */
.kv-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
  background: var(--surface);
}
.kv-table th {
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-3) !important;
  background: var(--surface-2);
  padding: 7px 12px;
  width: 110px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  letter-spacing: 0.01em;
}
.kv-table td {
  color: var(--text) !important;
  font-weight: 500;
  padding: 7px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.kv-table tbody tr:last-child th,
.kv-table tbody tr:last-child td { border-bottom: none; }

/* 董監事/經理人/分公司：list of records 連成一長條 kv 表，
   每位 record 之間用較粗較深的 border-top 分隔，方便辨識。 */
.kv-list { display: flex; flex-direction: column; }
.kv-list > .kv {
  border-radius: 0;
  border-top: 2px solid var(--line-3);
}
.kv-list > .kv:first-child { border-top: 1px solid var(--line); }
.kv-list > .kv:last-child  { border-bottom: 1px solid var(--line); }
.kv-list > .kv > div { padding: 7px 12px; }

/* 公司歷程變更表（時序記事） */
.history-list {
  display: flex;
  flex-direction: column;
}
.history-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  padding: 11px 14px;
  border-top: 2px solid var(--line-3);
  align-items: start;
}
.history-row:first-child { border-top: 1px solid var(--line); }
.history-row:last-child  { border-bottom: 1px solid var(--line); }
.history-date {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  padding-top: 1px;
  letter-spacing: -0.005em;
}
.history-events {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  word-break: break-word;
}
.rpt-bd > .history-list { margin: 0 -18px; }
.rpt-bd > .history-list:last-child { margin-bottom: -16px; }
/* data-table：跟 kv 同套配色（thead 灰底、薄分隔線），統一視覺 */
.data-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.data-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.data-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  /* color 不寫，讓 inline utility class（text-status-error 等）能覆蓋 */
}

/* 顯式定義狀態色 utility，避免 Tailwind CDN JIT 對 :class 動態 string 認不到 */
.text-status-done    { color: var(--status-done); }
.text-status-error   { color: var(--status-error); }
.text-status-running { color: var(--status-running); }
.text-ink            { color: var(--text); }
.text-ink-2          { color: var(--text-2); }
.text-ink-3          { color: var(--text-3); }
.text-ink-4          { color: var(--text-4); }
.bg-surface          { background-color: var(--surface); }
.bg-surface-2        { background-color: var(--surface-2); }
.border-line         { border-color: var(--line); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table .num,
.data-table td.text-right { text-align: right; }

/* table-wrap 直接子於 .rpt-bd 時也滿版（負 margin 撞掉 padding） */
.rpt-bd > .table-wrap { margin: 0 -18px; }
.rpt-bd > .table-wrap:not(:last-child) { margin-bottom: 16px; }
.rpt-bd > .table-wrap:last-child { margin-bottom: -16px; }

/* ── Rail 資料夾／檢視 ────────────────── */
.rail-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 6px 10px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.rail-section-title .count {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  color: var(--text-4);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.rail-divider {
  height: 1px;
  background: var(--line);
  margin: 6px 14px;
}
.rail-icon-btn {
  background: transparent;
  border: none;
  color: var(--text-3);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
}
.rail-icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.folder-row {
  display: grid;
  grid-template-columns: 12px 14px 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.folder-row:hover {
  background: var(--surface-2);
  color: var(--text);
}
.folder-row .chevron {
  color: var(--text-4);
  transition: transform 0.15s;
}
.folder-row.is-open .chevron {
  transform: rotate(90deg);
}
.folder-row .folder-icon { color: var(--text-3); }
.folder-row:hover .folder-icon { color: var(--text-2); }
.folder-row .name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-row .count {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-4);
  background: var(--surface-sunken);
  padding: 1px 5px;
  border-radius: 3px;
}
.folder-row .more-btn { opacity: 0; }
.folder-row:hover .more-btn { opacity: 1; }

.folder-children {
  margin: 2px 0 4px 14px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.folder-empty {
  font-size: 11px;
  color: var(--text-4);
  padding: 4px 8px 6px;
}

.folder-rename-input,
.folder-new-input {
  width: 100%;
  height: 28px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.folder-rename-input:focus,
.folder-new-input:focus {
  border-color: var(--text-3);
  box-shadow: 0 0 0 3px oklch(0.85 0.005 250 / 0.4);
}
.folder-input-hint {
  font-size: 11px;
  color: var(--text-4);
  padding: 2px 4px 0;
}

/* co-item 行 */
.co-row {
  position: relative;
  display: block;
  text-decoration: none;
  margin-bottom: 1px;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.co-row:hover { background: var(--surface-2); }
.co-row.is-active {
  background: var(--surface-2);
  border-color: var(--line);
}
.co-row .more-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
}
.co-row:hover .more-btn,
.co-row.is-menu-open .more-btn { opacity: 1; }

/* 案件人員 pill 列（負責人 / 借款人 / 票主） */
.co-parties {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 1px;
}
.co-party {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 10px;
  line-height: 1.4;
  max-width: 100%;
}
.co-row.is-active .co-party { background: var(--surface); }
.co-party .lbl {
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.co-party .val {
  color: var(--text-2);
  font-weight: 500;
  max-width: 8em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 漂浮選單 */
.rail-menu {
  position: fixed;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow:
    0 8px 24px oklch(0.4 0.01 250 / 0.10),
    0 2px 6px oklch(0.4 0.01 250 / 0.06);
  min-width: 200px;
  max-width: 260px;
  padding: 4px 0;
  font-size: 13px;
}
.rail-menu-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 6px 12px 4px;
}
.rail-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  color: var(--text);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 13px;
}
.rail-menu-item:hover { background: var(--surface-2); }
.rail-menu-item .check {
  margin-left: auto;
  color: var(--accent-strong);
}
.rail-menu-item.is-danger { color: var(--status-error); }
.rail-menu-item.is-danger:hover { background: oklch(0.97 0.025 25); }
.rail-menu-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

/* ── 確認對話框 ────────────────────────── */
.atlas-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: oklch(0.2 0.01 250 / 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: atlas-modal-fade 0.12s ease-out;
}
.atlas-modal {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 20px 50px oklch(0.2 0.01 250 / 0.18),
    0 4px 12px oklch(0.2 0.01 250 / 0.10);
  animation: atlas-modal-pop 0.14s ease-out;
}
@keyframes atlas-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes atlas-modal-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.atlas-modal-body {
  padding: 20px 22px 16px;
}
.atlas-modal-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.atlas-modal-message {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}
.atlas-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.atlas-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.atlas-btn-ghost {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--line);
}
.atlas-btn-ghost:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-2);
}
.atlas-btn-primary {
  background: var(--text);
  color: var(--surface);
}
.atlas-btn-primary:hover { background: var(--text-2); }
.atlas-btn-danger {
  background: var(--status-error);
  color: white;
}
.atlas-btn-danger:hover { background: oklch(0.48 0.17 25); }

/* ── 變更通知（topbar bell + panel） ───── */
.notif-wrap { position: relative; }
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--accent-strong);
  color: white;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 700;
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid var(--surface);
  box-sizing: content-box;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: -8px;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 12px 32px oklch(0.2 0.01 250 / 0.14),
    0 4px 8px oklch(0.2 0.01 250 / 0.06);
  z-index: 80;
  overflow: hidden;
  animation: atlas-modal-pop 0.12s ease-out;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.notif-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.notif-head .meta {
  font-size: 11px;
  color: var(--text-3);
}
.notif-list {
  max-height: 480px;
  overflow-y: auto;
}
.notif-empty {
  padding: 36px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-4);
}
.notif-date {
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface-sunken);
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--line);
}
.notif-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.1s;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item:last-child { border-bottom: none; }
.notif-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--text-4);
}
.notif-item .dot.high { background: var(--risk-high); }
.notif-item .dot.mid  { background: var(--accent); }
.notif-item .dot.low  { background: var(--text-3); }
.notif-item .dot.read {
  background: transparent;
  border: 1px solid var(--line-2);
  width: 5px;
  height: 5px;
}
.notif-item.is-read .co {
  color: var(--text-2);
  font-weight: 400;
}
.notif-body { min-width: 0; }
.notif-item .top-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.notif-item .co {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-item .time {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-4);
  flex-shrink: 0;
}
.notif-item .change-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
}
.notif-item .change-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  line-height: 1.5;
}
.notif-item .change-row .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  background: var(--surface-sunken);
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
  font-weight: 500;
}
.notif-item .change-row .text { min-width: 0; }
.notif-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
}
.notif-foot button {
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 3px;
}
.notif-foot button:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface);
}

/* ── Co-row 變更小角標（rail） ─────────── */
.diff-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* ── 報告本期變更摘要 banner ──────────── */
.change-banner {
  position: relative;
  background:
    radial-gradient(ellipse 240px 160px at 0% 0%, var(--accent-soft) 0%, transparent 70%),
    radial-gradient(ellipse 200px 140px at 100% 100%, oklch(0.97 0.018 250) 0%, transparent 70%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px 16px 14px;
  box-shadow: 0 1px 2px oklch(0.4 0.01 250 / 0.04);
}
.cb-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.cb-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cb-title svg { color: var(--accent-strong); flex-shrink: 0; }
.cb-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cb-since {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: -0.005em;
}
.cb-arrow {
  color: var(--text-4);
  margin: 0 4px;
}
.cb-desc {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
}

.cb-diffs {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* 整列就是按鈕 */
.diff-row {
  display: grid;
  grid-template-columns: 56px 110px 1fr 1fr;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  width: 100%;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background 0.1s;
}
.diff-row:first-child { border-top: none; }
.diff-row:hover { background: var(--surface-2); }
.diff-row:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
}

.diff-row .sev {
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  justify-self: start;
  line-height: 1.5;
}
.diff-row .sev.high { background: oklch(0.96 0.04 25); color: var(--risk-high); }
.diff-row .sev.mid  { background: var(--warning-soft); color: var(--warning-strong); }
.diff-row .sev.low  { background: var(--surface-sunken); color: var(--text-3); }

.diff-row .field {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.diff-row .before {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-4);
  text-decoration: line-through;
  text-decoration-color: var(--text-4);
  text-decoration-thickness: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  text-align: right;
  letter-spacing: -0.01em;
}
.diff-row .after {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.diff-row .after::before {
  content: "→";
  color: var(--text-4);
  font-family: inherit;
  flex-shrink: 0;
  font-size: 11px;
}
.diff-row .note {
  grid-column: 2 / -1;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  padding-top: 1px;
  padding-bottom: 1px;
}

@media (max-width: 720px) {
  .diff-row {
    grid-template-columns: 56px 1fr;
    column-gap: 10px;
  }
  .diff-row .field    { grid-column: 2; }
  .diff-row .before   { grid-column: 2; text-align: left; }
  .diff-row .after    { grid-column: 2; }
  .diff-row .note     { grid-column: 2; }
}

/* ── 查詢進行中：步驟卡片 ──────────────── */
.loading-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 16px 20px 14px;
  box-shadow: 0 1px 2px oklch(0.4 0.01 250 / 0.04);
}
.loading-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.loading-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.loading-progress-text {
  font-size: 11px;
  color: var(--text-3);
  font-feature-settings: "tnum" 1;
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.loading-step-count {
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: -0.01em;
  margin-left: auto;
  flex-shrink: 0;
}
.loading-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  min-width: 40px;
  text-align: right;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.atlas-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--line-2);
  border-top-color: var(--status-running);
  border-radius: 50%;
  animation: atlas-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes atlas-spin { to { transform: rotate(360deg); } }

.loading-rows {
  display: flex;
  flex-direction: column;
}
.loading-row {
  display: grid;
  grid-template-columns: 16px 1fr 130px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  font-size: 12px;
  color: var(--text-2);
}
.loading-row + .loading-row { border-top: 1px dashed var(--line); }

.loading-row .step-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  color: var(--surface);
  flex-shrink: 0;
}
.loading-row.done .step-icon {
  background: var(--status-done);
  border-color: var(--status-done);
}
.loading-row.running .step-icon {
  background: var(--surface);
  border: 2px solid var(--status-running);
  position: relative;
}
.loading-row.running .step-icon::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: var(--status-running);
  animation: atlas-pulse 1.4s ease-in-out infinite;
}
.loading-row.queued .label { color: var(--text-3); }
.loading-row.done .label   { color: var(--text); }
.loading-row.running .label {
  color: var(--text);
  font-weight: 500;
}

.loading-row .bar {
  height: 4px;
  background: var(--surface-sunken);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.loading-row .bar > span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  background: var(--status-running);
  border-radius: 2px;
  animation: loading-slide 1.6s ease-in-out infinite;
}
@keyframes loading-slide {
  0%   { left: -35%; }
  100% { left: 100%; }
}

.loading-row .status-text {
  font-size: 11px;
  color: var(--text-3);
  text-align: right;
  letter-spacing: 0;
}
.loading-row.done .status-text {
  color: var(--status-done);
  font-weight: 500;
}

.loading-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-3);
  padding: 0 4px;
  line-height: 1.5;
}
.loading-hint svg { color: var(--text-4); flex-shrink: 0; }

@media (max-width: 720px) {
  .loading-row {
    grid-template-columns: 16px 1fr 90px;
    gap: 10px;
  }
  .loading-progress-text { display: none; }
}

/* ── 案件人員卡（borrower / 負責人 / 票主） ─────────────── */
.parties-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 4px 16px 10px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scroll-margin-top: 110px;
}
.parties-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.parties-head svg { color: var(--text-3); }
.parties-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 36px;
}
.parties-row + .parties-row {
  border-top: 1px solid var(--line);
}
.parties-label {
  flex: 0 0 56px;
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}
.parties-value {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.parties-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  max-width: 100%;
}
.parties-chip > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parties-chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.parties-auto-tag {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.04em;
}
.parties-empty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px dashed var(--line-2);
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.parties-empty:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.parties-empty svg { flex-shrink: 0; }
.parties-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border: none;
  background: transparent;
  color: var(--text-4);
  border-radius: 4px;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.parties-reset:hover { color: var(--text); background: var(--surface-2); }
.parties-input {
  flex: 1;
  min-width: 120px;
  max-width: 240px;
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.parties-input:focus { border-color: var(--accent); }
.parties-btn {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
}
.parties-btn:hover { background: var(--surface-2); }
.parties-btn.primary {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}
.parties-btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.parties-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.parties-err {
  font-size: 11px;
  color: oklch(0.55 0.18 25);
}

/* 列印版：純文字 */
@media print {
  .parties-print-title {
    font-size: 13px; font-weight: 600; color: var(--text);
    margin: 0 0 6px 0;
  }
  .parties-print-table {
    width: auto; border-collapse: collapse; margin-bottom: 12px;
  }
  .parties-print-table th, .parties-print-table td {
    text-align: left; padding: 2px 12px 2px 0;
    font-size: 12px; vertical-align: top;
  }
  .parties-print-table th { color: var(--text-3); font-weight: normal; min-width: 56px; }
  .parties-print-table td { color: var(--text); }
}

/* ─────────────────────────────────────────────────────────────
   Mobile / tablet overrides
   集中放在檔尾，覆蓋既有 component CSS。其他 component-scoped
   的 @media（kv 4-col→2-col 在 768px、diff-row 在 720px、risk-grid
   在 768px）不動，避免兩邊各改一段難維護。
   ───────────────────────────────────────────────────────────── */

/* Tablet 直立 / 大手機（iPad portrait, ~iPhone Plus） */
@media (max-width: 820px) {
  .rh-top {
    padding: 12px 14px 10px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .rh-title-block { flex-basis: 100%; }
  .rh-actions {
    flex-basis: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .rh-tabs { padding: 0 14px; }
  .report-body { padding: 16px 14px 60px; }
}

/* 手機直立（iPhone, ~640px 以下） */
@media (max-width: 640px) {
  /* Topbar：站名次標題收掉，避免擠 */
  .topbar-subtitle { display: none; }

  /* Sticky 報告 header：縮 padding、字級下修 */
  .rh-top {
    padding: 10px 12px 8px;
    gap: 8px;
  }
  .rh-back {
    height: 26px;
    padding: 0 6px 0 4px;
    font-size: 11px;
  }
  .rh-name {
    font-size: 16px;
    gap: 6px;
    margin-bottom: 2px;
  }
  .rh-name .en { font-size: 11px; }
  .rh-meta { gap: 8px; font-size: 11px; }
  .rh-parties { gap: 4px; margin-top: 4px; }
  .rh-party-pill {
    padding: 2px 7px 2px 6px;
    font-size: 10px;
    gap: 4px;
  }
  .rh-party-pill .val { max-width: 8em; }
  .rh-act {
    height: 28px;
    padding: 0 8px;
    font-size: 11px;
    gap: 4px;
  }
  .rh-tabs { padding: 0 12px; }
  .rh-tab { padding: 7px 10px 9px; font-size: 12px; }
  .rh-tab .num { font-size: 10px; padding: 0 4px; }

  /* 主內容 padding 收 */
  .report-body { padding: 12px 10px 48px; }

  /* Section card / rpt-card：標頭與 body padding 收 */
  .section-head { padding: 10px 12px; gap: 8px; }
  .section-head h3 { font-size: 13px; }
  .section-body { padding: 12px 12px; }
  .rpt-card {
    margin-bottom: 12px;
    min-width: 0;
    max-width: 100%;
  }
  .rpt-hd { padding: 10px 12px; font-size: 13px; gap: 8px; }
  .rpt-bd {
    padding: 12px 12px;
    min-width: 0;
    max-width: 100%;
  }
  .rpt-bd > * { min-width: 0; }

  /* 滿版子元素的負 margin 對齊新的 rpt-bd / section-body padding */
  .rpt-bd > .kv,
  .rpt-bd > .kv-list,
  .rpt-bd > .table-wrap,
  .rpt-bd > .history-list {
    margin-left: -12px;
    margin-right: -12px;
  }
  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 4-col kv：手機已經在 768px 收成 2-col，這邊再縮 label 寬 */
  .kv {
    grid-template-columns: 88px 1fr;
    font-size: 12.5px;
    min-width: 0;
  }
  .kv > div { padding: 8px 12px; }
  .kv .k { font-size: 11px; }
  .kv .v.mono { font-size: 11.5px; }
  .kv .v {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 2-col kv-table（地籍、聯絡） */
  .kv-table {
    font-size: 12.5px;
    table-layout: fixed;
    max-width: 100%;
  }
  .kv-table th { width: 88px; padding: 6px 10px; font-size: 11px; }
  .kv-table td {
    padding: 6px 10px;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* data-table：縮欄距，字級保持 12.5px 維持中文可讀 */
  .data-table { font-size: 12.5px; }
  .data-table thead th { padding: 7px 10px; font-size: 10px; }
  .data-table td {
    padding: 8px 10px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  table.atlas-data { font-size: 12.5px; }
  table.atlas-data thead th { padding: 7px 8px; }
  table.atlas-data td { padding: 8px 8px; }

  /* 公司歷程：日期欄 stack 到 events 上方 */
  .history-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 12px;
  }
  .history-date { font-size: 11px; }
  .history-events { font-size: 12.5px; }

  /* kv-list 子 kv 的內 padding 也收 */
  .kv-list > .kv > div { padding: 6px 10px; }

  /* parties-card：手機把 row 從橫排 chip 改 stack */
  .parties-card { padding: 4px 12px 8px; }
  .parties-row { gap: 8px; min-height: 30px; }
  .parties-label { flex-basis: 48px; font-size: 11px; }
  .parties-chip { font-size: 12px; padding: 3px 9px; }
  .parties-empty { font-size: 11px; padding: 3px 9px; }

  /* AI panel 收 padding，避免內文離 card 邊太遠 */
  .ai-panel { padding: 14px 14px; }
  .ai-panel h3 { font-size: 13px; }
  .ai-summary { font-size: 12.5px; }

  /* flex 容器 min-width: 0 才會吃 flex-shrink，否則內文長字串會撐爆。
     .app-shell > .main 是內容主軸，必須能收縮。 */
  .app-shell > .main { min-width: 0; }

  /* 強制長 URL / 英文連續字串斷行（判決書 url、Email、英文公司名等） */
  .ai-content, .observations li, .rpt-bd, .section-body {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 報告內的可展開摘要列在桌面橫排，手機要允許換行；否則右側日期、
     抵押權人、案由等 nowrap 文字會把整張卡推出 viewport。 */
  .rpt-bd .flex.items-center.gap-3 {
    min-width: 0;
    flex-wrap: wrap;
  }
  .rpt-bd .flex.items-center.gap-3 > .truncate,
  .rpt-bd .flex.items-center.gap-3 > a.truncate,
  .rpt-bd .flex.items-center.gap-3 > span.truncate {
    min-width: 0;
    flex: 1 1 160px;
  }
  .rpt-bd .flex.items-center.gap-3 > .ml-auto {
    margin-left: 0;
  }
}

/* 超窄螢幕（iPhone SE / 小手機 ~360px） */
@media (max-width: 380px) {
  .rh-name { font-size: 15px; }
  .rh-act { padding: 0 6px; font-size: 10.5px; }
  .rh-act svg { width: 11px; height: 11px; }
  .kv { grid-template-columns: 76px 1fr; }
  .kv-table th { width: 76px; }
  .data-table thead th { letter-spacing: 0.02em; }
}

/* ============================================================
   PR5a: 方案 badge (nav 顯示「一般 / 進階 / 專業」)
   ============================================================ */
.plan-badge {
  display: inline-block;
  letter-spacing: 0.02em;
}
.plan-badge.plan-basic {
  background: #6b7280;
  color: white;
}
.plan-badge.plan-advanced {
  background: #2563eb;
  color: white;
}
.plan-badge.plan-pro {
  background: linear-gradient(90deg, #dc2626 0%, #f59e0b 100%);
  color: white;
}

/* ============================================================
   PR5a: 齒輪 dropdown (帳號 / Telegram / 登出)
   ============================================================ */
.settings-wrap {
  position: relative;
}
.settings-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 4px 0;
  z-index: 60;
  font-size: 13px;
}
.settings-user {
  padding: 8px 14px;
  font-weight: 600;
  color: var(--text, #111827);
  border-bottom: 1px solid var(--line, #e5e7eb);
  margin-bottom: 4px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-item {
  display: block;
  padding: 8px 14px;
  color: var(--text-2, #374151);
  text-decoration: none;
}
.settings-item:hover {
  background: var(--surface-2, #f3f4f6);
  color: var(--text, #111827);
}
.settings-item-danger:hover {
  color: #dc2626;
}