/* ============================================================
   MB · REDACT ;  outbound payload inspector (MacBook demo)
   Amber --warm = detected raw PII (not yet safe).
   Cyan --see = masked token (safe). Green --act only for the
   final released confirmation.
   Prefix: rd-  |  Consumes tokens.css + base.css only.
   Fixed design stage: 720×450 (the page's .mac-fit wrapper sizes
   the root and scales it into the MacBook screen);
   @media ≤980px viewport the page renders the stage at 520×325.
   ============================================================ */

.rd-app {
  position: absolute; /* fallback; .mac-screen .mac-fit overrides size + scale */
  inset: 0;
  z-index: 1; /* < 30: notch is 40, glass glare is 50 */
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  color: var(--fg-muted);
  background: var(--bg);
  overflow: hidden;
  user-select: none;
}
/* faint captured-screen scan-line texture */
.rd-app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(var(--line) 0 1px, transparent 1px 4px);
  opacity: 0.13;
}
.rd-app > * { position: relative; z-index: 1; }

/* ---------- titlebar ---------- */
.rd-bar {
  flex: none;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
.rd-dots { display: inline-flex; gap: 5px; flex: none; }
.rd-dots i { width: 6px; height: 6px; border-radius: 50%; }
.rd-dots i:nth-child(1) { background: var(--danger); opacity: 0.72; }
.rd-dots i:nth-child(2) { background: var(--warm); opacity: 0.72; }
.rd-dots i:nth-child(3) { background: var(--act); opacity: 0.72; }
.rd-title {
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--fg-dim);
  white-space: nowrap;
}
.rd-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-dim);
}
.rd-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-dim); flex: none; }

/* state → chrome color: held amber, scanning/masked cyan, released green */
.rd-app[data-rd-state="held"] .rd-status { color: var(--warm); }
.rd-app[data-rd-state="held"] .rd-status-dot { background: var(--warm); }
.rd-app[data-rd-state="scanning"] .rd-status,
.rd-app[data-rd-state="masked"] .rd-status { color: var(--see); }
.rd-app[data-rd-state="scanning"] .rd-status-dot,
.rd-app[data-rd-state="masked"] .rd-status-dot { background: var(--see); }
.rd-app[data-rd-state="scanning"] .rd-status-dot { animation: rd-dot 0.9s var(--ease) infinite alternate; }
.rd-app[data-rd-state="released"] .rd-status { color: var(--act); }
.rd-app[data-rd-state="released"] .rd-status-dot { background: var(--act); box-shadow: 0 0 6px var(--act-glow); }
@keyframes rd-dot { from { opacity: 1; } to { opacity: 0.35; } }

/* ---------- main stage ---------- */
.rd-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 22px;
}
/* stage fills the zone: the card centers in the free space (auto
   margins, so overflow degrades to top-aligned instead of clipping
   both edges), the queue line anchors at the bottom of the zone */
.rd-stage {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* payload card */
.rd-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: auto; /* vertical + horizontal centering within the stage */
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease),
    border-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.rd-card--pre { opacity: 0; transform: translateY(6px); }
.rd-card--out { opacity: 0; transform: translateY(-5px); }
.rd-app[data-rd-state="released"] .rd-card {
  border-color: var(--act-soft);
  box-shadow: var(--shadow-1), 0 0 34px -16px var(--act-glow);
}

.rd-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  color: var(--fg-dim);
  white-space: nowrap;
}

.rd-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 2.2; /* interline gap ≥ tag height: tags never cover text */
  color: var(--fg);
  padding: 14px 16px 16px;
  overflow-wrap: break-word;
}

/* ---------- PII span: plain → hot (amber) → token (cyan) ---------- */
.rd-pii {
  position: relative;
  display: inline-block;
  line-height: 1.25; /* box hugs the text; highlight/brackets/tag stay off neighboring lines */
  white-space: nowrap;
  padding: 0 3px;
  margin: 0 -3px; /* highlight bleeds without shifting the text */
  border-radius: 2px;
  transform-origin: 0 50%;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.rd-pii--hot { background: var(--warm-soft); color: var(--warm); }

/* corner brackets (site signature, own animatable copy) */
.rd-pii::after {
  content: "";
  position: absolute;
  inset: -4px -3px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  --rdc: var(--warm);
  --rdl: 6px;
  --rdt: 1px;
  background:
    linear-gradient(var(--rdc),var(--rdc)) top left,    linear-gradient(var(--rdc),var(--rdc)) top left,
    linear-gradient(var(--rdc),var(--rdc)) top right,    linear-gradient(var(--rdc),var(--rdc)) top right,
    linear-gradient(var(--rdc),var(--rdc)) bottom left,  linear-gradient(var(--rdc),var(--rdc)) bottom left,
    linear-gradient(var(--rdc),var(--rdc)) bottom right, linear-gradient(var(--rdc),var(--rdc)) bottom right;
  background-repeat: no-repeat;
  background-size:
    var(--rdl) var(--rdt), var(--rdt) var(--rdl),
    var(--rdl) var(--rdt), var(--rdt) var(--rdl),
    var(--rdl) var(--rdt), var(--rdt) var(--rdl),
    var(--rdl) var(--rdt), var(--rdt) var(--rdl);
}
.rd-pii--hot::after { opacity: 1; animation: rd-brk 0.28s var(--ease-out) both; }
@keyframes rd-brk {
  from { opacity: 0; transform: scale(1.3); }
  to   { opacity: 1; transform: scale(1); }
}

/* masked token */
.rd-pii--tok {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--see);
  background: var(--see-soft);
  border: 1px solid var(--see-glow);
  border-radius: 3px;
  padding: 1px 4px;
  margin: 0;
}

/* in-place flip: squash-x hides the raw→token text swap at midpoint */
.rd-pii--flip { animation: rd-flip 0.34s var(--ease) both; }
@keyframes rd-flip {
  0%   { transform: scaleX(1); }
  40%  { transform: scaleX(0.45); opacity: 0.25; }
  60%  { transform: scaleX(0.45); opacity: 0.3; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* detection tag riding the span's top-left corner, inside the leading
   (total height ~11.5px: 7.5px type + border + padding) */
.rd-tag {
  position: absolute;
  z-index: 3;
  left: -3px;
  bottom: calc(100% + 1px);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 7.5px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--warm);
  background: var(--bg-1);
  border: 1px solid var(--warm-line);
  border-radius: 2px;
  padding: 1px 3px;
  white-space: nowrap;
  animation: rd-tag-in 0.2s var(--ease-out) both;
}
@keyframes rd-tag-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- scan sweep (clipped to the card) ---------- */
.rd-scanclip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}
.rd-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 48px;
  opacity: 0;
  background: linear-gradient(180deg, transparent 0%, var(--see-soft) 55%, var(--see-glow) 100%);
}
.rd-scanline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--see);
  box-shadow: 0 0 8px var(--see-glow);
  opacity: 0.9;
}
.rd-scanline--on { opacity: 1; animation: rd-sweep 0.95s linear both; }
@keyframes rd-sweep {
  from { transform: translateY(-52px); }
  to   { transform: translateY(260px); }
}

/* queue hint anchored at the bottom of the stage */
.rd-queue {
  flex: none;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  white-space: nowrap;
}
.rd-queue i { width: 5px; height: 5px; border: 1px solid var(--fg-dim); border-radius: 50%; flex: none; }

/* ---------- status footer ---------- */
.rd-foot {
  flex: none;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.rd-count {
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-2) var(--ease);
}
.rd-app[data-rd-state="released"] .rd-count { color: var(--fg-muted); }
.rd-dest {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-dim);
  transition: color var(--dur-2) var(--ease);
}
.rd-dest b {
  font-weight: 700;
  color: var(--act);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.rd-app[data-rd-state="released"] .rd-dest { color: var(--act); }
.rd-app[data-rd-state="released"] .rd-dest b { opacity: 1; transform: none; }

/* ---------- ≤980px viewport: the page renders the stage at 520×325 ---------- */
@media (max-width: 980px) {
  .rd-bar { height: 24px; gap: 8px; padding: 0 11px; }
  .rd-dots { gap: 4px; }
  .rd-dots i { width: 5px; height: 5px; }
  .rd-title { font-size: 8px; }
  .rd-status { font-size: 8px; gap: 5px; }
  .rd-status-dot { width: 4px; height: 4px; }

  .rd-main { padding: 12px 14px; }
  .rd-card { max-width: 460px; }
  .rd-card-head { padding: 6px 10px; font-size: 8px; }
  .rd-body { font-size: 11.5px; line-height: 2.05; padding: 8px 10px 10px; }

  .rd-pii { padding: 0 2px; margin: 0 -2px; }
  .rd-pii::after { inset: -3px -2px; --rdl: 5px; }
  .rd-pii--tok { font-size: 10.5px; padding: 0 3px; margin: 0; }
  .rd-tag { font-size: 6.5px; padding: 0 2px; left: -2px; }

  .rd-scanline { height: 40px; }
  .rd-queue { font-size: 8px; margin-top: 8px; gap: 5px; }
  .rd-queue i { width: 4px; height: 4px; }
  .rd-foot { height: 22px; font-size: 8px; padding: 0 11px; }
}

/* ---------- reduced motion: static masked end state ---------- */
@media (prefers-reduced-motion: reduce) {
  .rd-scanline, .rd-tag { display: none; }
  .rd-card--pre, .rd-card--out { opacity: 1; transform: none; }
}