#app [data-aos="screen"][data-aos-route^="aos://apps/calendar"] {
  --calendar-gutter: calc(var(--space-600) + var(--space-200));
  --calendar-event-radius: var(--radius-100);

  & .tg-top {
    border-block-end: var(--border-state);
    border-color: var(--hairline);
    overflow-y: auto;
    max-height: calc(var(--control-500) * 4);
    scrollbar-gutter: stable;
  }

  & .tg-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background-color: var(--surface-000);
    grid-template-columns: var(--calendar-gutter) repeat(var(--calendar-columns, 7), minmax(0, 1fr));
    align-items: stretch;
  }

  & .tg-corner {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    min-width: 0;
    padding: 0 var(--space-100) var(--space-050) 0;
    border-inline-end: var(--border-state);
    border-color: var(--hairline);
  }

  & .calendar-time-grid__zone {
    min-height: 0;
    padding: 0;
    font-size: var(--type-100);
  }

  & .calendar-time-grid__head {
    min-width: 0;
    padding-block: var(--space-050);
    border-block-end: 0;
    border-inline-end: var(--border-state);
    border-color: var(--hairline-faint);
  }

  & .calendar-time-grid__head:last-child {
    border-inline-end: 0;
  }

  & .calendar-time-grid__dow {
    font-size: var(--type-100);
    font-weight: var(--weight-medium);
  }

  & .calendar-time-grid__head.is-today .calendar-time-grid__dow {
    color: var(--jewel-soft, var(--accent-artwork));
  }

  & .calendar-time-grid__head [data-component="mini-date"] {
    width: auto;
    padding-inline: var(--space-050);
    font-size: var(--type-400);
  }

  & .tg-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  & [data-component="calendar-time-grid"] {
    grid-template-columns: var(--calendar-gutter) minmax(0, 1fr);
    border-radius: 0;
  }

  & .calendar-time-grid__gutter {
    position: relative;
    min-width: 0;
    border-inline-end: var(--border-state);
    border-color: var(--hairline);
  }

  & .calendar-time-grid__hour {
    flex: none;
    font-weight: var(--weight-regular);
    padding-inline-end: var(--space-100);
    transform: translateY(-50%);
    line-height: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  & .calendar-time-grid__hour[data-under-now="true"] {
    visibility: hidden;
  }

  & .calendar-time-grid__column {
    border-inline-start: 0;
    border-inline-end: var(--border-state);
    border-color: var(--hairline-faint);
  }

  & .calendar-time-grid__column:last-child {
    border-inline-end: 0;
  }

  & .calendar-time-grid__rule {
    border-color: var(--hairline-faint);
  }

  & .calendar-time-grid__rule:first-child {
    border-block-start-color: transparent;
  }

  & .calendar-time-grid__column.is-today,
  & .calendar-all-day-strip__run.is-today {
    background-color: color-mix(in srgb, var(--accent-ink) 5%, transparent);
  }

  & .tgrid:has([data-component="calendar-time-grid"][data-variant="day"]) .is-today {
    background-color: transparent;
  }

  & .calendar-time-grid__hours,
  & .calendar-all-day-strip__run {
    cursor: pointer;
    user-select: none;
  }

  & .calendar-time-grid__laid:has(.calendar-time-grid__now) {
    z-index: 6;
    pointer-events: none;
  }

  & .calendar-time-grid__now {
    border-block-start-color: var(--accent-ink);
    pointer-events: none;
  }

  & .calendar-time-grid__now::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--space-050) * -1);
    inset-block-start: calc(var(--space-050) * -1);
    inline-size: var(--space-100);
    block-size: var(--space-100);
    border-radius: var(--radius-pill);
    background-color: var(--accent-ink);
  }

  & .calendar-time-grid__now-at {
    position: absolute;
    z-index: 6;
    inset-inline-end: var(--space-050);
    transform: translateY(-50%);
    padding: var(--space-025) var(--space-050);
    border-radius: var(--calendar-event-radius);
    background-color: var(--accent-ink);
    color: var(--surface-000);
    font-size: var(--type-100);
    font-weight: var(--weight-strong);
    font-variant-numeric: var(--numerals-aligned);
    line-height: var(--leading-tight);
    pointer-events: none;
  }

  & [data-component="calendar-all-day-strip"] {
    min-height: var(--control-300);
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  & [data-component="calendar-all-day-strip"] > [data-slot="label"] {
    align-self: stretch;
    flex: 0 0 var(--calendar-gutter);
    padding: 0;
    border-inline-end: var(--border-state);
    border-color: var(--hairline);
  }

  & .ad-label {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
    padding: var(--space-100) var(--space-100) 0 0;
    font-size: var(--type-100);
  }

  & .calendar-all-day-strip__lanes {
    grid-auto-rows: minmax(calc(var(--control-200) + var(--space-025)), auto);
    min-height: var(--control-300);
    gap: 0;
  }

  & .calendar-all-day-strip__run {
    border-inline-end: var(--border-state);
    border-color: var(--hairline-faint);
  }

  & [data-component="calendar-block"] {
    --kit-radius: var(--calendar-event-radius);
    --plate-ink: var(--surface-000);
  }

  & .calendar-time-grid__laid > [data-component="calendar-block"] {
    min-height: calc(var(--space-200) + var(--space-025));
    height: 100%;
    overflow: hidden;
    padding: var(--space-050) var(--space-100);
    grid-template-rows: min-content min-content;
    gap: 0 var(--space-050);
    cursor: pointer;
  }

  & .calendar-time-grid__laid > [data-component="calendar-block"][data-variant="chip"] {
    padding-block: 0;
    grid-template-rows: 1fr;
  }

  & .calendar-time-grid__laid > [data-component="calendar-block"][data-state="dragging"] {
    cursor: grabbing;
  }

  & .calendar-time-grid__laid .ev-grip {
    block-size: min(var(--space-100), calc(100% / 3));
  }

  & .calendar-time-grid__laid [data-component="calendar-block"] > [data-slot="time"] {
    opacity: 0.78;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  & .calendar-all-day-strip__lanes > [data-component="calendar-block"] {
    align-self: start;
    width: auto;
    margin: var(--space-025);
    min-height: calc(var(--control-200) - var(--space-025));
    padding: var(--space-025) var(--space-100);
    z-index: 1;
  }

  & .calendar-all-day-strip__lanes > [data-component="calendar-block"] > [data-slot="time"] {
    display: none;
  }

  & .calendar-all-day-strip__lanes > [data-continues-before="true"] {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: 0;
  }

  & .calendar-all-day-strip__lanes > [data-continues-after="true"] {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    margin-inline-end: 0;
  }

  & .sketch {
    border-radius: var(--calendar-event-radius);
  }

  & [data-aos-region="list-pane"]:has(.sketch) .calendar-time-grid__hours {
    cursor: ns-resize;
  }
}

#app [data-aos="screen"][data-aos-route^="aos://apps/calendar"] {
  --calendar-month-date-height: calc(var(--control-200) + var(--space-050));
  --calendar-month-lane-height: calc(var(--control-200) + var(--space-025));

  & [data-component="calendar-month"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    min-height: 0;
  }

  & [data-component="calendar-month"] > [data-slot="weekdays"] {
    grid-area: 1 / 1;
    padding: 0;
    border-color: var(--hairline);
  }

  & [data-component="calendar-month"] > [data-slot="cells"],
  & [data-component="calendar-month"] > [data-slot="bands"] {
    grid-area: 2 / 1;
    grid-template-rows: repeat(var(--calendar-weeks), minmax(0, 1fr));
  }

  & [data-component="calendar-month"] > [data-slot="cells"] > [data-component="calendar-day"] {
    min-width: 0;
    min-height: 0;
    padding: var(--space-025) var(--space-050) var(--space-050);
    overflow: hidden;
    justify-content: flex-start;
  }

  & [data-component="calendar-month"] [data-component="calendar-day"] > [data-slot="date"] {
    flex: none;
    min-height: var(--calendar-month-date-height);
    height: var(--calendar-month-date-height);
    justify-content: center;
    margin-block-end: calc(var(--calendar-band-lanes, 0) * var(--calendar-month-lane-height));
  }

  & [data-component="calendar-month"] [data-component="mini-date"] {
    --kit-step: var(--control-200);
    min-width: var(--control-200);
    width: auto;
    padding-inline: var(--space-050);
  }

  & [data-component="calendar-month"] [data-component="calendar-day"] > [data-slot="events"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-025);
  }

  & [data-component="calendar-month"] [data-component="calendar-block"] {
    min-height: calc(var(--control-200) - var(--space-025));
    padding: var(--space-025) var(--space-100);
  }

  & [data-component="calendar-month"] > [data-slot="bands"] {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    pointer-events: none;
    z-index: 1;
  }

  & .calendar-month-week-band {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: var(--calendar-month-lane-height);
    align-content: start;
    padding-block-start: calc(var(--calendar-month-date-height) + var(--space-025) * 2);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  & .calendar-month-week-band > [data-component="calendar-block"] {
    width: auto;
    margin-inline: var(--space-025);
    margin-block-end: var(--space-025);
    pointer-events: auto;
  }

  & .calendar-month-week-band > [data-component="calendar-block"] > [data-slot="time"] {
    display: none;
  }

  & .calendar-month-week-band > [data-continues-before="true"] {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: 0;
  }

  & .calendar-month-week-band > [data-continues-after="true"] {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    margin-inline-end: 0;
  }

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

  & [data-component="calendar-day"][data-variant="outside"] {
    opacity: 1;
    background-color: color-mix(in srgb, var(--surface-000) 50%, black);
  }

  & [data-component="calendar-day"][data-variant="outside"] > [data-slot="date"] {
    color: var(--ink-subtle);
  }

  & [data-component="calendar-day"][data-state="dropping"],
  & [data-component="calendar-day"][data-state="sketching"] {
    background-color: color-mix(in srgb, var(--accent-ink) 16%, transparent);
  }

  & [data-component="calendar-day"] > [data-slot="overflow"] {
    margin-block-start: 0;
  }

  & [data-component="calendar-day"] > [data-slot="overflow"] [data-component="button-quiet"] {
    min-height: var(--control-200);
    height: var(--control-200);
    padding: var(--space-025) var(--space-100);
    font-size: var(--type-100);
    font-weight: var(--weight-medium);
    color: var(--ink-muted);
  }
}

@media (width < 600px) {
  #app [data-aos="screen"][data-aos-route^="aos://apps/calendar"] [data-component="calendar-month"] [data-component="calendar-block"] > [data-slot="time"] {
    display: none;
  }
}

#app [data-aos="screen"][data-aos-route^="aos://apps/calendar"] {
  & .agenda > [data-component="windowed-body"] {
    flex: 1;
    min-height: 0;
    max-width: none;
    gap: 0;
  }

  & .agenda [data-component="windowed-body"] > [data-slot="readout"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  & .agenda [data-component="windowed-body"] > [data-slot="body"] {
    flex: 1;
    min-height: 0;
    display: block;
  }

  & .ag-inner {
    height: 100%;
    padding-block: var(--space-100) var(--space-600);
    overscroll-behavior: contain;
  }

  & .ag-day {
    grid-template-columns: calc(var(--control-500) * 2) minmax(0, var(--measure));
    gap: var(--space-200);
    padding: var(--space-150) var(--space-300);
  }

  & .ag-date {
    position: sticky;
    inset-block-start: 0;
    align-self: start;
    padding-block-start: var(--space-100);
  }

  & .ag-day.today .ag-dow {
    color: var(--jewel-soft, var(--accent-artwork));
  }

  & .ag-day.today .ag-n {
    color: var(--accent-ink);
    background: transparent;
  }

  & .cal-sw {
    border-radius: var(--radius-pill);
  }
}

@media (width < 600px) {
  #app [data-aos="screen"][data-aos-route^="aos://apps/calendar"] {
    & > [data-aos-region="pane-head"] .phead {
      display: grid;
      grid-template-columns: var(--control-300) auto auto minmax(0, 1fr) var(--control-300);
      gap: var(--space-050);
      padding: var(--space-100);
      min-height: 0;
      overflow: visible;
    }

    & > [data-aos-region="pane-head"] .phead > [data-component="rail-toggle"] {
      grid-area: 1 / 1;
    }

    & > [data-aos-region="pane-head"] .phead > [data-component="button-quiet"] {
      grid-area: 1 / 2;
      padding-inline: var(--space-150);
    }

    & > [data-aos-region="pane-head"] .phead > .navpair {
      grid-area: 1 / 3;
    }

    & > [data-aos-region="pane-head"] .phead > [data-component="pane-head"] {
      grid-area: 1 / 4 / 2 / 6;
      width: 100%;
      min-width: 0;
      overflow: hidden;
      font-size: var(--type-300);
    }

    & > [data-aos-region="pane-head"] .phead > [data-component="tabs"] {
      grid-area: 2 / 1 / 3 / 5;
      justify-self: start;
    }

    & > [data-aos-region="pane-head"] .phead > [data-component="icon-button"] {
      grid-area: 2 / 5;
      justify-self: end;
    }

    & .ag-day {
      grid-template-columns: calc(var(--space-400) * 2) minmax(0, 1fr);
      gap: var(--space-100);
      padding: var(--space-100) var(--space-150);
    }

    & .ag-n {
      font-size: var(--type-400);
    }

    & .agenda [data-component="list-row"] {
      grid-template-columns: var(--space-150) minmax(0, 1fr);
      grid-template-rows: auto auto;
      row-gap: var(--space-050);
      padding: var(--space-100);
    }

    & [data-component="calendar-day"] > [data-slot="overflow"] [data-component="button-quiet"] {
      min-width: 0;
      padding-inline: 0;
      white-space: nowrap;
    }

    & .agenda [data-component="list-row"] > [data-slot="marker"] {
      margin-inline-end: 0;
    }

    & .agenda .cal-sw {
      flex: none;
    }

    & .agenda [data-component="list-row"] > [data-slot="figure"] {
      grid-column: 2;
      grid-row: 2;
      margin-inline: var(--space-100) 0;
    }

    & .agenda [data-component="list-row"] > [data-slot="name"] {
      grid-column: 2;
      grid-row: 1;
      margin-inline: var(--space-100) 0;
    }

    & .agenda [data-component="list-row"] > [data-slot="meta"] {
      display: none;
    }

    & .agenda .er-time {
      font-size: var(--type-100);
    }
  }
}