@import url("../../../_ds/fonts.css");
@import url("../../../_ds/theme.css");
@import url("../../../_shared/chrome.css");
@import url("../../../_shared/components.css");
@import url("../../../_shared/audience-switcher.css");

/* ──────────────────────────────────────────────────────────
   /workflows/protected-site-debug — the diagnosis.
   One signature instrument: a blocked request you drive through the
   walls, find the one that stopped you, flip the flags, reach a 200.
   Purple = the diagnostic probe / where you're stopped; teal = a wall
   cleared / a 200. A teal thesis band, a dark closer.
─────────────────────────────────────────────────────────── */
main { position: relative; z-index: 1; }
.back-to-top, .back-to-top * { cursor: none; }
code { font-family: var(--font-code); }

.psd-blur[data-reveal] { opacity: 0; filter: blur(16px); transform: translateZ(0); backface-visibility: hidden;
  will-change: filter, opacity; transition: opacity 0.7s ease, filter 0.7s ease; }
.psd-blur[data-reveal].is-in { opacity: 1; filter: blur(0); transform: translateZ(0); }

/* ═══ Act 1 — The bench ═══ */
.psd-stage { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(36px, 5vh, 60px);
  padding: clamp(116px, 15vh, 168px) var(--page-gutter, 7vw) clamp(56px, 8vh, 96px); }
.psd-stage-head { max-width: 1320px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 80px); align-items: end; }
.psd-h1 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero-xl); line-height: 0.94; letter-spacing: var(--tracking-denser, -0.03em); color: var(--text-primary); }
.psd-stage-sub { margin: 0; font-family: var(--font-base); font-size: var(--mkt-body);
  line-height: 1.55; color: var(--text-secondary); max-width: 46ch; }
.psd-stage-sub code { font-size: 0.92em; color: var(--text-primary); }

/* The rig */
.psd-rig { max-width: 1320px; margin: 0 auto; width: 100%; }
.psd-rig-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: clamp(16px, 2vh, 22px); border-bottom: 1px solid var(--border-subtle); }
.psd-rig-url { font-family: var(--font-code); font-size: clamp(12.5px, 1vw, 15px); color: var(--text-secondary); }
.psd-rig-status { font-family: var(--font-code); font-size: var(--mkt-body-xs); letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap; transition: color 0.45s ease; }
.psd-rig-status[data-state="block"] { color: var(--text-quaternary); }
.psd-rig-status[data-state="ok"] { color: #7ADAE6; }

/* Lane: origin -> track of walls -> the page */
.psd-lane { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch;
  gap: clamp(14px, 2vw, 34px); margin: clamp(34px, 5vh, 56px) 0 clamp(28px, 4vh, 40px); }
.psd-origin, .psd-target { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-width: clamp(74px, 9vw, 116px); text-align: center; }
.psd-origin { border-left: 1px solid var(--border-subtle); padding-left: clamp(10px, 1.4vw, 18px); }
.psd-node-label { font-family: var(--font-code); font-size: clamp(10.5px, 0.9vw, 12px); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-tertiary); }
.psd-target-lock { width: clamp(28px, 3vw, 38px); height: clamp(28px, 3vw, 38px); color: var(--text-quaternary); transition: color 0.5s ease; }
.psd-target.is-open .psd-target-lock { color: #7ADAE6; }
.psd-target.is-open .psd-lock-shackle { transform: translateY(-3px) rotate(-12deg); transform-origin: 16px 7px; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.psd-target.is-open .psd-node-label { color: var(--text-primary); }

.psd-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: clamp(12px, 1.6vw, 26px); align-items: stretch; min-height: clamp(132px, 18vh, 188px); }
/* the rail the packet rides */
.psd-track::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px;
  background: var(--border-subtle); transform: translateY(-50%); z-index: 0; }
.psd-packet { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: #7C4FE8; box-shadow: 0 0 0 6px color-mix(in srgb, #7C4FE8 20%, transparent);
  transform: translate(-50%, -50%); z-index: 4; transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1), top 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

.psd-gate { position: relative; z-index: 1; border: 1px solid var(--border-subtle); border-radius: 14px;
  background: var(--background); display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(12px, 1.4vw, 18px); transition: border-color 0.45s ease, opacity 0.45s ease, box-shadow 0.45s ease; }
.psd-gate.is-idle { opacity: 0.32; }
.psd-gate-k { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-lead); line-height: 1.05;
  letter-spacing: var(--tracking-dense, -0.02em); color: var(--text-primary); }
.psd-gate-mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--text-quaternary);
  display: grid; place-items: center; transition: all 0.45s ease; position: relative; }
.psd-gate-mark::before, .psd-gate-mark::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
/* default (active, not yet resolved): a faint cross */
.psd-gate-mark { color: var(--text-quaternary); }
.psd-gate-mark::before { width: 11px; height: 1.5px; transform: rotate(45deg); }
.psd-gate-mark::after { width: 11px; height: 1.5px; transform: rotate(-45deg); }
/* blocked wall: the diagnostic probe lights it purple */
.psd-gate.is-block { border-color: #7C4FE8; box-shadow: inset 0 0 0 1px #7C4FE8, 0 0 0 4px color-mix(in srgb, #7C4FE8 14%, transparent); }
.psd-gate.is-block .psd-gate-mark { border-color: #7C4FE8; color: #7C4FE8; }
/* cleared wall: teal check */
.psd-gate.is-pass { border-color: color-mix(in srgb, #7ADAE6 60%, var(--border-subtle)); }
.psd-gate.is-pass .psd-gate-mark { border-color: #7ADAE6; color: #7ADAE6; }
.psd-gate.is-pass .psd-gate-mark::before { width: 5px; height: 1.5px; transform: rotate(45deg) translate(-2px, 3px); }
.psd-gate.is-pass .psd-gate-mark::after { width: 10px; height: 1.5px; transform: rotate(-50deg) translate(1px, 1px); }

/* Diagnosis readout */
.psd-diag { margin: 0; font-family: var(--font-base); font-size: var(--mkt-lead); line-height: 1.5;
  max-width: 64ch; transition: color 0.3s ease; }
.psd-diag[data-state="block"] { color: var(--text-secondary); }
.psd-diag[data-state="ok"] { color: var(--text-primary); }
.psd-diag b { font-weight: 500; color: var(--text-primary); }
.psd-diag[data-state="block"] b { color: #7C4FE8; }
.psd-diag[data-state="ok"] b { color: #7ADAE6; }

/* Controls */
.psd-controls { margin: clamp(30px, 4.5vh, 48px) 0 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: start; }
.psd-control-label { display: block; margin-bottom: 14px; font-family: var(--font-code); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.psd-vendors { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); }
.psd-vendor-opt { font-family: var(--font-base); font-size: var(--mkt-body-sm); color: var(--text-tertiary);
  background: none; border: 1px solid var(--border-subtle); border-radius: 999px; padding: 8px 16px; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease; }
.psd-vendor-opt:hover { color: var(--text-primary); }
.psd-vendor-opt.is-active { color: var(--text-primary); border-color: var(--text-tertiary); }
.psd-flags { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 12px); }
.psd-flag { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-code); font-size: var(--mkt-body-xs);
  color: var(--text-secondary); background: none; border: 1px solid var(--border-subtle); border-radius: 10px;
  padding: 9px 14px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; }
.psd-flag:hover { color: var(--text-primary); }
.psd-flag-box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--text-quaternary);
  position: relative; flex: none; transition: background 0.2s ease, border-color 0.2s ease; }
.psd-flag.is-on { color: var(--text-primary); border-color: color-mix(in srgb, #7ADAE6 55%, var(--border-subtle)); }
.psd-flag.is-on .psd-flag-box { background: #7ADAE6; border-color: #7ADAE6; }
.psd-flag.is-on .psd-flag-box::after { content: ""; position: absolute; inset: 0;
  -webkit-mask: var(--psd-tick) center / 11px 11px no-repeat; mask: var(--psd-tick) center / 11px 11px no-repeat;
  background: #1D1612; }
:root { --psd-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* The live-built request */
.psd-req { margin: clamp(28px, 4vh, 40px) 0 0; padding: clamp(18px, 2vw, 26px); overflow-x: auto;
  border: 1px solid var(--border-subtle); border-radius: 14px; }
.psd-req code { font-family: var(--font-code); font-size: clamp(12.5px, 1vw, 14.5px); line-height: 1.7;
  color: var(--text-primary); white-space: pre; }

/* ═══ Saturated bands (purple coverage / teal thesis) ═══ */
.psd-band { position: relative; }
.psd-band-fill { position: absolute; inset: 0; z-index: 0; clip-path: circle(0% at 50% 110%); }
.psd-band--teal .psd-band-fill { background: #7ADAE6; }
.psd-band--purple .psd-band-fill { background: #7C4FE8; }
.psd-band.is-in .psd-band-fill { clip-path: circle(155% at 50% 110%); transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.psd-band-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
  padding: clamp(120px, 22vh, 240px) var(--page-gutter, 7vw); display: grid; justify-items: start; }
.psd-band-inner--wide { max-width: 1320px; }
.psd-band-h2 { margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero); line-height: 0.94; letter-spacing: var(--tracking-denser, -0.03em); }
.psd-band-lead { margin: clamp(22px, 3vh, 36px) 0 0; font-family: var(--font-base); font-size: var(--mkt-lead);
  line-height: 1.5; max-width: 52ch; }
.psd-band--teal .psd-band-h2 { color: #1D1612; }
.psd-band--teal .psd-band-lead { color: rgba(29, 22, 18, 0.82); }
.psd-band--purple .psd-band-h2 { color: #fff; }
.psd-band--purple .psd-band-lead { color: rgba(255, 255, 255, 0.86); }

/* Act 2 — anti-bot roster on the purple band */
.psd-cov-head { max-width: 64ch; }
.psd-roster { width: 100%; margin: clamp(48px, 7vh, 80px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2px, 0.4vw, 6px) clamp(28px, 4vw, 72px); }
.psd-roster-item { display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2.6vh, 30px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24); transition: padding-left 0.25s ease; }
.psd-roster-item:hover { padding-left: 10px; }
.psd-roster-k { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h4);
  line-height: 1; letter-spacing: var(--tracking-dense, -0.02em); color: #fff; }
.psd-roster-move { font-family: var(--font-code); font-size: var(--mkt-body-xs); color: #7ADAE6; }

/* ═══ The read — second beat on the same purple band (mirrored two-col) ═══ */
.psd-read-inner { margin: clamp(80px, 13vh, 150px) 0 0; display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: center; }
.psd-read-h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-hero);
  line-height: 0.98; letter-spacing: var(--tracking-dense, -0.024em); color: #fff; }
.psd-read-lead { margin: clamp(20px, 2.6vh, 30px) 0 0; font-family: var(--font-base); font-size: var(--mkt-body);
  line-height: 1.55; color: rgba(255, 255, 255, 0.82); max-width: 48ch; }
.psd-payload { margin: 0; padding: clamp(22px, 2.4vw, 34px); overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 16px; }
.psd-payload code { font-family: var(--font-code); font-size: clamp(12.5px, 1vw, 15px); line-height: 1.85;
  color: rgba(255, 255, 255, 0.78); white-space: pre; }
.psd-j-p { color: rgba(255, 255, 255, 0.42); }
.psd-j-k { color: rgba(255, 255, 255, 0.6); }
.psd-j-s { color: rgba(255, 255, 255, 0.92); }
.psd-j-fail { color: #1D1612; }
.psd-j-ok { color: #7ADAE6; }

/* ═══ Topbar inversion: dark chrome on teal, white chrome on purple ═══ */

/* ═══ Act 3 — Closer (dark) ═══ */
.psd-end { padding: clamp(120px, 20vh, 220px) var(--page-gutter, 7vw) clamp(90px, 13vh, 150px); max-width: 1000px; margin: 0 auto; }
.psd-end-h { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-hero);
  line-height: 0.95; letter-spacing: var(--tracking-denser, -0.03em); color: var(--text-primary); }
.psd-end-sub { margin: clamp(22px, 3vh, 32px) 0 0; font-family: var(--font-base); font-size: var(--mkt-lead);
  line-height: 1.5; color: var(--text-secondary); max-width: 56ch; }
.psd-end-cta { margin: clamp(34px, 5vh, 52px) 0 0; }
.psd-end-link { margin: clamp(28px, 4vh, 40px) 0 0; }

/* ═══ Breakpoints ═══ */
@media (max-width: 900px) {
  .psd-stage-head { grid-template-columns: 1fr; gap: clamp(18px, 3vh, 28px); align-items: start; }
  .psd-controls { grid-template-columns: 1fr; gap: clamp(22px, 4vh, 34px); }
  .psd-roster { grid-template-columns: 1fr 1fr; }
  .psd-read-inner { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 44px); }
}
@media (max-width: 560px) {
  .psd-roster { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .psd-stage { min-height: 0; }
  /* Mobile: simplify the rig to a clean vertical status list. Drop the
     connector rail + traveling packet (they read cramped stacked) and
     left-align each wall's mark + label together instead of the
     space-between split that floated labels to the right edge. */
  .psd-lane { grid-template-columns: 1fr; gap: 0; }
  .psd-origin { border-left: 0; border-top: 1px solid var(--border-subtle); padding-left: 0; padding-top: 14px;
    flex-direction: row; justify-content: flex-start; min-width: 0; }
  .psd-track { grid-auto-flow: row; grid-auto-columns: auto; min-height: 0; gap: 10px; padding: 16px 0; }
  .psd-track::before { display: none; }
  .psd-packet { display: none; }
  .psd-gate { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 14px 16px; }
  .psd-gate-k { font-size: 16px; text-align: left; }
  .psd-target { flex-direction: row; justify-content: flex-start; min-width: 0; }
}
@media (min-width: 1600px) {
  .psd-stage-head, .psd-rig { max-width: 1480px; }
  .psd-band-inner { max-width: 1480px; }
}
@media (prefers-reduced-motion: reduce) {
  .psd-band.is-in .psd-band-fill { transition: none; }
  .psd-packet { transition: none; }
}