/* ============================================================================
   cortya-signal.css — the visualization layer.
   Loaded AFTER cortya.css by the pages that draw an OrgEvent stream. Everything
   here is additive; it redefines nothing in the shared design system, so this file
   and cortya.css never fight and never need the same writer.

   THE ONE IDEA: altitude is meaning.
   `x.org.persona.band` is a closed set of six. Five are a hierarchy — domain_sme up
   to executive — and `x.org.message.send` carries direction up | down | peer. So
   vertical position means band on EVERY surface here, a person is the ceiling, and
   the sixth band (`personal_advisor`) sits beside the ladder at the human's level
   because it advises the human rather than reporting to the executive.

   WHERE THE BOLDNESS IS SPENT: the amber escalation climb and the wait band under
   it. Amber is the risk light in cortya.css and it is used for exactly one thing
   here — a decision a machine would not take alone. Everything else is quiet slate
   and violet so that one thing reads instantly.
   ============================================================================ */

:root{
  /* The band ramp: a sequential violet-slate luminance ramp, low band to high.
     Deliberately NOT the categorical model palette (--m0..--m7) and deliberately
     not teal or amber — altitude is structure, not a state, so it reads as a ramp
     rather than as categories or a severity. */
  --b0:#5d6b96;  /* domain_sme    */
  --b1:#6b7cae;  /* specialist    */
  --b2:#7c8ec6;  /* manager       */
  --b3:#8fa2dd;  /* senior_leader */
  --b4:#a5b8f0;  /* executive     */
  --b-off:#77839f; /* personal_advisor — off the ladder, drawn dashed */
  --human:#ffffff;
}

/* ---------- the instrument shell (shared with the homepage hero) ---------- */
.inst{
  background:linear-gradient(180deg,var(--ink-2),#0d1526);
  border:1px solid var(--line-ink);border-radius:16px;
  box-shadow:var(--shadow-panel);overflow:hidden;
}
.inst-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px solid var(--line-ink);background:rgba(0,0,0,.18);
}
.inst-what{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12.5px;color:#dbe2f0;letter-spacing:.02em}
.inst-body{padding:16px 18px 10px}
.inst-foot{padding:10px 18px 14px;border-top:1px solid var(--line-ink);font-family:var(--font-mono);font-size:11.5px;color:#77839f;line-height:1.6}

/* ---------- provenance: a hero element, never fine print ----------
   `producer.kind` is in the envelope and the contract requires every consumer to
   render it. It is recomputed from the stream, so it reports what was observed
   rather than what a config says — upstream shipped the opposite bug once, and a
   gauge that displays its own configuration while looking like an observation is
   the exact failure this badge exists to prevent. */
.prov{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;
  padding:6px 12px;border-radius:999px;
  background:rgba(232,163,23,.12);border:1px solid rgba(232,163,23,.45);color:#e8c073;
}
.prov b{color:var(--signal);font-weight:600}
.prov .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);flex-shrink:0}
/* Teal here means "a checkable fact about the contract" — NOT live data. The
   class was called .prov-live once and that name alone invited the page to imply
   its own stream was live; provenance is the amber badge's job and nothing
   else's. `.prov-real` is reserved for a genuine live producer, which by
   definition is no longer a demo. */
.prov-fact{background:rgba(18,176,160,.12);border-color:rgba(18,176,160,.45);color:#7fd8cc}
.prov-fact .dot{background:var(--flow)}
.prov-real{background:rgba(18,176,160,.16);border-color:var(--flow);color:#7fd8cc}
.prov-real .dot{background:var(--flow)}

/* ---------- the lattice ---------- */
/* The scroll container for a wide diagram. `min-width:0` is load-bearing, not
   defensive noise: a grid or flex item's automatic minimum size is its CONTENT
   size, so without it the wrapper grows to the 880px diagram instead of scrolling
   it, and the PAGE scrolls sideways instead. Measured at 390px: this was a real
   938px body overflow on /demo. */
.lat-wrap{overflow-x:auto;padding:4px 0 0;min-width:0;max-width:100%}
.lat-wrap .lattice{min-width:880px;width:100%;height:auto;display:block}
/* min-width beats max-width in the cascade, so this bounds a lattice that is NOT
   inside a scroll container (the empty-stream pane) without shrinking one that is. */
.lattice{max-width:100%}

.lat-rule{stroke:#1e2a44;stroke-width:1}
.lat-sep{stroke:#26334f;stroke-width:1;stroke-dasharray:2 5}
.lat-band{fill:#7d89a8;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em}
.lat-band.b0{fill:var(--b0)}.lat-band.b1{fill:var(--b1)}.lat-band.b2{fill:var(--b2)}
.lat-band.b3{fill:var(--b3)}.lat-band.b4{fill:var(--b4)}

.lat-human{stroke:var(--human);stroke-width:1.6;opacity:.85}
.lat-human-label{fill:var(--human);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em}

/* the wait: ground, not annotation */
.lat-wait{fill:rgba(232,163,23,.075);stroke:rgba(232,163,23,.28);stroke-width:1;stroke-dasharray:3 4}
.lat-wait-label{fill:var(--signal);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em}

.lat-life{stroke-width:1.4;opacity:.55}
.lat-life.b0{stroke:var(--b0)}.lat-life.b1{stroke:var(--b1)}.lat-life.b2{stroke:var(--b2)}
.lat-life.b3{stroke:var(--b3)}.lat-life.b4{stroke:var(--b4)}
/* off the ladder, and drawn so you can see it is not a rung */
.lat-life.off-ladder{stroke:var(--b-off);stroke-dasharray:4 4;opacity:.5}
.lat-seat{fill:#0d1526;stroke-width:1.8}
.lat-seat.b0{stroke:var(--b0)}.lat-seat.b1{stroke:var(--b1)}.lat-seat.b2{stroke:var(--b2)}
.lat-seat.b3{stroke:var(--b3)}.lat-seat.b4{stroke:var(--b4)}
.lat-seat.off-ladder{stroke:var(--b-off)}
.lat-end{fill:#0d1526;stroke:#4a5675;stroke-width:1.4}
.lat-name{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:-.01em}
.lat-name.b0{fill:var(--b0)}.lat-name.b1{fill:var(--b1)}.lat-name.b2{fill:var(--b2)}
.lat-name.b3{fill:var(--b3)}.lat-name.b4{fill:var(--b4)}
.lat-name.off-ladder{fill:var(--b-off)}
.lat-tier{font-family:var(--font-mono);font-weight:400;font-size:9.5px;fill:#5b6788;letter-spacing:.06em}

/* messages: the enum drives the mark */
.lat-msg{fill:none;stroke-width:1.5;opacity:.9}
.lat-msg.dir-up{stroke:var(--b3)}
.lat-msg.dir-down{stroke:var(--b0)}
.lat-msg.dir-peer{stroke:var(--flow);stroke-dasharray:5 3}
.lat-head.dir-up{fill:var(--b3)}
.lat-head.dir-down{fill:var(--b0)}
.lat-head.dir-peer{fill:var(--flow)}

/* the climb — the one loud thing on the canvas */
.lat-climb{fill:none;stroke:var(--signal);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.lat-raise{fill:var(--signal);stroke:#231800;stroke-width:1}
.lat-climb-label{fill:var(--signal);font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;opacity:.85}
.lat-open-label{fill:var(--crit);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em}
.lat-answer{fill:var(--flow);stroke:#04211d;stroke-width:1}
.lat-answer-label{fill:#7fd8cc;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em}
.lat-return{fill:none;stroke:var(--flow);stroke-width:1.3;stroke-dasharray:3 3;opacity:.6}
.lat-notch{stroke:#cdd5e6;stroke-width:1.4}
.lat-notch-label{fill:#8b97b8;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em}
.lat-tick{fill:#5b6788;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em}

/* the legend earns its place: it decodes a closed set, it does not decorate */
.lat-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px;font-family:var(--font-mono);font-size:11px;color:#77839f}
.lat-key span{display:inline-flex;align-items:center;gap:7px}
.lat-key i{width:16px;height:0;border-top-width:2px;border-top-style:solid;flex-shrink:0}
.lat-key .k-up{border-color:var(--b3)}
.lat-key .k-down{border-color:var(--b0)}
.lat-key .k-peer{border-color:var(--flow);border-top-style:dashed}
.lat-key .k-climb{border-color:var(--signal);border-top-width:3px}
.lat-key .k-off{border-color:var(--b-off);border-top-style:dashed}

/* ---------- the derived feed ----------
   Every line here was computed from a span type, an enum and an id. There is no
   field in the contract that could carry a sentence, so there is nowhere in the
   pipeline for prose to enter. */
.feed{display:flex;flex-direction:column}
.feed-row{display:grid;grid-template-columns:52px 92px 1fr;gap:14px;align-items:baseline;padding:7px 0;border-bottom:1px solid rgba(34,48,77,.5)}
.feed-row:last-child{border-bottom:0}
.feed-t{font-family:var(--font-mono);font-size:11px;color:#5b6788}
.feed-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;font-weight:600;text-align:center;white-space:nowrap}
.feed-x{color:#cdd5e6;font-size:.94rem;line-height:1.5}
.feed-ref{font-family:var(--font-mono);font-size:10.5px;color:#5b6788;margin-left:8px;white-space:nowrap}
.g-orchestration{background:rgba(58,135,229,.16);color:#7fb0f5}
.g-persona{background:rgba(143,162,221,.16);color:var(--b3)}
.g-model{background:rgba(147,160,189,.14);color:#c2ccdf}
.g-memory{background:rgba(18,176,160,.16);color:#5fcfc0}
.g-decision{background:rgba(205,213,230,.12);color:#dbe2f0}
.g-human{background:rgba(232,163,23,.18);color:#e8c073}
.g-transport{background:rgba(120,132,160,.14);color:#8b97b8}

/* ---------- readouts ---------- */
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;background:var(--line-ink);border:1px solid var(--line-ink);border-radius:10px;overflow:hidden}
.readout div{background:#0d1526;padding:14px 16px}
.readout .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#77839f}
.readout .v{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:#fff;margin-top:3px}
.readout .n{font-family:var(--font-mono);font-size:11px;color:#5b6788;margin-top:3px}
.readout .v.warn{color:var(--signal)}
.readout .v.flow{color:var(--flow)}
/* an unread metric shows as unread. It never renders as zero. */
.readout .v.unread{color:#5b6788;font-family:var(--font-mono);font-size:1rem;font-weight:400}

/* ---------- the empty-stream proof ----------
   Two states of the same surface, side by side. The still one is not a broken
   panel; it is the same renderer pointed at zero events. */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.proof-pane{background:#0d1526;border:1px solid var(--line-ink);border-radius:12px;padding:16px;min-width:0}
.proof-pane h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#77839f;margin-bottom:12px}
.proof-still{display:grid;place-items:center;min-width:0;min-height:132px;font-family:var(--font-mono);font-size:12px;color:#48536f;text-align:center;line-height:1.7;border:1px dashed #26334f;border-radius:8px}
@media(max-width:760px){.proof{grid-template-columns:1fr}}

/* ---------- the persona-interaction layer ----------
   A DIFFERENT LAYER with different rules, and it has to look like one. The
   telemetry surfaces above are dark, monospaced and gridded because they are
   readings. This is light, typeset in the body face, and marked illustrative,
   because it shows the product's manner rather than a captured exchange.
   Conflating the two would re-import the fiction the rebrand removed, wearing a
   persona costume. */
.persona-talk{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;box-shadow:var(--shadow-lift)}
.illus{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  background:var(--porcelain);border:1px dashed var(--dim);border-radius:999px;
  padding:5px 12px;color:var(--dim);
}
.turn{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.turn:last-of-type{border-bottom:0}
.turn .av{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:#fff;background:var(--b2)}
.turn.you .av{background:var(--ink);color:#fff}
.turn .said{font-size:1.02rem;line-height:1.6;color:var(--text);max-width:62ch}
.turn .said .who{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--dim);margin-bottom:5px}
.turn .said em{font-style:normal;color:var(--flow-deep)}
.talk-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.92rem;color:var(--dim);max-width:70ch}

/* ---------- roster ---------- */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.seat{background:#0d1526;border:1px solid var(--line-ink);border-radius:12px;padding:16px;border-left:3px solid var(--b2)}
.seat.b0{border-left-color:var(--b0)}.seat.b1{border-left-color:var(--b1)}
.seat.b2{border-left-color:var(--b2)}.seat.b3{border-left-color:var(--b3)}
.seat.b4{border-left-color:var(--b4)}
.seat.off-ladder{border-left-style:dashed;border-left-color:var(--b-off)}
.seat h4{font-family:var(--font-display);font-weight:700;font-size:1.12rem;color:#fff;letter-spacing:-.01em}
.seat .role{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:#8b97b8;margin-top:2px}
.seat dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin-top:12px;font-family:var(--font-mono);font-size:11px}
.seat dt{color:#5b6788;letter-spacing:.05em}
.seat dd{color:#cdd5e6}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* work: a thickening of the persona's own lifeline, so a busy line reads as busy */
.lat-work{stroke-width:5;stroke-linecap:round;opacity:.85}
.lat-work.b0{stroke:var(--b0)}.lat-work.b1{stroke:var(--b1)}.lat-work.b2{stroke:var(--b2)}
.lat-work.b3{stroke:var(--b3)}.lat-work.b4{stroke:var(--b4)}
.lat-work.off-ladder{stroke:var(--b-off)}
.lat-cross{stroke:var(--signal);stroke-width:2.4;stroke-linecap:round}