/* BUFF OS v151 — canonical app chrome and diagnostics */
.topbar {
  isolation: isolate;
}

.topbar .nav-actions {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  margin-left: auto;
}

.topbar .v42-moment {
  z-index: 3;
  overflow: hidden;
}

.topbar .v42-copy,
.topbar .v42-copy span {
  min-width: 0;
}

.v48-health-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}

.v48-health-button > span {
  display: grid;
  gap: 3px;
}

.v48-health-button strong {
  font-size: 15px;
}

.v48-health-button small {
  color: var(--txt2);
  font-size: 11px;
  font-weight: 600;
}

.v48-health-button > b {
  color: var(--gold);
  font-size: 22px;
}

.v48-health-sheet {
  z-index: 125;
}

.v48-health-hero {
  margin: -2px 0 18px;
  padding: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 0, rgba(var(--accent-rgb), 0.12), transparent 42%),
    var(--elev1);
}

.v48-health-hero small {
  display: block;
  color: var(--gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.v48-health-hero h3 {
  margin: 7px 0 5px;
  font-size: 24px;
}

.v48-health-hero p {
  color: var(--txt2);
  font-size: 12px;
  line-height: 1.45;
}

.v48-health-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 18px;
}

.v48-health-summary > div {
  min-width: 0;
  padding: 13px 6px;
  border: 1px solid var(--line2);
  border-radius: 16px;
  background: var(--elev1);
  text-align: center;
}

.v48-health-summary b,
.v48-health-summary span {
  display: block;
}

.v48-health-summary b {
  color: var(--gold);
  font-size: 19px;
}

.v48-health-summary span {
  margin-top: 3px;
  overflow: hidden;
  color: var(--txt2);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v48-health-list {
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--line2);
  border-radius: 20px;
  background: var(--elev1);
}

.v48-health-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 11px 14px;
  border-top: 1px solid var(--line2);
}

.v48-health-row:first-child {
  border-top: 0;
}

.v48-health-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--elev2);
  font-size: 13px;
}

.v48-health-copy {
  min-width: 0;
}

.v48-health-copy b,
.v48-health-copy span {
  display: block;
}

.v48-health-copy b {
  font-size: 13px;
}

.v48-health-copy span {
  margin-top: 3px;
  overflow: hidden;
  color: var(--txt2);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.v48-health-state {
  min-width: 54px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.v48-health-state.good {
  background: rgba(91, 185, 140, 0.12);
  color: #72d2a5;
}

.v48-health-state.warn {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--gold);
}

.v48-health-state.bad {
  background: rgba(232, 119, 107, 0.12);
  color: #ef9b92;
}

.v48-health-note {
  margin: 0 2px 16px;
  color: var(--txt3);
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 370px) {
  .v48-health-summary {
    grid-template-columns: 1fr;
  }
}

/* The bar blurs what is behind it; the controls sit ON it, so at 72% dark they
   were washing into their own background. Give them a solid ground and a real
   edge so they read at a glance instead of dissolving into the blur. */
.topbar .nav-actions .ver-pill,
.topbar .nav-actions .nav-ico,
.topbar .nav-actions button {
  background: rgba(30, 34, 43, .92) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.topbar .nav-actions .ver-pill:active,
.topbar .nav-actions button:active { background: rgba(44, 49, 60, .96) !important; }
/* and ease the blur itself so the whole strip is less hazy */
.topbar.scrolled {
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  background: rgba(11, 13, 18, .82) !important;
}

/* Bigger, easier targets. 32px and 36px controls tucked under the status bar are
   easy to miss and easy to mis-tap; 44px is the size a thumb actually hits. */
.topbar .nav-actions { gap: 10px !important; }
.topbar .nav-actions .iconbtn {
  width: 44px !important; height: 44px !important;
}
.topbar .nav-actions .iconbtn svg { width: 21px; height: 21px; }
.topbar .nav-actions .ver-pill {
  height: 44px !important; border-radius: 22px !important;
  padding: 0 15px !important; font-size: 12.5px !important; gap: 6px !important;
}
.topbar .nav-actions .ver-pill b { font-size: 13.5px; }

/* Scrolled, the bar has to fit the whole greeting AND the three controls. The
   date on the version pill is the one thing there that is not needed while you
   are reading, so it collapses and gives the name its room back. */
.topbar.scrolled .nav-actions .ver-pill span { display: none; }
.topbar.scrolled .nav-actions .ver-pill { padding: 0 13px !important; }
.topbar .nav-title { font-size: 16px !important; }