/* Folio 界面重做（2026-09-30，登记 F-007）。
   稿子：docs/mockups/folio-redesign/（顶栏 = 第八轮起；首页 = n-sv-3；项目页 = n-pf-b；待办 = n-todo；全局 AI = n-ai）。
   样式语言是 Pebble：暖白画布、白色浮起卡片（圆角 24）、药丸按钮、方形项目色点。
   类名一律 `fo-` 开头，不和 tw.css / updates.css 里的旧类撞；变量一律 `--fo-` 开头。
   阅读页（讲义 / 笔记本 / PDF）不用这份样式，顶栏也不是这一套。 */

:root {
  /* 2026-10-01 组件换成「V1 · Apple 克制」（F-008 第五 / 六轮，稿子 docs/mockups/folio-sidebar/components.html#apple2）：
     #f5f5f7 画布、白卡、很淡的阴影、药丸按钮、系统字体。黑色只留给文字和每屏唯一的主按钮；
     选中 / 高亮 / 勾选 / 今天这些用灰（--fo-accent 现在是中灰，不再是紫色）。 */
  --fo-bg: #f5f5f7; --fo-surface: #fff; --fo-fill: #f2f2f4; --fo-fill-2: #e8e8ed; --fo-fill-3: #dcdce1;
  --fo-line: rgba(0,0,0,.08); --fo-line-2: rgba(0,0,0,.14);
  --fo-ink: #1d1d1f; --fo-body: #3a3a3c; --fo-mute: #6e6e73; --fo-faint: #a1a1a6;
  --fo-accent: #636366; --fo-danger: #d70015; --fo-focus: #a1a1a6;
  --fo-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.04);
  --fo-shadow-2: 0 2px 8px rgba(0,0,0,.06), 0 12px 32px -12px rgba(0,0,0,.16);
  --fo-shadow-3: 0 8px 24px rgba(0,0,0,.08), 0 30px 60px -20px rgba(0,0,0,.25);
  --fo-ease: cubic-bezier(.25,.1,.25,1);
  --fo-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ---------------------------------------------------------------- 菜单 / 头像 / 项目色块（页面里共用）
   F-007 的药丸顶栏（#site-nav.fo-nav）2026-10-01 换成左侧栏（F-008，css/folio-side.css），顶栏那段样式删了。 */
.fo-ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.fo-ava-blank { display: inline-grid; place-items: center; background: linear-gradient(135deg, #ffb37a, #ff6f91); color: #fff; font-size: 12px; font-weight: 600; }

/* 下拉菜单（顶栏和页面里共用） */
.fo-dd { position: relative; display: flex; }
.fo-menu { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 60; min-width: 220px; max-width: min(320px, 90vw); padding: 6px; border-radius: 16px;
  background: var(--fo-surface); box-shadow: var(--fo-shadow-3); transform: translate(-50%, -4px); opacity: 0; visibility: hidden;
  transition: opacity .15s, transform .15s var(--fo-ease), visibility 0s .15s; font-family: var(--fo-font); pointer-events: auto; }
.fo-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.fo-menu.fo-menu-r { left: auto; right: -6px; transform: translateY(-4px); }
.fo-dd.is-open > .fo-menu, .fo-me > .fo-menu:not([hidden]) { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s, transform .15s var(--fo-ease); }
.fo-dd.is-open > .fo-menu.fo-menu-r, .fo-me > .fo-menu-r:not([hidden]) { transform: none; }
.fo-me > .fo-menu[hidden] { display: block; }
@media (hover: hover) { .fo-dd-hover:hover > .fo-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s, transform .15s var(--fo-ease); } }
.fo-menu a, .fo-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: none;
  font: 500 13.5px/1 var(--fo-font); color: var(--fo-body); text-align: left; white-space: nowrap; cursor: pointer; text-decoration: none; }
.fo-menu a:hover, .fo-menu button:hover { background: var(--fo-fill); color: var(--fo-ink); }
.fo-menu .ico { width: 15px; height: 15px; color: var(--fo-mute); flex: none; }
.fo-menu hr { border: 0; height: 1px; background: var(--fo-line); margin: 6px 4px; }
.fo-menu .fo-muted { color: var(--fo-mute); font-weight: 400; }
.fo-menu .fo-danger { color: var(--fo-danger); }
.fo-menu .fo-who { padding: 8px 10px 6px; } .fo-who b { display: block; color: var(--fo-ink); font-size: 14px; } .fo-who span { font-size: 12px; color: var(--fo-mute); }
.fo-sq { width: 10px; height: 10px; border-radius: 3px; background: var(--pc, var(--fo-faint)); flex: none; }


/* ---------------------------------------------------------------- 页面外壳 */
/* 项目网格 / 项目页的外层同时挂着 .ff（playground.js 和对话框要用），playground.css 的 .ff 会把底色设成纯白，这里盖回来 */
.fo-page.ff { background: var(--fo-bg); color: var(--fo-body); }
.fo-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--fo-bg); color: var(--fo-body);
  font-family: var(--fo-font); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
.fo-page button, .fo-page input, .fo-page select, .fo-page textarea { font-family: inherit; }
.fo-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 84px 32px 32px; -webkit-overflow-scrolling: touch; }
.fo-in { max-width: 1240px; margin: 0 auto; }
.fo-in > * + * { margin-top: 34px; }
.fo-h1 { margin: 0; font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--fo-ink); }
.fo-h1-sub { margin: 0; font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--fo-mute); }
/* 首页欢迎语：一句话，前半句（问候 + 名字）深色、后半句浅色 */
.fo-hello { margin: 0; font-size: 32px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--fo-ink); }
.fo-hello span { color: var(--fo-mute); }
.fo-crumb { margin: 0 0 6px; font-size: 13px; color: var(--fo-mute); } .fo-crumb a { color: inherit; text-decoration: none; } .fo-crumb a:hover { color: var(--fo-ink); }
.fo-sec { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; min-width: 0; }
.fo-sec h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--fo-mute); }
.fo-sec .ico { width: 15px; height: 15px; }
.fo-grow { flex: 1 1 0; min-width: 0; }
.fo-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fo-card { background: var(--fo-surface); border-radius: 24px; box-shadow: var(--fo-shadow); min-width: 0; }
.fo-link { font-size: 13px; color: var(--fo-mute); text-decoration: none; white-space: nowrap; } .fo-link:hover { color: var(--fo-ink); }
.fo-page .ico { width: 16px; height: 16px; flex: none; }
.fo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--fo-line-2); background: var(--fo-surface); color: var(--fo-ink); font: 500 13.5px/1 var(--fo-font); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .15s, transform .1s; }
.fo-btn:hover { background: var(--fo-fill); } .fo-btn:active { transform: scale(.97); }
.fo-btn-pri { background: var(--fo-ink); border-color: transparent; color: #fff; } .fo-btn-pri:hover { background: #2b2b2b; }
.fo-btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 9px; }
.fo-ibtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; color: var(--fo-mute); cursor: pointer; flex: none; }
.fo-ibtn:hover { background: var(--fo-fill); color: var(--fo-ink); }
.fo-empty { padding: 22px 14px; color: var(--fo-mute); font-size: 13.5px; }
.fo-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--fo-fill); color: var(--fo-mute); font-size: 11.5px; font-weight: 500; }
@media (max-width: 860px) { .fo-scroll { padding: 76px 12px 24px; } .fo-in > * + * { margin-top: 26px; } }
@media (max-width: 639px) { .fo-h1, .fo-h1-sub { font-size: 26px; } .fo-hello { font-size: 24px; } .fo-scroll { padding-top: 72px; } }

/* AI 输入药丸（首页底部 / 全局 AI 页） */
.fo-ask { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 10px 0 22px; border-radius: 999px; background: var(--fo-surface);
  border: 1px solid var(--fo-line); box-shadow: var(--fo-shadow); min-width: 0; }
.fo-ask:focus-within { border-color: color-mix(in srgb, var(--fo-accent) 50%, var(--fo-line)); }
.fo-ask input { flex: 1 1 0; min-width: 0; border: 0; outline: 0; background: none; font-size: 15.5px; color: var(--fo-ink); }
.fo-ask input::placeholder { color: var(--fo-faint); }
.fo-ask .fo-sep { width: 1px; height: 24px; background: var(--fo-line); flex: none; }
.fo-ask .ico { color: var(--fo-mute); }
.fo-ask-go { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--fo-ink); color: #fff; cursor: pointer; flex: none; }
.fo-ask-go .ico { color: #fff; transform: rotate(90deg); }   /* 图标库里只有 arrow-left，转成朝上 */
.fo-dock { flex: none; padding: 8px 32px 18px; background: linear-gradient(to top, var(--fo-bg) 65%, transparent); }
.fo-dock .fo-ask { max-width: 1240px; margin: 0 auto; }
@media (max-width: 860px) { .fo-dock { padding: 6px 8px 10px; } .fo-ask { height: 52px; padding-left: 16px; } }

/* ---------------------------------------------------------------- 首页 Preview 横卡 */
.fo-kc-wrap { --n: 2.6; position: relative; min-width: 0; }
.fo-kc-track { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 0 4px; overscroll-behavior-x: contain; }
.fo-kc-track::-webkit-scrollbar { display: none; }
.fo-kc { position: relative; flex: 0 0 auto; width: calc((100% - var(--n) * 16px) / var(--n)); aspect-ratio: 1.9; border-radius: 32px; overflow: hidden;
  scroll-snap-align: start; color: #fff; isolation: isolate; text-decoration: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 70%, #fff), color-mix(in srgb, var(--pc) 72%, #000)); }
.fo-kc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform .7s var(--fo-ease); }
.fo-kc:hover img { transform: scale(1.04); }
.fo-kc::after { content: ""; position: absolute; inset: 30% 0 0 0; z-index: -1; background: linear-gradient(to top, rgba(10,10,14,.82), rgba(10,10,14,.4) 50%, transparent); }
.fo-kc-tag { position: absolute; left: 24px; top: 20px; right: 24px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .9; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.fo-kc-info { position: absolute; left: 24px; right: 22px; bottom: 20px; min-width: 0; }
.fo-kc-info b { display: block; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.fo-kc-info span { display: block; font-size: 13px; opacity: .8; margin-top: 3px; }
.fo-kc-nav { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.fo-kc-dots { display: flex; gap: 7px; justify-content: center; flex: 1; }
.fo-kc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--fo-fill-2); transition: background .2s; }
.fo-kc-dots i.is-on { background: var(--fo-ink); }
.fo-kc-nav button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--fo-fill); color: var(--fo-ink); cursor: pointer; }
.fo-kc-nav button:hover { background: var(--fo-fill-2); }
.fo-kc-nav .ico { width: 14px; height: 14px; }
.fo-kc-new { display: grid; place-items: center; align-content: center; gap: 8px; color: var(--fo-mute); background: var(--fo-surface); box-shadow: inset 0 0 0 1.5px var(--fo-line-2); }
.fo-kc-new::after { content: none; }
@media (max-width: 1100px) { .fo-kc-wrap { --n: 1.6; } }
@media (max-width: 639px) { .fo-kc-wrap { --n: 1.08; } .fo-kc { border-radius: 24px; } }

/* ---------------------------------------------------------------- 首页「近三天」议程（2026-10-02，稿子 docs/mockups/home-calendar/ V3 + V2）
   左：「进行中 / 下一个」大卡 + 今天的清单；右：后两天。卡片 ≥ 540 宽左右排（iPad 也是），更窄上下排。
   日程行：起止时间 · 3px 项目色竖条 · 标题 + 「时长 · 项目」；过去的 45% 透明，进行中的浅灰底。 */
.fo-cal-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.fo-cal-bar { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 20px; min-width: 0; flex: none; }
.fo-cal-bar b { color: var(--fo-ink); font-size: 16px; font-weight: 650; white-space: nowrap; flex: none; } .fo-cal-bar .fo-date { font-size: 13px; color: var(--fo-mute); white-space: nowrap; }
.fo-ag { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); flex: 1 1 auto; min-height: 0; }
.fo-ag-l { padding: 2px 20px 20px; min-width: 0; }
.fo-ag-r { padding: 2px 20px 20px; border-left: 1px solid var(--fo-line); min-width: 0; }
.fo-ag-hero { position: relative; display: block; width: 100%; padding: 15px 16px 15px 19px; border: 0; border-radius: 16px; background: var(--fo-fill); text-align: left; color: inherit;
  font: inherit; cursor: pointer; overflow: hidden; transition: background .15s var(--fo-ease); }
.fo-ag-hero::before { content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 3px; border-radius: 0 2px 2px 0; background: var(--pc); }
.fo-ag-lab { display: block; font-size: 12px; font-weight: 600; color: var(--fo-mute); font-variant-numeric: tabular-nums; }
.fo-ag-h3 { display: block; margin-top: 5px; font-size: 20px; line-height: 1.25; font-weight: 650; letter-spacing: -.015em; color: var(--fo-ink); overflow-wrap: anywhere; }
.fo-ag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 7px; font-size: 12.5px; color: var(--fo-mute); font-variant-numeric: tabular-nums; }
.fo-ag-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fo-ag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pc); flex: none; }
.fo-ag-prog { display: block; height: 4px; margin-top: 12px; border-radius: 2px; background: var(--fo-fill-3); overflow: hidden; }
.fo-ag-prog i { display: block; height: 100%; border-radius: 2px; background: var(--fo-accent); transition: width .3s var(--fo-ease); }
.fo-ag-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 0 4px; min-width: 0; }
.fo-ag-sec b { font-size: 13.5px; font-weight: 600; color: var(--fo-ink); white-space: nowrap; }
.fo-ag-sec span { font-size: 12px; color: var(--fo-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fo-ag-list { display: flex; flex-direction: column; }
.fo-ag-ev { display: grid; grid-template-columns: 42px 3px minmax(0,1fr); gap: 0 10px; width: calc(100% + 16px); margin: 0 -8px; padding: 8px; border: 0; border-radius: 12px;
  background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background .15s var(--fo-ease); }
.fo-ag-ev > i { border-radius: 2px; background: var(--pc); }
.fo-ag-tm { display: flex; flex-direction: column; line-height: 1.3; font-variant-numeric: tabular-nums; }
.fo-ag-tm b { font-size: 12.5px; font-weight: 600; color: var(--fo-body); } .fo-ag-tm span { font-size: 11px; color: var(--fo-faint); }
.fo-ag-tt { display: flex; flex-direction: column; min-width: 0; }
.fo-ag-tt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--fo-ink); overflow-wrap: anywhere; }
.fo-ag-tt > span { margin-top: 2px; font-size: 11.5px; color: var(--fo-mute); }
.fo-ag-ev.is-now { background: var(--fo-fill); }
.fo-ag-hero.is-idle { cursor: default; } .fo-ag-hero.is-idle::before { content: none; }
.fo-ag-ev.is-past { opacity: .45; } .fo-ag-ev.is-past .fo-ag-tt b { font-weight: 500; }
.fo-ag-list.is-compact .fo-ag-ev { padding-top: 6px; padding-bottom: 6px; }
.fo-ag-gap { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 0 23px; font-size: 11.5px; color: var(--fo-faint); }
.fo-ag-gap::before { content: ""; justify-self: center; height: 18px; border-left: 1px dashed var(--fo-fill-3); }
.fo-ag-gap span { align-self: center; }
.fo-ag-now { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 0 10px; align-items: center; margin: 3px 0; font-size: 11px; font-weight: 600; color: var(--fo-accent); font-variant-numeric: tabular-nums; }
.fo-ag-now::after { content: ""; grid-column: 2; grid-row: 1; border-top: 1.5px solid var(--fo-accent); }
.fo-ag-now span { grid-column: 1; grid-row: 1; }
.fo-ag-free { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0 0; font-size: 13px; color: var(--fo-faint); }
.fo-ag-add { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px dashed var(--fo-line-2); border-radius: 8px; background: none;
  font: inherit; font-size: 12.5px; color: var(--fo-mute); cursor: pointer; white-space: nowrap; }
.fo-ag-add .ico { width: 14px; height: 14px; }
.fo-ag-day + .fo-ag-day { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fo-line); }
.fo-ag-dh { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fo-ag-dh b { font-size: 14px; font-weight: 600; color: var(--fo-ink); white-space: nowrap; }
.fo-ag-dh span { font-size: 12px; color: var(--fo-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fo-ag-bar { position: relative; height: 4px; margin: 10px 0 0; border-radius: 2px; background: var(--fo-fill); }
.fo-ag-bar i { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 2px; background: var(--pc); opacity: .85; }
.fo-ag-ticks { position: relative; height: 14px; margin: 3px 0 4px; font-size: 10px; color: var(--fo-faint); font-variant-numeric: tabular-nums; }
.fo-ag-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.fo-ag-ticks span:first-child { transform: none; } .fo-ag-ticks span:last-child { transform: translateX(-100%); }
/* 悬停态只给有鼠标的设备（触屏点完会一直粘着悬停色） */
@media (hover: hover) {
  .fo-ag-hero:not(.is-idle):hover, .fo-ag-ev.is-now:hover { background: var(--fo-fill-2); }
  .fo-ag-ev:hover { background: var(--fo-fill); }
  .fo-ag-add:hover { border-style: solid; background: var(--fo-fill); color: var(--fo-ink); }
}
@container fo-cal (max-width: 539px) {
  .fo-ag { grid-template-columns: minmax(0,1fr); }
  .fo-ag-l, .fo-ag-r { padding-left: 18px; padding-right: 18px; }
  .fo-ag-r { border-left: 0; border-top: 1px solid var(--fo-line); padding-top: 16px; }
}

/* ---------------------------------------------------------------- 待办条目（卡片） */
.fo-todos { list-style: none; margin: 0; padding: 0; }
.fo-todo { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 0 0 6px; border-radius: 12px; background: var(--fo-bg); min-width: 0; transition: background .15s; }
.fo-todo:hover { background: var(--fo-fill-2); }
.fo-check { position: relative; width: 18px; height: 18px; margin-top: 1px; flex: none; padding: 0; border-radius: 50%; border: 1.6px solid var(--fo-line-2); background: var(--fo-surface); cursor: pointer; transition: background .15s, border-color .15s; }
.fo-check::before { content: ""; position: absolute; inset: -9px; }
.fo-check:hover { border-color: var(--pc, var(--fo-ink)); }
.fo-todo.is-done .fo-check { background: var(--pc, var(--fo-ink)); border-color: transparent; }
.fo-todo.is-done .fo-check::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.fo-todo-t { flex: 1 1 0; min-width: 0; font-size: 13.5px; color: var(--fo-ink); }
.fo-todo-p { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: var(--fo-mute); }
.fo-todo-p i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc); flex: none; }
.fo-todo-p em { font-style: normal; color: var(--fo-danger); }
.fo-todo.is-done { opacity: .55; } .fo-todo.is-done .fo-todo-t > b { text-decoration: line-through; font-weight: 400; }
.fo-todo-t > b { font-weight: 400; }
.fo-day-h { display: flex; align-items: baseline; gap: 8px; padding: 12px 4px 6px; }
.fo-day-h b { color: var(--fo-ink); font-size: 13px; font-weight: 600; } .fo-day-h span { margin-left: auto; font-size: 11.5px; color: var(--fo-mute); }
.fo-day-h.is-today b { color: var(--fo-accent); }
.fo-todo-add { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px; border: 1px dashed var(--fo-line-2); border-radius: 12px; }
.fo-todo-add:focus-within { border-style: solid; border-color: color-mix(in srgb, var(--fo-accent) 50%, var(--fo-line-2)); }
.fo-todo-add input[name=title] { width: 100%; border: 0; outline: 0; background: none; font-size: 13.5px; color: var(--fo-ink); padding: 2px 2px; }
.fo-todo-add input::placeholder { color: var(--fo-faint); }
.fo-todo-add .fo-row { display: flex; gap: 6px; min-width: 0; }
.fo-todo-add select { flex: 1 1 0; min-width: 0; height: 28px; border: 1px solid var(--fo-line); border-radius: 8px; background: var(--fo-surface); font-size: 12px; color: var(--fo-body); padding: 0 6px; }
.fo-todo-add .fo-btn { flex: none; }
.fo-err { min-height: 0; margin: 4px 2px 0; font-size: 12px; color: var(--fo-danger); }
.fo-err:empty { display: none; }

/* ---------------------------------------------------------------- 首页「近三天」：日历卡 | 待办卡（n-sv-3） */
/* 并排还是上下排看这一栏自己的宽度（容器查询），不看屏幕宽度：900px 上下的屏幕侧栏常驻、要让出 --fo-sbw，
   按屏幕宽度判断时日历卡会被挤到 250px 左右（2026-10-01 折叠屏实测）。 */
.fo-three-wrap { container: fo-three / inline-size; }
.fo-three { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 14px; align-items: stretch; }
.fo-todo-card { display: flex; flex-direction: column; padding: 16px 12px 12px; min-width: 0; }
.fo-todo-card-h { display: flex; align-items: center; gap: 8px; padding: 0 6px 2px; }
.fo-todo-card-h b { color: var(--fo-ink); font-size: 16px; font-weight: 650; } .fo-todo-card-h .fo-date { font-size: 13px; color: var(--fo-mute); }
.fo-todo-card .fo-scroll-y { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: 560px; }
/* 日历卡要 ≥ 540 宽才能左右排（今天 | 后两天），加上待办卡 330 和间距 14：不到 884 就把待办卡放到下面，日历卡占满一行
   （2026-10-02：iPad 竖屏原来并排，日历卡只剩 ~380，议程被挤成一长条）。 */
@container fo-three (max-width: 883px) { .fo-three { grid-template-columns: minmax(0,1fr); } .fo-todo-card .fo-scroll-y { max-height: none; } }
/* 日历卡顶栏放不下时：先藏日期，再把「打开待办」收成箭头（全称留在 title / aria-label） */
.fo-cal-card { container: fo-cal / inline-size; }
@container fo-cal (max-width: 400px) { .fo-cal-bar .fo-date { display: none; } }
@container fo-cal (max-width: 300px) { .fo-cal-bar .fo-btn-label { display: none; } .fo-cal-bar .fo-btn-sm { padding: 0 6px; } }

/* ---------------------------------------------------------------- 项目网格（/playground） */
.fo-pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.fo-pj { display: block; border-radius: 28px; overflow: hidden; background: var(--fo-surface); box-shadow: var(--fo-shadow); min-width: 0; text-decoration: none; color: inherit; transition: transform .3s var(--fo-ease), box-shadow .3s; }
.fo-pj:hover { transform: translateY(-4px); box-shadow: var(--fo-shadow-2); }
.fo-pj-cover { display: block; aspect-ratio: 2.1; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 70%, #fff), color-mix(in srgb, var(--pc) 75%, #000)); }
.fo-pj-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--fo-ease); }
.fo-pj:hover .fo-pj-cover img { transform: scale(1.04); }
.fo-pj-b { display: block; padding: 18px 22px 20px; }
.fo-pj-b b { display: flex; align-items: center; gap: 9px; color: var(--fo-ink); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.fo-pj-b > span { display: block; margin-top: 6px; color: var(--fo-mute); font-size: 13.5px; line-height: 1.55; }
.fo-pj-b small { display: block; margin-top: 10px; color: var(--fo-faint); font-size: 12px; }
.fo-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fo-head .fo-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* ---------------------------------------------------------------- 项目页 B：左文件夹 | 右列表（n-pf-b） */
.fo-proj .fo-in { max-width: 1100px; }
.fo-find { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--fo-surface); border: 1px solid var(--fo-line); width: 280px; min-width: 0; color: var(--fo-mute); }
.fo-find:focus-within { border-color: var(--fo-line-2); box-shadow: 0 0 0 3px var(--fo-fill-2); }
.fo-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 14px; color: var(--fo-ink); }
.fo-find input::placeholder { color: var(--fo-faint); }
.fo-find input::-webkit-search-cancel-button { display: none; }
.fo-pb-list { background: var(--fo-surface); border-radius: 20px; box-shadow: var(--fo-shadow); padding: 8px; min-width: 0; }
.fo-pr { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px; border-radius: 14px; color: var(--fo-ink); text-decoration: none; min-width: 0; transition: background .12s; }
.fo-pr:hover { background: var(--fo-fill); }
.fo-pr > .ico { width: 19px; height: 19px; color: var(--fo-mute); flex: none; }
.fo-pr[data-kind="notebook"] > .ico { color: var(--fo-accent); }
.fo-pr-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0; gap: 2px; }
.fo-pr-t b { font-weight: 500; font-size: 14.5px; } .fo-pr-t span { font-size: 12px; color: var(--fo-faint); }
.fo-pr-in { font-size: 12px; color: var(--fo-mute); white-space: nowrap; flex: none; width: 130px; overflow: hidden; text-overflow: ellipsis; }
.fo-pr time { font-size: 12px; color: var(--fo-faint); white-space: nowrap; flex: none; width: 70px; text-align: right; }
.fo-pr[hidden] { display: none; }
/* 项目页列表只显示文件名（2026-10-01）：一行字，行高收到 46 */
.fo-pb-list > .fo-pr { min-height: 46px; }
/* 文件类型图标（2026-10-01，_icon.html 的 ficon()）：只读 = 迷你纸张 .ft-p（竖版，带一点投影），可编辑 = 线框胶囊 .ft-s。
   颜色画在图标里（灰），这里只管尺寸和投影；方形小框（侧栏 / ⌘K）里纸张按高度放、自动变窄 */
.ico.ft-p { filter: drop-shadow(0 .5px .8px rgba(0,0,0,.12)); }
.fo-pb-list .fo-empty[hidden] { display: none; }
.fo-tree-panel { margin-top: 28px; padding: 14px; }
.fo-tree-panel[hidden] { display: none; }
.fo-tree-panel .fo-sec { padding: 0 6px; }
@media (max-width: 767px) {
  .fo-head { align-items: stretch; flex-direction: column; gap: 14px; }
  .fo-head .fo-tools { width: 100%; } .fo-find { flex: 1 1 auto; width: auto; }
  .fo-pb-list { border-radius: 20px; padding: 6px; min-height: 0; }
}
@media (max-width: 639px) { .fo-pr-in { display: none; } .fo-pr { padding: 8px 10px; gap: 10px; } .fo-pr-t b { font-size: 14px; } .fo-tools .fo-btn-label { display: none; } }

/* ---------------------------------------------------------------- 全局 AI（只有样式，功能后续接入） */
.fo-ai-hero { max-width: 820px; margin: clamp(0px, 4vh, 48px) auto 0; }
.fo-ai-hero .fo-ask { margin-top: 26px; }
.fo-ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fo-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--fo-surface); box-shadow: var(--fo-shadow);
  font-size: 13px; color: var(--fo-body); cursor: pointer; }
.fo-chip:hover { color: var(--fo-ink); }
.fo-ai-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--fo-accent) 9%, var(--fo-surface)); color: var(--fo-body); font-size: 13.5px; }
.fo-ai-note[hidden] { display: none; }
.fo-ai-note .ico { color: var(--fo-accent); margin-top: 2px; }
.fo-ai-grid { max-width: 820px; margin: 40px auto 0; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 14px; align-items: start; }
.fo-ai-box { padding: 18px 12px 12px; }
.fo-ai-box .fo-sec { padding: 0 8px; }
.fo-ai-ph { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px 8px; }
.fo-ai-ph i { display: block; height: 42px; border-radius: 12px; background: var(--fo-bg); }
.fo-ai-ph i:nth-child(2) { opacity: .7; } .fo-ai-ph i:nth-child(3) { opacity: .45; }
.fo-ai-ph p { margin: 4px 2px 0; font-size: 12.5px; color: var(--fo-mute); }
.fo-ai-card { display: block; padding: 10px 8px 12px; border-radius: 12px; text-decoration: none; color: inherit; }
.fo-ai-card b { display: block; color: var(--fo-ink); font-size: 14px; margin: 4px 0 3px; } .fo-ai-card span { font-size: 13px; color: var(--fo-mute); }
a.fo-ai-card:hover { background: var(--fo-fill); }
@media (max-width: 767px) { .fo-ai-grid { grid-template-columns: minmax(0,1fr); } }

/* ---------------------------------------------------------------- 待办页：三天列表（F-008，稿子 folio-sidebar/s1b-pill 的「日程」） */
.fo-tl { max-width: 980px; }
.fo-tl > * + * { margin-top: 14px; }
.fo-tl .fo-head { margin-bottom: 8px; }
.fo-tl-sub { margin: 6px 0 0; font-size: 14px; color: var(--fo-mute); }
.fo-tl-sub a { color: var(--fo-accent); text-decoration: none; }
.fo-tl-filter { margin: 0; padding: 8px 14px; border-radius: 12px; background: var(--fo-fill); font-size: 13px; color: var(--fo-mute); }
.fo-tl-filter[hidden] { display: none; }
.fo-tl-day { padding: 14px 18px 10px; }
.fo-tl-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.fo-tl-h b { font-size: 15px; font-weight: 650; color: var(--fo-ink); }
.fo-tl-h span { font-size: 13px; color: var(--fo-mute); }
.fo-tl-h .fo-ibtn { align-self: center; width: 28px; height: 28px; }
.fo-tl-ev { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--fo-line); background: none;
  text-align: left; font: inherit; color: var(--fo-ink); cursor: pointer; min-width: 0; }
.fo-tl-ev:hover { background: var(--fo-fill); border-radius: 8px; }
.fo-tl-ev[hidden] { display: none; }
.fo-tl-ev > i { width: 3px; height: 18px; border-radius: 2px; background: var(--pc); flex: none; }
.fo-tl-ev time { width: 96px; flex: none; font-size: 13px; color: var(--fo-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fo-tl-ev b { flex: 1 1 0; font-weight: 400; font-size: 14.5px; }
.fo-tl-ev.is-past b, .fo-tl-ev.is-past time { color: var(--fo-faint); }
.fo-tl-p { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fo-mute); white-space: nowrap; flex: none; }
.fo-tl-p em { width: 8px; height: 8px; border-radius: 2.5px; background: var(--pc); }
.fo-tl-todos { margin-top: 4px; }
.fo-tl-todos .fo-todo { background: none; padding: 8px 4px; margin: 0; border-radius: 8px; }
.fo-tl-todos .fo-todo:hover { background: var(--fo-fill); }
.fo-tl-todos .fo-todo[hidden] { display: none; }
.fo-tl-todos .fo-todo-t { font-size: 14.5px; }
.fo-tl-none { margin: 2px 0 6px; font-size: 13px; color: var(--fo-faint); }
@media (max-width: 639px) {
  .fo-tl-day { padding: 12px 12px 8px; }
  .fo-tl-ev { gap: 10px; } .fo-tl-ev time { width: 82px; font-size: 12px; } .fo-tl-p { display: none; }
}

/* ---------------------------------------------------------------- 项目小图标（F-008）：项目页标题前的按钮、网格卡片标题前 */
.fo-pt-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fo-pt-icon { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 14px; flex: none; color: var(--pc);
  background: color-mix(in srgb, var(--pc) 13%, var(--fo-surface)); cursor: pointer; transition: background .15s, transform .15s; }
.fo-pt-icon:hover:not(:disabled) { background: color-mix(in srgb, var(--pc) 21%, var(--fo-surface)); }
.fo-pt-icon:active:not(:disabled) { transform: scale(.96); }
.fo-pt-icon:disabled { cursor: default; }
.fo-pt-icon .ico { width: 24px; height: 24px; }
.fo-pt-icon .fo-sq { width: 16px; height: 16px; border-radius: 5px; background: var(--pc); }
.fo-pj-b b .fs-pic { width: 18px; height: 18px; }
@media (max-width: 639px) { .fo-pt-icon { width: 40px; height: 40px; border-radius: 12px; } .fo-pt-icon .ico { width: 20px; height: 20px; } }

/* ---------------------------------------------------------------- 对话框（日程 / 待办 / 新建笔记本） */
.fo-dialog { width: min(420px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 22px; background: var(--fo-surface); color: var(--fo-body); box-shadow: var(--fo-shadow-3); font-family: var(--fo-font); }
.fo-dialog::backdrop { background: rgba(0,0,0,.3); }
.fo-dialog form { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 18px; }
.fo-dialog h2 { margin: 0 0 2px; font-size: 17px; font-weight: 650; color: var(--fo-ink); }
.fo-dialog label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--fo-mute); }
.fo-dialog input, .fo-dialog select { height: 38px; padding: 0 12px; border: 1px solid var(--fo-line-2); border-radius: 10px; background: var(--fo-surface); font-size: 14px; color: var(--fo-ink); outline: 0; min-width: 0; }
.fo-dialog input:focus, .fo-dialog select:focus { border-color: color-mix(in srgb, var(--fo-accent) 60%, var(--fo-line-2)); }
.fo-dialog .fo-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.fo-dialog .fo-seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fo-dialog .fo-seg2 label { flex-direction: row; align-items: center; justify-content: center; gap: 6px; height: 38px; border: 1px solid var(--fo-line-2); border-radius: 10px; color: var(--fo-body); font-size: 13.5px; cursor: pointer; }
.fo-dialog .fo-seg2 input { position: absolute; opacity: 0; pointer-events: none; }
.fo-dialog .fo-seg2 label:has(input:checked) { border-color: var(--fo-ink); color: var(--fo-ink); font-weight: 600; }
.fo-dialog-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.fo-dialog-foot .fo-danger { color: var(--fo-danger); border-color: transparent; background: none; padding: 0 6px; }
.fo-dialog-foot .fo-danger[hidden] { display: none; }


/* ================================================================ V1 · Apple 克制（2026-10-01，F-008）
   上面各段沿用原来的结构，这里把按钮 / 菜单 / 输入 / 日历 / 勾选换成「克制」的样子。
   规则：黑色（#1d1d1f）只给文字和主按钮 .fo-btn-pri；选中、高亮、今天、完成、发送都是灰。 */
.fo-card { border-radius: 20px; }
.fo-btn { height: 36px; padding: 0 16px; border: 0; border-radius: 980px; background: var(--fo-surface); box-shadow: inset 0 0 0 1px var(--fo-line-2); font-weight: 500; }
.fo-btn:hover { background: var(--fo-fill); }
.fo-btn-pri { background: #1d1d1f; color: #fff; box-shadow: none; }
.fo-btn-pri:hover { background: #000; }
.fo-btn.fo-danger, .fo-dialog-foot .fo-danger { box-shadow: none; }
.fo-btn-sm { height: 30px; padding: 0 12px; }
.fo-ibtn { border-radius: 10px; }
.fo-menu { border-radius: 12px; box-shadow: 0 0 0 .5px var(--fo-line), var(--fo-shadow-3); }
.fo-menu a, .fo-menu button { border-radius: 7px; color: var(--fo-ink); }
.fo-menu a:hover, .fo-menu button:hover { background: var(--fo-fill-2); }
.fo-find:focus-within { border-color: var(--fo-focus); box-shadow: 0 0 0 4px rgba(0,0,0,.05); }
.fo-ask:focus-within { border-color: var(--fo-focus); }
.fo-ask-go { background: var(--fo-fill-2); color: var(--fo-ink); }
.fo-ask-go .ico { color: var(--fo-ink); }
.fo-ask > .ico { color: var(--fo-mute); }
.fo-dialog input, .fo-dialog select { background: var(--fo-fill); border-color: transparent; }
.fo-dialog input:focus, .fo-dialog select:focus { background: var(--fo-surface); border-color: var(--fo-focus); box-shadow: 0 0 0 4px rgba(0,0,0,.05); }
.fo-dialog .fo-seg2 label:has(input:checked) { border-color: var(--fo-line-2); background: var(--fo-fill-2); color: var(--fo-ink); }
.fo-todo-add:focus-within { border-color: var(--fo-focus); }
/* 待办页每天的标题：今天用深字 */
.fo-day-h.is-today b { color: var(--fo-ink); }
/* 勾选：完成是中灰（不是项目色，也不是黑） */
.fo-todo.is-done .fo-check { background: var(--fo-accent); }
.fo-check:hover { border-color: var(--fo-mute); }
.fo-pr[data-kind="notebook"] > .ico { color: var(--fo-mute); }
.fo-ai-note { background: var(--fo-fill); }
.fo-ai-note .ico { color: var(--fo-ink); }
.fo-tl-sub a { color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fo-line-2); }
.fo-pj { border-radius: 22px; }
.fo-chip { box-shadow: 0 0 0 1px var(--fo-line), var(--fo-shadow); }

/* ================================================================ 项目页 V3：文件夹卡 + 最近打开（F-008） */
.fo-pv { margin-top: 26px; }
.fo-pv-sec + .fo-pv-sec { margin-top: 28px; }
.fo-pv-sec[hidden] { display: none; }
.fo-pv-h { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; min-width: 0; }
.fo-pv-h h2 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--fo-mute); }
.fo-pv-h h2 span { margin-left: 4px; font-weight: 400; color: var(--fo-faint); }
.fo-pv-h .fo-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; color: var(--fo-ink); font: 500 13px var(--fo-font); padding: 0; }
.fo-pv-h .fo-link .ico { width: 14px; height: 14px; }
.fo-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.fo-fc { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 18px; background: var(--fo-surface); box-shadow: var(--fo-shadow);
  color: inherit; text-decoration: none; min-width: 0; transition: transform .25s var(--fo-ease), box-shadow .25s; }
.fo-fc:hover { transform: translateY(-2px); box-shadow: var(--fo-shadow-2); }
.fo-fc > span { display: block; min-width: 0; }
.fo-fc b { display: block; font-size: 14.5px; font-weight: 600; color: var(--fo-ink); }
.fo-fc small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fo-faint); }
/* 文件夹图形：灰色、无图标线条（V1 克制稿子里的样子） */
.fo-fi { position: relative; display: block; width: 36px; height: 28px; border-radius: 3px 8px 8px 8px; background: var(--fo-fill-3); flex: none; }
.fo-fi::before { content: ""; position: absolute; left: 0; top: -5px; width: 15px; height: 7px; border-radius: 4px 4px 0 0; background: var(--fo-fill-3); }
.fo-fi::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; border-radius: 3px 8px 8px 8px; background: var(--fo-fill-2); }
.fo-pt-folder { background: var(--fo-fill); cursor: default; }
.fo-pt-folder .fo-fi { transform: scale(.78); }
/* 选中的文件夹卡（F-010）：描边 + 文件夹图形变色；别的卡不动。
   2026-10-01（用户：「选中文件夹时根据项目的颜色决定高亮色」）：颜色取项目色 --pc（模板把它挂在 .fo-pv 上），
   2px 项目色描边 + 4% 项目色底，文件夹图形前片项目色、后片 45% 淡色；没有项目色时退回原来的灰。黑色只给文字。 */
.fo-fc { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fo-fc.is-sel { box-shadow: 0 0 0 2px var(--pc, var(--fo-mute)), var(--fo-shadow-2); transform: none;
  background: color-mix(in srgb, var(--pc, var(--fo-mute)) 4%, var(--fo-surface)); }
.fo-fc.is-sel .fo-fi, .fo-fc.is-sel .fo-fi::before { background: color-mix(in srgb, var(--pc, var(--fo-mute)) 45%, var(--fo-surface)); }
.fo-fc.is-sel .fo-fi::after { background: var(--pc, var(--fo-mute)); }
.fo-fc.is-sel small { color: var(--fo-mute); }
.fo-fc:focus-visible { outline: 2px solid var(--fo-focus, var(--fo-mute)); outline-offset: 2px; }
.fo-pv-h .fo-link[hidden] { display: none; }
.fo-pv-h h2.is-sel { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--fo-ink); font-size: 14.5px; }
.fo-pv-h h2.is-sel .fo-fi { transform: scale(.5); margin: -7px -9px -7px -9px; background: color-mix(in srgb, var(--pc, var(--fo-mute)) 45%, var(--fo-surface)); }
.fo-pv-h h2.is-sel .fo-fi::before { background: color-mix(in srgb, var(--pc, var(--fo-mute)) 45%, var(--fo-surface)); }
.fo-pv-h h2.is-sel .fo-fi::after { background: var(--pc, var(--fo-mute)); }
.fo-pv-h h2.is-sel span { margin-left: 0; }
.fo-pv-h:has(h2.is-sel) { align-items: center; }
.fo-pb-list.is-sel .fo-pr.is-here .fo-pr-in { visibility: hidden; }
.fo-pb-list.is-in-folder .fo-pr-in { display: none; }
.fo-pb-list.is-in-folder.is-search .fo-pr-in { display: block; }
@media (max-width: 639px) {
  .fo-fgrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .fo-fc { padding: 14px; gap: 12px; }
  .fo-pv { margin-top: 18px; }
}