@manzanohq/calendar-lite 0.1.1

package/dist/calendar.styles.js

@@ -0,0 +1,923 @@
+import { css } from "lit";
+import componentStyles from "@manzanohq/components/dist/styles/component.styles.js";
+var calendar_styles_default = [
+  componentStyles,
+  css`
+    /* ------------------------------------------------------------------ */
+    /* Host & public/private custom property pattern                      */
+    /* ------------------------------------------------------------------ */
+    :host {
+      --_calendar-bg: var(--mz-calendar-bg, var(--mz-color-surface));
+      --_calendar-border: var(--mz-calendar-border-color, var(--mz-color-border));
+      --_calendar-event-bg: var(--mz-calendar-event-bg, var(--mz-color-primary));
+      --_calendar-event-color: var(--mz-calendar-event-color, var(--mz-color-on-primary));
+      --_calendar-slot-height: var(--mz-calendar-slot-height, 3.5rem);
+      --_calendar-today-bg: var(--mz-calendar-today-bg, color-mix(in srgb, var(--mz-color-primary) 5%, transparent));
+      --_calendar-now-color: var(--mz-calendar-now-indicator-color, var(--mz-color-danger));
+      --_calendar-gutter-width: var(--mz-calendar-gutter-width, 4.5rem);
+      --_calendar-header-bg: var(--mz-calendar-header-bg, var(--mz-color-surface));
+
+      display: block;
+      min-height: var(--mz-calendar-min-height, 400px);
+      font-family: var(--mz-font-sans);
+      background: var(--_calendar-bg);
+      color: var(--mz-color-text);
+      border: var(--mz-border-width-sm) solid var(--_calendar-border);
+      border-radius: var(--mz-radius-lg);
+      overflow: hidden;
+      container-type: inline-size;
+      container-name: calendar;
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Toolbar                                                            */
+    /* ------------------------------------------------------------------ */
+    .calendar__toolbar {
+      display: flex;
+      align-items: center;
+      gap: var(--mz-space-sm);
+      padding: var(--mz-space-sm) var(--mz-space-lg);
+      border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
+      background: var(--_calendar-header-bg);
+      flex-wrap: wrap;
+    }
+
+    .calendar__toolbar-nav {
+      display: flex;
+      align-items: center;
+      gap: var(--mz-space-2xs);
+    }
+
+    .calendar__toolbar-title {
+      flex: 1;
+      font-size: var(--mz-font-size-lg);
+      font-weight: var(--mz-font-weight-semibold);
+      white-space: nowrap;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-left: var(--mz-space-xs);
+    }
+
+    .calendar__toolbar-views {
+      display: flex;
+      background: var(--_calendar-border);
+      border-radius: var(--mz-radius-sm);
+      padding: 1px;
+    }
+
+    .calendar__btn {
+      appearance: none;
+      border: var(--mz-border-width-sm) solid var(--_calendar-border);
+      background: var(--_calendar-bg);
+      color: var(--mz-color-text);
+      font-family: var(--mz-font-sans);
+      font-size: var(--mz-font-size-sm);
+      font-weight: var(--mz-font-weight-medium);
+      padding: var(--mz-space-2xs) var(--mz-space-sm);
+      border-radius: var(--mz-radius-sm);
+      cursor: pointer;
+      user-select: none;
+      white-space: nowrap;
+      line-height: 1.5;
+      transition: background var(--mz-transition-fast) ease,
+                  border-color var(--mz-transition-fast) ease,
+                  color var(--mz-transition-fast) ease;
+    }
+
+    .calendar__btn:hover {
+      background: color-mix(in srgb, var(--mz-color-text) 6%, var(--_calendar-bg));
+    }
+
+    .calendar__btn:focus-visible {
+      outline: var(--mz-focus-ring);
+      outline-offset: var(--mz-focus-ring-offset);
+    }
+
+    /* View toggle buttons — segmented control style */
+    .calendar__toolbar-views .calendar__btn {
+      border: none;
+      border-radius: calc(var(--mz-radius-sm) - 1px);
+      padding: var(--mz-space-2xs) var(--mz-space-sm);
+      font-size: var(--mz-font-size-xs);
+      background: var(--_calendar-bg);
+    }
+
+    .calendar__toolbar-views .calendar__btn:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    .calendar__toolbar-views .calendar__btn:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .calendar__toolbar-views .calendar__btn:hover {
+      background: color-mix(in srgb, var(--mz-color-text) 8%, var(--_calendar-bg));
+    }
+
+    .calendar__btn--active {
+      background: var(--mz-color-primary);
+      color: var(--mz-color-on-primary);
+      border-color: var(--mz-color-primary);
+    }
+
+    .calendar__btn--active:hover {
+      background: var(--mz-color-primary);
+    }
+
+    .calendar__toolbar-views .calendar__btn--active {
+      background: var(--mz-color-primary);
+      color: var(--mz-color-on-primary);
+    }
+
+    .calendar__toolbar-views .calendar__btn--active:hover {
+      background: var(--mz-color-primary);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* aria-live region (visually hidden)                                  */
+    /* ------------------------------------------------------------------ */
+    .calendar__live {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Time grid: scroll container (header + allday + body)               */
+    /* ------------------------------------------------------------------ */
+    .calendar__scroll-container {
+      overflow-y: auto;
+      max-height: var(--mz-calendar-body-height, 800px);
+      position: relative;
+    }
+
+    /* Styled scrollbar — subtle, warm */
+    .calendar__scroll-container::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .calendar__scroll-container::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .calendar__scroll-container::-webkit-scrollbar-thumb {
+      background: color-mix(in srgb, var(--mz-color-text) 18%, transparent);
+      border-radius: 3px;
+    }
+
+    .calendar__scroll-container::-webkit-scrollbar-thumb:hover {
+      background: color-mix(in srgb, var(--mz-color-text) 30%, transparent);
+    }
+
+    :host([no-scroll]) .calendar__scroll-container {
+      overflow-y: visible;
+      max-height: none;
+    }
+
+    .calendar__sticky-header {
+      position: sticky;
+      top: 0;
+      z-index: 3;
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Time grid: header row (day headers)                                */
+    /* ------------------------------------------------------------------ */
+    .calendar__header {
+      display: grid;
+      grid-template-columns: var(--_calendar-gutter-width) repeat(var(--_day-count, 7), minmax(var(--_calendar-min-col-width, 3rem), 1fr));
+      border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
+      background: var(--_calendar-header-bg);
+    }
+
+    .calendar__gutter-header {
+      border-right: var(--mz-border-width-sm) solid var(--_calendar-border);
+    }
+
+    .calendar__day-header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 1px;
+      padding: var(--mz-space-xs) var(--mz-space-xs);
+      font-size: var(--mz-font-size-2xs);
+      font-weight: var(--mz-font-weight-semibold);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: color-mix(in srgb, var(--mz-color-text) 55%, transparent);
+      border-left: var(--mz-border-width-sm) solid var(--_calendar-border);
+    }
+
+    .calendar__day-header--today {
+      color: var(--mz-color-primary);
+    }
+
+    .calendar__day-number {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.75rem;
+      height: 1.75rem;
+      border-radius: 50%;
+      font-size: var(--mz-font-size-md);
+      font-weight: var(--mz-font-weight-semibold);
+      line-height: 1;
+      color: var(--mz-color-text);
+    }
+
+    .calendar__day-number--today {
+      background: var(--mz-color-primary);
+      color: var(--mz-color-on-primary);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Time grid: all-day row                                             */
+    /* ------------------------------------------------------------------ */
+    .calendar__allday {
+      display: grid;
+      grid-template-columns: var(--_calendar-gutter-width) repeat(var(--_day-count, 7), minmax(var(--_calendar-min-col-width, 3rem), 1fr));
+      border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
+      min-height: 2rem;
+      position: relative;
+      background: var(--_calendar-header-bg);
+    }
+
+    .calendar__allday-label {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      font-size: var(--mz-font-size-2xs);
+      color: color-mix(in srgb, var(--mz-color-text) 45%, transparent);
+      padding: var(--mz-space-2xs) var(--mz-space-xs);
+      border-right: var(--mz-border-width-sm) solid var(--_calendar-border);
+    }
+
+    .calendar__allday-cell {
+      position: relative;
+      border-left: var(--mz-border-width-sm) solid var(--_calendar-border);
+      min-height: 1.75rem;
+      padding: var(--mz-space-2xs) var(--mz-space-2xs);
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Time grid: body (time slots)                                       */
+    /* ------------------------------------------------------------------ */
+    .calendar__body {
+      display: grid;
+      grid-template-columns: var(--_calendar-gutter-width) 1fr;
+      position: relative;
+    }
+
+    .calendar__gutter {
+      display: flex;
+      flex-direction: column;
+      border-right: var(--mz-border-width-sm) solid var(--_calendar-border);
+    }
+
+    .calendar__hour-label {
+      height: var(--_calendar-slot-height);
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-end;
+      padding-right: var(--mz-space-sm);
+      font-size: var(--mz-font-size-2xs);
+      font-weight: var(--mz-font-weight-medium);
+      color: color-mix(in srgb, var(--mz-color-text) 45%, transparent);
+      transform: translateY(-0.5em);
+      user-select: none;
+      letter-spacing: 0.01em;
+      white-space: nowrap;
+    }
+
+    /* Full format shown by default, short hidden */
+    .calendar__hour-short {
+      display: none;
+    }
+
+    .calendar__grid {
+      position: relative;
+      display: grid;
+      grid-template-rows: repeat(var(--_slot-count, 48), var(--_calendar-slot-height));
+      grid-template-columns: repeat(var(--_day-count, 7), minmax(var(--_calendar-min-col-width, 3rem), 1fr));
+    }
+
+    /* Horizontal slot lines */
+    .calendar__slot-line {
+      grid-column: 1 / -1;
+      border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
+      pointer-events: none;
+    }
+
+    .calendar__slot-line--hour {
+      border-bottom-style: solid;
+    }
+
+    .calendar__slot-line--half {
+      border-bottom-color: color-mix(in srgb, var(--_calendar-border) 50%, transparent);
+      border-bottom-style: solid;
+    }
+
+    /* Vertical day dividers */
+    .calendar__day-divider {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      border-left: var(--mz-border-width-sm) solid var(--_calendar-border);
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    /* Today column highlight */
+    .calendar__today-col {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      background: var(--_calendar-today-bg);
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Events (time grid)                                                 */
+    /* ------------------------------------------------------------------ */
+    .calendar__event {
+      position: absolute;
+      border-radius: var(--mz-radius-sm);
+      padding: var(--mz-space-2xs) var(--mz-space-xs);
+      font-size: var(--mz-font-size-xs);
+      line-height: 1.35;
+      overflow: hidden;
+      cursor: pointer;
+      user-select: none;
+      z-index: 2;
+      background: var(--_event-bg, var(--_calendar-event-bg));
+      color: var(--_event-color, var(--_calendar-event-color));
+      border-left: 3px solid color-mix(in srgb, var(--_event-bg, var(--_calendar-event-bg)) 70%, #000);
+      transition: box-shadow var(--mz-transition-fast) ease;
+    }
+
+    .calendar__event:hover {
+      box-shadow: var(--mz-shadow-md);
+      z-index: 4;
+    }
+
+    .calendar__event:focus-visible {
+      outline: var(--mz-focus-ring);
+      outline-offset: var(--mz-focus-ring-offset);
+      z-index: 5;
+    }
+
+    .calendar__event-title {
+      font-weight: var(--mz-font-weight-semibold);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .calendar__event-time {
+      font-size: var(--mz-font-size-2xs);
+      opacity: 0.8;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* Resize handle at bottom of event */
+    .calendar__event-resize {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 8px;
+      cursor: s-resize;
+      z-index: 3;
+    }
+
+    .calendar__event-resize::after {
+      content: '';
+      position: absolute;
+      bottom: 2px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 1.5rem;
+      height: 2px;
+      border-radius: 1px;
+      background: currentColor;
+      opacity: 0;
+      transition: opacity var(--mz-transition-fast) ease;
+    }
+
+    .calendar__event:hover .calendar__event-resize::after {
+      opacity: 0.5;
+    }
+
+    /* All-day event in the all-day row */
+    .calendar__allday-event {
+      display: block;
+      border-radius: var(--mz-radius-sm);
+      padding: 2px var(--mz-space-xs);
+      font-size: var(--mz-font-size-xs);
+      font-weight: var(--mz-font-weight-semibold);
+      line-height: 1.5;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      user-select: none;
+      background: var(--_event-bg, var(--_calendar-event-bg));
+      color: var(--_event-color, var(--_calendar-event-color));
+    }
+
+    .calendar__allday-event:hover {
+      box-shadow: var(--mz-shadow-sm);
+    }
+
+    .calendar__allday-event:focus-visible {
+      outline: var(--mz-focus-ring);
+      outline-offset: var(--mz-focus-ring-offset);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Now indicator                                                      */
+    /* ------------------------------------------------------------------ */
+    .calendar__now-indicator {
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: var(--_calendar-now-color);
+      z-index: 6;
+      pointer-events: none;
+    }
+
+    .calendar__now-indicator::before {
+      content: '';
+      position: absolute;
+      left: -4px;
+      top: -3px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--_calendar-now-color);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Drag selection highlight                                           */
+    /* ------------------------------------------------------------------ */
+    .calendar__drag-selection {
+      position: absolute;
+      background: color-mix(in srgb, var(--mz-color-primary) 15%, transparent);
+      border: 2px solid color-mix(in srgb, var(--mz-color-primary) 60%, transparent);
+      border-radius: var(--mz-radius-sm);
+      z-index: 3;
+      pointer-events: none;
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Month grid                                                         */
+    /* ------------------------------------------------------------------ */
+    .calendar__month-grid {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+      flex: 1;
+    }
+
+    .calendar__month-weekday {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--mz-space-sm) var(--mz-space-xs);
+      font-size: var(--mz-font-size-2xs);
+      font-weight: var(--mz-font-weight-semibold);
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: color-mix(in srgb, var(--mz-color-text) 50%, transparent);
+      border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
+      min-width: 0;
+    }
+
+    .calendar__month-cell {
+      min-height: 5.5rem;
+      padding: var(--mz-space-2xs) var(--mz-space-xs);
+      border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
+      border-right: var(--mz-border-width-sm) solid var(--_calendar-border);
+      position: relative;
+      overflow: hidden;
+      min-width: 0;
+    }
+
+    .calendar__month-cell:nth-child(7n) {
+      border-right: none;
+    }
+
+    .calendar__month-cell--outside {
+      background: color-mix(in srgb, var(--mz-color-text) 2%, var(--_calendar-bg));
+    }
+
+    .calendar__month-cell--today {
+      background: var(--_calendar-today-bg);
+    }
+
+    .calendar__month-date {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.5rem;
+      height: 1.5rem;
+      font-size: var(--mz-font-size-xs);
+      font-weight: var(--mz-font-weight-medium);
+      margin-bottom: var(--mz-space-2xs);
+    }
+
+    .calendar__month-date--today {
+      background: var(--mz-color-primary);
+      color: var(--mz-color-on-primary);
+      border-radius: 50%;
+      font-weight: var(--mz-font-weight-semibold);
+    }
+
+    .calendar__month-date--outside {
+      opacity: 0.35;
+    }
+
+    .calendar__month-event {
+      display: block;
+      border-radius: var(--mz-radius-sm);
+      padding: 2px var(--mz-space-xs);
+      font-size: var(--mz-font-size-xs);
+      font-weight: var(--mz-font-weight-medium);
+      line-height: 1.4;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      user-select: none;
+      background: var(--_event-bg, var(--_calendar-event-bg));
+      color: var(--_event-color, var(--_calendar-event-color));
+      margin-bottom: 2px;
+    }
+
+    .calendar__month-event:hover {
+      box-shadow: var(--mz-shadow-sm);
+    }
+
+    .calendar__month-event:focus-visible {
+      outline: var(--mz-focus-ring);
+      outline-offset: var(--mz-focus-ring-offset);
+    }
+
+    .calendar__month-overflow {
+      font-size: var(--mz-font-size-xs);
+      color: color-mix(in srgb, var(--mz-color-text) 50%, transparent);
+      padding: 2px var(--mz-space-xs);
+      cursor: pointer;
+      user-select: none;
+      font-weight: var(--mz-font-weight-medium);
+    }
+
+    .calendar__month-overflow:hover {
+      color: var(--mz-color-primary);
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* List view                                                          */
+    /* ------------------------------------------------------------------ */
+    .calendar__list {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .calendar__list-day {
+      border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
+    }
+
+    .calendar__list-day-header {
+      display: flex;
+      gap: var(--mz-space-sm);
+      padding: var(--mz-space-sm) var(--mz-space-lg);
+      font-size: var(--mz-font-size-sm);
+      font-weight: var(--mz-font-weight-semibold);
+      background: color-mix(in srgb, var(--mz-color-text) 3%, var(--_calendar-bg));
+    }
+
+    .calendar__list-event {
+      display: flex;
+      align-items: center;
+      gap: var(--mz-space-sm);
+      padding: var(--mz-space-sm) var(--mz-space-lg);
+      cursor: pointer;
+      transition: background var(--mz-transition-fast) ease;
+    }
+
+    .calendar__list-event:hover {
+      background: color-mix(in srgb, var(--mz-color-text) 4%, var(--_calendar-bg));
+    }
+
+    .calendar__list-event:focus-visible {
+      outline: var(--mz-focus-ring);
+      outline-offset: var(--mz-focus-ring-offset);
+    }
+
+    .calendar__list-event-dot {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background: var(--_event-bg, var(--_calendar-event-bg));
+      flex-shrink: 0;
+    }
+
+    .calendar__list-event-time {
+      font-size: var(--mz-font-size-xs);
+      color: color-mix(in srgb, var(--mz-color-text) 50%, transparent);
+      min-width: 6rem;
+    }
+
+    .calendar__list-event-title {
+      font-size: var(--mz-font-size-sm);
+      font-weight: var(--mz-font-weight-medium);
+      flex: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Resource headers                                                   */
+    /* ------------------------------------------------------------------ */
+    .calendar__resource-header {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--mz-space-sm) var(--mz-space-sm);
+      font-size: var(--mz-font-size-xs);
+      font-weight: var(--mz-font-weight-semibold);
+      border-left: var(--mz-border-width-sm) solid var(--_calendar-border);
+      text-align: center;
+    }
+
+    /* Resource timeline */
+    .calendar__timeline {
+      display: grid;
+      overflow-x: auto;
+    }
+
+    .calendar__timeline-resource-label {
+      display: flex;
+      align-items: center;
+      padding: var(--mz-space-sm) var(--mz-space-md);
+      font-size: var(--mz-font-size-sm);
+      font-weight: var(--mz-font-weight-medium);
+      border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
+      border-right: var(--mz-border-width-sm) solid var(--_calendar-border);
+      min-width: 8rem;
+      background: var(--_calendar-header-bg);
+    }
+
+    .calendar__timeline-row {
+      display: grid;
+      grid-template-columns: repeat(var(--_slot-count, 48), var(--_calendar-slot-height));
+      border-bottom: var(--mz-border-width-sm) solid var(--_calendar-border);
+      position: relative;
+      min-height: 2.5rem;
+    }
+
+    .calendar__timeline-slot {
+      border-right: var(--mz-border-width-sm) solid var(--_calendar-border);
+    }
+
+    .calendar__timeline-slot--hour {
+      border-right-style: solid;
+    }
+
+    .calendar__timeline-slot--half {
+      border-right-color: color-mix(in srgb, var(--_calendar-border) 50%, transparent);
+      border-right-style: solid;
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Empty state                                                        */
+    /* ------------------------------------------------------------------ */
+    .calendar__empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--mz-space-lg);
+      color: color-mix(in srgb, var(--mz-color-text) 40%, transparent);
+      font-size: var(--mz-font-size-sm);
+      font-style: italic;
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Responsive: compact (tablet-ish, ≤768px container)                  */
+    /* ------------------------------------------------------------------ */
+    @container calendar (max-width: 768px) {
+      .calendar__toolbar {
+        padding: var(--mz-space-xs) var(--mz-space-sm);
+        gap: var(--mz-space-xs);
+      }
+
+      .calendar__toolbar-title {
+        font-size: var(--mz-font-size-md);
+        padding-left: var(--mz-space-2xs);
+      }
+
+      .calendar {
+        --_calendar-gutter-width: 3.5rem;
+      }
+
+      .calendar__month-cell {
+        min-height: 4.5rem;
+      }
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Responsive: narrow (mobile, ≤540px container)                       */
+    /* ------------------------------------------------------------------ */
+    @container calendar (max-width: 540px) {
+      .calendar__scroll-container {
+        max-height: var(--mz-calendar-body-height, 500px);
+      }
+
+      .calendar__toolbar {
+        padding: var(--mz-space-xs) var(--mz-space-sm);
+        gap: var(--mz-space-2xs);
+      }
+
+      /* Title on its own row */
+      .calendar__toolbar-title {
+        font-size: var(--mz-font-size-sm);
+        font-weight: var(--mz-font-weight-semibold);
+        padding-left: 0;
+        order: -1;
+        flex-basis: 100%;
+      }
+
+      .calendar__toolbar-nav {
+        gap: 2px;
+      }
+
+      .calendar__toolbar-views .calendar__btn {
+        padding: 3px var(--mz-space-xs);
+        font-size: 0.6875rem;
+      }
+
+      .calendar__btn {
+        padding: var(--mz-space-2xs) var(--mz-space-xs);
+        font-size: var(--mz-font-size-xs);
+        line-height: 1.4;
+      }
+
+      .calendar {
+        --_calendar-gutter-width: 2.75rem;
+        --_calendar-slot-height: var(--mz-calendar-slot-height, 2.75rem);
+      }
+
+      .calendar__hour-label {
+        font-size: 0.625rem;
+        padding-right: var(--mz-space-2xs);
+        letter-spacing: -0.01em;
+      }
+
+      /* Swap to short hour format (e.g. "9 AM" instead of "9:00 AM") */
+      .calendar__hour-full {
+        display: none;
+      }
+
+      .calendar__hour-short {
+        display: inline;
+      }
+
+      .calendar__allday-label {
+        font-size: 0.5625rem;
+        padding: var(--mz-space-2xs) 2px;
+      }
+
+      .calendar__day-header {
+        padding: var(--mz-space-2xs) 0;
+        font-size: 0.5625rem;
+        letter-spacing: 0.02em;
+      }
+
+      .calendar__day-number {
+        width: 1.375rem;
+        height: 1.375rem;
+        font-size: var(--mz-font-size-xs);
+      }
+
+      .calendar__event {
+        padding: 2px var(--mz-space-2xs);
+        font-size: 0.6875rem;
+        line-height: 1.3;
+        border-left-width: 2px;
+      }
+
+      .calendar__event-time {
+        font-size: 0.5625rem;
+      }
+
+      .calendar__allday-event {
+        font-size: 0.6875rem;
+        padding: 1px var(--mz-space-2xs);
+      }
+
+      .calendar__month-cell {
+        min-height: 3.25rem;
+        padding: 2px;
+      }
+
+      .calendar__month-date {
+        width: 1.25rem;
+        height: 1.25rem;
+        font-size: 0.625rem;
+      }
+
+      .calendar__month-event {
+        font-size: 0.625rem;
+        padding: 1px 3px;
+        line-height: 1.35;
+        border-radius: 2px;
+      }
+
+      .calendar__month-overflow {
+        font-size: 0.625rem;
+        padding: 1px 3px;
+      }
+
+      .calendar__month-weekday {
+        padding: var(--mz-space-2xs) 0;
+        font-size: 0.5625rem;
+      }
+
+      /* List view — tighter on mobile */
+      .calendar__list-event {
+        padding: var(--mz-space-xs) var(--mz-space-sm);
+        gap: var(--mz-space-xs);
+      }
+
+      .calendar__list-event-time {
+        font-size: 0.6875rem;
+        min-width: 4.5rem;
+      }
+
+      .calendar__list-event-title {
+        font-size: var(--mz-font-size-xs);
+      }
+
+      .calendar__list-day-header {
+        padding: var(--mz-space-xs) var(--mz-space-sm);
+        font-size: var(--mz-font-size-xs);
+      }
+
+      /* Resource headers tighter */
+      .calendar__resource-header {
+        padding: var(--mz-space-xs) var(--mz-space-2xs);
+        font-size: 0.625rem;
+      }
+    }
+
+    /* ------------------------------------------------------------------ */
+    /* Touch: larger hit targets                                           */
+    /* ------------------------------------------------------------------ */
+    @media (pointer: coarse) {
+      .calendar__btn {
+        min-height: 2.25rem;
+        min-width: 2.25rem;
+      }
+
+      .calendar__event-resize {
+        height: 12px;
+      }
+
+      .calendar__month-event {
+        min-height: 1.375rem;
+        line-height: 1.375rem;
+      }
+
+      .calendar__allday-event {
+        min-height: 1.375rem;
+        line-height: 1.375rem;
+      }
+
+      .calendar__list-event {
+        min-height: 2.5rem;
+      }
+    }
+  `
+];
+export {
+  calendar_styles_default as default
+};
+//# sourceMappingURL=calendar.styles.js.map