/* usecase-compliance.css — styles used only by /use-cases/compliance.
   Shared diagram primitives (sk-fanout, sk-map-note, ...) stay in solution-kit.css. */

/* =========================================================================
   Symbol-crop section (uc-crop) — design-system "Symbol Crop", ghost
   placement (5%), replacing section-light. SVG from design-system/tools/
   render-symbol-crop.mjs (--crop apex --mode ghost --ground none
   --width 2400 --height 2100 --glow false --format svg, ~ this section's
   desktop aspect) with the preset's radial mask stripped: at 5% the ellipse
   fade read as a round blur. The fade is a linear CSS mask instead: in from
   the top seam, full through the middle, out before the bottom seam.
   ========================================================================= */
.uc-crop {
    isolation: isolate;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.uc-crop::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("/img/use-cases/compliance-symbol-crop.svg") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 58%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 58%, transparent 100%);
}

/* =========================================================================
   Problem / fix diptych (uc-diptych) — the two heads side by side, each
   stacked (eyebrow, headline, text), split by one navy rule, so they read
   as one before/after pair instead of two identical split heads.
   Stacks on phones, the rule turning horizontal.
   ========================================================================= */
.uc-diptych {
    --gutter: clamp(28px, 4vw, 56px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 56px;
}
.uc-diptych-col { min-width: 0; padding-right: var(--gutter); }
.uc-diptych-col + .uc-diptych-col {
    padding: 0 0 0 var(--gutter);
    border-left: 1px solid var(--border);
}
.uc-diptych h2 { margin: 0; text-wrap: balance; }
.uc-diptych .lede { margin: 20px 0 0; }
@media (max-width: 820px) {
    .uc-diptych { grid-template-columns: 1fr; margin-bottom: 36px; }
    .uc-diptych-col { padding: 0; }
    .uc-diptych-col + .uc-diptych-col {
        margin-top: 36px;
        padding: 36px 0 0;
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}

/* =========================================================================
   Mapping bus (uc-bus) — what the one map feeds. Eight capabilities as an
   open ruled 4x2 grid hung off two navy rules; each sits on its own node.
   All eight are peers: no accent on any one node.
   Collapses to a single left spine on phones.
   ========================================================================= */
.uc-bus {
    --pad: clamp(18px, 2.2vw, 30px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}
.uc-bus > article {
    position: relative;
    min-width: 0;
    padding: 30px var(--pad) 40px 0;
    border-top: 1px solid var(--border);
}
.uc-bus > article:not(:nth-child(4n+1)) {
    padding-left: var(--pad);
}
.uc-bus > article::before {          /* node on the rule */
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 9px;
    height: 9px;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--ink-3);
}
.uc-bus > article:not(:nth-child(4n+1))::before { left: var(--pad); }
.uc-bus-stage {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.uc-bus h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: balance;
}
.uc-bus p {
    margin: 10px 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ink-2);
}
.uc-bus code {                       /* machine data, not a teal moment */
    font-family: var(--font-mono);
    font-size: 0.8em;
    color: var(--ink);
    background: none;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-xs);
    padding: 0 5px;
}

@media (max-width: 1024px) {
    .uc-bus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uc-bus > article:not(:nth-child(4n+1)) { padding-left: 0; }
    .uc-bus > article:not(:nth-child(4n+1))::before { left: 0; }
    .uc-bus > article:nth-child(2n) { padding-left: var(--pad); }
    .uc-bus > article:nth-child(2n)::before { left: var(--pad); }
}
@media (max-width: 640px) {
    .uc-bus { grid-template-columns: 1fr; border-left: 1px solid var(--border); margin-left: 4px; }
    /* :nth-child(n) lifts specificity to beat the tablet column rules */
    .uc-bus > article:nth-child(n) { padding: 0 0 32px 26px; border: 0; }
    .uc-bus > article:last-child { padding-bottom: 0; }
    .uc-bus > article:nth-child(n)::before { top: 3px; left: -5px; }
}

/* =========================================================================
   Framework register (uc-reg) — Regulatory coverage. The nine framework
   cards and the nine seals merged into one open ruled register (design
   system Data table, variation B: open ruled rows, no frame, no fills).
   Left: what kind of instrument it is (mono label). Right: headline, text. The only teal is
   the "New" label on DORA and NIS2.
   ========================================================================= */
.uc-reg {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.uc-reg > li {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    column-gap: clamp(20px, 3vw, 40px);
    padding: 28px 0;
}
.uc-reg > li + li { border-top: 1px solid var(--border-soft); }
.uc-reg-kind {                      /* what kind of instrument: law, standard, attestation */
    padding-top: 3px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.uc-reg-tag {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.uc-reg > li.is-eu .uc-reg-tag { color: var(--teal); }
.uc-reg h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.uc-reg p {
    margin: 8px 0 0;
    max-width: 64ch;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-2);
}

.uc-reg p.uc-reg-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin-top: 14px;
    font-size: 0.875rem;
    font-weight: 600;
}
.uc-reg-links a { color: var(--ink); text-decoration: none; }
.uc-reg-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
    .uc-reg > li { grid-template-columns: 1fr; row-gap: 10px; padding: 24px 0; }
}

/* =========================================================================
   Evidence step-down (uc-step) — Tamper-evidence. The record as a hash
   chain (sk-chain blocks: Chain, Log, Note, Verify, the verify block green)
   whose spine runs on past Verify and steps right into the evidence pack,
   framed as a card: the pack contains the record. The gap beside the chain
   holds the design-system Signal Field raster: the band fades to --bg
   around its V of signal lines. Teal on the step
   into the card. The plan note is the footnote. One spine on phones.
   ========================================================================= */
.uc-step {
    --gap: clamp(48px, 7vw, 104px);
    --drop: 48px;                      /* chain bottom -> card top */
    --run: 35px;                       /* step height inside the card = label line */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gap);
}
.uc-step-chain { grid-column: 1; grid-row: 1; }
.uc-step h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.uc-step p:not(.uc-step-note) {
    margin: 8px 0 0;
    max-width: 56ch;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-2);
}
.uc-step h3 .claim-note { vertical-align: 0.1em; line-height: 0; margin-left: 6px; }
.uc-step h3 .claim-note__trigger { font-size: 0.6em; opacity: 0.8; }

/* Signal Field in the gap: the raster's V (~54-88% x, 17-74% y of the
   frame) centred in the gap. Its ground is --bg, so a soft mask makes the
   grey band fade to --bg toward the V, which carries the lines. */
section:has(.uc-step-field) { overflow-x: clip; }
.uc-step-field {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    pointer-events: none;
}
.uc-step-field::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1320px;
    height: 742px;
    margin: -340px 0 0 -935px;        /* V centre (71% x, 46% y) onto the gap centre */
    background: url("/img/brand/signal-field-spine-teal-left-2880x1620.webp") 0 0 / 100% 100% no-repeat;
    -webkit-mask-image: radial-gradient(380px 335px at 935px 340px, #000 20%, rgba(0,0,0,0.6) 50%, transparent 100%);
            mask-image: radial-gradient(380px 335px at 935px 340px, #000 20%, rgba(0,0,0,0.6) 50%, transparent 100%);
}

/* the pack: a square card, lifted */
.uc-step-pack {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    margin-top: var(--drop);
    padding: 28px 32px 30px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-card);
}
/* the step, drawn from the chain so it continues the spine exactly:
   down from the spine's end (sk-chain::before stops 6px above the list's
   foot), then right across the gap to the card's left edge */
.uc-step-chain::after {
    content: "";
    position: absolute;
    top: calc(100% - 6px);
    left: 6px;
    width: calc(100% + var(--gap) - 6px);
    height: calc(6px + var(--drop) + var(--run));
    background:
        linear-gradient(var(--border), var(--border)) left top / 1px 100% no-repeat,
        linear-gradient(90deg, var(--border), var(--border) 55%, var(--teal-40)) left bottom / 100% 1px no-repeat;
    pointer-events: none;
}
.uc-step-pack > .sk-chain-stage { position: relative; color: var(--teal); }
.uc-step-pack > .sk-chain-stage::before {   /* arrowhead onto the card edge */
    content: "";
    position: absolute;
    top: 4px;
    left: -40px;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--teal);
    border-right: 1px solid var(--teal);
    transform: rotate(45deg);
}

.uc-step-note { grid-column: 1 / -1; grid-row: 3; margin: 40px 0 0; }
.uc-step-note strong { color: var(--ink-2); font-weight: 600; }

@media (max-width: 900px) {
    .uc-step { grid-template-columns: 1fr; --drop: 40px; }
    .uc-step-field { display: none; }
    .uc-step-pack { grid-column: 1; margin-left: 32px; padding: 22px 20px 24px; }
    .uc-step-chain::after { width: 26px; }
    .uc-step-pack > .sk-chain-stage::before { left: -28px; }
    .uc-step { --run: 29px; }
}
/* =========================================================================
   Programme frame (uc-prog) — Audit readiness. Six equal components of
   one audit programme in a single square frame, no fills: navy frame,
   soft navy hairlines between cells, no single component accented.
   One left spine on phones.
   ========================================================================= */
.uc-prog {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--border);
}
.uc-prog > article {
    min-width: 0;
    padding: 28px clamp(18px, 2.4vw, 28px) 32px;
}
.uc-prog > article:not(:nth-child(3n)) { border-right: 1px solid var(--border-soft); }
.uc-prog > article:nth-child(-n+3) { border-bottom: 1px solid var(--border-soft); }
.uc-prog-tag {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.uc-prog h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.uc-prog p {
    margin: 10px 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ink-2);
}

@media (max-width: 720px) {
    .uc-prog { grid-template-columns: 1fr; border: 0; border-left: 1px solid var(--border); margin-left: 4px; }
    /* :nth-child(n) lifts specificity to beat the desktop cell rules */
    .uc-prog > article:nth-child(n) { padding: 0 0 32px 26px; border: 0; }
    .uc-prog > article:last-child { padding-bottom: 0; }
}
/* =========================================================================
   Section lattice (uc-lattice) — design-system Lattice card highlight
   (.ds-lattice: 60° tile, pitch 38px, stroke teal 26%, pool teal 12% to
   ice 3.5% to 0) applied to the section, not a card. Wider fade than the
   card recipe so it reads at section scale. It runs
   from the section's top-right corner, fading out toward the section centre
   (owner call: it passes faintly behind the lede). It is the section's one
   teal moment, so the frame carries none.
   ========================================================================= */
.uc-lattice { isolation: isolate; overflow: hidden; }
.uc-lattice > .container-narrow { position: relative; z-index: 1; }
.uc-lattice::before,
.uc-lattice::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: clamp(260px, 72vw, 1120px);   /* fade reaches past the section centre */
    height: 880px;
    pointer-events: none;
}
.uc-lattice::before {               /* pool: teal to ice, from just outside the corner */
    background: radial-gradient(75% 95% at 100% 0%, rgba(0,191,255,0.12), rgba(77,148,255,0.035) 55%, transparent 100%);
}
.uc-lattice::after {                /* lattice, faded by mask, never a hard edge */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='43.88'%3E%3Cg stroke='%2300BFFF' stroke-opacity='0.26' stroke-width='1' fill='none'%3E%3Cpath d='M0 0V43.88M0 0L38 21.94M0 21.94L38 0M0 21.94L38 43.88M0 43.88L38 21.94'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 38px 43.88px;
    background-position: right top;
    -webkit-mask-image: radial-gradient(80% 100% at 100% 0%, #000 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.24) 68%, rgba(0,0,0,0.06) 88%, transparent 100%);
            mask-image: radial-gradient(80% 100% at 100% 0%, #000 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.24) 68%, rgba(0,0,0,0.06) 88%, transparent 100%);
}
@media (max-width: 720px) {          /* no gutter: keep it in the top padding, clear of the eyebrow */
    .uc-lattice::before,
    .uc-lattice::after { width: 200px; height: 110px; }
}

/* Closing CTA: even line lengths for the longer headline (this file loads on this page only). */
.dispatch h2 { text-wrap: balance; }