/* Blocks that only real data has (js/live.js): pictures, files, bookmarks, code, tables, dividers, callouts,
   quotes, numbered lists, inline marks. The sample data never uses these, so the mockup looks as before. */
.bl-img img { display: block; width: 100%; height: auto; }
.bl-cap { font-size: 13px; line-height: 18px; color: var(--ink40); text-align: center; }
.bl-h1 { font-size: 26px; line-height: 32px; }
.bl-h3, .bl-h4 { font-size: 18px; line-height: 24px; }
.bl-ol { counter-reset: ol; }
.bl-ol li { counter-increment: ol; }
.bl-ol li::before { content: counter(ol) '.'; width: auto; height: auto; background: none; border-radius: 0; top: 0; left: 0; font-variant-numeric: tabular-nums; color: var(--ink40); }
.bl-file { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 12px 14px; border-radius: 14px; background: var(--fill4, rgba(0,0,0,.04)); color: var(--ink85); text-decoration: none; font-size: 15px; font-weight: 600; }
.bl-bm { display: grid; gap: 2px; margin: 8px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line, rgba(0,0,0,.08)); color: var(--ink85); text-decoration: none; }
.bl-bm b { font-size: 15px; line-height: 20px; }
.bl-bm span { font-size: 13px; line-height: 18px; color: var(--ink60, var(--ink40)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-bm small { font-size: 12px; color: var(--ink40); }
.bl-code { margin: 8px 0; padding: 12px 14px; border-radius: 12px; background: var(--fill4, rgba(0,0,0,.04)); overflow-x: auto; font: 13px/19px ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink85); white-space: pre; }
.bl-table { margin: 8px 0; overflow-x: auto; }
.bl-table table { border-collapse: collapse; font-size: 14px; line-height: 20px; color: var(--ink85); }
.bl-table th, .bl-table td { border: 1px solid var(--line, rgba(0,0,0,.1)); padding: 6px 10px; text-align: left; vertical-align: top; }
.bl-table th { font-weight: 600; background: var(--fill4, rgba(0,0,0,.03)); }
.bl-hr { border: 0; border-top: 1px solid var(--line, rgba(0,0,0,.1)); margin: 14px 0; }
.bl-callout { margin: 8px 0; padding: 10px 14px; border-radius: 14px; background: var(--fill4, rgba(0,0,0,.04)); }
.bl-quote { margin: 8px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--ink25); }
.bl-p a, .bl-ul a, .bl-h a { color: var(--accent); text-decoration: none; }
.bl-p code, .bl-ul code { font: 0.88em ui-monospace, "SF Mono", Menlo, monospace; padding: 1px 4px; border-radius: 5px; background: var(--fill4, rgba(0,0,0,.05)); }
.bl-p mark, .bl-ul mark { background: rgba(255, 214, 10, .35); color: inherit; border-radius: 3px; padding: 0 1px; }
.mini .bl-code, .mini .bl-callout, .mini .bl-quote { margin: 2px 0; padding: 4px 6px; font-size: 9px; line-height: 12px; }
.bl-img.missing .pic { aspect-ratio: 16 / 9; background: var(--fill4, rgba(0,0,0,.05)); box-shadow: none; }
.bl-img.missing img { visibility: hidden; }

/* ===================================================================================================================
   ergo Calendar tab (js/motion.js → window.ergoCalendar). Here and not in a calendar.css because the iPhone app's
   self-update only re-fetches the files bundled in its build. Rules adapted from ergo Calendar
   (~/projects/ergo-calendar-web/web/calendar/public/css/app.css: .hours, .blk, .now, .chipx, the popups) via the
   approved mockup mockups/proposals/calendar.html; same token names (--cN-*, --now, --a70 …), classes prefixed cx-.
   =================================================================================================================== */
#scr-cal { overflow: hidden; isolation: isolate; }
.phone #scr-cal { padding: 0; }
.cx { position: absolute; inset: 0; display: flex; flex-direction: column; padding-left: var(--sal); padding-right: var(--sar); }
.mac .cx, .cx.mac { padding: 0; }
.cx, .cx-blk, .cx-card, .cx-strip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cx-head { display: flex; align-items: center; gap: 8px; padding: calc(var(--sat) + 10px) 16px 2px; container-type: inline-size; }
.cx.mac .cx-head { padding-top: 14px; }
.cx-month { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cx-month .cx-yr { color: var(--ink40); font-weight: 600; }
.cx-month .cx-ms { display: none; }
/* the row never runs past the screen's edge into the strip (Drew, 2026-11-10 21:40, closed Duo: "Look at top right"; the
   382 pt left by the strip held "November 2026 · Today · Day Week Month" ~90 pt too wide): narrow, the month goes short
   and the controls tighten; anything still too long ellipsizes the title, never the controls */
@container (max-width: 440px) {
  .cx-month { font-size: 22px; line-height: 28px; }
  .cx-month .cx-ml { display: none; }
  .cx-month .cx-ms { display: inline; }
  .cx-today { padding: 6px 9px; }
  .cx-head .cx-seg button { padding: 5px 7px; font-size: 12.5px; }
}
@container (max-width: 300px) { .cx-month .cx-yr { display: none; } }
.cx-head .sp { flex: 1; }
.cx-seg { display: flex; padding: 2px; border-radius: 10px; background: var(--fill4); flex: none; }
.cx-seg button { all: unset; padding: 5px 9px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink55); cursor: pointer; white-space: nowrap; }
.cx-seg button.on { background: var(--thumb); color: var(--ink); box-shadow: var(--thumbShadow); }
.cx-today { all: unset; flex: none; padding: 6px 11px; border-radius: 999px; background: var(--fill4); font-size: 13px; font-weight: 600; color: var(--now); cursor: pointer; }
.cx-today[aria-disabled="true"] { color: var(--ink40); }

.cx-strip { display: grid; grid-template-columns: repeat(7, 1fr); padding: 6px 8px 4px; touch-action: pan-y; }
.cx-wd { all: unset; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 2px 0; }
.cx-wd i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink40); letter-spacing: .02em; }
.cx-wd b { width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; transition: background 160ms var(--ease); }
.cx-wd.today b { color: var(--now); }
.cx-wd.sel b { background: var(--ink); color: var(--app); }
.cx-wd.sel.today b { background: var(--now); color: #fff; }
.cx-wd .dots { display: flex; gap: 3px; height: 5px; }
.cx-wd .dots u { width: 5px; height: 5px; border-radius: 3px; background: var(--hue); }

/* all-day: one line (Drew: compact), scrolls sideways */
.cx-allday { display: flex; gap: 6px; align-items: center; min-height: 30px; padding: 4px 16px 8px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.cx-allday::-webkit-scrollbar { display: none; }
.cx-allday .lbl { font-size: 11px; font-weight: 600; color: var(--ink40); flex: none; white-space: nowrap; margin-right: 2px; }
.cx-chip { all: unset; height: 26px; padding: 0 9px 0 7px; border-radius: 8px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none; cursor: pointer; }
.cx-chip.daily { background: var(--a12); color: var(--accent); }
.cx-chip.add { box-shadow: inset 0 0 0 1px var(--line); color: var(--ink55); }
.cx-chip.dl { background: var(--orange14); color: var(--orangeText); }
.cx-chip.done-n { background: var(--fill4); color: var(--ink55); cursor: default; }

.cx-hours { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.cx-hours::-webkit-scrollbar { display: none; }
.cx-hin { position: relative; height: 1440px; margin: 10px 0 calc(var(--sab) + 230px); }
.cx-hl { position: absolute; left: 52px; right: 0; height: 0; border-top: 1px solid var(--line); }
.cx-hl span { position: absolute; right: calc(100% + 8px); top: -7px; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ink40); white-space: nowrap; }
.cx-hl.gone span { color: var(--ink25); } /* hours already gone: quieter labels, no hatching (Drew, 2026-11-10) */
.cx-now { position: absolute; left: 48px; right: 0; height: 2px; margin-top: -1px; background: var(--now); z-index: 6; pointer-events: none; }
.cx-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 5px; background: var(--now); }
.cx-nowlab { position: absolute; left: 0; width: 42px; text-align: right; transform: translateY(-7px); font-size: 11px; line-height: 14px; font-weight: 700; color: var(--now); pointer-events: none; z-index: 3; }

/* ergo Calendar's block, as is */
.cx-blk { position: absolute; z-index: 1; border-radius: 8px; background: linear-gradient(var(--abg), var(--abg)), var(--app); color: var(--afg); padding: 4px 8px 4px 10px; overflow: hidden; box-shadow: inset 3px 0 0 var(--hue); cursor: grab; box-sizing: border-box; transition: box-shadow 150ms var(--ease), transform 150ms var(--ease), opacity 150ms var(--ease); }
.cx-blk b { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-blk b span { overflow: hidden; text-overflow: ellipsis; }
.cx-blk small { display: block; font-size: 11px; line-height: 14px; font-weight: 500; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-blk.short { padding-top: 1px; padding-bottom: 0; display: flex; align-items: center; gap: 6px; }
.cx-blk.short small { display: inline; }
.cx-blk.done b span { text-decoration: line-through; opacity: .6; }
.cx-blk.lift { z-index: 8; box-shadow: inset 3px 0 0 var(--hue), var(--md); transform: scale(1.02); }
.cx-blk.away { opacity: .35; }
.cx-blk.stretching { z-index: 8; box-shadow: inset 3px 0 0 var(--hue), var(--sm); transition: none; }
.cx-blk.pending { box-shadow: inset 3px 0 0 var(--hue), inset 0 0 0 1.5px var(--a70); }
.cx-blk .grip { position: absolute; left: 50%; bottom: 2px; width: 22px; height: 4px; margin-left: -11px; border-radius: 2px; background: var(--hue); opacity: .5; cursor: ns-resize; touch-action: none; }
.cx-blk .grip::after { content: ""; position: absolute; left: -20px; right: -20px; top: -10px; bottom: -4px; }
.cx-blk.short .grip, .cx-blk.done .grip { opacity: 0; pointer-events: none; }
.cx-blk.outline { z-index: 7; background: var(--a8); box-shadow: inset 0 0 0 1.5px var(--a70); pointer-events: none; padding: 3px 8px; }
.cx-blk.outline small { color: var(--accent); opacity: 1; font-weight: 600; }
.cx-ghost { position: fixed !important; z-index: 80; width: 210px; pointer-events: none; box-shadow: inset 3px 0 0 var(--hue), var(--md); transform: rotate(-1.5deg); }

/* the Today · Inbox · Anytime tray: only to-dos without a time (owner, 2026-10-17) */
.cx-tray { position: absolute; left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); bottom: calc(var(--sab) + 84px); z-index: 25; border-radius: 20px; padding: 8px 0 10px; background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(30px); backdrop-filter: saturate(1.6) blur(30px); box-shadow: var(--glassRing), var(--sm); transition: box-shadow 150ms var(--ease); }
.side-rail .cx-tray, html.in-shell .cx-tray, .cx.mac .cx-tray { bottom: calc(var(--sab) + 12px); }
.cx.mac .cx-tray { left: 12px; right: 12px; }
.side-rail .cx-hin, html.in-shell .cx-hin, .cx.mac .cx-hin { margin-bottom: calc(var(--sab) + 140px); }
.cx-tray.drop { box-shadow: var(--glassRing), inset 0 0 0 2px var(--a70), var(--sm); }
.cx-tray-h { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; }
.cx-tray-h .cx-seg button { padding: 4px 8px; font-size: 12.5px; }
.cx-tray-h .cx-seg em { font-style: normal; color: var(--ink40); margin-left: 4px; font-weight: 600; }
.cx-tray-h .hint { margin-left: auto; font-size: 12px; color: var(--ink40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cx-row { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; touch-action: pan-x; min-height: 46px; }
.cx-row::-webkit-scrollbar { display: none; }
.cx-card { flex: none; max-width: 180px; padding: 6px 11px 6px 12px; border-radius: 12px; background: var(--fill4); box-shadow: inset 3px 0 0 var(--hue); cursor: grab; box-sizing: border-box; }
.cx-card b { display: block; font-size: 13.5px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.cx-card small { display: block; font-size: 11.5px; line-height: 15px; color: var(--ink55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-card small em { font-style: normal; color: var(--redText); }
.cx-card.away { opacity: .3; }
.cx-empty { align-self: center; color: var(--ink40); font-size: 13px; }
.cx-dropmsg { display: none; align-self: center; width: 100%; text-align: center; color: var(--accent); font-size: 13.5px; font-weight: 600; }
.cx-tray.drop .cx-card, .cx-tray.drop .cx-empty { display: none; }
.cx-tray.drop .cx-dropmsg { display: block; }

/* "How long?" (ergo Calendar's popup), a small glass popover */
.cx-pop { position: absolute; z-index: 60; left: calc(60px + var(--sal)); right: calc(16px + var(--sar)); max-width: 380px; border-radius: 16px; padding: 10px 12px 12px; 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,.25); transform-origin: 30% 0; }
.cx-pop .hd { font-size: 12.5px; font-weight: 700; color: var(--ink55); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.cx-pop .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-pop .opts button { all: unset; padding: 7px 12px; border-radius: 10px; background: var(--fill8); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.cx-pop .opts button:active { background: var(--a24); }
.cx-catch { position: absolute; inset: 0; z-index: 59; }
/* "How long?" as ergo Calendar's: title · from, the choices (1h preselected), Other… typed, what it gets */
.cx-pop .ps { font-size: 12.5px; line-height: 17px; color: var(--ink55); margin: -4px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-pop .ps.gets { margin: 9px 0 0; color: var(--accent); font-weight: 600; }
.cx-pop .opts button.on { background: var(--a24); color: var(--accent); }
.cx-pop form.other { display: flex; gap: 6px; margin-top: 8px; }
.cx-pop form.other input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 10px; border: 0; background: var(--fill8); color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.cx-pop form.other .set { all: unset; padding: 0 14px; border-radius: 10px; background: var(--accent); color: var(--onAccent); font-weight: 600; font-size: 14.5px; line-height: 34px; cursor: pointer; }
.cx-blk.flash { animation: cx-flash 900ms var(--ease); }
@keyframes cx-flash { 30% { box-shadow: inset 3px 0 0 var(--hue), 0 0 0 4px var(--a24); } }
.cx-wd.hover { background: var(--a12); border-radius: 12px; }
/* the Time panel (window.ergoTime): a block's popover, the to-do menu's Time row, the + card's Time (calendar-times.html) */
.cx-tscrim { position: fixed; inset: 0; z-index: 80; background: var(--scrim); }
.cx-tpop { position: fixed; z-index: 82; width: min(320px, calc(100% - 20px)); border-radius: 16px; overflow: hidden auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; /* taller than the room (js/motion.js popRoom): it scrolls */ color: var(--ink); background: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); box-shadow: var(--glassRing), 0 18px 50px rgba(0,0,0,.3); }
.cx-time .hdr { display: flex; align-items: center; padding: 11px 14px 4px; font-size: 13px; font-weight: 700; color: var(--ink55); min-width: 0; }
.cx-time .hdr b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink85); font-size: 14px; }
.cx-time .hdr .bk { all: unset; cursor: pointer; display: flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 600; }
.cx-time .sec { padding: 8px 14px 10px; }
.cx-time .sec + .sec { border-top: 1px solid var(--line); }
.cx-time .lab { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink40); margin-bottom: 7px; }
.cx-time .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-time .chips button { all: unset; cursor: pointer; padding: 6px 11px; border-radius: 10px; background: var(--fill8); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-time .chips button.on { background: var(--a24); color: var(--accent); }
.cx-time .cx-tin { height: 34px; margin-top: 2px; padding: 0 10px; border-radius: 10px; border: 0; background: var(--fill8); color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; }
.cx-time .chips + .cx-tin { margin-top: 8px; }
.cx-time form.other { display: flex; gap: 6px; margin-top: 8px; }
.cx-time form.other input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 10px; border: 0; background: var(--fill8); color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.cx-time form.other .set { all: unset; padding: 0 14px; border-radius: 10px; background: var(--accent); color: var(--onAccent); font-weight: 600; font-size: 14.5px; line-height: 34px; cursor: pointer; }
.cx-time .gets { margin-top: 9px; font-size: 13px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.cx-time .row2 { display: flex; gap: 8px; padding: 4px 14px 12px; }
.cx-time .row2 button { all: unset; cursor: pointer; flex: 1; text-align: center; padding: 9px 0; border-radius: 12px; font-weight: 650; font-size: 15px; background: var(--fill8); }
.cx-time .row2 .go { background: var(--accent); color: var(--onAccent); }
.cx-time .row2 .red { color: var(--redText); }
/* times on rows: Tasks (.t-date.tm), a doc's to-dos (.bl-date.tm) */
.t-date.tm, .chip.bl-date.tm { color: var(--accent); font-variant-numeric: tabular-nums; }
.qc-btn[data-qc="time"][hidden] { display: none; } /* the + card's Time shows once there's a day */
/* lifted and held still: a bar fills toward "open" (ergo-dragmock's eg-charge; OPEN - HOLD = --eg-charge-ms) */
.cx-blk.eg-charge::after { content: ''; position: absolute; left: 10px; bottom: 3px; height: 3px; width: calc(100% - 20px); border-radius: 2px; background: var(--hue);
  transform-origin: left; animation: cx-charge var(--eg-charge-ms, 500ms) linear forwards; }
@keyframes cx-charge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* ---------- open Duo / any screen 600 px+: the to-dos in a pane on the left (proposals/calendar-unfolded.html) ---------- */
.cx.wide { display: grid; grid-template-columns: var(--cx-tp, clamp(280px, 36%, 340px)) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); }
.cx.wide > .cx-head, .cx.wide > .cx-strip, .cx.wide > .cx-allday, .cx.wide > .cx-hours { grid-column: 2; min-width: 0; }
.cx.wide > .cx-hours { grid-row: 4; }
.cx.wide .cx-hin { margin-bottom: calc(var(--sab) + 96px); }
html.in-shell .cx.wide .cx-hin, .cx.wide.mac .cx-hin { margin-bottom: calc(var(--sab) + 40px); }
.cx.wide > .cx-tray { grid-column: 1; grid-row: 1 / -1; position: relative; left: auto; right: auto; bottom: auto; z-index: 2; min-height: 0; display: flex; flex-direction: column;
  border-radius: 0; padding: 0; background: var(--sheet); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-right: 1px solid var(--line); }
.cx.wide > .cx-tray.drop { box-shadow: inset 0 0 0 2px var(--a70); }
.cx-tp-head { padding: calc(var(--sat) + 10px) 16px 6px; }
.cx.mac .cx-tp-head { padding-top: 14px; }
.cx-tp-title { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.025em; }
.cx-tp-seg { align-self: flex-start; margin: 0 16px 6px; }
.cx-tp-seg em { font-style: normal; color: var(--ink40); margin-left: 4px; font-weight: 600; }
.cx-tp-hint { display: flex; align-items: center; gap: 6px; margin: 0 16px 2px; font-size: 12.5px; color: var(--ink40); white-space: nowrap; overflow: hidden; }
.cx-tp-hint svg { flex: none; }
.cx-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: calc(var(--sab) + 96px); }
html.in-shell .cx-list, .cx.mac .cx-list { padding-bottom: calc(var(--sab) + 24px); }
.cx-list::-webkit-scrollbar { display: none; }
.cx-li { touch-action: pan-y; cursor: grab; }
.cx-li.away { opacity: .3; }
.cx-li .ds-trail .hold { display: flex; color: var(--ink25); }
.cx-li .ds-meta em { font-style: normal; color: var(--redText); }
.cx-li .ds-box.on { background: var(--accent); box-shadow: none; }
.cx-on .ds-d { font-variant-numeric: tabular-nums; }
.cx-list .cx-empty { display: block; padding: 12px 16px 12px var(--ds-title-x); }
.cx.wide .cx-tray .cx-dropmsg { position: absolute; inset: 0; z-index: 3; padding: calc(var(--sat) + 120px) 24px 0; text-align: center; font-size: 15px; line-height: 21px;
  background: color-mix(in srgb, var(--accent) 7%, var(--sheet)); }
.cx.wide .cx-tray.drop .cx-dropmsg { display: block; }
.phone:has(#scr-cal:not([hidden]) .cx.wide):not(.doc-open) .toast { bottom: calc(var(--sab) + 84px); }
html.in-shell .phone:has(#scr-cal:not([hidden]) .cx.wide):not(.doc-open) .toast { bottom: calc(var(--sab) + 16px); }
body:has(.phone #scr-cal:not([hidden]) .cx.wide):not(:has(.doc-open)) #sync-pill { bottom: calc(var(--sab) + 84px) !important; }
/* ergo's toast sits above the tray while the Calendar shows */
.phone:has(#scr-cal:not([hidden])):not(.doc-open) .toast { bottom: calc(var(--sab) + 190px); }
.side-rail .phone:has(#scr-cal:not([hidden])):not(.doc-open) .toast, html.in-shell .phone:has(#scr-cal:not([hidden])):not(.doc-open) .toast { bottom: calc(var(--sab) + 118px); }
@media (max-width: 400px) { .cx-tray-h .hint { display: none; } .cx-seg button { padding: 5px 7px; } }
@media (prefers-reduced-motion: reduce) { .cx-blk, .cx-blk.lift { transition: none; } .cx-blk.lift { transform: none; } }
/* the live sync pill (js/live.js) also moves above the tray */
body:has(.phone #scr-cal:not([hidden])):not(:has(.doc-open)) #sync-pill { bottom: calc(var(--sab) + 184px) !important; }
.side-rail body:has(.phone #scr-cal:not([hidden])):not(:has(.doc-open)) #sync-pill, html.in-shell body:has(.phone #scr-cal:not([hidden])):not(:has(.doc-open)) #sync-pill { bottom: calc(var(--sab) + 112px) !important; }

/* >>> home-browse (ergo-homebuild): Home pins + the Browse tab (js/motion.js window.ergoHome). The row rule is
   mockups/proposals/ds.css (Drew 23:13 "more coherent between views"): edge 16, lead column 28, titles at 56, one
   nesting level = 28; anything you scan is a row, a card is only a container for a pinned Home section. */
:root { --ds-inset: 16px; --ds-lead: 28px; --ds-gap: 12px; --ds-indent: 28px; --ds-title-x: calc(var(--ds-inset) + var(--ds-lead) + var(--ds-gap));
  --ds-row: 52px; --ds-row1: 44px; --ds-hd: 44px; --ds-card-r: 16px; }
.ds-row { --lvl: 0; position: relative; display: flex; align-items: flex-start; gap: var(--ds-gap); box-sizing: border-box; min-height: var(--ds-row);
  padding: 11px var(--ds-inset) 11px calc(var(--ds-inset) + var(--lvl) * var(--ds-indent)); cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: background 150ms, opacity 200ms, transform 200ms; }
.ds-row:active, .ds-row.pressing { background: var(--fill4); }
.ds-row.pressing { transform: scale(.985); }
.ds-row.one { min-height: var(--ds-row1); align-items: center; padding-top: 8px; padding-bottom: 8px; }
.ds-row + .ds-row::before, .ds-hd + .ds-row::before, .ds-row + .ds-more::before { content: ''; position: absolute; top: 0; right: 0; height: 1px; background: var(--line);
  left: calc(var(--ds-title-x) + var(--lvl) * var(--ds-indent)); }
.ds-lead { flex: none; width: var(--ds-lead); height: 22px; display: flex; align-items: center; justify-content: center; }
.ds-row.one .ds-lead { height: 28px; }
.ds-box { all: unset; box-sizing: border-box; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.6px var(--ink22); flex: none; cursor: pointer; position: relative; }
.ds-box::after { content: ''; position: absolute; inset: -10px; } /* a 42 px target */
.ds-box.over { box-shadow: inset 0 0 0 1.6px var(--red70); }
.ds-row.done .ds-box { background: var(--accent); box-shadow: none; }
.ds-row.done { opacity: .45; }
.ds-tile { --k: var(--ink55); position: relative; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none;
  background: color-mix(in srgb, var(--k) 17%, transparent); color: var(--k); }
.ds-tile .vb { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 7px; background: #FF3B30; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--ds-bg, var(--app)); padding-left: 1px; box-sizing: border-box; }
.ds-swl { display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; }
.ds-sw { width: 10px; height: 10px; border-radius: 3.5px; background: var(--hue); }
.ds-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ds-title { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink85); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ds-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; }
.ds-meta > * { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.ds-meta > .shrink { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }
.ds-meta .sep { width: 3px; height: 3px; border-radius: 2px; background: var(--ink25); }
.ds-trail { flex: none; display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 22px; font-weight: 600; color: var(--ink40); font-variant-numeric: tabular-nums; }
.ds-row.one .ds-trail { line-height: 28px; }
.ds-trail .go { color: var(--ink25); display: flex; }
.ds-d { color: var(--accent); } .ds-d.today { font-weight: 650; } .ds-d.over, .ds-d.dl { color: var(--redText); }
.ds-tags .more { margin-left: 4px; font-weight: 600; }
.ds-hd { --lvl: 0; position: relative; display: flex; align-items: center; gap: var(--ds-gap); height: var(--ds-hd); box-sizing: border-box; cursor: pointer;
  padding: 0 calc(var(--ds-inset) - 7px) 0 calc(var(--ds-inset) + var(--lvl) * var(--ds-indent)); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ds-hd .ds-lead { height: 28px; color: var(--ink55); }
.ds-hd .t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.ds-hd b { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ds-hd .n { font-size: 13px; font-weight: 600; color: var(--ink40); flex: none; }
.ds-hd .aside { font-size: 13px; font-weight: 600; color: var(--ink40); white-space: nowrap; flex: none; }
.ds-hd .aside.red { color: var(--redText); }
.ds-sub { display: flex; align-items: center; gap: 7px; padding: 14px var(--ds-inset) 6px var(--ds-title-x); font-size: 13px; font-weight: 700; color: var(--ink55); }
.ds-fold { all: unset; box-sizing: border-box; flex: none; width: 30px; height: 30px; margin: -4px -7px -4px 0; border-radius: 9px; display: grid; place-items: center; color: var(--ink40); cursor: pointer;
  transform: rotate(90deg); transition: transform var(--doc-motion-ms) var(--doc-motion-ease); }
.ds-fold:active { background: var(--fill4); }
.ds-row .ds-fold { width: 36px; height: 36px; margin: -7px -10px -7px -2px; } /* a bigger target inside a row */
.shut > .ds-fold, .shut .ds-trail .ds-fold { transform: none; }
.ds-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--doc-motion-ms) var(--doc-motion-ease); }
.ds-body > div { min-height: 0; overflow: clip; }
.shut + .ds-body { grid-template-rows: 0fr; }
.ds-row.tree::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line);
  left: calc(var(--ds-inset) + (var(--lvl) - 1) * var(--ds-indent) + var(--ds-lead) / 2); }
.ds-more { all: unset; --lvl: 0; position: relative; display: flex; align-items: center; gap: var(--ds-gap); width: 100%; box-sizing: border-box; padding: 8px var(--ds-inset) 10px calc(var(--ds-inset) + var(--lvl) * var(--ds-indent));
  font-size: 15px; font-weight: 500; color: var(--ink40); text-align: left; cursor: pointer; }
.ds-more i { width: var(--ds-lead); display: flex; justify-content: center; font-style: normal; }
.ds-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; }
.ds-card { --ds-inset: 6px; --ds-bg: var(--sheet); position: relative; margin: 0 10px 10px; border-radius: var(--ds-card-r); background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.ds-card > .ds-hd:first-child { border-radius: var(--ds-card-r) var(--ds-card-r) 0 0; }
.ds-card .ds-body > div { border-radius: 0 0 var(--ds-card-r) var(--ds-card-r); }
.ds-card > .ds-row:only-of-type { border-radius: var(--ds-card-r); }
.tm-lift .ds-row { background: var(--sheet); }
.tm-lift .ds-row::before, .tm-lift .ds-row::after { display: none; }
/* Home + Browse pages */
.hb { padding-bottom: 8px; }
.hb-hd1 { display: flex; align-items: center; gap: 8px; margin: 6px 16px 10px; min-height: 40px; }
.hb-h1 { flex: 1; margin: 0; font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.025em; }
.mac .hb-h1 { font-size: 26px; line-height: 32px; }
.hb-done { border: 0; border-radius: 999px; padding: 6px 14px; font: 600 14px -apple-system, system-ui; background: var(--fill4); color: var(--accent); }
.hb-done { background: var(--accent); color: #fff; font-weight: 700; }
.hb-more { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 18px; padding: 0; background: var(--fill4); color: var(--accent); }
/* Home's ⋯ is the bar's ⋯ (Drew, 2026-11-10 21:41 "Weird placement / padding"): the phone's top row and the web rail (Edit Home,
   then Settings), the native capsule's ⋯ (Edit Home, build 15+: html.shell-home-menu). This one stays on the Mac, and in an
   older shell beside its native strip (nothing else there has Edit Home). */
.phone .hb-hd1 .hb-more { display: none; }
html.in-shell:not(.web-bars):not(.shell-home-menu).side-rail .phone .hb-hd1 .hb-more { display: grid; }
/* the cards end 10 px short of the capsule / rail beside them, as they start 10 px from the left (no dead strip between):
   the column is --rail-strip wide and the capsule (--hb-cap) sits in its middle */
html.side-rail:not(.op-split):not(.rail-left) .phone #scr-home .hb-cards { --hb-cap: var(--rail-act, 44px); margin-right: calc((var(--rail-strip) - var(--hb-cap)) / -2); }
html.in-shell.side-rail:not(.web-bars):not(.op-split):not(.rail-left) .phone #scr-home .hb-cards { --hb-cap: 48px; }
.tmenu.hb-home-menu { width: min(240px, calc(100% - 20px)); }
.hb-search { display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 16px 8px; padding: 0 12px; border-radius: 12px; background: var(--fill4); color: var(--ink40); }
.hb-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; outline: none; -webkit-appearance: none; appearance: none; }
.hb-search input::placeholder { color: var(--ink40); }
.hb-hint { text-align: center; font-size: 12.5px; color: var(--ink25); margin: 14px 16px; }
.hb-cards { padding-top: 2px; }
.hb-cards.editing .hb-card { touch-action: none; cursor: grab; } /* no jiggle (Drew, 2026-11-10 18:44 "No more jiggling") */
.hb-cards.editing .hb-card.drag { z-index: 5; box-shadow: 0 0 0 1px var(--line), 0 14px 40px rgba(0,0,0,.35); cursor: grabbing; }
.hb-cards.editing .hb-card .ds-row, .hb-cards.editing .hb-card .ds-hd, .hb-cards.editing .hb-card .ds-more { pointer-events: none; }
.hb-card.empty .ds-title { color: var(--ink40); }
.hb-rm { all: unset; position: absolute; top: -7px; left: -7px; z-index: 3; width: 22px; height: 22px; border-radius: 11px; background: var(--ink55); color: var(--app);
  font: 800 16px/22px -apple-system, system-ui; text-align: center; cursor: pointer; }
.hb-rm::after { content: ''; position: absolute; inset: -10px; }
@media (prefers-reduced-motion: reduce) { .hb-cards.editing .hb-card { animation: none; outline: 1.5px dashed var(--a24); outline-offset: 2px; } }
.hb-add { all: unset; box-sizing: border-box; display: block; width: calc(100% - 20px); margin: 4px 10px 0; height: 44px; border-radius: 14px; color: var(--accent); font-weight: 650; font-size: 15px;
  text-align: center; box-shadow: inset 0 0 0 1.5px var(--a24); cursor: pointer; }
.hb-tree > .ds-hd { margin-top: 6px; }
/* Browse's sections (Collections, Areas, Projects, Tags, Results) are the page's headings: a step above its 16 px rows
   and the Home / All Tasks card headers (16 px), below the 34 px title (Drew, 2026-11-10 "Browse headers are too small").
   Still one line, still the tree's lead tile and chevron. */
.hb-tree > .ds-hd { --ds-hd: 50px; }
.hb-tree > .ds-hd b { font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -.012em; }
.hb-tree > .ds-hd .n { font-size: 15px; }
.mac .hb-tree > .ds-hd b { font-size: 18px; line-height: 23px; }
.hb-list, #scr-home:has(.hb-list), #scr-browse:has(.hb-list) { touch-action: pan-y; } /* a sideways drag is ours: swipe back */
.hb-crumbs { gap: 10px; }
.hb-cr { flex: 1; min-width: 0; }
.hb-cr small { display: block; font-size: 12.5px; color: var(--ink40); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-cr b { display: block; font-size: 22px; line-height: 27px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-n { color: var(--ink40); font-size: 14px; font-variant-numeric: tabular-nums; }
.hb-crumbs .round.on { color: var(--accent); }
.hb-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 16px 8px; }
.hb-chips::-webkit-scrollbar { display: none; }
.hb-sort, .hb-chip { all: unset; box-sizing: border-box; flex: none; height: 30px; padding: 0 10px; border-radius: 15px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink55); box-shadow: inset 0 0 0 1px var(--line); }
.hb-chip.k { width: 36px; padding: 0; justify-content: center; }
.hb-chip .ki { display: flex; color: var(--k); }
.hb-chip[aria-pressed="true"] { background: var(--ink); color: var(--app); box-shadow: none; }
.hb-chip[aria-pressed="true"] .ki { color: var(--app); }
.hb-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.35); }
.hb-sheet { --ds-bg: var(--sheet); position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; max-height: 80%; display: flex; flex-direction: column; box-sizing: border-box;
  max-width: 560px; margin: 0 auto; background: var(--sheet); border-radius: 22px 22px 0 0; box-shadow: var(--sheetShadow); padding: 8px 0 calc(var(--sab, 0px) + 12px); }
.hb-sheet::before { content: ''; display: block; width: 36px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: var(--ink12); flex: none; }
.hb-sh-h { display: flex; align-items: center; padding: 0 16px 8px; } .hb-sh-h h2 { flex: 1; margin: 0; font-size: 17px; }
.hb-sh-h button { border: 0; background: none; color: var(--accent); font: 600 15px -apple-system, system-ui; }
.hb-sh-body { overflow-y: auto; overscroll-behavior: contain; }
.hb-on { color: var(--accent); font-weight: 800; }
html.in-shell .hb-sheet { padding-right: var(--sar, 0px); }
/* <<< home-browse */