@import url('https://fonts.googleapis.com/css2?family=Sixtyfour:BLED,SCAN@0..100,-53..100&family=VT323&display=swap');

/* Solos Terminal — component styles. Every colour, size and weight comes from tokens.css. */

.st-surface {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.15;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
.st-surface ::selection { background: var(--invert-ground); color: var(--invert-ink); }

/* Headline: the page's name, scanlined. */
.st-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 8.5vw, 88px);
  line-height: 0.95;
  font-variation-settings: 'SCAN' var(--scan-hero), 'BLED' 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.st-headline-title { font-size: 32px; line-height: 1; font-variation-settings: 'SCAN' var(--scan-title), 'BLED' 0; }

/* Button: ( LABEL ). Hover and pressed invert. */
.st-btn {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-0);
  padding: 0 var(--space-1);
  cursor: pointer;
  white-space: nowrap;
}
.st-btn::before { content: '( '; }
.st-btn::after { content: ' )'; }
.st-btn:hover, .st-btn[aria-pressed='true'], .st-btn-solid { background: var(--invert-ground); color: var(--invert-ink); }
.st-btn-solid:hover { background: transparent; color: var(--ink); outline: var(--rule-weight) solid var(--ink); outline-offset: -2px; }
.st-btn:disabled { color: var(--ink-muted); background: transparent; cursor: not-allowed; }
.st-btn:focus-visible, .st-menu-item:focus-visible, .st-row-btn:focus-visible { outline: var(--focus-weight) dashed var(--focus); outline-offset: 2px; }

/* Menu: numbered rows ". 01 > LABEL". */
.st-menu { display: flex; flex-direction: column; align-items: flex-start; }
.st-menu-row { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-4); }
.st-menu-item {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0 var(--space-1) 0 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.st-menu-idx { color: var(--ink); }
.st-menu-idx::before { content: '. '; }
.st-menu-idx::after { content: ' > '; }
.st-menu-item:hover, .st-menu-item[aria-current='page'] { background: var(--invert-ground); color: var(--invert-ink); }
.st-menu-item:hover .st-menu-idx, .st-menu-item[aria-current='page'] .st-menu-idx { color: var(--invert-ink); }

/* Stat: label over "= value". */
.st-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-stat-label { font-size: 18px; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.st-stat-value { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-stat-value::before { content: attr(data-prefix); }
.st-stat-inline { flex-direction: row; align-items: baseline; gap: var(--space-2); }
.st-stat-inline .st-stat-value { font-size: 22px; line-height: 1.15; }

/* Leader: LABEL . . . . . VALUE */
.st-leader { display: flex; align-items: baseline; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.st-leader-label { text-transform: uppercase; white-space: nowrap; }
.st-leader-dots { flex: 1; min-width: var(--space-4); align-self: flex-end; height: 0.35em; margin-bottom: 0.25em;
  background-image: radial-gradient(circle, var(--ink-faint) 1.4px, transparent 1.6px);
  background-size: var(--dot-pitch) 100%; background-repeat: repeat-x; background-position: left center; }
.st-leader-value { white-space: nowrap; text-align: right; }

/* DotRule: a row of dots between groups. */
.st-dots { height: 6px; background-image: radial-gradient(circle, var(--ink-faint) 1.4px, transparent 1.6px); background-size: var(--dot-pitch) 6px; background-repeat: repeat-x; }

/* DataTable */
.st-table-wrap { overflow-x: auto; max-width: 100%; }
.st-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.st-table th {
  text-align: left; font-weight: 400; font-size: 18px; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); border-bottom: var(--rule-weight) solid var(--ink); padding: var(--space-1) var(--space-2); white-space: nowrap;
}
.st-table td { padding: var(--space-1) var(--space-2); border-bottom: 1px dashed var(--ink-faint); white-space: nowrap; vertical-align: top; }
.st-table td.st-wrap { white-space: normal; min-width: 16ch; }
.st-table .st-num { text-align: right; }
.st-table tbody tr:nth-child(even) td { background: var(--ground-sunk); }
/* Link rows: the row stays a row of cells (readable by screen readers); one real button in the
   link cell carries focus and keyboard activation, and the whole row inverts on hover or focus. */
.st-table tr.st-row-link { cursor: pointer; }
.st-row-btn { font: inherit; color: inherit; background: transparent; border: 0; border-radius: var(--radius-0); padding: 0; margin: 0; cursor: pointer; text-align: left; text-transform: inherit; letter-spacing: inherit; }
.st-table tr.st-row-link:is(:hover, :has(.st-row-btn:focus-visible)) td { background: var(--invert-ground); color: var(--invert-ink); }
.st-table tr.st-row-link:is(:hover, :has(.st-row-btn:focus-visible)) :is(.st-delta, .st-tag, .dim, .st-window-code) { color: var(--invert-ink); }
.st-table tr.st-row-link .st-row-btn:focus-visible { outline-color: var(--invert-ink); }
.st-empty { color: var(--ink-muted); padding: var(--space-4) var(--space-2); }

/* Tag: [ LABEL ] */
.st-tag { display: inline-block; font-size: 18px; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.st-tag::before { content: '['; }
.st-tag::after { content: ']'; }
.st-tag-invert { background: var(--invert-ground); color: var(--invert-ink); padding: 0 var(--space-1); }
.st-tag-down { color: var(--down); }

/* Meter: a barcode that fills left to right. */
.st-meter { display: flex; flex-direction: column; gap: var(--space-1); }
.st-meter-head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
.st-meter-track { position: relative; height: 40px; border: var(--rule-weight) solid var(--ink); background: var(--ground-sunk); overflow: hidden; }
.st-meter-fill { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px); transition: width 0.4s steps(12); }

/* Loader: (...) DOWNLOADING . . . . . */
.st-loader { display: inline-flex; gap: var(--space-2); text-transform: uppercase; white-space: nowrap; }
.st-loader-dots { display: inline-block; overflow: hidden; vertical-align: bottom; width: 5ch; animation: st-dots 1.6s steps(6) infinite; }
@keyframes st-dots { from { width: 0; } to { width: 5ch; } }
@media (prefers-reduced-motion: reduce) { .st-loader-dots { animation: none; } .st-meter-fill { transition: none; } }

/* Delta: signed numbers. The sign carries the meaning; colour only repeats it. */
.st-delta { font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-delta-up { color: var(--up); }
.st-delta-down { color: var(--down); }
.st-delta-flat { color: var(--ink-muted); }

/* FeedLine: 22:52:56 >>> text */
.st-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-feed-line { display: grid; grid-template-columns: auto 3.5ch 1fr; column-gap: var(--space-2); padding: 2px 0; border-bottom: 1px dashed var(--ink-faint); }
.st-feed-time { font-size: 16px; line-height: 1.4; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.st-feed-glyph { white-space: nowrap; }
.st-feed-text { min-width: 0; overflow-wrap: anywhere; }
.st-feed-sell .st-feed-glyph, .st-feed-retire .st-feed-glyph { color: var(--down); }
.st-feed-buyback, .st-feed-burn { background: var(--invert-ground); color: var(--invert-ink); }
.st-feed-buyback .st-feed-time, .st-feed-burn .st-feed-time { color: var(--invert-ink); }

/* Window: a framed terminal panel with a title bar. */
.st-window { background: var(--ground); color: var(--ink); border: var(--rule-weight) solid var(--ink); border-radius: var(--radius-0); min-width: 0; }
.st-window-bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-bottom: var(--rule-weight) solid var(--ink); text-transform: uppercase; }
.st-window-code { color: var(--ink-muted); }
.st-window-body { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }