/* Marv's home, in Google's idiom (16 Sep): white surfaces, hairline outlines, round icon buttons, tonal chips,
   one green accent, Google Sans Flex. The desktop is Google Calendar's shape (a top bar that holds everything,
   the day down the left, the calendar as the page); the phone is Google Calendar's phone (a top bar with the
   menu, a drawer from the left, a speed-dial button). Light by default, dark on request. */

/* ---------- Type: Google Sans Flex, self-hosted so the app works offline (OFL 1.1, see /fonts/LICENSE.txt) ---------- */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/fonts/google-sans-flex.woff2) format('woff2-variations'), url(/fonts/google-sans-flex.woff2) format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --font: 'Google Sans Flex', 'Google Sans', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8f9fa;          /* sunken ground: the composer, the free card */
  --surface-3: #f1f3f4;          /* hover, filled fields, Marv's bubble */
  --surface-4: #e8eaed;          /* pressed, tracks */
  --outline: #dadce0;            /* hairlines */
  --outline-2: #e8eaed;          /* the fainter hairline: grid rows, the bar's edge */
  --text: #1f1f1f;
  --text-2: #5f6368;
  --text-3: #80868b;
  --primary: #188038;            /* text and icons in the accent */
  --primary-fill: #1e8e3e;       /* filled buttons, today's circle, the speed dial */
  --primary-hover: #137333;
  --on-primary: #ffffff;
  --primary-container: #e6f4ea;  /* the lit row in the drawer, the selected segment, your bubble */
  --on-primary-container: #0d652d;
  --primary-soft: rgba(30, 142, 62, 0.12);
  --danger: #d93025;
  --danger-container: #fce8e6;
  --ok: #188038;
  --now: #ea4335;                /* the now line, red as Google draws it */
  --scrim: rgba(0, 0, 0, 0.32);
  --shadow-1: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --shadow-2: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
  --shadow-3: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  --shadow-4: 0 2px 3px rgba(60, 64, 67, 0.3), 0 6px 10px 4px rgba(60, 64, 67, 0.15);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 28px;
  --bar-h: 64px;
  --side-w: 380px;
  --tint: 12%;                   /* how much of an area's colour a block carries */
  --chip-text: #ffffff;
  /* Names the script still uses. */
  --line: var(--outline);
  --muted: var(--text-2);
  --muted-2: var(--text-3);
  --fill: var(--surface-3);
  --fill-2: var(--surface-4);
  --accent: var(--primary);
  --accent-soft: var(--primary-container);
  --panel: var(--surface);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #131314;
  --surface: #1e1f20;
  --surface-2: #1e1f20;
  --surface-3: #2b2d2f;
  --surface-4: #37393b;
  --outline: #444746;
  --outline-2: #303234;
  --text: #e3e3e3;
  --text-2: #c4c7c5;
  --text-3: #8e918f;
  --primary: #81c995;
  --primary-fill: #81c995;
  --primary-hover: #a8dab5;
  --on-primary: #003914;
  --primary-container: #1e3a29;
  --on-primary-container: #a8dab5;
  --primary-soft: rgba(129, 201, 149, 0.16);
  --danger: #f28b82;
  --danger-container: #4a2521;
  --ok: #81c995;
  --now: #f28b82;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px 2px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 8px 3px rgba(0, 0, 0, 0.4);
  --shadow-4: 0 2px 3px rgba(0, 0, 0, 0.5), 0 6px 10px 4px rgba(0, 0, 0, 0.45);
  --tint: 26%;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #131314; --surface: #1e1f20; --surface-2: #1e1f20; --surface-3: #2b2d2f; --surface-4: #37393b;
    --outline: #444746; --outline-2: #303234; --text: #e3e3e3; --text-2: #c4c7c5; --text-3: #8e918f;
    --primary: #81c995; --primary-fill: #81c995; --primary-hover: #a8dab5; --on-primary: #003914;
    --primary-container: #1e3a29; --on-primary-container: #a8dab5; --primary-soft: rgba(129, 201, 149, 0.16);
    --danger: #f28b82; --danger-container: #4a2521; --ok: #81c995; --now: #f28b82; --scrim: rgba(0, 0, 0, 0.55);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px 2px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 8px 3px rgba(0, 0, 0, 0.4);
    --shadow-4: 0 2px 3px rgba(0, 0, 0, 0.5), 0 6px 10px 4px rgba(0, 0, 0, 0.45);
    --tint: 26%;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
svg { flex: none; }

/* The shared parts: round icon buttons, outlined and filled buttons, a segmented switch. */
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; flex: none;
  background: none; color: var(--text-2);
  display: inline-grid; place-items: center;
  transition: background-color 0.15s ease, color 0.15s ease;
  position: relative;
}
.icon-btn svg { width: 24px; height: 24px; }
.icon-btn:active { background: var(--surface-4); }
.icon-btn.on { background: var(--primary-container); color: var(--on-primary-container); }
.btn-outlined {
  height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--outline);
  background: none; color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.btn-filled {
  height: 40px; padding: 0 24px; border-radius: 999px; border: 0;
  background: var(--primary-fill); color: var(--on-primary); font-size: 14px; font-weight: 500;
}
.btn-text {
  height: 40px; padding: 0 12px; border-radius: 999px; border: 0; background: none;
  color: var(--primary); font-size: 14px; font-weight: 500;
}
.segmented { display: inline-flex; height: 36px; border: 1px solid var(--outline); border-radius: 999px; overflow: hidden; flex: none; }
.segmented button { border: 0; border-left: 1px solid var(--outline); background: none; color: var(--text); padding: 0 16px; font-size: 14px; font-weight: 500; }
.segmented button:first-child { border-left: 0; }
.segmented button.on { background: var(--primary-container); color: var(--on-primary-container); }

/* ---------- The top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 4px;
  height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 8px 0 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--outline-2);
}
.bar-lead { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; }
/* The wordmark: a name, not a button (James, 17 Sep). No hover, no click. */
.brand { display: none; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 4px; color: var(--text); font-size: 22px; font-weight: 500; letter-spacing: -0.2px; cursor: default; -webkit-user-select: none; user-select: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; display: block; }
/* Today, the way back to today's plan, on every page of the Mac (the phone has its icon in the bar's actions). */
#bar-today { display: none; margin: 0 8px 0 4px; flex: none; }
.bar-page { min-width: 0; flex: 1; padding-left: 4px; }
.date { font-size: 20px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px; }
.sub { color: var(--text-2); font-size: 12px; line-height: 1.3; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub:empty { display: none; }
.sub button.link { background: none; border: 0; color: var(--primary); font: inherit; font-size: 12px; font-weight: 500; padding: 0; margin-left: 8px; }
.bar-cal { display: none; align-items: center; gap: 4px; margin-left: 12px; }
.bar-title { margin: 0 0 0 8px; font-size: 22px; font-weight: 400; letter-spacing: -0.2px; white-space: nowrap; }
.bar-actions { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.bar-actions .nav, #bar-switch { display: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: var(--text-3); margin: 0 10px 0 8px; flex: none; }
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--danger); }
.dot.busy { background: var(--primary); animation: pulse 1s infinite alternate; }
@keyframes pulse { from { opacity: 0.4; } to { opacity: 1; } }
/* The Mac needs no menu button: the bar holds every way in. */
@media (min-width: 1000px) {
  .top { padding: 0 16px; }
  .burger { display: none; }
  .brand { display: inline-flex; }
  #bar-today { display: inline-flex; align-items: center; }
  .bar-actions .nav { display: inline-grid; }   /* grid, not flex: place-items centres the icon in its circle (James, 16 Sep: the highlight sat wrong) */
  #btn-today { display: none; }
  body.cal-split .bar-page { display: none; }
  body.cal-split .bar-cal, body.cal-split #bar-switch { display: inline-flex; }
  body.cal-split.view-reminders .bar-cal > :not(.bar-title), body.cal-split.view-reminders #bar-switch { display: none; }
  body.cal-split.view-reminders .bar-cal { margin-left: 0; }
}

/* ---------- The page ---------- */
main { padding: 8px 16px calc(env(safe-area-inset-bottom) + 112px); max-width: 760px; margin: 0 auto; }
.side, .stage { display: contents; }

/* The desktop: the day down the left, the calendar as the page, each scrolling on its own (Google's shape). */
@media (min-width: 1000px) {
  body.cal-split main { max-width: none; margin: 0; padding: 0; display: flex; align-items: stretch; height: calc(100vh - var(--bar-h)); height: calc(100dvh - var(--bar-h)); overflow: hidden; }
  body.cal-split .side { display: block; width: var(--side-w); flex: none; overflow-y: auto; padding: 16px 16px 32px 16px; border-right: 1px solid var(--outline-2); }
  body.cal-split .stage { display: block; flex: 1; min-width: 0; overflow: auto; padding: 0 16px 16px 8px; }
  body.cal-split .live { top: 0; }
  body.cal-split.chat-open main { padding-right: var(--chat-w, 420px); }
  body.cal-split .fab-wrap { right: 24px; bottom: 24px; }
}

/* ---------- The day ---------- */
.plan { display: flex; flex-direction: column; gap: 8px; }
.plan-empty { color: var(--text-2); padding: 40px 8px; text-align: center; font-size: 14px; }
/* An empty day offers the way in (2 Oct): Add a block opens Create for the day; Or tell Marv opens the chat. */
.plan-empty-text { margin: 0; }
.plan-empty-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; }
.plan-empty .plan-add { color: var(--text); }
.plan-empty .plan-ask { height: 36px; color: var(--text-2); font-weight: 500; }
.allday { color: var(--text-2); font-size: 13px; padding: 4px 4px 0; }
.block {
  display: grid; grid-template-columns: 52px 1fr; gap: 12px;
  padding: 10px 12px 10px 16px;
  background: var(--surface-3);
  background: color-mix(in srgb, var(--bar, var(--outline)) var(--tint), var(--surface));
  border: 1px solid transparent;
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.block::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bar, var(--outline)); }
.block.fixed { background: var(--surface); border-color: var(--outline); }
/* The forecast on a day not yet laid (17 Sep): the standard day's rows faint and dashed, booked entries solid. */
.block.ghost { background: none; border: 1px dashed var(--outline); opacity: 0.7; }
.block.ghost::before { opacity: 0.6; }
.block.ghost .title { font-weight: 400; }
.block.opens { cursor: pointer; }
.forecast-note { color: var(--text-2); font-size: 13px; line-height: 1.45; padding: 6px 4px 8px; }
.block.fixed::before { background: var(--text-3); }
.block.past { opacity: 0.6; }
.block.now { box-shadow: 0 0 0 2px var(--primary) inset; }
.block.happened { opacity: 0.7; }
.block.missed { opacity: 0.5; text-decoration: line-through; }
.block .time { color: var(--text-2); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 1.5; padding-top: 2px; }
.block .title { font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: -0.1px; }
.block .task { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.block .task.done { color: var(--ok); }
.block .tag { position: absolute; right: 10px; top: 9px; font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; border: 1px solid var(--outline); border-radius: 4px; padding: 1px 6px; background: var(--surface); }
/* A commute: one slim quiet line, the time it takes and nothing else. */
.block.travel { padding: 5px 12px 5px 16px; background: none; border-color: transparent; border-radius: var(--r-sm); }
.block.travel::before { display: none; }
.block.travel .time { padding-top: 0; line-height: 1.4; }
.block.travel .title { font-size: 13px; font-weight: 400; color: var(--text-2); }
/* A held block lifts under the finger. */
.block.held, .live.held { transform: scale(1.02); box-shadow: var(--shadow-3); z-index: 2; }
/* With a mouse, a small "more" button appears on hover: the one way in on the Mac. */
.block .more, .live .more { display: none; position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: var(--text-2); padding: 0; place-items: center; opacity: 0; transition: opacity 0.15s ease, background-color 0.15s ease; }
@media (hover: hover) {
  .block .more, .live .more { display: grid; }
  .block:hover .more, .live:hover .more { opacity: 1; }
  .block .more:hover, .live .more:hover { background: var(--surface-4); color: var(--text); }
  /* The routine rows in the card stop short of the dots, so a hovered row never runs under them (James, 17 Sep). */
  .live .live-routine .rem-row { padding-right: 36px; }
}

/* The training plan (17 Sep): the gym block opens the day's session; the sheet shows it as written. */
.block.has-training { cursor: pointer; }
.training-day { margin: -6px 0 10px; color: var(--text-2); font-size: 13px; }
.training-plan { margin: 0 0 8px; padding: 12px 14px; max-height: 50vh; overflow: auto; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 15px; line-height: 1.5; background: var(--surface-2); border-radius: var(--r-sm); color: var(--text); }
.live .plan-link { align-self: flex-start; margin: 2px 0 0 -10px; height: 28px; font-size: 13px; }
.training-card { display: flex; flex-direction: column; gap: 8px; }
.training-card .name { font-weight: 500; }
.training-card textarea { min-height: 72px; }
/* The inbox digest inside the Inbox block, or one quiet line under the plan. */
.block.has-inbox, .live.has-inbox { cursor: pointer; }
.block .inbox-summary, .live .inbox-summary { color: var(--primary); font-size: 13px; margin-top: 4px; font-weight: 500; }
.live .inbox-summary { margin-top: 8px; }
.block .inbox-body { grid-column: 1 / -1; padding: 10px 0 0; border-top: 1px solid var(--outline-2); margin-top: 8px; }
.live .inbox-body { margin-top: 10px; }
.inbox-text { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.inbox-list { margin: 0 0 8px; padding: 0 0 0 18px; font-size: 14px; color: var(--text); }
.inbox-list li { margin: 2px 0; }
.inbox-list b { font-weight: 500; }
.inbox-body .muted { margin: 0; font-size: 12px; color: var(--text-2); }
/* Bookings from email (17 Sep): offered rows with Add and Not this. */
.inbox-from { margin: 4px 0 4px; font-size: 12px; font-weight: 500; color: var(--text-2); letter-spacing: 0.02em; }
.inbox-list.bookings { list-style: none; padding: 0; }
.inbox-list .booking { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.inbox-list .booking-text { flex: 1; min-width: 0; }
.inbox-list .booking-actions { display: inline-flex; gap: 2px; flex: none; }
.btn-text.small { height: 32px; padding: 0 10px; font-size: 13px; }
.btn-text.quiet { color: var(--text-2); }
.inbox-line { margin-top: 12px; }
.inbox-line .inbox-head { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: var(--r-md); background: none; border: 1px solid var(--outline-2); color: var(--text); font: inherit; font-size: 14px; text-align: left; }
.inbox-line .inbox-head svg:first-child { color: var(--primary); width: 20px; height: 20px; }
.inbox-line .inbox-head span { flex: 1; }
.inbox-line .inbox-head .chev { color: var(--text-3); transition: transform 0.2s; }
.inbox-line .inbox-head.open .chev { transform: rotate(180deg); }
.inbox-line .inbox-body { padding: 8px 12px 4px; }

/* The live card at the top of today: what he should be on, and how long is left. */
.live {
  position: sticky; top: var(--live-top, 64px); z-index: 4; overflow: hidden;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  background: var(--surface); border: 1px solid var(--outline-2); box-shadow: var(--shadow-1);
  border-radius: var(--r-lg); padding: 14px 16px 14px 20px; margin-bottom: 2px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, padding 0.22s ease;
}
.live::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--bar, var(--outline)); }
.live .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.live .kicker { color: var(--text-2); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.live .big { font-size: 22px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.25; margin-top: 2px; }
.live .sub { color: var(--text-2); font-size: 14px; margin-top: 2px; white-space: normal; }
.live .track { height: 6px; border-radius: 3px; background: var(--surface-4); margin-top: 12px; overflow: hidden; }
.live .fill { height: 100%; border-radius: 3px; background: var(--bar, var(--primary-fill)); transition: width 0.6s ease; }
.live .then { color: var(--text-2); font-size: 13px; margin-top: 8px; font-variant-numeric: tabular-nums; }
/* The Done pill came off the card on 11 Sep; its rule went with it on 17 Sep, when it was found dressing a ticked
   routine row (any .done inside the card) as a green pill. */
.live.is-done .big { color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.live.free { background: var(--surface-2); box-shadow: none; }
.live.free::before { background: var(--text-3); }
/* Scrolled past: the card stays under the bar, condensed to one line and its bar; back at the top it opens again. */
.live.condensed { padding: 8px 12px 9px 16px; box-shadow: var(--shadow-2); border-radius: var(--r-md); }
.live.free.condensed { background: var(--surface); }
.live.condensed .head { min-height: 0; }
.live.condensed .kicker { font-size: 11px; }
.live.condensed .big { font-size: 16px; margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live.condensed .sub, .live.condensed .then { display: none; }
.live.condensed .track { height: 4px; margin-top: 6px; }
.live .big, .live .track, .live .kicker { transition: font-size 0.22s ease, margin-top 0.22s ease, height 0.22s ease; }
.live.condensed .live-routine { display: none; }
/* The now line between blocks, as Google draws it: a red dot, a red line, the time. */
.needle { display: flex; align-items: center; gap: 8px; color: var(--now); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; padding: 0 4px; }
.needle::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--now); flex: none; }
.needle::after { content: ""; flex: 1; height: 2px; background: var(--now); opacity: 0.7; }
.needle span { flex: none; order: 1; }
.needle span::after { content: " · free until the next block"; color: var(--text-2); font-weight: 400; }
.needle::after { order: 2; }

/* The fold for finished blocks: a text button, quiet. */
.earlier {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  height: 32px; padding: 0 12px 0 8px; border-radius: 999px; margin: 0 0 -2px;
  background: none; border: 0; color: var(--text-2); font-size: 13px; font-weight: 500;
}
.earlier .chev { color: var(--text-3); transition: transform 0.2s; order: -1; }
.earlier.open .chev { transform: rotate(180deg); }

/* The good morning to hear: one soft line above the day, gone once tapped. */
.morning {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--outline-2); margin: 0 0 4px;
  background: var(--primary-container); color: var(--on-primary-container); font-size: 14px; font-weight: 500; text-align: left;
}
.morning svg { color: var(--on-primary-container); }
.morning.on svg { color: var(--danger); }

/* ---------- The speed dial: one round button, three ways in (16 Sep: create an event, a reminder, or talk to Marv) ---------- */
.fab-wrap { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 16px); z-index: 7; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab {
  width: 56px; height: 56px; border-radius: 16px; border: 0; padding: 0; position: relative;
  background: var(--primary-fill); color: var(--on-primary);
  display: grid; place-items: center;
  box-shadow: var(--shadow-3);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.fab svg { width: 26px; height: 26px; transition: transform 0.2s ease; }
.fab:active { transform: scale(0.96); }
.fab-wrap.open .fab { background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); }
.fab-wrap.open .fab svg { transform: rotate(45deg); }
.fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding-right: 8px; }
.fab-item { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; color: var(--text); animation: fab-in 0.18s ease-out backwards; }
.fab-item:nth-child(1) { animation-delay: 0.06s; }
.fab-item:nth-child(2) { animation-delay: 0.03s; }
.fab-item .lbl { font-size: 14px; font-weight: 500; background: var(--surface); border-radius: var(--r-sm); padding: 6px 12px; box-shadow: var(--shadow-1); color: var(--text); }
.fab-item .mini { width: 40px; height: 40px; border-radius: 12px; background: var(--surface); color: var(--primary); display: grid; place-items: center; box-shadow: var(--shadow-2); }
.fab-item .mini svg { width: 22px; height: 22px; }
@keyframes fab-in { from { opacity: 0; transform: translateY(8px) scale(0.9); } }
.fab-wrap.open::before { content: ""; position: fixed; inset: 0; background: var(--bg); opacity: 0.8; z-index: -1; cursor: default; }
.fab-wrap.open .fab::after { display: none; }
/* Marv has said something this device has not shown: a dot on the button. Still at it while the chat is away: a breathing ring. */
.fab.unread::after { content: ""; position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg); }
.fab.thinking::before { content: ""; position: absolute; inset: -5px; border-radius: 20px; border: 2.5px solid var(--primary); animation: fab-breathe 1.3s ease-in-out infinite; pointer-events: none; }
@keyframes fab-breathe { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.12); opacity: 0.15; } }
.fab-item .mini { position: relative; }
#btn-chat.unread .mini::after { content: ""; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }
body.chat-open .fab-wrap { display: none; }
@media (min-width: 760px) and (max-width: 999px) { .fab-wrap, .chat-toast { right: calc(50% - 380px + 16px); } }
/* And word back when a reply lands with the chat closed: a small notice by the button; a tap opens the chat. */
.chat-toast { position: fixed; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: min(340px, calc(100vw - 32px)); background: var(--surface); color: var(--text); border: 1px solid var(--outline-2); border-radius: var(--r-md); padding: 10px 14px; box-shadow: var(--shadow-3); text-align: left; font-family: inherit; cursor: pointer; display: block; animation: toast-in 0.28s cubic-bezier(0.32, 0.72, 0, 1); }
.chat-toast b { display: block; font-size: 12px; color: var(--primary); font-weight: 500; margin-bottom: 2px; }
.chat-toast span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.35; }
.chat-toast.leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.35s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
/* A line of feedback on the Mac, where the bar has no room for one: a snackbar, gone on its own. */
.snackbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: #1f1f1f; color: #fff; font-size: 14px; padding: 12px 18px; border-radius: var(--r-sm); box-shadow: var(--shadow-3); max-width: min(560px, calc(100vw - 32px)); animation: toast-in 0.2s ease-out; }
:root[data-theme="dark"] .snackbar { background: #e3e3e3; color: #1f1f1f; }
.snackbar.leaving { opacity: 0; transition: opacity 0.3s; }

/* ---------- Sheets: chat, settings, a block's actions ---------- */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: 82vh; height: 82dvh; max-height: 800px;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-4);
  overflow: hidden;
  animation: rise 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.sheet.closing { animation: sink 0.24s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sink { to { transform: translateY(100%); opacity: 1; } }
.sheet.tall { height: 100%; max-height: none; border-radius: 0; }
.sheet.short { height: auto; max-height: 82vh; padding-bottom: env(safe-area-inset-bottom); }
/* The drag handle: a sheet is something you pull down. */
.sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 32px; height: 4px; border-radius: 2px; background: var(--outline); transform: translateX(-50%); }
.sheet.tall::before { display: none; }
.sheet-head {
  touch-action: none; user-select: none; -webkit-user-select: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  min-height: 56px; padding: 12px 8px 4px 20px;
  font-size: 18px; font-weight: 500; letter-spacing: -0.1px;
}
.sheet.tall .sheet-head { padding: calc(env(safe-area-inset-top) + 8px) 8px 8px 8px; border-bottom: 1px solid var(--outline-2); grid-template-columns: auto 1fr auto; }
.sheet-head > span { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.sheet.tall .sheet-head > span { text-align: left; padding-left: 8px; font-size: 20px; }
.sheet-head button { background: none; color: var(--primary); border: 0; padding: 0 12px; height: 40px; border-radius: 999px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; justify-self: end; }
.sheet-head button.back { grid-column: 1; justify-self: start; }
.sheet-head button#chat-close, .sheet-head button#settings-close, .sheet-head button#block-close { grid-column: 3; }
.sheet-head button.back + span { grid-column: 2; }
.sheet-head button.icon-btn { padding: 0; width: 40px; color: var(--text-2); display: inline-grid; place-items: center; }
.sheet-head .back span { font-size: 14px; }
.scrim { position: fixed; inset: 0; z-index: 19; background: var(--scrim); animation: dim 0.28s ease-out; }
.scrim.closing { animation: undim 0.22s ease-in forwards; }
@keyframes dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes undim { to { opacity: 0; } }
.block-actions { flex: none; padding-bottom: 18px; }
.block-actions .section { padding-top: 4px; }

/* ---------- Chat ---------- */
.thread { flex: 1; overflow-y: auto; padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 84%; padding: 10px 14px; border-radius: 20px; font-size: 15px; line-height: 1.4; white-space: pre-line; position: relative; }
.msg.james { align-self: flex-end; background: var(--primary-container); color: var(--on-primary-container); border-bottom-right-radius: 6px; }
:root[data-theme="dark"] .msg.james, :root[data-theme="system"] .msg.james { color: var(--text); }
.msg.marv { align-self: flex-start; background: var(--surface-3); padding-right: 44px; border-bottom-left-radius: 6px; }
.msg.marv.brief { line-height: 1.45; }
.msg .when { display: block; font-size: 11px; margin-top: 4px; color: var(--text-2); }
.msg.james .when { color: var(--on-primary-container); opacity: 0.8; }
.msg .speak { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--text-2); display: grid; place-items: center; }
.msg .speak.on { color: var(--on-primary-container); background: var(--primary-container); }
.msg.live .speak { visibility: hidden; }   /* words still arriving (17 Sep): read aloud once they stand */
.thread-empty { color: var(--text-2); padding: 24px 8px; text-align: center; font-size: 14px; }
.msg.thinking { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
.msg.thinking i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); display: inline-block; animation: dots 1.2s infinite ease-in-out; }
.msg.thinking i:nth-child(2) { animation-delay: 0.2s; }
.msg.thinking i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dots { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
.msg.thinking .ack { margin-right: 6px; color: var(--text); }
/* Quick asks: assist chips, as Google draws them. */
.quick { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 8px; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.quick button { flex: 0 0 auto; height: 32px; padding: 0 14px; background: none; color: var(--text); border: 1px solid var(--outline); border-radius: var(--r-sm); font-size: 14px; font-weight: 500; }
#composer { display: flex; gap: 8px; align-items: center; padding: 8px 12px calc(env(safe-area-inset-bottom) + 12px); border-top: 1px solid var(--outline-2); background: var(--surface); }
#composer input { flex: 1; min-width: 0; background: var(--surface-3); color: var(--text); border: 1px solid transparent; border-radius: 999px; padding: 0 18px; font-size: 15px; height: 44px; }
#composer input::placeholder { color: var(--text-2); }
#composer input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
#send, #mic { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; border: 0; display: grid; place-items: center; }
#send { background: var(--primary-fill); color: var(--on-primary); }
#send:disabled { opacity: 0.4; }
#mic { background: none; color: var(--text-2); }
#mic.on { background: var(--primary-container); color: var(--on-primary-container); animation: breathe 1.4s ease-in-out infinite; }
#mic.turn { background: var(--primary-container); color: var(--on-primary-container); }
#mic:disabled { opacity: 0.4; }
/* While Marv listens (17 Sep): the mic shows a cross (drop it), the send button a tick (send it now). */
#mic .ic-x, #send .ic-tick { display: none; }
#composer.hearing #mic .ic-mic, #composer.hearing #send .ic-send { display: none; }
#composer.hearing #mic .ic-x, #composer.hearing #send .ic-tick { display: block; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 var(--primary-soft); } 50% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } }
/* Recording: the mic fills red with a pulsing ring, and the text box gives way to a listening pill with bars that move with the voice. */
#mic.rec { background: var(--danger); color: #fff; animation: ring 1.2s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0.4); } 100% { box-shadow: 0 0 0 14px rgba(217, 48, 37, 0); } }
.listening { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--danger); color: var(--text); font-size: 15px; }
.listening .bars { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.listening .bars i { display: block; width: 3px; height: 4px; border-radius: 2px; background: var(--danger); transition: height 0.1s linear; }
.listening .word { color: var(--text-2); }

/* The Mac: the chat is a panel on the right, beside the calendar, the way Google opens its side panels. */
@media (min-width: 1000px) {
  #chat-sheet { --chat-w: 420px; left: auto; right: 0; top: var(--bar-h); bottom: 0; width: var(--chat-w); height: auto; max-height: none; border-radius: 0; box-shadow: none; border-left: 1px solid var(--outline-2); animation: panel-in 0.24s cubic-bezier(0.32, 0.72, 0, 1); }
  #chat-sheet::before { display: none; }
  #chat-sheet.closing { animation: panel-out 0.18s ease-in forwards; }
  #chat-sheet .sheet-head { padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--outline-2); grid-template-columns: 1fr auto; min-height: 56px; }
  #chat-sheet .sheet-head > span { grid-column: 1; text-align: left; font-size: 18px; }
  #chat-sheet .sheet-head button#chat-close { grid-column: 2; }
  #chat-sheet #composer { padding-bottom: 12px; }
  @keyframes panel-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes panel-out { to { transform: translateX(40px); opacity: 0; } }
  /* Settings and the block sheet stand in the middle of the screen as dialogs. */
  #settings-sheet, #block-sheet { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(760px, 92vw); height: min(86vh, 900px); max-height: none; border-radius: var(--r-xl); box-shadow: var(--shadow-4); animation: dialog-in 0.22s cubic-bezier(0.32, 0.72, 0, 1); }
  #block-sheet { height: auto; width: min(440px, 92vw); }
  #settings-sheet::before, #block-sheet::before { display: none; }
  #settings-sheet.closing, #block-sheet.closing { animation: dialog-out 0.16s ease-in forwards; }
  #settings-sheet .sheet-head { padding: 12px 12px 8px 12px; }
  @keyframes dialog-in { from { transform: translate(-50%, -50%) scale(0.96); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
  @keyframes dialog-out { to { transform: translate(-50%, -50%) scale(0.98); opacity: 0; } }
}
@media (min-width: 760px) and (max-width: 999px) {
  .sheet { left: 50%; right: auto; width: 760px; transform: translateX(-50%); }
  @keyframes rise { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
  @keyframes sink { to { transform: translate(-50%, 100%); } }
}

/* ---------- Settings: grouped lists and cards, the way Google's settings pages read ---------- */
.settings { flex: 1; overflow-y: auto; padding: 0 16px calc(env(safe-area-inset-bottom) + 28px); }
.hero { display: flex; align-items: center; gap: 16px; padding: 20px 4px 12px; }
.hero-icon { display: block; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; flex: none; }
.hero-icon img { display: block; width: 56px; height: 56px; }
.hero-title { font-size: 22px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.2; }
.hero-sub { color: var(--text-2); font-size: 14px; line-height: 1.4; margin-top: 2px; }
.menu-title { color: var(--text-2); font-size: 13px; font-weight: 500; margin: 20px 16px 6px; }
.menu-title:first-child { margin-top: 12px; }
.menu { background: var(--surface); border: 1px solid var(--outline-2); border-radius: var(--r-md); overflow: hidden; margin-bottom: 16px; }
.menu-row {
  width: 100%; display: flex; align-items: center; gap: 16px;
  min-height: 56px; padding: 8px 12px 8px 16px;
  background: none; border: 0;
  color: var(--text); font: inherit; font-size: 15px; text-align: left;
  position: relative; transition: background-color 0.15s ease;
}
.menu-row + .menu-row::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; border-top: 1px solid var(--outline-2); }
.menu-row:has(.glyph) + .menu-row::before { left: 72px; }
.menu-row.pressed { background: var(--surface-4); transition: none; }
label.menu-row { cursor: default; }
label.menu-row .lbl { flex: 1; }
.menu-row .glyph { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); display: grid; place-items: center; flex: none; }
.menu-row .glyph svg { width: 20px; height: 20px; }
.menu-row .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-row .val { color: var(--text-2); font-size: 14px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.menu-row .chev { color: var(--text-3); flex: none; }
.settings .section { padding-top: 12px; }
.settings .section .menu { margin-bottom: 12px; }
.settings .section h3 { margin: 20px 4px 8px; font-size: 14px; font-weight: 500; color: var(--text); }
.settings .section h3:first-child { margin-top: 4px; }
.settings .hint { color: var(--text-2); font-size: 13px; margin: 0 4px 10px; line-height: 1.45; }
.settings .desc { color: var(--text-2); font-size: 13px; line-height: 1.45; margin: -2px 4px 10px; }
.settings .foot { color: var(--text-2); font-size: 13px; line-height: 1.45; margin: -4px 4px 20px; }
.settings .foot:empty { display: none; }
.settings .section .menu + .foot, .settings .section .card + .foot { margin-top: -4px; }
.settings .autosave { margin: -8px 4px 14px; }
.settings .card .hint, .settings .card p.hint { margin-left: 0; margin-right: 0; }
.settings .card { background: var(--surface); border: 1px solid var(--outline-2); border-radius: var(--r-md); padding: 16px; margin-bottom: 12px; }
.settings .card .name, .settings .sdedit .name { font-size: 15px; font-weight: 500; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.settings label.f { display: block; margin-top: 12px; }
.settings label.f span { display: block; color: var(--text-2); font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.settings input[type="text"], .settings input[type="email"], .settings input[type="password"], .settings input[type="time"], .settings input[type="number"], .settings textarea, .settings select {
  width: 100%; min-width: 0; background: var(--surface); color: var(--text);
  border: 1px solid var(--outline); border-radius: var(--r-sm); padding: 9px 12px; font-size: 15px; font-family: var(--font);
  -webkit-appearance: none; appearance: none;
}
.settings input[type="time"] { min-height: 42px; }
.settings input:focus, .settings textarea:focus, .settings select:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
.settings textarea { min-height: 88px; resize: vertical; line-height: 1.4; }
.settings select { width: auto; padding: 6px 10px; font-size: 14px; }
.settings label.f select { width: 100%; padding: 9px 12px; font-size: 15px; }
.settings .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.settings .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 380px) { .settings .row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Buttons: filled for the one thing to do, tonal for the rest, plain red for removal. */
.settings .save { margin-top: 14px; height: 40px; background: var(--primary-fill); color: var(--on-primary); border: 0; border-radius: 999px; padding: 0 20px; font-size: 14px; font-weight: 500; }
.settings .ghost { margin-top: 14px; margin-left: 8px; height: 40px; background: var(--primary-container); color: var(--on-primary-container); border: 0; border-radius: 999px; padding: 0 16px; font-size: 14px; font-weight: 500; }
.settings .danger { margin-top: 14px; margin-left: 8px; height: 40px; background: transparent; color: var(--danger); border: 0; border-radius: 999px; padding: 0 12px; font-size: 14px; font-weight: 500; }
.settings .saved { color: var(--ok); font-size: 13px; margin-left: 10px; }
.settings .budget-row { display: grid; grid-template-columns: 1fr 84px 80px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--outline-2); }
.settings .budget-row:last-child { border-bottom: 0; }
.settings .budget-row .lbl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
/* The area's colour dot, and the palette it opens: Google Calendar's twelve, the current one ticked. */
.settings .budget-row .lbl { position: relative; }
.settings .swatch-pick, .swatch-pick { width: 22px; height: 22px; min-height: 0; border-radius: 50%; border: 0; padding: 0; margin: 0; cursor: pointer; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.swatch-pick[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.palette { position: absolute; left: 0; top: 30px; z-index: 6; display: grid; grid-template-columns: repeat(6, 28px); gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--outline-2); border-radius: var(--r-md); box-shadow: var(--shadow-3); animation: fab-in 0.15s ease-out; }
.palette .pal { width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; color: #fff; cursor: pointer; transition: transform 0.12s ease; }
.palette .pal svg { opacity: 0; }
.palette .pal.on svg { opacity: 1; }
.palette .pal:active { transform: scale(0.92); opacity: 1; }
.settings .swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.settings .actual { color: var(--text-2); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.settings .toggle { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; }
.settings .toggle input { accent-color: var(--primary-fill); width: 16px; height: 16px; }
/* Action rows in a list. */
.menu-row.action { color: var(--primary); justify-content: center; text-align: center; font-weight: 500; }
.menu-row.action.destructive { color: var(--danger); }
.menu-row.action:disabled { color: var(--text-3); }
/* Segmented control, Google's: joined outlined pills, the chosen one filled in the accent tint. */
.settings .seg, .seg { display: inline-flex; border: 1px solid var(--outline); border-radius: 999px; overflow: hidden; }
.settings .seg button, .seg button { border: 0; border-left: 1px solid var(--outline); background: transparent; padding: 8px 18px; font-size: 14px; font-weight: 500; color: var(--text); }
.settings .seg button:first-child, .seg button:first-child { border-left: 0; }
.settings .seg button.on, .seg button.on { background: var(--primary-container); color: var(--on-primary-container); box-shadow: none; }
.seg { display: flex; margin: 8px 0 4px; }
.seg button { flex: 1; }
.settings .addrow { display: flex; gap: 8px; align-items: center; }
.settings .addrow input { flex: 1; }
.settings .addrow .save { margin-top: 0; }
.settings .filepick { display: none; }
.settings .view p { margin: 6px 0 0; font-size: 14px; white-space: pre-line; line-height: 1.45; }
.settings .view p.objective { font-weight: 500; font-size: 15px; }
.settings .view p.muted { color: var(--text-2); }
.settings .view p.plan-full { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--outline-2); }
.settings .badge { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
/* Standard day rows: a block's title over its days and times; open, a form in the same list. */
.menu-row.two { min-height: 64px; }
.menu-row.two .lbl { min-width: 0; overflow: hidden; }
.menu-row.two .lbl .sub { display: block; color: var(--text-2); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings .sdedit { position: relative; padding: 4px 16px 14px; }
.settings .menu-row + .sdedit::before, .settings .sdedit + .menu-row.action::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; border-top: 1px solid var(--outline-2); }
.menu-row .val.ok { color: var(--ok); font-weight: 500; }
/* A month against a ceiling (18 Sep, packaging): plain figures, red only once there is nothing left. The invitation
   link is a long string in a box that fills its card, so it can be tapped, selected and copied on a phone. */
.settings .check .val { font-variant-numeric: tabular-nums; }
.settings .check .val.over { color: var(--danger); font-weight: 500; }
.settings .invite-link input { margin-top: 4px; font-size: 14px; }
/* A person's second line carries four things (their email, when they were last here, whether Marv has met them, what
   they have cost), so it wraps instead of being cut off at the edge of a phone the way a standard-day block's does. */
.menu-row.person { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.menu-row.person .lbl { white-space: normal; }
.menu-row.person .lbl .sub { white-space: normal; }
.menu-row.person .chev { margin-top: 2px; }
.settings .daypick { display: flex; gap: 6px; margin-bottom: 4px; }
.settings .daypick button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--outline); background: none; color: var(--text-2); font-size: 13px; font-weight: 500; padding: 0; }
.settings .daypick button.on { background: var(--primary-fill); border-color: var(--primary-fill); color: var(--on-primary); }

/* Switch rows and the switch itself, as Google draws it. */
.check { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--outline-2); min-height: 48px; }
.check:last-child { border-bottom: 0; }
.check .label { flex: 1; font-size: 15px; }
.check .label .sub { display: block; color: var(--text-2); font-size: 13px; margin-top: 2px; white-space: normal; }
.check .hint { color: var(--text-2); font-size: 13px; margin: 0; }
.settings .check .hint { margin: 0; }
input.switch {
  -webkit-appearance: none; appearance: none;
  width: 52px; height: 32px; border-radius: 999px; flex: none; margin: 0;
  border: 2px solid var(--text-2); background: var(--surface-3); position: relative; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
input.switch::before {
  content: ""; position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-2); transition: transform 0.2s, width 0.2s, height 0.2s, top 0.2s, left 0.2s, background 0.2s;
}
input.switch:checked { background: var(--primary-fill); border-color: var(--primary-fill); }
input.switch:checked::before { background: var(--on-primary); width: 24px; height: 24px; top: 2px; left: 2px; transform: translateX(20px); }
input.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
input.switch:focus { outline: none; }

/* ---------- Dialogs ---------- */
dialog {
  border: 0; border-radius: var(--r-xl);
  background: var(--surface); color: var(--text);
  padding: 24px; width: min(92vw, 440px);
  box-shadow: var(--shadow-4);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
dialog h2 { font-weight: 400; margin: 0 0 8px; font-size: 24px; letter-spacing: -0.2px; }
dialog p { color: var(--text-2); margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
dialog input[type="password"], dialog input[type="text"], dialog input[type="email"], dialog input[type="date"], dialog input[type="time"] {
  width: 100%; background: var(--surface); color: var(--text); min-height: 44px;
  border: 1px solid var(--outline); border-radius: var(--r-sm); padding: 10px 12px; font-size: 15px;
  -webkit-appearance: none; appearance: none;
}
dialog input:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
dialog .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
dialog button { height: 40px; background: none; color: var(--primary); border: 0; border-radius: 999px; padding: 0 16px; font-size: 14px; font-weight: 500; }
dialog button.primary { background: var(--primary-fill); color: var(--on-primary); padding: 0 24px; }
.field { display: block; margin-top: 14px; }
.field span { display: block; color: var(--text-2); font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.group-title { color: var(--text-2); font-size: 13px; font-weight: 500; margin: 16px 0 2px; }
.create-row { display: flex; gap: 10px; }
.create-row .field { flex: 1; min-width: 0; }
dialog .foot { color: var(--text-2); font-size: 13px; margin: 12px 0 0; line-height: 1.45; }
/* The All day and trip switches in Create, and the chip dialog's row with Remove on the left. */
dialog .check.create-allday { margin-top: 12px; padding: 6px 0; border-bottom: 0; min-height: 44px; }
dialog .check .label { font-size: 15px; }
dialog .check .label .sub { display: block; color: var(--text-2); font-size: 12px; margin-top: 1px; }
dialog .check.chip-trip { padding: 0; border: 0; min-height: 44px; }
dialog .row .spacer { flex: 1; }
dialog button.danger { color: var(--danger); }
dialog input:disabled { color: var(--text-2); background: var(--surface-2); }
/* The way in (18 Sep, packaging): one screen, two ways. The segmented control chooses which set of fields shows,
   and a refusal ("that email and password do not match") says so under them rather than in an alert. */
#setup .seg { margin: 4px 0 16px; }
#setup .seg button { white-space: nowrap; padding: 8px 12px; }
#setup .field { margin-top: 12px; }
#setup #setup-error { color: var(--danger); }
.month .mchip { cursor: pointer; }

/* ---------- Motion: light, quick, and off for anyone who asked for less ---------- */
.settings.push { animation: pushin 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.settings.pop { animation: popin 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes pushin { from { transform: translateX(28%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes popin { from { transform: translateX(-22%); opacity: 0; } to { transform: none; opacity: 1; } }
.msg.new { animation: bubble 0.28s cubic-bezier(0.32, 0.72, 0, 1); }
.msg.james.new { transform-origin: bottom right; }
.msg.marv.new { transform-origin: bottom left; }
@keyframes bubble { from { transform: scale(0.92) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.plan.animate .block { animation: settle 0.36s cubic-bezier(0.32, 0.72, 0, 1) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes settle { from { transform: translateY(10px); opacity: 0; } }
button { transition: transform 0.12s ease, opacity 0.12s ease, background-color 0.15s ease, color 0.15s ease; }
.week, .plan { animation: fadein 0.22s ease-out; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; }
}

/* ---------- The calendar: the month and the week ---------- */
.week { display: flex; flex-direction: column; gap: 8px; }
/* On the phone the row under the bar carries the arrows and the Month/Week switch; on the Mac the bar has them. */
.week-nav { display: flex; align-items: center; gap: 4px; padding: 0 0 4px; }
.week-nav .segmented { margin-left: auto; }
@media (min-width: 1000px) { body.cal-split .week-nav { display: none; } }
/* The week's review, once its Sunday has written it. */
.review { background: var(--surface); border: 1px solid var(--outline-2); border-radius: var(--r-md); padding: 14px 16px 12px; }
.review .kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-2); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.review .badge { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.review .badge.yes { background: var(--primary-container); color: var(--on-primary-container); }
.review .badge.no { background: var(--danger-container); color: var(--danger); }
.review .text { margin: 8px 0 0; font-size: 15px; line-height: 1.45; }
.review .verdicts { margin-top: 12px; border-top: 1px solid var(--outline-2); padding-top: 8px; }
.review .verdict { display: grid; grid-template-columns: 10px 84px 1fr; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 14px; }
.review .verdict .swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; position: relative; top: -1px; }
.review .verdict .aname { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review .verdict .vline { color: var(--text-2); }
.review .verdict.short .vline, .review .verdict.over .vline { color: var(--text); }
.review .next { margin-top: 12px; border-top: 1px solid var(--outline-2); padding-top: 10px; }
.review .nkicker { color: var(--text-2); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.review .nhours { font-size: 14px; margin-top: 4px; line-height: 1.5; }
.review .nnote { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.review .link, .review-line { background: none; border: 0; color: var(--primary); font: inherit; font-size: 14px; font-weight: 500; padding: 8px 0 0; }
/* The week's review as one row (21 Sep): minimised on the week, opened over the calendar in a dialog. */
.review-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--outline-2); border-radius: var(--r-md); padding: 10px 14px; font: inherit; color: var(--text); cursor: pointer; }
.review-row .kicker { color: var(--text-2); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.review-row .badge { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.review-row .badge.yes { background: var(--primary-container); color: var(--on-primary-container); }
.review-row .badge.no { background: var(--danger-container); color: var(--danger); }
@media (hover: hover) { .review-row:hover { background: var(--surface-2); } }
.review.flat { background: none; border: 0; border-radius: 0; padding: 0; }
#budgets-dialog .budgets-card { background: none; border: 0; padding: 0; }
.muted.fault { color: var(--danger); }
#review-dialog .review .text:first-child { margin-top: 0; }
.review-line { padding: 4px 8px; font-size: 13px; text-align: left; }
.budgets { display: flex; flex-direction: column; gap: 6px; }
.budgets-card { background: var(--surface); border: 1px solid var(--outline-2); border-radius: var(--r-md); padding: 12px 16px 8px; }
.budgets .brow { display: grid; grid-template-columns: 92px 1fr 96px; gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; }
.budgets .brow .bname { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.budgets .bar { height: 6px; border-radius: 999px; background: var(--surface-4); position: relative; overflow: hidden; }
.budgets .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.budgets .bar i.done { background: var(--c); }
.budgets .bar i.plan { background: var(--c); opacity: 0.3; }
.budgets .bnum { color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; font-size: 12px; }
.budgets .bnum.over { color: var(--danger); }
.budgets .bplan { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }   /* the faint part of the bar, in words (2 Oct) */
.budgets .bhint { color: var(--text-2); font-size: 13px; margin: 0 0 8px; }
.budgets .swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
/* The week grid: a column per day, the hours down the side, blocks placed by time; runs to the screen's edges on the phone. */
.grid-wrap { overflow: hidden; touch-action: pan-y; margin: 0 -16px; }
/* align-content: a week pane stretched to a busier neighbour's height (the panes share the sliding track's row) keeps its
   rows packed at the top, rather than sharing the extra height out between its heads, its band and its hours (17 Sep). */
.grid { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); align-content: start; min-width: 360px; position: relative; }
.grid .dh { padding: 8px 2px 8px; text-align: center; font-size: 11px; font-weight: 500; color: var(--text-2); border-bottom: 1px solid var(--outline-2); background: none; border-left: 0; border-right: 0; border-top: 0; font-family: inherit; cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; }
.grid .dh b { display: block; margin: 2px auto 0; width: 36px; height: 36px; line-height: 36px; border-radius: 50%; font-size: 20px; font-weight: 400; color: var(--text); letter-spacing: 0; }
.grid .dh.today { color: var(--primary); }
.grid .dh.today b { background: var(--primary-fill); color: var(--on-primary); font-weight: 500; }
.grid .dh .st { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; }
.grid .dh .st.yes { background: var(--ok); }
.grid .dh .st.no { background: var(--danger); }
.grid .dh .st.none { background: var(--outline); }
.grid .axis { position: relative; }
.grid .axis span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 10px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.grid .col { position: relative; border-left: 1px solid var(--outline-2); cursor: pointer; }
.grid .col.today { background: var(--primary-soft); }
:root[data-theme="light"] .grid .col.today { background: rgba(30, 142, 62, 0.05); }
.grid .hl { position: absolute; left: 0; right: 0; border-top: 1px solid var(--outline-2); }
.grid .blk { position: absolute; left: 2px; right: 3px; border-radius: 4px; padding: 3px 5px; font-size: 11px; font-weight: 500; line-height: 1.25; overflow: hidden; color: var(--chip-text); background: var(--c, var(--text-2)); border: 0; text-align: left; font-family: inherit; cursor: pointer; box-shadow: 0 0 0 1px var(--surface); }
.grid .blk.fixed { background: var(--surface); color: var(--text); border: 1px solid var(--outline); box-shadow: none; }
.grid .blk.tpl { background: transparent; color: var(--text); border: 1px dashed var(--c, var(--text-2)); opacity: 0.85; box-shadow: none; }
.grid .blk.tpl::before { content: ""; position: absolute; inset: 0; background: var(--c, var(--text-2)); opacity: 0.12; }
.grid .blk.missed { opacity: 0.35; text-decoration: line-through; }
.grid .blk.happened { opacity: 0.7; }
.grid .blk.past { opacity: 0.55; }
.grid .nowline { position: absolute; left: 0; right: 0; border-top: 2px solid var(--now); z-index: 2; }
.grid .nowline::before { content: ""; position: absolute; left: -6px; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--now); }
/* The week's all-day band (17 Sep): a row between the heads and the hours, a cell per day under the bars. */
.grid .adgut { border-bottom: 1px solid var(--outline-2); }
.grid .adc { border-left: 1px solid var(--outline-2); border-bottom: 1px solid var(--outline-2); cursor: pointer; }
.grid .adc.today { background: var(--primary-soft); }
:root[data-theme="light"] .grid .adc.today { background: rgba(30, 142, 62, 0.05); }

/* The month: weekday letters, a cell per day, today circled, the neighbours' days greyed, chips for commitments. */
.month-wrap { touch-action: pan-y; margin: 0 -16px; overflow: hidden; }
.cal-track { display: flex; width: 300%; transform: translateX(-33.3333%); }
.cal-track > .month { width: 33.3333%; flex: none; }
.cal-track > .grid { width: 33.3333%; min-width: 0; flex: none; }
.month { display: grid; grid-template-columns: repeat(7, 1fr); }
.month .mwd { text-align: center; font-size: 11px; font-weight: 500; color: var(--text-2); padding: 8px 0 6px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--outline-2); }
.month .mday { position: relative; height: 96px; min-height: 0; padding: 4px 4px 4px; background: none; border: 0; border-bottom: 1px solid var(--outline-2); border-right: 1px solid var(--outline-2); font: inherit; color: var(--text); display: flex; flex-direction: column; align-items: stretch; gap: 2px; overflow: hidden; cursor: pointer; text-align: left; transition: background-color 0.15s ease; }
.month .mday:nth-child(7n + 7) { border-right: 0; }
.month .mday.out .mnum { color: var(--text-3); }
.month .mnum { align-self: center; width: 26px; height: 26px; line-height: 26px; text-align: center; font-size: 12px; font-weight: 500; border-radius: 50%; flex: none; color: var(--text); }
.month .mday.today .mnum { background: var(--primary-fill); color: var(--on-primary); }
.month .mday.sel { background: var(--primary-container); }   /* the days a drag has crossed (17 Sep) */
.month .mday { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }   /* a press and hold draws a range, never a menu */
@media (hover: hover) { .month .mnum:hover { background: var(--surface-3); cursor: pointer; } .month .mday.today .mnum:hover { background: var(--primary-fill); opacity: 0.9; } }
/* The day's state under its number: a ring for planned, filled green for closed and counted, grey for closed and not. */
.month .mdot { align-self: center; width: 6px; height: 6px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--primary); background: none; flex: none; margin-top: 3px; }
.month .mdot.yes { background: var(--ok); border-color: var(--ok); }
.month .mdot.no { background: var(--text-3); border-color: var(--text-3); }
.month .mdot.past { border-color: var(--text-3); }
.month .mdot.none { background: var(--outline); border-color: var(--outline); }   /* closed by Marv without a report (17 Sep): filled, but faint */
/* The chips sit on the grid itself, not in the cells, each in a lane below the number (app.js lays the lanes, a
   week at a time, from --chip-h and --lane-h). So an entry over several days is one bar across its days, drawn over
   the cells' edges (James, 17 Sep: "could the bar on the days connect"), and a click anywhere on it opens the whole entry. */
/* The week's all-day band draws the same bars (17 Sep), a little tighter to its narrower days. */
.month, .grid { --chip-h: 20px; --lane-h: 22px; }
.month .mchip, .grid .mchip { display: block; align-self: start; z-index: 1; margin: 0 4px; font-size: 11px; font-weight: 500; line-height: var(--chip-h); height: var(--chip-h); padding: 0 6px; border-radius: 4px; background: var(--c, var(--text-3)); color: var(--chip-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; cursor: pointer; }
.grid .mchip { margin: 0 2px; padding: 0 5px; }
.month .mchip.timed { background: none; color: var(--text); padding-left: 16px; position: relative; }
.month .mchip.timed::before { content: ""; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-3)); }
.month .mchip.cut-l, .grid .mchip.cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }    /* in from last week */
.month .mchip.cut-r, .grid .mchip.cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }  /* on into next week */
.month .mmore, .grid .mmore { align-self: start; z-index: 2; margin: 0 4px; height: var(--chip-h); line-height: var(--chip-h); font-size: 11px; font-weight: 500; color: var(--text-2); padding: 0 6px; text-align: left; border-radius: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid .mmore { margin: 0 2px; padding: 0 4px; }
@media (max-width: 599px) { .month .mmore .mw, .grid .mmore .mw { display: none; } }   /* "+2" on the phone, where "+2 more" does not fit a day */
.month.dragging .mchip, .month.dragging .mmore { pointer-events: none; }   /* a range being drawn crosses the days, not their chips */
@media (min-width: 1000px) {
  body.cal-split .month .mday { height: max(96px, calc((100vh - 130px) / 6)); height: max(96px, calc((100dvh - 130px) / 6)); }
  body.cal-split .month-wrap, body.cal-split .grid-wrap { margin: 0; }
  body.cal-split .grid { grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
  body.cal-split .month, body.cal-split .grid { --chip-h: 22px; --lane-h: 24px; }
  body.cal-split .month .mchip, body.cal-split .month .mmore, body.cal-split .grid .mchip, body.cal-split .grid .mmore { font-size: 12px; }
}

.pane-head { padding: 0 4px 12px; }
.pane-head .pdate { font-size: 22px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.2; }
.pane-head .psub { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.pane-head .psub .link { background: none; border: 0; color: var(--primary); font: inherit; font-size: 13px; font-weight: 500; padding: 0; }

/* ---------- Reminders: on the day, and the page of them ---------- */
.reminders-line { margin-top: 12px; }
.reminders-line .rem-head, .rem-page .rem-head, .live-routine .rem-head { padding: 6px 4px 6px; color: var(--text); font-size: 14px; font-weight: 500; }
.reminders-line .rem-group, .rem-page .rem-group { background: var(--surface); border: 1px solid var(--outline-2); border-radius: var(--r-md); overflow: hidden; margin-bottom: 12px; }
.rem-inline { margin: 0; }
.plan .rem-group { background: var(--surface); border: 1px solid var(--outline-2); border-radius: var(--r-md); }
.rem-row { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 12px; min-height: 48px; }
/* A row and its steps as one item (17 Sep): the hairline sits on the item, so the steps stay inside it. */
.rem-item { border-bottom: 1px solid var(--outline-2); }
.rem-item:last-child { border-bottom: 0; }
.rem-steps .rem-item { border-bottom: 0; }
.rem-steps .rem-row.rem-step { min-height: 40px; padding-left: 40px; }
.rem-steps .rem-step .rem-check { width: 18px; height: 18px; }
.rem-steps .rem-step .rem-check:checked::after { width: 4px; height: 8px; }
.rem-steps .rem-step .rem-body { padding: 6px 8px 6px 6px; cursor: default; }
.rem-steps .rem-step .rem-text { font-size: 14px; }
.live-routine .rem-steps .rem-row.rem-step { padding-left: 28px; min-height: 34px; }
/* Tags and files on a row (17 Sep): small chips under the words; a paperclip with the count. */
.rem-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.rem-tag { font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.rem-clip { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; line-height: 18px; color: var(--text-2); }
.rem-tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 4px 8px; }
.rem-tagbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--outline); background: none; color: var(--text); font: inherit; font-size: 13px; }
.rem-tagbtn .n { font-size: 11px; color: var(--text-2); }
.rem-tagbtn.on { background: var(--primary-container); border-color: var(--primary-container); color: var(--on-primary-container); }
/* A list's colour and icon (17 Sep): on its header, and its colour on the ticks of its rows. */
.rem-list-name { display: inline-flex; align-items: center; gap: 8px; }
.rem-list-icon { font-size: 16px; line-height: 1; }
.rem-list-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.rem-list-head.coloured .rem-list-name > span:last-child { color: var(--c); }
.rem-row .rem-check { border-color: var(--tick, var(--text-2)); }
.rem-row .rem-check:checked { border-color: var(--tick, var(--primary-fill)); background: var(--tick, var(--primary-fill)); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; background: var(--c); padding: 0; cursor: pointer; }
.swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.swatch.none { background: none; border: 2px solid var(--outline); position: relative; }
.swatch.none::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: var(--outline); transform: rotate(-45deg); }
.swatch.none.on { border-color: var(--text); }
.icons { display: flex; flex-wrap: wrap; gap: 6px; }
.iconbtn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--outline); background: none; font-size: 18px; line-height: 1; padding: 0; cursor: pointer; }
.iconbtn.on { background: var(--primary-container); border-color: var(--primary-container); }
.iconbtn.none { font-size: 16px; color: var(--text-2); }
/* Files and images in the edit dialog (17 Sep). */
.file-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.file-cell { position: relative; }
.file-tile { width: 72px; height: 72px; border-radius: var(--r-sm); border: 1px solid var(--outline); background: var(--surface-2); padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-2); overflow: hidden; cursor: pointer; }
.file-tile.image { padding: 0; }
.file-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-tile .file-name { font-size: 10px; line-height: 1.2; color: var(--text-2); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-cell .file-x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: var(--surface); border: 1px solid var(--outline); opacity: 1; }
.file-cell.add { display: flex; align-items: center; }
/* The grip (17 Sep): dots at the end of a row where the order is his; lifted, the item floats over the list. */
.rem-grip { flex: none; width: 36px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--text-3); padding: 0; cursor: grab; touch-action: none; border-radius: 50%; }
.rem-grip:active { cursor: grabbing; }
.sortable.drag-on .rem-item { transition: transform 0.15s ease; }
.rem-item.dragging { position: relative; z-index: 2; background: var(--surface); box-shadow: var(--shadow-2, 0 4px 12px rgba(0, 0, 0, 0.18)); border-radius: var(--r-sm); transition: none; }
.sortable.drag-on { user-select: none; -webkit-user-select: none; }
/* Steps in the edit dialog (17 Sep): each with a cross, and a row to add one. */
.steps { display: flex; flex-direction: column; gap: 2px; }
.step-row { display: flex; align-items: center; gap: 4px; min-height: 36px; padding-left: 8px; border-bottom: 1px solid var(--outline-2); }
.step-row .step-text { flex: 1; min-width: 0; font-size: 15px; }
.step-row .step-text.done { color: var(--text-2); opacity: 0.7; }
.step-add { width: 100%; min-height: 40px; padding: 0 8px; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; outline: none; }
.step-add::placeholder { color: var(--text-2); }
/* The tick, then the words as a button that opens the reminder (16 Sep), with its notes and rule on a second line. */
.rem-tick { flex: none; display: grid; place-items: center; padding: 10px 6px 10px 0; cursor: pointer; }
.rem-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 8px 9px 6px; background: none; border: 0; border-radius: var(--r-sm); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rem-text { display: block; width: 100%; min-width: 0; font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.rem-sub { display: block; width: 100%; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rem-when { flex: none; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; border: 1px solid var(--outline); border-radius: 6px; padding: 1px 6px; }
.rem-when.overdue { color: var(--danger); border-color: var(--danger); }
/* A ticked row dims, nothing more (James, 17 Sep: "dim a bit when checked, not even a strike through"). */
.rem-row.done .rem-text { color: var(--text-2); text-decoration: none; }
.rem-row.done { opacity: 0.55; }
.rem-hide { height: 32px; padding: 0 12px; font-size: 13px; }
.rem-x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; color: var(--text-3); border-radius: 50%; padding: 0; }
@media (hover: hover) { .rem-row .rem-x { opacity: 0; } .rem-row:hover .rem-x, .rem-x:focus-visible { opacity: 1; } }
.rem-check { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--text-2); border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; }
.rem-check:checked { border-color: var(--primary-fill); background: var(--primary-fill); }
.rem-check:checked::after { content: ''; display: block; width: 5px; height: 10px; margin-top: -2px; border: solid var(--on-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.live-routine { margin-top: 12px; border-top: 1px solid var(--outline-2); padding-top: 4px; }
.live-routine .rem-head { padding: 4px 0 2px; font-size: 12px; font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.live-routine .rem-row { padding: 0; min-height: 40px; border-bottom: 0; }
.rem-done-head { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px 0 8px; border-radius: 999px; background: none; border: 0; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; text-align: left; }
.rem-done-head .chev { transition: transform 0.2s; order: -1; }
.rem-done-head.open .chev { transform: rotate(180deg); }
.rem-page { margin-top: 4px; }
.rem-add { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; padding: 0 8px; min-height: 48px; }
.rem-add::before { content: ""; width: 24px; height: 24px; flex: none; background: currentColor; color: var(--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E") center / 24px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E") center / 24px no-repeat; }
.rem-add input { flex: 1; font: inherit; font-size: 15px; padding: 10px 0; border: 0; background: none; color: var(--text); outline: none; }
.rem-add input::placeholder { color: var(--text-2); }
.rem-add:focus-within { background: var(--surface-2); border-radius: var(--r-sm); }
.rem-page .foot { color: var(--text-2); font-size: 13px; line-height: 1.45; margin: 4px 4px 0; }
@media (min-width: 1000px) { body.cal-split .rem-page { max-width: 720px; margin: 8px auto 0; padding: 0 8px; } }

/* Lists and urgency (16 Sep): a flag on each to-do (red when high, faint when normal), list headers with their own
   add and delete, and a row to start a new list. */
.rem-flag { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 6px; border: 0; border-radius: 999px; background: none; color: var(--text-3); font-size: 12px; font-weight: 500; }
.rem-flag.normal { opacity: 0.45; }
.rem-flag.high { color: var(--danger); opacity: 1; }
.rem-flag.low { color: var(--text-2); opacity: 1; }
.rem-flag.low svg { opacity: 0.5; }
.rem-row.high .rem-text { font-weight: 500; }
.rem-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rem-tools { display: inline-flex; gap: 2px; }
.rem-tool { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: var(--text-3); display: grid; place-items: center; padding: 0; }
.rem-newlist-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 12px; }
/* The page's two sections (16 Sep): Reminders on no list, then every list of his own as a card with a pencil. */
.rem-section { font-size: 22px; font-weight: 400; letter-spacing: -0.2px; margin: 8px 4px 4px; color: var(--text); }
.rem-section-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 20px; }
.rem-section-row .rem-section { margin-top: 0; }
.rem-list-title { display: flex; flex-direction: column; min-width: 0; }
.rem-list-sub { font-size: 12px; font-weight: 400; color: var(--text-2); }
.rem-empty { color: var(--text-2); font-size: 14px; margin: 0 4px 16px; }
dialog textarea { width: 100%; min-height: 64px; resize: vertical; background: var(--surface); color: var(--text); border: 1px solid var(--outline); border-radius: var(--r-sm); padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.4; }
dialog textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
dialog .check.list-repeat { margin-top: 14px; }
dialog select { width: 100%; min-height: 44px; background: var(--surface); color: var(--text); border: 1px solid var(--outline); border-radius: var(--r-sm); padding: 0 12px; font: inherit; font-size: 15px; }
dialog select:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
.seg.small { margin: 0; }
.seg.small button { padding: 0 8px; height: 42px; font-size: 13px; }
#create-extra .field { flex: 1; min-width: 0; }
#create-extra .field > span { display: block; color: var(--text-2); font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.live .then { white-space: normal; }

/* ---------- The drawer: the phone's menu, from the left ---------- */
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 20;
  width: min(304px, 84vw);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: 0 16px 16px 0;
  box-shadow: var(--shadow-4);
  padding: calc(env(safe-area-inset-top) + 12px) 12px 16px;
  overflow-y: auto;
  animation: drawer-in 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer.closing { animation: drawer-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes drawer-in { from { transform: translateX(-105%); } to { transform: none; } }
@keyframes drawer-out { to { transform: translateX(-105%); } }
.drawer-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 20px; font-size: 22px; font-weight: 500; letter-spacing: -0.2px; color: var(--text); }
.drawer-head img { border-radius: 8px; width: 32px; height: 32px; }
.drawer .menu { background: none; border: 0; border-radius: 0; margin: 0; }
.drawer .menu-row { border-bottom: 0; border-radius: 999px; min-height: 56px; padding: 8px 24px 8px 16px; gap: 12px; }
.drawer .menu-row::before { display: none; }
.drawer .menu-row .glyph { background: none; width: 24px; height: 24px; color: var(--text-2); }
.drawer .menu-row .glyph svg { width: 24px; height: 24px; }
.drawer .menu-row .lbl { font-size: 14px; font-weight: 500; }
.drawer .menu-row.active { background: var(--primary-container); }
.drawer .menu-row.active .lbl, .drawer .menu-row.active .glyph { color: var(--on-primary-container); }
.burger { flex: none; }

/* Hover states, only where a pointer can hover: a finger on the phone never leaves a row lit. */
@media (hover: hover) {
  .icon-btn:hover { background: var(--surface-3); color: var(--text); }
  .btn-outlined:hover { background: var(--surface-3); }
  .btn-filled:hover { background: var(--primary-hover); box-shadow: var(--shadow-1); }
  .btn-text:hover { background: var(--primary-soft); }
  .segmented button:hover { background: var(--surface-3); }
  .inbox-line .inbox-head:hover { background: var(--surface-3); }
  .earlier:hover { background: var(--surface-3); }
  .fab:hover { box-shadow: var(--shadow-4); }
  .fab-item:hover .mini { background: var(--surface-3); }
  .sheet-head button:hover { background: var(--primary-soft); }
  .sheet-head button.icon-btn:hover { background: var(--surface-3); }
  .msg .speak:hover { background: var(--surface-4); }
  .quick button:hover { background: var(--surface-3); }
  #send:hover { background: var(--primary-hover); }
  #mic:hover { background: var(--surface-3); color: var(--text); }
  .menu-row:hover { background: var(--surface-3); }
  .settings .save:hover { background: var(--primary-hover); }
  .settings .danger:hover { background: var(--danger-container); }
  dialog button:hover { background: var(--primary-soft); }
  dialog button.primary:hover { background: var(--primary-hover); }
  .grid .dh:hover b { background: var(--surface-3); }
  .month .mday:hover { background: var(--surface-2); }
  .month .mchip.timed:hover { background: var(--surface-3); }
  .rem-x:hover { background: var(--surface-3); color: var(--text); }
  /* The hover on the words says "press to change": on the page only; in the live card and the day's strip a row
     stays plain under the mouse (James, 17 Sep). */
  .rem-page .rem-body:hover { background: var(--surface-2); }
  .rem-page .rem-body:hover .rem-text { color: var(--primary); }
  .rem-check:hover { border-color: var(--text); background: var(--surface-3); }
  .rem-done-head:hover { background: var(--surface-3); }
  .icon-btn.on:hover { background: var(--primary-container); color: var(--on-primary-container); }
  .segmented button.on:hover, .seg button.on:hover, .settings .seg button.on:hover { background: var(--primary-container); }
  .msg .speak.on:hover { background: var(--primary-container); }
  .rem-check:checked:hover { border-color: var(--primary-fill); background: var(--primary-fill); }
  .rem-flag:hover { background: var(--surface-3); opacity: 1; color: var(--text); }
  .rem-flag.high:hover { color: var(--danger); }
  .rem-tool:hover { background: var(--surface-3); color: var(--text); }
  .palette .pal:hover { transform: scale(1.15); }
  dialog button.danger:hover { background: var(--danger-container); }
  .month .mchip:not(.timed):hover, .grid .mchip:hover { filter: brightness(0.92); }
  .month .mmore:hover, .grid .mmore:hover { background: var(--surface-3); }
  .rem-row .rem-flag.normal { opacity: 0; }
  .rem-row:hover .rem-flag.normal, .rem-flag.normal:focus-visible { opacity: 0.6; }
}

/* Live voice (17 Sep): the pill on a live line is green and its bars breathe, since nothing is being recorded here. */
#composer.live .listening { border-color: var(--primary); }
#composer.live .listening .bars i { background: var(--primary); animation: live-bars 1.2s ease-in-out infinite; }
#composer.live .listening .bars i:nth-child(2) { animation-delay: 0.15s; }
#composer.live .listening .bars i:nth-child(3) { animation-delay: 0.3s; }
#composer.live .listening .bars i:nth-child(4) { animation-delay: 0.45s; }
#composer.live .listening .bars i:nth-child(5) { animation-delay: 0.6s; }
#composer.live .listening .word { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes live-bars { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@media (prefers-reduced-motion: reduce) { #composer.live .listening .bars i { animation: none; height: 10px; } }

/* Settings > Engine (17 Sep): the keys, one folded row each. */
/* Keys (17 Sep): one folded row for each provider, with a tick when the provider accepts the key, a cross when it
   refuses it, and nothing at all when there is no key. The field is behind the row. */
.settings .card.keys { padding: 4px 0; }
.key-row { border-bottom: 1px solid var(--outline-2); }
.key-row:last-child { border-bottom: 0; }
.key-head { min-height: 48px; }
.key-head .val { display: grid; place-items: center; max-width: none; }
.key-head .chev { transition: transform 0.2s; }
.key-head.open .chev { transform: rotate(180deg); }
.menu-row .val.bad { color: var(--danger); font-weight: 500; }
.key-panel { padding: 2px 16px 14px; }
.key-panel .hint { white-space: normal; }
.key-input { display: flex; gap: 8px; margin-top: 8px; }
.key-input input { flex: 1; min-width: 0; }
.key-actions { display: flex; gap: 4px; margin-top: 4px; }
.key-result.bad { color: var(--danger); }
.key-result { margin: 4px 0 0; }
.key-result.bad { color: var(--danger); }