:root{
	--blue:#1565c0; --blue-d:#0f4c96; --green:#0f7a5a; --green-d:#0b6349;
	--ink:#1b2b3a; --muted:#556; --line:#cfd6dd;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
	font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--ink); line-height:1.55; min-height:100vh;
	background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),url(img/seafloor.jpg) center/cover fixed no-repeat;
	background-color:#dceaf2;
}
body.on-intake{background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),url(img/seafloor3.jpg)}

/* Header */
.app-header{position:sticky;top:0;z-index:10;background:rgba(21,101,192,.96);color:#fff;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 0}
.app-header-inner{display:flex;align-items:center;gap:10px;padding-bottom:8px}
.app-logo{border-radius:7px;display:block}
.app-title{font-size:1.15em;font-weight:700;letter-spacing:.3px}
.app-nav{display:flex;gap:6px}
.app-tab{flex:1;background:transparent;border:0;color:rgba(255,255,255,.75);font-size:.98em;font-weight:600;padding:12px 8px;cursor:pointer;border-bottom:3px solid transparent}
.app-tab.is-active{color:#fff;border-bottom-color:#fff}

/* Layout */
.app-main{max-width:640px;margin:0 auto;padding:18px 14px 40px}
.app-view{display:none}
.app-view.is-active{display:block}
.app-card{background:rgba(255,255,255,.95);border-radius:16px;box-shadow:0 12px 34px rgba(15,55,85,.18);padding:22px 20px;margin-bottom:18px}
.view-heading{margin:0 0 14px;font-size:1.3em}

/* Form */
.field{margin-bottom:18px}
.field > label,.field-label{display:block;font-weight:600;margin-bottom:6px}
.field > label span{color:#c62828}
input[type=number],select,.search{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:1em;background:#fff}
.search{margin-bottom:8px}
.hint{font-size:.85em;color:var(--muted);margin:0 0 8px}
.radio{display:inline-flex;align-items:center;gap:6px;font-weight:400;margin-right:18px}
.btn-primary{width:100%;background:var(--blue);color:#fff;border:0;padding:14px;border-radius:8px;font-size:1.05em;font-weight:600;cursor:pointer}
.btn-primary:hover{background:var(--blue-d)}
.btn-primary:disabled{opacity:.6}
.form-error{background:#fff1f1;border-left:4px solid #c62828;color:#c62828;padding:12px 14px;border-radius:6px;margin-top:14px}

/* Portion presets */
.portion-presets{display:flex;gap:8px;margin-bottom:10px}
.portion-card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border:2px solid var(--line);background:#fff;border-radius:10px;cursor:pointer}
.portion-card.selected{border-color:var(--blue);background:#f1f5ff}
.portion-plate svg{display:block;width:100%;height:auto;max-width:72px}
.portion-g{font-weight:700;color:var(--blue);font-size:1em}
.portion-name{font-size:.76em;color:var(--muted);text-align:center}

/* Result cards */
.results-title{margin:0 0 16px;font-size:1.25em}
.rc-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;margin-bottom:11px;border-radius:8px;background:#f9f9f9;border-left:5px solid #ccc}
.rc-item.green{border-left-color:#2e7d32;background:#f1f8f1}
.rc-item.amber{border-left-color:#e65100;background:#fff8f1}
.rc-item.red{border-left-color:#c62828;background:#fff1f1}
.rc-item.neutral{border-left-color:var(--blue);background:#f1f5ff}
.rc-icon{font-size:1.4em;line-height:1.3}
.rc-body{flex:1}
.rc-label{font-weight:700;font-size:.9em;color:#555;margin-bottom:3px}
.rc-value{font-size:1.3em;font-weight:700;margin-bottom:4px}
.rc-desc{font-size:.88em;color:#444}
.results-actions{margin-top:20px;text-align:center}
.btn-intake{background:var(--green);color:#fff;border:0;padding:13px 22px;border-radius:8px;font-size:1em;font-weight:600;cursor:pointer}
.btn-intake:hover{background:var(--green-d)}
.btn-intake.is-added{background:#cfe9df;color:var(--green-d)}
.intake-note{margin-top:10px;font-size:.95em;color:#33475a}
.link-intake{display:inline-block;margin-top:12px;background:none;border:0;color:var(--green);font-weight:600;cursor:pointer;font-size:1em}
.results-disclaimer{font-size:.86em;color:#666;margin-top:20px;padding:14px 16px;background:#f5f5f5;border-radius:6px;line-height:1.65}

/* Intake dashboard */
.ik-panel{padding:16px 18px;border-radius:12px;background:#f5f8fb;margin-bottom:16px}
.ik-panel h4{margin:0 0 12px;font-size:1.02em;color:#33475a}
.ik-metric{margin-bottom:14px}
.ik-metric-label{font-size:.9em;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:5px}
.ik-metric-label b{color:var(--ink)}
.ik-bar{height:12px;border-radius:6px;background:#e4e9ee;overflow:hidden}
.ik-bar-fill{height:100%;border-radius:6px;background:#2e7d32}
.ik-bar-fill.amber{background:#e65100}
.ik-bar-fill.red{background:#c62828}
.ik-caption{font-size:.85em;color:var(--muted);margin-top:5px}
.ik-overview{display:flex;gap:24px;flex-wrap:wrap}
.ik-overview span{display:block;font-size:1.5em;font-weight:700}
.ik-overview small{font-size:.8em;color:#667}
.ik-list{list-style:none;margin:8px 0 0;padding:0}
.ik-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #e4e9ee}
.ik-item-main{font-size:.95em}
.ik-item-sub{font-size:.82em;color:#667}
.ik-remove{background:none;border:0;color:#c62828;cursor:pointer;font-size:.85em}
.ik-clear{margin-top:8px;background:none;border:1px solid var(--line);color:var(--muted);padding:8px 16px;border-radius:6px;cursor:pointer}
.ik-empty{color:var(--muted);background:#f5f8fb;padding:18px;border-radius:12px}
.ik-privacy{font-size:.82em;color:#778;margin-top:14px;line-height:1.6}

/* Footer */
.app-footer{max-width:640px;margin:0 auto;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 24px);text-align:center}
.app-footer p{font-size:.8em;color:#5b6b78;background:rgba(255,255,255,.7);border-radius:10px;padding:10px 14px;margin:0}

/* Program logo (leverages the SeaSeMe brand mark on the white card) */
.brand-logo{display:block;height:64px;width:auto;max-width:64px;margin:0 auto 16px}

/* Kids mode (age <= 15): playful Greek-capable font, scoped to the calculator */
#view-calc.kids,
#view-calc.kids input,
#view-calc.kids select,
#view-calc.kids button,
#view-calc.kids label,
#view-calc.kids .field-label,
#view-calc.kids .results-title,
#view-calc.kids .rc-label,
#view-calc.kids .rc-value,
#view-calc.kids .rc-desc{
	font-family:'Playpen Sans','Commissioner',system-ui,-apple-system,sans-serif !important;
}