/* =========================================================================
   bracket-a.css — /technology v0.3 · NEW (additive layout pattern).
   Status: ROUND 1 DRAFT (2026-05-07).

   What this is.
   -------------
   Bracket A wraps a multi-section region with a single named-region
   identity. v0.3 introduces it for the Quantum Privacy Network region
   spanning §3 Network and §4 Exchange — two acts, one named architecture.

   What it extends, not invents.
   -----------------------------
   This is NOT a new visual vocabulary. It extends three patterns already
   in the locked Navy v2.0 system:
     · Gold-rule-on-left, used by .ws-asd__layer--arch (architecture-stack-
       diagram.css) and continued by .ws-csb (composed-services-band.css)
       to mark a region as part of "the architecture spine."
     · Gold-rule-with-eyebrow callout, used by .ws-asd__property and
       .ws-csb__connective — gold rule on the left, mono small-caps
       label, body text following.
     · Mono micro-caption at --ws-fs-micro / --ws-tracking-mono, used
       throughout the design system for ordinals and section refs.

   Bracket A is those three patterns composed at region scale: a gold
   left-rule that runs the FULL HEIGHT of the bracketed region (not just
   one card or one section), with mono small-caps captions at the rule's
   top edge ("┌── QUANTUM PRIVACY NETWORK ──") and bottom edge ("└──").

   Markup contract.
   ----------------
   Wrap the bracketed sections in a single .ws-qpn-bracket element.
   Sections inside keep their own structure, eyebrows, surfaces, and
   inner gold rules — Bracket A is purely additive.

     <div class="ws-qpn-bracket">
       <div class="ws-qpn-bracket__open">QUANTUM PRIVACY NETWORK</div>
       <section> §3 Network ... </section>
       <section> §4 Exchange ... </section>
       <div class="ws-qpn-bracket__close" aria-hidden="true"></div>
     </div>

   How the rule is drawn.
   ----------------------
   The continuous rule is drawn by a ::before pseudo-element on
   .ws-qpn-bracket, absolutely positioned so it spans BOTH section
   backgrounds without breaking on section boundaries (a per-section
   border-left would visibly seam at every background-color change).

   The rule sits at the inner edge of the page-content gutter, computed
   relative to the 1200px max-width content frame established by
   webshield-shared and inherited by every locked component. This puts
   the bracket rule one rule-thickness OUTSIDE the leftmost text column,
   so child sections that have their own internal left-rules
   (.ws-asd__layer--arch, .ws-csb's continuation rule) read as a "spine
   within the spine" — bracket rule outside, architecture rule inside.

   The open/close marker captions are real DOM elements (not pseudo
   content) so they're crawlable, screen-reader accessible, and
   findable by Cmd-F.

   Tokens.
   -------
   No new tokens. Sources:
     · color   — var(--ws-accent)
     · weight  — 2px (matches .ws-asd__layer--arch and .ws-csb)
     · font    — var(--ws-font-mono)
     · size    — var(--ws-fs-micro)
     · tracking — var(--ws-tracking-mono)

   Forward-compatibility.
   ----------------------
   The same .ws-qpn-bracket pattern reuses for any future bracketed
   region (e.g. a Quantum Privacy Compute Network region on /foundation).
   The class name is region-specific; if a second bracket lands, lift
   the shared mechanics to .ws-bracket and keep .ws-qpn-bracket as an
   alias / variant.
   ========================================================================= */

/* ── Wrapper ────────────────────────────────────────────────────── */

.ws-qpn-bracket {
  position: relative;
  /* No own background — sections inside keep their own surfaces.
     The rule and markers sit on top of whatever the children render. */
}

/* Continuous left-rule — drawn as an absolutely-positioned bar so it
   spans both section surfaces without seaming at a border. */
.ws-qpn-bracket::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* Rule sits at the inner edge of the 1200px content gutter.
     - On viewports ≥1296px, the gutter math yields > 48px and the rule
       pins to (gutter-edge + 36px), i.e. just inside the page padding.
     - On viewports < 1296px, max() floors the rule at 36px from the
       viewport edge so it stays visible inside the content frame. */
  /* Gutter-math · Round-2 review decision (option a):
     Rule sits at gutter+18 so it stays cleanly OUTSIDE any inner-
     component left padding. .ws-asd__wrap and .ws-csb__wrap both pad
     32px; the rule at +18 sits 14px outside that content edge,
     reading as a region marker, not a component marker. */
  left: max(18px, calc((100% - 1200px) / 2 + 18px));
  width: 2px;
  background: var(--ws-accent);
  pointer-events: none;
}

/* Stacking · Round-2 fix.
   Children inside Bracket A include .ws-asd and .ws-csb, both of which
   paint full-bleed --ws-page (only their __wrap is constrained to
   1200px). Without explicit stacking, those bone backgrounds occlude
   the gold rule across the entire region.

   Three layers, bottom to top:
     z:1 — section blocks (.ws-asd / .ws-csb / etc.) paint their
           full-bleed surfaces. Rule passes BEHIND them — but since the
           rule sits at gutter+18 and section content padding starts
           at gutter+32, the rule is in the gutter where sections paint
           their --ws-page background. So we need to escape that.
     z:2 — the rule itself, promoted ABOVE section backgrounds so it
           remains visible across both bracketed acts.
     z:3 — the open/close caption rows. They have solid --ws-page
           backgrounds and need to PAINT OVER the rule so the rule
           appears to start at the bottom of the open marker and end
           at the top of the close marker — the natural bracket form. */
.ws-qpn-bracket > * { position: relative; z-index: 1; }
.ws-qpn-bracket::before { z-index: 2; }
.ws-qpn-bracket__open,
.ws-qpn-bracket__close { z-index: 3; }

/* ── Open marker · "┌── QUANTUM PRIVACY NETWORK ──" ────────────── */

.ws-qpn-bracket__open {
  /* Sits at the top of the bracket, aligned to the rule. The ::before
     glyph is the corner; the text caption is the region name. */
  position: relative;
  padding: 22px 0 18px;
  /* Pad-left lines the corner glyph up with the rule. Rule sits at
     gutter+18; caption content starts at gutter+18 too, so the "┌"
     glyph's left stroke reads as the rule's top tick. */
  padding-left: max(18px, calc((100% - 1200px) / 2 + 18px));
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-accent);
  text-transform: uppercase;
  background: var(--ws-page);
  /* A thin hairline below the marker creates a register beat between
     the marker row and the first inner section's eyebrow row. Uses the
     soft accent so it reads as part of the bracket family, not as a
     section divider. */
  border-bottom: 1px solid var(--ws-accent-soft);
}

/* The corner glyph itself — pseudo-element so the visible caption text
   is just the region name, glyph-free, screen-reader-clean. */
.ws-qpn-bracket__open::before {
  content: "┌── ";
  /* Inherits from parent for size, color, tracking. */
  margin-right: 2px;
}

/* And a trailing rule-segment after the caption text, balancing the
   left corner glyph visually. The hyphens are part of the ASCII bracket
   metaphor — match the brief's "┌── QUANTUM PRIVACY NETWORK ──" form. */
.ws-qpn-bracket__open::after {
  content: " ──";
  margin-left: 2px;
}

/* ── Close marker · "└──" ──────────────────────────────────────── */

.ws-qpn-bracket__close {
  position: relative;
  padding: 16px 0 22px;
  padding-left: max(18px, calc((100% - 1200px) / 2 + 18px));
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-accent);
  text-transform: uppercase;
  background: var(--ws-page);
  border-top: 1px solid var(--ws-accent-soft);
}

.ws-qpn-bracket__close::before {
  content: "└──";
}

/* ── Optional · close marker with caption echo ─────────────────────
   For pages where the bracket spans many sections, the bare "└──" can
   feel under-labeled. The --echo modifier appends the region name
   after the corner glyph: "└── QUANTUM PRIVACY NETWORK ──". Off by
   default per brief §6.2 ("bottom marker: └──"). */

.ws-qpn-bracket__close--echo::before {
  content: "└── QUANTUM PRIVACY NETWORK ──";
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Rule already pins to 18px floor at narrow viewports via max();
     captions inherit the same floor. */
  .ws-qpn-bracket__open,
  .ws-qpn-bracket__close {
    padding-left: 18px;
  }
}

@media (max-width: 720px) {
  .ws-qpn-bracket::before {
    left: 14px;
    width: 2px;
  }
  .ws-qpn-bracket__open,
  .ws-qpn-bracket__close {
    padding-left: 14px;
    /* Caption sizes already at micro-mono — no further reduction
       required. Vertical padding tightens slightly to match the
       compressed mobile section rhythm. */
    padding-top: 16px;
    padding-bottom: 14px;
  }
  .ws-qpn-bracket__close {
    padding-bottom: 18px;
  }
}