/* ---- Agenda ----
   Event category colours are DECORATIVE. Every appointment also shows its
   category as text (or lives in a labelled column), so meaning never depends on
   hue. The three differ mainly in LIGHTNESS (blue = mid, amber = light,
   graphite = dark), which keeps them separable under colour-vision deficiency
   (blue/yellow axis + lightness, avoiding the unreliable green/red axis). */
:root {
  --event-work: #2f6bff;      /* blue — our accent family */
  --event-personal: #e0972b;  /* amber — bright */
  --event-health: #3a3f4a;    /* graphite — dark neutral */
}

/* Toolbar */
.agenda-nav { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.agenda-nav__label { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; }
.agenda-nav__label strong { font-size: var(--fs-lg); }
.agenda-nav__label span { font-size: var(--fs-sm); color: var(--c-ink-soft); }
/* today view: weekday/date stacked, with the add button beside them */
.agenda-day .agenda-nav__label { flex-direction: row; align-items: center; gap: var(--sp-3); }
.agenda-day__when { display: flex; flex-direction: column; line-height: 1.2; }
.agenda-nav__today {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-full);
  font-weight: var(--fw-medium);
}
.agenda-nav__today:hover { background: var(--c-surface-2); }
.agenda-nav__arrows { display: flex; gap: var(--sp-1); }
.agenda-nav__arrow {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  color: var(--c-ink);
}
.agenda-nav__arrow:hover { background: var(--c-surface-2); }
.agenda-nav__arrow svg { width: 1.25rem; height: 1.25rem; }

/* Appointment card (Today list) */
.appt-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.appt {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-border-strong);
  border-radius: var(--r-md);
}
.appt__time { font-variant-numeric: tabular-nums; color: var(--c-ink-soft); font-size: var(--fs-sm); white-space: nowrap; }
.appt__title { font-weight: var(--fw-medium); margin-right: auto; }
.appt__tag {
  font-size: var(--fs-xs); color: var(--c-ink-soft);
  border: 1px solid var(--c-border); border-radius: var(--r-full);
  padding: 2px var(--sp-2);
}
.appt--work { border-left-color: var(--event-work); }
.appt--personal { border-left-color: var(--event-personal); }
.appt--health { border-left-color: var(--event-health); }

.agenda-empty { color: var(--c-ink-faint); padding: var(--sp-5) 0; }
.agenda-empty--sm { text-align: center; padding: var(--sp-3) 0; }

/* Day columns (3 Days / Week) */
.cols { display: grid; gap: var(--sp-3); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--7 { grid-template-columns: repeat(7, 1fr); }
.day-col {
  display: flex; flex-direction: column;
  min-height: 260px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.day-col.is-today { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.day-col__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.day-col__wd { margin-right: auto; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); }
.day-col.is-today .day-col__wd { color: var(--c-accent-ink); }
.day-col__num { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.day-col__add { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--r-sm); font-size: var(--fs-lg); line-height: 1; color: var(--c-ink-faint); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.day-col__add:hover { background: var(--c-surface-2); color: var(--c-accent-ink); }
.day-col__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); }
.day-col .appt { padding: var(--sp-2); gap: var(--sp-2); font-size: var(--fs-sm); }
.day-col .appt__time { font-size: var(--fs-xs); }

/* Month grid */
.mgrid { border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.mgrid__head, .mgrid__body { display: grid; grid-template-columns: repeat(7, 1fr); }
.mgrid__head { background: var(--c-surface-2); }
.mgrid__wd { padding: var(--sp-2); text-align: center; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); }
.mcell {
  display: flex; flex-direction: column; gap: var(--sp-1);
  min-height: 108px; padding: var(--sp-2);
  text-align: left;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  border-left: 1px solid var(--c-border);
}
.mcell:nth-child(7n + 1) { border-left: 0; }
.mcell:hover { background: var(--c-surface-2); }
.mcell.is-out { background: var(--c-bg); }
.mcell.is-out .mcell__num { color: var(--c-ink-faint); }
.mcell__num { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mcell.is-today .mcell__num {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  background: var(--c-accent-ink); color: #fff; border-radius: var(--r-full);
}
.mcell__events { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.chip {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: 1px var(--sp-1); border-radius: var(--r-sm);
  background: var(--c-surface-2); font-size: var(--fs-xs);
}
.chip__dot { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: var(--r-full); }
.chip__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip--work .chip__dot { background: var(--event-work); }
.chip--personal .chip__dot { background: var(--event-personal); }
.chip--health .chip__dot { background: var(--event-health); }
.chip-more { font-size: var(--fs-xs); color: var(--c-ink-soft); padding-left: var(--sp-1); }

/* Narrow screens: columns scroll horizontally; month shows dots only */
@media (max-width: 768px) {
  .cols--3, .cols--7 {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .cols--3 .day-col, .cols--7 .day-col { scroll-snap-align: start; }
  .mcell { min-height: 66px; }
  .mcell__events { flex-direction: row; flex-wrap: wrap; }
  .chip { padding: 0; background: none; }
  .chip__txt { display: none; }
}

/* ---- Deadlines layer (real tasks/projects) ----
   Marked with a flag icon + text, not hue, so it reads as "due" distinctly from
   the decorative category colours and under colour-vision deficiency. */
.appt-list + .appt-list { margin-top: var(--sp-3); }
.appt--deadline { width: 100%; text-align: left; border-left-color: var(--c-ink); cursor: pointer; }
.appt--deadline:hover { background: var(--c-surface-2); }
.appt--deadline .appt__time { display: inline-flex; align-items: center; gap: 4px; color: var(--c-ink); font-weight: var(--fw-semibold); }
.appt--deadline .appt__time svg { width: 0.9rem; height: 0.9rem; }
.appt.is-done .appt__title { text-decoration: line-through; color: var(--c-ink-faint); }
.chip--deadline .chip__flag { display: inline-flex; flex: 0 0 auto; }
.chip--deadline .chip__flag svg { width: 0.7rem; height: 0.7rem; color: var(--c-ink); }