/* 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); }
/* A Place on Browse → Places: its name, its address under it (#522). */
ul.lists .file { display: grid; gap: .1rem; }
ul.lists .file .said { font-size: .85rem; 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; }
/* An edge of Sleep or a meal, pressed to move that one day's: read as the line it is, until pointed at. */
.day .line button.moves-one { color: inherit; font: inherit; padding: 0 .3rem; margin-left: -.3rem; border: 0; min-height: 0; }
.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; }
/* A link among a page's actions, as they are: Directions, on a Place's page. */
.new-one a.plain { display: inline-block; color: var(--accent); font-weight: 500; text-decoration: none; padding: .3rem 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; }
/* What the maps found: its name, its address under it, the whole of it pressed to give it. */
ul.settings button.found { display: grid; justify-items: start; text-align: left; width: 100%; gap: .1rem; overflow-wrap: anywhere; }
ul.places input { flex: 1; min-width: 0; }
/* Your Places, before what the maps find (#522): Recent, then All Places, each under its heading. */
ul.places li.heading { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
ul.settings button.starts { margin-left: 0; padding-left: 0; }
ul.settings a.directions { color: var(--accent); font-size: .9rem; white-space: nowrap; }

/* 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; }
/* Outside the app, the binder; inside it, the pages (decisions log, 14 October 2026: Rich's planner had a burgundy
   binder and green and white pages). The page for signing in and the public pages (html.binder) take the logo's
   claret and cream in place of the green: its ground a warm white, its words a red-brown ink, claret where the app
   has green. Everything they draw is from these, so redefining them here is all it takes. */
html:has(main.signing-in), html.binder {
    --ground: #FAF7F5; --card: #FFFFFF; --ink: #22181B; --muted: #75696C; --accent: #5C1428; --on-accent: #F6E9D6;
    /* A button into the app is the app's own green, so the logo is the one claret thing on the page. */
    --go: #3E7B4F; --on-go: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
    html:has(main.signing-in), html.binder { --ground: #130E10; --card: #20181B; --ink: #F2E9E4; --muted: #A3979A; --accent: #D98B9A; --on-accent: #130E10; --go: #7CC690; --on-go: #111914; }
}
html:has(main.signing-in), html.binder {
    --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);
    --plain: color-mix(in srgb, var(--ink) 8%, transparent); --plain-pressed: color-mix(in srgb, var(--ink) 15%, transparent);
}
html:has(main.signing-in), body:has(main.signing-in) { background: var(--ground); }
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; }
/* Contexts, People and Places at the side (#522): each with an arrow showing what's in it, set in under it, and what a
   Tudu dragged from the Calendar is over, picked out. */
.side .group { display: flex; align-items: center; }
.side .group > button:first-child { flex: 1; min-width: 0; }
.side button.unfolds { flex: none; width: 2rem; padding: .4rem; justify-content: center; }
.side button.unfolds .icon { width: 1rem; height: 1rem; }
.side button.inside { padding-left: 2.5rem; font-size: .9rem; font-weight: 400; }
/* A Folder inside a Folder, shown at the side while a Tudu is dragged: a step further in for each. */
.side button.inside[style*="--depth"] { padding-left: calc(2.5rem + var(--depth) * 1rem); }
.side button.inside.over { background: var(--soft); outline: 2px dashed var(--accent); outline-offset: -2px; }

/* 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; }
    /* Folded to its pictures (19 October 2026): a strip as wide as one, each named when pointed at (titles set by motion.js
       from what it says), with the button to open it again where the name was. */
    nav.tabs .brand { display: flex; align-items: center; gap: .2rem; }
    nav.tabs .brand .folds { margin-left: auto; width: 2rem; height: 2rem; padding: 0; display: grid; place-content: center; color: var(--muted); }
    nav.tabs .brand .folds .icon { width: .95rem; height: .95rem; }
    body:has(nav.tabs.folded) { padding-left: 4.25rem; }
    nav.tabs.folded { width: 4.25rem; padding: 1.1rem .45rem 1.5rem; }
    nav.tabs.folded .brand { flex-direction: column; margin: 0 0 1rem; }
    nav.tabs.folded .brand .wordmark, nav.tabs.folded .date, nav.tabs.folded .side h2, nav.tabs.folded .count, nav.tabs.folded .how-many { display: none; }
    nav.tabs.folded .brand .folds { margin: .4rem 0 0; }
    nav.tabs.folded button { font-size: 0; justify-content: center; padding: .55rem 0; gap: 0; }
    nav.tabs.folded button > span:not(.pictured) { display: none; }
    nav.tabs.folded button > svg.icon:not(:first-of-type) { display: none; }
    nav.tabs.folded .side button.sub, nav.tabs.folded .side .sub { padding-left: 0; }
    body:has(nav.tabs.folded) .veil.over { padding-left: 6.25rem; }
    /* 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; }
/* The name itself, wherever it's the logo's: the wordmark, "tudutu" in Lexend Bold drawn as outlines (so no font is
   fetched for it), in dark grey (Rich, 15 October 2026), a light grey on a dark ground, inside the app and out.
   Its height is about a capital's, sat on the line. */
.wordmark { display: inline-block; height: .74em; aspect-ratio: 3008 / 751; vertical-align: -.02em; background: #3A3A3C;
    -webkit-mask: url(../wordmark.svg) center / contain no-repeat; mask: url(../wordmark.svg) center / contain no-repeat; }
@media (prefers-color-scheme: dark) { .wordmark { background: #E3E3E5; } }
.logo + .wordmark { margin-left: .15em; }

/* "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; }
/* Triage's way to its page: a quiet line under the decisions, its words close under it. */
.asks.wide .more-first { margin: .9rem 0 0; }
.asks.wide .more-first + .note { margin-top: .1rem; }
.asks.wide .problem { margin: 0 0 1rem; color: var(--due); }
.capturing > input, .capturing > .with-emoji > 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); }
/* A period of the day (Work, a meal, a Named period): a faint band behind the blocks, its name at its top, never in
   the way of what's dropped on the hours. */
.hours .band { position: absolute; box-sizing: border-box; z-index: 0; pointer-events: none; background: color-mix(in srgb, var(--accent) 6%, transparent); border-top: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.hours .band .band-name { pointer-events: auto; display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: .1rem .5rem; font-size: .75rem; color: var(--muted); }
.hours .band .band-name .time { font-variant-numeric: tabular-nums; margin-left: .3rem; }
.hours .block { z-index: 1; }
.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); }
/* A Tudu's menu, where it was right-clicked (19 October 2026): the split button's menu, at the pointer. */
.menu-shade.pressed { position: fixed; inset: 0; z-index: 4; }
.menu.pressed { position: fixed; z-index: 5; display: grid; min-width: 13.5rem; max-width: 16rem; 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; }
.menu.pressed button { justify-content: flex-start; gap: .65rem; padding: .55rem .7rem; border-radius: 9px; background: transparent; color: var(--ink); font-size: .95rem; font-weight: 500; text-align: left; }
.menu.pressed button .icon { color: var(--muted); }
.menu.pressed button:hover:not(:disabled) { background: var(--plain); }
.menu.pressed button.throws-away { color: var(--due); background: transparent; border-color: transparent; margin-top: .25rem; }
.menu.pressed button.throws-away .icon { color: var(--due); }
.menu.pressed button.throws-away:hover:not(:disabled) { background: color-mix(in srgb, var(--due) 10%, transparent); }

/* ---- 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; }

/* Planning a week (16 October 2026): beside the week in a wide window, what's on the To-do List with no day or
   time yet, kept in view as the hours scroll; dragged onto a day or a time on it. In a narrow window there's no
   room for it, nor a mouse to drag with, and the week is as it was. */
.planning { display: block; }
.to-plan { display: none; }
@media (min-width: 60rem) {
    .planning { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0 1rem; align-items: start; }
    .planning .week-row { grid-template-columns: var(--gutter) repeat(7, minmax(5rem, 1fr)); }
    .to-plan { display: block; position: sticky; top: .5rem; max-height: calc(100vh - 1rem); overflow-y: auto; padding: .2rem .7rem .6rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); box-sizing: border-box; }
}
.to-plan h2 { font-size: .95rem; margin: .5rem 0 .2rem; }
.to-plan h3 { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: .8rem 0 .3rem; }
.to-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.to-plan li { padding: .3rem .5rem; border-radius: 8px; border: 1px solid var(--line); background: var(--ground); font-size: .85rem; line-height: 1.3; cursor: grab; overflow: hidden; text-overflow: ellipsis; }
.to-plan li button.opens { font-size: inherit; text-align: left; }
.to-plan .note { font-size: .8rem; }
.to-plan .what { margin: .3rem 0; }
.to-plan .what button { font-size: .78rem; padding: .2rem .55rem; }
.to-plan-goal { width: 100%; font-size: .85rem; margin: .2rem 0 .1rem; }
[data-plans] { cursor: grab; }
[data-plans].dragged { opacity: .45; }
.to-plan.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.week-row.untimed ul { min-height: 1.6rem; border-radius: 6px; }
.week-row.untimed ul.over { outline: 2px dashed var(--accent); outline-offset: 1px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.week .hours.over { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.hours .drop-at { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--accent); z-index: 3; pointer-events: none; }
.hours .drop-at::after { content: attr(data-at); position: absolute; top: .1rem; left: .3rem; font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }
/* A block dragged to another day is drawn over the days beside its own: its day's hours are cut off above and
   below only, and are above the others while it's moved. */
.week .hours { overflow-x: visible; overflow-y: clip; }
.week .hours:has(.block.moving) { z-index: 3; }

/* The day against the hours (#521): Planned takes a block dragged off the hours, and what's on it is dragged onto them. */
.day-cols ul.planned { min-height: 2.6rem; border-radius: 10px; }
.day-cols ul.planned li[data-plans] { cursor: grab; }
.day-cols ul.planned.over { outline: 2px dashed var(--accent); outline-offset: 2px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.day-cols ul.planned li.note { list-style: none; color: var(--muted); font-size: .85rem; padding: .4rem .2rem; }
.day-cols .schedule .hours.over { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* Roles (05 §0.17, #518): a Role's colour in its shades for the light and the dark, given as --role-light and
   --role-dark wherever it's drawn; on a card it takes the bar down its edge, and the Type keeps its picture. */
[style*="--role-light"] { --role: var(--role-light); }
@media (prefers-color-scheme: dark) { [style*="--role-light"] { --role: var(--role-dark); } }
.card.row.has-role { border-left-color: var(--role); }
ul.lists .role-dot { display: inline-block; vertical-align: -.05em; width: .75rem; height: .75rem; margin-right: .7rem; border-radius: 50%; border: 1.5px solid var(--accent); box-sizing: border-box; }
ul.lists .role-dot[style] { background: var(--role); border-color: var(--role); }
.colours { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 0; padding: .75rem 1rem; background: var(--card); border-radius: 14px; }
.colours .swatch { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; border: 0; background: var(--role); }
.colours .swatch.none { background: transparent; border: 1.5px dashed var(--muted); }
.colours .swatch[aria-checked=true] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.colours .more-colours { display: inline-flex; align-items: center; gap: .35rem; margin-left: .4rem; color: var(--accent); font-weight: 500; cursor: pointer; }
.colours .more-colours input { width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.why { margin: 0; }
.why input { width: 100%; box-sizing: border-box; border-color: transparent; }
ul.settings.log { margin-top: .6rem; }
ul.settings.log .entry { display: grid; gap: .1rem; justify-items: start; justify-content: start; font-weight: 400; flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); text-align: left; overflow-wrap: anywhere; }
ul.settings.log .entry .said { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; }
ul.settings.log .review { display: inline-flex; align-items: center; gap: .25rem; color: var(--accent); font-weight: 600; }
ul.settings.log .review .icon { width: .95rem; height: .95rem; }
ul.settings.log li > input { flex: 1; margin-left: 0; }
ul.settings.log form.inline { align-items: center; }
ul.settings.log form.inline > .icon { color: var(--accent); flex: none; }
ul.settings.log form.inline input { border-color: transparent; padding-left: .2rem; }
.colours .more-colours input::-webkit-color-swatch-wrapper { padding: 0; }
.colours .more-colours input::-webkit-color-swatch { border: 1.5px solid var(--muted); border-radius: 50%; }
.colours .more-colours input::-moz-color-swatch { border: 1.5px solid var(--muted); border-radius: 50%; }

/* Showing one Role (05 §0.17): the Role button beside the page's own controls, and "Only Father" under the heading. */
.parts-row { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.parts-row .parts { margin: 0; }
.parts-row .role-button { margin-left: auto; }
.role-button .menu { min-width: 14rem; }
.role-button .menu button[aria-checked=true]::after { content: "✓"; margin-left: auto; color: var(--accent); font-weight: 700; }
.role-button .role-dot, .role-button .role-dot { flex: none; width: .75rem; height: .75rem; border-radius: 50%; border: 1.5px solid var(--accent); box-sizing: border-box; }
.role-button .role-dot[style] { background: var(--role); border-color: var(--role); }
.role-button .role-dot.all { border-style: dashed; border-color: var(--muted); }
.only-role { margin: -.4rem 0 1rem; }
.only-role button { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem .25rem .8rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
    --role: var(--accent); background: color-mix(in srgb, var(--role) 16%, transparent); color: var(--ink); }
.only-role button[style*="--role-light"] { --role: var(--role-light); }
@media (prefers-color-scheme: dark) { .only-role button[style*="--role-light"] { --role: var(--role-dark); } }
.only-role button .icon { width: .95rem; height: .95rem; color: var(--muted); }
/* On the Calendar, too, a Tudu's Role's colour takes the bar down its edge. */
.hours .block.has-role { border-left-color: var(--role); }
.card.has-role:not(.row), ul.all-day li.has-role, .week-row.untimed li.has-role, .month .cell li.has-role { border-left: 3px solid var(--role); }
.to-plan li.has-role { border-left: 3px solid var(--role); }

/* "New" (05 §0.13; 18 October 2026, as drawn on the design canvas Rich chose): its title, what's to hand to add
   (Photo, Record, File, Link), what's added as a list, the recorder, what it is, the fields, Advanced's tabs. */
.asks.wide.capturing { --field: var(--softer); --edge: color-mix(in srgb, var(--muted) 24%, transparent); --stop: #C62828; display: flex; flex-direction: column; gap: 1rem; padding: 1.35rem 1.35rem 1.1rem; }
.asks.capturing > *, .asks.capturing .divided > * { margin: 0; }
.capturing > h2 { margin: 0; font-size: 1.25rem; }
.capturing > input.title, .capturing > .with-emoji > input.title { width: 100%; box-sizing: border-box; height: 3rem; padding: 0 .9rem; font-size: 1.05rem; border-radius: 12px; }
.asks.capturing .note { margin: -.55rem 0 0; font-size: .82rem; color: var(--muted); }
.capturing .divided { border-top: 1px solid var(--edge); padding-top: .9rem; display: flex; flex-direction: column; gap: 1rem; }
.capturing .what { margin: 0; gap: .45rem; }
.capturing .what button, .capturing .what select { font-size: .82rem; font-weight: 600; height: 2rem; padding: 0 .9rem; }

/* Photo · Record · File · Link: quiet outlined pills. */
:is(.capturing, .attaching) .to-hand { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
:is(.capturing, .attaching) .to-hand button { display: inline-flex; align-items: center; gap: .4rem; height: 2.25rem; padding: 0 .8rem; font-size: .88rem; font-weight: 500; color: var(--accent); background: var(--card); border: 1px solid var(--edge); border-radius: 999px; }
:is(.capturing, .attaching) .to-hand button:hover:not(:disabled) { background: var(--softer); }
:is(.capturing, .attaching) .to-hand button.chosen { background: var(--soft); border-color: transparent; }
:is(.capturing, .attaching) .to-hand .icon { width: 1rem; height: 1rem; }

/* What's added: one row each, its picture, its name with what it is under it, and its buttons at the end. */
.asks.capturing .added { text-align: left; border: 1px solid var(--edge); border-radius: 14px; background: var(--field); overflow: hidden; }
.capturing .added .item { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .6rem .75rem; }
.capturing .added .item + .item { border-top: 1px solid var(--edge); }
.capturing .added .thumb { width: 2.75rem; height: 2.75rem; border-radius: 8px; display: grid; place-items: center; background: var(--soft); color: var(--accent); object-fit: cover; }
.capturing .added .thumb .icon { width: 1.25rem; height: 1.25rem; }
.capturing .added .about { display: flex; flex-direction: column; gap: .15rem; min-width: 0; text-align: left; }
.capturing .added .name { font-size: .95rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capturing .added .said { font-size: .78rem; color: var(--muted); }
.capturing .added .line { display: flex; justify-content: space-between; gap: .5rem; }
.capturing .added .time { font-variant-numeric: tabular-nums; }
.capturing .added .progress { height: 6px; border-radius: 3px; background: var(--edge); overflow: hidden; margin-top: .3rem; }
.capturing .added .progress span { display: block; width: 0; height: 100%; background: var(--accent); }
.capturing .added .ends { display: flex; gap: .1rem; }
.capturing button.round { width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-items: center; color: var(--muted); background: transparent; }
.capturing button.round:hover { background: var(--plain); color: var(--ink); }
.capturing button.round .icon { width: 1rem; height: 1rem; }
.capturing .added .play { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--ground); }
.capturing .added .play .icon { width: 1rem; height: 1rem; }
.capturing .added .play .to-pause, .capturing .added .play.playing .to-play { display: none; }
.capturing .added .play.playing .to-pause { display: contents; }

/* Recording: red, with the time, the bars of what's just been heard, and Stop. */
:is(.capturing, .attaching) .recorder { display: flex; align-items: center; gap: .85rem; padding: .85rem .85rem .85rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--stop) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--stop) 28%, transparent); }
:is(.capturing, .attaching) .recorder .dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--stop); flex: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--stop) 18%, transparent); animation: pulsing .9s ease-in-out infinite alternate; }
@keyframes pulsing { from { opacity: 1; } to { opacity: .35; } }
:is(.capturing, .attaching) .recorder .heard { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
:is(.capturing, .attaching) .recorder .line { display: flex; align-items: baseline; gap: .5rem; }
:is(.capturing, .attaching) .recorder .said { font-weight: 600; font-size: .95rem; color: color-mix(in srgb, var(--stop) 75%, var(--ink)); }
:is(.capturing, .attaching) .recorder .time { font-size: .95rem; color: var(--muted); font-variant-numeric: tabular-nums; }
:is(.capturing, .attaching) .recorder .meter { display: flex; align-items: center; gap: 3px; height: 1.65rem; }
:is(.capturing, .attaching) .recorder .meter span { width: 4px; height: 4px; border-radius: 2px; background: var(--edge); transition: height .08s linear; }
:is(.capturing, .attaching) .recorder .meter span.heard { background: var(--accent); }
:is(.capturing, .attaching) .recorder .stop { display: inline-flex; align-items: center; gap: .45rem; height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: 999px; background: var(--stop); color: #fff; font-weight: 600; flex: none; }
:is(.capturing, .attaching) .recorder .stop .icon { width: .85rem; height: .85rem; }
.attaching { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }

.asks.capturing .microphone { display: flex; align-items: center; gap: .6rem; margin-top: -.5rem; font-size: .85rem; color: var(--muted); }
.capturing .microphone label { display: inline-flex; align-items: center; gap: .35rem; }
.capturing .microphone select { flex: 1; min-width: 0; font-size: .85rem; }
.capturing .typing-link { display: flex; gap: .5rem; align-items: center; }
.capturing .typing-link input { flex: 1; min-width: 0; }

/* The fields: one card, a label at the left of each row and what's chosen at its right. */
.capturing ul.settings { margin: 0; background: var(--field); border: 1px solid var(--edge); border-radius: 14px; box-shadow: none; }
.capturing ul.settings li { min-height: 3rem; }
.capturing ul.settings + .note { margin-top: -.55rem; }
.capturing .segments { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--soft); }
.capturing .segments button { height: 1.9rem; padding: 0 .8rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .85rem; font-weight: 500; }
.capturing .segments button.chosen { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .14); }
.capturing .times { display: inline-flex; align-items: center; gap: .45rem; }
.capturing .times .said { color: var(--muted); font-size: .85rem; }
.capturing .times .length { min-width: 3.2em; text-align: right; }
.capturing button.adds, .capturing select.adds { font-weight: 500; color: var(--accent); }
.capturing .chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .35rem; }
.capturing .person { display: inline-flex; align-items: center; gap: .15rem; height: 1.9rem; padding: 0 .2rem 0 .75rem; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: .88rem; font-weight: 500; }
.capturing .person button { width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-items: center; background: transparent; color: var(--muted); }
.capturing .person button .icon { width: .75rem; height: .75rem; }
.capturing li.someone-new input { flex: 1; min-width: 0; }

/* Advanced: its tabs as one switch across the dialog, the tab below it kept one height as they're changed. */
.capturing .tabs, .sheet > .tabs { display: grid; grid-template-columns: repeat(var(--tabs, 5), minmax(0, 1fr)); padding: 3px; margin: 0; border-radius: 999px; background: var(--soft); }
.capturing .tabs button, .sheet > .tabs button { height: 2.1rem; padding: 0 .3rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .88rem; font-weight: 500; }
.capturing .tabs button.chosen, .sheet > .tabs button.chosen { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / .14); }
.capturing .tab { min-height: 15rem; display: flex; flex-direction: column; gap: 1rem; }

.capturing .answers { display: flex; align-items: center; gap: .6rem; border-top: 1px solid var(--edge); padding-top: .9rem; }
.capturing .answers .advanced { margin-right: auto; display: inline-flex; align-items: center; gap: .4rem; }
.capturing .answers .plain { border: 0; background: transparent; color: var(--accent); font-weight: 500; padding: .5rem .5rem; }
.capturing .answers .go { height: 2.75rem; padding: 0 1.5rem; font-weight: 600; }

/* Notes written as they read (18 October 2026), in New and on a Tudu's page: the bar over the words, one box. */
.notes-editor { width: 100%; border: 1px solid color-mix(in srgb, var(--muted) 24%, transparent); border-radius: 14px; overflow: hidden; background: var(--card); }
.notes-editor:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.notes-editor .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: .35rem .5rem; background: var(--softer); border-bottom: 1px solid color-mix(in srgb, var(--muted) 18%, transparent); }
.notes-editor .bar button { min-width: 2rem; height: 2rem; padding: 0 .5rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink); display: inline-grid; place-items: center; }
.notes-editor .bar button:hover { background: var(--plain); }
.notes-editor .bar button.lit { background: var(--accent); color: var(--ground); }
.notes-editor .bar button .icon { width: 1rem; height: 1rem; }
.notes-editor .bar .sep { width: 1px; height: 1.25rem; background: color-mix(in srgb, var(--muted) 30%, transparent); margin: 0 .2rem; }
.notes-editor .linking { display: flex; gap: .4rem; align-items: center; margin: 0; padding: .5rem; border-bottom: 1px solid color-mix(in srgb, var(--muted) 18%, transparent); }
.notes-editor .linking input { flex: 1; min-width: 0; }
.notes-editor .written { min-height: 8rem; max-height: 22rem; overflow-y: auto; padding: .75rem .9rem; color: var(--ink); text-align: left; line-height: 1.5; outline: none; }
.notes-editor .written:empty::before { content: attr(data-placeholder); color: var(--muted); }
.notes-editor .written h1, .notes-editor .written h2, .notes-editor .written h3 { margin: .3rem 0; font-size: 1.1rem; }
.notes-editor .written ul, .notes-editor .written ol { margin: .2rem 0; padding-left: 1.4rem; }
.notes-editor .written blockquote { margin: .2rem 0; padding-left: .7rem; border-left: 3px solid var(--accent); color: var(--muted); }
.notes-editor .written a { color: var(--accent); }
.notes .notes-editor { justify-self: stretch; }

/* Not yet decided (18 October 2026): still in the In-tray, with a time, so on the Calendar but faded and said to be. */
.undecided { opacity: .6; border-style: dashed !important; box-shadow: none !important; }
.undecided::after { content: "Not yet decided"; display: block; font-size: .72rem; font-style: italic; font-weight: 500; color: var(--muted); }
.capturing .photos { display: flex; flex-wrap: wrap; gap: .5rem; }
.capturing .photos .tile { position: relative; width: 5.5rem; height: 5.5rem; border-radius: 12px; overflow: hidden; background: var(--soft); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.capturing .photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capturing .photos .off { position: absolute; top: .3rem; right: .3rem; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / .55); color: #fff; }
.capturing .photos .off:hover { background: rgb(0 0 0 / .75); }
.capturing .photos .off .icon { width: .75rem; height: .75rem; }
/* Notes on a card, as they read. */
.notes-shown h1, .notes-shown h2, .notes-shown h3 { font-size: 1em; margin: 0; }
.notes-shown ul, .notes-shown ol { margin: 0; padding-left: 1.2rem; }
.notes-shown blockquote { margin: 0; padding-left: .5rem; border-left: 2px solid var(--accent); }
.notes-shown a { color: var(--accent); }
.card.row .notes-shown { white-space: normal; }
/* A recording plays where it's shown: play, or pause while it plays. */
.plays { display: inline-flex; align-items: center; gap: .3rem; }
.plays .to-pause, .plays.playing .to-play { display: none; }
.plays.playing .to-pause { display: contents; }
.plays .time { font-variant-numeric: tabular-nums; }

/* Cards, as designed with Rich on 18 October 2026: what it is (or its photo) at the left, the title and one quiet line,
   notes, photos large enough to read at a glance, what's attached; how long it's waited at the right, with Triage, and
   pointed at, the decisions themselves. Compact: one line each. */
.card.row { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "kind about when" "kind about decide"; gap: .15rem .9rem; border-left-width: 0; }
.card.row.has-role { box-shadow: inset 3px 0 0 var(--role), 0 1px 2px rgb(0 0 0 / .05); }
.card.row > .kind { grid-area: kind; border-radius: 10px; width: 2.75rem; height: 2.75rem; }
.card.row > .about { grid-area: about; }
.card.row > .when { grid-area: when; }
.card.row > .decide { grid-area: decide; grid-column: decide; margin-top: 0; align-self: end; display: flex; gap: .35rem; justify-content: flex-end; }
.card.row .title { font-weight: 600; font-size: 1.02rem; }
.card.row .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .7rem; font-size: .84rem; font-weight: 500; color: var(--muted); }
.card.row .meta > span { display: inline-flex; align-items: center; gap: .3em; }
.card.row .meta .icon { width: .85em; height: .85em; }
.card.row .meta .type { color: var(--kind); font-weight: 600; }
.card.row .meta .overdue { color: var(--due); font-weight: 600; }
.card.row .notes-shown { -webkit-line-clamp: 2; line-clamp: 2; font-size: .88rem; color: color-mix(in srgb, var(--ink) 82%, transparent); margin-top: .3rem; }
.card.row .chips { margin-top: .45rem; gap: .35rem; }
.card.row .age { font-size: .78rem; font-weight: 500; color: var(--muted); white-space: nowrap; }

/* Photos, read at a glance: the first large, two more beside it, then how many more. */
.card.row .photos { display: grid; gap: .35rem; margin-top: .5rem; height: 10rem; max-width: 22rem; }
/* One photo whole, at its own shape (Rich: "The wider photos cut off too much of the top and bottom"). */
.card.row .photos.seen-1 { display: flex; height: auto; max-width: 100%; }
.card.row .photos.seen-1 .thumb { width: auto; height: auto; background: none; }
/* Until it's fetched, room for it, so it's seen to come into view and is fetched. */
.card.row .photos.seen-1 .thumb:not(.shown) { width: 14rem; height: 10rem; background: var(--soft); }
.card.row .photos.seen-1 .thumb img { position: static; width: auto; height: 10rem; max-width: min(32rem, 60vw); object-fit: contain; border-radius: 10px; }
.card.row .photos.seen-2 { grid-template-columns: 2fr 1fr; }
.card.row .photos.seen-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.card.row .photos.seen-3 .thumb:first-child { grid-row: 1 / span 2; }
.card.row .photos .thumb { position: relative; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--soft); }
.card.row .photos .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card.row .photos .thumb .unfetched { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.card.row .photos .thumb.shown .unfetched, .card.row .photos .thumb img[src] + .unfetched { display: none; }
.card.row .photos .more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .45); color: #fff; font-weight: 700; font-size: 1.1rem; }

/* Choosing several, a mode of its own: each card's box in a column at its left. */
.card.row.picking { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "pick kind about when" "pick kind about decide"; }
.card.row.picking > .pick { grid-area: pick; align-self: center; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.card.row.chosen { background: color-mix(in srgb, var(--accent) 10%, var(--card)); box-shadow: 0 0 0 2px var(--accent); }
.list-tools { float: right; display: flex; align-items: center; gap: .5rem; margin: -3.05rem 10rem 0 0; }
.list-tools > p { margin: 0; float: none; }
/* The To-do List's order and grouping by Type (19 October 2026): a menu, and a button that's on or off. */
.arranging { clear: both; display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; }
.arranging select { font-size: .85rem; padding: .25rem .6rem; }
.arranging button { font-size: .85rem; padding: .25rem .8rem; display: inline-flex; align-items: center; gap: .3rem; }
.choose-several button { font-size: .85rem; padding: .25rem .8rem; display: inline-flex; align-items: center; gap: .3rem; }

/* Triage, or pointed at, the decisions themselves. */
.card.row .decide .quick { display: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--softer); border: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); }
.card.row .decide .quick button { width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-items: center; background: transparent; color: var(--accent); }
.card.row .decide .quick button:hover { background: var(--soft); }
.card.row .decide .quick button.do { background: var(--accent); color: var(--ground); }
.card.row .decide .quick .icon { width: .95rem; height: .95rem; }
.card.row .decide .triage { font-size: .85rem; font-weight: 600; padding: .3rem .85rem; }
.card.row .decide .quick { position: absolute; right: .9rem; bottom: .75rem; z-index: 1; }
@media (hover: hover) {
    /* Pointed at, the decisions float over the card's corner, so nothing on it moves (Rich: "it makes the card bigger
       and makes the whole list move"), and how long it's waited steps aside meanwhile. */
    .card.row.choosable:not(.picking):hover .decide .quick, .card.row.choosable:not(.picking):focus-within .decide .quick { display: inline-flex; }
    .card.row.choosable:not(.picking):hover .decide .triage, .card.row.choosable:not(.picking):focus-within .decide .triage { visibility: hidden; }
    .card.row.choosable:not(.picking):hover > .when, .card.row.choosable:not(.picking):focus-within > .when { visibility: hidden; }
}

/* Compact: one line, the title then its quiet line, what it has as small pictures, and how long it's waited. */
.card.row.compact { grid-template-areas: "kind about when decide"; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; min-height: 3.25rem; box-sizing: border-box; padding-top: .45rem; padding-bottom: .45rem; gap: 0 .7rem; }
.card.row.compact.picking { grid-template-areas: "pick kind about when decide"; grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
.card.row.compact .decide .quick { bottom: auto; top: 50%; transform: translateY(-50%); right: .7rem; }
.card.row.compact .decide .quick button { width: 1.8rem; height: 1.8rem; }
.card.row.compact .meta .plays { border: 0; padding: .1rem .4rem; border-radius: 999px; background: var(--soft); color: var(--accent); font-size: .78rem; display: inline-flex; align-items: center; gap: .25rem; }
ul.cards:has(.compact) { gap: 0; border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
ul.cards:has(.compact) .card.row.compact { border-radius: 0; box-shadow: none; }
ul.cards:has(.compact) .card.row.compact + .card.row.compact { border-top: 1px solid color-mix(in srgb, var(--muted) 15%, transparent); }
.card.row.compact.has-role { box-shadow: inset 3px 0 0 var(--role); }
.card.row.compact > .kind { width: 1.8rem; height: 1.8rem; border-radius: 7px; grid-row: auto; }
.card.row.compact > .kind .icon { width: 1rem; height: 1rem; }
.card.row.compact > .kind.photo { overflow: hidden; padding: 0; }
.card.row.compact > .kind.photo img { width: 100%; height: 100%; object-fit: cover; }
.card.row.compact > .about { display: flex; align-items: baseline; gap: .7rem; min-width: 0; white-space: nowrap; }
.card.row.compact .title { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 60%; }
.card.row.compact .meta { flex-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.card.row.compact .meta .has { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.card.row.compact .decide .triage { display: none; }
.card.row.compact.chosen { box-shadow: none; }

/* The bar for what's chosen, at the foot. */
.chosen-bar { position: sticky; bottom: 1rem; z-index: 3; display: flex; flex-wrap: nowrap; align-items: center; gap: .3rem; width: fit-content; margin: 1rem auto 0; padding: .45rem .5rem .45rem 1rem; border-radius: 999px; background: var(--ink); color: var(--ground); box-shadow: 0 12px 30px -8px rgb(0 0 0 / .45); }
.chosen-bar .how-many { font-weight: 600; margin-right: .4rem; }
.chosen-bar button { border: 0; background: transparent; color: var(--ground); font-weight: 600; font-size: .9rem; padding: .45rem .8rem; display: inline-flex; align-items: center; gap: .35rem; }
.chosen-bar button:hover { background: color-mix(in srgb, var(--ground) 14%, transparent); }
.chosen-bar button.go { background: var(--accent); color: var(--ground); }
.chosen-bar .rest { display: inline-flex; margin-left: .4rem; padding-left: .4rem; border-left: 1px solid color-mix(in srgb, var(--ground) 25%, transparent); }

/* Normal or Compact, beside the heading. */
.parts.views { margin: 0; }
.parts.views button { font-size: .85rem; padding: .25rem .8rem; }

/* Compact, pointed at: the photo larger beside its row. */
.card.row.compact .peek { position: absolute; left: 3.4rem; top: .2rem; transform: scale(.96); transform-origin: top left; z-index: 4; width: 18rem; max-height: 14rem; border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: 0 16px 40px -10px rgb(0 0 0 / .45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease, transform .12s ease; }
.card.row.compact .peek img { display: block; width: 100%; height: auto; max-height: 14rem; object-fit: contain; }
@media (hover: hover) { .card.row.compact .kind.photo:hover + .peek { opacity: 1; visibility: visible; transform: scale(1); } }
.card.row.compact .peek ~ .about { position: relative; }
ul.cards:has(.compact) { overflow: visible; }
ul.cards:has(.compact) > .card.row.compact:first-child { border-radius: 14px 14px 0 0; }
ul.cards:has(.compact) > .card.row.compact:last-child { border-radius: 0 0 14px 14px; }
ul.cards:has(.compact) > .card.row.compact:only-child { border-radius: 14px; }
/* A photo shown large over the page (18 October 2026). */
.lightbox { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgb(10 16 12 / .86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: dimming .15s ease; }
.lightbox figure { margin: 0; display: grid; gap: .6rem; justify-items: center; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px -10px rgb(0 0 0 / .6); background: #222; min-width: 4rem; min-height: 4rem; }
.lightbox figcaption { display: flex; gap: 1.2rem; align-items: center; color: #e8eee9; font-size: .88rem; }
.lightbox figcaption a { color: #bfe6c9; }
.lightbox button { position: absolute; border: 0; border-radius: 50%; width: 2.8rem; height: 2.8rem; padding: 0; background: rgb(255 255 255 / .14); color: #fff; font-size: 1.7rem; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.lightbox button:hover { background: rgb(255 255 255 / .26); }
.lightbox .close { top: 1.2rem; right: 1.2rem; }
.lightbox .prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox button[hidden] { display: none; }
.card.row.compact > .kind.photo { border: 0; cursor: zoom-in; }
.card.row .photos .thumb { cursor: zoom-in; }

/* "Do it →" among the quick decisions: words and an arrow, wider than the rest. */
.card.row .decide .quick button.do { width: auto; padding: 0 .75rem; border-radius: 999px; gap: .35rem; font-weight: 600; font-size: .82rem; display: inline-flex; }
.card.row .decide .quick button.do .icon { width: .8rem; height: .8rem; }

/* Dragging a card (18 October 2026): where it would go is lit as it's held over it. */
nav.tabs [data-gives].over, .side [data-gives].over { background: var(--accent) !important; color: var(--ground) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
nav.tabs [data-gives].over .icon, .side [data-gives].over .icon, nav.tabs [data-gives].over .how-many, .side [data-gives].over .how-many { color: var(--ground) !important; }
body.dragging nav.tabs [data-gives], body.dragging .side [data-gives] { outline: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -2px; }
/* A card's Place, pressed: where it is, Directions, and what else is there. */
.card.row .meta .place-on { position: relative; }
.card.row .meta .place-name { border: 0; background: none; padding: 0; color: inherit; font: inherit; display: inline-flex; align-items: center; gap: .3em; cursor: pointer; text-decoration: underline dotted color-mix(in srgb, var(--muted) 60%, transparent); text-underline-offset: 3px; }
.card.row .meta .place-name:hover { color: var(--accent); }
.card.row .place-card { position: absolute; left: 0; top: calc(100% + .4rem); z-index: 6; display: grid; gap: .3rem; min-width: 15rem; max-width: 22rem; padding: .8rem .9rem; border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 0 14px 34px -8px rgb(0 0 0 / .35); font-size: .9rem; white-space: normal; }
.card.row .place-card .said { color: var(--muted); font-size: .84rem; }
.card.row .place-card .ways { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.card.row .place-card .ways a, .card.row .place-card .ways button { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; padding: .3rem .75rem; border-radius: 999px; text-decoration: none; }
.card.row .place-card .ways a.go { background: var(--accent); color: var(--ground); }
/* Compact, from the whole row, so its one line isn't opened up to show it. */
.card.row.compact .meta .place-on { position: static; }
.card.row.compact .place-card { left: 3rem; top: calc(100% - .2rem); }
/* The To-do List's bar has more in it than the In-tray's: kept within the column, wrapping if it must. */
.chosen-bar { max-width: 100%; flex-wrap: wrap; justify-content: center; border-radius: 22px; }
.chosen-bar .how-many { white-space: nowrap; }
.chosen-bar button { padding: .45rem .65rem; white-space: nowrap; }
/* The To-do List's and Waiting's cards, as the In-tray's (18 October 2026): at rest only a quiet ⋯; pointed at, Done and the
   rest float over the corner, and the ⋯ steps aside. On a screen with no pointer, the ⋯ is the way in. */
.card.row .decide .split.alone button.rest { background: transparent; color: var(--muted); padding: .3rem .5rem; }
.card.row .decide .split.alone button.rest:hover { background: var(--soft); color: var(--accent); }
@media (hover: hover) {
    .card.row.choosable:not(.picking):hover .decide button.rest, .card.row.choosable:not(.picking):focus-within .decide button.rest { visibility: hidden; }
    /* Its menu open, the floating buttons make way for it. */
    .card.row.choosable:has(.menu) .decide .quick { display: none !important; }
    .card.row.choosable:has(.menu) .decide button.rest { visibility: visible !important; }
}
/* New on Goals and Projects: why it matters, and first steps one a line. */
.capturing .settings li.why input.value { flex: 1; min-width: 0; max-width: 60%; text-align: right; border: 0; background: transparent; font: inherit; color: var(--ink); }
.capturing .first-steps-said { display: block; margin: .9rem 0 .35rem; font-size: .9rem; font-weight: 600; color: var(--muted); }
.capturing textarea.first-steps { width: 100%; box-sizing: border-box; resize: vertical; padding: .6rem .75rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font: inherit; color: var(--ink); }
/* On a phone the heading has no room beside it: Choose and Normal · Compact go on a line of their own under it. */
@media (max-width: 34rem) {
    .list-tools { float: none; margin: .1rem 0 .9rem; flex-wrap: wrap; }
}
/* Reference and its Folders (designed 18 October 2026, https://claude.ai/artifact/WHi2wZuS2SvZSKmicoAfNM). */
.said-under { margin: -.4rem 0 .6rem; }
.kept-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0 1rem; }
.kept-tools .find { flex: 1 1 16rem; max-width: 26rem; display: flex; align-items: center; gap: .5rem; padding: 0 .9rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); }
.kept-tools .find input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ink); outline: none; }
.kept-tools .find .icon { width: 1rem; height: 1rem; }
.kept-tools .new-folder { border: 1px solid var(--line); border-radius: 999px; padding: .5rem .9rem; background: var(--card); display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.kept-tools .new-one { margin: 0; }
ul.folder-tiles { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem; }
.folder-tile { position: relative; border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 4px 14px -6px rgb(0 0 0 / .12); }
.folder-tile.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.folder-tile button.opens { width: 100%; display: grid; gap: .45rem; justify-items: start; padding: 1rem; border: 0; background: transparent; text-align: left; border-radius: 14px; }
.folder-tile button.opens:hover { background: var(--plain); }
.folder-tile .ic { width: 2.5rem; height: 2.5rem; border-radius: 10px; display: grid; place-items: center; background: var(--soft); color: var(--accent); }
.folder-tile .ic .icon { width: 1.2rem; height: 1.2rem; }
.folder-tile .name { font-weight: 600; font-size: 1rem; color: var(--ink); overflow-wrap: anywhere; padding-right: 2rem; }
.folder-tile .what { font-size: .8rem; color: var(--muted); }
.folder-tile button.pin { position: absolute; top: .6rem; right: .6rem; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: color-mix(in srgb, var(--muted) 55%, transparent); }
.folder-tile button.pin .icon { width: .85rem; height: .85rem; }
.folder-tile button.pin:hover { color: var(--accent); background: var(--soft); }
.folder-tile button.pin.on { color: var(--accent); background: var(--soft); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .9rem; color: var(--muted); margin: 0 0 .2rem; }
.crumbs button.plain { padding: 0; color: var(--accent); }
.crumbs .icon { width: .7rem; height: .7rem; }
.folder-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding-right: 10rem; }
.folder-head h1 { margin: 0; flex: 0 1 auto; }
.folder-head button.pinned { border: 1px solid var(--line); border-radius: 999px; padding: .4rem .85rem; background: var(--card); color: var(--accent); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; }
.folder-head button.pinned.on { background: var(--soft); border-color: transparent; }
.folder-head button.pinned .icon { width: .8rem; height: .8rem; }
.folder-head .split .menu { right: auto; left: 0; }
@media (max-width: 34rem) { .folder-head { padding-right: 0; } }
/* Keep for reference: the Folder as its path, and the Folders as a tree to choose from. */
.capturing .settings button.where { flex: 1; min-width: 0; margin-left: 1rem; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border-radius: 10px; border: 2px solid var(--accent); background: var(--card); color: var(--ink); font-weight: 600; text-align: left; }
.capturing .settings button.where span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capturing .settings button.where .icon { width: .9rem; height: .9rem; color: var(--muted); flex: none; }
.capturing .folder-picker { margin: -.4rem 0 .9rem; padding: .5rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 18px 40px -14px rgb(0 0 0 / .35); display: grid; gap: 2px; max-height: 18rem; overflow: auto; }
.capturing .folder-picker .search { display: flex; align-items: center; gap: .5rem; padding: 0 .6rem; height: 2.2rem; border-radius: 9px; background: var(--plain); color: var(--muted); margin-bottom: .25rem; }
.capturing .folder-picker .search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ink); outline: none; }
.capturing .folder-picker .search .icon { width: .9rem; height: .9rem; }
.capturing .folder-picker .row { display: flex; align-items: center; padding-left: calc(var(--depth, 0) * 1.3rem); }
.capturing .folder-picker .tw { width: 1.6rem; height: 2rem; flex: none; display: grid; place-items: center; border: 0; padding: 0; background: transparent; color: var(--muted); }
.capturing .folder-picker .tw .icon { width: .7rem; height: .7rem; }
.capturing .folder-picker .opt { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; height: 2.1rem; padding: 0 .55rem; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: .92rem; text-align: left; }
.capturing .folder-picker > .opt { flex: none; width: 100%; }
.capturing .folder-picker .opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capturing .folder-picker .opt .icon { width: .9rem; height: .9rem; color: var(--muted); flex: none; }
.capturing .folder-picker .opt:hover { background: var(--plain); }
.capturing .folder-picker .opt.chosen { background: var(--soft); color: var(--accent); font-weight: 600; }
.capturing .folder-picker .opt.chosen .icon { color: var(--accent); }
.capturing .folder-picker .opt.make { color: var(--accent); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: .2rem; }
.capturing .folder-picker .opt.make .icon { color: var(--accent); }
.capturing .folder-picker .making { display: flex; gap: .4rem; margin: .3rem 0 0; }
.capturing .folder-picker .making input { flex: 1; min-width: 0; }
.capturing .folder-picker .opt { justify-content: flex-start; margin: 0; }
.capturing .folder-picker .opt span.tw { flex: none; }
/* A Tudu's page in tabs, as New has them: the tabs under its title, and a steady height while they're changed between. */
.sheet > .tabs { margin: .9rem 0 .4rem; }
.sheet > .tab { min-height: 22rem; }
/* What can be done with it: a row of buttons at the top right, beside Save; under Back where the page is narrow. */
.page-top { align-items: center; gap: .5rem; flex-wrap: wrap; }
.page-top > ul.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; margin: 0 0 0 auto; padding: 0; border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
.page-top > ul.actions li { border: 0; min-height: 0; }
.page-top > ul.actions li + li { border-top: 0; }
/* A toolbar of round picture buttons, each named when pointed at; one that's on (Starred, Sensitive) is filled. */
.page-top > ul.actions { margin: 0 auto 0 0; justify-content: flex-start; gap: .3rem; }
.page-top > ul.actions button.tool { width: 2.4rem; height: 2.4rem; padding: 0; display: grid; place-items: center; place-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); }
.page-top > ul.actions button.tool:hover:not(:disabled) { background: var(--softer); }
.page-top > ul.actions button.tool .icon { width: 1.05rem; height: 1.05rem; }
.page-top > ul.actions button.tool.on { background: var(--soft); border-color: transparent; color: var(--accent); }
.page-top > ul.actions button.tool.throws-away { color: var(--due); border-color: color-mix(in srgb, var(--due) 40%, transparent); background: color-mix(in srgb, var(--due) 8%, transparent); }
.page-top > button.saves { display: inline-flex; align-items: center; gap: .45rem; }
.page-top > button.saves .icon { width: 1rem; height: 1rem; }
.page-top > button.closes { width: 2.4rem; height: 2.4rem; padding: 0; display: grid; place-items: center; place-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.page-top > button.closes:hover { background: var(--softer); color: var(--ink); }
.page-top > button.closes .icon { width: 1.1rem; height: 1.1rem; }
/* Narrow, Save and ✕ stay on the top line and the toolbar goes under them. */
@media (max-width: 34rem) { .page-top > ul.actions { order: 3; flex-basis: 100%; } .page-top > button.saves { margin-left: auto; } }
.sheet > .tab > h2:first-child { margin-top: .6rem; }
@media (max-width: 34rem) { .sheet > .tabs button { padding: 0; font-size: .76rem; } }
/* What was just decided, gone to with Show: picked out for a moment. */
li.card.just-shown { animation: just-shown 2.4s ease; }
@keyframes just-shown { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { li.card.just-shown { animation: none; outline: 2px solid var(--accent); } }
.undo .hidden-now { color: var(--muted); }
.undo button + button { margin-left: .4rem; }
/* A Checklist's items (#201): a box to tick at the left of each, and what's ticked dimmed and struck through. */
ul.settings.items button.tick { display: flex; align-items: center; flex: none; width: auto; border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--ink); }
ul.settings.items li { gap: .75rem; }
/* Its time set from another's: the minutes, before or after, and which edge, on one line. */
ul.settings.relative { margin-top: 1rem; }
ul.settings.relative .minutes { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
ul.settings.relative .minutes input { width: 3.75rem; }
ul.settings.items li[draggable="true"] .grip { flex: none; display: grid; place-content: center; width: 1rem; color: var(--muted); cursor: grab; opacity: .55; }
ul.settings.items li:not([draggable="true"]) .grip { display: none; }
ul.settings.items li:hover .grip { opacity: 1; }
ul.settings.items li .grip .icon { width: .9rem; height: .9rem; }
ul.settings.items li.dragged { opacity: .45; }
ul.settings.items li.over:not(.dragged) { box-shadow: inset 0 2px 0 var(--accent); }
ul.settings.items button.item-name { flex: 1; min-width: 0; border: 0; border-radius: 0; padding: .2rem 0; background: transparent; color: var(--ink); font-weight: inherit; text-align: left; justify-content: flex-start; cursor: text; }
ul.settings.items input.renaming { flex: 1; min-width: 0; padding: .2rem .4rem; }
ul.settings.items button.take-off { flex: none; width: 1.9rem; height: 1.9rem; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); }
ul.settings.items button.take-off:hover:not(:disabled) { color: var(--stop); background: var(--softer); }
ul.settings.items button.take-off .icon { width: .85rem; height: .85rem; }
ul.settings.items .box { flex: none; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border: 2px solid var(--muted); border-radius: 6px; color: #fff; }
ul.settings.items .box .icon { width: .95rem; height: .95rem; }
ul.settings.items li.ticked .box { border-color: var(--accent); background: var(--accent); }
ul.settings.items li.ticked button.item-name { color: var(--muted); text-decoration: line-through; }
ul.settings.items li.adding input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .2rem 0; }
.ticked-count { margin-top: .2rem; }
/* On its card, a Checklist's items in a column, ticked in place, small enough to stay out of the way. */
.card .checklist { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; margin-top: .35rem; }
.card .checklist button { display: flex; align-items: center; gap: .5rem; padding: .15rem 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 400; text-align: left; }
.card .checklist .box { flex: none; display: grid; place-items: center; width: 1rem; height: 1rem; border: 1.5px solid var(--muted); border-radius: 4px; color: #fff; }
.card .checklist .box .icon { width: .75rem; height: .75rem; }
.card .checklist button.ticked .box { border-color: var(--accent); background: var(--accent); }
.card .checklist button.ticked > span:last-child { color: var(--muted); text-decoration: line-through; }

/* A period on all through a day (a holiday, a birthday): a small mark on the day, not a card (19 October 2026). */
.day-marks { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .6rem; }
.day-mark { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-mark .icon { width: .8rem; height: .8rem; flex: none; }
.day-mark button.opens { font: inherit; color: inherit; padding: 0; background: none; border: 0; min-height: 0; overflow: hidden; text-overflow: ellipsis; }
li.marked { list-style: none; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* Where a finger held still opens a menu (holding.js), the browser's own selecting and callout stay away: a Tudu's card
   and its name, the Calendar's blocks, hours, days and a day's name, and the lists and Folders at the side. */
@media (hover: none) {
    li.card, .opens, .hours, .day-name, .month-grid .cell, [data-onto="day"], [data-gives^="list:"], [data-gives^="folder:"], .day-head h1 {
        -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
    }
    li.card :is(input, textarea, [contenteditable]) { -webkit-user-select: text; user-select: text; }
}

/* A picture in a title (#520): a button by the field, and the picker it opens over everything (emoji.js). */
.with-emoji { display: flex; align-items: center; gap: .4rem; }
.with-emoji > input { flex: 1; min-width: 0; }
button.emoji { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 999px; color: var(--muted); background: transparent; }
button.emoji:hover, button.emoji[aria-expanded=true] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
button.emoji .icon { width: 1.3rem; height: 1.3rem; }
.emoji-picker { position: fixed; z-index: 20; height: 400px; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 28px color-mix(in srgb, #000 22%, transparent);
    --background: var(--card); --border-color: color-mix(in srgb, var(--muted) 24%, transparent); --indicator-color: var(--accent); --outline-color: var(--accent);
    --input-border-color: var(--muted); --input-font-color: var(--ink); --category-font-color: var(--muted); --button-active-background: color-mix(in srgb, var(--accent) 18%, transparent);
    --button-hover-background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Planning Goals and Projects as an outline (05 §0.19, #518): Roles and their Goals on the left, the Goal chosen on the right. */
/* As wide as the week, so both sides have room. */
main:has(.outline), header.top:has(+ main .outline) { max-width: 72rem; }
.outline { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1rem; }
@media (max-width: 60rem) { .outline { grid-template-columns: minmax(0, 1fr); } }
.outline-goals { position: sticky; top: 1rem; background: var(--card); border-radius: 14px; padding: .6rem; box-shadow: var(--lift); }
.outline-goals ul { list-style: none; margin: 0 0 .5rem; padding: 0; }
.outline-goals li button { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; width: 100%; border: 0; border-radius: 10px; padding: .45rem .75rem; color: var(--ink); text-align: left; white-space: normal; }
.outline-goals li button .icon { width: 1rem; height: 1rem; flex: none; color: var(--muted); }
.outline-goals li button:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.outline-goals li button.chosen { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 600; }
.outline-role { display: flex; align-items: center; gap: .55rem; margin: .7rem .5rem .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-radius: 8px; }
.outline-role .role-dot { width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid var(--accent); box-sizing: border-box; }
.outline-role[style] .role-dot { background: var(--role); border-color: var(--role); }
.outline-role .role-dot.all { border-style: dashed; border-color: var(--muted); }
.outline-role button { border: 0; padding: .3rem .25rem; font: inherit; text-transform: inherit; color: inherit; }
.outline-role button.chosen { color: var(--accent); }
.outline-add { margin: .4rem 0 .9rem; }
.outline-add input { width: 100%; box-sizing: border-box; padding: .45rem .75rem; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent); background: transparent; color: var(--ink); }
.outline-add input:focus { border-style: solid; }
.outline-chosen h3 { margin: 1.3rem 0 .5rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.outline-goal h2 { margin: 0; font-size: 1.5rem; }
.outline-goal h2 button { font: inherit; color: var(--ink); padding: 0; border: 0; white-space: normal; text-align: left; }
.outline-meta { display: flex; align-items: center; gap: .6rem; margin: .4rem 0; }
.role-pill { --role: var(--accent); padding: .1rem .65rem; border-radius: 999px; font-size: .85rem; background: color-mix(in srgb, var(--role) 18%, transparent); }
.outline-why { margin: .4rem 0 0; color: var(--ink); }
.outline-why .icon { width: 1rem; height: 1rem; color: var(--due); vertical-align: -.15em; }
.outline-why button { border: 0; padding: 0; color: var(--accent); }
.outline-project { background: var(--card); border-radius: 14px; padding: .35rem .6rem .1rem; margin-bottom: .7rem; box-shadow: var(--lift); }
.outline-project-head { display: flex; align-items: center; gap: .4rem; margin: 0; }
.outline-project-head .title { display: flex; align-items: center; gap: .4rem; justify-content: flex-start; flex: 1; min-width: 0; text-align: left; font-weight: 600; color: var(--ink); white-space: normal; border: 0; padding: .35rem .2rem; }
.outline-project-head .title .icon { width: 1rem; height: 1rem; color: #E8711A; vertical-align: -.15em; }
.outline-project-head .fold { border: 0; padding: .2rem; color: var(--muted); }
.outline-project-head .fold .icon { width: .9rem; height: .9rem; }
.outline-project .how-many { color: var(--muted); font-size: .85rem; padding-right: .3rem; }
.outline-rows { list-style: none; margin: 0; padding: 0 0 0 1.6rem; min-height: .6rem; }
.outline-chosen > .outline-rows { padding-left: 0; }
.outline-rows li { display: flex; align-items: baseline; gap: .6rem; border-top: 1px solid color-mix(in srgb, var(--muted) 14%, transparent); }
.outline-rows li:first-child { border-top: 0; }
.outline-rows li button { display: flex; align-items: center; gap: .4rem; justify-content: flex-start; flex: 1; min-width: 0; text-align: left; border: 0; padding: .45rem .2rem; color: var(--ink); white-space: normal; }
.outline-rows li button .icon { width: 1rem; height: 1rem; color: #D99A00; vertical-align: -.15em; }
.outline [draggable=true] { cursor: grab; }
.outline .dragging { opacity: .45; }
.outline .drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.outline .drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.outline .drop-into { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* Reviewing a Goal or a Project (05 §0.19): one at a time in the outline's right, what needs a look flagged. */
.outline-review-all { margin: 0 0 .6rem; }
.outline-review-all button { width: 100%; justify-content: center; }
.outline .review-one { font-size: .8rem; color: var(--accent); margin-left: auto; }
.outline-project-head .said.reviewed { color: var(--muted); }
.review-where { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .4rem; }
.review-where button { text-transform: none; letter-spacing: 0; color: var(--accent); }
.review .flag { font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--due) 14%, transparent); color: var(--due); white-space: nowrap; }
.review-project { border: 1px solid var(--line); border-radius: 12px; padding: .3rem .6rem .5rem; margin: 0 0 .6rem; background: var(--card); }
.review-project.flagged { border-color: color-mix(in srgb, var(--due) 45%, var(--line)); }
.review-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .2rem 0; padding: .25rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.review-row.head { border-bottom: none; font-weight: 600; }
.review-row .title { display: inline-flex; align-items: center; gap: .35rem; text-align: left; }
.review-row .said { font-size: .8rem; color: var(--muted); }
.review-decide { margin-left: auto; display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 400; }
.review-decide button { color: var(--accent); }
.give-a-day { position: relative; display: inline-flex; align-items: center; color: var(--accent); cursor: pointer; }
.give-a-day input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.give-a-day .hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.review-said { width: 100%; box-sizing: border-box; font: inherit; padding: .5rem .6rem; border-radius: 10px; border: 1px solid var(--line); background: var(--ground); color: var(--ink); }
.review-buttons { display: flex; gap: .6rem; margin: .6rem 0 0; }
.outline-why input { flex: 1; font: inherit; border: none; border-bottom: 1px dashed var(--line); background: transparent; color: var(--ink); }