: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-calendar-layer] > [data-slot="affordance"] {
    margin-inline-start: auto;
    opacity: 0;
    transition: opacity var(--duration-100) var(--ease);
  }

  & [data-calendar-layer]:is(:hover, :focus-within) > [data-slot="affordance"] {
    opacity: 1;
  }

  @media (hover: none) {
    & [data-calendar-layer] > [data-slot="affordance"] {
      opacity: 1;
    }
  }

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

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

  /* The pane's own edge already closes a page's head, so the kit's drawn rule under the title would be a second line. */
  & .phead > [data-component="pane-head"]::after {
    display: none;
  }

  & .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);
  }

  /* Buttons that stand together are one shape: beside a pill, a quiet or ghost button is a pill too, so
     Create and Discard read as a pair rather than as a pill and a tile. */
  & :has(> [data-component^="button-"][data-variant*="pill"]) > [data-component^="button-"]:not([data-variant*="pill"]) {
    padding-inline: var(--space-200);
    border-radius: var(--radius-pill);
  }

  & .kit-control[data-component="tabs"][data-variant^="segmented"] .tabs__item.is-selected {
    background-color: color-mix(in srgb, var(--ink) 12%, var(--surface-200));
    box-shadow: none;
  }

  & [data-aos-region="list-pane"] > [data-aos="section"]:has(> [data-component="button-primary"][data-variant="mark"]) {
    display: contents;
  }

  & [data-aos-region="list-pane"] [data-component="button-primary"][data-variant="mark"] {
    position: fixed;
    inset-inline-end: var(--space-300);
    inset-block-end: var(--space-300);
    z-index: var(--layer-raised);
    width: var(--control-500);
    height: var(--control-500);
    box-shadow: var(--elevation-dialog);
  }

  & [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;
  }

  & .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);
  }
}