/* 水庫流向：安靜的水利立面圖。淺暖紙色、一條細地面線、池壁是簡單的實線、水是平塗色塊（ATLAS 琥珀、USDC 青藍）。
   整張圖沒有紋理；圖上的字直接標在結構邊上（沒有框），只有「Galaxy 月報」與 5% 規則牌兩塊牌子。
   全部掛在 .mode-reservoir 或 body[data-view="reservoir"] 底下，切到別的模式就失效。 */

.mode-reservoir {
  --rv-paper: #F6F4EE;
  --rv-card: #FBFAF7;
  --rv-ink: #22262B;
  --rv-ink-2: #464B52;
  --rv-ink-3: #5B6066;
  --rv-line: #3A4047;
  --rv-edge: #B5AEA1;
  --rv-faint: #BDB7AB;
  --rv-rule: #E3DED3;
  --rv-atlas: #F0BA62;
  --rv-atlas-line: #B36D04;
  --rv-atlas-ink: #7A4800;
  --rv-usdc: #93CAD8;
  --rv-usdc-line: #26839B;
  --rv-usdc-ink: #155B6C;
  --rv-blue: #2F5DA8;
  color: var(--rv-ink);
  background: var(--rv-paper);
  font: 500 15px/1.45 ui-sans-serif, system-ui, -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
}
.mode-reservoir *, .mode-reservoir *::before, .mode-reservoir *::after { box-sizing: border-box; }
.mode-reservoir .num { font-variant-numeric: tabular-nums lining-nums; }
.mode-reservoir :focus-visible { outline: 2.5px solid var(--rv-blue); outline-offset: 2px; border-radius: 2px; }
.mode-reservoir button { font: inherit; }

/* ── 刊頭：跟背景同一張紙（高度與排版不動）── */
body[data-view="reservoir"] .ld-mast { background: #ECE9E1; border-bottom: 1px solid #CEC8BB; box-shadow: none; }
body[data-view="reservoir"] .mast-title, body[data-view="reservoir"] .mast-sa { color: #22262B; }
body[data-view="reservoir"] .mast-db { color: #7A4800; }
body[data-view="reservoir"] .mast-sub { color: #464B52; }
body[data-view="reservoir"] :is(.mast-btn, .mast-tables, .mast-modes) { color: #22262B; background: #FBFAF7; border: 1px solid #A29B8D; box-shadow: none; }
body[data-view="reservoir"] :is(.mast-btn, .mast-tables, .mast-modes):hover { background: #FFFFFF; border-color: #6F695E; }
body[data-view="reservoir"] .mast-select {
  color: #22262B; border: 1px solid #A29B8D;
  background-image: linear-gradient(45deg, transparent 50%, #3A4047 50%), linear-gradient(135deg, #3A4047 50%, transparent 50%), linear-gradient(180deg, #FBFAF7, #FBFAF7);
}
body[data-view="reservoir"] .ld-mast :focus-visible { outline: 2.5px solid #2F5DA8; outline-offset: 2px; }

/* ── 版面 ── */
.rv-sheet { margin: 0 auto; min-width: 0; }
.rv-left, .rv-stage, .rv-panel { min-width: 0; }
.rv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.rv-title { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 800; }
.rv-sub { margin: 0; flex: 1 1 380px; min-width: 0; font-size: 13.5px; line-height: 1.4; color: var(--rv-ink-2); }

/* 桌機：一屏放完。左邊圖（依可用的寬與高縮放，比例固定）＋月份列，右邊讀數欄（內容太長時只捲讀數欄）。 */
body[data-mode="desk"] .rv-sheet.is-wide {
  height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 400px); gap: 16px; padding: 12px 16px 14px; max-width: 1760px;
}
body[data-mode="desk"] .rv-left { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; min-height: 0; }
body[data-mode="desk"] .rv-stage { container-type: size; min-height: 0; }
body[data-mode="desk"] .rv-draw { width: min(100cqw, calc(100cqh * var(--arn))); margin: 0 auto; }
body[data-mode="desk"] .rv-panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* 平板：圖在上、讀數在下（讀數分兩欄）。 */
body[data-mode="tab"] .rv-sheet.is-wide { display: grid; gap: 14px; padding: 12px 16px 28px; max-width: 1000px; }
body[data-mode="tab"] .rv-left { display: grid; gap: 8px; }
body[data-mode="tab"] .rv-panel:not(.is-part) .rv-pbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px; align-items: start; }
body[data-mode="tab"] .rv-panel:not(.is-part) .rv-ph { grid-column: 1 / -1; }
/* 手機：單欄。 */
.rv-sheet.is-narrow { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 28px; max-width: 640px; }

/* ── 立面圖 ── */
.rv-draw { min-width: 0; }
.rv-frame { position: relative; aspect-ratio: var(--ar); container-type: inline-size; }
.rv-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.rv-svg .rv-ground { fill: none; stroke: var(--rv-line); stroke-width: 1.4; stroke-linejoin: round; }
.rv-svg .rv-wall { fill: none; stroke: var(--rv-line); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.rv-svg .rv-wall.is-in { stroke-width: 1.8; }
.rv-svg .rv-post { stroke: #9A9488; stroke-width: 2; stroke-linecap: round; }
.mode-reservoir .rv-w.is-atlas { fill: var(--rv-atlas); }
.mode-reservoir .rv-w.is-usdc { fill: var(--rv-usdc); }
.rv-svg .rv-surf { fill: none; stroke-width: 1.8; }
.rv-svg .rv-surf.is-atlas { stroke: var(--rv-atlas-line); }
.rv-svg .rv-surf.is-usdc { stroke: var(--rv-usdc-line); }
.rv-svg .rv-vmark { fill: var(--rv-paper); stroke: var(--rv-line); stroke-width: 1.3; stroke-linejoin: round; }
.rv-svg .rv-vline { fill: none; stroke-width: 1.3; stroke-linecap: round; }
.rv-svg .rv-vline.is-atlas { stroke: var(--rv-atlas-ink); }
.rv-svg .rv-vline.is-usdc { stroke: var(--rv-usdc-ink); }
.rv-svg .rv-pipe { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rv-svg .rv-pipe.is-atlas { stroke: var(--rv-atlas-line); }
.rv-svg .rv-pipe.is-usdc { stroke: var(--rv-usdc-line); }
.rv-svg .rv-arrow.is-atlas { fill: var(--rv-atlas-line); }
.rv-svg .rv-arrow.is-usdc { fill: var(--rv-usdc-line); }
.rv-svg .rv-ghost { fill: none; stroke: var(--rv-faint); stroke-width: 1.3; stroke-dasharray: 4 4; stroke-linecap: round; stroke-linejoin: round; }
.rv-svg .rv-trough { fill: none; stroke: var(--rv-line); stroke-width: 1.8; stroke-linejoin: round; }
.rv-svg .rv-trough.is-possible { stroke-dasharray: 5 3.5; }
.rv-svg .rv-up { fill: none; stroke: var(--rv-line); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rv-svg .rv-grate { fill: var(--rv-card); stroke: var(--rv-line); stroke-width: 1.6; }
.rv-svg .rv-slit { stroke: var(--rv-line); stroke-width: 1.4; stroke-linecap: round; }
.rv-svg .rv-hit { fill: transparent; }
.rv-svg [data-part] { cursor: pointer; }
.rv-svg .rv-hl { fill: rgba(47, 93, 168, .06); stroke: var(--rv-blue); stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }

/* 圖上的字：沒有框，直接標在結構邊上；字級跟著圖寬（不小於 11px）。空白處不擋住底下的點擊範圍。 */
.rv-ov { position: absolute; inset: 0; pointer-events: none; font-size: clamp(11px, 1.3cqw, 15px); line-height: 1.3; }
.is-narrow .rv-ov { font-size: clamp(11px, 3.5cqw, 13.5px); }
.rv-lab { position: absolute; min-width: 0; overflow-wrap: break-word; }
/* 不用自動斷字：會把 ATLAS 斷成 AT-LAS；真的放不下的長字才在任意處換行。 */
.rv-lab.is-center { text-align: center; }
.rv-lab.is-mid { transform: translateY(-50%); }
.rv-lab button, .rv-board, .rv-plate { pointer-events: auto; }
.rv-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em; min-width: 0; }
.rv-row > * { min-width: 0; max-width: 100%; }
/* 部件名稱是一個長字時（法文 Réapprovisionnement）才斷字，不撐出自己的欄。 */
.rv-lab .rv-nm, .rv-oc .rv-nm { max-width: 100%; hyphens: auto; overflow-wrap: break-word; }
.is-center .rv-row { justify-content: center; }
.rv-sm { font-size: .86em; line-height: 1.3; color: var(--rv-ink-2); font-weight: 500; }
.rv-name .rv-nm { font-size: 1.06em; font-weight: 800; }
.rv-inwater .rv-sm { color: var(--rv-ink-2); font-weight: 600; }
/* 水裡的幣別字用深一階的灰，琥珀與青藍底上才有 4.5:1。 */
.mode-reservoir .rv-inwater .ev .unit { color: var(--rv-ink-2); }
.rv-inwater.is-tight .ev { font-size: .94em; }
.rv-capl .rv-sm, .rv-gnote .rv-sm { font-size: .8em; color: var(--rv-ink-3); }
.rv-flow .rv-row + .rv-row { margin-top: .1em; }
.rv-tlab { text-align: center; }
.rv-tlab .rv-row { justify-content: center; }
.rv-tlab .rv-row + .rv-row { margin-top: .05em; }
.rv-sm.is-warn { color: #7A4600; }
.rv-sm.is-state { color: #8A3B12; font-weight: 600; }
.rv-empty { text-align: center; }
.rv-empty .rv-gap { justify-content: center; }

/* 部件名稱：按了在讀數欄看說明。 */
.rv-nm {
  appearance: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: inherit;
  color: var(--rv-ink); font-weight: 700; border-bottom: 1px solid rgba(34, 38, 43, .3); line-height: 1.25;
}
.rv-nm:hover { color: var(--rv-blue); border-bottom-color: var(--rv-blue); }
.rv-nm.is-sel { color: var(--rv-blue); border-bottom: 2px solid var(--rv-blue); }

/* 兩塊牌子：Galaxy 月報、5% 規則牌。 */
.rv-board, .rv-plate { background: var(--rv-card); border: 1px solid var(--rv-edge); border-radius: 4px; padding: .45em .65em .5em; }
.rv-board.is-sel, .rv-plate.is-sel { border-color: var(--rv-blue); box-shadow: 0 0 0 1px var(--rv-blue); }
.rv-board .rv-row + .rv-row, .rv-plate .rv-row + .rv-row { margin-top: .12em; }
.rv-board .rv-row:nth-child(2) { margin-bottom: .2em; }
.rv-ak { min-width: 3.3em; font-size: .82em; font-weight: 700; color: var(--rv-ink-3); }
.rv-pk { font-size: .9em; color: var(--rv-ink-2); }
.rv-pfoot { color: var(--rv-ink-3); }
.rv-plate.is-flow { font-size: 14px; }

/* 證據按鈕：數字本身，虛線底線表示可點。 */
.mode-reservoir .ev { font-size: 1em; font-weight: 700; color: var(--rv-ink); border-bottom: 1px dashed rgba(34, 38, 43, .5); padding: 0 1px; line-height: 1.25; }
.mode-reservoir .ev:hover { border-bottom-style: solid; background: rgba(47, 93, 168, .08); }
.mode-reservoir .ev .unit { font-size: .76em; font-weight: 600; color: var(--rv-ink-3); }
.mode-reservoir .ev.rv-big { font-size: 1.2em; }
.mode-reservoir .rv-lab .ev { white-space: normal; }
.rv-amts { display: inline-flex; flex-direction: column; align-items: center; gap: .05em; }
.rv-amt { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 .25em; }
.rv-plus, .rv-cnt { color: var(--rv-ink-2); font-size: .9em; }
.rv-sum { font-weight: 700; }
.rv-sum .unit { font-size: .76em; font-weight: 600; color: var(--rv-ink-3); }

/* 缺值：小符號＋文字，不鋪底色。 */
.rv-gap { display: inline-flex; align-items: baseline; gap: .3em; color: var(--rv-ink-2); font-weight: 500; font-size: .93em; line-height: 1.3; }
.rv-gap > span { min-width: 0; }
.rv-gi { flex: none; align-self: center; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.rv-gap.is-faint { color: var(--rv-ink-3); font-size: .86em; }

/* 手機：出口的名稱與金額在圖下面一列。 */
.rv-outrow { display: flex; margin-top: 2px; font-size: 12.5px; line-height: 1.3; }
.rv-outrow .rv-gap.is-faint { font-size: .96em; }
.rv-oc { flex: none; padding: 0 3px; text-align: center; min-width: 0; overflow-wrap: break-word; }
.rv-oc .rv-row { justify-content: center; }
.rv-oc .ev { white-space: normal; }
.rv-capnote { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--rv-ink-3); }
.rv-summary { margin: 0; font-size: 15px; line-height: 1.5; }

/* ── 月份列 ── */
.rv-time-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rv-step {
  appearance: none; width: 34px; height: 32px; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer;
  color: var(--rv-ink); background: var(--rv-card); border: 1px solid var(--rv-edge); border-radius: 6px;
}
.rv-step:hover { background: #FFFFFF; border-color: #6F695E; }
.rv-chev { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rv-month { margin: 0; min-width: 7.6em; text-align: center; font-size: 17px; line-height: 1.2; font-weight: 800; }
.rv-key { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12.5px; color: var(--rv-ink-2); }
.rv-key .rv-sw:not(:first-of-type) { margin-left: 6px; }
.rv-strip { margin-top: 6px; }
.rv-strip-in { position: relative; }
.rv-cells { display: grid; grid-template-columns: repeat(var(--n, 42), minmax(0, 1fr)); height: 30px; border-bottom: 1.4px solid var(--rv-line); }
.rv-cell { appearance: none; position: relative; display: block; height: 100%; margin: 0; padding: 0; cursor: pointer; background: transparent; border: 0; border-left: 1px solid rgba(58, 64, 71, .12); border-radius: 0; }
.rv-cell:first-child { border-left: 0; }
.rv-cell.is-uncap { background: rgba(58, 64, 71, .05); }
.rv-cell:hover { background: rgba(47, 93, 168, .08); }
.rv-cell.is-on { background: rgba(47, 93, 168, .14); box-shadow: inset 0 0 0 2px var(--rv-blue); z-index: 1; }
.rv-cell:focus-visible { outline-offset: -2px; z-index: 2; }
.rv-bars { position: absolute; left: 0; right: 0; bottom: 0; height: 15px; display: flex; justify-content: center; align-items: flex-end; gap: 2px; pointer-events: none; }
.rv-bars i { display: block; width: 4px; height: 100%; border-radius: 1px 1px 0 0; }
.rv-bars i.is-atlas { background: var(--rv-atlas-line); }
.rv-bars i.is-usdc { background: var(--rv-usdc-line); }
.rv-uncap-label {
  position: absolute; left: 0; top: 0; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
  font-size: 12px; line-height: 1.15; color: var(--rv-ink-3); text-align: center; pointer-events: none;
}
.rv-years { position: relative; height: 17px; font-size: 12px; font-weight: 600; color: var(--rv-ink-3); }
.rv-year { position: absolute; top: 2px; padding-left: 3px; border-left: 1px solid var(--rv-line); line-height: 1.1; }
.is-narrow .rv-strip { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 2px; }
.is-narrow .rv-strip-in { min-width: calc(var(--n, 42) * 22px); }
.is-narrow .rv-month { flex: 1 1 auto; min-width: 0; }
.is-narrow .rv-key { flex-basis: 100%; margin-left: 0; }

/* ── 讀數欄 ── */
.rv-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; background: var(--rv-card); border: 1px solid var(--rv-rule); border-radius: 8px; }
.rv-pbody { min-width: 0; }
.rv-ph { margin-bottom: 4px; }
.rv-kicker { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--rv-ink-3); }
.rv-ptitle { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; }
.rv-ptitle:focus { outline: none; }
.rv-ptitle:focus-visible { outline: 2.5px solid var(--rv-blue); }
.rv-back {
  appearance: none; margin: 0 0 8px; padding: 4px 10px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--rv-ink);
  background: var(--rv-paper); border: 1px solid var(--rv-edge); border-radius: 6px;
}
.rv-back:hover { background: #FFFFFF; border-color: #6F695E; }
.rv-sec { min-width: 0; }
.rv-sec-tx { margin-top: 8px; }
.rv-kv { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 5px 0; border-top: 1px solid var(--rv-rule); }
.rv-k { flex: 1 1 8.5em; min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--rv-ink-2); overflow-wrap: anywhere; hyphens: auto; }
.rv-v { flex: 0 1 auto; margin-left: auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-size: 15px; }
.rv-al { display: inline-flex; align-items: baseline; gap: 6px; }
.rv-sw { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 2px; }
.rv-sw.is-atlas { background: var(--rv-atlas); box-shadow: inset 0 0 0 1px var(--rv-atlas-line); }
.rv-sw.is-usdc { background: var(--rv-usdc); box-shadow: inset 0 0 0 1px var(--rv-usdc-line); }
.rv-h4 { margin: 4px 0 2px; font-size: 14px; font-weight: 800; }
.rv-txs { list-style: none; margin: 0; padding: 0; }
.rv-tx { padding: 5px 0; border-top: 1px solid var(--rv-rule); }
.rv-tx-a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.rv-tx-date { min-width: 3.4em; font-size: 12.5px; font-weight: 700; color: var(--rv-ink-3); }
.rv-tx-a .rv-al { font-size: 15px; }
.rv-tx-b { margin: 1px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--rv-ink-2); overflow-wrap: anywhere; }
.rv-chip { margin-left: auto; padding: 0 .45em; border: 1px solid; border-radius: 3px; font-size: 11.5px; font-weight: 700; line-height: 1.55; white-space: normal; }
.rv-chip.ok { color: #24603A; border-color: #6FA483; background: #EDF5EF; }
.rv-chip.warn { color: #6E4100; border-color: #C29243; border-style: dashed; background: #FCF2DF; }
.rv-chip.plain { color: var(--rv-ink-2); border-color: #B3AEA4; background: #F1EEE7; }
.rv-chip.muted { color: var(--rv-ink-2); border-color: #C7C2B8; background: #FFFFFF; }
.rv-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.rv-link { appearance: none; margin: 0; padding: 2px 0; border: 0; background: none; cursor: pointer; text-align: left; font-size: 13.5px; font-weight: 700; color: var(--rv-blue); border-bottom: 1px solid transparent; }
.rv-link:hover { border-bottom-color: currentColor; }
.rv-pipbtn { appearance: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font-size: inherit; font-weight: 700; color: var(--rv-blue); border-bottom: 1px solid rgba(47, 93, 168, .35); }
.rv-pipbtn:hover { border-bottom-color: currentColor; }
.rv-p { margin: 6px 0; font-size: 14px; line-height: 1.5; }
.rv-note { margin: 6px 0; font-size: 13px; line-height: 1.45; color: var(--rv-ink-2); }
.rv-dim { color: var(--rv-ink-2); font-size: .92em; }
.rv-pip { padding: 6px 0 2px; border-top: 1px solid var(--rv-rule); }
.rv-pip-title { margin: 0 0 2px; font-size: 14px; line-height: 1.35; }
.rv-pip .rv-kv { border-top: 0; padding: 3px 0; }
.rv-hist { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 2px; }
.rv-hist li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.rv-table-wrap { overflow-x: auto; margin: 8px 0; }
.rv-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.35; }
.rv-table th, .rv-table td { padding: 5px 7px; border: 1px solid var(--rv-rule); text-align: left; vertical-align: top; }
.rv-table th { font-weight: 700; background: #F1EEE7; }
.rv-pfootbox { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--rv-rule); }
.rv-run > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; padding: 2px 0; }
.rv-run > summary::-webkit-details-marker { display: none; }
.rv-run > summary::before { content: ""; flex: none; width: 0; height: 0; border-left: 6px solid var(--rv-ink-2); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.rv-run[open] > summary::before { transform: rotate(90deg); }
.rv-run > summary:hover { color: var(--rv-blue); }
.rv-meta { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.4; color: var(--rv-ink-3); }

/* ── 動態：換月時淡入一次；閒置不動；動態關掉就全拿掉 ── */
@keyframes rv-in { from { opacity: .3; } to { opacity: 1; } }
body[data-motion="on"] .mode-reservoir .rv-fresh { animation: rv-in .22s ease-out; }
body[data-motion="on"] .mode-reservoir :is(.rv-cell, .rv-nm, .rv-step, .rv-link, .rv-back) { transition: background-color .12s, color .12s, border-color .12s; }
body[data-motion="off"] .mode-reservoir *, body[data-motion="off"] .mode-reservoir *::before { transition: none !important; animation: none !important; }

@media (pointer: coarse) {
  .rv-step { width: 44px; height: 40px; }
  .rv-cells { height: 40px; }
  .rv-uncap-label { height: 40px; }
}
/* 螢幕報讀器的即時區塊：釘在左上角，不撐出捲動高度。 */
.mode-reservoir > .sr-only { top: 0; left: 0; margin: 0; }