/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
.react-aria-Form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}
.react-aria-Form > .react-aria-Button {
  align-self: start;
}
.react-aria-Form [role=alert] {
  border: 2px solid var(--invalid-color);
  background: var(--overlay-background);
  border-radius: 6px;
  padding: 12px;
  max-width: 250px;
  outline: none;
}
.react-aria-Form [role=alert]:focus {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.react-aria-Form [role=alert] h3 {
  margin-top: 0;
}
.react-aria-Form [role=alert] p {
  margin-bottom: 0;
}
.react-aria-Label {
  /* Copied from spry .label rule */
  display: block;
  color: var(--text-color);
  font-weight: 300;
  font-size: 1.2em;
  padding-bottom: 0.3em;
  /* Copied from spry `.label.required` style. */
}
[data-required=true] > .react-aria-Label {
  font-weight: 700;
}
.react-aria-FieldError {
  display: block;
  font: var(--font-size-sm) var(--font-family);
  color: var(--invalid-color);
  margin-top: var(--spacing-1);
  contain: inline-size;
}
.field-description {
  display: block;
  font: var(--font-size-sm) var(--font-family);
  margin-top: var(--spacing-1);
  contain: inline-size;
}
[data-invalid] > .field-description {
  display: none;
}
.field-Button {
  /* position: relative so the button paints on top of any sibling that becomes
   * positioned (e.g. the DateInput when it's invalid/warning). The negative
   * margin-left below makes the button overlap the input's right edge, so
   * paint order matters. */
  position: relative;
  background: var(--tint-200);
  color: var(--tint-1400);
  forced-color-adjust: none;
  border-radius: var(--radius-sm);
  border: none;
  margin-left: calc(-1 * var(--spacing-8) + 4px);
  height: calc(100% - 8px);
  aspect-ratio: 1/1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: scale, background;
  transition-duration: 200ms;
  -webkit-tap-highlight-color: transparent;
}
.field-Button svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
}
.field-Button:where([data-hovered], [data-pressed]) {
  background: var(--tint-300);
  color: var(--tint-1200);
}
.field-Button[data-pressed] {
  scale: 0.9;
}
.field-Button[data-focus-visible] {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.field-Button[data-disabled] {
  background: none;
  color: var(--text-color-disabled);
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
@layer utilities {
  /* Flat button utility — Spry-style: solid background, no gradients or
   * specular highlights, transparent border by default. Hover and pressed
   * darken the background; pressed adds Spry's subtle inset depression. */
  .button-base {
    --button-color: var(--tint);
    --button-background: oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h);
    --button-text: oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h);
    --button-border: transparent;
    --button-border-size: 1px;
    background: var(--button-background);
    color: var(--button-text);
    border: var(--button-border-size) solid var(--button-border);
    box-shadow: none;
    outline: none;
    transition-property: background, color, border-color, box-shadow;
    transition-duration: 200ms;
    forced-color-adjust: none;
    -webkit-tap-highlight-color: transparent;
  }
  .button-base:where([data-hovered]) {
    --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);
  }
  .button-base:where([data-pressed]) {
    --button-background: oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 6px rgba(0, 0, 0, 0.2);
  }
  .button-base:where([data-focus-visible]) {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .button-base:where([data-variant=primary]) {
    --button-color: var(--orange);
    /* Spry @attention #bf5700 */
    --button-background: var(--button-color);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-variant=primary]):where([data-hovered]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.05) c h);
  }
  .button-base:where([data-variant=primary]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.1) c h);
  }
  .button-base:where([data-variant=secondary]) {
    --button-color: var(--gray);
  }
  .button-base:where([data-variant=quiet]) {
    --button-background: transparent;
    --button-text: var(--text-color);
  }
  .button-base:where([data-variant=quiet]):where([data-hovered], [data-pressed]) {
    --button-background: var(--tint-200);
    --button-text: var(--tint-1400);
  }
  .button-base:where([data-selected]) {
    --button-background: oklch(from var(--button-color) 55% c h);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-selected]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) 50% c h);
  }
  .button-base:where([data-disabled]) {
    cursor: not-allowed;
    box-shadow: none;
  }
  /* Flat indicator utility — solid white field with a 1px border, no inner
   * gloss or drop shadow. Selected fills with the highlight color. */
  .indicator {
    --indicator-color: var(--gray);
    --indicator-background: var(--field-background);
    --indicator-border: var(--border-color-hover);
    background: var(--indicator-background);
    box-shadow: inset 0 0 0 1px var(--indicator-border);
    transition: background 200ms, box-shadow 200ms;
    will-change: scale;
  }
  .indicator[data-pressed],
  [data-pressed] .indicator {
    scale: 0.9;
  }
  [data-selected] > .indicator,
  [data-indeterminate] > .indicator {
    --indicator-color: var(--highlight-background);
    --indicator-background: var(--indicator-color);
    --indicator-border: var(--indicator-background);
  }
  .indicator[data-invalid],
  [data-invalid] > .indicator {
    --indicator-color: var(--invalid-color);
    --indicator-color: var(--pink);
  }
  .indicator[data-focus-visible],
  [data-focus-visible] > .indicator {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .indicator[data-disabled],
  [data-disabled] > .indicator {
    background: var(--field-background);
    box-shadow: inset 0 0 0 1px var(--border-color-disabled);
  }
  /* Flat inset utility — Spry-style fields: white background with a
   * transparent border that becomes visible on hover and switches to the
   * link color on focus. No inner shadow. */
  .inset {
    --inset-background: var(--field-background);
    --inset-border: transparent;
    --inset-border-size: 1px;
    background: var(--inset-background);
    box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border);
    transition: box-shadow 200ms;
    forced-color-adjust: none;
    /* Required listed first so the invalid / warning rules below override
     * --inset-indicator-color when more than one state is active. Note that
     * required doesn't change the --inset-border because required is just the triangle without the border */
    /* Top-left corner indicator. Mask provides the triangle shape;
     * background-color (via --inset-indicator-color) provides the fill,
     * so the indicator follows the same theme tokens as the border. */
  }
  .inset:where([data-hovered], [data-pressed]) {
    --inset-border: var(--border-color);
  }
  .inset:where([data-focus-within], [data-focused]) {
    --inset-border: var(--link-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required]) {
    position: relative;
  }
  .inset:where([data-required]) {
    --inset-indicator-color: var(--required-color);
  }
  .inset:where([data-invalid]) {
    --inset-border: var(--invalid-color);
    --inset-indicator-color: var(--invalid-color);
  }
  .inset:where([data-warning]) {
    --inset-border: var(--warning-color);
    --inset-indicator-color: var(--warning-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required])::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0.7em;
    height: 0.7em;
    background-color: var(--inset-indicator-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%207%207'%3E%3Cpolygon%20points%3D'0%2C7%200%2C0%207%2C0'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%207%207'%3E%3Cpolygon%20points%3D'0%2C7%200%2C0%207%2C0'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    pointer-events: none;
  }
  .inset:where([data-disabled]) {
    --inset-background: transparent;
    --inset-border: transparent;
  }
  .inset.track {
    --inset-background: var(--gray-200);
    --inset-border: var(--gray-400);
  }
}
.react-aria-DateField,
.react-aria-TimeField {
  display: flex;
  flex-direction: column;
}
.react-aria-DateInput {
  display: inline;
  padding: 0 var(--spacing-3);
  box-sizing: border-box;
  border-radius: var(--radius);
  font: var(--font-size) var(--font-family);
  color: var(--field-text-color);
  height: var(--spacing-8);
  line-height: var(--spacing-8);
  width: fit-content;
  min-width: 150px;
  white-space: nowrap;
  forced-color-adjust: none;
  cursor: text;
}
.react-aria-DateInput[data-focus-within] {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -1px;
}
.react-aria-DateInput[data-disabled] {
  color: var(--text-color-disabled);
  cursor: default;
}
.react-aria-DateInput.disabled-more-visible {
  --text-color-disabled: #3f5978;
}
/* Spry Field styles. Used by TimeField and DateTimePicker2 */
.react-aria-DateInput.inset {
  width: 100%;
  font-size: 1.2em;
  /* Duplicates Spry styles that apply to the .input classes. Duplicated instead of adding the class to avoid
   * side effects from other parts of the input class 
   */
  font-weight: 500;
  line-height: 1.35;
  padding: 0.7em 0.6em;
  height: auto;
  overflow-x: auto;
  overflow-y: clip;
  scrollbar-width: none;
  /* Resting border held in a variable so individual consumers can
   * change just the resting color without having to override every
   * state rule (hover/invalid/disabled/etc.). DatePicker keeps #e6e7e8
   * to match Spry's `.input-container` border; TimeField overrides
   * this to transparent to match a bare Spry text input. */
  --inset-border-rest: #e6e7e8;
  --inset-border: var(--inset-border-rest);
  border: 1px solid var(--inset-border);
  box-shadow: none;
  transition: border-color 200ms;
  /* Focus uses the browser-native `auto` halo at --focus-ring-color.
   * The resting border stays as-is (no swap to --link-color from the
   * inset utility) — references --inset-border-rest so the focused
   * border color also follows any consumer override. */
  /* Re-apply the .inset utility's invalid/warning border colors. The
   * utility sets --inset-border via .inset:where([data-invalid]) at
   * (0,1,0) specificity, but the base rule above (0,2,0) wins, so the
   * border never goes red/yellow. Restate it here so it does. */
  /* Spry's disabled fill */
  /* Spry's read-only style */
  /* Inherit font size so the overall input matches Spry's height. */
}
.react-aria-DateInput.inset:where([data-hovered], [data-pressed]) {
  --inset-border: rgba(187, 189, 191, 0.7);
}
.react-aria-DateInput.inset[data-focus-within] {
  --inset-border: var(--inset-border-rest);
  outline-style: auto;
  outline-color: var(--focus-ring-color);
  outline-offset: 0;
}
.react-aria-DateInput.inset[data-invalid] {
  --inset-border: var(--invalid-color);
}
.react-aria-DateInput.inset[data-warning] {
  --inset-border: var(--warning-color);
}
.react-aria-DateInput.inset[data-disabled] {
  --inset-background: rgba(255, 255, 255, 0.4);
  --inset-border: transparent;
}
.react-aria-DateInput.inset[data-readonly] {
  --inset-background: rgba(255, 255, 255, 0.4);
  --field-text-color: #3f5978;
}
.react-aria-DateInput.inset .react-aria-DateSegment {
  font-size: inherit;
}
/* For military time, hide the separator between hour and minute segments and remove the segment padding 
   so HH:mm displays as HHmm */
.react-aria-DateInput[data-time-format="military"] .timeField-time-separator {
  display: none;
}
.react-aria-DateInput[data-time-format="military"] .react-aria-DateSegment[data-type="hour"] {
  padding-right: 0;
}
.react-aria-DateInput[data-time-format="military"] .react-aria-DateSegment[data-type="minute"] {
  padding-left: 0;
}
.react-aria-DateSegment {
  padding: 2px;
  font-size: var(--font-size);
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--field-text-color);
  -webkit-tap-highlight-color: transparent;
}
.react-aria-DateSegment[data-type=literal] {
  padding: 0;
}
.react-aria-DateSegment[data-placeholder] {
  color: var(--text-color-placeholder);
}
.react-aria-DateSegment:focus {
  color: var(--highlight-foreground);
  background: var(--highlight-background);
  outline: none;
  border-radius: 4px;
  caret-color: transparent;
}
.react-aria-DateSegment[data-disabled] {
  color: var(--text-color-disabled);
  cursor: default;
}
/* While a drag-to-select gesture is active, suppress native text selection inside the
 * input. The pointermove handler also defensively clears any window selection when the
 * threshold is met; this prevents the browser from re-establishing it as the drag continues. */
.react-aria-DateInput[data-dragging] {
  user-select: none;
}
.react-aria-DateInput[data-all-selected] .react-aria-DateSegment {
  color: var(--highlight-foreground);
  background: var(--highlight-background);
  border-radius: 0;
}
/* Literals (`/`, `:`, space) ship with padding:0, so without this the highlight is
 * shorter vertically at each separator and the field reads as chopped boxes
 * instead of one continuous selection. */
.react-aria-DateInput[data-all-selected] .react-aria-DateSegment[data-type=literal] {
  padding-top: 2px;
  padding-bottom: 2px;
}
/* Need data-type=literal here because the first/last children can be non-displaying segments */
.react-aria-DateInput[data-all-selected] .react-aria-DateSegment:nth-child(1 of :not([data-type=literal])) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.react-aria-DateInput[data-all-selected] .react-aria-DateSegment:nth-last-child(1 of :not([data-type=literal])) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
.react-aria-Popover {
  --background-color: var(--overlay-background);
  outline: 1px solid var(--overlay-border);
  box-sizing: border-box;
  filter: drop-shadow(var(--popover-shadow));
  border-radius: var(--radius-lg);
  background: var(--background-color);
  color: var(--text-color);
  transition: transform 200ms, opacity 200ms;
  font: var(--font-size) var(--font-family);
  padding: 8px;
}
.react-aria-Popover[data-trigger=MenuTrigger],
.react-aria-Popover[data-trigger=SubmenuTrigger] {
  padding: 0;
}
.react-aria-Popover .react-aria-OverlayArrow svg {
  display: block;
  fill: var(--background-color);
  stroke: var(--overlay-border);
  paint-order: stroke;
  stroke-width: 2px;
}
.react-aria-Popover[data-entering],
.react-aria-Popover[data-exiting] {
  transform: var(--origin);
  opacity: 0;
}
.react-aria-Popover[data-placement=top] {
  --origin: translateY(8px);
}
.react-aria-Popover[data-placement=top]:has(.react-aria-OverlayArrow) {
  margin-bottom: 6px;
}
.react-aria-Popover[data-placement=bottom] {
  --origin: translateY(-8px);
}
.react-aria-Popover[data-placement=bottom]:has(.react-aria-OverlayArrow) {
  margin-top: 6px;
}
.react-aria-Popover[data-placement=bottom] .react-aria-OverlayArrow svg {
  transform: rotate(180deg);
}
.react-aria-Popover[data-placement=right] {
  --origin: translateX(-8px);
}
.react-aria-Popover[data-placement=right]:has(.react-aria-OverlayArrow) {
  margin-left: 6px;
}
.react-aria-Popover[data-placement=right] .react-aria-OverlayArrow svg {
  transform: rotate(90deg);
}
.react-aria-Popover[data-placement=left] {
  --origin: translateX(8px);
}
.react-aria-Popover[data-placement=left]:has(.react-aria-OverlayArrow) {
  margin-right: 6px;
}
.react-aria-Popover[data-placement=left] .react-aria-OverlayArrow svg {
  transform: rotate(-90deg);
}

/* The old time-only dateTimePicker that TimeField replaces is a block element that fills
 * (and, in a flex row, splits) its available space. The react-aria TimeField is a flex
 * column, which instead shrinks to its content — leaving the field narrower than the old
 * picker and not lining up with it. Make the TimeField fill its container so it occupies
 * the same footprint: full width in a block layout, an equal share of a flex row. */
.react-aria-TimeField {
  width: 100%;
}
/* The base .react-aria-DateInput rule floors the width at min-width:150px, a size picked
 * for a full date ("12/31/2025 12:00 AM"). On a time-only field that floor stops the field
 * from shrinking to share a flex row, so the two time fields can't split the space the way
 * the old picker did. Drop the floor. DateTimePicker2/3 do the equivalent with min-width:0
 * on their DateInput. */
.react-aria-TimeField .react-aria-DateInput.inset {
  min-width: 0;
}
/* Inside the DateTimePicker popover the time field sits below the calendar within an
 * already-bordered popover, so it stays borderless (its original look). A standalone
 * TimeField keeps the inherited #e6e7e8 border to match the old time-only dateTimePicker. */
.react-aria-Popover .react-aria-TimeField .react-aria-DateInput.inset {
  --inset-border-rest: transparent;
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
@layer utilities {
  /* Flat button utility — Spry-style: solid background, no gradients or
   * specular highlights, transparent border by default. Hover and pressed
   * darken the background; pressed adds Spry's subtle inset depression. */
  .button-base {
    --button-color: var(--tint);
    --button-background: oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h);
    --button-text: oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h);
    --button-border: transparent;
    --button-border-size: 1px;
    background: var(--button-background);
    color: var(--button-text);
    border: var(--button-border-size) solid var(--button-border);
    box-shadow: none;
    outline: none;
    transition-property: background, color, border-color, box-shadow;
    transition-duration: 200ms;
    forced-color-adjust: none;
    -webkit-tap-highlight-color: transparent;
  }
  .button-base:where([data-hovered]) {
    --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);
  }
  .button-base:where([data-pressed]) {
    --button-background: oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 6px rgba(0, 0, 0, 0.2);
  }
  .button-base:where([data-focus-visible]) {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .button-base:where([data-variant=primary]) {
    --button-color: var(--orange);
    /* Spry @attention #bf5700 */
    --button-background: var(--button-color);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-variant=primary]):where([data-hovered]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.05) c h);
  }
  .button-base:where([data-variant=primary]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.1) c h);
  }
  .button-base:where([data-variant=secondary]) {
    --button-color: var(--gray);
  }
  .button-base:where([data-variant=quiet]) {
    --button-background: transparent;
    --button-text: var(--text-color);
  }
  .button-base:where([data-variant=quiet]):where([data-hovered], [data-pressed]) {
    --button-background: var(--tint-200);
    --button-text: var(--tint-1400);
  }
  .button-base:where([data-selected]) {
    --button-background: oklch(from var(--button-color) 55% c h);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-selected]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) 50% c h);
  }
  .button-base:where([data-disabled]) {
    cursor: not-allowed;
    box-shadow: none;
  }
  /* Flat indicator utility — solid white field with a 1px border, no inner
   * gloss or drop shadow. Selected fills with the highlight color. */
  .indicator {
    --indicator-color: var(--gray);
    --indicator-background: var(--field-background);
    --indicator-border: var(--border-color-hover);
    background: var(--indicator-background);
    box-shadow: inset 0 0 0 1px var(--indicator-border);
    transition: background 200ms, box-shadow 200ms;
    will-change: scale;
  }
  .indicator[data-pressed],
  [data-pressed] .indicator {
    scale: 0.9;
  }
  [data-selected] > .indicator,
  [data-indeterminate] > .indicator {
    --indicator-color: var(--highlight-background);
    --indicator-background: var(--indicator-color);
    --indicator-border: var(--indicator-background);
  }
  .indicator[data-invalid],
  [data-invalid] > .indicator {
    --indicator-color: var(--invalid-color);
    --indicator-color: var(--pink);
  }
  .indicator[data-focus-visible],
  [data-focus-visible] > .indicator {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .indicator[data-disabled],
  [data-disabled] > .indicator {
    background: var(--field-background);
    box-shadow: inset 0 0 0 1px var(--border-color-disabled);
  }
  /* Flat inset utility — Spry-style fields: white background with a
   * transparent border that becomes visible on hover and switches to the
   * link color on focus. No inner shadow. */
  .inset {
    --inset-background: var(--field-background);
    --inset-border: transparent;
    --inset-border-size: 1px;
    background: var(--inset-background);
    box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border);
    transition: box-shadow 200ms;
    forced-color-adjust: none;
    /* Required listed first so the invalid / warning rules below override
     * --inset-indicator-color when more than one state is active. Note that
     * required doesn't change the --inset-border because required is just the triangle without the border */
    /* Top-left corner indicator. Mask provides the triangle shape;
     * background-color (via --inset-indicator-color) provides the fill,
     * so the indicator follows the same theme tokens as the border. */
  }
  .inset:where([data-hovered], [data-pressed]) {
    --inset-border: var(--border-color);
  }
  .inset:where([data-focus-within], [data-focused]) {
    --inset-border: var(--link-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required]) {
    position: relative;
  }
  .inset:where([data-required]) {
    --inset-indicator-color: var(--required-color);
  }
  .inset:where([data-invalid]) {
    --inset-border: var(--invalid-color);
    --inset-indicator-color: var(--invalid-color);
  }
  .inset:where([data-warning]) {
    --inset-border: var(--warning-color);
    --inset-indicator-color: var(--warning-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required])::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0.7em;
    height: 0.7em;
    background-color: var(--inset-indicator-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%207%207'%3E%3Cpolygon%20points%3D'0%2C7%200%2C0%207%2C0'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%207%207'%3E%3Cpolygon%20points%3D'0%2C7%200%2C0%207%2C0'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    pointer-events: none;
  }
  .inset:where([data-disabled]) {
    --inset-background: transparent;
    --inset-border: transparent;
  }
  .inset.track {
    --inset-background: var(--gray-200);
    --inset-border: var(--gray-400);
  }
}
.react-aria-Button {
  border: none;
  border-radius: var(--radius);
  appearance: none;
  font: var(--font-size) var(--font-family);
  font-weight: 500;
  margin: 0;
  height: var(--spacing-8);
  padding: 0 var(--spacing-3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  -webkit-tap-highlight-color: transparent;
}
.react-aria-Button > svg {
  width: calc(var(--spacing) * 4.5);
  height: calc(var(--spacing) * 4.5);
}
.react-aria-Button:has(> svg:only-child) {
  width: var(--spacing-8);
  flex-shrink: 0;
  padding: 0;
  border-radius: 9999px;
}
.react-aria-Button[data-pressed] {
  scale: 0.95;
}
.react-aria-Button kbd {
  font: var(--font-size-sm) var(--font-family);
  background: var(--highlight-hover);
  border: 0.5px solid var(--tint-500);
  padding: 0 var(--spacing-1);
  border-radius: var(--radius-sm);
  margin-inline-start: var(--spacing-3);
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
.react-aria-ListBox {
  max-height: inherit;
  overflow: auto;
  border: 0.5px solid var(--border-color);
  border-radius: calc(var(--radius) + var(--spacing-1));
  background: var(--overlay-background);
  forced-color-adjust: none;
  outline: none;
  box-sizing: border-box;
  font: var(--font-size) var(--font-family);
  color: var(--text-color);
}
.react-aria-ListBox:has(.react-aria-ListBoxSection) {
  scroll-padding: 24px;
}
.react-aria-ListBox[data-focus-visible] {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -1px;
}
.react-aria-ListBox[data-empty] {
  align-items: center;
  justify-content: center;
  font-style: italic;
}
.react-aria-ListBox[data-drop-target] {
  outline: 2px solid var(--highlight-background);
  outline-offset: -1px;
  background: var(--highlight-overlay);
}
.react-aria-ListBox .react-aria-DropIndicator[data-drop-target] {
  z-index: 3;
  outline: 1px solid var(--highlight-background);
}
.react-aria-ListBoxSection .react-aria-Header {
  position: sticky;
  top: -0.5px;
  z-index: 2;
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-variation-settings: initial;
  padding: var(--spacing-1) var(--spacing-4);
  background: var(--gray-100);
  border-block: 0.5px solid var(--gray-400);
  cursor: default;
  user-select: none;
  box-shadow: inset 0px 1px 0px white, inset 0px -4px 8px var(--gray-200);
}
.react-aria-ListBoxSection:first-child .react-aria-Header {
  margin-top: -0.5px;
}
.react-aria-ListBoxItem {
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius);
  outline: none;
  cursor: default;
  color: var(--text-color);
  font: var(--font-size) var(--font-family);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--spacing-8);
  box-sizing: border-box;
  position: relative;
  transition-property: background, color, border-radius;
  transition-duration: 200ms;
  -webkit-tap-highlight-color: transparent;
  --border-color: var(--gray-300);
}
.react-aria-ListBoxItem:not(:last-child)::after {
  content: '';
  display: block;
  position: absolute;
}
.react-aria-ListBoxItem[data-pressed] {
  background: var(--highlight-hover);
  border-radius: var(--radius);
}
.react-aria-ListBoxItem[data-focus-visible] {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -2px;
  z-index: 2;
}
.react-aria-ListBoxItem[data-selected] {
  background: var(--highlight-background);
  color: var(--highlight-foreground);
  --border-color: transparent;
}
.react-aria-ListBoxItem[data-selected][data-focus-visible] {
  outline-color: var(--highlight-foreground);
  outline-offset: -4px;
}
.react-aria-ListBoxItem[data-selected][data-pressed] {
  background: var(--highlight-background-pressed);
}
.react-aria-ListBoxItem[data-selected]:has(+ [data-selected]),
.react-aria-ListBoxItem[data-selected]:has(+ .react-aria-DropIndicator + [data-selected]) {
  --border-color: rgba(255, 255, 255, 0.3);
}
.react-aria-ListBoxItem [slot=label] {
  font-weight: 500;
}
.react-aria-ListBoxItem [slot=description] {
  font-size: var(--font-size-sm);
}
.react-aria-ListBoxItem[href] {
  text-decoration: none;
  cursor: pointer;
  -webkit-touch-callout: none;
}
.react-aria-ListBoxItem[data-disabled] {
  color: var(--text-color-disabled);
}
.react-aria-ListBoxItem[data-dragging] {
  opacity: 0.6;
}
.react-aria-ListBoxItem[data-drop-target] {
  outline: 2px solid var(--highlight-background);
  background: var(--highlight-overlay);
}
.react-aria-ListBox[data-layout=stack] {
  display: flex;
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] {
  flex-direction: column;
  width: 250px;
  max-height: 300px;
  min-height: 100px;
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem {
  margin-inline: var(--spacing-1);
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem:where(:nth-child(1 of .react-aria-ListBoxItem)) {
  margin-top: var(--spacing);
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem:where(:nth-last-child(1 of .react-aria-ListBoxItem)) {
  margin-bottom: var(--spacing);
}
[role=presentation] > .react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem {
  margin: 0;
  /* virtualizer */
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem:not(:last-child)::after {
  bottom: 0;
  width: calc(100% - var(--spacing-6));
  border-bottom: 0.5px solid var(--border-color);
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem[data-selected]:has(+ [data-selected]),
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem[data-selected]:has(+ .react-aria-DropIndicator + [data-selected]) {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem[data-selected] + [data-selected],
.react-aria-ListBox[data-layout=stack][data-orientation=vertical] .react-aria-ListBoxItem[data-selected] + .react-aria-DropIndicator + [data-selected] {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] {
  flex-direction: row;
  width: 100%;
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem {
  min-width: max-content;
  margin-block: var(--spacing-1);
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem:nth-child(1 of .react-aria-ListBoxItem) {
  margin-inline-start: var(--spacing);
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem:nth-last-child(1 of .react-aria-ListBoxItem) {
  margin-inline-end: var(--spacing);
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem:not(:last-child)::after {
  inset-inline-end: 0;
  height: calc(100% - var(--spacing-2));
  border-inline-end: 0.5px solid var(--border-color);
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem[data-selected]:has(+ [data-selected]),
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem[data-selected]:has(+ .react-aria-DropIndicator + [data-selected]) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem[data-selected] + [data-selected],
.react-aria-ListBox[data-layout=stack][data-orientation=horizontal] .react-aria-ListBoxItem[data-selected] + .react-aria-DropIndicator + [data-selected] {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.react-aria-ListBox[data-layout=grid] {
  display: grid;
  gap: var(--spacing-1);
  width: fit-content;
  max-width: 100%;
  padding: var(--spacing-1);
}
.react-aria-ListBox[data-layout=grid][data-orientation=vertical] {
  grid-template-columns: 1fr 1fr;
}
.react-aria-ListBox[data-layout=grid][data-orientation=horizontal] {
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: none;
  grid-auto-columns: 160px;
}
.react-aria-ListBoxLoadingIndicator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 100%;
}
.dropdown-listbox {
  display: block;
  max-height: inherit;
  overflow: auto;
  border-radius: inherit;
  forced-color-adjust: none;
  outline: none;
  box-sizing: border-box;
  font: var(--font-size) var(--font-family);
  color: var(--text-color);
}
.dropdown-listbox[data-empty] {
  min-height: var(--spacing-8);
  padding: var(--spacing-2);
}
.dropdown-listbox .react-aria-Header {
  padding-left: var(--spacing-7);
}
.dropdown-item {
  font-size: 1.2rem;
  font-weight: 300;
  padding: 0.6em 0.4em 0.5em 0.4em;
  color: #222;
  box-sizing: border-box;
  border-radius: var(--radius);
  outline: none;
  cursor: default;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms, color 200ms;
}
.dropdown-item[data-selected] {
  background-color: #e6e7e8;
  color: black;
}
.dropdown-item[data-hovered],
.dropdown-item[data-focus-visible] {
  background-color: #123044;
  color: #fff;
}
.dropdown-item [slot=label] {
  font-weight: 300;
}
.dropdown-item [slot=description] {
  font-size: var(--font-size-sm);
}
.dropdown-item[data-disabled] {
  color: var(--text-color-disabled);
}
.dropdown-item[href] {
  text-decoration: none;
  cursor: pointer;
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
.react-aria-Select {
  color: var(--text-color);
  position: relative;
  width: 100%;
  /* Trigger button — overrides button-base so the Select renders as a Spry
     form field rather than a tint-colored button. Direct property values
     (not the --button-* custom-property cascade) keep [data-variant=primary]
     in utilities.less from winning when --button-color is overridden. */
  /* Hover divider — a 1px full-height line just left of the caret,
   * matching `.dropdown-button:hover { border-left: 1px solid #bbbdbf }`
   * in spry-nolayout.css:12442. Always present as a transparent pseudo
   * so the alpha-only transition avoids any flash, similar to the date
   * picker's icon-button divider. */
  /* Hide the the hover divider when the Select is disabled */
}
.react-aria-Select .react-aria-Button {
  background: var(--field-background);
  color: var(--field-text-color);
  border: 1px solid transparent;
  box-shadow: none;
  /* position: relative so the absolutely-positioned caret icon below
     * anchors to the button (not the Select wrapper). */
  position: relative;
  /* Match Spry's old .dropdown-input: 1.2em font, em-relative
     * padding (vertical 0.7em, left 0.6em, right 1.5em reserves room
     * for the caret), auto height so the box grows to fit the padded
     * content (same outer height as the old picker). */
  font-size: 1.2em;
  line-height: 1.35;
  height: auto;
  padding: 0.7em 1.5em 0.7em 0.6em;
  width: 100%;
  min-width: 0;
  font-weight: normal;
  text-align: left;
  transition: border-color 200ms;
  /* Match Spry's old focus style: the browser-default `auto` outline
     * halo at --focus-ring-color, with the field's resting (transparent)
     * border untouched. .button-base's `&:where([data-focus-visible])`
     * rule would otherwise paint a 2px solid inset blue outline; this
     * higher-specificity rule overrides it. */
}
.react-aria-Select .react-aria-Button:where([data-hovered]) {
  background: var(--field-background);
  border-color: var(--border-color);
}
.react-aria-Select .react-aria-Button[data-focused] {
  outline-style: auto;
  outline-color: var(--focus-ring-color);
  outline-offset: 0;
}
.react-aria-Select .react-aria-Button:where([data-pressed]) {
  scale: 1;
}
.react-aria-Select .react-aria-Button:where([data-disabled]) {
  background: var(--field-background);
  color: var(--text-color-disabled);
  border-color: transparent;
  cursor: default;
}
.react-aria-Select .react-aria-SelectValue {
  flex: 1;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.react-aria-Select .react-aria-SelectValue[data-placeholder] {
  color: var(--text-color-placeholder);
  font-weight: normal;
}
.react-aria-Select .react-aria-SelectValue [slot=description] {
  display: none;
}
.react-aria-Select .react-aria-Button > span:not(.react-aria-SelectValue) {
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #a6a8ab;
  transition: color 200ms;
}
.react-aria-Select .react-aria-Button[data-hovered] > span:not(.react-aria-SelectValue) {
  color: #5e5f61;
}
.react-aria-Select .react-aria-Button::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.3em;
  width: 1px;
  background-color: rgba(187, 189, 191, 0);
  transition: background-color 200ms;
  pointer-events: none;
}
.react-aria-Select .react-aria-Button[data-hovered]::before {
  background-color: #bbbdbf;
}
.react-aria-Select .react-aria-Button[data-disabled] > span:not(.react-aria-SelectValue),
.react-aria-Select .react-aria-Button[data-disabled]::before {
  display: none;
}
.react-aria-Select .lucide-chevron-down {
  margin-inline-start: var(--spacing-2);
  color: var(--text-color);
  flex-shrink: 0;
}
.select-popover[data-trigger=Select] {
  /* Match the trigger width, but never shrink narrower than the widest option — otherwise a
   * select with a small trigger (e.g. the month/year dropdowns in the calendar header) would
   * wrap option text like "2026" or "September" onto multiple lines. For normal field-width
   * selects the trigger is already wider than the content, so this changes nothing. */
  width: var(--trigger-width);
  min-width: max-content;
  padding: 1px;
  /* Cap the visible options at ~21em via the listbox. The popover
   * receives an inline max-height from react-aria (viewport-aware),
   * which can't be overridden in CSS without !important. .dropdown-listbox
   * defaults to `max-height: inherit`, so a value set here on the
   * listbox lets it shrink the listbox, which transitively shrinks the
   * popover (which sizes to content). */
}
.select-popover[data-trigger=Select] .dropdown-listbox {
  max-height: 21em;
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
@layer utilities {
  /* Flat button utility — Spry-style: solid background, no gradients or
   * specular highlights, transparent border by default. Hover and pressed
   * darken the background; pressed adds Spry's subtle inset depression. */
  .button-base {
    --button-color: var(--tint);
    --button-background: oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h);
    --button-text: oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h);
    --button-border: transparent;
    --button-border-size: 1px;
    background: var(--button-background);
    color: var(--button-text);
    border: var(--button-border-size) solid var(--button-border);
    box-shadow: none;
    outline: none;
    transition-property: background, color, border-color, box-shadow;
    transition-duration: 200ms;
    forced-color-adjust: none;
    -webkit-tap-highlight-color: transparent;
  }
  .button-base:where([data-hovered]) {
    --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);
  }
  .button-base:where([data-pressed]) {
    --button-background: oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), inset 0 0 6px rgba(0, 0, 0, 0.2);
  }
  .button-base:where([data-focus-visible]) {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .button-base:where([data-variant=primary]) {
    --button-color: var(--orange);
    /* Spry @attention #bf5700 */
    --button-background: var(--button-color);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-variant=primary]):where([data-hovered]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.05) c h);
  }
  .button-base:where([data-variant=primary]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) calc(l - 0.1) c h);
  }
  .button-base:where([data-variant=secondary]) {
    --button-color: var(--gray);
  }
  .button-base:where([data-variant=quiet]) {
    --button-background: transparent;
    --button-text: var(--text-color);
  }
  .button-base:where([data-variant=quiet]):where([data-hovered], [data-pressed]) {
    --button-background: var(--tint-200);
    --button-text: var(--tint-1400);
  }
  .button-base:where([data-selected]) {
    --button-background: oklch(from var(--button-color) 55% c h);
    --button-text: var(--highlight-foreground);
    --button-border: transparent;
  }
  .button-base:where([data-selected]):where([data-pressed]) {
    --button-background: oklch(from var(--button-color) 50% c h);
  }
  .button-base:where([data-disabled]) {
    cursor: not-allowed;
    box-shadow: none;
  }
  /* Flat indicator utility — solid white field with a 1px border, no inner
   * gloss or drop shadow. Selected fills with the highlight color. */
  .indicator {
    --indicator-color: var(--gray);
    --indicator-background: var(--field-background);
    --indicator-border: var(--border-color-hover);
    background: var(--indicator-background);
    box-shadow: inset 0 0 0 1px var(--indicator-border);
    transition: background 200ms, box-shadow 200ms;
    will-change: scale;
  }
  .indicator[data-pressed],
  [data-pressed] .indicator {
    scale: 0.9;
  }
  [data-selected] > .indicator,
  [data-indeterminate] > .indicator {
    --indicator-color: var(--highlight-background);
    --indicator-background: var(--indicator-color);
    --indicator-border: var(--indicator-background);
  }
  .indicator[data-invalid],
  [data-invalid] > .indicator {
    --indicator-color: var(--invalid-color);
    --indicator-color: var(--pink);
  }
  .indicator[data-focus-visible],
  [data-focus-visible] > .indicator {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
  }
  .indicator[data-disabled],
  [data-disabled] > .indicator {
    background: var(--field-background);
    box-shadow: inset 0 0 0 1px var(--border-color-disabled);
  }
  /* Flat inset utility — Spry-style fields: white background with a
   * transparent border that becomes visible on hover and switches to the
   * link color on focus. No inner shadow. */
  .inset {
    --inset-background: var(--field-background);
    --inset-border: transparent;
    --inset-border-size: 1px;
    background: var(--inset-background);
    box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border);
    transition: box-shadow 200ms;
    forced-color-adjust: none;
    /* Required listed first so the invalid / warning rules below override
     * --inset-indicator-color when more than one state is active. Note that
     * required doesn't change the --inset-border because required is just the triangle without the border */
    /* Top-left corner indicator. Mask provides the triangle shape;
     * background-color (via --inset-indicator-color) provides the fill,
     * so the indicator follows the same theme tokens as the border. */
  }
  .inset:where([data-hovered], [data-pressed]) {
    --inset-border: var(--border-color);
  }
  .inset:where([data-focus-within], [data-focused]) {
    --inset-border: var(--link-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required]) {
    position: relative;
  }
  .inset:where([data-required]) {
    --inset-indicator-color: var(--required-color);
  }
  .inset:where([data-invalid]) {
    --inset-border: var(--invalid-color);
    --inset-indicator-color: var(--invalid-color);
  }
  .inset:where([data-warning]) {
    --inset-border: var(--warning-color);
    --inset-indicator-color: var(--warning-color);
  }
  .inset:where([data-invalid], [data-warning], [data-required])::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0.7em;
    height: 0.7em;
    background-color: var(--inset-indicator-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%207%207'%3E%3Cpolygon%20points%3D'0%2C7%200%2C0%207%2C0'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%207%207'%3E%3Cpolygon%20points%3D'0%2C7%200%2C0%207%2C0'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") no-repeat top left / 100% 100%;
    pointer-events: none;
  }
  .inset:where([data-disabled]) {
    --inset-background: transparent;
    --inset-border: transparent;
  }
  .inset.track {
    --inset-background: var(--gray-200);
    --inset-border: var(--gray-400);
  }
}
.react-aria-Calendar {
  width: calc(var(--spacing-9) * 7);
  max-width: 100%;
  container-type: inline-size;
  color: var(--text-color);
  font: var(--font-size) var(--font-family);
}
.react-aria-Calendar header {
  display: flex;
  gap: var(--spacing-1);
  align-items: center;
  margin: 0 var(--spacing-1) var(--spacing-4) var(--spacing-1);
  /* For selects within the calendar, add a border so the select is visible against the calendar background */
  /* Remove border on hover */
}
.react-aria-Calendar header .react-aria-Heading {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: var(--font-size-lg);
}
.react-aria-Calendar header .react-aria-Select {
  border: 1px solid var(--border-color);
  /* Shrink the month/year select buttons to roughly half the normal Select height */
}
.react-aria-Calendar header .react-aria-Select .react-aria-Button {
  font-size: 1em;
  padding: 0.2em 1.2em 0.2em 0.4em;
}
.react-aria-Calendar header [slot="previous"]:hover,
.react-aria-Calendar header [slot="previous"][data-hovered],
.react-aria-Calendar header [slot="next"]:hover,
.react-aria-Calendar header [slot="next"][data-hovered] {
  border: 0 none;
}
.react-aria-Calendar .react-aria-CalendarGrid {
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}
.react-aria-Calendar [slot=errorMessage] {
  font: var(--font-size-sm) var(--font-family);
  color: var(--invalid-color);
}
.react-aria-CalendarHeaderCell {
  /* From tempus-dominus .dow header style. This is the Sun/Mon/Tues header row on the calendar */
  font-size: var(--font-size-sm);
  font-weight: 900;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
}
/* Month/year mode: a 4-column grid of month buttons shown in place of the day grid. */
.react-aria-MonthGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-1);
  width: 100%;
}
/* Most styling for the calendar cells is comming whether they're for a regular calendar grid or a month grid */
.react-aria-CalendarCell,
.react-aria-MonthCell {
  --gap: var(--spacing-1);
  width: calc((100cqw / 7) - var(--gap));
  aspect-ratio: 1;
  margin: calc(var(--gap) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size);
  text-align: center;
  border-radius: 9999px;
  cursor: pointer;
  forced-color-adjust: none;
  transition: scale 200ms;
  -webkit-tap-highlight-color: transparent;
  /* Anchor the today ring (::before) below. */
  position: relative;
  /* "Today" indicator: a faint circle inside the cell, matching the legacy Tempus-Dominus picker.
     Drawn as an inset ::before ring so it layers over any selected background. */
  /* When today is also selected, lighten the ring so it stays visible on the selected background. */
}
@media (min-resolution: 200dpi) {
  @container (width < 300px) {
    .react-aria-CalendarCell,
    .react-aria-MonthCell {
      --gap: 0px;
    }
  }
}
.react-aria-CalendarCell[data-outside-month],
.react-aria-MonthCell[data-outside-month] {
  opacity: 0.4;
}
.react-aria-CalendarCell[data-selected],
.react-aria-MonthCell[data-selected] {
  background: var(--selected-color);
}
.react-aria-CalendarCell[data-pressed],
.react-aria-MonthCell[data-pressed] {
  scale: 0.9;
}
.react-aria-CalendarCell[data-unavailable],
.react-aria-MonthCell[data-unavailable],
.react-aria-CalendarCell[data-disabled],
.react-aria-MonthCell[data-disabled] {
  text-decoration: line-through;
  cursor: not-allowed;
}
.react-aria-CalendarCell[data-invalid],
.react-aria-MonthCell[data-invalid] {
  --button-color: var(--invalid-color);
}
.react-aria-CalendarCell[data-today]::before,
.react-aria-MonthCell[data-today]::before {
  content: '';
  position: absolute;
  inset: 0.35em;
  border: 1px solid rgba(196, 89, 0, 0.3);
  border-radius: 9999px;
  pointer-events: none;
}
.react-aria-CalendarCell[data-today][data-selected]::before,
.react-aria-MonthCell[data-today][data-selected]::before {
  border-color: rgba(255, 255, 255, 0.3);
}
/* Styling overrides just for the month cell */
.react-aria-MonthCell {
  width: auto;
  aspect-ratio: auto;
  margin: 0;
  padding: var(--spacing-2) 0;
}
.react-aria-MonthCell[data-disabled] {
  opacity: 0.4;
}

/* colors */
:root {
  /* Change this variable to set the theme color for all components. */
  /* Aligned with the Spry component library palette. */
  --tint: var(--spry);
  /* Seed colors for the OKLCH lightness/chroma scale.
   * Where Spry has a status equivalent, the seed uses Spry's hue/chroma so
   * derived shades (--red-100 … --green-1600 via --tint scale) stay on-brand. */
  --gray: oklch(0.5 0 0);
  --red: oklch(0.508 0.219 27.5);
  --orange: oklch(0.566 0.155 49.2);
  --yellow: oklch(0.77 0.17 63);
  --turquoise: oklch(0.5 0.081146 205.114);
  --cyan: oklch(0.55 0.119 220);
  --green: oklch(0.554 0.155 131);
  --blue: oklch(0.49 0.184 257);
  --indigo: oklch(0.42 0.107 248);
  --purple: oklch(0.4 0.18 305);
  --pink: oklch(0.6 0.177717 347.813);
  --spry: var(--blue);
  /* Spry brand (Spry @link-color) */
  /* Spry brand accents — not part of the tint scale, used directly. */
  --spry-heading: #123044;
  --spry-complement: #3f5978;
  --spry-save: #C45900;
  /** tint color scale */
  --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h);
  --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h);
  --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h);
  --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h);
  --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h);
  --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h);
  --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h);
  --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h);
  --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h);
  --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h);
  --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h);
  --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h);
  --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h);
  --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h);
  --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h);
  --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h);
  /* gray scale */
  --gray-100: oklch(from var(--gray) var(--lightness-100) c h);
  --gray-200: oklch(from var(--gray) var(--lightness-200) c h);
  --gray-300: oklch(from var(--gray) var(--lightness-300) c h);
  --gray-400: oklch(from var(--gray) var(--lightness-400) c h);
  --gray-500: oklch(from var(--gray) var(--lightness-500) c h);
  --gray-600: oklch(from var(--gray) var(--lightness-600) c h);
  --gray-700: oklch(from var(--gray) var(--lightness-700) c h);
  --gray-800: oklch(from var(--gray) var(--lightness-800) c h);
  --gray-900: oklch(from var(--gray) var(--lightness-900) c h);
  --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h);
  --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h);
  --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h);
  --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h);
  --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h);
  --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h);
  --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h);
}
/* light mode colors */
:root {
  --background-color: #f1f1f0;
  --gray-50: #fff;
  --lightness-100: 98.1187%;
  --lightness-200: 95.2045%;
  --lightness-300: 91.1434%;
  --lightness-400: 85.1751%;
  --lightness-500: 79.1773%;
  --lightness-600: 72.3297%;
  --lightness-700: 67.0121%;
  --lightness-800: 62.3039%;
  --lightness-900: 57.9699%;
  --lightness-1000: 51.9076%;
  --lightness-1100: 46.9058%;
  --lightness-1200: 41.0821%;
  --lightness-1300: 35.3616%;
  --lightness-1400: 29.6725%;
  --lightness-1500: 24.5366%;
  --lightness-1600: 16.6959%;
  /* lower chroma at low lightness levels */
  --chroma-100: calc(l * c * 0.5);
  --chroma-200: calc(l * c * 0.6);
  --chroma-300: calc(l * c * 0.7);
  --chroma-400: calc(l * c * 0.8);
  --chroma-500: calc(l * c * 0.9);
  --chroma-600: c;
  --chroma-700: c;
  --chroma-800: c;
  --chroma-900: c;
  --chroma-1000: c;
  --chroma-1100: c;
  --chroma-1200: c;
  --chroma-1300: c;
  --chroma-1400: c;
  --chroma-1500: c;
  --chroma-1600: c;
  --highlight-hover: rgba(0, 0, 0, 0.07);
  --highlight-pressed: rgba(0, 0, 0, 0.15);
  --overlay-background: var(--gray-50);
  --overlay-border: rgba(0, 0, 0, 0.06);
  --popover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
/* Semantic colors */
:root {
  --focus-ring-color: #80bcff;
  /* Spry calls this @link-color-reverse but the focus style usage is hard-coded  */
  --text-color: #5e5f61;
  --text-color-hover: #231f20;
  --text-color-disabled: var(--gray-600);
  --text-color-placeholder: #bbbdbf;
  --link-color: #1464bb;
  --link-color-secondary: #5e5f61;
  --link-color-pressed: #105198;
  --border-color: #d0d2d3;
  --border-color-hover: #a3a5a8;
  --border-color-disabled: var(--gray-300);
  --field-text-color: #231f20;
  --button-background: var(--tint-100);
  --button-background-pressed: var(--tint-200);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: oklch(from var(--tint) 55% c h);
  --highlight-background-pressed: oklch(from var(--tint) 50% c h);
  --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
  --highlight-foreground: white;
  --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
  --invalid-color: #c00;
  --warning-color: #D7BB15;
  --required-color: #C45900;
  /* Matches Spry's `.required` background-image fill */
  --field-background: #fff;
  --selected-color: #3f5978;
  /* Selected calendar date color, from --td-active-bg  */
}
/* typography and spacing scale */
:root {
  --font-size: 11px;
  --font-size-sm: 0.75rem;
  /* 12px */
  --font-size-lg: 1rem;
  /* 16px */
  --font-family: "museo-sans", arial, sans-serif;
  /* Spry uses squared corners. Some components hard-code a really big value for a circle/pill shape. */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --spacing: 0.25rem;
  /* 4px */
  --spacing-1: var(--spacing);
  --spacing-2: calc(2 * var(--spacing));
  --spacing-3: calc(3 * var(--spacing));
  --spacing-4: calc(4 * var(--spacing));
  --spacing-5: calc(5 * var(--spacing));
  --spacing-6: calc(6 * var(--spacing));
  --spacing-7: calc(7 * var(--spacing));
  --spacing-8: calc(8 * var(--spacing));
  --spacing-9: calc(9 * var(--spacing));
  --spacing-10: calc(10 * var(--spacing));
}
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
  :root {
    --spacing: calc(0.25rem * 1.25);
    --font-size: 1.0625rem;
    /* 17px */
    --font-size-sm: 0.9375rem;
    /* 15px */
    --font-size-lg: 1.25rem;
    /* 20px */
  }
}
/* Basic font scaling like Spry does */
@media (min-width: 1062px) {
  :root {
    --font-size: 15px;
  }
}
@media (min-width: 1420px) {
  :root {
    --font-size: 17px;
  }
}
@media (min-width: 1930px) {
  :root {
    --font-size: 19px;
  }
}
.react-aria-DatePicker {
  max-width: 100%;
  /* Hide the calendar icon when readonly, which is what Spry does. In icon-only mode the button
   * is the entire control, so hiding it would leave nothing behind — react-aria already sets
   * isDisabled on the button for readonly, so it stays rendered but inert (and dimmed below). */
  /* Icon-only mode (the `iconOnly` prop): the DateInput isn't rendered, so the calendar button
   * is the whole control. Undo the field-shaped layout above — the Group shrinks to the button
   * and the button leaves the absolute positioning that made it overlay the input's right edge.
   *
   * The target look is Spry's standard icon button (`.spr-ico-button` in Buttons/iconButton.less):
   * link-colored, 1.5rem, 2em wide. */
}
.react-aria-DatePicker .react-aria-Group {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: var(--spacing-8);
  /* Anchor the absolutely-positioned .field-Button below. */
  position: relative;
}
.react-aria-DatePicker .react-aria-DateInput {
  flex: 1;
  min-width: 0;
  /* Reserves space for the absolute positioned button that opens the popover */
  padding-right: 1.8em;
}
.react-aria-DatePicker[data-readonly] .react-aria-Group:not([data-icon-only]) .field-Button {
  display: none;
}
.react-aria-DatePicker .field-Button {
  /* Remove background from button and use parent background */
  background: unset;
  color: var(--text-color);
  /* Position like Spry's old datepickerbutton: absolute on the right
     * of the input, full height, sized by icon + padding rather than
     * by aspect-ratio. Removing the button from flex flow lets the
     * DateInput take the full Group width (no 3px overflow).
     *
     * Inset by the rendered border width to sit the button inside the
     * DateInput's border. Chrome snaps 1px borders to ~1 device pixel
     * (0.667 CSS px at DPR 1.5) but does NOT snap positioning offsets,
     * so we use the post-snap value 0.667px directly to match. */
  position: absolute;
  right: 0.667px;
  top: 0.667px;
  height: calc(100% - 1.334px);
  width: 2em;
  margin-left: 0;
  aspect-ratio: auto;
  padding: 0 0.52em 0 0.5em;
  /* Reserve space for the hover separator  */
  border-left: 1px solid rgba(187, 189, 191, 0);
  transition: border-color 200ms;
  /* Weirdness with Spry's global styles which styles all 4 borders on `button:hover`
     * Currently using `[data-hovered]` to beat that specificity and only set the left border,
     * but it seems like there should be a better way */
  /* Match the DateInput's inset focus ring (see .react-aria-DateInput.inset
     * [data-focus-within] in dateField.less) instead of the default outside halo
     * from form.less's .field-Button rule. outline-offset:0 (vs 2px) keeps the ring
     * at the field's edge so a focused calendar button reads as part of the field. */
}
.react-aria-DatePicker .field-Button[data-hovered] {
  border-block: 0 none;
  border-right: 0 none;
  border-left-color: #bbbdbf;
}
.react-aria-DatePicker .field-Button[data-focus-visible] {
  outline-style: auto;
  outline-color: var(--focus-ring-color);
  outline-offset: 0;
}
.react-aria-DatePicker .react-aria-Group[data-icon-only] {
  display: inline-flex;
  width: auto;
  min-height: 0;
  /* Nothing is absolutely positioned any more. */
  position: static;
  /* With no input there's nowhere to put the invalid/warning border, so the icon carries the
     * state instead. The messages themselves are still in the group's `title`.
     * (`data-invalid` comes from react-aria's Group; `data-warning` we set ourselves.) */
}
.react-aria-DatePicker .react-aria-Group[data-icon-only] .field-Button {
  position: static;
  right: auto;
  top: auto;
  height: auto;
  width: 2em;
  font-size: 1.5rem;
  padding: 0;
  color: var(--link-color);
  /* The hover separator only makes sense against the input's edge. */
  border-left: 0 none;
  transition: color 200ms;
  /* The inset ring above exists to line up with the DateInput's border, which is gone here,
       * so go back to form.less's standard outside halo. */
}
.react-aria-DatePicker .react-aria-Group[data-icon-only] .field-Button[data-hovered],
.react-aria-DatePicker .react-aria-Group[data-icon-only] .field-Button[data-pressed] {
  border-left: 0 none;
  color: var(--link-color-pressed);
}
.react-aria-DatePicker .react-aria-Group[data-icon-only] .field-Button[data-disabled] {
  color: var(--text-color-disabled);
}
.react-aria-DatePicker .react-aria-Group[data-icon-only] .field-Button[data-focus-visible] {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.react-aria-DatePicker .react-aria-Group[data-icon-only][data-invalid] .field-Button {
  color: var(--invalid-color);
}
.react-aria-DatePicker .react-aria-Group[data-icon-only][data-warning] .field-Button {
  color: var(--warning-color);
}
.react-aria-Popover[data-trigger="DatePicker"] {
  /* disable the inherited drop-shadow */
  filter: none;
  /* shadow from tempus-dominus */
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  /* Width from dateField.less */
}
.react-aria-Popover[data-trigger="DatePicker"] .react-aria-Calendar {
  width: 20rem;
}
.react-aria-DatePicker .react-aria-Group.disabled-more-visible {
  --text-color-disabled: #3f5978;
}