.app-shell {
  display: grid;
  grid-template-rows: calc(var(--ui-header-height) - 2px) minmax(0, 1fr) calc(var(--ui-footer-height) - 2px);
  row-gap: 2px;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--ui-shell-separator);
}

.app-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--ui-shell-inline-padding);
  background: var(--ui-bg);
  font-size: var(--ui-font-size-body-sm);
}

.app-header__identity, .app-header__actions { display: flex; align-items: center; }
.app-header__identity { gap: var(--header-identity-gap); min-width: 0; }
.app-header__actions { gap: var(--header-action-gap); }
.app-header__meta { display: flex; align-items: center; justify-self: end; gap: var(--header-meta-gap); }
.app-header__social-links { display: flex; align-items: center; gap: var(--header-action-gap); }
.app-brand { display: flex; flex: none; align-items: baseline; gap: var(--header-brand-gap); }
.app-brand__mark { align-self: center; display: block; width: var(--ui-brand-icon-size); height: auto; }
.app-brand__name { font-size: var(--ui-font-size-brand); font-weight: var(--ui-font-weight-strong); letter-spacing: var(--ui-letter-spacing-title); white-space: nowrap; }
.app-version { align-self: baseline; color: var(--ui-value-muted); font-size: var(--ui-font-size-caption); font-weight: var(--ui-font-weight-light); letter-spacing: var(--ui-letter-spacing-meta); line-height: var(--ui-line-height-solid); white-space: nowrap; }
.app-header__identity-divider { flex: none; width: 1px; height: 13px; background: var(--ui-border); }
.workspace-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--ui-font-weight-workspace-title); cursor: text; }
.save-state { color: var(--ui-value-muted); }

.app-main {
  display: grid;
  grid-template-columns: calc(var(--ui-page-library-rail-width) - 2px) calc(var(--ui-left-panel-width) - 2px) minmax(0, 1fr);
  column-gap: 2px;
  min-height: 0;
  overflow: hidden;
  background: var(--ui-shell-separator);
}

.app-main:has(.page-library.is-open) {
  grid-template-columns: calc(var(--ui-page-library-width) - 2px) calc(var(--ui-left-panel-width) - 2px) minmax(0, 1fr);
}

.sidebar {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--ui-sidebar-block-padding) var(--ui-sidebar-inline-padding);
  background: var(--ui-bg);
}
.sidebar--settings {
  position: fixed;
  z-index: 80;
  top: calc(var(--ui-header-height) + var(--ui-settings-panel-offset));
  right: var(--ui-settings-panel-offset);
  bottom: calc(var(--ui-footer-height) + var(--ui-settings-panel-offset));
  width: min(var(--ui-settings-panel-width), 50vw);
  min-width: 200px;
  max-width: 50vw;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 0;
  background: var(--ui-bg);
  box-shadow: var(--ui-shadow-panel);
  scrollbar-gutter: stable;
}
.sidebar--settings[hidden] { display: none; }
.sidebar__title { margin: 0 0 var(--ui-sidebar-title-gap); color: var(--ui-panel-title-color); font-size: var(--ui-panel-title-font-size); font-weight: var(--ui-panel-title-font-weight); letter-spacing: var(--ui-panel-title-letter-spacing); text-transform: var(--ui-panel-title-text-transform); }

.status-bar {
  display: flex;
  align-items: center;
  gap: var(--status-item-gap);
  padding: 0 var(--ui-status-inline-padding);
  color: var(--ui-value-muted);
  background: var(--ui-bg);
  font-size: var(--ui-font-size-caption);
  white-space: nowrap;
}
.status-bar__save { margin-inline-start: auto; }

.mobile-gate { display: none; }

@media (max-width: 899px), (hover: none) and (pointer: coarse) {
  body { background: var(--canvas-bg); }
  .app-shell,
  .info-dialog { display: none !important; }
  .mobile-gate {
    display: grid;
    align-content: center;
    justify-items: start;
    width: 100%;
    height: 100%;
    padding: 32px;
    background: var(--canvas-bg);
  }
  .mobile-gate__brand { display: flex; align-items: center; gap: var(--compatibility-brand-gap); margin-bottom: 28px; font-size: var(--ui-font-size-body-sm); font-weight: var(--ui-font-weight-strong); }
  .mobile-gate__brand img { display: block; width: var(--ui-compatibility-brand-icon-size); height: auto; }
  .mobile-gate h1 { max-width: 310px; margin: 0 0 18px; font-size: var(--ui-font-size-compatibility-title); font-weight: var(--ui-font-weight-compatibility-title); line-height: var(--ui-line-height-compact); letter-spacing: var(--ui-letter-spacing-display); }
  .mobile-gate a { color: var(--ui-value-muted); font-size: var(--ui-font-size-body-sm); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ui-accent) 45%, transparent); }
  .mobile-gate a:hover { color: var(--ui-accent); }
}