/* Daily menu tile: ETH mensa listings.
 *
 * Self-contained — it reads ETH's public cookpit API straight from the browser
 * and keeps favourites in a cookie, so it needs nothing from this server.
 * Scoped under .dailymenu because it is a page inside the shared shell.
 */
/* Themed to match the host app (light background, mint accent, Segoe UI) */
.dailymenu { --bg:#fff; --card:#fff; --card2:#f0f0f0; --txt:#333; --muted:#777;
        --accent:#42f5b6; --accent-hover:#4ffecc; --accent-text:#149d6e; --line:#ddd; }
.dailymenu * { box-sizing:border-box; }
.dailymenu { background:var(--bg); color:var(--txt);
       font:15px/1.45 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; }
.dailymenu header { position:sticky; top:0; z-index:5; background:rgba(255,255,255,.95); backdrop-filter:blur(6px);
         border-bottom:1px solid var(--line); padding:12px 16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ctrl { display:flex; gap:6px; align-items:center; }
.dailymenu button, .dailymenu select, .dailymenu input[type=date] { font:inherit; color:var(--txt); background:var(--card2);
         border:1px solid var(--line); border-radius:8px; padding:7px 11px; cursor:pointer; }
.dailymenu button:hover, .dailymenu select:hover { border-color:var(--accent); }
.dayseg { display:flex; gap:4px; background:var(--card2); border:1px solid var(--line); border-radius:11px; padding:4px; }
.day-btn { display:flex; flex-direction:column; align-items:center; gap:1px; border:none; background:none;
           border-radius:8px; padding:5px 18px; line-height:1.25; cursor:pointer; min-width:90px; transition:background .12s; }
.day-btn:hover { background:rgba(0,0,0,.05); border:none; }
.day-btn.active { background:var(--accent); }
.day-btn.active:hover { background:var(--accent-hover); }
.day-btn .d-label { font-weight:700; font-size:14px; color:var(--txt); }
.day-btn .d-date { font-size:11px; color:var(--muted); }
.day-btn.active .d-date { color:var(--accent-text); }
.regionseg { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.rgn-btn { border:1px solid var(--line); background:var(--card2); border-radius:999px;
           padding:5px 14px; font-size:13px; color:var(--txt); cursor:pointer; }
.rgn-btn:hover { border-color:var(--accent); }
.rgn-btn.active { background:var(--accent); border-color:var(--accent); color:#333; font-weight:600; }
#status { color:var(--muted); margin-left:auto; font-size:13px; }
.dailymenu main { padding:16px; display:flex; flex-direction:column; gap:10px; max-width:780px; margin:0 auto; }
.mensa { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;
         box-shadow:0 2px 5px rgba(0,0,0,0.08); }
.mensa > summary { margin:0; padding:12px 14px; font-size:15px; font-weight:600; cursor:pointer; list-style:none;
                   display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--card2); }
.mensa > summary::-webkit-details-marker { display:none; }
.mensa > summary::before { content:'▸'; color:var(--muted); transition:transform .15s; flex:none; }
.mensa[open] > summary::before { transform:rotate(90deg); }
.mensa > summary .title { flex:1; min-width:0; }
.mensa > summary .region { color:var(--muted); font-weight:400; font-size:12px; }
.mensa[open] > summary { border-bottom:1px solid var(--line); }
.meal { display:flex; gap:10px; padding:12px 14px; border-top:1px solid var(--line); }
.meal:first-of-type { border-top:none; }
.meal img { width:84px; height:84px; object-fit:cover; border-radius:8px; flex:none; background:var(--card2); cursor:zoom-in; }
.meal .body { min-width:0; flex:1; }
.fav { flex:none; align-self:flex-start; padding:0; border:none; width:24px; height:24px; cursor:pointer;
       background:#bbb; -webkit-mask:url(/icons/star.svg) center/contain no-repeat; mask:url(/icons/star.svg) center/contain no-repeat; }
.fav:hover { background:#f5c542; border:none; }
.fav.on { background:#f5c542; -webkit-mask-image:url(/icons/star_fill.svg); mask-image:url(/icons/star_fill.svg); }
.fav-star { display:inline-block; width:18px; height:18px; margin-right:6px; vertical-align:-3px;
            background:#f5c542; -webkit-mask:url(/icons/star_fill.svg) center/contain no-repeat; mask:url(/icons/star_fill.svg) center/contain no-repeat; }
.fav-section { border-color:var(--accent); }
.fav-section > summary { background:#e6fbf3; }
.meal .line { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-text); font-weight:700; }
.meal .name { font-weight:600; margin:1px 0 2px; }
.meal .desc { color:var(--muted); font-size:13px; }
.meal .price { margin-top:5px; font-size:12.5px; color:var(--txt); }
.meal .price span { color:var(--muted); }
.meal .fav-time { margin-top:5px; font-size:12px; color:var(--accent-text); font-weight:600; }
.times { padding:8px 14px; font-size:12.5px; color:var(--muted); border-bottom:1px solid var(--line);
         display:flex; flex-wrap:wrap; gap:4px 12px; }
.times b { color:var(--txt); font-weight:600; }
.closed, .empty { padding:14px; color:var(--muted); font-size:13px; }
.err { color:#e53935; }
/* Image lightbox — tap a meal image to view it big; tap anywhere to close. */
#lightbox { position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
            background:rgba(0,0,0,.82); cursor:zoom-out; padding:24px; }
#lightbox.open { display:flex; }
#lightbox img { max-width:96vw; max-height:92vh; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.5);
                background:var(--card2); }