/* ── TAEROSPACE design system: Y2K plastic + Braun industrial on milky grey (day tone) ──
   Milky-grey plastic surfaces (rounded, glossy inset edge) with Braun-style mono micro-labels, dials
   and tick scales. Colour roles, kept strictly separate so they never fight:
     orange  (--accent)  = active / selected only (mode button, tab underline, target needle, LED)
     bondi   (--data)    = data series (allocation, dial fill, routes, flown time strips)
     green / red / amber = gain-loss and status only */
:root {
  color-scheme: light;
  --bg: #E4E6E3;
  --panel: #F1F3F1;
  --panel-2: #DDE5E7;
  --border: #C9CFD0;
  --track: #D5DDE0;
  --text: #2A2E2D;
  --text-dim: #6A7473;
  --accent: #EC5F16;        /* orange fill — white text on it stays >=3:1 at the bold sizes used */
  --accent-text: #B93E08;   /* orange for text on light surfaces (contrast >=5:1) */
  --data: #1FA2B8;          /* bondi teal — data series */
  --data-deep: #157C90;     /* bondi for fills that carry white text */
  --magenta: #B5387F;
  --amber: #A8690A;
  --green: #1F8A5E;
  --red: #C8402F;
  --plastic: inset 0 2px 0 #fff, inset 0 -2px 0 rgba(0,0,0,0.05);
  --gloss: inset 0 2px 0 rgba(255,255,255,0.45);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, .brand, .tabs-caption, .mode-btn {
  font-family: "Saira Semi Condensed", "IBM Plex Sans", sans-serif;
}

.hero-value, .value, td.num, .num, table, code, pre {
  font-variant-numeric: tabular-nums;
}
.hero-value, .value {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.topbar {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* แถวที่ 1 — brand + mode switch (ระดับบนสุด, เลือก "อยู่โซนไหน") */
.topbar-row1 {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  flex-wrap: wrap;
}

.brand { font-weight: 700; font-size: 1.35rem; letter-spacing: 0.14em; display: flex; align-items: center; gap: 12px; }
.brand::after {
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--border);
}

/* Top-level mode switch (Investment / Personal Finance) — pill ทึบ, น้ำหนักภาพชัดกว่า .tab
   ตั้งใจ เพื่อให้อ่านออกว่าเป็นชั้นบนของ .tab (sub-tab). กำหนดว่า .tab ปุ่มไหนโชว์อยู่
   (ผ่าน data-mode attr, toggle class .hidden ใน app.js) */
.mode-switch {
  display: flex;
  gap: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.mode-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 8px 24px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mode-btn:hover { color: var(--text); }
.mode-btn.active { background: var(--accent); color: #fff; box-shadow: var(--gloss); }

/* แถวที่ 2 — sub-tab ของโหมดที่เลือก (ระดับรอง, "อยู่ในโซนนั้นแล้วดูอะไร") — พื้นเข้มกว่า
   row1 เล็กน้อย + เส้นคั่นบน ให้เห็นชัดว่าเป็นชั้นถัดลงมา ไม่ใช่แถวคู่ขนานกับ mode switch.
   ซ่อนทั้งแถว (ผ่าน #tabs-row.hidden ใน app.js applyMode()) เมื่อโหมดนั้นมี tab เดียว */
.topbar-row2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px 8px 32px;
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.tabs-caption {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.tabs { display: flex; gap: 2px; flex-wrap: wrap; }

/* Sub-tab — underline style (เส้นใต้บาง ไม่มีพื้นหลังทึบ) ตั้งใจให้เบากว่า .mode-btn
   ชัดเจนว่าเป็นชั้นรอง ไม่ใช่ตัวเลือกระดับเดียวกัน */
.tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 8px 12px 6px;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.86rem;
}

.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }

.panel { display: none; }
.panel.active { display: block; }

/* Tab 1 — tab ต่อ portfolio (broker+account, เช่น "Family Primary Portfolio") — คนละ nav
   จาก .tabs หลัก, ใช้สไตล์เดียวกันแต่เล็กกว่า. สร้างเองสดจาก summary.portfolios (app.js
   renderPortfolioTabs()) — เพิ่ม account ใหม่ก็โผล่เป็นปุ่มเพิ่มเองไม่ต้องแก้ CSS/markup */
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.subtab {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
}
.subtab:hover { color: var(--text); }
.subtab.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--gloss); }

.portfolio-asof { text-align: right; color: var(--text-dim); font-size: 0.78rem; margin-bottom: 10px; }

.soon {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-dim);
  font-size: 1.1rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.hero-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}

.hero-label { color: var(--text-dim); font-size: 0.72rem; margin-bottom: 6px; font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.hero-value { font-size: 1.4rem; font-weight: 700; }
.hero-value.up { color: var(--green); }
.hero-value.down { color: var(--red); }
.hero-sub { color: var(--text-dim); font-size: 0.78rem; margin-top: 2px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.card h2 { margin: 0 0 12px; font-size: 1rem; color: var(--text-dim); }

.card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) { .card-row { grid-template-columns: 1fr; } }

.roi-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.9rem; }
.roi-row .label { color: var(--text-dim); }
.roi-tag { font-weight: 600; }
.roi-tag.up { color: var(--green); }
.roi-tag.down { color: var(--red); }

/* Tab 1 — ROI gauge (semicircle "download-style" progress 0% → target_roi%) */
.gauge-wrap { position: relative; max-width: 320px; margin: 0 auto 8px; }
#roi-gauge { width: 100%; height: auto; display: block; }
.gauge-track { fill: none; stroke: var(--track); stroke-width: 14; stroke-linecap: round; }
.gauge-fill { fill: none; stroke-width: 14; stroke-linecap: round; transition: d 0.3s; }
.gauge-tick { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.gauge-scale { stroke: #8B9594; stroke-width: 1.5; }
.gauge-center { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); text-align: center; }
.gauge-pct { font-size: 1.6rem; font-weight: 700; }
.gauge-sub { color: var(--text-dim); font-size: 0.8rem; margin-top: 2px; }

/* Tab 1 — Allocation pie/doughnut (Chart.js) + custom legend */
.pie-wrap { max-width: 220px; height: 220px; margin: 0 auto 12px; position: relative; }
.pie-legend-row { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; padding: 4px 0; }
.pie-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pie-legend-name { flex: 1; }
.pie-legend-val { color: var(--text-dim); white-space: nowrap; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--text-dim); font-weight: 500; font-size: 0.72rem; text-transform: uppercase; font-family: var(--mono); letter-spacing: 0.08em; }
td.pnl-up { color: var(--green); }
td.pnl-down { color: var(--red); }

.meta { color: var(--text-dim); font-size: 0.78rem; margin-top: 8px; text-align: right; }

.loading, .error { text-align: center; padding: 60px 20px; color: var(--text-dim); }
.error { color: var(--red); }
.hidden { display: none; }

/* Tab 4 — Macro Economic Variable */
.range-bar { display: flex; gap: 6px; margin-bottom: 16px; }
.range-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}
.range-btn:hover { color: var(--text); }
.range-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--gloss); }

.macro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.macro-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.macro-card-latest { font-size: 1.2rem; font-weight: 700; }
.macro-card-chevron { color: var(--text-dim); transition: transform 0.15s; }
.macro-card-chevron.collapsed { transform: rotate(-90deg); }

.chart-wrap { margin-top: 10px; }
.chart-wrap.collapsed { display: none; }

.breakdown-summary { margin-bottom: 16px; }
.breakdown-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.breakdown-summary-row.breakdown-net {
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom: none;
  padding-top: 10px;
}

.accordion-item { border-top: 1px solid var(--border); }
.accordion-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  cursor: pointer;
}
.accordion-title { font-weight: 600; }
.accordion-right { display: flex; align-items: center; gap: 10px; }
.accordion-value { font-weight: 600; }
.accordion-body { padding-bottom: 12px; }
.accordion-body.collapsed { display: none; }

.compare-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.compare-checks label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--text-dim);
  cursor: pointer;
}

.btn {
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: var(--gloss);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.88rem;
  margin-bottom: 10px;
}
.btn:hover { opacity: 0.9; }

/* Tab 3 — Macro Economic Calendar (snake timeline) */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend-dot.macro-high { background: var(--amber); }
.legend-dot.macro-medium { background: var(--data); }
.legend-diamond {
  width: 9px; height: 9px; background: var(--magenta); display: inline-block; transform: rotate(45deg);
}
.legend-square { width: 9px; height: 9px; background: var(--green); display: inline-block; }
.legend-weekend { width: 14px; height: 10px; border-radius: 4px; background: rgba(168,105,10,0.12); display: inline-block; border: 1px solid rgba(168,105,10,0.4); }

.snake-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  overflow-x: auto;
  margin-bottom: 16px;
}

#snake-svg { display: block; }

.weekend-band { fill: rgba(168, 105, 10, 0.10); stroke: rgba(168, 105, 10, 0.30); stroke-width: 1; }
.snake-path { fill: none; stroke: var(--border); stroke-width: 2; }
.day-node { fill: var(--panel-2); stroke: var(--text-dim); stroke-width: 1.5; }
.day-node.today { fill: var(--accent); stroke: var(--panel); }
.day-node-hit { fill: transparent; cursor: pointer; }
.day-label { fill: var(--text-dim); font-size: 10px; font-family: inherit; }

.marker-macro.macro-high { fill: var(--amber); }
.marker-macro.macro-medium { fill: var(--data); }
.marker-macro.macro-low { fill: var(--text-dim); }
.marker-adhoc { fill: var(--magenta); }
.marker-earnings { fill: var(--green); }

#calendar-detail { position: relative; }
.btn-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
}
#calendar-detail-body h3 { margin: 0 0 12px; font-size: 1rem; }
.detail-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.detail-type { font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; background: var(--panel-2); color: var(--text-dim); white-space: nowrap; }
.detail-type.macro { color: var(--amber); }
.detail-type.adhoc { color: var(--magenta); }
.detail-type.earnings { color: var(--green); }
.detail-time { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.detail-importance { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; }

/* Tab 2 — Narrative List */
.narrative-controls { margin-bottom: 14px; display: flex; align-items: center; gap: 14px; }
.narrative-action-bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px;
}
.narrative-action-bar.hidden { display: none; }
.narrative-sel-count { font-weight: 600; margin-right: auto; }
.narrative-delete-error { color: #ef4444; font-size: 0.85rem; }
.btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-danger.confirming { background: #991b1b; }
.narrative-list.select-mode .narrative-card { cursor: pointer; position: relative; }
.narrative-list.select-mode .narrative-card.selected { outline: 2px solid #dc2626; background: rgba(220,38,38,0.08); }
.select-mark {
  display: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--text-dim);
  align-items: center; justify-content: center; font-size: 0.8rem; color: #fff; flex-shrink: 0;
}
.narrative-list.select-mode .select-mark { display: inline-flex; }
.narrative-card.selected .select-mark { background: #dc2626; border-color: #dc2626; }
.check-label { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 0.88rem; cursor: pointer; }

.narrative-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.narrative-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.narrative-card.is-hidden { opacity: 0.55; }

.narrative-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.narrative-source { font-size: 0.75rem; color: var(--text-dim); }
.narrative-status {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--accent-text);
  text-transform: capitalize;
}
.fav-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}
.fav-btn.active { color: var(--amber); }

.narrative-title { font-weight: 600; margin-bottom: 6px; }
.narrative-desc { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 8px; line-height: 1.4; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag-chip {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text-dim);
}

.narrative-comment-row { margin-bottom: 10px; }
.narrative-comment-input {
  width: 100%;
  min-height: 44px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  padding: 8px;
  resize: vertical;
  font-family: inherit;
  margin-bottom: 6px;
}
.macro-section { margin-bottom: 36px; }
.macro-section + .macro-section { padding-top: 24px; border-top: 1px solid var(--border); }
.macro-section-title { margin: 0 0 16px; font-size: 1.15rem; }

.btn-sm { padding: 5px 12px; font-size: 0.78rem; margin-bottom: 0; }
.btn-refresh { margin-left: 8px; }
.btn-refresh:disabled { opacity: 0.5; cursor: default; }

.narrative-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-dim);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.btn-hide {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 3px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.72rem;
}

/* ── Tab 6 — Financial Master Plan: ยืมภาษาภาพจาก Cole's HTML report (gradient header,
   accent left-border การ์ด, highlight callout, step list) แต่ปรับพาเลตต์ให้อยู่ใน dark theme
   เดียวกับ NAVI ทั้งแอป แทนพื้นขาว/gradient สีสันจัดของต้นฉบับ ที่จะชนกับ chrome รอบข้าง ──── */
.plan-banner {
  background: #DCE9EC;
  border: 1px solid #C3D6DB;
  border-radius: 16px;
  box-shadow: var(--plastic);
  padding: 22px 26px;
  margin-bottom: 18px;
  color: var(--text);
}
.plan-banner-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 4px; }
.plan-banner-sub { font-size: 0.88rem; color: var(--text-dim); }
.plan-banner-fx { font-family: var(--mono); font-size: 0.82rem; color: var(--text); margin-top: 6px; }
/* (2026-09-22) ปุ่ม Update ใน Financial Master Plan banner — วางชิดขวา ไม่ดันบรรทัด title/sub ตกบรรทัด
   บนจอแคบ (wrap ให้ปุ่มลงแถวใหม่แทน) */
.plan-banner-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.plan-banner-row .btn-refresh { margin-left: 0; margin-bottom: 0; flex-shrink: 0; }

/* World map บน header ของแท็บ Pilot Logbook (2026-09-18 รอบ 9, restyle รอบ 10-11) — เส้นทางเดือนที่
   กำลังดูอยู่, วาดด้วย D3 + world-atlas topojson (CDN, เหมือน pattern Chart.js ของ Tab 4). เส้นทางเป็น
   สีเรียบ `--accent` (cyan) ไม่มี glow (เต้บอกรอบ 11 ว่า glow ดูลอยๆ) */
.logbook-map-wrap { margin-top: 14px; }
.logbook-map { width: 100%; height: 190px; display: block; overflow: hidden; background: #B4CBD2; border-radius: 8px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.18); } /* height overridden inline per render — JS clamps 120-260px to fit the actual route spread */
.logbook-map-land { fill: #EEF1EE; stroke: #8AA2A9; stroke-width: 0.6; }
.logbook-map-route { fill: none; stroke: #0B5566; stroke-linecap: round; opacity: 1; }
.logbook-map-airport { fill: var(--accent); stroke: var(--panel); stroke-width: 1; pointer-events: none; }
.logbook-map-airport-hit { fill: transparent; cursor: pointer; }
.logbook-map-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  fill: var(--text);
  paint-order: stroke;
  stroke: rgba(241,243,241,0.9);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.highlight-box {
  background: var(--data-deep);
  box-shadow: var(--gloss);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  text-align: center;
  color: #fff;
}
.highlight-box.highlight-red { background: var(--red); }
.highlight-label { font-size: 0.88rem; opacity: 0.9; margin-bottom: 4px; }
.highlight-value { font-size: 1.6rem; font-weight: 700; }

.plan-flow-note {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.plan-flow-note code { color: var(--text); }

/* Accent left-border ต่อ card — เจตนาแบ่งหมวดเหมือน Cole's .section (สีต่อ section คงที่)
   ให้ scan หมวดได้เร็วโดยไม่ต้องอ่านหัวข้อ */
.card.accent-green  { border-left: 4px solid var(--green); }
.card.accent-orange { border-left: 4px solid #D9782D; }
.card.accent-purple { border-left: 4px solid #7A6FA8; }
.card.accent-teal   { border-left: 4px solid #2E8B6E; }
.card.accent-blue   { border-left: 4px solid var(--data); }
.card.accent-pink   { border-left: 4px solid var(--magenta); }

.card-nested { background: var(--panel-2); border-radius: 10px; padding: 14px 16px; }
.card-nested h3 { margin: 0 0 10px; font-size: 0.9rem; color: var(--text-dim); }

.util-wrap { margin-top: 16px; font-size: 0.88rem; }
.progress-bar {
  background: var(--track);
  border-radius: 10px;
  height: 14px;
  overflow: hidden;
  margin-top: 8px;
}
.progress-fill {
  background: var(--green);
  box-shadow: var(--gloss);
  height: 100%;
  border-radius: 10px;
}
.progress-fill.over { background: var(--red); }
.util-label.over { color: var(--red); }

/* Step list — mirror Cole's numbered-circle steps (Transfer Flow Plan) */
.steps { counter-reset: step-counter; margin-top: 12px; }
.step {
  counter-increment: step-counter;
  background: var(--panel-2);
  border-radius: 10px;
  padding: 14px 16px 14px 56px;
  margin-bottom: 12px;
  position: relative;
}
.step::before {
  content: counter(step-counter);
  position: absolute;
  left: 14px;
  top: 14px;
  background: var(--accent);
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.step h4 { margin: 0 0 8px; font-size: 0.92rem; }
.step p { margin: 4px 0; font-size: 0.88rem; }

.reserve-callout {
  background: var(--amber);
  box-shadow: var(--gloss);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  color: #fff;
}
.reserve-callout h3 { margin: 0 0 4px; font-size: 0.95rem; }

.num-amount { font-weight: 600; }
.text-income { color: var(--green); }
.text-expense { color: var(--red); }
.btn-hide:hover { color: var(--red); border-color: var(--red); }

/* Auto-Deduct Timeline — string timeline, node ต่อ event เรียงตามวันในเดือน (2026-08-20) */
.dd-timeline {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding: 26px 12px 8px;
  gap: 4px;
}
.dd-node {
  position: relative;
  flex: 1 0 130px;
  min-width: 130px;
  text-align: center;
  padding-top: 14px;
}
.dd-node::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--border);
}
.dd-node:first-child::before { left: 50%; width: 50%; }
.dd-node:last-child::before { width: 50%; }
.dd-dot {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #7A6FA8;
  border: 2px solid var(--panel);
}
.dd-day { font-weight: 700; font-size: 0.82rem; color: var(--text-dim); }
.dd-event { font-weight: 600; margin: 3px 0 2px; font-size: 0.9rem; }
.dd-amount { font-size: 0.85rem; }
.dd-account { font-size: 0.76rem; color: var(--text-dim); margin-top: 1px; }

/* Tab 7 — Pilot Logbook */
.logbook-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.logbook-search-row { margin-bottom: 10px; }
.logbook-search-input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.9rem;
}
.logbook-search-input:focus { outline: none; border-color: var(--accent); }
.logbook-no-results { color: var(--text-dim); padding: 20px 0; text-align: center; }
.logbook-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.logbook-range-sep { font-size: 0.8rem; }
.date-seg-group { display: flex; align-items: center; gap: 2px; }
.date-seg-sep { color: var(--text-dim); font-size: 0.8rem; }
.date-seg {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 2px;
  font-size: 0.8rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-align: center;
  width: 26px;
}
.date-seg-year { width: 44px; }
.date-seg:focus { outline: none; border-color: var(--accent); }
@media (max-width: 560px) {
  .logbook-toolbar { flex-direction: column; align-items: flex-start; }
  .logbook-range { width: 100%; }
}

/* Tab 7 sub-tab — Statistics (2026-09-18, LogTen Pro "Analyze" style) */
.stats-list { display: flex; flex-direction: column; }
.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.stats-row:last-child { border-bottom: none; }
.stats-label { color: var(--text); }
.stats-value {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  background: var(--panel-2);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.85rem;
}
/* Recency card (Limits ยุบรวมเข้ามาแล้ว 2026-09-18 รอบ 6) — สีตาม margin/ระยะเวลาที่เหลือ (mirror LogTen Pro green=ปกติ/red=เกินขีดจำกัด) */
.stats-value.limit-ok { background: rgba(31,138,94,0.14); color: var(--green); }
.stats-value.limit-warn { background: rgba(168,105,10,0.14); color: var(--amber); }
.stats-value.limit-bad { background: rgba(200,64,47,0.13); color: var(--red); }
.stats-value.limit-unknown { color: var(--text-dim); }
.btn-secondary {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.82rem;
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-text); }
/* `.logbook-status` (badge "ประมาณการ/ยืนยันแล้ว") ถูกลบออกจากการ์ดลิสต์ 2026-09-21 (เต้ขอใช้สีสื่อ
   สถานะแทนข้อความ) — detail modal ยังโชว์คำว่า "ยืนยันแล้ว/ประมาณการ" อยู่ แต่เป็นแถวข้อความธรรมดา
   ไม่ได้ใช้ class นี้ ⇒ ตอนนี้ไม่มีใครเรียก เก็บไว้เผื่อกลับมาใช้เป็น pill อีก */
.logbook-status { font-size: 0.76rem; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.logbook-status.confirmed { background: rgba(31,138,94,0.14); color: var(--green); }
.logbook-status.estimate { background: rgba(168,105,10,0.14); color: var(--amber); }

/* Tab 7 — Pilot Logbook cards (2026-09-17, infographic-style list แทน table เดิม เต้ขอให้ concise
   แบบ LogTen Pro — ticket-stub date block + route/aircraft ตรงกลาง + block time/สถานะชิดขวา) */
.logbook-cards { display: flex; flex-direction: column; gap: 8px; }
.logbook-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.logbook-card { border-left-width: 6px; }
.logbook-card:hover { background: var(--panel-2); border-color: var(--accent); }
/* สถานะ 4 ระดับ (2026-09-22, เต้ยืนยันเกณฑ์ใหม่ — เดิมมีแค่ confirmed/estimate ผูกกับ eCrew อย่างเดียว):
   เขียว = ยืนยันจาก eCrew แล้ว / ฟ้า = เก็บข้อมูลครบจาก Short Note แล้ว ("เสร็จสิ้น" รอ eCrew ยืนยัน) /
   เหลือง = บินแล้วแต่ข้อมูลยังไม่ครบ (ต้องตามเก็บ) / เทาจาง = ยังไม่บิน (ตามแผน ไม่ใช่ข้อมูลขาด).
   `.estimate` เดิมคงไว้เป็น alias ของเหลือง เผื่อ cache HTML/JS เก่าค้างในเบราว์เซอร์ */
.logbook-card.confirmed { border-left-color: var(--green); }
.logbook-card.complete { border-left-color: var(--data); }
.logbook-card.incomplete,
.logbook-card.estimate { border-left-color: var(--amber); }
.logbook-card.planned { border-left-color: var(--border); }
.logbook-card.planned .lb-date-full,
.logbook-card.planned .lb-route { opacity: 0.78; }

/* แถบ "ข้อมูลครบถึงวันไหน" เหนือลิสต์ (2026-09-22, เต้ขอ) — เป้าหมายจริงของงานรอบนี้ */
.logbook-freshness {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.logbook-freshness .lf-main { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.logbook-freshness .lf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); flex: none; }
.logbook-freshness.ok .lf-dot { background: var(--green); }
.logbook-freshness.warn .lf-dot { background: var(--amber); }
.logbook-freshness .lf-main b { font-family: "IBM Plex Mono", monospace; color: var(--text); }
.lf-pending { margin-top: 8px; font-size: 0.8rem; color: var(--text-dim); }
.lf-pending-head { color: var(--amber); margin-bottom: 3px; }
.lf-pending ul { margin: 0; padding-left: 18px; }
.lf-pending li { margin: 1px 0; }
.lf-pending b { color: var(--text); font-family: "IBM Plex Mono", monospace; }
.lf-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 0.74rem; color: var(--text-dim); }
.lf-key { display: inline-flex; align-items: center; gap: 5px; }
.lf-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.lf-sw.confirmed { background: var(--green); }
.lf-sw.complete { background: var(--data); }
.lf-sw.incomplete { background: var(--amber); }
.lf-sw.planned { background: var(--border); }

/* บล็อกซ้าย = วันที่ + เลขเที่ยวบิน **2 บรรทัด** ซ้อนกัน (2026-09-21 รอบ 2, เต้แก้จาก 3 บรรทัดที่
   บอกไว้ตอนแรก): "21 SEP 2026" / "EY342" — จัดกลุ่มแบบ "1 บรรทัด = 1 ความหมาย" (วันที่เต็มอยู่ด้วยกัน,
   เลขเที่ยวบินแยกบรรทัดสีฟ้า) อ่านเป็นระบบกว่าการหั่นปีไปอยู่กับเลขเที่ยวบิน. เลขเที่ยวบินย้ายมาจาก
   ฝั่งขวาของการ์ด (ที่ว่างตรงนั้นยกให้แถบช่วงเวลาแบบ LogTen ทั้งคอลัมน์) */
.lb-date {
  flex: 0 0 108px;
  text-align: left;
  font-family: "Saira Semi Condensed", sans-serif;
  line-height: 1.05;
}
.lb-date-full { font-size: 1.45rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.lb-date .lb-flightno { color: var(--accent-text); margin-top: 2px; }

/* ป้าย "PF" ต่อท้ายเลขเที่ยวบิน (2026-09-21, เต้ขอ) — โชว์เฉพาะเที่ยวที่เต้เป็น Pilot Flying
   (ดู `_isPilotFlying()` ใน app.js). ตั้งใจให้เล็ก/เบากว่าเลขเที่ยวบิน = อ่านเป็นป้ายกำกับ ไม่ใช่
   ส่วนหนึ่งของเลขเที่ยวบิน (ใช้ IBM Plex Sans ตัดกับ Big Shoulders ของเลขเที่ยวบิน) */
.lb-pf {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--accent-text);
  border-radius: 3px;
  color: var(--accent-text);
  opacity: 0.9;
}

.lb-main { flex: 1 1 auto; min-width: 0; }
.lb-flightno {
  font-family: "Saira Semi Condensed", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* แถบช่วงเวลาแบบ LogTen Pro (2026-09-21, เต้ขอ): เวลาออก ───ระยะเวลา+ป้าย(sched/hrs)─── เวลาถึง
   เส้น `.lb-rule` ยืดเต็มที่ว่างด้วย flex:1 (ไม่ใช่ตัวอักษร "─" ซ้ำๆ แบบ LogTen ที่ความยาวจะเพี้ยน
   ตามฟอนต์/ความกว้างจอ) — สีเส้น/ป้ายต่างกันตามว่าเป็นเวลาจริง (cyan) หรือตามแผน (จาง) */
.lb-timestrip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  width: 100%;  /* ความกว้างจริงคุมที่ `.lb-side` (คอลัมน์ขวาสุดของการ์ด) ไม่ใช่ที่นี่ */
}
/* ไม่มีเส้นลากให้ยืด → ต้องสั่ง justify เองไม่งั้นก้อน "1:05 hrs" ไปกองซ้ายของคอลัมน์ขวา (ดูไม่ชิดขวา) */
.lb-timestrip-bare { gap: 0; justify-content: flex-end; }
.lb-clock { font-size: 1rem; font-weight: 600; }
.lb-rule { flex: 1 1 auto; height: 1px; background: var(--border); min-width: 12px; }
.lb-dur { font-size: 0.95rem; font-weight: 600; }
.lb-dur-unit { font-size: 0.7rem; color: var(--text-dim); margin-left: 4px; letter-spacing: 0.04em; }
.lb-timestrip.flown .lb-clock, .lb-timestrip.flown .lb-dur { color: var(--text); }
.lb-timestrip.flown .lb-rule { background: rgba(31,162,184,0.45); }  /* --data 45% */
.lb-timestrip.planned .lb-clock, .lb-timestrip.planned .lb-dur { color: var(--text-dim); }
.lb-timestrip.planned .lb-rule { background: var(--border); }

.lb-pic {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-route {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.lb-route-arrow { color: var(--text-dim); font-size: 0.8rem; }
.lb-aircraft { margin-top: 4px; font-size: 0.78rem; color: var(--text-dim); display: flex; gap: 8px; }

/* Simulator session card (2026-09-22, เต้ขอ) — ไม่มี route/aircraft ให้โชว์ แค่ badge ชื่อ session
   แทน `.lb-route` ปกติ, สีเดียวกับ `.lb-pf`/`--accent` ให้รู้สึกเป็นชุดเดียวกับป้ายอื่นในการ์ด */
.lb-sim-badge {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-text);
}
.lb-actype { font-weight: 600; }
.lb-reg { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* คอลัมน์ขวาสุด = แถบช่วงเวลาแบบ LogTen อย่างเดียว (2026-09-21 รอบ 2, เต้ขอดันไปชิดขวาสุดของการ์ด)
   — เลขเที่ยวบินย้ายไปอยู่บล็อกวันที่ฝั่งซ้ายแล้ว, badge สถานะถูกตัดออก (ใช้สีสื่อแทน).
   `flex: 0 1 380px` = ขอ 380px แต่ยอมหดได้บนจอแคบ, `margin-left:auto` ดันชิดขวาแม้ `.lb-main` สั้น */
.lb-side {
  flex: 0 1 380px;
  min-width: 190px;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .logbook-card { flex-wrap: wrap; }
  .lb-side { flex: 1 1 100%; min-width: 0; margin-left: 0; }
  .lb-date { flex: 0 0 96px; }
  .lb-date-full { font-size: 1.25rem; }
  .lb-flightno { font-size: 1.15rem; }
}

/* Modal — flight detail popup, reused pattern for any future drill-down view */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42,46,45,0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 50;
  overflow-y: auto;
}
/* .hidden earlier in this file loses the display:flex above on equal specificity (last rule wins) —
   without this, the modal renders open and blocks all clicks even while class="hidden" is set
   (found via local mock-server test 2026-09-17, before this ever reached Railway) */
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  max-width: 560px;
  width: 100%;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.modal-hint { color: var(--text-dim); font-size: 0.85rem; margin: 4px 0 16px; }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.modal-close:hover { color: var(--text); }
.detail-route {
  font-family: "Saira Semi Condensed", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.detail-flightno { color: var(--accent-text); font-weight: 600; margin-bottom: 16px; }
.detail-section-title {
  font-family: "Saira Semi Condensed", sans-serif;
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  margin: 22px 0 10px;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 6px;
}
.detail-section-title:first-of-type { margin-top: 0; }
/* ป้ายกำกับเล็กๆ ท้ายหัวข้อ section (เช่น "เวลานาฬิกาเป็น UTC / Zulu") — ฟอนต์/ขนาด/สีต่างจากหัวข้อ
   ชัดเจน ให้อ่านเป็นหมายเหตุ ไม่ใช่ส่วนหนึ่งของชื่อหัวข้อ */
.detail-section-note {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-left: 8px;
}
.detail-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.9rem; }
.detail-row .label { color: var(--text-dim); }
.detail-row .value { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* Autoland checkbox (2026-09-22) — ต่างจาก `.detail-row` ทั่วไป (label ซ้าย/value ขวา) เพราะเป็น
   input ที่เต้กดเองได้จริง ไม่ใช่แค่โชว์ค่า — justify-start ให้ checkbox+label ชิดซ้ายเป็นก้อนเดียว */
.detail-row-checkbox { justify-content: flex-start; padding-top: 8px; }
.autoland-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}
.autoland-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Tab 5 — Chat with Penny (2026-09-23) — proxied through NAVI's backend to Penny's own /api/chat,
   see app.py `_proxy_to_penny()`. No charting library — table/chart blocks are hand-rolled HTML/SVG
   (mirrors the rest of NAVI, which never pulls in a JS build pipeline). */
.chat-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 210px);
  min-height: 420px;
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 4px 2px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chat-empty { color: var(--text-dim); text-align: center; padding: 60px 20px; font-size: 0.92rem; }

.chat-msg { max-width: 780px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg.user { align-self: flex-end; align-items: flex-end; }
.chat-msg.penny { align-self: flex-start; align-items: flex-start; }

.chat-bubble {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-msg.user .chat-bubble { background: var(--accent); color: #fff; border-color: var(--accent); }
.chat-msg.penny .chat-bubble { background: var(--panel); color: var(--text); }
.chat-msg.error .chat-bubble { background: rgba(200,64,47,0.10); border-color: var(--red); color: var(--red); }

/* one Penny reply = one card; text/table/chart flow inside it instead of each being its own box */
.chat-msg.penny .chat-reply {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 12px;
  width: 100%;
}
.chat-reply .chat-text { font-size: 0.92rem; line-height: 1.6; word-break: break-word; }
.chat-reply .chat-text p { margin: 0 0 6px; }
.chat-reply .chat-text p:last-child { margin-bottom: 0; }
.chat-reply .chat-text ul { margin: 4px 0 6px; padding-left: 20px; }
.chat-reply .chat-text li { margin: 2px 0; }
.chat-reply .chat-bubble { background: transparent; border: none; border-radius: 0; padding: 0; }

.chat-block-table { width: 100%; }
.chat-block-table-title { font-weight: 600; margin-bottom: 6px; color: var(--text-dim); font-size: 0.82rem; text-transform: uppercase; }
.chat-block-chart-title { font-weight: 600; margin-bottom: 6px; color: var(--text-dim); font-size: 0.82rem; text-transform: uppercase; }
.chat-block-chart-svg { display: block; width: 100%; height: auto; }
.chat-block-chart-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 0.78rem; color: var(--text-dim); }
.chat-block-chart-legend-item { display: flex; align-items: center; gap: 5px; }
.chat-block-chart-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.chat-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 4px 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.chat-toolbar-title { font-weight: 600; font-size: 0.9rem; color: var(--text-dim); }
.chat-toolbar-actions { display: flex; gap: 8px; }
.chat-tool-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 8px; padding: 6px 12px; font-size: 0.8rem; cursor: pointer;
}
.chat-tool-btn.accent { color: var(--accent-text); }
.chat-tool-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.chat-tool-btn.confirming { border-color: var(--red); color: var(--red); }
.chat-tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.chat-typing.hidden { display: none; }
.chat-typing {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 0.82rem;
  padding: 4px 2px 10px;
}
.chat-typing-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: chat-typing-bounce 1.1s infinite ease-in-out;
}
.chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.chat-composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.chat-input {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-family: inherit;
  resize: none;
  max-height: 140px;
}
.chat-input:focus { outline: none; border-color: var(--accent); }
.chat-send-btn { margin-bottom: 0; flex-shrink: 0; }
.chat-send-btn:disabled { opacity: 0.5; cursor: default; }

.chat-narrative-field { margin-bottom: 14px; }
.chat-narrative-field label { display: block; color: var(--text-dim); font-size: 0.78rem; margin-bottom: 5px; text-transform: uppercase; }
.chat-narrative-input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.88rem;
  font-family: inherit;
}
.chat-narrative-input:focus { outline: none; border-color: var(--accent); }
.chat-narrative-textarea { resize: vertical; }

/* chat tables: wrap long cells, left-align, keep every column visible */
.chat-block-table table { width: 100%; table-layout: auto; }
.chat-block-table th, .chat-block-table td {
  white-space: normal; text-align: left; vertical-align: top; word-break: break-word;
}
.chat-block-table td:first-child { white-space: nowrap; font-weight: 600; }

/* ── Plastic surfaces + type tweaks (Y2K/Braun day theme) ─────────────────────────────────────── */
.topbar, .card, .hero-card, .narrative-card, .snake-wrap, .logbook-freshness, .logbook-card,
.chat-msg.penny .chat-reply, .modal-box, .narrative-action-bar { box-shadow: var(--plastic); }
.card, .hero-card, .narrative-card, .snake-wrap, .logbook-freshness, .chat-msg.penny .chat-reply,
.narrative-action-bar, .modal-box { border-radius: 14px; }
.logbook-card { border-radius: 12px; }
.chat-typing-dot { background: var(--accent); }
.step h4, .card h2 { font-family: "Saira Semi Condensed", "IBM Plex Sans", sans-serif; }

@media (max-width: 720px) {
  .brand { font-size: 1.15rem; }
  .mode-switch { width: 100%; }
  .mode-btn { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 1rem; white-space: normal; line-height: 1.1; }
  .topbar-row1 { padding: 12px 16px; gap: 12px; }
  .topbar-row2 { padding: 8px 16px; }
}

/* ── Industrial "Panel" level (trial): LCD wells, toggle-switch mode selector, label-tape headings ── */
.hero-card { position: relative; }
.hero-card::before, .hero-card::after {
  content: ""; position: absolute; top: 7px; width: 9px; height: 9px;
  background: radial-gradient(circle at 50% 50%, #C9CFD0 3px, #9AA3A2 3.6px, transparent 4.6px);
}
.hero-card::before { left: 8px; }
.hero-card::after { right: 8px; }
.hero-card .hero-label { padding-top: 6px; text-align: center; }

.hero-value {
  background: #CFE2E7;
  border: 1px solid #A6C1C9;
  border-radius: 6px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
  color: #17424D;
  padding: 8px 12px;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  text-align: right;
}
.hero-value.up { color: #16603F; }
.hero-value.down { color: #A3281C; }
.hero-card .hero-sub { text-align: right; margin-top: 6px; }

.card h2 {
  display: inline-block;
  background: var(--text);
  color: var(--panel);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  margin: 0 0 14px;
}

.mode-btn { display: inline-flex; align-items: center; }
.mode-btn::before {
  content: ""; flex: none; width: 30px; height: 16px; border-radius: 8px; margin-right: 9px;
  background: radial-gradient(circle at 8px 50%, #F1F3F1 5.5px, transparent 6px), #B9C0C1;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.mode-btn.active {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--plastic);
}
.mode-btn.active::before {
  background: radial-gradient(circle at 22px 50%, #F1F3F1 5.5px, transparent 6px), var(--accent);
}
@media (max-width: 720px) {
  .mode-btn { flex-direction: column; justify-content: center; gap: 5px; }
  .mode-btn::before { margin-right: 0; }
}

/* ── Studded headers on every banner (Plan, Transfer Flow, Pilot Logbook): four corner studs only. ── */
.plan-banner {
  padding: 26px 32px;
  background:
    radial-gradient(circle, #C9CFD0 3px, #9AA3A2 3.6px, transparent 4.6px) left 10px top 10px / 9px 9px no-repeat,
    radial-gradient(circle, #C9CFD0 3px, #9AA3A2 3.6px, transparent 4.6px) right 10px top 10px / 9px 9px no-repeat,
    radial-gradient(circle, #C9CFD0 3px, #9AA3A2 3.6px, transparent 4.6px) left 10px bottom 10px / 9px 9px no-repeat,
    radial-gradient(circle, #C9CFD0 3px, #9AA3A2 3.6px, transparent 4.6px) right 10px bottom 10px / 9px 9px no-repeat,
    #DCE9EC;
}
#panel-transfer .plan-banner-fx { color: var(--text-dim); }

/* ── Every header in caps (h1-h4, banner titles, section titles). Accordion rows and tabs stay as-is. ── */
h1, h2, h3, h4, .plan-banner-title, .detail-section-title, .macro-section-title { text-transform: uppercase; }
h3, h4, .plan-banner-title, .detail-section-title, .macro-section-title { letter-spacing: 0.05em; }
.detail-section-note { text-transform: none; letter-spacing: 0.04em; }
.plan-banner-title { font-family: "Saira Semi Condensed", "IBM Plex Sans", sans-serif; font-size: 1.6rem; }

.mode-btn { text-transform: uppercase; letter-spacing: 0.05em; }

/* Statistics popup บนหน้า Logbook (2026-09-24) — ปุ่มมุมขวาบนของ banner + modal กว้างกว่า detail modal */
.plan-banner-rel { position: relative; }
.plan-banner-corner { position: absolute; top: 20px; right: 26px; z-index: 2; }
/* ปุ่มส้ม industrial บน banner (Update / Statistics) — ใหญ่ขึ้น, ไม่มี margin ล่างที่ทำให้เยื้อง, ตรงแนว title */
.btn.plan-banner-btn { padding: 10px 24px; font-size: 1rem; margin: 0; }
.plan-banner-row .btn.plan-banner-btn { margin-top: -0.5px; }
.modal-box-wide { max-width: 760px; }
.logbook-freshness .lf-legend { margin-top: 0; }