/* Controls from inspyre-elevator 9e63fc6; see DESIGN.md. */

.inventory-filterbar .app-select-control { height: 42px; border-radius: 10px; background: rgb(var(--workspace)); box-shadow: none; }
.inventory-form-section .grid-form :is(input, select, textarea, .app-select-control) { border: 1px solid rgb(var(--line)); border-radius: 11px; background: rgb(var(--workspace)); box-shadow: none; }
.inventory-form-section .grid-form :is(input, select, .app-select-control) { min-height: 44px; }
.registry-search-field input,
.registry-page .app-select-control {
  width: 100%;
  height: 42px;
  border: 1px solid rgb(var(--line));
  border-radius: 12px;
  background: rgb(var(--workspace));
  color: rgb(var(--ink));
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
  outline: none;
}
.registry-search-field input:hover,
.registry-page .app-select-control:hover { border-color: rgb(var(--secondary) / .62); }
.registry-search-field input:focus,
.registry-page .app-select-control:focus {
  border-color: var(--registry-blue);
  box-shadow: 0 0 0 3px rgb(var(--acid) / .12);
}
.registry-select-field > select:not(.app-native-control) {
  width: 100%;
  height: 42px;
  padding: 0 34px 0 13px;
  border: 1px solid rgb(var(--line));
  border-radius: 12px;
  background: rgb(var(--workspace));
  color: rgb(var(--ink));
  font: inherit;
  font-size: 12px;
  font-weight: 650;
}
.registry-select-field .app-select { display: block; width: 100%; }
.registry-select-field .app-select-control { padding-right: 36px; padding-left: 13px; text-align: left; }
.registry-page .app-select-chevron { right: 12px; }
.registry-page .app-select-popover { border-color: rgb(var(--line)); border-radius: 12px; box-shadow: 0 16px 40px rgb(0 0 0 / .15); }
.technical-panel .app-select, .technical-panel .app-date-field { margin-top: 0; }
.technical-panel .app-select-control, .technical-panel .app-date-input, .technical-panel .app-date-toggle {
  min-height: 48px; border-color: rgb(var(--line-strong) / .72); background: rgb(var(--inset) / .42);
  font-size: 13px; box-shadow: inset 0 1px 2px rgb(var(--ink) / .045), 0 1px 0 rgb(var(--workspace) / .8);
}
.technical-panel .app-date-input { border-right: 0; }
.technical-panel .app-date-toggle { border-left-color: rgb(var(--line-strong) / .72); }
.technical-panel .app-select-control:hover, .technical-panel .app-date-input:hover, .technical-panel .app-date-toggle:hover {
  border-color: rgb(var(--info-solid) / .48); background: rgb(var(--inset) / .56);
}
.technical-panel .app-select-control:focus-visible, .technical-panel .app-date-input:focus-visible, .technical-panel .app-date-toggle:focus-visible {
  border-color: rgb(var(--info-solid) / .82); background: rgb(var(--workspace));
  box-shadow: 0 0 0 3px rgb(var(--info-solid) / .14);
}
.app-native-control {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  border: 0 !important; white-space: nowrap !important;
}
.app-select, .app-date-field { position: relative; display: block; width: 100%; margin-top: 5px; letter-spacing: 0; text-transform: none; }
.app-select-control {
  width: 100%; min-height: 44px; padding: 9px 42px 9px 13px; border: 1px solid transparent;
  border-radius: 14px; background: rgb(var(--inset) / .72); color: rgb(var(--ink));
  font: inherit; font-size: 12px; font-weight: 650; line-height: 1.3; text-align: left;
  box-shadow: var(--shadow-input); outline: none; cursor: pointer;
}
.app-select-search { cursor: text; }
.app-select-control:hover { border-color: rgb(var(--line)); background: rgb(var(--inset) / .92); }
.app-select-control:focus-visible, .app-date-input:focus-visible, .app-date-toggle:focus-visible {
  border-color: rgb(var(--info-solid) / .65); outline: none;
  box-shadow: 0 0 0 3px rgb(var(--info-solid) / .12);
}
.app-select-control[aria-invalid="true"], .app-date-input[aria-invalid="true"] {
  border-color: rgb(var(--danger-solid) / .65);
  box-shadow: 0 0 0 2px rgb(var(--danger-solid) / .20), var(--shadow-input);
}
.app-select-chevron { position: absolute; z-index: 1; top: 50%; right: 14px; display: grid; width: 18px; height: 18px; place-items: center; color: rgb(var(--ink)); pointer-events: none; transform: translateY(-50%); transition: color 180ms ease, transform 180ms ease; }
.app-select-chevron svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-select.is-open .app-select-chevron { color: rgb(var(--info-solid)); transform: translateY(-50%) rotate(180deg); }
.app-control-popover {
  position: absolute; z-index: 45; top: calc(100% + 7px); right: 0; left: 0;
  border: 1px solid rgb(var(--line-soft)); border-radius: 15px;
  background: rgb(var(--elevated)); box-shadow: var(--shadow-lift);
}
.app-control-popover[hidden] { display: none; }
.app-select-popover { max-height: 270px; padding: 7px; overflow-y: auto; overscroll-behavior: contain; }
.app-select-popover.is-floating { position: fixed; z-index: 90; }
.app-select-option {
  display: block; width: 100%; min-height: 39px; padding: 9px 11px; border: 0;
  border-radius: 10px; background: transparent; color: rgb(var(--ink));
  font: inherit; font-size: 11px; font-weight: 650; line-height: 1.35; text-align: left; cursor: pointer;
}
.app-select-option[hidden] { display: none; }
.app-select-option:hover, .app-select-option.is-active { background: rgb(var(--inset)); outline: none; }
.app-select-option[aria-selected="true"] { background: rgb(var(--info-solid)); color: rgb(var(--contrast-ink)); font-weight: 800; }
.app-select-option[aria-selected="true"]::after { content: '✓'; float: right; margin-left: 10px; }
.app-select-empty { display: block; padding: 18px 12px; color: rgb(var(--tertiary)); font-size: 10px; text-align: center; }
.app-select-empty[hidden] { display: none; }
.app-date-field { display: grid; grid-template-columns: minmax(0, 1fr) 44px; }
.app-date-input {
  width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid transparent;
  border-radius: 14px 0 0 14px !important; background: rgb(var(--inset) / .72); color: rgb(var(--ink));
  font: inherit; font-size: 12px; font-weight: 650; box-shadow: var(--shadow-input); outline: none;
}
.app-date-toggle {
  display: grid; min-height: 44px; place-items: center; border: 1px solid transparent; border-left-color: rgb(var(--line));
  border-radius: 0 14px 14px 0; background: rgb(var(--inset) / .72); color: rgb(var(--secondary));
  box-shadow: var(--shadow-input); cursor: pointer;
}
.app-date-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-calendar { right: 0; left: auto; width: min(320px, calc(100vw - 36px)); padding: 11px; }
.app-calendar-head { display: grid; grid-template-columns: 36px 1fr 36px; gap: 5px; align-items: center; }
.app-calendar-head strong { font-size: 12px; text-align: center; text-transform: capitalize; }
.app-calendar-head button, .app-calendar-footer button {
  min-height: 34px; padding: 0 9px; border: 0; border-radius: 10px; background: transparent;
  color: rgb(var(--ink)); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer;
}
.app-calendar-head button:hover, .app-calendar-head button:focus-visible,
.app-calendar-footer button:hover, .app-calendar-footer button:focus-visible { background: rgb(var(--inset)); outline: none; }
.app-calendar-weekdays, .app-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.app-calendar-weekdays { margin: 10px 0 5px; color: rgb(var(--tertiary)); font-size: 8px; font-weight: 800; text-align: center; }
.app-calendar-grid button {
  display: grid; min-width: 0; aspect-ratio: 1; place-items: center; border: 0; border-radius: 9px;
  background: transparent; color: rgb(var(--ink)); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer;
}
.app-calendar-grid button:hover, .app-calendar-grid button:focus-visible { background: rgb(var(--inset)); outline: 2px solid rgb(var(--acid) / .55); outline-offset: -2px; }
.app-calendar-grid button.is-outside { color: rgb(var(--muted)); }
.app-calendar-grid button.is-today { box-shadow: inset 0 0 0 1px rgb(var(--info-solid) / .55); color: rgb(var(--info-ink)); }
.app-calendar-grid button.is-selected { background: rgb(var(--contrast)); color: rgb(var(--contrast-ink)); box-shadow: none; }
.app-calendar-footer { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(var(--line-soft)); }
.app-calendar-footer button:last-child { color: rgb(var(--info-ink)); }
@media (max-width: 680px) {
  .app-calendar { right: auto; left: 0; }
}
.route-day-commandbar .route-day-filterbar :is(.app-select, .app-date-field) { margin-top: 0; }
.route-day-commandbar .route-day-filterbar :is(.app-select-control, .app-date-input, .app-date-toggle) {
  height: 40px;
  min-height: 40px;
  border-color: rgb(var(--line-soft));
  background: rgb(var(--inset) / .48);
  box-shadow: none;
}
.route-day-commandbar .route-day-filterbar .app-date-input { border-radius: 9px 0 0 9px !important; }
.route-day-commandbar .route-day-filterbar .app-date-toggle { border-radius: 0 9px 9px 0; }
.route-day-commandbar .route-day-filterbar .app-select-control {
  overflow: hidden;
  border-radius: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-select-create { display: block; width: calc(100% - 12px); margin: 6px; padding: 11px 12px; border: 1px dashed rgb(var(--acid) / .6); border-radius: 10px; background: rgb(var(--acid) / .07); color: rgb(var(--acid)); text-align: left; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.app-select-create[hidden] { display: none; }
.customer-record-form .app-select-control,
.customer-record-form .app-date-input,
.customer-record-form .app-date-toggle {
  border: 1px solid rgb(var(--line));
  background: rgb(var(--workspace));
  box-shadow: none;
}
.customer-record-form .grid-form input:not([type="checkbox"]):not([type="radio"]):hover,
.customer-record-form .grid-form select:hover,
.customer-record-form .grid-form textarea:hover,
.customer-record-form .app-select-control:hover,
.customer-record-form .app-date-input:hover,
.customer-record-form .app-date-toggle:hover {
  border-color: rgb(var(--line-strong));
  background: rgb(var(--workspace));
}
.customer-record-form .grid-form input:not([type="checkbox"]):not([type="radio"]):focus,
.customer-record-form .grid-form select:focus,
.customer-record-form .grid-form textarea:focus,
.customer-record-form .app-select-control:focus-visible,
.customer-record-form .app-date-input:focus-visible,
.customer-record-form .app-date-toggle:focus-visible {
  border-color: rgb(var(--info-solid));
  background: rgb(var(--workspace));
  box-shadow: 0 0 0 3px rgb(var(--info-solid) / .14);
}
.customer-record-form .app-control-popover,
.customer-record-form .contact-row,
.customer-record-form .mailing-address-fields { background: rgb(var(--workspace)); }
.customer-record-form .app-select-option:hover,
.customer-record-form .app-select-option.is-active { background: rgb(var(--info-solid) / .07); }
:is(.record-form[data-entity="customer"], .record-form[data-entity="building"], .record-form[data-entity="elevator"]) :is(.app-select-control, .app-date-input, .app-date-toggle) {
  min-height: 46px; border-color: rgb(var(--line)); background: rgb(var(--workspace));
  color: rgb(var(--ink)); box-shadow: none;
}
:is(.record-form[data-entity="customer"], .record-form[data-entity="building"], .record-form[data-entity="elevator"]) .grid-form input:not([type="checkbox"]):not([type="radio"]):hover,
:is(.record-form[data-entity="customer"], .record-form[data-entity="building"], .record-form[data-entity="elevator"]) .grid-form select:hover,
:is(.record-form[data-entity="customer"], .record-form[data-entity="building"], .record-form[data-entity="elevator"]) .grid-form textarea:hover,
:is(.record-form[data-entity="customer"], .record-form[data-entity="building"], .record-form[data-entity="elevator"]) :is(.app-select-control, .app-date-input, .app-date-toggle):hover {
  border-color: rgb(var(--line-strong)); background: rgb(var(--workspace));
}
:is(.record-form[data-entity="customer"], .record-form[data-entity="building"], .record-form[data-entity="elevator"]) .grid-form input:not([type="checkbox"]):not([type="radio"]):focus,
:is(.record-form[data-entity="customer"], .record-form[data-entity="building"], .record-form[data-entity="elevator"]) .grid-form select:focus,
:is(.record-form[data-entity="customer"], .record-form[data-entity="building"], .record-form[data-entity="elevator"]) .grid-form textarea:focus,
:is(.record-form[data-entity="customer"], .record-form[data-entity="building"], .record-form[data-entity="elevator"]) :is(.app-select-control, .app-date-input, .app-date-toggle):focus-visible {
  border-color: rgb(var(--info-solid)); background: rgb(var(--workspace));
  box-shadow: 0 0 0 3px rgb(var(--info-solid) / .14);
}
:is(.record-form[data-entity="customer"], .record-form[data-entity="building"], .record-form[data-entity="elevator"]) .app-control-popover {
  background: rgb(var(--workspace));
}
:is(.record-form[data-entity="customer"], .record-form[data-entity="building"], .record-form[data-entity="elevator"]) .app-select-option:is(:hover, .is-active) {
  background: rgb(var(--info-solid) / .07);
}
.building-customer-control > .app-select { min-width: 0; margin: 0; }
.building-picker-control > .app-select { min-width: 0; margin: 0; }
.record-form[data-entity="elevator"] .technical-grid :is(input, select, textarea),
.record-form[data-entity="elevator"] .technical-panel :is(.app-select-control, .app-date-input, .app-date-toggle) {
  border-color: rgb(var(--line-strong) / .72); background: rgb(var(--workspace)); box-shadow: none;
}
.maintenance-page .app-select { display: block; width: 100%; }
.maintenance-page .app-select-control {
  width: 100%;
  height: 44px;
  padding-right: 35px;
  padding-left: 13px;
  border: 1px solid rgb(var(--line-soft));
  border-radius: 12px;
  background: rgb(var(--workspace));
  color: rgb(var(--ink));
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}
.maintenance-page .app-select-control:hover { border-color: rgb(var(--secondary) / .62); background: rgb(var(--workspace)); }
.maintenance-page .app-select-control:focus { border-color: var(--plan-blue); background: rgb(var(--workspace)); box-shadow: 0 0 0 3px rgb(var(--acid) / .12); }
.maintenance-page .app-select-chevron { right: 11px; }
.maintenance-page .app-select-popover { border-color: rgb(var(--line)); border-radius: 12px; box-shadow: 0 16px 40px rgb(0 0 0 / .15); }
.month-plan-commandbar .maintenance-calendar-filters .app-select { margin-top: 0; }
.work-context-grid .app-select { margin-top: 8px; }
.work-context-grid .app-select-control { min-height: 50px; }
.app-select { margin-top: 6px; }
.app-select-control {
  min-height: 46px;
  padding: 10px 42px 10px 14px;
  border: 1px solid rgb(var(--line-strong));
  border-radius: 13px;
  background: rgb(var(--workspace));
  box-shadow: 0 1px 0 rgb(var(--ink) / .025);
  font-size: 12px;
  font-weight: 720;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out;
}
.app-select-control:hover {
  border-color: rgb(var(--secondary) / .62);
  background: rgb(var(--workspace));
}
.app-select-control:focus-visible,
.app-select.is-open .app-select-control {
  border-color: rgb(var(--info-solid) / .82);
  background: rgb(var(--workspace));
  box-shadow: 0 0 0 3px rgb(var(--info-solid) / .13);
}
.app-select-control.is-placeholder .app-select-value { color: rgb(var(--tertiary)); font-weight: 650; }
.app-select-control:disabled { cursor: not-allowed; opacity: .56; }
.app-select-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-select-chevron { right: 13px; color: rgb(var(--secondary)); }
.app-select.is-open .app-select-chevron { color: rgb(var(--info-solid)); }
.app-select-popover {
  display: flex;
  max-height: min(360px, calc(100vh - 16px));
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgb(var(--line-strong));
  border-radius: 14px;
  background: rgb(var(--elevated));
  box-shadow: 0 18px 48px rgb(var(--ink) / .18), 0 3px 9px rgb(var(--ink) / .08);
}
.app-select-popover[hidden] { display: none; }
.app-select-popover.is-floating { position: fixed; z-index: 180; }
.app-select-search-field {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border-bottom: 1px solid rgb(var(--line-soft));
  background: rgb(var(--surface));
}
.app-select-search-field > svg {
  fill: none;
  stroke: rgb(var(--secondary));
  stroke-width: 1.8;
  stroke-linecap: round;
}
.app-select-search-input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgb(var(--workspace));
  color: rgb(var(--ink));
  font: inherit;
  font-size: 11px;
  font-weight: 680;
  outline: none;
}
.app-select-search-input::placeholder { color: rgb(var(--tertiary)); }
.app-select-search-input:focus {
  border-color: rgb(var(--info-solid) / .58);
  box-shadow: 0 0 0 3px rgb(var(--info-solid) / .10);
}
.app-select-search-input::-webkit-search-cancel-button { opacity: .55; cursor: pointer; }
.app-select-result-count {
  min-width: 58px;
  color: rgb(var(--tertiary));
  font-size: 8.5px;
  font-weight: 760;
  text-align: right;
  white-space: nowrap;
}
.app-select-list {
  display: block;
  max-height: 276px;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.app-select-option {
  position: relative;
  min-height: 42px;
  padding: 10px 38px 10px 12px;
  border-radius: 9px;
  color: rgb(var(--ink));
  font-size: 11px;
  font-weight: 680;
}
.app-select-option:hover,
.app-select-option.is-active {
  background: rgb(var(--info-soft) / .62);
  color: rgb(var(--info-ink));
  outline: none;
}
.app-select-option[aria-selected="true"] {
  background: rgb(var(--info-soft));
  color: rgb(var(--info-ink));
  font-weight: 820;
}
.app-select-option[aria-selected="true"]::after {
  position: absolute;
  top: 50%;
  right: 13px;
  margin: 0;
  color: rgb(var(--info-solid));
  transform: translateY(-50%);
}
.app-select-option.is-empty-option { color: rgb(var(--secondary)); font-weight: 650; }
.app-select-empty { padding: 25px 16px; text-align: center; }
.app-select-empty strong,
.app-select-empty small { display: block; }
.app-select-empty strong { color: rgb(var(--ink)); font-size: 11px; font-weight: 800; }
.app-select-empty small { margin-top: 3px; color: rgb(var(--tertiary)); font-size: 9px; }
.app-select-create {
  width: calc(100% - 12px);
  margin: 6px;
  padding: 10px 12px;
  border: 1px solid rgb(var(--info-solid) / .32);
  border-radius: 9px;
  background: rgb(var(--info-soft) / .72);
  color: rgb(var(--info-ink));
  font-size: 10px;
  font-weight: 800;
}
@media (max-width: 620px) {
  .app-select-popover.is-floating { width: calc(100vw - 16px) !important; }
  .app-select-result-count { display: none; }
}
.app-date-field,
.app-time-field {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  width: 100%;
  margin-top: 6px;
}
.app-date-input,
.app-time-input,
.app-date-toggle,
.app-time-toggle {
  min-height: 46px;
  border: 1px solid rgb(var(--line-strong));
  background: rgb(var(--workspace));
  color: rgb(var(--ink));
  font: inherit;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out;
}
.app-date-input,
.app-time-input {
  width: 100%;
  min-width: 0;
  padding: 0 14px;
  border-right: 0;
  border-radius: 13px 0 0 13px;
  font-size: 12px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.app-date-toggle,
.app-time-toggle {
  display: grid;
  width: 46px;
  place-items: center;
  padding: 0;
  border-radius: 0 13px 13px 0;
  color: rgb(var(--secondary));
  cursor: pointer;
}
.app-date-toggle svg,
.app-time-toggle svg,
.app-calendar-head button svg,
.app-time-step svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-date-input:hover,
.app-time-input:hover,
.app-date-toggle:hover,
.app-time-toggle:hover { border-color: rgb(var(--secondary) / .62); background: rgb(var(--workspace)); }
.app-date-field.is-open :is(.app-date-input, .app-date-toggle),
.app-time-field.is-open :is(.app-time-input, .app-time-toggle),
.app-date-input:focus-visible,
.app-time-input:focus-visible,
.app-date-toggle:focus-visible,
.app-time-toggle:focus-visible {
  border-color: rgb(var(--info-solid) / .82);
  box-shadow: 0 0 0 3px rgb(var(--info-solid) / .13);
  outline: none;
}
.app-date-input[aria-invalid="true"],
.app-time-input[aria-invalid="true"] { border-color: rgb(var(--danger-solid)); box-shadow: 0 0 0 3px rgb(var(--danger-solid) / .12); }
.app-calendar,
.app-time-popover {
  overflow: hidden;
  border: 1px solid rgb(var(--line-strong));
  border-radius: 16px;
  background: rgb(var(--elevated));
  box-shadow: 0 22px 58px rgb(var(--ink) / .20), 0 3px 10px rgb(var(--ink) / .08);
}
.app-calendar[hidden],
.app-time-popover[hidden] { display: none; }
.app-calendar.is-floating,
.app-time-popover.is-floating { position: fixed; z-index: 180; }
.app-calendar { padding: 14px; }
.app-calendar-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 8px; align-items: center; }
.app-calendar-head strong {
  color: rgb(var(--ink));
  font-size: 14px;
  font-weight: 820;
  letter-spacing: -.015em;
  text-align: center;
  text-transform: capitalize;
}
.app-calendar-head button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(var(--line-soft));
  border-radius: 10px;
  background: rgb(var(--workspace));
  color: rgb(var(--ink));
  cursor: pointer;
}
.app-calendar-head button:hover,
.app-calendar-head button:focus-visible { border-color: rgb(var(--info-solid) / .42); background: rgb(var(--info-soft) / .55); color: rgb(var(--info-solid)); outline: none; }
.app-calendar-weekdays,
.app-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.app-calendar-weekdays {
  margin: 16px 0 7px;
  color: rgb(var(--tertiary));
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .04em;
  text-align: center;
}
.app-calendar-grid button {
  display: grid;
  min-width: 0;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgb(var(--ink));
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.app-calendar-grid button:hover,
.app-calendar-grid button:focus-visible { border-color: rgb(var(--info-solid) / .25); background: rgb(var(--info-soft) / .62); color: rgb(var(--info-ink)); outline: none; }
.app-calendar-grid button.is-outside { color: rgb(var(--muted)); font-weight: 600; }
.app-calendar-grid button.is-today { border-color: rgb(var(--contrast)); color: rgb(var(--ink)); }
.app-calendar-grid button.is-selected { border-color: rgb(var(--info-solid)); background: rgb(var(--info-solid)); color: rgb(var(--workspace)); box-shadow: 0 5px 14px rgb(var(--info-solid) / .22); }
.app-calendar-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding-top: 11px; border-top: 1px solid rgb(var(--line-soft)); }
.app-calendar-footer button {
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgb(var(--secondary));
  font: inherit;
  font-size: 9.5px;
  font-weight: 800;
  cursor: pointer;
}
.app-calendar-footer button:hover,
.app-calendar-footer button:focus-visible { background: rgb(var(--inset)); color: rgb(var(--ink)); outline: none; }
.app-calendar-footer button:last-child { background: rgb(var(--info-soft)); color: rgb(var(--info-ink)); }
.app-time-popover { display: flex; flex-direction: column; padding: 0; }
.app-time-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
  padding: 13px 16px;
  background: rgb(var(--contrast));
  color: rgb(var(--contrast-ink));
}
.app-time-head > span:first-child { display: grid; gap: 3px; }
.app-time-head b { font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.app-time-head small { color: rgb(var(--contrast-ink) / .64); font-size: 9px; font-weight: 650; }
.app-time-direct { display: flex; flex: 0 0 auto; align-items: stretch; }
.app-time-direct input {
  width: 70px;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid rgb(var(--contrast-ink) / .24);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: rgb(var(--orbital-black)) !important;
  color: rgb(var(--contrast-ink)) !important;
  -webkit-text-fill-color: rgb(var(--contrast-ink));
  caret-color: rgb(var(--info-solid));
  font: inherit;
  font-size: 15px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
  outline: none;
}
.app-time-direct input:focus-visible { border-color: rgb(var(--info-solid)); background: rgb(var(--orbital-black)) !important; box-shadow: 0 0 0 3px rgb(var(--info-solid) / .24); }
.app-time-direct input[aria-invalid="true"] { border-color: rgb(var(--danger-solid)); box-shadow: 0 0 0 3px rgb(var(--danger-solid) / .22); }
.app-time-direct button {
  display: grid;
  width: 36px;
  min-height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(var(--info-solid));
  border-radius: 0 10px 10px 0;
  background: rgb(var(--info-solid));
  color: rgb(var(--workspace));
  cursor: pointer;
}
.app-time-direct button:hover,
.app-time-direct button:focus-visible { background: rgb(var(--info-ink)); outline: none; }
.app-time-direct svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-time-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  max-height: 252px;
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.app-time-options button {
  min-height: 36px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: rgb(var(--secondary));
  font: inherit;
  font-size: 10.5px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.app-time-options button:hover { background: rgb(var(--inset)); color: rgb(var(--ink)); }
.app-time-options button:focus-visible { border-color: rgb(var(--info-solid)); box-shadow: 0 0 0 2px rgb(var(--info-solid) / .14); color: rgb(var(--ink)); outline: none; }
.app-time-options button.is-active { border-color: rgb(var(--info-solid)); background: rgb(var(--info-solid)); color: rgb(var(--workspace)); }
.app-time-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-top: 1px solid rgb(var(--line-soft)); background: rgb(var(--surface)); }
.app-time-footer small { color: rgb(var(--tertiary)); font-size: 8.5px; font-weight: 650; }
.app-time-footer button {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid rgb(var(--line-soft));
  border-radius: 10px;
  background: rgb(var(--workspace));
  color: rgb(var(--ink));
  font: inherit;
  font-size: 10px;
  font-weight: 820;
  cursor: pointer;
}
.app-time-footer button:hover,
.app-time-footer button:focus-visible { border-color: rgb(var(--info-solid) / .42); background: rgb(var(--info-soft)); color: rgb(var(--info-ink)); outline: none; }
@media (max-width: 620px) {
  .app-calendar.is-floating,
  .app-time-popover.is-floating { width: calc(100vw - 16px) !important; }
}
.month-planner-dialog .app-select,
.month-planner-dialog .app-date-field,
.month-planner-dialog .app-time-field { margin-top: 0; }
.month-planner-dialog label > .app-select { display: block; }
.month-planner-dialog label > :is(.app-date-field, .app-time-field) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: stretch;
  justify-content: initial;
  gap: 0;
}
.month-planner-dialog :is(.app-select-control, .app-date-input, .app-time-input, .app-date-toggle, .app-time-toggle) {
  min-height: 46px;
  border-color: rgb(var(--line-strong));
  background: rgb(var(--workspace));
  font-size: 11px;
}
.month-planner-dialog :is(.app-date-input, .app-time-input) {
  padding: 0 13px;
  border-right: 0;
  border-radius: 11px 0 0 11px;
}
.month-planner-dialog :is(.app-date-toggle, .app-time-toggle) {
  width: 46px;
  padding: 0;
  border-radius: 0 11px 11px 0;
}
.route-date-nav form .app-date-field { width: 174px; margin: 0; }
.route-date-nav form :is(.app-date-input,.app-date-toggle) { min-height: 36px; }
@media (max-width: 680px) {
  .route-date-nav form .app-date-field { width: 100%; }
}