/* The web frame: launch mark, sidebar, workspace, page bar, flows and overlay hosts. Built from the tokens; the app has no equivalent for a wide screen. */
@layer shell {
  .rtg-boot,
  .rtg-splash {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: var(--surface-app);
  }

  .rtg-boot img { width: 104px; height: auto; }
  .rtg-boot__light { display: none; }
  [data-theme="light"] .rtg-boot__dark { display: none; }
  [data-theme="light"] .rtg-boot__light { display: block; }

  .rtg-splash-mark {
    display: grid;
    place-items: center;
    max-width: 80vw;
  }

  .rtg-splash-mark__stage {
    width: 100%;
    height: 100%;
  }

  .rtg-splash__failure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-section);
    width: min(420px, 100% - 2 * var(--pad-screen-mobile));
  }

  .rtg-skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 60;
    padding: var(--pad-control-y) var(--pad-control-x);
    border-radius: var(--radius-control);
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    transform: translateY(-200%);
  }

  .rtg-skip-link:focus-visible { transform: none; }

  .rtg-app {
    min-height: 100dvh;
  }

  .rtg-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    padding: var(--space-6) var(--space-4) var(--space-5);
    background: var(--surface-glass-bar);
    border-right: var(--stroke-hairline) solid var(--border-subtle);
    -webkit-backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
    backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
  }

  .rtg-sidebar__brand {
    align-self: flex-start;
    margin: 0 0 var(--space-8) var(--space-2);
    padding: var(--space-1);
    border-radius: var(--radius-control);
  }

  .rtg-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .rtg-sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--gap-tight);
    min-height: var(--touch-target);
    padding: 0 var(--space-4) 0 var(--space-2);
    border: var(--stroke-hairline) solid transparent;
    border-radius: var(--radius-control);
    color: var(--text-muted);
    transition:
      background-color var(--duration-hover) var(--ease-standard),
      border-color var(--duration-hover) var(--ease-standard),
      color var(--duration-hover) var(--ease-standard),
      transform var(--duration-press) var(--ease-incoming);
  }

  .rtg-sidebar__indicator {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
  }

  .rtg-sidebar__indicator .rtg-icon { --icon-size: var(--icon-base); }

  .rtg-sidebar__label {
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-caps);
    line-height: var(--lh-snug);
    text-transform: uppercase;
  }

  .rtg-sidebar__item.is-selected {
    background: var(--primary-container);
    border-color: var(--border-accent);
    color: var(--on-primary-container);
  }

  @media (hover: hover) {
    .rtg-sidebar__item:hover:not(.is-selected, :active) {
      background: var(--state-hover);
      color: var(--text-body);
    }
  }

  .rtg-sidebar__item:active:not(.is-selected) {
    background: var(--state-press);
    transform: scale(var(--press-scale-tile));
  }

  .rtg-sidebar__foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-5);
    border-top: var(--stroke-hairline) solid var(--divider);
  }

  .rtg-sidebar__account {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: var(--gap-tight);
    min-width: 0;
    min-height: var(--touch-target);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    border-radius: var(--radius-control);
    transition: background-color var(--duration-hover) var(--ease-standard);
  }

  @media (hover: hover) {
    .rtg-sidebar__account:hover { background: var(--state-hover); }
  }

  .rtg-sidebar__account.is-selected { background: var(--state-selected); }

  .rtg-sidebar__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .rtg-sidebar__name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-snug);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rtg-sidebar__handle {
    overflow: hidden;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rtg-workspace {
    min-height: 100dvh;
    margin-left: var(--sidebar-width);
  }

  .rtg-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    outline: none;
  }

  .rtg-page__bar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding-inline: max(var(--space-3), calc((100% - var(--content-width)) / 2 + var(--space-5)));
  }

  .rtg-account-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    border-radius: var(--radius-pill);
  }

  .rtg-page__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--gap-section);
    width: 100%;
    margin: 0 auto;
    padding: var(--space-7) var(--pad-screen-web) var(--gap-block);
    animation: rtg-enter var(--duration-enter) var(--ease-throttle) both;
  }

  .rtg-page__body--prose { max-width: calc(var(--prose-width) + 2 * var(--pad-screen-web)); }
  .rtg-page__body--narrow { max-width: calc(760px + 2 * var(--pad-screen-web)); }
  .rtg-page__body--content { max-width: calc(var(--content-width) + 2 * var(--pad-screen-web)); }
  .rtg-page__body--full { max-width: none; }

  .rtg-shell-tab-bar { display: none; }

  .rtg-toast__stack {
    position: fixed;
    right: var(--pad-screen-web);
    bottom: var(--pad-screen-web);
    left: var(--pad-screen-web);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    pointer-events: none;
  }

  body:has(.rtg-sidebar) .rtg-toast__stack { left: calc(var(--sidebar-width) + var(--pad-screen-web)); }

  .rtg-toast__stack .rtg-toast__host {
    position: static;
    width: 100%;
  }

  .rtg-not-found {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: var(--space-9) var(--pad-screen-web);
    background-color: var(--surface-app);
  }

  .rtg-not-found__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: 440px;
    text-align: center;
  }

  .rtg-not-found__body h1,
  .rtg-not-found__body p { margin: 0; }

  .rtg-not-found__body .rtg-button { margin-top: var(--space-4); }

  .rtg-not-found__code {
    margin-top: var(--space-7);
    color: var(--text-accent);
    font-family: var(--font-mono);
    font-size: var(--fs-x6l);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: 1;
  }

  .rtg-flow {
    --flow-width: 720px;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--surface-app);
  }

  .rtg-flow__head {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .rtg-flow__head .rtg-flow-bar {
    padding-inline: max(var(--space-3), calc((100% - var(--flow-width) - var(--space-9)) / 2));
  }

  .rtg-flow__rail {
    padding: var(--space-3) max(var(--pad-screen-mobile), calc((100% - var(--flow-width)) / 2)) 0;
  }

  .rtg-flow__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--gap-section);
    width: 100%;
    max-width: calc(var(--flow-width) + 2 * var(--pad-screen-web));
    margin: 0 auto;
    padding: var(--space-8) var(--pad-screen-web) var(--gap-block);
    outline: none;
    animation: rtg-enter var(--duration-enter) var(--ease-throttle) both;
  }

  .rtg-flow--wide { --flow-width: var(--content-width); }

  .rtg-flow__footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
  }

  .rtg-flow__footer .rtg-screen-footer {
    padding-inline: max(var(--pad-screen-mobile), calc((100% - var(--flow-width)) / 2));
  }

  .rtg-flow__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gap-inline);
  }

  @media (min-width: 960px) {
    .rtg-account-button { display: none; }
  }

  @media (max-width: 959px) {
    .rtg-sidebar { display: none; }

    .rtg-workspace { margin-left: 0; }

    .rtg-page__bar { padding-inline: var(--space-3); }

    .rtg-page__body {
      padding: var(--space-5) var(--pad-screen-mobile) calc(var(--tab-bar-height) + var(--space-11));
    }

    .rtg-shell-tab-bar {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 20;
      display: block;
    }

    .rtg-toast__stack,
    body:has(.rtg-sidebar) .rtg-toast__stack {
      left: var(--pad-screen-mobile);
      right: var(--pad-screen-mobile);
      bottom: var(--pad-screen-mobile);
    }

    body:has(.rtg-shell-tab-bar) .rtg-toast__stack { bottom: calc(var(--tab-bar-height) + var(--space-8)); }

    .rtg-flow__body {
      padding: var(--space-6) var(--pad-screen-mobile) var(--space-11);
    }

    .rtg-flow__actions > .rtg-button { flex: 1 1 0; }
  }
}