/* ═══════════════════════════════════════════════════════════════════
   /demonstrator/simulator — ArbaEdge Simulator · module styles
   Relies on /assets/arba-system.css for tokens, fonts, primitives.
   ═══════════════════════════════════════════════════════════════════ */

/* Page intro sub-copy under the title */
.page-sub {
  margin: 0 0 22px 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 62ch;
}

/* Step workflow ─────────────────────────────────────────────────── */
.step-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  padding: 4px 10px;
  border: 1px solid var(--hair-2);
  border-radius: var(--radius-xs);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(227,237,255,0.02);
}
.step-title {
  display: flex;
  align-items: center;
  margin: 0 0 14px 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.step-locked {
  opacity: .5;
  filter: saturate(0.6);
}
.step-locked .btn,
.step-locked button { pointer-events: none; }

/* Section card — reuse .card from system + add accent bar for active/first */
.card--step {
  position: relative;
  margin-top: 18px;
}
.card--step::before {
  content: "";
  position: absolute;
  top: -1px; left: 22px;
  width: 38px; height: 2px;
  background: var(--hair-2);
  transition: background 240ms var(--ease), box-shadow 240ms var(--ease);
}
.card--step.active::before {
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

/* Industry mode cards ──────────────────────────────────────────── */
.mode-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 900px) {
  .mode-row { grid-template-columns: 1fr; }
}

.mode-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)) ,
    var(--bg-surface);
  border: 1px solid var(--hair-2);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition:
    transform 240ms var(--ease),
    border-color 240ms var(--ease),
    box-shadow 240ms var(--ease),
    background 240ms var(--ease);
  min-height: 186px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Mode card §§ id tag (top-left) */
.mode-card::before {
  content: attr(data-mode-code);
  position: absolute;
  top: 14px; left: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* LED indicator (top-right) */
.mode-card::after {
  content: "";
  position: absolute;
  top: 18px; right: 16px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-4);
  box-shadow: 0 0 0 1px var(--hair-2);
  transition: background 240ms var(--ease), box-shadow 240ms var(--ease);
}
.mode-card:not(.disabled):hover::after {
  background: var(--cyan);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.5), 0 0 10px var(--cyan);
}
.mode-card.selected::after {
  background: var(--green);
  box-shadow: 0 0 0 1px rgba(74,222,128,0.5), 0 0 10px var(--green);
}
.mode-card.disabled::after {
  background: var(--amber);
  opacity: .4;
}

.mode-img {
  width: 48px; height: 48px;
  object-fit: contain;
  margin-top: 8px;
  filter: drop-shadow(0 4px 10px rgba(125,211,252,0.18));
  transition: transform 240ms var(--ease), filter 240ms var(--ease);
}
.mode-card:not(.disabled):hover .mode-img {
  transform: translateY(-3px) scale(1.04);
  filter: drop-shadow(0 10px 22px rgba(125,211,252,0.36));
}

.mode-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.mode-sub {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

.mode-card:not(.disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(125,211,252,0.45);
  background:
    linear-gradient(180deg, rgba(125,211,252,0.05), rgba(255,255,255,0)) ,
    var(--bg-surface-2);
  box-shadow:
    0 1px 0 0 rgba(125,211,252,0.08) inset,
    0 20px 48px -24px rgba(0,0,0,0.7),
    0 0 0 1px rgba(125,211,252,0.2);
}

.mode-card.selected {
  border-color: rgba(74,222,128,0.55);
  background:
    linear-gradient(180deg, rgba(74,222,128,0.05), rgba(255,255,255,0)) ,
    var(--bg-surface-2);
  box-shadow:
    0 1px 0 0 rgba(74,222,128,0.1) inset,
    0 20px 48px -24px rgba(0,0,0,0.7),
    0 0 0 1px rgba(74,222,128,0.25);
}

.mode-card.disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: saturate(0.5);
}

.mode-badge {
  position: absolute;
  top: 44px; right: 16px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--hair-2);
  background: rgba(248,178,75,0.1);
  color: var(--amber);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Pulse row / interval selector ────────────────────────────────── */
.pulse-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
#intervalSel {
  background: var(--bg-deep);
  color: var(--ink);
  border: 1px solid var(--hair-2);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 160ms var(--ease);
}
#intervalSel:hover { border-color: var(--hair-3); }
/* No `outline: none` here. The ring at the foot of this sheet is the only focus
   indicator these pages have — arba-system.css declares none — and an id
   selector setting `outline: none` would out-specify it and silently take it
   away from anyone driving the console from the keyboard. */
#intervalSel:focus-visible { border-color: var(--cyan); }

/* Log console ──────────────────────────────────────────────────── */
.log {
  background: var(--bg-deep);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 14px;
  max-height: 340px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ═══════════════════════════════════════════════════════════════
   DATA SOVEREIGNTY SPLIT-SCREEN (workstation.html)
   Kept intentionally distinct from system tokens — it's a
   mission-critical visualization and benefits from its own palette.
   ═══════════════════════════════════════════════════════════════ */

.data-sovereignty-banner {
  background:
    linear-gradient(135deg, rgba(248,178,75,0.08) 0%, rgba(125,211,252,0.08) 100%);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  text-align: left;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
  border: 1px solid var(--hair-2);
  display: flex;
  align-items: center;
  gap: 12px;
}
.data-sovereignty-banner::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px var(--amber);
  flex-shrink: 0;
  animation: pulse-amber 2s ease-in-out infinite;
}

.view-toggle-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding: 12px;
  background: rgba(227,237,255,0.02);
  border-radius: var(--radius-sm);
  border: 1px solid var(--hair-2);
}

.view-select {
  background: var(--bg-deep);
  color: var(--ink);
  border: 1px solid var(--hair-2);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-width: 280px;
  transition: border-color 160ms var(--ease), box-shadow 200ms var(--ease);
}
.view-select:hover { border-color: var(--cyan); }
.view-select:focus-visible { border-color: var(--cyan); }

.simulator-split-container {
  display: grid;
  grid-template-columns: 1fr 6px 1fr;
  gap: 0;
  border: 1px solid var(--hair-2);
  border-radius: var(--radius);
  overflow: visible;
  box-shadow: 0 20px 48px -24px rgba(0,0,0,0.6);
  margin-bottom: 16px;
  position: relative;
}

.split-panel {
  padding: 18px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.device-side {
  background:
    linear-gradient(180deg, rgba(125,211,252,0.06), rgba(125,211,252,0.02)) ,
    var(--bg-surface);
}
.arbalabs-side {
  background:
    linear-gradient(180deg, rgba(227,237,255,0.02), rgba(227,237,255,0)) ,
    var(--bg-surface);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair-2);
}
.panel-header h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.data-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.data-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
}
.badge-green {
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.35);
  color: var(--green);
}
.badge-green::before { background: var(--green); box-shadow: 0 0 8px var(--green); }
.badge-red {
  background: rgba(255,107,107,0.1);
  border: 1px solid rgba(255,107,107,0.35);
  color: var(--red);
}
.badge-red::before { background: var(--red); box-shadow: 0 0 8px var(--red); }

.panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}

.status-item {
  padding: 5px 10px;
  background: rgba(227,237,255,0.03);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  border: 1px solid var(--hair-2);
  letter-spacing: 0.02em;
}

/* Privacy Barrier — amber vertical rail */
.privacy-barrier {
  width: 6px;
  background: linear-gradient(to bottom,
    var(--amber) 0%,
    var(--cyan) 50%,
    var(--amber) 100%);
  box-shadow: 0 0 30px rgba(248,178,75,0.45);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}
.barrier-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  background: var(--amber);
  color: #1a1304;
  padding: 9px 22px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.3em;
  white-space: nowrap;
  box-shadow:
    0 0 26px rgba(248,178,75,0.6),
    0 6px 18px rgba(0,0,0,0.5);
  z-index: 20;
  animation: pulseGlow 2.6s ease-in-out infinite;
  text-transform: uppercase;
}
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 22px rgba(248,178,75,0.5), 0 6px 18px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%) rotate(-90deg) scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(248,178,75,0.9), 0 8px 24px rgba(0,0,0,0.65);
    transform: translate(-50%, -50%) rotate(-90deg) scale(1.04);
  }
}

.redacted-feed {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px dashed var(--hair-3);
}
.redacted-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
}
.redaction-bars {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 80%;
}
.redaction-bar {
  height: 22px;
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.05) 20px,
    rgba(255,255,255,0.02) 20px,
    rgba(255,255,255,0.02) 40px);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
  animation: redactPulse 2s ease-in-out infinite;
}
@keyframes redactPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.redaction-text {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--amber);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(248,178,75,0.5);
}

.hash-stream {
  background: var(--bg-deep);
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-family: var(--font-mono);
}
.hash-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: rgba(227,237,255,0.02);
  border-radius: var(--radius-xs);
  border: 1px solid var(--hair);
}
.hash-item:last-child { margin-bottom: 0; }
.hash-label {
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.hash-value {
  color: var(--cyan);
  font-size: 11.5px;
  font-weight: 500;
  word-break: break-all;
  text-align: right;
}

.data-sovereignty-info {
  background: rgba(125,211,252,0.04);
  border: 1px solid rgba(125,211,252,0.2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 16px;
  line-height: 1.6;
}

/* Responsive split */
@media (max-width: 900px) {
  .simulator-split-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 6px auto;
  }
  .privacy-barrier {
    width: 100%;
    height: 6px;
    min-height: 6px;
  }
  .barrier-label {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  /* pulseGlow re-applies rotate(-90deg) on every frame, so the rule above alone
     is overwritten by the animation and the label lies sideways across a 6px
     horizontal rail. Redefine the keyframes inside the query instead. */
  @keyframes pulseGlow {
    0%, 100% {
      box-shadow: 0 0 22px rgba(248,178,75,0.5), 0 6px 18px rgba(0,0,0,0.5);
      transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    50% {
      box-shadow: 0 0 40px rgba(248,178,75,0.9), 0 8px 24px rgba(0,0,0,0.65);
      transform: translate(-50%, -50%) rotate(0deg) scale(1.04);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════
   SIGNATURE DEVICES — DELIBERATELY NONE

   This sheet used to carry a `.frame-marks` overlay: corner crosshairs fixed
   to the viewport, borrowed from app/styles.css because arba-system.css draws
   its own off `.frame`, a wrapper these pages do not use.

   It is gone, and the markup that used it is gone with it, for the reason
   app/styles.css records against its own copy: the marks are FOR CHROME-LESS
   PAGES ONLY. All three pages here carry an opaque `.topbar` and a `.footer`
   bar, and the bottom-right mark (13px, inset 16px) lands inside the footer's
   22px right pad, on top of the mission strip — at z-index 5 over a static
   footer, so it paints over the text. Moving the pair to the top puts them
   under the topbar instead. There is no viewport position that clears both
   bars, so the rule is which PAGES get the marks, not where the marks go.
   Do not re-add the div.
   ═══════════════════════════════════════════════════════════════ */

/* ── Focus ──────────────────────────────────────────────────────
   arba-system.css ships no focus indicator at all, and two rules in this
   sheet used to set `outline: none` outright — so a keyboard operator on
   these pages had nothing to follow. :focus-visible rather than :focus, so
   a mouse click on a mode card leaves no ring behind but Tab always does. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ── Evidence ───────────────────────────────────────────────────
   Mono, and wrapping on character boundaries: a 64-character hash has no
   spaces in it and would otherwise force the whole page to scroll sideways.
   Same selector list as app/styles.css so a page moved between the two
   sheets keeps its appearance. */
.evidence {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: -0.01em;
  color: var(--ink-2);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* arba-system.css already defines .field-label (mono, tracked out, --ink-3).
   Only the gap under it, when it heads an evidence block rather than an input,
   is new — so that is the only thing declared here. */
.field-label { margin-bottom: 6px; }

/* Result panels: green = a record that checked out, cyan = a reference value. */
.result-panel {
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--hair-2);
  border-radius: var(--radius-sm);
  background: rgba(227,237,255,0.02);
}
.result-panel--good { border-color: rgba(74,222,128,0.3);  background: rgba(74,222,128,0.08); }
.result-panel--ref  { border-color: rgba(125,211,252,0.3); background: rgba(125,211,252,0.08); }
.result-panel--ref .evidence  { color: var(--cyan); }
.result-panel--good .evidence { color: var(--green); }

/* The frosted "patent pending" veil over the history panel. */
.locked-veil {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: rgba(7,11,20,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.locked-veil-inner { max-width: 500px; padding: 30px; text-align: center; }
.locked-veil .eyebrow { justify-content: center; margin-bottom: 12px; }
.locked-veil h3 {
  margin: 0 0 10px 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
}
.locked-veil p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* Edge video frame on the device side of the split screen. */
.video-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: #000;
}

/* ── File inputs ────────────────────────────────────────────────────────────
   arba-system.css styles text, email, password and textarea but not the native
   file picker, so the .wbt chooser shipped a white OS button into the middle of
   a dark instrument panel. */
input[type="file"] {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-2);
  max-width: 100%;
}
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--hair-2);
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
input[type="file"]:hover::file-selector-button {
  border-color: var(--cyan);
  background: var(--bg-surface-2);
}