/* Fresh light theme with sky-blue background and salad-inspired colors */
:root{--bg:#f0f9ff;--card:#ffffff;--text:#111827;--muted:#6b7280;--accent:#22c55e;--danger:#ef4444;--border:#e5e7eb}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
header,footer{padding:12px 16px;border-bottom:1px solid var(--border)}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
header .brand{display:flex;align-items:center;gap:12px}
header .brand .logo{width:48px;height:48px;object-fit:contain;border-radius:10px;border:1px solid var(--border);background:var(--card);padding:4px}
header .card{margin-bottom:0}
footer{border-top:1px solid var(--border);border-bottom:none;text-align:center;color:var(--muted)}
h1{margin:0;font-size:20px}
h2{margin:0 0 8px 0;font-size:18px}
h3{margin:0}
main{max-width:900px;margin:20px auto;padding:0 12px}
.landing-main{display:flex;flex-direction:column;gap:32px}
.landing-header{background:var(--card);box-shadow:0 3px 5px rgba(0,0,0,.05)}
.landing-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.landing-nav a{text-decoration:none;color:var(--text);font-weight:600}
.landing-nav a:hover{text-decoration:underline}
.landing-nav .cta{background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px;border:1px solid #16a34a;display:inline-flex;align-items:center;gap:6px}
.landing-nav .cta:hover{text-decoration:none;box-shadow:0 4px 12px rgba(34,197,94,.25)}
.landing-hero{display:grid;gap:24px;align-items:center;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));background:var(--card);}
.landing-hero .hero-copy{display:flex;flex-direction:column;gap:16px}
.landing-hero .hero-copy h2{font-size:28px;margin:0}
.landing-hero .hero-copy p{font-size:17px;margin:0;color:#1f2937}
.landing-hero .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.landing-hero .hero-highlights{margin:0;padding-left:20px;color:var(--muted);font-size:14px;display:flex;flex-direction:column;gap:6px}
.landing-hero .hero-figure{text-align:center;margin:0}
.landing-hero .hero-figure img{max-width:100%;border-radius:14px;border:1px solid var(--border);box-shadow:0 18px 35px rgba(15,23,42,.15)}
.landing-hero .hero-figure figcaption{font-size:12px;color:var(--muted);margin-top:8px}
.landing-section{display:flex;flex-direction:column;gap:20px}
.landing-section h2{font-size:24px}
.feature-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.feature-card h3{margin-top:0;font-size:18px}
.feature-card p{margin:0;color:#1f2937;line-height:1.5}
.how-it-works{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:12px;line-height:1.5;color:#1f2937}
.how-it-works strong{display:block;font-size:16px;margin-bottom:4px;color:#0f172a}
.trust{background:var(--card);padding:24px;border-radius:16px;border:1px solid var(--border);box-shadow:0 6px 16px rgba(15,23,42,.12)}
.cta-final{align-items:center;text-align:center;gap:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:10px;font-weight:600;text-decoration:none;border:1px solid #16a34a;background:var(--accent);color:#fff;transition:box-shadow .2s ease,transform .2s ease}
.btn:hover{box-shadow:0 10px 22px rgba(34,197,94,.3);transform:translateY(-1px)}
.btn.secondary{background:#dcfce7;border-color:#bbf7d0;color:#166534}
.btn.secondary:hover{box-shadow:0 10px 22px rgba(59,130,246,.15)}
.landing .card{box-shadow:0 12px 24px rgba(15,23,42,.08)}

@media(max-width:700px){
  .landing-nav{justify-content:flex-start}
  .landing-nav .cta{width:100%;justify-content:center}
  .landing-hero{grid-template-columns:1fr}
  .landing-hero .hero-copy h2{font-size:24px}
  .landing-hero .hero-copy p{font-size:16px}
}

.card{background:var(--card);padding:12px;border:1px solid var(--border);border-radius:10px;margin-bottom:12px;box-shadow:0 3px 5px rgba(0,0,0,.05)}
.alerts{margin:0 0 12px 0}
.alert{display:flex;flex-wrap:wrap;gap:12px;align-items:center;border-radius:10px;padding:12px;border:1px solid var(--border);margin-bottom:12px}
.alert .alert-message{flex:1;min-width:200px}
.alert .alert-message strong{display:block;margin-bottom:4px}
.alert .alert-message p{margin:0}
.alert .alert-actions{display:flex;gap:8px;align-items:center}
.alert.success{background:#dcfce7;border-color:#bbf7d0;color:#166534}
.alert.warning{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.alert.error{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}
.muted{color:var(--muted)}
.small{font-size:12px}
.row{display:flex;gap:8px;align-items:center}
.space-between{justify-content:space-between}
.end{justify-content:flex-end}
.grow{flex:1}
.split{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:800px){.split{grid-template-columns:1fr 1fr}}
.controls input,.card input{padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:#ffffff;color:var(--text)}
input[type="date"]{background:#ffffff;color:var(--text)}
button{cursor:pointer;background:var(--accent);border:1px solid #16a34a;color:#fff;border-radius:8px}
button.secondary{background:#dcfce7;border-color:#bbf7d0;color:#166534}
button.danger{background:var(--danger);border-color:#dc2626;color:#fff}
button.link{background:transparent;border:0;color:var(--muted);text-decoration:underline}
.inline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.inline input{min-width:120px}
.inline button{flex:0 0 auto}
.foods{display:grid;gap:4px;margin:6px 0}
.food{padding:4px 0;border-top:1px dashed var(--border)}
.hidden{display:none}

/* Macro trends card */
.macro-trends-card{overflow:hidden}
.macro-header{flex-wrap:wrap;align-items:flex-start;gap:12px}
.macro-title{display:flex;flex-direction:column;gap:4px}
.macro-range-label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.macro-range-buttons{display:flex;flex-wrap:wrap;gap:8px}
.macro-range-btn{padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:12px;font-weight:600;line-height:1.2;text-align:center;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s;/*min-width:120px*/}
.macro-range-btn:hover{background:#f1f5f9;border-color:#cbd5f5}
.macro-range-btn.active{background:var(--accent);border-color:#16a34a;color:#fff;box-shadow:0 0 0 1px rgba(34,197,94,.25)}
.macro-range-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.macro-status{margin-top:4px}
.macro-chart-wrap{position:relative;margin-top:12px}
.macro-chart-wrap svg{width:100%;height:260px}
.macro-chart-wrap text{font-size:11px;fill:var(--muted)}
.macro-chart-overlay{position:absolute;inset:0;background:transparent;pointer-events:none;z-index:2}
.macro-tooltip{position:absolute;top:0;transform:translate(-50%,-110%);background:rgba(15,23,42,.9);color:#f8fafc;padding:8px 10px;border-radius:8px;box-shadow:0 6px 18px rgba(15,23,42,.25);pointer-events:none;display:flex;flex-direction:column;gap:4px;min-width:140px;z-index:3}
.macro-tooltip.hidden{display:none}
.macro-tooltip strong{font-size:12px}
.macro-tooltip .tooltip-row{display:flex;align-items:center;gap:6px;font-size:12px}
.macro-tooltip .tooltip-swatch{width:10px;height:10px;border-radius:999px;display:inline-block}
.macro-tooltip[data-align="left"]{transform:translate(0,-110%)}
.macro-tooltip[data-align="right"]{transform:translate(-100%,-110%)}
.macro-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.macro-legend .legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.macro-legend .legend-swatch{width:12px;height:12px;border-radius:999px;display:inline-block}
.macro-grid-line{stroke:rgba(148,163,184,.35);stroke-width:1}
.macro-axis-line{stroke:var(--border);stroke-width:1.4}
.macro-hover-line{stroke:rgba(37,99,235,.5);stroke-width:1.5;pointer-events:none}
.macro-line{mix-blend-mode:multiply}
.macro-points circle{pointer-events:none}


/* Days feed */
.day{position:relative}
.day-header{align-items:flex-start;flex-wrap:wrap;gap:8px}
.day-header h2{margin:0}
.day-actions{display:flex;flex-direction:column;gap:8px;margin:8px 0}
/* Allow the totals to wrap cleanly with the expand/collapse controls on small screens */
.day-controls{flex-wrap:wrap;gap:8px}
.day-controls .day-totals{white-space:normal;min-width:180px}
@media(min-width:700px){.day-actions{flex-direction:row;align-items:center;flex-wrap:wrap}}

/* Exercises card mirrors the collapsible meal layout */
.exercise-card{display:flex;flex-direction:column}
.exercise-header{align-items:flex-start;gap:8px}
.exercise-header-text{display:flex;flex-direction:column;gap:4px}
.exercise-total{font-weight:600;color:var(--muted)}
.exercise-total.has-calories{color:var(--danger)}
.exercise-details{margin-top:10px;display:grid;gap:10px}
.exercise-details.collapsed{display:none}
.exercises{display:grid;gap:8px;padding-top:10px;border-top:1px dashed var(--border)}
.exercises .exercise-item{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:#f8fafc}
.exercises .exercise-name{font-weight:600}
.exercises .exercise-calories{font-weight:600;color:var(--danger)}
.exercises .exercise-empty{padding:4px 0}

/* Collapsible meal details */
.meal-details.collapsed{display:none}
.meal h3{margin-right:8px}
.meal-header{align-items:flex-start}
.meal-title{align-items:center;gap:8px}
.meal-title .meal-icon{width:32px;height:32px;object-fit:contain;border-radius:8px;background:var(--card);border:1px solid var(--border);padding:4px}
.meal-details>.add-food-box{margin-top:8px}
.meal-details>.row.end{flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:12px}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}
.modal-overlay.hidden{display:none !important}
.modal{background:var(--card);border:1px solid var(--border);border-radius:10px;max-width:920px;width:100%;display:flex;flex-direction:column;max-height:90vh}
.modal header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}
.modal h3{margin:0}
.modal .body{padding:12px 16px;overflow:auto}
.modal footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

.info-helper{position:relative;display:inline-flex;align-items:center;gap:8px;margin-bottom:8px}
.info-helper .info-button{width:22px;height:22px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.info-helper .info-button:focus{outline:2px solid #2563eb;outline-offset:2px}
.info-helper .info-popover{position:absolute;top:calc(100% + 8px);left:0;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px 12px;box-shadow:0 6px 18px rgba(15,23,42,.18);width:min(320px,80vw);z-index:5}
.info-helper .info-popover strong{display:block;margin-bottom:6px}
.info-helper .info-popover ul{margin:0 0 6px 18px;padding:0}
.info-helper .info-popover li{margin-bottom:4px}
.info-helper .info-popover p{margin:0}

.grid-foods{display:grid;grid-template-columns:2fr 1.2fr repeat(4,1fr) auto;gap:6px;align-items:flex-start}
.grid-foods .hdr{color:var(--muted);font-weight:600}
.grid-foods input{padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:#ffffff;color:var(--text);width:100%}
.grid-foods .row{border-top:1px dashed var(--border);padding-top:6px}

.grid-cell{display:flex;flex-direction:column;gap:4px}
.grid-cell-label{display:none;font-size:12px;font-weight:600;color:var(--muted)}
.grid-cell-action{align-items:flex-start}
.grid-cell-action button{margin-top:auto}

/* Align 'Add From Saved' with inline form */
.day-actions .add-from-saved{margin-top:8px}

/* Mobile tweaks */
@media(max-width:700px){
  .day-header{justify-content:flex-start}
  .day-controls{justify-content:flex-start}
  .day-controls .day-totals{flex-basis:100%}
  .exercise-header{flex-direction:column;align-items:flex-start}
  /* Stack meal header so the name sits on its own line */
  .meal .row.space-between{flex-direction:column;align-items:flex-start;gap:6px}
  /* Make food rows stack name and details */
  .food{flex-direction:column;align-items:flex-start}
  .food > div{width:100%}
  .food strong{display:block}
  /* Stack editor grid to avoid horizontal clipping */
  .grid-foods{grid-template-columns:1fr}
  .grid-foods .hdr{display:none}
  .grid-cell-label{display:block}
  .macro-header{flex-direction:column;align-items:flex-start}
  .macro-range-label{width:100%}
  .macro-range-buttons{width:100%}
  /*.macro-range-btn{flex:1 1 calc(50% - 8px)}*/
  .macro-chart-wrap svg{height:220px}
  .meal-details>.row.end{justify-content:flex-start}
  .meal-details>.row.end button{flex:1 1 150px}
  .meal-details>.add-food-box{width:100%}
}