/* Default choices intentionally add no overrides. */
.update-bar { position: sticky; bottom: 60px; z-index: 8; padding: 8px 12px; background: var(--card, white); color: var(--text, #1d1c22); border: 1px solid var(--line, #ddd); display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.update-bar[hidden] { display: none; }
html[data-text-size="small"], html[data-text-size="small"] body { font-size: 15px; }
html[data-text-size="large"], html[data-text-size="large"] body { font-size: 20px; }
/* Non-plain backgrounds sit behind an opaque reading surface, also for photos. */
html[data-background] #main { background: var(--card); padding: 12px; border-radius: 16px; }
html[data-background] body { background-color: var(--bg); }
:root[data-accent="teal"] { --accent: #17675f; --accent-ink: #ffffff; --link: #17675f; --chart-line: #17675f; }
:root[data-theme="dark"][data-accent="teal"] { --accent: #82d8c8; --accent-ink: #14142b; --link: #82d8c8; --chart-line: #82d8c8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="teal"] { --accent: #82d8c8; --accent-ink: #14142b; --link: #82d8c8; --chart-line: #82d8c8; } }
:root[data-accent="blue"] { --accent: #255da1; --accent-ink: #ffffff; --link: #255da1; --chart-line: #255da1; }
:root[data-theme="dark"][data-accent="blue"] { --accent: #9bcaff; --accent-ink: #14142b; --link: #9bcaff; --chart-line: #9bcaff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="blue"] { --accent: #9bcaff; --accent-ink: #14142b; --link: #9bcaff; --chart-line: #9bcaff; } }
:root[data-accent="rose"] { --accent: #9b3154; --accent-ink: #ffffff; --link: #9b3154; --chart-line: #9b3154; }
:root[data-theme="dark"][data-accent="rose"] { --accent: #ffa9c4; --accent-ink: #14142b; --link: #ffa9c4; --chart-line: #ffa9c4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="rose"] { --accent: #ffa9c4; --accent-ink: #14142b; --link: #ffa9c4; --chart-line: #ffa9c4; } }
:root[data-accent="plum"] { --accent: #783e99; --accent-ink: #ffffff; --link: #783e99; --chart-line: #783e99; }
:root[data-theme="dark"][data-accent="plum"] { --accent: #dbb0f4; --accent-ink: #14142b; --link: #dbb0f4; --chart-line: #dbb0f4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="plum"] { --accent: #dbb0f4; --accent-ink: #14142b; --link: #dbb0f4; --chart-line: #dbb0f4; } }
:root[data-accent="copper"] { --accent: #854b23; --accent-ink: #ffffff; --link: #854b23; --chart-line: #854b23; }
:root[data-theme="dark"][data-accent="copper"] { --accent: #efbc91; --accent-ink: #14142b; --link: #efbc91; --chart-line: #efbc91; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="copper"] { --accent: #efbc91; --accent-ink: #14142b; --link: #efbc91; --chart-line: #efbc91; } }
:root[data-background="sand"] { --bg: #f4eddf; }
:root[data-theme="dark"][data-background="sand"] { --bg: #211f1b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-background="sand"] { --bg: #211f1b; } }
:root[data-background="mist"] { --bg: #eceff0; }
:root[data-theme="dark"][data-background="mist"] { --bg: #1b2022; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-background="mist"] { --bg: #1b2022; } }
:root[data-background="sage"] { --bg: #eaf0e8; }
:root[data-theme="dark"][data-background="sage"] { --bg: #1c221b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-background="sage"] { --bg: #1c221b; } }
:root[data-background="lavender"] { --bg: #efebf5; }
:root[data-theme="dark"][data-background="lavender"] { --bg: #211d28; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-background="lavender"] { --bg: #211d28; } }
:root[data-background="peach"] { --bg: #f8ece5; }
:root[data-theme="dark"][data-background="peach"] { --bg: #271e1a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-background="peach"] { --bg: #271e1a; } }
:root[data-background="sky"] { --bg: #e8f0f6; }
:root[data-theme="dark"][data-background="sky"] { --bg: #1a2128; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-background="sky"] { --bg: #1a2128; } }
html[data-background="dots"] body { background-image: radial-gradient(circle, var(--line) 1px, transparent 1px); background-size: 40px 40px; }
html[data-background="lines"] body { background-image: repeating-linear-gradient(0deg, transparent 0 19px, var(--line) 20px 21px); background-size: 40px 40px; }
html[data-background="grid"] body { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; }
html[data-background="diagonal"] body { background-image: repeating-linear-gradient(135deg, transparent 0 19px, var(--line) 20px 21px); background-size: 40px 40px; }
html[data-background="waves"] body { background-image: repeating-radial-gradient(ellipse at 0 0, transparent 0 24px, var(--line) 25px 26px, transparent 27px 50px); background-size: 120px 60px; }
html[data-background="checks"] body { background-image: conic-gradient(from 90deg, var(--line) 25%, transparent 0 50%, var(--line) 0 75%, transparent 0); background-size: 40px 40px; }
@media print { html[data-background] body { background-image: none; } .update-bar { display: none; } }