@layer yekfi-legacy { /* ===== styles.css ===== */ :root{ --bg:#FFF8F1;--surface:#FFFEFC;--ink:#2F211B;--muted:#806F66;--line:#F0DED4; --coral:#E86645;--coral2:#F08E65;--saffron:#F2B73D;--berry:#7A3D61;--plum:#533047; --peach:#FFD9C7;--cream:#FFF0E4;--rose:#F7E6EF;--success:#4E8C67;--warn:#B78216;--danger:#B84F48; --shadow:0 20px 55px rgba(82,46,32,.11);--soft:0 9px 26px rgba(82,46,32,.07); } *{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;overflow-x:hidden} button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}.ambient{position:fixed;border-radius:var(--radius-pill);filter:blur(70px);opacity:.25;z-index:-1}.ambient-a{width:260px;height:260px;background:#FFB89B;right:-90px;top:-80px}.ambient-b{width:300px;height:300px;background:#D9B4CC;left:-140px;bottom:40px} .boot{position:fixed;z-index:200;left:50%;top:16px;transform:translateX(-50%);background:#2F211B;color:white;border-radius:var(--radius-card);padding:9px 14px;font-size:11px;box-shadow:var(--soft)}.fatal{padding:20px;background:#fee;color:#700} .app-shell{max-width:980px;margin:auto;min-height:100vh}.topbar{height:74px;display:grid;grid-template-columns:1fr auto auto;gap:9px;align-items:center;padding:10px 16px;position:sticky;top:0;z-index:35;background:rgba(255,248,241,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(240,222,212,.7)} .brand{display:flex;align-items:center;gap:9px;background:none;border:0;text-align:right}.brand-mark,.logo-orb{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-card);color:white;background:linear-gradient(145deg,var(--coral),#C64D35);font-size:22px;font-weight:950;box-shadow:0 10px 24px rgba(232,102,69,.24)}.brand b{font-size:17px}.brand small{display:block;color:var(--muted);font-size:12px}.budget-pill{border:0;border-radius:var(--radius-card);background:linear-gradient(135deg,#FFF0E7,#FBE8F0);padding:8px 12px;text-align:right;min-width:104px}.budget-pill small{font-size:12px;color:var(--muted);display:block}.budget-pill b{font-size:12px;color:var(--berry)}.round-icon{border:1px solid var(--line);background:rgba(255,255,255,.76);width:38px;height:38px;border-radius:var(--radius-card);display:grid;place-items:center;font-weight:900} .content{padding:10px 16px 108px}.view{display:none;animation:fade .22s ease}.view.active{display:block}@keyframes fade{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}} .bottom-nav{position:fixed;z-index:40;bottom:10px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 24px));display:grid;grid-template-columns:repeat(4,1fr);padding:7px;background:rgba(255,255,255,.9);border:1px solid rgba(240,222,212,.8);border-radius:var(--radius-hero);box-shadow:0 18px 45px rgba(75,42,30,.15);backdrop-filter:blur(18px)}.nav-btn{border:0;background:none;border-radius:var(--radius-card);padding:8px 4px;color:#9A877B;display:grid;gap:2px;place-items:center;font-size:12px}.nav-btn i{font-style:normal;font-size:18px}.nav-btn.active{background:linear-gradient(135deg,#FFF0E7,#F8EAF1);color:var(--coral);font-weight:900} .eyebrow{text-transform:none;font-size:12px;letter-spacing:.2px;color:var(--coral);font-weight:900}.page-title{font-size:30px;line-height:1.15;margin:5px 0}.page-sub{font-size:12px;color:var(--muted);margin:0 0 16px;max-width:620px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 2px 9px}.section-head h2{font-size:16px;margin:0}.section-head button{border:0;background:none;color:var(--coral);font-size:12px;font-weight:900} .hero{position:relative;overflow:hidden;background:linear-gradient(140deg,#6B3655,#8F4E6F 58%,#C86B59);color:white;border-radius:var(--radius-hero);padding:20px;box-shadow:0 24px 55px rgba(100,53,75,.2)}.hero:after{content:"";position:absolute;width:180px;height:180px;border-radius:var(--radius-pill);background:rgba(255,202,171,.13);left:-55px;top:-75px}.hero .kicker{font-size:12px;opacity:.76;font-weight:800}.hero h1{font-size:25px;line-height:1.35;margin:5px 0 10px;max-width:700px}.hero-chips{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:6px 8px;border-radius:var(--radius-pill);background:rgba(255,255,255,.13);font-size:12px}.hero-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.btn{border:0;border-radius:var(--radius-card);padding:11px 14px;font-size:11px;font-weight:900;transition:.18s transform,.18s box-shadow}.btn:active{transform:scale(.98)}.btn.primary{background:linear-gradient(135deg,var(--coral),#D84E34);color:white;box-shadow:0 10px 24px rgba(232,102,69,.22)}.btn.light{background:white;color:var(--plum)}.btn.soft{background:#FFF0E8;color:#A74B35}.btn.berry{background:#F2E6EE;color:var(--berry)}.btn.full{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed} .card{background:rgba(255,255,255,.87);border:1px solid var(--line);border-radius:var(--radius-hero);padding:15px;box-shadow:var(--soft);backdrop-filter:blur(10px)}.glass{background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,245,238,.8))} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{padding:12px;border-radius:var(--radius-card);background:#FFF6F0;min-width:0}.stat:nth-child(2){background:#F7EEF4}.stat:nth-child(3){background:#FFF5D9}.stat small{font-size:12px;color:var(--muted);display:block}.stat b{display:block;margin-top:3px;font-size:16px}.stat .good{color:var(--success)} .summary-banner{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--radius-card);background:linear-gradient(135deg,#FFF2E8,#F7EAF2);border:1px solid #F3DDD5;margin:10px 0}.summary-banner .icon{width:40px;height:40px;border-radius:var(--radius-card);background:white;display:grid;place-items:center;font-size:20px;box-shadow:var(--soft)}.summary-banner b{font-size:12px;display:block}.summary-banner small{font-size:12px;color:var(--muted)} .meal-strip{display:grid;grid-template-columns:repeat(5,minmax(108px,1fr));gap:8px;overflow:auto;padding-bottom:4px}.meal-mini{border:1px solid var(--line);background:white;border-radius:var(--radius-card);padding:12px;text-align:right;min-height:128px;box-shadow:0 5px 16px rgba(77,43,31,.04)}.meal-mini.main{background:linear-gradient(145deg,#FFF8F3,#FFF0E6)}.meal-mini .meal-ico{font-size:20px}.meal-mini small{display:block;color:var(--muted);font-size:12px;margin:4px 0}.meal-mini b{font-size:11px;line-height:1.45;display:block}.microtag{display:inline-flex;margin-top:6px;border-radius:var(--radius-pill);padding:4px 6px;background:#F6EAF1;color:var(--berry);font-size:12px;font-weight:800}.microtag.gold{background:#FFF3D1;color:#896612} .progress{height:7px;border-radius:var(--radius-pill);background:#F4E7E0;overflow:hidden}.progress i{display:block;height:100%;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--coral),var(--saffron));transition:.35s width}.progress.berry i{background:linear-gradient(90deg,var(--berry),#B57696)} .day-tabs{display:flex;gap:7px;overflow:auto;padding-bottom:5px}.day-tab{min-width:67px;border:1px solid var(--line);background:white;border-radius:var(--radius-card);padding:9px 7px;text-align:center}.day-tab b{font-size:12px;display:block}.day-tab span{font-size:13px;font-weight:900;color:var(--coral)}.day-tab.active{background:linear-gradient(145deg,#FFF0E8,#F8EAF1);border-color:#F1B9A8;box-shadow:inset 0 0 0 1px rgba(232,102,69,.1)} .timeline{position:relative;margin-top:10px}.timeline:before{content:"";position:absolute;right:17px;top:18px;bottom:20px;width:2px;background:#F1DDD2}.meal-card{position:relative;margin-right:36px;margin-bottom:9px;border-radius:var(--radius-hero);background:white;border:1px solid var(--line);padding:13px;box-shadow:0 6px 19px rgba(77,43,31,.045)}.meal-card:before{content:"";position:absolute;right:-25px;top:18px;width:12px;height:12px;border-radius:var(--radius-pill);background:var(--coral);border:4px solid var(--bg)}.meal-card.snack:before{background:var(--saffron)}.meal-card.locked{box-shadow:inset 0 0 0 2px rgba(122,61,97,.18),0 6px 19px rgba(77,43,31,.045)}.meal-top{display:flex;gap:8px;justify-content:space-between}.meal-type{font-size:12px;color:var(--coral);font-weight:900}.meal-card h3{font-size:13px;margin:4px 0}.meal-card p{font-size:12px;color:var(--muted);margin:0}.actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}.pill-btn{border:0;border-radius:var(--radius-control);padding:7px 9px;background:#FFF1E9;color:var(--coral);font-size:12px;font-weight:900}.pill-btn.alt{background:#F4E8F0;color:var(--berry)}.pill-btn.gold{background:#FFF3D1;color:#86620B} .insights{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.insight{padding:11px;border-radius:var(--radius-card);background:#FFF8F3;border:1px solid #F2E2D9}.insight b{font-size:12px;display:flex;align-items:center;gap:6px}.insight small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--success)}.dot.warn{background:var(--saffron)}.dot.bad{background:var(--danger)} .shopping-summary{display:grid;grid-template-columns:1.25fr .75fr;gap:8px}.shop-total{background:linear-gradient(135deg,var(--berry),#A05C7E);color:white;border-radius:var(--radius-hero);padding:16px;box-shadow:0 16px 32px rgba(122,61,97,.17)}.shop-total small{font-size:12px;opacity:.8}.shop-total b{display:block;font-size:27px;margin:3px 0}.ring-card{display:grid;place-items:center;background:white;border-radius:var(--radius-hero);border:1px solid var(--line);box-shadow:var(--soft)}.ring{--p:0;width:72px;height:72px;border-radius:var(--radius-pill);display:grid;place-items:center;background:conic-gradient(var(--coral) calc(var(--p)*1%),#F2E6DF 0);position:relative}.ring:after{content:"";position:absolute;inset:8px;background:white;border-radius:var(--radius-pill)}.ring b{position:relative;z-index:1;font-size:13px}.category{margin-top:12px}.category-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.category-head h3{font-size:13px;margin:0}.category-head span{font-size:12px;color:var(--muted)}.shop-item{width:100%;border:0;background:none;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 4px;border-bottom:1px solid #F5E9E2;text-align:right}.check{width:27px;height:27px;border-radius:var(--radius-control);border:2px solid #E6D6CE;background:white;display:grid;place-items:center}.shop-item.done{opacity:.45;text-decoration:line-through}.shop-item.done .check{background:var(--coral);border-color:var(--coral);color:white}.shop-name b{font-size:11px;display:block}.shop-name small,.shop-qty small{font-size:12px;color:var(--muted)}.shop-qty{text-align:left}.shop-qty b{font-size:12px;display:block} .member-card{width:100%;border:1px solid var(--line);background:white;border-radius:var(--radius-card);padding:11px;display:flex;align-items:center;gap:10px;text-align:right;margin-bottom:7px;box-shadow:0 5px 14px rgba(77,43,31,.035)}.avatar{width:43px;height:43px;border-radius:var(--radius-card);background:linear-gradient(145deg,#FFD5C2,#F7BDA5);display:grid;place-items:center;color:#8A432F;font-weight:950}.member-card:nth-of-type(even) .avatar{background:linear-gradient(145deg,#EFD8E6,#DBBED1);color:var(--berry)}.member-info{flex:1}.member-info b{font-size:12px}.member-info small{display:block;font-size:12px;color:var(--muted);margin-top:2px} .empty{text-align:center;padding:32px 20px;border-radius:var(--radius-hero);background:white;border:1px solid var(--line);box-shadow:var(--soft)}.empty .emoji{font-size:42px}.empty h2{font-size:18px;margin:8px}.empty p{font-size:11px;color:var(--muted);max-width:410px;margin:0 auto 14px} .modal{position:fixed;inset:0;z-index:80;display:none}.modal.open{display:flex}.onboarding{align-items:center;justify-content:center;padding:14px;background:linear-gradient(145deg,#FFF5ED,#F9E9E0 52%,#F1E3EC)}.on-card{width:min(610px,100%);background:rgba(255,255,255,.91);border:1px solid rgba(255,255,255,.9);border-radius:var(--radius-hero);padding:18px;box-shadow:0 30px 80px rgba(80,45,33,.18);backdrop-filter:blur(20px)}.on-head{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.on-head b{font-size:15px}.on-head small{font-size:12px;color:var(--muted);display:block}.on-head>span{font-size:12px;color:var(--muted);font-weight:900}.on-card>.progress{margin:14px 0 18px}.on-step h1{font-size:25px;line-height:1.22;margin:0 0 6px}.on-step>p{font-size:11px;color:var(--muted);margin:0 0 15px}.stepper{display:grid;grid-template-columns:1fr auto 40px auto;gap:7px;align-items:center;background:#FFF8F3;border-radius:var(--radius-card);padding:11px;margin:7px 0}.stepper b{font-size:12px}.stepper small{display:block;color:var(--muted);font-size:12px}.round-step{width:33px;height:33px;border:0;border-radius:var(--radius-control);background:white;box-shadow:var(--soft);font-size:18px}.count{font-weight:950;text-align:center}.on-actions{display:flex;gap:8px;justify-content:space-between;margin-top:16px}.budget-number{text-align:center;margin:13px}.budget-number b{font-size:42px;color:var(--coral)}.budget-number span{font-size:12px;color:var(--muted)}.range{width:100%;accent-color:var(--coral)}.quick-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.quick-stat{background:#FFF6F0;border-radius:var(--radius-card);padding:10px;text-align:center}.quick-stat:nth-child(2){background:#F7EDF3}.quick-stat b{display:block;font-size:13px}.quick-stat small{font-size:12px;color:var(--muted)} .cuisine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cuisine-card{border:1px solid var(--line);background:white;border-radius:var(--radius-card);padding:14px 10px;text-align:right;min-height:115px;transition:.18s}.cuisine-card:active{transform:scale(.98)}.cuisine-card.selected{border-color:#EEAE9C;box-shadow:inset 0 0 0 2px rgba(232,102,69,.1);background:#FFF7F2}.cuisine-emoji{font-size:26px}.cuisine-card b{font-size:12px;display:block;margin-top:7px}.cuisine-card small{font-size:12px;color:var(--muted);display:block;margin-top:3px}.blend-list{display:grid;gap:7px;margin-top:11px}.blend-card{border:1px solid var(--line);background:white;border-radius:var(--radius-card);padding:10px;display:flex;justify-content:space-between;align-items:center;text-align:right}.blend-card b{font-size:12px}.blend-card small{font-size:12px;color:var(--muted)}.choice-summary{display:grid;gap:8px}.choice-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border-radius:var(--radius-card);background:#FFF7F2;padding:11px}.choice-row:nth-child(even){background:#F7EDF3}.choice-row span{font-size:12px;color:var(--muted)}.choice-row b{font-size:11px;text-align:left} .loader{align-items:center;justify-content:center;background:rgba(47,33,27,.36);backdrop-filter:blur(8px);padding:18px}.loader-card{width:min(390px,100%);background:white;border-radius:var(--radius-hero);padding:24px;text-align:center;box-shadow:var(--shadow)}.loader-orb{width:74px;height:74px;border-radius:var(--radius-hero);background:linear-gradient(145deg,var(--coral),var(--berry));display:grid;place-items:center;margin:0 auto 12px;animation:pulse 1.5s infinite}.loader-orb span{font-size:31px;font-weight:950;color:white}@keyframes pulse{50%{transform:scale(1.05);box-shadow:0 0 0 13px rgba(232,102,69,.08)}}.loader-card h2{font-size:20px;margin:0}.loader-card p{font-size:12px;color:var(--muted)}.loader-progress{height:7px;background:#F2E5DE;border-radius:var(--radius-pill);overflow:hidden;margin:14px 0}.loader-progress i{display:block;width:8%;height:100%;background:linear-gradient(90deg,var(--coral),var(--saffron));transition:.35s}.loader-stages{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}.loader-stages span{font-size:12px;padding:5px 7px;border-radius:var(--radius-pill);background:#F8EFEA;color:var(--muted)}.loader-stages span.done{background:#EAF4ED;color:var(--success)} .ready-modal{align-items:center;justify-content:center;padding:16px;background:rgba(47,33,27,.35);backdrop-filter:blur(8px)}.ready-card{position:relative;width:min(500px,100%);background:linear-gradient(150deg,#FFFDFC,#FFF2E9 62%,#F4E7EF);border-radius:var(--radius-hero);padding:24px;box-shadow:0 30px 80px rgba(74,42,30,.22);text-align:center}.close-x{position:absolute;left:14px;top:14px;border:0;background:white;width:34px;height:34px;border-radius:var(--radius-control)}.ready-icon{width:64px;height:64px;margin:0 auto 9px;border-radius:var(--radius-hero);display:grid;place-items:center;background:linear-gradient(145deg,#65A078,#3E7D59);color:white;font-size:27px;box-shadow:0 12px 28px rgba(65,130,88,.2)}.ready-card h1{font-size:23px;margin:5px 0 14px}.ready-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;text-align:right}.ready-stat{padding:12px;border-radius:var(--radius-card);background:white;box-shadow:0 4px 14px rgba(77,43,31,.04)}.ready-stat small{font-size:12px;color:var(--muted);display:block}.ready-stat b{font-size:15px}.ready-actions{display:flex;gap:8px;margin-top:15px}.ready-actions .btn{flex:1} .sheet{align-items:flex-end;justify-content:center;background:rgba(47,33,27,.32);backdrop-filter:blur(5px)}.sheet-panel{width:min(900px,100%);max-height:88vh;overflow:auto;background:#FFFDFC;border-radius:var(--radius-hero)30px 0 0;padding:11px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px rgba(55,30,22,.18);animation:up .23s ease}@keyframes up{from{transform:translateY(28px);opacity:.5}to{transform:none;opacity:1}}.handle{width:42px;height:5px;border-radius:var(--radius-pill);background:#E5D7CF;margin:0 auto 9px}.sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-11px;background:#FFFDFC;padding:7px 0;z-index:2}.sheet-head h2{font-size:18px;margin:0}.sheet-section{margin:13px 0}.sheet-section h3{font-size:12px;margin:0 0 7px}.note{padding:10px;border-radius:var(--radius-card);background:#FFF5E9;color:#72594D;font-size:12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}.input{width:100%;border:1px solid var(--line);background:white;border-radius:var(--radius-card);padding:10px;font-size:11px}.meal-detail-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.detail-stat{padding:9px;border-radius:var(--radius-card);background:#FFF6F0;text-align:center}.detail-stat:nth-child(even){background:#F7EDF3}.detail-stat b{display:block;font-size:12px}.detail-stat small{font-size:12px;color:var(--muted)}.ingredient{display:flex;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid #F4E8E1;font-size:12px}.swap-option{border:1px solid var(--line);background:white;border-radius:var(--radius-card);padding:12px;margin:7px 0}.swap-title{display:flex;justify-content:space-between;gap:7px}.swap-title h3{font-size:12px;margin:0}.swap-option p{font-size:12px;color:var(--muted);margin:5px 0}.option-row{display:flex;gap:6px;flex-wrap:wrap}.option{border:1px solid var(--line);background:white;border-radius:var(--radius-card);padding:8px 10px;font-size:12px}.option.selected{background:#FFF0E8;color:var(--coral);border-color:#F0B7A6;font-weight:900}.nutrition-list{display:grid;gap:7px}.nut-row{display:grid;grid-template-columns:100px 1fr 45px;gap:7px;align-items:center;font-size:12px}.nut-bar{height:7px;background:#F2E6DF;border-radius:var(--radius-pill);overflow:hidden}.nut-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--coral),var(--saffron));border-radius:var(--radius-pill)}.nut-row.good .nut-bar i{background:linear-gradient(90deg,#5C9971,#7AB28B)}.nut-row.warn .nut-bar i{background:linear-gradient(90deg,#D3A128,#F2C150)}.unit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.unit-card{border-radius:var(--radius-card);padding:10px;background:#FFF6F0}.unit-card:nth-child(even){background:#F7EDF3}.unit-card small{font-size:12px;color:var(--muted)}.unit-card b{font-size:11px;display:block} .toast{position:fixed;z-index:150;left:50%;bottom:96px;transform:translate(-50%,15px);opacity:0;background:#30221C;color:white;border-radius:var(--radius-card);padding:9px 13px;font-size:12px;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)} @media(max-width:660px){.content{padding-inline:12px}.topbar{padding-inline:12px}.page-title{font-size:27px}.meal-strip{grid-template-columns:repeat(5,112px)}.stats,.insights{grid-template-columns:1fr 1fr}.stats .stat:last-child,.insights .insight:last-child{grid-column:span 2}.cuisine-grid{grid-template-columns:1fr}.cuisine-card{min-height:auto;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}.cuisine-card .cuisine-emoji{grid-row:span 2}.meal-detail-stats{grid-template-columns:repeat(2,1fr)}.shopping-summary{grid-template-columns:1.2fr .8fr}.form-grid{grid-template-columns:1fr}.ready-grid{grid-template-columns:1fr 1fr}} /* v7.1 — guided flow / impact surfaces */ .step-kicker{display:inline-flex;padding:5px 8px;border-radius:var(--radius-pill);background:#FFF0E8;color:var(--coral);font-size:12px;font-weight:950;margin-bottom:8px} .flow-hint{margin-top:10px;text-align:center;color:var(--muted);font-size:12px} .budget-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0} .budget-presets button{border:1px solid var(--line);background:white;border-radius:var(--radius-card);padding:10px 6px;box-shadow:0 4px 14px rgba(77,43,31,.035)} .budget-presets b{display:block;font-size:12px}.budget-presets small{font-size:12px;color:var(--muted)} .impact-card{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--radius-card);background:linear-gradient(135deg,#FFF2E8,#F7EAF2);border:1px solid #F1DDD5;margin-top:10px} .impact-card>span{font-size:18px}.impact-card p{margin:0}.impact-card b{display:block;font-size:12px}.impact-card small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5} .impact-card.strong{background:linear-gradient(135deg,#FFF0E6,#F4E4EE)} .final-orb{width:150px;height:150px;border-radius:var(--radius-hero);margin:4px auto 14px;display:grid;place-items:center;align-content:center;background:radial-gradient(circle at 30% 25%,#FFF6E9 0,#F7DFD4 42%,#E8C9D8 100%);box-shadow:0 24px 60px rgba(122,61,97,.16);border:1px solid rgba(255,255,255,.9)} .final-orb span{font-size:24px}.final-orb b{font-size:25px;color:var(--plum)}.final-orb small{font-size:12px;color:var(--muted)} .mini-proof,.ready-proof{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:10px} .mini-proof span,.ready-proof span{font-size:12px;border-radius:var(--radius-pill);padding:6px 8px;background:#FFF6F0;color:#8A5B49;border:1px solid #F0DED4} .btn.glow{box-shadow:0 13px 30px rgba(232,102,69,.28),0 0 0 5px rgba(232,102,69,.055)} .ready-stat em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:3px} .ready-stat.hero-stat{background:linear-gradient(145deg,#FFF0E6,#F7E7EE)} .nutrition-hero{display:grid;grid-template-columns:1fr 1fr;gap:8px} .nutrition-hero>div{padding:13px;border-radius:var(--radius-card);background:#FFF4EC} .nutrition-hero>div:nth-child(2){background:#F6EAF2}.nutrition-hero small{font-size:12px;color:var(--muted);display:block}.nutrition-hero b{font-size:20px} .member-nutrition{display:grid;gap:6px}.member-nut{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-radius:var(--radius-card);background:#FFF8F3;border:1px solid #F3E3DA}.member-nut:nth-child(even){background:#FAF0F5} .member-nut b{display:block;font-size:12px}.member-nut small{font-size:12px;color:var(--muted)}.member-nut strong{font-size:12px;color:var(--berry)} @media(hover:hover){.cuisine-card:hover,.blend-card:hover,.budget-presets button:hover,.meal-card:hover,.member-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(82,46,32,.09);border-color:#EECABA}} .stat em,.nutrition-hero em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:3px} .good{color:var(--success)}.warn{color:var(--warn)}.bad{color:var(--danger)} .summary-banner.attention{background:linear-gradient(135deg,#FFF6DC,#FFF0E5);border-color:#F1D49B} .summary-banner.risk{background:linear-gradient(135deg,#FFF0EC,#F9E2E3);border-color:#EAB8B5} /* v7.2 — Dual planning routes + Meal Composer */ .path-hero{padding:18px 0}.path-hero>h2{font-size:25px;margin:6px 0}.path-hero>p{color:var(--muted);font-size:12px;line-height:1.6;max-width:620px} .path-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.path-card{border:0;text-align:right;padding:18px;border-radius:var(--radius-hero);min-height:180px;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden;box-shadow:0 18px 45px rgba(89,51,35,.09);transition:.2s transform,.2s box-shadow} .path-card:before{content:"";position:absolute;width:150px;height:150px;border-radius:var(--radius-pill);left:-35px;top:-55px;background:rgba(255,255,255,.35)} .path-card.auto{background:linear-gradient(145deg,#FFEEE3,#FFD7C5);color:#633528}.path-card.manual{background:linear-gradient(145deg,#F7E8F0,#EED2E2);color:#60344F} .path-card>span{font-size:30px;position:relative}.path-card b{font-size:18px;margin-top:auto}.path-card small{font-size:12px;line-height:1.55;opacity:.78;margin-top:4px}.path-card em{font-style:normal;font-size:12px;font-weight:900;margin-top:12px} .quick-route{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.quick-route button{display:flex;align-items:center;gap:9px;text-align:right;border:1px solid #F0DDD4;background:linear-gradient(145deg,#FFF9F5,#FFF0E9);border-radius:var(--radius-card);padding:10px 12px}.quick-route button:nth-child(2){background:linear-gradient(145deg,#FBF5F9,#F6E8F0)}.quick-route span{font-size:20px}.quick-route b{display:block;font-size:12px}.quick-route small{font-size:12px;color:var(--muted)} .composer-modal{align-items:stretch;justify-content:stretch;background:rgba(47,30,24,.28);backdrop-filter:blur(18px);overflow:hidden;overscroll-behavior:none} .composer-shell{width:min(920px,100%);height:100dvh;max-height:100dvh;margin:auto;background:linear-gradient(180deg,#FFF9F4,#FFFDFB);overflow:hidden;position:relative;display:flex;flex-direction:column;min-width:0;max-width:100vw} .composer-head{position:relative;z-index:20;display:grid;grid-template-columns:42px minmax(0,1fr) 44px;gap:10px;align-items:center;padding:12px 16px;background:rgba(255,249,244,.96);backdrop-filter:blur(16px);border-bottom:1px solid rgba(232,209,197,.75);flex:0 0 auto;min-width:0;touch-action:none} .composer-head h2{margin:0;font-size:18px}.composer-head small{font-size:12px;color:var(--muted)}.composer-brand{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-card);background:linear-gradient(145deg,#EF8B67,#B95F6E);color:white;font-size:20px;font-weight:950;box-shadow:0 10px 25px rgba(185,95,110,.22)} .composer-content{width:100%;max-width:900px;margin:0 auto;padding:14px 16px 128px;box-sizing:border-box;flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y}.composer-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#F3EAE5;padding:4px;border-radius:var(--radius-card);width:min(320px,100%);margin-bottom:12px}.composer-tabs button{border:0;background:transparent;border-radius:var(--radius-control);padding:8px 13px;font-size:12px;font-weight:900}.composer-tabs button.active{background:white;box-shadow:0 5px 14px rgba(74,42,30,.08)}.composer-tabs b{background:#E98968;color:white;border-radius:var(--radius-pill);padding:1px 5px} .composer-stage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.75fr);gap:14px;align-items:start}.composer-main,.composer-insight{background:rgba(255,255,255,.78);border:1px solid rgba(235,214,202,.85);border-radius:var(--radius-hero);padding:16px;box-shadow:0 18px 50px rgba(91,56,39,.06)}.composer-insight{position:sticky;top:82px} .composer-title-row{display:flex;justify-content:space-between;align-items:end;margin:8px 0}.composer-title-row h3{font-size:15px;margin:2px 0}.composer-title-row>small{font-size:12px;color:var(--muted)}.live-badge{font-size:12px;color:#A85A68;background:#F9EAF0;padding:6px 8px;border-radius:var(--radius-pill)} .meal-type-pills,.group-pills{display:flex;gap:6px;flex-wrap:wrap;overflow:visible;padding-bottom:4px;min-width:0}.meal-type-pills button,.group-pills button{white-space:nowrap;border:1px solid var(--line);background:white;border-radius:var(--radius-pill);padding:8px 10px;font-size:12px;font-weight:900}.meal-type-pills button.active,.group-pills button.active{background:#703E58;color:white;border-color:#703E58;box-shadow:0 7px 18px rgba(112,62,88,.18)} .composer-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--radius-card);padding:7px 10px;margin:9px 0;background:#FFFCFA}.composer-search input{border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:12px} .food-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:none;overflow:visible;padding:2px;min-width:0}.food-option{border:1px solid #F0E2DB;background:white;border-radius:var(--radius-card);padding:9px;text-align:right;display:grid;grid-template-columns:28px 1fr 18px;gap:7px;align-items:center;min-height:62px}.food-option.selected{border-color:#D37A62;background:#FFF3EC;box-shadow:inset 0 0 0 1px #D37A62}.food-icon{font-size:19px}.food-option b{display:block;font-size:12px}.food-option small{font-size:12px;color:var(--muted)}.food-option i{font-style:normal;font-size:16px;color:#C86755} .selected-foods{display:grid;gap:6px;min-width:0}.selected-food{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;align-items:center;gap:8px;background:#FFF8F3;border-radius:var(--radius-card);padding:8px 9px;border:1px solid #F3E4DC;min-width:0}.selected-food>span{min-width:0;overflow-wrap:anywhere}.selected-food b{display:block;font-size:12px}.selected-food small{font-size:12px;color:var(--muted)}.mini-stepper{display:flex;align-items:center;gap:5px}.mini-stepper button,.remove-x{border:0;width:25px;height:25px;border-radius:var(--radius-control);background:white;font-weight:900}.mini-stepper b{font-size:12px;min-width:28px;text-align:center}.remove-x{color:#B85A58;background:#FCECEA}.selection-empty{text-align:center;padding:20px;font-size:12px;color:var(--muted);border:1px dashed #E9D7CD;border-radius:var(--radius-card)} .composer-score{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:center}.score-orb{width:72px;height:72px;border-radius:var(--radius-hero);display:grid;place-items:center;align-content:center;background:#FFF0E6;color:#9B5742}.score-orb.great{background:#E7F5ED;color:#38725A}.score-orb.good{background:#FFF4D7;color:#927226}.score-orb.warn{background:#FCE9E6;color:#A24B49}.score-orb b{font-size:24px;line-height:1}.score-orb small{font-size:12px}.composer-score h3{font-size:13px;margin:0}.composer-score p{font-size:12px;color:var(--muted);line-height:1.45} .composer-money{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:11px 0}.composer-money>div{padding:9px;border-radius:var(--radius-card);background:#FFF6F0}.composer-money>div:nth-child(2){background:#F8EEF3}.composer-money .risk{background:#FCE8E4}.composer-money small{display:block;font-size:12px;color:var(--muted)}.composer-money b{font-size:11px} .budget-impact{margin:8px 0}.budget-impact>div{display:flex;justify-content:space-between;font-size:12px;font-weight:900}.budget-impact>i{display:block;height:6px;border-radius:var(--radius-pill);background:linear-gradient(90deg,#E97858,#E0A43E);margin-top:5px;max-width:100%} .weakest-card{padding:10px;border-radius:var(--radius-card);background:linear-gradient(145deg,#FFF2E9,#F8EAF1);margin:10px 0}.weakest-card span,.weakest-card strong,.weakest-card small{display:block}.weakest-card span{font-size:12px;color:var(--muted)}.weakest-card b{font-size:12px}.weakest-card strong{font-size:12px;color:#9F5362;margin-top:2px}.weakest-card small{font-size:12px;color:var(--muted)} .nut-mini-bars{display:grid;gap:6px}.nut-mini-bars>div{display:grid;grid-template-columns:70px 1fr 32px;gap:6px;align-items:center;font-size:12px}.nut-mini-bars i{height:6px;background:#F1E8E3;border-radius:var(--radius-pill);overflow:hidden}.nut-mini-bars em{display:block;height:100%;background:linear-gradient(90deg,#D9705A,#B76379);border-radius:var(--radius-pill)}.nut-mini-bars b{text-align:left} .smart-add{margin-top:12px}.smart-add>button{width:100%;border:1px solid #F0DDD4;background:#FFFAF6;border-radius:var(--radius-card);padding:8px;display:grid;grid-template-columns:26px 1fr;gap:7px;text-align:right;margin-top:5px}.smart-add>button:first-of-type{background:linear-gradient(145deg,#FFF0E5,#F7E8F0);border-color:#EBCABD}.smart-add b{display:block;font-size:12px}.smart-add small{font-size:12px;color:var(--muted)} .composer-footer{position:fixed;bottom:0;left:50%;right:auto;transform:translateX(-50%);z-index:25;width:min(900px,100vw);max-width:100vw;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,250,246,.97);backdrop-filter:blur(18px);border-top:1px solid #EAD9D0;overflow:hidden}.composer-name label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}.composer-footer-actions{display:flex;gap:7px;align-items:end}.saved-meals{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.saved-meal{background:white;border:1px solid var(--line);border-radius:var(--radius-hero);padding:13px}.saved-meal h3{font-size:12px;margin:5px 0}.saved-meal p{font-size:12px;color:var(--muted)}.danger-soft{color:#A64F4D;background:#FDECE9} .featured-option{background:linear-gradient(145deg,#FFF0E6,#F5E5EF);border-color:#EFCDBF} @media(max-width:780px){.composer-stage{grid-template-columns:1fr}.composer-insight{position:static}.food-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.composer-footer{grid-template-columns:1fr}.composer-footer-actions{display:grid;grid-template-columns:1fr 1fr}.path-grid{grid-template-columns:1fr}.saved-meals{grid-template-columns:1fr}} @media(max-width:430px){.food-grid{grid-template-columns:1fr}.composer-content{padding-left:10px;padding-right:10px}.composer-main,.composer-insight{padding:12px;border-radius:var(--radius-hero)}.composer-money{grid-template-columns:1fr 1fr}.composer-money>div:nth-child(3){grid-column:1/-1}.composer-footer{padding-left:10px;padding-right:10px}.composer-footer-actions{grid-template-columns:1fr 1fr}.meal-type-pills button,.group-pills button{flex:1 1 auto}} .texture-note{margin-top:7px;padding:8px 10px;border-radius:var(--radius-card);background:#FFF5DC;color:#7C6326;font-size:12px;line-height:1.5;border:1px solid #F0D89D} .composer-target label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px} .composer-target{min-width:140px} @media(min-width:781px){.composer-footer{grid-template-columns:minmax(180px,1fr) 150px auto}} .mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0 16px}.mode-choice button{border:1px solid var(--line);background:#FFFDFC;border-radius:var(--radius-card);padding:10px;text-align:right;display:grid;grid-template-columns:27px 1fr;column-gap:7px}.mode-choice button.active{background:linear-gradient(145deg,#FFF0E6,#F6E7EF);border-color:#E3AC9B;box-shadow:0 9px 22px rgba(155,86,72,.10)}.mode-choice span{font-size:19px;grid-row:1/3}.mode-choice b{font-size:12px}.mode-choice small{font-size:12px;color:var(--muted)} /* v7.3 UX Excellence layer */ :root{--tap:44px} button,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent} button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(185,95,110,.25);outline-offset:2px} .bottom-nav .nav-btn,.round-icon,.pill-btn,.btn{min-height:44px} .view{animation:viewIn .18s ease both}@keyframes viewIn{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}} .toast.undoable{cursor:pointer;padding-inline:18px}.toast.undoable:after{content:"تراجع";font-weight:950;margin-inline-start:12px;text-decoration:underline} .tiny-muted{font-size:12px;color:var(--muted);margin-top:5px} .shop-item-row{display:grid;grid-template-columns:46px 1fr;align-items:stretch;border-top:1px solid #F2E7E1;min-height:66px}.shop-item-row:first-of-type{border-top:0}.shop-item-row.done{opacity:.48}.shop-check{border:0;background:transparent;display:grid;place-items:center;min-width:44px}.shop-main{border:0;background:transparent;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;text-align:right;padding:10px 4px 10px 8px;width:100%}.shop-main .shop-name em{display:block;font-style:normal;font-size:12px;color:#A55E70;margin-top:3px}.shop-main .shop-qty{text-align:left} .member-card-v2{background:white;border:1px solid var(--line);border-radius:var(--radius-hero);margin-bottom:9px;overflow:hidden;box-shadow:0 9px 22px rgba(89,51,35,.045)}.member-main{width:100%;border:0;background:transparent;display:grid;grid-template-columns:42px 1fr 20px;gap:9px;align-items:center;text-align:right;padding:11px}.member-inline{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #F2E7E1}.member-inline button{border:0;border-inline-start:1px solid #F2E7E1;background:#FFFDFC;padding:8px 5px;min-height:48px}.member-inline button:first-child{border-inline-start:0}.member-inline small,.member-inline b{display:block}.member-inline small{font-size:12px;color:var(--muted)}.member-inline b{font-size:12px;margin-top:2px}.editable-stat{border:0;background:transparent;border-radius:var(--radius-card)}.editable-stat:hover{background:#FFF5EF}.editable-stat em{display:block;font-style:normal;font-size:12px;color:#A55E70} .direct-edit{text-align:center}.direct-edit h3{font-size:17px;margin:5px 0}.direct-edit p{font-size:12px;color:var(--muted)}.direct-stepper{display:grid;grid-template-columns:52px 1fr 52px;gap:8px;align-items:center;margin:18px 0}.direct-stepper button{height:52px;border:0;border-radius:var(--radius-card);background:#FFF0E8;font-size:22px;font-weight:950}.direct-stepper b{font-size:20px}.direct-edit>.input{font-size:16px;text-align:center;margin-bottom:10px} .mini-stepper b{min-width:92px;font-size:12px;white-space:nowrap}.selected-food{grid-template-columns:1fr auto 30px} .sheet-panel,.composer-shell{overscroll-behavior:contain}.sheet-panel:before{content:"اسحبي لأسفل للإغلاق";display:block;text-align:center;font-size:12px;color:var(--muted);margin-top:-2px;margin-bottom:3px;opacity:.7} @media(max-width:520px){.member-inline{grid-template-columns:repeat(2,1fr)}.member-inline button:nth-child(3),.member-inline button:nth-child(4){border-top:1px solid #F2E7E1}.shop-main{grid-template-columns:1fr auto}.bottom-nav{padding-bottom:max(7px,env(safe-area-inset-bottom))}.content{padding-bottom:calc(84px + env(safe-area-inset-bottom))}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto;animation-duration:.01ms;transition-duration:.01ms}} /* v8.0 Food Universe */ .universe-hero{padding:4px 2px 14px}.universe-hero h3{font-size:24px;margin:6px 0}.universe-hero p{color:var(--muted);line-height:1.7}.universe-search{display:flex;gap:8px;position:sticky;top:0;background:var(--bg,#fffaf5);padding:8px 0;z-index:2}.universe-search input{flex:1;min-height:48px;border:1px solid rgba(0,0,0,.1);border-radius:var(--radius-card);padding:0 14px;font:inherit}.universe-search button,.filter-chip{min-height:44px;border:0;border-radius:var(--radius-pill);padding:0 15px;background:#f1ebe4;font:inherit;font-weight:700}.filter-scroll{display:flex;gap:8px;overflow:auto;padding:5px 0;scrollbar-width:none}.filter-chip{white-space:nowrap}.filter-chip.active{background:#1e4b3d;color:white}.universe-count{font-size:12px;color:var(--muted);padding:10px 2px}.universe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.universe-card{text-align:right;border:1px solid rgba(0,0,0,.07);border-radius:var(--radius-card);padding:14px;background:white;min-height:112px;display:flex;flex-direction:column;gap:6px;justify-content:center}.universe-card span{font-size:11px;color:#9a6d38}.universe-card b{font-size:15px;line-height:1.4}.universe-card small{color:var(--muted);line-height:1.4}@media(max-width:390px){.universe-grid{grid-template-columns:1fr}} /* v8.0B — dynamic discovery + direct manipulation */ .day-navigator{display:grid;grid-template-columns:44px 1fr 44px;gap:8px;align-items:center;margin-bottom:8px}.day-navigator>button{width:44px;height:44px;border:0;border-radius:var(--radius-card);background:#fff;border:1px solid var(--line);font-size:25px}.day-navigator>span{text-align:center}.day-navigator small,.day-navigator b{display:block}.day-navigator small{font-size:12px;color:var(--muted)}.day-navigator b{font-size:14px;margin-top:2px} .hero-title{display:block;border:0;background:transparent;color:inherit;font:inherit;font-size:clamp(25px,6vw,42px);font-weight:950;text-align:right;padding:2px 0 8px;width:100%}.hero-title:active,.meal-name-tap:active{transform:scale(.99)}.hero-chips .chip{border:1px solid rgba(255,255,255,.26);cursor:pointer}.hero-chips button.chip:hover{background:rgba(255,255,255,.17)} .meal-name-tap{border:0;background:transparent;text-align:right;padding:2px 0;font:inherit;font-size:16px;font-weight:950;color:inherit;min-height:36px}.meal-meta-taps{display:flex;gap:5px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:12px}.meal-meta-taps button{border:0;background:#FFF4EC;border-radius:var(--radius-pill);padding:5px 8px;color:inherit;font:inherit;font-size:12px;min-height:30px} .universe-shortcuts{display:flex;gap:7px;overflow:auto;margin-top:12px;scrollbar-width:none}.universe-shortcuts button{border:0;border-radius:var(--radius-card);min-height:40px;padding:0 12px;background:#f3ece7;font:inherit;font-weight:800;white-space:nowrap}.universe-shortcuts button.active{background:#1e4b3d;color:#fff}.universe-shortcuts b{font-size:12px;margin-inline-start:3px}.universe-count{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.universe-count b{font-size:15px;color:var(--text)}.universe-count span{font-size:12px} .universe-card{position:relative;padding:0;overflow:hidden;min-height:126px}.universe-card.validated{border-color:#cfe3d8;box-shadow:0 10px 26px rgba(44,101,76,.07)}.universe-main{border:0;background:transparent;width:100%;height:100%;min-height:126px;text-align:right;padding:14px 44px 14px 14px;display:flex;flex-direction:column;gap:6px;justify-content:center;font:inherit;color:inherit}.universe-main span{font-size:11px;color:#9a6d38}.universe-main b{font-size:15px;line-height:1.45}.universe-main small{font-size:12px;color:var(--muted);line-height:1.45}.fav-btn{position:absolute;top:10px;left:10px;width:36px;height:36px;border:0;border-radius:var(--radius-control);background:#fff4ef;font-size:22px;display:grid;place-items:center;color:#a26b63}.fav-btn.active{background:#f8e4e7;color:#b84f67}.universe-empty{grid-column:1/-1;padding:34px 18px;text-align:center;background:#fff;border:1px dashed var(--line);border-radius:var(--radius-card)}.universe-empty b,.universe-empty span{display:block}.universe-empty span{color:var(--muted);margin-top:5px;font-size:11px} .dish-detail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.fav-detail{border:0;border-radius:var(--radius-card);padding:9px 12px;background:#fff0ec;font:inherit;font-weight:900}.fav-detail.active{background:#f8e4e7;color:#ae4962}.verified-badge,.discovery-badge{border-radius:var(--radius-pill);padding:6px 9px;font-size:12px;font-weight:900}.verified-badge{background:#e8f5ed;color:#397157}.discovery-badge{background:#fff4d9;color:#876922}.dish-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.dish-facts button{border:1px solid var(--line);border-radius:var(--radius-card);background:#fff;padding:11px;text-align:right;min-height:72px}.dish-facts small,.dish-facts b{display:block}.dish-facts small{font-size:12px;color:var(--muted)}.dish-facts b{font-size:11px;margin-top:5px} @media(max-width:520px){.dish-facts{grid-template-columns:1fr}.universe-main{min-height:112px}.universe-card{min-height:112px}} .stat-tap,.insight-tap,.card-tap{border:0;font:inherit;color:inherit;text-align:right;cursor:pointer}.stat-tap{background:transparent;width:100%;border-radius:var(--radius-card)}.stat-tap:active,.insight-tap:active,.card-tap:active{transform:scale(.99)}.insight-tap{width:100%;background:inherit}.shop-total.card-tap,.ring-card.card-tap{background:inherit}.stat-tap em{display:block;font-size:12px;color:#a55e70;font-style:normal;margin-top:3px} /* v8.0G Phase7 — Pantry & component UX */ .section-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.section-actions button{min-height:40px} .support-row{gap:12px;align-items:center}.support-row>span:first-child{display:flex;flex-direction:column;gap:3px}.support-row small{color:var(--muted,#746d66);font-size:.74rem}.support-pantry-input{width:92px;padding:7px} .universe-card.validated .universe-main small{font-weight:650} @media(max-width:390px){.section-actions{gap:5px}.section-actions button{font-size:.78rem;padding-inline:8px}.support-row{align-items:flex-start;flex-direction:column}.support-row>span:last-child{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:6px}} /* YEKFI v8.0H — Phase 8 Meal Ecosystem */ .ecosystem-inline{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 2px}.eco-chip{border:1px dashed var(--line,#d7d7d7);background:rgba(255,255,255,.62);border-radius:var(--radius-pill);padding:7px 10px;font-size:12px;min-height:38px}.eco-chip.filled{border-style:solid;background:rgba(245,247,242,.95);font-weight:700}.ecosystem-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}.ecosystem-slot{border:1px solid var(--line,#ddd);border-radius:var(--radius-card);background:rgba(255,255,255,.78);padding:12px;text-align:right;width:100%}.ecosystem-slot.empty{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;border-style:dashed;min-height:74px}.ecosystem-slot.empty span{font-size:23px;grid-row:1/3}.ecosystem-slot.empty b,.ecosystem-slot.empty small{display:block}.ecosystem-slot.filled{padding:0;overflow:hidden}.ecosystem-main{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;width:100%;padding:12px;text-align:right}.ecosystem-main span{font-size:22px;grid-row:1/3}.ecosystem-main b,.ecosystem-main small{display:block}.eco-actions{display:flex;gap:8px;padding:0 12px 12px}.eco-actions button{flex:1;border:0;border-radius:var(--radius-control);padding:9px;background:rgba(0,0,0,.055);min-height:40px}.meal-card .ecosystem-inline{padding-inline:2px}.meal-card .eco-chip{background:rgba(255,255,255,.78)} @media(min-width:620px){.ecosystem-grid{grid-template-columns:repeat(3,1fr)}} /* ========================================================= YEKFI BRAND UI SYSTEM v1.0 Visual-only layer. No application logic is changed. Primary: Olive Green #3F4B34 Accent: Apricot Gold #D4A047 ========================================================= */ :root{ /* Map legacy theme tokens into the approved brand system */ --bg:var(--brand-cream); --surface:var(--brand-paper); --ink:var(--brand-ink); --muted:var(--brand-muted); --line:#DDD4C3; --coral:var(--brand-gold); --coral2:var(--brand-gold-hi); --saffron:#C79735; --berry:var(--brand-olive); --plum:var(--brand-deep); --peach:#F2D9AD; --cream:#F7F2E8; --rose:#E9E4D8; --success:#4F7857; --warn:#A97716; --danger:#B6524C; --shadow:0 22px 55px rgba(35,42,30,.12); --soft:0 8px 24px rgba(35,42,30,.075); } html{background:var(--brand-cream)} body{ background: radial-gradient(circle at 92% 0%,rgba(212,160,71,.09),transparent 24rem), radial-gradient(circle at 0% 80%,rgba(63,75,52,.055),transparent 30rem), var(--brand-cream); color:var(--brand-ink); font-family:"SF Arabic","Noto Sans Arabic",Tahoma,Arial,Inter,system-ui,-apple-system,sans-serif; } ::selection{background:rgba(212,160,71,.28);color:var(--brand-deep)} button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid rgba(212,160,71,.32);outline-offset:2px } /* Branded launch experience */ .brand-splash{ position:fixed;inset:0;z-index:9999;display:grid;place-items:center; background: radial-gradient(circle at 50% 38%,rgba(242,197,107,.13),transparent 17rem), linear-gradient(150deg,#313929 0%,#242A1E 58%,#171B14 100%); animation:yekfiSplash 1.75s cubic-bezier(.4,0,.2,1) forwards; } .brand-splash-inner{text-align:center;transform:translateY(-2vh)} .splash-logo{ width:min(210px,40vw);height:auto;display:block;margin:0 auto 22px; filter:drop-shadow(0 22px 35px rgba(0,0,0,.3)); animation:yekfiLogoEnter .8s cubic-bezier(.2,.85,.25,1) both; } .splash-wordmark{width:min(230px,44vw);height:auto;filter:brightness(0) invert(1);opacity:.96} .splash-tagline{color:var(--brand-gold-hi);font-size:17px;font-weight:800;margin-top:13px;letter-spacing:.05px} .splash-en{color:rgba(255,255,255,.55);font-size:12px;margin-top:6px;letter-spacing:.45px} @keyframes yekfiLogoEnter{from{opacity:0;transform:scale(.86) translateY(10px)}to{opacity:1;transform:none}} @keyframes yekfiSplash{ 0%,66%{opacity:1;visibility:visible} 100%{opacity:0;visibility:hidden;pointer-events:none} } @media(prefers-reduced-motion:reduce){ .brand-splash{animation-duration:.7s}.splash-logo{animation:none} } /* Decorative ambient changed from pink/purple to brand atmosphere */ .ambient-a{background:rgba(212,160,71,.32);opacity:.18} .ambient-b{background:rgba(63,75,52,.25);opacity:.16} /* App chrome */ .app-shell{max-width:980px} .topbar{ height:78px;padding:9px 14px; background:rgba(247,242,232,.91); border-bottom:1px solid rgba(63,75,52,.10); box-shadow:0 7px 24px rgba(36,42,30,.045); backdrop-filter:blur(22px) saturate(1.08); } .brand{gap:9px;padding:0;min-width:0} .brand-icon{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(36,42,30,.18))} .brand-copy{display:grid;gap:1px;justify-items:start;direction:ltr} .brand-wordmark{width:82px;height:20px;object-fit:contain;object-position:left center} .brand-copy small{ color:var(--brand-olive);font-size:12px;font-weight:800;direction:rtl; opacity:.78;white-space:nowrap } .brand-mark{display:none} .budget-pill{ background:linear-gradient(145deg,#FFF9ED,#F1DFC0); border:1px solid rgba(212,160,71,.25); box-shadow:0 5px 15px rgba(83,64,31,.06) } .budget-pill small{color:#77705F} .budget-pill b{color:var(--brand-deep)} .round-icon{ border-color:rgba(63,75,52,.14); background:rgba(255,252,246,.85); color:var(--brand-deep); box-shadow:0 3px 10px rgba(36,42,30,.04) } .round-icon:active{background:var(--brand-sand)} /* Navigation: quiet by default, brand only on selected state */ .bottom-nav{ background:rgba(255,252,246,.94); border-color:rgba(63,75,52,.12); box-shadow:0 18px 46px rgba(36,42,30,.16); } .nav-btn{color:#8A8B82} .nav-btn.active{ color:var(--brand-gold-hi); background:linear-gradient(145deg,var(--brand-olive),var(--brand-deep)); box-shadow:0 7px 16px rgba(36,42,30,.15) } .nav-btn.active i{filter:saturate(.8)} .eyebrow{color:#9B7324} .section-head button{color:#8E6920} /* Hero is the strongest brand surface, not every card */ .hero{ background: radial-gradient(circle at 10% 10%,rgba(242,197,107,.12),transparent 14rem), linear-gradient(140deg,#556344 0%,#3F4B34 52%,#242A1E 100%); color:#FFFDF7; border:1px solid rgba(242,197,107,.18); box-shadow:0 26px 58px rgba(36,42,30,.22); } .hero:after{background:rgba(212,160,71,.10)} .chip{background:rgba(255,255,255,.10);border:1px solid rgba(242,197,107,.12)} .btn.primary{ background:linear-gradient(135deg,var(--brand-gold-hi),var(--brand-gold)); color:#2D301F; box-shadow:0 10px 24px rgba(170,116,24,.20); } .btn.primary:hover{box-shadow:0 12px 28px rgba(170,116,24,.27)} .btn.light{background:#FFFDF7;color:var(--brand-deep)} .btn.soft{background:#F0E5D0;color:#5F552F} .btn.berry{background:#E5E9DE;color:var(--brand-olive)} /* Surface system: white/cream, restrained brand border */ .card,.meal-mini,.meal-card,.member-card,.ring-card,.empty{ background:rgba(255,252,246,.94); border-color:rgba(63,75,52,.10); box-shadow:0 7px 22px rgba(36,42,30,.055); } .glass{background:linear-gradient(145deg,rgba(255,253,248,.96),rgba(246,240,228,.87))} .stat{background:#F3ECDC} .stat:nth-child(2){background:#E8EDDF} .stat:nth-child(3){background:#F5E3BC} .stat b{color:var(--brand-deep)} .summary-banner{ background:linear-gradient(135deg,#F6EBCF,#E9EDDF); border-color:rgba(63,75,52,.09) } .summary-banner .icon{background:#FFFDF7} .meal-mini.main{background:linear-gradient(145deg,#FFFDF7,#F5E7CA)} .microtag{background:#E5EBDD;color:var(--brand-olive)} .microtag.gold{background:#F5E4BA;color:#765316} /* Indicators */ .progress{background:#E9E2D5} .progress i{background:linear-gradient(90deg,var(--brand-olive-2),var(--brand-gold))} .progress.berry i{background:linear-gradient(90deg,var(--brand-deep),var(--brand-olive-2))} .day-tab{border-color:rgba(63,75,52,.10);background:#FFFDF8} .day-tab span,.meal-type{color:#916A21} .day-tab.active{ background:linear-gradient(145deg,#F6E8C6,#E7ECD9); border-color:rgba(212,160,71,.42); box-shadow:inset 0 0 0 1px rgba(212,160,71,.13) } .timeline:before{background:#DDD6C9} .meal-card:before{background:var(--brand-gold);border-color:var(--brand-cream)} .meal-card.snack:before{background:var(--brand-olive-2)} .meal-card.locked{box-shadow:inset 0 0 0 2px rgba(63,75,52,.14),0 6px 19px rgba(36,42,30,.05)} .pill-btn{background:#F1E5C9;color:#795718} .pill-btn.alt{background:#E5EBDD;color:var(--brand-olive)} .pill-btn.gold{background:#F5E4BA;color:#765316} .insight{background:#FBF7EF;border-color:rgba(63,75,52,.09)} /* Shopping: premium olive total with gold progress */ .shop-total{ background: radial-gradient(circle at 0 0,rgba(242,197,107,.12),transparent 10rem), linear-gradient(145deg,var(--brand-olive-2),var(--brand-deep)); color:white;box-shadow:0 17px 35px rgba(36,42,30,.18) } .ring{background:conic-gradient(var(--brand-gold) calc(var(--p)*1%),#E8E1D5 0)} .shop-item{border-bottom-color:#ECE6DA} .shop-item.done .check{background:var(--brand-olive);border-color:var(--brand-olive)} .check{border-color:#D8D0C2} /* Family */ .avatar{ background:linear-gradient(145deg,#F1D9A8,#D8B665);color:#4D452D } .member-card:nth-of-type(even) .avatar{ background:linear-gradient(145deg,#DCE4D1,#B8C5A7);color:var(--brand-olive) } /* Onboarding is light, calm and clearly branded */ .onboarding{ background: radial-gradient(circle at 75% 15%,rgba(212,160,71,.17),transparent 23rem), radial-gradient(circle at 5% 90%,rgba(63,75,52,.11),transparent 26rem), linear-gradient(145deg,#FBF6EC,#EFE8DA); } .on-card{ background:rgba(255,252,246,.95); border-color:rgba(255,255,255,.88); box-shadow:0 30px 80px rgba(36,42,30,.16) } .logo-orb{ background:none;box-shadow:none;border-radius:0; width:48px;height:48px } .logo-orb img{width:48px;height:48px;display:block} .stepper,.choice-row,.quick-stat{background:#F5EFE3} .quick-stat:nth-child(2),.choice-row:nth-child(even){background:#E9EDE1} .budget-number b{color:var(--brand-olive)} .range{accent-color:var(--brand-gold)} .cuisine-card.selected{ border-color:rgba(212,160,71,.50); box-shadow:inset 0 0 0 2px rgba(212,160,71,.10); background:#FFF9EC } /* Generation loader: logo becomes the focal brand animation */ .loader{background:rgba(24,29,20,.48)} .loader-card{background:#FFFDF8} .loader-orb{ width:82px;height:82px;border-radius:var(--radius-hero);background:none;box-shadow:none; animation:yekfiPulse 1.55s infinite } .loader-orb img{width:82px;height:82px;display:block;filter:drop-shadow(0 11px 16px rgba(36,42,30,.18))} @keyframes yekfiPulse{50%{transform:scale(1.035);filter:brightness(1.03)}} .loader-progress{background:#E7E1D6} .loader-progress i{background:linear-gradient(90deg,var(--brand-olive),var(--brand-gold-hi))} .loader-stages span{background:#F1EBDD} .loader-stages span.done{background:#DDE9DB;color:#426548} /* Ready confirmation */ .ready-modal{background:rgba(24,29,20,.42)} .ready-card{ background: radial-gradient(circle at 50% 0,rgba(212,160,71,.10),transparent 16rem), linear-gradient(150deg,#FFFDF8,#F2EBDC 70%,#E9EDDF); } .ready-icon{background:none;box-shadow:none;width:68px;height:68px} .ready-icon img{width:68px;height:68px} .ready-stat{background:#FFFDF8} /* Sheets and form elements */ .sheet{background:rgba(24,29,20,.35)} .sheet-panel,.sheet-head{background:#FFFCF6} .handle{background:#CFC6B8} .note{background:#F5E8CB;color:#665B40} .input{background:#FFFDF9;border-color:#DCD4C6} .input:focus{border-color:var(--brand-gold)} .detail-stat{background:#F3EDDF} .detail-stat:nth-child(even){background:#E8EDDF} .ingredient{border-bottom-color:#EAE3D7} /* Composer brand */ .composer-brand{ background:none;box-shadow:none;color:transparent; width:48px;height:48px;border-radius:0 } .composer-brand img{width:48px;height:48px;display:block} /* Preserve warning/danger semantic colors; everything else follows brand */ .danger,.bad{color:var(--danger)} .good{color:var(--success)} /* Avoid brand saturation on desktop: content stays calm, chrome does the branding */ @media(min-width:720px){ .content{padding-top:14px} .card{box-shadow:0 9px 28px rgba(36,42,30,.06)} } @media(max-width:460px){ .brand-wordmark{width:72px} .brand-copy small{font-size:12px} .budget-pill{min-width:94px;padding:7px 9px} } /* ========================================================= YEKFI VISUAL HARMONY + CONTRAST HARDENING v1.1 Goal: premium brand presence without olive/gold saturation. ========================================================= */ :root{ /* >= 5.2:1 on cream */ /* >= 6.2:1 on cream */ } /* Gold is an accent/material, not body copy on light cards */ .eyebrow,.section-head button,.meal-type,.day-tab span{color:var(--brand-gold-text)} .card,.stat,.summary-banner,.meal-mini,.meal-card,.insight,.member-card,.member-card-v2, .quick-stat,.choice-row,.detail-stat,.unit-card,.universe-card,.ecosystem-slot,.support-card{ color:var(--brand-ink) } .card small,.stat small,.summary-banner small,.meal-mini small,.meal-card p,.insight small, .member-info small,.shop-name small,.shop-qty small,.tiny-muted,.quick-stat small,.choice-row span, .detail-stat small,.field label,.universe-card small,.ecosystem-slot small{ color:var(--brand-muted) } /* Clean card hierarchy: 90% neutral, 10% branded emphasis */ .card,.meal-card,.meal-mini,.member-card,.member-card-v2,.universe-card,.ecosystem-slot{ background:var(--brand-surface); border:1px solid var(--brand-border); } .stat{background:#F4EFE5} .stat:nth-child(2){background:#EBEFE4} .stat:nth-child(3){background:#F4E7C9} .summary-banner{background:#F2EBDD;border-color:var(--brand-border)} .summary-banner.attention{background:#F6E9C7;border-color:rgba(167,119,22,.24)} .summary-banner.risk{background:#F8E8E2;border-color:rgba(182,82,76,.24)} .summary-banner.package-note{ background:linear-gradient(135deg,#F6E9C7,#EEF0E6); border:1px solid rgba(212,160,71,.34) } .summary-banner.package-note .icon{ background:var(--brand-olive);color:var(--brand-gold-hi); box-shadow:none } /* Dark brand surfaces must carry only high-contrast light/gold content */ .hero,.shop-total,.nav-btn.active{ color:#FFFDF7 } .hero .kicker,.hero p,.hero small,.hero .chip,.shop-total small,.shop-total span{ color:rgba(255,253,247,.82) } .hero .eyebrow{color:var(--brand-gold-hi)} .shop-total .microtag.gold{ background:rgba(255,255,255,.11); color:#FFF7E6; border:1px solid rgba(242,197,107,.24) } .nav-btn.active span,.nav-btn.active i{color:var(--brand-gold-hi)} /* Primary actions: dark olive text on gold gives stronger contrast than white */ .btn.primary{color:var(--brand-deep)} .btn.soft{color:#514B3B} .pill-btn{color:var(--brand-gold-text)} .pill-btn.alt{color:var(--brand-olive)} .pill-btn.gold{color:#624712} /* Interactive light surfaces */ .round-icon,.day-tab,.input,.blend-card,.cuisine-card,.shop-item-row{ color:var(--brand-ink) } .input::placeholder{color:#7C8074} .input,select.input,textarea.input{border-color:#D4CBBB} .input:focus{box-shadow:0 0 0 3px rgba(212,160,71,.14)} /* Header: unify icon, wordmark and budget into one visual language */ .topbar{ border-bottom:1px solid rgba(63,75,52,.12); } .brand-icon{width:46px;height:46px} .brand-wordmark{filter:none} .budget-pill{ color:var(--brand-deep); border-color:rgba(212,160,71,.30); } .budget-pill b{font-weight:900} /* Shopping budget status */ .shop-total b{color:#FFFDF7} .shop-total{border:1px solid rgba(242,197,107,.16)} .ring-card .tiny-muted{color:var(--brand-muted)} .ring b{color:var(--brand-deep)} /* Ready state */ .ready-proof{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:11px} .ready-proof span{ background:#E7ECDF;color:#3D563F;border:1px solid rgba(79,120,87,.16); padding:6px 8px;border-radius:var(--radius-pill);font-size:12px;font-weight:800 } .ready-stat{color:var(--brand-ink)} .ready-stat em{color:var(--brand-muted);font-size:12px;font-style:normal} /* Onboarding: selected state reads clearly without large color blocks */ .cuisine-card.selected{color:var(--brand-deep)} .cuisine-card.selected b{color:var(--brand-deep)} .range{accent-color:#B98227} /* Semantic colors remain semantic and never get converted to brand gold */ .good,.positive{color:#356846} .warn,.attention-text{color:#7A5A18} .bad,.negative,.danger{color:#A3423D} /* Reduce decorative noise: no competing gradients on secondary cards */ .glass{background:rgba(255,252,246,.96)} .quick-stat,.choice-row,.detail-stat{box-shadow:none} /* Stronger typography hierarchy */ .page-title{color:var(--brand-deep);font-weight:900;letter-spacing:-.35px} .section-head h2{color:var(--brand-deep);font-weight:900} .page-sub{color:var(--brand-muted);line-height:1.75} .card h2,.card h3,.meal-card h3,.category-head h3{color:var(--brand-deep)} /* Small-screen branding stays elegant rather than crowded */ @media(max-width:390px){ .brand-icon{width:40px;height:40px} .brand-wordmark{width:66px;height:17px} .brand-copy small{display:none} .topbar{grid-template-columns:1fr auto auto;gap:6px} } /* ========================================================= YEKFI HOME STOCK — Shopping Experience v1.3 ========================================================= */ .shopping-mode-switch{ display:grid;grid-template-columns:1fr 1fr;gap:4px; padding:4px;margin:4px 0 14px; background:#EAE4D8;border:1px solid rgba(63,75,52,.10); border-radius:var(--radius-card); } .shopping-mode-switch button{ min-height:42px;border:0;border-radius:var(--radius-card);background:transparent; color:var(--brand-muted);font-size:11px;font-weight:850; } .shopping-mode-switch button.active{ background:var(--brand-surface);color:var(--brand-deep); box-shadow:0 5px 14px rgba(36,42,30,.09); } .home-summary-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 12px } .home-summary-card{ min-width:0;padding:13px 11px;border-radius:var(--radius-card); background:var(--brand-surface);border:1px solid var(--brand-border); box-shadow:0 6px 18px rgba(36,42,30,.045) } .home-summary-card.primary{ background:linear-gradient(145deg,#4E5C40,#313A2A); border-color:rgba(242,197,107,.16);color:#FFFDF7 } .home-summary-card small{display:block;font-size:12px;color:var(--brand-muted);line-height:1.4} .home-summary-card.primary small,.home-summary-card.primary em{color:rgba(255,253,247,.72)} .home-summary-card b{display:block;font-size:19px;margin:4px 0;color:inherit} .home-summary-card em{display:block;font-style:normal;font-size:12px;color:var(--brand-muted);line-height:1.45} .home-filter-bar{ display:flex;gap:6px;overflow:auto;padding:3px 0 8px;scrollbar-width:none } .home-filter-bar::-webkit-scrollbar{display:none} .home-filter-bar button{ flex:0 0 auto;border:1px solid var(--brand-border);background:var(--brand-surface); color:var(--brand-muted);border-radius:var(--radius-pill);padding:8px 12px;font-size:12px;font-weight:850 } .home-filter-bar button.active{ background:var(--brand-olive);border-color:var(--brand-olive);color:#FFFDF7 } .home-stock-toolbar{ min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:10px; margin:3px 2px 6px;color:var(--brand-muted);font-size:12px } .home-stock-toolbar b{color:var(--brand-deep);font-size:11px} .home-stock-toolbar button{ border:0;background:none;color:var(--brand-gold-text);font-weight:900;font-size:12px } .home-stock-list{padding:5px 12px} .home-stock-row{ display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;align-items:center; padding:10px 0;border-bottom:1px solid #ECE5D9 } .home-stock-row:last-child{border-bottom:0} .home-stock-check{ width:30px;height:30px;border-radius:var(--radius-control);border:1.5px solid rgba(63,75,52,.22); background:#F8F4EB;color:var(--brand-olive);display:grid;place-items:center; font-weight:950 } .home-stock-check:active{background:#E8EEDF} .home-stock-main{display:flex;align-items:center;justify-content:space-between;gap:9px;min-width:0} .home-stock-main>div:first-child{min-width:0} .home-stock-main b{display:block;font-size:11px;color:var(--brand-deep)} .home-stock-main small{display:block;font-size:12px;color:var(--brand-muted);margin-top:2px} .home-stock-main em{display:block;font-size:12px;color:#777166;font-style:normal;margin-top:3px;line-height:1.45} .home-stock-value{flex:0 0 auto;text-align:left} .home-stock-value b{font-size:12px} .home-stock-value small{font-size:12px;color:var(--brand-gold-text)} .home-stock-group{ background:var(--brand-surface);border:1px solid var(--brand-border); border-radius:var(--radius-card);padding:10px 12px;margin-bottom:9px; box-shadow:0 5px 17px rgba(36,42,30,.035) } .home-house-row{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center; border-top:1px solid #ECE5D9;padding:8px 0 } .home-house-row:first-of-type{border-top:0} .home-house-row.disabled{opacity:.56} .home-house-main{ border:0;background:none;padding:2px 0;display:flex;align-items:center; justify-content:space-between;gap:8px;text-align:right;min-width:0 } .home-house-main>span:first-child{min-width:0} .home-house-main b{display:block;font-size:12px;color:var(--brand-deep)} .home-house-main small{display:block;margin-top:3px;font-size:12px;color:var(--brand-muted);line-height:1.4} .home-mini-action{ min-width:58px;min-height:32px;padding:5px 7px;border-radius:var(--radius-control); border:1px solid rgba(63,75,52,.12);background:#F4EFE5; color:var(--brand-olive);font-size:12px;font-weight:900 } .home-status{ display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; border-radius:var(--radius-pill);padding:5px 7px;font-size:12px;font-weight:900;white-space:nowrap } .home-status.enough{background:#E4EDDF;color:#3C6842} .home-status.due{background:#F6E1DC;color:#994840} .home-status.soon{background:#F5E7C5;color:#765618} .home-status.unknown{background:#EEE9DF;color:#686A62} .home-status.off{background:#ECEBE7;color:#777872} .home-empty{ padding:24px 16px;border:1px dashed rgba(63,75,52,.18);border-radius:var(--radius-card); background:rgba(255,252,246,.65);text-align:center;margin:8px 0 } .home-empty span{font-size:25px;display:block;margin-bottom:5px} .home-empty b{font-size:11px;color:var(--brand-deep);display:block} .home-empty small{display:block;font-size:12px;color:var(--brand-muted);margin-top:4px} .home-item-head{ display:flex;justify-content:space-between;align-items:center; margin:4px 0 13px } .home-item-head small{color:var(--brand-muted);font-size:12px} .home-inline-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0} .home-inline-actions .btn{padding:10px 7px;font-size:12px} .home-principle{margin-top:14px} @media(max-width:520px){ .home-summary-grid{grid-template-columns:1fr 1fr} .home-summary-card.primary{grid-column:1/-1} } @media(max-width:370px){ .home-stock-main{align-items:flex-start} .home-stock-value{max-width:72px} .home-inline-actions{grid-template-columns:1fr} } .home-toolbar-actions{display:flex;align-items:center;gap:8px} .home-toolbar-actions button{white-space:nowrap} .setup-home{width:100%;text-align:right;border:1px solid rgba(212,160,71,.26);cursor:pointer} .home-setup-list{display:grid;gap:7px;margin-top:10px} .home-setup-row{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center; padding:10px;border-radius:var(--radius-card);background:#F7F2E8;border:1px solid rgba(63,75,52,.10) } .home-setup-row b{display:block;font-size:12px;color:var(--brand-deep)} .home-setup-row small{display:block;font-size:12px;color:var(--brand-muted);margin-top:2px} .home-setup-row>div{display:flex;gap:4px} .home-setup-row button{ border:1px solid rgba(63,75,52,.12);background:#FFFDF8;color:var(--brand-olive); border-radius:var(--radius-control);padding:6px 7px;font-size:12px;font-weight:850 } .home-setup-row button:nth-child(2){color:#8B5E18} .home-setup-row button:nth-child(3){color:#74756F} @media(max-width:430px){ .home-setup-row{grid-template-columns:1fr} .home-setup-row>div{display:grid;grid-template-columns:repeat(3,1fr)} .home-stock-toolbar{align-items:flex-start} .home-toolbar-actions{gap:4px;flex-wrap:wrap;justify-content:flex-end} } /* ========================================================= v1.4 — Weekly total contrast + shopping hierarchy ========================================================= */ .premium-total-wrap{ grid-template-columns:minmax(0,1fr) 92px; gap:9px; align-items:stretch; margin:9px 0 12px; } .premium-total{ position:relative; overflow:hidden; min-height:124px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:right; padding:17px 18px; border-radius:var(--radius-hero); background: radial-gradient(circle at 12% 10%,rgba(242,197,107,.18),transparent 9rem), linear-gradient(145deg,#4B5940 0%,#34402E 55%,#242A1E 100%); border:1px solid rgba(242,197,107,.24); box-shadow:0 18px 36px rgba(36,42,30,.19); } .premium-total::after{ content:""; position:absolute;inset:auto -28px -54px auto; width:120px;height:120px;border-radius:var(--radius-pill); border:1px solid rgba(242,197,107,.13); } .premium-total .total-kicker{ display:block;color:#F4E2B8; font-size:12px;font-weight:900;letter-spacing:.1px; } .premium-total .total-amount{ display:block;color:#FFFDF7; font-size:31px;line-height:1.1; margin:5px 0 6px;font-weight:950; } .premium-total .total-sub{ display:inline-flex; color:#FFF8E8; background:rgba(255,255,255,.09); border:1px solid rgba(242,197,107,.20); border-radius:var(--radius-pill);padding:5px 8px; font-size:12px;font-weight:850; } .premium-total .total-detail{ display:block;color:rgba(255,253,247,.75); font-size:12px;margin-top:7px;line-height:1.45 } .premium-progress{ min-height:124px;padding:10px 5px; background:#FFFDF8; border:1px solid rgba(63,75,52,.14); } .premium-progress .ring{width:64px;height:64px} .premium-progress .ring b{color:var(--brand-deep)} .premium-progress small{ display:block;text-align:center;color:#62675A; line-height:1.45;font-weight:800 } @media(max-width:390px){ .premium-total-wrap{grid-template-columns:minmax(0,1fr) 82px} .premium-total{padding:15px} .premium-total .total-amount{font-size:28px} .premium-progress .ring{width:58px;height:58px} } /* ========================================================= YEKFI CONSUMER EXPERIENCE HARDENING — P0 v1.5 Typography / touch / store execution / launch speed ========================================================= */ :root{ --cx-body:16px; --cx-secondary:14px; --cx-caption:12px; --cx-title:28px; --cx-section:19px; --cx-touch:44px; } /* Operational typography floor. Explicit overrides intentionally win over legacy micro-type without forcing icon geometry to grow. */ .content,.sheet,.modal{font-size:var(--cx-body);line-height:1.48} .page-title{font-size:var(--cx-title);line-height:1.22;letter-spacing:-.25px} .page-sub{font-size:var(--cx-secondary);line-height:1.6} .eyebrow{font-size:var(--cx-caption);letter-spacing:.1px} .section-head h2,.category-head h3{font-size:var(--cx-section);line-height:1.3} .section-head button,.section-actions button,.category-head span, .summary-banner small,.note,.tiny-muted,.field label, .shop-name small,.shop-name em,.shop-qty small, .home-stock-main small,.home-stock-main em,.home-house-main small, .home-summary-card small,.home-summary-card em,.home-stock-toolbar, .home-status,.home-mini-action,.home-filter-bar button, .shopping-mode-switch button,.total-kicker,.total-sub,.total-detail, .member-info small,.member-inline small,.stat small,.stat em{ font-size:var(--cx-caption);line-height:1.45; } .summary-banner b,.shop-name b,.home-stock-main b,.home-house-main b, .member-info b,.member-inline b{font-size:15px;line-height:1.35} .shop-qty b{font-size:17px} .brand-copy small{font-size:11px} .bottom-nav .nav-btn span{font-size:12px} .budget-pill small{font-size:11px} .budget-pill b{font-size:15px} /* 44px minimum hit area for operational controls */ button,.btn,.nav-btn,.day-tab,.shopping-mode-switch button, .home-filter-bar button,.home-mini-action,.shop-check,.shop-main, .section-actions button,.section-head>button,.home-stock-check, .home-house-main,.home-setup-row button{ min-height:var(--cx-touch); } .round-icon{min-width:var(--cx-touch);min-height:var(--cx-touch)} .shop-check{min-width:48px;width:48px;height:48px;border-radius:var(--radius-card)} .shop-check .check{width:27px;height:27px} .shop-item-row{grid-template-columns:48px minmax(0,1fr);gap:11px;padding:12px 0} .shop-main{padding:6px 0} .home-stock-check{width:44px;height:44px} .home-stock-row{grid-template-columns:44px minmax(0,1fr)} .section-actions{gap:5px;flex-wrap:wrap} .section-actions button{padding:8px 10px} /* Faster brand launch: enough to register identity, never blocks daily use */ .brand-splash{animation:yekfiSplashFast .42s ease-out forwards} .splash-logo{animation:none} @keyframes yekfiSplashFast{ 0%,36%{opacity:1;visibility:visible} 100%{opacity:0;visibility:hidden;pointer-events:none} } @media(prefers-reduced-motion:reduce){ .brand-splash{animation-duration:.16s} } /* Dedicated store execution mode */ .store-mode-cta{ width:100%;min-height:70px;margin:4px 0 14px;padding:12px 15px; display:grid;grid-template-columns:42px minmax(0,1fr) 22px;gap:10px;align-items:center; text-align:right;border:1px solid rgba(63,75,52,.16);border-radius:var(--radius-card); background:#FFFDF8;color:var(--brand-deep); box-shadow:0 7px 18px rgba(36,42,30,.055) } .store-mode-cta>span:first-child{font-size:24px} .store-mode-cta b{display:block;font-size:16px} .store-mode-cta small{display:block;font-size:12px;color:var(--brand-muted);margin-top:2px} .store-mode-cta strong{font-size:22px;color:var(--brand-gold-text)} .store-mode-head{ position:sticky;top:0;z-index:20;margin:-12px -14px 8px;padding:10px 14px; min-height:64px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center; background:rgba(247,242,232,.97);border-bottom:1px solid var(--brand-border); backdrop-filter:blur(18px) } .store-mode-head>span{text-align:center} .store-mode-head>span b{display:block;font-size:16px;color:var(--brand-deep)} .store-mode-head>span small{display:block;font-size:12px;color:var(--brand-muted)} .store-exit{ min-height:44px;border:0;background:#FFFDF8;border-radius:var(--radius-card); padding:7px 10px;color:var(--brand-olive);font-size:13px;font-weight:900 } .store-total{font-size:18px;color:var(--brand-deep);white-space:nowrap} .store-search{ display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:6px;align-items:center; margin:8px 0 7px;padding:5px 6px 5px 10px;background:#FFFDF8; border:1px solid var(--brand-border);border-radius:var(--radius-card)} .store-search>span{font-size:22px;color:var(--brand-muted);text-align:center} .store-search input{ min-width:0;height:44px;border:0;outline:0;background:transparent; color:var(--brand-deep);font:inherit;font-size:16px } .store-search button{ min-height:40px;border:0;border-radius:var(--radius-control);padding:7px 10px; background:#EEE9DF;color:var(--brand-muted);font-size:12px;font-weight:850 } .store-search button.active{background:var(--brand-olive);color:#FFFDF7} .store-progress{height:5px;border-radius:var(--radius-pill);background:#E6E1D6;overflow:hidden;margin:0 1px 12px} .store-progress span{display:block;height:100%;background:var(--brand-gold);border-radius:inherit} .store-category{margin-bottom:12px} .store-category .category-head{min-height:46px} .store-category .shop-item-row{min-height:74px} .store-category .shop-name b{font-size:17px} .store-category .shop-name small{font-size:13px;margin-top:3px} .store-category .shop-name em{font-size:12px;margin-top:4px} .store-category .shop-qty b{font-size:18px} .store-category .shop-qty small{font-size:13px} /* Weekly hero readability after typography reset */ .premium-total .total-kicker{font-size:12px} .premium-total .total-amount{font-size:32px} .premium-total .total-sub{font-size:12px} .premium-total .total-detail{font-size:12px} .premium-progress small{font-size:12px} @media(max-width:390px){ :root{--cx-body:15px;--cx-secondary:13px;--cx-caption:12px;--cx-title:25px;--cx-section:18px} .store-mode-head{grid-template-columns:auto 1fr} .store-total{grid-column:1/-1;text-align:center;margin-top:-4px} .store-search{grid-template-columns:26px minmax(0,1fr)} .store-search button{grid-column:1/-1;width:100%} } /* ========================================================= YEKFI CX HARDENING — P1 v1.6 Simplification / hierarchy / restrained iconography ========================================================= */ .today-status-line{ display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:2px 0 12px } .today-status-line>span{ display:inline-flex;min-height:34px;align-items:center;padding:6px 10px; border-radius:var(--radius-pill);background:#F0EBE1;color:var(--brand-muted); font-size:12px;font-weight:800 } .today-status-line button{ margin-inline-start:auto;border:0;background:none;color:var(--brand-gold-text); font-size:12px;font-weight:900;padding:6px 8px } /* Main overflow menu: fewer choices at first glance */ .menu-primary{display:grid;gap:8px} .menu-route{ width:100%;min-height:62px;display:grid;grid-template-columns:40px minmax(0,1fr); align-items:center;gap:10px;text-align:right;padding:10px 12px; border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#FFFDF8;color:var(--brand-deep) } .menu-route.featured{background:#F1E4C8;border-color:rgba(212,160,71,.28)} .menu-route .ui-icon{ width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-control); background:#ECE8DD;color:var(--brand-olive);font-size:18px;font-weight:900 } .menu-route b{display:block;font-size:15px} .menu-route small{display:block;font-size:12px;color:var(--brand-muted);margin-top:2px} .advanced-menu{margin-top:10px;border-top:1px solid var(--brand-border);padding-top:8px} .advanced-menu>summary{ min-height:44px;display:flex;align-items:center;cursor:pointer; color:var(--brand-muted);font-size:13px;font-weight:850 } .advanced-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-bottom:4px} .advanced-actions button{ border:1px solid var(--brand-border);border-radius:var(--radius-control);background:#F7F2E8; color:var(--brand-deep);font-size:12px;font-weight:800;padding:8px } /* Meal cards: two immediate decisions, everything else secondary */ .meal-actions-primary{ display:grid;grid-template-columns:1fr 1fr 48px;gap:7px;align-items:center;margin-top:10px } .meal-actions-primary>.pill-btn{min-height:46px;font-size:13px} .meal-more{position:relative} .meal-more>summary{ list-style:none;min-width:48px;min-height:46px;display:grid;place-items:center; border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#F7F2E8; color:var(--brand-deep);font-size:18px;font-weight:900;cursor:pointer } .meal-more>summary::-webkit-details-marker{display:none} .meal-more>div{ position:absolute;z-index:12;left:0;top:50px;width:170px;padding:6px; background:#FFFDF8;border:1px solid var(--brand-border);border-radius:var(--radius-card); box-shadow:0 14px 30px rgba(36,42,30,.15) } .meal-more>div button{ width:100%;min-height:44px;border:0;background:transparent;text-align:right; color:var(--brand-deep);font-size:13px;font-weight:800;border-radius:var(--radius-control);padding:7px 9px } .meal-more>div button:active{background:#F1ECE2} /* Inline secondary actions do not compete with primary routes */ .inline-more{position:relative} .inline-more>summary{ list-style:none;min-height:44px;display:flex;align-items:center;padding:7px 10px; border:1px solid var(--brand-border);border-radius:var(--radius-control);background:#F7F2E8; color:var(--brand-muted);font-size:12px;font-weight:850;cursor:pointer } .inline-more>summary::-webkit-details-marker{display:none} .inline-more>div{ position:absolute;z-index:12;left:0;top:47px;width:155px;padding:5px; background:#FFFDF8;border:1px solid var(--brand-border);border-radius:var(--radius-card); box-shadow:0 12px 28px rgba(36,42,30,.14) } .inline-more>div button{ display:block;width:100%;min-height:44px;border:0;background:transparent; color:var(--brand-deep);font-size:12px;font-weight:800;text-align:right;padding:7px } /* Reduce visual noise: symbols are supporting cues, not the information architecture */ .summary-banner .icon{font-size:18px;opacity:.78} .meal-ico{font-size:20px} .microtag{font-size:12px} /* Exception-driven Home Stock: unknown setup remains a single task card, while the attention count represents actual due purchases only. */ .setup-home{box-shadow:none;background:#FFF9ED} .home-stock-toolbar{font-size:12px} .home-stock-toolbar b{font-size:15px} @media(max-width:390px){ .advanced-actions{grid-template-columns:1fr} .meal-actions-primary{grid-template-columns:1fr 1fr 46px} .meal-more>div,.inline-more>div{left:auto;right:0} } /* ========================================================= YEKFI CX HARDENING — P1.2 v1.7 Unified visual language / quieter interaction surfaces ========================================================= */ .ui-svg{ width:1.15em;height:1.15em;display:inline-block;vertical-align:-.16em; fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round } .bottom-nav .ui-svg{width:22px;height:22px;stroke-width:1.9} .round-icon .ui-svg{width:22px;height:22px} .menu-route .ui-icon .ui-svg{width:20px;height:20px} .summary-banner .icon .ui-svg{width:20px;height:20px} .store-icon{display:grid;place-items:center} .store-icon .ui-svg{width:25px;height:25px;color:var(--brand-olive)} .hero-meta{ display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 13px;color:var(--brand-muted) } .hero-meta span{ padding:5px 8px;border-radius:var(--radius-pill);background:rgba(255,253,248,.74); border:1px solid rgba(63,75,52,.09);font-size:12px;font-weight:800 } .hero-actions .btn .ui-svg{margin-inline-end:5px} .btn.primary-lite{ background:var(--brand-olive);color:#FFFDF7;border-color:var(--brand-olive) } /* Exception-led home stock summary: only two numbers compete for attention. */ .home-focus-grid{ display:grid;grid-template-columns:1.25fr 1fr;gap:8px;margin:10px 0 8px } .home-focus-card{ min-height:92px;padding:14px;border-radius:var(--radius-card);background:#FFFDF8; border:1px solid var(--brand-border);box-shadow:0 6px 17px rgba(36,42,30,.035) } .home-focus-card.primary{ background:linear-gradient(145deg,#4C593F,#303A2A);color:#FFFDF7; border-color:rgba(242,197,107,.17) } .home-focus-card small{display:block;font-size:12px;color:var(--brand-muted)} .home-focus-card.primary small,.home-focus-card.primary em{color:rgba(255,253,247,.72)} .home-focus-card b{display:block;font-size:27px;line-height:1.1;margin:5px 0} .home-focus-card em{display:block;font-size:12px;font-style:normal;color:var(--brand-muted)} .home-facts{ display:flex;gap:6px;overflow:auto;padding:2px 0 8px;scrollbar-width:none } .home-facts::-webkit-scrollbar{display:none} .home-facts span{ flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;min-height:36px; padding:6px 9px;border-radius:var(--radius-pill);background:#F2EDE3;color:var(--brand-muted); font-size:12px;font-weight:800 } .home-facts .ui-svg{width:15px;height:15px;color:var(--brand-olive)} /* Fewer decorative symbols; icon system carries navigation and actions. */ .menu-route.featured .ui-icon{ background:rgba(212,160,71,.22);color:var(--brand-gold-text) } .bottom-nav .nav-btn i{font-style:normal;display:grid;place-items:center} /* Clean action hierarchy */ .meal-actions-primary>.pill-btn:first-child{font-weight:900} .store-mode-cta strong{opacity:.55} .summary-banner .icon{display:grid;place-items:center} /* Less card noise */ .card,.home-stock-group,.member-card-v2{box-shadow:0 5px 16px rgba(36,42,30,.03)} .insights{gap:7px} .insight{border-color:rgba(63,75,52,.1)} @media(max-width:390px){ .home-focus-grid{grid-template-columns:1fr 1fr} .home-focus-card{padding:12px;min-height:88px} .home-focus-card b{font-size:24px} } /* ========================================================= YEKFI CX HARDENING — P1.3 v1.8 Household Collaboration — local-first interaction model ========================================================= */ .household-hub-entry{ width:100%;min-height:76px;margin:5px 0 13px;padding:12px 14px; display:grid;grid-template-columns:46px minmax(0,1fr) 20px;gap:10px;align-items:center; text-align:right;border:1px solid rgba(212,160,71,.24);border-radius:var(--radius-hero); background:linear-gradient(145deg,#FFF9EC,#F4E9D4);color:var(--brand-deep); box-shadow:0 7px 18px rgba(36,42,30,.045) } .hub-entry-icon{ width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-card); background:var(--brand-olive);color:#FFFDF7 } .hub-entry-icon .ui-svg{width:23px;height:23px} .household-hub-entry b{display:block;font-size:16px} .household-hub-entry small{display:block;margin-top:3px;font-size:12px;color:var(--brand-muted)} .household-hub-entry strong{font-size:22px;color:var(--brand-gold-text)} .hub-hero{ display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center; padding:12px;border-radius:var(--radius-card);background:linear-gradient(145deg,#46523B,#293225); color:#FFFDF7 } .hub-hero>span:first-child{ width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-card); background:rgba(242,197,107,.16);color:var(--brand-gold-hi) } .hub-hero .ui-svg{width:23px;height:23px} .hub-hero b{display:block;font-size:17px} .hub-hero small{display:block;font-size:12px;color:rgba(255,253,247,.7);margin-top:2px} .hub-hero button{ min-height:44px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-control); background:rgba(255,255,255,.08);color:#FFFDF7;font-size:12px;font-weight:900;padding:7px 9px } .hub-privacy{ margin:8px 0 10px;padding:10px 12px;border-radius:var(--radius-card); background:#F3EEE3;border:1px solid var(--brand-border) } .hub-privacy b{display:block;font-size:12px;color:var(--brand-olive)} .hub-privacy small{display:block;font-size:12px;line-height:1.55;color:var(--brand-muted);margin-top:2px} .hub-quick{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px} .hub-quick button{ min-height:50px;border:1px solid var(--brand-border);border-radius:var(--radius-card); background:#FFFDF8;color:var(--brand-deep);font-size:13px;font-weight:850 } .hub-quick .ui-svg{margin-inline-end:5px} .hub-person,.hub-request,.hub-activity{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center; min-height:58px;padding:8px 0;border-bottom:1px solid rgba(63,75,52,.08) } .hub-avatar{ width:38px;height:38px;display:grid;place-items:center;border-radius:var(--radius-pill); background:#E8E1D3;color:var(--brand-olive);font-size:15px;font-weight:900 } .hub-person b,.hub-request b,.hub-activity b{display:block;font-size:14px} .hub-person small,.hub-request small,.hub-activity small{ display:block;font-size:12px;color:var(--brand-muted);margin-top:2px } .hub-person button,.hub-request button{ min-height:40px;border:0;border-radius:var(--radius-control);background:#F0EBE1; color:var(--brand-muted);font-size:12px;font-weight:850;padding:7px 9px } .hub-request{grid-template-columns:minmax(0,1fr) auto} .hub-request .ui-svg{width:15px;height:15px} .hub-activity{grid-template-columns:12px minmax(0,1fr)} .activity-dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--brand-gold)} .sheet-section>h3{font-size:16px;margin:13px 0 7px;color:var(--brand-deep)} @media(max-width:390px){ .hub-quick{grid-template-columns:1fr} .hub-hero{grid-template-columns:44px minmax(0,1fr)} .hub-hero button{grid-column:1/-1} } /* YEKFI CX P1.4 v1.9 — Real-device usability pilot */ .pilot-intro{padding:12px 13px;border-radius:var(--radius-card);background:#F3EEE3;border:1px solid var(--brand-border);margin-bottom:10px}.pilot-intro b{display:block;font-size:14px}.pilot-intro small{display:block;font-size:12px;line-height:1.55;color:var(--brand-muted);margin-top:3px}.pilot-tasks{display:grid;gap:7px}.pilot-tasks>button{min-height:62px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:9px;align-items:center;text-align:right;border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#FFFDF8;color:var(--brand-deep);padding:9px 11px}.pilot-tasks>button>span:first-child{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--radius-control);background:#EEE8DC;color:var(--brand-olive)}.pilot-tasks .ui-svg{width:20px;height:20px}.pilot-tasks b{display:block;font-size:14px}.pilot-tasks small{display:block;font-size:12px;color:var(--brand-muted);margin-top:2px}.pilot-active{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;padding:12px;border-radius:var(--radius-card);background:linear-gradient(145deg,#46523B,#293225);color:#FFFDF7}.pilot-active b{display:block;font-size:15px}.pilot-active small{display:block;font-size:12px;color:rgba(255,255,255,.7);margin-top:2px}.pilot-active button{min-height:44px;border:0;border-radius:var(--radius-control);padding:7px 9px;font-size:12px;font-weight:900}.pilot-bench{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}.pilot-bench span{padding:9px 6px;border-radius:var(--radius-card);background:#F5F0E7;text-align:center}.pilot-bench b{display:block;font-size:14px;color:var(--brand-deep)}.pilot-bench small{display:block;font-size:11px;color:var(--brand-muted);margin-top:2px}.pilot-result{display:flex;justify-content:space-between;gap:8px;align-items:center;min-height:52px;padding:8px 0;border-bottom:1px solid rgba(63,75,52,.08)}.pilot-result b{display:block;font-size:13px}.pilot-result small{display:block;font-size:12px;color:var(--brand-muted);margin-top:2px}.pilot-result strong{font-size:12px}.pilot-result.pass strong{color:#48623F}.pilot-result.fail strong{color:#9A3F36}@media(max-width:390px){.pilot-active{grid-template-columns:1fr 1fr}.pilot-active>span{grid-column:1/-1}.pilot-bench{grid-template-columns:1fr 1fr 1fr}} /* YEKFI v2.2 — Budget recovery: continuation first, same cuisine */ .budget-recovery{ display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;align-items:center; padding:13px;border-radius:var(--radius-card);background:linear-gradient(145deg,#FFF9EC,#F4E9D4); border:1px solid rgba(212,160,71,.22);margin-bottom:9px } .recovery-mark{ width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-card); background:var(--brand-olive);color:#FFFDF7 } .recovery-mark .ui-svg{width:22px;height:22px} .budget-recovery b{display:block;font-size:16px;color:var(--brand-deep)} .budget-recovery small{display:block;margin-top:3px;font-size:12px;line-height:1.5;color:var(--brand-muted)} .recovery-numbers{ display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:7px;margin:8px 0 10px } .recovery-numbers span{ padding:10px;border-radius:var(--radius-card);background:#FFFDF8;border:1px solid var(--brand-border) } .recovery-numbers small{display:block;font-size:12px;color:var(--brand-muted)} .recovery-numbers b{display:block;font-size:17px;margin-top:3px;color:var(--brand-deep)} .recovery-rule{ display:flex;gap:7px;align-items:flex-start;margin:9px 0;padding:9px 10px;border-radius:var(--radius-card); background:#F3EEE3;color:var(--brand-muted);font-size:12px;line-height:1.55 } .recovery-rule .ui-svg{flex:0 0 auto;width:17px;height:17px;margin-top:1px;color:var(--brand-olive)} /* v2.3 — explicit budget consent remains secondary to same-cuisine optimization */ .budget-consent-btn{margin-top:7px} /* v2.4 — unused budget is an opportunity, not a spending target */ .value-opportunity{margin-top:9px} .value-opportunity .icon .ui-svg{width:20px;height:20px} .value-upgrade-btn{margin:7px 0 9px} /* v2.5 — nutrient gap intervention */ .calcium-gap{margin-top:9px} .calcium-gap .icon{font-weight:800;font-size:12px;letter-spacing:-.02em} .calcium-gap-btn{margin:7px 0 9px} .calcium-hero{padding:13px;border-radius:var(--radius-card);background:#F3EEE3;margin-bottom:9px} .calcium-hero b{display:block;font-size:18px;color:var(--brand-deep)} .calcium-hero small{display:block;font-size:12px;line-height:1.55;color:var(--brand-muted);margin-top:3px} .calcium-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center;padding:12px;border:1px solid var(--brand-border);border-radius:var(--radius-card);margin:8px 0;background:#FFFDF8} .calcium-option b{display:block;font-size:14px}.calcium-option small{display:block;font-size:12px;line-height:1.5;color:var(--brand-muted);margin-top:3px} .calcium-option.booster{grid-template-columns:1fr} /* ========================================================= YEKFI v2.7 — MOBILE OVERLAY / BUDGET FLOW HARDENING Every full-screen decision surface owns its scroll. Prevents clipped summary/budget screens and frozen body. ========================================================= */ :root{--app-vh:100dvh} .modal.open{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .onboarding.open, .ready-modal.open{ align-items:flex-start; justify-content:center; overflow-y:auto; overflow-x:hidden; height:100dvh; max-height:100dvh; padding:max(10px,env(safe-area-inset-top)) 10px max(16px,env(safe-area-inset-bottom)); } .onboarding .on-card, .ready-modal .ready-card{ flex:0 0 auto; width:min(610px,100%); max-width:100%; max-height:none; margin:auto 0; box-sizing:border-box; } .ready-modal .ready-card{width:min(500px,100%)} .ready-modal #readyStats{min-width:0} .ready-modal .ready-actions{ position:sticky; bottom:0; z-index:4; margin:14px -8px -8px; padding:10px 8px calc(8px + env(safe-area-inset-bottom)); background:linear-gradient(to top,#FFFDF8 72%,rgba(255,253,248,.94) 86%,rgba(255,253,248,0)); } .sheet.open{ overflow:hidden; height:100dvh; max-height:100dvh; } .sheet-panel{ max-height:min(88dvh,calc(100dvh - env(safe-area-inset-top) - 8px)); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; scrollbar-gutter:stable; } #sheetContent{min-width:0;overflow-wrap:anywhere} @media(max-width:520px){ .onboarding.open,.ready-modal.open{padding-left:7px;padding-right:7px} .onboarding .on-card,.ready-modal .ready-card{ border-radius:var(--radius-hero); padding:15px; } .ready-card h1{font-size:21px;line-height:1.28} .ready-icon{width:52px;height:52px;margin-bottom:4px} .ready-icon img{width:52px;height:52px} .ready-grid{grid-template-columns:1fr 1fr;gap:6px} .ready-stat{padding:9px} .summary-banner{padding:10px} .recovery-numbers{grid-template-columns:repeat(2,minmax(0,1fr))} .ready-actions{gap:6px} .ready-actions .btn{min-width:0} } @media(max-height:700px){ .ready-icon{width:44px;height:44px}.ready-icon img{width:44px;height:44px} .ready-card h1{margin:3px 0 8px} .ready-stat{padding:7px} .ready-modal .ready-actions{margin-top:8px} } html.modal-active,body.modal-active{overflow:hidden;max-height:100dvh} /* v2.8 — visible protein rotation proof */ .protein-proof{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:9px 0;padding:9px 10px;border-radius:var(--radius-card);background:#F3EEE3;text-align:right} .protein-proof b{width:100%;font-size:13px;color:var(--brand-deep)} .protein-proof span{font-size:12px;padding:5px 8px;border-radius:var(--radius-pill);background:#FFFDF8;border:1px solid var(--brand-border)} /* YEKFI v3.0 — Calendar-aware Today Intelligence */ .today-intel{margin:12px 0 16px;padding:12px;border-radius:var(--radius-card);background:linear-gradient(145deg,#F3EEE3,#E9EDDF);border:1px solid rgba(63,75,52,.10)} .today-intel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px} .today-intel-head b{font-size:15px;color:var(--brand-deep)}.today-intel-head small{font-size:12px;color:var(--muted)} .intel-row{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;padding:8px 0;border-top:1px solid rgba(63,75,52,.08)} .intel-row>span{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-control);background:#FFFDF8;font-size:18px} .intel-row b{display:block;font-size:13px}.intel-row small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45} .day-navigator span b{line-height:1.3} /* YEKFI v3.1 — persistent New Plan entry */ .topbar-actions{display:flex;align-items:center;gap:7px;min-width:0} .new-plan-btn{min-height:44px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 11px;border:0;border-radius:var(--radius-card);background:var(--brand-deep);color:#fff;white-space:nowrap} .new-plan-btn span{font-size:20px;line-height:1}.new-plan-btn b{font-size:12px} .new-plan-intro{padding:5px 2px 12px}.new-plan-intro b{display:block;font-size:16px}.new-plan-intro small{display:block;font-size:12px;line-height:1.65;color:var(--muted);margin-top:5px} .new-plan-options{display:grid;gap:8px}.new-plan-options>button{min-height:68px;width:100%;display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;text-align:right;padding:10px;border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#FFFDF8} .new-plan-options>button>span{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--radius-card);background:#F3EEE3;font-size:19px}.new-plan-options b{display:block;font-size:14px}.new-plan-options small{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px} @media(max-width:430px){.topbar{gap:5px}.new-plan-btn{padding:0 9px}.new-plan-btn b{display:none}.budget-pill{padding-inline:8px}.budget-pill small{font-size:11px}} /* YEKFI v4.0 — Accounts + real household cloud */ .cloud-status{width:100%;min-height:64px;display:grid;grid-template-columns:34px 1fr 18px;gap:9px;align-items:center;text-align:right;margin:10px 0;padding:10px;border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#FFFDF8} .cloud-status.live{background:#F0F4E9;border-color:rgba(63,75,52,.20)} .cloud-status>span:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-control);background:#F3EEE3;font-size:17px} .cloud-status b,.cloud-account b,.cloud-house b{display:block;font-size:13px}.cloud-status small,.cloud-account small,.cloud-empty small{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-top:2px} .cloud-state{padding:13px;border-radius:var(--radius-card);background:#F3EEE3;margin-bottom:12px}.cloud-state b{display:block;font-size:15px}.cloud-state small{display:block;font-size:12px;color:var(--muted);line-height:1.6;margin-top:4px} .cloud-account{display:grid;grid-template-columns:42px 1fr;gap:9px;align-items:center;padding:8px 0 12px} .cloud-house{display:grid;gap:2px;padding:12px;border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#FFFDF8;margin-bottom:10px}.cloud-house small{font-size:11px;color:var(--muted)}.cloud-house em{font-size:11px;color:var(--brand);font-style:normal} .cloud-empty{padding:12px 2px}.cloud-empty b{display:block;font-size:14px}.or-line{display:flex;align-items:center;gap:8px;margin:10px 0;color:var(--muted);font-size:11px}.or-line:before,.or-line:after{content:"";height:1px;background:var(--brand-border);flex:1} .invite-code{text-align:center;padding:18px;border-radius:var(--radius-card);background:#F3EEE3;margin:8px 0 12px}.invite-code small{display:block;font-size:12px;color:var(--muted)}.invite-code b{display:block;font-size:28px;letter-spacing:4px;margin-top:5px} /* YEKFI v4.2 — Consumer Simplicity Pass */ .daily-focus{margin-top:10px} .today-intel.compact{margin:10px 0 14px} .today-intel.compact .intel-row{width:100%;grid-template-columns:34px 1fr 16px;border:0;border-top:1px solid rgba(63,75,52,.08);background:transparent;text-align:right;padding:9px 0} .today-intel.compact .intel-row strong{font-size:18px;color:var(--muted)} .meal-strip.compact .meal-mini .microtag{display:none} .house-pulse,.week-pulse{width:100%;display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:center;text-align:right;margin-top:14px;padding:12px;border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#FFFDF8} .house-pulse span,.week-pulse span{min-width:0}.house-pulse small,.week-pulse small{display:block;font-size:11px;color:var(--muted)}.house-pulse b,.week-pulse b{display:block;font-size:13px;margin-top:2px}.house-pulse strong,.week-pulse strong{font-size:11px;color:var(--brand);white-space:nowrap} .meal-meta-simple{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.meal-meta-simple span{font-size:11px;color:var(--muted);background:var(--soft);padding:4px 7px;border-radius:var(--radius-control)} .family-quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 16px}.family-quick-actions button{min-height:48px;border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#FFFDF8;font-size:12px;display:flex;align-items:center;justify-content:center;gap:5px} .member-card-v2 .member-inline{grid-template-columns:repeat(2,1fr)} @media(max-width:430px){.house-pulse,.week-pulse{grid-template-columns:1fr 1fr}.house-pulse strong,.week-pulse strong{grid-column:1/-1}.family-quick-actions{grid-template-columns:1fr 1fr}.family-quick-actions button:last-child{grid-column:1/-1}} /* v4.4 Meal Execution Intelligence */ .cook-hero{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--radius-card);background:var(--soft);margin-bottom:10px}.cook-hero>span{font-size:30px}.cook-hero div{display:grid;gap:2px}.cook-hero small,.cook-hero em{font-size:11px;color:var(--muted);font-style:normal}.cook-hero b{font-size:17px}.cook-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.cook-actions button,.ingredient-choice button,.substitute-list button{min-height:48px;border:1px solid var(--brand-border);background:#fff;border-radius:var(--radius-card);padding:10px 12px}.cook-steps{display:grid;gap:10px;padding-inline-start:24px}.cook-steps li{line-height:1.7}.ingredient-choice,.substitute-list{display:grid;gap:7px}.ingredient-choice button,.substitute-list button{display:flex;align-items:center;justify-content:space-between;text-align:right}.substitute-list button span{display:grid;gap:3px}.substitute-list small{font-size:11px;color:var(--muted)}.acceptance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.acceptance-grid button{min-height:110px;border:1px solid var(--brand-border);background:#fff;border-radius:var(--radius-card);display:grid;place-items:center;gap:3px;font-size:24px;padding:10px}.acceptance-grid b{font-size:13px}.acceptance-grid small{font-size:11px;color:var(--muted)} @media(max-width:430px){.acceptance-grid{grid-template-columns:1fr}.acceptance-grid button{min-height:64px;grid-template-columns:32px 1fr;text-align:right}.acceptance-grid small{grid-column:2}} /* v4.5 Price Intelligence + Life Change */ .price-observe-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.price-observe-row+.input,.price-observe-row{margin-bottom:8px}@media(max-width:430px){.price-observe-row{grid-template-columns:1fr}} /* v4.6 Recipe Import */ .import-text{resize:vertical;line-height:1.6}.import-score{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--radius-card);margin-bottom:10px;background:var(--soft)}.import-score b{font-size:22px}.import-score.risk{border:1px solid #d7a55a}.import-match{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;border-bottom:1px solid rgba(63,75,52,.09)}.import-match span{display:grid;gap:3px}.import-match small{font-size:11px;color:var(--muted)}.import-match.ok> :last-child{font-weight:800}.import-match.bad> :last-child{font-weight:800} .budget-period-toggle{display:flex;gap:8px;margin:8px 0 12px}.budget-period-toggle .option{min-height:44px;flex:1}.budget-direct{display:flex;align-items:center;gap:10px;margin:10px 0}.budget-number-input{font-size:22px;font-weight:800;min-height:52px;text-align:center;max-width:220px}.budget-direct span{font-weight:700} /* v4.8 Nutrition Guardian */ .guardian-gaps{display:grid;gap:8px;margin:12px 0}.guardian-gap{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#fff}.guardian-gap span{display:grid;gap:2px}.guardian-gap small{font-size:11px;color:var(--muted)}.guardian-gap strong{font-size:17px}.guardian-gap.critical{border-width:2px}.guardian-gap.gap{background:var(--soft)} /* v4.9 Recovery Search Experience */ .loader-card{position:relative;overflow:hidden} .loader-card::before,.loader-card::after{content:"";position:absolute;border:1px solid rgba(63,75,52,.18);border-radius:var(--radius-pill);pointer-events:none;animation:yekfiSearchPulse 2.2s ease-out infinite} .loader-card::before{width:88px;height:88px;top:18px;left:calc(50% - 44px)} .loader-card::after{width:126px;height:126px;top:-1px;left:calc(50% - 63px);animation-delay:.65s} .loader-progress{overflow:hidden} .loader-progress i{position:relative;transition:width .35s ease} .loader-progress i::after{content:"";position:absolute;inset:0;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);animation:yekfiScan 1.15s linear infinite} .loader-stages span.done::before{content:"✓ ";font-weight:800} .recovery-search-result{display:flex;gap:12px;align-items:center;padding:14px;border-radius:var(--radius-card);background:var(--soft);margin-bottom:12px} .recovery-search-result .recovery-mark{font-size:24px;animation:yekfiRotate 1.3s linear infinite} .recovery-search-result div:last-child{display:grid;gap:4px} .recovery-options{display:grid;gap:9px;margin:12px 0} .recovery-choice{width:100%;min-height:62px;text-align:right;display:grid;gap:4px;padding:12px 14px;border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#fff} .recovery-choice b{font-size:14px}.recovery-choice small{font-size:12px;line-height:1.55;color:var(--muted)} @keyframes yekfiSearchPulse{0%{transform:scale(.7);opacity:.55}100%{transform:scale(1.45);opacity:0}} @keyframes yekfiScan{from{transform:translateX(230%)}to{transform:translateX(-330%)}} @keyframes yekfiRotate{to{transform:rotate(-360deg)}} @media (prefers-reduced-motion:reduce){.loader-card::before,.loader-card::after,.loader-progress i::after,.recovery-search-result .recovery-mark{animation:none}} /* v5.0 Pilot Clarity & Correctness */ .setup-profile-box{margin:16px 0;padding:14px;border:1px solid rgba(63,75,52,.14);border-radius:var(--radius-card);background:rgba(255,255,255,.72)} .setup-profile-box .section-head{margin:0 0 6px}.setup-profile-box .section-head h3{margin:0;font-size:16px}.setup-profile-box .tiny-muted{margin:0 0 10px;line-height:1.6} .setup-profile-row{display:grid;grid-template-columns:minmax(72px,1fr) 96px 84px;gap:8px;align-items:center;padding:8px 0;border-top:1px solid rgba(63,75,52,.08)} .setup-profile-row:first-of-type{border-top:0}.setup-profile-row b{font-size:14px}.setup-profile-row .input{min-height:44px;padding:8px 10px} .profile-trust{margin:12px 0;padding:12px 14px;border-radius:var(--radius-card);display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;background:#f7f5ee;border:1px solid rgba(63,75,52,.12)} .profile-trust b{font-size:13px}.profile-trust span{font-size:12px;color:#61655c}.profile-trust button{grid-column:2;grid-row:1/3;min-height:40px;border:0;border-radius:var(--radius-control);padding:0 12px;background:#fff;color:#3F4B34;font-weight:700} .profile-trust.review{background:#fff4df}.profile-trust.exact{background:#eef4ea} .profile-review-card{width:100%;min-height:64px;margin:12px 0 18px;border:1px solid rgba(63,75,52,.12);border-radius:var(--radius-card);background:#fff;padding:12px 14px;display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;text-align:right;color:inherit} .profile-review-card>span:nth-child(1){width:36px;height:36px;border-radius:var(--radius-control);display:grid;place-items:center;background:#f2eee1;color:#3F4B34;font-weight:800}.profile-review-card b{display:block;font-size:14px}.profile-review-card small{display:block;margin-top:3px;line-height:1.45;color:#6c7067}.profile-review-card strong{font-size:20px;color:#7d806f} .profile-review-person{width:100%;min-height:56px;border:0;border-bottom:1px solid rgba(63,75,52,.08);background:transparent;padding:10px 2px;display:flex;align-items:center;justify-content:space-between;text-align:right;color:inherit}.profile-review-person span{display:block}.profile-review-person b,.profile-review-person small{display:block}.profile-review-person small{margin-top:3px;color:#73776f} .day-tabs .day-tab b{white-space:nowrap} @media(max-width:390px){.setup-profile-row{grid-template-columns:1fr 88px 76px;gap:6px}.setup-profile-row .input{font-size:16px}} /* v5.0 — single-surface post-generation confirmation */ .generation-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;margin:10px 0 16px;border:1px solid rgba(63,75,52,.18);border-radius:var(--radius-card);background:rgba(242,197,107,.14)} .generation-notice>span{display:grid;gap:3px;min-width:0}.generation-notice b{font-size:15px}.generation-notice small{font-size:12px;line-height:1.45;color:var(--muted,#6d7269)} .generation-notice>div{display:flex;align-items:center;gap:8px;flex:0 0 auto}.generation-notice .icon-btn{width:44px;height:44px;border:0;background:transparent;border-radius:var(--radius-pill);font-size:22px} @media(max-width:430px){.generation-notice{align-items:flex-start}.generation-notice>div{flex-direction:column;align-items:stretch}.generation-notice .btn{min-height:44px}} .generation-notice.needs-review{background:rgba(212,160,71,.16);border-color:rgba(154,100,27,.32)} /* Ensure dismiss controls meet the 44pt operational target used across the app. */ .close-x{width:44px;min-width:44px;height:44px;min-height:44px} /* v5.1 — Unified Pilot Hardening: transparent recovery policy */ .plan-policy-note{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px}.plan-policy-note span{font-size:11px;border:1px solid #E2DED2;border-radius:var(--radius-pill);padding:5px 8px;background:#F8F5ED;color:#67695E} /* v5.2 — Pilot Journey Reliability: truthful plan states */ .empty-state-page{padding:26px 4px 18px;max-width:680px;margin:0 auto} .empty-state-page .eyebrow{display:block;margin-bottom:8px} .empty-state-page h1{font-size:30px;line-height:1.25;margin:0 0 10px;color:var(--ink)} .empty-state-page p{font-size:14px;line-height:1.75;color:var(--muted);margin:0 0 18px;max-width:620px} .plan-pending{padding:22px 18px;border:1px solid rgba(63,75,52,.13);border-radius:var(--radius-hero);background:rgba(255,255,255,.66);box-shadow:0 10px 34px rgba(49,54,42,.05)} .planning-truth{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 18px} .planning-truth span{min-height:34px;display:inline-flex;align-items:center;padding:6px 10px;border-radius:var(--radius-pill);background:#F3EFE3;border:1px solid #E4DDCC;font-size:12px;color:#4F5748;font-weight:700} .pending-actions{display:flex;gap:10px;flex-wrap:wrap}.pending-actions .btn{min-height:48px;flex:1 1 180px} @media(max-width:430px){.empty-state-page h1{font-size:27px}.plan-pending{padding:20px 16px}.pending-actions{display:grid;grid-template-columns:1fr}.pending-actions .btn{width:100%}} /* v6 Registry-first alternatives — compact, decision-oriented, one-hand friendly */ .registry-alternatives{margin:14px 0 2px;padding:14px;border:1px solid var(--line,#e6e2d8);border-radius:var(--radius-card);background:var(--card,#fff)} .registry-alt-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.registry-alt-head span{display:grid;gap:3px}.registry-alt-head small{opacity:.72;line-height:1.45} .registry-alt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.registry-alt-chip{min-height:56px;border:1px solid var(--line,#e6e2d8);border-radius:var(--radius-card);background:var(--soft,#f7f6f1);padding:9px 10px;text-align:right;display:grid;gap:3px}.registry-alt-chip b{font-size:13px}.registry-alt-chip small{font-size:11px;opacity:.72} @media(max-width:520px){.registry-alt-grid{grid-template-columns:1fr}.registry-alt-chip{min-height:50px}} /* v6.1 — Price Intelligence truth surface */ .price-truth-card{margin:10px 0 14px;padding:12px 14px;border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#FFFDF7;display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center}.price-truth-card div{min-width:0}.price-truth-card small{display:block;color:var(--muted);font-size:11px}.price-truth-card b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.price-truth-card p{grid-column:1/-1;margin:0;color:var(--muted);font-size:12px;line-height:1.55}.field-label{display:block;margin:0 0 6px;color:var(--muted);font-size:12px}@media(max-width:430px){.price-truth-card{grid-template-columns:1fr}} /* v6.2 — Weekly budget clarity + iPhone keyboard stability */ .budget-entry-card{display:block;margin:12px 0;padding:14px;border:1px solid var(--brand-border,#e7ddd2);border-radius:var(--radius-card);background:#fff}.budget-entry-card>span{display:block;font-size:13px;font-weight:800;color:var(--muted);margin-bottom:6px}.budget-entry-card .budget-direct{margin:0}.budget-entry-card .budget-direct b{font-size:16px;white-space:nowrap}.budget-number-input{width:min(260px,100%);max-width:100%;font-size:22px;box-sizing:border-box}.budget-policy-title{margin:16px 2px 8px}.budget-policy-title b{display:block;font-size:14px}.budget-policy-title small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.55}.budget-policy-grid{display:grid;grid-template-columns:1fr;gap:8px}.budget-policy-card{width:100%;min-height:70px;border:1px solid var(--brand-border,#e7ddd2);border-radius:var(--radius-card);background:#fff;padding:12px;display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:center;text-align:right}.budget-policy-card>span{width:34px;height:34px;border-radius:var(--radius-control);background:var(--soft,#f5efe8);display:grid;place-items:center;font-weight:900}.budget-policy-card b{display:block;font-size:14px}.budget-policy-card small{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-top:2px}.budget-policy-card.selected{border:2px solid var(--brand,#657052);background:#fbfdf8}.budget-policy-grid.compact .budget-policy-card{min-height:62px}.budget-decision-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.budget-decision-summary span{padding:11px;border-radius:var(--radius-card);background:var(--soft,#f5efe8)}.budget-decision-summary small{display:block;font-size:11px;color:var(--muted)}.budget-decision-summary b{display:block;font-size:14px;margin-top:3px}.selected-policy{cursor:default;background:#f7f8f3;border-style:solid}.recovery-search-result.static-result .recovery-mark{animation:none} @media (max-width:640px){ .onboarding{align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(8px,env(safe-area-inset-top)) 8px max(10px,env(safe-area-inset-bottom))} .on-card{width:100%;max-height:none;margin:0;border-radius:var(--radius-hero);overflow:visible} input,select,textarea,.input{font-size:16px} .budget-number-input{font-size:22px;min-height:56px} } @supports (-webkit-touch-callout:none){input,select,textarea{font-size:16px}} /* v6.3 boot/runtime integrity */ .runtime-recovery-card{max-width:680px;margin:24px auto;padding:24px 20px;border:1px solid rgba(112,72,48,.14);border-radius:var(--radius-hero);background:rgba(255,255,255,.82);box-shadow:0 14px 42px rgba(49,54,42,.07)} .runtime-recovery-card h1{margin:6px 0 10px;font-size:28px;line-height:1.25;color:var(--ink)} .runtime-recovery-card p{margin:0 0 18px;color:var(--muted);line-height:1.75} .boot.fatal{background:#fff3ef;color:#713d31;border-color:#e9c3b8} /* ========================================================= YEKFI v7.3.1 — Real Household Pilot UX Hardening Contract: vertical content; horizontal gestures only navigate days. ========================================================= */ html,body,.app-shell,.content,.view{max-width:100%;overflow-x:hidden} .content{touch-action:pan-y} .view{min-width:0} .day-navigator>button:disabled{opacity:.28;cursor:default} .day-tabs.fixed-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;overflow:visible;width:100%;padding:2px 0 7px} .day-tabs.fixed-days .day-tab{min-width:0;width:100%;padding:8px 3px;border-radius:var(--radius-card);overflow:hidden} .day-tabs.fixed-days .day-tab b{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:390px){.day-tabs.fixed-days{gap:3px}.day-tabs.fixed-days .day-tab{padding-inline:1px}.day-tabs.fixed-days .day-tab b{font-size:9px}} .budget-pill em{display:block;margin-top:2px;font-style:normal;font-size:9.5px;line-height:1.25;color:var(--muted);white-space:nowrap} @media(max-width:430px){.budget-pill em{font-size:9px;max-width:104px;overflow:hidden;text-overflow:ellipsis}} .premium-meal-hero{display:grid;grid-template-columns:minmax(108px,.42fr) minmax(0,1fr);gap:16px;align-items:stretch;padding:14px} .premium-meal-hero:after{pointer-events:none}.premium-meal-hero .hero-copy{align-self:center;min-width:0;position:relative;z-index:2} .meal-visual{width:100%;min-width:0;aspect-ratio:16/10;border-radius:var(--radius-card);overflow:hidden;position:relative;background:#EEE8DB;display:grid;place-items:center} .meal-visual img{width:100%;height:100%;object-fit:cover;display:block} .meal-visual.fallback{background:linear-gradient(145deg,#F4EEE2,#E7E8D9);border:1px solid rgba(63,75,52,.08)} .meal-visual.fallback span{font-size:32px;filter:drop-shadow(0 5px 10px rgba(50,50,30,.12))}.meal-visual.fallback small{position:absolute;bottom:8px;right:9px;padding:3px 7px;border-radius:var(--radius-pill);background:rgba(255,255,255,.75);font-size:9px;color:#555d4e;font-weight:800} .meal-visual.fallback.fish{background:linear-gradient(145deg,#E6F2EF,#D5E7E1)}.meal-visual.fallback.meat{background:linear-gradient(145deg,#F5E9E1,#EAD8CC)}.meal-visual.fallback.chicken{background:linear-gradient(145deg,#F8EFD7,#EBDDCA)}.meal-visual.fallback.legume{background:linear-gradient(145deg,#EEE7D5,#DDD7BF)}.meal-visual.fallback.snack{background:linear-gradient(145deg,#EEF2DF,#DFE9D2)} .hero-visual{aspect-ratio:4/3;min-height:150px} .today-meals-head{margin-top:16px;margin-bottom:8px}.today-meal-stack{display:grid;gap:10px;width:100%} .today-meal-row{display:grid;grid-template-columns:108px minmax(0,1fr);gap:10px;padding:8px;border:1px solid var(--brand-border,var(--line));border-radius:var(--radius-card);background:#FFFDF8;box-shadow:0 6px 18px rgba(45,50,38,.04);min-width:0} .today-meal-row.support{background:#FAFBF5}.today-meal-row.next{box-shadow:inset 0 0 0 1px rgba(196,153,59,.34),0 8px 22px rgba(45,50,38,.05)} .today-meal-row .meal-visual{aspect-ratio:1.2/1}.today-meal-main{border:0;background:transparent;text-align:right;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;padding:4px} .today-meal-main span{min-width:0}.today-meal-main small,.today-meal-main b,.today-meal-main em{display:block}.today-meal-main small{font-size:11px;color:var(--brand,#657052);font-weight:850}.today-meal-main b{font-size:14px;margin:4px 0;color:var(--brand-deep,#3F4B34);overflow-wrap:anywhere}.today-meal-main em{font-style:normal;font-size:10px;color:var(--muted)}.today-meal-main strong{color:var(--brand);font-size:18px} @media(max-width:430px){.premium-meal-hero{grid-template-columns:1fr;gap:10px}.hero-visual{min-height:174px;aspect-ratio:16/9}.today-meal-row{grid-template-columns:92px minmax(0,1fr)}} .timeline{min-width:0}.week-meal-visual{margin-bottom:9px}.week-meal-visual .meal-visual{aspect-ratio:16/7;max-height:150px}.meal-card{min-width:0;overflow:hidden}.meal-top>div{min-width:0}.meal-name-tap{max-width:100%;overflow-wrap:anywhere} .shopping-domains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 14px} .shopping-domains button{min-width:0;border:1px solid var(--brand-border,var(--line));border-radius:var(--radius-card);background:#FFFDF8;padding:11px 8px;text-align:right;display:grid;grid-template-columns:30px 1fr;column-gap:7px;align-items:center} .shopping-domains button>span{font-size:20px;grid-row:1/3}.shopping-domains b,.shopping-domains small{display:block;min-width:0}.shopping-domains b{font-size:11px;color:var(--brand-deep)}.shopping-domains small{font-size:9.5px;color:var(--muted);margin-top:2px}.shopping-domains button.active{background:#F2F4EA;border-color:#A7AF94;box-shadow:inset 0 0 0 1px rgba(63,75,52,.12)} @media(max-width:520px){.shopping-domains{grid-template-columns:1fr 1fr}.shopping-domains button{min-height:64px}} .guardian-working{min-height:220px;display:grid;place-items:center;align-content:center;text-align:center;gap:9px;padding:28px 12px}.guardian-working b{font-size:16px}.guardian-working small{max-width:380px;color:var(--muted);line-height:1.6}.guardian-spinner{width:38px;height:38px;border-radius:var(--radius-pill);border:4px solid #E3E4D8;border-top-color:var(--brand,#657052);animation:guardianSpin .8s linear infinite}@keyframes guardianSpin{to{transform:rotate(360deg)}} /* v7.4.1 Composer viewport contract: one vertical scroll surface, no horizontal page drift. */ .composer-modal,.composer-shell,.composer-head,.composer-content,.composer-stage,.composer-main,.composer-insight,.composer-footer{box-sizing:border-box;max-width:100%} .composer-main,.composer-insight,.composer-title-row,.composer-search,.food-option{min-width:0} .composer-content::-webkit-scrollbar{width:6px} .composer-content::-webkit-scrollbar-thumb{background:#E4D3CA;border-radius:var(--radius-pill)} /* v7.6.2 Friends Pilot RC1 */ .friends-onboard-note{margin:10px 0 13px;padding:11px 12px;border:1px solid rgba(184,137,52,.28);border-radius:var(--radius-card);background:#FBF6E8}.friends-onboard-note b,.friends-onboard-note small{display:block}.friends-onboard-note b{font-size:13px;color:#6F531F}.friends-onboard-note small{margin-top:3px;font-size:11.5px;line-height:1.55;color:var(--brand-muted)} .pilot-menu-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:12px;padding:11px 12px;border-radius:var(--radius-card);background:linear-gradient(145deg,#4C5A40,#2F382A);color:#fff}.pilot-menu-banner span{min-width:0}.pilot-menu-banner b,.pilot-menu-banner small{display:block}.pilot-menu-banner b{font-size:14px}.pilot-menu-banner small{margin-top:2px;font-size:10.5px;color:rgba(255,255,255,.72);overflow-wrap:anywhere}.pilot-menu-banner button{min-height:44px;border:0;border-radius:var(--radius-control);padding:8px 10px;background:#F6E9C6;color:#4B3A19;font-weight:900} .friends-pilot-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:13px;border-radius:var(--radius-card);background:linear-gradient(145deg,#46523B,#293225);color:#fff}.friends-pilot-hero b,.friends-pilot-hero small{display:block}.friends-pilot-hero small{margin-top:3px;color:rgba(255,255,255,.72);font-size:11px}.friends-pilot-hero em{font-style:normal;font-size:11px;font-weight:900;padding:6px 8px;border-radius:var(--radius-pill);background:rgba(255,255,255,.12)}.pilot-truth{margin:10px 0;padding:11px 12px;border-radius:var(--radius-card);background:#F8F2E5;border:1px solid #E7D9B7}.pilot-truth b,.pilot-truth small{display:block}.pilot-truth b{font-size:13px;color:#584722}.pilot-truth small{margin-top:4px;line-height:1.6;font-size:11.5px;color:#6E6554}.pilot-center-actions{display:grid;gap:7px}.pilot-issue-row{padding:9px 0;border-bottom:1px solid rgba(63,75,52,.09)}.pilot-issue-row b,.pilot-issue-row small,.pilot-issue-row p{display:block}.pilot-issue-row small{margin-top:2px;font-size:10.5px;color:var(--brand-muted)}.pilot-issue-row p{margin:5px 0 0;font-size:12px;line-height:1.55;color:var(--brand-deep)} @media(max-width:390px){.pilot-menu-banner,.friends-pilot-hero{grid-template-columns:1fr}.pilot-menu-banner button{width:100%}} /* v7.6.3 Friends Pilot RC2 — install/offline/session hardening */ .yekfi-network-banner{position:fixed;z-index:2200;top:max(8px,env(safe-area-inset-top));left:50%;transform:translate(-50%,-130%);width:min(92vw,520px);padding:9px 12px;border-radius:var(--radius-card);background:#7E4D21;color:#FFF9EF;font-size:11.5px;font-weight:800;line-height:1.45;text-align:center;box-shadow:0 10px 26px rgba(38,32,24,.18);transition:transform .22s ease;pointer-events:none}.yekfi-network-banner.show{transform:translate(-50%,0)} .pilot-runtime-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:9px 0 10px}.pilot-runtime-grid span{min-width:0;padding:9px 5px;border-radius:var(--radius-card);background:#F2EEE4;border:1px solid rgba(63,75,52,.08);text-align:center}.pilot-runtime-grid b,.pilot-runtime-grid small{display:block}.pilot-runtime-grid b{font-size:11px;line-height:1.25;overflow-wrap:anywhere}.pilot-runtime-grid small{font-size:9.5px;margin-top:3px;color:var(--brand-muted)}.pilot-runtime-grid span.ok{background:#EDF3E8;border-color:#D8E6D1}.pilot-runtime-grid span.ok b{color:#44613D}.pilot-runtime-grid span.warn{background:#FFF0E1;border-color:#EBD2B8}.pilot-runtime-grid span.warn b{color:#905722} .pilot-session-state{margin:9px 0;padding:11px 12px;border-radius:var(--radius-card);background:#EDF3E8;border:1px solid #D8E6D1}.pilot-session-state b,.pilot-session-state small{display:block}.pilot-session-state b{font-size:13px;color:#44613D}.pilot-session-state small{margin-top:3px;font-size:10.5px;line-height:1.5;color:var(--brand-muted)}.pilot-session-state.done{background:#F4F0E5;border-color:#E6D9BC}.pilot-session-state.done b{color:#705B2A}.danger-note{background:#FCEBE7;border-color:#E7C2BA;color:#7D3D34} @media(max-width:360px){.pilot-runtime-grid{grid-template-columns:1fr}.yekfi-network-banner{font-size:10.5px}} /* ========================================================= YEKFI v7.7.0 — CONSUMER UX 9.6 HARDENING Goal: progressive disclosure, readable Arabic, calm hierarchy, intentional horizontal navigation only, and measurable touch UX. ========================================================= */ :root{ --ux-body:15px; --ux-secondary:13px; --ux-caption:12px; --ux-radius-card:18px; --ux-radius-control:14px; } /* Persistent chrome: keep only the frequent information. */ .topbar{grid-template-columns:minmax(0,1fr) auto auto;gap:8px;height:72px;padding-block:9px} .topbar-actions{gap:0} .budget-pill{min-width:118px;padding:7px 11px;border-radius:var(--radius-card);background:#F0EEE5;border:1px solid rgba(63,75,52,.08)} .budget-pill small{font-size:11px} .budget-pill b{font-size:15px;line-height:1.25} .budget-pill em{font-size:10.5px;max-width:132px;color:#6F705F} @media(max-width:390px){ .topbar{padding-inline:10px;gap:6px} .brand-copy small{display:none} .budget-pill{min-width:105px;padding-inline:9px} } /* Readability floor for actual consumer copy. */ .on-step-lead p,.ux-budget-card>small,.ux-policy-title small,.budget-policy-card small, .cuisine-card small,.blend-card small,.ux-house-total small,.ux-trust-strip span, .today-meal-main em,.today-meal-main small,.meal-meta-simple span,.meal-more button{ font-size:var(--ux-secondary); line-height:1.55; } .today-meal-main b,.meal-name-tap{font-size:15px;line-height:1.45} .page-sub{max-width:42rem} /* Onboarding: one decision family per step. */ .onboarding{background:linear-gradient(145deg,#F6F2E8,#EEE9DD 54%,#E9EBDD)} .on-card{width:min(620px,100%);padding:18px 20px 20px;border-radius:var(--radius-hero);background:rgba(255,253,248,.96);box-shadow:0 24px 70px rgba(46,49,39,.13)} .on-head b{font-size:15px}.on-head small{font-size:12px}.on-card>.progress{height:6px;margin:13px 0 18px} .ux-on-step{display:grid;gap:14px} .on-step-lead{display:grid;gap:6px}.on-step-lead .step-kicker{margin:0}.on-step-lead h1{font-size:28px;line-height:1.2;margin:0;color:var(--brand-deep)}.on-step-lead p{margin:0;color:var(--brand-muted);max-width:46ch} .ux-mode-choice{margin:0;gap:9px}.ux-mode-choice button{min-height:82px;padding:12px;border-radius:var(--radius-card);grid-template-columns:30px minmax(0,1fr);align-content:center}.ux-mode-choice button>span{width:28px;height:28px;display:grid;place-items:center;color:var(--brand-olive)}.ux-mode-choice .ui-svg{width:22px;height:22px}.ux-mode-choice b{font-size:14px}.ux-mode-choice small{font-size:12px;line-height:1.4} .house-count-list{display:grid;gap:8px}.ux-stepper{margin:0;min-height:66px;border-radius:var(--radius-card);padding:10px 12px;background:#F2EEE4}.ux-stepper b{font-size:14px}.ux-stepper small{font-size:12px}.ux-stepper .round-step{width:44px;height:44px;border-radius:var(--radius-card);font-size:20px}.ux-stepper .count{font-size:18px;min-width:32px} .ux-house-total{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:11px 13px;border-radius:var(--radius-card);background:#E9EDE1;color:var(--brand-deep)}.ux-house-total span{font-size:12px;color:var(--brand-muted)}.ux-house-total b{font-size:16px}.ux-house-total small{grid-column:1/-1;color:var(--brand-muted)} .ux-on-actions{margin-top:0}.ux-on-actions .btn{min-width:118px} .ux-profile-box{margin:0;padding:10px 14px 4px;border-radius:var(--radius-card);background:#FFFDF8;border:1px solid rgba(63,75,52,.12)} .setup-profile-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 8px}.setup-profile-head b{display:block;font-size:14px}.setup-profile-head small{display:block;font-size:12px;color:var(--brand-muted)}.setup-profile-head em{font-style:normal;font-size:11px;color:var(--brand-olive);background:#EEF0E6;padding:5px 8px;border-radius:var(--radius-pill)} .ux-profile-box .setup-profile-row{grid-template-columns:minmax(82px,1fr) 104px 92px;gap:8px;padding:9px 0}.ux-profile-box .setup-profile-row b{font-size:14px}.ux-profile-box .input{min-height:46px;border-radius:var(--radius-card)} .ux-budget-card{display:grid;gap:4px;margin:0;padding:14px 16px;border-radius:var(--radius-card);background:#F2EEE4;border:1px solid rgba(63,75,52,.10)} .ux-budget-card>span{font-size:13px;font-weight:800}.ux-budget-card .budget-direct{margin:4px 0}.ux-budget-card>small{color:var(--brand-muted)} .ux-policy-title{margin:0;display:grid;gap:2px}.ux-policy-title b{font-size:14px}.ux-policy-title small{color:var(--brand-muted)} .ux-budget-policy{gap:9px}.ux-budget-policy .budget-policy-card{min-height:78px;padding:11px 12px;border-radius:var(--radius-card)}.ux-budget-policy .budget-policy-card b{font-size:14px} .ux-cuisine-grid{gap:8px;margin:0}.ux-cuisine-grid .cuisine-card{min-height:68px;padding:10px 12px;border-radius:var(--radius-card)}.ux-cuisine-grid .cuisine-card b{font-size:14px}.ux-cuisine-grid .cuisine-emoji{font-size:25px}.blend-disclosure{margin-top:2px;border-top:1px solid rgba(63,75,52,.08);padding-top:8px}.blend-disclosure summary{min-height:44px;display:flex;align-items:center;color:var(--brand-olive);font-size:13px;font-weight:800;cursor:pointer}.ux-blend-list{margin:4px 0 0}.ux-blend-list .blend-card{min-height:58px;border-radius:var(--radius-card)} .ux-final-step{gap:13px}.ux-final-orb{margin:0;padding:16px;border-radius:var(--radius-card)}.ux-final-orb .ui-svg{width:24px;height:24px}.ux-choice-summary{gap:6px}.ux-choice-summary .choice-row{min-height:50px;border-radius:var(--radius-card);padding:10px 12px}.ux-choice-summary .choice-row span{font-size:12px}.ux-choice-summary .choice-row b{font-size:14px} .ux-trust-strip{display:grid;gap:6px;padding:11px 13px;border-radius:var(--radius-card);background:#EEF1E7;color:#4A5541}.ux-trust-strip span{display:block} @media(max-width:640px){ .on-card{min-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(18px,env(safe-area-inset-bottom)));display:flex;flex-direction:column} #onContent{flex:1;display:flex}#onContent>.ux-on-step{width:100%;align-content:start} } @media(max-width:390px){ .on-card{padding:14px 14px 16px;border-radius:var(--radius-hero)} .on-card>.progress{margin:10px 0 14px} .on-step-lead h1{font-size:25px} .ux-mode-choice{grid-template-columns:1fr 1fr} .ux-profile-box .setup-profile-row{grid-template-columns:minmax(72px,1fr) 91px 79px;gap:6px} .ux-budget-policy{grid-template-columns:1fr} } /* Week: horizontal movement is explicitly day navigation, never layout overflow. */ .day-strip{display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 1px 9px;margin:2px 0 4px;touch-action:pan-x} .day-strip::-webkit-scrollbar{display:none}.day-chip{flex:0 0 64px;min-width:64px;min-height:52px;scroll-snap-align:center;border:1px solid rgba(63,75,52,.11);border-radius:var(--radius-card);background:#F7F4EC;color:var(--brand-muted);display:grid;place-items:center;gap:1px;padding:6px 5px}.day-chip small{font-size:10.5px}.day-chip b{font-size:12.5px}.day-chip.active{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep);box-shadow:0 7px 18px rgba(48,57,42,.16)}.day-chip.active small{color:rgba(255,255,255,.72)} .ux-meal-actions{justify-content:space-between;align-items:center}.ux-meal-actions .pill-btn{min-width:94px}.ux-meal-actions .pill-btn .ui-svg{width:16px;height:16px;margin-left:4px;vertical-align:middle}.meal-card{border-radius:var(--radius-card);box-shadow:0 4px 14px rgba(45,50,38,.035)} .meal-more summary{min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:var(--radius-card);background:#F2EEE4;color:var(--brand-deep)} /* Today: calm information hierarchy. */ .ux-hero-meta{display:flex;gap:7px;flex-wrap:wrap}.ux-hero-meta span{padding:6px 9px;border-radius:var(--radius-pill);background:#F0EEE5;color:#5F6758;font-size:12px}.today-meal-row{box-shadow:none;border-color:rgba(63,75,52,.09);border-radius:var(--radius-card)}.today-meal-row:not(.next){background:rgba(255,253,248,.68)} .today-meal-main small{font-size:12px}.today-meal-main b{font-size:15px}.today-meal-main em{font-size:12px;color:#78786A} /* Avoid micro-copy in key financial surfaces. */ .total-kicker,.total-sub,.total-detail,.shop-name small,.shop-name em,.shop-qty small{font-size:12px;line-height:1.45} /* No accidental horizontal layout drift. */ .on-card,.ux-on-step,.ux-profile-box,.ux-budget-card,.ux-cuisine-grid,.ux-choice-summary,.timeline,.meal-card{min-width:0;max-width:100%} /* ========================================================= v7.7.0 — Consumer UX 9.6 Hardening / Wave 2 Measured corrections from certified HH7 Gulf runtime QA. ========================================================= */ /* Critical touch targets: meal title and optional ecosystem additions are real actions. */ .meal-name-tap{ min-height:44px; width:100%; display:flex; align-items:center; justify-content:flex-start; padding-block:6px; } .eco-chip{ min-height:44px; padding-block:9px; } /* Arabic readability floor on consumer surfaces. Tiny engineering metadata stays in advanced/pilot sheets only. */ .meal-visual.fallback small{font-size:11.5px;line-height:1.25} .shopping-domains small{font-size:11.5px;line-height:1.35} .shopping-domains b{font-size:12.5px;line-height:1.35} .day-chip small{font-size:11.5px;line-height:1.25} .day-chip b{font-size:13px;line-height:1.25} .budget-pill em{font-size:11.5px;line-height:1.25} /* Keep compact metadata readable without turning cards into dashboards. */ #today .eyebrow,#week .eyebrow,#shopping .eyebrow,#family .eyebrow{font-size:12px} #today .muted,#week .muted,#shopping .muted,#family .muted{line-height:1.55} /* v7.7.0 Wave 3 — Store-mode containment and accessible touch contract */ .store-mode-head{ margin:0 0 8px; padding:10px 8px; width:100%; max-width:100%; border:1px solid var(--brand-border); border-radius:var(--radius-card); } .store-search button{min-height:44px} /* v7.7.0 Wave 4 — robust 44px gate with rendering tolerance */ #today .hero-actions .btn{min-height:46px} #shopping .section-actions>button{min-height:46px} /* v7.7.0 — Measured usability instrument (not a consumer feature surface) */ .ux-active-measure{grid-template-columns:1fr} .ux-active-measure>span{grid-column:auto} .ux-active-measure button{width:100%;min-height:46px} .ux-ease-question{margin:14px 0 10px;font-size:15px;font-weight:850;color:var(--brand-deep);text-align:center} .ux-ease-scale{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:5px;direction:ltr} .ux-ease-scale button{min-width:44px;min-height:48px;border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#FFFDF8;color:var(--brand-deep);font-size:16px;font-weight:900} .ux-ease-anchors{display:flex;justify-content:space-between;margin-top:7px;color:var(--brand-muted);font-size:12px} @media(max-width:360px){.ux-ease-scale{grid-template-columns:repeat(7,minmax(40px,1fr));gap:3px}.ux-ease-scale button{min-width:40px}} @media(max-width:360px){.ux-ease-scale{grid-template-columns:repeat(4,minmax(44px,1fr));gap:5px}.ux-ease-scale button{min-width:44px}} .meal-name-tap{min-height:46px} .ux-stepper .round-step:disabled{opacity:.35;cursor:not-allowed;box-shadow:none} /* v7.7.0 Wave 5 — measured 9.6 evidence + calm containment */ .premium-meal-hero:after{content:none} .premium-meal-hero,.premium-meal-hero>*{min-width:0;max-width:100%} .house-pulse small,.week-pulse small{font-size:12.5px;line-height:1.35} .house-pulse strong,.week-pulse strong{font-size:12px;line-height:1.35} .pilot-menu-banner small{font-size:11.5px} .ux-measured-score{margin:10px 0 14px;padding:12px;border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#FFFDF8;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .ux-measured-score>span{padding:8px;border-radius:var(--radius-control);background:#F3EFE5;text-align:center}.ux-measured-score small{display:block;font-size:11.5px;color:var(--brand-muted)}.ux-measured-score b{display:block;margin-top:3px;font-size:16px;color:var(--brand-deep)} .ux-measured-score em{grid-column:1/-1;font-style:normal;font-size:12px;line-height:1.45;text-align:center;color:var(--brand-muted)} .ux-measured-score.pass{background:#EEF4EA;border-color:#B8C8AB}.ux-measured-score.pass em{color:#44583C;font-weight:800} @media(max-width:360px){.ux-measured-score{grid-template-columns:1fr}.ux-measured-score em{grid-column:auto}} /* v7.7.0 Wave 7 — accessibility contrast + resilient focus semantics */ :root{ --warn:#80600F; --danger:#A94B46; } button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{ outline:2px solid #FFFCF6; outline-offset:2px; box-shadow:0 0 0 5px var(--brand-olive); } .nav-btn[aria-current="page"]{font-weight:900} .day-chip[aria-current="date"]{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep);box-shadow:0 7px 18px rgba(48,57,42,.16)} .day-chip[aria-current="date"] small{color:rgba(255,255,255,.82)} /* v7.7.0 Wave 8 — standardized post-task usability evidence */ .ux-sus-list{display:grid;gap:10px;margin:10px 0 12px} .ux-sus-item{margin:0;padding:11px 12px;border:1px solid var(--brand-border);border-radius:var(--radius-card);background:#FFFDF8;min-width:0} .ux-sus-item legend{padding:0 4px;color:var(--brand-deep);font-size:13px;font-weight:850;line-height:1.55} .ux-sus-scale{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:6px;margin-top:8px;direction:ltr} .ux-sus-scale label{position:relative;min-width:44px;min-height:46px;cursor:pointer} .ux-sus-scale input{position:absolute;opacity:0;pointer-events:none} .ux-sus-scale span{width:100%;height:100%;min-height:46px;display:grid;place-items:center;border:1px solid var(--brand-border);border-radius:var(--radius-control);background:#F5F0E6;color:var(--brand-deep);font-weight:900} .ux-sus-scale input:checked+span{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep)} .ux-sus-scale input:focus-visible+span{outline:2px solid #FFFCF6;outline-offset:2px;box-shadow:0 0 0 5px var(--brand-olive)} @media(max-width:340px){.ux-sus-scale{gap:4px}.ux-sus-item{padding-inline:9px}} /* v9.8.0 — keyboard skip link */ .skip-link{ position:fixed;z-index:400;top:max(8px,env(safe-area-inset-top));right:12px; transform:translateY(-160%);padding:10px 14px;border-radius:var(--radius-control); background:#1F3525;color:#FFFDF8;font-size:14px;font-weight:850;text-decoration:none; box-shadow:0 8px 24px rgba(23,40,28,.24); } .skip-link:focus{transform:translateY(0)} /* ===== signature-ui-v830.v1003.css ===== */ /* ================================================================ YEKFI v8.3 — Signature Master Presentation System Contemporary Arab Quiet Luxury Presentation-only layer. Core planning/economics remain untouched. ================================================================ */ :root{ --yk-bg:#F6F2E9; --yk-bg-deep:#EEE8DC; --yk-paper:#FFFDF8; --yk-paper-2:#FBF8F1; --yk-paper-3:#F2EEE4; --yk-ink:#172018; --yk-ink-soft:#5D655E; --yk-ink-faint:#858B84; --yk-forest-950:#142019; --yk-forest-900:#1A2A20; --yk-forest-850:#203326; --yk-forest-800:#29402F; --yk-forest-700:#3A5740; --yk-gold-700:#9A6E26; --yk-gold-600:#B88631; --yk-gold-500:#D2A74E; --yk-gold-400:#E0BC6B; --yk-gold-300:#EED58F; --yk-success:#44764D; --yk-danger:#9B4A43; --yk-line:#DED7C9; --yk-line-strong:#CFC3AE; --yk-line-gold:rgba(184,134,49,.42); --yk-shadow-1:0 1px 0 rgba(255,255,255,.92) inset,0 5px 16px rgba(40,45,35,.055); --yk-shadow-2:0 1px 0 rgba(255,255,255,.9) inset,0 12px 30px rgba(35,42,33,.09),0 2px 6px rgba(35,42,33,.04); --yk-shadow-3:0 1px 0 rgba(255,255,255,.22) inset,0 20px 46px rgba(19,31,23,.18),0 5px 13px rgba(19,31,23,.08); --yk-r-sm:14px; --yk-r-md:18px; --yk-r-lg:24px; --yk-r-xl:30px; --yk-s1:4px; --yk-s2:8px; --yk-s3:12px; --yk-s4:16px; --yk-s5:20px; --yk-s6:24px; --yk-s7:32px; --yk-s8:40px; --yk-s9:48px; } html{background:var(--yk-bg);scroll-behavior:smooth} body.yekfi-signature{ margin:0; min-height:100vh; color:var(--yk-ink); background: radial-gradient(circle at 92% 0%,rgba(223,194,126,.13),transparent 23rem), radial-gradient(circle at -10% 72%,rgba(71,91,62,.07),transparent 26rem), var(--yk-bg); font-family:-apple-system,BlinkMacSystemFont,"SF Arabic","Geeza Pro","Segoe UI",Tahoma,Arial,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } body.yekfi-signature .ambient{display:none} body.yekfi-signature button{-webkit-tap-highlight-color:transparent} body.yekfi-signature button:active{transform:scale(.985)} body.yekfi-signature button:focus-visible, body.yekfi-signature input:focus-visible, body.yekfi-signature select:focus-visible, body.yekfi-signature textarea:focus-visible{ outline:2px solid var(--yk-gold-500); outline-offset:3px; } /* ---------- App frame ---------- */ body.yekfi-signature .app-shell{max-width:760px;min-height:100vh;margin:auto;position:relative} body.yekfi-signature .topbar{ min-height:92px;height:auto; display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center; position:sticky;top:0;z-index:60; padding:max(10px,env(safe-area-inset-top)) 16px 14px; background:rgba(248,244,235,.91); backdrop-filter:blur(24px) saturate(1.12); border:0; box-shadow:0 1px 0 rgba(255,255,255,.76) inset,0 1px 0 rgba(126,105,67,.12); } body.yekfi-signature .topbar::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none; background:linear-gradient(90deg,transparent 0 5%,rgba(184,134,49,.08) 11%,var(--yk-gold-500) 34%,rgba(224,188,107,.62) 50%,rgba(184,134,49,.15) 72%,transparent 96%); opacity:.78; } body.yekfi-signature .brand{min-width:0;gap:9px;justify-self:end;padding:0;background:transparent} body.yekfi-signature .brand-icon{width:36px;height:36px;filter:drop-shadow(0 5px 9px rgba(31,41,28,.13))} body.yekfi-signature .brand-copy{display:grid;gap:2px;min-width:0} body.yekfi-signature .brand-wordmark{height:18px;width:auto;max-width:88px} body.yekfi-signature .brand-copy small{font-size:10.8px;color:var(--yk-ink-soft);font-weight:650;white-space:nowrap} body.yekfi-signature .topbar-actions{justify-self:start} body.yekfi-signature .budget-pill{ min-width:126px;max-width:164px;padding:8px 12px;border:1px solid var(--yk-line-strong);border-radius:var(--radius-card); color:var(--yk-ink);text-align:right; background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(248,244,235,.92)); box-shadow:var(--yk-shadow-1); } body.yekfi-signature .budget-pill small{font-size:10.5px;color:var(--yk-ink-soft);font-weight:650} body.yekfi-signature .budget-pill b{font-size:15px;color:var(--yk-ink);line-height:1.2} body.yekfi-signature .budget-pill em{font-size:9.5px;color:var(--yk-gold-700);font-style:normal;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:134px} body.yekfi-signature .round-icon{ width:42px;height:42px;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong); background:linear-gradient(180deg,#fff,var(--yk-paper-2));color:var(--yk-forest-900); box-shadow:var(--yk-shadow-1); } body.yekfi-signature .round-icon .ui-svg{width:20px;height:20px} body.yekfi-signature .content{padding:18px 14px calc(104px + env(safe-area-inset-bottom));overflow-x:hidden} body.yekfi-signature .view{animation:ykPageIn .28s cubic-bezier(.22,.75,.28,1)} @keyframes ykPageIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} /* ---------- Bottom nav ---------- */ body.yekfi-signature .bottom-nav{ position:fixed;z-index:70;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%); width:min(700px,calc(100% - 24px));height:72px;padding:6px; display:grid;grid-template-columns:repeat(4,1fr);gap:4px; border:1px solid rgba(202,193,176,.88);border-radius:var(--radius-hero); background:rgba(255,253,248,.94);backdrop-filter:blur(24px) saturate(1.1); box-shadow:0 1px 0 #fff inset,0 18px 42px rgba(29,40,29,.16),0 4px 12px rgba(29,40,29,.07); } body.yekfi-signature .nav-btn{ position:relative;min-height:58px;padding:7px 4px;border-radius:var(--radius-card);color:#687169;background:transparent; display:grid;place-items:center;align-content:center;gap:3px;font-size:11px;font-weight:700; transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .16s ease; } body.yekfi-signature .nav-btn i{font-size:0}.nav-btn .ui-svg{width:22px;height:22px} body.yekfi-signature .nav-btn.active{ color:var(--yk-gold-300); background:linear-gradient(145deg,var(--yk-forest-800),var(--yk-forest-950)); box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 22px rgba(23,36,27,.18); } body.yekfi-signature .nav-btn.active::before{content:"";position:absolute;top:-2px;width:26px;height:3px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--yk-gold-600),var(--yk-gold-300));box-shadow:0 0 10px rgba(210,167,78,.28)} /* ---------- Shared signature modules ---------- */ body.yekfi-signature .sig-page{display:grid;gap:var(--yk-s7);padding-bottom:2px} body.yekfi-signature .sig-page>*{min-width:0} body.yekfi-signature .sig-context-bar{ min-height:46px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center; margin:0 2px;padding:0 2px;color:var(--yk-ink); } body.yekfi-signature .sig-context-bar>button{ width:42px;height:42px;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong);background:var(--yk-paper);box-shadow:var(--yk-shadow-1);font-size:22px;color:var(--yk-forest-900) } body.yekfi-signature .sig-context-bar>button:disabled{opacity:.35} body.yekfi-signature .sig-context-bar>span{text-align:center;display:grid;gap:1px} body.yekfi-signature .sig-context-bar small{font-size:11px;color:var(--yk-gold-700);font-weight:800} body.yekfi-signature .sig-context-bar b{font-size:14px;letter-spacing:-.1px} body.yekfi-signature .sig-section{display:grid;gap:12px;min-width:0} body.yekfi-signature .sig-section-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 4px 3px;position:relative; } body.yekfi-signature .sig-section-head::before{ content:"";position:absolute;right:0;bottom:-4px;width:42px;height:3px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--yk-gold-700),var(--yk-gold-300)); } body.yekfi-signature .sig-section-head>span{display:grid;gap:2px} body.yekfi-signature .sig-section-head h2{margin:0;font-size:21px;line-height:1.2;letter-spacing:-.35px;color:var(--yk-forest-950)} body.yekfi-signature .sig-section-head small{font-size:11.5px;color:var(--yk-ink-soft)} body.yekfi-signature .sig-link{ min-height:40px;border:0;background:transparent;color:var(--yk-gold-700);font-size:11.5px;font-weight:800;padding:6px 2px;display:inline-flex;align-items:center;gap:5px } body.yekfi-signature .sig-panel{ overflow:hidden;border:1px solid var(--yk-line-strong);border-radius:var(--yk-r-lg);background:linear-gradient(180deg,var(--yk-paper),#FCF9F2); box-shadow:var(--yk-shadow-2);position:relative; } body.yekfi-signature .sig-panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 1px 0 rgba(255,255,255,.95) inset} body.yekfi-signature .sig-panel-head{ min-height:56px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px; border-bottom:1px solid var(--yk-line);background:linear-gradient(180deg,#FFFDF9,#F7F3E9); } body.yekfi-signature .sig-panel-head b{font-size:16px;color:var(--yk-forest-950)} body.yekfi-signature .sig-panel-head small{font-size:11px;color:var(--yk-ink-soft)} /* ---------- Hero ---------- */ body.yekfi-signature .sig-hero{ min-height:330px;border-radius:var(--radius-hero);overflow:hidden;position:relative;color:white;background:var(--yk-forest-950);border:1px solid rgba(184,134,49,.52); box-shadow:var(--yk-shadow-3); } body.yekfi-signature .sig-hero-media{position:absolute;inset:0;overflow:hidden} body.yekfi-signature .sig-hero-media .meal-visual, body.yekfi-signature .sig-hero-media .hero-visual{width:100%;height:100%;border:0;border-radius:0;background:transparent;box-shadow:none} body.yekfi-signature .sig-hero-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.015);filter:saturate(.96) contrast(1.02)} body.yekfi-signature .sig-hero-media .fallback{height:100%;display:grid;place-items:center;align-content:center;background: radial-gradient(circle at 25% 20%,rgba(214,174,89,.28),transparent 29%), linear-gradient(145deg,#334D38,#16241B);color:var(--yk-gold-300)} body.yekfi-signature .sig-hero-media .fallback span{font-size:54px;filter:grayscale(.2)} body.yekfi-signature .sig-hero-media .fallback small{color:#F6E7C5;font-size:12px;margin-top:8px} body.yekfi-signature .sig-hero-shade{position:absolute;inset:0;background: linear-gradient(90deg,rgba(13,23,16,.12) 0%,rgba(13,23,16,.35) 40%,rgba(13,23,16,.86) 72%,rgba(13,23,16,.94) 100%), linear-gradient(0deg,rgba(10,17,12,.75),transparent 54%)} body.yekfi-signature .sig-hero-shade::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 92% 14%,rgba(237,213,147,.12),transparent 34%)} body.yekfi-signature .sig-hero-copy{ position:relative;z-index:2;min-height:330px;padding:24px 22px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;text-align:right;width:min(76%,450px);margin-right:auto;margin-left:0; } body.yekfi-signature .sig-hero-overline{font-size:11.5px;font-weight:850;color:var(--yk-gold-300);letter-spacing:.15px;margin-bottom:7px} body.yekfi-signature .sig-hero-title{ border:0;background:transparent;color:white;text-align:right;padding:0;margin:0;font-size:31px;line-height:1.23;font-weight:850;letter-spacing:-.75px;max-width:100%; } body.yekfi-signature .sig-hero-copy p{margin:10px 0 0;font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.78);max-width:360px} body.yekfi-signature .sig-hero-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px} body.yekfi-signature .sig-hero-meta span{min-height:30px;display:inline-flex;align-items:center;padding:5px 9px;border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);backdrop-filter:blur(8px);font-size:10.5px;color:#fff} body.yekfi-signature .sig-hero-actions{display:flex;gap:8px;width:100%;margin-top:16px;align-items:center} body.yekfi-signature .sig-btn{ min-height:48px;border-radius:var(--radius-card);border:1px solid transparent;padding:10px 16px;font-weight:850;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.18s ease; } body.yekfi-signature .sig-btn-primary{ color:#1B241C;background:linear-gradient(180deg,#EAC86F,#C9983B 68%,#B9802B);border-color:#F1D88E; box-shadow:0 1px 0 rgba(255,255,255,.58) inset,0 1px 0 rgba(123,83,28,.28),0 10px 24px rgba(15,22,15,.20); } body.yekfi-signature .sig-btn-ghost{ color:white;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.25);backdrop-filter:blur(8px) } body.yekfi-signature .sig-btn-soft{ color:var(--yk-forest-950);background:linear-gradient(180deg,#FFFDF8,#F1ECE1);border-color:var(--yk-line-strong);box-shadow:var(--yk-shadow-1) } body.yekfi-signature .sig-btn-dark{ color:white;background:linear-gradient(150deg,var(--yk-forest-800),var(--yk-forest-950));border-color:#405541;box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 10px 24px rgba(20,31,23,.16) } /* ---------- Meal group ---------- */ body.yekfi-signature .sig-meal-list{display:grid} body.yekfi-signature .sig-meal-row{ min-height:104px;display:grid;grid-template-columns:78px minmax(0,1fr) 42px;gap:12px;align-items:center;padding:12px 14px;position:relative;background:transparent; } body.yekfi-signature .sig-meal-row+ .sig-meal-row{border-top:1px solid var(--yk-line)} body.yekfi-signature .sig-meal-row.is-next{background:linear-gradient(90deg,rgba(222,188,107,.11),rgba(255,253,248,.18))} body.yekfi-signature .sig-meal-row.is-next::before{content:"";position:absolute;right:0;top:13px;bottom:13px;width:3px;border-radius:var(--radius-pill);background:linear-gradient(var(--yk-gold-300),var(--yk-gold-700))} body.yekfi-signature .sig-meal-thumb{width:78px;height:78px;border-radius:var(--radius-card);overflow:hidden;border:1px solid rgba(167,148,112,.28);background:var(--yk-paper-3);box-shadow:0 5px 13px rgba(34,41,31,.06)} body.yekfi-signature .sig-meal-thumb .meal-visual{width:100%;height:100%;border:0;border-radius:0;background:transparent} body.yekfi-signature .sig-meal-thumb img{width:100%;height:100%;object-fit:cover;display:block} body.yekfi-signature .sig-meal-thumb .fallback{height:100%;display:grid;place-items:center;align-content:center;background:linear-gradient(145deg,#EEE8DA,#F8F4EB);color:var(--yk-forest-700)} body.yekfi-signature .sig-meal-thumb .fallback span{font-size:26px}.sig-meal-thumb .fallback small{display:none} body.yekfi-signature .sig-meal-main{border:0;background:transparent;text-align:right;padding:3px 0;min-width:0;display:grid;gap:3px;align-content:center} body.yekfi-signature .sig-meal-main small{font-size:10.5px;color:var(--yk-gold-700);font-weight:850} body.yekfi-signature .sig-meal-main b{font-size:15px;line-height:1.38;color:var(--yk-ink);white-space:normal} body.yekfi-signature .sig-meal-main em{font-style:normal;font-size:10.5px;color:var(--yk-ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.yekfi-signature .sig-meal-status{ width:38px;height:38px;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong);background:#FBF8F0;display:grid;place-items:center;color:var(--yk-forest-800);font-size:16px;font-weight:900;box-shadow:0 1px 0 white inset } body.yekfi-signature .sig-meal-status.next{border-color:rgba(184,134,49,.46);background:linear-gradient(180deg,#F4E4B5,#E6C66F);color:#6F4B18} /* ---------- Summary ---------- */ body.yekfi-signature .sig-summary{ border:1px solid var(--yk-line-strong);border-radius:var(--yk-r-lg);background:linear-gradient(180deg,#FFFDF8,#F7F2E8);box-shadow:var(--yk-shadow-2);overflow:hidden; } body.yekfi-signature .sig-summary-title{padding:16px 16px 12px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid var(--yk-line)} body.yekfi-signature .sig-summary-title span{display:grid;gap:2px}.sig-summary-title b{font-size:18px;color:var(--yk-forest-950)}.sig-summary-title small{font-size:10.5px;color:var(--yk-ink-soft)} body.yekfi-signature .sig-summary-score{font-size:22px;font-weight:900;color:var(--yk-gold-700)} body.yekfi-signature .sig-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:6px 0} body.yekfi-signature .sig-metric{min-width:0;text-align:center;padding:11px 6px;display:grid;gap:3px;position:relative} body.yekfi-signature .sig-metric+ .sig-metric{border-right:1px solid var(--yk-line)} body.yekfi-signature .sig-metric strong{font-size:17px;color:var(--yk-forest-900);white-space:nowrap} body.yekfi-signature .sig-metric small{font-size:9.6px;color:var(--yk-ink-soft);line-height:1.3} body.yekfi-signature .sig-summary-action{width:calc(100% - 24px);margin:7px 12px 12px;min-height:46px;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong);background:linear-gradient(180deg,#F9F5EC,#EEE8DA);color:var(--yk-forest-950);font-size:12px;font-weight:850;box-shadow:0 1px 0 white inset} /* ---------- Week ---------- */ body.yekfi-signature .sig-week-hero{min-height:245px} body.yekfi-signature .sig-week-hero .sig-hero-copy{min-height:245px;width:min(78%,470px);padding-block:20px} body.yekfi-signature .sig-week-hero .sig-hero-title{font-size:27px} body.yekfi-signature .sig-day-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(68px,1fr);gap:7px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;scroll-snap-type:x proximity} body.yekfi-signature .sig-day-strip::-webkit-scrollbar{display:none} body.yekfi-signature .sig-day{ min-height:69px;border-radius:var(--radius-card);border:1px solid var(--yk-line);background:linear-gradient(180deg,#FFFDF9,#F5F0E6);box-shadow:0 3px 9px rgba(35,42,32,.045);display:grid;place-items:center;align-content:center;gap:2px;padding:7px;color:var(--yk-ink-soft);scroll-snap-align:center } body.yekfi-signature .sig-day b{font-size:10.5px}.sig-day small{font-size:12px;font-weight:850;color:var(--yk-ink)} body.yekfi-signature .sig-day.active{background:linear-gradient(150deg,#36513B,#1A2A20);color:var(--yk-gold-300);border-color:var(--yk-gold-500);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 8px 18px rgba(24,36,27,.16)} body.yekfi-signature .sig-day.active small{color:white} body.yekfi-signature .sig-week-row-actions{display:flex;gap:7px;margin-top:7px} body.yekfi-signature .sig-week-row-actions button{min-height:40px;border-radius:var(--radius-card);padding:7px 12px;border:1px solid var(--yk-line-strong);font-size:10.5px;font-weight:800;background:#FBF8F0;color:var(--yk-forest-900)} body.yekfi-signature .sig-week-row-actions .primary{background:linear-gradient(180deg,#E8C76D,#C9973B);border-color:#EBD389;color:#1E281F} body.yekfi-signature .sig-week-card{display:grid;grid-template-columns:82px minmax(0,1fr);gap:12px;padding:13px 14px;align-items:center} body.yekfi-signature .sig-week-card+ .sig-week-card{border-top:1px solid var(--yk-line)} body.yekfi-signature .sig-week-copy{min-width:0}.sig-week-copy .type{font-size:10.5px;font-weight:850;color:var(--yk-gold-700)} body.yekfi-signature .sig-week-copy .name{display:block;border:0;background:transparent;padding:2px 0;text-align:right;font-weight:850;font-size:15px;line-height:1.35;color:var(--yk-ink)} body.yekfi-signature .sig-week-copy .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;color:var(--yk-ink-soft);font-size:10.5px} /* ---------- Shopping ---------- */ body.yekfi-signature .sig-shopping-hero{min-height:270px;background:var(--yk-forest-950)} body.yekfi-signature .sig-shopping-hero .sig-hero-copy{min-height:270px;width:min(72%,440px)} body.yekfi-signature .sig-shopping-hero::before{content:"";position:absolute;inset:0;background:url('./assets/signature/hero_shopping.webp') center/cover no-repeat} body.yekfi-signature .sig-shopping-hero .sig-hero-shade{background:linear-gradient(90deg,rgba(12,21,15,.16),rgba(12,21,15,.48) 44%,rgba(12,21,15,.92) 75%,rgba(12,21,15,.96))} body.yekfi-signature .sig-shopping-hero .sig-hero-title{font-size:27px} body.yekfi-signature .sig-shopping-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.sig-shopping-stats span{font-size:10.5px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);padding:6px 9px;border-radius:var(--radius-pill)} body.yekfi-signature .sig-shop-category{overflow:hidden;border:1px solid var(--yk-line-strong);border-radius:var(--radius-hero);background:var(--yk-paper);box-shadow:var(--yk-shadow-2)} body.yekfi-signature .sig-shop-cat-head{min-height:56px;padding:12px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(90deg,#F4F4E9,#FBF8F1);border-bottom:1px solid var(--yk-line)} body.yekfi-signature .sig-shop-cat-head b{font-size:16px;color:var(--yk-forest-950)}.sig-shop-cat-head small{font-size:10.5px;color:var(--yk-ink-soft)} body.yekfi-signature .sig-shop-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:78px;padding:10px 13px} body.yekfi-signature .sig-shop-item+ .sig-shop-item{border-top:1px solid var(--yk-line)} body.yekfi-signature .sig-shop-check{width:36px;height:36px;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong);background:#FBF8F0;display:grid;place-items:center} body.yekfi-signature .sig-shop-check.checked{background:var(--yk-success);border-color:var(--yk-success);color:white} body.yekfi-signature .sig-shop-main{border:0;background:transparent;text-align:right;padding:0;min-width:0;display:grid;gap:2px} body.yekfi-signature .sig-shop-main b{font-size:14px}.sig-shop-main small{font-size:10.5px;color:var(--yk-ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sig-shop-main em{font-size:9.5px;color:var(--yk-gold-700);font-style:normal} body.yekfi-signature .sig-shop-qty{text-align:left;display:grid;gap:2px}.sig-shop-qty b{font-size:12px;white-space:nowrap}.sig-shop-qty small{font-size:10px;color:var(--yk-ink-soft)} body.yekfi-signature .sig-store-mode-cta{min-height:66px;border:1px solid #3E543F;border-radius:var(--radius-card);background:linear-gradient(150deg,var(--yk-forest-800),var(--yk-forest-950));color:white;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--yk-shadow-3)} body.yekfi-signature .sig-store-mode-cta span{display:grid;gap:2px;text-align:right}.sig-store-mode-cta b{font-size:15px}.sig-store-mode-cta small{font-size:10.5px;color:rgba(255,255,255,.7)}.sig-store-mode-cta strong{color:var(--yk-gold-300);font-size:21px} /* ---------- Family ---------- */ body.yekfi-signature .sig-family-hero{min-height:255px} body.yekfi-signature .sig-family-hero::before{content:"";position:absolute;inset:0;background:url('./assets/signature/hero_family.webp') center/cover no-repeat;filter:saturate(.9) contrast(1.02)} body.yekfi-signature .sig-family-hero .sig-hero-shade{background:linear-gradient(90deg,rgba(12,21,15,.08),rgba(12,21,15,.42) 44%,rgba(12,21,15,.92) 75%,rgba(12,21,15,.96))} body.yekfi-signature .sig-family-hero .sig-hero-copy{min-height:255px;width:min(70%,430px)} body.yekfi-signature .sig-family-hero .sig-hero-title{font-size:27px} body.yekfi-signature .sig-member-list{overflow:hidden;border:1px solid var(--yk-line-strong);border-radius:var(--radius-hero);background:var(--yk-paper);box-shadow:var(--yk-shadow-2)} body.yekfi-signature .sig-member-row{min-height:78px;display:grid;grid-template-columns:52px minmax(0,1fr) 38px;gap:11px;align-items:center;padding:9px 13px;border:0;background:transparent;text-align:right;width:100%} body.yekfi-signature .sig-member-row+ .sig-member-row{border-top:1px solid var(--yk-line)} body.yekfi-signature .sig-avatar{width:48px;height:48px;border-radius:var(--radius-card);background:linear-gradient(145deg,#EAE7DB,#D8E0D1);color:var(--yk-forest-800);display:grid;place-items:center;font-size:17px;font-weight:900;border:1px solid #D8D0C1;box-shadow:0 1px 0 white inset} body.yekfi-signature .sig-member-copy{display:grid;gap:2px;min-width:0}.sig-member-copy b{font-size:14.5px}.sig-member-copy small{font-size:10.5px;color:var(--yk-ink-soft)}.sig-member-copy em{font-style:normal;font-size:9.5px;color:var(--yk-gold-700)} body.yekfi-signature .sig-row-chevron{width:34px;height:34px;border-radius:var(--radius-control);border:1px solid var(--yk-line);display:grid;place-items:center;color:var(--yk-forest-800);font-size:19px} body.yekfi-signature .sig-family-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px} body.yekfi-signature .sig-family-actions button{min-height:74px;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong);background:linear-gradient(180deg,#FFFDF9,#F5F0E6);text-align:right;padding:12px 13px;display:flex;align-items:center;gap:10px;box-shadow:var(--yk-shadow-1)} body.yekfi-signature .sig-family-actions .ui-svg{width:22px;height:22px;color:var(--yk-gold-700)}.sig-family-actions b{display:block;font-size:12.5px}.sig-family-actions small{display:block;font-size:9.7px;color:var(--yk-ink-soft);margin-top:2px} body.yekfi-signature .sig-profile-note{width:100%;border:1px solid rgba(184,134,49,.35);border-radius:var(--radius-card);background:linear-gradient(90deg,#FBF6E8,#F4EEE0);padding:12px 14px;display:flex;gap:10px;text-align:right;align-items:center}.sig-profile-note b{font-size:12px}.sig-profile-note small{font-size:10.2px;color:var(--yk-ink-soft);display:block;margin-top:2px} /* ---------- Onboarding ---------- */ body.yekfi-signature .onboarding{align-items:stretch;justify-content:center;background:var(--yk-bg);backdrop-filter:none;padding:0;overflow:auto} body.yekfi-signature .onboarding.open{display:flex} body.yekfi-signature .onboarding .on-card{ width:min(600px,100%);min-height:100dvh;max-height:none;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));border:0;border-radius:0;box-shadow:none;background: radial-gradient(circle at 100% 0%,rgba(218,190,124,.12),transparent 21rem), linear-gradient(180deg,#FBF8F0,var(--yk-bg));overflow:visible; } body.yekfi-signature .on-head{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:center;padding:2px 0 16px;border-bottom:1px solid var(--yk-line)} body.yekfi-signature .on-head .logo-orb{width:44px;height:44px;border-radius:var(--radius-card);background:linear-gradient(145deg,#F2E5BE,#D0A74D);border:1px solid #E5C978;box-shadow:var(--yk-shadow-1)} body.yekfi-signature .on-head .logo-orb img{width:27px;height:27px} body.yekfi-signature .on-head b{font-size:15px;color:var(--yk-forest-950)}.on-head small{font-size:10px;color:var(--yk-ink-soft)}.on-head #stepLabel{font-size:11px;color:var(--yk-gold-700);font-weight:850} body.yekfi-signature .onboarding .progress{height:5px;margin:12px 0 22px;background:#E5DFD2}.onboarding .progress i{background:linear-gradient(90deg,var(--yk-forest-700),var(--yk-gold-500))} body.yekfi-signature .ux-on-step{display:grid;gap:20px;max-width:540px;margin:auto;padding-top:4px} body.yekfi-signature .on-step-lead{text-align:center;padding:6px 6px 0}.on-step-lead .step-kicker{background:transparent;color:var(--yk-gold-700);padding:0;margin-bottom:8px;font-size:10.5px}.on-step-lead h1{margin:0;font-size:29px;line-height:1.25;color:var(--yk-forest-950);letter-spacing:-.6px}.on-step-lead p{margin:10px auto 0;font-size:12.2px;line-height:1.9;color:var(--yk-ink-soft);max-width:430px} body.yekfi-signature .ux-household-counts{display:grid;grid-template-columns:1fr 1fr;gap:12px} body.yekfi-signature .ux-household-counts .counter-card, body.yekfi-signature .count-card, body.yekfi-signature .household-counter-card{ border:1px solid var(--yk-line-strong);border-radius:var(--radius-hero);background:linear-gradient(180deg,#FFFDF8,#F5F0E6);box-shadow:var(--yk-shadow-2);padding:17px } body.yekfi-signature .counter-card b{color:var(--yk-forest-950)} body.yekfi-signature .counter button, body.yekfi-signature .counter-control button, body.yekfi-signature .counter-row button{width:46px;height:46px;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong);background:#FBF8EF;color:var(--yk-forest-900);box-shadow:var(--yk-shadow-1);font-size:21px} body.yekfi-signature .counter button:last-child, body.yekfi-signature .counter-control button:last-child, body.yekfi-signature .counter-row button:last-child{background:linear-gradient(180deg,#E8C76C,#C99639);border-color:#E6CC85;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 9px 18px rgba(119,81,30,.15)} body.yekfi-signature .ux-household-summary{border:1px solid #D7DDCE;background:linear-gradient(90deg,#EEF2E9,#F8F7EE);color:var(--yk-forest-900);border-radius:var(--radius-card);box-shadow:var(--yk-shadow-1)} body.yekfi-signature .ux-on-actions{position:sticky;bottom:0;margin-top:3px;padding:14px 0 max(4px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(246,242,233,0),var(--yk-bg) 28%);z-index:2} body.yekfi-signature .onboarding .btn.primary{min-height:52px;border-radius:var(--radius-card);background:linear-gradient(180deg,#E9C86F,#C99436);color:#1B251D;border:1px solid #E9D18E;box-shadow:0 1px 0 rgba(255,255,255,.62) inset,0 12px 28px rgba(115,78,29,.14)} body.yekfi-signature .onboarding .btn.soft{min-height:52px;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong);background:linear-gradient(180deg,#FFFDF8,#F1ECE1);color:var(--yk-forest-900);box-shadow:var(--yk-shadow-1)} body.yekfi-signature .ux-profile-box, body.yekfi-signature .ux-budget-card, body.yekfi-signature .budget-policy-card, body.yekfi-signature .cuisine-card, body.yekfi-signature .blend-card, body.yekfi-signature .ux-choice-summary{ border-color:var(--yk-line-strong);background:linear-gradient(180deg,#FFFDF9,#F5F0E8);box-shadow:var(--yk-shadow-1) } body.yekfi-signature .budget-policy-card.selected, body.yekfi-signature .cuisine-card.selected{border-color:var(--yk-gold-500);box-shadow:0 0 0 1px rgba(210,167,78,.22),var(--yk-shadow-2)} /* ---------- Existing dialogs/sheets harmonization ---------- */ body.yekfi-signature .sheet{background:rgba(18,27,20,.28);backdrop-filter:blur(12px)} body.yekfi-signature .sheet-panel{border-radius:var(--radius-hero)28px 0 0;background:var(--yk-paper);border:1px solid rgba(202,193,176,.9);box-shadow:0 -16px 50px rgba(18,28,20,.16)} body.yekfi-signature .sheet-head{border-bottom:1px solid var(--yk-line);background:rgba(255,253,248,.94)} body.yekfi-signature .sheet-head h2{color:var(--yk-forest-950)} body.yekfi-signature .btn.primary{background:linear-gradient(180deg,#E8C76C,#C99536);color:#1B251C;border:1px solid #E7CF88;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 22px rgba(118,80,28,.14)} body.yekfi-signature .btn.soft,body.yekfi-signature .btn.light{background:linear-gradient(180deg,#FFFDF9,#F2EDE3);color:var(--yk-forest-950);border:1px solid var(--yk-line-strong);box-shadow:var(--yk-shadow-1)} body.yekfi-signature .card{border-color:var(--yk-line-strong);background:var(--yk-paper);box-shadow:var(--yk-shadow-1)} body.yekfi-signature .summary-banner{border-color:var(--yk-line);background:linear-gradient(90deg,#F4F2E8,#FBF8F1)} body.yekfi-signature .toast{background:var(--yk-forest-950);color:white;box-shadow:0 14px 30px rgba(18,28,20,.2)} /* Store mode keeps function first */ body.yekfi-signature .store-mode-head{background:var(--yk-forest-950);color:white;border-radius:var(--radius-card);border:1px solid #3B513D;box-shadow:var(--yk-shadow-3)} body.yekfi-signature .store-search{border-color:var(--yk-line-strong);background:var(--yk-paper);box-shadow:var(--yk-shadow-1)} body.yekfi-signature .store-progress{background:#E8E1D5}.store-progress span{background:linear-gradient(90deg,var(--yk-forest-700),var(--yk-gold-500))} /* ---------- Responsive ---------- */ @media(max-width:520px){ body.yekfi-signature .topbar{grid-template-columns:minmax(0,1fr) auto auto;padding-inline:12px;min-height:86px} body.yekfi-signature .brand-icon{display:none} body.yekfi-signature .brand-wordmark{height:17px;max-width:80px} body.yekfi-signature .brand-copy small{font-size:9.8px} body.yekfi-signature .budget-pill{min-width:118px;padding:8px 10px} body.yekfi-signature .round-icon{width:40px;height:40px} body.yekfi-signature .content{padding-inline:12px;padding-top:16px} body.yekfi-signature .sig-page{gap:28px} body.yekfi-signature .sig-hero{min-height:312px;border-radius:var(--radius-hero)} body.yekfi-signature .sig-hero-copy{min-height:312px;padding:20px 18px;width:min(80%,390px)} body.yekfi-signature .sig-hero-title{font-size:27px} body.yekfi-signature .sig-hero-copy p{font-size:11.5px;line-height:1.65} body.yekfi-signature .sig-hero-actions{gap:7px}.sig-btn{min-height:46px;padding-inline:13px} body.yekfi-signature .sig-meal-row{grid-template-columns:70px minmax(0,1fr) 38px;gap:10px;min-height:96px;padding:10px 12px} body.yekfi-signature .sig-meal-thumb{width:70px;height:70px;border-radius:var(--radius-card)} body.yekfi-signature .sig-meal-main b{font-size:14px}.sig-meal-main em{font-size:9.8px} body.yekfi-signature .sig-metric-grid{grid-template-columns:repeat(4,1fr)} body.yekfi-signature .sig-metric{padding-inline:3px}.sig-metric strong{font-size:15px}.sig-metric small{font-size:8.8px} body.yekfi-signature .sig-week-hero{min-height:226px}.sig-week-hero .sig-hero-copy{min-height:226px}.sig-week-hero .sig-hero-title{font-size:24px} body.yekfi-signature .sig-shopping-hero{min-height:250px}.sig-shopping-hero .sig-hero-copy{min-height:250px;width:min(80%,390px)} body.yekfi-signature .sig-family-hero{min-height:235px}.sig-family-hero .sig-hero-copy{min-height:235px;width:min(80%,390px)} body.yekfi-signature .sig-member-row{grid-template-columns:46px minmax(0,1fr) 34px}.sig-avatar{width:44px;height:44px;border-radius:var(--radius-card)} body.yekfi-signature .ux-household-counts{grid-template-columns:1fr} } @media(max-width:360px){ body.yekfi-signature .brand-copy small{display:none} body.yekfi-signature .budget-pill{min-width:108px}.budget-pill em{display:none} body.yekfi-signature .sig-page{gap:24px} body.yekfi-signature .sig-hero{min-height:292px}.sig-hero-copy{min-height:292px;width:86%;padding:18px 15px} body.yekfi-signature .sig-hero-title{font-size:24px} body.yekfi-signature .sig-hero-copy p{display:none} body.yekfi-signature .sig-hero-meta span:nth-child(3){display:none} body.yekfi-signature .sig-section-head h2{font-size:19px} body.yekfi-signature .sig-meal-row{grid-template-columns:60px minmax(0,1fr) 34px;gap:8px}.sig-meal-thumb{width:60px;height:60px} body.yekfi-signature .sig-meal-main b{font-size:13px} body.yekfi-signature .sig-metric:nth-child(4){display:none} body.yekfi-signature .sig-metric-grid{grid-template-columns:repeat(3,1fr)} body.yekfi-signature .sig-family-actions{grid-template-columns:1fr} body.yekfi-signature .bottom-nav{width:calc(100% - 16px)} } @media(min-width:680px){ body.yekfi-signature .content{padding-inline:22px} body.yekfi-signature .sig-page{gap:36px} body.yekfi-signature .sig-hero{min-height:360px} body.yekfi-signature .sig-hero-copy{min-height:360px;padding:30px 28px} body.yekfi-signature .sig-hero-title{font-size:36px} } @media(prefers-reduced-motion:reduce){ body.yekfi-signature *,body.yekfi-signature *::before,body.yekfi-signature *::after{animation-duration:.001ms;transition-duration:.001ms;scroll-behavior:auto} } /* ---------- Compact supporting surfaces ---------- */ body.yekfi-signature .shopping-domains{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;overflow:visible;padding:0 } body.yekfi-signature .shopping-domains button{ min-width:0;min-height:68px;border-radius:var(--radius-card);border:1px solid var(--yk-line);background:linear-gradient(180deg,#FFFDF9,#F5F0E7);box-shadow:var(--yk-shadow-1);padding:8px 6px;text-align:center;display:grid;place-items:center;align-content:center;gap:1px } body.yekfi-signature .shopping-domains button>span{font-size:17px;line-height:1.1}.shopping-domains button>b{font-size:10px;color:var(--yk-forest-950);white-space:nowrap}.shopping-domains button>small{font-size:8.4px;color:var(--yk-ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} body.yekfi-signature .shopping-domains button.active{background:linear-gradient(150deg,#37543D,#19291F);border-color:var(--yk-gold-500);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 9px 19px rgba(22,34,25,.15)}.shopping-domains button.active>b,.shopping-domains button.active>small{color:#FFF9E9} body.yekfi-signature .today-intel{margin:0;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong);background:linear-gradient(180deg,#FFFDF8,#F5F0E7);box-shadow:var(--yk-shadow-1);overflow:hidden} body.yekfi-signature .today-intel-head{padding:12px 14px;border-bottom:1px solid var(--yk-line)}.today-intel-head b{color:var(--yk-forest-950)}.today-intel-head small{color:var(--yk-ink-soft)} body.yekfi-signature .intel-row{background:transparent;border-color:var(--yk-line);min-height:64px}.intel-row b{color:var(--yk-ink)}.intel-row small{color:var(--yk-ink-soft)}.intel-row strong{color:var(--yk-gold-700)} body.yekfi-signature .generation-notice{border-radius:var(--radius-card);border:1px solid rgba(184,134,49,.28);background:linear-gradient(90deg,#FBF6E8,#F7F2E8);box-shadow:var(--yk-shadow-1);color:var(--yk-ink)} body.yekfi-signature .generation-notice small{color:var(--yk-ink-soft)} body.yekfi-signature .primary-lite{background:linear-gradient(180deg,#E8C76C,#C99639);color:#1B251C;border:1px solid #E8D18B} body.yekfi-signature .icon-btn{background:#FFFDF8;border-color:var(--yk-line-strong);color:var(--yk-forest-900)} body.yekfi-signature .meal-more{position:relative;display:inline-block}.meal-more summary{list-style:none;min-width:40px;height:40px;border:1px solid var(--yk-line-strong);border-radius:var(--radius-card);background:#FBF8F0;display:grid;place-items:center;font-weight:900;color:var(--yk-forest-800);cursor:pointer}.meal-more summary::-webkit-details-marker{display:none}.meal-more>div{position:absolute;left:0;top:45px;z-index:30;min-width:145px;padding:5px;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong);background:var(--yk-paper);box-shadow:0 15px 35px rgba(21,32,24,.14)}.meal-more>div button{width:100%;border:0;background:transparent;text-align:right;padding:9px 10px;border-radius:var(--radius-control);font-size:10.5px}.meal-more>div button:hover{background:var(--yk-paper-3)} /* Onboarding exact components from runtime */ body.yekfi-signature .mode-choice.ux-mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px} body.yekfi-signature .mode-choice.ux-mode-choice button{min-height:88px;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong);background:linear-gradient(180deg,#FFFDF9,#F5F0E7);box-shadow:var(--yk-shadow-1);color:var(--yk-ink);padding:13px}.mode-choice.ux-mode-choice button.active{border-color:var(--yk-gold-500);box-shadow:0 0 0 1px rgba(210,167,78,.18),var(--yk-shadow-2)}.mode-choice.ux-mode-choice b{font-size:12.5px;color:var(--yk-forest-950)}.mode-choice.ux-mode-choice small{font-size:9.5px;color:var(--yk-ink-soft)} body.yekfi-signature .house-count-list{display:grid;grid-template-columns:1fr 1fr;gap:12px} body.yekfi-signature .stepper.ux-stepper{display:grid;grid-template-columns:minmax(0,1fr) 46px 48px 46px;gap:7px;align-items:center;min-height:122px;padding:17px;border-radius:var(--radius-hero);border:1px solid var(--yk-line-strong);background:linear-gradient(180deg,#FFFDF9,#F5F0E7);box-shadow:var(--yk-shadow-2)} body.yekfi-signature .stepper.ux-stepper>span:first-child{display:grid;gap:3px}.stepper.ux-stepper>span:first-child b{font-size:16px;color:var(--yk-forest-950)}.stepper.ux-stepper>span:first-child small{font-size:10px;color:var(--yk-ink-soft)} body.yekfi-signature .stepper.ux-stepper .round-step{width:46px;height:46px;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong);background:#FBF8F0;color:var(--yk-forest-900);box-shadow:var(--yk-shadow-1);font-size:22px} body.yekfi-signature .stepper.ux-stepper .round-step:last-child{background:linear-gradient(180deg,#E8C76D,#C99538);border-color:#E8D18A;box-shadow:0 1px 0 rgba(255,255,255,.62) inset,0 9px 20px rgba(118,80,28,.14)} body.yekfi-signature .stepper.ux-stepper .count{font-size:27px;font-weight:900;text-align:center;color:var(--yk-forest-950)} body.yekfi-signature .ux-house-total{min-height:76px;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;padding:14px 16px;border-radius:var(--radius-card);border:1px solid #D7DDCE;background:linear-gradient(90deg,#EEF2E9,#F8F7EE);box-shadow:var(--yk-shadow-1)}.ux-house-total>span{font-size:10.5px;color:var(--yk-ink-soft)}.ux-house-total>b{font-size:19px;color:var(--yk-forest-950)}.ux-house-total>small{grid-column:1/-1;font-size:10.5px;color:var(--yk-ink-soft);margin-top:3px} body.yekfi-signature .setup-profile-row{border-color:var(--yk-line);gap:8px}.setup-profile-row .input{border-color:var(--yk-line-strong);background:#FFFDF9} body.yekfi-signature .ux-policy-title b{color:var(--yk-forest-950)}.ux-policy-title small{color:var(--yk-ink-soft)} body.yekfi-signature .ux-budget-policy{gap:10px}.budget-policy-card{border-radius:var(--radius-card);padding:13px}.budget-policy-card b{color:var(--yk-forest-950)}.budget-policy-card small{color:var(--yk-ink-soft)} body.yekfi-signature .ux-cuisine-grid{gap:10px}.ux-cuisine-grid .cuisine-card{border-radius:var(--radius-card);min-height:96px}.ux-cuisine-grid .cuisine-card b{color:var(--yk-forest-950)}.ux-cuisine-grid .cuisine-card small{color:var(--yk-ink-soft)} body.yekfi-signature .ux-final-orb{background:radial-gradient(circle at 30% 25%,#FFF9E9,#F1E4B9 44%,#D3B260 100%);border-color:#E6CD87}.ux-final-orb b{color:var(--yk-forest-950)} body.yekfi-signature .ux-trust-strip span{background:#F3F2E9;border-color:#DDE0D4;color:var(--yk-forest-800)} /* Empty/runtime cards respect signature material */ body.yekfi-signature .empty-state-page,body.yekfi-signature .runtime-recovery-card{border:1px solid var(--yk-line-strong);background:linear-gradient(180deg,#FFFDF8,#F5F0E7);box-shadow:var(--yk-shadow-2);border-radius:var(--radius-hero)}.empty-state-page h1,.runtime-recovery-card h1{color:var(--yk-forest-950)}.empty-state-page p,.runtime-recovery-card p{color:var(--yk-ink-soft)} @media(max-width:420px){ body.yekfi-signature .shopping-domains{grid-template-columns:1fr 1fr} body.yekfi-signature .house-count-list{grid-template-columns:1fr} body.yekfi-signature .stepper.ux-stepper{min-height:104px} } /* v8.3 refinement — editorial balance, less crowding, stronger composition */ body.yekfi-signature .sig-hero-copy{margin-left:auto;margin-right:0;align-items:flex-start;text-align:right} body.yekfi-signature .sig-next-hero .sig-hero-media img{object-position:38% 52%} body.yekfi-signature .sig-next-hero .sig-hero-shade{background: linear-gradient(90deg,rgba(10,18,12,.08) 0%,rgba(10,18,12,.22) 32%,rgba(10,18,12,.74) 63%,rgba(10,18,12,.95) 100%), linear-gradient(0deg,rgba(10,17,12,.68),transparent 55%)} body.yekfi-signature .sig-hero-title{max-width:95%;text-wrap:balance} @media(max-width:520px){ body.yekfi-signature .topbar{min-height:80px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:10px;gap:8px} body.yekfi-signature .brand{gap:6px} body.yekfi-signature .brand-icon{display:block;width:31px;height:31px} body.yekfi-signature .brand-wordmark{height:15px;max-width:67px} body.yekfi-signature .brand-copy small{font-size:8.9px} body.yekfi-signature .budget-pill{min-width:116px;max-width:126px;border-radius:var(--radius-card);padding:7px 9px} body.yekfi-signature .budget-pill small{font-size:9.5px}.budget-pill b{font-size:13.5px}.budget-pill em{font-size:8.5px;max-width:110px} body.yekfi-signature .round-icon{width:38px;height:38px;border-radius:var(--radius-card)} body.yekfi-signature .content{padding-top:12px} body.yekfi-signature .sig-context-bar{min-height:40px;grid-template-columns:40px minmax(0,1fr) 40px}.sig-context-bar>button{width:38px;height:38px;border-radius:var(--radius-card);font-size:19px}.sig-context-bar b{font-size:13px}.sig-context-bar small{font-size:9.8px} body.yekfi-signature .sig-hero{min-height:278px;border-radius:var(--radius-hero)} body.yekfi-signature .sig-hero-copy{min-height:278px;width:67%;padding:18px 16px;justify-content:center} body.yekfi-signature .sig-hero-overline{font-size:10.2px;margin-bottom:5px} body.yekfi-signature .sig-hero-title{font-size:24px;line-height:1.27;letter-spacing:-.45px} body.yekfi-signature .sig-hero-copy p{display:none} body.yekfi-signature .sig-hero-meta{margin-top:10px;gap:5px}.sig-hero-meta span{min-height:27px;padding:4px 7px;font-size:9.2px} body.yekfi-signature .sig-hero-actions{margin-top:12px}.sig-btn{min-height:43px;padding:8px 12px;font-size:10.7px;border-radius:var(--radius-card)} body.yekfi-signature .sig-section-head h2{font-size:19px}.sig-section-head small{font-size:10.5px}.sig-link{font-size:10.5px} body.yekfi-signature .sig-meal-row{min-height:88px;grid-template-columns:64px minmax(0,1fr) 36px;padding:9px 11px}.sig-meal-thumb{width:64px;height:64px;border-radius:var(--radius-card)}.sig-meal-main small{font-size:9.5px}.sig-meal-main b{font-size:13.5px}.sig-meal-main em{font-size:9.2px}.sig-meal-status{width:34px;height:34px;border-radius:var(--radius-control);font-size:14px} body.yekfi-signature .sig-summary-title{padding:14px 14px 10px}.sig-summary-title b{font-size:16.5px}.sig-summary-score{font-size:20px}.sig-summary-title small{font-size:9.5px} body.yekfi-signature .sig-summary-action{min-height:43px;font-size:10.8px} } /* v8.3 refinement II — stronger contrast where information density is higher */ body.yekfi-signature .sig-shopping-hero .sig-hero-shade{background: linear-gradient(90deg,rgba(10,18,12,.24) 0%,rgba(10,18,12,.56) 46%,rgba(10,18,12,.94) 73%,rgba(10,18,12,.985) 100%), linear-gradient(0deg,rgba(9,16,11,.72),transparent 60%)} body.yekfi-signature .sig-family-hero .sig-hero-shade{background: linear-gradient(90deg,rgba(10,18,12,.20) 0%,rgba(10,18,12,.50) 45%,rgba(10,18,12,.94) 73%,rgba(10,18,12,.985) 100%), linear-gradient(0deg,rgba(9,16,11,.68),transparent 58%)} body.yekfi-signature .sig-store-mode-cta{background:linear-gradient(150deg,#2D4934,#142019);border-color:rgba(210,167,78,.48);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 13px 30px rgba(18,29,21,.18)} body.yekfi-signature .sig-store-mode-cta::after{content:"";width:26px;height:3px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--yk-gold-600),var(--yk-gold-300));position:absolute;right:16px;bottom:0;transform:translateY(1px)} body.yekfi-signature .sig-store-mode-cta{position:relative} body.yekfi-signature .sig-shop-cat-head{background:linear-gradient(90deg,#EEF2E9,#FBF8F1);border-bottom-color:#DAD5C8} body.yekfi-signature .sig-shop-cat-head::after{content:"";position:absolute;right:14px;bottom:-1px;width:34px;height:2px;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--yk-gold-700),var(--yk-gold-300))}.sig-shop-cat-head{position:relative} body.yekfi-signature .sig-shop-item.done{opacity:1;background:rgba(235,242,233,.42)}.sig-shop-item.done .sig-shop-main b{color:var(--yk-ink)}.sig-shop-item.done .sig-shop-main small{color:var(--yk-ink-soft)} body.yekfi-signature .sig-shop-main b{color:var(--yk-ink)}.sig-shop-qty b{color:var(--yk-forest-950)}.sig-shop-qty small{color:var(--yk-gold-700);font-weight:750} body.yekfi-signature .sig-shop-category+.sig-shop-category{margin-top:14px} body.yekfi-signature .sig-member-row:hover{background:#FBF8F1} body.yekfi-signature .sig-family-actions button:hover{border-color:rgba(184,134,49,.38)} body.yekfi-signature .ux-on-actions>span:empty+.btn{grid-column:1/-1;width:100%} body.yekfi-signature .ux-on-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px} body.yekfi-signature .ux-on-actions .btn{width:100%} /* ================================================================ YEKFI v8.3 — Surgical UI Precision Layer High-value corrections from real-device review. Presentation only. ================================================================ */ :root{--yk-header-offset:calc(84px + env(safe-area-inset-top))} html,body{max-width:100%;overflow-x:hidden} body.yekfi-signature .app-shell, body.yekfi-signature .content, body.yekfi-signature .view, body.yekfi-signature .sig-page, body.yekfi-signature .sig-section{max-width:100%;min-width:0;overflow-x:hidden} /* Persistent brand chrome: always visible, balanced, and legible. */ body.yekfi-signature .topbar{ position:fixed;top:0;left:50%;right:auto;transform:translateX(-50%); width:min(760px,100%);max-width:100vw;min-height:var(--yk-header-offset); padding:max(9px,env(safe-area-inset-top)) 14px 10px; grid-template-columns:minmax(0,1fr) auto 40px;gap:8px;z-index:900; background:rgba(248,244,235,.965);backdrop-filter:blur(26px) saturate(1.12); } body.yekfi-signature .content{padding-top:calc(var(--yk-header-offset) + 14px)} body.yekfi-signature .brand{justify-self:end;align-items:center;gap:8px;width:max-content;max-width:100%;} body.yekfi-signature .brand-icon{display:block;width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(22,35,25,.10));flex:0 0 auto} body.yekfi-signature .brand-copy{direction:rtl;justify-items:start;gap:1px;min-width:0;line-height:1.05} body.yekfi-signature .brand-copy strong{display:flex;align-items:baseline;gap:5px;color:var(--yk-forest-950);font-size:18px;font-weight:950;white-space:nowrap;letter-spacing:-.25px} body.yekfi-signature .brand-copy strong i{font-style:normal;font-size:10px;font-weight:850;letter-spacing:.7px;color:var(--yk-gold-700);direction:ltr} body.yekfi-signature .brand-copy small{display:block;font-size:9.6px;line-height:1.2;color:var(--yk-ink-soft);font-weight:700;white-space:nowrap} body.yekfi-signature .budget-pill{min-width:110px;max-width:128px;padding:7px 9px;border-radius:var(--radius-card)} body.yekfi-signature .budget-pill small{font-size:9.2px}.budget-pill b{font-size:13px}.budget-pill em{font-size:8.5px;max-width:108px} body.yekfi-signature .topbar>.round-icon{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:var(--radius-card)} /* Splash / lockup uses the approved leaf mark and readable bilingual name. */ body.yekfi-signature .splash-logo{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 16px 26px rgba(7,30,18,.18))} body.yekfi-signature .splash-brand-name{display:flex;align-items:baseline;justify-content:center;gap:9px;margin-top:4px} body.yekfi-signature .splash-brand-name b{font-size:31px;color:#fff;font-weight:950;letter-spacing:-.7px} body.yekfi-signature .splash-brand-name span{font-size:13px;color:var(--yk-gold-300);font-weight:900;letter-spacing:1.3px} body.yekfi-signature .splash-tagline{font-size:15px;margin-top:8px}.splash-en{font-size:10.5px} /* Household counters: touch-safe but visually compact; never cover copy. */ body.yekfi-signature .house-count-list{gap:9px} body.yekfi-signature .stepper.ux-stepper{ grid-template-columns:minmax(0,1fr) 36px 36px 36px;gap:5px; min-height:84px;padding:11px 12px;border-radius:var(--radius-card);margin:0; } body.yekfi-signature .stepper.ux-stepper>span:first-child b{font-size:14px} body.yekfi-signature .stepper.ux-stepper>span:first-child small{font-size:9.3px;line-height:1.3} body.yekfi-signature .stepper.ux-stepper .round-step{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:var(--radius-control);font-size:19px;padding:0;line-height:1} body.yekfi-signature .stepper.ux-stepper .count{font-size:20px;min-width:36px;line-height:1} @media(max-width:420px){ body.yekfi-signature .house-count-list{grid-template-columns:1fr} body.yekfi-signature .stepper.ux-stepper{min-height:74px;grid-template-columns:minmax(0,1fr) 36px 34px 36px} } /* Week: seven days must fit the viewport; horizontal scrolling is forbidden. */ body.yekfi-signature .sig-day-strip{ display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-flow:unset;grid-auto-columns:unset; gap:5px;overflow:visible;max-width:100%;padding:2px 0;scroll-snap-type:none; } body.yekfi-signature .sig-day{min-width:0;width:100%;min-height:60px;padding:6px 2px;border-radius:var(--radius-card);overflow:hidden} body.yekfi-signature .sig-day b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%} body.yekfi-signature .sig-day small{font-size:11px} body.yekfi-signature .sig-week-switch{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 8px} body.yekfi-signature .sig-week-switch>span{display:grid;text-align:center;gap:1px}.sig-week-switch b{font-size:12px;color:var(--yk-forest-950)}.sig-week-switch small{font-size:9.5px;color:var(--yk-ink-soft)} body.yekfi-signature .sig-week-switch button{width:36px;height:36px;border-radius:var(--radius-control);border:1px solid var(--yk-line-strong);background:var(--yk-paper);font-size:18px;color:var(--yk-forest-900)} body.yekfi-signature .sig-week-switch button:disabled{opacity:.3} /* Reliable, always-reachable dialog close controls. */ body.yekfi-signature .sheet-head{position:sticky;top:0;z-index:50;min-height:58px;padding-top:max(8px,env(safe-area-inset-top))} body.yekfi-signature .modal-close-control, body.yekfi-signature .close-x{position:relative;z-index:80;pointer-events:auto;touch-action:manipulation;flex:0 0 auto} body.yekfi-signature .sheet-panel>.handle{position:sticky;top:0;z-index:49} body.yekfi-signature .sheet-panel:before{display:none} /* Shopping copy: concise, readable, and proportional to the controls. */ body.yekfi-signature .shopping-domains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:100%;min-width:0} body.yekfi-signature .shopping-domains button{min-width:0;min-height:74px;padding:10px 9px;border-radius:var(--radius-card);grid-template-columns:26px minmax(0,1fr);column-gap:7px;overflow:hidden} body.yekfi-signature .shopping-domains button>span{font-size:19px}.shopping-domains .ui-svg{width:21px;height:21px} body.yekfi-signature .shopping-domains b{font-size:12px;line-height:1.2;white-space:normal} body.yekfi-signature .shopping-domains small{font-size:9.4px;line-height:1.3;white-space:normal;overflow-wrap:anywhere} @media(max-width:520px){body.yekfi-signature .shopping-domains{grid-template-columns:1fr 1fr}.shopping-domains button{min-height:68px}} /* Family photos are compact local assets, clipped cleanly inside the profile avatar. */ body.yekfi-signature .sig-avatar{overflow:hidden;padding:0} body.yekfi-signature .sig-avatar img{width:100%;height:100%;object-fit:cover;display:block} body.yekfi-signature .member-photo-editor{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:center;margin:0 0 14px;padding:12px;border:1px solid var(--yk-line);border-radius:var(--radius-card);background:linear-gradient(180deg,#FFFDF9,#F5F0E8)} body.yekfi-signature .member-photo-preview{width:76px;height:76px;border-radius:var(--radius-hero);overflow:hidden;border:1px solid var(--yk-line-strong);display:grid;place-items:center;background:#E8EADF;color:var(--yk-forest-800);font-size:28px;font-weight:900;box-shadow:var(--yk-shadow-1)} body.yekfi-signature .member-photo-preview img{width:100%;height:100%;object-fit:cover;display:block} body.yekfi-signature .member-photo-copy{display:grid;gap:7px}.member-photo-copy b{font-size:13px;color:var(--yk-forest-950)}.member-photo-copy small{font-size:9.8px;color:var(--yk-ink-soft);line-height:1.45} body.yekfi-signature .member-photo-actions{display:flex;gap:7px;flex-wrap:wrap}.member-photo-actions label,.member-photo-actions button{min-height:38px;border-radius:var(--radius-control);border:1px solid var(--yk-line-strong);background:#FFFDF8;padding:7px 10px;font-size:10px;font-weight:800;color:var(--yk-forest-900);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.member-photo-actions input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none} /* Food Universe: editorial banner + bounded initial render for fluid response. */ body.yekfi-signature .universe-visual-banner{position:relative;height:190px;margin:-2px -2px 14px;border-radius:var(--radius-hero);overflow:hidden;border:1px solid rgba(184,134,49,.36);box-shadow:var(--yk-shadow-2)} body.yekfi-signature .universe-visual-banner img{width:100%;height:100%;display:block;object-fit:cover;object-position:center} body.yekfi-signature .universe-visual-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,20,14,.03),rgba(11,20,14,.08) 42%,rgba(11,20,14,.78) 100%)} body.yekfi-signature .universe-visual-copy{position:absolute;z-index:2;right:16px;top:50%;transform:translateY(-50%);width:48%;color:white;text-align:right}.universe-visual-copy b{display:block;font-size:19px;line-height:1.3}.universe-visual-copy small{display:block;margin-top:5px;font-size:10px;line-height:1.45;color:rgba(255,255,255,.82)} body.yekfi-signature .universe-grid{contain:layout style;align-items:stretch} body.yekfi-signature .universe-card{content-visibility:auto;contain-intrinsic-size:126px} body.yekfi-signature .universe-more{width:100%;min-height:46px;margin-top:12px;border-radius:var(--radius-card);border:1px solid var(--yk-line-strong);background:linear-gradient(180deg,#FFFDF9,#F2EDE3);font-size:11px;font-weight:850;color:var(--yk-forest-950)} body.yekfi-signature .universe-search{top:56px;background:rgba(255,253,248,.97);backdrop-filter:blur(12px);z-index:8} @media(max-width:420px){body.yekfi-signature .universe-visual-banner{height:165px}.universe-visual-copy{width:58%;right:12px}.universe-visual-copy b{font-size:17px}} /* High-taste micro refinements. */ body.yekfi-signature .sig-panel,body.yekfi-signature .sig-shop-category,body.yekfi-signature .sig-member-list{box-shadow:0 1px 0 rgba(255,255,255,.96) inset,0 8px 22px rgba(35,42,33,.065)} body.yekfi-signature .sig-meal-thumb img{transform:scale(1.002);transition:transform .28s ease}.sig-meal-row:active .sig-meal-thumb img{transform:scale(1.025)} body.yekfi-signature .sig-store-mode-cta b{font-size:14.5px}.sig-store-mode-cta small{font-size:9.8px} body.yekfi-signature .sig-family-actions button,body.yekfi-signature .sig-week-row-actions button{touch-action:manipulation} @media(max-width:520px){ :root{--yk-header-offset:calc(76px + env(safe-area-inset-top))} body.yekfi-signature .topbar{grid-template-columns:minmax(0,1fr) 104px 38px;padding-inline:10px;gap:6px} body.yekfi-signature .brand-icon{width:36px;height:36px}.brand-copy strong{font-size:16px}.brand-copy strong i{font-size:8.8px}.brand-copy small{font-size:8.4px} body.yekfi-signature .budget-pill{min-width:104px;max-width:104px;padding:6px 8px}.budget-pill small{display:none}.budget-pill b{font-size:12.5px}.budget-pill em{font-size:8px;max-width:88px} body.yekfi-signature .topbar>.round-icon{width:38px;height:38px;min-width:38px;min-height:38px} body.yekfi-signature .content{padding-top:calc(var(--yk-header-offset) + 10px)} } /* ========================================================= v9.8.0 — Consumer Precision & Accessibility Closure Surgical overrides only; no new layout subsystem. ========================================================= */ :root{ --yk-access-muted:#5E675E; --yk-focus:#B98A2F; --yk-touch:44px; } html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%} body.yekfi-signature{overflow-x:clip} body.yekfi-signature .app-shell, body.yekfi-signature .content, body.yekfi-signature .view, body.yekfi-signature .sig-page, body.yekfi-signature .sig-section, body.yekfi-signature .sig-panel, body.yekfi-signature .sheet-panel, body.yekfi-signature .composer-shell, body.yekfi-signature .ready-card{ min-width:0;max-width:100%; } body.yekfi-signature .content, body.yekfi-signature .view{overflow-x:clip} /* Long Arabic strings wrap inside their own cards instead of widening the page. */ body.yekfi-signature .content h1, body.yekfi-signature .content h2, body.yekfi-signature .content h3, body.yekfi-signature .content b, body.yekfi-signature .content small, body.yekfi-signature .content em, body.yekfi-signature .content p, body.yekfi-signature .sheet-panel h2, body.yekfi-signature .sheet-panel h3, body.yekfi-signature .sheet-panel b, body.yekfi-signature .sheet-panel small, body.yekfi-signature .sheet-panel p{ overflow-wrap:anywhere;word-break:normal; } /* Readability floor on user-facing copy. Engineering-only metadata may remain compact in raw source, but effective consumer text is never rendered as 7–10px microcopy. */ body.yekfi-signature .content small, body.yekfi-signature .content em, body.yekfi-signature .content .meta, body.yekfi-signature .content .muted, body.yekfi-signature .content .eyebrow, body.yekfi-signature .content .type, body.yekfi-signature .content .tiny-muted{ font-size:max(11.5px,.72rem);line-height:1.45;color:var(--yk-access-muted); } body.yekfi-signature .sheet-panel small, body.yekfi-signature .sheet-panel .tiny-muted, body.yekfi-signature .ready-card small, body.yekfi-signature .composer-shell small{ font-size:max(11px,.69rem);line-height:1.45; } body.yekfi-signature .nav-btn{font-size:12px} body.yekfi-signature .nav-btn span{font-size:12px} body.yekfi-signature .family-top-btn span{font-size:10.5px;line-height:1.1} body.yekfi-signature .budget-pill em{font-size:11px;line-height:1.25} body.yekfi-signature .brand-copy small{font-size:10.5px;line-height:1.2} body.yekfi-signature .brand-copy i{font-size:10px} body.yekfi-signature .sig-day b{font-size:11px;line-height:1.15} body.yekfi-signature .sig-day small{font-size:12px;line-height:1.15} body.yekfi-signature .sig-week-switch small{font-size:11px;line-height:1.25} body.yekfi-signature .sig-week-copy .type, body.yekfi-signature .sig-week-copy .meta{font-size:11.5px;line-height:1.4} body.yekfi-signature .shopping-domains b{font-size:12.5px} body.yekfi-signature .shopping-domains small{font-size:11.5px} body.yekfi-signature .member-photo-copy small{font-size:11px} body.yekfi-signature .universe-visual-copy small{font-size:11.5px} body.yekfi-signature .sig-store-mode-cta small{font-size:11.5px} body.yekfi-signature .stepper.ux-stepper>span:first-child small{font-size:11.5px} body.yekfi-signature .release-gate-card small, body.yekfi-signature .readiness-check small{font-size:11px;line-height:1.4} /* iOS input zoom prevention and comfortable field reading. */ body.yekfi-signature input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), body.yekfi-signature select, body.yekfi-signature textarea{ font-size:16px;line-height:1.35; } /* 44px interactive contract. The visual glyph can stay compact; the hit target cannot. */ body.yekfi-signature button, body.yekfi-signature [role="button"], body.yekfi-signature summary, body.yekfi-signature label[for]{ touch-action:manipulation; } body.yekfi-signature .topbar>.round-icon, body.yekfi-signature .family-top-btn, body.yekfi-signature .modal-close-control, body.yekfi-signature .close-x, body.yekfi-signature .sig-week-switch button, body.yekfi-signature .sig-week-row-actions button, body.yekfi-signature .sig-shop-check, body.yekfi-signature .member-photo-actions label, body.yekfi-signature .member-photo-actions button, body.yekfi-signature .stepper.ux-stepper .round-step, body.yekfi-signature .home-mini-action, body.yekfi-signature .sig-link, body.yekfi-signature .meal-more summary{ min-width:var(--yk-touch);min-height:var(--yk-touch); } body.yekfi-signature .topbar>.round-icon, body.yekfi-signature .modal-close-control, body.yekfi-signature .close-x, body.yekfi-signature .sig-week-switch button, body.yekfi-signature .sig-shop-check, body.yekfi-signature .stepper.ux-stepper .round-step{ width:var(--yk-touch);height:var(--yk-touch); } body.yekfi-signature .member-photo-actions label, body.yekfi-signature .member-photo-actions button{padding:8px 12px;font-size:11.5px} body.yekfi-signature .sig-week-row-actions button{font-size:11.5px;padding:8px 12px} body.yekfi-signature .sig-link{display:inline-flex;align-items:center;justify-content:center;padding-inline:7px} body.yekfi-signature .sig-shop-main{min-height:44px} /* Seven days stay entirely inside the week page at 320–430px. */ body.yekfi-signature .sig-day-strip{ width:100%;max-width:100%; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px;overflow:hidden; } body.yekfi-signature .sig-day{min-width:0;padding-inline:1px} body.yekfi-signature .sig-week-switch{max-width:100%;min-width:0} body.yekfi-signature .sig-week-switch>span{min-width:0;max-width:calc(100% - 104px)} /* Dialog chrome never scrolls out of reach. */ body.yekfi-signature .sheet-head{ background:rgba(255,253,248,.97); backdrop-filter:blur(12px); border-bottom:1px solid rgba(63,75,52,.08); } body.yekfi-signature .sheet-head h2{min-width:0;line-height:1.3;padding-inline-start:2px} body.yekfi-signature .modal-close-control, body.yekfi-signature .close-x{font-size:22px} /* Strong, brand-consistent keyboard focus. */ body.yekfi-signature button:focus-visible, body.yekfi-signature input:focus-visible, body.yekfi-signature select:focus-visible, body.yekfi-signature textarea:focus-visible, body.yekfi-signature summary:focus-visible, body.yekfi-signature a:focus-visible{ outline:3px solid var(--yk-focus); outline-offset:3px; box-shadow:0 0 0 2px #FFFDF8; } /* Reduced motion: preserve hierarchy without forcing animation. */ @media (prefers-reduced-motion:reduce){ body.yekfi-signature *,body.yekfi-signature *::before,body.yekfi-signature *::after{ animation-duration:.01ms;animation-iteration-count:1; transition-duration:.01ms;scroll-behavior:auto; } } /* Smallest supported viewport precision. */ @media(max-width:360px){ body.yekfi-signature .topbar{ grid-template-columns:minmax(0,1fr) 101px 44px; gap:4px;padding-inline:8px; } body.yekfi-signature .budget-pill{min-width:101px;max-width:101px;padding-inline:7px} body.yekfi-signature .brand-copy small{display:none} body.yekfi-signature .sig-day-strip{gap:3px} body.yekfi-signature .sig-day{min-height:58px;border-radius:var(--radius-control)} body.yekfi-signature .sig-day b{font-size:9.5px} body.yekfi-signature .sig-week-card{grid-template-columns:72px minmax(0,1fr);gap:9px;padding-inline:10px} body.yekfi-signature .sig-week-row-actions{display:grid;grid-template-columns:1fr 1fr 44px} body.yekfi-signature .meal-more summary{width:44px;height:44px} } /* v9.8.0 narrow-week final geometry: preserve 44px day targets without page overflow. */ body.yekfi-signature .brand{min-width:44px;min-height:44px} @media(max-width:360px){ body.yekfi-signature .sig-day-strip{ box-sizing:border-box; width:calc(100% + 24px); max-width:none; margin-inline:-12px; padding-inline:3px; gap:1px; } body.yekfi-signature .sig-day{min-width:44px;width:auto} body.yekfi-signature .sig-day b{font-size:11px} } /* v9.8.0 remaining visible status-copy floor. */ body.yekfi-signature .brand-copy i, body.yekfi-signature .family-top-btn span, body.yekfi-signature .sheet-panel em, body.yekfi-signature .release-gate-card em, body.yekfi-signature .release-gate-head strong, body.yekfi-signature .release-check b, body.yekfi-signature .release-check small{ font-size:11px;line-height:1.35; } /* ========================================================= v9.9.0 — Food Universe rendering diet ========================================================= */ body.yekfi-signature .universe-card{ content-visibility:auto; contain:layout paint style; contain-intrinsic-size:78px; } body.yekfi-signature .universe-grid{contain:layout style} body.yekfi-signature .universe-visual-banner img{ content-visibility:auto; contain-intrinsic-size:180px 360px; } /* ===== identity-ui-v840.css ===== */ /* ===================================================================== YEKFI v8.4.0 — APPROVED BRAND IDENTITY APPLICATION Actual runtime application layer — not a concept board. Source of truth: approved YEKFI Master Symbol + Light App Design System. Core planning / price / nutrition / basket logic is intentionally untouched. ===================================================================== */ :root{ } html{background:var(--yi-cream)} body.yekfi-signature{ background:var(--yi-cream); color:var(--yi-ink); isolation:isolate; } body.yekfi-signature::before{ content:"";position:fixed;inset:0;z-index:-3;pointer-events:none; background:url("./assets/identity/background-light.webp") center top/cover fixed no-repeat; opacity:.16; } body.yekfi-signature::after{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background:linear-gradient(180deg,rgba(249,246,237,.78),rgba(249,246,237,.95) 26%,rgba(249,246,237,.97)); } body.yekfi-signature .app-shell{max-width:760px;position:relative} @media(min-width:900px){ body.yekfi-signature .app-shell::before, body.yekfi-signature .app-shell::after{ content:"";position:fixed;width:220px;height:460px;pointer-events:none;z-index:-1; background:none;opacity:.11; } body.yekfi-signature .app-shell::before{left:max(6px,calc(50% - 620px));top:150px;transform:rotate(180deg)} body.yekfi-signature .app-shell::after{right:max(6px,calc(50% - 620px));bottom:80px} } /* ---- Persistent header matching approved light system ---- */ body.yekfi-signature .topbar{ min-height:76px;padding:max(8px,env(safe-area-inset-top)) 12px 9px; background:rgba(255,254,251,.94); border-bottom:1px solid var(--yi-line); box-shadow:0 6px 22px rgba(40,55,41,.055); } body.yekfi-signature .topbar::before{ content:"";position:absolute;left:-20px;top:-35px;width:150px;height:125px; background:none;opacity:.055;pointer-events:none; } body.yekfi-signature .topbar::after{ height:1px;opacity:.68; background:linear-gradient(90deg,transparent 4%,rgba(212,175,55,.1),var(--yi-gold) 48%,rgba(212,175,55,.12),transparent 96%); } body.yekfi-signature .brand{gap:8px;align-items:center} body.yekfi-signature .brand-icon{ width:43px;height:43px;object-fit:contain; filter:drop-shadow(0 5px 9px rgba(37,51,36,.14)); } body.yekfi-signature .brand-copy{gap:0;direction:rtl;text-align:right} body.yekfi-signature .brand-copy strong{ color:var(--yi-deep);font-size:18px;font-weight:950;line-height:1.06; } body.yekfi-signature .brand-copy strong i{ color:var(--yi-gold-deep);font-size:9px;font-style:normal;letter-spacing:1.2px;margin-right:4px; } body.yekfi-signature .brand-copy small{ color:#5F6A5E;font-size:9.1px;font-weight:700;line-height:1.2; } body.yekfi-signature .budget-pill{ min-width:116px;max-width:138px;border-radius:var(--radius-card); border:1px solid var(--yi-line);background:#fff; box-shadow:0 3px 12px rgba(39,53,40,.055);padding:7px 10px; } body.yekfi-signature .budget-pill small{color:#798078} body.yekfi-signature .budget-pill b{color:var(--yi-deep);font-size:14px} body.yekfi-signature .budget-pill em{color:var(--yi-gold-deep)} body.yekfi-signature .round-icon{ border:1px solid var(--yi-line);background:#fff;color:var(--yi-deep); box-shadow:0 3px 10px rgba(39,53,40,.045); } /* ---- Main spacing / botanical spirit ---- */ body.yekfi-signature .content{padding:14px 12px calc(100px + env(safe-area-inset-bottom))} body.yekfi-signature .sig-page{gap:24px;position:relative} body.yekfi-signature .sig-page::after{ content:"";position:absolute;left:-28px;bottom:9%;width:116px;height:116px;z-index:-1; background:none;opacity:.045;transform:rotate(180deg);pointer-events:none; } /* ---- Compact dashboard shortcuts, mapping concept cards to real YEKFI capabilities ---- */ body.yekfi-signature .yi-quick-grid{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:-2px; } body.yekfi-signature .yi-quick{ min-width:0;min-height:78px;border:1px solid var(--yi-line);border-radius:var(--radius-card); background:rgba(255,254,251,.96);box-shadow:0 5px 15px rgba(40,54,41,.045); padding:9px 5px;display:grid;place-items:center;align-content:center;gap:5px;text-align:center; } body.yekfi-signature .yi-quick i{ width:31px;height:31px;border-radius:var(--radius-control);background:#F4E7BD;color:var(--yi-deep);display:grid;place-items:center;font-style:normal; } body.yekfi-signature .yi-quick .ui-svg{width:17px;height:17px} body.yekfi-signature .yi-quick b{font-size:10.7px;color:var(--yi-deep);line-height:1.15} body.yekfi-signature .yi-quick small{font-size:8px;color:var(--yi-muted);line-height:1.1} @media(max-width:380px){ body.yekfi-signature .yi-quick-grid{gap:5px} body.yekfi-signature .yi-quick{min-height:72px;padding-inline:3px} body.yekfi-signature .yi-quick b{font-size:9.6px} } /* ---- Section typography ---- */ body.yekfi-signature .sig-section{gap:10px} body.yekfi-signature .sig-section-head{padding-inline:3px} body.yekfi-signature .sig-section-head::before{width:34px;height:2px;background:var(--yi-gold)} body.yekfi-signature .sig-section-head h2{font-size:19px;color:var(--yi-deep)} body.yekfi-signature .sig-section-head small{color:var(--yi-muted);font-size:10.4px} body.yekfi-signature .sig-link{color:var(--yi-gold-deep)} /* ---- Clean cream/white card system from approved application board ---- */ body.yekfi-signature .sig-panel, body.yekfi-signature .sig-summary, body.yekfi-signature .sig-shop-category, body.yekfi-signature .sig-member-list{ background:rgba(255,254,251,.97);border:1px solid var(--yi-line); box-shadow:var(--yi-shadow);border-radius:var(--radius-card); } body.yekfi-signature .sig-panel::after{box-shadow:0 1px 0 rgba(255,255,255,.95) inset} body.yekfi-signature .sig-meal-row+ .sig-meal-row, body.yekfi-signature .sig-shop-item+ .sig-shop-item, body.yekfi-signature .sig-member-row+ .sig-member-row{border-color:#EFE9DE} body.yekfi-signature .sig-meal-thumb{border-radius:var(--radius-card);border-color:#E7E1D6} body.yekfi-signature .sig-meal-main small{color:var(--yi-gold-deep)} body.yekfi-signature .sig-meal-main b{color:var(--yi-ink)} body.yekfi-signature .sig-meal-main em{color:var(--yi-muted)} body.yekfi-signature .sig-meal-status{background:#fff;border-color:var(--yi-line);color:var(--yi-deep)} /* ---- App hero: same premium olive / food contrast as reference ---- */ body.yekfi-signature .sig-hero{ border-radius:var(--radius-hero);border:1px solid rgba(212,175,55,.4); box-shadow:var(--yi-shadow-strong);background:var(--yi-deep);min-height:280px; } 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{ content:"";position:absolute;left:-26px;top:-20px;width:160px;height:160px;z-index:1; background:none;opacity:.10;transform:rotate(180deg);pointer-events:none; } body.yekfi-signature .sig-hero-shade{ background:linear-gradient(90deg,rgba(18,34,22,.05),rgba(18,34,22,.20) 38%,rgba(19,42,26,.80) 68%,rgba(22,51,31,.94) 100%); } body.yekfi-signature .sig-hero-copy{min-height:280px;padding:20px} body.yekfi-signature .sig-hero-title{font-size:26px} body.yekfi-signature .sig-hero-overline{color:#F4DF9D} body.yekfi-signature .sig-hero-copy p{color:rgba(255,255,255,.82)} body.yekfi-signature .sig-hero-meta span{background:rgba(255,255,255,.12)} body.yekfi-signature .sig-btn-primary{ background:linear-gradient(180deg,#FCF7E8,#F0E2AF);color:var(--yi-deep);border-color:#F5E6B6; box-shadow:0 8px 18px rgba(17,31,19,.15); } body.yekfi-signature .sig-btn-ghost{background:rgba(255,255,255,.12)} /* ---- Summary metrics ---- */ body.yekfi-signature .sig-summary{overflow:hidden} body.yekfi-signature .sig-summary-title{border-color:var(--yi-line);background:#FFFDF8} body.yekfi-signature .sig-summary-title b{color:var(--yi-deep)} body.yekfi-signature .sig-summary-score{color:var(--yi-gold-deep)} body.yekfi-signature .sig-metric+ .sig-metric{border-color:var(--yi-line)} body.yekfi-signature .sig-metric strong{color:var(--yi-deep)} body.yekfi-signature .sig-summary-action{ background:#F8F3E9;border-color:var(--yi-line);color:var(--yi-deep); } /* ---- Week tabs exactly contained inside viewport ---- */ body.yekfi-signature .sig-day-strip{gap:4px} body.yekfi-signature .sig-day{ min-height:57px;background:#fff;border:1px solid var(--yi-line);border-radius:var(--radius-card); box-shadow:none;color:var(--yi-muted); } body.yekfi-signature .sig-day.active{ background:linear-gradient(180deg,#566C45,#2E4D2B);border-color:#49633E;color:white; box-shadow:0 7px 16px rgba(46,77,43,.16); } body.yekfi-signature .sig-day.active small,body.yekfi-signature .sig-day.active b{color:#fff} body.yekfi-signature .sig-week-switch button{background:#fff;border-color:var(--yi-line)} /* ---- Shopping ---- */ body.yekfi-signature .shopping-domains button{ background:#fff;border-color:var(--yi-line);box-shadow:0 4px 13px rgba(39,53,40,.045); } body.yekfi-signature .shopping-domains button.active{ border-color:rgba(81,107,58,.32);background:#EEF1E8; } body.yekfi-signature .sig-shopping-hero::before{ filter:saturate(1.04) contrast(1.01); } body.yekfi-signature .sig-shop-check{background:#fff;border-color:var(--yi-line)} body.yekfi-signature .sig-shop-check.checked{background:var(--yi-deep);border-color:var(--yi-deep)} body.yekfi-signature .sig-store-mode-cta{ background:linear-gradient(145deg,#3F5F3C,#25452E);border-color:#4D684B;border-radius:var(--radius-card); } /* ---- Family ---- */ body.yekfi-signature .sig-avatar{border-radius:var(--radius-pill);border:2px solid #F1E4B7;background:#F6F1E6} body.yekfi-signature .sig-row-chevron{background:#fff;border-color:var(--yi-line)} body.yekfi-signature .sig-family-actions button{ background:#fff;border-color:var(--yi-line);border-radius:var(--radius-card);box-shadow:var(--yi-shadow); } /* ---- Bottom navigation like attached production reference ---- */ body.yekfi-signature .bottom-nav{ height:68px;width:min(700px,calc(100% - 18px));bottom:max(7px,env(safe-area-inset-bottom)); border-radius:var(--radius-card);border:1px solid var(--yi-line);background:rgba(255,254,251,.97); box-shadow:0 14px 36px rgba(33,49,34,.15);padding:5px; } body.yekfi-signature .nav-btn{min-height:56px;border-radius:var(--radius-card);color:#6E776F;font-size:9.5px} body.yekfi-signature .nav-btn .ui-svg{width:20px;height:20px} body.yekfi-signature .nav-btn.active{ color:var(--yi-deep);background:#F3EBCF;box-shadow:none; } body.yekfi-signature .nav-btn.active::before{background:var(--yi-gold);width:20px;height:2px} body.yekfi-signature .nav-btn.active span{color:var(--yi-deep)} /* ---- Splash / launch: approved master symbol + botanical identity ---- */ body.yekfi-signature .brand-splash{ background: linear-gradient(rgba(18,46,27,.34),rgba(18,46,27,.48)), url("./assets/identity/background-dark.webp") center/cover no-repeat; } body.yekfi-signature .brand-splash::before{ content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(212,175,55,.14),transparent 16rem);pointer-events:none; } body.yekfi-signature .brand-splash-inner{position:relative;z-index:2} body.yekfi-signature .splash-logo{width:132px;height:132px} body.yekfi-signature .splash-brand-name b{font-size:28px} body.yekfi-signature .splash-brand-name span{color:#F2DA91} body.yekfi-signature .splash-tagline{color:#fff;font-size:14px} body.yekfi-signature .splash-en{color:rgba(255,255,255,.72)} /* ---- Onboarding: actual attached light application language ---- */ body.yekfi-signature .onboarding{ background:var(--yi-cream); } body.yekfi-signature .onboarding .on-card{ position:relative;background:rgba(255,254,251,.96); background-image:linear-gradient(rgba(255,254,251,.91),rgba(255,254,251,.97)),url("./assets/identity/background-light.webp"); background-size:cover;background-position:center top; } body.yekfi-signature .on-head{ border-color:var(--yi-line);background:rgba(255,254,251,.72);backdrop-filter:blur(8px);border-radius:var(--radius-card);padding:8px 9px 12px; } body.yekfi-signature .on-head .logo-orb{background:transparent;border:0;box-shadow:none} body.yekfi-signature .on-head .logo-orb img{width:43px;height:43px} body.yekfi-signature .on-step-lead h1{color:var(--yi-deep)} body.yekfi-signature .on-step-lead p{color:var(--yi-muted)} body.yekfi-signature .step-kicker{color:var(--yi-gold-deep)} body.yekfi-signature .stepper.ux-stepper, body.yekfi-signature .ux-profile-box, body.yekfi-signature .ux-budget-card, body.yekfi-signature .budget-policy-card, body.yekfi-signature .cuisine-card, body.yekfi-signature .blend-card, body.yekfi-signature .ux-choice-summary{ background:rgba(255,254,251,.96);border-color:var(--yi-line);box-shadow:var(--yi-shadow); } body.yekfi-signature .onboarding .btn.primary{ background:linear-gradient(180deg,#45683D,#2E4D2B);color:#fff;border-color:#3F5F3A; box-shadow:0 8px 19px rgba(46,77,43,.17); } body.yekfi-signature .onboarding .btn.soft{background:#fff;border-color:var(--yi-line)} /* ---- Dialogs ---- */ body.yekfi-signature .sheet{background:rgba(29,45,31,.22)} body.yekfi-signature .sheet-panel{background:var(--yi-paper);border-color:var(--yi-line)} body.yekfi-signature .sheet-head{background:rgba(255,254,251,.97);border-color:var(--yi-line)} body.yekfi-signature .ready-card{background:linear-gradient(180deg,#FFFDF8,#F4EFE4);border:1px solid var(--yi-line)} body.yekfi-signature .loader-card{background:#FFFDF8} /* ---- General buttons/forms ---- */ body.yekfi-signature .btn.primary, body.yekfi-signature .pill-btn.primary{ background:linear-gradient(180deg,#45683D,#2E4D2B);color:white;border-color:#3D5937; } body.yekfi-signature .btn.soft,body.yekfi-signature .btn.light{ background:#fff;color:var(--yi-deep);border-color:var(--yi-line); } body.yekfi-signature .input{ background:#fff;border-color:var(--yi-line);color:var(--yi-ink); } body.yekfi-signature .input:focus{border-color:var(--yi-gold);box-shadow:0 0 0 3px rgba(212,175,55,.13)} /* ---- Responsive precision ---- */ @media(max-width:520px){ body.yekfi-signature .topbar{grid-template-columns:minmax(0,1fr) 99px 37px;padding-inline:8px} body.yekfi-signature .brand-icon{width:39px;height:39px} body.yekfi-signature .brand-copy strong{font-size:16px} body.yekfi-signature .brand-copy small{font-size:8px} body.yekfi-signature .budget-pill{min-width:99px;max-width:99px} body.yekfi-signature .sig-hero{min-height:245px} body.yekfi-signature .sig-hero-copy{min-height:245px;width:min(78%,430px);padding:17px} body.yekfi-signature .sig-hero-title{font-size:23px} } @media(max-width:360px){ body.yekfi-signature .brand-copy small{display:none} body.yekfi-signature .topbar{grid-template-columns:minmax(0,1fr) 94px 36px} } /* ---- Optional system dark mode: deliberately lighter and more separated than prior candidate ---- */ @media(prefers-color-scheme:dark){ body.yekfi-signature.yi-auto-dark{ background:#132418;color:#F8F3E7; } } /* ===== identity-ui-v841.css ===== */ /* ======================================================================= 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{ } /* ---------- 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); min-height:var(--yi-header-total); padding:max(8px,env(safe-area-inset-top)) 12px 9px; /* Force physical order on RTL browsers: left: menu | budget | free space / brand anchored on the RIGHT. */ direction:ltr; grid-template-columns:42px 118px minmax(0,1fr); grid-template-areas:"menu budget brand"; gap:7px; align-items:center; } body.yekfi-signature .topbar>.round-icon{ grid-area:menu; justify-self:start; } body.yekfi-signature .topbar>.topbar-actions{ grid-area:budget; justify-self:start; min-width:0; } body.yekfi-signature .topbar>.brand{ grid-area:brand; justify-self:end; direction:rtl; margin:0; } 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)); position:relative; } body.yekfi-signature .view{ scroll-margin-top:calc(var(--yi-header-total) + 16px); } /* ---------- FIX 2: APPROVED HEADER LOCKUP, LARGER + RIGHT ANCHORED ---------- */ body.yekfi-signature .brand{ display:flex; align-items:center; gap:9px; width:max-content; max-width:100%; padding:0 2px; } body.yekfi-signature .brand-icon{ width:52px; height:52px; min-width:52px; flex:0 0 52px; object-fit:contain; filter:drop-shadow(0 5px 10px rgba(24,42,28,.16)); } body.yekfi-signature .brand-copy{ display:grid; justify-items:end; align-content:center; gap:2px; min-width:0; text-align:right; direction:rtl; } body.yekfi-signature .brand-title-line{ display:flex; flex-direction:row; align-items:baseline; justify-content:flex-start; gap:7px; white-space:nowrap; line-height:1; } body.yekfi-signature .brand-title-line strong{ font-size:19.5px; line-height:1; font-weight:950; letter-spacing:-.25px; color:var(--yi-deep); } body.yekfi-signature .brand-title-line i{ font-size:9.8px; line-height:1; font-style:normal; font-weight:900; letter-spacing:1.45px; color:var(--yi-gold-deep); direction:ltr; } body.yekfi-signature .brand-copy small{ display:block; font-size:10.1px; line-height:1.2; font-weight:750; color:#626C62; white-space:nowrap; } /* Finance remains readable without stealing brand space. */ body.yekfi-signature .budget-pill{ min-width:112px; max-width:118px; width:118px; padding:7px 9px; border-radius:var(--radius-card); } body.yekfi-signature .budget-pill small{font-size:8.7px} body.yekfi-signature .budget-pill b{font-size:13.8px;line-height:1.1} body.yekfi-signature .budget-pill em{ font-size:8.3px; line-height:1.15; max-width:99px; } /* 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)); border-bottom:1px solid rgba(212,175,55,.23); box-shadow:0 8px 24px rgba(35,50,37,.075); } body.yekfi-signature .topbar::before{ width:112px;height:88px; left:-32px;top:-18px; opacity:.085; } /* ---------- 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"); background-position:center top; background-size:100% auto; background-repeat:repeat-y; opacity:.31; } body.yekfi-signature::after{ background: linear-gradient(180deg,rgba(249,246,237,.78),rgba(249,246,237,.88) 28%,rgba(249,246,237,.91)); } /* 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:none; 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; padding-top:30px; } 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; padding-top:30px; } 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:none; opacity:.045; pointer-events:none; } body.yekfi-signature .sig-panel{position:relative} body.yekfi-signature .sig-family-actions{position:relative;overflow:hidden} /* ---------- FIX 4: HERO SAFETY / TYPOGRAPHY ---------- */ body.yekfi-signature .sig-hero{ margin-top:0; isolation:isolate; } body.yekfi-signature .sig-hero-copy{ padding-top:22px; padding-bottom:20px; justify-content:center; } body.yekfi-signature .sig-hero-title{ line-height:1.22; max-width:100%; text-wrap:balance; } /* 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; top:auto; bottom:-35px; width:142px; height:142px; opacity:.10; } /* ---------- REAL MOBILE WIDTHS ---------- */ @media(max-width:520px){ :root{ } body.yekfi-signature .topbar{ grid-template-columns:40px 108px minmax(0,1fr); padding-inline:8px; gap:5px; } body.yekfi-signature .brand-icon{ width:48px;height:48px;min-width:48px;flex-basis:48px; } body.yekfi-signature .brand-title-line strong{font-size:18px} body.yekfi-signature .brand-title-line i{font-size:9px;letter-spacing:1.15px} body.yekfi-signature .brand-copy small{font-size:9.3px} body.yekfi-signature .budget-pill{ width:108px;min-width:108px;max-width:108px; } body.yekfi-signature .sig-hero-copy{ width:min(76%,430px); padding:20px 16px; } body.yekfi-signature .sig-hero-title{font-size:22.5px} } @media(max-width:390px){ body.yekfi-signature .topbar{ grid-template-columns:38px 101px minmax(0,1fr); gap:4px; padding-inline:7px; } body.yekfi-signature .brand{gap:6px} body.yekfi-signature .brand-icon{ width:45px;height:45px;min-width:45px;flex-basis:45px; } body.yekfi-signature .brand-title-line{gap:5px} body.yekfi-signature .brand-title-line strong{font-size:17.2px} body.yekfi-signature .brand-title-line i{font-size:8.2px} body.yekfi-signature .brand-copy small{font-size:8.7px} body.yekfi-signature .budget-pill{ width:101px;min-width:101px;max-width:101px; } } @media(max-width:350px){ body.yekfi-signature .memo-date-grid{grid-template-columns:1fr;} body.yekfi-signature .brand-title-line i{display:none} body.yekfi-signature .brand-copy small{font-size:8.2px} } /* ---------- 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:var(--radius-card); 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; } /* ===== food-library-v842.css ===== */ /* YEKFI v8.4.2 — Food Library Stage 01 */ body.yekfi-signature .meal-visual img{ width:100%;height:100%;object-fit:cover;display:block; } body.yekfi-signature .sig-shop-item.has-food-thumb{ grid-template-columns:42px 48px minmax(0,1fr) auto; } body.yekfi-signature .sig-shop-thumb{ width:48px;height:48px;border-radius:var(--radius-card);object-fit:cover;display:block; background:#fff;border:1px solid rgba(46,77,43,.10); box-shadow:0 3px 10px rgba(33,49,34,.06); } @media(max-width:390px){ body.yekfi-signature .sig-shop-item.has-food-thumb{ grid-template-columns:38px 42px minmax(0,1fr) auto; gap:7px; } body.yekfi-signature .sig-shop-thumb{width:42px;height:42px;border-radius:var(--radius-control)} } /* ===== stock-architecture-v844.css ===== */ /* ===================================================================== YEKFI v8.4.4 — STOCK ARCHITECTURE & SHOPPING SPLIT ===================================================================== */ /* Header: brand on physical right; budget then family then more to the left. */ body.yekfi-signature .topbar{ grid-template-columns:40px 44px 112px minmax(0,1fr); grid-template-areas:"menu family budget brand"; } body.yekfi-signature .family-top-btn{ grid-area:family; width:42px;height:48px;border:1px solid var(--yi-line);border-radius:var(--radius-card); background:#fff;color:var(--yi-deep); display:grid;place-items:center;align-content:center;gap:2px; box-shadow:0 3px 10px rgba(39,53,40,.05); padding:4px; } body.yekfi-signature .family-top-btn .ui-svg{width:20px;height:20px} body.yekfi-signature .family-top-btn span{font-size:7.5px;font-weight:800;line-height:1} body.yekfi-signature .family-top-btn.active{ background:#F3EBCF;border-color:rgba(212,175,55,.5);color:var(--yi-deep); } @media(max-width:520px){ body.yekfi-signature .topbar{ grid-template-columns:37px 40px 101px minmax(0,1fr); gap:4px; } body.yekfi-signature .family-top-btn{width:39px;height:44px;border-radius:var(--radius-card)} body.yekfi-signature .family-top-btn span{display:none} } @media(max-width:390px){ body.yekfi-signature .topbar{ grid-template-columns:36px 38px 96px minmax(0,1fr); gap:3px; } body.yekfi-signature .budget-pill{width:96px;min-width:96px;max-width:96px} body.yekfi-signature .brand-icon{width:43px;height:43px;min-width:43px;flex-basis:43px} } /* Shopping: exactly two scopes and readable selected state. */ body.yekfi-signature .shopping-scope-tabs{ display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%; margin:4px 0 4px; } body.yekfi-signature .shopping-scope-tabs button{ min-width:0;min-height:72px;border:1px solid var(--yi-line);border-radius:var(--radius-card); background:#fff;color:var(--yi-deep); display:grid;grid-template-columns:31px minmax(0,1fr); grid-template-rows:auto auto;column-gap:8px;text-align:right;align-items:center; padding:11px;box-shadow:0 5px 15px rgba(39,53,40,.045); } body.yekfi-signature .shopping-scope-tabs button>span{grid-row:1/3;display:grid;place-items:center} body.yekfi-signature .shopping-scope-tabs .ui-svg{width:22px;height:22px} body.yekfi-signature .shopping-scope-tabs button>b{ color:var(--yi-deep);font-size:13px;line-height:1.2;white-space:normal; } body.yekfi-signature .shopping-scope-tabs button>small{ color:var(--yi-muted);font-size:9.3px;line-height:1.25;white-space:normal; } body.yekfi-signature .shopping-scope-tabs button.active{ background:linear-gradient(150deg,#45683D,#274A31); border-color:#587047;color:#fff; box-shadow:0 9px 20px rgba(35,62,40,.16); } body.yekfi-signature .shopping-scope-tabs button.active>b, body.yekfi-signature .shopping-scope-tabs button.active>small, body.yekfi-signature .shopping-scope-tabs button.active>span, body.yekfi-signature .shopping-scope-tabs button.active .ui-svg{ color:#FFFDF6;stroke:currentColor; } body.yekfi-signature .shopping-scope-tabs button.active>small{color:rgba(255,255,255,.82)} /* Stock page */ body.yekfi-signature .stock-page{gap:18px} body.yekfi-signature .stock-hero{ position:relative;overflow:hidden;border-radius:var(--radius-hero);padding:22px 18px; background:linear-gradient(145deg,#355A39,#203E2A);color:#fff; border:1px solid rgba(212,175,55,.42);box-shadow:var(--yi-shadow-strong); display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:12px;align-items:center; } body.yekfi-signature .stock-hero::after{ content:"";position:absolute;left:-38px;bottom:-52px;width:150px;height:150px; background:none;opacity:.12;pointer-events:none; } body.yekfi-signature .stock-hero h1{font-size:25px;line-height:1.2;margin:5px 0 7px} body.yekfi-signature .stock-hero p{font-size:11.5px;line-height:1.65;color:rgba(255,255,255,.78);margin:0} body.yekfi-signature .stock-hero-mark{ width:58px;height:58px;border-radius:var(--radius-card);display:grid;place-items:center; background:rgba(255,255,255,.09);border:1px solid rgba(244,220,145,.32);color:#F1D987; } body.yekfi-signature .stock-hero-mark .ui-svg{width:29px;height:29px} body.yekfi-signature .stock-kpis{ display:grid;grid-template-columns:1fr 1fr;gap:9px; } body.yekfi-signature .stock-kpis>div{ background:#fff;border:1px solid var(--yi-line);border-radius:var(--radius-card);padding:12px 13px;box-shadow:var(--yi-shadow); } body.yekfi-signature .stock-kpis small{display:block;color:var(--yi-muted);font-size:9px;margin-bottom:4px} body.yekfi-signature .stock-kpis b{color:var(--yi-deep);font-size:18px} body.yekfi-signature .stock-filter-bar{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; } body.yekfi-signature .stock-filter-bar button{ min-width:0;padding:10px 6px;border-radius:var(--radius-card); border:1px solid var(--yi-line);background:#fff;color:var(--yi-deep); font-size:9.8px;font-weight:800; } body.yekfi-signature .stock-filter-bar button.active{ background:#F1E7BD;border-color:rgba(212,175,55,.48);color:#29472F; } body.yekfi-signature .stock-food-list, body.yekfi-signature .stock-purchase-list{ display:grid;gap:7px; } body.yekfi-signature .stock-food-row{ display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:9px;align-items:center; width:100%;padding:9px;border:1px solid var(--yi-line);border-radius:var(--radius-card);background:#fff;text-align:right; box-shadow:0 3px 11px rgba(39,53,40,.035); } body.yekfi-signature .stock-food-icon{ width:46px;height:46px;border-radius:var(--radius-card);background:#F7F2E6;display:grid;place-items:center;overflow:hidden;color:var(--yi-deep); } body.yekfi-signature .stock-food-icon img{width:100%;height:100%;object-fit:cover} body.yekfi-signature .stock-food-icon .ui-svg{width:21px;height:21px} body.yekfi-signature .stock-food-copy b{display:block;color:var(--yi-ink);font-size:13px} body.yekfi-signature .stock-food-copy small{display:block;color:var(--yi-muted);font-size:9.4px;margin-top:3px} body.yekfi-signature .stock-food-state{ border-radius:var(--radius-pill);padding:6px 8px;font-size:8.7px;font-weight:850;white-space:nowrap; } body.yekfi-signature .stock-food-state.enough{background:#EAF1E7;color:#35573A} body.yekfi-signature .stock-food-state.unknown{background:#F5E8C5;color:#865E18} body.yekfi-signature .stock-purchase-row{ display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px; border:1px solid var(--yi-line);border-radius:var(--radius-card);background:#fff; } body.yekfi-signature .stock-purchase-row b{display:block;font-size:12px;color:var(--yi-ink)} body.yekfi-signature .stock-purchase-row small{display:block;font-size:9px;color:var(--yi-muted);margin-top:2px} body.yekfi-signature .stock-purchase-row em{ font-style:normal;font-size:8.5px;font-weight:800;color:var(--yi-deep);background:#EEF1E8;border-radius:var(--radius-pill);padding:5px 7px; } /* Monthly shopping */ body.yekfi-signature .monthly-house-list{display:grid;gap:8px} body.yekfi-signature .monthly-house-buy{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center; padding:8px;border:1px solid var(--yi-line);border-radius:var(--radius-card);background:#fff; } body.yekfi-signature .monthly-house-main{ display:flex;justify-content:space-between;gap:8px;align-items:center;text-align:right;background:transparent;border:0;padding:4px;min-width:0; } body.yekfi-signature .monthly-house-main b{display:block;font-size:12px;color:var(--yi-ink)} body.yekfi-signature .monthly-house-main small{display:block;font-size:9px;color:var(--yi-muted);margin-top:3px} body.yekfi-signature .monthly-buy-btn{ border:0;border-radius:var(--radius-control);background:#35583A;color:#fff;font-size:9px;font-weight:850;padding:9px 8px; } body.yekfi-signature .monthly-item .sig-shop-main{display:block} /* Bottom nav remains four high-value primary destinations. */ body.yekfi-signature .bottom-nav .nav-btn[data-view="stock"] i{color:inherit} @media(max-width:380px){ body.yekfi-signature .shopping-scope-tabs button{padding:9px;min-height:68px;grid-template-columns:27px minmax(0,1fr)} body.yekfi-signature .shopping-scope-tabs button>b{font-size:11.7px} body.yekfi-signature .shopping-scope-tabs button>small{font-size:8.5px} body.yekfi-signature .stock-filter-bar{grid-template-columns:1fr 1fr} } /* ===== inventory-closed-loop-v850.css ===== */ /* ===================================================================== YEKFI v8.5.0 — INVENTORY CLOSED LOOP Purchase -> Ledger -> Stock -> Meal Consumption -> Reorder ===================================================================== */ body.yekfi-signature .nav-btn[data-view="stock"]{position:relative} body.yekfi-signature .stock-nav-badge{ position:absolute;top:3px;inset-inline-start:50%;transform:translateX(-18px); min-width:17px;height:17px;padding:0 4px;border-radius:var(--radius-pill); background:#B98728;color:#fff;font-size:8px;line-height:17px;text-align:center; box-shadow:0 2px 6px rgba(80,52,15,.22);z-index:3; } body.yekfi-signature .stock-nav-badge[hidden]{display:none} body.yekfi-signature .purchase-confirm-head{ display:flex;gap:12px;align-items:center;padding:13px;border-radius:var(--radius-card); background:linear-gradient(145deg,#EEF2E7,#FBF6E9);border:1px solid var(--yi-line);margin-bottom:12px; } body.yekfi-signature .purchase-confirm-head>span{ width:42px;height:42px;border-radius:var(--radius-card);display:grid;place-items:center;background:#31553A;color:#F5DF95; } body.yekfi-signature .purchase-confirm-head .ui-svg{width:22px;height:22px} body.yekfi-signature .purchase-confirm-head small{display:block;font-size:9px;color:var(--yi-muted)} body.yekfi-signature .purchase-confirm-head b{display:block;font-size:15px;color:var(--yi-deep);margin-top:2px} body.yekfi-signature .purchase-plan-note{ display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px; } body.yekfi-signature .purchase-plan-note>span{ padding:10px;border-radius:var(--radius-card);background:#fff;border:1px solid var(--yi-line); } body.yekfi-signature .purchase-plan-note small{display:block;color:var(--yi-muted);font-size:8.5px} body.yekfi-signature .purchase-plan-note b{display:block;color:var(--yi-deep);font-size:12px;margin-top:3px} body.yekfi-signature .stock-food-row{ grid-template-columns:46px minmax(0,1fr) auto; } body.yekfi-signature .stock-food-row.low{ border-color:rgba(185,135,40,.34);background:#FFFDF6; } body.yekfi-signature .stock-food-copy{ border:0;background:transparent;text-align:right;min-width:0;padding:2px; } body.yekfi-signature .stock-food-state.soon{background:#F5E8C5;color:#805C1E} body.yekfi-signature .stock-head-actions{display:flex;gap:5px;align-items:center} body.yekfi-signature .stock-head-actions .sig-link{ border:1px solid var(--yi-line);border-radius:var(--radius-pill);background:#fff;padding:6px 8px;font-size:8.5px; } body.yekfi-signature .stock-movement-actions{ display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px; } body.yekfi-signature .stock-movement-actions button{ min-height:40px;border:1px solid var(--yi-line);border-radius:var(--radius-control);background:#fff; color:var(--yi-deep);font-size:9px;font-weight:800; } body.yekfi-signature .stock-movement-actions button:first-child{color:#8A4F32} body.yekfi-signature .purchase-history-list, body.yekfi-signature .inventory-ledger-list{display:grid;gap:7px} body.yekfi-signature .purchase-history-row, body.yekfi-signature .ledger-row{ display:flex;justify-content:space-between;gap:10px;align-items:center; padding:10px 11px;border:1px solid var(--yi-line);border-radius:var(--radius-card);background:#fff; } body.yekfi-signature .purchase-history-row b, body.yekfi-signature .ledger-row b{display:block;color:var(--yi-ink);font-size:11.5px} body.yekfi-signature .purchase-history-row small, body.yekfi-signature .ledger-row small{display:block;color:var(--yi-muted);font-size:8.6px;margin-top:2px;line-height:1.35} body.yekfi-signature .purchase-history-row strong{color:var(--yi-deep);font-size:11px} body.yekfi-signature .ledger-row strong{font-size:10px;color:var(--yi-deep);white-space:nowrap} body.yekfi-signature .ledger-row.consume strong, body.yekfi-signature .ledger-row.waste strong, body.yekfi-signature .ledger-row.return strong{color:#8A4F32} body.yekfi-signature .ledger-row.purchase strong{color:#2F6940} @media(max-width:380px){ body.yekfi-signature .stock-movement-actions{grid-template-columns:1fr} } /* ===== truth-hardening-v860.css ===== */ /* YEKFI v8.6.0 — Truth Hardening Phase 1 */ body.yekfi-signature .nutrition-gate-banner{ width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center; border:1px solid rgba(155,74,47,.32);border-radius:var(--radius-card);padding:11px 12px; background:#FFF5EF;color:#613323;text-align:right;box-shadow:0 5px 16px rgba(91,48,31,.06) } body.yekfi-signature .nutrition-gate-banner>span:first-child{ width:34px;height:34px;border-radius:var(--radius-control);display:grid;place-items:center;background:#A35337;color:#fff;font-size:18px;font-weight:900 } body.yekfi-signature .nutrition-gate-banner b{display:block;font-size:12px} body.yekfi-signature .nutrition-gate-banner small{display:block;font-size:9.5px;line-height:1.4;margin-top:2px;color:#865340} body.yekfi-signature .nutrition-gate-banner em{font-style:normal;font-size:9px;font-weight:850;color:#7C3D29;white-space:nowrap} body.yekfi-signature .nutrition-hard-gate{ display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;align-items:center; padding:13px;border-radius:var(--radius-card);background:#FFF2EA;border:1px solid rgba(155,74,47,.35);margin-bottom:12px } body.yekfi-signature .nutrition-hard-gate>span{ width:42px;height:42px;border-radius:var(--radius-card);background:#A35337;color:#fff;display:grid;place-items:center;font-size:22px;font-weight:900 } body.yekfi-signature .nutrition-hard-gate b{display:block;color:#63311F;font-size:14px} body.yekfi-signature .nutrition-hard-gate small{display:block;color:#85523F;font-size:9.5px;line-height:1.45;margin-top:3px} /* ===== persistence-cloud-v870.css ===== */ /* YEKFI v8.7.0 — persistence visibility */ body.yekfi-signature .persistence-warning{ position:fixed;z-index:4500;left:12px;right:12px;bottom:calc(82px + env(safe-area-inset-bottom)); max-width:520px;margin:auto;border:1px solid rgba(153,67,43,.38);border-radius:var(--radius-card); background:#FFF2EA;color:#65301F;box-shadow:0 12px 30px rgba(75,42,28,.18); padding:10px 12px;text-align:right;display:grid;gap:2px } body.yekfi-signature .persistence-warning[hidden]{display:none} body.yekfi-signature .persistence-warning b{font-size:11.5px} body.yekfi-signature .persistence-warning small{font-size:9px;line-height:1.35;color:#87513E} body.yekfi-signature .choice-row.as-button{width:100%;border:0;background:transparent;text-align:inherit} /* ===== pediatric-runtime-v900.css ===== */ /* YEKFI v9.0.0 — Pediatric Nutrition Runtime */ body.yekfi-signature .pediatric-family-banner{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid rgba(102,130,85,.28);border-radius:var(--radius-card);padding:11px 12px;background:#F4F7EE;color:#29472F;text-align:right} body.yekfi-signature .pediatric-family-banner>span:first-child{width:36px;height:36px;border-radius:var(--radius-control);background:#E4ECD9;display:grid;place-items:center;font-size:20px} body.yekfi-signature .pediatric-family-banner b{display:block;font-size:12px} body.yekfi-signature .pediatric-family-banner small{display:block;font-size:9.5px;line-height:1.4;color:#63705F;margin-top:2px} body.yekfi-signature .pediatric-family-banner em{font-style:normal;font-size:9px;font-weight:850;color:#456441} body.yekfi-signature .pediatric-context-card{padding:11px;border:1px solid var(--yi-line);border-radius:var(--radius-card);background:#fff;margin-bottom:10px} body.yekfi-signature .pediatric-context-card b{display:block;color:var(--yi-deep);font-size:12px} body.yekfi-signature .pediatric-context-card small{display:block;color:var(--yi-muted);font-size:9.5px;line-height:1.45;margin-top:3px} body.yekfi-signature .pediatric-context-options{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px} body.yekfi-signature .pediatric-context-options button{min-height:44px;border:1px solid var(--yi-line);border-radius:var(--radius-control);background:#F7F5ED;color:#29472F;font-size:9px;font-weight:800;padding:7px} body.yekfi-signature .pediatric-center-head{display:grid;grid-template-columns:45px minmax(0,1fr);gap:11px;align-items:center;padding:12px;border:1px solid var(--yi-line);border-radius:var(--radius-card);background:#F5F8EF;margin-bottom:10px} body.yekfi-signature .pediatric-center-head>span{width:43px;height:43px;border-radius:var(--radius-card);background:#E3EDD8;display:grid;place-items:center;font-size:22px} body.yekfi-signature .pediatric-center-head b{display:block;font-size:13px;color:#29472F} body.yekfi-signature .pediatric-center-head small{display:block;font-size:9.5px;color:#647260;line-height:1.45;margin-top:3px} body.yekfi-signature .pediatric-policy-card{padding:11px 12px;border-radius:var(--radius-card);border:1px solid #DCE5D4;background:#F8FAF5;margin:8px 0} body.yekfi-signature .pediatric-policy-card.warning{background:#FFF8E8;border-color:#E8D8A8} body.yekfi-signature .pediatric-policy-card b{display:block;font-size:11px;color:#35543A} body.yekfi-signature .pediatric-policy-card small{display:block;font-size:9.2px;color:#687265;line-height:1.5;margin-top:3px} body.yekfi-signature .pediatric-guide-row{padding:9px 10px;border-bottom:1px solid var(--yi-line)} body.yekfi-signature .pediatric-guide-row b{display:block;font-size:10.5px} body.yekfi-signature .pediatric-guide-row small{display:block;font-size:9px;color:var(--yi-muted);line-height:1.4;margin-top:2px} body.yekfi-signature .pediatric-meal-alert{margin:10px 0;padding:11px 12px;border:1px solid #D8E3D0;border-radius:var(--radius-card);background:#F5F8EF} body.yekfi-signature .pediatric-meal-alert.hard{border-color:#E1B9A8;background:#FFF1EB} body.yekfi-signature .pediatric-meal-alert b{display:block;font-size:11px;color:#365239;margin-bottom:4px} body.yekfi-signature .pediatric-meal-alert.hard b{color:#803E2C} body.yekfi-signature .pediatric-meal-alert small{display:block;font-size:9.2px;line-height:1.45;color:#647061;margin-top:2px} body.yekfi-signature .pediatric-feed-field{display:none} body.yekfi-signature .pediatric-feed-field.show{display:block} @media(max-width:390px){body.yekfi-signature .pediatric-context-options{grid-template-columns:1fr}} /* ===== food-science-v910.css ===== */ /* YEKFI v9.1.0 — Scientific Food Master Hardening */ body.yekfi-signature .science-center-head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;align-items:center;padding:12px;border:1px solid var(--yi-line);border-radius:var(--radius-card);background:#F7F5ED;margin-bottom:10px} body.yekfi-signature .science-center-head>span{width:42px;height:42px;border-radius:var(--radius-card);background:#2F5237;color:#F2DA8A;display:grid;place-items:center;font-size:20px;font-weight:850} body.yekfi-signature .science-center-head b{display:block;font-size:13px;color:#29472F} body.yekfi-signature .science-center-head small{display:block;font-size:9.4px;line-height:1.45;color:#687265;margin-top:3px} body.yekfi-signature .science-plan-card{margin:10px 0;padding:11px 12px;border:1px solid #D9E2D3;border-radius:var(--radius-card);background:#F6F9F2} body.yekfi-signature .science-plan-card b{display:block;font-size:11px;color:#35543A;margin-bottom:4px} body.yekfi-signature .science-plan-card small{display:block;font-size:9.2px;line-height:1.5;color:#677064;margin-top:3px} /* ===== food-composition-weighted-v920.css ===== */ /* YEKFI v9.2.0 — weighted external composition */ body.yekfi-signature .science-weight-pill{display:inline-flex;align-items:center;gap:4px;border:1px solid #D8E3D2;border-radius:var(--radius-pill);padding:4px 7px;background:#F6F9F2;color:#35543A;font-size:8.5px;font-weight:800} /* ===== saudi-market-label-v930.css ===== */ /* YEKFI v9.3.0 — Saudi Market Label Truth */ body.yekfi-signature .market-label-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid #D8C98D;border-radius:var(--radius-pill);padding:4px 7px;background:#FFF9E8;color:#5E532A;font-size:8.5px;font-weight:800} /* ===== kitchen-yield-v940.css ===== */ /* YEKFI v9.4.0 — Kitchen Yield Evidence Runtime */ body.yekfi-signature .kitchen-yield-hero,body.yekfi-signature .kitchen-center-head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;padding:12px;border:1px solid #D9E3D2;border-radius:var(--radius-card);background:#F6F9F2;margin-bottom:10px} body.yekfi-signature .kitchen-yield-hero>span,body.yekfi-signature .kitchen-center-head>span{width:42px;height:42px;border-radius:var(--radius-card);background:#E4ECD9;display:grid;place-items:center;font-size:20px} body.yekfi-signature .kitchen-yield-hero b,body.yekfi-signature .kitchen-center-head b{display:block;font-size:12px;color:#29472F} body.yekfi-signature .kitchen-yield-hero small,body.yekfi-signature .kitchen-center-head small{display:block;font-size:9.3px;color:#687265;line-height:1.45;margin-top:2px} body.yekfi-signature .kitchen-yield-hero.warn{background:#FFF8E8;border-color:#E8D8A8} body.yekfi-signature .kitchen-yield-hero.good{background:#F1F8ED;border-color:#CDE0C3} body.yekfi-signature .kitchen-measure-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} body.yekfi-signature .kitchen-test-row{padding:8px 4px;border-bottom:1px solid var(--yi-line)} body.yekfi-signature .kitchen-test-row b{display:block;font-size:10.5px} body.yekfi-signature .kitchen-test-row small{display:block;font-size:8.8px;color:var(--yi-muted);margin-top:2px} body.yekfi-signature .kitchen-inline{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:center;padding:9px 10px;border-radius:var(--radius-card);background:#F7F8F3;border:1px solid #DEE5D9;margin:9px 0} body.yekfi-signature .kitchen-inline>span{font-size:17px} body.yekfi-signature .kitchen-inline b{display:block;font-size:10.5px;color:#35543A} body.yekfi-signature .kitchen-inline small{display:block;font-size:8.8px;color:#6D756A;line-height:1.35;margin-top:2px} body.yekfi-signature .kitchen-inline.warn{background:#FFF8E8;border-color:#E8D8A8} body.yekfi-signature .kitchen-inline.good{background:#F1F8ED;border-color:#CDE0C3} body.yekfi-signature .kitchen-measure-btn{margin-top:8px} @media(max-width:390px){body.yekfi-signature .kitchen-measure-grid{grid-template-columns:1fr}} /* ===== release-readiness-v970.css ===== */ /* YEKFI v9.7.0 — Pilot Release Gate */ body.yekfi-signature .release-gate-card{width:100%;display:flex;justify-content:space-between;gap:9px;align-items:center;margin:9px 0;padding:10px 11px;border-radius:var(--radius-card);border:1px solid #D7E1D1;background:#F4F8F1;color:#35543A;text-align:right} body.yekfi-signature .release-gate-card span small,body.yekfi-signature .release-gate-card span b{display:block}body.yekfi-signature .release-gate-card span small{font-size:9.5px;color:#6A7467}body.yekfi-signature .release-gate-card span b{font-size:12px;margin-top:2px}body.yekfi-signature .release-gate-card em{font-style:normal;font-size:9.5px;font-weight:850}.release-gate-card.warn{background:#FFF8E8;border-color:#E6D6A7;color:#6A5625}.release-gate-card.hold{background:#FFF0EB;border-color:#E4BFB2;color:#7F3F31}.release-gate-card.pending{background:#F4F1E8;border-color:#E3DCC9;color:#685E46} body.yekfi-signature .release-gate-head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 12px;border-radius:var(--radius-card);background:#EDF5E9;border:1px solid #D3E3CC;margin:8px 0}body.yekfi-signature .release-gate-head.field{margin-top:14px}body.yekfi-signature .release-gate-head span b,body.yekfi-signature .release-gate-head span small{display:block}.release-gate-head span b{font-size:12px}.release-gate-head span small{font-size:9.5px;margin-top:2px;color:#687265}.release-gate-head strong{font-size:10px}.release-gate-head.warn{background:#FFF8E8;border-color:#E6D6A7}.release-gate-head.hold{background:#FFF0EB;border-color:#E4BFB2}.release-gate-head.pending{background:#F4F1E8;border-color:#E3DCC9} body.yekfi-signature .release-check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:start;padding:8px 2px;border-bottom:1px solid rgba(63,75,52,.08)}body.yekfi-signature .release-check>span{width:22px;height:22px;border-radius:var(--radius-price);display:grid;place-items:center;background:#EEF2E9;font-weight:900;font-size:10px}.release-check b,.release-check small{display:block}.release-check b{font-size:10.5px}.release-check small{font-size:9px;line-height:1.45;color:#6B7469;margin-top:2px}.release-check.block>span{background:#F8DCD5;color:#883F32}.release-check.pending>span{background:#EFE8D5;color:#726137}.release-check.warn>span{background:#F8EDCB;color:#7B6329}.release-check.pass>span{background:#E3F0DB;color:#45633E} /* ===== consumer-ui-v1046.css ===== */ /* ====================================================================== YEKFI v10.2.5 — Consumer Visual Recovery Authority Loaded LAST. It resolves later-layer geometry conflicts without altering planning, nutrition, inventory or application behavior. ====================================================================== */ :root{ --yk-prod-shell:1040px; --yk-prod-content:920px; --yk-header-offset:74px; --yk-prod-paper:#FFFDF8; --yk-prod-bg:#F7F3E8; --yk-prod-forest:#29442E; --yk-prod-gold:#C99732; } /* ---------- responsive shell ---------- */ body.yekfi-signature .app-shell{ width:min(var(--yk-prod-shell),100%); max-width:var(--yk-prod-shell); min-width:0; min-height:100dvh; margin-inline:auto; } body.yekfi-signature .content{ width:min(var(--yk-prod-content),100%); max-width:var(--yk-prod-content); min-width:0; margin-inline:auto; padding:calc(var(--yk-header-offset) + 22px) 18px calc(108px + env(safe-area-inset-bottom)); overflow-x:hidden; } /* ---------- header: explicit four-child contract ---------- */ body.yekfi-signature .topbar{ direction:ltr; position:fixed; top:0; left:50%; right:auto; transform:translateX(-50%); width:min(var(--yk-prod-shell),100%); min-height:var(--yk-header-offset); grid-template-columns:44px 50px 142px minmax(220px,1fr); grid-template-areas:"menu family budget brand"; grid-auto-flow:unset; gap:8px; align-items:center; padding:max(8px,env(safe-area-inset-top)) 16px 8px; background:rgba(252,249,241,.985); border-bottom:1px solid rgba(67,78,57,.10); box-shadow:0 8px 26px rgba(35,48,33,.045); backdrop-filter:blur(18px) saturate(1.04); z-index:900; } body.yekfi-signature .topbar>.round-icon{ grid-area:menu; direction:rtl; width:44px;height:44px;min-width:44px;min-height:44px; border-radius:var(--radius-card); } body.yekfi-signature .topbar>.family-top-btn{ grid-area:family; direction:rtl; width:50px;min-width:50px;min-height:48px; display:grid;place-items:center;align-content:center;gap:2px; padding:4px;border-radius:var(--radius-card); } body.yekfi-signature .family-top-btn .ui-svg{width:22px;height:22px} body.yekfi-signature .family-top-btn span{display:block;font-size:10.5px;line-height:1} body.yekfi-signature .topbar>.topbar-actions{ grid-area:budget; direction:rtl; width:142px;min-width:0; } body.yekfi-signature .budget-pill{ width:142px;min-width:142px;max-width:142px;min-height:48px; padding:7px 11px;border-radius:var(--radius-card);text-align:right; } body.yekfi-signature .budget-pill small{display:block;font-size:10.5px;line-height:1.15} body.yekfi-signature .budget-pill b{font-size:15px;line-height:1.18} body.yekfi-signature .budget-pill em{ display:block;max-width:124px;font-size:10px;line-height:1.15; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } body.yekfi-signature .topbar>.brand{ grid-area:brand; direction:rtl; justify-self:end; min-width:0;min-height:52px; display:flex;align-items:center;gap:10px;padding:0; } body.yekfi-signature .brand-icon{ display:block;width:44px;height:44px;min-width:44px;flex:0 0 44px; object-fit:contain;filter:drop-shadow(0 6px 12px rgba(27,43,31,.13)); } body.yekfi-signature .brand-copy{ direction:rtl;text-align:right;justify-items:start;gap:2px;min-width:0; } body.yekfi-signature .brand-title-line{ display:flex;align-items:baseline;gap:7px;white-space:nowrap; } body.yekfi-signature .brand-title-line strong{font-size:20px;line-height:1;color:var(--yk-prod-forest);font-weight:950} body.yekfi-signature .brand-title-line i{font-size:10.5px;letter-spacing:1px;color:var(--yk-prod-gold);font-weight:900} body.yekfi-signature .brand-copy small{display:block;font-size:11px;line-height:1.25;font-weight:700} /* ---------- onboarding composition ---------- */ body.yekfi-signature .ux-on-step{ width:100%;max-width:570px;margin:0 auto;gap:18px; } body.yekfi-signature .on-step-lead h1{font-size:29px;line-height:1.22} body.yekfi-signature .on-step-lead p{font-size:13px;line-height:1.75;max-width:48ch} body.yekfi-signature .house-count-list{grid-template-columns:1fr 1fr;gap:12px} body.yekfi-signature .stepper.ux-stepper{ grid-template-columns:minmax(0,1fr) 44px 44px 44px; gap:8px;min-height:96px;padding:14px;border-radius:var(--radius-card); } body.yekfi-signature .stepper.ux-stepper>span:first-child{min-width:0;gap:4px} body.yekfi-signature .stepper.ux-stepper>span:first-child b{font-size:15px} body.yekfi-signature .stepper.ux-stepper>span:first-child small{font-size:11.5px;line-height:1.35} body.yekfi-signature .stepper.ux-stepper .round-step{ width:44px;height:44px;min-width:44px;min-height:44px; border-radius:var(--radius-card);font-size:21px; } body.yekfi-signature .stepper.ux-stepper .count{width:44px;min-width:44px;font-size:22px;line-height:1} body.yekfi-signature .ux-house-total{border-radius:var(--radius-card);padding:13px 15px} body.yekfi-signature .ux-on-actions{gap:10px} body.yekfi-signature .ux-on-actions .btn{min-height:52px;font-size:14px;border-radius:var(--radius-card)} @media(min-width:561px){ body.yekfi-signature .onboarding{ align-items:center;justify-content:center;padding:20px; background: radial-gradient(circle at 18% 16%,rgba(213,183,105,.12),transparent 28rem), radial-gradient(circle at 85% 82%,rgba(71,93,62,.09),transparent 26rem), linear-gradient(145deg,#F8F5EC,#EFECDF); } body.yekfi-signature .onboarding .on-card{ width:min(650px,calc(100% - 28px));max-width:650px; min-height:auto;max-height:calc(100dvh - 40px); margin:auto;padding:22px 24px 24px; overflow-y:auto;border-radius:var(--radius-hero); border:1px solid rgba(94,105,78,.12); background:rgba(255,253,248,.98); box-shadow:0 30px 90px rgba(37,48,34,.12); } } /* ---------- recovery UI ---------- */ body.yekfi-signature .runtime-recovery-card{ max-width:680px;margin:42px auto;padding:26px 28px;text-align:right;border-radius:var(--radius-hero); } body.yekfi-signature .runtime-recovery-card h1{font-size:30px;line-height:1.25;margin:8px 0 10px} body.yekfi-signature .runtime-recovery-card p{font-size:14px;line-height:1.8} /* ---------- bottom navigation ---------- */ body.yekfi-signature .bottom-nav{ width:min(590px,calc(100% - 28px)); bottom:max(12px,env(safe-area-inset-bottom)); padding:7px;border-radius:var(--radius-hero); } body.yekfi-signature .bottom-nav .nav-btn{min-height:54px;border-radius:var(--radius-card)} /* ---------- tablet ---------- */ @media(max-width:899px){ :root{--yk-prod-shell:760px;--yk-prod-content:760px;--yk-header-offset:80px} body.yekfi-signature .topbar{ grid-template-columns:44px 52px 124px minmax(180px,1fr); gap:8px;padding-inline:14px; } body.yekfi-signature .topbar>.round-icon{width:44px;height:44px;min-width:44px;min-height:44px} body.yekfi-signature .topbar>.family-top-btn{width:52px;min-width:52px} body.yekfi-signature .topbar>.topbar-actions{width:124px} body.yekfi-signature .budget-pill{width:124px;min-width:124px;max-width:124px} body.yekfi-signature .budget-pill em{max-width:92px} body.yekfi-signature .brand-icon{width:44px;height:44px;min-width:44px;flex-basis:44px} body.yekfi-signature .brand-title-line strong{font-size:19px} } /* ---------- phone ---------- */ @media(max-width:560px){ :root{--yk-header-offset:70px} body.yekfi-signature .topbar{ grid-template-columns:44px 44px 92px minmax(0,1fr); min-height:70px;gap:4px; padding:max(7px,env(safe-area-inset-top)) 7px 7px; } body.yekfi-signature .content{ width:100%; padding:calc(70px + env(safe-area-inset-top) + 12px) 12px calc(94px + env(safe-area-inset-bottom)); } body.yekfi-signature .topbar>.round-icon{ width:44px;height:44px;min-width:44px;min-height:44px; } body.yekfi-signature .topbar>.family-top-btn{ width:44px;min-width:44px;min-height:48px;border-radius:var(--radius-card); } body.yekfi-signature .family-top-btn span{display:none} body.yekfi-signature .topbar>.topbar-actions{width:92px} body.yekfi-signature .budget-pill{ width:92px;min-width:92px;max-width:92px; min-height:48px;padding:6px 8px;border-radius:var(--radius-card); } body.yekfi-signature .budget-pill small{font-size:9.5px} body.yekfi-signature .budget-pill b{font-size:13px} body.yekfi-signature .budget-pill em{font-size:9px;max-width:78px} body.yekfi-signature .topbar>.brand{gap:6px;min-height:44px} body.yekfi-signature .brand-icon{width:39px;height:39px;min-width:39px;flex-basis:39px} body.yekfi-signature .brand-title-line{gap:4px} body.yekfi-signature .brand-title-line strong{font-size:16.5px} body.yekfi-signature .brand-title-line i{font-size:9px} body.yekfi-signature .brand-copy small{font-size:9.7px} body.yekfi-signature .onboarding{padding:0} body.yekfi-signature .onboarding .on-card{ width:100%;min-height:100dvh;max-height:none; margin:0;padding:max(14px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom)); border-radius:0;box-shadow:none;overflow:visible; } body.yekfi-signature .on-step-lead h1{font-size:26px} body.yekfi-signature .on-step-lead p{font-size:12.5px} body.yekfi-signature .house-count-list{grid-template-columns:1fr;gap:9px} body.yekfi-signature .stepper.ux-stepper{ grid-template-columns:minmax(0,1fr) 44px 44px 44px; min-height:80px;padding:11px 12px; } body.yekfi-signature .bottom-nav{width:calc(100% - 18px);bottom:max(8px,env(safe-area-inset-bottom))} } @media(max-width:370px){ body.yekfi-signature .topbar{ grid-template-columns:44px 44px 84px minmax(0,1fr); gap:3px;padding-inline:5px; } body.yekfi-signature .topbar>.topbar-actions{width:84px} body.yekfi-signature .budget-pill{width:84px;min-width:84px;max-width:84px} body.yekfi-signature .brand-copy small{display:none} body.yekfi-signature .stepper.ux-stepper{ grid-template-columns:minmax(0,1fr) 44px 40px 44px;gap:5px; } } /* ====================================================================== Consumer Experience Foundation This continues the SINGLE final UI authority layer. ====================================================================== */ :root{ --yk-space-1:4px; --yk-space-2:8px; --yk-space-3:12px; --yk-space-4:16px; --yk-space-5:20px; --yk-space-6:24px; --yk-space-8:32px; --yk-card-radius:22px; --yk-card-radius-lg:28px; --yk-border:rgba(65,78,55,.12); --yk-border-strong:rgba(65,78,55,.18); --yk-shadow-soft:0 12px 34px rgba(34,47,31,.07); --yk-shadow-card:0 8px 22px rgba(34,47,31,.055); --yk-ease:cubic-bezier(.2,.7,.2,1); } body.yekfi-signature{ color:#1D2A1F; background:#F7F4EA; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.yekfi-signature button, body.yekfi-signature a, body.yekfi-signature summary{ -webkit-tap-highlight-color:transparent; } @media(hover:hover){ body.yekfi-signature button:not(:disabled), body.yekfi-signature a, body.yekfi-signature summary{ transition:transform 150ms var(--yk-ease),box-shadow 150ms var(--yk-ease),background-color 150ms var(--yk-ease),border-color 150ms var(--yk-ease); } body.yekfi-signature button:not(:disabled):hover{ transform:translateY(-1px); } body.yekfi-signature button:not(:disabled):active{ transform:translateY(0) scale(.985); } } /* ---------- page rhythm ---------- */ body.yekfi-signature .sig-page{ display:flex; flex-direction:column; gap:22px; } body.yekfi-signature .sig-section{ margin:0; min-width:0; } body.yekfi-signature .sig-section-head{ align-items:end; gap:12px; margin:0 2px 12px; } body.yekfi-signature .sig-section-head span{min-width:0} body.yekfi-signature .sig-section-head small{ display:block; margin-bottom:2px; font-size:11px; line-height:1.35; color:#70786D; font-weight:700; } body.yekfi-signature .sig-section-head h2{ margin:0; font-size:21px; line-height:1.25; letter-spacing:-.2px; color:#243728; font-weight:900; } body.yekfi-signature .sig-link{ min-height:44px; padding:8px 10px; border-radius:var(--radius-control); color:#3C5B3E; font-weight:850; white-space:nowrap; } body.yekfi-signature .sig-panel{ border:1px solid var(--yk-border); border-radius:var(--yk-card-radius); background:#FFFEFA; box-shadow:0 8px 24px rgba(34,47,31,.045); } /* ---------- day context ---------- */ body.yekfi-signature .sig-context-bar{ min-height:58px; padding:8px; border:1px solid var(--yk-border); border-radius:var(--radius-card); background:#FFFEFA; box-shadow:0 4px 16px rgba(36,50,34,.035); } body.yekfi-signature .sig-context-bar>button{ width:44px;height:44px;min-width:44px;min-height:44px; border-radius:var(--radius-card); } body.yekfi-signature .sig-context-bar span b{ font-size:14px;line-height:1.25; } body.yekfi-signature .sig-context-bar span small{ font-size:10.5px;color:#798176; } /* ---------- hero ---------- */ body.yekfi-signature .sig-hero{ overflow:hidden; min-height:286px; border-radius:var(--radius-hero); border:1px solid rgba(44,61,42,.08); box-shadow:0 18px 46px rgba(34,47,31,.095); background:#243728; } body.yekfi-signature .sig-hero-media img{ width:100%;height:100%;object-fit:cover; } body.yekfi-signature .sig-hero-shade{ background:linear-gradient(to left,rgba(17,29,20,.88) 0%,rgba(17,29,20,.70) 42%,rgba(17,29,20,.22) 78%,rgba(17,29,20,.08) 100%); } body.yekfi-signature .sig-hero-copy{ max-width:590px; padding:30px; } body.yekfi-signature .sig-hero-overline{ font-size:11px; line-height:1.3; letter-spacing:.2px; } body.yekfi-signature .sig-hero-title{ margin:5px 0 7px; font-size:30px; line-height:1.15; font-weight:950; } body.yekfi-signature .sig-hero-copy p{ max-width:52ch; margin:0 0 14px; font-size:13px; line-height:1.7; } body.yekfi-signature .sig-hero-meta{ display:flex;flex-wrap:wrap;gap:7px;margin-bottom:17px; } body.yekfi-signature .sig-hero-meta span{ min-height:29px; display:inline-flex;align-items:center; padding:5px 10px;border-radius:var(--radius-pill); font-size:10.5px;font-weight:800; } body.yekfi-signature .sig-hero-actions{gap:9px} body.yekfi-signature .sig-btn{ min-height:46px; padding:10px 16px; border-radius:var(--radius-card); font-size:12px; font-weight:900; } /* ---------- today: next meal then today's meals ---------- */ body.yekfi-signature .sig-meal-list{ display:flex; flex-direction:column; gap:8px; padding:8px; background:transparent; border:0; box-shadow:none; } body.yekfi-signature .sig-meal-row{ display:grid; grid-template-columns:76px minmax(0,1fr) 44px; align-items:center; gap:12px; min-height:92px; padding:8px; border:1px solid var(--yk-border); border-radius:var(--radius-card); background:rgba(255,253,248,.97); box-shadow:0 5px 16px rgba(34,47,31,.04); } body.yekfi-signature .sig-meal-row.is-next{ border-color:rgba(201,151,50,.36); box-shadow:0 8px 22px rgba(150,112,31,.08); } body.yekfi-signature .sig-meal-thumb{ width:76px;height:76px; overflow:hidden; border-radius:var(--radius-card); background:#EBE7DA; } body.yekfi-signature .sig-meal-thumb img{ width:100%;height:100%;object-fit:cover; } body.yekfi-signature .sig-meal-main{ min-width:0; min-height:64px; display:flex;flex-direction:column;justify-content:center;align-items:flex-start; gap:3px;padding:5px 2px;text-align:right; } body.yekfi-signature .sig-meal-main small{ font-size:11px;line-height:1.3;color:#6F786D;font-weight:800; } body.yekfi-signature .sig-meal-main b{ width:100%; font-size:15.75px;line-height:1.4;color:#253728;font-weight:900; white-space:normal;overflow-wrap:anywhere; } body.yekfi-signature .sig-meal-main em{ font-size:11px;line-height:1.4;color:#70786E;font-style:normal; } body.yekfi-signature .sig-meal-status{ width:44px;height:44px;min-width:44px;min-height:44px; border-radius:var(--radius-card);font-size:18px; } /* Quick actions are secondary to the meal content, not the first thing the user sees. */ body.yekfi-signature .sig-quick-section{ padding-top:2px; } body.yekfi-signature .yi-quick-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } body.yekfi-signature .yi-quick{ min-width:0; min-height:92px; padding:13px; border:1px solid var(--yk-border); border-radius:var(--radius-card); background:rgba(255,253,248,.94); box-shadow:0 5px 15px rgba(34,47,31,.035); text-align:right; } body.yekfi-signature .yi-quick i{ width:30px;height:30px; display:grid;place-items:center; margin-bottom:8px; border-radius:var(--radius-control); background:rgba(57,88,58,.08); color:#355B3C; } body.yekfi-signature .yi-quick b{ display:block;font-size:13px;line-height:1.3;font-weight:900; } body.yekfi-signature .yi-quick small{ display:block;margin-top:2px; font-size:10.5px;line-height:1.35;color:#747C70; } /* ---------- notices: compact, readable, not dominant ---------- */ body.yekfi-signature .generation-notice, body.yekfi-signature .summary-banner{ border-radius:var(--radius-card); border:1px solid var(--yk-border); box-shadow:none; } body.yekfi-signature .generation-notice{ padding:12px 14px; } body.yekfi-signature .generation-notice b{font-size:13px} body.yekfi-signature .generation-notice small{font-size:10.5px;line-height:1.45} /* ---------- weekly plan ---------- */ body.yekfi-signature .sig-day-strip{ width:100%;min-width:0;overflow:hidden;grid-template-columns:repeat(7,minmax(0,1fr)); padding:5px; gap:5px; border:1px solid var(--yk-border); border-radius:var(--radius-card); background:#FFFEFA; } body.yekfi-signature .sig-day{ min-width:0; min-height:58px; border-radius:var(--radius-card); padding:7px 2px; } body.yekfi-signature .sig-day.active{ background:#365D3C;color:white; box-shadow:0 7px 18px rgba(37,75,42,.17); } body.yekfi-signature .sig-day b{font-size:10.5px} body.yekfi-signature .sig-day small{font-size:12px} body.yekfi-signature .sig-week-card{ display:grid; grid-template-columns:98px minmax(0,1fr); gap:14px; padding:11px; margin:0 0 9px; border:1px solid var(--yk-border); border-radius:var(--radius-card); background:rgba(255,253,248,.97); box-shadow:0 5px 16px rgba(34,47,31,.035); } body.yekfi-signature .sig-week-card:last-child{margin-bottom:0} body.yekfi-signature .sig-week-card .sig-meal-thumb{ width:98px;height:98px;border-radius:var(--radius-card); } body.yekfi-signature .sig-week-copy{min-width:0;align-self:center} body.yekfi-signature .sig-week-copy .name{ width:100%; font-size:15.5px;line-height:1.42;font-weight:900; white-space:normal;text-align:right; } body.yekfi-signature .sig-week-copy .meta{ margin-top:5px;display:flex;gap:8px;flex-wrap:wrap; } body.yekfi-signature .sig-week-row-actions{ margin-top:9px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:7px; } body.yekfi-signature .sig-week-row-actions>button, body.yekfi-signature .meal-more>summary{ min-height:44px;border-radius:var(--radius-card); } /* ---------- shopping ---------- */ body.yekfi-signature .sig-shopping-hero{ min-height:235px; } body.yekfi-signature .shopping-domains{ padding:5px; border:1px solid var(--yk-border); border-radius:var(--radius-card); background:#FFFEFA; } body.yekfi-signature .shopping-domains button{ min-height:54px;border-radius:var(--radius-card); } body.yekfi-signature .sig-shop-category{ margin-bottom:18px; overflow:hidden; border:1px solid var(--yk-border); border-radius:var(--radius-card); background:#FFFEFA; box-shadow:var(--yk-shadow-card); } body.yekfi-signature .sig-shop-cat-head{ min-height:56px; padding:10px 13px; border-bottom:1px solid rgba(65,78,55,.08); background:rgba(247,244,234,.66); } body.yekfi-signature .sig-shop-item{ display:grid; grid-template-columns:44px 54px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:76px; padding:10px 12px; border-bottom:1px solid rgba(65,78,55,.075); } body.yekfi-signature .sig-shop-item:not(.has-food-thumb){ grid-template-columns:44px minmax(0,1fr) auto; } body.yekfi-signature .sig-shop-item:last-child{border-bottom:0} body.yekfi-signature .sig-shop-item.done{ opacity:.68; background:rgba(242,243,237,.6); } body.yekfi-signature .sig-shop-check{ width:44px;height:44px;min-width:44px;min-height:44px;border-radius:var(--radius-card); } body.yekfi-signature .sig-shop-thumb{ width:54px;height:54px;border-radius:var(--radius-card);object-fit:cover; } body.yekfi-signature .sig-shop-main{ min-width:0; min-height:52px; display:flex;flex-direction:column;justify-content:center;align-items:flex-start; text-align:right; } body.yekfi-signature .sig-shop-main b{ font-size:14px;line-height:1.4;font-weight:900; } body.yekfi-signature .sig-shop-main small{ margin-top:3px;font-size:11px;line-height:1.4;color:#6E776C; } body.yekfi-signature .sig-shop-main em{ margin-top:3px;font-size:10.75px;line-height:1.35;color:#56715A;font-style:normal;font-weight:750; } body.yekfi-signature .sig-shop-qty{ min-width:74px; text-align:left; } body.yekfi-signature .sig-shop-qty b{display:block;font-size:12.5px;line-height:1.3} body.yekfi-signature .sig-shop-qty small{font-size:10.5px;color:#70786D} body.yekfi-signature .store-mode-head{ position:sticky; top:calc(var(--yk-header-offset) + env(safe-area-inset-top)); z-index:30; border-radius:0 0 18px 18px; box-shadow:0 10px 28px rgba(34,47,31,.10); } body.yekfi-signature .store-search{ margin:12px 0; border-radius:var(--radius-card); } /* ---------- summaries ---------- */ body.yekfi-signature .sig-summary{ padding:18px; border:1px solid var(--yk-border); border-radius:var(--radius-hero); background:rgba(255,253,248,.94); box-shadow:var(--yk-shadow-card); } body.yekfi-signature .sig-metric-grid{ gap:8px; } body.yekfi-signature .sig-metric{ min-height:82px; padding:12px; border-radius:var(--radius-card); background:#F7F4EA; } body.yekfi-signature .sig-metric strong{font-size:18px} body.yekfi-signature .sig-metric small{font-size:10.5px;line-height:1.3} /* ---------- onboarding chrome ---------- */ body.yekfi-signature .on-head{ grid-template-columns:46px minmax(0,1fr) auto; gap:11px; align-items:center; } body.yekfi-signature .on-head .logo-orb{ width:46px;height:46px; border-radius:var(--radius-card); background:#F5F0E1; border:1px solid rgba(201,151,50,.22); } body.yekfi-signature .on-head .logo-orb img{ width:34px;height:34px;object-fit:contain; } body.yekfi-signature .on-head>div:nth-child(2){ min-width:0; } body.yekfi-signature .on-head>div:nth-child(2)>b{ display:block;font-size:13px;line-height:1.3;font-weight:900; } body.yekfi-signature .on-head>div:nth-child(2)>small{ display:block;margin-top:2px;font-size:10.5px;line-height:1.35;color:#777E73; } body.yekfi-signature #stepLabel{ min-width:max-content; padding:6px 9px; border-radius:var(--radius-pill); background:#F5F0E1; color:#765A1B; font-size:10px; line-height:1; font-weight:900; } body.yekfi-signature .progress{ height:5px;border-radius:var(--radius-pill);background:#E9E4D7;overflow:hidden; } body.yekfi-signature .progress i{ border-radius:var(--radius-pill);background:linear-gradient(90deg,#315A38,#C99732); } body.yekfi-signature .mode-choice.ux-mode-choice{ gap:9px; } body.yekfi-signature .mode-choice.ux-mode-choice>button{ min-height:94px; border-radius:var(--radius-card); } body.yekfi-signature .setup-profile-box{ overflow:hidden; border:1px solid var(--yk-border); border-radius:var(--radius-card); background:rgba(255,253,248,.96); box-shadow:var(--yk-shadow-card); } body.yekfi-signature .setup-profile-row{ min-height:64px; gap:8px; padding:10px 12px; } body.yekfi-signature .setup-profile-row>.input{ min-height:46px; border-radius:var(--radius-card); } body.yekfi-signature .budget-entry-card{ border-radius:var(--radius-card); padding:17px; } body.yekfi-signature .budget-number-input{ min-height:54px; } body.yekfi-signature .budget-policy-grid{ gap:9px; } body.yekfi-signature .budget-policy-card, body.yekfi-signature .cuisine-card{ min-height:88px; border-radius:var(--radius-card); } body.yekfi-signature .blend-disclosure{ border-radius:var(--radius-card); } body.yekfi-signature .ux-choice-summary{ border-radius:var(--radius-card); overflow:hidden; } body.yekfi-signature .ux-trust-strip{ display:grid; grid-template-columns:1fr; gap:6px; } body.yekfi-signature .ux-trust-strip span{ min-height:36px; display:flex;align-items:center; padding:7px 10px;border-radius:var(--radius-control); background:rgba(56,92,59,.06); } /* ---------- sheets & dialogs ---------- */ body.yekfi-signature .sheet-panel{ width:min(720px,100%); max-width:720px; max-height:88dvh; border-radius:var(--radius-hero)28px 0 0; box-shadow:0 -18px 60px rgba(24,36,25,.16); } body.yekfi-signature .sheet-head{ min-height:64px; padding:10px 16px; } body.yekfi-signature .sheet-head h2{ font-size:18px;line-height:1.3; } body.yekfi-signature #sheetContent{ padding:14px 16px calc(22px + env(safe-area-inset-bottom)); } body.yekfi-signature .field{gap:6px} body.yekfi-signature .field label, body.yekfi-signature .field-label{ font-size:11px;line-height:1.35;font-weight:850;color:#4F5D50; } body.yekfi-signature .input{ min-height:48px; border-radius:var(--radius-card); border-color:rgba(65,78,55,.16); background:#FFFEFA; } body.yekfi-signature .input:focus{ border-color:#A47A24; box-shadow:0 0 0 3px rgba(201,151,50,.12); } /* ---------- bottom navigation refinement ---------- */ body.yekfi-signature .bottom-nav{ border:1px solid rgba(65,78,55,.10); box-shadow:0 16px 44px rgba(30,43,30,.14); background:rgba(255,253,248,.96); } body.yekfi-signature .bottom-nav .nav-btn{ min-width:0; gap:3px; } body.yekfi-signature .bottom-nav .nav-btn i{ width:28px;height:28px; } body.yekfi-signature .bottom-nav .nav-btn span{ font-size:10.5px;line-height:1;font-weight:850; } body.yekfi-signature .bottom-nav .nav-btn.active{ color:#2F5B36; background:#F3EBCB; } /* ---------- mobile precision ---------- */ @media(max-width:560px){ body.yekfi-signature .sig-page{gap:18px} body.yekfi-signature .sig-section-head{margin-bottom:9px} body.yekfi-signature .sig-section-head h2{font-size:19px} body.yekfi-signature .sig-hero{ min-height:228px; border-radius:var(--radius-hero); } body.yekfi-signature .sig-hero-copy{padding:18px;max-width:100%} body.yekfi-signature .sig-hero-title{font-size:23px;line-height:1.18} body.yekfi-signature .sig-hero-copy p{ max-width:34ch; margin-bottom:11px; font-size:12.25px; line-height:1.55; } body.yekfi-signature .sig-hero-meta{margin-bottom:12px} body.yekfi-signature .sig-hero-actions{ display:grid; grid-template-columns:1fr 1fr; width:100%; } body.yekfi-signature .sig-btn{width:100%} body.yekfi-signature .sig-meal-row{ grid-template-columns:68px minmax(0,1fr) 44px; gap:9px; min-height:82px; padding:7px; border-radius:var(--radius-card); } body.yekfi-signature .sig-meal-thumb{ width:68px;height:68px;border-radius:var(--radius-card); } body.yekfi-signature .sig-meal-main b{font-size:14.5px} body.yekfi-signature .sig-meal-main em{font-size:10.5px} body.yekfi-signature .yi-quick-grid{ grid-template-columns:1fr 1fr; gap:8px; } body.yekfi-signature .yi-quick{ min-height:84px; padding:11px; } body.yekfi-signature .sig-week-card{ grid-template-columns:82px minmax(0,1fr); gap:10px;padding:8px;border-radius:var(--radius-card); } body.yekfi-signature .sig-week-card .sig-meal-thumb{ width:82px;height:82px;border-radius:var(--radius-card); } body.yekfi-signature .sig-week-row-actions{ grid-template-columns:1fr 1fr 44px; } body.yekfi-signature .sig-shopping-hero{min-height:205px} body.yekfi-signature .sig-shop-category{border-radius:var(--radius-card);margin-bottom:14px} body.yekfi-signature .sig-shop-item{ grid-template-columns:44px 48px minmax(0,1fr) auto; gap:8px;padding:8px;min-height:70px; } body.yekfi-signature .sig-shop-item:not(.has-food-thumb){ grid-template-columns:44px minmax(0,1fr) auto; } body.yekfi-signature .sig-shop-thumb{width:48px;height:48px;border-radius:var(--radius-control)} body.yekfi-signature .sig-shop-qty{min-width:58px} body.yekfi-signature .sig-shop-main b{font-size:13.5px;line-height:1.4} body.yekfi-signature .sig-shop-main small{font-size:10.5px;line-height:1.4} body.yekfi-signature .sig-shop-main em{font-size:10.25px;line-height:1.4} body.yekfi-signature .sig-shop-qty b{font-size:12px} body.yekfi-signature .sig-shop-qty small{font-size:10px} body.yekfi-signature .sig-metric-grid{ grid-template-columns:1fr 1fr; } body.yekfi-signature .on-head{ grid-template-columns:42px minmax(0,1fr) auto; gap:8px; } body.yekfi-signature .on-head .logo-orb{width:42px;height:42px;border-radius:var(--radius-card)} body.yekfi-signature .on-head .logo-orb img{width:31px;height:31px} body.yekfi-signature #stepLabel{font-size:9.5px;padding:6px 8px} body.yekfi-signature .setup-profile-row{ grid-template-columns:minmax(72px,1fr) 100px 82px; gap:6px; } body.yekfi-signature .ux-on-actions{ position:sticky; bottom:0; z-index:10; margin:10px -2px -2px; padding:10px 2px max(8px,env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(255,253,248,0),rgba(255,253,248,.96) 20%,rgba(255,253,248,1) 55%); backdrop-filter:blur(8px); } body.yekfi-signature .sheet-panel{ width:100%;max-width:100%;max-height:91dvh;border-radius:var(--radius-hero)24px 0 0; } } @media(max-width:360px){ body.yekfi-signature .sig-meal-row{ grid-template-columns:60px minmax(0,1fr) 44px; } body.yekfi-signature .sig-meal-thumb{width:60px;height:60px} body.yekfi-signature .setup-profile-row{ grid-template-columns:minmax(68px,1fr) 94px 76px; } body.yekfi-signature .sig-shop-item.has-food-thumb{ grid-template-columns:44px minmax(0,1fr) auto; } body.yekfi-signature .sig-shop-item.has-food-thumb .sig-shop-thumb{display:none} } /* Motion stays subtle and respects the operating-system preference. */ @media(prefers-reduced-motion:reduce){ body.yekfi-signature *, body.yekfi-signature *::before, body.yekfi-signature *::after{ scroll-behavior:auto; animation-duration:.01ms; animation-iteration-count:1; transition-duration:.01ms; } } /* ====================================================================== Strategic goals + background system Auto is intentionally quiet. Photography is opt-in through appearance. ====================================================================== */ body.yekfi-signature{ --yk-surface-image:none; --yk-surface-position:center top; --yk-surface-opacity:0; --yk-surface-wash: radial-gradient(circle at 82% 8%,rgba(212,175,55,.055),transparent 22rem), radial-gradient(circle at 10% 42%,rgba(57,88,58,.035),transparent 28rem), linear-gradient(180deg,#FAF7EF 0%,#F7F3E8 52%,#FAF8F1 100%); } body.yekfi-signature::before{ background-image:var(--yk-surface-image); background-position:var(--yk-surface-position); background-size:cover; background-repeat:no-repeat; opacity:var(--yk-surface-opacity); filter:saturate(.78) contrast(.96); } body.yekfi-signature::after{background:var(--yk-surface-wash)} body.yekfi-signature .content::before, body.yekfi-signature .content::after, body.yekfi-signature .sig-page::after, body.yekfi-signature .topbar::before, body.yekfi-signature .sig-section:nth-of-type(even) .sig-panel::before, body.yekfi-signature .sig-family-actions::after{display:none} /* Onboarding stays brand-led but content-first: no photographic wallpaper. */ body.yekfi-signature.yekfi-onboarding-open::before{background-image:none;opacity:0} body.yekfi-signature.yekfi-onboarding-open::after{ background: radial-gradient(circle at 80% 8%,rgba(212,175,55,.09),transparent 22rem), radial-gradient(circle at 12% 78%,rgba(57,88,58,.055),transparent 26rem), linear-gradient(145deg,#FAF7EE,#F4F0E5); } /* ---------- household strategic goals ---------- */ body.yekfi-signature .strategic-goals-section{ position:relative; } body.yekfi-signature .strategic-goals-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; } body.yekfi-signature .strategic-goal-card{ min-width:0; min-height:116px; display:flex; align-items:flex-start; gap:10px; padding:14px; text-align:right; border:1px solid var(--yk-border); border-radius:var(--radius-card); background:rgba(255,253,248,.95); box-shadow:0 7px 18px rgba(35,48,34,.045); } body.yekfi-signature .strategic-goal-icon{ width:36px;height:36px;min-width:36px; display:grid;place-items:center; border-radius:var(--radius-control); background:#F2E9C9; color:#31563A; font-size:18px; font-weight:950; } body.yekfi-signature .strategic-goal-copy{ min-width:0; display:flex;flex-direction:column;align-items:flex-start; } body.yekfi-signature .strategic-goal-copy small{ font-size:10.5px;line-height:1.2;color:#6D766C;font-weight:800; } body.yekfi-signature .strategic-goal-copy b{ margin-top:4px; font-size:17px;line-height:1.2;color:#27392B;font-weight:950; } body.yekfi-signature .strategic-goal-copy em{ margin-top:5px; font-size:10.5px;line-height:1.4;color:#70796E;font-style:normal; } body.yekfi-signature .strategic-goal-card.good{border-color:rgba(63,107,69,.20)} body.yekfi-signature .strategic-goal-card.watch{border-color:rgba(201,151,50,.28)} body.yekfi-signature .strategic-goal-card.risk{border-color:rgba(160,70,58,.26)} body.yekfi-signature .strategic-goals-note{ margin:8px 3px 0; font-size:10px;line-height:1.5;color:#747B71; } body.yekfi-signature .strategic-goal-picker{ display:flex;flex-direction:column;gap:8px; } body.yekfi-signature .strategic-goal-pick{ width:100%; min-height:78px; display:grid; grid-template-columns:38px minmax(0,1fr) 34px; align-items:center; gap:10px; padding:10px 12px; text-align:right; border:1px solid var(--yk-border); border-radius:var(--radius-card); background:#FFFEFA; } body.yekfi-signature .strategic-goal-pick.selected{ border-color:rgba(56,92,59,.33); background:#F7F8F0; box-shadow:0 5px 16px rgba(43,73,47,.06); } body.yekfi-signature .strategic-goal-pick>span:nth-child(2){ min-width:0;display:flex;flex-direction:column;align-items:flex-start; } body.yekfi-signature .strategic-goal-pick b{ font-size:13px;line-height:1.3;font-weight:900; } body.yekfi-signature .strategic-goal-pick small{ margin-top:2px;font-size:10.5px;line-height:1.4;color:#6F786E; } body.yekfi-signature .strategic-goal-pick em{ margin-top:4px;font-size:10px;line-height:1.35;color:#48634C;font-style:normal;font-weight:750; } body.yekfi-signature .strategic-goal-pick strong{ width:32px;height:32px;display:grid;place-items:center; border-radius:var(--radius-control);background:#F2E9C9;color:#355A3B; } @media(max-width:560px){ body.yekfi-signature .strategic-goals-grid{grid-template-columns:1fr;gap:7px} body.yekfi-signature .strategic-goal-card{min-height:70px;padding:10px 11px;border-radius:var(--radius-card)} body.yekfi-signature .strategic-goal-icon{width:32px;height:32px;min-width:32px;border-radius:var(--radius-control);font-size:16px} body.yekfi-signature .strategic-goal-copy b{font-size:14px;margin-top:2px} body.yekfi-signature .strategic-goal-copy em{margin-top:3px} } /* ====================================================================== v10.2.2 — Closed Beta Trust & Data Safety ====================================================================== */ body.yekfi-signature .beta-trust-inline, body.yekfi-signature .price-trust-inline{ width:100%; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; padding:10px 12px; text-align:right; border:1px solid rgba(61,93,62,.16); border-radius:var(--radius-card); background:rgba(248,249,241,.92); color:#2F4633; } body.yekfi-signature .beta-trust-inline{ margin-top:10px; } body.yekfi-signature .beta-trust-inline>span:first-child, body.yekfi-signature .price-trust-inline>span:first-child{ width:32px;height:32px; display:grid;place-items:center; border-radius:var(--radius-control); background:#EDF3E8; font-size:15px;font-weight:950; } body.yekfi-signature .beta-trust-inline>span:nth-child(2), body.yekfi-signature .price-trust-inline>span:nth-child(2){ min-width:0;display:flex;flex-direction:column;align-items:flex-start; } body.yekfi-signature .beta-trust-inline b, body.yekfi-signature .price-trust-inline b{ font-size:11.5px;line-height:1.35;font-weight:900; } body.yekfi-signature .beta-trust-inline small, body.yekfi-signature .price-trust-inline small{ margin-top:2px;font-size:9.8px;line-height:1.45;color:#687369; } body.yekfi-signature .price-trust-inline{ grid-template-columns:30px minmax(0,1fr); margin:10px 0 0; background:rgba(255,253,248,.16); border-color:rgba(255,255,255,.22); color:white; } body.yekfi-signature .price-trust-inline small{color:rgba(255,255,255,.78)} body.yekfi-signature .price-trust-inline>span:first-child{background:rgba(255,255,255,.14)} body.yekfi-signature .trust-route{ border-color:rgba(56,92,59,.18); background:#FAFBF4; } body.yekfi-signature .trust-hero{ display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:11px; padding:14px; border:1px solid rgba(56,92,59,.18); border-radius:var(--radius-card); background:linear-gradient(145deg,#F7FAF1,#FFFDF8); } body.yekfi-signature .trust-shield{ width:44px;height:44px;display:grid;place-items:center; border-radius:var(--radius-card);background:#E9F1E4;color:#315A38; font-size:20px;font-weight:950; } body.yekfi-signature .trust-hero b{font-size:14px;line-height:1.35} body.yekfi-signature .trust-hero small{display:block;margin-top:3px;font-size:10.5px;line-height:1.5;color:#667066} body.yekfi-signature .trust-grid{ display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0; } body.yekfi-signature .trust-card{ min-width:0;min-height:90px; display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:start; padding:12px;text-align:right; border:1px solid var(--yk-border);border-radius:var(--radius-card);background:#FFFEFA; } body.yekfi-signature .trust-card>span{ width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-control);background:#F1EBCF;color:#36563B;font-weight:950; } body.yekfi-signature .trust-card div{min-width:0;display:flex;flex-direction:column;align-items:flex-start} body.yekfi-signature .trust-card small{font-size:9.8px;color:#747C72;font-weight:750} body.yekfi-signature .trust-card b{margin-top:3px;font-size:12px;line-height:1.4;font-weight:900} body.yekfi-signature .trust-card em{margin-top:5px;font-size:9.8px;color:#4E6B53;font-style:normal} body.yekfi-signature .trust-card.danger>span{background:#F8E8E4;color:#8D4539} body.yekfi-signature .trust-facts{margin-top:14px} body.yekfi-signature .trust-row{ display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px; padding:10px 0;border-bottom:1px solid rgba(65,78,55,.08); } body.yekfi-signature .trust-row span{font-size:10.5px;color:#70786D;font-weight:800} body.yekfi-signature .trust-row b{font-size:11px;line-height:1.5;font-weight:800} body.yekfi-signature .trust-disclaimer{ margin-top:9px;padding:11px 12px;border-radius:var(--radius-card);border:1px solid rgba(65,78,55,.11);background:#F8F6ED; } body.yekfi-signature .trust-disclaimer b{display:block;font-size:11.5px;font-weight:900} body.yekfi-signature .trust-disclaimer small{display:block;margin-top:3px;font-size:10px;line-height:1.55;color:#687168} body.yekfi-signature .trust-delete-warning{ padding:14px;border:1px solid rgba(151,63,50,.23);border-radius:var(--radius-card);background:#FFF6F3; } body.yekfi-signature .trust-delete-warning b{display:block;font-size:13px;color:#783D34} body.yekfi-signature .trust-delete-warning small{display:block;margin-top:4px;font-size:10.5px;line-height:1.55;color:#775B56} body.yekfi-signature .btn.danger{background:#8D4539;color:#fff;border-color:#8D4539} body.yekfi-signature .support-diagnostic{ margin:10px 0;padding:9px 11px;border-radius:var(--radius-card);background:#F5F1E5; } body.yekfi-signature .support-diagnostic summary{min-height:44px;display:flex;align-items:center;font-size:11px;font-weight:850;cursor:pointer} body.yekfi-signature .support-diagnostic small{display:block;padding:4px 0 6px;font-size:10px;color:#697168} @media(max-width:560px){ body.yekfi-signature .trust-grid{grid-template-columns:1fr} body.yekfi-signature .trust-card{min-height:74px} body.yekfi-signature .trust-row{grid-template-columns:92px minmax(0,1fr)} } /* ====================================================================== Premium Visual Foundation ====================================================================== */ :root{ --yk-gold-active:#D4AF37; --yk-gold-active-soft:rgba(212,175,55,.34); --yk-gold-active-hairline:rgba(212,175,55,.82); } /* Active/selected is a precise state, not a heavy glow. */ body.yekfi-signature :is( .option.selected, .budget-policy-card.selected, .mode-choice button.active, .cuisine-card.selected, .appearance-bg-card.selected, .appearance-density button.selected, .shopping-domains button.active, .home-filter.active, .filter-chip.active ){ border-color:var(--yk-gold-active-hairline); box-shadow: inset 0 0 0 .5px rgba(255,247,205,.78), 0 0 0 .5px var(--yk-gold-active-soft), 0 5px 14px rgba(82,66,30,.055); } body.yekfi-signature .sig-day.active, body.yekfi-signature .bottom-nav .nav-btn.active, body.yekfi-signature .family-top-btn.active{ box-shadow: inset 0 0 0 1px rgba(244,212,111,.78), 0 0 0 .5px rgba(212,175,55,.28), 0 5px 13px rgba(54,67,46,.07); } body.yekfi-signature :is(.option.selected,.budget-policy-card.selected,.appearance-bg-card.selected,.appearance-density button.selected)::after{ border-color:rgba(255,248,218,.6); } /* Retire clipped corner-decoration language completely from the consumer layer. */ body.yekfi-signature :is( .leaf-corner,.botanical-corner,.corner-leaf,.floating-leaf,.decor-leaf,.page-leaf, [class*="leaf-corner"],[class*="botanical-corner"] ){display:none} /* User-selected full-canvas background collection. Explicit choices override page auto-art direction. */ body.yekfi-signature[data-yekfi-bg="minimal"]{ --yk-surface-image:none; --yk-surface-opacity:0; --yk-surface-wash: radial-gradient(circle at 18% 10%,rgba(212,175,55,.055),transparent 28rem), linear-gradient(180deg,#FAF7EF,#F7F4EA 54%,#FAF8F1); } body.yekfi-signature[data-yekfi-bg="botanical"]{ --yk-surface-image:url("./assets/identity/background-light.webp"); --yk-surface-position:center center; --yk-surface-opacity:.075; --yk-surface-wash:linear-gradient(180deg,rgba(250,248,241,.84),rgba(248,246,237,.94) 40%,rgba(250,248,241,.985)); } body.yekfi-signature[data-yekfi-bg="natural"]{ --yk-surface-image:url("./assets/identity/promo-natural-wide.webp"); --yk-surface-position:center 42%; --yk-surface-opacity:.07; --yk-surface-wash:linear-gradient(180deg,rgba(248,247,238,.87),rgba(247,244,234,.95) 42%,rgba(250,248,241,.99)); } body.yekfi-signature[data-yekfi-bg="family"]{ --yk-surface-image:url("./assets/identity/promo-family.webp"); --yk-surface-position:center 36%; --yk-surface-opacity:.065; --yk-surface-wash: radial-gradient(circle at 78% 18%,rgba(212,175,55,.055),transparent 24rem), linear-gradient(180deg,rgba(250,247,239,.88),rgba(248,244,235,.96) 44%,rgba(250,248,241,.99)); } /* Appearance sheet */ body.yekfi-signature .appearance-intro{ display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px;align-items:center; padding:14px; border:1px solid rgba(76,91,64,.12); border-radius:var(--radius-card); background:rgba(255,253,248,.96); } body.yekfi-signature .appearance-intro>span:first-child{ width:42px;height:42px; display:grid;place-items:center; border-radius:var(--radius-card); background:linear-gradient(145deg,#F6EBC8,#FFF8E3); color:#85651D;font-size:18px; } body.yekfi-signature .appearance-intro b{font-size:13.5px;line-height:1.35} body.yekfi-signature .appearance-intro small{display:block;margin-top:3px;font-size:10.5px;line-height:1.5;color:#6F776D} body.yekfi-signature .appearance-background-grid{ display:grid;grid-template-columns:1fr 1fr;gap:9px; } body.yekfi-signature .appearance-bg-card{ min-width:0;min-height:152px; display:grid;grid-template-rows:76px auto; position:relative;overflow:hidden; padding:7px;text-align:right; border:1px solid rgba(71,83,62,.12); border-radius:var(--radius-card);background:#FFFEFA; } body.yekfi-signature .appearance-bg-card>span:nth-child(2){padding:8px 5px 5px} body.yekfi-signature .appearance-bg-card b{display:block;font-size:12px;line-height:1.3;font-weight:900} body.yekfi-signature .appearance-bg-card small{display:block;margin-top:3px;font-size:9.7px;line-height:1.4;color:#737B71} body.yekfi-signature .appearance-bg-card>strong{ position:absolute;top:13px;left:13px; width:24px;height:24px;display:grid;place-items:center; border-radius:var(--radius-pill);background:rgba(44,72,49,.90);color:#FFF8DE; font-size:11px; } body.yekfi-signature .appearance-preview{ width:100%;height:76px;border-radius:var(--radius-card); background-size:cover;background-position:center; border:1px solid rgba(255,255,255,.66); } body.yekfi-signature .appearance-preview.auto{ background: radial-gradient(circle at 78% 18%,rgba(212,175,55,.18),transparent 28%), radial-gradient(circle at 18% 78%,rgba(57,88,58,.10),transparent 32%), linear-gradient(145deg,#FCFAF4,#F1EEE3); } body.yekfi-signature .appearance-preview.minimal{ background: radial-gradient(circle at 20% 25%,rgba(212,175,55,.13),transparent 32%), linear-gradient(145deg,#FCFAF4,#F1EEE3); } body.yekfi-signature .appearance-preview.botanical{ background:linear-gradient(rgba(250,248,241,.30),rgba(250,248,241,.68)),url("./assets/identity/background-light.webp") center/cover; } body.yekfi-signature .appearance-preview.natural{ background:linear-gradient(rgba(250,248,241,.23),rgba(250,248,241,.62)),url("./assets/identity/promo-natural-wide.webp") center/cover; } body.yekfi-signature .appearance-preview.family{ background:linear-gradient(rgba(250,248,241,.25),rgba(250,248,241,.66)),url("./assets/identity/promo-family.webp") center/cover; } body.yekfi-signature .appearance-density{ display:grid;grid-template-columns:1fr 1fr;gap:8px; } body.yekfi-signature .appearance-density button{ min-height:78px;padding:12px;text-align:right; border:1px solid rgba(71,83,62,.12);border-radius:var(--radius-card);background:#FFFEFA; } body.yekfi-signature .appearance-density b{display:block;font-size:12px;font-weight:900} body.yekfi-signature .appearance-density small{display:block;margin-top:3px;font-size:9.8px;line-height:1.4;color:#727A70} body.yekfi-signature .appearance-principle{ margin-top:10px;padding:11px 12px;border-radius:var(--radius-card); background:#F7F4E8;border:1px solid rgba(212,175,55,.18); } body.yekfi-signature .appearance-principle b{display:block;font-size:11.5px} body.yekfi-signature .appearance-principle small{display:block;margin-top:3px;font-size:9.8px;line-height:1.5;color:#6C746A} body.yekfi-signature .settings-appearance-entry{ width:100%;min-height:64px; display:grid;grid-template-columns:38px minmax(0,1fr) 24px;gap:9px;align-items:center; margin:10px 0;padding:10px 12px;text-align:right; border:1px solid rgba(212,175,55,.24);border-radius:var(--radius-card); background:linear-gradient(145deg,#FFFEFA,#F8F4E7); } body.yekfi-signature .settings-appearance-entry>span:first-child{ width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-control);background:#F3E8C4;color:#795B16 } body.yekfi-signature .settings-appearance-entry b{display:block;font-size:12.5px;font-weight:900} body.yekfi-signature .settings-appearance-entry small{display:block;margin-top:2px;font-size:9.8px;color:#6E766D} /* Density changes information rhythm, never touch-target size. */ body.yekfi-signature[data-yekfi-density="compact"] .sig-page{gap:17px} body.yekfi-signature[data-yekfi-density="compact"] .sig-section-head{margin-bottom:8px} body.yekfi-signature[data-yekfi-density="compact"] .sig-meal-row{min-height:78px;padding:6px 8px} body.yekfi-signature[data-yekfi-density="compact"] .sig-week-card{padding:8px;margin-bottom:7px} body.yekfi-signature[data-yekfi-density="compact"] .sig-shop-item{min-height:66px;padding-block:7px} body.yekfi-signature[data-yekfi-density="compact"] .yi-quick{min-height:78px} body.yekfi-signature[data-yekfi-density="compact"] :is(button,.round-icon,.round-step,.sig-shop-check,.sig-meal-status){min-width:44px} @media(max-width:560px){ body.yekfi-signature .appearance-background-grid{grid-template-columns:1fr 1fr} body.yekfi-signature .appearance-bg-card{min-height:140px} } @media(max-width:350px){ body.yekfi-signature .memo-date-grid{grid-template-columns:1fr;} body.yekfi-signature .appearance-background-grid{grid-template-columns:1fr} } /* ---------- family + stock final polish ---------- */ body.yekfi-signature .sig-member-list, body.yekfi-signature .stock-food-list, body.yekfi-signature .stock-purchase-list{ border-color:rgba(65,78,55,.11); background:#FFFEFA; box-shadow:0 8px 24px rgba(34,47,31,.045); } body.yekfi-signature .sig-member-row{min-height:80px;padding:10px 12px} body.yekfi-signature .sig-member-copy b{font-size:14.5px;line-height:1.35} body.yekfi-signature .sig-member-copy small{font-size:11px;line-height:1.35} body.yekfi-signature .sig-member-copy em{font-size:10.25px;line-height:1.4} body.yekfi-signature .sig-family-actions button{ border-color:rgba(65,78,55,.11); background:#FFFEFA; box-shadow:0 6px 18px rgba(34,47,31,.04); } body.yekfi-signature .stock-kpis>div{background:#FFFEFA;border-color:rgba(65,78,55,.11);box-shadow:0 6px 18px rgba(34,47,31,.035)} body.yekfi-signature .stock-food-row{min-height:72px;background:#FFFEFA} body.yekfi-signature .stock-food-copy b{font-size:13.75px;line-height:1.35} body.yekfi-signature .stock-food-copy small{font-size:10.5px;line-height:1.4} @media(max-width:560px){ body.yekfi-signature .sig-family-hero{min-height:210px} body.yekfi-signature .sig-member-row{min-height:76px} body.yekfi-signature .stock-hero{min-height:180px} body.yekfi-signature .stock-kpis{gap:7px} } /* ====================================================================== YEKFI v10.3.0 — Consumer UX Freeze Authority Final pre-validation presentation contract. Counterexample-driven only. ====================================================================== */ :root{ --yk-freeze-gold:#D2A83B; --yk-freeze-gold-line:rgba(191,145,40,.72); --yk-freeze-text:#273229; --yk-freeze-muted:#697269; } /* Quiet canvas: content and food remain visually dominant. */ body.yekfi-signature[data-yekfi-bg="auto"], body.yekfi-signature:not([data-yekfi-bg]){ --yk-surface-image:none; --yk-surface-opacity:0; --yk-surface-wash: radial-gradient(circle at 84% 5%,rgba(201,151,50,.055),transparent 24rem), radial-gradient(circle at 8% 58%,rgba(57,88,58,.035),transparent 30rem), linear-gradient(180deg,#FBF8F0 0%,#F7F3E8 55%,#FAF8F1 100%); } body.yekfi-signature.yekfi-onboarding-open::before{background-image:none;opacity:0} /* Retire legacy decorative separators/corner language from the task flow. */ body.yekfi-signature :is( .brand-divider,.yi-brand-divider,.identity-divider,.decor-divider, .leaf-corner,.botanical-corner,.corner-leaf,.floating-leaf,.decor-leaf,.page-leaf, [class*="leaf-corner"],[class*="botanical-corner"] ){display:none} /* Selected state = one precise gold hairline; never a glow/double frame. */ body.yekfi-signature :is( .option.selected, .budget-policy-card.selected, .mode-choice button.active, .cuisine-card.selected, .appearance-bg-card.selected, .appearance-density button.selected, .shopping-domains button.active, .home-filter.active, .filter-chip.active ){ border:1px solid var(--yk-freeze-gold-line); box-shadow:0 5px 14px rgba(63,53,31,.045); outline:none; } body.yekfi-signature :is( .option.selected,.budget-policy-card.selected,.appearance-bg-card.selected,.appearance-density button.selected )::after{ border:0;box-shadow:none; } body.yekfi-signature :is(.sig-day.active,.bottom-nav .nav-btn.active,.family-top-btn.active){ box-shadow:0 5px 14px rgba(50,66,46,.08); } body.yekfi-signature .sig-day.active{border:1px solid rgba(211,176,75,.58)} /* Day strip: seven days always fit; at 320px it may use the page gutters, never viewport overflow. */ body.yekfi-signature .sig-day-strip{ grid-template-columns:repeat(7,minmax(0,1fr)); overflow:visible; } body.yekfi-signature .sig-day{min-width:0;min-height:52px} @media(max-width:350px){ body.yekfi-signature .memo-date-grid{grid-template-columns:1fr;} body.yekfi-signature .sig-day-strip{ width:calc(100% + 24px); max-width:none; margin-inline:-12px; padding:2px; gap:1px; border-radius:var(--radius-card); } body.yekfi-signature .sig-day{ min-width:44px; min-height:48px; padding:5px 1px; border-radius:var(--radius-control); } body.yekfi-signature .sig-day b{font-size:9.5px;letter-spacing:-.1px} body.yekfi-signature .sig-day small{font-size:11px} } /* Today remains task-led: next meal -> today's meals -> supporting actions. */ body.yekfi-signature .sig-today-page>.yi-brand-promo{display:none} body.yekfi-signature .sig-meal-main small{font-size:11.25px;line-height:1.42} body.yekfi-signature .sig-meal-main em{font-size:10.75px;line-height:1.45;color:#667166} /* Execution readability floors. */ body.yekfi-signature .sig-shop-main b{font-size:14.25px;line-height:1.42} body.yekfi-signature .sig-shop-main small{font-size:11.25px;line-height:1.45} body.yekfi-signature .sig-shop-main em{font-size:11px;line-height:1.42} body.yekfi-signature .sig-shop-qty b{font-size:12.75px} body.yekfi-signature .sig-shop-qty small{font-size:10.75px;line-height:1.35} body.yekfi-signature .sig-shop-item.done{opacity:.78} body.yekfi-signature .stock-food-copy b{font-size:14px;line-height:1.4} body.yekfi-signature .stock-food-copy small{font-size:10.75px;line-height:1.45} body.yekfi-signature .sig-member-copy small{font-size:11.25px;line-height:1.42} body.yekfi-signature .sig-member-copy em{font-size:10.5px;line-height:1.45} @media(max-width:560px){ body.yekfi-signature .content{ padding-left:12px;padding-right:12px; } body.yekfi-signature .sig-shop-item{ gap:8px;padding-inline:10px; } body.yekfi-signature .sig-shop-main b{font-size:13.75px} body.yekfi-signature .sig-shop-main small{font-size:10.75px} body.yekfi-signature .sig-shop-main em{font-size:10.5px} body.yekfi-signature .stock-food-copy small{font-size:10.5px} } /* Keep focus state visible after visual simplification. */ body.yekfi-signature :is(button,a,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid rgba(184,137,32,.72); outline-offset:2px; } /* ====================================================================== YEKFI v10.4.0 — Beta Quality Hardening Pack A Final presentation authority for this release. ====================================================================== */ :root{--yk-header-offset:88px} /* Header: stronger identity + complete budget truth + direct New Plan. */ body.yekfi-signature .topbar{ grid-template-columns:44px 52px minmax(310px,360px) minmax(250px,1fr); grid-template-areas:"menu family budget brand"; min-height:88px; gap:10px; padding:max(10px,env(safe-area-inset-top)) 18px 10px; } body.yekfi-signature .topbar>.topbar-actions{ grid-area:budget;width:auto;min-width:0; display:grid;grid-template-columns:112px minmax(188px,1fr);gap:8px;align-items:stretch; } body.yekfi-signature .topbar-new-plan{ min-width:0;min-height:56px;padding:8px 10px;border-radius:var(--radius-card); display:flex;align-items:center;justify-content:center;gap:5px; border:1px solid rgba(201,151,50,.48);background:linear-gradient(180deg,#fffdf8,#f6edd8); color:#29442e;font:inherit;box-shadow:0 7px 18px rgba(61,70,47,.055);cursor:pointer; } body.yekfi-signature .topbar-new-plan span{font-size:20px;line-height:1;color:#b8841e;font-weight:700} body.yekfi-signature .topbar-new-plan b{font-size:12.5px;line-height:1.2;white-space:nowrap} body.yekfi-signature .budget-pill{ width:100%;min-width:0;max-width:none;min-height:56px; padding:8px 12px;border-radius:var(--radius-card);overflow:visible; } body.yekfi-signature .budget-pill small{font-size:10.5px;line-height:1.2} body.yekfi-signature .budget-pill b{font-size:15px;line-height:1.2} body.yekfi-signature .budget-pill em{ display:block;max-width:none;font-size:10.5px;line-height:1.3; white-space:normal;overflow:visible;text-overflow:clip; } body.yekfi-signature .topbar>.brand{min-height:62px;gap:12px} body.yekfi-signature .brand-icon{ width:56px;height:56px;min-width:56px;flex-basis:56px; filter:drop-shadow(0 7px 14px rgba(27,43,31,.14)); } body.yekfi-signature .brand-title-line{gap:9px} body.yekfi-signature .brand-title-line strong{font-size:22px;letter-spacing:-.25px} body.yekfi-signature .brand-title-line i{font-size:13.5px;letter-spacing:1.8px;font-weight:950;color:#b7821b} body.yekfi-signature .brand-copy small{font-size:11.5px;line-height:1.25} /* Appearance identities: distinct but content-first; no photographic wallpaper authority. */ body.yekfi-signature{ --yk-surface-image:none;--yk-surface-opacity:0; --yk-surface-wash: radial-gradient(ellipse 30% 22% at 92% 11%,rgba(201,151,50,.065),transparent 70%), radial-gradient(ellipse 32% 24% at 7% 76%,rgba(67,91,58,.055),transparent 72%), linear-gradient(180deg,#f8f5ec 0%,#f4f0e5 100%); } body.yekfi-signature[data-yekfi-bg="minimal"]{ --yk-surface-wash:linear-gradient(180deg,#fbfaf6 0%,#f7f5ef 100%); } body.yekfi-signature[data-yekfi-bg="botanical"]{ --yk-surface-wash: radial-gradient(ellipse 25% 13% at 94% 14%,rgba(58,91,56,.10),transparent 72%), radial-gradient(ellipse 19% 11% at 86% 20%,rgba(187,150,69,.075),transparent 74%), radial-gradient(ellipse 28% 15% at 5% 74%,rgba(78,111,66,.085),transparent 73%), linear-gradient(155deg,#f8f5e9 0%,#eff2e7 56%,#f8f3e8 100%); } body.yekfi-signature[data-yekfi-bg="natural"]{ --yk-surface-wash: radial-gradient(circle at 10% 8%,rgba(119,137,89,.10) 0 2px,transparent 3px 100%), radial-gradient(ellipse 45% 28% at 95% 82%,rgba(184,151,91,.09),transparent 72%), linear-gradient(145deg,#f5f2e6,#edf0e5 52%,#f4eee1); } body.yekfi-signature[data-yekfi-bg="family"]{ --yk-surface-wash: radial-gradient(ellipse 31% 18% at 92% 13%,rgba(224,169,111,.13),transparent 72%), radial-gradient(ellipse 35% 20% at 4% 80%,rgba(109,128,79,.08),transparent 74%), linear-gradient(150deg,#fbf3e7,#f8eee2 50%,#f2f0e4); } body.yekfi-signature::before{background:var(--yk-surface-wash);opacity:1} body.yekfi-signature .appearance-preview.auto{background:linear-gradient(145deg,#f8f5ec,#ece9dc)} body.yekfi-signature .appearance-preview.minimal{background:linear-gradient(145deg,#fbfaf6,#f2f0e9)} body.yekfi-signature .appearance-preview.botanical{background:radial-gradient(ellipse at 70% 28%,#b8c7a9 0 18%,transparent 19%),linear-gradient(145deg,#f7f2e5,#e6eee0)} body.yekfi-signature .appearance-preview.natural{background:radial-gradient(circle at 25% 30%,#ced7bc 0 18%,transparent 19%),linear-gradient(145deg,#ecebdc,#e9dfcc)} body.yekfi-signature .appearance-preview.family{background:radial-gradient(circle at 70% 26%,#efc89e 0 18%,transparent 19%),linear-gradient(145deg,#fff3e5,#edf0df)} /* Brand divider under hero images: ~2x previous footprint. */ body.yekfi-signature .sig-hero + .sig-section::after, body.yekfi-signature .sig-shopping-hero + .shopping-domains::before{ width:244px;height:58px;background-size:contain;background-repeat:no-repeat; } body.yekfi-signature .sig-hero + .sig-section{padding-top:46px} body.yekfi-signature .sig-shopping-hero + .shopping-domains{padding-top:46px} /* Sheets: full framed surface, safe bottom, internal scroll only. */ body.yekfi-signature .modal.sheet{ padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); align-items:flex-end;overflow:hidden; } body.yekfi-signature .sheet-panel{ width:min(720px,100%);max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom))); margin:0 auto;border:1px solid rgba(76,91,62,.14);border-radius:var(--radius-hero); overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; box-shadow:0 24px 70px rgba(31,43,29,.22); } body.yekfi-signature #sheetContent{padding-bottom:max(26px,env(safe-area-inset-bottom))} /* Meal overflow menu: anchor upward so dinner/last card is never clipped. */ body.yekfi-signature .sig-week-card, body.yekfi-signature .sig-week-row, body.yekfi-signature .sig-week-row-actions{overflow:visible} body.yekfi-signature .meal-more{position:relative;z-index:20} body.yekfi-signature .meal-more>div{ top:auto;bottom:calc(100% + 8px);inset-inline-end:0;inset-inline-start:auto; min-width:170px;z-index:2200;border:1px solid rgba(73,88,61,.13); box-shadow:0 18px 42px rgba(30,43,29,.18); } /* Monthly stock: no collisions, readable acquisition truth. */ body.yekfi-signature .monthly-item{grid-template-columns:44px 58px minmax(0,1fr) minmax(108px,auto);column-gap:11px;align-items:center} body.yekfi-signature .monthly-item:not(.has-food-thumb){grid-template-columns:44px minmax(0,1fr) minmax(108px,auto)} body.yekfi-signature .monthly-item .sig-shop-main{min-width:0;overflow:visible} body.yekfi-signature .monthly-item .sig-shop-main b, body.yekfi-signature .monthly-item .sig-shop-main small, body.yekfi-signature .monthly-item .sig-shop-main em{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} body.yekfi-signature .monthly-item .sig-shop-main small{font-size:11.5px;line-height:1.45} body.yekfi-signature .monthly-item .sig-shop-main em{font-size:10.8px;line-height:1.5} body.yekfi-signature .monthly-item .sig-shop-qty{min-width:108px;text-align:left;align-self:center} body.yekfi-signature .monthly-house-main>span:first-child{min-width:0} body.yekfi-signature .monthly-house-main b, body.yekfi-signature .monthly-house-main small{white-space:normal;overflow-wrap:anywhere} /* Saved plans: compact, scannable archive. */ body.yekfi-signature .saved-plans-list{display:grid;gap:10px} body.yekfi-signature .saved-plan-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:13px;border:1px solid rgba(75,91,61,.12);border-radius:var(--radius-card);background:#fffdf8} body.yekfi-signature .saved-plan-main{text-align:right;min-width:0;background:transparent;border:0;padding:0;color:inherit} body.yekfi-signature .saved-plan-main b{display:block;font-size:14px;line-height:1.35;color:#29442e} body.yekfi-signature .saved-plan-main small{display:block;margin-top:4px;font-size:11px;line-height:1.5;color:#737668;white-space:normal} body.yekfi-signature .saved-plan-delete{width:44px;height:44px;border-radius:var(--radius-card);border:1px solid rgba(143,70,54,.12);background:#fff8f4;color:#8b4d40} /* Premium micro-refinement: clearer hierarchy without heavier chrome. */ body.yekfi-signature .sig-section{border-color:rgba(71,87,59,.095);box-shadow:0 13px 34px rgba(45,58,41,.047)} body.yekfi-signature .sig-section-head h2{letter-spacing:-.15px} body.yekfi-signature .sig-link{font-weight:850} @media(max-width:899px){ :root{--yk-header-offset:92px} body.yekfi-signature .topbar{grid-template-columns:44px 48px minmax(280px,330px) minmax(190px,1fr);min-height:92px;padding-inline:14px} body.yekfi-signature .topbar>.topbar-actions{grid-template-columns:108px minmax(164px,1fr);width:auto} body.yekfi-signature .brand-icon{width:52px;height:52px;min-width:52px;flex-basis:52px} body.yekfi-signature .brand-title-line strong{font-size:21px} body.yekfi-signature .brand-title-line i{font-size:13px} } @media(max-width:560px){ :root{--yk-header-offset:126px} body.yekfi-signature .topbar{ grid-template-columns:44px 44px minmax(0,1fr); grid-template-areas:"menu family brand" "budget budget budget"; grid-template-rows:54px 54px;min-height:126px;gap:6px 7px; padding:max(7px,env(safe-area-inset-top)) 9px 7px; } body.yekfi-signature .content{padding:calc(126px + env(safe-area-inset-top) + 10px) 12px calc(96px + env(safe-area-inset-bottom))} body.yekfi-signature .topbar>.topbar-actions{width:100%;grid-template-columns:108px minmax(0,1fr);gap:7px} body.yekfi-signature .topbar-new-plan{min-height:50px;border-radius:var(--radius-card);padding-inline:7px} body.yekfi-signature .topbar-new-plan b{font-size:11.8px} body.yekfi-signature .budget-pill{min-height:50px;border-radius:var(--radius-card);padding:6px 10px} body.yekfi-signature .budget-pill small{font-size:9.8px} body.yekfi-signature .budget-pill b{font-size:14px} body.yekfi-signature .budget-pill em{font-size:9.7px;line-height:1.25} body.yekfi-signature .topbar>.brand{min-height:52px;gap:8px} body.yekfi-signature .brand-icon{width:48px;height:48px;min-width:48px;flex-basis:48px} body.yekfi-signature .brand-title-line strong{font-size:20px} body.yekfi-signature .brand-title-line i{font-size:12.5px;letter-spacing:1.35px} body.yekfi-signature .brand-copy small{font-size:10.4px} body.yekfi-signature .sheet-panel{width:100%;border-radius:var(--radius-hero);max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))} body.yekfi-signature .monthly-item, body.yekfi-signature .monthly-item:not(.has-food-thumb){ grid-template-columns:44px minmax(0,1fr); grid-template-areas:"check main" "qty qty";row-gap:8px;min-height:0;padding-block:12px; } body.yekfi-signature .monthly-item .sig-shop-check{grid-area:check} body.yekfi-signature .monthly-item .sig-shop-thumb{display:none} body.yekfi-signature .monthly-item .sig-shop-main{grid-area:main} body.yekfi-signature .monthly-item .sig-shop-qty{grid-area:qty;min-width:0;width:100%;display:flex;align-items:center;justify-content:space-between;text-align:unset;padding-inline-start:52px} body.yekfi-signature .monthly-item .sig-shop-qty b{font-size:13px} body.yekfi-signature .monthly-item .sig-shop-qty small{font-size:11.5px} body.yekfi-signature .sig-hero + .sig-section::after, body.yekfi-signature .sig-shopping-hero + .shopping-domains::before{width:210px;height:50px} body.yekfi-signature .sig-hero + .sig-section, body.yekfi-signature .sig-shopping-hero + .shopping-domains{padding-top:42px} } @media(max-width:340px){ :root{--yk-header-offset:128px} body.yekfi-signature .topbar{padding-inline:7px;gap:6px} body.yekfi-signature .topbar>.topbar-actions{grid-template-columns:101px minmax(0,1fr)} body.yekfi-signature .topbar-new-plan b{font-size:11px} body.yekfi-signature .brand-icon{width:44px;height:44px;min-width:44px;flex-basis:44px} body.yekfi-signature .brand-title-line strong{font-size:18.5px} body.yekfi-signature .brand-title-line i{font-size:11.5px} body.yekfi-signature .brand-copy small{font-size:9.8px} } /* v10.4.0 Pack A final micro-fix — preserve bilingual brand at the 320px floor. */ @media(max-width:350px){ body.yekfi-signature .memo-date-grid{grid-template-columns:1fr;} body.yekfi-signature .brand-title-line i{display:inline-block;font-size:10.8px;letter-spacing:1.1px} body.yekfi-signature .brand-title-line{gap:5px} body.yekfi-signature .topbar>.brand{gap:6px} } /* v10.4.0 Pack A — deterministic modal scroll lock/restoration. The body is fixed in JS at the captured scroll position; do not collapse document height. */ html.modal-active,body.modal-active{max-height:none} body.modal-active{overscroll-behavior:none} /* ====================================================================== YEKFI v10.4.1 — Royal Visual Refinement Purpose: premium micro-precision only. No planning/business-logic changes. ====================================================================== */ :root{ --yk-royal-gold:#C99A3B; --yk-royal-gold-hi:#E0BC69; --yk-royal-gold-deep:#A9771D; --yk-royal-olive:#42593B; --yk-royal-olive-soft:#708068; --yk-royal-paper:#FFFEFA; --yk-royal-line-gold:rgba(191,143,43,.34); --yk-royal-line-olive:rgba(53,79,49,.14); --yk-royal-line-active:rgba(190,139,34,.72); --yk-royal-shadow:0 10px 28px rgba(35,48,33,.052),0 1px 0 rgba(255,255,255,.78) inset; --yk-royal-shadow-float:0 16px 44px rgba(33,46,31,.095),0 1px 0 rgba(255,255,255,.82) inset; --yk-royal-divider:linear-gradient(90deg,transparent,rgba(65,84,57,.14) 13%,rgba(201,151,50,.48) 48%,rgba(65,84,57,.14) 87%,transparent); --yk-royal-edge-opacity:.105; --yk-royal-edge-filter:saturate(.88) contrast(.96); } /* Theme-aware royal palette. Each appearance has its own restraint level. */ body.yekfi-signature[data-yekfi-bg="minimal"]{ --yk-royal-line-gold:rgba(183,145,67,.22); --yk-royal-line-olive:rgba(61,77,57,.095); --yk-royal-line-active:rgba(184,140,45,.58); --yk-royal-edge-opacity:0; } body.yekfi-signature[data-yekfi-bg="botanical"]{ --yk-royal-line-gold:rgba(197,151,57,.38); --yk-royal-line-olive:rgba(48,80,46,.18); --yk-royal-edge-opacity:.145; --yk-royal-edge-filter:saturate(.96) contrast(.98); } body.yekfi-signature[data-yekfi-bg="natural"]{ --yk-royal-line-gold:rgba(177,137,71,.31); --yk-royal-line-olive:rgba(73,88,57,.15); --yk-royal-edge-opacity:.095; --yk-royal-edge-filter:saturate(.72) sepia(.10) contrast(.96); } body.yekfi-signature[data-yekfi-bg="family"]{ --yk-royal-line-gold:rgba(196,145,61,.35); --yk-royal-line-olive:rgba(77,88,57,.13); --yk-royal-edge-opacity:.09; --yk-royal-edge-filter:saturate(.76) sepia(.14) hue-rotate(-5deg); } /* Brand lockup: English YEKFI is physically integrated under the master symbol. */ body.yekfi-signature .topbar>.brand{ min-width:0; align-items:center; gap:10px; } body.yekfi-signature .brand-lockup{ display:block; width:64px; height:68px; min-width:64px; flex:0 0 64px; object-fit:contain; filter:drop-shadow(0 6px 13px rgba(35,46,28,.12)); } body.yekfi-signature .brand-copy{ display:block; min-width:0; direction:rtl; text-align:right; } body.yekfi-signature .brand-title-line{ display:flex; align-items:baseline; justify-content:flex-start; gap:8px; white-space:nowrap; } body.yekfi-signature .brand-title-line strong{ font-size:21px; line-height:1; color:#29442E; font-weight:950; } body.yekfi-signature .brand-title-line small{ display:inline-block; margin:0; font-size:10.8px; line-height:1.2; color:#66705F; font-weight:760; letter-spacing:0; } /* Side ornament language only — no decorative corner block may sit over content. */ body.yekfi-signature .app-shell::before, body.yekfi-signature .app-shell::after, body.yekfi-signature .content::before, body.yekfi-signature .content::after{ content:""; display:block; position:fixed; pointer-events:none; z-index:0; width:clamp(112px,14vw,190px); height:clamp(240px,34vh,430px); background:none; opacity:var(--yk-royal-edge-opacity); filter:var(--yk-royal-edge-filter); } body.yekfi-signature .app-shell::before{ inset-inline-start:max(-70px,calc(50% - 690px)); top:18vh; transform:rotate(180deg); } body.yekfi-signature .app-shell::after{ inset-inline-end:max(-70px,calc(50% - 690px)); bottom:11vh; transform:none; } /* content pseudo-elements are suppressed on desktop to avoid doubling the side art. */ body.yekfi-signature .content::before, body.yekfi-signature .content::after{display:none} /* Royal hairline surface primitive: gold + olive, sub-pixel and quiet. */ body.yekfi-signature :is( .sig-panel,.sig-context-bar,.sig-week-card, .sig-shop-group,.sig-shop-category,.stock-food-row,.strategic-goal-card,.trust-card, .saved-plan-card,.appearance-intro,.appearance-bg-card,.appearance-density button, .settings-appearance-entry,.new-plan-intro,.new-plan-options>button, .budget-entry-card,.budget-policy-card,.cuisine-card,.mode-choice.ux-mode-choice>button ){ border:.72px solid transparent; background: linear-gradient(var(--yk-royal-paper),var(--yk-royal-paper)) padding-box, linear-gradient(135deg,var(--yk-royal-line-gold),var(--yk-royal-line-olive) 46%,rgba(201,151,50,.22) 76%,var(--yk-royal-line-olive)) border-box; box-shadow:var(--yk-royal-shadow); } /* Premium controls: secondary buttons receive the dual-tone hairline. */ body.yekfi-signature :is( .btn:not(.primary):not(.danger),.sig-btn:not(.primary),.round-icon,.family-top-btn, .budget-pill,.shopping-domains button,.option, .sig-link,.saved-plan-delete,.meal-more>button ){ border:.72px solid transparent; background: linear-gradient(#FFFDF8,#FFFDF8) padding-box, linear-gradient(135deg,var(--yk-royal-line-gold),var(--yk-royal-line-olive) 58%,rgba(201,151,50,.20)) border-box; box-shadow:0 5px 15px rgba(39,52,36,.042),inset 0 1px 0 rgba(255,255,255,.82); } /* Primary actions: dark olive body, microscopic gold inner keyline. */ body.yekfi-signature :is(.btn.primary,.sig-btn.primary,.new-plan-save-primary,.bottom-nav .nav-btn.active){ border:.72px solid rgba(184,137,31,.78); box-shadow: inset 0 0 0 .55px rgba(241,210,116,.46), 0 9px 22px rgba(39,58,37,.12); } /* Active/selected states get the only strong gold line. */ body.yekfi-signature :is( .option.selected,.budget-policy-card.selected,.cuisine-card.selected, .appearance-bg-card.selected,.appearance-density button.selected, .shopping-domains button.active,.sig-day.active,.family-top-btn.active ){ border:.82px solid var(--yk-royal-line-active); box-shadow: inset 0 0 0 .5px rgba(63,88,55,.16), 0 7px 18px rgba(47,61,42,.065); } /* Inputs and fields: calm royal keyline, no heavy form chrome. */ body.yekfi-signature :is(input,select,textarea,.input){ border:.68px solid rgba(104,107,79,.22); box-shadow:inset 0 0 0 .45px rgba(201,151,50,.06); } body.yekfi-signature :is(input,select,textarea,.input):focus{ border-color:rgba(183,133,29,.60); box-shadow:0 0 0 2px rgba(201,151,50,.09),inset 0 0 0 .5px rgba(63,88,55,.10); } /* Sheets/dialogs become jewelry-box surfaces, not floating grey containers. */ body.yekfi-signature .sheet-panel{ border:.78px solid transparent; background: linear-gradient(#FFFDF8,#FFFDF8) padding-box, linear-gradient(145deg,rgba(221,183,91,.55),rgba(61,83,53,.16) 48%,rgba(190,139,34,.34)) border-box; box-shadow:0 28px 76px rgba(28,40,27,.20),inset 0 1px 0 rgba(255,255,255,.9); } body.yekfi-signature .sheet-head{ background-image:var(--yk-royal-divider); background-repeat:no-repeat; background-size:100% .72px; background-position:center bottom; } /* Fine royal separators: a line, not a decorative bar. */ body.yekfi-signature .sig-section-head, body.yekfi-signature .sheet-section>h3{ background-image:var(--yk-royal-divider); background-repeat:no-repeat; background-size:100% .68px; background-position:center bottom; padding-bottom:8px; } body.yekfi-signature .sig-shop-item:not(:last-child), body.yekfi-signature .monthly-item:not(:last-child){ border-bottom:.62px solid rgba(122,112,71,.13); } /* Header itself receives a royal edge but remains visually light. */ body.yekfi-signature .topbar{ border-bottom:.72px solid rgba(190,143,43,.28); box-shadow:0 8px 26px rgba(35,48,33,.043),inset 0 -1px 0 rgba(64,84,57,.04); } body.yekfi-signature .budget-pill{ background: linear-gradient(180deg,#FFFDF8,#FAF5E8) padding-box, linear-gradient(135deg,rgba(211,167,67,.52),rgba(67,88,58,.15) 60%,rgba(201,151,50,.34)) border-box; } /* Bottom navigation: one fine line binds the bar; active state stays restrained. */ body.yekfi-signature .bottom-nav{ border:.72px solid transparent; background: linear-gradient(rgba(255,254,250,.965),rgba(255,254,250,.965)) padding-box, linear-gradient(135deg,rgba(201,151,50,.32),rgba(66,89,58,.12),rgba(201,151,50,.22)) border-box; box-shadow:0 14px 36px rgba(32,45,30,.095),inset 0 1px 0 rgba(255,255,255,.92); } /* Preserve usability: danger retains semantic red; disabled controls lose jewelry. */ body.yekfi-signature :is(.btn.danger,[data-danger="true"]){border-color:rgba(141,69,57,.34)} body.yekfi-signature :is(button,input,select,textarea):disabled{ box-shadow:none; filter:saturate(.72); } @media(max-width:899px){ body.yekfi-signature .brand-lockup{width:58px;height:62px;min-width:58px;flex-basis:58px} body.yekfi-signature .brand-title-line strong{font-size:20px} body.yekfi-signature .brand-title-line small{font-size:10.1px} /* mobile ornaments use only two side clusters, never top/bottom bars */ body.yekfi-signature .app-shell::before, body.yekfi-signature .app-shell::after{display:none} body.yekfi-signature .content::before, body.yekfi-signature .content::after{ display:block; width:118px;height:245px; opacity:calc(var(--yk-royal-edge-opacity) * .78); } body.yekfi-signature .content::before{right:-74px;left:auto;top:25vh;transform:none} body.yekfi-signature .content::after{left:-76px;right:auto;bottom:14vh;transform:rotate(180deg)} } @media(max-width:560px){ body.yekfi-signature .topbar>.brand{gap:6px} body.yekfi-signature .brand-lockup{width:48px;height:52px;min-width:48px;flex-basis:48px} body.yekfi-signature .brand-title-line{gap:5px} body.yekfi-signature .brand-title-line strong{font-size:18.5px} body.yekfi-signature .brand-title-line small{font-size:9px} body.yekfi-signature .sig-section-head, body.yekfi-signature .sheet-section>h3{padding-bottom:7px} } @media(max-width:340px){ body.yekfi-signature .brand-lockup{width:43px;height:47px;min-width:43px;flex-basis:43px} body.yekfi-signature .brand-title-line strong{font-size:17px} body.yekfi-signature .brand-title-line small{font-size:8.35px} } /* Artist pass: vary side composition by appearance, not merely color. */ body.yekfi-signature[data-yekfi-bg="botanical"] .app-shell::before{top:11vh;width:205px;height:455px} body.yekfi-signature[data-yekfi-bg="botanical"] .app-shell::after{bottom:7vh;width:198px;height:440px} body.yekfi-signature[data-yekfi-bg="natural"] .app-shell::before{top:24vh;width:154px;height:340px} body.yekfi-signature[data-yekfi-bg="natural"] .app-shell::after{bottom:18vh;width:165px;height:360px} body.yekfi-signature[data-yekfi-bg="family"] .app-shell::before{top:16vh;width:170px;height:380px} body.yekfi-signature[data-yekfi-bg="family"] .app-shell::after{bottom:9vh;width:185px;height:405px} @media(max-width:899px){ body.yekfi-signature[data-yekfi-bg="botanical"] .content::before{top:19vh;width:132px;height:275px} body.yekfi-signature[data-yekfi-bg="botanical"] .content::after{bottom:10vh;width:128px;height:270px} body.yekfi-signature[data-yekfi-bg="natural"] .content::before{top:31vh;width:103px;height:220px} body.yekfi-signature[data-yekfi-bg="natural"] .content::after{bottom:20vh;width:108px;height:228px} body.yekfi-signature[data-yekfi-bg="family"] .content::before{top:23vh;width:112px;height:238px} body.yekfi-signature[data-yekfi-bg="family"] .content::after{bottom:13vh;width:118px;height:248px} } /* Splash follows the same lockup grammar as the persistent header. */ body.yekfi-signature .splash-logo.splash-lockup{ width:152px;height:164px;object-fit:contain; } body.yekfi-signature .splash-brand-name{ margin-top:2px;gap:8px;direction:rtl; } body.yekfi-signature .splash-brand-name b{font-size:25px} body.yekfi-signature .splash-brand-name span{ font-size:11px;letter-spacing:0;font-weight:750;color:#F2DA91; } /* Final stacking correction: ornaments are ambient, never interactive/content chrome. */ body.yekfi-signature .content{position:relative;z-index:1} body.yekfi-signature .app-shell::before, body.yekfi-signature .app-shell::after, body.yekfi-signature .content::before, body.yekfi-signature .content::after{z-index:0} body.yekfi-signature .content>*{position:relative;z-index:1} /* Heroes retain food/media authority; only the keyline becomes royal. */ body.yekfi-signature .sig-hero{ border:.74px solid rgba(201,151,50,.40); box-shadow:0 18px 46px rgba(34,47,31,.09),inset 0 0 0 .45px rgba(76,98,67,.10); } /* Header New Plan is the single jewel CTA: olive body + thin gold edge. */ body.yekfi-signature .topbar-new-plan{ color:#FFF8E4; border:.78px solid rgba(202,153,49,.72); background:linear-gradient(180deg,#3D603E,#2D4D32); box-shadow:inset 0 0 0 .5px rgba(237,205,112,.34),0 8px 18px rgba(38,58,38,.12); } body.yekfi-signature .topbar-new-plan span{color:#F0CD74} body.yekfi-signature .topbar-new-plan b{color:#FFF9EA} /* ====================================================================== YEKFI v10.4.2 — Contrast & Theme Authority Hotfix Counterexamples closed: 1) No legacy right-angle/corner leaf overlays anywhere in consumer UI. 2) Paper/royal surfaces own explicit text colors; no inherited low-contrast text. 3) Appearance modes use approved/generated full-canvas backgrounds only. ====================================================================== */ :root{ --yk-v1042-text:#243327; --yk-v1042-text-strong:#203425; --yk-v1042-text-muted:#5F6A60; --yk-v1042-text-soft:#69736A; --yk-v1042-paper:#FFFDF8; --yk-v1042-paper-warm:#FAF6EA; --yk-v1042-primary:#2D4D32; --yk-v1042-primary-text:#FFF8E6; --yk-v1042-gold-text:#7A5813; } /* Hard retirement of the old corner/right-angle foliage language. */ body.yekfi-signature .app-shell::before, body.yekfi-signature .app-shell::after, body.yekfi-signature .content::before, body.yekfi-signature .content::after, body.yekfi-signature :is( .leaf-corner,.botanical-corner,.corner-leaf,.floating-leaf,.decor-leaf,.page-leaf, [class*="leaf-corner"],[class*="botanical-corner"] ){display:none;background-image:none;content:none} /* Approved/generated full-canvas appearance system. No corner sprite is used. */ body.yekfi-signature[data-yekfi-bg="auto"]{ --yk-surface-image:url("./assets/identity/theme-royal-light-v1042.webp"); --yk-surface-position:center center; --yk-surface-opacity:.115; --yk-surface-wash:linear-gradient(180deg,rgba(250,248,241,.90),rgba(248,245,237,.955) 45%,rgba(250,248,241,.985)); } body.yekfi-signature[data-yekfi-bg="minimal"]{ --yk-surface-image:none; --yk-surface-opacity:0; --yk-surface-wash: radial-gradient(circle at 82% 9%,rgba(201,151,50,.05),transparent 24rem), linear-gradient(180deg,#FAF7EF,#F7F4EA 54%,#FAF8F1); } body.yekfi-signature[data-yekfi-bg="botanical"]{ --yk-surface-image:url("./assets/identity/theme-garden-light-v1042.webp"); --yk-surface-position:center center; --yk-surface-opacity:.20; --yk-surface-wash:linear-gradient(180deg,rgba(250,248,241,.82),rgba(248,246,238,.915) 44%,rgba(250,248,241,.97)); } body.yekfi-signature[data-yekfi-bg="natural"]{ --yk-surface-image:url("./assets/identity/theme-royal-light-v1042.webp"); --yk-surface-position:56% center; --yk-surface-opacity:.17; --yk-surface-wash: radial-gradient(circle at 14% 70%,rgba(106,124,77,.055),transparent 30rem), linear-gradient(180deg,rgba(249,247,239,.84),rgba(247,244,234,.925) 48%,rgba(250,248,241,.975)); } body.yekfi-signature[data-yekfi-bg="family"]{ --yk-surface-image:url("./assets/identity/theme-royal-dark-v1042.webp"); --yk-surface-position:center center; --yk-surface-opacity:.17; --yk-surface-wash: radial-gradient(circle at 76% 14%,rgba(205,159,59,.07),transparent 24rem), linear-gradient(180deg,rgba(250,247,238,.84),rgba(247,242,231,.92) 46%,rgba(250,248,241,.975)); } body.yekfi-signature::before{filter:saturate(.92) contrast(.98)} /* Appearance previews show the same assets the user will actually get. */ body.yekfi-signature .appearance-preview.auto{ background:url("./assets/identity/theme-royal-light-v1042.webp") center/cover no-repeat; } body.yekfi-signature .appearance-preview.minimal{ background:linear-gradient(145deg,#FBFAF6,#F1EEE4); } body.yekfi-signature .appearance-preview.botanical{ background:url("./assets/identity/theme-garden-light-v1042.webp") center/cover no-repeat; } body.yekfi-signature .appearance-preview.natural{ background:url("./assets/identity/theme-royal-light-v1042.webp") 58% center/cover no-repeat; filter:saturate(.78) sepia(.05); } body.yekfi-signature .appearance-preview.family{ background:url("./assets/identity/theme-royal-dark-v1042.webp") center/cover no-repeat; } /* Contrast contract for every light/paper royal surface. */ body.yekfi-signature :is( .sig-panel,.sig-context-bar,.sig-week-card,.sig-shop-group,.sig-shop-category, .stock-food-row,.strategic-goal-card,.trust-card,.saved-plan-card, .appearance-intro,.appearance-bg-card,.appearance-density button, .settings-appearance-entry,.new-plan-intro,.new-plan-options>button, .budget-entry-card,.budget-policy-card,.cuisine-card,.mode-choice.ux-mode-choice>button, .shopping-domains,.setup-profile-box,.trust-route,.trust-hero, .sig-member-list,.stock-food-list,.stock-purchase-list,.stock-kpis>div ){color:var(--yk-v1042-text)} body.yekfi-signature :is( .sig-panel,.sig-context-bar,.sig-week-card,.sig-shop-group,.sig-shop-category, .stock-food-row,.strategic-goal-card,.trust-card,.saved-plan-card, .appearance-intro,.appearance-bg-card,.settings-appearance-entry,.new-plan-intro, .budget-entry-card,.budget-policy-card,.cuisine-card,.trust-route,.trust-hero ) :is(h1,h2,h3,h4,b,strong,label){color:var(--yk-v1042-text-strong)} body.yekfi-signature :is( .sig-panel,.sig-context-bar,.sig-week-card,.sig-shop-group,.sig-shop-category, .stock-food-row,.strategic-goal-card,.trust-card,.saved-plan-card, .appearance-intro,.appearance-bg-card,.settings-appearance-entry,.new-plan-intro, .budget-entry-card,.budget-policy-card,.cuisine-card,.trust-route,.trust-hero ) :is(small,em,.muted,.subtle){color:var(--yk-v1042-text-muted)} /* Secondary controls explicitly own readable text on their paper surface. */ body.yekfi-signature :is( .btn:not(.primary):not(.danger),.sig-btn:not(.primary),.round-icon,.family-top-btn, .budget-pill,.shopping-domains button,.option,.sig-link,.meal-more>button, .appearance-density button,.new-plan-options>button,.budget-policy-card,.cuisine-card ){color:#29442E} body.yekfi-signature :is( .btn:not(.primary):not(.danger),.sig-btn:not(.primary),.family-top-btn, .shopping-domains button,.option,.appearance-density button,.new-plan-options>button, .budget-policy-card,.cuisine-card ) :is(b,strong,span){color:inherit} body.yekfi-signature :is( .appearance-density button,.new-plan-options>button,.budget-policy-card,.cuisine-card ) small{color:#5F6A60} /* Primary/dark controls always use high-contrast warm-white text. */ body.yekfi-signature :is(.btn.primary,.sig-btn.primary,.new-plan-save-primary,.topbar-new-plan){ color:var(--yk-v1042-primary-text); } body.yekfi-signature :is(.btn.primary,.sig-btn.primary,.new-plan-save-primary,.topbar-new-plan) :is(b,strong,span,small){ color:inherit; } body.yekfi-signature .topbar-new-plan>span{color:#F0CD74} /* Header and budget truth: never inherit faint ornament colors. */ body.yekfi-signature .budget-pill{color:#29442E} body.yekfi-signature .budget-pill small{color:#5D685E} body.yekfi-signature .budget-pill b{color:#203425} body.yekfi-signature .budget-pill em{color:#526154} body.yekfi-signature .brand-title-line strong{color:#29442E} body.yekfi-signature .brand-title-line small{color:#5F695F} /* Navigation active state remains light; don't inherit primary-button white text. */ body.yekfi-signature .bottom-nav .nav-btn.active, body.yekfi-signature .bottom-nav .nav-btn.active :is(i,span){color:#29442E} /* Selected light options keep dark text; gold communicates state via keyline only. */ body.yekfi-signature :is( .option.selected,.budget-policy-card.selected,.cuisine-card.selected, .appearance-bg-card.selected,.appearance-density button.selected, .shopping-domains button.active,.family-top-btn.active,.sig-day.active ){color:#29442E} body.yekfi-signature :is( .option.selected,.budget-policy-card.selected,.cuisine-card.selected, .appearance-bg-card.selected,.appearance-density button.selected, .shopping-domains button.active,.family-top-btn.active,.sig-day.active ) :is(b,strong,span){color:inherit} /* Preserve intended reversed text on true dark media surfaces. */ body.yekfi-signature :is(.sig-hero-copy,.price-trust-inline,.friends-pilot-hero){color:#FFF9EA} body.yekfi-signature .price-trust-inline :is(b,strong,span){color:inherit} body.yekfi-signature .price-trust-inline small{color:rgba(255,255,255,.86)} /* Danger remains semantic red, never recolored by royal/selected rules. */ body.yekfi-signature :is(.btn.danger,[data-danger="true"],.saved-plan-delete){color:#8B4D40} body.yekfi-signature .btn.danger{color:#FFF} /* Mobile: full-canvas background remains; no side sprites are reintroduced. */ @media(max-width:899px){ body.yekfi-signature .app-shell::before, body.yekfi-signature .app-shell::after, body.yekfi-signature .content::before, body.yekfi-signature .content::after{display:none} } /* Exhaustive legacy foliage suppression across inherited v8.x/v10.x layers. */ body.yekfi-signature .topbar::before, body.yekfi-signature .sig-page::after, body.yekfi-signature .sig-shopping-hero::after, body.yekfi-signature .sig-family-hero::after, body.yekfi-signature .stock-hero::after, body.yekfi-signature .sig-section:nth-of-type(even) .sig-panel::before, body.yekfi-signature .sig-family-actions::after{ display:none; content:none; background:none; opacity:0; } /* Default inherited text is always readable; true dark surfaces opt into reversed text explicitly. */ body.yekfi-signature{color:var(--yk-v1042-text)} /* ====================================================================== YEKFI v10.4.3 — Brand lockup correction Arabic slogan is subordinate to and directly below the Arabic name. ====================================================================== */ body.yekfi-signature .brand-title-line{ display:flex;flex-direction:column;align-items:flex-start; justify-content:center;gap:2px;white-space:normal;line-height:1; } body.yekfi-signature .brand-title-line strong{display:block;line-height:1;} body.yekfi-signature .brand-title-line small{display:block;margin:0;line-height:1.25;white-space:nowrap;} @media(max-width:560px){body.yekfi-signature .brand-title-line{gap:1px}body.yekfi-signature .brand-title-line small{font-size:9.1px}} @media(max-width:340px){body.yekfi-signature .brand-title-line small{font-size:8.5px}} /* v10.4.3 semantic Arabic brand stack — final cascade authority. */ body.yekfi-signature .brand-copy{ display:flex;flex-direction:column;align-items:flex-start; justify-content:center;gap:2px;min-width:0;direction:rtl;text-align:right; } body.yekfi-signature .brand-arabic-name{ display:block;color:#29442E;font-size:21px;line-height:1;font-weight:950;white-space:nowrap; } body.yekfi-signature .brand-tagline-ar{ display:block;color:#5F695F;font-size:10.8px;line-height:1.25;font-weight:760; margin:0;white-space:nowrap;letter-spacing:0; } @media(max-width:899px){body.yekfi-signature .brand-arabic-name{font-size:20px}body.yekfi-signature .brand-tagline-ar{font-size:10.1px}} @media(max-width:560px){body.yekfi-signature .brand-copy{gap:1px}body.yekfi-signature .brand-arabic-name{font-size:18.5px}body.yekfi-signature .brand-tagline-ar{display:block;font-size:9.1px}} @media(max-width:340px){body.yekfi-signature .brand-arabic-name{font-size:17px}body.yekfi-signature .brand-tagline-ar{display:block;font-size:8.5px}} /* ====================================================================== YEKFI v10.4.4 — RC2 P0 Contrast + Runtime Recovery Authority - New-plan CTA is never part of paper/secondary controls. - Explicit high-contrast text owns every descendant. ====================================================================== */ body.yekfi-signature .topbar-actions > button.topbar-new-plan{ color:#FFF9EA; border:.78px solid rgba(202,153,49,.78); background:linear-gradient(180deg,#3D603E 0%,#2D4D32 100%); box-shadow:inset 0 0 0 .5px rgba(237,205,112,.34),0 8px 18px rgba(38,58,38,.12); text-shadow:0 1px 0 rgba(0,0,0,.10); } body.yekfi-signature .topbar-actions > button.topbar-new-plan > b{ color:#FFF9EA; opacity:1; visibility:visible; } body.yekfi-signature .topbar-actions > button.topbar-new-plan > span{ color:#F0CD74; opacity:1; } body.yekfi-signature .topbar-actions > button.topbar-new-plan:focus-visible{ outline:2px solid rgba(201,151,50,.92); outline-offset:2px; } /* Nutrition / food-adequacy sheets must never inherit decorative low contrast. */ body.yekfi-signature #sheetContent :is(.nutrition-hero,.member-nutrition,.nutrition-list,.science-center-head,.science-plan-card){ color:#243327; } body.yekfi-signature #sheetContent :is(.nutrition-hero,.science-center-head,.science-plan-card) small, body.yekfi-signature #sheetContent .member-nut small{ color:#5F6A60; } /* ====================================================================== YEKFI v10.4.5 — Closed Beta RC2 Release Hardening Runtime recovery, truthful long-generation feedback, update surface. ====================================================================== */ body.yekfi-signature .loader-detail{ display:block; margin:8px auto 2px; max-width:36ch; color:#5F6A60; font-size:11px; line-height:1.55; font-weight:720; text-align:center; } body.yekfi-signature .loader-detail.long{color:#765A1B} .yekfi-runtime-boundary{ position:fixed; z-index:5000; inset-inline:12px; top:calc(env(safe-area-inset-top) + 10px); display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:760px; margin-inline:auto; padding:11px 12px; border:.82px solid rgba(166,99,36,.58); border-radius:var(--radius-card); background:rgba(255,250,239,.985); color:#29372D; box-shadow:0 14px 38px rgba(39,47,39,.16),inset 0 0 0 .5px rgba(201,151,50,.18); backdrop-filter:blur(12px); } .yekfi-runtime-boundary>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0} .yekfi-runtime-boundary b{font-size:13px;line-height:1.35;color:#29372D} .yekfi-runtime-boundary small{font-size:10.5px;line-height:1.45;color:#5F6A60} .yekfi-runtime-boundary>div:last-child{display:flex;align-items:center;gap:6px;flex:0 0 auto} .yekfi-runtime-boundary button{ min-height:40px; padding:7px 10px; border:.72px solid rgba(87,105,79,.28); border-radius:var(--radius-control); background:#FFFDF8; color:#324738; font:inherit; font-size:10.5px; font-weight:850; } .yekfi-runtime-boundary button:first-child{border-color:rgba(201,151,50,.55);background:#365A3A;color:#FFF9EA} .yekfi-runtime-boundary button:last-child{width:40px;padding:0;font-size:18px;background:transparent} .yekfi-update-banner{ position:fixed; z-index:1200; inset-inline:12px; bottom:calc(82px + env(safe-area-inset-bottom)); max-width:520px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:.78px solid rgba(201,151,50,.62); border-radius:var(--radius-card); background:rgba(47,79,51,.985); color:#FFF9EA; box-shadow:0 16px 34px rgba(33,52,35,.18); } .yekfi-update-banner[hidden]{display:none} .yekfi-update-banner span{display:flex;flex-direction:column;gap:1px;min-width:0} .yekfi-update-banner b{font-size:12.5px;line-height:1.3;color:#FFF9EA} .yekfi-update-banner small{font-size:10px;line-height:1.35;color:#F3DFC0} .yekfi-update-banner button{min-height:40px;padding:7px 11px;border:.72px solid rgba(255,233,171,.72);border-radius:var(--radius-control);background:#FFF9EA;color:#2D4D32;font:inherit;font-size:10.5px;font-weight:900;white-space:nowrap} body.yekfi-signature .runtime-hydration-placeholder .plan-pending{ border:.72px solid rgba(201,151,50,.38); background:rgba(255,253,248,.94); } @media(max-width:430px){ .yekfi-runtime-boundary{align-items:stretch;flex-direction:column;gap:8px} .yekfi-runtime-boundary>div:last-child{justify-content:flex-end} .yekfi-update-banner{bottom:calc(76px + env(safe-area-inset-bottom))} } /* ====================================================================== YEKFI v10.4.6 — Final Appearance Art Direction & Density Authority Five deliberately distinct visual visions. Approved generated full-canvas assets only; no legacy corner sprite language. ====================================================================== */ :root{ --yk-v1046-paper:#FFFEFA; --yk-v1046-heading:#243327; --yk-v1046-muted:#5F6A60; } /* The previous v10.4.0 background shorthand suppressed the image layer. Final authority explicitly composites wash + approved full-canvas art. */ body.yekfi-signature::before{ content:""; display:block; position:fixed; inset:0; z-index:-3; pointer-events:none; background-image:var(--yk-surface-wash),var(--yk-surface-image); background-position:center center,var(--yk-surface-position); background-size:cover,cover; background-repeat:no-repeat,no-repeat; background-attachment:fixed,fixed; opacity:1; filter:none; } body.yekfi-signature::after{background:none;opacity:0} /* 1 — YEKFI Classic: warm ivory, restrained premium botanical signature. */ body.yekfi-signature[data-yekfi-bg="auto"], body.yekfi-signature:not([data-yekfi-bg]){ --yk-surface-image:url("./assets/identity/theme-royal-light-v1042.webp"); --yk-surface-position:center center; --yk-surface-wash:linear-gradient(180deg,rgba(251,248,239,.72),rgba(248,244,233,.87) 48%,rgba(250,248,241,.94)); --yk-royal-paper:#FFFEFA; --yk-royal-line-gold:rgba(194,146,43,.34); --yk-royal-line-olive:rgba(55,79,50,.14); } /* 2 — Pure: editorial calm. No image, minimum chromatic noise. */ body.yekfi-signature[data-yekfi-bg="minimal"]{ --yk-surface-image:none; --yk-surface-wash: radial-gradient(circle at 82% 8%,rgba(198,151,49,.038),transparent 24rem), linear-gradient(180deg,#FCFAF5 0%,#F8F5EC 56%,#FBF9F3 100%); --yk-royal-paper:#FFFEFB; --yk-royal-line-gold:rgba(181,145,71,.20); --yk-royal-line-olive:rgba(62,78,58,.085); --yk-royal-shadow:0 7px 22px rgba(38,49,35,.035),0 1px 0 rgba(255,255,255,.82) inset; } /* 3 — YEKFI Garden: fresh, luminous and visibly botanical. */ body.yekfi-signature[data-yekfi-bg="botanical"]{ --yk-surface-image:url("./assets/identity/theme-garden-light-v1042.webp"); --yk-surface-position:center center; --yk-surface-wash:linear-gradient(180deg,rgba(249,248,239,.28),rgba(240,246,233,.50) 48%,rgba(249,248,241,.74)); --yk-royal-paper:#FCFEF9; --yk-royal-line-gold:rgba(198,151,56,.38); --yk-royal-line-olive:rgba(48,83,47,.20); --yk-royal-line-active:rgba(186,137,30,.78); } /* 4 — Natural Table: sage / earth / linen; quieter than Garden, more organic than Classic. */ body.yekfi-signature[data-yekfi-bg="natural"]{ --yk-surface-image:url("./assets/identity/theme-side-light.webp"); --yk-surface-position:center center; --yk-surface-wash: linear-gradient(145deg,rgba(246,244,234,.66),rgba(232,238,224,.77) 49%,rgba(245,239,226,.88)); --yk-royal-paper:#FEFCF5; --yk-royal-line-gold:rgba(175,133,64,.33); --yk-royal-line-olive:rgba(75,94,61,.17); --yk-royal-gold:#B98B40; } /* 5 — Home Warmth: genuine dark olive evening canvas with cream cards. This is intentionally a different visual world, not a tint of the light modes. */ body.yekfi-signature[data-yekfi-bg="family"]{ --yk-surface-image:url("./assets/identity/theme-royal-dark-v1042.webp"); --yk-surface-position:center center; --yk-surface-wash: radial-gradient(circle at 74% 12%,rgba(219,176,70,.08),transparent 25rem), linear-gradient(180deg,rgba(13,36,19,.28),rgba(11,31,18,.48) 54%,rgba(9,27,16,.58)); --yk-royal-paper:#FFF9EC; --yk-royal-line-gold:rgba(219,174,71,.54); --yk-royal-line-olive:rgba(96,124,79,.22); --yk-royal-line-active:rgba(231,187,79,.86); --yk-royal-shadow:0 13px 34px rgba(4,15,8,.16),0 1px 0 rgba(255,255,255,.82) inset; } body.yekfi-signature[data-yekfi-bg="family"] .sig-section-head h2{color:#FFF1C8;text-shadow:0 1px 1px rgba(0,0,0,.18)} body.yekfi-signature[data-yekfi-bg="family"] .sig-section-head small{color:#E2D2A7} body.yekfi-signature[data-yekfi-bg="family"] .sig-link{color:#F1CD72} body.yekfi-signature[data-yekfi-bg="family"] .sig-section-head{background-image:linear-gradient(90deg,transparent,rgba(224,181,80,.48),rgba(111,139,89,.26),transparent)} /* Preview == actual art direction. */ body.yekfi-signature .appearance-preview.auto{background:url("./assets/identity/theme-royal-light-v1042.webp") center/cover no-repeat;filter:none} body.yekfi-signature .appearance-preview.minimal{background:linear-gradient(145deg,#FCFAF5,#F2EFE6);filter:none} body.yekfi-signature .appearance-preview.botanical{background:url("./assets/identity/theme-garden-light-v1042.webp") center/cover no-repeat;filter:none} body.yekfi-signature .appearance-preview.natural{background:url("./assets/identity/theme-side-light.webp") center/cover no-repeat;filter:saturate(.82) sepia(.035)} body.yekfi-signature .appearance-preview.family{background:url("./assets/identity/theme-royal-dark-v1042.webp") center/cover no-repeat;filter:none} /* Appearance cards communicate five identities rather than five labels. */ body.yekfi-signature .appearance-bg-card{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease} body.yekfi-signature .appearance-bg-card[data-value="botanical"]{background:linear-gradient(#FCFEF9,#FCFEF9) padding-box,linear-gradient(135deg,rgba(199,155,58,.42),rgba(58,92,51,.24)) border-box} body.yekfi-signature .appearance-bg-card[data-value="natural"]{background:linear-gradient(#FEFCF5,#FEFCF5) padding-box,linear-gradient(135deg,rgba(171,131,66,.34),rgba(87,103,68,.19)) border-box} body.yekfi-signature .appearance-bg-card[data-value="family"]{background:linear-gradient(#FFF9EC,#FFF9EC) padding-box,linear-gradient(135deg,rgba(222,176,72,.58),rgba(48,77,44,.28)) border-box} /* Density is a real information-rhythm choice; all tap targets remain >=44px. */ body.yekfi-signature[data-yekfi-density="comfortable"] .sig-page{gap:24px} body.yekfi-signature[data-yekfi-density="comfortable"] .sig-section-head{margin-bottom:12px} body.yekfi-signature[data-yekfi-density="comfortable"] .sig-meal-row{min-height:92px;padding:10px 12px} body.yekfi-signature[data-yekfi-density="comfortable"] .sig-week-card{padding:12px;margin-bottom:10px} body.yekfi-signature[data-yekfi-density="comfortable"] .sig-shop-item{min-height:76px;padding-block:10px} body.yekfi-signature[data-yekfi-density="comfortable"] .stock-food-row{min-height:76px;padding-block:10px} body.yekfi-signature[data-yekfi-density="compact"] .sig-page{gap:15px} body.yekfi-signature[data-yekfi-density="compact"] .sig-section-head{margin-bottom:7px} body.yekfi-signature[data-yekfi-density="compact"] .sig-meal-row{min-height:74px;padding:5px 8px} body.yekfi-signature[data-yekfi-density="compact"] .sig-week-card{padding:7px;margin-bottom:6px} body.yekfi-signature[data-yekfi-density="compact"] .sig-shop-item{min-height:62px;padding-block:6px} body.yekfi-signature[data-yekfi-density="compact"] .stock-food-row{min-height:64px;padding-block:6px} body.yekfi-signature[data-yekfi-density="compact"] :is(button,.round-icon,.round-step,.sig-shop-check,.sig-meal-status){min-width:44px;min-height:44px} /* Button action-state polish: every actionable button announces interaction. */ body.yekfi-signature button[data-action]:not(:disabled){cursor:pointer} @media(hover:hover){ body.yekfi-signature button[data-action]:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(36,49,34,.085)} } body.yekfi-signature button[data-action]:not(:disabled):active{transform:translateY(0) scale(.985)} body.yekfi-signature button[data-action]:disabled{opacity:.46;cursor:not-allowed} /* ====================================================================== YEKFI v10.4.6 — Theme Art Direction Final Pass Same information architecture, five unmistakable premium moods. ====================================================================== */ /* Shared theme-aware primitives. */ body.yekfi-signature{ --yk-theme-topbar:rgba(252,249,241,.985); --yk-theme-nav:rgba(255,253,248,.975); --yk-theme-secondary:#FFFDF8; --yk-theme-divider:rgba(79,94,70,.12); --yk-theme-accent:#C99732; --yk-theme-muted:#5F6A60; } body.yekfi-signature .topbar{ background:var(--yk-theme-topbar); border-bottom-color:var(--yk-theme-divider); } body.yekfi-signature .bottom-nav{ background:var(--yk-theme-nav); border-color:color-mix(in srgb,var(--yk-theme-accent) 34%,transparent); } body.yekfi-signature :is( .btn:not(.primary):not(.danger),.sig-btn:not(.primary),.round-icon,.family-top-btn, .budget-pill,.shopping-domains button,.option,.sig-link,.saved-plan-delete,.meal-more>button ){ background: linear-gradient(var(--yk-theme-secondary),var(--yk-theme-secondary)) padding-box, linear-gradient(135deg,var(--yk-royal-line-gold),var(--yk-royal-line-olive) 58%,rgba(201,151,50,.20)) border-box; } /* CLASSIC — warm ivory + signature gold/olive. Timeless and balanced. */ body.yekfi-signature[data-yekfi-bg="auto"], body.yekfi-signature:not([data-yekfi-bg]){ --yk-theme-topbar:rgba(252,248,238,.975); --yk-theme-nav:rgba(255,251,240,.97); --yk-theme-secondary:#FFF9EE; --yk-theme-divider:rgba(154,119,47,.16); --yk-theme-accent:#C99732; --yk-royal-paper:rgba(255,253,247,.965); --yk-royal-shadow:0 10px 30px rgba(52,56,39,.060),0 1px 0 rgba(255,255,255,.78) inset; } body.yekfi-signature[data-yekfi-bg="auto"] .sig-section-head h2{color:#283B2C} body.yekfi-signature[data-yekfi-bg="auto"] .sig-section-head small{color:#756B4F} /* PURE — editorial, almost paper-white, intentionally least decorative. */ body.yekfi-signature[data-yekfi-bg="minimal"]{ --yk-theme-topbar:rgba(253,252,248,.992); --yk-theme-nav:rgba(255,255,252,.985); --yk-theme-secondary:#FFFFFF; --yk-theme-divider:rgba(60,74,58,.085); --yk-theme-accent:#A98743; --yk-royal-paper:rgba(255,255,252,.985); --yk-royal-line-gold:rgba(166,137,77,.16); --yk-royal-line-olive:rgba(61,77,57,.065); --yk-royal-shadow:0 5px 18px rgba(38,49,35,.028),0 1px 0 rgba(255,255,255,.9) inset; } body.yekfi-signature[data-yekfi-bg="minimal"] :is(.sig-panel,.sig-week-card,.sig-shop-group,.stock-food-row){box-shadow:0 4px 16px rgba(35,45,34,.025)} body.yekfi-signature[data-yekfi-bg="minimal"] .sig-section-head h2{color:#26332A} body.yekfi-signature[data-yekfi-bg="minimal"] .sig-section-head small{color:#6F756E} /* GARDEN — luminous sage glass, fresh and botanical. */ body.yekfi-signature[data-yekfi-bg="botanical"]{ --yk-theme-topbar:rgba(244,249,238,.955); --yk-theme-nav:rgba(247,251,242,.965); --yk-theme-secondary:#F8FCF4; --yk-theme-divider:rgba(69,105,62,.16); --yk-theme-accent:#B58A2C; --yk-royal-paper:rgba(249,253,246,.925); --yk-royal-line-gold:rgba(196,150,54,.38); --yk-royal-line-olive:rgba(54,92,50,.22); --yk-royal-shadow:0 12px 31px rgba(45,75,42,.068),0 1px 0 rgba(255,255,255,.72) inset; } body.yekfi-signature[data-yekfi-bg="botanical"] :is(.sig-panel,.sig-week-card,.sig-shop-group,.stock-food-row,.strategic-goal-card){backdrop-filter:blur(4px) saturate(1.04)} body.yekfi-signature[data-yekfi-bg="botanical"] .sig-section-head h2{color:#244728} body.yekfi-signature[data-yekfi-bg="botanical"] .sig-section-head small{color:#58715A} body.yekfi-signature[data-yekfi-bg="botanical"] .btn.primary{background:linear-gradient(180deg,#3F6D42,#315A35)} /* NATURAL TABLE — linen / sage / earthy bronze. */ body.yekfi-signature[data-yekfi-bg="natural"]{ --yk-theme-topbar:rgba(244,239,226,.965); --yk-theme-nav:rgba(249,245,233,.97); --yk-theme-secondary:#FBF6E9; --yk-theme-divider:rgba(111,102,70,.16); --yk-theme-accent:#B18447; --yk-royal-paper:rgba(252,248,237,.955); --yk-royal-line-gold:rgba(171,127,61,.34); --yk-royal-line-olive:rgba(86,101,70,.19); --yk-royal-shadow:0 11px 28px rgba(70,67,47,.065),0 1px 0 rgba(255,255,255,.72) inset; } body.yekfi-signature[data-yekfi-bg="natural"] .sig-section-head h2{color:#3D4C35} body.yekfi-signature[data-yekfi-bg="natural"] .sig-section-head small{color:#786D52} body.yekfi-signature[data-yekfi-bg="natural"] .btn.primary{background:linear-gradient(180deg,#58704E,#465E40);border-color:rgba(177,137,71,.78)} body.yekfi-signature[data-yekfi-bg="natural"] .sig-hero{filter:saturate(.94) contrast(.99)} /* HOME WARMTH — evening olive canvas with cream/gold furniture. */ body.yekfi-signature[data-yekfi-bg="family"]{ --yk-theme-topbar:rgba(17,42,24,.965); --yk-theme-nav:rgba(255,248,232,.975); --yk-theme-secondary:#FFF5DD; --yk-theme-divider:rgba(226,184,83,.38); --yk-theme-accent:#D9AB45; --yk-royal-paper:rgba(255,248,231,.965); --yk-royal-line-gold:rgba(222,176,72,.60); --yk-royal-line-olive:rgba(90,116,76,.25); --yk-royal-shadow:0 15px 36px rgba(3,15,8,.18),0 1px 0 rgba(255,255,255,.72) inset; } body.yekfi-signature[data-yekfi-bg="family"] .topbar{ box-shadow:0 10px 30px rgba(4,16,8,.22); backdrop-filter:blur(18px) saturate(1.08); } body.yekfi-signature[data-yekfi-bg="family"] :is(.brand-title-line strong,.brand-copy small){color:#FFF2CB} body.yekfi-signature[data-yekfi-bg="family"] .brand-title-line i{color:#E7BE5B} body.yekfi-signature[data-yekfi-bg="family"] .topbar-new-plan{background:linear-gradient(180deg,#D2A544,#B98628);color:#102A17;border-color:#F0CF7C} body.yekfi-signature[data-yekfi-bg="family"] .topbar-new-plan :is(span,b){color:#102A17} body.yekfi-signature[data-yekfi-bg="family"] .bottom-nav{box-shadow:0 14px 34px rgba(4,16,8,.20)} body.yekfi-signature[data-yekfi-bg="family"] .bottom-nav .nav-btn.active{background:#244B2C;color:#FFF5D4;border-color:#D9AB45} body.yekfi-signature[data-yekfi-bg="family"] .sig-link{color:#8B681D;background:#FFF5DD} body.yekfi-signature[data-yekfi-bg="family"] .sig-context-bar{background:rgba(255,248,231,.94)} /* Preview cards use the same furniture tone as their final modes. */ body.yekfi-signature .appearance-bg-card[data-value="minimal"]{background:#FFFEFB} body.yekfi-signature .appearance-bg-card[data-value="botanical"]{background:linear-gradient(145deg,#F8FCF4,#ECF5E8)} body.yekfi-signature .appearance-bg-card[data-value="natural"]{background:linear-gradient(145deg,#FBF6E9,#EFE9D7)} body.yekfi-signature .appearance-bg-card[data-value="family"]{background:linear-gradient(145deg,#FFF5DD,#EDE1C4)} /* Disabled remains legible; unavailable must not mean invisible. */ body.yekfi-signature button[data-action]:disabled{ opacity:.68; filter:saturate(.62); color:#697269; } /* Busy-generation affordance: loader/modal is authoritative; background CTAs cannot appear interactive. */ body.yekfi-signature[data-yekfi-generating="true"] :is([data-action="generate"],[data-action="regen"],[data-action="generate30"],[data-action="retryPlan"]){ pointer-events:none; opacity:.72; } /* v10.4.6 distinction calibration — make Classic and Garden unmistakable without changing IA. */ body.yekfi-signature[data-yekfi-bg="auto"], body.yekfi-signature:not([data-yekfi-bg]){ --yk-surface-wash: radial-gradient(circle at 78% 10%,rgba(214,171,69,.10),transparent 25rem), linear-gradient(180deg,rgba(255,249,231,.50),rgba(249,240,216,.72) 48%,rgba(252,246,230,.84)); --yk-theme-topbar:rgba(252,245,226,.975); --yk-theme-nav:rgba(255,248,230,.975); --yk-theme-secondary:#FFF6E5; --yk-royal-paper:rgba(255,250,237,.965); --yk-royal-line-gold:rgba(198,145,35,.42); } body.yekfi-signature[data-yekfi-bg="auto"] .sig-context-bar{background:rgba(255,248,231,.94)} body.yekfi-signature[data-yekfi-bg="botanical"]{ --yk-surface-wash: radial-gradient(circle at 20% 15%,rgba(93,144,79,.12),transparent 23rem), linear-gradient(180deg,rgba(235,247,230,.16),rgba(222,241,216,.36) 48%,rgba(242,249,238,.64)); --yk-theme-topbar:rgba(239,248,234,.955); --yk-theme-nav:rgba(242,250,237,.968); --yk-theme-secondary:#F1F9EE; --yk-royal-paper:rgba(243,251,240,.92); --yk-royal-line-gold:rgba(190,145,48,.39); --yk-royal-line-olive:rgba(47,94,48,.28); } body.yekfi-signature[data-yekfi-bg="botanical"] .sig-context-bar{background:rgba(241,250,237,.91)} body.yekfi-signature[data-yekfi-bg="botanical"] .sig-meal-row{background:linear-gradient(180deg,rgba(252,255,250,.76),rgba(241,249,238,.74))} /* Natural Table calibration — visibly earthy/sage rather than warm Classic. */ body.yekfi-signature[data-yekfi-bg="natural"]{ --yk-surface-wash: radial-gradient(circle at 22% 18%,rgba(112,130,91,.12),transparent 24rem), linear-gradient(145deg,rgba(233,235,217,.48),rgba(215,226,207,.62) 49%,rgba(235,226,207,.74)); --yk-theme-topbar:rgba(235,235,218,.965); --yk-theme-nav:rgba(242,239,219,.972); --yk-theme-secondary:#F5F1DE; --yk-royal-paper:rgba(247,244,226,.955); --yk-royal-line-gold:rgba(165,120,55,.36); --yk-royal-line-olive:rgba(78,101,68,.23); } body.yekfi-signature[data-yekfi-bg="natural"] .sig-context-bar{background:rgba(245,242,225,.94)} body.yekfi-signature[data-yekfi-bg="natural"] .sig-meal-row{background:linear-gradient(180deg,rgba(252,249,237,.86),rgba(239,239,220,.82))} /* Home Warmth brand-legibility refinement: preserve the full premium lockup on the dark header. */ body.yekfi-signature[data-yekfi-bg="family"] .brand-lockup{ background:rgba(255,247,226,.94); border:.72px solid rgba(222,176,72,.62); border-radius:var(--radius-card); padding:2px; box-shadow:0 7px 18px rgba(3,15,8,.18),inset 0 0 0 .45px rgba(255,255,255,.72); } /* ===== consumer-scorelift-v1048.css ===== */ /* ====================================================================== YEKFI v10.4.8 — Score-Lift Visual Geometry Patch Scope: no information-architecture or planning changes. Closes the 360px week-day touch-target gap while retaining seven-day fit. ====================================================================== */ @media (min-width:351px) and (max-width:380px){ body.yekfi-signature .sig-day-strip{ grid-template-columns:repeat(7,minmax(44px,1fr)); gap:2px; overflow:visible; } body.yekfi-signature .sig-day{ min-width:44px; min-height:52px; } } /* ===== consumer-premium-v1049.css ===== */ /* ===================================================================== YEKFI v10.4.9 — Pre-Beta Premium Contrast & Hierarchy Lift Presentation-only. No planning, budget, nutrition or procurement logic. ===================================================================== */ :root{ --yk-ink-soft:#4F584F; --yk-ink-faint:#6B746B; --yk-line:#D6CEBF; --yk-line-strong:#C7BAA5; } body.yekfi-signature .topbar{ background:rgba(250,247,239,.965); box-shadow:0 1px 0 rgba(255,255,255,.94) inset,0 1px 0 rgba(103,84,53,.15),0 8px 24px rgba(34,47,31,.035); } body.yekfi-signature .brand-copy small{color:#4F594F;font-weight:750} body.yekfi-signature .budget-pill{ border-color:#CCBEA4; background:linear-gradient(180deg,#FFFDF8,#F7F0E2); box-shadow:0 1px 0 #fff inset,0 6px 18px rgba(54,62,45,.065); } body.yekfi-signature .budget-pill small{color:#505A50} body.yekfi-signature .budget-pill em{color:#8A5D18} body.yekfi-signature .sig-context-bar{ border-color:#D2C6B1; background:rgba(255,253,248,.985); box-shadow:0 1px 0 #fff inset,0 7px 20px rgba(34,47,31,.05); } body.yekfi-signature .sig-context-bar span small{color:#6B746A;font-weight:750} body.yekfi-signature .sig-context-bar span b{color:#243529;font-weight:900} body.yekfi-signature .sig-context-bar>button{color:#315438;border-color:#D0C4AE;background:#FFFDF8} body.yekfi-signature .sig-section-head small{color:#59635A;font-weight:700} body.yekfi-signature .sig-section-head h2{color:#203526;font-weight:950} body.yekfi-signature .sig-link{color:#835A1D} body.yekfi-signature .sig-hero{border-color:rgba(151,107,31,.34);box-shadow:0 20px 48px rgba(27,40,29,.15),0 2px 7px rgba(27,40,29,.055)} body.yekfi-signature .sig-hero-media img{filter:saturate(1.09) contrast(1.045) brightness(.98)} body.yekfi-signature .sig-next-hero .sig-hero-shade{ background:linear-gradient(90deg,rgba(8,15,10,.03) 0%,rgba(8,15,10,.14) 30%,rgba(8,15,10,.68) 62%,rgba(8,15,10,.94) 100%),linear-gradient(0deg,rgba(8,15,10,.54),transparent 55%); } body.yekfi-signature .sig-hero-overline{color:#F5E0A2;font-weight:850;text-shadow:0 1px 8px rgba(0,0,0,.22)} body.yekfi-signature .sig-hero-title{color:#FFFDF7;text-shadow:0 2px 14px rgba(0,0,0,.30)} body.yekfi-signature .sig-hero-copy p{color:rgba(255,255,255,.88)} body.yekfi-signature .sig-hero-meta span{background:rgba(250,246,235,.13);border:1px solid rgba(255,255,255,.22);color:#FFFDF8;backdrop-filter:blur(8px)} body.yekfi-signature .sig-btn-primary{background:linear-gradient(145deg,#F6E6B8,#E4BD64);color:#263426;border-color:#E9C76F;box-shadow:0 8px 22px rgba(0,0,0,.12)} body.yekfi-signature .sig-btn-ghost{background:rgba(255,253,248,.94);color:#26392A;border-color:rgba(255,255,255,.75)} body.yekfi-signature .sig-meal-row, body.yekfi-signature .sig-week-card{ border-color:#D8D0C1; background:rgba(255,254,250,.99); box-shadow:0 8px 22px rgba(34,47,31,.055); } body.yekfi-signature .sig-meal-main small, body.yekfi-signature .sig-week-copy .type{color:#647064;font-weight:850} body.yekfi-signature .sig-meal-main b, body.yekfi-signature .sig-week-copy .name{color:#203526} body.yekfi-signature .sig-meal-main em, body.yekfi-signature .sig-week-copy .meta{color:#59645A} body.yekfi-signature .sig-meal-status{border:1px solid #DDD3C1;background:#FFFDF8;color:#365C3D} body.yekfi-signature .sig-day-strip{border-color:#D4C8B3;box-shadow:0 6px 20px rgba(34,47,31,.045)} body.yekfi-signature .sig-day{color:#576057;border:1px solid rgba(206,196,177,.6);background:#FFFDF8} body.yekfi-signature .sig-day.active{background:linear-gradient(155deg,#486E4E,#315538);border-color:#D8B457;box-shadow:0 8px 20px rgba(37,75,42,.20),0 0 0 1px rgba(218,181,88,.23) inset} body.yekfi-signature .sig-week-row-actions>button.primary{background:linear-gradient(180deg,#F1D88E,#E5C36B);color:#253326;border-color:#D9B653;font-weight:900} body.yekfi-signature .sig-week-row-actions>button:not(.primary),body.yekfi-signature .meal-more>summary{background:#FFFDF8;border-color:#D7CCB8;color:#405244} body.yekfi-signature .sig-shop-category{border-color:#D6CCB9;box-shadow:0 8px 24px rgba(34,47,31,.05)} body.yekfi-signature .sig-shop-cat-head{background:linear-gradient(90deg,#EFF3EB,#FBF6EA)} body.yekfi-signature .sig-shop-main small{color:#59645A} body.yekfi-signature .sig-shop-main em{color:#42654A} body.yekfi-signature .sig-shop-qty small{color:#875D1F;font-weight:800} body.yekfi-signature .nav-btn{color:#4E5A50;font-weight:800} body.yekfi-signature .nav-btn.active{color:#F4D98F;border:1px solid rgba(220,179,79,.55)} body.yekfi-signature .empty-state-page,body.yekfi-signature .runtime-recovery-card{ border-color:#D1C4AD;background:linear-gradient(180deg,#FFFDF8,#F7F0E3);box-shadow:0 14px 34px rgba(34,47,31,.08); } @media(max-width:520px){ body.yekfi-signature .sig-hero-title{font-size:25px;line-height:1.22} body.yekfi-signature .sig-hero-meta span{font-size:9.6px} body.yekfi-signature .sig-meal-main small{font-size:10px} body.yekfi-signature .sig-meal-main em{font-size:9.7px} } /* Premium fallback artwork for recipes that do not yet have a verified food photograph. */ body.yekfi-signature .meal-visual.fallback{ isolation:isolate; overflow:hidden; border:1px solid rgba(126,105,68,.20); box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 7px 18px rgba(42,50,37,.08); background: radial-gradient(circle at 18% 18%,rgba(255,255,255,.82) 0 8%,transparent 9%), radial-gradient(circle at 78% 76%,rgba(83,110,76,.10) 0 18%,transparent 19%), linear-gradient(145deg,#F5EFE2,#E5E4D2); } body.yekfi-signature .meal-visual.fallback::before{ content:""; position:absolute; width:72%;aspect-ratio:1;border-radius:var(--radius-pill); right:-18%;top:-42%; border:1px solid rgba(255,255,255,.45); background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,0) 70%); z-index:-1; } body.yekfi-signature .meal-visual.fallback::after{ content:"YEKFI"; position:absolute;left:10px;top:9px; font-size:8px;letter-spacing:.16em;font-weight:900; color:rgba(45,67,47,.34); } body.yekfi-signature .meal-visual.fallback>span{ width:52px;height:52px;border-radius:var(--radius-card); display:grid;place-items:center; font-size:29px; background:rgba(255,255,255,.68); border:1px solid rgba(255,255,255,.72); box-shadow:0 10px 24px rgba(44,53,40,.11),inset 0 1px 0 #fff; backdrop-filter:blur(6px); } body.yekfi-signature .meal-visual.fallback>small{ right:10px;bottom:9px; padding:5px 9px; color:#405044; border:1px solid rgba(139,119,80,.14); background:rgba(255,253,247,.84); box-shadow:0 4px 12px rgba(37,48,35,.06); backdrop-filter:blur(7px); } body.yekfi-signature .meal-visual.fallback.fish{background:radial-gradient(circle at 20% 16%,rgba(255,255,255,.78) 0 8%,transparent 9%),linear-gradient(145deg,#E7F1ED,#CFDFD9)} body.yekfi-signature .meal-visual.fallback.meat{background:radial-gradient(circle at 20% 16%,rgba(255,255,255,.72) 0 8%,transparent 9%),linear-gradient(145deg,#F3E7DE,#DFCFC2)} body.yekfi-signature .meal-visual.fallback.chicken{background:radial-gradient(circle at 20% 16%,rgba(255,255,255,.74) 0 8%,transparent 9%),linear-gradient(145deg,#F7EDD0,#E6D4B7)} body.yekfi-signature .meal-visual.fallback.legume{background:radial-gradient(circle at 20% 16%,rgba(255,255,255,.76) 0 8%,transparent 9%),linear-gradient(145deg,#EEE7D2,#D7D0B7)} body.yekfi-signature .meal-visual.fallback.egg,body.yekfi-signature .meal-visual.fallback.breakfast{background:radial-gradient(circle at 20% 16%,rgba(255,255,255,.82) 0 8%,transparent 9%),linear-gradient(145deg,#F7F0D8,#E9DBB9)} body.yekfi-signature .meal-visual.fallback.snack{background:radial-gradient(circle at 20% 16%,rgba(255,255,255,.78) 0 8%,transparent 9%),linear-gradient(145deg,#EEF1DF,#D8E3CE)} /* ===== trust-first-impression-v1050.css ===== */ /* YEKFI v10.5.0 — Trust & First Impression layer. No planning/runtime logic. */ body.yekfi-signature .app-trust-footer{margin:26px 2px 8px;padding:16px 14px 18px;border-top:1px solid rgba(116,105,78,.16);display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;color:#566258} body.yekfi-signature .app-trust-footer-copy{display:grid;gap:3px;min-width:180px} body.yekfi-signature .app-trust-footer-copy b{font-size:12px;letter-spacing:.02em;color:#29442e} body.yekfi-signature .app-trust-footer-copy small{font-size:11px;line-height:1.5;color:#6f786f} body.yekfi-signature .app-trust-footer nav{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap} body.yekfi-signature .app-trust-footer :is(a,button){appearance:none;border:0;background:none;padding:4px 0;color:#5e614f;font:inherit;font-size:11px;text-decoration:underline;text-underline-offset:3px;cursor:pointer} body.yekfi-signature .app-trust-footer :is(a,button):focus-visible{outline:2px solid #c99735;outline-offset:4px;border-radius:var(--radius-price)} body.yekfi-signature .first-impression{align-items:stretch;justify-content:center;background:linear-gradient(155deg,#f8f3e7 0%,#f5f0e4 58%,#edf1e9 100%);padding:0;overflow:auto;z-index:1200} body.yekfi-signature .first-impression.open{display:flex} body.yekfi-signature .first-impression-shell{width:min(100%,760px);min-height:100dvh;margin:auto;padding:max(22px,env(safe-area-inset-top)) clamp(16px,4vw,30px) max(28px,env(safe-area-inset-bottom));display:flex;align-items:center} body.yekfi-signature #firstImpressionContent{width:100%} body.yekfi-signature .fi-home,body.yekfi-signature .fi-demo-page{display:grid;gap:18px;width:100%} body.yekfi-signature .fi-top{display:flex;align-items:center;justify-content:space-between;gap:16px} body.yekfi-signature .fi-top img{width:min(168px,42vw);height:auto;display:block} body.yekfi-signature .fi-beta{display:inline-flex;align-items:center;min-height:30px;padding:6px 10px;border:1px solid rgba(173,129,43,.30);border-radius:var(--radius-pill);background:rgba(255,249,230,.78);color:#725c26;font-size:11px;font-weight:800;line-height:1.25} body.yekfi-signature .fi-hero-copy{max-width:650px} body.yekfi-signature .fi-hero-copy .eyebrow{display:block;margin-bottom:7px;color:#7c6b3f;font-size:12px;font-weight:900} body.yekfi-signature .fi-hero-copy h1,body.yekfi-signature .fi-demo-head h1{margin:0;color:#1f3825;font-size:clamp(30px,7.5vw,52px);line-height:1.12;letter-spacing:-.025em} body.yekfi-signature .fi-hero-copy p,body.yekfi-signature .fi-demo-head p{margin:10px 0 0;max-width:620px;color:#626d64;font-size:15px;line-height:1.8} body.yekfi-signature .fi-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} body.yekfi-signature .fi-value-grid article{min-width:0;padding:14px;border:1px solid rgba(77,93,74,.12);border-radius:var(--radius-card);background:rgba(255,255,252,.67);box-shadow:0 8px 24px rgba(44,56,42,.045);display:grid;gap:5px} body.yekfi-signature .fi-value-grid article>span{color:#b8842b;font-size:11px;font-weight:900} body.yekfi-signature .fi-value-grid b{font-size:14px;color:#29442e} body.yekfi-signature .fi-value-grid small{font-size:11px;line-height:1.55;color:#69736b} body.yekfi-signature .fi-visual{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(210px,.65fr);gap:10px} body.yekfi-signature .fi-food{min-height:160px;position:relative;border-radius:var(--radius-hero);overflow:hidden;background:#243c29;box-shadow:0 14px 34px rgba(35,53,38,.12)} body.yekfi-signature .fi-food:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,30,20,.04),rgba(16,30,20,.78))} body.yekfi-signature .fi-food img{width:100%;height:100%;min-height:160px;object-fit:cover;display:block} body.yekfi-signature .fi-food span{position:absolute;z-index:2;inset:auto 14px 14px;display:grid;gap:3px;color:#fff} body.yekfi-signature .fi-food small{font-size:11px;color:#eee3c8} body.yekfi-signature .fi-food b{font-size:16px} body.yekfi-signature .fi-mini-stats{display:grid;gap:8px} body.yekfi-signature .fi-mini-stats span{padding:12px 14px;border-radius:var(--radius-card);border:1px solid rgba(78,91,71,.13);background:rgba(255,255,252,.79);display:grid;gap:3px;align-content:center} body.yekfi-signature .fi-mini-stats small{font-size:10px;color:#788078} body.yekfi-signature .fi-mini-stats b{font-size:14px;color:#29442e} body.yekfi-signature .fi-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px} body.yekfi-signature .fi-actions .btn{min-height:54px;border-radius:var(--radius-card);font-size:14px} body.yekfi-signature .fi-trust{display:flex;gap:7px 13px;flex-wrap:wrap;padding:11px 12px;border-radius:var(--radius-card);background:rgba(42,72,48,.055);color:#55705a;font-size:10.5px;font-weight:750;line-height:1.45} body.yekfi-signature .fi-legal{display:flex;justify-content:center;gap:10px 18px;flex-wrap:wrap} body.yekfi-signature .fi-legal a{color:#6b6f62;font-size:11px;text-underline-offset:3px} body.yekfi-signature .fi-back{width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid rgba(66,81,63,.15);background:rgba(255,255,255,.68);color:#2f4d35;font-size:20px;cursor:pointer} body.yekfi-signature .fi-demo-head{display:grid;gap:4px} body.yekfi-signature .fi-demo-head h1{font-size:clamp(27px,6.2vw,43px)} body.yekfi-signature .fi-demo-house{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} body.yekfi-signature .fi-demo-house span{padding:12px;border:1px solid rgba(77,93,74,.12);border-radius:var(--radius-card);background:rgba(255,255,252,.72);display:grid;gap:2px} body.yekfi-signature .fi-demo-house small{font-size:10px;color:#7a827b} body.yekfi-signature .fi-demo-house b{font-size:12px;color:#29442e} body.yekfi-signature .fi-demo-week{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} body.yekfi-signature .fi-demo-week article{min-width:0;border:1px solid rgba(77,93,74,.12);border-radius:var(--radius-card);background:#fff;overflow:hidden;box-shadow:0 8px 22px rgba(31,52,35,.055)} body.yekfi-signature .fi-demo-week img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#e5eadf} body.yekfi-signature .fi-demo-week article>span{padding:10px;display:grid;gap:2px} body.yekfi-signature .fi-demo-week small{font-size:9.5px;color:#7d847d} body.yekfi-signature .fi-demo-week b{font-size:12px;color:#29442e} body.yekfi-signature .fi-demo-week em{font-style:normal;font-size:9.5px;color:#9b7631} body.yekfi-signature .fi-demo-basket{padding:14px;border-radius:var(--radius-card);border:1px solid rgba(77,93,74,.12);background:rgba(255,255,252,.80);display:grid;gap:10px} body.yekfi-signature .fi-demo-basket>div:first-child{display:grid;gap:2px} body.yekfi-signature .fi-demo-basket small{font-size:10px;color:#858b83} body.yekfi-signature .fi-demo-basket b{font-size:14px;color:#29442e} body.yekfi-signature .fi-basket-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;font-size:11px;padding-top:8px;border-top:1px solid rgba(90,93,78,.09)} body.yekfi-signature .fi-basket-row strong{color:#8b6b2d} body.yekfi-signature .fi-basket-row em{font-style:normal;color:#53705a} @media(max-width:520px){body.yekfi-signature .first-impression-shell{align-items:flex-start}body.yekfi-signature .fi-value-grid{grid-template-columns:1fr}body.yekfi-signature .fi-value-grid article{grid-template-columns:auto 1fr;column-gap:10px}body.yekfi-signature .fi-value-grid article small{grid-column:2}body.yekfi-signature .fi-visual{grid-template-columns:1fr}body.yekfi-signature .fi-mini-stats{grid-template-columns:repeat(3,1fr)}body.yekfi-signature .fi-actions{grid-template-columns:1fr}body.yekfi-signature .fi-demo-house{grid-template-columns:1fr}body.yekfi-signature .fi-demo-week{grid-template-columns:1fr 1fr}body.yekfi-signature .fi-demo-week article:last-child{grid-column:1/-1}body.yekfi-signature .fi-basket-row{grid-template-columns:1fr}body.yekfi-signature .app-trust-footer{display:grid}} @media(max-width:360px){body.yekfi-signature .fi-top{align-items:flex-start}body.yekfi-signature .fi-top img{width:126px}body.yekfi-signature .fi-mini-stats{grid-template-columns:1fr 1fr}body.yekfi-signature .fi-mini-stats span:last-child{grid-column:1/-1}} /* Static trust pages */ body.trust-static{margin:0;min-height:100vh;background:#f8f4e9;color:#24372a;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;direction:rtl} body.trust-static *{box-sizing:border-box} body.trust-static .trust-page{width:min(760px,100%);margin:auto;padding:28px 18px 56px} body.trust-static .trust-page-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:28px} body.trust-static .trust-page-header img{width:145px;height:auto} body.trust-static .trust-page-header a{color:#29442e;font-size:13px} body.trust-static .trust-doc{background:#fffdf8;border:1px solid rgba(83,96,77,.13);border-radius:var(--radius-hero);padding:clamp(20px,5vw,34px);box-shadow:0 15px 40px rgba(40,54,41,.06)} body.trust-static .trust-doc .beta-label{display:inline-flex;padding:6px 10px;border-radius:var(--radius-pill);background:#f5edcf;color:#725b23;font-size:11px;font-weight:800} body.trust-static .trust-doc h1{margin:12px 0 8px;font-size:clamp(28px,7vw,44px);line-height:1.15} body.trust-static .trust-doc .updated{margin:0 0 24px;color:#7b827a;font-size:12px} body.trust-static .trust-doc section{padding:18px 0;border-top:1px solid rgba(83,96,77,.10)} body.trust-static .trust-doc section:first-of-type{border-top:0} body.trust-static .trust-doc h2{margin:0 0 8px;font-size:18px} body.trust-static .trust-doc p,body.trust-static .trust-doc li{color:#58645b;line-height:1.8;font-size:14px} body.trust-static .trust-doc ul{padding-right:20px} body.trust-static .trust-callout{padding:14px 16px;border-radius:var(--radius-card);background:#edf3eb;color:#35533c;margin:14px 0;font-size:13px;line-height:1.7} body.trust-static .trust-page-footer{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:22px;font-size:12px}body.trust-static .trust-page-footer a{color:#60675f} /* ===== visual-library-v1053.css ===== */ /* YEKFI v10.5.5 — Visual Library Stage05 Integration */ body.yekfi-signature .sig-shop-cat-head .sig-shop-cat-photo{width:52px;height:40px;object-fit:cover;border-radius:var(--radius-control);border:1px solid rgba(38,82,55,.14);box-shadow:0 3px 12px rgba(32,60,40,.08);flex:0 0 auto} body.yekfi-signature .sig-shop-cat-head .sig-shop-cat-copy{display:flex;align-items:center;gap:10px;min-width:0} @media(max-width:360px){body.yekfi-signature .sig-shop-cat-head .sig-shop-cat-photo{width:44px;height:36px}} /* ===== brand-authority-v1058.css ===== */ /* YEKFI v10.5.8 — User-approved Brand Authority Source: YEKFI_BRAND_AUTHORITY_BOARD_v1.jpg. Do not redraw/reinterpret logo assets. */ :root{ --yk-gold-active:#D4AF37; } html,body{background-color:var(--brand-cream)} body.yekfi-signature .brand{gap:8px;min-width:0} body.yekfi-signature .brand-lockup{ width:132px;height:44px;min-width:132px;flex:0 0 132px; object-fit:contain;object-position:center;filter:none; } body.yekfi-signature .brand-copy{display:none} body.yekfi-signature .splash-logo.splash-lockup{ width:min(310px,76vw);height:auto;max-height:320px;object-fit:contain;filter:none; } body.yekfi-signature :is(.logo-orb,.ready-icon,.composer-brand){background:transparent;border:0;box-shadow:none} body.yekfi-signature :is(.logo-orb,.ready-icon,.composer-brand) img{object-fit:contain;filter:none} .first-impression .fi-top img{max-width:182px;height:58px;object-fit:contain;filter:none} body.yekfi-signature .topbar-new-plan:focus-visible, body.yekfi-signature .budget-pill:focus-visible, body.yekfi-signature button:focus-visible, body.yekfi-signature a:focus-visible{outline:2px solid #D4AF37;outline-offset:2px} @media(max-width:430px){body.yekfi-signature .brand-lockup{width:112px;height:39px;min-width:112px;flex-basis:112px}} @media(max-width:360px){body.yekfi-signature .brand-lockup{width:96px;height:35px;min-width:96px;flex-basis:96px}} /* ===== consumer-delight-v1060.css ===== */ /* ===================================================================== YEKFI v10.6.0 — Consumer Delight & Conversion Sprint 1 Presentation-only layer. No planning/budget/nutrition/procurement logic. Focus: clarity, time-to-value, perceived performance, confidence, delight. ===================================================================== */ :root{ } /* Global interaction quality */ body.yekfi-signature button, body.yekfi-signature [role="button"]{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } body.yekfi-signature button:not(:disabled):active, body.yekfi-signature [role="button"]:active{transform:translateY(1px)} body.yekfi-signature .btn, body.yekfi-signature .sig-btn, body.yekfi-signature .yi-quick, body.yekfi-signature .nav-btn, body.yekfi-signature .sig-shop-check, body.yekfi-signature .sig-day{transition:transform .16s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease} body.yekfi-signature .btn.primary, body.yekfi-signature .sig-btn-primary, body.yekfi-signature .delight-primary-cta{ box-shadow:0 10px 25px rgba(84,72,33,.16),inset 0 1px 0 rgba(255,255,255,.5); } body.yekfi-signature .btn.primary:hover, body.yekfi-signature .sig-btn-primary:hover{transform:translateY(-1px)} /* First 30 seconds */ body.yekfi-signature .delight-fi-home{gap:16px} body.yekfi-signature .delight-value-promise{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; } body.yekfi-signature .delight-value-promise>span{ min-width:0;padding:13px 14px;border:1px solid var(--cd-line);border-radius:var(--radius-card); background:linear-gradient(180deg,rgba(255,255,252,.92),rgba(247,242,230,.76)); box-shadow:var(--cd-shadow-soft);display:grid;gap:3px; } body.yekfi-signature .delight-value-promise b{font-size:14px;color:#27422d} body.yekfi-signature .delight-value-promise small{font-size:10.8px;line-height:1.45;color:#69736b} body.yekfi-signature .delight-fi-steps article{position:relative;overflow:hidden} body.yekfi-signature .delight-fi-steps article:after{content:"";position:absolute;inset:auto -16px -20px auto;width:58px;height:58px;border-radius:var(--radius-pill);background:rgba(212,175,55,.06)} body.yekfi-signature .delight-trust{justify-content:center;border:1px solid rgba(70,100,72,.11);background:rgba(237,244,235,.7)} body.yekfi-signature .delight-demo-outcomes span{min-height:76px;align-content:center} /* Onboarding: calmer, clearer, less “form-like” */ body.yekfi-signature .on-card{ border:1px solid rgba(74,91,70,.13); box-shadow:0 24px 70px rgba(31,48,34,.12); } body.yekfi-signature .on-head{padding-bottom:12px;border-bottom:1px solid rgba(70,88,68,.08)} body.yekfi-signature .on-head>div:nth-child(2) b{font-size:15px;color:#243d29} body.yekfi-signature .on-head>div:nth-child(2) small{color:#6b746c;line-height:1.45} body.yekfi-signature .progress{height:5px;background:#ebe6d8;border-radius:var(--radius-pill);overflow:hidden} body.yekfi-signature .progress i{background:linear-gradient(90deg,#51683A,#D4AF37);box-shadow:0 0 18px rgba(212,175,55,.18)} body.yekfi-signature .ux-on-step{gap:18px} body.yekfi-signature .on-step-lead{max-width:680px} body.yekfi-signature .on-step-lead h1{letter-spacing:-.02em;color:#1f3825} body.yekfi-signature .on-step-lead p{color:#697269;line-height:1.75} body.yekfi-signature .step-kicker{display:inline-flex;align-items:center;min-height:27px;padding:5px 9px;border-radius:var(--radius-pill);background:#f4ecd7;color:#796027;font-weight:900} body.yekfi-signature .ux-on-actions{ position:sticky;bottom:-1px;z-index:3;padding:12px 0 4px;margin-top:4px; background:linear-gradient(180deg,rgba(249,246,237,0),rgba(249,246,237,.96) 28%,#f9f6ed 100%); } body.yekfi-signature .ux-on-actions .btn{min-height:50px;border-radius:var(--radius-card)} body.yekfi-signature .budget-policy-card.selected, body.yekfi-signature .cuisine-card.selected{box-shadow:0 0 0 2px rgba(212,175,55,.34),0 10px 24px rgba(42,57,42,.07)} /* Loader = reassurance + perceived progress */ body.yekfi-signature .loader-card{border-radius:var(--radius-hero);box-shadow:0 28px 85px rgba(30,48,33,.17)} body.yekfi-signature .delight-loader-kicker{display:inline-flex;margin:0 auto 8px;padding:6px 10px;border-radius:var(--radius-pill);background:#edf3eb;color:#47634d;font-size:10.5px;font-weight:850} body.yekfi-signature .loader-card h2{letter-spacing:-.018em} body.yekfi-signature .loader-progress{height:7px;border-radius:var(--radius-pill);background:#ebe7dc;overflow:hidden} body.yekfi-signature .loader-progress i{background:linear-gradient(90deg,#486c4d,#d4af37);box-shadow:0 0 18px rgba(212,175,55,.24)} body.yekfi-signature .loader-stages{gap:6px} body.yekfi-signature .loader-stages span{border-radius:var(--radius-pill)} /* First-plan WOW moment */ body.yekfi-signature .ready-card{max-width:760px;border-radius:var(--radius-hero);box-shadow:0 30px 90px rgba(29,47,32,.17)} body.yekfi-signature .ready-card>.eyebrow, body.yekfi-signature .ready-card>h1{display:none} body.yekfi-signature .delight-ready-lead{display:grid;gap:6px;text-align:center;margin:2px auto 18px;max-width:610px} body.yekfi-signature .delight-ready-lead>span{justify-self:center;padding:6px 11px;border-radius:var(--radius-pill);background:#e8f1e7;color:#376040;font-size:11px;font-weight:900} body.yekfi-signature .delight-ready-lead h2{margin:0;color:#1f3825;font-size:clamp(26px,6vw,38px);line-height:1.18;letter-spacing:-.025em} body.yekfi-signature .delight-ready-lead p{margin:0;color:#69726a;line-height:1.65;font-size:13px} body.yekfi-signature .delight-ready-kpis{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:9px;margin:0 0 10px} body.yekfi-signature .delight-ready-kpis>div{padding:14px;border:1px solid var(--cd-line);border-radius:var(--radius-card);background:#fffdfa;display:grid;gap:3px;min-width:0} body.yekfi-signature .delight-ready-kpis>div.primary{background:linear-gradient(145deg,#eef3e9,#fbf4e1);border-color:rgba(164,132,52,.22);box-shadow:var(--cd-shadow-soft)} body.yekfi-signature .delight-ready-kpis small{color:#748076;font-size:10px} body.yekfi-signature .delight-ready-kpis strong{color:#263f2c;font-size:24px;line-height:1.1} body.yekfi-signature .delight-ready-kpis em{font-style:normal;color:#8a6b2d;font-size:10px;line-height:1.4} body.yekfi-signature .delight-ready-proof{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:10px 0 12px} body.yekfi-signature .delight-ready-proof span{padding:6px 9px;border-radius:var(--radius-pill);background:#f0f4ee;color:#4b6750;font-size:10.5px;font-weight:800} body.yekfi-signature .delight-ready-alert, body.yekfi-signature .delight-ready-good{width:100%;border:1px solid rgba(149,116,42,.18);border-radius:var(--radius-card);background:#fff8e8;padding:11px 13px;display:grid;gap:3px;text-align:right;color:#4d4f3f;margin-bottom:10px} body.yekfi-signature .delight-ready-alert{cursor:pointer} body.yekfi-signature .delight-ready-alert span{font-size:10px;color:#867350} body.yekfi-signature .delight-ready-alert b{font-size:12px;color:#5a4925} body.yekfi-signature .delight-ready-good{background:#eef5ec;border-color:rgba(70,104,74,.15)} body.yekfi-signature .delight-ready-good b{color:#33593a} body.yekfi-signature .delight-ready-good span{font-size:10.5px;color:#627064} body.yekfi-signature .delight-ready-details{margin-top:8px;border-top:1px solid rgba(72,87,70,.1)} body.yekfi-signature .delight-ready-details summary{padding:12px 2px;color:#536158;font-size:11.5px;font-weight:850;cursor:pointer} body.yekfi-signature .delight-ready-detail-body{display:grid;gap:9px;padding-top:2px} body.yekfi-signature .ready-grid.compact{grid-template-columns:repeat(3,1fr)} body.yekfi-signature .ready-actions{position:sticky;bottom:-1px;padding-top:11px;background:linear-gradient(180deg,rgba(255,253,248,0),#fffdf8 28%);z-index:3} body.yekfi-signature .ready-actions .btn{min-height:50px;border-radius:var(--radius-card)} /* Today: one clear next action, then the rest */ body.yekfi-signature .delight-next-hero{margin-bottom:10px} body.yekfi-signature .delight-glance{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:7px;margin:10px 0 18px} body.yekfi-signature .delight-glance>span, body.yekfi-signature .delight-glance>button{min-width:0;padding:10px 11px;border:1px solid var(--cd-line);border-radius:var(--radius-card);background:var(--cd-surface);display:grid;gap:2px;text-align:right;box-shadow:0 4px 12px rgba(35,51,38,.035)} body.yekfi-signature .delight-glance>button{cursor:pointer;color:inherit} body.yekfi-signature .delight-glance small{font-size:9.5px;color:#7b847c} body.yekfi-signature .delight-glance b{font-size:12px;color:#29462f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.yekfi-signature .delight-meals-section{margin-top:4px} body.yekfi-signature .delight-quick-section .yi-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))} body.yekfi-signature .delight-quick-section .yi-quick{min-height:90px;padding:12px 8px;border-radius:var(--radius-card)} body.yekfi-signature .delight-quick-section .yi-quick b{font-size:12px} body.yekfi-signature .delight-quick-section .yi-quick small{font-size:9.5px} body.yekfi-signature .delight-week-summary .sig-summary{background:linear-gradient(180deg,#fffefa,#f8f2e6);border-color:rgba(113,94,55,.16)} body.yekfi-signature .delight-secondary-insights{margin:10px 0 2px;border:1px solid rgba(71,87,69,.10);border-radius:var(--radius-card);background:rgba(255,253,248,.62);overflow:hidden} body.yekfi-signature .delight-secondary-insights>summary{padding:13px 14px;color:#5a675e;font-size:11px;font-weight:850;cursor:pointer} body.yekfi-signature .delight-secondary-insights>div{padding:0 10px 10px} /* Week: reduce visual noise, stronger selected day */ body.yekfi-signature .sig-week-page .sig-day-strip{padding:5px;background:rgba(255,253,248,.82)} body.yekfi-signature .sig-week-page .sig-day{min-height:48px;border-radius:var(--radius-card)} body.yekfi-signature .sig-week-page .sig-day.active{transform:translateY(-1px);box-shadow:0 9px 22px rgba(48,78,52,.18)} body.yekfi-signature .sig-week-card{transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease} body.yekfi-signature .sig-week-card:hover{border-color:rgba(116,95,54,.22);box-shadow:0 11px 28px rgba(34,47,31,.075)} /* Grocery economics: make the three numbers instantly understandable */ body.yekfi-signature .delight-shopping-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} body.yekfi-signature .delight-shopping-stats>span{display:grid;gap:2px;padding:9px 10px;border:1px solid rgba(255,255,255,.17);border-radius:var(--radius-card);background:rgba(255,255,255,.09);backdrop-filter:blur(6px)} body.yekfi-signature .delight-shopping-stats small{font-size:9px;color:rgba(255,255,255,.72)} body.yekfi-signature .delight-shopping-stats b{font-size:12px;color:#fff} /* Store mode = execution mode, not another page */ body.yekfi-signature .delight-store-head{position:sticky;top:0;z-index:20;background:rgba(249,246,237,.97);backdrop-filter:blur(14px);border-bottom:1px solid rgba(68,85,66,.1);box-shadow:0 7px 22px rgba(34,47,31,.06)} body.yekfi-signature .delight-store-head .store-total{display:grid;gap:0;text-align:left} body.yekfi-signature .delight-store-head .store-total small{font-size:8.5px;color:#718074;font-weight:700} body.yekfi-signature .delight-store-money{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:10px 12px 3px;background:#f9f6ed} body.yekfi-signature .delight-store-money span{padding:9px 10px;border:1px solid var(--cd-line);border-radius:var(--radius-card);background:#fffdfa;display:grid;gap:2px} body.yekfi-signature .delight-store-money small{font-size:8.8px;color:#7b857d} body.yekfi-signature .delight-store-money b{font-size:12px;color:#29452f} body.yekfi-signature .store-search{position:sticky;top:59px;z-index:19;background:#f9f6ed;padding-top:9px;padding-bottom:9px;border-bottom:1px solid rgba(68,85,66,.08)} body.yekfi-signature .store-progress{position:sticky;top:116px;z-index:18;height:5px;margin:0;border-radius:0;background:#e7e2d7} body.yekfi-signature .store-progress span{background:linear-gradient(90deg,#4b704f,#d4af37)} body.yekfi-signature .delight-store-sticky{position:sticky;bottom:calc(66px + env(safe-area-inset-bottom));z-index:25;margin:12px 10px 8px;padding:9px 10px 9px 13px;border:1px solid rgba(69,91,68,.15);border-radius:var(--radius-card);background:rgba(255,253,248,.96);backdrop-filter:blur(16px);box-shadow:0 14px 38px rgba(31,48,34,.16);display:flex;align-items:center;justify-content:space-between;gap:10px} body.yekfi-signature .delight-store-sticky span{display:grid;gap:1px;min-width:0} body.yekfi-signature .delight-store-sticky small{font-size:8.8px;color:#7c857d} body.yekfi-signature .delight-store-sticky b{font-size:11.5px;color:#29462f} body.yekfi-signature .delight-store-sticky button{min-height:40px;padding:0 13px;border:0;border-radius:var(--radius-control);background:#2e4d2b;color:#fff;font-weight:850} body.yekfi-signature .delight-store-complete{margin-bottom:88px} body.yekfi-signature .store-mode-head~.sig-shop-category .sig-shop-item{min-height:66px} body.yekfi-signature .store-mode-head~.sig-shop-category .sig-shop-check{width:42px;height:42px;border-radius:var(--radius-card)} /* Error, empty, toast = reassuring and actionable */ body.yekfi-signature .runtime-recovery-card, body.yekfi-signature .empty-state-page{max-width:680px;margin:20px auto;text-align:center;padding:26px 20px;border-radius:var(--radius-hero)} body.yekfi-signature .runtime-recovery-card .btn, body.yekfi-signature .empty-state-page .btn{min-height:48px;border-radius:var(--radius-card)} body.yekfi-signature .toast{border-radius:var(--radius-card);box-shadow:0 15px 40px rgba(27,43,30,.18);backdrop-filter:blur(16px)} @media(max-width:520px){ body.yekfi-signature .delight-value-promise{grid-template-columns:1fr} body.yekfi-signature .delight-value-promise>span{grid-template-columns:120px 1fr;align-items:center} body.yekfi-signature .delight-value-promise small{grid-column:2} body.yekfi-signature .delight-ready-kpis{grid-template-columns:1.35fr 1fr} body.yekfi-signature .delight-ready-kpis>div:last-child{grid-column:1/-1} body.yekfi-signature .ready-grid.compact{grid-template-columns:1fr} body.yekfi-signature .delight-glance{grid-template-columns:1fr 1fr} body.yekfi-signature .delight-glance>button{grid-column:1/-1} body.yekfi-signature .delight-quick-section .yi-quick-grid{grid-template-columns:1fr 1fr} body.yekfi-signature .delight-shopping-stats{grid-template-columns:1fr 1fr} body.yekfi-signature .delight-shopping-stats>span:first-child{grid-column:1/-1} body.yekfi-signature .delight-store-money{grid-template-columns:1fr 1fr} body.yekfi-signature .delight-store-money span:first-child{grid-column:1/-1} } @media(max-width:360px){ body.yekfi-signature .delight-ready-kpis{grid-template-columns:1fr} body.yekfi-signature .delight-ready-kpis>div:last-child{grid-column:auto} body.yekfi-signature .delight-glance{grid-template-columns:1fr} body.yekfi-signature .delight-glance>button{grid-column:auto} body.yekfi-signature .delight-store-money{grid-template-columns:1fr} body.yekfi-signature .delight-store-money span:first-child{grid-column:auto} } @media(prefers-reduced-motion:reduce){ body.yekfi-signature *,body.yekfi-signature *::before,body.yekfi-signature *::after{scroll-behavior:auto;transition-duration:.001ms;animation-duration:.001ms;animation-iteration-count:1} } /* ===== consumer-delight-v1061.css ===== */ /* YEKFI v10.6.1 — Consumer Delight Sprint 2: Micro-UX hardening. Presentation and interaction ergonomics only; planning logic unchanged. */ :root{} /* Keyboard/accessibility: visible only when it matters. */ body.yekfi-signature :where(button,a,input,select,textarea,summary):focus-visible{ outline:3px solid rgba(212,175,55,.48);outline-offset:2px; } body.yekfi-signature :where(button,[role="button"],.sig-day,.sig-link,.sig-shop-check){min-height:44px} body.yekfi-signature button:disabled{cursor:not-allowed;opacity:.48} /* Context stays visible without turning the page into a sticky wall. */ body.yekfi-signature .sig-today-page>.sig-context-bar{ position:sticky;top:0;z-index:14;background:rgba(249,246,237,.94);backdrop-filter:blur(14px); border:1px solid rgba(70,88,68,.08);box-shadow:0 7px 22px rgba(35,51,38,.045) } /* Selected state is unmistakable and brand-consistent. */ body.yekfi-signature .sig-week-page .sig-day.active, body.yekfi-signature .budget-policy-card.selected, body.yekfi-signature .cuisine-card.selected{ border-color:rgba(212,175,55,.72); box-shadow:0 0 0 2px rgba(212,175,55,.20),0 9px 22px rgba(48,78,52,.13); } /* Week: answer the three questions before the user scans meal cards. */ body.yekfi-signature .delight-week-navigator{margin-bottom:8px} body.yekfi-signature .delight-day-glance{ display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:7px;margin-top:9px; } body.yekfi-signature .delight-day-glance>span{ min-width:0;padding:10px 11px;border:1px solid var(--ux17-line);border-radius:var(--radius-card); background:rgba(255,253,248,.92);display:grid;gap:2px;box-shadow:0 4px 12px rgba(35,51,38,.035) } body.yekfi-signature .delight-day-glance small{font-size:9px;color:#7a847c} body.yekfi-signature .delight-day-glance b{font-size:11.5px;color:#29462f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.yekfi-signature .delight-week-meals .sig-week-card{content-visibility:auto;contain-intrinsic-size:92px} body.yekfi-signature .sig-week-row-actions>button{min-height:42px} body.yekfi-signature .meal-more>summary{min-width:44px;min-height:42px;display:grid;place-items:center} /* Groceries: completion is visible before Store Mode. */ body.yekfi-signature .delight-shop-progress{ display:grid;grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:10px; margin:10px 0 4px;padding:11px 13px;border:1px solid var(--ux17-line);border-radius:var(--radius-card); background:rgba(255,253,248,.94);box-shadow:0 5px 16px rgba(35,51,38,.04) } body.yekfi-signature .delight-shop-progress>span{display:grid;gap:1px} body.yekfi-signature .delight-shop-progress>span.end{text-align:left} body.yekfi-signature .delight-shop-progress small{font-size:8.8px;color:#7a847c} body.yekfi-signature .delight-shop-progress b{font-size:11.5px;color:#29462f} body.yekfi-signature .delight-shop-progress-track{height:7px;border-radius:var(--radius-pill);background:#e8e2d5;overflow:hidden} body.yekfi-signature .delight-shop-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4b704f,#d4af37);transition:width .22s ease} body.yekfi-signature .sig-shop-item.done{opacity:.62} body.yekfi-signature .sig-shop-item.done .sig-shop-main>b{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:rgba(46,77,43,.45)} /* Store Mode: search is controllable with one tap; checked state recedes. */ body.yekfi-signature .store-search{gap:7px} body.yekfi-signature .store-clear-search{ flex:0 0 38px;width:38px;min-height:38px;padding:0;border-radius:var(--radius-control); border:1px solid rgba(72,89,70,.12);background:#fffdfa;color:#5f6b61;font-size:19px } body.yekfi-signature .store-mode-head~.sig-shop-category .sig-shop-item.done{background:rgba(236,241,233,.58)} body.yekfi-signature .delight-store-sticky{max-width:720px;margin-inline:auto;width:calc(100% - 20px)} /* Long names and Arabic text must never create horizontal drift. */ body.yekfi-signature :where(.sig-week-copy,.sig-shop-main,.sig-section-head span,.delight-day-glance span,.delight-shop-progress span){min-width:0} body.yekfi-signature :where(.sig-week-copy .name,.sig-shop-main b,.sig-section-head h2){overflow-wrap:anywhere} @media(max-width:520px){ body.yekfi-signature .delight-day-glance{grid-template-columns:1fr 1fr} body.yekfi-signature .delight-day-glance>span:last-child{grid-column:1/-1} body.yekfi-signature .delight-shop-progress{grid-template-columns:auto 1fr auto;gap:7px;padding:10px} } @media(max-width:360px){ body.yekfi-signature .delight-day-glance{grid-template-columns:1fr} body.yekfi-signature .delight-day-glance>span:last-child{grid-column:auto} body.yekfi-signature .delight-shop-progress{grid-template-columns:1fr auto} body.yekfi-signature .delight-shop-progress-track{grid-column:1/-1;grid-row:2} } @media(prefers-reduced-motion:reduce){body.yekfi-signature .delight-shop-progress-track i{transition:none}} /* ===== consumer-delight-v1062.css ===== */ /* ===================================================================== YEKFI v10.6.2 — Consumer Delight Sprint 3: Premium Visual & Interaction Presentation/ergonomics only. Planning, budget, nutrition, price, pantry, kitchen and cultural logic are intentionally untouched. ===================================================================== */ :root{ --ux18-ease:cubic-bezier(.2,.75,.25,1); } /* Global optical quality and rhythm */ html{scroll-behavior:smooth;text-rendering:optimizeLegibility} body.yekfi-signature{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:var(--ux18-ink); } body.yekfi-signature .content{padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right))} body.yekfi-signature .sig-page{max-width:820px;margin-inline:auto;gap:20px} body.yekfi-signature .sig-section{scroll-margin-top:92px} body.yekfi-signature .sig-section-head{align-items:end;gap:12px;margin-bottom:11px;position:relative} body.yekfi-signature .sig-section-head:after{ content:"";position:absolute;inset-inline-start:0;bottom:-7px;width:34px;height:2px;border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--ux18-gold),rgba(212,175,55,.12)); } body.yekfi-signature .sig-section-head small{font-size:10.5px;letter-spacing:.01em;color:var(--ux18-muted)} body.yekfi-signature .sig-section-head h2{font-size:clamp(20px,5.2vw,26px);line-height:1.18;letter-spacing:-.018em;color:var(--ux18-ink)} body.yekfi-signature .sig-link{font-weight:850;text-underline-offset:3px} /* Header: premium, quieter and visually anchored */ body.yekfi-signature .topbar{ background:rgba(249,246,237,.93); backdrop-filter:blur(18px) saturate(1.12); -webkit-backdrop-filter:blur(18px) saturate(1.12); } body.yekfi-signature .budget-pill, body.yekfi-signature .topbar-new-plan, body.yekfi-signature .family-top-btn, body.yekfi-signature .round-icon{ transition:transform .16s var(--ux18-ease),box-shadow .2s var(--ux18-ease),border-color .2s var(--ux18-ease); } body.yekfi-signature .budget-pill:active, body.yekfi-signature .topbar-new-plan:active, body.yekfi-signature .family-top-btn:active, body.yekfi-signature .round-icon:active{transform:scale(.985)} body.yekfi-signature .budget-pill{box-shadow:0 5px 14px rgba(31,45,32,.045)} body.yekfi-signature .topbar-new-plan{box-shadow:0 8px 20px rgba(38,58,38,.14),inset 0 1px 0 rgba(255,255,255,.13)} /* Heroes: image stays appetising, copy becomes unmistakably readable */ body.yekfi-signature .sig-hero{ border-radius:var(--radius-hero); overflow:hidden; box-shadow:0 18px 48px rgba(27,40,29,.13),0 2px 8px rgba(27,40,29,.055); transform:translateZ(0); } body.yekfi-signature .sig-hero-media img{ filter:saturate(1.08) contrast(1.04) brightness(.96); transition:transform .8s var(--ux18-ease),filter .3s ease; } @media(hover:hover){body.yekfi-signature .sig-hero:hover .sig-hero-media img{transform:scale(1.018)}} body.yekfi-signature .sig-next-hero .sig-hero-shade{ background:linear-gradient(90deg,rgba(10,17,11,.05) 0%,rgba(10,17,11,.18) 32%,rgba(8,15,10,.73) 63%,rgba(8,15,10,.96) 100%),linear-gradient(0deg,rgba(8,15,10,.62),transparent 61%); } body.yekfi-signature .sig-hero-copy{padding:clamp(18px,4.7vw,28px)} body.yekfi-signature .sig-hero-title{font-size:clamp(25px,7vw,34px);line-height:1.13;letter-spacing:-.027em;max-width:16ch} body.yekfi-signature .sig-hero-meta{gap:6px} body.yekfi-signature .sig-hero-meta span{padding:7px 10px;border-radius:var(--radius-pill)} body.yekfi-signature .sig-hero-actions{gap:8px} body.yekfi-signature .sig-hero-actions .sig-btn{min-height:48px;border-radius:var(--radius-card);font-weight:900} /* Cards: strong hierarchy without visual noise */ body.yekfi-signature :is(.sig-meal-row,.sig-week-card,.sig-shop-category,.sig-panel,.sig-summary){ border:1px solid var(--ux18-line); background:rgba(255,253,248,.97); box-shadow:var(--ux18-shadow-soft); } body.yekfi-signature :is(.sig-meal-row,.sig-week-card){ border-radius:var(--radius-card); transition:transform .17s var(--ux18-ease),box-shadow .2s var(--ux18-ease),border-color .2s ease; } @media(hover:hover){ body.yekfi-signature :is(.sig-meal-row,.sig-week-card):hover{ transform:translateY(-1px);border-color:rgba(160,126,45,.24);box-shadow:var(--ux18-shadow); } } body.yekfi-signature :is(.sig-meal-row,.sig-week-card):active{transform:scale(.996)} body.yekfi-signature :is(.sig-meal-main b,.sig-week-copy .name){font-weight:920;letter-spacing:-.008em;color:var(--ux18-ink)} body.yekfi-signature :is(.sig-meal-main small,.sig-week-copy .type){color:#647064;font-weight:820} body.yekfi-signature :is(.sig-meal-main em,.sig-week-copy .meta){color:var(--ux18-muted)} body.yekfi-signature .sig-meal-thumb, body.yekfi-signature .sig-week-card .sig-meal-thumb{border-radius:var(--radius-card);box-shadow:0 3px 10px rgba(25,37,27,.08)} /* Today quick actions: less dashboard-like, more tactile */ body.yekfi-signature .delight-glance>span, body.yekfi-signature .delight-glance>button, body.yekfi-signature .delight-day-glance>span{ border-color:var(--ux18-line);background:rgba(255,253,248,.94); box-shadow:0 4px 14px rgba(31,45,32,.035); } body.yekfi-signature .delight-quick-section .yi-quick{ border:1px solid var(--ux18-line);background:linear-gradient(180deg,#fffefa,#faf5e9); box-shadow:0 5px 14px rgba(31,45,32,.04); transition:transform .16s var(--ux18-ease),border-color .18s ease,box-shadow .18s ease; } body.yekfi-signature .delight-quick-section .yi-quick:active{transform:scale(.985)} body.yekfi-signature .delight-quick-section .yi-quick i{color:var(--ux18-green)} /* Week navigation: finger-friendly, obvious current day, no horizontal drift */ body.yekfi-signature .sig-day-strip{ gap:6px;padding:7px;border-radius:var(--radius-card);background:rgba(255,253,248,.84); box-shadow:0 6px 18px rgba(31,45,32,.04);overflow:hidden; } body.yekfi-signature .sig-day{ min-width:0;min-height:50px;border-radius:var(--radius-card);padding:6px 4px; transition:transform .16s var(--ux18-ease),background .18s ease,border-color .18s ease,box-shadow .18s ease; } body.yekfi-signature .sig-day.active{ background:linear-gradient(160deg,#4c714f,#315539);color:#fff9ea; border-color:rgba(212,175,55,.76);box-shadow:0 7px 18px rgba(35,70,40,.18),inset 0 0 0 1px rgba(244,217,143,.20); } body.yekfi-signature .sig-day.active :is(b,small){color:inherit} body.yekfi-signature .sig-day:active{transform:scale(.96)} body.yekfi-signature .sig-week-row-actions{gap:7px} body.yekfi-signature .sig-week-row-actions>button, body.yekfi-signature .meal-more>summary{border-radius:var(--radius-card);font-weight:850} /* Groceries: stronger scan line and completion semantics */ body.yekfi-signature .sig-shop-category{border-radius:var(--radius-card);overflow:hidden} body.yekfi-signature .sig-shop-cat-head{padding:11px 12px;border-bottom:1px solid rgba(64,82,63,.07)} body.yekfi-signature .sig-shop-item{transition:background .16s ease,opacity .18s ease,transform .14s var(--ux18-ease)} body.yekfi-signature .sig-shop-item:active{transform:scale(.996)} body.yekfi-signature .sig-shop-item.done{opacity:.56;background:rgba(238,242,235,.64)} body.yekfi-signature .sig-shop-check{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)} body.yekfi-signature .delight-shop-progress{border-color:var(--ux18-line);box-shadow:var(--ux18-shadow-soft)} body.yekfi-signature .delight-shop-progress-track{height:8px} body.yekfi-signature .delight-shop-progress-track i{box-shadow:0 0 12px rgba(212,175,55,.16)} /* Store Mode: one-handed cockpit */ body.yekfi-signature .store-mode-head{ position:sticky;top:0;z-index:18; background:rgba(249,246,237,.95);backdrop-filter:blur(16px); border-bottom:1px solid rgba(64,82,63,.08); } body.yekfi-signature .store-search{position:sticky;top:58px;z-index:17;background:rgba(249,246,237,.95);padding-block:7px} body.yekfi-signature .store-search input{min-height:46px;border-radius:var(--radius-card)} body.yekfi-signature .store-clear-search{min-width:42px;min-height:42px} body.yekfi-signature .delight-store-sticky{ border:1px solid rgba(212,175,55,.28);border-radius:var(--radius-card); background:rgba(255,253,248,.96);backdrop-filter:blur(18px); box-shadow:0 14px 42px rgba(31,45,32,.15); } body.yekfi-signature .delight-store-sticky button{min-height:48px;border-radius:var(--radius-card);font-weight:900} /* Bottom navigation: stable thumb target with a subtle active beacon */ body.yekfi-signature .bottom-nav{ padding:6px;padding-bottom:max(6px,env(safe-area-inset-bottom)); border-radius:var(--radius-hero);backdrop-filter:blur(18px) saturate(1.08); -webkit-backdrop-filter:blur(18px) saturate(1.08); box-shadow:0 14px 38px rgba(30,43,30,.13),inset 0 1px 0 rgba(255,255,255,.9); } body.yekfi-signature .bottom-nav .nav-btn{ position:relative;min-height:56px;border-radius:var(--radius-card); transition:transform .15s var(--ux18-ease),background .18s ease,color .18s ease; } body.yekfi-signature .bottom-nav .nav-btn:active{transform:scale(.97)} body.yekfi-signature .bottom-nav .nav-btn.active{ background:linear-gradient(180deg,#f8efcf,#f1e5b7); border:1px solid rgba(212,175,55,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.65); } body.yekfi-signature .bottom-nav .nav-btn.active:before{ content:"";position:absolute;top:4px;left:50%;width:18px;height:2px;border-radius:var(--radius-pill);transform:translateX(-50%); background:linear-gradient(90deg,#e9c65f,#b88a24); } body.yekfi-signature .bottom-nav .nav-btn i{transition:transform .18s var(--ux18-ease)} body.yekfi-signature .bottom-nav .nav-btn.active i{transform:translateY(-1px) scale(1.05)} body.yekfi-signature .bottom-nav .nav-btn span{white-space:nowrap} /* Disclosure, toast, empty/recovery states */ body.yekfi-signature details>summary{list-style:none} body.yekfi-signature details>summary::-webkit-details-marker{display:none} body.yekfi-signature :is(.meal-more,.delight-ready-details,.delight-secondary-insights)>summary{position:relative;padding-inline-end:28px} body.yekfi-signature :is(.meal-more,.delight-ready-details,.delight-secondary-insights)>summary:after{ content:"⌄";position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-52%);color:#7a6532; transition:transform .18s var(--ux18-ease); } body.yekfi-signature :is(.meal-more,.delight-ready-details,.delight-secondary-insights)[open]>summary:after{transform:translateY(-45%) rotate(180deg)} body.yekfi-signature .toast{ max-width:min(92vw,520px);min-height:44px;display:flex;align-items:center; color:#fffdf5;background:rgba(32,52,37,.94);border:1px solid rgba(244,217,143,.20); box-shadow:0 16px 44px rgba(24,36,26,.22); } body.yekfi-signature :is(.empty-state-page,.runtime-recovery-card,.runtime-hydration-placeholder .plan-pending){ border:1px solid var(--ux18-line);border-radius:var(--radius-hero);background:linear-gradient(180deg,#fffdfa,#f8f3e7); box-shadow:var(--ux18-shadow-soft); } body.yekfi-signature .runtime-hydration-placeholder .plan-pending{position:relative;overflow:hidden} body.yekfi-signature .runtime-hydration-placeholder .plan-pending:after{ content:"";position:absolute;inset:0;transform:translateX(-120%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:ux18-shimmer 1.5s infinite; } @keyframes ux18-shimmer{to{transform:translateX(120%)}} /* Form touch and trust */ body.yekfi-signature :is(.input,input,select,textarea){font-size:max(16px,1em)} body.yekfi-signature .input{border-radius:var(--radius-card);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease} body.yekfi-signature .input:focus{background:#fffefa;border-color:rgba(164,122,36,.58);box-shadow:0 0 0 3px rgba(212,175,55,.12)} /* Responsive density — keep one-handed comfort without losing hierarchy */ @media(max-width:560px){ body.yekfi-signature .content{padding-inline:9px} body.yekfi-signature .sig-page{gap:18px} body.yekfi-signature .sig-section-head{margin-inline:2px} body.yekfi-signature .sig-hero{min-height:236px;border-radius:var(--radius-hero)} body.yekfi-signature .sig-hero-title{font-size:26px;max-width:14ch} body.yekfi-signature .sig-hero-copy{padding:18px} body.yekfi-signature .sig-meal-row, body.yekfi-signature .sig-week-card{border-radius:var(--radius-card)} body.yekfi-signature .sig-day-strip{gap:4px;padding:6px} body.yekfi-signature .sig-day{min-height:48px;padding-inline:2px} body.yekfi-signature .bottom-nav{width:calc(100% - 14px);bottom:max(7px,env(safe-area-inset-bottom))} } @media(max-width:380px){ body.yekfi-signature .sig-hero-title{font-size:24px} body.yekfi-signature .sig-hero-meta span{padding:6px 8px;font-size:9.4px} body.yekfi-signature .bottom-nav .nav-btn{min-height:54px} body.yekfi-signature .bottom-nav .nav-btn span{font-size:10px} } /* Accessibility contracts */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} body.yekfi-signature *,body.yekfi-signature *::before,body.yekfi-signature *::after{animation-duration:.001ms;animation-iteration-count:1;transition-duration:.001ms;scroll-behavior:auto} } @media(prefers-contrast:more){ body.yekfi-signature :is(.sig-meal-row,.sig-week-card,.sig-shop-category,.sig-panel,.sig-summary,.delight-shop-progress){border-color:rgba(32,52,37,.32)} body.yekfi-signature .sig-section-head small,body.yekfi-signature :is(.sig-meal-main em,.sig-week-copy .meta){color:#465448} body.yekfi-signature .bottom-nav .nav-btn.active{border-color:#9b731c} } /* ===== consumer-delight-v1063.css ===== */ /* YEKFI v10.6.3 — Conversion & Emotional Delight Quiet reward, first-value clarity, shopping completion, and weekly habit loop. */ body.yekfi-signature{ } /* First-value moment: outcome before feature explanation */ body.yekfi-signature .delight-first-value{ position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:14px; margin:0 0 18px;padding:18px;border:1px solid rgba(197,155,53,.30);border-radius:var(--radius-hero); background:linear-gradient(145deg,rgba(255,253,247,.98),rgba(247,240,216,.94)); box-shadow:0 14px 34px rgba(41,57,44,.09),inset 0 1px 0 rgba(255,255,255,.9); } body.yekfi-signature .delight-first-value:after{ content:"";position:absolute;inset:auto -40px -70px auto;width:180px;height:180px;border-radius:var(--radius-pill); background:radial-gradient(circle,rgba(212,175,55,.16),transparent 66%);pointer-events:none; } body.yekfi-signature .delight-first-value-mark{ width:46px;height:46px;border-radius:var(--radius-card);display:grid;place-items:center;flex:none; color:#fff9e8;background:linear-gradient(155deg,#547454,#2f5438);font-size:22px;font-weight:950; box-shadow:0 8px 20px rgba(44,84,56,.18),inset 0 0 0 1px rgba(255,255,255,.16); } body.yekfi-signature .delight-first-value-copy small{display:block;color:#8d7130;font-weight:900;letter-spacing:.01em;margin-bottom:3px} body.yekfi-signature .delight-first-value-copy h2{margin:0;color:var(--ux19-ink);font-size:clamp(21px,5.5vw,28px);line-height:1.25} body.yekfi-signature .delight-first-value-copy p{margin:7px 0 0;color:#526158;line-height:1.75} body.yekfi-signature .delight-first-value-proof{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} body.yekfi-signature .delight-first-value-proof span{ padding:6px 9px;border-radius:var(--radius-pill);border:1px solid rgba(57,92,63,.11);background:rgba(255,255,255,.64); color:#43564a;font-size:11px;font-weight:800 } body.yekfi-signature .delight-first-value-proof span:before{content:"✓ ";color:#477250;font-weight:950} body.yekfi-signature .delight-first-value-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px} body.yekfi-signature .delight-first-value-actions .sig-btn{min-height:46px} /* Weekly closeout: reflective, factual, and action-oriented */ body.yekfi-signature .delight-week-closeout{ margin-top:20px;padding:18px;border-radius:var(--radius-hero);border:1px solid rgba(56,83,59,.13); background:linear-gradient(160deg,rgba(248,250,244,.98),rgba(242,236,218,.90)); box-shadow:0 10px 28px rgba(37,52,40,.07) } body.yekfi-signature .delight-closeout-head{display:flex;gap:12px;align-items:flex-start} body.yekfi-signature .delight-closeout-head>span{ width:42px;height:42px;display:grid;place-items:center;border-radius:var(--radius-card);background:#355a3d;color:#f2d987;font-size:20px;flex:none } body.yekfi-signature .delight-closeout-head small{color:#7e6b3a;font-weight:850} body.yekfi-signature .delight-closeout-head h2{margin:2px 0 4px;color:var(--ux19-ink);font-size:21px;line-height:1.35} body.yekfi-signature .delight-closeout-head p{margin:0;color:#59685e;line-height:1.65;font-size:13px} body.yekfi-signature .delight-closeout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0 12px} body.yekfi-signature .delight-closeout-grid span{min-width:0;padding:10px;border-radius:var(--radius-card);background:rgba(255,255,255,.72);border:1px solid rgba(57,82,59,.09)} body.yekfi-signature .delight-closeout-grid small{display:block;color:#778179;font-size:10px;font-weight:750;margin-bottom:3px} body.yekfi-signature .delight-closeout-grid b{display:block;color:#304236;font-size:12px;line-height:1.45;overflow-wrap:anywhere} body.yekfi-signature .delight-closeout-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px} body.yekfi-signature .delight-closeout-actions .sig-btn{min-height:46px} /* Shopping completion sheet: reward with real evidence, no fake savings */ body.yekfi-signature .delight-complete-sheet{text-align:center;padding:2px 0 4px} body.yekfi-signature .delight-complete-mark{ width:68px;height:68px;border-radius:var(--radius-hero);margin:2px auto 12px;display:grid;place-items:center; background:linear-gradient(155deg,#5d7f5d,#31583b);color:#fff8df;font-size:34px;font-weight:950; box-shadow:0 14px 34px rgba(42,80,53,.20),inset 0 0 0 1px rgba(255,255,255,.20) } body.yekfi-signature .delight-complete-sheet>small{color:#927532;font-weight:900} body.yekfi-signature .delight-complete-sheet h2{margin:3px 0 7px;font-size:27px;color:var(--ux19-ink)} body.yekfi-signature .delight-complete-sheet>p{margin:0 auto 14px;max-width:38ch;color:#5c695f;line-height:1.7} body.yekfi-signature .delight-complete-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0;text-align:start} body.yekfi-signature .delight-complete-grid span{padding:11px;border-radius:var(--radius-card);background:#fbf7ec;border:1px solid rgba(80,91,73,.10)} body.yekfi-signature .delight-complete-grid small{display:block;color:#777f78;font-size:10px;font-weight:750} body.yekfi-signature .delight-complete-grid b{display:block;margin-top:3px;color:#2f4436;font-size:14px} body.yekfi-signature .delight-complete-note{padding:10px 12px;border-radius:var(--radius-card);margin:10px 0 13px;text-align:start;font-size:12px;line-height:1.6} body.yekfi-signature .delight-complete-note.good{background:#edf5eb;color:#315c3b;border:1px solid rgba(49,92,59,.13)} body.yekfi-signature .delight-complete-note.warn{background:#fbf3df;color:#765c1d;border:1px solid rgba(181,139,44,.16)} body.yekfi-signature .delight-complete-actions{display:grid;gap:7px} /* Quiet emotional pulse — reinforces success without confetti or obstruction */ body.yekfi-signature[data-delight-pulse] .topbar:after{ content:"";position:absolute;inset-inline:18%;bottom:-1px;height:2px;border-radius:var(--radius-pill); background:linear-gradient(90deg,transparent,#d2aa45,transparent);animation:ux19-pulse .82s ease-out both;pointer-events:none } body.yekfi-signature[data-delight-pulse="liked"] .topbar:after, body.yekfi-signature[data-delight-pulse="complete"] .topbar:after{background:linear-gradient(90deg,transparent,#6f976e,#d2aa45,transparent)} @keyframes ux19-pulse{0%{opacity:0;transform:scaleX(.3)}35%{opacity:1}100%{opacity:0;transform:scaleX(1.15)}} /* Make positive feedback visibly intentional without becoming gamified */ body.yekfi-signature .acceptance-grid button{transition:transform .15s ease,box-shadow .18s ease,border-color .18s ease} body.yekfi-signature .acceptance-grid button:active{transform:scale(.975)} body.yekfi-signature .acceptance-grid button:first-child{border-color:rgba(64,105,67,.20);background:linear-gradient(180deg,#fbfdf8,#eff6eb)} @media(max-width:560px){ body.yekfi-signature .delight-first-value{grid-template-columns:42px 1fr;padding:15px;gap:10px;border-radius:var(--radius-hero)} body.yekfi-signature .delight-first-value-mark{width:42px;height:42px;border-radius:var(--radius-card)} body.yekfi-signature .delight-first-value-actions, body.yekfi-signature .delight-closeout-actions{grid-template-columns:1fr} body.yekfi-signature .delight-closeout-grid{grid-template-columns:1fr 1fr} body.yekfi-signature .delight-closeout-grid span:last-child{grid-column:1/-1} body.yekfi-signature .delight-complete-grid{grid-template-columns:1fr 1fr} body.yekfi-signature .delight-complete-grid span:last-child:nth-child(3){grid-column:1/-1} } @media(max-width:360px){ body.yekfi-signature .delight-first-value-copy h2{font-size:20px} body.yekfi-signature .delight-first-value-proof{gap:4px} body.yekfi-signature .delight-first-value-proof span{font-size:10px;padding:5px 7px} body.yekfi-signature .delight-closeout-grid{grid-template-columns:1fr} body.yekfi-signature .delight-closeout-grid span:last-child{grid-column:auto} } @media(prefers-reduced-motion:reduce){ body.yekfi-signature[data-delight-pulse] .topbar:after{animation:none;opacity:0} } @media(prefers-contrast:more){ body.yekfi-signature :is(.delight-first-value,.delight-week-closeout,.delight-complete-grid span){border-color:#5e6d61} body.yekfi-signature .delight-first-value-copy p, body.yekfi-signature .delight-closeout-head p{color:#3c493f} } /* ===== field-ux-v1064.css ===== */ /* YEKFI v10.6.4 — RC20 Field UX Fixes Field observations only. No planning/business logic changes. */ :root{--yk-field-line:rgba(46,77,43,.25);--yk-field-line-strong:rgba(46,77,43,.38);--yk-field-gold:rgba(212,175,55,.84)} /* Header: symbol is intentionally dominant beside YEKFI. Bottom corners only. */ body.yekfi-signature .topbar{ border-radius:0 0 26px 26px; border-top:0;border-inline:0; border-bottom:1px solid rgba(46,77,43,.18); overflow:visible; } body.yekfi-signature .topbar>.brand{gap:10px;min-width:0;overflow:visible} body.yekfi-signature .brand-symbol-large{ display:block;width:88px;height:88px;min-width:88px;flex:0 0 88px; object-fit:contain;filter:drop-shadow(0 7px 13px rgba(35,46,28,.14)); } body.yekfi-signature .brand-copy-field{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0} body.yekfi-signature .brand-wordmark-field{display:block;width:112px;height:auto;max-height:34px;object-fit:contain;object-position:left center} body.yekfi-signature .brand-copy-field .brand-tagline-ar{font-size:10.8px;color:#566557;font-weight:780;line-height:1.2} /* Field feedback: sharper list/option boundaries without turning the UI heavy. */ body.yekfi-signature :is( .new-plan-options>button,.saved-plan-row,.option,.cuisine-card,.budget-policy-card, .appearance-bg-card,.settings-appearance-entry,.strategic-goal-card,.stock-food-row, .choice-row,.shopping-domains button,.trust-card ){border-width:1px;border-style:solid;border-color:var(--yk-field-line);box-shadow:0 5px 14px rgba(37,54,34,.045)} body.yekfi-signature :is(.new-plan-options>button,.saved-plan-row,.option,.cuisine-card,.budget-policy-card):hover{border-color:var(--yk-field-line-strong)} body.yekfi-signature :is(.option.selected,.cuisine-card.selected,.budget-policy-card.selected,.appearance-bg-card.selected,.shopping-domains button.active){border:1.35px solid var(--yk-field-gold);box-shadow:inset 0 0 0 .45px rgba(46,77,43,.13),0 7px 17px rgba(37,54,34,.06)} /* New plan: all choices share one component system; recommendation is keyline/badge only. */ body.yekfi-signature .new-plan-name-field{margin:0 0 12px;padding:12px 13px;border:1px solid var(--yk-field-line);border-radius:var(--radius-card);background:#FFFEFA} body.yekfi-signature .new-plan-name-field label{display:block;font-size:12.5px;font-weight:900;color:#29442E;margin-bottom:7px} body.yekfi-signature .new-plan-name-field input{width:100%;min-height:48px;background:#fff;color:#243327;border:1px solid rgba(46,77,43,.28)} body.yekfi-signature .new-plan-name-field small{display:block;margin-top:6px;font-size:11px;line-height:1.5;color:#647066} body.yekfi-signature .new-plan-options{gap:9px} body.yekfi-signature .new-plan-options>button{position:relative;grid-template-columns:44px minmax(0,1fr);min-height:72px;padding:11px 12px;border-radius:var(--radius-card);background:#FFFEFA;color:#26382A} body.yekfi-signature .new-plan-options>button>span{background:#F2EEE3;color:#355A3B;border:1px solid rgba(46,77,43,.11)} body.yekfi-signature .new-plan-options>button b{color:#26382A;font-size:14px} body.yekfi-signature .new-plan-options>button small{color:#617064;font-size:11.7px} body.yekfi-signature .new-plan-options>button.recommended{border:1.35px solid var(--yk-field-gold);background:linear-gradient(180deg,#FFFEFA,#FCF8EC)} body.yekfi-signature .new-plan-options>button.recommended em{position:absolute;inset-inline-start:10px;top:9px;font-style:normal;font-size:9.5px;font-weight:900;color:#315A38;background:#F2E6BD;border:1px solid rgba(212,175,55,.46);border-radius:var(--radius-pill);padding:3px 7px} /* Saved plan names are first-class editable data. */ body.yekfi-signature .saved-plan-list{display:grid;gap:10px} body.yekfi-signature .saved-plan-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border-radius:var(--radius-card);background:#FFFEFA} body.yekfi-signature .saved-plan-meta{min-width:0}.saved-plan-meta small{display:block;color:#68736A;font-size:10.5px;margin-bottom:5px} body.yekfi-signature .saved-plan-name-input{width:100%;min-height:44px;padding:8px 10px;border-radius:var(--radius-control);background:#fff;color:#243327;font-weight:850} body.yekfi-signature .saved-plan-row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} body.yekfi-signature .saved-plan-row-actions button{min-height:44px;padding:7px 10px;border-radius:var(--radius-control);border:1px solid rgba(46,77,43,.20);background:#F7F4E9;color:#29442E;font:inherit;font-size:11px;font-weight:850} @media(max-width:899px){ body.yekfi-signature .brand-symbol-large{width:78px;height:78px;min-width:78px;flex-basis:78px} body.yekfi-signature .brand-wordmark-field{width:102px;max-height:31px} } @media(max-width:560px){ :root{--yk-header-offset:142px} body.yekfi-signature .topbar{grid-template-rows:70px 54px;min-height:142px;border-radius:0 0 22px 22px} body.yekfi-signature .content{padding-top:calc(142px + env(safe-area-inset-top) + 10px)} body.yekfi-signature .brand-symbol-large{width:70px;height:70px;min-width:70px;flex-basis:70px} body.yekfi-signature .brand-wordmark-field{width:92px;max-height:28px} body.yekfi-signature .brand-copy-field .brand-tagline-ar{font-size:9.6px} body.yekfi-signature .saved-plan-row{grid-template-columns:1fr} body.yekfi-signature .saved-plan-row-actions{justify-content:stretch}.saved-plan-row-actions button{flex:1} } @media(max-width:350px){ body.yekfi-signature .memo-date-grid{grid-template-columns:1fr;} body.yekfi-signature .brand-symbol-large{width:64px;height:64px;min-width:64px;flex-basis:64px} body.yekfi-signature .brand-wordmark-field{width:82px} body.yekfi-signature .brand-copy-field .brand-tagline-ar{font-size:8.8px} } /* ===== household-board-v1067.css ===== */ /* YEKFI v10.6.8 compatibility — Household Personal Products + Home Board Consumer-layer only. No planning/budget/nutrition contracts are modified. */ body.yekfi-signature .household-personal-products, body.yekfi-signature .household-board-preview{min-width:0} body.yekfi-signature .user-products-card{ border:1px solid rgba(184,145,66,.30);border-radius:var(--radius-hero);padding:12px; background:linear-gradient(145deg,rgba(255,252,241,.98),rgba(247,249,242,.98)); box-shadow:0 10px 26px rgba(37,54,34,.07);overflow:hidden } body.yekfi-signature .user-product-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:stretch;padding:9px 0;border-bottom:1px solid rgba(46,77,43,.09)} body.yekfi-signature .user-product-row:last-child{border-bottom:0} body.yekfi-signature .user-product-main{min-width:0;border:0;background:transparent;text-align:right;padding:4px 3px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:inherit} body.yekfi-signature .user-product-main>span{min-width:0;display:grid;gap:3px} body.yekfi-signature .user-product-main b{font-size:14px;color:var(--yk-forest-950,#19301f);overflow-wrap:anywhere} body.yekfi-signature .user-product-main small{font-size:11px;color:var(--yk-ink-soft,#6c7168);line-height:1.45;overflow-wrap:anywhere} body.yekfi-signature .user-product-main em{font-style:normal;font-size:11px;white-space:nowrap;color:#6d5725;background:#fff8df;border:1px solid rgba(184,145,66,.22);padding:5px 8px;border-radius:var(--radius-pill)} body.yekfi-signature .user-product-done{border:1px solid rgba(46,77,43,.17);background:#fff;color:var(--yk-forest-900,#25412a);border-radius:var(--radius-card);padding:0 12px;min-height:44px;display:inline-flex;gap:5px;align-items:center;justify-content:center;font-weight:700} body.yekfi-signature .user-product-done .ui-svg{width:15px;height:15px} body.yekfi-signature .user-products-empty{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 3px} body.yekfi-signature .user-products-empty>span:first-child{width:38px;height:38px;border-radius:var(--radius-card);display:grid;place-items:center;background:#fff3cd;color:#705714;font-size:24px;font-weight:300} body.yekfi-signature .user-products-empty>span:nth-child(2){display:grid;gap:3px;min-width:0} body.yekfi-signature .user-products-empty b{font-size:13.5px;color:var(--yk-forest-950,#19301f)} body.yekfi-signature .user-products-empty small{font-size:10.8px;line-height:1.45;color:var(--yk-ink-soft,#6c7168)} body.yekfi-signature .user-products-empty button{border:0;background:var(--yk-forest-900,#294b31);color:#fff;padding:10px 12px;border-radius:var(--radius-card);white-space:nowrap;font-weight:700} body.yekfi-signature .user-products-truth{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(46,77,43,.13);display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:10.5px;color:var(--yk-ink-soft,#6c7168)} body.yekfi-signature .user-products-truth b{color:#6d5725;font-size:10.5px;text-align:left} body.yekfi-signature .custom-product-intro,.household-entry-intro,.household-board-hero{display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;align-items:center;padding:13px;border-radius:var(--radius-card);background:linear-gradient(135deg,#f6f1df,#f8faf4);border:1px solid rgba(184,145,66,.22);margin-bottom:14px} body.yekfi-signature .custom-product-intro>span:first-child,.household-entry-intro>span:first-child,.household-board-hero>span:first-child{width:40px;height:40px;border-radius:var(--radius-card);background:#fff;display:grid;place-items:center;color:var(--yk-forest-900,#294b31);font-size:22px;box-shadow:0 4px 12px rgba(37,54,34,.07)} body.yekfi-signature .custom-product-intro>span:last-child,.household-entry-intro>span:last-child,.household-board-hero>span:last-child{display:grid;gap:3px;min-width:0} body.yekfi-signature .custom-product-intro b,.household-entry-intro b,.household-board-hero b{font-size:14px;color:var(--yk-forest-950,#19301f)} body.yekfi-signature .custom-product-intro small,.household-entry-intro small,.household-board-hero small{font-size:11px;color:var(--yk-ink-soft,#6c7168);line-height:1.45} body.yekfi-signature .form-grid .full-span{grid-column:1/-1} body.yekfi-signature .custom-product-now{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;align-items:start;padding:12px 13px;border-radius:var(--radius-card);border:1px solid rgba(46,77,43,.14);background:#f8faf5;margin:12px 0 14px;cursor:pointer} body.yekfi-signature .custom-product-now input{width:20px;height:20px;margin-top:2px;accent-color:var(--yk-forest-900,#294b31)} body.yekfi-signature .custom-product-now span{display:grid;gap:3px} body.yekfi-signature .custom-product-now b{font-size:13px;color:var(--yk-forest-950,#19301f)} body.yekfi-signature .custom-product-now small{font-size:10.8px;line-height:1.45;color:var(--yk-ink-soft,#6c7168)} body.yekfi-signature .household-board-preview-card{border:1px solid rgba(46,77,43,.15);border-radius:var(--radius-hero);padding:14px;background:linear-gradient(145deg,#edf3ea,#fbfaf1);box-shadow:0 10px 25px rgba(37,54,34,.065);display:grid;gap:13px;min-width:0} body.yekfi-signature .household-board-preview-copy{display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;align-items:center;min-width:0} body.yekfi-signature .household-board-icon{width:42px;height:42px;border-radius:var(--radius-card);background:#fff;display:grid;place-items:center;color:var(--yk-forest-900,#294b31);box-shadow:0 4px 13px rgba(37,54,34,.08)} body.yekfi-signature .household-board-icon .ui-svg{width:21px;height:21px} body.yekfi-signature .household-board-preview-copy>span:last-child{display:grid;gap:2px;min-width:0} body.yekfi-signature .household-board-preview-copy small{font-size:10px;color:#7a725d} body.yekfi-signature .household-board-preview-copy b{font-size:15px;color:var(--yk-forest-950,#19301f);overflow-wrap:anywhere} body.yekfi-signature .household-board-preview-copy em{font-style:normal;font-size:10.8px;color:var(--yk-ink-soft,#6c7168)} body.yekfi-signature .household-board-preview-actions{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:7px} body.yekfi-signature .household-board-preview-actions button{min-width:0;min-height:42px;border-radius:var(--radius-card);border:1px solid rgba(46,77,43,.13);background:#fff;color:var(--yk-forest-900,#294b31);font-weight:700;font-size:11.5px} body.yekfi-signature .household-board-preview-actions button.primary{background:var(--yk-forest-900,#294b31);color:#fff;border-color:transparent} body.yekfi-signature .household-board-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 13px} body.yekfi-signature .household-board-stats>span{display:grid;gap:2px;padding:10px;border-radius:var(--radius-card);background:#f8f9f5;border:1px solid rgba(46,77,43,.10);text-align:center} body.yekfi-signature .household-board-stats small{font-size:9.5px;color:var(--yk-ink-soft,#6c7168)} body.yekfi-signature .household-board-stats b{font-size:18px;color:var(--yk-forest-950,#19301f)} body.yekfi-signature .household-board-create{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px} body.yekfi-signature .household-board-create button{min-height:46px;border-radius:var(--radius-card);border:1px solid rgba(46,77,43,.15);background:#fff;color:var(--yk-forest-900,#294b31);display:flex;gap:7px;align-items:center;justify-content:center;font-weight:800} body.yekfi-signature .household-board-create button:first-child{background:var(--yk-forest-900,#294b31);color:#fff;border-color:transparent} body.yekfi-signature .household-board-list{display:grid;gap:8px} body.yekfi-signature .household-board-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px;border-radius:var(--radius-card);background:#fff;border:1px solid rgba(46,77,43,.11);min-width:0} body.yekfi-signature .household-board-row.important{border-color:rgba(184,145,66,.55);box-shadow:inset 3px 0 0 rgba(184,145,66,.75)} body.yekfi-signature .household-board-kind{font-size:9.5px;font-weight:800;padding:5px 7px;border-radius:var(--radius-pill);background:#edf3ea;color:var(--yk-forest-900,#294b31);white-space:nowrap} body.yekfi-signature .household-board-row.note-kind .household-board-kind{background:#fff3d5;color:#745b18} body.yekfi-signature .household-board-row-copy{display:grid;gap:3px;min-width:0} body.yekfi-signature .household-board-row-copy b{font-size:12.5px;color:var(--yk-forest-950,#19301f);overflow-wrap:anywhere} body.yekfi-signature .household-board-row-copy small{font-size:9.8px;color:var(--yk-ink-soft,#6c7168);line-height:1.4;overflow-wrap:anywhere} body.yekfi-signature .household-board-row-actions{display:flex;gap:5px;align-items:center} body.yekfi-signature .household-board-row-actions button{min-height:38px;border:1px solid rgba(46,77,43,.14);background:#f7faf5;color:var(--yk-forest-900,#294b31);border-radius:var(--radius-control);padding:0 9px;font-size:10.5px;font-weight:700;display:flex;align-items:center;gap:4px} body.yekfi-signature .household-board-row-actions .quiet{width:38px;padding:0;justify-content:center;background:#fff;color:#8b716d;font-size:18px} body.yekfi-signature .household-board-empty{padding:22px 12px;text-align:center;display:grid;place-items:center;gap:4px;color:var(--yk-ink-soft,#6c7168)} body.yekfi-signature .household-board-empty>span{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-pill);background:#edf3ea;color:var(--yk-forest-900,#294b31);font-weight:900} body.yekfi-signature .household-board-empty b{color:var(--yk-forest-950,#19301f);font-size:13px} body.yekfi-signature .household-board-empty small{font-size:10.5px} body.yekfi-signature .store-custom-needs{margin:14px 10px 95px;padding:11px;border:1px solid rgba(184,145,66,.33);border-radius:var(--radius-card);background:#fffaf0} body.yekfi-signature .store-custom-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px} body.yekfi-signature .store-custom-head>span{display:grid;gap:2px} body.yekfi-signature .store-custom-head b{font-size:13px;color:var(--yk-forest-950,#19301f)} body.yekfi-signature .store-custom-head small{font-size:9.5px;color:#796e54} body.yekfi-signature .store-custom-head button{min-height:38px;border:0;border-radius:var(--radius-control);background:#fff;color:var(--yk-forest-900,#294b31);padding:0 11px;font-weight:800} @media(max-width:520px){ body.yekfi-signature .user-products-empty{grid-template-columns:38px minmax(0,1fr)} body.yekfi-signature .user-products-empty button{grid-column:1/-1;width:100%} body.yekfi-signature .user-products-truth{align-items:flex-start;flex-direction:column} body.yekfi-signature .household-board-preview-actions{grid-template-columns:1fr 1fr} body.yekfi-signature .household-board-preview-actions .primary{grid-column:1/-1} body.yekfi-signature .household-board-row{grid-template-columns:auto minmax(0,1fr)} body.yekfi-signature .household-board-row-actions{grid-column:1/-1;justify-content:flex-end} body.yekfi-signature .household-board-create{grid-template-columns:1fr} body.yekfi-signature .form-grid .full-span{grid-column:auto} } @media(max-width:370px){ body.yekfi-signature .household-board-stats{gap:5px} body.yekfi-signature .household-board-stats>span{padding:8px 5px} body.yekfi-signature .user-product-row{grid-template-columns:minmax(0,1fr)} body.yekfi-signature .user-product-done{width:100%} } /* ===== family-plan-studio-v1068.css ===== */ /* YEKFI v10.6.8 RC24 — Family Accounts + Full Plan Studio */ .plan-studio{display:flex;flex-direction:column;gap:14px;min-width:0}.plan-studio-progress{position:sticky;top:0;z-index:3;padding:12px 14px;border:1px solid rgba(112,94,40,.16);border-radius:var(--radius-card);background:rgba(255,252,244,.96);backdrop-filter:blur(10px)}.plan-studio-progress>div{display:flex;justify-content:space-between;gap:12px}.plan-studio-progress span{display:flex;flex-direction:column;gap:2px}.plan-studio-progress small,.plan-studio-help,.manual-cuisine-title>small{font-size:12px;color:var(--muted,#716f66);line-height:1.5}.plan-studio-progress b{font-size:14px}.plan-studio-progress>i{display:block;height:5px;background:rgba(74,93,54,.12);border-radius:var(--radius-pill);overflow:hidden;margin-top:9px}.plan-studio-progress>i>em{display:block;height:100%;background:linear-gradient(90deg,#7d7b38,#b99c4a);border-radius:inherit;transition:width .22s ease}.plan-studio-stack{display:flex;flex-direction:column;gap:12px}.plan-studio-step{border:1px solid rgba(74,93,54,.15);border-radius:var(--radius-card);background:rgba(255,255,255,.78);overflow:hidden;box-shadow:0 8px 28px rgba(47,49,34,.045)}.plan-studio-step-head-static,.plan-studio-step-head{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;text-align:right;padding:14px;border:0;background:linear-gradient(180deg,rgba(247,246,236,.94),rgba(255,255,255,.92))}.plan-studio-step-head-static>span,.plan-studio-step-head>span{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-control);background:#465537;color:#fff;font-weight:800}.plan-studio-step-head-static div,.plan-studio-step-head div{min-width:0;display:flex;flex-direction:column;gap:2px}.plan-studio-step-head-static b,.plan-studio-step-head b{font-size:15px}.plan-studio-step-head-static small,.plan-studio-step-head small{font-size:12px;color:var(--muted,#716f66)}.plan-studio-step-head-static>em{font-style:normal;color:#a78935;font-weight:900}.plan-studio-step-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:12px}.plan-mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.plan-mode-buttons button{min-height:112px;border:1px solid rgba(74,93,54,.14);border-radius:var(--radius-card);background:#fff;padding:13px;text-align:right;display:flex;flex-direction:column;gap:5px;justify-content:center}.plan-mode-buttons button>span{font-size:23px}.plan-mode-buttons button b{font-size:15px}.plan-mode-buttons button small{font-size:12px;line-height:1.5;color:var(--muted,#716f66)}.plan-mode-buttons button.selected,.plan-cuisine-chip.selected,.manual-cuisine-strip button.active{border-color:#b59a45;box-shadow:inset 0 0 0 1px rgba(181,154,69,.48),0 5px 16px rgba(110,91,32,.08);background:#fffdf6}.plan-cuisine-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.plan-cuisine-chip{min-height:58px;border:1px solid rgba(74,93,54,.14);border-radius:var(--radius-card);background:#fff;padding:9px 10px;display:flex;align-items:center;gap:8px;text-align:right}.plan-cuisine-chip span{font-size:20px}.plan-cuisine-chip b{font-size:13px}.plan-all-cuisines{min-height:46px;border:1px dashed rgba(181,154,69,.55);border-radius:var(--radius-card);background:rgba(246,238,209,.28);font-weight:750}.plan-studio-budget{max-width:none}.manual-day-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.manual-day-strip button{min-width:0;padding:7px 3px;border:1px solid rgba(74,93,54,.14);border-radius:var(--radius-control);background:#fff;display:flex;flex-direction:column;align-items:center;gap:1px}.manual-day-strip button small{font-size:9px;color:var(--muted,#716f66)}.manual-day-strip button b{font-size:14px}.manual-day-strip button em{font-size:9px;font-style:normal;color:var(--muted,#716f66)}.manual-day-strip button.active,.manual-slot-strip button.active{border-color:#b59a45;box-shadow:inset 0 0 0 1px rgba(181,154,69,.42)}.manual-day-strip button.complete,.manual-slot-strip button.complete{background:#f5f7ed}.manual-slot-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.manual-slot-strip button{position:relative;min-width:0;min-height:66px;border:1px solid rgba(74,93,54,.14);border-radius:var(--radius-card);background:#fff;padding:7px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.manual-slot-strip button>span{font-size:17px}.manual-slot-strip button b{font-size:10px;white-space:normal}.manual-slot-strip button em{position:absolute;top:4px;left:5px;font-size:9px;font-style:normal;color:#61754d}.manual-cuisine-picker{border-radius:var(--radius-card);background:#f8f7ef;padding:11px;display:flex;flex-direction:column;gap:9px}.manual-cuisine-title{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.manual-cuisine-title>span{display:flex;flex-direction:column;gap:2px}.manual-cuisine-title b{font-size:14px}.manual-cuisine-strip{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}.manual-cuisine-strip::-webkit-scrollbar{display:none}.manual-cuisine-strip button{flex:0 0 auto;min-width:112px;min-height:55px;border:1px solid rgba(74,93,54,.14);border-radius:var(--radius-card);background:#fff;padding:8px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:'icon name' 'quota quota';align-items:center;gap:3px 6px;text-align:right}.manual-cuisine-strip button span{grid-area:icon}.manual-cuisine-strip button b{grid-area:name;font-size:11px}.manual-cuisine-strip button em{grid-area:quota;font-size:9px;font-style:normal;color:var(--muted,#716f66)}.manual-cuisine-strip button.quota-full{opacity:.45}.manual-current-slot{display:grid;grid-template-columns:1fr 1fr;gap:8px}.manual-current-slot>span{background:#fff;border:1px solid rgba(74,93,54,.12);border-radius:var(--radius-card);padding:9px;display:flex;flex-direction:column;gap:2px;min-width:0}.manual-current-slot small{font-size:10px;color:var(--muted,#716f66)}.manual-current-slot b{font-size:12px;white-space:normal}.plan-library-search{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px}.plan-library-search>span{font-size:21px;color:#73765f}.plan-library-head{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin:2px 0 8px}.plan-library-head span{display:flex;flex-direction:column;gap:2px}.plan-library-head b{font-size:14px}.plan-library-head small{font-size:11px;color:var(--muted,#716f66)}.plan-library-head em{font-size:10px;font-style:normal;color:#77642a;background:#f4ebca;border-radius:var(--radius-pill);padding:5px 8px}.plan-recipe-list{display:flex;flex-direction:column;gap:7px}.plan-recipe-card{width:100%;min-height:62px;border:1px solid rgba(74,93,54,.13);border-radius:var(--radius-card);background:#fff;padding:10px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:right}.plan-recipe-card>span{min-width:0;display:flex;flex-direction:column;gap:3px}.plan-recipe-card b{font-size:13px}.plan-recipe-card small{font-size:10px;color:var(--muted,#716f66);white-space:normal}.plan-recipe-card>em{flex:0 0 auto;font-size:10px;font-style:normal;font-weight:800;color:#65734f}.plan-recipe-card.selected{border-color:#b59a45;background:#fffaf0}.plan-recipe-card.blocked,.plan-recipe-card.used{opacity:.46}.manual-budget-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.manual-budget-summary>span{border:1px solid rgba(74,93,54,.12);background:#fff;border-radius:var(--radius-card);padding:9px;display:flex;flex-direction:column;gap:2px}.manual-budget-summary small{font-size:9px;color:var(--muted,#716f66)}.manual-budget-summary b{font-size:12px}.manual-budget-summary .risk{border-color:rgba(150,70,55,.35);background:#fff7f4}.plan-studio-loading{min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}.grocery-requests-panel{border-top:1px solid rgba(74,93,54,.08)}.grocery-request-list{display:flex;flex-direction:column;gap:7px}.grocery-request-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid rgba(74,93,54,.12);border-radius:var(--radius-card);padding:10px}.grocery-request-row.important{border-color:rgba(181,154,69,.6)}.grocery-request-row>span{display:flex;flex-direction:column;gap:2px;min-width:0}.grocery-request-row b{font-size:13px}.grocery-request-row small{font-size:10px;color:var(--muted,#716f66)}.grocery-request-row>div{display:flex;gap:5px}.grocery-request-row button,.grocery-request-foot button{min-height:36px;border-radius:var(--radius-control);border:1px solid rgba(74,93,54,.13);background:#f8f8f2;padding:5px 9px}.grocery-request-empty{padding:15px;border:1px dashed rgba(74,93,54,.2);border-radius:var(--radius-card);display:flex;flex-direction:column;gap:3px}.grocery-request-empty small{font-size:11px;color:var(--muted,#716f66);line-height:1.55}.grocery-request-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;font-size:10px;color:var(--muted,#716f66)}.grocery-kind{background:rgba(244,238,210,.42)} @media(max-width:430px){.plan-mode-buttons{grid-template-columns:1fr}.plan-cuisine-grid{grid-template-columns:1fr 1fr}.manual-day-strip{gap:3px}.manual-slot-strip{gap:3px}.manual-slot-strip button{min-height:60px}.manual-current-slot{grid-template-columns:1fr}.manual-budget-summary{grid-template-columns:1fr 1fr}.manual-budget-summary>span:last-child{grid-column:1/-1}.grocery-request-row{align-items:flex-start;flex-direction:column}.grocery-request-row>div{width:100%}.grocery-request-row>div button{flex:1}} @media(prefers-reduced-motion:reduce){.plan-studio-progress>i>em{transition:none}} /* ===== consumer-clarity-v1069.css ===== */ /* YEKFI v10.6.9 — RC25 Iteration 1: Cognitive Load & Navigation Consumer-only overrides. No planning, nutrition, price or pantry-food semantics. */ :root{--yk-compact-header:64px;--yk-expanded-header:108px} /* Header: proud first impression, compact while consuming content. */ @media(max-width:560px){ body.yekfi-signature .topbar{ grid-template-rows:1fr; grid-template-columns:44px 108px minmax(0,1fr); grid-template-areas:"menu budget brand"; min-height:var(--yk-expanded-header);height:var(--yk-expanded-header); padding:max(8px,env(safe-area-inset-top)) 10px 8px; transition:min-height .18s ease,height .18s ease,padding .18s ease,box-shadow .18s ease; } body.yekfi-signature .topbar>.topbar-actions{display:block;grid-area:budget} body.yekfi-signature .topbar-new-plan{display:none} body.yekfi-signature .family-top-btn{display:none} body.yekfi-signature .brand-symbol-large{width:58px;height:58px;min-width:58px;flex-basis:58px;transition:.18s ease} body.yekfi-signature .brand-wordmark-field{width:84px;max-height:25px;transition:.18s ease} body.yekfi-signature .brand-copy-field .brand-tagline-ar{font-size:11px;line-height:1.25;transition:.18s ease} body.yekfi-signature .content{padding-top:14px;transition:padding-top .18s ease} body.yekfi-signature.header-compact .topbar{min-height:calc(var(--yk-compact-header) + env(safe-area-inset-top));height:calc(var(--yk-compact-header) + env(safe-area-inset-top));padding:max(5px,env(safe-area-inset-top)) 10px 5px;box-shadow:0 5px 18px rgba(40,55,41,.08)} body.yekfi-signature.header-compact .brand-symbol-large{width:42px;height:42px;min-width:42px;flex-basis:42px} body.yekfi-signature.header-compact .brand-wordmark-field{width:68px;max-height:20px} body.yekfi-signature.header-compact .brand-copy-field .brand-tagline-ar{display:none} body.yekfi-signature.header-compact .budget-pill small,body.yekfi-signature.header-compact .budget-pill em{display:none} body.yekfi-signature.header-compact .budget-pill{min-height:44px;padding:5px 8px} } /* Touch targets: internal quality bar is 44px on coarse pointers. */ @media(pointer:coarse){ body.yekfi-signature :is(button,[role="button"],.option,.filter-chip){min-height:44px} body.yekfi-signature :is(.round-step,.household-board-row-actions button,.household-board-preview-actions button,.store-custom-head button,.grocery-request-row button,.grocery-request-foot button,.saved-plan-row-actions button){min-height:44px} } /* Do not make important consumer copy microscopic. */ body.yekfi-signature :is(.household-board-preview-copy small,.household-board-row-actions button,.grocery-request-row small,.grocery-request-foot,.manual-budget-summary small,.saved-plan-meta small){font-size:11px;line-height:1.45} body.yekfi-signature .nav-btn{font-size:11px} /* Today: the bottom navigation already owns global destinations. */ body.yekfi-signature .sig-today-page .delight-meals-section{margin-top:12px} body.yekfi-signature .sig-today-page .delight-week-summary{margin-top:10px} /* Focus safety under sticky chrome. */ body.yekfi-signature :is(button,a,input,select,textarea,[tabindex]):focus-visible{scroll-margin-top:calc(var(--yk-compact-header) + env(safe-area-inset-top) + 16px);scroll-margin-bottom:110px} /* ===== plan-studio-agency-v1069.css ===== */ /* YEKFI v10.6.9 — RC25 Iteration 2: Plan Studio Agency & Staged Disclosure */ .plan-studio-progress .plan-autosave{display:block;margin-top:6px;font-size:11px;color:#65705f;text-align:end} .plan-studio-step.collapsed{background:rgba(250,250,245,.68);box-shadow:none} .plan-studio-step.collapsed .plan-studio-step-head-static{padding-block:11px;background:transparent} .plan-step-edit{min-height:44px;border:1px solid rgba(74,93,54,.16);background:#fff;border-radius:var(--radius-control);padding:0 12px;font-weight:800;color:#3c5b3d} .plan-mode-buttons.three{grid-template-columns:repeat(3,minmax(0,1fr))} .plan-mode-buttons button{position:relative} .plan-mode-buttons button.recommended em{position:absolute;top:8px;inset-inline-start:8px;font-size:10px;font-style:normal;border-radius:var(--radius-pill);padding:3px 7px;background:#f1e5b7;color:#4c5a32} .plan-assist-actions{display:grid;grid-template-columns:2fr 1fr 1fr;gap:7px} .plan-assist-actions button{min-height:46px;border:1px solid rgba(74,93,54,.15);border-radius:var(--radius-card);background:#fff;font-weight:800;padding:7px 9px} .plan-assist-actions button.primary{background:#38583d;color:#fff;border-color:#38583d} .plan-soft-guidance{display:flex;flex-direction:column;gap:5px;border:1px solid rgba(181,154,69,.24);background:#fffaf0;border-radius:var(--radius-card);padding:9px 11px} .plan-soft-guidance span{font-size:11px;line-height:1.55;color:#6b603e} .manual-cuisine-strip button{grid-template-areas:'icon name' 'quota quota'} .manual-cuisine-strip button em{font-size:11px} .manual-day-strip button small,.manual-day-strip button em,.manual-current-slot small,.plan-recipe-card small,.plan-recipe-card>em,.plan-library-head em{font-size:11px} @media(max-width:680px){.plan-mode-buttons.three{grid-template-columns:1fr}.plan-mode-buttons button{min-height:88px}.plan-assist-actions{grid-template-columns:1fr 1fr}.plan-assist-actions button.primary{grid-column:1/-1}} /* ===== onboarding-accessibility-v1069.css ===== */ /* RC25 Iteration 3 — onboarding, accessibility, large-household entry */ .rc25-three-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .rc25-three-modes button{position:relative;min-height:112px} .rc25-three-modes button em{position:absolute;inset-inline-start:10px;top:8px;font-size:11px;font-style:normal;font-weight:800;padding:3px 7px;border-radius:var(--radius-pill);background:var(--gold-soft,#f8edcf);color:var(--olive,#506335)} .rc25-profile-progress{display:grid;grid-template-columns:auto minmax(90px,1fr) auto;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line,#e2e5dc);border-radius:var(--radius-card);background:var(--surface,#fff)} .rc25-profile-progress span{display:flex;flex-direction:column}.rc25-profile-progress small{font-size:11px;opacity:.72}.rc25-profile-progress i{height:7px;border-radius:var(--radius-pill);overflow:hidden;background:rgba(80,99,53,.12)}.rc25-profile-progress i em{display:block;height:100%;background:currentColor;border-radius:inherit}.rc25-profile-progress strong{font-size:12px} .rc25-large-house-note{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:var(--radius-card);background:rgba(80,99,53,.07);border:1px solid rgba(80,99,53,.14)}.rc25-large-house-note small{font-size:12px;line-height:1.65} .rc25-profile-box{display:flex;flex-direction:column;gap:12px}.setup-profile-group{display:flex;flex-direction:column;gap:8px}.setup-profile-group+.setup-profile-group{padding-top:12px;border-top:1px solid var(--line,#e2e5dc)}.setup-profile-group-title{display:flex;justify-content:space-between;align-items:center}.setup-profile-group-title small{font-size:11px;opacity:.7} .rc25-profile-row{grid-template-columns:minmax(72px,1fr) minmax(98px,1fr) minmax(84px,.8fr);gap:8px}.rc25-profile-row .input{min-height:44px} .rc25-completion-hint{display:block;margin-top:7px;text-align:center;font-size:11px;line-height:1.5;opacity:.72} @media(max-width:720px){.rc25-three-modes{grid-template-columns:1fr}.rc25-three-modes button{min-height:76px}.rc25-profile-row{grid-template-columns:1fr 1fr}.rc25-profile-row>b{grid-column:1/-1}.rc25-profile-progress{grid-template-columns:auto 1fr auto}} @media(min-width:900px){.on-card{max-width:820px}.rc25-profile-box{max-height:min(56vh,560px);overflow:auto;padding-inline-end:4px}} @media (prefers-reduced-motion:reduce){.rc25-profile-progress i em{transition:none}} @media (pointer:coarse){.rc25-profile-row select,.rc25-profile-row input,.rc25-three-modes button{min-height:44px}} /* ===== adaptive-discovery-v1069.css ===== */ /* RC25 Iteration 4 — discovery, household IA, adaptive layouts */ .plan-library-filters{display:flex;gap:7px;overflow:auto;padding:2px 0 10px;scrollbar-width:none}.plan-library-filters::-webkit-scrollbar{display:none}.plan-library-filters button{min-height:40px;padding:8px 12px;border-radius:var(--radius-pill);border:1px solid rgba(80,99,53,.16);background:rgba(255,255,255,.72);white-space:nowrap;font-weight:750}.plan-library-filters button.active{border-color:rgba(201,151,50,.72);box-shadow:inset 0 0 0 1px rgba(201,151,50,.22);background:#fffaf0;color:#3c5635} .household-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 20px}.household-control-grid>button{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:82px;padding:12px;border:1px solid rgba(73,88,65,.13);border-radius:var(--radius-card);background:rgba(255,253,248,.9);text-align:right}.household-control-grid>button>span:first-child{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-card);background:rgba(80,99,53,.08)}.household-control-grid b,.household-control-grid small{display:block}.household-control-grid small{margin-top:3px;font-size:11px;line-height:1.45;opacity:.74}.household-control-grid em{font-style:normal;font-weight:900;color:#6e7b63} @media(max-width:720px){.household-control-grid{grid-template-columns:1fr}.household-control-grid>button{min-height:70px}} /* Wide screens: keep mobile mental model, but move the same four destinations into a rail. */ @media(min-width:1100px){ :root{--yk-prod-shell:1180px;--yk-prod-content:1080px} body.yekfi-signature .app-shell{max-width:1180px} body.yekfi-signature .content{max-width:1080px;padding-inline-start:118px;padding-bottom:36px} body.yekfi-signature .bottom-nav{direction:rtl;left:max(18px,calc((100vw - 1160px)/2));right:auto;top:112px;bottom:auto;width:94px;height:auto;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:var(--radius-hero)} body.yekfi-signature .bottom-nav .nav-btn{width:100%;min-height:70px;display:flex;flex-direction:column;justify-content:center;gap:4px} body.yekfi-signature .bottom-nav .nav-btn i{margin:0} body.yekfi-signature .sheet-panel{max-width:820px} body.yekfi-signature .universe-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(pointer:coarse){.plan-library-filters button,.household-control-grid>button{min-height:44px}} /* ===== release-hardening-v1069.css ===== */ /* RC25 Iteration 5 — release accessibility floor and wide-content safety */ body.yekfi-signature :is(.budget-pill small,.budget-pill em,.family-top-btn span,.sig-shop-main small,.sig-shop-main em,.sig-meal-main em,.tiny-muted,.microtag){font-size:11px;line-height:1.45} body.yekfi-signature :is(.content,.view,.sheet-panel,.on-card,.composer-shell){overflow-wrap:anywhere} @media(max-width:560px){body.yekfi-signature:not(.header-compact) .budget-pill em{display:none}} @media(pointer:coarse){body.yekfi-signature :is(.plan-library-filters button,.filter-chip,.universe-shortcuts button,.advanced-actions button){min-height:44px}} @media (prefers-reduced-motion:reduce){body.yekfi-signature *,body.yekfi-signature *::before,body.yekfi-signature *::after{scroll-behavior:auto;animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}} /* RC25 final accessibility sweep — consumer-facing microcopy floor */ body.yekfi-signature :is( .plan-mode-buttons button.recommended em, .manual-day-strip button small,.manual-day-strip button em, .manual-slot-strip button b,.manual-slot-strip button em, .manual-cuisine-strip button em,.manual-current-slot small, .plan-library-head em,.plan-recipe-card small,.plan-recipe-card>em, .manual-budget-summary small,.grocery-request-row small,.grocery-request-foot, .household-board-preview-copy small,.household-board-row-actions button ){font-size:11px;line-height:1.4} @media(pointer:coarse){body.yekfi-signature :is( .manual-day-strip button,.manual-slot-strip button,.manual-cuisine-strip button, .grocery-request-row button,.grocery-request-foot button, .household-board-preview-actions button,.household-board-row-actions button, .store-custom-head button ){min-height:44px}} /* ===== precision-interface-v1070.css ===== */ /* YEKFI v10.7.0 — RC26 Precision Interface Hardening Consumer presentation only. Header geometry, control rhythm, household/grocery differentiation, menu styling. */ :root{ --yk-rc26-header-desktop:88px; --yk-rc26-header-mobile:76px; --yk-rc26-header-mobile-compact:58px; --yk-control-gap:9px; } /* 1) HEADER GEOMETRY — fixed header must reserve its own space. */ body.yekfi-signature .content{ padding-top:calc(var(--yk-rc26-header-desktop) + env(safe-area-inset-top) + 18px); scroll-padding-top:calc(var(--yk-rc26-header-desktop) + env(safe-area-inset-top) + 16px); } body.yekfi-signature .topbar>.brand{ position:relative; transform:translateX(4px); } @media(max-width:899px){ body.yekfi-signature .content{ padding-top:calc(92px + env(safe-area-inset-top) + 16px); scroll-padding-top:calc(92px + env(safe-area-inset-top) + 14px); } } @media(max-width:560px){ body.yekfi-signature .topbar{ direction:ltr; grid-template-columns:44px 44px 92px minmax(0,1fr); grid-template-areas:"menu family budget brand"; grid-template-rows:1fr; min-height:calc(var(--yk-rc26-header-mobile) + env(safe-area-inset-top)); height:calc(var(--yk-rc26-header-mobile) + env(safe-area-inset-top)); padding:max(7px,env(safe-area-inset-top)) 8px 7px; gap:6px; align-items:center; } body.yekfi-signature .topbar>.round-icon{ grid-area:menu;width:44px;height:44px;min-width:44px;min-height:44px; } body.yekfi-signature .topbar>.family-top-btn{ grid-area:family;display:grid;width:44px;min-width:44px;min-height:44px; padding:3px;border-radius:var(--radius-card);place-items:center;align-content:center;gap:1px; } body.yekfi-signature .family-top-btn span{display:none} body.yekfi-signature .family-top-btn .ui-svg{width:22px;height:22px} body.yekfi-signature .topbar>.topbar-actions{ grid-area:budget;display:block;width:92px;min-width:0; } body.yekfi-signature .topbar-new-plan{display:none} body.yekfi-signature .budget-pill{ width:92px;min-width:92px;max-width:92px;min-height:46px; padding:5px 7px;border-radius:var(--radius-card);text-align:center; display:flex;flex-direction:column;align-items:center;justify-content:center; } body.yekfi-signature .budget-pill small{font-size:10px;line-height:1.1} body.yekfi-signature .budget-pill b{font-size:13.5px;line-height:1.15} body.yekfi-signature .budget-pill em{display:none} body.yekfi-signature .topbar>.brand{ grid-area:brand;justify-self:end;min-width:0;min-height:50px;gap:6px; transform:translateX(5px); } body.yekfi-signature .brand-symbol-large{ width:52px;height:52px;min-width:52px;flex-basis:52px; } body.yekfi-signature .brand-wordmark-field{width:72px;max-width:72px;max-height:22px} body.yekfi-signature .brand-copy-field .brand-tagline-ar{font-size:10.2px;line-height:1.15;white-space:nowrap} body.yekfi-signature .content{ padding-top:calc(var(--yk-rc26-header-mobile) + env(safe-area-inset-top) + 18px); scroll-padding-top:calc(var(--yk-rc26-header-mobile-compact) + env(safe-area-inset-top) + 16px); transition:none; } body.yekfi-signature.header-compact .topbar{ min-height:calc(var(--yk-rc26-header-mobile-compact) + env(safe-area-inset-top)); height:calc(var(--yk-rc26-header-mobile-compact) + env(safe-area-inset-top)); padding:max(5px,env(safe-area-inset-top)) 8px 5px; } body.yekfi-signature.header-compact .brand-symbol-large{width:42px;height:42px;min-width:42px;flex-basis:42px} body.yekfi-signature.header-compact .brand-wordmark-field{width:64px;max-width:64px;max-height:19px} body.yekfi-signature.header-compact .brand-copy-field .brand-tagline-ar{display:none} body.yekfi-signature.header-compact .budget-pill{min-height:44px;padding:4px 6px} } @media(max-width:350px){ body.yekfi-signature .memo-date-grid{grid-template-columns:1fr;} body.yekfi-signature .topbar{grid-template-columns:44px 44px 80px minmax(0,1fr);padding-inline:6px;gap:5px} body.yekfi-signature .topbar>.topbar-actions{width:80px} body.yekfi-signature .budget-pill{width:80px;min-width:80px;max-width:80px} body.yekfi-signature .budget-pill small{display:none} body.yekfi-signature .brand-symbol-large{width:46px;height:46px;min-width:46px;flex-basis:46px} body.yekfi-signature .brand-wordmark-field{width:60px;max-width:60px} body.yekfi-signature .brand-copy-field .brand-tagline-ar{font-size:9.3px} } /* 2) CONTROL RHYTHM — readable centered labels, with deliberate exceptions for rich/list controls. */ body.yekfi-signature :is( .btn,.sig-btn,.pill-btn,.topbar-new-plan,.nav-btn,.sig-link, .household-board-preview-actions button,.household-board-create button, .household-board-row-actions button,.grocery-request-row button,.grocery-request-foot button, .store-custom-head button,.advanced-actions button,.plan-assist-actions button, .saved-plan-row-actions button,.shopping-domains button,.filter-chip ){ align-items:center;justify-content:center;text-align:center; } body.yekfi-signature :is(.btn,.sig-btn,.pill-btn,.topbar-new-plan,.sig-link,.advanced-actions button){ display:inline-flex; } /* Rich navigation/list buttons keep scan-friendly start alignment while remaining vertically centered. */ body.yekfi-signature :is(.menu-route,.plan-recipe-card,.user-product-main,.sig-shop-main,.choice-row.as-button){ align-items:center; } body.yekfi-signature .menu-route>span:last-child{text-align:right;align-self:center} /* 3) BUTTON SPACING — no touching clusters. */ body.yekfi-signature :is( .actions,.hero-actions,.ready-actions,.menu-primary,.advanced-actions,.new-plan-options, .household-board-preview-actions,.household-board-create,.household-board-row-actions, .grocery-request-row>div,.hub-quick,.plan-assist-actions,.saved-plan-row-actions, .shopping-domains,.pilot-center-actions,.manual-slot-strip,.manual-day-strip ){gap:var(--yk-control-gap)} body.yekfi-signature #sheetContent>.btn.full+.btn.full{margin-top:9px} body.yekfi-signature .sheet-section+.btn.full{margin-top:10px} body.yekfi-signature :is(.menu-route,.advanced-actions button,.household-board-preview-actions button,.household-board-create button,.grocery-request-row button){ min-height:44px; } /* Stable focus position under moving header. */ body.yekfi-signature :is(button,a,input,select,textarea,[tabindex]):focus-visible{ scroll-margin-top:calc(var(--yk-rc26-header-mobile-compact) + env(safe-area-inset-top) + 18px); } /* 4) REQUEST MODULES — distinct mental models, distinct visual systems. */ body.yekfi-signature .grocery-requests-panel{ margin-top:16px;padding:14px;border:1px solid rgba(190,143,43,.34);border-radius:var(--radius-hero); background:linear-gradient(145deg,#FFF8E9 0%,#FFFDF8 72%); box-shadow:0 10px 24px rgba(126,91,24,.055); } body.yekfi-signature .grocery-requests-panel .sig-section-head{ border-bottom:1px solid rgba(190,143,43,.22);padding-bottom:10px;margin-bottom:11px; } body.yekfi-signature .grocery-requests-panel .sig-section-head h2{color:#6A501D} body.yekfi-signature .grocery-request-row{ background:#FFFDF8;border-color:rgba(190,143,43,.25); } body.yekfi-signature .grocery-request-row.important{border-color:rgba(176,112,28,.62);box-shadow:inset 3px 0 0 rgba(201,151,50,.72)} body.yekfi-signature .grocery-request-empty{background:rgba(255,255,255,.62);border-color:rgba(190,143,43,.32)} body.yekfi-signature .grocery-request-foot{padding-top:10px;border-top:1px dashed rgba(190,143,43,.24)} body.yekfi-signature .household-board-preview-card{ border-color:rgba(77,112,70,.28); background:linear-gradient(145deg,#EEF5EC 0%,#FBFCF6 76%); box-shadow:0 10px 25px rgba(54,83,49,.06); } body.yekfi-signature .household-board-preview-actions{padding-top:10px;border-top:1px solid rgba(77,112,70,.16)} body.yekfi-signature .household-board-preview-actions button:not(.primary){border-color:rgba(77,112,70,.22);background:#FCFEF9} body.yekfi-signature .request-module{ border-radius:var(--radius-hero);padding:14px;display:flex;flex-direction:column;gap:12px; } body.yekfi-signature .request-module .household-entry-intro{margin:0;border:0;box-shadow:none;background:transparent;padding:2px} body.yekfi-signature .request-module-divider{height:1px;width:100%} body.yekfi-signature .request-module :is(.input,textarea,select){background:#fff} body.yekfi-signature .grocery-request-module{ background:linear-gradient(150deg,#FFF7E5,#FFFDF8); border:1px solid rgba(190,143,43,.38); box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 12px 28px rgba(126,91,24,.06); } body.yekfi-signature .grocery-request-module .request-module-divider{background:linear-gradient(90deg,transparent,rgba(190,143,43,.40),transparent)} body.yekfi-signature .grocery-request-module .household-entry-intro>span:first-child{background:#FFF0C8;color:#765513;border:1px solid rgba(190,143,43,.22)} body.yekfi-signature .grocery-request-module .field label{color:#6A501D} body.yekfi-signature .grocery-request-module .request-module-submit{background:linear-gradient(180deg,#86661F,#684E17);color:#fff;border-color:#86661F} body.yekfi-signature .house-request-module{ background:linear-gradient(150deg,#EDF5EB,#FBFCF7); border:1px solid rgba(77,112,70,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 12px 28px rgba(54,83,49,.055); } body.yekfi-signature .house-request-module.note-kind{background:linear-gradient(150deg,#F5F1E3,#FFFDF8);border-color:rgba(160,133,64,.28)} body.yekfi-signature .house-request-module .request-module-divider{background:linear-gradient(90deg,transparent,rgba(77,112,70,.38),transparent)} body.yekfi-signature .house-request-module.note-kind .request-module-divider{background:linear-gradient(90deg,transparent,rgba(160,133,64,.32),transparent)} body.yekfi-signature .house-request-module.request-kind .household-entry-intro>span:first-child{background:#E2EFE0;color:#315238;border:1px solid rgba(77,112,70,.20)} body.yekfi-signature .house-request-module.note-kind .household-entry-intro>span:first-child{background:#F4E9C6;color:#755C1E;border:1px solid rgba(160,133,64,.18)} body.yekfi-signature .house-request-module .field label{color:#315238} body.yekfi-signature .house-request-module .request-module-submit{background:linear-gradient(180deg,#3D603E,#2E4D32);color:#fff;border-color:#2E4D32} /* 5) OVERFLOW MENU — consumer hierarchy first, beta tooling last. */ body.yekfi-signature .menu-overview{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:12px 13px;margin-bottom:14px;border-radius:var(--radius-card); background:linear-gradient(145deg,#F5F2E8,#FBFAF5);border:1px solid rgba(73,91,65,.12); } body.yekfi-signature .menu-overview span{display:grid;gap:3px;text-align:right} body.yekfi-signature .menu-overview b{font-size:14px;color:#263C2A} body.yekfi-signature .menu-overview small{font-size:11px;line-height:1.45;color:#657066} body.yekfi-signature .menu-section-label{ margin:14px 3px 7px;font-size:11px;font-weight:900;color:#6E755F;letter-spacing:.1px; } body.yekfi-signature .menu-primary{gap:9px} body.yekfi-signature .menu-route{ min-height:66px;border-radius:var(--radius-card);padding:10px 12px; border:1px solid rgba(73,91,65,.15);background:#FFFDF8; box-shadow:0 5px 16px rgba(43,58,40,.035); } body.yekfi-signature .menu-route .ui-icon{ background:#EEF1E8;color:#35543A;border:1px solid rgba(73,91,65,.10); } body.yekfi-signature .menu-route.featured{ background:linear-gradient(180deg,#3E603F,#2E4D32); border-color:#2E4D32;color:#FFFDF4; box-shadow:0 9px 22px rgba(42,70,45,.13); } body.yekfi-signature .menu-route.featured .ui-icon{ background:rgba(240,205,116,.16);color:#F0CD74;border-color:rgba(240,205,116,.22); } body.yekfi-signature .menu-route.featured :is(b,small){color:#FFFDF4} body.yekfi-signature .menu-route.featured small{opacity:.78} body.yekfi-signature .menu-route.appearance-route{background:linear-gradient(145deg,#FFF9EC,#FFFDF8);border-color:rgba(190,143,43,.22)} body.yekfi-signature .menu-route.appearance-route .ui-icon{background:#FFF0C9;color:#745512} body.yekfi-signature .menu-route.account-route{background:linear-gradient(145deg,#F0F6ED,#FCFDF9);border-color:rgba(77,112,70,.22)} body.yekfi-signature .menu-route.trust-route{background:#F8F9F5;border-color:rgba(82,96,78,.16)} body.yekfi-signature .advanced-menu{ margin-top:16px;padding-top:10px;border-top:1px solid rgba(73,91,65,.13); } body.yekfi-signature .advanced-menu>summary{ min-height:46px;justify-content:space-between;padding:0 3px;color:#596359; } body.yekfi-signature .advanced-actions{gap:9px} body.yekfi-signature .advanced-actions button{ min-height:46px;padding:9px 10px;border-radius:var(--radius-card); background:#F8F7F1;border-color:rgba(73,91,65,.13);color:#344737; } body.yekfi-signature .menu-release-note{ margin-top:14px;padding:10px 12px;border-radius:var(--radius-card);background:#F3F4EF;border:1px solid rgba(73,91,65,.10);color:#667066; } body.yekfi-signature .menu-release-note span{display:grid;gap:2px;text-align:center} body.yekfi-signature .menu-release-note b{font-size:10.5px;color:#4A574B} body.yekfi-signature .menu-release-note small{font-size:10px;line-height:1.4;overflow-wrap:anywhere} @media(max-width:390px){body.yekfi-signature .advanced-actions{grid-template-columns:1fr}} /* ===== premium-visual-system-v1071.css ===== */ /* YEKFI v10.7.1 — RC27 Premium Visual System Final consumer presentation contract for buttons, cards, spacing, contrast and alignment. Presentation only: no planning/economics/nutrition/pantry logic. */ :root{ --yk-v27-gap:10px; --yk-v27-gap-lg:12px; } /* ---------- Global readability / surface separation ---------- */ html{background:var(--yk-v27-bg)} body.yekfi-signature{color:var(--yk-v27-ink)} body.yekfi-signature :is(.content,.sheet-panel){color:var(--yk-v27-ink)} body.yekfi-signature :is(.content,.sheet-panel) :is(small,.meta,.tiny-muted){color:var(--yk-v27-muted)} body.yekfi-signature .content small, body.yekfi-signature .sheet-panel small{line-height:1.48} /* ---------- Universal control contract ---------- */ body.yekfi-signature button:not(.brand):not(.sig-hero-title){ min-height:44px; line-height:1.3; -webkit-tap-highlight-color:transparent; } body.yekfi-signature :is( .btn,.sig-btn,.pill-btn,.topbar-new-plan,.sig-link,.round-icon,.family-top-btn, .filter-chip,.option,.day-tab,.composer-tabs button,.meal-type-pills button,.group-pills button, .plan-library-filters button,.plan-assist-actions button,.advanced-actions button, .household-board-preview-actions button,.household-board-create button,.household-board-row-actions button, .grocery-request-row button,.grocery-request-foot button,.store-custom-head button, .saved-plan-row-actions button,.shopping-domains button,.cook-actions button,.member-photo-actions button, .home-inline-actions button,.home-mini-action,.stock-head-actions button,.stock-movement-actions button, .delight-closeout-actions button,.delight-complete-actions button,.delight-first-value-actions button ){ display:inline-flex; align-items:center; justify-content:center; text-align:center; vertical-align:middle; gap:8px; min-height:44px; padding-block:9px; padding-inline:13px; font-size:max(12px,1em); font-weight:800; line-height:1.3; border-radius:var(--radius-card); } body.yekfi-signature :is(.btn,.sig-btn,.pill-btn,.filter-chip,.option,.plan-assist-actions button,.advanced-actions button){ border:1px solid var(--yk-v27-line); box-shadow:var(--yk-v27-control-shadow); } /* Primary / secondary / dark actions: restrained premium hierarchy. */ body.yekfi-signature :is(.btn.primary,.sig-btn-primary,.request-module-submit){ color:#172018; background:linear-gradient(180deg,#E8CB78 0%,#D2A74E 58%,#C49337 100%); border-color:#D6B25A; box-shadow:0 1px 0 rgba(255,255,255,.58) inset,0 10px 23px rgba(111,78,28,.16); } body.yekfi-signature :is(.btn.soft,.btn.light,.sig-btn-soft,.sig-btn-ghost:not(.sig-hero .sig-btn-ghost)){ color:var(--yk-v27-forest-dark); background:linear-gradient(180deg,#FFFFFF,#F5F1E8); border-color:var(--yk-v27-line); box-shadow:var(--yk-v27-control-shadow); } body.yekfi-signature :is(.sig-btn-dark,.btn.dark){ color:#fff; background:linear-gradient(160deg,#355B3E,#1A2A20); border-color:#35543A; box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 24px rgba(20,31,23,.17); } body.yekfi-signature :is(.danger,.danger-btn,.btn.danger){ color:#fff;background:linear-gradient(180deg,#9B4A43,#7F3935);border-color:#73332F; } body.yekfi-signature button:disabled, body.yekfi-signature button[aria-disabled="true"]{ opacity:.58;filter:saturate(.72);box-shadow:none;cursor:not-allowed; } /* Selected/active: the gold keyline is the single unmistakable state signal. */ body.yekfi-signature :is( .option.selected,.day-tab.active,.filter-chip.active,.meal-type-pills button.active,.group-pills button.active, .composer-tabs button.active,.plan-library-filters button.active,.plan-mode-buttons button.selected, .plan-cuisine-chip.selected,.manual-cuisine-strip button.active,.manual-day-strip button.active, .manual-slot-strip button.active,.cuisine-card.selected,.blend-card.selected,.budget-policy-card.selected, .new-plan-option.selected,.choice-row.selected,.mode-choice.selected,.ux-mode-choice.selected ){ border-color:var(--yk-v27-gold); box-shadow:0 0 0 2px rgba(184,134,49,.22),var(--yk-v27-control-shadow); background:linear-gradient(180deg,#FFFDF8,#FFF8E7); color:var(--yk-v27-forest-dark); } /* Press/hover/focus are coherent across every interaction family. */ body.yekfi-signature button:not(:disabled):active{transform:translateY(1px) scale(.99)} body.yekfi-signature :is(button,a,[role="button"],input,select,textarea):focus-visible{ outline:3px solid rgba(184,134,49,.78);outline-offset:3px; } @media(hover:hover){ body.yekfi-signature :is(.btn,.sig-btn,.pill-btn,.option,.filter-chip,.menu-route,.plan-recipe-card,.choice-row.as-button, .cuisine-card,.blend-card,.new-plan-option,.household-control-grid>button,.household-board-row,.saved-plan-row):not(:disabled):hover{ border-color:var(--yk-v27-line-strong); box-shadow:var(--yk-v27-card-shadow-hover); transform:translateY(-1px); } } /* ---------- Button cluster rhythm: no visual touching ---------- */ body.yekfi-signature :is( .actions,.hero-actions,.sig-hero-actions,.ready-actions,.menu-primary,.advanced-actions,.new-plan-options, .option-row,.budget-final-options,.pending-actions,.composer-footer-actions,.cook-actions,.eco-actions,.fi-actions, .household-board-preview-actions,.household-board-create,.household-board-row-actions,.grocery-request-row>div, .hub-quick,.plan-assist-actions,.saved-plan-row-actions,.shopping-domains,.pilot-center-actions, .member-photo-actions,.home-inline-actions,.stock-head-actions,.stock-movement-actions,.meal-type-pills,.group-pills, .filter-scroll,.plan-library-filters ){gap:var(--yk-v27-gap)} body.yekfi-signature :is(.choice-list,.grocery-request-list,.selected-foods,.nutrition-list,.plan-recipe-list){gap:var(--yk-v27-gap)} body.yekfi-signature #sheetContent>.btn.full+.btn.full{margin-top:var(--yk-v27-gap)} body.yekfi-signature .sheet-section+.btn.full{margin-top:var(--yk-v27-gap-lg)} /* ---------- Core card contract: stronger distinction without heavy decoration ---------- */ body.yekfi-signature :is( .card,.sig-panel,.meal-card,.swap-option,.ring-card,.appearance-bg-card, .budget-entry-card,.budget-policy-card,.ux-budget-card,.cuisine-card,.blend-card,.ux-choice-summary, .path-card,.pediatric-context-card,.pediatric-policy-card,.science-plan-card,.release-gate-card, .runtime-recovery-card,.price-truth-card,.strategic-goal-card,.trust-card,.weakest-card, .saved-plan-row,.household-board-row,.user-product-row,.stock-food-row,.stock-purchase-row, .monthly-item,.purchase-history-row,.support-row,.kitchen-test-row,.price-observe-row,.ledger-row, .fi-basket-row,.pilot-issue-row,.home-house-row,.plan-studio-step,.user-products-card ){ background:linear-gradient(180deg,var(--yk-v27-surface-raised),var(--yk-v27-surface)); border:1px solid var(--yk-v27-line); box-shadow:var(--yk-v27-card-shadow); } body.yekfi-signature :is(.card,.meal-card,.swap-option,.saved-plan-row,.household-board-row,.user-product-row, .stock-food-row,.stock-purchase-row,.monthly-item,.purchase-history-row,.support-row,.kitchen-test-row,.price-observe-row, .ledger-row,.fi-basket-row,.pilot-issue-row,.home-house-row){border-radius:var(--radius-card)} body.yekfi-signature :is(.sig-panel,.plan-studio-step,.user-products-card){border-radius:var(--radius-hero)} /* Card copy: stronger title/body contrast and breathing room. */ body.yekfi-signature :is( .card,.sig-panel,.meal-card,.swap-option,.budget-entry-card,.budget-policy-card,.ux-budget-card,.cuisine-card,.blend-card, .path-card,.pediatric-context-card,.pediatric-policy-card,.science-plan-card,.release-gate-card,.runtime-recovery-card, .price-truth-card,.strategic-goal-card,.trust-card,.saved-plan-row,.household-board-row,.user-product-row,.support-row, .plan-studio-step ) :is(h2,h3,b,strong){color:var(--yk-v27-ink)} body.yekfi-signature :is( .card,.sig-panel,.meal-card,.swap-option,.budget-entry-card,.budget-policy-card,.ux-budget-card,.cuisine-card,.blend-card, .path-card,.pediatric-context-card,.pediatric-policy-card,.science-plan-card,.release-gate-card,.runtime-recovery-card, .price-truth-card,.strategic-goal-card,.trust-card,.saved-plan-row,.household-board-row,.user-product-row,.support-row, .plan-studio-step ) :is(p,small,em){color:var(--yk-v27-muted)} /* ---------- Rich button-cards: balanced layouts, centered vertically, copy never collides ---------- */ body.yekfi-signature :is(.menu-route,.choice-row.as-button,.plan-recipe-card,.user-product-main,.sig-shop-main,.food-option, .plan-mode-buttons button,.plan-cuisine-chip,.manual-cuisine-strip button,.household-control-grid>button,.new-plan-option){ min-height:56px; border-radius:var(--radius-card); } body.yekfi-signature :is(.menu-route,.choice-row.as-button,.plan-recipe-card,.food-option,.plan-mode-buttons button, .plan-cuisine-chip,.manual-cuisine-strip button,.household-control-grid>button,.new-plan-option){ background:linear-gradient(180deg,#FFFFFF,#FCFAF5); border:1px solid var(--yk-v27-line); box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 5px 15px rgba(31,43,33,.05); } body.yekfi-signature .menu-route{ min-height:68px; grid-template-columns:42px minmax(0,1fr) 24px; align-items:center; gap:10px; padding:11px 12px; } body.yekfi-signature .menu-route>span:last-child{ align-self:center; text-align:center; display:grid; justify-items:center; gap:3px; } body.yekfi-signature .menu-route>span:last-child :is(b,small){text-align:center} body.yekfi-signature .menu-route .ui-icon{width:40px;height:40px;border-radius:var(--radius-card)} body.yekfi-signature .menu-route.featured{ background:linear-gradient(155deg,#355B3E,#1A2A20); border-color:#35543A; box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 12px 26px rgba(20,31,23,.18); } body.yekfi-signature .menu-route.featured :is(b,small){color:#FFFDF7} body.yekfi-signature .menu-route.appearance-route{background:linear-gradient(145deg,#FFF8E6,#FFFDF8);border-color:#D9C493} body.yekfi-signature .menu-route.account-route{background:linear-gradient(145deg,#EEF5EC,#FCFDF9);border-color:#BFCFBA} body.yekfi-signature .menu-route.trust-route{background:linear-gradient(145deg,#F5F6F1,#FFFDF9);border-color:#D5D9CF} /* ---------- Navigation / tabs ---------- */ body.yekfi-signature .bottom-nav{ border-color:var(--yk-v27-line-strong); background:rgba(255,253,248,.96); box-shadow:0 1px 0 #fff inset,0 18px 42px rgba(29,40,29,.15),0 4px 12px rgba(29,40,29,.06); } body.yekfi-signature .nav-btn{color:#657066;font-weight:750} body.yekfi-signature .nav-btn.active{ color:var(--yk-v27-forest-dark); background:linear-gradient(180deg,#FFF8E8,#F5ECD2); box-shadow:inset 0 0 0 1px rgba(184,134,49,.34),0 5px 14px rgba(64,54,30,.08); } /* ---------- Request modules remain intentionally distinct from generic cards ---------- */ body.yekfi-signature .grocery-requests-panel, body.yekfi-signature .grocery-request-module{ border-color:rgba(184,134,49,.45); background:linear-gradient(150deg,#FFF5DC,#FFFDF7); box-shadow:0 1px 0 rgba(255,255,255,.92) inset,0 11px 26px rgba(116,83,25,.075); } body.yekfi-signature .household-board-preview-card, body.yekfi-signature .house-request-module.request-kind{ border-color:rgba(74,111,72,.40); background:linear-gradient(150deg,#EAF3E8,#FCFDF8); box-shadow:0 1px 0 rgba(255,255,255,.92) inset,0 11px 26px rgba(49,79,47,.07); } body.yekfi-signature .house-request-module.note-kind{ border-color:rgba(156,126,52,.34); background:linear-gradient(150deg,#F6EED6,#FFFDF8); } body.yekfi-signature .request-module{border-radius:var(--radius-hero);gap:12px} /* ---------- Inputs visually belong to the same premium system ---------- */ body.yekfi-signature :is(.input,input:not([type="checkbox"]):not([type="radio"]),select,textarea){ min-height:44px; border-color:var(--yk-v27-line); background:#FFFFFF; color:var(--yk-v27-ink); border-radius:var(--radius-card); box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 3px 10px rgba(31,43,33,.035); } body.yekfi-signature ::placeholder{color:#7A837B;opacity:1} /* ---------- Tight mobile precision ---------- */ @media(max-width:560px){ body.yekfi-signature :is(.btn,.sig-btn,.pill-btn,.filter-chip,.option,.plan-assist-actions button,.advanced-actions button){ min-height:46px; padding-inline:12px; } body.yekfi-signature :is(.card,.meal-card,.swap-option,.saved-plan-row,.household-board-row,.user-product-row, .stock-food-row,.stock-purchase-row,.monthly-item,.purchase-history-row,.support-row){ border-radius:var(--radius-card); } body.yekfi-signature .menu-route{min-height:70px} body.yekfi-signature .manual-day-strip{gap:5px} body.yekfi-signature .manual-slot-strip{gap:6px} } @media(prefers-reduced-motion:reduce){ body.yekfi-signature :is(button,.btn,.sig-btn,.menu-route,.card,.plan-recipe-card){transition:none;transform:none} } /* ---------- Final all-button alignment guarantee ---------- */ body.yekfi-signature button:not(.brand):not(.sig-hero-title){ text-align:center; align-items:center; } body.yekfi-signature button:not(.brand):not(.sig-hero-title) :is(b,strong,small,em,span){ text-align:center; } /* ---------- Secondary / micro-card family ---------- */ body.yekfi-signature :is( .stat,.insight,.unit-card,.detail-stat,.ready-stat,.summary-banner,.manual-current-slot>span, .manual-budget-summary>span,.composer-money>div,.score-orb,.sig-week-card,.sig-shop-category, .sig-member-list,.price-truth-row,.trust-row,.intel-row,.home-setup-row,.rc25-profile-row ){ border:1px solid rgba(200,185,158,.72); background:linear-gradient(180deg,#FFFDF9,#F8F5ED); box-shadow:0 1px 0 rgba(255,255,255,.94) inset,0 4px 13px rgba(31,43,33,.045); } body.yekfi-signature :is(.stat,.insight,.unit-card,.detail-stat,.ready-stat,.manual-current-slot>span,.manual-budget-summary>span,.composer-money>div){ border-radius:var(--radius-card); } /* Do not allow microcopy to disappear inside controls/cards. */ body.yekfi-signature :is(button,.card,.sig-panel,.meal-card,.menu-route,.choice-row,.plan-recipe-card,.household-board-row,.saved-plan-row) small{ color:var(--yk-v27-muted); font-size:max(11px,.86em); line-height:1.45; } body.yekfi-signature .menu-route.featured small, body.yekfi-signature .sig-hero :is(.sig-btn-ghost small,.sig-btn-primary small){color:rgba(255,255,255,.84)} /* Hard touch-floor closure against older rules. */ body.yekfi-signature button:not(.brand):not(.sig-hero-title){min-height:44px} body.yekfi-signature :is(.round-icon,.family-top-btn,.icon-btn,.close-x,.remove-x,.mini-stepper button,.counter button,.counter-control button,.counter-row button){ min-width:44px;min-height:44px; } /* ===== visual-correction-v1072.css ===== */ /* YEKFI v10.7.2 — RC28 Visual Correction & Layout Truth Screen-level correction authority derived from real-device screenshots. Presentation only: no planning, nutrition, price, pantry-food, kitchen or cultural logic. */ :root{ --yk28-header-h:78px; --yk28-gap:12px; } html,body{background:var(--yk28-bg)} body.yekfi-signature{color:var(--yk28-ink)} body.yekfi-signature::after{background:rgba(248,244,233,.72)} /* ====================================================================== ITERATION 1 — HEADER / TOP COMPOSITION TRUTH Stable mobile geometry: one row, no floating overlap, no animated height. ====================================================================== */ body.yekfi-signature .topbar::after{display:none} body.yekfi-signature .topbar::before{display:none} body.yekfi-signature .topbar{ border-bottom:1px solid rgba(63,78,60,.12); background:rgba(255,252,245,.985); box-shadow:0 8px 24px rgba(31,44,33,.07); } @media(max-width:899px){ body.yekfi-signature .topbar{ direction:ltr; grid-template-columns:44px 44px 94px minmax(0,1fr); grid-template-areas:"menu family budget brand"; grid-template-rows:1fr; gap:7px; width:min(100%,980px); min-height:calc(var(--yk28-header-h) + env(safe-area-inset-top)); height:calc(var(--yk28-header-h) + env(safe-area-inset-top)); padding:max(7px,env(safe-area-inset-top)) 9px 7px; align-items:center; border-radius:0 0 18px 18px; transition:none; } body.yekfi-signature.header-compact .topbar{ min-height:calc(var(--yk28-header-h) + env(safe-area-inset-top)); height:calc(var(--yk28-header-h) + env(safe-area-inset-top)); padding:max(7px,env(safe-area-inset-top)) 9px 7px; } body.yekfi-signature .topbar-new-plan{display:none} body.yekfi-signature .topbar>.round-icon, body.yekfi-signature .topbar>.family-top-btn{ width:44px;min-width:44px;height:44px;min-height:44px; border-radius:var(--radius-card);padding:0; display:grid;place-items:center; background:#FFFDF8;border:1px solid var(--yk28-line); box-shadow:0 3px 10px rgba(31,43,33,.04); } body.yekfi-signature .topbar>.round-icon{grid-area:menu} body.yekfi-signature .topbar>.family-top-btn{grid-area:family} body.yekfi-signature .family-top-btn span{display:none} body.yekfi-signature .topbar>.topbar-actions{grid-area:budget;width:94px;min-width:0} body.yekfi-signature .budget-pill, body.yekfi-signature.header-compact .budget-pill{ width:94px;min-width:94px;max-width:94px;min-height:48px; padding:6px 8px;border-radius:var(--radius-card); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;background:#FBF7ED;border:1px solid #DACCAA; box-shadow:none; } body.yekfi-signature .budget-pill small{display:block;font-size:10px;line-height:1.1;color:#6D735F} body.yekfi-signature .budget-pill b{font-size:14px;line-height:1.15;color:var(--yk28-forest);white-space:nowrap} body.yekfi-signature .budget-pill em{display:none} body.yekfi-signature .topbar>.brand, body.yekfi-signature.header-compact .topbar>.brand{ grid-area:brand;direction:rtl;justify-self:end; min-width:0;min-height:54px;gap:7px;padding:0; transform:none;overflow:hidden; } body.yekfi-signature .brand-symbol-large, body.yekfi-signature.header-compact .brand-symbol-large{ width:50px;height:50px;min-width:50px;flex-basis:50px; object-fit:contain;filter:drop-shadow(0 4px 8px rgba(26,43,30,.12)); } body.yekfi-signature .brand-copy-field, body.yekfi-signature.header-compact .brand-copy-field{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0} body.yekfi-signature .brand-wordmark-field, body.yekfi-signature.header-compact .brand-wordmark-field{width:82px;max-width:82px;max-height:25px} body.yekfi-signature .brand-copy-field .brand-tagline-ar, body.yekfi-signature.header-compact .brand-copy-field .brand-tagline-ar{display:block;font-size:10px;line-height:1.15;color:#657064;white-space:nowrap} body.yekfi-signature .content{ padding-top:calc(var(--yk28-header-h) + env(safe-area-inset-top) + 18px); scroll-padding-top:calc(var(--yk28-header-h) + env(safe-area-inset-top) + 16px); transition:none; } body.yekfi-signature :is(button,a,input,select,textarea,[tabindex]):focus-visible{scroll-margin-top:calc(var(--yk28-header-h) + env(safe-area-inset-top) + 18px)} } @media(max-width:360px){ body.yekfi-signature .topbar{grid-template-columns:42px 42px 82px minmax(0,1fr);gap:5px;padding-inline:6px} body.yekfi-signature .topbar>.round-icon,body.yekfi-signature .topbar>.family-top-btn{width:42px;min-width:42px;height:42px;min-height:42px} body.yekfi-signature .topbar>.topbar-actions{width:82px} body.yekfi-signature .budget-pill{width:82px;min-width:82px;max-width:82px} body.yekfi-signature .budget-pill small{display:none} body.yekfi-signature .brand-symbol-large,body.yekfi-signature.header-compact .brand-symbol-large{width:46px;height:46px;min-width:46px;flex-basis:46px} body.yekfi-signature .brand-wordmark-field,body.yekfi-signature.header-compact .brand-wordmark-field{width:68px;max-width:68px} body.yekfi-signature .brand-copy-field .brand-tagline-ar,body.yekfi-signature.header-compact .brand-copy-field .brand-tagline-ar{display:none} } /* ====================================================================== GLOBAL SCREEN COMPOSITION — stronger hierarchy, less beige-on-beige. ====================================================================== */ body.yekfi-signature .content{color:var(--yk28-ink)} body.yekfi-signature .sig-page{display:flex;flex-direction:column;gap:16px} body.yekfi-signature .sig-section{margin:0} body.yekfi-signature .sig-section+.sig-section{margin-top:4px} body.yekfi-signature .sig-section-head{margin-bottom:10px;align-items:flex-end;gap:12px} body.yekfi-signature .sig-section-head h2{color:var(--yk28-forest-deep);font-weight:950;line-height:1.22} body.yekfi-signature .sig-section-head small{color:#6A746C} body.yekfi-signature :is(.sig-panel,.card,.sig-summary,.sig-shop-category,.plan-studio-step,.household-board-preview-card,.user-products-card){ border-color:var(--yk28-line); } body.yekfi-signature :is(.sig-panel,.card,.sig-summary,.plan-studio-step,.household-board-preview-card,.user-products-card){ background:var(--yk28-paper); box-shadow:var(--yk28-shadow); } /* Rich/list controls are scan surfaces, not centered CTA buttons. */ body.yekfi-signature :is(.sig-shop-main,.menu-route,.plan-recipe-card,.user-product-main,.choice-row.as-button,.food-option){ text-align:right;justify-content:flex-start;align-items:center; } body.yekfi-signature :is(.sig-shop-main,.menu-route,.plan-recipe-card,.user-product-main,.choice-row.as-button,.food-option) :is(b,strong,small,em,span){text-align:right} /* Generic button clusters: keep physical breathing room. */ body.yekfi-signature :is(.actions,.sig-hero-actions,.ready-actions,.option-row,.plan-assist-actions,.household-board-create,.household-board-preview-actions,.household-board-row-actions,.grocery-request-foot,.advanced-actions){gap:10px} body.yekfi-signature .btn.full+.btn.full{margin-top:10px} /* ====================================================================== ITERATION 2 — SURFACES / CARDS / CONTRAST ====================================================================== */ /* Shopping hero: image remains emotional; data becomes guaranteed readable. */ body.yekfi-signature .sig-shopping-hero{ min-height:382px;border-radius:var(--radius-hero);overflow:hidden; background:#17251B;border:1px solid rgba(36,57,40,.32); box-shadow:0 18px 42px rgba(26,39,29,.14); } body.yekfi-signature .sig-shopping-hero::before{background-position:left center;filter:saturate(.93) contrast(1.02)} body.yekfi-signature .sig-shopping-hero .sig-hero-shade{ background:linear-gradient(90deg,rgba(10,18,13,.18) 0%,rgba(10,18,13,.42) 42%,rgba(10,18,13,.90) 73%,rgba(10,18,13,.97) 100%); } body.yekfi-signature .sig-shopping-hero .sig-hero-copy{ width:min(64%,520px);min-height:382px;padding:24px; justify-content:center;gap:0; } body.yekfi-signature .sig-shopping-hero .sig-hero-title{color:#FFFDF5;text-wrap:balance} body.yekfi-signature .sig-shopping-hero .sig-hero-copy>p{color:rgba(255,255,255,.88)} body.yekfi-signature .sig-shopping-stats.delight-shopping-stats{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;width:100%;margin-top:14px; } body.yekfi-signature .sig-shopping-stats.delight-shopping-stats>span{ min-width:0;min-height:64px;padding:9px 10px;border-radius:var(--radius-card); display:flex;flex-direction:column;align-items:flex-start;justify-content:center; background:rgba(24,38,28,.92);border:1px solid rgba(238,229,205,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); } body.yekfi-signature .sig-shopping-stats.delight-shopping-stats small{font-size:11px;color:#D9DCCE;line-height:1.25} body.yekfi-signature .sig-shopping-stats.delight-shopping-stats b{margin-top:5px;font-size:20px;line-height:1.15;color:#FFFDF5;white-space:nowrap} body.yekfi-signature .sig-shopping-hero .price-trust-inline{ width:100%;min-height:62px;margin-top:9px;padding:10px 12px; grid-template-columns:38px minmax(0,1fr);gap:10px; background:#F7F0DE;border:1px solid #D8C59B;border-radius:var(--radius-card); color:var(--yk28-forest-deep);box-shadow:0 7px 18px rgba(8,15,10,.14); } body.yekfi-signature .sig-shopping-hero .price-trust-inline>span:first-child{width:36px;height:36px;background:#E9D8AB;color:#6C5017} body.yekfi-signature .sig-shopping-hero .price-trust-inline b{font-size:12.5px;color:var(--yk28-forest-deep)} body.yekfi-signature .sig-shopping-hero .price-trust-inline small{margin-top:3px;font-size:11px;line-height:1.45;color:#5A655D} body.yekfi-signature .sig-shopping-hero .sig-hero-actions{display:grid;grid-template-columns:1fr;width:100%;margin-top:10px} body.yekfi-signature .sig-shopping-hero .sig-btn{min-height:52px;font-size:13px;border-radius:var(--radius-card)} body.yekfi-signature .sig-shopping-hero .sig-btn-primary{ background:linear-gradient(180deg,#E8C967,#C99835);color:#17271C;border:1px solid #D9B65B; } body.yekfi-signature .sig-shopping-hero .sig-btn-ghost{ background:#FFF9EA;color:#25462E;border:1px solid #E6D8B8; } /* Plan summary: explicit three-level depth: page -> summary -> metrics. */ body.yekfi-signature .sig-summary{ padding:18px;border:1px solid #CCBFA9;border-radius:var(--radius-hero); background:#FFFCF6;box-shadow:0 14px 34px rgba(38,49,38,.085); } body.yekfi-signature .sig-summary-title{ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px; padding-bottom:15px;margin-bottom:14px;border-bottom:1px solid #DED3C2; } body.yekfi-signature .sig-summary-title>span{display:grid;gap:4px;text-align:right} body.yekfi-signature .sig-summary-title>span>b{font-size:18px;line-height:1.25;color:var(--yk28-forest)} body.yekfi-signature .sig-summary-title>span>small{font-size:12px;line-height:1.45;color:#657067} body.yekfi-signature .sig-summary-score{font-size:34px;line-height:1;color:var(--yk28-gold-deep);font-weight:950} body.yekfi-signature .sig-metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px} body.yekfi-signature .sig-metric{ min-height:112px;padding:15px 12px;border:1px solid #E0D5C3;border-radius:var(--radius-card); background:#F8F4EA;box-shadow:0 2px 8px rgba(31,43,33,.025); display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; } body.yekfi-signature .sig-metric strong{font-size:25px;color:var(--yk28-forest);line-height:1.1} body.yekfi-signature .sig-metric small{margin-top:10px;font-size:12px;line-height:1.4;color:#616A62} body.yekfi-signature .sig-summary-action{ width:100%;min-height:52px;margin-top:14px;padding:11px 14px;border-radius:var(--radius-card); background:#F1F5EC;border:1px solid #C9D3C4;color:var(--yk28-forest); font-size:12.5px;font-weight:900;box-shadow:none; } /* Meal detail: CTA hierarchy and explanation no longer looks like a third button/card. */ body.yekfi-signature #sheetContent>.btn.primary.full{min-height:54px;font-size:14px;border-radius:var(--radius-card);margin-top:14px} body.yekfi-signature #sheetContent>.btn.soft.full.kitchen-measure-btn{min-height:52px;font-size:13px;border-radius:var(--radius-card);background:#FFFDF8;border-color:#CFC4B2} body.yekfi-signature .meal-budget-note{ margin-top:12px;padding:13px 14px;border-radius:var(--radius-card); background:#F7F0DD;border:1px solid #E1CFA4;color:#4D574D; display:grid;gap:4px;line-height:1.65; } body.yekfi-signature .meal-budget-note b{font-size:12.5px;color:var(--yk28-forest)} body.yekfi-signature .meal-budget-note span{font-size:11.5px;color:#60675F} /* ====================================================================== ITERATION 3 — ROWS / BUTTONS / FORMS / TEXT RHYTHM ====================================================================== */ body.yekfi-signature .sig-shop-category{ border:1px solid #D5C9B5;border-radius:var(--radius-hero);background:#FFFCF6; box-shadow:0 10px 26px rgba(33,45,34,.06);overflow:hidden; } body.yekfi-signature .sig-shop-cat-head{background:#F7F2E8;border-bottom:1px solid #DED3C1;padding:11px 13px} body.yekfi-signature .sig-shop-item{ direction:rtl;display:grid; grid-template-columns:44px 60px minmax(0,1fr) 90px; gap:10px;align-items:center;min-height:104px;padding:13px 12px; border-bottom:1px solid #E7DED0;background:#FFFCF6; } body.yekfi-signature .sig-shop-item:not(.has-food-thumb){grid-template-columns:44px minmax(0,1fr) 90px} body.yekfi-signature .sig-shop-item:last-child{border-bottom:0} body.yekfi-signature .sig-shop-check{ width:44px;height:44px;min-width:44px;min-height:44px;border-radius:var(--radius-card); border:1.5px solid #BDB39F;background:#FFFEFA;color:var(--yk28-forest);box-shadow:none; } body.yekfi-signature .sig-shop-check.checked{background:var(--yk28-forest);color:white;border-color:var(--yk28-forest)} body.yekfi-signature .sig-shop-thumb{ width:60px;height:60px;border-radius:var(--radius-card);object-fit:cover; border:1px solid #D8CEBC;background:#F5F1E8;box-shadow:0 3px 10px rgba(31,43,33,.05); } body.yekfi-signature .sig-shop-main{ min-width:0;width:100%;min-height:66px;padding:0;border:0;background:transparent;box-shadow:none; display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:right; } body.yekfi-signature .sig-shop-main>b{width:100%;font-size:15px;line-height:1.35;color:var(--yk28-forest-deep);font-weight:950;overflow-wrap:anywhere} body.yekfi-signature .sig-shop-main>small{ width:100%;margin-top:5px;font-size:11.5px;line-height:1.45;color:#606961; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } body.yekfi-signature .sig-shop-main>em{width:100%;margin-top:5px;font-size:11px;line-height:1.3;color:#3F6848;font-style:normal;font-weight:800} body.yekfi-signature .sig-shop-qty{min-width:90px;text-align:left;justify-self:end;align-self:center} body.yekfi-signature .sig-shop-qty b{font-size:15px;line-height:1.25;color:var(--yk28-forest-deep);white-space:normal} body.yekfi-signature .sig-shop-qty small{display:block;margin-top:5px;font-size:11.5px;line-height:1.2;color:#5F685F} body.yekfi-signature .sig-shop-item.done{background:#F5F5EF;opacity:.72} /* Forms and buttons: quiet outlines, centered simple labels, start-aligned rich controls. */ body.yekfi-signature :is(.input,input:not([type="checkbox"]):not([type="radio"]),select,textarea){ min-height:46px;background:#FFFFFF;border:1px solid #CFC5B4;color:var(--yk28-ink); border-radius:var(--radius-card);box-shadow:none;font-size:13px;line-height:1.45; } body.yekfi-signature textarea{padding-block:12px} body.yekfi-signature .field label{margin-bottom:6px;color:#566158;font-size:12px;font-weight:800} body.yekfi-signature :is(.btn,.sig-btn,.pill-btn,.filter-chip,.option,.shopping-domains button,.plan-assist-actions button){ min-height:46px;line-height:1.3;border-radius:var(--radius-card); } body.yekfi-signature :is(.btn,.sig-btn,.pill-btn,.filter-chip,.option,.shopping-domains button,.plan-assist-actions button)>:is(span,b,strong,small,em){text-align:center} /* ====================================================================== ITERATION 4 — SCREEN-BY-SCREEN INTEGRATION ====================================================================== */ /* Today */ body.yekfi-signature .sig-today-page{gap:15px} body.yekfi-signature .sig-context-bar{background:#FFFCF6;border-color:#D8CEBC;box-shadow:var(--yk28-shadow-soft)} body.yekfi-signature .delight-glance{gap:9px} body.yekfi-signature .delight-glance>span,body.yekfi-signature .delight-glance>button{background:#FFFCF6;border-color:#D9CFBD;box-shadow:none} /* Week */ body.yekfi-signature .sig-day-strip{gap:7px} body.yekfi-signature .sig-day{border-color:#D4CAB8;background:#FFFCF7;box-shadow:none} body.yekfi-signature .sig-day.active{background:#F8EAC3;border-color:#C89A3A;box-shadow:0 0 0 2px rgba(201,154,58,.12)} body.yekfi-signature .sig-week-card{background:#FFFCF6;border-color:#D7CBB8;box-shadow:0 5px 16px rgba(31,43,33,.045)} body.yekfi-signature .sig-week-row-actions{gap:9px} /* Stock / household */ body.yekfi-signature :is(.home-stock-list,.monthly-house-list,.user-products-card,.household-board-preview-card){background:#FFFCF6} body.yekfi-signature :is(.stock-food-row,.home-house-row,.user-product-row,.household-board-row){border-color:#DDD2C0;background:#FFFDF9} /* Plan Studio */ body.yekfi-signature .plan-studio-step{padding:16px;border-color:#D6CAB6;background:#FFFCF6;box-shadow:0 9px 24px rgba(31,43,33,.06)} body.yekfi-signature .plan-studio-step.is-complete{background:#F7FAF3;border-color:#BFCDBB} body.yekfi-signature .plan-mode-buttons{gap:10px} body.yekfi-signature .plan-mode-buttons button{background:#FFFFFF;border-color:#D1C6B4} body.yekfi-signature .plan-mode-buttons button.selected{background:#FFF5D8;border-color:#C99A37} /* Household vs grocery modules remain unmistakably different. */ body.yekfi-signature .grocery-requests-panel,body.yekfi-signature .grocery-request-module{ background:#FFF5DE;border-color:#D9B65E;box-shadow:0 8px 22px rgba(110,78,22,.07); } body.yekfi-signature .household-board-preview-card,body.yekfi-signature .house-request-module.request-kind{ background:#EEF6EA;border-color:#9FB69C;box-shadow:0 8px 22px rgba(52,82,50,.065); } body.yekfi-signature .house-request-module.note-kind{background:#F7F0DE;border-color:#D8C487} /* Bottom navigation: distinct from page surface, calm active state. */ body.yekfi-signature .bottom-nav{ background:rgba(255,252,246,.985);border:1px solid #D5CAB7; box-shadow:0 -10px 28px rgba(31,43,33,.10); } body.yekfi-signature .nav-btn{color:#657067;background:transparent;box-shadow:none} body.yekfi-signature .nav-btn.active{color:var(--yk28-forest);background:#F4E8C7;border:1px solid #D9BC72;box-shadow:none} /* Sheets */ body.yekfi-signature .sheet-panel{background:#FFFCF7;color:var(--yk28-ink);box-shadow:0 -20px 55px rgba(24,34,27,.18)} body.yekfi-signature .sheet-head{background:#FFFCF7;border-bottom:1px solid rgba(207,197,180,.55);padding-bottom:9px} body.yekfi-signature .summary-banner{background:#F7F2E7;border-color:#DDD0BB;color:var(--yk28-ink)} body.yekfi-signature .summary-banner :is(b,strong){color:var(--yk28-forest)} body.yekfi-signature .note:not(.meal-budget-note){background:#F7F0DD;border:1px solid #E0D0AA;color:#5B625A} /* Responsive mobile composition based on real 390px screenshots. */ @media(max-width:560px){ body.yekfi-signature .content{padding-inline:12px} body.yekfi-signature .sig-page{gap:14px} body.yekfi-signature .sig-shopping-hero{min-height:490px;border-radius:var(--radius-hero)} body.yekfi-signature .sig-shopping-hero::before{background-position:24% center} body.yekfi-signature .sig-shopping-hero .sig-hero-shade{ background:linear-gradient(180deg,rgba(13,22,16,.10) 0%,rgba(13,22,16,.30) 34%,rgba(13,22,16,.90) 64%,rgba(13,22,16,.98) 100%); } body.yekfi-signature .sig-shopping-hero .sig-hero-copy{ width:100%;max-width:none;min-height:490px;padding:118px 16px 16px; justify-content:flex-end; } body.yekfi-signature .sig-shopping-hero .sig-hero-title{font-size:27px;line-height:1.18} body.yekfi-signature .sig-shopping-hero .sig-hero-copy>p{display:none} body.yekfi-signature .sig-shopping-stats.delight-shopping-stats{grid-template-columns:1fr 1fr;gap:8px} body.yekfi-signature .sig-shopping-stats.delight-shopping-stats>span:first-child{grid-column:1/-1;min-height:58px} body.yekfi-signature .sig-shopping-stats.delight-shopping-stats>span{min-height:56px;padding:8px 9px} body.yekfi-signature .sig-shopping-stats.delight-shopping-stats b{font-size:18px} body.yekfi-signature .sig-shopping-hero .price-trust-inline{min-height:60px} body.yekfi-signature .sig-shopping-hero .sig-hero-actions{gap:9px} body.yekfi-signature .sig-summary{padding:15px;border-radius:var(--radius-hero)} body.yekfi-signature .sig-summary-title>span>b{font-size:17px} body.yekfi-signature .sig-summary-score{font-size:30px} body.yekfi-signature .sig-metric{min-height:104px;padding:13px 10px} body.yekfi-signature .sig-metric strong{font-size:23px} body.yekfi-signature .sig-metric small{font-size:11.5px} body.yekfi-signature .sig-shop-item{grid-template-columns:44px 56px minmax(0,1fr) 84px;gap:8px;min-height:100px;padding:12px 10px} body.yekfi-signature .sig-shop-item:not(.has-food-thumb){grid-template-columns:44px minmax(0,1fr) 84px} body.yekfi-signature .sig-shop-thumb{width:56px;height:56px} body.yekfi-signature .sig-shop-qty{min-width:84px} body.yekfi-signature .sig-shop-main>b{font-size:14.5px} body.yekfi-signature .sig-shop-main>small{font-size:11px} } @media(max-width:360px){ body.yekfi-signature .sig-shopping-hero{min-height:510px} body.yekfi-signature .sig-shopping-hero .sig-hero-copy{min-height:510px;padding-inline:14px} body.yekfi-signature .sig-shopping-hero .sig-btn{font-size:12px;padding-inline:9px} body.yekfi-signature .sig-shop-item{grid-template-columns:42px 52px minmax(0,1fr);grid-auto-rows:auto} body.yekfi-signature .sig-shop-item:not(.has-food-thumb){grid-template-columns:42px minmax(0,1fr)} body.yekfi-signature .sig-shop-thumb{width:52px;height:52px} body.yekfi-signature .sig-shop-qty{grid-column:1/-1;min-width:0;width:100%;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:6px;border-top:1px dashed #E2D8C8;text-align:right} body.yekfi-signature .sig-shop-qty small{margin-top:0} } /* 200% text / zoom resilience: allow growth; never clip critical copy. */ @media(max-width:560px){ body.yekfi-signature :is(.sig-shop-main,.sig-summary,.price-trust-inline,.sig-metric,.menu-route){overflow:visible} body.yekfi-signature :is(.sig-shop-main>small,.price-trust-inline small,.sig-summary-title small,.sig-metric small){overflow-wrap:anywhere} } @media(prefers-reduced-motion:reduce){ body.yekfi-signature *{scroll-behavior:auto} } /* Grocery completion control: 44px hit area, visually quieter 30px box. */ body.yekfi-signature .sig-shop-check{ position:relative;background:transparent;border:0;box-shadow:none; color:var(--yk28-forest);isolation:isolate; } body.yekfi-signature .sig-shop-check::before{ content:"";position:absolute;inset:7px;border-radius:var(--radius-control);background:#FFFEFA;border:1.5px solid #BDB39F;z-index:-1; box-shadow:0 1px 3px rgba(31,43,33,.035); } body.yekfi-signature .sig-shop-check.checked{background:transparent;color:#fff} body.yekfi-signature .sig-shop-check.checked::before{background:var(--yk28-forest);border-color:var(--yk28-forest)} /* ===== consumer-freeze-v1073.css ===== */ /* YEKFI v10.7.3 — RC29 Final Consumer UI Freeze Surgical consumer UI system. Loaded last by design. */ :root{ --yk29-gap-xs:8px; --yk29-gap-sm:12px; --yk29-gap-md:20px; --yk29-gap-lg:28px; --yk29-header-h:116px; } /* ===== Header: exactly two calm rows, no floating overlaps ===== */ body.yekfi-signature .topbar{ position:sticky;top:0;z-index:70; display:flex;flex-direction:column;align-items:stretch; gap:0;width:min(100%,980px);height:auto; min-height:calc(var(--yk29-header-h) + env(safe-area-inset-top)); padding:max(6px,env(safe-area-inset-top)) 12px 7px; background:rgba(249,246,237,.985); border:0;border-radius:0 0 18px 18px; box-shadow:0 8px 24px rgba(31,44,33,.07); backdrop-filter:blur(20px) saturate(1.05); transition:none; } body.yekfi-signature .topbar::before, body.yekfi-signature .topbar::after{display:none} body.yekfi-signature .topbar-primary-row{ min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px; direction:rtl; } body.yekfi-signature .topbar-primary-row>.brand{ display:flex;align-items:center;justify-content:flex-start; gap:8px;min-width:0;max-width:55%;padding:0; background:transparent;transform:none;overflow:hidden; } body.yekfi-signature .brand-symbol-large{ width:46px;height:46px;min-width:46px;flex-basis:46px; object-fit:contain;filter:drop-shadow(0 4px 8px rgba(26,43,30,.12)); } body.yekfi-signature .brand-copy-field{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0} body.yekfi-signature .brand-wordmark-field{width:78px;max-width:78px;max-height:23px} body.yekfi-signature .brand-tagline-ar{font-size:10px;line-height:1.1;color:#687166;white-space:nowrap} body.yekfi-signature .topbar-utility-row{display:flex;align-items:center;justify-content:flex-start;gap:7px;direction:rtl;flex:0 0 auto} body.yekfi-signature :is(.topbar-plan-btn,.family-top-btn,.topbar>.topbar-primary-row .round-icon){ height:42px;min-height:42px;border:1px solid #CEC4AA;border-radius:var(--radius-card); background:#F2E9D5;color:var(--yk29-forest);box-shadow:none; display:flex;align-items:center;justify-content:center;gap:5px; font-weight:850;font-size:11.5px;padding:0 10px; } body.yekfi-signature .topbar-utility-row .round-icon{width:42px;min-width:42px;padding:0} body.yekfi-signature .topbar-utility-row .family-top-btn .ui-svg, body.yekfi-signature .topbar-plan-btn .ui-svg, body.yekfi-signature .topbar-utility-row .round-icon .ui-svg{width:19px;height:19px} body.yekfi-signature .topbar-utility-row :is(.topbar-plan-btn,.family-top-btn).active{background:var(--yk29-select-active);outline:1px solid var(--yk29-gold);outline-offset:-1px} body.yekfi-signature .topbar-separator{height:1px;width:100%;background:linear-gradient(90deg,transparent 0%,#D8CAA6 8%,#CDAE61 50%,#D8CAA6 92%,transparent 100%);opacity:.9} body.yekfi-signature .budget-strip{ min-height:48px;padding:5px 8px 4px;border:0;border-radius:0; background:transparent;color:var(--yk29-ink);box-shadow:none; display:grid;grid-template-columns:auto auto;grid-template-areas:"label value" "detail detail"; justify-content:center;align-items:center;column-gap:7px;row-gap:1px;text-align:center; } body.yekfi-signature .budget-strip-label{grid-area:label;font-size:11px;font-weight:750;color:var(--yk29-muted);line-height:1.1} body.yekfi-signature .budget-strip b{grid-area:value;font-size:17px;line-height:1.1;color:var(--yk29-forest);white-space:nowrap} body.yekfi-signature .budget-strip small{grid-area:detail;font-size:10.5px;line-height:1.15;color:#6C725F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92vw} body.yekfi-signature.header-compact .topbar{min-height:calc(var(--yk29-header-h) + env(safe-area-inset-top));height:auto;padding:max(6px,env(safe-area-inset-top)) 12px 7px} body.yekfi-signature .content{ padding-top:calc(var(--yk29-header-h) + env(safe-area-inset-top) + 14px); padding-bottom:calc(98px + env(safe-area-inset-bottom)); scroll-padding-top:calc(var(--yk29-header-h) + env(safe-area-inset-top) + 14px); } body.yekfi-signature :is(button,a,input,select,textarea,[tabindex]):focus-visible{scroll-margin-top:calc(var(--yk29-header-h) + env(safe-area-inset-top) + 16px)} @media(max-width:390px){ body.yekfi-signature .topbar{padding-inline:8px} body.yekfi-signature .brand-symbol-large{width:42px;height:42px;min-width:42px;flex-basis:42px} body.yekfi-signature .brand-wordmark-field{width:67px;max-width:67px} body.yekfi-signature .brand-tagline-ar{display:none} body.yekfi-signature .topbar-utility-row{gap:5px} body.yekfi-signature :is(.topbar-plan-btn,.family-top-btn){padding-inline:7px;font-size:10.5px} body.yekfi-signature .topbar-utility-row .round-icon{width:40px;min-width:40px} } @media(max-width:340px){body.yekfi-signature :is(.topbar-plan-btn,.family-top-btn){width:auto;min-width:62px;padding-inline:8px}} /* ===== Five destination navigation ===== */ body.yekfi-signature .bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:6px} body.yekfi-signature .bottom-nav .nav-btn{min-width:0;padding-inline:2px;font-size:10.5px} body.yekfi-signature .bottom-nav .nav-btn span{font-size:10.5px;white-space:nowrap} body.yekfi-signature .bottom-nav .nav-btn.active{background:#E4D4A8;color:var(--yk29-forest);box-shadow:inset 0 0 0 1px var(--yk29-gold)} /* ===== Semantic card system ===== input = white; information/action/selection = tinted by function. */ body.yekfi-signature :is(.summary-banner,.stock-kpis>div,.sig-shopping-stats>span,.delight-shop-progress,.choice-summary,.plan-health-card,.today-intel,.runtime-recovery-card,.cloud-state,.pediatric-family-banner){ background:var(--yk29-info);color:var(--yk29-ink);border:1px solid #C7D0BC;box-shadow:none; } body.yekfi-signature :is(.menu-route,.sig-family-actions>button,.household-control-grid>button,.strategic-goal-card,.card-tap,.memo-next-card){ background:var(--yk29-action);color:var(--yk29-ink);border:1px solid #D3B96F;box-shadow:none; } body.yekfi-signature :is(.field,.input,textarea,select,.universe-search,.store-search){background:var(--yk29-input);color:var(--yk29-ink)} body.yekfi-signature :is(.shopping-scope-tabs button,.filter-chip,.universe-shortcuts button,.strategic-goal-pick,.plan-studio-mode-card,.plan-studio-cuisine-card,.appearance-option){ background:var(--yk29-select);color:var(--yk29-ink);border:1px solid #CBC3AF;box-shadow:none; } body.yekfi-signature :is(.shopping-scope-tabs button,.filter-chip,.universe-shortcuts button,.strategic-goal-pick,.plan-studio-mode-card,.plan-studio-cuisine-card,.appearance-option).active, body.yekfi-signature :is(.shopping-scope-tabs button,.filter-chip,.universe-shortcuts button,.strategic-goal-pick,.plan-studio-mode-card,.plan-studio-cuisine-card,.appearance-option).selected{ background:var(--yk29-select-active);border-color:var(--yk29-gold);box-shadow:inset 0 0 0 1px rgba(201,149,46,.22); } body.yekfi-signature :is(.summary-banner.package-note,.memo-next-card,.sig-profile-note,.nutrition-alert,.delight-shop-progress){border:1px solid var(--yk29-gold)} /* ===== Global vertical rhythm: Today/Week quality generalized ===== */ body.yekfi-signature :is(.sig-shopping-page,.stock-page,.memo-page,.sig-family-page){display:flex;flex-direction:column;gap:var(--yk29-gap-lg)} body.yekfi-signature :is(.sig-shopping-page,.stock-page,.memo-page,.sig-family-page)>.sig-section{margin:0} body.yekfi-signature :is(.sig-shopping-page,.stock-page,.memo-page,.sig-family-page) .sig-section-head{margin-bottom:var(--yk29-gap-sm)} body.yekfi-signature :is(.sig-shopping-page,.stock-page,.memo-page,.sig-family-page) :is(.home-stock-list,.stock-purchase-list,.sig-member-list,.memo-list){display:flex;flex-direction:column;gap:var(--yk29-gap-sm)} /* ===== Grocery/Monthly list: check > fixed image > description, second line qty + price ===== */ body.yekfi-signature .sig-shop-category{display:flex;flex-direction:column;gap:10px;margin-bottom:22px} body.yekfi-signature .sig-shop-category+.sig-shop-category{padding-top:20px;border-top:1px solid #D8CEB8} body.yekfi-signature .sig-shop-item{ display:grid;grid-template-columns:minmax(0,1fr) 64px 46px; grid-template-areas:"main thumb check" "meta thumb check"; align-items:center;column-gap:10px;row-gap:7px; padding:12px;margin:0;min-height:104px; border:1px solid #CFC4AB;border-radius:var(--radius-card); background:#E8E3D6;box-shadow:0 4px 12px rgba(34,48,37,.045); } body.yekfi-signature .sig-shop-item.done{background:#DCE4D5;border-color:#BFCBB8;opacity:.82} body.yekfi-signature .sig-shop-item+.sig-shop-item{margin-top:10px} body.yekfi-signature .sig-shop-check{grid-area:check;width:44px;min-width:44px;height:44px;min-height:44px;border-radius:var(--radius-card);border:1px solid #B8AA8A;background:#FFFDF8;color:var(--yk29-forest);display:grid;place-items:center;font-size:21px;font-weight:950;padding:0} body.yekfi-signature .sig-shop-check.checked{background:var(--yk29-forest);color:#fff;border-color:var(--yk29-forest)} body.yekfi-signature .sig-shop-thumb-slot{grid-area:thumb;width:64px;height:64px;display:grid;place-items:center;border-radius:var(--radius-card);background:#F5F0E5;border:1px solid #D4C9B2;overflow:hidden} body.yekfi-signature .sig-shop-thumb{width:64px;height:64px;object-fit:cover;border:0;border-radius:var(--radius-card)} body.yekfi-signature .sig-shop-thumb-placeholder{width:100%;height:100%;display:grid;place-items:center;color:#75806F} body.yekfi-signature .sig-shop-thumb-placeholder .ui-svg{width:24px;height:24px} body.yekfi-signature .sig-shop-main{grid-area:main;min-width:0;padding:0;border:0;background:transparent;text-align:right;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px} body.yekfi-signature .sig-shop-main b{font-size:15px;line-height:1.3;color:var(--yk29-forest);max-width:100%;white-space:normal} body.yekfi-signature .sig-shop-main small{font-size:11px;line-height:1.45;color:var(--yk29-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body.yekfi-signature .sig-shop-meta{grid-area:meta;display:flex;align-items:center;justify-content:flex-start;gap:16px;padding:6px 0 0;border:0;border-top:1px solid rgba(83,96,78,.16);background:transparent;text-align:right;min-width:0} body.yekfi-signature .sig-shop-meta>span{display:flex;align-items:baseline;gap:5px;min-width:0} body.yekfi-signature .sig-shop-meta small{font-size:10px;color:#73796E} body.yekfi-signature .sig-shop-meta b{font-size:13px;color:var(--yk29-forest);white-space:nowrap} @media(max-width:360px){body.yekfi-signature .sig-shop-item{grid-template-columns:minmax(0,1fr) 56px 44px;column-gap:8px;padding:10px}body.yekfi-signature .sig-shop-thumb-slot,body.yekfi-signature .sig-shop-thumb{width:56px;height:56px}} /* ===== Memo page ===== */ body.yekfi-signature .memo-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:20px;border-radius:var(--radius-hero);background:#DDE6D5;border:1px solid #BCCBB8;color:var(--yk29-ink)} body.yekfi-signature .memo-hero h1{margin:4px 0 6px;font-size:24px;line-height:1.25;color:var(--yk29-forest)} body.yekfi-signature .memo-hero p{margin:0;color:var(--yk29-muted);line-height:1.6} body.yekfi-signature .memo-add-main{min-height:46px;white-space:nowrap;padding:0 16px;border-radius:var(--radius-card);border:1px solid var(--yk29-gold);background:var(--yk29-forest);color:#fff;font-weight:900} body.yekfi-signature .memo-next-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:right;padding:16px;border-radius:var(--radius-card)} body.yekfi-signature .memo-next-card small{color:#745B22}.memo-next-card b{font-size:17px}.memo-next-card span{font-size:12px;color:var(--yk29-muted)} body.yekfi-signature .memo-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;padding:11px;border-radius:var(--radius-card);border:1px solid #C9C5B3;background:#E9E4D8} body.yekfi-signature .memo-row.high{border-color:var(--yk29-gold);background:#EEE0B9}.memo-row.overdue{border-color:#B78267;background:#E9D7CC}.memo-row.done{opacity:.62} body.yekfi-signature .memo-check{width:44px;height:44px;border-radius:var(--radius-card);border:1px solid #B7AC94;background:#FFFDF8;color:var(--yk29-forest);font-weight:950;font-size:20px} body.yekfi-signature .memo-row.done .memo-check{background:var(--yk29-forest);color:#fff} body.yekfi-signature .memo-main{border:0;background:transparent;text-align:right;padding:0;min-width:0;display:flex;flex-direction:column;gap:5px} body.yekfi-signature .memo-row-top{display:flex;justify-content:space-between;gap:10px;align-items:center;min-width:0}.memo-row-top b{color:var(--yk29-forest);font-size:14.5px}.memo-row-top em{font-size:10px;font-style:normal;color:#725C2D;background:#F1E2B7;border-radius:var(--radius-pill);padding:3px 7px;white-space:nowrap}.memo-main small{color:var(--yk29-muted);font-size:11px} body.yekfi-signature .memo-done{padding:12px 14px;border:1px solid #CAC2AE;border-radius:var(--radius-card);background:#E7E2D7}.memo-done summary{font-weight:850;color:var(--yk29-forest);cursor:pointer} body.yekfi-signature .memo-editor{display:flex;flex-direction:column;gap:14px}.memo-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.memo-priority{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:var(--radius-card);background:#EEE5CF;border:1px solid #D5C7A7;font-weight:800}.memo-reminder-note{padding:12px 14px;border-radius:var(--radius-card);background:#E3E8DA;border:1px solid #C5CFBC;display:flex;flex-direction:column;gap:3px}.memo-reminder-note small{color:var(--yk29-muted)} /* ===== Important frames: fine gold only ===== */ body.yekfi-signature :is(.sig-shopping-hero,.memo-next-card,.package-note,.delight-shop-progress,.sig-profile-note){outline:1px solid rgba(201,149,46,.62);outline-offset:-1px} /* ===== Button alignment contract ===== */ body.yekfi-signature :is(.btn,.sig-btn,.pill-btn,.menu-route,.shopping-scope-tabs button,.bottom-nav .nav-btn,.topbar-plan-btn,.family-top-btn,.memo-add-main){align-items:center;justify-content:center} body.yekfi-signature :is(.btn,.sig-btn,.pill-btn){min-height:46px} /* ===== notification-center-v1074.css ===== */ /* YEKFI v10.7.4 RC30 — Notifications & Engagement Infrastructure */ .notify-center{display:grid;gap:18px;padding-bottom:12px;color:#183323} .notify-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:18px;border:1px solid rgba(46,77,43,.22);border-radius:var(--radius-hero);background:#E2E8D9;box-shadow:0 10px 24px rgba(37,54,37,.07)} .notify-hero.ready{border-color:rgba(201,149,46,.7);box-shadow:inset 0 0 0 1px rgba(201,149,46,.12),0 10px 24px rgba(37,54,37,.08)} .notify-hero h3{margin:5px 0 7px;font-size:1.14rem;line-height:1.35}.notify-hero p{margin:0;color:#526052;line-height:1.65;font-size:.92rem}.notify-state{flex:0 0 auto;padding:7px 10px;border-radius:var(--radius-pill);background:rgba(255,253,248,.76);border:1px solid rgba(46,77,43,.15);font-size:.76rem;font-weight:800;color:#365139} .notify-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.notify-card{min-height:138px;border:1px solid rgba(46,77,43,.2);border-radius:var(--radius-card);padding:15px;text-align:right;background:#E8E3D6;color:#183323;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon state" "title title" "copy copy";gap:6px 10px;align-content:start;box-shadow:0 7px 18px rgba(38,50,37,.055);transition:transform .16s ease,border-color .16s ease,background .16s ease}.notify-card>span{grid-area:icon;font-size:1.25rem}.notify-card>b{grid-area:title;font-size:1rem}.notify-card>small{grid-area:copy;color:#566056;line-height:1.5}.notify-card>em{grid-area:state;justify-self:end;align-self:start;font-style:normal;font-size:.74rem;font-weight:900;color:#6C7168}.notify-card.on{background:#D7E3CC;border-color:#C9952E;box-shadow:inset 0 0 0 1px rgba(201,149,46,.2),0 8px 20px rgba(38,50,37,.075)}.notify-card.on>em{color:#2E5B32}.notify-card:active{transform:scale(.988)} .notify-settings-card{display:grid;gap:14px;padding:17px;border:1px solid rgba(46,77,43,.18);border-radius:var(--radius-hero);background:#E2E8D9}.notify-section-head b{display:block;font-size:1.02rem}.notify-section-head small{display:block;margin-top:4px;color:#59665A;line-height:1.55}.notify-time-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.notify-time-grid.three{grid-template-columns:repeat(3,1fr)}.notify-time-grid label,.notify-lead-label{display:grid;gap:6px;font-size:.78rem;font-weight:800;color:#46574A}.notify-settings-card .input{background:#FFFDF8;border-color:rgba(46,77,43,.22);min-height:46px}.notify-actions{display:grid;gap:10px}.notify-note{padding:13px 15px;border-radius:var(--radius-card);background:#E8E3D6;border:1px solid rgba(46,77,43,.16);display:grid;gap:4px}.notify-note b{font-size:.9rem}.notify-note small{color:#5C645D;line-height:1.55}.notify-note.warn{background:#F2E4BE;border-color:rgba(201,149,46,.48)} .notification-route{background:#E2E8D9}.notification-route .ui-icon{background:rgba(255,253,248,.7)} @media(max-width:520px){.notify-grid{grid-template-columns:1fr}.notify-card{min-height:116px}.notify-time-grid.three{grid-template-columns:1fr}.notify-hero{flex-direction:column}.notify-state{align-self:flex-start}} @media(prefers-reduced-motion:reduce){.notify-card{transition:none}} /* ===== beta-readiness-v1075.css ===== */ /* YEKFI v10.7.5 — RC31 Beta Readiness Closure Final low-risk accessibility and truth-clarity overrides. */ :root{ --yk31-touch:44px; --yk31-readable:11px; } /* Important interactive controls never fall below the product's 44px touch contract. */ body.yekfi-signature .topbar button, body.yekfi-signature .topbar .round-icon, body.yekfi-signature .topbar .family-top-btn, body.yekfi-signature .topbar .plan-top-btn, body.yekfi-signature .bottom-nav button, body.yekfi-signature .bottom-nav .nav-btn, body.yekfi-signature .modal-close-control, body.yekfi-signature .sig-shop-check, body.yekfi-signature .memo-check, body.yekfi-signature .notify-card{ min-width:var(--yk31-touch); min-height:var(--yk31-touch); } /* Keep visual icons compact while preserving the hit area. */ body.yekfi-signature .topbar .brand-symbol-large{ width:42px;height:42px;min-width:42px;flex-basis:42px; } /* Essential microcopy must remain readable on real phones. */ body.yekfi-signature .brand-tagline-ar, body.yekfi-signature .budget-pill small, body.yekfi-signature .bottom-nav small, body.yekfi-signature .bottom-nav span, body.yekfi-signature .sig-shop-meta small, body.yekfi-signature .memo-row-top em, body.yekfi-signature .menu-release-note small, body.yekfi-signature .tiny-muted, body.yekfi-signature .trust-disclaimer small, body.yekfi-signature .notify-card small{ font-size:max(var(--yk31-readable),1em); } /* Avoid accidentally enlarging text inherited from parent typography. */ body.yekfi-signature .tiny-muted, body.yekfi-signature .trust-disclaimer small, body.yekfi-signature .notify-card small{font-size:11.5px;line-height:1.55} body.yekfi-signature .bottom-nav small, body.yekfi-signature .bottom-nav span{font-size:11px;line-height:1.25} body.yekfi-signature .budget-pill small, body.yekfi-signature .brand-tagline-ar, body.yekfi-signature .sig-shop-meta small, body.yekfi-signature .memo-row-top em, body.yekfi-signature .menu-release-note small{font-size:11px} /* Clearer focus visibility on fixed-header/mobile layouts. */ body.yekfi-signature :where(button,a,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid #C9972B; outline-offset:3px; scroll-margin-block:calc(var(--app-header-h,120px) + 18px) 96px; } /* Beta truth statements should read as product facts, not footnotes. */ body.yekfi-signature .trust-disclaimer{ border-width:1px; box-shadow:0 6px 18px rgba(43,61,45,.06); } body.yekfi-signature .trust-disclaimer.nutrition{background:#EEF3EA;border-color:#A9B89F} body.yekfi-signature .trust-disclaimer.price{background:#F6EEDB;border-color:#D5B86F} /* ===== real-device-visual-closure-v1076.css ===== YEKFI v10.7.6 — RC32 Real Device & Visual Closure Low-risk geometry/accessibility safeguards. Protected planning core unchanged. */ :root{--yk32-touch:44px;--yk32-space:14px;--yk32-bottom-safe:calc(88px + env(safe-area-inset-bottom));} html,body{max-width:100%;overflow-x:clip;} body.yekfi-signature .app-shell,body.yekfi-signature .content,body.yekfi-signature .view{max-width:100%;min-width:0;overflow-x:clip;} body.yekfi-signature :is(.card,.panel,.sheet-panel,.composer-shell,.on-card,.ready-card,.loader-card,.modal>*,.sig-shop-item,.memo-row,.menu-route,.plan-studio-step){max-width:100%;min-width:0;} body.yekfi-signature img,body.yekfi-signature svg{max-width:100%;} /* Sticky header participates in document flow: do not reserve its height twice. */ body.yekfi-signature .content{padding-top:var(--yk32-space);scroll-padding-top:calc(var(--app-header-h,116px) + 16px);padding-bottom:var(--yk32-bottom-safe);} body.yekfi-signature :where(button,a,input,select,textarea,[tabindex]):focus-visible{scroll-margin-top:calc(var(--app-header-h,116px) + 16px);scroll-margin-bottom:calc(var(--app-bottom-nav-h,76px) + 16px);} /* Header controls keep a real 44px hit target at every phone width. */ body.yekfi-signature .topbar :is(button,.round-icon,.topbar-plan-btn,.family-top-btn){min-width:var(--yk32-touch);min-height:var(--yk32-touch);} body.yekfi-signature .topbar :is(.topbar-plan-btn,.family-top-btn){font-size:11px;line-height:1.2;} body.yekfi-signature .budget-strip-label,body.yekfi-signature .budget-strip small{font-size:11px;} /* Bottom nav: readable labels, safe-area support, internal scrolling only at extreme zoom. */ body.yekfi-signature .bottom-nav{padding-bottom:max(6px,env(safe-area-inset-bottom));max-width:100vw;} body.yekfi-signature .bottom-nav .nav-btn{min-height:48px;min-width:44px;} body.yekfi-signature .bottom-nav .nav-btn span{font-size:11px;line-height:1.15;} @media(max-width:280px){body.yekfi-signature .bottom-nav{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;}body.yekfi-signature .bottom-nav::-webkit-scrollbar{display:none}body.yekfi-signature .bottom-nav .nav-btn{flex:0 0 52px;}body.yekfi-signature .bottom-nav .nav-btn span{display:none;}} /* iOS form focus must not trigger involuntary viewport zoom. */ @media(max-width:899px){body.yekfi-signature :is(input,select,textarea){font-size:16px;}body.yekfi-signature .topbar-primary-row{gap:8px;}body.yekfi-signature .topbar-utility-row{gap:6px;}} /* Narrow phones: preserve geometry before decorative copy. */ @media(max-width:360px){body.yekfi-signature .brand-tagline-ar{display:none;}body.yekfi-signature .topbar{padding-inline:7px;}body.yekfi-signature .topbar-primary-row{gap:6px;}body.yekfi-signature .topbar-utility-row{gap:4px;}body.yekfi-signature :is(.topbar-plan-btn,.family-top-btn){padding-inline:6px;}} @media(max-width:330px){body.yekfi-signature :is(.topbar-plan-btn,.family-top-btn){width:auto;min-width:62px;padding-inline:8px;}body.yekfi-signature .brand-wordmark-field{width:60px;max-width:60px;}} /* Long rows and cards may grow under 200% text without clipping. */ body.yekfi-signature :is(.sig-shop-item,.memo-row,.menu-route,.notify-card,.plan-studio-step,.summary-banner,.stock-kpis>div){height:auto;} body.yekfi-signature :is(.sig-shop-main,.sig-shop-meta,.memo-main,.menu-route,.notify-card,.plan-studio-step,.summary-banner){overflow-wrap:anywhere;word-break:normal;} body.yekfi-signature .sig-shop-meta{flex-wrap:wrap;row-gap:4px;} /* Sheets/modals: viewport and safe-area closure. */ body.yekfi-signature .modal{max-width:100vw;overflow-x:hidden;} body.yekfi-signature .sheet-panel,body.yekfi-signature .composer-shell,body.yekfi-signature .on-card,body.yekfi-signature .ready-card,body.yekfi-signature .loader-card{max-height:calc(100dvh - env(safe-area-inset-top) - 10px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(16px,env(safe-area-inset-bottom));} body.yekfi-signature .sheet-panel{border-radius:22px 22px 0 0;} /* 200% text and accessibility text-size adjustments: prefer wrapping over overlap. */ @supports (-webkit-touch-callout:none){body.yekfi-signature{-webkit-text-size-adjust:100%;}} @media(max-width:520px){body.yekfi-signature .topbar-primary-row{align-items:center;}body.yekfi-signature .budget-strip{min-height:46px;}body.yekfi-signature :is(.memo-date-grid,.notify-time-grid){grid-template-columns:1fr;}body.yekfi-signature .plan-mode-buttons{grid-template-columns:1fr;}} @media(prefers-reduced-motion:reduce){body.yekfi-signature *{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms;}} /* RC32 narrow/text-scale finishing guards. */ body.yekfi-signature .budget-strip small{white-space:normal;overflow:visible;text-overflow:clip;max-width:min(92vw,520px);text-align:center;} @media(max-width:360px){body.yekfi-signature .brand-copy-field{display:none;}body.yekfi-signature .topbar-primary-row>.brand{max-width:48px;flex:0 0 48px;}body.yekfi-signature .topbar-utility-row{flex:1 1 auto;justify-content:flex-start;min-width:0;}body.yekfi-signature :is(.topbar-plan-btn,.family-top-btn){flex:1 1 auto;max-width:86px;}} /* ===== performance-closure-v1077.css ===== */ /* Paint containment only on long repeated rows; no forms, sticky or hero content. */ @supports (content-visibility:auto){ body.yekfi-signature :is(.sig-shop-item,.memo-row,.saved-plan-row,.universe-row,.stock-item-row){content-visibility:auto;contain-intrinsic-size:auto 88px;} } /* ===== beta-truth-scope-freeze-v1078.css ===== */ body.yekfi-signature .menu-release-note{border:1px solid rgba(201,149,46,.38);background:#F5ECD5;} body.yekfi-signature .trust-facts .trust-row b{line-height:1.45;} /* ===================================================================== YEKFI v10.8.3 — RC39 FINAL BRAND / GEOMETRY AUTHORITY One palette · four radii · one spacing rhythm · system Arabic fonts. This is the only RC39 visual authority. Historic rules remain behavior-only. ===================================================================== */ :root{ --color-bg:#F5F6EF; --color-paper:#FFFFFF; --color-food:#F3EBDD; --color-brand:#2F4A34; --color-brand-strong:#203326; --color-brand-soft:#D9E5D7; --color-accent:#C79A36; --color-accent-strong:#A97722; --color-accent-soft:#F1DEA2; --color-price:#B9752A; --color-danger:#9A4F3B; --color-ink:#2B2620; --color-muted:#5F685F; --color-border:#C5C9BE; --color-border-strong:#AAB2A7; --color-disabled:#727A72; --color-info:#DDE7DB; --color-card:#E7EBE3; --color-card-strong:#DCE4D9; --color-selection:#E6E8E0; --color-selection-active:#DEE8D6; --color-action:#E7D39B; --shadow-card:0 3px 10px rgba(32,51,38,.07); --shadow-nav:0 10px 28px rgba(32,51,38,.16); --radius-price:8px; --radius-control:10px; --radius-card:16px; --radius-hero:22px; --radius-pill:999px; --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px; /* Legacy selector compatibility: aliases only, no parallel palette. */ --brand-border:var(--color-border);--brand-cream:var(--color-bg);--brand-deep:var(--color-brand-strong);--brand-gold:var(--color-accent);--brand-gold-hi:var(--color-accent);--brand-gold-soft:var(--color-accent-soft);--brand-gold-text:var(--color-price);--brand-ink:var(--color-ink);--brand-muted:var(--color-muted);--brand-olive:var(--color-brand);--brand-olive-2:var(--color-brand);--brand-paper:var(--color-paper);--brand-sand:var(--color-action);--brand-surface:var(--color-paper);--brand-surface-soft:var(--color-bg);--cd-gold:var(--color-accent);--cd-green:var(--color-brand);--cd-line:var(--color-border);--cd-muted:var(--color-muted);--cd-olive:var(--color-brand);--cd-radius:var(--radius-hero);--cd-radius-sm:var(--radius-card);--cd-shadow:var(--shadow-card);--cd-shadow-soft:var(--shadow-card);--cd-surface:var(--color-paper);--cd-surface-strong:var(--color-card);--ux17-gold:var(--color-accent);--ux17-green:var(--color-brand);--ux17-line:var(--color-border);--ux18-gold:var(--color-accent);--ux18-green:var(--color-brand);--ux18-ink:var(--color-ink);--ux18-line:var(--color-border);--ux18-line-strong:var(--color-border-strong);--ux18-muted:var(--color-muted);--ux18-olive:var(--color-brand);--ux18-paper:var(--color-paper);--ux18-paper-2:var(--color-bg);--ux18-radius:var(--radius-hero);--ux18-radius-sm:var(--radius-card);--ux18-shadow:var(--shadow-card);--ux18-shadow-soft:var(--shadow-card);--ux18-soft:var(--color-disabled);--ux19-gold:var(--color-accent);--ux19-gold-soft:var(--color-accent-soft);--ux19-ink:var(--color-ink);--ux19-muted:var(--color-muted);--ux19-success:var(--color-brand);--ux19-success-soft:var(--color-brand-soft);--yi-cream:var(--color-bg);--yi-deep:var(--color-brand-strong);--yi-gold:var(--color-accent);--yi-gold-deep:var(--color-accent-strong);--yi-gold-soft:var(--color-accent-soft);--yi-header-base:var(--color-bg);--yi-header-total:var(--color-paper);--yi-ink:var(--color-ink);--yi-line:var(--color-border);--yi-line-green:var(--color-brand-soft);--yi-muted:var(--color-muted);--yi-olive:var(--color-brand);--yi-olive-light:var(--color-brand-soft);--yi-paper:var(--color-paper);--yi-paper-2:var(--color-bg);--yi-shadow:var(--shadow-card);--yi-shadow-strong:var(--shadow-card);--yk28-bg:var(--color-bg);--yk28-forest:var(--color-brand);--yk28-forest-2:var(--color-brand);--yk28-forest-deep:var(--color-brand-strong);--yk28-gold:var(--color-accent);--yk28-gold-deep:var(--color-accent-strong);--yk28-gold-soft:var(--color-accent-soft);--yk28-ink:var(--color-ink);--yk28-line:var(--color-border);--yk28-line-strong:var(--color-border-strong);--yk28-muted:var(--color-muted);--yk28-paper:var(--color-paper);--yk28-paper-soft:var(--color-bg);--yk28-paper-strong:var(--color-card);--yk28-shadow:var(--shadow-card);--yk28-shadow-soft:var(--shadow-card);--yk29-action:var(--color-action);--yk29-action-strong:var(--color-accent-soft);--yk29-alert:var(--color-danger);--yk29-bg:var(--color-bg);--yk29-forest:var(--color-brand);--yk29-forest-2:var(--color-brand);--yk29-gold:var(--color-accent);--yk29-gold-soft:var(--color-accent-soft);--yk29-info:var(--color-info);--yk29-info-strong:var(--color-card-strong);--yk29-ink:var(--color-ink);--yk29-input:var(--color-paper);--yk29-line:var(--color-border);--yk29-muted:var(--color-muted);--yk29-select:var(--color-selection);--yk29-select-active:var(--color-selection-active);--yk-v27-bg:var(--color-bg);--yk-v27-card-shadow:var(--shadow-card);--yk-v27-card-shadow-hover:var(--shadow-card);--yk-v27-control-shadow:var(--shadow-card);--yk-v27-danger:var(--color-danger);--yk-v27-forest:var(--color-brand);--yk-v27-forest-dark:var(--color-brand-strong);--yk-v27-gold:var(--color-accent);--yk-v27-gold-light:var(--color-accent-soft);--yk-v27-gold-mid:var(--color-accent);--yk-v27-gold-soft:var(--color-accent-soft);--yk-v27-ink:var(--color-ink);--yk-v27-line:var(--color-border);--yk-v27-line-strong:var(--color-border-strong);--yk-v27-muted:var(--color-muted);--yk-v27-surface:var(--color-paper);--yk-v27-surface-raised:var(--color-paper);--yk-v27-surface-soft:var(--color-bg); } html{background:var(--color-bg);color:var(--color-ink);overflow-x:hidden;} body.yekfi-signature{ margin:0;min-width:0;max-width:100vw;overflow-x:hidden; background:var(--color-bg);color:var(--color-ink); font-family:-apple-system,BlinkMacSystemFont,"SF Arabic","Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%; } body.yekfi-signature *,body.yekfi-signature *::before,body.yekfi-signature *::after{box-sizing:border-box;} body.yekfi-signature :where(button,input,select,textarea){font:inherit;color:inherit;} /* Skip link is keyboard-only. Mobile Safari must never surface it into the status bar. */ body.yekfi-signature .skip-link{display:none;position:fixed;z-index:10000;} body.yekfi-signature.keyboard-nav .skip-link:focus, body.yekfi-signature.keyboard-nav .skip-link:focus-visible{ display:block;inset-inline-start:12px;top:max(10px,env(safe-area-inset-top)); width:auto;height:auto;padding:10px 14px;border-radius:var(--radius-control); background:var(--color-brand-strong);color:#fff;clip:auto;transform:none;overflow:visible; } /* ===== App chrome — reset every historic positioning primitive ===== */ body.yekfi-signature .app-shell{width:100%;max-width:980px;margin:0 auto;min-height:100dvh;overflow:visible;} body.yekfi-signature .topbar{ position:sticky;inset:auto;top:0;z-index:100;width:100%;max-width:100%;height:auto;min-height:0; display:flex;flex-direction:column;gap:0;margin:0; padding:max(8px,env(safe-area-inset-top)) 12px 7px; background:rgba(245,246,239,.985);border:0;border-bottom:1px solid var(--color-border);border-radius:0; box-shadow:0 4px 14px rgba(32,51,38,.08);backdrop-filter:blur(12px) saturate(1.04);overflow:visible;isolation:isolate; } body.yekfi-signature .topbar::before,body.yekfi-signature .topbar::after{display:none;content:none;} body.yekfi-signature :is(.topbar-primary-row,.topbar-utility-row,.topbar-primary-row>.brand,.topbar-separator,.budget-strip){ position:static;inset:auto;left:auto;right:auto;top:auto;bottom:auto; transform:none;translate:none;float:none;grid-area:auto;order:initial;clip:auto; } body.yekfi-signature .topbar-primary-row{ width:100%;min-width:0;min-height:50px;display:grid; grid-template-columns:minmax(108px,1fr) auto;align-items:center;gap:10px;direction:rtl;overflow:visible; } body.yekfi-signature .topbar-primary-row>.brand{ grid-column:1;justify-self:start;align-self:center;min-width:0;max-width:none;width:max-content;display:flex;align-items:center;justify-content:flex-start; gap:7px;margin:0;padding:0;border:0;background:transparent;overflow:visible; } body.yekfi-signature .brand-symbol-large{width:40px;height:40px;min-width:40px;flex:0 0 40px;object-fit:contain;} body.yekfi-signature .brand-copy-field{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-width:0;} body.yekfi-signature .brand-wordmark-field{display:block;width:70px;max-width:70px;height:18px;object-fit:contain;object-position:right center;} body.yekfi-signature .brand-tagline-ar{display:block;margin-top:1px;font-size:10.5px;line-height:1.2;font-weight:700;color:var(--color-muted);white-space:nowrap;} body.yekfi-signature .topbar-utility-row{ grid-column:2;justify-self:end;align-self:center;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:6px;direction:rtl;overflow:visible; } body.yekfi-signature :is(.topbar-plan-btn,.family-top-btn,.topbar-utility-row .round-icon){ position:static;inset:auto;transform:none;min-height:44px;height:44px;margin:0;padding:0 9px; border:1px solid var(--color-border);border-radius:var(--radius-control);background:#E7EAE3;color:var(--color-brand-strong); box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:5px; font-size:12px;font-weight:800;line-height:1;white-space:nowrap; } body.yekfi-signature .topbar-utility-row .round-icon{width:44px;min-width:44px;padding:0;} body.yekfi-signature .topbar-utility-row .ui-svg{width:18px;height:18px;} body.yekfi-signature .topbar-separator{display:block;width:100%;height:1px;min-height:1px;margin:6px 0 5px;padding:0;background:var(--color-border);border:0;border-radius:0;} body.yekfi-signature .budget-strip{ width:100%;min-height:40px;margin:0;padding:2px 8px;border:0;border-radius:0;background:transparent;box-shadow:none; display:grid;grid-template-columns:1fr;justify-items:center;align-content:center;gap:0;text-align:center;overflow:visible; } body.yekfi-signature .budget-strip-label{font-size:10.5px;line-height:1.15;font-weight:750;color:var(--color-muted);} body.yekfi-signature .budget-strip>b{font-size:18px;line-height:1.18;font-weight:900;color:var(--color-price);font-variant-numeric:tabular-nums;white-space:nowrap;} body.yekfi-signature .budget-strip>small{font-size:11px;line-height:1.2;font-weight:650;color:var(--color-muted);white-space:normal;text-align:center;} body.yekfi-signature .content{ width:100%;max-width:100%;min-width:0;margin:0; padding:20px 16px calc(var(--app-bottom-nav-h,76px) + env(safe-area-inset-bottom) + 40px);overflow-x:hidden; } body.yekfi-signature :is(.view,.sig-page){width:100%;max-width:100%;min-width:0;overflow:visible;} body.yekfi-signature .sig-page{display:flex;flex-direction:column;gap:24px;} body.yekfi-signature .sig-section{margin:0;padding:0;display:flex;flex-direction:column;gap:12px;} body.yekfi-signature .sig-section+.sig-section{margin-top:4px;} /* Bottom navigation — floating but measured; no content may sit under it. */ body.yekfi-signature .bottom-nav{ position:fixed;z-index:95;left:50%;right:auto;top:auto;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%); width:min(956px,calc(100% - 20px));max-width:956px;height:auto;min-height:68px;margin:0; padding:6px 8px;border:1px solid var(--color-border);border-radius:var(--radius-card);background:rgba(255,255,255,.985);box-shadow:var(--shadow-nav); display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;direction:rtl;overflow:visible; } body.yekfi-signature .bottom-nav .nav-btn{ position:static;inset:auto;transform:none;min-width:0;min-height:54px;margin:0;padding:5px 3px; border:1px solid transparent;border-radius:var(--radius-control);background:transparent;color:#596159; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:750;line-height:1.15; } body.yekfi-signature .bottom-nav .nav-btn i{width:24px;height:24px;display:grid;place-items:center;color:inherit;} body.yekfi-signature .bottom-nav .nav-btn .ui-svg{width:22px;height:22px;} body.yekfi-signature .bottom-nav .nav-btn.active{background:#F0D98F;color:var(--color-brand-strong);border-color:var(--color-accent);box-shadow:inset 0 0 0 1px rgba(199,154,54,.16);} body.yekfi-signature .bottom-nav .nav-btn.active::before{content:none;display:none;} /* ===== Typography ===== */ body.yekfi-signature :is(.page-title,.sig-hero-title,.memo-hero h1,.stock-hero h1){margin:0;font-size:clamp(26px,6vw,32px);font-weight:850;line-height:1.23;color:var(--color-brand-strong);letter-spacing:0;} body.yekfi-signature :is(.sig-section-head h2,.section-head h2,.category-head h3){margin:0;font-size:clamp(20px,4.7vw,24px);font-weight:850;line-height:1.28;color:var(--color-brand-strong);} body.yekfi-signature :is(.sig-page p,.sheet-panel p,.memo-hero p,.stock-hero p){font-size:15px;line-height:1.65;color:var(--color-muted);} body.yekfi-signature small{font-size:12px;line-height:1.45;color:var(--color-muted);} body.yekfi-signature :is(.sig-hero-overline,.eyebrow,.microtag){font-size:12px;font-weight:800;line-height:1.3;color:var(--color-accent-strong);} /* ===== Semantic card language ===== */ body.yekfi-signature :is(.summary-banner,.today-intel,.cloud-state,.stock-hero){background:var(--color-info);border:1px solid #B4C4B2;color:var(--color-ink);box-shadow:none;} body.yekfi-signature :is(.card,.stat,.insight,.unit-card,.detail-stat,.ready-stat,.stock-food-row,.stock-purchase-row,.user-product-row,.member-card,.home-stock-group,.home-house-row,.memo-row){background:var(--color-card);border-color:var(--color-border);color:var(--color-ink);box-shadow:none;} body.yekfi-signature :is(.input,.field input,.field select,.field textarea,.composer-search,.universe-search,.store-search input){background:var(--color-paper);border:1px solid var(--color-border-strong);color:var(--color-ink);} body.yekfi-signature :is(.choice-row,.cuisine-card,.blend-card,.path-card,.plan-studio-mode-card,.plan-studio-cuisine-card){background:var(--color-selection);border:1px solid var(--color-border);color:var(--color-ink);box-shadow:none;} body.yekfi-signature :is(.choice-row,.cuisine-card,.blend-card,.path-card,.plan-studio-mode-card,.plan-studio-cuisine-card):is(.active,.selected){background:var(--color-selection-active);border-color:var(--color-accent);box-shadow:inset 0 0 0 1px rgba(199,154,54,.16);} body.yekfi-signature :is(.sig-btn-primary,.btn.primary,.memo-add-main,.monthly-buy-btn){background:var(--color-brand);color:#fff;border:1px solid var(--color-brand-strong);box-shadow:none;} body.yekfi-signature :is(.sig-btn-ghost,.btn.soft,.sig-summary-action,.home-mini-action){background:var(--color-action);color:var(--color-brand-strong);border:1px solid #C8A954;box-shadow:none;} body.yekfi-signature :is(.nav-btn.active,.shopping-scope-tabs button.active,.memo-row.high,.featured,.recommended){border-color:var(--color-accent);} /* Food containers are warm; financial surfaces remain precise. */ body.yekfi-signature :is(.sig-meal-row,.meal-card,.next-meal-card,.sig-next-hero,.delight-next-hero){background:var(--color-food);border:1px solid #D6CDBC;border-radius:var(--radius-hero);box-shadow:var(--shadow-card);color:var(--color-ink);} body.yekfi-signature .sig-meal-row{min-height:112px;padding:14px;gap:12px;} body.yekfi-signature .sig-meal-main b{font-size:17px;line-height:1.35;color:var(--color-brand-strong);} body.yekfi-signature .sig-meal-main em{font-style:normal;color:var(--color-muted);} body.yekfi-signature :is(.sig-shop-meta>span:last-child b,.store-total,.shop-total b,.money-value,.price-value,.budget-delta,.sig-hero-meta span:last-child){color:var(--color-price);font-variant-numeric:tabular-nums;} body.yekfi-signature :is(.store-total,.price-chip,.budget-chip){border-radius:var(--radius-price);} body.yekfi-signature :is(.budget-over,.over-budget,.danger,.bad){color:var(--color-danger);} /* ===== Shopping scope tabs ===== */ body.yekfi-signature .shopping-scope-tabs{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;background:transparent;border:0;} body.yekfi-signature .shopping-scope-tabs button{ min-width:0;min-height:82px;margin:0;padding:12px 14px;border:1px solid var(--color-border-strong);border-radius:var(--radius-card); background:#E4E7DF;color:var(--color-brand-strong);box-shadow:none;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto; column-gap:10px;row-gap:2px;align-items:center;text-align:right; } body.yekfi-signature .shopping-scope-tabs button>span{grid-row:1/3;display:grid;place-items:center;color:inherit;} body.yekfi-signature .shopping-scope-tabs button>b{font-size:16px;line-height:1.2;font-weight:850;color:inherit;} body.yekfi-signature .shopping-scope-tabs button>small{font-size:11.5px;line-height:1.3;color:var(--color-muted);} body.yekfi-signature .shopping-scope-tabs button.active{background:var(--color-brand);color:#fff;border-color:var(--color-accent);box-shadow:0 6px 16px rgba(47,74,52,.14);} body.yekfi-signature .shopping-scope-tabs button.active>small{color:rgba(255,255,255,.86);} /* ===== Shopping list — DOM-order RTL grid; no old grid-area survives ===== */ body.yekfi-signature .sig-shop-category{display:flex;flex-direction:column;gap:10px;margin:0;min-width:0;} body.yekfi-signature .sig-shop-cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;margin:4px 0 0;padding:0 2px 8px;border-bottom:1px solid var(--color-border);} body.yekfi-signature .sig-shop-item{ width:100%;min-width:0;min-height:106px;margin:0;padding:12px;direction:rtl; display:grid;grid-template-columns:44px 60px minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:none; column-gap:11px;row-gap:7px;align-items:start;overflow:hidden;content-visibility:visible;contain:none; background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:none; } body.yekfi-signature .sig-shop-item>*{position:static;inset:auto;transform:none;grid-area:auto;min-width:0;} body.yekfi-signature .sig-shop-item+.sig-shop-item{margin-top:0;} body.yekfi-signature .sig-shop-item.done{background:var(--color-brand-soft);border-color:#B3C3B0;opacity:1;} body.yekfi-signature .sig-shop-check{ grid-column:1;grid-row:1/3;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;align-self:center; border-radius:var(--radius-control);border:1px solid var(--color-border-strong);background:var(--color-paper);color:var(--color-brand); display:grid;place-items:center;font-size:20px;font-weight:900; } body.yekfi-signature .sig-shop-check.checked{background:var(--color-brand);color:#fff;border-color:var(--color-brand);} body.yekfi-signature .sig-shop-thumb-slot{grid-column:2;grid-row:1/3;width:60px;height:60px;align-self:start;display:grid;place-items:center;overflow:hidden;} body.yekfi-signature :is(.sig-shop-thumb,.sig-shop-thumb-placeholder){width:60px;height:60px;border-radius:var(--radius-card);border:1px solid var(--color-border);background:#F1F2EC;object-fit:cover;display:grid;place-items:center;color:var(--color-muted);} body.yekfi-signature .sig-shop-main{ grid-column:3;grid-row:1;min-width:0;width:100%;margin:0;padding:0;border:0;background:transparent;text-align:right;overflow:visible; display:block;white-space:normal;word-break:normal;overflow-wrap:normal;writing-mode:horizontal-tb; } body.yekfi-signature .sig-shop-main>b{display:block;width:100%;min-width:0;font-size:16px;line-height:1.35;font-weight:850;color:var(--color-brand-strong);white-space:normal;word-break:normal;overflow-wrap:normal;writing-mode:horizontal-tb;} body.yekfi-signature .sig-shop-main>small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;width:100%;min-width:0;margin-top:3px;overflow:hidden;font-size:12px;line-height:1.4;color:var(--color-muted);white-space:normal;word-break:normal;overflow-wrap:normal;writing-mode:horizontal-tb;} body.yekfi-signature .sig-shop-meta{ grid-column:3;grid-row:2;min-width:0;width:100%;margin:0;padding:7px 0 0;border:0;border-top:1px solid rgba(95,104,95,.24);background:transparent; display:flex;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:wrap;text-align:right;overflow:visible;white-space:normal;word-break:normal;overflow-wrap:normal; } body.yekfi-signature .sig-shop-meta>span{display:flex;align-items:baseline;gap:5px;min-width:0;} body.yekfi-signature .sig-shop-meta small{font-size:11px;color:var(--color-muted);white-space:nowrap;} body.yekfi-signature .sig-shop-meta b{font-size:13.5px;font-weight:850;color:var(--color-brand-strong);white-space:nowrap;} body.yekfi-signature .sig-shop-meta>span:last-child b{color:var(--color-price);} body.yekfi-signature .delight-shop-progress{padding:14px 16px;border:1px solid var(--color-accent);border-radius:var(--radius-card);background:var(--color-info);box-shadow:none;} body.yekfi-signature .delight-shop-progress-track{height:6px;background:#CDD3C9;border-radius:var(--radius-pill);overflow:hidden;} body.yekfi-signature .delight-shop-progress-track i{background:var(--color-brand);border-radius:var(--radius-pill);} /* ===== Stock ===== */ body.yekfi-signature .stock-hero{padding:22px;border-radius:var(--radius-hero);background:var(--color-brand);border:1px solid var(--color-brand-strong);color:#fff;} body.yekfi-signature .stock-hero :is(h1,b){color:#fff;}body.yekfi-signature .stock-hero :is(p,small){color:rgba(255,255,255,.84);} body.yekfi-signature .stock-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;} body.yekfi-signature .stock-kpis>div{min-height:92px;padding:14px;border-radius:var(--radius-card);background:var(--color-info);border:1px solid #B4C4B2;} body.yekfi-signature .stock-kpis b{font-size:25px;color:var(--color-brand-strong);} body.yekfi-signature .home-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;background:transparent;border:0;} body.yekfi-signature .home-filter-bar button{min-height:44px;padding:0 14px;border-radius:var(--radius-control);border:1px solid var(--color-border);background:#E4E7DF;color:var(--color-brand-strong);font-weight:800;} body.yekfi-signature .home-filter-bar button.active{background:var(--color-accent-soft);border-color:var(--color-accent);color:var(--color-brand-strong);} body.yekfi-signature .home-stock-group{padding:14px;border-radius:var(--radius-card);background:var(--color-card-strong);border:1px solid var(--color-border);} body.yekfi-signature .home-house-row{min-height:76px;padding:11px 0;grid-template-columns:minmax(0,1fr) auto;gap:10px;border-top:1px solid var(--color-border);background:transparent;} body.yekfi-signature .home-house-row.disabled{opacity:1;}body.yekfi-signature .home-house-row.disabled :is(b,small){color:#737B73;}body.yekfi-signature .home-house-row.disabled .home-status{background:#D5D9D2;color:#626A62;} body.yekfi-signature .home-mini-action{min-height:44px;min-width:86px;border-radius:var(--radius-control);background:var(--color-action);border:1px solid #C8A954;color:var(--color-brand-strong);font-weight:850;} /* ===== Memo ===== */ body.yekfi-signature .memo-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px;padding:22px;border-radius:var(--radius-hero);background:var(--color-brand);border:1px solid var(--color-brand-strong);color:#fff;} body.yekfi-signature .memo-hero :is(h1,b){color:#fff;}body.yekfi-signature .memo-hero p{margin:0;color:rgba(255,255,255,.86);}body.yekfi-signature .memo-hero .sig-hero-overline{color:#F0D98F;} body.yekfi-signature .memo-add-main{min-width:112px;min-height:46px;border-radius:var(--radius-control);background:#F0D98F;border:1px solid var(--color-accent);color:var(--color-brand-strong);font-weight:900;} body.yekfi-signature .memo-list{display:flex;flex-direction:column;gap:10px;} body.yekfi-signature .memo-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;padding:12px;border-radius:var(--radius-card);background:var(--color-card);border:1px solid var(--color-border);} body.yekfi-signature .memo-row.high{background:#F0E3B8;border-color:var(--color-accent);}body.yekfi-signature .memo-row.overdue{background:#EEE0DA;border-color:#BE8875;} body.yekfi-signature .memo-check{width:44px;height:44px;border-radius:var(--radius-control);border:1px solid var(--color-border-strong);background:#fff;color:var(--color-brand);} body.yekfi-signature .home-empty{min-height:116px;padding:20px 18px;border:1px dashed #B8C0B5;border-radius:var(--radius-card);background:var(--color-card);color:var(--color-ink);} /* ===== Sheets / forms ===== */ body.yekfi-signature .sheet{background:rgba(32,51,38,.38);backdrop-filter:blur(8px);padding:0 10px;} body.yekfi-signature .sheet-panel{ width:min(620px,100%);max-height:min(88dvh,780px);height:auto;margin:0; padding:10px 18px max(18px,env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--color-bg);border:1px solid var(--color-border);box-shadow:0 -18px 48px rgba(32,51,38,.18);overflow-y:auto;overflow-x:hidden; } body.yekfi-signature .sheet-panel>.handle{width:44px;height:5px;border-radius:var(--radius-pill);background:#AEB4AA;margin:2px auto 10px;} body.yekfi-signature .sheet-head{position:sticky;top:-10px;z-index:5;min-height:56px;padding:8px 0 10px;background:var(--color-bg);border-bottom:1px solid var(--color-border);} body.yekfi-signature .sheet-head h2{font-size:22px;font-weight:850;color:var(--color-brand-strong);} body.yekfi-signature .memo-editor{display:flex;flex-direction:column;gap:16px;padding-top:10px;} body.yekfi-signature .field{display:flex;flex-direction:column;gap:7px;background:transparent;} body.yekfi-signature .field label{font-size:13px;font-weight:800;color:#4D5B50;} body.yekfi-signature :is(.field input,.field select,.field textarea,.input){min-height:48px;border-radius:var(--radius-control);background:#fff;border:1px solid var(--color-border-strong);padding:10px 12px;font-size:16px;} body.yekfi-signature .memo-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;} body.yekfi-signature .memo-time-input{direction:ltr;text-align:center;unicode-bidi:isolate;font-variant-numeric:tabular-nums;} body.yekfi-signature .memo-priority{min-height:48px;padding:0 14px;border-radius:var(--radius-control);background:var(--color-accent-soft);border:1px solid #C8A954;} body.yekfi-signature .memo-reminder-note{padding:14px 15px;border-radius:var(--radius-card);background:var(--color-info);border:1px solid #B4C4B2;} /* ===== Focus ===== */ body.yekfi-signature :where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;scroll-margin-top:calc(var(--app-header-h,108px) + 14px);scroll-margin-bottom:calc(var(--app-bottom-nav-h,76px) + 22px);} body.yekfi-signature :where(button,a,input,select,textarea){touch-action:manipulation;} /* ===== Responsive geometry ===== */ @media(max-width:520px){ body.yekfi-signature .content{padding-inline:12px;} body.yekfi-signature .sheet-panel{width:100%;padding-inline:16px;} } @media(max-width:390px){ body.yekfi-signature .topbar{padding-inline:9px;} body.yekfi-signature .topbar-primary-row{grid-template-columns:minmax(100px,1fr) auto;gap:7px;} body.yekfi-signature .brand-symbol-large{width:38px;height:38px;min-width:38px;flex-basis:38px;} body.yekfi-signature .brand-wordmark-field{width:64px;max-width:64px;height:17px;} body.yekfi-signature .brand-tagline-ar{display:none;} body.yekfi-signature :is(.topbar-plan-btn,.family-top-btn,.topbar-utility-row .round-icon){padding-inline:7px;font-size:11.5px;} body.yekfi-signature .shopping-scope-tabs{gap:8px;} body.yekfi-signature .shopping-scope-tabs button{min-height:76px;padding:10px;} body.yekfi-signature .sig-shop-item{grid-template-columns:42px 54px minmax(0,1fr);column-gap:8px;padding:10px;} body.yekfi-signature .sig-shop-check{width:44px;height:44px;min-width:44px;min-height:44px;} body.yekfi-signature .sig-shop-thumb-slot,body.yekfi-signature :is(.sig-shop-thumb,.sig-shop-thumb-placeholder){width:54px;height:54px;} } @media(max-width:350px){ body.yekfi-signature .memo-date-grid{grid-template-columns:1fr;} body.yekfi-signature :is(.topbar-plan-btn,.family-top-btn){width:auto;min-width:62px;padding-inline:8px;} body.yekfi-signature .topbar-primary-row{grid-template-columns:minmax(90px,1fr) 148px;} body.yekfi-signature .memo-hero{grid-template-columns:1fr;align-items:start;} body.yekfi-signature .memo-add-main{justify-self:start;} } @media(prefers-reduced-motion:reduce){body.yekfi-signature *,body.yekfi-signature *::before,body.yekfi-signature *::after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms;scroll-behavior:auto;}} /* Keep the canvas calm; brand character comes from deliberate surfaces, food imagery and accent states. */ body.yekfi-signature .ambient{display:none;} /* RC39 rendered-fixture corrections: reset inherited centering on sticky header and neutralize higher-specificity legacy shopping variants. */ body.yekfi-signature .topbar{ left:auto;right:auto;transform:none;translate:none; } body.yekfi-signature .budget-strip{ grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:none; } body.yekfi-signature .budget-strip>:is(.budget-strip-label,b,small){grid-area:auto;justify-self:center;} body.yekfi-signature .sig-shop-item, body.yekfi-signature .sig-shop-item:not(.has-food-thumb){ grid-template-columns:44px 60px minmax(0,1fr); grid-template-rows:auto auto; grid-template-areas:none; } @media(max-width:390px){ body.yekfi-signature .sig-shop-item, body.yekfi-signature .sig-shop-item:not(.has-food-thumb){grid-template-columns:42px 54px minmax(0,1fr);} } @media(max-width:350px){ body.yekfi-signature .sig-shop-item, body.yekfi-signature .sig-shop-item:not(.has-food-thumb){grid-template-columns:42px 50px minmax(0,1fr);} body.yekfi-signature .sig-shop-thumb-slot, body.yekfi-signature :is(.sig-shop-thumb,.sig-shop-thumb-placeholder){width:50px;height:50px;} } /* RC39 rendered-fixture bug fix: legacy checkbox pseudo-element had lost its containing block after geometry reset, creating a page-sized white hit surface. The real control is sufficient. */ body.yekfi-signature .sig-shop-check{position:relative;isolation:auto;z-index:0;} body.yekfi-signature .sig-shop-check::before,body.yekfi-signature .sig-shop-check::after{content:none;display:none;} /* ===================================================================== YEKFI v10.8.4 — RC40 Plan Flow & Readability Field Fix (retained baseline overrides) Field-first corrections after RC39: compact financial chrome, Arabic-first typography, explicit contrast safety, and resilient planning feedback. ===================================================================== */ body.yekfi-signature{ font-family:"Noto Sans Arabic","SF Arabic","Geeza Pro","Segoe UI",Tahoma,Arial,sans-serif; font-synthesis:none; } body.yekfi-signature :where(button,input,select,textarea){font-family:inherit;} /* Weekly budget is one compact information rail, never a three-line header block. */ body.yekfi-signature .topbar-separator{margin:4px 0 3px;} body.yekfi-signature .budget-strip{ width:100%;min-width:0;min-height:30px;height:auto; padding:2px 4px;display:flex;flex-direction:row;align-items:center; justify-content:center;gap:7px;text-align:start;overflow:hidden; white-space:nowrap; } body.yekfi-signature .budget-strip>:is(.budget-strip-label,b,small){ grid-area:auto;justify-self:auto;align-self:center;margin:0; } body.yekfi-signature .budget-strip-label{flex:0 0 auto;font-size:10.5px;color:#525C53;} body.yekfi-signature .budget-strip>b{flex:0 0 auto;font-size:15px;line-height:1.15;color:#945B20;} body.yekfi-signature .budget-strip>small{ flex:0 1 auto;min-width:0;max-width:100%;font-size:10.5px;line-height:1.2; color:#525C53;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start; } body.yekfi-signature .budget-strip-label::after{content:" ·";color:var(--color-border-strong);} body.yekfi-signature .budget-strip>b::after{content:" ·";color:var(--color-border-strong);font-weight:500;} /* Strong foreground ownership: legacy nested small/span rules may not wash out actionable text. */ body.yekfi-signature :is(.sig-btn-primary,.btn.primary,.request-module-submit){color:#fff;} body.yekfi-signature :is(.sig-btn-primary,.btn.primary,.request-module-submit) :is(span,b,strong,small,em,.ui-svg){color:#fff;} body.yekfi-signature :is(.sig-btn-ghost,.btn.soft,.sig-summary-action,.home-mini-action,.topbar-plan-btn,.family-top-btn){color:var(--color-brand-strong);} body.yekfi-signature :is(.sig-btn-ghost,.btn.soft,.sig-summary-action,.home-mini-action,.topbar-plan-btn,.family-top-btn) :is(span,b,strong,small,em,.ui-svg){color:var(--color-brand-strong);} body.yekfi-signature :is(.new-plan-option,.household-control-grid>button,.sig-family-actions>button){color:var(--color-brand-strong);} body.yekfi-signature :is(.new-plan-option,.household-control-grid>button,.sig-family-actions>button) b{color:var(--color-brand-strong);} body.yekfi-signature :is(.new-plan-option,.household-control-grid>button,.sig-family-actions>button) small{color:#566158;} body.yekfi-signature :where(button:disabled,[aria-disabled="true"]){opacity:1;} /* The plan control is an action, not navigation to the current week. */ body.yekfi-signature .topbar-plan-btn{border-color:#B88B2F;background:#F2E3B3;color:var(--color-brand-strong);} /* Generation remains visibly alive while a blended-cuisine solver owns the worker. */ body.yekfi-signature .loader-detail{display:block;min-height:2.9em;color:#4F5D52;font-weight:650;line-height:1.45;} body.yekfi-signature .loader-progress i{min-width:8%;will-change:width;} @media(max-width:390px){ body.yekfi-signature .budget-strip{gap:5px;padding-inline:2px;} body.yekfi-signature .budget-strip-label{font-size:10px;} body.yekfi-signature .budget-strip>b{font-size:14px;} body.yekfi-signature .budget-strip>small{font-size:10px;} } @media(max-width:340px){ body.yekfi-signature .budget-strip-label{font-size:0;} body.yekfi-signature .budget-strip-label::before{content:"الميزانية";font-size:10px;color:#525C53;} } /* ===================================================================== YEKFI v10.8.5 — RC41 Planning Reliability & Navigation P0 field corrections: contrast ownership, bottom-rounded header, non-blocking Plan Studio cuisine selection, family delete, view backbar. ===================================================================== */ body.yekfi-signature .topbar{ border-radius:0 0 22px 22px; border-bottom:1px solid rgba(32,52,37,.18); box-shadow:0 10px 24px rgba(32,52,37,.08); } /* Primary/dark card text must own a high-contrast foreground. Later generic typography rules must never recolor these surfaces to olive-on-olive. */ body.yekfi-signature .sig-hero{color:#FFFDF7;} body.yekfi-signature .sig-hero :is(.sig-hero-title,h1,h2,h3,b,strong){color:#FFFDF7;} body.yekfi-signature .sig-hero .sig-hero-overline{color:#F6E1A2;} body.yekfi-signature .sig-hero-copy>p{color:rgba(255,255,255,.91);} body.yekfi-signature .sig-hero-meta span{color:#FFFDF8;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);} body.yekfi-signature .home-summary-card.primary{color:#FFFDF7;} body.yekfi-signature .home-summary-card.primary :is(b,strong){color:#FFFDF7;} body.yekfi-signature .home-summary-card.primary :is(small,em){color:rgba(255,253,247,.88);} body.yekfi-signature .premium-total :is(.total-kicker,.total-amount,.total-sub,.total-detail){text-shadow:0 1px 6px rgba(0,0,0,.16);} body.yekfi-signature .premium-total .total-detail{color:rgba(255,253,247,.88);} body.yekfi-signature .hero :is(.kicker,h1,h2,h3,p){color:#fff;} body.yekfi-signature .hero .chip{color:#fff;border-color:rgba(255,255,255,.28);} body.yekfi-signature .friends-pilot-hero :is(b,strong){color:#FFFDF7;} body.yekfi-signature .friends-pilot-hero small{color:rgba(255,253,247,.86);} /* Unified previous-page control for list/detail destinations. */ body.yekfi-signature .view-backbar{ display:flex;align-items:center;justify-content:space-between;gap:10px; margin:0 0 12px;padding:2px 2px 0;min-height:44px; } body.yekfi-signature .view-backbar>button{ min-height:44px;padding:8px 12px;display:inline-flex;align-items:center;gap:7px; border:1px solid var(--color-border-strong);border-radius:var(--radius-control); background:#FFFDF8;color:var(--color-brand-strong);font-weight:850;box-shadow:0 3px 10px rgba(32,52,37,.05); } body.yekfi-signature .view-backbar>button span{font-size:18px;line-height:1;color:var(--color-brand-strong);} body.yekfi-signature .view-backbar>button b{font-size:13px;color:var(--color-brand-strong);} body.yekfi-signature .view-backbar>small{font-size:11px;color:#5D685F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* Family deletion is available, but deliberately separated from the save CTA. */ body.yekfi-signature .member-delete-btn{ width:100%;min-height:46px;margin-top:9px;border:1px solid rgba(141,69,57,.32);border-radius:var(--radius-control); background:#FFF8F5;color:#8D4539;font-weight:850;font-size:13px; } body.yekfi-signature .member-delete-confirm{ display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;padding:15px;margin:8px 0 14px; border:1px solid rgba(141,69,57,.24);border-radius:var(--radius-card);background:#FFF7F3; } body.yekfi-signature .member-delete-confirm>span{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#F3DDD7;color:#8D4539;font-weight:950;} body.yekfi-signature .member-delete-confirm b{display:block;color:#5E2F29;font-size:16px;line-height:1.4;} body.yekfi-signature .member-delete-confirm small{display:block;margin-top:4px;color:#685D58;font-size:12px;line-height:1.6;} /* Cuisine selection is now a light interaction: no full sheet rebuild per tap. */ body.yekfi-signature .plan-cuisine-chip, body.yekfi-signature .plan-all-cuisines{transition:border-color .14s ease,background .14s ease,box-shadow .14s ease,transform .14s ease;} body.yekfi-signature .plan-cuisine-chip.selected, body.yekfi-signature .plan-all-cuisines.selected{ border-color:#B5872D;background:#F6E8BE;color:var(--color-brand-strong); box-shadow:inset 0 0 0 1px rgba(181,135,45,.22); } body.yekfi-signature .plan-cuisine-selection-status{ display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:10px 0 4px;padding:10px 12px; border:1px solid var(--color-border);border-radius:var(--radius-control);background:#F8F3E8;color:var(--color-brand-strong); } body.yekfi-signature .plan-cuisine-selection-status small{color:#697168;font-size:11px;} body.yekfi-signature .plan-cuisine-selection-status b{color:var(--color-brand-strong);font-size:12px;line-height:1.55;text-align:left;} body.yekfi-signature .plan-fill-busy{ position:sticky;top:0;z-index:8;display:grid;gap:2px;margin:0 0 10px;padding:11px 13px;border:1px solid #D8C27C; border-radius:var(--radius-control);background:#FFF8E6;box-shadow:0 7px 18px rgba(32,52,37,.08); } body.yekfi-signature .plan-fill-busy b{color:var(--color-brand-strong);font-size:13px;} body.yekfi-signature .plan-fill-busy small{color:#626A61;font-size:11px;} body.yekfi-signature .plan-studio[aria-busy="true"] .plan-assist-actions button{pointer-events:none;opacity:.72;} @media(max-width:390px){ body.yekfi-signature .topbar{border-radius:0 0 18px 18px;} body.yekfi-signature .view-backbar{margin-bottom:9px;} body.yekfi-signature .plan-cuisine-selection-status{display:grid;grid-template-columns:1fr;gap:3px;} body.yekfi-signature .plan-cuisine-selection-status b{text-align:right;} } /* ====================================================================== YEKFI v10.8.7 RC43 — Consumer UX hardening / final ownership layer ====================================================================== */ body.yekfi-signature{ font-family:"Noto Sans Arabic","SF Arabic","Geeza Pro","Segoe UI",Tahoma,Arial,sans-serif; } /* App chrome: anchored to the viewport; only the bottom corners read as a card. */ body.yekfi-signature .topbar{ border-radius:0 0 22px 22px; overflow:clip; } /* Compact weekly budget rail: phrase then value, one horizontal line. */ body.yekfi-signature .budget-strip{ display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;justify-content:stretch; column-gap:5px;min-height:34px;height:auto;white-space:nowrap; overflow:hidden;text-align:start;direction:rtl; } body.yekfi-signature .budget-strip-label{grid-column:1;order:initial;min-width:max-content} body.yekfi-signature #headerBudget{grid-column:2;order:initial;min-width:max-content;font-weight:900} body.yekfi-signature #headerSpend{grid-column:3;order:initial;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;padding-inline-start:7px;border-inline-start:1px solid rgba(28,43,24,.12)} body.yekfi-signature .budget-strip-label::after,body.yekfi-signature .budget-strip>b::after{content:none} /* Explicit contrast ownership for image/dark heroes and primary banners. */ body.yekfi-signature :is(.sig-hero,.memo-hero,.path-hero,.delight-hero,.friends-pilot-hero){position:relative} body.yekfi-signature :is(.sig-hero,.memo-hero,.delight-hero,.friends-pilot-hero) :is(h1,h2,.sig-hero-title){color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.34)} body.yekfi-signature :is(.sig-hero,.memo-hero,.delight-hero,.friends-pilot-hero) :is(p,.sig-hero-meta, .sig-hero-meta span){color:rgba(255,255,255,.94)} body.yekfi-signature :is(.sig-hero,.memo-hero,.delight-hero,.friends-pilot-hero) .sig-hero-overline{color:#FFE2A0;font-weight:800} body.yekfi-signature .sig-hero-shade{background:linear-gradient(90deg,rgba(11,28,16,.82) 0%,rgba(21,43,26,.70) 44%,rgba(15,28,18,.28) 100%)} body.yekfi-signature .summary-banner:not(.risk){color:#243328} body.yekfi-signature .summary-banner:not(.risk) :is(b,small,span){color:inherit} /* Week More: stable 44px target, no native details marker. */ body.yekfi-signature .meal-more{position:relative} body.yekfi-signature .meal-more>summary.week-more-trigger{ list-style:none;width:44px;height:44px;min-width:44px; display:grid;place-items:center;padding:0;margin:0; border:1px solid rgba(47,74,52,.16);border-radius:13px;background:#fff; color:#2F4A34;font-size:25px;line-height:1;font-weight:800;cursor:pointer; } body.yekfi-signature .meal-more>summary.week-more-trigger::-webkit-details-marker{display:none} body.yekfi-signature .meal-more[open]>summary.week-more-trigger{border-color:#C99732;box-shadow:0 0 0 2px rgba(201,151,50,.12)} body.yekfi-signature .meal-more>div{inset-inline-end:0;inset-inline-start:auto;min-width:150px;z-index:30} /* Sheet Back is different from Close. */ body.yekfi-signature .sheet-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px} body.yekfi-signature .sheet-head h2{text-align:center;margin:0;min-width:0} body.yekfi-signature .sheet-back-control{grid-column:1;color:#2F4A34;font-size:25px} body.yekfi-signature .modal-close-control{grid-column:3} body.yekfi-signature .sheet-back-control[hidden]{visibility:hidden;display:grid} /* Time/quiet-hour controls: one baseline and equal geometry. */ body.yekfi-signature :is(.quiet-hours-grid,.notification-time-grid,.meal-time-grid,.notification-schedule-grid){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end} body.yekfi-signature :is(.quiet-hours-grid,.notification-time-grid,.meal-time-grid,.notification-schedule-grid) :is(input,select,button){min-height:44px;height:44px;box-sizing:border-box} @media(max-width:360px){body.yekfi-signature :is(.quiet-hours-grid,.notification-time-grid,.meal-time-grid,.notification-schedule-grid){grid-template-columns:1fr}} /* Appearance is deliberately restrained to three cards. */ body.yekfi-signature .appearance-background-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} @media(max-width:430px){body.yekfi-signature .appearance-background-grid{grid-template-columns:1fr}} /* General RTL alignment discipline. */ body.yekfi-signature :is(.card,.sig-panel,.sig-section,.meal-card,.memo-row,.shopping-card,.stock-card) :is(h1,h2,h3,p,small,b){text-align:start} body.yekfi-signature :is(.meal-card,.sig-member-row,.memo-row,.shopping-item-row) img{object-fit:cover;object-position:center} /* ================================================================ YEKFI v11 / Cycle 1 — Consumer Experience Architecture Palette inspired by warm ivory, Egyptian forest green and honey gold. ================================================================ */ body.yekfi-v11{ --yk-bg:#F0E9DE; --yk-bg-deep:#E8DDCC; --yk-paper:#FFFDF7; --yk-paper-2:#F8F1E7; --yk-paper-3:#EFE4D4; --yk-ink:#192018; --yk-ink-soft:#6E6A5F; --yk-ink-faint:#8D887D; --yk-forest-950:#142016; --yk-forest-900:#1C2B18; --yk-forest-850:#22331D; --yk-forest-800:#2B3D24; --yk-forest-700:#46583D; --yk-olive:#5E5128; --yk-gold-700:#835016; --yk-gold-600:#A66F25; --yk-gold-500:#D7A65F; --yk-gold-400:#E7C57F; --yk-gold-300:#F0D59C; --yk-sand:#E8CFAE; --yk-stone:#ABA597; --yk-success:#4C6B42; --yk-danger:#93483F; --yk-line:#DED0BB; --yk-line-strong:#CDBB9E; --yk-line-gold:rgba(215,166,95,.5); --coral:#835016; --coral2:#A66F25; --saffron:#D7A65F; --berry:#5E5128; --plum:#1C2B18; --bg:#F0E9DE; --surface:#FFFDF7; --ink:#192018; --muted:#6E6A5F; --line:#DED0BB; --success:#4C6B42; --warn:#A66F25; } body.yekfi-v11{ background: radial-gradient(circle at 93% 0%,rgba(215,166,95,.14),transparent 23rem), radial-gradient(circle at -10% 72%,rgba(28,43,24,.055),transparent 28rem), var(--yk-bg); } body.yekfi-v11 .topbar{background:rgba(240,233,222,.93)} body.yekfi-v11 .topbar::after{background:linear-gradient(90deg,transparent 0 6%,rgba(215,166,95,.08) 12%,var(--yk-gold-500) 38%,rgba(240,213,156,.72) 50%,rgba(215,166,95,.16) 73%,transparent 96%)} body.yekfi-v11 .bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr));background:rgba(255,253,247,.96);border-color:rgba(205,187,158,.88)} body.yekfi-v11 .nav-btn{color:#6F7168;min-width:0} body.yekfi-v11 .nav-btn.active{color:var(--yk-gold-300);background:linear-gradient(145deg,#2B3D24,#142016)} body.yekfi-v11 .nav-more-btn{color:var(--yk-forest-700)} body.yekfi-v11 .sig-btn-primary, body.yekfi-v11 .btn.primary{background:linear-gradient(145deg,var(--yk-forest-800),var(--yk-forest-950));color:#FFFDF7;box-shadow:0 10px 24px rgba(20,32,22,.17)} body.yekfi-v11 .sig-link, body.yekfi-v11 .eyebrow{color:var(--yk-gold-700)} body.yekfi-v11 .sig-panel, body.yekfi-v11 .card{background:linear-gradient(180deg,var(--yk-paper),#FBF6ED);border-color:var(--yk-line)} body.yekfi-v11 .budget-strip{border-color:var(--yk-line-strong);background:linear-gradient(180deg,#FFFDF7,#F7EFE3)} body.yekfi-v11 .stock-hero{background:linear-gradient(145deg,#24351E,#142016);border-color:rgba(215,166,95,.42);color:#FFFDF7} body.yekfi-v11 .stock-hero-mark{color:var(--yk-gold-300);background:rgba(215,166,95,.1);border-color:rgba(215,166,95,.25)} body.yekfi-v11 .v11-home-hub{display:grid;gap:12px} body.yekfi-v11 .v11-home-hub-head{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:0 4px} body.yekfi-v11 .v11-home-hub-head span{display:grid;gap:2px} body.yekfi-v11 .v11-home-hub-head small{font-size:11px;color:var(--yk-ink-soft)} body.yekfi-v11 .v11-home-hub-head h2{margin:0;font-size:22px;color:var(--yk-forest-950)} body.yekfi-v11 .v11-home-hub-head button{border:0;background:transparent;color:var(--yk-gold-700);font-size:12px;font-weight:850;min-height:40px} body.yekfi-v11 .v11-home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} body.yekfi-v11 .v11-home-grid>button{min-height:108px;border:1px solid var(--yk-line);border-radius:22px;background:linear-gradient(180deg,#FFFDF7,#F7EFE3);box-shadow:var(--yk-shadow-1);padding:14px;text-align:right;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-content:center} body.yekfi-v11 .v11-home-grid>button:nth-child(1){background:linear-gradient(145deg,#22331D,#142016);border-color:rgba(215,166,95,.38);color:#FFFDF7} body.yekfi-v11 .v11-home-grid>button:nth-child(1) small{color:rgba(255,253,247,.72)} body.yekfi-v11 .v11-home-icon{grid-row:1/3;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:rgba(215,166,95,.13);color:var(--yk-gold-500)} body.yekfi-v11 .v11-home-icon .ui-svg{width:21px;height:21px} body.yekfi-v11 .v11-home-grid b{font-size:14px;align-self:end} body.yekfi-v11 .v11-home-grid small{font-size:11px;color:var(--yk-ink-soft);align-self:start;margin-top:3px} body.yekfi-v11 .sig-week-hero .sig-hero-shade, body.yekfi-v11 .sig-next-hero .sig-hero-shade{background:linear-gradient(90deg,rgba(20,32,22,.92),rgba(20,32,22,.62) 52%,rgba(20,32,22,.18))} body.yekfi-v11 .sig-hero{border-color:rgba(215,166,95,.48)} body.yekfi-v11 .sig-hero-overline{color:var(--yk-gold-300)} body.yekfi-v11 .sig-section-head::before{background:linear-gradient(90deg,var(--yk-gold-700),var(--yk-gold-400))} body.yekfi-v11 .nav-btn .ui-svg{width:21px;height:21px} @media(max-width:390px){body.yekfi-v11 .nav-btn{font-size:10.5px;padding-inline:2px}body.yekfi-v11 .bottom-nav{width:calc(100% - 16px);gap:2px;padding:5px}} /* ================================================================ YEKFI v11 / Cycle 2 — Today Command Center + Planning Delight ================================================================ */ body.yekfi-v11 .v11-today-actions{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:12px 0 14px; } body.yekfi-v11 .v11-today-actions>button{ min-height:88px;border:1px solid var(--yk-line);border-radius:19px;padding:11px 9px; background:linear-gradient(180deg,#FFFDF7,#F7EFE3);color:var(--yk-forest-950); display:grid;grid-template-rows:24px auto auto;align-content:center;justify-items:start;text-align:start; box-shadow:0 8px 22px rgba(20,32,22,.05);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; } body.yekfi-v11 .v11-today-actions>button:active{transform:scale(.985)} body.yekfi-v11 .v11-today-actions>button .ui-svg{width:21px;height:21px;color:var(--yk-gold-700)} body.yekfi-v11 .v11-today-actions>button b{font-size:12px;margin-top:4px} body.yekfi-v11 .v11-today-actions>button small{font-size:10.5px;line-height:1.35;color:var(--yk-ink-soft);margin-top:2px} body.yekfi-v11 .v11-today-actions>.v11-action-primary{ background:linear-gradient(145deg,var(--yk-forest-800),var(--yk-forest-950));color:#FFFDF7; border-color:rgba(215,166,95,.42);box-shadow:0 13px 28px rgba(20,32,22,.15); } body.yekfi-v11 .v11-today-actions>.v11-action-primary .ui-svg{color:var(--yk-gold-300)} body.yekfi-v11 .v11-today-actions>.v11-action-primary small{color:rgba(255,253,247,.7)} body.yekfi-v11 .v11-attention{ margin:10px 0 16px;border:1px solid var(--yk-line-gold);border-radius:21px; background:linear-gradient(135deg,rgba(255,253,247,.98),rgba(232,207,174,.28));overflow:hidden; box-shadow:0 9px 25px rgba(131,80,22,.055); } body.yekfi-v11 .v11-attention-head{display:flex;align-items:end;justify-content:space-between;gap:10px;padding:12px 14px 8px} body.yekfi-v11 .v11-attention-head>span{display:grid;gap:1px} body.yekfi-v11 .v11-attention-head small{font-size:10.5px;color:var(--yk-gold-700)} body.yekfi-v11 .v11-attention-head b{font-size:14px;color:var(--yk-forest-950)} body.yekfi-v11 .v11-attention-row{width:100%;border:0;border-top:1px solid rgba(205,187,158,.55);background:transparent;display:grid;grid-template-columns:36px minmax(0,1fr) 20px;gap:9px;align-items:center;padding:10px 14px;text-align:start} body.yekfi-v11 .v11-attention-icon{width:34px;height:34px;border-radius:12px;background:rgba(215,166,95,.13);display:grid;place-items:center} body.yekfi-v11 .v11-attention-row div{display:grid;gap:2px;min-width:0} body.yekfi-v11 .v11-attention-row b{font-size:12px} body.yekfi-v11 .v11-attention-row small{font-size:10.5px;color:var(--yk-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.yekfi-v11 .v11-attention-row strong{color:var(--yk-gold-700);font-size:20px} body.yekfi-v11 .v11-plan-decision{ margin:14px 0 18px;border:1px solid rgba(215,166,95,.43);border-radius:24px;padding:16px; background:linear-gradient(140deg,#FFFDF7,#F5E9D8);box-shadow:0 12px 28px rgba(20,32,22,.055); } body.yekfi-v11 .v11-plan-decision-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:13px} body.yekfi-v11 .v11-plan-decision-head span:first-child{display:grid;gap:2px} body.yekfi-v11 .v11-plan-decision-head small{font-size:10.5px;color:var(--yk-gold-700)} body.yekfi-v11 .v11-plan-decision-head h2{font-size:19px;margin:0;color:var(--yk-forest-950)} body.yekfi-v11 .v11-confidence{flex:0 0 auto;border-radius:999px;padding:6px 9px;background:var(--yk-forest-900);color:var(--yk-gold-300);font-size:10.5px;font-weight:850} body.yekfi-v11 .v11-plan-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} body.yekfi-v11 .v11-plan-proof>span{background:rgba(255,253,247,.75);border:1px solid rgba(205,187,158,.62);border-radius:14px;padding:9px;display:grid;gap:3px;min-width:0} body.yekfi-v11 .v11-plan-proof small{font-size:9.5px;color:var(--yk-ink-soft)} body.yekfi-v11 .v11-plan-proof b{font-size:12.5px;color:var(--yk-forest-950);overflow:hidden;text-overflow:ellipsis} body.yekfi-v11 .v11-plan-decision>p{margin:11px 2px 0;color:var(--yk-ink-soft);font-size:10.5px;line-height:1.65} body.yekfi-v11 .v11-plan-alternatives{margin-top:16px;border-top:0} body.yekfi-v11 .v11-plan-alternatives .registry-alt-head{margin-bottom:9px} body.yekfi-v11 .v11-plan-alternatives .registry-alt-head span{display:grid;gap:2px} body.yekfi-v11 .v11-plan-alternatives .registry-alt-head small{font-size:10.5px;color:var(--yk-gold-700)} body.yekfi-v11 .v11-plan-alternatives .registry-alt-head b{font-size:15px;color:var(--yk-forest-950)} body.yekfi-v11 .v11-plan-alternatives .registry-alt-head em{font-style:normal;font-size:10.5px;color:var(--yk-ink-soft)} body.yekfi-v11 .v11-plan-alternatives .registry-alt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} body.yekfi-v11 .v11-plan-alternatives .registry-alt-chip{ min-height:92px;border:1px solid var(--yk-line);border-radius:17px;padding:11px; background:linear-gradient(180deg,#FFFDF7,#F7EFE3);display:grid;grid-template-rows:23px auto auto; justify-items:start;text-align:start;align-content:center;min-width:0; } body.yekfi-v11 .v11-plan-alternatives .registry-alt-chip.current{border-color:rgba(215,166,95,.54);background:linear-gradient(145deg,#22331D,#142016);color:#FFFDF7} body.yekfi-v11 .v11-plan-alternatives .registry-alt-chip span .ui-svg{width:20px;height:20px;color:var(--yk-gold-600)} body.yekfi-v11 .v11-plan-alternatives .registry-alt-chip.current span .ui-svg{color:var(--yk-gold-300)} body.yekfi-v11 .v11-plan-alternatives .registry-alt-chip b{font-size:12px;margin-top:3px} body.yekfi-v11 .v11-plan-alternatives .registry-alt-chip small{font-size:9.5px;line-height:1.35;color:var(--yk-ink-soft);margin-top:2px} body.yekfi-v11 .v11-plan-alternatives .registry-alt-chip.current small{color:rgba(255,253,247,.68)} body.yekfi-v11 .v11-month-progress{margin:13px 0 8px;padding:12px;border:1px solid rgba(215,166,95,.36);border-radius:18px;background:linear-gradient(145deg,rgba(255,253,247,.98),rgba(232,207,174,.22))} body.yekfi-v11 .v11-month-progress-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:10px;text-align:start} body.yekfi-v11 .v11-month-progress-head span{display:grid;gap:1px} body.yekfi-v11 .v11-month-progress-head small{font-size:9.5px;color:var(--yk-gold-700)} body.yekfi-v11 .v11-month-progress-head b{font-size:12px;color:var(--yk-forest-950)} body.yekfi-v11 .v11-month-progress-head strong{font-size:12px;color:var(--yk-forest-700)} body.yekfi-v11 .v11-month-week-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px} body.yekfi-v11 .v11-month-week-track>span{display:grid;justify-items:center;gap:3px;min-width:0;color:var(--yk-ink-faint)} body.yekfi-v11 .v11-month-week-track i{font-style:normal;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--yk-line);background:#FFFDF7;font-size:10px;font-weight:850} body.yekfi-v11 .v11-month-week-track small{font-size:8.5px;white-space:nowrap} body.yekfi-v11 .v11-month-week-track .ready{color:var(--yk-forest-900)} body.yekfi-v11 .v11-month-week-track .ready i{background:var(--yk-forest-900);border-color:var(--yk-forest-900);color:var(--yk-gold-300)} body.yekfi-v11 .v11-month-week-track .candidate i{border-color:var(--yk-gold-600);box-shadow:0 0 0 3px rgba(215,166,95,.14);color:var(--yk-gold-700)} @media(max-width:560px){ body.yekfi-v11 .v11-today-actions{grid-template-columns:repeat(2,minmax(0,1fr))} body.yekfi-v11 .v11-plan-proof{grid-template-columns:repeat(2,minmax(0,1fr))} body.yekfi-v11 .v11-plan-alternatives .registry-alt-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:340px){ body.yekfi-v11 .v11-today-actions{grid-template-columns:1fr 1fr;gap:7px} body.yekfi-v11 .v11-today-actions>button{min-height:82px;padding:9px 8px} } /* ============================================================ YEKFI v11 Cycle 3A — Household Learning Loop New components are intentionally isolated from legacy layers. ============================================================ */ body.yekfi-signature .household-learning-card{ width:100%;border:1px solid rgba(215,166,95,.34);border-radius:24px;background:#1C2B18;color:#FFFDF7; display:grid;grid-template-columns:48px minmax(0,1fr) 24px;align-items:center;gap:14px;text-align:right;padding:18px 18px; box-shadow:0 14px 34px rgba(20,32,22,.14);min-height:96px;cursor:pointer; } body.yekfi-signature .household-learning-card.is-empty{background:#FFFDF7;color:#1C2B18;border-color:rgba(28,43,24,.12);box-shadow:0 10px 28px rgba(20,32,22,.07)} body.yekfi-signature .household-learning-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:rgba(215,166,95,.16);color:#D7A65F;font-size:20px;border:1px solid rgba(215,166,95,.24)} body.yekfi-signature .household-learning-card>span:nth-child(2){display:grid;gap:3px;min-width:0} body.yekfi-signature .household-learning-card small{font-size:10px;font-weight:850;letter-spacing:.02em;color:#D7A65F} body.yekfi-signature .household-learning-card b{font-size:15px;line-height:1.45;color:inherit} body.yekfi-signature .household-learning-card em{font-size:11px;line-height:1.55;font-style:normal;color:rgba(255,253,247,.72)} body.yekfi-signature .household-learning-card.is-empty em{color:#6c746c} body.yekfi-signature .household-learning-card>strong{font-size:22px;color:#D7A65F;font-weight:500} body.yekfi-signature .learning-outcome-hero, body.yekfi-signature .learning-leftover-hero, body.yekfi-signature .learning-memory-hero{ display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding:15px;border-radius:20px;background:#F0E9DE;border:1px solid rgba(28,43,24,.08);margin-bottom:14px } body.yekfi-signature :is(.learning-outcome-hero,.learning-leftover-hero,.learning-memory-hero)>span:first-child{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:#FFFDF7;color:#835016;font-size:21px;border:1px solid rgba(215,166,95,.28)} body.yekfi-signature :is(.learning-outcome-hero,.learning-leftover-hero,.learning-memory-hero)>span:last-child{display:grid;gap:3px} body.yekfi-signature :is(.learning-outcome-hero,.learning-leftover-hero,.learning-memory-hero) b{font-size:15px;color:#1C2B18} body.yekfi-signature :is(.learning-outcome-hero,.learning-leftover-hero,.learning-memory-hero) small{font-size:11px;line-height:1.6;color:#687068} body.yekfi-signature .learning-outcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px} body.yekfi-signature .learning-outcome-grid button{border:1px solid rgba(28,43,24,.10);border-radius:19px;background:#FFFDF7;min-height:112px;padding:14px;text-align:right;display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:8px;align-content:center;box-shadow:0 8px 24px rgba(20,32,22,.055)} body.yekfi-signature .learning-outcome-grid button>span{grid-row:1/3;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#F0E9DE;color:#5E5128;font-size:18px} body.yekfi-signature .learning-outcome-grid button b{font-size:14px;color:#1C2B18;align-self:end} body.yekfi-signature .learning-outcome-grid button small{font-size:10.5px;color:#707770;align-self:start;margin-top:2px} body.yekfi-signature .learning-outcome-grid button.active{border-color:#D7A65F;box-shadow:0 0 0 2px rgba(215,166,95,.10),0 10px 25px rgba(20,32,22,.07)} body.yekfi-signature .learning-outcome-grid button.active>span{background:#1C2B18;color:#D7A65F} body.yekfi-signature .learning-privacy-note{font-size:10.5px;line-height:1.7;color:#757b75;text-align:center;margin:12px 8px 0} body.yekfi-signature .learning-leftover-grid, body.yekfi-signature .learning-rating-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:4px 0 12px} body.yekfi-signature :is(.learning-leftover-grid,.learning-rating-grid) button{min-height:106px;border-radius:19px;border:1px solid rgba(28,43,24,.11);background:#FFFDF7;padding:13px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;box-shadow:0 8px 22px rgba(20,32,22,.05)} body.yekfi-signature :is(.learning-leftover-grid,.learning-rating-grid) button b{font-size:14px;color:#1C2B18} body.yekfi-signature :is(.learning-leftover-grid,.learning-rating-grid) button small{font-size:10px;line-height:1.45;color:#717871} body.yekfi-signature .learning-rating-grid button>span{font-size:20px;color:#835016} body.yekfi-signature .learning-rating-grid button.active{border-color:#D7A65F;background:#F8F1E4;box-shadow:0 0 0 2px rgba(215,166,95,.10)} body.yekfi-signature .learning-rating-head{text-align:center;margin:2px 0 15px} body.yekfi-signature .learning-rating-head small{font-size:10px;color:#835016;font-weight:850} body.yekfi-signature .learning-rating-head h2{font-size:23px;color:#1C2B18;margin:3px 0 5px} body.yekfi-signature .learning-rating-head p{font-size:11px;color:#687068;line-height:1.6;margin:0 auto;max-width:38ch} body.yekfi-signature .learning-evidence-list{display:flex;flex-direction:column;gap:8px} body.yekfi-signature .learning-evidence-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px 14px;border-radius:18px;background:#FFFDF7;border:1px solid rgba(28,43,24,.09)} body.yekfi-signature .learning-evidence-row>span{display:grid;gap:2px;min-width:0} body.yekfi-signature .learning-evidence-row b{font-size:13px;color:#1C2B18} body.yekfi-signature .learning-evidence-row small{font-size:10px;color:#727972;line-height:1.45} body.yekfi-signature .learning-evidence-row em{font-size:9.5px;color:#835016;font-style:normal;font-weight:800} body.yekfi-signature .learning-evidence-row button{border:0;background:transparent;color:#765d38;font-size:10px;text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:8px} body.yekfi-signature .learning-empty{text-align:center;padding:24px 14px;display:grid;gap:5px;color:#697169} body.yekfi-signature .learning-empty>span{font-size:24px;color:#D7A65F}body.yekfi-signature .learning-empty b{color:#1C2B18}body.yekfi-signature .learning-empty small{font-size:11px;line-height:1.65} body.yekfi-signature .learning-week-pulse{ display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:15px 16px;border-radius:22px;background:#FFFDF7;border:1px solid rgba(215,166,95,.30);box-shadow:0 12px 30px rgba(20,32,22,.07);margin:0 } body.yekfi-signature .learning-week-pulse.is-seen{border-color:rgba(28,43,24,.10);box-shadow:none} body.yekfi-signature .learning-week-pulse-mark{width:40px;height:40px;border-radius:14px;background:#1C2B18;color:#D7A65F;display:grid;place-items:center;font-size:18px} body.yekfi-signature .learning-week-pulse-copy{display:grid;gap:2px;min-width:0} body.yekfi-signature .learning-week-pulse-copy small{font-size:9.5px;font-weight:850;color:#835016}body.yekfi-signature .learning-week-pulse-copy b{font-size:13.5px;color:#1C2B18}body.yekfi-signature .learning-week-pulse-copy em{font-size:10px;color:#6f766f;font-style:normal} body.yekfi-signature .learning-week-pulse .sig-btn{white-space:nowrap;min-height:44px} body.yekfi-signature .learning-closeout{display:grid;gap:13px} body.yekfi-signature .learning-closeout-hero{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:17px;border-radius:22px;background:#1C2B18;color:#FFFDF7} body.yekfi-signature .learning-closeout-hero>span{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:rgba(215,166,95,.13);border:1px solid rgba(215,166,95,.25);color:#D7A65F;font-size:20px} body.yekfi-signature .learning-closeout-hero small{font-size:10px;color:#D7A65F;font-weight:850}body.yekfi-signature .learning-closeout-hero h2{font-size:20px;line-height:1.35;margin:2px 0 4px;color:#FFFDF7}body.yekfi-signature .learning-closeout-hero p{font-size:11px;line-height:1.65;margin:0;color:rgba(255,253,247,.72)} body.yekfi-signature .learning-closeout-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} body.yekfi-signature .learning-closeout-grid>span{padding:13px;border-radius:18px;background:#F7F1E7;border:1px solid rgba(28,43,24,.08);display:grid;gap:3px} body.yekfi-signature .learning-closeout-grid>span.wide{grid-column:1/-1;background:#FFFDF7} body.yekfi-signature .learning-closeout-grid small{font-size:9.5px;color:#727972;font-weight:800}body.yekfi-signature .learning-closeout-grid b{font-size:13px;color:#1C2B18;line-height:1.5}body.yekfi-signature .learning-closeout-grid em{font-size:10px;color:#835016;font-style:normal} @media(max-width:560px){ body.yekfi-signature .learning-outcome-grid{grid-template-columns:1fr} body.yekfi-signature .learning-outcome-grid button{min-height:78px} body.yekfi-signature .learning-leftover-grid,body.yekfi-signature .learning-rating-grid{grid-template-columns:1fr} body.yekfi-signature :is(.learning-leftover-grid,.learning-rating-grid) button{min-height:66px;display:grid;grid-template-columns:34px 1fr;text-align:right;align-items:center;justify-items:start;column-gap:9px} body.yekfi-signature .learning-leftover-grid button:before{content:"";width:8px;height:8px;border-radius:50%;background:#D7A65F;grid-row:1/3;align-self:center;justify-self:center} body.yekfi-signature .learning-rating-grid button>span{grid-row:1/3;align-self:center;justify-self:center} body.yekfi-signature :is(.learning-leftover-grid,.learning-rating-grid) button small{grid-column:2} body.yekfi-signature .learning-week-pulse{grid-template-columns:40px 1fr}body.yekfi-signature .learning-week-pulse .sig-btn{grid-column:1/-1;width:100%} body.yekfi-signature .household-learning-card{grid-template-columns:42px minmax(0,1fr) 18px;padding:15px 14px} } @media(prefers-reduced-motion:no-preference){ body.yekfi-signature :is(.household-learning-card,.learning-outcome-grid button,.learning-leftover-grid button,.learning-rating-grid button){transition:transform .15s ease,border-color .18s ease,box-shadow .18s ease} body.yekfi-signature :is(.household-learning-card,.learning-outcome-grid button,.learning-leftover-grid button,.learning-rating-grid button):active{transform:scale(.985)} } body.yekfi-signature .v11-action-primary.learning-due{border-color:rgba(215,166,95,.52);background:#1C2B18;color:#FFFDF7} body.yekfi-signature .v11-action-primary.learning-due>span{color:#D7A65F;font-size:18px} body.yekfi-signature .v11-action-primary.learning-due :is(b,small){color:inherit} body.yekfi-signature .v11-action-primary.learning-done{background:#F0E9DE;border-color:rgba(28,43,24,.11)} body.yekfi-signature .sig-meal-row.has-outcome .sig-meal-main small{color:#835016;font-weight:850} /* ============================================================ YEKFI v11 Cycle 3B — Consumer Experience Integration Root rule: one primary decision, progressive disclosure, no patch pile. ============================================================ */ body.yekfi-signature{ --c3b-forest:#1C2B18;--c3b-forest-2:#263923;--c3b-gold:#D7A65F;--c3b-gold-deep:#835016; --c3b-paper:#FFFDF7;--c3b-ivory:#F0E9DE;--c3b-ink:#1A211C;--c3b-muted:#6C746C;--c3b-line:rgba(28,43,24,.10); --c3b-shadow:0 18px 48px rgba(20,32,22,.10);--c3b-soft-shadow:0 10px 30px rgba(20,32,22,.065) } body.yekfi-signature .cycle3b-today{display:grid;gap:18px} body.yekfi-signature .cycle3b-meal-hero{min-height:320px;border-radius:30px;overflow:hidden;box-shadow:0 22px 54px rgba(20,32,22,.16)} body.yekfi-signature .cycle3b-meal-hero .sig-hero-copy{padding-bottom:24px;max-width:680px} body.yekfi-signature .cycle3b-meal-hero .sig-hero-title{font-size:clamp(28px,5vw,44px);letter-spacing:-.025em;line-height:1.08} body.yekfi-signature .cycle3b-meal-hero .sig-hero-copy p{max-width:32ch;font-size:12px;color:rgba(255,253,247,.78)} body.yekfi-signature .cycle3b-meal-hero .sig-hero-meta{margin-top:8px} body.yekfi-signature .v11-command-surface{display:grid;gap:9px;margin-top:-3px} body.yekfi-signature .v11-command-primary{width:100%;min-height:88px;border:1px solid rgba(215,166,95,.30);border-radius:24px;background:linear-gradient(135deg,#1C2B18,#263923);color:#FFFDF7;display:grid;grid-template-columns:44px minmax(0,1fr) 18px;align-items:center;gap:12px;text-align:right;padding:15px 17px;box-shadow:var(--c3b-shadow)} body.yekfi-signature .v11-command-primary>span:first-child{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(215,166,95,.13);color:#D7A65F} body.yekfi-signature .v11-command-primary>span:nth-child(2){display:grid;gap:2px;min-width:0} body.yekfi-signature .v11-command-primary b{font-size:16px;line-height:1.35;color:#FFFDF7} body.yekfi-signature .v11-command-primary small{font-size:10.8px;line-height:1.45;color:rgba(255,253,247,.78)} body.yekfi-signature .v11-command-primary>strong{font-size:22px;font-weight:500;color:#D7A65F} body.yekfi-signature .v11-command-primary.learning-done{background:#FFFDF7;color:#1C2B18;border-color:rgba(28,43,24,.10);box-shadow:var(--c3b-soft-shadow)} body.yekfi-signature .v11-command-primary.learning-done b{color:#1C2B18} body.yekfi-signature .v11-command-primary.learning-done small{color:#6C746C} body.yekfi-signature .v11-command-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} body.yekfi-signature .v11-command-chip{min-height:52px;border:1px solid var(--c3b-line);border-radius:17px;background:rgba(255,253,247,.82);display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 10px;color:#334237;box-shadow:0 6px 18px rgba(20,32,22,.035)} body.yekfi-signature .v11-command-chip>span{width:22px;height:22px;display:grid;place-items:center;color:#835016} body.yekfi-signature .v11-command-chip b{font-size:11px;font-weight:850;white-space:nowrap} body.yekfi-signature .v11-week-pulse{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:11px;padding:14px 15px;border:1px solid var(--c3b-line);border-radius:21px;background:rgba(255,253,247,.84);text-align:right;color:#1C2B18;box-shadow:var(--c3b-soft-shadow)} body.yekfi-signature .v11-week-pulse-mark{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#EAF0E7;color:#284329;font-weight:900} body.yekfi-signature .v11-week-pulse.needs-attention .v11-week-pulse-mark{background:#F7E9D7;color:#835016} body.yekfi-signature .v11-week-pulse-copy{display:grid;gap:2px;min-width:0} body.yekfi-signature .v11-week-pulse-copy small{font-size:9.5px;color:#835016;font-weight:850} body.yekfi-signature .v11-week-pulse-copy b{font-size:13.5px;color:#1C2B18;line-height:1.35} body.yekfi-signature .v11-week-pulse-copy em{font-size:10px;color:#6C746C;font-style:normal;line-height:1.45} body.yekfi-signature .v11-week-pulse>strong{font-size:22px;color:#A28252;font-weight:500} body.yekfi-signature .cycle3b-meals{margin-top:0} body.yekfi-signature .cycle3b-meals .sig-panel{border-radius:24px;overflow:hidden;box-shadow:var(--c3b-soft-shadow)} body.yekfi-signature .cycle3b-meals .sig-meal-row{min-height:92px} body.yekfi-signature .cycle3b-meals .sig-meal-main b{font-size:14px;letter-spacing:-.01em} body.yekfi-signature .delight-secondary-insights{margin-top:0} /* Outcome: probable actions first; exceptions remain visually quieter. */ body.yekfi-signature .learning-outcome-grid{grid-template-columns:1fr 1fr;gap:9px} body.yekfi-signature .learning-outcome-grid button{min-height:102px} body.yekfi-signature .learning-outcome-grid button:nth-child(n+3){min-height:72px;background:#F8F5EE;box-shadow:none} body.yekfi-signature .learning-outcome-grid button:nth-child(n+3)>span{width:30px;height:30px;font-size:15px} body.yekfi-signature .learning-leftover-grid,body.yekfi-signature .learning-rating-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} body.yekfi-signature :is(.learning-leftover-grid,.learning-rating-grid) button{min-height:92px;padding:11px 8px;border-radius:18px} body.yekfi-signature :is(.learning-leftover-grid,.learning-rating-grid) button>span{font-size:19px;color:#835016} body.yekfi-signature .learning-skip-link,body.yekfi-signature .learning-memory-link{width:100%;min-height:44px;border:0;background:transparent;color:#6D614E;font-size:11px;text-decoration:underline;text-underline-offset:4px} body.yekfi-signature .learning-closeout-story{display:grid;gap:7px} body.yekfi-signature .learning-closeout-story>div{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;background:#FFFDF7;border:1px solid var(--c3b-line)} body.yekfi-signature .learning-closeout-story>div>span{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:#F0E9DE;color:#835016;font-size:9px;font-weight:900} body.yekfi-signature .learning-closeout-story p{margin:0;display:grid;gap:1px}body.yekfi-signature .learning-closeout-story small{font-size:9.5px;color:#777D77;font-weight:800}body.yekfi-signature .learning-closeout-story b{font-size:12.5px;color:#1C2B18;line-height:1.45} body.yekfi-signature .learning-next-signal{padding:14px 15px;border-radius:19px;background:#F3F0E7;border:1px solid var(--c3b-line);display:grid;gap:3px} body.yekfi-signature .learning-next-signal.good{background:#EEF3EA}body.yekfi-signature .learning-next-signal.adjust{background:#F6ECE4}body.yekfi-signature .learning-next-signal.watch{background:#F7F0E4} body.yekfi-signature .learning-next-signal small{font-size:9.5px;color:#835016;font-weight:900}body.yekfi-signature .learning-next-signal b{font-size:13.5px;color:#1C2B18;line-height:1.45}body.yekfi-signature .learning-next-signal p{font-size:10.5px;line-height:1.6;color:#697169;margin:0} body.yekfi-signature .learning-spend-truth{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:12px 14px;border-radius:18px;background:#1C2B18;color:#FFFDF7} body.yekfi-signature .learning-spend-truth>span{display:grid;gap:1px}body.yekfi-signature .learning-spend-truth small{font-size:9px;color:#D7A65F}body.yekfi-signature .learning-spend-truth b{font-size:13px;color:#FFFDF7}body.yekfi-signature .learning-spend-truth>em{grid-column:1/-1;font-size:9.5px;color:rgba(255,253,247,.70);font-style:normal} body.yekfi-signature .learning-closeout-actions{display:grid;gap:4px} body.yekfi-signature .household-learning-card{border-radius:26px;padding:19px;box-shadow:0 18px 44px rgba(20,32,22,.13)} body.yekfi-signature .household-learning-card b{font-size:15.5px;letter-spacing:-.01em} @media(max-width:560px){ body.yekfi-signature .cycle3b-today{gap:15px} body.yekfi-signature .cycle3b-meal-hero{min-height:286px;border-radius:26px} body.yekfi-signature .cycle3b-meal-hero .sig-hero-copy{padding:18px 17px 20px} body.yekfi-signature .cycle3b-meal-hero .sig-hero-title{font-size:30px} body.yekfi-signature .v11-command-primary{min-height:82px;border-radius:21px;padding:13px 14px} body.yekfi-signature .v11-command-tools{gap:6px} body.yekfi-signature .v11-command-chip{min-height:50px;padding:7px 6px;border-radius:15px} body.yekfi-signature .v11-command-chip b{font-size:10.5px} body.yekfi-signature .learning-outcome-grid{grid-template-columns:1fr 1fr} body.yekfi-signature .learning-outcome-grid button{min-height:92px;padding:11px;grid-template-columns:30px 1fr;column-gap:6px} body.yekfi-signature .learning-outcome-grid button:nth-child(n+3){min-height:70px} body.yekfi-signature .learning-leftover-grid,body.yekfi-signature .learning-rating-grid{grid-template-columns:repeat(3,minmax(0,1fr))} body.yekfi-signature :is(.learning-leftover-grid,.learning-rating-grid) button{min-height:88px;display:flex;text-align:center;align-items:center;justify-content:center;gap:3px} body.yekfi-signature :is(.learning-leftover-grid,.learning-rating-grid) button small{grid-column:auto;font-size:10px} body.yekfi-signature .learning-leftover-grid button:before{display:none} body.yekfi-signature .learning-rating-grid button>span{grid-row:auto;align-self:auto;justify-self:auto} body.yekfi-signature .learning-week-pulse{grid-template-columns:38px 1fr 16px;padding:13px 14px} body.yekfi-signature .learning-week-pulse .sig-btn{grid-column:auto;width:auto} } @media(max-width:340px){ body.yekfi-signature .v11-command-chip b{font-size:10px} body.yekfi-signature .v11-command-chip>span{display:none} body.yekfi-signature .learning-leftover-grid,body.yekfi-signature .learning-rating-grid{gap:5px} body.yekfi-signature :is(.learning-leftover-grid,.learning-rating-grid) button{min-height:82px;padding:8px 4px} body.yekfi-signature :is(.learning-leftover-grid,.learning-rating-grid) button b{font-size:12px} } body.yekfi-signature .v11-week-health-note{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(215,166,95,.28);border-radius:18px;background:#FFF8EA;color:#1C2B18;text-align:right;box-shadow:0 8px 22px rgba(20,32,22,.045)} body.yekfi-signature .v11-week-health-note>span:first-child{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#F0E2BD;color:#835016;font-weight:900} body.yekfi-signature .v11-week-health-note>span:nth-child(2){display:grid;gap:2px;min-width:0} body.yekfi-signature .v11-week-health-note small{font-size:9.5px;color:#835016;font-weight:850} body.yekfi-signature .v11-week-health-note b{font-size:12.5px;color:#1C2B18;line-height:1.45} body.yekfi-signature .v11-week-health-note strong{font-size:10.5px;color:#835016;white-space:nowrap} body.yekfi-signature .stock-page>.household-learning-card{margin-top:-2px} @media(prefers-reduced-motion:no-preference){ body.yekfi-signature :is(.v11-command-primary,.v11-command-chip,.v11-week-pulse,.learning-skip-link,.learning-memory-link){transition:transform .14s ease,box-shadow .18s ease,border-color .18s ease} body.yekfi-signature :is(.v11-command-primary,.v11-command-chip,.v11-week-pulse):active{transform:scale(.988)} } /* ================================================================ YEKFI v11 Cycle 4 — Household Intelligence & Personalization Evidence-first, quiet personalization. No speculative AI chrome. ================================================================ */ body.yekfi-signature .v11-personalization-proof{margin-top:13px;width:100%;display:grid;grid-template-columns:38px minmax(0,1fr);gap:11px;align-items:center;padding:13px 14px;border:1px solid rgba(191,143,70,.26);border-radius:19px;background:linear-gradient(135deg,rgba(250,244,229,.92),rgba(242,247,239,.96));box-shadow:0 10px 26px rgba(26,49,29,.055);font:inherit;text-align:start;color:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} body.yekfi-signature .v11-personalization-proof>span:first-child{width:36px;height:36px;border-radius:13px;display:grid;place-items:center;background:#27452C;color:#F3C77F;font-size:17px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)} body.yekfi-signature .v11-personalization-proof>span:last-child{display:grid;gap:2px;min-width:0} body.yekfi-signature .v11-personalization-proof small{font-size:9.5px;font-weight:900;color:#8C5D1E;letter-spacing:.01em} body.yekfi-signature .v11-personalization-proof b{font-size:13px;line-height:1.45;color:#1C2B18} body.yekfi-signature .v11-personalization-proof em{font-size:10px;line-height:1.55;color:#687068;font-style:normal} body.yekfi-signature .v11-personalization-proof:hover{border-color:rgba(191,143,70,.42);box-shadow:0 12px 30px rgba(26,49,29,.075)} body.yekfi-signature .v11-personalization-proof:active{transform:translateY(1px)} body.yekfi-signature .v11-personalization-proof:focus-visible{outline:3px solid rgba(215,166,95,.34);outline-offset:2px} body.yekfi-signature .household-learning-card.has-insight{border-color:rgba(191,143,70,.30);background:linear-gradient(140deg,#FFFDF7 0%,#F5F8F1 62%,#FBF1DD 100%)} body.yekfi-signature .learning-pattern-card{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:center;margin:12px 0 2px;padding:14px 15px;border:1px solid rgba(41,70,45,.12);border-radius:21px;background:#F2F6EF} body.yekfi-signature .learning-pattern-card>span:first-child{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:#28482D;color:#F4CB84;font-size:18px} body.yekfi-signature .learning-pattern-card>span:last-child{display:grid;gap:2px;min-width:0} body.yekfi-signature .learning-pattern-card small{font-size:9.5px;font-weight:900;color:#7A5A28} body.yekfi-signature .learning-pattern-card b{font-size:13.5px;line-height:1.45;color:#1B2C1D} body.yekfi-signature .learning-pattern-card em{font-size:10.5px;line-height:1.55;color:#687168;font-style:normal} body.yekfi-signature .learning-pattern-card.caution{background:#FBF5E9;border-color:rgba(183,126,44,.20)} body.yekfi-signature .learning-pattern-card.portion{background:#F7F0E7;border-color:rgba(142,96,52,.18)} body.yekfi-signature .learning-portion-note{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;margin:10px 0 2px;padding:12px 14px;border-radius:18px;background:#FFF9EE;border:1px solid rgba(191,143,70,.22)} body.yekfi-signature .learning-portion-note>span:first-child{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#EFE2C8;color:#7C541B;font-size:16px;font-weight:900} body.yekfi-signature .learning-portion-note>span:last-child{display:grid;gap:2px;min-width:0} body.yekfi-signature .learning-portion-note b{font-size:12.5px;color:#263426} body.yekfi-signature .learning-portion-note small{font-size:10px;line-height:1.55;color:#6B7169} @media(max-width:560px){ body.yekfi-signature .v11-personalization-proof{grid-template-columns:34px minmax(0,1fr);padding:12px 13px;border-radius:17px} body.yekfi-signature .v11-personalization-proof>span:first-child{width:32px;height:32px;border-radius:11px;font-size:15px} body.yekfi-signature .learning-pattern-card{grid-template-columns:36px minmax(0,1fr);padding:12px 13px;border-radius:18px} body.yekfi-signature .learning-pattern-card>span:first-child{width:34px;height:34px;border-radius:12px;font-size:15px} body.yekfi-signature .learning-portion-note{grid-template-columns:34px minmax(0,1fr);padding:11px 12px;border-radius:16px} body.yekfi-signature .learning-portion-note>span:first-child{width:32px;height:32px;border-radius:11px} } /* Cycle 4 light insight card owns its complete foreground contract. */ body.yekfi-signature .household-learning-card.has-insight{color:#1C2B18} body.yekfi-signature .household-learning-card.has-insight small{color:#835016} body.yekfi-signature .household-learning-card.has-insight em{color:#667067} body.yekfi-signature .household-learning-card.has-insight>strong{color:#9A661E} body.yekfi-signature .household-learning-card.has-insight .household-learning-icon{background:#F5E9D8;color:#8C5D1E;border-color:rgba(191,143,70,.26)} /* ================================================================ YEKFI v11 — Header/Nav refinement + readability contract 2026-09: one fixed header row, four primary destinations, WCAG-aware type. ================================================================ */ body.yekfi-signature .topbar{ position:sticky;top:0;z-index:120; padding:max(9px,env(safe-area-inset-top)) 12px 9px; background:rgba(245,246,239,.975); box-shadow:0 5px 18px rgba(32,51,38,.085); } body.yekfi-signature .topbar-primary-row{ min-height:56px; grid-template-columns:minmax(0,1fr) auto; gap:10px; } /* Brand +10% from the Cycle-5 baseline, with lockup preserved on narrow phones. */ body.yekfi-signature .brand-symbol-large{width:44px;height:44px;min-width:44px;flex-basis:44px;} body.yekfi-signature .topbar-primary-row>.brand{gap:8px;max-width:min(100%,148px);} body.yekfi-signature .brand-wordmark-field{width:77px;max-width:77px;height:20px;} body.yekfi-signature .brand-tagline-ar{display:block;margin-top:2px;font-size:11.5px;line-height:1.2;font-weight:750;color:#4F5B51;} body.yekfi-signature .topbar-utility-row{gap:7px;} body.yekfi-signature .header-budget-chip{ min-width:94px;max-width:112px;min-height:46px;height:46px; padding:5px 10px;border:1px solid #C5C9BE;border-radius:16px; background:#ECEFE8;color:#203326;box-shadow:none; display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:start;gap:1px; text-align:start;font:inherit;cursor:pointer;white-space:nowrap; } body.yekfi-signature .header-budget-copy{display:flex;align-items:baseline;gap:5px;min-width:0;max-width:100%;} body.yekfi-signature .header-budget-copy small{font-size:10.8px;line-height:1.15;font-weight:800;color:#59645B;white-space:nowrap;} body.yekfi-signature .header-budget-copy b{font-size:14px;line-height:1.15;font-weight:900;color:#8A551F;font-variant-numeric:tabular-nums;white-space:nowrap;} body.yekfi-signature .header-budget-chip>em{display:block;max-width:100%;font-size:10.5px;line-height:1.15;font-weight:750;font-style:normal;color:#5E685F;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} body.yekfi-signature .header-budget-chip:focus-visible, body.yekfi-signature .topbar-utility-row .round-icon:focus-visible{outline:3px solid rgba(169,119,34,.30);outline-offset:2px;} body.yekfi-signature .topbar-utility-row .round-icon{background:#ECEFE8;color:#203326;border-color:#C5C9BE;} body.yekfi-signature .topbar-separator,body.yekfi-signature .budget-strip,body.yekfi-signature .topbar-plan-btn{display:none;} /* Four primary destinations only. More lives in the header. */ body.yekfi-signature .bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr));} body.yekfi-signature .bottom-nav .nav-btn{font-size:12px;min-height:56px;} body.yekfi-signature .bottom-nav .nav-btn span{font-size:12px;line-height:1.2;font-weight:800;} /* Readability floor: no meaningful user-facing microcopy below 11px. */ body.yekfi-signature :is( .sig-hero-overline,.eyebrow,.microtag, .v11-week-pulse-copy small,.v11-week-pulse-copy em, .v11-week-health-note small,.v11-week-health-note strong, .v11-personalization-proof small,.v11-personalization-proof em, .learning-pattern-card small,.learning-pattern-card em, .learning-portion-note small, .household-learning-card small,.household-learning-card em, .learning-outcome-grid button small,.learning-privacy-note, .learning-leftover-grid button small,.learning-rating-grid button small, .learning-rating-head small,.learning-rating-head p, .learning-evidence-row small,.learning-evidence-row em,.learning-evidence-row button, .learning-empty small,.learning-week-pulse-copy small,.learning-week-pulse-copy em, .learning-closeout-hero small,.learning-closeout-hero p, .learning-closeout-grid small,.learning-closeout-grid em, .learning-closeout-story small,.learning-next-signal small,.learning-next-signal p, .learning-spend-truth small,.learning-spend-truth>em ){font-size:max(11px,1em);} /* Foreground contracts on the recurring surface families. */ body.yekfi-signature :is(.card,.stat,.insight,.unit-card,.detail-stat,.ready-stat,.stock-food-row,.stock-purchase-row,.user-product-row,.member-card,.home-stock-group,.home-house-row,.memo-row){color:#2B2620;} body.yekfi-signature :is(.card,.stat,.insight,.unit-card,.detail-stat,.ready-stat,.stock-food-row,.stock-purchase-row,.user-product-row,.member-card,.home-stock-group,.home-house-row,.memo-row) small{color:#596159;} body.yekfi-signature :is(.summary-banner,.today-intel,.cloud-state,.stock-hero) small{color:#4F5A50;} body.yekfi-signature :is(.sig-page p,.sheet-panel p,.memo-hero p,.stock-hero p){color:#555F56;} body.yekfi-signature small{color:#596159;} @media(max-width:360px){ body.yekfi-signature .brand-copy-field{display:flex;} body.yekfi-signature .topbar-primary-row>.brand{max-width:132px;flex:0 1 auto;} body.yekfi-signature .brand-wordmark-field{width:69px;max-width:69px;height:18px;} body.yekfi-signature .brand-tagline-ar{display:block;font-size:10.8px;} body.yekfi-signature .header-budget-chip{min-width:86px;max-width:96px;padding-inline:8px;} body.yekfi-signature .header-budget-copy small{font-size:10.2px;} body.yekfi-signature .header-budget-copy b{font-size:13px;} body.yekfi-signature .header-budget-chip>em{font-size:10px;} body.yekfi-signature .topbar{padding-inline:8px;} body.yekfi-signature .topbar-primary-row{gap:7px;} body.yekfi-signature .topbar-utility-row{gap:5px;} } @media(max-width:330px){ body.yekfi-signature .brand-symbol-large{width:42px;height:42px;min-width:42px;flex-basis:42px;} body.yekfi-signature .topbar-primary-row>.brand{max-width:124px;} body.yekfi-signature .brand-wordmark-field{width:64px;max-width:64px;} body.yekfi-signature .brand-tagline-ar{font-size:10.3px;} body.yekfi-signature .header-budget-chip{min-width:82px;max-width:88px;padding-inline:7px;} body.yekfi-signature .header-budget-copy small{display:none;} body.yekfi-signature .header-budget-copy b{font-size:13.5px;} } /* Final readability/contrast authority for the compact header and consumer copy. */ body.yekfi-signature{ --color-accent-strong:#835016; --color-price:#8A551F; --color-disabled:#687068; } body.yekfi-v11{--yk-ink-faint:#747067;} body.yekfi-signature .microtag{color:#835016;} body.yekfi-signature :is( .sig-hero-overline,.eyebrow,.microtag, .v11-week-pulse-copy small,.v11-week-pulse-copy em, .v11-week-health-note small,.v11-week-health-note strong, .v11-personalization-proof small,.v11-personalization-proof em, .learning-pattern-card small,.learning-pattern-card em, .learning-portion-note small, .household-learning-card small,.household-learning-card em, .learning-outcome-grid button small,.learning-privacy-note, .learning-leftover-grid button small,.learning-rating-grid button small, .learning-rating-head small,.learning-rating-head p, .learning-evidence-row small,.learning-evidence-row em,.learning-evidence-row button, .learning-empty small,.learning-week-pulse-copy small,.learning-week-pulse-copy em, .learning-closeout-hero small,.learning-closeout-hero p, .learning-closeout-grid small,.learning-closeout-grid em, .learning-closeout-story small,.learning-next-signal small,.learning-next-signal p, .learning-spend-truth small,.learning-spend-truth>em ){font-size:11px;line-height:1.45;} body.yekfi-signature .brand-tagline-ar{font-size:11.5px;} body.yekfi-signature .header-budget-copy small{font-size:11px;} body.yekfi-signature .header-budget-chip>em{font-size:11px;} @media(max-width:360px){ body.yekfi-signature .brand-tagline-ar{font-size:11px;} body.yekfi-signature .header-budget-copy small{font-size:11px;} body.yekfi-signature .header-budget-chip>em{font-size:11px;} } @media(max-width:330px){ body.yekfi-signature .brand-tagline-ar{font-size:11px;} } /* Dark/light surface foreground ownership — prevents global muted copy from leaking across contexts. */ body.yekfi-signature .household-learning-card:not(.has-insight) small{color:#D7A65F;} body.yekfi-signature .household-learning-card:not(.has-insight) em{color:rgba(255,253,247,.78);} body.yekfi-signature .household-learning-card.has-insight .household-learning-icon{background:#F5E9D8;color:#835016;} body.yekfi-signature .learning-closeout-hero small{color:#D7A65F;} body.yekfi-signature .learning-closeout-hero p{color:rgba(255,253,247,.82);} body.yekfi-signature .learning-spend-truth small{color:#D7A65F;} body.yekfi-signature .learning-spend-truth>em{color:rgba(255,253,247,.78);} /* Final consumer typography floor for recurring compact labels. */ body.yekfi-signature .sig-section-head small{font-size:11.5px;line-height:1.4;} body.yekfi-signature .v11-confidence, body.yekfi-signature .v11-attention-head small, body.yekfi-signature .v11-plan-decision-head small, body.yekfi-signature .v11-plan-alternatives .registry-alt-head small, body.yekfi-signature .v11-month-progress-head small, body.yekfi-signature .v11-month-week-track small{font-size:11px;line-height:1.3;} body.yekfi-signature .v11-month-week-track i{font-size:11px;} @media(max-width:560px){body.yekfi-signature .v11-command-chip b{font-size:11px;}} @media(max-width:340px){body.yekfi-signature .v11-command-chip b{font-size:11px;}} /* Header lockup authority: wins over legacy compact-header selectors. */ body.yekfi-signature .brand-copy-field .brand-tagline-ar{ display:block;font-size:11.5px;line-height:1.2;font-weight:750;color:#4F5B51; } @media(max-width:360px){body.yekfi-signature .brand-copy-field .brand-tagline-ar{font-size:11px;}} } /* ===================================================================== YEKFI v11.11 — Safari UI Hardening & Semantic Trust Device-first visual corrections based on physical iPhone/Safari QA. Presentation only: no planner/solver/nutrition/budget policy logic. ===================================================================== */ body.yekfi-signature{ --app-bottom-nav-h:78px; --yk-v1111-bottom-reserve:calc(var(--app-bottom-nav-h) + max(16px,env(safe-area-inset-bottom)) + 72px); } /* App-shell reserve: content must never disappear behind the floating nav or Safari chrome. */ body.yekfi-signature .content{ min-height:100dvh; padding-bottom:var(--yk-v1111-bottom-reserve) !important; scroll-padding-bottom:var(--yk-v1111-bottom-reserve); } body.yekfi-signature :is(.view,.sig-page){scroll-margin-bottom:var(--yk-v1111-bottom-reserve)} body.yekfi-signature .app-trust-footer{margin-bottom:28px} body.yekfi-signature .bottom-nav{ bottom:max(12px,env(safe-area-inset-bottom)); min-height:72px; padding:7px 8px; } body.yekfi-signature .bottom-nav .nav-btn{min-height:58px} /* Compact, collision-proof mobile header. The amount owns one line; secondary spend truth moves out of the critical header row. */ body.yekfi-signature .topbar-primary-row{min-width:0} body.yekfi-signature .topbar-primary-row>.brand{min-width:0} body.yekfi-signature .topbar-utility-row{min-width:0;flex:0 0 auto} body.yekfi-signature .header-budget-chip{overflow:hidden} @media(max-width:520px){ body.yekfi-signature .topbar{padding-inline:10px} body.yekfi-signature .topbar-primary-row{grid-template-columns:minmax(112px,1fr) auto;gap:8px} body.yekfi-signature .topbar-primary-row>.brand{max-width:150px} body.yekfi-signature .topbar-utility-row{gap:6px;max-width:166px} body.yekfi-signature .header-budget-chip{ width:112px;min-width:112px;max-width:112px;height:46px;min-height:46px; padding:5px 8px;justify-items:center;text-align:center; } body.yekfi-signature .header-budget-copy{width:100%;justify-content:center;gap:0} body.yekfi-signature .header-budget-copy small{display:none} body.yekfi-signature .header-budget-copy b{font-size:15px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis} body.yekfi-signature .header-budget-chip>em{display:none} body.yekfi-signature .topbar-utility-row .round-icon{width:46px;min-width:46px;height:46px} } @media(max-width:370px){ body.yekfi-signature .topbar-primary-row{grid-template-columns:minmax(96px,1fr) auto} body.yekfi-signature .topbar-primary-row>.brand{max-width:128px} body.yekfi-signature .brand-symbol-large{width:36px;height:36px;min-width:36px;flex-basis:36px} body.yekfi-signature .brand-wordmark-field{width:60px;max-width:60px} body.yekfi-signature .header-budget-chip{width:104px;min-width:104px;max-width:104px} body.yekfi-signature .header-budget-copy b{font-size:14px} } /* Sheet architecture: chrome is fixed in the sheet; only body content scrolls. */ body.yekfi-signature .modal.sheet{ overflow:hidden; padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom)); } body.yekfi-signature .sheet-panel{ display:grid; grid-template-rows:auto auto minmax(0,1fr); width:min(620px,100%); max-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom))); padding:10px 16px 0; overflow:hidden; overscroll-behavior:contain; } body.yekfi-signature .sheet-panel>.handle{position:relative;top:auto;z-index:1;flex:0 0 auto} body.yekfi-signature .sheet-head{ position:relative;top:auto;z-index:4; min-height:58px;padding:8px 0 10px; background:var(--color-bg,#FFFDF7); backdrop-filter:none; } body.yekfi-signature #sheetContent{ min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; padding:12px 0 max(34px,env(safe-area-inset-bottom)); scroll-padding-top:12px;scroll-padding-bottom:max(34px,env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch; } /* Grocery monthly cards: explicit non-overlapping zones, including image-less products. */ body.yekfi-signature .home-stock-list{ padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important; display:flex;flex-direction:column;gap:10px; } body.yekfi-signature .sig-shop-item.monthly-item, body.yekfi-signature .sig-shop-item.monthly-item:not(.has-food-thumb){ min-height:0;padding:12px; display:grid; grid-template-columns:46px minmax(0,1fr) 58px; grid-template-rows:auto auto; grid-template-areas:"check main thumb" "meta meta meta"; column-gap:10px;row-gap:10px;align-items:start;overflow:hidden; } body.yekfi-signature .monthly-item .sig-shop-check{ grid-area:check;width:44px;height:44px;min-width:44px;min-height:44px;align-self:start; background:#FFFDF8;border-color:#BFC5BC;color:#456249;font-size:18px; } body.yekfi-signature .monthly-item .sig-shop-check:not(.checked){background:#F5F6F1;color:#7B847C} body.yekfi-signature .monthly-item .sig-shop-thumb-slot{ grid-area:thumb;width:58px;height:58px;align-self:start;overflow:hidden; } body.yekfi-signature .monthly-item .sig-shop-thumb-empty{ display:grid;place-items:center;border:1px solid #D5DBD2;border-radius:16px;background:#EEF1EB;color:#657166; } body.yekfi-signature .monthly-item .sig-shop-thumb-empty .ui-svg{width:22px;height:22px} body.yekfi-signature .monthly-item .sig-shop-main{grid-area:main;align-self:start;padding-top:1px} body.yekfi-signature .monthly-item .sig-shop-main>b{font-size:16px;line-height:1.35} body.yekfi-signature .monthly-item .sig-shop-main>small{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:12px;line-height:1.5} body.yekfi-signature .monthly-item .sig-shop-meta{ grid-area:meta;width:100%;padding:10px 0 0;border-top:1px solid rgba(95,104,95,.20); display:grid;grid-template-columns:1fr 1fr;gap:10px; } body.yekfi-signature .monthly-item .sig-shop-meta>span{display:grid;gap:2px;min-width:0} body.yekfi-signature .monthly-item .sig-shop-meta small{white-space:normal;font-size:11px} body.yekfi-signature .monthly-item .sig-shop-meta b{white-space:normal;font-size:13.5px} @media(max-width:390px){ body.yekfi-signature .sig-shop-item.monthly-item, body.yekfi-signature .sig-shop-item.monthly-item:not(.has-food-thumb){ grid-template-columns:44px minmax(0,1fr) 52px;padding:11px 10px;column-gap:8px; } body.yekfi-signature .monthly-item .sig-shop-thumb-slot{width:52px;height:52px} } /* Home inventory density: status is secondary; product name remains the visual anchor. */ body.yekfi-signature .home-stock-group{padding:10px 12px} body.yekfi-signature .home-stock-group .category-head{padding:2px 0 8px} body.yekfi-signature .home-stock-group .category-head>span{font-size:11px;color:#687168;font-weight:750} body.yekfi-signature .home-house-row{min-height:68px;padding:9px 0;gap:8px} body.yekfi-signature .home-house-main b{font-size:15px;line-height:1.35} body.yekfi-signature .home-house-main small{font-size:11.5px;line-height:1.45} body.yekfi-signature .home-mini-action{min-width:74px;min-height:40px;padding:7px 10px;font-size:12px} body.yekfi-signature .home-status{font-size:11px} body.yekfi-signature .home-status.unknown{background:#ECEDE7;color:#5F685F;border-color:#D3D7CF} body.yekfi-signature .home-status.off{background:#E4E6E1;color:#616861} /* Stock hero had no explicit media ownership; make it a controlled compact hero. */ body.yekfi-signature .stock-hero{ position:relative;isolation:isolate;display:block;min-height:300px;padding:0;overflow:hidden; border-radius:var(--radius-hero); } body.yekfi-signature .stock-hero-media{position:absolute;inset:0;z-index:0} body.yekfi-signature .stock-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center} body.yekfi-signature .stock-hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,35,21,.94) 0%,rgba(17,43,25,.78) 50%,rgba(17,43,25,.40) 100%)} body.yekfi-signature .stock-hero-copy{position:relative;z-index:2;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 22px 24px;max-width:88%} body.yekfi-signature .stock-hero-copy h1{font-size:clamp(28px,7vw,38px);line-height:1.14;margin:6px 0 8px;color:#FFFDF7} body.yekfi-signature .stock-hero-copy p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.88);max-width:560px} body.yekfi-signature .stock-hero-mark{position:absolute;z-index:3;inset-inline-start:22px;bottom:22px} @media(max-width:520px){ body.yekfi-signature .stock-hero{min-height:285px} body.yekfi-signature .stock-hero-copy{min-height:285px;padding:18px 18px 20px;max-width:94%} body.yekfi-signature .stock-hero-copy h1{font-size:30px} body.yekfi-signature .stock-hero-copy p{font-size:13px;line-height:1.55} body.yekfi-signature .stock-hero-mark{width:48px;height:48px;inset-inline-start:18px;bottom:18px} } /* Mobile hero density: preserve identity, expose the user's task sooner. */ @media(max-width:560px){ body.yekfi-signature .sig-week-hero{min-height:320px !important} body.yekfi-signature .sig-week-hero .sig-hero-copy{min-height:320px !important;padding:20px 18px !important} body.yekfi-signature .sig-next-hero{min-height:320px !important} body.yekfi-signature .sig-next-hero .sig-hero-copy{min-height:320px !important;padding:20px 18px !important} body.yekfi-signature .sig-shopping-hero{min-height:350px !important} body.yekfi-signature .sig-shopping-hero .sig-hero-copy{min-height:350px !important;padding:20px 18px !important;width:min(92%,430px) !important} body.yekfi-signature .sig-shopping-hero .sig-hero-title{font-size:26px !important;line-height:1.16} } /* Hero metadata must remain readable on photography. */ body.yekfi-signature .sig-shopping-stats span, body.yekfi-signature .sig-hero-meta span{ background:rgba(255,253,247,.92);border-color:rgba(255,255,255,.82);color:#203526; text-shadow:none;backdrop-filter:blur(8px); } body.yekfi-signature .sig-shopping-stats span :is(small,b), body.yekfi-signature .sig-hero-meta span :is(small,b){color:#203526} /* Week actions: keep all functionality but reduce visual competition with the meal name. */ body.yekfi-signature .sig-week-row-actions{gap:7px;margin-top:9px} body.yekfi-signature .sig-week-row-actions>button, body.yekfi-signature .meal-more>summary.week-more-trigger{min-height:42px;height:42px} body.yekfi-signature .sig-week-row-actions>button.primary{font-weight:850} body.yekfi-signature .sig-week-row-actions>button:not(.primary){background:#F7F7F2;border-color:#CFD3CC;color:#405044} /* Nutrition review: explicit, never an accidental dismiss affordance. */ body.yekfi-signature .generation-notice.needs-review>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap} body.yekfi-signature .generation-review-later{min-height:42px;padding:8px 12px;font-size:12px} body.yekfi-signature .v11-week-health-note small{font-size:11px;color:#744B14} body.yekfi-signature .v11-week-health-note b{font-size:13px;line-height:1.5} /* Semantic finance cards: long labels and amounts must not collide. */ body.yekfi-signature .v11-plan-proof{align-items:stretch} body.yekfi-signature .v11-plan-proof>span{min-width:0} body.yekfi-signature .v11-plan-proof small{white-space:normal;line-height:1.35} body.yekfi-signature .v11-plan-proof b{font-variant-numeric:tabular-nums} body.yekfi-signature .v11-plan-decision>p b{color:#28482D} /* Less nested chrome: sections own the boundary; lists own spacing. */ body.yekfi-signature :is(.home-stock-list,.stock-purchase-list,.monthly-house-list){box-shadow:none} body.yekfi-signature .stock-purchase-list{background:transparent;border:0;padding:0;display:flex;flex-direction:column;gap:10px} /* Production-facing menu note: calm, no engineering-cycle fingerprint surface. */ body.yekfi-signature .menu-release-note{background:#F6F1E4;border-color:#D8C7A8} body.yekfi-signature .menu-release-note small{color:#5B625A;line-height:1.5} /* RTL direction cues: contextual previous/next controls keep arrows isolated from Arabic shaping. */ body.yekfi-signature :is(.sig-context-bar,.sig-week-switch) button{direction:ltr;unicode-bidi:isolate} /* iPhone-class tightening without reducing touch targets. */ @media(max-width:430px){ body.yekfi-signature .sig-page{gap:18px} body.yekfi-signature .sig-section{gap:10px} body.yekfi-signature .v11-plan-proof{grid-template-columns:1fr 1fr;gap:9px} body.yekfi-signature .v11-plan-proof>span{min-height:86px;padding:12px} body.yekfi-signature .v11-plan-proof b{font-size:20px} body.yekfi-signature .registry-alt-grid{grid-template-columns:1fr 1fr} } /* ========================================================== YEKFI v11.13 — Planning Studio Signature Experience Mint accent is refreshing/supportive; deep green + gold remain brand anchors. ========================================================== */ :root{ --yk-mint:#A7E6C4; --yk-mint-rich:#79CAA0; --yk-mint-strong:#3F9F6A; --yk-mint-soft:#E4F7EC; --yk-mint-soft-2:#D2F1DE; --yk-mint-ink:#153C29; --yk-mint-line:#74BF95; } body.yekfi-signature .bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible} body.yekfi-signature .bottom-nav .nav-btn{min-width:0;padding-inline:3px} body.yekfi-signature .bottom-nav .nav-btn span{font-size:10.5px;font-weight:850} body.yekfi-signature .bottom-nav .planning-nav-btn{position:relative;background:linear-gradient(160deg,#184B35,#0E3827);color:#F7FFF9;border:1px solid #C9A54D;box-shadow:0 9px 22px rgba(14,56,39,.24),inset 0 0 0 1px rgba(167,230,196,.17);transform:translateY(-7px);z-index:2} body.yekfi-signature .bottom-nav .planning-nav-btn i{width:32px;height:32px;border-radius:12px;background:rgba(167,230,196,.15);display:grid;place-items:center;color:var(--yk-mint)} body.yekfi-signature .bottom-nav .planning-nav-btn.active{background:linear-gradient(155deg,#236D4B,#164E35);color:#fff;border-color:#E1BB58;box-shadow:0 12px 28px rgba(18,76,51,.30),0 0 0 3px rgba(167,230,196,.20)} body.yekfi-signature .bottom-nav .planning-nav-btn.active i{color:#DFFFF0;background:rgba(167,230,196,.20)} body.yekfi-signature[data-yekfi-view="planning"] .content{background:radial-gradient(circle at 82% 8%,rgba(167,230,196,.22),transparent 26%),radial-gradient(circle at 15% 30%,rgba(211,176,91,.10),transparent 24%)} body.yekfi-signature .planning-signature-page{display:grid;gap:18px;max-width:760px;margin-inline:auto;padding-bottom:18px} body.yekfi-signature .planning-hero{position:relative;overflow:hidden;min-height:310px;padding:30px 26px;border:1px solid rgba(200,165,77,.62);border-radius:32px;background:linear-gradient(145deg,#123D2B 0%,#194E36 58%,#245C40 100%);color:#fff;box-shadow:0 22px 52px rgba(22,61,43,.18)} body.yekfi-signature .planning-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 57%,rgba(255,255,255,.055) 57% 58%,transparent 58%);pointer-events:none} body.yekfi-signature .planning-hero-orb{position:absolute;border-radius:999px;filter:blur(2px);pointer-events:none}.planning-hero-orb.mint-one{width:210px;height:210px;background:rgba(167,230,196,.18);left:-55px;top:-70px}.planning-hero-orb.mint-two{width:120px;height:120px;background:rgba(121,202,160,.16);right:12%;bottom:-48px} body.yekfi-signature .planning-hero-copy{position:relative;z-index:2;max-width:590px}.planning-kicker{display:inline-flex;padding:7px 11px;border:1px solid rgba(167,230,196,.46);border-radius:999px;background:rgba(167,230,196,.12);color:#DFFFF0;font-size:12px;font-weight:900}.planning-hero h1{margin:18px 0 12px;font-size:clamp(34px,7vw,54px);line-height:1.05;letter-spacing:-.035em;color:#FFFDF7}.planning-hero h1 em{font-style:normal;color:var(--yk-mint)}.planning-hero p{max-width:590px;margin:0;color:#E6F2E9;font-size:16px;line-height:1.85;font-weight:650}.planning-proof{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.planning-proof span{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);color:#F7FFF9;font-size:11.5px;font-weight:800}.planning-hero-mark{position:absolute;left:22px;bottom:20px;width:58px;height:58px;border-radius:20px;display:grid;place-items:center;color:var(--yk-mint);background:rgba(167,230,196,.11);border:1px solid rgba(167,230,196,.28);z-index:2}.planning-hero-mark .ui-svg{width:28px;height:28px} body.yekfi-signature .planning-context,body.yekfi-signature .planning-ways{padding:18px;border:1px solid #AEB8AE;border-radius:27px;background:rgba(255,253,247,.94);box-shadow:0 10px 32px rgba(31,48,34,.07)} body.yekfi-signature .planning-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px}.planning-section-heading span small{display:block;color:#526356;font-weight:800;margin-bottom:3px}.planning-section-heading h2{margin:0;color:#14251A;font-size:24px;line-height:1.2}.planning-section-heading>button{border:1px solid var(--yk-mint-line);background:var(--yk-mint-soft);color:var(--yk-mint-ink);padding:9px 13px;border-radius:14px;font-weight:900}.planning-section-heading>em{font-style:normal;color:#647168;font-size:11px;font-weight:750} body.yekfi-signature .planning-context-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.planning-context-grid>span{min-height:78px;padding:13px;border-radius:18px;background:#F7F5ED;border:1px solid #CCD1C8;display:flex;flex-direction:column;justify-content:center;gap:4px}.planning-context-grid>span.mint{background:var(--yk-mint-soft);border-color:#A9D8BB}.planning-context-grid small{color:#667168;font-size:11px;font-weight:750}.planning-context-grid b{color:#17291D;font-size:15px;line-height:1.35}.planning-context-empty{padding:18px;border-radius:20px;background:var(--yk-mint-soft);border:1px solid #A9D8BB;display:grid;gap:6px}.planning-context-empty b{font-size:18px;color:var(--yk-mint-ink)}.planning-context-empty small{color:#496252;line-height:1.65}.planning-context-setup{margin-top:6px;justify-self:start;border:0;border-radius:13px;padding:10px 16px;background:#174A34;color:#fff;font-weight:900} body.yekfi-signature .planning-approved{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:17px 18px;border-radius:24px;border:1px solid #98C9AB;background:linear-gradient(120deg,#EFFAF3,#E2F5EA);box-shadow:0 10px 28px rgba(45,113,75,.08)}.planning-approved-mark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#2E8255;color:#fff}.planning-approved-mark .ui-svg{width:24px;height:24px}.planning-approved small{color:#3A6B4E;font-weight:850}.planning-approved h2{font-size:17px;margin:2px 0 4px;color:#173D29}.planning-approved p{margin:0;color:#506258;font-size:12px;font-weight:700}.planning-approved-actions{display:grid;gap:7px}.planning-approved-actions button{border:1px solid #6FAF88;background:#fff;color:#18422D;border-radius:12px;padding:8px 11px;font-weight:900;white-space:nowrap} body.yekfi-signature .planning-draft{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:14px 16px;border-radius:22px;background:#FFF9E9;border:1px solid #D8BC73}.planning-draft-icon{width:44px;height:44px;border-radius:15px;background:var(--yk-mint-soft);color:var(--yk-mint-ink);display:grid;place-items:center}.planning-draft-icon .ui-svg{width:22px;height:22px}.planning-draft small,.planning-draft b,.planning-draft em{display:block}.planning-draft small{color:#74633B;font-weight:800}.planning-draft b{color:#2E321E;font-size:16px;margin:2px 0}.planning-draft em{font-style:normal;color:#6E705F;font-size:11.5px}.planning-draft i{display:block;height:5px;margin-top:7px;background:#E6E1D3;border-radius:99px;overflow:hidden}.planning-draft i u{display:block;height:100%;background:linear-gradient(90deg,var(--yk-mint-strong),#C49A3D);border-radius:99px}.planning-draft>button{border:0;background:#1D4D36;color:#fff;border-radius:13px;padding:10px 14px;font-weight:900} body.yekfi-signature .planning-way-stack{display:grid;gap:13px}.planning-way{width:100%;text-align:right;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px;border-radius:24px;border:1px solid #AAB5AA;background:#FFFEFA;color:#16251A;box-shadow:0 8px 22px rgba(31,48,34,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.planning-way:active{transform:scale(.985)}.planning-way-icon{width:58px;height:58px;border-radius:19px;display:grid;place-items:center}.planning-way-icon .ui-svg{width:27px;height:27px}.planning-way-copy{min-width:0}.planning-way-copy small{display:block;color:#617066;font-size:11px;font-weight:850;margin-bottom:3px}.planning-way-copy b{display:block;font-size:23px;line-height:1.2;color:#15251A}.planning-way-copy em{display:block;margin-top:6px;color:#4E5D53;font-size:13px;line-height:1.65;font-style:normal;font-weight:650}.planning-way-copy u{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;text-decoration:none}.planning-way-copy u i{font-style:normal;padding:5px 8px;border-radius:999px;background:#F0F2ED;color:#405047;font-size:10.5px;font-weight:800}.planning-way>strong{font-size:12px;white-space:nowrap;color:#264C35}.planning-way-auto{border-color:#C7A44B;background:linear-gradient(115deg,#FEFCF5,#F8F3E5)}.planning-way-auto .planning-way-icon{background:#174A34;color:#DFFFF0;box-shadow:inset 0 0 0 1px rgba(212,178,79,.32)}.planning-way-assist{border-color:var(--yk-mint-line);background:linear-gradient(115deg,#F5FFF8,var(--yk-mint-soft))}.planning-way-assist .planning-way-icon{background:var(--yk-mint);color:var(--yk-mint-ink)}.planning-way-assist .planning-way-copy small{color:#2B7850}.planning-way-manual .planning-way-icon{background:#F3E7C6;color:#5D491A} body.yekfi-signature .planning-engine-trust{display:flex;gap:13px;align-items:flex-start;padding:18px;border-radius:23px;background:#F4FAF6;border:1px dashed #8FC6A4}.planning-engine-trust .mint-badge{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:var(--yk-mint);color:var(--yk-mint-ink);font-size:20px;flex:none}.planning-engine-trust small{display:block;color:#3E7655;font-weight:850}.planning-engine-trust b{display:block;color:#183D2A;font-size:16px;margin:2px 0 5px}.planning-engine-trust p{margin:0;color:#52665A;line-height:1.7;font-size:12.5px}.planning-onboarding-hint{display:flex;gap:12px;align-items:center;margin:12px 0 18px;padding:14px 15px;border-radius:18px;background:var(--yk-mint-soft);border:1px solid #A7D7B9}.planning-onboarding-hint>span{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--yk-mint);color:var(--yk-mint-ink);font-weight:900}.planning-onboarding-hint b{display:block;color:#173D29}.planning-onboarding-hint small{display:block;margin-top:3px;color:#4D6656;line-height:1.5} @media(max-width:600px){body.yekfi-signature .planning-signature-page{gap:14px}.planning-hero{min-height:280px!important;padding:24px 20px!important;border-radius:28px!important}.planning-hero h1{font-size:39px!important}.planning-hero p{font-size:14px!important}.planning-hero-mark{width:50px!important;height:50px!important;left:17px!important;bottom:16px!important}.planning-context-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.planning-way{grid-template-columns:auto 1fr!important;padding:15px!important}.planning-way>strong{grid-column:2;justify-self:start;margin-top:-4px}.planning-way-icon{width:50px!important;height:50px!important}.planning-way-copy b{font-size:20px!important}.planning-way-copy em{font-size:12.5px!important}.planning-approved{grid-template-columns:auto 1fr!important}.planning-approved-actions{grid-column:1/-1;grid-template-columns:1fr 1fr;width:100%}.planning-section-heading{align-items:flex-start!important}.planning-section-heading>em{display:none}.bottom-nav .planning-nav-btn{transform:translateY(-5px)!important}} @media(max-width:380px){body.yekfi-signature .bottom-nav .nav-btn span{font-size:9.7px}.planning-proof span{font-size:10.5px!important}.planning-hero h1{font-size:35px!important}.planning-way-copy u i{font-size:9.7px!important}} @media(min-width:900px){body.yekfi-signature .planning-way-stack{grid-template-columns:1.08fr 1fr 1fr;align-items:stretch}.planning-way{grid-template-columns:1fr!important;align-content:start;min-height:300px}.planning-way-icon{width:64px;height:64px}.planning-way>strong{margin-top:auto}.planning-context-grid{gap:12px}} /* v11.13 mint accent propagation — positive/informational states only */ body.yekfi-signature .loader-stages span.done, body.yekfi-signature .pilot-runtime-grid span.ok, body.yekfi-signature .delight-ready-good, body.yekfi-signature .planning-truth span, body.yekfi-signature .generation-notice:not(.needs-review), body.yekfi-signature .delight-first-value-proof span, body.yekfi-signature .delight-complete-note.good{background:var(--yk-mint-soft);border-color:#A7D6B8;color:var(--yk-mint-ink)} body.yekfi-signature .loader-stages span.done,body.yekfi-signature .pilot-runtime-grid span.ok b,body.yekfi-signature .delight-ready-good b{color:var(--yk-mint-ink)} body.yekfi-signature .delight-first-value-proof span:before{color:var(--yk-mint-strong)} body.yekfi-signature .planning-entry-empty{border:1px solid #A7D6B8;background:linear-gradient(145deg,#FFFEFA,var(--yk-mint-soft));} @media(min-width:900px){body.yekfi-signature .bottom-nav .planning-nav-btn{transform:none!important}} /* ===================================================================== YEKFI v11.14 — iPhone Boot, Navigation & Contrast Hotfix Final mobile authority. No planner/solver policy changes. ===================================================================== */ :root{ --yk-v1114-ink:#132218; --yk-v1114-copy:#34483A; --yk-v1114-muted:#4B5D50; --yk-v1114-line:#9EAA9F; --yk-v1114-surface:#FFFDF7; } /* One-row five-destination navigation on physical iPhone Safari. */ body.yekfi-signature .bottom-nav{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; grid-template-rows:68px !important; grid-auto-flow:column !important; width:calc(100% - 16px) !important; max-width:560px !important; min-height:80px !important; height:auto !important; gap:2px !important; padding:6px 6px max(6px,env(safe-area-inset-bottom)) !important; overflow:visible !important; align-items:stretch !important; direction:rtl !important; } body.yekfi-signature .bottom-nav .nav-btn{ grid-row:1 !important; min-width:0 !important; width:100% !important; min-height:58px !important; height:58px !important; padding:5px 1px !important; margin:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; border-radius:17px !important; transform:none !important; overflow:visible !important; } body.yekfi-signature .bottom-nav .nav-btn i{ width:24px !important;height:24px !important;min-width:24px !important; display:grid !important;place-items:center !important;margin:0 !important; } body.yekfi-signature .bottom-nav .nav-btn .ui-svg{width:22px !important;height:22px !important} body.yekfi-signature .bottom-nav .nav-btn span{ display:block !important; max-width:100% !important; font-size:10.8px !important; line-height:1.08 !important; font-weight:900 !important; color:inherit !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; } body.yekfi-signature .bottom-nav .planning-nav-btn{ transform:none !important; background:linear-gradient(160deg,#184B35,#0E3827) !important; color:#F9FFF9 !important; border:1px solid #C9A54D !important; box-shadow:inset 0 0 0 1px rgba(167,230,196,.16) !important; } body.yekfi-signature .bottom-nav .planning-nav-btn i{ width:26px !important;height:26px !important;border-radius:9px !important; background:rgba(167,230,196,.16) !important;color:#CFF6DE !important; } body.yekfi-signature .bottom-nav .planning-nav-btn.active{ background:linear-gradient(155deg,#236D4B,#164E35) !important; color:#FFF !important;border-color:#DDBA5A !important; box-shadow:0 0 0 2px rgba(121,202,160,.20),inset 0 0 0 1px rgba(255,255,255,.05) !important; } @media(max-width:360px){ body.yekfi-signature .bottom-nav{width:calc(100% - 10px) !important;padding-inline:4px !important;gap:1px !important} body.yekfi-signature .bottom-nav .nav-btn span{font-size:10px !important} body.yekfi-signature .bottom-nav .nav-btn{border-radius:15px !important;padding-inline:0 !important} } /* Header budget owns a compact, legible slot. */ @media(max-width:520px){ body.yekfi-signature .topbar-primary-row{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:8px !important;align-items:center !important} body.yekfi-signature .topbar-primary-row>.brand{min-width:0 !important;max-width:none !important;overflow:hidden !important} body.yekfi-signature .topbar-utility-row{display:flex !important;align-items:center !important;gap:6px !important;max-width:none !important;min-width:0 !important} body.yekfi-signature .header-budget-chip{width:100px !important;min-width:100px !important;max-width:100px !important;height:48px !important;min-height:48px !important;padding:5px 7px !important;overflow:hidden !important;justify-items:stretch !important} body.yekfi-signature .header-budget-copy{display:block !important;width:100% !important;min-width:0 !important} body.yekfi-signature .header-budget-copy small{display:none !important} body.yekfi-signature .header-budget-copy b{display:block !important;width:100% !important;text-align:center !important;direction:rtl !important;unicode-bidi:plaintext !important;font-size:14px !important;line-height:1.2 !important;color:#714116 !important;white-space:nowrap !important;overflow:visible !important} body.yekfi-signature .header-budget-chip>em{display:block !important;width:100% !important;text-align:center !important;font-size:10.5px !important;line-height:1.15 !important;color:#405044 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important} body.yekfi-signature .topbar-utility-row .round-icon{width:46px !important;min-width:46px !important;height:46px !important} } /* High-contrast light-surface ownership. */ body.yekfi-signature :is( .planning-context,.planning-ways,.planning-approved,.planning-draft,.planning-engine-trust, .planning-way,.runtime-recovery-card,.empty-state-page,.generation-notice, .sig-panel,.sig-section:not(.sig-hero),.summary-banner:not(.dark) ){color:var(--yk-v1114-ink)} body.yekfi-signature :is( .planning-context,.planning-ways,.planning-approved,.planning-draft,.planning-engine-trust, .planning-way,.runtime-recovery-card,.empty-state-page,.generation-notice, .sig-panel,.sig-section:not(.sig-hero),.summary-banner:not(.dark) ) :is(p,small,em){color:var(--yk-v1114-copy)} body.yekfi-signature .planning-way-copy small, body.yekfi-signature .planning-context-grid small, body.yekfi-signature .planning-section-heading span small, body.yekfi-signature .planning-engine-trust small{color:#2F6848 !important} body.yekfi-signature .planning-way-copy em, body.yekfi-signature .planning-engine-trust p, body.yekfi-signature .planning-context-empty small{color:#344C3D !important} body.yekfi-signature .planning-way-copy u i{background:#E8EEE8 !important;color:#263B2D !important;border:1px solid #C6D0C7 !important} body.yekfi-signature .planning-way-assist .planning-way-copy u i{background:#D7F1E2 !important;color:#17432D !important;border-color:#9FCEB2 !important} body.yekfi-signature .planning-section-heading>em{color:#405246 !important} /* Dark surfaces keep explicit light foreground; do not inherit light-card overrides. */ body.yekfi-signature :is(.planning-hero,.sig-hero,.household-learning-card:not(.has-insight),.learning-closeout-hero,.learning-spend-truth) :is(h1,h2,h3,b,strong){color:#FFFDF7} body.yekfi-signature :is(.planning-hero,.sig-hero,.household-learning-card:not(.has-insight),.learning-closeout-hero,.learning-spend-truth) :is(p,small,em){color:#EEF6EF} /* Recovery UI must be immediately readable, never washed out. */ body.yekfi-signature .runtime-recovery-card{background:#FFFDF7 !important;border:1px solid #8DA090 !important;box-shadow:0 12px 32px rgba(20,43,27,.10) !important} body.yekfi-signature .runtime-recovery-card h1, body.yekfi-signature .runtime-recovery-card h2{color:#14231A !important} body.yekfi-signature .runtime-recovery-card p{color:#34483A !important;font-weight:650 !important} body.yekfi-signature .toast{background:#173B29 !important;color:#FFF !important;border:1px solid #8EC3A2 !important;box-shadow:0 12px 32px rgba(11,42,27,.22) !important} body.yekfi-signature .toast :is(b,span,small){color:#FFF !important} /* Minimum readable consumer copy on iPhone. */ @media(max-width:430px){ body.yekfi-signature .planning-way-copy b{font-size:20px !important} body.yekfi-signature .planning-way-copy em{font-size:13px !important;line-height:1.6 !important} body.yekfi-signature .planning-way-copy small{font-size:11.5px !important} body.yekfi-signature .planning-context-grid small{font-size:11px !important} body.yekfi-signature .planning-context-grid b{font-size:14px !important} body.yekfi-signature .planning-engine-trust p{font-size:13px !important} } /* D1.12 R2 — update availability is advisory UI, never a blocker over save/approval surfaces. */ body.modal-active .yekfi-update-banner{display:none!important} @media(max-width:430px){ .yekfi-update-banner{padding:7px 9px;gap:8px;border-radius:16px;bottom:calc(74px + env(safe-area-inset-bottom));} .yekfi-update-banner small{display:none} .yekfi-update-banner button{min-height:36px;padding:6px 9px} } /* ===== D1.13.5 RECOVERY VISUAL AUTHORITY ===== Clean override only: preserve D1.13.3 visual baseline; fix contrast/selection and support the D1.13.4 Shopping/Inventory disclosure markup without poster-box inflation. */ :root{ --yk135-ink:#15271b;--yk135-copy:#445248;--yk135-line:#d4dbd4;--yk135-line-strong:#9fb0a2; --yk135-paper:#fffefa;--yk135-soft:#f5f7f2;--yk135-green:#244d31;--yk135-green-soft:#eaf3e9; --yk135-gold:#a87922;--yk135-shadow:0 8px 24px rgba(19,49,29,.075); } /* Hero text: improve the image itself with a controlled shade; never put a dark box around copy. */ body.yekfi-signature :is(.sig-hero,.sig-shopping-hero,.sig-family-hero,.sig-week-hero,.sig-next-hero){ position:relative;isolation:isolate;overflow:hidden; } body.yekfi-signature :is(.sig-hero,.sig-shopping-hero,.sig-family-hero,.sig-week-hero,.sig-next-hero) .sig-hero-shade{ position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(10,30,18,.62) 0%,rgba(10,33,20,.68) 44%,rgba(10,34,20,.82) 100%)!important; } body.yekfi-signature :is(.sig-hero-copy,.planning-hero-copy,.stock-hero-copy,.fi-hero-copy){ position:relative;z-index:2;background:transparent!important;border:0!important;box-shadow:none!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } body.yekfi-signature .sig-hero-copy :is(h1,h2,h3,b,strong,.sig-hero-title), body.yekfi-signature .planning-hero :is(h1,h2,h3,b,strong), body.yekfi-signature .stock-hero :is(h1,h2,h3,b,strong){color:#fffdf7!important;text-shadow:0 2px 7px rgba(0,0,0,.28)} body.yekfi-signature .sig-hero-copy :is(p,small,em,.sig-hero-overline), body.yekfi-signature .planning-hero :is(p,small,em), body.yekfi-signature .stock-hero :is(p,small,em){color:#f4f1e7!important;opacity:1!important;text-shadow:0 1px 4px rgba(0,0,0,.20)} body.yekfi-signature :is(.sig-hero-meta,.delight-shopping-stats)>span{ background:rgba(255,254,250,.95)!important;color:#203526!important;border:1px solid rgba(255,255,255,.86)!important; box-shadow:0 4px 12px rgba(18,45,27,.08); } body.yekfi-signature :is(.sig-hero-meta,.delight-shopping-stats)>span :is(b,strong,small){color:#203526!important;opacity:1!important;text-shadow:none!important} /* Keep mobile heroes premium but not dominant. */ @media(max-width:640px){ body.yekfi-signature :is(.sig-week-hero,.sig-next-hero,.sig-shopping-hero,.sig-family-hero){min-height:250px!important} body.yekfi-signature :is(.sig-week-hero,.sig-next-hero,.sig-shopping-hero,.sig-family-hero) .sig-hero-copy{min-height:250px!important;padding:18px 17px!important} body.yekfi-signature .sig-shopping-hero .sig-hero-title{font-size:25px!important;line-height:1.18!important} body.yekfi-signature .planning-hero{min-height:245px!important;padding:22px 18px!important;border-radius:26px!important} body.yekfi-signature .planning-hero h1{font-size:35px!important} } /* Truthful selection: neutral controls stay neutral. */ body.yekfi-signature :is(.option,.cuisine-card,.budget-policy-card,.appearance-bg-card,.strategic-goal-card,.filter-chip,.shopping-domains button,.shopping-scope-tabs button){ background:#fff!important;color:#26382a!important;border-color:#bec8bf!important;box-shadow:none; } body.yekfi-signature :is(.option.selected,.cuisine-card.selected,.budget-policy-card.selected,.appearance-bg-card.selected,.strategic-goal-card.selected,.filter-chip.active,.shopping-domains button.active,.shopping-scope-tabs button.active,[aria-selected="true"],[aria-pressed="true"]){ background:var(--yk135-green-soft)!important;color:#183820!important;border:1.5px solid #3b6845!important; box-shadow:inset 0 0 0 1px rgba(168,121,34,.26),0 5px 14px rgba(31,69,39,.07)!important; } body.yekfi-signature .topbar :is(.family-top-btn,.topbar-plan-btn):not(.active){background:#fff!important;color:#29442e!important;border:1px solid #bec8bf!important;box-shadow:none!important} body.yekfi-signature .topbar :is(.family-top-btn,.topbar-plan-btn).active{background:#315b3a!important;color:#fff!important;border:1px solid #315b3a!important;box-shadow:0 4px 12px rgba(29,65,37,.13)!important} /* Update notice is compact and secondary. Cohort repair is automatic. */ body.yekfi-signature .yekfi-update-banner{ position:fixed;z-index:1200;inset-inline:12px;bottom:calc(82px + env(safe-area-inset-bottom));max-width:520px;margin-inline:auto; display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 11px; border:1px solid #d3c49c;border-radius:16px;background:#fffdf7;color:#203325;box-shadow:0 12px 28px rgba(24,39,26,.14); } body.yekfi-signature .yekfi-update-banner[hidden]{display:none!important} body.yekfi-signature .yekfi-update-copy{display:grid;gap:2px;min-width:0} body.yekfi-signature .yekfi-update-copy>b{font-size:12.5px!important;line-height:1.35;color:#1f3424!important} body.yekfi-signature .yekfi-update-copy>small{display:block!important;font-size:10.5px!important;line-height:1.45;color:#566258!important} body.yekfi-signature .yekfi-update-actions{display:flex;gap:6px;align-items:center} body.yekfi-signature .yekfi-update-banner button{min-height:38px;padding:7px 9px;border-radius:11px;font:inherit;font-size:10.5px;font-weight:900;white-space:nowrap} body.yekfi-signature .yekfi-update-primary{background:#315b3a!important;color:#fff!important;border:1px solid #315b3a!important} body.yekfi-signature .yekfi-update-later{background:#fff!important;color:#34483a!important;border:1px solid #c6cec6!important} body.modal-active .yekfi-update-banner{display:none!important} @media(max-width:430px){ body.yekfi-signature .yekfi-update-banner{grid-template-columns:1fr;gap:7px;bottom:calc(76px + env(safe-area-inset-bottom));padding:9px 10px} body.yekfi-signature .yekfi-update-actions{display:grid;grid-template-columns:1fr auto;width:100%} } /* Shopping / Inventory: category-first cards, modern and calm. */ body.yekfi-signature .yk-category-stack{display:grid;gap:11px;min-width:0} body.yekfi-signature .yk-category-card{overflow:hidden;border:1px solid var(--yk135-line);border-radius:20px;background:var(--yk135-paper);box-shadow:var(--yk135-shadow);color:var(--yk135-ink)} body.yekfi-signature .yk-category-card[open]{border-color:var(--yk135-line-strong);box-shadow:0 11px 28px rgba(19,49,29,.10)} body.yekfi-signature .yk-category-summary{list-style:none;display:grid;grid-template-columns:76px minmax(0,1fr) auto 30px;align-items:center;gap:11px;padding:10px;min-height:88px;cursor:pointer;background:#fff} body.yekfi-signature .yk-category-summary::-webkit-details-marker{display:none} body.yekfi-signature .yk-category-summary::marker{content:""} body.yekfi-signature .yk-category-photo{width:76px;height:66px;border-radius:15px;overflow:hidden;background:#edf1eb;border:1px solid #dde3dc;display:block} body.yekfi-signature .yk-category-photo img{width:100%;height:100%;object-fit:cover;display:block} body.yekfi-signature .yk-category-copy{display:grid;gap:3px;min-width:0;text-align:start} body.yekfi-signature .yk-category-copy small{font-size:10px;font-weight:800;color:#607166;line-height:1.25} body.yekfi-signature .yk-category-copy b{font-size:16px;font-weight:920;color:var(--yk135-ink);line-height:1.3;white-space:normal} body.yekfi-signature .yk-category-copy em{font-style:normal;font-size:11px;font-weight:680;color:var(--yk135-copy);line-height:1.45;white-space:normal} body.yekfi-signature .yk-category-metric{min-width:70px;padding:7px 9px;border-radius:12px;border:1px solid #dbe1da;background:var(--yk135-soft);display:grid;gap:1px;text-align:center} body.yekfi-signature .yk-category-metric small{font-size:9px;font-weight:780;color:#68746b} body.yekfi-signature .yk-category-metric b{font-size:11.5px;font-weight:930;color:#263a2b;white-space:nowrap} body.yekfi-signature .yk-category-metric.good{background:#edf6eb;border-color:#c6dbc5} body.yekfi-signature .yk-category-metric.attention{background:#fff5df;border-color:#e0cb8d} body.yekfi-signature .yk-category-chevron{width:30px;height:30px;border-radius:999px;border:1px solid #ced7ce;background:#f8faf6;color:#25432c;display:grid;place-items:center;font-size:20px;line-height:1;transition:transform .18s ease} body.yekfi-signature .yk-category-card[open] .yk-category-chevron{transform:rotate(180deg)} body.yekfi-signature .yk-category-body{display:grid;padding:2px 10px 8px;border-top:1px solid #e6eae4;background:#fcfdfa} body.yekfi-signature :is(.yk-grocery-item,.yk-stock-item,.yk-house-item){display:grid;align-items:center;gap:9px;min-width:0;padding:10px 2px;border-bottom:1px solid #eaede8;color:var(--yk135-ink)} body.yekfi-signature :is(.yk-grocery-item,.yk-stock-item,.yk-house-item):last-child{border-bottom:0} body.yekfi-signature .yk-grocery-item{grid-template-columns:44px 48px minmax(0,1fr) minmax(142px,auto)} body.yekfi-signature .yk-stock-item{grid-template-columns:48px minmax(0,1fr) auto} body.yekfi-signature .yk-house-item{grid-template-columns:minmax(0,1fr) auto auto} body.yekfi-signature .yk-item-thumb{width:46px;height:46px;border-radius:13px;overflow:hidden;background:#eef2ec;border:1px solid #dce3da;display:grid;place-items:center;color:#42624a} body.yekfi-signature .yk-item-thumb img{width:100%;height:100%;object-fit:cover} body.yekfi-signature .yk-item-main{min-width:0;border:0;background:transparent;padding:3px 0;text-align:start;color:inherit;display:grid;gap:3px;min-height:44px;align-content:center} body.yekfi-signature .yk-item-main b{font-size:13px;font-weight:900;color:#172d1d;line-height:1.35;white-space:normal} body.yekfi-signature .yk-item-main small{font-size:10.25px;font-weight:660;color:#576359;line-height:1.5;white-space:normal} body.yekfi-signature .yk-item-finance{border:0;background:transparent;padding:0;display:grid;grid-template-columns:repeat(2,minmax(68px,1fr));gap:6px;min-width:142px;color:inherit} body.yekfi-signature .yk-item-finance>span{display:grid;gap:1px;padding:6px 7px;border-radius:10px;background:#f5f7f3;border:1px solid #e0e5de;text-align:center} body.yekfi-signature .yk-item-finance small{font-size:8.75px;font-weight:780;color:#6b776e;white-space:nowrap} body.yekfi-signature .yk-item-finance b{font-size:11px;font-weight:930;color:#1b3421;white-space:nowrap} body.yekfi-signature :is(.yk-item-check,.yk-item-cta){min-width:44px;min-height:44px;border-radius:12px;border:1px solid #b6c1b7;background:#fff;color:#2d4e34;font-weight:900;font-family:inherit} body.yekfi-signature .yk-item-check.checked{background:#315d3b;color:#fff;border-color:#315d3b} body.yekfi-signature .yk-item-status{padding:6px 8px;border-radius:999px;border:1px solid #d7ded6;background:#f5f7f3;color:#31483a;font-size:9.5px;font-weight:880;white-space:nowrap} body.yekfi-signature .yk-item-status.enough,body.yekfi-signature .yk-item-status.good{background:#edf6eb;border-color:#c6dbc5;color:#244a2a} body.yekfi-signature .yk-item-status.soon,body.yekfi-signature .yk-item-status.low{background:#fff3d8;border-color:#e0c781;color:#65480a} body.yekfi-signature .yk-store-category-stack{padding-bottom:96px} @media(max-width:640px){ body.yekfi-signature .yk-category-summary{grid-template-columns:68px minmax(0,1fr) 28px;gap:9px;min-height:82px;padding:9px} body.yekfi-signature .yk-category-photo{width:68px;height:60px;border-radius:14px} body.yekfi-signature .yk-category-metric{grid-column:2;grid-row:2;justify-self:start;display:flex;align-items:center;gap:5px;min-width:0;padding:4px 7px} body.yekfi-signature .yk-category-metric :is(small,b){font-size:9px} body.yekfi-signature .yk-category-chevron{grid-column:3;grid-row:1/3;align-self:center;width:28px;height:28px} body.yekfi-signature .yk-category-copy b{font-size:15px} body.yekfi-signature .yk-grocery-item{grid-template-columns:42px 44px minmax(0,1fr);gap:7px;padding:9px 1px} body.yekfi-signature .yk-grocery-item .yk-item-finance{grid-column:2/4;width:100%;min-width:0} body.yekfi-signature .yk-stock-item{grid-template-columns:44px minmax(0,1fr)} body.yekfi-signature .yk-stock-item .yk-item-status{grid-column:2;justify-self:start} body.yekfi-signature .yk-house-item{grid-template-columns:minmax(0,1fr) auto} body.yekfi-signature .yk-house-item .yk-item-status{grid-column:1;justify-self:start} body.yekfi-signature .yk-item-thumb{width:42px;height:42px;border-radius:12px} } /* D1.13.5 bounded accessibility/responsive closure for category disclosures. */ body.yekfi-signature .yk-category-summary:focus-visible{ outline:3px solid rgba(49,93,59,.34);outline-offset:2px;border-radius:16px; } @media(max-width:640px){ body.yekfi-signature .yk-category-summary{grid-template-columns:74px minmax(0,1fr) 28px} body.yekfi-signature .yk-category-photo{width:74px;height:66px;border-radius:14px} } /* ===== RC3 VIS-P0 safe-area + approval-truth hardening ===== */ :root{--yekfi-visp0-nav-block:calc(var(--app-bottom-nav-h,76px) + max(env(safe-area-inset-bottom),12px));} body.yekfi-signature .content{padding-bottom:calc(var(--yekfi-visp0-nav-block) + 52px)!important;} body.yekfi-signature .bottom-nav{bottom:max(8px,env(safe-area-inset-bottom))!important;} body.yekfi-signature .delight-store-sticky{bottom:calc(var(--yekfi-visp0-nav-block) + 10px)!important;margin-bottom:18px!important;} body.yekfi-signature .gm-shop-page,body.yekfi-signature .stock-page{padding-bottom:calc(var(--yekfi-visp0-nav-block) + 26px)!important;} body.yekfi-signature .gm-approval-truth{margin:0 0 14px;padding:12px 14px;border:1px solid #c9d4c8;border-radius:14px;background:#f4f7f1;display:grid;gap:5px;} body.yekfi-signature .gm-approval-truth b{font-size:15px;color:#244b2c;}body.yekfi-signature .gm-approval-truth p{margin:0;font-size:13px;line-height:1.55;} body.yekfi-signature .gm-approval-needs_revalidation{background:#fff6e7;border-color:#d7a548;}body.yekfi-signature .gm-week-state-needs_revalidation{background:#fff0d2!important;color:#784c00!important;border-color:#d7a548!important;} @media(max-width:430px){body.yekfi-signature .content{padding-bottom:calc(var(--yekfi-visp0-nav-block) + 64px)!important;}body.yekfi-signature .delight-store-sticky{bottom:calc(var(--yekfi-visp0-nav-block) + 14px)!important;}} @supports(padding:max(0px)){@media(display-mode:standalone){body.yekfi-signature .bottom-nav{bottom:max(6px,env(safe-area-inset-bottom))!important;}body.yekfi-signature .content{padding-bottom:calc(var(--yekfi-visp0-nav-block) + 44px)!important;}}}