/*
 * ═══════════════════════════════════════════════════════════════════════
 *  NOON PRESENTATION SHEET (16.5-02; PRS-01/PRS-02, Codex Rulings 2/3)
 * ═══════════════════════════════════════════════════════════════════════
 *
 * The SEPARATE cacheable static sheet for the closed presentation
 * vocabularies. It is served to a visitor IF AND ONLY IF at least one valid
 * presentation object rendered that request — the conditional hoisted link
 * lives in `src/lib/presentation.tsx`, the ONE helper module extending the
 * style-emitter boundary. A presentation-less page never references this
 * file: zero bytes, byte-identical DOM.
 *
 * WHY THIS IS NOT PART OF noon-theme.css (Ruling 3): presentation must work
 * on a deployment that uses presentation props but has NO theme document —
 * referencing the theme sheet would activate ALL of its fallback styling.
 * So this sheet references EXISTING theme custom properties (each with the
 * SAME fallback literal noon-theme.css uses, so an unthemed deployment
 * computes the same neutral values) and DEFINES no custom property of its
 * own. No dynamic values, no @import, no url() — the static-sheet security
 * gate (presentation-stylesheet-coverage.test.ts) enforces both directions:
 * every schema enum value has a live rule here, and every selector value
 * here exists in the schema.
 *
 * PLACEMENTS (Ruling 3): the same data-presentation-* attribute names ride
 * BOTH the neutral section wrapper (`<div data-noon-section …>`) and the
 * existing region elements (`<header data-region="header" …>`), so the
 * shared selectors below cover both. `data-presentation-sticky` is emitted
 * only on the header; `data-mobile-order` only on the `data-region-layout`
 * flow wrapper.
 */

/* Every rule below is in the `noon` cascade layer, so operator `customCss`
 * (unlayered) beats it regardless of specificity and of hoist order — the FULL
 * rationale lives ONCE, in `noon-theme.css`. Same layer name as all four Noon
 * sheets, so their order among themselves is unchanged; the rules are NOT
 * re-indented, so this file's only diff is the wrapper (260730-csc, #25). */
@layer noon {
  /* ── background — the existing theme tokens, current fallbacks (Ruling 2) ── */

  [data-presentation-background="background"] {
    background-color: var(--noon-background, #fbfbfd);
  }

  [data-presentation-background="surface"] {
    background-color: var(--noon-surface, #ffffff);
  }

  /* ── region background BFC — contain the last child's bottom margin (#28) ────
 * A region template that paints a `background` fills its PADDING box, but the
 * theme header/footer/sidebar rules carry zero bottom padding and establish no
 * block-formatting context, so the last child's `margin-bottom` collapses
 * THROUGH the painted bottom edge (CSS 2.1 §8.3.1) and lands OUTSIDE the bar as
 * transparent space — nav content flush against the bar's bottom. `flow-root`
 * establishes a BFC so that margin is CONTAINED inside the painted box. Keyed
 * on background PRESENCE (not value, not sticky): a sticky-without-background
 * region leaves the collapse invisible/transparent, so background is the
 * correct trigger, and this covers header/footer/sidebar uniformly. This is a
 * bare-PRESENCE structural rule, deliberately OUTSIDE the value↔schema equality
 * — sanctioned by allowlist in presentation-stylesheet-coverage.test.ts. */
  [data-region][data-presentation-background] {
    display: flow-root;
  }

  /* ── border — none removes an existing border ON PURPOSE (Ruling 1) ──────── */

  [data-presentation-border="none"] {
    border: 0;
  }

  /* For a BLOCK, the attribute rides the neutral wrapper — but the border
 * being removed lives on the block element INSIDE it (the Hero's theme
 * border-bottom is the ruling's own example). This second rule pierces the
 * wrapper to its one block child so `border: "none"` genuinely zeroes an
 * EXISTING Hero border, exactly as Ruling 1 promises (proven RED by matrix
 * row 3 in 16.5-03). Scoped to `none` alone: hairline/rule draw AROUND the
 * section on the wrapper, which is their intended geometry. The higher
 * specificity (two attributes) is what beats the theme's single-attribute
 * block rules regardless of sheet order. */
  [data-noon-section][data-presentation-border="none"] > [data-block] {
    border: 0;
  }

  [data-presentation-border="hairline"] {
    border: 1px solid var(--noon-border, #e3e3ea);
  }

  [data-presentation-border="rule"] {
    border-inline-start: 4px solid var(--noon-accent, #4338ca);
  }

  /* ── shadow — FIXED server-owned presets, deliberately not theme tokens
 *    (Ruling 2 cut shadow tokens and `lg`): sm is the subtle 1–2px tier,
 *    md the 4–12px tier. ─────────────────────────────────────────────────── */

  [data-presentation-shadow="sm"] {
    box-shadow: 0 1px 2px rgba(20, 20, 30, 0.08);
  }

  [data-presentation-shadow="md"] {
    box-shadow: 0 4px 12px rgba(20, 20, 30, 0.14);
  }

  /* ── rotation — EXACTLY ±1deg, nothing else (Ruling 2) ───────────────────── */

  [data-presentation-rotation="tilt-left"] {
    transform: rotate(-1deg);
  }

  [data-presentation-rotation="tilt-right"] {
    transform: rotate(1deg);
  }

  /* ── sticky — the phase's single scrolling behaviour (Ruling 2) ──────────── */

  [data-presentation-sticky="top"] {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  /* ── mobileOrder — visual stacking below the ONE static 40rem breakpoint
 *    (not authored, not a token — Ruling 2). The rules key on the EXISTING
 *    data-region-layout flow wrapper and set EXPLICIT order on its two
 *    children (the sidebar aside and the page's main); column stacking is
 *    declared here so ordering works on a theme-less deployment too.
 *    Desktop (>40rem) layout is untouched: no rule outside this block. ───── */

  @media (max-width: 40rem) {
    [data-region-layout][data-mobile-order="sidebar-main"] {
      display: flex;
      flex-direction: column;
    }

    [data-region-layout][data-mobile-order="sidebar-main"] > [data-region="sidebar"] {
      order: 1;
    }

    [data-region-layout][data-mobile-order="sidebar-main"] > main {
      order: 2;
    }

    /* The migration-critical main-before-aside value (Ruling 2). */
    [data-region-layout][data-mobile-order="main-sidebar"] {
      display: flex;
      flex-direction: column;
    }

    [data-region-layout][data-mobile-order="main-sidebar"] > main {
      order: 1;
    }

    [data-region-layout][data-mobile-order="main-sidebar"] > [data-region="sidebar"] {
      order: 2;
    }
  }

  /* ── close of @layer noon (260730-csc) ── */
}