/* =========================================================================
   shell.css — global header/footer chrome + buttons. Consumes ONLY semantic
   tokens. Layered after `base` so it can rely on base element styles.
   ========================================================================= */
@layer components {
  /* Skip link — visible only when focused (keyboard a11y) */
  .skip-link {
    position: absolute;
    left: var(--space-2);
    top: var(--space-2);
    z-index: 10;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    color: var(--color-text-strong);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    transform: translateY(-150%);
    transition: transform var(--dur-2) var(--ease-standard);
  }
  .skip-link:focus { transform: translateY(0); }

  /* Header */
  .site-header {
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(8px);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-block: var(--space-3);
  }
  .brand {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-lg);
    color: var(--color-text-strong);
    text-decoration: none;
    letter-spacing: -.01em;
  }

  /* Nav */
  .site-nav { margin-inline-start: auto; }
  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .site-nav__link {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--weight-medium);
  }
  .site-nav__link:hover { color: var(--color-text-strong); background: var(--color-surface); }
  .site-nav__link:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

  /* Auth-aware nav: a small visual separation; logout is a POST form whose button
     is styled to read as a nav link (button reset over .site-nav__link). */
  .site-nav__item--auth { margin-inline-start: var(--space-2); }
  .site-nav__logout { display: inline; margin: 0; }
  .site-nav__logout-btn { border: 0; background: none; cursor: pointer; font: inherit; font-weight: var(--weight-medium); }

  /* Dropdown (native <details>) */
  .dropdown { position: relative; }
  .site-nav__summary { cursor: pointer; list-style: none; }
  .site-nav__summary::-webkit-details-marker { display: none; }
  .site-nav__summary::after { content: ' ▾'; color: var(--color-text-muted); }
  .dropdown__menu {
    position: absolute;
    inset-inline-start: 0;
    margin-top: var(--space-1);
    min-width: 15rem;
    padding: var(--space-2);
    display: grid;
    gap: 2px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }
  .dropdown__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    color: var(--color-text);
    text-decoration: none;
  }
  .dropdown__link:hover { background: var(--color-surface); color: var(--color-text-strong); }
  .dropdown__link:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }

  /* Buttons — institutional restraint: one confident filled primary, quiet
     ghost secondaries that read as text/arrow links. */
  .button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-control);
    border: 1px solid var(--color-border-strong);
    background: transparent;
    color: var(--color-text-strong);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition:
      border-color var(--dur-2) var(--ease-standard),
      color var(--dur-2) var(--ease-standard),
      background-color var(--dur-2) var(--ease-standard);
  }
  .button:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

  /* Secondary CTAs gain a forward affordance and quiet to the accent on hover. */
  .button:not(.button--primary)::after {
    content: '→';
    transition: transform var(--dur-2) var(--ease-standard);
  }
  .button:not(.button--primary):hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  .button:not(.button--primary):hover::after { transform: translateX(3px); }

  /* The single confident primary CTA. */
  .button--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: transparent;
  }
  .button--primary:hover { background: color-mix(in srgb, var(--color-primary) 88%, #000); }

  .page-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
  /* A CSRF-form wrapper that shouldn't disturb layout: its button becomes the flex item.
     (Replaces an inline style="display:inline" so the CSP can drop style-src 'unsafe-inline'.) */
  .inline-form { display: contents; }

  /* Footer */
  .site-footer {
    margin-top: var(--space-section);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
  }
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    justify-content: space-between;
    padding-block: var(--space-7);
  }
  .site-footer__brand .tagline { margin-top: var(--space-2); }
  .site-footer__legal ul { display: grid; gap: var(--space-2); }
  .site-footer__link { color: var(--color-text-muted); text-decoration: none; }
  .site-footer__link:hover { color: var(--color-text-strong); }
  .site-footer__contact {
    font-style: normal;
    display: grid;
    gap: var(--space-2);
    color: var(--color-text-muted);
  }
  .site-footer__contact a { color: var(--color-text-muted); }
}