/* EVRA-S SURFACE & DEPTH SYSTEM — evra_surface_v1, 2026-08-09
 * ═══════════════════════════════════════════════════════════════════════════
 * Operator brief: "instead of everything sitting flat" — elevated container,
 * card, floating controls, hover layer, focus ring; faint top-edge highlights
 * for a premium finish; buttons that feel bigger and have motion and a click;
 * "a windows feel to it for cards buttons and being alive".
 *
 * ── THE ONE THING TO CHANGE WHEN THE NEW COLOUR ARRIVES ──────────────────
 * The operator is replacing the card/canvas colour. That hex has NOT been
 * supplied yet (the reference image did not arrive), and CLAUDE.md hard-locks
 * the palette against guessing. So every surface below is derived from two
 * variables and nothing hard-codes a grey:
 *
 *     --evra-canvas       the page behind everything
 *     --evra-surface-1    the card
 *
 * Swap those two in evra-vuexy-theme.css and this entire file follows. The
 * elevation steps are built with colour-mix() against the SAME two variables,
 * so a lighter or darker brand surface keeps its own relationships instead of
 * drifting toward a grey that was baked in here.
 *
 * ── WHY NOT JUST ADD SHADOWS ─────────────────────────────────────────────
 * Depth on a dark UI does not come from shadow — a black shadow on a near-black
 * canvas is invisible. It comes from three things together, and this file
 * always applies all three:
 *   1. a surface one step LIGHTER than what is behind it
 *   2. a 1px top-edge highlight (light falls from above)
 *   3. a shadow to seat it
 * A card with only a shadow still reads flat. That is the mistake this file
 * exists to stop.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Elevation surfaces, derived — never hard-coded. Each step mixes a little
     white into the card colour, so the ladder survives a palette swap. */
  --ev-e0: var(--evra-canvas, #0A0A0A);                                   /* page */
  --ev-e1: var(--evra-surface-1, #141414);                                /* card */
  --ev-e2: color-mix(in srgb, var(--evra-surface-1, #141414) 94%, #fff);  /* raised */
  --ev-e3: color-mix(in srgb, var(--evra-surface-1, #141414) 89%, #fff);  /* floating */
  --ev-e4: color-mix(in srgb, var(--evra-surface-1, #141414) 84%, #fff);  /* overlay */

  /* Hover is a LAYER, not a different colour: the same white wash over
     whatever surface it lands on, so one rule works at every elevation. */
  --ev-hover:   rgba(255,255,255,0.035);
  --ev-hover-2: rgba(255,255,255,0.06);
  --ev-press:   rgba(0,0,0,0.16);

  /* The top-edge highlight. 1px of light along the upper border is what makes
     a dark card read as a physical object rather than a painted rectangle. */
  --ev-edge:      inset 0 1px 0 rgba(255,255,255,0.055);
  --ev-edge-warm: inset 0 1px 0 rgba(255,255,255,0.09);

  /* Shadows seat the surface. Layered rather than one big blur - a single
     large shadow reads as fog on a dark canvas. */
  --ev-sh-1: 0 1px 2px rgba(0,0,0,0.30);
  --ev-sh-2: 0 2px 4px rgba(0,0,0,0.28), 0 6px 16px rgba(0,0,0,0.26);
  --ev-sh-3: 0 4px 10px rgba(0,0,0,0.34), 0 14px 34px rgba(0,0,0,0.32);
  --ev-sh-4: 0 8px 20px rgba(0,0,0,0.40), 0 28px 64px rgba(0,0,0,0.40);

  --ev-ring: 0 0 0 3px rgba(var(--evra-primary-rgb,12,116,71), 0.30);
  --ev-r:    var(--evra-r-card, 8px);
  --ev-t:    140ms;
  --ev-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Older browsers without colour-mix keep the locked palette rather than
   collapsing every level to the same flat grey. */
@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  :root {
    --ev-e2: #262626;
    --ev-e3: #2b2b2b;
    --ev-e4: #303030;
  }
}

/* ── 1. ELEVATED CONTAINER ─────────────────────────────────────────────────
   The outermost grouping — a section that holds cards. It sits ON the canvas
   and is the only level with no shadow: it IS the ground floor. */
.ev-container {
  background: var(--ev-e1);
  border: 1px solid var(--evra-border-hair, rgba(237,239,238,0.075));
  border-radius: calc(var(--ev-r) + 2px);
  box-shadow: var(--ev-edge);
  padding: 20px;
}

/* ── 2. CARD ───────────────────────────────────────────────────────────────
   The workhorse. Applied ON TOP of .sb-card so the Supabase component layer
   stays the source of structure and this only adds depth. */
.ev-card,
.sb-card.ev-lift {
  background: var(--ev-e1);
  border: 1px solid var(--evra-border-hair, rgba(237,239,238,0.075));
  border-radius: var(--ev-r);
  box-shadow: var(--ev-edge), var(--ev-sh-1);
  transition: transform var(--ev-t) var(--ev-ease),
              box-shadow var(--ev-t) var(--ev-ease),
              background-color var(--ev-t) var(--ev-ease);
}

/* ── 3. HOVER LAYER ────────────────────────────────────────────────────────
   Interactive cards only. A card that lifts but does nothing when clicked is
   a lie about affordance, so the lift is opt-in via .ev-interactive. */
.ev-card.ev-interactive:hover,
.sb-card.ev-lift.ev-interactive:hover {
  background: linear-gradient(var(--ev-hover), var(--ev-hover)) var(--ev-e1);
  box-shadow: var(--ev-edge-warm), var(--ev-sh-2);
  transform: translateY(-1px);
}
.ev-card.ev-interactive:active,
.sb-card.ev-lift.ev-interactive:active {
  transform: translateY(0);
  box-shadow: var(--ev-edge), var(--ev-sh-1);
}

/* ── 4. FLOATING CONTROLS — the glass panel ────────────────────────────────
   For the date picker and the filter bar. Real backdrop blur where it is
   supported; where it is not, a solid raised surface, because a translucent
   panel WITHOUT blur is just a washed-out card and reads as a rendering bug. */
.ev-float {
  background: color-mix(in srgb, var(--ev-e3) 82%, transparent);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: calc(var(--ev-r) + 2px);
  box-shadow: var(--ev-edge-warm), var(--ev-sh-3);
  padding: 10px 14px;
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .ev-float {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .ev-float { background: var(--ev-e3); }
}
/* A filter bar that follows you down the page. */
.ev-float--sticky { position: sticky; top: 12px; z-index: var(--evra-z-sticky, 1020); }

.ev-overlay {                       /* menus, popovers, date-picker bodies */
  background: var(--ev-e4);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: calc(var(--ev-r) + 2px);
  box-shadow: var(--ev-edge-warm), var(--ev-sh-4);
}

/* ── 5. FOCUS RING ─────────────────────────────────────────────────────────
   :focus-visible, not :focus — a ring on every mouse click is noise, and its
   absence for keyboard users is an accessibility failure. Both are avoided by
   using the right pseudo-class rather than by choosing one of them. */
.ev-card:focus-visible,
.ev-btn:focus-visible,
.ev-float :focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ev-ring), var(--ev-edge), var(--ev-sh-1);
  border-color: rgba(var(--evra-primary-rgb,12,116,71), 0.55) !important;
}

/* ── 6. BUTTONS — bigger, and they answer when pressed ─────────────────────
   The brief: "make my buttons a little bigger and like they have motion and a
   click when i click them". A button reads as pressable because of its EDGES:
   light on the top, shadow underneath. On press both invert and it moves 1px
   down — that is the whole trick, and it is why 1px matters more than any
   amount of animation.

   Applied to the platform's own button classes so nothing has to be re-tagged.
   :active is instant (70ms): a press that eases in feels laggy, not smooth. */
.btn, .btn-primary, .btn-ev-ghost, .btn-p, .btn-ec, .ev-btn {
  border-radius: var(--ev-r);
  transition: transform 70ms var(--ev-ease),
              box-shadow var(--ev-t) var(--ev-ease),
              background-color var(--ev-t) var(--ev-ease),
              border-color var(--ev-t) var(--ev-ease);
  will-change: transform;
}
/* !important is load-bearing here, not laziness. Measured on the live control
   room: the buttons carry an INLINE style="padding:8px", and an inline
   declaration beats any stylesheet rule that is not !important. Without this
   the "make my buttons a little bigger" change silently did nothing while the
   rule sat in the sheet looking correct. */
.btn-primary, .btn-p, .ev-btn--primary {
  padding: 10px 18px !important;
  font-weight: 600;
  box-shadow: var(--ev-edge-warm), var(--ev-sh-1);
}
.btn-ev-ghost, .btn-ec, .ev-btn--ghost {
  padding: 9px 15px !important;
  box-shadow: var(--ev-edge);
}
.btn-primary:hover, .btn-p:hover, .ev-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--ev-edge-warm), var(--ev-sh-2);
}
.btn-ev-ghost:hover, .btn-ec:hover, .ev-btn--ghost:hover {
  background: var(--ev-hover);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
/* THE CLICK - deepened 2026-08-10 (evra_press_deep_v1). Operator: "you must
   feel it click and push in".

   A press reads as physical when FOUR things happen together, and the earlier
   1px version only did two of them:
     1. it moves DOWN further than it looks like it should  (2px)
     2. it shrinks very slightly, so the edges pull inward  (0.982)
     3. the top-edge highlight goes out entirely - the light no longer catches
        it, which is what selling "below the surface" depends on
     4. a deep inset shadow appears from the TOP, as if the surface above is
        now casting onto it

   And the timing is ASYMMETRIC on purpose: the press lands in 40ms (a real
   button bottoms out instantly) and releases over 180ms with a slight
   overshoot. Equal in-and-out is what makes a CSS button feel like an
   animation instead of a mechanism. */
.btn, .btn-primary, .btn-ev-ghost, .btn-p, .btn-ec, .ev-btn {
  transition: transform 180ms cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow var(--ev-t) var(--ev-ease),
              background-color var(--ev-t) var(--ev-ease),
              border-color var(--ev-t) var(--ev-ease),
              filter 120ms var(--ev-ease) !important;
  transform-origin: center center;
}
.btn:active, .btn-primary:active, .btn-ev-ghost:active,
.btn-p:active, .btn-ec:active, .ev-btn:active,
.btn-sm:active, button:active {
  transform: translateY(2px) scale(0.982) !important;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.42),
              inset 0 1px 0 rgba(0,0,0,0.30) !important;
  filter: brightness(0.92);
  transition-duration: 40ms, 40ms, 40ms, 40ms, 40ms !important;
}
/* The green primary darkens as it goes in, so the colour moves with the
   geometry rather than staying flat while the shape sinks. */
.btn-primary:active, .btn-p:active, .ev-btn--primary:active {
  background: #248055 !important;
}
.btn-sm, .btn-sm.btn-primary, .btn-sm.btn-ev-ghost { padding: 7px 13px !important; }   /* still bigger than it was */

/* A press ripple, from the click point. Purely additive - a button without
   .ev-ripple behaves exactly as before. */
.ev-ripple { position: relative; overflow: hidden; }
.ev-ripple::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--ev-x,50%) var(--ev-y,50%),
              rgba(255,255,255,0.30) 0%, transparent 55%);
  opacity: 0; transition: opacity 420ms var(--ev-ease);
  pointer-events: none;
}
.ev-ripple.ev-ripple-on::after { opacity: 1; transition: opacity 0s; }

/* ── 7. KPI TILE — hierarchy instead of four equal lines ───────────────────
   Brief: small muted label, very large number (40-48px), a green/red trend
   pill, a tiny sparkline underneath, and a corner icon at 8-12% opacity.
   The icon is deliberately at 10%: at full strength it competes with the
   number, which is the one thing on the tile that should be read first. */
.ev-kpi {
  position: relative;
  background: var(--ev-e1);
  border: 1px solid var(--evra-border-hair, rgba(237,239,238,0.075));
  border-radius: var(--ev-r);
  box-shadow: var(--ev-edge), var(--ev-sh-1);
  padding: 18px 20px 14px;
  overflow: hidden;
  transition: transform var(--ev-t) var(--ev-ease), box-shadow var(--ev-t) var(--ev-ease);
}
.ev-kpi:hover { transform: translateY(-1px); box-shadow: var(--ev-edge-warm), var(--ev-sh-2); }
.ev-kpi-ico {
  position: absolute; right: 14px; top: 12px; font-size: 44px; line-height: 1;
  color: var(--evra-text-1, #EDEFEE); opacity: 0.10; pointer-events: none;
}
.ev-kpi-l {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--evra-text-4, #707070); font-weight: 600;
}
.ev-kpi-v {
  font-family: var(--evra-mono, 'Source Code Pro', monospace);
  font-size: 44px; font-weight: 700; line-height: 1.02; letter-spacing: -0.025em;
  color: #fff; font-variant-numeric: tabular-nums; margin-top: 8px;
}
/* The currency mark. A bare <small> sits on the BASELINE of a 44px number,
   which drops the R to the floor and crowds the first digit - visible in the
   preview render before this was fixed. Aligned to the cap height and given
   its own breathing room instead. */
.ev-kpi-v small {
  font-size: 20px; font-weight: 500; color: var(--evra-text-3, #989A99);
  vertical-align: 0.30em; margin-right: 3px; letter-spacing: 0;
}
.ev-kpi-v small:last-child { margin-right: 0; margin-left: 4px; }
.ev-kpi-foot { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.ev-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.ev-pill--up   { color: #0C7447; background: rgba(12,116,71,0.13); }
.ev-pill--down { color: #E5636A; background: rgba(229,99,106,0.13); }
.ev-pill--flat { color: var(--evra-text-3,#989A99); background: rgba(255,255,255,0.05); }
.ev-kpi-sub { font-size: 11px; color: var(--evra-text-4, #707070); }
.ev-spark { display: block; width: 100%; height: 30px; margin-top: 10px; overflow: visible; }
/* evra_metric_v2 -- the rich tile (operator mock 2026-08-18): icon tile, sub-label, facts panel, notes, gauge */
.ev-kpi--rich { display: flex; flex-direction: column; padding: 22px 24px 18px; }
.ev-kr-head { display: flex; gap: 14px; align-items: flex-start; }
.ev-kr-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(12,116,71,0.14); color: #0C7447; font-size: 19px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.ev-kr-titles { min-width: 0; padding-top: 2px; }
.ev-kpi--rich .ev-kpi-l { line-height: 1.3; }
.ev-kr-subl { font-size: 11.5px; color: var(--evra-text-3, #989A99); margin-top: 3px; line-height: 1.35; }
.ev-kpi--rich .ev-kpi-v { margin: 16px 0 0 54px; font-size: 40px; }
.ev-kr-body { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; flex-wrap: wrap; }
.ev-kr-body.gauge-left { align-items: flex-end; }
.ev-kr-facts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 10px; max-width: 100%;
  background: rgba(255,255,255,0.03); border: 1px solid var(--evra-border-hair, rgba(237,239,238,0.075)); min-width: 118px; }
.ev-kr-fact b { display: block; font-family: var(--evra-mono, 'Source Code Pro', monospace); font-size: 14px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.ev-kr-fact span { display: block; font-size: 10.5px; color: var(--evra-text-4, #707070); margin-top: 2px; }
.ev-kr-pill { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--evra-border-hair, rgba(237,239,238,0.075)); min-width: 96px; }
.ev-kr-pill .ev-pill { font-size: 14px; padding: 4px 10px; align-self: flex-start; }
.ev-kr-ps { font-size: 10.5px; color: var(--evra-text-4, #707070); line-height: 1.3; max-width: 96px; }
.ev-kr-notes { list-style: none; margin: 0; padding: 0; flex: 1 1 150px; min-width: 0; font-size: 11.5px; color: var(--evra-text-3, #989A99); line-height: 1.55; }
.ev-kr-notes li { position: relative; padding-left: 12px; }
.ev-kr-notes li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.ev-kr-notes li.b { color: #fff; font-weight: 600; }
.ev-kr-notes li.b::before { background: #0C7447; }
.ev-kr-foot { margin-top: auto; padding-top: 14px; }
.ev-kpi--rich .ev-spark { height: 46px; margin-top: 0; }
.ev-kr-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--evra-text-4, #707070); margin-top: 4px; font-family: var(--evra-mono, monospace); }
.ev-kr-axisl { text-align: center; font-size: 10px; color: var(--evra-text-4, #707070); margin-top: 2px; }
.ev-kr-gauge { flex: 0 0 auto; width: 160px; }
.ev-kr-gauge svg { width: 160px; height: 92px; display: block; }
.ev-kr-gl { display: flex; justify-content: space-between; font-size: 10px; color: var(--evra-text-4, #707070); font-family: var(--evra-mono, monospace); margin-top: 2px; }
/* evra_metric_v3 -- the mini chart with axes */
.ev-mc { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: 72px auto auto; column-gap: 6px; row-gap: 3px; }
.ev-mc-y { grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-family: var(--evra-mono, monospace); font-size: 9.5px; color: var(--evra-text-4, #707070); line-height: 1; padding: 1px 0; font-variant-numeric: tabular-nums; }
.ev-mc-plot { grid-row: 1; position: relative; height: 72px; border-left: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); }
.ev-mc-svg { display: block; width: 100%; height: 72px; overflow: visible; }
.ev-mc-last { position: absolute; right: 0; top: -12px; font-family: var(--evra-mono, monospace); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-mc-x { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; font-family: var(--evra-mono, monospace); font-size: 9.5px; color: var(--evra-text-4, #707070); }
.ev-mc-meta { grid-column: 2; grid-row: 3; font-size: 10px; color: var(--evra-text-4, #707070); font-family: var(--evra-mono, monospace); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .ev-kpi--rich .ev-kpi-v { margin-left: 0; } .ev-kr-body { flex-wrap: wrap; } }

/* ── 8. MOTION, AND WHO DOES NOT GET IT ────────────────────────────────────
   Every transform here is 1px and every duration under 200ms. Anything more
   on an operations dashboard reads as lag, not polish. And a reduced-motion
   preference switches the movement off while KEEPING the colour and shadow
   changes, so nothing loses its affordance. */
@media (prefers-reduced-motion: reduce) {
  .ev-card, .ev-kpi, .btn, .btn-primary, .btn-ev-ghost, .btn-p, .btn-ec, .ev-btn {
    transition: background-color var(--ev-t) linear, box-shadow var(--ev-t) linear;
  }
  .ev-card:hover, .ev-kpi:hover, .btn:hover, .btn:active,
  .btn-primary:hover, .btn-primary:active { transform: none !important; }
  .ev-ripple::after { display: none; }
}


/* ── APPLIED, not just available ───────────────────────────────────────────
   evra_surface_applied_v1 2026-08-10. The system above defines the levels; this
   block puts them on the components the platform actually renders, so nothing
   has to be re-tagged across 101 pages.

   .sb-card is the Supabase component layer and stays the source of structure -
   padding, radius and border still come from the theme. Only depth is added
   here: the top-edge highlight and the seating shadow. That is the whole
   difference between "flat" and "an object on a surface" on a dark UI.

   .sb-card--flush is excluded from the hover lift: it is the KPI strip, which
   is a readout, not a control, and a readout that lifts under the cursor
   invites a click that does nothing. */
.sb-card,
.hub-card,
.acard,
.ec-panel,
.px-card {
  /* !important for the same reason as the buttons: evra-vuexy-theme.css
     declares .sb-card with !important, so an equal-specificity rule loses even
     though this sheet is injected later. Measured: box-shadow computed to
     `none` on the Avatar Library until this was raised. */
  box-shadow: var(--ev-edge), var(--ev-sh-1) !important;
  transition: box-shadow var(--ev-t) var(--ev-ease),
              transform var(--ev-t) var(--ev-ease);
}
/* Rows in a fleet list are genuinely clickable, so they get the hover layer. */
.tbl tr.rowlink { transition: background-color var(--ev-t) var(--ev-ease); }
.tbl tr.rowlink:hover { background: var(--ev-hover); }

/* Inputs and selects sit BELOW the card, not on it - a control you type into
   reads as recessed. Inverting the edge highlight is what does that. */
.form-control, .form-select, .inp, input[type="text"], input[type="number"],
input[type="date"], input[type="time"], input[type="tel"], select, textarea {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
  transition: border-color var(--ev-t) var(--ev-ease),
              box-shadow var(--ev-t) var(--ev-ease);
}
.form-control:focus, .form-select:focus, .inp:focus,
input:focus, select:focus, textarea:focus {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.22),
              0 0 0 3px rgba(var(--evra-primary-rgb,12,116,71),0.22);
}

/* The toolbars the brief called out as floating glass: the control room's
   filter/date row and the report rail. Matched by the classes those bars
   already use so no page markup changes. */
.rep-rail, .tool-row, .avm-toolbar, .hub-toolbar, .filter-bar, #an-toolbar {
  background: color-mix(in srgb, var(--ev-e3) 82%, transparent);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: calc(var(--ev-r) + 2px);
  box-shadow: var(--ev-edge-warm), var(--ev-sh-2);
  padding: 10px 14px;
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .rep-rail, .tool-row, .avm-toolbar, .hub-toolbar, .filter-bar, #an-toolbar {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}


/* ── BUDGET / PROGRESS BAR ─────────────────────────────────────────────────
   evra_meter_v1 2026-08-10, taken from the operator's reference card: a mid-grey
   track with a WHITE fill, fully rounded, sitting inline between the label and
   the figure.

   White rather than green on purpose. On that card the bar is a QUANTITY, not a
   health signal - green would claim "this is good" about a budget that is 70%
   spent. Green stays reserved for state, which is the same rule the status dots
   follow. Over-budget is the one case that earns a colour. */
.ev-meter {
  position: relative; height: 10px; border-radius: 999px;
  background: var(--evra-surface-2, #141414);
  overflow: hidden; min-width: 120px;
}
.ev-meter > i {
  display: block; height: 100%; border-radius: 999px;
  background: #FFFFFF;
  transition: width var(--ev-t) var(--ev-ease);
}
.ev-meter.over > i { background: #E5636A; }
.ev-meter.warn > i { background: #E5A33B; }

/* The figure beside it: value white, the ceiling muted - "$42 / $60". */
.ev-amt { font-family: var(--evra-mono,'Source Code Pro',monospace);
  font-variant-numeric: tabular-nums; color: #fff; font-weight: 700; }
.ev-amt small { color: var(--evra-text-4,#707070); font-weight: 500; margin-left: 2px; }