/* The look the iOS app has (ios/WidgetShared/Look.swift): its ground, cards, ink and green, light and dark. */
:root {
    --ground: #F1F6EE; --card: #FFFFFF; --ink: #1C2B22; --muted: #5D6F63; --accent: #3E7B4F; --due: #D40000;
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    :root { --ground: #111914; --card: #1C2721; --ink: #E4EDE6; --muted: #A6B8AB; --accent: #7CC690; --due: #FF6B6B; }
}
html, body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.4 Figtree, system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem 3rem; }
h1 { font-size: 2.1rem; margin: 1.25rem 0 1rem; }
nav { display: flex; gap: .5rem; max-width: 44rem; margin: 0 auto; padding: 1rem 1.25rem 0; }
button { font: inherit; color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 999px; padding: .4rem 1rem; cursor: pointer; }
button.chosen, button[type=submit], button.microsoft { background: var(--accent); color: var(--ground); }
button:disabled { opacity: .5; cursor: default; }
button.refresh { margin-left: auto; }
.count { display: inline-block; min-width: 1.4em; margin-left: .3em; border-radius: 999px; background: var(--due); color: #fff; font-size: .8em; text-align: center; }
ul.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.card { background: var(--card); border-radius: 14px; padding: .85rem 1rem; display: grid; gap: .15rem; }
.title { font-size: 1.1rem; }
.due { color: var(--muted); font-size: .9rem; }
.due.overdue, .problem { color: var(--due); }
.empty, .note { color: var(--muted); }
.signing-in form { display: grid; gap: .6rem; max-width: 20rem; }
input { font: inherit; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--muted); background: var(--card); color: var(--ink); }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: .6rem 1.25rem; background: var(--due); color: #fff; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }
.loading-progress { display: block; width: 6rem; height: 6rem; margin: 20vh auto 1rem; }
.loading-progress circle { fill: none; stroke: var(--muted); stroke-width: .5rem; opacity: .3; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--accent); opacity: 1; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { text-align: center; color: var(--muted); }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }
.capture { display: flex; gap: .5rem; margin-bottom: .25rem; }
.capture input { flex: 1; min-width: 0; }
.goes-to { margin: 0 0 1rem; font-size: .85rem; }
.unseen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }