/* One Line — Lagoon.
   Cyan→mint is you, coral is her. Bright, light, sharp. */

/* ════════════ THEMES ════════════
   Nine complete palettes, not nine accent colours. Each one sets the page,
   the ink, the two people's colours and both gradients, so switching changes
   the whole room rather than repainting one wall.

   --cyan and --coral keep their names for continuity: "cyan" always means
   your colour, "coral" always means theirs, whatever hue the theme gives them. */

:root {
  --field: #F4FBFB;
  --surface: #FFFFFF;
  --sunk: #EEF6F7;
  --ink: #0A1A20;
  --ink-mid: #31505C;
  --ink-soft: #5A7783;
  --line: #DAE7E9;

  --cyan: #0284A8;
  --mint: #0E8F7C;
  --coral: #C8394A;

  --grad-you: linear-gradient(160deg,#0A9CC4 0%,#068AA6 100%);
  --grad-them: linear-gradient(160deg,#D8455A 0%,#C0344A 100%);

  --tint-you: #E6F3F7;
  --tint-them: #FBECEE;

  --glow-you: rgba(10,156,196,.13);
  --glow-them: rgba(216,69,90,.11);

  /* Concentric: each nested surface is the one outside it minus its padding. */
  --r-xl: 20px;
  --r-lg: 16px;
  --r-md: 11px;
  --r-sm: 8px;

  --sh-1: 0 0 0 1px rgba(11,31,42,.055), 0 1px 2px rgba(11,31,42,.06);
  --sh-2: 0 0 0 1px rgba(11,31,42,.06), 0 1px 2px rgba(11,31,42,.05), 0 8px 20px -12px rgba(11,31,42,.30);
  --sh-you:  0 1px 2px rgba(0,60,90,.18), 0 4px 12px -6px rgba(0,140,190,.55);
  --sh-them: 0 1px 2px rgba(120,30,30,.18), 0 4px 12px -6px rgba(200,60,70,.45);

  --ease: cubic-bezier(.22,1,.36,1);
  --gutter: 18px;
}

html[data-theme="dusk"] {
  --field: #F8F6FC; --surface: #FFFFFF; --sunk: #F3F0FA; --line: #E4DEF0;
  --ink: #160E24; --ink-mid: #4C3D63; --ink-soft: #7A6C93;
  --cyan: #6D3FD1; --mint: #8B4FD6; --coral: #C36A18;
  --grad-you: linear-gradient(160deg,#7C4BDD 0%,#6534C4 100%);
  --grad-them: linear-gradient(160deg,#D4801F 0%,#BE6A14 100%);
  --tint-you: #EFE9FB; --tint-them: #FBF0E2;
  --glow-you: rgba(124,75,221,.13); --glow-them: rgba(212,128,31,.11);
}

html[data-theme="peach"] {
  --field: #FCF7F3; --surface: #FFFFFF; --sunk: #F8F1EA; --line: #EDDDCF;
  --ink: #22140A; --ink-mid: #5E4531; --ink-soft: #8B6E56;
  --cyan: #C85A26; --mint: #C2841A; --coral: #0C7E80;
  --grad-you: linear-gradient(160deg,#D96530 0%,#C24F1D 100%);
  --grad-them: linear-gradient(160deg,#0F8E90 0%,#0A7476 100%);
  --tint-you: #F9EBE0; --tint-them: #E2F1F1;
  --glow-you: rgba(217,101,48,.13); --glow-them: rgba(15,142,144,.11);
}

html[data-theme="meadow"] {
  --field: #F5FAF4; --surface: #FFFFFF; --sunk: #EFF6EE; --line: #DBE8D8;
  --ink: #0D1D0C; --ink-mid: #375134; --ink-soft: #617C5D;
  --cyan: #1E7F43; --mint: #4E7C15; --coral: #B02B65;
  --grad-you: linear-gradient(160deg,#22904C 0%,#177238 100%);
  --grad-them: linear-gradient(160deg,#C03370 0%,#A32259 100%);
  --tint-you: #E6F2E7; --tint-them: #FAE9F0;
  --glow-you: rgba(34,144,76,.13); --glow-them: rgba(192,51,112,.11);
}

html[data-theme="cobalt"] {
  --field: #F5F7FC; --surface: #FFFFFF; --sunk: #EFF3FA; --line: #DCE4F0;
  --ink: #08122A; --ink-mid: #2F4165; --ink-soft: #5C6E92;
  --cyan: #1E52C4; --mint: #3A3FB0; --coral: #C25A12;
  --grad-you: linear-gradient(160deg,#265FD6 0%,#1A47AE 100%);
  --grad-them: linear-gradient(160deg,#D2661A 0%,#B85212 100%);
  --tint-you: #E6ECF9; --tint-them: #FAEDE1;
  --glow-you: rgba(38,95,214,.13); --glow-them: rgba(210,102,26,.11);
}

html[data-theme="rose"] {
  --field: #FCF6F8; --surface: #FFFFFF; --sunk: #F8F0F3; --line: #EEDCE3;
  --ink: #240B14; --ink-mid: #5E3644; --ink-soft: #8B6472;
  --cyan: #C11F5E; --mint: #D2376F; --coral: #6B3AC0;
  --grad-you: linear-gradient(160deg,#D02A68 0%,#B21653 100%);
  --grad-them: linear-gradient(160deg,#7A45CE 0%,#6432B4 100%);
  --tint-you: #FAE7EE; --tint-them: #EFE7FA;
  --glow-you: rgba(208,42,104,.13); --glow-them: rgba(122,69,206,.11);
}

html[data-theme="citrus"] {
  --field: #FCFAF3; --surface: #FFFFFF; --sunk: #F8F4E9; --line: #EBE1C9;
  --ink: #1F1A08; --ink-mid: #544924; --ink-soft: #7E7149;
  --cyan: #B3760A; --mint: #A67908; --coral: #0A6EA0;
  --grad-you: linear-gradient(160deg,#C2820E 0%,#A66A06 100%);
  --grad-them: linear-gradient(160deg,#0E7CB0 0%,#0A6494 100%);
  --tint-you: #F8EFD8; --tint-them: #E1EFF7;
  --glow-you: rgba(194,130,14,.13); --glow-them: rgba(14,124,176,.11);
}

html[data-theme="candy"] {
  --field: #FBF6FC; --surface: #FFFFFF; --sunk: #F7F0F9; --line: #EBDCEF;
  --ink: #230925; --ink-mid: #5C3260; --ink-soft: #87608B;
  --cyan: #A21FB0; --mint: #B02576; --coral: #4E7C15;
  --grad-you: linear-gradient(160deg,#B02BC0 0%,#9518A2 100%);
  --grad-them: linear-gradient(160deg,#5C8F1B 0%,#4A7513 100%);
  --tint-you: #F6E7F9; --tint-them: #EDF5E0;
  --glow-you: rgba(176,43,192,.13); --glow-them: rgba(92,143,27,.11);
}

html[data-theme="paper"] {
  --field: #FAFAF9; --surface: #FFFFFF; --sunk: #F4F4F2; --line: #E2E2DE;
  --ink: #111214; --ink-mid: #43454C; --ink-soft: #71747C;
  --cyan: #26282E; --mint: #4A4D55; --coral: #A83A0C;
  --grad-you: linear-gradient(160deg,#33363D 0%,#212328 100%);
  --grad-them: linear-gradient(160deg,#B84210 0%,#9C350A 100%);
  --tint-you: #EEEEEC; --tint-them: #F8EAE2;
  --glow-you: rgba(51,54,61,.10); --glow-them: rgba(184,66,16,.11);
}

/* ── the dark half ──
   Five of them, because "dark mode" is not one look. Shadows are re-tuned in
   each: the light-theme shadows vanish on a dark ground. */

html[data-theme="midnight"] {
  --field: #07090F; --surface: #12151F; --sunk: #171B27; --line: #262B3A;
  --ink: #F0F2F8; --ink-mid: #AAB1C4; --ink-soft: #767D92;
  --cyan: #7DD3FC; --mint: #86EFAC; --coral: #FCA5A5;
  --grad-you: linear-gradient(102deg, #38BDF8 0%, #818CF8 100%);
  --grad-them: linear-gradient(102deg, #F87171 0%, #FB923C 100%);
  --tint-you: #16233D; --tint-them: #33191C;
  --glow-you: rgba(56,189,248,.18); --glow-them: rgba(248,113,113,.16);
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px -4px rgba(0,0,0,.55);
  --sh-2: 0 1px 2px rgba(0,0,0,.45), 0 14px 32px -18px rgba(0,0,0,.85);
}

html[data-theme="plum"] {
  --field: #120A1B; --surface: #1E132B; --sunk: #241736; --line: #352348;
  --ink: #F6EEFF; --ink-mid: #C0AAD8; --ink-soft: #8E77A8;
  --cyan: #C4B5FD; --mint: #F0ABFC; --coral: #FDBA74;
  --grad-you: linear-gradient(102deg, #A78BFA 0%, #F0ABFC 100%);
  --grad-them: linear-gradient(102deg, #FB923C 0%, #FCD34D 100%);
  --tint-you: #2C1D46; --tint-them: #3A2416;
  --glow-you: rgba(167,139,250,.20); --glow-them: rgba(240,171,252,.16);
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px -4px rgba(0,0,0,.55);
  --sh-2: 0 1px 2px rgba(0,0,0,.45), 0 14px 32px -18px rgba(0,0,0,.85);
}

html[data-theme="forest"] {
  --field: #06120D; --surface: #0F1F17; --sunk: #13261C; --line: #1F3A2B;
  --ink: #E9F7EF; --ink-mid: #A2C4B1; --ink-soft: #6F9382;
  --cyan: #6EE7B7; --mint: #A3E635; --coral: #FDA4AF;
  --grad-you: linear-gradient(102deg, #34D399 0%, #A3E635 100%);
  --grad-them: linear-gradient(102deg, #FB7185 0%, #F9A8D4 100%);
  --tint-you: #123024; --tint-them: #331B22;
  --glow-you: rgba(52,211,153,.18); --glow-them: rgba(251,113,133,.16);
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px -4px rgba(0,0,0,.55);
  --sh-2: 0 1px 2px rgba(0,0,0,.45), 0 14px 32px -18px rgba(0,0,0,.85);
}

html[data-theme="ember"] {
  --field: #140A07; --surface: #221310; --sunk: #2A1814; --line: #3D241D;
  --ink: #FDF0E8; --ink-mid: #D2AE9C; --ink-soft: #A17F6D;
  --cyan: #FDBA74; --mint: #FCD34D; --coral: #7DD3FC;
  --grad-you: linear-gradient(102deg, #F97316 0%, #FBBF24 100%);
  --grad-them: linear-gradient(102deg, #38BDF8 0%, #67E8F9 100%);
  --tint-you: #3A2114; --tint-them: #12293A;
  --glow-you: rgba(249,115,22,.20); --glow-them: rgba(56,189,248,.16);
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px -4px rgba(0,0,0,.55);
  --sh-2: 0 1px 2px rgba(0,0,0,.45), 0 14px 32px -18px rgba(0,0,0,.85);
}

html[data-theme="slate"] {
  --field: #0E1013; --surface: #191C21; --sunk: #1E2228; --line: #2C3138;
  --ink: #ECEEF2; --ink-mid: #AAB0BA; --ink-soft: #7B828C;
  --cyan: #E2E8F0; --mint: #CBD5E1; --coral: #F87171;
  --grad-you: linear-gradient(102deg, #94A3B8 0%, #E2E8F0 100%);
  --grad-them: linear-gradient(102deg, #EF4444 0%, #F87171 100%);
  --tint-you: #23282F; --tint-them: #33191A;
  --glow-you: rgba(148,163,184,.16); --glow-them: rgba(239,68,68,.16);
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px -4px rgba(0,0,0,.55);
  --sh-2: 0 1px 2px rgba(0,0,0,.45), 0 14px 32px -18px rgba(0,0,0,.85);
}

/* The first dark one. */
html[data-theme="night"] {
  --field: #0C1222; --surface: #161E33; --sunk: #1B2440; --line: #2A3557;
  --ink: #EAF0FF; --ink-mid: #A9B6D8; --ink-soft: #7B88AC;
  --cyan: #38BDF8; --mint: #34D399; --coral: #FB7185;
  --grad-you: linear-gradient(102deg, #38BDF8 0%, #34D399 100%);
  --grad-them: linear-gradient(102deg, #FB7185 0%, #FDA4AF 100%);
  --tint-you: #16324A; --tint-them: #3A1E28;
  --glow-you: rgba(56,189,248,.20); --glow-them: rgba(251,113,133,.18);
  --sh-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 8px -4px rgba(0,0,0,.45);
  --sh-2: 0 1px 2px rgba(0,0,0,.35), 0 14px 32px -18px rgba(0,0,0,.75);
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Class-level `display` beats the UA sheet's [hidden] rule, so state it here. */
[hidden] { display: none !important; }

/* ════════════ WALLPAPER ════════════
   A layer behind everything. The built-in ones are drawn in CSS from the
   theme's own colours, so they cost nothing to store and re-tint themselves
   whenever the theme changes. Your own photo sits in the same slot, dimmed
   and blurred by however much you chose. */

#wallpaper {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--field);
  background-size: cover;
  background-position: center;
}

/* the veil that keeps text readable over a photo */
#wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--field);
  opacity: var(--wall-dim, 0);
}

body[data-wall="aurora"] #wallpaper {
  background-image:
    radial-gradient(720px 500px at 96% -8%, var(--glow-them), transparent 62%),
    radial-gradient(660px 460px at -8% 2%, var(--glow-you), transparent 60%);
}
body[data-wall="sunset"] #wallpaper {
  background-image:
    radial-gradient(900px 520px at 50% 108%, var(--glow-them), transparent 66%),
    radial-gradient(700px 420px at 12% -6%, var(--glow-you), transparent 60%);
}
body[data-wall="blossom"] #wallpaper {
  background-image:
    radial-gradient(340px 340px at 14% 22%, var(--glow-them), transparent 70%),
    radial-gradient(300px 300px at 84% 34%, var(--glow-you), transparent 70%),
    radial-gradient(380px 380px at 46% 88%, var(--glow-them), transparent 72%);
}
body[data-wall="ocean"] #wallpaper {
  background-image:
    linear-gradient(180deg, transparent 0%, var(--glow-you) 100%),
    radial-gradient(800px 400px at 70% 10%, var(--glow-them), transparent 64%);
}
body[data-wall="glow"] #wallpaper {
  background-image:
    radial-gradient(circle at 50% 50%, var(--glow-you) 0%, transparent 58%),
    radial-gradient(circle at 12% 86%, var(--glow-them) 0%, transparent 52%);
}




body[data-wall="grain"] #wallpaper {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .55;
}
body[data-wall="bokeh"] #wallpaper {
  background-image:
    radial-gradient(120px 120px at 18% 14%, var(--glow-you), transparent 68%),
    radial-gradient(70px 70px at 74% 9%, var(--glow-them), transparent 66%),
    radial-gradient(180px 180px at 88% 42%, var(--glow-you), transparent 70%),
    radial-gradient(90px 90px at 34% 56%, var(--glow-them), transparent 66%),
    radial-gradient(150px 150px at 8% 78%, var(--glow-them), transparent 70%),
    radial-gradient(60px 60px at 62% 88%, var(--glow-you), transparent 64%);
}
body[data-wall="ribbon"] #wallpaper {
  background-image:
    linear-gradient(72deg, transparent 12%, var(--glow-you) 26%, transparent 40%),
    linear-gradient(72deg, transparent 44%, var(--glow-them) 58%, transparent 72%),
    linear-gradient(72deg, transparent 76%, var(--glow-you) 90%, transparent 100%);
}
body[data-wall="split"] #wallpaper {
  background-image: linear-gradient(114deg, var(--glow-you) 0 48%, var(--glow-them) 48% 100%);
}
body[data-wall="vignette"] #wallpaper {
  background-image: radial-gradient(120% 92% at 50% 44%, transparent 40%, var(--glow-them) 100%);
}
body[data-wall="marble"] #wallpaper {
  background-image:
    conic-gradient(from 210deg at 32% 28%, var(--glow-you), transparent 30%, var(--glow-them) 58%, transparent 82%, var(--glow-you)),
    radial-gradient(700px 700px at 78% 76%, var(--glow-them), transparent 62%);
}

body {
  margin: 0;
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
  height: var(--app-h, 100dvh);
  overflow: hidden;
  background: var(--field);
  color: var(--ink);
  font-family: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.006em;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* ════ SETUP ════ */

.screen-setup {
  height: var(--app-h, 100dvh);
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(30px, env(safe-area-inset-top)) var(--gutter) max(30px, env(safe-area-inset-bottom));
}

.setup { width: 100%; max-width: 430px; }
.setup-head { margin-bottom: 24px; }

.mark {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 19px;
  background: var(--grad-you);
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(0,168,220,.9);
  margin-bottom: 20px;
}
/* the envelope is a filled shape, so it wants a touch more room than the
   old single stroke did */
.mark svg { width: 38px; height: 38px; }

.setup-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 7.6vw, 35px);
  font-weight: 800;
  letter-spacing: -.038em;
  line-height: 1.12;
  text-wrap: balance;
}
.setup-sub { margin: 0; color: var(--ink-mid); font-size: 15.5px; text-wrap: pretty; }

.stack { display: grid; gap: 12px; }

.option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition-property: transform, box-shadow;
  transition-duration: .18s;
  transition-timing-function: var(--ease);
}
.option:active { transform: scale(.96); }
.option:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.option-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  color: #fff;
}
.option-icon svg { width: 22px; height: 22px; }
.option-icon-you  { background: var(--grad-you);  box-shadow: var(--sh-you); }
.option-icon-them { background: var(--grad-them); box-shadow: var(--sh-them); }
.option-icon-plain { background: var(--sunk); color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px var(--line); }

.option-quiet { box-shadow: var(--sh-1); }
.option-quiet .option-text strong { font-size: 15.5px; }

.option-text { display: grid; gap: 1px; min-width: 0; }
.option-text strong { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; }
.option-text small { font-size: 13.5px; color: var(--ink-soft); }

.option-go { color: var(--ink-soft); display: grid; place-items: center; }
.option-go svg { width: 20px; height: 20px; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  min-height: 42px;
  padding: 0 12px 0 6px;
  margin-bottom: 4px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
  transition: background-color .16s var(--ease), transform .16s var(--ease);
}
.back svg { width: 19px; height: 19px; }
.back:active { transform: scale(.96); }
.back:hover { background: rgba(11,31,42,.05); }
.back:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ════ PANELS & FIELDS ════ */

.panel { background: var(--surface); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--sh-2); }
.panel-center { text-align: center; }

.step-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0,169,230,.11);
  color: var(--cyan);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.panel-head { margin: 0 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -.028em; text-wrap: balance; }
.panel-sub  { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-mid); text-wrap: pretty; }
.panel-foot { margin: 14px 0 0; font-size: 13px; color: var(--ink-soft); text-wrap: pretty; }

.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--ink-mid); }

.input-wrap { position: relative; display: block; }
.input-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
  display: grid; place-items: center;
}
.input-icon svg { width: 20px; height: 20px; }

.input-wrap input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px 0 44px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunk);
  font: inherit;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--ink);
  transition-property: border-color, box-shadow, background-color;
  transition-duration: .16s;
  transition-timing-function: var(--ease);
}
.input-wrap input::placeholder { color: var(--ink-soft); font-weight: 400; }
.input-wrap input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0,169,230,.15);
}
.input-wrap:focus-within .input-icon { color: var(--cyan); }

.code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-bottom: 18px; }

.code-box {
  width: 100%;
  height: 58px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunk);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 23px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  transition-property: border-color, box-shadow, background-color, transform;
  transition-duration: .16s;
  transition-timing-function: var(--ease);
}
.code-box:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0,169,230,.15);
  transform: translateY(-2px);
}
.code-box.is-filled { border-color: var(--cyan); background: var(--surface); }

.code-8 { grid-template-columns: repeat(4, 1fr) 12px repeat(4, 1fr); gap: 5px; }
.code-8 .code-box { height: 52px; font-size: 19px; }
.code-dash { align-self: center; height: 2px; border-radius: 1px; background: var(--line); }

.code-show {
  margin-bottom: 18px;
  padding: 18px 12px;
  border-radius: var(--r-lg);
  background: var(--sunk);
  border: 1.5px dashed #B7DFE4;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: clamp(26px, 8vw, 34px);
  font-weight: 700;
  letter-spacing: .26em;
  text-indent: .26em;    /* optical: cancels the trailing letter-space */
  color: var(--ink);
}
.code-show-key { font-size: clamp(21px, 6.4vw, 27px); letter-spacing: .18em; text-indent: .18em; }

/* ════ BUTTONS ════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  cursor: pointer;
  transition-property: transform, box-shadow, opacity, background-color;
  transition-duration: .18s;
  transition-timing-function: var(--ease);
}
.btn:active { transform: scale(.96); }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn-icon, .btn-arrow { width: 19px; height: 19px; flex: none; }

.btn-primary {
  background: var(--grad-you);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 0 14px rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(0,0,0,.07),
    0 1px 1px rgba(0,0,0,.10),
    0 3px 10px -6px rgba(0,0,0,.32);
  text-shadow: 0 1px 0 rgba(0,0,0,.14);
}
.btn-primary:active {
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.22),
    0 0 0 1px rgba(0,0,0,.08);
}
.btn-primary .btn-arrow { transition: transform .18s var(--ease); }
.btn-primary:hover .btn-arrow { transform: translateX(2px); }

.btn-ghost {
  background: var(--surface);
  color: var(--ink-mid);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 0 0 1px rgba(11,31,42,.10),
    0 1px 1px rgba(11,31,42,.05);
}
.btn-ghost:hover { background: var(--sunk); }

.btn-quiet {
  background: transparent;
  color: var(--ink-soft);
  font-weight: 600;
  min-height: 46px;
}
.btn-quiet:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn-quiet.is-arming { background: color-mix(in srgb, var(--coral) 14%, transparent); color: var(--coral); }

/* ════ HOME SHELL ════ */
/* A phone app. On a laptop it stays phone-shaped and centred rather than
   stretching a three-word bubble across the whole screen. */

.screen-app {
  display: flex;
  flex-direction: column;
  height: var(--app-h, 100dvh);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-top: max(10px, env(safe-area-inset-top));
}

.appbar {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px var(--gutter) 12px;
}

.pair {
  display: flex;
  align-items: center;
  padding: 4px;              /* pushes the hit area past 40px */
  margin: -4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: transform .16s var(--ease);
}
.pair:active { transform: scale(.94); }
.pair:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.pair-link { width: 12px; height: 2px; background: var(--line); margin: 0 -5px; }

.avatar {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--field), 0 0 0 3px rgba(11,31,42,.07);
  position: relative;
  z-index: 1;
  flex: none;
}
.avatar-you  { background: var(--grad-you); }
.avatar-them { background: var(--grad-them); }
/* a highlight across the top of the disc, so it reads as a sphere not a dot */
.avatar-you, .avatar-them {
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 52%), var(--grad-you);
}
.avatar-them {
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 52%), var(--grad-them);
}

/* a real face replaces the initials */
.avatar.has-photo { background-size: cover; background-position: center; color: transparent; }

.avatar-lg { width: 76px; height: 76px; font-size: 26px; box-shadow: none; }

.avatar-row { display: flex; align-items: center; gap: 16px; }
.avatar-actions { display: grid; gap: 6px; justify-items: start; }
.avatar-sm { width: 24px; height: 24px; font-size: 10.5px; box-shadow: none; }

.appbar-text { min-width: 0; }
.appbar-title {
  margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appbar-date {
  margin: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--gutter) 24px;
  display: grid;
  /* An implicit grid column takes its width from its widest child, so one
     wide panel stretched the whole pane and pushed the rest off-screen.
     minmax(0, 1fr) pins the column to the pane and lets children shrink. */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-content: start;
}
.pane > * { min-width: 0; }
.pane-pads { gap: 18px; }

/* ════ NOTES ════ */

.feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px var(--gutter) 10px;
  -webkit-overflow-scrolling: touch;
}

.load-earlier {
  display: block;
  margin: 4px auto 14px;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--sh-1);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
  transition: transform .16s var(--ease);
}
.load-earlier:active { transform: scale(.96); }

.day-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--ink-soft);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.day-mark::before, .day-mark::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.bubble-row { display: grid; gap: 5px; margin-bottom: 12px; justify-items: start; }
.bubble-row.is-mine { justify-items: end; }

.bubble-who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0 4px;
}

/* The tints come from the theme, never hardcoded. A fixed light background
   with the theme's own --ink on top of it is white-on-white in every dark
   theme, which is exactly what used to happen here. */
.bubble {
  outline: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  outline-offset: -1px;
  max-width: 88%;
  padding: 12px 15px;
  border-radius: var(--r-lg);
  background: var(--tint-them);
  color: var(--ink);
  box-shadow: var(--sh-1);
  font-size: 16.5px;
  line-height: 1.45;
  letter-spacing: -.01em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  border-bottom-left-radius: var(--r-sm);   /* a tail on the side it came from */
}
.is-mine .bubble {
  background: var(--tint-you);
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-sm);
}

.bubble-time {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--ink-soft);
  padding: 0 6px;
  opacity: .85;
}

.bubble-drop {
  border: 0;
  background: transparent;
  padding: 2px 6px;
  font: inherit;
  font-size: 10.5px;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 6px;
}
.bubble-drop:hover { background: rgba(244,81,91,.10); color: var(--coral); }
.bubble-drop.is-arming { color: var(--coral); font-weight: 700; }

/* ════ THINKING OF YOU ════ */


/* the beat it gives back, so the tap feels like it landed */
.pad-btn-think.is-sent { animation: thump .62s var(--ease); }
@keyframes thump {
  0%   { transform: scale(1); }
  22%  { transform: scale(.86); }
  46%  { transform: scale(1.18); }
  70%  { transform: scale(.97); }
  100% { transform: scale(1); }
}

/* what arrives when they tap it */
.thought {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 2px;
  padding: 11px 15px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--coral) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coral) 26%, transparent);
  animation: rise .4s var(--ease) both;
}
.thought svg { width: 19px; height: 19px; flex: none; color: var(--coral); }
.thought b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.thought span { font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ════ LISTS ════ */

/* A screen in its own right, laid out exactly like the pad screen — not a
   layer floating over the app. show() hides whichever screen isn't current. */
.screen-list {
  display: flex;
  flex-direction: column;
  height: var(--app-h, 100dvh);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-top: max(10px, env(safe-area-inset-top));
  animation: slideIn .28s var(--ease) both;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

.back-tight { margin: 0; padding: 8px 10px 8px 4px; }

.list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
  cursor: pointer;
  text-align: left;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.list-card:active { transform: scale(.96); }
.list-card + .list-card { margin-top: 10px; }

.list-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.list-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* how much is done, at a glance */
.list-ring { width: 38px; height: 38px; flex: none; transform: rotate(-90deg); }
.list-ring circle { fill: none; stroke-width: 4.5; }
.list-ring .track { stroke: color-mix(in srgb, var(--ink) 12%, transparent); }
.list-ring .fill  { stroke: var(--cyan); stroke-linecap: round; transition: stroke-dashoffset .4s var(--ease); }

.item-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  animation: rise .3s var(--ease) both;
}
.item-row + .item-row { margin-top: 8px; }

.item-tick {
  width: 26px; height: 26px;
  position: relative;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--sunk);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 18%, transparent);
  cursor: pointer;
  flex: none;
  transition: background .18s var(--ease), box-shadow .18s var(--ease), transform .16s var(--ease);
}
/* the visible circle is 26px; this pushes the tap target to 44 */
.item-tick::before { content: ""; position: absolute; inset: -9px; }
.item-tick:active { transform: scale(.9); }
.item-tick svg { width: 15px; height: 15px; color: #fff; opacity: 0; transform: scale(.25); filter: blur(4px);
  transition: opacity .2s cubic-bezier(.2,0,0,1), transform .2s cubic-bezier(.2,0,0,1), filter .2s cubic-bezier(.2,0,0,1); }

.item-row.is-done .item-tick {
  background: var(--grad-you);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.16);
}
.item-row.is-done .item-tick svg { opacity: 1; transform: scale(1); filter: blur(0); }

.item-body { min-width: 0; }
.item-text {
  font-size: 15px;
  color: var(--ink);
  overflow-wrap: anywhere;
  transition: color .2s var(--ease);
}
.item-row.is-done .item-text { color: var(--ink-soft); text-decoration: line-through; }
.item-who { margin-top: 2px; font-size: 11px; color: var(--ink-soft); }

.item-drop {
  width: 32px; height: 32px;
  position: relative;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  flex: none;
  transition: color .16s var(--ease), transform .16s var(--ease);
}
.item-drop::before { content: ""; position: absolute; inset: -6px; }
.item-drop:active { transform: scale(.9); }
.item-drop svg { width: 16px; height: 16px; }

.compose-field input {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;          /* under 16px and iOS zooms the whole page */
  color: var(--ink);
  outline: none;
}

/* ════ TAB COUNTS ════ */

.tab { position: relative; }

.tab-count {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(6px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;   /* 9 → 10 must not jump */
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25);
  animation: countIn .26s var(--ease) both;
  pointer-events: none;
}
@keyframes countIn {
  from { opacity: 0; transform: translateX(6px) scale(.4); }
  to   { opacity: 1; transform: translateX(6px) scale(1); }
}
/* the selected tab is already where you are, so its count reads quieter */
.tab.is-on .tab-count { background: color-mix(in srgb, var(--coral) 78%, #fff); }

/* ════ ASKING FOR NOTIFICATIONS ════ */

.push-ask {
  display: grid;
  gap: 12px;
  margin: 6px 0 14px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-2);
  animation: rise .4s var(--ease) both;
}
.push-ask-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 13px;                  /* 16 outer padding − 3 */
  background: var(--grad-you);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.push-ask-mark svg { width: 22px; height: 22px; }
.push-ask-text b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.push-ask-text small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.push-ask-row { display: flex; gap: 8px; }
.push-ask-row .btn { flex: 1; }

/* ════ SWITCH ════ */

.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: var(--sunk);
  cursor: pointer;
  user-select: none;
}
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }

.switch-label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.switch-track {
  position: relative;
  width: 50px; height: 30px;
  flex: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 17%, transparent);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.16);
  transition: background .2s var(--ease);
}
.switch-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .2s var(--ease);
}
.switch-row input:checked ~ .switch-track {
  background: var(--grad-you);
  box-shadow: inset 0 0 10px rgba(255,255,255,.26), inset 0 1px 2px rgba(0,0,0,.10);
}
.switch-row input:checked ~ .switch-track .switch-knob { transform: translateX(20px); }
.switch-row input:focus-visible ~ .switch-track { outline: 3px solid var(--cyan); outline-offset: 2px; }
.switch-row:active .switch-knob { width: 27px; }

/* ════ DELIVERED & SEEN ════ */

.bubble-foot { display: flex; align-items: center; gap: 6px; }

.tick-mark {
  display: inline-grid;
  place-items: center;
  height: 11px;
  flex: none;
  color: var(--ink-soft);
  animation: tickIn .22s var(--ease) both;
}
/* width follows the mark: one tick is narrower than two */
.tick-mark svg { height: 100%; width: auto; overflow: visible; }
.tick-mark.is-seen { color: var(--cyan); }

@keyframes tickIn {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ════ VOICE ════ */

/* the mic, live, on their side while you hold it */
.typing-voice {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--coral);
}
.typing-voice svg { width: 15px; height: 15px; flex: none; }
.typing-voice b {
  display: block;
  width: 2.5px;
  border-radius: 2px;
  background: currentColor;
  animation: micBar .9s infinite var(--ease);
}
.typing-voice b:nth-child(2) { height: 8px;  animation-delay: 0s; }
.typing-voice b:nth-child(3) { height: 14px; animation-delay: .12s; }
.typing-voice b:nth-child(4) { height: 10px; animation-delay: .24s; }
.typing-voice b:nth-child(5) { height: 6px;  animation-delay: .36s; }

@keyframes micBar {
  0%, 100% { transform: scaleY(.4); opacity: .55; }
  50%      { transform: scaleY(1);  opacity: 1; }
}

.typing-word {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  align-self: center;
}
.typing-word:empty { display: none; }

.recorder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-2);
  animation: rise .26s var(--ease) both;
}

.rec-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
  animation: recPulse 1.4s infinite var(--ease);
}
@keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

.rec-time {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 40px;
}

/* a live level meter, driven from the microphone */
.rec-wave {
  flex: 1;
  height: 22px;
  border-radius: 999px;
  background: var(--sunk);
  overflow: hidden;
  position: relative;
}
.rec-wave::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--level, 6%);
  border-radius: 999px;
  background: var(--grad-them);
  transition: width .09s linear;
}

.rec-stop, .rec-send {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  flex: none;
  transition: transform .16s var(--ease);
}
.rec-stop:active, .rec-send:active { transform: scale(.92); }
.rec-stop { background: var(--sunk); color: var(--ink-mid); box-shadow: inset 0 0 0 1.5px var(--line); }
.rec-send {
  background: var(--grad-you);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 0 12px rgba(255,255,255,.22),
    0 0 0 1px rgba(0,0,0,.07);
}

/* a voice note sitting in the feed */
.bubble-voice {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px 10px 10px;
  min-width: 190px;
}

.voice-play {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--grad-them);
  color: #fff;
  cursor: pointer;
  flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 1px 2px rgba(0,0,0,.16);
  transition: transform .16s var(--ease);
}
.is-mine .voice-play { background: var(--grad-you); }
.voice-play:active { transform: scale(.92); }
.voice-play svg { width: 17px; height: 17px; margin-left: 1px; }   /* optical centring */
.voice-play.is-playing svg { margin-left: 0; }

.voice-body { display: grid; gap: 5px; flex: 1; min-width: 0; }

.voice-track {
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
.voice-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--coral);
  transition: width .1s linear;
}
.is-mine .voice-fill { background: var(--cyan); }

.voice-time {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* ════ TYPING ════ */

.typing {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px 10px;
  animation: rise .3s var(--ease) both;
}

.typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 11px 14px;
  border-radius: var(--r-lg);
  border-bottom-left-radius: var(--r-sm);
  background: var(--tint-them);
  box-shadow: var(--sh-1);
}
.typing-bubble i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  opacity: .4;
  animation: typingDot 1.3s infinite var(--ease);
}
.typing-bubble i:nth-child(2) { animation-delay: .18s; }
.typing-bubble i:nth-child(3) { animation-delay: .36s; }

@keyframes typingDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.feed-empty { text-align: center; padding: 40px 20px; }
.empty-mark {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--sh-1);
  color: var(--ink-soft);
}
.empty-mark svg { width: 27px; height: 27px; }
.empty-title { margin: 0 0 4px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.empty-note  { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

/* Lifted clear of the home indicator, and of the very bottom edge, which is
   an awkward place to aim a thumb. */
.composer {
  flex: none;
  padding: 9px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
}
/* the list screen has no tab bar under it, so it needs the room itself */
.screen-list .composer {
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

.compose-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;   /* pen · field · mic · send */
  align-items: end;
  gap: 8px;
}
/* four controls on one line means each needs to be a touch smaller */
.compose-main .compose-extra,
.compose-main .compose-send { width: 44px; height: 44px; }
.compose-main .compose-extra svg { width: 19px; height: 19px; }
.compose-main .compose-send svg { width: 20px; height: 20px; }

/* on this day */
.on-this-day {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 14px;
  margin: 4px 0 12px;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s var(--ease);
  animation: rise .4s var(--ease) both;
}
.on-this-day:active { transform: scale(.98); }
.on-this-day:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.otd-mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--grad-them);
  color: #fff;
  box-shadow: var(--sh-them);
  flex: none;
}
.otd-mark svg { width: 21px; height: 21px; }
.otd-text { display: grid; gap: 1px; margin-right: auto; min-width: 0; }
.otd-text strong { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.otd-text small { font-size: 13px; color: var(--ink-soft); }
.on-this-day .link-go { width: 19px; height: 19px; color: var(--ink-soft); flex: none; }

.compose-field {
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 10px 15px;
  box-shadow: var(--sh-1);
  transition-property: border-color, box-shadow;
  transition-duration: .16s;
  transition-timing-function: var(--ease);
}
.compose-field:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0,169,230,.15); }

.compose-field textarea {
  display: block;
  width: 100%;
  max-height: 132px;
  border: 0;
  padding: 0;
  background: transparent;
  resize: none;
  font: inherit;
  font-size: 16.5px;
  line-height: 1.42;
  color: var(--ink);
  overflow-y: auto;
}
.compose-field textarea:focus { outline: none; }
.compose-field textarea::placeholder { color: var(--ink-soft); }

.compose-extra {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--sh-1);
  color: var(--ink-mid);
  cursor: pointer;
  flex: none;
  transition-property: transform, color, background-color;
  transition-duration: .16s;
  transition-timing-function: var(--ease);
}
.compose-extra svg { width: 21px; height: 21px; }
.compose-extra:active { transform: scale(.92); }
.compose-extra:hover { color: var(--cyan); }
.compose-extra:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.compose-send {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--grad-you);
  color: #fff;
  box-shadow: var(--sh-you);
  cursor: pointer;
  flex: none;
  transition-property: transform, box-shadow, opacity;
  transition-duration: .18s;
  transition-timing-function: var(--ease);
}
.compose-send svg { width: 22px; height: 22px; }
.compose-send:active { transform: scale(.92); }
.compose-send:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.compose-send:disabled { opacity: .4; transform: none; box-shadow: var(--sh-1); }

/* ════ TABS ════ */

.tabs {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 7px;
  margin: 6px var(--gutter) max(10px, env(safe-area-inset-bottom));
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sh-2);
}

.tabs-pill {
  position: absolute;
  top: 7px; bottom: 7px;
  left: 7px;
  width: calc(50% - 9px);
  border-radius: var(--r-lg);   /* 26 outer - 7 padding */
  background: var(--grad-you);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 12px rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 1px 3px rgba(0,0,0,.20);
  transition: transform .3s var(--ease);
}
.tabs.on-pads .tabs-pill { transform: translateX(calc(100% + 4px)); }

/* three across: each column is a third of the inner width, minus the gaps */
.tabs-three { grid-template-columns: repeat(3, 1fr); }
.tabs-three .tabs-pill { width: calc((100% - 22px) / 3); }
.tabs-three.on-pads .tabs-pill { transform: translateX(calc(100% + 4px)); }
.tabs-three.on-remind .tabs-pill { transform: translateX(calc(200% + 8px)); }
.tabs-three .tab { gap: 6px; font-size: 14px; }

/* Four across, still icon-beside-label like three were — the icon and text
   just give up a little size so the row stays a row. */
.tabs-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tabs-four .tabs-pill { width: calc((100% - 30px) / 4); }
.tabs-four.on-pads   .tabs-pill { transform: translateX(calc(100% + 4px)); }
.tabs-four.on-remind .tabs-pill { transform: translateX(calc(200% + 8px)); }
.tabs-four.on-lists  .tabs-pill { transform: translateX(calc(300% + 12px)); }
.tabs-four .tab {
  gap: 5px;
  font-size: 12px;
  letter-spacing: -.015em;
  padding: 11px 2px;
}
.tabs-four .tab svg { width: 18px; height: 18px; flex: none; }

.tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .22s var(--ease), transform .16s var(--ease);
}
.tab svg { width: 18px; height: 18px; }
.tab:active { transform: scale(.96); }
.tab:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.tab.is-on { color: #fff; }

/* Four controls now live here, so they tighten up rather than eat the names. */
.bar-tools { display: flex; gap: 0; flex: none; }
.bar-tools .pad-btn { width: 38px; height: 38px; }
.bar-tools .pad-btn svg { width: 20px; height: 20px; }

/* Their clock, only when you're actually in different zones. */
.clock {
  display: grid;
  justify-items: center;
  gap: 0;
  flex: none;
  min-width: 52px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.clock b {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--coral);
}
.clock span {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the writer's own clock, on their bubbles, when the zones differ */
.bubble-there { color: var(--ink-soft); opacity: .8; }

/* ════ HANDWRITING & REACTIONS ════ */

.bubble-ink { padding: 6px; background: var(--surface); }
.bubble-ink canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);   /* 20 outer - 6 padding */
  background: #fff;
}

.reactions {
  display: flex;
  gap: 4px;
  padding: 0 4px;
  margin-top: -2px;
}

/* On iPhone these come out as Apple's own emoji; on a laptop the system set. */
.emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal;
  line-height: 1;
}

.reaction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--sh-1);
  cursor: default;
  font-size: 14px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1;
}
.reaction.is-mine { box-shadow: 0 0 0 1.5px var(--cyan), var(--sh-1); }

/* the little bar that opens when you tap a bubble */
.react-bar {
  display: flex;
  gap: 5px;
  padding: 5px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--sh-2);
  animation: rise .22s var(--ease) both;
}

.react-pick {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 21px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s var(--ease), background-color .16s var(--ease);
}
.react-pick:hover { background: var(--sunk); transform: scale(1.12); }
.react-pick:active { transform: scale(.9); }
.react-pick:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ════ INK SHEET ════ */

.sheet-ink { align-items: center; }

.ink-card {
  width: 100%;
  max-width: 480px;
  padding: 10px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2);
  animation: rise .3s var(--ease) both;
}

.ink-top {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding-bottom: 6px;
}
.ink-title { text-align: center; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }

.ink-stage {
  position: relative;
  border-radius: var(--r-md);   /* 26 outer - 10 padding */
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  overflow: hidden;
  aspect-ratio: 1000 / 620;
}
#inkCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%; height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.ink-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}
.ink-tools .pad-colors { flex: 1; justify-content: flex-start; gap: 6px; }
.ink-tools .pad-swatch { width: 30px; height: 30px; }

/* ════ THEMES & BACKGROUNDS ════ */

/* Big enough to actually read the pattern, with its name under it. */
/* minmax(0, 1fr), not 1fr: a plain 1fr refuses to shrink below the widest
   name underneath, so the last column was pushed off the edge. */
.theme-grid, .wall-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 4px;
}
.wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }

.look-cell { display: grid; gap: 5px; justify-items: center; min-width: 0; }
.look-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.look-cell[data-on="true"] .look-name { color: var(--cyan); font-weight: 700; }

.theme-chip, .wall-chip {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.wall-chip { aspect-ratio: 4 / 3; }
.theme-chip:active, .wall-chip:active { transform: scale(.92); }
.theme-chip:focus-visible, .wall-chip:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.theme-chip[aria-checked="true"], .wall-chip[aria-checked="true"] {
  box-shadow: 0 0 0 2.5px var(--cyan);
  transform: scale(1.06);
}

/* A little scene rather than a swatch: the page, then the two of you as
   overlapping discs — the same shape as the paired avatars in the app bar. */
.theme-chip i { position: absolute; }
.theme-chip i.page { inset: 0; }

.theme-chip i.you,
.theme-chip i.them {
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.35);
}
.theme-chip i.you  { left: 12%; z-index: 1; }
.theme-chip i.them { right: 12%; }

/* the ring lifts and warms when it's the one you're using */
.theme-chip[aria-checked="true"] i.you { box-shadow: 0 3px 10px -2px rgba(0,0,0,.45); }

.theme-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.28), transparent 46%);
  pointer-events: none;
}

/* Each tile paints the same thing the real background does, shrunk down —
   so what you tap is what you get. */
.wall-chip .swatch { position: absolute; inset: 0; background-color: var(--field); background-size: cover; background-position: center; }

[data-wall-preview="aurora"] {
  background-image:
    radial-gradient(70px 50px at 96% -8%, var(--glow-them), transparent 62%),
    radial-gradient(64px 46px at -8% 2%, var(--glow-you), transparent 60%);
}
[data-wall-preview="sunset"] {
  background-image:
    radial-gradient(90px 52px at 50% 108%, var(--glow-them), transparent 66%),
    radial-gradient(70px 42px at 12% -6%, var(--glow-you), transparent 60%);
}
[data-wall-preview="blossom"] {
  background-image:
    radial-gradient(34px 34px at 14% 22%, var(--glow-them), transparent 70%),
    radial-gradient(30px 30px at 84% 34%, var(--glow-you), transparent 70%),
    radial-gradient(38px 38px at 46% 88%, var(--glow-them), transparent 72%);
}
[data-wall-preview="glow"] {
  background-image:
    radial-gradient(circle at 50% 50%, var(--glow-you) 0%, transparent 58%),
    radial-gradient(circle at 12% 86%, var(--glow-them) 0%, transparent 52%);
}
[data-wall-preview="ocean"] {
  background-image:
    linear-gradient(180deg, transparent 0%, var(--glow-you) 100%),
    radial-gradient(80px 40px at 70% 10%, var(--glow-them), transparent 64%);
}
.wall-chip .tick {
  position: absolute;
  right: 3px; bottom: 3px;
  width: 15px; height: 15px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
}
.wall-chip[aria-checked="true"] .tick { display: grid; }
.wall-chip .tick svg { width: 10px; height: 10px; }




[data-wall-preview="grain"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size: 90px 90px;
}
[data-wall-preview="bokeh"] {
  background-image:
    radial-gradient(22px 22px at 18% 14%, var(--glow-you), transparent 68%),
    radial-gradient(13px 13px at 74% 9%, var(--glow-them), transparent 66%),
    radial-gradient(32px 32px at 88% 42%, var(--glow-you), transparent 70%),
    radial-gradient(16px 16px at 34% 56%, var(--glow-them), transparent 66%),
    radial-gradient(27px 27px at 8% 78%, var(--glow-them), transparent 70%),
    radial-gradient(11px 11px at 62% 88%, var(--glow-you), transparent 64%);
}
[data-wall-preview="ribbon"] {
  background-image:
    linear-gradient(72deg, transparent 12%, var(--glow-you) 26%, transparent 40%),
    linear-gradient(72deg, transparent 44%, var(--glow-them) 58%, transparent 72%),
    linear-gradient(72deg, transparent 76%, var(--glow-you) 90%, transparent 100%);
}
[data-wall-preview="split"] {
  background-image: linear-gradient(114deg, var(--glow-you) 0 48%, var(--glow-them) 48% 100%);
}
[data-wall-preview="vignette"] {
  background-image: radial-gradient(120% 92% at 50% 44%, transparent 40%, var(--glow-them) 100%);
}
[data-wall-preview="marble"] {
  background-image:
    conic-gradient(from 210deg at 32% 28%, var(--glow-you), transparent 30%, var(--glow-them) 58%, transparent 82%, var(--glow-you)),
    radial-gradient(80px 80px at 78% 76%, var(--glow-them), transparent 62%);
}

/* ════ WALLPAPER EDITOR ════ */

.wall-card { max-width: 440px; }

.wall-preview {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.wall-preview-veil { position: absolute; inset: 0; background: var(--field); }

.wall-preview-chat {
  position: absolute;
  inset: auto 12px 12px 12px;
  display: grid;
  gap: 7px;
  justify-items: start;
}
.wall-bubble {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--sh-1);
}
.wall-bubble-them { background: var(--tint-them); color: var(--ink); }
.wall-bubble-you { background: var(--tint-you); color: var(--ink); justify-self: end; }

.wall-sliders { display: grid; gap: 12px; padding: 14px 2px 4px; }
.wall-sliders .slider { display: grid; gap: 5px; }
.wall-sliders .slider span {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-mid);
}
.wall-sliders .slider b {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.wall-sliders input[type="range"] { width: 100%; accent-color: var(--cyan); height: 24px; }
.wall-sliders input[type="range"]:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ════ SEARCH ════ */

.search-top {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 4px 10px;
}
.search-icon {
  position: absolute;
  left: 16px;
  color: var(--ink-soft);
  display: grid; place-items: center;
  pointer-events: none;
}
.search-icon svg { width: 19px; height: 19px; }

.search-top input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px 0 44px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunk);
  font: inherit;
  font-size: 16.5px;
  color: var(--ink);
  -webkit-appearance: none;
}
.search-top input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0,169,230,.15);
}

.search-hint { padding: 20px 14px; }

.hit { display: grid; gap: 3px; padding: 11px 14px; text-align: left; }
.hit-body { font-size: 15px; line-height: 1.4; }
.hit-body mark { background: rgba(255,198,26,.5); color: inherit; border-radius: 3px; padding: 0 2px; }
.hit-when {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ════ REMINDERS ════ */

/* Separate day and time rather than one datetime field: the combined control
   has no obvious confirm on some browsers, and people get stuck in it. */
.when-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 11px; }
.when-row .field { margin-bottom: 16px; }

.pane-remind input[type="date"],
.pane-remind input[type="time"],
.pane-remind input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunk);
  font: inherit;
  font-size: 16.5px;
  color: var(--ink);
  -webkit-appearance: none;
}
.pane-remind input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0,169,230,.15);
}

.zone-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

.zone-opt {
  min-height: 46px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
  transition: transform .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.zone-opt:active { transform: scale(.96); }
.zone-opt.is-on { background: var(--grad-you); color: #fff; box-shadow: var(--sh-you); }

/* one tap for the times you actually use */
.quick-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }

.quick {
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
  transition: transform .16s var(--ease), background-color .16s var(--ease);
}
.quick:active { transform: scale(.95); }
.quick:hover { background: var(--sunk); }
.quick.is-on { background: var(--grad-you); color: #fff; box-shadow: var(--sh-you); }

.remind-buttons { display: flex; gap: 9px; align-items: center; }
.remind-buttons .btn-block { flex: 1; }

.remind-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2);
  margin-bottom: 10px;
}
.remind-card.is-sent { opacity: .62; }

.remind-when-big {
  display: grid;
  place-items: center;
  min-width: 58px;
  padding: 7px 9px;
  border-radius: var(--r-md);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1.5px var(--line);
  flex: none;
}
.remind-when-big b {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.remind-when-big span {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.remind-acts { display: flex; gap: 2px; flex: none; }
.remind-act {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color .16s var(--ease), transform .16s var(--ease), color .16s var(--ease);
}
.remind-act svg { width: 17px; height: 17px; }
.remind-act:active { transform: scale(.92); }
.remind-act:hover { background: var(--sunk); color: var(--ink); }
.remind-act.is-arming { background: rgba(244,81,91,.12); color: var(--coral); }

.remind-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.remind-text { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.remind-body { font-size: 15px; font-weight: 500; }
.remind-when {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.remind-sent { color: var(--mint); }

/* ════ PADS GRID ════ */

.pads-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 460px) { .pads-grid { grid-template-columns: repeat(3, 1fr); } }

.pad-card {
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2);
  overflow: hidden;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition-property: transform, box-shadow;
  transition-duration: .18s;
  transition-timing-function: var(--ease);
}
.pad-card:active { transform: scale(.96); }
.pad-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.pad-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 1350;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.pad-card-foot { padding: 11px 13px 13px; display: grid; gap: 2px; }
.pad-card-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pad-card-when {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.new-pad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--grad-you);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 0 16px rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(0,0,0,.07),
    0 3px 10px -6px rgba(0,0,0,.32);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s var(--ease);
}
.new-pad svg { width: 21px; height: 21px; }
.new-pad:active { transform: scale(.97); }
.new-pad:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ════ A PAD, OPEN ════ */

.screen-pad {
  display: flex;
  flex-direction: column;
  height: var(--app-h, 100dvh);
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding-top: max(8px, env(safe-area-inset-top));
}

.pad-bar {
  flex: none;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 10px;
}

.pad-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-mid);
  cursor: pointer;
  transition: background-color .16s var(--ease), transform .16s var(--ease);
}
.pad-btn svg { width: 22px; height: 22px; }
.pad-btn:active { transform: scale(.94); }
.pad-btn:hover { background: rgba(11,31,42,.05); }
.pad-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* These two must sit after .pad-btn: same specificity, so whichever is
   written last wins, and a modifier that loses the cascade does nothing. */
.pad-btn-think { color: var(--coral); }
.pad-btn-think svg { width: 21px; height: 21px; }
.pad-btn-warn { color: var(--coral); }

.pad-name {
  min-height: 40px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color .16s var(--ease);
}
.pad-name:hover { background: rgba(11,31,42,.05); }
.pad-name:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.pad-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 12px;
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--sh-2);
  overflow: hidden;
}

/* Sized and positioned in JS so the canvas is exactly the 1000×1350 page —
   no letterboxing to map taps through. */
#padCanvas {
  position: absolute;
  display: block;
  touch-action: none;   /* the finger draws; it does not scroll the page */
  cursor: crosshair;
}

.pad-live {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--sh-1);
  color: var(--coral);
  font-size: 13px;
  font-weight: 600;
  animation: rise .3s var(--ease) both;
}

/* replay */
.replay-bar {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: var(--sh-2);
  animation: rise .28s var(--ease) both;
}

.replay-stop {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--grad-you);
  color: #fff;
  cursor: pointer;
  flex: none;
}
.replay-stop svg { width: 15px; height: 15px; }

.replay-track { flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.replay-fill { display: block; height: 100%; width: 0; background: var(--grad-you); transition: width .12s linear; }

.replay-count {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ink-soft);
  min-width: 26px;
  text-align: right;
}

.pad-tools {
  flex: none;
  display: grid;
  gap: 12px;
  padding: 14px 12px max(14px, env(safe-area-inset-bottom));
}

.pad-stamps { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.pad-stamp {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.pad-stamp svg { width: 22px; height: 22px; }
.pad-stamp:active { transform: scale(.92); }
.pad-stamp:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.pad-stamp[aria-checked="true"] { box-shadow: 0 0 0 2px var(--cyan), var(--sh-1); }

/* paper picker, inside the options sheet */
.paper-pick { padding: 4px 14px 10px; }
.paper-pick-head {
  margin: 4px 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.paper-row { display: flex; gap: 9px; }

.paper-chip {
  flex: 1;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1.5px var(--line);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow .16s var(--ease), transform .16s var(--ease);
}
.paper-chip:active { transform: scale(.96); }
.paper-chip:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.paper-chip[aria-checked="true"] { box-shadow: 0 0 0 2px var(--cyan); }
.paper-chip canvas { display: block; width: 100%; height: 46px; }
.paper-chip span { display: block; padding: 5px 0 7px; font-size: 11.5px; font-weight: 600; color: var(--ink-mid); }

/* milestones */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.stat {
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.stat-num {
  display: block;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-you);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }

.pad-colors { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

.pad-swatch {
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--field);
  transition-property: transform, box-shadow;
  transition-duration: .16s;
  transition-timing-function: var(--ease);
}
.pad-swatch:active { transform: scale(.9); }
.pad-swatch:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.pad-swatch[aria-checked="true"] {
  transform: scale(1.14);
  box-shadow: 0 0 0 3px var(--field), 0 0 0 5px currentColor;
}

.pad-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pad-sizes { display: flex; gap: 7px; }

.pad-size {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.pad-size:active { transform: scale(.94); }
.pad-size:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.pad-size i { display: block; border-radius: 50%; background: var(--ink); }
.pad-size[aria-checked="true"] { box-shadow: 0 0 0 2px var(--cyan), var(--sh-1); }

.pad-actions { display: flex; gap: 7px; }

.pad-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  color: var(--ink-mid);
  cursor: pointer;
  transition-property: transform, color, box-shadow, background-color;
  transition-duration: .16s;
  transition-timing-function: var(--ease);
}
.pad-icon svg { width: 20px; height: 20px; }
.pad-icon:active { transform: scale(.94); }
.pad-icon:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.pad-icon:disabled { opacity: .4; }
.pad-icon[aria-pressed="true"] { background: var(--grad-you); color: #fff; box-shadow: var(--sh-you); }

/* ════ PLACING TEXT ════ */

.text-drop {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(11,31,42,.34);
  animation: fade .2s var(--ease) both;
}

.text-drop-card {
  width: 100%;
  max-width: 380px;
  padding: 20px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2);
  animation: rise .3s var(--ease) both;
}
.text-drop-head { margin: 0 0 12px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }

.text-drop-card input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunk);
  font: inherit;
  font-size: 16.5px;
  color: var(--ink);
}
.text-drop-card input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0,169,230,.15);
}

.text-drop-foot { display: flex; gap: 9px; justify-content: flex-end; margin-top: 14px; }

/* ════ OPTIONS SHEET ════ */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(11,31,42,.34);
  animation: fade .2s var(--ease) both;
}

.sheet-card {
  width: 100%;
  max-width: 420px;
  padding: 8px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-2);
  animation: rise .3s var(--ease) both;
}

.sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-lg);   /* 26 outer - 8 padding + optical */
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background-color .16s var(--ease), transform .16s var(--ease);
}
.sheet-row svg { width: 20px; height: 20px; flex: none; color: var(--ink-soft); }
.sheet-row:active { transform: scale(.98); }
.sheet-row:hover { background: var(--sunk); }
.sheet-row:focus-visible { outline: 3px solid var(--cyan); outline-offset: -2px; }
.sheet-row-bad { color: var(--coral); }
.sheet-row-bad svg { color: var(--coral); }
.sheet-row-bad.is-arming { background: rgba(244,81,91,.10); }
.sheet-row-quiet { justify-content: center; color: var(--ink-soft); font-weight: 600; }

.sheet-card-tall { display: flex; flex-direction: column; max-height: 74dvh; }
.sheet-top {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 2px 6px 6px;
}
.sheet-top .day-focus-back { position: absolute; left: 4px; }

.sheet-head {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* days with nothing on them stay tappable but recede */
.day-row-empty .day-row-name { color: var(--ink-soft); font-weight: 500; }
.day-row-weekday {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  width: 34px;
  flex: none;
}
.day-row-today {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}

.days-list { overflow-y: auto; min-height: 0; margin-bottom: 4px; }

.day-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background-color .16s var(--ease), transform .16s var(--ease);
}
.day-row:hover { background: var(--sunk); }
.day-row:active { transform: scale(.98); }
.day-row:focus-visible { outline: 3px solid var(--cyan); outline-offset: -2px; }

.day-row-name { font-size: 15.5px; font-weight: 600; margin-right: auto; }
.day-row-count {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.day-row-both {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad-you);
  flex: none;
}

/* the banner shown while one day is open on its own */
.day-focus {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sh-1);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-mid);
}

.day-focus-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--sunk);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
}
.day-focus-back svg { width: 16px; height: 16px; }
.day-focus-back:active { transform: scale(.96); }

/* ════ NOTICES ════ */

.notice {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(0,169,230,.08);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-wrap: pretty;
}
.notice-bad { background: rgba(244,81,91,.10); color: var(--coral); margin-top: 14px; }

.waiting {
  display: flex; align-items: center; justify-content: center;
  gap: 9px; color: var(--ink-soft); font-size: 14.5px;
}

.dots { display: inline-flex; gap: 4px; }
.dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: blink 1.4s infinite var(--ease);
}
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
  transition: transform .16s var(--ease);
}
.link-row svg { width: 19px; height: 19px; flex: none; }
.link-row span { margin-right: auto; }
.link-row .link-go { color: var(--ink-soft); }
.link-row:active { transform: scale(.97); }
.link-row:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: 0 14px 34px -12px rgba(11,31,42,.7);
  animation: rise .3s var(--ease) both;
  z-index: 60;
}

/* ════ ENTERS ════ */

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.pane > *, .stack > *, .setup-head { animation: rise .44s var(--ease) both; }
.setup-head { animation-delay: .02s; }
.stack > *:nth-child(1) { animation-delay: .08s; }
.stack > *:nth-child(2) { animation-delay: .16s; }
.stack > *:nth-child(3) { animation-delay: .22s; }
.pane > *:nth-child(1) { animation-delay: .04s; }
.pane > *:nth-child(2) { animation-delay: .12s; }
.pane > *:nth-child(3) { animation-delay: .20s; }

.pad-card { animation: rise .4s var(--ease) both; }
.pad-card:nth-child(1) { animation-delay: .02s; }
.pad-card:nth-child(2) { animation-delay: .07s; }
.pad-card:nth-child(3) { animation-delay: .12s; }
.pad-card:nth-child(4) { animation-delay: .17s; }
.pad-card:nth-child(n+5) { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
}