/* ============================================================================
   fa-instrument.css - shared "instrument / datasheet" layer for the
   institutional-facing pages (/institutional, /streaming).

   The visual language is taken from the product's own artifact: signed
   exposure by strike. Colour therefore encodes sign (positive gamma emerald,
   negative rose) rather than decorating, figures are tabular mono because the
   audience reads tear sheets, and the section markers are labels rather than
   a 01/02/03 sequence because these sections are not ordered steps.

   Loaded alongside the compiled Tailwind build (styles2.css), which is purged;
   everything here is hand-written so it is never stripped.
   ========================================================================= */

:root {
    --fa-ink: #0b0e14;          /* instrument panel */
    --fa-ink-2: #151a23;
    --fa-rule: #e4e4e7;
    --fa-rule-dark: #232a36;
    --fa-mist: #f7f8fa;
    --fa-text: #52525b;
    --fa-head: #18181b;
    --fa-pos: #10b981;          /* positive gamma */
    --fa-neg: #f43f5e;          /* negative gamma */
    --fa-key: #4f46e5;          /* structural accent */
    --fa-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* ---- shared primitives ---------------------------------------------- */

.fa-eyebrow {
    font-family: var(--fa-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #71717a;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.fa-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fa-rule);
}
.fa-eyebrow--dark { color: #7c8899; }
.fa-eyebrow--dark::after { background: var(--fa-rule-dark); }

.fa-num { font-family: var(--fa-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---- the instrument panel (hero) ------------------------------------ */

.fa-panel {
    background: var(--fa-ink);
    background-image: radial-gradient(120% 90% at 82% 8%, rgba(79, 70, 229, 0.16), transparent 60%);
    border: 1px solid var(--fa-rule-dark);
    border-radius: 1rem;
    overflow: hidden;
}
.fa-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--fa-rule-dark);
}
.fa-panel-title {
    font-family: var(--fa-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e4e7ec;
}
.fa-panel-note { font-family: var(--fa-mono); font-size: 0.6875rem; color: #6b7686; letter-spacing: 0.04em; }
.fa-panel-body { padding: 1.25rem; overflow: hidden; } /* labels can never escape the panel */

/* ---- gamma profile: signed bars around a zero axis, by strike -------- */

.fa-profile { display: grid; gap: 2px; }
.fa-profile-row {
    display: grid;
    grid-template-columns: 3.75rem 1fr;
    align-items: center;
    gap: 0.625rem;
}
.fa-profile-strike {
    font-family: var(--fa-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.6875rem;
    color: #6b7686;
    text-align: right;
}
.fa-profile-track { position: relative; height: 13px; }
.fa-profile-track::before { /* zero axis */
    content: "";
    position: absolute;
    left: 50%;
    top: -1px;
    bottom: -1px;
    width: 1px;
    background: #39414f;
}
.fa-profile-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 1px; }
.fa-profile-bar--pos { left: 50%; background: linear-gradient(90deg, rgba(16,185,129,0.55), var(--fa-pos)); }
.fa-profile-bar--neg { right: 50%; background: linear-gradient(270deg, rgba(244,63,94,0.55), var(--fa-neg)); }

.fa-profile-row--flip .fa-profile-strike { color: #e4e7ec; font-weight: 600; }
.fa-profile-flip {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: repeating-linear-gradient(90deg, #8b94a3 0 4px, transparent 4px 8px);
}
/* Wall/flip labels anchor to the track edges so they can never overflow the panel,
   regardless of how long the bar for that strike is. */
.fa-profile-tag {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--fa-mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #aab3c0;
    background: rgba(11, 14, 20, 0.86);
    padding: 0 0.375rem;
    white-space: nowrap;
    pointer-events: none;
}
.fa-profile-tag--right { right: 0; }
.fa-profile-tag--left { left: 0; }
.fa-profile-tag--center { left: 50%; transform: translate(-50%, -50%); }
.fa-profile-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--fa-rule-dark);
    font-family: var(--fa-mono);
    font-size: 0.6875rem;
    color: #7c8899;
}
.fa-legend-key { display: inline-flex; align-items: center; gap: 0.4375rem; }
.fa-legend-swatch { width: 0.625rem; height: 0.625rem; border-radius: 1px; }

/* ---- spec ladder: the datasheet table ------------------------------- */

.fa-spec { border-top: 1px solid var(--fa-head); }
.fa-spec-row {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.25rem 1.75rem;
    padding: 0.8125rem 0;
    border-bottom: 1px solid var(--fa-rule);
}
.fa-spec-key {
    font-family: var(--fa-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #71717a;
    padding-top: 0.1875rem;
}
.fa-spec-val { font-size: 0.9375rem; color: var(--fa-text); line-height: 1.65; }
.fa-spec-val strong { color: var(--fa-head); font-weight: 600; }

/* ---- tier rail ------------------------------------------------------ */

.fa-tier {
    border: 1px solid var(--fa-rule);
    border-top: 3px solid var(--fa-rule);
    border-radius: 0 0 0.75rem 0.75rem;
    padding: 1.25rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.fa-tier:hover { box-shadow: 0 10px 30px -18px rgba(24, 24, 27, 0.35); transform: translateY(-2px); }
.fa-tier--pro { border-top-color: var(--fa-pos); }
.fa-tier--stream { border-top-color: var(--fa-key); }
.fa-tier--ent { border-top-color: var(--fa-head); }
.fa-tier-name {
    font-family: var(--fa-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #71717a;
    margin-bottom: 0.625rem;
}
.fa-tier-price { display: flex; align-items: baseline; gap: 0.375rem; margin-bottom: 0.125rem; }
.fa-tier-price .fa-amount {
    font-family: var(--fa-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fa-head);
    letter-spacing: -0.02em;
}
.fa-tier-price .fa-qual { font-size: 0.8125rem; color: #a1a1aa; }
.fa-tier-sub { font-size: 0.8125rem; font-weight: 600; color: var(--fa-head); margin-bottom: 0.5rem; }
.fa-tier-body { font-size: 0.875rem; color: var(--fa-text); line-height: 1.6; }

/* ---- delivery rail: three modes of the same metrics ----------------- */

.fa-mode {
    border: 1px solid var(--fa-rule);
    border-radius: 0.75rem;
    padding: 1.125rem 1.25rem;
    background: #fff;
    height: 100%;
}
.fa-mode-tag {
    font-family: var(--fa-mono);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    margin-bottom: 0.625rem;
}
.fa-mode-tag::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; }
.fa-mode-tag--research { color: #0f766e; }
.fa-mode-tag--prod { color: #1d4ed8; }
.fa-mode-tag--live { color: var(--fa-key); }

/* ---- responsive ------------------------------------------------------ */

@media (max-width: 640px) {
    .fa-spec-row { grid-template-columns: 1fr; }
    .fa-profile-row { grid-template-columns: 3rem 1fr; }
}

/* ---- accessibility --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .fa-tier, .fa-tier:hover { transition: none; transform: none; }
}
.fa-panel a:focus-visible, .fa-tier a:focus-visible { outline: 2px solid var(--fa-key); outline-offset: 2px; }

@media print {
    .fa-panel { background: #fff !important; border-color: #d4d4d8; }
    .fa-panel-title, .fa-profile-strike { color: #18181b; }
    .fa-tier:hover { transform: none; box-shadow: none; }
}

/* ---- centred eyebrow (streaming hero is centre-aligned) -------------- */

.fa-eyebrow--center { justify-content: center; }
.fa-eyebrow--center::before, .fa-eyebrow--center::after {
    content: "";
    flex: 0 0 2rem;
    height: 1px;
    background: var(--fa-rule);
}

/* ---- frame tape: what streaming actually looks like on the wire ------ */

.fa-tape { display: grid; gap: 1px; background: var(--fa-rule-dark); border-radius: 0.375rem; overflow: hidden; }
.fa-tape-row {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.5rem 0.75rem;
    background: var(--fa-ink);
    font-family: var(--fa-mono);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.fa-tape-row--new { background: #121a2a; }
.fa-tape-seq { color: #6b7686; font-size: 0.6875rem; }
.fa-tape-metric { color: #aab3c0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-tape-val { color: var(--fa-pos); }
.fa-tape-val--neg { color: var(--fa-neg); }

@media (max-width: 640px) {
    .fa-tape-row { grid-template-columns: 2.75rem 1fr; }
    .fa-tape-val { grid-column: 2; }
}