
/* Metrics widget — SMALL
 * Fonts aligned with Weather forecast numbers.
 * Geometry-only changes elsewhere.
 */

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:transparent;
  overflow:hidden;
}

body{
  position:relative;
  display:flex;
}

#root{
  width:100%;
  height:100%;
  min-height:100%;
  position:relative;
  flex:1 1 auto;
}

body{
  color:var(--text-color, #e6e6e6);
  --neon:#31e6ff;
  --bg-alpha:0.06;
  --bg-color:var(--neon);
  --text-color:#e6e6e6;

  --bar-track:rgba(255,255,255,.22);
  --bar-fill:var(--neon);

  /* Font sizes (match Weather forecast numbers) */
  --fs-num: 16px;
  --fs-lbl: 14px;
  --num-col-width: 6ch;
  --g: 6px;
  --bar-h: 14px;
  --g2: 0px;
}

#root{
  display:grid;
  align-items:stretch;
  position:relative;
}

#root::before{
  content:"";
  position:absolute;
  inset:0;
  background:color-mix(in srgb, var(--bg-color) calc(var(--bg-alpha) * 100%), transparent);
  border-radius:10px;
  pointer-events:none;
  z-index:0;
}

#grid{
  width:100%;
  box-sizing:border-box;
  padding:8px;
  display:grid;
  grid-auto-rows:min-content;
  row-gap:2px;
  align-content:center;
  height:100%;
  min-height:100%;
  position:relative;
  z-index:1;
}
.meta{
  position:absolute;
  left:8px;
  font-size:12px;
  font-weight:500;
  letter-spacing:0;
  color:#f5f6f8;
  opacity:1;
  z-index:1;
  pointer-events:none;
}
.meta-top{top:8px;}
.meta-bottom{bottom:8px;}

body.size-small{
  --g:6px;
  --bar-h:14px;
  --g2:0px;
}

.row{
  display:grid;
  grid-template-columns:4.2ch var(--g) minmax(0,1fr) var(--g2) var(--num-width,var(--num-col-width));
  align-items:center;
}
.row.row-net{
  grid-template-rows:repeat(2,min-content);
  row-gap:2px;
}
.row.row-net [data-dir="in"]{grid-row:1;}
.row.row-net [data-dir="out"]{grid-row:2;}
.row .lbl{grid-column:1; padding-left:4px;}
.row.row-net .lbl{letter-spacing:normal;}
.row .lane{grid-column:3;min-width:0;}
.row .nums{grid-column:5; justify-self:end; text-align:right; min-width:var(--num-col-width);}

.lane-bat{display:block;}
.bat-icon{
  font-size:12px;
  color:#ffc35a;
  opacity:1;
  line-height:1;
  display:inline-block;
  margin-left:2px;
  transform: translateY(-1px);
}

.lbl{
  white-space:nowrap;
  font-size:12px;
  font-weight:500;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
  opacity:.72;
}

.nums{
  text-align:right;
  white-space:nowrap;
  font-size:var(--fs-lbl);
  font-weight:normal;
  font-variant-numeric:normal;
  opacity:.9;
  min-width:var(--num-col-width);
  justify-self:end;
}

.nums-net{
  display:grid;
  justify-items:end;
  row-gap:2px;
}

.track{
  position:relative;
  height:var(--bar-h);
  background:var(--bar-track);
  border-radius:999px;
  overflow:hidden;
}

.bar{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:calc(var(--p,0)*100%);
  background:var(--bar-fill);
  border-radius:999px;
}
.bar-now{opacity:0.72;}
.bar-decay{opacity:.5;}
.bar-ghost{opacity:.24;}
.edge{
  display:none;
}

.lane-net .netlane{display:grid;grid-template-columns:auto 1fr auto;column-gap:var(--g);align-items:center;}
.nettrack{display:grid;grid-template-columns:1fr auto 1fr;height:var(--bar-h);}
.net-zero{width:2px;background:currentColor;opacity:.45}
.net-half{position:relative;overflow:hidden;}
.net-left .bar{left:auto;right:0}
