/* 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 6rem; }
h1 { font-size: 2.1rem; margin: 1.25rem 0 1rem; }
/* The phone's shape (05 §0.2): the date and what's seldom wanted at the top, the four tabs along the foot. */
header.top { display: flex; align-items: center; gap: .5rem; max-width: 44rem; margin: 0 auto; padding: .9rem 1.25rem 0; }
header.top .date { margin: 0; }
header.top .more { margin-left: auto; display: flex; gap: .4rem; }
header.top .more button { font-size: .8rem; padding: .2rem .7rem; }
header.top + main h1 { margin-top: .1rem; }
nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: .25rem; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid color-mix(in srgb, var(--muted) 25%, transparent); }
nav.tabs button { flex: 1; max-width: 10rem; border-color: transparent; padding: .55rem .4rem; }
nav.tabs button.chosen { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 600; }
.parts { display: flex; gap: .4rem; margin: 0 0 1rem; }
.parts button { font-size: .9rem; padding: .3rem .9rem; }
.back { margin: .5rem 0 0; }
.back button { border-color: transparent; padding-left: 0; }
.search input { width: 100%; box-sizing: border-box; }
ul.lists { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: 14px; overflow: hidden; }
ul.lists li + li { border-top: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); }
ul.lists button { display: flex; width: 100%; border: 0; border-radius: 0; padding: .8rem 1rem; color: var(--ink); text-align: left; }
ul.lists .how-many { margin-left: auto; color: var(--muted); }
.said, .for, .type, .where, .marks { color: var(--muted); font-size: .9rem; }
.said.overdue { color: var(--due); }
.type, .where { font-size: .8rem; font-weight: 600; }
.star { color: #E0A800; margin-left: .3em; }
.sensitive { color: var(--muted); font-style: italic; }
button { font: inherit; white-space: nowrap; 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; }
.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; }
h2 { font-size: .95rem; font-weight: 600; color: var(--muted); margin: 1.4rem 0 .5rem; }
.date { margin: 1.25rem 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.date + h1 { margin-top: 0; }
.days { display: flex; gap: .5rem; margin: 0 0 .5rem; }
ul.day { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.day .time { display: inline-block; min-width: 6.5rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.day .line { color: var(--muted); font-size: .9rem; padding: 0 1rem; }
.day .card.timed { display: flex; align-items: baseline; }
.day .due-at, .day .due-at .time { color: var(--due); font-weight: 600; }
.card.done .title { text-decoration: line-through; color: var(--muted); }
/* On a phone the buttons keep to one line each and fold onto a second row, never breaking a word (Rich's
   phone, 8 October 2026: "In-" over "tray"). */
@media (max-width: 34rem) {
    html, body { font-size: 16px; }
    nav.tabs button { padding: .5rem .2rem; font-size: .95rem; }
    header.top .more button { padding: .15rem .55rem; }
    .day .time { min-width: 5.5rem; }
}
.decide { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.decide button { font-size: .85rem; padding: .2rem .7rem; }
.undo { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: .5rem .9rem; border-radius: 12px; background: var(--card); color: var(--muted); font-size: .9rem; }
.undo button { margin-left: auto; font-size: .85rem; padding: .2rem .7rem; }
/* A Tudu's page (05 §0.5): rows of settings in a card, as the phones' page has them. */
button.opens { border: 0; border-radius: 0; padding: 0; color: var(--ink); font: inherit; text-align: left; white-space: normal; }
button.plain { border-color: transparent; padding-left: 0; }
.page-top { display: flex; justify-content: space-between; margin: .5rem 0; }
.page-title input { width: 100%; box-sizing: border-box; font-size: 1.4rem; font-weight: 600; }
ul.settings { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: 14px; overflow: hidden; }
ul.settings li { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; min-height: 1.6rem; }
ul.settings li + li { border-top: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); }
ul.settings .value, ul.settings select, ul.settings li > input { margin-left: auto; }
ul.settings .value { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4rem; color: var(--muted); }
select { font: inherit; padding: .3rem .5rem; border-radius: 10px; border: 1px solid var(--muted); background: var(--card); color: var(--accent); }
button.small { font-size: .85rem; padding: .2rem .7rem; }
.under { margin: .5rem .25rem 0; font-size: .85rem; }
.under.overdue { color: var(--due); }
.notes { display: grid; gap: .5rem; justify-items: end; margin: 0; }
textarea { font: inherit; width: 100%; box-sizing: border-box; padding: .6rem .8rem; border-radius: 14px; border: 1px solid transparent; background: var(--card); color: var(--ink); resize: vertical; }
ul.actions li { padding: 0; }
ul.actions button { display: flex; width: 100%; border: 0; border-radius: 0; padding: .8rem 1rem; color: var(--ink); text-align: left; }
ul.actions button .value { margin-left: auto; }
.throws-away, ul.actions button.throws-away { color: var(--due); border-color: var(--due); }
/* Asked first, over everything: what would go, with Cancel and the word for going ahead. */
.veil { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1.25rem; background: color-mix(in srgb, #000 40%, transparent); }
.asks { max-width: 24rem; padding: .5rem 1.25rem 1rem; border-radius: 18px; background: var(--card); }
.asks h2 { font-size: 1.1rem; color: var(--ink); margin: .75rem 0 .5rem; }
.asks p { margin: 0 0 1rem; color: var(--muted); }
.asks .answers { display: flex; justify-content: flex-end; gap: .5rem; margin: 0; }
.asks .go-ahead { background: var(--accent); color: var(--ground); }
/* Capture's "What is it?" row, and the switches in a card of settings. */
.what { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; }
.what .asks-what { color: var(--muted); font-size: .85rem; margin-right: .2rem; }
.what button, .what select { font-size: .85rem; padding: .2rem .7rem; border-radius: 999px; border-color: var(--accent); }
.what select.chosen { background: var(--accent); color: var(--ground); }
ul.settings button.switch { display: flex; width: 100%; border: 0; border-radius: 0; padding: 0; color: var(--ink); text-align: left; }
.what + ul.settings, .capture ~ .under + h2 { margin-top: 0; }
.capture ~ .under { margin-bottom: 1rem; }
/* Goals and Projects: each top Goal a card, with all that's beneath it a step in for each level. */
ul.plans + ul.plans, ul.plans + h2 { margin-top: .6rem; }
ul.plans .plan { display: grid; gap: .1rem; }
ul.lists .count { margin-left: auto; align-self: center; line-height: 1.4; }
/* "New …" under a card of rows, and the Contexts Now is narrowed by. */
.new-one { margin: .4rem 0 0; }
form.new-one { margin-top: .6rem; }
/* A field with its button inside a row of settings, and a link that can be long. */
form.inline { display: flex; gap: .5rem; width: 100%; }
form.inline input { flex: 1; min-width: 0; }
ul.settings a { color: var(--accent); overflow-wrap: anywhere; }
ul.settings button.value { color: var(--accent); }
ul.settings.filed { margin-top: .6rem; }
ul.settings select { max-width: 60%; }
ul.settings .file { display: grid; overflow-wrap: anywhere; }

/* The page has lost the server (ADR 0018): said at the top, over whatever's showing, until it's back. */
.connection { display: none; position: fixed; inset: 0 0 auto 0; z-index: 20; padding: .5rem 1rem; text-align: center; background: var(--card); border-bottom: 1px solid var(--muted); }
.connection p { margin: 0; }
.connection.components-reconnect-show, .connection.components-reconnect-failed, .connection.components-reconnect-rejected { display: block; }
.connection .lost, .connection.components-reconnect-failed .trying { display: none; }
.connection.components-reconnect-failed .lost { display: block; }

/* ---- How it's finished (05 §0.15): the phones' own type, pictures beside words, and controls that answer
   to a pointer and a keyboard. Everything above says where things go; this says how they look. ---- */
@font-face { font-family: Figtree; src: url("../fonts/Figtree-Regular.ttf") format("truetype"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: Figtree; src: url("../fonts/Figtree-Bold.ttf") format("truetype"); font-weight: 600 800; font-display: swap; }
:root {
    --line: color-mix(in srgb, var(--muted) 20%, transparent);
    --soft: color-mix(in srgb, var(--accent) 12%, transparent);
    --softer: color-mix(in srgb, var(--accent) 6%, transparent);
    --pressed: color-mix(in srgb, var(--accent) 22%, transparent);
    --ring: color-mix(in srgb, var(--accent) 35%, transparent);
    --lift: 0 1px 2px rgb(0 0 0 / .05), 0 6px 16px -8px rgb(0 0 0 / .12);
}
@media (prefers-color-scheme: dark) { :root { --lift: 0 1px 2px rgb(0 0 0 / .35); } }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1 { letter-spacing: -.02em; line-height: 1.15; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Buttons: a soft green for what can be done, solid for the one thing most likely wanted, and bare for what's
   only a way somewhere. Each answers a pointer over it and a press. */
button { display: inline-flex; align-items: center; justify-content: center; gap: .4em; border: 1px solid transparent; background: var(--soft); font-weight: 600; transition: background-color .12s ease, color .12s ease, transform .06s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent; }
button:hover:not(:disabled) { background: var(--pressed); }
button:active:not(:disabled) { transform: scale(.97); }
button.chosen, button[type=submit], button.microsoft, button.main, .asks .go-ahead { background: var(--accent); color: var(--ground); }
button.chosen:hover:not(:disabled), button[type=submit]:hover:not(:disabled), button.microsoft:hover:not(:disabled), button.main:hover:not(:disabled), .asks .go-ahead:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
button.quiet, button.plain, .back button { background: transparent; font-weight: 500; }
button.quiet:hover:not(:disabled), button.plain:hover:not(:disabled), .back button:hover:not(:disabled) { background: var(--soft); }
.back button, button.plain { padding: .3rem .7rem .3rem .3rem; margin-left: -.3rem; gap: .1em; }
button.round { width: 2.2rem; height: 2.2rem; padding: 0; }
button.turning .icon { animation: turning 1s linear infinite; }
@keyframes turning { to { transform: rotate(360deg); } }
.throws-away, ul.actions button.throws-away { background: color-mix(in srgb, var(--due) 10%, transparent); border-color: transparent; }
.throws-away:hover:not(:disabled) { background: color-mix(in srgb, var(--due) 18%, transparent); }
/* A row that is itself the button keeps the row's look, not a button's. */
button.opens, ul.lists button, ul.actions button, ul.settings button.switch, ul.settings button.value { background: transparent; font-weight: inherit; justify-content: flex-start; }
button.opens { display: inline; }
button.opens:hover:not(:disabled) { background: transparent; color: var(--accent); }
button.opens:active:not(:disabled), ul.lists button:active:not(:disabled), ul.actions button:active:not(:disabled) { transform: none; }
ul.lists button:hover:not(:disabled), ul.actions button:hover:not(:disabled) { background: var(--softer); }
ul.actions button.throws-away:hover:not(:disabled) { background: color-mix(in srgb, var(--due) 8%, transparent); }
ul.settings button.value:hover:not(:disabled) { background: transparent; text-decoration: underline; }

/* Fields: one quiet edge, and a ring of green while it's being typed in. */
input, select, textarea { border: 1px solid var(--line); border-radius: 12px; transition: border-color .12s ease, box-shadow .12s ease; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--muted) 45%, transparent); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
select { appearance: none; -webkit-appearance: none; padding: .35rem 2rem .35rem .75rem; color: var(--ink); cursor: pointer; background-repeat: no-repeat; background-position: right .6rem center; background-size: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23869488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.what select { padding: .2rem 1.9rem .2rem .8rem; background-color: var(--soft); border-color: transparent; color: var(--accent); font-weight: 600; }
.what select.chosen { background-color: var(--accent); }
.capture input { padding: .65rem .9rem; border-radius: 14px; box-shadow: var(--lift); }
.capture button { border-radius: 14px; padding: .4rem 1.1rem; }

/* Cards and lists sit a little off the ground. */
.card, ul.lists, ul.settings, textarea, .undo { border: 1px solid var(--line); box-shadow: var(--lift); }
.card { padding: .9rem 1rem; }
.title { font-weight: 600; line-height: 1.3; }
.marks { display: inline-flex; align-items: center; gap: .3em; }
.decide { margin-top: .6rem; }
.decide button { padding: .3rem .75rem; }
ul.lists button { gap: .75rem; align-items: center; padding: .85rem 1rem; }
ul.lists button > .icon { width: 1.25rem; height: 1.25rem; color: var(--accent); }
ul.lists button > span:first-of-type { flex: 1; min-width: 0; }
ul.lists .how-many, ul.lists .count { margin-left: 0; }
ul.lists .how-many { font-variant-numeric: tabular-nums; }
/* Each leads somewhere: said by a mark at its end. */
ul.lists button::after { content: ""; flex: none; width: .45rem; height: .45rem; margin-left: .1rem; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); opacity: .55; transform: rotate(45deg); }
.count { padding: 0 .35em; font-weight: 700; line-height: 1.5; }
.undo { color: var(--ink); }
.empty { padding: 2.5rem 1rem; text-align: center; border: 1px dashed var(--line); border-radius: 14px; }

/* The top: the date, and what's seldom wanted, kept small. */
header.top .more { align-items: center; gap: .15rem; }
header.top .more button { font-size: .85rem; padding: .3rem .65rem; color: var(--muted); }
header.top .more button.round { padding: 0; }
header.top .more button:hover:not(:disabled) { color: var(--accent); }

/* The four tabs, as a phone has them: a picture over its name, the one that's open in green. */
nav.tabs { gap: 0; padding-top: .3rem; background: color-mix(in srgb, var(--card) 82%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-top-color: var(--line); z-index: 1; }
nav.tabs button { flex-direction: column; gap: .15rem; padding: .35rem .2rem .25rem; border-radius: 12px; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 600; }
nav.tabs button .icon { width: 1.5rem; height: 1.5rem; }
nav.tabs button:hover:not(:disabled) { background: var(--softer); color: var(--ink); }
nav.tabs button.chosen, nav.tabs button.chosen:hover:not(:disabled) { background: transparent; color: var(--accent); }
nav.tabs .pictured { position: relative; display: inline-flex; }
nav.tabs .pictured .count { position: absolute; top: -.4rem; left: 62%; margin: 0; font-size: .65rem; box-shadow: 0 0 0 2px var(--card); }

/* The To-do List's parts: one control, with the part that's showing raised in it. */
.parts[role=tablist] { display: inline-flex; gap: 0; padding: 3px; border-radius: 999px; background: var(--soft); }
.parts[role=tablist] button { background: transparent; color: var(--muted); padding: .3rem 1rem; }
.parts[role=tablist] button:hover:not(:disabled) { color: var(--ink); }
.parts[role=tablist] button.chosen, .parts[role=tablist] button.chosen:hover:not(:disabled) { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .14); }
.days button { min-width: 2.4rem; }

/* A switch is drawn as one: its knob to the right and green when it's on. Its word is still there to be read out. */
ul.settings button.switch { justify-content: space-between; gap: .75rem; }
ul.settings button.switch .value { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
ul.settings button.switch::after { content: ""; flex: none; width: 2.7rem; height: 1.6rem; border-radius: 999px; background-color: color-mix(in srgb, var(--muted) 40%, transparent); background-image: radial-gradient(circle at .8rem 50%, #fff .58rem, transparent .62rem); transition: background-color .15s ease; }
ul.settings button.switch[aria-checked=true]::after { background-color: var(--accent); background-image: radial-gradient(circle at calc(100% - .8rem) 50%, #fff .58rem, transparent .62rem); }

/* What's asked first comes up over the page, which dims behind it. */
.veil { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: dimming .15s ease; }
.asks { box-shadow: 0 24px 60px -12px rgb(0 0 0 / .45); animation: arriving .18s ease; }
@keyframes dimming { from { opacity: 0; } }
@keyframes arriving { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Signing in: the name, and one way in, in the middle of the page. */
main.signing-in { min-height: 70vh; padding-top: 2.5rem; display: grid; align-content: center; justify-items: center; text-align: center; gap: .25rem; }
/* The page for signing in is white in the light, edge to edge; in the dark it's the ground, as everywhere. */
@media (prefers-color-scheme: light) { html:has(main.signing-in), body:has(main.signing-in) { background: var(--card); } }
main.signing-in h1 { font-size: 2.6rem; color: var(--ink); margin: 0; }
main.signing-in .what { color: var(--muted); margin: .2rem 0 1.6rem; }
main.signing-in form { text-align: left; width: min(22rem, 100%); }
/* A button for each way in: the full width of the column, the card's colour with a thin outline, its mark and then its words. */
main.signing-in > p:has(> button.microsoft), main.signing-in > p:has(> button.main) { width: min(22rem, 100%); margin: 0 0 .75rem; }
main.signing-in button.microsoft, main.signing-in button.main { width: 100%; height: 3.1rem; padding: 0 1.5rem; border-radius: 8px; font-weight: 500; font-size: 1.1rem;
    background: var(--card); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
/* Under the pointer and pressed they darken a little, and stay the card's own: never the accent other main buttons turn. */
main.signing-in button.microsoft:hover:not(:disabled), main.signing-in button.main:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 5%, var(--card)); }
main.signing-in button.microsoft:active:not(:disabled), main.signing-in button.main:active:not(:disabled) { background: color-mix(in srgb, var(--ink) 11%, var(--card)); }
main.signing-in .other-way { margin: 1.2rem 0 0; }
main.signing-in button.plain { border: 0; padding: .4rem .6rem; }
main.signing-in button svg.mark { width: 1em; height: 1em; fill: currentColor; vertical-align: -.14em; margin-right: .55em; }

/* A Tudu's page comes up over where it was opened from. On a phone it's the whole screen above the tabs, as a
   page is; at a desk it's a dialog, with the list still behind it. */
.veil:not(.over) { z-index: 6; }
.veil.over { z-index: 2; display: block; padding: 0; overflow-y: auto; background: var(--ground); animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sheet { max-width: 44rem; margin: 0 auto; padding: .4rem 1.25rem 7rem; outline: none; }
nav.tabs { z-index: 3; }
nav.tabs .brand, nav.tabs .side { display: none; }

/* At a desk (05 §0.15): the tabs go down the left side, with every Folder and list under them. */
@media (min-width: 60rem) {
    /* Room for the side menu, only where there is one: the page for signing in has none, and sat off centre. */
    body:has(nav.tabs) { padding-left: 16rem; }
    main { padding-bottom: 3rem; }
    nav.tabs { top: 0; right: auto; width: 16rem; box-sizing: border-box; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: .1rem; padding: 1.1rem .75rem 1.5rem; overflow-y: auto; border-top: 0; border-right: 1px solid var(--line); background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
    nav.tabs .brand { display: block; margin: 0 .6rem 1rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--accent); }
    nav.tabs .side { display: grid; gap: .1rem; }
    nav.tabs .side h2 { margin: 1.2rem .6rem .3rem; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
    nav.tabs button { flex: none; max-width: none; flex-direction: row; justify-content: flex-start; gap: .7rem; padding: .5rem .6rem; border-radius: 10px; font-size: .95rem; font-weight: 500; color: var(--ink); text-align: left; }
    nav.tabs button .icon { width: 1.2rem; height: 1.2rem; color: var(--muted); }
    nav.tabs button > span:not(.pictured):not(.count):not(.how-many) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    nav.tabs button.chosen, nav.tabs button.chosen:hover:not(:disabled) { background: var(--soft); color: var(--accent); font-weight: 600; }
    nav.tabs button.chosen .icon { color: var(--accent); }
    nav.tabs button.chosen.within, nav.tabs button.chosen.within:hover:not(:disabled) { background: transparent; color: var(--ink); font-weight: 500; }
    nav.tabs button.chosen.within .icon { color: var(--muted); }
    nav.tabs .pictured { display: contents; }
    nav.tabs .pictured .count, nav.tabs .side .count { position: static; order: 3; margin-left: auto; font-size: .75rem; box-shadow: none; }
    nav.tabs .how-many { margin-left: auto; color: var(--muted); font-size: .85rem; font-weight: 400; font-variant-numeric: tabular-nums; }
    /* The page as a dialog. */
    .veil.over { display: grid; place-items: center; padding: 2rem 2rem 2rem 18rem; background: color-mix(in srgb, #000 40%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: dimming .15s ease; }
    .sheet { width: min(42rem, 100%); max-height: calc(100vh - 4rem); box-sizing: border-box; overflow-y: auto; margin: 0; padding: .5rem 1.5rem 1.5rem; border-radius: 20px; background: var(--ground); box-shadow: 0 24px 60px -12px rgb(0 0 0 / .45); animation: arriving .18s ease; }
}

/* The logo, beside the name wherever the name is said. */
.logo { width: 1.3em; height: 1.3em; border-radius: 26%; vertical-align: -.28em; margin-right: .15em; }
main.signing-in h1 .logo { width: 1.5em; height: 1.5em; display: block; margin: 0 auto .6rem; }

/* "New" at the top of a list, and Refresh beside the heading, as near what it fetches as it can be. */
.new { margin: 0 0 1rem; }
.new button { padding: .5rem 1.1rem; }
main { position: relative; }
main > .refresh { position: absolute; top: .15rem; right: 1.25rem; color: var(--muted); }
main.signing-in > .refresh { display: none; }
nav.tabs .date, nav.tabs .foot { display: none; }

/* A dialog with fields in it: capture, and Triage. */
.asks.wide { width: min(30rem, 100%); max-width: none; max-height: calc(100vh - 2.5rem); box-sizing: border-box; overflow-y: auto; padding: .5rem 1.25rem 1.1rem; }
.asks.wide h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.asks.wide ul.settings { box-shadow: none; background: var(--softer); margin-bottom: 1rem; }
.asks.wide .note { margin: .4rem 0 .9rem; font-size: .85rem; }
.asks.wide .problem { margin: 0 0 1rem; color: var(--due); }
.capturing > input { width: 100%; box-sizing: border-box; padding: .65rem .9rem; font-size: 1.05rem; }
.asks .decide.all { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 0 1rem; }
.asks .decide.all button { justify-content: flex-start; padding: .65rem .9rem; font-size: 1rem; border-radius: 14px; }

@media (min-width: 60rem) {
    /* The date and Sign out are on the menu, not across the top of every page. */
    header.top { padding-top: .6rem; min-height: 0; }
    header.top .date, header.top .signs-out { display: none; }
    nav.tabs .brand { margin-bottom: .2rem; }
    nav.tabs .date { display: block; margin: 0 .6rem 1rem; }
    nav.tabs .foot { display: block; margin: auto 0 0; padding-top: 1rem; }
    nav.tabs .foot button { width: 100%; color: var(--muted); }
    main > .refresh { top: .55rem; }
}

/* The Calendar's heading: the day's name, and at the far end of its line the ways to another day. They stop
   short of Refresh, which is in the corner. */
.day-head { display: flex; align-items: center; gap: .75rem; margin: .1rem 0 1rem; padding-right: 2.7rem; }
.day-head h1 { margin: 0; flex: 1; min-width: 0; }
.day-head .days { margin: 0; align-items: center; gap: .35rem; flex: none; }
.day-head .days input[type=date] { padding: .35rem .6rem; font-size: .9rem; }
@media (max-width: 34rem) {
    .day-head { flex-wrap: wrap; row-gap: .5rem; }
    .day-head .days { width: 100%; padding-right: 0; }
}

/* The Calendar in a wide window: the day's schedule on the left, what's planned and due on the right, and the
   day's history small beneath that. The page is let wider for it. */
.history h2 { font-size: .8rem; margin-top: 1.6rem; }
.history ul.cards { gap: .3rem; }
.history .card { padding: .3rem .75rem; border: 0; box-shadow: none; background: transparent; }
.history .title { font-size: .9rem; font-weight: 400; }
@media (min-width: 66rem) {
    main:has(.day-cols.two), header.top:has(+ main .day-cols.two) { max-width: 72rem; }
    .day-cols.two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 2rem; align-items: start; }
    .day-cols.two h2:first-child { margin-top: .4rem; }
}

/* The Calendar's day set out against the hours: a line for each hour, and each thing at a time a block from when
   it starts for as long as it lasts, side by side with what it overlaps. */
.day-head .parts[role=tablist] { margin: 0; flex: none; }
.day-head .parts[role=tablist] button { padding: .25rem .8rem; font-size: .85rem; }
.hours { --hour: 3.4rem; --gutter: 3.4rem; position: relative; height: calc(24 * var(--hour)); margin-top: .6rem; isolation: isolate; }
.hours .hour { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.hours .hour span { position: absolute; top: -.65em; left: 0; padding-right: .5rem; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--ground); }
.hours .block { position: absolute; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: 0; padding: .3rem .6rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); box-shadow: var(--lift); transition: box-shadow .12s ease; }
.hours .block .time { font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--muted); line-height: 1.2; }
.hours .block .title { font-size: .92rem; line-height: 1.25; }
.hours .block.short { flex-direction: row; align-items: center; gap: .5rem; padding-top: 0; padding-bottom: 0; }
.hours .block.moves { cursor: grab; user-select: none; -webkit-user-select: none; }
.hours .block.moving { cursor: grabbing; z-index: 3; opacity: .92; box-shadow: 0 12px 28px -8px rgb(0 0 0 / .5); transition: none; }
.hours .block.moving::after { content: attr(data-at); position: absolute; top: .25rem; right: .5rem; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
.hours .due-line { position: absolute; left: var(--gutter); right: 0; height: 0; border-top: 2px solid var(--due); z-index: 1; }
.hours .due-line span { position: absolute; right: 0; top: -1.35em; font-size: .75rem; font-weight: 600; color: var(--due); }
.hours .now-line { position: absolute; left: calc(var(--gutter) - .5rem); right: 0; height: 0; border-top: 2px solid var(--accent); z-index: 2; pointer-events: none; }
.hours .now-line::before { content: ""; position: absolute; left: -.3rem; top: -.35rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); }
@media (max-width: 34rem) { .day-head .parts[role=tablist] { order: 3; } }
/* Beside the hours, what's planned and due stays in view as the day is scrolled. */
@media (min-width: 66rem) { .day-cols.two.full .beside { position: sticky; top: 1rem; } }
.hours .block.moves { -webkit-touch-callout: none; }
.hours .block.moving { transform-origin: center; outline: 2px solid var(--accent); }
/* A block's lower edge, taken hold of to change how long it lasts: a little wider than it looks, for a finger. */
.hours .block .grip { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize; touch-action: none; }
.hours .block .grip::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 1.6rem; height: 3px; margin-left: -.8rem; border-radius: 3px; background: color-mix(in srgb, var(--accent) 60%, transparent); opacity: 0; transition: opacity .12s ease; }
.hours .block:hover .grip::after, .hours .block.stretching .grip::after { opacity: 1; }
@media (pointer: coarse) { .hours .block .grip { height: 16px; } .hours .block .grip::after { opacity: .8; } }
.hours .block.stretching { cursor: ns-resize; }
.hours .block.stretching::after { top: auto; bottom: .25rem; }

/* A week and a month of the Calendar. The page is let as wide as the window for them. */
@media (min-width: 60rem) { main:has(.week), main:has(.month), header.top:has(+ main .week), header.top:has(+ main .month) { max-width: none; } }
.day-head { flex-wrap: wrap; row-gap: .5rem; }
.week, .month { overflow-x: auto; }
/* What's stacked within the week (its day names over its hours, a block being moved over the rest) is stacked
   among itself only, so none of it is ever over a dialog opened above the page. */
.week { --gutter: 3.4rem; --hour: 3rem; min-width: 0; isolation: isolate; }
.week-row { display: grid; grid-template-columns: var(--gutter) repeat(7, minmax(6.2rem, 1fr)); gap: 0 4px; }
.week-row.names { position: sticky; top: 0; z-index: 4; padding: .3rem 0; background: var(--ground); }
.week .day-name { flex-direction: row; gap: .35rem; padding: .3rem .4rem; border-radius: 10px; background: transparent; color: var(--muted); font-size: .85rem; font-weight: 500; }
.week .day-name strong { color: var(--ink); font-size: 1.05rem; }
.week .day-name.today { background: var(--soft); color: var(--accent); }
.week .day-name.today strong { color: var(--accent); }
.week-row.untimed { padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.week-row.untimed ul, .month .cell ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; min-width: 0; }
.week-row.untimed li, .month .cell li { padding: .1rem .4rem; border-radius: 6px; background: var(--card); border: 1px solid var(--line); font-size: .78rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-row.untimed li.due, .month .cell li.due { color: var(--due); border-color: color-mix(in srgb, var(--due) 35%, transparent); }
.week-row.untimed li.due button.opens, .month .cell li.due button.opens { color: var(--due); }
.week-row.grid { margin-top: .7rem; }
.week .hours { --gutter: 0px; margin-top: 0; border-left: 1px solid var(--line); }
.week .hours.labels { border-left: 0; }
.week .hours.today { background: var(--softer); }
.week .hours .block { padding: .15rem .35rem; border-left-width: 3px; border-radius: 8px; }
.week .hours .block .title { font-size: .8rem; line-height: 1.2; }
.week .hours .block .time { font-size: .68rem; }
.week .hours .now-line { left: 0; }
.week .hours .due-line { left: 0; }
.month-row.names, .month-grid { display: grid; grid-template-columns: repeat(7, minmax(5.5rem, 1fr)); }
.month-row.names span { padding: .3rem .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.month-grid { border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.month .cell { min-height: 7.4rem; min-width: 0; padding: .25rem .3rem .35rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; gap: 2px; }
.month .cell.other { background: transparent; }
.month .cell.other .day-number { color: var(--muted); opacity: .7; }
.month .cell li { background: var(--softer); border-color: transparent; }
.month .cell li .time { color: var(--muted); font-variant-numeric: tabular-nums; }
.month .day-number { align-self: flex-start; min-width: 1.7rem; height: 1.7rem; padding: 0 .3rem; background: transparent; color: var(--ink); font-size: .85rem; font-weight: 600; }
.month .cell.today .day-number { background: var(--accent); color: var(--ground); }
.month .more { align-self: flex-start; padding: 0 .4rem; background: transparent; color: var(--muted); font-size: .75rem; font-weight: 500; }
/* At a desk the week needn't scroll sideways, so the days' names can stay at the top as the hours scroll. */
@media (min-width: 60rem) { .week { overflow-x: visible; } }
.hours .block.short .title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hours .block.short .title button.opens { white-space: nowrap; }
.week .hours .block.short { gap: .3rem; }
/* One line each in a week's top row and a month's days: the title is cut short with an ellipsis, never dropped. */
.week-row.untimed li, .month .cell li { display: flex; align-items: baseline; gap: .3rem; }
.week-row.untimed li button.opens, .month .cell li button.opens { display: block; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: inherit; }
.week-row.untimed li .sensitive, .month .cell li .sensitive { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* "New" is at the top right of every page that has one (Rich, 10 October 2026: "It's a key button and should be
   easy to find"), on the heading's line, with Refresh just left of it. Headings stop short of the pair. */
.new { position: absolute; top: .1rem; right: 1.25rem; margin: 0; z-index: 1; }
main:has(.new) > .refresh { right: 7.3rem; }
main:has(.new) > h1 { padding-right: 9.8rem; min-height: 2.6rem; }
main:has(.new) .day-head { padding-right: 9.8rem; }
@media (min-width: 60rem) { .new { top: .5rem; } }
@media (max-width: 34rem) { main:has(.new) .day-head { padding-right: 0; } main:has(.new) .day-head h1 { padding-right: 9.8rem; min-height: 2.6rem; } }

/* ---- Buttons, again (Rich, 10 October 2026: a big bold "Done" needs to be "obvious it's a primary button and not
   the same colour as the rest of the items"). The one thing most likely wanted is solid green; everything else is
   a quiet grey, so the green stands for one thing only. ---- */
:root { --plain: color-mix(in srgb, var(--ink) 8%, transparent); --plain-pressed: color-mix(in srgb, var(--ink) 15%, transparent); }
button { background: var(--plain); color: var(--ink); }
button:hover:not(:disabled) { background: var(--plain-pressed); }
button.chosen, button[type=submit], button.microsoft, button.main, .asks .go-ahead { background: var(--accent); color: var(--ground); }
button.quiet, button.plain, .back button { background: transparent; color: var(--accent); }
button.quiet:hover:not(:disabled), button.plain:hover:not(:disabled), .back button:hover:not(:disabled) { background: var(--plain); }
header.top .more button, nav.tabs .foot button, main > .refresh { color: var(--muted); }
nav.tabs button, nav.tabs button:hover:not(:disabled) { background: transparent; }
nav.tabs button:hover:not(:disabled) { background: var(--plain); }
@media (min-width: 60rem) { nav.tabs button.chosen, nav.tabs button.chosen:hover:not(:disabled) { background: var(--soft); } }
button.opens, ul.lists button, ul.actions button, ul.settings button.switch, ul.settings button.value { background: transparent; }
ul.settings button.value { color: var(--accent); }
.parts[role=tablist] { background: var(--plain); }
.parts[role=tablist] button, .parts[role=tablist] button:hover:not(:disabled) { background: transparent; }
.parts[role=tablist] button.chosen, .parts[role=tablist] button.chosen:hover:not(:disabled) { background: var(--card); color: var(--ink); }
.what select { background-color: var(--plain); color: var(--ink); }
.what select.chosen { background-color: var(--accent); color: var(--ground); }
.throws-away, ul.actions button.throws-away { color: var(--due); }
.month .day-number, .month .more, .week .day-name { background: transparent; }
.month .cell.today .day-number { background: var(--accent); color: var(--ground); }
.week .day-name.today { background: var(--soft); }

/* ---- A row's card (Rich: "so much white space on the right of each card, that I think we can afford some nicer UI
   for each one. Maybe different for each Tudu type"). On the left, a picture of what kind of thing it is, in that
   kind's own colour; then what it's called and where it belongs; at the far end, when it's for; and at the bottom
   right, following the eye across and down, what's to be done with it. ---- */
.card.row { --kind: var(--accent); grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .9rem; align-items: start; border-left: 3px solid color-mix(in srgb, var(--kind) 70%, transparent); }
.card.row.kind-event { --kind: #9B7BEA; } .card.row.kind-meeting { --kind: #5B9BE8; } .card.row.kind-appointment { --kind: #2FB3A6; }
.card.row.kind-goal { --kind: #E0A800; } .card.row.kind-project { --kind: #E8833A; } .card.row.kind-sleep { --kind: #7C86E8; } .card.row.kind-meal { --kind: #E86A9A; }
.card.row.kind-hidden { --kind: var(--muted); }
.card.row .kind { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 11px; background: color-mix(in srgb, var(--kind) 16%, transparent); color: var(--kind); }
.card.row .kind .icon { width: 1.25rem; height: 1.25rem; }
.card.row .about { display: grid; gap: .12rem; min-width: 0; }
.card.row .about .marks { gap: .9rem; }
.card.row .about .marks span { display: inline-flex; align-items: center; gap: .3em; }
.card.row .when { display: grid; gap: .25rem; justify-items: end; text-align: right; }
.card.row .when .type { padding: .05rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--kind) 16%, transparent); color: var(--kind); font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; }
.card.row .when .said { display: inline-flex; align-items: center; gap: .35em; padding: .15rem .6rem; border-radius: 999px; background: var(--plain); font-size: .85rem; font-variant-numeric: tabular-nums; }
.card.row .when .said.overdue { background: color-mix(in srgb, var(--due) 12%, transparent); font-weight: 600; }
.card.row .decide { grid-column: 2 / -1; justify-content: flex-end; margin-top: .35rem; }
.card.row.done .kind { opacity: .55; }
@media (max-width: 34rem) {
    .card.row { grid-template-columns: auto minmax(0, 1fr); }
    .card.row .when { grid-column: 2; justify-items: start; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
    .card.row .decide { grid-column: 1 / -1; }
}

/* A split button: the thing itself, and an arrow beside it for everything else, which drops down under it. */
.split { position: relative; display: inline-flex; }
.split button.main { padding: .4rem 1rem; border-radius: 999px 0 0 999px; font-size: .9rem; }
.split button.others { padding: .4rem .55rem; }
.split button.main.others { border-radius: 0 999px 999px 0; margin-left: 1px; }
.split.alone button.others { border-radius: 999px; padding: .4rem .7rem; }
.split .menu-shade { position: fixed; inset: 0; z-index: 4; }
.split .menu { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 5; display: grid; min-width: 13.5rem; padding: .3rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 18px 40px -10px rgb(0 0 0 / .45); animation: arriving .12s ease; }
.split .menu button { justify-content: flex-start; gap: .65rem; padding: .55rem .7rem; border-radius: 9px; background: transparent; font-size: .95rem; font-weight: 500; }
.split .menu button .icon { color: var(--muted); }
.split .menu button:hover:not(:disabled) { background: var(--plain); }
.split .menu button.throws-away .icon { color: var(--due); }

/* ---- On a phone, the menu (Rich, 10 October 2026): a button at the top left slides in everything the side menu has
   at a desk. The four tabs stay along the foot. The date and Sign out are in it, not across every page. ---- */
header.top { gap: .35rem; padding-top: .5rem; }
header.top .menu-opens { margin-left: -.45rem; color: var(--ink); }
header.top .menu-opens .icon { width: 1.35rem; height: 1.35rem; }
header.top .brand-small { display: inline-flex; align-items: center; font-weight: 700; letter-spacing: -.01em; color: var(--accent); }
.drawer-shade { position: fixed; inset: 0; z-index: 8; background: rgb(0 0 0 / .5); animation: dimming .15s ease; }
.drawer { position: fixed; inset: 0 auto 0 0; z-index: 9; box-sizing: border-box; width: min(19rem, 86vw); display: flex; flex-direction: column; overflow-y: auto; padding: 1rem .75rem calc(1.25rem + env(safe-area-inset-bottom)); background: var(--card); box-shadow: 12px 0 40px -12px rgb(0 0 0 / .5); animation: sliding .18s ease; }
@keyframes sliding { from { transform: translateX(-100%); } }
.drawer .brand { display: flex; align-items: center; gap: .2rem; margin: 0 0 .2rem .6rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--accent); }
.drawer .brand .shut { margin-left: auto; color: var(--muted); }
.drawer .date { margin: 0 .6rem 1rem; }
.drawer .side { display: grid; gap: .1rem; }
.drawer .side h2 { margin: 1.1rem .6rem .3rem; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.drawer .side button, .drawer .foot button { justify-content: flex-start; gap: .75rem; width: 100%; padding: .7rem .6rem; border-radius: 10px; background: transparent; color: var(--ink); font-size: 1rem; font-weight: 500; text-align: left; }
.drawer .side button:hover:not(:disabled), .drawer .foot button:hover:not(:disabled) { background: var(--plain); }
.drawer .side button .icon, .drawer .foot button .icon { width: 1.25rem; height: 1.25rem; color: var(--muted); }
.drawer .side button > span:not(.count):not(.how-many) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.drawer .side button.chosen { background: var(--soft); color: var(--accent); font-weight: 600; }
.drawer .side button.chosen .icon { color: var(--accent); }
.drawer .side .how-many { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.drawer .foot { margin: auto 0 0; padding-top: 1rem; }
.drawer .foot button { color: var(--muted); }
@media (min-width: 60rem) { .drawer, .drawer-shade, header.top .menu-opens, header.top .brand-small { display: none; } }

/* ---- How lists move (motion.js). A row marked Done answers at once: its tile fills with green and its tick is
   drawn; as it goes, the whole card is washed green. ---- */
.card.row.doing .kind, .card.row.just-done .kind { background: var(--accent); color: var(--ground); transition: background-color .15s ease, color .15s ease; }
.card.row.doing .kind .icon, .card.row.just-done .kind .icon { animation: ticking .35s ease-out; }
.card.row.doing .split button.main { transform: scale(.97); }
.card.row.just-done { background: color-mix(in srgb, var(--accent) 22%, var(--card)); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.card.row.just-done .title { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 50%, transparent); }
@keyframes ticking { 0% { transform: scale(.4) rotate(-20deg); opacity: .2; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
ul.cards.leaving { list-style: none; padding: 0; }

/* ---- A fuller card (Rich, 10 October 2026: "the cards can show more information by default too, almost as much as
   the previews show in the device apps"): the start of its notes, where it is, who it involves and how to reach
   them, and what's attached, each attachment opening when pressed. ---- */
.card.row .notes-shown { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; margin-top: .15rem; white-space: pre-line; overflow-wrap: anywhere; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.card.row .place { display: flex; align-items: baseline; gap: .35em; margin-top: .15rem; font-size: .9rem; }
.card.row .place .icon { color: var(--muted); align-self: center; }
.card.row .place .address { color: var(--muted); }
.card.row .place .address::before { content: "· "; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: .35em; max-width: 100%; box-sizing: border-box; padding: .18rem .65rem; border: 0; border-radius: 999px; background: var(--plain); color: var(--ink); font-size: .82rem; font-weight: 500; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.chip > span { overflow: hidden; text-overflow: ellipsis; }
.chip .icon { color: var(--muted); }
a.chip, button.chip { color: var(--accent); cursor: pointer; }
a.chip .icon, button.chip .icon { color: var(--accent); }
a.chip:hover, button.chip:hover:not(:disabled) { background: var(--soft); }

/* A card's photos, small: each a square that opens the photo when pressed. Until it's fetched, and if it can't
   be, the square says the photo's name. */
.thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .45rem; }
.thumb { position: relative; width: 4.5rem; height: 4.5rem; padding: 0; overflow: hidden; border-radius: 12px; background: var(--plain); border: 1px solid var(--line); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s ease; }
.thumb.shown img { opacity: 1; }
.thumb .unfetched { display: grid; justify-items: center; gap: .15rem; padding: .3rem; color: var(--muted); font-size: .6rem; font-weight: 500; line-height: 1.2; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.thumb .unfetched > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.thumb.shown .unfetched { visibility: hidden; }
.thumb:hover:not(:disabled) { border-color: var(--accent); }

/* Only the hours awake are set out (--from, --shown), where the day says when those are. Everything on the grid
   is still placed by its time of day, and the whole of it is drawn up by the hours left off the top. */
.hours { height: calc(var(--shown, 24) * var(--hour)); overflow: hidden; }
.hours > * { margin-top: calc(var(--from, 0) * -1 * var(--hour)); }

/* Settings: "Your day", in sections, each a card of rows as on a Tudu's page. */
h3 { margin: 1.3rem 0 .5rem; font-size: 1rem; font-weight: 600; }
.new-one.adds { display: flex; flex-wrap: wrap; gap: .4rem; }
ul.settings + ul.settings { margin-top: .6rem; }
main:has(> h1 + .problem) > .refresh, main:has(.back + h1) > .refresh { top: .15rem; }
nav.tabs .foot button, .drawer .foot button { justify-content: flex-start; }
@media (min-width: 60rem) { nav.tabs .foot { display: grid; gap: .1rem; } nav.tabs .foot button.chosen { background: var(--soft); color: var(--accent); } }
ul.settings button.value.throws-away { color: var(--due); background: transparent; }
.asks button.deletes { background: var(--due); color: #fff; }
.asks button.deletes:hover:not(:disabled) { background: color-mix(in srgb, var(--due) 85%, #000); }
ul.settings.actions + ul.settings.actions { margin-top: .6rem; }

/* An empty place on the Calendar is pressed to capture there: the pointer says so, and the place answers. */
.hours:not(.labels) { cursor: cell; }
.hours .block { cursor: pointer; }
.hours .block.moves { cursor: grab; }
.month .cell { cursor: cell; }
.month .cell:hover { background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.month .cell ul, .month .cell button { cursor: pointer; }

/* The Calendar's filter: a funnel, filled while it's hiding anything, and a menu of switches under it. */
.split.filter { flex: none; }
.split.filter > button.hiding { background: var(--soft); color: var(--accent); }
.split.filter > button.hiding .icon { fill: currentColor; }
.split .menu .menu-heading { padding: .45rem .7rem .3rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.split .menu button.switch { justify-content: space-between; gap: 1.2rem; white-space: nowrap; }
.split .menu button.switch::after { content: ""; flex: none; width: 2.3rem; height: 1.35rem; border-radius: 999px; background-color: color-mix(in srgb, var(--muted) 40%, transparent); background-image: radial-gradient(circle at .68rem 50%, #fff .48rem, transparent .52rem); transition: background-color .15s ease; }
.split .menu button.switch[aria-checked=true]::after { background-color: var(--accent); background-image: radial-gradient(circle at calc(100% - .68rem) 50%, #fff .48rem, transparent .52rem); }
.split.filter .menu { min-width: 19rem; max-width: calc(100vw - 2rem); }
@media (max-width: 34rem) { .split.filter .menu { right: auto; left: 0; } }

/* Signing in by email, and the ways of signing in, in Settings. */
form.by-email { display: grid; gap: .6rem; width: min(20rem, 100%); text-align: left; }
form.by-email .note { margin: 0; }
/* On the page for signing in, email is one more button like the others; pressed, its field and button are in its
   place and its shape: as wide, as tall, the same corners and outline. Nothing on the page is filled. */
main.signing-in form.by-email { width: min(22rem, 100%); max-width: none; gap: .75rem; text-align: center; }
main.signing-in form.by-email.bare label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
main.signing-in form.by-email input { box-sizing: border-box; width: 100%; height: 3.1rem; padding: 0 1rem; border-radius: 8px; font-size: 1.1rem; border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
main.signing-in form.by-email input:focus { border-color: var(--accent); }
main.signing-in form.by-email button[type=submit] { width: 100%; height: 3.1rem; padding: 0 1.5rem; border-radius: 8px; font-weight: 500; font-size: 1.1rem;
    background: var(--card); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
main.signing-in form.by-email button[type=submit]:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 5%, var(--card)); }
main.signing-in form.by-email button[type=submit]:active:not(:disabled) { background: color-mix(in srgb, var(--ink) 11%, var(--card)); }
main.signing-in form.by-email { margin-bottom: .75rem; }
main.signing-in form.by-email button.quiet { justify-self: center; border: 0; padding: .4rem .6rem; }
main.signing-in form.by-email .note { margin: 0 0 .25rem; }
main.signing-in .problem { max-width: 22rem; }
main.signing-in .public-links { margin-top: 2.5rem; color: var(--muted); font-size: .85rem; }
main.signing-in .public-links a { color: inherit; }
.adding { margin-top: .6rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.adding p { margin: .5rem 0 0; }

/* What takes the whole day, above the hours it would otherwise cover. */
ul.all-day { list-style: none; margin: .4rem 0 0; padding: 0 0 0 var(--gutter, 3.4rem); display: flex; flex-wrap: wrap; gap: .3rem; }
ul.all-day li { padding: .15rem .6rem; border-radius: 8px; font-size: .85rem; background: var(--card); border: 1px solid var(--line); }

/* Connected calendars (ADR 0021): a Tudu from one is read here and isn't the Account's own, so it's drawn quieter:
   a dashed edge, no lift, and its calendar's own colour where it has one. It can't be dragged. */
.elsewhere { --its: var(--tint, var(--muted)); }
/* Whose calendar it's from: its mark in the top corner, in the calendar's own colour, with room left for it. */
ul.all-day li.elsewhere, .week-row.untimed li.elsewhere, .month .cell li.elsewhere, .card.elsewhere { position: relative; }
.elsewhere .from { position: absolute; top: .3rem; right: .35rem; width: .7rem; height: .7rem; fill: var(--its); opacity: .8; pointer-events: auto; }
.elsewhere:has(.from) .title, ul.all-day li.elsewhere:has(.from), .week-row.untimed li.elsewhere:has(.from), .month .cell li.elsewhere:has(.from) { padding-right: 1.15rem; }
.month .cell li.elsewhere .from, .week-row.untimed li.elsewhere .from { top: 50%; translate: 0 -50%; width: .6rem; height: .6rem; }
a.opens-elsewhere { color: inherit; text-decoration: none; }
a.opens-elsewhere:hover, a.opens-elsewhere:focus-visible { text-decoration: underline; }
.hours .block.elsewhere { cursor: default; border: 1px dashed color-mix(in srgb, var(--its) 55%, transparent); border-left: 4px solid var(--its); background: color-mix(in srgb, var(--its) 10%, var(--card)); box-shadow: none; }
.week .hours .block.elsewhere { border-left-width: 3px; }
/* Shown there as free or only pencilled in: lighter still. */
.hours .block.elsewhere.loose { background: color-mix(in srgb, var(--its) 4%, var(--card)); border-left-style: dashed; }
.hours .block.elsewhere .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hours .block.elsewhere.short .title { white-space: nowrap; }
ul.all-day li.elsewhere, .week-row.untimed li.elsewhere, .month .cell li.elsewhere, .card.elsewhere { border: 1px dashed color-mix(in srgb, var(--its) 55%, transparent); border-left: 3px solid var(--its); background: color-mix(in srgb, var(--its) 10%, var(--card)); box-shadow: none; }
.week-row.untimed li.elsewhere a, .week-row.untimed li.elsewhere > span, .month .cell li.elsewhere a, .month .cell li.elsewhere > span:not(.time) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
p.note.unread { margin: 0 0 .75rem; font-size: .9rem; }
ul.settings li .ends { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }