/* ============================================================
   theme-f.css —「F」瑞士海報風（同 /journey、joyce.japp.dev）蓋喺 Claude theme 上面（2026-10-06 Johnny 要求）
   用喺：/claude（Tasks）＋ 佢嵌入嘅 /daily、/timeline、/pomodoro。
   做法：喺各頁 <style> 之後 <link>，重新定義 Claude theme token ＋ 通用結構規則（直角、墨線段頭、Helvetica ＋ PingFang）。
   分類色（--cat-*）唔郁 —— 分類靠佢分。
   ⚠ 要還原：刪走各頁嘅 <link rel="stylesheet" href="/theme-f.css"> 就得。
   ============================================================ */
:root {
  --f-sans: "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, "PingFang HK", "PingFang TC", "Noto Sans CJK HK", sans-serif;
  --f-cjk: "PingFang HK", "PingFang TC", "Noto Sans CJK HK", -apple-system, sans-serif;
  --f-red: #e2231a; --f-line: #d4d0c8; --f-cell: #e3dfd7; --f-muted: #8f8b83;
  --bg: #f3f1ec; --surface: #fbfaf7; --band: #f6f4ef; --ink: #111111; --ink-2: #55524c; --ink-3: #8f8b83; --ink-4: #a6a29a;
  --accent: #e2231a; --accent-h: #c11d15; --accent-ink: #c11d15; --accent-line: rgba(226,35,26,.45);
  --border: #d4d0c8; --border-lt: #e3dfd7; --chip: #e9e6df; --track: #e3dfd7;
  --hover: #ffffff; --field-bg: #ffffff; --cal-bg: #ffffff; --on-ink: #ffffff;
  --fab-shadow: rgba(0,0,0,.18);
}
@media (prefers-color-scheme: dark) {
  :root {
    --f-red: #ff4b3e; --f-line: #3a3833; --f-cell: #2a2926; --f-muted: #8a867e;
    --bg: #141413; --surface: #1d1c1a; --band: #1a1918; --ink: #f1efe9; --ink-2: #bdb9b0; --ink-3: #8a867e; --ink-4: #6f6c65;
    --accent: #ff4b3e; --accent-h: #ff6a5f; --accent-ink: #ff6a5f; --accent-line: rgba(255,75,62,.5);
    --border: #3a3833; --border-lt: #2e2d2a; --chip: #2a2926; --track: #2a2926;
    --hover: #24231f; --field-bg: #141413; --cal-bg: #141413; --on-ink: #141413;
    --fab-shadow: rgba(0,0,0,.5);
  }
}

/* ---- 字體：全部 Helvetica ＋ PingFang（取代 Georgia serif）---- */
body { font-family: var(--f-sans) !important; background: var(--bg) !important; }
h1, h2, h3, .serif, .v, .kpi .v, .stat .v, svg text { font-family: var(--f-sans) !important; }

/* ---- 直角：所有框、掣、chip、卡（圓點 / 圖表用 SVG，唔受影響）---- */
*, *::before, *::after { border-radius: 0 !important; }

/* ---- 頂欄：紅方塊 brand ＋ 上下墨線 nav（同 /journey）---- */
.app-title { font: 700 18px var(--f-sans) !important; letter-spacing: -.01em; display: inline-flex; align-items: center; color: var(--ink) !important; }
.app-title::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; background: var(--f-red); flex: none; }
.app-title .sub { margin-left: 10px !important; font: 700 12px var(--f-cjk) !important; color: var(--ink-2) !important; text-decoration: underline solid var(--f-red) 2px; text-underline-offset: 4px; }
.pagenav { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); gap: 0 !important; }
.pn-btn { border: 0 !important; border-right: 1px solid var(--f-line) !important; background: transparent !important; box-shadow: none !important;
  font: 700 12.5px/1 var(--f-cjk) !important; color: var(--ink-2) !important; padding: 12px 12px !important; min-height: 40px; }
.pn-btn:hover { background: var(--f-cell) !important; color: var(--ink) !important; }
.pn-btn.act { background: var(--ink) !important; color: var(--on-ink) !important; }
.burger { border: 1px solid var(--ink) !important; background: transparent !important; }
.burger i { background: var(--ink) !important; }

/* ---- 分頁掣（Tasks｜時間軸｜番茄鐘）：粗紅底線 ---- */
.views { border-bottom: 1px solid var(--ink) !important; }
.views button { font: 700 14px var(--f-cjk) !important; letter-spacing: .04em; }
.views button[aria-selected="true"] { color: var(--ink) !important; border-bottom-color: var(--f-red) !important; }

/* ---- 段標題：3px 墨線頭（同 joyce / journey .card h2）---- */
.coltitle { border-top: 3px solid var(--ink); padding-top: 10px; margin: 0 0 12px !important; }
.coltitle h2, .panel > h2, .list-head { font: 800 14px/1.2 var(--f-cjk) !important; letter-spacing: .1em; color: var(--ink) !important; }
.ch-t { font: 700 12px/1.3 var(--f-cjk) !important; letter-spacing: .02em; color: var(--ink-2) !important; }

/* ---- 卡 / panel：淡底、細線、冇陰影 ---- */
.panel, .usage-card, .task-card, .tcard, .modal-box, .kpi, .chart-box { box-shadow: none !important; }
.panel { background: var(--surface) !important; border: 1px solid var(--f-line) !important; }
.task-card { background: var(--surface) !important; border-color: var(--f-line) !important; }
.task-card:hover, .subtask-row:hover { background: var(--hover) !important; }

/* ---- 分類掣：方框、active 墨底 ---- */
.tab { border: 1px solid var(--ink) !important; font: 700 12.5px var(--f-cjk) !important; margin-right: -1px; }
.tab:not(.active) { background: transparent !important; color: var(--ink-2) !important; }
.tab:not(.active):hover { background: var(--f-cell) !important; color: var(--ink) !important; }
.tab.active { color: #fff !important; border-color: var(--ink) !important; }
.tabs { gap: 0 !important; }

/* ---- 掣 ---- */
.btn, .tgbtn, .rt-switch button, button.add-sub-btn { font-family: var(--f-cjk) !important; font-weight: 700 !important; }
.btn-primary, .btn.primary { background: var(--ink) !important; color: var(--on-ink) !important; border-color: var(--ink) !important; }
.rt-switch { border: 1px solid var(--ink) !important; }
.rt-switch button.active { background: var(--ink) !important; color: var(--on-ink) !important; }
.fab { background: var(--f-red) !important; color: #fff !important; }
.fab:hover { background: var(--accent-h) !important; }
input, select, textarea { border-radius: 0 !important; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--f-red) !important; }

/* ---- 數字：tabular ---- */
.kpi .v, .v, .tid, .dl-cal .d { font-variant-numeric: tabular-nums; }