/**
 * Layout: containers, grid scaffolding (design-foundations §1–§2).
 * CSS Grid for page scaffolding, Flexbox inside components (no framework).
 */
@layer base {
  .nn-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--nn-space-4);
  }
  .nn-container--content { max-width: var(--nn-container-content); }
  .nn-container--tool { max-width: var(--nn-container-tool); }
  .nn-container--wide { max-width: var(--nn-container-wide); }

  @media (min-width: 768px) {
    .nn-container { padding-inline: var(--nn-space-6); }
  }

  /* Hub/category grid — fluid, no per-breakpoint column counts (§2) */
  .nn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--nn-space-4);
  }

  /* Page-level scaffold: header / main / footer */
  .nn-page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
  }

  /* Tool shell layout: header, inputs, options, output, utils (component-library §D) */
  .nn-tool-shell {
    display: grid;
    gap: var(--nn-space-4);
    background: var(--nn-bg-raised);
    border: 1px solid var(--nn-border);
    border-radius: var(--nn-radius-lg);
    padding: var(--nn-space-5);
  }

  @media (min-width: 1280px) {
    /* Related-tools rail appears only at xl+ (design-system §3, frozen) */
    .nn-with-rail {
      display: grid;
      grid-template-columns: 1fr var(--nn-container-sidebar);
      gap: var(--nn-space-6);
      align-items: start;
    }
  }

  /* ---- Application Shell (v0.3 Milestone 1) ----------------------------
     The regions every page inherits. Header/Nav/Footer get their full
     systems in later milestones — this defines the reusable STRUCTURE so
     nothing here needs to change when that content is filled in. */

  .nn-shell-header {
    position: sticky;
    top: 0;
    z-index: var(--nn-z-header);
    background: var(--nn-bg);
    border-bottom: 1px solid var(--nn-border);
    transform: translateY(0);
  }
  /* Hide-on-scroll-down / reveal-on-scroll-up (Milestone 2, Task 1) —
     shell.js toggles data-nn-header-state; pure-CSS transform, no layout
     thrash (transform doesn't trigger reflow). */
  .nn-shell-header[data-nn-header-state="hidden"] { transform: translateY(-100%); }
  @media (prefers-reduced-motion: no-preference) {
    .nn-shell-header { transition: transform var(--nn-motion-fast) var(--nn-motion-ease); }
  }

  .nn-shell-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nn-space-5);
    min-height: 4.5rem; /* 72px — premium header height (visual-refinement pass: 56px read as compressed) */
  }
  .nn-shell-header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: var(--nn-space-2); /* breathing room before nav starts */
  }
  .nn-shell-header__logo-img {
    height: 2rem; /* 32px — scaled up with the taller header */
    width: auto;
  }
  .nn-shell-header__actions {
    display: flex;
    align-items: center;
    gap: var(--nn-space-3);
    flex-shrink: 0; /* never let the icon cluster get squeezed by the nav — found live 2026-08-12 alongside the nav-overflow fix (shell.js wireNavOverflow) */
  }
  /* Theme toggle: icon shown represents the mode a click switches TO
     (moon visible in light mode = "switch to dark"), not the current
     mode. Defaults to light-mode's icon (moon) until JS sets
     data-theme explicitly on first interaction. */
  .nn-theme-toggle__icon--sun { display: none; }
  .nn-theme-toggle__icon--moon { display: block; }
  :root[data-theme="dark"] .nn-theme-toggle__icon--sun { display: block; }
  :root[data-theme="dark"] .nn-theme-toggle__icon--moon { display: none; }
  /* .nn-shell-header__menu-toggle visibility: components.css (must win
     over .nn-btn's display:inline-flex — same element carries both
     classes, and cascade layers resolve by declared layer PRECEDENCE
     (components > base), not by which CSS file loads first, so a
     base-layer override here would silently lose) */
  .nn-shell-mobile-panel {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--nn-bg);
    border-bottom: 1px solid var(--nn-border);
    padding: var(--nn-space-4);
  }
  .nn-shell-nav { flex: 1; min-width: 0; }

  @media (max-width: 767px) {
    /* Below md: desktop nav collapses into the hamburger disclosure
       (component-library §C — no off-canvas library, <details>/button
       + aria-expanded panel only) */
    .nn-shell-nav { display: none; }
  }

  /* Announcement bar: disabled by default (milestone requirement); a page
     opts in by adding data-nn-announcement to <body> */
  .nn-announcement {
    display: none;
    text-align: center;
    font-size: var(--nn-text-sm);
    padding: var(--nn-space-3) var(--nn-space-4); /* taller bar — visual-refinement pass */
    background: var(--nn-primary-subtle);
    color: var(--nn-primary-strong);
  }
  body[data-nn-announcement] .nn-announcement { display: block; }
  body[data-nn-announcement-dismissed] .nn-announcement { display: none; }

  .nn-shell-main {
    display: grid;
    gap: var(--nn-space-7);
    padding-block: var(--nn-space-6);
  }

  /* Main content composition: content column + optional sidebar/related-
     tools rail (reuses .nn-with-rail at xl+; single column below it) */
  .nn-shell-content { display: grid; gap: var(--nn-space-7); }
  .nn-shell-sidebar { display: grid; gap: var(--nn-space-5); align-content: start; }

  .nn-shell-guide,
  .nn-shell-faq { display: grid; gap: var(--nn-space-5); }

  .nn-shell-footer {
    background: var(--nn-bg-subtle);
    border-top: 1px solid var(--nn-border);
    padding-block: var(--nn-space-7);
  }

  /* Sticky mobile nav: bottom action bar, hidden ≥ md (desktop has the
     full header nav from Milestone 2/3) */
  .nn-shell-mobile-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--nn-z-header);
    display: flex;
    justify-content: space-around;
    background: var(--nn-bg-raised);
    border-top: 1px solid var(--nn-border);
    padding-block: var(--nn-space-2);
  }
  @media (min-width: 768px) {
    .nn-shell-mobile-nav { display: none; }
  }

  /* Back-to-top: hidden until shell.js reveals it past a scroll threshold */
  .nn-back-to-top {
    position: fixed;
    right: var(--nn-space-4);
    bottom: var(--nn-space-4);
    z-index: var(--nn-z-back-to-top);
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--nn-radius-full);
    display: none;
    align-items: center;
    justify-content: center;
  }
  .nn-back-to-top[data-visible="1"] { display: flex; }
  @media (max-width: 767px) {
    /* clears the mobile nav bar */
    .nn-back-to-top { bottom: calc(var(--nn-space-4) + 3.5rem); }
  }
}