/* =======================================================================
   YEKFI v8.4.1 — REAL DEVICE PRECISION FIX
   Based on iPhone Safari field screenshots.
   Scope: header geometry, header/content collision, visible brand assets,
   mobile identity hierarchy. No planning/business semantics.
   ======================================================================= */

:root{
  --yi-header-base:84px;
  --yi-header-total:calc(var(--yi-header-base) + env(safe-area-inset-top));
}

/* ---------- FIX 1: HEADER / CONTENT COLLISION ----------
   v8.4.0 presentation layer accidentally replaced the v8.3 top compensation
   with padding-top:14px. The fixed header therefore covered hero headlines.
*/
body.yekfi-signature .topbar{
  height:var(--yi-header-total)!important;
  min-height:var(--yi-header-total)!important;
  padding:max(8px,env(safe-area-inset-top)) 12px 9px!important;

  /* Force physical order on RTL browsers:
     left: menu | budget | free space / brand anchored on the RIGHT. */
  direction:ltr!important;
  grid-template-columns:42px 118px minmax(0,1fr)!important;
  grid-template-areas:"menu budget brand"!important;
  gap:7px!important;
  align-items:center!important;
}
body.yekfi-signature .topbar>.round-icon{
  grid-area:menu!important;
  justify-self:start!important;
}
body.yekfi-signature .topbar>.topbar-actions{
  grid-area:budget!important;
  justify-self:start!important;
  min-width:0!important;
}
body.yekfi-signature .topbar>.brand{
  grid-area:brand!important;
  justify-self:end!important;
  direction:rtl!important;
  margin:0!important;
}
body.yekfi-signature .content{
  /* One authoritative compensation tied to the actual header height. */
  padding:calc(var(--yi-header-total) + 16px) 12px calc(104px + env(safe-area-inset-bottom))!important;
  position:relative!important;
}
body.yekfi-signature .view{
  scroll-margin-top:calc(var(--yi-header-total) + 16px)!important;
}

/* ---------- FIX 2: APPROVED HEADER LOCKUP, LARGER + RIGHT ANCHORED ---------- */
body.yekfi-signature .brand{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  width:max-content!important;
  max-width:100%!important;
  padding:0 2px!important;
}
body.yekfi-signature .brand-icon{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  flex:0 0 52px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 5px 10px rgba(24,42,28,.16))!important;
}
body.yekfi-signature .brand-copy{
  display:grid!important;
  justify-items:end!important;
  align-content:center!important;
  gap:2px!important;
  min-width:0!important;
  text-align:right!important;
  direction:rtl!important;
}
body.yekfi-signature .brand-title-line{
  display:flex!important;
  flex-direction:row!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  gap:7px!important;
  white-space:nowrap!important;
  line-height:1!important;
}
body.yekfi-signature .brand-title-line strong{
  font-size:19.5px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-.25px!important;
  color:var(--yi-deep)!important;
}
body.yekfi-signature .brand-title-line i{
  font-size:9.8px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:900!important;
  letter-spacing:1.45px!important;
  color:var(--yi-gold-deep)!important;
  direction:ltr!important;
}
body.yekfi-signature .brand-copy small{
  display:block!important;
  font-size:10.1px!important;
  line-height:1.2!important;
  font-weight:750!important;
  color:#626C62!important;
  white-space:nowrap!important;
}

/* Finance remains readable without stealing brand space. */
body.yekfi-signature .budget-pill{
  min-width:112px!important;
  max-width:118px!important;
  width:118px!important;
  padding:7px 9px!important;
  border-radius:15px!important;
}
body.yekfi-signature .budget-pill small{font-size:8.7px!important}
body.yekfi-signature .budget-pill b{font-size:13.8px!important;line-height:1.1!important}
body.yekfi-signature .budget-pill em{
  font-size:8.3px!important;
  line-height:1.15!important;
  max-width:99px!important;
}

/* Keep the header visually distinct from the hero below it. */
body.yekfi-signature .topbar{
  background:
    linear-gradient(90deg,rgba(255,254,251,.975),rgba(249,246,237,.96))!important;
  border-bottom:1px solid rgba(212,175,55,.23)!important;
  box-shadow:0 8px 24px rgba(35,50,37,.075)!important;
}
body.yekfi-signature .topbar::before{
  width:112px!important;height:88px!important;
  left:-32px!important;top:-18px!important;
  opacity:.085!important;
}

/* ---------- FIX 3: MAKE THE APPROVED BRAND ASSET SYSTEM VISIBLE ----------
   The prior opacity was intentionally too subtle on an actual iPhone.
   These values remain background/decorative — never compete with content.
*/
body.yekfi-signature::before{
  background-image:url("./assets/identity/background-light.webp")!important;
  background-position:center top!important;
  background-size:100% auto!important;
  background-repeat:repeat-y!important;
  opacity:.31!important;
}
body.yekfi-signature::after{
  background:
    linear-gradient(180deg,rgba(249,246,237,.78),rgba(249,246,237,.88) 28%,rgba(249,246,237,.91))!important;
}

/* Actual mobile edge ornaments. */
body.yekfi-signature .content::before,
body.yekfi-signature .content::after{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  width:132px;
  height:132px;
  background:url("./assets/identity/brand-corner.webp") center/contain no-repeat;
  opacity:.13;
}
body.yekfi-signature .content::before{
  right:-45px;
  top:calc(var(--yi-header-total) + 34px);
}
body.yekfi-signature .content::after{
  left:-52px;
  bottom:96px;
  transform:rotate(180deg);
}
body.yekfi-signature .view{position:relative;z-index:1}

/* An actual approved ornamental divider appears immediately after major heroes. */
body.yekfi-signature .sig-hero + .sig-section{
  position:relative!important;
  padding-top:30px!important;
}
body.yekfi-signature .sig-hero + .sig-section::after{
  content:"";
  position:absolute;
  width:128px;
  height:30px;
  left:50%;
  top:-3px;
  transform:translateX(-50%);
  background:url("./assets/identity/brand-divider.webp") center/contain no-repeat;
  opacity:.57;
  pointer-events:none;
}
body.yekfi-signature .sig-shopping-hero + .shopping-domains{
  position:relative!important;
  padding-top:30px!important;
}
body.yekfi-signature .sig-shopping-hero + .shopping-domains::before{
  content:"";
  position:absolute;
  width:128px;height:30px;
  left:50%;top:-3px;transform:translateX(-50%);
  background:url("./assets/identity/brand-divider.webp") center/contain no-repeat;
  opacity:.57;
  pointer-events:none;
}

/* A restrained botanical identity signature inside section cards. */
body.yekfi-signature .sig-section:nth-of-type(even) .sig-panel::before,
body.yekfi-signature .sig-family-actions::after{
  content:"";
  position:absolute;
  width:88px;height:88px;
  left:-22px;bottom:-28px;
  background:url("./assets/identity/brand-corner.webp") center/contain no-repeat;
  opacity:.045;
  pointer-events:none;
}
body.yekfi-signature .sig-panel{position:relative!important}
body.yekfi-signature .sig-family-actions{position:relative!important;overflow:hidden!important}

/* ---------- FIX 4: HERO SAFETY / TYPOGRAPHY ---------- */
body.yekfi-signature .sig-hero{
  margin-top:0!important;
  isolation:isolate!important;
}
body.yekfi-signature .sig-hero-copy{
  padding-top:22px!important;
  padding-bottom:20px!important;
  justify-content:center!important;
}
body.yekfi-signature .sig-hero-title{
  line-height:1.22!important;
  max-width:100%!important;
  text-wrap:balance!important;
}

/* Avoid the decorative hero corner masking text. */
body.yekfi-signature .sig-next-hero::after,
body.yekfi-signature .sig-week-hero::after,
body.yekfi-signature .sig-shopping-hero::after,
body.yekfi-signature .sig-family-hero::after{
  left:-48px!important;
  top:auto!important;
  bottom:-35px!important;
  width:142px!important;
  height:142px!important;
  opacity:.10!important;
}

/* ---------- REAL MOBILE WIDTHS ---------- */
@media(max-width:520px){
  :root{
    --yi-header-base:80px;
  }
  body.yekfi-signature .topbar{
    grid-template-columns:40px 108px minmax(0,1fr)!important;
    padding-inline:8px!important;
    gap:5px!important;
  }
  body.yekfi-signature .brand-icon{
    width:48px!important;height:48px!important;min-width:48px!important;flex-basis:48px!important;
  }
  body.yekfi-signature .brand-title-line strong{font-size:18px!important}
  body.yekfi-signature .brand-title-line i{font-size:9px!important;letter-spacing:1.15px!important}
  body.yekfi-signature .brand-copy small{font-size:9.3px!important}
  body.yekfi-signature .budget-pill{
    width:108px!important;min-width:108px!important;max-width:108px!important;
  }
  body.yekfi-signature .sig-hero-copy{
    width:min(76%,430px)!important;
    padding:20px 16px!important;
  }
  body.yekfi-signature .sig-hero-title{font-size:22.5px!important}
}
@media(max-width:390px){
  body.yekfi-signature .topbar{
    grid-template-columns:38px 101px minmax(0,1fr)!important;
    gap:4px!important;
    padding-inline:7px!important;
  }
  body.yekfi-signature .brand{gap:6px!important}
  body.yekfi-signature .brand-icon{
    width:45px!important;height:45px!important;min-width:45px!important;flex-basis:45px!important;
  }
  body.yekfi-signature .brand-title-line{gap:5px!important}
  body.yekfi-signature .brand-title-line strong{font-size:17.2px!important}
  body.yekfi-signature .brand-title-line i{font-size:8.2px!important}
  body.yekfi-signature .brand-copy small{font-size:8.7px!important}
  body.yekfi-signature .budget-pill{
    width:101px!important;min-width:101px!important;max-width:101px!important;
  }
}
@media(max-width:350px){
  body.yekfi-signature .brand-title-line i{display:none!important}
  body.yekfi-signature .brand-copy small{font-size:8.2px!important}
}

/* ---------- VISIBLE IN-APP APPROVED BRAND BANNER ----------
   Kept toward the end of Today so it enriches identity without interrupting
   the next-meal-first command center.
*/
body.yekfi-signature .yi-brand-promo{
  width:100%;
  border:1px solid rgba(212,175,55,.28);
  border-radius:20px;
  padding:0;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--yi-shadow);
  display:block;
  min-height:0;
}
body.yekfi-signature .yi-brand-promo img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
}