/* Week / day time grid. Positions are driven by custom properties set from JS (--s start min, --d duration min,
   --c column, --n columns in the overlap cluster). --hour-h is unitless px per hour. */
.week-scroll {
  --rail-w: 58px; --col-min: 0px;
  position: relative; overflow: auto; background: var(--surface); overscroll-behavior: contain;
}
.week-scroll:focus { outline: none; }
.week-head, .week-body {
  display: grid; grid-template-columns: var(--rail-w) repeat(var(--cols), minmax(var(--col-min), 1fr));
  width: max-content; min-width: 100%;
}
.week-head { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
.rail-corner { position: sticky; left: 0; z-index: 6; background: var(--surface); }

.day-head {
  display: grid; justify-items: center; align-content: center; gap: 2px; padding: 8px 4px 9px;
  border-left: 1px solid var(--line-soft); text-align: center; min-height: 62px;
}
button.day-head:hover { background: var(--surface-2); }
.dh-dow { font-size: 12.5px; color: var(--muted); }
.dh-num { font: 300 22px/1 var(--font-display); min-width: 34px; padding: 4px 6px; border-radius: 999px; }
.day-head.is-today .dh-dow { color: var(--ink); font-weight: 600; }
.day-head.is-today .dh-num { background: var(--sun); color: var(--sun-ink); font-weight: 600; }

.week-body { height: calc(var(--hour-h) * 24 * 1px); position: relative; }
.rail { position: sticky; left: 0; z-index: 4; background: var(--surface); }
.rail-hour {
  position: absolute; right: 8px; top: calc(var(--s) / 60 * var(--hour-h) * 1px); transform: translateY(-50%);
  font-size: 11.5px; color: var(--muted); letter-spacing: 0.01em;
}
.now-chip {
  position: absolute; right: 4px; top: calc(var(--s) / 60 * var(--hour-h) * 1px); transform: translateY(-50%);
  padding: 1px 5px; border-radius: 4px; background: var(--sun); color: var(--sun-ink); font-size: 11px; font-weight: 700; z-index: 2;
}

.day-col {
  position: relative; border-left: 1px solid var(--line-soft); cursor: cell;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour-h) * 1px - 1px), var(--line-soft) calc(var(--hour-h) * 1px - 1px), var(--line-soft) calc(var(--hour-h) * 1px)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour-h) * 0.5px - 1px), color-mix(in oklab, var(--line-soft) 45%, transparent) calc(var(--hour-h) * 0.5px - 1px), color-mix(in oklab, var(--line-soft) 45%, transparent) calc(var(--hour-h) * 0.5px));
}
.day-col.is-today { background-color: color-mix(in oklab, var(--sun) 7%, var(--surface)); }

.now-line {
  position: absolute; left: 0; right: 0; height: 2px; z-index: 3; pointer-events: none; background: var(--sun);
  top: calc(var(--s) / 60 * var(--hour-h) * 1px - 1px);
}
.now-line::before {
  content: ""; position: absolute; left: -1px; top: -4px; border-left: 9px solid var(--sun);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

/* Events */
.ev {
  --ev: var(--accent);
  position: absolute; z-index: 1; overflow: hidden; cursor: pointer;
  top: calc(var(--s) / 60 * var(--hour-h) * 1px + 1px);
  height: calc(var(--d) / 60 * var(--hour-h) * 1px - 2px);
  left: calc(var(--c) / var(--n) * 100% + 2px); width: calc(100% / var(--n) - 4px);
  display: flex; flex-direction: column; gap: 1px; padding: 3px 6px 3px 7px; text-align: left;
  background: color-mix(in oklab, var(--ev) 17%, var(--surface));
  border-left: 3px solid var(--ev); border-radius: 5px; color: var(--ink); font-size: 12.5px; line-height: 1.25;
  transition: box-shadow 0.12s, background-color 0.12s;
}
.ev:hover { background: color-mix(in oklab, var(--ev) 26%, var(--surface)); z-index: 2; }
.ev:focus-visible { z-index: 4; outline-offset: 0; }
.ev--short { flex-direction: row; align-items: center; gap: 6px; padding-top: 1px; padding-bottom: 1px; }
.ev-head { display: flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 11.5px; font-weight: 600; flex: none; }
.ev-title { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.ev--short .ev-title { white-space: nowrap; text-overflow: ellipsis; display: block; flex: 1; min-width: 0; }
.ev-rep { opacity: 0.7; display: inline-flex; }
.ev--cont-before { border-top-left-radius: 0; border-top-right-radius: 0; }
.ev--cont-after { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Meetings: plum hue + hatch + badge. */
.ev--meeting, .chip.ev--meeting, .p-row.ev--meeting { --ev: var(--meet); }
.ev--meeting {
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in oklab, var(--ev) 10%, transparent) 7px 14px);
}
.ev-badge { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ev); color: var(--surface); flex: none; }
.ev--live .ev-badge { animation: live 1.8s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ev) 60%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
.ev--done { opacity: 0.8; }
.ev--cancelled { opacity: 0.62; --ev: var(--muted); background-image: none; border-left-style: dashed; }
.ev--cancelled .ev-title, .ev--cancelled .ev-time, .ev--cancelled .chip-title, .ev--cancelled .chip-time { text-decoration: line-through; }

.grid-hint {
  position: absolute; z-index: 2; pointer-events: none; text-align: center; max-width: 260px; color: var(--muted); font-size: 13.5px;
  top: calc(var(--hour-h) * 8.6 * 1px); left: calc(50% - 130px); padding: 10px 14px; border-radius: var(--r-m);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
}
.grid-hint-title { color: var(--ink); font-weight: 600; margin-bottom: 2px; }

@media (max-width: 720px) {
  .week-scroll { --rail-w: 46px; }
  .week-scroll--week { --col-min: 112px; }
  .rail-hour { right: 5px; font-size: 11px; }
  .dh-num { font-size: 20px; }
}