@linked.cm/calendar 0.1.0

package/lib/esm/Calendar.module.css

@@ -0,0 +1,912 @@
+/* Calendar engine — token-themed (no hardcoded colors). Month grid + agenda. */
+.cal {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-space-md, var(--box-gap));
+}
+
+/* One semantic event-card state model for every calendar projection. Consumers may override the named
+   calendar seams; otherwise both states are mathematical tints of the event color, which defaults to the
+   host's control accent. LINKED Button consumes the aliases so its primitive interaction contract remains
+   intact without replacing the calendar's domain presentation. */
+.agItem,
+.tgAllDayEvent,
+.tgEvent,
+.mBar,
+.resourceEvent {
+  --button-primary-bg: var(
+    --calendar-event-surface-bg,
+    color-mix(in srgb, var(--c, var(--control-accent)) 12%, var(--box-bg))
+  );
+  --button-primary-bg-hover: var(
+    --calendar-event-surface-bg-hover,
+    color-mix(in srgb, var(--c, var(--control-accent)) 20%, var(--box-bg))
+  );
+  --button-primary-color: var(--text-primary);
+  --button-primary-color-hover: var(--text-primary);
+}
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--calendar-space-md, var(--box-gap));
+  flex-wrap: wrap;
+}
+.nav {
+  display: flex;
+  align-items: center;
+  gap: var(--calendar-space-sm, var(--list-item-gap));
+}
+.navBtn {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--control-radius);
+  border: 1px solid var(--box-border);
+  background: var(--bg-panel);
+  color: var(--text-primary);
+  font-size: var(--calendar-large-text-size, var(--typography-large-size));
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.navBtn:hover {
+  background: var(--bg-hover);
+}
+.today {
+  height: 32px;
+  padding: 0 var(--calendar-space-md, var(--box-gap));
+  border-radius: var(--control-radius);
+  border: 1px solid var(--box-border);
+  background: var(--bg-panel);
+  color: var(--calendar-muted-text, var(--typography-auxiliary-color));
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  cursor: pointer;
+}
+.today:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.title {
+  font-family: var(--heading-font-family);
+  font-size: var(--calendar-title-text-size, var(--heading-4-font-size));
+  color: var(--text-primary);
+  margin: 0 0 0 var(--calendar-space-sm, var(--list-item-gap));
+}
+.views {
+  display: flex;
+  gap: var(--calendar-space-2xs, var(--popover-gap));
+  padding: var(--calendar-space-2xs, var(--popover-gap));
+  border-radius: var(--radius-full);
+  background: var(--bg-panel);
+  border: 1px solid var(--box-border);
+}
+.viewBtn {
+  padding: var(--calendar-space-2xs, var(--popover-gap)) var(--calendar-space-md, var(--box-gap));
+  border-radius: var(--radius-full);
+  border: none;
+  background: transparent;
+  color: var(--calendar-muted-text, var(--typography-auxiliary-color));
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  cursor: pointer;
+}
+.viewBtn[data-active] {
+  background: var(--control-accent);
+  color: var(--control-text-contrast);
+}
+.empty {
+  padding: 48px var(--calendar-space-lg, var(--section-gap));
+  text-align: center;
+  color: var(--text-auxiliary);
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-body-text-size, var(--typography-font-size));
+}
+
+/* ── month grid ── */
+.grid {
+  display: grid;
+  /* minmax(0,1fr) → EVERY column is exactly equal; long event titles can't stretch a column */
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 1px;
+  background: var(--box-border);
+  border: 1px solid var(--box-border);
+  border-radius: var(--radius-box);
+  overflow: hidden;
+}
+.dow {
+  background: var(--calendar-surface-bg, var(--surface-bg));
+  padding: var(--calendar-space-xs, var(--control-gap));
+  text-align: center;
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-auxiliary);
+}
+.cell {
+  background: var(--box-bg);
+  min-height: 104px;
+  min-width: 0; /* allow the column to stay 1fr; content clips instead of expanding it */
+  padding: var(--calendar-space-2xs, var(--popover-gap));
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-space-2xs, var(--popover-gap));
+}
+.cell[data-out] {
+  background: var(--calendar-surface-bg, var(--surface-bg));
+}
+.cell[data-out] .date {
+  color: var(--text-auxiliary);
+}
+.date {
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  color: var(--calendar-muted-text, var(--typography-auxiliary-color));
+  align-self: flex-end;
+  padding: 0 var(--calendar-space-2xs, var(--popover-gap));
+}
+.cell[data-today] .date {
+  background: var(--control-accent);
+  color: var(--control-text-contrast);
+  border-radius: var(--radius-full);
+  min-width: 20px;
+  text-align: center;
+}
+.chips {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.chip {
+  display: flex;
+  align-items: center;
+  gap: var(--calendar-space-2xs, var(--popover-gap));
+  padding: 1px var(--calendar-space-2xs, var(--popover-gap));
+  border-radius: var(--list-item-radius);
+  border: none;
+  background: color-mix(in srgb, var(--c) 14%, transparent);
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+}
+.chip:hover {
+  background: color-mix(in srgb, var(--c) 24%, transparent);
+}
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--c);
+  flex-shrink: 0;
+}
+.chipText {
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.more {
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  color: var(--text-auxiliary);
+  padding: 0 var(--calendar-space-2xs, var(--popover-gap));
+}
+
+/* phones: shorter cells, hide chip text (dots only) */
+@media (max-width: 640px) {
+  .cell {
+    min-height: 64px;
+  }
+  .chipText,
+  .more {
+    display: none;
+  }
+}
+
+/* ── agenda ── */
+.agenda {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-space-md, var(--box-gap));
+}
+.agDay {
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  gap: var(--calendar-space-md, var(--box-gap));
+}
+.agDate {
+  text-align: center;
+}
+.agDow {
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  text-transform: uppercase;
+  color: var(--text-auxiliary);
+}
+.agNum {
+  font-family: var(--heading-font-family);
+  font-size: var(--calendar-title-text-size, var(--heading-4-font-size));
+  color: var(--text-primary);
+}
+.agDate[data-today] .agNum {
+  color: var(--control-accent);
+}
+.agItems {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-space-2xs, var(--popover-gap));
+}
+.agItem {
+  display: flex;
+  align-items: center;
+  gap: var(--calendar-space-sm, var(--list-item-gap));
+  padding: var(--calendar-space-sm, var(--list-item-gap));
+  border-radius: var(--radius-box);
+  border: 1px solid var(--box-border);
+  background: var(--box-bg);
+  cursor: pointer;
+  text-align: left;
+}
+.agItem:hover {
+  border-color: color-mix(in srgb, var(--c, var(--control-accent)) 40%, var(--box-border));
+}
+.agBar {
+  width: 3px;
+  align-self: stretch;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+.agTime {
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  color: var(--calendar-muted-text, var(--typography-auxiliary-color));
+  min-width: 64px;
+}
+.agTitle {
+  font-family: var(--heading-font-family);
+  font-size: var(--calendar-body-text-size, var(--typography-font-size));
+  color: var(--text-primary);
+  flex: 1;
+}
+.agLoc {
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  color: var(--text-auxiliary);
+}
+.agCross {
+  display: block;
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  color: var(--calendar-info, var(--link-color));
+  margin-top: 2px;
+}
+
+/* ── week / day time grid ── */
+.tg {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--box-border);
+  border-radius: var(--radius-box);
+  overflow: hidden;
+}
+.tgHead {
+  display: flex;
+  border-bottom: 1px solid var(--box-border);
+  background: var(--calendar-surface-bg, var(--surface-bg));
+}
+.tgDayHead {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: var(--calendar-space-2xs, var(--popover-gap));
+  padding: var(--calendar-space-xs, var(--control-gap));
+  border-left: 1px solid var(--box-border);
+}
+.tgDow {
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  text-transform: uppercase;
+  color: var(--text-auxiliary);
+}
+.tgNum {
+  font-family: var(--heading-font-family);
+  font-size: var(--calendar-body-text-size, var(--typography-font-size));
+  color: var(--text-primary);
+}
+.tgDayHead[data-today] .tgNum {
+  color: var(--control-accent);
+}
+.tgAllDay {
+  display: grid;
+  gap: 2px 0;
+  padding: var(--calendar-space-2xs, var(--popover-gap)) 0;
+  border-bottom: 1px solid var(--box-border);
+  background: var(--calendar-surface-bg, var(--surface-bg));
+}
+.tgAllDayLabel {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  align-self: center;
+  padding-left: var(--calendar-space-xs, var(--control-gap));
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  text-transform: uppercase;
+  color: var(--text-auxiliary);
+}
+.tgAllDayEvent {
+  display: block;
+  height: 20px;
+  margin: 0 2px;
+  padding: 0 var(--calendar-space-xs, var(--control-gap));
+  border: none;
+  border-radius: var(--list-item-radius);
+  box-shadow: inset 3px 0 0 var(--a, var(--c));
+  color: var(--text-primary);
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  line-height: 20px;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.tgBody {
+  display: flex;
+  align-items: flex-start; /* columns keep their true 24h height instead of stretching to the viewport */
+  position: relative;
+  max-height: 68vh;
+  overflow-y: auto;
+}
+.tgGutter {
+  width: 56px;
+  flex-shrink: 0;
+}
+.tgHour {
+  height: var(--hour-h);
+  position: relative;
+}
+.tgHourLabel {
+  position: absolute;
+  top: -7px;
+  right: var(--calendar-space-xs, var(--control-gap));
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  color: var(--text-auxiliary);
+}
+.tgCols {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  height: calc(var(--hour-h) * 24); /* the columns area — grid-level pointer target for cross-day drag */
+  touch-action: pan-y; /* allow vertical scroll; long-press starts a move, a scroll cancels the press */
+}
+.tgCol {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  position: relative;
+  border-left: 1px solid var(--box-border);
+  cursor: pointer;
+}
+.tgSlot {
+  height: var(--hour-h);
+  border-top: 1px solid color-mix(in srgb, var(--box-border) 60%, transparent);
+}
+.tgNow {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--calendar-danger, var(--color-error));
+  z-index: 3;
+  pointer-events: none;
+}
+.tgSel {
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  background: color-mix(in srgb, var(--control-accent) 22%, transparent);
+  border: 1px dashed var(--control-accent);
+  border-radius: var(--list-item-radius);
+  z-index: 2;
+  pointer-events: none;
+}
+.tgEvent {
+  position: absolute;
+  z-index: 2;
+  overflow: hidden;
+  border: none;
+  border-radius: var(--list-item-radius);
+  box-shadow: inset 3px 0 0 var(--a, var(--c));
+  padding: 3px var(--calendar-space-xs, var(--control-gap));
+  text-align: left;
+  cursor: grab;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+/* organizer attention marker — a small dot on the card (warn = amber, danger = red) */
+.alertDot,
+.tgAlert {
+  flex-shrink: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-full);
+  background: var(--calendar-warning, var(--notification-accent));
+}
+.alertDot {
+  display: inline-block;
+  margin-left: var(--calendar-space-2xs, var(--popover-gap));
+}
+.alertDot[data-tone='danger'],
+.tgAlert[data-tone='danger'] {
+  background: var(--calendar-danger, var(--color-error));
+}
+.tgAlert {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-panel) 70%, transparent);
+}
+.tgEvent[data-continues] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: 2px dashed color-mix(in srgb, var(--c) 60%, transparent); /* runs into the next day */
+}
+.tgEvent[data-dragging] {
+  cursor: grabbing;
+  opacity: 0.92;
+  box-shadow: var(--box-shadow), inset 3px 0 0 var(--a, var(--c));
+  z-index: 4;
+}
+/* resize grips — top edge changes the start, bottom edge changes the end */
+.tgResize,
+.tgResizeTop {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 8px;
+  cursor: ns-resize;
+}
+.tgResize {
+  bottom: 0;
+  border-bottom-left-radius: var(--list-item-radius);
+  border-bottom-right-radius: var(--list-item-radius);
+}
+.tgResizeTop {
+  top: 0;
+  border-top-left-radius: var(--list-item-radius);
+  border-top-right-radius: var(--list-item-radius);
+}
+.tgEvent:hover .tgResize,
+.tgEvent:hover .tgResizeTop {
+  background: color-mix(in srgb, var(--c) 45%, transparent);
+}
+/* ghost left where the event was, during a move + while awaiting confirmation */
+.tgGhost {
+  position: absolute;
+  z-index: 1;
+  border: 1px dashed var(--c);
+  border-radius: var(--list-item-radius);
+  background: color-mix(in srgb, var(--c) 8%, transparent);
+  opacity: 0.7;
+  pointer-events: none;
+}
+/* confirm/cancel — a centered floating toast (not crammed into the column) until the move is committed */
+.tgConfirm {
+  position: fixed;
+  left: 50%;
+  bottom: 28px;
+  transform: translateX(-50%);
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  gap: var(--calendar-space-sm, var(--list-item-gap));
+  padding: var(--calendar-space-sm, var(--list-item-gap)) var(--calendar-space-md, var(--box-gap));
+  border-radius: var(--radius-full);
+  background: var(--calendar-popover-bg, var(--popover-bg));
+  border: 1px solid var(--control-accent);
+  box-shadow: var(--box-shadow);
+  white-space: nowrap;
+}
+.tgConfirmText {
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-body-text-size, var(--typography-font-size));
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+.tgConfirmYes,
+.tgConfirmNo {
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  border-radius: var(--radius-full);
+  padding: var(--calendar-space-2xs, var(--popover-gap)) var(--calendar-space-md, var(--box-gap));
+  cursor: pointer;
+  border: 1px solid var(--box-border);
+}
+.tgConfirmYes {
+  background: var(--control-accent);
+  color: var(--control-text-contrast);
+  border-color: transparent;
+}
+.tgConfirmNo {
+  background: transparent;
+  color: var(--calendar-muted-text, var(--typography-auxiliary-color));
+}
+.tgEvTime {
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  color: var(--calendar-muted-text, var(--typography-auxiliary-color));
+}
+.tgEvTitle {
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── quick-action popover (single click) ── */
+.popBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+}
+.pop {
+  position: fixed;
+  z-index: 71;
+  background: var(--calendar-popover-bg, var(--popover-bg));
+  border: 1px solid var(--box-border);
+  border-radius: var(--radius-box);
+  box-shadow: var(--box-shadow);
+  padding: var(--calendar-space-md, var(--box-gap));
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-space-sm, var(--list-item-gap));
+}
+.popHead {
+  display: flex;
+  align-items: center;
+  gap: var(--calendar-space-sm, var(--list-item-gap));
+}
+.popDot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+.popTitle {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--heading-font-family);
+  font-size: var(--calendar-body-text-size, var(--typography-font-size));
+  color: var(--text-primary);
+}
+.popClose {
+  flex-shrink: 0;
+}
+.popMeta {
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  color: var(--calendar-muted-text, var(--typography-auxiliary-color));
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.popExtra {
+  padding-top: var(--calendar-space-2xs, var(--popover-gap));
+  margin-top: var(--calendar-space-2xs, var(--popover-gap));
+  border-top: 1px solid var(--box-border);
+}
+.popTimeRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--calendar-space-xs, var(--control-gap));
+}
+.popEditBtn {
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  text-transform: uppercase;
+  color: var(--control-accent);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.popEdit {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-space-2xs, var(--popover-gap));
+}
+.popField {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--calendar-space-xs, var(--control-gap));
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  color: var(--text-auxiliary);
+}
+.popInput {
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  color: var(--text-primary);
+  background: var(--bg-panel);
+  border: 1px solid var(--box-border);
+  border-radius: var(--field-radius);
+  padding: var(--calendar-space-2xs, var(--popover-gap)) var(--calendar-space-2xs, var(--popover-gap));
+}
+.popEditRow {
+  display: flex;
+  gap: var(--calendar-space-xs, var(--control-gap));
+  margin-top: var(--calendar-space-2xs, var(--popover-gap));
+}
+.popSave,
+.popEditCancel {
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  line-height: 1.2;
+  border-radius: var(--radius-full);
+  padding: var(--calendar-space-xs, var(--control-gap)) var(--calendar-space-md, var(--box-gap));
+  cursor: pointer;
+}
+.popSave {
+  color: var(--control-text-contrast);
+  background: var(--control-accent);
+  border: none;
+}
+.popEditCancel {
+  color: var(--calendar-muted-text, var(--typography-auxiliary-color));
+  background: var(--bg-panel);
+  border: 1px solid var(--box-border);
+}
+.popCross {
+  color: var(--calendar-info, var(--link-color));
+}
+.popLoc {
+  color: var(--text-auxiliary);
+}
+.popActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--calendar-space-2xs, var(--popover-gap));
+}
+.popAction {
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  color: var(--text-primary);
+  text-decoration: none;
+  background: var(--bg-panel);
+  border: 1px solid var(--box-border);
+  border-radius: var(--radius-full);
+  padding: var(--calendar-space-2xs, var(--popover-gap)) var(--calendar-space-sm, var(--list-item-gap));
+  cursor: pointer;
+}
+.popAction:hover {
+  background: var(--bg-hover);
+}
+.popExpand {
+  font-family: var(--calendar-control-font, var(--button-font-family));
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  color: var(--control-text-contrast);
+  background: var(--control-accent);
+  border: none;
+  border-radius: var(--radius-full);
+  padding: var(--calendar-space-2xs, var(--popover-gap)) var(--calendar-space-sm, var(--list-item-gap));
+  cursor: pointer;
+  align-self: flex-start;
+}
+
+/* ── Month view (spanning bars) — multi-day events span their days, single-day events occupy one column.
+   Each week is a 7-col grid of cells with an absolutely-positioned bar overlay above. ── */
+.month {
+  --m-date-h: 22px;
+  --m-bar-h: 18px;
+  border: 1px solid var(--box-border);
+  border-radius: var(--radius-box);
+  overflow: hidden;
+}
+.dowRow {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  border-bottom: 1px solid var(--box-border);
+}
+.mWeek {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  /* room for the date row + the lane cap of bars */
+  min-height: calc(var(--m-date-h) + 4 * (var(--m-bar-h) + 2px) + var(--calendar-space-sm, var(--list-item-gap)));
+  border-bottom: 1px solid var(--box-border);
+}
+.mWeek:last-child {
+  border-bottom: none;
+}
+.mCell {
+  --button-primary-bg: var(--calendar-day-surface-bg, var(--box-bg));
+  --button-primary-bg-hover: var(--calendar-day-surface-bg-hover, var(--bg-hover));
+  --button-primary-color: var(--text-primary);
+  --button-primary-color-hover: var(--text-primary);
+  position: relative;
+  min-width: 0;
+  border-right: 1px solid var(--box-border);
+  padding: var(--calendar-space-2xs, var(--popover-gap));
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+}
+.mCell:last-child {
+  border-right: none;
+}
+.mCell[data-out] {
+  --button-primary-bg: var(--calendar-surface-bg, var(--surface-bg));
+}
+.mCell[data-out] .mDate {
+  color: var(--text-auxiliary);
+}
+.mDate {
+  align-self: flex-end;
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  color: var(--calendar-muted-text, var(--typography-auxiliary-color));
+  padding: 0 2px;
+  height: calc(var(--m-date-h) - 4px);
+}
+.mCell[data-today] .mDate {
+  background: var(--control-accent);
+  color: var(--control-text-contrast);
+  border-radius: var(--radius-full);
+  min-width: 20px;
+  text-align: center;
+}
+.mMore {
+  margin-top: auto;
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  color: var(--text-auxiliary);
+  padding: 0 2px;
+}
+/* bar overlay — sits above the cells; empty space lets clicks fall through to open the day */
+.mBars {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.mBar {
+  position: absolute;
+  height: var(--m-bar-h);
+  display: flex;
+  align-items: center;
+  gap: var(--calendar-space-2xs, var(--popover-gap));
+  padding: 0 var(--calendar-space-xs, var(--control-gap));
+  border: none;
+  border-radius: var(--list-item-radius);
+  cursor: pointer;
+  pointer-events: auto;
+  text-align: left;
+  overflow: hidden;
+}
+.mBar[data-multi] {
+  --button-primary-bg: var(
+    --calendar-event-multiday-surface-bg,
+    color-mix(in srgb, var(--c, var(--control-accent)) 18%, var(--box-bg))
+  );
+}
+.mBar:hover,
+.mBar:focus-visible {
+  outline: none;
+}
+.mDot {
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full);
+  background: var(--a, var(--c));
+}
+.mBarText {
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Resource view — host-projected people, rooms, equipment, or roles. Resource identity remains opaque to
+   the engine; one event may appear in several columns without duplicating its canonical graph resource. */
+.resourceGrid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(220px, 1fr);
+  gap: var(--calendar-space-sm, var(--list-item-gap));
+  overflow-x: auto;
+  padding-bottom: var(--calendar-space-xs, var(--control-gap));
+  scrollbar-gutter: stable;
+}
+.resourceColumn {
+  min-width: 0;
+  min-height: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-space-xs, var(--control-gap));
+  padding: var(--calendar-space-sm, var(--list-item-gap));
+  border: 1px solid var(--box-border);
+  border-top: 3px solid var(--resource-color);
+  border-radius: var(--box-radius);
+  background: var(--calendar-surface-bg, var(--surface-bg));
+}
+.resourceHeading {
+  margin: 0;
+  font-family: var(--heading-font-family);
+  font-size: var(--calendar-body-text-size, var(--typography-font-size));
+  color: var(--heading-color);
+}
+.resourceEvents {
+  display: flex;
+  flex-direction: column;
+  gap: var(--calendar-space-xs, var(--control-gap));
+}
+.resourceEvent {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  gap: var(--calendar-space-xs, var(--control-gap));
+  padding: var(--calendar-space-xs, var(--control-gap));
+  text-align: left;
+  border: 1px solid var(--box-border);
+  border-radius: var(--list-item-radius);
+  color: var(--text-primary);
+}
+.resourceEventAccent {
+  width: 3px;
+  flex: 0 0 3px;
+  border-radius: var(--radius-full);
+  background: var(--a, var(--resource-color));
+}
+.resourceEventBody {
+  min-width: 0;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--calendar-space-2xs, var(--popover-gap));
+}
+.resourceEventTime,
+.resourceEventLocation,
+.resourceColumnEmpty {
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-compact-text-size, var(--typography-small-size));
+  color: var(--calendar-muted-text, var(--typography-auxiliary-color));
+}
+.resourceEventTitle {
+  overflow: hidden;
+  font-family: var(--typography-font-family);
+  font-size: var(--calendar-small-text-size, var(--typography-small-size));
+  color: var(--text-primary);
+  text-overflow: ellipsis;
+}
+.resourceColumnEmpty {
+  padding: var(--calendar-space-sm, var(--list-item-gap));
+  text-align: center;
+}
+
+/* phones: the floating NavBar pill owns the bottom band — lift the reschedule confirm above it */
+@media (max-width: 767px) {
+  .resourceGrid {
+    grid-auto-flow: row;
+    grid-auto-columns: unset;
+    grid-template-columns: minmax(0, 1fr);
+    overflow-x: visible;
+  }
+  .tgConfirm {
+    bottom: calc(var(--calendar-space-md, var(--box-gap)) + env(safe-area-inset-bottom, 0px) + var(--calendar-mobile-navigation-clearance, 0px));
+  }
+}