/* Marv in MARK TWO's idiom (30 Sep 2026): a second dress for the same page, switched on by data-skin="marktwo" on
   the html element (Settings > Appearance > Look, or ?skin=marktwo on the address). Nothing in here runs unless that
   attribute is set, so the classic look in styles.css is untouched and the two can be compared on the same day.

   The language, read off wearemarktwo.com: ink (#0f1111) and paper (#e2e4e1, #eceeeb), smoke for the second voice,
   hairlines rather than shadows, no rounded corners, Sora at 800 for the few big words, Archivo for the reading,
   DM Mono in small capitals for every label, time and button; a dark header over a paper page; the one hero element
   drawn in ink. The structure (the day down the left, the calendar as the page, the drawer and the dial on the phone)
   is exactly as before: only the dress changes, so every test and every finger habit still holds. */

/* ---------- Type: Sora, Archivo and DM Mono, self-hosted beside Google Sans Flex (all OFL 1.1, see /fonts/LICENSE.txt) ---------- */
@font-face { font-family: 'Sora'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/fonts/sora.woff2) format('woff2-variations'), url(/fonts/sora.woff2) format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/archivo.woff2) format('woff2-variations'), url(/fonts/archivo.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/dm-mono-500.woff2) format('woff2'); }

html[data-skin="marktwo"] {
  /* ---------- Tokens: the paper page ---------- */
  --ink: #0f1111;
  --ink-soft: #181b1a;
  --paper: #e2e4e1;
  --paper-bright: #eceeeb;
  --smoke: #6c706e;
  --font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: 'Sora', 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --bg: var(--paper);
  --surface: var(--paper-bright);
  --surface-2: #e7e9e6;
  --surface-3: #d8dbd7;
  --surface-4: #c9ccc8;
  --outline: rgba(15, 17, 17, 0.3);
  --outline-2: rgba(15, 17, 17, 0.14);
  --text: var(--ink);
  --text-2: var(--smoke);
  --text-3: #9a9e9b;
  --primary: var(--ink);
  --primary-fill: var(--ink);
  --primary-hover: #2a2d2c;
  --on-primary: var(--paper-bright);
  --primary-container: var(--ink);
  --on-primary-container: var(--paper-bright);
  --primary-soft: rgba(15, 17, 17, 0.08);
  --danger: #b3261e;
  --danger-container: rgba(179, 38, 30, 0.1);
  --ok: #2f7d4f;
  --now: var(--ink);
  --scrim: rgba(15, 17, 17, 0.5);
  /* No shadows on paper: a ring of one hairline does the lifting. */
  --shadow-1: 0 0 0 1px var(--outline-2);
  --shadow-2: 0 0 0 1px var(--outline);
  --shadow-3: 0 0 0 1px var(--outline);
  --shadow-4: 0 0 0 1px var(--outline);
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
  --tint: 0%;                    /* a block is paper with its area's bar, never a wash of its colour */
  --chip-text: #eceeeb;
  /* The bar is ink whatever the page is. */
  --bar-bg: var(--ink);
  --bar-fg: var(--paper-bright);
  --bar-fg-2: rgba(236, 238, 235, 0.62);
  --bar-line: rgba(236, 238, 235, 0.26);
  --bar-hover: rgba(236, 238, 235, 0.12);
  /* The hero (the live card) is the page's one ink block; in the dark it is the one paper block. */
  --hero-bg: var(--ink);
  --hero-fg: var(--paper-bright);
  --hero-fg-2: rgba(236, 238, 235, 0.66);
  --hero-line: rgba(236, 238, 235, 0.22);
  --hero-track: rgba(236, 238, 235, 0.2);
  --mono-size: 11px;
  --mono-ls: 0.04em;

  /* ---------- Tokens: the ink page ---------- */
  &[data-theme="dark"] {
    --bg: var(--ink);
    --surface: var(--ink-soft);
    --surface-2: #151817;
    --surface-3: #242827;
    --surface-4: #303433;
    --outline: rgba(236, 238, 235, 0.3);
    --outline-2: rgba(236, 238, 235, 0.14);
    --text: var(--paper-bright);
    --text-2: #a3a7a4;
    --text-3: #777b78;
    --primary: var(--paper-bright);
    --primary-fill: var(--paper-bright);
    --primary-hover: #ffffff;
    --on-primary: var(--ink);
    --primary-container: var(--paper-bright);
    --on-primary-container: var(--ink);
    --primary-soft: rgba(236, 238, 235, 0.1);
    --danger: #f28b82;
    --danger-container: rgba(242, 139, 130, 0.14);
    --ok: #81c995;
    --now: var(--paper-bright);
    --scrim: rgba(0, 0, 0, 0.6);
    --tint: 0%;
    --hero-bg: var(--paper-bright);
    --hero-fg: var(--ink);
    --hero-fg-2: rgba(15, 17, 17, 0.62);
    --hero-line: rgba(15, 17, 17, 0.2);
    --hero-track: rgba(15, 17, 17, 0.16);
  }
  @media (prefers-color-scheme: dark) {
    &[data-theme="system"] {
      --bg: var(--ink); --surface: var(--ink-soft); --surface-2: #151817; --surface-3: #242827; --surface-4: #303433;
      --outline: rgba(236, 238, 235, 0.3); --outline-2: rgba(236, 238, 235, 0.14);
      --text: var(--paper-bright); --text-2: #a3a7a4; --text-3: #777b78;
      --primary: var(--paper-bright); --primary-fill: var(--paper-bright); --primary-hover: #ffffff; --on-primary: var(--ink);
      --primary-container: var(--paper-bright); --on-primary-container: var(--ink); --primary-soft: rgba(236, 238, 235, 0.1);
      --danger: #f28b82; --danger-container: rgba(242, 139, 130, 0.14); --ok: #81c995; --now: var(--paper-bright); --scrim: rgba(0, 0, 0, 0.6);
      --tint: 0%;
      --hero-bg: var(--paper-bright); --hero-fg: var(--ink); --hero-fg-2: rgba(15, 17, 17, 0.62); --hero-line: rgba(15, 17, 17, 0.2); --hero-track: rgba(15, 17, 17, 0.16);
    }
  }

  /* ---------- The small capitals: every label, time and button speaks in mono ---------- */
  & .mono, & #sub, & .block .time, & .block .tag, & .live .kicker, & .live .then, & .needle, & .allday, & .earlier, & .rem-done-head,
  & .month .mwd, & .month .mnum, & .grid .dh, & .grid .axis span, & .rem-when, & .rem-head, & .live-routine .rem-head, & .review .kicker,
  & .review-row .kicker, & .review .nkicker, & .menu-title, & .settings .section h3, & .settings .badge, & .badge, & .field > span,
  & .settings label.f span, & #create-extra .field > span, & .group-title, & .btn-outlined, & .btn-filled, & .btn-text, & .segmented button,
  & .seg button, & .quick button, & dialog button, & .settings .save, & .settings .ghost, & .settings .danger, & .sheet-head button:not(.icon-btn),
  & .menu-row.action, & .rem-hide, & .rem-flag, & .rem-tag, & .rem-clip, & .rem-tagbtn, & .rem-list-sub, & .pane-head .psub, & .inbox-from,
  & .review .badge, & .review-row .badge, & .budgets .bnum, & .settings .actual, & .settings .toggle, & .chat-toast b, & .msg .when,
  & .block .task.done, & .settings .saved, & .daypick button, & .fab-item .lbl, & .sub button.link, & .review .link, & .review-line,
  & .pane-head .psub .link, & .live .plan-link, & .block-actions .menu-row, & .training-day {
    font-family: var(--mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--mono-ls);
    font-size: var(--mono-size);
    line-height: 1.4;
  }
  /* The few big words: Sora, heavy and close-set. */
  & .date, & .bar-title, & .pane-head .pdate, & .live .big, & dialog h2, & .hero-title, & .rem-section, & .drawer-head span, & .brand span,
  & .sheet-head > span, & .plan-empty b {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.03em;
  }

  /* ---------- Base ---------- */
  & body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; -webkit-font-smoothing: antialiased; }
  & button, & input, & select, & textarea { border-radius: 0; }
  & .icon-btn { border-radius: 0; }
  & .btn-outlined { border-radius: 0; border: 1px solid var(--outline); height: 32px; padding: 0 12px; color: var(--text); }
  & .btn-filled { border-radius: 0; height: 36px; padding: 0 16px; }
  & .btn-text { border-radius: 0; }
  & .segmented { border: 0; border-radius: 0; height: 32px; gap: 2px; }
  & .segmented button { border: 1px solid var(--outline); background: none; color: var(--text); padding: 0 12px; }
  & .segmented button:first-child { border-left: 1px solid var(--outline); }
  & .segmented button.on { background: var(--ink); border-color: var(--ink); color: var(--paper-bright); }
  &[data-theme="dark"] .segmented button.on { background: var(--paper-bright); border-color: var(--paper-bright); color: var(--ink); }

  /* ---------- The top bar: ink, on every page and both themes ---------- */
  & .top { background: var(--bar-bg); color: var(--bar-fg); border-bottom: 1px solid var(--bar-line); }
  & .top .icon-btn { color: var(--bar-fg); }
  & .top .dot { background: var(--bar-fg-2); border-radius: 0; width: 8px; height: 8px; }
  & .top .dot.ok { background: #6fcf97; }
  & .top .dot.bad { background: #f28b82; }
  & .top .dot.busy { background: var(--bar-fg); }
  /* The wordmark: the name in Sora, spaced out, over a short rule, the way the brand sets its own. */
  & .brand { position: relative; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; height: 48px; padding: 0 20px 0 4px; color: var(--bar-fg); }
  & .brand img { display: none; }
  & .brand span { font-size: 17px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; padding-left: 0.02em; }
  & .brand::after { content: ""; display: block; width: 28px; height: 2px; background: var(--bar-fg); }
  & #bar-today { border-color: var(--bar-line); color: var(--bar-fg); height: 30px; margin: 0 8px 0 0; }
  & .bar-page { padding-left: 8px; }
  & .date { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--bar-fg); }
  & .sub { color: var(--bar-fg-2); margin-top: 2px; }
  & .sub button.link { color: var(--bar-fg); text-decoration: underline; text-underline-offset: 3px; margin-left: 10px; }
  & .bar-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin-left: 10px; color: var(--bar-fg); }
  & .bar-cal { gap: 0; }
  & .bar-actions { gap: 4px; }
  /* The Month/Week switch in the bar: two words, the chosen one underlined. */
  & #bar-switch { border: 0; height: 36px; gap: 0; margin-right: 12px; }
  & #bar-switch button { border: 0; background: none; color: var(--bar-fg-2); padding: 0 10px; box-shadow: none; }
  & #bar-switch button.on { background: none; color: var(--bar-fg); box-shadow: inset 0 -2px 0 var(--bar-fg); }
  /* The phone's menu button: two lines, as the site draws its own. */
  & .burger svg { display: none; }
  & .burger::before, & .burger::after { content: ""; position: absolute; left: 11px; width: 18px; height: 2px; background: var(--bar-fg); }
  & .burger::before { top: 15px; }
  & .burger::after { top: 22px; }
  @media (min-width: 1000px) {
    & .top { padding: 0 20px; }
    /* The ways into Marv: words, not icons. */
    & .bar-actions .nav { width: auto; height: 32px; padding: 0 10px; color: var(--bar-fg-2); }
    & .bar-actions .nav svg { display: none; }
    & .bar-actions .nav::after { font-family: var(--mono); font-weight: 500; font-size: var(--mono-size); letter-spacing: var(--mono-ls); text-transform: uppercase; line-height: 1; }
    & #nav-reminders::after { content: "Reminders"; }
    & #nav-chat::after { content: "Chat"; }
    & #nav-settings::after { content: "Settings"; }
    & .bar-actions .nav.on { background: none; color: var(--bar-fg); box-shadow: inset 0 -2px 0 var(--bar-fg); }
    & .top .dot { margin: 0 4px 0 12px; }
    & body.cal-split .side { border-right: 1px solid var(--outline-2); padding: 20px 20px 32px 20px; }
    & body.cal-split .stage { padding: 0 20px 20px 12px; }
  }

  /* ---------- The day ---------- */
  & main { padding-top: 12px; }
  & .plan { gap: 0; }
  & .plan-empty { font-size: 14px; padding: 36px 8px; }
  & .plan-empty-actions { gap: 10px; margin-top: 18px; }
  & .plan-empty .plan-add { height: 36px; padding: 0 16px; border-color: var(--text); color: var(--text); }
  & .plan-empty .plan-ask { height: 32px; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--outline); }
  & .block {
    background: var(--surface); border: 0; border-bottom: 1px solid var(--outline-2); border-radius: 0;
    padding: 12px 12px 12px 18px; grid-template-columns: 56px 1fr; gap: 12px;
  }
  & .block::before { width: 3px; }
  & .block + .block, & .needle + .block, & .live + .block { margin-top: 0; }
  & .block .time { color: var(--text-2); padding-top: 3px; line-height: 1.55; }
  & .block .title { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
  & .block .task { font-size: 13px; color: var(--text-2); }
  & .block .tag { border-radius: 0; border-color: var(--outline); background: var(--surface); font-size: 9px; top: 11px; }
  & .block.fixed { background: var(--surface); border-color: var(--outline-2); }
  & .block.fixed::before { background: var(--text-3); }
  & .block.now { box-shadow: inset 0 0 0 1px var(--text); }
  & .block.ghost { background: none; border: 1px dashed var(--outline); border-bottom: 1px dashed var(--outline); margin: 2px 0; }
  & .block.travel { background: none; border-bottom: 1px solid var(--outline-2); padding: 6px 12px 6px 18px; }
  & .block.travel .title { font-size: 12px; }
  & .block .more, & .live .more { border-radius: 0; }
  & .forecast-note { font-size: 13px; }
  /* A commute, a fold, a line: all one voice. */
  & .earlier { border-radius: 0; height: 30px; padding: 0 8px 0 4px; margin-bottom: 4px; color: var(--text-2); }
  & .needle { color: var(--now); padding: 6px 4px; }
  & .needle::before { border-radius: 0; width: 8px; height: 8px; }
  & .needle::after { height: 1px; opacity: 1; }
  & .needle span::after { color: var(--text-2); font-weight: 500; }
  & .morning { border-radius: 0; border: 0; background: var(--primary-container); color: var(--on-primary-container); font-weight: 500; }
  & .morning svg { color: var(--on-primary-container); }

  /* The live card: the day's one ink block (paper, in the dark). */
  & .live {
    background: var(--hero-bg); color: var(--hero-fg); border: 0; border-radius: 0; box-shadow: none;
    padding: 18px 20px 18px 24px; margin-bottom: 1px;
  }
  & .live::before { width: 4px; }
  & .live .kicker { color: var(--hero-fg-2); }
  & .live .big { font-size: 24px; font-weight: 700; margin-top: 6px; line-height: 1.15; }
  & .live .sub { color: var(--hero-fg-2); font-family: var(--font); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; margin-top: 4px; }
  & .live .track { border-radius: 0; height: 4px; background: var(--hero-track); margin-top: 16px; }
  & .live .fill { border-radius: 0; background: var(--hero-fg); }
  & .live .then { color: var(--hero-fg-2); margin-top: 10px; }
  & .live.is-done .big { color: var(--hero-fg-2); }
  & .live .more { color: var(--hero-fg-2); }
  & .live .plan-link { color: var(--hero-fg); text-decoration: underline; text-underline-offset: 3px; margin-left: 0; }
  & .live .inbox-summary { color: var(--hero-fg); }
  & .live .inbox-body { border-top-color: var(--hero-line); }
  & .live-routine { border-top: 1px solid var(--hero-line); margin-top: 14px; padding-top: 8px; }
  & .live-routine .rem-head { color: var(--hero-fg-2); }
  & .live .rem-text { color: var(--hero-fg); }
  & .live .rem-row.done .rem-text { color: var(--hero-fg-2); }
  & .live .rem-check { border-color: var(--hero-fg-2); }
  & .live .rem-check:checked { background: var(--hero-fg); border-color: var(--hero-fg); }
  & .live .rem-check:checked::after { border-color: var(--hero-bg); }
  & .live .rem-when { color: var(--hero-fg-2); border-color: var(--hero-line); }
  & .live .rem-x, & .live .rem-flag { color: var(--hero-fg-2); }
  /* Free: the inverse, paper with a hairline, nothing to be on. */
  & .live.free { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--outline); }
  & .live.free::before { background: var(--text-3); }
  & .live.free .kicker, & .live.free .sub, & .live.free .then, & .live.free .live-routine .rem-head { color: var(--text-2); }
  & .live.free .track { background: var(--surface-4); }
  & .live.free .fill { background: var(--text); }
  & .live.free .rem-text { color: var(--text); }
  & .live.free .rem-check { border-color: var(--text-2); }
  & .live.free .rem-check:checked { background: var(--text); border-color: var(--text); }
  & .live.free .rem-check:checked::after { border-color: var(--bg); }
  & .live.free .live-routine { border-top-color: var(--outline-2); }
  & .live.free .plan-link, & .live.free .inbox-summary { color: var(--text); }
  & .live.condensed { padding: 10px 14px 11px 18px; box-shadow: none; border-radius: 0; }
  & .live.free.condensed { background: var(--surface); box-shadow: inset 0 0 0 1px var(--outline); }
  & .live.condensed .big { font-size: 15px; }
  & .live.condensed .track { height: 3px; margin-top: 8px; }
  & .live.held { box-shadow: 0 0 0 1px var(--outline); }

  /* The inbox tile and the training plan. */
  & .block .inbox-summary { color: var(--text); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
  & .inbox-line .inbox-head { border-radius: 0; border-color: var(--outline-2); background: var(--surface); }
  & .inbox-line .inbox-head svg:first-child { color: var(--text); }
  & .training-plan { border-radius: 0; background: var(--surface-2); border: 1px solid var(--outline-2); }

  /* ---------- The speed dial: an ink square ---------- */
  & .fab { border-radius: 0; width: 56px; height: 56px; background: var(--primary-fill); color: var(--on-primary); box-shadow: none; }
  & .fab-wrap.open .fab { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--outline); }
  & .fab-item .lbl { border-radius: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--outline); padding: 8px 12px; }
  & .fab-item .mini { border-radius: 0; background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--outline); }
  & .fab-wrap.open::before { background: var(--bg); opacity: 0.84; }
  & .fab.unread::after { border-radius: 0; border-color: var(--bg); width: 12px; height: 12px; top: -4px; right: -4px; }
  & #btn-chat.unread .mini::after { border-radius: 0; border-color: var(--surface); }
  & .fab.thinking::before { border-radius: 0; inset: -5px; border: 1.5px solid var(--primary); }
  & .chat-toast { border-radius: 0; border: 1px solid var(--outline); box-shadow: none; }
  & .chat-toast b { color: var(--text-2); }
  & .snackbar { border-radius: 0; background: var(--ink); color: var(--paper-bright); box-shadow: 0 0 0 1px var(--paper-bright); font-family: var(--mono); font-weight: 500; font-size: var(--mono-size); letter-spacing: var(--mono-ls); text-transform: uppercase; padding: 12px 16px; }
  &[data-theme="dark"] .snackbar { background: var(--paper-bright); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }

  /* ---------- Sheets and dialogs: paper with an ink hairline, square ---------- */
  & .sheet { border-radius: 0; box-shadow: 0 0 0 1px var(--outline); background: var(--surface); }
  & .sheet::before { border-radius: 0; width: 28px; height: 2px; background: var(--text-2); }
  & .sheet-head { font-size: 15px; }
  & .sheet-head > span { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
  & .sheet.tall .sheet-head { border-bottom: 1px solid var(--outline-2); }
  & .sheet.tall .sheet-head > span { font-size: 15px; }
  & .sheet-head button { border-radius: 0; color: var(--text); }
  & .sheet-head button.icon-btn { color: var(--text-2); }
  & .scrim { background: var(--scrim); }
  & dialog { border-radius: 0; border: 1px solid var(--outline); background: var(--surface); color: var(--text); box-shadow: none; padding: 24px; }
  & dialog::backdrop { background: var(--scrim); }
  & dialog h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 10px; }
  & dialog p { color: var(--text-2); }
  & dialog input[type="password"], & dialog input[type="text"], & dialog input[type="email"], & dialog input[type="date"], & dialog input[type="time"], & dialog textarea, & dialog select {
    border-radius: 0; border: 1px solid var(--outline); background: var(--bg); color: var(--text);
  }
  & dialog input:focus, & dialog textarea:focus, & dialog select:focus { outline: 1px solid var(--text); outline-offset: -1px; border-color: var(--text); }
  & dialog button { border-radius: 0; color: var(--text); height: 36px; padding: 0 14px; }
  & dialog button.primary { background: var(--primary-fill); color: var(--on-primary); padding: 0 18px; }
  & dialog button.danger { color: var(--danger); }
  & dialog .foot { color: var(--text-2); }
  & dialog .row { margin-top: 24px; gap: 4px; }
  & .field { margin-top: 16px; }
  & .field span { margin-bottom: 6px; color: var(--text-2); }
  & .seg { border: 0; border-radius: 0; gap: 2px; }
  & .seg button, & .settings .seg button { border: 1px solid var(--outline); background: none; color: var(--text); padding: 8px 12px; }
  & .seg button:first-child, & .settings .seg button:first-child { border-left: 1px solid var(--outline); }
  & .seg button.on, & .settings .seg button.on { background: var(--primary-container); border-color: var(--primary-container); color: var(--on-primary-container); }
  & .seg.small button { height: 38px; }
  & .settings .seg button { flex: 1 1 auto; white-space: nowrap; }   /* each word on one line; the base shares the width out by count */
  & .steps { gap: 0; }
  & .step-row { border-bottom-color: var(--outline-2); }
  & .file-tile { border-radius: 0; }
  & .file-cell .file-x { border-radius: 0; }

  /* ---------- Chat ---------- */
  & .thread { gap: 10px; padding: 12px 16px 14px; }
  & .msg { border-radius: 0; font-size: 15px; line-height: 1.45; padding: 12px 16px; }
  & .msg.marv { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--outline-2); border-bottom-left-radius: 0; padding-right: 44px; }
  & .msg.james { background: var(--primary-container); color: var(--on-primary-container); border-bottom-right-radius: 0; }
  &[data-theme] .msg.james { color: var(--on-primary-container); }
  & .msg.james .when { color: var(--on-primary-container); opacity: 0.66; }
  & .msg .when { margin-top: 6px; }
  & .msg .speak { border-radius: 0; }
  & .msg .speak.on { background: var(--primary-container); color: var(--on-primary-container); }
  & .msg.thinking i { border-radius: 0; width: 6px; height: 6px; }
  & .thread-empty { font-size: 14px; }
  & .quick { gap: 6px; padding: 10px 16px; }
  & .quick button { border-radius: 0; border: 1px solid var(--outline); background: none; height: 30px; padding: 0 12px; }
  & #composer { border-top: 1px solid var(--outline-2); background: var(--surface); padding: 10px 12px calc(env(safe-area-inset-bottom) + 12px); }
  & #composer input { border-radius: 0; background: var(--bg); border: 1px solid var(--outline); height: 42px; padding: 0 14px; }
  & #composer input:focus { border-color: var(--text); background: var(--bg); }
  & #send, & #mic { border-radius: 0; width: 42px; height: 42px; }
  & #send { background: var(--primary-fill); color: var(--on-primary); }
  & #mic { box-shadow: inset 0 0 0 1px var(--outline); color: var(--text); }
  & #mic.on, & #mic.turn { background: var(--primary-container); color: var(--on-primary-container); box-shadow: none; }
  & #mic.rec { background: var(--danger); color: #fff; box-shadow: none; }
  & .listening { border-radius: 0; height: 42px; background: var(--bg); }
  & .listening .bars i { border-radius: 0; }
  & .listening .word { font-family: var(--mono); font-weight: 500; font-size: var(--mono-size); letter-spacing: var(--mono-ls); text-transform: uppercase; }
  @media (min-width: 1000px) {
    & #chat-sheet { border-left: 1px solid var(--outline-2); box-shadow: none; border-radius: 0; }
    & #chat-sheet .sheet-head { border-bottom: 1px solid var(--outline-2); }
    & #chat-sheet .sheet-head > span { font-size: 15px; }
    & #settings-sheet, & #block-sheet { border-radius: 0; box-shadow: 0 0 0 1px var(--outline); }
  }

  /* ---------- Settings ---------- */
  & .hero { padding: 20px 4px 14px; }
  & .hero-icon { border-radius: 0; }
  & .hero-title { font-size: 20px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
  & .hero-sub { font-size: 13px; }
  & .menu-title { margin: 22px 0 8px; color: var(--text-2); }
  & .menu { border-radius: 0; border: 1px solid var(--outline-2); background: var(--surface); }
  & .menu-row { min-height: 52px; font-size: 15px; }
  & .menu-row + .menu-row::before { border-top-color: var(--outline-2); }
  & .menu-row .glyph { border-radius: 0; width: 34px; height: 34px; background: none; box-shadow: inset 0 0 0 1px var(--outline); color: var(--text); }
  & .menu-row .glyph svg { width: 18px; height: 18px; }
  & .menu-row:has(.glyph) + .menu-row::before { left: 66px; }
  & .menu-row .val { font-family: var(--mono); font-weight: 500; font-size: var(--mono-size); letter-spacing: var(--mono-ls); text-transform: uppercase; color: var(--text-2); }
  & .menu-row .val.ok { color: var(--ok); }
  & .menu-row .chev { color: var(--text-3); }
  & .menu-row.pressed { background: var(--surface-3); }
  & .menu-row.action { color: var(--text); }
  & .menu-row.action.destructive { color: var(--danger); }
  & .menu-row.action:disabled { color: var(--text-3); }
  & .settings .section h3 { color: var(--text-2); margin: 22px 0 8px; }
  & .settings .hint, & .settings .desc, & .settings .foot { font-size: 13px; }
  & .settings .card { border-radius: 0; border: 1px solid var(--outline-2); background: var(--surface); }
  & .settings .card .name { font-weight: 500; }
  & .settings input[type="text"], & .settings input[type="email"], & .settings input[type="password"], & .settings input[type="time"], & .settings input[type="number"], & .settings textarea, & .settings select {
    border-radius: 0; border: 1px solid var(--outline); background: var(--bg); color: var(--text);
  }
  & .settings input:focus, & .settings textarea:focus, & .settings select:focus { outline: 1px solid var(--text); outline-offset: -1px; border-color: var(--text); }
  & .settings label.f span { color: var(--text-2); }
  & .settings .save { border-radius: 0; height: 36px; padding: 0 16px; background: var(--primary-fill); color: var(--on-primary); }
  & .settings .ghost { border-radius: 0; height: 36px; background: none; box-shadow: inset 0 0 0 1px var(--outline); color: var(--text); }
  & .settings .danger { border-radius: 0; height: 36px; color: var(--danger); }
  & .settings .budget-row { border-bottom-color: var(--outline-2); }
  & .settings .swatch-pick, & .swatch-pick { border-radius: 0; width: 18px; height: 18px; box-shadow: inset 0 0 0 1px rgba(15, 17, 17, 0.2); }
  & .swatch-pick[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--text); }
  & .palette { border-radius: 0; border: 1px solid var(--outline); box-shadow: none; gap: 8px; }
  & .palette .pal { border-radius: 0; }
  & .settings .swatch { border-radius: 0; width: 9px; height: 9px; }
  & .settings .toggle input { accent-color: var(--primary-fill); }
  & .settings .daypick button { border-radius: 0; width: 34px; height: 34px; border-color: var(--outline); color: var(--text-2); }
  & .settings .daypick button.on { background: var(--primary-fill); border-color: var(--primary-fill); color: var(--on-primary); }
  & .menu-row.two .lbl .sub { color: var(--text-2); font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: 13px; }
  & .settings .sdedit::before, & .settings .menu-row + .sdedit::before, & .settings .sdedit + .menu-row.action::before { border-top-color: var(--outline-2); }
  & .settings .card.keys { padding: 4px 0; }
  & .key-row { border-bottom-color: var(--outline-2); }
  /* The switch: a rectangle, a square knob, ink when on. */
  & .check { border-bottom-color: var(--outline-2); }
  & .check .label .sub, & .check .hint { color: var(--text-2); }
  & input.switch { border-radius: 0; width: 44px; height: 24px; border: 1px solid var(--outline); background: var(--bg); }
  & input.switch::before { border-radius: 0; width: 14px; height: 14px; top: 4px; left: 4px; background: var(--text-2); }
  & input.switch:checked { background: var(--primary-fill); border-color: var(--primary-fill); }
  & input.switch:checked::before { background: var(--on-primary); width: 14px; height: 14px; top: 4px; left: 4px; transform: translateX(20px); }
  & input.switch:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }

  /* ---------- The calendar ---------- */
  & .week { gap: 10px; }
  & .week-nav { padding: 0 0 6px; }
  & .review-row { border-radius: 0; border: 1px solid var(--outline-2); background: var(--surface); padding: 12px 14px; }
  & .review-row .badge, & .review .badge { border-radius: 0; padding: 4px 8px; background: var(--surface-3); color: var(--text-2); }
  & .review-row .badge.yes, & .review .badge.yes { background: var(--primary-container); color: var(--on-primary-container); }
  & .review-row .badge.no, & .review .badge.no { background: var(--danger-container); color: var(--danger); }
  & .review { border-radius: 0; border: 1px solid var(--outline-2); }
  & .review .text { font-size: 15px; }
  & .review .verdicts, & .review .next { border-top-color: var(--outline-2); }
  & .review .verdict .swatch { border-radius: 0; width: 8px; height: 8px; }
  & .review .link, & .review-line { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--outline); }
  & .review-line { line-height: 1.7; }
  & .budgets-card { border-radius: 0; border: 1px solid var(--outline-2); }
  & .budgets .bar { border-radius: 0; height: 4px; background: var(--surface-4); }
  & .budgets .bar i { border-radius: 0; }
  & .budgets .swatch { border-radius: 0; width: 8px; height: 8px; }
  & .budgets .brow { font-size: 14px; }
  & .budgets .bplan { color: var(--text-3); font-size: 10px; }
  /* The week grid: hairlines, mono hours, the day numbers in Sora, today an ink square. */
  & .grid .dh { color: var(--text-2); border-bottom: 1px solid var(--outline); padding: 10px 2px 8px; }
  & .grid .dh b { border-radius: 0; width: 34px; height: 34px; line-height: 34px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.03em; color: var(--text); }
  & .grid .dh.today { color: var(--text); }
  & .grid .dh.today b { background: var(--primary-fill); color: var(--on-primary); }
  & .grid .dh .st { border-radius: 0; width: 5px; height: 5px; }
  & .grid .dh .st.none { background: var(--outline); }
  & .grid .axis span { color: var(--text-2); font-size: 10px; }
  & .grid .col { border-left-color: var(--outline-2); }
  & .grid .col.today, & .grid .adc.today { background: var(--primary-soft); }
  &[data-theme] .grid .col.today, &[data-theme] .grid .adc.today { background: var(--primary-soft); }
  & .grid .hl { border-top-color: var(--outline-2); }
  & .grid .blk { border-radius: 0; font-weight: 500; box-shadow: 0 0 0 1px var(--bg); }
  & .grid .blk.fixed { background: var(--surface); color: var(--text); border: 1px solid var(--outline); }
  & .grid .blk.tpl { border-radius: 0; }
  & .grid .nowline { border-top: 1.5px solid var(--now); }
  & .grid .nowline::before { border-radius: 0; width: 8px; height: 8px; top: -5px; left: -4px; }
  & .grid .adgut, & .grid .adc { border-bottom-color: var(--outline-2); }
  & .grid .adc { border-left-color: var(--outline-2); }
  /* The month: the weekdays in mono over a rule, numbers in mono, today an ink square, chips square. */
  & .month .mwd { color: var(--text-2); border-bottom: 1px solid var(--outline); padding: 10px 0 8px; }
  & .month .mday { border-bottom-color: var(--outline-2); border-right-color: var(--outline-2); padding: 6px 4px 4px; }
  & .month .mnum { border-radius: 0; width: 24px; height: 24px; line-height: 24px; font-size: 11px; }
  & .month .mday.out .mnum { color: var(--text-3); }
  & .month .mday.today .mnum { background: var(--primary-fill); color: var(--on-primary); }
  & .month .mday.sel { background: var(--primary-soft); }
  & .month .mdot { border-radius: 0; width: 5px; height: 5px; border-width: 1px; }
  & .month .mchip, & .grid .mchip { border-radius: 0; font-weight: 500; }
  & .month .mchip.timed { color: var(--text); }
  & .month .mchip.timed::before { border-radius: 0; width: 7px; height: 7px; top: 7px; }
  & .month .mmore, & .grid .mmore { border-radius: 0; color: var(--text-2); }
  & .pane-head { padding: 0 0 14px; }
  & .pane-head .pdate { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
  & .pane-head .psub { color: var(--text-2); margin-top: 4px; gap: 12px; }
  & .pane-head .psub .link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- Reminders ---------- */
  & .reminders-line .rem-head, & .rem-page .rem-head { color: var(--text-2); padding: 8px 4px 6px; }
  & .reminders-line .rem-group, & .rem-page .rem-group, & .plan .rem-group { border-radius: 0; border: 1px solid var(--outline-2); background: var(--surface); }
  & .plan .rem-group { margin: 0; }
  & .plan .rem-group .rem-row { min-height: 46px; }
  & .rem-item { border-bottom-color: var(--outline-2); }
  & .rem-row { padding: 0 8px 0 14px; }
  & .rem-body { border-radius: 0; }
  & .rem-text { font-size: 15px; }
  & .rem-sub { color: var(--text-2); }
  & .rem-when { border-radius: 0; border-color: var(--outline); padding: 2px 6px; }
  & .rem-when.overdue { color: var(--danger); border-color: var(--danger); }
  & .rem-check { border-radius: 0; width: 18px; height: 18px; border: 1.5px solid var(--text-2); }
  & .rem-check:checked { border-color: var(--primary-fill); background: var(--primary-fill); }
  & .rem-check:checked::after { width: 4px; height: 8px; margin-top: -1px; border-color: var(--on-primary); }
  & .rem-steps .rem-step .rem-check { width: 15px; height: 15px; }
  & .rem-steps .rem-step .rem-check:checked::after { width: 3px; height: 7px; }
  & .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)); }
  & .rem-x, & .rem-tool, & .rem-grip, & .rem-flag { border-radius: 0; }
  & .rem-hide, & .rem-done-head { border-radius: 0; color: var(--text-2); }
  & .rem-tag { border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--outline-2); font-size: 9px; line-height: 16px; }
  & .rem-tagbtn { border-radius: 0; height: 28px; }
  & .rem-tagbtn.on { background: var(--primary-container); border-color: var(--primary-container); color: var(--on-primary-container); }
  & .rem-tagbtn .n { color: inherit; opacity: 0.66; }
  & .rem-list-dot { border-radius: 0; width: 8px; height: 8px; }
  & .swatch { border-radius: 0; width: 22px; height: 22px; }
  & .swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
  & .swatch.none { border-radius: 0; }
  & .iconbtn { border-radius: 0; border-color: var(--outline); }
  & .iconbtn.on { background: var(--primary-container); border-color: var(--primary-container); }
  & .rem-item.dragging { border-radius: 0; box-shadow: 0 0 0 1px var(--outline); }
  & .rem-section { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 12px 4px 6px; }
  & .rem-section-row { margin-top: 24px; }
  & .rem-list-sub { color: var(--text-2); }
  & .rem-empty { font-size: 14px; }
  & .rem-add { padding: 0 10px; border: 1px dashed var(--outline); margin: 6px 0 14px; }
  & .rem-add::before { color: var(--text); }
  & .rem-add:focus-within { border-radius: 0; background: var(--surface); border-style: solid; }
  & .rem-newlist-btn { padding-left: 14px; }

  /* ---------- The drawer: ink, the ways in numbered down the page ---------- */
  & .drawer { background: var(--ink); color: var(--paper-bright); border-radius: 0; box-shadow: none; border-right: 1px solid var(--bar-line); padding: calc(env(safe-area-inset-top) + 20px) 20px 24px; counter-reset: way; }
  & .drawer-head { color: var(--paper-bright); padding: 10px 4px 36px; flex-direction: column; align-items: flex-start; gap: 6px; }
  & .drawer-head img { display: none; }
  & .drawer-head span { font-size: 17px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; }
  & .drawer-head::after { content: ""; display: block; width: 28px; height: 2px; background: var(--paper-bright); }
  & .drawer .menu { background: none; border: 0; margin: 0; }
  & .drawer .menu-row { border-radius: 0; min-height: 52px; padding: 8px 4px; gap: 14px; color: var(--bar-fg-2); border-bottom: 1px solid var(--bar-line); counter-increment: way; }
  & .drawer .menu-row:last-child { border-bottom: 0; }
  & .drawer .menu-row .glyph { display: none; }
  & .drawer .menu-row .lbl { font-family: var(--font); font-size: 19px; font-weight: 500; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 14px; }
  & .drawer .menu-row .lbl::before { content: counter(way, decimal-leading-zero); font-family: var(--mono); font-size: var(--mono-size); font-weight: 500; letter-spacing: var(--mono-ls); color: var(--bar-fg-2); }
  & .drawer .menu-row.active { background: none; color: var(--paper-bright); }
  & .drawer .menu-row.active .lbl, & .drawer .menu-row.active .glyph { color: var(--paper-bright); }
  & .drawer .menu-row.active .lbl::before { color: var(--paper-bright); }
  & .drawer .menu-row.pressed { background: var(--bar-hover); }

  /* ---------- Motion, kept light ---------- */
  & .msg.new { animation-duration: 0.22s; }
  & .plan.animate .block { animation-duration: 0.3s; }

  /* ---------- Hover, only under a pointer ---------- */
  @media (hover: hover) {
    & .top .icon-btn:hover, & .top .btn-outlined:hover, & .bar-actions .nav:hover { background: var(--bar-hover); color: var(--bar-fg); }
    & .bar-actions .nav.on:hover { background: var(--bar-hover); color: var(--bar-fg); }
    & #bar-switch button:hover { background: var(--bar-hover); }
    & #bar-switch button.on:hover { background: var(--bar-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: none; }
    & .btn-text:hover { background: var(--primary-soft); }
    & .segmented button:hover, & .seg button:hover, & .settings .seg button:hover { background: var(--surface-3); }
    & .segmented button.on:hover, & .seg button.on:hover, & .settings .seg button.on:hover { background: var(--primary-container); }
    & .fab:hover { box-shadow: none; background: var(--primary-hover); }
    & .fab-wrap.open .fab:hover { background: var(--surface-3); }
    & .fab-item:hover .mini { background: var(--surface-3); }
    & .sheet-head button:hover { background: var(--surface-3); }
    & .sheet-head button.icon-btn: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-2); }
    & .drawer .menu-row:hover { background: var(--bar-hover); color: var(--paper-bright); }
    & .settings .save:hover { background: var(--primary-hover); }
    & .settings .ghost:hover { background: var(--surface-3); }
    & .settings .danger:hover { background: var(--danger-container); }
    & dialog button:hover { background: var(--surface-3); }
    & dialog button.primary:hover { background: var(--primary-hover); }
    & dialog button.danger:hover { background: var(--danger-container); }
    & .grid .dh:hover b { background: var(--surface-3); }
    & .grid .dh.today:hover b { background: var(--primary-fill); }
    & .month .mday:hover { background: var(--surface); }
    & .month .mnum:hover { background: var(--surface-3); }
    & .month .mday.today .mnum:hover { background: var(--primary-fill); opacity: 0.9; }
    & .month .mchip.timed:hover { background: var(--surface-3); }
    & .rem-page .rem-body:hover { background: var(--surface-2); }
    & .rem-page .rem-body:hover .rem-text { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
    & .rem-check:hover { border-color: var(--text); background: var(--surface-3); }
    & .rem-check:checked:hover { border-color: var(--primary-fill); background: var(--primary-fill); }
    & .live .rem-check:hover { border-color: var(--hero-fg); background: transparent; }
    & .live .rem-check:checked:hover { border-color: var(--hero-fg); background: var(--hero-fg); }
    & .msg .speak:hover { background: var(--surface-3); }
    & .msg .speak.on:hover { background: var(--primary-container); }
    & .quick button:hover { background: var(--surface-3); }
    & .earlier:hover, & .rem-done-head:hover, & .rem-x:hover, & .rem-tool:hover, & .rem-flag:hover { background: var(--surface-3); color: var(--text); }
    & .inbox-line .inbox-head:hover { background: var(--surface-2); }
    & .review-row:hover { background: var(--surface-2); }
    & .palette .pal:hover { transform: none; box-shadow: 0 0 0 2px var(--text); }
    & .block .more:hover, & .live .more:hover { background: var(--surface-3); color: var(--text); }
    & .live .more:hover { background: var(--hero-line); color: var(--hero-fg); }
  }
}