/* ===== diagram kit (Oct 2026) · shared by every figure =====
   Built into public/diagrams/diagrams.css by tools/build_diagrams.py.
   Rules: teal (.dg-signed) means signed and nothing else; 1px hairlines,
   radius 2, no shadows or gradients; type by class only; two SVGs per figure,
   the narrow one shows under 720px; motion fires once via the kit script. */
.dg{position:relative;margin-top:40px;
  --dg-ink:var(--ink);--dg-ink2:var(--ink2);--dg-soft:var(--ink3);
  --dg-node:var(--card);--dg-rule:var(--rule2);--dg-bg:var(--bg);--dg-soft-text:var(--ink2);
  --dg-teal:#00A58E;--dg-teal-soft:rgba(0,165,142,.14);--dg-focus:var(--acc)}
.dg--dark{--dg-ink:#E8E8E4;--dg-ink2:#C5CBD6;--dg-soft:#9DA8B8;--dg-soft-text:#9DA8B8;--dg-node:#0F1D33;--dg-rule:#2A3650;--dg-bg:#0A1628;
  --dg-teal:#00D4B5;--dg-teal-soft:rgba(0,212,181,.16);
  background:var(--dg-bg);border-radius:14px;padding:24px 24px 20px;color:var(--dg-ink)}
.dg--dark figcaption,.dg--dark .dg-detail{color:var(--dg-ink2)}
.dg svg{display:block;width:100%;height:auto;overflow:visible}
.dg{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:4px}
.dg .dg__wide{display:block;min-width:var(--dg-minw,1200px)}
.dg .dg__narrow{display:none;max-width:360px;margin:0 auto}
@media(max-width:719px){.dg .dg__wide{display:none}.dg .dg__narrow{display:block}}
@media(max-width:560px){.dg--dark{margin-inline:-20px;padding:16px 15px 14px;border-radius:0}.dg--dark .dg__sample{right:15px}}
/* light figures take the page padding too, so the 360 narrow drawing renders 1:1 at 390 (spec 1.12: nothing under 12px);
   everything that is not the drawing steps back in to the text column */
@media(max-width:560px){.dg:not(.dg--dark){margin-inline:-20px}.dg:not(.dg--dark)>:not(svg){margin-inline:20px}}

/* type */
.dg .t-node{font-family:var(--serif);font-weight:600;font-size:14px;fill:var(--dg-ink)}
.dg .t-node--soft{fill:var(--dg-ink2)}
.dg .t-tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;fill:var(--dg-soft-text)}
.dg .t-val{font-family:var(--mono);font-size:12px;fill:var(--dg-ink2)}
.dg .t-val--ink{fill:var(--dg-ink)}
.dg .t-num{font-family:var(--serif);font-weight:500;font-size:96px;letter-spacing:-.03em;fill:var(--dg-ink)}

/* shapes */
.dg .ln{stroke:var(--dg-ink);stroke-width:1;fill:none;vector-effect:non-scaling-stroke;stroke-linecap:butt}
.dg .ln--2{stroke-width:2}
.dg .ln--soft{stroke:var(--dg-soft)}
.dg .dash{stroke-dasharray:4 3}
.dg .box{fill:var(--dg-node);stroke:var(--dg-rule);stroke-width:1;vector-effect:non-scaling-stroke;rx:2}
.dg .box--ink{stroke:var(--dg-ink)}
.dg .box--ink2{stroke:var(--dg-ink);stroke-width:2}
.dg .box--bare{fill:none}
.dg .dot{fill:var(--dg-ink)}
.dg .hit{fill:transparent;stroke:none}
.dg .muted .box{opacity:.35}
.dg .muted text{fill:var(--dg-soft-text)}
.dg .muted .ln{opacity:.35}
.dg marker path{fill:var(--dg-ink)}
.dg marker.m-soft path{fill:var(--dg-soft)}

/* signed: the only teal in any figure */
.dg .dg-signed{stroke:var(--dg-teal)}
.dg rect.dg-signed,.dg path.dg-signed--chip{fill:var(--dg-teal-soft);stroke:var(--dg-teal)}
.dg text.dg-signed{fill:var(--dg-teal);stroke:none}
.dg circle.dg-signed,.dg .dg-signed--fill{fill:var(--dg-teal);stroke:none}
.dg marker.dg-signed path{fill:var(--dg-teal)}

/* figure chrome */
.dg__sample{position:absolute;top:0;right:0;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--dg-soft-text);border:1px solid var(--dg-rule);border-radius:2px;padding:3px 8px;background:var(--dg-bg)}
/* scroll cue (kit script): shown only while the wide SVG is wider than the figure and unscrolled */
.dg__scroll{display:none;position:absolute;top:4px;right:4px;z-index:1;font-family:var(--mono);font-size:11px;color:var(--dg-soft-text);padding:3px 4px 3px 0}
.dg.is-scrollable .dg__scroll{display:block}
.dg--dark .dg__sample{top:12px;right:12px}
.dg figcaption{margin-top:16px;font-size:15px;line-height:1.5;color:var(--dg-ink2);max-width:72ch}
.dg-detail{min-height:1.6em;margin-top:8px;font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--dg-soft-text)}
.dg-detail:empty::before{content:attr(data-hint);opacity:.75}
.dg .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dg-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;align-items:center}
.dg-btn{font:inherit;font-weight:600;font-size:14px;line-height:1;min-height:44px;padding:0 16px;border-radius:2px;border:1px solid var(--dg-ink);background:transparent;color:var(--dg-ink);cursor:pointer}
.dg-btn:hover{background:var(--dg-node)}
.dg-btn:focus-visible,.dg input:focus-visible{outline:2px solid var(--dg-focus);outline-offset:2px}
.dg-status{font-family:var(--mono);font-size:12px;color:var(--dg-ink2)}

/* focusable nodes: a ring rect inside each group */
.dg [tabindex]{cursor:pointer;outline:none}
.dg .focus-ring{fill:none;stroke:var(--dg-focus);stroke-width:2;vector-effect:non-scaling-stroke;opacity:0;pointer-events:none}
.dg [tabindex]:focus-visible>.focus-ring{opacity:1}

/* highlight on hover/focus: dim the rest, keep the path */
.dg.is-hi .hi:not(.is-on) .box,.dg.is-hi .hi:not(.is-on) .ln,.dg.is-hi path.hi:not(.is-on),.dg.is-hi line.hi:not(.is-on){opacity:.35}
.dg.is-hi .hi:not(.is-on) text,.dg.is-hi text.hi:not(.is-on){fill:var(--dg-soft-text)}
.dg .hi{transition:opacity .2s}

/* motion: one orchestrated moment, fired once by the kit script. Without
   script, or under reduced motion, everything is in its final state. */
@media (prefers-reduced-motion: no-preference){
  .dg.is-armed .a-in{opacity:0}
  .dg.is-armed .a-draw{stroke-dasharray:1;stroke-dashoffset:1}
  .dg.is-armed:not(.is-live) .a-draw{opacity:0}
  .dg.is-live .a-in{animation:dgIn .5s ease both;animation-delay:var(--d,0s)}
    /* the stylesheet owns the final state (drawn, full opacity) so hover dimming still reaches the line;
     the first keyframe hides shaft and arrowhead until this line's own turn */
  .dg.is-live .a-draw{stroke-dasharray:1;stroke-dashoffset:0;animation:dgDraw .6s ease backwards;animation-delay:var(--d,0s)}
  .dg.is-live .a-draw.dash{stroke-dasharray:4 3;stroke-dashoffset:0;animation:dgIn .4s ease backwards;animation-delay:var(--d,0s)}
}
/* drawn lines scale with the drawing: non-scaling-stroke would measure the dash in screen pixels
   and leave a path 78% drawn at 1.28x */
.dg .a-draw{vector-effect:none}
@keyframes dgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dgDraw{0%{stroke-dashoffset:1;opacity:0}2%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
/* ===== C1 · where each one sits (the control plane explainer) ===== */
/* The explainer scopes everything under .wcp and styles any figure as a white card
   (.wcp figure, .wcp figure svg, .wcp figcaption). The kit draws on the page ground,
   and its narrow drawing needs the full 360 under 560px, so those rules are put back. */
.wcp figure.dg--c1{background:none;border:0;border-radius:0;padding:0 0 4px;margin-top:40px;box-shadow:none}
/* the explainer column is 1124 wide (.wcp max-width 1180 minus its padding): the wide drawing is 1120, not 1200, so it does not scroll on a desktop */
.dg--c1{--dg-minw:1120px}
.wcp figure.dg--c1 svg{max-width:none;margin:0}
.wcp figure.dg--c1 .dg__narrow{max-width:360px;margin:0 auto}
.wcp .dg--c1 figcaption{font-size:15px;line-height:1.5;text-align:left;max-width:72ch;margin:16px 0 0;padding:0}
/* under 560 the kit bleeds the figure to the viewport edge and insets everything but the drawing; keep that inset here too */
@media(max-width:560px){.wcp .dg--c1 figcaption{margin-inline:20px}}
/* hover or focus a panel: the other two step back, teal included */
.dg--c1.is-hi .hi:not(.is-on) .dg-signed{opacity:.35}
/* ===== F1 · three requests, three routes (frIdA page, dark panel) ===== */
.dg--f1 .tok{opacity:0}
/* the chosen targets carry a filled dot; the muted air-gapped target an empty one */
.dg--f1 circle.ln{fill:none}
/* lane highlight: the lane under hover/focus keeps full ink, the station tags above it stay */
.dg--f1 .is-hi [data-hi^="st"] text{fill:var(--dg-soft-text)}
/* the record panel under the figure */
.dg--f1 .dg-panel{margin-top:14px;border-top:1px solid var(--dg-rule);padding-top:12px;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--dg-ink2)}
.dg--f1 .dg-panel__hint{color:var(--dg-soft)}
.dg--f1 .dg-panel__tag{font-size:11px;letter-spacing:.18em;color:var(--dg-soft);margin-bottom:8px}
.dg--f1 .dg-panel__grid{display:grid;grid-template-columns:max-content 1fr;gap:4px 24px;max-width:72ch}
.dg--f1 .dg-panel__grid dt{color:var(--dg-soft)}
.dg--f1 .dg-panel__grid dd{margin:0;color:var(--dg-ink)}
.dg--f1 .dg-panel__grid dd.dg-signed{color:var(--dg-teal);stroke:none}
@media(max-width:719px){.dg--f1 .dg-panel__grid{grid-template-columns:1fr;gap:2px}.dg--f1 .dg-panel__grid dd{margin-bottom:6px}}

@media (prefers-reduced-motion: no-preference){
  .dg--f1.is-live .dg__wide .tok--1{animation:f1tok1 2.4s linear both}
  .dg--f1.is-live .dg__wide .tok--2{animation:f1tok2 2.4s linear .7s both}
  .dg--f1.is-live .dg__wide .tok--3{animation:f1tok3 2.4s linear 1.4s both}
  .dg--f1.is-live .dg__narrow .tok{display:none}
}
/* each token runs the four stations of its lane, then drops onto the rail where its chip appears */
@keyframes f1tok1{0%{transform:translate(296px,226px);opacity:1}20%{transform:translate(380px,226px)}40%{transform:translate(522px,226px)}60%{transform:translate(680px,226px)}75%{transform:translate(828px,226px);opacity:1}92%{transform:translate(516px,572px);opacity:1}100%{transform:translate(516px,572px);opacity:0}}
@keyframes f1tok2{0%{transform:translate(296px,316px);opacity:1}20%{transform:translate(380px,316px)}40%{transform:translate(522px,316px)}60%{transform:translate(680px,316px)}75%{transform:translate(828px,316px);opacity:1}92%{transform:translate(652px,572px);opacity:1}100%{transform:translate(652px,572px);opacity:0}}
@keyframes f1tok3{0%{transform:translate(296px,406px);opacity:1}20%{transform:translate(380px,406px)}40%{transform:translate(522px,406px)}60%{transform:translate(680px,406px)}75%{transform:translate(828px,406px);opacity:1}92%{transform:translate(788px,572px);opacity:1}100%{transform:translate(788px,572px);opacity:0}}
/* ===== H1 · one request, four moves, one signed record (Home) ===== */
.dg--h1 .tok{opacity:0}
@media (prefers-reduced-motion: no-preference){
  .dg--h1.is-live .dg__wide .tok{animation:h1tok 5s linear both}
  .dg--h1.is-live .dg__narrow .tok{display:none}
}
/* the token rides the request path once: people, the four moves, the chosen pair, then the rail */
@keyframes h1tok{
  0%{transform:translate(180px,112px);opacity:1}
  14%{transform:translate(344px,112px)}
  16%{transform:translate(366px,94px)}
  26%{transform:translate(366px,154px)}
  36%{transform:translate(366px,214px)}
  46%{transform:translate(366px,274px)}
  50%{transform:translate(688px,274px)}
  56%{transform:translate(700px,132px)}
  68%{transform:translate(860px,132px);opacity:1}
  70%{transform:translate(860px,132px);opacity:0}
  80%{transform:translate(530px,308px);opacity:0}
  81%{transform:translate(530px,308px);opacity:1}
  90%{transform:translate(530px,378px);opacity:1}
  100%{transform:translate(530px,378px);opacity:0}
}
/* legend sync: the environment cards under the figure and the chips inside it light together */
.dg--h1 [data-env].is-legend{opacity:1}
.dg--h1 [data-env].is-legend .box{stroke:var(--dg-ink);stroke-width:2}
.envs .env.is-legend{border-color:var(--ink)}
/* ===== H2 · the chain you can break (Home, dark panel) ===== */
/* field names and the word prev: ink-soft, so the values carry the eye */
.dg--h2 .h2-k{fill:var(--dg-soft)}
/* an id chip that is no longer signed keeps a soft rule; the .box under it keeps the node fill */
.dg--h2 .h2-chip{fill:none;stroke:var(--dg-rule);stroke-width:1;vector-effect:non-scaling-stroke}
/* the links are focusable: a transparent hit area gives them a 44px target */
.dg--h2 .h2-hit{fill:transparent;stroke:none}
/* the cost cell gets a ring while the field under the figure is open */
.dg--h2 .h2-costbox{opacity:0;transition:opacity .2s}
.dg--h2.is-editing .h2-costbox{opacity:1}
.dg--h2.is-editing [data-h2-cost]{fill:var(--dg-ink)}

/* status chip: teal while the chain verifies, ink-soft once it is broken */
.dg--h2 .dg-status{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--dg-rule);border-radius:2px;color:var(--dg-ink2)}
.dg--h2 .dg-status.dg-signed{color:var(--dg-teal);border-color:var(--dg-teal);background:var(--dg-teal-soft)}
/* the two static chips kept from the old card: text, not controls */
.dg--h2 .dg-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--dg-rule);border-radius:2px;font-family:var(--mono);font-size:12px;color:var(--dg-soft)}
.dg--h2 .dg-chip--first{margin-left:auto}
.dg--h2 .dg-btn[disabled]{opacity:.4;cursor:default}
.dg--h2 .dg-btn[disabled]:hover{background:transparent}

/* the editable field lives in HTML (an input cannot sit inside the SVG); the SVG mirrors its value */
.dg--h2 .h2-editor{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.dg--h2 .h2-editor[hidden]{display:none}
.dg--h2 .h2-editor__label{font-family:var(--mono);font-size:12px;color:var(--dg-soft)}
.dg--h2 .h2-editor__cur{font-family:var(--mono);font-size:14px;color:var(--dg-ink2)}
.dg--h2 .h2-editor__input{font-family:var(--mono);font-size:14px;line-height:1;min-height:44px;width:10em;padding:0 12px;border:1px solid var(--dg-ink);border-radius:2px;background:var(--dg-node);color:var(--dg-ink);-moz-appearance:textfield}
.dg--h2 .h2-editor__input::-webkit-outer-spin-button,.dg--h2 .h2-editor__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* honesty line, mono 11 */
.dg--h2 .dg-honesty{margin:10px 0 0;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--dg-soft)}

@media(max-width:719px){
  .dg--h2 .dg-chip--first{margin-left:0}
}
/* ===== H3 · swap the model, touch nothing else (Home) ===== */
/* status tags under the app names: hidden until the swap runs */
.dg--h3 .h3-tag{opacity:0;transition:opacity .25s}
.dg--h3 .is-rewrite .h3-tag,.dg--h3 .is-nochange .h3-tag{opacity:1}
/* an app that has to be rewritten gets the ink rule; the right-hand apps stay as they were */
.dg--h3 .is-rewrite>.box{stroke:var(--dg-ink)}
/* the selector: the chosen model carries the 2px ring, the rest sit at 35% via .muted */
.dg--h3 .h3-chip>.box{transition:stroke-width .2s}
.dg--h3 .h3-chip.is-sel>.box{stroke:var(--dg-ink);stroke-width:2}
.dg--h3 .h3-chip{transition:opacity .2s}
/* the button row sits under the wide drawing, and between the two panels when they stack */
.dg--h3 .dg-actions{justify-content:center;text-align:center}
.dg--h3 .h3-n2{margin-top:8px}
/* ===== H4 · Discovery, pilot, annual (Home, the mint Discovery band) =====
   The band is mint (var(--acc)) with var(--onacc) text, so the kit's grey-page
   tokens are reset here. Every text passes AA on mint: ink 9.9:1, ink2 and
   soft text 6.5:1 (#1F4A3C), soft hairlines 4.7:1 (#2A6150). Nothing in this
   figure is signed, so the teal tokens are never painted. The focus ring is
   ink, not the accent: the accent is the ground. */
.dg--h4{--dg-ink:var(--onacc);--dg-ink2:#1F4A3C;--dg-soft-text:#1F4A3C;--dg-soft:#2A6150;--dg-rule:#2A6150;
  --dg-node:var(--card);--dg-bg:var(--acc);--dg-focus:var(--onacc)}
/* the claim and the detail line read in the band's own text colour, like the all-caps line they
   replace; the kit's hint sits at 75% opacity and in the soft ink would fall under AA on mint */
.dg--h4 figcaption,.dg--h4 .dg-detail{color:var(--dg-ink)}
/* hover or focus a rung: its box lifts to the ink rule; the kit dims the rest to 35% */
.dg--h4 .hi.is-on .box{stroke:var(--dg-ink)}
/* ===== H5 · who holds the switch (Home) ===== */
/* the slot: the pull quote, the figure and the quote card stack in one column
   (.bc__pair is a two-column grid otherwise); the grid gap replaces the figure's own top margin */
/* two classes: the kit stylesheet is linked before the page's own <style>, so one class would lose to .bc__pair */
.bc__pair.bc__pair--fig{grid-template-columns:minmax(0,1fr)}
.bc__pair.bc__pair--fig>.dg{margin-top:0}

/* the switch: the only glyph in any figure. A pill with a knob, hollow on their side, solid on yours.
   Radius beyond 2 is allowed for this glyph only. */
.dg--h5 .h5-pill{rx:9}
.dg--h5 .h5-knob{stroke:none}
.dg--h5.is-hi .hi:not(.is-on) .dot{opacity:.35}

/* the perimeter draws once, as a dashed line, not a fade: the dash pattern runs 1260 units
   (longer than either perimeter, 1232), then a zero dash and a 1260 gap (the zero keeps the count
   even, or SVG repeats the list and the gap lands on a dash slot). Sliding stroke-dashoffset from
   1260 to 0 pulls the dashes in from the first corner. Units are the drawing's own
   (vector-effect none), so the pattern and the path measure the same at every scale. */
.dg--h5 .h5-perim{vector-effect:none;stroke-dasharray:4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 4 3 0 1260}
@media (prefers-reduced-motion: no-preference){
  .dg--h5.is-armed .h5-perim{stroke-dashoffset:1260}
  .dg--h5.is-live .h5-perim{animation:h5perim 2.4s ease-out both}
}
@keyframes h5perim{from{stroke-dashoffset:1260}to{stroke-dashoffset:0}}
/* ===== H7 · the Studio console (Home): the tabs, the four panels behind Overview, the rail =====
   The console is not a figure.dg and keeps its own palette: every colour below is one the
   .cp-* rules in index_en.html already use (#0B1220 ink, #6B7280 dim, #0F8A62 green, #6EE5BB
   mint for in-perimeter environments, #C9CFDA for the rest). Nothing here is teal. Selectors
   carry .cp so they win over the inline .cp-* rules at equal depth. Breakpoints are container
   queries on the console's own width: the carousel instance is ~860px wide on a 1024 screen. */

/* tabs: real buttons. On one line with the brand the row keeps the page's fade and scrolls if a font runs wide;
   once it has its own line (container rules below) nothing is masked or hidden (the inline rule hid it under 640px) */
.cp .cp-nav{align-items:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-right:28px}
.cp .cp-nav::-webkit-scrollbar{display:none}
.cp .cp-tab{font:inherit;font-size:14px;line-height:1;min-height:44px;padding:0 2px;border:0;border-radius:4px;background:none;color:#6B7280;cursor:pointer;white-space:nowrap;flex:none}
.cp .cp-tab:hover{color:#0B1220}
.cp .cp-tab:focus-visible{outline:2px solid #0B7A56;outline-offset:-2px}
.cp[data-open="overview"] .cp-tab[data-tab="overview"],.cp[data-open="routing"] .cp-tab[data-tab="routing"],.cp[data-open="envs"] .cp-tab[data-tab="envs"],
.cp[data-open="audit"] .cp-tab[data-tab="audit"],.cp[data-open="cost"] .cp-tab[data-tab="cost"]{color:#0B1220;font-weight:600}

/* panels: data-open on the root decides, so the right one shows before any script runs. The rail stays;
   its share section steps aside on Environments and its chain section on Audit, where the main area shows them */
.cp{display:flex;flex-direction:column}
.cp .cp-body{flex:1 1 auto}   /* fills the locked height, so the rail's rule runs to the bottom on every tab */
.cp .cp-panel{display:none}
.cp[data-open="overview"] .cp-panel[data-panel="overview"],.cp[data-open="routing"] .cp-panel[data-panel="routing"],.cp[data-open="envs"] .cp-panel[data-panel="envs"],
.cp[data-open="audit"] .cp-panel[data-panel="audit"],.cp[data-open="cost"] .cp-panel[data-panel="cost"]{display:block}
.cp .cp-panel:focus-visible{outline:2px solid #0B7A56;outline-offset:-2px}
.cp[data-open="audit"] .cp-aside [data-aside="chain"]{display:none}
.cp .cp-pane{padding:24px;font-size:14px}
.cp .cp-pane .hd{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6B7280}
.cp .cp-pane .ok{margin-top:16px;font-family:var(--mono);font-size:13px;color:#0B7A56}
.cp .cp-pane .tx{margin-top:12px;max-width:560px;color:#6B7280;line-height:1.55}

/* the console's green text, one step darker: #0F8A62 on white is 4.36:1 and fails AA (it already did on the page);
   #0B7A56 is 5.3:1 on white and 5.0:1 on a fresh row's tint. Same hue, same roles; the mint bars and dot are untouched */
.cp .cp-live .lv,.cp .cp-row .sg,.cp .cp-chain .ok,.cp .cp-pane .ok,.cp .cp-chip{color:#0B7A56}
/* in-perimeter environments are marked in ink, not in the signed green (spec 1.3: the accent means signed, nothing else) */
.cp .cp-row[data-cp-env="onprem"] .e,.cp .cp-row[data-cp-env="airgap"] .e{border-color:#0B1220;color:#0B1220}
/* the time column, one step darker for the same reason: #6B7280 on a fresh row's mint tint is 4.45:1; #5B6472 is 5.4:1 */
.cp .cp-row .t{color:#5B6472}

/* overview rows: the Environment column takes 176px so the ES chip ("Híbrido · desborda a la nube") stays whole
   (842px for the table); the chip and the share bars read the environment id, not a class, so the template can emit them.
   The panel asks for 840px before the rail sits beside it (the page gives 620): with the rail beside, the table fits whole;
   below ~1140px of console the rail drops underneath and the table takes the full width instead of being cut mid-value */
.cp .cp-main{flex-basis:840px}
.cp .cp-cols:not(.cp-cols--rt):not(.cp-cols--env),.cp .cp-row:not(.cp-row--rt):not(.cp-row--env){grid-template-columns:56px minmax(100px,1.2fr) minmax(120px,1.3fr) minmax(90px,1fr) minmax(176px,1.4fr) 64px 92px}
.cp .cp-share .v{min-width:3.5ch;text-align:right}
.cp .cp-share .br{width:0;background:#C9CFDA}
.cp .cp-share [data-cp-env="onprem"] .br,.cp .cp-share [data-cp-env="airgap"] .br{background:#6EE5BB}

/* routing: configuration first, in ink, one line per row; the same chip as Overview, so the rows keep their height */
.cp .cp-cols--rt,.cp .cp-row--rt{grid-template-columns:minmax(210px,1.5fr) minmax(110px,1.1fr) minmax(90px,1fr) minmax(176px,1.4fr) 92px}
.cp .cp-row--rt .rl{color:#0B1220}

/* environments: one row per environment, the workloads running there, its share as a bar */
.cp .cp-cols--env,.cp .cp-row--env{grid-template-columns:minmax(120px,1fr) minmax(220px,2.2fr) minmax(180px,1.6fr)}
.cp .cp-row--env{padding-top:18px;padding-bottom:18px}
.cp .cp-row--env .nm{font-weight:600}
.cp .cp-row--env .wls{display:grid;gap:4px;min-width:0}
.cp .cp-row--env .n{color:#4B5563}
.cp .cp-row--env .wl{font-family:var(--mono);font-size:12px;line-height:1.5;color:#6B7280;min-height:1.5em}
.cp .cp-row--env .sh{display:grid;grid-template-columns:minmax(0,1fr) 4ch;align-items:center;gap:12px}
.cp .cp-row--env .tr{display:block;height:4px;background:#EEF0F3;border-radius:2px}
.cp .cp-row--env .br{display:block;height:4px;width:0;border-radius:2px;background:#C9CFDA;transition:width .9s ease}
.cp .cp-row--env .v{font-family:var(--mono);font-size:13.5px;text-align:right}
.cp .cp-row--env[data-cp-env="onprem"] .br,.cp .cp-row--env[data-cp-env="airgap"] .br{background:#6EE5BB}

/* audit: the newest three records as chips, each one pointing at the record it references */
.cp .cp-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 40px;margin-top:16px}
.cp .cp-chip{position:relative;display:grid;gap:4px;align-content:start;padding:14px 16px;border:1px solid #D3D7DE;border-radius:5px;font-family:var(--mono);font-size:12px;line-height:1.5;color:#4B5563}
.cp .cp-chip .id{font-size:14px;color:#0B7A56}
.cp .cp-chip .ln{min-width:0}
.cp .cp-chip .ln:empty{display:none}
/* the rest of the eight-row window as chain lines: id, the record it references, time, workload, what came back */
.cp .cp-chainlist{display:grid;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid #EEF0F3;font-family:var(--mono);font-size:12px;line-height:1.5;color:#4B5563}
.cp .cp-link{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);gap:0 10px;align-items:baseline}
.cp .cp-link .id{color:#0B7A56;white-space:nowrap}
.cp .cp-link .arr,.cp .cp-link .prev{color:#6B7280;white-space:nowrap}
.cp .cp-link .meta{color:#4B5563;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp .cp-chip:not(:first-child)::before{content:"→";position:absolute;top:10px;left:-40px;width:40px;text-align:center;font-size:14px;color:#6B7280}

/* cost: teams down, workloads across, one total (a tfoot, so it stays aligned with the table). When the table runs
   wider than the panel, the panel scrolls: it is the tabpanel and already focusable, so the region has keyboard access */
.cp .cp-cost{margin-top:16px}
.cp .cp-cost table{min-width:100%;border-collapse:collapse;font-size:13.5px}
.cp .cp-cost th,.cp .cp-cost td{padding:11px 14px;border-bottom:1px solid #EEF0F3;text-align:right;white-space:nowrap}
.cp .cp-cost thead th{background:#F8F9FA;border-bottom:1px solid #E6E8EC;font-size:13px;font-weight:600;color:#6B7280}
.cp .cp-cost th:first-child,.cp .cp-cost td:first-child{text-align:left}
.cp .cp-cost tbody th{font-weight:600;color:#0B1220}
.cp .cp-cost td{font-family:var(--mono);color:#0B1220}
.cp .cp-cost td.z::before{content:"–";color:#B8BEC9}
.cp .cp-cost tfoot th,.cp .cp-cost tfoot td{border-top:2px solid #0B1220;border-bottom:0;font-weight:600;color:#0B1220}
.cp .cp-cost tfoot td{font-size:15px}
.cp .cp-cost .cp-cost__narrow{display:none}
.cp .cp-cost__envs{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:10px;font-family:var(--mono);font-size:12.5px;color:#4B5563}
.cp .cp-cost__envs .nm{color:#6B7280}

/* the head wraps by the console's own width, not the viewport. Under 1100px (EN needs ~1010, ES ~1050 for one line)
   the tab row takes its own full line and SAMPLE stays on the first; under 480px the tabs may wrap onto a second line */
.cp{container-type:inline-size}
@container (max-width:1099px){
  .cp .cp-head{flex-wrap:wrap;height:auto;padding:10px 16px 0;gap:4px 14px;white-space:normal}
  .cp .cp-head .cp-nav{display:flex;flex:1 1 100%;order:9;margin-left:0;gap:18px;padding-right:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
}
@container (max-width:719px){
  .cp .cp-chips{grid-template-columns:minmax(0,1fr);gap:28px}
  .cp .cp-chip:not(:first-child)::before{content:"↓";top:-26px;left:14px;width:auto}
  .cp .cp-pane{padding:20px 16px}
  .cp .cp-cost th,.cp .cp-cost td{padding:10px 12px}
}
@container (max-width:859px){
  /* under 860px the seven-column grid would scroll sideways with no cue (spec 1.12: no horizontal scroll on phones):
     each row restacks, every column kept, 12px or more */
  .cp .cp-cols:not(.cp-cols--env){display:none}
  .cp .cp-row:not(.cp-row--rt):not(.cp-row--env){grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"t w sg" "rl rl m" "ew ew c";row-gap:6px;column-gap:12px}
  .cp .cp-row:not(.cp-row--rt):not(.cp-row--env) .t{grid-area:t}
  .cp .cp-row:not(.cp-row--rt):not(.cp-row--env) .w{grid-area:w}
  .cp .cp-row:not(.cp-row--rt):not(.cp-row--env) .sg{grid-area:sg;justify-self:end}
  .cp .cp-row:not(.cp-row--rt):not(.cp-row--env) .rl{grid-area:rl}
  .cp .cp-row:not(.cp-row--rt):not(.cp-row--env) .m{grid-area:m;justify-self:end;text-align:right}
  .cp .cp-row:not(.cp-row--rt):not(.cp-row--env) .ew{grid-area:ew}
  .cp .cp-row:not(.cp-row--rt):not(.cp-row--env) .c{grid-area:c;justify-self:end}
  .cp .cp-row--rt{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"rl sg" "w m" "ew ew";row-gap:6px;column-gap:12px}
  .cp .cp-row--rt .rl{grid-area:rl}
  .cp .cp-row--rt .sg{grid-area:sg;justify-self:end}
  .cp .cp-row--rt .w{grid-area:w}
  .cp .cp-row--rt .m{grid-area:m;justify-self:end;text-align:right}
  .cp .cp-row--rt .ew{grid-area:ew}
  .cp .cp-row .w,.cp .cp-row .rl,.cp .cp-row .m{white-space:normal;overflow:visible;text-overflow:clip}
  .cp .cp-main{overflow-x:visible}
  .cp .cp-cost .cp-cost__wide{display:none}
  .cp .cp-cost .cp-cost__narrow{display:table;min-width:0;width:100%}
}
@container (max-width:639px){
  .cp .cp-cols--env{display:none}
  .cp .cp-row--env{grid-template-columns:minmax(0,1fr);gap:10px}
  .cp .cp-row--env .sh{order:1}
  .cp .cp-row--env .wls{order:2}
}
@container (max-width:1139px){
  .cp .cp-body{align-content:flex-start}   /* the rail has wrapped under the panel: pack the two lines, no gap between them */
}
@container (max-width:479px){
  .cp .cp-head .cp-nav{flex-wrap:wrap;gap:0 10px}
  .cp .cp-tab{padding:0}
}
/* viewport fallback for engines without container queries */
@media(max-width:640px){
  .cp .cp-cols:not(.cp-cols--env){display:none}
  .cp .cp-row:not(.cp-row--rt):not(.cp-row--env){grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"t w sg" "rl rl m" "ew ew c";row-gap:6px;column-gap:12px}
  .cp .cp-row--rt{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"rl sg" "w m" "ew ew";row-gap:6px;column-gap:12px}
  .cp .cp-main{overflow-x:visible}
  .cp .cp-cost .cp-cost__wide{display:none}
  .cp .cp-cost .cp-cost__narrow{display:table;min-width:0;width:100%}
  .cp .cp-head .cp-nav{display:flex;flex:1 1 100%;order:9;margin-left:0;gap:0 10px;flex-wrap:wrap;padding-right:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .cp .cp-body{align-content:flex-start}
  .cp .cp-pane{padding:20px 16px}
  .cp .cp-cost th,.cp .cp-cost td{padding:10px 12px}
}
/* a chain head (704d·ddac keeps prev null, frozen for H2) shows no arrow to nothing */
.cp .cp-link:has(.prev:empty) .arr,.cp .cp-link .prev:empty{display:none}
/* ===== H8 · the definition (Home): two layers, two arrows ===== */
/* the chips inside each bottom block are laid out by index (the environment and model lists come from data.json) */
.dg--h8 .h8-chip--1{transform:translate(130px,0)}
.dg--h8 .h8-chip--2{transform:translate(0,30px)}
.dg--h8 .h8-chip--3{transform:translate(130px,30px)}
.dg--h8 .h8n-chip--1{transform:translate(152px,0)}
.dg--h8 .h8n-chip--2{transform:translate(0,30px)}
.dg--h8 .h8n-chip--3{transform:translate(152px,30px)}
.dg--h8 .h8-chip .box{fill:var(--dg-bg)}
/* the figure replaces a boxed graphic: keep the same breathing room above the definition cards */
.dg--h8{margin-top:56px;--dg-minw:940px}
/* the drawing starts at its top edge: leave room for the SAMPLE tag in both layouts */
.dg--h8 .dg__wide,.dg--h8 .dg__narrow{margin-top:28px}
/* ===== P1 · three ways in: a staircase over one constant band (Platform) ===== */
/* text on the ink band reads in the page background color */
.dg--p1 text.t-band{fill:var(--dg-bg)}
/* the band draws left to right, before its texts and before the teal edge */
.dg--p1 .p1-band{transform-box:fill-box;transform-origin:left center}
@media (prefers-reduced-motion: no-preference){
  .dg--p1.is-armed .p1-band{transform:scaleX(0)}
  .dg--p1.is-live .p1-band{animation:p1band .6s ease both}
}
@keyframes p1band{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* hover or focus a column: its blocks lift to full ink, the kit dims the rest to 35% */
.dg--p1 .hi.is-on .box{stroke:var(--dg-ink)}
/* the band's label, right under the band */
.dg--p1 .dg-band__label{margin:12px 0 0 5%;font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--dg-ink2)}
/* the three doors, under their columns: same 5% margins and 3.33% gaps as the wide SVG */
.dg--p1 .dg-doors{display:grid;grid-template-columns:repeat(3,1fr);column-gap:3.333%;padding:0 5%;margin-top:28px}
.dg--p1 .dg-door{display:flex;flex-direction:column;gap:10px;transition:opacity .2s}
.dg--p1 .dg-door .way__b{margin:0}
@media(max-width:719px){
  .dg--p1 .dg-band__label{margin-left:0}
  .dg--p1 .dg-doors{grid-template-columns:1fr;padding:0;row-gap:24px}
}

/* the door eyebrows sit on the page background here, not on a white card: ink2 keeps them at AA */
.dg--p1 .dg-door .way__n{color:var(--ink2)}
/* ===== P2 · what is inside the plane (Platform) =====
   A light figure. Everything moves through the kit (a-in staggered by --d,
   the rail last with a-draw); the only rule of its own is the lift on hover:
   the layer under the pointer or focus brings its chips to full ink. */
.dg--p2 [data-hi]:hover .box,
.dg--p2 [data-hi]:focus-visible .box{stroke:var(--dg-ink)}
.dg--p2 .dg__narrow{max-width:360px}
/* ===== S1 · context in, intelligence out (Studio) ===== */
/* The three surfaces are SVG links to #surfaces. The kit's hover/focus dim and detail
   line do the rest; here only the link states: no underline, the row outline goes to
   the 2px weight on hover, and the focus ring shows (the kit keys its ring to [tabindex],
   which the links also carry; this covers the link without it). */
.dg--s1 a{text-decoration:none}
.dg--s1 a:hover .box--bare{stroke-width:2}
.dg--s1 a:focus-visible>.focus-ring{opacity:1}
/* ===== S2 · fourteen days, to scale (Studio, a light section) =====
   Everything moves through the kit: the axis draws first, the ticks fade in, the
   five cards appear in axis order (0.4 s to 3.0 s, spaced like the days they sit on),
   the bracket draws last. Nothing here is signed, so the teal tokens are never painted.
   The only rules of its own: the milestone under the pointer or focus lifts its box to
   the ink rule, and its dot dims with the rest while another milestone is highlighted. */
.dg--s2 .hi.is-on .box{stroke:var(--dg-ink)}
.dg--s2.is-hi .hi:not(.is-on) .dot{opacity:.35}
.dg--s2 .dot{transition:opacity .2s}