/* ============================================================
   FlashDex — genealogy browser

   A downline is a list that can run to thousands of rows across
   twenty levels, so it is grouped by level and collapsed by default.
   Each level header carries its own totals, which means the numbers
   that matter are readable without opening anything.

   Four figures per member, and they are deliberately distinguished:
     deposit       their principal
     their ROI     what they earned
     you earned    what they paid YOU — highlighted, it is the one
                   column that is about the reader
     cap           how close their packages are to stopping
   ============================================================ */

.glevels{display:flex;flex-direction:column;gap:8px;}

/* ------------------------------------------------------------
   Level header
   ------------------------------------------------------------ */
.glvl{border:1px solid var(--outline-variant);border-radius:var(--r-m);
  background:var(--surface-3);overflow:hidden;}
.glvl.open{border-color:rgba(52,211,153,.26);}

.glvl-h{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:13px 15px;background:none;border:0;cursor:pointer;
  text-align:left;color:inherit;transition:background .15s var(--ease);
}
.glvl-h:hover{background:rgba(255,255,255,.025);}
.glvl-n{font:700 13px var(--mono);color:var(--secondary);min-width:34px;flex:none;}
.glvl-c{font-size:13px;color:var(--on-surface);min-width:104px;flex:none;}
.glvl-p{font:700 15px var(--font);min-width:46px;flex:none;font-variant-numeric:tabular-nums;}

.glvl-m{display:flex;flex-direction:column;gap:2px;min-width:96px;flex:none;}
.glvl-m em{font-style:normal;font:9.5px var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--outline);}
.glvl-m b{font:13px var(--mono);font-weight:500;font-variant-numeric:tabular-nums;}
/* the column about the reader gets the emphasis */
.glvl-m.hi{margin-left:auto;text-align:right;min-width:112px;}
.glvl-m.hi em{color:var(--primary);opacity:.8;}
.glvl-m.hi b{font-size:14.5px;}

.glvl-q{flex:none;}
.glvl-x{flex:none;color:var(--outline);transition:transform .22s var(--ease);}
.glvl.open .glvl-x{transform:rotate(180deg);color:var(--primary);}

/* ------------------------------------------------------------
   Level body
   ------------------------------------------------------------ */
.glvl-b{display:none;padding:0 12px 12px;}
.glvl.open .glvl-b{display:block;animation:glvlIn .22s var(--ease) both;}
@keyframes glvlIn{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}

/* ------------------------------------------------------------
   Member row
   ------------------------------------------------------------ */
.gm{
  display:flex;align-items:center;gap:13px;padding:11px 13px;min-width:0;
  border-radius:var(--r-s);border:1px solid transparent;
  background:var(--surface-2);margin-top:6px;transition:.15s var(--ease);
}
.gm:hover{border-color:var(--outline-variant);background:var(--surface);}
.gm-b{flex:none;display:grid;place-items:center;}
.gm-id{flex:1;min-width:104px;display:flex;flex-direction:column;gap:2px;}
.gm-id b{font:12.5px var(--mono);color:var(--primary);}
.gm-id em{font-style:normal;font:10px var(--mono);color:var(--outline);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.gm-f{display:flex;flex-direction:column;gap:2px;min-width:92px;flex:none;text-align:right;}
.gm-f em{font-style:normal;font:9.5px var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--outline);}
.gm-f b{font:12.5px var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:6px;justify-content:flex-end;}
.gm-f b i{font-style:normal;font-size:10px;color:var(--outline);}
.gm-f.hi em{color:var(--primary);opacity:.8;}
.gm-f.hi b{font-size:13.5px;}

.gm-cap{display:flex;flex-direction:column;gap:5px;min-width:82px;flex:none;}
.gm-cap em{font-style:normal;font:9.5px var(--mono);color:var(--outline);}
.gm-cap .mbar{height:4px;}

.gm-s{width:8px;height:8px;border-radius:50%;background:var(--outline-variant);flex:none;}
.gm-s.on{background:var(--tertiary);box-shadow:0 0 7px rgba(74,222,128,.55);}

/* ------------------------------------------------------------
   Phone: the header becomes two lines, the member row a card
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .glvl-h{flex-wrap:wrap;gap:8px 12px;padding:12px 13px;}
  .glvl-n{min-width:28px;}
  .glvl-c{min-width:0;flex:1;font-size:12.5px;}
  .glvl-p{min-width:0;font-size:14px;}
  .glvl-q,.glvl-x{order:3;}
  /* totals drop to their own row underneath */
  .glvl-m{flex-basis:calc(33.333% - 8px);min-width:0;order:5;}
  .glvl-m.hi{margin-left:0;text-align:left;min-width:0;}
  .glvl-m b{font-size:12px;}
  .glvl-m.hi b{font-size:13px;}

  .gm{flex-wrap:wrap;gap:10px 12px;padding:12px;}
  .gm-b{order:1;}
  .gm-id{order:2;flex:1;min-width:0;}
  .gm-s{order:3;}
  .gm-f{order:5;flex-basis:calc(33.333% - 8px);min-width:0;text-align:left;}
  .gm-f b{justify-content:flex-start;}
  .gm-cap{order:6;flex-basis:100%;min-width:0;}
  .gm-cap em{display:block;}
}

@media (max-width: 400px) {
  .glvl-m,.gm-f{flex-basis:calc(50% - 6px);}
}