@layer layout {
  /* body/main are deliberate app-wide defaults; everything else in this
     layer is scoped to a class (.site-nav is the marketing navbar -- keep
     bare element selectors out of here so app screens like the portal
     don't inherit marketing chrome). */
  body {
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  nav.site-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(250, 247, 242, 0.9); /* frosted --surface-page */
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--spacing-md) var(--spacing-lg);

    a {
      text-decoration: none;
      color: var(--text-primary);
    }

    ul {
      display: flex;
      gap: var(--spacing-xl);
      align-items: center;
      list-style: none;

      a {
        color: var(--text-secondary);
        font-weight: 500;
        font-size: var(--text-sm);
        text-decoration: none;
        letter-spacing: var(--tracking-tight);
        transition: color 0.25s;
      }
      a:hover {
        color: var(--text-primary);
      }
    }
  }

  /* Top chrome (layouts/application): one sticky wrapper holding the
     maintenance banner and the marketing navbar. Both sit in normal flow
     inside it, so the wrapper's height is always the sum of whatever
     renders — a wrapped banner message pushes the navbar down instead of
     overlapping it, and the sticky footer keeps working because the wrapper
     is just another flex row in the body column. */
  .site-chrome {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
  }

  /* Maintenance banner (shared/_maintenance_banner — DatabaseStatus degraded
     mode or an announced MaintenanceNotice): the first row inside
     .site-chrome, so it rides the wrapper's stickiness and its height —
     wrapped message included — simply pushes the navbar down. Same warning
     treatment as the portal's broker banner, deliberately not its classes —
     marketing must not reach into portal.css. */
  .maintenance-banner {
    min-height: 40px; /* banner bar height */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-sm);
    background: var(--semantic-warning);
    color: var(--text-on-dark);
    font-size: var(--text-sm);
    text-align: center;

    a {
      color: inherit;
      font-weight: 600;
      white-space: nowrap;
    }
  }

  .maintenance-banner-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
  }
}