/* MARK: - The To-do page: the To Do app's macOS Tahoe scene, built from the glass kit (glass.css): the blue wave, one
   glass sheet (views and lists in its sidebar, the tasks in its pane) and Control Center tiles on the right. Day is
   the default, body.night the dark look. It sits on the home screen's frame, 68px inside the edges. See web/todo.js. */

#todo {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 4; overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  -webkit-transform: scale(1.03); transform: scale(1.03);
  -webkit-transition: opacity 0.3s, -webkit-transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s 0.4s;
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s 0.4s;
}
#todo.open { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; -webkit-transition-delay: 0s; transition-delay: 0s; }

#todo svg.ic { display: block; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#todo .strong { font-weight: 600; }

/* ---------- the sheet ---------- */
/* on the home screen's frame (its sheet at 68,68, 1230 wide), so the crossfade between them lines up; taller, as
   there's no Dock, down to the Dock's bottom edge (1024) so the two pages share their outer edges */
#todoSheet { position: absolute; left: 68px; top: 68px; width: 1230px; height: 956px; }

/* the sidebar: the To Do app's views, then its lists, each with its count */
#todoSide { position: absolute; left: 0; top: 0; width: 280px; height: 956px; overflow: hidden; }
#todoViews { position: absolute; left: 14px; right: 14px; top: 24px;
  -webkit-transition: -webkit-transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }
#todoViews .label { position: absolute; left: 12px; font-weight: 600; }
/* names a step smaller than the rows (the To Do app's 13 to 12), so "Completed 2" keeps clear of its count in the
   home screen's 280px sidebar; the selected view keeps its weight (only its fill changes, as in the app) */
#todoViews .view { position: absolute; left: 0; right: 0; padding: 0 10px 0 12px; }
#todoViews .view.cur { font-weight: 500; }
#todoViews .view .g-sq { margin-right: 12px; }
#todoViews .view .name { -webkit-flex: 1; flex: 1; min-width: 0; font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#todoViews .view .count { margin-left: 8px; }
#todo .g-sq svg.ic { width: 30px; height: 30px; }
/* a list's square wears its own colour: filled by day, a coloured glyph on smoked glass by night (as the app) */
#todo .lsq { background-image: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)); }
body:not(.night) #todo .lsq { color: #fff !important; }
.night #todo .lsq { background: rgba(255, 255, 255, 0.10) !important; }

/* the pane: the view's name, then its tasks */
#todoMain { position: absolute; left: 280px; top: 0; right: 0; bottom: 0; }
/* the slim bar where the To Do app has its Spotlight field: the view's glyph, name and count (read-only) */
#todoMain .bar { position: absolute; left: 24px; right: 24px; top: 0; height: 72px; padding: 0 24px 0 22px; white-space: nowrap;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
#todoMain .bar .glyph svg.ic { width: 34px; height: 34px; stroke-width: 1.8; }
#todoMain .bar .name { -webkit-flex: 1; flex: 1; min-width: 0; margin-left: 18px; font-size: 34px; font-weight: 600; line-height: 40px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }
#todoMain .bar .sum { margin-left: 18px; }
#todoMain .rule { position: absolute; left: 24px; right: 24px; top: 72px; }
#todoMain .clip { position: absolute; left: 0; right: 0; top: 73px; height: 859px; overflow: hidden; }
#todoMain .rows { position: absolute; left: 0; right: 0; top: 0;
  -webkit-transition: -webkit-transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }
#todoMain .empty { position: absolute; left: 48px; top: 28px; }

/* section heads: a list's name and count, or Completed; a step above the meta line */
#todoMain .section { position: absolute; left: 46px; right: 48px; font-size: 26px; line-height: 32px; white-space: nowrap; }
#todoMain .section .n { font-weight: 500; }
#todoMain .cut { position: absolute; left: 24px; right: 24px; }

/* a task row: the tick (with its list's badge), the title and the meta line */
#todoMain .task { position: absolute; left: 24px; right: 24px; height: 92px; padding: 0 24px 0 22px; border-radius: 22px; }
#todoMain .task .tick {
  position: relative; width: 44px; height: 44px; -webkit-flex: none; flex: none; border-radius: 50%;
  box-shadow: inset 0 0 0 2.5px rgba(0, 0, 0, 0.45);
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
}
.night #todoMain .task .tick { box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.42); }
#todoMain .task .badge { position: absolute; right: -5px; bottom: -4px; width: 18px; height: 18px; border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(244, 247, 252, 0.95); }
.night #todoMain .task .badge { box-shadow: 0 0 0 3px rgba(30, 32, 42, 0.95); }
#todoMain .task.done .tick, .night #todoMain .task.done .tick { box-shadow: none; color: #fff; }
#todoMain .task.done .tick svg.ic { width: 28px; height: 28px; stroke-width: 2.6; }
#todoMain .task .text { -webkit-flex: 1; flex: 1; min-width: 0; margin-left: 22px; }
#todoMain .task .title { font-size: 28px; font-weight: 500; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#todoMain .task .meta { margin-top: 2px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Today: the To Do app's Edit Controls tiles, deep blue by day and smoked glass by night; High gets a "!" flag */
#todoMain .tile {
  position: absolute; width: 286px; height: 232px; padding: 18px 20px 20px 22px; border-radius: 34px;
  -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff;
  background: linear-gradient(160deg, rgba(0, 62, 170, 0.74), rgba(0, 54, 156, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(20, 70, 170, 0.14);
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; 
  -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s;
}
.night #todoMain .tile { background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.07)); }
/* focused: lifts and grows (1.10, 2 px up: 14.3 px to the side, 13.6 px up; the 20 px gaps, the 18 px under the section
   head and the 28 px to the sheet's edge keep clear), the shadow and a faint lift pre-drawn on :before and faded in */
#todoMain .tile { z-index: 0; }
#todoMain .tile:before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 34px;
  background: linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
  box-shadow: 0 24px 40px rgba(6, 28, 92, 0.44), 0 8px 16px rgba(6, 28, 92, 0.26);
  opacity: 0; z-index: -1; pointer-events: none; -webkit-transition: opacity 0.2s; transition: opacity 0.2s;
}
.night #todoMain .tile:before { background: linear-gradient(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05)); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.62), 0 8px 16px rgba(0, 0, 0, 0.42); }
#todoMain .tile.focus { z-index: 5; -webkit-transform: translateY(-2px) scale(1.10); transform: translateY(-2px) scale(1.10); }
#todoMain .tile.focus:before { opacity: 1; }
/* the lift lightens the tile a little: the subtitles go brighter to keep 4.5:1 */
body:not(.night) #todoMain .tile.focus .sub, body:not(.night) #todoMain .tile.focus .sub.warn { color: #fff; }
.night #todoMain .tile.focus .sub { color: #b4dcff; }
.night #todoMain .tile.focus .sub.warn { color: #ffc9c4; }
#todoMain .tile .top { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; }
#todoMain .tile .tick { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.20); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
#todoMain .tile .flag { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #ffe6e3;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.night #todoMain .tile .flag { color: #ffaaa4; }
#todoMain .tile .flag svg.ic { width: 28px; height: 28px; stroke-width: 2.4; }
#todoMain .tile .title { font-size: 26px; font-weight: 600; line-height: 30px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#todoMain .tile .text { margin-top: auto; }
/* one line, as the app has it */
#todoMain .tile .sub { margin-top: 2px; font-size: 24px; font-weight: 500; line-height: 30px; color: #e0edff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#todoMain .tile .sub.warn { font-weight: 600; color: #ffe6e3; }
.night #todoMain .tile .sub { color: #8cc8ff; }
.night #todoMain .tile .sub.warn { color: #ffaaa4; }


/* ---------- Control Center: what the To Do app shows there, read-only ---------- */
/* on the home screen's Control Center column: x 1350 to 1852, 242px modules 18px apart */
#todoCC { position: absolute; left: 1350px; top: 68px; width: 502px; }
#todoCC .g-cc { position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; }
#todoCC .g-disc svg.ic { width: 36px; height: 36px; }
/* one title style for every tile, and a quieter subtitle under it (the starter's cc-text-2) */
#todoCC .title { font-size: 26px; font-weight: 600; line-height: 32px; letter-spacing: -0.01em; }
#todoCC .sub { font-size: 24px; font-weight: 400; line-height: 30px; color: rgba(255, 255, 255, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; }

/* Today and Completed: pills; the disc turns white while that view is showing */
#todoCC .pill { left: 0; width: 242px; }
#ccToday { top: 0; }
#ccDone { top: 130px; }
#todoCC .pill .txt { min-width: 0; margin-left: 12px; }
#todoCC .pill .title, #todoCC .pill .sub { display: block; white-space: nowrap; }

/* Up Next: the next task, its due day and list */
#ccNext { left: 260px; top: 0; width: 242px; height: 242px; padding: 20px 22px 22px;
  display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
#ccNext .top { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; }
#ccNext .tick { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.20); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.88); }
/* a quiet label, the subtitles' colour (the app's cc-text-2) */
#ccNext .label { font-size: 24px; font-weight: 500; line-height: 30px; color: rgba(255, 255, 255, 0.9); }
#ccNext .title { margin-top: auto; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#ccNext .sub { margin-top: 2px; }
#ccNext .warn { font-weight: 600; color: #ffe6e3; }
.night #ccNext .warn { color: #ffaaa4; }

/* Done Today: the ring and its count */
#ccProg { left: 0; top: 260px; width: 502px; height: 160px; padding: 0 28px;
  display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
#ccProg .ring { position: relative; width: 104px; height: 104px; -webkit-flex: none; flex: none; }
#ccProg svg { display: block; width: 104px; height: 104px; }
#ccProg .track { fill: none; stroke: rgba(255, 255, 255, 0.30); stroke-width: 5.5; }
#ccProg .fill { fill: none; stroke: rgba(255, 255, 255, 0.97); stroke-width: 5.5; stroke-linecap: round; }
#ccProg .count { position: absolute; left: 0; top: 0; width: 104px; line-height: 104px; text-align: center; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
#ccProg .count small { font-size: 24px; font-weight: 400; color: rgba(255, 255, 255, 0.9); }
.night #todoCC .sub, .night #ccNext .label, .night #ccProg .count small { color: rgba(255, 255, 255, 0.72); }
#ccProg .txt { margin-left: 28px; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  #todo, #todoViews, #todoMain .rows { -webkit-transition: none; transition: none; }
  #todoMain .tile.focus { -webkit-transform: none; transform: none; }
}