/* DeltaV Cockpit — styles for [deltav_price], [deltav_cockpit], [deltav_liquidity_lock].
   (c) 2026 BANKON — Apache-2.0 — all rights reserved.
   Crew Dragon idiom from cockpit.zip styled.css: black field, monospace telemetry, hairline
   strokes, one accent per panel. Everything is scoped under .dvc, with `all: initial` on the
   root so a WordPress theme cannot bleed in. */

.dvc {
  all: initial;
  --dvc-black: #05070A;
  --dvc-panel: #0A0E14;
  --dvc-line: #1B2430;
  --dvc-white: #E8EEF2;
  --dvc-dim: #7A8A99;
  --dvc-plasma: #3FA9F5;
  --dvc-ignition: #FF7A18;
  --dvc-danger: #FF3B30;
  --dvc-go: #36D399;
  --dvc-gold: #d4af37;
  --dvc-gold-soft: rgba(212, 175, 55, .30);
  --dvc-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;
  --dvc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: block;
  box-sizing: border-box;
  position: relative;
  margin: 24px auto;
  max-width: 1200px;
  background: var(--dvc-black);
  color: var(--dvc-white);
  font-family: var(--dvc-mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
}
.dvc *, .dvc *::before, .dvc *::after { box-sizing: border-box; }
.dvc p, .dvc h2, .dvc ul, .dvc table { margin: 0; padding: 0; }
.dvc a { color: var(--dvc-plasma); text-decoration: none; border-bottom: 1px dotted currentColor; }
.dvc a:hover { border-bottom-style: solid; }
.dvc code { font-family: var(--dvc-mono); }
.dvc [hidden] { display: none !important; }

.dvc .dvc-plasma { color: var(--dvc-plasma); }
.dvc .dvc-ignition { color: var(--dvc-ignition); }
.dvc .dvc-danger { color: var(--dvc-danger); }
.dvc .dvc-go { color: var(--dvc-go); }
.dvc .dvc-white { color: var(--dvc-white); }
.dvc .dvc-dim { color: var(--dvc-dim); }
.dvc .dvc-gold { color: var(--dvc-gold); }

/* ── buttons ── */
.dvc .dvc-btn {
  display: inline-block; padding: 8px 14px; background: transparent; border: 1px solid var(--dvc-line);
  border-radius: 4px; color: var(--dvc-white); font-family: var(--dvc-mono); font-size: 11px;
  letter-spacing: .12em; cursor: pointer; text-transform: uppercase; transition: background .2s, color .2s;
  text-decoration: none; line-height: 1.3;
}
.dvc .dvc-btn:hover { border-color: var(--dvc-dim); }
.dvc .dvc-btn:focus-visible { outline: 2px solid var(--dvc-plasma); outline-offset: 2px; }
.dvc .dvc-btn-ignition { border-color: var(--dvc-ignition); color: var(--dvc-ignition); }
.dvc .dvc-btn-ignition:hover { background: var(--dvc-ignition); color: var(--dvc-black); }
.dvc .dvc-btn-plasma { border-color: var(--dvc-plasma); color: var(--dvc-plasma); }
.dvc .dvc-btn-plasma:hover { background: var(--dvc-plasma); color: var(--dvc-black); }
.dvc .dvc-btn-danger { border-color: var(--dvc-danger); color: var(--dvc-danger); }
.dvc .dvc-btn-danger:hover { background: var(--dvc-danger); color: var(--dvc-black); }
.dvc .dvc-btn-go { border-color: var(--dvc-go); color: var(--dvc-go); }
.dvc .dvc-btn-go:hover { background: var(--dvc-go); color: var(--dvc-black); }
.dvc .dvc-btn-ghost { color: var(--dvc-dim); }
.dvc .dvc-btn-gold { background: linear-gradient(180deg, #f0d67a, #d4af37); border-color: #e7c65a; color: #0b0b10; font-weight: 700; }
.dvc .dvc-btn:disabled, .dvc .dvc-btn.is-disabled { border-color: var(--dvc-line); color: var(--dvc-dim); cursor: default; background: transparent; }

/* ── shared: frame, CA row, pairs ── */
.dvc .dvc-frame { padding: 28px 26px 22px; }
.dvc .dvc-eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--dvc-plasma); margin-bottom: 10px; }
.dvc .dvc-headline { font-size: 32px; font-weight: 700; color: #fff; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.dvc .dvc-unit { font-size: 12px; font-weight: 400; color: var(--dvc-dim); letter-spacing: .1em; }
.dvc .dvc-sub, .dvc .dvc-note { font-size: 12px; color: var(--dvc-dim); margin-top: 6px; }
.dvc .dvc-seat { font-size: 12px; color: var(--dvc-white); margin-top: 14px; border-left: 2px solid var(--dvc-ignition); padding-left: 10px; }
.dvc .dvc-foot { font-size: 11px; color: var(--dvc-dim); margin-top: 18px; line-height: 1.6; }

.dvc .dvc-ca {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px;
  padding: 12px; border: 1px solid var(--dvc-line); border-radius: 6px; background: var(--dvc-panel);
}
.dvc .dvc-label { width: 100%; font-size: 10px; letter-spacing: .18em; color: var(--dvc-dim); text-transform: uppercase; }
.dvc .dvc-addr { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow-x: auto; scrollbar-width: none; font-size: clamp(10.5px, 3vw, 14px); color: var(--dvc-white); }
.dvc .dvc-addr::-webkit-scrollbar { display: none; }
.dvc .dvc-ca .dvc-btn { flex: none; }
.dvc .dvc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.dvc .dvc-pairs-wrap { margin-top: 18px; overflow-x: auto; }
.dvc .dvc-pairs { width: 100%; border-collapse: collapse; font-size: 12px; }
.dvc .dvc-pairs th { text-align: left; font-weight: 400; font-size: 10px; letter-spacing: .16em; color: var(--dvc-dim); padding: 6px 8px; border-bottom: 1px solid var(--dvc-line); }
.dvc .dvc-pairs td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, .04); white-space: nowrap; }
.dvc .dvc-pairs td[colspan] { white-space: normal; }

/* ── [deltav_price] ── */
.dvc-price { max-width: 640px; border: 1px solid var(--dvc-line); }

/* ── [deltav_cockpit] ── */
.dvc-cockpit { border: 1px solid var(--dvc-line); }
.dvc .dvc-stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; pointer-events: none; }
.dvc .dvc-strip, .dvc .dvc-preflight, .dvc .dvc-grid, .dvc .dvc-foot { position: relative; }
.dvc .dvc-strip {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 18px;
  padding: 10px 18px; border-bottom: 1px solid var(--dvc-line); background: var(--dvc-panel);
}
.dvc .dvc-brand { display: flex; align-items: center; gap: 12px; }
.dvc .dvc-logo { font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.dvc .dvc-sub { margin: 0; font-size: 9px; letter-spacing: .16em; }
.dvc .dvc-telemetry { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 10px; color: var(--dvc-dim); letter-spacing: .1em; }
.dvc .dvc-telemetry b { font-weight: 600; }

.dvc .dvc-preflight { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 18px 26px; text-align: center; }
.dvc.dvc-is-connected .dvc-preflight { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 14px 18px; gap: 10px 16px; }
.dvc.dvc-is-connected .dvc-pf-note, .dvc.dvc-is-connected .dvc-utilities { display: none; }
.dvc .dvc-pf-label { font-size: 11px; color: var(--dvc-dim); letter-spacing: .2em; }
.dvc .dvc-pf-status { font-size: 11px; color: var(--dvc-white); min-height: 1em; }
.dvc .dvc-pf-note { font-size: 11px; color: var(--dvc-dim); max-width: 460px; line-height: 1.7; }
.dvc .dvc-utilities { list-style: none; max-width: 540px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.dvc .dvc-utilities li { font-size: 11px; color: var(--dvc-dim); line-height: 1.5; border-left: 2px solid var(--dvc-line); padding-left: 10px; }
.dvc .dvc-utilities li::before { content: "▸ "; color: var(--dvc-plasma); }

.dvc .dvc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; padding: 12px; }
.dvc .dvc-panel {
  position: relative; background: var(--dvc-panel); border: 1px solid var(--dvc-line); border-radius: 4px;
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
.dvc .dvc-panel-h {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--dvc-line); font-size: 10px; letter-spacing: .18em; color: var(--dvc-dim);
}
.dvc .dvc-panel-b { padding: 14px; flex: 1; min-width: 0; }
.dvc .dvc-span4 { grid-column: span 4; } .dvc .dvc-span5 { grid-column: span 5; }
.dvc .dvc-span7 { grid-column: span 7; } .dvc .dvc-span8 { grid-column: span 8; }
.dvc .dvc-span6 { grid-column: span 6; } .dvc .dvc-span12 { grid-column: span 12; }
.dvc .dvc-hatch {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 120px; padding: 18px; font-size: 10px; letter-spacing: .12em; color: var(--dvc-dim);
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 255, 255, .015) 10px 20px);
}
.dvc .dvc-is-sealed { opacity: .8; }

.dvc .dvc-deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.dvc .dvc-readout { border: 1px solid var(--dvc-line); border-radius: 4px; padding: 10px 12px; }
.dvc .dvc-k { font-size: 9px; color: var(--dvc-dim); letter-spacing: .16em; }
.dvc .dvc-v { font-size: 20px; font-weight: 600; margin-top: 4px; word-break: break-all; }

.dvc .dvc-fuel { display: flex; gap: 16px; }
.dvc .dvc-tank { position: relative; flex: 0 0 64px; min-height: 200px; border: 1px solid var(--dvc-line); border-radius: 3px; overflow: hidden; background: var(--dvc-black); }
.dvc .dvc-tank-fill { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, var(--dvc-ignition), var(--dvc-plasma)); transition: height 1s cubic-bezier(.2, .8, .2, 1); }
.dvc .dvc-fuel-read { flex: 1; min-width: 0; }
.dvc .dvc-readout-lg { font-size: 26px; font-weight: 600; margin: 4px 0; word-break: break-all; }
.dvc .dvc-pill { display: inline-block; margin-top: 12px; padding: 5px 10px; border: 1px solid currentColor; border-radius: 3px; font-size: 10px; letter-spacing: .12em; }
.dvc .dvc-note-sm { font-size: 10px; color: var(--dvc-dim); line-height: 1.6; margin-top: 12px; }
.dvc .dvc-center { text-align: center; }

.dvc .dvc-brobot { display: flex; flex-direction: column; }
.dvc .dvc-brobot-log { flex: 1; max-height: 260px; min-height: 140px; overflow: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.dvc .dvc-brobot-line { font-size: 12px; line-height: 1.45; }
.dvc .dvc-brobot-input { display: flex; gap: 6px; }
.dvc .dvc-brobot-input input {
  flex: 1; min-width: 0; background: var(--dvc-black); border: 1px solid var(--dvc-line); border-radius: 3px;
  color: var(--dvc-white); font-family: var(--dvc-mono); font-size: 12px; padding: 7px 10px; outline: none;
}
.dvc .dvc-brobot-input input:focus { border-color: var(--dvc-plasma); }

.dvc .dvc-demo { font-size: 10px; color: var(--dvc-ignition); border: 1px dashed var(--dvc-ignition); border-radius: 3px; padding: 8px 10px; margin-bottom: 10px; line-height: 1.5; }
.dvc .dvc-prop { border: 1px solid var(--dvc-line); border-radius: 3px; padding: 10px; margin-bottom: 10px; }
.dvc .dvc-prop-meta { font-size: 9px; color: var(--dvc-dim); letter-spacing: .1em; }
.dvc .dvc-prop-title { font-size: 13px; margin: 5px 0; }
.dvc .dvc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 10px; }
.dvc .dvc-qbar { flex: 1; height: 4px; background: var(--dvc-line); border-radius: 2px; overflow: hidden; }
.dvc .dvc-qbar > div { height: 100%; background: var(--dvc-plasma); }
.dvc .dvc-prop-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.dvc .dvc-cmap { position: relative; height: 200px; }
.dvc .dvc-cmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dvc .dvc-cnode { position: absolute; transform: translate(-50%, -50%); text-align: center; }
.dvc .dvc-cdot { width: 10px; height: 10px; border-radius: 50%; margin: 0 auto; background: var(--dvc-plasma); }
.dvc .dvc-cdot.is-home { width: 16px; height: 16px; background: var(--dvc-ignition); box-shadow: 0 0 16px var(--dvc-ignition); }
.dvc .dvc-cname { font-size: 9px; margin-top: 4px; letter-spacing: .08em; }
.dvc .dvc-crole { font-size: 8px; color: var(--dvc-dim); }

.dvc .dvc-advisory { border: 1px solid var(--dvc-ignition); border-radius: 3px; padding: 12px 14px; margin-bottom: 14px; }
.dvc .dvc-adv-h { font-size: 11px; color: var(--dvc-ignition); letter-spacing: .14em; margin-bottom: 6px; }
.dvc .dvc-adv-b { font-size: 12px; line-height: 1.6; }
.dvc .dvc-log-entry { display: flex; gap: 12px; margin-bottom: 9px; }
.dvc .dvc-log-stamp { font-size: 10px; color: var(--dvc-ignition); letter-spacing: .12em; flex: 0 0 140px; }
.dvc .dvc-log-text { font-size: 11px; color: var(--dvc-dim); line-height: 1.5; }

.dvc-cockpit > .dvc-foot { margin: 0; padding: 14px 18px; text-align: center; font-size: 9px; letter-spacing: .14em; border-top: 1px solid var(--dvc-line); }

/* ── [deltav_liquidity_lock] — the gold proof block ── */
.dvc-lock { max-width: 560px; background: linear-gradient(180deg, #101017 0%, #0b0b10 100%); border: 1px solid var(--dvc-gold-soft); border-radius: 14px; font-family: var(--dvc-sans); }
.dvc .dvc-lock-headline { font-size: 26px; line-height: 1.15; font-weight: 700; color: #fff; }
.dvc .dvc-lock-headline em { color: var(--dvc-gold); font-style: normal; padding: 0 6px; }
.dvc .dvc-lock-remaining { margin: 20px 0 2px; font-size: 22px; font-weight: 600; color: var(--dvc-gold); font-family: var(--dvc-mono); }
.dvc .dvc-lock-unlock { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dvc-dim); font-family: var(--dvc-mono); }
.dvc .dvc-proof { list-style: none; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .06); }
.dvc .dvc-proof li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 0; font-size: 12.5px; font-family: var(--dvc-mono); }
.dvc .dvc-proof li > span:first-child { color: var(--dvc-dim); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.dvc-lock a { color: var(--dvc-gold); }

/* ── small screens: one column, 16px gutters, no sideways scroll ── */
@media (max-width: 900px) {
  .dvc .dvc-panel { grid-column: span 12 !important; }
}
@media (max-width: 480px) {
  .dvc { margin: 16px 0; border-radius: 6px; }
  .dvc .dvc-frame { padding: 22px 16px 18px; }
  .dvc .dvc-grid { padding: 8px; gap: 8px; }
  .dvc .dvc-strip { padding: 10px 16px; }
  .dvc .dvc-headline { font-size: 26px; }
  .dvc .dvc-lock-headline { font-size: 22px; }
  .dvc .dvc-log-entry { flex-direction: column; gap: 2px; }
  .dvc .dvc-log-stamp { flex: none; }
  .dvc .dvc-fuel { flex-direction: column; }
  .dvc .dvc-tank { flex: none; min-height: 18px; height: 18px; width: 100%; }
  .dvc .dvc-tank-fill { height: 100% !important; right: auto; width: var(--dvc-fill, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .dvc .dvc-stars { display: none; }
  .dvc * { transition: none !important; }
}

/* ── participant self-service (participant.js) ─────────────────────────────── */
.dvc .dvc-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px 14px; margin: 0; font: 12px/1.5 var(--dvc-mono); }
.dvc .dvc-stats dt { color: var(--dvc-dim); letter-spacing: .08em; }
.dvc .dvc-stats dd { margin: 0; color: var(--dvc-white); overflow-wrap: anywhere; }
.dvc .dvc-stats dd[title] { cursor: help; text-decoration: underline dotted var(--dvc-line); text-underline-offset: 3px; }
.dvc .dvc-self { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dvc-line); }
.dvc .dvc-self .dvc-k { margin-bottom: 8px; }
.dvc .dvc-self-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dvc .dvc-self-row input { flex: 1 1 160px; min-width: 0; min-height: 36px; padding: 0 10px; background: var(--dvc-black); color: var(--dvc-white);
  border: 1px solid var(--dvc-line); border-radius: 6px; font: 13px var(--dvc-mono); }
.dvc .dvc-self-row input:focus-visible { outline: 2px solid var(--dvc-plasma); outline-offset: 1px; }
.dvc .dvc-btn[disabled] { opacity: .4; cursor: not-allowed; }
.dvc .dvc-self-status { min-height: 1.4em; margin: 8px 0 0; font: 12px var(--dvc-mono); color: var(--dvc-dim); }
.dvc .dvc-self-status a { color: var(--dvc-plasma); }
@media (max-width: 560px) { .dvc .dvc-stats { grid-template-columns: 1fr; } .dvc .dvc-stats dd { margin-bottom: 6px; } }
