/* Foodys. Same tokens as Homepage's custom.css: Day is the default, Night is html.dark.
   The app icon uses Homepage's Daily accent. Grade colours follow the rating bands:
   Aaa to A3 green, Baa blue, Ba to B amber, Caa to C red. */
@font-face{font-family:"Roboto Flex";src:url("roboto-flex.woff2") format("woff2");font-weight:100 1000;font-display:swap}
:root{
  --bg:#edf1f9;--c:#fff;--c-high:#e9eef6;--c-highest:#dde3ee;
  --on:#1b1b21;--on-var:#464855;
  --primary:#4355b9;--on-primary:#fff;--primary-c:#dee0ff;--on-primary-c:#00105c;
  --err:#ba1a1a;--err-c:#ffdad6;--on-err-c:#410002;--warn-c:#ffdea8;--on-warn-c:#271900;--ok:#1e8e3e;
  --tint-c:#c2e7ff;--tint-on:#00639b;
  --hi-c:#c4eed0;--on-hi-c:#00210c;--hi:#1e8e3e;
  --ig-c:#dee0ff;--on-ig-c:#00105c;--ig:#4355b9;
  --hy-c:#ffdea8;--on-hy-c:#271900;--hy:#b26b00;
  --lo-c:#ffdad6;--on-lo-c:#410002;--lo:#ba1a1a;
  --inv:#303036;--on-inv:#f2f0f4;--inv-primary:#bac3ff;
  --shadow:0 6px 24px rgba(27,27,33,.12);
  --ease:cubic-bezier(.2,0,0,1);
  --font:"Roboto Flex",Roboto,"Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
html.dark{
  --bg:#121316;--c:#1c1d21;--c-high:#26282d;--c-highest:#313339;
  --on:#e3e3e6;--on-var:#b9bcc4;
  --primary:#c6ccd8;--on-primary:#1b1d22;--primary-c:#34373e;--on-primary-c:#eceef3;
  --err:#ffb4ab;--err-c:#8c1d18;--on-err-c:#ffdad6;--warn-c:#5c4300;--on-warn-c:#ffdea8;--ok:#7fc99a;
  --tint-c:#2a2c31;--tint-on:#c7c9cf;
  --hi-c:#1f3527;--on-hi-c:#b4ecc5;--hi:#7fc99a;
  --ig-c:#2a3048;--on-ig-c:#dde1ff;--ig:#aab4f5;
  --hy-c:#4a3600;--on-hy-c:#ffdea8;--hy:#f0b45a;
  --lo-c:#5e1914;--on-lo-c:#ffdad6;--lo:#ffb4ab;
  --inv:#e3e3e6;--on-inv:#1b1b21;--inv-primary:#4355b9;
  --shadow:0 6px 24px rgba(0,0,0,.45);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);scrollbar-color:var(--c-highest) var(--bg)}
html,body{transition:background-color .3s var(--ease)}
body{margin:0;background:var(--bg);color:var(--on);font:400 15px/1.45 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
::selection{background:var(--primary-c);color:var(--on-primary-c)}
svg{width:20px;height:20px;flex:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main{max-width:680px;margin:0 auto;padding:28px 16px 112px}

/* Header */
header{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.app{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--tint-c);color:var(--tint-on);transition:background-color .3s var(--ease)}
.app svg{width:28px;height:28px}
.hd{flex:1;min-width:0}
h1{margin:0;font-size:1.375rem;font-weight:500;line-height:1.25}
.sub{margin:2px 0 0;color:var(--on-var);font-size:.85rem}

/* Day / Night, same control as Homepage */
#daynight{display:flex;flex:none;gap:2px;padding:4px;border-radius:999px;background:var(--c);transition:background-color .3s var(--ease)}
#daynight button{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 12px;border:0;border-radius:999px;background:transparent;color:var(--on-var);font-size:.85rem;font-weight:500;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
#daynight button[aria-pressed="true"]{background:var(--primary-c);color:var(--on-primary-c)}
#daynight svg{width:18px;height:18px}

/* Surfaces */
.card{padding:18px 18px 16px;border-radius:24px;background:var(--c);transition:background-color .3s var(--ease)}
.sec{display:flex;align-items:baseline;gap:12px;margin:30px 6px 10px}
.sec h2{margin:0;font-size:1rem;font-weight:500}
.aside{margin-left:auto;color:var(--on-var);font-size:.8rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 20px 0 16px;border:0;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:.9rem;font-weight:500;cursor:pointer;transition:background-color .2s var(--ease),opacity .2s var(--ease)}
.btn:disabled{opacity:.6;cursor:default}
.btn svg{width:18px;height:18px}
.text{height:40px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--primary);font-size:.875rem;font-weight:500;cursor:pointer}
html.dark .text{color:var(--on-var)}
.tonal{display:inline-flex;align-items:center;height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--primary-c);color:var(--on-primary-c);font-size:.875rem;font-weight:500;cursor:pointer}

/* Inputs, shaped like Homepage's search bar */
.field{display:flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 16px;border-radius:999px;background:var(--c-high);transition:box-shadow .2s var(--ease),background-color .3s var(--ease)}
.field:focus-within{box-shadow:inset 0 0 0 2px var(--primary)}
.field>svg{color:var(--on-var)}
.field input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:transparent;font-size:1rem}
input::placeholder,textarea::placeholder{color:var(--on-var);opacity:1}
.notewrap{display:block;margin-top:16px;padding:14px 18px;border-radius:24px;background:var(--c-high);transition:box-shadow .2s var(--ease),background-color .3s var(--ease)}
.notewrap:focus-within{box-shadow:inset 0 0 0 2px var(--primary)}
textarea{display:block;width:100%;min-height:24px;max-height:180px;margin:0;padding:0;border:0;outline:0;background:transparent;font-size:.95rem;line-height:1.5;resize:none}
.notewrap textarea:focus-visible,.field input:focus-visible{outline:0}

/* Vote card */
.vhead{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.vhead .av{width:40px;height:40px;border-radius:13px}
.who{flex:1;min-width:0;display:flex;flex-direction:column}
.who .k{line-height:1.2}
.who b{font-size:1rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mine{margin-left:auto;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--c-high);color:var(--on-var);font-size:.8rem;font-weight:500;white-space:nowrap}
.glabel{display:flex;align-items:baseline;gap:8px;margin:18px 4px 10px;color:var(--on-var);font-size:.85rem}
.glabel b{color:var(--on);font-weight:500}
.grades{display:flex;flex-wrap:wrap;gap:8px 12px}
.grp{display:flex;flex-wrap:wrap;gap:4px}
.grades.num .grp{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));width:100%}
.grades.num .g{min-width:0}
.g{min-width:46px;height:40px;padding:0 9px;border:1px solid var(--c-highest);border-radius:12px;background:transparent;color:var(--on);font-size:.85rem;font-weight:500;cursor:pointer;transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.g-hi{border-color:color-mix(in srgb,var(--hi) 35%,var(--c))}
.g-ig{border-color:color-mix(in srgb,var(--ig) 30%,var(--c))}
.g-hy{border-color:color-mix(in srgb,var(--hy) 35%,var(--c))}
.g-lo{border-color:color-mix(in srgb,var(--lo) 30%,var(--c))}
.g[aria-checked="true"]{border-color:transparent;font-weight:600}
.g-hi[aria-checked="true"]{background:var(--hi-c);color:var(--on-hi-c)}
.g-ig[aria-checked="true"]{background:var(--ig-c);color:var(--on-ig-c)}
.g-hy[aria-checked="true"]{background:var(--hy-c);color:var(--on-hy-c)}
.g-lo[aria-checked="true"]{background:var(--lo-c);color:var(--on-lo-c)}
.acts{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:16px}
.acts .text{margin-right:auto}

/* Grade colours */
.t-none{background:var(--c-high);color:var(--on-var)}
.t-hi{background:var(--hi-c);color:var(--on-hi-c)}
.t-ig{background:var(--ig-c);color:var(--on-ig-c)}
.t-hy{background:var(--hy-c);color:var(--on-hy-c)}
.t-lo{background:var(--lo-c);color:var(--on-lo-c)}
.f-hi{background:var(--hi)}.f-ig{background:var(--ig)}.f-hy{background:var(--hy)}.f-lo{background:var(--lo)}
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:28px;padding:0 10px;border-radius:999px;font-size:.8rem;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Homepage's segmented list */
.list{display:flex;flex-direction:column;gap:3px;margin:0;padding:0;list-style:none}
.row{border-radius:6px;background:var(--c);transition:background-color .25s var(--ease)}
.row:first-child{border-top-left-radius:24px;border-top-right-radius:24px}
.row:last-child{border-bottom-left-radius:24px;border-bottom-right-radius:24px}
.rowin{display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 16px 12px 14px}
.av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;font-size:.9rem;font-weight:600;letter-spacing:.02em}
.tx{flex:1;min-width:0;display:flex;flex-direction:column}
.t1{font-size:.95rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t2{margin-top:1px;color:var(--on-var);font-size:.8rem}
.note{margin-top:2px;overflow-wrap:anywhere}
.end{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.when{color:var(--on-var);font-size:.75rem;padding-right:4px;font-variant-numeric:tabular-nums}
.empty{padding:28px 20px;border-radius:24px;background:var(--c);color:var(--on-var);text-align:center;font-size:.9rem}

/* Today's summary row */
.sum .rowin{min-height:96px;gap:16px;padding:16px 18px 16px 16px}
.badge{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;font-size:1.3rem;font-weight:600;font-variant-numeric:tabular-nums}
.sum .t1{font-size:1.05rem}
.sum .t2{margin-top:2px;font-size:.85rem;white-space:normal}

/* Avatars: Homepage's group accents by day, grey by night */
.a0{background:#d3e3fd;color:#0b57d0}.a1{background:#e2e0ff;color:#5352a0}.a2{background:#c2e7ff;color:#00639b}.a3{background:#b8ede6;color:#006a60}
.a4{background:#e8def8;color:#65558f}.a5{background:#c4eed0;color:#146c2e}.a6{background:#d6e9cf;color:#3e6a35}.a7{background:#d6e2f2;color:#3a5577}
html.dark .av{background:#2a2c31;color:#c7c9cf}

/* Rating history */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.stat{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:14px 16px 16px;border-radius:6px;background:var(--c);transition:background-color .3s var(--ease)}
.stat:first-child{border-top-left-radius:24px}
.stat:last-child{border-top-right-radius:24px}
.stats.solo .stat:first-child{border-bottom-left-radius:24px}
.stats.solo .stat:last-child{border-bottom-right-radius:24px}
.k{color:var(--on-var);font-size:.8rem}
.stat .chip{height:32px;min-width:52px;font-size:.95rem}
.s{color:var(--on-var);font-size:.75rem;line-height:1.35}
.out{display:inline-flex;align-items:center;gap:6px;height:32px;font-size:.95rem;font-weight:600;white-space:nowrap}
.out svg{width:18px;height:18px}
.o-positive{color:var(--hi)}.o-negative{color:var(--lo)}.o-stable{color:var(--on)}
.chart{margin-top:3px;padding:10px 6px 4px;border-radius:6px 6px 24px 24px;background:var(--c);transition:background-color .3s var(--ease)}
.trend{display:block;width:100%;height:140px;overflow:visible}
.trend .grid{stroke:var(--c-highest);stroke-width:1}
.trend .ylab,.trend .xlab{fill:var(--on-var);font:500 11px var(--font)}
.trend .area{fill:var(--primary);opacity:.08}
.trend .avg{stroke:var(--on-var);stroke-width:1.25;stroke-dasharray:4 4;opacity:.65}
.trend .line{fill:none;stroke:var(--primary);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.trend .dot{fill:var(--c);stroke:var(--primary);stroke-width:2}
.trend .dot.today{fill:var(--primary)}
.days{margin-top:14px}
.rm{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:10px 14px 10px 18px;border:0;border-radius:inherit;background:transparent;text-align:left;cursor:pointer}
.dmeta{display:flex;align-items:center;gap:10px;margin-top:6px}
.bar{flex:none;width:88px;height:6px;border-radius:999px;background:var(--c-high);overflow:hidden}
.fill{display:block;height:100%;border-radius:inherit}
.dend{flex:none;display:flex;align-items:center;gap:6px}
.chev{color:var(--on-var);transition:transform .2s var(--ease)}
.day.open{background:color-mix(in srgb,var(--tint-on) 5%,var(--c))}
.day.open .chev{transform:rotate(180deg)}
.det{display:none;flex-direction:column;gap:2px;margin:0 12px 12px;padding:4px;border-radius:18px;background:var(--c-high);list-style:none}
.day.open .det{display:flex}
.minin{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px}
.mini .av{width:34px;height:34px;border-radius:11px;font-size:.75rem}
.mini .t1{font-size:.875rem}
.mini .chip{height:24px;min-width:40px;font-size:.75rem}
.loading{padding:12px 14px;color:var(--on-var);font-size:.85rem}
.morewrap{display:flex;justify-content:center;margin-top:14px}
.foot{margin:28px 8px 0;color:var(--on-var);font-size:.78rem;text-align:center}

/* Lock and notices */
.lock{display:flex;flex-direction:column;align-items:center;gap:4px;padding:32px 20px 22px;text-align:center}
.app.big{width:56px;height:56px;border-radius:18px;margin-bottom:8px}
.lock h2{margin:0;font-size:1.15rem;font-weight:500}
.lock .sub{max-width:360px;text-wrap:balance}
.joinform{display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px;margin-top:18px}
.btn.wide{justify-content:center;width:100%;height:52px;padding:0 22px;font-size:.95rem}
.taken{padding:14px 16px 10px;border-radius:20px;background:var(--warn-c);color:var(--on-warn-c);text-align:left;font-size:.9rem}
.taken p{margin:0 0 10px}
.takenacts{display:flex;flex-wrap:wrap;gap:6px}
.taken .text{color:var(--on-warn-c)}
.err{min-height:1.3em;margin:10px 0 0;color:var(--err);font-size:.85rem}
.notice{color:var(--on-var);font-size:.9rem;text-align:center}
.notice p{margin:0}
.nojs{max-width:680px;margin:0 auto;padding:16px;text-align:center}

/* Snackbar */
.snack{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 32px);min-height:48px;padding:6px 8px 6px 20px;border-radius:12px;background:var(--inv);color:var(--on-inv);font-size:.9rem;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.snack span{padding:8px 12px 8px 0}
.snack button{height:36px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--inv-primary);font-weight:500;cursor:pointer}
.snack.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}

@media (hover:hover){
  #daynight button:hover{background:var(--c-high)}
  #daynight button[aria-pressed="true"]:hover{background:var(--primary-c)}
  .btn:hover:not(:disabled){background:color-mix(in srgb,var(--on-primary) 10%,var(--primary))}
  .g:hover{background:var(--c-high)}
  .text:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
  .tonal:hover{background:color-mix(in srgb,var(--on-primary-c) 8%,var(--primary-c))}
  .day:hover{background:color-mix(in srgb,var(--tint-on) 6%,var(--c))}
}
@media (max-width:520px){
  main{padding:20px 12px 112px}
  header{gap:12px}
  .lbl{display:none}
  #daynight button{padding:0 10px}
  .card{padding:16px 14px 14px}
  .rowin{gap:12px;padding:10px 12px}
  .sum .rowin{padding:14px 14px 14px 12px}
  .rm{gap:12px;padding:10px 12px 10px 16px}
  .stat{padding:12px 12px 14px}
  .grades.num .grp{grid-template-columns:repeat(5,minmax(0,1fr))}
  .bar{width:64px}
  .det{margin:0 8px 8px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}