/* Paper: warm paper ground, a white sheet, near-black ink. Newsreader for the few large titles, Geist for the
   rest, Geist Mono small capitals for labels and the date. Hairline rules, one black pill button per screen.
   Light only; dark only when the device asks for it. No glows, gradients or badges. */
:root {
  --paper: #f5f4ef; --card: #fffefa; --ink: #15130e; --soft: #55514a; --line: #dedad0; --line2: #c9c4b8;
  --field: #f5f4ef; --green: #1d6b43; --amber: #9a5b12; --btn: #15130e; --btn-ink: #f5f4ef; --shadow: rgba(30, 25, 15, 0.07);
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #12110e; --card: #1a1915; --ink: #efede6; --soft: #a7a296; --line: #2c2a24; --line2: #3a372f; --field: #12110e; --green: #6cc193; --amber: #e0a458; --btn: #efede6; --btn-ink: #12110e; --shadow: rgba(0, 0, 0, 0.3); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font: 16.5px/1.5 var(--sans); color: var(--ink); background: var(--paper); margin: 0; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }

/* The header: the name, the date, the account. */
.top { border-bottom: 1px solid var(--line); padding: 0 max(20px, env(safe-area-inset-left, 0px)); }
.top .in { max-width: 640px; margin: 0 auto; height: 60px; display: flex; align-items: center; gap: 16px; }
.top .mark { font: 500 22px/1 var(--serif); color: var(--ink); letter-spacing: -0.01em; text-decoration: none; }
.top .date { font: 400 12px/1 var(--mono); color: var(--soft); letter-spacing: 0.02em; margin-left: auto; white-space: nowrap; }
.top .who { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--soft); }
.top .who:empty { display: none; }
@media (max-width: 520px) { .top .who .email { display: none; } }

/* The sheet: one white card on the paper. */
main { max-width: 640px; margin: 28px auto 72px; padding: 0 12px; }
#view { background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 2px var(--shadow); padding: 30px 24px 34px; }
@media (min-width: 700px) { main { margin-top: 56px; } #view { padding: 44px 48px 46px; } }

h1 { font: 400 26px/1.2 var(--serif); letter-spacing: -0.015em; margin: 0 0 22px; }
h2, .label { font: 500 11.5px/1 var(--mono); letter-spacing: 0.06em; font-variant-caps: all-small-caps; font-size: 13.5px; color: var(--soft); margin: 36px 0 10px; }
p { margin: 0 0 12px; }
.soft { color: var(--soft); }
.small { font-size: 14.5px; }
a { color: var(--soft); font-size: 14.5px; text-decoration: none; }
a:hover { color: var(--ink); }

/* Where things stand: a small dot and two or three words. */
.state { display: flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: 0.06em; font-variant-caps: all-small-caps; font-size: 13.5px; color: var(--soft); margin: 0 0 14px; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }
.state.done { color: var(--green); }
.state.done::before { background: var(--green); }
.state.needs { color: var(--amber); }
.state.needs::before { background: var(--amber); }
.state.off::before { background: none; border: 1.2px solid var(--soft); }
.state.working::before { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .state.working::before { animation: none; } }

textarea, input[type="text"], input[type="time"] { font: inherit; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); color: var(--ink); resize: none; }
input[type="time"] { width: auto; padding: 9px 12px; }
input.code { width: 9em; letter-spacing: 3px; }
textarea:focus, input:focus { outline: none; border-color: var(--ink); }
::placeholder { color: #9a958a; }

button { font: 500 15px/1 var(--sans); height: 46px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--btn); color: var(--btn-ink); cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
button.link { background: none; height: auto; padding: 0; font: 400 14.5px/1.4 var(--sans); color: var(--soft); }
button.link:hover { color: var(--ink); }
.act { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.sorry { color: var(--soft); font-size: 14.5px; margin-top: 14px; }
.back { display: inline-block; margin-bottom: 28px; }
.foot { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 20px; flex-wrap: wrap; }
.shot { width: 100%; border: 1px solid var(--line); border-radius: 6px; margin-top: 24px; display: block; }

ul { list-style: none; padding: 0; margin: 0; }
.items { margin-top: 18px; border-top: 1px solid var(--line); }
.items li { padding: 13px 0; border-bottom: 1px solid var(--line); }
.items b { font-weight: 500; display: block; }
.items a.src { color: var(--ink); font-size: inherit; }
.items span { color: var(--soft); font-size: 14.5px; }

/* The list of what it handles: a section under the sheet, ruled like a report. */
.list { max-width: 640px; margin: 0 auto; }
.chores { border-top: 1px solid var(--line); }
.chores li { border-bottom: 1px solid var(--line); }
.chores a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 0; color: var(--ink); font-size: 16px; }
.chores .state { margin: 0; white-space: nowrap; }
.ask { margin-top: 34px; }

table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
td, th { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.05em; font-variant-caps: all-small-caps; font-size: 13.5px; color: var(--soft); }

.reading { margin: 20px 0; padding: 4px 0 18px; border-bottom: 1px solid var(--line); }
.inline-time { display: inline-block; margin-left: 6px; }

.stack { display: grid; gap: 14px; }
.stack input[type="text"] { margin-top: 4px; }
.items .msg { white-space: pre-line; display: block; margin-top: 6px; color: inherit; }

/* Speaking instead of typing: a small round button in the corner of the box, quiet until it is listening. */
.box { position: relative; }
.box textarea { padding-right: 52px; }
.mic { position: absolute; right: 8px; bottom: 10px; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: none; color: var(--soft); display: grid; place-items: center; }
.mic:hover { color: var(--ink); }
.mic.on { background: var(--btn); color: var(--btn-ink); }
.mic:disabled { opacity: 0.4; cursor: default; }
.mic svg { pointer-events: none; }
.heard { margin: 12px 0 0; }

/* Changing the words of a message before it goes. */
.items .change { display: block; margin-top: 6px; }
.items textarea.edit { margin-top: 8px; font-size: 15px; line-height: 1.5; }