/* DeepCurrent — what tokens.json cannot hold: font aliases, composite type roles, borders, washes, motion, and the base element rules.
   Moved here from tokens/typography.css, radius.css, elevation.css, motion.css and semantic.css; every lifted value now lives in tokens.json / tokens.css. */
/* The face: IBM Plex Mono by default. IBM Plex Sans is the owner's alternate (Settings › Display, v81, Andrew 26 Oct):
   data-font="sans" on any element switches every word beneath it; data-font="mono" puts Mono back. The aliases and type roles
   below are declared on :root and again on every [data-font] element, so a role re-resolves under the face its subtree chose. */
:root,[data-font="mono"]{--dc-face:var(--font-mono)}
[data-font="sans"]{--dc-face:var(--font-sans)}
:root,[data-font]{
/* Font aliases — the stacks themselves are type.families in tokens.json (--font-mono; --font-sans for the owner's alternate only) */
--dc-font-mono:var(--dc-face);--dc-font-ui:var(--dc-face);--dc-font-display:var(--dc-face);/* aliases kept so templates and slides that name the old roles resolve to Plex Mono */
/* One face per subtree: IBM Plex Mono for every word and number unless the owner chose Plex Sans. --dc-font-text is kept as an alias so older markup resolves to it */
--dc-font-text:var(--dc-face);
/* Semantic type roles — composites of the Kelex size, weight and leading tokens, in the subtree's face (Plex Mono unless the owner chose Plex Sans) */
--dc-type-hero:var(--kelex-weight-regular) var(--kelex-text-header-1)/var(--kelex-leading-tight) var(--dc-font-text);
--dc-type-metric:var(--kelex-weight-regular) var(--kelex-text-subtitle-2)/var(--kelex-leading-tight) var(--dc-font-mono);
--dc-type-page-title:var(--kelex-weight-bold) var(--kelex-text-header-2)/var(--kelex-leading-default) var(--dc-font-text);
--dc-type-card-title:var(--kelex-weight-bold) var(--kelex-text-body)/var(--kelex-leading-default) var(--dc-font-text);
/* Body copy is locked at Kelex body 16: every paragraph and reading sentence. Labels, meta, tables, buttons and chips use the label roles at 12.8 */
--dc-type-body:var(--kelex-weight-regular) var(--kelex-text-body)/var(--kelex-leading-default) var(--dc-font-text);
/* Meta: a short fragment beside or under a title (a hint, a role, a table subtitle). Never a paragraph */
--dc-type-body-sm:var(--kelex-weight-regular) var(--kelex-text-label)/var(--kelex-leading-default) var(--dc-font-text);
--dc-type-mono:var(--kelex-weight-regular) var(--kelex-text-label)/var(--kelex-leading-default) var(--dc-font-mono);
--dc-type-label:var(--kelex-weight-regular) var(--kelex-text-label)/var(--kelex-leading-tight) var(--dc-font-mono);
--dc-type-label-strong:var(--kelex-weight-bold) var(--kelex-text-label)/var(--kelex-leading-tight) var(--dc-font-mono);
/* Command kit roles (StatusChip, MissionRow, DecisionCard and the rest of the kit): reading text never drops below Kelex body 16 */
--dc-type-title:var(--kelex-weight-bold) var(--kelex-text-header-1)/var(--kelex-leading-default) var(--dc-font-text);
--dc-type-heading:var(--kelex-weight-bold) var(--kelex-text-header-2)/var(--kelex-leading-default) var(--dc-font-text);
--dc-type-text:var(--kelex-weight-regular) var(--kelex-text-body)/var(--kelex-leading-default) var(--dc-font-text);
--dc-type-text-strong:var(--kelex-weight-bold) var(--kelex-text-body)/var(--kelex-leading-default) var(--dc-font-text);
--dc-type-numeric:var(--kelex-weight-regular) var(--kelex-text-subtitle-2)/var(--kelex-leading-tight) var(--dc-font-mono);
--dc-type-label-lg:var(--kelex-weight-regular) var(--kelex-text-body)/var(--kelex-leading-default) var(--dc-font-mono);
--dc-type-label-lg-strong:var(--kelex-weight-bold) var(--kelex-text-body)/var(--kelex-leading-default) var(--dc-font-mono);
}
/* text that inherits its face (no role of its own) follows the switch too */
[data-font]{font-family:var(--dc-font-text)}
:root{
/* Radius roles, all Kelex steps: chips and controls 8, nav items, tiles and cards 12, outer panels 16 */
--dc-radius-chip:var(--dc-radius-sm);--dc-radius-control:var(--dc-radius-md);--dc-radius-nav:var(--dc-radius-lg);--dc-radius-card:var(--dc-radius-xl);--dc-radius-panel:var(--dc-radius-2xl);
/* Mission 0 tutorial: the parts of the spotlight that are not colours */
--tutorial-spotlight-width:2px;--tutorial-spotlight-radius:var(--dc-radius-nav);--tutorial-pulse-duration:1200ms;
/* Motion: the Fibonacci scale in milliseconds, one rung per kind of change (README, Motion). fast = hover, focus and
   small control feedback; base = inline expansion, inspector and selection; move = an object changing location, a route
   drawing; event = a one-time verified handoff or completion, the longest any single motion may run; live = the period of
   the soft breath an Office keeps while it is actively working, the one continuous motion the system allows */
--dc-duration-instant:89ms;
--dc-duration-fast:144ms;
--dc-duration-base:233ms;
--dc-duration-move:377ms;
--dc-duration-slow:377ms;
--dc-duration-event:610ms;
--dc-duration-live:2584ms;
--dc-ease-standard:cubic-bezier(.2,0,.2,1);
--dc-ease-out:cubic-bezier(0,0,.2,1);
--dc-ease-in-out:cubic-bezier(.4,0,.2,1);
--dc-transition-control:background var(--dc-duration-fast) var(--dc-ease-standard),border-color var(--dc-duration-fast) var(--dc-ease-standard),box-shadow var(--dc-duration-fast) var(--dc-ease-standard),color var(--dc-duration-fast) var(--dc-ease-standard);
}
/* Theme-dependent composites. Declared on every themed element, so a light island inside a dark page (or the reverse) resolves its own values. */
:root,[data-theme]{
/* Depth reads through the glass rim and top highlight first, then the soft drop */
--dc-border-hairline:1px solid var(--border-subtle);
--dc-border-card:1px solid var(--border-card);
--dc-border-focus:1px solid var(--dc-focus-color);
--dc-focus-color:var(--dc-blue-400);
/* Status dots glow on navy; on paper the glow reads as a smudge, so the light theme sets it to 0 */
--dc-status-glow:8px;
/* Glass: every panel and card is a white film over the deep ground, lit from the top. The wash is the light on the pane; the fill (surface-*), rim (border-card) and highlight (dc-shadow-*) are tokens */
--dc-wash-card:linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.03) 100%);
--dc-wash-panel:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 100%);
--dc-glass-blur:blur(20px);
/* The ground: one solid deep ocean. A blue glow at the top, a faint lift at the foot, nothing else behind the surfaces: no imagery, no contours, no texture */
--dc-wash-page:radial-gradient(1400px 800px at 50% -20%,rgba(12,58,110,.55) 0%,rgba(0,6,18,0) 65%),radial-gradient(1000px 600px at 50% 115%,rgba(4,28,58,.7) 0%,rgba(0,6,18,0) 60%);
/* The featured Deep Ocean block (Panel tone="feature"): a Current Green glow from the top right, a Running-blue glow from the bottom left */
--dc-wash-feature:radial-gradient(640px 320px at 90% 0%,rgba(31,199,174,.24) 0%,rgba(31,199,174,0) 60%),radial-gradient(560px 360px at 0% 100%,rgba(12,156,251,.22) 0%,rgba(12,156,251,0) 65%);
/* The operational stage (SceneStage): the deep-ocean ground with a soft Current Green floor glow and the page's blue top light, then a vignette top and bottom so the floating glass panels read over it */
--dc-wash-stage:radial-gradient(ellipse 52% 44% at 42% 58%,rgba(31,199,174,.10) 0%,rgba(0,6,18,0) 72%),radial-gradient(ellipse 90% 50% at 50% 0%,rgba(12,156,251,.12) 0%,rgba(0,6,18,0) 60%);
--dc-wash-stage-vignette:linear-gradient(180deg,rgba(0,6,18,.55) 0%,rgba(0,6,18,0) 38%,rgba(0,6,18,0) 80%,rgba(0,6,18,.45) 100%);
--dc-shadow-stage:inset 0 0 120px rgba(0,2,10,.9);
/* Secondary action is a transparent ground (a named colour tokens.json does not hold) */
--action-secondary-bg:transparent;
font-variant-numeric:tabular-nums;
}
/* Light: a white page, flat cool-grey blocks with no outline or shadow, pale hairlines, near-black ink, and one Deep Ocean feature block per screen.
   No washes on light grounds. The focus ring is blue-700 (6:1 or more on every light surface). Focus is blue in both themes (v81): it is never Current Green, which now also marks Running. */
[data-theme="light"]{color-scheme:light;--dc-focus-color:var(--dc-blue-700);--dc-status-glow:0px;--dc-wash-card:none;--dc-wash-panel:none;--dc-wash-page:none;--dc-glass-blur:none;--dc-pyr-glyph-plate:#ffffff;--dc-pyr-glyph-glow:.45}
/* Glass blur on every Panel and card: the bundle draws them with the wash in their inline style, so the wash is the hook. A class on Panel would be cleaner; until the bundle carries one, this selector is the contract */
[style*="--dc-wash-card"],[style*="--dc-wash-panel"]{backdrop-filter:var(--dc-glass-blur);-webkit-backdrop-filter:var(--dc-glass-blur)}
[data-theme="dark"]{color-scheme:dark}
/* Artwork drawn for the dark console (orb heroes, the particle field) is dark itself: the light theme leaves it out */
[data-theme="light"] .dc-decor-dark{display:none}
/* Operational stage parts: the work-event language (README, Motion). The stage is always dark (SceneStage sets
   data-theme="dark"), so these do not change per theme. A glass panel floated over the stage blurs what moves beneath it.
   An OfficePyramid that is working breathes softly (one breath per --dc-duration-live), glows in its office tone through a
   drop-shadow on each face (the pyramid sets --dc-pyr-glow from its tone) and gives off sparks (twelve points of light that
   rise off the faces and fade): the one continuous motion the system allows, for a verified running step. A done office
   keeps its fill, glow and apex light and stays still. The amber hold and the red interruption are steady rims on the
   footprint; the green confirmation is a rim that expands off the footprint once over --dc-duration-event and never
   repeats. Pointing at any office lights it the same way while the pointer rests on it, without changing its state.
   Reduced motion, through the global rule below, keeps every fill, glow and rim and drops the breath, the sparks and the
   confirmation's travel: nothing on the stage depends on motion to be read */
.dc-scene-glass{backdrop-filter:var(--dc-glass-blur);-webkit-backdrop-filter:var(--dc-glass-blur);border-radius:var(--dc-radius-panel)}
/* OfficeRing is a size container: its tile-only markers (labels="tile") hide under an 800px stage, where the 112 ring (716px wide) leaves no room for them; every office is still named by its aria-label and by the list beside the stage */
.dc-office-ring{container-type:inline-size}
@container (max-width:799px){.dc-ring-tag--tile{display:none}}
.dc-scene-live{animation:dc-pulse var(--dc-duration-live) var(--dc-ease-in-out) infinite}
.dc-pyr{--dc-pyr-glow:transparent;--dc-pyr-glow-lo:transparent;--dc-pyr-glow-hi:transparent;--dc-pyr-face-hover:transparent;--dc-pyr-stroke-hover:currentColor;--dc-spark-z0:0px;--dc-spark-z1:0px;--dc-spark-dx:0px;--dc-spark-dy:0px}
.dc-pyr-face{transition:filter var(--dc-duration-fast) var(--dc-ease-in-out)}
.dc-pyr-lit .dc-pyr-face,.dc-pyr:hover .dc-pyr-face{filter:drop-shadow(0 0 10px var(--dc-pyr-glow))}
.dc-pyr:hover .dc-pyr-face{filter:drop-shadow(0 0 16px var(--dc-pyr-glow-hi))}
.dc-pyr:hover .dc-pyr-face polygon{fill:var(--dc-pyr-face-hover);stroke:var(--dc-pyr-stroke-hover)}
.dc-pyr-pulse .dc-pyr-face{animation:dc-breathe var(--dc-duration-live) var(--dc-ease-in-out) infinite}
@keyframes dc-breathe{0%,100%{filter:drop-shadow(0 0 8px var(--dc-pyr-glow-lo))}50%{filter:drop-shadow(0 0 22px var(--dc-pyr-glow-hi))}}
.dc-pyr-apex,.dc-pyr-spark{display:none;pointer-events:none}
.dc-pyr-lit .dc-pyr-apex,.dc-pyr:hover .dc-pyr-apex,.dc-pyr-pulse .dc-pyr-spark,.dc-pyr:hover .dc-pyr-spark{display:block}
.dc-pyr-spark{border-radius:50%;background:radial-gradient(circle,var(--text-heading) 0 22%,var(--dc-pyr-glow-hi) 40%,transparent 72%);box-shadow:0 0 8px var(--dc-pyr-glow-hi),0 0 16px var(--dc-pyr-glow);opacity:0;transform:translate3d(0,0,var(--dc-spark-z0)) rotateZ(45deg) rotateX(calc(-1 * var(--kepler-angle))) scale(.5);animation:dc-spark var(--dc-duration-live) var(--dc-ease-in-out) infinite}
/* a spark faces the camera (the inverse of the stage's rotateX(kepler) rotateZ(-45)) and rises in +z, up off the plane */
@keyframes dc-spark{0%{transform:translate3d(0,0,var(--dc-spark-z0)) rotateZ(45deg) rotateX(calc(-1 * var(--kepler-angle))) scale(.5);opacity:0}18%{opacity:1;transform:translate3d(calc(var(--dc-spark-dx) * .2),calc(var(--dc-spark-dy) * .2),calc(var(--dc-spark-z0) + (var(--dc-spark-z1) - var(--dc-spark-z0)) * .2)) rotateZ(45deg) rotateX(calc(-1 * var(--kepler-angle))) scale(1)}100%{transform:translate3d(var(--dc-spark-dx),var(--dc-spark-dy),var(--dc-spark-z1)) rotateZ(45deg) rotateX(calc(-1 * var(--kepler-angle))) scale(.3);opacity:0}}
/* the rims: a hold or interruption is steady; the confirmation expands off the footprint once and fades. An interactive
   office (OfficePyramid with onSelect) is a button whose whole platform is the target: the focus rim replaces the box
   outline on the tilted plane, the selection rim is steady Current Green, and in an Office-focus view the others dim */
.dc-pyr-rim{pointer-events:none}
button.dc-pyr{appearance:none;-webkit-appearance:none;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;outline:none}
.dc-pyr-focus{display:none}
button.dc-pyr:focus-visible .dc-pyr-focus{display:block}
.dc-pyr-dim{opacity:.4;transition:opacity var(--dc-duration-base) var(--dc-ease-in-out)}
.dc-pyr-dim:hover,.dc-pyr-dim:focus-visible{opacity:1}
.dc-pyr-confirm{animation:dc-confirm var(--dc-duration-event) var(--dc-ease-out) 1 forwards}
@keyframes dc-confirm{0%{transform:scale(1);opacity:1}100%{transform:scale(1.6);opacity:0}}
/* handoffs on the ring: a dashed path is the expected next route, a solid path a completed handoff, and the packet is the
   one verified handoff that just happened, travelling from one office to the next once over --dc-duration-event */
.dc-handoff-packet{--dc-packet-dx:0px;--dc-packet-dy:0px;animation:dc-packet var(--dc-duration-event) var(--dc-ease-in-out) 1 forwards}
@keyframes dc-packet{0%{transform:translate(0,0)}100%{transform:translate(var(--dc-packet-dx),var(--dc-packet-dy))}}
/* Corner marks: four 12px ticks that frame a section, as on a print proof. Decorative; works in both themes */
.dc-frame{position:relative}
.dc-frame::before{content:"";position:absolute;inset:0;pointer-events:none;--c:var(--border-strong);--s:12px;background:linear-gradient(var(--c),var(--c)) left top/var(--s) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--s) no-repeat,linear-gradient(var(--c),var(--c)) right top/var(--s) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--s) no-repeat,linear-gradient(var(--c),var(--c)) left bottom/var(--s) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--s) no-repeat,linear-gradient(var(--c),var(--c)) right bottom/var(--s) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--s) no-repeat}
/* Section eyebrow — the most recognisable DeepCurrent text style. Kelex size 12.8, bold, uppercase, no tracking */
.dc-eyebrow{font:var(--kelex-weight-bold) var(--kelex-text-label)/var(--kelex-leading-default) var(--dc-font-mono);text-transform:uppercase;color:var(--text-accent)}
html{color-scheme:dark}
/* Keyboard focus: one visible ring on every control */
:focus-visible{outline:2px solid var(--dc-focus-color);outline-offset:2px}
/* SelectField draws its own field over an invisible native select: the field shows the ring while the select has keyboard focus */
.dc-select:has(select:focus-visible){outline:2px solid var(--dc-focus-color);outline-offset:2px}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
/* Live indicators pulse; nothing bounces, nothing slides in from off-canvas */
@keyframes dc-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes dc-glow-breathe{0%,100%{box-shadow:0 0 12px rgba(31,199,174,.18)}50%{box-shadow:0 0 22px rgba(31,199,174,.4)}}
/* VoiceCommandBar (the one Command composer): the waveform's bars rise and fall on Fibonacci delays only while the mic is
   open, each bar's resting height its tallest, so reduced motion (which ends every animation at its last keyframe) leaves
   the bars drawn at rest beside the lit mic and the word Listening. Under a 600px container the bar stacks: the mic (48px for
   a thumb) with Stop or Send beside it, then the status line, then the transcript on its own full-width row, then the
   routing chip and the hint. */
@keyframes dc-wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
.dc-vcb-wave span{transform-origin:center}
.dc-vcb-wave-live span{animation:dc-wave var(--dc-duration-live) var(--dc-ease-in-out) infinite}
.dc-vcb-mic:focus-visible,.dc-vcb-ctl:focus-visible{outline:2px solid var(--dc-focus-color);outline-offset:2px}
.dc-vcb-ctl:hover{border-color:var(--border-strong) !important}
.dc-vcb-field:focus-within{box-shadow:inset 0 -1px 0 var(--accent)}
@container dc-vcb (max-width:599px){
  .dc-vcb-mic{width:48px !important;height:48px !important}
  .dc-vcb-controls{order:1;margin-left:auto}
  .dc-vcb-status{order:2;flex:1 1 100% !important}
  .dc-vcb-field{order:3;flex:1 1 100% !important}
  .dc-vcb-context{order:4;flex:1 1 100% !important;justify-content:flex-start}
  .dc-vcb-hint{order:5}
}
/* Tabs: the strip scrolls inside itself on a narrow screen, never the page; no scrollbar is drawn */
.dc-tabs::-webkit-scrollbar{display:none}
@keyframes dc-progress-sheen{0%{transform:translateX(-100%)}100%{transform:translateX(240%)}}
/* the one loading treatment: a neutral sheen crossing a ProgressBar track, never on the stage */
.dc-progress-sheen{animation:dc-progress-sheen var(--dc-duration-live) linear infinite}
@keyframes dc-spin{to{transform:rotate(360deg)}}
/* Reduce motion: every pulse, glow, sheen and spinner stops and transitions become instant. State still shows: a pulsing dot stays lit, a spinner stays drawn */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;scroll-behavior:auto !important}
}
/* DecisionCard options: one column of rows; buttons share one width per card, the consequence sits beside its button.
   Below a 640px card width the consequence drops beneath its button. The card sets container-type. */
.dc-decision-options{display:grid;grid-template-columns:minmax(160px,max-content) minmax(0,1fr);gap:var(--kelex-space-12) var(--kelex-space-16);align-items:center}
@container (max-width:639px){
  .dc-decision-options{grid-template-columns:minmax(0,1fr);row-gap:var(--kelex-space-8)}
  .dc-decision-options .dc-option-consequence{margin-bottom:var(--kelex-space-8)}
}
/* MissionRow: from a 640px row the status cluster sits at the row's end; in a narrower row it drops under the title.
   Every row in a list is the same width, so a list never mixes layouts */
@container dc-row (max-width:639px){
  .dc-mission-line{grid-template-columns:minmax(0,1fr) !important}
  .dc-mission-line[data-sym]{grid-template-columns:auto minmax(0,1fr) !important}
  .dc-mission-line > .dc-mission-cluster{grid-column:1 / -1;justify-self:start !important}
}
/* Mission 0: the one permitted loop is a single pulse on the spotlight ring after 10 s idle; reduced motion keeps the static outline */
@keyframes dcTutorialPulse{from{box-shadow:0 0 0 0 var(--tutorial-spotlight)}to{box-shadow:0 0 0 16px transparent}}
@media (prefers-reduced-motion: reduce){.dc-tutorial-ring{animation:none !important}}
/* ListRow on a phone: the title takes the first line beside its icon and wraps instead of truncating; status, meta and chevron drop to a second line */
@media (max-width:767px){
  .dc-list-row{flex-wrap:wrap}
  .dc-list-row > .dc-list-row-text{flex:1 1 calc(100% - 52px) !important}
  .dc-list-row-title{white-space:normal !important;overflow-wrap:anywhere}
  /* DataTable on a phone: rows stack; every cell after the first is labelled by its column */
  .dc-table thead{display:none}
  .dc-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kelex-space-8) var(--kelex-space-16);padding:var(--kelex-space-12) var(--kelex-space-0);border-bottom:1px solid var(--border-subtle)}
  .dc-table td{display:block;padding:var(--kelex-space-0) !important;border:0 !important;text-align:left !important}
  .dc-table td:first-child{flex:1 1 100%}
  .dc-table td:not(:first-child)::before{content:attr(data-label) "\00a0\00a0";color:var(--text-subtle)}
}
/* Breadcrumb (the lineage) on a phone: under 480px the trail collapses to the current object and its one parent, with an
   ellipsis button that opens the full trail in place (the button carries the hidden levels in its label) */
@container dc-crumb (max-width:479px){
  .dc-crumb:not([data-open="true"]) .dc-crumb-more{display:inline-flex !important}
  .dc-crumb:not([data-open="true"]) [data-hide="true"]{display:none !important}
}
/* TopBar in a narrow container: below a phone's width the name and role beside the avatar go */
@container dc-topbar (max-width:359px){.dc-topbar-who{display:none !important}}
/* FooterBar in a narrow container: the product lockup gives way; the governance note and system health wrap onto two lines */
@container dc-footer (max-width:899px){.dc-footer-lockup{display:none !important}}
/* StepTrail (status tone) in a narrow container: a vertical list, every step visible, connectors run down the circles' centre */
@container (max-width:519px){
  .dc-trail-row{flex-direction:column;align-items:stretch;overflow:visible !important}
  .dc-trail-step{flex-direction:row !important;align-items:center !important;text-align:left !important;min-width:0 !important;gap:var(--kelex-space-12) !important;flex:none !important}
  .dc-trail-link{flex:none !important;width:2px !important;height:16px !important;margin:var(--kelex-space-0) !important;position:relative;left:15px}
}

/* Navy Glass (DEE-26, approved by Andrew 2026-10-22; README, Navy Glass). The material for floating shells,
   recessed wells and the interactive layer, composed only from palette tokens that already exist: the navy steps, Deep
   Ocean and the blue alphas. No new hue. The dark default (below); data-material="navy-glass" also gives it to a subtree in any theme, and the
   Inspector and Menu draw it by default. Three depths: the shell (midnight-navy glass, a Deep Ocean light from the top, a fine blue edge,
   a blue upper-edge highlight, a deep soft drop); the recess (blue-black, an inner shadow, no drop, no blur); the
   interactive layer (rows and controls one navy step brighter on hover, two when pressed). Selected is a navy lift with a
   border-strong edge (the accent outline of selected rows, chips and tiles takes it too), never a green that could read as
   Running or Done; focus is the 2px blue ring; status stays the quartet.
   Only a shell blurs. Light theme: every role resolves to the flat light blocks, unchanged. */
:root,[data-theme]{
--ng-shell-fill:color-mix(in srgb,var(--dc-navy-850) 86%,transparent);
--ng-shell-wash:linear-gradient(180deg,color-mix(in srgb,var(--dc-ocean) 52%,transparent) 0%,color-mix(in srgb,var(--dc-ocean) 0%,transparent) 62%);
--ng-shell-edge:var(--dc-a-blue-16);
--ng-shell-shadow:inset 0 1px 0 var(--dc-a-blue-28),0 24px 60px rgba(0,3,10,.72);
--ng-recess-fill:color-mix(in srgb,var(--dc-navy-950) 66%,transparent);
--ng-recess-edge:var(--dc-a-blue-08);
--ng-recess-shadow:inset 0 1px 2px rgba(0,2,10,.55);
--ng-raised-fill:color-mix(in srgb,var(--dc-navy-700) 56%,transparent);
--ng-hover-fill:color-mix(in srgb,var(--dc-navy-650) 88%,transparent);
--ng-pressed-fill:color-mix(in srgb,var(--dc-navy-600) 94%,transparent);
/* selected is opaque (navy-500 at 64% on the shell's navy-850), so whatever sits behind the shell never changes the text on it */
--ng-selected-fill:color-mix(in srgb,var(--dc-navy-500) 64%,var(--dc-navy-850));
--ng-selected-edge:var(--dc-selection-rim);
--ng-hairline:var(--dc-a-blue-08);
--ng-blur:var(--dc-glass-blur);
/* Without backdrop-filter, or when forced solid (low power, reduced transparency), the shell and the recess turn opaque */
--ng-shell-fill-solid:var(--dc-navy-850);
--ng-recess-fill-solid:var(--dc-navy-950);
/* Selection (DEE-29, Andrew 2026-10-22): the one semantic selection treatment. A restrained steel-cyan rim, composed from palette
   tokens (blue-300 and current-300 mixed 35 : 65, then 58% of that on navy-300 steel, about #6facb9), and a leading bar of the same
   colour on rows and items. A selection affordance only: never a brand or hero colour, never a call to action, never focus (the
   2px blue ring), never Running (the Current Green ring and word). Selected differs from focus and from status by shape (a rim and
   a leading bar, or a ring outside a spatial object) and by its words (aria-current, aria-checked, aria-pressed, a check, "this step"). */
--dc-selection-rim:color-mix(in srgb,color-mix(in srgb,var(--dc-blue-300) 35%,var(--dc-current-300)) 58%,var(--dc-navy-300));
--dc-selection-bar:3px;
/* Chrome (the rail and the top bar): a faint navy lift over the ground, the navy counterpart of the old 4% white film */
--ng-chrome-fill:color-mix(in srgb,var(--dc-navy-750) 70%,transparent);
/* The live composer's edge while the microphone is open: Current Green, because it is the primary action in progress (never the selection rim) */
--dc-live-border:var(--dc-a-current-40);
}
[data-theme="light"]{
--ng-shell-fill:var(--dc-surface-light);--ng-shell-wash:none;--ng-shell-edge:var(--dc-border-subtle-light);--ng-shell-shadow:var(--dc-shadow-popover);
--ng-recess-fill:var(--dc-panel-light);--ng-recess-edge:transparent;--ng-recess-shadow:none;
--ng-raised-fill:var(--dc-surface-light);--ng-hover-fill:var(--dc-inset-light);--ng-pressed-fill:var(--dc-inset-light);
--ng-selected-fill:var(--dc-blue-100);--ng-selected-edge:var(--dc-selection-rim);--dc-selection-rim:var(--dc-border-functional-light);--dc-selection-bar:0px;--ng-hairline:var(--dc-border-subtle-light);
--ng-shell-fill-solid:var(--dc-surface-light);--ng-recess-fill-solid:var(--dc-panel-light);
--ng-chrome-fill:var(--dc-surface-light);--dc-live-border:var(--dc-current-700);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,[data-theme]{--ng-shell-fill:var(--ng-shell-fill-solid);--ng-recess-fill:var(--ng-recess-fill-solid)}
}
@media (prefers-reduced-transparency: reduce){
  :root,[data-theme]{--ng-shell-fill:var(--ng-shell-fill-solid);--ng-recess-fill:var(--ng-recess-fill-solid);--ng-blur:none;--dc-glass-blur:none}
}
[data-material-fallback="solid"],[data-material-fallback="solid"] [data-theme]{--ng-shell-fill:var(--ng-shell-fill-solid);--ng-recess-fill:var(--ng-recess-fill-solid);--ng-blur:none;--dc-glass-blur:none}
/* The scope: inside it the semantic surface tokens take the material, so existing components pick it up unchanged */
[data-material="navy-glass"]{
--surface-raised:var(--ng-raised-fill);--surface-hover:var(--ng-hover-fill);--surface-selected:var(--ng-selected-fill);
--surface-inset:var(--ng-recess-fill);--border-subtle:var(--ng-hairline);--border-card:var(--ng-shell-edge);--border-accent:var(--ng-selected-edge);
--dc-shadow-popover:var(--ng-shell-shadow);
}
/* Panel: a top-level Panel in the scope is a shell; a Panel inside a shell or another Panel is a recessed well and does not blur */
[data-material="navy-glass"] [data-dc-panel="default"]{--dc-panel-fill:var(--ng-shell-fill);--dc-panel-wash:var(--ng-shell-wash);--dc-panel-edge:var(--ng-shell-edge);--dc-panel-shadow:var(--ng-shell-shadow)}
[data-material="navy-glass"] :is([data-dc-panel],[data-dc-shell]) [data-dc-panel="default"]{--dc-panel-fill:var(--ng-recess-fill);--dc-panel-wash:none;--dc-panel-edge:var(--ng-recess-edge);--dc-panel-shadow:var(--ng-recess-shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Navy Glass is the dark default (DEE-31; Andrew approved the material and the pilot on 2026-10-22, DEE-26, DEE-29, DEE-30).
   Every dark subtree takes the material: the white-film glass of the semantic surfaces (rail, top bar, panel, card, raised,
   hover, inset, the white hairlines and rims, the white top highlight) resolves to the navy roles above, and selected
   resolves to the opaque navy lift with the steel-cyan selection rim. A top-level Panel is a shell (and the only thing that
   blurs); a Panel inside a Panel or a shell is a recessed well. The light theme keeps its own flat blocks (its tokens are
   declared on its own subtree and win). data-material="none" on an element puts the previous white-film values back for
   that subtree: kept only so a before/after can be drawn, never as a screen treatment. */
:root:not([data-theme="light"]):not([data-material="none"]),[data-theme="dark"]:not([data-material="none"]){
--surface-rail:var(--ng-chrome-fill);--surface-topbar:var(--ng-chrome-fill);
--surface-panel:var(--ng-shell-fill);--surface-card:var(--ng-raised-fill);
--surface-raised:var(--ng-raised-fill);--surface-hover:var(--ng-hover-fill);--surface-selected:var(--ng-selected-fill);--surface-inset:var(--ng-recess-fill);
--border-subtle:var(--ng-hairline);--border-card:var(--ng-shell-edge);--border-accent:var(--ng-selected-edge);
--dc-shadow-popover:var(--ng-shell-shadow);--dc-shadow-card:inset 0 1px 0 var(--dc-a-blue-28),0 24px 64px rgba(0,2,10,.6);
--dc-wash-card:var(--ng-shell-wash);--dc-wash-panel:var(--ng-shell-wash);
/* the current page in the rail is a selection too: the steel-cyan rim, not a status colour */
--dc-nav-current-edge:var(--dc-selection-rim);
}
[data-dc-panel="default"]:not([data-theme="light"] *):not([data-material="none"] *){--dc-panel-fill:var(--ng-shell-fill);--dc-panel-wash:var(--ng-shell-wash);--dc-panel-edge:var(--ng-shell-edge);--dc-panel-shadow:var(--ng-shell-shadow)}
:is([data-dc-panel],[data-dc-shell]) [data-dc-panel="default"]:not([data-theme="light"] *):not([data-material="none"] *){--dc-panel-fill:var(--ng-recess-fill);--dc-panel-wash:none;--dc-panel-edge:var(--ng-recess-edge);--dc-panel-shadow:var(--ng-recess-shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
/* The previous white-film values, for a before/after only (dark subtrees) */
[data-material="none"]:not([data-theme="light"]):not([data-theme="light"] *){
--surface-rail:var(--dc-a-white-04);--surface-topbar:var(--dc-a-white-04);--surface-panel:var(--dc-a-white-06);--surface-card:var(--dc-a-white-05);
--surface-raised:var(--dc-a-white-06);--surface-hover:var(--dc-a-white-10);--surface-selected:rgba(12,156,251,.12);--surface-inset:rgba(0,6,18,.45);
--border-subtle:var(--dc-a-white-08);--border-card:var(--dc-a-white-14);--border-accent:var(--dc-a-current-40);
--dc-shadow-popover:0 1px 0 rgba(255,255,255,.16) inset,0 24px 60px rgba(0,3,10,.72);--dc-shadow-card:0 1px 0 rgba(255,255,255,.16) inset,0 24px 64px rgba(0,2,10,.6);
--dc-wash-card:linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.03) 100%);--dc-wash-panel:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 100%);
--dc-selection-bar:0px;--dc-nav-current-edge:var(--status-active-border);
}
/* A glass group over the operational stage that holds a shell Panel does not blur again: the shell blurs once (no glass over glass) */
.dc-scene-glass:has([data-dc-panel="default"]):not([data-theme="light"] *):not([data-material="none"] *){backdrop-filter:none;-webkit-backdrop-filter:none}
/* A selected row carries the leading selection bar wherever the bar is drawn (0 in the light theme and in the previous glass) */
.dc-list-row[aria-current="true"]{box-shadow:inset var(--dc-selection-bar) 0 0 var(--dc-selection-rim)}
/* Inspector: one stable shell; the level inside it changes (16px slide in the direction of travel over --dc-duration-base) */
.dc-inspector{--dc-inspector-fade:var(--ng-shell-fill-solid);position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;box-sizing:border-box;border-radius:var(--dc-radius-panel);background:var(--ng-shell-fill);background-image:var(--ng-shell-wash);border:1px solid var(--ng-shell-edge);box-shadow:var(--ng-shell-shadow);backdrop-filter:var(--ng-blur);-webkit-backdrop-filter:var(--ng-blur);color:var(--text-body);overflow:hidden;animation:dc-ng-shell-in var(--dc-duration-base) var(--dc-ease-out)}
.dc-inspector[data-material="none"]{--dc-inspector-fade:var(--surface-raised);background:var(--surface-raised);background-image:none;border:0;border-left:1px solid var(--border-card);border-radius:var(--dc-radius-xs);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.dc-inspector-head{display:flex;flex-direction:column;gap:var(--kelex-space-8);padding:var(--kelex-space-16) var(--kelex-space-16) var(--kelex-space-12);border-bottom:1px solid var(--ng-hairline)}
.dc-inspector[data-material="none"] .dc-inspector-head{border-bottom-color:var(--border-subtle)}
.dc-inspector-bar{display:flex;align-items:flex-start;gap:var(--kelex-space-8);min-width:0}
/* the lead mark and the title wrap together as one heading: the title drops beneath the mark before it ever breaks inside a word */
.dc-inspector-heading{flex:1 1 auto;min-width:0;min-height:28px;display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:var(--kelex-space-4) var(--kelex-space-8)}
.dc-inspector-title{flex:1 1 auto;min-width:0;font:var(--dc-type-card-title);color:var(--text-heading);overflow-wrap:break-word;border-radius:var(--dc-radius-xs)}
.dc-inspector-title:focus{outline:none}
.dc-inspector-title:focus-visible{outline:2px solid var(--dc-focus-color);outline-offset:2px}
.dc-inspector-trail{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kelex-space-4);min-width:0;font:var(--dc-type-label);color:var(--text-subtle)}
.dc-inspector-crumb{min-height:28px;padding:var(--kelex-space-0) var(--kelex-space-4);border:0;border-radius:var(--dc-radius-xs);background:transparent;color:var(--text-link);font:inherit;cursor:pointer;transition:var(--dc-transition-control)}
.dc-inspector-crumb:hover{color:var(--text-link-hover);background:var(--ng-hover-fill)}
.dc-inspector-crumb-current{color:var(--text-heading);overflow-wrap:break-word;min-width:0}
/* the body scrolls inside the stable shell; while there is more below, a fade at its foot says so */
.dc-inspector-scroll{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.dc-inspector-scroll::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--kelex-space-32);background:linear-gradient(180deg,transparent,var(--dc-inspector-fade));opacity:0;pointer-events:none;transition:opacity var(--dc-duration-fast) var(--dc-ease-out)}
.dc-inspector[data-more="true"] .dc-inspector-scroll::after{opacity:1}
.dc-inspector-body{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--kelex-space-16);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.dc-inspector-level{display:flex;flex-direction:column;gap:var(--kelex-space-12);min-width:0}
.dc-inspector-level[data-dir="forward"]{animation:dc-ng-level-forward var(--dc-duration-base) var(--dc-ease-out)}
.dc-inspector-level[data-dir="back"]{animation:dc-ng-level-back var(--dc-duration-base) var(--dc-ease-out)}
.dc-inspector-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--kelex-space-8);padding:var(--kelex-space-12) var(--kelex-space-16);border-top:1px solid var(--ng-hairline)}
@keyframes dc-ng-shell-in{from{opacity:0;transform:translateX(var(--kelex-space-16))}to{opacity:1;transform:none}}
@keyframes dc-ng-level-forward{from{opacity:0;transform:translateX(var(--kelex-space-16))}to{opacity:1;transform:none}}
@keyframes dc-ng-level-back{from{opacity:0;transform:translateX(calc(-1 * var(--kelex-space-16)))}to{opacity:1;transform:none}}
/* Menu: a contextual list in a Navy Glass shell; items take the interactive layer (hover, pressed, checked, focus, unavailable) */
.dc-menu{display:flex;flex-direction:column;min-width:0;box-sizing:border-box;padding:var(--kelex-space-4);border-radius:var(--dc-radius-card);background:var(--ng-shell-fill);background-image:var(--ng-shell-wash);border:1px solid var(--ng-shell-edge);box-shadow:var(--ng-shell-shadow);backdrop-filter:var(--ng-blur);-webkit-backdrop-filter:var(--ng-blur);animation:dc-ng-menu-in var(--dc-duration-fast) var(--dc-ease-out)}
.dc-menu[data-material="none"]{background:var(--surface-raised);background-image:none;border-color:var(--border-strong);box-shadow:var(--dc-shadow-popover);backdrop-filter:none;-webkit-backdrop-filter:none}
.dc-menu-item{display:flex;align-items:center;gap:var(--kelex-space-8);width:100%;min-height:36px;box-sizing:border-box;padding:var(--kelex-space-8);border:1px solid transparent;border-radius:var(--dc-radius-control);background:transparent;color:var(--text-heading);font:var(--dc-type-label);text-align:left;cursor:pointer;transition:var(--dc-transition-control)}
.dc-menu-item:hover{background:var(--ng-hover-fill)}
.dc-menu-item:active{background:var(--ng-pressed-fill);transform:translateY(1px)}
.dc-menu-item:focus-visible{outline:2px solid var(--dc-focus-color);outline-offset:-2px;background:var(--ng-hover-fill)}
.dc-menu-item[aria-checked="true"]{background:var(--ng-selected-fill);border-color:var(--ng-selected-edge);box-shadow:inset var(--dc-selection-bar) 0 0 var(--dc-selection-rim)}
.dc-menu-item[aria-disabled="true"]{color:var(--text-subtle);cursor:not-allowed;background:transparent;transform:none}
.dc-menu-item[aria-disabled="true"] > svg{opacity:.5}
.dc-menu-item[data-tone="blocked"]{color:var(--status-blocked-text)}
.dc-menu-text{display:flex;flex-direction:column;gap:var(--kelex-space-4);flex:1 1 auto;min-width:0}
.dc-menu-hint{font:var(--dc-type-label);color:var(--text-subtle)}
.dc-menu-sep{height:1px;margin:var(--kelex-space-4) var(--kelex-space-8);background:var(--ng-hairline);flex:none}
.dc-menu[data-material="none"] .dc-menu-item:hover,.dc-menu[data-material="none"] .dc-menu-item:focus-visible{background:var(--surface-hover)}
@keyframes dc-ng-menu-in{from{opacity:0;transform:translateY(calc(-1 * var(--kelex-space-4)))}to{opacity:1;transform:none}}
@media (pointer:coarse),(max-width:767px){.dc-menu-item{min-height:44px}.dc-inspector-crumb{min-height:44px}.dc-inspector-heading{min-height:44px}}
@media (prefers-reduced-motion: reduce){.dc-inspector,.dc-inspector-level,.dc-menu{animation:none !important}.dc-menu-item:active{transform:none}}
@media (prefers-reduced-motion: reduce){.dc-segswitch-knob,.dc-segswitch-knob *{transition:none !important}}
/* ProcedureDiagram (v81, Andrew 26 Oct): the procedure as a piping diagram. Faces are translucent films of the heading ink, so
   the same blocks read on navy and on paper. Kinds: trigger (neutral pad, bolt), input (Current Green vessel), processing,
   decision (pyramid cap), gate (amber, lock), output (Current Green slab, arrow), exception (dashed red). Construction lights
   are brief and never shown as a mission running. A host sets the drawing area with --dc-pd-top, --dc-pd-bottom, --dc-pd-x,
   the controls with --dc-pd-ctl-top and --dc-pd-ctl-right, and makes room for a side panel with --dc-pd-reserve. */
:root,[data-theme]{--dc-pd-shadow:rgba(0,6,18,.45);--dc-pd-light:#ffffff}
[data-theme="light"]{--dc-pd-shadow:rgba(11,37,69,.05);--dc-pd-light:var(--accent)}
.dc-pd{position:relative;width:100%;height:100%;cursor:grab;user-select:none}
.dc-pd:active{cursor:grabbing}
.dc-pd-svg{position:absolute;top:var(--dc-pd-top,0px);left:var(--dc-pd-x,0px);width:calc(100% - 2 * var(--dc-pd-x,0px) - var(--dc-pd-reserve,0px));height:calc(100% - var(--dc-pd-top,0px) - var(--dc-pd-bottom,0px));overflow:visible;transition:width var(--dc-duration-base) var(--dc-ease-standard)}
.dc-pd-ctl{position:absolute;right:var(--dc-pd-ctl-right,0px);top:var(--dc-pd-ctl-top,0px);display:flex;flex-direction:column;gap:var(--kelex-space-4);background:var(--surface-panel);border-radius:var(--dc-radius-nav);padding:var(--kelex-space-4);z-index:3}
.dc-pd-ctl button{width:32px;height:32px;border:0;border-radius:var(--dc-radius-control);background:none;display:inline-flex;align-items:center;justify-content:center;color:var(--text-body);cursor:pointer;padding:0}
.dc-pd-ctl button.word{font:var(--dc-type-label-strong)}
.dc-pd-ctl button:hover{background:var(--surface-hover);color:var(--text-heading)}
.dc-pd-block{cursor:pointer;outline:none}
.dc-pd-shadow{fill:var(--dc-pd-shadow)}
.dc-pd-face{stroke:color-mix(in srgb,var(--text-heading) 34%,transparent);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dc-pd-face.top{fill:color-mix(in srgb,var(--text-heading) 16%,transparent)}
.dc-pd-face.left{fill:color-mix(in srgb,var(--text-heading) 7%,transparent)}
.dc-pd-face.right{fill:color-mix(in srgb,var(--text-heading) 3%,transparent)}
.dc-pd-face.side{fill:color-mix(in srgb,var(--text-heading) 6%,transparent)}
.dc-pd-block.kind-trigger .dc-pd-face{stroke:color-mix(in srgb,var(--text-heading) 55%,transparent)}
.dc-pd-block.kind-trigger .dc-pd-face.top{fill:color-mix(in srgb,var(--text-heading) 20%,transparent)}
.dc-pd-block.kind-input .dc-pd-face{stroke:color-mix(in srgb,var(--accent) 60%,color-mix(in srgb,var(--text-heading) 34%,transparent))}
.dc-pd-block.kind-input .dc-pd-face.top{fill:color-mix(in srgb,var(--accent) 22%,transparent)}
.dc-pd-block.kind-processing .dc-pd-face.top{fill:color-mix(in srgb,var(--accent) 14%,color-mix(in srgb,var(--text-heading) 12%,transparent))}
.dc-pd-block.kind-decision .dc-pd-face{stroke:color-mix(in srgb,var(--text-heading) 55%,transparent)}
.dc-pd-block.kind-decision .dc-pd-face.cap.back{fill:color-mix(in srgb,var(--text-heading) 4%,transparent)}
.dc-pd-block.kind-decision .dc-pd-face.cap.left{fill:color-mix(in srgb,var(--text-heading) 20%,transparent)}
.dc-pd-block.kind-decision .dc-pd-face.cap.right{fill:color-mix(in srgb,var(--text-heading) 10%,transparent)}
.dc-pd-block.kind-gate .dc-pd-face{stroke:var(--status-review-solid)}
.dc-pd-block.kind-gate .dc-pd-face.top{fill:color-mix(in srgb,var(--status-review-solid) 28%,transparent)}
.dc-pd-block.kind-gate .dc-pd-face.left{fill:color-mix(in srgb,var(--status-review-solid) 14%,transparent)}
.dc-pd-block.kind-gate .dc-pd-face.right{fill:color-mix(in srgb,var(--status-review-solid) 8%,transparent)}
.dc-pd-block.kind-output .dc-pd-face{stroke:var(--accent)}
.dc-pd-block.kind-output .dc-pd-face.top{fill:color-mix(in srgb,var(--accent) 34%,transparent)}
.dc-pd-block.kind-exception .dc-pd-face{stroke:var(--status-blocked-solid);stroke-dasharray:4 3}
.dc-pd-block.kind-exception .dc-pd-face.top{fill:color-mix(in srgb,var(--status-blocked-solid) 16%,transparent)}
.dc-pd-block.kind-exception .dc-pd-face.left,.dc-pd-block.kind-exception .dc-pd-face.right{fill:color-mix(in srgb,var(--status-blocked-solid) 6%,transparent)}
.dc-pd-glyph{fill:none;stroke:var(--text-heading);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dc-pd-block.kind-trigger .dc-pd-glyph{fill:color-mix(in srgb,var(--text-heading) 24%,transparent)}
.dc-pd-block.kind-gate .dc-pd-glyph{stroke:var(--status-review-text)}
.dc-pd-block.kind-exception .dc-pd-glyph{stroke:var(--status-blocked-text)}
.dc-pd-name{font:var(--dc-type-label-strong);fill:var(--text-heading)}
.dc-pd-kind{font:var(--dc-type-label);fill:var(--text-subtle)}
.dc-pd-block.kind-gate .dc-pd-kind{fill:var(--status-review-text)}
.dc-pd-block.kind-exception .dc-pd-kind{fill:var(--status-blocked-text)}
.dc-pd-block:hover .dc-pd-face.top{fill:color-mix(in srgb,var(--text-heading) 28%,transparent)}
.dc-pd-block:focus-visible .dc-pd-face{stroke:var(--dc-focus-color);stroke-width:2}
.dc-pd-block.is-selected .dc-pd-face{stroke:var(--text-heading);stroke-width:1.5}
.dc-pd-block.is-selected .dc-pd-face.top{fill:color-mix(in srgb,var(--text-heading) 30%,transparent)}
.dc-pd-block.is-bad .dc-pd-face{stroke:var(--status-review-solid);stroke-dasharray:4 3}
.dc-pd-block.is-bad .dc-pd-kind{fill:var(--status-review-text)}
.dc-pd-pipe .base{fill:none;stroke:color-mix(in srgb,var(--text-heading) 42%,transparent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dc-pd-pipe.kind-branch .base{stroke:color-mix(in srgb,var(--status-blocked-solid) 70%,color-mix(in srgb,var(--text-heading) 40%,transparent))}
.dc-pd-pipe.kind-rejoin .base{stroke:color-mix(in srgb,var(--text-heading) 30%,transparent)}
.dc-pd-pipe .lit{fill:none;stroke:var(--dc-pd-light);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 6px var(--dc-pd-light))}
.dc-pd-pipe.kind-rejoin .lit{stroke-width:2}
.dc-pd-pipe .junction{fill:var(--surface-page);stroke:color-mix(in srgb,var(--text-heading) 60%,transparent);stroke-width:1.5}
.dc-pd-pipe .chev{fill:none;stroke:color-mix(in srgb,var(--text-heading) 75%,transparent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dc-pd-pipe .plabel{font:var(--dc-type-label);fill:var(--text-subtle)}
.dc-pd-pipe .plabel.kind-branch{fill:var(--status-blocked-text)}
/* construction: each block rises into place, then its conduit extends and lights for a moment */
.dc-pd-block{transform-box:fill-box;transform-origin:50% 100%;animation:dc-pd-rise .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes dc-pd-rise{from{opacity:0;transform:translateY(-18px) scale(.86)}to{opacity:1;transform:none}}
.dc-pd-pipe .base{stroke-dasharray:1;stroke-dashoffset:1;animation:dc-pd-extend .45s ease-out both .4s}
.dc-pd-pipe.kind-rejoin .base{animation:dc-pd-extend .7s ease-out both .4s}
@keyframes dc-pd-extend{to{stroke-dashoffset:0}}
.dc-pd-pipe .lit{stroke-dasharray:1;animation:dc-pd-lit 1.2s ease-out both .7s}
@keyframes dc-pd-lit{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.dc-pd-pipe .chev{opacity:0;animation:dc-pd-fade .3s ease both .9s}
@keyframes dc-pd-fade{to{opacity:1}}
.dc-pd.is-still .dc-pd-block,.dc-pd.is-still .dc-pd-pipe .base,.dc-pd.is-still .dc-pd-pipe .chev{animation:none;opacity:1;stroke-dashoffset:0}
.dc-pd.is-still .dc-pd-pipe .lit{animation:none;opacity:0}
.dc-pd.is-still .dc-pd-pipe.is-last .lit{opacity:.85}
.dc-pd.is-still .dc-pd-pipe.kind-rejoin.is-last .lit{opacity:.4}
@media (prefers-reduced-motion:reduce){.dc-pd-block,.dc-pd-pipe .base,.dc-pd-pipe .chev{animation:none;opacity:1;stroke-dashoffset:0}.dc-pd-pipe .lit{animation:none}.dc-pd-svg{transition:none}}