/* v70.2 — calibrated against real iOS status-bar screenshots supplied by the user.
   The reference screenshots contain the native iOS bar and Yappy's fake bar in
   the same image, so these values intentionally correct the measured size/gap
   deltas rather than merely "styling by feel". Inline DOM/SVG is retained so
   capture/export renders the exact same geometry as the live UI. */

/* Native bar insets: the right edge was already correct; the left cluster sat
   ~8 device pixels too far left in the supplied capture. */
.statusbar{
  padding-left:29px;
  padding-right:22px;
}
.statusbar .sb-time{
  gap:5px;
  font-weight:600;
}
.statusbar .sb-clock{
  letter-spacing:-.12px;
}

/* The real iOS right-side cluster is visibly roomier. In the same screenshot,
   Yappy's two inter-icon gaps were ~5–7 device px too tight. */
.statusbar .sb-icons,
.statusbar-editor-bar .sb-icons{
  gap:6.2px;
}

/* Focus glyphs: the previous 12.8px box rendered ~23 device px while the native
   crescent rendered ~33px. 18px restores the native optical scale; individual
   SVG artwork still determines each Focus icon's natural width. */
.sb-focus-indicator{
  width:18px;
  height:18px;
  flex:0 0 18px;
  transform:translateY(-.1px);
}
.sb-focus-svg{
  width:18px;
  height:18px;
  display:block;
  overflow:visible;
}
.sb-focus-svg.large{
  width:20px;
  height:20px;
}

/* Cellular bars: restore the native heavier proportions. */
.sb-cellular{
  width:18px;
  height:13px;
  flex:0 0 18px;
  justify-content:flex-start;
  gap:1.55px;
  transform:none;
}
.sb-cellular i{
  width:3px;
  border-radius:1.1px;
}
.sb-cellular i:nth-child(1){height:4px;}
.sb-cellular i:nth-child(2){height:7px;}
.sb-cellular i:nth-child(3){height:10px;}
.sb-cellular i:nth-child(4){height:13px;}
.sb-cellular i.off{opacity:.22;}

/* In the direct screenshot comparison the fake airplane was 32×26 device px
   versus ~38×34 native. These dimensions compensate that measured delta. */
.sb-airplane{
  width:20px;
  height:17.2px;
  flex:0 0 20px;
  transform:none;
}
.sb-airplane svg{
  width:20px;
  height:18px;
  display:block;
  overflow:visible;
}

/* Native Wi‑Fi measured ~42×31 device px versus ~36×26 in Yappy. Remove the
   previous downscale and give the filled fan its proper iOS footprint. */
.sb-wifi{
  width:20.5px;
  height:15.8px;
  flex:0 0 20.5px;
}
.sb-wifi svg{
  width:20.5px;
  height:16.4px;
  transform:none;
  display:block;
  overflow:visible;
}
.sb-wifi .off{opacity:.18;}

/* 4G / 5G should read like iOS status text, not a tiny badge. */
.sb-network-type{
  min-width:22px;
  height:15px;
  font-size:12.5px;
  line-height:15px;
  font-weight:500;
  letter-spacing:-.3px;
  margin-left:-.4px;
}

/* Battery: width was already essentially correct in the side-by-side capture,
   but it was ~17% too short and the percentage type was dramatically too small.
   Native reference body ~= 68×34 device px; the percentage glyph height ~=21px. */
.sb-battery{
  height:14.2px;
  transform:none;
}
.sb-battery-body{
  width:26.2px;
  height:14px;
  border-radius:4.1px;
}
.sb-battery-fill{
  border-radius:4.1px 2.2px 2.2px 4.1px;
}
.sb-battery-number{
  font-size:11.4px;
  line-height:1;
  font-weight:700;
  letter-spacing:-.65px;
}
.sb-battery-tip{
  width:1.55px;
  height:5.4px;
  margin-left:.8px;
  border-radius:0 1.7px 1.7px 0;
  opacity:.38;
}

/* Keep low-power / critical fills native-looking while preserving the larger
   percentage legibility. */
.sb-battery.is-low-power .sb-battery-fill{background:#ffd60a;}
.sb-battery.is-critical .sb-battery-fill{background:#ff453a;}

/* Editor preview uses exactly the same metrics as the exported/live status bar. */
.statusbar-editor-bar .sb-time{gap:5px;}

@media(max-width:360px){
  .statusbar{padding-left:27px;padding-right:20px;}
  .statusbar .sb-icons,
  .statusbar-editor-bar .sb-icons{gap:5.4px;}
  .sb-network-type{min-width:21px;font-size:12px;}
}