[data-aos="screen"][data-aos-route^="aos://apps/calendar"] {
  & > [data-aos-region="list-pane"],
  & > [data-aos-region="detail-pane"] {
    isolation: isolate;
  }

  & > [data-aos-region="list-pane"] > [data-aos="section"]:has(> [data-component="calendar-month"]) {
    flex: 1 1 auto;
    min-height: 0;
  }

  & > [data-aos-region="rail"] {
    overflow: hidden;
  }

  & > [data-aos-region="rail"] [data-aos="section"] {
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    flex: 1;
  }

  /* The panel is as tall as the room it stands in, so its scroller has a bottom to stop at. */
  & > [data-aos-region="rail"] [data-component="rail"] {
    height: 100%;
    min-height: 0;
  }

  & > [data-aos-region="detail-pane"] {
    flex: none;
    min-width: 0;
  }

  /* The panel follows the rail's width rather than its own content's: the mini month's seven columns are a
     wider minimum than the panel, and a flex item sized by its content stands the whole panel past the rail's
     trailing edge. The column itself is the component's — only the shrink is the arrangement's. */
  & .rail__body {
    min-width: 0;
  }

  /* Every row in the panel clears the grip on the rail's trailing edge: a row that ended at the panel's own
     inner edge would end under the handle, with a spacing step to its left and none to its right.

     The panel's own three rows. The create control takes the row's whole remainder, so it follows the panel's
     width rather than its own content, and its label gives way before its box does. */
  & .rail-top,
  & .mini,
  & .rail-scroll {
    padding-right: var(--space-050);
    min-width: 0;
  }

  & .rail-top {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: var(--control-500);
    margin-block: var(--space-050) var(--space-100);
  }

  & .rail-top > * {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  & .rail-scroll {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
  }

  & .rail-scroll > *,
  & .mini-head > * {
    min-width: 0;
  }

  & .rail-gap {
    height: var(--space-150);
    flex: none;
  }

  /* The mini month: §11.3's grant. The cell is §6.19's mini date and the seven columns are Calendar's, so the
     grid is the app's and the day on it is the kit's. A day outside the month it is shown beside steps back a
     rung rather than leaving: the wrapper carries only that inheritance, never a box of its own. */
  & .mini {
    padding: var(--space-150) var(--space-050) 0;
    flex: none;
  }

  & .mini-head {
    display: flex;
    align-items: center;
    gap: var(--space-025);
    padding: 0 var(--space-050) var(--space-100);
  }

  & .mini-title {
    flex: 1;
    font-size: var(--type-200);
    font-weight: var(--weight-strong);
    padding-left: var(--space-100);
  }

  & .mini-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
  }

  & .mini-dow {
    font-size: var(--type-100);
    font-weight: var(--weight-medium);
    color: var(--ink-muted);
    text-align: center;
    padding-bottom: var(--space-050);
  }

  & .mini-day {
    display: contents;
  }

  & .mini-day.is-outside {
    color: var(--ink-subtle);
  }

  & .mini-grid [data-component="mini-date"] {
    --kit-step: var(--control-200);
    min-width: var(--control-200);
  }

  /* §4.7's pane head names the region; the stepper, the view strip and search stand beside it because the
     component declares no slot for them. The head names only part of the row, so the rule under it moves out
     to the row and the head stops drawing half of one. */
  & .phead {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    align-items: center;
    gap: var(--space-100);
    padding: var(--space-100) var(--space-150) var(--space-100) var(--space-200);
    border-bottom: var(--border-state);
    border-bottom-color: var(--hairline);
  }

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

  & .phead > [data-component="tabs"] {
    flex: none;
    width: auto;
  }

  & > [data-aos-region="pane-head"] [data-component="pane-head"] {
    border-block-end: 0;

    &::after {
      display: none;
    }
  }

  & .navpair {
    display: inline-flex;
    align-items: center;
    flex: none;
  }

  /* The canvas is a head band that does not move over a wall of hours that does. The band holds the dates and
     the all-day strip; the scroller holds the component — the hour axis and the columns — so the axis and the
     wall travel together under a row of dates that stays. */
  & .tgrid {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  & .tg-top {
    flex: none;
  }

  & .tg-head {
    display: grid;
    grid-template-columns: var(--control-500) repeat(var(--calendar-columns, 7), minmax(0, 1fr));
    align-items: end;
  }

  & .tg-corner {
    min-width: var(--control-500);
  }

  & .tg-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  & .calendar-time-grid__column {
    position: relative;
  }

  /* The day the reader is standing on, marked on the wall as well as on its date. */
  & .calendar-time-grid__column.is-today,
  & .calendar-all-day-strip__run.is-today,
  & .ag-day.today .ag-n {
    background-color: var(--surface-200);
  }

  /* The axis and the strip's label stand in the same room, so the days over the hours line up with the hours. */
  & .calendar-time-grid__gutter,
  & .ad-label {
    min-width: var(--control-500);
  }

  /* A press on a day opens it, so every surface that answers one reads as the target it is. */
  & .calendar-time-grid__hours,
  & .calendar-all-day-strip__run,
  & [data-component="calendar-day"],
  & [data-component="calendar-block"],
  & .tabs__item,
  & .mini-grid [data-component="mini-date"] {
    cursor: pointer;
  }

  /* The form's own rows: when a record stands, which is two dates and two hours, and the row it is written from. */
  & .dt-row {
    display: flex;
    align-items: center;
    gap: var(--space-100);
    min-width: 0;
  }

  & .dt-half {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-050);
    min-width: 0;
  }

  /* A date reads in full or it reads wrong, so the two halves divide the row rather than the field's content. */
  & .dt-half > .field__input {
    flex: 1;
    min-width: 0;
  }

  & .dt-dash {
    flex: none;
    color: var(--ink-muted);
  }

  & .form-foot {
    display: flex;
    align-items: center;
    gap: var(--space-100);
    padding-block-start: var(--space-150);
  }

  /* The record's pane: a scroller under the head, and the row its acts stand in. */
  & .reader {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
  }

  & .rd,
  & .page,
  & .rowpad {
    padding: var(--space-200) var(--space-300) var(--space-600);
  }

  & .rowbtns,
  & .grp {
    display: flex;
    align-items: center;
    gap: var(--space-100);
    flex-wrap: wrap;
  }

  & .page-note {
    color: var(--ink-muted);
    font-size: var(--type-100);
  }

  /* Every figure a reader compares down a column is aligned: a clock, a date and a count. */
  & .tnum,
  & .er-time {
    font-variant-numeric: var(--numerals-aligned);
  }

  & .er-time {
    white-space: nowrap;
  }

  /* A layer's mark, in the layer's own hue — the one colour on the row that tells the wall's blocks apart. */
  & .cal-sw {
    display: block;
    inline-size: var(--space-150);
    block-size: var(--space-150);
    border-radius: var(--radius-100);
    background-color: var(--calendar-hue, var(--hue-teal));
  }

  & .layer-switch {
    display: flex;
    align-items: center;
  }

  /* The canvases that are a window over rows rather than a wall: the agenda and find-by-date. */
  & .agenda,
  & .rangescreen {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  & .ag-inner,
  & .scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  /* The agenda's own columns: the date beside the day's rows, which no component owns. */
  & .ag-day {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-150);
    padding-block: var(--space-150);
  }

  & .ag-date {
    display: flex;
    flex-direction: column;
    gap: var(--space-025);
  }

  & .ag-dow {
    color: var(--ink-muted);
    font-size: var(--type-100);
    font-weight: var(--weight-medium);
  }

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

  & .ag-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-050);
    min-width: 0;
  }

  /* ---------------------------------------------------------------------------------------------
     What a pointer draws on the canvas.

     §11.3 grants Calendar the grids and drag-to-move on them, so the block a press is drawing and the
     marks a drag leaves are the app's own drawing and are homed here with the rest of the canvas. None
     of them is a component: the outline has no id, the domain has never heard of it, and it stops
     existing the moment the pointer lets go.
     --------------------------------------------------------------------------------------------- */

  /* The block you are about to create, drawn live under the pointer. It is the one thing on the canvas
     that reads as provisional at a glance rather than after a click, so it is the accent knocked back
     rather than a hue, and it is ruled rather than filled. */
  & .sketch {
    z-index: 19;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--space-025) var(--space-100);
    border-radius: var(--radius-100);
    background-color: color-mix(in srgb, var(--accent-ink) 24%, transparent);
    box-shadow: inset 0 0 0 var(--border-mark-width) var(--accent-ink);
    pointer-events: none;
    /* No entrance animation: the screen is redrawn on every frame of the gesture, so an `animation` here
       would restart under the pointer sixty times a second. The outline arrives where the finger is,
       which is the only explanation of itself it needs. */
    touch-action: none;
  }

  /* Neither line wraps: a column is narrow once the form is open beside it, and a range broken across
     two lines is not a range. */
  & .sk-t,
  & .sk-d {
    white-space: nowrap;
    line-height: var(--leading-tight);
    font-size: var(--type-100);
  }

  & .sk-t {
    color: var(--ink);
    font-weight: var(--weight-strong);
    font-variant-numeric: var(--numerals-aligned);
  }

  & .sk-d {
    color: var(--ink-body);
  }

  /* The same outline drawn across days rather than down hours: a sideways press lights the cells it
     crossed, because the run it would make covers each of them whole. */
  & [data-state="sketching"] {
    background-color: color-mix(in srgb, var(--accent-ink) 16%, transparent);
    box-shadow: inset 0 0 0 var(--border-mark-width) var(--accent-ink);
  }

  /* The day a record would land on if the pointer let go now. */
  & [data-state="dropping"] {
    background-color: color-mix(in srgb, var(--accent-ink) 16%, transparent);
  }

  /* The record under the pointer rides over everything it is being carried across, and says so by
     leaving the wall it was resting on. */
  & [data-state="dragging"] {
    z-index: 20;
    box-shadow: var(--elevation-dialog);
    cursor: grabbing;
  }

  /* The grip a record's length is dragged by: the map gives it the block's own `lifetime` slot, and it
     is not there until the pointer is over the block it belongs to. */
  & .ev-grip {
    position: absolute;
    z-index: 1;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: var(--space-100);
    opacity: 0;
    cursor: ns-resize;
    transition: opacity var(--duration-100) var(--ease);
  }

  & .ev-grip::after {
    content: "";
    position: absolute;
    inset-inline: 35%;
    inset-block-end: var(--space-025);
    block-size: var(--border-mark-width);
    border-radius: var(--radius-pill);
    background-color: var(--ink);
  }

  & [data-component="calendar-block"]:hover .ev-grip {
    opacity: 0.6;
  }

  /* A block is picked up rather than pressed, so it says so before it is — and it gives the grip above a
     box to resolve against, which is room rather than look and so is the arrangement's to give. */
  & [data-component="calendar-block"] {
    position: relative;
    cursor: grab;
  }

  /* While something is being drawn or carried, the canvas is a drawing surface rather than a page of
     text: a drag that selects the hour labels on its way past is a drag that fights the reader. */
  & [data-aos-region="list-pane"]:has(.sketch),
  & [data-aos-region="list-pane"]:has([data-state="dragging"]),
  & [data-aos-region="list-pane"]:has([data-state="sketching"]) {
    cursor: ns-resize;
    user-select: none;
  }

  & [data-aos-region="list-pane"]:has([data-state="dragging"]) {
    cursor: grabbing;
  }

  /* The wall itself is a target rather than a backdrop, because a press anywhere on it makes a record.
     A finger drawing on it is drawing rather than scrolling, which the browser has to be told. */
  & .calendar-time-grid__hours {
    cursor: cell;
    touch-action: none;
  }
}

/* A reader who has asked for less movement still gets every state; what goes is the travel between them. */
@media (prefers-reduced-motion: reduce) {
  [data-aos="screen"][data-aos-route^="aos://apps/calendar"] .ev-grip {
    transition: none;
  }
}

/* The panel stands over the canvas at a width that cannot hold both, and its foot stands over the panel — so
   the panel keeps a foot's room at the bottom of its own scroller rather than running under it. */
@media (width <= 1000px) {
  [data-aos="screen"][data-aos-route^="aos://apps/calendar"] .rail-scroll {
    padding-bottom: calc(var(--control-500) * 2);
  }

  /* The head scrolls at this width rather than compressing, so the range keeps its own room in the row. */
  [data-aos="screen"][data-aos-route^="aos://apps/calendar"] .phead > *,
  [data-aos="screen"][data-aos-route^="aos://apps/calendar"] .phead > [data-component="pane-head"] {
    flex: none;
  }
}