:root:has([data-aos-route^="aos://apps/calendar"]) {
  --surface-000: #0E0C0B;
  --surface-100: #131110;
  --surface-200: #26211D;
  --surface-300: #302A25;
  --ink: #F8F4EF;
  --ink-body: rgba(248, 244, 239, 0.78);
  --ink-muted: rgba(248, 244, 239, 0.60);
  --ink-subtle: rgba(248, 244, 239, 0.50);
  --stroke: rgba(248, 244, 239, 0.40);
  --hairline: rgba(248, 244, 239, 0.16);
  --hairline-faint: rgba(248, 244, 239, 0.08);
  --side-width: 424px;
}

[data-aos="screen"][data-aos-route^="aos://apps/calendar"] {
  background: var(--surface-000);
  color: var(--ink);
  font-size: var(--type-300);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;

  & ::selection {
    background: var(--accent-ink);
    color: var(--surface-000);
  }

  & .rail-top {
    padding-inline-start: var(--control-500);
  }

  & .rail-scroll {
    overflow-x: hidden;
  }

  & [data-component="rail"] > [data-slot="toggle"] {
    position: absolute;
    z-index: var(--layer-raised);
    inset-block-start: var(--space-100);
    inset-inline-start: var(--space-100);
    height: var(--control-500);
    display: flex;
    align-items: center;
  }

  & .rail-top [data-slot="label"] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & .mini-grid [data-component="mini-date"] {
    --kit-step: var(--control-300);
    min-width: var(--control-300);
    font-size: var(--type-100);
    font-weight: var(--weight-medium);
  }

  & .mini-grid [data-outside="true"] {
    color: var(--ink-subtle);
  }

  & .mini-dow {
    font-size: var(--type-100);
  }

  & [data-calendar-layer] {
    --accent-ink: var(--calendar-hue);
    padding-inline: var(--space-100);
  }

  & [data-calendar-layer] [data-component="checkbox"] {
    padding: 0;
    min-height: 0;
  }

  & [data-calendar-layer] .checkbox__box {
    border-color: var(--calendar-hue);
  }

  & [data-calendar-layer] [data-slot="label"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & [data-calendar-layer][aria-checked="false"] > [data-slot="label"] {
    color: var(--ink-muted);
  }

  & [data-aos-region="rail-foot"] {
    background: var(--surface-100);
  }

  & .phead {
    min-height: calc(var(--control-500) + var(--space-200));
  }

  & .phead:has([data-component="rail-toggle"]) {
    padding-inline-start: var(--space-100);
  }

  & .phead > [data-component="button-quiet"] {
    height: var(--control-200);
    padding-inline: var(--space-200);
    border-radius: var(--radius-pill);
  }

  & [data-component="calendar-day"] {
    border-color: var(--hairline-faint);
  }

  & [data-aos-region="detail-pane"] {
    background: var(--surface-100);
    border-inline-start: var(--border-state);
    border-color: var(--hairline);
  }

  & ::-webkit-scrollbar {
    width: var(--space-150);
    height: var(--space-150);
  }

  & ::-webkit-scrollbar-thumb {
    background: var(--hairline);
    border: var(--space-050) solid transparent;
    border-radius: var(--radius-pill);
    background-clip: content-box;
  }

  & ::-webkit-scrollbar-track {
    background: transparent;
  }
}

@media (width <= 1000px) {
  [data-aos="screen"][data-aos-route^="aos://apps/calendar"] > [data-aos-region="rail"],
  [data-aos="screen"][data-aos-route^="aos://apps/calendar"] > [data-aos-region="rail-foot"] {
    z-index: var(--layer-dialog);
  }

  .calendar-drawer-scrim {
    position: fixed;
    inset: var(--toolbar-height) 0 0;
    z-index: var(--layer-scrim);
    border: 0;
    background: var(--scrim);
    cursor: pointer;
  }

  [data-aos="screen"][data-aos-route^="aos://apps/calendar"] > [data-aos-region="detail-pane"] {
    position: fixed;
    inset: var(--toolbar-height) 0 0;
    z-index: var(--layer-dialog);
    inline-size: 100%;
  }
}

#app [data-aos="screen"]:is([data-aos-route="aos://apps/calendar/search"], [data-aos-route="aos://apps/calendar/help"]) > [data-aos-region="list-pane"] {
  & > [data-aos="section"]:has(> .phead) {
    flex: none;
  }

  & > [data-aos="section"]:has(> .rangescreen, > .reader) {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  & .phead > [data-component="pane-head"] {
    flex: 1;
    min-width: 0;
    border-block-end: 0;
  }

  & .rangescreen > [data-component="filter-panel"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-100);
    padding: var(--space-200) var(--space-300);
    flex: none;
  }

  & .filter-panel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-150);
  }

  & .filter-panel__chips > [data-component="form-field"] {
    flex: 1;
    min-width: calc(var(--control-400) * 3);
    max-width: calc(var(--control-400) * 6);
  }

  & .filter-panel__chips [data-component="field"] {
    min-width: 0;
    width: 100%;
  }

  & .reader:has(> [data-component="help-panel"]) {
    padding: var(--space-300);
  }
}