/* lib/fui/family-instrument — shared CSS for Family A (annotated full-bleed schematic)
 *
 * Used by: TAX BUREAU 4-A, REACTOR NULL, TARSUS LOST, BLOOM-LINE
 *
 * Palette is supplied by each scenario via :root vars (--p-bg, --p-text, --p-accent,
 * --p-data, --p-callout, --p-alarm, --p-dim, --p-rule, --p-rule2, --p-grid, --p-core-hot).
 * This file references only those vars — never raw hex colors.
 *
 * Layout grammar (apply to scenario root container):
 *   .fi-root              — full-bleed, position:relative, contains everything
 *     .edge-top           — top header strip (height var --fi-top-h, default 28px)
 *     .edge-bot           — bottom status row (--fi-bot-h, default 36px)
 *     .edge-left          — left column (--fi-left-w, default 120px)
 *     .edge-right         — right column (--fi-right-w, default 160px)
 *     .stage              — central canvas area (auto-sized between strips)
 *       .anno             — leader-line label divs (positioned by JS)
 *       canvas / svg      — hero subject
 *     .stamp-title        — top-left corner stamp
 *     .stamp-plate        — top-right corner stamp
 *     .stamp-data         — bottom-left corner stamp
 *     .stamp-note         — bottom-right corner stamp
 */

:root {
  --fi-top-h: 28px;
  --fi-bot-h: 36px;
  --fi-left-w: 120px;
  --fi-right-w: 160px;
  --fi-rule: var(--p-rule2, rgba(255, 255, 255, 0.06));
  --fi-bg-strip-top:    rgba(0, 0, 0, 0.62);
  --fi-bg-strip-bot:    rgba(0, 0, 0, 0.55);
  --fi-bg-strip-side:   rgba(0, 0, 0, 0.42);
  --fi-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* === ROOT CONTAINER === */

.fi-root {
  position: fixed;
  inset: 0;
  background: var(--p-bg, #000);
  color: var(--p-text, #fff);
  overflow: hidden;
  font-family: var(--fi-mono);
}

.fi-stage {
  position: absolute;
  top: var(--fi-top-h);
  bottom: var(--fi-bot-h);
  left: var(--fi-left-w);
  right: var(--fi-right-w);
  overflow: hidden;
}

/* === EDGE-TOP HEADER STRIP === */

.edge-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--fi-top-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background:
    linear-gradient(to bottom, var(--fi-bg-strip-top), transparent);
  border-bottom: 1px solid var(--fi-rule);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 5;
}

.et-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.et-spacer { flex: 1 1 auto; }

.et-lbl  { color: var(--p-dim, #888); }
.et-id   { color: var(--p-accent, #aaa); font-weight: 500; }
.et-val  { color: var(--p-text, #fff); }

.et-seal {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--p-accent, #aaa);
  position: relative;
}
.et-seal::after {
  content: ''; position: absolute; inset: 2px;
  border-radius: 50%; border: 1px solid var(--p-dim, #555);
}

.et-pill {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--p-alarm, #c44);
  color: var(--p-alarm, #c44);
  letter-spacing: 0.22em;
  font-size: 8px;
  animation: et-pill-cycle 1.4s linear infinite;
}
@keyframes et-pill-cycle {
  0%,28%   { opacity: 1; border-color: var(--p-alarm, #c44); }
  30%,55%  { opacity: 0.10; border-color: transparent; }
  57%,72%  { opacity: 0.40; border-color: var(--p-dim, #666); color: var(--p-dim, #666); }
  74%,99%  { opacity: 1; border-color: var(--p-alarm, #c44); color: var(--p-alarm, #c44); }
}
.et-pill.steady { animation: none; }

.et-clock {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--p-alarm, #c44);
  animation: et-clock-flash 1.2s steps(2) infinite;
}
@keyframes et-clock-flash {
  0%,49%   { color: var(--p-alarm, #c44); text-shadow: 0 0 4px var(--p-alarm, #c44); }
  50%,100% { color: var(--p-data, #fa6); text-shadow: 0 0 2px var(--p-data, #fa6); }
}
.et-clock-lbl { color: var(--p-dim, #888); margin-right: 6px; }

/* === EDGE-BOT STATUS STRIP === */

.edge-bot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: var(--fi-bot-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background:
    linear-gradient(to top, var(--fi-bg-strip-bot), transparent);
  border-top: 1px solid var(--fi-rule);
  backdrop-filter: blur(4px);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 5;
}

.eb-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.eb-status .eb-lbl { color: var(--p-dim, #888); }

.eb-pill {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid;
  font-size: 8px;
  letter-spacing: 0.22em;
}
.eb-pill.normal   { color: var(--p-text, #fff);   border-color: var(--p-rule2, #444); }
.eb-pill.degraded { color: var(--p-data, #fa6);   border-color: var(--p-data, #fa6); }
.eb-pill.alarm    { color: #fff; background: var(--p-alarm, #c44); border-color: var(--p-alarm, #c44);
                    animation: eb-pill-pulse 1s ease-in-out infinite; }
@keyframes eb-pill-pulse {
  0%,100% { background: var(--p-alarm, #c44); }
  50%     { background: color-mix(in srgb, var(--p-alarm, #c44) 60%, transparent); }
}

.eb-sep {
  width: 1px; height: 60%;
  background: var(--fi-rule);
}
.eb-spacer { flex: 1 1 auto; }

.eb-sig { color: var(--p-dim, #888); }
.eb-sig .eb-name { color: var(--p-text, #fff); margin-left: 4px; }

.eb-temp {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.eb-temp .eb-temp-lbl  { color: var(--p-dim, #888); }
.eb-temp .eb-temp-val  { font-size: 14px; color: var(--p-alarm, #c44);
                         text-shadow: 0 0 6px color-mix(in srgb, var(--p-alarm, #c44) 50%, transparent);
                         letter-spacing: 0.04em; }
.eb-temp .eb-temp-rate { font-size: 10px; color: var(--p-data, #fa6); }

/* Function-row buttons (АВТОМ РУЧ КМН ВКЛ ВЫКЛ etc — Soyuz pattern) */
.eb-fn {
  display: inline-flex;
  gap: 4px;
}
.eb-fn .eb-fn-btn {
  padding: 3px 8px;
  border: 1px solid var(--p-rule2);
  color: var(--p-text);
  font-size: 8px;
  letter-spacing: 0.22em;
  background: transparent;
}
.eb-fn .eb-fn-btn.active {
  background: var(--p-data, #fa6);
  color: var(--p-bg, #000);
  border-color: var(--p-data, #fa6);
}

/* === EDGE-LEFT / EDGE-RIGHT COLUMNS === */

.edge-left,
.edge-right {
  position: absolute;
  top: var(--fi-top-h);
  bottom: var(--fi-bot-h);
  background:
    linear-gradient(to right, var(--fi-bg-strip-side), transparent 90%);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  z-index: 4;
}
.edge-left  { left: 0;  width: var(--fi-left-w);
              background: linear-gradient(to right, var(--fi-bg-strip-side), transparent 90%);
              border-right: 1px solid var(--fi-rule); }
.edge-right { right: 0; width: var(--fi-right-w);
              background: linear-gradient(to left,  var(--fi-bg-strip-side), transparent 90%);
              border-left:  1px solid var(--fi-rule); }

.el-head, .er-head {
  padding: 8px 10px 6px;
  font-size: 9px;
  color: var(--p-accent, #aaa);
  border-bottom: 1px solid var(--fi-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-foot, .er-foot {
  margin-top: auto;
  padding: 6px 10px;
  font-size: 8px;
  color: var(--p-dim, #888);
  border-top: 1px solid var(--fi-rule);
}

/* Generic data-row inside columns */
.fi-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 3px 10px;
  border-bottom: 1px dotted color-mix(in srgb, var(--fi-rule) 60%, transparent);
  font-size: 9px;
}
.fi-row .fi-row-lbl { color: var(--p-dim, #888); }
.fi-row .fi-row-val { color: var(--p-text, #fff); }
.fi-row.alarm .fi-row-val { color: var(--p-alarm, #c44);
                            text-shadow: 0 0 4px color-mix(in srgb, var(--p-alarm, #c44) 50%, transparent); }
.fi-row.warn  .fi-row-val { color: var(--p-data, #fa6); }
.fi-row.flash {
  animation: fi-row-flash 0.7s ease-out;
}
@keyframes fi-row-flash {
  0%   { background: color-mix(in srgb, var(--p-alarm, #c44) 25%, transparent); }
  100% { background: transparent; }
}

/* === ANNOTATIONS (.anno) === */

.anno {
  position: absolute;
  pointer-events: none;
  font-family: var(--fi-mono);
  font-size: 9px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  mix-blend-mode: screen;
  text-shadow:
    0 0 3px color-mix(in srgb, var(--p-accent, #aaa) 55%, transparent),
    0 0 8px color-mix(in srgb, var(--p-accent, #aaa) 25%, transparent);
  z-index: 3;
  transition: opacity 0.3s ease;
}
.anno.left  { text-align: right; transform: translate(-100%, -50%); }
.anno.right { text-align: left;  transform: translate(0,        -50%); }

.anno-cyr  { display: block; font-size: 7.5px; color: var(--p-accent, #aaa);
             letter-spacing: 0.12em; opacity: 0.85; }
.anno-lat  { display: block; font-size: 9px;   color: var(--p-text, #fff); margin-top: 1px; }
.anno-val  { display: inline-block; font-size: 9.5px; color: var(--p-callout, var(--p-data, #fa6));
             margin-top: 2px; padding: 1px 4px; }

.anno-pill { display: inline-block; padding: 0 5px; margin-top: 2px; font-size: 7.5px;
             letter-spacing: 0.18em;
             border: 1px solid var(--p-dim, #666); color: var(--p-dim, #666); }

/* Three label visual styles — randomize across the annotation set */
.anno.style-bracket .anno-val { border: 1px solid var(--p-dim, #666); }
.anno.style-pill    .anno-val { border-radius: 8px; background: color-mix(in srgb, var(--p-bg, #000) 70%, transparent); border: 1px solid var(--p-dim, #666); }
.anno.style-plain   .anno-val { /* no border */ }

/* States */
.anno.alarm .anno-val { color: var(--p-alarm, #c44);
                        text-shadow: 0 0 5px color-mix(in srgb, var(--p-alarm, #c44) 60%, transparent); }
.anno.swept .anno-val { background: color-mix(in srgb, var(--p-alarm, #c44) 32%, transparent);
                        color: var(--p-text, #fff); animation: anno-swept-flash 0.4s ease-out; }
@keyframes anno-swept-flash {
  0%   { background: color-mix(in srgb, var(--p-alarm, #c44) 60%, transparent); }
  100% { background: color-mix(in srgb, var(--p-alarm, #c44) 32%, transparent); }
}

/* === CORNER STAMPS === */

.stamp-title, .stamp-plate, .stamp-data, .stamp-note {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.stamp-title { top: calc(var(--fi-top-h) + 12px); left: calc(var(--fi-left-w) + 16px); }
.stamp-plate { top: calc(var(--fi-top-h) + 12px); right: calc(var(--fi-right-w) + 16px); text-align: right; }
.stamp-data  { bottom: calc(var(--fi-bot-h) + 12px); left: calc(var(--fi-left-w) + 16px); }
.stamp-note  { bottom: calc(var(--fi-bot-h) + 12px); right: calc(var(--fi-right-w) + 16px); text-align: right;
               font-style: italic; font-size: 8px; opacity: 0.72; }

.stamp-title .st-cyr { font-size: 8px; color: var(--p-accent); display: block; opacity: 0.85; }
.stamp-title .st-lat { font-size: 14px; color: var(--p-text); display: block; letter-spacing: 0.12em; }
.stamp-title .st-code { font-size: 8px; color: var(--p-dim); display: block; margin-top: 2px; }

.stamp-plate .sp-row { display: block; }
.stamp-plate .sp-lbl { color: var(--p-dim); margin-right: 6px; }
.stamp-plate .sp-val { color: var(--p-text); }

.stamp-data .sd-grid { display: grid; grid-template-columns: auto auto; gap: 2px 12px; font-size: 8.5px; }
.stamp-data .sd-lbl  { color: var(--p-dim); }
.stamp-data .sd-val  { color: var(--p-text); }

/* === ENGINEERING GRID overlay (subtle background graph paper) === */

.fi-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--p-grid, rgba(255,255,255,0.04)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--p-grid, rgba(255,255,255,0.04)) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 1;
}

/* === SCAN SWEEP arc (hero subject overlay) === */

.scan-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.scan-sweep::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 340deg,
              color-mix(in srgb, var(--p-accent, #aaa) 40%, transparent) 350deg,
              color-mix(in srgb, var(--p-accent, #aaa) 80%, transparent) 358deg,
              transparent 360deg);
  animation: scan-sweep-spin 8s linear infinite;
  mix-blend-mode: screen;
}
@keyframes scan-sweep-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* === FILMSTRIP (bottom thumbnail row, e.g. cross-sections) === */

.fi-filmstrip {
  position: absolute;
  bottom: var(--fi-bot-h);
  left: var(--fi-left-w);
  right: var(--fi-right-w);
  height: 56px;
  display: flex;
  gap: 6px;
  padding: 4px 8px;
  background: linear-gradient(to top, var(--fi-bg-strip-bot), transparent);
  border-top: 1px solid var(--fi-rule);
  z-index: 4;
  overflow: hidden;
}
.fi-filmstrip .fi-frame {
  flex: 1 1 0;
  min-width: 60px;
  border: 1px solid var(--fi-rule);
  background: var(--p-bg);
  position: relative;
  font-size: 7px;
  color: var(--p-dim);
  padding: 2px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.fi-filmstrip .fi-frame.active {
  border-color: var(--p-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--p-accent, #aaa) 40%, transparent);
}
.fi-filmstrip .fi-frame canvas,
.fi-filmstrip .fi-frame svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.fi-filmstrip .fi-frame .fi-frame-lbl {
  position: relative; z-index: 1;
  background: color-mix(in srgb, var(--p-bg, #000) 70%, transparent);
  padding: 0 3px;
}

/* === CINEMATIC POST-FX layers === */

.fi-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
  z-index: 7;
  mix-blend-mode: multiply;
}

.fi-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: fi-grain-shift 1.6s steps(6) infinite;
  mix-blend-mode: overlay;
}
@keyframes fi-grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-8px, 4px); }
  40%  { transform: translate(6px, -6px); }
  60%  { transform: translate(-4px, -2px); }
  80%  { transform: translate(2px, 6px); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .fi-grain, .scan-sweep::before, .et-pill, .et-clock, .eb-pill.alarm,
  .anno.swept, .fi-row.flash {
    animation: none !important;
  }
}