/* ============================================================
   CATBACK faq — help terminal styles (#faq-body).
   Palette/fonts strictly from tokens.css custom properties.
   ============================================================ */

/* ---- DESK 05: the customer service kiosk --------------------
   The terminal sits in a charcoal kiosk shell standing on a
   plinth, the way a self-service point stands on a branch floor. */
#faq-body {
  position: relative;
  padding-bottom: 30px;
}

.faq-term {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background-color: var(--ink-3);        /* opaque over the room */
  box-shadow:
    0 0 0 var(--px) var(--forest),
    0 0 0 calc(3 * var(--px)) var(--charcoal),
    0 0 0 calc(4 * var(--px)) var(--shade-soft),
    0 18px 30px var(--shade);
}

/* the kiosk plinth the shell stands on */
.faq-term::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(340px, 58%);
  height: 22px;
  margin-top: calc(4 * var(--px));
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(180deg,
      var(--charcoal) 0 6px,
      var(--forest-2) 6px 9px,
      var(--charcoal) 9px 16px,
      var(--shade) 16px 22px);
  box-shadow: 0 0 0 var(--px) var(--shade-soft);
}

/* ---- titlebar ---------------------------------------------- */
.faq-titlebar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  /* charcoal kiosk hood with an emerald service stripe */
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, 0.12) 3px 4px),
    linear-gradient(180deg, var(--charcoal) 0 62%, var(--c-emerald) 62% 100%);
  border-bottom: var(--px) solid var(--forest-2);
  box-shadow: inset 0 var(--px) 0 0 rgba(255, 255, 255, 0.14);
}
/* status lamps — branch hues; red is reserved for real errors */
.faq-dots { display: flex; gap: 6px; }
.faq-dot {
  width: 10px;
  height: 10px;
  display: block;
  box-shadow: 0 0 0 var(--px) rgba(0, 0, 0, 0.4);
}
.faq-dot--alert { background: var(--terminal-dim); }
.faq-dot--amber { background: var(--gold); }
.faq-dot--ok    { background: var(--atm-green); }

.faq-title {
  flex: 1;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--ink-3);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.faq-clear {
  min-height: 40px;
  min-width: 64px;
  padding: 8px 14px;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ink);
  background: var(--amber);
  border: 0;
  cursor: pointer;
  box-shadow:
    0 var(--px) 0 var(--px) var(--ink),
    inset 0 calc(-2 * var(--px)) 0 rgba(0, 0, 0, 0.25);
  transition: transform var(--dur-fast) var(--ease-snap);
}
.faq-clear:hover { transform: translateY(-1px); }
.faq-clear:active { transform: translateY(1px); }

/* ---- output / scrollback ------------------------------------ */
.faq-output {
  height: clamp(280px, 44vh, 440px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px 10px;
  font-family: var(--font-term);
  font-size: 19px;
  line-height: 1.4;
  color: var(--terminal-soft);
  scrollbar-width: thin;
  scrollbar-color: var(--terminal-dim) var(--ink-2);
}
/* chunky pixel scrollbar (webkit) */
.faq-output::-webkit-scrollbar { width: 14px; }
.faq-output::-webkit-scrollbar-track {
  background: var(--ink-2);
  border-left: var(--px) solid var(--forest-2);
}
.faq-output::-webkit-scrollbar-thumb {
  background: var(--terminal-dim);
  border: 3px solid var(--ink-2);
}
.faq-output::-webkit-scrollbar-thumb:hover { background: var(--terminal); }

.faq-line { margin: 0 0 7px; overflow-wrap: break-word; }
.faq-line--dim { color: var(--terminal-dim); }
.faq-line--cmd { color: var(--terminal); }
.faq-line--cmd .faq-prompt { color: var(--terminal-dim); }
.faq-line--ans { color: var(--terminal-soft); margin-bottom: 14px; }
.faq-line--link { margin: -8px 0 16px; }
.faq-link { color: var(--sol-cyan); text-decoration: underline; }
.faq-link:hover { color: var(--terminal); }

/* ---- blinking block cursor ---------------------------------- */
.faq-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--terminal);
  box-shadow: 0 0 6px var(--glow-terminal);
  animation: cb-faq-blink 1.06s steps(1, end) infinite;
}
@keyframes cb-faq-blink {
  0%, 54% { opacity: 1; }
  55%, 100% { opacity: 0; }
}
body[data-motion="reduce"] .faq-cursor { animation: none; }

/* ---- query menu --------------------------------------------- */
.faq-menu {
  border-top: var(--px) solid var(--forest-2);
  padding: 12px 12px 14px;
}
.faq-menu-label {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--terminal-dim);
  margin: 2px 4px 10px;
}
.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 2px 16px;
}
.faq-q {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  background: transparent;
  border: var(--px) solid transparent;
  color: var(--terminal-soft);
  font-family: var(--font-term);
  font-size: 19px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-snap);
}
.faq-q:hover,
.faq-q:focus-visible {
  background: var(--forest);
  border-color: var(--forest-2);
  color: var(--terminal);
  transform: translateX(4px);
}
.faq-q:active { transform: translateX(4px) translateY(1px); }
.faq-q-prompt { color: var(--terminal-dim); flex: 0 0 auto; }
.faq-q:hover .faq-q-prompt,
.faq-q:focus-visible .faq-q-prompt { color: var(--gold); }
.faq-q-text { flex: 1; }

/* ============================================================
   Micro-interaction + CRT pass (additive)
   ============================================================ */

.faq-term { position: relative; }   /* anchors the wipe overlay */

/* ---- CRT glass: stepped edge vignette + phosphor glow --------
   Inset shadows paint on the element box, so the vignette stays
   put while the scrollback scrolls beneath it. Stepped rings of
   the same token color stack into a chunky vignette. */
.faq-output {
  text-shadow: 0 0 6px var(--glow-soft);
  box-shadow:
    inset 0 0 0 calc(2 * var(--px)) var(--scanline),
    inset 0 0 0 calc(6 * var(--px)) var(--scanline),
    inset 0 0 0 calc(12 * var(--px)) var(--scanline);
}
.faq-line--cmd { text-shadow: 0 0 8px var(--glow-soft); }

/* ---- query buttons: "> " prompt slides in on hover/focus ----- */
.faq-q-prompt {
  position: relative;
  transition: color var(--dur-fast) var(--ease-snap);
}
.faq-q-prompt::after {
  content: '>';
  content: '>' / '';                /* decorative for AT where supported */
  position: absolute;
  inset: 0;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-0.45em);
  transition:
    transform var(--dur-fast) var(--ease-snap),
    opacity var(--dur-fast) var(--ease-snap);
}
.faq-q:hover .faq-q-prompt,
.faq-q:focus-visible .faq-q-prompt { color: transparent; }
.faq-q:hover .faq-q-prompt::after,
.faq-q:focus-visible .faq-q-prompt::after {
  opacity: 1;
  transform: translateX(0);
}

/* ---- one-off phosphor brighten when an answer completes ------- */
.faq-line--flash { animation: faq-flash 640ms var(--ease-mech) 1; }
@keyframes faq-flash {
  0% {
    color: var(--white-hi);
    text-shadow: 0 0 12px var(--glow-terminal);
  }
  100% {
    color: var(--terminal-soft);
    text-shadow: 0 0 6px var(--glow-soft);
  }
}

/* ---- CLEAR: dark band screen-wipe (transform/opacity only) ---- */
.faq-wipe {
  position: absolute;
  left: 0; right: 0;
  overflow: hidden;
  pointer-events: none;
}
.faq-wipe::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 45%;
  opacity: 0.92;
  transform: translateY(-110%);
  background: linear-gradient(180deg,
    transparent 0 10%,
    var(--ink) 10% 90%,
    transparent 90% 100%);
  animation: faq-wipe 460ms steps(14, end) 1 forwards;
}
@keyframes faq-wipe {
  from { transform: translateY(-110%); }
  to   { transform: translateY(250%); }
}

/* ---- status footer line ---------------------------------------- */
.faq-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 8px;
  border-top: var(--px) solid var(--forest-2);
  font-family: var(--font-term);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--terminal-dim);
}
.faq-status::before {
  content: '';
  flex: 0 0 auto;
  width: 8px; height: 8px;
  background: var(--terminal);
  box-shadow: 0 0 6px var(--glow-terminal);
}
.faq-status-sep { color: var(--forest-2); }

/* ---- mobile -------------------------------------------------- */
@media (max-width: 600px) {
  .faq-output { height: 300px; font-size: 18px; }
  .faq-q { font-size: 18px; }
  .faq-titlebar { gap: 8px; }
}