/* ============================================================
   CATBACK panels.css — interiors of the hero terminal panels,
   the ATM display overlay and the CA bar.
   Placement/sizing of the .term-panel slots is owned by
   hero.css; this file styles what lives inside them.
   ============================================================ */

#panel-left [hidden],
#panel-right [hidden],
#panel-bottom [hidden],
#atm-screen [hidden] { display: none !important; }

/* ---------- pixel header strip ------------------------------ */
.pnl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--forest);
  border-bottom: var(--px) solid var(--forest-2);
  box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ink);
}
.pnl-title {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--terminal);
  text-shadow: 2px 2px 0 var(--ink);
  white-space: nowrap;
}
.pnl-lights { display: flex; gap: 4px; }
.pnl-lights i { width: 6px; height: 6px; background: var(--terminal-dim); }
.pnl-lights i:nth-child(2) { background: var(--amber); }
.pnl-lights i:nth-child(3) { background: var(--alert); }

/* ---------- diagnostic rows --------------------------------- */
.pnl-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 4px;
}
.pnl-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-term);
  font-size: 19px;
  line-height: 1.15;
  min-width: 0;
}
.pnl-k { color: var(--terminal-dim); letter-spacing: 0.5px; white-space: nowrap; }
.pnl-v {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--terminal-soft);
  text-align: right;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pnl-good { color: var(--terminal); }
.pnl-warn { color: var(--amber); }

/* pulsing status dot (stepped, pixel-style — no smooth fade) */
.pnl-dot {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--c-green);
  box-shadow: 0 0 0 var(--px) var(--forest-2), 0 0 8px var(--glow-terminal);
  animation: pnlDotPulse 1.4s step-end infinite;
}
.pnl-dot-off { background: var(--alert); box-shadow: 0 0 0 var(--px) var(--forest-2); animation: none; }
@keyframes pnlDotPulse {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0.4; }
}

/* Solana accent chips */
.pnl-chip { flex: none; width: 8px; height: 8px; box-shadow: 0 0 0 var(--px) var(--ink); }
.pnl-chip-purple { background: var(--sol-purple); }
.pnl-chip-cyan   { background: var(--sol-cyan); }
.pnl-net .js-net { color: var(--sol-cyan); letter-spacing: 1px; }

/* mode value + LOCAL SIM tag */
.pnl-mode[data-mode="SIMULATION"] { color: var(--amber); }
.pnl-mode[data-mode="DEVNET"]     { color: var(--sol-cyan); }
.pnl-mode[data-mode="MAINNET"]    { color: var(--terminal); }
.pnl-tag-local {
  font-family: var(--font-pixel);
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--amber);
  border: var(--px) solid var(--amber);
  padding: 3px 4px 2px;
  margin-left: 4px;
  white-space: nowrap;
}

/* countdown value */
.pnl-count { color: var(--terminal); letter-spacing: 1px; }
.pnl-blink { animation: pnlBlink 0.9s step-end infinite; }
@keyframes pnlBlink {
  0%, 54%  { opacity: 1; }
  55%, 100% { opacity: 0.25; }
}

/* blinking block cursor line */
.pnl-cursorline {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 12px 10px;
  font-family: var(--font-term);
  font-size: 18px;
  color: var(--terminal-dim);
}
.pnl-cursor {
  width: 0.55em;
  height: 1em;
  background: var(--c-green);
  box-shadow: 0 0 6px var(--glow-soft);
  animation: pnlBlink 1.1s step-end infinite;
}

/* ---------- deployment log counters -------------------------- */
.pnl-counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(2 * var(--px));
  padding: 8px 10px 4px;
}
.pnl-counter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  background: var(--ink-2);
  border: var(--px) solid var(--forest-2);
}
.pnl-ck {
  font-family: var(--font-pixel);
  font-size: 7px;
  letter-spacing: 0.5px;
  color: var(--terminal-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pnl-cv {
  font-family: var(--font-term);
  font-size: 20px;
  line-height: 1.05;
  color: var(--terminal);
  text-shadow: 0 0 6px var(--glow-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- scrolling terminal log ---------------------------- */
.pnl-log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  padding: 8px 12px 12px;
  min-height: 196px;
  overflow: hidden;
  font-family: var(--font-term);
  font-size: 18px;
  line-height: 1.2;
}
.pnl-line {
  color: var(--terminal-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pnl-line-dim { color: var(--terminal-dim); opacity: 0.72; }
.pnl-line-ok  { color: var(--terminal); text-shadow: 0 0 6px var(--glow-soft); }
.pnl-line-tx  { color: var(--sol-cyan); }
.pnl-line-err { color: var(--alert); }
.pnl-line-sys { color: var(--terminal-dim); }

/* ---------- ATM screen overlay -------------------------------- */
/* Positioned + sized by panels.js from CB.CONFIG.atmMap.screen;
   background replaced at runtime by the sampled display pixel. */
#atm-screen {
  position: absolute;
  display: none;
  z-index: 3;                 /* above atm-fx, below hotspots */
  overflow: hidden;
  pointer-events: none;
  background: #5cb63d;        /* fallback, matches baked display green */
  image-rendering: pixelated;
}
#atm-screen.scr-on { display: block; }

/* crisp CRT scanlines over the display (stepped, no blur) */
#atm-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.10) 2px 4px);
  pointer-events: none;
}
.scr-inner {
  position: absolute;
  inset: 8% 8%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}
.scr-msg {
  font-family: var(--font-pixel);
  font-size: 1em;
  line-height: 1.5;
  letter-spacing: 1px;
  /* the display is always the ATM art's baked green, so its text stays a
     fixed dark green regardless of the page theme */
  color: #133d16;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.18); /* 1px pixel emboss, no blur */
  word-break: break-word;
  overflow: hidden;
}
.scr-bar {
  font-family: var(--font-term);
  font-size: 1.6em;
  line-height: 1;
  letter-spacing: 2px;
  color: #133d16;
}
#atm-screen.scr-done .scr-msg { font-size: 1.45em; line-height: 1.3; }

/* ---------- CA bar (#panel-bottom interior) ------------------- */
.ca-row {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
}
/* periodic glow pulse to draw the eye (opacity-only animation) */
.ca-row::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 18px var(--glow-terminal), inset 0 0 0 var(--px) var(--terminal-dim);
  opacity: 0;
  animation: caGlow 8.2s var(--ease-mech) infinite;
}
@keyframes caGlow {
  0%, 86%, 100% { opacity: 0; }
  91%, 94%      { opacity: 0.8; }
}
.ca-label {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--terminal);
  text-shadow: 2px 2px 0 var(--ink);
}
.ca-value {
  /* small flex-basis: with a short/placeholder CA the bar is sized to its
     content, and a larger basis makes COPY wrap onto a second line */
  flex: 1 1 40px;
  min-width: 0;
  padding: 8px 10px;
  background: var(--ink-2);
  border: var(--px) solid var(--forest-2);
  font-family: var(--font-term);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 2px;
  color: var(--terminal-soft);
  /* a real 44-char base58 CA wraps onto extra lines — never truncated,
     so it can be read/compared against the mint character by character */
  overflow-wrap: anywhere;
}
.ca-copy {
  flex: none;
  min-width: 64px;
  min-height: 40px;
  padding: 10px 14px;
  border: 0;
  cursor: pointer;
  background: var(--c-green);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: 10px;
  box-shadow: 0 var(--px) 0 var(--px) var(--forest-2), inset 0 calc(-2 * var(--px)) 0 rgba(0, 0, 0, 0.25);
  transition: transform var(--dur-fast) var(--ease-snap), filter var(--dur-fast) var(--ease-snap);
}
.ca-copy:hover { filter: brightness(1.1); transform: translateY(-1px); }
.ca-copy:active { transform: translateY(1px); }
.ca-copy.ca-copied { background: var(--gold); }
.ca-feedback {
  font-family: var(--font-term);
  font-size: 17px;
  line-height: 1.2;
  color: var(--terminal);
  min-height: 1.2em;
}
.ca-feedback .ca-tba { color: var(--amber); }
.ca-feedback.ca-fail { color: var(--alert); }

/* On the desktop grid (hero.css) the CA bar sits in the middle column with
   only ~60px of vertical budget left under the machine — a full 44-char
   base58 CA wraps to two lines there. Tighten the row's rhythm (never the
   address itself: it stays complete, selectable and copyable) so the hero
   still fits 100vh at 1024x768 and up. */
@media (min-width: 900px) {
  .ca-row { gap: 6px 10px; padding: 5px 10px; }
  .ca-value {
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1.03;
    letter-spacing: 1px;   /* keeps base58 characters separable */
  }
}

/* ---------- compact interiors on small screens ----------------- */
@media (max-width: 760px) {
  .pnl-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
    padding: 8px 10px 4px;
  }
  .pnl-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    font-size: 18px;
  }
  .pnl-row .pnl-v { text-align: left; }
  .pnl-row-wide { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .pnl-cursorline { font-size: 17px; padding-bottom: 8px; }
  .pnl-counters { padding: 6px 8px 4px; }
  .pnl-cv { font-size: 18px; }
  .pnl-log { min-height: 150px; font-size: 17px; padding: 6px 10px 10px; }
  .ca-row { padding: 8px 10px; gap: 8px; }
  .ca-value { font-size: 18px; letter-spacing: 1px; }
  .ca-feedback { flex-basis: 100%; }
}