/* StockDiary 樣式。手機優先、深色、支援到特大字級。
   數字一律用 tabular-nums，否則金額欄位在不同位數之間會跳動。 */

:root {
  --font-scale: 1;
  --bg: #10161f;
  --bg-card: #18212e;
  --bg-card-2: #1e2836;
  --line: #2a3646;
  --fg: #e8eef6;
  --fg-muted: #93a3b8;
  --accent: #7ea9d6;
  --accent-strong: #a9cdf2;
  --gold: #f6c560;
  --danger: #e2706f;
  --radius: 14px;
  --pad: 16px;
  --tabbar-h: 58px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  font-size: calc(16px * var(--font-scale));
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

#app {
  min-height: 100vh;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

/* ---------- 頂列 ---------- */
#topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--pad) 10px;
  /* 不透明背景 ＋ 不用 backdrop-filter：深色主題下看不出差別，但少一層合成層，
     截圖與部分瀏覽器的 position:fixed 合成假影也一起消失。 */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

#topTitle {
  margin: 0;
  font-size: 1.05em;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.icon-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: 1.5em;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
}
.icon-btn:active { background: var(--bg-card-2); }

/* ---------- 內容 ---------- */
#view {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-title {
  margin: 0;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

.big-number {
  margin: 0;
  font-size: 2.1em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.muted { color: var(--fg-muted); margin: 0; }
.sm { font-size: 0.85em; }

.status-card { background: var(--bg-card-2); }

/* ---------- 表單與按鈕 ---------- */
.field {
  width: 100%;
  padding: 12px;
  font: inherit;
  color: var(--fg);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}

.btn {
  appearance: none;
  font: inherit;
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-card-2);
  color: var(--fg);
  cursor: pointer;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #0d1520; font-weight: 600; }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn:active { filter: brightness(0.92); }
/* 導覽用的按鈕是 <a>，瀏覽器預設會畫底線，而且是 inline ——
   同一張卡片裡「新增一檔」（button）置中沒底線、「管理定期定額計畫」（a）
   偏左又有底線，看起來像兩種東西。統一成同一個樣子。 */
a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

/* 一列右邊的操作按鈕（修改／停用／刪除）。沒有版型的話，
   列首多一個標籤就會把整組按鈕擠到下一行，每一列對不齊。 */
.row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1 0 100%;        /* **固定自成一行**：列首多一個標籤就換行的話，每一列會對不齊 */
  justify-content: flex-end;
  margin-top: 2px;
}
/* 這一排裡如果有輸入框（查代號、貼金鑰），讓輸入框去撐，按鈕維持自己的寬度。
   不設的話按鈕會被擠成一個字一行（「查／詢」直著排）。 */
.row-actions > .field,
.row-actions > input { flex: 1 1 auto; min-width: 0; }
.row-actions > .btn { flex: 0 0 auto; white-space: nowrap; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  appearance: none;
  font: inherit;
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-card-2);
  color: var(--fg);
  cursor: pointer;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #0d1520; font-weight: 600; }

/* ---------- 底部分頁 ---------- */
#tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tabbar-h);
  text-decoration: none;
  color: var(--fg-muted);
  font-size: 0.75em;
  padding: 6px 4px;
}
.tab.on { color: var(--accent-strong); }
.tab-icon { font-size: 1.45em; line-height: 1; }
.tab-label { line-height: 1.2; text-align: center; }

/* ---------- 等待、提示、對話框 ---------- */
.wait-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 16px;
}
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wait-text { margin: 0; color: var(--fg-muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
}

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 10px);
  z-index: 60;
  max-width: min(88vw, 420px);
  padding: 12px 18px;
  border-radius: 12px;
  background: #26364a;
  border: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(6, 10, 16, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.modal-card {
  position: relative;
  width: min(94vw, 460px);
  max-height: 86vh;
  overflow: auto;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-title { margin: 0; font-size: 1.1em; }
.modal-body { overflow-wrap: anywhere; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal-x { position: absolute; top: 6px; right: 6px; }

/* ---------- 換版提示 ---------- */
.update-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #26364a;
  border: 1px solid var(--line);
  flex-wrap: wrap;
}
.update-text { flex: 1; min-width: 0; }
.update-go {
  appearance: none;
  font: inherit;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  min-height: 40px;
  background: var(--accent);
  color: #0d1520;
  font-weight: 600;
  cursor: pointer;
}
.update-later {
  appearance: none;
  font: inherit;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
}

/* ---------- 數字、漲跌、清單列（M1） ---------- */

/* 所有「報價相關的數字」都包在 .num 裡。測試靠這個 class 斷言
   「不支援報價的持股，那一列連一個 .num 都沒有」。 */
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 漲跌顏色：台股習慣紅漲綠跌。AI 文字區塊不用這組顏色（PLAN §7.2）。 */
.v-up { color: #ff8080; }
.v-down { color: #6fd3a4; }
.v-flat { color: var(--fg); }
.v-none { color: var(--fg-muted); }

.mid-number {
  margin: 0;
  font-size: 1.5em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.warn { color: var(--gold); }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  font-size: 0.78em;
  color: var(--fg-muted);
  white-space: nowrap;
}
.tag-warn { color: var(--gold); border-color: var(--gold); }

.rows { display: flex; flex-direction: column; }

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  min-height: 52px;
}
.rows > .row:first-child { border-top: 0; }

/* ---------- 持股列：兩欄格線 ----------
 *
 * 為什麼不用 flex：.row 是 flex-wrap，左側寬度不固定（代號 4 或 5 碼、
 * 名稱 2～7 字、有沒有產業標籤），只要左側撐開一點，**右側的損益整組就被擠到下一行**。
 * 七列裡有幾列變成兩倍高、對不齊 —— 使用者回報的「跑版」就是這個。
 *
 * 格線把右側變成**自己的欄**：左欄多寬都不影響右欄的位置，
 * 而左欄超過寬度是自己處理（截斷），不會去推右欄。
 */
.row-holding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
}
.row-holding .row-head { grid-column: 1; grid-row: 1; flex-wrap: nowrap; min-width: 0; }
.row-holding .row-mid  { grid-column: 1; grid-row: 2; min-width: 0; }
.row-holding .row-side { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; }

/* 左欄自己處理溢出：名字先被截斷，代號與產業標籤保持完整 ——
   名字截掉還看得出是哪一檔，代號截掉就認不出來了。 */
.row-holding .row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.row-holding .row-code,
.row-holding .tag { flex: 0 0 auto; }
/* 4 碼與 5 碼代號要對齊（0050 / 00878）。tabular-nums 讓每個數字等寬，
   min-width 讓 4 碼佔到跟 5 碼一樣的位置。 */
.row-holding .row-code { min-width: 5ch; }
.row-holding .row-mid,
.row-holding .row-side { white-space: nowrap; }

/* 每一列的高度要一樣。產業標籤（.tag 有 padding 與外框）會把第一行撐高 3px，
   於是有標籤的列比沒標籤的高 —— 七列擺在一起就看得出參差。
   給兩行各一個固定的最小高度，有沒有標籤都落在同一個總高。 */
.row-holding .row-head { min-height: 26px; }
/* 第二行的「均價」要對齊：股數的字數不一樣（3,000 股 vs 10,000 股），
   不給寬度的話每一列的均價都從不同的位置開始。 */
.row-holding .row-shares { display: inline-block; min-width: 8ch; }
/* 最窄的機型（SE）配特大字級時，左欄那條對齊用的 min-width 會把「均價」推進
   右欄的位置，兩行數字疊在一起（layouttest 抓到，320px × 特大）。
   對齊是錦上添花，讀得到數字才是必要的 —— 空間不夠就先放棄對齊。 */
@media (max-width: 360px) {
  .row-holding .row-shares { min-width: 0; }
}
/* nowrap 的內容超出格線欄位時預設不會被裁掉，會直接畫到隔壁欄上。
   讓它在自己的欄位裡截斷 —— 但截斷是最後手段，下面先把空間讓出來。 */
.row-holding .row-head,
.row-holding .row-mid { overflow: hidden; text-overflow: ellipsis; }

/* 最窄的機型（SE 320px）配大／特大字級時，左欄真的放不下「股數 ＋ 均價」，
   均價會被推到右欄的數字上。**寧可不顯示，也不要疊或截斷** ——
   均價在單檔詳情頁看得到，當日損益才是這一頁的主角。 */
@media (max-width: 360px) {
  :root[data-font-scale='lg'] .row-holding .row-avg,
  :root[data-font-scale='xl'] .row-holding .row-avg,
  /* 產業標籤同理：它是 flex: 0 0 auto，不會縮，名字截斷了它照樣把自己
     推到右欄的數字上。產業別在單檔詳情與產業分布都看得到。 */
  :root[data-font-scale='lg'] .row-holding .tag,
  :root[data-font-scale='xl'] .row-holding .tag { display: none; }
}
.row-holding .row-mid { min-height: 20px; }
.row-holding .tag { line-height: 1.25; }

.row-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.row-code { font-weight: 700; font-variant-numeric: tabular-nums; }
.row-name { color: var(--fg-muted); overflow-wrap: anywhere; }
.row-mid { flex: 0 0 auto; }
.row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}

/* .link-btn 已移除（v0.7.4）：底線文字連結當按鈕點擊區太小、基線對不齊，
   全 App 統一用 .btn / .btn-sm。留著只會被人再撿去用。 */

.form { display: flex; flex-direction: column; gap: 6px; }
.form label { margin-top: 6px; }
.form-hint { margin: 0; }
.preview { min-height: 1.6em; }
.preview p { margin: 4px 0; }

/* ---------- 設定頁的開關列（M2） ---------- */
.pref-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.card > .pref-row:first-of-type { border-top: 0; }

/* 瀏覽器預設的勾選框只有 13px。整個 .pref-row（label）都點得到，
   但那個框小到看不清楚也瞄不準 —— 而它守的是「匯入會蓋掉現在的資料」
   與「啟用今日觀察」這兩個不可隨便按的動作。 */
.pref-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--accent);
}

/* 原生的檔案選擇器只有 25px 高，而且長得跟 App 裡其他東西完全不一樣。
   給它一個跟按鈕一致的外框與高度。 */
input[type="file"] {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--bg-card-2);
  color: var(--fg);
  font: inherit;
}
input[type="file"]::file-selector-button {
  font: inherit;
  margin-right: 10px;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--fg);
}
.pref-main { flex: 1 1 60%; min-width: 0; }
.pref-label { margin: 0 0 4px; font-weight: 600; }

/* 小一號的按鈕：**視覺上小一點，觸控區不准小**。
   36px 是實測量到的（低於 44px 的門檻），而它正好用在最常按的那幾顆：
   確認扣款、確認股利、取消確認、修改、停用。 */
.btn-sm { padding: 6px 12px; min-height: 44px; font-size: 0.9em; }

/* ---------- 首頁頂部提示（M2） ---------- */
.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--pad);
  border-radius: var(--radius);
  background: #2a3348;
  border: 1px solid var(--gold);
  text-decoration: none;
  color: inherit;
  min-height: 56px;
}
.banner-icon { font-size: 1.4em; line-height: 1; flex: 0 0 auto; }
.banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.banner-sub { display: block; }
.banner-go { font-size: 1.5em; line-height: 1; color: var(--fg-muted); flex: 0 0 auto; }

/* 清單列底下的整行說明（除權息的細節句子會很長） */
.row-note {
  flex: 1 1 100%;
  margin: 0;
  order: 10;
  overflow-wrap: anywhere;
}

/* ---------- 試算器（M4） ---------- */
.disclaimer {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-card-2);
  border-left: 3px solid var(--gold);
  line-height: 1.55;
}

.calc-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.calc-field label { display: block; }
.field-error { border-color: var(--danger); }

.scenarios { display: flex; flex-wrap: wrap; gap: 12px; }
.scenario {
  flex: 1 1 240px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card-2);
}
.scenario-title { margin: 0 0 2px; font-size: 1em; }

.kv { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.kv-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }

/* 逐年長條圖。不用紅綠 —— 這裡沒有漲跌，只有「投入」與「市值」 */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  padding-top: 8px;
  overflow-x: auto;
}
.chart-col { flex: 1 1 0; min-width: 14px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chart-bars { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; }
.chart-bar { position: absolute; bottom: 0; width: 100%; border-radius: 3px 3px 0 0; }
.chart-bar-value { background: var(--accent); }
.chart-bar-invested { background: var(--fg-muted); opacity: 0.85; width: 55%; left: 22.5%; }
.chart-label { font-size: 0.7em; color: var(--fg-muted); margin-top: 4px; }
.legend { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.legend-value { background: var(--accent); }
.legend-invested { background: var(--fg-muted); }

.table-wrap { overflow-x: auto; margin-top: 8px; }
table.yearly { border-collapse: collapse; width: 100%; font-size: 0.85em; }
table.yearly th, table.yearly td { padding: 6px 8px; text-align: right; white-space: nowrap; border-top: 1px solid var(--line); }
table.yearly th:first-child, table.yearly td:first-child { text-align: left; }
table.yearly th { color: var(--fg-muted); font-weight: 600; }

/* ---------- 新聞與今日觀察 ---------- */

/* 整張卡片就是一個連結（總覽上的新聞入口） */
.card-link { display: block; text-decoration: none; color: inherit; }

/* 卡片裡的小標。比 card-title 小一級，不搶版面 */
.sub-title { margin: 14px 0 6px; font-size: .95rem; font-weight: 600; color: var(--fg); }

/* .row 帶了 align-items: center，套在這個直向排列上會把每一行**水平置中** ——
   一串標題置中很難掃。標題與來源一律靠左。 */
.news-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-decoration: none;
  color: inherit;
}
.news-title { line-height: 1.45; }

/* 「引用：[n1] [n5]」是內文裡的小連結。字要維持小，但觸控區要夠 ——
   用 padding 撐開、負 margin 推回去，版面不變、按得到。 */
.news-ref {
  display: inline-block;
  padding: 12px 6px;
  /* 只往上下擴，**左右不要用負的 margin** —— 相鄰兩個引用的觸控區會互相疊到，
     點在中間會開到錯的那一則（layouttest 掃出來的，疊了 4px）。 */
  margin: -12px 0;
}

/* 今日觀察的文字**刻意不用紅綠色、不用箭頭**（PLAN §7.2）：
   那些是漲跌的視覺語言，套在 AI 的文字上會讓它讀起來像多空判斷。
   這裡只用一般的前景色與行距。 */
.insight-summary { line-height: 1.6; }
.insight-section { margin-top: 10px; }
.insight-section p { line-height: 1.6; }

/* ---------- 產業集中度（M6） ---------- */
/* 條狀圖用 CSS 寬度畫，不用圖表庫：特大字級時它跟著文字一起長，
   不會像 canvas 那樣被壓成一團。 */
.bars { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.bar-row { display: flex; flex-direction: column; gap: 4px; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bar-label { overflow-wrap: anywhere; }
.bar-pct { flex: none; font-variant-numeric: tabular-nums; }
.bar-track { height: .55em; min-height: 6px; border-radius: 999px; background: var(--bg-card-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--gold); }

/* 可收合清單的標題列。整條都是按鈕，特大字級時也好按。 */
.collapse-head {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.collapse-head .card-title { margin: 0; }
.collapse-mark { flex: none; color: var(--muted); font-size: .85em; }

/* ---------- 切換開關（v0.7.4，全 App 統一） ----------
   原本各處是「膠囊按鈕上寫開啟／關閉」，使用者回報看不出現在是哪一邊：
   寫「開啟」到底是目前開著、還是按了會開？軌道＋滑塊沒有這個歧義。 */
.switch {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
}
.switch-track {
  position: relative;
  display: block;
  width: 52px;
  height: 32px;
  flex: none;
  border-radius: 999px;
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  transition: background .15s ease, border-color .15s ease;
}
.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .15s ease, background .15s ease;
}
.switch.on .switch-track { background: var(--accent); border-color: var(--accent); }
.switch.on .switch-knob { transform: translateX(20px); background: #0d1520; }
.switch.on { color: var(--fg); }
.switch-state { font-size: .85em; min-width: 1.2em; }

/* 時／分下拉。不用 <input type="time">：iOS 會把它拉滿整個卡片寬度、
   文字置中，而且空值時顯示當下時間（看起來像已經設好了）。 */
.time-select { display: flex; align-items: center; gap: 6px; }
.field-inline { width: auto; min-width: 4.5em; }
.time-colon { color: var(--muted); }