/* Shiloh's shared menu surface, including the native customizable-select picker. */
@supports (appearance: base-select) {
  select:not([multiple]):is(:not([size]), [size="0"], [size="1"]),
  select:not([multiple]):is(:not([size]), [size="0"], [size="1"])::picker(select) {
    appearance: base-select;
  }
  select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
    background-image: none;
    /* base-select flows its own icon, so the gutter reserved for the
       background-image chevron is no longer needed. */
    padding-right: 0.72rem;
  }
  select::picker(select) {
    background: var(--surface-strong);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 4px;
    box-shadow: var(--shadow-raised);
    margin-block: 6px;
    max-height: min(360px, 60vh);
    overflow-y: auto;
    font-family: inherit;
  }
  select::picker-icon {
    /* Replace the native filled triangle with the app's stroked chevron and
       pin it to the trailing edge, vertically centered. */
    content: "";
    inline-size: 16px;
    block-size: 16px;
    background: var(--select-chevron-image) center / 16px 16px no-repeat;
    margin-inline-start: auto;
    align-self: center;
  }
  select option {
    min-height: 40px;
    padding: 10px 12px;
    gap: 8px;
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    font: inherit;
  }
  select option:hover, select option:focus-visible { background: var(--surface-soft); outline: none; }
  select option:checked { background: var(--current-wash); color: var(--ink); font-weight: 600; }
  select option::checkmark { color: var(--current); }
  select option:disabled { color: var(--muted); opacity: .55; }
  select optgroup { color: var(--muted); font-size: .8125rem; }
}
.shiloh-select-menu, .shiloh-tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  z-index: var(--z-drag-preview, 10000);
  background: var(--surface-strong);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.5;
}
.shiloh-select-menu { padding: 4px; overflow: auto; max-width: calc(100vw - 16px); }
.shiloh-select-option { padding: 10px 12px; min-height: 40px; box-sizing: border-box; border-radius: 4px; cursor: pointer; overflow-wrap: anywhere; }
.shiloh-select-option[data-active] { background: var(--surface-soft); outline: 2px solid var(--current); outline-offset: -2px; }
.shiloh-select-option[aria-selected="true"] { background: var(--current-wash); font-weight: 600; }
.shiloh-select-option[aria-selected="true"]::after { content: '✓'; float: right; margin-inline-start: 12px; color: var(--current); }
.shiloh-select-option[aria-disabled="true"] { opacity: .5; cursor: default; }
.shiloh-select-group { padding: 8px 12px 4px; font-size: .75rem; font-weight: 700; color: var(--muted); }
.shiloh-tooltip { width: max-content; max-width: min(360px, calc(100vw - 16px)); padding: 10px 12px; overflow: auto; white-space: pre-line; overflow-wrap: anywhere; }
[data-app-tooltip][tabindex]:focus-visible { outline: 2px solid var(--current); outline-offset: 2px; }
.childcare-series-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.childcare-series-toggle .material-symbols-outlined { font-size: 18px; }
.childcare-series-toggle[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }
.childcare-series-dates[hidden] { display: none; }
.childcare-series-dates > td { padding: 12px 16px; background: var(--surface-soft); }
.childcare-series-dates [data-childcare-dates] { overflow-x: auto; }
.childcare-series-dates [data-childcare-status]:empty { display: none; }
.childcare-dates-table { margin: 0; }