/* Yappy Status Bar — iOS-faithful fake status bar + compact instant-save editor. */
.statusbar{
  pointer-events:auto;
  cursor:pointer;
}
.statusbar .sb-time,
.statusbar .sb-icons{
  position:relative;
  z-index:2;
}
.statusbar .sb-time{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.statusbar .sb-clock{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.15px;
}
.statusbar .sb-icons{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.yappy-dynamic-island{
  position:absolute;
  left:50%;
  top:8px;
  transform:translateX(-50%);
  width:118px;
  height:34px;
  border-radius:999px;
  background:#000;
  z-index:1;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  pointer-events:none;
}
html[data-yappy-island="off"] .yappy-dynamic-island,
html.no-statusbar .yappy-dynamic-island{display:none!important;}

/* The editable Yappy bar remains available in installed mode. Native iOS
   occupies the outer safe-area; Yappy's bar sits immediately below it. */
html[data-yappy-statusbar="on"]{--status-h:50px;}
html[data-yappy-statusbar="on"].app-standalone .statusbar{display:flex!important;}
html[data-yappy-statusbar="off"]{--status-h:0px;}
html[data-yappy-statusbar="off"] .statusbar{display:none!important;}
@media(display-mode:standalone){
  html[data-yappy-statusbar="on"]{--status-h:50px!important;}
  html[data-yappy-statusbar="on"] #statusbar.statusbar{display:flex!important;}
  html[data-yappy-statusbar="off"]{--status-h:0px!important;}
  html[data-yappy-statusbar="off"] #statusbar.statusbar{display:none!important;}
}

/* Focus glyph beside the clock. SVG stays inline so html2canvas exports it faithfully. */
.sb-focus-indicator{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 14px;
}
.sb-focus-svg{width:14px;height:14px;display:block;overflow:visible;}
.sb-focus-svg.large{width:20px;height:20px;}

/* iOS cellular bars: narrow, rounded, ascending four-step stack. */
.sb-cellular{
  width:18px;
  height:13px;
  display:inline-flex;
  align-items:flex-end;
  justify-content:space-between;
  flex:0 0 18px;
}
.sb-cellular i{
  display:block;
  width:3px;
  border-radius:1.2px;
  background:currentColor;
}
.sb-cellular i:nth-child(1){height:4px;}
.sb-cellular i:nth-child(2){height:6.6px;}
.sb-cellular i:nth-child(3){height:9.7px;}
.sb-cellular i:nth-child(4){height:13px;}
.sb-cellular i.off{opacity:.22;}
.sb-cellular i.on{opacity:1;}

/* Airplane glyph mirrors the compact iOS silhouette. */
.sb-airplane{
  width:19px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 19px;
}
.sb-airplane svg{width:19px;height:17px;display:block;overflow:visible;}

/* Filled iOS-style Wi-Fi fan rather than generic stroked arcs. */
.sb-wifi{
  width:20px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 20px;
}
.sb-wifi svg{width:20px;height:16px;display:block;overflow:visible;}
.sb-wifi .off{opacity:.18;}
.sb-wifi .on{opacity:1;}

.sb-network-type{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:21px;
  height:14px;
  font-size:12px;
  line-height:14px;
  font-weight:500;
  letter-spacing:-.25px;
  margin-left:-1px;
  white-space:nowrap;
}

/* Modern iOS percentage battery: rounded filled body, tiny cap, percentage over it. */
.sb-battery{
  height:14px;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  position:relative;
}
.sb-battery-body{
  width:28px;
  height:13px;
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:4px;
  background:rgba(127,127,127,.38);
}
.sb-battery-fill{
  position:absolute;
  inset:0 auto 0 0;
  min-width:0;
  max-width:100%;
  border-radius:4px 2px 2px 4px;
  background:currentColor;
}
.sb-battery-number{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  font-size:8px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.45px;
  font-variant-numeric:tabular-nums;
}
.sb-battery-tip{
  width:1.8px;
  height:5.5px;
  margin-left:1px;
  border-radius:0 2px 2px 0;
  background:currentColor;
  opacity:.35;
}
:root[data-theme="dark"] .sb-battery:not(.is-low-power):not(.is-critical) .sb-battery-body{background:rgba(255,255,255,.36);}
:root[data-theme="dark"] .sb-battery:not(.is-low-power):not(.is-critical) .sb-battery-fill{background:#f7f7f7;}
:root[data-theme="dark"] .sb-battery:not(.is-low-power):not(.is-critical) .sb-battery-number{color:#151515;}
:root[data-theme="light"] .sb-battery:not(.is-low-power):not(.is-critical) .sb-battery-body{background:rgba(0,0,0,.25);}
:root[data-theme="light"] .sb-battery:not(.is-low-power):not(.is-critical) .sb-battery-fill{background:#111;}
:root[data-theme="light"] .sb-battery:not(.is-low-power):not(.is-critical) .sb-battery-number{color:#fff;}
.sb-battery.is-low-power .sb-battery-body{background:rgba(127,127,127,.36);}
.sb-battery.is-low-power .sb-battery-fill{background:#ffd60a;}
.sb-battery.is-low-power .sb-battery-number{color:#151515!important;}
.sb-battery.is-low-power .sb-battery-tip{background:#8e8e93;color:#8e8e93;opacity:.65;}
.sb-battery.is-critical .sb-battery-body{background:rgba(127,127,127,.34);}
.sb-battery.is-critical .sb-battery-fill{background:#ff453a;}
.sb-battery.is-critical .sb-battery-number{color:#fff!important;}
.sb-battery.is-critical .sb-battery-tip{background:#8e8e93;color:#8e8e93;opacity:.65;}

.statusbar-settings .statusbar-time-preview{
  font-variant-numeric:tabular-nums;
  color:var(--text-sub);
}
.statusbar-settings .statusbar-subrow[hidden]{display:none!important;}
.statusbar-settings .info-row-copy{min-width:0;flex:1;}
.statusbar-settings .info-row-copy small{
  display:block;
  color:var(--text-sub);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
}

/* Live preview uses the exact same status glyph DOM/CSS as the actual fake bar. */
.statusbar-editor-preview{
  height:58px;
  border:.5px solid var(--divider);
  border-radius:18px;
  background:var(--card-bg);
  margin:2px 0 8px;
  padding:0 16px;
  color:var(--text-main);
  overflow:hidden;
}
.statusbar-editor-bar{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  font-size:15px;
  font-weight:650;
}
.statusbar-editor-bar .sb-time,
.statusbar-editor-bar .sb-icons{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
}
.statusbar-editor-bar .sb-time{gap:5px;}
.statusbar-editor-bar .sb-icons{gap:5px;}
.statusbar-preview-island{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:92px;
  height:27px;
  border-radius:999px;
  background:#000;
  z-index:1;
}
.statusbar-instant-note{
  padding:0 2px 10px;
  margin:0;
  text-align:center;
  font-size:12px;
}

/* Compact, uniform editor rows — no oversized timestamp field. */
.statusbar-editor-card{
  margin:0;
  overflow:hidden;
  border-radius:14px;
}
.statusbar-editor-card .settings-item{
  min-height:50px;
  gap:12px;
}
.statusbar-editor-card .settings-item+.settings-item{
  border-top:.5px solid var(--divider);
}
.statusbar-control-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.statusbar-control-row[hidden]{display:none!important;}
.statusbar-control-row .si-label{
  flex:1;
  min-width:0;
}
.statusbar-compact-input,
.statusbar-compact-select,
.statusbar-battery-field{
  box-sizing:border-box;
  height:34px;
  border:.5px solid var(--input-border);
  border-radius:9px;
  background:rgba(118,118,128,.10);
  color:var(--text-main);
  font:inherit;
  font-size:14px;
}
.statusbar-compact-input{
  width:112px;
  padding:0 10px;
  text-align:center;
  font-variant-numeric:tabular-nums;
  outline:none;
}
.statusbar-compact-select{
  width:142px;
  padding:0 30px 0 10px;
  appearance:auto;
  -webkit-appearance:menulist;
  outline:none;
}
.statusbar-focus-select{width:178px;max-width:48vw;}
.statusbar-level-select{width:102px;}
.statusbar-battery-field{
  width:84px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px;
  align-items:center;
  overflow:hidden;
}
.statusbar-battery-field input{
  width:100%;
  min-width:0;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text-main);
  font:inherit;
  font-size:14px;
  text-align:center;
  appearance:textfield;
  -moz-appearance:textfield;
}
.statusbar-battery-field input::-webkit-outer-spin-button,
.statusbar-battery-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.statusbar-battery-field>span{
  height:100%;
  display:grid;
  place-items:center;
  color:var(--text-sub);
  border-left:.5px solid var(--divider);
  font-size:12px;
  font-weight:600;
}
.statusbar-editor-note{
  padding:10px 2px 12px;
  margin:0;
  line-height:1.35;
}

@media(max-width:380px){
  .statusbar-editor-preview{padding-left:11px;padding-right:11px;}
  .statusbar-preview-island{width:78px;}
  .statusbar-focus-select{width:150px;max-width:46vw;}
  .statusbar-compact-select{width:122px;}
  .statusbar-level-select{width:92px;}
  .statusbar-compact-input{width:100px;}
}
@media(prefers-reduced-motion:reduce){
  .sb-cellular i{transition:none;}
}

/* v35.8 — native hour/minute selectors. On iOS these open the system wheel picker. */
.statusbar-time-pair{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
}
.statusbar-time-select{
  width:58px;
  height:34px;
  box-sizing:border-box;
  border:.5px solid var(--input-border);
  border-radius:9px;
  background:rgba(118,118,128,.10);
  color:var(--text-main);
  font:inherit;
  font-size:14px;
  font-variant-numeric:tabular-nums;
  text-align:center;
  text-align-last:center;
  padding:0 4px;
  outline:none;
  appearance:auto;
  -webkit-appearance:menulist;
}
.statusbar-time-colon{
  font-size:16px;
  font-weight:700;
  color:var(--text-main);
  transform:translateY(-1px);
}
@media(max-width:380px){
  .statusbar-time-select{width:54px}
}