/* myBudgie v1.1.22: neutral status bar, brand lighting, and subcategory charts */
:root{
  --status-neutral-dark:#0b0f14;
  --status-neutral-light:#f3f5f6;
}
.app-header-bird{
  display:none!important;
}
body[data-active-view="home"] .app-header-brand{
  display:none!important;
}
body:not([data-active-view="home"]) .app-header-brand{
  justify-content:center!important;
}
.app-header{
  background:rgba(243,245,246,.72)!important;
}
html[data-theme="dark"] .app-header{
  background:rgba(11,15,20,.72)!important;
}
.topbar h1{
  position:relative;
  display:block;
  min-height:clamp(54px,9vw,92px);
}
.topbar h1 .hero-wordmark{
  display:none!important;
}
.topbar h1::after{
  content:"myBudgie";
  display:inline-block;
  font-family:"Arial Rounded MT Bold","Nunito",Arial,sans-serif;
  font-size:clamp(44px,11vw,82px);
  font-weight:900;
  line-height:1;
  letter-spacing:0;
  color:transparent;
  background:
    linear-gradient(105deg,
      color-mix(in srgb,#ffffff,var(--accent) 10%) 0%,
      color-mix(in srgb,var(--accent),#ffffff 58%) 34%,
      color-mix(in srgb,#dcecf6,var(--accent) 22%) 50%,
      color-mix(in srgb,#ffffff,var(--accent) 8%) 66%,
      color-mix(in srgb,#bdd8e8,var(--accent) 18%) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.28);
  animation:brandInnerLight 13s ease-in-out infinite alternate;
}
html[data-theme="light"] .topbar h1::after{
  background:
    linear-gradient(105deg,
      #0f2938 0%,
      color-mix(in srgb,var(--accent),#18394b 58%) 40%,
      #214f64 58%,
      color-mix(in srgb,#0f2938,var(--accent) 14%) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 2px 8px rgba(10,28,42,.16);
}
.topbar .subtitle{
  display:inline-block;
  color:rgba(255,255,255,.92)!important;
  background:linear-gradient(105deg,
    currentColor 0%,
    color-mix(in srgb,currentColor,var(--accent) 28%) 45%,
    currentColor 100%);
  background-size:180% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 2px 10px rgba(0,0,0,.42)!important;
  animation:brandInnerLight 16s ease-in-out infinite alternate;
}
html[data-theme="light"] .topbar .subtitle{
  color:rgba(255,255,255,.92)!important;
  text-shadow:0 2px 10px rgba(0,0,0,.38)!important;
}
@keyframes brandInnerLight{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}
@media(prefers-reduced-motion:reduce){
  .topbar h1::after,
  .topbar .subtitle{
    animation:none!important;
    background-position:58% 50%!important;
  }
}
.app-launch-screen{
  background:linear-gradient(180deg,#f3f5f6 0%,#e8eef2 100%)!important;
}
html[data-theme="dark"] .app-launch-screen{
  background:linear-gradient(180deg,#0b0f14 0%,#101923 100%)!important;
}
.launch-card{
  min-height:min(66vh,560px)!important;
}
.launch-budgie-full{
  width:clamp(176px,42vw,282px)!important;
  max-height:min(42vh,340px)!important;
  object-fit:contain!important;
  object-position:center!important;
}
.subcategory-breakdown{
  margin-block-start:18px;
  padding-block-start:16px;
  border-block-start:1px solid color-mix(in srgb,var(--color-border),transparent 28%);
  --subcategory-accent:var(--accent);
}
.subcategory-breakdown.needs{--subcategory-accent:var(--donut-needs)}
.subcategory-breakdown.wants{--subcategory-accent:var(--donut-wants)}
.subcategory-breakdown.savings{--subcategory-accent:var(--donut-savings)}
.subcategory-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-block-end:10px;
}
.subcategory-head h3{
  margin:0;
  font-size:15px;
  color:var(--color-text-primary);
}
.subcategory-head span{
  color:var(--color-text-secondary);
  font-size:13px;
}
.subcategory-bars{
  display:grid;
  gap:9px;
}
.subchart-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px 10px;
  inline-size:100%;
  min-height:52px;
  padding:10px 11px;
  border:1px solid color-mix(in srgb,var(--subcategory-accent),var(--color-border) 72%);
  border-radius:12px;
  background:color-mix(in srgb,var(--subcategory-accent),var(--color-card) 94%);
  color:var(--color-text-primary);
  text-align:start;
  box-shadow:none;
  transition:border-color 140ms ease,background-color 140ms ease,box-shadow 140ms ease;
}
.subchart-row:hover,
.subchart-row.active{
  border-color:color-mix(in srgb,var(--subcategory-accent),var(--color-border) 34%);
  background:color-mix(in srgb,var(--subcategory-accent),var(--color-card) 88%);
  box-shadow:0 8px 18px color-mix(in srgb,var(--subcategory-accent),transparent 91%);
}
.subcategory-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:800;
}
.subcategory-values{
  display:flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.subcategory-values em{
  font-style:normal;
  color:var(--color-text-secondary);
  font-size:12px;
}
.subcategory-track{
  grid-column:1 / -1;
  display:block;
  block-size:8px;
  border-radius:999px;
  overflow:hidden;
  background:color-mix(in srgb,var(--subcategory-accent),transparent 88%);
  direction:rtl;
}
.subcategory-track i{
  display:block;
  block-size:100%;
  border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--subcategory-accent),#ffffff 18%),
    var(--subcategory-accent));
}
.subcategory-detail{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-block-start:10px;
  padding:10px 11px;
  border-radius:12px;
  background:color-mix(in srgb,var(--subcategory-accent),transparent 90%);
  color:var(--color-text-primary);
}
.subcategory-detail span{
  color:var(--color-text-secondary);
  font-size:13px;
  text-align:end;
}
.subcategory-empty{
  padding:12px;
}
@media(max-width:460px){
  .subchart-row{
    grid-template-columns:1fr;
  }
  .subcategory-values{
    justify-content:space-between;
  }
  .subcategory-detail{
    align-items:flex-start;
    flex-direction:column;
  }
  .topbar h1{
    min-height:48px;
  }
  .topbar h1::after{
    font-size:clamp(38px,13vw,58px);
  }
}