/* ================================================================
   Upload Security Stage Rail  —  USX-2
   "Clearance Protocol" aesthetic: vertical gate rail, navy + teal.
   Used by UploadStageRail.js — applied uniformly to all document
   upload touchpoints across the platform.
   ================================================================ */

/* ── Rail container ────────────────────────────────────────────── */
.upl-rail {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-2) 0 var(--space-4);
}

.upl-rail__heading {
  font: 600 var(--text-xs)/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

/* ── Section divider (Security Gates / Pipeline Stages) ─────────── */
.upl-rail__section-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
  font: 600 var(--text-xs)/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.upl-rail__section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--surface-border);
}

/* ── Gate capsule ────────────────────────────────────────────────── */
.upl-rail__gate {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  overflow: hidden;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base),
    opacity var(--transition-base);
}

/* Vertical connector line between adjacent gates */
.upl-rail__gate + .upl-rail__gate {
  margin-top: var(--space-3);
}
.upl-rail__gate + .upl-rail__gate::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: calc(var(--space-4) + 17px);   /* centre of 36px icon */
  width: 2px;
  height: var(--space-3);
  background: var(--surface-border);
  transition: background var(--transition-slow);
}
.upl-rail__gate.connector-filled::before {
  background: var(--color-teal);
}

/* ── Icon circle ─────────────────────────────────────────────────── */
.upl-rail__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-elevated);
  border: 1.5px solid var(--surface-border);
  transition: all var(--transition-base);
  position: relative;
  z-index: 1;
}
.upl-rail__icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color var(--transition-base);
}

/* ── Text block ──────────────────────────────────────────────────── */
.upl-rail__text {
  flex: 1;
  min-width: 0;
}
.upl-rail__label {
  font: 600 var(--text-sm)/1.2 var(--font-display);
  color: var(--text-secondary);
  margin-bottom: 2px;
  transition: color var(--transition-base);
}
.upl-rail__sublabel {
  font: 400 var(--text-xs)/1.4 var(--font-display);
  color: var(--text-muted);
  transition: color var(--transition-base);
}

/* ── Status glyph (right side) ──────────────────────────────────── */
.upl-rail__status {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  opacity: 0;
  transition: opacity var(--transition-base);
  font-size: 14px;
  color: var(--color-teal);
}

/* ════════════════════════════════════════
   STATE: PENDING
════════════════════════════════════════ */
.upl-rail__gate--pending {
  opacity: 0.38;
}

/* ════════════════════════════════════════
   STATE: ACTIVE — scan-line shimmer sweep
════════════════════════════════════════ */
.upl-rail__gate--active {
  opacity: 1;
  border-color: var(--color-teal);
  box-shadow:
    0 0 0 1px rgba(0,180,162,.12),
    0 4px 18px rgba(0,180,162,.08);
}
.upl-rail__gate--active .upl-rail__icon {
  background: rgba(0,180,162,.12);
  border-color: var(--color-teal);
  color: var(--color-teal);
}
.upl-rail__gate--active .upl-rail__label  { color: var(--text-primary); }
.upl-rail__gate--active .upl-rail__sublabel { color: var(--color-teal); }

/* Shimmer sweep overlay */
.upl-rail__gate--active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,180,162,.07) 40%,
    rgba(0,180,162,.16) 50%,
    rgba(0,180,162,.07) 60%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: upl-sweep 1.9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes upl-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Pulse ring on active icon */
.upl-rail__gate--active .upl-rail__icon::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,180,162,.6);
  opacity: 0;
  animation: upl-icon-pulse 2s ease-out infinite;
}
@keyframes upl-icon-pulse {
  0%   { opacity: 0.65; transform: scale(1);   }
  100% { opacity: 0;    transform: scale(1.55); }
}

/* Inline spinner inside icon */
.upl-rail__icon .upl-spin {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(0,180,162,.25);
  border-top-color: var(--color-teal);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* ════════════════════════════════════════
   STATE: CLEARED — success
════════════════════════════════════════ */
.upl-rail__gate--cleared {
  opacity: 1;
  border-color: rgba(0,196,140,.30);
  background: linear-gradient(
    135deg,
    rgba(0,180,162,.05) 0%,
    var(--surface-card) 100%
  );
}
.upl-rail__gate--cleared .upl-rail__icon {
  background: rgba(0,196,140,.15);
  border-color: var(--color-green);
  color: var(--color-green);
}
.upl-rail__gate--cleared .upl-rail__label   { color: var(--color-teal); }
.upl-rail__gate--cleared .upl-rail__sublabel { color: var(--text-secondary); }
.upl-rail__gate--cleared .upl-rail__status  { opacity: 1; color: var(--color-green); }

/* ════════════════════════════════════════
   STATE: FAILED — threat detected
════════════════════════════════════════ */
.upl-rail__gate--failed {
  opacity: 1;
  border-color: rgba(229,57,53,.40);
  background: linear-gradient(
    135deg,
    rgba(229,57,53,.07) 0%,
    var(--surface-card) 100%
  );
  animation: upl-shake 0.42s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes upl-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX( 2px); }
  30%, 50%, 70% { transform: translateX(-2px); }
  40%, 60% { transform: translateX( 2px); }
}
.upl-rail__gate--failed .upl-rail__icon {
  background: rgba(229,57,53,.14);
  border-color: #E53935;
  color: #E53935;
}
.upl-rail__gate--failed .upl-rail__label    { color: #ff6b6b; }
.upl-rail__gate--failed .upl-rail__sublabel { color: rgba(255,107,107,.65); }
.upl-rail__gate--failed .upl-rail__status   { opacity: 1; color: #E53935; }

/* ── Threat disclosure panel ─────────────────────────────────────── */
.upl-rail__threat {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.38s cubic-bezier(0.4,0,0.2,1),
    opacity    0.30s ease;
}
.upl-rail__threat--open {
  max-height: 200px;
  opacity: 1;
}

.upl-rail__threat-inner {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(229,57,53,.07);
  border: 1px solid rgba(229,57,53,.22);
}

.upl-rail__threat-header {
  font: 700 var(--text-xs)/1 var(--font-display);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #ff6b6b;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.upl-rail__threat-vector {
  font: 500 var(--text-xs)/1.5 var(--font-mono);
  color: #ffaaaa;
  background: rgba(0,0,0,.22);
  padding: 4px 8px;
  border-radius: 4px;
  word-break: break-all;
  margin-bottom: var(--space-2);
}

.upl-rail__threat-notice {
  font: 400 var(--text-xs)/1.45 var(--font-display);
  color: var(--text-muted);
}

/* ── Finish banner ───────────────────────────────────────────────── */
.upl-rail__finish {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(0,196,140,.08);
  border: 1px solid rgba(0,196,140,.22);
  font: 600 var(--text-sm)/1.3 var(--font-display);
  color: var(--color-green);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity    var(--transition-base),
    transform  var(--transition-base);
}
.upl-rail__finish--visible {
  opacity: 1;
  transform: translateY(0);
}
.upl-rail__finish-sub {
  font: 400 var(--text-xs)/1.3 var(--font-display);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── Network issue banner ────────────────────────────────────────── */
.upl-rail__network {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.22);
  font: 400 var(--text-xs)/1.45 var(--font-display);
  color: #92400e;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .28s ease, opacity .22s ease;
}
.upl-rail__network--visible {
  max-height: 52px;
  opacity: 1;
}
.upl-rail__network svg {
  width: 14px; height: 14px; flex-shrink: 0;
  stroke: #92400e; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Action panel (retry / background handoff) ───────────────────── */
.upl-rail__action-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .28s ease;
}
.upl-rail__action-panel--visible {
  max-height: 180px;
  opacity: 1;
}
.upl-rail__action-inner {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  background: var(--surface-card);
}
.upl-rail__action-msg {
  font: 400 var(--text-sm)/1.6 var(--font-display);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.upl-rail__action-btns {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.upl-rail__action-btn {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font: 500 var(--text-sm)/1 var(--font-display);
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity .15s;
}
.upl-rail__action-btn:hover { opacity: .82; }
.upl-rail__action-btn--primary {
  background: var(--color-green, #00c48c);
  color: #fff;
}
.upl-rail__action-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--surface-border);
}

/* ── Light-theme overrides — upload stage rail action buttons ────────────────
   Primary (green) is semantic and works in both themes — left as-is.
   Ghost uses dark surface-border token which resolves to dark in light mode.
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .upl-rail__action-btn--ghost {
  color: #374151;
  border-color: rgba(0,0,0,0.20);
}
[data-theme="light"] .upl-rail__action-btn--ghost:hover {
  background: rgba(0,0,0,0.04);
  color: #111827;
}