/* ══════════════════════════════════════════════════════
   Zexca — the material layer
   ══════════════════════════════════════════════════════
   A LAYER, NOT AN EDIT. `dashboard.css` is not touched by any of this. Every
   rule here is scoped under `body.depth`, which raises specificity by exactly
   one class — so this file overrides the base stylesheet without a single
   `!important`, and dropping the class puts the old screen back exactly.
   `?flat` in the URL does that live; see `dashboard-depth.js`.

   ══ WHAT WAS ACTUALLY WRONG ══
   Not the layout, and not the palette. `dashboard.css:638` reads:

       .card{background:var(--bg-1);border:1px solid var(--line-2);
             border-radius:var(--r3);padding:16px;...}

   No shadow. And `.stat`, `.coin-chip`, `.snapshot`, `.mkt-card` and
   `.ladder-step` are all the same recipe — so a tile INSIDE the portfolio card
   is drawn exactly like the card AROUND it, and nesting reads as more boxes
   rather than as contents sitting on a surface. That is the whole of it, and it
   is a material problem, which is why nothing here moves anything.

   ══ THE PALETTE WAS ALREADY RIGHT ══
   `--bg-0` ground → `--bg-1` card → `--bg-2` tile: nested surfaces already get
   LIGHTER, which is exactly what a higher surface catching more light does. The
   ramp was correct and had simply never been lit. Nothing is re-coloured here;
   light and shadow are added on top of colours that already existed.

   ══ ELEVATION WAS ALREADY THERE TOO, UNWRITTEN ══
   Reading every box-shadow in the base file, they cluster into five levels the
   chrome already uses — the toast at `0 10px 34px rgba(0,0,0,.55)`, the sheet
   and menus at `0 16-18px 44-50px`, the account rollup at `0 20px 54px`. The
   tokens below take those values rather than inventing new ones, so the home
   screen ends up speaking the same material language as the drawer and the
   sheet. What is new is that PAGE CONTENT gets to use it, which it never has.

   ══ ONE LIGHT SOURCE ══
   Above and slightly left, on every surface, always — agreeing with the
   existing `145deg` metal chips, the `155-168deg` panel tints and the sign-in
   page's glass. A page lit from one place is the whole of what material
   definition buys; two light sources and it is just effects.

   ══ AND ONE COUNTERWEIGHT ══
   Things only look raised next to something sunk. A screen where everything is
   lifted is as flat as one where nothing is. So the genuinely recessed things —
   the 24-month channel, the segmented range control, the chart ground — are
   cut INTO their surface, and that is what makes the raised things read.
   ══════════════════════════════════════════════════════ */

/* ══ WHY THESE NUMBERS AND NOT SOFTER ONES ══
   The first cut of this file used the shadow values a light interface would
   use, and on screen it did almost nothing. The reason is worth writing down,
   because it governs every number below:

   **A drop shadow barely exists on a near-black theme.** The ground is
   `--bg-0` #0A0C10. A shadow of `rgba(0,0,0,.40)` painted onto that moves it by
   about four values out of 255 — invisible. Half the standard elevation
   vocabulary is simply unavailable here, and spending the budget on wide
   ambient blur is painting black on black.

   What *does* read on a dark surface is **edge lighting**. A 1px lit top edge
   and a shaded bottom one carry nearly all of the perceived elevation, because
   they work by contrast against the surface rather than against the ground. So
   the weight sits there: strong bevels, a real top-to-bottom lighting gradient
   across each surface, and a tight contact shadow — which does still read,
   being darker than the ground — while the wide ambient blur is kept small
   because it cannot earn its cost. */
body.depth{
  /* A tight contact shadow says an object is touching something; the wider one
     is kept modest for the reason above. */
  --sh-1: 0 1px 2px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.30);
  --sh-2: 0 2px 5px rgba(0,0,0,.60), 0 10px 26px rgba(0,0,0,.34);
  --sh-3: 0 4px 10px rgba(0,0,0,.66), 0 16px 40px rgba(0,0,0,.44);

  /* The lit top edge and the shaded bottom one. This is the load-bearing pair
     on this theme — everything else is support. */
  --bevel: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.55);
  --bevel-2: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.50);

  /* Sunk. The dark edge is at the TOP here, which is the only thing that tells
     an eye a channel from a plateau. */
  --well: inset 0 2px 5px rgba(0,0,0,.72), inset 0 -1px 0 rgba(255,255,255,.045);

  /* Light falling ACROSS a surface — bright at the top, neutral through the
     middle, faintly shaded at the foot. Layered as a background IMAGE over the
     existing background COLOUR, so every tint the base file sets survives.

     APPLIED FROM AN EXPLICIT LIST, NEVER A BROAD SELECTOR. About twenty
     surfaces in the base file already use `background-image` for something
     load-bearing — `.sel:1315` draws its dropdown caret with two gradients,
     `.skel:715` is a shimmer with its own `background-size` and animation, and
     `.zx .mod:2979` already hand-rolls this exact effect. A blanket rule would
     silently delete a caret, freeze a skeleton and overwrite a sheen somebody
     wrote by hand. */
  --sheen: linear-gradient(176deg,
            rgba(255,255,255,.062),rgba(255,255,255,.012) 38%,rgba(0,0,0,.10));
  --sheen-2: linear-gradient(176deg,
            rgba(255,255,255,.085),rgba(255,255,255,.015) 42%,rgba(0,0,0,.12));

  /* ── THE HOUSE HOVER, AS A VARIABLE ──
     How far a thing rises when a pointer picks it out. It is a token and not a
     literal for one reason: reduced motion then becomes ONE switch instead of
     forty repeated overrides, and a rule can never be added later that forgets
     to honour it. Zeroed at the bottom of this file by both motion switches. */
  --lift: -2px;      /* objects: tiles, cards, buttons */
  --lift-sm: -1px;   /* rows and small controls, where 2px would jitter */
}

/* ══════════════════════════════════════════════════════
   L0 — THE GROUND
   ══════════════════════════════════════════════════════
   `dashboard.css:167` carries `.shell{position:relative;z-index:1;}` and
   **`.shell` exists nowhere** in the markup — grep both the HTML and the JS and
   it returns nothing. It was meant to lift the page above `#bgCanvas`
   (`position:fixed; z-index:0`), and because it never matched, the canvas
   paints ABOVE everything unpositioned on this screen — `.greet`, `.snapshot`,
   `.center` — and below `.card`, which happens to be `position:relative`.

   Invisible until now only because the traces are drawn at alpha 0.09-0.16 and
   fade out above 44% height. It stops being invisible the moment anything is
   given a shadow that should fall on the ground beneath it, so the dead rule's
   intent is honoured on an element that exists.

   ══ AND IT HAS TO BE `.center`, NOT `.body` ══
   The first version of this rule lifted `.body`, and that broke the drawer.
   `.scrim` is `z-index:80` and lives at the top level of the document;
   `.drawer` is `z-index:85` but sits INSIDE `.body`. Making `.body` a stacking
   context at `z-index:1` trapped the drawer's 85 inside a layer that is itself
   below 80 — so on a phone the scrim painted straight over the open menu.

   `.center` is the page content and nothing else: the drawer, the scrim, the
   sheet and the notification shade are all its siblings, not its children. So
   lifting it clears the canvas without enclosing anything that needs to escape.
   This is what the dead `.shell` rule was reaching for. */
body.depth .center{position:relative;z-index:1;}

/* ══════════════════════════════════════════════════════
   L1 — SURFACES
   The card sits on the ground and catches the light.
   ══════════════════════════════════════════════════════ */
body.depth .card,
body.depth .mod,
body.depth .snapshot,
body.depth .sig-strip{
  background-image:var(--sheen);
  box-shadow:var(--sh-2), var(--bevel);
  border-color:var(--line);
}

/* The hero. Highest surface on the screen, so it is the one thing lifted a full
   level above its neighbours, with a gold ambient bloom under it — the light it
   is already tinted with, spilling onto the ground.

   `::before` is taken by the existing gold hairline at `dashboard.css:641`, so
   the bloom goes on `::after` and sits behind the content. */
body.depth .card.gold-top{
  background-image:var(--sheen-2);
  box-shadow:var(--sh-3), var(--bevel), inset 0 0 60px rgba(232,182,71,.045);
}
body.depth .card.gold-top::after{
  content:'';position:absolute;inset:auto 8% -14px 8%;height:26px;z-index:-1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,var(--gold-glow),transparent 70%);
  filter:blur(9px);opacity:.55;
}

/* ══════════════════════════════════════════════════════
   L2 — TILES
   Raised plateaus ON a surface, not boxes beside it. This is the pair that
   was indistinguishable before, and the reason the screen read flat.
   ══════════════════════════════════════════════════════ */
body.depth .stat,
body.depth .coin-chip,
body.depth .mkt-card,
body.depth .ladder-step,
body.depth .sig,
body.depth .chk-box,
body.depth .cc-renew{
  background-image:var(--sheen);
  box-shadow:var(--sh-1), var(--bevel);
}

/* The coin chips carry their own tint (`--gold-pale` / `--mlc-pale`). Only the
   background IMAGE is set above, so those survive — and the shadow picks up a
   trace of the coin's own colour, the way a tinted object bounces light. */
body.depth .coin-chip.zc{box-shadow:var(--sh-1), var(--bevel), 0 2px 12px rgba(232,182,71,.10);}
body.depth .coin-chip.mlc{box-shadow:var(--sh-1), var(--bevel), 0 2px 12px rgba(127,180,212,.10);}

/* ══════════════════════════════════════════════════════
   L3 — RAISED AND LIT
   ══════════════════════════════════════════════════════
   The gold metal chip is a `145deg gold-lt → gold-dp` gradient in seven places
   in the base file. It is already the product's "metal"; what it has never had
   is a specular highlight, which is the single thing that separates a painted
   circle from a lit one. */
body.depth .coin-badge,
body.depth .tb-mark{
  position:relative;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.32);
}
body.depth .tb-mark{box-shadow:0 3px 14px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.32);}
/* The highlight sits up and left, like every other light on this screen. */
body.depth .coin-badge::after,
body.depth .tb-mark::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(58% 48% at 32% 24%,rgba(255,255,255,.42),transparent 62%);
}

/* The primary call to action. It already had a gold glow and no shadow, which
   makes a button look like it is glowing rather than standing on anything — so
   a black drop goes UNDER the glow. */
body.depth .btn-gold{
  box-shadow:0 6px 22px var(--gold-glow), 0 4px 12px rgba(0,0,0,.40),
             inset 0 1px 0 rgba(255,255,255,.34);
}
body.depth .btn-gold:hover{
  box-shadow:0 12px 30px var(--gold-glow), 0 10px 22px rgba(0,0,0,.44),
             inset 0 1px 0 rgba(255,255,255,.34);
}
body.depth .btn-gold.is-disabled{box-shadow:none;}

/* LIGHT SWEEP. The base rule already carries `position:relative;overflow:hidden`
   (`dashboard.css:753`) — the button was built for this and never used it.
   Hover-driven and one pass: a sweep on a loop is decoration, and decoration
   that never stops is the thing this whole design brief rules out. */
body.depth .btn-gold::after{
  content:'';position:absolute;top:0;bottom:0;width:42%;left:-55%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:translateX(0) skewX(-18deg);
}
/* `transform`, not `left`. Animating a layout property runs layout on every
   frame of the sweep; a transform is composited and costs nothing. The price is
   that it no longer mirrors by itself, so Persian and Arabic get the pass in
   their own reading direction below. */
body.depth .btn-gold:hover::after{animation:zdSweep .62s var(--ease);}
@keyframes zdSweep{to{transform:translateX(420%) skewX(-18deg);}}

html[dir="rtl"] body.depth .btn-gold::after{left:auto;right:-55%;}
html[dir="rtl"] body.depth .btn-gold:hover::after{animation-name:zdSweepRtl;}
@keyframes zdSweepRtl{to{transform:translateX(-420%) skewX(-18deg);}}

/* Status pills read as small lit capsules rather than flat swatches. */
body.depth .pill{
  background-image:var(--sheen);
  box-shadow:0 1px 3px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
}
body.depth .pill.live .pill-dot{box-shadow:0 0 7px currentColor;}
body.depth .tier-badge,
body.depth .ct-state{
  background-image:var(--sheen);
  box-shadow:0 1px 3px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ══════════════════════════════════════════════════════
   WELLS — cut in, not stuck on
   ══════════════════════════════════════════════════════
   The counterweight. These are the surfaces that are genuinely channels, and
   giving them the opposite treatment is what makes everything above read as
   raised at all. */

/* The 24-month strip is a track a contract runs along. The strip becomes the
   channel and the cells sit down inside it — which also finally gives the
   `.past` cells something to be raised against. */
body.depth .month-strip{
  background:var(--bg-0);border:1px solid var(--line-2);border-radius:var(--r2);
  padding:5px;box-shadow:var(--well);
}
body.depth .ms-cell.past{
  box-shadow:0 1px 2px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.22);
}
body.depth .ms-cell.now{box-shadow:0 0 8px var(--gold-glow), inset 0 0 0 1px var(--gold);}

/* The segmented range control: a sunk trough with one raised tab in it. */
body.depth .range-tabs{
  background:var(--bg-0);box-shadow:var(--well);
}
body.depth .range-tab{transition:background .18s,color .18s,box-shadow .18s;}
body.depth .range-tab.active{
  background-image:var(--sheen);
  box-shadow:0 1px 3px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.10);
}

/* The chart is read INTO the card rather than printed on it. */
body.depth .chart-box{
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.06));
  border:1px solid var(--line-2);border-radius:var(--r2);
  padding:10px 8px 4px;box-shadow:var(--well);
}
/* A drawn line is emitting light, so it gets a little of it back. */
body.depth .chart-line{filter:drop-shadow(0 0 4px rgba(232,182,71,.34));}

/* The progress arc, same idea — the track stays sunk, the arc is what is lit. */
body.depth .pr-bg{stroke:var(--bg-0);}
body.depth .pr-fill{filter:drop-shadow(0 0 4px var(--gold-glow));}

/* ══════════════════════════════════════════════════════
   THE AI TERMINAL — A LIT INSTRUMENT, NOT A PAGE
   ══════════════════════════════════════════════════════
   This file used to hold a rule that deliberately kept the terminal OUT of the
   material system, on the grounds that `dashboard.css:2979` already gave
   `.zx .mod` a hand-rolled sheen and re-lighting it from underneath would be
   rude. That was the wrong call for this screen and it is reversed here.

   Everywhere else in the product the metaphor is paper on a ground: opaque
   cards, warm gold light from above, restraint. The terminal is a different
   object. It is a console — a housing with displays recessed into it and
   readouts lit from within — and that is what justifies it carrying more light
   than any other screen without breaking the house rule about glow. The rule
   was never "little light"; it was "light that means something". Here the
   light means the machine is running.

   So the vocabulary shifts by one degree and no further:
     · the housing is cool, not gold — a machine's rim light is blue-white
     · displays are SUNK into the console, with an inner vignette, rather than
       raised off it like a card
     · the only thing that moves is one slow sweep across the stage, because a
       radar that never sweeps is a photograph of a radar
   ══════════════════════════════════════════════════════ */

/* The console's own cool rim. Everything below borrows it. */
body.depth .zx{
  --rim: rgba(146,180,214,.14);
  --rim-hi: rgba(170,205,240,.22);
}

/* ── The panels ──
   They keep their own 180deg sheen — it was tuned for this screen and is not
   the same thing as the house `--sheen` — and gain the elevation, the bevel
   and a cool rim the rest of the product gets in gold. */
body.depth .zx .mod{
  background-image:linear-gradient(180deg,rgba(255,255,255,0.030),rgba(255,255,255,0.010));
  box-shadow:var(--sh-2),
             inset 0 1px 0 var(--rim-hi),
             inset 0 -1px 0 rgba(0,0,0,.55),
             inset 0 0 0 1px var(--rim);
  border-color:transparent;
}

/* ── The fascia ──
   The command bar is the face of the instrument: glass, lifted off the panels
   below it, with a specular edge along the top the way a machined face catches
   a light. */
body.depth .zx-bar{
  background-image:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.008) 60%,rgba(0,0,0,.10));
  box-shadow:0 2px 6px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.34),
             inset 0 1px 0 var(--rim-hi), inset 0 -1px 0 rgba(0,0,0,.5);
  position:relative;
}
/* The wordmark reads as lit type rather than printed type. */
body.depth .zx-word{ text-shadow:0 0 18px rgba(232,182,71,.28); }
body.depth .zx-clock{ text-shadow:0 0 12px rgba(232,182,71,.30); }

/* The running dot and the focus meter are the two things that say "now". */
body.depth .zx-dot{ box-shadow:0 0 8px currentColor, 0 0 16px currentColor; }
body.depth .zx-focus-t{ box-shadow:var(--well); }
body.depth .zx-focus-f{ box-shadow:0 0 8px var(--gold-glow); }

/* ── The keys ──
   The active tab is the illuminated one: lit from below, standing slightly
   proud of the strip, with the others sunk beside it. */
body.depth .zx-tabs{
  background-image:linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,0));
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.5);
}
body.depth .zx-tab{ transition:color .18s, background .18s, box-shadow .18s; }
body.depth .zx-tab.on{
  background-image:linear-gradient(180deg,rgba(255,255,255,0),var(--gold-pale));
  box-shadow:inset 0 -2px 0 var(--gold), 0 -6px 18px -8px var(--gold-glow);
}
body.depth .zx-tab:not(.on):hover{ background:rgba(255,255,255,.03); }

/* ── The displays ──
   A screen is set INTO its housing. The well plus an inner vignette is what
   makes the canvas look like it is behind glass rather than printed on top. */
body.depth .zx-stage{
  box-shadow:var(--well), inset 0 0 0 1px var(--rim);
  background-image:radial-gradient(120% 100% at 50% 0%,rgba(146,180,214,.05),transparent 62%);
}
/* THE ONE THING THAT MOVES. A slow band of light crossing the display, and
   nothing else on the screen animates. A radar that never sweeps is a
   photograph of a radar — but two moving things would be a toy. */
body.depth .zx-stage::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 42%,rgba(170,205,240,.055) 50%,transparent 58%);
  transform:translateX(-100%);
  animation:zdScan 7.5s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes zdScan{ 0%{transform:translateX(-100%)} 62%,100%{transform:translateX(100%)} }

/* ── The tape ──
   A ticker runs in a channel cut into the console, not along its surface. */
body.depth .zx-tape{
  background:rgba(0,0,0,.26);
  box-shadow:var(--well);
}
body.depth .zx-tk{ box-shadow:inset -1px 0 0 rgba(255,255,255,.03); }

/* ── The readouts ──
   State chips are small lamps: they carry their own colour, so the glow is
   `currentColor` and each one lights in its own hue without a rule each. */
body.depth .zx-st,
body.depth .zx-sent,
body.depth .zx-tag{
  box-shadow:0 0 10px -2px currentColor, inset 0 1px 0 rgba(255,255,255,.10);
}
body.depth .zx-banner{
  background-image:var(--sheen);
  box-shadow:var(--sh-1), var(--bevel);
}

/* Every meter on the screen is a channel with a lit fill in it. */
body.depth .zx-rg-t,
body.depth .zx-se-t,
body.depth .zx-rk-t,
body.depth .zx-pp-t,
body.depth .zx-fn-track{ box-shadow:var(--well); }
body.depth .zx-fn-bar{ box-shadow:0 0 9px -1px var(--gold-glow); }

/* The gold card is the conclusion the machine reached — the one warm surface. */
body.depth .zx-card-gold{
  box-shadow:var(--sh-2), inset 0 1px 0 rgba(247,212,136,.18),
             inset 0 0 40px rgba(232,182,71,.05);
}
body.depth .zx-break,
body.depth .zx-anom,
body.depth .zx-ai-note{
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.07);
}

/* The instrument footnote is a pressed tag rather than a floating one: on this
   surface an outlined chip reads as a control, and this is not one. */
body.depth .zx-mon-note{
  border-color:var(--rim);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.05);
}
body.depth .zx-mon:hover .zx-mon-note{ color:var(--fg-2); border-color:var(--rim-hi); }

/* ══════════════════════════════════════════════════════
   THE HOUSE HOVER, IN THE TERMINAL
   ══════════════════════════════════════════════════════
   THE AI SCREEN WAS THE ONE ROOM THE HOVER NEVER REACHED. Counted: the layer
   carries five `translateY(var(--lift…))` rules and not one of them names a
   `zx-` class, and there is not a single `:active` state in the whole terminal.
   Two rows tinted their background and that was the entire reaction on a screen
   of twenty-one panels. Every other surface in the product answers a pointer;
   this one did not, and moving between the two felt like two products.

   The vocabulary below is not a new one. It is the same six tiers, in the same
   order, with the same tokens — so the terminal moves exactly as much as the
   rest of the site and never more.

   TWO THINGS ARE DELIBERATELY DIFFERENT, and both follow the room rather than
   the rule.

     THE SPINE IS STEEL, NOT GOLD. Everywhere else a hovered row grows an
     `inset 3px 0 0 var(--gold)`. Gold on this screen already MEANS something —
     it is the engine core, the focus, the figure being weighed — so a gold
     spine under the pointer would read as a value rather than as a pointer.
     `--mlc` is the terminal's own accent and it says the same thing in the
     local dialect.

     THE PANELS TILT LESS. The camera in zexca-depth.js caps a dashboard card
     at 1.6°. These panels are set in 8-10px mono and pack five columns into
     260px; the same angle that is invisible on a balance is legible softening
     here. See `zdTilt` in the JS — the surface names its own ceiling. */

/* ── Tier A: the panels. Shadow and rim, and the tilt comes from the camera —
   the same arrangement as `.dash .card`, which does not translate either. ── */
body.depth .zx .mod{
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             border-color .18s;
}
@media (hover:hover) and (pointer:fine){
  body.depth .zx{ perspective:1600px; }
  body.depth .zx .mod:hover{
    box-shadow:var(--sh-3),
               inset 0 1px 0 var(--rim-hi),
               inset 0 -1px 0 rgba(0,0,0,.6),
               inset 0 0 0 1px var(--rim-hi);
  }
  /* Panel 01 is the one with a light of its own. It brightens rather than
     deepens, because a well that gets darker under the pointer reads as the
     engine going quiet. */
  body.depth .zx .mod.zx-stage:hover{
    box-shadow:var(--well),
               inset 0 0 0 1px var(--rim-hi),
               inset 0 0 70px rgba(232,182,71,.05);
  }
}

/* ── Tier A′: the boxed callouts inside a panel. They lift by the SMALL figure,
   not the object one — a note that jumps two pixels inside a card that is
   itself tilting is two movements answering one pointer. ── */
body.depth .zx-anom,
body.depth .zx-break,
body.depth .zx-ai-note,
body.depth .zx-op,
body.depth .zx-card-gold{
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             border-color .18s;
}
body.depth .zx-anom:hover,
body.depth .zx-break:hover,
body.depth .zx-ai-note:hover,
body.depth .zx-op:hover,
body.depth .zx-card-gold:hover{
  transform:translateY(var(--lift-sm));
  box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.09);
}

/* ── Tier B: rows. One pixel and a steel spine, exactly as the house does it.
   Every scannable list in the terminal, so a reader's eye and their pointer
   agree about which line they are on. ── */
body.depth .zx-mon:not(.head),
body.depth .zx-nw,
body.depth .zx-if,
body.depth .zx-rk-r,
body.depth .zx-tm,
body.depth .zx-rl-r,
body.depth .zx-se-r,
body.depth .zx-lost-r,
body.depth .zx-res-r,
body.depth .zx-op-row,
body.depth .zx-fn,
body.depth .zx-ln{
  transition:transform .15s var(--ease), box-shadow .15s var(--ease),
             background .15s, color .15s;
}
body.depth .zx-mon:not(.head):hover,
body.depth .zx-nw:hover,
body.depth .zx-if:hover,
body.depth .zx-rk-r:hover,
body.depth .zx-tm:hover,
body.depth .zx-rl-r:hover,
body.depth .zx-se-r:hover,
body.depth .zx-lost-r:hover,
body.depth .zx-res-r:hover,
body.depth .zx-op-row:hover,
body.depth .zx-fn:hover,
body.depth .zx-ln:hover{
  transform:translateY(var(--lift-sm));
  background:rgba(146,180,214,.045);
  box-shadow:inset 2px 0 0 var(--mlc);
}
[dir="rtl"] body.depth .zx-mon:not(.head):hover,
[dir="rtl"] body.depth .zx-nw:hover,
[dir="rtl"] body.depth .zx-if:hover,
[dir="rtl"] body.depth .zx-rk-r:hover,
[dir="rtl"] body.depth .zx-tm:hover,
[dir="rtl"] body.depth .zx-rl-r:hover,
[dir="rtl"] body.depth .zx-se-r:hover,
[dir="rtl"] body.depth .zx-lost-r:hover,
[dir="rtl"] body.depth .zx-res-r:hover,
[dir="rtl"] body.depth .zx-op-row:hover,
[dir="rtl"] body.depth .zx-fn:hover,
[dir="rtl"] body.depth .zx-ln:hover{
  box-shadow:inset -2px 0 0 var(--mlc);
}
body.depth .zx-mon:not(.head):active,
body.depth .zx-nw:active,
body.depth .zx-if:active,
body.depth .zx-rk-r:active,
body.depth .zx-tm:active{ transform:translateY(0) scale(.995); }

/* ── Tier C: the small controls. Too small to lift convincingly, so they take
   the press — the state the whole terminal was missing. ── */
body.depth .zx-tab,
body.depth .zx-tk,
body.depth .zx-pp,
body.depth .zx-bs{
  transition:transform .15s var(--ease), background .15s, color .15s,
             box-shadow .15s, border-color .15s;
}
body.depth .zx-tab:active{ transform:translateY(0) scale(.97); }
/* The door at the end of the strip. It carries the gold the three tabs use for
   "you are here", because here gold means "this way" — and the arrow is what
   separates the two readings. */
body.depth .zx-tab-go{ color:var(--gold); }
body.depth .zx-tab-go:hover{
  color:var(--gold-lt);
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--gold-pale));
}
body.depth .zx-tab-go:hover .ic{ transform:translateX(3px); }
[dir="rtl"] body.depth .zx-tab-go:hover .ic{ transform:scaleX(-1) translateX(3px); }
/* The ticker and the two chip strips are read, not pressed — so they answer
   with light and hold their place. A tape that shifts under the pointer while
   its own figures are ticking is two movements a reader has to separate. */
body.depth .zx-tk:hover{ background:rgba(146,180,214,.05); }
body.depth .zx-pp:hover .zx-pp-n{ color:var(--fg-2); }
body.depth .zx-bs:not(.on):hover{ background:rgba(146,180,214,.06); }

/* ── Tier F: the correlation matrix. Background only, never a lift. A matrix
   is forty-five cells whose whole meaning is that they line up with their own
   row and column headers, and one raised row breaks both readings at once. ── */
body.depth .zx-cor-r{ transition:background .15s, box-shadow .15s; }
body.depth .zx-cor-r:hover{ box-shadow:inset 0 0 0 1px var(--rim); border-radius:2px; }
body.depth .zx-cor-c{ transition:transform .15s var(--ease), box-shadow .15s; }
body.depth .zx-cor-c:hover{
  transform:scale(1.14);
  box-shadow:0 2px 8px rgba(0,0,0,.55), inset 0 0 0 1px var(--rim-hi);
}

/* ── The phone ──
   The console is dense; on a small screen the sweep is a distraction across a
   display only a few centimetres wide, and the rim does the work alone. */
@media(max-width:767px){
  body.depth .zx-stage::after{ display:none; }
  body.depth .zx-bar{ box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 1px 0 var(--rim-hi); }
}

/* The sweep is decoration and stops with everything else; the rim, the wells
   and the lamps are material and stay. */
@media(prefers-reduced-motion:reduce){
  body.depth .zx-stage::after{ animation:none; opacity:0; }
}
body.depth.no-motion .zx-stage::after{ animation:none; opacity:0; }

/* ══════════════════════════════════════════════════════
   THE GLASS TIER
   ══════════════════════════════════════════════════════
   `dashboard.css:3382` states the house rule outright: *"a new blur recipe here
   would read as a different product."* There are four recipes — 16px for fixed
   navigation chrome, 14px for the toast, 6-7px for blocking overlays, 3px for
   the drawer scrim — and every one of them is a surface that FLOATS OVER other
   content.

   A card in the page flow floats over nothing, so it gets no blur. Inventing a
   fifth recipe for it would contradict the file's own rule and spend real phone
   performance blurring a solid background. Instead the surfaces that already
   qualify — and the top bar and tab bar are on screen the entire time a reader
   is on this page — keep the blur they have and join the elevation system, so
   the chrome and the content are lit by the same lamp. */
body.depth .topbar{
  box-shadow:0 1px 0 rgba(0,0,0,.42), 0 6px 20px rgba(0,0,0,.28),
             inset 0 -1px 0 rgba(255,255,255,.045);
}
body.depth .tabbar{
  box-shadow:0 -1px 0 rgba(0,0,0,.42), 0 -8px 26px rgba(0,0,0,.34),
             inset 0 1px 0 rgba(255,255,255,.05);
}
body.depth .sheet,
body.depth .notif-panel,
body.depth .acct-pop,
body.depth .lang-menu,
body.depth .drawer{
  box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ══════════════════════════════════════════════════════
   3D — PERSPECTIVE AND TILT
   ══════════════════════════════════════════════════════
   A terminal, not a toy. The cap is 1.6 degrees: past about two, a card of
   figures starts to keystone and the numbers soften on re-raster, and a screen
   somebody reads balances on cannot afford that.

   TRANSFORM ONLY ON HOVER, never at rest. A permanent transform — even
   `rotateX(0)` — creates a stacking context and a containing block on every
   card on the page, which is exactly the class of change that breaks a sticky
   header or a popover six months from now for no visible reason. */
@media (hover:hover) and (pointer:fine){
  body.depth .dash{perspective:1600px;}
  body.depth .dash > div > .card,
  body.depth .dash > div > div > .card{
    transition:transform .22s var(--ease), box-shadow .22s var(--ease);
  }
  body.depth .dash .card:hover{
    box-shadow:var(--sh-3), var(--bevel);
  }
  body.depth .card.gold-top:hover{
    box-shadow:var(--sh-3), var(--bevel), inset 0 0 60px rgba(232,182,71,.06);
  }

  /* Interactive tiles get the same idea at half strength. */
  body.depth .ladder-step,
  body.depth .mkt-card,
  body.depth .sig{
    transition:transform .18s var(--ease), box-shadow .18s var(--ease),
               border-color .18s;
  }
  body.depth button.ladder-step:hover,
  body.depth .mkt-card:hover,
  body.depth .sig:hover{
    box-shadow:var(--sh-2), var(--bevel-2);
  }
}

/* MICRO-INTERACTIONS. Durations land on the scale the base file already uses —
   .15-.18s for a small control, .2-.25s for a card, .3-.34s for a surface
   arriving — and on `--ease`, the house curve. */
body.depth button.ladder-step:active,
body.depth .mkt-card:active,
body.depth .sig:active,
body.depth .chk-item:active{
  transform:scale(.985);
  box-shadow:var(--sh-1);
}

/* A moving number should read as movement. The base file already flashes the
   colour; this adds the smallest possible physical nudge. */
body.depth .tick-up,
body.depth .tick-down{
  animation:zdTick .34s var(--ease);
}
@keyframes zdTick{
  0%{transform:translateY(0)} 34%{transform:translateY(-2px)} 100%{transform:translateY(0)}
}

/* The hero figure, once, when it first lands. Fired by `dashboard-depth.js`
   when the card reports itself ready — never on a timer, never on a loop. */
body.depth .zd-arrive .hero-amount{
  background:linear-gradient(100deg,var(--fg) 34%,var(--gold-lt) 50%,var(--fg) 66%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:zdArrive 1.05s var(--ease);
}
@keyframes zdArrive{from{background-position:190% 0}to{background-position:-40% 0}}

/* ══════════════════════════════════════════════════════
   THE HOUSE HOVER
   ══════════════════════════════════════════════════════
   Of the 98 `:hover` rules in the base stylesheet, NINETY-THREE change colour
   and nothing else. Five carry a transform — `.btn-gold:752`, `.pkg:2085`,
   `.ladder-step:2144`, `.gx-end:2428`, `.lh-card:5102` — and all five already
   agree on the same figure, `translateY(-1px)` or `-2px`. So this is not a new
   vocabulary; it is the one the product already chose, applied to the other
   ninety-three.

   And there is exactly ONE `:active` state in all 5,686 lines
   (`.btn-gold:753`). Which means that on a phone — where the drawer IS the
   navigation — pressing a menu item, a tile, a tab or a language option has
   never produced any feedback at all. Every tier below gets a press.

   SIX TIERS, AND TWO OF THEM DELIBERATELY DO NOT MOVE. A brief that says
   "subtle, purposeful, not everywhere" is not satisfied by making everything
   jump; text that shifts under the cursor reads as a bug, and a table row that
   rises breaks the column alignment the table exists for. */

/* ── Tier A: objects. Things shaped like a card or a tile. ── */
body.depth .mx-tile,
body.depth .pkg,
body.depth .lh-card,
body.depth .pm-item,
body.depth .qb,
body.depth .filter-chip,
body.depth .kpi,
body.depth .ch,
body.depth .kdoc,
body.depth .opt,
body.depth .dstep,
body.depth .conv-side,
body.depth .stk,
body.depth .sigc-pnl,
body.depth .gx-end,
body.depth .wf-item,
body.depth .bal-item,
body.depth .ss-stat,
body.depth .sum-item{
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             border-color .18s, background .18s;
}
body.depth .mx-tile:hover,
body.depth .pkg:hover:not(.locked),
body.depth .lh-card:hover:not(.locked),
body.depth .pm-item:hover,
body.depth .qb:hover,
body.depth .filter-chip:hover,
body.depth .kpi:hover,
body.depth .ch:hover,
body.depth .kdoc:hover,
body.depth .opt:hover,
body.depth .stk:hover,
body.depth .gx-end:hover,
body.depth .wf-item:hover,
body.depth .bal-item:hover,
body.depth .ss-stat:hover,
/* ── FOUR THAT WERE DECLARED AND NEVER FINISHED ──
   `.sum-item`, `.dstep`, `.conv-side` and `.sigc-pnl` are in the transition
   group above and were in no hover rule at all: four surfaces told the browser
   to prepare for a transform and then never asked for one. Harmless to look at
   and wrong to leave — the next reader of this file cannot tell a deliberate
   still tier (links, table rows, both stated) from an unfinished one. */
body.depth .sum-item:hover,
body.depth .dstep:hover,
body.depth .conv-side:hover,
body.depth .sigc-pnl:hover{
  transform:translateY(var(--lift));
  box-shadow:var(--sh-2), var(--bevel-2);
}

/* ── The one summary tile that leads somewhere ──
   Contract value. It takes the object lift rather than the row lift, because
   it is a tile in a grid of tiles; the three figures beside it stay still,
   which is what tells a reader that this one is different. */
body.depth .stat-go{
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background .18s;
  border-radius:var(--r1);
}
body.depth .stat-go:hover{
  transform:translateY(var(--lift-sm));
  background:rgba(232,182,71,.045);
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.06);
}
body.depth .stat-go:active{ transform:translateY(0) scale(.985); }
body.depth .mx-tile:active,
body.depth .pkg:active:not(.locked),
body.depth .lh-card:active,
body.depth .pm-item:active,
body.depth .qb:active,
body.depth .filter-chip:active,
body.depth .kpi:active,
body.depth .ch:active,
body.depth .kdoc:active,
body.depth .opt:active{
  transform:translateY(0) scale(.985);
  box-shadow:var(--sh-1), var(--bevel);
}

/* ── Tier B: rows.
   A row rises less, because at two pixels a list of them shimmers. It also
   gains a gold spine on its leading edge — the product's own idiom, used at
   `.pd-row.due:4846` and `.pl-item.hot:5427` to mean "this one".

   THE SPINE IS COMPOSED, NOT SUBSTITUTED. Those status spines are `box-shadow`
   insets, and several rows carry one permanently to mean overdue or hot. The
   hover spine is written as an ADDITIONAL shadow in the same declaration, so a
   row that is already flagged keeps its flag and gains the hover on top. ── */
body.depth .menu-item,
body.depth .notif-item,
body.depth .lang-opt,
body.depth .led,
body.depth .tk-row,
body.depth .req,
body.depth .ct-row,
body.depth .gx-res-row,
body.depth .gx-slot,
body.depth .kb-row,
body.depth .miss-row,
body.depth .mn-go,
body.depth .step-item{
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background .18s, color .18s, border-color .18s;
}
body.depth .menu-item:hover,
body.depth .notif-item:hover,
body.depth .lang-opt:hover,
body.depth .led:hover,
body.depth .tk-row:hover,
body.depth .req:hover,
body.depth .ct-row:hover,
body.depth .gx-res-row:hover,
body.depth .gx-slot:hover,
body.depth .kb-row:hover,
body.depth .miss-row:hover,
body.depth .mn-go:hover{
  transform:translateY(var(--lift-sm));
  box-shadow:var(--sh-1), inset 3px 0 0 var(--gold);
}
[dir="rtl"] body.depth .menu-item:hover,
[dir="rtl"] body.depth .notif-item:hover,
[dir="rtl"] body.depth .lang-opt:hover,
[dir="rtl"] body.depth .led:hover,
[dir="rtl"] body.depth .tk-row:hover,
[dir="rtl"] body.depth .req:hover,
[dir="rtl"] body.depth .ct-row:hover,
[dir="rtl"] body.depth .gx-res-row:hover,
[dir="rtl"] body.depth .gx-slot:hover,
[dir="rtl"] body.depth .kb-row:hover,
[dir="rtl"] body.depth .miss-row:hover,
[dir="rtl"] body.depth .mn-go:hover{
  box-shadow:var(--sh-1), inset -3px 0 0 var(--gold);
}
body.depth .menu-item:active,
body.depth .notif-item:active,
body.depth .lang-opt:active,
body.depth .led:active,
body.depth .tk-row:active,
body.depth .req:active,
body.depth .ct-row:active,
body.depth .kb-row:active,
body.depth .miss-row:active{
  transform:translateY(0) scale(.99);
}

/* ── Tier C: icon controls. Too small to lift convincingly, so they take the
   press instead — which is the state that was missing everywhere. ── */
body.depth .icon-btn,
body.depth .menu-btn,
body.depth .drawer-copy,
body.depth .acct-pop-copy,
body.depth .copy-btn,
body.depth .gx-copy,
body.depth .sigc-copy,
body.depth .gx-tool,
body.depth .pager-btn,
body.depth .mw-tf,
body.depth .seg-btn,
body.depth .range-tab{
  transition:transform .15s var(--ease), box-shadow .15s var(--ease),
             background .15s, color .15s, border-color .15s;
}
body.depth .icon-btn:hover,
body.depth .menu-btn:hover,
body.depth .drawer-copy:hover,
body.depth .acct-pop-copy:hover,
body.depth .copy-btn:hover,
body.depth .gx-copy:hover,
body.depth .sigc-copy:hover,
body.depth .gx-tool:hover,
body.depth .pager-btn:not(.is-disabled):hover{
  transform:translateY(var(--lift-sm));
}
body.depth .icon-btn:active,
body.depth .menu-btn:active,
body.depth .drawer-copy:active,
body.depth .acct-pop-copy:active,
body.depth .copy-btn:active,
body.depth .gx-copy:active,
body.depth .sigc-copy:active,
body.depth .gx-tool:active,
body.depth .seg-btn:active,
body.depth .range-tab:active,
body.depth .mw-tf:active{ transform:scale(.94); }

/* ── Tier D: navigation.
   `.tab-item` is the interesting one. `dashboard.css:592` already declares
   `transition:color .22s var(--ease), transform .22s var(--ease)` — and
   NOTHING IN THE FILE EVER GIVES IT A TRANSFORM. Somebody reached for exactly
   this and stopped. The icon lifts rather than the whole tab, because the label
   sits directly beneath it and moving both would shift the text. ── */
body.depth .tb-nav-item,
body.depth .tb-logo{
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background .18s, color .18s;
}
body.depth .tb-nav-item:hover,
body.depth .tb-logo:hover{ transform:translateY(var(--lift-sm)); }
body.depth .tb-nav-item:active,
body.depth .tb-logo:active,
body.depth .tab-item:active{ transform:translateY(0) scale(.96); }
body.depth .tab-item:hover .ic{ transform:translateY(-3px); }
body.depth .tab-item:hover{ color:var(--fg-2); }
body.depth .tab-item.active:hover .ic{ transform:translateY(-3px); }

/* ── Tier A″: the one heading that is a door.
   AI Market on the home screen. One pixel and nothing else.

   THE EMBOSS AND THE GLOW ARE GONE ON PURPOSE. They were written for a heading
   filled with a gold gradient, and lighting applied to text is the single
   fastest way to make a page look cheap — a shadow under a letterform says
   "sticker", where every other raised thing in this layer says "panel". The
   heading is plain type now, so it takes the plain row lift and lets the gold
   rule under it do the talking. ── */
body.depth .sec-go{ transition:transform .18s var(--ease), color .18s var(--ease); }
body.depth .sec-go:hover{ transform:translateY(var(--lift-sm)); }
body.depth .sec-go:active{ transform:translateY(0) scale(.985); }

/* ── Tier E: links. Colour only, and that is the whole rule. ── */
body.depth .link,
body.depth .section-head .link,
body.depth .notif-mark,
body.depth .lh-title{ transition:color .15s; }
body.depth .notif-mark:hover{ text-decoration:underline; }

/* ── Tier F: table rows. Background and a spine, never a lift — a table's
   entire job is that its rows line up. ── */
body.depth .dt tbody tr{ transition:background .15s, box-shadow .15s; }
body.depth .dt tbody tr:hover > td:first-child{ box-shadow:inset 3px 0 0 var(--gold-line); }
[dir="rtl"] body.depth .dt tbody tr:hover > td:first-child{ box-shadow:inset -3px 0 0 var(--gold-line); }

/* ══════════════════════════════════════════════════════
   NAVIGATION — THE MISS
   ══════════════════════════════════════════════════════
   The layer reached the shells of these and nothing inside them. Every tile,
   row, avatar and badge in the menu was still drawn flat while the page behind
   it had been given a material. On a phone the drawer is the whole screen, so
   this was the largest unlit surface in the product. */

/* The drawer, and the package card that is its most developed surface and had
   no elevation at all. */
body.depth .drawer-head{ box-shadow:0 1px 0 rgba(0,0,0,.34); }
body.depth .drawer-foot{ box-shadow:0 -1px 0 rgba(0,0,0,.34); }
body.depth .dpkg{ box-shadow:var(--sh-2), var(--bevel); }
body.depth .dpkg-bar{ background:var(--bg-0); box-shadow:var(--well); }

/* The menu tile grid. `.mx-ic` already carries a `150deg` gradient of its own,
   so it keeps it and gains only the lift and the shadow — the sheen is not
   layered over a surface that already has one. */
body.depth .mx-ic{
  box-shadow:0 2px 6px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             border-color .18s, background .18s;
}
body.depth .mx-tile:hover .mx-ic{
  box-shadow:0 0 0 3px var(--gold-glow), 0 6px 16px rgba(0,0,0,.46),
             inset 0 1px 0 rgba(255,255,255,.16);
}
body.depth .mx-group-title{ box-shadow:0 1px 0 rgba(0,0,0,.28); }

/* The account rollup. */
body.depth .acct-pop-head{ box-shadow:0 1px 0 rgba(0,0,0,.34); }
body.depth .acct-pop-foot{ box-shadow:0 -1px 0 rgba(0,0,0,.34); }
body.depth .acct-menu.open .acct-icon{ box-shadow:0 0 0 3px var(--gold-glow); }

/* Identity marks read as struck metal rather than printed circles. */
body.depth .avatar{
  box-shadow:0 2px 6px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.14);
}
body.depth .badge{
  box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.24);
}

/* The two grips. Both are drag handles — the notification shade and the sheet
   are pushed away by them — and neither gave any sign it could be touched. A
   bevel is what makes a bar look like something a thumb can catch. */
body.depth .notif-grip,
body.depth .sheet-grip{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.5);
}
body.depth .notif-head{ box-shadow:0 1px 0 rgba(0,0,0,.34); }
body.depth .sheet-head{ box-shadow:0 1px 0 rgba(0,0,0,.34); }
body.depth .notif-icon{ box-shadow:var(--sh-1), var(--bevel); }

/* ══════════════════════════════════════════════════════
   SHARED PRIMITIVES
   ══════════════════════════════════════════════════════
   These appear on every screen, so lighting them once is most of the rollout. */

/* `.kpi` is the exact case the layer was written for: the headline figures on
   affiliate, signals, market and the terminal, drawn with the same recipe as
   `.stat` — which is lit — and never touched. `.kpi.lead` already has a gold
   gradient, so it takes the shadow only. */
body.depth .kpi{ background-image:var(--sheen); box-shadow:var(--sh-1), var(--bevel); }
body.depth .kpi.lead{ background-image:none; box-shadow:var(--sh-2), var(--bevel); }

body.depth .chip{ box-shadow:0 1px 2px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06); }
body.depth .filter-chip{ background-image:var(--sheen); box-shadow:var(--sh-1), var(--bevel); }

/* The secondary button, on every screen, flat beside a `.btn-gold` that has
   both a gradient and a glow. */
body.depth .btn-ghost{
  background-image:var(--sheen);
  box-shadow:var(--sh-1), var(--bevel);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             border-color .18s, color .18s;
}
body.depth .btn-ghost:hover{ transform:translateY(var(--lift)); box-shadow:var(--sh-2), var(--bevel-2); }
body.depth .btn-ghost:active{ transform:translateY(0) scale(.985); box-shadow:var(--sh-1); }

/* Segmented controls: a sunk trough with one raised tab in it — the same
   treatment `.range-tabs` already gets on home, applied to its two twins. */
body.depth .seg,
body.depth .mw-tfs{ background:var(--bg-0); box-shadow:var(--well); }
body.depth .seg-btn.active,
body.depth .mw-tf.active{
  background-image:var(--sheen);
  box-shadow:0 1px 3px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.10);
}

/* A sticky table header with no shadow: rows currently scroll BEHIND it with no
   cue that it is floating. The one place a shadow does real work on a dark
   theme, because it falls on content rather than on the ground. */
body.depth .dt th{ box-shadow:0 4px 10px -6px rgba(0,0,0,.9); }

/* Inputs. Their colour already says sunk — every one of them is `var(--bg-0)`,
   darker than the card around it — and their lighting never did.
   `.sel` KEEPS ITS BACKGROUND: those two gradients are its dropdown caret. */
body.depth .tin,
body.depth .tin-area,
body.depth .amount-input,
body.depth .mw-search,
body.depth .chat-box,
body.depth .addr-box,
body.depth .qr-box,
body.depth .affdoc,
body.depth .mwa-figs-w,
body.depth .msg-att{ box-shadow:var(--well); }
body.depth .sel{ box-shadow:var(--well); }
/* Focus rings are `box-shadow` too, so each one is restated WITH the well
   rather than being quietly replaced by it. */
body.depth .tin:focus,
body.depth .tin-area:focus,
body.depth .amount-input:focus,
body.depth .sel:focus{ box-shadow:var(--well), 0 0 0 3px var(--gold-pale); }

/* The switch: a sunk track with a raised knob, which is what a switch is. */
body.depth .sw{ box-shadow:var(--well); }
body.depth .sw::after{ box-shadow:0 1px 3px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22); }

body.depth .empty-state{ box-shadow:inset 0 1px 0 rgba(255,255,255,.03); }
body.depth .empty-icon{ box-shadow:var(--sh-1), var(--bevel); }
body.depth .state-banner{ background-image:var(--sheen); box-shadow:var(--sh-1), var(--bevel); }
body.depth .err-box{ box-shadow:var(--sh-1), var(--bevel); }
body.depth .pager-btn{ background-image:var(--sheen); box-shadow:var(--sh-1), var(--bevel); }
body.depth .doc{ background-image:var(--sheen); box-shadow:var(--sh-2), var(--bevel); }
body.depth .wtabs,
body.depth .tabstrip{ box-shadow:0 1px 0 rgba(0,0,0,.30); }

/* Every progress track in the product is a channel with a gradient running
   along it, and not one of them was cut in. Ten of them, one rule. */
body.depth .ms-bar,
body.depth .pw-bar,
body.depth .pd-fun-track,
body.depth .pd-lv-track,
body.depth .mwx-p-bar,
body.depth .sigc-track,
body.depth .split-bar,
body.depth .pl-hist-track,
body.depth .gx-depth-track,
body.depth .zx-rg-t,
body.depth .zx-se-t,
body.depth .zx-rk-t,
body.depth .zx-pp-t,
body.depth .ab-track,
body.depth .alloc-track{ box-shadow:var(--well); }

/* ══════════════════════════════════════════════════════
   THE SCREENS
   ══════════════════════════════════════════════════════ */

/* ── The buy screen. `.pkg-cta` is a gold gradient standing next to a
   `.btn-gold` that has a glow and a shadow, and it had neither. ── */
body.depth .pkg{ background-image:var(--sheen); box-shadow:var(--sh-1), var(--bevel); }
body.depth .pkg.selected{
  box-shadow:0 12px 40px rgba(232,182,71,.10), var(--sh-2), var(--bevel-2);
}
body.depth .pkg-return{ box-shadow:var(--well); }
body.depth .pkg.selected .pkg-cta{
  box-shadow:0 6px 22px var(--gold-glow), 0 4px 12px rgba(0,0,0,.40),
             inset 0 1px 0 rgba(255,255,255,.34);
}
body.depth .pkg-badge{ box-shadow:0 2px 8px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.3); }

/* ── The ten list rows that share one flat recipe. ── */
body.depth .led,
body.depth .tk-row,
body.depth .pm-item,
body.depth .req,
body.depth .ct-row,
body.depth .gx-res-row,
body.depth .gx-slot,
body.depth .kb-row,
body.depth .ch,
body.depth .miss-row,
body.depth .kdoc,
body.depth .opt,
body.depth .dstep,
body.depth .conv-side,
body.depth .stk,
body.depth .pd-fact,
body.depth .pd-note,
body.depth .pd-alert,
body.depth .msg-bubble,
body.depth .tk-head,
body.depth .wreceipt,
body.depth .inline-figs,
body.depth .tg-state,
body.depth .mwa-note,
body.depth .pl-cell,
body.depth .gx-end{
  background-image:var(--sheen);
  box-shadow:var(--sh-1), var(--bevel);
}
body.depth .led-icon,
body.depth .tk-icon,
body.depth .req-icon,
body.depth .kdoc-ic,
body.depth .msg-av,
body.depth .mn-av{ box-shadow:var(--sh-1), var(--bevel); }

/* ── Signals. `.sigc` itself is left alone: its live states ANIMATE a
   box-shadow on a keyframe, and a flat one written here would be overwritten
   mid-breath. The tile inside it is the thing that was flat. ── */
body.depth .sigc-pnl{ background-image:var(--sheen); box-shadow:var(--sh-1), var(--bevel); }
body.depth .sigc-act{ background-image:var(--sheen); box-shadow:var(--sh-1), var(--bevel); }
body.depth .sigc-act.gold{ background-image:none; box-shadow:var(--sh-1), var(--bevel); }

/* ── Market. The chart container is home's `.chart-box` twin and never got cut
   in; the sticky asset header already has a shadow, so it is aligned rather
   than replaced. ── */
body.depth .mw-chart{ box-shadow:var(--well); }
body.depth .mw-asset{ box-shadow:var(--sh-2), var(--bevel); }
body.depth .mw-ind{ background-image:var(--sheen); box-shadow:var(--sh-1), var(--bevel); }
body.depth .mwa-lang-btn,
body.depth .mwa-recent-btn{ background-image:var(--sheen); box-shadow:var(--sh-1), var(--bevel); }

/* ── Academy. `.lh-card` lifts two pixels on hover and has no shadow to lift
   with — the clearest case in the product of the effect being reached for and
   left unfinished. ── */
body.depth .lh-card{ background-image:var(--sheen); box-shadow:var(--sh-1), var(--bevel); }
body.depth .lh-view{ box-shadow:var(--well); }
body.depth .lh-rd-top{ box-shadow:0 4px 14px -8px rgba(0,0,0,.9); }
body.depth .lh-rd-foot{ box-shadow:0 -4px 14px -8px rgba(0,0,0,.9); }

/* ── Affiliate. The galaxy is already the most heavily lit surface in the
   product, so only its stage and its two leg cards are touched. ── */
body.depth .gx-stage{ box-shadow:var(--well); }
body.depth .ms-reward{ background-image:var(--sheen); box-shadow:var(--sh-1), var(--bevel); }

/* ── Wallet. ── */
body.depth .tl-dot{ box-shadow:0 1px 4px rgba(0,0,0,.6); }
body.depth .tl-dot.current{ box-shadow:0 0 0 4px var(--gold-pale), 0 1px 4px rgba(0,0,0,.6); }

/* ══════════════════════════════════════════════════════
   THE ACTIVATION TERMINAL
   ══════════════════════════════════════════════════════
   A separate page with its own inlined stylesheet and no shared assets, but a
   byte-identical token block — so the vocabulary ports and only the selector
   map changes. Two of its tiles, `.bal-item` and `.wf-item`, have carried
   `transition:… box-shadow` since they were written with no box-shadow ever
   set on them. Those transitions fire for the first time here. */

/* Heroes. `::before` is taken on both by a gold hairline, so the bloom goes on
   `::after` — the same constraint `.card.gold-top` has on the dashboard. */
body.depth .balance-card,
body.depth .ai-card{
  background-image:var(--sheen-2);
  box-shadow:var(--sh-3), var(--bevel);
}
body.depth .balance-card::after{
  content:'';position:absolute;inset:auto 8% -14px 8%;height:26px;z-index:-1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,var(--gold-glow),transparent 70%);
  filter:blur(9px);opacity:.5;
}

/* L1 surfaces. */
body.depth .alloc-card,
body.depth .contract-head,
body.depth .infra-box,
body.depth .rp-card,
body.depth .charged-card,
body.depth .sig-box,
body.depth .risk-notice,
body.depth .risk-disclaimer{
  background-image:var(--sheen);
  box-shadow:var(--sh-2), var(--bevel);
}

/* L2 tiles — including the two whose dead transitions now have something to
   animate. */
body.depth .bal-item,
body.depth .wf-item,
body.depth .sum-item,
body.depth .ss-stat,
body.depth .coin-row{
  background-image:var(--sheen);
  box-shadow:var(--sh-1), var(--bevel);
}

/* Wells. */
body.depth .tabs,
body.depth .agreement-box,
body.depth .license-box,
body.depth .code-input,
body.depth #sigCanvas{ box-shadow:var(--well); }
body.depth .tab.active{
  background-image:var(--sheen);
  box-shadow:0 1px 3px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.10);
}

/* Metal. */
body.depth .bal-badge,
body.depth .coin-row-badge,
body.depth .success-icon{
  position:relative;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.30);
}
body.depth .bal-badge::after,
body.depth .coin-row-badge::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(58% 48% at 32% 24%,rgba(255,255,255,.38),transparent 62%);
}

/* Chips. */
body.depth .ss-chip,
body.depth .tb-status,
body.depth .ai-version,
body.depth .lic-status{
  box-shadow:0 1px 3px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07);
}

/* This page's glass has four surfaces the dashboard has no counterpart for. */
body.depth .actionbar{
  box-shadow:0 -1px 0 rgba(0,0,0,.42), 0 -8px 26px rgba(0,0,0,.34),
             inset 0 1px 0 rgba(255,255,255,.05);
}
body.depth .sidebar{ box-shadow:1px 0 0 rgba(0,0,0,.34); }
body.depth .rail{ box-shadow:-1px 0 0 rgba(0,0,0,.34); }
body.depth .sticky-summary{ box-shadow:var(--sh-2), var(--bevel); }
body.depth .step-item.active .step-num{
  box-shadow:0 3px 12px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ══════════════════════════════════════════════════════
   THE PHONE
   ══════════════════════════════════════════════════════
   Not a reduced version — it keeps the lighting, the bevels and the wells,
   which is where most of the value is. What changes is weight: a card is nearly
   full-width on a phone, and a desktop shadow under it turns the gap between
   cards into mud. So the levels are re-cut tighter and darker rather than
   dropped. Tilt and parallax are pointer-only and simply never arrive here. */
@media(max-width:767px){
  body.depth{
    --sh-1: 0 1px 1px rgba(0,0,0,.30), 0 1px 4px rgba(0,0,0,.28);
    --sh-2: 0 1px 2px rgba(0,0,0,.34), 0 4px 12px rgba(0,0,0,.34);
    --sh-3: 0 2px 5px rgba(0,0,0,.38), 0 8px 22px rgba(0,0,0,.44);
  }
  /* The bloom under the hero is a desktop-width effect; at 390px it reaches the
     screen edges and reads as a smudge rather than as light. */
  body.depth .card.gold-top::after{display:none;}
}

/* Hover does not exist on a touch screen, so the affordance becomes the press —
   the habit the base file already follows at `dashboard.css:4845` and `:5444`. */
@media (hover:none){
  /* No pointer, so nothing hovers — but everything is now pressable, which is
     the state that did not exist anywhere in this product before. */
  body.depth{--lift:0px;--lift-sm:0px;}
  body.depth .card:active{box-shadow:var(--sh-3), var(--bevel);}
  body.depth .mx-tile:active .mx-ic{
    box-shadow:0 0 0 3px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.16);
  }
}

/* ══════════════════════════════════════════════════════
   THE PHONE'S DEPTH: PRESSING, NOT HOVERING
   ══════════════════════════════════════════════════════
   This file already decided that a phone gets the material and none of the
   motion — the camera, the hover lift and the sheen are all behind
   `(hover:hover) and (pointer:fine)`, and `zexca-depth.js` says why: a phone
   should not pay for a parallax nobody asked it for. That decision stands.

   WHAT A TOUCH SCREEN HAS INSTEAD IS THE PRESS, and the press is the one
   moment a finger is actually asking the interface a question. On a pointer
   device the answer is the hover — the thing lifts slightly before you commit.
   There is no before on a touch screen, so the answer has to arrive during: the
   surface goes down under the finger and its shadow collapses towards it, which
   is what a real object does and what nothing here was doing.

   THE RULES BELOW ARE ALL `transform` AND `box-shadow` ON `:active`. That
   matters twice over:

     · `transform` and `opacity` are composited. Nothing here triggers layout
       or paint, so a mid-range Android pays a GPU quad and nothing else.
     · every one of them is already switched off by the two motion guards
       further down this file, which zero `*:active{transform}` wholesale. A
       press added here needs no new guard and cannot be forgotten in one.

   AND THERE IS NO LOOP ANYWHERE IN IT. No animation runs unless a finger is
   down, so the battery cost when the screen is merely open is zero.
   ══════════════════════════════════════════════════════ */
@media (hover:none) and (pointer:coarse){

  /* ── The press ──
     6-9% is the range where a press is felt rather than watched. Buttons take
     the larger figure because they are small and the whole control moves; a
     card takes the smaller one because it is most of the screen and a big card
     shrinking 9% reads as the page flinching. */
  body.depth .btn,
  body.depth .btn-gold,
  body.depth .icon-btn,
  body.depth .menu-item,
  body.depth .wtab,
  body.depth .chip,
  body.depth .pill{
    transition:transform .13s var(--ease), box-shadow .13s var(--ease);
    will-change:transform;
  }
  body.depth .btn:active,
  body.depth .btn-gold:active,
  body.depth .icon-btn:active,
  body.depth .menu-item:active,
  body.depth .wtab:active,
  body.depth .chip:active,
  body.depth .pill:active{
    transform:scale(.94);
  }

  /* A raised surface, pressed: down a little, and its shadow tightens because
     the gap between it and the ground has closed. `.card:active` already drops
     to `--sh-3` a few rules up; this adds the movement that goes with it. */
  body.depth .card,
  body.depth .stat,
  body.depth .mkt-card,
  body.depth .snapshot,
  body.depth .coin-chip{
    transition:transform .16s var(--ease), box-shadow .16s var(--ease);
  }
  body.depth .card:active,
  body.depth .stat:active,
  body.depth .mkt-card:active,
  body.depth .snapshot:active,
  body.depth .coin-chip:active{
    transform:scale(.985);
    box-shadow:var(--sh-1), var(--bevel);
  }

  /* ── The tab bar ──
     The active tab's icon sits marginally forward of its neighbours. The base
     stylesheet already lifts it 1px; this puts it on its own plane instead, so
     the row reads as one selected thing among four rather than as four things
     one of which is gold. */
  body.depth .tabbar-inner{perspective:420px;}
  body.depth .tab-item .ic{
    transition:transform .22s var(--ease);
    transform-style:preserve-3d;
  }
  body.depth .tab-item.active .ic{transform:translate3d(0,-1px,14px);}
  body.depth .tab-item:active{transform:scale(.93);}

  /* ── The sheet ──
     It already rises from the bottom over .34s. What it does not do is arrive
     from anywhere: it slides up flat, the way a panel does, not the way a card
     picked up off a table does. A little scale on the way in is the whole
     difference, and it costs one more property on a transform that was already
     being animated. */
  body.depth .sheet{
    transform:translate3d(0,102%,0) scale(.97);
    transform-origin:50% 100%;
  }
  body.depth .sheet.open{transform:translate3d(0,0,0) scale(1);}
}

/* ══════════════════════════════════════════════════════
   MOTION, AND WHAT SURVIVES IT
   ══════════════════════════════════════════════════════
   Both switches, the way the base file handles them: `body.no-motion` for the
   in-app setting and the media query for the operating system.

   MOVEMENT STOPS AND THE MATERIAL STAYS. This follows the principle the base
   stylesheet states about itself at `dashboard.css:2739` — *"the state is
   information, the breathing is decoration"* — and at `:2884` — *"turning
   motion off must never turn information off."* Lighting, shadow, bevel and
   well are not motion; they are how this screen says what is on top of what.
   Stripping them would hand a reduced-motion reader a WORSE page rather than a
   calmer one, which is the opposite of the point. */
@media(prefers-reduced-motion:reduce){
  /* ONE SWITCH FOR EVERY HOVER IN THE FILE. Because the lift is a token rather
     than a literal, zeroing it here stops every tier at once — and stops any
     tier added later, which a list of overrides could never promise. */
  body.depth{--lift:0px;--lift-sm:0px;}
  body.depth .btn-gold:hover::after{animation:none;}
  body.depth .dash{perspective:none;}
  body.depth .dash .card:hover{transform:none;}
  /* The terminal's camera and its one scaling cell — the only two movements in
     there that are not driven by `--lift`, so the token cannot reach them. */
  body.depth .zx{perspective:none;}
  body.depth .zx .mod:hover{transform:none;}
  body.depth .zx-cor-c:hover{transform:none;}
  body.depth .tick-up,body.depth .tick-down{animation:none;}
  body.depth .tab-item:hover .ic{transform:none;}
  body.depth .zd-arrive .hero-amount{
    animation:none;-webkit-text-fill-color:currentColor;color:var(--fg);
    background:none;
  }
  /* The presses go too — a press is movement, and the colour change stays. */
  body.depth *:active{transform:none !important;}
}
body.depth.no-motion{--lift:0px;--lift-sm:0px;}
body.depth.no-motion .btn-gold:hover::after{animation:none;}
body.depth.no-motion .dash{perspective:none;}
body.depth.no-motion .dash .card:hover{transform:none;}
body.depth.no-motion .zx{perspective:none;}
body.depth.no-motion .zx .mod:hover{transform:none;}
body.depth.no-motion .zx-cor-c:hover{transform:none;}
body.depth.no-motion .tab-item:hover .ic{transform:none;}
body.depth.no-motion *:active{transform:none !important;}
body.depth.no-motion .zd-arrive .hero-amount{
  animation:none;-webkit-text-fill-color:currentColor;color:var(--fg);background:none;
}

/* Paper has one light source and it is not this one. The base file already
   strips the chrome at `dashboard.css:3549` so a contract survives printing;
   this keeps shadows and tilts off the page with it. */
@media print{
  body.depth *,body.depth *::before,body.depth *::after{
    box-shadow:none !important;text-shadow:none !important;
    filter:none !important;transform:none !important;
  }
  body.depth .card,body.depth .stat,body.depth .month-strip,
  body.depth .chart-box,body.depth .range-tabs{background-image:none;}
}