/* Tokens, reset and page frame.
 *
 * Dark on purpose and only dark: this page is looked at, not read - most of the
 * time it is open on a second screen or a phone at night, and a light theme that
 * follows the operating system would flash white on every wake. Every colour is
 * painted explicitly so nothing is borrowed from the browser default.
 *
 * The palette is deliberately narrow. Green and red mean money in one direction
 * or the other and are used for nothing else, so a red pixel anywhere on the
 * page always means the same thing.
 */

:root {
  --bg:        #0a0d12;
  --surface:   #12161e;
  --surface-2: #171c26;
  --line:      #232a36;
  --line-soft: #1b212b;

  --text:      #e7ecf3;
  --text-dim:  #97a1b2;
  --text-mute: #6b7585;

  --up:        #34d399;
  --up-soft:   rgba(52, 211, 153, .12);
  --down:      #f2555a;
  --down-soft: rgba(242, 85, 90, .12);
  --warn:      #f5b544;
  --warn-soft: rgba(245, 181, 68, .12);
  --info:      #5b9dff;
  --info-soft: rgba(91, 157, 255, .12);

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 16px;

  --pad: 18px;
  --gap: 14px;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }

table { border-collapse: collapse; width: 100%; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-block: 20px 8px;
  /* A flex item's min-width is auto, which on a card holding a nowrap table
   * resolves to the table's own width - so on a phone the cards grew past the
   * viewport and the page scrolled sideways instead of the tables. */
  min-width: 0;
}
.page > * { min-width: 0; }

.mono { font-family: var(--mono); font-size: .95em; }

/* Section and field labels: the smallest text on the page, and the only text
 * that is allowed to shout in uppercase. */
.label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.muted { color: var(--text-dim); }
.sep   { color: var(--line); margin-inline: 7px; }

.up   { color: var(--up); }
.down { color: var(--down); }

/* Horizontal scroll belongs to the table, never to the page.
 *
 * The shadows are the two `scroll` layers; the two `local` layers are painted in
 * the card colour and scroll with the content, so each shadow is covered exactly
 * when that end is reached. On a phone this is the only thing that says a table
 * continues past the edge - without it a cut-off column reads as a broken page. */
.scroll {
  min-width: 0; overflow-x: auto;
  margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
  scrollbar-width: thin;
  background:
    linear-gradient(to right, var(--surface) 40%, rgba(18, 22, 30, 0)) left center,
    linear-gradient(to left,  var(--surface) 40%, rgba(18, 22, 30, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .45), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .45), transparent) right center;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}

.foot {
  color: var(--text-mute);
  font-size: 12px;
  padding-block: 18px 28px;
}

@media (max-width: 720px) {
  .wrap { padding-inline: 13px; }
  :root { --pad: 14px; }
}