/* =================================================================
   CASTLE NUMERICS — the figure system
   -----------------------------------------------------------------
   DESIGN.md principle #4: "Numbers are the product."  Until this file
   existed, they weren't.

   THE DEFECT THIS FIXES
   Montserrat ships PROPORTIONAL figures. Measured in Chromium at 40px:

       "1111"  ->  56px      "0000"  ->  104px

   An 86% width difference between digit glyphs. Every right-aligned
   currency column in the app was therefore ragged, and every live-
   updating value (Day P&L, portfolio value, position marks) visibly
   reflowed its own container as digits changed. On a platform whose
   whole job is to look like it won't lose your money, that is the
   most expensive 86% in the codebase.

   THE FIX
   Montserrat stays. It is the one typeface of this product, prose and
   figures alike, and a second face is not what the columns needed —
   the OpenType feature was. `font-variant-numeric: tabular-nums` puts
   every Montserrat digit on one advance width:

       "1111"  ->  112px      "0000"  ->  112px

   Same face, straight column, no new download, no FOUT, no second
   family to keep in sync.

   THE SYSTEM
   1. tabular-nums on every numeric surface in the app, applied by
      selector so 34,000 lines of templates did not have to change.
   2. A fixed rem figure ramp (~1.25 ratio). Product register: no
      clamp(), no fluid numbers. A price is a price at every width.
   3. Direction is never carried by hue alone (WCAG 1.4.1). .cc-delta
      prints a sign glyph before the value, so a deuteranope reads
      the same information as everyone else.

   LOAD ORDER: after theme-unification.css. This file is the last word
   on figures and nothing else — it must not restyle layout or color
   beyond the gain/loss semantics it owns.
   ================================================================= */


:root {
  /* One typeface across the product: Montserrat, for prose and for
     figures alike. The numeric token exists so every number in the app
     resolves through a single declaration — if the figure treatment
     ever needs to change, it changes here and nowhere else. */
  --castle-font-numeric: var(--castle-font-primary,
    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

  /* Figure ramp — fixed rem, ~1.25 ratio. */
  --cc-num-xs:  0.6875rem;   /* 11px — dense table micro-values */
  --cc-num-sm:  0.8125rem;   /* 13px — standard table cell */
  --cc-num-md:  0.9375rem;   /* 15px — inline value in prose */
  --cc-num-lg:  1.25rem;     /* 20px — card value */
  --cc-num-xl:  1.75rem;     /* 28px — section value */
  --cc-num-2xl: 2.25rem;     /* 36px — the one number that matters most */

  /* Tabular figures are set to the widest digit's advance, so a number
     reads a touch loose against prose; a hair of negative tracking puts
     it back. */
  --cc-num-tracking: -0.01em;

  /* Direction semantics. Kept here so gain/loss has exactly one home. */
  --cc-gain: #10B981;
  --cc-loss: #EF4444;
  --cc-flat: rgba(255, 255, 255, 0.62);
}

/* ---------------------------------------------------------------
   2. SAFETY NET — tabular figures for anything numeric that did not
   opt in. Cheap, invisible when it isn't needed, and it straightens
   every legacy column in the app without touching a single template.
   --------------------------------------------------------------- */
table,
td, th,
input[type='number'],
.metric-value, .metric-number, .metric-change,
.stat-value, .stat-number,
.detail-value, .summary-card-value, .summary-card-change,
.quick-stat-value, .header-stat-value, .alert-stat-value,
.treemap-stat-value, .bot-metric-value, .capital-limit-value,
.profile-tile-meta-value, .balance-value, .allocation-value,
.allocation-percentage, .percentage-value, .percentage-cell,
.price, .price-cell, .price-amount, .price-display, .pricing-amount,
.monthly-price, .annual-price, .subscription-current-price,
.amount-cell, .value-cell, .transfer-amount, .position-pnl,
.sharpe-value {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ---------------------------------------------------------------
   3. THE NUMERIC REGISTER — opt-in, for figures that carry weight.

   Applied to the existing value classes so the whole app inherits it
   without 34,000 lines of template edits. New markup should use
   .cc-num directly.
   --------------------------------------------------------------- */
.cc-num,
.metric-value, .metric-number,
.stat-value, .stat-number,
.summary-card-value, .quick-stat-value, .header-stat-value,
.alert-stat-value, .treemap-stat-value, .bot-metric-value,
.capital-limit-value, .balance-value, .position-pnl,
.price-amount, .price-display, .pricing-amount,
.monthly-price, .annual-price, .subscription-current-price,
.sharpe-value, .transfer-amount {
  font-family: var(--castle-font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: var(--cc-num-tracking);
  font-variant-ligatures: none;
}

/* Ramp modifiers. */
.cc-num--xs  { font-size: var(--cc-num-xs); }
.cc-num--sm  { font-size: var(--cc-num-sm); }
.cc-num--md  { font-size: var(--cc-num-md); }
.cc-num--lg  { font-size: var(--cc-num-lg); }
.cc-num--xl  { font-size: var(--cc-num-xl); }
.cc-num--2xl { font-size: var(--cc-num-2xl); }

/* Weights. 500 is the working weight for data; 600 for the headline
   figure; 400 for secondary/context values. */
.cc-num--quiet  { font-weight: 400; color: rgba(255, 255, 255, 0.72); }
.cc-num--strong { font-weight: 600; }

/* Currency symbols and units read as annotation, not as part of the
   figure. Half a step down, one weight lighter, never in gold. */
.cc-num__unit,
.cc-num__currency {
  font-size: 0.72em;
  font-weight: 400;
  opacity: 0.7;
  letter-spacing: 0;
  /* Optical: a superscripted $ that sits on the cap line, not floating
     above it. This is the detail that made the pricing cards read as
     broken. */
  vertical-align: 0.08em;
  margin-right: 0.08em;
}
.cc-num__unit { margin-right: 0; margin-left: 0.12em; vertical-align: 0; }

/* ---------------------------------------------------------------
   4. TICKERS, IDS, TIMESTAMPS
   A ticker is a symbol, not a word. With one typeface the distinction
   has to come from weight and tracking rather than from a second
   family — 600 weight, slight positive tracking, uppercase.
   --------------------------------------------------------------- */
.cc-ticker {
  font-family: var(--castle-font-numeric);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
}
.cc-ts,
.cc-id {
  font-family: var(--castle-font-numeric);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.68);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   5. DIRECTION — never color alone (WCAG 1.4.1 Use of Color)
   Deuteranopia and protanopia are common enough that a red/green-only
   P&L column is unreadable for a meaningful slice of users. The glyph
   carries the meaning; the color reinforces it.

     <span class="cc-delta" data-dir="up">+0.42%</span>
   --------------------------------------------------------------- */
.cc-delta {
  font-family: var(--castle-font-numeric);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-weight: 500;
  letter-spacing: var(--cc-num-tracking);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
}
.cc-delta::before {
  font-size: 0.78em;
  line-height: 1;
  /* Fixed advance so the glyph column stays straight whichever way
     the market went. */
  width: 0.7em;
  display: inline-block;
  text-align: center;
  flex: 0 0 auto;
}
.cc-delta[data-dir='up']   { color: var(--cc-gain); }
.cc-delta[data-dir='up']::before   { content: '\25B2'; }   /* ▲ */
.cc-delta[data-dir='down'] { color: var(--cc-loss); }
.cc-delta[data-dir='down']::before { content: '\25BC'; }   /* ▼ */
.cc-delta[data-dir='flat'] { color: var(--cc-flat); }
.cc-delta[data-dir='flat']::before { content: '\2013'; }   /* – */

/* Screen readers get words, not geometry. */
.cc-delta[data-dir='up']   .cc-delta__sr::after { content: ' up'; }
.cc-delta[data-dir='down'] .cc-delta__sr::after { content: ' down'; }

/* ---------------------------------------------------------------
   6. COLUMN ALIGNMENT
   Numeric columns align right and share one decimal position; label
   columns align left. Mixed-alignment tables are the single loudest
   "this was not designed" signal in financial UI.
   --------------------------------------------------------------- */
td.cc-col-num, th.cc-col-num,
td[data-num], th[data-num] {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-family: var(--castle-font-numeric);
  font-size: var(--cc-num-sm);
  letter-spacing: var(--cc-num-tracking);
  white-space: nowrap;
}
/* The header of a numeric column aligns with its figures, not with
   the label columns. */
th.cc-col-num, th[data-num] {
  font-family: var(--castle-font-primary, inherit);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* A value that is genuinely absent reads as absent — an em dash at
   reduced opacity — never as "0.00", which is a different fact. */
.cc-num--empty,
[data-num]:empty::after {
  content: '\2014';
  color: rgba(255, 255, 255, 0.38);
  font-weight: 400;
}

/* ---------------------------------------------------------------
   7. LIVE VALUES
   When a figure changes, flash the change, not the number. A 420ms
   background wash reads as "this just updated" without the value
   itself jumping — and with tabular figures the container no longer
   resizes underneath it.
   --------------------------------------------------------------- */
@keyframes cc-tick-up {
  from { background-color: rgba(16, 185, 129, 0.22); }
  to   { background-color: transparent; }
}
@keyframes cc-tick-down {
  from { background-color: rgba(239, 68, 68, 0.22); }
  to   { background-color: transparent; }
}
.cc-tick-up   { animation: cc-tick-up 0.42s ease-out; border-radius: 3px; }
.cc-tick-down { animation: cc-tick-down 0.42s ease-out; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cc-tick-up, .cc-tick-down { animation: none; }
}

/* ---------------------------------------------------------------
   8. MOBILE
   Tabular figures are set to the width of the widest digit, so a
   currency value is slightly wider than it was with proportional
   figures. At 390px that is enough to push a dense table row into
   horizontal scroll, so the ramp steps down one notch rather than
   letting the table overflow.
   --------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --cc-num-sm:  0.75rem;    /* 12px */
    --cc-num-md:  0.875rem;   /* 14px */
    --cc-num-lg:  1.125rem;   /* 18px */
    --cc-num-xl:  1.5rem;     /* 24px */
    --cc-num-2xl: 1.875rem;   /* 30px */
  }
  td.cc-col-num, th.cc-col-num,
  td[data-num], th[data-num] { font-size: var(--cc-num-sm); }
}