/* ============================================================
   FlashDex — motion layer

   Loaded last. Everything here is CSS or inline SVG; no library.

   The rule that keeps this from becoming noise: motion is used to
   show STRUCTURE or CHANGE, never for decoration on its own.

     · containers arrive once, staggered, then hold still
     · a connector draws so you can see what connects to what
     · a value that just changed flashes; a value at rest does not
     · exactly one thing loops — the live pulse — because it means
       "this is still happening"

   Everything is switched off wholesale under prefers-reduced-motion
   at the foot of this file.
   ============================================================ */

/* ------------------------------------------------------------
   Segmented control (Levels / Branches)
   ------------------------------------------------------------ */
.seg{display:inline-flex;gap:3px;padding:3px;border-radius:var(--r-full);
  background:var(--surface-3);border:1px solid var(--outline-variant);}
.segb{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:0;
  border-radius:var(--r-full);background:transparent;color:var(--on-surface-variant);
  font-size:13px;cursor:pointer;transition:.2s var(--ease);white-space:nowrap;}
.segb .ic{display:inline-block;}
.segb:hover{color:var(--on-surface);}
.segb.on{background:var(--primary);color:var(--on-primary);font-weight:500;
  box-shadow:0 2px 10px rgba(52,211,153,.25);}

/* ------------------------------------------------------------
   Breadcrumbs
   ------------------------------------------------------------ */
.crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:18px;
  padding-bottom:14px;border-bottom:1px solid var(--outline-variant);}
.crumb{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:0;
  border-radius:var(--r-full);background:var(--surface-3);color:var(--on-surface-variant);
  font:12.5px var(--mono);cursor:pointer;transition:.18s var(--ease);}
.crumb .ic{display:inline-block;}
.crumb em{font-style:normal;font-size:10px;color:var(--outline);}
.crumb:hover{background:var(--surface);color:var(--on-surface);}
.crumb.on{background:var(--primary-container);color:var(--primary);
  box-shadow:inset 0 0 0 1px rgba(52,211,153,.32);}
.crumb.on em{color:var(--primary);opacity:.7;}
.crumb-sep{color:var(--outline);display:grid;place-items:center;transform:rotate(-90deg);}
.crumb-sep .ic{width:13px;height:13px;}

/* ------------------------------------------------------------
   Branch tree

   The wire is a real elbow drawn in CSS, and it animates in with the
   node it belongs to, so the hierarchy is visible rather than implied
   by indentation alone.
   ------------------------------------------------------------ */
.bfocus{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 18px;margin-bottom:18px;border-radius:var(--r-m);
  background:linear-gradient(120deg,rgba(52,211,153,.10),rgba(245,183,76,.05));
  border:1px solid rgba(52,211,153,.24);
  animation:focusIn .34s var(--ease) both;}
@keyframes focusIn{from{opacity:0;transform:translateY(-6px) scale(.99);}to{opacity:1;transform:none;}}
.bf-b{flex:none;display:grid;place-items:center;}
.bf-t{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px;}
.bf-t b{font:700 17px var(--mono);color:var(--primary);letter-spacing:.01em;}
.bf-t em{font-style:normal;font:11px var(--mono);color:var(--on-surface-variant);}
.bf-m{display:flex;flex-direction:column;gap:3px;min-width:104px;flex:none;}
.bf-m em{font-style:normal;font:9.5px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--outline);}
.bf-m b{font:14px var(--mono);font-weight:500;font-variant-numeric:tabular-nums;}
.bf-m b i{font-style:normal;font-size:10px;color:var(--outline);}
.bf-m.hi em{color:var(--primary);opacity:.8;}
.bf-m.hi b{font-size:16px;}

.btree{display:flex;flex-direction:column;gap:9px;padding-left:22px;position:relative;}
/* the trunk the elbows hang off */
.btree::before{
  content:"";position:absolute;left:9px;top:-6px;bottom:26px;width:2px;
  background:linear-gradient(180deg,rgba(52,211,153,.55),rgba(52,211,153,.08));
  border-radius:2px;transform-origin:top;animation:trunk .5s var(--ease) both;
}
@keyframes trunk{from{transform:scaleY(0);}to{transform:scaleY(1);}}

.bnode{position:relative;animation:nodeIn .38s var(--ease) both;
  animation-delay:calc(var(--i) * .045s + .12s);}
@keyframes nodeIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}

/* elbow from the trunk into the card */
.bwire{position:absolute;left:-13px;top:50%;width:13px;height:2px;
  background:rgba(52,211,153,.42);transform-origin:left;
  animation:wire .3s var(--ease) both;
  animation-delay:calc(var(--i) * .045s + .26s);}
@keyframes wire{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.bcard{
  display:flex;align-items:center;gap:14px;width:100%;min-width:0;
  padding:13px 15px;border-radius:var(--r-m);text-align:left;
  background:var(--surface-2);border:1px solid var(--outline-variant);
  color:inherit;cursor:pointer;transition:.2s var(--ease);position:relative;overflow:hidden;
}
.bcard:not(:disabled):hover{
  border-color:rgba(52,211,153,.45);transform:translateX(3px);
  box-shadow:-4px 0 0 -1px var(--primary);
}
.bcard:disabled{cursor:default;opacity:.75;}
.bcard.leaf{background:var(--surface-3);}
/* a light sweep on hover, so a clickable branch feels clickable */
.bcard:not(:disabled)::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 30%,rgba(52,211,153,.09),transparent 70%);
  transform:translateX(-60%);transition:opacity .2s;
}
.bcard:not(:disabled):hover::after{opacity:1;animation:sweep 1s var(--ease);}
@keyframes sweep{to{transform:translateX(60%);}}

.bc-b{flex:none;display:grid;place-items:center;}
.bc-id{flex:1;min-width:104px;display:flex;flex-direction:column;gap:3px;}
.bc-id b{font:13px var(--mono);color:var(--primary);}
.bc-id em{font-style:normal;font:10px var(--mono);color:var(--outline);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bc-f,.bc-sub{display:flex;flex-direction:column;gap:3px;min-width:92px;flex:none;text-align:right;}
.bc-f em,.bc-sub em{font-style:normal;font:9.5px var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--outline);}
.bc-f b,.bc-sub b{font:12.5px var(--mono);font-weight:500;font-variant-numeric:tabular-nums;}
.bc-f.hi em{color:var(--primary);opacity:.8;}
.bc-f.hi b{font-size:14px;}
.bc-sub{min-width:116px;padding-left:14px;border-left:1px solid var(--outline-variant);}
.bc-sub b{color:var(--secondary);}
.bc-go{flex:none;color:var(--outline);transform:rotate(90deg);transition:.2s var(--ease);}
.bcard:hover .bc-go{color:var(--primary);transform:rotate(90deg) translateY(-3px);}

/* ------------------------------------------------------------
   Container motion, applied across the app
   ------------------------------------------------------------ */

/* a slow travelling highlight along the top edge of the lead panels */
.panel.glow::before{
  background:linear-gradient(90deg,transparent,rgba(52,211,153,.5),transparent);
  background-size:42% 100%;background-repeat:no-repeat;
  animation:edge 5.5s linear infinite;
}
.panel.glow.gold::before{background-image:linear-gradient(90deg,transparent,rgba(245,183,76,.5),transparent);}
@keyframes edge{
  0%{background-position:-45% 0;}
  60%,100%{background-position:145% 0;}
}

/* tiles lift and their watermark drifts forward on hover */
.tile{transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);}
.tile:hover{transform:translateY(-3px);box-shadow:0 8px 24px -14px rgba(0,0,0,.9);}
.tile .wm{transition:transform .35s var(--ease),opacity .35s var(--ease);}
.tile:hover .wm{transform:scale(1.12) rotate(-6deg);opacity:.085;}

/* a number that has just been recalculated pulses once */
@keyframes flash{0%{color:var(--secondary);}100%{color:inherit;}}
.flash{animation:flash 1.1s var(--ease);}

/* skeleton shimmer for anything still loading */
.skel{position:relative;overflow:hidden;background:var(--surface-3);border-radius:var(--r-s);}
.skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  transform:translateX(-100%);animation:shimmer 1.3s linear infinite;}
@keyframes shimmer{to{transform:translateX(100%);}}
.skel-row{height:52px;margin-bottom:8px;}
.skel-tile{height:104px;}

/* level rows open with their own small stagger */
.glvl.open .gm{animation:gmIn .3s var(--ease) both;}
.glvl.open .gm:nth-child(1){animation-delay:.02s}
.glvl.open .gm:nth-child(2){animation-delay:.05s}
.glvl.open .gm:nth-child(3){animation-delay:.08s}
.glvl.open .gm:nth-child(4){animation-delay:.11s}
.glvl.open .gm:nth-child(5){animation-delay:.14s}
.glvl.open .gm:nth-child(n+6){animation-delay:.17s}
@keyframes gmIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

/* the pyramid bars grow from the left when the panel arrives */
.pyr-bar{animation:pyrIn .55s var(--ease) both;transform-origin:left;}
@keyframes pyrIn{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* progress meters fill rather than appear */
.mbar > i,.pkg-bar > i,.bar > i{animation:fill .7s var(--ease) both;transform-origin:left;}
@keyframes fill{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* rank shields settle in with a slight overshoot */
.rankcard .rc-b{animation:pop .45s cubic-bezier(.34,1.4,.5,1) both;}
.rankcard:nth-child(2) .rc-b{animation-delay:.04s}
.rankcard:nth-child(3) .rc-b{animation-delay:.08s}
.rankcard:nth-child(4) .rc-b{animation-delay:.12s}
.rankcard:nth-child(5) .rc-b{animation-delay:.16s}
.rankcard:nth-child(6) .rc-b{animation-delay:.2s}
.rankcard:nth-child(7) .rc-b{animation-delay:.24s}
.rankcard:nth-child(8) .rc-b{animation-delay:.28s}
@keyframes pop{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:none;}}

/* tier cards raise their number on hover */
.tiercard .tno{transition:.25s var(--ease);}
.tiercard:hover .tno{opacity:.3;transform:translateY(-2px) scale(1.06);}

/* buttons get a soft press */
.btn-fill,.segb.on{transition:transform .12s var(--ease),filter .15s var(--ease),box-shadow .2s var(--ease);}
.btn-fill:active:not(:disabled){transform:scale(.975);}

/* ------------------------------------------------------------
   Phone
   ------------------------------------------------------------ */
@media (max-width:900px){
  .seg{width:100%;}
  .segb{flex:1;justify-content:center;padding:10px 8px;}
  .btree{padding-left:16px;}
  .btree::before{left:6px;}
  .bwire{left:-10px;width:10px;}
  .bcard{flex-wrap:wrap;gap:10px 12px;padding:12px;}
  .bc-b{order:1;} .bc-id{order:2;flex:1;min-width:0;} .bc-go{order:3;}
  .bc-f{order:5;flex-basis:calc(33.333% - 8px);min-width:0;text-align:left;}
  .bc-sub{order:6;flex-basis:100%;min-width:0;text-align:left;
    padding-left:0;padding-top:9px;border-left:0;border-top:1px solid var(--outline-variant);}
  .bcard:not(:disabled):hover{transform:none;box-shadow:none;}
  .bfocus{gap:12px;padding:14px;}
  .bf-m{flex-basis:calc(50% - 6px);min-width:0;}
  .crumb{padding:8px 12px;font-size:12px;}
}
@media (max-width:400px){
  .bc-f{flex-basis:calc(50% - 6px);}
}

/* ------------------------------------------------------------
   Respect the setting
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .bnode,.bwire,.btree::before,.bfocus,.glvl.open .gm,
  .pyr-bar,.mbar > i,.pkg-bar > i,.bar > i,.rankcard .rc-b,
  .panel.glow::before,.skel::after,.flash{
    animation:none!important;
  }
  .bwire,.btree::before,.pyr-bar,.mbar > i,.pkg-bar > i,.bar > i{transform:none!important;}
  .bcard:hover,.tile:hover{transform:none!important;}
}

/* action buttons inside a feed row (operator queues) */
.frow-a{display:flex;gap:6px;flex:none;margin-left:10px;}
@media (max-width:900px){
  .frow-a{flex-basis:100%;margin-left:0;padding-top:10px;
    border-top:1px solid var(--outline-variant);}
  .frow-a .btn{flex:1;justify-content:center;}
  .fitem{flex-wrap:wrap;}
}