/* Calendar: the week time grid, event cards and today's meetings. */

/* The week grid. A day is a column; time runs down in 15-minute rows. Items are
   placed with the generated classes at the end of this file (cal-col-*, cal-row-*,
   cal-span-*, cal-lane-*), because the CSP forbids style attributes. */
.cal {
  /* 10px per 15 minutes: 07:00–19:00 fits on one screen. */
  --cal-slot: 0.625rem;
  --cal-axis: 3.75rem;
  --cal-day-min: 7.5rem;
  --cal-columns: var(--cal-axis) repeat(7, minmax(var(--cal-day-min), 1fr));
  --cal-min-width: calc(var(--cal-axis) + 7 * var(--cal-day-min));
}
.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border);
  background: var(--color-surface);
}
.cal-nav { display: flex; align-items: center; gap: var(--space-1); }
.cal-nav .button.is-current { color: var(--color-accent); border-color: var(--color-accent); }
.cal-range { flex: 1; min-width: 12rem; margin: 0; font-size: var(--text-lg); font-weight: 600; }
.cal-legend { padding: 0; }

/* The dashboard's copy of the week: shorter, headed like a panel. */
.dashboard-week { margin-bottom: var(--space-4); }
.cal-embedded .cal-range { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; font-size: var(--text-md); white-space: nowrap; }
.cal-embedded .cal-range .icon { align-self: center; color: var(--color-ink-subtle); }
.cal-range-detail { color: var(--color-ink-muted); font-size: var(--text-sm); font-weight: 400; }

.cal-scroll {
  position: relative;
  min-height: 20rem;
  max-height: calc(100vh - 16rem);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
}
.cal-top, .cal-body { min-width: var(--cal-min-width); }
.cal-top {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-strong);
}
.cal-heads, .cal-cols { display: grid; grid-template-columns: var(--cal-columns); }
.cal-corner, .cal-hour { position: sticky; left: 0; z-index: 5; background: var(--color-surface); }

.cal-dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: var(--space-2) 0;
  border-left: var(--border);
  color: var(--color-ink-muted);
}
.cal-dayname { font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.cal-daynum { display: grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 1rem; color: var(--color-ink); font-size: var(--text-lg); font-weight: 500; }
.cal-daymonth { display: none; }
.cal-dayhead.is-today .cal-dayname { color: var(--color-accent); }
.cal-dayhead.is-today .cal-daynum { background: var(--color-accent); color: var(--color-on-accent); }

/* The all-day row: a background layer of cells and, on top of it in the same grid area, the bars. */
.cal-alldayrow { display: grid; border-top: var(--border); }
.cal-allday-bg, .cal-allday-bars { grid-area: 1 / 1; }
.cal-allday-bars { grid-auto-flow: row dense; align-content: start; padding: 3px 0; row-gap: 2px; min-height: 1.75rem; }
.cal-allday-label { display: flex; align-items: center; justify-content: flex-end; padding-right: var(--space-2); color: var(--color-ink-subtle); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cal-allday-cell { border-left: var(--border); }
.cal-allday-cell.is-weekend, .cal-daycol.is-weekend, .cal-dayhead.is-weekend { background: var(--color-surface-muted); }
.cal-allday-cell.is-today, .cal-daycol.is-today { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.cal-allday-bar {
  z-index: 2;
  overflow: hidden;
  margin: 0 3px;
  padding: 1px 6px;
  border-left: 3px solid var(--cal-stripe);
  border-radius: var(--radius-sm);
  background: var(--cal-fill);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-allday-bar:hover { text-decoration: none; filter: brightness(0.97); }

.cal-body { display: grid; grid-template-columns: var(--cal-columns); position: relative; padding: var(--space-3) 0 var(--space-2); }
.cal-daycol { grid-row: 1 / -1; border-left: var(--border); }
.cal-hourline { grid-column: 2 / -1; position: relative; z-index: 1; border-top: var(--border); pointer-events: none; }
.cal-hourline::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dotted color-mix(in srgb, var(--color-border) 80%, transparent); }
/* The label sits on its hour line, not under it. */
.cal-hour { grid-column: 1; align-self: start; padding-right: var(--space-2); text-align: right; color: var(--color-ink-subtle); font-size: 0.6875rem; line-height: 1; transform: translateY(-50%); pointer-events: none; }

.cal-event, .cal-allday-bar {
  --cal-stripe: var(--color-accent);
  --cal-fill: var(--color-accent-soft);
}
.cal-event.is-theirs, .cal-allday-bar.is-theirs {
  --cal-stripe: var(--color-partner);
  --cal-fill: var(--color-partner-soft);
}
.cal-event {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  justify-self: start;
  overflow: hidden;
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 2px 6px;
  border-left: 3px solid var(--cal-stripe);
  border-radius: var(--radius-sm);
  background: var(--cal-fill);
  font-size: var(--text-sm);
  line-height: 1.3;
}
.cal-event:hover { z-index: 4; filter: brightness(0.98); }
.cal-event-time { margin: 0; overflow: hidden; color: var(--color-ink-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.cal-event-title { display: block; color: var(--color-ink); font-weight: 600; overflow-wrap: break-word; }
.cal-event-title:hover { text-decoration: none; }
.cal-event-title::after { content: ""; position: absolute; inset: 0; }
.cal-event-owner { margin: 0; color: var(--color-ink-muted); font-size: var(--text-xs); }
.cal-event-links { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-1) 0 0; }
.cal-event-links .chip { position: relative; z-index: 1; }
.is-busy { --cal-fill: var(--color-surface-hover); }
.is-busy .cal-event-title, .is-busy.cal-allday-bar { color: var(--color-ink-muted); font-weight: 500; }
.cal-event.is-short { display: flex; align-items: baseline; gap: var(--space-2); padding-top: 0; padding-bottom: 0; line-height: 1.25; white-space: nowrap; }
.cal-event.is-tiny { margin-top: 0; margin-bottom: 0; font-size: 0.625rem; line-height: var(--cal-slot); }
.cal-event.is-tiny .cal-event-time { font-size: inherit; line-height: inherit; }
.cal-event.is-short .cal-event-title { overflow: hidden; text-overflow: ellipsis; }
.cal-event.is-short .cal-event-owner, .cal-event.is-short .cal-event-links { display: none; }
/* In a lane narrower than the column only the start time fits; the title wraps below it. */
.cal-event.is-narrow { display: block; white-space: normal; }
.cal-event.is-narrow .cal-event-title { overflow: visible; text-overflow: clip; }

.cal-now { position: relative; z-index: 3; align-self: start; height: 0; border-top: 2px solid var(--color-danger); pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-danger); }

.event {
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface-muted);
  border: var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
.event.is-mine { border-left-color: var(--color-accent); }
.event.is-theirs { border-left-color: var(--color-partner); }
.event-time { color: var(--color-ink-muted); font-size: var(--text-xs); }
.event-title { display: block; font-weight: 500; overflow-wrap: anywhere; }
.event-owner { color: var(--color-ink-subtle); font-size: var(--text-xs); }
.event-links { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: 0 var(--space-2);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}
.chip .icon { width: 12px; height: 12px; flex: none; }

.swatch-mine, .swatch-theirs { transform: none; border-radius: 2px; border-width: 0; }
.swatch-mine { background: var(--color-accent); }
.swatch-theirs { background: var(--color-partner); }

.meeting-list { margin: 0; padding: 0; list-style: none; }
.meeting {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border);
  border-left: 3px solid var(--color-partner);
}
.meeting.is-mine { border-left-color: var(--color-accent); }
.meeting-time { min-width: 6.5rem; color: var(--color-ink-muted); }

.panel-note { padding: var(--space-3) var(--space-4); color: var(--color-ink-muted); font-size: var(--text-sm); }

/* Event categories. The palette is fixed (calendar.Colors): each colour is a
   class that sets --cat, which the event styles above and below pick up. */
.cat-blue { --cat: var(--color-cat-blue); }
.cat-sky { --cat: var(--color-cat-sky); }
.cat-teal { --cat: var(--color-cat-teal); }
.cat-green { --cat: var(--color-cat-green); }
.cat-lime { --cat: var(--color-cat-lime); }
.cat-amber { --cat: var(--color-cat-amber); }
.cat-orange { --cat: var(--color-cat-orange); }
.cat-red { --cat: var(--color-cat-red); }
.cat-pink { --cat: var(--color-cat-pink); }
.cat-violet { --cat: var(--color-cat-violet); }
.cat-brown { --cat: var(--color-cat-brown); }
.cat-slate { --cat: var(--color-cat-slate); }
.cal-event.has-cat, .cal-allday-bar.has-cat {
  --cal-stripe: var(--cat);
  --cal-fill: color-mix(in srgb, var(--cat) 14%, var(--color-surface));
}
/* After the .is-mine / .is-theirs rules above, so the category wins. */
.event.has-cat, .meeting.has-cat { border-left-color: var(--cat); }
.category-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); white-space: nowrap; }
.category-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cat, var(--color-ink-subtle)); }
.cal-legend .category-chip { font-size: inherit; }
.category-list { margin: 0; padding: 0; list-style: none; }
.category-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: var(--border); }
.category-row:last-child { border-bottom: none; }
.category-choices { display: flex; flex-direction: column; gap: var(--space-2); }
.color-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.color-option { position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; border: var(--border); border-radius: 50%; cursor: pointer; }
.color-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.color-option .category-dot { width: 1.25rem; height: 1.25rem; }
.color-option:has(input:checked) { border-color: var(--cat); box-shadow: inset 0 0 0 2px var(--color-surface), 0 0 0 2px var(--cat); }
.color-option:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.panel-body { padding: var(--space-4); }
.panel-body > * + * { margin-top: var(--space-3); }

/* Generated utility classes for the week grid. */
/* BEGIN GENERATED: go generate ./internal/web (tools/calendarcss) */
.cal-row-1 { grid-row-start: 1; }
.cal-row-2 { grid-row-start: 2; }
.cal-row-3 { grid-row-start: 3; }
.cal-row-4 { grid-row-start: 4; }
.cal-row-5 { grid-row-start: 5; }
.cal-row-6 { grid-row-start: 6; }
.cal-row-7 { grid-row-start: 7; }
.cal-row-8 { grid-row-start: 8; }
.cal-row-9 { grid-row-start: 9; }
.cal-row-10 { grid-row-start: 10; }
.cal-row-11 { grid-row-start: 11; }
.cal-row-12 { grid-row-start: 12; }
.cal-row-13 { grid-row-start: 13; }
.cal-row-14 { grid-row-start: 14; }
.cal-row-15 { grid-row-start: 15; }
.cal-row-16 { grid-row-start: 16; }
.cal-row-17 { grid-row-start: 17; }
.cal-row-18 { grid-row-start: 18; }
.cal-row-19 { grid-row-start: 19; }
.cal-row-20 { grid-row-start: 20; }
.cal-row-21 { grid-row-start: 21; }
.cal-row-22 { grid-row-start: 22; }
.cal-row-23 { grid-row-start: 23; }
.cal-row-24 { grid-row-start: 24; }
.cal-row-25 { grid-row-start: 25; }
.cal-row-26 { grid-row-start: 26; }
.cal-row-27 { grid-row-start: 27; }
.cal-row-28 { grid-row-start: 28; }
.cal-row-29 { grid-row-start: 29; }
.cal-row-30 { grid-row-start: 30; }
.cal-row-31 { grid-row-start: 31; }
.cal-row-32 { grid-row-start: 32; }
.cal-row-33 { grid-row-start: 33; }
.cal-row-34 { grid-row-start: 34; }
.cal-row-35 { grid-row-start: 35; }
.cal-row-36 { grid-row-start: 36; }
.cal-row-37 { grid-row-start: 37; }
.cal-row-38 { grid-row-start: 38; }
.cal-row-39 { grid-row-start: 39; }
.cal-row-40 { grid-row-start: 40; }
.cal-row-41 { grid-row-start: 41; }
.cal-row-42 { grid-row-start: 42; }
.cal-row-43 { grid-row-start: 43; }
.cal-row-44 { grid-row-start: 44; }
.cal-row-45 { grid-row-start: 45; }
.cal-row-46 { grid-row-start: 46; }
.cal-row-47 { grid-row-start: 47; }
.cal-row-48 { grid-row-start: 48; }
.cal-row-49 { grid-row-start: 49; }
.cal-row-50 { grid-row-start: 50; }
.cal-row-51 { grid-row-start: 51; }
.cal-row-52 { grid-row-start: 52; }
.cal-row-53 { grid-row-start: 53; }
.cal-row-54 { grid-row-start: 54; }
.cal-row-55 { grid-row-start: 55; }
.cal-row-56 { grid-row-start: 56; }
.cal-row-57 { grid-row-start: 57; }
.cal-row-58 { grid-row-start: 58; }
.cal-row-59 { grid-row-start: 59; }
.cal-row-60 { grid-row-start: 60; }
.cal-row-61 { grid-row-start: 61; }
.cal-row-62 { grid-row-start: 62; }
.cal-row-63 { grid-row-start: 63; }
.cal-row-64 { grid-row-start: 64; }
.cal-row-65 { grid-row-start: 65; }
.cal-row-66 { grid-row-start: 66; }
.cal-row-67 { grid-row-start: 67; }
.cal-row-68 { grid-row-start: 68; }
.cal-row-69 { grid-row-start: 69; }
.cal-row-70 { grid-row-start: 70; }
.cal-row-71 { grid-row-start: 71; }
.cal-row-72 { grid-row-start: 72; }
.cal-row-73 { grid-row-start: 73; }
.cal-row-74 { grid-row-start: 74; }
.cal-row-75 { grid-row-start: 75; }
.cal-row-76 { grid-row-start: 76; }
.cal-row-77 { grid-row-start: 77; }
.cal-row-78 { grid-row-start: 78; }
.cal-row-79 { grid-row-start: 79; }
.cal-row-80 { grid-row-start: 80; }
.cal-row-81 { grid-row-start: 81; }
.cal-row-82 { grid-row-start: 82; }
.cal-row-83 { grid-row-start: 83; }
.cal-row-84 { grid-row-start: 84; }
.cal-row-85 { grid-row-start: 85; }
.cal-row-86 { grid-row-start: 86; }
.cal-row-87 { grid-row-start: 87; }
.cal-row-88 { grid-row-start: 88; }
.cal-row-89 { grid-row-start: 89; }
.cal-row-90 { grid-row-start: 90; }
.cal-row-91 { grid-row-start: 91; }
.cal-row-92 { grid-row-start: 92; }
.cal-row-93 { grid-row-start: 93; }
.cal-row-94 { grid-row-start: 94; }
.cal-row-95 { grid-row-start: 95; }
.cal-row-96 { grid-row-start: 96; }
.cal-row-97 { grid-row-start: 97; }
.cal-span-1 { grid-row-end: span 1; }
.cal-span-2 { grid-row-end: span 2; }
.cal-span-3 { grid-row-end: span 3; }
.cal-span-4 { grid-row-end: span 4; }
.cal-span-5 { grid-row-end: span 5; }
.cal-span-6 { grid-row-end: span 6; }
.cal-span-7 { grid-row-end: span 7; }
.cal-span-8 { grid-row-end: span 8; }
.cal-span-9 { grid-row-end: span 9; }
.cal-span-10 { grid-row-end: span 10; }
.cal-span-11 { grid-row-end: span 11; }
.cal-span-12 { grid-row-end: span 12; }
.cal-span-13 { grid-row-end: span 13; }
.cal-span-14 { grid-row-end: span 14; }
.cal-span-15 { grid-row-end: span 15; }
.cal-span-16 { grid-row-end: span 16; }
.cal-span-17 { grid-row-end: span 17; }
.cal-span-18 { grid-row-end: span 18; }
.cal-span-19 { grid-row-end: span 19; }
.cal-span-20 { grid-row-end: span 20; }
.cal-span-21 { grid-row-end: span 21; }
.cal-span-22 { grid-row-end: span 22; }
.cal-span-23 { grid-row-end: span 23; }
.cal-span-24 { grid-row-end: span 24; }
.cal-span-25 { grid-row-end: span 25; }
.cal-span-26 { grid-row-end: span 26; }
.cal-span-27 { grid-row-end: span 27; }
.cal-span-28 { grid-row-end: span 28; }
.cal-span-29 { grid-row-end: span 29; }
.cal-span-30 { grid-row-end: span 30; }
.cal-span-31 { grid-row-end: span 31; }
.cal-span-32 { grid-row-end: span 32; }
.cal-span-33 { grid-row-end: span 33; }
.cal-span-34 { grid-row-end: span 34; }
.cal-span-35 { grid-row-end: span 35; }
.cal-span-36 { grid-row-end: span 36; }
.cal-span-37 { grid-row-end: span 37; }
.cal-span-38 { grid-row-end: span 38; }
.cal-span-39 { grid-row-end: span 39; }
.cal-span-40 { grid-row-end: span 40; }
.cal-span-41 { grid-row-end: span 41; }
.cal-span-42 { grid-row-end: span 42; }
.cal-span-43 { grid-row-end: span 43; }
.cal-span-44 { grid-row-end: span 44; }
.cal-span-45 { grid-row-end: span 45; }
.cal-span-46 { grid-row-end: span 46; }
.cal-span-47 { grid-row-end: span 47; }
.cal-span-48 { grid-row-end: span 48; }
.cal-span-49 { grid-row-end: span 49; }
.cal-span-50 { grid-row-end: span 50; }
.cal-span-51 { grid-row-end: span 51; }
.cal-span-52 { grid-row-end: span 52; }
.cal-span-53 { grid-row-end: span 53; }
.cal-span-54 { grid-row-end: span 54; }
.cal-span-55 { grid-row-end: span 55; }
.cal-span-56 { grid-row-end: span 56; }
.cal-span-57 { grid-row-end: span 57; }
.cal-span-58 { grid-row-end: span 58; }
.cal-span-59 { grid-row-end: span 59; }
.cal-span-60 { grid-row-end: span 60; }
.cal-span-61 { grid-row-end: span 61; }
.cal-span-62 { grid-row-end: span 62; }
.cal-span-63 { grid-row-end: span 63; }
.cal-span-64 { grid-row-end: span 64; }
.cal-span-65 { grid-row-end: span 65; }
.cal-span-66 { grid-row-end: span 66; }
.cal-span-67 { grid-row-end: span 67; }
.cal-span-68 { grid-row-end: span 68; }
.cal-span-69 { grid-row-end: span 69; }
.cal-span-70 { grid-row-end: span 70; }
.cal-span-71 { grid-row-end: span 71; }
.cal-span-72 { grid-row-end: span 72; }
.cal-span-73 { grid-row-end: span 73; }
.cal-span-74 { grid-row-end: span 74; }
.cal-span-75 { grid-row-end: span 75; }
.cal-span-76 { grid-row-end: span 76; }
.cal-span-77 { grid-row-end: span 77; }
.cal-span-78 { grid-row-end: span 78; }
.cal-span-79 { grid-row-end: span 79; }
.cal-span-80 { grid-row-end: span 80; }
.cal-span-81 { grid-row-end: span 81; }
.cal-span-82 { grid-row-end: span 82; }
.cal-span-83 { grid-row-end: span 83; }
.cal-span-84 { grid-row-end: span 84; }
.cal-span-85 { grid-row-end: span 85; }
.cal-span-86 { grid-row-end: span 86; }
.cal-span-87 { grid-row-end: span 87; }
.cal-span-88 { grid-row-end: span 88; }
.cal-span-89 { grid-row-end: span 89; }
.cal-span-90 { grid-row-end: span 90; }
.cal-span-91 { grid-row-end: span 91; }
.cal-span-92 { grid-row-end: span 92; }
.cal-span-93 { grid-row-end: span 93; }
.cal-span-94 { grid-row-end: span 94; }
.cal-span-95 { grid-row-end: span 95; }
.cal-span-96 { grid-row-end: span 96; }
.cal-col-1 { grid-column-start: 2; }
.cal-col-2 { grid-column-start: 3; }
.cal-col-3 { grid-column-start: 4; }
.cal-col-4 { grid-column-start: 5; }
.cal-col-5 { grid-column-start: 6; }
.cal-col-6 { grid-column-start: 7; }
.cal-col-7 { grid-column-start: 8; }
.cal-colspan-1 { grid-column-end: span 1; }
.cal-colspan-2 { grid-column-end: span 2; }
.cal-colspan-3 { grid-column-end: span 3; }
.cal-colspan-4 { grid-column-end: span 4; }
.cal-colspan-5 { grid-column-end: span 5; }
.cal-colspan-6 { grid-column-end: span 6; }
.cal-colspan-7 { grid-column-end: span 7; }
.cal-lane-0-of-1 { width: calc(100% / 1 - 3px); margin-left: calc(100% * 0 / 1 + 1px); }
.cal-lane-0-of-2 { width: calc(100% / 2 - 3px); margin-left: calc(100% * 0 / 2 + 1px); }
.cal-lane-1-of-2 { width: calc(100% / 2 - 3px); margin-left: calc(100% * 1 / 2 + 1px); }
.cal-lane-0-of-3 { width: calc(100% / 3 - 3px); margin-left: calc(100% * 0 / 3 + 1px); }
.cal-lane-1-of-3 { width: calc(100% / 3 - 3px); margin-left: calc(100% * 1 / 3 + 1px); }
.cal-lane-2-of-3 { width: calc(100% / 3 - 3px); margin-left: calc(100% * 2 / 3 + 1px); }
.cal-lane-0-of-4 { width: calc(100% / 4 - 3px); margin-left: calc(100% * 0 / 4 + 1px); }
.cal-lane-1-of-4 { width: calc(100% / 4 - 3px); margin-left: calc(100% * 1 / 4 + 1px); }
.cal-lane-2-of-4 { width: calc(100% / 4 - 3px); margin-left: calc(100% * 2 / 4 + 1px); }
.cal-lane-3-of-4 { width: calc(100% / 4 - 3px); margin-left: calc(100% * 3 / 4 + 1px); }
.cal-lane-0-of-5 { width: calc(100% / 5 - 3px); margin-left: calc(100% * 0 / 5 + 1px); }
.cal-lane-1-of-5 { width: calc(100% / 5 - 3px); margin-left: calc(100% * 1 / 5 + 1px); }
.cal-lane-2-of-5 { width: calc(100% / 5 - 3px); margin-left: calc(100% * 2 / 5 + 1px); }
.cal-lane-3-of-5 { width: calc(100% / 5 - 3px); margin-left: calc(100% * 3 / 5 + 1px); }
.cal-lane-4-of-5 { width: calc(100% / 5 - 3px); margin-left: calc(100% * 4 / 5 + 1px); }
.cal-lane-0-of-6 { width: calc(100% / 6 - 3px); margin-left: calc(100% * 0 / 6 + 1px); }
.cal-lane-1-of-6 { width: calc(100% / 6 - 3px); margin-left: calc(100% * 1 / 6 + 1px); }
.cal-lane-2-of-6 { width: calc(100% / 6 - 3px); margin-left: calc(100% * 2 / 6 + 1px); }
.cal-lane-3-of-6 { width: calc(100% / 6 - 3px); margin-left: calc(100% * 3 / 6 + 1px); }
.cal-lane-4-of-6 { width: calc(100% / 6 - 3px); margin-left: calc(100% * 4 / 6 + 1px); }
.cal-lane-5-of-6 { width: calc(100% / 6 - 3px); margin-left: calc(100% * 5 / 6 + 1px); }
.cal-lane-0-of-7 { width: calc(100% / 7 - 3px); margin-left: calc(100% * 0 / 7 + 1px); }
.cal-lane-1-of-7 { width: calc(100% / 7 - 3px); margin-left: calc(100% * 1 / 7 + 1px); }
.cal-lane-2-of-7 { width: calc(100% / 7 - 3px); margin-left: calc(100% * 2 / 7 + 1px); }
.cal-lane-3-of-7 { width: calc(100% / 7 - 3px); margin-left: calc(100% * 3 / 7 + 1px); }
.cal-lane-4-of-7 { width: calc(100% / 7 - 3px); margin-left: calc(100% * 4 / 7 + 1px); }
.cal-lane-5-of-7 { width: calc(100% / 7 - 3px); margin-left: calc(100% * 5 / 7 + 1px); }
.cal-lane-6-of-7 { width: calc(100% / 7 - 3px); margin-left: calc(100% * 6 / 7 + 1px); }
.cal-lane-0-of-8 { width: calc(100% / 8 - 3px); margin-left: calc(100% * 0 / 8 + 1px); }
.cal-lane-1-of-8 { width: calc(100% / 8 - 3px); margin-left: calc(100% * 1 / 8 + 1px); }
.cal-lane-2-of-8 { width: calc(100% / 8 - 3px); margin-left: calc(100% * 2 / 8 + 1px); }
.cal-lane-3-of-8 { width: calc(100% / 8 - 3px); margin-left: calc(100% * 3 / 8 + 1px); }
.cal-lane-4-of-8 { width: calc(100% / 8 - 3px); margin-left: calc(100% * 4 / 8 + 1px); }
.cal-lane-5-of-8 { width: calc(100% / 8 - 3px); margin-left: calc(100% * 5 / 8 + 1px); }
.cal-lane-6-of-8 { width: calc(100% / 8 - 3px); margin-left: calc(100% * 6 / 8 + 1px); }
.cal-lane-7-of-8 { width: calc(100% / 8 - 3px); margin-left: calc(100% * 7 / 8 + 1px); }
.cal-lane-0-of-9 { width: calc(100% / 9 - 3px); margin-left: calc(100% * 0 / 9 + 1px); }
.cal-lane-1-of-9 { width: calc(100% / 9 - 3px); margin-left: calc(100% * 1 / 9 + 1px); }
.cal-lane-2-of-9 { width: calc(100% / 9 - 3px); margin-left: calc(100% * 2 / 9 + 1px); }
.cal-lane-3-of-9 { width: calc(100% / 9 - 3px); margin-left: calc(100% * 3 / 9 + 1px); }
.cal-lane-4-of-9 { width: calc(100% / 9 - 3px); margin-left: calc(100% * 4 / 9 + 1px); }
.cal-lane-5-of-9 { width: calc(100% / 9 - 3px); margin-left: calc(100% * 5 / 9 + 1px); }
.cal-lane-6-of-9 { width: calc(100% / 9 - 3px); margin-left: calc(100% * 6 / 9 + 1px); }
.cal-lane-7-of-9 { width: calc(100% / 9 - 3px); margin-left: calc(100% * 7 / 9 + 1px); }
.cal-lane-8-of-9 { width: calc(100% / 9 - 3px); margin-left: calc(100% * 8 / 9 + 1px); }
.cal-lane-0-of-10 { width: calc(100% / 10 - 3px); margin-left: calc(100% * 0 / 10 + 1px); }
.cal-lane-1-of-10 { width: calc(100% / 10 - 3px); margin-left: calc(100% * 1 / 10 + 1px); }
.cal-lane-2-of-10 { width: calc(100% / 10 - 3px); margin-left: calc(100% * 2 / 10 + 1px); }
.cal-lane-3-of-10 { width: calc(100% / 10 - 3px); margin-left: calc(100% * 3 / 10 + 1px); }
.cal-lane-4-of-10 { width: calc(100% / 10 - 3px); margin-left: calc(100% * 4 / 10 + 1px); }
.cal-lane-5-of-10 { width: calc(100% / 10 - 3px); margin-left: calc(100% * 5 / 10 + 1px); }
.cal-lane-6-of-10 { width: calc(100% / 10 - 3px); margin-left: calc(100% * 6 / 10 + 1px); }
.cal-lane-7-of-10 { width: calc(100% / 10 - 3px); margin-left: calc(100% * 7 / 10 + 1px); }
.cal-lane-8-of-10 { width: calc(100% / 10 - 3px); margin-left: calc(100% * 8 / 10 + 1px); }
.cal-lane-9-of-10 { width: calc(100% / 10 - 3px); margin-left: calc(100% * 9 / 10 + 1px); }
.cal-slots-4 { grid-template-rows: repeat(4, var(--cal-slot)); }
.cal-slots-8 { grid-template-rows: repeat(8, var(--cal-slot)); }
.cal-slots-12 { grid-template-rows: repeat(12, var(--cal-slot)); }
.cal-slots-16 { grid-template-rows: repeat(16, var(--cal-slot)); }
.cal-slots-20 { grid-template-rows: repeat(20, var(--cal-slot)); }
.cal-slots-24 { grid-template-rows: repeat(24, var(--cal-slot)); }
.cal-slots-28 { grid-template-rows: repeat(28, var(--cal-slot)); }
.cal-slots-32 { grid-template-rows: repeat(32, var(--cal-slot)); }
.cal-slots-36 { grid-template-rows: repeat(36, var(--cal-slot)); }
.cal-slots-40 { grid-template-rows: repeat(40, var(--cal-slot)); }
.cal-slots-44 { grid-template-rows: repeat(44, var(--cal-slot)); }
.cal-slots-48 { grid-template-rows: repeat(48, var(--cal-slot)); }
.cal-slots-52 { grid-template-rows: repeat(52, var(--cal-slot)); }
.cal-slots-56 { grid-template-rows: repeat(56, var(--cal-slot)); }
.cal-slots-60 { grid-template-rows: repeat(60, var(--cal-slot)); }
.cal-slots-64 { grid-template-rows: repeat(64, var(--cal-slot)); }
.cal-slots-68 { grid-template-rows: repeat(68, var(--cal-slot)); }
.cal-slots-72 { grid-template-rows: repeat(72, var(--cal-slot)); }
.cal-slots-76 { grid-template-rows: repeat(76, var(--cal-slot)); }
.cal-slots-80 { grid-template-rows: repeat(80, var(--cal-slot)); }
.cal-slots-84 { grid-template-rows: repeat(84, var(--cal-slot)); }
.cal-slots-88 { grid-template-rows: repeat(88, var(--cal-slot)); }
.cal-slots-92 { grid-template-rows: repeat(92, var(--cal-slot)); }
.cal-slots-96 { grid-template-rows: repeat(96, var(--cal-slot)); }
/* END GENERATED */

/* The event popup in the dialog. */
.event-quick { display: flex; flex-direction: column; gap: var(--space-4); }
.event-quick p { margin: 0; }
.event-quick-facts { display: flex; flex-direction: column; gap: var(--space-1); }
.event-quick-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.event-quick .form-section { margin-bottom: var(--space-2); }
.event-quick-category { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border); }
.icon-button.is-copied { color: var(--color-success, var(--color-accent)); }