/* ═══════════════════════════════════════════════════════════════════════════
   SweepR — "Who is watching" threat model styling.
   Every element here is built by bridge-probe.js. All classes are `pb-`
   prefixed so they can never collide with the page's own styles. Colours come
   from the :root custom properties bridge.html defines.
   ═══════════════════════════════════════════════════════════════════════════ */

.probe-section{margin:96px 0 0;scroll-margin-top:92px}

.pb-head{max-width:720px;margin:0 auto 32px;text-align:center}
.pb-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);margin-bottom:14px;
}
.pb-kicker::before{content:'';width:22px;height:1px;background:var(--line-2)}
.pb-kicker::after{content:'';width:22px;height:1px;background:var(--line-2)}
.pb-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(26px,4.2vw,40px);font-weight:700;line-height:1.12;letter-spacing:-.025em;
  color:var(--ink);
}
.pb-title em{
  font-style:normal;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.pb-sub{margin-top:14px;font-size:15px;line-height:1.65;color:var(--muted)}

/* ── The adversary rail ──────────────────────────────────────────────── */
.pb-rail{
  display:flex;gap:9px;margin:0 auto 20px;
  overflow-x:auto;overflow-y:hidden;
  padding:4px 2px 10px;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.pb-rail::-webkit-scrollbar{display:none}
.pb-chip{
  flex:0 0 auto;scroll-snap-align:start;
  display:flex;align-items:center;gap:9px;
  padding:11px 15px;border-radius:99px;
  background:var(--glass-2);border:1px solid var(--line);
  color:var(--muted);font-size:13px;font-weight:550;white-space:nowrap;
  transition:all .3s var(--ease);
}
.pb-chip svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.pb-chip:hover{border-color:var(--line-2);color:var(--ink);background:var(--glass)}
.pb-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.pb-chip[aria-selected="true"]{
  background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.48);color:var(--ink);
  box-shadow:0 0 26px rgba(139,92,246,.22);
}

/* ── The dossier ─────────────────────────────────────────────────────── */
.pb-panel{
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.pb-panel-top{
  display:flex;align-items:center;gap:13px;
  padding:19px 22px;border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.18);
}
.pb-panel-mark{
  width:40px;height:40px;flex:none;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass-3);border:1px solid var(--line-2);
}
.pb-panel-mark svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.9}
.pb-panel-who{min-width:0}
.pb-panel-name{font-size:15.5px;font-weight:650;color:var(--ink)}
.pb-panel-role{font-size:12px;color:var(--faint);margin-top:2px}
.pb-status{
  margin-left:auto;flex:none;
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);
}
.pb-status-dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.pb-panel.is-running .pb-status{color:var(--cyan)}
.pb-panel.is-running .pb-status-dot{background:var(--cyan);animation:pbPulse 1s ease-in-out infinite}
.pb-panel.is-done .pb-status{color:var(--mint)}
.pb-panel.is-done .pb-status-dot{background:var(--mint)}
@keyframes pbPulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

.pb-rows{padding:8px 10px}
.pb-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) auto;
  gap:16px;align-items:start;
  padding:15px 12px;
  border-bottom:1px solid rgba(255,255,255,.045);
  opacity:0;transform:translateY(7px);
}
.pb-row:last-child{border-bottom:none}
.pb-row.is-in{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.pb-row-field{font-size:13.5px;font-weight:600;color:var(--ink)}
.pb-row-why{font-size:12px;line-height:1.55;color:var(--muted);margin-top:5px}
.pb-row-val{
  font-size:13px;color:var(--faint);align-self:center;
  font-variant-numeric:tabular-nums;word-break:break-word;
}
.pb-row.t-seen .pb-row-val{color:var(--rose)}
.pb-row.t-partial .pb-row-val{color:var(--amber)}
.pb-row.t-blocked .pb-row-val{color:var(--mint)}

/* Status is never colour alone — the word carries it too. */
.pb-tag{
  align-self:center;flex:none;
  padding:5px 10px;border-radius:99px;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;border:1px solid transparent;
}
.pb-row.t-seen .pb-tag{background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.3);color:var(--rose)}
.pb-row.t-partial .pb-tag{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.3);color:var(--amber)}
.pb-row.t-blocked .pb-tag{background:rgba(52,224,176,.10);border-color:rgba(52,224,176,.28);color:var(--mint)}

/* The scanning state a row shows before it resolves. */
.pb-row.is-scanning .pb-row-val,
.pb-row.is-scanning .pb-tag{color:var(--faint)}
.pb-row.is-scanning .pb-tag{background:var(--glass-2);border-color:var(--line)}
.pb-row.is-scanning .pb-row-why{opacity:.35}
.pb-scanbar{
  grid-column:1 / -1;height:2px;margin-top:10px;border-radius:2px;
  background:rgba(255,255,255,.06);overflow:hidden;display:none;
}
.pb-row.is-scanning .pb-scanbar{display:block}
.pb-scanbar i{
  display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:pbScan .9s linear infinite;
}
@keyframes pbScan{from{transform:translateX(-100%)}to{transform:translateX(320%)}}

/* ── Verdict + residual risk ─────────────────────────────────────────── */
.pb-foot{padding:6px 22px 22px;display:grid;gap:12px}
.pb-verdict{
  display:flex;gap:13px;align-items:flex-start;
  padding:16px 18px;border-radius:var(--r-lg);
  background:rgba(52,224,176,.06);border:1px solid rgba(52,224,176,.2);
  opacity:0;transform:translateY(7px);
}
.pb-verdict.is-in{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.pb-verdict svg{width:19px;height:19px;flex:none;margin-top:1px;fill:none;stroke:var(--mint);stroke-width:2}
.pb-verdict-label{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(52,224,176,.75);margin-bottom:5px;
}
.pb-verdict-text{font-size:15px;line-height:1.5;font-weight:600;color:var(--ink)}

.pb-residual{
  display:flex;gap:13px;align-items:flex-start;
  padding:14px 18px;border-radius:var(--r-lg);
  background:rgba(251,191,36,.05);border:1px solid rgba(251,191,36,.18);
  opacity:0;transform:translateY(7px);
}
.pb-residual.is-in{opacity:1;transform:none;transition:opacity .45s var(--ease) .1s,transform .45s var(--ease) .1s}
.pb-residual svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:var(--amber);stroke-width:2}
.pb-residual-label{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,191,36,.8);margin-bottom:5px;
}
.pb-residual-text{font-size:13px;line-height:1.6;color:var(--muted)}

.pb-note{
  margin:16px auto 0;max-width:760px;text-align:center;
  font-size:11.5px;line-height:1.65;color:var(--faint);
}

/* ── Responsive ───────────────────────────────────────────────────────────
     ≤1020px  a little less air above the section
     ≤860px   the dossier row drops from three columns to field + tag over a
              full-width value; the adversary chips become 44px tap targets
     ≤480px   phone sizing, with every value free to wrap
   The rail keeps its own horizontal scroll at every width, so all five
   adversaries stay reachable without the chips shrinking into slivers.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:1020px){
  .probe-section{margin-top:76px}
}
@media (max-width:860px){
  .probe-section{margin-top:56px}
  .pb-head{margin-bottom:26px}
  .pb-rail{gap:8px}
  /* 44px minimum tap height, from padding rather than a bigger font. */
  .pb-chip{padding:13px 16px;min-height:44px;font-size:13px}
  .pb-panel-top{padding:15px 16px;gap:11px;flex-wrap:wrap}
  .pb-status{margin-left:0;order:3;flex-basis:100%}
  .pb-rows{padding:4px 6px}
  .pb-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px 12px;padding:14px 10px;
  }
  .pb-row-field{grid-column:1;min-width:0}
  .pb-tag{grid-column:2;grid-row:1;justify-self:end}
  .pb-row-val{grid-column:1 / -1;grid-row:2;min-width:0;font-size:13.5px;font-weight:600}
  .pb-row-why{grid-column:1 / -1;grid-row:3;margin-top:2px}
  .pb-foot{padding:4px 14px 18px}
  .pb-verdict,.pb-residual{padding:14px}
  .pb-verdict-text{font-size:14px}
}
@media (max-width:480px){
  .probe-section{margin-top:48px}
  .pb-head{margin-bottom:22px}
  .pb-kicker{font-size:11px;letter-spacing:.12em;margin-bottom:12px}
  /* The two hairlines either side push the label onto two lines at 320px. */
  .pb-kicker::before,.pb-kicker::after{display:none}
  .pb-title{font-size:clamp(23px,6.6vw,26px)}
  .pb-sub{font-size:14px;line-height:1.6;margin-top:12px}
  .pb-rail{gap:7px;padding-bottom:9px}
  .pb-chip{padding:12px 14px;gap:8px;font-size:12.5px}
  .pb-panel{border-radius:22px}
  .pb-panel-top{padding:13px;gap:10px}
  .pb-panel-mark{width:36px;height:36px;border-radius:11px}
  .pb-panel-name{font-size:14.5px}
  .pb-status{font-size:10.5px;letter-spacing:.1em}
  .pb-rows{padding:2px 4px}
  .pb-row{padding:13px 8px;gap:5px 8px}
  .pb-row-field{font-size:13px}
  .pb-row-val{font-size:13px;overflow-wrap:anywhere}
  .pb-row-why{font-size:12px;line-height:1.5}
  .pb-tag{font-size:9.5px;letter-spacing:.08em;padding:5px 8px}
  .pb-foot{padding:4px 10px 16px;gap:10px}
  .pb-verdict,.pb-residual{padding:13px 12px;gap:11px}
  .pb-verdict-label,.pb-residual-label{font-size:10px;letter-spacing:.12em}
  .pb-verdict-text{font-size:13.5px}
  .pb-residual-text{font-size:12.5px}
  .pb-note{margin-top:14px;font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .pb-row,.pb-verdict,.pb-residual{opacity:1;transform:none;transition:none}
  .pb-scanbar i,.pb-panel.is-running .pb-status-dot{animation:none}
}