/* v71 — reference-matched iOS status bar sizing from native screenshots.
   Uses clamped dimensions so proportions remain stable on small and large phones. */

.statusbar{
  padding-left:clamp(27px,7.25vw,30px);
  padding-right:clamp(20px,5.3vw,22px);
  font-size:clamp(15px,4vw,16px);
}
.statusbar .sb-time,
.statusbar-editor-bar .sb-time{
  gap:clamp(4.5px,1.2vw,5px);
}
.statusbar .sb-icons,
.statusbar-editor-bar .sb-icons{
  gap:clamp(5.5px,1.55vw,6.5px);
}
.statusbar .sb-clock{
  font-weight:600;
  letter-spacing:-.2px;
}

/* Focus glyphs match the optical size of the native icons beside the clock. */
.sb-focus-indicator{
  width:clamp(17px,4.6vw,19px);
  height:clamp(17px,4.6vw,19px);
  flex-basis:clamp(17px,4.6vw,19px);
  transform:translateY(-.1px);
}
.sb-focus-svg,
.sb-focus-svg-v71{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.sb-focus-indicator[title="Sleep"]{
  width:clamp(19px,5.15vw,21px);
  flex-basis:clamp(19px,5.15vw,21px);
}
.sb-focus-indicator[title="Work"]{
  width:clamp(16px,4.35vw,18px);
  flex-basis:clamp(16px,4.35vw,18px);
  height:clamp(18px,4.8vw,20px);
}
.sb-focus-indicator[title="Reduce Interruptions"]{
  width:clamp(19px,5.15vw,21px);
  height:clamp(19px,5.15vw,21px);
  flex-basis:clamp(19px,5.15vw,21px);
}

/* Right-side native cluster. */
.sb-cellular{
  width:clamp(18px,4.85vw,20px);
  height:clamp(13px,3.45vw,14px);
  flex-basis:clamp(18px,4.85vw,20px);
  gap:clamp(1.5px,.4vw,1.7px);
}
.sb-cellular i{
  width:clamp(3px,.8vw,3.2px);
  border-radius:1.15px;
}
.sb-cellular i:nth-child(1){height:31%;}
.sb-cellular i:nth-child(2){height:54%;}
.sb-cellular i:nth-child(3){height:77%;}
.sb-cellular i:nth-child(4){height:100%;}

.sb-airplane{
  width:clamp(21px,5.65vw,23.5px);
  height:clamp(18px,4.85vw,20px);
  flex-basis:clamp(21px,5.65vw,23.5px);
}
.sb-airplane svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

.sb-wifi{
  width:clamp(21px,5.65vw,23.5px);
  height:clamp(16px,4.25vw,17.5px);
  flex-basis:clamp(21px,5.65vw,23.5px);
}
.sb-wifi svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

.sb-network-type{
  min-width:clamp(22px,5.9vw,24px);
  height:clamp(15px,4vw,16px);
  font-size:clamp(12.5px,3.35vw,13.5px);
  line-height:1;
  font-weight:500;
  letter-spacing:-.35px;
  margin-left:-.2px;
}

/* Percentage-on battery follows modern iOS: filled capsule, large centered number. */
.sb-battery{
  height:clamp(14px,3.75vw,15.5px);
  transform:none;
}
.sb-battery-body{
  width:clamp(27px,7.15vw,29.5px);
  height:clamp(14px,3.7vw,15.3px);
  border-radius:clamp(4px,1.05vw,4.4px);
}
.sb-battery-number{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Inter",Arial,sans-serif;
  font-size:clamp(10.8px,2.95vw,12px);
  line-height:1;
  font-weight:700;
  /* Battery percentage in iOS uses proportional-looking numerals. The old
     inherited tabular numerals gave the narrow "1" a full-width digit cell,
     making 100 read optically like "1 00". */
  font-variant-numeric:proportional-nums;
  font-feature-settings:"pnum" 1,"tnum" 0;
  letter-spacing:-.62px;
  text-align:center;
}
.sb-battery-tip{
  width:clamp(1.5px,.42vw,1.8px);
  height:clamp(5.3px,1.4vw,5.8px);
  margin-left:.8px;
}

/* Optional classic battery icon with no number. */
html[data-yappy-battery-percent="off"] .sb-battery-body{
  width:clamp(24px,6.45vw,26.5px);
  height:clamp(12px,3.2vw,13px);
  background:transparent!important;
  border:1.25px solid currentColor;
  border-radius:3.2px;
  overflow:hidden;
}
html[data-yappy-battery-percent="off"] .sb-battery-fill{
  top:1.5px;
  bottom:1.5px;
  left:1.5px;
  height:auto;
  max-width:calc(100% - 3px);
  border-radius:1.6px;
  background:currentColor!important;
}
html[data-yappy-battery-percent="off"] .sb-battery-number{
  display:none!important;
}
html[data-yappy-battery-percent="off"] .sb-battery-tip{
  opacity:.42;
  background:currentColor!important;
}
html[data-yappy-battery-percent="off"] .sb-battery.is-low-power .sb-battery-fill{background:#ffd60a!important;}
html[data-yappy-battery-percent="off"] .sb-battery.is-critical .sb-battery-fill{background:#ff453a!important;}

/* Editor preview follows the same geometry, but doesn't inherit page-edge insets. */
.statusbar-editor-bar{
  font-size:clamp(14px,3.85vw,15px);
}

@media(max-width:350px){
  .statusbar{padding-left:25px;padding-right:18px;}
  .statusbar .sb-icons,
  .statusbar-editor-bar .sb-icons{gap:5px;}
}