/* Focus header, local clock, and today’s progress. */
.todo-card { width: min(100%, 1150px); }
.card-header {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title clock" "tagline clock";
  column-gap: 28px;
  margin-bottom: 0;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.list-title { grid-area: title; width: 100%; min-width: 0; font-size: clamp(3rem, 4.7vw, 4.2rem); line-height: 1.22; padding: .03em .03em .14em 0; height: auto; min-height: 1.4em; max-width: 100%; resize: none; overflow: hidden; box-sizing: border-box; white-space: pre-wrap; overflow-wrap: anywhere; }
.list-tagline { grid-area: tagline; }
.flip-clock {
  --flip-height: 74px;
  --flip-width: 37px;
  --flip-font: 56px;
  grid-area: clock;
  align-self: center;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 5px;
  color: #19212b;
  user-select: none;
  font-family: 'DM Sans', ui-sans-serif, sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.flip-clock-pair {
  display: flex;
  gap: 1px;
  padding: 3px;
  border-radius: 7px;
  background: #d8dee7;
  box-shadow: 0 3px 5px #15243a1a;
}
.flip-digit {
  display: block;
  position: relative;
  width: var(--flip-width);
  height: var(--flip-height);
  perspective: 400px;
  font-size: var(--flip-font);
  line-height: var(--flip-height);
  letter-spacing: -.04em;
}
.flip-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: #f5f6f8;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-half > span { position: absolute; left: 0; width: 100%; height: var(--flip-height); text-align: center; }
.flip-top { top: 0; border-radius: 4px 4px 0 0; background: #e9edf2; border-bottom: 1px solid #bcc5d140; }
.flip-top > span { top: 0; }
.flip-bottom { bottom: 0; border-radius: 0 0 4px 4px; }
.flip-bottom > span { bottom: 0; }
.flip-clock-colon { color: var(--muted); font-size: 30px; line-height: 1; padding-bottom: 5px; }
.flip-leaf { z-index: 2; }
.flip-leaf-out { transform-origin: center bottom; animation: clock-fold-down 220ms cubic-bezier(.55,.06,.8,.5) both; }
.flip-leaf-in { transform-origin: center top; animation: clock-unfold-down 270ms 215ms cubic-bezier(.16,.65,.3,1) both; }
@keyframes clock-fold-down { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes clock-unfold-down { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
:root[data-theme="dark"] .flip-clock-pair { background: #485267; box-shadow: 0 3px 7px #0004; }
:root[data-theme="dark"] .flip-top { background: #dce2eb; }
:root[data-theme="dark"] .flip-bottom { background: #eef1f6; }
.list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding-bottom: 0;
  border-bottom: 0;
}
.tasks-heading-copy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; min-width: 0; }
.tasks-heading-copy h1, .tasks-heading-copy #task-count { margin: 0; }
.tasks-heading-copy #task-count { font-size: .82rem; color: var(--muted); font-weight: 500; }
.list-heading .title-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 0 1 490px; min-width: 0; }
.list-heading .calendar-link, .list-heading .toggle-composer { min-height: 46px; flex-shrink: 0; }
.list-heading .calendar-link { width: 46px; }
.today-progress { margin: 18px 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.today-progress-meta, .task-text, .task-label-badge, .overdue-badge, .edit-task, .toggle-composer, .weather-toggle, .weather-enable { line-height: 1.5; }
.task-title-line, .tasks-heading-copy, .list-tagline { overflow: visible; }
.task-text { padding-block: 2px; }
.list-heading h1 { line-height: 1.25; padding-block: 2px; }
.today-progress-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 9px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
#today-progress-label { color: var(--ink); font-weight: 600; }
#today-progress-summary { font-variant-numeric: tabular-nums; }
.today-progress-track { height: 5px; overflow: hidden; border-radius: 4px; background: var(--line); }
.today-progress-fill { height: 100%; background: #5b82f6; transform: scaleX(0); transform-origin: left center; transition: transform 420ms cubic-bezier(.16,1,.3,1); }
:root[data-theme="dark"] .today-progress-fill { background: #78a0ff; }
@media (max-width: 1000px) {
  .flip-clock { --flip-height: 64px; --flip-width: 32px; --flip-font: 48px; }
  .tasks-heading-copy { gap: 6px 12px; }
  .list-heading .title-actions { flex-basis: 440px; }
}
@media (max-width: 720px) {
  .card-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title clock" "tagline tagline"; column-gap: 12px; row-gap: 8px; margin-bottom: 0; padding-bottom: 18px; }
  .list-title { grid-area: title; font-size: clamp(1.9rem, 6.4vw, 2.8rem); line-height: 1.24; }
  .flip-clock { --flip-height: 48px; --flip-width: 23px; --flip-font: 35px; gap: 3px; }
  .flip-clock-pair { padding: 2px; border-radius: 5px; }
  .flip-clock-colon { font-size: 22px; padding-bottom: 3px; }
  .list-heading { gap: 12px; margin-top: 14px; }
  .tasks-heading-copy { display: flex; width: 100%; justify-content: space-between; align-items: baseline; }
  .tasks-heading-copy #task-count { font-size: .75rem; margin: 0; }
  .list-heading .title-actions { display: grid; grid-template-columns: minmax(0, 1fr) 44px auto; width: 100%; flex-basis: 100%; gap: 8px; }
  .list-heading .calendar-link { width: 44px; }
  .list-heading .calendar-link, .list-heading .toggle-composer { min-height: 46px; }
  .list-heading .toggle-composer { padding-inline: 12px; }
  .today-progress { margin: 16px 0; padding: 12px; }
  .today-progress-meta { font-size: .78rem; }
}
@media (max-width: 360px) {
  .flip-clock { --flip-height: 43px; --flip-width: 20px; --flip-font: 31px; gap: 2px; }
  .list-title { font-size: 1.85rem; }
  .list-heading .title-actions { gap: 6px; }
  .list-heading .toggle-composer { padding-inline: 8px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .flip-leaf { animation: none; } .today-progress-fill { transition: none; } }

.flip-clock-period {
  align-self: flex-end;
  margin: 0 0 5px 3px;
  padding: 3px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}

@media (max-width: 720px) { .flip-clock-period { font-size: 10px; padding: 2px 3px; margin-left: 1px; } }