/* ============================================================
   A4.3 Operationalize CTEM: page-local styles.
   Shared, namespace oc-:
     oc-also     operating split strip
     oc-hand     readout head and foot
     oc-line     the one line beneath each figure
     oc-link     the closure link
   Figures, namespace v2- (built 18 Sep) and rg- (carried over from the
   ring scratch page):
     v2-hero     two-column hero, ring beside the text column
     v2-strata   operating split: thin rail for your program, teal
                 ribbon for Unizo, Verify emphasised in both
     v2-ctx      context: the chain as five source fragments, then whole
                 on the Live Security Context base
     rg-panels   handoff: zigzag across three lanes, then the readout
                 landing on Platform Security
     v2-cards    closure: six stamped cards, verdicts land in sequence
     v2-proof    proof: blurred dashboard against the paper Report
   Dashed means absent, as everywhere on the site. Tone is risk only:
   closed green, exposure red. Mitigated is never drawn closed. Teal is
   Unizo. One coloured focal point per figure.
   ============================================================ */

/* ---------- section 4: also yours ---------- */
.oc-also { margin: var(--space-8) 0 var(--space-5); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-wide); color: var(--text-secondary); }
.oc-also b { font-weight: var(--fw-medium); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-tertiary); margin-inline-end: var(--space-2); }

/* ---------- section 6: the readout ---------- */
.oc-hand { max-width: 760px; margin-top: var(--space-10); }
.oc-hand__h { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding-inline: var(--space-5); padding-block: var(--space-3); border-bottom: 1px solid var(--g-line); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--g-ink-2); }
.oc-hand__h b { font-weight: var(--fw-medium); letter-spacing: var(--ls-wider); color: var(--g-ink); }
.oc-hand .g-record__row dd small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--g-ink-3); }
.oc-hand .g-record__note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--g-ink-3); }

.oc-line { margin: var(--space-6) 0 0; max-width: var(--measure-lg); }
.oc-link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-6); font-weight: var(--fw-semibold); font-size: var(--text-md); color: var(--accent-text); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom: 2px; }
.oc-link:hover { border-bottom-color: var(--accent); }
.oc-link i { width: 17px; height: 17px; }
.oc-line a { color: var(--accent-text); }

/* ---------- figures, promoted from _v2 on 18 Sep ---------- */

.v2-svg { display: block; width: 100%; height: auto; overflow: visible; }
.v2-cap { margin: 0 0 var(--space-4); font-family: var(--font-sans); font-size: 18px; line-height: 1.35; color: var(--text-primary); max-width: var(--measure-lg); }
.v2-key { display: block; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-tertiary); }
.uw-dark .v2-cap { color: #E4E8EE; }
.uw-dark .v2-key { color: #7C8698; }

/* 1 hero: side by side. Kicker, H1, lead and CTA in the left column, the ring in
   the right, centred against the text. The left column takes about two thirds of
   the 1136px content measure, which leaves the H1 at least 750px at 1440 so both
   of its sentences set on one line. The ring column is fixed at 340px, the floor
   that keeps its label type at 14px or more. */
.v2-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-10); align-items: center; }
.v2-hero .uw-h1 { max-width: none; margin-bottom: var(--space-5); }
.v2-hero .uw-cta { margin-top: calc(var(--text-lg) * var(--lh-relaxed)); }   /* one lead line-height */
.v2-ring { display: block; width: 100%; height: auto; overflow: visible; }
.v2-ring .rg-arc { fill: none; stroke: #A2ABBB; stroke-width: 9; stroke-linecap: butt; }
.v2-ring .rg-head { fill: #A2ABBB; }
.v2-ring .rg-arc--six { stroke: var(--accent-text); }
.v2-ring .rg-head--six { fill: var(--accent-text); }
.v2-ring .rg-lbl { font-family: var(--font-sans); font-size: 29px; font-weight: 500; fill: #E4E8EE; }   /* 14.1px at the 340px column */
.v2-ring .rg-lbl--six { fill: var(--accent-text); font-weight: 700; }
@media (max-width: 1023.98px) {
  .v2-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .v2-hero__fig { max-width: 480px; margin-block-start: var(--space-6); }
  .v2-ring .rg-lbl { font-size: 21px; }   /* 14.4px at 480 */
}
@media (max-width: 560px) { .v2-ring .rg-lbl { font-size: 30px; } }   /* 14.4px at 335 */

/* 2 operating split: strata */
.v2-strata { margin-top: var(--space-5); display: grid; grid-template-columns: 120px repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
.v2-strata__lanes { display: grid; grid-row: 1 / 4; grid-template-rows: subgrid; }
.v2-strata__lane { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-secondary); padding-inline-end: var(--space-3); }
.v2-strata__lane--you { grid-row: 2; align-self: end; padding-block-end: 10px; }
.v2-strata__lane--uz { grid-row: 3; align-self: center; color: var(--accent-text); font-weight: 600; }
.v2-strata__col { display: grid; grid-row: 1 / 4; grid-template-rows: subgrid; min-width: 0; border-inline-start: 1px solid rgba(10,13,18,.32); }
.v2-strata__col:last-child { border-inline-end: 1px solid rgba(10,13,18,.32); }
.v2-strata__stage { padding: 0 var(--space-3) var(--space-3); font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--text-primary); }
.v2-strata__you { align-self: end; padding: 0 var(--space-3) 10px; border-block-end: 2px solid #A2ABBB; font-family: var(--font-sans); font-size: 15px; line-height: 1.35; color: var(--text-primary); }
.v2-strata__uz { box-sizing: border-box; min-height: 76px; padding: var(--space-4) var(--space-3); background: #0A5D6E; color: #FFFFFF; font-family: var(--font-sans); font-size: 15px; line-height: 1.35; font-weight: 500; }
.v2-strata__col--six .v2-strata__stage { color: var(--accent-text); }
.v2-strata__col--six .v2-strata__you { border-block-end: 3px solid var(--text-primary); font-weight: 600; }
.v2-strata__col--six .v2-strata__uz { background: #0C7589; font-weight: 700; }
@media (max-width: 900px) {
  .v2-strata { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .v2-strata__lanes { grid-row: auto; grid-template-rows: none; display: flex; gap: var(--space-5); }
  .v2-strata__lane, .v2-strata__lane--you, .v2-strata__lane--uz { grid-row: auto; padding: 0; }
  .v2-strata__col { grid-row: auto; grid-template-rows: auto auto auto; border: 0; }
  .v2-strata__col:last-child { border: 0; }
  .v2-strata__stage { padding-inline: 0; padding-block-end: var(--space-2); }
  .v2-strata__you { padding-inline: 0; padding-block-end: 8px; }
  .v2-strata__uz { min-height: 0; margin-top: var(--space-2); padding: var(--space-3) var(--space-4); }
}

/* 3 context: fragments, then the whole chain on its base */
.v2-ctx { margin: var(--space-10) 0 0; display: grid; gap: var(--space-8); }
.v2-frag, .v2-after__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.v2-frag { padding-block: var(--space-3); border-block-end: 1px solid var(--border-default); }
.v2-frag:last-child { border-block-end: 0; }
.v2-frag__src { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-secondary); padding-block-start: 22px; }
.v2-frag .g-path__node:not([data-held]) { color: var(--text-tertiary); font-weight: 400; }
.v2-frag .g-path__node:not([data-held])::before { background: var(--g-surface); border: 2px solid rgba(15,19,26,.28); box-shadow: none; }
.v2-frag .g-path__node::after { display: none; }
.v2-ctx .g-path__node[data-held] { font-weight: 500; }
.v2-ctx .g-path__node[data-held]::before { background: var(--g-tone); }
.v2-ctx .g-path__tag { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--g-ink-2); }
.v2-after { padding-block-start: var(--space-3); }
.v2-after__base { margin-top: var(--space-4); height: 44px; display: grid; place-items: center; background: #0A5D6E; color: #FFFFFF; font-family: var(--font-sans); font-size: 15px; font-weight: 600; }
@media (max-width: 760px) {
  .v2-frag, .v2-after__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .v2-frag__src { padding-block-start: 0; }
}

/* 4 handoff (reused from _ring) */
.rg-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-10); align-items: start; }
.rg-panel__k { display: block; margin-bottom: var(--space-4); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: var(--ls-wider); color: var(--text-tertiary); }
.rg-lbl { font-family: var(--font-sans); font-size: 15px; font-weight: 500; fill: var(--text-primary); }
.rg-lane line { stroke: #7C8698; stroke-width: 2; }
.rg-lane--teal line { stroke: var(--accent-text); stroke-width: 3; }
.rg-zig { fill: none; stroke: var(--critical-600); stroke-width: 2.5; }
.rg-note text { font-family: var(--font-sans); font-size: 14px; fill: var(--critical-600); }
.rg-dot { fill: var(--critical-600); }
.rg-ticket rect { fill: #FFFFFF; stroke: #566073; stroke-width: 2; }
.rg-ticket text { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; fill: var(--text-primary); }
.rg-ticket--teal rect { stroke: var(--accent-text); }
.rg-drop { stroke: var(--accent-text); stroke-width: 2; }
.rg-readout { max-width: none; margin-top: 0; }
.rg-readout .g-record__row dd { overflow-wrap: normal; }
.rg-svg--land { margin-top: var(--space-2); }
.v2-hand .v2-cap { min-height: 48px; }
@media (max-width: 900px) { .rg-panels { grid-template-columns: minmax(0, 1fr); } .v2-hand .v2-cap { min-height: 0; } }

/* 6 closure: the stamped cards (reused from _ring), no ring */
.v2-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); max-width: 1040px; }
.rg-card { position: relative; box-sizing: border-box; min-height: 168px; padding: var(--space-4); background: #10151D; border: 1px solid #2C3849; display: grid; place-items: center; overflow: hidden; }
.rg-stamp { display: inline-block; padding: 4px 10px; border: 2px solid currentColor; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.rg-stamp--done { position: absolute; top: 18px; left: 50%; transform: translateX(-50%) rotate(-8deg); color: #7C8698; }
.rg-stamp--exp { position: relative; z-index: 2; color: var(--critical-500); transform: rotate(-6deg); text-align: center; background: #10151D; }
.rg-stamp--exp small { display: block; margin-top: 3px; font-size: 12px; letter-spacing: 0; text-transform: none; max-width: 112px; line-height: 1.25; }
.rg-seal { position: relative; z-index: 2; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 3px double var(--success-500); color: var(--success-500); font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-12deg); background: #10151D; }
.rg-through { position: absolute; left: -4px; right: -4px; top: 50%; height: 2.5px; background: var(--critical-500); z-index: 1; }
.rg-through::before, .rg-through::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--critical-500); }
.rg-through::before { left: 6px; } .rg-through::after { right: 6px; }
.v2-land { display: contents; }
.v2-cards .v2-key { margin-bottom: var(--space-3); }
@media (prefers-reduced-motion: no-preference) {
  html.js .v2-motion .v2-land { display: block; opacity: 0; transform: scale(1.7); }
  html.js .v2-motion.is-in .v2-land { animation: v2-land .42s cubic-bezier(.2,.9,.3,1.2) forwards; }
  .v2-motion .rg-card:nth-child(2) .v2-land { animation-delay: .18s; }
  .v2-motion .rg-card:nth-child(3) .v2-land { animation-delay: .36s; }
  .v2-motion .rg-card:nth-child(4) .v2-land { animation-delay: .54s; }
  .v2-motion .rg-card:nth-child(5) .v2-land { animation-delay: .72s; }
  .v2-motion .rg-card:nth-child(6) .v2-land { animation-delay: .90s; }
  @keyframes v2-land { to { opacity: 1; transform: scale(1); } }
}
@media (max-width: 900px) {
  .v2-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rg-stamp { font-size: 12px; letter-spacing: .08em; padding: 4px 8px; }
  .rg-stamp--exp small { max-width: 92px; }
}
@media (max-width: 560px) {
  .rg-card { padding: var(--space-3) 6px; min-height: 150px; }
  .rg-stamp { letter-spacing: .05em; padding: 3px 6px; }
  .rg-stamp--done { top: 12px; }
  .rg-stamp--exp small { max-width: 78px; }
  .rg-seal { width: 72px; height: 72px; font-size: 12px; letter-spacing: .06em; }
}

/* 7 proof (reused from _ring, asymmetric) */
.v2-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-10); margin-top: var(--space-10); align-items: start; }
.rg-dash { display: block; width: 100%; filter: blur(1.3px); opacity: .55; }
.rg-dash__bars rect { fill: #A2ABBB; }
.rg-dash__axis { stroke: #A2ABBB; stroke-width: 2; }
.rg-dash__donut { fill: none; stroke: #C9D0DA; stroke-width: 22; }
.rg-dash__donut--seg { stroke: #8E98A8; } .rg-dash__donut--seg2 { stroke: #A2ABBB; }
.rg-dash__tile { fill: #D6DBE3; }
.v2-proof .v2-cap { margin: var(--space-4) 0 var(--space-2); }
.rg-caps { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.rg-paper { background: #FFFFFF; padding: var(--space-6) var(--space-7); box-shadow: 0 1px 2px rgba(10,13,18,.08), 0 18px 40px rgba(10,13,18,.14); border: 1px solid rgba(10,13,18,.06); }
.rg-paper__h { padding-block-end: var(--space-3); border-block-end: 2px solid var(--text-primary); font-family: var(--font-sans); font-size: 18px; font-weight: 700; color: var(--text-primary); }
.rg-paper__id { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; }
.rg-paper__rows { margin: 0; display: grid; gap: var(--space-4); padding-top: var(--space-4); }
.rg-paper__rows dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.rg-paper__rows dd { margin: 3px 0 0; font-size: 16px; color: var(--text-primary); overflow-wrap: anywhere; }
.rg-paper__rows dd small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
@media (max-width: 900px) { .v2-proof { grid-template-columns: minmax(0, 1fr); } }