/* Colours come from /theme.css (the product theme: dark by default, html[data-theme=light]). The app's old names
   are aliases of its tokens, so no colour is defined here. */
:root{--card:var(--panel);--err:var(--flag-tx);--warm:var(--warn-tx)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,sans-serif;padding:16px}
.card{width:100%;max-width:520px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:24px}
h1{margin:0 0 16px;font-size:22px}h2{font-size:17px;margin:24px 0 8px}
label{display:block;margin:0 0 12px;color:var(--muted);font-size:14px}
input{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink);font:inherit}
button{padding:9px 16px;border:0;border-radius:6px;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600;cursor:pointer}
table{width:100%;border-collapse:collapse}td{padding:6px 4px;border-bottom:1px solid var(--line);font-size:14px}
td form{margin:0}td button{padding:5px 10px;font-size:13px}
.err{color:var(--err)}.ok{color:var(--ok-tx)}code{font-size:15px;user-select:all}
a{color:var(--accent-tx)}

/* signed-in pages with the shared top bar: the bar on top, the card below it */
body.with-bar{display:block;padding:0;place-items:normal}  /* justify-items also applies to block layout now: reset it, or the bar shrinks to its content */
body.with-bar .card{margin:24px auto}
.sub{color:var(--muted);font-size:14px}
td.acts{display:flex;gap:6px;flex-wrap:wrap}
button.quiet{background:transparent;color:var(--ink);border:1px solid var(--line)}
body.with-bar .card:has(table.notes){max-width:1100px}
table.notes td{vertical-align:top}table.notes td.text{white-space:pre-wrap;max-width:420px}
table.notes tr.done{opacity:.6}table.notes form{display:inline;margin-left:6px}

/* login: the product brand above the form (UI pass, 22 Oct) */
body:has(.brand){background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--accent) 16%,var(--bg)),var(--bg) 70%)}
.brand{text-align:center;margin:6px 0 22px}.brand .t{color:var(--muted);font-size:14px}
.brand i{display:block;width:56px;height:2px;background:var(--accent);margin:14px auto}
.brand .w{font-weight:800;letter-spacing:.16em;font-size:26px}.brand .w b{color:var(--accent-tx);margin-left:.3em}
.card:has(.brand){max-width:440px;box-shadow:0 20px 50px rgba(0,0,0,.35)}.card:has(.brand) h1{font-size:18px;color:var(--muted);font-weight:600}
.card:has(.brand) button{width:100%;padding:12px;font-size:16px;margin-top:4px}