/* ============================================================
   Reverse Playground — 供應商端 SPA 樣式
   ------------------------------------------------------------
   視覺方向「Wire & Seam」：整個介面當成一台協定量測儀。
   - 等寬字是主要字體（這裡的每一樣東西都是線上資料：案例 ID、
     hex 簽名、URL、延遲），無襯線只承擔散文。
   - 紫是品牌色，紅／黃／綠／灰藍四色專屬判分語意，不挪作他用；
     這樣任何一個色點都能無歧義地讀成「狀態」或「品牌」。
   - 結構裝置只有一個：呼叫方向（我方→你方／你方→我方），
     因為那是內容本身就帶著的真實資訊。
   ============================================================ */

:root {
  /* 底層 */
  --void: #0c0a12;
  --slab: #15121d;
  --slab-2: #1c1826;
  --well: #08060d;
  --seam: #2b2438;
  --seam-2: #3d3352;

  /* 文字 */
  --bone: #eae6f2;
  --bone-2: #b9b2cc;
  --dim: #8e86a6;

  /* 品牌 */
  --orchid: #b98bff;
  --orchid-2: #cdadff;

  /* 判分語意（不可挪作品牌用途） */
  --pass: #4fd69c;
  --fail: #ff6f6f;
  --warn: #e3b84a;
  --skip: #7a8aa6;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  --r: 4px;
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--seam-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--seam); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--seam-2); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

body {
  margin: 0;
  color: var(--bone);
  background-color: var(--void);
  /* 儀器面板的細方格；夠淡到不與內容爭焦點，但讓純黑底不再是一片死平面 */
  background-image:
    linear-gradient(rgba(185, 139, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 139, 255, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  background-attachment: fixed;
  font: 400 13px/1.6 var(--mono);
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(185, 139, 255, .3); }

a { color: var(--orchid); text-decoration: none; }
a:hover { color: var(--orchid-2); }

:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; border-radius: 2px; }

/* --- 字級 ---------------------------------------------------- */

h1, h2, h3 { font-family: var(--mono); font-weight: 500; }

h1 {
  margin: 0 0 6px;
  font-size: 21px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bone);
}

/* h2 是段落的 eyebrow：一道紫色短線＋全大寫小字，全站唯一的裝飾性線條 */
h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-2);
}
h2::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--orchid); }
h1 + h2 { margin-top: 20px; }

h3 {
  margin: 20px 0 8px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

p { margin: 0 0 4px; font-family: var(--sans); font-size: 13px; line-height: 1.65; color: var(--bone-2); }
p + form, p + table.kv { margin-top: 18px; }

.muted { color: var(--dim); }
p.muted, .prose { font-family: var(--sans); }

code { font-family: var(--mono); }

/* --- 頂列 ---------------------------------------------------- */

/* hidden 屬性必須贏過下面的 display:flex（否則登入頁也會出現頂列） */
[hidden] { display: none !important; }

#topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
  height: 58px;
  background: rgba(12, 10, 18, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--seam);
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

/* 品牌標記：把慣用的 ‹› 反過來寫成 ›‹ ——「反串接」本身就是這個產品的名字 */
.brand-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--seam-2);
  border-radius: var(--r);
  background: var(--slab-2);
  color: var(--orchid);
  font: 500 13px/1 var(--mono);
  letter-spacing: -.06em;
}

.brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-text strong {
  font: 500 12px/1 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-text .muted {
  font: 400 11px/1 var(--sans);
  letter-spacing: 0;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
#nav::-webkit-scrollbar { display: none; }
#nav a {
  position: relative;
  padding: 20px 10px;
  color: var(--dim);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
#nav a:hover { color: var(--bone); }
#nav a.active { color: var(--bone); }
#nav a.active::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 2px;
  background: var(--orchid);
}

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.topbar-right .pill { white-space: nowrap; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 24px 90px;
}

/* --- 卡片與版面 ---------------------------------------------- */

.card {
  background: var(--slab);
  border: 1px solid var(--seam);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 14px;
}

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 240px; min-width: 0; }
/* 標題進到 .row 當 flex item 時自己的下／上邊距要讓位，否則同一列的元素
   會被推得高低不齊（h2／h3 的預設邊距是給獨立段落用的） */
.row > h2 { margin-bottom: 0; }
.row > h3 { margin: 18px 0 0; }
.card > .row:first-child > h3 { margin-top: 0; }

/* 方向標記——全站唯一的結構裝置，標的是內容本身就有的呼叫方向 */
.wire {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.wire.out::after { content: "\2192"; color: var(--orchid); font-size: 13px; }
.wire.in::before { content: "\2190"; color: var(--orchid); font-size: 13px; }

/* --- 驗收路線（Dashboard 的主角） ---------------------------- */

.track-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.track-head h2 { margin: 0; }
.track-count { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.track-count b { color: var(--bone); font-weight: 500; }

.track-rail {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.node {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 22px 8px 0 0;
}
/* 節點之間的軌道：畫在圓點的垂直中心上，首尾各裁掉一半 */
.node::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0; right: 0;
  height: 1px;
  background: var(--seam-2);
}
.node:first-child::before { left: 5px; }
.node:last-child::before { right: calc(100% - 6px); }
/* 軌道的顏色只表示「路走到哪裡」，不表示判分：通過（含帶警告通過）的階段
   後面那一段才是亮的，失敗或未執行之後一律轉暗——一條紅線往後延伸會讓人
   以為失敗會傳染到後面的階段，那不是事實。 */
.node.done::before, .node.warned::before { background: var(--pass); opacity: .45; }
.node.locked::before {
  background: none;
  border-top: 1px dashed var(--seam-2);
  height: 0;
}

.node .dot {
  position: absolute;
  top: 0; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--seam-2);
  background: var(--void);
}
.node.done .dot { border-color: var(--pass); background: var(--pass); box-shadow: 0 0 0 3px rgba(79, 214, 156, .14); }
.node.warned .dot { border-color: var(--warn); background: var(--warn); box-shadow: 0 0 0 3px rgba(227, 184, 74, .14); }
.node.bad .dot { border-color: var(--fail); background: var(--fail); box-shadow: 0 0 0 3px rgba(255, 111, 111, .14); }
.node.active .dot { border-color: var(--orchid); background: var(--void); box-shadow: 0 0 0 3px rgba(185, 139, 255, .16); }
.node.locked .dot { border-style: dashed; }

.node .ph {
  display: inline-block;
  min-width: 22px;
  padding: 1px 5px;
  margin-bottom: 6px;
  border: 1px solid var(--seam);
  border-radius: 3px;
  background: var(--slab-2);
  font-size: 10px;
  text-align: center;
  color: var(--dim);
}
.node:not(.locked) .ph { color: var(--bone); border-color: var(--seam-2); }

.node .nm {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--bone-2);
  padding-right: 8px;
}
/* 尚未開放的階段整組壓暗：它們在畫面上的工作只是「讓人知道後面還有路」，
   不該和真正要處理的階段搶注意力 */
.node.locked .nm, .node.locked .vd { color: #605979; }
.node .vd {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.node .vd.pass { color: var(--pass); }
.node .vd.fail { color: var(--fail); }
.node .vd.warn { color: var(--warn); }

/* --- 階段清單（一階段一列，取代四張半空的卡片） --------------- */

.ledger { display: flex; flex-direction: column; }
.ledger-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 4px;
  border-top: 1px solid var(--seam);
  color: var(--bone);
}
.ledger-row:first-child { border-top: 0; }
a.ledger-row:hover { background: var(--slab-2); color: var(--bone); }
a.ledger-row:hover .go { color: var(--orchid-2); }

.ledger .ph {
  flex: none;
  min-width: 24px;
  padding: 2px 6px;
  border: 1px solid var(--seam);
  border-radius: 3px;
  background: var(--slab-2);
  font-size: 10px;
  text-align: center;
  color: var(--dim);
}
.ledger .nm { flex: 0 1 auto; font-family: var(--sans); font-size: 13px; }
.ledger-row .sub { flex: 1 1 auto; font-size: 11px; color: var(--dim); }
.ledger-row .go { flex: none; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ledger-row .go::after { content: " \2192"; }
.ledger-block { padding: 13px 4px; border-top: 1px solid var(--seam); }
.ledger-block:first-child { border-top: 0; }

/* --- 表單 ---------------------------------------------------- */

label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* 輸入框與按鈕共用 38px 的高度，並排時（例如 apiUrl ＋「檢核並儲存」）才不會
   一高一矮 */
input, textarea, select {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  background: var(--well);
  border: 1px solid var(--seam);
  border-radius: var(--r);
  color: var(--bone);
  font: 400 13px/1.5 var(--mono);
}
input::placeholder, textarea::placeholder { color: #5d5675; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--orchid);
  box-shadow: 0 0 0 3px rgba(185, 139, 255, .13);
}
textarea { min-height: 132px; resize: vertical; line-height: 1.65; }
select { appearance: none; padding-right: 30px; cursor: pointer; }

button {
  min-height: 38px;
  padding: 9px 16px;
  background: var(--orchid);
  border: 1px solid var(--orchid);
  border-radius: var(--r);
  color: #14091f;
  font: 500 11px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
button:hover:not(:disabled) { background: var(--orchid-2); border-color: var(--orchid-2); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.ghost { background: transparent; border-color: var(--seam-2); color: var(--bone-2); }
button.ghost:hover:not(:disabled) { background: var(--slab-2); border-color: var(--orchid); color: var(--bone); }
button.small { min-height: 0; padding: 5px 10px; font-size: 10px; }
.topbar-right button { min-height: 32px; padding: 7px 11px; }

.pill {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--seam);
  border-radius: 999px;
  background: var(--slab-2);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--bone-2);
}
#who::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--pass);
  vertical-align: middle;
}

/* --- 徽章：一個 --c 驅動文字／底色／框線三者 ------------------ */

.badge {
  --c: var(--dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.pass, .badge.passed { --c: var(--pass); }
.badge.fail, .badge.failed { --c: var(--fail); }
.badge.warn { --c: var(--warn); }
.badge.skip { --c: var(--skip); }
.badge.running { --c: var(--orchid); }
.badge.running::before { animation: beat 1.1s ease-in-out infinite; }
.badge.pending::before, .badge.skip::before, .badge.aborted::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

@keyframes beat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* --- 案例列表 ------------------------------------------------ */

.case {
  --c: var(--seam-2);
  border: 1px solid var(--seam);
  border-left: 2px solid var(--c);
  border-radius: var(--r);
  margin-bottom: 6px;
  background: var(--slab-2);
}
.case.pass, .case.passed { --c: var(--pass); }
.case.fail, .case.failed { --c: var(--fail); }
.case.warn { --c: var(--warn); }
.case.skip { --c: var(--skip); }
.case.running { --c: var(--orchid); }

.case-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
}
.case-head:hover { background: rgba(185, 139, 255, .045); }
.case-head .id {
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--seam);
  border-radius: 3px;
  background: var(--slab);
  font-size: 10.5px;
  color: var(--bone-2);
}
.case-head .name { flex: 1 1 200px; min-width: 0; font-family: var(--sans); font-size: 13px; }
.case-head .muted { font-size: 11px; }
/* 展開指示：用 CSS 畫的 V 形，不依賴任何字型 */
.case-head .caret {
  flex: none;
  width: 6px; height: 6px;
  margin-left: 2px;
  border-right: 1.5px solid var(--dim);
  border-bottom: 1.5px solid var(--dim);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.case-head[aria-expanded="true"] .caret { transform: rotate(225deg) translate(-2px, -2px); }

.case-body { padding: 4px 14px 16px; border-top: 1px solid var(--seam); }
.case-body[hidden] { display: none; }
.case-body h3:first-child { margin-top: 14px; }

/* --- 判分明細 ------------------------------------------------ */

.rule {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid rgba(43, 36, 56, .6);
}
.rule:first-of-type { border-top: 0; }
/* 標記由 CSS 供字，取代原本的 ✅／❌／🟡——emoji 在缺字型的環境會變成豆腐格 */
.rule .mark {
  --c: var(--pass);
  flex: none;
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c);
  font-size: 10px;
  line-height: 1;
  transform: translateY(1px);
}
.rule .mark::before { content: "\2713"; }
.rule .mark.no { --c: var(--fail); }
.rule .mark.no::before { content: "\2715"; }
.rule .mark.warn { --c: var(--warn); }
.rule .mark.warn::before { content: "!"; font-weight: 700; }
.rule .rid { flex: none; font-size: 11px; color: var(--bone-2); }
.rule .rdetail { font-family: var(--sans); font-size: 12.5px; color: var(--dim); }
.rule.red-fail .rdetail { color: var(--bone-2); }
.rule.warn-fail .rdetail { color: var(--bone-2); }

/* --- 線上原文 ------------------------------------------------ */

pre {
  margin: 0;
  padding: 12px 14px;
  background: var(--well);
  border: 1px solid var(--seam);
  border-radius: var(--r);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--bone-2);
  white-space: pre-wrap;
  word-break: break-all;
  tab-size: 2;
}

/* --- 錢包關卡：即時 callback feed ---------------------------- */

.feed { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.feed > p { margin: 0; }
.feed-row {
  gap: 12px;
  padding: 7px 11px;
  border: 1px solid var(--seam);
  border-radius: 3px;
  background: var(--well);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.feed-row .at { flex: none; color: var(--dim); }
.feed-row .ep { flex: none; color: var(--bone); }
.feed-row .tx { flex: 1 1 90px; min-width: 0; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-row .amt { flex: none; color: var(--bone); }
.feed-row .rc { flex: none; color: var(--dim); }
.feed-row .fault {
  flex: none;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--fail) 45%, transparent);
  border-radius: 3px;
  color: var(--fail);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* 只有最後一行有動效：每次重繪只有真正剛到的那一筆是 :last-child */
.feed-row:last-child { animation: arrive .22s ease-out; }
@keyframes arrive { from { opacity: 0; transform: translateY(-5px); } }

/* --- 提示塊 -------------------------------------------------- */

.notice {
  --c: var(--seam-2);
  padding: 11px 14px;
  margin: 10px 0;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-left: 2px solid var(--c);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--c) 8%, transparent);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--bone);
}
.notice.warn { --c: var(--warn); }
.notice.error { --c: var(--fail); }
.notice.ok { --c: var(--pass); }

/* --- Toast --------------------------------------------------- */

#toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  max-width: 380px;
  padding: 12px 16px;
  background: var(--slab);
  border: 1px solid var(--seam-2);
  border-left: 2px solid var(--orchid);
  border-radius: var(--r);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  animation: arrive .2s ease-out;
}
#toast.error { border-left-color: var(--fail); }

/* --- 登入 ---------------------------------------------------- */

.login-wrap { max-width: 380px; margin: min(16vh, 120px) auto 40px; }
.login-brand { text-align: center; margin-bottom: 26px; }
.login-brand .brand-mark { width: 48px; height: 48px; margin: 0 auto 16px; font-size: 27px; border-radius: 6px; }
.login-brand strong {
  display: block;
  font: 500 14px/1 var(--mono);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.login-brand .muted { display: block; margin-top: 9px; font-family: var(--sans); font-size: 12px; }
.login-wrap .field + .field { margin-top: 14px; }
.login-wrap button[type="submit"] { width: 100%; margin-top: 20px; padding: 11px; }
.login-wrap p { margin-bottom: 20px; font-size: 12px; }

/* --- 鍵值表（整合設定） -------------------------------------- */

table.kv { width: 100%; border-collapse: collapse; }
table.kv td { padding: 11px 0; vertical-align: middle; border-top: 1px solid var(--seam); }
table.kv tr:first-child td { border-top: 0; }
table.kv td:first-child {
  width: 190px;
  padding-right: 16px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  vertical-align: middle;
}
table.kv code {
  display: block;
  padding: 6px 9px;
  border: 1px solid var(--seam);
  border-radius: 3px;
  background: var(--well);
  font-size: 11.5px;
  color: var(--bone);
  overflow-wrap: anywhere;
}
table.kv td.muted { font-family: var(--sans); font-size: 12.5px; }

/* --- 中文的字距 ---------------------------------------------- */

/* 全站的小字標籤靠寬字距撐開才讀得動，但那是拉丁字母的需求；方塊字被同樣的
   字距拉開只會散成一顆一顆。切到中文時把這些位置收回接近 0。 */
html[lang="zh-tw"] :is(
  h1, h2, h3, label, button, .badge, .pill, .wire,
  .brand-text strong, .login-brand strong, #nav a,
  .node .ph, .node .vd, .track-count, .ledger .go,
  .feed-row .fault, table.kv td:first-child
) { letter-spacing: .02em; }

/* --- 響應式 -------------------------------------------------- */

@media (max-width: 980px) {
  #topbar { height: auto; flex-wrap: wrap; gap: 0 20px; padding: 10px 16px; }
  /* 分頁列在窄螢幕是橫向捲動的；右緣淡出讓人看得出後面還有東西 */
  #nav {
    order: 3;
    width: 100%;
    border-top: 1px solid var(--seam);
    margin-top: 8px;
    mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  }
  #nav a { padding: 12px 10px; }
  #nav a.active::after { bottom: 0; }
  .topbar-right { margin-left: auto; }
  .brand-text .muted { display: none; }

  /* 路線改為直式：軌道走左側，圓點掛在線上 */
  .track-rail { flex-direction: column; gap: 2px; }
  .node { padding: 0 0 16px 24px; }
  .node::before { top: 6px; bottom: -2px; left: 5px; right: auto; width: 1px; height: auto; }
  .node:first-child::before { top: 6px; left: 5px; }
  .node:last-child::before { right: auto; bottom: auto; height: 0; border: 0; background: none; }
  .node.locked::before { border-top: 0; border-left: 1px dashed var(--seam-2); width: 0; }
  .node .dot { top: 1px; }
  .node .ph { margin-bottom: 0; margin-right: 8px; }
  .node .nm { display: inline; }
  .node .vd { display: inline; margin-left: 8px; }
}

@media (max-width: 640px) {
  main { padding: 20px 14px 70px; }
  .card { padding: 16px 14px; }
  h1 { font-size: 18px; }
  .case-head { flex-wrap: wrap; gap: 8px 10px; }
  .case-head .name { flex: 1 1 100%; order: 3; }
  table.kv td { display: block; border-top: 0; padding: 4px 0; }
  table.kv td:first-child { width: auto; padding-top: 12px; }
  table.kv tr + tr td:first-child { border-top: 1px solid var(--seam); }
  .ledger-row { flex-wrap: wrap; }
  .ledger-row .sub { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}