/* ══════════════════════════════════════════════════════════════
   base.css  —  NMMI · ai
   @layer base  |  Raw HTML element defaults.
   Uses semantic tokens only — never primitive values.
══════════════════════════════════════════════════════════════ */
@layer base {

  html {
    scroll-padding-top: var(--nav-h);
    /* Narrow, semi-transparent scrollbar — visible on hover only */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  html:hover,
  *:hover { scrollbar-color: rgba(128,128,128,0.35) transparent; }

  /* WebKit scrollbar */
  *::-webkit-scrollbar                { width: 8px; height: 8px; }
  *::-webkit-scrollbar-track          { background: transparent; }
  *::-webkit-scrollbar-thumb          {
    background: transparent;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background .25s ease;
  }
  *:hover::-webkit-scrollbar-thumb    { background: rgba(128,128,128,0.35); background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover    { background: rgba(128,128,128,0.55); background-clip: content-box; }

  body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--t-base);
    background: var(--bg-body);
    color: var(--text);
    transition: background .3s ease, color .3s ease;
    min-height: 100vh;
    /* Body padding removed here — content-area handles clearance */
  }

  /* Table horizontal-scroll wrapper */
  .table-scroll { overflow-x: auto; }
}


/* ══════════════════════════════════════════════════════════════
   CSS Grid App Shell
   Merged from shell-responsive-content.html
   Extends @layer base with the 2-column grid body layout and
   grid-positioned content regions used across the full site.
   Complements fixed-position .appnav / .sidebar in components.css.
══════════════════════════════════════════════════════════════ */
@layer base {

  /* ── Grid Shell body layout ──────────────────────────────── */
  body {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: var(--side-w) 1fr;
    grid-template-rows: var(--nav-h) 1fr;
    transition: grid-template-columns var(--transition-layout),
                grid-template-rows    var(--transition-layout),
                background .3s ease,
                color       .3s ease;
  }

  /* ── Content area (grid cell 2/2) ───────────────────────── */
  .content-area {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    padding-block-start:  var(--content-pad-block);
    padding-block-end:    max(var(--content-pad-block), env(safe-area-inset-bottom, 0px));
    padding-inline-start: var(--content-pad-inline);
    /* Right padding grows to clear the right drawer when open */
    padding-inline-end:   max(
                            var(--content-pad-inline),
                            calc(var(--rdrawer-offset, 0px) + env(safe-area-inset-right, 0px))
                          );
    min-height: calc(100dvh - var(--nav-h));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ── Centred content container ───────────────────────────── */
  .content-wrap,
  .wrap {
    width: 100%;
    max-width: var(--content-col-max);
    margin-inline: auto;
    /* padding-inline intentionally omitted — .content-area already
       applies --content-pad-inline; adding it here would double it. */
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    container-type: inline-size;
    container-name: content;
    box-sizing: border-box;
  }

  /* ── Readable prose measure ──────────────────────────────── */
  .content-prose {
    max-width: clamp(45ch, 90cqi, 75ch);
    line-height: 1.6;
  }

  /* ── Responsive: collapse to single column at narrow widths ─ */
  @media (max-width: 599px) {
    body {
      grid-template-columns: 1fr;
      grid-template-rows: var(--nav-h) 1fr;
    }
    .content-area {
      grid-column: 1;
    }
  }
}