/* Layout idea: OmniFocus-style three panes: perspectives sidebar · outline · inspector. Collapses to one pane + sheets on phones. */
:root{
  --bg:#f6f6f9; --panel:#ffffff; --side:#ededf2; --raised:#ffffff; --field:#f6f6f9; --ink:#18181f; --ink2:#3d3e4a; --mute:#5d5e6b; --faint:#6b6c7a; --line:#e4e4ea; --line-strong:#8a8b98; --chip-bg:color-mix(in srgb,var(--ink) 7%,var(--panel));
  --acc:#5b45e0; --on-acc:#ffffff; --acc-soft:#ece9ff; --hover:#f2f2f6; --sel:color-mix(in srgb,var(--acc) 9%,var(--panel));
  --flag:#b85400; --soon:#9a6200; --over:#c8322a; --on-over:#ffffff; --plan:#1f7aa3; --defer:#6b6c78; --ok:#237a4b;
  --pv-inbox:#5b62e0; --pv-forecast:#d9473a; --pv-flagged:#d97a0b; --pv-projects:#1f8fb3; --pv-tags:#9a5ae6; --pv-review:#2f9a62; --pv-completed:#6c6d7b; --pv-persp:#6d5bd0;
  /* 透視外觀專用色票（RID-39）：取代藍／紫羅蘭（與紫太接近）與淺色橘（在 --side 上 <3:1），只給 PS_COLORS 用 */
  --pv-c-pink:#d4407f; --pv-c-olive:#7c8a1e; --pv-c-orange:#bf6b00;
  /* RID-52 透視專用色（只給透視外觀用，在側欄底色上 ≥3:1） */
  --pv-c-blue:#2563d6; --pv-c-teal:#0e857b; --pv-c-lime:#4d8a1a; --pv-c-gold:#957300; --pv-c-brown:#8a5a3c; --pv-c-plum:#a03db4; --pv-c-slate:#4a6584; --pv-c-ink:#363847;
  /* 焦點（RID-39）：控制項用 --focus-ring（box-shadow），文字輸入框用 border-color:var(--acc)＋--focus-field */
  --focus-ring:0 0 0 2px var(--raised),0 0 0 4px var(--acc); --focus-field:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent);
  /* 徽章（圖示欄、分頁列的數字）：淺色深底白字、深色亮底深字 */
  --badge-ink:#ffffff; --badge-bg:#4a4c8f; --badge-inbox:#3c3f9c; --badge-flagged:#8a5a12; --badge-review:#2c6b46; --badge-forecast:#8a5a12; --badge-over:#b3382d;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d5e6b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --glass:rgba(255,255,255,.62); --glass-line:rgba(0,0,0,.08); --glass-hi:rgba(255,255,255,.9);
  /* 字型：沙箱與離線都不依賴網路字型，用系統字型堆疊（英數 → 中文） */
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue","PingFang TC","Noto Sans TC","Noto Sans CJK TC","Microsoft JhengHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  /* 設計 token（RID-34）：圓角、字級、間距、陰影、動畫 */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-body-sm:14px; --fs-base:15px; --fs-lg:17px; --fs-title-m:20px; --fs-xl:22px;
  /* 元件層 token（RID-35）：控制項與 chip 高度、內容寬度、列內距 */
  --ctl-h:32px; --chip-h:24px; --content-max:960px; --form-max:720px; --row-pad-y:10px; --hdr-h:64px; --row-est:44px; --tab-h:64px;
  --sp-1:4px; --sp-1h:6px; --sp-2:8px; --sp-2h:10px; --sp-3:12px; --sp-3h:14px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --sh-1:0 1px 2px rgb(0 0 0/.08); --sh-2:0 8px 24px rgb(0 0 0/.14); --sh-3:0 24px 60px rgb(0 0 0/.24); --scrim:rgba(10,8,20,.4);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-3-out:240ms; --dur-flash:1200ms;
  /* 層級（RID-36）：元件內堆疊用 --z-base＋calc；分頁列／新增鈕 < 抽屜遮罩 < 檢閱器 sheet < 整理模式／歡迎 < 提示框 < 對話框 < 拖曳卡片 */
  --z-base:1; --z-sticky:10; --z-bar:40; --z-scrim:45; --z-sheet:60; --z-overlay:70; --z-toast:75; --z-modal:90; --z-top:100;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-in-out:cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-app-theme="light"]){
  --bg:#0e0e12; --panel:#16161c; --side:#121217; --raised:#1e1e26; --field:#1e1e26; --ink:#ececf2; --ink2:#c9cad4; --mute:#a1a2ad; --faint:#868795; --line:#3a3a46; --line-strong:#6e6f7c; --chip-bg:color-mix(in srgb,#fff 10%,var(--panel));
  --acc:#a08cff; --on-acc:#140b33; --acc-soft:#2a2050; --hover:#1d1d25; --sel:color-mix(in srgb,var(--acc) 22%,var(--panel));
  --flag:#f8963c; --soon:#e8b049; --over:#f4716b; --on-over:#1a0b0a; --plan:#4fb8d8; --defer:#9a9ba4; --ok:#5cc68a;
  --pv-inbox:#8f96ff; --pv-forecast:#ff7a6b; --pv-flagged:#f6a43a; --pv-projects:#4fb8d8; --pv-tags:#c08cff; --pv-review:#5cc68a; --pv-completed:#9a9ba4; --pv-persp:#b3a6ff;
  --pv-c-pink:#f07aa8; --pv-c-olive:#b5c24a; --pv-c-orange:var(--pv-flagged); --pv-c-blue:#6fa0ff; --pv-c-teal:#4cc6b9; --pv-c-lime:#8fcc55; --pv-c-gold:#e2be4c; --pv-c-brown:#c99a78; --pv-c-plum:#d68ae6; --pv-c-slate:#9db2cd; --pv-c-ink:#d4d5dc; --focus-field:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent);
  --badge-ink:#14141a; --badge-bg:#a1a2ad; --badge-inbox:#8f96ff; --badge-flagged:#f6a43a; --badge-review:#5cc68a; --badge-forecast:#e8b049; --badge-over:#f4716b;
  --sh-1:0 1px 2px rgb(0 0 0/.32); --sh-2:0 8px 24px rgb(0 0 0/.40); --sh-3:0 24px 60px rgb(0 0 0/.50); --scrim:rgba(0,0,0,.55);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a2ad' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --glass:rgba(44,42,58,.58); --glass-line:rgba(255,255,255,.14); --glass-hi:rgba(255,255,255,.22); color-scheme:dark;}}
:root[data-theme="dark"]:not([data-app-theme="light"]),:root[data-app-theme="dark"]{
  --bg:#0e0e12; --panel:#16161c; --side:#121217; --raised:#1e1e26; --field:#1e1e26; --ink:#ececf2; --ink2:#c9cad4; --mute:#a1a2ad; --faint:#868795; --line:#3a3a46; --line-strong:#6e6f7c; --chip-bg:color-mix(in srgb,#fff 10%,var(--panel));
  --acc:#a08cff; --on-acc:#140b33; --acc-soft:#2a2050; --hover:#1d1d25; --sel:color-mix(in srgb,var(--acc) 22%,var(--panel));
  --flag:#f8963c; --soon:#e8b049; --over:#f4716b; --on-over:#1a0b0a; --plan:#4fb8d8; --defer:#9a9ba4; --ok:#5cc68a;
  --pv-inbox:#8f96ff; --pv-forecast:#ff7a6b; --pv-flagged:#f6a43a; --pv-projects:#4fb8d8; --pv-tags:#c08cff; --pv-review:#5cc68a; --pv-completed:#9a9ba4; --pv-persp:#b3a6ff;
  --pv-c-pink:#f07aa8; --pv-c-olive:#b5c24a; --pv-c-orange:var(--pv-flagged); --pv-c-blue:#6fa0ff; --pv-c-teal:#4cc6b9; --pv-c-lime:#8fcc55; --pv-c-gold:#e2be4c; --pv-c-brown:#c99a78; --pv-c-plum:#d68ae6; --pv-c-slate:#9db2cd; --pv-c-ink:#d4d5dc; --focus-field:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent);
  --badge-ink:#14141a; --badge-bg:#a1a2ad; --badge-inbox:#8f96ff; --badge-flagged:#f6a43a; --badge-review:#5cc68a; --badge-forecast:#e8b049; --badge-over:#f4716b;
  --sh-1:0 1px 2px rgb(0 0 0/.32); --sh-2:0 8px 24px rgb(0 0 0/.40); --sh-3:0 24px 60px rgb(0 0 0/.50); --scrim:rgba(0,0,0,.55);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a2ad' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --glass:rgba(44,42,58,.58); --glass-line:rgba(255,255,255,.14); --glass-hi:rgba(255,255,255,.22); color-scheme:dark;}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--fs-base);-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#app{display:flex;height:100%}
/* sidebar：彩色圖示欄（桌面） */
#side{width:84px;flex:none;background:var(--side);border-right:1px solid var(--line);overflow:hidden;scrollbar-width:none}
#side::-webkit-scrollbar,.rtop::-webkit-scrollbar{display:none}
.rail{display:flex;flex-direction:column;gap:2px;height:100%;padding:var(--sp-3) 0 var(--sp-2h)}
/* 透視清單自己捲動，底部工具列永遠不會蓋住最後一項；還有下文時底部淡出提示 */
.rtop{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;display:flex;flex-direction:column;gap:2px}
.rtop.rfade{-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 18px),transparent);mask-image:linear-gradient(to bottom,black calc(100% - 18px),transparent)}
:is(.rtop,.rgrp)>.ri{flex:none}
.rgrp{display:contents}   /* R8-09 透視那一段的讀屏群組，不影響版面 */
/* R10-07 保留 5px：圖示與標籤間距決定圖示欄每格 72 高，改成 4／8 會改變整條圖示欄 */
.ri{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;border:0;background:none;padding:var(--sp-2h) var(--sp-1) var(--sp-2);color:var(--mute);font-size:var(--fs-sm);line-height:14px;font-weight:500;text-align:center}
.ri .rl{max-width:76px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.ri .rg{position:relative;display:flex}
.ri:hover{background:var(--hover);color:var(--ink)}
.ri.on{color:var(--pv,var(--acc));font-weight:600}
/* R10-07 保留 3px：底部小格高度 */
.ri.sm{padding:var(--sp-1h) var(--sp-1);gap:3px;font-size:var(--fs-xs)}
.ri.sm svg.i{width:20px;height:20px}
.ri.v-add{color:var(--faint);font-size:var(--fs-xs)}
.ri.v-add svg.i{width:20px;height:20px}
.rsep{height:1px;background:var(--line);margin:var(--sp-1h) var(--sp-4)}
.rfoot{flex:none;display:flex;flex-direction:column;gap:2px;padding-top:var(--sp-2);background:var(--side);box-shadow:0 -1px 0 var(--line);padding-bottom:var(--sp-1)}
/* 矮螢幕（例如 1280×720）：縮小圖示欄間距 */
@media (min-width:700px) and (min-height:500px) and (max-height:860px),(min-width:1000px) and (max-height:860px){
  /* R10-07 保留 3px：手機抽屜圖示欄格高 */
  .ri{padding:var(--sp-1h) var(--sp-1) var(--sp-1h);gap:3px}
  .ri svg.pg{width:24px;height:24px}
  .ri.sm{padding:var(--sp-1) var(--sp-1);gap:2px}
  .ri.sm svg.i{width:18px;height:18px}
  .rfoot .rtools{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0;padding-top:2px}
  .rail{padding:var(--sp-2) 0 var(--sp-1h)}
}
/* 矮螢幕＋滑鼠：搜尋／資料／設定改成一排圖示（標籤用滑鼠提示），讓透視清單與「新增透視」放得下 */
@media (pointer:fine) and (min-width:700px) and (min-height:500px) and (max-height:860px){
  .rfoot{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0}
  .rfoot>.ri.sm{width:33.3%;padding:var(--sp-2) 0}
  .rfoot>.ri.sm .rl{display:none}
  .rfoot>.ri.sm.on::after{top:auto;bottom:0;left:25%;right:25%;width:auto;height:2px;border-radius:2px}
  .rfoot .rtools{width:100%}
  /* RID-50 同步／主題那一排用和搜尋／設定同樣的欄寬（33.3%、置中），上下對齊 */
  .rfoot .rtools{justify-content:center;gap:0}
  .rfoot .rtools>:is(.ib,.sync){flex:0 0 33.3%;min-width:0;padding:0}
  .rfoot .rtools>.sync.warn{flex-basis:100%}
}
#content .row,#content .prow{scroll-margin-top:64px}
.sync .stx{display:none}
/* R10-07 保留 3px：同步警示的兩行緊貼圖示欄寬度 */
.sync.warn{width:auto;height:auto;flex-direction:column;gap:3px;padding:0 var(--sp-1)}
.sync .stx-l{display:none}
#side .sync .stx-s{display:inline}
.sync.warn .stx{display:block;white-space:normal;font-size:var(--fs-xs);line-height:12px;color:var(--over);text-align:center;max-width:76px}
.rvrow{display:flex;align-items:center;gap:var(--sp-2);padding-right:var(--sp-3);border-bottom:1px solid var(--line)}
.rvrow .rvmain{flex:1;min-width:0}
.rvrow .rvmain .prow{border-bottom:0}
.rvrow>.btn{flex:none;white-space:nowrap}
.rtools{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding-top:var(--sp-1h)}
/* RID-47 版本號：圖示欄底部小字（滑鼠移上去看完整），手機抽屜顯示完整；有新版本時加強調色點 */
.rver{display:flex;align-items:center;justify-content:center;gap:var(--sp-1);border:0;background:none;color:var(--faint);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;padding:var(--sp-1) 0;min-height:24px;cursor:pointer;border-radius:var(--r-sm);width:100%}
.rver:hover{color:var(--ink2)}
.rver .rv-l,.rver .rv-n{display:none}
.rver.new{color:var(--acc);font-weight:600}
.rver.new::before{content:"";width:6px;height:6px;border-radius:var(--r-full);background:var(--acc);flex:none}

.pbadge{position:absolute;top:-7px;right:-12px;min-width:20px;height:20px;border-radius:var(--r-lg);padding:0 var(--sp-1h);font-size:var(--fs-xs);line-height:16px;font-weight:600;text-align:center;color:var(--badge-ink);background:var(--badge-bg);border:2px solid var(--side);font-variant-numeric:tabular-nums}
.v-inbox{--pv:var(--pv-inbox)} .v-forecast{--pv:var(--pv-forecast)} .v-flagged{--pv:var(--pv-flagged)} .v-projects{--pv:var(--pv-projects)} .v-tags{--pv:var(--pv-tags)} .v-review{--pv:var(--pv-review)} .v-completed{--pv:var(--pv-completed)} .v-persp{--pv:var(--pv-persp)}
.v-inbox .pbadge{background:var(--badge-inbox)} .v-flagged .pbadge{background:var(--badge-flagged)} .v-review .pbadge{background:var(--badge-review)} .v-forecast .pbadge{background:var(--badge-forecast)} .v-forecast .pbadge.over{background:var(--badge-over)}
svg.pg{width:28px;height:28px;flex:none;color:var(--pv)}
svg.pg .f{fill:currentColor} svg.pg .s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
svg.pg .k{fill:none;stroke:var(--side);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} svg.pg .k.dot{stroke-width:2.4}
svg.pg .kf{fill:var(--side)}
.sync{display:flex;align-items:center;justify-content:center;width:28px;height:24px}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--faint);display:inline-block}
.sync i.ok{background:var(--ok)} .sync i.busy{background:var(--soon)}
/* 漂浮玻璃分頁列（手機） */
#tabbar,#fab{display:none}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),var(--sh-2)}
@media (prefers-reduced-transparency:reduce){.glass{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* 搜尋頁 */
.sbar{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:calc(var(--z-base) + 1)}
.srch{display:flex;align-items:center;gap:var(--sp-2);width:100%;box-sizing:border-box;background:var(--field);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--faint);cursor:text}
.srch .i{flex:none;width:17px;height:17px}
.srch input{flex:1;min-width:0;border:0;background:none;outline:none;padding:2px 0;font:inherit;font-size:var(--fs-base);color:var(--ink);-webkit-appearance:none;appearance:none}
.srch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:16px;height:16px;cursor:pointer;background:var(--faint);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sbar .srch{margin:0;padding:var(--sp-2) var(--sp-3)}
/* main */
#main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--panel)}
/* RID-54 寬螢幕來源欄：圖示欄右邊的專案／標籤清單（只有 ≥1200px 且在專案、標籤畫面才出現；hidden 由 renderSrc() 控制） */
#src{width:var(--src-w,272px);flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--side);overflow:hidden;--gut:var(--sp-3)}
#src[hidden]{display:none}
@media (min-width:1440px){ #src{--src-w:300px} }
#src .src-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);height:var(--hdr-h);padding:0 var(--sp-2) 0 var(--sp-4);border-bottom:1px solid var(--line);flex:none}
#src .srct{border:0;background:none;padding:var(--sp-1) 0;font-size:var(--fs-lg);font-weight:700;color:var(--ink);cursor:pointer}
#src .src-h .tools{display:flex;gap:2px}
#src .srcl{flex:1;overflow:auto;padding:var(--sp-2) 0 var(--sp-6);overscroll-behavior:contain}
#src .prow{--row-pad-y:var(--sp-1h);min-height:40px;background:none}
#src .prow,#src .prow::before{--st-l:var(--sp-2);--st-x:var(--sp-2)}
#src .prow .rm{display:none}
#src .prow.tagrow{min-height:40px}
#src .prow .ib{opacity:0;transition:opacity var(--dur-1)}
#src .prow:hover .ib,#src .prow .ib:focus-visible{opacity:1}
#src .prow.cur::before{background:var(--sel);box-shadow:none}
#src .prow.cur .pn b{font-weight:600}
/* RID-55 預測月曆欄：過期／之後兩塊磚＋當月格子（日期＋動作數） */
#src .fmini{flex:1;overflow:auto;padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2)}
#src .fmt{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);background:var(--raised);border-radius:var(--r-lg);padding:var(--sp-2) var(--sp-3);color:var(--ink2);font-size:var(--fs-md);cursor:pointer}
#src .fmt b{font-size:var(--fs-lg);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
#src .fmt.odt b{color:var(--over)}
#src .fmt:hover{background:var(--hover)}
#src .fmt.on{border-color:var(--acc);background:var(--sel)}
#src .fmh,#src .fmg{display:grid;grid-template-columns:repeat(7,1fr)}
#src .fmh{margin-top:var(--sp-2)}
#src .fmw{text-align:center;font-size:var(--fs-xs);color:var(--ink2);padding-bottom:var(--sp-1)}
#src .fmw.wk{color:var(--faint)}
#src .fmg{border-top:1px solid var(--line);border-left:1px solid var(--line)}
#src .fmc{aspect-ratio:1/1.1;min-height:40px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--raised);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;cursor:pointer;color:var(--ink);position:relative}
#src .fmc:hover{background:var(--hover)}
#src .fmc .fmn{font-size:var(--fs-md);font-variant-numeric:tabular-nums}
#src .fmc i{font-style:normal;font-size:var(--fs-xs);font-weight:600;color:var(--acc);min-height:14px;line-height:14px;font-variant-numeric:tabular-nums}
#src .fmc i.od{color:var(--over)}
#src .fmc.other{background:var(--side)} #src .fmc.other .fmn{color:var(--faint)}
#src .fmc.past .fmn{color:var(--mute)}
#src .fmc.today .fmn{background:var(--acc);color:var(--on-acc);border-radius:var(--r-full);min-width:22px;height:22px;line-height:22px;font-weight:600}
#src .fmc.on{background:var(--sel);box-shadow:inset 0 0 0 2px var(--acc)}
#src .fmc:focus-visible,#src .fmt:focus-visible{outline:none;box-shadow:var(--focus-ring);z-index:var(--z-base)}
#src .fmtoday{align-self:center}
#src .fmnote{margin:var(--sp-1) 0 0;font-size:var(--fs-xs);color:var(--ink2);text-align:center}
#content .gh.fpick-h{font-size:var(--fs-base);color:var(--ink)}
#hdr{display:flex;align-items:center;gap:var(--sp-2h);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);min-height:58px}
#hdr h1{font-size:var(--fs-xl);line-height:1.25;margin:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hdr .sub{font-size:var(--fs-sm);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hdr .ttl{flex:1;min-width:0}
#hdr .tools{display:flex;gap:var(--sp-1h);align-items:center;flex:none}
.ib{border:0;background:none;min-width:32px;height:32px;padding:0 var(--sp-2);border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;color:var(--mute);position:relative;transition:background var(--dur-1),color var(--dur-1),transform var(--dur-1) var(--ease-out)}
.ib:active{transform:scale(.94)}
.ib:hover{background:var(--hover);color:var(--ink)}
.ib.xs{min-width:24px;height:24px;padding:0 var(--sp-1)}
.menu{display:none}
.back{display:inline-flex;align-items:center;gap:2px;color:var(--acc);font-size:var(--fs-body-sm);padding:var(--sp-1h) var(--sp-2) var(--sp-1h) var(--sp-1);white-space:nowrap;max-width:10em;min-width:0;flex:0 1 auto}
.back svg{flex:none}
.back span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back svg{transform:rotate(180deg)}
select.fsel,select.inp,.srow select{-webkit-appearance:none;appearance:none;height:32px;padding:0 28px 0 var(--sp-2h);border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised) var(--chev) right 8px center/14px no-repeat;font-size:var(--fs-md);color:var(--ink);cursor:pointer;text-overflow:ellipsis}
select.fsel:hover,select.inp:hover{border-color:color-mix(in srgb,var(--mute) 45%,var(--line))}
select.fsel:focus-visible,select.inp:focus{border-color:var(--acc);outline:none;box-shadow:var(--focus-field)}
.btn{min-height:32px;padding:0 var(--sp-3);border:1px solid var(--line);background:var(--panel);border-radius:var(--r-md);font-size:var(--fs-md);font-weight:600;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1h);transition:background var(--dur-1),border-color var(--dur-1),transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1)}
.btn:active{transform:scale(.97)}
.btn svg.i{width:16px;height:16px}
.btn:hover{background:var(--hover)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--on-acc);box-shadow:var(--sh-1)}
.btn.pri:hover{background:color-mix(in srgb,var(--acc) 88%,var(--ink))}
.btn.ghost{border-color:transparent;background:none;color:var(--mute)}
.btn.ghost:hover{background:var(--hover);color:var(--ink)}
.btn.danger{color:var(--over);border-color:transparent;background:none}
.btn.danger:hover{background:color-mix(in srgb,var(--over) 10%,transparent)}
.btn.danger-fill{background:var(--over);border-color:var(--over);color:var(--on-over);box-shadow:var(--sh-1)}
.btn.danger-fill:hover{background:color-mix(in srgb,var(--over) 88%,var(--ink))}
.btn.sm{min-height:28px;padding:0 var(--sp-2h)}
.btn.lg{min-height:40px;padding:0 var(--sp-4);font-size:var(--fs-base)}
#content{flex:1;overflow:auto;padding-bottom:80px}
/* quick add */
.qa{display:flex;gap:var(--sp-2);align-items:center;padding:var(--sp-2h) var(--gut);border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:calc(var(--z-base) + 2);height:var(--qa-h);box-sizing:border-box}
.qa input{flex:1;height:36px;border:1px solid var(--line);border-radius:var(--r-md);padding:0 var(--sp-3);background:var(--field);outline:none;min-width:0;transition:border-color var(--dur-1),background var(--dur-1),box-shadow var(--dur-1)}
.qahint{display:none;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-1h);font-size:var(--fs-xs);color:var(--faint);padding:var(--sp-1h) var(--gut) var(--sp-2);border-bottom:1px solid var(--line);background:var(--panel)}
.qahint kbd{font-size:var(--fs-xs);padding:0 var(--sp-1h);height:18px;line-height:16px;border-bottom-width:1px;color:var(--mute)}
/* R10-07 保留 3px：手機 390 寬語法提示第一行剛好排 5 個，改 4px 會把「$ 預估」擠到第二行 */
.qahint .qp{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 var(--sp-2);border-radius:var(--r-full);background:var(--acc-soft);color:var(--acc);font-weight:500;font-size:var(--fs-sm);white-space:nowrap}
.qahint .qp svg.i{width:12px;height:12px}
.qahint .qp.warn{background:color-mix(in srgb,var(--over) 12%,transparent);color:var(--over)}
.qahint .qp.due{background:color-mix(in srgb,var(--over) 10%,transparent);color:var(--over)}
.qahint .qp.plan{background:color-mix(in srgb,var(--plan) 12%,transparent);color:var(--plan)}
.qahint .qp.defer{background:var(--hover);color:var(--defer)}
.qahint .qp.tag{background:var(--hover);color:var(--ink)}
.qahint .qp.proj{background:color-mix(in srgb,var(--pv-projects) 12%,transparent);color:var(--pv-projects)}
.qahint .qp.flag{background:color-mix(in srgb,var(--flag) 12%,transparent);color:var(--flag)}
/* rows */
.row{--sep-l:calc(var(--gut) + var(--d,0) * 22px + 29px);display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--row-pad-y) var(--gut) var(--row-pad-y) calc(var(--gut) + var(--d,0) * 22px);cursor:pointer;position:relative}
.keys{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-3h);align-items:center;font-size:var(--fs-body-sm)}
kbd{font:inherit;font-size:var(--fs-sm);padding:2px var(--sp-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r-sm);background:var(--bg);white-space:nowrap;justify-self:start}
.row.blocked .rn{color:var(--mute)}
/* 已完成／已放棄（R3-17）：全站不加刪除線，淡化＋實心勾，名稱 --mute；檢查清單的已勾項目才用刪除線 */
.row.done .rn,.row.dropped .rn{color:var(--mute);text-decoration:none}
.row.done>.rb,.row.dropped>.rb,.row.done>.chk,.row.dropped>.chk{opacity:.6}
.row>.disc{position:absolute;left:calc(var(--gut) + var(--d,0) * 22px - 18px);top:var(--row-pad-y)}
.disc{width:18px;height:22px;flex:none;border:0;background:none;padding:0;color:var(--faint);display:grid;place-items:center;border-radius:var(--r-xs)}
.disc:hover{color:var(--ink)}
/* .disc-sp 已移除（RID-41，原本就是 display:none） */
.disc svg{transition:transform var(--dur-1) var(--ease-out);width:14px;height:14px}
.disc.open svg{transform:rotate(90deg)}
.chk{width:21px;height:21px;margin-top:1px;flex:none;border-radius:50%;border:1.7px solid var(--faint);background:none;display:grid;place-items:center;padding:0;color:transparent;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1),color var(--dur-1)}
.chk svg{width:13px;height:13px;stroke-width:3}
.chk:hover{border-color:var(--acc)}
.chk.soon{border-color:var(--soon)}
.chk.over{border-color:var(--over)}
.chk.done{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.chk.dropped{border-style:dashed;color:var(--faint)}
.chk.big{width:26px;height:26px}
.rb{flex:1;min-width:0}
.rn{line-height:1.5;word-break:break-word}
.rn .ph{color:var(--faint)}
.rn .fl{color:var(--flag);display:inline-flex;vertical-align:-1px;margin-left:var(--sp-1)}
.rn .fl svg{width:13px;height:13px;fill:currentColor}
/* R8-10 名稱行尾的存在提示（重複、備註）：12px、--ink2、與旗子同基線；沒有第二行時 .rn 補回原本 .rm 的 2px，列高不變 */
.rn .rh{color:var(--ink2);display:inline-flex;vertical-align:-1px;margin-left:var(--sp-1)}
.rn .rh svg{width:12px;height:12px}
.rb>.rn:last-child{margin-bottom:2px}
.rm{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2h);font-size:var(--fs-sm);color:var(--mute);margin-top:2px;font-variant-numeric:tabular-nums}
.rm span{display:inline-flex;align-items:center;gap:var(--sp-1);white-space:nowrap}
.rm svg{width:12px;height:12px}
.m-proj{color:var(--mute)}
.m-tag{background:var(--hover);border-radius:var(--r-sm);padding:0 var(--sp-1h)}
.m-defer{color:var(--defer)} .m-plan{color:var(--plan)} .m-due{color:var(--mute)}
.m-due.soon{color:var(--soon);font-weight:600} .m-due.over{color:var(--over);font-weight:600}
.m-inh{opacity:.7;font-style:italic}
.gh{font-size:var(--fs-md);font-weight:600;color:var(--mute);padding:18px var(--gut) var(--sp-1h);background:var(--panel);display:flex;gap:var(--sp-2);align-items:center;position:sticky;top:var(--gh-top,0);z-index:calc(var(--z-base) + 1);box-shadow:0 1px 0 var(--line)}
:lang(en) .gh{letter-spacing:.2px}
.gh .n{font-size:var(--fs-xs);font-weight:600;min-width:20px;height:18px;line-height:18px;padding:0 var(--sp-1h);border-radius:var(--r-full);background:var(--hover);color:var(--mute);text-align:center;font-variant-numeric:tabular-nums}
.gh.over{color:var(--over)} .gh.due{color:var(--soon)} .gh.plan{color:var(--plan)}
.empty{padding:56px var(--sp-6);text-align:center;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:var(--sp-1h);font-size:var(--fs-body-sm);line-height:1.55}
.empty .eic{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--pv,var(--acc)) 12%,transparent);color:var(--pv,var(--acc));margin-bottom:var(--sp-2h)}
.empty .eic svg.pg{width:48px;height:48px}
.empty .eic svg.i{width:40px;height:40px;stroke-width:1.6}
.empty .eic svg.pg .k{stroke:var(--panel)} .empty .eic svg.pg .kf{fill:var(--panel)}
.empty .ed{max-width:34ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty h3{color:var(--ink);margin:0;font-size:var(--fs-lg);font-weight:600}
.empty .btn{margin-top:var(--sp-3)}
/* project / folder rows */
.prow{--sep-l:calc(var(--gut) + var(--d,0) * 20px + 34px);display:flex;align-items:center;gap:var(--sp-2h);padding:var(--row-pad-y) var(--gut) var(--row-pad-y) calc(var(--gut) + var(--d,0) * var(--sp-5));cursor:pointer;position:relative}
.prow .pic{width:24px;height:24px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--acc-soft);color:var(--acc);flex:none}
.prow .pic svg{width:15px;height:15px}
.prow.folder .pic{background:none;color:var(--mute)}
.prow .pn{flex:1;min-width:0}
.prow .pn b{font-weight:500}
.prow.inactive .pn b{color:var(--mute)}
.pill{font-size:var(--fs-xs);border-radius:var(--r-lg);padding:1px var(--sp-2);background:var(--hover);color:var(--mute);white-space:nowrap}
.pill.OnHold{background:color-mix(in srgb,var(--soon) 18%,transparent);color:var(--soon)}
.pill.Done{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.pill.Dropped{background:var(--hover);color:var(--faint);text-decoration:line-through}
.pcard{margin:var(--sp-3) var(--sp-4);padding:var(--sp-3) var(--sp-3h);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);display:flex;flex-direction:column;gap:var(--sp-1h);cursor:pointer}
.pcard .note{font-size:var(--fs-md);color:var(--mute);white-space:pre-wrap}
.pcard .rm{font-size:var(--fs-sm)}
/* forecast strip */
.strip{display:flex;gap:var(--sp-1h);padding:var(--sp-3) var(--gut);overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.day{flex:1 0 62px;min-height:64px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-lg);padding:var(--sp-2) var(--sp-1);text-align:center;display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center;transition:background var(--dur-1),border-color var(--dur-1)}
.day:hover{background:var(--hover)}
.day small{font-size:var(--fs-xs);color:var(--mute)}
.day b{font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.day i{font-style:normal;font-size:var(--fs-xs);font-weight:600;min-width:18px;height:16px;line-height:16px;border-radius:var(--r-full);padding:0 var(--sp-1h);background:var(--hover);color:var(--mute);font-variant-numeric:tabular-nums}
.day i:empty{display:none}
.day.od{background:color-mix(in srgb,var(--over) 10%,var(--panel));border-color:color-mix(in srgb,var(--over) 30%,var(--line))}
.day.od small{color:var(--over)}
.day i.hot{background:var(--soon);color:var(--on-over)}
.day i.red{background:var(--over);color:var(--on-over)}
/* inspector */
#insp{width:384px;flex:none;border-left:1px solid var(--line);background:var(--panel);overflow:auto;display:flex;flex-direction:column}
#insp[hidden]{display:none}
.ih{display:flex;align-items:center;gap:var(--sp-2);min-height:52px;padding:var(--sp-2) var(--sp-2h) var(--sp-2) var(--sp-4);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:calc(var(--z-base) + 2)}
.ih .it{flex:1;font-weight:600;display:flex;gap:var(--sp-2);align-items:center}
.ibody{padding:var(--sp-3h) var(--sp-4) 60px;display:flex;flex-direction:column;gap:var(--sp-3)}
.namewrap{display:flex;gap:var(--sp-2h);align-items:flex-start}
.iname{flex:1;border:0;outline:none;resize:none;font-size:var(--fs-lg);font-weight:600;background:none;line-height:1.35;padding:0;min-height:26px}
/* R10-01 檢閱器名稱高度跟著內容（取代 JS autosize 讀 scrollHeight 的整頁排版）；不支援的瀏覽器由 ui.js autosize() 處理 */
@supports (field-sizing:content){ #i-name.iname{field-sizing:content} }
.flagbtn{border:1px solid var(--line);background:none;border-radius:var(--r-md);padding:var(--sp-1h);color:var(--faint);display:flex}
.flagbtn.on{color:var(--flag);border-color:var(--flag)}
.flagbtn.on svg{fill:currentColor}
.sec{font-size:var(--fs-xs);font-weight:600;color:var(--mute);letter-spacing:.5px;margin-top:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--line)}
/* R10-07 保留 5px：標籤到欄位的距離，改成 4／8 會讓檢閱器、批次面板、整理模式所有欄位高度一起變 */
.fld{display:flex;flex-direction:column;gap:5px}
.fld>label,.lbl{font-size:var(--fs-sm);color:var(--mute)}
.lbl small,.dl small,.fld>label small{color:var(--faint);margin-left:var(--sp-1);font-size:var(--fs-xs)}
.inp,textarea.inp{width:100%;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-2h);background:var(--raised);outline:none}
select.inp{width:100%}
.inp:focus{border-color:var(--acc);box-shadow:var(--focus-field)}
textarea.inp{resize:vertical;min-height:80px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-1h);align-items:center}
/* R10-07 保留上下 3px：標籤 chip 高 24（3＋18＋3），與 select.addsel、快選 chip 同高 */
.chip{display:inline-flex;align-items:center;gap:var(--sp-1);background:var(--acc-soft);color:var(--acc);border-radius:var(--r-xl);padding:3px var(--sp-1h) 3px var(--sp-2h);font-size:var(--fs-md)}
.chip button{border:0;background:none;color:inherit;padding:0;display:flex;opacity:.7;position:relative}
.chip button::before{content:"";position:absolute;inset:-5px}
.chip button:hover{opacity:1}
.chip button svg{width:14px;height:14px}
/* R10-07 保留 3px：與標籤 chip 同高 */
select.addsel{border:1px dashed var(--line);border-radius:var(--r-xl);padding:3px var(--sp-2);background:none;font-size:var(--fs-md);color:var(--mute);max-width:100%}
/* 日期欄兩行：上面是標籤＋快選，下面是撐滿寬度的輸入欄（1024／1180／1280 與特大字都看得到完整日期與時間） */
/* R10-07 保留 5px 列距：日期欄位三列（dfBlock）高度 */
.df{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"l q" "v v" "h h";gap:5px var(--sp-2h);align-items:center}
.df>.dl{grid-area:l}
.df>.dv{grid-area:v}
.df>.dq{grid-area:q;justify-content:flex-end}
.df>.dhint{grid-area:h}
.dv{display:flex;align-items:center;gap:var(--sp-1);position:relative}
.dtext{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-1h) var(--sp-2h);background:var(--raised);outline:none}
.dtext:focus{border-color:var(--acc);box-shadow:var(--focus-field)}
.dtext.bad{border-color:var(--over)}
.pk{position:relative;width:30px;height:30px;display:grid;place-items:center;color:var(--mute);border-radius:var(--r-md);flex:none}
.pk:hover{background:var(--hover)}
.pk input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.dq{grid-column:2;display:flex;gap:var(--sp-1);flex-wrap:wrap}
/* R10-07 保留上下 3px：快選 chip 24 高（12px 字×行高＋6） */
.dq button{border:0;background:none;border-radius:var(--r-sm);font-size:var(--fs-sm);min-height:24px;padding:3px var(--sp-2h);color:var(--mute);transition:background var(--dur-1),color var(--dur-1)}
.dq button:hover{color:var(--acc);background:var(--hover)}
.inh{font-size:var(--fs-sm);color:var(--mute);background:var(--bg);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-2h);line-height:1.6}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.seg button{flex:1;border:0;background:none;padding:var(--sp-1h) var(--sp-1);font-size:var(--fs-md);color:var(--mute);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
.rep{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;font-size:var(--fs-md)}
.rep input[type=number]{width:64px}
.rep .inp{width:auto}
.wd{display:flex;gap:var(--sp-1)}
.wd button{width:32px;height:30px;border:1px solid var(--line);background:none;border-radius:var(--r-md);font-size:var(--fs-md)}
.wd button.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.rsum{font-size:var(--fs-sm);color:var(--acc);background:var(--acc-soft);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-2h)}
code,.mono{font-family:var(--mono);font-size:var(--fs-sm)}
.chkl{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-md)}
.chkl input{width:17px;height:17px;accent-color:var(--acc);flex:none}
.chkl svg.i{width:16px;height:16px;flex:none}
.chkl svg.fic{color:var(--mute)}
.chkl svg.pjic{color:var(--pv-projects)}
.chkl>span{min-width:0}
.acts{display:flex;flex-wrap:wrap;gap:var(--sp-1h)}
dl.meta{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);margin:0}
dl.meta dt{color:var(--mute)} dl.meta dd{margin:0;word-break:break-all}
.st{font-size:var(--fs-xs);border-radius:var(--r-lg);padding:1px var(--sp-2);font-weight:600;background:var(--hover);color:var(--mute)}
.st-Available,.st-Next{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.st-Overdue{background:color-mix(in srgb,var(--over) 16%,transparent);color:var(--over)}
.st-DueSoon{background:color-mix(in srgb,var(--soon) 18%,transparent);color:var(--soon)}
.st-Completed{background:var(--acc-soft);color:var(--acc)}
.durs{display:flex;gap:var(--sp-1h);align-items:center;flex-wrap:wrap}
.durs input{width:80px}
/* R10-07 保留 3px：同 .dq button */
.durs button{border:0;background:var(--hover);border-radius:var(--r-sm);font-size:var(--fs-sm);min-height:24px;padding:3px var(--sp-2h);color:var(--mute)}
.durs button:hover{color:var(--acc)}
.ckgrid{display:flex;flex-direction:column;gap:var(--sp-1);max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-2)}
/* data page */
.doc{padding:18px var(--sp-5);max-width:880px;display:flex;flex-direction:column;gap:var(--sp-4)}
.doc h2{font-size:var(--fs-lg);margin:var(--sp-2) 0 0}
.doc p{margin:0;color:var(--mute);line-height:1.6;max-width:68ch}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.tbl table{border-collapse:collapse;width:100%;font-size:var(--fs-md)}
.tbl th,.tbl td{text-align:left;padding:var(--sp-2) var(--sp-2h);border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--bg);font-weight:600;color:var(--mute);font-size:var(--fs-sm)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-family:var(--mono);font-size:var(--fs-sm);white-space:nowrap;color:var(--acc)}
.tbl td:nth-child(2){font-family:var(--mono);font-size:var(--fs-xs);color:var(--mute);white-space:nowrap}
.tabs{display:flex;gap:var(--sp-1h);flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:none;border-radius:var(--r-xl);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-md)}
.tabs button.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.io-box{width:100%;min-height:160px;font-family:var(--mono);font-size:var(--fs-sm);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-2h);background:var(--bg)}
.settings h2:first-child{margin-top:0}
.slist{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);overflow:hidden}
.srow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-2h) var(--sp-3h);min-height:52px}
.srow+.srow{border-top:1px solid var(--line)}
.srow>label,.srow>.slab{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;margin:0}
.srow>label>span,.srow>.slab>span{font-size:var(--fs-base);color:var(--ink)}
.srow small{font-size:var(--fs-sm);color:var(--mute);line-height:1.4}
.srow .inp{flex:0 0 auto;width:150px;max-width:46%}
.srow .sval{flex:0 0 auto;font-size:var(--fs-md);color:var(--mute);text-align:right;max-width:46%}
/* 多選 */
.row.flash::before{animation:flash var(--dur-flash) var(--ease-out)}
@keyframes flash{0%{background:var(--acc-soft)}100%{background:transparent}}
body.selmode .row,body.selmode .prow{cursor:default}
body.selmode .row .grip{visibility:hidden}
/* 多選時：隱藏完成圓圈與專案 ⓘ，右邊的選取框改成方形，不會跟完成圈搞混 */
body.selmode .row .chk{visibility:hidden}
body.selmode .prow [data-act="info-project"]{visibility:hidden}
body.selmode .row::after,body.selmode .prow::after{content:"";position:absolute;right:14px;top:50%;width:20px;height:20px;margin-top:calc(var(--sp-2h) * -1);border-radius:var(--r-sm);border:1.6px solid var(--faint);box-sizing:border-box}
body.selmode .row.msel::after,body.selmode .prow.msel::after{background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--acc)}
body.selmode .prow{position:relative}
.ib.on{background:var(--acc-soft);color:var(--acc)}
#selbar{display:none}
.durs.bd{flex-wrap:wrap}
.durs.bd input[type=date]{width:auto;flex:1 1 130px;min-width:0}
/* 分段切換 */
#hdr .seg{display:inline-flex;padding:2px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);gap:2px;overflow:visible}
#hdr .seg button{flex:none;border:0;background:none;height:28px;padding:0 var(--sp-3);border-radius:var(--r-md);font-size:var(--fs-md);color:var(--mute)}
#hdr .seg button.on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
/* 月曆 */
.month{padding:var(--sp-2h) var(--sp-3) var(--sp-3h)}
.mnav{display:flex;align-items:center;gap:var(--sp-1);padding:2px var(--sp-1) var(--sp-2h);flex-wrap:wrap}
.mnav b{font-size:var(--fs-base);min-width:7.5em;text-align:center}
.mnav .btn{margin-left:var(--sp-1h)}
svg.i.flip{transform:rotate(180deg)}
.mleg{display:flex;gap:var(--sp-1h);margin-left:auto;flex-wrap:wrap}
.mleg .mev{display:inline-block;cursor:default;width:auto}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:26px repeat(var(--w),minmax(108px,auto));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
.mwh{display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);color:var(--mute);border-bottom:1px solid var(--line);background:var(--bg)}
/* R10-07 保留 3px：月曆格內事件間距，改了每週列高會變 */
.mc{min-width:0;padding:var(--sp-1) var(--sp-1) var(--sp-1h);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px;cursor:pointer;overflow:hidden}
.mc:nth-child(7n+7){border-right:0}
.mc.wk{background:color-mix(in srgb,var(--bg) 55%,var(--panel))}
.mc.other .mn{color:var(--faint)}
.mc.other{background:var(--bg)}
.mc:hover{background:var(--hover)}
.mc.sel{box-shadow:inset 0 0 0 2px var(--acc)}
.mn{align-self:center;border:0;background:none;padding:0;width:24px;height:24px;line-height:24px;text-align:center;border-radius:var(--r-lg);font-size:var(--fs-md);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.mc.past .mn{color:var(--mute)}
.mc.today .mn{background:var(--acc);color:var(--on-acc)}
.mev{display:block;width:100%;border:0;text-align:left;height:20px;line-height:20px;padding:0 var(--sp-1h) 0 var(--sp-1h);border-radius:var(--r-xs);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;color:var(--ink);background:var(--hover);box-shadow:inset 2px 0 0 var(--faint);cursor:pointer}
.mev span{display:block;overflow:hidden;text-overflow:ellipsis}
.mev.od{background:var(--over);color:var(--panel);font-weight:600;box-shadow:none}
.mev.due{background:color-mix(in srgb,var(--soon) 18%,var(--panel));color:var(--ink);box-shadow:inset 2px 0 0 var(--soon)}
.mev.plan{background:color-mix(in srgb,var(--plan) 16%,var(--panel));color:var(--ink);box-shadow:inset 2px 0 0 var(--plan)}
.mev.defer{background:transparent;color:var(--mute);box-shadow:inset 2px 0 0 var(--defer);outline-style:dashed;outline-width:1px;outline-color:var(--line);outline-offset:-1px}
.mev.proj{background:color-mix(in srgb,var(--pv-projects) 16%,var(--panel));color:var(--ink);box-shadow:inset 2px 0 0 var(--pv-projects)}
.mev.done{background:color-mix(in srgb,var(--acc) 18%,var(--panel));color:var(--ink);box-shadow:inset 2px 0 0 var(--acc);opacity:.32}
/* R9-12 「+n」是可點的 chip：打開當天清單 */
.mmore{align-self:flex-start;height:18px;padding:0 var(--sp-1h);border:0;border-radius:var(--r-xs);background:var(--chip-bg);color:var(--ink2);font-size:var(--fs-xs);font-weight:600;line-height:18px;cursor:pointer;transition:background var(--dur-1) var(--ease-out)}
.mmore:hover{background:color-mix(in srgb,var(--ink) 10%,var(--chip-bg))}
.mmore:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (forced-colors:active){ .mmore{border:1px solid ButtonText} }
.mev[data-mk]{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mev.dragging{opacity:.35}
.mc.drop-into{background:var(--acc-soft);box-shadow:inset 0 0 0 2px var(--acc)}
/* 開關 */
.sw{position:relative;display:inline-flex;flex:none;width:51px;height:31px}
.sw input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;z-index:var(--z-base)}
/* 開關（R3-18）：關＝--field 軌道＋2px --line-strong 框、--mute 實心 17px 圓點；開＝--acc 軌道、--on-acc 23px 圓點 */
.sw span{position:absolute;inset:0;border-radius:var(--r-full);background:var(--field);box-shadow:inset 0 0 0 2px var(--line-strong);transition:background var(--dur-1),box-shadow var(--dur-1)}
.sw span::after{content:"";position:absolute;left:7px;top:7px;width:17px;height:17px;border-radius:50%;background:var(--mute);transition:left var(--dur-1) var(--ease-out),top var(--dur-1) var(--ease-out),width var(--dur-1) var(--ease-out),height var(--dur-1) var(--ease-out),background var(--dur-1)}
.sw input:checked+span{background:var(--acc);box-shadow:none}
.sw input:checked+span::after{left:24px;top:4px;width:23px;height:23px;background:var(--on-acc);box-shadow:var(--sh-1)}
/* overlays */
#scrim{display:none}
#iscrim{display:none}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:0 var(--sp-4);border-radius:var(--r-lg);font-size:var(--fs-body-sm);display:none;gap:var(--sp-3h);align-items:center;z-index:var(--z-toast);box-shadow:var(--sh-2);max-width:92vw;--tx:-50%;min-height:44px;min-width:160px;box-sizing:border-box}
#toast.noact{justify-content:center;text-align:center}
#toast.in{animation:toastIn var(--dur-2) var(--ease-out)}
#toast.out{animation:toastOut var(--dur-1) var(--ease-in) forwards}
#toast button{border:0;background:none;color:var(--acc-soft);font-weight:600;padding:var(--sp-1) 2px;white-space:nowrap;flex:none}
#toast span{min-width:0}
.chk{position:relative}
@media (pointer:coarse){.chk::before{content:"";position:absolute;inset:-11px}}
.modal{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;z-index:var(--z-modal);padding:var(--sp-4);animation:fadeIn var(--dur-2) var(--ease-out)}
.mbox{background:var(--raised);border-radius:var(--r-xl);padding:var(--sp-6);max-width:420px;width:100%;display:flex;flex-direction:column;gap:var(--sp-3);box-shadow:var(--sh-3);animation:popIn var(--dur-2) var(--ease-out);outline:none}
.mbox .mt{margin:0;font-size:var(--fs-lg);font-weight:600;line-height:1.35;color:var(--ink)}
.mbox .md{margin:0;font-size:var(--fs-body-sm);line-height:1.55;color:var(--mute);white-space:pre-line}
.mbox p{margin:0;line-height:1.5}
.mbtn{display:flex;gap:var(--sp-2);justify-content:flex-end;margin-top:var(--sp-2)}
.mbtn .btn{min-height:36px;padding:0 var(--sp-4)}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .menu{display:inline-flex}
  #side .ri{flex-direction:row;justify-content:flex-start;gap:var(--sp-3h);padding:var(--sp-2h) 18px;font-size:var(--fs-base);line-height:20px;text-align:left}
  #side .ri .rl{max-width:none;-webkit-line-clamp:1}
  #side .ri.sm{font-size:var(--fs-body-sm)}
  #side .pbadge{position:static;margin-left:auto;order:3;border:0}
  #side .ri .rg{order:1} #side .ri .rl{order:2}
  #side .ri:has(.pbadge) .rg{position:static}
  /* RID-50 抽屜底部對齊：同步圖示和搜尋／設定圖示同一欄（左 18px、24px 寬置中），「已同步」與版本號對齊項目文字欄（18＋24＋14＝56px）；
     主題按鈕右內距 6px：44px 按鈕裡的圖示右緣剛好離抽屜右邊 18px，和左邊對稱 */
  #side .rtools{flex-direction:row;justify-content:flex-start;gap:0;padding:var(--sp-2) 6px var(--sp-2) 18px}
  #side .rtools .sync{gap:var(--sp-3h);padding:0}
  #side .rtools .sync .sic{width:24px;flex:none;justify-content:center}
  #side .rver{justify-content:flex-start;padding:0 18px var(--sp-2) calc(18px + 24px + var(--sp-3h));min-height:32px}
  #side .rver .rv-l,#side .rver .rv-n{display:inline}
  #side .rver .rv-n{margin-left:auto;color:var(--acc)}
  /* 捲到新項目時扣掉底部分頁列與頂端固定的快速新增列 */
  #content .row,#content .prow{scroll-margin-bottom:calc(92px + env(safe-area-inset-bottom));scroll-margin-top:64px}
  #tabbar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(var(--sp-3h) + env(safe-area-inset-bottom));height:var(--tab-h);border-radius:var(--r-full);align-items:center;padding:0 var(--sp-1h);z-index:var(--z-bar)}
  .tab{position:relative;flex:1;min-width:0;height:54px;border:0;background:none;border-radius:var(--r-full);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink);font-size:var(--fs-xs);line-height:13px;font-weight:500;padding:0}
  .tab svg.pg{width:24px;height:24px}
  .tab .pbadge{top:-5px;right:-14px;border-color:transparent}
  .tab.on{font-weight:600}   /* R8-14 底色由膠囊（.tab.on .rg，--pv-cap）表達，不再疊寫死的灰底 */
  .tab .tl{white-space:nowrap}
  /* 新增鈕浮在分頁列右上方（TickTick 式），實心強調色 */
  #fab{display:grid;place-items:center;position:fixed;right:var(--sp-4);bottom:calc(var(--tab-h) + var(--sp-3h) * 2 + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:var(--r-full);z-index:var(--z-bar);padding:0;background:var(--acc);color:var(--on-acc);border:0;box-shadow:var(--sh-2),inset 0 1px 0 rgb(255 255 255/.25);-webkit-backdrop-filter:none;backdrop-filter:none}
  #fab svg.i{width:28px;height:28px;stroke-width:2.2}
  svg.pg .k{stroke:var(--panel)} svg.pg .kf{fill:var(--panel)}
  #side svg.pg .k{stroke:var(--side)} #side svg.pg .kf{fill:var(--side)}
  #content{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  body.selmode #fab{display:none}
  body.selmode #selbar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:calc(var(--z-bar) + 1);align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);border-radius:var(--r-xl);background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-2);font-size:var(--fs-base)}
  body.selmode #selbar span{flex:1;min-width:0}
  body.selmode #selbar .btn{min-height:40px;padding:0 var(--sp-3h)}
  .month{padding:var(--sp-1h) var(--sp-1) var(--sp-2h)}
  .mleg{width:100%;margin:var(--sp-1) 0 0;justify-content:flex-start}
  .mgrid{grid-template-rows:22px repeat(var(--w),minmax(96px,auto));border-radius:0;border-left:0;border-right:0}
  /* R10-07 保留上 3px：手機月曆格高 */
  .mc{padding:3px 2px var(--sp-1);gap:2px;border-right:0}
  .mn{width:20px;height:20px;line-height:20px;font-size:var(--fs-sm)}
  .mev{height:15px;line-height:15px;font-size:var(--fs-xs);padding:0 2px 0 var(--sp-1);border-radius:var(--r-xs)}
  #hdr .seg button{height:30px}
  #toast{bottom:calc(162px + env(safe-area-inset-bottom));left:12px;right:12px;transform:none;max-width:none;justify-content:space-between}
  .ib{min-width:40px;height:40px;padding:0 var(--sp-2h)}
  .dq button{font-size:var(--fs-md);padding:var(--sp-1h) var(--sp-3);border-radius:var(--r-md)}
  .dq{gap:var(--sp-2)}
  #side .ri .pbadge{position:absolute;right:16px;left:auto;top:50%;transform:translateY(-50%);margin:0}
  #side .ri .rg{width:24px;flex:none;justify-content:center}
  #side .sync .stx{display:block;font-size:var(--fs-md);line-height:16px;max-width:none;text-align:left;color:var(--mute)}
  #side .sync.warn .stx{color:var(--over)}
  #side .sync .stx-s{display:none} #side .sync .stx-l{display:inline}
  #side .sync{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--sp-2);flex:1;min-width:0;width:auto;height:auto}
  #side .ib.sync,#side span.sync{min-height:44px}   /* R8-12 抽屜底部的同步列：整列是點擊區，觸控高度 44（原本 20） */
  #side .ib.sync .stx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #side .ib.sync.warn .stx{white-space:normal}   /* R10-06 同步警示在抽屜裡照舊換行（原本靠 .sync.warn .stx 的強制旗標） */
  #content{padding-bottom:calc(170px + env(safe-area-inset-bottom))!important}
  #side{position:fixed;inset:0 auto 0 0;z-index:calc(var(--z-scrim) + 1);width:84vw;max-width:310px;transform:translateX(-102%);transition:transform var(--dur-3) var(--ease-out)}
  #side{overflow-y:auto}
  #side .rail{height:auto;min-height:100%}
  #side .rtop{flex:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
  #side .rfoot{margin-top:auto;position:sticky;bottom:0}
  body.side-open #side{transform:none;box-shadow:var(--sh-3)}
  body.side-open #scrim{display:block;position:fixed;inset:0;background:var(--scrim);z-index:var(--z-scrim)}
  #insp{position:fixed;inset:0;z-index:var(--z-sheet);width:auto;border:0;padding-top:env(safe-area-inset-top)}
  #hdr{padding:calc(var(--sp-2h) + env(safe-area-inset-top)) var(--sp-3) var(--sp-2h);flex-wrap:wrap;row-gap:var(--sp-2)}
  #hdr .ttl{flex:1 1 140px}
  #hdr .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #hdr .tools{margin-left:auto;flex-wrap:wrap;justify-content:flex-end;flex:0 1 auto}
  #hdr .tools [data-act="new-task"]{display:none}
  #side{padding-top:env(safe-area-inset-top)}
  .row{padding-right:var(--sp-3)}
  .qahint{display:none}
  /* iOS：字級小於 16px 的輸入框一聚焦就會自動放大，造成整頁可左右拖動 */
  input,select,textarea,.iname,.dtext,.ckin,.inp,select.fsel,select.addsel,.qa input,.srch input{font-size:16px!important}
  #insp{overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain}
  #insp .ibody{min-width:0;max-width:100vw}
  #insp .ibody>*,#insp .fld,#insp .df,#insp .dv,#insp .rep{min-width:0;max-width:100%}
  .rep{flex-wrap:wrap}
  .rep select.inp{max-width:100%}
}
/* 平板（700～1199px，iPad 直式／橫式）：保留較窄的圖示欄，不顯示手機分頁列與新增浮鈕 */
@media (min-width:700px) and (max-width:1199px) and (min-height:500px),(min-width:1000px) and (max-width:1199px){
  #side{width:72px}
  .ri{font-size:var(--fs-xs);line-height:13px;padding-left:2px;padding-right:2px}
  .ri .rl{max-width:66px}
  .sync.warn .stx{max-width:66px}
  .pbadge{right:-10px}
  #insp{width:360px}
  /* R10-07 保留 5px：手機日期條 7 格等寬，改 4／8 會累積 6px 讓最後一格位移 */
  .strip{gap:5px;padding:var(--sp-2h) var(--sp-3)}
  .day{flex-basis:54px}
}
/* 700～1023px：檢閱器改成右側浮層，不擠壓主清單 */
@media (min-width:700px) and (max-width:1023px) and (min-height:500px),(min-width:1000px) and (max-width:1023px){
  body.insp-on #iscrim{display:block;position:fixed;inset:0;background:var(--scrim);z-index:calc(var(--z-sheet) - 1)}
  #insp{position:fixed;top:0;right:0;bottom:0;width:min(400px,88vw);z-index:var(--z-sheet);box-shadow:var(--sh-3);padding-top:env(safe-area-inset-top);overscroll-behavior:contain}
  body.selmode #selbar{display:flex;position:fixed;left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 104px));margin-left:36px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:calc(var(--z-bar) + 1);align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);border-radius:var(--r-xl);background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-2);font-size:var(--fs-base)}
  body.selmode #selbar span{flex:1;min-width:0}
  body.selmode #selbar .btn{min-height:40px;padding:0 var(--sp-3h)}
  body.selmode #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* 觸控平板：輸入框字級 16px，避免 iOS 聚焦時自動放大 */
@media (pointer:coarse) and (min-width:700px) and (max-width:1199px) and (min-height:500px),(pointer:coarse) and (min-width:1000px) and (max-width:1199px){
  input,select,textarea,.iname,.dtext,.ckin,.inp,select.fsel,select.addsel,.qa input,.srch input{font-size:16px!important}
  /* 標題列：按鈕跟 16px 的下拉選單同字級、同高度 */
  #hdr .btn.sm,#hdr .seg button{font-size:var(--fs-base)}
  #hdr .btn.sm,#hdr select.fsel,#hdr .seg{min-height:36px;box-sizing:border-box}
}
html,body{overflow-x:hidden}
.pk{overflow:hidden}
input,select,textarea{max-width:100%}
/* checklist */
.notehead{display:flex;align-items:center;gap:var(--sp-2)}
.fold{display:flex;align-items:center;gap:var(--sp-1h);width:100%;border:0;border-top:1px solid var(--line);background:none;margin-top:var(--sp-1h);padding:var(--sp-3) 0 var(--sp-1);text-align:left;font-size:var(--fs-sm);font-weight:600;color:var(--mute);letter-spacing:.3px}
.fold svg.i{width:14px;height:14px;transition:transform var(--dur-1) var(--ease-out)}
.fold.open svg.i{transform:rotate(90deg)}
.fold small{margin-left:auto;font-weight:400;font-size:var(--fs-sm);color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%;letter-spacing:0}
.fold:hover{color:var(--ink)}
.foldb{display:flex;flex-direction:column;gap:var(--sp-2h);padding-top:var(--sp-1h)}
.notehead .lbl{flex:1}
.notehead .seg{flex:none}
.notehead .seg button{flex:none;padding:var(--sp-1h) var(--sp-2h);display:inline-flex;align-items:center;gap:var(--sp-1)}
.notehead .seg svg.i{width:15px;height:15px}
.ckprog{font-size:var(--fs-sm);color:var(--mute);font-variant-numeric:tabular-nums}
.cklist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
.ckrow{display:flex;align-items:center;gap:var(--sp-2);padding:2px var(--sp-1h) 2px var(--sp-3);border-bottom:1px solid var(--line)}
.ckbox{width:19px;height:19px;border-radius:var(--r-sm);border:1.6px solid var(--faint);background:none;display:grid;place-items:center;color:transparent;padding:0;flex:none}
.ckbox svg{width:12px;height:12px;stroke-width:3}
.ckbox:hover{border-color:var(--acc)}
.ckbox.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.ckin{flex:1;min-width:0;border:0;background:none;outline:none;padding:var(--sp-2) 0;font-size:var(--fs-base)}
.ckrow.done .ckin{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--faint)}
.ckin:focus,.ckin:focus-visible{outline:none;box-shadow:none}
.ckrow:focus-within{background:var(--hover)}
.ckrow .ib{opacity:.45}
.ckrow:hover .ib,.ckrow:focus-within .ib{opacity:1}
.ckadd{border:0;background:none;color:var(--mute);display:flex;gap:var(--sp-1h);align-items:center;padding:var(--sp-2h) var(--sp-3);text-align:left;font-size:var(--fs-body-sm)}
.ckadd:hover{color:var(--acc)}
.pcard .ckline{font-size:var(--fs-sm);color:var(--mute)}
/* drag */
#content{position:relative}
.row{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.grip{width:24px;height:24px;flex:none;display:grid;place-items:center;color:var(--faint);opacity:.55;touch-action:none;cursor:grab;border-radius:var(--r-sm);margin-top:-1px}
.grip svg{width:16px;height:16px;stroke-width:2.6}
.row:hover .grip{opacity:1}
.row.dragging{opacity:.35}
#dropline{position:absolute;height:3px;border-radius:2px;background:var(--acc);pointer-events:none;z-index:calc(var(--z-base) + 4);display:none}
#dropline::before{content:"";position:absolute;left:-5px;top:-3.5px;width:10px;height:10px;border-radius:50%;border:2px solid var(--acc);background:var(--panel)}
.dghost{position:fixed;pointer-events:none;z-index:var(--z-top);background:var(--raised);border:1.5px solid var(--acc);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-body-sm);max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translate(14px,-50%);box-shadow:var(--sh-2)}
.dghost.anch{max-width:none;transform:translate(0,-50%) rotate(-1deg)}
body.is-dragging,body.is-dragging *{cursor:grabbing!important}
@media (pointer:coarse){.grip{opacity:.8}}
/* 減少動態：transition 與 animation 都關（RID-34） */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}}
/* 帳號與同步狀態 */
.acct{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--mute);padding:var(--sp-2h) var(--sp-2h) 0;min-width:0}
.acct span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkbtn{border:0;background:none;color:var(--acc);padding:2px var(--sp-1);font-size:var(--fs-sm)}
.signin{margin:var(--sp-3) var(--sp-1h) 0;justify-content:center}
.sync span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sync i.err{background:var(--over)}
.sidebottom{margin-top:auto;display:flex;flex-direction:column}
.sidebottom .sidefoot{margin-top:0}
/* 收件匣整理模式 */
#triage{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--scrim);display:flex;align-items:safe center;justify-content:center;padding:var(--sp-4);overflow:auto;overscroll-behavior:contain}
body.tg-on{overflow:hidden}
/* 文字大小用 CSS zoom，視窗單位會跟著放大，所以高度要除回去（--zoom 由 applyFont() 設定）；中間內容捲動，按鈕列固定在底部 */
.tg-card{background:var(--panel);color:var(--ink);border-radius:var(--r-xl);width:100%;max-width:580px;max-height:calc((100dvh - 32px) / var(--zoom,1));overflow:hidden;padding:var(--sp-4) var(--sp-5) var(--sp-3h);display:flex;flex-direction:column;gap:var(--sp-3h);box-shadow:var(--sh-3);box-sizing:border-box}
.tg-body{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--sp-3h);margin:0 calc(var(--sp-5) * -1);padding:2px var(--sp-5);overscroll-behavior:contain}
.tg-top,.tg-acts,.tg-hint{flex:none}
.tg-end .tg-sum{display:flex;gap:var(--sp-1h);justify-content:center;align-items:baseline;color:var(--ink)}   /* R10-06 特異度 (0,2,0) 高於 .tg-end p，不需要強制旗標 */
.tg-sum span{color:var(--faint)}
.tg-newp{border-style:dashed;color:var(--acc)}
.tg-newp svg.i{color:var(--acc)}
.tg-top{display:flex;align-items:center;gap:var(--sp-3)}
.tg-prog{font-size:var(--fs-md);color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.tg-bar{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.tg-bar i{display:block;height:100%;background:var(--pv-inbox);border-radius:2px;transition:width var(--dur-2) var(--ease-out)}
.tg-name{display:flex;gap:var(--sp-2h);align-items:flex-start}
.tg-name .iname{font-size:var(--fs-title-m)}
.tg-note{font-size:var(--fs-md);color:var(--mute);background:var(--bg);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-2h);white-space:pre-wrap;max-height:84px;overflow:auto;line-height:1.5}
.tg-sec{display:flex;flex-direction:column;gap:var(--sp-2);border-top:1px solid var(--line);padding-top:var(--sp-3)}
.tg-lbl{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--mute)}
.tg-cur{display:inline-flex;align-items:center;gap:var(--sp-1);font-weight:600;color:var(--pv-projects);margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-cur svg{width:14px;height:14px}
.tg-cur.tg-inbox{color:var(--faint);font-weight:500}
.tg-search{display:flex;align-items:center;gap:var(--sp-1h);border:1px solid var(--line);border-radius:var(--r-md);padding:0 var(--sp-2h);background:var(--bg);color:var(--faint)}
.tg-search input{flex:1;min-width:0;border:0;background:none;outline:none;padding:var(--sp-2) 0;color:var(--ink)}
.tg-plist{display:flex;flex-wrap:wrap;gap:var(--sp-1h)}
.tg-proj{display:inline-flex;align-items:center;gap:var(--sp-1h);max-width:240px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r-md);padding:var(--sp-1h) var(--sp-2h);font-size:var(--fs-md);color:var(--ink);text-align:left}
.tg-proj svg.i{width:15px;height:15px;color:var(--pv-projects)}
.tg-proj span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tg-proj small{color:var(--faint);font-size:var(--fs-xs);white-space:nowrap}
.tg-proj:hover{background:var(--hover)}
.tg-proj.on{background:color-mix(in srgb,var(--pv-projects) 14%,var(--panel));border-color:var(--pv-projects)}
.tg-more{font-size:var(--fs-sm);color:var(--faint);align-self:center}
.tg-dates{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-3);align-items:center}
.tg-dq{display:flex;flex-wrap:wrap;gap:var(--sp-1h);align-items:center}
.tg-dq button{border:1px solid var(--line);background:var(--panel);border-radius:var(--r-md);padding:var(--sp-1h) var(--sp-3);font-size:var(--fs-md);color:var(--mute)}
.tg-dq button:hover{color:var(--ink);background:var(--hover)}
.tg-dq button.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:600}
.tg-dv{font-size:var(--fs-sm);color:var(--mute)}
.tg-acts{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;border-top:1px solid var(--line);padding-top:var(--sp-3)}
.tg-acts .btn{min-height:38px}
.tg-sp{flex:1}
.tg-hint{font-size:var(--fs-xs);color:var(--faint);text-align:right;margin-top:calc(var(--sp-1h) * -1)}
.tg-end{align-items:center;text-align:center;padding:var(--sp-8) var(--sp-6) 22px}
.tg-end h2{margin:0;font-size:var(--fs-title-m)}
.tg-end p{margin:0;color:var(--mute);line-height:1.6}
.tg-end .tg-acts{border:0;justify-content:center}
.tg-big{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--on-acc)}
.tg-big svg.i{width:30px;height:30px;stroke-width:2.6}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  #triage{padding:0;align-items:stretch}
  .tg-card{max-width:none;max-height:none;height:calc(100dvh / var(--zoom,1));border-radius:0;padding:calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-4) 0;box-shadow:none}
  .tg-body{margin:0 calc(var(--sp-4) * -1);padding:2px var(--sp-4) var(--sp-2)}
  .tg-end{justify-content:center}
  .tg-hint{display:none}
  .tg-acts{background:var(--panel);margin:0 calc(var(--sp-4) * -1);padding:var(--sp-2h) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom))}
  .tg-acts .btn{min-height:44px;flex:1 1 auto;justify-content:center}
  .tg-sp{display:none}
  .tg-dq button{padding:var(--sp-2) var(--sp-3h);font-size:var(--fs-body-sm)}
  .tg-proj{padding:var(--sp-2h) var(--sp-3);font-size:var(--fs-base)}
}
/* 專案範本 */
.srow>.tplbtns{flex:none;flex-direction:row;gap:var(--sp-1h)}
/* R10-07 保留 5px：同 .fld */
.tplf .fld{gap:5px}
.tplf .chkl{font-size:var(--fs-body-sm)}
/* 月曆項目：第二行顯示專案與第一個標籤 */
.mev.two{height:auto;line-height:15px;padding:2px var(--sp-1h) 2px var(--sp-1h)}
.mev .mev-s{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sp-1);min-width:0;height:13px;font-size:var(--fs-xs);line-height:13px;color:var(--mute);white-space:nowrap;overflow:hidden}
.mev .mev-s em{font-style:normal}
.mev .mev-s .mev-p{overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.mev .mev-s .mev-tg{flex:none;display:inline-flex;align-items:center;gap:var(--sp-1);max-width:100%}
.mev .mev-s .mev-tg b{font-weight:400}
.mev .mev-s .mev-tg em{overflow:hidden;text-overflow:ellipsis;min-width:0}
.mev .mev-s i{width:6px;height:6px;border-radius:50%;background:var(--dot,var(--faint));flex:none}
.mev.od .mev-s{color:inherit;opacity:.88}
.mev.od .mev-s i{box-shadow:0 0 0 1px var(--panel)}
.mev-d{display:none}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .mev.two{height:15px;line-height:15px;padding:0 2px 0 var(--sp-1)}
  .mev .mev-s{display:none}
  .mev-d{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--dot,var(--faint));margin-right:2px;vertical-align:1px}
}
/* 逾期一鍵改期 */
.gh.odh{flex-wrap:wrap;row-gap:var(--sp-1h)}
.odbar{display:inline-flex;flex-wrap:wrap;gap:var(--sp-1h);margin-left:auto;letter-spacing:0}
/* R10-07 保留 3px：逾期列按鈕 28 高 */
.odbar .btn{font-weight:500;color:var(--ink);padding:3px var(--sp-2h);font-size:var(--fs-sm)}
.odnote{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin:var(--sp-2h) var(--sp-4) 0;padding:var(--sp-2) var(--sp-2h) var(--sp-2) var(--sp-3h);border-radius:var(--r-lg);background:color-mix(in srgb,var(--over) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--over) 30%,transparent);color:var(--over);font-size:var(--fs-md);font-weight:600}
.month .odnote,.odnote+.month{margin-top:var(--sp-2h)}
.od-today{flex:none;align-self:center;padding:2px var(--sp-2h);font-size:var(--fs-sm);color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}
body.selmode .od-today{display:none}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .odbar{margin-left:0;width:100%}
  .odbar .btn{flex:1 1 auto;justify-content:center;min-height:36px;font-size:var(--fs-md)}
  .od-today{min-height:32px;padding:var(--sp-1) var(--sp-2h);font-size:var(--fs-md)}
  .odnote{margin:var(--sp-2) var(--sp-2h) 0}
}
/* 歡迎畫面（第一次打開、沒有資料時） */
#welcome{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:var(--sp-4);overflow:auto}
.wl-card{background:var(--panel);color:var(--ink);border-radius:var(--r-xl);width:100%;max-width:480px;padding:var(--sp-6) var(--sp-6) 18px;display:flex;flex-direction:column;gap:var(--sp-3h);box-shadow:var(--sh-3)}
.wl-card h1{margin:0;font-size:var(--fs-xl)}
.wl-card>p{margin:0;color:var(--mute);line-height:1.6}
.wl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.wl-list li{display:flex;align-items:flex-start;gap:var(--sp-3)}
.wl-list li div{display:flex;flex-direction:column;gap:2px;line-height:1.45}
.wl-list li span{color:var(--mute);font-size:var(--fs-body-sm)}
#welcome svg.pg .k{stroke:var(--panel)} #welcome svg.pg .kf{fill:var(--panel)}
.wl-local{display:flex;gap:var(--sp-2);align-items:flex-start;font-size:var(--fs-body-sm);color:var(--mute);background:var(--bg);border-radius:var(--r-lg);padding:var(--sp-2h) var(--sp-3);line-height:1.5}
.wl-local svg{flex:none;margin-top:2px}
.wl-btns{display:flex;justify-content:flex-end;gap:var(--sp-2);flex-wrap:wrap}
@media (max-width:860px){ #welcome{padding:0;align-items:flex-end} .wl-card{border-radius:var(--r-xl) var(--r-xl) 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))} .wl-btns .btn{flex:1;justify-content:center;min-height:44px} }
/* 資料頁：危險區域、大量貼上 */
.dzone{margin-top:var(--sp-5);border:1px solid var(--over);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-3h);display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
.dzone h2{margin:0;color:var(--over)}
.dzone .btn.danger{border-color:var(--over)}
.pasted{display:flex;align-items:center;gap:var(--sp-2h);padding:var(--sp-2h) var(--sp-3);border:1px dashed var(--line);border-radius:var(--r-lg);color:var(--mute)}
.mbox p{white-space:pre-line}
/* 日期欄：看不懂時的說明、延後日晚於截止日的提醒（RID-32） */
.dhint{grid-column:2;font-size:var(--fs-sm);color:var(--over);line-height:1.4}
.dwarn{font-size:var(--fs-sm);line-height:1.45;color:var(--over);background:color-mix(in srgb,var(--over) 10%,transparent);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-2h)}
/* 名詞說明 */
.mbox.gloss{max-width:520px;max-height:calc((100dvh - 48px) / var(--zoom,1));overflow:auto}
.gloss dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-3h);font-size:var(--fs-body-sm);line-height:1.5}
.gloss dt{font-weight:600;color:var(--ink);white-space:nowrap}
.gloss dd{margin:0;color:var(--mute)}
@media (max-width:520px){ .gloss dl{grid-template-columns:1fr;gap:2px} .gloss dd{margin-bottom:var(--sp-2)} }
.rvbar{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-3) var(--sp-4) 0;padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);border-radius:var(--r-lg);background:color-mix(in srgb,var(--pv-review) 12%,var(--panel));color:var(--pv-review);font-size:var(--fs-md);font-weight:600}
.rvbar span{flex:1;min-width:0}
.rvbar .btn{flex:none}
/* 檢閱器底部：放棄與刪除分開，附說明 */
.idz{display:flex;flex-direction:column;gap:var(--sp-2h);margin-top:var(--sp-1h);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.idr{display:flex;align-items:center;gap:var(--sp-2h)}
.idr .btn{flex:none;min-width:84px;justify-content:center}
.idr small{font-size:var(--fs-sm);color:var(--mute);line-height:1.45}
/* 手機左滑 */
.row .swa{display:none}
.row.swiping,.row.swiped{overflow:hidden}
.row.swiping>*:not(.swa),.row.swiped>*:not(.swa){transform:translateX(var(--sx,0))}
.row.swiped>*:not(.swa){transition:transform var(--dur-1) var(--ease-out)}
.row.swiping .swa,.row.swiped .swa{display:flex;position:absolute;top:0;right:0;bottom:0;width:calc(var(--sx,0px) * -1);overflow:hidden;z-index:0}
.swa button{min-width:0;white-space:nowrap}
.swa button{flex:1;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--fs-sm);font-weight:600}
.swa button svg.i{width:18px;height:18px}
.swa .sw-done{background:var(--ok);color:var(--panel)}
.swa .sw-del{background:var(--over);color:var(--panel)}
@media (max-width:699px),(max-width:999px) and (max-height:499px){ #content .row{touch-action:pan-y} }
/* 檢閱器的子動作清單＋連續新增 */
.kids{display:flex;flex-direction:column;gap:2px}
.kid{display:flex;align-items:center;gap:var(--sp-2);border:0;background:none;padding:var(--sp-1h) var(--sp-1h);border-radius:var(--r-md);text-align:left;font-size:var(--fs-md);color:var(--ink);min-width:0}
.kid:hover{background:var(--hover)}
.kid span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kid.done span:last-child{color:var(--faint);text-decoration:line-through}
.kdot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--faint);flex:none;box-sizing:border-box}
.kid.done .kdot{background:var(--faint)}
.kidform{display:flex;align-items:center;gap:var(--sp-1h);border:1px dashed var(--line);border-radius:var(--r-md);padding:0 var(--sp-2);color:var(--faint)}
.kidform:focus-within{border-style:solid;border-color:var(--acc);box-shadow:var(--focus-field)}
.kidform svg.i{width:15px;height:15px;flex:none}
.kidform input{flex:1;min-width:0;border:0;background:none;outline:none;padding:var(--sp-2) 0;font:inherit;font-size:var(--fs-md);color:var(--ink)}
@media (max-width:860px){ .kidform input{font-size:16px} }
/* 橫向手機（高度不到 500）：分頁列變矮、只留圖示，新增鈕移到右下角同一排，多留空間給清單 */
@media (max-width:999px) and (max-height:499px){
  #tabbar{--tab-h:48px;left:50%;right:auto;transform:translateX(-50%);width:min(460px,calc(100vw - 150px));bottom:calc(6px + env(safe-area-inset-bottom))}
  #tabbar .tab{height:40px}
  #tabbar .tab .tl{display:none}
  #fab{width:48px;height:48px;bottom:calc(6px + env(safe-area-inset-bottom))}
  #content{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  #content .row,#content .prow{scroll-margin-bottom:calc(64px + env(safe-area-inset-bottom))}
  #toast{bottom:calc(62px + env(safe-area-inset-bottom))}
  #hdr{padding-top:calc(var(--sp-1h) + env(safe-area-inset-top));padding-bottom:var(--sp-1h);min-height:0}
}

/* ================= RID-34：UI 會議第 1 輪 ================= */
/* 清單寬螢幕置中：檢閱器關閉且 #main ≥1200 時內容 960px 置中（--gut 是左右留白，分組標題底色仍滿版） */
#main{container-type:inline-size;container-name:main}
#content{--gut:16px;--qa-h:57px;--gh-top:0px}
#content:has(.qa){--gh-top:var(--qa-h)}
#content:has(>.sbar){--gh-top:65px}
@container main (min-width:1200px){ body:not(.insp-on) #content{--gut:max(16px,calc((100cqw - 960px) / 2))} }
.rvbar,.odnote{margin-left:var(--gut);margin-right:var(--gut)}
.pcard{margin-left:var(--gut);margin-right:var(--gut)}
.sbar{padding-left:var(--gut);padding-right:var(--gut)}
body.selmode .row::after,body.selmode .prow::after{right:var(--gut)}
#content svg.pg .k{stroke:var(--panel)} #content svg.pg .kf{fill:var(--panel)}
/* 動畫 keyframes */
@keyframes fadeIn{from{opacity:0}}
@keyframes popIn{from{opacity:0;transform:scale(.96)}}
@keyframes sheetIn{from{transform:translateY(100%)}}
@keyframes toastIn{from{opacity:0;transform:translate(var(--tx),8px)}to{opacity:1;transform:translate(var(--tx),0)}}
@keyframes toastOut{to{opacity:0;transform:translate(var(--tx),4px)}}
@keyframes inspIn{from{opacity:0;transform:translateX(16px)}}
@keyframes inspInM{from{opacity:0;transform:translateY(24px)}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
@keyframes chkPop{50%{transform:scale(1.15)}}
@keyframes tgSwap{from{opacity:0;transform:translateX(12px)}}
#content.vfade{animation:fadeIn var(--dur-1) var(--ease-out)}
#insp.ins-in>*{animation:inspIn var(--dur-2) var(--ease-out)}
.tg-body.tg-swap{animation:tgSwap var(--dur-2) var(--ease-out)}
.wl-card{animation:popIn var(--dur-2) var(--ease-out)}
/* 完成動作的回饋：圓圈填色＋打勾描線 → 刪除線變淡 → 停留 → 收合 */
.row.completing .chk{background:var(--acc);border-color:var(--acc);color:var(--on-acc);animation:chkPop var(--dur-2) var(--ease-out)}
.row.completing .chk svg{stroke-dasharray:22;stroke-dashoffset:22;animation:drawCheck var(--dur-2) var(--ease-out) forwards}
.row.completing .rn{color:var(--mute);opacity:.6;transition:opacity var(--dur-2),color var(--dur-2)}
.row.completing .rm{opacity:.55;transition:opacity var(--dur-2)}
.row.collapse,.prow.collapse{height:0!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important;opacity:0;overflow:hidden;transition:height var(--dur-2) var(--ease-in-out),padding var(--dur-2) var(--ease-in-out),opacity var(--dur-2) var(--ease-in)}
.row.collapse::before,.prow.collapse::before{display:none}
.row.collapse,.prow.collapse{background:none}
.btn.rvbtn{margin-right:2px}
.btn.rvbtn.ok{background:var(--ok);border-color:var(--ok);color:var(--panel);transition:background var(--dur-1)}
/* 標題列 */
#hdr .ib.add{color:var(--acc)}
.fsel-w{display:inline-flex;position:relative;align-items:center}
.fsel-w>svg{display:none}
.btn.tri{gap:var(--sp-1);padding:0 var(--sp-2) 0 var(--sp-2h)}
.btn.tri .cnt{min-width:18px;height:18px;line-height:18px;border-radius:var(--r-full);padding:0 var(--sp-1h);font-size:var(--fs-xs);background:color-mix(in srgb,var(--on-acc) 22%,transparent);font-variant-numeric:tabular-nums}
.qa .qa-go{display:none}
/* R10-07 保留 3px：同 .qahint .qp */
.qahint .qs{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;margin-right:var(--sp-1h)}
/* 檢閱器標題列與子動作 */
.ih .it{font-size:var(--fs-base)}
.ih-x{margin-left:auto;flex:none}
.kid .kchk{width:18px;height:18px;margin:0;border-width:1.6px;pointer-events:none}
.kid .kchk svg{width:11px;height:11px}
/* 預測日期條：今天淡紫底、選中的外框 */
/* 整理模式 */
.tg-dq button.on{background:var(--acc-soft);border-color:color-mix(in srgb,var(--acc) 35%,transparent);color:var(--acc);font-weight:600}
.tg-bar i{transition:width var(--dur-2) var(--ease-out)}
.tg-hint kbd{font-size:var(--fs-xs);padding:0 var(--sp-1h)}
/* 月曆事件：統一 3px 色條、逾期改淡紅底＋紅字 */
.mev{box-shadow:inset 3px 0 0 var(--faint);border-radius:var(--r-xs)}
.mev.od{background:color-mix(in srgb,var(--over) 16%,var(--panel));color:var(--over);font-weight:600;box-shadow:inset 3px 0 0 var(--over)}
.mev.od .mev-s{color:var(--mute);opacity:1}
.mev.due{box-shadow:inset 3px 0 0 var(--soon)} .mev.plan{box-shadow:inset 3px 0 0 var(--plan)} .mev.defer{box-shadow:inset 3px 0 0 var(--defer)} .mev.proj{box-shadow:inset 3px 0 0 var(--pv-projects)} .mev.done{box-shadow:inset 3px 0 0 var(--acc)}
.mdots{display:none}
/* 標籤頁：父標籤實心圖示、子標籤用縮排導引線 */
.prow.tagrow{min-height:44px;padding-top:var(--sp-1h);padding-bottom:var(--sp-1h)}
.prow .pic.tagp{background:none;color:var(--pv-tags)}
.prow .pic.tagp svg.pg{width:20px;height:20px}
.prow.tagc .pic.tgl{position:absolute;left:calc(var(--gut) + var(--d,0) * 20px - 9px);top:0;bottom:0;width:1px;height:auto;border-radius:0;background:var(--line)}
.prow.tagc{padding-left:calc(var(--gut) + var(--d,0) * var(--sp-5) + var(--sp-3h))}
.prow.untag .pic{background:none;color:var(--faint)}
.prow.untag b{color:var(--mute);font-weight:500}
/* 同步狀態：雲朵＋右下狀態點 */
.sync{width:32px;height:32px}
.sync .sic{position:relative;display:inline-flex;color:var(--mute)}
.sync .sic svg.i{width:20px;height:20px}
.sync .sic i{position:absolute;right:-3px;bottom:0;width:8px;height:8px;border:2px solid var(--side);box-sizing:content-box}
/* 快捷鍵說明：三組、桌面兩欄 */
.mbox.kbox{max-width:640px}
.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.kgrid section:first-child{grid-row:span 2}
.kgrid h3{margin:0 0 var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--mute)}
/* R10-07 保留 7px 列距：快捷鍵表 14 列，改 8 對話框高 +14px */
.keys{font-size:var(--fs-md);gap:7px var(--sp-3)}
kbd{min-height:22px;line-height:18px;border-radius:var(--r-sm);border-bottom-width:2px;font-family:var(--body);font-variant-numeric:tabular-nums}
@media (max-width:620px){ .kgrid{grid-template-columns:1fr} .kgrid section:first-child{grid-row:auto} }
/* 搜尋框 */
.sbar .srch{min-height:40px;border-radius:var(--r-lg);padding:0 var(--sp-3)}
/* 觸控裝置：不顯示拖拉把手（長按仍可拖曳） */
@media (pointer:coarse){ .row .grip{display:none} }
/* ---------- 手機 ---------- */
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  /* 標題列單行 56px：☰、標題、右側圖示 */
  #hdr{flex-wrap:nowrap;min-height:56px;padding:calc(var(--sp-2) + env(safe-area-inset-top)) var(--sp-2) var(--sp-2) var(--sp-1);gap:var(--sp-1)}
  #hdr h1{font-size:var(--fs-title-m)}
  #hdr .sub{display:none}
  #hdr .ttl{flex:1 1 auto;min-width:0}
  #hdr .tools{flex:none;flex-wrap:nowrap;gap:2px;margin-left:0}
  #hdr .ib{min-width:36px;height:36px;padding:0 var(--sp-2)}
  #hdr .seg button{height:30px;padding:0 var(--sp-2h)}
  .fsel-w{width:36px;height:36px;display:inline-grid;place-items:center;color:var(--mute);border-radius:var(--r-md)}
  .fsel-w>svg{display:block}
  .fsel-w select.fsel{position:absolute;inset:0;width:100%;height:100%;opacity:0;padding:0;border:0}
  .fsel-w.on{color:var(--acc);background:var(--acc-soft)}
  #hdr .btn.tri{min-height:36px;padding:0 var(--sp-2);gap:var(--sp-1)}
  #hdr .btn.tri .tl{display:none}
  #content{--qa-h:61px}
  .qa input{height:40px}
  .qa .qa-go{display:inline-flex;min-height:40px;min-width:40px;padding:0}
  .btn.lg{min-height:44px}
  /* 確認框改成底部 sheet */
  .modal{place-items:end stretch;padding:0}
  .mbox{max-width:none;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--sp-3) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom));animation:sheetIn var(--dur-3) var(--ease-out);max-height:calc(92dvh / var(--zoom,1));overflow:auto}
  /* 對話框 sheet 不能拖，不畫 grabber（R3-11） */
  .mbtn{flex-direction:column-reverse;gap:var(--sp-2)}
  .mbtn .btn{width:100%;min-height:48px;font-size:var(--fs-base)}
  .wl-card{animation:sheetIn var(--dur-3) var(--ease-out)}
  /* 檢閱器：圓角頂邊＋由下往上進場 */
  #insp{top:calc(8px + env(safe-area-inset-top));padding-top:0;border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-3)}
  body.insp-on #iscrim{display:block;position:fixed;inset:0;background:var(--scrim);z-index:calc(var(--z-sheet) - 1)}
  #insp.ins-in>*{animation:none}
  #insp.ins-in{animation:inspInM var(--dur-3) var(--ease-out)}
  /* 提示框放在新增鈕左邊，不蓋清單中段 */
  #toast{bottom:calc(92px + env(safe-area-inset-bottom));left:12px;right:88px;--tx:0px}
  body.selmode #toast{right:12px;bottom:calc(162px + env(safe-area-inset-bottom))}
  /* 分頁列徽章：收件匣、預測顯示數字，已標記只顯示圓點 */
  .tab .pbadge{top:-4px;right:-8px;min-width:16px;height:16px;line-height:16px;font-size:var(--fs-xs);padding:0 var(--sp-1);border:0}
  .tab.v-flagged .pbadge{min-width:0;width:8px;height:8px;padding:0;font-size:0;top:-1px;right:-3px}
  /* 預測日期條右緣淡出，月曆改色點 */
  .strip{-webkit-mask-image:linear-gradient(to right,black calc(100% - 24px),transparent);mask-image:linear-gradient(to right,black calc(100% - 24px),transparent);padding-right:28px}
  .mc .mev,.mc .mmore{display:none}
  .mgrid{grid-template-rows:22px repeat(var(--w),minmax(52px,auto))}
  .mdots{display:flex;flex-wrap:nowrap;gap:var(--sp-1);justify-content:center;align-items:center;padding-top:2px;max-width:100%;overflow:hidden}   /* R10-12 一行、置中、不超出格子 */
  .mdots i{width:6px;height:6px;border-radius:50%;background:var(--faint)}
  .mdots i.od{background:var(--over)} .mdots i.due{background:var(--soon)} .mdots i.plan{background:var(--plan)} .mdots i.defer{background:var(--defer)} .mdots i.proj{background:var(--pv-projects)} .mdots i.done{background:var(--acc);opacity:.45}
  .mdots b{font-size:var(--fs-xs);line-height:10px;font-weight:600;color:var(--ink2)}   /* R10-12 「+n」佔第 3 個位置，與點同樣間距 */
}
@media (max-width:999px) and (max-height:499px){ #hdr{min-height:0} #toast{bottom:calc(62px + env(safe-area-inset-bottom))} }

/* ================= RID-35：UI 會議第 2 輪 ================= */
/* 元件 token：手機表單控制項 44px、觸控 chip 32px */
@media (max-width:860px){ :root{--ctl-h:44px} }
@media (pointer:coarse){ :root{--chip-h:32px} }
/* 表單控制項同一個高度 */
select.fsel,select.inp,.srow select,input.inp,.dtext{height:var(--ctl-h);box-sizing:border-box}
input.inp,.dtext{padding-top:0;padding-bottom:0}
#hdr select.fsel{height:32px}
/* 焦點環：外圈強調色＋內圈底色，全站統一（取代 outline＋offset） */
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.sw input:focus-visible+span{outline:none;box-shadow:var(--focus-ring)}
/* 強制色彩模式會拿掉 box-shadow，只有這裡保留 outline（用長寫避免與 token 規則混淆） */
@media (forced-colors:active){ :focus-visible,.sw input:focus-visible+span{outline-style:solid;outline-width:2px;outline-color:CanvasText;box-shadow:none} }

/* R2-02 版面網格：表單頁 720 置中；月曆頁的逾期橫幅與月曆同寬；分組底線只畫在內容寬度 */
.doc{max-width:calc(var(--form-max) + var(--sp-5) * 2);margin-inline:auto;padding:var(--sp-5)}
.doc h2{font-size:var(--fs-base);font-weight:600;margin:var(--sp-3) 0 0}
.doc h3{font-size:var(--fs-md);font-weight:600;margin:var(--sp-2) 0 0;color:var(--ink2)}
.month{padding:var(--sp-3) var(--sp-4) var(--sp-4)}
#content:has(>.month) .odnote{margin-inline:var(--sp-4)}
.gh{box-shadow:none;background:linear-gradient(var(--line),var(--line)) var(--gut) 100%/calc(100% - var(--gut) * 2) 1px no-repeat,var(--panel)}

/* R2-03 assist chip：日期快選、預估快選、批次、整理模式共用 */
.dq button,.durs button,.tg-dq button{display:inline-flex;align-items:center;justify-content:center;height:var(--chip-h);min-height:0;padding:0 var(--sp-2h);border:1px solid var(--line);border-radius:var(--r-full);background:var(--panel);font-size:var(--fs-sm);font-weight:500;line-height:1;color:var(--ink2);white-space:nowrap;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1) var(--ease-out)}
.dq button:hover,.durs button:hover,.tg-dq button:hover{background:var(--hover);color:var(--ink)}
.dq button:active,.durs button:active,.tg-dq button:active{transform:scale(.97)}
.tg-dq button.on{background:var(--acc-soft);border-color:transparent;color:var(--acc);font-weight:600}
.tg-dq{--chip-h:32px}
.dq{gap:var(--sp-1)}
.durs{gap:var(--sp-1)}
/* 「＋ 加入標籤」改成 chip 外觀（原生 select 仍在，只是沒有下拉箭頭） */
select.addsel{-webkit-appearance:none;appearance:none;height:var(--chip-h);padding:0 var(--sp-2h);border:1px solid var(--line);border-radius:var(--r-full);background:var(--panel);font-size:var(--fs-sm);font-weight:500;color:var(--ink2);cursor:pointer;max-width:100%}
select.addsel:hover{background:var(--hover);color:var(--ink)}

/* R2-04 標題列固定高度（桌面 64px；中英、有沒有副標都一樣） */
/* RID-57 上方加安全區：Android 15 起 App 強制延伸到狀態列底下（網頁版在瀏覽器裡 env() 是 0，高度不變） */
#hdr{height:calc(var(--hdr-h) + env(safe-area-inset-top));min-height:0;padding:env(safe-area-inset-top) var(--sp-4) 0;box-sizing:border-box}
#hdr h1{line-height:28px}
#hdr .sub{line-height:16px}

/* R2-06／R3-01 狀態分層：hover／鍵盤游標／選取畫在 ::before 狀態層，左右只比內容欄多 12px（不再鋪滿 #main）。
   分隔線改成列背景漸層（--sep-l 起、到 --gut 止）；列本身不接指標，只有狀態層與子元素接，所以指標在內容欄外時列不會亮 */
.row,.prow{isolation:isolate;pointer-events:none;--st-x:max(4px,calc(var(--gut) - 12px));background:linear-gradient(var(--line),var(--line)) no-repeat var(--sep-l) 100%/max(0px,calc(100% - var(--sep-l) - var(--gut))) 1px}
.row>*,.prow>*{pointer-events:auto}
.row::before,.prow::before{content:"";position:absolute;inset:0 var(--st-x);border-radius:var(--r-md);pointer-events:auto;z-index:-1;transition:background-color var(--dur-1) var(--ease-out)}
.row:hover::before,.prow:hover::before{background:var(--hover)}
.row.kcur::before,.prow.kcur::before{background:color-mix(in srgb,var(--sel) 60%,transparent);box-shadow:inset 3px 0 0 var(--acc)}
.row.sel::before,.prow.sel::before,.row.msel::before,.prow.msel::before{background:var(--sel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}
.row.sel.kcur::before,.prow.sel.kcur::before,.row.msel.kcur::before,.prow.msel.kcur::before{box-shadow:inset 3px 0 0 var(--acc),inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}
body.ptr .row.kcur:not(.sel):not(.msel)::before,body.ptr .prow.kcur:not(.sel):not(.msel)::before{background:none}
body.ptr .row.kcur:not(.sel):not(.msel):hover::before,body.ptr .prow.kcur:not(.sel):not(.msel):hover::before{background:var(--hover)}
/* R3-02 觸控操作後不顯示鍵盤游標（按 J/K 時恢復） */
body.touch .row.kcur:not(.sel):not(.msel)::before,body.touch .prow.kcur:not(.sel):not(.msel)::before{background:none;box-shadow:none}
body.touch .row.sel.kcur::before,body.touch .prow.sel.kcur::before,body.touch .row.msel.kcur::before,body.touch .prow.msel.kcur::before{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}
.row.drop-into::before{background:var(--acc-soft);box-shadow:inset 0 0 0 2px var(--acc)}

/* R2-07 檢閱器：欄位標籤比快選醒目、子動作小節、旗子無框 */
.ibody{padding:var(--sp-4) var(--sp-4) 60px}
.fld{gap:var(--sp-1)}
.fld>label,.lbl{font-size:var(--fs-sm);font-weight:600;color:var(--ink2)}
.dl{display:inline-flex;align-items:center;gap:var(--sp-1h);font-size:var(--fs-sm);font-weight:600;color:var(--ink2)}
.dl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none}
.dl.defer,.dl.plan,.dl.due{color:var(--ink2)}
.dl.defer::before{background:var(--defer)} .dl.plan::before{background:var(--plan)} .dl.due::before{background:var(--soon)}
.sec{margin-top:var(--sp-2)}
.ib.flagbtn{border:0;color:var(--faint);padding:0 var(--sp-2)}
.ib.flagbtn.on{color:var(--flag);border:0}
.ib.flagbtn.on svg{fill:currentColor}
.notehead .seg{margin-right:0}
.notehead .seg button{height:calc(var(--chip-h) + 4px);padding:0 var(--sp-2h)}
.kids{gap:0}
.kidh{display:flex;align-items:center;gap:var(--sp-1h);margin-bottom:var(--sp-1)}
.kid{min-height:36px;padding:0 var(--sp-1h);font-size:var(--fs-md)}
.kid .kchk{width:16px;height:16px}
.kid .kchk svg{width:10px;height:10px}
.kidform{margin-top:var(--sp-1)}

/* R2-08 快速新增：提示列是浮層，不推動清單；預覽配色只有錯誤用紅色 */
.qahint{position:absolute;top:calc(100% - 6px);left:var(--gut);right:var(--gut);display:none;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-2);padding:var(--sp-2) var(--sp-3);z-index:calc(var(--z-base) + 5)}
.qa:focus-within .qahint{display:flex;animation:qaHint var(--dur-1) var(--ease-out)}
@keyframes qaHint{from{opacity:0;transform:translateY(-4px)}}
.qahint .qp.due{background:color-mix(in srgb,var(--soon) 14%,transparent);color:var(--soon)}
.qahint .qp.defer{background:color-mix(in srgb,var(--defer) 12%,transparent);color:var(--defer)}
.qahint .qp.tag,.qahint .qp:not([class*=" "]){background:var(--hover);color:var(--ink2)}
.qahint .qp.warn{background:color-mix(in srgb,var(--over) 12%,transparent);color:var(--over)}

/* R2-10 設定頁的資料與備份 */
.srow.sacts{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
.srow.sacts .io-box{min-height:120px}
.sfold{margin-top:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.sfold>summary{list-style:none;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-3h);font-size:var(--fs-base);cursor:pointer}
.sfold>summary::-webkit-details-marker{display:none}
.sfold>summary svg.i{width:14px;height:14px;color:var(--mute);transition:transform var(--dur-1) var(--ease-out)}
.sfold[open]>summary svg.i{transform:rotate(90deg)}
.sfoldb{display:flex;flex-direction:column;gap:var(--sp-3);padding:0 var(--sp-3h) var(--sp-3h)}
.dzone{margin-top:var(--sp-6)}

/* R2-13 預測日期條：三列格線，數字基線一致；今天徽章用強調色 */
.day{display:grid;grid-template-rows:16px 24px 16px;justify-items:center;align-content:center;gap:2px}
.day small{line-height:16px}
.day b{line-height:24px}
.day i,.day i:empty{display:block;line-height:16px}
.day i:empty{visibility:hidden}
.day.today i.hot,.day.today i{background:var(--acc);color:var(--on-acc)}
.day.od i.red{background:var(--over);color:var(--on-over)}

/* R2-14 月曆圖例：純文字＋色點 */
.mleg{gap:var(--sp-3);align-items:center}
.mleg .lg{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--mute);white-space:nowrap}
.mleg .lg i{width:6px;height:6px;border-radius:50%;background:var(--faint)}
.mleg .lg.od i{background:var(--over)} .mleg .lg.due i{background:var(--soon)} .mleg .lg.plan i{background:var(--plan)} .mleg .lg.defer i{background:var(--defer)} .mleg .lg.done i{background:var(--acc);opacity:.45}
.mleg-b{display:none}

/* R2-17 標籤頁層級；ⓘ 只在 hover 顯示（觸控常駐） */
.prow.tagrow .pn b{font-weight:600}
.prow.tagc{min-height:40px;padding-left:calc(var(--gut) + var(--d,0) * var(--sp-5) + 34px)}
.prow.tagc{--sep-l:calc(var(--gut) + var(--d,0) * 20px + 34px)}
.prow.tagc .pic.tgl{left:calc(var(--gut) + var(--d,0) * 20px - 8px)}
.prow.tagc .pn b{font-weight:400}
.prow.tagc .rm{color:var(--faint)}
@media (hover:hover) and (pointer:fine){
  .prow>.ib[data-act^="info-"]{opacity:0;transition:opacity var(--dur-1)}
  .prow:hover>.ib[data-act^="info-"],.prow:focus-within>.ib[data-act^="info-"],.prow.sel>.ib[data-act^="info-"],.prow.kcur>.ib[data-act^="info-"]{opacity:1}
}

/* R2-18 分組標題：中性字色＋語意色點，只有「已過期」保留紅字 */
.gh,.gh.due,.gh.plan{color:var(--ink2)}
.gh.over{color:var(--over)}
.gh.over::before,.gh.due::before,.gh.plan::before,.gh.defer::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:var(--over)}
.gh.due::before{background:var(--soon)} .gh.plan::before{background:var(--plan)} .gh.defer::before{background:var(--defer)}

/* R2-20 已完成頁：不加刪除線，第一項是完成時間 */
.m-done{color:var(--ink2)}

/* R2-23 標記切換回饋 */
.fl.pop svg,.flagbtn.pop svg{animation:flagPop var(--dur-1) var(--ease-out)}
@keyframes flagPop{from{transform:scale(.6)}}

/* R2-24 專案列表的資料夾列 */
.prow.folder .pn b{font-weight:600}
.prow.folder .fic{display:inline-flex;color:var(--pv-projects);margin-left:calc(var(--sp-1) * -1)}
.prow.folder .fic svg.i{width:18px;height:18px}
/* R9-14 資料夾的專案數緊跟在名稱後（原本推到最右，離名稱 900px） */
.prow.folder .pn{display:flex;align-items:baseline;gap:var(--sp-2)}
.prow.folder .pn b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcnt{flex:none;font-size:var(--fs-sm);color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}

/* R2-16 快捷鍵框：key 欄固定寬、說明不換行 */
.keys{grid-template-columns:112px 1fr}
.keys kbd{justify-self:start}
.keys span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------- 手機（RID-35） ---------- */
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  /* 標題列：有分頁列時不顯示 ☰（分頁列「更多」打開同一個抽屜） */
  #hdr{height:auto;min-height:calc(56px + env(safe-area-inset-top));padding-left:var(--sp-4)}
  #hdr .menu{display:none}
  #hdr .back{margin-left:calc(var(--sp-2) * -1)}
  /* 整理：圖示按鈕＋右上數字徽章 */
  #hdr .btn.tri{background:none;border-color:transparent;box-shadow:none;color:var(--acc);min-width:36px;min-height:36px;padding:0;position:relative}
  #hdr .btn.tri svg.i{width:20px;height:20px}
  #hdr .btn.tri .cnt{position:absolute;top:0;left:calc(50% + 4px);min-width:16px;height:16px;line-height:16px;padding:0 var(--sp-1);font-size:var(--fs-xs);background:var(--acc);color:var(--on-acc)}
  /* 展開箭頭放在 16px 左邊距內，不被裁切 */
  .row>.disc{left:calc(var(--gut) + var(--d,0) * 22px - 16px);width:16px}
  .row>.disc svg{width:12px;height:12px}
  /* 快速新增：輸入框滿寬，Enter／鍵盤「完成」送出 */
  .qa .qa-go{display:none}
  /* 分頁列徽章：數字與圓點同一個錨點（圖示右上） */
  .tab .rg{position:static}
  .tab .pbadge{top:4px;left:calc(50% + 6px);right:auto}
  .tab.v-flagged .pbadge{top:7px;left:calc(50% + 8px);right:auto}
  /* 抽屜只列分頁列沒有的項目 */
  #side .ri.tabdup{display:none}
  /* 提示框：抽屜開著時在遮罩下；沒有動作按鈕時寬度自適應，貼在新增鈕左側 */
  body.side-open #toast{z-index:calc(var(--z-scrim) - 1)}
  #toast.noact{left:auto;right:88px;width:max-content;max-width:calc(100% - 120px)}
  body.selmode #toast.noact{right:12px}
  /* 新增鈕往下捲時藏起來 */
  #fab{transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
  body.fab-hide #fab{transform:translateY(88px);opacity:0;pointer-events:none}
  /* 檢閱器 sheet：本體不透明只做位移，遮罩淡入；頂部 grabber，可下拉關閉 */
  #insp{top:calc(env(safe-area-inset-top) + 12px)}
  #insp.ins-in{animation:sheetIn var(--dur-3) var(--ease-out)}
  #insp.ins-out{animation:sheetOut var(--dur-3-out) var(--ease-in) forwards}
  body.insp-on #iscrim{animation:fadeIn var(--dur-2) var(--ease-out);transition:opacity var(--dur-3-out) var(--ease-in)}
  #iscrim.out{opacity:0}
  #insp .ih{padding-top:var(--sp-5);touch-action:none;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .igrab{position:absolute;top:var(--sp-2);left:50%;width:36px;height:5px;margin-left:-18px;border-radius:var(--r-full);background:var(--line)}
  /* 整理模式「離開」44×44 */
  .tg-x{min-width:44px;height:44px}
  .tg-x svg.i{width:22px;height:22px}
  /* 月曆：月份導覽與星期列黏在上方，圖例移到月曆下方 */
  .mnav{position:sticky;top:0;z-index:calc(var(--z-base) + 3);background:var(--panel);margin:0 calc(var(--sp-1) * -1);padding:var(--sp-1) var(--sp-1) var(--sp-2);flex-wrap:nowrap}
  .mnav .mleg{display:none}
  .mleg-b{display:flex;flex-wrap:wrap;margin:var(--sp-3) 0 0;padding:0 var(--sp-2)}
  .mgrid{overflow:visible}
  .mnav{height:52px;box-sizing:border-box}
  .mwh{position:sticky;top:52px;z-index:calc(var(--z-base) + 2)}
  .month{padding:var(--sp-1) var(--sp-1) var(--sp-3)}
  #mday{scroll-margin-top:76px}
  .gh{background:linear-gradient(var(--line),var(--line)) var(--gut) 100%/calc(100% - var(--gut) * 2) 1px no-repeat,var(--panel)}
}
@keyframes sheetOut{from{transform:translateY(var(--sy,0))}to{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){ body.fab-hide #fab{transform:none} }
.srow.sacts>.acts{flex-direction:row;flex-wrap:wrap;gap:var(--sp-2)}
.ib.flagbtn.on{background:none}
.ib.flagbtn.on:hover{background:var(--hover)}
.flagbtn,.flagbtn.on{border-color:transparent}

/* ===== RID-36 UI 會議第 3 輪 ===== */
/* R3-03 單一焦點環：有外框的容器（搜尋、快速新增、整理模式專案搜尋）畫環，內層輸入框不畫；名稱輸入框用圓角單環 */
.srch input:focus-visible,.tg-search input:focus-visible,.atp-q input:focus-visible{box-shadow:none;outline:none}
.srch:focus-within,.tg-search:focus-within{border-color:var(--acc);background:var(--panel);box-shadow:var(--focus-field)}
.qa input:focus,.qa input:focus-visible{border-color:var(--acc);background:var(--panel);box-shadow:var(--focus-field)}
.iname{border-radius:var(--r-md);padding:2px var(--sp-1);margin:-2px calc(var(--sp-1) * -1)}
/* R3-04 新增鈕只在可新增的畫面；R3-05 沒有新增鈕的畫面（含整理模式）提示框置中，整理模式在底部操作列上方 12px */
body.no-fab #fab{display:none}   /* R9-20 特異度 (1,1,1) 已高於 #fab，拿掉強制旗標 */
@media (max-width:860px){
  body.no-fab #toast{right:12px}
  body.no-fab #toast.noact{left:50%;right:auto;--tx:-50%;transform:translateX(-50%);max-width:calc(100% - 24px)}
  body.tg-on #toast,body.tg-on #toast.noact{left:var(--sp-3);right:var(--sp-3);width:auto;max-width:none;--tx:0px;transform:none}   /* R9-09 整理模式提示框與其他畫面同為左右滿版（原本沒有「復原」時縮成置中膠囊） */
  body.tg-on #toast{bottom:calc(var(--tg-acts-h,0px) + var(--sp-3))}
}
/* R3-06 檢閱器區段標題（日期、子動作、可收合區塊）：13px／700 --ink，上方分隔線；欄位標籤維持 12px／600 --ink2 */
.isec,.ibody .sec,.ibody .fold,.tg-card .sec{font-size:var(--fs-md);font-weight:700;color:var(--ink);letter-spacing:0;text-transform:none;border-top:1px solid var(--line);margin-top:var(--sp-2);padding-top:var(--sp-4);padding-bottom:var(--sp-1)}
.ibody .fold{margin-top:var(--sp-2);padding-bottom:var(--sp-2)}
.ibody .fold svg.i{color:var(--mute)}
.ibody .fold small{font-weight:400;color:var(--mute)}
.ibody .fold:hover{color:var(--ink)}
.kids>.kidh{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1)}
.kidh .ckprog{font-size:var(--fs-sm);font-weight:500;color:var(--ink2)}
/* R3-07／R3-08／R3-09 日期快選與標籤：整理模式、批次面板跟檢閱器同一套（中性字＋語意色點、chip 間距 --sp-1、輸入框自己一列） */
.tg-dq{gap:var(--sp-1)}
.bdate{gap:var(--sp-1)}
.bdh{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap}
.bdh .dq{justify-content:flex-end}
.bdate>.dtext{width:100%}
.bdate>.dtext{height:var(--ctl-h);padding:0 var(--sp-3)}
.tg-name{padding-top:var(--sp-1)}
/* R3-10 標籤選單：「＋ 加入標籤」是按鈕 chip（不受手機 16px 表單規則影響），選單桌面 popover／手機 sheet */
.addtag{display:inline-flex;align-items:center;gap:var(--sp-1);height:var(--chip-h);padding:0 var(--sp-2h);border:1px dashed var(--line-strong);border-radius:var(--r-full);background:var(--panel);font-size:var(--fs-md);font-weight:500;line-height:1;color:var(--ink2);white-space:nowrap}
.addtag svg.i{width:13px;height:13px}
.addtag:hover{background:var(--hover);color:var(--ink)}
.addtag:active{transform:scale(.97)}
.chips .chip{height:var(--chip-h);box-sizing:border-box}
.modal.tpm{background:transparent;display:block;padding:0;animation:none}
.tpk{position:fixed;padding:var(--sp-2);gap:var(--sp-2);max-width:none;border:1px solid var(--line);box-shadow:var(--sh-2);border-radius:var(--r-lg);animation:popIn var(--dur-1) var(--ease-out);overflow:hidden}
.atp-q{display:flex;align-items:center;gap:var(--sp-2);height:var(--ctl-h);padding:0 var(--sp-2);border:1px solid var(--line);border-radius:var(--r-md);background:var(--field);color:var(--faint);flex:none}
.atp-q svg.i{width:15px;height:15px}
.atp-q input{flex:1;min-width:0;border:0;background:none;outline:none;padding:0;font-size:var(--fs-md);color:var(--ink)}
.tpl{overflow-y:auto;min-height:0;flex:1 1 auto;display:flex;flex-direction:column;gap:1px;overscroll-behavior:contain}
.tpo{display:flex;align-items:center;gap:var(--sp-2);min-height:32px;padding:0 var(--sp-2);border-radius:var(--r-sm);font-size:var(--fs-md);color:var(--ink);cursor:pointer}
.tpo.top{font-weight:600;margin-top:var(--sp-1)}
.tpo.top:first-child{margin-top:0}
.tpo.sub{padding-left:calc(var(--sp-2) + var(--sp-4))}
.tpo .tpn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpo svg.i{width:15px;height:15px;color:var(--acc);stroke-width:2.4}
.tpo:hover{background:var(--hover)}
.tpo.on{background:var(--sel)}
.tpo[aria-selected="true"] .tpn{color:var(--acc)}
.tpnew{color:var(--acc)}
.tpe{padding:var(--sp-3) var(--sp-2);font-size:var(--fs-md);color:var(--mute)}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .modal.tpm{background:var(--scrim);display:grid;place-items:end stretch;animation:fadeIn var(--dur-2) var(--ease-out)}
  .tpk{position:relative;max-height:min(70dvh,560px);height:min(70dvh,560px);border-radius:var(--r-xl) var(--r-xl) 0 0;border:0;padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));box-shadow:var(--sh-3);animation:sheetIn var(--dur-3) var(--ease-out)}
  .atp-q{height:44px}
  .tpo{min-height:44px;font-size:var(--fs-base)}
}
/* R3-11 手機檢閱器半高：中段 min(60dvh,520px)，背後清單看得到（遮罩 60%） */
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  #insp.half{top:calc(100dvh - min(60dvh,520px))}
  body.insp-half #iscrim:not(.out){opacity:.6}
}
/* R3-12 專案類型圖示：拿掉淡紫方塊，只留 16px --ink2 圖示（欄寬 20px） */
.prow .pic{width:20px;height:20px;background:none;color:var(--ink2);border-radius:0}
.prow .pic svg,.prow .pic svg.i{width:16px;height:16px}
.prow.folder .pic{color:var(--mute)}
.pic.ptype{width:26px;height:26px;display:grid;place-items:center;flex:none;color:var(--ink2)}
.pic.ptype svg.i{width:18px;height:18px}
.tg-proj svg.i,.m-proj svg.i{color:var(--ink2)}
.ptleg{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-1)}
.ptleg span{display:inline-flex;align-items:center;gap:var(--sp-1h);font-size:var(--fs-sm);color:var(--ink2)}
.ptleg svg.i{width:16px;height:16px}
/* R3-13 分頁列「更多」：三點圖示；目前畫面屬於抽屜（標籤、回顧、已完成、透視、搜尋、設定）時亮起 */
.tab.more svg.i{width:24px;height:24px}
.tab.more.on{color:var(--acc)}
/* R3-14 月曆：日期 12px／600 靠左上，今天 24px 圓；上下月只淡化數字、不加底色；本月已過不著色（有逾期才在數字旁加紅點）；週末星期字 --mute；選取日圓角外框 */
.mwh{color:var(--ink2);background:var(--panel)}
.mwh.wk{color:var(--mute)}
.mc{padding:var(--sp-1)}
.mc.wk,.mc.other{background:none}
.mc:hover{background:var(--hover)}
.mn{align-self:flex-start;position:relative;width:24px;height:24px;line-height:24px;border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:600}
.mc.other .mn{color:var(--faint);font-weight:400}
.mc.hasod .mn::after{content:"";position:absolute;top:3px;right:-5px;width:5px;height:5px;border-radius:50%;background:var(--over)}
.mc.sel{box-shadow:inset 0 0 0 2px var(--acc);border-radius:var(--r-md)}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .mn{align-self:center;width:22px;height:22px;line-height:22px}
  /* R10-07 保留上 3px：手機月曆格高 */
  .mc{padding:3px 2px var(--sp-1);scroll-margin-top:calc(52px + 22px)}
}
/* R3-19 取消標記：旗子淡出縮小（--dur-1、--ease-in）後移除 */
.fl.out svg{animation:flagOut var(--dur-1) var(--ease-in) forwards}
@keyframes flagOut{to{opacity:0;transform:scale(.6)}}
/* R3-20 換行品質：說明文字 pretty、標題 balance（避免孤字行） */
.mbox .md,.empty .ed,.srow small,.dwarn,.dhint,.tg-note,.gloss dd{text-wrap:pretty}
.mbox .mt,.empty h3{text-wrap:balance}
/* R3-21 搜尋關鍵字高亮 */
mark.hl{background:color-mix(in srgb,var(--acc) 18%,transparent);color:inherit;border-radius:2px;padding:0 1px}
/* R3-23 專案頁資訊：拿掉灰底盒，改成標題列下方一行 12px --ink2 meta（左緣對齊 --gut） */
.pmeta{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sp-1) var(--sp-2);padding:var(--sp-2) var(--gut) 0;margin:0;font-size:var(--fs-sm);color:var(--ink2);cursor:pointer;overflow:hidden;white-space:nowrap}
.pmeta>span{flex:none}
.pmeta>span.pnote{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;color:var(--mute)}
.pmeta>span.pnote svg{vertical-align:-2px;margin-right:var(--sp-1)}
.pmeta .msep{font-style:normal;color:var(--faint)}
.pmeta .pill{font-size:var(--fs-xs)}
.pmeta:hover{color:var(--ink)}
/* R3-24 側欄透視名稱：兩行截斷＋title（只在桌面圖示欄） */
@media (min-width:861px){ .ri.v-persp .rl{font-size:var(--fs-xs);line-height:13px;max-width:76px} }
/* R3-26 平板 1024～1199：檢閱器改成右側浮動面板，清單不再被壓窄 */
/* R8-06 平板橫向（≥1024）不再用浮動卡片，跟桌面一樣讓位並排（原 RID-36 規則已移除） */
/* ===== RID-37 UI 會議第 4 輪 ===== */
/* R4-02／R4-03 日期欄位三列（dfBlock）：①標籤列 → ②輸入列（輸入框 --ctl-h＋日曆鈕＋清除）→ ③快選 chip 等寬 grid（--dq-n 欄，永不換行）。
   舊版是 grid 兩欄＋flex-wrap，英文會換行；批次面板的輸入框在 column flex 裡 flex:1 讓高度塌成 21px */
.df{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-1h);min-width:0}
.df+.df{margin-top:var(--sp-1)}
.dfh{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:20px;min-width:0}
.df>.dv{min-width:0}
.df .dtext{flex:1 1 auto;height:var(--ctl-h);min-height:var(--ctl-h);padding:0 var(--sp-3)}
.df>.dq{display:grid;grid-template-columns:repeat(var(--dq-n,4),minmax(0,1fr));gap:var(--sp-1);justify-content:stretch}
.df>.dq button{display:block;min-width:0;width:100%;padding:0 var(--sp-1);line-height:calc(var(--chip-h) - 2px);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.df>.dq button.on{background:var(--acc-soft);border-color:transparent;color:var(--acc);font-weight:600}
.tg-dates{display:flex;flex-direction:column;align-items:stretch;--chip-h:32px;gap:var(--sp-3)}
.tg-dates .df+.df{margin-top:0}
.tg-dv{font-size:var(--fs-sm);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 整理模式寬版：標籤固定寬（中 72／英 96）在左、chip grid 在右；手機堆疊兩列 */
@media (min-width:700px){
  .tg-dates .df{flex-direction:row;align-items:center;gap:var(--sp-3)}
  .tg-dates .dfh{flex:none;width:72px;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
  :lang(en) .tg-dates .dfh{width:96px}
  .tg-dates .df>.dq{flex:1;min-width:0}
}
/* R4-04 狀態層：底色＋1px 內框留在 ::before（左緣 --st-l = gut-24，右緣 gut-12），鍵盤游標色條改成獨立直條 ::after（3px、上下內縮 6px、全圓角），
   不再跟著 --r-md 圓角彎。父項箭頭放進狀態層內、離色條 ≥4px；非手機版 --gut 最小 28px（檢閱器開著時內容整體右移，箭頭不再壓在狀態層邊上）。
   多選模式的 ::after 已是勾選框，色條改畫在 ::before 的背景漸層 */
.row,.prow{--st-l:max(4px,calc(var(--gut) - 24px))}
.row::before,.prow::before{left:var(--st-l)}
.row.kcur::before,.prow.kcur::before{box-shadow:none}
.row.sel.kcur::before,.prow.sel.kcur::before,.row.msel.kcur::before,.prow.msel.kcur::before{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}
body:not(.selmode):not(.touch) .row.kcur::after,body:not(.selmode):not(.touch) .prow.kcur::after{content:"";position:absolute;left:var(--st-l);top:6px;bottom:6px;width:3px;border-radius:var(--r-full);background:var(--acc);pointer-events:none}
body.selmode:not(.touch) .row.kcur::before,body.selmode:not(.touch) .prow.kcur::before{background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;background-size:3px calc(100% - 12px);background-position:0 6px}
.row.collapse::after,.prow.collapse::after{display:none}
@media (min-width:700px) and (min-height:500px),(min-width:1000px){
  #content{--gut:28px}
  @container main (min-width:1200px){ body:not(.insp-on) #content{--gut:max(28px,calc((100cqw - 960px) / 2))} }
  .row>.disc{left:calc(var(--gut) + var(--d,0) * 22px - 22px);width:20px}
}
/* R4-05 點擊區：父項箭頭 24×44（偽元素放大）、勾選圈滑鼠 ≥24；手機箭頭點擊區往右延伸 8px 蓋過勾選圈左緣（箭頭在上層），兩者都 ≥24 */
.row>.disc::after{content:"";position:absolute;inset:-11px 0 -11px -4px}
@media (pointer:fine){ .chk::before{content:"";position:absolute;inset:-4px} }
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .row>.disc{left:calc(var(--gut) + var(--d,0) * 22px - 16px);width:16px;z-index:calc(var(--z-base) + 1)}
  .row>.disc::after{inset:-11px -8px -11px 0}
  /* 標題列圖示按鈕視覺 36、點擊區 44×44 */
  #hdr .ib,#hdr .btn.tri{position:relative}
  #hdr .tools{gap:var(--sp-2)}
  #hdr .ib::after,#hdr .btn.tri::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  /* 設定頁按鈕一律 44 高 */
  .doc .btn,.doc .btn.sm{min-height:44px}
  /* R4-06 檢閱器中段時清單底部多留空間，被點的列才捲得到 sheet 上方 */
  body.insp-half #content{padding-bottom:calc(min(60dvh,520px) + var(--sp-4))!important}
}
/* R4-09 手機標籤選單 sheet：標頭（標題＋完成），不可拖曳所以不畫 grabber */
.tph{display:none}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .tpk{padding-top:0}
  .tph{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);height:52px;flex:none}
  .tpt{margin:0;font-size:var(--fs-lg);font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tpdone{min-height:44px;min-width:72px}
}
/* R4-11 空收件匣：語法範例 chip（assist chip，點了填入快速新增） */
.empty .eic{background:color-mix(in srgb,var(--pv,var(--acc)) 10%,transparent)}
.qex{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-3);max-width:min(100%,480px)}
.qexb{display:inline-flex;align-items:center;height:var(--chip-h);padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-full);background:var(--panel);font-size:var(--fs-sm);font-weight:500;color:var(--ink2);white-space:nowrap;transition:background var(--dur-1),color var(--dur-1)}
.qexb:hover{background:var(--hover);color:var(--ink)}
/* R4-12 觸控裝置：專案列不顯示逐列 ⓘ（長按開檢閱器；資料夾列保留） */
@media (pointer:coarse){ .prow:not(.folder)>[data-act="info-project"]{display:none} }
.prow{-webkit-touch-callout:none}
/* R4-13 圖示欄徽章錨點依圖示尺寸（--ri-ic：桌面 28／矮螢幕 24／平板 20），不蓋住圖示超過 30% */
@media (min-width:861px){
  #side{--ri-ic:28px}
  #side .ri svg.pg{width:var(--ri-ic);height:var(--ri-ic)}
  #side .ri .rg .pbadge{top:calc(var(--ri-ic) * -.25);left:calc(var(--ri-ic) * .7);right:auto}
}
@media (min-width:861px) and (max-height:860px){ #side{--ri-ic:24px} }
@media (min-width:861px) and (max-width:1199px){ #side{--ri-ic:20px} }
/* R4-14 整理模式操作列：刪除移到名稱列（旗子左邊的垃圾桶），底部只剩 2 分鐘內完成／跳過／下一筆 */
.tg-name .tg-del{color:var(--mute);flex:none}
.tg-name .tg-del:hover{color:var(--over);background:color-mix(in srgb,var(--over) 10%,transparent)}
.tg-acts .tds{display:none}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .tg-acts{flex-wrap:nowrap}
  .tg-acts .btn{flex:1 1 0;min-width:0}
  .tg-acts .tdl{display:none} .tg-acts .tds{display:inline}
  .tg-name .tg-del{width:44px;height:44px}
}
/* R4-15 整理模式進度條：4px 全圓角、強調色、至少 4px 可見，文字在右側 */
.tg-bar{border-radius:var(--r-full)}
.tg-bar i{min-width:4px;background:var(--acc);border-radius:var(--r-full)}
.tg-prog{font-size:var(--fs-xs);color:var(--ink2)}
/* R4-08 標籤 chip 底色 --chip-bg（比 --hover 深一階）；hover／選取列裡改 --raised，不會跟列底色融在一起 */
.m-tag{background:var(--chip-bg)}
.row:hover .m-tag,.row.sel .m-tag,.row.msel .m-tag,body:not(.ptr):not(.touch) .row.kcur .m-tag{background:var(--raised);box-shadow:inset 0 0 0 1px var(--line)}
.chip .chpar{font-size:var(--fs-xs);color:var(--faint);margin-left:var(--sp-1)}
/* R4-16 繼承的截止日：不用斜體、不降透明，--faint 色＋承接圖示 */
.m-inh{opacity:1;font-style:normal}
.m-inh:not(.over):not(.soon){color:var(--faint)}
/* R4-17 預測日期條：過期／之後用圖示（16px），數字列高與其他格一致 */
.day b.dico{display:grid;place-items:center;height:24px}
.day b.dico svg.i{width:16px;height:16px;stroke-width:1.75;color:var(--mute)}
.day b.dico.od svg.i{color:var(--over)}
/* R4-18 月曆事件 chip 降飽和：底色 12%（深色 16%）混 --raised，類型靠左側 3px 色條；完成 .6 */
:root{--mev-mix:12%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-app-theme="light"]){--mev-mix:16%}}
:root[data-theme="dark"]:not([data-app-theme="light"]),:root[data-app-theme="dark"]{--mev-mix:16%}
.mev{background:color-mix(in srgb,var(--faint) var(--mev-mix),var(--raised));color:var(--ink)}
.mev.od{background:color-mix(in srgb,var(--over) var(--mev-mix),var(--raised))}
.mev.due{background:color-mix(in srgb,var(--soon) var(--mev-mix),var(--raised));color:var(--ink)}
.mev.plan{background:color-mix(in srgb,var(--plan) var(--mev-mix),var(--raised));color:var(--ink)}
.mev.proj{background:color-mix(in srgb,var(--pv-projects) var(--mev-mix),var(--raised));color:var(--ink)}
.mev.defer{background:transparent;color:var(--ink2)}
.mev.done{background:color-mix(in srgb,var(--acc) var(--mev-mix),var(--raised));opacity:.6}
/* R4-19 中文孤字：短說明（對話框、空狀態）改 balance，長段落維持 pretty */
.mbox .md,.empty .ed{text-wrap:balance}
/* R4-20 檢閱器底部的放棄／刪除區：說明在上（--fs-body-sm --ink2）、按鈕在下靠左，與上方區塊 --sp-6 */
.idz{margin-top:var(--sp-6);gap:var(--sp-4)}
.idr{flex-direction:column-reverse;align-items:flex-start;gap:var(--sp-2)}
.idr small{font-size:var(--fs-body-sm);color:var(--ink2);line-height:1.5}
.idr .btn{min-width:0}
/* R4-21 提示框外型手機桌面一致：最小高 44、左右 --sp-4、--r-lg、最小寬 160 */
/* R4-24 手機抽屜標頭；RID-48 拿掉 Shojin 字樣與底線，只留安全區＋上方留白 */
.dhd{display:none}
@media (max-width:699px),(max-width:999px) and (max-height:499px){   /* R8-07 只在手機抽屜 */
  #side .dhd{display:flex;height:var(--sp-4);padding:env(safe-area-inset-top) 18px 0;flex:none;box-sizing:content-box}
  #side .dhd .dhs{flex:none;width:32px;height:32px;justify-content:center}
  #side .dhd .dhs.warn .sic{color:var(--over)}
}
.df>.dq button{padding:0 2px}
/* R4-22 標籤列表頂部留白：第一列與專案列表第一個資料夾列同高 */
#content>.prow.tagrow:first-child{margin-top:var(--sp-2h)}
/* ===== RID-38 UI 會議第 5 輪 ===== */
/* R5-02 日期輸入列：清除 × 在框內右側（框寬固定），日曆鈕在框外、寬高 --ctl-h */
.dfi{position:relative;flex:1 1 auto;min-width:0;display:flex}
.dfi>.dtext{flex:1 1 auto;width:100%;min-width:0;padding-right:var(--sp-8)}
.dfi>.dclr{position:absolute;right:var(--sp-1);top:50%;translate:0 -50%}
.dfi>.dclr[hidden]{display:none}
.dv>.pk{width:var(--ctl-h);height:var(--ctl-h)}
@media (max-width:860px){ .dfi>.dclr::after{content:'';position:absolute;inset:-8px} }
/* R5-11 預估時間與日期欄位同結構：輸入框同寬，右側「分」單位（佔日曆鈕位置），chip 同一個 grid */
.dl.nodot::before{display:none}
.dun{flex:none;width:var(--ctl-h);text-align:center;font-size:var(--fs-sm);color:var(--faint)}
.df.dur .dtext{-moz-appearance:textfield}
.df.dur .dtext::-webkit-inner-spin-button,.df.dur .dtext::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.df.dur{margin-top:var(--sp-3)}
/* R5-03 手機標題列篩選：外框 36×36 顯示漏斗；透明的原生 select 往外 4px 蓋滿，點擊區 44（原生選單照用）；非「剩餘」時右上 6px --acc 點 */
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  #hdr .fsel-w select.fsel{inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);max-width:none;min-height:0;z-index:var(--z-base)}
  #hdr .fsel-w.on{background:none}
  #hdr .fsel-w.on::after{content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--acc);pointer-events:none}
}
/* R5-04 月曆空週壓低：列高由 JS 依週給 --mrow／--mrow-c；手機維持原高 */
.mgrid{--mh-h:26px;--mrow:minmax(108px,auto);--mrow-c:minmax(56px,auto);grid-template-rows:var(--mh-h) var(--rows,repeat(var(--w),var(--mrow)))}
@media (max-width:699px),(max-width:999px) and (max-height:499px){ .mgrid{--mh-h:22px;--mrow:minmax(52px,auto);--mrow-c:var(--mrow)} }
/* R5-21 月曆日期指示去重：數字旁的逾期紅點拿掉（逾期已有紅色 chip／點）；手機選取＝今天只畫實心圓，選取其他日用 --sel 圓角底 */
.mc.hasod .mn::after{content:none}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .mc.sel{box-shadow:none;background:var(--sel);border-radius:var(--r-md)}
  .mc.sel.today{background:none}
}
/* R5-06 換畫面：#content 淡入＋上移 4px（--dur-2 --ease-out），標題列與圖示欄不動 */
#content.vin{animation:vin var(--dur-2) var(--ease-out)}
@keyframes vin{from{opacity:0;transform:translateY(4px)}}
/* R5-05 切月滑動：舊月份往切換方向滑出（--dur-2 × .75、--ease-in），新月份從另一側滑入（--dur-2、--ease-out）；手勢彈回 .mback */
.month{overflow-x:clip}
.mgrid.mout-n{animation:mOutN calc(var(--dur-2) * .75) var(--ease-in) forwards}
.mgrid.mout-p{animation:mOutP calc(var(--dur-2) * .75) var(--ease-in) forwards}
.mgrid.min-n{animation:mInN var(--dur-2) var(--ease-out)}
.mgrid.min-p{animation:mInP var(--dur-2) var(--ease-out)}
.mgrid.mback{animation:mBack var(--dur-2) var(--ease-out)}
@keyframes mOutN{from{transform:translateX(var(--mx,0px))}to{transform:translateX(calc(var(--mx,0px) - 24px));opacity:0}}
@keyframes mOutP{from{transform:translateX(var(--mx,0px))}to{transform:translateX(calc(var(--mx,0px) + 24px));opacity:0}}
@keyframes mInN{from{transform:translateX(24px);opacity:0}}
@keyframes mInP{from{transform:translateX(-24px);opacity:0}}
@keyframes mBack{from{transform:translateX(var(--mx,0px))}}
@media (prefers-reduced-motion:reduce){ #content.vin,#content.vfade,.mgrid.min-n,.mgrid.min-p,.mgrid.mback,.mgrid.mout-n,.mgrid.mout-p{animation:none} }
@media (min-width:700px) and (min-height:500px),(min-width:1000px){ #content:has(>.month){padding-bottom:var(--sp-6)} }
/* R5-07 圖示欄／分頁列／抽屜改膠囊選中（M3 navigation rail）：--pv-cap＝--pv 淺色 14%／深色 22% 混色（在 .ri／.tab 上計算，才吃得到各畫面的 --pv）；
   選中文字淺色用 --ink（各 --pv 在 --side 上都不到 4.5:1）、深色用 --pv。膠囊 scaleX(.6→1) 展開 */
:root{--cap-mix:14%;--ri-on-ink:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-app-theme="light"]){--cap-mix:22%;--ri-on-ink:var(--pv,var(--acc))}}
:root[data-theme="dark"]:not([data-app-theme="light"]),:root[data-app-theme="dark"]{--cap-mix:22%;--ri-on-ink:var(--pv,var(--acc))}
/* RID-52 --ri-on-ink 在 :root 算值時 --pv 還不存在，會變成強調紫；深色模式的選中文字要用各項目自己的 --pv，所以在項目上重新取一次 */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-app-theme="light"]) :is(#side .ri,.tab){--ri-on-ink:var(--pv,var(--acc))}}
:root[data-theme="dark"]:not([data-app-theme="light"]) :is(#side .ri,.tab),:root[data-app-theme="dark"] :is(#side .ri,.tab){--ri-on-ink:var(--pv,var(--acc))}
.ri,.tab{--pv-cap:color-mix(in srgb,var(--pv,var(--acc)) var(--cap-mix),transparent)}
@media (min-width:700px) and (min-height:500px),(min-width:1000px){
  #side{--cap-w:56px;--cap-h:32px}
  #side .ri .rg{width:var(--cap-w);height:var(--cap-h);flex:none;align-items:center;justify-content:center;border-radius:var(--r-full);transition:background var(--dur-1)}
  #side .ri .rg::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--pv-cap);opacity:0;transform:scaleX(.6);transition:opacity var(--dur-1),transform var(--dur-2) var(--ease-out);z-index:-1}
  #side .ri{isolation:isolate}
  #side .ri:hover{background:none}
  #side .ri:hover .rg{background:var(--hover)}
  #side .ri.on .rg{background:none}
  #side .ri.on .rg::before{opacity:1;transform:none}
  #side .ri.on{color:var(--ri-on-ink)}
  #side .ri.on .rl{color:var(--ri-on-ink)}
  #side .ri .rg .pbadge{top:-6px;left:calc(50% + var(--ri-ic,28px) * .25);right:auto}
}
@media (min-width:700px) and (max-width:1199px) and (min-height:500px),(min-width:1000px) and (max-width:1199px){ #side{--cap-w:48px;--cap-h:28px} }
/* 矮螢幕＋滑鼠的底部一排小圖示：膠囊縮成 40×28 */
@media (pointer:fine) and (min-width:700px) and (min-height:500px) and (max-height:860px){ .rfoot>.ri.sm .rg{--cap-w:40px;--cap-h:28px} }
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .tab.on{background:var(--pv-cap)}
  .tab.more.on{--pv:var(--acc)}
  #side .ri{isolation:isolate}
  #side .ri.on::after{content:"";position:absolute;inset:2px var(--sp-2);background:var(--pv-cap);border-radius:var(--r-md);z-index:-1}   /* R9-15 圖示欄選中只有這一條：手機抽屜的膠囊底；非手機用 .rg::before 膠囊，沒有 ::after */
  #side .ri.on{color:var(--ri-on-ink)}
}
/* R5-12 平板圖示欄觸控尺寸：搜尋／設定列高 44，同步、主題按鈕 44×44 */
@media (min-width:700px) and (max-width:1199px) and (min-height:500px),(min-width:1000px) and (max-width:1199px){
  .rfoot>.ri.sm{min-height:44px;justify-content:center}
  .rfoot .rtools .ib{min-width:44px;height:44px}
}
@media (min-width:700px) and (max-width:1199px) and (min-height:500px),(min-width:1000px) and (max-width:1199px){ #side :is(.rtop,.rgrp)>.ri{padding-top:var(--sp-1);padding-bottom:var(--sp-1);gap:2px} }
/* R5-10 桌面拖曳把手只在需要時出現：hover／鍵盤游標／選取／拖曳中的列 .55，指著把手 1（--dur-1 淡入）；觸控維持原做法 */
@media (pointer:fine){
  .row .grip{opacity:0;transition:opacity var(--dur-1) var(--ease-out)}
  .row:hover .grip,.row.kcur .grip,.row.sel .grip,.row.dragging .grip{opacity:.55}
  .row .grip:hover,body.is-dragging .row.dragging .grip{opacity:1}
}
/* R5-13 自訂透視外觀：8 色（--pv-* 色票，24px 色點，選中外圈 2px --ink）＋8 個 PG 圖示 */
.psw,.psi{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.psi{margin-top:var(--sp-2)}
.psc{width:24px;height:24px;border-radius:50%;border:0;padding:0;background:var(--pv);position:relative;flex:none;transition:transform var(--dur-1) var(--ease-out)}
.psc::after{content:"";position:absolute;inset:-8px}
.psc.on{box-shadow:0 0 0 2px var(--raised),0 0 0 4px var(--ink)}
.psc:hover{transform:scale(1.08)}
.psb{width:36px;height:36px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--raised);display:grid;place-items:center;padding:0;color:var(--pv,var(--pv-persp));transition:background var(--dur-1),border-color var(--dur-1)}
.psb:hover{background:var(--hover)}
.psb.on{background:color-mix(in srgb,var(--pv,var(--pv-persp)) var(--cap-mix),transparent);border-color:var(--pv,var(--pv-persp))}
.psb svg.pg{width:22px;height:22px}
#insp .psb svg.pg .k{stroke:var(--raised)} #insp .psb svg.pg .kf{fill:var(--raised)}
#insp .psb.on svg.pg .k{stroke:var(--panel)}
.sic-p{display:inline-flex;vertical-align:-3px;margin-right:var(--sp-1)}
.sic-p svg.pg{width:14px;height:14px}
#hdr .sic-p svg.pg .k{stroke:var(--panel)} #hdr .sic-p svg.pg .kf{fill:var(--panel)}
@media (max-width:860px){ .psb{width:44px;height:44px} .psc{width:28px;height:28px} }
/* R5-08 檢閱器「專案」：按鈕外觀與 select 同高（--ctl-h），開可搜尋選單；選單分組標題 .tpg、暫停／已完成 .mut */
.pjpick{display:flex;align-items:center;gap:var(--sp-2);width:100%;height:var(--ctl-h);padding:0 var(--sp-2h);border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised);color:var(--ink);font-size:var(--fs-md);text-align:left;cursor:pointer;transition:border-color var(--dur-1)}
.pjpick:hover{border-color:color-mix(in srgb,var(--mute) 45%,var(--line))}
.pjpick:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.pjpick:disabled{opacity:.6;cursor:default}
.pjpick>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjpick svg.pjic,.tpo svg.pjic{width:16px;height:16px;flex:none;color:var(--ink2);stroke-width:2}
.pjpick svg.pg.pjic,.tpo svg.pg.pjic{color:var(--pv-inbox)}
.pjpick svg.dn{width:14px;height:14px;flex:none;color:var(--mute);transform:rotate(90deg)}
.tpg{padding:var(--sp-2) var(--sp-2) 2px;font-size:var(--fs-xs);font-weight:600;color:var(--ink2)}
.tpg:first-child{padding-top:2px}
.tpo.mut .tpn{color:var(--mute)}
.tpo small{font-size:var(--fs-xs);color:var(--mute)}
@media (max-width:860px){ .pjpick{font-size:16px} .tpg{font-size:var(--fs-sm);padding-top:var(--sp-3)} }
/* R5-09 整理模式名稱：桌面程式聚焦不畫焦點環（.nofv）；手機改成看得出能編輯的欄位（--field 底、--r-md、高 44、右側鉛筆） */
.tg-nw{flex:1;min-width:0;display:flex;position:relative}
.tg-pen{display:none}
.iname.nofv:focus{box-shadow:none}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .tg-nw{background:var(--field);border-radius:var(--r-md);min-height:44px;align-items:center}
  .tg-nw .iname{margin:0;padding:var(--sp-2h) calc(var(--sp-3) + 16px + var(--sp-2)) var(--sp-2h) var(--sp-3);min-height:44px;box-sizing:border-box}
  .tg-pen{display:block;position:absolute;right:var(--sp-3);top:14px;width:16px;height:16px;color:var(--faint);pointer-events:none}
  .tg-pen svg.i{width:16px;height:16px}
  .tg-name{align-items:center}
}
/* R5-17 列右側對齊：逐列 ⓘ 改成 --trail-w 寬並吃掉列間距，右側文字（專案數、狀態）更貼近內容右緣；回顧列不放 ⓘ、「已回顧」右緣＝內容右緣 */
:root{--trail-w:32px}
@media (hover:hover) and (pointer:fine){ .prow>.ib[data-act^="info-"]{min-width:var(--trail-w);width:var(--trail-w);padding:0;margin-left:calc(var(--sp-2h) * -1)} }
.btn.rvbtn{margin-right:0}
/* R5-18 沒有按鈕的提示框：文字置中（min-width 160 維持） */
/* R5-20 檢閱器名稱列：勾選圈（28px）與旗子都對齊名稱第一行的垂直中心（名稱 margin −2＋padding 2 抵銷，第一行中心＝列頂＋行高／2） */
.namewrap{--nm-lh:calc(var(--fs-lg) * 1.35);--fb-h:32px}
@media (max-width:860px){ .namewrap{--nm-lh:calc(16px * 1.35);--fb-h:40px} }
.namewrap>.chk.big{width:28px;height:28px;margin-top:calc(var(--nm-lh) / 2 - var(--sp-3h));flex:none}
.namewrap>.flagbtn{height:var(--fb-h);margin-top:calc(var(--nm-lh) / 2 - var(--fb-h) / 2);flex:none;align-items:center}
/* R5-23 設定頁右欄控制項同高：按鈕與 select 都是 --ctl-h（桌面 32、≤860 44） */
.srow>.btn,.srow>.tplbtns>.btn{min-height:var(--ctl-h);height:var(--ctl-h)}
/* R5-07 膠囊比圖示高，壓回項目內距讓圖示欄總高不變（桌面 32 膠囊對 28 圖示；矮螢幕膠囊 28 對 24 圖示） */
@media (min-width:1200px){ #side :is(.rtop,.rgrp)>.ri{padding-top:var(--sp-2);padding-bottom:var(--sp-1h)} }
@media (min-width:1200px) and (max-height:860px){ #side{--cap-h:28px} #side :is(.rtop,.rgrp)>.ri{padding-top:var(--sp-1);padding-bottom:var(--sp-1)} }
@media (min-width:700px) and (min-height:500px),(min-width:1000px){ #side .rfoot>.ri.sm{--cap-h:28px;--cap-w:48px;padding-top:var(--sp-1);padding-bottom:var(--sp-1)} }

/* ===== RID-39 UI 會議第 6 輪 ===== */
/* R6-03 選單裡的搜尋框是選單本身的一部分：無外框、無底色，下方 1px 分隔線，聚焦時不畫環（只有游標） */
.tpk .atp-q{height:40px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;margin:calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0;padding:0 var(--sp-3)}
.tpk .atp-q:focus-within{box-shadow:none;border-color:var(--line);background:none}
.tpk .atp-q input,.tpk .atp-q input:focus,.tpk .atp-q input:focus-visible{outline:0 none;box-shadow:none}
.iname:focus-visible{box-shadow:inset 0 0 0 1px var(--acc),var(--focus-field)}
.tpt:focus{box-shadow:none;outline:0 none}
/* R6-04 手機選單 sheet：與檢閱器 sheet 同一個 grabber、下拉關閉、240ms 離場；單選 × 關閉、多選「完成」文字按鈕 */
.tpgrab{display:none}
.tpdone{background:none;border:0;color:var(--acc);font-weight:600;font-size:var(--fs-base);min-height:44px;padding:0 var(--sp-2);margin-right:calc(var(--sp-2) * -1);border-radius:var(--r-md)}
.tpdone:hover{background:var(--hover)}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .tpk .atp-q{height:44px;margin:0 calc(var(--sp-4) * -1);padding:0 var(--sp-4)}
  .tph{position:relative;height:60px;padding-top:var(--sp-2);touch-action:none}
  .tpgrab{display:block;top:var(--sp-2)}
  .tpx{width:44px;height:44px;margin-right:calc(var(--sp-2) * -1)}
  .tpx svg.i{width:20px;height:20px}
  .modal.tpm{transition:background-color var(--dur-3-out) var(--ease-in)}
  .modal.tpm[style*="--scrim-o"]{background:color-mix(in srgb,var(--scrim) calc(var(--scrim-o) * 100%),transparent)}
  .modal.tpm.out{background:transparent}
  .modal.tpm.out .tpk{animation:sheetOut var(--dur-3-out) var(--ease-in) forwards}
}
/* R6-11 標籤選單層級：父標籤是一般列（跟子標籤同字級、500），子標籤縮排 16px＋左側 1px 引導線；分組標題上方 --sp-3 */
.tpo.top{font-weight:500;margin-top:0}
.tpo.sub{position:relative}
/* R9-11 標籤很多時的分組：有子標籤的頂層標籤是黏在選單捲動區頂端的小標（仍可點選） */
.tpo.tgh{position:sticky;top:0;z-index:calc(var(--z-base) + 1);margin-top:var(--sp-2);background:var(--raised);font-size:var(--fs-xs);font-weight:600;color:var(--ink2)}
.tpo.tgh:first-child{margin-top:0}
.tpo.tgh .tpn{color:var(--ink2)}
.tpo.tgh:hover{background:color-mix(in srgb,var(--ink) 5%,var(--raised))}
.tpo.tgh.on{background:color-mix(in srgb,var(--acc) 9%,var(--raised))}
@media (max-width:860px){ .tpo.tgh{font-size:var(--fs-sm)} }
.tpo.sub::before{content:"";position:absolute;left:calc(var(--sp-2) + 6px);top:-1px;bottom:0;width:1px;background:var(--line)}
.tpg{padding-top:var(--sp-3);font-size:var(--fs-sm)}
.tpg:first-child{padding-top:2px}
/* R6-06 批次「移動到專案」改用可搜尋選單（按鈕顯示 placeholder） */
.pjpick>.pjph{color:var(--mute)}
/* R6-05 整理模式：搜尋時才出現的暫停／已完成專案淡化 */
.tg-proj.mut span{color:var(--mute)}
.tg-proj.mut svg.i{opacity:.6}
/* R6-07 透視外觀：圖示按鈕改 .ib 規格（32、無外框），選中 --pv-cap 底＋2px --pv 外圈；色點選中維持雙環。兩列間距 --sp-2 */
.psb{width:32px;height:32px;border:0;background:none;border-radius:var(--r-md);--pv-cap:color-mix(in srgb,var(--pv,var(--pv-persp)) var(--cap-mix),transparent)}
.psb.on{background:var(--pv-cap);box-shadow:0 0 0 2px var(--pv,var(--pv-persp))}
.psb.on:focus-visible{box-shadow:0 0 0 2px var(--pv,var(--pv-persp)),0 0 0 4px var(--raised),0 0 0 6px var(--acc)}
.psc.on:focus-visible{box-shadow:0 0 0 2px var(--raised),0 0 0 4px var(--ink),0 0 0 6px var(--raised),0 0 0 8px var(--acc)}
.psw,.psi{gap:var(--sp-2);padding:var(--sp-1) 0}
.psi{margin-top:var(--sp-2)}
@media (max-width:860px){ .psb{width:44px;height:44px} }
/* RID-53 外觀「更多」按鈕：放在色票／圖示列最後，色票版是 24px 虛線圓、圖示版和圖示格同大；展開時加底色 */
.psrow-i{margin-top:var(--sp-2)} .psrow-i>.psi{margin-top:0}
.psmore{border:1px dashed var(--line-strong);background:none;color:var(--mute);display:grid;place-items:center;padding:0;flex:none;position:relative;transition:background var(--dur-1),color var(--dur-1)}
.psmore svg.i{width:16px;height:16px}
.psmore.c{width:24px;height:24px;border-radius:var(--r-full)}
.psmore.c::after{content:"";position:absolute;inset:-8px}
.psmore.i{width:32px;height:32px;border-radius:var(--r-md)}
.psmore:hover{background:var(--hover);color:var(--ink)}
.psmore.on{background:var(--hover);color:var(--ink);border-style:solid}
.psmore:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (max-width:860px){ .psmore.c{width:28px;height:28px} .psmore.i{width:44px;height:44px} }
/* R6-08 連續選取合併成一塊：上下相鄰的選取列拿掉相接處的圓角與內框，中間用淡強調色分隔線（不做圓角動畫，Shift 連點不閃） */
#content{--selb:color-mix(in srgb,var(--acc) 35%,transparent);--seld:color-mix(in srgb,var(--acc) 18%,transparent)}
#content :is(.row,.prow):is(.sel,.msel):has(+ :is(.row,.prow):is(.sel,.msel))::before{border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:inset 1px 0 0 var(--selb),inset -1px 0 0 var(--selb),inset 0 1px 0 var(--selb),inset 0 -1px 0 var(--seld);transition:none}
#content :is(.row,.prow):is(.sel,.msel)+:is(.row,.prow):is(.sel,.msel)::before{border-top-left-radius:0;border-top-right-radius:0;box-shadow:inset 1px 0 0 var(--selb),inset -1px 0 0 var(--selb),inset 0 -1px 0 var(--selb);transition:none}
#content :is(.row,.prow):is(.sel,.msel)+:is(.row,.prow):is(.sel,.msel):has(+ :is(.row,.prow):is(.sel,.msel))::before{box-shadow:inset 1px 0 0 var(--selb),inset -1px 0 0 var(--selb),inset 0 -1px 0 var(--seld)}
/* R6-09 換畫面後焦點移到標題（tabindex=-1），不畫環 */
#hdr h1:focus{box-shadow:none;outline:0 none}
/* R6-12 預估時間的單位是框內 suffix（有值才顯示），框外那一欄留空讓輸入框與日期欄同寬 */
.dfi>.dun{position:absolute;right:var(--sp-3);top:50%;translate:0 -50%;width:auto;font-size:var(--fs-md);color:var(--ink2);pointer-events:none}
.df.dur .dfi>.dtext{padding-right:36px}
.dfi>.dtext:placeholder-shown+.dun{display:none}
.dpad{flex:none;width:var(--ctl-h)}
/* R6-02 月曆結構：.mwrap（外框、圓角、裁切）＞ 星期列 .mhead（固定）＋ 週列 .mgrid.mweeks（只有它套切月滑動與手勢位移）。
   用 overflow:clip 裁切（不建立捲動容器，手機星期列仍可 sticky） */
.mwrap{--mh-h:26px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:clip;background:var(--panel)}
.mhead{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:var(--mh-h)}
.mgrid{grid-template-rows:var(--rows,repeat(var(--w),var(--mrow)));border:0;border-radius:0;overflow:visible;background:none;position:relative}
.mpeek{position:absolute;top:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(var(--w),1fr);opacity:.3;pointer-events:none}
.mpeek.nx{left:100%}
.mpeek.pv{right:100%}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  .mwrap{--mh-h:22px;border-radius:0;border-left:0;border-right:0}
  .mgrid{overflow:visible}
  .mhead{position:sticky;top:52px;z-index:calc(var(--z-base) + 2);background:var(--panel)}
  .mwh{position:static}
  /* R6-15 選中日的底色改成 inset 2px 的圓角塊，不碰到下方分隔線 */
  .mc{position:relative;isolation:isolate}
  .mc.sel{background:none;border-radius:0}
  .mc.sel::before{content:"";position:absolute;inset:2px;border-radius:var(--r-md);background:var(--sel);z-index:-1}
  .mc.sel.today::before{content:none}
}
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  /* 手機整理模式：最多 4 顆，每顆最寬半欄（≤2 列），不顯示資料夾名；「還有 n 個」自成一行 */
  .tg-plist{gap:var(--sp-2)}
  .tg-proj{max-width:min(60%,240px)}   /* R9-10 長專案名至少露出 10 個字 */
  .tg-proj small{display:none}
  .tg-more{flex-basis:100%}
}
/* R6-21 透視「有任一標籤」：子標籤縮排 16px（依層級） */
.ckgrid>.chkl{padding-left:calc(var(--td,0) * var(--sp-4))}
/* R6-14 手機（直向）提示框出現時新增鈕往上讓位（M3 snackbar），提示框改成滿版寬；進場 --ease-out、離場 --ease-in */
@media (max-width:699px){
  body.toast-on:not(.no-fab):not(.selmode):not(.fab-hide) #fab{transform:translateY(calc(-1 * (var(--toast-h,44px) + var(--sp-2))))}
  body:not(.toast-on) #fab{transition-timing-function:var(--ease-in)}
  body.toast-on:not(.no-fab):not(.selmode) #toast{right:12px}
}
/* R6-16 同步狀態圖示：線條 20px（與搜尋／設定同一套），只有錯誤時右上 6px --over 圓點；同步中箭頭循環旋轉（減少動態時不轉） */
.sync .sic i,.dhs .sic>i{display:none}
.sync .sic i.err,.dhs .sic>i.err{display:block;position:absolute;top:-1px;right:-2px;bottom:auto;width:6px;height:6px;border:0;border-radius:50%;background:var(--over)}
.sic svg.i .spin{transform-box:view-box;transform-origin:12px 13.6px;animation:syncSpin 1.2s linear infinite}
@keyframes syncSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .sic svg.i .spin{animation:none} }
.sync .sic.s-error,.dhs .sic.s-error{color:var(--over)}
.dhs .sic{position:relative;display:inline-flex}
/* R6-18 預測逾期列的「今天」：滑鼠裝置平常隱藏，hover／鍵盤游標／列內聚焦時才出現（--dur-1）；觸控常駐 */
@media (hover:hover) and (pointer:fine){
  .row .od-today{opacity:0;transition:opacity var(--dur-1) var(--ease-out)}
  .row:hover .od-today,.row.kcur .od-today,.row:focus-within .od-today,.row .od-today:focus-visible{opacity:1}
}
/* R6-19 預測日期條：選取框是獨立的指示層 .dsel（JS 用 transform 定位與滑動），.day.on 本身不再畫框 */
.strip{position:relative}
.dsel{position:absolute;left:0;top:0;border-radius:var(--r-lg);box-shadow:inset 0 0 0 2px var(--acc);pointer-events:none;z-index:var(--z-base);will-change:transform}
/* R7-05 日期條只有選中的那一格有填色：今天未選中時只留紫色文字與徽章；「過期」是篩選，未選中是 outline（紅字＋紅徽章），選中才填粉紅底＋紅色選取框。
   R9-15 .day.today／.day.on 的狀態規則只寫在這裡（原本分散 5 段互相覆寫） */
.day.today{background:var(--panel)}
.day.today small,.day.today b{color:var(--acc)}
.day.on{border-color:var(--line);box-shadow:none;background:var(--acc-soft)}
.day.on small,.day.on b{color:var(--acc)}
.day.on b.dico svg.i{color:currentColor}
.day.od{background:transparent;border-color:var(--line)}
.day.od.on{background:color-mix(in srgb,var(--over) 10%,var(--panel));border-color:color-mix(in srgb,var(--over) 30%,var(--line))}
.day.od.on small,.day.od.on b.dico svg.i{color:var(--over)}
.strip:has(.day.od.on) .dsel{box-shadow:inset 0 0 0 2px var(--over)}
/* R7-09 批次面板：加上／移除標籤、標記／取消標記同一組 .btn.sm（28 高、1px 外框、500、前置 16px 圖示）；× 只留給已選值的 chip */
.acts.bacts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.acts.bacts .btn{font-weight:500;white-space:nowrap}
.acts.bacts .btn svg.i{width:16px;height:16px}
/* R7-02 勾選圈與檢查清單方框：未完成時勾的 path 不畫（visibility），不再只靠 color:transparent 藏起來（強制色彩會把 stroke 改成 CanvasText） */
.chk svg,.ckbox svg{visibility:hidden}
.chk.done svg,.chk.dropped svg,.row.completing .chk svg,.ckbox.on svg{visibility:visible}

/* R7-07 列 → 檢閱器共享元素：只有標題飛過去（--dur-2、--ease-out），整頁不做 cross-fade */
html.vt-insp::view-transition-old(root),html.vt-insp::view-transition-new(root){animation:none}
/* R8-16 專案列 → 專案內頁的共享元素（名稱飛到 h1，返回時反向） */
html.vt-proj::view-transition-old(root),html.vt-proj::view-transition-new(root){animation:none}
html.vt-proj::view-transition-group(proj-title){animation-duration:var(--dur-2);animation-timing-function:var(--ease-out)}
html.vt-proj::view-transition-old(proj-title),html.vt-proj::view-transition-new(proj-title){animation-duration:var(--dur-2);height:100%;object-fit:none;object-position:left center}
html.vt-insp::view-transition-group(insp-title){animation-duration:var(--dur-2);animation-timing-function:var(--ease-out)}
html.vt-insp::view-transition-old(insp-title),html.vt-insp::view-transition-new(insp-title){animation-duration:var(--dur-2);height:100%;object-fit:none;object-position:left center}
/* R7-08 prefers-contrast: more：只改 token（--ink2 對 --panel ≥7:1、--line／--line-strong ≥3:1、--mute 拉到文字等級、placeholder ≥4.5:1、膠囊混色加深），
   另外列內標籤 chip 加 1px --line-strong 外框。深色兩處都寫 */
@media (prefers-contrast:more){
  :root{--ink2:#2e2f38; --mute:#3d3e4a; --faint:#5d5e6b; --line:#8a8b98; --line-strong:#6b6c7a; --cap-mix:22%}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-app-theme="light"]){--ink2:#dcdde5; --mute:#c9cad4; --faint:#a1a2ad; --line:#6e6f7c; --line-strong:#8a8b98; --cap-mix:30%}}
  :root[data-theme="dark"]:not([data-app-theme="light"]),:root[data-app-theme="dark"]{--ink2:#dcdde5; --mute:#c9cad4; --faint:#a1a2ad; --line:#6e6f7c; --line-strong:#8a8b98; --cap-mix:30%}
  ::placeholder{color:var(--mute);opacity:1}
  .chip,.m-tag{box-shadow:inset 0 0 0 1px var(--line-strong)}
}
/* ============ 強制色彩（Windows 高對比）：R7-02／R7-03，強制色彩規則一律集中在這個區塊 ============ */
@media (forced-colors:active){
  /* 完成狀態：實心 Highlight 圈＋HighlightText 勾（強制色彩會拿掉背景色，完成與未完成只剩勾的有無） */
  .chk.done,.row.completing .chk,.ckbox.on{forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText}
  .chk.dropped{forced-color-adjust:none;color:GrayText;border-color:GrayText}
  /* 鍵盤游標色條、選取、多選、拖放目標 */
  body:not(.selmode):not(.touch) .row.kcur::after,body:not(.selmode):not(.touch) .prow.kcur::after{forced-color-adjust:none;background:Highlight}
  .row.kcur::before,.prow.kcur::before{outline:1px dashed Highlight;outline-offset:-1px}
  .row.sel::before,.prow.sel::before,.row.msel::before,.prow.msel::before,.row.drop-into::before{outline:2px solid Highlight;outline-offset:-2px}
  body.selmode .row::after,body.selmode .prow::after{border-color:CanvasText}
  body.selmode .row.msel::after,body.selmode .prow.msel::after{forced-color-adjust:none;background:Highlight;border-color:Highlight;content:"✓";color:HighlightText;font-size:var(--fs-sm);font-weight:700;line-height:17px;text-align:center}
  /* 圖示欄、分頁列、抽屜的選中項目 */
  #side .ri.on .rg,.tab.on .rg{outline:2px solid Highlight;outline-offset:0;border-radius:var(--r-full)}
  #side .ri.on .rl,.tab.on{color:Highlight}
  /* 分段按鈕、快選 chip、日期條選中日、選單選中列：文字型的選中用 Highlight 底＋HighlightText 字 */
  .seg button.on,#hdr .seg button.on,.tg-dq button.on,.tpo.on{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .tpo.on *,.seg button.on *{color:HighlightText}
  .day.on{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .day.on small,.day.on b,.day.on svg{color:HighlightText}
  .dsel{box-shadow:none;outline:2px solid Highlight;outline-offset:-2px}
  .tpo[aria-selected="true"] .tpn{text-decoration:underline}
  .psc.on,.psb.on{outline:2px solid Highlight;outline-offset:2px}
  .mc.sel{outline:2px solid Highlight;outline-offset:-2px}
}

/* ============ R8-01 清單列 content-visibility：畫面外的列跳過樣式／排版／繪製（3,000 筆換畫面 style＋layout 佔六成）。
   contain-intrinsic-size 用 auto＋預估列高 --row-est：畫過一次就記住實際高度，捲動時不會跳。分組標題 .gh（黏頂）不加；月曆 .mev 不加。
   只在列數多時開（#content.cv，renderMain() 依列數切換，門檻 CV_MIN）：containment 會讓落在半像素的列（列高 61.5 之類）繪製時對齊到不同像素，少量列沒有效能問題就維持原樣 */
#content.cv .row,#content.cv .prow{content-visibility:auto;contain-intrinsic-size:auto var(--row-est)}
@media (pointer:coarse){ :root{--row-est:52px} }
@media print{ #content.cv .row,#content.cv .prow{content-visibility:visible} }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ R8-05～R8-07 平板版面 ============
   版面規則：手機（<700，或 <1000 且高 <500）＝底部 sheet＋遮罩；700～1023＝右側不遮罩的側欄（覆蓋清單右側、清單可捲可點）；
   ≥1024＝與桌面相同的並排（清單讓位）。非手機一律 84px 圖示欄、標籤單行省略 */
:root{--insp-bg:var(--panel)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-app-theme="light"]){--insp-bg:var(--raised)}}
:root[data-theme="dark"]:not([data-app-theme="light"]),:root[data-app-theme="dark"]{--insp-bg:var(--raised)}
@keyframes inspSideIn{from{transform:translateX(100%)}}
@keyframes inspSideOut{from{transform:translateX(var(--sx,0))}to{transform:translateX(100%)}}
@media (min-width:700px) and (max-width:1023px) and (min-height:500px),(min-width:1000px) and (max-width:1023px){
  body.insp-on #iscrim{display:none}
  #insp{width:min(400px,52vw);box-shadow:var(--sh-2);border-left:1px solid var(--line);background:var(--insp-bg);touch-action:pan-y}
  #insp.ins-in>*{animation:none}
  #insp.ins-in{animation:inspSideIn var(--dur-3) var(--ease-out)}
  #insp.ins-out{animation:inspSideOut var(--dur-3-out) var(--ease-in) forwards}
  /* R9-04 側欄開著時標題列讓位：右側操作排在側欄左側；放不下的篩選與整理收成圖示（同手機標題列的收合規則） */
  #hdr{transition:padding-right var(--dur-3) var(--ease-out)}
  body.insp-on #hdr{padding-right:calc(min(400px,52vw) + var(--sp-3))}
  body.insp-on #hdr .sub{white-space:nowrap}
  body.insp-on .fsel-w{width:36px;height:36px;display:inline-grid;place-items:center;color:var(--mute);border-radius:var(--r-md)}
  body.insp-on .fsel-w>svg{display:block}
  body.insp-on .fsel-w select.fsel{position:absolute;inset:0;width:100%;height:100%;opacity:0;padding:0;border:0}
  body.insp-on .fsel-w.on{color:var(--acc);background:var(--acc-soft)}
  body.insp-on #hdr .btn.tri{background:none;border-color:transparent;box-shadow:none;color:var(--acc);min-width:36px;min-height:36px;padding:0;position:relative}
  body.insp-on #hdr .btn.tri svg.i{width:20px;height:20px}
  body.insp-on #hdr .btn.tri .tl{display:none}
  body.insp-on #hdr .btn.tri .cnt{position:absolute;top:0;left:calc(50% + 4px);min-width:16px;height:16px;line-height:16px;padding:0 var(--sp-1);font-size:var(--fs-xs);background:var(--acc);color:var(--on-acc)}
}
@media (min-width:700px) and (max-width:1199px) and (min-height:500px),(min-width:1000px) and (max-width:1199px){
  #side{width:84px}
  .ri{font-size:var(--fs-sm);line-height:14px;padding-left:var(--sp-1);padding-right:var(--sp-1)}
  .ri .rl{max-width:76px}
  .pbadge{right:-12px}
}
@media (min-width:700px) and (min-height:500px),(min-width:1000px){
  .ri .rl{display:block;white-space:nowrap;text-overflow:ellipsis;-webkit-line-clamp:unset}
}

/* ============ R10-03 提示框最後一致性 ============ */
/* (a) 手機（同 isPhone()：寬 <700，或寬 <1000 且高 <500）所有提示框左右滿版，與有「復原」的相同；桌面與平板不變。要放在其他 #toast 手機規則之後 */
@media (max-width:699px),(max-width:999px) and (max-height:499px){
  body.toast-on #toast,body.toast-on #toast.noact{left:var(--sp-3);right:var(--sp-3);width:auto;max-width:none;--tx:0px;transform:none}
}
/* (b) 觸控裝置「復原」點擊區至少 44×44：左右內距 2px→8px（「復原」28px 字寬＋16＝44），再用同量負外距抵銷，文字位置與提示框高度（min-height 44）都不變 */
@media (pointer:coarse){
  #toast button{min-height:44px;min-width:44px;padding:0 var(--sp-2);margin:0 calc(2px - var(--sp-2))}
}

/* ============ R8-11 透視狀態條件 filter chip（沿用整理模式 chip：未選 1px --line、選中 --acc-soft 底＋前置 14px 勾、aria-pressed） ============ */
.fchips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.fchip{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--chip-h);padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-full);background:var(--panel);color:var(--ink);font-size:var(--fs-md);font-weight:500;line-height:1.2;text-align:left;cursor:pointer;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.fchip svg.i{display:none;width:14px;height:14px;stroke-width:2.2}
.fchip:hover{background:var(--hover)}
.fchip.on{background:var(--acc-soft);border-color:transparent;color:var(--acc);font-weight:600;padding-left:var(--sp-2h)}
.fchip.on svg.i{display:block}
.fchip:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.pfsec{margin-top:var(--sp-2)}
@media (forced-colors:active){ .fchip{border-color:ButtonText} .fchip.on{background:Highlight;color:HighlightText;forced-color-adjust:none} }