/* ergo v0 mockup. Tokens (tokens.css) are ergo Calendar's, unchanged: colours, shadows, glass,
   the five area hues, dark mode. This file only adds the notes + tasks surfaces. */

/* Doc open, close and swipe-back are one motion (js/app.js makeMotion): it plays on top of an already drawn, usable doc. */
:root { --doc-motion-ms: 170ms; --doc-motion-ease: cubic-bezier(.2,.8,.2,1); }
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
:root.fake-safe { --sat: 50px; --sab: 28px; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* The canvas colour is what iOS/Safari paints into areas the page doesn't cover (e.g. the closed Duo's
   status strip, per WebKit). Set it on html as well as body, and keep it equal to theme-color (applyTheme). */
html { background: var(--app); }
body {
  background: var(--app); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  overscroll-behavior: none; overflow: hidden; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; margin: 0; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: inherit; }
button:focus-visible, input:focus-visible { /* not [contenteditable]: the caret is the focus cue (blue box on every tapped line, 2026-11-09) */ outline: 2px solid var(--accent); outline-offset: 2px; }
svg { display: block; flex: none; }
#app { position: fixed; inset: 0; overflow: hidden; }
.noselect, .tabbar, .dial, .fab, .dcard, .m-side { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Only text you edit can be selected: a long press anywhere else selects nothing and gets no Copy / Look Up / Translate
   callout (Drew's screenshot, 2026-11-10 05:43: a hold on a to-do selected the whole page under the to-do menu). */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.hscroll::-webkit-scrollbar { display: none; }

.c0 { --hue: var(--c0-hue); --abg: var(--c0-bg); --afg: var(--c0-fg); }
.c1 { --hue: var(--c1-hue); --abg: var(--c1-bg); --afg: var(--c1-fg); }
.c2 { --hue: var(--c2-hue); --abg: var(--c2-bg); --afg: var(--c2-fg); }
.c3 { --hue: var(--c3-hue); --abg: var(--c3-bg); --afg: var(--c3-fg); }
.c4 { --hue: var(--c4-hue); --abg: var(--c4-bg); --afg: var(--c4-fg); }
.cn { --hue: var(--cn-hue); --abg: var(--cn-bg); --afg: var(--cn-fg); }

/* ---------- shared pieces ---------- */
.round { width: 36px; height: 36px; border-radius: 18px; background: var(--fill4); color: var(--ink85); display: flex; align-items: center; justify-content: center; flex: none; transition: transform 160ms var(--ease), background 160ms var(--ease); }
.round:active { transform: scale(.92); background: var(--fill8); }
.round.glass { background: var(--glass); -webkit-backdrop-filter: saturate(1.5) blur(24px); backdrop-filter: saturate(1.5) blur(24px); box-shadow: var(--glassRing), var(--pill); }
.round.on { color: var(--c1-hue); }
.dot { width: 7px; height: 7px; border-radius: 4px; background: var(--hue); flex: none; }
.sw { width: 10px; height: 10px; border-radius: 3px; background: var(--hue); flex: none; }
.chip { height: 26px; padding: 0 9px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; background: var(--fill4); color: var(--ink85); flex: none; }
.chip.area { background: var(--abg); color: var(--afg); font-weight: 600; }
.chip.tag { color: var(--ink55); }
.chip.tag::before { content: '#'; color: var(--ink25); margin-right: -3px; }
.chip.status { gap: 6px; }
.chip.status i { width: 8px; height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink40); }
.chip.status.prog i { background: conic-gradient(var(--accent) 0 50%, transparent 0); box-shadow: inset 0 0 0 1.5px var(--accent); }
.chip.status.act i { background: var(--c0-hue); box-shadow: none; }
.chip.over { background: var(--red12); color: var(--redText); }
.chip.dl { background: var(--orange14); color: var(--orangeText); }
.chip.add { color: var(--ink40); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* The checkbox: calendar's box, bigger, with a spring pop and a drawn tick. */
.box { flex: none; position: relative; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.6px var(--ink22); display: flex; align-items: center; justify-content: center; color: var(--onAccent); cursor: pointer; }
.box::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: scale(0); opacity: 0; transition: transform 380ms cubic-bezier(.3,1.5,.5,1), opacity 120ms var(--ease); }
.box svg { position: relative; }
.box svg path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 260ms var(--ease) 60ms; }
.box.over { box-shadow: inset 0 0 0 1.6px var(--red70); }
.done > .box, .box.done { box-shadow: none; }
.done > .box::before, .box.done::before { transform: scale(1); opacity: 1; }
.done > .box svg path, .box.done svg path { stroke-dashoffset: 0; }
.box:active::after { content: ''; position: absolute; inset: -6px; border-radius: 10px; background: var(--fill8); }
.strike { position: relative; }
.strike::after { content: ''; position: absolute; left: 0; right: 0; top: 52%; height: 1.5px; border-radius: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 300ms var(--ease) 80ms; opacity: .8; }
.done > .main .strike::after, .done > .strike::after, .done .bl-text.strike::after { transform: scaleX(1); }

/* ---------- iPhone shell ---------- */
.phone { position: fixed; inset: 0; overflow: hidden; background: var(--app); }
.statusbar { position: absolute; left: 0; right: 0; top: 0; height: var(--sat); z-index: 90; display: none; align-items: center; justify-content: space-between; padding: 6px 30px 0 36px; font-size: 16px; font-weight: 600; pointer-events: none; }
.fake-safe .statusbar { display: flex; }
.statusbar .ind { display: flex; gap: 6px; align-items: center; }
.screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.phone .screen { padding: calc(var(--sat) + 8px) calc(var(--sar)) calc(120px + var(--sab)) calc(var(--sal)); }
.screen[hidden], .docpage[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.docpage[hidden] { display: none !important; }
.wrap { max-width: 980px; margin: 0 auto; }

.p-top { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; }
.p-top .sp { flex: 1; }
.logo-btn { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-left: -4px; transition: transform 160ms var(--ease); }
.logo-btn:active { transform: scale(.9); }
.logo-btn img { width: 26px; height: auto; }
.big-title { margin: 6px 16px 12px; font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.025em; }
.search { display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 16px 6px; padding: 0 12px; border-radius: 12px; background: var(--fill4); color: var(--ink40); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; outline: none; }
.search input::placeholder { color: var(--ink40); }
.sec-head { display: flex; align-items: center; gap: 8px; margin: 22px 16px 10px; }
.sec-head h2 { margin: 0; font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; }
.sec-head .n { font-size: 15px; font-weight: 500; color: var(--ink40); }
.sec-head .r { margin-left: auto; font-size: 15px; font-weight: 500; color: var(--ink40); }
.sec-head .sw { width: 12px; height: 12px; border-radius: 4px; }

/* Doc cards: a live miniature page with the title under it. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 12px; padding: 0 16px; }
.hscroll { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 2px 16px 6px; scroll-padding: 0 16px; scrollbar-width: none; }
.hscroll > * { scroll-snap-align: start; flex: none; width: 142px; }
.dcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: left; transition: transform 220ms var(--ease); }
.dcard:active { transform: scale(.965); }
.paper { position: relative; aspect-ratio: 5 / 4.9; border-radius: 16px; background: var(--paper); box-shadow: var(--docShadow); overflow: hidden; padding: 12px 12px 0; }
.paper::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.paper .band { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hue); opacity: .9; }
.mini { width: 250%; transform: scale(.4); transform-origin: 0 0; pointer-events: none; }
.mini .mt { font-size: 22px; line-height: 27px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; color: var(--ink); }
.mini .blocks { gap: 2px; }
.dcard .ttl { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; padding: 0 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dcard .meta { display: flex; align-items: center; gap: 6px; padding: 0 2px; margin-top: -5px; font-size: 12px; font-weight: 500; color: var(--ink40); white-space: nowrap; overflow: hidden; }
.dcard .meta .star { color: var(--c1-hue); margin-left: auto; }

/* The Today card in Quick access */
.today-card .paper { background: var(--paper); padding: 11px 11px; display: flex; flex-direction: column; gap: 6px; }
.today-card .paper::after { display: none; }
.today-card .tc-h { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.today-card .tc-h span { font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
.today-card .tc-r { display: flex; gap: 6px; align-items: center; font-size: 10.5px; line-height: 13px; font-weight: 500; color: var(--ink85); }
.today-card .tc-r i { width: 10px; height: 10px; border-radius: 3.5px; box-shadow: inset 0 0 0 1.3px var(--ink22); flex: none; }
.today-card .tc-r.over i { box-shadow: inset 0 0 0 1.3px var(--red70); }
.today-card .tc-r span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.empty-star { margin: 0 16px; padding: 16px; border-radius: 16px; background: var(--fill3); color: var(--ink40); font-size: 15px; text-align: center; }

/* Tab bar + plus (glass, like the calendar's) */
.tabbar { position: absolute; left: calc(16px + var(--sal)); bottom: calc(var(--sab) + 14px); z-index: 30; display: flex; padding: 4px; border-radius: 30px; background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(30px); backdrop-filter: saturate(1.6) blur(30px); box-shadow: var(--glassRing), var(--sm); view-transition-name: tabbar; }
.tabbar button { position: relative; z-index: 1; width: 68px; height: 52px; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink85); font-size: 10px; font-weight: 600; transition: color 200ms var(--ease); }
.tabbar button[aria-selected="true"] { color: var(--accent); }
.tabbar button:active svg { transform: scale(.88); }
.tabbar svg { transition: transform 160ms var(--ease); }
.tab-ind { position: absolute; left: 4px; top: 4px; width: 68px; height: 52px; border-radius: 26px; background: var(--fill8); will-change: transform; }
.fab { position: absolute; right: calc(16px + var(--sar)); bottom: calc(var(--sab) + 14px); z-index: 30; width: 60px; height: 60px; border-radius: 30px; background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(30px); backdrop-filter: saturate(1.6) blur(30px); box-shadow: var(--glassRing), var(--sm); display: flex; align-items: center; justify-content: center; view-transition-name: fab; transition: transform 200ms var(--ease); }
.fab span { width: 44px; height: 44px; border-radius: 22px; background: var(--plusDisk); color: var(--plusGlyph); display: flex; align-items: center; justify-content: center; }
.fab:active { transform: scale(.92); }
/* typing in a doc: the keyboard bar sits where the FAB is, so it steps aside */
.fab { transition: transform 200ms var(--ease), opacity 160ms var(--ease); }
body:has([contenteditable="true"]:focus) .fab { opacity: 0; transform: scale(.85); pointer-events: none; }

/* ---------- Doc page ---------- */
.docpage { position: absolute; inset: 0; z-index: 20; background: var(--app); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; view-transition-name: doc-surface; }
.phone .docpage { padding-bottom: calc(120px + var(--sab)); touch-action: pan-y; }
.area-pick, .qc-tpl, .hscroll { touch-action: pan-x pan-y; }
.phone .filters { flex-wrap: nowrap; padding: 6px 16px 2px; margin: 4px 0 0; }
.filters.hscroll > * { width: auto; }
.doc-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: calc(var(--sat) + 8px) 12px 8px; view-transition-name: doc-bar; }
.doc-bar::before { content: ''; position: absolute; inset: 0 0 -16px; background: linear-gradient(var(--app) 55%, transparent); z-index: -1; pointer-events: none; }
.doc-bar .sp { flex: 1; }
.crumb { display: flex; align-items: center; gap: 6px; min-width: 0; height: 36px; padding: 0 12px; border-radius: 18px; font-size: 14px; font-weight: 600; color: var(--ink55); background: var(--glass); -webkit-backdrop-filter: saturate(1.5) blur(24px); backdrop-filter: saturate(1.5) blur(24px); box-shadow: var(--glassRing), var(--pill); white-space: nowrap; overflow: hidden; }
.crumb .sep { color: var(--ink25); }
.crumb span:last-child { overflow: hidden; text-overflow: ellipsis; color: var(--ink85); }
.doc-inner { max-width: 700px; margin: 0 auto; padding: 14px 22px 40px; }
.doc-title { margin: 0 0 14px; font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -.025em; outline: none; view-transition-name: doc-title; width: fit-content; max-width: 100%; }
.doc-body { view-transition-name: doc-body; }

/* Ultimate Brain fields, shown as page properties */
.props { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; margin: 0 0 22px; padding: 10px 14px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.props .k { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--ink40); height: 32px; }
.props .k svg { color: var(--ink25); }
.props .v { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 32px; font-size: 14px; font-weight: 500; color: var(--ink85); }
.props .v .muted { color: var(--ink40); }
/* minimized by default: one summary row; tap to show the full grid (Drew, 2026-11-09) */
.props-head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin: 0 0 18px; padding: 4px 12px 4px 8px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; color: var(--ink55); }
.props-head .chev { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--ink40); flex: none; transition: transform 320ms cubic-bezier(.3,1.3,.5,1); }
.props-head.open .chev { transform: rotate(90deg); }
.props-sum { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.props-sum .chip { flex: none; }
.props-n { color: var(--ink40); overflow: hidden; text-overflow: ellipsis; }
.props-lbl { display: none; }
.props-head.open { margin-bottom: 6px; min-height: 30px; background: none; box-shadow: none; padding-left: 4px; }
.props-head.open .props-lbl { display: inline; }
.props-head.open .props-sum { display: none; }
.props:not(.open) { display: none; }

/* Blocks */
.blocks { display: flex; flex-direction: column; gap: 4px; }
.bl-p { margin: 0; font-size: 17px; line-height: 26px; color: var(--ink85); outline: none; padding: 2px 0; }
.bl-h { margin: 18px 0 4px; font-size: 21px; line-height: 27px; font-weight: 700; letter-spacing: -.015em; outline: none; }
.bl-todo { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; }
.bl-todo .box { margin-top: 2px; }
.bl-todo .bl-text { flex: 0 1 auto; font-size: 17px; line-height: 26px; color: var(--ink85); outline: none; transition: color 220ms var(--ease); }
.bl-todo.done .bl-text { color: var(--ink40); }
/* wrapped to-dos: a real line-through on every line (the drawn ::after sat between the two lines) */
.bl-todo .bl-text.strike { text-decoration: line-through 1.5px; text-decoration-color: transparent; transition: color 220ms var(--ease), text-decoration-color 260ms var(--ease) 80ms; }
.bl-todo .bl-text.strike::after { content: none; }
.bl-todo.done .bl-text.strike { text-decoration-color: color-mix(in srgb, currentColor 80%, transparent); }
.bl-todo .bl-date { margin-left: auto; margin-top: 2px; }
.bl-ul { margin: 2px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.bl-ul li { position: relative; padding-left: 22px; font-size: 17px; line-height: 26px; color: var(--ink85); outline: none; }
.bl-ul li::before { content: ''; position: absolute; left: 6px; top: 11px; width: 6px; height: 6px; border-radius: 3px; background: var(--ink40); }
.bl-toggle { display: flex; flex-direction: column; }
.tg-head { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 17px; line-height: 26px; font-weight: 600; color: var(--ink85); width: 100%; }
.tg-head .chev { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--ink55); transition: transform 320ms cubic-bezier(.3,1.3,.5,1); }
.bl-toggle.open .tg-head .chev { transform: rotate(90deg); }
.tg-body { padding-left: 30px; display: none; }
.bl-toggle.open .tg-body { display: block; }
.bl-img { margin: 12px 0 8px; }
.bl-img .pic { border-radius: 16px; overflow: hidden; box-shadow: var(--docShadow); background: var(--paper); }
.bl-img svg { width: 100%; height: auto; }
.bl-img figcaption { margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--ink40); text-align: center; }
.bl-link { display: flex; align-items: center; gap: 12px; width: 100%; margin: 10px 0 4px; padding: 10px 12px 10px 10px; border-radius: 16px; background: var(--fill3); box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: transform 200ms var(--ease); }
.bl-link:active { transform: scale(.98); }
.lthumb { width: 40px; height: 48px; border-radius: 7px; background: var(--paper); box-shadow: var(--thumbShadow); display: flex; flex-direction: column; gap: 3px; padding: 7px 6px; position: relative; overflow: hidden; flex: none; }
.lthumb i { display: block; height: 2px; border-radius: 1px; background: var(--ink22); }
.lthumb i:first-child { width: 70%; height: 3px; background: var(--ink55); }
.lthumb::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--hue); }
.bl-link b { display: block; font-size: 16px; font-weight: 600; }
.bl-link small { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink40); margin-top: 2px; }
.bl-link .go { margin-left: auto; color: var(--ink25); }
.mini .bl-img .pic { box-shadow: none; border-radius: 12px; }

/* ---------- Tasks ---------- */
.tasks-head { display: flex; align-items: center; gap: 10px; padding: 0 16px; margin: 6px 0 12px; }
.tasks-head .big-title { margin: 0; }
.tasks-head .sp { flex: 1; }
/* the Tasks lists as a strip (Drew picked "T3 C", 2026-11-10 19:17, proposals/tasks-carousel-c2.html): the open list in
   the title style with its count, the next ones trailing right smaller and lighter, six segments under it. js/app.js
   lays them out (ssPlace); one position drives the titles and the segments. The menu (tap the open title) stays.
   The segments sit on top, as high as the margins allow, far from the title (Drew, 2026-11-10 22:00: "Actually, put it on
   top", "But far from the title", "Like margins should be correct but as close to the top as possible"): the strip reaches
   --ss-lift up into the space above the head, so the title, the list and the header's height stay where they were.
   22:13 "It should go where the grey box is" (his drawing, ~20 pt higher, in the dark band above the content, left of the
   status cluster): the bar sits 20 px into the top safe-area inset, never closer than 4 px to the screen's edge:
   y = max(sat - 20px, 4px); 6 px under the screen's top padding edge was sat + 6. */
.scope-strip { --ss-big: 34px; --ss-small: 18px; --ss-n: 20px; --ss-gap: 22px; --ss-pad: 16px; --ss-lift: calc(8px + min(26px, var(--sat) + 2px)); position: relative; flex: 1 1 auto; min-width: 0;
  height: calc(var(--ss-big) * 1.2 + 6px + var(--ss-lift)); margin-top: calc(-1 * var(--ss-lift)); margin-left: calc(-1 * var(--ss-pad)); padding-left: var(--ss-pad); overflow: hidden; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ss-pad), #000 72%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--ss-pad), #000 72%, transparent 100%); }
.ss-i { position: absolute; left: 0; top: var(--ss-lift); display: flex; align-items: baseline; padding: 0; margin: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: var(--ss-big); line-height: 1.2; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; transform-origin: 0 80%; will-change: transform, opacity; -webkit-tap-highlight-color: transparent; }
.ss-i .n { font-size: var(--ss-n); font-weight: 600; letter-spacing: 0; color: var(--ink40); margin-left: 6px; font-variant-numeric: tabular-nums; transform-origin: 0 80%; }
.ss-i .n.red { color: var(--redText); }
.ss-i .n:empty { display: none; }
.ss-i:focus { outline: none; }
.ss-i:focus-visible .ct { text-decoration: underline 2px var(--a70); text-underline-offset: 5px; }
.ss-mini { position: absolute; left: var(--ss-pad); top: 0; display: flex; gap: 3px; pointer-events: none; }
.ss-mini i { display: block; width: 11px; height: 2px; border-radius: 1px; background: var(--ink); opacity: .16; }
.phone .tasks-head { flex-wrap: wrap; row-gap: 8px; } /* All Tasks' Date / Area / Priority goes on its own line under the strip */
.phone .scope-strip { flex: 1 0 calc(100% - 60px); }
.phone .tasks-head .at-seg { order: 2; }
.mac .scope-strip { --ss-big: 22px; --ss-small: 14px; --ss-n: 17px; --ss-gap: 14px; --ss-pad: 10px; }
.pop.scope-pop { width: 250px; padding: 0; }
.pop.scope-pop .opt { height: 48px; gap: 12px; font-size: 16.5px; font-weight: 500; }
.pop.scope-pop .opt.gap { border-top: 6px solid var(--fill4); }
.pop.scope-pop .ck { width: 16px; display: flex; color: var(--accent); flex: none; }
.pop.scope-pop .ic { display: flex; flex: none; }
.pop.scope-pop .l { flex: 1; }
.pop.scope-pop .c { font-size: 14px; font-weight: 600; color: var(--ink40); font-variant-numeric: tabular-nums; }
.sc-inbox { color: #2F80FF; } .sc-today { color: #F2B200; } .sc-upcoming { color: #FF4D4F; } .sc-anytime { color: #14A89A; } .sc-logbook { color: #34C759; } .sc-all { color: var(--ink55); }
.list-host { position: relative; touch-action: pan-y; min-height: 60vh; }
.tlist { padding-bottom: 20px; will-change: transform, opacity; }
.tlist.leaving { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
/* the Tasks lists' group headers (Overdue, Today, Tomorrow, an area, a Logbook day) at the 20 px heading scale of
   Browse and All Tasks (Drew, 2026-11-10: "headers in tasks too small"); one line */
.group { display: flex; align-items: baseline; gap: 8px; margin: 18px 16px 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -.012em; color: var(--ink85); white-space: nowrap; overflow: hidden; }
.mac .group { font-size: 18px; line-height: 23px; }
.group:first-child { margin-top: 6px; }
.group .sub { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink40); overflow: hidden; text-overflow: ellipsis; }
.group.red { color: var(--redText); }
.group .sw { align-self: center; }
.trow-wrap { position: relative; }
.trow { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px 10px 16px; min-height: 48px; position: relative; background: var(--app); }
.trow .box { margin-top: 0; }
.trow .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trow .t-title { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink85); align-self: flex-start; max-width: 100%; transition: color 220ms var(--ease); }
.trow.done .t-title { color: var(--ink40); }
.trow .t-place { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink40); }
.trow .t-place .dot { width: 6px; height: 6px; }
.trow .t-place button { display: flex; align-items: center; gap: 6px; }
.trow .t-place button:hover { color: var(--ink55); }
.trow .t-place .prog { color: var(--ink40); }
.trow .t-date { flex: none; font-size: 13px; line-height: 22px; font-weight: 500; color: var(--ink40); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.trow .t-date.over { color: var(--redText); font-weight: 600; }
.trow .t-date.dl { color: var(--orangeText); }
.trow + .trow::before, .trow-wrap + .trow-wrap > .trow::before { content: ''; position: absolute; left: 50px; right: 0; top: 0; height: 1px; background: var(--line); }
.subs { position: relative; margin-left: 50px; padding-bottom: 4px; }
.subs::before { content: ''; position: absolute; left: -23px; top: 0; bottom: 12px; width: 1.5px; border-radius: 1px; background: var(--line); }
.subs .trow { padding: 6px 16px 6px 0; min-height: 36px; gap: 10px; }
.subs .trow::before { display: none; }
.subs .box { width: 19px; height: 19px; border-radius: 6px; }
.subs .t-title { font-size: 15px; line-height: 19px; }
.tl-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 60px 30px; text-align: center; color: var(--ink40); font-size: 15px; font-weight: 500; }
.tl-empty .ico { width: 52px; height: 52px; border-radius: 16px; background: var(--fill4); display: flex; align-items: center; justify-content: center; color: var(--ink40); }
.tl-empty b { color: var(--ink85); font-size: 17px; }
.flash { animation: flash 1.2s var(--ease); }
@keyframes flash { 0%, 30% { background: var(--a10); } }

/* Calendar stub */
.stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 70vh; padding: 0 40px; text-align: center; color: var(--ink55); font-size: 15px; font-weight: 500; }
.stub .ico { width: 64px; height: 64px; border-radius: 20px; background: var(--sheet); box-shadow: var(--md); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 8px; }
.stub b { color: var(--ink); font-size: 20px; }
.btn { height: 40px; padding: 0 18px; border-radius: 20px; background: var(--ink); color: var(--app); font-size: 15px; font-weight: 600; margin-top: 8px; display: inline-flex; align-items: center; }

/* ---------- Sheets (quick capture, actions, settings): float above the keyboard edge ---------- */
.dim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.18); opacity: 0; will-change: opacity; }
:root[data-scheme="dark"] .dim { background: rgba(0,0,0,.45); }
.sheet { position: fixed; z-index: 61; left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); bottom: calc(var(--sab) + 8px); margin: 0 auto; max-width: 560px; border-radius: 30px; background: var(--sheet); color: var(--ink); box-shadow: var(--glassRing), var(--md); will-change: transform; touch-action: none; display: flex; flex-direction: column; }
.grabber { display: flex; justify-content: center; padding-top: 7px; height: 18px; cursor: grab; }
.grabber span { width: 38px; height: 5px; border-radius: 3px; background: var(--ink22); }
.sheet .sh-body { padding: 4px 14px 14px; }
.sheet h3 { margin: 4px 6px 12px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.srow-list { display: flex; flex-direction: column; border-radius: 16px; background: var(--fill3); overflow: hidden; }
.sr { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px; font-size: 16px; font-weight: 500; color: var(--ink85); width: 100%; text-align: left; position: relative; }
.sr + .sr::before { content: ''; position: absolute; left: 46px; right: 0; top: 0; height: 1px; background: var(--line); }
.sr svg { color: var(--ink55); }
.sr .r { margin-left: auto; color: var(--ink40); font-size: 15px; }
.sr.red, .sr.red svg { color: var(--redText); }
.sr:active { background: var(--fill4); }
.area-pick { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; }
.area-pick .chip { height: 34px; padding: 0 12px; border-radius: 17px; font-size: 14px; }
.area-pick .chip.on { box-shadow: inset 0 0 0 1.5px var(--hue); }
.seg { display: flex; padding: 3px; border-radius: 19px; background: var(--fill4); position: relative; }
.seg button { position: relative; z-index: 1; flex: 1; height: 32px; padding: 0 14px; border-radius: 16px; font-size: 15px; font-weight: 600; color: var(--ink55); white-space: nowrap; transition: color 200ms var(--ease); }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg .knob { position: absolute; top: 3px; left: 3px; height: 32px; border-radius: 16px; background: var(--thumb); box-shadow: var(--xxs); will-change: transform; }
.note-fine { margin: 12px 6px 2px; font-size: 13px; line-height: 18px; color: var(--ink40); font-weight: 500; }

/* Quick capture: the calendar's New To-Do card, with a To-Do / Doc switch. */
.qc { padding: 0 12px 12px; gap: 10px; }
.qc .grabber { margin: 0 -12px; }
.qc-top { display: flex; align-items: center; gap: 8px; }
.qc-top .seg button { height: 28px; padding: 0 12px; font-size: 14px; border-radius: 14px; }
.qc-top .seg .knob { height: 28px; border-radius: 14px; }
.qc-x { margin-left: auto; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink25); }
.qc-place { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px; margin-left: -4px; border-radius: 8px; font-size: 15px; font-weight: 600; width: fit-content; }
.qc-place:active { background: var(--fill4); }
.qc-place .chev { color: var(--ink40); }
.qc-place .tray { color: var(--ink55); }
.qc-field { display: block; width: 100%; min-height: 26px; padding: 0 4px; border: 0; background: transparent; resize: none; font: inherit; font-size: 19px; line-height: 26px; font-weight: 500; color: var(--ink); outline: none; }
.qc-field::placeholder { color: var(--ink25); }
.qc-typed { display: flex; gap: 6px; padding: 0 2px; min-height: 0; }
.qc-typed .chip { background: var(--a12); color: var(--accent); }
.qc-bar { display: flex; align-items: center; gap: 2px; }
.qc-btn { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: 11px; font-size: 15px; font-weight: 500; color: var(--ink40); white-space: nowrap; }
.qc-btn svg { color: var(--ink85); }
.qc-btn.on, .qc-btn.on svg { color: var(--accent); }
.qc-btn:active { background: var(--fill4); }
.qc-btn.ico { width: 38px; padding: 0; justify-content: center; }
.qc-btn.ico span { display: none; }
.mac .qc-btn.ico { width: auto; padding: 0 8px; }
.mac .qc-btn.ico span { display: inline; }
.qc-typed:empty { display: none; }
.qc-create { margin-left: auto; height: 38px; padding: 0 18px; border-radius: 19px; background: var(--accent); color: var(--onAccent); font-size: 15px; font-weight: 600; transition: opacity 150ms var(--ease), transform 150ms var(--ease); }
.qc-create:active { transform: scale(.95); }
.qc-create[disabled] { opacity: .45; }
.qc-tpl { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.qc-tpl .chip { height: 32px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.qc-tpl .chip.on { background: var(--a12); color: var(--accent); }
.qc-pane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--sab) + 92px); z-index: 70; width: min(calc(100% - 32px), 420px); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 18px; background: var(--glass); -webkit-backdrop-filter: saturate(1.5) blur(32px); backdrop-filter: saturate(1.5) blur(32px); box-shadow: var(--glassRing), var(--md); transform: translateX(-50%); }
.toast p { margin: 0; flex: 1; font-size: 15px; font-weight: 500; color: var(--ink85); }
.toast button { height: 34px; padding: 0 14px; border-radius: 12px; background: var(--fill8); color: var(--accent); font-size: 15px; font-weight: 600; }

/* ---------- Mac ---------- */
.mac { position: fixed; inset: 0; overflow: hidden; background: var(--app); font-size: 13px; --side-w: 252px; }
.m-side { position: absolute; left: 8px; top: 10px; bottom: 8px; width: var(--side-w); display: flex; flex-direction: column; padding: 0 4px; will-change: transform, opacity; }
.m-brand { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 6px 0 8px; margin-bottom: 8px; }
.m-brand .logo-btn { width: 28px; height: 28px; margin: 0; border-radius: 8px; }
.m-brand .logo-btn img { width: 22px; }
.m-brand b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.m-brand .sp { flex: 1; }
.icon-btn { width: 28px; height: 28px; border-radius: 8px; color: var(--ink55); display: flex; align-items: center; justify-content: center; flex: none; }
.icon-btn:hover { background: var(--fill4); }
.m-search { display: flex; align-items: center; gap: 7px; height: 32px; margin: 0 4px 10px; padding: 0 10px; border-radius: 9px; background: var(--fill4); color: var(--ink40); font-size: 13px; }
.m-search kbd { margin-left: auto; font: inherit; font-size: 11px; color: var(--ink25); }
.srow { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px 0 8px; border-radius: 8px; color: var(--ink85); font-size: 13.5px; width: 100%; text-align: left; transition: background 120ms var(--ease); }
.srow:hover { background: var(--fill3); }
.srow[aria-current="true"] { background: var(--fill4); color: var(--ink); font-weight: 500; }
.srow svg { color: var(--ink55); }
.srow .l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .n { color: var(--ink40); font-size: 12px; }
.srow .n.red { color: var(--redText); }
.srow .ic { width: 20px; display: flex; align-items: center; justify-content: center; flex: none; }
.srow .ring { width: 12px; height: 12px; border-radius: 6px; border: 2px solid var(--hue); }
.shead { padding: 18px 10px 6px; font-size: 12px; font-weight: 600; color: var(--ink40); }
.m-side .grow { flex: 1; }
.m-side .foot { display: flex; align-items: center; gap: 6px; padding: 6px 4px; }
.m-side .foot .seg { flex: 1; }
.m-side .foot .seg button { height: 26px; font-size: 12px; padding: 0 8px; }
.m-side .foot .seg .knob { height: 26px; }
.m-sheet { position: absolute; left: calc(var(--side-w) + 16px); top: 8px; right: 8px; bottom: 8px; border-radius: 26px; background: var(--sheet); box-shadow: var(--docShadow); overflow: hidden; will-change: transform; }
.mac.collapsed .m-sheet { left: 8px; }
.mac .screen { padding: 0 0 60px; }
.m-head { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 20px; background: linear-gradient(var(--sheet) 70%, transparent); }
.m-head h1 { margin: 0 4px 0 2px; font-size: 22px; line-height: 26px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.m-head .sp { flex: 1; }
.m-plus { width: 34px; height: 34px; border-radius: 10px; background: var(--sheet); box-shadow: var(--pill); display: flex; align-items: center; justify-content: center; flex: none; }
.m-plus span { width: 20px; height: 20px; border-radius: 10px; background: var(--plusDisk); color: var(--plusGlyph); display: flex; align-items: center; justify-content: center; }
.m-plus:active { transform: scale(.94); }
.side-toggle[hidden] { display: none; }
.mac .search { margin: 0; width: 220px; height: 32px; border-radius: 9px; font-size: 13px; }
.mac .search input { font-size: 13px; }
.filters { display: flex; gap: 6px; padding: 0 20px; margin: 0 0 6px; flex-wrap: wrap; }
.filters .chip { height: 28px; padding: 0 11px; border-radius: 14px; font-size: 13px; cursor: pointer; transition: background 150ms var(--ease), color 150ms var(--ease); }
.filters .chip[aria-pressed="true"] { background: var(--ink); color: var(--app); }
.filters .chip[aria-pressed="true"] .dot { box-shadow: 0 0 0 1.5px var(--app); }
.mac .sec-head { margin: 22px 20px 12px; }
.mac .sec-head h2 { font-size: 15px; }
.mac .grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); padding: 0 20px; gap: 20px 16px; }
.mac .hscroll { padding: 2px 20px 6px; }
.mac .hscroll > * { width: 168px; }
.mac .dcard:hover .paper { box-shadow: var(--sm); }
.mac .paper { transition: box-shadow 200ms var(--ease); }
.mac .dcard .ttl { font-size: 13.5px; line-height: 17px; }
.mac .dcard .meta { font-size: 12px; }
.mac .docpage { border-radius: 26px; }
.mac .doc-bar { padding: 14px 16px 8px; }
.mac .doc-bar::before { background: linear-gradient(var(--app) 55%, transparent); }
.mac .docpage { background: var(--sheet); }
.mac .doc-bar::before { background: linear-gradient(var(--sheet) 55%, transparent); }
.mac .doc-inner { padding: 20px 40px 80px; }
.mac .doc-title { font-size: 34px; line-height: 40px; }
.mac .bl-p, .mac .bl-todo .bl-text, .mac .bl-ul li, .mac .tg-head { font-size: 15px; line-height: 24px; }
.mac .bl-ul li::before { top: 9px; }
.mac .bl-h { font-size: 19px; }
.mac .props .k, .mac .props .v { font-size: 13px; }
.mac .tasks-head { padding: 0 20px; height: 64px; margin: 0; position: sticky; top: 0; z-index: 4; background: linear-gradient(var(--sheet) 70%, transparent); }
.mac .tasks-head .big-title { font-size: 22px; line-height: 26px; }
.mac .tlist, .mac .tl-wrap { max-width: 820px; }
.mac .trow { background: var(--sheet); padding-left: 20px; padding-right: 20px; }
.mac .group { margin-left: 20px; margin-right: 20px; }
.mac .trow .t-title { font-size: 14.5px; }
.mac .trow .box { width: 19px; height: 19px; border-radius: 6px; }
.mac .trow + .trow::before, .mac .trow-wrap + .trow-wrap > .trow::before { left: 51px; }
.mac .subs { margin-left: 51px; }
.mac .crumb { background: var(--fill4); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; height: 30px; font-size: 13px; }
.mac .round.glass { width: 30px; height: 30px; background: var(--fill4); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mac .sheet.qc-mac { left: 50%; right: auto; bottom: auto; top: 16vh; width: 500px; margin-left: -250px; border-radius: 20px; background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); padding-top: 12px; }
.mac .sheet.qc-mac .grabber { display: none; }
.mac .qc-field { font-size: 16px; line-height: 23px; }
.mac .qc-btn { height: 30px; font-size: 13px; padding: 0 8px; border-radius: 8px; }
.mac .qc-create { height: 30px; font-size: 13px; padding: 0 14px; border-radius: 15px; }
.mac .qc-place { font-size: 13px; height: 26px; }
.mac .toast { bottom: 24px; }
.mac .sheet:not(.qc-mac) { left: auto; right: auto; left: 50%; width: 420px; margin-left: -210px; bottom: auto; top: 14vh; border-radius: 22px; }
.mac .sheet:not(.qc-mac) .grabber { visibility: hidden; height: 10px; }

/* ---------- iPhone Duo ---------- */
/* Fake insets measured from Drew's screenshots (3x): closed = 466x678 pt with the island/clock strip down the
   RIGHT side; open = 669x951 pt. Only for screenshots/tests; on the device the real env() values apply. */
:root.fake-duo-closed { --sat: 0px; --sab: 34px; --sar: 84px; } /* if iOS ever reports the 84 pt strip as an inset (27.1 style) */
:root.fake-duo-closed-web { --sat: 0px; --sab: 34px; } /* what iOS 27.2 gives web pages: a 382 pt page, no side inset */
:root.fake-duo-open { --sat: 82px; --sab: 37px; }
.p-title { display: none; }
/* side insets: the doc page and toasts stay clear of the closed Duo's right strip */
.phone .docpage { padding-left: var(--sal); padding-right: var(--sar); }
.phone .toast { left: calc(50% + (var(--sal) - var(--sar)) / 2); width: min(calc(100% - 32px - var(--sal) - var(--sar)), 420px); }
/* closed Duo / short phones: the title moves up into the top row (~55 px back for content) */
@media (max-height: 740px) {
  .phone .p-top { height: 48px; }
  .phone .p-title { display: block; margin-left: 4px; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.025em; }
  .phone .p-head .big-title { display: none; }
  .phone .p-head .search { height: 38px; margin-top: 2px; }
  .phone .sec-head { margin-top: 18px; }
  .phone .tasks-head { margin-top: 2px; }
  .phone .tasks-head .big-title { font-size: 28px; line-height: 34px; }
  .phone .scope-strip { --ss-big: 28px; --ss-small: 16px; --ss-gap: 16px; --ss-lift: calc(4px + min(26px, var(--sat) + 2px)); } /* the head's top margin is 2 px here */
}
/* open Duo (wide phone shell): title and search share a row, card rows become grids */
@media (min-width: 600px) {
  .phone .p-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 10px; }
  .phone .p-head .big-title { margin: 0 0 0 16px; flex: none; }
  .phone .p-head .search { flex: 0 1 340px; margin: 0 16px 0 auto; }
  .phone .filters { flex-wrap: wrap; }
  .phone #scr-home .hscroll:not(.filters):not(.qa) { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 12px; overflow: visible; scroll-snap-type: none; }
  .phone #scr-home .hscroll:not(.filters):not(.qa) > * { width: auto; }
  /* Quick access stays one row: exactly 4 per view (same width as the grid columns), the rest scroll in */
  .phone #scr-home .hscroll.qa { padding-right: 12px; } /* = the gap, so the 5th card doesn't peek as a sliver */
  .phone #scr-home .hscroll.qa > * { width: calc((100% - 36px) / 4); }
  .phone .doc-inner { padding-left: 32px; padding-right: 32px; }
}
/* Side rail (closed Duo), following Apple's cover-screen layout: status area at the top of the strip, then
   Back / the screen's actions (.rail-top), a spacer, and the tabs + New bottom-aligned.
   Tune here: --rail-btn = tab button height (= indicator step, JS measures it), --rail-btn-w = tab button width,
   --rail-gap = space between pill and +, --rail-top-clear = where the action group starts (status area is
   ~174 pt and grows with Live Activities), --rail-act = action button size, --rail-bottom = distance from the bottom. */
:root.side-rail {
  --rail-btn: 56px; --rail-btn-w: 60px; --rail-gap: 12px; --rail-top-clear: 186px; --rail-act: 44px; --rail-bottom: calc(var(--sab) + 14px);
  --rail-strip: var(--sar);
}
.rail-top { display: none; }
.side-rail .phone .rail-top { display: flex; flex-direction: column; align-items: center; gap: 8px; position: absolute; z-index: 30;
  top: var(--rail-top-clear); right: calc((var(--rail-strip) - var(--rail-act)) / 2); }
.side-rail.rail-left .phone .rail-top { right: auto; left: calc((var(--rail-strip) - var(--rail-act)) / 2); }
.side-rail .phone .rail-top .round { width: var(--rail-act); height: var(--rail-act); border-radius: calc(var(--rail-act) / 2); }
/* those buttons moved into the rail, so the content headers drop them (the breadcrumb, logo and title stay) */
.side-rail .phone .doc-bar .round, .side-rail .phone .p-top .round, .side-rail .phone .tasks-head .round { display: none; }
/* touch bridge (iOS 27.2 full-screen strip): pressed state for buttons tapped through the bridge */
.bridge-press { transform: scale(.9); opacity: .78; transition: transform 90ms var(--ease), opacity 90ms var(--ease); }
html.cover-strip, html.cover-strip body { overflow-x: hidden; }
/* ?sim=duo27.2 with the strip workaround OFF (the v9 default): box the page to 382 pt like the device does;
   the transform makes body the containing block for the fixed-position shell, sheets and toasts */
html.sim:not(.cover-strip) body { position: fixed; left: 0; top: 0; width: 382px; height: 100%; transform: translateZ(0); overflow: hidden; }
/* ?debug=1 badge */
#dbg { position: fixed; z-index: 500; left: calc(var(--sal) + 6px); top: calc(var(--sat) + 6px); max-width: calc(100% - var(--sal) - var(--sar) - 12px);
  padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.72); color: #9f9; font: 10.5px/1.35 ui-monospace, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; }
:root.side-rail.rail-left { --rail-strip: var(--sal); }
.side-rail .phone .tabbar { flex-direction: column; left: auto; right: calc((var(--rail-strip) - var(--rail-btn-w) - 8px) / 2);
  bottom: calc(var(--rail-bottom) + 60px + var(--rail-gap)); border-radius: calc(var(--rail-btn-w) / 2 + 4px);
  max-height: calc(100% - var(--rail-top-clear) - var(--rail-bottom) - 60px - var(--rail-gap)); }
.side-rail .phone .tabbar button { width: var(--rail-btn-w); height: var(--rail-btn); min-height: 44px; border-radius: calc(var(--rail-btn-w) / 2); }
.side-rail .phone .tab-ind { width: var(--rail-btn-w); height: var(--rail-btn); border-radius: calc(var(--rail-btn-w) / 2); }
.side-rail .phone .fab { right: calc((var(--rail-strip) - 60px) / 2); bottom: var(--rail-bottom); }
.side-rail.rail-left .phone .tabbar { right: auto; left: calc((var(--rail-strip) - var(--rail-btn-w) - 8px) / 2); }
.side-rail.rail-left .phone .fab { right: auto; left: calc((var(--rail-strip) - 60px) / 2); }
/* nothing floats over the content any more, so drop the 120 px clearance */
.side-rail .phone .screen { padding-bottom: calc(var(--sab) + 24px); }
.side-rail .phone .docpage { padding-bottom: calc(var(--sab) + 24px); }
.side-rail .phone .toast { bottom: calc(var(--sab) + 16px); }

/* Mac shell: respect safe areas (the open Duo turned sideways uses this shell) */
.m-side { top: calc(10px + var(--sat)); left: calc(8px + var(--sal)); bottom: calc(8px + var(--sab)); }
.m-sheet { top: calc(8px + var(--sat)); right: calc(8px + var(--sar)); bottom: calc(8px + var(--sab)); left: calc(var(--side-w) + 16px + var(--sal)); }
.mac.collapsed .m-sheet { left: calc(8px + var(--sal)); }
/* touch-sized controls on the sidebar shell */
.touch .mac { --side-w: 240px; font-size: 15px; }
.touch .m-side { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.touch .m-side > * { flex-shrink: 0; } /* scroll the sidebar instead of squashing its rows */
.touch .m-brand { height: 44px; }
.touch .m-brand b { font-size: 17px; }
.touch .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
.touch .m-search { height: 40px; font-size: 16px; border-radius: 11px; }
.touch .m-search kbd { display: none; }
.touch .srow { height: 44px; font-size: 16px; gap: 11px; border-radius: 11px; }
.touch .srow .n { font-size: 14px; }
.touch .shead { font-size: 13px; padding: 20px 10px 6px; }
.touch .m-side .foot .seg button { height: 34px; font-size: 14px; }
.touch .m-side .foot .seg .knob { height: 34px; }
.touch .m-head { height: 72px; }
.touch .m-head h1 { font-size: 26px; line-height: 32px; }
.touch .m-plus { width: 40px; height: 40px; border-radius: 12px; }
.touch .m-plus span { width: 24px; height: 24px; border-radius: 12px; }
.touch .mac .search { height: 40px; width: 200px; border-radius: 11px; font-size: 16px; }
.touch .mac .search input { font-size: 16px; }
.touch .filters .chip { height: 34px; padding: 0 14px; border-radius: 17px; font-size: 15px; }
.touch .mac .sec-head h2 { font-size: 19px; }
.touch .mac .dcard .ttl { font-size: 15px; line-height: 19px; }
.touch .mac .dcard .meta { font-size: 13px; }
.touch .mac .bl-p, .touch .mac .bl-todo .bl-text, .touch .mac .bl-ul li, .touch .mac .tg-head { font-size: 17px; line-height: 26px; }
.touch .mac .bl-ul li::before { top: 10px; }
.touch .mac .props .k, .touch .mac .props .v { font-size: 15px; }
.touch .mac .crumb { height: 36px; font-size: 15px; }
.touch .mac .round.glass { width: 36px; height: 36px; }
.touch .mac .tasks-head { height: 72px; }
.touch .mac .tasks-head .big-title { font-size: 26px; line-height: 32px; }
.touch .mac .trow { min-height: 52px; }
.touch .mac .trow .t-title { font-size: 17px; }
.touch .mac .trow .box { width: 22px; height: 22px; border-radius: 7px; }

/* ---------- View transitions: card -> page morph ----------
   Timings 2026-11-09 ("animations are super slow"): the page takes no taps until every part has ended, so the longest
   part sets the wait. Open was 510 ms (body rise 90 + 420), close 500 ms (tab bar 80 + 420); now both end by ~320 ms. */
::view-transition-group(*) { animation-duration: var(--vt-dur, 320ms); animation-timing-function: var(--vt-ease, cubic-bezier(.32,.72,0,1)); }
::view-transition-image-pair(doc-surface) { overflow: hidden; animation: vt-radius var(--vt-dur, 320ms) var(--vt-ease, ease) both; }
::view-transition-old(doc-surface), ::view-transition-new(doc-surface) { width: 100%; height: 100%; object-fit: fill; }
html[data-vt="open"]::view-transition-old(doc-surface) { animation: vt-out 120ms ease both; }
html[data-vt="open"]::view-transition-new(doc-surface) { animation: vt-in 150ms ease both; }
html[data-vt="close"]::view-transition-old(doc-surface) { animation: vt-out 170ms ease 30ms both; }
html[data-vt="close"]::view-transition-new(doc-surface) { animation: vt-in 120ms ease both; }
::view-transition-old(doc-title), ::view-transition-new(doc-title) { height: 100%; width: auto; object-fit: contain; object-position: left top; }
html[data-vt="open"]::view-transition-new(doc-body) { animation: vt-rise 280ms cubic-bezier(.2,.8,.2,1) 40ms both; }
html[data-vt="close"]::view-transition-old(doc-body) { animation: vt-out 100ms ease both; }
html[data-vt="open"]::view-transition-new(doc-bar) { animation: vt-in 180ms ease 60ms both; }
html[data-vt="close"]::view-transition-old(doc-bar) { animation: vt-out 90ms ease both; }
html[data-vt="open"]::view-transition-old(tabbar) { animation: vt-drop 220ms cubic-bezier(.4,0,1,1) both; }
html[data-vt="close"] .tabbar { view-transition-name: none; } /* closeDoc animates the live tab bar instead */
html[data-vt="open"]::view-transition-old(root), html[data-vt="open"]::view-transition-new(root),
html[data-vt="close"]::view-transition-old(root), html[data-vt="close"]::view-transition-new(root) { animation: none; }
@keyframes vt-radius { from { border-radius: var(--vt-r-from, 16px); } to { border-radius: var(--vt-r-to, 0px); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@keyframes vt-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes vt-drop { to { opacity: 0; transform: translateY(90px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
:root.no-motion *, :root.no-motion *::before, :root.no-motion *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-delay: 0ms !important; }
.qc-pane .qc-bar { margin-top: auto; }

/* ---------- v11 fs: "Proton-style" full width (flag, default off). The page spans the closed Duo's status column;
   JS sets --sar: 84px so content stays in 0..382 and the rail stands in the strip. ---------- */
html.fs-under.side-rail { --rail-top-clear: 232px; } /* below the island / clock / Wi-Fi band, Live Activities included */
/* until a real click in the strip has been seen, keep the header buttons (Settings!) in the 382 area too */
html.fs-unconfirmed.side-rail .phone .doc-bar .round, html.fs-unconfirmed.side-rail .phone .p-top .round, html.fs-unconfirmed.side-rail .phone .tasks-head .round { display: flex; }
#fs-check { position: fixed; z-index: 510; bottom: calc(var(--sab) + 16px); left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); padding: 12px 14px; border-radius: 16px;
  background: var(--sheet); color: var(--ink); box-shadow: var(--glassRing), var(--md); font-size: 14px; line-height: 1.35; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
#fs-check i { font-style: normal; font-weight: 700; }
/* ?sim=duo27.2-fs: a fake status column drawn over the page, no hit-testing (like iOS's) */
#sim-status { position: fixed; right: 0; top: 0; width: 84px; height: 236px; z-index: 2147483646; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-top: 20px; color: #fff; mix-blend-mode: difference; font: 600 20px/1 -apple-system, system-ui, sans-serif; }
#sim-status i { width: 54px; height: 110px; border-radius: 27px; background: #fff; }
#sim-status s { text-decoration: none; font-size: 12px; }

/* ---------- v14: native shell (html.in-shell: UA "ergo-shell/1", set in index.html <head> and by the shell's bridge) ----------
   On the closed Duo the shell's WKWebView is the full 466 pt and iOS floats the strip over it: the status band, then the
   Liquid Glass toolbar (+, ⋯) and the tab bar, all native. Like Proton, the page runs edge to edge UNDER the strip:
   backgrounds, carousels, chips and row lines extend to 466; text and tap targets stay clear by env(safe-area-inset-right)
   (= 84 on the cover, 0 where iOS reports no strip). The web tab bar, + and rail are replaced by the native ones. */
html.in-shell .phone .tabbar, html.in-shell .phone .fab, html.in-shell .phone .rail-top { display: none !important; }
/* carousels + area chips: bleed under the strip; the end padding lets the last card scroll out from under it */
html.in-shell .phone .hscroll { margin-right: calc(-1 * var(--sar)); padding-right: calc(16px + var(--sar)); scroll-padding-right: calc(16px + var(--sar)); }
html.in-shell .phone .filters.hscroll { padding-right: calc(20px + var(--sar)); }
/* task rows: row background + separator run to the edge, the row's text and date stay in the 382 */
html.in-shell .phone .trow { margin-right: calc(-1 * var(--sar)); padding-right: calc(16px + var(--sar)); }
html.in-shell .phone .subs .trow { padding-right: calc(16px + var(--sar)); }
/* no web tab bar at the bottom in the shell (it is in the strip), so far less bottom padding is needed */
html.in-shell .phone .screen { padding-bottom: calc(40px + var(--sab)); }
html.in-shell .phone .group { margin-right: calc(-1 * var(--sar)); padding-right: calc(16px + var(--sar)); }

/* ---- doc properties, edit mode C (Drew, 2026-11-09 19:37 "Build"): ⋯ → Edit properties; no hold, no jiggle (Drew, 2026-11-10 18:44 "No more jiggling") ---- */
.props { position: relative; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* a hold never selects text */
.props-wrap { display: contents; } /* only a handle for redraws: the head, the rows and the hint lay out as before */
.props.editing .k { cursor: pointer; }
.props.editing .v > .chip, .props.editing .v > .muted { position: relative; cursor: pointer; }
.props.editing .v > .chip.rm::after { content: '–'; position: absolute; top: -7px; left: -7px; width: 17px; height: 17px; border-radius: 9px;
  background: var(--ink55); color: var(--app); font: 800 13px/17px -apple-system, system-ui; text-align: center; }
.props.editing .v > .chip:not(.rm):not(.add) { box-shadow: inset 0 0 0 1px var(--a24); }
.chip.none { color: var(--ink40); }
.edit-done { position: absolute; top: 8px; right: 10px; z-index: 2; border: 0; border-radius: 999px; padding: 5px 13px; font: 700 13px -apple-system, system-ui; background: var(--accent); color: #fff; }
.add-prop { grid-column: 1 / -1; justify-self: start; border: 0; background: none; color: var(--accent); font: 600 14px -apple-system, system-ui; padding: 6px 0 2px; }

/* pickers: small glass popovers by the chip (on <body>, above sheets and toasts) */
.pop-catch { position: fixed; inset: 0; z-index: 80; }
.pop { position: fixed; z-index: 81; width: 280px; max-height: calc(100% - 20px); overflow: auto; border-radius: 16px; color: var(--ink);
  background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: var(--glassRing), 0 18px 50px rgba(0,0,0,.4); }
.pop .hd { padding: 10px 14px 6px; font-size: 12.5px; font-weight: 700; color: var(--ink55); text-transform: uppercase; letter-spacing: .04em; }
.pop .opt, .tmenu .ti { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; cursor: pointer; font-size: 15.5px; color: var(--ink); }
.pop .opt + .opt, .tmenu .ti + .ti { border-top: 1px solid var(--line); }
.pop .opt:active, .tmenu .ti:active { background: var(--fill4); }
.pop .opt .l, .tmenu .ti .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop .opt .r { margin-left: auto; color: var(--accent); font-weight: 700; }
.pop .opt .sub { margin-left: auto; font-size: 12.5px; color: var(--ink40); white-space: nowrap; }
.pop .opt .sub + .r { margin-left: 8px; }
.pop .opt.add { color: var(--accent); font-weight: 600; }
.pop .opt.muted, .tmenu .ti.muted { color: var(--ink40); cursor: default; }
.pop .opts.tall { max-height: 230px; overflow: auto; }
.pop .search, .pop .text, .tmenu .search { display: block; margin: 4px 12px 8px; width: calc(100% - 24px); box-sizing: border-box; border: 0; border-radius: 10px; padding: 8px 10px;
  font: 400 16px -apple-system, system-ui; background: var(--fill4); color: var(--ink); outline: none; } /* 16 px: iOS doesn't zoom in on focus */
.cal { padding: 4px 10px 10px; }
.cal .m { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14.5px; margin: 2px 2px 6px; color: var(--ink); }
.cal .m button { all: unset; cursor: pointer; width: 34px; height: 30px; text-align: center; font-size: 22px; line-height: 28px; color: var(--accent); border-radius: 8px; }
.cal .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 13.5px; color: var(--ink); }
.cal .g b { color: var(--ink40); font-weight: 600; font-size: 11px; padding: 2px 0; }
.cal .g button { all: unset; padding: 7px 0; border-radius: 9px; cursor: pointer; }
.cal .g button.today { color: var(--accent); font-weight: 700; }
.cal .g button.on { background: var(--accent); color: #fff; font-weight: 700; }

/* ---- to-do long-press menu 1A: the to-do lifts above a blur, the menu opens under it ---- */
.trow.pressing { transform: scale(.97); background: var(--fill4); border-radius: 12px; transition: transform 150ms ease, background 150ms; }
.tm-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.28); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
.tm-lift { position: fixed; z-index: 81; border-radius: 14px; overflow: hidden; background: var(--app); box-shadow: 0 12px 40px rgba(0,0,0,.35); pointer-events: none; }
.tm-lift .trow { background: transparent; }
.tmenu { position: fixed; z-index: 82; width: min(300px, calc(100% - 20px)); max-height: calc(100% - 24px); overflow: auto; border-radius: 16px; color: var(--ink);
  background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: var(--glassRing), 0 18px 50px rgba(0,0,0,.35); }
.tmenu .sep { height: 7px; background: var(--fill4); }
.tmenu .ic { width: 20px; display: flex; align-items: center; justify-content: center; color: var(--ink55); flex: none; }
.tmenu .ic .sw { width: 9px; height: 9px; border-radius: 3px; }
.tmenu .r { margin-left: auto; padding-left: 8px; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink40); font-size: 14px; }
.tmenu .r.on { color: var(--accent); font-weight: 700; }
.tmenu .red, .tmenu .red .ic { color: var(--redText); }
.tmenu .back .l { font-weight: 600; }
.tmenu .opts { max-height: 300px; overflow: auto; }
.prio { width: 8px; height: 8px; border-radius: 4px; flex: none; align-self: center; }
.prio.p1 { background: #8fb3ff; } .prio.p2 { background: #f5b44a; } .prio.p3 { background: #ff6b5f; }
@media (prefers-reduced-motion: reduce) {
  .trow.pressing { transform: none; }
}

/* ---- Kind, Types and tags (Drew, 2026-11-09 22:55 "Yes to all"; spec: proposals/kind.html, tags.html screen 1) ---- */
/* Kind: a filled badge in the kind's colour with its icon; Video: a red corner badge with a white play */
.chip.kind { --k: var(--accent); position: relative; background: color-mix(in srgb, var(--k) 17%, transparent); color: var(--k); font-weight: 650; gap: 5px; padding: 0 8px 0 7px; }
.chip.kind.vonly { --k: #FF4D4F; gap: 4px; background: rgba(255,59,48,.15); }
.chip.kind.vid:not(.vonly) { margin-right: 4px; }
.vm1 { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 8px; background: #FF3B30; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--app); padding-left: 1px; box-sizing: border-box; }
.vm1.solo { position: static; width: 18px; height: 18px; border-radius: 9px; box-shadow: none; }
/* icon-only chips in the closed row (Kind and Status); the name is in aria-label, title and a hold */
.chip.ico { padding: 0 5px; min-width: 26px; justify-content: center; gap: 1px; }
.chip.status.done { color: #34c759; } .chip.status.done svg { flex: none; }
.chip.status.done:not(.ico) { color: var(--ink85); } .chip.status.done:not(.ico) svg { color: #34c759; margin: 0 -2px; }
.props-sum { padding: 6px 2px 6px 0; margin: -6px 0; } /* room for the video corner badge */
.props-n .more { color: var(--ink40); margin-left: 4px; font-weight: 600; }
.chip.kprio { color: var(--orangeText); background: var(--orange14); font-weight: 600; }
.chip.kprio.p1 { color: var(--ink55); background: var(--fill4); }
.chip.daily { color: var(--ink85); gap: 5px; }
.chip.area.ro { opacity: .85; }
.props .k { white-space: nowrap; }
.props .v .sep { color: var(--ink25); margin: 0 -2px; }
.props.editing .v > .chip.kind:not(.rm) { box-shadow: inset 0 0 0 1px var(--a24); }
/* tags: the leaf with its parent faint; the row is one line, then +N */
.chip.tag .par { color: var(--ink40); margin-right: -6px; }
.props .v.tl { flex-wrap: nowrap; min-width: 0; } /* fitTags hides what does not fit; nothing clips the minus badges */
.props .v.tl > .chip { flex: none; }
.chip.moretags { color: var(--ink55); font-weight: 650; cursor: pointer; }
.chip[hidden] { display: none !important; }
/* meta lines: Kind as icon + word */
.kl { color: var(--k, var(--accent)); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.kl .pv { color: #FF4D4F; display: inline-flex; margin-left: 1px; }
.dcard .meta .msep { margin: 0 4px 0 3px; color: var(--ink25); }
/* the name of an icon (hold it) */
#ergo-tip { position: fixed; z-index: 90; padding: 6px 10px; border-radius: 10px; background: var(--ink); color: var(--app); font: 600 13px -apple-system, system-ui; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, -100%); opacity: 0; transition: opacity 120ms; }
#ergo-tip.on { opacity: 1; }
/* Kind picker (B, a list like the others) */
.pop .opt .ki, .ts-row .ki { --k: var(--accent); width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--k) 17%, transparent); color: var(--k); flex: none; }
.pop .opt .ki.vid, .ts-row .ki.vid { background: var(--red12); color: var(--redText); }
.pop .opt.vrow { border-top: 6px solid var(--line) !important; }
.switch { margin-left: auto; width: 44px; height: 26px; border-radius: 13px; background: var(--fill8); position: relative; flex: none; transition: background var(--doc-motion-ms) var(--doc-motion-ease); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 11px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--doc-motion-ms) var(--doc-motion-ease); }
.switch.on { background: #34c759; } .switch.on::after { transform: translateX(18px); }
/* the tag sheet */
.tags-sheet .ts { padding-bottom: 6px; }
.ts-head { display: flex; align-items: center; margin: 2px 4px 8px; } .ts-head h3 { flex: 1; margin: 0; font-size: 17px; }
.ts-done { color: var(--accent); font-weight: 600; font-size: 15px; padding: 4px 6px; }
.ts .search { display: block; width: 100%; box-sizing: border-box; border: 0; border-radius: 10px; padding: 9px 11px; font: 400 16px -apple-system, system-ui; background: var(--fill4); color: var(--ink); outline: none; margin-bottom: 4px; }
.ts-list { max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; }
.ts-sec { padding: 12px 10px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink40); }
.ts-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 4px; }
.ts-chips .chip { cursor: pointer; } .ts-chips .chip.hit .x { margin-left: 4px; color: var(--ink40); font-weight: 700; }
.ts-empty { padding: 10px; color: var(--ink40); font-size: 14px; }
.ts-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 10px; font-size: 15.5px; color: var(--ink); cursor: pointer; }
.ts-row + .ts-row { box-shadow: inset 0 1px 0 var(--line); }
.ts-row:active { background: var(--fill4); }
.ts-row .tw { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--ink40); flex: none; transition: transform var(--doc-motion-ms) var(--doc-motion-ease); }
.ts-row .tw.open { transform: rotate(90deg); }
.ts-row .rp { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ts-row .rp > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-row .par { color: var(--ink40); }
.ts-row .via { font-size: 12px; color: var(--ink40); margin-top: 1px; } .ts-row .via b { color: var(--accent); font-weight: 600; }
.ts-row .n { font-size: 13px; color: var(--ink40); font-variant-numeric: tabular-nums; }
.ts-row .ck { width: 18px; color: var(--accent); font-weight: 800; text-align: right; flex: none; }
.ts-crow { display: flex; align-items: center; gap: 8px; box-shadow: inset 0 1px 0 var(--line); padding-right: 10px; }
.ts-create { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 15.5px; font-weight: 600; min-height: 44px; padding: 6px 10px; cursor: pointer; }
.ts-list > .ts-create { box-shadow: inset 0 1px 0 var(--line); width: 100%; }
.ts-create .plus { width: 22px; height: 22px; border-radius: 11px; background: var(--a12); display: flex; align-items: center; justify-content: center; flex: none; }
.ts-create span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ts-create .par { color: var(--ink40); font-weight: 500; }
.ts-under { flex: none; font-size: 13px; font-weight: 600; color: var(--ink55); background: var(--fill4); border-radius: 8px; padding: 6px 9px; } .ts-under b { color: var(--ink85); }
.trow .main button.t-title { text-align: left; }
/* tags are outlined # chips (Kind is the filled badge); the parent path faint before the leaf */
.chip.tag { background: transparent; box-shadow: inset 0 0 0 1px var(--ink12); color: var(--ink85); }
.chip.tag .par { color: var(--ink40); }
.props.editing .v > .chip.tag { box-shadow: inset 0 0 0 1px var(--ink12); }
.kfilters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px 0 12px; padding: 0 2px; }
.kfilters .chip { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 13.5px; cursor: pointer; gap: 5px; flex: none; }
.kfilters .chip i { font-style: normal; color: var(--ink40); font-weight: 500; }
.kfilters .chip[aria-pressed="true"] { background: var(--ink); color: var(--app); } .kfilters .chip[aria-pressed="true"] i { color: var(--app); opacity: .6; }
/* >>> all-tasks (ergo-tasksbuild) ---------- All Tasks, variant B (Drew, 2026-11-10 23:16) ----------
   The shared row rule (proposals/ds.css): one left edge at 16 px; checkbox, header icon, swatch and "N more" count centred
   in one 28 px lead column; titles, meta, header labels at 56 px; a nested step indents one lead column (28 px). Cards sit
   10 px in and the rows inside keep the 16 / 56 edges. Section heads stick under the status bar, list heads under them. */
.at { --at-sh: 50px; --at-top: var(--sat); --at-p1: #71B2FF; --at-p2: #FBA441; --at-p3: #FF5A5D; padding-bottom: 6px; }
.mac .at { --at-top: 64px; }
/* phone: the screen is padded (status bar + 8 px) and sticky offsets count from inside that padding, so the heads stick
   at top 0 = just under the status bar; the mask covers the padding above them. (--at-top: var(--sat) stuck them a second
   inset lower, 172 px on the open Duo, with a black band between the status bar and the head; 2026-11-10 19:34.) */
.phone .at { --at-top: 0px; --at-mask: calc(var(--sat) + 8px); }
.at-seg { display: inline-flex; flex: none; padding: 2px; border-radius: 10px; background: var(--fill4); }
.at-seg[hidden] { display: none; }
.at-seg button { padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink55); cursor: pointer; transition: background var(--doc-motion-ms), color var(--doc-motion-ms); }
.at-seg button[aria-pressed="true"] { background: var(--thumb); color: var(--ink); box-shadow: var(--thumbShadow); }
.at-lead { flex: none; width: 28px; display: flex; align-items: center; justify-content: center; color: var(--ink55); }
.at-sec { position: relative; overflow: visible clip; }
/* overflow-y: clip keeps each head's status-bar mask (::before, --at-top tall) inside its own section: it only covers this
   section's rows once they scroll up under the status bar, never the card / title / switch above an unstuck head (the open
   Duo's 82 px inset painted black bars over the list, Drew 2026-11-10 19:34-19:35 "there is a black bar"). Clip is not a
   scroll container, so the heads still stick to the screen. */
.at-sec + .at-sec { margin-top: 6px; }
.at-sh { position: sticky; top: var(--at-top); z-index: 3; height: var(--at-sh); display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--app); border-bottom: 1px solid var(--line); cursor: pointer; -webkit-user-select: none; user-select: none; }
.at-sh::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--at-mask, var(--at-top)); background: var(--app); }
.mac .at-sh::before { display: none; }
.mac .at-sh { background: var(--sheet); }
/* group headers at Browse's section scale, 20 px (Drew, 2026-11-10: All Tasks group headers "too small" too); the list
   cards under them keep the 16 px card scale, like Home's */
.at-sh b { font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -.012em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mac .at-sh b { font-size: 18px; line-height: 23px; }
.at-sh .n { font-size: 15px; font-weight: 600; color: var(--ink40); margin-left: -6px; }
.at-sh .aside { margin-left: auto; font-size: 13px; color: var(--ink40); white-space: nowrap; }
.at-sh .sw { width: 10px; height: 10px; border-radius: 3.5px; }
.at-sh .sw.pr1 { background: var(--at-p1); } .at-sh .sw.pr2 { background: var(--at-p2); } .at-sh .sw.pr3 { background: var(--at-p3); }
.at-sec.red > .at-sh b, .at-sec.red > .at-sh .at-lead { color: var(--redText); } .at-sec.red > .at-sh .n { color: var(--red70); }
.at-sec.acc > .at-sh b, .at-sec.acc > .at-sh .at-lead { color: var(--accent); }
.at-chev { flex: none; display: flex; color: var(--ink40); margin-left: -4px; transition: transform var(--doc-motion-ms) var(--doc-motion-ease); }
.shut > .at-chev, .shut > .at-fold { transform: rotate(-90deg); }
.at-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; transition: grid-template-rows var(--doc-motion-ms) var(--doc-motion-ease); }
.at-body > div { min-height: 0; overflow: clip; }
.shut + .at-body { grid-template-rows: 0fr; }
.at-sec > .at-body > div::after { content: ''; display: block; height: 10px; }
/* a list card: Craft-like head (Kind icon, bold title, count, ring, tags, ⋯, pin, fold) */
.at-card { margin: 10px 10px 0; border-radius: 16px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.at-ch { position: sticky; top: calc(var(--at-top) + var(--at-sh)); z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 6px 6px 6px; background: var(--sheet); border-radius: 16px 16px 0 0; cursor: pointer; -webkit-user-select: none; user-select: none; }
.at-ch.shut { border-radius: 16px; padding-bottom: 10px; }
.at-ch .k { color: var(--hue); }
.at-ch b { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.at-ch.plain b { font-size: 14px; color: var(--ink55); }
.at-ch .sw { width: 10px; height: 10px; border-radius: 3.5px; }
.at-ch .n, .at-ch .at-ring, .at-ch .tg, .at-ch .aside { margin-left: -6px; }
.at-ch .n, .at-ch .aside { font-size: 13px; color: var(--ink40); font-weight: 600; flex: none; }
.at-ch .tg { font-size: 12.5px; color: var(--ink40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.at-ch .at-ring { flex: none; }
.at-ch .sp { flex: 1; min-width: 0; }
.at-ch .at-ib + .at-ib { margin-left: -10px; }
.at-ib { flex: none; width: 30px; height: 30px; border-radius: 9px; color: var(--ink40); display: grid; place-items: center; cursor: pointer; transition: transform var(--doc-motion-ms) var(--doc-motion-ease), background 150ms; }
.at-ib:active { background: var(--fill4); }
.at-ib.on { color: var(--accent); }
.at-card .at-body > div::after { content: ''; display: block; height: 6px; }
.at-card.bare { padding-top: 4px; }
/* rows: checkbox (ring = priority) · title (≤ 2 lines) · one meta line; roomy, no dividers inside a card */
.at-card .trow-wrap > .trow { background: var(--sheet); padding: 9px 14px 9px 6px; min-height: 52px; border-radius: 12px; }
.at-card .trow-wrap + .trow-wrap > .trow::before { display: none; }
.trow.atr > .box { margin: 0 3px; }
.trow.atr > .box.pr1 { box-shadow: inset 0 0 0 2px var(--at-p1, #71B2FF); }
.trow.atr > .box.pr2 { box-shadow: inset 0 0 0 2px var(--at-p2, #FBA441); }
.trow.atr > .box.pr3 { box-shadow: inset 0 0 0 2px var(--at-p3, #FF5A5D); background: rgba(255, 90, 93, .12); }
.trow.atr > .box.over.pr0 { box-shadow: inset 0 0 0 1.6px var(--ink22); } /* the date line carries overdue */
.trow.atr.done > .box { box-shadow: none; background: none; }
.trow.atr .t-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }
.trow.atr.done .t-title { text-decoration: line-through; text-decoration-color: var(--ink25); }
.at-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 17px; font-weight: 500; color: var(--ink40); white-space: nowrap; overflow: hidden; min-width: 0; }
.at-meta > * { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.at-meta .sep { width: 3px; height: 3px; border-radius: 2px; background: var(--ink25); }
.at-meta .d { color: var(--accent); }
.at-meta .d.today { font-weight: 650; }
.at-meta .d.over, .at-meta .d.dl { color: var(--redText); }
.trow.atr.done .at-meta .d { color: var(--ink40); }
.at-meta .pl { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--ink40); }
.at-meta .pl .k { color: var(--hue, var(--ink40)); display: flex; flex: none; }
.at-meta .pl .nm { overflow: hidden; text-overflow: ellipsis; }
.at-card .subs { margin-left: 28px; }
.at-card .subs::before { left: -8px; }
.at-card .subs .trow { padding-left: 6px; background: var(--sheet); }
.at-card .subs .box { margin: 0 4.5px; }
/* "N more tasks": the count in the lead column, the words on the title edge */
.at-more { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 14px 8px 6px; font-size: 15px; font-weight: 500; color: var(--ink40); text-align: left; cursor: pointer; }
.at-more i { flex: none; width: 28px; display: flex; justify-content: center; font-style: normal; }
.at-more i span { min-width: 22px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 6px; background: var(--fill8); color: var(--ink55); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.at-more:active { color: var(--ink55); }
.tm-lift .trow.atr { background: var(--sheet); }
@media (prefers-reduced-motion: reduce) { .at-body, .at-chev, .at-ib { transition: none; } }
/* <<< all-tasks */