:root {
  --bg: #0c0e11;
  --surface: #15181d;
  --surface-2: #1d2128;
  --surface-3: #262b33;
  --line: #2a2f37;
  --text: #eceef1;
  --text-2: #b4bac3;
  --muted: #7d8590;
  --accent: #f5a524;      /* focus / primary actions */
  --accent-ink: #1a1203;
  --money: #4cc38a;       /* PayIt revenue */
  --good: #4cc38a;
  --warn: #f5b84a;
  --bad: #ff6b6b;
  --info: #6cb4ff;
  --radius: 18px;
  --gap: 14px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
  color-scheme: dark;
}

[hidden] { display: none !important; }
::-webkit-scrollbar { width: 0; height: 0; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; user-select: none; }
body { display: flex; cursor: default; }
/* Hide the pointer on the actual touchscreen; keep it when browsing from a laptop. */
@media (hover: none) { body { cursor: none; } }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
h1, h2, h3, p { margin: 0; }

/* ---------- rail ---------- */
.rail { width: 88px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; background: var(--surface); border-right: 1px solid var(--line); }
.rail button { position: relative; width: 64px; height: 60px; border-radius: 16px; display: grid; place-items: center; color: var(--muted); }
.rail button.on { background: var(--surface-3); color: var(--text); }
.rail button:active { background: var(--surface-3); }
.rail svg { width: 28px; height: 28px; }
.rail .spacer { flex: 1; }
.rail .badge { position: absolute; top: 8px; right: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.rail .badge.info { background: var(--info); color: #06121f; }
.rail .moon { color: var(--accent); }

svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- layout ---------- */
main { flex: 1; min-width: 0; height: 100vh; padding: 16px; overflow: hidden; }
.card { background: var(--surface); border-radius: var(--radius); padding: 18px 20px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--text-2); font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.card-h .grow { flex: 1; }
.card-h .link { color: var(--muted); font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.tap { cursor: pointer; }
.tap:active { filter: brightness(1.15); }
.muted { color: var(--muted); }
.sub { color: var(--text-2); }
.empty { color: var(--muted); font-size: 16px; padding: 10px 0; }
.page-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; height: 52px; }
.page-h h1 { font-size: 28px; font-weight: 700; margin-right: auto; }

.btn { height: 52px; padding: 0 22px; border-radius: 14px; background: var(--surface-3); font-weight: 600; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn:active { filter: brightness(1.25); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.small { height: 44px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.chip { height: 44px; padding: 0 16px; border-radius: 22px; background: var(--surface-2); color: var(--text-2); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: var(--text); color: var(--bg); }
.row { display: flex; align-items: center; gap: 10px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- home ---------- */
.home { display: grid; height: 100%; gap: var(--gap); grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 250px minmax(0, 1fr);
  grid-template-areas: "clock focus payit" "next tasks mail"; }
.a-clock { grid-area: clock; } .a-focus { grid-area: focus; } .a-payit { grid-area: payit; }
.a-next { grid-area: next; } .a-tasks { grid-area: tasks; } .a-mail { grid-area: mail; }
.clock .time { font-size: 104px; font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-top: 4px; }
.clock .time small { font-size: 34px; font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.clock .date { font-size: 22px; color: var(--text-2); margin-top: 10px; font-weight: 500; }
.clock .wx { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--text-2); }
.clock .wx b { color: var(--text); font-size: 24px; font-weight: 600; }
.clock .wx svg { width: 30px; height: 30px; color: var(--accent); }

.big-num { font-size: 52px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.money { color: var(--money); }
.delta { font-size: 15px; font-weight: 600; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.kv { display: flex; gap: 22px; margin-top: auto; }
.kv div { display: flex; flex-direction: column; gap: 2px; }
.kv b { font-size: 22px; font-weight: 600; }
.kv span { font-size: 13px; color: var(--muted); }

.list { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item .t { flex: 1; min-width: 0; }
.item .t b { display: block; font-weight: 500; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .t span { display: block; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.when { font-size: 14px; color: var(--text-2); font-weight: 600; text-align: right; white-space: nowrap; }
.when.soon { color: var(--accent); }

.check { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--muted); flex: none; display: grid; place-items: center; }
.check.done { background: var(--good); border-color: var(--good); color: #062014; }
.check svg { width: 20px; height: 20px; stroke-width: 3; }
.item.done b { color: var(--muted); text-decoration: line-through; }
.tag { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.due-today { color: var(--accent); }
.overdue { color: var(--bad); }

.mini-focus { display: flex; align-items: center; gap: 18px; flex: 1; }
.mini-focus .ring { width: 120px; height: 120px; flex: none; position: relative; }
.mini-focus .ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.mini-focus .btns { display: flex; flex-direction: column; gap: 8px; flex: 1; }

.home-digest { flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); }
.home-digest b { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.home-digest ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); font-size: 14px; line-height: 1.35; }
.home-digest li + li { margin-top: 4px; }
.mail-counts { gap: 14px; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mail-counts .mail-acct b { font-size: 14px; }
.mail-acct { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0 8px; }
.mail-acct b { font-size: 17px; font-weight: 600; }
.pill { font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 10px; background: var(--surface-3); }
.prio { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bad); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.status.up { color: var(--good); } .status.degraded { color: var(--warn); } .status.down { color: var(--bad); }
.status svg { width: 16px; height: 16px; stroke-width: 2.6; }

/* ---------- focus ---------- */
.focus { display: grid; grid-template-columns: 1fr 340px; gap: var(--gap); height: 100%; }
.focus .main { align-items: center; justify-content: center; position: relative; }
.focus .phases { position: absolute; top: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.focus .bigring { position: relative; width: 400px; height: 400px; margin-top: 30px; }
.focus .bigring .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.focus .bigring .clock-txt { font-size: 104px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.focus .bigring .lbl { margin-top: 10px; font-size: 18px; color: var(--text-2); max-width: 260px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus .controls { display: flex; gap: 12px; margin-top: 18px; }
.focus .controls .btn { min-width: 64px; }
.focus .controls .btn.primary { min-width: 170px; }
.focus-side { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.focus-side .working { flex: 1; }
.cycle { display: flex; gap: 8px; margin-top: 6px; }
.cycle i { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); }
.cycle i.on { background: var(--accent); }

/* ---------- charts ---------- */
.chart { width: 100%; display: block; }
.chart .bar { fill: var(--money); }
.chart.focus-c .bar { fill: var(--accent); }
.chart .bar.dim { opacity: .45; }
.chart .base { stroke: var(--line); stroke-width: 1; }
.chart text { fill: var(--muted); font-size: 12px; font-family: inherit; }
.chart text.sel { fill: var(--text); font-weight: 600; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart-cap { font-size: 15px; color: var(--text-2); height: 22px; }
.chart-cap b { color: var(--text); }

/* ---------- payit ---------- */
.payit { display: grid; height: calc(100% - 66px); gap: var(--gap); grid-template-columns: 1.3fr 1fr; grid-template-rows: auto minmax(0, 1fr); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
.tile b { display: block; font-size: 26px; font-weight: 700; }
.tile span { font-size: 13px; color: var(--muted); }

/* ---------- tasks ---------- */
.tasks { height: calc(100% - 66px); }
.tasks .list { overflow-y: auto; height: 100%; padding-right: 6px; }
.tasks .item { min-height: 64px; }
.tasks .item .t b { font-size: 19px; white-space: normal; }
.home .item .t b.wrap, .wind .item .t b.wrap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.icon-btn { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); flex: none; }
.icon-btn:active { background: var(--surface-3); }
.icon-btn.on { color: var(--accent); }
.icon-btn.on svg { fill: var(--accent); }

/* ---------- tasks: review + layout ---------- */
.tasks-page { display: flex; flex-direction: column; gap: 12px; height: calc(100% - 66px); }
.tasks-page .tasks { flex: 1; min-height: 0; height: auto; }
.review { flex: none; max-height: 46%; box-shadow: inset 0 0 0 1px #4a3a18; }
.review .list { overflow-y: auto; }
.review .item .btn { flex: none; }
.chip.review-chip { height: 32px; padding: 0 12px; background: #3a2f17; color: var(--accent); font-size: 13px; text-transform: none; letter-spacing: 0; }

/* ---------- mail ---------- */
.mail-page { display: flex; flex-direction: column; gap: var(--gap); height: calc(100% - 66px); }
.mail-page .mailview { flex: 1; min-height: 0; height: auto; }
.mailview .card .list { flex: 1; min-height: 0; overflow-y: auto; }
.digest { flex: none; max-height: 44%; }
.digest .head { font-size: 19px; font-weight: 600; line-height: 1.35; }
.digest ul { margin: 10px 0 0; padding-left: 20px; color: var(--text-2); font-size: 16px; line-height: 1.4; overflow-y: auto; min-height: 0; }
.digest li + li { margin-top: 5px; }
.digest .foot { margin-top: 10px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.digest .foot .grow { flex: 1; }
.mailview { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--gap); height: calc(100% - 66px); }
.mailview .list { overflow-y: auto; }
.msg { padding: 12px 0; border-bottom: 1px solid var(--line); display: block; }
.msg .top { display: flex; gap: 8px; align-items: baseline; }
.msg .top b { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg p { color: var(--text-2); font-size: 16px; margin-top: 4px; line-height: 1.35; }
.msg .act { color: var(--accent); font-size: 15px; font-weight: 600; margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.msg .subj { color: var(--muted); font-size: 14px; margin-top: 4px; }
.msg.low { opacity: .6; }

/* ---------- schedule ---------- */
.sched { height: calc(100% - 66px); overflow-y: auto; }
.sched h3 { font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 4px; }
.sched h3:first-child { margin-top: 0; }
.cal-bar { width: 4px; align-self: stretch; border-radius: 2px; background: var(--info); flex: none; }

/* ---------- settings ---------- */
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); height: calc(100% - 66px); }
.set-row { display: flex; align-items: center; gap: 14px; min-height: 64px; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row label { flex: 1; font-size: 17px; }
.set-row label span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper b { min-width: 76px; text-align: center; font-size: 19px; }
.stepper button { width: 48px; height: 48px; border-radius: 12px; background: var(--surface-3); font-size: 24px; font-weight: 600; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 240px; height: 8px; border-radius: 4px; background: var(--surface-3); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%; background: var(--text); }
.toggle { width: 64px; height: 38px; border-radius: 19px; background: var(--surface-3); position: relative; flex: none; }
.toggle::after { content: ''; position: absolute; top: 4px; left: 4px; width: 30px; height: 30px; border-radius: 50%; background: var(--muted); transition: transform .15s; }
.toggle.on { background: var(--accent); }
.toggle.on::after { transform: translateX(26px); background: var(--accent-ink); }

/* ---------- overlays ---------- */
#banner { position: fixed; left: 104px; right: 16px; top: 0; z-index: 5; display: flex; justify-content: center; pointer-events: none; }
#banner .b { pointer-events: auto; margin-top: 8px; background: #2a2112; color: var(--warn); border-radius: 14px; padding: 8px 10px 8px 16px; display: flex; gap: 12px; align-items: center; font-weight: 600; box-shadow: 0 8px 30px #0008; }

#toasts { position: fixed; right: 16px; top: 16px; z-index: 12; display: flex; flex-direction: column; gap: 10px; width: 400px; }
.toast { background: var(--surface-3); border-radius: 16px; padding: 14px 16px; display: flex; gap: 12px; box-shadow: 0 12px 40px #000a; border-left: 5px solid var(--info); animation: slide .25s ease-out; }
.toast.warn { border-color: var(--warn); } .toast.error { border-color: var(--bad); }
.toast b { display: block; font-size: 16px; }
.toast p { font-size: 14px; color: var(--text-2); margin-top: 3px; }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }

.drawer { position: fixed; inset: 0; z-index: 15; background: #000a; display: flex; justify-content: flex-end; }
.drawer .panel { width: 480px; height: 100%; background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.alert { background: var(--surface-2); border-radius: 14px; padding: 12px 12px 12px 16px; display: flex; gap: 12px; align-items: flex-start; border-left: 5px solid var(--info); }
.alert.warn { border-color: var(--warn); } .alert.error { border-color: var(--bad); }
.alert .t { flex: 1; min-width: 0; }
.alert b { display: block; font-size: 16px; }
.alert p { font-size: 14px; color: var(--text-2); margin-top: 3px; }
.alert small { color: var(--muted); text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .05em; }

/* on-screen keyboard */
.kb { position: fixed; inset: 0; z-index: 30; background: #000c; display: flex; flex-direction: column; justify-content: flex-end; }
.kb .top { margin: 0 auto auto; width: 900px; padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.kb .field { background: var(--surface-2); border-radius: 14px; min-height: 64px; padding: 14px 18px; font-size: 24px; display: flex; align-items: center; }
.kb .field .caret { width: 2px; height: 30px; background: var(--accent); margin-left: 2px; animation: blink 1s steps(1) infinite; }
.kb .field .ph { color: var(--muted); }
@keyframes blink { 50% { opacity: 0; } }
.kb .keys { background: var(--surface); padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.kb .krow { display: flex; gap: 8px; justify-content: center; }
.kb .krow button { height: 58px; flex: 0 0 96px; border-radius: 10px; background: var(--surface-3); font-size: 22px; font-weight: 500; }
.kb .krow button:active { background: #3a414c; }
.kb .krow .wide { flex-basis: 150px; font-size: 17px; }
.kb .krow .space { flex-basis: 520px; }
.kb .krow .done { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* sleep */
.sleep { position: fixed; inset: 0; z-index: 40; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6b2a14; }
.sleep .time { font-size: 180px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.sleep .next { margin-top: 18px; font-size: 22px; color: #4a1e10; }
.sleep .actions { position: absolute; bottom: 40px; display: flex; gap: 14px; opacity: 0; pointer-events: none; }
.sleep.reveal .actions { opacity: 1; pointer-events: auto; }
.sleep .actions .btn { background: #1a0d08; color: #a0482a; }
.sleep.off { background: #000; }
.sleep.off .time, .sleep.off .next { visibility: hidden; }
/* Off the Pi there's no real backlight to dim; a filter stands in for it. */
.sleep.sim .time { opacity: .55; }

/* ==========================================================================
   Portrait: the Touch Display 2's native orientation (720×1280).
   Nav moves to a bottom bar, and every screen stacks into one column.
   ========================================================================== */
@media (orientation: portrait) {
  body { flex-direction: column; }
  main { height: auto; flex: 1; min-height: 0; }
  .rail { order: 2; width: 100%; height: 92px; flex-direction: row; justify-content: space-around; padding: 0 8px; border-right: 0; border-top: 1px solid var(--line); gap: 0; }
  .rail .spacer { display: none; }
  .rail button { width: 68px; height: 68px; }

  .home { grid-template-columns: 1fr 1fr; grid-template-rows: 236px 236px minmax(0, 0.75fr) minmax(0, 1fr);
    grid-template-areas: "clock clock" "focus payit" "next next" "tasks mail"; }
  .clock .time { font-size: 120px; }
  .mini-focus { flex-direction: column; align-items: stretch; gap: 10px; }
  .mini-focus .ring { width: 100%; height: auto; display: flex; align-items: center; gap: 14px; }
  .mini-focus .ring svg { width: 76px; height: 76px; }
  .mini-focus .ring span { position: static; font-size: 30px; }
  .mini-focus .btns { flex-direction: row; }
  .mini-focus .btns .btn { flex: 1; padding: 0 10px; }
  .mini-focus .btns .btn.ghost { display: none; }
  .a-payit .kv { gap: 16px; }
  .a-tasks .tag { display: none; }
  .a-payit .big-num { font-size: 46px; }

  .focus { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .focus .main { padding-bottom: 26px; }
  .focus .bigring { width: 440px; height: 440px; margin-top: 70px; }
  .focus .bigring > svg { width: 440px; height: 440px; }
  .focus .bigring .clock-txt { font-size: 116px; }
  .focus .controls { margin-top: 26px; }
  .focus-side { flex-direction: row; height: 330px; }
  .focus-side > .card { flex: 1; min-width: 0; }
  .focus-side .working .chips { flex-direction: column; flex-wrap: nowrap; overflow: hidden; }

  .payit { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: max-content; overflow-y: auto; align-content: start; }
  .payit > .card { overflow: visible; }

  .mailview { grid-auto-flow: row; grid-auto-rows: minmax(0, 1fr); grid-auto-columns: auto; }

  .settings { grid-template-columns: 1fr; overflow-y: auto; align-content: start; }
  .settings > .card { overflow: visible; }
  input[type=range] { width: 220px; }

  #banner { left: 16px; top: auto; bottom: 100px; }
  #banner .b { margin: 0 0 8px; }
  #toasts { left: 16px; right: 16px; width: auto; }
  .drawer .panel { width: 100%; }

  .kb .top { width: auto; margin: 0 16px auto; }
  .kb .keys { padding: 10px 6px 16px; gap: 10px; }
  .kb .krow { gap: 6px; }
  .kb .krow button { flex: 1 1 0; min-width: 0; height: 66px; }
  .kb .krow .wide { flex: 1.5 1 0; }
  .kb .krow .space { flex: 5 1 0; }
  .kb .krow .done { flex: 2 1 0; }

  .sleep .time { font-size: 170px; }
  .sleep .next { padding: 0 24px; text-align: center; }
}

/* Home card lists stop above anything pinned to the bottom (e.g. Add task). */
.home .card > .list { flex: 1; min-height: 0; }

/* ==========================================================================
   Remote devices (phone / laptop): native text entry, sign-in, text selection
   ========================================================================== */
.remote body { user-select: text; cursor: auto; }
.remote button { user-select: none; }

.kb.native { justify-content: center; align-items: center; padding: 16px; }
.kb.native .top { margin: 0; width: min(560px, 100%); background: var(--surface); border-radius: var(--radius); padding: 20px; gap: 14px; }
.kb.native input.field { width: 100%; border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 20px; outline: none; min-height: 56px; }
.kb.native input.field:focus { border-color: var(--accent); }

.login { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; place-items: center; padding: 16px; }
.login-card { width: min(380px, 100%); background: var(--surface); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.login-card h1 { font-size: 26px; }
.login-card input { height: 54px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 18px; padding: 0 14px; outline: none; }
.login-card input:focus { border-color: var(--accent); }
.login-card .err { color: var(--bad); font-size: 14px; min-height: 18px; }

/* ---------- sleep: tap to light up ---------- */
.sleep.reveal .time { color: #ffb38a; opacity: 1; }
.sleep.reveal .next { color: #c98a6c; }
.sleep.reveal.off .time, .sleep.reveal.off .next { visibility: visible; }
.sleep.reveal .actions .btn { background: #f5a524; color: #1a1203; height: 68px; padding: 0 30px; font-size: 20px;
  box-shadow: 0 0 0 2px #ffd28a, 0 0 34px 8px #f5a52499; animation: glow 1.6s ease-in-out infinite alternate; }
.sleep.reveal .actions .btn + .btn { background: #2a2a2e; color: #fff; box-shadow: 0 0 0 2px #6b6b72, 0 0 24px 4px #ffffff33; }
@keyframes glow { to { box-shadow: 0 0 0 2px #ffe2b0, 0 0 54px 16px #f5a524cc; } }
.sleep .actions { bottom: 60px; }

/* ---------- schedule: day summary, timeline, week strip ---------- */
.sched-page { display: flex; flex-direction: column; gap: var(--gap); height: calc(100% - 66px); }
.daysum { flex: none; }
.daysum-date { font-size: 34px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 12px; }
.daysum-date span { font-size: 20px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.daysum-line { font-size: 18px; color: var(--text-2); margin-top: 6px; }
.chip.allday { height: 36px; background: color-mix(in srgb, var(--info) 22%, var(--surface-2)); color: var(--text); font-size: 15px; }
.tl-card { flex: 1; min-height: 0; padding: 18px 16px 18px 12px; }
.tl { position: relative; flex: 1; min-height: 0; margin: 8px 0; }
.tl-hour { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.tl-hour span { position: absolute; left: 0; top: -10px; width: 62px; text-align: right; font-size: 14px; color: var(--muted); background: var(--surface); padding-right: 8px; }
.tl-events { position: absolute; left: 72px; right: 0; top: 0; bottom: 0; }
.tl-ev { position: absolute; min-height: 44px; padding: 0 3px 3px 0; z-index: 1; }
.tl-ev::before { content: ''; position: absolute; inset: 0 3px 3px 0; border-radius: 10px; background: color-mix(in srgb, var(--info) 26%, var(--surface-2)); border-left: 4px solid var(--info); z-index: -1; }
.tl-ev b { display: block; padding: 6px 10px 0 14px; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-ev span { display: block; padding: 0 10px 0 14px; font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-ev.past { opacity: .5; }
.tl-now { position: absolute; left: 62px; right: 0; height: 0; border-top: 2px solid var(--bad); z-index: 2; }
.tl-now::before { content: ''; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.tl-empty { position: absolute; left: 72px; right: 0; top: 40%; text-align: center; color: var(--muted); font-size: 18px; }
.weekstrip { flex: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.weekstrip .day { height: 92px; border-radius: 16px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-2); }
.weekstrip .day span { font-size: 15px; font-weight: 600; }
.weekstrip .day b { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; }
.weekstrip .day i { display: flex; gap: 4px; height: 7px; }
.weekstrip .day u { width: 7px; height: 7px; border-radius: 50%; background: var(--info); }
.weekstrip .day.on { background: var(--text); color: var(--bg); }
.weekstrip .day.on b { color: var(--bg); }
.weekstrip .day.on u { background: var(--bg); }

/* ---------- reading an email ---------- */
.drawer .panel.reader { width: min(760px, 100%); }
.r-subject { font-size: 24px; font-weight: 700; line-height: 1.25; }
.r-meta { font-size: 16px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.r-meta b { color: var(--text); font-size: 17px; }
.r-summary { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 16px; color: var(--text-2); }
.r-summary .act { color: var(--accent); font-weight: 600; margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.r-body { margin-top: 16px; font-size: 18px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.r-attach { margin-top: 14px; font-size: 15px; color: var(--muted); }

/* ==========================================================================
   Larger nav icons and secondary text (desk screen and laptops; phones keep
   their own compact sizes below)
   ========================================================================== */
@media (min-width: 601px) {
  html:not(.remote) {
    .rail svg.i { width: 38px; height: 38px; }
    .rail button { width: 70px; height: 70px; }
    .rail .badge { min-width: 22px; height: 22px; font-size: 13px; top: 6px; right: 6px; }
    svg.i { width: 24px; height: 24px; }
    .card-h { font-size: 17px; }
    .card-h .grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .card-h > svg.i { width: 26px; height: 26px; }
    .card-h .link { font-size: 15px; }
    .item .t b { font-size: 19px; }
    .item .t span { font-size: 16px; }
    .when { font-size: 16px; }
    .tag { font-size: 13px; }
    .empty { font-size: 18px; }
    .delta { font-size: 17px; }
    .kv b { font-size: 25px; }
    .kv span { font-size: 15px; }
    .clock .date { font-size: 24px; }
    .clock .wx { font-size: 20px; }
    .status { font-size: 16px; }
    .pill { font-size: 15px; }
    .chip { font-size: 17px; }
    .btn.small { font-size: 17px; height: 48px; }
    .home-digest b { font-size: 18px; }
    .home-digest ul { font-size: 16px; }
    .mail-counts .mail-acct b { font-size: 16px; }
    .msg .top b { font-size: 19px; }
    .msg .top .muted, .page-h .muted { font-size: 16px; }
    .msg p { font-size: 18px; }
    .msg .act { font-size: 17px; }
    .digest .head { font-size: 21px; }
    .digest ul { font-size: 18px; }
    .digest .foot { font-size: 16px; }
    .journal-list .said { font-size: 16px; }
    .tile span { font-size: 15px; }
    .chart text { font-size: 14px; }
    .chart-cap { font-size: 17px; }
    .set-row label { font-size: 19px; }
    .set-row label span { font-size: 15px; }
    .alert b { font-size: 18px; }
    .alert p { font-size: 16px; }
    .toast b { font-size: 18px; }
    .toast p { font-size: 16px; }
    .morning .m-block li b { font-size: 19px; }
    .morning .m-block li span { font-size: 15px; }
    .morning .m-block h3 { font-size: 15px; }
  }
}
@media (orientation: portrait) and (min-width: 601px) { html:not(.remote) .rail { height: 100px; } html:not(.remote) #banner { bottom: 108px; } }

/* ==========================================================================
   Phones: one scrolling column
   ========================================================================== */
@media (max-width: 600px) {
  html, body { height: 100dvh; }
  main { padding: 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rail { height: calc(64px + env(safe-area-inset-bottom)); padding: 0 2px env(safe-area-inset-bottom); }
  .rail button { width: auto; flex: 1; height: 54px; border-radius: 12px; }
  .rail svg { width: 24px; height: 24px; }
  .rail .badge { top: 4px; right: 2px; min-width: 18px; height: 18px; font-size: 11px; }

  .home { height: auto; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; gap: 10px;
    grid-template-areas: "clock" "tasks" "mail" "focus" "payit" "next"; }
  .card { padding: 16px; }
  .clock .time { font-size: 76px; }
  .clock .time small { font-size: 26px; }
  .clock .date { font-size: 18px; }
  .clock .wx { margin-top: 12px; font-size: 15px; flex-wrap: wrap; }
  .a-tasks .tag { display: inline; }
  .home-digest { -webkit-mask-image: none; mask-image: none; }
  .home .card > .list { flex: none; }
  .a-tasks .btn { margin-top: 10px !important; }
  .a-payit .kv { margin-top: 14px; }

  .page-h { height: auto; min-height: 44px; flex-wrap: wrap; margin-bottom: 10px; }
  .page-h h1 { font-size: 24px; }
  .btn { height: 46px; padding: 0 16px; font-size: 16px; }
  .chip { height: 38px; padding: 0 13px; font-size: 14px; }

  /* Pages scroll as a whole instead of fitting a fixed screen. */
  .tasks-page, .mail-page, .settings, .sched, .payit { height: auto; overflow: visible; }
  .tasks-page .tasks, .mail-page .mailview { flex: none; }
  .tasks .list, .mailview .card .list, .review .list { overflow: visible; height: auto; }
  .review, .digest { max-height: none; }
  .review .item { flex-wrap: wrap; }
  .review .item .t { flex-basis: 100%; }
  .tasks .item .t b { font-size: 17px; }
  .icon-btn { width: 42px; height: 42px; }
  .tiles { grid-template-columns: 1fr 1fr; }

  .focus { height: auto; grid-template-rows: auto auto; }
  .focus .main { padding: 70px 12px 22px; }
  .focus .phases { top: 14px; flex-wrap: wrap; padding: 0 8px; }
  .focus .bigring, .focus .bigring > svg { width: 280px; height: 280px; }
  .focus .bigring { margin-top: 10px; }
  .focus .bigring .clock-txt { font-size: 72px; }
  .focus .controls { gap: 8px; flex-wrap: wrap; justify-content: center; }
  .focus .controls .btn { min-width: 52px; padding: 0 12px; }
  .focus .controls .btn.primary { min-width: 120px; }
  .focus-side { flex-direction: column; height: auto; }

  .set-row { flex-wrap: wrap; padding: 8px 0; }
  input[type=range] { width: 150px; }
  .stepper b { min-width: 62px; }
  #banner .b { font-size: 14px; }
  .drawer .panel { padding: 14px; }
  .sleep .time { font-size: 96px; }
}

/* ---------- journal ---------- */
.journal-list { flex: 1; min-height: 0; overflow-y: auto; }
.journal-list .msg .top b { white-space: normal; font-weight: 500; }
.journal-list .said { font-size: 14px; color: var(--muted); font-style: italic; }
.journal-list .act { color: var(--good); }
.journal-list .act svg { width: 16px; height: 16px; stroke-width: 2.6; }
.daysep { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 2px; }
.digest .tomorrow { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.digest .tomorrow b { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.digest .tomorrow ul { margin-top: 6px; }
@media (max-width: 600px) { .journal-list { overflow: visible; } }

/* ==========================================================================
   Wind-down: warmer, lower-contrast, fewer things on screen
   ========================================================================== */
.winddown {
  --bg: #0b0908; --surface: #151110; --surface-2: #1d1715; --surface-3: #2a211d; --line: #2e2420;
  --text: #e6d9cc; --text-2: #b3a394; --muted: #7f7064;
  --accent: #d9914a; --info: #c9a27a; --good: #9fb58a;
}
.wind { display: grid; height: 100%; gap: var(--gap); grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas: "clock tomorrow tomorrow" "clock note open" "foot foot foot"; }
.wind > .card:nth-child(1) { grid-area: clock; justify-content: center; }
.wind > .card:nth-child(2) { grid-area: tomorrow; }
.wind > .card:nth-child(3) { grid-area: note; }
.wind > .card:nth-child(4) { grid-area: open; }
.wind .card > .list { flex: 1; min-height: 0; }
.wind .clock .time { font-size: 120px; }
.wind .clock .date { color: var(--muted); }
.wind-foot { grid-area: foot; display: flex; gap: 12px; justify-content: center; }
@media (orientation: portrait) {
  .wind { grid-template-columns: 1fr 1fr; grid-template-rows: 300px minmax(0, 0.8fr) minmax(0, 1fr) auto;
    grid-template-areas: "clock clock" "tomorrow tomorrow" "note open" "foot foot"; }
  .wind .clock .time { font-size: 150px; }
  .wind .tag { display: none; }
}

/* ==========================================================================
   Morning brief: a sunrise, then the day
   ========================================================================== */
.morning { position: fixed; inset: 0; z-index: 35; overflow: hidden; display: flex; flex-direction: column; color: #fff8ee; cursor: pointer;
  background: linear-gradient(#1b2340 0%, #5a4a78 34%, #d9785a 62%, #f7b267 78%, #fbe3b0 100%);
  animation: dawn 2.4s ease-out both; }
@keyframes dawn { from { filter: brightness(.25) saturate(.6); } to { filter: none; } }
.morning .sky { position: relative; height: 34%; flex: none; }
.morning .sun { position: absolute; left: 50%; bottom: -70px; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff6d8 0%, #ffd27a 45%, #ffb347 100%);
  box-shadow: 0 0 60px 30px #ffcf7a88, 0 0 160px 90px #ffb34744;
  animation: rise 3.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { transform: translateY(240px); opacity: .4; } to { transform: none; opacity: 1; } }
/* Slow-turning rays behind the sun. */
.morning .sun i { position: absolute; inset: -90px; border-radius: 50%;
  background: repeating-conic-gradient(#ffe3a300 0deg 10deg, #ffe3a340 10deg 20deg);
  -webkit-mask-image: radial-gradient(circle, transparent 38%, #000 40%, transparent 70%); mask-image: radial-gradient(circle, transparent 38%, #000 40%, transparent 70%);
  animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.morning .hills { position: absolute; left: -5%; right: -5%; bottom: -1px; height: 90px;
  background: radial-gradient(60% 100% at 25% 100%, #3a2f52 60%, transparent 61%), radial-gradient(70% 100% at 75% 100%, #2d2644 60%, transparent 61%); }
.morning .m-body { flex: 1; min-height: 0; background: #12101cf2; padding: 26px 30px 24px; display: flex; flex-direction: column; animation: up .9s .5s ease-out both; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.morning h1 { font-size: 46px; font-weight: 700; letter-spacing: -.02em; }
.morning .m-date { font-size: 20px; color: #cfc6dc; margin-top: 2px; }
.morning .m-wx { font-size: 20px; margin-top: 14px; color: #f3e9d8; }
.morning .m-wx b { font-size: 30px; font-weight: 600; margin-right: 6px; }
.morning .m-digest { margin-top: 10px; font-size: 17px; color: #cfc6dc; line-height: 1.35; }
.morning .m-grid { flex: 1; min-height: 0; overflow: hidden; margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; align-content: start; }
.morning .m-block h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #f7b267; margin-bottom: 6px; }
.morning .m-block ul { list-style: none; margin: 0; padding: 0; }
.morning .m-block li { padding: 7px 0; border-bottom: 1px solid #ffffff14; }
.morning .m-block li b { display: block; font-size: 17px; font-weight: 500; line-height: 1.3; }
.morning .m-block li span { font-size: 13px; color: #a79fb8; }
.morning .m-go { margin-top: 16px; height: 60px; font-size: 19px; background: #f7b267; color: #2a1a05; }
@media (orientation: landscape) {
  .morning { flex-direction: row; }
  .morning .sky { height: auto; width: 36%; }
  .morning .sun { bottom: 22%; }
}
@media (prefers-reduced-motion: reduce) { .morning, .morning .sun, .morning .sun i, .morning .m-body { animation: none; } }

@media (max-width: 600px) {
  .sched-page { height: auto; }
  .tl-card { flex: none; height: 520px; }
  .daysum-date { font-size: 26px; }
  .weekstrip { gap: 4px; position: sticky; bottom: 0; background: var(--bg); padding: 6px 0; }
  .weekstrip .day { height: 70px; border-radius: 12px; }
  .weekstrip .day b { font-size: 20px; }
  .weekstrip .day span { font-size: 12px; }
  .r-body { font-size: 16px; }
}

/* ---------- tasks with steps ---------- */
.task { border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; }
.task > .item { border-bottom: 0; }
.subs { margin: -4px 0 10px 48px; display: flex; flex-direction: column; }
.sub { display: flex; align-items: center; gap: 12px; min-height: 46px; font-size: 17px; color: var(--text-2); }
.sub.done span { text-decoration: line-through; color: var(--muted); }
.sub span { flex: 1; min-width: 0; }
.check.small { width: 28px; height: 28px; }
.check.small svg { width: 16px; height: 16px; }
.icon-btn.small { width: 38px; height: 38px; opacity: .55; }
.add-step { align-self: flex-start; height: 42px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 15px; font-weight: 600; }
.add-step svg { width: 18px; height: 18px; }
.steps { font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.steps.all { color: var(--good); }
.task-update { margin: 0 0 8px 48px; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 10px; font-size: 15px;
  color: var(--text); background: color-mix(in srgb, var(--info) 16%, var(--surface-2)); }
.task-update > svg { width: 18px; height: 18px; color: var(--info); flex: none; }
.task-update span { flex: 1; min-width: 0; }
.task-update i { color: var(--muted); font-style: normal; }
.item .t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journal-list .act.done { color: var(--good); }
.journal-list .act:not(.done) { color: var(--accent); }

/* ---------- email shown as it was sent ---------- */
.drawer .panel.reader { display: flex; flex-direction: column; }
.r-frame { flex: 1; min-height: 420px; width: 100%; margin-top: 14px; border: 0; border-radius: 12px; background: #fff; }

/* ---------- settings: grouped cards on a scrolling page ---------- */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-auto-rows: max-content; gap: var(--gap);
  height: calc(100% - 66px); overflow-y: auto; align-content: start; padding-bottom: 8px; }
.settings > .card { overflow: visible; }
.set-row { min-height: 68px; gap: 16px; padding: 8px 0; }
.set-row label { flex: 1; min-width: 0; }
.set-ctl { flex: none; display: flex; align-items: center; gap: 10px; }
.set-ctl:empty { display: none; }

/* ==========================================================================
   Desktop (a laptop or monitor, signed in remotely): labelled sidebar, a
   scrolling page, and normal-density text.
   ========================================================================== */
@media (min-width: 900px) {
  .remote body { flex-direction: row; }
  .remote .rail { order: 0; width: 228px; height: auto; flex: none; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 2px; padding: 20px 12px; border-top: 0; border-right: 1px solid var(--line); }
  .remote .rail::before { content: 'Desk Hub'; font-size: 20px; font-weight: 700; padding: 2px 12px 18px; letter-spacing: -.01em; }
  .remote .rail button { width: auto; height: 44px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 12px;
    border-radius: 10px; font-size: 15px; font-weight: 600; }
  .remote .rail button::after { content: attr(aria-label); }
  .remote .rail button:hover { background: var(--surface-2); color: var(--text); }
  .remote .rail svg.i { width: 20px; height: 20px; }
  .remote .rail .spacer { display: block; flex: 1; }
  .remote .rail .badge { position: static; order: 3; margin-left: auto; }

  .remote main { height: 100vh; padding: 26px 32px; overflow-y: auto; }
  .remote main > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
  .remote .page-h { height: 44px; margin-bottom: 18px; }
  .remote .page-h h1 { font-size: 26px; }
  .remote .btn { height: 42px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
  .remote .btn.small { height: 36px; font-size: 14px; padding: 0 12px; }
  .remote .chip { height: 34px; font-size: 14px; padding: 0 13px; }
  .remote .btn:hover, .remote .chip:hover, .remote .icon-btn:hover { filter: brightness(1.2); }

  .remote .home { height: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(250px, auto);
    grid-template-areas: "clock focus payit" "tasks mail next"; }
  .remote .clock .time { font-size: 84px; }
  .remote .home .card > .list { flex: none; }
  .remote .home-digest { -webkit-mask-image: none; mask-image: none; }
  .remote .mini-focus { flex-direction: row; align-items: center; }
  .remote .mini-focus .ring { width: 120px; height: 120px; display: block; }
  .remote .mini-focus .ring svg { width: 120px; height: 120px; }
  .remote .mini-focus .ring span { position: absolute; font-size: 26px; }
  .remote .mini-focus .btns { flex-direction: column; }
  .remote .mini-focus .btns .btn.ghost { display: inline-flex; }

  .remote .tasks-page, .remote .mail-page, .remote .sched-page, .remote .settings, .remote .payit { height: calc(100vh - 52px - 62px); }
  .remote .focus { height: calc(100vh - 52px); grid-template-columns: 1fr 340px; grid-template-rows: none; }
  .remote .focus-side { flex-direction: column; height: auto; }
  .remote .focus .bigring, .remote .focus .bigring > svg { width: 360px; height: 360px; }
  .remote .focus .bigring .clock-txt { font-size: 92px; }
  .remote .mailview { grid-auto-flow: column; grid-auto-columns: 1fr; grid-auto-rows: auto; }
  .remote .payit { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto minmax(0, 1fr); overflow: visible; }
  .remote .payit > .card { overflow: hidden; }
  .remote .digest { max-height: 38%; }
  .remote .review { max-height: 40%; }
  .remote .sched-page { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .remote .sched-page .daysum { grid-column: 1; grid-row: 1; }
  .remote .sched-page .weekstrip { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; align-content: start; }
  .remote .sched-page .weekstrip .day { height: 54px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 16px; border-radius: 12px; }
  .remote .sched-page .weekstrip .day span { width: 52px; text-align: left; }
  .remote .sched-page .weekstrip .day b { font-size: 20px; }
  .remote .sched-page .weekstrip .day i { margin-left: auto; }
  .remote .sched-page .tl-card { grid-column: 2; grid-row: 1 / span 2; }
  .remote .set-row { min-height: 58px; }
  .remote .drawer .panel.reader { width: min(860px, 62vw); }
  .remote #banner { left: 244px; top: 0; bottom: auto; }
  .remote #toasts { left: auto; right: 20px; width: 380px; }
  .remote .kb.native .top { width: min(560px, 100%); }
}

@media (max-width: 600px) {
  .settings { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .subs, .task-update { margin-left: 44px; }
  .r-frame { min-height: 60vh; }
}

/* ---------- PayIt: platform profit ---------- */
.kv.four { gap: 14px; justify-content: space-between; }
.kv.four b { font-size: 21px; }
.kv .profit b { color: var(--money); }
.kept { margin-top: 8px; font-size: 17px; color: var(--text-2); }
.kept b { color: var(--money); font-weight: 700; }
.kept.muted { font-size: 14px; color: var(--muted); }
html:not(.remote) .kv.four b { font-size: 21px; }
html:not(.remote) .kv.four span { font-size: 13px; }

/* ---------- loading an email ---------- */
.loading { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; color: var(--muted); font-size: 16px; }
.loadbar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; position: relative; }
.loadbar i { position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 3px; background: var(--accent); animation: loadslide 1.1s ease-in-out infinite; }
@keyframes loadslide { 0% { left: -38%; } 100% { left: 100%; } }