/**
 * Doran design system — theme tokens.
 * Import once at your app root: `import '@doranjs/ui/styles.css'`.
 */

:root,
[data-doran-theme='light'] {
  --doran-bg: #ffffff;
  --doran-surface: #ffffff;
  --doran-surface-muted: #f6f7f9;
  --doran-surface-raised: #ffffff;
  --doran-border: #e6e8eb;
  --doran-border-strong: #d3d7dc;
  --doran-text: #1a1d21;
  --doran-text-muted: #6b7280;
  --doran-text-subtle: #9aa1ac;
  --doran-primary: #4f46e5;
  --doran-primary-hover: #4338ca;
  --doran-primary-soft: rgba(79, 70, 229, 0.12);
  --doran-primary-contrast: #ffffff;
  --doran-accent: #0ea5e9;
  --doran-accent-soft: rgba(14, 165, 233, 0.14);
  --doran-danger: #dc2626;
  --doran-success: #16a34a;
  --doran-warning: #d97706;
  --doran-holiday: #dc2626;
  --doran-holiday-soft: rgba(220, 38, 38, 0.1);
  --doran-focus-ring: rgba(79, 70, 229, 0.4);

  --doran-radius-sm: 6px;
  --doran-radius-md: 10px;
  --doran-radius-lg: 16px;
  --doran-radius-full: 9999px;

  --doran-border-width: 1px;

  --doran-space-xs: 4px;
  --doran-space-sm: 8px;
  --doran-space-md: 12px;
  --doran-space-lg: 20px;

  --doran-font-sans: 'Vazirmatn', 'IRANSans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --doran-font-weight-normal: 400;
  --doran-font-weight-medium: 500;
  --doran-font-weight-semibold: 600;
  --doran-font-weight-bold: 700;

  --doran-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --doran-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --doran-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);

  --doran-transition: 0.15s ease;
}

[data-doran-theme='dark'] {
  --doran-bg: #0c0d10;
  --doran-surface: #16181d;
  --doran-surface-muted: #1f232a;
  --doran-surface-raised: #1c1f26;
  --doran-border: #2a2f37;
  --doran-border-strong: #3a414b;
  --doran-text: #f2f4f7;
  --doran-text-muted: #9aa3af;
  --doran-text-subtle: #6b7280;
  --doran-primary: #6366f1;
  --doran-primary-hover: #818cf8;
  --doran-primary-soft: rgba(129, 140, 248, 0.18);
  --doran-primary-contrast: #0c0d10;
  --doran-accent: #38bdf8;
  --doran-accent-soft: rgba(56, 189, 248, 0.18);
  --doran-danger: #f87171;
  --doran-success: #4ade80;
  --doran-warning: #fbbf24;
  --doran-holiday: #f87171;
  --doran-holiday-soft: rgba(248, 113, 113, 0.16);
  --doran-focus-ring: rgba(129, 140, 248, 0.45);

  --doran-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --doran-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --doran-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.doran-root {
  font-family: var(--doran-font-sans);
  color: var(--doran-text);
  background: var(--doran-bg);
}

.doran-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--doran-space-sm);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  padding: 0 var(--doran-space-md);
  height: 36px;
  border-radius: var(--doran-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  user-select: none;
}

.doran-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--doran-focus-ring);
}

.doran-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.doran-btn--primary {
  background: var(--doran-primary);
  color: var(--doran-primary-contrast);
}

.doran-btn--primary:not(:disabled):hover {
  background: var(--doran-primary-hover);
}

.doran-btn--ghost {
  background: transparent;
  color: var(--doran-text);
}

.doran-btn--ghost:not(:disabled):hover {
  background: var(--doran-surface-muted);
}

.doran-btn--outline {
  background: transparent;
  color: var(--doran-text);
  border-color: var(--doran-border);
}

.doran-btn--outline:not(:disabled):hover {
  background: var(--doran-surface-muted);
}

.doran-btn--icon {
  width: 36px;
  padding: 0;
}
/**
 * Doran React component styles. Requires the design tokens from `@doranjs/ui/styles.css`.
 * Import both once at your app root:
 *
 *   import '@doranjs/ui/styles.css';
 *   import '@doranjs/react/styles.css';
 *
 * Every component reads its own set of CSS custom properties that fall back to the
 * global design tokens. Override them globally, per-theme, or on a single instance
 * (via `style={{ '--doran-day-selected-bg': '#e11d48' }}`) to restyle any part —
 * colors, fonts, shadows, borders, and radii — without forking the components.
 */

/* ===========================================================================
 * Calendar
 * ======================================================================== */

.doran-calendar {
  /* Customizable surface */
  --_cal-bg: var(--doran-calendar-bg, var(--doran-surface));
  --_cal-border-color: var(--doran-calendar-border-color, var(--doran-border));
  --_cal-border-width: var(--doran-calendar-border-width, var(--doran-border-width, 1px));
  --_cal-radius: var(--doran-calendar-radius, var(--doran-radius-lg));
  --_cal-shadow: var(--doran-calendar-shadow, var(--doran-shadow-md));
  --_cal-padding: var(--doran-calendar-padding, var(--doran-space-md));
  --_cal-font: var(--doran-calendar-font, var(--doran-font-sans));
  --_cal-width: var(--doran-calendar-width, 17.5rem);

  display: inline-flex;
  flex-direction: column;
  gap: var(--doran-space-sm);
  padding: var(--_cal-padding);
  background: var(--_cal-bg);
  border: var(--_cal-border-width) solid var(--_cal-border-color);
  border-radius: var(--_cal-radius);
  box-shadow: var(--_cal-shadow);
  font-family: var(--_cal-font);
  color: var(--doran-text);
  width: var(--_cal-width);
  box-sizing: border-box;
}

.doran-calendar *,
.doran-calendar *::before,
.doran-calendar *::after {
  box-sizing: border-box;
}

.doran-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--doran-space-xs);
  min-height: 2.25rem;
}

.doran-calendar__heading {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--doran-space-xs);
  font-weight: var(--doran-calendar-heading-weight, var(--doran-font-weight-semibold, 600));
  font-size: var(--doran-calendar-heading-size, 0.95rem);
  color: var(--doran-calendar-heading-color, var(--doran-text));
}

/* Navigation arrows */
.doran-calendar__nav {
  --_nav-color: var(--doran-calendar-arrow-color, var(--doran-text-muted));
  --_nav-hover-bg: var(--doran-calendar-arrow-hover-bg, var(--doran-surface-muted));
  --_nav-hover-color: var(--doran-calendar-arrow-hover-color, var(--doran-text));
  --_nav-size: var(--doran-calendar-arrow-size, 2rem);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--_nav-size);
  height: var(--_nav-size);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--_nav-color);
  border-radius: var(--doran-radius-md);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--doran-transition, 0.15s ease),
    color var(--doran-transition, 0.15s ease);
}

.doran-calendar__nav:not(:disabled):hover {
  background: var(--_nav-hover-bg);
  color: var(--_nav-hover-color);
}

.doran-calendar__nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--doran-focus-ring);
}

.doran-calendar__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.doran-calendar__nav svg {
  width: 1.1em;
  height: 1.1em;
  display: block;
}

.doran-calendar__footer {
  display: flex;
  justify-content: center;
  gap: var(--doran-space-sm);
  padding-top: var(--doran-space-xs);
}

/* A fixed-width column cannot also hold a sidebar: without this the aside squeezes
   the month grid instead of widening the calendar. Mirrors what the range picker
   already does for its presets. */
.doran-calendar:has(.doran-calendar__body) {
  width: auto;
}

/* --- Slot regions -------------------------------------------------------
   Filled through the `slots` prop. Each region is intentionally unstyled beyond
   placement and spacing: whatever you drop in should look like your app, not
   like Doran. `__body` only exists when an `aside` is present. */

.doran-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--doran-space-sm);
  padding: var(--doran-calendar-legend-padding, var(--doran-space-xs) 0);
  border-bottom: 1px solid var(--doran-calendar-border-color, var(--doran-border));
  font-size: var(--doran-calendar-legend-font-size, 0.7rem);
  color: var(--doran-calendar-legend-color, var(--doran-text-muted));
}

.doran-calendar__body {
  display: flex;
  gap: var(--doran-calendar-gap, 0.75rem);
  align-items: flex-start;
}

.doran-calendar__aside {
  display: flex;
  flex-direction: column;
  gap: var(--doran-calendar-aside-gap, 0.35rem);
  flex-shrink: 0;
  /* Reads as a sidebar rather than as content that wandered into the grid. */
  padding-inline-end: var(--doran-calendar-aside-gap, 0.75rem);
  border-inline-end: 1px solid var(--doran-calendar-border-color, var(--doran-border));
}

.doran-calendar__main {
  /* The grid keeps the calendar's intended width; the aside adds to it. */
  width: var(--doran-calendar-width, 17.5rem);
  min-width: 0;
}

.doran-calendar__footer-slot {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--doran-space-sm);
  min-width: 0;
  font-size: 0.78rem;
  color: var(--doran-text-muted);
}

/* The footer is a row of actions plus, sometimes, a summary that should not push
   them off the edge. */
.doran-calendar__footer:has(.doran-calendar__footer-slot) {
  justify-content: space-between;
}

/* --- Header pickers (month / year / time) ------------------------------- */

.doran-calendar__heading-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  border-radius: var(--doran-radius-md);
  cursor: pointer;
  transition: background var(--doran-transition, 0.15s ease);
}

.doran-calendar__heading-btn:not(:disabled):hover {
  background: var(--doran-surface-muted);
}

.doran-calendar__heading-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--doran-focus-ring);
}

.doran-calendar__heading-btn svg {
  width: 0.85em;
  height: 0.85em;
  opacity: 0.6;
}

.doran-picker-panel {
  border-top: 1px solid var(--doran-border);
  margin-top: var(--doran-space-xs);
  padding-top: var(--doran-space-sm);
}

.doran-picker-panel__grid {
  display: grid;
  gap: var(--doran-space-xs);
}

.doran-picker-panel__grid--months {
  grid-template-columns: repeat(3, 1fr);
}

.doran-picker-panel__grid--years {
  grid-template-columns: repeat(4, 1fr);
  max-height: 12.5rem;
  overflow-y: auto;
}

.doran-picker-option {
  padding: 0.4rem 0.25rem;
  border: none;
  background: transparent;
  color: var(--doran-text);
  font: inherit;
  font-size: 0.82rem;
  border-radius: var(--doran-radius-md);
  cursor: pointer;
  transition:
    background var(--doran-transition, 0.15s ease),
    color var(--doran-transition, 0.15s ease);
}

.doran-picker-option:not(:disabled):hover {
  background: var(--doran-surface-muted);
}

.doran-picker-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--doran-focus-ring);
}

.doran-picker-option--active {
  background: var(--doran-primary);
  color: var(--doran-primary-contrast);
}

.doran-picker-option--active:not(:disabled):hover {
  background: var(--doran-primary-hover);
}

.doran-picker-option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Time picker -------------------------------------------------------- */

.doran-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--doran-space-xs);
  padding-top: var(--doran-space-sm);
  border-top: 1px solid var(--doran-time-border-color, var(--doran-border));
  margin-top: var(--doran-space-xs);
}

.doran-time__field {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.doran-time__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--doran-time-btn-width, 1.75rem);
  /* 24px is the floor WCAG 2.5.8 sets for a pointer target; this was 20. */
  height: var(--doran-time-btn-height, 1.5rem);
  border: none;
  background: transparent;
  color: var(--doran-time-btn-color, var(--doran-text-muted));
  border-radius: var(--doran-time-btn-radius, var(--doran-radius-sm));
  cursor: pointer;
}

.doran-time__btn:hover {
  background: var(--doran-time-btn-hover-bg, var(--doran-surface-muted));
  color: var(--doran-time-btn-hover-color, var(--doran-text));
}

.doran-time__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--doran-focus-ring);
}

.doran-time__btn svg {
  width: var(--doran-time-btn-icon-size, 0.8em);
  height: var(--doran-time-btn-icon-size, 0.8em);
}

.doran-time__value {
  /* A real input now, so it needs its chrome stripped back to the bare number.
     `ch` tracks the font, so the field scales with whatever face you set; 2.4 leaves
     enough room for two Persian digits, which are wider than the "0" ch measures. */
  width: var(--doran-time-field-width, 2.4ch);
  border: none;
  background: transparent;
  /* No horizontal padding: the calendar sets `box-sizing: border-box`, so side
     padding would come out of the 2.4ch rather than sitting outside it. */
  padding: 0.1rem 0;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: var(--doran-time-font-size, 1.1rem);
  font-weight: var(--doran-time-font-weight, var(--doran-font-weight-semibold, 600));
  color: var(--doran-time-color, var(--doran-text));
  text-align: center;
  box-sizing: border-box;
}

/* The value is a spinbutton, so it is a tab stop and needs a visible focus ring. */
.doran-time__value:focus-visible,
.doran-time__value:focus {
  outline: none;
  border-radius: var(--doran-radius-sm);
  box-shadow: 0 0 0 3px var(--doran-focus-ring);
}

.doran-time__value::selection {
  background: var(--doran-primary-soft);
}

.doran-time__meridiem {
  margin-inline-start: var(--doran-space-xs);
  padding: var(--doran-time-meridiem-padding, 0.2rem 0.45rem);
  border: 1px solid var(--doran-time-meridiem-border-color, var(--doran-border));
  border-radius: var(--doran-time-meridiem-radius, var(--doran-radius-sm));
  background: transparent;
  color: var(--doran-time-color, var(--doran-text));
  font: inherit;
  font-size: var(--doran-time-meridiem-font-size, 0.78rem);
  cursor: pointer;
}

.doran-time__meridiem:hover {
  background: var(--doran-time-btn-hover-bg, var(--doran-surface-muted));
}

.doran-time__meridiem:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--doran-focus-ring);
}

.doran-time__sep {
  font-size: var(--doran-time-font-size, 1.1rem);
  font-weight: var(--doran-time-font-weight, var(--doran-font-weight-semibold, 600));
  color: var(--doran-time-color, var(--doran-text));
  padding: 0 0.1rem;
}

/* ===========================================================================
 * Month grid
 * ======================================================================== */

.doran-month {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Announces the focused day during keyboard navigation, including when arrowing
   past a month edge re-renders the grid. Visually hidden, never display:none —
   that would take it out of the accessibility tree entirely. */
.doran-month__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.doran-month__weekdays,
.doran-month__week {
  display: grid;
  /* minmax(0, …) rather than a bare 1fr: `1fr` floors at min-content, so one long
     day annotation would widen its column and knock the whole grid out of true. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.doran-month__weekday {
  text-align: center;
  font-size: 0.72rem;
  font-weight: var(--doran-font-weight-semibold, 600);
  color: var(--doran-calendar-weekday-color, var(--doran-text-muted));
  padding: var(--doran-space-xs) 0;
}

.doran-month__weekday--weekend {
  color: var(--doran-calendar-weekend-color, var(--doran-holiday));
}

.doran-month__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  position: relative;
  min-width: 0;
}

.doran-month__spacer {
  display: block;
  width: 100%;
  height: 100%;
}

.doran-day {
  --_day-size: var(--doran-day-size, 2.125rem);
  --_day-radius: var(--doran-day-radius, var(--doran-radius-full));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--_day-size);
  height: var(--_day-size);
  border: none;
  background: transparent;
  border-radius: var(--_day-radius);
  color: var(--doran-day-color, var(--doran-text));
  font-family: inherit;
  font-size: var(--doran-day-font-size, 0.85rem);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  position: relative;
  transition:
    background var(--doran-transition, 0.12s ease),
    color var(--doran-transition, 0.12s ease),
    box-shadow var(--doran-transition, 0.12s ease);
}

.doran-day:not([aria-disabled='true']):hover {
  background: var(--doran-day-hover-bg, var(--doran-surface-muted));
}

.doran-day:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--doran-focus-ring);
}

/* Unavailable days are marked with `aria-disabled`, not the `disabled` attribute, so
   they stay focusable and can announce why they cannot be picked. */
.doran-day[aria-disabled='true'] {
  color: var(--doran-text-muted);
  opacity: var(--doran-day-disabled-opacity, 0.4);
  cursor: not-allowed;
}

/* Rich days ---------------------------------------------------------------
   `.doran-month--rich` is set automatically when `dayContent` or `dayData` can
   supply a second line. Plain grids keep the square pill; rich grids give every
   cell the same taller box so rows stay level whether or not they carry text. */
.doran-month--rich .doran-month__cell {
  aspect-ratio: auto;
  /* Uniform height regardless of annotation, so rows never jump. */
  min-height: var(--doran-day-rich-size, 3rem);
}

.doran-month--rich .doran-day {
  flex-direction: column;
  justify-content: center;
  gap: var(--doran-day-content-gap, 0.1rem);
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: var(--doran-day-rich-padding, 0.2rem 0.15rem);
  border-radius: var(--doran-day-rich-radius, var(--doran-radius-md));
  line-height: 1.15;
}

.doran-day__number {
  line-height: 1.15;
  /* The number is the anchor; keep it steady while the annotation varies. */
  font-variant-numeric: tabular-nums;
}

.doran-day__content {
  /* min-width: 0 is what actually lets the ellipsis engage inside a flex column. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--doran-day-content-font-size, 0.625rem);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--doran-day-content-color, var(--doran-text-muted));
}

/* Tones are conventions, not a closed set: any other `data-tone` value passes
   through untouched for your own stylesheet to pick up. */
.doran-day__content[data-tone='low'],
.doran-day__content[data-tone='positive'] {
  color: var(--doran-day-tone-low, var(--doran-success));
}

.doran-day__content[data-tone='high'],
.doran-day__content[data-tone='negative'] {
  color: var(--doran-day-tone-high, var(--doran-danger));
}

/* Outside days keep their annotation but recede with the number, so a trailing
   week does not shout as loudly as the current month. */
.doran-day--outside .doran-day__content {
  opacity: 0.55;
}

/* Selected days invert their background, so the annotation follows the contrast
   rather than keeping a tone colour that would fail against the fill. */
.doran-day--selected .doran-day__content,
.doran-day--range-start .doran-day__content,
.doran-day--range-end .doran-day__content {
  color: inherit;
  opacity: 0.9;
}

/* In-range days sit on a tinted band; the annotation needs to stay legible on it
   without adopting the filled-endpoint treatment. */
.doran-day--in-range .doran-day__content {
  color: var(--doran-day-in-range-color, inherit);
}

/* The holiday dot is positioned for a single-line cell; nudge it clear of the
   second line so it does not collide with the annotation. */
.doran-month--rich .doran-day--holiday::after {
  bottom: auto;
  top: 0.2rem;
  inset-inline-end: 0.25rem;
}

.doran-day--outside {
  color: var(--doran-day-outside-color, var(--doran-text-subtle));
}

.doran-day--weekend {
  color: var(--doran-day-weekend-color, var(--doran-holiday));
}

.doran-day--holiday {
  color: var(--doran-day-holiday-color, var(--doran-holiday));
}

.doran-day--holiday::after {
  content: '';
  position: absolute;
  bottom: 0.28rem;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 0.25rem;
  height: 0.25rem;
  border-radius: var(--doran-radius-full);
  background: var(--doran-day-holiday-dot, var(--doran-holiday));
}

.doran-day--today {
  font-weight: var(--doran-font-weight-bold, 700);
  color: var(--doran-day-today-color, var(--doran-primary));
  box-shadow: inset 0 0 0 1px var(--doran-day-today-ring, var(--doran-primary));
}

.doran-day--selected,
.doran-day--range-start,
.doran-day--range-end {
  background: var(--doran-day-selected-bg, var(--doran-primary));
  color: var(--doran-day-selected-color, var(--doran-primary-contrast));
  font-weight: var(--doran-font-weight-medium, 500);
  box-shadow: none;
}

.doran-day--selected:not([aria-disabled='true']):hover,
.doran-day--range-start:not([aria-disabled='true']):hover,
.doran-day--range-end:not([aria-disabled='true']):hover {
  background: var(--doran-day-selected-hover-bg, var(--doran-primary-hover));
  color: var(--doran-day-selected-color, var(--doran-primary-contrast));
}

/* A selected day's holiday dot must show against the filled background. */
.doran-day--selected.doran-day--holiday::after,
.doran-day--range-start.doran-day--holiday::after,
.doran-day--range-end.doran-day--holiday::after {
  background: var(--doran-day-selected-color, var(--doran-primary-contrast));
}

/* In-range band: a pseudo-element only as tall as a day cell, so consecutive days
   read as one connected pill instead of tall, blocky full-cell rectangles. Every
   piece is themeable: `--doran-day-range-bg` (fill), `--doran-day-range-height`
   (band thickness), and `--doran-day-range-radius` (the rounded caps). */
.doran-month__cell:has(.doran-day--in-range)::before,
.doran-month__cell:has(.doran-day--range-start)::before,
.doran-month__cell:has(.doran-day--range-end)::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline: 0;
  transform: translateY(-50%);
  height: var(--doran-day-range-height, var(--doran-day-size, 2.125rem));
  background: var(--doran-day-range-bg, var(--doran-primary-soft));
  z-index: 0;
}

/* Rounded caps on the endpoints. RTL: the start is the right-hand endpoint, so its
   cap rounds the inline-start (right) corners; the end rounds inline-end (left). */
.doran-month__cell:has(.doran-day--range-start)::before {
  border-start-start-radius: var(--doran-day-range-radius, var(--doran-radius-full));
  border-end-start-radius: var(--doran-day-range-radius, var(--doran-radius-full));
}

.doran-month__cell:has(.doran-day--range-end)::before {
  border-start-end-radius: var(--doran-day-range-radius, var(--doran-radius-full));
  border-end-end-radius: var(--doran-day-range-radius, var(--doran-radius-full));
}

/* Single-day range (start === end): no band, just the filled day. */
.doran-month__cell:has(.doran-day--range-start.doran-day--range-end)::before {
  display: none;
}

/* Keep the day button (and its filled endpoints) above the band. */
.doran-month__cell .doran-day {
  z-index: 1;
}

.doran-day--in-range {
  background: transparent;
  color: var(--doran-day-in-range-color, var(--doran-text));
}

/* ===========================================================================
 * Date picker
 * ======================================================================== */

.doran-datepicker {
  position: relative;
  display: inline-block;
  width: var(--doran-input-width, auto);
  max-width: 100%;
  font-family: var(--doran-font-sans);
}

.doran-datepicker__input {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--doran-space-sm);
  min-width: var(--doran-input-width, 12rem);
  max-width: 100%;
  height: var(--doran-input-height, 2.5rem);
  padding: 0 var(--doran-space-md);
  background: var(--doran-input-bg, var(--doran-surface));
  color: var(--doran-text);
  border: 1px solid var(--doran-input-border-color, var(--doran-border));
  border-radius: var(--doran-input-radius, var(--doran-radius-md));
  font-family: inherit;
  font-size: var(--doran-input-font-size, 0.9rem);
  box-shadow: var(--doran-input-shadow, none);
  cursor: pointer;
  box-sizing: border-box;
  transition:
    border-color var(--doran-transition, 0.15s ease),
    box-shadow var(--doran-transition, 0.15s ease);
}

.doran-datepicker__input[data-icon-position='left'] {
  flex-direction: row;
}

.doran-datepicker__input[data-icon-position='right'] {
  flex-direction: row-reverse;
}

.doran-datepicker__input:hover {
  border-color: var(--doran-border-strong);
}

/* The trigger is now a wrapper around a real <input>, so disabled and focus state
   arrive from the field inside it rather than from the box itself. */
.doran-datepicker__input[data-disabled] {
  opacity: var(--doran-disabled-opacity, 0.55);
  cursor: not-allowed;
}

.doran-datepicker__input[data-disabled]:hover {
  border-color: var(--doran-input-border-color, var(--doran-border));
}

.doran-datepicker__input:focus-within {
  outline: none;
  border-color: var(--doran-input-focus-border-color, var(--doran-primary));
  box-shadow: var(--doran-input-focus-shadow, 0 0 0 3px var(--doran-focus-ring));
}

.doran-datepicker__input[data-invalid] {
  border-color: var(--doran-input-invalid-border-color, var(--doran-danger));
}

.doran-datepicker__input[data-invalid]:focus-within {
  border-color: var(--doran-input-invalid-border-color, var(--doran-danger));
  box-shadow: var(--doran-input-invalid-shadow, 0 0 0 3px var(--doran-danger-soft, transparent));
}

/* The bare text field: the wrapper owns the border, background, and height. */
.doran-datepicker__control {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
}

.doran-datepicker__control:focus {
  outline: none;
}

/* The field is 40px tall but the control inside it was 23px, so the padding around
   the text was dead to a tap — you had to hit the middle of the field to focus it, or
   to open the picker under `editable={false}`. The control fills the field instead.
   An input centres its own text; the button is made a flex box below to match. */
.doran-datepicker__control {
  align-self: stretch;
}

/* `editable={false}`: the trigger is a button, so it has to be talked back out of
   looking like one and into looking like the field it replaces. */
.doran-datepicker__control--button {
  display: flex;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
}

/* `text-align` does not reach an anonymous flex item, so the physical keywords carry
   the intent instead — and they stay physical under `dir="rtl"`, where `flex-end`
   would have quietly meant the opposite edge. */
.doran-datepicker__control--button[data-text-align='right'] {
  justify-content: right;
}

.doran-datepicker__control--button[data-text-align='left'] {
  justify-content: left;
}

/* Compatibility with markup from before the trigger became a real input.
   `.doran-datepicker__value` named the text span the input replaced, and
   `.doran-datepicker__placeholder` its empty state — both are still honoured so
   existing stylesheets do not quietly stop applying. */
.doran-datepicker__placeholder {
  color: var(--doran-placeholder-color, var(--doran-text-muted));
}

.doran-datepicker__control:disabled {
  cursor: not-allowed;
  /* The wrapper already dims; dimming twice reads as broken. */
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}

.doran-datepicker__control::placeholder {
  color: var(--doran-placeholder-color, var(--doran-text-muted));
  opacity: 1;
}

.doran-datepicker__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--doran-icon-color, var(--doran-text-muted));
  cursor: pointer;
  /* The artwork is ~17px, which is a miss on a phone more often than a hit — and on
     a typable field this button is the only way to reach the calendar. Grow the
     button rather than overlaying the text, so the two targets stay disjoint and
     tapping next to the icon still places the caret. The field's width is unchanged:
     the input flexes and gives up the difference. */
  min-width: var(--doran-tap-target, 1.75rem);
  align-self: stretch;
}

.doran-datepicker__icon:disabled {
  cursor: not-allowed;
}

.doran-datepicker__icon svg {
  width: var(--doran-icon-size, 1.05rem);
  height: var(--doran-icon-size, 1.05rem);
}

/* --- Sheet presentation -------------------------------------------------
   Under the breakpoint the calendar stops trying to anchor itself to a trigger
   near the bottom of a phone viewport and becomes a bottom sheet instead. */

.doran-datepicker__popover.doran-datepicker__popover--sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  /* Beats the anchored pop-over's `calc(100vw - 1rem)`. A sheet is full-bleed;
     inset alone loses to that cap and leaves it floating short of both edges. */
  max-width: none;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Room for the grabber above the calendar. */
  padding: calc(var(--doran-space-md) + 0.5rem) var(--doran-sheet-padding, var(--doran-space-md))
    var(--doran-space-md);
  /* Clear the home indicator and any on-screen keyboard inset. */
  padding-bottom: calc(var(--doran-space-md) + env(safe-area-inset-bottom, 0px));
  /* The surface itself. Without this the sheet is transparent and the calendar
     inside it reads as a slab floating over the page, framed by a stray shadow. */
  background: var(--doran-sheet-bg, var(--doran-surface));
  border-radius: var(--doran-sheet-radius, var(--doran-radius-lg) var(--doran-radius-lg) 0 0);
  /* A hairline for the edge, plus the dimmed page behind. The spread shadow is the
     backdrop: it paints behind the sheet, needs no extra DOM, and — being a shadow —
     never intercepts the tap that closes the sheet. */
  box-shadow:
    var(--doran-sheet-shadow, inset 0 1px 0 var(--doran-border)),
    0 0 0 100vmax var(--doran-sheet-backdrop, rgb(0 0 0 / 0.32));
  animation: doran-sheet-in var(--doran-transition, 0.22s cubic-bezier(0.32, 0.72, 0, 1));
}

/* The grabber. Says "sheet" before the user has touched anything, and is the one
   affordance every native bottom sheet shares. Decorative only — dragging is not
   wired up, so it must never eat a tap meant for the calendar. */
.doran-datepicker__popover.doran-datepicker__popover--sheet::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: var(--doran-sheet-grabber-width, 2.25rem);
  height: 0.25rem;
  border-radius: var(--doran-radius-full);
  background: var(--doran-sheet-grabber-color, var(--doran-border));
  pointer-events: none;
}

@keyframes doran-sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* A sheet is the width of the phone, so the calendar should use it rather than sit
   at its desktop width with the difference as dead margin. */
.doran-datepicker__popover--sheet .doran-calendar,
.doran-datepicker__popover--sheet .doran-rangepicker {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .doran-datepicker__popover--sheet {
    animation: none;
  }
}

/* The calendar fills the sheet rather than keeping its desktop width. */
.doran-datepicker__popover--sheet .doran-calendar {
  /* `min(…, 100%)`: the cap is a readability limit on a big phone, never a reason to
     grow past the sheet on a small one. */
  max-width: min(var(--doran-sheet-content-width, 26rem), 100%);
  border: none;
  box-shadow: none;
  background: transparent;
}

/* --- Range trigger ------------------------------------------------------
   Two fields sharing one bordered box, so the pair reads as a single control. */

.doran-rangetrigger__field {
  gap: var(--doran-space-xs);
}

.doran-rangetrigger__control {
  /* Both ends share the width evenly rather than one crowding the other. */
  flex: 1 1 0;
  min-width: 0;
}

.doran-rangetrigger__separator {
  flex-shrink: 0;
  color: var(--doran-placeholder-color, var(--doran-text-muted));
  user-select: none;
}

/* Marks which end the next pick fills — the only cue that the widget has two
   modes, so it needs to be visible without relying on focus alone. */
.doran-rangetrigger__field[data-editing='start'] .doran-rangetrigger__control:first-of-type,
.doran-rangetrigger__field[data-editing='end'] .doran-rangetrigger__control:nth-of-type(2) {
  font-weight: var(--doran-font-weight-medium, 500);
}

/*
 * Rendered in a body-level portal and positioned `fixed` from the trigger rect
 * (top/left arrive as inline styles), so overflow:hidden/auto ancestors can
 * never clip it. Override the stacking level with `--doran-z-popover`.
 *
 * `pointer-events: auto` is that same protection applied to input instead of
 * layout. A modal Radix layer — Dialog, AlertDialog, a shadcn Sheet, a vaul
 * Drawer, anything using `disableOutsidePointerEvents` — parks
 * `pointer-events: none` on <body> for as long as it is open and exempts only
 * its own subtree. A body-portaled pop-over inherits the `none` and goes inert:
 * the calendar paints on top but taps hit-test straight through to <html>, and
 * the picker's own outside-pointerdown dismissal then sees a target it does not
 * own and closes. The pop-over is the topmost element on screen by
 * construction, so there is no case where inheriting `none` is wanted.
 */
.doran-datepicker__popover {
  position: fixed;
  max-width: calc(100vw - 1rem);
  z-index: var(--doran-z-popover, 9999);
  pointer-events: auto;
  animation: doran-pop-in 0.12s ease;
}

.doran-datepicker__popover--trigger > .doran-calendar,
.doran-datepicker__popover--custom > .doran-calendar {
  width: 100%;
  max-width: 100%;
}

@keyframes doran-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .doran-datepicker__popover {
    animation: none;
  }
}

/* ===========================================================================
 * Range picker
 * ======================================================================== */

.doran-rangepicker {
  width: var(--doran-calendar-width, 20rem);
}

/* When presets and/or multiple months are shown, let the picker size to content. */
.doran-rangepicker--multi,
.doran-rangepicker:has(.doran-rangepicker__presets) {
  width: auto;
}

.doran-rangepicker__body {
  display: flex;
  gap: var(--doran-calendar-gap, 0.75rem);
  align-items: flex-start;
  justify-content: center;
}

.doran-rangepicker__presets {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-inline-end: 0.75rem;
  border-inline-end: 1px solid var(--doran-calendar-border-color, var(--doran-border));
}

/* The preset buttons keep their own group so `slots.aside` can share the sidebar
   above them without joining the group's accessible name. */
.doran-rangepicker__preset-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.doran-rangepicker__preset {
  font: inherit;
  font-size: 0.82rem;
  text-align: start;
  white-space: nowrap;
  padding: 0.35rem 0.6rem;
  border: none;
  border-radius: var(--doran-radius-md, 8px);
  background: transparent;
  color: var(--doran-text);
  cursor: pointer;
}

.doran-rangepicker__preset:hover {
  background: var(--doran-day-hover-bg, var(--doran-surface-muted));
}

.doran-rangepicker__months {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.doran-rangepicker__month-caption {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--doran-calendar-heading-color, var(--doran-text));
}

.doran-rangepicker__footer {
  justify-content: space-between;
  align-items: center;
}

.doran-rangepicker__summary {
  font-size: 0.82rem;
  color: var(--doran-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
 * Narrow viewports
 *
 * Everything above is laid out for a mouse and a wide window. These rules are the
 * phone's share of the design — not a shrink of the desktop layout, but the pieces
 * re-stacked so each one keeps its full size.
 *
 * 640px matches `SHEET_BREAKPOINT` in the components, so a picker that switches to
 * a sheet and the layout inside it change over together.
 * ======================================================================== */

@media (max-width: 639px) {
  /* A finger is roughly 44px wide and has no cursor to aim with. Days are the whole
     point of the widget, so they get the room first; everything else follows from
     the grid being wider. */
  .doran-calendar,
  .doran-rangepicker {
    --doran-day-size: var(--doran-day-size-touch, 2.75rem);
    --doran-day-font-size: 0.95rem;
  }

  /* The calendar sizes to the screen rather than a fixed desktop width, and never
     past whatever is holding it. */
  .doran-calendar {
    width: 100%;
    max-width: 100%;
  }

  /* The touch target is a ceiling, not a floor.
     
     A fixed 2.75rem day is 308px of grid before padding, which does not fit a 375px
     phone once an inline calendar has a legend beside it — the grid stops shrinking
     and the page scrolls sideways instead. Filling the cell and capping at the touch
     size gives a full 44px wherever there is room and degrades smoothly where there
     is not, rather than overflowing. The cell is `aspect-ratio: 1`, so the day stays
     square and its full-radius circle stays a circle. */
  .doran-day {
    width: 100%;
    height: 100%;
    max-width: var(--_day-size);
    max-height: var(--_day-size);
  }

  /* A day carrying a fare or a seat count is taller than it is wide on purpose, and
     `--_day-size` is a width budget rather than its height. Capping it squashed the
     annotation out of sight. */
  .doran-month--rich .doran-day {
    max-height: none;
  }

  /* --- Calendar slots --------------------------------------------------
     `aside` is a sidebar beside the grid. At 375px that left the grid 23px columns —
     it stopped overflowing once days became fluid, but only by shrinking to
     unusable. The sidebar becomes a row above the grid instead. */
  .doran-calendar__body {
    flex-direction: column;
    align-items: stretch;
  }

  .doran-calendar__aside {
    flex-direction: row;
    flex-wrap: wrap;
    padding-inline-end: 0;
    padding-bottom: var(--doran-space-sm, 8px);
    /* The divider turns with the layout: it separated columns, now it separates rows. */
    border-inline-end: none;
    border-bottom: 1px solid var(--doran-calendar-border-color, var(--doran-border));
  }

  /* --- Time picker ------------------------------------------------------
     The steppers were 28x20 — a target you miss more often than you hit. */
  .doran-time__btn {
    --doran-time-btn-width: 2.25rem;
    --doran-time-btn-height: 2rem;
  }

  /* --- Range picker ----------------------------------------------------
     Two months side by side and a preset sidebar is three columns of content on a
     screen that has room for one. Each becomes a row of its own instead. */
  .doran-rangepicker,
  .doran-rangepicker--multi,
  .doran-rangepicker:has(.doran-rangepicker__presets) {
    width: 100%;
  }

  .doran-rangepicker__body {
    flex-direction: column;
    align-items: stretch;
  }

  /* Months stack and the panel scrolls, the way a phone date range is normally
     browsed — rather than two grids fighting over one screen's width. */
  .doran-rangepicker__months {
    flex-direction: column;
    gap: var(--doran-space-lg, 1rem);
    /* Side by side, `flex-start` kept each month at its natural width. Stacked, that
       same rule leaves them at min-content — a 228px grid adrift in a 375px sheet —
       so each month takes the full row instead. */
    align-items: stretch;
  }

  .doran-rangepicker__months > * {
    width: 100%;
  }

  /* Presets become a horizontal strip above the months: reachable with a thumb,
     and costing one row instead of a whole column. */
  .doran-rangepicker__presets {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-inline-end: 0;
    padding-bottom: var(--doran-space-sm, 8px);
    /* The divider turns with the layout: it separated columns, now it separates rows. */
    border-inline-end: none;
    border-bottom: 1px solid var(--doran-calendar-border-color, var(--doran-border));
  }

  .doran-rangepicker__presets::-webkit-scrollbar {
    display: none;
  }

  .doran-rangepicker__preset-group {
    flex-direction: row;
  }

  .doran-rangepicker__preset {
    flex: 0 0 auto;
    /* Same reasoning as the days: a thumb target, not a menu row. */
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--doran-calendar-border-color, var(--doran-border));
  }

  /* The summary and Clear stop competing for one line once the range is spelled out. */
  .doran-rangepicker__footer {
    flex-wrap: wrap;
    gap: var(--doran-space-sm, 8px);
  }
}

/* 375px is the floor this library designs for — an iPhone SE or a Galaxy S in
   portrait. At that width the frame around the grid costs more than the grid can
   spare, so the chrome gives its padding back to the days. */
@media (max-width: 400px) {
  .doran-datepicker__popover.doran-datepicker__popover--sheet {
    --doran-sheet-padding: var(--doran-space-sm, 8px);
  }

  .doran-datepicker__popover--sheet .doran-calendar,
  .doran-datepicker__popover--sheet .doran-rangepicker {
    --doran-calendar-padding: var(--doran-space-sm, 8px);
  }
}

/* ===========================================================================
 * NLP input
 * ======================================================================== */

.doran-nlp {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: var(--doran-nlp-width, 22rem);
  max-width: 100%;
  font-family: var(--doran-font-sans);
}

.doran-nlp__field {
  position: relative;
  display: flex;
  align-items: center;
}

.doran-nlp__input,
.doran-nlp__ghost {
  width: 100%;
  height: var(--doran-input-height, 2.5rem);
  padding: 0 var(--doran-space-md);
  font-family: inherit;
  font-size: 0.95rem;
  border-radius: var(--doran-input-radius, var(--doran-radius-md));
  box-sizing: border-box;
}

.doran-nlp__input {
  position: relative;
  z-index: 1;
  background: var(--doran-input-bg, var(--doran-surface));
  color: var(--doran-text);
  border: 1px solid var(--doran-input-border-color, var(--doran-border));
  transition:
    border-color var(--doran-transition, 0.15s ease),
    box-shadow var(--doran-transition, 0.15s ease);
}

.doran-nlp__input:focus {
  outline: none;
  border-color: var(--doran-primary);
  box-shadow: 0 0 0 3px var(--doran-focus-ring);
}

.doran-nlp__input::placeholder {
  color: var(--doran-text-muted);
}

/* The resolved-date hint, pinned to the opposite (LTR) end of the input. */
.doran-nlp__hint {
  position: absolute;
  z-index: 2;
  inset-inline-end: var(--doran-space-md);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.78rem;
  color: var(--doran-primary);
  background: var(--doran-primary-soft);
  border-radius: var(--doran-radius-sm);
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doran-nlp__hint--unknown {
  color: var(--doran-text-muted);
  background: var(--doran-surface-muted);
}

/*
 * Body-portaled and positioned `fixed` at the input's width (top/left/width
 * arrive as inline styles), so overflow ancestors can never clip it.
 * `pointer-events: auto` for the reason spelled out on
 * `.doran-datepicker__popover`: inside a modal Radix layer <body> carries
 * `pointer-events: none`, and without this the suggestions would render in
 * place but refuse every tap.
 */
.doran-nlp__suggestions {
  position: fixed;
  z-index: var(--doran-z-popover, 9999);
  pointer-events: auto;
  box-sizing: border-box;
  margin: 0;
  padding: var(--doran-space-xs);
  list-style: none;
  background: var(--doran-surface-raised, var(--doran-surface));
  border: 1px solid var(--doran-border);
  border-radius: var(--doran-radius-md);
  box-shadow: var(--doran-shadow-md);
  max-height: 15rem;
  overflow-y: auto;
}

.doran-nlp__suggestion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--doran-space-sm);
  padding: 0.45rem var(--doran-space-sm);
  border: none;
  width: 100%;
  background: transparent;
  color: var(--doran-text);
  font: inherit;
  font-size: 0.9rem;
  text-align: start;
  border-radius: var(--doran-radius-sm);
  cursor: pointer;
}

.doran-nlp__suggestion:hover,
.doran-nlp__suggestion--active {
  background: var(--doran-surface-muted);
}

.doran-nlp__suggestion-preview {
  font-size: 0.75rem;
  color: var(--doran-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The numeric time piece sits just after the date, with a small gap. */
.doran-nlp__time {
  margin-inline-start: 0.35em;
}

/* ===========================================================================
 * Agenda
 * ======================================================================== */

.doran-agenda {
  display: flex;
  flex-direction: column;
  gap: var(--doran-space-sm);
  font-family: var(--doran-font-sans);
  color: var(--doran-text);
}

.doran-agenda__day {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--doran-space-md);
  padding: var(--doran-space-sm);
  border: 1px solid var(--doran-border);
  border-radius: var(--doran-radius-md);
  background: var(--doran-surface);
}

.doran-agenda__day--weekend {
  background: var(--doran-surface-muted);
}

.doran-agenda__date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  color: inherit;
}

.doran-agenda__weekday {
  font-weight: var(--doran-font-weight-semibold, 600);
}

.doran-agenda__daynum {
  font-size: 0.8rem;
  color: var(--doran-text-muted);
}

.doran-agenda__events {
  display: flex;
  flex-direction: column;
  gap: var(--doran-space-xs);
}

.doran-agenda__empty {
  font-size: 0.82rem;
  color: var(--doran-text-muted);
}

.doran-agenda__event {
  display: flex;
  align-items: flex-start;
  gap: var(--doran-space-sm);
}

.doran-agenda__marker {
  width: 8px;
  height: 8px;
  border-radius: var(--doran-radius-full);
  margin-top: 6px;
  flex-shrink: 0;
}

.doran-agenda__event-title {
  font-size: 0.88rem;
  font-weight: var(--doran-font-weight-medium, 500);
}

.doran-agenda__event-desc {
  font-size: 0.8rem;
  color: var(--doran-text-muted);
}