/* ============================================================
   GHOSTHUNTER — fx-dossier
   The asset dossier card inside the cinema, its leader line, and the
   keyboard route. Reuses .doc / .doc-head / .doc-row from the page.
   Tokens only; threat red appears solely on the EXPOSED chip.
   ============================================================ */

/* ---------- card: right offset tracks .rail so the act ticks stay visible + clickable ---------- */
.dossier{
  position:absolute;z-index:5;top:130px;right:calc(clamp(16px,2.4vw,34px) + 40px);
  width:min(360px,calc(100vw - 44px));
  pointer-events:auto;
  opacity:0;transform:translateY(10px);
  transition:opacity .35s var(--ease-out),transform .55s var(--ease-out-expo,cubic-bezier(.16,1,.3,1));
  will-change:opacity,transform;
}
.dossier.is-open{opacity:1;transform:none}
.dossier--left{right:auto;left:26px}
.dossier--rm,.dossier--rm.is-open{transition:none;transform:none}
.dossier:focus{outline:none}
.dossier:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}

.dossier .doc-head{gap:10px}
.dossier .dossier-h{white-space:nowrap}
.dossier .dossier-hr{display:flex;align-items:center;gap:10px;flex:none}
.dossier .doc-row{padding:12px 20px}
.dossier .doc-row .dk{width:86px}
.dossier .doc-row .dv{font-size:13px}
.dossier .dv a{
  color:var(--text);border-bottom:1px solid var(--accent-line);
  transition:border-color .25s,color .25s;
}
.dossier .dv a:hover{border-bottom-color:var(--ink)}
.dossier .dossier-sep{color:var(--text-faint)}

/* chip: ASSET / EXPOSED / CLOSED — the .sev base is threat-styled,
   so the ink states override it and EXPOSED keeps the red + pulse */
.dossier .sev{min-width:6.2em;text-align:center;transition:color .3s,border-color .3s,background .3s}
.dossier .sev[data-state="asset"],
.dossier .sev[data-state="closed"]{color:var(--ink);border-color:var(--border-strong);background:none;animation:none}
.dossier .sev[data-state="exposed"]{animation:threat-pulse 2.6s ease-in-out infinite}

.dossier-x{
  font:400 16px/1 var(--mono);color:var(--text-faint);background:none;border:0;
  width:24px;height:24px;margin:-4px -8px -4px 0;cursor:pointer;border-radius:var(--radius);
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .2s,background .2s;
  position:relative;
}
/* the glyph box stays 24px; the undrawn area around it takes a thumb (44px) */
.dossier-x::after{content:"";position:absolute;inset:-10px}
.dossier-x:hover{color:var(--text);background:var(--surface-hi)}

/* ---------- leader line ---------- */
.dossier-lead{
  position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible;
}
.dossier-lead line{stroke:var(--accent-line);stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
/* the page's img,svg{display:block} outranks the UA's [hidden], so the closed card's line is hidden here (fx-dossier.js sets the attribute) */
.dossier-lead[hidden]{display:none}

/* ---------- cue: one HUD line under the telemetry, hairlines either side ----------
   Inserted into #hudChrome by fx-dossier.js, so .hud .ro (mono, tracked caps,
   faint) and .hud.show already apply; .show here is the module's own gate.
   Sits clear of .ro-top (92px), the card (130px) and the rail. */
.hud .ro-cue{
  top:114px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;
  opacity:0;transition:opacity .6s;
}
.hud .ro-cue::before,.hud .ro-cue::after{content:"";width:18px;height:1px;background:var(--border-strong);flex:none}
.hud .ro-cue.show{opacity:1}
.hud .ro-cue.rm{transition:none}   /* GH.reduced incl. ?rm=1 */

/* ---------- keyboard route: visually hidden until focused ---------- */
.dossier-keys{
  position:absolute;left:26px;bottom:70px;z-index:5;margin:0;padding:0;list-style:none;
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.dossier-keys:focus-within{
  width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;
  display:flex;flex-direction:column;gap:6px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
}
.dossier-keys button{
  font:500 10px/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dim);background:none;border:0;padding:4px 2px;cursor:pointer;text-align:left;
  transition:color .2s;
}
.dossier-keys button:hover,.dossier-keys button:focus-visible{color:var(--text)}

/* ---------- small screens: under .ro-top, full width between the margins ---------- */
@media (max-width:760px){
  .dossier,.dossier--left{left:22px;right:22px;top:130px;width:auto}
  .dossier .doc-row{padding:10px 16px}
  .dossier .doc-head{padding:12px 16px}
  .dossier .doc-row .dk{width:72px}
  .dossier-keys{left:22px;bottom:96px}
}

/* ---------- degrade ---------- */
/* reduced motion (html.rm) */html.rm .dossier,html.rm .dossier.is-open{transition:none;transform:none}html.rm .dossier .sev[data-state="exposed"]{animation:none}
html.no-gl .dossier,html.no-gl .dossier-lead,html.no-gl .dossier-keys{display:none}
@media print{.dossier,.dossier-lead,.dossier-keys{display:none}}