/* ============================================================ Built for One — Shared Design System (bfo-system.v1.css) Client-agnostic. Extracted from the Flavia reference impl 2026-07-02. PINNED: never edit v1 in a breaking way — publish bfo-system.v2.css instead. ============================================================ */ /* ================================================================ DESIGN SYSTEM — Built for One PaaS Template v1.0 To retheme per client: edit the :root block below. Future: extract this block to a shared CDN CSS file (Option 2). ================================================================ */ /* BUILT FOR ONE — two fully separate themes on ; brand tokens + legacy aliases remapped so Flavia's whole component library re-tints to the brand. */ body.theme-dark { --bg:#111217; --bg-card:#1C1F2A; --text:#ECEEF5; --text-muted:#8A8FA8; --accent:#FF6B1A; --accent-2:#3D9EFF; --divider:#2A2D3A; --border:#2A2D3A; --tint-active:rgba(255,107,26,0.08); --tint-alert:rgba(255,107,26,0.15); --rose:#FF6B1A; --rose-dark:#FF6B1A; --rose-light:rgba(255,107,26,.15); --blush:rgba(255,107,26,.08); --sage:#26C5C5; --sage-dark:#26C5C5; --sage-light:rgba(38,197,197,.15); --lavender:#3D9EFF; --lavender-dark:#3D9EFF; --lavender-light:rgba(61,158,255,.15); --cream:#111217; --warm-white:#1C1F2A; --primary:#FF6B1A; --primary-light:rgba(255,107,26,.15); --primary-dark:#FF6B1A; --secondary:#26C5C5; --shadow:0 4px 20px rgba(0,0,0,.45); --shadow-sm:0 2px 8px rgba(0,0,0,.35); } body.theme-warm { --bg:#F5F0E8; --bg-card:#FFFFFF; --text:#111217; --text-muted:#514A62; --accent:#FF6B1A; --accent-2:#3D9EFF; --divider:#E0D8CC; --border:#E0D8CC; --tint-active:rgba(255,107,26,0.12); --tint-alert:rgba(255,107,26,0.20); --rose:#FF6B1A; --rose-dark:#D45A10; --rose-light:rgba(255,107,26,.12); --blush:rgba(255,107,26,.06); --sage:#1FA3A3; --sage-dark:#178080; --sage-light:rgba(31,163,163,.12); --lavender:#3D9EFF; --lavender-dark:#2C7FD6; --lavender-light:rgba(61,158,255,.12); --cream:#F5F0E8; --warm-white:#FFFFFF; --primary:#FF6B1A; --primary-light:rgba(255,107,26,.12); --primary-dark:#D45A10; --secondary:#1FA3A3; --shadow:0 4px 20px rgba(180,120,60,.12); --shadow-sm:0 2px 8px rgba(180,120,60,.08); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px} body{background:var(--bg);color:var(--text);font-family:'Josefin Sans',system-ui,-apple-system,sans-serif;line-height:1.7;transition:background .25s,color .25s} /* NAV */ nav{position:sticky;top:0;z-index:100;background:rgba(250,247,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:0 1rem} .nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:0;flex-wrap:wrap} nav a{display:block;padding:.75rem .85rem;font-size:.78rem;font-weight:600;text-decoration:none;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;transition:color .2s,border-color .2s;border-bottom:3px solid transparent;border-radius:6px 6px 0 0} nav a:hover{opacity:.8} nav a.nc-red{color:#dc2626;border-color:#dc2626} nav a.nc-amber{color:#d97706;border-color:#d97706} nav a.nc-purple{color:var(--rose);border-color:var(--rose)} nav a.nc-pink{color:var(--lavender);border-color:var(--lavender)} nav a.nc-teal{color:var(--sage);border-color:var(--sage)} nav a.nc-green{color:#16a34a;border-color:#16a34a} nav a.nc-indigo{color:#4f46e5;border-color:#4f46e5} nav a.nc-orange{color:#ea580c;border-color:#ea580c} nav a.nc-mint{color:#0891b2;border-color:#0891b2} nav a.nc-slate{color:#475569;border-color:#475569} .nav-brand{font-weight:800;font-size:1rem;color:var(--rose);margin-right:1rem;white-space:nowrap} /* LAYOUT */ .container{max-width:1100px;margin:0 auto;padding:2rem 1.5rem} section{margin-bottom:3.5rem} /* HERO */ .hero{background:linear-gradient(135deg,#f3eaff 0%,#ead6f7 40%,#d0efef 100%);padding:3.5rem 2rem 3rem;text-align:center;border-bottom:1px solid var(--border)} .hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;color:var(--rose-dark);margin-bottom:.5rem;letter-spacing:-.02em} .hero .subtitle{font-size:1.1rem;color:var(--text-muted);margin-bottom:1.5rem} .hero-badges{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center} .badge{display:inline-block;padding:.35rem .85rem;border-radius:20px;font-size:.78rem;font-weight:600;letter-spacing:.03em} .badge-rose{background:var(--rose-light);color:var(--rose-dark)} .badge-sage{background:var(--sage-light);color:var(--sage-dark)} .badge-lavender{background:var(--lavender-light);color:var(--lavender-dark)} /* SECTION HEADERS */ .section-title{font-size:1.6rem;font-weight:800;margin-bottom:1.5rem;padding:.75rem 1.1rem .75rem .9rem;border-radius:14px;display:flex;align-items:center;gap:.6rem;color:#fff} .section-title .icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;background:rgba(255,255,255,.2)} .st-red{background:#dc2626} .st-amber{background:#d97706} .st-purple{background:var(--rose)} .st-pink{background:var(--lavender)} .st-teal{background:var(--sage)} .st-green{background:#16a34a} .st-indigo{background:#4f46e5} .st-orange{background:#ea580c} .st-mint{background:#0891b2} .st-slate{background:#475569} /* ALERT CARDS */ .alert{border-radius:16px;padding:1.5rem;margin-bottom:1.25rem;border-left:5px solid} .alert-danger{background:#fff5f5;border-color:#e53e3e;color:#742a2a} .alert-danger h3{color:#c53030;font-size:1.1rem;margin-bottom:.5rem} .alert-warning{background:#fffbeb;border-color:#d97706;color:#78350f} .alert-warning h3{color:#b45309;font-size:1.1rem;margin-bottom:.5rem} .alert-info{background:var(--rose-light);border-color:var(--rose);color:var(--rose-dark)} .alert-info h3{font-size:1.1rem;margin-bottom:.5rem} .alert ul{margin:.5rem 0 0 1.2rem} .alert li{margin:.25rem 0} .note{border-radius:0 12px 12px 0;padding:1rem 1.25rem;font-size:.88rem;margin:10px 0;line-height:1.6;border-left:4px solid} .note.warn{background:#fff5f5;border-color:#e53e3e;color:#742a2a} .note.info{background:var(--rose-light);border-color:var(--rose);color:var(--rose-dark)} .note.good{background:var(--sage-light);border-color:var(--sage);color:var(--sage-dark)} .note.gold{background:#fef3cd;border-color:#d97706;color:#78350f} .note.pink{background:var(--lavender-light);border-color:var(--lavender);color:var(--lavender-dark)} /* CARDS */ .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem} .card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:var(--shadow-sm);border:1px solid var(--border)} .card h3{font-size:1rem;font-weight:700;margin-bottom:.75rem;color:var(--text)} .card-rose{border-top:4px solid var(--rose)} .card-sage{border-top:4px solid var(--sage)} .card-lavender{border-top:4px solid var(--lavender)} .card-gold{border-top:4px solid #d97706} /* TABLES */ .table-wrap{overflow-x:auto;border-radius:12px;box-shadow:var(--shadow-sm)} table{width:100%;border-collapse:collapse;background:#fff;font-size:.9rem} th{background:var(--rose);color:#fff;padding:.75rem 1rem;text-align:left;font-weight:700} td{padding:.65rem 1rem;border-bottom:1px solid var(--border)} tr:last-child td{border-bottom:none} tr:hover td{background:var(--blush)} .tg-sage th{background:var(--sage)} .tg-lavender th{background:var(--lavender)} /* ACCORDION */ .acc-item{border:1px solid var(--border);border-radius:12px;margin-bottom:.75rem;overflow:hidden;background:#fff} .acc-item>summary{list-style:none;padding:1rem 1.25rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.93rem;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:linear-gradient(90deg,var(--blush),#fff)} .acc-item>summary::-webkit-details-marker,.acc-item>summary::marker{display:none} .acc-item[open]>summary{background:var(--rose-light);color:var(--rose-dark);border-bottom:1px solid var(--border)} .acc-arrow{font-size:.7rem;margin-left:auto;transition:transform .25s;color:var(--text-muted);flex-shrink:0} .acc-item[open] .acc-arrow{transform:rotate(180deg)} .acc-body{padding:1.25rem;background:var(--warm-white)} .acc-tag{font-size:.72rem;padding:2px 10px;border-radius:20px;font-weight:600;margin-left:.5rem;flex-shrink:0} .acc-tag.fish{background:var(--sage-light);color:var(--sage-dark)} .acc-tag.veg{background:var(--rose-light);color:var(--rose-dark)} .acc-tag.mix{background:#fef3cd;color:#78350f} /* Collapsible template groups (nested meal accordions) */ .tpl-group{border:1px solid var(--border);border-radius:14px;margin-bottom:.8rem;overflow:hidden;background:#fff} .tpl-group>summary{list-style:none;padding:1.05rem 1.25rem;cursor:pointer;display:flex;align-items:center;font-weight:800;font-size:1.02rem;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:linear-gradient(90deg,var(--rose-light),#fff);color:var(--rose-dark)} .tpl-group>summary::-webkit-details-marker,.tpl-group>summary::marker{display:none} .tpl-group[open]>summary{border-bottom:1px solid var(--border)} .tpl-body{padding:1rem 1rem .25rem;background:var(--warm-white)} .tpl-body .acc-item{margin-bottom:.6rem} .meal-swap{margin-top:6px;font-size:.8rem;color:var(--sage-dark);background:var(--sage-light);border-radius:8px;padding:6px 10px} /* MACRO BARS */ .macros{display:flex;flex-wrap:wrap;gap:13px;margin:14px 0 18px} .mbox{flex:1;min-width:110px;border-radius:14px;padding:18px 14px;text-align:center;transition:transform .2s} .mbox:hover{transform:translateY(-2px)} .mbox .val{font-size:1.7rem;font-weight:800;line-height:1} .mbox .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;opacity:.7;margin-top:5px} .mbox.kcal{background:#fff3e0;color:#c25e00} .mbox.prot{background:var(--rose-light);color:var(--rose-dark)} .mbox.fat{background:var(--lavender-light);color:var(--lavender-dark)} .mbox.carb{background:var(--sage-light);color:var(--sage-dark)} .mbox.fib{background:var(--sage-light);color:var(--sage-dark)} .macro-bars{display:flex;flex-direction:column;gap:.75rem} .macro-bar-wrap{display:flex;align-items:center;gap:.75rem} .macro-label{width:80px;font-size:.82rem;font-weight:700;color:var(--text-muted);flex-shrink:0} .macro-track{flex:1;height:16px;background:var(--rose-light);border-radius:8px;overflow:hidden} @keyframes macro-fill-anim{to{width:var(--fill-w,0%)}} .macro-fill{height:100%;border-radius:8px;width:0;animation:macro-fill-anim 1s ease forwards .3s} .fill-rose{background:linear-gradient(90deg,var(--rose),var(--rose-dark))} .fill-teal{background:linear-gradient(90deg,var(--sage),var(--sage-dark))} .fill-pink{background:linear-gradient(90deg,var(--lavender),var(--lavender-dark))} .macro-val{width:60px;font-size:.82rem;font-weight:700;color:var(--text);text-align:right;flex-shrink:0} /* FOOD GRID */ .food-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} @media(max-width:720px){.food-grid{grid-template-columns:1fr 1fr}} @media(max-width:480px){.food-grid{grid-template-columns:1fr}} .fc{border-radius:14px;padding:16px} .fc.allow{background:var(--sage-light);border:1px solid #8fcfcf} .fc.caution{background:#fef3cd;border:1px solid #f0c060} .fc.avoid{background:#fee2e2;border:1px solid #f5c6c2} .fc h4{font-size:.9rem;font-weight:700;margin-bottom:8px} .fc .cat{font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:10px 0 4px;opacity:.7} .fc ul{padding-left:16px;font-size:.82rem;line-height:1.75} /* MEALS */ .meal-row{display:flex;align-items:flex-start;gap:12px;margin:.25rem 0} .ml{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex-shrink:0;margin-top:2px;color:#fff} .ml.b{background:var(--rose)} .ml.l{background:var(--sage)} .ml.d{background:var(--lavender)} .ml.sn{background:#d97706} .meal-text{font-size:.88rem;line-height:1.55;margin-bottom:.2rem} .meal-kcal{font-size:.78rem;color:var(--text-muted)} h3.sub{font-size:.9rem;color:var(--text-muted);margin:20px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.5px;font-weight:600} /* TRAINING — DAY GRID */ .day-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:12px 0 18px} @media(max-width:640px){.day-grid{grid-template-columns:repeat(4,1fr)}} .dc{border-radius:10px;padding:10px 6px;text-align:center;border:1px solid var(--border)} .dn{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.7;margin-bottom:3px} .ds{font-size:.78rem;font-weight:700} .dd{font-size:.7rem;color:var(--text-muted);margin-top:2px} .dc.str-a{background:var(--rose-light);border-color:var(--rose)} .dc.str-b{background:var(--lavender-light);border-color:var(--lavender)} .dc.yoga{background:var(--sage-light);border-color:var(--sage)} .dc.walk{background:#fef3cd;border-color:#d97706} .dc.rest{background:#f1f5f9;border-color:#cbd5e1} /* EXERCISE CARDS */ .ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.25rem} .ex-card{background:#fff;border-radius:14px;border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-sm)} .ex-imgs{height:160px;overflow:hidden;background:var(--blush);position:relative} .ex-imgs img{width:100%;height:100%;object-fit:cover;display:block} .phase-lbl{position:absolute;top:8px;left:8px;background:rgba(107,63,160,.8);color:#fff;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:20px;pointer-events:none} .ex-body{padding:1rem} .ex-body h4{font-weight:800;font-size:.95rem;margin-bottom:.3rem;color:var(--text)} .sets{font-size:.8rem;color:var(--rose);font-weight:700;margin-bottom:.3rem} .cues{font-size:.82rem;color:var(--text-muted);margin-bottom:.3rem} .why{font-size:.8rem;background:var(--sage-light);color:var(--sage-dark);border-radius:8px;padding:.35rem .6rem;margin-bottom:.3rem} .ex-safe{font-size:.76rem;color:#059669;font-weight:600;display:block;margin-top:.25rem} /* POSTURE STEPS */ .posture-list{display:flex;flex-direction:column;gap:.75rem} .posture-step{display:flex;gap:1rem;align-items:flex-start;background:#fff;border-radius:12px;padding:1rem;border:1px solid var(--border)} .step-num{background:var(--rose);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0} .step-body{flex:1} .step-body strong{display:block;font-weight:700;margin-bottom:.2rem} .step-body span{font-size:.88rem;color:var(--text-muted)} /* HABITS GRID */ .habits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem} .hc{background:#fff;border-radius:14px;padding:1.25rem;border:1px solid var(--border);box-shadow:var(--shadow-sm)} .hn{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--rose);margin-bottom:.4rem} .ht{font-size:.95rem;font-weight:700;margin-bottom:.5rem;color:var(--text)} .hd{font-size:.85rem;color:var(--text-muted);line-height:1.6} /* SLEEP GRID */ .sleep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin:1rem 0 1.5rem} .si{background:#fff;border-radius:12px;padding:1rem;text-align:center;border:1px solid var(--border)} .sl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.25rem} .sv{font-size:1rem;font-weight:800;color:var(--rose-dark)} /* LOG */ .log-tiles{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem} .lt{flex:1;min-width:100px;background:#fff;border-radius:12px;padding:1rem;text-align:center;border:1px solid var(--border)} .lv{font-size:1.8rem;font-weight:800;color:var(--rose-dark)} .ll{font-size:.72rem;color:var(--text-muted);margin-top:.25rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em} .log-form{background:#fff;border-radius:14px;padding:1.5rem;border:1px solid var(--border);box-shadow:var(--shadow-sm);margin-bottom:1.5rem} .lf-group{margin-bottom:1.25rem} .lf-group label{font-size:.9rem;font-weight:700;display:block;margin-bottom:.5rem} .btn-row{display:flex;flex-wrap:wrap;gap:.5rem} .btn-pill{padding:.45rem 1rem;border-radius:999px;border:2px solid var(--border);background:#fff;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit} .btn-pill:hover{border-color:var(--rose);color:var(--rose)} .btn-pill.sel{background:var(--rose);color:#fff;border-color:var(--rose)} .log-note{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:.75rem;font-size:.88rem;font-family:inherit;resize:vertical;color:var(--text);background:var(--warm-white)} .log-note:focus{outline:none;border-color:var(--rose)} .btn-save{background:var(--rose);color:#fff;border:none;border-radius:10px;padding:.75rem 1.5rem;font-size:.9rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .2s;margin-top:.5rem} .btn-save:hover{background:var(--rose-dark)} .log-entry{display:flex;flex-wrap:wrap;gap:.5rem .75rem;align-items:center;padding:.65rem .85rem;border-bottom:1px solid var(--border);font-size:.83rem} .log-entry:last-child{border-bottom:none} .le-date{font-weight:700;color:var(--rose);min-width:90px} /* PILL TAGS */ .tag{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.75rem;font-weight:700;margin:.15rem} .tag-red{background:#fee2e2;color:#b91c1c} .tag-green{background:var(--sage-light);color:var(--sage-dark)} .tag-purple{background:var(--rose-light);color:var(--rose-dark)} /* BACK TO TOP */ #btt{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--rose);color:#fff;border:none;border-radius:50%;width:44px;height:44px;display:none;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:var(--shadow);z-index:50;cursor:pointer;font-family:inherit} #btt.show{display:flex} /* TAB SYSTEM */ .container > section { display: none; } .container > section.tab-active { display: block; animation: tabFadeIn .18s ease-out; } @keyframes tabFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } nav a.tab-current { font-weight: 800; opacity: 1; } .tab-toolbar { margin-left: auto; padding: 5px 14px; font-size: .78rem; font-weight: 700; background: transparent; border: 1.5px solid var(--border); color: var(--text-muted); border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; flex-shrink: 0; font-family: inherit; } .tab-toolbar:hover { background: var(--blush); color: var(--text); } .tab-toolbar.on { background: var(--text); color: var(--cream); border-color: var(--text); } body.show-all-tabs .container > section { display: block !important; animation: none; } /* MEDICAL ALERT (always visible, not a tab) */ .medical-disclaimer{max-width:1100px;margin:0 auto;padding:1rem 1.5rem 0} .medical-disclaimer .md-inner{background:#fffbeb;border-left:4px solid #d97706;border-radius:12px;padding:.75rem 1rem;font-size:.82rem;color:#78350f} .medical-disclaimer .md-title{font-weight:800;font-size:.88rem;color:#dc2626;margin-bottom:.4rem} .medical-disclaimer .md-legal{margin-bottom:.5rem;line-height:1.4;color:#dc2626;font-weight:600} .medical-disclaimer .md-row{display:flex;flex-wrap:wrap;gap:.35rem .75rem;align-items:center;margin-top:.35rem} .medical-disclaimer .md-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#92400e;min-width:5rem;flex-shrink:0} .medical-disclaimer .md-chips{display:flex;flex-wrap:wrap;gap:.3rem} .medical-disclaimer .md-chip{background:#fef3c7;border:1px solid #d97706;border-radius:999px;padding:.15rem .55rem;font-size:.75rem;white-space:nowrap} /* PRINT */ @media print{ nav,#btt{display:none} body{background:#fff;color:#000} .container > section{display:block!important} } @media(max-width:640px){ .hero{padding:2rem 1rem 1.5rem} .container{padding:1.5rem 1rem} } /* ── ABOUT / COACH ── */ .about-wrap{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin-bottom:1.25rem} .about-avatar{width:100px;height:100px;border-radius:50%;flex-shrink:0;overflow:hidden;border:3px solid rgba(255,255,255,.3);box-shadow:0 4px 16px rgba(0,0,0,.15)} .about-avatar img{width:100%;height:100%;object-fit:cover;display:block} .about-text{flex:1;min-width:220px} .about-text p{font-size:.92rem;line-height:1.75;margin-bottom:.65rem} .creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem} .cred{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:6px 13px;font-size:.78rem;font-weight:600;color:#fff} .cred .ci-ico{font-size:.95rem;line-height:1} .about-contact{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.1rem} .about-contact a{display:inline-flex;align-items:center;gap:.4rem;font-size:.83rem;font-weight:700;padding:.45rem 1rem;border-radius:999px;text-decoration:none;transition:filter .15s} .about-contact a:hover{filter:brightness(.9)} .contact-email{background:#fff;color:var(--rose,#6b3fa0)} .contact-wa{background:#25d366;color:#fff} /* FOOD LOG + MACROS BAR */ .macro-day-bar{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.25rem;margin-bottom:1.25rem;box-shadow:var(--shadow-sm)} .mdb-row{display:grid;grid-template-columns:60px 1fr 80px;align-items:center;gap:.65rem;margin-bottom:.55rem} .mdb-row:last-child{margin-bottom:0} .mdb-label{font-size:.8rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em} .mdb-track{background:var(--bg);border-radius:999px;height:8px;overflow:hidden} .mdb-fill{height:100%;border-radius:999px;transition:width .4s ease;background:var(--primary)} .mdb-fill.mdb-c{background:var(--secondary)} .mdb-fill.mdb-f{background:var(--accent)} .mdb-fill.mdb-k{background:#d97706} .mdb-val{font-size:.78rem;font-weight:700;color:var(--text);text-align:right} .mdb-over{color:#dc2626 !important} .food-meal-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1rem 1.25rem;margin-bottom:.85rem;box-shadow:var(--shadow-sm)} .food-meal-label{font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.65rem} .food-opts{display:flex;flex-wrap:wrap;gap:.45rem} .food-opt-btn{padding:.45rem .85rem;border-radius:999px;border:1.5px solid var(--border);background:#fff;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .18s;font-family:inherit;color:var(--text)} .food-opt-btn:hover{border-color:var(--primary);background:var(--bg)} .food-opt-btn.selected{background:var(--primary);color:#fff;border-color:var(--primary-dark)} .food-opt-btn.skipped-sel{background:#f3f4f6;color:#9ca3af;border-color:#d1d5db;text-decoration:line-through} .food-other-wrap{margin-top:.6rem;display:none} .food-other-wrap.show{display:block} .food-other-inp{width:100%;padding:.55rem .75rem;border:1.5px solid var(--border);border-radius:10px;font-size:.85rem;font-family:inherit;resize:none;box-sizing:border-box} .food-save-btn{margin-top:1rem;padding:.7rem 1.75rem;background:var(--primary);color:#fff;border:none;border-radius:999px;font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .2s} .food-save-btn:hover{opacity:.85} .food-save-btn.saved{background:var(--secondary)} .food-history{margin-top:1.5rem} .food-history h3{font-size:.9rem;font-weight:700;color:var(--text-muted);margin-bottom:.75rem} .food-hist-row{display:grid;grid-template-columns:80px 1fr 1fr 1fr 1fr;gap:.5rem;padding:.55rem .75rem;border-bottom:1px solid var(--border);font-size:.78rem;align-items:center} .food-hist-row:last-child{border-bottom:none} .food-hist-head{font-weight:700;color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em} .food-hist-date{font-weight:700;color:var(--text)} .food-hist-skip{color:#9ca3af;font-style:italic} .food-log-divider{border:none;border-top:2px solid var(--border);margin:1.5rem 0 1.25rem;opacity:.5} /* TRAINING LOGGER */ #sync-pill{position:fixed;top:56px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:5px 14px;border-radius:20px;font-size:.75rem;font-weight:600;z-index:500;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap} #sync-pill.visible{opacity:1} .ex-target{font-size:.78rem;color:var(--secondary);font-weight:700;margin-top:5px} .ex-target span{color:var(--text-muted);font-weight:400} .ex-log-btn{display:block;width:100%;margin-top:10px;padding:7px;background:var(--primary-light);border:none;border-radius:8px;color:var(--primary);font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s} .ex-log-btn:hover{background:var(--primary);color:#fff} .sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;opacity:0;pointer-events:none;transition:opacity .25s} .sheet-backdrop.visible{opacity:1;pointer-events:auto} .bottom-sheet{position:fixed;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;z-index:450;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);max-height:85vh;display:flex;flex-direction:column} .bottom-sheet.open{transform:translateY(0)} .sheet-header{padding:16px 20px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0} .sheet-title{font-size:1.1rem;font-weight:800;color:var(--primary)} .sheet-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text-muted);padding:4px 8px;border-radius:8px;line-height:1} .sheet-close:hover{background:var(--bg)} .sheet-body{overflow-y:auto;padding:16px 20px;flex:1} .set-row{margin-bottom:18px} .set-num{font-size:.75rem;font-weight:700;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px} .band-picker{display:flex;gap:6px;margin-bottom:10px} .band-btn{flex:1;padding:7px 4px;border:2px solid var(--border);background:#fff;border-radius:10px;font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;color:var(--text-muted)} .band-btn.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary)} .reps-row{display:flex;align-items:center;gap:10px} .reps-input{width:70px;padding:8px 12px;border:2px solid var(--border);border-radius:10px;font-size:1rem;font-weight:700;text-align:center;font-family:inherit;color:var(--text)} .reps-input:focus{outline:none;border-color:var(--primary)} .reps-lbl{font-size:.84rem;color:var(--text-muted)} .done-circle{width:36px;height:36px;border-radius:50%;border:3px solid #ddd;background:#fff;cursor:pointer;transition:all .15s;color:transparent;font-size:1rem;font-weight:800;margin-left:auto} .done-circle.done{background:var(--secondary);border-color:var(--secondary);color:#fff} .add-set-btn{width:100%;padding:9px;border:2px dashed var(--border);background:transparent;border-radius:10px;color:var(--text-muted);font-size:.84rem;font-weight:600;cursor:pointer;font-family:inherit;margin-top:4px;margin-bottom:16px} .add-set-btn:hover{border-color:var(--primary);color:var(--primary)} .finish-session-btn{display:block;width:100%;padding:14px;margin-top:16px;background:var(--primary,#6b3fa0);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:.02em;transition:opacity .2s} .finish-session-btn:hover{opacity:.88} .finish-session-btn.done{background:var(--secondary,#0d7377)} /* FOOD LOG BOTTOM SHEET */ .food-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:800;opacity:0;pointer-events:none;transition:opacity .25s} .food-sheet-backdrop.open{opacity:1;pointer-events:all} .food-sheet{position:fixed;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;z-index:801;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);max-height:88vh;display:flex;flex-direction:column} .food-sheet.open{transform:translateY(0)} .food-sheet-hdr{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem .75rem;border-bottom:1px solid var(--border,#e5e7eb);flex-shrink:0} .food-sheet-hdr span{font-weight:800;font-size:1.05rem;color:var(--text,#111)} .food-sheet-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text-muted,#6b7280);padding:.2rem .5rem;line-height:1;font-family:inherit} .food-sheet-body{overflow-y:auto;padding:1rem 1.25rem 2rem;flex:1} .fs-macro-bar{margin-top:1.1rem} .fs-save-btn{display:block;width:100%;margin-top:1rem} .effort-row{margin-top:8px;border-top:1px solid var(--border);padding-top:16px} .effort-label{font-size:.84rem;font-weight:700;color:var(--text-muted);margin-bottom:10px} .effort-btns{display:flex;gap:6px;flex-wrap:wrap} .effort-btn{flex:1;min-width:60px;padding:8px 4px;border:2px solid var(--border);background:#fff;border-radius:12px;cursor:pointer;font-size:.72rem;font-weight:600;font-family:inherit;text-align:center;line-height:1.5;transition:all .15s} .effort-btn.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary)} /* TODAY BANNER + FAB */ #today-banner{position:sticky;top:52px;z-index:300;background:#fff;border-bottom:1.5px solid var(--border,#e5e7eb);padding:9px 18px;display:flex;align-items:center;gap:10px;font-size:.83rem} #today-banner-day{font-weight:800;color:var(--primary,#7c3aed)} #today-banner-session{font-weight:600;color:var(--text,#111)} .log-fab{position:fixed;bottom:22px;right:22px;width:56px;height:56px;border-radius:50%;border:none;background:var(--primary,#7c3aed);color:#fff;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:400;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s} .log-fab:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.3)} .log-fab:active{transform:scale(.96)} /* override primary color for banner */ #today-banner-day{color:var(--primary,#7c3aed)} /* ── Finish Session Sheet ── */ .finish-sheet { max-height: 80vh; overflow-y: auto; } .finish-sheet-body { padding: 1rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; } .finish-field-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: .5rem; } .finish-optional { font-weight: 400; text-transform: none; font-size: .72rem; } .finish-emoji-row { display: flex; gap: .5rem; } .finish-emoji-btn { font-size: 1.6rem; padding: .35rem .5rem; border-radius: 10px; border: 2px solid transparent; background: var(--card,#f9fafb); cursor: pointer; transition: border-color .15s, transform .1s; } .finish-emoji-btn.selected { border-color: var(--primary,#7c3aed); transform: scale(1.15); } .finish-flags { display: flex; flex-wrap: wrap; gap: .5rem; } .finish-flag-btn { padding: .4rem .85rem; border-radius: 999px; border: 1.5px solid var(--border,#e5e7eb); background: var(--card,#f9fafb); font-size: .82rem; cursor: pointer; transition: background .15s, border-color .15s; } .finish-flag-btn.active { background: var(--primary,#7c3aed); color: #fff; border-color: var(--primary,#7c3aed); } .finish-notes-inp { width: 100%; border: 1.5px solid var(--border,#e5e7eb); border-radius: 8px; padding: .6rem .75rem; font-size: .88rem; resize: vertical; font-family: inherit; } .finish-save-btn { width: 100%; padding: .85rem; border-radius: 12px; background: var(--primary,#7c3aed); color: #fff; font-size: .95rem; font-weight: 700; border: none; cursor: pointer; } .finish-save-btn:active { opacity: .85; } /* ═══════════════ BUILT FOR ONE — override layer (wins by order) ═══════════════ */ body{font-weight:300} h1,h2,h3,h4,h5,h6,th,strong,b,summary,button,.nav-brand,.section-title,.card h3,.card-title, .ex-body h4,.sheet-title,.macro-label,.macro-val,.food-meal-label,.mbox,.hc h3, .finish-field-label,.set-num,.badge,.bubble,.tag{font-weight:400} [style*="font-weight:6"],[style*="font-weight:7"],[style*="font-weight:8"]{font-weight:400 !important} .plan-nav{display:flex;align-items:center;gap:8px;padding:10px 16px;overflow-x:auto; background:var(--bg);border-bottom:.5px solid var(--border);scrollbar-width:none; position:sticky;top:0;z-index:100;-webkit-backdrop-filter:none;backdrop-filter:none} .plan-nav::-webkit-scrollbar{display:none} .nav-logo{flex-shrink:0;display:flex;align-items:center;cursor:pointer;padding-right:8px} .nav-logo img{height:46px;width:auto;display:block} .nav-tabs{display:flex;gap:6px;flex-shrink:0} .nav-controls{display:flex;gap:6px;margin-left:auto;padding-left:24px;flex-shrink:0} .plan-nav a,.nav-show-all,.nav-theme-toggle{font-family:'Josefin Sans',sans-serif;font-size:11px; font-weight:400;letter-spacing:1.5px;text-transform:uppercase;padding:7px 14px;border-radius:20px; border:.5px solid var(--border);background:var(--bg-card);color:var(--text-muted);cursor:pointer; white-space:nowrap;position:relative;text-decoration:none;line-height:1.2;transition:background .15s,color .15s} .plan-nav a:hover{opacity:1;color:var(--text)} .plan-nav a.tab-current{color:var(--text);background:var(--tint-active);font-weight:400} .plan-nav a.tab-current::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:#FF6B1A;border-radius:3px 3px 0 0} .nav-show-all{background:transparent;margin-left:0} .nav-show-all.on{background:var(--tint-active);color:var(--text);border-color:#FF6B1A} .nav-theme-toggle{color:#FF6B1A;border-color:#FF6B1A;background:var(--bg-card);font-size:12px;letter-spacing:2px} nav a.nc-red,nav a.nc-amber,nav a.nc-purple,nav a.nc-pink,nav a.nc-teal,nav a.nc-green, nav a.nc-indigo,nav a.nc-orange,nav a.nc-mint,nav a.nc-slate{color:var(--text-muted);border-color:var(--border)} .card{background:var(--bg-card);border:.5px solid var(--border);border-top:2.5px solid #FF6B1A; border-radius:10px;background-image:linear-gradient(var(--tint-active),var(--tint-active)); padding:16px;margin-bottom:12px;box-shadow:none} .card h3{color:var(--text)} .card-rose,.card-sage,.card-lavender,.card-gold{border-top:2.5px solid #FF6B1A} .card-label{font-family:'Josefin Sans',sans-serif;font-size:10px;font-weight:400;letter-spacing:3px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px} .card-title{font-family:'Josefin Sans',sans-serif;font-size:16px;font-weight:400;color:var(--text)} .section-title{color:var(--text);border:.5px solid var(--border);border-top:2.5px solid #FF6B1A;border-radius:10px; background:var(--bg-card);background-image:linear-gradient(var(--tint-active),var(--tint-active)); padding:14px 16px;margin-bottom:1.25rem;font-weight:400;font-size:1.4rem;display:flex;align-items:center;gap:.6rem} .st-red,.st-amber,.st-purple,.st-pink,.st-teal,.st-green,.st-indigo,.st-orange,.st-mint,.st-slate{background:var(--bg-card)} .section-title .icon{background:var(--tint-active);color:var(--accent)} .alert,.note{border-radius:10px;border:.5px solid var(--border);border-left:none;border-top:2.5px solid #FF6B1A; background:var(--bg-card);background-image:linear-gradient(var(--tint-active),var(--tint-active));color:var(--text)} .alert-danger,.alert-warning,.note.warn,.note.gold{background:var(--bg-card); background-image:linear-gradient(var(--tint-alert),var(--tint-alert));border-color:var(--border);border-left:none;border-top:2.5px solid #FF6B1A;color:var(--text)} .alert-danger h3,.alert-warning h3,.alert-info h3{color:var(--accent)} .acc-item,.tpl-group,.posture-step,.hc,.si,.lt,.log-form,.ex-card,.macro-day-bar,.food-meal-card, .bottom-sheet,.food-sheet,.dc{background:var(--bg-card);border-color:var(--border)} .acc-body,.tpl-body{background:var(--bg-card)} .acc-item>summary{background:var(--bg-card);color:var(--text)} .acc-item[open]>summary{background:var(--tint-active);color:var(--text);border-bottom:.5px solid var(--border)} .acc-arrow{color:var(--accent)} .dc.str-a,.dc.str-b,.dc.yoga,.dc.walk,.dc.rest{background:var(--bg-card);border-color:var(--border);color:var(--text)} .dc.rest .ds,.dc.rest .dd{color:var(--text-muted)} .dc .dd,.dc .dn{color:var(--text-muted)} .contact-email{background:var(--tint-active);color:var(--accent)} table{background:var(--bg-card)} th{background:var(--tint-active);color:var(--text);border-bottom:2.5px solid #FF6B1A} td{border-bottom-color:var(--border)} tr:hover td{background:var(--tint-active)} .tg-sage th,.tg-lavender th{background:var(--tint-active)} .ex-imgs{background:var(--tint-active)} .ex-body h4{color:var(--text)} .ex-safe{color:var(--accent-2)} .ex-log-btn{background:var(--tint-active);color:var(--accent)} .ex-log-btn:hover{background:var(--accent);color:#fff} .sheet-header,.food-sheet-hdr{border-bottom-color:var(--border)} .sheet-title{color:var(--accent)} .sheet-close,.food-sheet-close{color:var(--text-muted)} .set-row{border-bottom-color:var(--border)} .effort-btn,.btn-pill,.finish-emoji-btn,.finish-flag-btn,.food-opt-btn{background:var(--bg-card);color:var(--text);border-color:var(--border)} .effort-btn.active,.finish-emoji-btn.selected{border-color:var(--accent);background:var(--tint-active);color:var(--accent)} .btn-pill.active,.finish-flag-btn.active,.food-opt-btn.selected{background:var(--accent);color:#fff;border-color:var(--accent)} .finish-session-btn,.food-save-btn,.finish-save-btn{background:var(--accent);color:#fff} .finish-session-btn.done,.food-save-btn.saved{background:#26C5C5} .food-opt-btn.skipped-sel{background:var(--tint-active);color:var(--text-muted);border-color:var(--border)} .sheet-body input,.sheet-body textarea,.food-sheet-body input,.food-sheet-body textarea,.finish-sheet-body input,.finish-sheet-body textarea,.bfo-form input{background:var(--bg);color:var(--text);border-color:var(--border)} .macro-track{background:var(--tint-active)} .mbox{background:var(--bg-card);border:.5px solid var(--border);color:var(--text)} .mbox.kcal{background:var(--tint-alert);color:var(--text)} .fill-rose{background:#FF6B1A}.fill-sage{background:#26C5C5}.fill-lavender{background:#3D9EFF} #today-banner{background:var(--bg-card);border-bottom-color:var(--border);color:var(--text)} #today-banner-day{color:var(--accent)} .log-fab{background:var(--accent)} .hero{padding:48px 24px 32px;text-align:center;border-bottom:none;background:var(--bg)} body.theme-dark .hero{background:radial-gradient(ellipse at 60% 40%,#2A1A0E 0%,#1A1208 40%,#111217 100%)} body.theme-warm .hero{background:radial-gradient(ellipse at 30% 50%,#F5DDD0 0%,#EDD9C8 30%,#F5F0E8 80%)} .hero h1{font-family:'Josefin Sans',sans-serif;font-size:clamp(28px,5vw,56px);font-weight:400;color:#FF6B1A;letter-spacing:1px;margin-bottom:12px} .hero .subtitle{font-family:'Josefin Sans',sans-serif;font-size:13px;font-weight:300;color:var(--text-muted);letter-spacing:1px;margin-bottom:20px} .hero-bubbles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .bubble{font-family:'Josefin Sans',sans-serif;font-size:10px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:#26A5E5;background:rgba(38,165,229,0.15);border:none;border-radius:20px;padding:5px 14px} .medical-disclaimer .md-inner{background:var(--bg-card);background-image:linear-gradient(var(--tint-alert),var(--tint-alert)); border:.5px solid var(--border);border-left:none;border-top:2.5px solid #FF6B1A;border-radius:10px;color:var(--text)} .medical-disclaimer .md-title,.medical-disclaimer .md-label{color:#FF6B1A} .medical-disclaimer .md-legal{color:var(--text)} .medical-disclaimer .md-chip{background:var(--tint-active);border:.5px solid var(--border);color:var(--text)} .tag{font-family:'Josefin Sans',sans-serif;letter-spacing:2px;text-transform:uppercase;font-size:.62rem;padding:4px 10px;border-radius:20px;font-weight:400} .tag-red,.badge-avoid{background:rgba(226,75,74,0.15);color:#E24B4A;border:none;border-radius:20px;padding:4px 10px} .tag-amber,.badge-limit{background:rgba(255,179,71,0.18);color:#FFB347;border:none;border-radius:20px;padding:4px 10px} .tag-green,.badge-ok{background:rgba(38,165,116,0.15);color:#26A574;border:none;border-radius:20px;padding:4px 10px} details.subsection{margin-bottom:1rem} details.subsection>summary{list-style:none;cursor:pointer;margin-bottom:0;user-select:none;-webkit-tap-highlight-color:transparent} details.subsection>summary::-webkit-details-marker{display:none} details.subsection>summary.section-title::after{content:'⌄';margin-left:auto;font-size:1.25rem;line-height:1;color:var(--accent);transition:transform .2s;flex-shrink:0} details.subsection[open]>summary.section-title::after{transform:rotate(180deg)} details.subsection>.subsection-body{padding-top:1rem} details.subsection>summary.sub{list-style:none;cursor:pointer;font-size:1.05rem;font-weight:400;color:var(--text); padding:12px 14px;border:.5px solid var(--border);border-left:2.5px solid #FF6B1A;border-radius:8px; background:var(--bg-card);display:flex;align-items:center;gap:.5rem;margin:0} details.subsection>summary.sub::after{content:'⌄';margin-left:auto;font-size:1.15rem;color:var(--accent);transition:transform .2s} details.subsection[open]>summary.sub::after{transform:rotate(180deg)} .subsection-tools{display:flex;justify-content:flex-end;margin-bottom:1rem} .subsection-toggle-all{font-family:'Josefin Sans',sans-serif;font-size:11px;font-weight:400;letter-spacing:1.5px; text-transform:uppercase;padding:6px 14px;border-radius:20px;border:.5px solid var(--border);background:var(--bg-card);color:var(--text-muted);cursor:pointer} .subsection-toggle-all:hover{color:var(--text)} .bfo-card{margin-bottom:1rem} .bfo-hint{font-size:.82rem;color:var(--text-muted);margin:.35rem 0 .9rem;line-height:1.5} .bfo-btn{display:inline-block;font-family:'Josefin Sans',sans-serif;font-size:11px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;padding:8px 16px;border-radius:20px;border:.5px solid #FF6B1A;background:var(--tint-active);color:#FF6B1A;cursor:pointer;transition:background .15s} .bfo-btn:hover{background:var(--tint-alert)} .bfo-deltas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:.9rem} .bfo-delta{font-size:.8rem;background:var(--tint-active);border:.5px solid var(--border);border-radius:20px;padding:5px 12px;color:var(--text)} .bfo-delta b{color:var(--text-muted);font-weight:400;letter-spacing:.04em;text-transform:uppercase;font-size:.7rem} .bfo-delta .up{color:#E24B4A}.bfo-delta .down{color:#26A574} .bfo-meas-entry{position:relative;border:.5px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--bg-card)} .bfo-meas-del{position:absolute;top:8px;right:10px;width:22px;height:22px;border-radius:50%;border:.5px solid var(--border);background:var(--bg);color:var(--text-muted);font-size:.9rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center} .bfo-meas-del:hover{color:#E24B4A;border-color:#E24B4A} .bfo-meas-date{font-size:.82rem;font-weight:400;color:var(--accent);margin-bottom:6px;display:flex;align-items:center;gap:8px} .bfo-tag{font-size:.62rem;letter-spacing:1px;text-transform:uppercase;background:var(--tint-active);border:.5px solid var(--border);border-radius:20px;padding:2px 8px;color:var(--text-muted)} .bfo-meas-vals{display:flex;flex-wrap:wrap;gap:6px 16px} .bfo-meas-val{font-size:.85rem;color:var(--text)} .bfo-meas-val b{color:var(--text-muted);font-weight:400;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;margin-right:4px} .bfo-meas-val em{font-style:normal;font-size:.75rem;margin-left:4px} .bfo-meas-val em.up{color:#E24B4A}.bfo-meas-val em.down{color:#26A574} .bfo-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:12px;padding-top:12px;border-top:.5px solid var(--border)} .bfo-field{display:flex;flex-direction:column;gap:3px} .bfo-field label{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)} .bfo-field .sub{font-size:.62rem;text-transform:none;letter-spacing:0;opacity:.8} .bfo-input,.bfo-select{background:var(--bg);color:var(--text);border:.5px solid var(--border);border-radius:8px;padding:8px 10px;font-family:'Josefin Sans',sans-serif;font-size:.9rem;box-sizing:border-box;width:100%} .bfo-input:focus,.bfo-select:focus{outline:none;border-color:var(--accent)} .bfo-form-actions{grid-column:1/-1;display:flex;gap:8px;margin-top:4px} .bfo-upload-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:.6rem} .bfo-upload-row .bfo-select{width:auto} .bfo-upload-row .bfo-input{flex:1;min-width:140px} .bfo-count{font-size:.7rem;color:var(--text-muted);letter-spacing:1px} .bfo-status{font-size:.8rem;color:var(--text-muted);min-height:1em;margin-bottom:.5rem} .bfo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px} .bfo-thumb{position:relative;border:.5px solid var(--border);border-radius:10px;overflow:hidden;background:var(--tint-active)} .bfo-thumb img{width:100%;height:120px;object-fit:cover;display:block;cursor:zoom-in;background:var(--tint-active)} .bfo-thumb .bfo-thumb-meta{padding:5px 7px;font-size:.68rem;color:var(--text-muted);line-height:1.3} .bfo-thumb .bfo-thumb-type{display:inline-block;font-size:.6rem;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);margin-right:4px} .bfo-thumb-del{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:.9rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center} .bfo-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:900;display:none;align-items:center;justify-content:center;padding:20px} .bfo-lightbox.open{display:flex} .bfo-lightbox img{max-width:100%;max-height:90vh;border-radius:8px} .bfo-lightbox-close{position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;line-height:1} /* Food-guide columns → readable cards + traffic-light accent (food = allowed) */ .fc{background:var(--bg-card);border:.5px solid var(--border);border-radius:12px;color:var(--text)} .fc.allow,.fc.caution,.fc.avoid{background:var(--bg-card);border:.5px solid var(--border)} .fc.allow{border-top:2.5px solid #26A574} .fc.caution{border-top:2.5px solid #FFB347} .fc.avoid{border-top:2.5px solid #E24B4A} .fc li,.fc li *{color:var(--text)} .fc.allow h4{color:#26A574}.fc.caution h4{color:#FFB347}.fc.avoid h4{color:#E24B4A} .fc .cat{color:var(--text-muted);opacity:1} .fc ul,.fc li,.fc p{color:var(--text)} /* Measurement form: Cancel must hide it (hidden beats display:grid) */ .bfo-form[hidden]{display:none} /* Inputs readable in both themes */ input,textarea,select,.bfo-input{color:var(--text);font-weight:400;-webkit-text-fill-color:var(--text)} input::placeholder,textarea::placeholder,.bfo-input::placeholder{color:var(--text-muted);opacity:1} @media(max-width:640px){ .table-wrap{overflow-x:visible;box-shadow:none;border-radius:0} .container table{display:block;width:auto} .container table thead{display:none} .container table tbody,.container table tr,.container table td{display:block;width:auto} .container table tr{margin-bottom:.7rem;padding:11px 13px;border:.5px solid var(--border);border-top:2.5px solid #FF6B1A;border-radius:10px;background:var(--bg-card);background-image:linear-gradient(var(--tint-active),var(--tint-active))} .container table td{border:none;padding:2px 0;font-size:.9rem;line-height:1.55;overflow-wrap:break-word;word-break:normal;hyphens:none} .container table td:first-child{color:var(--accent);font-size:1rem;margin-bottom:3px} .container table tr:hover td{background:transparent} }