/* solariboard.css — split-flap style departure board for the public landing page */

.solari-board {
    /* Desktop: compact "departure board" widget — capped width, centered.
       Six fixed-width columns come to ~363px of content, so the original
       480px cap still holds them without a scrollbar (and without shifting
       the landing page's layout). */
    max-width: 480px;
    margin: 0 auto;
    background: linear-gradient(180deg, #0a0a0c 0%, #050505 100%);
    border: 1px solid #1a1a1a;
    border-radius: 5px;
    padding: 7px 10px;
    color: #ffaa00;
    font-family: 'Share Tech Mono', 'Consolas', 'Courier New', monospace;
    font-size: 10px;
    line-height: 1.3;
    box-shadow:
        inset 0 1px 0 rgba(255, 170, 0, 0.05),
        0 3px 16px rgba(0, 0, 0, 0.6);
    overflow-x: auto;
}

.solari-title {
    color: #ffaa00;
    font-family: 'Orbitron', system-ui, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 4px;
    margin-bottom: 5px;
    border-bottom: 1px solid #1a1a1a;
    opacity: 0.85;
}

/* Names the exchange the board is pointed at. Only rendered when the operator
   has selected a non-default endpoint in the Console, so the public landing
   page stays clean. */
.solari-endpoint {
    text-align: center;
    font-size: 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8be9fd;
    margin: -2px 0 5px;
}

.solari-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 0;
}

.solari-table th,
.solari-table td {
    padding: 2px 6px;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

.solari-table th {
    color: #aa7000;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 4px;
}

.solari-table td {
    border-bottom: 1px dashed rgba(255, 170, 0, 0.08);
    font-size: 10px;
}

.solari-table tr:last-child td { border-bottom: none; }

.solari-cell {
    display: inline-block;
    perspective: 200px;
}

.solari-char {
    display: inline-block;
    text-shadow: 0 0 6px rgba(255, 170, 0, 0.35);
}

.solari-char.flapping {
    animation: solari-flap 180ms ease-out;
}

@keyframes solari-flap {
    0%   { transform: rotateX(0deg);   opacity: 1; }
    49%  { transform: rotateX(-90deg); opacity: 0.4; }
    50%  { transform: rotateX(90deg);  opacity: 0.4; }
    100% { transform: rotateX(0deg);   opacity: 1; }
}

/* Status dot column */
.solari-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
    background: #444;
    box-shadow: 0 0 5px currentColor;
}
.solari-dot.live   { background: #00ff88; color: #00ff88; }
.solari-dot.warn   { background: #ffaa00; color: #ffaa00; }
.solari-dot.down   { background: #ff4444; color: #ff4444; }
.solari-dot.unknown { background: #666; color: #666; }

.solari-status-text {
    font-size: 8px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.solari-status-text.live  { color: #00ff88; }
.solari-status-text.warn  { color: #ffaa00; }
.solari-status-text.down  { color: #ff4444; }
.solari-status-text.unknown { color: #888; }

/* Slightly fade the volume column so prices pop */
.solari-table td.solari-vol { color: #cc8800; }

/* Numeric columns hug the right edge so the header sits over the digits
   (cell content is NBSP-padded to a fixed width, so both align). */
.solari-table th.solari-num,
.solari-table td.solari-num { text-align: right; }

@media (max-width: 720px) {
    .solari-board { padding: 12px; font-size: 12px; }
    .solari-table { min-width: 440px; }
    .solari-table th, .solari-table td { padding: 4px 6px; font-size: 12px; }
}

/* Phone: six columns can't fit without a sideways scroll, so the two ops
   columns (BRIDGE, FEED AGE) drop out — a visitor on a phone wants the
   venue, how long we've been up, the volume and whether it's live. STATUS
   still carries the health signal that BRIDGE largely duplicates.

   Hidden BY COLUMN NAME, not by position. This rule used to say
   :nth-child(4)/(5), which silently pointed at the wrong two columns the
   moment the column list changed — and did, the morning LAST was removed:
   it started hiding FEED AGE and STATUS, dropping the very signal the
   paragraph above says to keep. solariboard.js stamps solari-col-<key> on
   every th and td, so these selectors track the columns themselves. */
@media (max-width: 560px) {
    .solari-table th.solari-col-bridge,  .solari-table td.solari-col-bridge,
    .solari-table th.solari-col-latency, .solari-table td.solari-col-latency { display: none; }
    .solari-table { min-width: 0; }
}

/* Per-column identity colors (2026-08-01): sky-blue venue names to match
   the Trading Terminal, white feed-age, and a state-driven bridge column. */
.solari-table td.solari-exch .solari-char { color: #8be9fd; }
.solari-table td.solari-age  .solari-char { color: #ffffff; }
.solari-table td.solari-col-uptime .solari-char { color: #ffd066; }
.solari-table td.solari-bridge.live    .solari-char { color: #00ff88; }
.solari-table td.solari-bridge.warn    .solari-char { color: #ffaa00; }
.solari-table td.solari-bridge.down    .solari-char { color: #ff4444; }
.solari-table td.solari-bridge.unknown .solari-char { color: #888; }

/* ---- pinned GlobalRisk(R) row ------------------------------------------
   The house wordmark, coloured per character over the existing flap spans:
   "Global" blue, "Risk" white, the ® small and grey — the same split the
   shared .gr-header uses. Indices are fixed because the text is fixed
   (G-l-o-b-a-l = 1-6, R-i-s-k = 7-10, ® = 11). */
.solari-table td.solari-brand .solari-char:nth-child(-n+6)                 { color: #3b82f6; }
.solari-table td.solari-brand .solari-char:nth-child(n+7):nth-child(-n+10) { color: #e2e8f0; }
.solari-table td.solari-brand .solari-char:nth-child(11) {
    color: #94a3b8;
    font-size: 0.65em;
    vertical-align: super;
}
/* Sits above the venues it aggregates, so give it a rule beneath and a touch
   more presence than a venue row. */
.solari-table tr.solari-row-brand td {
    border-bottom: 1px solid rgba(59, 130, 246, 0.35);
    padding-top: 3px;
    padding-bottom: 4px;
}
.solari-table tr.solari-row-brand td.solari-brand .solari-char {
    font-weight: 700;
    text-shadow: 0 0 7px rgba(59, 130, 246, 0.45);
}
/* Exchange unreachable: the venue rows are last-known, not current. Dim them
   so the OFFLINE banner above cannot be read as "everything else is fine". */
.solari-table tbody.solari-stale tr:not(.solari-row-brand) { opacity: 0.38; }

/* Trademark star on the EXCHANGE header + ownership footnote below the board. */
.solari-table th .solari-star { font-size: 0.65em; margin-left: 1px; color: #94a3b8; }
.solari-footnote-tight { margin-top: 4px !important; }
.solari-footnote {
    margin-top: 8px;
    font-size: 10px;
    line-height: 1.5;
    color: #64748b;
    text-align: left;
    max-width: 640px;
}