/* ==========================================================
   variant-action-bar.css — Variant selector + command card
   Phase C PR1. Theme-aware via existing CSS custom properties.
   Motion spec: 100–200ms, respect prefers-reduced-motion.
   ========================================================== */

/* ----------------------------------------------------------
   Host element
   ---------------------------------------------------------- */

variant-action-bar {
  display: block;
  position: relative;  /* sentinel is positioned relative to this */
  /* CSS variable set by JS after measuring site-nav height */
  --vab-nav-height: 60px;
}

/* Sentinel: 1px invisible div that triggers the IntersectionObserver */
.vab-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

/* ----------------------------------------------------------
   Card — default (full, inline)
   ---------------------------------------------------------- */

.vab-card {
  background: var(--color-surface-raised, var(--color-navy-800, #1A2A4A));
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-md, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
  transition: box-shadow var(--motion-duration-short, 150ms) var(--easing-standard, ease);
}

@media (prefers-reduced-motion: reduce) {
  .vab-card { transition: none; }
}

/* ----------------------------------------------------------
   Sticky + collapse state
   ---------------------------------------------------------- */

/* When the sentinel scrolls out of view, the host gets [data-collapsed] */
[data-collapsed] .vab-card {
  position: fixed;
  top: var(--vab-nav-height, 60px);
  left: 0;
  right: 0;
  z-index: 40;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: var(--space-xs, 4px) var(--space-md, 16px);
  /* Collapsed: show only signals row + toggle button, hide selectors + commands */
}

[data-collapsed] .vab-row--selectors,
[data-collapsed] .vab-row--commands {
  display: none;
}

/* Collapsed signals row: spread signals left, actions right — no wrapping */
[data-collapsed] .vab-row--signals {
  justify-content: space-between;
  flex-wrap: nowrap;
}

/* Prevent AMD64/ARM64 from wrapping to a second clipped line */
[data-collapsed] .vab-signals {
  flex-wrap: nowrap;
  min-width: 0;
}

[data-collapsed] .vab-signal-value,
[data-collapsed] .vab-signal-label {
  white-space: nowrap;
}

/* (toggle removed — scrolling back up re-expands via IntersectionObserver) */

@media (prefers-reduced-motion: reduce) {
  [data-collapsed] .vab-card { transition: none; }
}

/* ----------------------------------------------------------
   Rows
   ---------------------------------------------------------- */

.vab-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md, 16px);
  flex-wrap: wrap;
}

.vab-row--signals {
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm, 8px);
}

.vab-row--commands {
  flex-direction: column;
  align-items: stretch; /* cross-axis fill so command blocks don't content-size in column mode */
  gap: var(--space-sm, 8px);
}

@media (min-width: 640px) {
  .vab-row--commands { flex-direction: row; }
}

/* ----------------------------------------------------------
   Pill groups (version + flavor selectors)
   ---------------------------------------------------------- */

.vab-pill-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 4px);
}

.vab-pill-label {
  font-size: var(--font-size-caption, 12px);
  font-family: var(--font-family-mono, monospace);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--letter-spacing-wider, 0.08em);
  text-transform: uppercase;
  color: var(--color-text-muted, #8A93A0);
}

.vab-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-inline-pill-gap, 6px);
}

/* Base pill style */
.vab-version-pill,
.vab-flavor-pill,
.vab-registry-pill {
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--color-variant-tag-border, rgba(139,92,246,0.25));
  background: var(--color-variant-tag-bg, rgba(139,92,246,0.15));
  color: var(--color-variant-tag-fg, var(--color-violet-400, #A78BFA));
  font-size: var(--font-size-body-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  font-family: var(--font-family-sans, sans-serif);
  cursor: pointer;
  transition:
    background var(--motion-duration-short, 150ms) var(--easing-standard, ease),
    border-color var(--motion-duration-short, 150ms) var(--easing-standard, ease),
    box-shadow var(--motion-duration-short, 150ms) var(--easing-standard, ease);
  /* WCAG 2.5.8 minimum touch target */
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.vab-version-pill:hover,
.vab-flavor-pill:hover,
.vab-registry-pill:hover {
  background: var(--color-variant-tag-bg-hover, rgba(139,92,246,0.25));
  border-color: rgba(167,139,250,0.45);
}

/* Active / selected pill (uses violet trust hue per Phase C spec) */
.vab-version-pill.vab-pill--active,
.vab-flavor-pill.vab-pill--active,
.vab-registry-pill.vab-pill--active {
  background: var(--color-variant-tag-selected-bg, rgba(139,92,246,0.30));
  border-color: var(--color-violet-400, #A78BFA);
  color: var(--color-violet-400, #A78BFA);
  box-shadow: 0 0 0 2px var(--color-variant-tag-selected-shadow, rgba(139,92,246,0.20));
}

/* Focus rings — WCAG 2.2 AA (3px outline, 2px offset) */
.vab-version-pill:focus-visible,
.vab-flavor-pill:focus-visible,
.vab-registry-pill:focus-visible {
  outline: 3px solid var(--color-violet-400, #A78BFA);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .vab-version-pill,
  .vab-flavor-pill,
  .vab-registry-pill { transition: none; }
}

/* ----------------------------------------------------------
   Command blocks
   ---------------------------------------------------------- */

.vab-command-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 4px);
  flex: 1;
  min-width: 0; /* allow shrink in flex row */
  max-width: 100%; /* belt-and-suspenders: prevent intrinsic content from blowing out cross-axis in column mode */
}

.vab-command-label {
  font-size: var(--font-size-caption, 12px);
  font-family: var(--font-family-mono, monospace);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--letter-spacing-wider, 0.08em);
  text-transform: uppercase;
  color: var(--color-text-muted, #8A93A0);
  margin: 0;
}

.vab-command-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  background: rgba(0,0,0,0.20);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 8px);
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  overflow: hidden;
  min-width: 0; /* allow flex children to shrink below intrinsic content width */
  max-width: 100%;
}

.vab-command-code {
  flex: 1;
  font-family: var(--font-family-mono, monospace);
  font-size: 0.8125rem; /* 13px — matches existing .detail-pull-input */
  color: var(--color-text-secondary, #C7CCD4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0;
  display: block;
}

.vab-copy-btn {
  flex-shrink: 0;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 8px);
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  min-width: 36px;
  min-height: 36px; /* WCAG 2.5.8 */
  color: var(--color-text-secondary, #C7CCD4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition:
    background var(--motion-duration-short, 150ms) var(--easing-standard, ease),
    color var(--motion-duration-short, 150ms) var(--easing-standard, ease);
}

.vab-copy-btn:hover {
  background: rgba(255,255,255,0.20);
  color: var(--color-text-primary, #F4F5F7);
}

.vab-copy-btn.vab-copy-btn--copied {
  background: var(--color-feedback-success-bg, rgba(16,185,129,0.12));
  border-color: var(--color-green-400, #4ADE80);
  color: var(--color-green-400, #4ADE80);
}

.vab-copy-btn:focus-visible {
  outline: 3px solid var(--color-action-primary, #60A5FA);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .vab-copy-btn { transition: none; }
}

/* ----------------------------------------------------------
   Signals strip
   ---------------------------------------------------------- */

.vab-signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm, 8px);
  font-size: var(--font-size-body-sm, 14px);
}

.vab-signal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 4px);
}

.vab-signal-label {
  font-size: var(--font-size-caption, 12px);
  font-family: var(--font-family-mono, monospace);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--letter-spacing-wider, 0.08em);
  text-transform: uppercase;
  color: var(--color-text-muted, #8A93A0);
}

.vab-signal-value {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #F4F5F7);
}

/* Status-specific coloring */
.vab-signal--status[data-status="ok"] .vab-signal-value {
  color: var(--color-feedback-success-fg, var(--color-green-400, #4ADE80));
}

.vab-signal--status[data-status="pending"] .vab-signal-value {
  color: var(--color-feedback-warning-fg, var(--color-amber-400, #FBBF24));
}

.vab-signal-sep {
  color: var(--color-text-muted, #8A93A0);
  padding: 0 2px;
  user-select: none;
}

/* ----------------------------------------------------------
   Verify note (shown when registry is not GHCR)
   ---------------------------------------------------------- */

.vab-verify-note {
  font-size: 0.75rem;
  color: var(--color-text-muted, #8A93A0);
  font-style: italic;
  display: block;
  margin-top: 4px;
}

/* ----------------------------------------------------------
   Collapsed-mode actions group (registry mini-toggle + mini copy button)
   Hidden in expanded mode via display:none; revealed only when [data-collapsed].
   ---------------------------------------------------------- */

.vab-collapsed-actions {
  display: none;
}

[data-collapsed] .vab-collapsed-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  flex-shrink: 0;
}

/* Mini registry toggle pills */
.vab-collapsed-actions .vab-registry-mini {
  font-size: var(--font-size-caption, 12px);
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--color-variant-tag-border, rgba(139,92,246,0.25));
  background: transparent;
  color: var(--color-text-muted, #8A93A0);
  cursor: pointer;
  font-family: var(--font-family-mono, monospace);
  letter-spacing: var(--letter-spacing-wider, 0.04em);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium, 500);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  transition:
    background var(--motion-duration-short, 150ms) var(--easing-standard, ease),
    color var(--motion-duration-short, 150ms) var(--easing-standard, ease),
    border-color var(--motion-duration-short, 150ms) var(--easing-standard, ease);
}

.vab-collapsed-actions .vab-registry-mini[aria-pressed="true"] {
  background: var(--color-variant-tag-bg, rgba(139,92,246,0.15));
  color: var(--color-variant-tag-fg, var(--color-violet-400, #A78BFA));
  border-color: var(--color-variant-tag-fg, var(--color-violet-400, #A78BFA));
}

.vab-collapsed-actions .vab-registry-mini:hover {
  border-color: var(--color-variant-tag-fg, var(--color-violet-400, #A78BFA));
  color: var(--color-variant-tag-fg, var(--color-violet-400, #A78BFA));
}

.vab-collapsed-actions .vab-registry-mini:focus-visible {
  outline: 3px solid var(--color-violet-400, #A78BFA);
  outline-offset: 2px;
}

/* Compact copy button */
.vab-collapsed-actions .vab-copy-mini {
  background: transparent;
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  color: var(--color-text-primary, #F4F5F7);
  border-radius: var(--radius-sm, 4px);
  padding: 4px 8px;
  cursor: pointer;
  font-size: var(--font-size-caption, 12px);
  font-family: var(--font-family-mono, monospace);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  transition:
    background var(--motion-duration-short, 150ms) var(--easing-standard, ease),
    border-color var(--motion-duration-short, 150ms) var(--easing-standard, ease),
    color var(--motion-duration-short, 150ms) var(--easing-standard, ease);
}

.vab-collapsed-actions .vab-copy-mini:hover {
  background: var(--color-surface-elevated, rgba(255,255,255,0.05));
  border-color: var(--color-text-muted, #8A93A0);
}

.vab-collapsed-actions .vab-copy-mini.vab-copy-mini--copied {
  color: var(--color-feedback-success-fg, var(--color-green-400, #4ADE80));
  border-color: var(--color-feedback-success-fg, var(--color-green-400, #4ADE80));
}

.vab-collapsed-actions .vab-copy-mini:focus-visible {
  outline: 3px solid var(--color-action-primary, #60A5FA);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .vab-collapsed-actions .vab-registry-mini,
  .vab-collapsed-actions .vab-copy-mini { transition: none; }
}

/* ----------------------------------------------------------
   Sticky-mode pull command display (center of bandeau)
   ---------------------------------------------------------- */

/* Hidden by default; only visible when host is collapsed */
.vab-sticky-cmd { display: none; }

[data-collapsed] .vab-sticky-cmd {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;          /* CRITICAL — without this, flex item refuses to shrink */
  max-width: 100%;
  margin: 0 var(--space-md, 16px);
  padding: 4px 10px;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface-elevated, rgba(255,255,255,0.04));
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.06));
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-caption, 12px);
  color: var(--color-text-primary, #F4F5F7);
  cursor: pointer;
  transition: background var(--motion-duration-short, 150ms) var(--easing-standard, ease),
              border-color var(--motion-duration-short, 150ms) var(--easing-standard, ease);
  /* Left-side ellipsis: rtl direction reverses truncation point.
     unicode-bidi: plaintext makes the BiDi algorithm treat the Latin text as
     LTR inside the RTL container, so glyphs render correctly but the overflow
     truncation happens on the left (prefix), not the right (suffix). */
  direction: rtl;
  text-align: left;
  unicode-bidi: plaintext;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-collapsed] .vab-sticky-cmd:hover {
  background: var(--color-surface-overlay, rgba(255,255,255,0.07));
  border-color: var(--color-text-muted, #8A93A0);
}

[data-collapsed] .vab-sticky-cmd:focus-visible {
  outline: 2px solid var(--color-focus-ring, var(--color-violet-400, #A78BFA));
  outline-offset: 2px;
}

/* Success / failure flashes carry a non-colour cue (border weight/style) so
   the state is perceivable without colour — WCAG 1.4.1. The aria-label is
   also swapped briefly for screen readers (handled in JS). */
/* Success and failure share padding compensation for their +1px border so
   the row doesn't jump on activation. They differ in border style/colour
   to be distinguishable without relying on colour alone (WCAG 1.4.1). */
[data-collapsed] .vab-sticky-cmd--copied {
  background: rgba(74, 222, 128, 0.10);
  border: 2px solid var(--color-feedback-success-fg, var(--color-green-400, #4ADE80));
  color: var(--color-feedback-success-fg, var(--color-green-400, #4ADE80));
  padding: 3px 9px;
}

[data-collapsed] .vab-sticky-cmd--failed {
  background: rgba(239, 68, 68, 0.10);
  border: 2px dashed var(--color-feedback-error-fg, var(--color-red-400, #F87171));
  color: var(--color-feedback-error-fg, var(--color-red-400, #F87171));
  padding: 3px 9px;
}

@media (prefers-reduced-motion: reduce) {
  [data-collapsed] .vab-sticky-cmd { transition: none; }
}

/* Mobile (≤767px): keep visible but reduce padding/font-size for tightness.
   --copied/--failed reuse the mobile padding with a -1px compensation that
   matches the +1px border, so the row keeps its height across activation. */
@media (max-width: 767px) {
  [data-collapsed] .vab-sticky-cmd {
    margin: 0 var(--space-xs, 4px);
    padding: 3px 6px;
    font-size: 11px;
  }
  [data-collapsed] .vab-sticky-cmd--copied,
  [data-collapsed] .vab-sticky-cmd--failed {
    padding: 2px 5px;
  }
}

/* Below 420px the sticky command shrinks to a near-empty ellipsis blob with
   no useful info — hide it entirely. The ⧉ button still copies the same
   command and the user can scroll up to see the full pull line. */
@media (max-width: 419px) {
  [data-collapsed] .vab-sticky-cmd { display: none; }
}

/* ----------------------------------------------------------
   Light theme overrides
   ---------------------------------------------------------- */

[data-theme="light"] .vab-card {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.10);
}

[data-theme="light"] [data-collapsed] .vab-card {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] .vab-copy-btn.vab-copy-btn--copied {
  color: #047857; /* green-700 on light — 5.4:1 (WCAG AA) */
}

/* ----------------------------------------------------------
   Mobile — single column
   ---------------------------------------------------------- */

@media (max-width: 767px) {
  .vab-row--selectors { flex-direction: column; gap: var(--space-sm, 8px); }
  .vab-row--commands { flex-direction: column; }
  .vab-command-code { font-size: 0.75rem; }

  [data-collapsed] .vab-card {
    padding: var(--space-xs, 4px) var(--space-sm, 8px);
  }

  [data-collapsed] .vab-row--signals { gap: var(--space-sm, 8px); }
  [data-collapsed] .vab-collapsed-actions { gap: 3px; }
  [data-collapsed] .vab-collapsed-actions .vab-registry-mini { padding: 2px 6px; font-size: 11px; }
  [data-collapsed] .vab-collapsed-actions .vab-copy-mini { padding: 4px 6px; }
}