/* ============================================================================
   READOUT — an overflow-proof detail surface that overlays the locked viewport.

   Text that won't fit a box (IDs, keys, credentials, long status/errors) opens
   here in full instead of running off-edge. Responsive purely via CSS: a docked
   panel on the RIGHT for desktop, a BOTTOM sheet for mobile. One shared node,
   CSS-only show/hide — computationally cheap.
   ============================================================================ */

.readout {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: var(--rd-card);
  color: var(--rd-ink);
  border: 1px solid var(--rd-ink-2);
  box-shadow: var(--rd-frame);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
.readout.open {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop / wide: dock to the right edge, full height. */
@media (min-width: 700px) {
  .readout {
    top: 0; right: 0; bottom: 0;
    width: min(24rem, 40vw);
    border-right: 0;
    transform: translateX(100%);
  }
  .readout.open { transform: translateX(0); }
}

/* Mobile / narrow: a bottom sheet. */
@media (max-width: 699.98px) {
  .readout {
    left: 0; right: 0; bottom: 0;
    max-height: 50dvh;
    border-bottom: 0;
    border-radius: var(--rd-radius) var(--rd-radius) 0 0;
    transform: translateY(100%);
  }
  .readout.open { transform: translateY(0); }
}

.readout-h {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--rd-rule);
  flex-shrink: 0;
}
.readout-h h3 {
  flex: 1; min-width: 0;
  font-family: var(--rd-font-display); font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rd-ink-2);
}
.readout-h button { font-size: .58rem; padding: .12rem .5rem; border-width: 1px; }

.readout-b {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: .85rem .85rem 1rem;
  font-family: var(--rd-font-body); font-size: .95rem; line-height: 1.6; color: var(--rd-ink);
  white-space: pre-wrap;          /* preserve newlines (e.g. pretty-printed JSON) */
  overflow-wrap: anywhere;
  scrollbar-width: thin; scrollbar-color: var(--rd-rule) transparent;
}
/* Values worth copying (keys, credentials, ids) read as monospace and are selectable. */
.readout-b.value { font-family: var(--rd-font-mono); font-size: .88rem; user-select: all; -webkit-user-select: all; }

/* Anything that opens its full text in the readout signals it is tappable. */
[data-readout] { cursor: pointer; }