/* ---------- open mode A (Drew, 2026-11-10 18:09, proposals/open-mode.html: "A is good for everything else, but keep notes
   the way it is"; 18:11: portrait "Instead of empty space at the bottom, the card opens"). js/app.js opSync sets
   html.op-split (phone layout, 600 px+ wide: the open Duo) plus op-land / op-port; .phone.op-open = the second pane has
   something in it. Home, Tasks and Browse only: the Calendar has its own split (live.css .cx.wide) and a doc page (#doc,
   z-index 20) still covers everything, full screen, as before. Folded (466 wide) none of this applies. ---------- */
.op-det { display: none; }
.phone { --op-rail: var(--sar); --op-home-w: 380px; --op-tree-w: 300px; --op-tm-w: 380px; --op-card-h: min(56vh, 560px); }
html.op-split .phone .op-det { display: block; position: absolute; z-index: 6; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; background: var(--app); --ds-bg: var(--app); --sar: 0px; }
html.op-split .phone .op-det::-webkit-scrollbar { display: none; }
html.op-split .phone .op-det[data-op-tab="cal"] { display: none; }

/* what's in the pane: a list page (Home / Browse), a docked to-do menu, or (landscape, nothing open) a hint */
.op-pane, .op-tm, .op-hint { display: none; }
.op-det.has-list[data-op-tab="home"] .op-pane[data-for="home"], .op-det.has-list[data-op-tab="browse"] .op-pane[data-for="browse"] { display: block; }
.op-det.has-tm .op-tm { display: block; }
html.op-land .op-det:not(.has-tm):not(.has-list)[data-op-tab="home"] .op-hint[data-for="home"],
html.op-land .op-det:not(.has-tm):not(.has-list)[data-op-tab="tasks"] .op-hint[data-for="tasks"],
html.op-land .op-det:not(.has-tm):not(.has-list)[data-op-tab="browse"] .op-hint[data-for="browse"] { display: block; }
.op-hint { padding: 72px 32px; text-align: center; color: var(--ink40); font-size: 14.5px; line-height: 1.5; }
.op-hint b { display: block; color: var(--ink55); font-size: 15.5px; margin-bottom: 4px; }

/* the docked to-do menu: the same menu (Open · Done · Delete, then its properties), flat in the pane */
.op-tmh { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px 16px; background: inherit; }
html.op-split .phone .op-det .op-tmh { background: var(--app); }
.op-tmh b { flex: 1; min-width: 0; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.op-x { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; background: var(--fill8); color: var(--ink55); }
.op-x:active { background: var(--fill12, var(--fill8)); }
.tmenu.docked { position: relative; z-index: auto; width: auto; max-height: none; overflow: visible; margin: 0 12px 16px; border-radius: 16px;
  background: var(--sheet); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px var(--line); max-width: 520px; }
.op-sel { background: var(--a8) !important; border-radius: 12px; }

/* ---- landscape: two panes side by side (Home 380 | detail · the list | properties 380 · tree 300 | detail) ---- */
html.op-land .phone #scr-home { right: auto; width: var(--op-home-w); --sar: 0px; }
html.op-land .phone #scr-browse { right: auto; width: var(--op-tree-w); --sar: 0px; }
html.op-land .phone #scr-tasks { right: calc(var(--op-tm-w) + var(--op-rail)); --sar: 0px; }
html.op-land .phone .op-det { top: 0; bottom: 0; right: var(--op-rail); padding: calc(var(--sat) + 8px) 0 calc(var(--sab) + 40px); box-shadow: inset 1px 0 0 var(--line); }
html.op-land .phone .op-det[data-op-tab="home"] { left: var(--op-home-w); }
html.op-land .phone .op-det[data-op-tab="browse"] { left: var(--op-tree-w); }
html.op-land .phone .op-det[data-op-tab="tasks"] { width: var(--op-tm-w); }
html.op-land .phone .op-det .op-tmh { padding-top: 6px; }

/* ---- portrait: the list keeps the whole screen; the second pane is a card that opens at the bottom (thumb half) ---- */
html.op-port .phone .op-det { left: 10px; right: calc(var(--op-rail) + 10px); bottom: calc(var(--sab) + 10px); max-height: var(--op-card-h); border-radius: 26px; padding: 4px 0 24px;
  background: var(--sheet); --ds-bg: var(--sheet); box-shadow: var(--glassRing), var(--md); visibility: hidden; transform: translateY(calc(100% + 40px));
  transition: transform 280ms var(--ease), visibility 0s linear 280ms; }
html.op-port .phone.op-open .op-det { visibility: visible; transform: none; transition: transform 280ms var(--ease); }
html.op-port .phone .op-det .op-tmh { background: var(--sheet); }
html.op-port .phone .op-det .tmenu.docked { background: var(--app); }
html.op-port .phone.op-open #scr-home, html.op-port .phone.op-open #scr-browse, html.op-port .phone.op-open #scr-tasks { padding-bottom: calc(var(--op-card-h) + var(--sab) + 24px); }
@media (prefers-reduced-motion: reduce) { html.op-port .phone .op-det, html.op-port .phone.op-open .op-det { transition: none; } }

/* ---- Tasks, open Duo: more room on the left (Drew, 2026-11-10 22:35: "Add some more padding on the left of the tasks when duo
   is open so that there is more room to multi select comfortably"). One variable, --tl-x (0 elsewhere): the circles, group
   heads, All Tasks' headers and cards, and the title strip move in by it together; the rows still reach the screen's edge,
   so the select zone (js/select.js RULE.zone + --tl-x, from the row's left edge) covers the new margin and the circle. ---- */
html.op-split .phone #scr-tasks { --tl-x: 20px; }
#scr-tasks .tasks-head { padding-left: calc(16px + var(--tl-x, 0px)); }
#scr-tasks .scope-strip { --ss-pad: calc(16px + var(--tl-x, 0px)); }
#scr-tasks .tlist > .trow-wrap > .trow { padding-left: calc(16px + var(--tl-x, 0px)); }
#scr-tasks .tlist > .trow-wrap > .subs { margin-left: calc(50px + var(--tl-x, 0px)); }
#scr-tasks .tlist > .group { margin-left: calc(16px + var(--tl-x, 0px)); }
#scr-tasks .at-sh { padding-left: calc(16px + var(--tl-x, 0px)); }
#scr-tasks .at-card { margin-left: calc(10px + var(--tl-x, 0px)); }
#scr-tasks .sel-line { margin-left: calc(16px + var(--tl-x, 0px)); }
/* the strip's left fade stays 16 px wide, now from --tl-x (the list that slid off doesn't peek into the new margin) */
html.op-split #scr-tasks .scope-strip {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent var(--tl-x), #000 var(--ss-pad), #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, transparent var(--tl-x), #000 var(--ss-pad), #000 72%, transparent 100%); }