/* ============================================================
 * WC // UI KIT v2 — WINDOW SYSTEM
 * Translucent floating panels with chrome title bars, drag,
 * tabbed content, resize handles, multi-state borders.
 * The primary spatial primitive for a tactical-HUD interface.
 * ============================================================ */

/* ============ WINDOW ============ */
/* ============================================================
 *  TACTICAL WINDOW DEFAULT RULE (locked 2026-06-08)
 *
 *  Every .wc2-win uses the slide-step-b card family shape with a tab on
 *  the BOTTOM edge — same shape language as .wc2-ngcc.beam in the portfolio.
 *  Generous inner padding (12px slide-h + 14px breathing room) so corner
 *  slides + bottom tab have visual room and content doesn't crowd them.
 *
 *  Element-as-outline + ::before inner fill (matches card rule).
 *  Default tab @ 60% wide x 10px deep on the bottom edge.
 * ============================================================ */
.wc2-win {
  position: absolute;
  display: flex; flex-direction: column;
  --slide-w: 12px;
  --slide-h: 12px;
  --step-x: 60%;
  --step-d: 10px;
  --step-slope-w: 10px;
  background: var(--wc-line);
  box-shadow: var(--wc-shadow-window);
  z-index: var(--wc-z-window);
  font-family: var(--wc-font-mono);
  color: var(--wc-ink-1);
  min-width: 280px;
  min-height: 160px;
  /* Bottom padding accounts for the tab depth + breathing room */
  padding-bottom: calc(var(--step-d) + 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)));
  transition: background 240ms var(--wc-ease-out), box-shadow 240ms var(--wc-ease-out);
}
/* Inner fill — shrunken polygon (1px inset everywhere incl. diagonals).
   LOCKED card rule: default = #1a1a1a (dark grey), .focused = --wc-ground. */
.wc2-win::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: #1a1a1a;                  /* LOCKED card rule — default dark grey */
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  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(--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));
}
/* Window children sit above the inner fill */
.wc2-win > * { position: relative; z-index: 1; }
/* Ambient glow behind every window. Drop-shadow renders the silhouette of
   the clipped polygon — visibility cranked so it actually reads on the dark
   stage. !important defends against any inherited filter overrides. */
.wc2-win {
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.85))
          drop-shadow(0 0 36px rgba(90, 46, 128, 0.55))
          drop-shadow(0 0 70px rgba(90, 46, 128, 0.25)) !important;
  transition: background 240ms var(--wc-ease-out),
              filter 320ms var(--wc-ease-out),
              transform 320ms cubic-bezier(0.2, 0.85, 0.3, 1.1);
}
.wc2-win.focused {
  background: var(--wc-lime);
  z-index: var(--wc-z-window-top);
  transform: translateY(-3px);
}
/* Focused inner = dark purple ground (LOCKED card rule — hover/focused state). */
.wc2-win.focused::before {
  background: var(--wc-ground);
}
.wc2-win.focused {
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.85))
          drop-shadow(0 0 38px rgba(184, 255, 56, 0.95))
          drop-shadow(0 0 72px rgba(184, 255, 56, 0.55)) !important;
}
/* SVG audio-wave beam outline — hidden by default, shown on .focused. */
.wc2-win > .wc2-card__beam { opacity: 0; transition: opacity 220ms var(--wc-ease-out); }
.wc2-win.focused > .wc2-card__beam { opacity: 1; }
.wc2-win.crit  { background: var(--wc-line-orange); }
.wc2-win.crit.focused {
  background: var(--wc-orange);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 26px rgba(255, 106, 0, 0.70))
          drop-shadow(0 0 56px rgba(255, 106, 0, 0.35));
}

/* ============ TITLE BAR ============ */
.wc2-win__title {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--wc-sp-4);
  padding: 6px 8px;
  background: rgba(20, 8, 31, 0.85);
  border-bottom: 1px solid var(--wc-line);
  cursor: move;
  user-select: none;
}
.wc2-win.focused .wc2-win__title { background: rgba(31, 14, 51, 0.95); }

/* Window label — combo: mono base font with the FIRST word in brush face
   (Style Your Lipstick). The brush word sits flush against the mono word
   that follows (no spacer between them). */
.wc2-win__label {
  display: inline-flex; align-items: center;
  font: 800 10px var(--wc-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-ink-2);
}
.wc2-win__label .num {
  color: var(--wc-orange);
  font-weight: 800;
  letter-spacing: 0.18em;
  margin-right: 8px;        /* breathing room only after the number */
}
.wc2-win__label .accent {
  font-family: "StyleYourLipstick", var(--wc-font-display);
  font-size: 17px;
  line-height: 0.85;
  letter-spacing: 0.02em;
  text-transform: none;
  color: inherit;
  display: inline-block;
  vertical-align: -0.04em;
  margin: 0;                /* no gap to the next word */
}
.wc2-win.focused .wc2-win__label { color: var(--wc-lime); }

.wc2-win__meta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 9px var(--wc-font-mono);
  letter-spacing: 0.14em;
  color: var(--wc-ink-4);
}
.wc2-win__meta .sep { color: var(--wc-ink-5); }

.wc2-win__controls {
  display: inline-flex; align-items: center; gap: 2px;
}
.wc2-win__ctrl {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--wc-ink-3);
  cursor: pointer;
  background: transparent;
  transition: all var(--wc-dur-flash);
}
.wc2-win__ctrl:hover { color: var(--wc-lime); background: rgba(184, 255, 56, 0.10); }
.wc2-win__ctrl.close:hover { color: var(--wc-orange); background: rgba(255, 106, 0, 0.10); }
.wc2-win__ctrl svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ============ TAB STRIP (optional inside window) ============ */
.wc2-win__tabs {
  display: flex;
  background: rgba(14, 6, 27, 0.6);
  border-bottom: 1px solid var(--wc-line-soft);
}
.wc2-win__tab {
  padding: 6px 12px;
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
  cursor: pointer;
  position: relative;
  background: transparent;
  border-right: 1px solid var(--wc-line-soft);
  transition: color var(--wc-dur-fast);
}
.wc2-win__tab:hover { color: var(--wc-ink-1); }
.wc2-win__tab.active {
  color: var(--wc-lime);
  background: rgba(184, 255, 56, 0.06);
}
.wc2-win__tab.active::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; right: 0;
  height: 1px; background: var(--wc-lime);
}

/* ============ BODY ============ */
.wc2-win__body {
  flex: 1;
  overflow: auto;
  padding: var(--wc-sp-5);
  font-size: var(--wc-text-mono);
  line-height: var(--wc-lead-base);
  color: var(--wc-ink-2);
  scrollbar-width: thin;
  scrollbar-color: var(--wc-line) transparent;
}
.wc2-win__body::-webkit-scrollbar { width: 4px; }
.wc2-win__body::-webkit-scrollbar-track { background: transparent; }
.wc2-win__body::-webkit-scrollbar-thumb { background: var(--wc-line); }
.wc2-win__body::-webkit-scrollbar-thumb:hover { background: var(--wc-lime); }

.wc2-win__body--dense { padding: var(--wc-sp-3); }
.wc2-win__body--flush { padding: 0; }

/* ============ FOOTER STATUS LINE in window ============ */
.wc2-win__foot {
  padding: 5px 8px;
  background: rgba(14, 6, 27, 0.6);
  border-top: 1px solid var(--wc-line-soft);
  display: flex; align-items: center; gap: var(--wc-sp-4);
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
}
.wc2-win__foot .pip { width: 5px; height: 5px; background: var(--wc-ok); }
.wc2-win__foot .ok    { color: var(--wc-ok); }
.wc2-win__foot .warn  { color: var(--wc-warn); }
.wc2-win__foot .crit  { color: var(--wc-crit); }
.wc2-win__foot .grow  { flex: 1; }

/* ============ RESIZE handle ============ */
.wc2-win__resize {
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0%, transparent 50%, var(--wc-line) 50%, var(--wc-line) 60%, transparent 60%);
}

/* ============ INTRINSIC LAYOUTS INSIDE WINDOWS ============ */

/* KEY-VALUE GRID (the workhorse) */
.wc2-kv {
  display: grid;
  grid-template-columns: minmax(120px, 35%) 1fr;
  gap: 4px var(--wc-sp-4);
  font-size: var(--wc-text-mono);
}
.wc2-kv .k {
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
  align-self: center;
}
.wc2-kv .v {
  font-variant-numeric: tabular-nums;
  color: var(--wc-ink-1);
  font-size: var(--wc-text-base);
  letter-spacing: 0.02em;
  align-self: center;
}
.wc2-kv .v.ok   { color: var(--wc-ok); }
.wc2-kv .v.warn { color: var(--wc-warn); }
.wc2-kv .v.crit { color: var(--wc-crit); }
.wc2-kv .v.mute { color: var(--wc-ink-3); }
.wc2-kv .v em   { font-style: normal; color: var(--wc-ink-4); font-size: 10px; margin-left: 4px; letter-spacing: 0.06em; }

/* DATA TABLE inside windows (dense, tactical) */
.wc2-tab {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--wc-font-mono);
  font-size: var(--wc-text-mono);
  font-variant-numeric: tabular-nums;
}
.wc2-tab thead th {
  text-align: left;
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
  padding: 4px 8px;
  border-bottom: 1px solid var(--wc-line);
  background: rgba(31, 14, 51, 0.55);
  position: sticky; top: 0;
}
.wc2-tab tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--wc-line-faint);
  color: var(--wc-ink-1);
  letter-spacing: 0;
}
.wc2-tab tbody tr {
  transition: background var(--wc-dur-flash);
  cursor: pointer;
}
.wc2-tab tbody tr:hover { background: rgba(90, 46, 128, 0.12); }
.wc2-tab tbody tr.selected {
  background: rgba(184, 255, 56, 0.10);
  outline: 1px solid var(--wc-lime);
  outline-offset: -1px;
}
.wc2-tab tbody tr.crit-row td:first-child { border-left: 2px solid var(--wc-crit); padding-left: 6px; }
.wc2-tab tbody tr.warn-row td:first-child { border-left: 2px solid var(--wc-warn); padding-left: 6px; }
.wc2-tab .num { text-align: right; }
.wc2-tab .dim { color: var(--wc-ink-4); }
.wc2-tab .ok   { color: var(--wc-ok); }
.wc2-tab .warn { color: var(--wc-warn); }
.wc2-tab .crit { color: var(--wc-crit); }

/* ============ ASCII bracket name ([ NAME ]) ============ */
.wc2-bracket-name {
  font: 700 11px var(--wc-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-ink-1);
  display: inline-flex;
  gap: 6px;
}
.wc2-bracket-name::before { content: "["; color: var(--wc-orange); }
.wc2-bracket-name::after  { content: "]"; color: var(--wc-orange); }

/* ============ Block header used inside windows ============ */
.wc2-block {
  margin: var(--wc-sp-5) 0;
}
.wc2-block:first-child { margin-top: 0; }
.wc2-block:last-child  { margin-bottom: 0; }
.wc2-block__head {
  display: flex; align-items: center; gap: 8px;
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--wc-line-soft);
}
.wc2-block__head::before {
  content: ""; width: 3px; height: 10px;
  background: var(--wc-lime);
}
.wc2-block__head.warn::before { background: var(--wc-warn); }
.wc2-block__head.crit::before { background: var(--wc-crit); }
.wc2-block__head .grow { flex: 1; }
.wc2-block__head .meta { color: var(--wc-ink-4); font-weight: 500; letter-spacing: 0.14em; }