/* myBudgie v1.1.28: Landing entry, clean Home, and single month navigation */

.topbar.view:not(.active){
  display:none!important;
}

.landing-page.topbar.active{
  position:relative!important;
  isolation:isolate;
  display:grid!important;
  align-content:start!important;
  min-block-size:100svh!important;
  width:100%!important;
  margin:0!important;
  padding:calc(env(safe-area-inset-top) + clamp(34px,6vh,62px)) clamp(16px,5vw,42px) calc(env(safe-area-inset-bottom) + 28px)!important;
  overflow:hidden;
  border:0!important;
  box-shadow:none!important;
  background:
    linear-gradient(180deg,rgba(4,12,20,.06) 0%,rgba(4,12,20,.08) 44%,var(--color-page,#f3f5f6) 91%),
    url("assets/city-horizon.jpg") center/cover no-repeat!important;
}

html[data-theme="dark"] .landing-page.topbar.active{
  background:
    linear-gradient(180deg,rgba(4,10,18,.12) 0%,rgba(4,10,18,.18) 42%,#0b0f14 93%),
    url("assets/city-horizon.jpg") 58% center/cover no-repeat!important;
}

html[data-theme="light"] .landing-page.topbar.active{
  background:
    linear-gradient(180deg,rgba(242,247,249,.05) 0%,rgba(242,247,249,.12) 48%,#f3f5f6 92%),
    url("assets/city-horizon.jpg") 58% center/cover no-repeat!important;
}

.landing-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent 48%,rgba(0,0,0,.12) 66%,var(--color-page,#f3f5f6) 96%);
}

html[data-theme="dark"] .landing-page::before{
  background:linear-gradient(180deg,transparent 0%,transparent 48%,rgba(6,12,20,.28) 70%,#0b0f14 98%);
}

.landing-brand-area{
  justify-self:start!important;
  inline-size:min(640px,calc(100% - 8px))!important;
  margin-inline-start:0!important;
  margin-inline-end:auto!important;
  display:grid;
  justify-items:start!important;
  text-align:start!important;
}

.landing-page .hero-brand-lockup{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:clamp(7px,1.9vw,13px)!important;
  margin:0!important;
  max-inline-size:100%;
}

.landing-page .hero-brand-budgie{
  inline-size:clamp(48px,13vw,78px)!important;
  block-size:auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.18));
}

.landing-page .hero-brand-name{
  font-size:clamp(2.05rem,13vw,4.35rem)!important;
  line-height:.96!important;
  white-space:nowrap!important;
  max-inline-size:calc(100vw - 104px);
}

.landing-page .subtitle{
  margin:.48rem 0 0!important;
  max-inline-size:min(31rem,calc(100vw - 48px))!important;
  text-align:start!important;
  font-size:clamp(.95rem,3.7vw,1.18rem)!important;
  line-height:1.55!important;
}

.landing-page .kicker{
  margin:.42rem 0 0!important;
  opacity:.72;
  font-size:.82rem!important;
}

.landing-entry-panel{
  justify-self:center;
  align-self:end;
  width:min(680px,100%);
  margin-block-start:clamp(138px,33vh,260px);
  display:grid;
  gap:12px;
}

.landing-action-group.quick-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(7px,2vw,12px)!important;
  margin:0!important;
}

.landing-action-group .quick-card{
  min-width:0!important;
  min-height:clamp(68px,15vw,86px)!important;
  padding:clamp(10px,3vw,15px) clamp(8px,2.4vw,14px)!important;
  border-radius:14px!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 16px 32px rgba(0,0,0,.16)!important;
}

.landing-action-group .quick-card.selected,
.landing-action-group .quick-card:focus-visible{
  border-color:color-mix(in srgb,var(--accent),#fff 34%)!important;
  box-shadow:0 18px 34px rgba(0,0,0,.18),0 0 0 3px color-mix(in srgb,var(--accent),transparent 74%)!important;
}

.landing-action-group .quick-card strong{
  font-size:clamp(.86rem,3.5vw,1rem)!important;
}

.landing-action-group .quick-card small{
  font-size:clamp(.68rem,2.7vw,.78rem)!important;
  line-height:1.25!important;
}

.landing-home-link{
  justify-self:center;
  min-height:44px;
  border:1px solid color-mix(in srgb,var(--accent),transparent 62%)!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--color-card,#fff),transparent 18%)!important;
  color:var(--color-text-primary,#14212b)!important;
  padding-inline:22px!important;
  box-shadow:0 10px 24px rgba(0,0,0,.10)!important;
}

html[data-theme="dark"] .landing-home-link{
  background:rgba(11,18,28,.58)!important;
  color:#eef6fb!important;
}

.landing-form-host{
  display:grid;
  gap:0;
}

.landing-form-host:empty{
  display:none;
}

.landing-form-host .panel{
  margin:0!important;
  max-height:calc(100svh - 116px);
  overflow:auto;
  border-radius:18px!important;
  animation:landingFormReveal .22s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes landingFormReveal{
  from{opacity:0;transform:translateY(-10px);filter:blur(3px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

body[data-active-view="landing"] .app-header,
body[data-active-view="landing"] .floating-month-nav{
  display:none!important;
}

body[data-active-view="landing"] main{
  display:none!important;
}

.app-header{
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
}

.app-header .hamburger-button{
  justify-self:start!important;
}

.app-header-wordmark{
  justify-self:end;
  direction:ltr;
  font-weight:850;
  letter-spacing:0;
  color:var(--color-text-primary,#14212b);
  font-size:clamp(1rem,4.2vw,1.2rem);
  white-space:nowrap;
}

html[data-theme="dark"] .app-header-wordmark{
  color:#f3f8fb;
}

.app-drawer .drawer-head{
  justify-content:flex-start!important;
  padding-block:0 10px!important;
  margin-bottom:8px!important;
}

.app-drawer .drawer-close{
  margin-inline-start:auto;
}

body[data-active-view="home"] main{
  padding-block-start:calc(var(--app-header-total-height,62px) + 76px)!important;
}

body[data-active-view="home"] #home{
  padding-block-start:0!important;
}

body[data-active-view="home"] .home-sync-summary{
  margin-block-start:0!important;
}

body[data-active-view="home"] .home-action-group{
  display:none!important;
}

.floating-month-nav{
  pointer-events:none;
}

.floating-month-nav.visible{
  pointer-events:auto!important;
}

.floating-month-nav.visible .month-picker{
  pointer-events:auto!important;
  cursor:pointer!important;
}

.floating-month-nav.visible .month-picker:active{
  transform:translateY(1px);
}

@media(max-width:430px){
  .landing-page.topbar.active{
    background-position:60% center!important;
    padding-inline:14px!important;
  }
  .landing-entry-panel{
    margin-block-start:clamp(120px,30vh,210px);
  }
  .landing-action-group.quick-actions{
    gap:6px!important;
  }
}

@media(max-width:340px){
  .landing-page .hero-brand-name{
    font-size:1.92rem!important;
  }
  .landing-page .hero-brand-budgie{
    inline-size:43px!important;
  }
  .landing-action-group .quick-card{
    padding-inline:6px!important;
  }
  .landing-action-group .quick-card span{
    font-size:1.15rem!important;
  }
}

@media(max-height:560px) and (orientation:landscape){
  .landing-page.topbar.active{
    min-block-size:100svh!important;
    padding-block-start:calc(env(safe-area-inset-top) + 18px)!important;
    grid-template-columns:minmax(0,.92fr) minmax(300px,1fr);
    align-items:center!important;
    gap:18px;
  }
  .landing-entry-panel{
    margin-block-start:0;
    align-self:center;
  }
}

@media(prefers-reduced-motion:reduce){
  .landing-form-host .panel{
    animation:none!important;
  }
}