html[data-theme] .topbar .brand .wordmark {
  font-family: var(--bab-font-display);
  font-weight: 500;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  font-synthesis: none;
}

html[data-theme="jade"] .topbar .brand .wordmark { color: #e6d1ad; }
html[data-theme="ivory"] .topbar .brand .wordmark { color: #514239; }

@media (max-width: 350px) {
  html[data-theme] .topbar .brand .wordmark { font-size: 24px; letter-spacing: 1.6px; }
}


html[data-theme] .topbar .brand { gap: 12px; }
html[data-theme] .topbar .brand-mark {
  width: 42px; height: 42px; flex: 0 0 42px;
  overflow: visible; mix-blend-mode: normal;
}
html[data-theme] .topbar .brand-mark img {
  display: block; width: 42px; height: 42px;
  filter: none; opacity: 1; object-fit: contain;
}
html[data-theme] .topbar .brand .wordmark {
  display: block; width: 174px; height: 29px; line-height: 0;
}
html[data-theme] .topbar .wordmark img { display: block; width: 100%; height: 100%; }
html[data-theme="jade"] .topbar .wordmark img { filter: brightness(0) saturate(100%) invert(89%) sepia(15%) saturate(447%) hue-rotate(348deg) brightness(97%); }
html[data-theme="jade"] .topbar .brand-mark img { filter: brightness(1.4); }
@media (max-width: 350px) {
  html[data-theme] .topbar .brand { gap: 10px; }
  html[data-theme] .topbar .brand .wordmark { width: 158px; height: 26px; }
}

#main:focus, #dialog-title:focus { outline: none; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

html[data-theme] .topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
html[data-theme] .theme-toggle {
  width:44px; height:44px; flex:0 0 44px; padding:0;
  display:grid; place-items:center; border:1px solid var(--line); border-radius:50%;
  color:var(--ink); background:transparent; cursor:pointer;
  transition:background .18s, transform .18s;
}
html[data-theme] .theme-toggle span { font-size:24px; line-height:1; }
html[data-theme] .theme-toggle:hover { background:color-mix(in srgb,var(--ink) 6%,transparent); }
html[data-theme] .theme-toggle:active { transform:scale(.92); }
html[data-theme] .theme-toggle:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

html[data-theme] body .ambient::after {
  background-image:none;
  background-position:center top; background-size:auto 100%; background-repeat:no-repeat; opacity:.8;
}
html[data-theme="ivory"] body .ambient::after { opacity:.65; }
html[data-theme="ivory"][data-appearance="dark"] body .ambient::after { filter:invert(1) saturate(.15); opacity:.34; }

html[data-theme] body { isolation:isolate; }
html[data-theme] body .ambient { z-index:-1; }
html[data-theme] .topbar { background:transparent; }
html[data-theme] body,html[data-theme] .panel,html[data-theme] .access-hub,html[data-theme] .navigation { transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s; }
html[data-theme] .subscription-status { margin-bottom:16px; }
html[data-theme] .subscription-status h2 { font-size:14px; }
.usage-bars { display:grid; gap:17px; margin-top:20px; text-align:left; }
.usage-heading { display:flex; justify-content:space-between; gap:12px; align-items:baseline; font-size:11px; color:var(--muted); }
.usage-heading strong { color:var(--ink); font-size:13px; font-weight:550; font-variant-numeric:tabular-nums; }
.usage-track { appearance:none; display:block; width:100%; border:0; height:6px; border-radius:8px; margin:9px 0 6px; overflow:hidden; background:color-mix(in srgb,var(--muted) 15%,transparent); }
.usage-track::-webkit-progress-bar { background:color-mix(in srgb,var(--muted) 15%,transparent); border-radius:8px; }
.usage-track::-webkit-progress-value { border-radius:8px; background:linear-gradient(90deg,#9c8d74,#d5c7af); transition:width .5s ease; }
.usage-track::-moz-progress-bar { border-radius:8px; background:linear-gradient(90deg,#9c8d74,#d5c7af); }
.usage-item.data .usage-track::-webkit-progress-value { background:linear-gradient(90deg,#698a83,#9ebbb0); }
.usage-item.data .usage-track::-moz-progress-bar { background:linear-gradient(90deg,#698a83,#9ebbb0); }
.usage-track.unknown { background:repeating-linear-gradient(120deg,transparent,transparent 5px,color-mix(in srgb,var(--muted) 12%,transparent) 5px,color-mix(in srgb,var(--muted) 12%,transparent) 9px); }
.usage-item small { display:block; font-size:10px; line-height:1.55; color:var(--muted); }
.home-time-meter { margin:-12px 0 20px; }
.home-time-meter .usage-track { height:4px; }
.home-traffic-meter { margin:12px 0 0; text-align:left; }
.handoff-actions { display:grid; gap:10px; margin-bottom:22px; }
.handoff-device { display:flex; align-items:center; gap:12px; padding:15px 0; }
.handoff-steps { margin:10px 0 22px; padding-left:20px; color:var(--muted); font-size:13px; }
.handoff-steps li { padding:5px 0 5px 3px; }
.handoff-explainer h2 { font-size:16px; }
.handoff-explainer p { font-size:12px; }
.plan-sharing { font-size:11px; color:var(--muted); margin-top:16px; }
html[data-theme] .quote-total { min-height:46px; }
html[data-theme] .quote-total .price { display:inline-block; font-variant-numeric:tabular-nums; }
.price-pending { display:inline-block; font-size:13px; letter-spacing:0; color:var(--muted); vertical-align:middle; }
.price-pending::after { content:""; display:block; width:100%; height:3px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); margin-top:7px; animation:price-pulse 1.2s ease-in-out infinite alternate; }
html[data-theme] .period-card,html[data-theme] .chip { transition:background .25s,border-color .25s,box-shadow .25s,transform .18s; }
html[data-theme] .chip:active { transform:scale(.96); }
@keyframes meter-reveal { from { transform:scaleX(.15); opacity:.4; } to { transform:scaleX(1); opacity:1; } }
@keyframes price-pulse { from { opacity:.3; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { html[data-theme] .theme-toggle { transition:none; } }