/* ============================================================================
   PANTEREX — THE OPTIC
   The graphic vocabulary. One small set of primitives used everywhere, so that
   a screenshot with the wordmark removed is still recognisably PANTEREX.

   WHAT THIS IS NOT
     It is not a theme layer and it is not decoration. Every primitive here
     encodes something the product actually knows. If a graphic cannot name the
     field it is drawing, it does not belong in this file.

   THE PRIMITIVES
     APERTURE      something is under focused examination
     SIGNAL TRACE  origin → evidence → decision → action
     ENTITY NODE   a wallet, token, deployer or funder as an object
     NETWORK FIELD real relationships between real entities
     EVIDENCE LENS OBSERVED / INFERRED / UNKNOWN / WAITING
     TELEMETRY     compact state, time and provenance readings
     FOCUS MARK    sparse registration marks — the instrument's own frame
     EVENT PULSE   a meaningful event occurred
     PROVENANCE    WHALE → SIGNAL → GUARD → TRADE
     OUTCOME TRACE ENTRY → PEAK/DRAW → EXIT → RESULT
     CAPITAL FIELD capital, exposure and protection as one object

   THE RULE ON FABRICATION
     A primitive renders REAL DATA, or it renders a STRUCTURAL diagram that is
     visibly a diagram. There is no third mode. `.px-o-struct` marks the second
     and carries a visible "structural" reading so it can never be mistaken for
     a live measurement.

   COLOUR
     Inherited from px-nocturnal.css and unchanged:
     cyan OBSERVED · ultraviolet INFERRED · tungsten FOCUS
     orange ANOMALY · red DANGER · emerald HEALTHY · ash UNKNOWN
   ============================================================================ */

.px-o {
  --o-hair:      rgba(255,255,255,.055);
  --o-hair-hi:   rgba(255,255,255,.11);
  --o-hair-lo:   rgba(255,255,255,.028);
  --o-ground:    var(--nx-obsidian);
  --o-cell:      rgba(255,255,255,.014);
  --o-cell-hi:   rgba(255,255,255,.028);
  --o-tick:      rgba(255,255,255,.16);
}
:root[data-px-theme="field"] .px-o {
  --o-hair: rgba(0,0,0,.085); --o-hair-hi: rgba(0,0,0,.16); --o-hair-lo: rgba(0,0,0,.04);
  --o-cell: rgba(0,0,0,.016); --o-cell-hi: rgba(0,0,0,.032); --o-tick: rgba(0,0,0,.22);
}

/* ── TYPE SCALE ───────────────────────────────────────────────────────────────
   Premium is not faint. The scale below is the product's actual hierarchy and
   every surface draws from it rather than inventing a size. */
.px-o-identity { font-family: var(--nx-sans); font-weight: 600; font-size: clamp(28px, 3.4vw, 46px);
  line-height: .98; letter-spacing: -.022em; color: var(--nx-bone-hi); }
.px-o-subject  { font-family: var(--nx-sans); font-weight: 600; font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.04; letter-spacing: -.016em; color: var(--nx-bone-hi); }
.px-o-figure   { font-family: var(--nx-mono); font-variant-numeric: tabular-nums; font-weight: 500;
  font-size: clamp(24px, 2.6vw, 44px); line-height: 1; letter-spacing: -.028em; color: var(--nx-bone-hi); }
.px-o-figure-s { font-family: var(--nx-mono); font-variant-numeric: tabular-nums;
  font-size: 19px; line-height: 1.1; letter-spacing: -.02em; color: var(--nx-bone-hi); }
.px-o-say      { font-size: 15px; line-height: 1.6; color: var(--nx-bone); letter-spacing: -.003em; }
.px-o-body     { font-size: 13.5px; line-height: 1.66; color: var(--nx-bone); }
.px-o-meta     { font-family: var(--nx-mono); font-size: 11px; line-height: 1.5; color: var(--nx-ash-2); }
.px-o-tag      { font-family: var(--nx-mono); font-size: 9.5px; letter-spacing: .155em;
  text-transform: uppercase; color: var(--nx-ash); white-space: nowrap; }
.px-o-addr     { font-family: var(--nx-mono); font-size: 10.5px; letter-spacing: .01em; color: var(--nx-ash-2); }

/* tone modifiers, applied to any of the above */
.px-t-observed { color: var(--px-observed); }
.px-t-inferred { color: var(--px-inferred); }
.px-t-focus    { color: var(--nx-tungsten); }
.px-t-anomaly  { color: var(--nx-anomaly); }
.px-t-danger   { color: var(--nx-danger); }
.px-t-healthy  { color: var(--nx-healthy); }
.px-t-unknown  { color: var(--px-unknown); }
.px-t-bone     { color: var(--nx-bone-hi); }

/* ── FOCUS MARK ───────────────────────────────────────────────────────────────
   Registration marks at the corners of a region under examination. This is the
   instrument's own frame — the single most repeated PANTEREX gesture. Sparse by
   construction: four 9px corners and nothing else. */
.px-o-frame { position: relative; }
.px-o-frame::before, .px-o-frame::after,
.px-o-frame > .px-o-fm-b::before, .px-o-frame > .px-o-fm-b::after {
  content: ''; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border: 0 solid var(--o-tick);
}
.px-o-frame::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.px-o-frame::after  { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.px-o-frame > .px-o-fm-b { position: absolute; inset: 0; pointer-events: none; }
.px-o-frame > .px-o-fm-b::before { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.px-o-frame > .px-o-fm-b::after  { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
/* when the frame is the ACTIVE focus, the marks warm to tungsten */
.px-o-frame[data-focus="1"]::before, .px-o-frame[data-focus="1"]::after,
.px-o-frame[data-focus="1"] > .px-o-fm-b::before, .px-o-frame[data-focus="1"] > .px-o-fm-b::after {
  border-color: var(--nx-tungsten);
}

/* ── APERTURE ─────────────────────────────────────────────────────────────────
   A real six-blade iris, not concentric rings. It has three honest states:
   idle (open, cold), focusing (blades closing, animated), locked (closed onto
   the subject, tungsten). Rendered by px-optic.js as inline SVG. */
.px-o-aperture { display: block; overflow: visible; }
.px-o-aperture .ap-blade { fill: none; stroke: var(--o-hair-hi); stroke-width: 1; transition: stroke .5s ease, opacity .5s ease; }
.px-o-aperture .ap-barrel { fill: none; stroke: var(--o-hair); stroke-width: 1; }
.px-o-aperture .ap-tick { stroke: var(--o-tick); stroke-width: 1; }
.px-o-aperture .ap-core { fill: none; stroke: var(--px-unknown); stroke-width: 1; }
.px-o-aperture[data-state="focusing"] .ap-blade { stroke: var(--px-observed); }
.px-o-aperture[data-state="focusing"] .ap-core  { stroke: var(--px-observed); }
.px-o-aperture[data-state="locked"] .ap-blade   { stroke: var(--nx-tungsten); }
.px-o-aperture[data-state="locked"] .ap-core    { stroke: var(--nx-tungsten); }
.px-o-aperture[data-state="blocked"] .ap-blade  { stroke: var(--nx-danger); }
.px-o-aperture[data-state="blocked"] .ap-core   { stroke: var(--nx-danger); }
/* FOCUS: the blades rotate a few degrees while resolving. Not a spinner — it
   settles, and it only runs while the surface is genuinely waiting. */
.px-o-aperture[data-state="focusing"] .ap-blades { animation: px-o-focus 2.6s cubic-bezier(.34,.01,.28,1) infinite; transform-origin: 50% 50%; }
@keyframes px-o-focus { 0% { transform: rotate(0deg); } 55% { transform: rotate(11deg); } 100% { transform: rotate(0deg); } }

/* ── EVIDENCE LENS ────────────────────────────────────────────────────────────
   The four epistemic states, always readable without colour: each carries a
   distinct glyph as well as a distinct hue. */
.px-o-lens { display: inline-flex; align-items: center; gap: 6px; font-family: var(--nx-mono);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-ash); }
.px-o-lens i { width: 7px; height: 7px; flex: none; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
.px-o-lens[data-e="observed"] { color: var(--px-observed); }
.px-o-lens[data-e="observed"] i { background: currentColor; }
.px-o-lens[data-e="inferred"] { color: var(--px-inferred); }
.px-o-lens[data-e="inferred"] i { border-radius: 0; transform: rotate(45deg); }
.px-o-lens[data-e="unknown"] { color: var(--px-unknown); }
.px-o-lens[data-e="unknown"] i { border-style: dashed; }
.px-o-lens[data-e="waiting"] { color: var(--nx-ash-2); }
.px-o-lens[data-e="waiting"] i { border-radius: 0; border-width: 0; border-bottom-width: 1px; height: 4px; width: 9px; }

/* ── TELEMETRY RAIL ───────────────────────────────────────────────────────────
   Compact readings divided by hairline verticals, never by boxing each figure.
   This is rule 2 of the instrument doctrine, expressed as a component. */
.px-o-tele { display: flex; align-items: stretch; flex-wrap: wrap; }
.px-o-tele > * { padding: 0 15px; border-left: 1px solid var(--o-hair); min-width: 0; }
.px-o-tele > *:first-child { padding-left: 0; border-left: 0; }
.px-o-tele-k { display: block; font-family: var(--nx-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--nx-ash); margin-bottom: 6px; white-space: nowrap; }
.px-o-tele-v { display: block; font-family: var(--nx-mono); font-variant-numeric: tabular-nums;
  font-size: 16px; color: var(--nx-bone-hi); letter-spacing: -.015em; }
.px-o-tele-s { display: block; font-size: 11px; color: var(--nx-ash-2); margin-top: 4px; }
/* the measurement ticks along the top of a rail — a lens barrel, not a chart axis */
.px-o-ticks { height: 7px; display: block; width: 100%;
  background-image: repeating-linear-gradient(90deg, var(--o-tick) 0 1px, transparent 1px 100%);
  background-size: 11px 3px; background-repeat: repeat-x; background-position: 0 0; opacity: .5; }

/* ── ENTITY NODE ──────────────────────────────────────────────────────────────
   A wallet/token/deployer/funder as an object with a kind, a state and an
   address. The glyph differs by kind so kind survives greyscale. */
.px-o-node { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.px-o-node-g { width: 22px; height: 22px; flex: none; position: relative; }
.px-o-node-g svg { display: block; width: 100%; height: 100%; }
.px-o-node-t { min-width: 0; }
.px-o-node-n { display: block; font-size: 13.5px; color: var(--nx-bone-hi); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-o-node-a { display: block; font-family: var(--nx-mono); font-size: 10.5px; color: var(--nx-ash); }

/* ── NETWORK FIELD ────────────────────────────────────────────────────────────
   The canvas IS the interface. A field fills its region edge to edge and is
   never boxed inside a card. */
.px-o-field { position: relative; width: 100%; min-height: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(255,255,255,.020) 0%, transparent 62%),
    var(--o-ground);
}
.px-o-field svg { display: block; width: 100%; height: 100%; }
.px-o-field .nf-edge { stroke: var(--o-hair-hi); stroke-width: 1; fill: none; }
.px-o-field .nf-edge[data-e="observed"] { stroke: rgba(63,212,232,.30); }
.px-o-field .nf-edge[data-e="inferred"] { stroke: rgba(155,123,240,.26); stroke-dasharray: 3 3; }
.px-o-field .nf-node { fill: var(--nx-graphite-2); stroke: var(--o-hair-hi); stroke-width: 1; }
.px-o-field .nf-node[data-k="subject"] { fill: none; stroke: var(--nx-tungsten); stroke-width: 1.25; }
.px-o-field .nf-node[data-k="whale"]   { stroke: rgba(63,212,232,.55); }
.px-o-field .nf-node[data-k="token"]   { stroke: rgba(155,123,240,.5); }
.px-o-field .nf-node[data-k="deployer"]{ stroke: rgba(240,135,58,.5); }
.px-o-field .nf-label { font-family: var(--nx-mono); font-size: 9px; fill: var(--nx-ash); letter-spacing: .06em; }
.px-o-field .nf-grid { stroke: var(--o-hair-lo); stroke-width: 1; }
/* a field with no real relationships says so — it does not draw invented edges */
.px-o-field-empty { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 24px;
  background-image: repeating-linear-gradient(135deg, var(--o-hair-lo) 0 1px, transparent 1px 9px); }

/* ── SIGNAL TRACE / PROVENANCE PATH ───────────────────────────────────────────
   origin → evidence → decision → action, as one continuous line. Reached stages
   are lit; unreached stages are drawn but cold, so the whole path is always
   legible as a path rather than appearing to end early. */
.px-o-trace { display: flex; align-items: flex-start; width: 100%; }
.px-o-trace-s { flex: 1 1 0; min-width: 0; position: relative; padding-top: 19px; }
.px-o-trace-s::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 1px;
  background: var(--o-hair-hi); }
.px-o-trace-s:first-child::before { left: 50%; }
.px-o-trace-s:last-child::before  { right: 50%; }
.px-o-trace-s::after { content: ''; position: absolute; top: 2px; left: calc(50% - 4px);
  width: 9px; height: 9px; border: 1px solid var(--o-hair-hi); background: var(--o-ground); border-radius: 50%; }
.px-o-trace-s[data-on="1"]::after { border-color: var(--nx-tungsten); background: var(--nx-tungsten); }
.px-o-trace-s[data-on="1"] ~ .px-o-trace-s::before { background: var(--o-hair); }
.px-o-trace-s[data-on="1"]::before { background: var(--nx-tungsten-dim); }
.px-o-trace-s[data-on="blocked"]::after { border-color: var(--nx-danger); background: var(--nx-danger); }
.px-o-trace-k { display: block; text-align: center; font-family: var(--nx-mono); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nx-ash); }
.px-o-trace-v { display: block; text-align: center; font-size: 11.5px; color: var(--nx-ash-2);
  margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.px-o-trace-s[data-on="1"] .px-o-trace-k { color: var(--nx-bone); }
.px-o-trace-s[data-on="1"] .px-o-trace-v { color: var(--nx-bone-hi); }

/* ── OUTCOME TRACE ────────────────────────────────────────────────────────────
   ENTRY → PEAK / DRAW → EXIT → RESULT, drawn to scale from real prices. */
.px-o-outcome { position: relative; width: 100%; }
.px-o-outcome svg { display: block; width: 100%; }
.px-o-outcome .ot-base { stroke: var(--o-hair); stroke-width: 1; stroke-dasharray: 2 4; }
.px-o-outcome .ot-path { fill: none; stroke: var(--nx-ash-2); stroke-width: 1.25; }
.px-o-outcome .ot-path[data-r="up"]   { stroke: var(--nx-healthy); }
.px-o-outcome .ot-path[data-r="down"] { stroke: var(--nx-danger); }
.px-o-outcome .ot-fill[data-r="up"]   { fill: rgba(63,169,106,.10); }
.px-o-outcome .ot-fill[data-r="down"] { fill: rgba(229,72,77,.10); }
.px-o-outcome .ot-mark { fill: var(--o-ground); stroke: var(--nx-ash-2); stroke-width: 1; }
.px-o-outcome .ot-mark[data-m="peak"] { stroke: var(--nx-healthy); }
.px-o-outcome .ot-mark[data-m="draw"] { stroke: var(--nx-danger); }
.px-o-outcome .ot-mark[data-m="entry"] { stroke: var(--nx-tungsten); }
.px-o-outcome .ot-k { font-family: var(--nx-mono); font-size: 9px; fill: var(--nx-ash); letter-spacing: .1em; }

/* ── CAPITAL FIELD ────────────────────────────────────────────────────────────
   Capital, exposure and protection as ONE object rather than three numbers.
   The bar is proportional to real SOL; the protection band is where the exit
   logic actually sits. */
.px-o-capital { display: block; width: 100%; }
.px-o-capital-bar { position: relative; height: 30px; width: 100%; border: 1px solid var(--o-hair);
  background: var(--o-cell); overflow: hidden; }
.px-o-capital-in { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.05);
  border-right: 1px solid var(--o-hair-hi); }
.px-o-capital-live { position: absolute; top: 0; bottom: 0; }
.px-o-capital-live[data-r="up"]   { background: rgba(63,169,106,.20); border-right: 1px solid var(--nx-healthy); }
.px-o-capital-live[data-r="down"] { background: rgba(229,72,77,.18);  border-right: 1px solid var(--nx-danger); }
.px-o-capital-stop { position: absolute; top: -1px; bottom: -1px; width: 1px; background: var(--nx-danger); }
.px-o-capital-tp   { position: absolute; top: -1px; bottom: -1px; width: 1px; background: var(--nx-healthy); }
.px-o-capital-mk   { position: absolute; top: 100%; transform: translateX(-50%); margin-top: 5px;
  font-family: var(--nx-mono); font-size: 9px; letter-spacing: .1em; color: var(--nx-ash); white-space: nowrap; }

/* ── EVENT PULSE ──────────────────────────────────────────────────────────────
   Restrained. It marks that something happened; it does not throb for
   attention, and it stops entirely under reduced motion. */
.px-o-pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--px-unknown); flex: none; }
.px-o-pulse[data-on="1"] { background: var(--nx-healthy); animation: px-o-pulse 3.4s ease-in-out infinite; }
.px-o-pulse[data-on="anomaly"] { background: var(--nx-anomaly); animation: px-o-pulse 2.2s ease-in-out infinite; }
.px-o-pulse[data-on="0"] { background: var(--px-unknown); }
@keyframes px-o-pulse { 0%,100% { opacity: 1; } 50% { opacity: .32; } }

/* ── STRUCTURAL MARK ──────────────────────────────────────────────────────────
   The only sanctioned way to show a diagram that is not live data. It is
   labelled, so it can never be read as a measurement. */
.px-o-struct { position: relative; }
.px-o-struct > .px-o-struct-k { position: absolute; right: 0; bottom: 0; z-index: 2;
  font-family: var(--nx-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--px-unknown); padding: 5px 7px; pointer-events: none; }

/* ── CELLS AND COMPOSITION ────────────────────────────────────────────────────
   A cell groups related facts. Its border is barely present; the grouping is
   done by proximity and by the hairline, not by a card shell. */
.px-o-cell { border: 1px solid var(--o-hair); background: var(--o-cell); }
.px-o-cell-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--o-hair); }
.px-o-cell-h .px-o-tag { margin-right: auto; }
.px-o-cell-b { padding: 14px; }
.px-o-split { display: grid; gap: 0; }
.px-o-split > * + * { border-left: 1px solid var(--o-hair); }

/* ── ACTIONS ──────────────────────────────────────────────────────────────────
   Tungsten is an optical event, not a background. The primary action is the ONE
   tungsten object on a surface. */
.px-o-act { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--nx-sans); font-size: 13.5px; font-weight: 500; letter-spacing: -.005em;
  padding: 11px 20px; border: 1px solid var(--o-hair-hi); background: transparent;
  color: var(--nx-bone-hi); cursor: pointer; border-radius: 2px; text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease; }
.px-o-act:hover { border-color: var(--nx-gunmetal-2); background: var(--o-cell-hi); }
.px-o-act:focus-visible { outline: 0; border-color: var(--nx-tungsten); box-shadow: 0 0 0 1px var(--nx-tungsten); }
.px-o-act[data-p="1"] { border-color: var(--nx-tungsten); color: var(--nx-tungsten); }
.px-o-act[data-p="1"]:hover { background: var(--nx-tungsten-veil); }
.px-o-act[data-p="danger"] { border-color: rgba(229,72,77,.5); color: var(--nx-danger); }
.px-o-act[disabled], .px-o-act[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.px-o-act-s { font-size: 12px; padding: 7px 13px; }

/* lens tabs — a row of examination modes, marked by an underline rather than a pill */
.px-o-lenses { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--o-hair);
  overflow-x: auto; scrollbar-width: none; }
.px-o-lenses::-webkit-scrollbar { display: none; }
.px-o-lenses a, .px-o-lenses button { appearance: none; background: none; border: 0; cursor: pointer;
  padding: 12px 17px 11px; font-family: var(--nx-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--nx-ash); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color .16s ease; }
.px-o-lenses a:hover, .px-o-lenses button:hover { color: var(--nx-bone); }
.px-o-lenses [aria-current="true"], .px-o-lenses [aria-selected="true"] {
  color: var(--nx-bone-hi); border-bottom-color: var(--nx-tungsten); }
.px-o-lenses a:focus-visible, .px-o-lenses button:focus-visible { outline: 1px solid var(--nx-tungsten); outline-offset: -3px; }

/* ── MOTION DISCIPLINE ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .px-o-aperture[data-state="focusing"] .ap-blades,
  .px-o-pulse[data-on] { animation: none !important; }
  .px-o *, .px-o *::before, .px-o *::after { transition-duration: .01ms !important; }
}

/* ============================================================================
   THE SIX QUESTIONS
   WHO · WHAT · WHY · WHEN · WHERE · HOW

   Every important PANTEREX object must let a person answer these without
   decoding a wall of labels. That is a composition rule, so it is expressed as
   components rather than repeated by hand on every surface.

   The composition is always SUBJECT → EVIDENCE → DECISION:
     SUBJECT   who/what is under examination — one dominant thing on screen
     EVIDENCE  what we actually know, and how firmly (observed/inferred/unknown)
     DECISION  what PANTEREX or the user does with it
   ============================================================================ */

/* ── SUBJECT ──────────────────────────────────────────────────────────────────
   The signature treatment for a token, a wallet or a position. Recognisable
   across the whole product: large identity, registration marks, the state and
   the provenance on the same line, one high-value figure, micro utilities. */
.px-o-subj { position: relative; padding: 20px 22px 18px; border: 1px solid var(--o-hair);
  background:
    linear-gradient(180deg, rgba(255,255,255,.022) 0%, transparent 46%),
    var(--o-cell); }
.px-o-subj-top { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.px-o-subj-id { min-width: 0; flex: 1 1 auto; }
/* WHAT — the event or state, read before anything but the name itself. */
.px-o-subj-what { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.px-o-subj-what b { font-family: var(--nx-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--nx-bone-hi); }
.px-o-subj-what[data-s="attention"] b { color: var(--nx-tungsten); }
.px-o-subj-what[data-s="blocked"] b   { color: var(--nx-danger); }
.px-o-subj-what[data-s="healthy"] b   { color: var(--nx-healthy); }
.px-o-subj-what[data-s="anomaly"] b   { color: var(--nx-anomaly); }
.px-o-subj-name { font-family: var(--nx-sans); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.02; letter-spacing: -.018em; color: var(--nx-bone-hi); word-break: break-word; }
.px-o-subj-addr { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
/* the one high-value figure, right-aligned against the identity */
.px-o-subj-fig { text-align: right; flex: none; }
.px-o-subj-fig .px-o-tele-k { text-align: right; }
/* WHERE — provenance, always visible, never a mystery */
.px-o-subj-where { display: inline-flex; align-items: center; gap: 7px; font-family: var(--nx-mono);
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--nx-ash); }
.px-o-subj-where::before { content: ''; width: 12px; height: 1px; background: currentColor; flex: none; }
.px-o-subj-where[data-w="WHALE"]  { color: var(--px-observed); }
.px-o-subj-where[data-w="RADAR"]  { color: var(--px-inferred); }
.px-o-subj-where[data-w="FERAL"]  { color: var(--nx-anomaly); }
.px-o-subj-where[data-w="MANUAL"] { color: var(--nx-ash-2); }

/* ── NARRATIVE ────────────────────────────────────────────────────────────────
   The six questions as one readable block. WHY is the largest because it is the
   thing that makes PANTEREX intelligence rather than a data viewer. */
.px-o-why { font-size: clamp(15px, 1.35vw, 18px); line-height: 1.44; color: var(--nx-bone-hi);
  letter-spacing: -.008em; max-width: 62ch; }
.px-o-why b { font-weight: 600; color: var(--nx-bone-hi); }
.px-o-nar { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 0; }
.px-o-nar > * { padding: 11px 14px; border-left: 1px solid var(--o-hair); min-width: 0; }
.px-o-nar > *:first-child { padding-left: 0; border-left: 0; }
.px-o-nar-q { display: block; font-family: var(--nx-mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--px-unknown); margin-bottom: 6px; }
.px-o-nar-a { display: block; font-size: 12.5px; line-height: 1.42; color: var(--nx-bone); }
.px-o-nar-a[data-unknown="1"] { color: var(--px-unknown); }

/* ── WHEN — time as part of the graphic language ─────────────────────────────
   A horizontal sequence with real intervals between the marks, so ordering and
   spacing both mean something. */
.px-o-when { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.px-o-when-m { display: flex; flex-direction: column; gap: 4px; flex: none; }
.px-o-when-m b { font-family: var(--nx-mono); font-size: 11px; font-weight: 500; color: var(--nx-bone-hi);
  letter-spacing: -.01em; }
.px-o-when-m span { font-family: var(--nx-mono); font-size: 9px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--nx-ash); }
.px-o-when-g { flex: 1 1 22px; min-width: 22px; height: 1px; background: var(--o-hair-hi);
  margin: 0 11px; position: relative; align-self: flex-end; margin-bottom: 6px; }
.px-o-when-g em { position: absolute; left: 50%; top: -15px; transform: translateX(-50%);
  font-family: var(--nx-mono); font-size: 9px; font-style: normal; color: var(--px-unknown); white-space: nowrap; }

/* ── GUARD ────────────────────────────────────────────────────────────────────
   A protected boundary, not a shield icon. The verdict is stated, the evidence
   that produced it sits directly beneath it, and a block always says why. */
.px-o-guard { border: 1px solid var(--o-hair); border-left-width: 2px; border-left-color: var(--px-unknown);
  background: var(--o-cell); }
.px-o-guard[data-v="PASSED"]  { border-left-color: var(--nx-healthy); }
.px-o-guard[data-v="BLOCKED"] { border-left-color: var(--nx-danger); background: rgba(229,72,77,.045); }
.px-o-guard[data-v="WAITING"] { border-left-color: var(--nx-ash-2); }
.px-o-guard-h { display: flex; align-items: baseline; gap: 12px; padding: 12px 15px 11px; flex-wrap: wrap; }
.px-o-guard-h > .px-o-tag { letter-spacing: .2em; }
.px-o-guard-v { font-family: var(--nx-mono); font-size: 17px; font-weight: 500; letter-spacing: .04em;
  color: var(--px-unknown); }
.px-o-guard[data-v="PASSED"]  .px-o-guard-v { color: var(--nx-healthy); }
.px-o-guard[data-v="BLOCKED"] .px-o-guard-v { color: var(--nx-danger); }
.px-o-guard-r { margin-left: auto; font-size: 12.5px; color: var(--nx-bone); }
.px-o-guard-b { display: flex; flex-wrap: wrap; border-top: 1px solid var(--o-hair); }
.px-o-guard-b > * { flex: 1 1 120px; padding: 10px 15px; border-left: 1px solid var(--o-hair); min-width: 0; }
.px-o-guard-b > *:first-child { border-left: 0; }

/* ── DECISION REQUIRED ────────────────────────────────────────────────────────
   When the user's authority is needed the surface must FEEL different. Tungsten
   registration on all four corners, the subject enlarged, one primary action. */
.px-o-decide { position: relative; border: 1px solid var(--nx-tungsten-dim);
  background: linear-gradient(180deg, var(--nx-tungsten-veil) 0%, transparent 38%), var(--o-cell); }
.px-o-decide-h { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--o-hair); flex-wrap: wrap; }
.px-o-decide-h b { font-family: var(--nx-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--nx-tungsten); }
.px-o-decide-t { margin-left: auto; font-family: var(--nx-mono); font-size: 11px; color: var(--nx-ash-2); }
.px-o-decide-b { padding: 17px 16px; }
.px-o-decide-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-top: 1px solid var(--o-hair); }
/* the consequence of the action, stated beside it — never discovered afterwards */
.px-o-consq { font-size: 12px; line-height: 1.5; color: var(--nx-ash-2); flex: 1 1 240px; min-width: 0; }

/* ── ACTIONS BY CONSEQUENCE ───────────────────────────────────────────────────
   Not every action deserves the same button. Four weights, matched to what
   happens when they are pressed. */
.px-o-act[data-w="micro"] { padding: 3px 7px; font-family: var(--nx-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; border-color: transparent; color: var(--nx-ash); }
.px-o-act[data-w="micro"]:hover { color: var(--nx-bone-hi); border-color: var(--o-hair-hi); background: none; }
.px-o-act[data-w="quiet"] { border-color: transparent; padding: 7px 0; color: var(--nx-ash-2);
  text-decoration: none; }
.px-o-act[data-w="quiet"]:hover { color: var(--nx-bone-hi); background: none; border-color: transparent;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--o-hair-hi); }
.px-o-act[data-w="authority"] { border-color: var(--nx-tungsten); color: var(--nx-tungsten);
  padding: 13px 26px; font-size: 14px; }
.px-o-act[data-w="authority"]:hover { background: var(--nx-tungsten-veil); }
.px-o-act[data-w="serious"] { border-color: rgba(229,72,77,.45); color: var(--nx-danger); }
.px-o-act[data-w="serious"]:hover { background: rgba(229,72,77,.08); border-color: var(--nx-danger); }

/* ── DESIGNED STATES ──────────────────────────────────────────────────────────
   loading · empty · error · stale · offline. A browser default or a grey
   skeleton card is not a state, it is the absence of one. */
.px-o-state { display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 40px 26px; max-width: 52ch; }
.px-o-state-k { font-family: var(--nx-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--px-unknown); }
.px-o-state[data-s="error"] .px-o-state-k { color: var(--nx-danger); }
.px-o-state[data-s="stale"] .px-o-state-k { color: var(--nx-anomaly); }
.px-o-state-t { font-size: 17px; line-height: 1.34; color: var(--nx-bone-hi); letter-spacing: -.01em; }
.px-o-state-b { font-size: 13.5px; line-height: 1.62; color: var(--nx-ash-2); }
/* RESOLUTION rather than a spinner: the subject's shape is already there and
   the evidence resolves into it. */
.px-o-resolve { position: relative; overflow: hidden; }
.px-o-resolve::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.035) 50%, transparent 100%);
  animation: px-o-resolve 1.9s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes px-o-resolve { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.px-o-ghost { background: var(--o-cell-hi); border-radius: 1px; display: block; }
/* a value that could not be read keeps its slot and says so, rather than
   collapsing the layout or showing a zero */
.px-o-unavail { font-family: var(--nx-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--px-unknown);
  background-image: repeating-linear-gradient(135deg, var(--o-hair-lo) 0 1px, transparent 1px 7px);
  padding: 2px 7px; }

@media (prefers-reduced-motion: reduce) { .px-o-resolve::after { animation: none; opacity: .25; } }

/* ── RESPONSIVE DRAMATURGY ────────────────────────────────────────────────────
   Mobile is not a narrower desktop. The composition changes: the six questions
   stack, the telemetry rail becomes a two-column matrix rather than a squashed
   row, and the subject figure moves below the identity instead of beside it. */
@media (max-width: 720px) {
  .px-o-subj { padding: 16px 15px 15px; }
  .px-o-subj-top { gap: 12px; }
  .px-o-subj-fig { text-align: left; flex: 1 1 100%; padding-top: 4px;
    border-top: 1px solid var(--o-hair); }
  .px-o-subj-fig .px-o-tele-k { text-align: left; }
  .px-o-tele { display: grid; grid-template-columns: 1fr 1fr; }
  .px-o-tele > * { padding: 11px 13px; border-left: 1px solid var(--o-hair);
    border-top: 1px solid var(--o-hair); }
  .px-o-tele > *:first-child { padding-left: 13px; border-left: 1px solid var(--o-hair); }
  .px-o-tele > *:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .px-o-tele > *:nth-child(-n+2) { border-top: 0; }
  .px-o-nar { grid-template-columns: 1fr 1fr; }
  .px-o-nar > * { border-left: 1px solid var(--o-hair); border-top: 1px solid var(--o-hair); padding: 10px 12px; }
  .px-o-nar > *:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .px-o-nar > *:nth-child(-n+2) { border-top: 0; }
  .px-o-trace { flex-wrap: wrap; row-gap: 14px; }
  .px-o-trace-s { flex: 1 1 33%; }
  .px-o-state { padding: 30px 16px; }
  .px-o-decide-acts { flex-direction: column; align-items: stretch; }
  .px-o-decide-acts .px-o-act { width: 100%; }
}
@media (max-width: 380px) {
  .px-o-tele, .px-o-nar { grid-template-columns: 1fr; }
  .px-o-tele > *, .px-o-nar > * { border-left: 0 !important; padding-left: 0 !important;
    border-top: 1px solid var(--o-hair); }
  .px-o-tele > *:first-child, .px-o-nar > *:first-child { border-top: 0; }
  .px-o-trace-s { flex: 1 1 50%; }
}

/* An attention row's provenance line: WHERE it came from, WHEN it last moved, and
   which subject — divided by thin verticals, never boxed. */
.px-row-m { display: flex; align-items: center; gap: 0; margin-top: 9px; flex-wrap: wrap; }
.px-row-m > * { padding: 0 11px; border-left: 1px solid var(--o-hair, rgba(255,255,255,.055)); }
.px-row-m > *:first-child { padding-left: 0; border-left: 0; color: var(--px-observed); }

/* ── POSITIONS: exit action and closed history ──────────────────────────────── */
.px-pos-a { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 0 2px; }
.px-pos-pct { display: flex; gap: 8px; flex-wrap: wrap; }
.px-hist-h, .px-hist-r { display: grid; align-items: center; gap: 16px;
  grid-template-columns: 96px 150px minmax(120px, 1fr) 66px 128px 96px; }
.px-hist-h { padding: 12px 30px 10px; border-bottom: 1px solid var(--o-hair, rgba(255,255,255,.055)); }
.px-hist-r { padding: 13px 30px; border-bottom: 1px solid var(--o-hair, rgba(255,255,255,.055));
  border-left: 2px solid transparent; }
.px-hist-r[data-o="up"]   { border-left-color: rgba(63,169,106,.4); }
.px-hist-r[data-o="down"] { border-left-color: rgba(229,72,77,.45); }
.px-hist-s { font-family: var(--nx-mono); font-size: 13.5px; color: var(--nx-bone-hi);
  overflow: hidden; text-overflow: ellipsis; }
.px-hist-w { font-family: var(--nx-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; }
.px-hist-w em { display: block; font-style: normal; letter-spacing: .04em; text-transform: none;
  color: var(--px-unknown); margin-top: 3px; font-size: 10px; }
.px-hist-p { font-family: var(--nx-mono); font-size: 11.5px; color: var(--nx-ash-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-hist-t { font-family: var(--nx-mono); font-size: 11px; color: var(--nx-ash); text-align: right; }
.px-hist-n { font-family: var(--nx-mono); font-variant-numeric: tabular-nums; font-size: 14px;
  text-align: right; letter-spacing: -.015em; }
.px-hist-v { display: flex; justify-content: flex-end; margin-right: -7px; }
.pxw-notice[data-k="wait"] { border-left: 2px solid var(--nx-anomaly); }
@media (max-width: 900px) {
  .px-hist-h { display: none; }
  .px-hist-r { grid-template-columns: 1fr auto; gap: 7px 14px; padding: 13px 16px; }
  .px-hist-w { grid-column: 1 / -1; grid-row: 2; }
  .px-hist-p { grid-column: 1 / -1; grid-row: 3; }
  .px-hist-t { grid-column: 1; grid-row: 4; text-align: left; }
  .px-hist-v { grid-column: 2; grid-row: 4; }
}

/* engine control sits with the authority reading it changes */
.px-engine { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
.px-engine-a { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.px-engine-a .px-o-consq { flex: 1 1 260px; }
@media (max-width: 720px) {
  .px-engine-a { flex-direction: column; align-items: stretch; }
  .px-engine-a .px-o-act { width: 100%; justify-content: center; }
}

/* manual target: you bring the token, the instrument does the rest */
.px-manual { padding-top: 26px; padding-bottom: 30px; }
.px-manual-f { display: flex; gap: 12px; margin-top: 24px; max-width: 640px; flex-wrap: wrap; }
.px-manual-f .pxw-in { flex: 1 1 320px; margin-top: 0; }
@media (max-width: 720px) { .px-manual-f .px-o-act { width: 100%; justify-content: center; } }

/* a hairline group break in the rail: primary loop above, secondary products below */
.px-nav-div { display: block; height: 1px; margin: 12px 20px; background: var(--o-hair, rgba(255,255,255,.055)); }

/* ── COPY FALLBACK ────────────────────────────────────────────────────────────
   Shown only when both the Clipboard API and execCommand refused. The value is
   on screen and selected so it can be copied by hand — the one thing the old
   "Press ⌘C" message did not do. */
.px-o-copy-reveal {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 9500; display: flex; align-items: center; gap: 14px;
  max-width: min(680px, calc(100% - 32px));
  padding: 13px 16px; background: var(--nx-carbon);
  border: 1px solid rgba(255,255,255,.14);
}
.px-o-copy-reveal-k { font-family: var(--nx-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--nx-anomaly); flex: none; }
.px-o-copy-reveal-v { flex: 1 1 auto; min-width: 0; background: transparent;
  border: 1px solid rgba(255,255,255,.10); color: var(--nx-bone-hi);
  font-family: var(--nx-mono); font-size: 12px; padding: 7px 9px; border-radius: 0; }
.px-o-act[data-copy-state="ok"]  { color: var(--nx-healthy); border-color: rgba(78,168,122,.5); }
.px-o-act[data-copy-state="bad"] { color: var(--nx-danger); border-color: rgba(216,80,63,.5); }