/* The Woo Woo Gang — one stylesheet for the dashboard and the uploader.
   Mobile-first throughout: the uploader is used standing up, on a phone, with
   one thumb, so tap targets never go below 44px.

   Gold on black. The discipline that keeps it readable rather than murky:
   GOLD IS FOR QUANTITY and chrome — the metric tiles use a tonal range of it
   (bright, champagne, amber, bronze) so four numbers side by side stay
   distinguishable without introducing unrelated hues. GREEN AND RED MEAN ONE
   THING EACH and nothing else: accepted / declined, active / cleared. If a
   status colour ever starts decorating something, the statuses stop reading. */

:root {
  --bg:        #0a0908;
  --bg-2:      #121009;
  --panel:     #17140c;
  --panel-2:   #201b0f;
  --line:      #352d18;
  --line-soft: #26200f;
  --ink:       #f6f1e3;
  --ink-dim:   #bdb39a;
  --ink-faint: #8a8068;

  /* the gold tonal range */
  --gold:      #e3b84a;   /* primary */
  --gold-2:    #f8dc84;   /* bright — large numerals, hover */
  --gold-deep: #c7922c;   /* amber */
  --bronze:    #a9762a;   /* the quietest gold */
  --champ:     #ede3c9;   /* champagne, a warm near-white */

  /* status, and only status */
  --green:     #7cc795;
  --red:       #e8817f;

  --radius:    14px;
  --radius-sm: 10px;
  --shadow:    0 8px 30px rgba(0,0,0,.6);
  --font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(227,184,74,.13), transparent 62%),
    radial-gradient(900px 540px at 92% 4%, rgba(169,118,42,.10), transparent 60%),
    var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: 72px;
}
a { color: var(--gold-2); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* ---------------------------------------------------------------- header */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10,9,8,.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 12px; padding: 12px 16px; max-width: 1040px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .2px; }
.orb {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 28%, #fffaf0 0%, var(--gold-2) 24%, var(--gold) 54%, #8a5f16 100%);
  box-shadow: 0 0 16px rgba(227,184,74,.55);
}
.brand-name { font-size: 15px; }
.brand-name small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-faint); letter-spacing: .6px; text-transform: uppercase; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.whoami { font-size: 12px; color: var(--ink-dim); text-align: right; line-height: 1.3; }
.whoami b { color: var(--ink); display: block; }
.whoami .role { display: block; }

/* ----------------------------------------------------------------- tabs */
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 16px 0; max-width: 1040px; margin: 0 auto;
        scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--ink-dim); font: 600 14px var(--font); padding: 10px 14px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; min-height: 44px;
}
.tab[aria-selected="true"] {
  background: var(--panel); color: var(--gold-2);
  border-color: var(--line); border-bottom-color: var(--panel);
}

/* --------------------------------------------------------------- panels */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin: 14px 0; box-shadow: var(--shadow);
}
.card > h2 { margin: 0 0 4px; font-size: 17px; }
.card > h2 + .sub { margin: 0 0 14px; color: var(--ink-dim); font-size: 13px; }
.sub { color: var(--ink-dim); font-size: 13px; }

h1 { font-size: 22px; margin: 18px 0 2px; }
.lede { color: var(--ink-dim); font-size: 14px; margin: 0 0 6px; }

/* ----------------------------------------------------------- stat tiles */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 620px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
}
.tile .n { font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; }
.tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--ink-faint); margin-top: 5px; }
.tile .foot { font-size: 11px; color: var(--ink-dim); margin-top: 6px; }
.tile.gold   .n { color: var(--gold-2); }
.tile.champ  .n { color: var(--champ); }
.tile.amber  .n { color: var(--gold-deep); }
.tile.bronze .n { color: var(--bronze); }

/* -------------------------------------------------------------- tables */
.t-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
.handle { font-weight: 600; white-space: nowrap; }
.handle .at { color: var(--ink-faint); }

/* ---------------------------------------------------------------- bars */
.bar { height: 6px; background: #0a0806; border-radius: 99px; overflow: hidden; min-width: 54px;
       border: 1px solid var(--line-soft); }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--gold); }
.bar.champ > i { background: var(--champ); }
.rate { display: flex; align-items: center; gap: 8px; }
.rate span { font-variant-numeric: tabular-nums; font-size: 13px; min-width: 38px; text-align: right; }

/* --------------------------------------------------------------- pills */
.pill {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 99px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--ink-dim); white-space: nowrap;
}
.pill.ok    { color: var(--green);     border-color: rgba(124,199,149,.42); background: rgba(124,199,149,.1); }
.pill.warn  { color: var(--gold-deep); border-color: rgba(199,146,44,.45);  background: rgba(199,146,44,.12); }
.pill.bad   { color: var(--red);       border-color: rgba(232,129,127,.42); background: rgba(232,129,127,.1); }
.pill.gold  { color: var(--gold-2);    border-color: rgba(227,184,74,.5);   background: rgba(227,184,74,.13); }
.pill.quiet { color: var(--ink-faint); }
.pill.rule  { font-variant-numeric: tabular-nums; }
/* The owner badge is the one place solid gold is used as a fill. */
.pill.owner {
  color: #120e04; background: linear-gradient(135deg, var(--gold-2), var(--gold));
  border-color: transparent; font-weight: 700;
}

/* -------------------------------------------------------------- buttons */
button, .btn {
  appearance: none; font: 600 15px var(--font); min-height: 44px; padding: 11px 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
/* Black text on gold: the strongest contrast available in this palette, which
   is what the one button you actually want pressed should have. */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  border-color: transparent; color: #140f03; font-weight: 700;
  box-shadow: 0 6px 20px rgba(227,184,74,.22);
}
.btn-ghost { background: transparent; }
.btn-danger { color: var(--red); border-color: rgba(232,129,127,.42); background: rgba(232,129,127,.08); }
.btn-sm { min-height: 36px; padding: 7px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------------- forms */
label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-dim);
        text-transform: uppercase; letter-spacing: .5px; margin: 14px 0 5px; }
input, select, textarea {
  width: 100%; font: 16px var(--font); color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px; min-height: 46px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
.field-note { font-size: 12px; color: var(--ink-faint); margin-top: 5px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; }
@media (min-width: 620px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------- messages */
.msg { padding: 11px 13px; border-radius: var(--radius-sm); font-size: 14px; margin: 12px 0; display: none; }
.msg.show { display: block; }
.msg.err  { background: rgba(232,129,127,.12); border: 1px solid rgba(232,129,127,.42); color: #ffc9c8; }
.msg.good { background: rgba(124,199,149,.12); border: 1px solid rgba(124,199,149,.42); color: #c3eed2; }
.msg.info { background: rgba(227,184,74,.1);   border: 1px solid rgba(227,184,74,.4);   color: var(--gold-2); }

.empty { text-align: center; padding: 30px 16px; color: var(--ink-faint); font-size: 14px; }
.empty .big { font-size: 30px; display: block; margin-bottom: 8px; opacity: .55; color: var(--gold-deep); }

/* ------------------------------------------------------------ post rows */
.post {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); margin-bottom: 10px; overflow: hidden;
}
.post-head {
  display: flex; align-items: flex-start; gap: 10px; padding: 13px;
  cursor: pointer; width: 100%; background: transparent; border: 0; text-align: left;
  min-height: 44px; border-radius: 0;
}
.post-head:hover { background: var(--panel-2); }
.post-title { font-weight: 600; font-size: 15px; line-height: 1.35; }
.post-meta { font-size: 12px; color: var(--ink-faint); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.post-nums { margin-left: auto; text-align: right; font-size: 12px; color: var(--ink-dim); white-space: nowrap; flex: none; }
.post-nums b { color: var(--gold-2); font-variant-numeric: tabular-nums; }
.post-body { padding: 0 13px 13px; border-top: 1px solid var(--line-soft); }
.post-body.hidden { display: none; }
.chev { flex: none; color: var(--gold-deep); transition: transform .15s; margin-top: 2px; }
.post.open .chev { transform: rotate(90deg); }

.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0; }
@media (min-width: 620px) { .kv { grid-template-columns: repeat(4, 1fr); } }
.kv div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; }
.kv b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--champ); }
.kv span { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-faint); }

.roster { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ----------------------------------------------------------- blacklist */
.bl {
  border: 1px solid var(--line); border-left: 3px solid var(--red);
  border-radius: var(--radius-sm); background: var(--bg-2); padding: 13px; margin-bottom: 10px;
}
.bl.cleared { border-left-color: var(--ink-faint); opacity: .6; }
.bl-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bl-note { font-size: 14px; margin: 9px 0 0; }
.bl-facts { font-size: 12px; color: var(--ink-dim); margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap;
            font-variant-numeric: tabular-nums; }
.bl-facts b { color: var(--ink); }
.ratio-flag { color: var(--red); font-weight: 600; }
.shot-thumb { margin-top: 10px; max-width: 160px; border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; }

/* ----------------------------------------------------------- rule cards */
.rules { display: grid; gap: 10px; }
@media (min-width: 620px) { .rules { grid-template-columns: 1fr 1fr; } }
.rule {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px; display: flex; gap: 11px;
}
.rule .n {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  background: rgba(227,184,74,.14); border: 1px solid rgba(227,184,74,.45);
  color: var(--gold-2); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.rule h3 { margin: 0 0 4px; font-size: 14px; color: var(--champ); }
.rule p { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.5; }

/* ----------------------------------------------- uploader task switcher */
.task-grid { display: grid; gap: 10px; }
@media (min-width: 560px) { .task-grid { grid-template-columns: 1fr 1fr; } }
.task {
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 16px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel); min-height: 72px; width: 100%;
}
.task:hover { border-color: var(--gold); background: var(--panel-2); }
.task .ico { font-size: 24px; flex: none; color: var(--gold); width: 30px; text-align: center; }
.task b { display: block; font-size: 15px; }
.task span { font-size: 12px; color: var(--ink-dim); line-height: 1.4; }

/* roster toggles in the uploader */
.pick {
  display: flex; align-items: center; gap: 11px; padding: 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-2); margin-bottom: 7px; min-height: 48px;
}
.pick input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; flex: none; accent-color: var(--gold); }
.pick .who { flex: 1; min-width: 0; }
.pick .who b { display: block; font-size: 14px; }
.pick .who span { font-size: 11px; color: var(--ink-faint); }
/* A .pick row is a <label> wrapping its own content, so the global uppercase
   on labels was shouting handles back as @CRYSTALBRO. Instagram handles are
   lowercase — rendering them in caps misreads as a different account. */
.pick .who b, .pick .who span { text-transform: none; letter-spacing: 0; }
.pick .who span { font-weight: 500; }
.pick select { width: auto; min-width: 124px; flex: none; font-size: 14px; min-height: 40px; padding: 7px 9px; }

.seg { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { flex: 1; border: 0; border-radius: 0; background: var(--bg-2); font-size: 13px; min-height: 42px; }
.seg button[aria-pressed="true"] { background: var(--gold); color: #140f03; font-weight: 700; }

.sticky-save {
  position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 42%);
  padding: 16px 0 10px; margin-top: 18px;
}

/* --------------------------------------------------------------- login */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 390px; text-align: center; }
.login-card .orb { width: 56px; height: 56px; margin: 0 auto 16px; }
.login-card h1 { font-size: 24px; margin: 0 0 6px; }
.login-card .lede { margin-bottom: 20px; }
.login-card label { text-align: left; }
.code-out {
  font: 600 16px ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-2); border: 1px dashed var(--gold);
  border-radius: var(--radius-sm); padding: 13px; margin-top: 10px;
  word-break: break-all; color: var(--gold-2);
}

footer { color: var(--ink-faint); font-size: 12px; text-align: center; padding: 26px 16px 10px; }
.spin { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(20,15,3,.3);
        border-top-color: #140f03; border-radius: 50%; animation: sp .7s linear infinite; }
.btn:not(.btn-primary) .spin, button:not(.btn-primary) .spin {
  border-color: rgba(246,241,227,.3); border-top-color: var(--ink);
}
@keyframes sp { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

/* At phone width the header had the brand wrapping onto three lines and
   shoving the buttons off the edge. Below 560px the subtitle and the role
   line are the parts nobody needs while standing in a queue adding a post. */
@media (max-width: 560px) {
  .top-in { gap: 8px; padding: 10px 12px; }
  .brand-name { font-size: 14px; line-height: 1.2; }
  .brand-name small { display: none; }
  .orb { width: 26px; height: 26px; }
  .whoami { font-size: 11px; }
  .whoami b { display: inline; }
  .whoami .role { display: inline; }
  .whoami .role::before { content: " · "; }
  .top-right { gap: 6px; }
  .top-right .btn, .top-right button { padding: 8px 11px; font-size: 13px; }
  .wrap { padding: 0 14px; }
}
@media (max-width: 400px) {
  .whoami { display: none; }
}

/* The roster's action cell was wrapping Edit / Hand over into a stack that
   spilled out of the card. The table already scrolls sideways inside
   .t-scroll, which is the better trade at phone width. */
td .btn-row { flex-wrap: nowrap; }
td .btn-row button, td .btn-row .btn { white-space: nowrap; }

/* ======================================================================
   The mark, and the intro.
   ====================================================================== */

/* The halo is drawn OUTSIDE the mark, never over it: a ring of soft gold that
   falls away in three stops so the edge never shows a hard line. Kept faint —
   it should read as the logo sitting in its own light, not as a glow effect. */
.orb {
  background:
    radial-gradient(circle at 32% 28%, #fffaf0 0%, var(--gold-2) 24%, var(--gold) 54%, #8a5f16 100%);
  box-shadow:
    0 0 0 1px rgba(227,184,74,.22),
    0 0 10px rgba(227,184,74,.34),
    0 0 26px rgba(227,184,74,.16);
}
/* Set once the real artwork is confirmed to load — see mountLogo(). */
.orb.has-logo {
  background: center / cover no-repeat url('../img/mark.png');
  /* A photographic logo carries its own edges, so the ring goes behind it and
     the fill gradient steps aside entirely. */
  box-shadow:
    0 0 10px rgba(227,184,74,.40),
    0 0 28px rgba(227,184,74,.20);
}

/* ------------------------------------------------------------- the intro */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; gap: 0;
  background:
    radial-gradient(620px 420px at 50% 42%, rgba(227,184,74,.10), transparent 70%),
    #070605;
  opacity: 1;
  transition: opacity .55s ease;
}
#splash.out { opacity: 0; pointer-events: none; }
.splash-in { display: flex; flex-direction: column; align-items: center; padding: 24px; text-align: center; }

.splash-mark {
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fffaf0 0%, var(--gold-2) 24%, var(--gold) 54%, #8a5f16 100%);
  box-shadow:
    0 0 0 1px rgba(227,184,74,.20),
    0 0 34px rgba(227,184,74,.30),
    0 0 90px rgba(227,184,74,.14);
  opacity: 0; transform: scale(.94);
  animation: splashIn 1s ease forwards;
}
/* The artwork is a square poster carrying its own title, so it is shown whole
   in a rounded frame rather than punched into a circle — a circular crop would
   cut the title off the top and the crest off the foot, which is most of what
   the poster is. The halo moves outside the frame and the placeholder gradient
   steps aside entirely. */
.splash-mark.has-poster {
  width: 290px; height: 290px; border-radius: 16px;
  background: center / cover no-repeat url('../img/poster.jpg');
  box-shadow:
    0 0 0 1px rgba(227,184,74,.26),
    0 0 44px rgba(227,184,74,.26),
    0 0 120px rgba(227,184,74,.12);
}
@media (max-width: 420px) {
  .splash-mark { width: 142px; height: 142px; }
  .splash-mark.has-poster { width: 232px; height: 232px; border-radius: 13px; }
}
@media (max-height: 620px) {
  .splash-mark.has-poster { width: 190px; height: 190px; }
}

.splash-name {
  margin: 22px 0 0; font-size: 21px; font-weight: 700; letter-spacing: .4px;
  color: var(--ink);
  opacity: 0; animation: splashIn .9s ease .35s forwards;
}
.splash-sub {
  margin: 6px 0 0; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gold); opacity: 0; animation: splashIn .9s ease .55s forwards;
}

/* The skip arrives a beat after the mark, so it never competes with the fade
   in — but it is there long before the hold ends, which is the whole point of
   it for somebody who opens this ten times a day. */
#splash-skip {
  position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);
  min-height: 44px; padding: 10px 22px; font-size: 14px;
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 99px;
  opacity: 0; animation: splashIn .5s ease .8s forwards;
}
#splash-skip:hover { color: var(--gold-2); border-color: rgba(227,184,74,.5); }

@keyframes splashIn { to { opacity: 1; transform: none; } }

/* Somebody who has asked their system for less motion gets the information
   without the performance: everything lands at once, and the hold is cut. */
@media (prefers-reduced-motion: reduce) {
  .splash-mark, .splash-name, .splash-sub, #splash-skip {
    animation: none; opacity: 1; transform: none;
  }
  #splash { transition: opacity .2s linear; }
}

/* While the intro is up the page behind it must not scroll under the finger. */
body.splashing { overflow: hidden; }

/* --------------------------------------------------------- count movement */
/* The arrow carries the direction on its own, so these read correctly in
   greyscale and to anyone who does not separate red from green. */
.delta {
  display: block; font-size: 11px; font-variant-numeric: tabular-nums;
  margin-top: 2px; white-space: nowrap; font-weight: 600;
}
.delta.up   { color: var(--green); }
.delta.down { color: var(--red); }
.delta.flat { color: var(--ink-dim); }       /* direction shown, no judgment */
.delta.none { color: var(--ink-faint); font-weight: 500; font-style: italic; }

/* The roster sweep in the uploader: two numbers per member, with last time's
   reading under each so you can see what you are changing. */
.sweep { border: 1px solid var(--line); border-radius: var(--radius-sm);
         background: var(--bg-2); padding: 11px; margin-bottom: 8px; }
.sweep-who { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.sweep-who b { font-size: 14px; }
.sweep-who .was { font-size: 11px; color: var(--ink-faint); margin-left: auto; white-space: nowrap; }
.sweep-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sweep-fields label { margin: 0 0 4px; font-size: 10px; }
.sweep-fields input { min-height: 44px; padding: 10px; font-size: 16px; }
.sweep-live { font-size: 11px; min-height: 15px; margin-top: 3px; font-weight: 600;
              font-variant-numeric: tabular-nums; }
.sweep-live.up   { color: var(--green); }
.sweep-live.down { color: var(--red); }
.sweep-live.flat { color: var(--ink-dim); }