/* ============================================================
 * WC // UI KIT v2 — WIDGETS
 * Telemetry widgets: rings, multi-segment bars, status chips,
 * buttons, inputs, indicators, action wheel.
 * ============================================================ */

/* ============ STATUS CHIP ============ */
.wc2-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 18px;
  padding: 0 7px;
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
  border: 1px solid var(--wc-line);
  background: rgba(31, 14, 51, 0.65);
  white-space: nowrap;
}
.wc2-chip__dot { width: 5px; height: 5px; background: currentColor; }
.wc2-chip.ok   { color: var(--wc-ok);   border-color: var(--wc-ok); }
.wc2-chip.warn { color: var(--wc-warn); border-color: var(--wc-warn); }
.wc2-chip.crit { color: var(--wc-crit); border-color: var(--wc-crit); background: rgba(255, 61, 92, 0.10); }
.wc2-chip.live {
  color: var(--wc-ground);
  background: var(--wc-lime);
  border-color: var(--wc-lime);
  box-shadow: var(--wc-glow-lime);
}
.wc2-chip.live .wc2-chip__dot { background: var(--wc-ground); animation: wc2-blink 1.1s ease-in-out infinite; }
@keyframes wc2-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============ BUTTON ============
   Tactical HUD scale (compact, mono), now wearing the brand slide-step-b
   polygon (slide cuts + wide-60% + shallow-3px tab) so every button across
   v2 reads as the same family — same tab rule as .wc2-ccbtn, just smaller. */
.wc2-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 9px;                        /* extra bottom pad for tab */
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--wc-ink-2);
  background: rgba(31, 14, 51, 0.65);
  border: 0;                                    /* polygon does the framing */
  cursor: pointer;
  transition: filter var(--wc-dur-fast) var(--wc-ease-out),
              transform var(--wc-dur-fast) var(--wc-ease-out),
              background var(--wc-dur-fast) var(--wc-ease-out),
              color var(--wc-dur-fast) var(--wc-ease-out);
  position: relative;
  user-select: none;
  --slide-w: 6px;
  --slide-h: 6px;
  --step-x: 60%;
  --step-d: 3px;
  --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)));
}
/* Left accent stripe (kept from the original .wc2-btn design — appears on
   hover, doesn't compete with the polygon since it's inside the clip). */
.wc2-btn::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 0; background: var(--wc-lime);
  transition: width var(--wc-dur-base) var(--wc-ease-out);
}
.wc2-btn:hover {
  color: var(--wc-ink-1);
  background: rgba(184, 255, 56, 0.10);
  filter: drop-shadow(0 0 6px rgba(184, 255, 56, 0.35));
}
.wc2-btn:hover::before { width: 3px; }
.wc2-btn:active { transform: translateY(1px); }
.wc2-btn.primary {
  color: var(--wc-ground);
  background: var(--wc-lime);
  filter: drop-shadow(0 0 6px rgba(184, 255, 56, 0.4));
}
.wc2-btn.primary:hover { background: var(--wc-ok); filter: drop-shadow(0 0 10px rgba(184, 255, 56, 0.7)); }
.wc2-btn.primary::before { display: none; }
.wc2-btn.danger {
  color: var(--wc-orange);
  background: rgba(255, 106, 0, 0.10);
}
.wc2-btn.danger:hover {
  color: var(--wc-ground);
  background: var(--wc-orange);
  filter: drop-shadow(0 0 8px rgba(255, 106, 0, 0.6));
}
.wc2-btn.danger::before { background: var(--wc-orange); }
.wc2-btn.ghost { background: transparent; }
.wc2-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* Icon variant — square, no tab (icon-only buttons keep simple slide-step). */
.wc2-btn.icon {
  width: 26px; height: 26px; padding: 0; justify-content: center;
  --step-d: 0px; --step-slope-w: 0px;
}
.wc2-btn:disabled, .wc2-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

.wc2-btn-row { display: inline-flex; gap: 4px; }

/* ============ INPUT ============ */
.wc2-input {
  display: flex; align-items: center; gap: 6px;
  height: 26px;
  padding: 0 8px;
  background: rgba(14, 6, 27, 0.85);
  border: 1px solid var(--wc-line);
  font: 500 12px var(--wc-font-mono);
  color: var(--wc-ink-1);
  letter-spacing: 0.02em;
  width: 100%;
  transition: border-color var(--wc-dur-fast);
}
.wc2-input:focus-within { border-color: var(--wc-lime); box-shadow: 0 0 0 1px var(--wc-lime), 0 0 16px rgba(184, 255, 56, 0.15); }
.wc2-input input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--wc-ink-1); font: inherit;
}
.wc2-input input::placeholder { color: var(--wc-ink-4); }
.wc2-input svg { width: 12px; height: 12px; color: var(--wc-ink-4); fill: none; stroke: currentColor; stroke-width: 2; }

/* ============ MULTI-SEGMENT BAR (HP/shield/armor style) ============ */
.wc2-segbar {
  display: flex; flex-direction: column; gap: 3px;
}
.wc2-segbar__row { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; }
.wc2-segbar__label {
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
}
.wc2-segbar__track {
  position: relative;
  height: 10px;
  background: var(--wc-bg-1);
  border: 1px solid var(--wc-line);
  overflow: hidden;
  display: flex;
  gap: 1px;
  padding: 1px;
}
.wc2-segbar__seg {
  flex: 1; height: 100%;
  background: rgba(184, 255, 56, 0.10);
  transition: background var(--wc-dur-fast);
}
.wc2-segbar__seg.lit { background: var(--wc-lime); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.wc2-segbar__seg.warn { background: var(--wc-warn); }
.wc2-segbar__seg.crit { background: var(--wc-crit); }
.wc2-segbar__val {
  font: 700 10px var(--wc-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--wc-ink-1);
  min-width: 44px; text-align: right;
}
.wc2-segbar__val em { font-style: normal; color: var(--wc-ink-4); font-size: 9px; margin-left: 3px; }

/* ============ RING (circular % indicator — capacitor style) ============ */
.wc2-ring {
  position: relative;
  width: 110px; height: 110px;
}
.wc2-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wc2-ring circle { fill: none; }
.wc2-ring .track { stroke: var(--wc-bg-3); stroke-width: 8; }
.wc2-ring .fill  { stroke: var(--wc-lime); stroke-width: 8; stroke-linecap: butt; transition: stroke-dashoffset var(--wc-dur-slow) var(--wc-ease-out); }
.wc2-ring.warn .fill { stroke: var(--wc-warn); }
.wc2-ring.crit .fill { stroke: var(--wc-crit); }
.wc2-ring__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--wc-font-mono);
}
.wc2-ring__pct {
  font: 800 22px var(--wc-font-display);
  letter-spacing: -0.02em;
  color: var(--wc-lime);
  line-height: 1;
}
.wc2-ring.warn .wc2-ring__pct { color: var(--wc-warn); }
.wc2-ring.crit .wc2-ring__pct { color: var(--wc-crit); }
.wc2-ring__lbl {
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
  margin-top: 2px;
}

/* Tick marks around the ring (sci-fi convention) */
.wc2-ring__ticks { position: absolute; inset: 0; pointer-events: none; }
.wc2-ring__tick {
  position: absolute;
  left: 50%; top: 0;
  width: 1px; height: 6px;
  background: var(--wc-ink-5);
  transform-origin: center 55px;
}

/* ============ SIGNAL BARS (radio strength style) ============ */
.wc2-signal {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 14px;
}
.wc2-signal span {
  display: inline-block;
  width: 3px;
  background: var(--wc-ink-5);
}
.wc2-signal span:nth-child(1) { height: 4px; }
.wc2-signal span:nth-child(2) { height: 7px; }
.wc2-signal span:nth-child(3) { height: 10px; }
.wc2-signal span:nth-child(4) { height: 13px; }
.wc2-signal.s2 span:nth-child(1),
.wc2-signal.s2 span:nth-child(2) { background: var(--wc-lime); }
.wc2-signal.s3 span:nth-child(1),
.wc2-signal.s3 span:nth-child(2),
.wc2-signal.s3 span:nth-child(3) { background: var(--wc-lime); }
.wc2-signal.s4 span { background: var(--wc-lime); }
.wc2-signal.s4 span { box-shadow: 0 0 4px var(--wc-lime); }
.wc2-signal.warn span { background: var(--wc-ink-5); }
.wc2-signal.warn span:nth-child(1) { background: var(--wc-warn); }

/* ============ NUMERIC READOUT (big tactical number) ============ */
.wc2-readout {
  font-family: var(--wc-font-display);
  font-size: var(--wc-text-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--wc-ink-1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.wc2-readout em { font-style: normal; font-size: 11px; font-family: var(--wc-font-mono); color: var(--wc-ink-4); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.wc2-readout.ok   { color: var(--wc-ok); }
.wc2-readout.warn { color: var(--wc-warn); }
.wc2-readout.crit { color: var(--wc-crit); }

/* ============ ACTION DOCK (bottom HUD button strip) ============ */
/* DOCK — wrapped in the card family: slide-step-b bottom-tab shape so it
   reads like a panel from the same kit. */
.wc2-dock {
  display: inline-flex;
  position: relative;
  --slide-w: 10px;
  --slide-h: 10px;
  --step-x: 50%;
  --step-d: 8px;
  --step-slope-w: 8px;
  background: var(--wc-line);                /* outline ring */
  padding: 6px 8px calc(var(--step-d) + 6px);
  gap: 6px;
  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)));
}
.wc2-dock::before {
  content: "";
  position: absolute; inset: 0;
  background: #1a1a1a;                  /* LOCKED card rule — default dark grey */
  pointer-events: none;
  z-index: 0;
  clip-path: polygon(
    1px calc(var(--slide-h) + 1px),
    calc(var(--slide-w) + 1px) 1px,
    calc(100% - var(--slide-w) - 1px) 1px,
    calc(100% - 1px) calc(var(--slide-h) + 1px),
    calc(100% - 1px) calc(100% - var(--step-d) - var(--slide-h) - 1px),
    calc(100% - var(--slide-w) - 1px) calc(100% - var(--step-d) - 1px),
    calc(var(--step-x) + var(--step-slope-w) - 1px) calc(100% - var(--step-d) - 1px),
    calc(var(--step-x) - 1px) calc(100% - 1px),
    calc(var(--slide-w) + 1px) calc(100% - 1px),
    1px calc(100% - var(--slide-h) - 1px));
}
.wc2-dock > * { position: relative; z-index: 1; }

/* DOCK SLOTS — each icon box uses 4 corner slides matching the card family. */
.wc2-dock__slot {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  --slide-w: 6px;
  --slide-h: 6px;
  background: var(--wc-line-soft);            /* outline ring */
  color: var(--wc-ink-2);
  cursor: pointer;
  border: 0;
  transition: background 200ms var(--wc-ease-out), transform 200ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
  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)));
}
.wc2-dock__slot::before {
  content: "";
  position: absolute; inset: 0;
  background: #1a1a1a;                  /* LOCKED card rule — default dark grey */
  pointer-events: none;
  clip-path: polygon(
    1px calc(var(--slide-h) + 1px),
    calc(var(--slide-w) + 1px) 1px,
    calc(100% - var(--slide-w) - 1px) 1px,
    calc(100% - 1px) calc(var(--slide-h) + 1px),
    calc(100% - 1px) calc(100% - var(--slide-h) - 1px),
    calc(100% - var(--slide-w) - 1px) calc(100% - 1px),
    calc(var(--slide-w) + 1px) calc(100% - 1px),
    1px calc(100% - var(--slide-h) - 1px));
  transition: background 200ms var(--wc-ease-out);
}
.wc2-dock__slot > * { position: relative; z-index: 1; }
.wc2-dock__slot:hover {
  color: var(--wc-lime);
  background: var(--wc-lime);
  transform: translateY(-2px);
}
.wc2-dock__slot:hover::before { background: var(--wc-ground); }  /* LOCKED card rule — hover dark purple */
.wc2-dock__slot.active {
  color: var(--wc-ground);
  background: var(--wc-lime);
}
.wc2-dock__slot.active::before { background: var(--wc-lime); }
.wc2-dock__slot svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.wc2-dock__slot .key {
  position: absolute;
  bottom: 1px; right: 2px;
  font: 700 7px var(--wc-font-mono);
  letter-spacing: 0.12em;
  color: var(--wc-ink-4);
  pointer-events: none;
}
.wc2-dock__slot.active .key { color: var(--wc-ground); }

/* ============ ALERT BANNER ============ */
.wc2-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 5px 10px;
  background: rgba(255, 106, 0, 0.10);
  border: 1px solid var(--wc-orange);
  border-left-width: 3px;
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-ink-1);
}
.wc2-banner__title { color: var(--wc-orange); }
.wc2-banner__msg { color: var(--wc-ink-2); font-weight: 500; letter-spacing: 0.06em; text-transform: none; }
.wc2-banner__close {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--wc-ink-3);
  cursor: pointer;
}
.wc2-banner__close:hover { color: var(--wc-ink-1); }
.wc2-banner.ok    { background: rgba(184, 255, 56, 0.08); border-color: var(--wc-ok); }
.wc2-banner.ok .wc2-banner__title { color: var(--wc-ok); }
.wc2-banner.crit  { background: rgba(255, 61, 92, 0.10); border-color: var(--wc-crit); }
.wc2-banner.crit .wc2-banner__title { color: var(--wc-crit); }

/* ============ MINI-MAP (radar / sector overview) ============ */
.wc2-radar {
  position: relative;
  width: 100%; aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(184, 255, 56, 0.06), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0, transparent 11px, rgba(90, 46, 128, 0.08) 11px, rgba(90, 46, 128, 0.08) 12px),
    repeating-linear-gradient(90deg, transparent 0, transparent 11px, rgba(90, 46, 128, 0.08) 11px, rgba(90, 46, 128, 0.08) 12px);
  border: 1px solid var(--wc-line);
  overflow: hidden;
}
.wc2-radar::before, .wc2-radar::after {
  content: ""; position: absolute;
  background: var(--wc-line-soft);
}
.wc2-radar::before { top: 50%; left: 0; right: 0; height: 1px; }
.wc2-radar::after  { left: 50%; top: 0; bottom: 0; width: 1px; }
.wc2-radar__sweep {
  position: absolute; top: 0; left: 50%;
  width: 50%; height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(184, 255, 56, 0.18), transparent 75%);
  animation: wc2-sweep 4s linear infinite;
  pointer-events: none;
}
@keyframes wc2-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.wc2-radar__blip {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--wc-lime);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--wc-lime);
}
.wc2-radar__blip.warn { background: var(--wc-warn); box-shadow: 0 0 8px var(--wc-warn); }
.wc2-radar__blip.crit { background: var(--wc-crit); box-shadow: 0 0 10px var(--wc-crit); }
.wc2-radar__center {
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 10px;
  border: 1.5px solid var(--wc-ink-1);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ============ INVENTORY GRID (cargo slots) ============ */
.wc2-cargo {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  background: var(--wc-line);
  padding: 1px;
  border: 1px solid var(--wc-line);
}
.wc2-cargo__slot {
  aspect-ratio: 1;
  background: var(--wc-bg-1);
  display: grid; place-items: center;
  position: relative;
  cursor: pointer;
  transition: background var(--wc-dur-flash);
}
.wc2-cargo__slot:hover { background: var(--wc-bg-3); }
.wc2-cargo__slot.empty::after {
  content: "";
  width: 14px; height: 14px;
  border: 1px dashed var(--wc-ink-5);
}
.wc2-cargo__slot.filled svg {
  width: 14px; height: 14px;
  color: var(--wc-lime);
  fill: none; stroke: currentColor; stroke-width: 1.6;
}
.wc2-cargo__slot.filled.warn svg { color: var(--wc-warn); }
.wc2-cargo__slot.locked {
  background: rgba(31, 14, 51, 0.4);
  cursor: not-allowed;
}
.wc2-cargo__slot.locked::after {
  content: ""; position: absolute;
  width: 60%; height: 1px;
  background: var(--wc-ink-5);
  transform: rotate(-22deg);
}
.wc2-cargo__qty {
  position: absolute;
  bottom: 1px; right: 2px;
  font: 700 7px var(--wc-font-mono);
  color: var(--wc-ink-3);
  letter-spacing: 0.06em;
}

/* ============ TIMELINE / EVENT LOG ============ */
.wc2-log {
  font-family: var(--wc-font-mono);
  font-size: var(--wc-text-mono);
}
.wc2-log__entry {
  display: grid;
  grid-template-columns: 60px auto 1fr;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--wc-line-faint);
  font-variant-numeric: tabular-nums;
}
.wc2-log__entry .ts { color: var(--wc-ink-4); font-size: 10px; }
.wc2-log__entry .tg {
  font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wc-ok);
  border: 1px solid var(--wc-ok);
  padding: 0 4px; height: 14px; line-height: 13px;
}
.wc2-log__entry.warn .tg { color: var(--wc-warn); border-color: var(--wc-warn); }
.wc2-log__entry.crit .tg { color: var(--wc-crit); border-color: var(--wc-crit); }
.wc2-log__entry .msg { color: var(--wc-ink-2); font-size: 11px; }

/* ============ TARGET RETICLE (overlay) ============ */
.wc2-reticle {
  position: relative;
  width: 80px; height: 80px;
  border: 1px solid var(--wc-lime);
}
.wc2-reticle::before, .wc2-reticle::after {
  content: ""; position: absolute;
  background: var(--wc-lime);
}
.wc2-reticle::before {
  left: 50%; top: -5px; bottom: -5px;
  width: 1px; transform: translateX(-50%);
}
.wc2-reticle::after {
  top: 50%; left: -5px; right: -5px;
  height: 1px; transform: translateY(-50%);
}
.wc2-reticle__corner {
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--wc-lime);
}
.wc2-reticle__corner.tl { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.wc2-reticle__corner.tr { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; }
.wc2-reticle__corner.bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.wc2-reticle__corner.br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }
.wc2-reticle__lock {
  position: absolute; inset: 0;
  border: 1px solid var(--wc-lime);
  animation: wc2-lock 1.4s var(--wc-ease-out) infinite;
  opacity: 0;
}
@keyframes wc2-lock {
  0%   { transform: scale(1.4); opacity: 0; }
  50%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}

/* ============================================================
 * HUD PACK — 6 primitives inspired by sci-fi HUD vocabulary
 * Numbered callouts, chamfer boxes, hex labels, gauge dials,
 * EQ bars, warning triangle.
 * ============================================================ */

/* ---------- 1. Numbered leader callout ----------
   <div class="wc2-callout">
     <span class="wc2-callout__num">01</span>
     <span class="wc2-callout__line"></span>
     <div class="wc2-callout__body">
       <span class="wc2-callout__title">SUBSYSTEM</span>
       <p class="wc2-callout__desc">...</p>
     </div>
   </div>
*/
.wc2-callout {
  display: flex;
  align-items: center;
  gap: 0;
  font: 500 11px/1.45 var(--wc-font-mono);
}
.wc2-callout__num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--wc-lime);
  color: var(--wc-bg);
  font: 800 10px var(--wc-font-mono);
  letter-spacing: 0.04em;
}
.wc2-callout.orange .wc2-callout__num { background: var(--wc-orange); color: var(--wc-bg); }
.wc2-callout.purple .wc2-callout__num { background: var(--wc-purple); color: var(--wc-ink-1); }
.wc2-callout__line {
  position: relative;
  height: 1px;
  width: 18px;
  background: var(--wc-lime);
  flex-shrink: 0;
}
.wc2-callout.orange .wc2-callout__line { background: var(--wc-orange); }
.wc2-callout.purple .wc2-callout__line { background: var(--wc-purple); }
.wc2-callout__line::after {
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  background: inherit;
  border-radius: 50%;
}
.wc2-callout__body {
  flex: 1; min-width: 0;
  padding-left: 10px;
}
.wc2-callout__title {
  display: block;
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-ink-1);
  margin-bottom: 1px;
}
.wc2-callout.orange .wc2-callout__title { color: var(--wc-orange); }
.wc2-callout.purple .wc2-callout__title { color: var(--wc-purple-2, #a064d8); }
.wc2-callout__desc {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--wc-ink-3);
}

/* ---------- 2. Chamfered text box (45° cut corners) ----------
   <span class="wc2-chamfer">TEXT</span>
   Modifiers: .warn (orange), .crit, .ghost (no bg)
*/
.wc2-chamfer {
  --c: 9px;
  position: relative;
  display: inline-block;
  padding: 7px 14px;
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-ink-1);
  background: rgba(184, 255, 56, 0.06);
  clip-path: polygon(
    var(--c) 0, 100% 0,
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    0 100%, 0 var(--c));
}
.wc2-chamfer::before {
  content: "";
  position: absolute; inset: 0;
  padding: 1px;
  background: var(--wc-lime);
  pointer-events: none;
  clip-path: polygon(
    var(--c) 0, 100% 0,
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    0 100%, 0 var(--c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.wc2-chamfer.warn  { background: rgba(255, 106, 0, 0.06); color: var(--wc-orange); }
.wc2-chamfer.warn::before { background: var(--wc-orange); }
.wc2-chamfer.crit  { background: rgba(255, 50, 80, 0.08); color: var(--wc-crit); }
.wc2-chamfer.crit::before { background: var(--wc-crit); }
.wc2-chamfer.ghost { background: transparent; }

/* ---------- 3. Hex label (octagon-ish via clip-path) ----------
   <span class="wc2-hex">TXT</span>
   Modifiers: .outline (transparent fill, lime border)
*/
.wc2-hex {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 68px; height: 74px;
  font: 800 11px var(--wc-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-bg);
  background: var(--wc-lime);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.wc2-hex.outline {
  background: transparent;
  color: var(--wc-lime);
}
.wc2-hex.outline::before {
  content: "";
  position: absolute; inset: 0;
  padding: 1.5px;
  background: var(--wc-lime);
  pointer-events: none;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* ---------- 4. Gauge dial (segmented ring + ticks) ----------
   <div class="wc2-gauge" data-pct="74">
     <svg>...</svg>
     <div class="wc2-gauge__center">
       <span class="val">74</span>
       <span class="lbl">RPM</span>
     </div>
   </div>
*/
.wc2-gauge {
  position: relative;
  width: 100px; height: 100px;
  display: inline-grid;
  place-items: center;
}
.wc2-gauge svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.wc2-gauge svg .tick {
  stroke: var(--wc-ink-4);
  stroke-width: 1.4;
  opacity: 0.55;
}
.wc2-gauge svg .tick.major { stroke: var(--wc-ink-2); stroke-width: 2; opacity: 1; }
.wc2-gauge svg .track {
  fill: none;
  stroke: rgba(184, 255, 56, 0.10);
  stroke-width: 4;
}
.wc2-gauge svg .fill {
  fill: none;
  stroke: var(--wc-lime);
  stroke-width: 4;
  stroke-linecap: butt;
  filter: drop-shadow(0 0 6px rgba(184, 255, 56, 0.4));
}
.wc2-gauge__center {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; gap: 1px;
  z-index: 1;
}
.wc2-gauge__center .val {
  font: 800 22px var(--wc-font-display);
  font-variant-numeric: tabular-nums;
  color: var(--wc-ink-1);
  letter-spacing: -0.02em;
  line-height: 1;
}
.wc2-gauge__center .lbl {
  font: 700 8px var(--wc-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
}

/* ---------- 5. EQ bars (animated equalizer) ----------
   <div class="wc2-eq"><span></span>... ×7 ...</div>
*/
.wc2-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}
.wc2-eq span {
  width: 3px;
  background: var(--wc-lime);
  height: 30%;
  animation: wc2-eq-pulse 0.95s ease-in-out infinite;
}
.wc2-eq span:nth-child(1) { animation-delay: 0.00s; }
.wc2-eq span:nth-child(2) { animation-delay: 0.12s; }
.wc2-eq span:nth-child(3) { animation-delay: 0.24s; }
.wc2-eq span:nth-child(4) { animation-delay: 0.36s; }
.wc2-eq span:nth-child(5) { animation-delay: 0.48s; }
.wc2-eq span:nth-child(6) { animation-delay: 0.60s; }
.wc2-eq span:nth-child(7) { animation-delay: 0.72s; }
@keyframes wc2-eq-pulse {
  0%, 100% { height: 20%; opacity: 0.6; }
  50%      { height: 100%; opacity: 1; }
}
.wc2-eq.orange span { background: var(--wc-orange); }

/* ---------- 6. Warning triangle ----------
   <span class="wc2-warning"></span> (renders SVG via ::before fallback)
   Or use the SVG markup directly for full control.
*/
.wc2-warning {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px; height: 32px;
  color: var(--wc-orange);
}
.wc2-warning svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: miter;
}
.wc2-warning.pulse svg {
  animation: wc2-warn-pulse 1.4s ease-in-out infinite;
}
@keyframes wc2-warn-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); opacity: 0.9; }
  50%      { filter: drop-shadow(0 0 8px rgba(255, 106, 0, 0.6)); opacity: 1; }
}