/*
 * The app shell (layouts/shell): rail, list, main, details, and status bar.
 * Follows shadcn's sidebar-09 block (an icon rail beside a list sidebar) with
 * sidebar-15's right sidebar. Narrow screens show one pane at a time and open
 * the others as sheets.
 */
@layer components {
  .shell {
    --rail-width: 3rem;
    --rail-expanded-width: 13rem;
    --list-width: 20rem;
    --details-width: 20rem;
    --shell-header-height: 3rem;
    /* Docked panes slide open and shut with this timing. */
    --pane-duration: 280ms;
    --pane-easing: cubic-bezier(0.4, 0, 0.2, 1);

    display: grid;
    grid-template-areas: "main" "status";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    block-size: 100dvh;
    overflow: hidden;
    padding-block-start: var(--ruby-native-safe-area-top);
    background: var(--background);
    color: var(--foreground);
  }

  /* Rail and list together, like sidebar-09's outer sidebar. */
  .shell-sidebar {
    display: none;
    grid-area: sidebar;
    min-block-size: 0;
    background: var(--sidebar);
    color: var(--sidebar-foreground);
  }

  .shell[data-focus="list"] {
    grid-template-areas: "sidebar" "status";

    .shell-sidebar {
      display: flex;
    }

    .shell-list {
      flex: 1;
    }

    .shell-main {
      display: none;
    }
  }

  /* Icon-wide by default. Expanded, the same buttons show their labels. */
  .rail {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.5rem;
    inline-size: calc(var(--rail-width) + 1px);
    padding: 0.5rem 0.375rem;
    /* The margin moves with the width, so a list the rail opens over holds still. */
    transition: inline-size var(--pane-duration) var(--pane-easing), margin-inline-end var(--pane-duration) var(--pane-easing);

    &:has(+ .shell-list) {
      border-inline-end: 1px solid var(--sidebar-border);
    }

    /* One transition list for both, so hovering keeps the width animation. See .tooltip. */
    &:hover {
      transition: inline-size var(--pane-duration) var(--pane-easing), margin-inline-end var(--pane-duration) var(--pane-easing), --tooltip-delay 0s linear 600ms;
    }

    /* Narrow screens have no room beside a list, so an expanded rail opens over
       it. It stays on top while it collapses, until it is icon-wide again. */
    @media (width < 48rem) {
      &:has(+ .shell-list) {
        position: relative;
        z-index: 1;
        background: var(--sidebar);
      }
    }
  }

  .rail__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;

    .rail-link {
      font-weight: var(--font-weight-semibold);
    }
  }

  .rail__footer {
    /* The account menu opens from the rail's edge, not from beside the toggle. */
    position: relative;
    display: grid;
    grid-template-areas: "toggle" "user";
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0.25rem;
    reading-flow: grid-rows;

    &:has(.user-menu[data-state="open"]) {
      z-index: 20;
    }

    .user-menu {
      position: static;
      grid-area: user;
    }

    .rail__toggle {
      grid-area: toggle;
    }
  }

  .rail .rail__toggle svg {
    transition: rotate var(--pane-duration) var(--pane-easing);
  }

  /*
   * Every width can expand the rail. Wide screens follow data-rail and narrow
   * ones data-rail-narrow, so a choice made on one never covers the other.
   */
  @media (width >= 48rem) {
    .shell[data-rail="expanded"] {
      .rail {
        inline-size: var(--rail-expanded-width);
      }

      .rail__group-label {
        display: block;
      }

      .rail__footer {
        grid-template-areas: "user toggle";
        grid-template-columns: minmax(0, 1fr) 2.25rem;
      }

      .rail__toggle svg {
        rotate: 180deg;
      }

      /* The labels are on screen, so tooltips would only repeat them. */
      .rail .tooltip {
        display: none;
      }
    }
  }

  @media (width < 48rem) {
    .shell[data-rail-narrow="expanded"] {
      .rail {
        inline-size: var(--rail-expanded-width);
      }

      .rail:has(+ .shell-list) {
        margin-inline-end: calc(var(--rail-width) + 1px - var(--rail-expanded-width));
        box-shadow: 8px 0 24px oklch(0 0 0 / 12%);
      }

      .rail__group-label {
        display: block;
      }

      .rail__footer {
        grid-template-areas: "user toggle";
        grid-template-columns: minmax(0, 1fr) 2.25rem;
      }

      .rail__toggle svg {
        rotate: 180deg;
      }

      .rail .tooltip {
        display: none;
      }
    }
  }

  .rail__nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    /* The tooltip controller supplies viewport coordinates outside the scroller. */
    .tooltip {
      position: fixed;
      inset-block-start: var(--tooltip-top);
      inset-inline-start: calc(var(--tooltip-left) + 0.5rem);
    }
  }

  .rail__group {
    flex-shrink: 0;

    & + & {
      padding-block-start: 0.75rem;
      border-block-start: 1px solid var(--sidebar-border);
    }
  }

  .rail__group--bottom {
    margin-block-start: auto;
  }

  .rail__group-label {
    display: none;
    padding: 0 0.5rem 0.375rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }

  .rail__menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .shell-list {
    display: flex;
    flex-direction: column;
    inline-size: var(--list-width);
    min-inline-size: 0;
    min-block-size: 0;
  }

  .list-pane {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    block-size: 100%;
  }

  .list-pane__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-block-size: var(--shell-header-height);
    padding-inline: 1rem 0.5rem;
    border-block-end: 1px solid var(--sidebar-border);
  }

  .list-pane__title {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-normal);
    line-height: var(--text-base--line-height);
  }

  .list-pane__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .list-filter__trigger {
    position: relative;
  }

  /* Says the list is not the default one. */
  .list-filter__trigger--active::after {
    content: "";
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border: 2px solid var(--sidebar);
    border-radius: 999px;
    background: var(--sidebar-primary);
  }

  /* Wide enough for two date fields side by side, with their calendar buttons. */
  .list-filter {
    inline-size: 24rem;
  }

  .list-filter__form {
    display: grid;
    gap: 1rem;
  }

  /* The order reads in the chosen sort's terms, A–Z first by name. */
  .list-filter__by-name,
  .list-filter__form:has([name="sort"][value="name"]:checked) .list-filter__by-time {
    display: none;
  }

  .list-filter__form:has([name="sort"][value="name"]:checked) {
    .list-filter__by-name {
      display: inline;
    }

    .list-filter__order .toggle-group__item:has([value="asc"]) {
      order: -1;
    }
  }

  .list-filter__dates {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;

    legend {
      grid-column: 1 / -1;
    }

    .input {
      min-inline-size: 0;
      padding-inline: 0.5rem;
    }
  }

  .list-filter__actions {
    display: flex;
    justify-content: end;
    gap: 0.5rem;
  }

  .list-filter__chips {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0.5rem 1rem;
    border-block-end: 1px solid var(--sidebar-border);
    list-style: none;
  }

  .list-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-block-size: 1.75rem;
    padding-inline: 0.625rem 0.375rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-xs--line-height);
    text-decoration: none;
    transition: background-color 150ms ease-out, transform 150ms ease-out;

    svg {
      inline-size: 0.875rem;
      block-size: 0.875rem;
      color: var(--muted-foreground);
    }

    &:hover {
      background: var(--accent);

      svg {
        color: var(--foreground);
      }
    }

    &:active {
      transform: scale(0.97);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
  }

  .list-pane__header:has(+ .list-pane__tabs) {
    border-block-end: 0;
  }

  .list-pane__tabs {
    flex-shrink: 0;

    .tabs__bar--underline {
      padding-inline: 1rem;
      border-color: var(--sidebar-border);
    }
  }

  .list-pane__items {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .list-pane__empty {
    padding: 1rem;
  }

  .list-pane__news {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 0.5rem;
    border-block-end: 1px solid var(--sidebar-border);
    transition: opacity 200ms ease-out, scale 200ms ease-out;

    &[hidden] {
      display: none;
    }

    @starting-style {
      opacity: 0;
      scale: 0.95;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  /* sidebar-09's mail item. */
  .list-item {
    display: grid;
    /* Long titles truncate instead of widening the row. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border-block-end: 1px solid var(--sidebar-border);
    color: var(--sidebar-foreground);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
    text-decoration: none;
    transition: background-color 150ms ease-out;

    &:hover,
    &[aria-current="page"] {
      background: var(--sidebar-accent);
      color: var(--sidebar-accent-foreground);
    }

    &:focus-visible {
      outline: 2px solid var(--sidebar-ring);
      outline-offset: -2px;
    }
  }

  /* A row with an avatar or icon beside its text. */
  .list-item:has(.list-item__media) {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: center;
  }

  .list-item__media {
    grid-row: span 3;

    svg {
      display: block;
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }
  }

  .list-item__body {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
  }

  .list-item__row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .list-item__title {
    min-inline-size: 0;
    overflow: hidden;
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* A title whose end tells items apart, such as a suite and its simulated twin. */
  .list-item__title--wrap {
    white-space: normal;
    text-wrap: pretty;
  }

  .list-item__time {
    flex-shrink: 0;
    margin-inline-start: auto;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
  }

  .list-item__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .list-item__teaser {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .list-item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  /* Navigation and actions share a toolbar above the scrolling content. */
  .shell-main {
    display: grid;
    grid-area: main;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    min-inline-size: 0;
    min-block-size: 0;
    background: var(--background);
  }

  .shell-main__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    block-size: var(--shell-header-height);
    padding-inline-start: 0.75rem;
    border-block-end: 1px solid var(--border);
  }

  .shell-main__toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
    border-block-end: 1px solid var(--border);

    > * {
      flex-shrink: 0;
    }
  }

  .shell-main__actions {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0.25rem;
    margin-inline-start: auto;
  }

  .shell-main__trigger {
    min-inline-size: 2.75rem;
  }

  .shell-main__content {
    container: shell-main / inline-size;
    display: flex;
    grid-column: 1 / -1;
    flex-direction: column;
    min-block-size: 0;
    overflow-y: auto;
  }

  .shell-main__flash:has(.alert) {
    padding: 1rem 1rem 0;
  }

  /* A padded, scrolling page inside the main pane or a tab panel. */
  .shell-page {
    display: grid;
    align-content: start;
    gap: 1.25rem;
    padding: 1rem;
    overflow-y: auto;

    /* Low specificity so a screen can widen its form. */
    & :where(form) {
      display: grid;
      gap: 1rem;
      max-inline-size: 40rem;
    }
  }

  /* A titled group of read-only settings on a record page. */
  .settings-section {
    display: grid;
    gap: 0.75rem;
    max-inline-size: 40rem;

    & + & {
      padding-block-start: 1.25rem;
      border-block-start: 1px solid var(--border);
    }

    a {
      text-underline-offset: 0.2em;
    }
  }

  /* Once the main pane is wider than a phone, a page's sections, articles,
     and forms become cards. Sections and articles that follow one another
     sit side by side when there is room and wrap down. Forms, a lone card,
     a card marked shell-page__wide, and every other child keep the full row. */
  @container shell-main (width >= 30rem) {
    .shell-page {
      grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));

      > * {
        grid-column: 1 / -1;
      }

      /* Operator accounts and span trees draw their own card. */
      > :is(section, article, form, .settings-section):not(.button_to, .button-form, .operator-account, .span-tree) {
        align-content: start;
        margin-block: 0;
        padding: 1.25rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--card);
        color: var(--card-foreground);
        box-shadow: 0 1px 2px oklch(0 0 0 / 6%);
      }

      > :is(section, article, .settings-section),
      > form:not(.button_to, .button-form) {
        max-inline-size: none;
      }

      > :is(section, article):not(.shell-page__wide):is(
          :is(section, article):not(.shell-page__wide) + *,
          :has(+ :is(section, article):not(.shell-page__wide))
        ) {
        grid-column: auto;
      }
    }
  }

  .settings-section__title {
    font-size: var(--text-base);
    letter-spacing: var(--tracking-normal);
    line-height: var(--text-base--line-height);
  }

  .profile {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .profile__text {
    display: grid;
    gap: 0.125rem;
    min-inline-size: 0;
  }

  .profile__name {
    overflow-wrap: anywhere;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--text-lg--line-height);
  }

  .profile-phones {
    display: grid;
    gap: 0.75rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;

    legend {
      margin-block-end: 0.75rem;
      padding: 0;
    }

    > .button {
      justify-self: start;
    }
  }

  .profile-phones__rows {
    display: grid;
    gap: 0.75rem;

    &:empty {
      display: none;
    }
  }

  .profile-phones__row {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);

    &:has(input[name$="[retire]"]:checked) {
      background: var(--muted);
    }
  }

  .empty-state {
    display: grid;
    flex: 1;
    place-content: center;
    justify-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;

    .button {
      margin-block-start: 0.75rem;
    }
  }

  .empty-state__icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    margin-block-end: 0.5rem;
    border-radius: var(--radius-lg);
    background: var(--muted);
    color: var(--muted-foreground);

    svg {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }
  }

  .empty-state__title {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
  }

  .empty-state__description {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  /* sidebar-15's right sidebar. */
  .shell-details {
    display: none;
    grid-area: details;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sidebar);
    color: var(--sidebar-foreground);
  }

  .details-pane {
    display: grid;
  }

  .details-pane__section {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-block-end: 1px solid var(--sidebar-border);
  }

  .details-pane__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-normal);
    line-height: var(--text-xs--line-height);
  }

  .details-pane__count {
    font-variant-numeric: tabular-nums;
  }

  .details-pane__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .details-pane__note {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .details-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);

    div {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
    }

    dt {
      color: var(--muted-foreground);
    }

    dd {
      margin: 0;
      text-align: end;
      overflow-wrap: anywhere;
    }

    .details-pane__badges {
      justify-content: flex-end;
    }
  }

  .details-list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;

    div {
      gap: 0.375rem;
    }
  }

  .participant-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .participant,
  .participant__link,
  .details-card {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-inline-size: 0;
  }

  .participant__link {
    inline-size: 100%;
    min-block-size: 2.75rem;
    border-radius: var(--radius-md);
  }

  .participant--left {
    opacity: 0.6;
  }

  .call-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .call-list__item {
    display: grid;
    gap: 0.5rem;
    min-inline-size: 0;
  }

  .call-list__audio {
    inline-size: 100%;
    block-size: 2.5rem;
  }

  /* A call's title names who placed it, which can be long; it wraps rather than hiding its time. */
  .call-list__item .participant__name {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .call-list__note {
    margin-block-start: 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    overflow-wrap: anywhere;
  }

  /* How a call went, step by step, for staff to see why it failed. */
  .call-list__events {
    margin-block-start: 0.375rem;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);

    & > summary {
      cursor: pointer;
      color: var(--muted-foreground);
      inline-size: fit-content;
      border-radius: calc(var(--radius) - 4px);

      &:hover {
        color: var(--foreground);
      }

      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
    }

    & ol {
      display: grid;
      gap: 0.375rem;
      margin: 0.5rem 0 0;
      padding-inline-start: 0.75rem;
      border-inline-start: 1px solid var(--border);
      list-style: none;
    }

    & li {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 0.5rem;
    }

    & time {
      color: var(--muted-foreground);
      font-variant-numeric: tabular-nums;
    }
  }

  .call-list__event-detail {
    grid-column: 2;
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
  }

  .participant__text {
    display: grid;
    min-inline-size: 0;
    line-height: var(--leading-tight);
  }

  .participant__name {
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .participant__role {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }

  .details-card {
    padding: 0.75rem;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-lg);
    background: var(--background);
  }

  .participant__link,
  .details-card {
    color: inherit;
    text-decoration: none;
    transition: background-color 150ms ease-out, transform 150ms ease-out;

    &:hover {
      background: var(--sidebar-accent);
    }

    &:active {
      transform: scale(0.97);
    }

    &:focus-visible {
      outline: 2px solid var(--sidebar-ring);
      outline-offset: 2px;
    }
  }

  .details-card__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-md);
    background: var(--sidebar-primary);
    color: var(--sidebar-primary-foreground);

    svg {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }

  .shell-status {
    display: flex;
    grid-area: status;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Fixed, not a minimum: panels and sheets sit 1.75rem up, and the panel
       trigger, a permanent element, briefly leaves during Turbo visits. */
    block-size: calc(1.75rem + var(--ruby-native-safe-area-bottom));
    padding-block-end: var(--ruby-native-safe-area-bottom);
    padding-inline: 0.75rem;
    border-block-start: 1px solid var(--border);
    background: var(--background);
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }

  .shell-status__start,
  .shell-status__end {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-inline-size: 0;
    white-space: nowrap;
  }

  .shell-status__brand {
    display: grid;
    flex-shrink: 0;
    place-items: center;

    .momntum-mark {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }

    .momntum-mark * {
      animation-name: none;
    }

    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
      &:hover .momntum-mark__wing {
        animation-name: momntum-flap;
      }

      &:hover .momntum-mark__tail {
        animation-name: momntum-flicker;
      }
    }
  }

  .shell-status__space,
  .shell-status__end > * {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* On a narrow screen both halves give way, each clipping its own end,
     so neither runs under the other. */
  .shell-status__start,
  .shell-status__end {
    overflow: hidden;
  }

  /* The clip reaches past the start's edges, inside the bar's padding and
     the gap, so its controls' focus rings and the panel trigger's pull
     into the padding still show. That reach overlaps the panes above, so
     only its contents take the pointer. */
  .shell-status__start {
    margin: -0.5rem;
    padding: 0.5rem;
    pointer-events: none;

    > * {
      pointer-events: auto;
    }
  }

  /* Live only means something on pages that listen for broadcasts. The
     conversation panel listens for its own, so it does not count. */
  .shell-status__live {
    display: none;
    align-items: center;
    gap: 0.375rem;
  }

  .shell:has(turbo-cable-stream-source:not(.conversation-panel *)) .shell-status__live {
    display: inline-flex;
  }

  .shell-status__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--muted-foreground);
  }

  .shell-status__live-text--on {
    display: none;
  }

  .shell:has(turbo-cable-stream-source[connected]:not(.conversation-panel *)) {
    .shell-status__dot {
      background: light-dark(oklch(0.627 0.194 149.214), oklch(0.723 0.219 149.579));
    }

    .shell-status__live-text--on {
      display: inline;
    }

    .shell-status__live-text--off {
      display: none;
    }
  }

  /* Sheets: the list or details pane over the main pane. */
  .shell__scrim {
    display: none;
  }

  .shell[data-sheet] .shell__scrim {
    position: fixed;
    inset: 0;
    inset-block-end: calc(1.75rem + var(--ruby-native-safe-area-bottom));
    z-index: 30;
    display: block;
    padding: 0;
    border: 0;
    background: oklch(0 0 0 / 10%);
    cursor: pointer;
    transition: opacity 200ms ease-out;

    @supports (backdrop-filter: blur(2px)) {
      backdrop-filter: blur(2px);
    }

    @starting-style {
      opacity: 0;
    }
  }

  .shell[data-sheet="sidebar"] .shell-sidebar,
  .shell[data-sheet="details"] .shell-details {
    position: fixed;
    inset-block: 0 calc(1.75rem + var(--ruby-native-safe-area-bottom));
    z-index: 40;
    display: flex;
    flex-direction: row;
    max-inline-size: calc(100% - 3rem);
    padding-block-start: var(--ruby-native-safe-area-top);
    box-shadow: 0 8px 24px oklch(0 0 0 / 12%);
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease-out;
  }

  .shell[data-sheet="sidebar"] .shell-sidebar {
    inset-inline-start: 0;

    @starting-style {
      opacity: 0;
      transform: translateX(-1.25rem);
    }
  }

  .shell[data-sheet="details"] .shell-details {
    inset-inline-end: 0;
    display: block;
    inline-size: var(--details-width);

    @starting-style {
      opacity: 0;
      transform: translateX(1.25rem);
    }
  }

  /* Only the closing sheet slides away; a docked pane must not move with it. */
  .shell[data-sheet][data-closing] .shell__scrim {
    opacity: 0;
  }

  .shell[data-sheet="sidebar"][data-closing] .shell-sidebar {
    opacity: 0;
    transform: translateX(-1.25rem);
  }

  .shell[data-sheet="details"][data-closing] .shell-details {
    opacity: 0;
    transform: translateX(1.25rem);
  }

  @media (width >= 48rem) {
    .shell,
    .shell[data-focus="list"] {
      grid-template-areas:
        "sidebar main"
        "status status";
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto;

      .shell-sidebar {
        display: flex;
      }

      .shell-list {
        flex: none;
      }

      .shell-main {
        display: grid;
      }
    }

    /* The toolbar and content share a sheet below the breadcrumbs. */
    .shell {
      background: var(--sidebar);
    }

    .shell-main {
      grid-template-rows: var(--shell-header-height) auto minmax(0, 1fr);
      background: transparent;

      /* The paper: drawn behind the toolbar row and the content together. */
      &::before {
        content: "";
        grid-row: 2 / -1;
        grid-column: 1 / -1;
        margin: 0 0.5rem 0.5rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--background);
        box-shadow: 0 1px 2px oklch(0 0 0 / 4%);
      }
    }

    .shell-main__header {
      grid-row: 1;
      grid-column: 1 / -1;
      padding-inline: 1rem;
      border-block-end: 0;
    }

    .shell-main__toolbar {
      grid-row: 2;
      grid-column: 1 / -1;
      margin-inline: calc(0.5rem + 1px);
      padding: 0.5rem;
      border-block-end: 0;
      border-start-start-radius: var(--radius-xl);
      border-start-end-radius: var(--radius-xl);
    }

    .shell-main__content {
      grid-row: 3;
      grid-column: 1 / -1;
      margin: 0 calc(0.5rem + 1px) calc(0.5rem + 1px);
      border-radius: calc(var(--radius-xl) - 1px);
    }

    .shell:has(.shell-list) .shell-main__content,
    .shell-main:has(.shell-main__toolbar .tabs__bar, .shell-main__actions > *) .shell-main__content {
      border-start-start-radius: 0;
      border-start-end-radius: 0;
    }

    .shell:not(:has(.shell-list)) .shell-main__toolbar:not(:has(.tabs__bar, .shell-main__actions > *)) {
      display: none;
    }

    /*
     * Collapsing the list leaves the rail, like collapsible="icon". The list
     * slides shut by its width while its content keeps full width, so nothing
     * reflows mid-animation. Visibility flips after closing so the hidden list
     * leaves the tab order and the accessibility tree.
     */
    .shell-list {
      /* Pinned to the right edge, the content slides out under the rail instead of being wiped. */
      align-items: flex-end;
      overflow: hidden;
      transition: inline-size var(--pane-duration) var(--pane-easing), visibility 0s linear 0s;

      .list-pane {
        inline-size: var(--list-width);
      }
    }

    .shell[data-list="closed"] .shell-list {
      inline-size: 0;
      visibility: hidden;
      transition: inline-size var(--pane-duration) var(--pane-easing), visibility 0s linear var(--pane-duration);
    }

    .shell:not(:has(.shell-list)) .shell-main__trigger--list {
      display: none;
    }

    .shell-page {
      padding: 1.5rem;
    }
  }

  @media (width >= 80rem) {
    .shell,
    .shell[data-focus="list"] {
      grid-template-areas:
        "sidebar main details"
        "status status status";
      grid-template-columns: auto minmax(0, 1fr) auto;
    }

    /* Docked details slide open and shut by width, like the list. */
    .shell-details {
      display: block;
      inline-size: var(--details-width);
      overflow-x: hidden;
      transition: inline-size var(--pane-duration) var(--pane-easing), visibility 0s linear 0s;

      .shell-details__header,
      .details-pane {
        inline-size: var(--details-width);
      }
    }

    .shell[data-details="closed"] .shell-details {
      inline-size: 0;
      visibility: hidden;
      transition: inline-size var(--pane-duration) var(--pane-easing), visibility 0s linear var(--pane-duration);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .shell[data-sheet] .shell__scrim,
    .shell[data-sheet] .shell-sidebar,
    .shell[data-sheet] .shell-details,
    .shell-list,
    .shell[data-list] .shell-list,
    .shell-details,
    .shell[data-details] .shell-details,
    .rail,
    .rail:hover,
    .rail__toggle svg,
    .list-item,
    .participant__link,
    .details-card {
      transition: none;
    }

    .participant__link:active,
    .details-card:active {
      transform: none;
    }
  }
}