/* ToDo's redesign — shared structure. Every design loads this, then its own theme file.
   Tokens (the --vars below) are what themes change; the structure rules keep every feature in place. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font);
  --font-script: "Snell Roundhand", "Apple Chancery", "Segoe Script", "Brush Script MT", cursive;
  --bg: #f6f5f2; --card: #ffffff; --text: #1a1a1a; --muted: #767268; --border: #e7e3db;
  --accent: #d97757; --accent-soft: #fbe9e1; --on-accent: #ffffff; --checked-bg: #f1efe9;
  --star: #f5b400; --star-bg: #fff9e8; --super: #7c3aed; --super-bg: #efe9ff; --lever: #047857; --lever-bg: #e7f6ef;
  --kids: #db2777; --kids-bg: #fdeef5; --meeting: #2563eb; --meeting-bg: #e6f0ff; --workout: #ea580c; --workout-bg: #ffeadb;
  --green: #4a9d6f; --red: #d9574f; --attach: #a855f7; --k-blue: #3a6fd9; --k-blue-bg: #e3ecfb;
  --r-card: 14px; --r-pill: 999px; --r-btn: 10px; --bw: 1px; --rail-w: 3px;
  --shadow: 0 1px 2px rgba(0,0,0,.04); --shadow-pop: 0 10px 30px rgba(0,0,0,.18);
  --card-pad-y: 10px; --card-pad-x: 12px; --row-gap: 8px; --chev: 28px; --check: 26px; --icon: 22px; --cluster-btn: 24px;
  --title-size: 1.02rem; --title-lh: 26px; --title-weight: 500; --lever-title-size: 1.05rem;
  --ctrl-h: 36px; --fab-size: 60px; --fab-right: 16px; --fab-bottom: 22px;
  --os-open: var(--text); --os-sesame: #b0482a;
  --hdr-areas: "owner count actions" "date date view"; --hdr-cols: auto 1fr auto;
  --hdr-areas-desk: "owner count" "actions actions"; --hdr-cols-desk: auto 1fr;
  --health-bg: var(--workout-bg); --health-fg: var(--workout); --health-border: var(--workout);
  --divider-size: .68rem; --divider-track: .12em;
  --icon-stroke: 2;
  color-scheme: light;
}
html.dark { color-scheme: dark; }

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.35; min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
a { color: var(--accent); }

/* ---------- things the live app hides (kept in the DOM, never shown) ---------- */
#quickMicBtn, #promptsBtn, #badgeBtn, #accountBtn, #filtersToggleBtn, #hideMenuBtn,
.htext, .star-count, .workout-btn, .meeting-btn:not(.show), #quickAddBar, .desc-compact, .mobile-only-row, .big-count-row { display: none !important; }
#widgetBtn { display: none; }
.add-form { display: none; }
body.more-open .add-form, .add-form.open { display: flex; }
.notes.empty { display: none !important; }

/* ---------- page frame ---------- */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 12px calc(env(safe-area-inset-bottom) + 110px); }
.topbar { position: sticky; top: 0; z-index: 10; background: var(--bg); margin: 0 -12px; padding: calc(env(safe-area-inset-top) + 10px) 12px 8px; }
.main-content { position: relative; }

/* ---------- header (phone: a two-row grid; themes re-map the areas) ---------- */
header { display: grid; grid-template-columns: var(--hdr-cols); grid-template-areas: var(--hdr-areas); align-items: center; gap: 8px 8px; }
#ownerSel { grid-area: owner; }
.hdr-count { grid-area: count; display: flex; align-items: baseline; gap: 5px; min-width: 0; cursor: pointer; }
.header-actions { grid-area: actions; display: flex; gap: 6px; justify-self: end; align-items: center; }
header #dateFilterSelect { grid-area: date; justify-self: start; }
header .view-toggle-mobile { grid-area: view; justify-self: end; }
.big-count { font: 800 1.8rem/1 var(--font-display); color: var(--accent); letter-spacing: -.02em; }
.big-count-label { font-size: .8rem; font-weight: 700; color: var(--muted); }
.stats { font-size: .74rem; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.stats .done-link { cursor: pointer; text-decoration: underline dotted; }

.icon-btn { width: var(--ctrl-h); height: var(--ctrl-h); border-radius: 50%; border: var(--bw) solid var(--border); background: var(--card); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:active { opacity: .6; }
.icon-btn.spinning svg { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

select#ownerSel, select#dateFilterSelect, select#sort, select#widgetDateSelect {
  -webkit-appearance: none; appearance: none; height: var(--ctrl-h); padding: 0 26px 0 10px; border-radius: var(--r-btn);
  border: var(--bw) solid var(--border); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  color: var(--text); font-size: .86rem; font-weight: 600; max-width: 100%;
}
select#ownerSel { border-color: var(--accent); color: var(--accent); font-weight: 800; }
.view-toggle { display: inline-flex; gap: 3px; background: var(--card); border: var(--bw) solid var(--border); border-radius: var(--r-btn); padding: 3px; height: var(--ctrl-h); align-items: center; }
.view-toggle .opt { padding: 0 12px; height: calc(var(--ctrl-h) - 8px); display: flex; align-items: center; border-radius: calc(var(--r-btn) - 3px); font-size: .8rem; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; }
.view-toggle .opt.active { background: var(--accent); color: var(--on-accent); }

/* floating add button */
#addBtn { position: fixed; right: var(--fab-right); bottom: calc(env(safe-area-inset-bottom) + var(--fab-bottom)); width: var(--fab-size); height: var(--fab-size); border-radius: 50%;
  background: var(--accent); color: var(--on-accent); border: none; box-shadow: 0 8px 22px rgba(0,0,0,.26); z-index: 900; }
#addBtn svg { width: 28px; height: 28px; }
#addBtn:active { transform: scale(.95); }

/* ---------- health cards (Russell) and the Pilates card (K) ---------- */
#liftCard, #cardioCard, #saunaCard, #pilatesCard { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 9px 12px; background: var(--health-bg);
  border: var(--bw) solid var(--health-border); border-left: var(--rail-w) solid var(--health-border); border-radius: calc(var(--r-card) - 3px); cursor: pointer; user-select: none; }
#pilatesCard { display: none; }
body.k-view #pilatesCard { display: flex; }
body.k-view #liftCard, body.k-view #cardioCard, body.k-view #saunaCard { display: none !important; }
.lift-title { flex: 1; min-width: 0; font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lift-sub { display: none; }
#pilatesCard .lift-sub { display: block; font-weight: 500; font-size: .78rem; color: var(--muted); margin-top: 1px; white-space: normal; }
.lift-badge { font-weight: 800; font-size: .84rem; color: var(--health-fg); text-align: right; max-width: 60%; line-height: 1.2; }
#pilatesCard.done { background: var(--health-fg); border-color: var(--health-fg); }
#pilatesCard.done .lift-title, #pilatesCard.done .lift-sub, #pilatesCard.done .lift-badge { color: #fff; }

/* ---------- group dividers ---------- */
.lever-divider, .kids-divider, .workout-divider { list-style: none; display: flex; align-items: center; gap: 8px; font-size: var(--divider-size); font-weight: 800; letter-spacing: var(--divider-track); text-transform: uppercase; margin: 4px 2px 8px; color: var(--lever); }
.kids-divider { color: var(--kids); } .workout-divider { color: var(--workout); }
.lever-divider::after, .kids-divider::after, .workout-divider::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }
li.gap { list-style: none; height: 6px; }
body.k-view .lever-divider, body.k-view .kids-divider, body.k-view .workout-divider, body.k-view li.gap { display: none; }

/* ---------- task cards ---------- */
ul.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--row-gap); }
.swipe-wrap { position: relative; }
li.item { position: relative; display: grid; grid-template-columns: var(--chev) var(--check) minmax(0, 1fr); column-gap: 8px; row-gap: 0;
  grid-template-areas: "chev check title" "tools tools tools"; align-items: start;
  background: var(--tier-bg, var(--card)); border: var(--bw) solid var(--tier, var(--border)); border-left: var(--rail-w) solid var(--tier, var(--border));
  border-radius: var(--r-card); padding: var(--card-pad-y) var(--card-pad-x); box-shadow: var(--shadow); }
li.item.starred { --tier: var(--star); --tier-bg: var(--star-bg); }
li.item.superstarred { --tier: var(--super); --tier-bg: var(--super-bg); }
li.item.kids-label:not(.starred):not(.superstarred) { --tier: var(--kids); --tier-bg: var(--kids-bg); }
li.item.meeting:not(.starred):not(.superstarred) { --tier: var(--meeting); --tier-bg: var(--meeting-bg); }
li.item.workout-item:not(.starred):not(.superstarred) { --tier: var(--workout); --tier-bg: var(--workout-bg); }
li.item.lever { --tier: var(--lever); --tier-bg: var(--lever-bg); }
li.item.checked { --tier-bg: var(--checked-bg); }
li.item.checked .title { text-decoration: line-through; color: var(--muted); }
/* K view: swap which cards show (hide the wrapper so flex gaps go too) */
.swipe-wrap:has(> li.item.k-only) { display: none; }
body.k-view .swipe-wrap:has(> li.item.k-only) { display: block; }
body.k-view .swipe-wrap:not(:has(> li.item.k-only)) { display: none; }

li.item .handle { display: none; }
.expand-btn { grid-area: chev; width: var(--chev); height: var(--title-lh); display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; border-radius: 8px; margin-left: -4px; }
.expand-btn svg { width: 18px; height: 18px; transition: transform .15s; }
.item.expanded .expand-btn svg { transform: rotate(180deg); }
.item.expanded .expand-btn { color: var(--accent); }
.checkbox { grid-area: check; width: var(--check); height: var(--check); margin-top: calc((var(--title-lh) - var(--check)) / 2); border-radius: 50%; border: 2px solid var(--check-border, var(--border));
  display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; }
.checkbox svg { width: 14px; height: 14px; opacity: 0; color: var(--on-accent); }
.checkbox.checked { background: var(--accent); border-color: var(--accent); }
.checkbox.checked svg { opacity: 1; }

.body { display: contents; }
.title { grid-area: title; font-size: var(--title-size); line-height: var(--title-lh); font-weight: var(--title-weight); white-space: pre-wrap; word-break: break-word; outline: none; min-width: 0; letter-spacing: -.005em; }
.title:focus { background: var(--accent-soft); border-radius: 6px; box-shadow: 0 0 0 2px var(--accent); }
/* the label cluster sits on the title's first line only; later lines run the full width */
li.item:not(.lever) .title::before { content: ""; float: right; width: calc(var(--cluster-btn) * 4 + 8px); height: var(--title-lh); }
li.item.has-meeting:not(.lever) .title::before { width: calc(var(--cluster-btn) * 5 + 8px); }
li.item.lever .title::before { content: ""; float: right; width: 34px; height: var(--title-lh); }
.cluster { position: absolute; top: var(--card-pad-y); right: calc(var(--card-pad-x) - 4px); display: flex; align-items: center; height: var(--title-lh); z-index: 2; }
.cluster > div { width: var(--cluster-btn); height: var(--cluster-btn); display: flex; align-items: center; justify-content: center; color: var(--cluster-off, var(--border)); cursor: pointer; border-radius: 50%; }
.cluster svg { width: var(--icon); height: var(--icon); }
.star-btn.starred { color: var(--star); }
.superstar-btn.superstarred { color: var(--super); filter: drop-shadow(0 0 3px rgba(124,58,237,.35)); }
.lever-btn.on { color: var(--lever); }
.kids-btn.on { color: var(--kids); }
.meeting-btn.on { color: var(--meeting); }
li.item.lever .cluster > :not(.lever-btn) { display: none; }

.tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 30px; margin-top: 4px; min-width: 0; }   /* a long due text plus share, link and Open Sesame wraps instead of spilling past the card */
li.item.lever .tools { display: none; }
.share-card-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--r-pill); border: var(--bw) solid var(--accent); color: var(--accent); background: var(--card); font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.share-card-btn svg { width: 15px; height: 15px; }
.share-card-btn.is-shared { background: var(--accent); color: var(--on-accent); }
.link-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--accent); border-radius: 50%; text-decoration: none; }
.link-icon svg { width: 20px; height: 20px; }
.due-compact { font-size: .76rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.item.expanded .due-compact { display: none; }
.os-btn { margin-left: auto; display: flex; align-items: baseline; gap: 4px; padding: 2px 7px; border-radius: 10px; cursor: pointer; line-height: 1; transition: background .15s, box-shadow .15s, transform .15s; white-space: nowrap; }
.os-btn .os-open { font: 800 15px/1 var(--font-display); color: var(--os-open); letter-spacing: -.01em; }
.os-btn .os-sesame { font: italic 700 19px/1 var(--font-script); color: var(--os-sesame); }
.os-btn:hover { background: rgba(176,72,42,.10); box-shadow: 0 0 0 2px rgba(176,72,42,.45), 0 3px 10px rgba(176,72,42,.25); transform: scale(1.05); }

/* expanded content: full-width rows under the tools */
.desc-wrap, .notes, .lever-trash-row, .meta, .schedule-form { grid-column: 1 / -1; }
.item.collapsed .desc-wrap, .item.collapsed .notes, .item.collapsed .meta, .item.collapsed .lever-trash-row, .item.collapsed .schedule-form { display: none; }
.desc-wrap { display: none; position: relative; margin-top: 8px; }
.item.expanded .desc-wrap { display: block; }
.desc-edit { display: block; width: 100%; min-height: 78px; padding: 10px 46px 10px 12px; font-size: .92rem; line-height: 1.38; border: var(--bw) solid var(--border); border-radius: var(--r-btn); background: var(--field-bg, var(--card)); color: var(--text); resize: vertical; }
.desc-mic { position: absolute; right: 8px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.desc-mic svg { width: 18px; height: 18px; }
.item.expanded .notes { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--border); font-size: .86rem; color: var(--muted); }
.subtask { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; }
.subtask-check { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; border: 1.5px solid var(--border); border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.subtask-check svg { width: 11px; height: 11px; opacity: 0; color: var(--on-accent); }
.subtask-check.checked { background: var(--accent); border-color: var(--accent); }
.subtask-check.checked svg { opacity: 1; }
.subtask-text { flex: 1; min-width: 0; outline: none; color: var(--text); line-height: 1.45; word-break: break-word; }
.subtask.done .subtask-text { text-decoration: line-through; color: var(--muted); opacity: .7; }
.subtask-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--muted); cursor: pointer; padding: 2px 4px; }
.item.expanded .meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 10px; font-size: .76rem; color: var(--muted); }
.badge { padding: 2px 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.badge.tag-k { background: var(--k-blue-bg); color: var(--k-blue); }
.badge.tag-kids { background: var(--kids-bg); color: var(--kids); }
.badge-link { background: var(--card); border: var(--bw) solid var(--accent); }
.badge-attach { background: var(--card); border: var(--bw) solid var(--attach); color: var(--attach); }
.badge-attach a { color: inherit; text-decoration: none; }
.badge-phone { background: var(--card); border: var(--bw) solid var(--green); color: var(--green); }
.badge-dir { background: var(--card); border: var(--bw) solid var(--k-blue); color: var(--k-blue); }
.due-badge, .recur-badge { cursor: pointer; text-decoration: underline dotted; }
.edited-badge { color: var(--accent); font-style: italic; }
.meta .action-icons { flex-basis: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin-top: 6px; }
.meta-icon-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--muted); cursor: pointer; }
.meta-icon-btn svg { width: 24px; height: 24px; }
.meta-icon-btn-danger { color: var(--red); }
.meta-icon-btn-danger svg { width: 26px; height: 26px; }
.meta-icon-btn input { display: none; }
.lever-trash-row { display: none; margin-top: 8px; }
.item.lever.expanded .lever-trash-row { display: flex; }
.lever-trash { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-btn); background: var(--red); color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer; }
.lever-trash svg { width: 16px; height: 16px; }
.schedule-form { display: none; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px; border-radius: var(--r-btn); background: var(--field-bg, var(--bg)); border: var(--bw) solid var(--border); }
.schedule-form.open { display: flex; }
.add-row2 { display: flex; gap: 8px; width: 100%; align-items: center; flex-wrap: wrap; }
.schedule-form input[type="date"], .schedule-form input[type="time"], .schedule-form select, .schedule-form input[type="url"], .schedule-form input[type="text"] { padding: 8px 10px; border-radius: 9px; border: var(--bw) solid var(--border); background: var(--card); color: var(--text); font-size: .85rem; flex: 1 1 auto; min-width: 0; }
.pill { padding: 6px 13px; border-radius: var(--r-pill); border: var(--bw) solid var(--border); background: var(--card); color: var(--muted); font-size: .83rem; cursor: pointer; user-select: none; white-space: nowrap; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
.pill.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 700; }
.pill.tag-k.active { background: var(--k-blue-bg); color: var(--k-blue); border-color: var(--k-blue); }
.pill.tag-kids.active { background: var(--kids-bg); color: var(--kids); border-color: var(--kids); }
.tag-delete-btn { display: inline-flex; opacity: .45; } .tag-delete-btn svg { width: 11px; height: 11px; }
.repeat-picker { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; }
.repeat-picker .rp-chips, .repeat-picker .rp-units { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chip { padding: 8px 14px; border: var(--bw) solid var(--border); border-radius: var(--r-pill); background: var(--card); font-size: .86rem; color: var(--muted); cursor: pointer; }
.rp-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rp-custom { display: none; } .rp-custom.show { display: flex; align-items: center; gap: 8px; }
.weekday-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.wd-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: var(--bw) solid var(--border); border-radius: 50%; font-size: .82rem; font-weight: 700; color: var(--muted); background: var(--card); cursor: pointer; }
.wd-btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* lever card: just the bold title, its checkbox and the lightning */
li.item.lever { grid-template-areas: "chev check title"; padding-top: 6px; padding-bottom: 6px; }
li.item.lever .title { font-size: var(--lever-title-size); font-weight: 800; letter-spacing: -.01em; }
li.item.lever .meta { display: none !important; }
li.item.lever .cluster { top: 50%; transform: translateY(-50%); }

/* ---------- share menu ---------- */
.share-menu { position: fixed; z-index: 9999; background: var(--card); border: var(--bw) solid var(--accent); border-radius: 12px; box-shadow: var(--shadow-pop); overflow: hidden; min-width: 240px; }
.share-menu[hidden] { display: none; }
.share-menu button { display: block; width: 100%; text-align: left; padding: 11px 14px; border: 0; background: transparent; color: inherit; font-size: .95rem; cursor: pointer; }
.share-menu button + button { border-top: var(--bw) solid var(--border); }
.share-menu button:hover { background: var(--accent-soft); }
.share-menu small { display: block; opacity: .65; margin-top: 2px; font-size: .76rem; }

/* ---------- calendar ---------- */
#calendar { display: none; background: var(--card); border: var(--bw) solid var(--border); border-radius: var(--r-card); padding: 14px; margin-bottom: 14px; }
body.view-cal #calendar { display: block; }
.cal-clock { text-align: center; font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.cal-clock small { display: block; font-weight: 500; font-size: .75rem; color: var(--muted); }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-header .icon-btn { width: 30px; height: 30px; }
.cal-title { font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: .7rem; overflow: hidden; white-space: nowrap; color: var(--muted); padding: 4px 0; font-weight: 700; letter-spacing: -.02em; }
.cal-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; font-size: .8rem; cursor: pointer; position: relative; color: var(--text); }
.cal-day.other-month { color: var(--border); }
.cal-day.today { border: 1.5px solid var(--accent); font-weight: 700; }
.cal-day .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-top: 2px; }
.cal-tasks { display: none; }
.cal-day.in-range { background: var(--accent-soft); border-radius: 0; }
.cal-day.range-start, .cal-day.range-end { background: var(--accent); color: var(--on-accent); }

/* ---------- full-screen sheets: new task, health screens ---------- */
#voiceAdd, #liftScreen, #cardioScreen, #saunaScreen { display: none; position: fixed; inset: 0; z-index: 1000; background: var(--bg); color: var(--text); overflow-y: auto; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
body.va-open #voiceAdd, #liftScreen.open, #cardioScreen.open, #saunaScreen.open { display: block; }
.va-wrap, .lift-wrap { max-width: 560px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; min-height: 100%; }
.va-top, .lift-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.va-cancel, .va-more, .lift-back, .lift-undo { background: none; border: none; color: var(--accent); font-size: 1rem; font-weight: 600; padding: 8px 4px; cursor: pointer; }
#voiceAdd h2, .lift-wrap h2 { margin: 0 0 8px; font: 800 1.5rem/1.15 var(--font-display); letter-spacing: -.01em; }
.va-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 10px 2px 4px; }
.va-title { width: 100%; font-size: 1.2rem; font-weight: 700; padding: 12px 14px; border: var(--bw) solid var(--border); border-radius: var(--r-btn); background: var(--card); color: var(--text); }
#voiceAdd textarea { width: 100%; min-height: 160px; padding: 16px; border: var(--bw) solid var(--border); border-radius: var(--r-card); background: var(--card); color: var(--text); font-size: 1.25rem; line-height: 1.35; resize: none; }
.va-mic-row { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.va-mic { width: 68px; height: 68px; flex: none; border-radius: 50%; border: 2px solid var(--border); background: var(--card); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); }
.va-mic svg { width: 30px; height: 30px; }
.va-mic.on { background: var(--red); border-color: var(--red); color: #fff; animation: vaPulse 1.4s ease-out infinite; }
@keyframes vaPulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.5); } 100% { box-shadow: 0 0 0 18px rgba(229,72,77,0); } }
.va-status { font-size: .95rem; color: var(--muted); font-weight: 600; }
.va-status.on { color: var(--red); }
.va-chips { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.va-chip { padding: 10px 16px; border-radius: var(--r-pill); border: var(--bw) solid var(--border); background: var(--card); font-weight: 600; font-size: .95rem; cursor: pointer; }
.va-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.va-save { margin-top: auto; width: 100%; padding: 17px; border: none; border-radius: var(--r-card); background: var(--accent); color: var(--on-accent); font-size: 1.15rem; font-weight: 800; cursor: pointer; }
.va-save:disabled { opacity: .45; }
.lift-total { color: var(--health-fg); font-weight: 700; margin-bottom: 14px; }
.lift-wrap h3 { margin: 18px 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lift-ex { display: flex; align-items: center; width: 100%; margin-bottom: 10px; padding: 14px 16px; background: var(--card); border: var(--bw) solid var(--border); border-radius: var(--r-card); font-size: 1.05rem; font-weight: 600; text-align: left; cursor: pointer; }
.lift-ex .thumb, .lift-ex .ph { width: 52px; height: 52px; border-radius: 10px; margin-right: 14px; flex: none; background: var(--health-bg); display: flex; align-items: center; justify-content: center; font-size: 24px; object-fit: cover; }
.lift-ex .nm { flex: 1; min-width: 0; } .lift-ex .sub { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); margin-top: 2px; }
.lift-ex span.n { margin-left: auto; color: var(--health-fg); font-weight: 800; }
.lift-ex span.plus { margin-left: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--health-bg); border: var(--bw) solid var(--health-border); color: var(--health-fg); font-size: .8rem; font-weight: 700; }
.cd-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
.cd-q { padding: 16px 4px; border-radius: var(--r-btn); border: var(--bw) solid var(--health-border); background: var(--health-bg); color: var(--health-fg); font-size: 1rem; font-weight: 800; cursor: pointer; }
.lift-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.lift-tile { background: var(--card); border: var(--bw) solid var(--border); border-radius: var(--r-card); padding: 12px 14px; }
.lift-tile .lb { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lift-tile .val { font-size: 1.5rem; font-weight: 800; margin-top: 2px; }
.lift-tile.hot { background: var(--health-bg); border-color: var(--health-border); } .lift-tile.hot .val { color: var(--health-fg); }
.lift-set { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: var(--bw) solid var(--border); }
.lift-set .t { color: var(--muted); font-size: .8rem; margin-left: auto; } .lift-set .x { background: none; border: none; color: var(--muted); font-size: 18px; padding: 4px 8px; cursor: pointer; }
.lift-histbtn { width: 100%; margin: 6px 0 4px; padding: 12px; border-radius: var(--r-btn); border: var(--bw) solid var(--border); background: var(--card); font-weight: 700; cursor: pointer; }

/* ---------- more-options add form ---------- */
.add-form { flex-direction: column; gap: 8px; margin: 8px 0 14px; background: var(--card); border: var(--bw) solid var(--border); border-radius: var(--r-card); padding: 12px; }
.add-form input[type="text"], .add-form input[type="url"], input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 10px 14px; border-radius: var(--r-btn); border: var(--bw) solid var(--border); background: var(--card); color: var(--text); font-size: .95rem; width: 100%; }
.sched-box { background: var(--field-bg, var(--bg)); border: var(--bw) solid var(--border); border-radius: var(--r-btn); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.sched-box-title { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#addDate, #addTime { padding: 9px 10px; border-radius: var(--r-btn); border: var(--bw) solid var(--border); background: var(--card); color: var(--text); font-size: .85rem; flex: 1 1 auto; min-width: 0; }
.add-form .icon-btn.primary, #saveAddBtn { width: auto; padding: 0 16px; border-radius: var(--r-btn); background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; margin-left: auto; }
.date-preset-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mic-btn.listening { background: var(--red); color: #fff; border-color: var(--red); }

/* ---------- footer, toast, banner ---------- */
#logoutFooter { text-align: center; padding: 28px 0 20px; }
#logoutBtn { background: none; border: 0; color: var(--muted); font-size: .8rem; text-decoration: underline; cursor: pointer; padding: 8px 12px; }
#toast { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 24px); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: var(--r-pill); font-size: .85rem; z-index: 2000; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
#toast.show { opacity: 1; }
#updateBanner { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 18px); display: flex; align-items: center; gap: 8px; background: var(--accent); color: var(--on-accent); padding: 12px 20px; border-radius: var(--r-pill); font-size: .9rem; font-weight: 600; z-index: 2000; box-shadow: 0 6px 20px rgba(0,0,0,.28); }

/* ---------- phone: the sidebar sections and the toolbar are desktop-only ---------- */
#dateFiltersWrap, #viewToggleWrap, #tagFiltersWrap, #statusFiltersWrap, #toolbar, .sidebar-label { display: none; }
.row-scroll { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.row-scroll::-webkit-scrollbar { display: none; }

/* ---------- desktop (900px and up): sidebar + main, like Mail or Reminders ---------- */
@media (min-width: 900px) {
  .wrap { max-width: 1120px; display: flex; align-items: flex-start; gap: 32px; padding: 32px 28px 80px; }
  .topbar { position: sticky; top: 28px; z-index: 1; flex: 0 0 250px; background: transparent; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; max-height: calc(100vh - 56px); overflow-y: auto; scrollbar-width: none; }
  header { grid-template-columns: var(--hdr-cols-desk); grid-template-areas: var(--hdr-areas-desk); }
  header #dateFilterSelect, header .view-toggle-mobile { display: none; }
  .header-actions { justify-self: end; }
  #dateFiltersWrap, #viewToggleWrap, #tagFiltersWrap, #statusFiltersWrap { display: block; }
  .sidebar-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px 2px; }
  .row-scroll { flex-direction: column; overflow: visible; gap: 3px; }
  .row-scroll .pill { width: 100%; text-align: left; border-radius: calc(var(--r-btn) - 1px); padding: 8px 12px; }
  #viewToggleWrap .view-toggle { display: flex; width: 100%; height: auto; }
  #viewToggleWrap .view-toggle .opt { flex: 1; justify-content: center; height: 30px; }
  #toolbar { display: flex; gap: 8px; align-items: center; margin: 0 0 16px; }
  #toolbar input[type="search"] { flex: 1 1 auto; }
  #toolbar select#sort { flex: 0 0 230px; }
  #widgetBtn { display: flex; }
  .main-content { flex: 1; min-width: 0; }
  #addBtn { --fab-right: 28px; --fab-bottom: 28px; }
  li.item { grid-template-columns: 16px var(--chev) var(--check) minmax(0, 1fr); grid-template-areas: "handle chev check title" "tools tools tools tools"; padding: 12px 16px; }
  li.item .handle { display: flex; grid-area: handle; align-items: center; height: var(--title-lh); color: var(--border); cursor: grab; }
  li.item .handle svg { width: 13px; height: 13px; }
  li.item.lever { grid-template-areas: "handle chev check title"; }
  .cal-dow { font-size: .8rem; }
  .cal-day { aspect-ratio: auto; min-height: 112px; justify-content: flex-start; align-items: stretch; padding: 6px 8px; font-size: 1rem; border: var(--bw) solid var(--border); }
  .cal-day > span:first-child { align-self: flex-start; font-weight: 600; }
  .cal-day .dot { display: none; }
  .cal-tasks { display: block; margin-top: 4px; }
  .cal-task { font-size: .72rem; line-height: 1.25; padding: 1px 4px; margin-top: 2px; border-radius: 4px; background: var(--accent-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cal-more { font-size: .68rem; color: var(--muted); margin-top: 2px; }
  .cal-title { font-size: 1.3rem; }
}

/* ---------- preview-only control strip (hidden in screenshots) ---------- */

/* ---------- live-app helpers (the real app adds these; the preview DOM has no need of them) ---------- */
.k-list-btn { cursor: pointer; background: var(--k-blue); color: #fff; padding: 2px 10px; border-radius: var(--r-pill); font-weight: 600; white-space: nowrap; }
.badge-attach .badge-x { cursor: pointer; opacity: .7; font-size: 11px; }
.stats .done-link.active { color: var(--accent); font-weight: 700; }
.swipe-bg { border-radius: var(--r-card); }
/* The red/green swipe gradient and its labels sit behind every card. Classic hides them with an opaque card;
   see-through looks (Glass, Editorial) must hide them until a card is actually mid-swipe (inline translateX). */
.swipe-wrap > .swipe-bg { visibility: hidden; transition: visibility 0s linear .2s; }   /* stays for the .18s slide-back */
.swipe-wrap:has(> li.item[style*="translateX"]) > .swipe-bg { visibility: visible; transition-delay: 0s; }
/* Classic clips a sliding card at the wrapper's rounded edge; do the same only while a card is swiped, so
   decorations drawn outside the card at rest (Timeline's dot, shadows) are never clipped. */
.swipe-wrap:has(> li.item[style*="translateX"]) { overflow: hidden; border-radius: var(--r-card); }
@media (min-width: 900px) { .topbar { padding-bottom: 64px; } }
/* calendar v3 on the phone (same as the Classic look): task titles in the day cells, a selection bar under the grid */
.cal-selbar { display: none; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: .8rem; font-weight: 600; }
.cal-selbar.on { display: flex; }
.cal-selbar button { border: 0; background: var(--accent); color: var(--on-accent, #fff); border-radius: 8px; padding: 3px 10px; font-size: .75rem; cursor: pointer; }
@media (max-width: 899px) {
  #calendar .cal-grid { gap: 2px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  #calendar .cal-day { aspect-ratio: auto; min-width: 0; min-height: 62px; overflow: hidden; justify-content: flex-start; align-items: stretch; padding: 2px; font-size: .7rem; border: 1px solid var(--border); border-radius: 6px; }
  #calendar .cal-day > span:first-child { align-self: flex-start; font-weight: 600; }
  #calendar .cal-day .dot { display: none; }
  #calendar .cal-tasks { display: block; margin-top: 1px; }
  #calendar .cal-task { font-size: .5rem; line-height: 1.2; padding: 0 2px; margin-top: 1px; border-radius: 3px; background: var(--accent-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
  #calendar .cal-more { font-size: .5rem; color: var(--muted); text-align: left; }
}

#pv { position: fixed; left: 10px; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 3000; display: flex; gap: 4px; align-items: center; max-width: calc(100% - 100px); overflow-x: auto; scrollbar-width: none; background: rgba(20,20,20,.86); color: #fff; padding: 6px 8px; border-radius: 999px; font: 600 11px/1 -apple-system, system-ui, sans-serif; backdrop-filter: blur(8px); }
#pv::-webkit-scrollbar { display: none; }
#pv button { background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 999px; padding: 6px 9px; font: inherit; white-space: nowrap; cursor: pointer; }
#pv button.on { background: #fff; color: #111; }
#pv .x { background: transparent; opacity: .7; }
body.no-pv #pv { display: none; }