/* ==========================================================================
   broker.v1.css - THE BROKER schematic (identity broker diagram)

   Shared between the HOME page and the PIAM Suite page (section 02)
   so both render identically with zero style drift. The connector geometry is
   written at runtime by BrokerGeometryScript.tsx (SVG bezier paths from
   [data-anchor] node positions into the .bk-wires viewBox).

   Ported verbatim from the page-local <style> block previously in
   src/app/page.tsx. Animations are transform/opacity only and fully gated for
   prefers-reduced-motion via html.no-motion.

   SINGLE AUTHORITY. The .bk-* rules were once written three times over (here,
   in the home page-local
   <style> which loads after both), so a tuned value could be silently
   overridden by a later copy. Both other copies are now deleted: every .bk-*
   declaration lives here, once. Do not re-add a .bk-* rule elsewhere
   or to a page-local <style> block.
   ========================================================================== */
/* the host .sheet-section must opt out of content-visibility:auto too, else the
   broker is laid out from a skipped box and depends on ResizeObserver to
   recover its connector geometry on first scroll-in (add .bk-section to it). */
.bk-section{content-visibility:visible}
.bk-net{position:relative;margin:56px auto 0;max-width:1040px;content-visibility:visible}
.bk-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.bk-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(200px,1.05fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);
  align-items:center;
}
.bk-col{display:flex;flex-direction:column}
.bk-col-eng{align-items:center}
.bk-h{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.bk-h-center{text-align:center}
/* every broker box wears its own actor colour as a full-perimeter border + soft
   glow - consistent across sources and downstream targets; the per-box colour
   comes from each node's --rule. The engine keeps its own distinct treatment. */
.bk-node{
  position:relative;padding:13px 15px;
  border:1.5px solid color-mix(in srgb,var(--rule,var(--hairline-strong)) 48%,var(--hairline-strong));
  /* --bg-1, not the authored #0f1218: the node plate is an ordinary themed card
     (its ink is --ink-1/--ink-3), so it must follow the theme or the light page
     renders dark-on-dark - measured 1.05:1 on the node titles. The neutral rung
     loses at most 7/255 on the blue channel of a near-black in dark. */
  border-radius:10px;background:var(--bg-1);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--rule,transparent) 15%,transparent),
             0 0 20px -7px color-mix(in srgb,var(--rule,transparent) 34%,transparent);
  transition:transform .22s var(--ease-out-soft), border-color .22s var(--ease-out-soft), box-shadow .22s var(--ease-out-soft);
}
/* the node lifts and takes an actor-colour glow on hover (pointer devices only) */
.bk-node::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--rule) 45%,transparent), 0 14px 40px -16px color-mix(in srgb,var(--rule) 55%,transparent);
  transition:opacity .22s var(--ease-out-soft)}
@media (hover:hover) and (pointer:fine){
  .bk-node:hover{transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--rule) 72%,var(--hairline-strong));
    box-shadow:0 0 0 1px color-mix(in srgb,var(--rule) 32%,transparent),
               0 0 32px -5px color-mix(in srgb,var(--rule) 55%,transparent);
  }
  .bk-node:hover::after{opacity:1}
}
.bk-col-src .bk-node + .bk-node,
.bk-col-tgt .bk-node + .bk-node{margin-top:14px}
.bk-node b{display:block;font-size:13px;font-weight:700;color:var(--ink-1);line-height:1.25}
.bk-node span{display:block;margin-top:3px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.03em}
.bk-engine{
  width:100%;padding:24px 22px;
  border:1px solid var(--hairline-strong);border-left:3px solid var(--c-idw);border-radius:13px;
  background:linear-gradient(180deg,var(--sheen),transparent 32%),var(--bg-1);
  box-shadow:inset 0 1px 0 var(--sheen), 0 22px 52px -28px rgba(0,0,0,.85);
  overflow:hidden;isolation:isolate;
}
/* LIGHT: shadows are black in both themes, but the ALPHA has to scale with the
   ground. The .85-alpha drop above measured #a0a3a6 one pixel under the plate on
   a #f0efed page - a ~80 channel smudge that reads as a dark-theme artefact, not
   as lift. Same geometry, paper alpha (the light --shadow-slab register). */
html[data-theme="light"] .bk-engine{
  box-shadow:inset 0 1px 0 var(--sheen), 0 20px 46px -32px rgba(12,10,9,.26);
}
.bk-core-t{position:relative;z-index:2;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-1)}
.bk-core-d{position:relative;z-index:2;margin-top:7px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.bk-engine-glow{position:absolute;inset:-1px;z-index:0;border-radius:inherit;background:radial-gradient(120% 90% at 50% 50%, rgba(37,99,235,.30), rgba(37,99,235,0) 70%);opacity:.45;will-change:opacity}
.bk-engine-ring{position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(96,165,250,.35);opacity:0}
html.js .bk-net.in.bk-ready .bk-engine-glow{animation:bk-breathe 4.6s var(--ease-monument) infinite}
html.js .bk-net.in.bk-ready .bk-engine-ring{animation:bk-ring 4.6s var(--ease-monument) infinite}
@keyframes bk-breathe{0%,100%{opacity:.40}50%{opacity:.80}}
@keyframes bk-ring{0%,100%{opacity:0}55%{opacity:.9}}
.bk-line{
  fill:none;stroke:var(--c,var(--hairline-strong));stroke-width:var(--stroke-w,1.25px);
  stroke-linecap:round;vector-effect:non-scaling-stroke;
  opacity:.42;stroke-dasharray:1;stroke-dashoffset:1;
}
html.js .bk-net.in.bk-ready .bk-line{stroke-dashoffset:0;transition:stroke-dashoffset var(--t-draw,.9s) var(--ease-draw);transition-delay:calc(.18s + var(--i,0) * .07s)}
html:not(.js) .bk-line{stroke-dashoffset:0}
.bk-comet{
  fill:none;stroke:var(--c,var(--sky));stroke-width:calc(var(--stroke-w,1.25px) + 1px);
  stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:.05 .95;stroke-dashoffset:1;opacity:0;
  filter:drop-shadow(0 0 3px var(--c,var(--sky)));
}
html.js .bk-net.in.bk-ready .bk-comet{opacity:.95;animation:bk-comet-run 2.8s linear infinite;animation-delay:calc(1.7s + var(--d,0s))}
@keyframes bk-comet-run{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
html.no-motion .bk-line{stroke-dashoffset:0 !important;transition:none !important}
html.no-motion .bk-comet{display:none !important}
html.no-motion .bk-engine-glow{opacity:.5 !important;animation:none !important}
html.no-motion .bk-engine-ring{opacity:0 !important;animation:none !important}
html.no-motion .bk-node,html.no-motion .bk-node::after{transition:none}
html.no-motion .bk-node::after{display:none}
/* ==========================================================================
   PORTRAIT SHEET (<=880px) - a dedicated second drawing, not a restack.

   Restacking the landscape composition into one column made every one of the
   nine wires the same vertical line down the column centre, drawn behind the
   opaque node cards it crossed: the hub-and-spoke read, the per-actor colour
   coding and 16 wire segments all vanished, and with motion on all nine comets
   ran down that one line. So the broker is drawn twice, the same way the
   public-sector estate plan (.ps-plan--wide / --tall) and the CNI perimeter plan
   (.perim-plan--wide / --tall) are. The portrait sheet is composed for the room
   a phone actually has, which is height:

     - one column, capped so the sheet never scales past its drawn size
     - a LEFT bus channel: each source stubs out of its own left edge, drops down
       its OWN lane and lands on the engine plate's top edge
     - the engine spans the full sheet width - the hub both channels land on
     - a RIGHT bus channel: each target is fed from the engine plate's bottom
       edge, down its own lane, into that card's right edge

   --bk-lane is the width of each channel and the cards are inset by it, so both
   channels are card-free: no wire is ever drawn behind a card, every wire keeps
   its own lateral offset (and so its actor colour and its own comet), and no two
   wires cross. The geometry is written by BrokerGeometryScript's "spine" routing,
   which switches on the SAME 880px breakpoint - keep the two in step. Figure type
   steps up as well: 10/10.5px reads as a technical annotation inside a 1040px
   figure, but in a 302px column it is the primary label.
   ========================================================================== */
@media (max-width:880px){
  .bk-net{
    margin-top:40px;
    max-width:520px;
    --bk-lane:72px;
  }
  .bk-grid{grid-template-columns:1fr;gap:26px}
  .bk-col-eng{order:2}
  .bk-col-src{order:1;gap:12px;margin-left:var(--bk-lane)}
  .bk-col-tgt{order:3;gap:12px;margin-right:var(--bk-lane)}
  .bk-col-src .bk-node + .bk-node,
  .bk-col-tgt .bk-node + .bk-node{margin-top:0}
  .bk-h{margin-bottom:8px;font-size:11px;letter-spacing:1px}
  /* the hub label spans the full sheet, so it must clear BOTH channels */
  .bk-h-center{text-align:center}
  .bk-engine{max-width:none;margin:0}
  .bk-node span{font-size:12px}
  .bk-core-d{font-size:12px}
  .bk-line{opacity:.34}
}