/*
 * The To-do card and its controls: checkbox, title, owner, sections, priority
 * flame, state button, subtasks, pickers, and their responsive layouts.
 *
 * /money/?view=todo and /meetings/ both render this markup, so the rules live
 * here once. The host page supplies the site palette (--accent, --line,
 * --muted, --panel, --bg, --red, --green); the tokens below are the card's own.
 */
:root {
--todo-delivery: #8f5d25;
--todo-ui-text: #555b66;
--todo-title-text: #17191e;
--progress-green: #6f9a8b;
--decision-fill: #ffd95a;
}

.todo-content { color: var(--todo-ui-text); }
.todo-create { position: relative; display: flex; justify-content: flex-end; margin-bottom: 10px; }
.todo-create-open {
  height: 32px; border: 0; border-radius: 8px; background: var(--accent); color: #fff;
  padding: 0 11px; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
}
.todo-create-popover {
  position: absolute; z-index: 8; top: calc(100% + 6px); right: 0; width: min(474px, calc(100vw - 48px));
  display: grid; grid-template-columns: 90px minmax(140px, 1fr) max-content; gap: 7px; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  box-shadow: 0 8px 28px rgba(35,38,46,0.16);
}
.todo-create-popover[hidden] { display: none; }
.todo-create-popover input, .todo-create-popover select, .todo-create-popover textarea {
  min-width: 0; width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--todo-ui-text); padding: 0 9px; font: inherit; font-size: 12px;
}
.todo-create-section-picker { min-width: 0; }
.todo-create-section-picker > .todo-section-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; max-width: none; height: 34px; min-height: 34px; border-radius: 8px;
  padding: 0 9px; font-size: 12px; text-align: left;
}
.todo-create-section-picker > .todo-section-toggle::after {
  content: '▾'; flex: none; color: var(--todo-ui-text); font-size: 10px;
}
.todo-create-section-picker .todo-section-popover { z-index: 12; right: auto; left: 0; }
.todo-create-section-picker .todo-section-choice input {
  min-width: 16px; width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--accent);
}
.todo-create-popover .todo-create-title, .todo-create-popover .todo-create-subtask-title { color: var(--todo-title-text); }
.todo-create-title { grid-column: 1 / -1; }
.todo-create-popover .todo-create-description {
  grid-column: 1 / -1; box-sizing: border-box; height: 70px; padding: 7px 9px; resize: vertical;
}
.todo-create-date-picker { position: relative; min-width: 0; align-self: center; }
.todo-create-date {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--todo-ui-text); padding: 0 10px 0 11px;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  cursor: pointer;
}
.todo-create-date:hover { border-color: rgba(122,127,140,0.28); background: rgba(255,255,255,0.95); }
.todo-create-date:focus,
.todo-create-date[aria-expanded="true"] {
  border-color: var(--accent); outline: 2px solid rgba(45,110,220,0.13);
}
.todo-create-date.empty { color: var(--muted); font-weight: 500; }
.todo-create-date svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.todo-create-date-popover {
  left: 0;
  width: 252px;
  padding: 8px;
  border-radius: 14px;
  transform: translateX(var(--todo-overlay-shift, 0px));
}
.todo-week-calendar-popover { width: 280px; }
.todo-calendar-weekdays.todo-week-calendar-weekdays,
.todo-calendar-days.todo-week-calendar-days { grid-template-columns: 26px repeat(7, 1fr); }
.todo-calendar-week-number {
  min-width: 0; aspect-ratio: 1; border: 0; border-radius: 7px; background: var(--date-tint, rgba(45,110,220,0.06));
  color: var(--date, var(--accent)); padding: 0; font: inherit; font-size: 8px; font-weight: 700; cursor: pointer;
}
.todo-calendar-week-number:hover, .todo-calendar-week-number:focus {
  background: color-mix(in srgb, var(--date, var(--accent)) 14%, transparent); outline: none;
}
.todo-calendar-week-number.selected { background: var(--select, var(--accent)); color: var(--select-ink, #fff); }
.todo-calendar-day.in-selected-week { background: var(--select-tint, rgba(45,110,220,0.12)); color: var(--select, var(--accent)); font-weight: 650; }
.todo-calendar-day.in-selected-week.today { box-shadow: inset 0 0 0 1.5px var(--date-ring, rgba(45,110,220,0.65)); }
.todo-calendar-selection-hint {
  display: block; margin-top: 6px; color: var(--muted); font-size: 9px; line-height: 1.35; text-align: center;
}
.todo-create-checkbox {
  display: flex; align-items: flex-start; gap: 8px;
  min-width: 0; padding: 8px 9px;
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--todo-ui-text); background: var(--panel); font-size: 12px;
}
.todo-create-checkbox input {
  min-width: 16px !important; width: 16px !important; height: 16px !important;
  margin: 1px 0 0; padding: 0 !important; accent-color: var(--accent);
}
.todo-create-checkbox-copy { min-width: 0; display: grid; gap: 1px; }
.todo-create-checkbox-copy span {
  font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1.2; text-transform: none;
}
.todo-create-checkbox-copy small {
  color: var(--muted); font-size: 10px; font-weight: 500;
  letter-spacing: 0; line-height: 1.35; text-transform: none;
}
.todo-event-create-popover {
  width: min(474px, calc(100vw - 48px));
  grid-template-columns: 90px minmax(150px, 1fr) 110px;
}
.todo-event-create-popover .todo-create-title,
.todo-event-create-popover .todo-create-description,
.todo-event-create-popover .todo-create-date-picker,
.todo-event-create-popover .todo-create-checkbox,
.todo-event-create-popover .todo-create-actions { grid-column: 1 / -1; }
.todo-event-create-popover .todo-create-section-picker { grid-column: 1 / 3; }
.todo-event-create-popover .todo-delivery-date-kind,
.todo-event-create-popover .todo-create-date-picker { grid-column: 1 / -1; }
.todo-delivery-date-kind {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 2px 8px; align-items: center;
  min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--todo-ui-text); background: var(--panel); font-size: 12px;
}
.todo-delivery-date-kind[hidden] { display: none; }
.todo-delivery-date-kind > span { font-weight: 650; }
.todo-delivery-date-kind > select { grid-column: 2; grid-row: 1 / 3; }
.todo-delivery-date-kind > small { color: var(--muted); font-size: 9px; line-height: 1.25; }
.todo-event-create-popover .todo-create-checkbox {
  min-height: 34px;
  padding: 7px 9px;
}
.todo-event-create-popover .todo-create-checkbox input { margin-top: 0; }
.todo-event-create-popover .todo-create-checkbox-copy { gap: 0; }
.todo-create-subtasks { grid-column: 1 / -1; display: grid; gap: 5px; }
.todo-create-subtask-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 28px; gap: 6px; }
.todo-create-subtask-remove {
  border: 0; border-radius: 7px; background: rgba(217,56,56,0.07); color: var(--red); cursor: pointer;
}
.todo-create-subtask-add {
  justify-self: start; border: 0; background: transparent; color: var(--accent); padding: 3px 4px;
  font: inherit; font-size: 11px; cursor: pointer;
}
.todo-create-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.todo-create-submit, .todo-create-cancel {
  height: 30px; border: 0; border-radius: 7px; padding: 0 9px; font: inherit;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.todo-create-submit { background: var(--accent); color: #fff; }
.todo-create-cancel { background: rgba(0,0,0,0.05); color: var(--muted); }
.todo-create-open:disabled, .todo-create-popover button:disabled,
.todo-create-popover input:disabled, .todo-create-popover select:disabled,
.todo-create-popover textarea:disabled { opacity: 0.55; cursor: wait; }
.todo-create-state { margin-right: auto; color: var(--muted); font-size: 11px; }
.todo-create-state.error { color: var(--red); }
.todo-toolbar {
  display: grid; grid-template-columns: minmax(190px, 1fr) 125px 170px 125px 125px 38px;
  gap: 8px; margin-bottom: 14px; align-items: center;
}
.todo-toolbar > input {
  min-width: 0; width: 100%; height: 38px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); color: var(--todo-ui-text); padding: 0 14px;
  font: inherit;
}
.todo-toolbar > input:focus {
  border-color: var(--accent); outline: 2px solid rgba(45,110,220,0.13);
}
.todo-filter-picker { position: relative; min-width: 0; align-self: center; }
.todo-filter-toggle {
  min-width: 0; width: 100%; height: 32px;
  border: 1px solid rgba(122,127,140,0.2); border-radius: 999px;
  background: rgba(255,255,255,0.88); color: var(--todo-ui-text); padding: 0 32px 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.todo-filter-toggle:hover { border-color: rgba(122,127,140,0.28); background: rgba(255,255,255,0.95); }
.todo-filter-toggle:focus {
  border-color: var(--accent); outline: 2px solid rgba(45,110,220,0.13);
}
.todo-filter-toggle.active,
.todo-filter-toggle[aria-expanded="true"] {
  border-color: var(--select-ring, rgba(45,110,220,0.3)); background: var(--select-tint, rgba(45,110,220,0.08)); color: var(--select, var(--accent));
}
.todo-filter-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.todo-filter-toggle::after {
  content: ''; flex: none; width: 14px; height: 14px; opacity: 0.76;
  background: center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555b66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4-4 4 4M4 10l4 4 4-4'/%3E%3C/svg%3E");
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.todo-filter-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.todo-filter-popover {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  box-sizing: border-box; min-width: 100%; width: max-content; max-width: min(280px, calc(100vw - 24px)); padding: 8px;
  border: 1px solid rgba(122,127,140,0.18); border-radius: 14px; background: rgba(255,255,255,0.97);
  box-shadow: 0 16px 36px rgba(35,38,46,0.14); backdrop-filter: blur(10px);
  display: grid; gap: 6px;
}
.todo-filter-popover[hidden] { display: none; }
.todo-filter-choice {
  position: relative;
  display: flex; align-items: center; min-height: 30px; gap: 8px; padding: 0 12px; border-radius: 999px;
  border: 1px solid transparent; background: rgba(122,127,140,0.05);
  color: var(--todo-ui-text); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.todo-filter-choice::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 999px; background: rgba(122,127,140,0.35);
  transition: background 0.14s ease, box-shadow 0.14s ease;
}
.todo-filter-choice:hover { border-color: rgba(122,127,140,0.14); background: rgba(122,127,140,0.08); }
.todo-filter-choice input { position: absolute; opacity: 0; pointer-events: none; }
.todo-filter-choice:has(input:checked) {
  border-color: var(--select-ring, rgba(45,110,220,0.24)); background: var(--select-tint, rgba(45,110,220,0.09)); color: var(--select, var(--accent));
}
.todo-filter-choice:has(input:checked)::before {
  background: currentColor; box-shadow: 0 0 0 4px var(--select-tint, rgba(45,110,220,0.12));
}
.todo-filter-choice.all { color: var(--muted); }
.todo-filter-choice.all:has(input:checked) { color: var(--select, var(--accent)); }
.todo-filter-clear {
  box-sizing: border-box; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--muted);
  padding: 8px; cursor: pointer;
}
.todo-filter-clear:hover, .todo-filter-clear:focus {
  border-color: var(--accent); color: var(--accent); outline: 2px solid rgba(45,110,220,0.13);
}
.todo-filter-clear:disabled { opacity: 0.32; cursor: default; pointer-events: none; }
.todo-filter-clear svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.todo-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.todo-show-completed {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel); color: var(--muted);
  padding: 5px 9px; font: inherit; font-size: 12px; cursor: pointer;
}
.todo-show-completed:has(input:checked) { color: var(--select, var(--accent)); border-color: var(--select-ring, rgba(45,110,220,0.3)); }
.todo-show-completed input { margin: 0; accent-color: var(--select, var(--accent)); }
.todo-calendar-sync {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(45,110,220,0.3);
  border-radius: 999px; background: rgba(45,110,220,0.07); color: var(--accent);
  padding: 0; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; flex: none;
}
.todo-calendar-sync:hover, .todo-calendar-sync:focus { background: rgba(45,110,220,0.13); outline: none; }
.todo-calendar-sync:disabled { opacity: 0.55; cursor: wait; }
.todo-calendar-sync-icon { width: 22px; height: 22px; display: block; }
.todo-calendar-sync-state { align-self: center; color: var(--muted); font-size: 11px; }
.todo-calendar-sync-state.error { color: var(--red); }
.todo-inbox {
  position: relative;
  margin: 16px 0 34px; padding: 18px 18px 8px;
  border: 1px solid rgba(45,110,220,0.28); border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(45,110,220,0.17), transparent 34%),
    linear-gradient(145deg, rgba(45,110,220,0.14), rgba(255,255,255,0.97) 58%, rgba(45,110,220,0.05));
  box-shadow: 0 16px 38px rgba(45,110,220,0.11), inset 0 1px 0 rgba(255,255,255,0.72);
}
.todo-inbox::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}
.todo-inbox h2 {
  display: flex; align-items: center; gap: 10px; margin: 0; color: var(--accent); font-size: 16px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.todo-inbox-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;
}
.todo-inbox-head .todo-section-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: rgba(45,110,220,0.13); color: var(--accent);
}
.todo-inbox .todo-create { flex: none; margin: 0; }
.todo-inbox .todo-list { margin-bottom: 0 !important; padding-top: 2px !important; }
.todo-inbox .todo-empty { padding: 20px 12px 24px; color: rgba(45,110,220,0.78); }
.todo-section { margin-top: 18px; }
.todo-section h2 {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#content .todo-section summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  cursor: pointer; list-style: none; font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); font-weight: 600;
  margin: 26px 0 10px; padding-top: 14px; border-top: 1px solid var(--line);
}
.todo-section summary::-webkit-details-marker { display: none; }
.todo-section summary::before {
  content: '▸'; display: inline-block; transition: transform 0.12s ease;
}
.todo-section[open] summary::before { transform: rotate(90deg); }
.todo-events-summary-copy { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.todo-events summary > .todo-create { justify-self: end; margin: 0; }
.todo-events-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  margin: 0 0 12px;
}
.todo-events-search {
  min-width: 0; flex: 1 1 240px; width: min(320px, 100%); height: 38px; margin-right: auto;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  color: var(--todo-ui-text); padding: 0 14px; font: inherit;
}
.todo-events-search:focus {
  border-color: var(--accent); outline: 2px solid rgba(45,110,220,0.13);
}
.todo-events-filter {
  flex: 0 1 170px; min-width: min(170px, 100%); height: 32px;
  border: 1px solid rgba(122,127,140,0.2); border-radius: 999px;
  background: rgba(255,255,255,0.88); color: var(--todo-ui-text);
  padding: 0 32px 0 12px; font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
}
.todo-events-filter:focus {
  border-color: var(--accent); outline: 2px solid rgba(45,110,220,0.13);
}
.todo-section-count {
  color: var(--muted); font-size: 11px; letter-spacing: 0; font-weight: 600;
}
.todo-list { list-style: none; padding: 0 !important; margin: 0 !important; }
/* A row sizes itself from its own width, not from the window: a task inside a
   meeting is the same line item as on /money/?view=todo, and a 528px meeting
   card must not pick up the 761px badge grid just because the page is wide.
   The container is the row. Putting it on the whole list makes a title
   keystroke restyle every task. */
.todo-item { container-type: inline-size; }
.todo-item {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 7px;
  align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.todo-item:last-child { border-bottom: 0; }
.todo-complete, .todo-delivery-review-complete {
  width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer;
}
.todo-title { min-width: 0; color: var(--todo-title-text); line-height: 1.42; overflow-wrap: anywhere; cursor: text; }
.todo-title:focus { outline: 2px solid rgba(45,110,220,0.2); outline-offset: 2px; border-radius: 2px; }
.todo-item.completed .todo-title { color: var(--muted); text-decoration: line-through; }
.todo-complete, .todo-delivery-review-complete { grid-column: 1; grid-row: 1; }
.todo-main { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; }
.todo-title, .todo-title-edit { grid-column: 1; grid-row: 1; }
.todo-title-edit {
  box-sizing: border-box; min-width: 0; width: 100%; height: 28px; border: 1px solid var(--accent); border-radius: 6px;
  background: var(--panel); color: var(--todo-title-text); padding: 3px 7px; font: inherit; font-size: inherit;
}
.todo-detail-dialog {
  width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 14px; padding: 0; background: var(--panel); color: var(--todo-ui-text);
  box-shadow: 0 18px 56px rgba(35,38,46,0.28);
}
.todo-detail-dialog::backdrop { background: rgba(27,30,37,0.42); backdrop-filter: blur(2px); }
.todo-detail-form { display: grid; gap: 12px; padding: 20px; }
.todo-detail-form h2 { margin: 0; color: var(--todo-title-text); font-size: 18px; }
.todo-detail-field { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 650; }
.todo-detail-field input, .todo-detail-description {
  box-sizing: border-box; width: 100%; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--todo-title-text); padding: 8px 9px; font: inherit; font-size: 13px; font-weight: 400;
}
.todo-detail-description {
  min-height: 130px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
}
.todo-detail-description:focus { outline: 2px solid rgba(45,110,220,0.2); outline-offset: 1px; }
.todo-detail-description a { color: var(--accent); }
.todo-detail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.todo-detail-state { margin-right: auto; color: var(--red); font-size: 11px; }
.todo-detail-cancel, .todo-detail-save {
  min-height: 32px; border: 0; border-radius: 8px; padding: 0 11px; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
}
.todo-detail-cancel { background: rgba(0,0,0,0.05); color: var(--muted); }
.todo-detail-save { background: var(--accent); color: #fff; }
.todo-delete {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted); opacity: 0.14;
  padding: 5px; cursor: pointer;
}
.todo-delete:hover, .todo-delete:focus { background: rgba(217,56,56,0.08); color: var(--red); opacity: 1; }
.todo-delete svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.todo-subtasks {
  grid-column: 2 / -1; grid-row: 2; display: grid; gap: 2px; margin-top: 3px;
}
.todo-subtask {
  display: grid; grid-template-columns: 15px minmax(0, 1fr) 24px 1px 86px 160px 30px 32px 28px; gap: 5px;
  align-items: start; min-height: 28px; border-radius: 6px;
}
.todo-subtask:hover, .todo-subtask:focus-within { background: rgba(45,110,220,0.025); }
.todo-item.todo-reveal-event, .todo-subtask.todo-reveal-event {
  outline: 2px solid rgba(45,110,220,0.38); outline-offset: 3px;
}
.todo-subtask-complete { grid-column: 1; grid-row: 1; }
.todo-subtask-copy { grid-column: 2; grid-row: 1; }
.todo-subtask-delete { grid-column: 3; grid-row: 1; }
.todo-subtask-owner { grid-column: 5; grid-row: 1; }
.todo-subtask > .todo-section-picker { grid-column: 6; grid-row: 1; min-width: 0; }
.todo-subtask > .todo-section-picker .todo-section-toggle { width: 100%; }
.todo-subtask > .todo-section-picker.same-as-parent { width: 160px; justify-self: start; }
.todo-subtask > .todo-section-picker.same-as-parent .todo-section-toggle {
  width: 100%; min-width: 0; text-align: center; font-weight: 700; letter-spacing: 1px;
}
.todo-subtask > .todo-controls > .todo-decision-edit { grid-column: 7; grid-row: 1; justify-self: center; }
.todo-subtask .todo-state-controls { grid-column: 9; grid-row: 1; }
.todo-subtask-complete { width: 14px; height: 14px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.todo-subtask-copy { min-width: 0; display: grid; gap: 2px; }
.todo-subtask-title { min-width: 0; color: var(--todo-title-text); font-size: 12px; line-height: 1.35; overflow-wrap: break-word; cursor: inherit; }
.todo-subtask.completed .todo-subtask-title { color: var(--muted); text-decoration: line-through; }
.todo-subtask-title-edit {
  min-width: 0; width: 100%; height: 26px; border: 1px solid var(--accent); border-radius: 6px;
  background: var(--panel); color: var(--todo-title-text); padding: 2px 6px; font: inherit; font-size: 12px;
}
/*
 * Extra copy in the body slot — a meeting's Image 1 / Image 2 chips — sits
 * under the title. The main column is already a one-column grid, so the
 * chips take the next row without a second layout.
 */
.todo-main > .mtg-shots,
.todo-subtask-copy > .mtg-shots { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/*
 * A reduced row: title, checkbox and owner. Only the aggregated crew list
 * on /meetings/ uses this; a task inside a meeting is the full line item.
 */
.todo-item.todo-compact { grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; }
.todo-compact > .todo-complete { grid-column: 1; grid-row: 1; }
/* Title first, then whatever hangs off it: a short notice stays on that line,
   anything longer takes its own. */
.todo-compact > .todo-main,
.todo-compact .todo-subtask > .todo-subtask-copy {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px;
}
.todo-compact > .todo-main { grid-column: 2; grid-row: 1; }
.todo-compact > .todo-main > .todo-title,
.todo-compact .todo-subtask-copy > .todo-subtask-title { flex: 0 1 auto; }
/* The photos pinned to a task are a row of their own beneath the title rather
   than something competing with it for the first line. */
.todo-compact .todo-main > .mtg-shots,
.todo-compact .todo-subtask-copy > .mtg-shots { flex-basis: 100%; }
.todo-compact .todo-main > .mtg-extras,
.todo-compact .todo-subtask-copy > .mtg-extras { flex-basis: 100%; display: grid; gap: 4px; }
.todo-compact > .todo-badges,
.todo-compact .todo-badges {
  grid-column: 3; grid-row: 1; display: flex; width: auto; gap: 8px; align-items: center;
}
.todo-compact .todo-badges .todo-controls,
.todo-compact .todo-subtask > .todo-controls { display: inline-flex; }
.todo-compact > .todo-subtasks { grid-column: 2 / -1; grid-row: 2; gap: 4px; }
.todo-compact .todo-subtask { display: flex; align-items: flex-start; gap: 8px; }
.todo-compact .todo-subtask > .todo-subtask-copy { flex: 1; }
.todo-compact .todo-subtask .todo-subtask-title { font-size: 13px; }
.todo-compact .todo-subtask-add { justify-self: start; }
@media (max-width: 640px) {
  /* Too narrow to keep the controls beside the title: they take their own row. */
  .todo-item.todo-compact { grid-template-columns: 18px minmax(0, 1fr); }
  .todo-compact > .todo-badges { grid-column: 2; grid-row: 2; flex-wrap: wrap; margin-top: 4px; }
  .todo-compact > .todo-subtasks { grid-column: 2; grid-row: 3; }
  .todo-compact .todo-subtask { flex-wrap: wrap; }
  .todo-compact .todo-subtask > .todo-subtask-copy { flex-basis: 100%; }
}

.todo-missed-schedule {
  grid-column: 1 / -1; color: var(--muted); font-size: 10px; line-height: 1.35;
}
.todo-unblocked-event-link {
  border: 0; background: transparent; color: var(--accent); padding: 0; font: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.todo-unblocked-event-link:hover, .todo-unblocked-event-link:focus { opacity: 0.72; }
.todo-subtask-new {
  box-sizing: border-box; width: min(460px, 100%); height: 28px; border: 1px solid var(--accent);
  border-radius: 7px; background: var(--panel); color: var(--todo-title-text); padding: 2px 7px; font: inherit; font-size: 12px;
}
.todo-subtask-new:invalid { border-color: var(--red); }
.todo-subtask-owner { width: 86px; }
.todo-subtask-delete {
  width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); opacity: 0.12; padding: 5px; cursor: pointer;
}
.todo-subtask > .todo-subtask-delete:hover, .todo-subtask > .todo-subtask-delete:focus { background: rgba(217,56,56,0.08); color: var(--red); opacity: 1; }
.todo-subtask-delete svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.todo-subtask-add {
  justify-self: start; border: 0; border-radius: 6px; background: transparent; color: var(--accent);
  padding: 1px 5px; font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.todo-subtask-add:hover, .todo-subtask-add:focus { background: rgba(45,110,220,0.07); }
.todo-state-controls, .todo-state-picker { position: relative; display: block; width: 28px; height: 28px; }
.todo-state-menu {
  position: absolute; z-index: 13; top: calc(100% + 6px); left: 50%;
  transform: translateX(calc(-50% + var(--todo-overlay-shift, 0px)));
  box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: max-content;
  max-width: var(--todo-overlay-max-width, calc(100vw - 24px)); padding: 5px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  box-shadow: 0 8px 24px rgba(35,38,46,0.16);
}
.todo-state-menu[hidden] { display: none; }
.todo-blocker-picker, .todo-calendar-picker, .todo-reminder-picker { position: relative; height: 28px; align-self: center; }
.todo-state-toggle {
  display: grid; place-items: center; box-sizing: border-box; width: 28px; height: 28px; min-height: 28px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted);
  padding: 0; font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
}
.todo-state-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.todo-blocker-toggle.blocked { border-color: rgba(217,56,56,0.3); background: rgba(217,56,56,0.08); color: var(--red); }
.todo-calendar-toggle.active { border-color: var(--select-ring, rgba(45,110,220,0.3)); background: var(--select-tint, rgba(45,110,220,0.1)); color: var(--select, var(--accent)); }
.todo-calendar-toggle.delivery-date { border-color: rgba(143,93,37,0.22); background: rgba(143,93,37,0.1); color: var(--todo-delivery); }
.todo-calendar-toggle.muted-event { border-color: rgba(122,127,140,0.18); background: rgba(122,127,140,0.06); color: var(--muted); }
.todo-reminder-toggle.active { border-color: var(--select-ring, rgba(45,110,220,0.3)); background: var(--select-tint, rgba(45,110,220,0.1)); color: var(--select, var(--accent)); }
.todo-go-toggle.active { border-color: rgba(42,157,110,0.32); background: rgba(42,157,110,0.1); color: var(--green); }
.todo-progress-toggle, .todo-progress-toggle.active { border: 0; background: transparent; color: var(--muted); }
.todo-state-toggle svg.todo-progress-icon { width: 100%; height: 100%; }
.todo-progress-track { fill: #f0f1f3; stroke: #d5d8de; stroke-width: 1; }
.todo-progress-fill { fill: #aeb4be; stroke: none; }
.todo-progress-complete { fill: var(--progress-green); stroke: none; }
.todo-progress-check { fill: none; stroke: #fff; stroke-width: 2.4; }
.todo-state-menu-toggle.blocked { border-color: rgba(217,56,56,0.3); background: rgba(217,56,56,0.08); color: var(--red); }
.todo-state-menu-toggle.scheduled { border-color: var(--select-ring, rgba(45,110,220,0.3)); background: var(--select-tint, rgba(45,110,220,0.1)); color: var(--select, var(--accent)); }
.todo-state-menu-toggle.reminder { border-color: var(--select-ring, rgba(45,110,220,0.3)); background: var(--select-tint, rgba(45,110,220,0.1)); color: var(--select, var(--accent)); }
.todo-state-menu-toggle.go { border-color: rgba(42,157,110,0.32); background: rgba(42,157,110,0.1); color: var(--green); }
.todo-state-menu-toggle.progress { border: 0; background: transparent; color: var(--muted); }
.todo-blocker-popover, .todo-calendar-popover, .todo-reminder-popover {
  position: absolute; z-index: 14; top: calc(100% + 6px); left: 50%;
  box-sizing: border-box; width: 260px;
  max-width: var(--todo-overlay-max-width, calc(100vw - 24px)); padding: 8px;
  transform: translateX(calc(-50% + var(--todo-overlay-shift, 0px)));
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  box-shadow: 0 8px 24px rgba(35,38,46,0.16);
}
.todo-blocker-popover[hidden] { display: none; }
.todo-blocker-search, .todo-blocked-reason {
  box-sizing: border-box; width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); color: var(--todo-ui-text); padding: 0 8px; font: inherit; font-size: 11px;
}
.todo-blocked-reason { margin-top: 6px; }
.todo-blocker-options {
  display: block; max-height: 128px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-gutter: stable; margin: 6px 0;
}
.todo-blocker-choice { display: flex; gap: 7px; align-items: start; padding: 5px; border-radius: 6px; font-size: 11px; cursor: pointer; }
.todo-blocker-choice:hover { background: rgba(45,110,220,0.07); }
.todo-blocker-choice input { margin: 1px 0 0; }
.todo-calendar-popover {
  left: 50%;
}
.todo-calendar-popover, .todo-reminder-popover {
  width: 252px; padding: 6px; border-radius: 9px;
}
.todo-calendar-popover[hidden] { display: none; }
.todo-reminder-popover[hidden], .todo-reminder-calendar[hidden] { display: none; }
.todo-reminder-current {
  display: block; margin-bottom: 6px; padding: 5px 7px; border-radius: 6px;
  background: var(--select-tint, rgba(45,110,220,0.1)); color: var(--select, var(--accent)); font-size: 10px; font-weight: 650; text-align: center;
}
.todo-reminder-current[hidden] { display: none; }
.todo-reminder-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.todo-reminder-choices button {
  min-height: 24px; border: 0; border-radius: 6px; background: var(--select-tint, rgba(45,110,220,0.08));
  color: var(--select, var(--accent)); padding: 2px 3px; font: inherit; font-size: 9px; cursor: pointer;
}
.todo-reminder-choices button:hover, .todo-reminder-choices button:focus { background: color-mix(in srgb, var(--select, var(--accent)) 15%, transparent); }
.todo-reminder-choices button.selected { background: var(--select, var(--accent)); color: var(--select-ink, white); font-weight: 700; }
.todo-reminder-calendar { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.todo-calendar-header { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; margin-bottom: 4px; }
.todo-calendar-caption, .todo-reminder-caption { text-align: center; font-size: 11px; }
.todo-calendar-nav {
  width: 24px; height: 24px; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  padding: 0; font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.todo-calendar-nav:hover, .todo-calendar-nav:focus { background: rgba(45,110,220,0.08); color: var(--accent); }
.todo-calendar-weekdays, .todo-calendar-days, .todo-reminder-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.todo-calendar-weekdays span { padding: 1px 0 3px; color: var(--muted); text-align: center; font-size: 8px; font-weight: 650; }
.todo-calendar-day {
  aspect-ratio: 1; border: 0; border-radius: 999px; background: transparent; color: var(--todo-ui-text);
  padding: 0; font: inherit; font-size: 9px; cursor: pointer;
}
.todo-calendar-day:hover, .todo-calendar-day:focus { background: rgba(45,110,220,0.09); outline: none; }
.todo-calendar-day.today { box-shadow: inset 0 0 0 1.5px var(--date-ring, rgba(45,110,220,0.65)); color: var(--date, var(--accent)); font-weight: 700; }
.todo-calendar-day.selected { background: var(--select, var(--accent)); color: var(--select-ink, white); font-weight: 700; box-shadow: none; }
.todo-calendar-day.selected.today { box-shadow: 0 0 0 2px var(--select-tint, rgba(45,110,220,0.25)); }
.todo-calendar-day.outside { visibility: hidden; pointer-events: none; }
.todo-calendar-choice {
  display: grid; grid-template-columns: 16px 1fr; column-gap: 6px; align-items: center;
  margin-top: 6px; padding: 6px 7px; border-radius: 6px; background: rgba(45,110,220,0.06);
  color: var(--todo-ui-text); font-size: 10px; cursor: pointer;
}
.todo-calendar-choice input { margin: 0; }
.todo-calendar-choice small { grid-column: 2; color: var(--muted); font-size: 8px; line-height: 1.25; }
.todo-calendar-choice:has(input:disabled) { opacity: 0.55; cursor: default; }
.todo-calendar-open {
  box-sizing: border-box; display: block; width: 100%; margin-top: 5px; padding: 5px;
  border: 0; border-radius: 6px; font: inherit; font-size: 10px; text-align: center; cursor: pointer;
}
.todo-calendar-open { background: rgba(45,110,220,0.08); color: var(--accent); text-decoration: none; }
.todo-calendar-open:hover, .todo-calendar-open:focus { background: rgba(45,110,220,0.15); outline: none; }
.todo-badges { grid-column: 3; grid-row: 1; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.todo-badge {
  display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px;
  border-radius: 999px; background: rgba(0,0,0,0.04); color: var(--muted);
  font-size: 11px; white-space: nowrap;
}
.todo-badge.high { background: rgba(217,56,56,0.1); color: var(--red); font-weight: 650; }
.todo-badge.medium { background: rgba(45,110,220,0.1); color: var(--accent); }
.todo-badge.low { background: rgba(122,127,140,0.12); }
.todo-owner-edit, .todo-subtask-owner, .todo-section-toggle {
  box-sizing: border-box; height: 28px; min-height: 28px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--todo-ui-text); padding: 2px 7px; font: inherit; font-size: 11px; line-height: 1;
}
.todo-owner-edit, .todo-subtask-owner { max-width: 86px; }
.todo-section-picker, .todo-priority-picker { position: relative; }
.todo-section-picker:has(.todo-section-popover:not([hidden])) { z-index: 30; }
.todo-section-toggle { max-width: 160px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.todo-section-popover {
  position: absolute; z-index: 10; top: calc(100% + 6px); right: 0; width: 230px;
  padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  box-shadow: 0 8px 24px rgba(35,38,46,0.16);
}
.todo-section-popover[hidden] { display: none; }
.todo-section-options { display: block; max-height: 220px; overflow: auto; overscroll-behavior: contain; }
.todo-section-choice {
  display: flex; align-items: center; gap: 7px; padding: 6px; border-radius: 7px;
  color: var(--todo-ui-text); font-size: 12px; cursor: pointer;
}
.todo-section-choice:hover { background: rgba(45,110,220,0.07); }
.todo-section-choice input { margin: 0; }
.todo-section-add {
  width: 100%; margin-top: 5px; padding: 6px; border: 0; border-top: 1px solid var(--line);
  background: transparent; color: var(--accent); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
/* Decision, priority and state travel as one unit; see todo-controls.js. */
.todo-controls { display: inline-flex; gap: 5px; align-items: center; }
.todo-badges .todo-controls, .todo-subtask > .todo-controls { display: contents; }
.todo-decision-edit {
  box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 28px; min-height: 28px;
  border: 1px solid transparent; border-radius: 999px; background: transparent; padding: 3px 5px;
  color: #c6cad1; cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.todo-decision-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.todo-decision-edit:hover { background: rgba(0,0,0,0.045); transform: translateY(-1px); }
.todo-decision-edit.on { color: var(--decision, #c58a00); }
.todo-decision-edit.on svg { fill: var(--decision-fill, #ffd95a); }
.todo-decision-edit:focus { border-color: var(--accent); outline: 2px solid rgba(45,110,220,0.13); outline-offset: 1px; }
.todo-decision-edit:disabled { opacity: 0.45; cursor: default; }
.todo-priority-edit {
  box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 28px; min-height: 28px;
  border: 1px solid transparent; border-radius: 999px; background: transparent; padding: 3px 5px; cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.todo-priority-edit svg { width: 15px; height: 20px; overflow: visible; }
.todo-priority-flame { fill: currentColor; }
.todo-priority-core { display: block; }
.todo-priority-edit.low { color: #c6cad1; }
.todo-priority-edit.medium { color: #555b66; }
.todo-priority-edit.urgent { color: #ed5a24; }
.todo-priority-edit.low .todo-priority-core { fill: #eef0f3; }
.todo-priority-edit.medium .todo-priority-core { fill: #9299a4; }
.todo-priority-edit.urgent .todo-priority-core { fill: #ffc947; }
.todo-priority-edit:hover { background: rgba(0,0,0,0.045); transform: translateY(-1px); }
.todo-priority-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: rgba(45,110,220,0.07);
  outline: 2px solid rgba(45,110,220,0.13);
  outline-offset: 1px;
}
.todo-priority-popover {
  position: absolute; z-index: 10; top: calc(100% + 6px); right: 0;
  display: flex; gap: 5px; padding: 5px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  box-shadow: 0 8px 24px rgba(35,38,46,0.16);
  transform: translateX(var(--todo-overlay-shift, 0px));
}
.todo-priority-popover[hidden] { display: none; }
.todo-priority-option.active {
  border-color: rgba(122,127,140,0.18);
  background: rgba(0,0,0,0.045);
}
.todo-create-popover .todo-priority-picker,
.todo-create-popover .todo-controls { align-self: center; justify-self: center; }
.todo-owner-edit:focus, .todo-section-toggle:focus, .todo-priority-edit:focus {
  border-color: var(--accent); outline: 2px solid rgba(45,110,220,0.13); outline-offset: 1px;
}
.todo-owner-edit:disabled, .todo-section-toggle:disabled, .todo-section-choice input:disabled,
.todo-section-add:disabled, .todo-priority-edit:disabled,
.todo-complete:disabled, .todo-delete:disabled, .todo-subtask-complete:disabled,
.todo-subtask-owner:disabled, .todo-subtask-delete:disabled,
.todo-subtask-add:disabled { opacity: 0.55; cursor: wait; }
.todo-save-state { color: var(--muted); font-size: 11px; align-self: center; }
.todo-save-state:empty { display: none; }
.todo-save-state.error { color: var(--red); }
.todo-empty { color: var(--muted); text-align: center; padding: 42px 12px; }
.todo-event-list { list-style: none; padding: 0 !important; margin: 0 !important; }
.todo-event-item {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}
.todo-event-item .todo-main {
  grid-column: 1; grid-row: 1;
  min-width: 0; position: static; display: grid; gap: 4px;
}
.todo-event-item .todo-title { cursor: default; }
.todo-event-item.editable .todo-title { cursor: text; }
.todo-event-item.adoptable .todo-title { cursor: text; }
.todo-event-item .todo-badges {
  grid-column: 2; grid-row: 1;
  width: auto; gap: 8px;
}
.todo-event-item .todo-state-controls,
.todo-event-item .todo-state-picker,
.todo-event-item .todo-state-toggle {
  width: 28px; height: 28px;
}
.todo-event-item .todo-state-toggle { cursor: default; }
.todo-event-item.interactive .todo-state-toggle { cursor: pointer; }
.todo-event-item.editable .todo-state-toggle { cursor: pointer; }
.todo-state-menu .todo-event-kind-inactive {
  border-color: rgba(122,127,140,0.16);
  background: rgba(122,127,140,0.03);
  color: var(--muted);
}
.todo-event-item .todo-event-delivery-toggle.active {
  border-color: rgba(143,93,37,0.22); background: rgba(143,93,37,0.1); color: var(--todo-delivery);
}
.todo-event-item .todo-event-delivery-toggle.muted-event {
  border-color: rgba(122,127,140,0.18); background: rgba(122,127,140,0.06); color: var(--muted);
}
.todo-item:not(.todo-event-item) .todo-event-delivery-toggle {
  border-color: rgba(143,93,37,0.22); background: rgba(143,93,37,0.1); color: var(--todo-delivery);
}
.todo-delivery-date-modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 7px;
}
.todo-delivery-date-modes button {
  min-height: 28px; border: 1px solid rgba(122,127,140,0.18); border-radius: 7px;
  background: rgba(122,127,140,0.05); color: var(--muted); padding: 4px 6px;
  font: inherit; font-size: 9px; font-weight: 650; cursor: pointer;
}
.todo-delivery-date-modes button.selected {
  border-color: rgba(143,93,37,0.28); background: rgba(143,93,37,0.1); color: var(--todo-delivery);
}
.todo-delivery-tbd {
  box-sizing: border-box; width: 100%; min-height: 26px; margin-top: 6px;
  border: 1px solid rgba(122,127,140,0.18); border-radius: 7px;
  background: rgba(122,127,140,0.05); color: var(--muted);
  padding: 4px 6px; font: inherit; font-size: 9px; font-weight: 650; cursor: pointer;
}
.todo-delivery-tbd:hover, .todo-delivery-tbd:focus,
.todo-delivery-tbd.selected {
  border-color: rgba(143,93,37,0.28); background: rgba(143,93,37,0.1); color: var(--todo-delivery);
}
.todo-event-item .todo-event-date-badge { font-weight: 650; }
.todo-event-item .todo-calendar-open {
  margin-top: 2px;
  width: auto; max-width: 220px;
}
.todo-events {
  margin-top: 40px; padding: 12px 16px 4px;
  border: 1px solid rgba(122,127,140,0.14); border-radius: 14px;
  background: linear-gradient(180deg, rgba(122,127,140,0.035), rgba(122,127,140,0.01));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.68);
}
#content .todo-events summary {
  margin: 0 0 8px; padding: 0 0 10px; border-top: 0; border-bottom: 1px solid rgba(122,127,140,0.12);
  color: rgba(85,91,102,0.92);
}
.todo-events .todo-section-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: rgba(122,127,140,0.08);
}
.todo-events-passed {
  margin-top: 10px;
  padding-top: 2px;
  border-top: 1px solid rgba(122,127,140,0.1);
}
.todo-events-passed .todo-section-count {
  background: rgba(122,127,140,0.1);
}
.todo-events .todo-empty { padding: 18px 0 6px; text-align: left; }
.todo-content select {
  appearance: none; -webkit-appearance: none; color: var(--todo-ui-text); -webkit-text-fill-color: var(--todo-ui-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23555b66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4-4 4 4M4 10l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 14px 14px;
  padding-right: 24px !important;
}
.todo-content select option { color: var(--todo-ui-text); }
select.todo-owner-edit,
select.todo-subtask-owner,
#todo-create-owner,
select.todo-create-subtask-owner {
  appearance: auto; -webkit-appearance: menulist; background-image: none; padding-right: 6px !important;
  color: var(--todo-ui-text); -webkit-text-fill-color: var(--todo-ui-text);
}
@media (hover: none) {
  .todo-delete, .todo-subtask-delete { opacity: 0.4; }
}
@container (min-width: 761px) {
  .todo-badges {
    display: grid; grid-template-columns: 24px 1px 86px 160px 30px 32px 28px;
    width: 391px; align-items: center; justify-content: initial;
  }
  .todo-badges > .todo-delete { grid-column: 1; justify-self: end; }
  .todo-badges > .todo-owner-edit { grid-column: 3; }
  .todo-badges > .todo-section-picker { grid-column: 4; }
  .todo-badges .todo-decision-edit { grid-column: 5; justify-self: center; }
  .todo-badges .todo-priority-picker { grid-column: 6; }
  .todo-badges .todo-state-controls { grid-column: 7; }
  .todo-owner-edit, .todo-subtask-owner, .todo-section-toggle {
    width: 100%; max-width: none; box-sizing: border-box;
  }
  .todo-priority-picker { justify-self: center; }
  .todo-section-picker { min-width: 0; }
  .todo-subtask > .todo-section-picker {
    width: 160px; justify-self: center;
  }
  .todo-subtask > .todo-section-picker .todo-section-toggle {
    height: 28px; min-height: 28px; padding: 2px 7px; font-size: 11px;
  }
  .todo-subtask > .todo-section-picker.same-as-parent {
    width: 160px; justify-self: center;
  }
  .todo-subtask > .todo-section-picker.same-as-parent .todo-section-toggle {
    width: 100%; min-width: 0;
  }
  .todo-subtask .todo-state-controls,
  .todo-subtask .todo-state-controls > .todo-state-picker {
    width: 22px; height: 22px; justify-self: center;
  }
  .todo-subtask .todo-state-controls > .todo-state-picker > .todo-state-menu-toggle {
    width: 22px; height: 22px; min-height: 22px;
  }
  .todo-subtask .todo-state-controls > .todo-state-picker > .todo-state-menu-toggle svg {
    width: 12px; height: 12px;
  }
  .todo-event-item .todo-badges {
    display: flex; width: auto; justify-content: flex-end;
  }
  .todo-save-state { grid-column: 1 / -1; justify-self: end; }
}
/* A ~528px meeting card is wide enough for the page but not for the desktop
   subtask grid: the fixed control columns leave too little room for the
   title and overflow-wrap breaks it one character per line. Match the stacked
   subtask row the viewport query uses, keyed on the list width not the window. */
@container (max-width: 760px) {
  .todo-subtask {
    grid-template-columns: 22px minmax(0, 1fr) 40px 32px; gap: 8px;
    position: relative; padding: 10px 0; min-height: 120px;
  }
  .todo-subtask-complete { grid-column: 1; grid-row: 1; width: 22px; height: 22px; margin-top: 1px; }
  .todo-subtask-copy { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
  .todo-subtask-title { font-size: 16px; line-height: 1.35; }
  .todo-subtask-title-edit { height: 38px; font-size: 16px; }
  .todo-subtask-owner {
    grid-column: 2; grid-row: 2; width: 86px; max-width: 86px; height: 40px; min-height: 40px;
    padding: 2px 10px; font-size: 14px;
  }
  .todo-subtask > .todo-section-picker { grid-column: 2 / -1; grid-row: 3; width: 100%; }
  .todo-subtask > .todo-section-picker .todo-section-toggle {
    width: 100%; max-width: none; height: 40px; padding: 2px 10px; font-size: 14px;
  }
  .todo-subtask > .todo-section-picker.same-as-parent { width: 100%; }
  .todo-subtask > .todo-section-picker.same-as-parent .todo-section-toggle {
    width: 100%; min-width: 0;
  }
  .todo-subtask .todo-state-controls { grid-column: 3; grid-row: 2; }
  .todo-subtask > .todo-controls > .todo-decision-edit { grid-column: 4; grid-row: 2; justify-self: center; }
  .todo-subtask-delete {
    position: absolute; top: 10px; right: 0; width: 32px; height: 32px;
  }
  .todo-subtask .todo-state-controls, .todo-subtask .todo-state-picker,
  .todo-subtask .todo-blocker-picker, .todo-subtask .todo-calendar-picker,
  .todo-subtask .todo-reminder-picker { width: 38px; height: 38px; }
  .todo-subtask .todo-state-controls { justify-self: center; }
  .todo-subtask .todo-state-toggle { width: 38px; height: 38px; min-height: 38px; }
  .todo-subtask .todo-state-toggle svg { width: 18px; height: 18px; }
  .todo-subtask .todo-state-menu { gap: 5px; padding: 5px; }
}
@media (max-width: 760px) {
  .todo-toolbar { grid-template-columns: 1fr 1fr; }
  .todo-toolbar > input { grid-column: 1 / -1; }
  .todo-filter-clear { grid-column: 2; justify-self: end; }
  .todo-events-toolbar { justify-content: stretch; }
  .todo-events-search { flex: 1 1 100%; width: 100%; margin-right: 0; }
  .todo-events-filter { flex: 1 1 160px; min-width: 0; }
  .todo-event-item {
    grid-template-columns: 1fr; row-gap: 8px;
  }
  .todo-event-item .todo-main { grid-column: 1; grid-row: 1; }
  .todo-event-item .todo-badges {
    grid-column: 1; grid-row: 2; justify-content: flex-start;
  }
  .todo-badges > .todo-owner-edit,
  .todo-badges > .todo-section-picker .todo-section-toggle {
    height: 40px; min-height: 40px; padding: 2px 10px; font-size: 14px;
  }
  .todo-badges .todo-state-controls,
  .todo-badges .todo-state-controls > .todo-state-picker,
  .todo-badges .todo-state-controls > .todo-state-picker > .todo-state-menu-toggle {
    width: 40px; height: 40px; min-height: 40px;
  }
  .todo-badges .todo-state-controls .todo-state-toggle svg { width: 20px; height: 20px; }
  .todo-badges .todo-state-controls .todo-state-toggle svg.todo-progress-icon { width: 100%; height: 100%; }
  .todo-delete { width: 32px; height: 32px; }
  .todo-subtask {
    grid-template-columns: 22px minmax(0, 1fr) 40px 32px; gap: 8px;
    position: relative; padding: 10px 0; min-height: 120px;
  }
  .todo-subtask-complete { grid-column: 1; grid-row: 1; width: 22px; height: 22px; margin-top: 1px; }
  .todo-subtask-copy { grid-column: 2 / 4; grid-row: 1; }
  .todo-subtask-title { font-size: 16px; line-height: 1.35; }
  .todo-subtask-title-edit { height: 38px; font-size: 16px; }
  .todo-subtask-owner {
    grid-column: 2; grid-row: 2; width: 86px; max-width: 86px; height: 40px; min-height: 40px;
    padding: 2px 10px; font-size: 14px;
  }
  .todo-subtask > .todo-section-picker { grid-column: 2 / 4; grid-row: 3; width: 100%; }
  .todo-subtask > .todo-section-picker .todo-section-toggle {
    width: 100%; max-width: none; height: 40px; padding: 2px 10px; font-size: 14px;
  }
  .todo-subtask > .todo-section-picker.same-as-parent { width: 100%; }
  .todo-subtask > .todo-section-picker.same-as-parent .todo-section-toggle {
    width: 100%; min-width: 0;
  }
  .todo-subtask .todo-state-controls { grid-column: 3; grid-row: 2; }
  .todo-subtask > .todo-controls > .todo-decision-edit { grid-column: 4; grid-row: 2; justify-self: center; }
  .todo-subtask-delete {
    position: absolute; top: 10px; right: 0; width: 32px; height: 32px;
  }
  .todo-subtask .todo-state-controls, .todo-subtask .todo-state-picker,
  .todo-subtask .todo-blocker-picker, .todo-subtask .todo-calendar-picker,
  .todo-subtask .todo-reminder-picker { width: 38px; height: 38px; }
  .todo-subtask .todo-state-controls { justify-self: center; }
  .todo-subtask .todo-state-toggle { width: 38px; height: 38px; min-height: 38px; }
  .todo-subtask .todo-state-toggle svg { width: 18px; height: 18px; }
  .todo-subtask .todo-state-menu { gap: 5px; padding: 5px; }
}
@media (max-width: 520px) {
  .todo-toolbar { grid-template-columns: 1fr; }
  .todo-toolbar > input { grid-column: auto; }
  .todo-filter-clear { grid-column: auto; justify-self: end; }
  .todo-events-toolbar { display: grid; grid-template-columns: 1fr; }
  .todo-events-search { width: 100%; }
  .todo-events-filter { width: 100%; }
  .todo-item {
    grid-template-columns: 24px minmax(0, 1fr); column-gap: 7px; row-gap: 8px; padding: 15px 0;
  }
  .todo-complete, .todo-delivery-review-complete { width: 22px; height: 22px; margin-top: 2px; }
  .todo-main { grid-column: 2; position: static; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .todo-title { font-size: 18px; line-height: 1.35; }
  .todo-delete { width: 32px; height: 32px; }
  .todo-badges {
    grid-column: 1 / -1; grid-row: 2; display: grid;
    grid-template-columns: 32px max-content minmax(0, 1fr) 44px 44px 44px;
    gap: 8px; width: 100%; margin: 0 0 6px; justify-content: stretch;
  }
  .todo-badges > .todo-delete { grid-column: 1; grid-row: 1; justify-self: end; }
  .todo-badges > .todo-owner-edit { grid-column: 2; }
  .todo-badges > .todo-section-picker { grid-column: 3; }
  .todo-badges .todo-decision-edit { grid-column: 4; }
  .todo-badges .todo-priority-picker { grid-column: 5; }
  .todo-badges .todo-state-controls { grid-column: 6; }
  .todo-owner-edit, .todo-section-toggle {
    width: 100%; max-width: none; height: 44px; min-height: 44px; padding: 3px 10px; font-size: 15px;
  }
  .todo-badges > .todo-owner-edit,
  .todo-badges > .todo-section-picker .todo-section-toggle {
    height: 44px; min-height: 44px; padding: 3px 10px; font-size: 15px;
  }
  .todo-badges > .todo-owner-edit { width: 86px; max-width: 86px; padding-right: 8px; padding-left: 8px; }
  .todo-priority-edit, .todo-decision-edit { width: 44px; height: 44px; min-height: 44px; padding: 6px 8px; }
  .todo-decision-edit svg { width: 22px; height: 22px; }
  .todo-priority-edit svg { width: 20px; height: 27px; }
  .todo-badges .todo-state-controls, .todo-badges .todo-state-controls > .todo-state-picker {
    width: 44px; height: 44px;
  }
  .todo-event-item {
    grid-template-columns: 1fr;
  }
  .todo-event-item .todo-badges {
    display: flex; grid-column: 1; grid-row: 2; margin: 0; width: auto;
  }
  .todo-event-item .todo-state-controls, .todo-event-item .todo-state-picker,
  .todo-event-item .todo-state-toggle {
    width: 38px; height: 38px; min-height: 38px;
  }
  .todo-event-item .todo-state-toggle svg { width: 18px; height: 18px; }
  .todo-badges .todo-state-controls .todo-state-menu > .todo-blocker-picker,
  .todo-badges .todo-state-controls .todo-state-menu > .todo-calendar-picker,
  .todo-badges .todo-state-controls .todo-state-menu > .todo-reminder-picker {
    width: 40px; height: 40px;
  }
  .todo-badges .todo-state-controls > .todo-state-picker > .todo-state-toggle {
    width: 44px; height: 44px; min-height: 44px;
  }
  .todo-badges .todo-state-controls .todo-state-menu .todo-state-toggle {
    width: 40px; height: 40px; min-height: 40px;
  }
  .todo-badges .todo-state-controls .todo-state-toggle svg { width: 20px; height: 20px; }
  .todo-badges .todo-state-controls .todo-state-toggle svg.todo-progress-icon { width: 100%; height: 100%; }
  .todo-subtask {
    box-sizing: border-box; width: 100%; max-width: 100%;
    grid-template-columns: 24px minmax(0, 1fr) 44px 44px;
    column-gap: 8px; row-gap: 8px; min-height: auto; padding: 10px 0;
  }
  .todo-subtask-complete { grid-column: 1; grid-row: 1; width: 22px; height: 22px; }
  .todo-subtask-copy { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
  .todo-subtask-owner {
    grid-column: 2; grid-row: 2; width: 100%; max-width: 112px; height: 44px; min-height: 44px;
    padding: 3px 10px; font-size: 15px;
  }
  .todo-subtask > .todo-section-picker { grid-column: 2 / -1; grid-row: 3; width: 100%; min-width: 0; }
  .todo-subtask > .todo-section-picker .todo-section-toggle {
    height: 44px; min-height: 44px; padding: 3px 10px; font-size: 15px;
  }
  .todo-subtask > .todo-controls > .todo-decision-edit { grid-column: 3; grid-row: 2; justify-self: center; }
  .todo-subtask .todo-state-controls { grid-column: 4; grid-row: 2; justify-self: end; }
  .todo-subtask-delete { position: static; grid-column: 4; grid-row: 4; justify-self: end; width: 40px; height: 40px; }
  .todo-save-state { grid-column: 1 / -1; justify-self: end; }
  .todo-subtasks {
    box-sizing: border-box; grid-column: 1 / -1; grid-row: 3;
    width: 100%; min-width: 0; margin-top: 2px; padding-left: 32px;
  }
  .todo-subtask-add { min-width: 40px; min-height: 40px; font-size: 22px; }
  .todo-subtask-new { height: 40px; font-size: 16px; }
  .todo-create-popover { width: calc(100vw - 48px); grid-template-columns: 1fr; }
  .todo-create-title, .todo-create-actions { grid-column: auto; }
}