*, *::before, *::after { box-sizing: border-box; }

/* Class display rules (e.g. .setup's grid) would otherwise override the hidden attribute. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.4;
}

/* Diagonal "window light": lit surfaces (sidebar, cards, blocks) each carry the same viewport-fixed
   gradient (--window-light, background-attachment: fixed) so the light band runs continuously
   across them while the page itself stays flat taupe. */
@media (forced-colors: active), print {
  .sidebar, .card, .event-block, .list-item, .todo-item { background-image: none; }
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

.hidden { display: none !important; }

/* Icons ------------------------------------------------------------------ */

.icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.icon-xs { width: 12px; height: 12px; }
.icon-ev { width: 12px; height: 12px; }
.icon-nav { width: 14px; height: 14px; }
.icon-lg, .icon-tab { width: 18px; height: 18px; }
.icon-logo { width: 32px; height: 32px; }
.icon-ev-lg { width: 20px; height: 20px; }

/* App frame ---------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  min-height: 100%;
  height: 100%;
}

/* Sidebar ------------------------------------------------------------------ */

.sidebar {
  grid-row: 1 / span 2;
  position: relative;
  z-index: 2;
  /* Two layers: a soft inner shadow along the right (inner) edge, then the diagonal window light
     whose shaded foot reads a step darker than the cards' (viewport-fixed like theirs). */
  background-color: var(--sidebar);
  background-image: var(--sidebar-edge-shade), var(--window-light-sidebar);
  background-attachment: scroll, fixed;
  border: 0;
  padding: 20px 9px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Tan bevel strip: fills the gap between the sidebar and the schedule card, full viewport height */
.sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(-1 * var(--content-pad));
  width: var(--content-pad);
  pointer-events: none;
  background: var(--sidebar-strip);
}

.logo {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  padding: 0;
  margin: 0 0 22px -2px;
  color: var(--text);
  text-decoration: none;
}

.logo .icon-logo { color: var(--text); stroke-width: 2.1; }

.logo-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text);
}

.logo-text .hub { color: var(--brand); font-weight: 700; }

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 0;
  height: 38px;
  min-height: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

.nav-btn .icon { width: 17px; height: 17px; stroke-width: 2; }

.nav-btn:hover { background: color-mix(in srgb, var(--active-nav) 45%, transparent); }

.nav-btn.is-active {
  background: var(--active-nav);
  color: var(--active-nav-text);
}

.nav-btn.is-active .icon { color: var(--active-nav-text); }

/* Topbar ------------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 16px;
  background: transparent;
  border: 0;
}

.greeting {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  padding: 2px;
  border-radius: 999px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 400;
}

.user-chip:hover { background: rgba(255, 255, 255, 0.18); }

/* "Person in a circle": a soft light disc (no outline ring) with the glyph filling most of it */
.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--avatar-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.user-avatar .icon { width: 15px; height: 15px; stroke-width: 1.9; }

.user-name {
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logout-btn {
  height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--control);
  color: var(--control-text);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}

.sync-pill {
  font-size: 10px;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 3px 8px;
}

/* Shared pill controls ---------------------------------------------------- */

.chip, .icon-btn, .add-btn, .see-more, .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-control);
  min-height: 28px;
  background: var(--control);
  color: var(--control-text);
  font-size: 11px;
  font-weight: 400;
}

.chip { padding: 0 10px; }

/* The selected filter carries the same tan pill as the active nav item */
.chip.is-active {
  background: var(--active-nav);
  color: var(--active-nav-text);
  border-color: transparent;
  font-weight: 700;
}

.icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
}

.icon-btn .icon { width: 14px; height: 14px; }

/* Content grid ------------------------------------------------------------- */

.content {
  padding: 0 9px 0 var(--content-pad);
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  grid-template-rows: 1fr;
  gap: var(--card-gap);
  align-items: stretch;
  min-height: 0;
}

.card {
  background-color: var(--surface);
  background-image: var(--window-light);
  background-attachment: fixed;
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px;
  min-width: 0;
}

/* Every main panel (schedule, clock, lists) fills the row from under the topbar to the bottom edge */

.schedule-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-md);
  margin-bottom: 14px;
}

.card-head h2 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.sub {
  margin: 3px 0 0;
  color: var(--text-faint);
  font-size: 10.5px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.sub-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.sub-row .sub { margin: 0 6px 0 0; }

/* Week (and Clock day) arrows: always visible. They were hidden until hover to match the mockup,
   which left no discoverable way to reach next week's items. */
.week-nav {
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--control-edge);
  border-radius: 6px;
  background: var(--control);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.week-nav .icon { width: 11px; height: 11px; stroke-width: 2.4; }
.week-nav:hover { background: var(--active-nav); color: var(--active-nav-text); }

.sub-row .today-chip { margin-left: 4px; min-height: 22px; padding: 0 9px; }

.head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* "+ Add Class": small rounded rectangle, dark label, bold plus */
.add-btn {
  height: 25px;
  min-height: 0;
  padding: 0 11px;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  background: var(--control-2);
  color: var(--text-2);
}

.add-btn .icon { width: 12px; height: 12px; stroke-width: 2.8; }

/* Week grid ---------------------------------------------------------------- */

.week-wrap {
  position: relative;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

/* Time column, then Sunday–Saturday */
.week-grid {
  display: grid;
  grid-template-columns: var(--time-col-w) repeat(7, minmax(0, 1fr));
  min-width: 760px;
  border-top: 1px solid var(--grid-line);
  border-right: 1px solid var(--grid-line-strong);
}

.week-grid.timeblock-grid { grid-template-columns: var(--time-col-w) minmax(0, 1fr); min-width: 0; }

.time-head { height: var(--dayhead-h); border-bottom: 1px solid var(--grid-line); }

.day-head {
  height: var(--dayhead-h);
  line-height: var(--dayhead-h);
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid var(--grid-line-strong);
  border-bottom: 1px solid var(--grid-line);
}

.day-head.is-today { color: var(--brand); }

/* "Due" row: deadlines are points in time, so they sit above the hour grid as chips */
.due-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--grid-line);
}

.due-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 4px 3px;
  border-left: 1px solid var(--grid-line-strong);
  border-bottom: 1px solid var(--grid-line);
}

.due-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  min-height: 22px;
  padding: 2px 7px 2px 6px;
  border: 0;
  border-left: 3px solid var(--ev-deadline-bar);
  border-radius: 5px;
  background: var(--ev-deadline-bg);
  color: var(--ev-deadline-title);
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  box-shadow: var(--shadow-block);
}

.due-chip .icon { flex: 0 0 auto; color: var(--ev-deadline-bar); stroke-width: 2.2; }
.due-chip .due-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-chip.is-done { opacity: 0.6; }
.due-chip.is-done .due-title { text-decoration: line-through; }

.hour-label {
  height: var(--hour-h);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
  font-size: 11px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--grid-line);
}

.day-col {
  position: relative;
  border-left: 1px solid var(--grid-line-strong);
  border-bottom: 1px solid var(--grid-line);
  min-height: calc(var(--hour-h) * 10);
}

.hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--grid-line);
  pointer-events: none;
}

/* Event blocks --------------------------------------------------------------
   Positioned from JS custom properties: --top/--h (percent of the day column) and
   --lane/--lanes (side-by-side lanes for overlapping items). Height follows the real
   duration (JS enforces a 30-minute visual minimum), so nothing is stretched or hidden. */

.event-block {
  --bg: var(--ev-class-bg);
  --bar: var(--ev-class-bar);
  --title: var(--ev-class-title);
  position: absolute;
  top: calc(var(--top) + 1px);
  height: calc(var(--h) - 2px);
  left: calc(var(--lane) * 100% / var(--lanes) + 2px);
  width: calc(100% / var(--lanes) - 4px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
  min-width: 0;
  margin: 0;
  padding: 4px 6px 4px 8px;
  overflow: hidden;
  border: 0;
  border-left: 3px solid var(--bar);
  border-radius: 5px;
  background-color: var(--bg);
  background-image: var(--window-light);
  background-attachment: fixed;
  color: var(--text);
  box-shadow: var(--shadow-block);
  text-align: left;
  line-height: 1.3;
}

.event-block:hover, .event-block:focus-visible { z-index: 3; box-shadow: 0 4px 12px rgba(40, 30, 20, 0.28); }

.event-block.type-task { --bg: var(--ev-task-bg); --bar: var(--ev-task-bar); --title: var(--ev-task-title); }
.event-block.type-routine { --bg: var(--ev-routine-bg); --bar: var(--ev-routine-bar); --title: var(--ev-routine-title); }
.event-block.type-deadline { --bg: var(--ev-deadline-bg); --bar: var(--ev-deadline-bar); --title: var(--ev-deadline-title); }

.event-block .t,
.event-block .n span,
.event-block .m {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-block .t {
  font-size: 10.5px;
  color: var(--ev-meta);
  font-variant-numeric: tabular-nums;
}

.event-block .n {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--title);
}

.event-block .n .icon { flex: 0 0 auto; width: 13px; height: 13px; stroke-width: 2.2; color: var(--ev-meta); }

.event-block .m { font-size: 10.5px; color: var(--ev-meta); }

/* Short items: time over title. Compact (under ~40 min shown): one line, time then title. */
.event-block.is-short { justify-content: center; padding-top: 2px; padding-bottom: 2px; }
.event-block.is-compact {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 7px;
}
.event-block.is-compact .t { flex: 0 0 auto; }
.event-block.is-compact .n { flex: 1 1 auto; }

.event-block.is-done { opacity: 0.62; }
.event-block.is-done .n span { text-decoration: line-through; }

.now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--now-line);
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
}

.now-line::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--now-line);
}

.today-chip { margin-left: 6px; min-height: 22px; padding: 0 9px; }

/* Right rail --------------------------------------------------------------- */

.rail {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-self: start;
  min-width: 0;
}

.rail .card { padding: 10px 10px 16px; border-radius: 13px; }

.rail h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 4px 14px;
  color: var(--text-faint);
  min-height: 0;
}

/* Full-width list cards (Deadlines, My Tasks) reuse the illustrated empty state */
.content > .card > .empty-state { padding: 26px 0 18px; }

.empty-state .art {
  width: 96px;
  height: 74px;
  margin: 2px 0 8px;
  color: var(--art-stroke);
  flex: 0 0 auto;
}

.empty-state .art .face { fill: var(--art-fill); }
.empty-state .art .tint { fill: var(--art-tint); }
.empty-state .art .red { fill: var(--brand); }
.empty-state .art .red-s { stroke: var(--brand); }

.empty-state strong {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand);
}

.empty-state .hint {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-faint);
}

/* Copy that differs between the desktop rail and the phone stack */
.only-m { display: none; }

.upcoming-item {
  --bar: var(--ev-class-bar);
  --title: var(--ev-class-title);
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 6px;
  padding: 6px 8px 6px 9px;
  border: 0;
  border-left: 3px solid var(--bar);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
  text-align: left;
  color: var(--text);
}

.upcoming-item:hover { background: var(--surface-solid); }
.upcoming-item.type-task { --bar: var(--ev-task-bar); --title: var(--ev-task-title); }
.upcoming-item.type-routine { --bar: var(--ev-routine-bar); --title: var(--ev-routine-title); }
.upcoming-item.type-deadline { --bar: var(--ev-deadline-bar); --title: var(--ev-deadline-title); }

.upcoming-item .when { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.upcoming-item .title { font-size: 12.5px; font-weight: 700; margin: 1px 0; color: var(--title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-item .meta { font-size: 10.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.see-more {
  width: 100%;
  margin-top: 8px;
  min-height: 27px;
}

/* Lists (tasks, deadlines) ------------------------------------------------- */

.list-card { display: flex; flex-direction: column; min-height: 0; }
.list-card .card-head { margin-bottom: 10px; }
.list-card .card-head .sub { font-size: 11.5px; color: var(--text-muted); }

.list-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px 6px; }

.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters .chip { gap: 6px; min-height: 26px; padding: 0 11px; border-radius: 999px; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.dot.prio-1 { background: var(--danger); }
.dot.prio-2 { background: var(--warn); }
.dot.prio-3 { background: var(--accent-blue-dark); }

.progress { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.progress-bar { width: 140px; height: 6px; border-radius: 999px; background: var(--control); overflow: hidden; }
.progress-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ev-task-bar); }

.list-section + .list-section { margin-top: 14px; }

.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 7px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-2);
  text-align: left;
}

.section-head .count {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--control);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
}

.section-head.is-toggle { cursor: pointer; }
.section-head.is-toggle:hover { color: var(--text); }
.section-head.tone-danger { color: var(--danger); }
.section-head.tone-danger .count { background: var(--danger-soft); color: var(--danger); }
.section-head.tone-brand { color: var(--brand); }

.section-body { display: flex; flex-direction: column; gap: 6px; }

/* One row anatomy for tasks, routines and deadlines */
.todo-item {
  --bar: var(--ev-task-bar);
  --title: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px 8px 12px;
  border-left: 3px solid var(--bar);
  border-radius: var(--radius-block);
  background: color-mix(in srgb, var(--surface-solid) 70%, transparent);
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.08);
  cursor: pointer;
}

.todo-item:hover { background: var(--surface-solid); box-shadow: var(--shadow-block); }
.todo-item.type-routine { --bar: var(--ev-routine-bar); }
.todo-item.deadline-row { --bar: var(--ev-deadline-bar); }

.row-body { flex: 1; min-width: 0; }
.row-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.row-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--title);
}
.row-meta {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.repeat { display: inline-flex; color: var(--text-faint); }

.row-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.row-body .tags { margin-top: 5px; }
.tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--control);
  color: var(--text-2);
  font-size: 10.5px;
}

.prio {
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--control);
  color: var(--text-2);
}
.prio-1 { background: var(--danger-soft); color: var(--danger); }
.prio-2 { background: var(--warn-soft); color: var(--warn); }
.prio-3 { background: var(--ev-deadline-bg); color: var(--ev-deadline-title); }

.todo-item.is-done { opacity: 0.66; }
.todo-item.is-done .row-title strong { text-decoration: line-through; color: var(--text-muted); }

.routine-row .routine-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ev-routine-bg);
  color: var(--ev-routine-bar);
  flex: 0 0 30px;
}

/* Deadlines: a date tile, then the text, then status + done toggle */
.date-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 54px;
  flex: 0 0 50px;
  border-radius: 8px;
  background: var(--control);
  color: var(--text-2);
  line-height: 1.05;
}
.dt-month, .dt-week { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.dt-day { font-size: 20px; font-weight: 700; color: var(--text); }
.date-tile.tone-danger { background: var(--danger-soft); color: var(--danger); }
.date-tile.tone-danger .dt-day { color: var(--danger); }
.date-tile.tone-warn { background: var(--warn-soft); color: var(--warn); }
.date-tile.tone-warn .dt-day { color: var(--warn); }

.status-pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--control);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.status-pill.tone-danger { background: var(--danger-soft); color: var(--danger); }
.status-pill.tone-warn { background: var(--warn-soft); color: var(--warn); }
.status-pill.tone-ok { background: var(--ok-soft); color: var(--ok); }

.tone-danger { color: var(--danger); }

/* Round checkbox */
.check {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--text-faint);
  border-radius: 50%;
  background: var(--surface-solid);
  flex: 0 0 20px;
  cursor: pointer;
}

.check:hover { border-color: var(--ev-task-bar); }

.check:checked {
  background: var(--ev-task-bar);
  border-color: var(--ev-task-bar);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.2l2.6 2.6L12 5.4'/%3E%3C/svg%3E");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Countdowns --------------------------------------------------------------- */

.cd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gap-md);
  align-content: start;
}

.cd-card {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  background-color: var(--block);
  border-left: 3px solid var(--brand-deep);
  border-radius: var(--radius-block);
  box-shadow: var(--shadow-block);
  color: var(--text-2);
}

.cd-card > div { flex: 1; min-width: 0; }

/* Card titles stay on one line like every other title in the design */
.cd-card strong {
  display: block;
  color: var(--brand);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ring {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  color: var(--brand);
}

.cd-card.urgent .days { color: var(--accent-red); }

.days {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Mobile-only pieces (shown in responsive.css) ----------------------------- */

.day-tabs { display: none; }
.mobile-list { display: none; }
.mobile-header { display: none; }
.bottom-nav { display: none; }
.fab { display: none; }

.m-event {
  --bg: var(--ev-class-bg);
  --bar: var(--ev-class-bar);
  --title: var(--ev-class-title);
  display: grid;
  grid-template-columns: 30px 1fr;
  column-gap: 14px;
  align-items: center;
  width: 100%;
  margin: 0 0 14px;
  padding: 11px 12px;
  background: var(--bg);
  border: 0;
  border-left: 5px solid var(--bar);
  border-radius: 8px;
  box-shadow: var(--shadow-block);
  text-align: left;
  color: var(--text);
}

.m-event:last-child { margin-bottom: 0; }

.m-event .m-icon { width: 30px; height: 30px; stroke-width: 1.4; color: var(--text-2); }

.m-event .m-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.m-event .t { display: block; font-size: 13px; line-height: 18px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.m-event .n { display: block; margin: 0; font-size: 18px; line-height: 22px; font-weight: 700; color: var(--title); overflow-wrap: anywhere; }
.m-event .m { display: block; font-size: 12.5px; line-height: 18px; color: var(--text-muted); }

.m-event.type-task { --bg: var(--ev-task-bg); --bar: var(--ev-task-bar); --title: var(--ev-task-title); }
.m-event.type-routine { --bg: var(--ev-routine-bg); --bar: var(--ev-routine-bar); --title: var(--ev-routine-title); }
.m-event.type-deadline { --bg: var(--ev-deadline-bg); --bar: var(--ev-deadline-bar); --title: var(--ev-deadline-title); }
.m-event.is-done { opacity: 0.62; }
.m-event.is-done .n { text-decoration: line-through; }

.m-empty {
  margin: 0;
  padding: 18px 12px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

/* Modal & forms ------------------------------------------------------------ */

.modal-root[hidden] { display: none; }

.modal-root {
  position: fixed;
  inset: 0;
  background: rgba(40, 32, 24, 0.40);
  display: grid;
  place-items: center;
  z-index: 40;
  padding: 16px;
  overflow-y: auto;                      /* fallback for browsers without dvh */
}

/* The dialog scrolls inside itself on short phones so the Save button is always reachable */
.modal {
  width: min(440px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--surface-solid);
  border: 0;
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  padding: 18px;
}

.modal h2 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field span { font-size: 11px; font-weight: 700; color: var(--text-2); }
.field input, .field textarea, .field select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  padding: 8px 10px;
  min-height: 36px;
  color: var(--text);
}

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.danger {
  background: color-mix(in srgb, var(--accent-red) 16%, var(--surface-solid));
  color: var(--accent-red);
  border: 0;
  border-radius: var(--radius-control);
  padding: 8px 12px;
}

.primary {
  background: var(--brand);
  color: var(--text-on-accent);
  border: 0;
  border-radius: var(--radius-control);
  padding: 8px 14px;
  font-weight: 700;
}

.ghost { padding: 8px 12px; }

/* Setup ------------------------------------------------------------------- */

.setup {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 16px;
}

.setup-card {
  width: min(380px, 100%);
  padding: 22px 20px 20px;
}

.setup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}

.setup-title .icon-logo { width: 24px; height: 24px; color: var(--text); stroke-width: 1.6; }
.setup-title .logo-text { font-size: 22px; }
.setup-card > .sub { margin-bottom: 14px; font-size: 12px; }
.setup-card .primary { width: 100%; margin-top: 4px; padding: 10px 14px; }

/* Settings menu ----------------------------------------------------------- */

.menu {
  position: absolute;
  right: 16px;
  top: calc(var(--header-h) - 4px);
  z-index: 20;
  width: 272px;
  padding: 8px;
  border: 1px solid var(--menu-edge);
  border-radius: 14px;
  /* Frosted glass: the page behind is blurred, not hidden (fallbacks in profile.css) */
  background: var(--menu-sheen), var(--menu-glass);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--menu-shadow);
}

.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--text-2);
  text-align: left;
}

/* Every icon sits in the same 20px box, so the labels line up on one edge */
.menu-icon { display: inline-grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; }
.menu-item .icon { width: 16px; height: 16px; }
.menu-item:hover { background: var(--menu-hover); color: var(--text); }
.m-only { display: none; }
.menu .primary { width: 100%; }

/* Screen-reader announcer. Pinned to the top corner: left in normal flow it sat just below the
   full-height app and made the page 1px too tall, which showed a scrollbar. */
.live {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Nothing behind the sign-in screen may scroll */
body:has(#setup:not([hidden])) { overflow: hidden; }


/* Full-size blocks have room for a two-line title before truncating */
.event-block.is-full .n { align-items: flex-start; }
.event-block.is-full .n .icon { margin-top: 2px; }
.event-block.is-full .n span {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

/* On the week grid the block's position already says when; compact blocks spend their width on the title */
.cal-week-wrap .event-block.is-compact .t { display: none; }

.side-actions { display: inline-flex; align-items: center; gap: 8px; }

/* Avatar = account menu trigger ------------------------------------------- */

.user-chip { padding: 2px 10px 2px 2px; }
.user-chip:hover .user-avatar,
.user-chip[aria-expanded="true"] .user-avatar,
.user-btn:hover .user-circle,
.user-btn[aria-expanded="true"] .user-circle { box-shadow: 0 0 0 2px var(--brand); }
.user-chip[aria-expanded="true"] { background: rgba(255, 255, 255, 0.22); }
.user-avatar, .user-circle { transition: box-shadow 120ms ease-out; }

/* Search -------------------------------------------------------------------- */

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: clamp(220px, 26vw, 360px);
  height: 32px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--control-edge);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-solid) 78%, transparent);
  color: var(--text-muted);
  transition: box-shadow 120ms ease-out, background-color 120ms ease-out;
}

.search:focus-within {
  background: var(--surface-solid);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}

.search > .icon { width: 15px; height: 15px; flex: 0 0 auto; }

.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
}

.search input::placeholder { color: var(--text-faint); }
.search input::-webkit-search-cancel-button { cursor: pointer; }

.search-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-muted);
  font: 600 11px/1 var(--font);
}

.search:focus-within .search-kbd { display: none; }

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: max(100%, 380px);
  max-height: min(70vh, 460px);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  background: var(--surface-solid);
  box-shadow: var(--shadow-float);
  z-index: 30;
}

.search-hit {
  --bar: var(--ev-class-bar);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.search-hit.type-task { --bar: var(--ev-task-bar); }
.search-hit.type-routine { --bar: var(--ev-routine-bar); }
.search-hit.type-deadline { --bar: var(--ev-deadline-bar); }
.search-hit.type-countdown { --bar: var(--brand-deep); }

.search-hit.is-active, .search-hit:hover { background: var(--surface-3); }

.hit-type {
  flex: 0 0 74px;
  padding: 2px 0 2px 8px;
  border-left: 3px solid var(--bar);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hit-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hit-title, .hit-when { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-title { font-size: 13px; font-weight: 700; color: var(--text); }
.hit-when { font-size: 11.5px; color: var(--text-muted); }
.hit-go { color: var(--text-faint); }

.search-hit mark { background: color-mix(in srgb, var(--brand) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

.search-empty, .search-more { padding: 12px 10px; font-size: 12px; color: var(--text-muted); }
.search-more { padding: 8px 10px 4px; font-size: 11px; }

/* Phone: the header's search button opens a sheet over the page */
.round-btn { display: none; }
.search-sheet { display: none; }

/* Sign-in -------------------------------------------------------------------- */

.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; padding-right: 58px; }
.pw-toggle {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: var(--control);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
}

.form-error { min-height: 16px; margin: 2px 0 8px; font-size: 12px; color: var(--danger); }
.setup-card .field input:disabled, .setup-card .primary:disabled { opacity: 0.6; cursor: not-allowed; }

.event-block.more-block {
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--text-faint);
  border-left: 1px dashed var(--text-faint);
  background: var(--surface-solid);
  box-shadow: none;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
}

.more-pop {
  position: fixed;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  border-radius: 10px;
  background: var(--surface-solid);
  box-shadow: var(--shadow-float);
}

.more-item {
  --bar: var(--ev-class-bar);
  display: flex;
  flex-direction: column;
  padding: 6px 8px 6px 9px;
  border: 0;
  border-left: 3px solid var(--bar);
  border-radius: 6px;
  background: transparent;
  text-align: left;
  color: var(--text);
}
.more-item:hover, .more-item:focus-visible { background: var(--surface-3); }
.more-item.type-task { --bar: var(--ev-task-bar); }
.more-item.type-routine { --bar: var(--ev-routine-bar); }
.more-item .when { font-size: 10.5px; color: var(--text-muted); }
.more-item .title { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-day { margin-top: 2px; padding: 7px; border: 0; border-top: 1px solid var(--border); background: none; color: var(--brand); font-weight: 700; font-size: 12px; }

/* Side-by-side blocks on the narrow week columns: drop the time and icon, give the title two lines */
.cal-week-wrap .event-block.is-split .t,
.cal-week-wrap .event-block.is-split .n .icon,
.cal-week-wrap .event-block.is-split .m { display: none; }
.cal-week-wrap .event-block.is-split { justify-content: flex-start; padding: 4px 5px 4px 7px; }
.cal-week-wrap .event-block.is-split .n span {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

/* Sign-in backdrop ------------------------------------------------------------
   Four photos on a 13.2s loop. Each photo fades in over 1s, stays fully visible for 2.3s,
   then the next photo fades in on top of it over 1s. A slide is wider than the screen and
   pans from its left edge to its right edge the whole time it is on screen, finishing as
   the next photo completes its fade-in.
   Timeline per slide (3.3s slot, 13.2s cycle):
     0s–1s     fade in (on top: z-index 3)
     1s–3.3s   fully visible, still panning (z-index 2)
     3.3s–4.3s next photo fades in over it; this one keeps panning to its right edge
     4.3s      hidden (already covered), waits for its next turn */

.login-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;                  /* slide z-indexes stay below the sign-in card */
  overflow: hidden;
  background: #2A211C;
}

.login-bg .slide {
  --w: max(125vw, 150vh);
  --pan: calc(100vw - var(--w));
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w);
  height: 100%;
  background: var(--img) center / cover no-repeat;
  opacity: 0;
  animation: login-slide 13.2s linear infinite;
  will-change: transform, opacity;
}

.login-bg .slide:nth-child(2) { animation-delay: 3.3s; }
.login-bg .slide:nth-child(3) { animation-delay: 6.6s; }
.login-bg .slide:nth-child(4) { animation-delay: 9.9s; }

/* Keeps the card readable on any photo */
.login-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(ellipse at center, rgba(30, 20, 16, 0.18) 0%, rgba(30, 20, 16, 0.55) 75%),
    linear-gradient(rgba(40, 26, 20, 0.28), rgba(40, 26, 20, 0.28));
}

/* Percentages of 13.2s: 1s = 7.5758%, 4.3s = 32.5758%. The fading-in slide is always on top
   (z-index 3), so the wrap from the last photo back to the first looks like every other change. */
@keyframes login-slide {
  0% { opacity: 0; transform: translateX(0); z-index: 3; }
  7.5757% { z-index: 3; }
  7.5758% { opacity: 1; z-index: 2; }
  32.5758% { opacity: 1; transform: translateX(var(--pan)); z-index: 2; }
  32.5759% { opacity: 0; z-index: 1; }
  100% { opacity: 0; transform: translateX(var(--pan)); z-index: 1; }
}

.setup-card { position: relative; z-index: 1; box-shadow: 0 18px 48px rgba(20, 12, 8, 0.45), 0 2px 6px rgba(20, 12, 8, 0.25); }