.skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.app-shell,
.app-footer {
  min-block-size: 0;
  color: var(--color-text);
  background: var(--color-canvas);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.app-shell__header {
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 6%);
}

.app-shell__bar,
.app-page-title,
.flash-stack,
.app-footer__inner {
  inline-size: min(100% - clamp(1rem, 4vw, 3rem), var(--content-wide));
  margin-inline: auto;
}

.app-shell__bar {
  min-block-size: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}

.app-brand:hover { color: var(--color-primary-hover); }

.app-brand__mark {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
}

.app-brand small { display: block; color: var(--color-text-muted); font-weight: 500; }

.app-menu { flex: 1; }
.app-menu__toggle { display: none; }

.app-menu__panel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

.app-shell__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.app-shell__nav a {
  min-block-size: var(--control-min);
  padding: var(--space-2) var(--space-3);
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.app-shell__nav a:hover { color: var(--color-primary-hover); background: var(--color-surface-muted); }
.app-shell__nav a[aria-current="page"] { color: var(--color-on-primary); background: var(--color-primary); }

.app-shell__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-shell__theme { display: grid; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.app-shell__theme select { min-block-size: 2.25rem; padding-inline: var(--space-2); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.app-shell__identity { max-inline-size: 14rem; color: var(--color-text-muted); font-size: var(--text-sm); }
.app-shell__logout { margin: 0; }

.app-page-title { padding-block: clamp(var(--space-4), 2.5vw, var(--space-8)); }
.app-page-title h1 { color: var(--color-text); font-size: var(--text-2xl); }
.app-page-title p:last-child { max-inline-size: 65ch; margin-block-start: var(--space-2); color: var(--color-text-muted); }
.app-page-title__eyebrow { color: var(--color-primary); font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.flash-stack { padding-block-start: var(--space-4); display: grid; gap: var(--space-3); }
.flash-stack--toasts { padding-block-start: 0; }

.app-footer { margin-block-start: clamp(var(--space-8), 6vw, var(--space-12)); border-block-start: 1px solid var(--color-border); }
.app-footer__inner { min-block-size: 5rem; padding-block: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--color-text-muted); }
.app-footer__inner p { margin: 0; }
.app-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }

@media (max-width: 64rem) {
  .app-shell__bar { padding-block: var(--space-3); align-items: flex-start; }
  .app-menu { flex: 0 0 auto; }
  .app-menu__toggle {
    min-block-size: var(--control-min);
    padding: var(--space-2) var(--space-4);
    display: inline-flex;
    align-items: center;
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-weight: 750;
    list-style: none;
  }
  .app-menu__toggle::-webkit-details-marker { display: none; }
  .app-menu__panel {
    position: absolute;
    z-index: 50;
    inset-block-start: 4.25rem;
    inset-inline: 0.5rem;
    padding: var(--space-4);
    align-items: stretch;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
  }
  .app-menu:not([open]) .app-menu__panel { display: none; }
  .app-shell__nav,
  .app-shell__controls { align-items: stretch; flex-direction: column; }
  .app-shell__nav a { justify-content: center; }
  .app-shell__identity { max-inline-size: none; text-align: center; }
  .app-shell__logout .button { inline-size: 100%; }
}

@media (max-width: 40rem) {
  .app-brand small { display: none; }
  .app-footer__inner { align-items: flex-start; flex-direction: column; }
}

@media print {
  .skip-link,
  .app-shell,
  .app-footer { display: none; }
}