/* ============================================================
   FlashDex — the visual layer

   Loaded after console.css. Everything here is icons, charts,
   depth and motion: the parts that make the dashboard read as a
   product rather than a table of numbers.

   All of it is inline SVG and CSS. No image host, no icon font, no
   library — the product is a static export, so an external asset
   origin would be one more thing to go down.

   Motion rules:
     · nothing moves for longer than it takes to read it
     · nothing loops in the corner of the eye except a live pulse
     · every animation is switched off under prefers-reduced-motion
   ============================================================ */

/* ------------------------------------------------------------
   Icons
   ------------------------------------------------------------ */
.ic{width:18px;height:18px;flex:none;vertical-align:-3px;}
/* console.css sets svg{display:block} for layout SVGs. Inside a pill or
   any run of text that is wrong — a block-level svg forces a line break,
   so an icon plus a word wraps onto two lines. */
.pill .ic,.mile .ic,.rung .ic,.fine .ic,.ml .ic,.qk .ic,.rc-r .ic,.lv-r .ic{display:inline-block;}
.pill{display:inline-flex;align-items:center;gap:6px;}
.ic.sm{width:14px;height:14px;vertical-align:-2px;}
.ic.lg{width:24px;height:24px;}
.ic.xl{width:34px;height:34px;}

/* an icon in a tinted rounded tile — used at the head of every panel */
.chip{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--primary-container);color:var(--primary);
  border:1px solid rgba(52,211,153,.22);
}
.chip.gold{background:var(--secondary-container);color:var(--secondary);border-color:rgba(245,183,76,.24);}
.chip.red{background:var(--error-container);color:var(--error);border-color:rgba(255,110,110,.26);}
.chip.violet{background:rgba(196,167,240,.13);color:#C4A7F0;border-color:rgba(196,167,240,.24);}
.chip.lg{width:46px;height:46px;border-radius:13px;}

/* console.css sets space-between here, which shoves a title away from
   its own chip when there is nothing on the right. Anything that
   should sit at the far end uses .right and its own margin-left:auto. */
.panel > h2{display:flex;align-items:center;gap:11px;justify-content:flex-start;}
.panel > h2 .chip{width:30px;height:30px;border-radius:9px;}
.panel > h2 .chip .ic{width:16px;height:16px;}
.panel > h2 .right{margin-left:auto;display:flex;gap:8px;align-items:center;}

.rail a.nav .ic{width:16px;height:16px;opacity:.85;}
.rail a.nav.on .ic{opacity:1;}

/* ------------------------------------------------------------
   Depth — panels stop being flat rectangles
   ------------------------------------------------------------ */
.panel,.card,.strip,.hero > .panel{position:relative;overflow:hidden;}
.panel::before,.card::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
}
.panel.glow::after{
  content:"";position:absolute;right:-90px;top:-90px;width:230px;height:230px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(52,211,153,.14),transparent 68%);
}
.panel.glow.gold::after{background:radial-gradient(circle,rgba(245,183,76,.13),transparent 68%);}

/* ------------------------------------------------------------
   Entrance — a short stagger so the page assembles rather than
   snapping into place all at once
   ------------------------------------------------------------ */
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.rise{animation:rise .42s var(--ease) both;}
.rise:nth-child(1){animation-delay:.02s}
.rise:nth-child(2){animation-delay:.07s}
.rise:nth-child(3){animation-delay:.12s}
.rise:nth-child(4){animation-delay:.17s}
.rise:nth-child(5){animation-delay:.22s}
.rise:nth-child(6){animation-delay:.27s}
.rise:nth-child(7){animation-delay:.32s}
.rise:nth-child(8){animation-delay:.37s}

/* live pulse — the one thing allowed to loop */
.live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--secondary);}
.live i{width:7px;height:7px;border-radius:50%;background:var(--secondary);
  box-shadow:0 0 0 0 rgba(245,183,76,.65);animation:pulse 1.9s ease-out infinite;}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(245,183,76,0);}100%{box-shadow:0 0 0 0 rgba(245,183,76,0);}}

/* the hero number counts up on load */
.bignum{position:relative;}
.bignum.count{background:linear-gradient(92deg,var(--tertiary),var(--primary) 60%,var(--secondary));
  -webkit-background-clip:text;background-clip:text;color:transparent;}

/* ------------------------------------------------------------
   Sparkline / area chart
   ------------------------------------------------------------ */
.spark{width:100%;height:120px;display:block;overflow:visible;}
.spark .area{opacity:0;animation:fadeIn .7s var(--ease) .25s both;}
.spark .line{
  fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw 1.1s var(--ease) .1s forwards;
}
.spark .dot{fill:var(--secondary);opacity:0;animation:fadeIn .4s .9s forwards;}
.spark .grid{stroke:var(--outline-variant);stroke-width:1;stroke-dasharray:3 5;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes fadeIn{to{opacity:1;}}

.chartwrap{position:relative;}
.chartwrap .axis{display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--mono);font-size:10px;color:var(--outline);}

/* bars, for the level breakdown */
.bars{display:flex;align-items:flex-end;gap:5px;height:104px;margin:var(--s2) 0 10px;}
.bars .b{flex:1;min-width:0;border-radius:4px 4px 0 0;position:relative;
  background:linear-gradient(180deg,var(--primary),rgba(52,211,153,.28));
  height:0;animation:grow .7s var(--ease) forwards;}
.bars .b.gold{background:linear-gradient(180deg,var(--secondary),rgba(245,183,76,.26));}
.bars .b.off{background:var(--surface-3);}
@keyframes grow{to{height:var(--h);}}
.bars-x{display:flex;gap:5px;font-family:var(--mono);font-size:9.5px;color:var(--outline);}
.bars-x span{flex:1;text-align:center;min-width:0;}

/* ------------------------------------------------------------
   Rank badge
   ------------------------------------------------------------ */
.badge{display:flex;align-items:center;gap:14px;}
.badge .shieldwrap{position:relative;width:64px;height:64px;flex:none;display:grid;place-items:center;}
.badge .shieldwrap svg.bg{position:absolute;inset:0;width:64px;height:64px;}
.badge .shieldwrap .ic{position:relative;width:26px;height:26px;color:#0C0B16;}
.badge .name{font-size:19px;font-weight:700;letter-spacing:-.02em;}
.badge .meta{font-family:var(--mono);font-size:11px;color:var(--on-surface-variant);margin-top:3px;}

/* rank ladder */
.ladder{display:flex;flex-direction:column;gap:3px;}
.rung{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:var(--r-s);
  border:1px solid transparent;background:var(--surface-3);transition:.2s var(--ease);}
.rung.done{border-color:rgba(52,211,153,.28);background:var(--primary-container);}
.rung.now{border-color:var(--secondary);background:var(--secondary-container);}
.rung .ic{color:var(--outline);}
.rung.done .ic{color:var(--primary);} .rung.now .ic{color:var(--secondary);}
.rung .nm{flex:1;font-size:13.5px;min-width:0;}
.rung .pc{font-family:var(--mono);font-size:12px;color:var(--on-surface-variant);}

/* ------------------------------------------------------------
   Tiles with a decorative watermark icon
   ------------------------------------------------------------ */
.tile{position:relative;background:var(--surface-2);border:1px solid var(--outline-variant);
  border-radius:var(--r-m);padding:17px 18px;overflow:hidden;min-width:0;}
.tile .wm{position:absolute;right:-12px;bottom:-14px;width:82px;height:82px;
  color:var(--on-surface);opacity:.045;pointer-events:none;}
.tile .k{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-surface-variant);}
.tile .k .ic{width:13px;height:13px;}
.tile .v{margin-top:11px;font-size:25px;font-weight:700;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;}
.tile .d{margin-top:6px;font-family:var(--mono);font-size:10.5px;color:var(--outline);position:relative;}
.tile .v.g{color:var(--tertiary);} .tile .v.y{color:var(--secondary);} .tile .v.r{color:var(--error);}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:var(--s2);margin-bottom:var(--s2);}

/* ------------------------------------------------------------
   Empty states — an icon and a sentence, not a bare "no data"
   ------------------------------------------------------------ */
.blank{display:flex;flex-direction:column;align-items:center;gap:12px;padding:44px 20px;text-align:center;}
.blank .ic{width:40px;height:40px;color:var(--outline);opacity:.55;}
.blank p{color:var(--on-surface-variant);font-size:14px;max-width:44ch;line-height:1.6;}

/* ------------------------------------------------------------
   Hover life on rows and buttons
   ------------------------------------------------------------ */
tbody tr{transition:background .15s var(--ease);}
.btn{position:relative;overflow:hidden;}
.btn-fill:active:not(:disabled){transform:translateY(1px);}
.tile,.strip > div{transition:border-color .2s var(--ease),transform .2s var(--ease);}
.tile:hover{border-color:rgba(52,211,153,.3);}

@media (prefers-reduced-motion:reduce){
  .rise,.spark .line,.spark .area,.spark .dot,.bars .b,.live i{animation:none!important;}
  .spark .line{stroke-dashoffset:0!important;}
  .spark .area,.spark .dot{opacity:1!important;}
  .bars .b{height:var(--h)!important;}
}

/* ============================================================
   Rank insignia
   ============================================================ */
.rankbadge{display:block;}
.badge .shieldwrap{position:relative;width:auto;height:auto;display:block;}
.badge .shieldwrap.lit::before{
  content:"";position:absolute;inset:-18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--glow),transparent 66%);
  opacity:.55;animation:halo 4.5s ease-in-out infinite;
}
@keyframes halo{0%,100%{opacity:.38;transform:scale(.94);}50%{opacity:.62;transform:scale(1.04);}}
.badge .name{position:relative;}

/* ladder rungs carry a miniature of the same shield */
.rung .mini{display:grid;place-items:center;width:26px;height:26px;flex:none;
  filter:saturate(.35) brightness(.7);transition:filter .25s var(--ease);}
.rung.done .mini,.rung.now .mini{filter:none;}
.rung.now{box-shadow:0 0 0 1px rgba(245,183,76,.35) inset;}
.rung .ic{flex:none;}
.rung:not(.done):not(.now) .nm,.rung:not(.done):not(.now) .pc{color:var(--outline);}

/* ============================================================
   Profit & loss
   ============================================================ */
.pnl{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s3);align-items:start;}
.pnl-main .bignum{color:var(--tertiary);margin:12px 0 10px;}
.pnl-main .bignum.loss{color:var(--secondary);}
.pnl-main .sub{font-size:13.5px;color:var(--on-surface-variant);line-height:1.6;}
.pnl-main .axis{display:flex;justify-content:space-between;margin-top:7px;
  font-family:var(--mono);font-size:10px;color:var(--outline);}

.pnl-side{display:flex;flex-direction:column;gap:1px;
  background:var(--outline-variant);border:1px solid var(--outline-variant);
  border-radius:var(--r-m);overflow:hidden;}
.pnl-row{display:flex;align-items:center;gap:12px;padding:12px 15px;background:var(--surface-2);}
.pnl-row .ix{color:var(--on-surface-variant);display:grid;place-items:center;flex:none;}
.pnl-row .kx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.pnl-row .kx b{font-size:13.5px;font-weight:500;}
.pnl-row .kx em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--outline);}
.pnl-row .vx{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;
  white-space:nowrap;flex:none;}
.pnl-row .vx.pos{color:var(--tertiary);}

.fine{margin-top:var(--s2);font-family:var(--mono);font-size:10.5px;line-height:1.7;color:var(--outline);}
.fine code{color:var(--primary);background:var(--primary-container);padding:1px 5px;border-radius:4px;}

.chain-tabs{display:flex;gap:7px;}

@media (max-width:900px){ .pnl{grid-template-columns:1fr;} }