/* Maps the protein tracker's own colour tokens onto the site theme (day, dusk, night). */
html[data-phase][data-theme]{
  --bg:#FFFFFF;--surface:#F3F4F5;--ink:#0B0B0C;--muted:#4F545A;--line:#E1E3E6;--line2:#C4C8CD;
  --brand:#0B0B0C;--brand-ink:#FFFFFF;--brand-soft:#E8EAEC;
  --warn-bg:#FFF3D6;--warn-ink:#5A3A00;--warn-line:#E0B95A;--shadow:none;
}
html[data-phase="dusk"][data-theme]{
  --bg:#FFE2A0;--surface:#FFF6DF;--ink:#2A1606;--muted:#452A0D;--line:#E3B66E;--line2:#D2A04F;
  --brand:#2A1606;--brand-ink:#FFF5DD;--brand-soft:#FBDFA2;
}
html[data-phase="night"][data-theme]{
  --bg:#000000;--surface:#121315;--ink:#F4F4F5;--muted:#A5ABB2;--line:#26282B;--line2:#3C4044;
  --brand:#FFFFFF;--brand-ink:#0B0B0C;--brand-soft:#1E2024;
  --warn-bg:#2C230C;--warn-ink:#F8DFAA;--warn-line:#6B5320;
}
html[data-phase="dusk"] body{background-image:linear-gradient(180deg,#FFEDB8 0%,#FFD184 50%,#FFA960 100%);background-attachment:fixed}
body{font-family:var(--font-body)}
h1,h2,h3{letter-spacing:-.02em}
.card,.notice{border-radius:20px}
.btn{border-radius:999px}
.chip{border-radius:999px}
/* "Your records" panel */
#records [hidden]{display:none!important}
#records .rec-row{display:flex;flex-wrap:wrap;gap:10px}
#records .btn{height:auto;padding-block:12px;line-height:1.2;text-align:center}
@media (max-width:480px){#records .rec-row .btn{flex:1 1 100%}}
#records .stack-sm{display:flex;flex-direction:column;gap:12px}
#records .status{font-weight:700}
#records .msg:empty{display:none}
#records details{border-top:1px solid var(--line);padding-top:6px}
#records summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
#records details p{margin-block:8px 12px}
#theme-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line2);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
#theme-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}