/* ============================================================
 * WC // UI KIT v2 — SHARED PRIMITIVES
 * ------------------------------------------------------------
 * Single shared CSS for primitives used across the dimension
 * pages (CONTAINERS, CONTROLS, FEEDBACK, NAVIGATION, OVERLAYS,
 * DATA, MEDIA). Follows the locked v2 brand system: brand
 * purple (#5A2E80 main / #8B4DC4 bright), lime, orange, grey
 * card body → ground hover, slide-step polygons, 3px outline.
 *
 * Loaded AFTER wc2-portfolio.css so it can override / extend.
 * ============================================================ */

/* ============================================================
 * 1. PAGE SCAFFOLD — eyebrow strip + section heads
 * ============================================================ */
.wcp-section {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 40px;
}
.wcp-section__head {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 28px;
}
.wcp-section__num {
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.28em;
  color: var(--wc-orange);
  text-transform: uppercase;
}
.wcp-section__title {
  font: 800 28px/0.95 var(--wc-font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--wc-ink-1);
}
/* MIXED FONT — section title accent uses brush face but FORCED UPPERCASE
   so it reads as "STATUS [CHIPS]." matching the surrounding cyber caps.
   The brush face renders capital letters cleanly + keeps the title rhythm
   consistent. (Different from .wc2-htitle hero accent which IS lowercase
   brush — section titles are smaller and need the all-caps consistency.) */
.wcp-section__title .accent {
  font-family: "StyleYourLipstick", var(--wc-font-display);
  font-size: 1.22em;
  line-height: 0.85;
  letter-spacing: 0;
  color: var(--wc-lime);
  display: inline-block;
  vertical-align: -0.05em;
  margin: 0 -0.08em;                  /* tight — pulls brush close to cyber */
  text-transform: uppercase;          /* LOCKED — keeps the all-caps title rhythm */
}
.wcp-section__title .accent.orange { color: var(--wc-orange); }
.wcp-section__sub {
  font: 500 13px var(--wc-font-mono);
  color: var(--wc-ink-3);
  letter-spacing: 0.02em;
  max-width: 65ch;
}
.wcp-block {
  margin-bottom: 48px;
}
.wcp-block__label {
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wc-lime);
  margin-bottom: 14px;
  display: block;
}
.wcp-block__sublabel {
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
  margin-bottom: 8px;
  display: block;
}
.wcp-grid {
  display: grid;
  gap: 18px;
}
.wcp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wcp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wcp-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .wcp-grid--3, .wcp-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .wcp-grid--2, .wcp-grid--3, .wcp-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
 * 2. CARDS — generic card body (uses locked card rule)
 * ============================================================ */
/* NAV SPLAT WRAP — wraps every nav-link / sidebar-item / tab / pager-btn /
   breadcrumb anchor via setupNavSplats() so tiny brand-paint splats can
   peek out past the element on hover. Must inherit ALL layout-affecting
   properties so the wrapped element renders at IDENTICAL size + position
   as before the wrap was added. */
.wcp-nav-splat-wrap {
  /* display set per-instance in JS (inline-block / block) */
  position: relative;
  isolation: isolate;
  /* Inherit text + box metrics so wrap is invisible to layout */
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  vertical-align: baseline;
  padding: 0;
  margin: 0;
  /* Match the wrapped element's flex/grid behavior so the parent's gap
     + alignment apply to the wrap the same way as to the original link */
  flex-shrink: 0;
}
.wcp-nav-splat-wrap > .wc2-splat { z-index: 50; }

/* WCP CARD AUTOWRAP — wraps every .wcp-card / .wcp-chart / .wcp-kpi /
   .wcp-img / .wcp-video / .wcp-panel via setupPrimitiveSplats() in
   wc2-portfolio.js so the brand paint-splats can extend past the card's
   own clip-path polygon on hover. Mirrors the .wc2-card-autowrap pattern
   used for .wc2-notch + .wc2-tentry. NO clip-path on this wrapper —
   that's the whole point. */
/* REVEAL-GATED SHADOW — when the wrapped card hasn't fired its reveal yet
   (no .in class), suppress the autowrap's filter halo AND hide the
   .wcp-glow polygon so the shadow doesn't sit visible while the card
   itself is still at opacity 0. Once the card gets .in, BOTH animate in
   via wc2-glow-reveal — the opacity-only mirror of wc2-glitch-reveal —
   so the shadow flickers in lockstep with the card body. */
.wcp-card-autowrap:has(> .wc2-reveal--glitch:not(.in)),
.wcp-card-autowrap:has(> .wc2-reveal:not(.in)) {
  filter: none !important;
}
.wcp-card-autowrap:has(> .wc2-reveal--glitch:not(.in)) > .wcp-glow,
.wcp-card-autowrap:has(> .wc2-reveal:not(.in)) > .wcp-glow {
  opacity: 0;
}
/* Apply the FULL wc2-glitch-reveal keyframe (opacity + translate + scale)
   to the glow so it moves IN LOCKSTEP with the card body — same slide
   from translateY(18px), same scale from 0.92, same flicker rhythm.
   Without the translate+scale on the glow, the card slides up but the
   shadow stays put = looks standalone. */
.wcp-card-autowrap:has(> .wc2-reveal--glitch.in) > .wcp-glow,
.wcp-card-autowrap:has(> .wc2-reveal.in) > .wcp-glow {
  animation: wc2-glitch-reveal 0.9s cubic-bezier(0.2, 0.85, 0.3, 1.05) var(--reveal-delay, 0s) both;
}

.wcp-card-autowrap {
  position: relative;
  z-index: 0;                          /* keep shadow behind sibling content */
  align-self: start;                   /* don't grid-stretch past card height */
  display: block;
  /* BASELINE shadow halo — 10% of the original baseline. Very subtle, just
     enough to differentiate the card silhouette from the page bg. */
  filter:
    drop-shadow(0 0 0.5px var(--wc-purple-bright))
    drop-shadow(0 0 0.5px var(--wc-purple-bright))
    drop-shadow(0 0 2.5px rgba(139, 77, 196, 0.16))
    drop-shadow(0 0 5px rgba(139, 77, 196, 0.08));
  transition: filter 280ms var(--wc-ease-out),
              transform 280ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
}
.wcp-card-autowrap:hover {
  filter:
    drop-shadow(0 0 0.6px var(--wc-purple-bright))
    drop-shadow(0 0 0.6px var(--wc-purple-bright))
    drop-shadow(0 0 3.5px rgba(139, 77, 196, 0.22))
    drop-shadow(0 0 6.5px rgba(139, 77, 196, 0.12));
}

/* NESTING CONTRAST RULE (§10.4) — when the autowrap is wrapping a lime-
   themed inner element, swap the entire filter stack to LIME tokens so
   the visible halo around the inner element is lime, not purple. The
   autowrap is the actual shadow source (parent silhouette), so the
   override has to live HERE not on the inner element. */
/* ABC LIME GLOW — sharp ring outline at full strength (so the polygon
   outline reads crisp), bloom layers at 50% of original (so the soft
   halo is subtler against the dark-purple ctr-layout-box parent). */
.wcp-card-autowrap:has(> .ctr-layout-fill) {
  filter:
    drop-shadow(0 0 0.5px var(--wc-lime))
    drop-shadow(0 0 0.5px var(--wc-lime))
    drop-shadow(0 0 1.25px rgba(184, 255, 56, 0.16))
    drop-shadow(0 0 2.5px rgba(184, 255, 56, 0.08));
}
.wcp-card-autowrap:has(> .ctr-layout-fill):hover {
  filter:
    drop-shadow(0 0 0.6px var(--wc-lime))
    drop-shadow(0 0 0.6px var(--wc-lime))
    drop-shadow(0 0 1.75px rgba(184, 255, 56, 0.2))
    drop-shadow(0 0 3.25px rgba(184, 255, 56, 0.11));
}

/* LIME SUB-CARD HOVER WAVEFORM — animated outline beam in PURPLE or
   ORANGE (contrast colors against the lime body theme). Alternates per
   cell via nth-child so a row of lime sub-cards reads as a rhythm of
   purple/orange/purple/orange beams. */
.ctr-layout-fill:hover > .wcp-beam { opacity: 1; }

/* Odd children (1, 3, 5…) → PURPLE beam */
.ctr-layout-fill:nth-child(odd) > .wcp-beam path {
  stroke: var(--wc-purple-bright);
}
.ctr-layout-fill:nth-child(odd) > .wcp-beam {
  filter: drop-shadow(0 0 3px var(--wc-purple-bright))
          drop-shadow(0 0 6px rgba(139, 77, 196, 0.55));
}

/* Even children (2, 4, 6…) → ORANGE beam */
.ctr-layout-fill:nth-child(even) > .wcp-beam path {
  stroke: var(--wc-orange);
}
.ctr-layout-fill:nth-child(even) > .wcp-beam {
  filter: drop-shadow(0 0 3px var(--wc-orange))
          drop-shadow(0 0 6px rgba(255, 106, 0, 0.55));
}
.wcp-card-autowrap > .wcp-card,
.wcp-card-autowrap > .wcp-chart,
.wcp-card-autowrap > .wcp-kpi,
.wcp-card-autowrap > .wcp-img,
.wcp-card-autowrap > .wcp-video,
.wcp-card-autowrap > .wcp-panel,
.wcp-card-autowrap > .nav-topbar,
.wcp-card-autowrap > .nav-tab-body,
.wcp-card-autowrap > .nav-stepper-v,
.wcp-card-autowrap > .ctr-layout-box,
.wcp-card-autowrap > .ctr-layout-fill,
.wcp-card-autowrap > .data-table-wrap { position: relative; z-index: 1; }

/* LOCKED CARD RULE — every .wcp-card uses slide-step-b: 4 slide cuts on
   the corners + wide-50% × shallow tab on the BOTTOM. This is the default
   for every container surface across pages 03-08. */
.wcp-card {
  position: relative;
  background: #1a1a1a;
  padding: 20px 20px 26px;                     /* extra bottom for tab */
  --slide-w: 10px; --slide-h: 10px;
  --step-x: 50%;
  --step-d: 6px;
  --step-slope-w: 10px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  transition: background 300ms var(--wc-ease-out), transform 240ms var(--wc-ease-out);
}
/* RANDOM TAB NUB — instead of the wide one-sided step, `.tab-nub` cards carry
 * a small fixed-width nub (--tab-w) at a random position (--tab-x, px) on the
 * BOTTOM edge, or the TOP edge when `.tab-top` is also present. JS sets the
 * vars + classes per card so a group reads as hand-made variation. The nub
 * GROWS on hover (--nub-d 6px → 12px). Glow + beam follow automatically. */
.wcp-card.tab-nub {
  --tab-x: 40%; --tab-w: 48px; --nub-d: 6px;
  transition: background 300ms var(--wc-ease-out),
              transform 240ms var(--wc-ease-out),
              --nub-d 280ms var(--wc-ease-out);
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--nub-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--nub-d)),
    calc(var(--tab-x) + var(--tab-w)) calc(100% - var(--nub-d)),
    calc(var(--tab-x) + var(--tab-w)) 100%,
    var(--tab-x) 100%,
    var(--tab-x) calc(100% - var(--nub-d)),
    var(--slide-w) calc(100% - var(--nub-d)),
    0 calc(100% - var(--nub-d) - var(--slide-h)));
}
.wcp-card.tab-nub.tab-top {
  padding: 26px 20px 20px;   /* extra TOP for the nub instead of bottom */
  clip-path: polygon(
    0 calc(100% - var(--slide-h)),
    var(--slide-w) 100%,
    calc(100% - var(--slide-w)) 100%,
    100% calc(100% - var(--slide-h)),
    100% calc(var(--nub-d) + var(--slide-h)),
    calc(100% - var(--slide-w)) var(--nub-d),
    calc(var(--tab-x) + var(--tab-w)) var(--nub-d),
    calc(var(--tab-x) + var(--tab-w)) 0,
    var(--tab-x) 0,
    var(--tab-x) var(--nub-d),
    var(--slide-w) var(--nub-d),
    0 calc(var(--nub-d) + var(--slide-h)));
}
/* Nub grows on hover. */
.wcp-card-autowrap:hover > .wcp-card.tab-nub { --nub-d: 12px; }
/* ============================================================
 * STRICT RULE — DEFAULT SHADOW HALO (locked card rule §3)
 *
 * EVERY card / container / overlay surface on dark backgrounds MUST carry
 * a constant purple drop-shadow halo by default so it pops from the bg.
 * Cards without this halo blend invisibly into the page #150A22.
 *
 * Stack: 2× tight 1.5px rings (creates the 3px purple outline) + main
 * bloom + outer fade. drop-shadow follows the polygon silhouette so the
 * ring traces the slide-step-b shape exactly — no rectangular leak.
 *
 * On hover the halo brightens to var(--wc-purple-bright) at full alpha.
 * ============================================================ */
/* ============================================================
 * .wcp-glow — DEDICATED solid purple polygon halo element injected by
 * setupPrimitiveSplats() as the first child of every .wcp-card-autowrap.
 *
 * Why an element (not filter:drop-shadow on the card): CSS `filter` on an
 * element with `clip-path` gets clipped to the polygon silhouette in
 * practical browser rendering (Chrome, Safari, FF all do this despite the
 * spec saying filter applies after clip-path). The only reliable way to
 * show a visible purple ring around the card is a SIBLING/BEHIND element
 * with its own polygon, sized larger than the card by inset:-8px so an 8px
 * solid ring shows past every edge of the card silhouette.
 *
 * Same architecture as .wc2-ngcc__glow on the portfolio cards.
 * ============================================================ */
/* Register --glow-bleed as a <length> so CSS can smoothly transition it.
   Without @property the custom property is treated as text and can't
   interpolate — transitions would snap instead of animate. */
@property --glow-bleed {
  syntax: '<length>';
  initial-value: 7px;
  inherits: false;
}
/* Nub depth — separate from --step-d (which must keep inheriting for the
   .ctr-layout-fill glow detection). Registered so the tab can grow on hover. */
@property --nub-d {
  syntax: '<length>';
  initial-value: 6px;
  inherits: false;
}

.wcp-card-autowrap > .wcp-glow {
  position: absolute;
  /* RANDOMIZED PER CARD via --glow-bleed set inline by JS. Pattern:
     glow box = card_box + 2*(bleed+3) on each axis. Polygon offset = bleed.
     This keeps the SLIDE CUT halo at a clean 3px on every card (px-based
     vars shift by the constant 3), while the TAB halo varies with bleed
     (% step-x scales with box size → extra 0.5×2×bleed gets added at the
     tab) — bigger bleed → longer tab shadow.

     HOVER ANIMATION: JS sets --rest-bleed (default state, 35-80px) and
     --hover-bleed (alternate state, randomly shorter OR longer). On
     hover, --glow-bleed transitions smoothly between them, so the tab
     shadow morphs in/out — some cards shorten on hover, others lengthen,
     mix is random per card per session. */
  --glow-bleed: var(--rest-bleed, 7px);
  inset: calc(0px - var(--glow-bleed) - 3px);
  z-index: 0;
  pointer-events: none;
  background: var(--wc-purple);
  --slide-w: 10px; --slide-h: 10px;
  --step-x: 50%; --step-d: 6px; --step-slope-w: 10px;
  clip-path: polygon(
    var(--glow-bleed) calc(var(--glow-bleed) + var(--slide-h)),
    calc(var(--glow-bleed) + var(--slide-w)) var(--glow-bleed),
    calc(100% - var(--glow-bleed) - var(--slide-w)) var(--glow-bleed),
    calc(100% - var(--glow-bleed)) calc(var(--glow-bleed) + var(--slide-h)),
    calc(100% - var(--glow-bleed)) calc(100% - var(--glow-bleed) - var(--step-d) - var(--slide-h)),
    calc(100% - var(--glow-bleed) - var(--slide-w)) calc(100% - var(--glow-bleed) - var(--step-d)),
    calc(var(--glow-bleed) + var(--step-x) + var(--step-slope-w)) calc(100% - var(--glow-bleed) - var(--step-d)),
    calc(var(--glow-bleed) + var(--step-x)) calc(100% - var(--glow-bleed)),
    calc(var(--glow-bleed) + var(--slide-w)) calc(100% - var(--glow-bleed)),
    var(--glow-bleed) calc(100% - var(--glow-bleed) - var(--slide-h)));
  filter:
    drop-shadow(0 0 8px rgba(90, 46, 128, 0.85))
    drop-shadow(0 0 18px rgba(90, 46, 128, 0.55));
  transition: background 280ms var(--wc-ease-out),
              filter 280ms var(--wc-ease-out),
              --glow-bleed 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* NUB glow — BOTTOM edge. Maps the card nub into glow coords (offset by
 * --glow-bleed). px-based --tab-w keeps the halo nub from ballooning, and
 * --nub-d animates the nub depth on hover in sync with the card. */
.wcp-card-autowrap.tab-nub > .wcp-glow {
  transition: background 280ms var(--wc-ease-out),
              filter 280ms var(--wc-ease-out),
              --glow-bleed 800ms cubic-bezier(0.16, 1, 0.3, 1),
              --nub-d 280ms var(--wc-ease-out);
  clip-path: polygon(
    var(--glow-bleed) calc(var(--glow-bleed) + var(--slide-h)),
    calc(var(--glow-bleed) + var(--slide-w)) var(--glow-bleed),
    calc(100% - var(--glow-bleed) - var(--slide-w)) var(--glow-bleed),
    calc(100% - var(--glow-bleed)) calc(var(--glow-bleed) + var(--slide-h)),
    calc(100% - var(--glow-bleed)) calc(100% - var(--glow-bleed) - var(--nub-d) - var(--slide-h)),
    calc(100% - var(--glow-bleed) - var(--slide-w)) calc(100% - var(--glow-bleed) - var(--nub-d)),
    calc(var(--glow-bleed) + var(--tab-x) + var(--tab-w)) calc(100% - var(--glow-bleed) - var(--nub-d)),
    calc(var(--glow-bleed) + var(--tab-x) + var(--tab-w)) calc(100% - var(--glow-bleed)),
    calc(var(--glow-bleed) + var(--tab-x)) calc(100% - var(--glow-bleed)),
    calc(var(--glow-bleed) + var(--tab-x)) calc(100% - var(--glow-bleed) - var(--nub-d)),
    calc(var(--glow-bleed) + var(--slide-w)) calc(100% - var(--glow-bleed) - var(--nub-d)),
    var(--glow-bleed) calc(100% - var(--glow-bleed) - var(--nub-d) - var(--slide-h)));
}
/* NUB glow — TOP edge (vertical mirror). */
.wcp-card-autowrap.tab-nub.tab-top > .wcp-glow {
  clip-path: polygon(
    var(--glow-bleed) calc(100% - var(--glow-bleed) - var(--slide-h)),
    calc(var(--glow-bleed) + var(--slide-w)) calc(100% - var(--glow-bleed)),
    calc(100% - var(--glow-bleed) - var(--slide-w)) calc(100% - var(--glow-bleed)),
    calc(100% - var(--glow-bleed)) calc(100% - var(--glow-bleed) - var(--slide-h)),
    calc(100% - var(--glow-bleed)) calc(var(--glow-bleed) + var(--nub-d) + var(--slide-h)),
    calc(100% - var(--glow-bleed) - var(--slide-w)) calc(var(--glow-bleed) + var(--nub-d)),
    calc(var(--glow-bleed) + var(--tab-x) + var(--tab-w)) calc(var(--glow-bleed) + var(--nub-d)),
    calc(var(--glow-bleed) + var(--tab-x) + var(--tab-w)) var(--glow-bleed),
    calc(var(--glow-bleed) + var(--tab-x)) var(--glow-bleed),
    calc(var(--glow-bleed) + var(--tab-x)) calc(var(--glow-bleed) + var(--nub-d)),
    calc(var(--glow-bleed) + var(--slide-w)) calc(var(--glow-bleed) + var(--nub-d)),
    var(--glow-bleed) calc(var(--glow-bleed) + var(--nub-d) + var(--slide-h)));
}
.wcp-card-autowrap.tab-nub:hover > .wcp-glow { --nub-d: 12px; }
.wcp-card-autowrap:hover > .wcp-glow {
  background: var(--wc-purple-bright);
  filter:
    drop-shadow(0 0 10px rgba(139, 77, 196, 1))
    drop-shadow(0 0 22px rgba(139, 77, 196, 0.7));
  /* SMOOTHLY morph the tab halo on hover — JS sets --hover-bleed to
     either a SHORTER or LONGER value than --rest-bleed (random per
     card), so half the cards retract their tab shadow on hover and
     half extend it. The @property-registered --glow-bleed interpolates
     as a <length>, giving a fluid morph instead of a snap. */
  --glow-bleed: var(--hover-bleed, var(--rest-bleed, 7px));
}

/* RING+INNER PATTERN — on hover the card's body color becomes LIME (the
   visible thin outline tracing the polygon shape exactly) and the ::before
   inner layer fills the interior with dark ground. At rest both layers
   are #1a1a1a so there's no visible ring — the lime outline only appears
   on hover as a sharp brand signal. */
.wcp-card,
.wcp-chart,
.wcp-kpi,
.wcp-panel {
  isolation: isolate;                  /* contain ::before z-index */
}
.wcp-card::before,
.wcp-chart::before,
.wcp-kpi::before,
.wcp-panel::before {
  content: "";
  position: absolute; inset: 1.5px;
  background: #1a1a1a;
  clip-path: inherit;
  z-index: -1;
  pointer-events: none;
  transition: background 220ms var(--wc-ease-out);
}
.wcp-card > *,
.wcp-chart > *,
.wcp-kpi > *,
.wcp-panel > * { position: relative; z-index: 1; }

/* HOVER — card body becomes LIME ring, ::before inner becomes ground dark.
   Result: visible lime thin outline tracing the polygon + ground interior. */
.wcp-card:hover,
.wcp-chart:hover,
.wcp-kpi:hover,
.wcp-panel:hover {
  background: var(--wc-lime);          /* ring color */
}
.wcp-card:hover::before,
.wcp-chart:hover::before,
.wcp-kpi:hover::before,
.wcp-panel:hover::before {
  background: var(--wc-ground);        /* inner color */
}

/* CLICKABLE variant — lime accent. Lime stripe via ::after riding the
   left edge of the polygon, lime title color, lime hover halo override. */
a.wcp-card.clickable {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.wcp-card.clickable .wcp-card__title { color: var(--wc-lime); }
.wcp-card.clickable::after {
  content: "";
  position: absolute;
  left: 0; top: var(--slide-h, 10px);
  bottom: var(--slide-h, 10px);
  width: 3px;
  background: var(--wc-lime);
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(184, 255, 56, 0.6));
}
.wcp-card-autowrap:hover > .wcp-card.clickable {
  /* Lime-tinted hover halo (replaces default bright-purple) */
  filter:
    drop-shadow(0 0 1.5px var(--wc-lime))
    drop-shadow(0 0 1.5px var(--wc-lime))
    drop-shadow(0 0 14px rgba(184, 255, 56, 0.85))
    drop-shadow(0 0 28px rgba(184, 255, 56, 0.5));
}

/* ELEVATED variant — heavier shadow stack: black depth shadow + stronger
   purple bloom. Polygon shape unchanged. */
.wcp-card-autowrap > .wcp-card.elevated {
  filter:
    drop-shadow(0 0 1.5px var(--wc-purple))
    drop-shadow(0 0 1.5px var(--wc-purple))
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.7))           /* black depth */
    drop-shadow(0 0 18px rgba(90, 46, 128, 0.95))         /* main bloom */
    drop-shadow(0 0 38px rgba(90, 46, 128, 0.55));
}
.wcp-card-autowrap:hover {
  transform: translateY(-3px);
}
.wcp-card-autowrap:hover > .wcp-card,
.wcp-card-autowrap:hover > .wcp-chart,
.wcp-card-autowrap:hover > .wcp-kpi,
.wcp-card-autowrap:hover > .wcp-img,
.wcp-card-autowrap:hover > .wcp-video,
.wcp-card-autowrap:hover > .wcp-panel {
  filter:
    drop-shadow(0 0 1.5px var(--wc-purple-bright))    /* bright-purple ring on hover */
    drop-shadow(0 0 1.5px var(--wc-purple-bright))
    drop-shadow(0 0 14px rgba(139, 77, 196, 1))       /* full-alpha main bloom */
    drop-shadow(0 0 28px rgba(139, 77, 196, 0.7));    /* outer fade */
}
.wcp-card-autowrap {
  transition: transform 280ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
}
.wcp-card-autowrap > * {
  transition: filter 280ms cubic-bezier(0.2, 0.85, 0.3, 1.1),
              background 300ms var(--wc-ease-out);
}

/* OUTLINE WAVE BEAM — same .wc2-ccbtn__beam pattern, scoped to wcp
   primitives. SVG injected as first child of each card via JS
   (setupPrimitiveBeams in wc2-portfolio.js). Invisible by default, fades
   in on hover. Path traces the slide-step-b polygon; stroke-dashoffset
   animates to make a lit segment travel around the silhouette. */
.wcp-beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  overflow: visible;
  transition: opacity 200ms var(--wc-ease-out);
  /* LIME beam — cards/dark surfaces always get lime per locked rule;
     PURPLE beam is reserved for .wc2-ccbtn (the filled lime button). */
  filter: drop-shadow(0 0 3px var(--wc-lime))
          drop-shadow(0 0 6px rgba(184, 255, 56, 0.55));
}
.wcp-card:hover > .wcp-beam,
.wcp-chart:hover > .wcp-beam,
.wcp-kpi:hover > .wcp-beam,
.wcp-img:hover > .wcp-beam,
.wcp-video:hover > .wcp-beam,
.wcp-panel:hover > .wcp-beam { opacity: 1; }
.wcp-beam path {
  fill: none;
  stroke: var(--wc-lime);
  stroke-linecap: round;
  animation: wc2-beam-travel 2.4s linear infinite;
}
.wcp-card__head {
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
  margin-bottom: 8px;
}
.wcp-card__title {
  font: 800 16px var(--wc-font-display);
  letter-spacing: -0.01em;
  color: var(--wc-ink-1);
  margin-bottom: 6px;
}
.wcp-card__body {
  font: 500 12px var(--wc-font-mono);
  color: var(--wc-ink-3);
  line-height: 1.6;
}

/* ============================================================
 * 3. ACCORDION
 * ============================================================ */
.wcp-acc {
  display: flex; flex-direction: column;
  gap: 6px;
}
/* LOCKED CARD RULE — accordion items each get the brand slide-step
   polygon (cut corners on all 4 corners). No tab — items stack tight and
   tabs would clash with the row below. */
.wcp-acc__item {
  position: relative;
  background: #1a1a1a;
  border: 0;
  transition: background 240ms;
  --slide-w: 8px; --slide-h: 8px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
.wcp-acc__item[open] {
  background: var(--wc-ground);
}
.wcp-acc__head {
  padding: 14px 18px;
  cursor: pointer;
  font: 700 11px var(--wc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-ink-1);
  display: flex; align-items: center; justify-content: space-between;
  list-style: none;
  user-select: none;
}
.wcp-acc__head::-webkit-details-marker { display: none; }
.wcp-acc__head::after {
  content: "+";
  font-size: 16px;
  color: var(--wc-lime);
  transition: transform 200ms;
}
.wcp-acc__item[open] .wcp-acc__head::after {
  content: "−";
  transform: rotate(0deg);
}
.wcp-acc__body {
  padding: 0 18px 16px;
  font: 500 12px var(--wc-font-mono);
  color: var(--wc-ink-3);
  line-height: 1.6;
}

/* ============================================================
 * 4. KBD SHORTCUTS
 * ============================================================ */
.wcp-kbd-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #1a1a1a;
  font: 500 11px var(--wc-font-mono);
  color: var(--wc-ink-2);
}
.wcp-kbd-row__action {
  flex: 1;
  letter-spacing: 0.02em;
}
.wcp-kbd {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--wc-line);                  /* ring color */
  border: 0;
  color: var(--wc-lime);
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  --slide-w: 4px; --slide-h: 4px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
.wcp-kbd::before {
  content: "";
  position: absolute; inset: 1px;
  background: var(--wc-ground);                /* inner color */
  clip-path: inherit;
  z-index: -1;
  pointer-events: none;
}
.wcp-kbd > *,
.wcp-kbd { isolation: isolate; }
.wcp-kbd-sep { color: var(--wc-ink-4); font-weight: 700; }

/* ============================================================
 * 5. DIVIDERS
 * ============================================================ */
.wcp-div {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
}
.wcp-div__line {
  flex: 1; height: 1px;
  background: var(--wc-line);
}
.wcp-div__line--lime { background: var(--wc-lime); opacity: 0.6; }
.wcp-div__line--orange { background: var(--wc-orange); opacity: 0.55; }
.wcp-div__line--dashed {
  background: repeating-linear-gradient(90deg,
    rgba(90, 46, 128, 0.45) 0, rgba(90, 46, 128, 0.45) 6px,
    transparent 6px, transparent 12px);
}
.wcp-div__line--double {
  height: 5px;
  background: linear-gradient(to bottom, var(--wc-line) 0 1px, transparent 1px 4px, var(--wc-line) 4px 5px);
}
.wcp-div__lbl {
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
}

/* ============================================================
 * 6. FORM INPUTS
 * ============================================================ */
.wcp-field {
  display: flex; flex-direction: column; gap: 6px;
}
.wcp-field__lbl {
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
}
.wcp-field__hint {
  font: 500 10px var(--wc-font-mono);
  color: var(--wc-ink-4);
  letter-spacing: 0.04em;
}
.wcp-field__err {
  font: 700 10px var(--wc-font-mono);
  color: var(--wc-orange);
  letter-spacing: 0.06em;
}

/* ::selection — lime highlight on selected text */
::selection { background: var(--wc-lime); color: var(--wc-ground); }
::-moz-selection { background: var(--wc-lime); color: var(--wc-ground); }

/* INPUT WRAPPER — polygon ring + ::before inner. The wrapper's bg = the
   outline color and clip-path defines the shape (incl. wide-short tab).
   ::before fills the polygon's interior in the inner color so the tab
   area is covered too (NOT just the rectangular input box). The actual
   <input> sits on top, TRANSPARENT, with just the text/caret. */
.wcp-field__input {
  position: relative;
  display: block;
  background: var(--wc-line);                    /* the OUTLINE color */
  --slide-w: 5px; --slide-h: 5px;
  --tab-d: 4px;
  --tab-w: 55%;
  --tab-x: 50%;
  --tab-slope: 4px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h) - var(--tab-d)),
    calc(100% - var(--slide-w)) calc(100% - var(--tab-d)),
    calc(var(--tab-x) + var(--tab-w) / 2) calc(100% - var(--tab-d)),
    calc(var(--tab-x) + var(--tab-w) / 2 - var(--tab-slope)) 100%,
    calc(var(--tab-x) - var(--tab-w) / 2 + var(--tab-slope)) 100%,
    calc(var(--tab-x) - var(--tab-w) / 2) calc(100% - var(--tab-d)),
    var(--slide-w) calc(100% - var(--tab-d)),
    0 calc(100% - var(--slide-h) - var(--tab-d)));
  isolation: isolate;
  transition: background 220ms var(--wc-ease-out),
              filter 240ms var(--wc-ease-out),
              transform 240ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
}
/* Inner color polygon — fills the polygon interior INCLUDING the tab. */
.wcp-field__input::before {
  content: "";
  position: absolute; inset: 1px;
  background: #1a1a1a;
  clip-path: inherit;
  z-index: -1;
  pointer-events: none;
  transition: background 220ms var(--wc-ease-out), inset 200ms var(--wc-ease-out);
}
.wcp-field__input:hover { background: rgba(184, 255, 56, 0.45); }
.wcp-field__input:focus-within {
  background: var(--wc-lime);
  transform: translateY(-1px);
  filter: drop-shadow(0 0 12px rgba(184, 255, 56, 0.3));
}
.wcp-field__input:focus-within::before {
  inset: 2px;                                    /* thicker ring on focus */
  background: var(--wc-ground);
}
.wcp-field__input.error,
.wcp-field__input:has(.wcp-input.error),
.wcp-field__input:has(.wcp-textarea.error) {
  background: var(--wc-orange);
}
.wcp-field__input:has(:disabled) {
  background: var(--wc-ink-5);
  opacity: 0.6;
}

/* Inputs INSIDE the wrapper — TRANSPARENT background so the ::before
   inner polygon shows through. The input is just the text/caret layer. */
.wcp-input,
.wcp-textarea,
.wcp-select {
  display: block;
  width: 100%;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 10px 14px 14px 14px;
  font: 500 12px var(--wc-font-mono);
  color: var(--wc-ink-1);
  letter-spacing: 0.02em;
  outline: none;
  clip-path: none;
  position: relative;
  z-index: 1;
  /* color-scheme: dark hints the browser to use DARK styling for the
     native options dropdown (instead of the default white system list). */
  color-scheme: dark;
}
.wcp-input.error,
.wcp-textarea.error {
  color: var(--wc-orange);
}
/* SELECT — restore the lime chevron via background-image (color: transparent
   on the SELECT itself but the gradient chevron still shows). */
.wcp-select {
  -webkit-appearance: none;
          appearance: none;
  background-image: linear-gradient(135deg, transparent 50%, var(--wc-lime) 50%),
                    linear-gradient(45deg, var(--wc-lime) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}

/* SELECT-VARIANT WRAPPER — distinct polygon shape so selects READ as
   dropdowns at a glance. Deeper diagonal cut on the bottom-right corner
   visually points toward the chevron arrow and signals "menu opens here". */
.wcp-field__input--select {
  --slide-w: 5px; --slide-h: 5px;
  --select-cut: 14px;          /* bigger diagonal than regular inputs */
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--select-cut)),
    calc(100% - var(--select-cut)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h))) !important;
}
/* Native option list — Chromium ignores option:hover styling entirely, so
   the native dropdown will always show system blue. For full control we
   use the CUSTOM DROPDOWN below (.wcp-cust-select). The native select
   styles here are left only as a fallback. */
.wcp-select {
  accent-color: var(--wc-orange);
}

/* ============ CUSTOM DROPDOWN (.wcp-cust-select) ============
   <details>-based custom dropdown that fully respects CSS hover styling
   (orange hover/active works in ALL browsers including Chrome). Drop-in
   replacement for native <select>. The summary IS the trigger (carries
   the polygon shape + ring); the <ul> sits BELOW the summary as a
   sibling — NOT inside a clipped wrapper — so it doesn't get cut off. */
.wcp-cust-select {
  position: relative;
  width: 100%;
  font: 500 12px var(--wc-font-mono);
  color: var(--wc-ink-1);
}
.wcp-cust-select > summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 10px 32px 14px 14px;
  letter-spacing: 0.02em;
  color: var(--wc-ink-1);
  outline: none;
  background: var(--wc-line);              /* ring color */
  background-image: linear-gradient(135deg, transparent 50%, var(--wc-lime) 50%),
                    linear-gradient(45deg, var(--wc-lime) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  -webkit-user-select: none;
          user-select: none;
  /* Same select polygon shape as .wcp-field__input--select */
  --slide-w: 5px; --slide-h: 5px;
  --select-cut: 14px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--select-cut)),
    calc(100% - var(--select-cut)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  isolation: isolate;
  transition: background 220ms var(--wc-ease-out);
}
.wcp-cust-select > summary::before {
  content: "";
  position: absolute; inset: 1px;
  background: #1a1a1a;                      /* inner color */
  clip-path: inherit;
  z-index: -1;
  pointer-events: none;
}
.wcp-cust-select[open] > summary,
.wcp-cust-select > summary:hover { background: rgba(184, 255, 56, 0.45); }
.wcp-cust-select[open] > summary { background: var(--wc-lime); }
.wcp-cust-select > summary::-webkit-details-marker,
.wcp-cust-select > summary::marker { display: none; content: ""; }
.wcp-cust-select[open] > summary {
  background-image: linear-gradient(45deg, transparent 50%, var(--wc-lime) 50%),
                    linear-gradient(135deg, var(--wc-lime) 50%, transparent 50%);
}
.wcp-cust-select__list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  z-index: 200;
  list-style: none;
  margin: 0; padding: 18px 0 6px;                /* extra top for the top notch */
  background: var(--wc-ground);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  /* Slide-step polygon with TOP NOTCH — visually anchors the menu to the
     trigger above. Notch position varies by --notch-x (default 22% from
     left so it sits near the chevron arrow on the trigger). */
  --slide-w: 8px; --slide-h: 8px;
  --notch-x: 22%;
  --notch-w: 60px;
  --notch-d: 10px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(var(--notch-x) - var(--notch-w) / 2) 0,
    calc(var(--notch-x) - var(--notch-w) / 2 + var(--notch-d)) var(--notch-d),
    calc(var(--notch-x) + var(--notch-w) / 2 - var(--notch-d)) var(--notch-d),
    calc(var(--notch-x) + var(--notch-w) / 2) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  transform-origin: top center;
  animation: wcp-pop-in 200ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
}
.wcp-cust-select__item {
  display: block;
  padding: 9px 14px;
  font: 700 11px var(--wc-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-ink-2);
  cursor: pointer;
  transition: background 140ms, color 140ms, padding-left 160ms;
}
.wcp-cust-select__item:hover,
.wcp-cust-select__item.selected {
  background: var(--wc-lime);                    /* LIME hover */
  color: var(--wc-ground);
  padding-left: 22px;
}
.wcp-input.error,
.wcp-textarea.error {
  border-color: var(--wc-orange);
  color: var(--wc-orange);
}
.wcp-input::placeholder,
.wcp-textarea::placeholder { color: var(--wc-ink-4); }
.wcp-input[disabled],
.wcp-textarea[disabled],
.wcp-select[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.wcp-textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.wcp-select {
  appearance: none;
  background-image: linear-gradient(135deg, transparent 50%, var(--wc-lime) 50%),
                    linear-gradient(45deg, var(--wc-lime) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

/* CHECKBOX / RADIO / SWITCH */
.wcp-check {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  font: 500 12px var(--wc-font-mono);
  color: var(--wc-ink-2);
  letter-spacing: 0.02em;
  -webkit-user-select: none;
          user-select: none;
}
.wcp-check input { position: absolute; opacity: 0; pointer-events: none; }
.wcp-check__box,
.wcp-check__radio {
  position: relative;
  width: 18px; height: 18px;
  background: var(--wc-line);          /* ring (outer) */
  border: 0;
  display: inline-grid; place-items: center;
  transition: background 180ms;
  flex-shrink: 0;
}
/* CHECKBOX — cut-corner SQUARE (slide-step shape) */
.wcp-check__box {
  --slide-w: 4px; --slide-h: 4px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
.wcp-check__box::before {
  content: "";
  position: absolute; inset: 1.5px;
  background: #1a1a1a;                 /* inner fill */
  clip-path: inherit;
  transition: background 180ms;
}
/* RADIO — PENTAGON (5-sided) */
.wcp-check__radio {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  border-radius: 0;
}
.wcp-check__radio::before {
  content: "";
  position: absolute; inset: 1.5px;
  background: #1a1a1a;
  clip-path: inherit;
  transition: background 180ms;
}

/* CHECKED states — fill ring + inner with lime, render check/pentagon on top */
.wcp-check input:checked + .wcp-check__box,
.wcp-check input:checked + .wcp-check__radio {
  background: var(--wc-lime);
}
.wcp-check input:checked + .wcp-check__box::before,
.wcp-check input:checked + .wcp-check__radio::before {
  background: var(--wc-lime);
}
.wcp-check input:checked + .wcp-check__box::after {
  content: "";
  position: relative; z-index: 1;
  width: 8px; height: 4px;
  border-left: 2px solid var(--wc-ground);
  border-bottom: 2px solid var(--wc-ground);
  transform: rotate(-45deg) translate(1px, -1px);
}
/* Pentagon-shaped fill marker on checked radio */
.wcp-check input:checked + .wcp-check__radio::after {
  content: "";
  position: relative; z-index: 1;
  width: 9px; height: 9px;
  background: var(--wc-ground);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.wcp-switch {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  font: 500 12px var(--wc-font-mono);
  color: var(--wc-ink-2);
}
.wcp-switch input { position: absolute; opacity: 0; pointer-events: none; }
/* SWITCH — cut-corner track + cut-corner thumb */
.wcp-switch__track {
  position: relative;
  width: 40px; height: 20px;
  background: var(--wc-line);          /* ring (outer) */
  border: 0;
  transition: background 220ms var(--wc-ease-out);
  --slide-w: 5px; --slide-h: 5px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
.wcp-switch__track::before {
  content: "";
  position: absolute; inset: 1.5px;
  background: #1a1a1a;
  clip-path: inherit;
  transition: background 220ms var(--wc-ease-out);
  z-index: 0;
}
.wcp-switch__track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  background: var(--wc-ink-3);
  z-index: 1;
  --slide-w: 3px; --slide-h: 3px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  transition: left 240ms cubic-bezier(0.2, 0.85, 0.3, 1.1), background 220ms;
}
.wcp-switch input:checked + .wcp-switch__track {
  background: var(--wc-lime);
}
.wcp-switch input:checked + .wcp-switch__track::before {
  background: var(--wc-lime);
}
.wcp-switch input:checked + .wcp-switch__track::after {
  left: 23px;
  background: var(--wc-ground);
}

/* FILE DROP — notch card shape with DASHED lime outline (SVG bg) + subtle
   hover scale animation. */
.wcp-filedrop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 32px 40px;
  background: #1a1a1a;
  font: 500 11px var(--wc-font-mono);
  color: var(--wc-ink-3);
  letter-spacing: 0.06em;
  text-align: center;
  cursor: pointer;
  transition: background 240ms var(--wc-ease-out), color 240ms,
              transform 320ms cubic-bezier(0.2, 0.85, 0.3, 1.1),
              filter 320ms var(--wc-ease-out);
  --slide-w: 14px; --slide-h: 14px;
  --notch-x: 50%;
  --notch-w: 140px;
  --notch-d: 16px;
  --step-d: 14px;
  --step-slope-w: 14px;
  --step-x: 30%;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(var(--notch-x) - var(--notch-w) / 2) 0,
    calc(var(--notch-x) - var(--notch-w) / 2 + var(--notch-d)) var(--notch-d),
    calc(var(--notch-x) + var(--notch-w) / 2 - var(--notch-d)) var(--notch-d),
    calc(var(--notch-x) + var(--notch-w) / 2) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
/* Dashed lime polygon outline via inline SVG background. vector-effect=
   non-scaling-stroke keeps the stroke width AND dash pattern at consistent
   screen-pixel size regardless of element aspect ratio — fixes the
   "horizontal dashes look stretched vs vertical" issue. inset pulls the
   stroke inside the polygon so it doesn't appear to overflow the shape. */
.wcp-filedrop::before {
  content: "";
  position: absolute; inset: 4px;
  pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0,7 2,0 41,0 43,8 57,8 59,0 98,0 100,7 100,86 98,93 32,93 30,100 2,100 0,93' fill='none' stroke='%23B8FF38' stroke-width='1.5' stroke-dasharray='6 4' opacity='0.75' vector-effect='non-scaling-stroke'/></svg>")
    center / 100% 100% no-repeat;
  transition: opacity 320ms var(--wc-ease-out);
  z-index: 0;
}
.wcp-filedrop > * { position: relative; z-index: 1; }
.wcp-filedrop:hover,
.wcp-filedrop.dragging {
  background: var(--wc-ground);
  color: var(--wc-lime);
  transform: scale(1.005);                       /* 30% of the previous 1.015 */
  filter: drop-shadow(0 0 18px rgba(184, 255, 56, 0.3));
}
.wcp-filedrop:hover::before {
  /* Brighter dashed outline on hover */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0,7 2,0 41,0 43,8 57,8 59,0 98,0 100,7 100,86 98,93 32,93 30,100 2,100 0,93' fill='none' stroke='%23B8FF38' stroke-width='2' stroke-dasharray='8 4' vector-effect='non-scaling-stroke'/></svg>")
    center / 100% 100% no-repeat;
}
.wcp-filedrop__icon {
  font-size: 28px; color: var(--wc-lime); margin-bottom: 10px;
  transition: transform 320ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
}
.wcp-filedrop:hover .wcp-filedrop__icon { transform: translateY(-4px) scale(1.1); }
.wcp-filedrop__title { font-weight: 800; color: var(--wc-ink-1); margin-bottom: 4px; text-transform: uppercase; }

/* ============================================================
 * 7. ALERTS / BANNERS / TOASTS
 * ============================================================ */
.wcp-alert {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px 12px 28px;            /* extra LEFT padding for the tab indicator */
  background: #1a1a1a;
  border: 0;
  font: 500 12px var(--wc-font-mono);
  color: var(--wc-ink-2);
  --slide-w: 8px; --slide-h: 8px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
/* TAB INDICATOR — vertical colored strip on the LEFT with slide-step corners
   (looks like a card tab). Per-variant background color set below. */
.wcp-alert::before {
  content: "";
  position: absolute;
  top: 7px; bottom: 7px;
  left: 8px;
  width: 10px;
  background: var(--wc-line);
  clip-path: polygon(
    0 3px, 3px 0,
    100% 0, 100% 100%,
    3px 100%, 0 calc(100% - 3px));
}
.wcp-alert--info::before { background: var(--wc-purple); }
.wcp-alert--warn::before { background: var(--wc-orange); }
.wcp-alert--crit::before { background: var(--wc-crit); }
.wcp-alert--ok::before   { background: var(--wc-lime); }
.wcp-alert--warn { color: var(--wc-orange); }
.wcp-alert--crit { color: var(--wc-crit); }
.wcp-alert--ok   { color: var(--wc-lime); }
.wcp-alert__icon { flex: 0 0 16px; font-weight: 800; }
.wcp-alert__title {
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--wc-ink-1);
}
.wcp-alert__msg { color: var(--wc-ink-3); line-height: 1.5; }
.wcp-alert--warn .wcp-alert__msg,
.wcp-alert--crit .wcp-alert__msg,
.wcp-alert--ok .wcp-alert__msg { color: inherit; opacity: 0.85; }

.wcp-toast {
  position: relative;
  padding: 14px 18px 14px 30px;            /* extra LEFT padding for the tab indicator */
  background: var(--wc-ground);
  border: 0;
  display: flex; align-items: center; gap: 12px;
  min-width: 240px;
  font: 500 12px var(--wc-font-mono);
  color: var(--wc-ink-1);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.wcp-toast::before {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px;
  left: 8px;
  width: 10px;
  background: var(--wc-lime);
  clip-path: polygon(
    0 3px, 3px 0,
    100% 0, 100% 100%,
    3px 100%, 0 calc(100% - 3px));
}
.wcp-toast--warn::before { background: var(--wc-orange); }
.wcp-toast--crit::before { background: var(--wc-crit); }
.wcp-toast__title {
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--wc-lime);
  font-size: 10px;
}
.wcp-toast--warn .wcp-toast__title { color: var(--wc-orange); }
.wcp-toast--crit .wcp-toast__title { color: var(--wc-crit); }

/* ============================================================
 * 8. BADGES / CHIPS
 * ============================================================ */
.wcp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  background: rgba(90, 46, 128, 0.18);
  border: 1px solid var(--wc-line);
  font: 700 9px var(--wc-font-mono);
  color: var(--wc-ink-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wcp-badge--lime   { color: var(--wc-lime);   border-color: var(--wc-lime);   background: rgba(184, 255, 56, 0.12); }
.wcp-badge--orange { color: var(--wc-orange); border-color: var(--wc-orange); background: rgba(255, 106, 0, 0.10); }
.wcp-badge--crit   { color: var(--wc-crit);   border-color: var(--wc-crit);   background: rgba(255, 61, 92, 0.10); }
.wcp-badge--ghost  { color: var(--wc-ink-4); border-color: var(--wc-ink-5); background: transparent; }
.wcp-badge__pip {
  width: 6px; height: 6px;
  background: currentColor;
}

/* ============================================================
 * 9. PROGRESS — linear, circular, stepped
 * ============================================================ */
/* LOAD METER BAR — brand slide-step-b polygon (slide cuts on the corners,
   WIDE 60% + SHALLOW 4px tab on the bottom — same family as .wc2-ccbtn).
   Waveform FX overlay scrolls across the lime fill. Bright halo pulse via
   filter:drop-shadow on the parent so the glow extends past the polygon. */
.wcp-progress {
  position: relative;
  width: 100%; height: 16px;
  background: var(--wc-ink-5);
  --slide-w: 4px;
  --slide-h: 3px;
  --step-x: 60%;
  --step-d: 4px;
  --step-slope-w: 5px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  animation: wcp-bar-glow 1.6s ease-in-out infinite;
}
.wcp-progress__fill {
  position: relative;
  height: 100%;
  background: var(--wc-lime);
}
/* Waveform overlay — repeating bright/dim vertical bars that scroll. */
.wcp-progress__fill::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0)   0px,
    rgba(255, 255, 255, 0)   3px,
    rgba(255, 255, 255, 0.35) 3px,
    rgba(255, 255, 255, 0.55) 5px,
    rgba(255, 255, 255, 0)   5px,
    rgba(255, 255, 255, 0)   9px,
    rgba(0, 0, 0, 0.22)      9px,
    rgba(0, 0, 0, 0.22)      11px,
    rgba(255, 255, 255, 0)   11px,
    rgba(255, 255, 255, 0)   16px);
  background-size: 16px 100%;
  animation: wcp-bar-wave 900ms linear infinite;
  mix-blend-mode: overlay;
}
.wcp-progress--orange .wcp-progress__fill { background: var(--wc-orange); }
.wcp-progress--orange { animation-name: wcp-bar-glow-orange; }
@keyframes wcp-bar-wave {
  from { background-position: 0 0; }
  to   { background-position: 32px 0; }
}
/* Bright halo pulse on the parent (drop-shadow on the rounded silhouette
   extends OUTWARD past the pill — not clipped). Wide swing 0.3 → 1.0
   alpha + 4px → 18px blur so the breathing is unmistakable. */
@keyframes wcp-bar-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(184, 255, 56, 0.3))
                     drop-shadow(0 0 8px rgba(184, 255, 56, 0.15)); }
  50%      { filter: drop-shadow(0 0 14px rgba(184, 255, 56, 1))
                     drop-shadow(0 0 30px rgba(184, 255, 56, 0.75)); }
}
@keyframes wcp-bar-glow-orange {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 106, 0, 0.3))
                     drop-shadow(0 0 8px rgba(255, 106, 0, 0.15)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 106, 0, 1))
                     drop-shadow(0 0 30px rgba(255, 106, 0, 0.75)); }
}
.wcp-progress--orange .wcp-progress__fill { background: var(--wc-orange); box-shadow: 0 0 12px rgba(255, 106, 0, 0.45); }
.wcp-progress__label {
  display: flex; justify-content: space-between;
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
  margin-bottom: 6px;
}

/* CIRCULAR PROGRESS — actual circle, smooth arc to %, with a WAVE-FX
   overlay (dashed lime arc travelling around the perimeter) and a bright
   halo pulse. Circle r=32 in 80×80 viewBox, circumference 2πr ≈ 201. */
.wcp-pring {
  position: relative;
  width: 96px; height: 96px;
}
.wcp-pring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.wcp-pring .track {
  fill: none;
  stroke: var(--wc-ink-5);
  stroke-width: 4;                             /* thinner ring per request */
}
.wcp-pring .fill {
  fill: none;
  stroke: var(--wc-lime);
  stroke-width: 4;
  stroke-linecap: round;
  animation: wcp-pring-glow 1.6s ease-in-out infinite;
}
@keyframes wcp-pring-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(184, 255, 56, 0.3)); }
  50%      { filter: drop-shadow(0 0 18px rgba(184, 255, 56, 1)); }
}
/* Center % readout — brand BRUSH font (Style Your Lipstick), lime tint
   with a soft drop-shadow so the number reads as a hand-painted graffiti
   accent inside the ring instead of a monospaced gauge. */
.wcp-pring__pct {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: "StyleYourLipstick", var(--wc-font-display);
  font-size: 38px;
  line-height: 0.85;
  letter-spacing: 0.01em;
  color: var(--wc-lime);
  filter: drop-shadow(0 0 8px rgba(184, 255, 56, 0.5));
}

/* STEPPED — slide-step cut-corner shape, each successive step subtly
   TALLER (subtle staircase). Done/active steps glow lime, glow pulses. */
.wcp-stepped {
  display: flex; align-items: flex-end; gap: 8px;       /* bottom-align so they "step up" */
}
/* Each step uses the brand slide-step-b polygon (slide cuts + wide-60%
   + shallow-3px tab on the bottom) so the staircase matches the bar +
   button family. Heights grow subtly per step. */
.wcp-stepped__step {
  flex: 1;
  background: var(--wc-ink-5);
  --slide-w: 3px;
  --slide-h: 2px;
  --step-x: 60%;
  --step-d: 3px;
  --step-slope-w: 4px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  transition: background 240ms;
}
/* Subtle progressive heights — taller is more "filled" */
.wcp-stepped__step:nth-child(1) { height: 10px; }
.wcp-stepped__step:nth-child(2) { height: 13px; }
.wcp-stepped__step:nth-child(3) { height: 16px; }
.wcp-stepped__step:nth-child(4) { height: 19px; }
.wcp-stepped__step:nth-child(5) { height: 22px; }
/* drop-shadow (not box-shadow) so the halo extends past the clip-path
   cut corners instead of being clipped invisible. */
.wcp-stepped__step.done {
  background: var(--wc-lime);
  animation: wcp-step-glow 1.8s ease-in-out infinite;
}
.wcp-stepped__step.active {
  background: var(--wc-lime);
  animation: wcp-step-glow-active 1.4s ease-in-out infinite;
}
@keyframes wcp-step-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(184, 255, 56, 0.3))
                     drop-shadow(0 0 4px rgba(184, 255, 56, 0.15)); }
  50%      { filter: drop-shadow(0 0 6px rgba(184, 255, 56, 0.95))
                     drop-shadow(0 0 14px rgba(184, 255, 56, 0.55)); }
}
@keyframes wcp-step-glow-active {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(184, 255, 56, 0.45))
                     drop-shadow(0 0 6px rgba(184, 255, 56, 0.25)); }
  50%      { filter: drop-shadow(0 0 10px rgba(184, 255, 56, 1))
                     drop-shadow(0 0 22px rgba(184, 255, 56, 0.7)); }
}

/* SPINNERS — actual SVG circle. Track ink-5 stays static. Only the lime
   HEAD rotates around via stroke-dashoffset.
   Seamless loop math: stroke-dasharray TOTAL must equal circumference so
   the dashoffset shift returns to an identical visual position (otherwise
   you see the head snap mid-edge when the animation restarts).
   r=14 in 32×32 viewBox → circumference 2πr = 87.96. Round to 88.
   dasharray "26 62" → lit 26, gap 62, total 88. Offset loops -88. */
.wcp-spin {
  display: inline-block;
  width: 24px; height: 24px;
}
.wcp-spin svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.wcp-spin circle { fill: none; }
.wcp-spin .spin-track {
  stroke: var(--wc-ink-5);
  stroke-width: 2.5;
}
.wcp-spin .spin-head {
  stroke: var(--wc-lime);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 26 62;             /* total = 88 = circumference */
  filter: drop-shadow(0 0 3px rgba(184, 255, 56, 0.85));
  animation: wcp-spin-dash 1100ms linear infinite;
}
@keyframes wcp-spin-dash {
  to { stroke-dashoffset: -88; }       /* exact perimeter — no snap */
}
.wcp-spin--lg { width: 40px; height: 40px; }
.wcp-spin--lg .spin-track,
.wcp-spin--lg .spin-head { stroke-width: 3; }
.wcp-spin--sm { width: 16px; height: 16px; }
.wcp-spin--sm .spin-track,
.wcp-spin--sm .spin-head { stroke-width: 2; }

/* ============================================================
 * 10. EMPTY / ERROR STATES
 * ============================================================ */
.wcp-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 32px;
  background: #1a1a1a;
  --slide-w: 10px; --slide-h: 10px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
.wcp-empty__icon {
  font-size: 32px; color: var(--wc-ink-4);
  margin-bottom: 10px;
}
.wcp-empty__title {
  font: 800 11px var(--wc-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-ink-1);
  margin-bottom: 6px;
}
.wcp-empty__msg {
  font: 500 11px var(--wc-font-mono);
  color: var(--wc-ink-3);
  line-height: 1.55;
  max-width: 32ch;
}

/* ============================================================
 * 11. NAVIGATION — sidebar, tabs, pagination, breadcrumbs, stepper
 * ============================================================ */
.wcp-sidebar {
  display: flex; flex-direction: column;
  background: #1a1a1a;
  width: 200px;
  --slide-w: 10px; --slide-h: 10px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  padding: 16px 0;
}
.wcp-sidebar__group {
  padding: 6px 16px;
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
  margin-top: 8px;
}
.wcp-sidebar__item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 22px;            /* extra left for the tab indicator */
  font: 700 11px var(--wc-font-mono);
  color: var(--wc-ink-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms, color 180ms;
}
.wcp-sidebar__item:hover { color: var(--wc-ink-1); background: rgba(184, 255, 56, 0.04); }
/* ACTIVE — selected item wears the brand slide-step polygon (cut corners
   on the row) + a VERTICAL lime tab indicator on the left whose RIGHT
   edge has the slide-step-b tab nub (rotated 90° from the button shape:
   slide cuts on the corners + tab pointing INTO the item, not down). */
.wcp-sidebar__item.active {
  color: var(--wc-lime);
  background: rgba(184, 255, 56, 0.10);
  --slide-w: 6px; --slide-h: 5px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
/* Vertical lime tab indicator. Strip lives in the left padding. Polygon
   has slide cuts on all 4 corners + a wide-60%-tall × 3px-deep tab nub
   on the RIGHT edge (pointing into the row). */
.wcp-sidebar__item.active::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px; bottom: 6px;
  width: 7px;
  background: var(--wc-lime);
  --ti-slide-w: 1.5px;
  --ti-slide-h: 2px;
  --ti-base-w: 57%;                  /* strip occupies left 57% of the 7px box */
  --ti-step-y-a: 20%;                /* tab section starts 20% from top */
  --ti-step-y-b: 80%;                /* tab section ends 80% from top */
  --ti-step-slope: 2px;
  clip-path: polygon(
    0 var(--ti-slide-h),
    var(--ti-slide-w) 0,
    calc(var(--ti-base-w) - var(--ti-slide-w)) 0,
    var(--ti-base-w) var(--ti-slide-h),
    var(--ti-base-w) calc(var(--ti-step-y-a) - var(--ti-step-slope)),
    100% var(--ti-step-y-a),
    100% var(--ti-step-y-b),
    var(--ti-base-w) calc(var(--ti-step-y-b) + var(--ti-step-slope)),
    var(--ti-base-w) calc(100% - var(--ti-slide-h)),
    calc(var(--ti-base-w) - var(--ti-slide-w)) 100%,
    var(--ti-slide-w) 100%,
    0 calc(100% - var(--ti-slide-h)));
  filter: drop-shadow(0 0 4px rgba(184, 255, 56, 0.55));
}

.wcp-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--wc-line);
}
.wcp-tabs__tab {
  position: relative;
  padding: 10px 16px;
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: color 180ms;
}
.wcp-tabs__tab:hover { color: var(--wc-ink-1); }
.wcp-tabs__tab.active { color: var(--wc-lime); }
/* Active indicator — solid lime tab-shape underline (matches the sidebar
   DASHBOARD tab style + nav-topbar active link: slide cuts on the corners
   + wide-60% × shallow tab nub pointing DOWN). */
.wcp-tabs__tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 5px;
  background: var(--wc-lime);
  --slide-w: 2px;
  --slide-h: 1px;
  --step-x: 60%;
  --step-d: 2px;
  --step-slope-w: 2px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  filter: drop-shadow(0 0 4px rgba(184, 255, 56, 0.55));
}

.wcp-page {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 11px var(--wc-font-mono);
}
/* CUT-CORNER BOX — used by pagination + calendar days. Uses the RING+INNER
   pattern (background = ring color, ::before with shrunken polygon = inner)
   so the outline FOLLOWS the polygon shape exactly. */
.wcp-page__btn {
  position: relative;
  min-width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  background: var(--wc-line);                /* ring color */
  border: 0;
  color: var(--wc-ink-2);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background 180ms, color 180ms, transform 200ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
  --slide-w: 4px; --slide-h: 4px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
.wcp-page__btn::before {
  content: "";
  position: absolute; inset: 1px;
  background: #1a1a1a;                       /* inner color */
  clip-path: inherit;
  transition: background 180ms;
  z-index: -1;
  pointer-events: none;
}
.wcp-page__btn > *,
.wcp-page__btn { isolation: isolate; }
.wcp-page__btn:hover {
  background: var(--wc-lime);
  color: var(--wc-lime);
  transform: translateY(-1px);
}
.wcp-page__btn:hover::before { background: var(--wc-ground); }
.wcp-page__btn.active {
  background: var(--wc-lime);
  color: var(--wc-ground);
}
.wcp-page__btn.active::before { background: var(--wc-lime); }
.wcp-page__btn[disabled] { opacity: 0.3; cursor: not-allowed; }
/* Pagination ellipsis separator — sits between page buttons, NOT a button,
   no polygon shape, no inner box. */
.wcp-page__sep {
  display: inline-grid; place-items: center;
  min-width: 28px; height: 28px;
  color: var(--wc-ink-4);
  font: 700 13px var(--wc-font-mono);
  letter-spacing: 0.08em;
  -webkit-user-select: none;
  user-select: none;
}

.wcp-crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
}
.wcp-crumb a { color: var(--wc-ink-3); text-decoration: none; transition: color 180ms; }
.wcp-crumb a:hover { color: var(--wc-lime); }
.wcp-crumb__sep { color: var(--wc-ink-5); }
.wcp-crumb__current { color: var(--wc-lime); }

.wcp-stepper {
  display: flex; align-items: center; gap: 12px;
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wcp-stepper__step {
  display: flex; align-items: center; gap: 10px;
  color: var(--wc-ink-4);
}
.wcp-stepper__step.done { color: var(--wc-ink-2); }
.wcp-stepper__step.active { color: var(--wc-lime); }
/* WIZARD STEP DOT — brand slide-step polygon (cut corners) instead of a
   plain square. Ring+inner pattern: background = currentColor (the ring),
   ::before = #1a1a1a inner inset 1px (creates the hollow look for default
   numbered dots). Done/active states fill the inner ::before with lime so
   the dot reads solid. */
.wcp-stepper__dot {
  position: relative;
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  background: currentColor;
  font: 800 11px var(--wc-font-mono);
  color: currentColor;                       /* parent inherits step color */
  --slide-w: 5px;
  --slide-h: 5px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  isolation: isolate;
}
.wcp-stepper__dot::before {
  content: "";
  position: absolute; inset: 1px;
  background: #1a1a1a;
  clip-path: inherit;
  z-index: -1;
  transition: background 200ms;
}
.wcp-stepper__dot > * { position: relative; z-index: 1; color: inherit; }
.wcp-stepper__dot {
  /* number text needs to override inherit because parent's `color` is the
     ring color; the number itself wants to read the step color too. */
  color: var(--wc-ink-3);
}
.wcp-stepper__step.done .wcp-stepper__dot,
.wcp-stepper__step.active .wcp-stepper__dot {
  background: var(--wc-lime);
  color: var(--wc-ground);
}
.wcp-stepper__step.done .wcp-stepper__dot::before,
.wcp-stepper__step.active .wcp-stepper__dot::before {
  background: var(--wc-lime);                /* fills the inner so dot reads solid */
}
.wcp-stepper__step.active .wcp-stepper__dot {
  filter: drop-shadow(0 0 8px rgba(184, 255, 56, 0.65));
}
.wcp-stepper__bar {
  flex: 1; height: 1px; background: var(--wc-ink-5);
  margin: 0 -4px;
}

/* ============================================================
 * 12. OVERLAYS — tooltip, popover, modal, drawer, command palette, bottom sheet
 * ============================================================ */
.wcp-tooltip {
  position: relative;
  display: inline-block;
}
.wcp-tooltip__tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--wc-ground);
  border: 1px solid var(--wc-lime);
  padding: 6px 10px;
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-lime);
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
/* Arrow geometry: 8×8 square rotated 45° = diamond. After CW rotation:
     border-top    → NE edge of diamond (top-right side)
     border-right  → SE edge (bottom-right side)
     border-bottom → SW edge (bottom-left side)
     border-left   → NW edge (top-left side)
   To make the arrow point toward the trigger, show the TWO edges adjacent
   to the visible corner: */
.wcp-tooltip__tip::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  background: var(--wc-ground);
  /* default = TOP variant — arrow points DOWN (bottom corner visible) */
  bottom: -4px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid var(--wc-lime);
  border-bottom: 1px solid var(--wc-lime);
}
/* BOTTOM variant — tooltip below trigger, arrow points UP */
.wcp-tooltip__tip--bottom {
  bottom: auto;
  top: calc(100% + 6px);
}
.wcp-tooltip__tip--bottom::after {
  bottom: auto; top: -4px;
  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid var(--wc-lime);
  border-left: 1px solid var(--wc-lime);
}
/* LEFT variant — tooltip on the LEFT of trigger, arrow points RIGHT */
.wcp-tooltip__tip--left {
  bottom: auto; top: 50%;
  left: auto; right: calc(100% + 6px);
  transform: translateY(-50%);
}
.wcp-tooltip__tip--left::after {
  bottom: auto; top: 50%;
  left: auto; right: -4px;
  transform: translateY(-50%) rotate(45deg);
  border-bottom: 0;
  border-top: 1px solid var(--wc-lime);
  border-right: 1px solid var(--wc-lime);
}
/* RIGHT variant — tooltip on the RIGHT of trigger, arrow points LEFT */
.wcp-tooltip__tip--right {
  bottom: auto; top: 50%;
  left: calc(100% + 6px);
  transform: translateY(-50%);
}
.wcp-tooltip__tip--right::after {
  bottom: auto; top: 50%;
  left: -4px;
  transform: translateY(-50%) rotate(45deg);
  border-right: 0;
  border-left: 1px solid var(--wc-lime);
  border-bottom: 1px solid var(--wc-lime);
}

/* LOCKED CARD RULE — every card uses slide-step-b: 4 slide cuts on the
   corners + one tab on an edge. Popover tab on BOTTOM (matches button family). */
.wcp-popover {
  position: absolute;
  z-index: 100;
  background: var(--wc-line);                  /* ring color */
  border: 0;
  padding: 14px 14px 18px;                     /* extra bottom pad for tab */
  min-width: 220px;
  font: 500 12px var(--wc-font-mono);
  color: var(--wc-ink-2);
  --slide-w: 8px; --slide-h: 8px;
  --step-x: 50%;
  --step-d: 6px;
  --step-slope-w: 8px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  transform-origin: top center;
  animation: wcp-pop-in 220ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
  isolation: isolate;
}
.wcp-popover::before {
  content: "";
  position: absolute; inset: 1px;
  background: var(--wc-ground);                /* inner color */
  clip-path: inherit;
  z-index: -1;
  pointer-events: none;
}
.wcp-popover > * { position: relative; z-index: 1; }
@keyframes wcp-pop-in {
  from { opacity: 0; transform: scaleY(0.85) translateY(-4px); }
  to   { opacity: 1; transform: scaleY(1) translateY(0); }
}
.wcp-popover .wcp-cmd__item,
.wcp-popover [data-pop-item] {
  transition: background 160ms, color 160ms, padding-left 160ms;
}
.wcp-popover .wcp-cmd__item:hover,
.wcp-popover [data-pop-item]:hover {
  padding-left: 22px;
}

.wcp-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: grid; place-items: center;
  background: rgba(14, 6, 27, 0.78);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  animation: wcp-fade 200ms ease-out;
}
.wcp-modal__panel {
  position: relative;
  width: min(540px, 92vw);
  background: var(--wc-line);                  /* ring color */
  border: 0;
  padding: 24px 24px 32px;                     /* extra bottom pad for tab */
  --slide-w: 14px; --slide-h: 14px;
  --step-x: 50%;
  --step-d: 10px;
  --step-slope-w: 12px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  isolation: isolate;
}
.wcp-modal__panel::before {
  content: "";
  position: absolute; inset: 1px;
  background: var(--wc-ground);                /* inner color */
  clip-path: inherit;
  z-index: -1;
  pointer-events: none;
}
.wcp-modal__panel > * { position: relative; z-index: 1; }
.wcp-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.wcp-modal__title {
  font: 800 18px var(--wc-font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--wc-ink-1);
}
.wcp-modal__close {
  background: transparent; border: 0;
  color: var(--wc-ink-3); cursor: pointer;
  font: 800 18px var(--wc-font-mono);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  transition: color 180ms;
}
.wcp-modal__close:hover { color: var(--wc-orange); }
.wcp-modal__body {
  font: 500 13px var(--wc-font-mono);
  color: var(--wc-ink-2); line-height: 1.6;
  margin-bottom: 20px;
}
.wcp-modal__actions {
  display: flex; gap: 10px; justify-content: flex-end;
}

/* DRAWER — slide-step-b polygon with tab on the LEFT edge (the visible
   side facing the user, since the drawer is anchored to the right of the
   viewport). Slide cuts on the top-left + bottom-left corners; right edge
   stays flush against the screen edge. */
.wcp-drawer {
  position: fixed; top: 0; bottom: 0;
  right: 0;
  z-index: 1000;
  width: min(420px, 92vw);
  background: var(--wc-line);                  /* ring color */
  border: 0;
  padding: 24px 24px 24px 36px;                /* extra LEFT for tab area */
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.7);
  animation: wcp-slide-l 240ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
  --slide-w: 14px; --slide-h: 14px;
  --tab-y: 50%;
  --tab-d: 12px;
  --tab-slope-h: 14px;
  clip-path: polygon(
    var(--slide-w) 0,                                                    /* top-left after slide-w */
    100% 0,                                                              /* top-right (flush) */
    100% 100%,                                                           /* bottom-right (flush) */
    var(--slide-w) 100%,                                                 /* bottom-left after slide-w */
    0 calc(100% - var(--slide-h)),                                       /* left edge bottom-slide */
    var(--tab-d) calc(var(--tab-y) + var(--tab-slope-h) + var(--tab-slope-h)/2),  /* up to tab base */
    var(--tab-d) calc(var(--tab-y) + var(--tab-slope-h)/2),                       /* tab right base */
    0 var(--tab-y),                                                      /* tab tip pointing LEFT */
    var(--tab-d) calc(var(--tab-y) - var(--tab-slope-h)/2),                       /* tab left base */
    var(--tab-d) calc(var(--tab-y) - var(--tab-slope-h) - var(--tab-slope-h)/2),  /* down to corner */
    0 var(--slide-h));                                                   /* left edge top-slide */
  isolation: isolate;
}
.wcp-drawer::before {
  content: "";
  position: absolute; inset: 1px;
  background: var(--wc-ground);                /* inner */
  clip-path: inherit;
  z-index: -1;
  pointer-events: none;
}
.wcp-drawer > * { position: relative; z-index: 1; }
@keyframes wcp-slide-l {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.wcp-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wc-line);
}
.wcp-drawer__title {
  font: 800 16px var(--wc-font-display);
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--wc-ink-1);
}

/* BOTTOM SHEET — slide-step-b polygon with tab on the TOP edge (matches
   the drag-handle area, since the bottom is anchored to the screen edge). */
.wcp-bsheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: var(--wc-line);                  /* ring color */
  border: 0;
  padding: 36px 24px 24px;                     /* extra TOP pad for tab */
  --slide-w: 18px; --slide-h: 18px;
  --step-x: 50%;
  --step-d: 12px;
  --step-slope-w: 14px;
  clip-path: polygon(
    0 calc(var(--step-d) + var(--slide-h)),                                  /* left edge below tab+slide */
    var(--slide-w) calc(var(--step-d)),                                      /* top-left after slide */
    calc(var(--step-x) - var(--step-slope-w)) var(--step-d),                 /* tab left base */
    var(--step-x) 0,                                                         /* tab tip pointing UP */
    calc(var(--step-x) + var(--step-slope-w)) var(--step-d),                 /* tab right base */
    calc(100% - var(--slide-w)) var(--step-d),                               /* top-right before slide */
    100% calc(var(--step-d) + var(--slide-h)),                               /* top-right after slide */
    100% 100%,                                                               /* bottom-right (flush) */
    0 100%);                                                                 /* bottom-left (flush) */
  animation: wcp-slide-u 240ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
  isolation: isolate;
}
.wcp-bsheet::before {
  content: "";
  position: absolute; inset: 1px;
  background: var(--wc-ground);                /* inner */
  clip-path: inherit;
  z-index: -1;
  pointer-events: none;
}
.wcp-bsheet > * { position: relative; z-index: 1; }
@keyframes wcp-slide-u {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.wcp-bsheet__handle {
  width: 48px; height: 4px;
  background: var(--wc-line);
  margin: 0 auto 16px;
}

.wcp-cmd {
  position: relative;
  background: var(--wc-lime);                  /* ring color — lime for command palette */
  border: 0;
  padding: 0 0 8px;                            /* bottom pad for tab */
  width: min(560px, 92vw);
  font: 500 12px var(--wc-font-mono);
  color: var(--wc-ink-1);
  --slide-w: 10px; --slide-h: 10px;
  --step-x: 50%;
  --step-d: 8px;
  --step-slope-w: 10px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.7);
  isolation: isolate;
}
.wcp-cmd::before {
  content: "";
  position: absolute; inset: 1px;
  background: var(--wc-ground);                /* inner color */
  clip-path: inherit;
  z-index: -1;
  pointer-events: none;
}
.wcp-cmd > * { position: relative; z-index: 1; }
.wcp-cmd__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--wc-line);
  padding: 14px 18px;
  color: var(--wc-ink-1);
  font: 700 14px var(--wc-font-mono);
  letter-spacing: 0.06em;
  outline: none;
}
.wcp-cmd__input::placeholder { color: var(--wc-ink-4); letter-spacing: 0.12em; text-transform: uppercase; }
.wcp-cmd__list {
  list-style: none; padding: 6px 0; margin: 0;
}
.wcp-cmd__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  font: 700 11px var(--wc-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wc-ink-2);
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.wcp-cmd__item:hover,
.wcp-cmd__item.active {
  background: rgba(184, 255, 56, 0.07);
  color: var(--wc-lime);
}
.wcp-cmd__hint {
  margin-left: auto;
  color: var(--wc-ink-4);
  font-weight: 500; letter-spacing: 0.06em;
  text-transform: none;
}

@keyframes wcp-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
 * 13. DATA — tables, KPI tiles, code, charts
 * ============================================================ */
.wcp-table {
  width: 100%;
  border-collapse: collapse;
  font: 500 12px var(--wc-font-mono);
  color: var(--wc-ink-2);
  background: #1a1a1a;
}
.wcp-table thead th {
  text-align: left;
  padding: 10px 14px;
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
  border-bottom: 1px solid var(--wc-line);
  background: rgba(31, 14, 51, 0.5);
}
.wcp-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--wc-line-soft);
}
.wcp-table tbody tr:hover { background: rgba(184, 255, 56, 0.04); color: var(--wc-ink-1); }
.wcp-table tbody tr.selected { background: rgba(184, 255, 56, 0.08); color: var(--wc-lime); }
.wcp-table tbody tr:last-child td { border-bottom: 0; }
.wcp-table .num { font-variant-numeric: tabular-nums; text-align: right; }

/* LOCKED CARD RULE — KPI tiles use slide-step-b same as .wcp-card. */
.wcp-kpi {
  background: #1a1a1a;
  padding: 18px 20px 24px;
  display: flex; flex-direction: column; gap: 6px;
  --slide-w: 10px; --slide-h: 10px;
  --step-x: 50%;
  --step-d: 6px;
  --step-slope-w: 10px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
.wcp-kpi__label {
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
}
/* Hero KPI number — brand DISPLAY font (Orbitron) so it reads as a
   tactical headline number, not as plain mono. tabular-nums keeps the
   digit advance widths consistent across rows. */
.wcp-kpi__value {
  font: 800 34px/1 var(--wc-font-display);
  color: var(--wc-ink-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.wcp-kpi__delta {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.08em;
  color: var(--wc-lime);
}
.wcp-kpi__delta.neg { color: var(--wc-crit); }
.wcp-kpi__delta.warn { color: var(--wc-orange); }
.wcp-kpi__delta.neutral { color: var(--wc-ink-3); }

/* LOCKED CARD RULE — code block uses slide-step-b like .wcp-card. Border
   dropped since the polygon is the silhouette. Must be display: block so
   clip-path + padding work; <code> is inline by default. white-space:pre
   preserves the source formatting since we're wrapping with <pre><code>. */
.wcp-code {
  display: block;
  position: relative;
  background: var(--wc-ground);
  border: 0;
  padding: 14px 18px 22px;
  font: 500 12px/1.6 var(--wc-font-mono);
  color: var(--wc-ink-2);
  white-space: pre;
  overflow-x: auto;
  --slide-w: 10px; --slide-h: 10px;
  --step-x: 50%; --step-d: 6px; --step-slope-w: 10px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
/* <pre> wrapping the code block — kill default margin so the polygon
   sits flush with the section spacing. */
pre:has(.wcp-code) { margin: 0; }
.wcp-code .k  { color: var(--wc-lime);   font-weight: 700; }
.wcp-code .s  { color: var(--wc-orange); }
.wcp-code .c  { color: var(--wc-ink-4); }
.wcp-code .n  { color: var(--wc-purple-bright); }

/* LOCKED CARD RULE — chart cards use slide-step-b like .wcp-card. */
.wcp-chart {
  position: relative;
  background: #1a1a1a;
  padding: 16px 16px 22px;
  --slide-w: 10px; --slide-h: 10px;
  --step-x: 50%; --step-d: 6px; --step-slope-w: 10px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  transition: background 300ms var(--wc-ease-out), transform 240ms var(--wc-ease-out);
}
.wcp-chart__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.wcp-chart__title {
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
}
.wcp-chart__legend {
  display: inline-flex; align-items: center; gap: 14px;
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
}
.wcp-chart__legend span::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px;
  background: currentColor;
  margin-right: 6px; vertical-align: middle;
}
.wcp-chart__legend .lime { color: var(--wc-lime); }
.wcp-chart__legend .orange { color: var(--wc-orange); }
.wcp-chart__legend .purple { color: var(--wc-purple-bright); }
.wcp-chart svg { width: 100%; height: auto; }
.wcp-chart svg .axis { stroke: var(--wc-ink-5); stroke-width: 1; }
.wcp-chart svg .grid { stroke: var(--wc-ink-5); stroke-width: 1; opacity: 0.35; }
.wcp-chart svg .lime-line   { fill: none; stroke: var(--wc-lime);   stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(184, 255, 56, 0.55)); }
.wcp-chart svg .orange-line { fill: none; stroke: var(--wc-orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(255, 106, 0, 0.55)); }
.wcp-chart svg .purple-line { fill: none; stroke: var(--wc-purple-bright); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wcp-chart svg .lime-area   { fill: rgba(184, 255, 56, 0.18); }
.wcp-chart svg .orange-area { fill: rgba(255, 106, 0, 0.16); }
.wcp-chart svg .bar-lime   { fill: var(--wc-lime); }
.wcp-chart svg .bar-orange { fill: var(--wc-orange); }
.wcp-chart svg .bar-purple { fill: var(--wc-purple-bright); }
.wcp-chart svg .donut-track { fill: none; stroke: var(--wc-ink-5); stroke-width: 14; }
.wcp-chart svg .donut-fill  { fill: none; stroke: var(--wc-lime); stroke-width: 14; stroke-linecap: butt;
                              filter: drop-shadow(0 0 6px rgba(184, 255, 56, 0.4)); }

/* ============================================================
 * 14. MEDIA — image card, video, audio waveform, gallery, avatar
 * ============================================================ */
/* LOCKED CARD RULE — image cards use slide-step-b. */
.wcp-img {
  position: relative;
  background: #1a1a1a;
  --slide-w: 10px; --slide-h: 10px;
  --step-x: 50%; --step-d: 6px; --step-slope-w: 10px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  overflow: hidden;
  transition: transform 240ms var(--wc-ease-out), filter 240ms var(--wc-ease-out);
}
/* Lift handled by .wcp-card-autowrap so beam + halo + splats animate as one unit. */
.wcp-img__placeholder {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(90, 46, 128, 0.4), rgba(139, 77, 196, 0.18)),
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(139, 77, 196, 0.05) 8px 9px);
  color: var(--wc-purple-bright);
  font: 800 22px var(--wc-font-mono);
  letter-spacing: 0.04em;
}
.wcp-img__cap {
  padding: 10px 14px;
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
}

/* LOCKED CARD RULE — video frame uses slide-step-b. */
.wcp-video {
  position: relative;
  background: var(--wc-ground);
  padding: 12px 12px 20px;
  --slide-w: 12px; --slide-h: 12px;
  --step-x: 50%; --step-d: 8px; --step-slope-w: 12px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  transition: transform 240ms var(--wc-ease-out), filter 240ms var(--wc-ease-out);
}
/* Lift handled by .wcp-card-autowrap. */
.wcp-video__frame {
  aspect-ratio: 16 / 9;
  background: #000;
  display: grid; place-items: center;
  font: 800 48px var(--wc-font-mono);
  color: var(--wc-lime);
}
.wcp-video__bar {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.06em;
  color: var(--wc-ink-3);
}
.wcp-video__seek {
  flex: 1; height: 4px;
  background: var(--wc-ink-5);
  position: relative;
}
.wcp-video__seek::after {
  content: ""; position: absolute;
  top: 0; left: 0; height: 100%;
  width: 38%;
  background: var(--wc-lime);
}

.wcp-wave {
  display: flex; align-items: flex-end; gap: 2px;
  height: 48px;
}
.wcp-wave__bar {
  width: 3px;
  background: var(--wc-lime);
  flex: 1;
  min-width: 2px;
  opacity: 0.65;
}
.wcp-wave__bar.high { opacity: 1; }
.wcp-wave__bar.low  { opacity: 0.35; }

.wcp-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
/* Gallery thumbs — slide-step-b (cut corners + shallow tab). Polygon uses
   PERCENTAGE values (not pixels) so the SVG selection ring (which traces
   the same percentages in a stretched viewBox) lines up perfectly at any
   cell size. */
.wcp-gallery__cell {
  aspect-ratio: 1;
  background-color: #1a1a1a;           /* solid base — blocks page bg */
  background-image:
    linear-gradient(135deg, rgba(90, 46, 128, 0.95), rgba(139, 77, 196, 0.6));
  position: relative;
  clip-path: polygon(
    0 5%,
    5% 0,
    95% 0,
    100% 5%,
    100% 91%,
    95% 96%,
    55% 96%,
    50% 100%,
    5% 100%,
    0 95%);
  transition: filter 220ms var(--wc-ease-out);
}
.wcp-gallery__cell--lime {
  background-image: linear-gradient(135deg, rgba(184, 255, 56, 0.7), rgba(184, 255, 56, 0.25));
}
.wcp-gallery__cell--orange {
  background-image: linear-gradient(135deg, rgba(255, 106, 0, 0.7), rgba(255, 106, 0, 0.25));
}
.wcp-gallery__cell--ground {
  background-image: linear-gradient(135deg, rgba(31, 14, 51, 0.95), rgba(90, 46, 128, 0.7));
}
.wcp-gallery__cell:hover {
  filter: brightness(1.18);
}

/* Selected state — SVG polygon ring uses the EXACT same percentages as
   the cell's clip-path polygon. Both align at any cell size since both
   use %. */
.wcp-gallery__cell.selected::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon points='0,5 5,0 95,0 100,5 100,91 95,96 55,96 50,100 5,100 0,95' fill='none' stroke='%23B8FF38' stroke-width='2' vector-effect='non-scaling-stroke'/></svg>")
    center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 6px rgba(184, 255, 56, 0.55));
}

.wcp-avatar {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  background: var(--wc-purple);
  color: var(--wc-ink-1);
  font: 800 12px var(--wc-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  --slide-w: 4px; --slide-h: 4px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
.wcp-avatar--lg { width: 48px; height: 48px; font-size: 14px; }
.wcp-avatar--sm { width: 28px; height: 28px; font-size: 10px; }
.wcp-avatar--lime { background: var(--wc-lime); color: var(--wc-ground); }
.wcp-avatar--orange { background: var(--wc-orange); color: var(--wc-ink-1); }
.wcp-avatar-group { display: inline-flex; }
.wcp-avatar-group .wcp-avatar + .wcp-avatar { margin-left: -10px; box-shadow: -2px 0 0 var(--wc-bg); }

/* ============================================================
 * 15. PANELS — notched info panel (smaller than .wc2-notch)
 * ============================================================ */
/* LOCKED CARD RULE — notched panels keep the top notch (it's their
   identity) AND add the slide-step-b tab on the bottom. */
.wcp-panel {
  position: relative;
  background: #1a1a1a;
  padding: 18px 18px 26px;
  --slide-w: 10px; --slide-h: 10px;
  --step-x: 50%; --step-d: 6px; --step-slope-w: 10px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(50% - 50px) 0,
    calc(50% - 36px) 10px,
    calc(50% + 36px) 10px,
    calc(50% + 50px) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--step-d) - var(--slide-h)),
    calc(100% - var(--slide-w)) calc(100% - var(--step-d)),
    calc(var(--step-x) + var(--step-slope-w)) calc(100% - var(--step-d)),
    var(--step-x) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
  transition: background 300ms var(--wc-ease-out), transform 240ms var(--wc-ease-out), filter 240ms var(--wc-ease-out);
}
/* Panel lift handled by .wcp-card-autowrap. */
.wcp-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  padding-top: 4px;
}
.wcp-panel__title {
  font: 800 12px var(--wc-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wc-ink-1);
}
.wcp-panel__close {
  background: transparent; border: 0;
  color: var(--wc-ink-3); cursor: pointer;
  font: 800 14px var(--wc-font-mono);
  transition: color 180ms;
}
.wcp-panel__close:hover { color: var(--wc-orange); }
.wcp-panel__body {
  font: 500 11px var(--wc-font-mono);
  color: var(--wc-ink-3);
  line-height: 1.55;
}

/* ============================================================
 * 16. KIT NAV STRIP — shared across all pages
 * ============================================================ */
.wcp-kitnav {
  position: sticky; top: 55px;
  z-index: 90;
  background: #1a1a1a;
  border-bottom: 1px solid var(--wc-line);
  padding: 10px 40px;
  overflow-x: auto;
}
.wcp-kitnav__inner {
  display: flex; gap: 6px;
  max-width: 1280px; margin: 0 auto;
}
.wcp-kitnav a {
  white-space: nowrap;
  padding: 6px 14px;
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
  text-decoration: none;
  transition: color 180ms, background 180ms;
  --slide-w: 4px; --slide-h: 4px;
  clip-path: polygon(
    0 var(--slide-h),
    var(--slide-w) 0,
    calc(100% - var(--slide-w)) 0,
    100% var(--slide-h),
    100% calc(100% - var(--slide-h)),
    calc(100% - var(--slide-w)) 100%,
    var(--slide-w) 100%,
    0 calc(100% - var(--slide-h)));
}
.wcp-kitnav a:hover { color: var(--wc-lime); background: rgba(184, 255, 56, 0.06); }
.wcp-kitnav a.active {
  color: var(--wc-ground);
  background: var(--wc-lime);
}