/* A to-do's properties in the tap menu (ergo-taskpage; Drew picked B, proposals/task-details.html): Open · Done · Delete
   in one strip on top, then the set properties as rows (When and List always), then one row of + icons for the empty
   ones (empty fields stay hidden until you add them). The Repeat picker (js/props.js) and the + card's chips. */
.tmenu { width: min(312px, calc(100% - 20px)); }
.tm-acts { display: flex; gap: 6px; padding: 8px; border-bottom: 7px solid var(--fill4); }
.tm-acts .ta { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px 6px; border-radius: 11px; background: var(--fill4); font-size: 12px; font-weight: 650; color: var(--ink85); }
.tm-acts .ta:active { background: var(--fill8); }
.tm-acts .ta svg { color: var(--ink55); }
.tm-acts .ta.red, .tm-acts .ta.red svg { color: var(--redText); }
.tmenu .ti.pr .r { color: var(--ink55); max-width: 62%; }
.tmenu .ti.pr .r.blue { color: var(--accent); }
.tmenu .ti.pr .r.red { color: var(--redText); }
.tmenu .ti.pr .r.pc1 { color: var(--pri1); } .tmenu .ti.pr .r.pc2 { color: var(--pri2); } .tmenu .ti.pr .r.pc3 { color: var(--pri3); }
.tmenu .ti.pr .chev { color: var(--ink25); display: flex; margin-left: 2px; flex: none; }
.tm-add { display: flex; align-items: center; gap: 6px; padding: 8px 14px 9px; border-top: 1px solid var(--line); }
.tm-add .lb { font-size: 13px; font-weight: 600; color: var(--ink40); margin-right: 4px; }
.tm-add .ad { all: unset; box-sizing: border-box; cursor: pointer; width: 36px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--fill4); color: var(--ink55); }
.tm-add .ad:active { background: var(--fill8); }

/* the Repeat picker (menu and + card) */
.rp-box { padding: 4px 0 10px; }
.rp-hd { display: flex; align-items: center; gap: 6px; padding: 8px 14px 4px; }
.rp-back { all: unset; cursor: pointer; display: flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 650; font-size: 15px; }
.rp-t { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ink55); }
.rp-chips, .rp-days { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 4px; }
.rp-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 6px 10px; border-radius: 10px; background: var(--fill8); font-size: 14px; font-weight: 600; color: var(--ink85); }
.rp-chip.on { background: var(--a24); color: var(--accent); }
.rp-days .rp-chip { width: 32px; padding: 6px 0; text-align: center; }
.rp-every { display: flex; align-items: center; gap: 8px; padding: 8px 14px 2px; font-size: 15px; color: var(--ink85); }
.rp-every b { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.rp-step { all: unset; cursor: pointer; width: 30px; height: 28px; border-radius: 9px; background: var(--fill8); display: grid; place-items: center; font-size: 17px; font-weight: 600; }
.rp-step[disabled] { opacity: .35; cursor: default; }
.rp-tog { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 14px 4px; font-size: 15px; }
.rp-tog i { width: 42px; height: 26px; border-radius: 13px; background: var(--fill8); position: relative; transition: background 170ms; }
.rp-tog i::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 170ms; }
.rp-tog.on i { background: #34C759; } .rp-tog.on i::after { transform: translateX(16px); }
.rp-seg { display: flex; gap: 2px; margin: 10px 14px 0; padding: 2px; border-radius: 10px; background: var(--fill4); }
.rp-seg button { all: unset; cursor: pointer; flex: 1; text-align: center; padding: 6px 0; border-radius: 8px; font-size: 13px; font-weight: 650; color: var(--ink55); }
.rp-seg button[aria-checked="true"] { background: var(--thumb); color: var(--ink); box-shadow: var(--thumbShadow); }
.rp-next { padding: 8px 14px 0; font-size: 13px; font-weight: 600; color: var(--accent); min-height: 17px; }
.rp-foot { display: flex; gap: 8px; padding: 10px 14px 0; }
.rp-btn { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; text-align: center; padding: 9px 0; border-radius: 12px; font-weight: 650; font-size: 15px; background: var(--fill8); }
.rp-btn.go { background: var(--accent); color: var(--onAccent); }
.rp-btn.red { color: var(--redText); }
.pop .rp-box { width: 300px; max-width: calc(100vw - 20px); }
@media (prefers-reduced-motion: reduce) { .rp-tog i, .rp-tog i::after { transition: none; } }
/* the + card: with values on the chips the bar wraps (Create stays at the right end) */
.qc-bar { flex-wrap: wrap; row-gap: 4px; }
.pop:has(> .rp-box) { width: 300px; max-width: calc(100vw - 20px); padding: 0; }

/* A to-do's name, editable in the Calendar's popovers (Drew, 2026-11-10 18:47: "I should be able to edit a task name from
   the calendar view when I click on it"): on top of the to-do menu (a card) and in the Time panel's header (a block).
   16 px so iOS doesn't zoom in on focus. app.js bindName: Enter / leaving it saves, Escape puts the old name back. */
.tm-name, .cx-name { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: text; }
.tm-name { padding: 11px 14px 10px; border-bottom: 1px solid var(--line); }
.cx-name { flex: 1; margin: -4px -7px; padding: 4px 7px; border-radius: 9px; }
.tm-nm, .cx-nm { all: unset; flex: 1; min-width: 0; box-sizing: border-box; font-size: 16px; line-height: 1.3; font-weight: 650; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-user-select: text; user-select: text; }
.tm-name .pen, .cx-name .pen { flex: none; display: flex; color: var(--ink40); }
/* no blue ring (app.css's input:focus-visible outline; Drew, 2026-11-10 19:08: "Calendar edit name has a blue bar when
   editing it's kinda wonky"): like a doc title, the caret is the cue; the field only greys a little and the pencil turns blue */
.tm-nm:focus, .tm-nm:focus-visible, .cx-nm:focus, .cx-nm:focus-visible { outline: none; box-shadow: none; }
.tm-nm, .cx-nm { -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; background: none; }
.tm-name, .cx-name { -webkit-tap-highlight-color: transparent; }
.tm-name:focus-within { background: var(--fill4); }
.cx-name:focus-within { background: var(--fill4); }
.tm-name:focus-within .pen, .cx-name:focus-within .pen { color: var(--accent); }