/*
  SHELL: the app frame. A skip link, a sticky 44px top bar (brand, nav, key-hint slot, theme
  switch, account slot), the flash band and the main landmark. Reads semantic tokens only.
*/

.s-skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-action);
  color: var(--color-action-text);
  font-weight: var(--weight-medium);
  transform: translateY(-300%);
}

.s-skip-link:focus {
  color: var(--color-action-text);
  transform: none;
}

.s-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--topbar-height);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.s-hints {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
}

.s-theme {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
}

.s-account {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.s-account:empty {
  display: none;
}

.s-main {
  display: block;
  min-height: calc(100vh - var(--topbar-height));
}

.s-main:focus {
  outline: none;
}

.s-flash {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: var(--container-max);
  margin: var(--space-3) auto 0;
  padding-inline: var(--gutter);
}

@media (max-width: 64rem) {
  .s-hints {
    display: none;
  }

  .s-theme {
    margin-left: auto;
  }
}

/* Narrow screens: the account slot takes its own row rather than pushing the bar off-canvas. */
@media (max-width: 40rem) {
  .s-topbar {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .s-account {
    margin-left: auto;
  }
}