/* Rundown 桌面殼。硬規則：本檔每一條規則都必須寫在下面這個 @media 之內，
   否則 390px 的手機會被波及（spec「機械保障」第 3 項，tests/desktop.test.js 會擋）。 */
@media (min-width: 960px) {
  html[data-desktop] #app { display: none; }
  html[data-desktop] body { overflow: hidden; }

  /* ── V 段 token 層：codex 2026-09-07 提案的 95 個 --desk-*，只追加不覆寫既有 token。
     值一律引用 styles.css 既有 token；三個洗色改用 color-mix（鐵則：desktop.css 不寫色彩字面值）；
     三個陰影是純黑 alpha 族（見 area-colors.test.js 允許清單正則）。 */
  :root {
    /* 字級／行高：主要任務 14/20；窄週卡 13/20；輔助 12/16。 */
    --desk-font-family: var(--sys);
    --desk-font-caption: calc(12px * var(--desk-font-scale, 1));
    --desk-font-compact: calc(13px * var(--desk-font-scale, 1));
    --desk-font-body: calc(14px * var(--desk-font-scale, 1));
    --desk-font-subhead: calc(16px * var(--desk-font-scale, 1));
    --desk-font-heading: calc(20px * var(--desk-font-scale, 1));
    --desk-font-number: calc(28px * var(--desk-font-scale, 1)); /* V 未消費：週日期大數字，B2 用 */
    --desk-font-date: calc(24px * var(--desk-font-scale, 1));
    --desk-line-caption: 16px;
    --desk-line-body: 20px;
    --desk-line-heading: 24px;
    --desk-line-number: 32px;
    --desk-line-date: 24px; /* V 未消費：裁決 V12 欄頭改用 --desk-line-number；B2 日期頭再用 */
    --desk-weight-regular: 400; /* V 未消費：內文預設字重已是 400，B2/B3 若需明示再用 */
    --desk-weight-medium: 500;
    --desk-weight-strong: 600;
    --desk-weight-heading: 700;

    /* 8pt 間距級距；36px 列、28px chip 為已定的桌面控制尺寸。 */
    --desk-space-1: 8px;
    --desk-space-2: 16px;
    --desk-space-3: 24px;
    --desk-space-4: 32px;
    --desk-space-5: 40px; /* V 未消費：保留給 B2/B3 版面 */
    --desk-space-6: 48px;
    --desk-row-height: 36px;
    --desk-card-min-height: 64px;
    --desk-chip-height: 28px;
    --desk-pill-height: 20px;
    --desk-control-size: 36px;
    --desk-topbar-height: 48px;
    --desk-today-width: 480px;
    --desk-today-width-compact: 400px;
    --desk-shell-max-width: 1760px;
    --desk-panel-width: 400px;
    --desk-radius-card: var(--r-card);
    --desk-radius-control: var(--r-btn);
    --desk-focus-width: 2px;
    --desk-focus-offset: 2px;

    /* 表面與文字只引用既有中性 token。工作 pill 直接用 --area-work。 */
    --desk-surface: var(--surface);
    --desk-surface-hover: var(--surface-2);
    --desk-text: var(--fg);
    --desk-text-secondary: var(--fg-dim);
    --desk-border: var(--line);
    --desk-border-strong: var(--fill);
    --desk-today: var(--accent);
    --desk-today-wash: color-mix(in srgb, var(--accent) 3.5%, transparent);
    --desk-selection-wash: color-mix(in srgb, var(--accent) 8%, transparent);
    --desk-load-track: var(--track);
    --desk-load-fill: var(--fg-dim);
    --desk-load-high: var(--fg);
    --desk-load-height: 8px;
    --desk-load-reference-hours: 8;
    --desk-load-step-hours: 1;
    /* 週欄頭日期列以下那一段的高度＝時數列＋負載條＋狀態字（含兩段下距）＝72px。過去欄頭沒有時數列與負載條，
       狀態區用它保留同樣高度，七欄欄身才從同一高度開始（spec 2026-10-02 欄位規則；最終審查 Minor 1）。
       日期列兩種欄頭共用同一個節點，不算在內；改 .dt-day-hours／.dt-load／.dt-day-status 的高度或下距要一起改這裡。 */
    --desk-day-head-body: calc(var(--desk-line-number) + var(--desk-space-1) + var(--desk-load-height) + var(--desk-space-1) + var(--desk-line-caption));

    /* 月密度（B3 才用）：固定分桶，跨月不重新正規化。 */
    --desk-density-0: var(--ink);
    --desk-density-1: var(--surface-2);
    --desk-density-2: var(--track);
    --desk-density-3: var(--fg-dim);
    --desk-density-4: var(--fg);
    --desk-density-text-dark: var(--ink);
    --desk-density-text-light: var(--fg);
    --desk-density-cut-1-hours: 2;
    --desk-density-cut-2-hours: 4;
    --desk-density-cut-3-hours: 8;
    --desk-density-unknown-dot: var(--fg-dim);
    --desk-month-cell-height: 96px;     /* codex .month-cell{height:96px}；B3 追加，不覆寫既有 token */

    /* 季（B3 才用）：中性實心＝任務比例；虛線＝pace；斜紋＝落後區間。 */
    --desk-goal-track: var(--track);
    --desk-goal-fill: var(--fg-dim);
    --desk-pace: var(--fg);
    --desk-gap: var(--at-risk);
    --desk-gap-wash: color-mix(in srgb, var(--at-risk) 14%, transparent);
    --desk-goal-height: 24px;
    --desk-kr-height: 8px;
    --desk-pace-width: 2px;
    --desk-now-width: 2px;
    --desk-quarter-label-width: 256px;  /* codex .quarter{--label-width:256px}；B3 追加 */
    --desk-quarter-tail-width: 64px;    /* codex .quarter{--tail-width:64px}；尾標「→ 12/31」不可被裁掉 */
    --desk-shadow-panel: -16px 0 32px rgba(0, 0, 0, .24);
    --desk-shadow-toast: 0 8px 24px rgba(0, 0, 0, .32);
    --desk-on-accent: #fff;

    /* 動態：拖曳／放置／撤銷／面板／月到週。減少動態時 styles.css:718 全域關掉 animation，JS 端另用 prefersReducedMotion() 跳過等待。 */
    --desk-duration-drop: 160ms;
    --desk-duration-landed: 600ms;   /* 落定閃框：與手機 styles.css .drag-landed 同長；drag-slot.js LANDED_WINDOW_MS 要比它略長 */
    --desk-duration-toast-in: 160ms;
    --desk-duration-toast-out: 120ms;
    --desk-duration-panel-in: 220ms;
    --desk-duration-panel-out: 180ms;
    --desk-duration-month-out: 100ms;
    --desk-duration-week-in: 180ms;
    --desk-duration-reduced: 1ms;
    --desk-undo-window: 5000ms;
    --desk-ease-out: cubic-bezier(.16, 1, .3, 1);
    --desk-ease-in: cubic-bezier(.4, 0, 1, 1);
    --desk-ease-move: cubic-bezier(.2, 0, 0, 1);
    --desk-ease-countdown: linear;
    --desk-drag-source-opacity: .36;
    --desk-toast-travel: 8px;
    --desk-panel-travel: 32px;
    --desk-scale-travel: 8px;
  }

  .dt-root { display: none; }
  html[data-desktop] .dt-root {
    display: flex; flex-direction: column; height: 100dvh;
    background: var(--ink); color: var(--desk-text);
    font-family: var(--desk-font-family);
    font-size: var(--desk-font-body); line-height: var(--desk-line-body);
  }

  /* I1（final-review.md）：--dt-col／--dt-gap 宣告在 html[data-desktop] 上（不是 .dt-root），
     因為 #toast-stack 是 .dt-root 的兄弟節點（都掛在 body 下），自訂屬性不跨兄弟繼承——
     宣告在 .dt-root 上時 html[data-desktop] .toast-stack 的 var(--dt-col) 取不到值，
     left 在 computed-value time 失效退回 auto，toast 因此貼在畫布左緣壓住「今天」欄。
     宣告在 html[data-desktop] 上兩者都是它的子孫，才能真的繼承到。*/
  html[data-desktop] { --dt-col: var(--desk-today-width-compact); --dt-gap: var(--desk-space-3); }

  .dt-topbar {
    display: flex; align-items: center; gap: var(--desk-space-3);
    height: var(--desk-topbar-height); padding: 0 var(--desk-space-3); flex: 0 0 auto;
    border-bottom: 1px solid var(--desk-border); background: var(--desk-surface);
  }
  .dt-wordmark { font-size: var(--desk-font-compact); letter-spacing: .1em; font-weight: var(--desk-weight-heading); color: var(--desk-today); }
  .dt-topdate { color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  .dt-grow { flex: 1 1 auto; }
  .dt-tabs { display: flex; gap: var(--desk-space-1); align-self: stretch; }
  .dt-tab {
    appearance: none; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
    color: var(--desk-text-secondary); font: inherit; font-size: var(--desk-font-compact); padding: 0 var(--desk-space-2);
    min-height: 0; min-width: 0; border-radius: 0;
  }
  .dt-tab.on { color: var(--desk-text); border-bottom-color: var(--desk-today); }
  .dt-tab[aria-disabled="true"] { color: var(--fg-mute); cursor: default; }
  .dt-ic {
    width: 32px; height: 32px; min-height: 0; min-width: 0; padding: 0; display: grid; place-items: center;
    appearance: none; border: 0; background: transparent; color: var(--desk-text-secondary); cursor: default; border-radius: var(--desk-radius-control);
  }
  .dt-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

  .dt-body {
    display: grid; grid-template-columns: var(--dt-col) minmax(0, 1fr);
    gap: var(--dt-gap); padding: var(--dt-gap);
    flex: 1 1 auto; min-height: 0; width: 100%;
  }
  .dt-col {
    min-height: 0; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  }
  .dt-col-today { display: flex; flex-direction: column; }
  .dt-canvas:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: var(--desk-focus-offset); }
  /* 週畫布：畫布欄自己不捲，捲動交給每一欄的卡片區（codex 01「任務多時只捲動該日清單」） */
  .dt-canvas-week { overflow: hidden; display: flex; flex-direction: column; }
  .dt-week { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

  .dt-panel {
    position: fixed; inset: var(--desk-topbar-height) 0 0 auto; width: var(--desk-panel-width);
    background: var(--desk-surface); border-left: 1px solid var(--desk-border);
    box-shadow: var(--desk-shadow-panel); overflow: hidden; z-index: 20;
    display: flex; flex-direction: column;
  }
  html[data-desktop] .dt-panel { display: flex; animation: dt-panel-in var(--desk-duration-panel-in) var(--desk-ease-out) both; }
  html[data-desktop] .dt-panel[hidden] { display: none; }
  .dt-panel-leaving { animation: dt-panel-out var(--desk-duration-panel-out) var(--desk-ease-in) forwards; }
  @keyframes dt-panel-in { from { opacity: 0; transform: translateX(var(--desk-panel-travel)); } }
  @keyframes dt-panel-out { to { opacity: 0; transform: translateX(var(--desk-panel-travel)); } }
  .dt-panel-head { display: flex; align-items: center; height: 56px; padding: var(--desk-space-2) var(--desk-space-3); border-bottom: 1px solid var(--desk-border); }
  .dt-panel-kicker { color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  .dt-panel-close {
    margin-left: auto; appearance: none; border: 0; background: transparent;
    color: var(--desk-text-secondary); font: inherit; font-size: var(--desk-font-caption); cursor: pointer;
    min-height: 0; min-width: 0;
  }
  .dt-panel-title {
    width: calc(100% - 2 * var(--desk-space-3)); margin: var(--desk-space-3) var(--desk-space-3) var(--desk-space-2);
    appearance: none; font: inherit; font-size: var(--desk-font-heading); line-height: var(--desk-line-heading);
    font-weight: var(--desk-weight-strong);
    color: var(--desk-text); background: transparent; border: 0; border-bottom: 1px solid var(--desk-border); padding: 4px 0;
  }
  .dt-pf { display: grid; grid-template-columns: var(--desk-space-6) 1fr; gap: var(--desk-space-2); padding: var(--desk-space-1) var(--desk-space-3); align-items: start; }
  .dt-pf-k { color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-chip-height); }
  .dt-pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .dt-chip { height: var(--desk-chip-height); line-height: var(--desk-line-caption); padding: 0 var(--desk-space-1); font-size: var(--desk-font-caption); min-height: 0; min-width: 0; }
  .dt-pf-record { color: var(--fg-dim); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); }
  .dt-pf-empty { color: var(--fg-mute); font-size: var(--desk-font-caption); }
  /* 唯讀詳情（spec 2026-10-02：只存在於紀錄的任務）：標題是純文字、欄位寫值，不放 chip 與輸入框。 */
  .dt-panel-title-readonly { overflow-wrap: anywhere; }
  .dt-panel-note { margin: 0 var(--desk-space-3) var(--desk-space-1); color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); }
  .dt-pf-v { color: var(--desk-text); font-size: var(--desk-font-caption); line-height: var(--desk-chip-height); overflow-wrap: anywhere; }
  /* 目標草稿的期間列（spec B D2）：.dt-pf 是 grid 48px 1fr——自訂起迄與預覽都放第二欄（chips 下一行）。 */
  .dt-period-custom { grid-column: 2; display: flex; align-items: center; gap: var(--desk-space-1); }
  .dt-period-input {
    font: inherit; font-size: var(--desk-font-caption); color: var(--desk-text); background: transparent;
    border: 1px solid var(--desk-border); border-radius: var(--desk-radius-control); height: var(--desk-chip-height);
    padding: 0 var(--desk-space-1); min-height: 0; min-width: 0;
  }
  .dt-period-input:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: var(--desk-focus-offset); }
  .dt-period-arrow { color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  .dt-period-preview { grid-column: 2; color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); }
  .dt-panel-date-input, .dt-panel-time-input { position: absolute; opacity: 0; pointer-events: none; }
  .dt-pf-links { display: flex; flex-wrap: wrap; gap: 6px; }
  .dt-link-chip { display: inline-flex; gap: 6px; align-items: center; background: var(--surface-2); border-radius: 999px; padding: 2px 8px; font-size: var(--desk-font-caption); }
  .dt-link-chip button { appearance: none; border: 0; background: transparent; color: var(--fg-mute); cursor: pointer; font: inherit; min-height: 0; min-width: 0; }
  /* .dt-pf 是 grid 48px 1fr；.dt-link-picker 是 dt-pf-link 欄位的第三個子節點，不 span 兩欄的話
     auto-placement 會把它塞進第一欄（48px），KR 名稱被逼成一字一行、與上一列重疊（task-3-review.md）。
     grid-column: 1 / -1 讓它跨滿整列，flex/min-width 是列內容（.dt-link-row）撐寬與可縮的基準。 */
  .dt-link-picker { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; margin-top: 6px; grid-column: 1 / -1; flex: 1 1 100%; min-width: 0; }
  .dt-link-row { flex: 0 0 auto; display: flex; gap: var(--desk-space-1); appearance: none; border: 0; background: transparent; color: var(--desk-text); font: inherit; font-size: var(--desk-font-caption); text-align: left; padding: 4px 6px; cursor: pointer; min-height: 0; min-width: 0; }
  .dt-link-row:hover { background: var(--surface-2); }
  .dt-link-depth-1 { padding-left: 18px; }
  .dt-link-depth-2 { padding-left: 30px; }
  .dt-link-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dt-link-meta { margin-left: auto; color: var(--fg-mute); }
  /* 任務草稿目標列的 toggle（B 回饋修正 D1，用戶選 T1）：虛線 chip 與 .dt-day-add／.dt-kr-add 同一家；之前沒有專屬規則，
     吃到手機 styles.css 的 button 通用樣式（min-height: var(--tap)）與 UA 灰底。已連結（.chosen）＝實線＋主文字色；
     長路徑截斷。toggle＋✕ 包在同一個 flex 容器（head）裡，.dt-pf 的 grid 只看到一個子節點（P4）。 */
  .dt-link-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .dt-link-toggle {
    appearance: none; cursor: pointer; min-height: 0; min-width: 0; max-width: 100%; height: var(--desk-chip-height);
    padding: 0 var(--desk-space-1); border: 1px dashed var(--desk-border); border-radius: var(--desk-radius-card); background: transparent;
    color: var(--desk-text-secondary); font: inherit; font-size: var(--desk-font-caption); line-height: 1; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dt-link-toggle:hover { background: var(--desk-surface-hover); color: var(--desk-text); }
  .dt-link-toggle:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: calc(-1 * var(--desk-focus-width)); }
  .dt-link-toggle.chosen { border-style: solid; color: var(--desk-text); }
  .dt-link-clear {
    appearance: none; cursor: pointer; min-height: 0; min-width: 0; flex: 0 0 auto; width: var(--desk-chip-height); height: var(--desk-chip-height);
    border: 0; border-radius: var(--desk-radius-card); background: transparent; color: var(--desk-text-secondary);
    font: inherit; font-size: var(--desk-font-caption); line-height: 1;
  }
  .dt-link-clear:hover { background: var(--desk-surface-hover); color: var(--desk-text); }
  .dt-link-clear:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: calc(-1 * var(--desk-focus-width)); }
  /* 挑選器（B 回饋修正 D2）：max-height 50vh（面板中段本來就會捲）；過濾框是 picker 第一個子節點；
     每個分群容器是兩欄 grid——fold 鈕在第一欄、群首與子列都在第二欄（既有 .dt-link-depth-* 的 padding 照舊表達層級）。
     selector 不得以 .dt-link-row 結尾（B 修正 2 的判準要 .dt-link-row 規則恰一條）。 */
  .dt-link-filter {
    flex: 0 0 auto; appearance: none; font: inherit; font-size: var(--desk-font-caption); color: var(--desk-text); background: transparent;
    border: 1px solid var(--desk-border); border-radius: var(--desk-radius-control); height: var(--desk-chip-height);
    padding: 0 var(--desk-space-1); min-height: 0; min-width: 0; margin-bottom: 6px;
  }
  .dt-link-filter:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: calc(-1 * var(--desk-focus-width)); }
  .dt-link-count { flex: 0 0 auto; color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); padding: 0 6px 4px; }
  .dt-link-group { flex: 0 0 auto; display: grid; grid-template-columns: var(--desk-space-2) 1fr; align-items: start; }
  .dt-link-fold {
    grid-column: 1; appearance: none; border: 0; background: transparent; color: var(--desk-text-secondary); cursor: pointer;
    font: inherit; font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); padding: 4px 0; min-height: 0; min-width: 0; text-align: center;
  }
  .dt-link-fold:hover { color: var(--desk-text); }
  .dt-link-fold:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: calc(-1 * var(--desk-focus-width)); border-radius: var(--desk-radius-control); }
  .dt-link-group .dt-link-depth-0, .dt-link-group .dt-link-depth-1, .dt-link-group .dt-link-depth-2 { grid-column: 2; }
  /* 三段式（spec B D2）：面板本身不捲，中段自己捲，head／foot 永遠看得到。 */
  .dt-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .dt-panel-foot { display: flex; flex-wrap: wrap; gap: var(--desk-space-1); padding: var(--desk-space-2) var(--desk-space-3); border-top: 1px solid var(--desk-border); margin-top: auto; }
  /* 錯誤列佔滿一整行、排在按鈕上方（手機 .sheet-error 桌面版）；B1 只有節點，B2 才會顯示文字。 */
  .dt-panel-error { flex: 1 1 100%; color: var(--at-risk); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); }
  .dt-panel-error[hidden] { display: none; }
  .dt-panel-btn {
    flex: 1 1 0; appearance: none; font: inherit; font-size: var(--desk-font-compact); cursor: pointer;
    height: var(--desk-control-size); min-height: 0; min-width: 0; border-radius: var(--desk-radius-control);
    border: 1px solid var(--desk-border); background: transparent; color: var(--desk-text);
  }
  .dt-panel-btn:hover { background: var(--desk-surface-hover); }
  .dt-panel-danger { color: var(--at-risk); }

  .dt-colhead {
    display: flex; align-items: baseline; gap: var(--desk-space-2);
    padding: var(--desk-space-3) var(--desk-space-3) var(--desk-space-2); border-bottom: 1px solid var(--desk-border);
    position: sticky; top: 0; background: var(--desk-surface); z-index: 1;
  }
  .dt-colhead-title { margin: 0; font-size: var(--desk-font-date); line-height: var(--desk-line-number); font-weight: var(--desk-weight-heading); letter-spacing: -.02em; }
  .dt-meta { color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); }
  .dt-spacer { flex: 1 1 auto; }
  .dt-metrics { display: flex; gap: var(--desk-space-2); color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  .dt-metric b { color: var(--desk-text); font-size: var(--desk-font-body); font-weight: var(--desk-weight-strong); }

  .dt-chip.on { background: var(--desk-selection-wash); font-weight: var(--desk-weight-medium); }
  /* M5：面板「領域」列選中的領域 chip 用該領域色的洗色，不是通用的 selection-wash。 */
  .dt-chip.area-chip.on { background: color-mix(in srgb, var(--pill-color) 12%, transparent); }
  /* 象限 chip（B 回饋修正 D4，用戶選方案 B）：常駐 6px 色點、選中換該象限色（14% 洗色＋文字＋框線）。
     色值只引用手機 :root 的 --q1～--q4（styles.css），規則本體零色碼；.chip 是 inline-flex，色點用 margin-right 隔開文字。
     .dt-chip-qN.on 與上面 .dt-chip.on 同 specificity，靠後載順序蓋掉通用洗色。 */
  .dt-chip-q1::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; flex: 0 0 auto; background: var(--q1); }
  .dt-chip-q2::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; flex: 0 0 auto; background: var(--q2); }
  .dt-chip-q3::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; flex: 0 0 auto; background: var(--q3); }
  .dt-chip-q4::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; flex: 0 0 auto; background: var(--q4); }
  .dt-chip-q1.on { background: color-mix(in srgb, var(--q1) 14%, transparent); color: var(--q1); border-color: var(--q1); font-weight: var(--desk-weight-medium); }
  .dt-chip-q2.on { background: color-mix(in srgb, var(--q2) 14%, transparent); color: var(--q2); border-color: var(--q2); font-weight: var(--desk-weight-medium); }
  .dt-chip-q3.on { background: color-mix(in srgb, var(--q3) 14%, transparent); color: var(--q3); border-color: var(--q3); font-weight: var(--desk-weight-medium); }
  .dt-chip-q4.on { background: color-mix(in srgb, var(--q4) 14%, transparent); color: var(--q4); border-color: var(--q4); font-weight: var(--desk-weight-medium); }

  .dt-keybar {
    position: sticky; bottom: 0; display: flex; gap: var(--desk-space-2); margin-top: auto;
    padding: var(--desk-space-2) var(--desk-space-3); border-top: 1px solid var(--desk-border);
    background: var(--desk-surface); color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption);
  }
  /* 今天欄「＋」（spec B D1）：六個就地入口裡唯一實色的一顆；尺寸借 --desk-chip-height（28px）。
     焦點環用 --desk-today 實色 outline（A 延後項：FAB 吃全域 button:focus-visible 的 --accent 疊在 --accent 底上不明顯）。 */
  .dt-keybar-add {
    flex: 0 0 auto; align-self: center; width: var(--desk-chip-height); height: var(--desk-chip-height); border-radius: 50%;
    border: 0; background: var(--accent); color: var(--desk-on-accent);
    font: inherit; font-size: var(--desk-font-body); line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; min-height: 0; min-width: 0;
  }
  .dt-keybar-add:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: var(--desk-focus-offset); }
  .dt-keycap {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px;
    border: 1px solid var(--desk-border); border-radius: 4px; font: var(--desk-font-caption)/var(--desk-line-caption) var(--desk-font-family); color: var(--desk-text-secondary);
  }

  .dt-sec {
    display: flex; align-items: center; gap: 6px;
    padding: var(--desk-space-1) var(--desk-space-3); color: var(--desk-text-secondary);
    font-size: var(--desk-font-caption); line-height: var(--desk-line-caption);
  }
  .dt-sec-n { color: var(--fg-dim); }
  .dt-sec-overdue::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--at-risk); }
  .dt-sec-timed { color: var(--desk-text); }
  .dt-time {
    flex: 0 0 auto; color: var(--desk-text-secondary); font-size: var(--desk-font-caption);
    font-variant-numeric: tabular-nums;
  }

  .dt-sec-list { display: flex; flex-direction: column; }

  .dt-row {
    display: flex; align-items: center; gap: var(--desk-space-1);
    padding: var(--desk-space-1) var(--desk-space-3); min-height: var(--desk-row-height); cursor: default; position: relative;
  }
  .dt-row:hover { background: var(--desk-surface-hover); }
  .dt-row.is-selected { background: var(--desk-selection-wash); box-shadow: inset 2px 0 0 var(--desk-today); }
  .dt-row:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: calc(-1 * var(--desk-focus-width)); }
  .dt-check {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--desk-border-strong); background: transparent; cursor: pointer; padding: 0;
    display: grid; place-items: center; color: var(--ink); font-size: var(--desk-font-caption); line-height: 1; min-height: 0; min-width: 0;
  }
  .dt-row-overdue .dt-check { border-color: var(--at-risk); }
  .dt-row-overdue .dt-day { color: var(--at-risk); }
  .dt-row-done .dt-check { background: var(--track); border-color: var(--track); cursor: default; }
  .dt-row-done .dt-check::after { content: '✓'; color: var(--desk-text); }
  .dt-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dt-row-done .dt-title { color: var(--desk-text-secondary); text-decoration: line-through; }
  .dt-rowmeta { display: flex; align-items: center; gap: var(--desk-space-1); flex: 0 0 auto; color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  .dt-day { color: var(--fg-mute); }
  .dt-row .priority-dot { width: 7px; height: 7px; }
  .dt-rowmeta .area-pill {
    height: var(--desk-pill-height); padding: 0 var(--desk-space-1);
    font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); font-weight: var(--desk-weight-medium);
    background: transparent; border-color: var(--desk-border); color: var(--desk-text-secondary);
  }
  .dt-rowmeta .area-pill.area-tone-work { border-color: var(--area-work); color: var(--area-work); }

  .dt-hover { display: none; gap: 4px; position: absolute; right: 16px; background: var(--surface-2); padding-left: 8px; }
  .dt-row:hover .dt-hover, .dt-row:focus-within .dt-hover { display: flex; }
  .dt-hover-btn {
    appearance: none; border: 1px solid var(--desk-border); background: var(--desk-surface);
    color: var(--desk-text-secondary); font: inherit; font-size: var(--desk-font-caption); border-radius: 7px;
    padding: 2px var(--desk-space-1); cursor: pointer; min-height: 0; min-width: 0;
  }
  .dt-hover-btn:hover { color: var(--fg); border-color: var(--fg-mute); }
  /* #4 桌面「⋯」真選單（notes D6）：選單開著時列失去 :focus-within，hover 鈕仍要留在畫面上，
     Esc 之後焦點才回得到「⋯」（desktop.js openRowMenu 掛 is-menu-open）。backdrop 透明、只接
     「點外面關閉」——這是輕量 popover，不像設定面板那樣壓暗整頁；z-index 與 toast 同層（30）、
     低於 confirm／設定的 40。選單 fixed 定位由 JS 錨在「⋯」右下（放不下翻上方）。 */
  .dt-row.is-menu-open .dt-hover { display: flex; }
  .dt-row-menu-backdrop { position: fixed; inset: 0; z-index: 30; }
  .dt-row-menu {
    position: fixed; min-width: 200px; padding: var(--desk-space-1) 0;
    display: flex; flex-direction: column;
    border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--desk-shadow-toast);
    animation: dt-fade var(--desk-duration-toast-in) var(--desk-ease-out) both;
  }
  .dt-row-menu-item {
    appearance: none; border: 0; background: transparent; color: var(--desk-text); text-align: left;
    font: inherit; font-size: var(--desk-font-body); line-height: var(--desk-line-body);
    padding: var(--desk-space-1) var(--desk-space-2); cursor: pointer;
  }
  .dt-row-menu-item:hover, .dt-row-menu-item:focus-visible { background: var(--surface-2); }
  /* 焦點指示：--surface 與 --surface-2 對比約 1.09:1，光靠底色看不出焦點在哪一項，
     與 .dt-row:focus-visible 同款用 --desk-today 實色 outline 畫在項目內側。 */
  .dt-row-menu-item:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: calc(-1 * var(--desk-focus-width)); }
  .dt-empty { padding: var(--desk-space-4) var(--desk-space-3); color: var(--desk-text-secondary); text-align: center; }
  .dt-empty b, .dt-empty-title { display: block; font-size: var(--desk-font-subhead); line-height: var(--desk-line-heading); font-weight: var(--desk-weight-strong); color: var(--desk-text); }
  .dt-empty p { margin: var(--desk-space-1) 0 0; font-size: var(--desk-font-compact); }
  /* C1（最終審查）：月畫布 /api/future 失敗時的錯誤態重試鈕——外觀比照 .dt-panel-btn。
     .dt-okr-retry：OKR 失敗閂（季畫布／OKR 分段）同一顆鈕、同一套外觀。 */
  .dt-future-retry, .dt-okr-retry {
    margin-top: var(--desk-space-2); appearance: none; font: inherit; font-size: var(--desk-font-compact); cursor: pointer;
    height: var(--desk-control-size); min-height: 0; min-width: 0; padding: 0 var(--desk-space-2);
    border-radius: var(--desk-radius-control); border: 1px solid var(--desk-border); background: transparent; color: var(--desk-text);
  }
  .dt-future-retry:hover, .dt-okr-retry:hover { background: var(--desk-surface-hover); }

  @media (min-width: 1280px) { html[data-desktop] { --dt-col: var(--desk-today-width); } }
  @media (min-width: 1920px) { .dt-body { max-width: var(--desk-shell-max-width); margin: 0 auto; } }

  /* toast：桌面改到畫布左下角（不遮今天欄、不被 400px 面板蓋），z-index 高於面板 */
  html[data-desktop] .toast-stack {
    left: calc(var(--dt-col) + 2 * var(--dt-gap)); right: auto; bottom: var(--desk-space-3);
    transform: none; width: auto; max-width: 480px; z-index: 30;
  }
  /* I1：≥1920 起 .dt-body 置中鎖寬（上面那個 @media），toast 的水平基準要跟著從畫布左緣
     位移半個留白，否則仍會貼著視窗左緣、脫離已置中的「今天」欄。同選擇器同特異度時後者
     蓋前者，這條必須排在上面那個基底 .toast-stack 規則之後才會生效（放進前一個 @media
     反而會被後面的基底規則蓋掉——已實測驗證）。 */
  @media (min-width: 1920px) {
    html[data-desktop] .toast-stack {
      left: calc((100vw - var(--desk-shell-max-width)) / 2 + var(--dt-col) + 2 * var(--dt-gap));
    }
  }
  .dt-toast {
    position: relative; overflow: hidden;
    padding: var(--desk-space-2) var(--desk-space-3); gap: var(--desk-space-2);
    background: var(--desk-surface); border: 1px solid var(--desk-border-strong);
    box-shadow: var(--desk-shadow-toast);
    font-size: var(--desk-font-body); line-height: var(--desk-line-body); min-height: 0;
    animation: dt-toast-in var(--desk-duration-toast-in) var(--desk-ease-out) both;
  }
  .dt-toast-leaving { animation: dt-toast-out var(--desk-duration-toast-out) var(--desk-ease-in) forwards; }
  .dt-toast-error { border-color: var(--at-risk); }
  .dt-toast .dt-toast-action { min-height: 0; min-width: 0; padding: 0; color: var(--desk-today); font-weight: var(--desk-weight-strong); }
  /* 多日任務：打勾 toast 兩鈕〔撤銷〕〔明天還要做〕——訊息單行截斷（同手機 .toast-message）、鈕群不縮不換行；
     兩顆同色同重（都是對剛才那一勾的後續決定，不分主次），靠髮絲分隔線區分。
     截斷只限帶鈕的 toast（.dt-toast-with-actions 由 pushToast 加）：error toast 是桌面唯一的錯誤通道，
     沒有手機 #error-row 備援，伺服器訊息再長都得完整換行顯示，不能被吃掉。 */
  .dt-toast-with-actions .dt-toast-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dt-toast-actions { display: flex; align-items: center; flex: 0 0 auto; gap: var(--desk-space-2); white-space: nowrap; }
  .dt-toast-actions .dt-toast-action + .dt-toast-action { padding-left: var(--desk-space-2); border-left: 1px solid var(--desk-border); }
  .dt-toast-secs { flex: 0 0 auto; color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  .dt-toast-meter {
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--desk-today);
    transform-origin: left; animation: dt-countdown var(--desk-undo-window) var(--desk-ease-countdown) forwards;
  }
  @keyframes dt-toast-in { from { opacity: 0; transform: translateY(var(--desk-toast-travel)); } }
  @keyframes dt-toast-out { to { opacity: 0; transform: translateY(var(--desk-toast-travel)); } }
  @keyframes dt-countdown { to { transform: scaleX(0); } }
  .dt-confirm-backdrop {
    position: fixed; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .5);
    animation: dt-fade var(--desk-duration-toast-in) var(--desk-ease-out) both;
  }
  @keyframes dt-fade { from { opacity: 0; } }
  .dt-confirm {
    width: 320px; padding: 20px; border-radius: var(--r-card);
    background: var(--surface); border: 1px solid var(--line);
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  }
  .dt-confirm-title, .dt-confirm-text { grid-column: 1 / -1; margin: 0; }
  .dt-confirm-title { font-size: var(--desk-font-subhead); line-height: var(--desk-line-heading); }
  .dt-confirm-text { color: var(--desk-text-secondary); font-size: var(--desk-font-compact); }
  .dt-confirm button {
    appearance: none; font: inherit; padding: 8px 0; border-radius: var(--r-btn); cursor: pointer;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--fg);
  }
  .dt-confirm-accept { background: var(--accent); border-color: var(--accent); color: #fff; }

  .dt-okr { padding: var(--desk-space-2) var(--desk-space-3) var(--desk-space-3); }
  /* 領域標題列：B2 起是 flex——標題文字在左、「＋」靠右（spec B D1 領域旁「＋」）。 */
  .dt-okr-area { display: flex; align-items: center; gap: var(--desk-space-1); margin: var(--desk-space-2) 0 var(--desk-space-1); color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  /* 領域旁「＋」（spec B D1）：淡色小字常駐（不用 hover 才出現，鍵盤與觸控板都找得到）；零目標空狀態內那顆同一個 class。 */
  .dt-okr-area-add {
    margin-left: auto; appearance: none; cursor: pointer; min-height: 0; min-width: 0; height: var(--desk-chip-height);
    padding: 0 var(--desk-space-1); border: 0; border-radius: var(--desk-radius-control); background: transparent;
    color: var(--desk-text-secondary); font: inherit; font-size: var(--desk-font-caption); line-height: 1;
  }
  .dt-okr-area-add:hover { background: var(--desk-surface-hover); color: var(--desk-text); }
  .dt-okr-area-add:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: calc(-1 * var(--desk-focus-width)); }
  .dt-empty .dt-okr-area-add { display: block; margin: var(--desk-space-2) auto 0; padding: 0 var(--desk-space-2); border: 1px dashed var(--desk-border); }
  .dt-okr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--desk-space-1); }
  .dt-tile {
    display: flex; flex-direction: column; gap: var(--desk-space-1); cursor: pointer; min-height: var(--desk-card-min-height);
    padding: var(--desk-space-2); border: 1px solid var(--desk-border); border-left: 3px solid var(--desk-border);
    border-radius: var(--desk-radius-card); background: var(--desk-surface-hover);
  }
  .dt-tile:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: var(--desk-focus-offset); }
  .dt-tile-expanded { grid-column: 1 / -1; }
  .dt-tile-label { color: var(--fg-mute); font-size: var(--desk-font-caption); }
  .dt-tile-title { font-size: var(--desk-font-body); }
  .dt-bar { height: 4px; border-radius: 2px; background: var(--desk-goal-track); overflow: hidden; }
  .dt-bar > i { display: block; height: 100%; background: var(--desk-goal-fill); }
  .dt-tile.area-tone-work { border-left-color: var(--area-work); }
  .dt-tile-foot, .dt-kr-foot { display: flex; gap: var(--desk-space-1); color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  .dt-risk { color: var(--at-risk); margin-left: auto; }
  .dt-ok { color: var(--on-track); margin-left: auto; }
  .dt-krs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
  .dt-kr { display: flex; flex-direction: column; gap: 5px; }
  .dt-kr-title { font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); }
  .dt-kr-tasks { display: flex; flex-direction: column; gap: 2px; color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  .dt-kr-task.done { color: var(--fg-mute); text-decoration: line-through; }
  .dt-kr-task.overdue { color: var(--at-risk); }
  /* KR 列可程式化聚焦（建完 KR 焦點落它，B2/T6），焦點環與 .dt-tile 同款。 */
  .dt-kr:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: var(--desk-focus-offset); border-radius: var(--desk-radius-control); }
  /* 「＋ KR」（spec B D1）：只在目標展開後出現、.dt-krs 最後一格、虛線淡色常駐（與 .dt-day-add 同款）。 */
  .dt-kr-add {
    appearance: none; cursor: pointer; min-height: 0; min-width: 0; height: var(--desk-chip-height); align-self: start;
    border: 1px dashed var(--desk-border); border-radius: var(--desk-radius-card); background: transparent;
    color: var(--desk-text-secondary); font: inherit; font-size: var(--desk-font-caption); line-height: 1;
  }
  .dt-kr-add:hover { background: var(--desk-surface-hover); color: var(--desk-text); }
  .dt-kr-add:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: calc(-1 * var(--desk-focus-width)); }
  /* KR 底「＋ 任務」（spec B D1）：淡色小字常駐、靠左對齊任務清單。 */
  .dt-kr-task-add {
    appearance: none; cursor: pointer; min-height: 0; min-width: 0; align-self: start; padding: 2px 0; border: 0; background: transparent;
    color: var(--desk-text-secondary); font: inherit; font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); text-align: left;
  }
  .dt-kr-task-add:hover { color: var(--desk-text); }
  .dt-kr-task-add:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: var(--desk-focus-offset); border-radius: var(--desk-radius-control); }
  .dt-seg { display: flex; gap: 2px; }
  .dt-seg-btn {
    appearance: none; border: 0; background: transparent; color: var(--desk-text-secondary);
    font: inherit; font-size: var(--desk-font-caption); padding: 4px 10px; border-radius: 7px; cursor: pointer; min-height: 0; min-width: 0;
  }
  .dt-seg-btn.on { background: var(--surface-2); color: var(--fg); }
  .dt-seg-btn[aria-disabled="true"] { color: var(--fg-mute); cursor: default; }

  /* ── 週畫布（codex 01／04／07A）───────────────────────────────────────── */
  .dt-rangebar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--desk-space-2);
    padding: 0 var(--desk-space-3) var(--desk-space-2); flex: 0 0 auto;
  }
  .dt-range-title { margin: 0; font-size: var(--desk-font-subhead); line-height: var(--desk-line-heading); font-weight: var(--desk-weight-strong); }
  .dt-range-note { color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); }
  /* 翻週按鈕列（spec 2026-10-02 決策 2）：緊跟在標題後面（margin-right: auto 吃掉剩餘空間，尾註仍靠右）；
     外觀比照 .dt-future-retry。「回到今天」在首頁窗時 disabled。 */
  .dt-week-navs { display: flex; gap: var(--desk-space-1); margin-right: auto; }
  .dt-week-nav {
    appearance: none; font: inherit; font-size: var(--desk-font-caption); cursor: pointer;
    height: var(--desk-control-size); min-height: 0; min-width: 0; padding: 0 var(--desk-space-2);
    border-radius: var(--desk-radius-control); border: 1px solid var(--desk-border); background: transparent; color: var(--desk-text);
  }
  .dt-week-nav:hover { background: var(--desk-surface-hover); }
  .dt-week-nav:disabled { color: var(--desk-text-secondary); background: transparent; cursor: default; }
  .dt-week-nav:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: var(--desk-focus-offset); }
  .dt-week-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr);
    margin: 0 var(--desk-space-2) var(--desk-space-2); min-height: 0; flex: 1 1 auto;
    border-bottom: 1px solid var(--desk-border);
  }
  .dt-day-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; border-left: 1px solid var(--desk-border); }
  .dt-day-col:last-child { border-right: 1px solid var(--desk-border); }
  .dt-day-past { background: var(--desk-surface); }
  .dt-day-today { background: var(--desk-today-wash); box-shadow: inset 0 2px var(--desk-today); }
  .dt-day-head { padding: var(--desk-space-2) var(--desk-space-1) var(--desk-space-1); border-bottom: 1px solid var(--desk-border); flex: 0 0 auto; }
  .dt-day-date {
    display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--desk-space-1);
    color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption);
  }
  .dt-day-date b { color: var(--desk-text); font-size: var(--desk-font-date); line-height: var(--desk-line-date); font-weight: var(--desk-weight-medium); }
  .dt-day-today .dt-day-date b, .dt-day-today .dt-day-date span { color: var(--desk-today); }
  /* height 釘在 --desk-line-number：大字級（L）時基線對齊會把這列撐到 33px，比過去欄頭保留的 --desk-day-head-body 多 1px（最終審查 Minor 1 實測）。 */
  .dt-day-hours {
    display: flex; align-items: baseline; gap: var(--desk-space-1); height: var(--desk-line-number); margin-bottom: var(--desk-space-1);
    color: var(--desk-text-secondary); font-size: var(--desk-font-caption); white-space: nowrap;
  }
  .dt-day-hours b {
    color: var(--desk-text); font-size: var(--desk-font-number); line-height: var(--desk-line-number);
    font-weight: var(--desk-weight-medium); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  }
  .dt-load {
    position: relative; height: var(--desk-load-height); margin-bottom: var(--desk-space-1);
    background: var(--desk-load-track); border-radius: 2px; overflow: hidden;
  }
  .dt-load > i { display: block; height: 100%; width: 0; background: var(--desk-load-fill); }
  .dt-load-high > i { background: var(--desk-load-high); }
  /* 八格刻度＝每格 1h（--desk-load-step-hours），用底色畫格線，不另開 token */
  .dt-load::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(to right, transparent 0, transparent calc(12.5% - 1px), var(--ink) calc(12.5% - 1px), var(--ink) 12.5%);
  }
  /* 未知估時：整條換成點紋，不畫長度（codex 04「空白與未知分開」）。B2/Task5 對齊 codex：
     這顆點紋語意上就是「未知」，改回引用 --desk-density-unknown-dot（B3 月密度 token 裡
     唯一准許 B2 借用的一個，見 Global Constraints 與 task-5-brief 的消費測試）；底色與
     --desk-load-fill 同值，只是換一個語意更貼切的名字，不改變畫面。 */
  .dt-load-unknown { background: repeating-linear-gradient(90deg, var(--desk-density-unknown-dot) 0 1px, transparent 1px 8px); }
  .dt-load-unknown::after { content: none; }
  .dt-day-status { min-height: var(--desk-line-caption); color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dt-day-today .dt-day-status { color: var(--desk-text); }
  /* 過去欄（含昨日）欄頭「完成 N · 續做 M · 待做 K」（spec 2026-10-02）：可以換行，不用省略號——最要緊的「待做 K」在最後，
     1440 寬時單行會被截成「完成 1 · 續做 1 ·…」（最終審查 Important 3）。min-height 保留今天／未來欄頭的時數列＋負載條＋
     狀態字高度、字貼底，七欄欄頭等高、狀態字對齊同一條線；換行時往上長，不撐高欄頭（最終審查 Minor 1）。
     keep-all：只在「·」兩旁的空白換行，不把「待做」拆成「待／做」。 */
  .dt-day-past .dt-day-status {
    min-height: var(--desk-day-head-body); white-space: normal; word-break: keep-all; overflow: visible;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  /* 高密度：不能只靠負載條顏色分辨（codex 01「先分辨形狀，再讀顏色」），狀態字轉亮並帶 ↟ 記號。 */
  .dt-day-status-high { color: var(--desk-text); }
  .dt-day-status-high::before { content: '↟ '; color: var(--desk-today); }
  .dt-day-cards { display: flex; flex-direction: column; gap: var(--desk-space-1); padding: var(--desk-space-1); overflow: auto; min-height: 0; flex: 1 1 auto; }
  .dt-card {
    position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--desk-space-1);
    padding: var(--desk-space-1); min-height: var(--desk-card-min-height);
    border: 1px solid var(--desk-border); border-radius: var(--desk-radius-card); background: var(--desk-surface);
    font-size: var(--desk-font-compact); line-height: var(--desk-line-body);
    cursor: pointer;   /* B 回饋修正 D3：點卡開詳情 */
  }
  .dt-card-top { color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); font-variant-numeric: tabular-nums; }
  .dt-card-title { overflow-wrap: anywhere; font-weight: var(--desk-weight-medium); }
  .dt-card-meta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--desk-space-1);
    color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); white-space: nowrap;
  }
  .dt-card-done { background: var(--ink); }
  .dt-card-done .dt-card-title { color: var(--fg-mute); text-decoration: line-through; }
  .dt-card-done .dt-card-top::before { content: '✓ '; }
  .dt-card-overdue { border-style: dashed; border-color: var(--at-risk); }
  /* B 回饋修正 D3：可點的提示。拖放的空位是獨立的 .drag-slot（不是 .dt-card），不會被 hover 洗色蓋掉。 */
  .dt-card:hover { background: var(--desk-surface-hover); }
  .dt-day-empty { padding: var(--desk-space-2) 0; color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-body); }
  .dt-day-empty b { display: block; margin-bottom: var(--desk-space-1); color: var(--desk-text); font-size: var(--desk-font-subhead); font-weight: var(--desk-weight-regular); }
  .dt-day-empty p { margin: 0; }

  /* 紀錄卡（spec 2026-10-02）：某天完成或續做的唯讀紀錄。放在 .dt-day-records（拖放清單之外），虛線框與活卡區分；
     過去唯讀欄只有紀錄區，讓它吃滿欄高、自己捲動；昨日與今天欄的紀錄區不搶活卡清單的高度。 */
  .dt-day-records { display: flex; flex-direction: column; gap: var(--desk-space-1); padding: var(--desk-space-1); overflow: auto; min-height: 0; flex: 0 1 auto; }
  .dt-day-readonly .dt-day-records { flex: 1 1 auto; }
  .dt-day-group {
    margin: 0; padding: var(--desk-space-1) var(--desk-space-1) 0; flex: 0 0 auto;
    color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); font-weight: var(--desk-weight-medium);
  }
  .dt-record {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--desk-space-1); padding: var(--desk-space-1);
    border: 1px dashed var(--desk-border); border-radius: var(--desk-radius-card); background: transparent;
    font-size: var(--desk-font-compact); line-height: var(--desk-line-body); cursor: pointer;
  }
  .dt-record:hover { background: var(--desk-surface-hover); }
  .dt-record-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--desk-space-1);
    color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption);
  }
  .dt-record-kind { font-weight: var(--desk-weight-medium); }
  .dt-record-done .dt-record-kind::before { content: '✓ '; }
  .dt-record-title { overflow-wrap: anywhere; color: var(--desk-text-secondary); }
  .dt-record-meta { display: flex; font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); }
  .dt-record-status, .dt-record-empty, .dt-record-error p {
    margin: 0; color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-body);
  }
  .dt-record-error p { color: var(--at-risk); }
  /* 紀錄區的重試鈕：外觀比照 .dt-future-retry（另立一條規則，那條規則的選擇器有測試釘住）。 */
  .dt-history-retry {
    margin-top: var(--desk-space-1); appearance: none; font: inherit; font-size: var(--desk-font-caption); cursor: pointer;
    height: var(--desk-control-size); min-height: 0; min-width: 0; padding: 0 var(--desk-space-2);
    border-radius: var(--desk-radius-control); border: 1px solid var(--desk-border); background: transparent; color: var(--desk-text);
  }
  .dt-history-retry:hover { background: var(--desk-surface-hover); }

  /* 週欄「＋」列（spec B D1）：非過去日欄底、與卡片同寬、虛線淡色常駐（不用 hover 才出現，鍵盤與觸控板都找得到）；
     是 .dt-day-cards 的兄弟不是子節點（不進拖放清單），所以自己補左右／下邊距對齊卡片區的 padding。 */
  .dt-day-add {
    flex: 0 0 auto; margin: 0 var(--desk-space-1) var(--desk-space-1); height: var(--desk-chip-height);
    appearance: none; cursor: pointer; min-height: 0; min-width: 0;
    border: 1px dashed var(--desk-border); border-radius: var(--desk-radius-card); background: transparent;
    color: var(--desk-text-secondary); font: inherit; font-size: var(--desk-font-caption); line-height: 1;
  }
  .dt-day-add:hover { background: var(--desk-surface-hover); color: var(--desk-text); }
  .dt-day-add:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: calc(-1 * var(--desk-focus-width)); }
  /* 建完任務焦點落到新卡（weekCard tabIndex=-1），焦點環與 .dt-tile 同款。 */
  .dt-card:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: var(--desk-focus-offset); }

  /* 拖放（spec 2026-09-24 D2／D3，drag-slot.js）：PDND 不搬 DOM——原卡留原位變淡、落點一格虛線空位、
     浮動標籤寫「→ 9/25 第 2 位」、不可放的清單紅虛線框＋原因、落定閃藍框一次。 */
  .drag-source { opacity: var(--desk-drag-source-opacity); }
  .drag-slot {
    flex: 0 0 auto; margin: 0; border: 2px dashed var(--desk-today); border-radius: var(--desk-radius-card);
    background: var(--desk-selection-wash);
  }
  .drag-reject { outline: 2px dashed var(--at-risk); outline-offset: calc(var(--desk-focus-offset) * -1); }
  .drag-tag {
    position: fixed; z-index: 1000; display: none; pointer-events: none; white-space: nowrap;
    padding: 2px var(--desk-space-1); border-radius: var(--desk-radius-card);
    background: var(--desk-today); color: var(--ink); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption);
  }
  .drag-tag-bad { background: var(--at-risk); }
  .drag-slot-grid { min-height: var(--desk-card-min-height); }
  .drag-landed { animation: drag-landed var(--desk-duration-landed) var(--desk-ease-move) 1; }
  @keyframes drag-landed {
    from { box-shadow: 0 0 0 2px var(--desk-today); }
    to { box-shadow: 0 0 0 2px transparent; }
  }
  @media (prefers-reduced-motion: reduce) { .drag-landed { animation: none; } }
  /* 拖曳把手（spec 2026-10-05 決策 3）：蓋掉 styles.css 的手機尺寸 */
  .drag-grip {
    display: grid; place-items: center; flex: 0 0 var(--desk-space-3); width: var(--desk-space-3); min-height: var(--desk-space-3);
    color: var(--fg-dim); font-size: var(--desk-font-body); line-height: 1; cursor: grab; user-select: none;
  }
  .drag-grip:hover, .dt-row.is-selected .drag-grip, .dt-row:focus-visible .drag-grip, .dt-card:focus-visible .drag-grip,
  .dt-tile:focus-visible .drag-grip, .dt-kr:focus-visible .drag-grip { color: var(--fg); }
  .dt-row > .drag-grip { align-self: stretch; margin: calc(-1 * var(--desk-space-1)) 0; }
  .dt-row.has-drag-grip .dt-hover { right: calc(var(--desk-space-3) * 2 + var(--desk-space-1)); }
  .dt-tile.has-drag-grip, .dt-kr.has-drag-grip { position: relative; }
  .dt-card > .drag-grip, .dt-tile > .drag-grip, .dt-kr > .drag-grip {
    position: absolute; top: calc(var(--desk-space-1) / 2); right: calc(var(--desk-space-1) / 2);
  }
  .dt-card.has-drag-grip > :first-child, .dt-tile.has-drag-grip > :first-child, .dt-kr.has-drag-grip > :first-child {
    padding-right: var(--desk-space-3);
  }
  .dt-kr.has-drag-grip > .dt-kr-title { padding-right: var(--desk-space-4); }

  /* ── B3 月畫布：等大密度格，固定分桶不重新正規化（決策 6、codex 02） ── */
  .dt-month { display: flex; flex-direction: column; gap: var(--desk-space-2); padding: var(--desk-space-2) var(--desk-space-3) var(--desk-space-3); overflow: auto; }
  .dt-month-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--desk-space-2); }
  .dt-month-title { margin: 0; font-size: var(--desk-font-subhead); line-height: var(--desk-line-heading); font-weight: var(--desk-weight-strong); }
  .dt-month-note { color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  /* 翻月列（spec 2026-10-02 決策 3）：緊跟在標題後面（margin-right: auto 把讀取狀態與說明推到右邊）；外觀比照 .dt-week-nav。 */
  .dt-month-navs { display: flex; gap: var(--desk-space-1); margin-right: auto; }
  .dt-month-nav {
    appearance: none; font: inherit; font-size: var(--desk-font-caption); cursor: pointer;
    height: var(--desk-control-size); min-height: 0; min-width: 0; padding: 0 var(--desk-space-2);
    border-radius: var(--desk-radius-control); border: 1px solid var(--desk-border); background: transparent; color: var(--desk-text);
  }
  .dt-month-nav:hover { background: var(--desk-surface-hover); }
  .dt-month-nav:disabled { color: var(--desk-text-secondary); background: transparent; cursor: default; }
  .dt-month-nav:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: var(--desk-focus-offset); }
  /* 過去紀錄的讀取狀態（讀取中／失敗＋重試）在頭列同一行排開；重試鈕沿用 .dt-history-retry，只拿掉它在週欄裡的上邊距。 */
  .dt-month-history, .dt-month-history .dt-record-error { display: flex; align-items: center; gap: var(--desk-space-1); }
  .dt-month-history .dt-history-retry { margin-top: 0; }
  .dt-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--desk-space-1); }
  .dt-cal-wd { text-align: center; color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); padding: var(--desk-space-1) 0; }
  .dt-mcell {
    appearance: none; font: inherit; text-align: left; cursor: pointer;
    min-height: 0; min-width: 0; height: var(--desk-month-cell-height);
    padding: var(--desk-space-1) var(--desk-space-2);
    border: 1px solid var(--desk-border); border-radius: var(--desk-radius-card);
    display: flex; flex-direction: column; position: relative;
    color: var(--desk-density-text-light); background: var(--desk-density-0);
  }
  .dt-mcell.lv-0 { background: var(--desk-density-0); }
  .dt-mcell.lv-1 { background: var(--desk-density-1); }
  .dt-mcell.lv-2 { background: var(--desk-density-2); }
  .dt-mcell.lv-3 { background: var(--desk-density-3); border-color: var(--desk-density-3); color: var(--desk-density-text-dark); }
  .dt-mcell.lv-4 { background: var(--desk-density-4); border-color: var(--desk-density-4); color: var(--desk-density-text-dark); }
  .dt-mcell.empty { color: var(--desk-text-secondary); }
  .dt-mcell.unknown {
    background-image: radial-gradient(var(--desk-density-unknown-dot) .65px, transparent .65px);
    background-size: var(--desk-space-1) var(--desk-space-1);
  }
  .dt-mcell.unknown .dt-mcell-hours, .dt-mcell.unknown .dt-mcell-meta {
    background: var(--desk-surface-hover); color: var(--desk-text); align-self: flex-start;
  }
  .dt-mcell.today { outline: 2px solid var(--desk-today); outline-offset: var(--desk-focus-offset); }
  .dt-mcell.today .dt-mcell-day {
    background: var(--desk-today); color: var(--desk-density-text-dark);
    min-width: 24px; text-align: center; border-radius: 4px;
  }
  .dt-mcell:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: var(--desk-focus-offset); }
  .dt-mcell:hover { border-color: var(--desk-border-strong); }
  .dt-mcell-date { display: flex; justify-content: space-between; align-items: center; font-size: var(--desk-font-body); line-height: var(--desk-line-body); }
  .dt-mcell-now { font-size: var(--desk-font-caption); }
  .dt-mcell-hours { margin-top: auto; font-size: var(--desk-font-heading); line-height: var(--desk-line-heading); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .dt-mcell-meta { font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); }
  .dt-mcell.outside { border-color: transparent; background: transparent; color: var(--desk-text-secondary); cursor: default; }
  /* 過去的格子（spec 2026-10-02 決策 3）：不上密度色、不寫待做估時，只寫「完成 N」（有續做加小字「續做 M」）；
     虛線框與週畫布紀錄卡同一套「紀錄」語彙，有紀錄的格子用淡底色。仍可點（跳到那天的週）。 */
  .dt-mcell.past { background: transparent; border-style: dashed; color: var(--desk-text-secondary); }
  .dt-mcell.past.has-records { background: var(--desk-surface); color: var(--desk-text); }
  .dt-mcell-done { margin-top: auto; font-size: var(--desk-font-body); line-height: var(--desk-line-body); font-variant-numeric: tabular-nums; }
  .dt-mcell-cont { color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); }
  .dt-cal-legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--desk-space-2); color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); }
  .dt-legend-item { display: inline-flex; align-items: center; gap: var(--desk-space-1); }
  .dt-swatch { display: inline-block; width: var(--desk-space-3); height: var(--desk-space-2); border: 1px solid var(--desk-border-strong); border-radius: 4px; }
  .dt-swatch.lv-0 { background: var(--desk-density-0); }
  .dt-swatch.lv-1 { background: var(--desk-density-1); }
  .dt-swatch.lv-2 { background: var(--desk-density-2); }
  .dt-swatch.lv-3 { background: var(--desk-density-3); }
  .dt-swatch.lv-4 { background: var(--desk-density-4); }
  .dt-swatch.unknown { background: radial-gradient(var(--desk-density-unknown-dot) .75px, transparent .75px) 0 0 / var(--desk-space-1) var(--desk-space-1); }
  .dt-swatch.past { background: var(--desk-surface); border-style: dashed; }
  .dt-board-foot { display: flex; justify-content: space-between; color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }

  /* ── B3 季畫布：目標橫條＝任務比例（C1），pace 虛線、今天紅線、落後斜紋，按領域分列（C6） ── */
  .dt-quarter { display: flex; flex-direction: column; gap: var(--desk-space-1); padding: var(--desk-space-2) var(--desk-space-3) var(--desk-space-3); overflow: auto; }
  .dt-quarter-head { display: flex; align-items: baseline; gap: var(--desk-space-2); }
  .dt-quarter-title { margin: 0; font-size: var(--desk-font-subhead); line-height: var(--desk-line-heading); font-weight: var(--desk-weight-strong); }
  .dt-quarter-note { color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  .dt-qaxis {
    display: grid; grid-template-columns: var(--desk-quarter-label-width) minmax(0, 1fr) var(--desk-quarter-tail-width);
    height: var(--desk-space-5); border-bottom: 1px solid var(--desk-border);
    color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption);
  }
  .dt-qaxis > * { align-self: end; padding-bottom: var(--desk-space-1); }
  .dt-qticks { position: relative; }
  .dt-qtick { position: absolute; bottom: var(--desk-space-1); transform: translateX(-50%); }
  .dt-qtick:first-child { transform: none; }
  .dt-qtick:last-child { transform: translateX(-100%); }
  .dt-qrows { position: relative; }
  .dt-qnow { position: absolute; top: 0; bottom: 0; width: var(--desk-now-width); background: var(--desk-today); z-index: 1; pointer-events: none; }
  .dt-qgroup { display: flex; align-items: center; gap: var(--desk-space-1); height: var(--desk-space-3); color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); position: relative; }
  .dt-qgroup:after { content: ''; height: 1px; background: var(--desk-border); flex: 1; margin-left: var(--desk-space-1); }
  .dt-qgroup-rule { width: 3px; height: 12px; border-radius: 2px; background: var(--desk-text-secondary); }
  .dt-qgroup.area-tone-work { color: var(--area-work); }
  .dt-qgroup.area-tone-work .dt-qgroup-rule { background: var(--area-work); }
  .dt-qrow { display: grid; grid-template-columns: var(--desk-quarter-label-width) minmax(0, 1fr) var(--desk-quarter-tail-width); height: 56px; position: relative; }
  .dt-qrow.kr { height: var(--desk-space-4); }
  .dt-qlabel { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-right: var(--desk-space-2); position: relative; z-index: 2; }
  .dt-qrow.kr .dt-qlabel, .dt-qrow.child .dt-qlabel { padding-left: var(--desk-space-2); }
  .dt-qname { font-size: var(--desk-font-compact); line-height: var(--desk-line-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dt-qrow.kr .dt-qname { font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); color: var(--desk-text-secondary); }
  .dt-qmeta { color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); white-space: nowrap; }
  .dt-qtrack { position: relative; }
  .dt-qbar { position: absolute; top: var(--desk-space-3); height: var(--desk-goal-height); border-radius: 4px; background: var(--desk-goal-track); overflow: hidden; z-index: 2; min-width: 2px; }
  .dt-qrow.kr .dt-qbar { top: 20px; height: var(--desk-kr-height); }
  .dt-qfill { position: absolute; inset: 0 auto 0 0; background: var(--desk-goal-fill); }
  .dt-qgap {
    position: absolute; top: var(--desk-space-3); height: var(--desk-goal-height); z-index: 3;
    background: repeating-linear-gradient(135deg, transparent 0 4px, var(--desk-gap) 4px 5px, transparent 5px 8px), var(--desk-gap-wash);
  }
  .dt-qrow.kr .dt-qgap { top: 20px; height: var(--desk-kr-height); }
  .dt-qpace {
    position: absolute; top: 20px; height: var(--desk-space-4); border-left: var(--desk-pace-width) dashed var(--desk-pace);
    box-shadow: -2px 0 var(--ink), 2px 0 var(--ink); z-index: 4;
  }
  .dt-qrow.kr .dt-qpace { top: var(--desk-space-2); height: var(--desk-space-2); }
  .dt-qstatus { position: absolute; left: 0; right: 0; top: 2px; text-align: right; color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); z-index: 2; }
  .dt-qstatus.risk { color: var(--desk-text); }
  .dt-qstatus.risk:before { content: '↤ '; color: var(--at-risk); }
  .dt-qtail { align-self: center; padding-left: var(--desk-space-1); color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); white-space: nowrap; position: relative; z-index: 2; }
  .dt-qrow.cut-end .dt-qbar { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .dt-qrow.cut-start .dt-qbar { border-top-left-radius: 0; border-bottom-left-radius: 0; }
  .dt-qrow.unquantified .dt-qbar {
    background: repeating-linear-gradient(90deg, var(--desk-border) 0 8px, transparent 8px 16px);
    border-top: 1px dashed var(--desk-border-strong); border-bottom: 1px dashed var(--desk-border-strong);
  }
  .dt-qlegend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--desk-space-2); padding: var(--desk-space-2) 0; color: var(--desk-text-secondary); font-size: var(--desk-font-caption); line-height: var(--desk-line-caption); }
  .dt-qkey { display: inline-block; width: var(--desk-space-3); height: var(--desk-space-2); }
  .dt-qkey.fill { height: var(--desk-kr-height); background: var(--desk-goal-fill); }
  .dt-qkey.pace { width: 0; border-left: var(--desk-pace-width) dashed var(--desk-pace); }
  .dt-qkey.gap { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--desk-gap) 4px 5px, transparent 5px 8px), var(--desk-gap-wash); }
  .dt-qkey.now { width: var(--desk-now-width); background: var(--desk-today); }

  /* 設定功能（spec S7／裁決 R4）：--desk-font-scale 只影響上面 :root 裡已經套用 calc() 的
     7 個 --desk-font-* token；--desk-font-family／--desk-line-* 不動——字級變大小不必連帶
     改變行高與字族，排版節奏維持既有比例。html[data-pref-desk-font] 是元素＋屬性選擇器，
     特異性本來就比 :root 高，寫在 :root 之後純粹是閱讀順序（先預設、後覆寫），不是靠原始碼
     順序取勝。 */
  html[data-pref-desk-font="S"] { --desk-font-scale: .9; }
  html[data-pref-desk-font="L"] { --desk-font-scale: 1.15; }

  /* S7：帳號層開關關閉時純顯示隱藏，DOM 節點仍在——data-pref-* 只在非預設值時存在
     （public/prefs.js 的 applyPrefAttributes）。 */
  html[data-pref-week-note="off"] .dt-range-note { display: none; }
  html[data-pref-quarter-axis="off"] .dt-qaxis { display: none; }

  /* 設定功能 S13（對抗審查 C4）：桌面設定面板比照既有 .dt-confirm-backdrop 的定位方式
     （position:fixed; inset:0）——.dt-root 是 flex 容器，不定位的話面板會被排成一個普通
     flex 子項、蓋不住畫面，「點外面關閉」的座標判斷也會失真。dt-fade 這個 keyframe 沿用
     .dt-confirm-backdrop 已經定義的那一份，不重複宣告。顏色／間距一律用既有 --desk-* 與
     styles.css 既有 token，desktop.css 鐵則：不寫色彩字面值。 */
  .dt-settings-backdrop {
    position: fixed; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .5);
    animation: dt-fade var(--desk-duration-toast-in) var(--desk-ease-out) both;
  }
  .dt-settings {
    width: 360px; max-height: 80vh; overflow-y: auto; padding: var(--desk-space-3);
    border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line);
  }
  .dt-settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--desk-space-2); }
  .dt-settings-title { margin: 0; font-size: var(--desk-font-subhead); line-height: var(--desk-line-heading); }
  .dt-settings-close {
    appearance: none; font: inherit; padding: 4px 8px; border-radius: var(--r-btn); cursor: pointer;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--fg);
  }
  .dt-settings-section + .dt-settings-section {
    margin-top: var(--desk-space-3); padding-top: var(--desk-space-2); border-top: 1px solid var(--desk-border);
  }
  .dt-settings-section-title { margin: 0 0 var(--desk-space-1); color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  .dt-settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--desk-space-2); padding: var(--desk-space-1) 0; }
  .dt-settings-label { font-size: var(--desk-font-body); }
  .dt-settings-select {
    font: inherit; padding: 4px 8px; border-radius: var(--r-btn);
    border: 1px solid var(--line); background: var(--surface-2); color: var(--fg);
  }
  .dt-settings-toggle { width: var(--desk-space-2); height: var(--desk-space-2); accent-color: var(--accent); }
  .dt-settings-caption { margin: var(--desk-space-1) 0 0; color: var(--desk-text-secondary); font-size: var(--desk-font-caption); }
  .dt-status, .dt-status dd { margin: 0; }
  .dt-status-value { text-align: right; }
  .dt-status small { display: block; }
  .dt-status-warn { color: var(--at-risk); }
  /* #1 分段控制（notes D3）：≤4 選項的設定改成分段控制。外框沿用 .dt-settings-select 的邊框／底色／
     圓角，按鈕比照 .dt-seg-btn 的尺度；overflow:hidden 讓兩端貼齊圓角，焦點環改畫在框內。
     顏色一律引用 token（desktop.css 鐵則：不寫色彩字面值）。 */
  .dt-settings-seg {
    display: inline-flex; flex: none; overflow: hidden; border-radius: var(--r-btn);
    border: 1px solid var(--line); background: var(--surface-2);
  }
  .dt-settings-seg-btn {
    appearance: none; border: 0; background: transparent; color: var(--desk-text-secondary);
    font: inherit; font-size: var(--desk-font-caption); line-height: var(--desk-line-body); padding: 4px 12px; cursor: pointer;
  }
  .dt-settings-seg-btn + .dt-settings-seg-btn { border-left: 1px solid var(--line); }
  .dt-settings-seg-btn[aria-checked="true"] { background: var(--desk-surface); color: var(--desk-text); font-weight: 600; }
  .dt-settings-seg-btn:focus-visible { outline: var(--desk-focus-width) solid var(--desk-today); outline-offset: calc(-1 * var(--desk-focus-width)); }

  /* ── B3 月→週過場（codex 06）：月 100ms 淡出、週 180ms 上移淡入。
     styles.css:718 的全域 prefers-reduced-motion 會把 animation 關掉，
     JS 端另用 prefersReducedMotion() 跳過 100ms 等待，兩層都不留位移。 */
  .dt-leaving { opacity: 0; transition: opacity var(--desk-duration-month-out) var(--desk-ease-in); }
  .dt-entering { animation: dt-week-in var(--desk-duration-week-in) var(--desk-ease-out) both; }
  @keyframes dt-week-in {
    from { opacity: 0; transform: translateY(var(--desk-scale-travel)); }
    to { opacity: 1; transform: translateY(0); }
  }
}