/* Comfort Curators "Night", from comfortcurators/host DESIGN.md: a true black
   canvas, iOS systemGray surfaces, Apple off-white ink and platinum as the
   only accent. "Day" is its warm Cream sibling, where antique gold may mark
   the caps label. Night is the default; Account → Appearance can pick Day or
   follow the phone (data-theme on <html>). Change tokens, not rules. */
:root {
  --font-display: "Fraunces", Georgia, serif;
  --font-editorial: "Newsreader", Georgia, serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --canvas: #000000;
  --surface: #1c1c1e;
  --surface-high: #2c2c2e;
  --surface-higher: #3a3a3c;
  --thumb: #545458;
  --field: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --hairline: rgba(255, 255, 255, 0.07);
  --ink: #f5f5f7;
  --ink-soft: rgba(245, 245, 247, 0.74);
  --muted: rgba(245, 245, 247, 0.56);
  --ink-mute: rgba(245, 245, 247, 0.38);
  --pewter-hi: #c8c6bd;
  --platinum: #e8e8ed;
  --platinum-soft: #f5f5f7;
  --platinum-hover: #d1d1d6;
  --caps: #a1a1a6;
  --data-1: #c7c7cc;
  --on-accent: #000000;
  --danger: #ff6961;
  --ok: #30d158;
  --warn: #ffd60a;

  /* Material: a lit top lip, a sheen fading down the face, a fine grain in
     the surface, an edge that catches light at 135°, and a deep float. */
  --dot: rgba(255, 255, 255, 0.04);
  --toplight: rgba(255, 255, 255, 0.07);
  --canvas-grain: none;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%);
  --rim-top: rgba(255, 255, 255, 0.08);
  --edge: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 32%, rgba(255, 255, 255, 0.02) 58%, rgba(255, 255, 255, 0.11) 100%);
  --float: 0 1px 1px rgba(0, 0, 0, 0.5), 0 22px 44px -18px rgba(0, 0, 0, 0.9);
  --btn-face: linear-gradient(180deg, #ffffff 0%, #e1e1e6 100%);
  --btn-face-hover: linear-gradient(180deg, #f6f6f8 0%, #d4d4da 100%);
  --btn-rim: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 26px -12px rgba(255, 255, 255, 0.22);
  --btn2-face: linear-gradient(180deg, #353538 0%, #29292c 100%);
  --btn2-face-hover: linear-gradient(180deg, #3d3d40 0%, #303033 100%);
  --btn2-rim: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  --tile-face: linear-gradient(180deg, #3a3a3d 0%, #2a2a2d 100%);
  --band-face: linear-gradient(180deg, #fcfcfd 0%, #d9d9de 100%);
  --band-rim: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  --field-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  --glass-tint: rgba(36, 36, 39, 0.56);
  --glass-rim: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.55);
  --glass-active: rgba(255, 255, 255, 0.11);
  --scrim: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.66) 22%, rgba(0, 0, 0, 0.24) 48%, rgba(0, 0, 0, 0) 72%);
  --photo-rim: rgba(255, 255, 255, 0.08);

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-photo: 0 14px 36px rgba(0, 0, 0, 0.55);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --selection: rgba(255, 255, 255, 0.18);
  --lift: rgba(255, 255, 255, 0.18);
  --nav-glass: rgba(0, 0, 0, 0.66);
  --tabbar: rgba(22, 22, 24, 0.8);
  --composer: color-mix(in srgb, var(--surface) 86%, transparent);
  --focus-ring: color-mix(in srgb, var(--platinum) 40%, transparent);
  color-scheme: dark;
}

/* Day, chosen or following a light phone. Same tokens, one list, twice. */
:root[data-theme="light"] {
    --canvas: #f6f4ef; --surface: #ffffff; --surface-high: #efebe3; --surface-higher: #e4dfd5; --thumb: #ffffff;
    --field: rgba(36, 30, 23, 0.035); --border: rgba(36, 30, 23, 0.1); --hairline: rgba(36, 30, 23, 0.08);
    --ink: #1f1a14; --ink-soft: rgba(31, 26, 20, 0.76); --muted: rgba(31, 26, 20, 0.58); --ink-mute: rgba(31, 26, 20, 0.42);
    --pewter-hi: #6e6b62; --platinum: #1f1a14; --platinum-soft: #3b342b; --platinum-hover: #3b342b;
    --caps: #8a6a36; --data-1: #6e6253; --on-accent: #f6f4ef;
    --danger: #c0392b; --ok: #2f7d3b; --warn: #8a6100;
    --dot: rgba(36, 30, 23, 0.055); --toplight: rgba(255, 255, 255, 0.75);
    --canvas-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.11 0 0 0 0 0.08 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.11 0 0 0 0 0.08 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
    --rim-top: rgba(255, 255, 255, 1);
    --edge: linear-gradient(160deg, rgba(36, 30, 23, 0.07) 0%, rgba(36, 30, 23, 0.11) 100%);
    --float: 0 1px 2px rgba(36, 30, 23, 0.06), 0 16px 34px -16px rgba(36, 30, 23, 0.22);
    --btn-face: linear-gradient(180deg, #3b332a 0%, #1f1a14 100%);
    --btn-face-hover: linear-gradient(180deg, #463d32 0%, #2a241c 100%);
    --btn-rim: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    --btn-shadow: 0 1px 2px rgba(31, 26, 20, 0.25), 0 12px 24px -12px rgba(31, 26, 20, 0.6);
    --btn2-face: linear-gradient(180deg, #ffffff 0%, #f3efe8 100%);
    --btn2-face-hover: linear-gradient(180deg, #ffffff 0%, #ebe6dc 100%);
    --btn2-rim: inset 0 0 0 1px rgba(36, 30, 23, 0.1), inset 0 -1px 0 rgba(36, 30, 23, 0.06);
    --tile-face: linear-gradient(180deg, #ffffff 0%, #f0ebe2 100%);
    --band-face: linear-gradient(180deg, #3b332a 0%, #1f1a14 100%);
    --band-rim: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --field-shadow: inset 0 1px 2px rgba(36, 30, 23, 0.07);
    --glass-tint: rgba(255, 255, 255, 0.7); --glass-rim: rgba(255, 255, 255, 0.95);
    --glass-shadow: 0 20px 40px -14px rgba(36, 30, 23, 0.32), 0 2px 6px rgba(36, 30, 23, 0.08);
    --glass-active: rgba(36, 30, 23, 0.07);
    --scrim: linear-gradient(to top, rgba(20, 16, 12, 0.8) 0%, rgba(20, 16, 12, 0.46) 26%, rgba(20, 16, 12, 0.12) 52%, rgba(20, 16, 12, 0) 72%);
    --photo-rim: rgba(36, 30, 23, 0.08);
    --shadow-soft: 0 1px 2px rgba(36, 30, 23, 0.05), 0 10px 28px rgba(36, 30, 23, 0.07);
    --shadow-photo: 0 14px 32px rgba(36, 30, 23, 0.2);
    --selection: rgba(36, 30, 23, 0.12); --lift: rgba(36, 30, 23, 0.18);
    --nav-glass: rgba(246, 244, 239, 0.78); --tabbar: rgba(255, 255, 255, 0.86);
    --composer: color-mix(in srgb, var(--surface) 90%, transparent);
    --focus-ring: color-mix(in srgb, var(--platinum) 22%, transparent);
    color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
      --canvas: #f6f4ef; --surface: #ffffff; --surface-high: #efebe3; --surface-higher: #e4dfd5; --thumb: #ffffff;
      --field: rgba(36, 30, 23, 0.035); --border: rgba(36, 30, 23, 0.1); --hairline: rgba(36, 30, 23, 0.08);
      --ink: #1f1a14; --ink-soft: rgba(31, 26, 20, 0.76); --muted: rgba(31, 26, 20, 0.58); --ink-mute: rgba(31, 26, 20, 0.42);
      --pewter-hi: #6e6b62; --platinum: #1f1a14; --platinum-soft: #3b342b; --platinum-hover: #3b342b;
      --caps: #8a6a36; --data-1: #6e6253; --on-accent: #f6f4ef;
      --danger: #c0392b; --ok: #2f7d3b; --warn: #8a6100;
      --dot: rgba(36, 30, 23, 0.055); --toplight: rgba(255, 255, 255, 0.75);
      --canvas-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.11 0 0 0 0 0.08 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
      --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.11 0 0 0 0 0.08 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
      --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
      --rim-top: rgba(255, 255, 255, 1);
      --edge: linear-gradient(160deg, rgba(36, 30, 23, 0.07) 0%, rgba(36, 30, 23, 0.11) 100%);
      --float: 0 1px 2px rgba(36, 30, 23, 0.06), 0 16px 34px -16px rgba(36, 30, 23, 0.22);
      --btn-face: linear-gradient(180deg, #3b332a 0%, #1f1a14 100%);
      --btn-face-hover: linear-gradient(180deg, #463d32 0%, #2a241c 100%);
      --btn-rim: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
      --btn-shadow: 0 1px 2px rgba(31, 26, 20, 0.25), 0 12px 24px -12px rgba(31, 26, 20, 0.6);
      --btn2-face: linear-gradient(180deg, #ffffff 0%, #f3efe8 100%);
      --btn2-face-hover: linear-gradient(180deg, #ffffff 0%, #ebe6dc 100%);
      --btn2-rim: inset 0 0 0 1px rgba(36, 30, 23, 0.1), inset 0 -1px 0 rgba(36, 30, 23, 0.06);
      --tile-face: linear-gradient(180deg, #ffffff 0%, #f0ebe2 100%);
      --band-face: linear-gradient(180deg, #3b332a 0%, #1f1a14 100%);
      --band-rim: inset 0 1px 0 rgba(255, 255, 255, 0.14);
      --field-shadow: inset 0 1px 2px rgba(36, 30, 23, 0.07);
      --glass-tint: rgba(255, 255, 255, 0.7); --glass-rim: rgba(255, 255, 255, 0.95);
      --glass-shadow: 0 20px 40px -14px rgba(36, 30, 23, 0.32), 0 2px 6px rgba(36, 30, 23, 0.08);
      --glass-active: rgba(36, 30, 23, 0.07);
      --scrim: linear-gradient(to top, rgba(20, 16, 12, 0.8) 0%, rgba(20, 16, 12, 0.46) 26%, rgba(20, 16, 12, 0.12) 52%, rgba(20, 16, 12, 0) 72%);
      --photo-rim: rgba(36, 30, 23, 0.08);
      --shadow-soft: 0 1px 2px rgba(36, 30, 23, 0.05), 0 10px 28px rgba(36, 30, 23, 0.07);
      --shadow-photo: 0 14px 32px rgba(36, 30, 23, 0.2);
      --selection: rgba(36, 30, 23, 0.12); --lift: rgba(36, 30, 23, 0.18);
      --nav-glass: rgba(246, 244, 239, 0.78); --tabbar: rgba(255, 255, 255, 0.86);
      --composer: color-mix(in srgb, var(--surface) 90%, transparent);
      --focus-ring: color-mix(in srgb, var(--platinum) 22%, transparent);
      color-scheme: light;
  }
}

/* ── Base ── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html { background: var(--canvas); }
html, body { color: var(--ink); font-family: var(--font-ui); }
/* The canvas: the brand kit's dot grid, a faint light from above, and in Day
   the grain of paper stock. */
body {
  background-color: var(--canvas);
  background-image: radial-gradient(900px 440px at 50% -140px, var(--toplight), transparent 72%), var(--canvas-grain), radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size: auto, 160px 160px, 24px 24px;
  background-repeat: no-repeat, repeat, repeat;
}
body { margin: 0; min-height: 100dvh; font-size: 15px; line-height: 1.5; overscroll-behavior-y: none; display: flex; flex-direction: column; box-sizing: border-box; }
::selection { background: var(--selection); }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--platinum); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
img { max-width: 100%; }
.icon { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; }
.icon svg { width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ── Type: Fraunces for titles and big numbers, Inter for everything else ── */
h1 {
  font-family: var(--font-display); font-weight: 380; font-optical-sizing: auto; font-variation-settings: "SOFT" 50;
  font-size: clamp(2rem, 4.4vw, 2.75rem); line-height: 1.06; letter-spacing: -0.022em;
  margin: 0 0 1.25rem; text-wrap: balance;
}
h2 { font-family: var(--font-display); font-weight: 400; font-variation-settings: "SOFT" 50; letter-spacing: -0.012em; line-height: 1.2; text-wrap: balance; }
p, .hint, .row-sub { text-wrap: pretty; }
/* One flourish per page: the date, in italic serif, above the greeting. */
.dateline { margin: 0 0 0.2rem; font-family: var(--font-editorial); font-style: italic; font-size: 1.05rem; color: var(--ink-soft); }
.greeting { font-size: 1rem; color: var(--ink-soft); margin: -0.6rem 0 1.5rem; line-height: 1.5; }
.hint, .summary { font-size: 0.875rem; color: var(--muted); line-height: 1.45; margin: 0 0 1rem; }
.prose { font-family: var(--font-editorial); font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }
a { color: var(--ink); }

/* The signature eyebrow: letterspaced caps. */
.label-caps, .status-card h2, .draft-kind, .auth-form label, .inbox-property, .property-id, .device-kind {
  font-family: var(--font-ui); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--caps);
}

/* ── Chrome: a slim glass bar on top, tabs under the thumb on phones ── */
.top-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.7rem 1.5rem;
  border-bottom: 1px solid var(--hairline);
}
/* The glass sits on a layer of its own: blur on the bar itself would make it
   the frame for the phone tab bar inside it, pinning that bar to the top. */
.top-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nav-glass);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.01em; white-space: nowrap;
}
.brand img { width: 30px; height: 30px; border-radius: 8px; display: block; box-shadow: 0 0 0 1px var(--photo-rim); }
.top-nav-tabs { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.top-nav-tabs::-webkit-scrollbar { display: none; }
.top-nav-tabs a {
  display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); text-decoration: none;
  font-size: 0.9rem; font-weight: 500; padding: 0.5rem 0.85rem; border-radius: 999px; white-space: nowrap;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.top-nav-tabs a .icon { width: 18px; height: 18px; }
.top-nav-tabs a:hover { color: var(--ink); }
.top-nav-tabs a[aria-current="page"] { color: var(--ink); background: var(--glass-active); box-shadow: inset 0 1px 0 var(--rim-top); }
.top-nav-user { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; white-space: nowrap; }
.top-nav-user a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--tile-face); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 1px var(--border); color: var(--ink) !important;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none;
}

/* ── Layout ── */
main { flex: 1 0 auto; width: 100%; box-sizing: border-box; max-width: 960px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }
.page-head h2 { margin: 0; }
.stack { display: flex; flex-direction: column; align-items: stretch; gap: 0.65rem; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
section[id], form[id] { scroll-margin-top: 5rem; }

/* ── Buttons ── */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--btn-face); color: var(--on-accent); border: none; box-shadow: var(--btn-rim), var(--btn-shadow);
  min-height: 48px; padding: 0 1.4rem; border-radius: 999px;
  font: inherit; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; cursor: pointer;
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
button:hover { background: var(--btn-face-hover); }
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.4; cursor: default; transform: none; }
button .icon, a.button .icon { width: 20px; height: 20px; }
button.secondary, a.button.secondary, .draft-actions button + button { background: var(--btn2-face); color: var(--ink); box-shadow: var(--btn2-rim), 0 1px 2px rgba(0, 0, 0, 0.18); }
button.secondary:hover, a.button.secondary:hover, .draft-actions button + button:hover { background: var(--btn2-face-hover); }
/* Plain controls stay plain. */
.link-button, .tabs button, .day, .segmented button, .link-row, button.list-row, button.suggestion { box-shadow: none; }
.link-button {
  background: none; color: var(--muted); padding: 0; border-radius: 0; min-height: 44px;
  font-size: 0.875rem; font-weight: 500; text-align: left; justify-content: flex-start; text-decoration: none;
}
.link-button:hover { background: none; color: var(--ink); }
.link-button:active { transform: none; }
a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.4rem; border-radius: 999px; box-sizing: border-box;
  background: var(--btn-face); color: var(--on-accent); font-weight: 600; font-size: 0.95rem; text-decoration: none;
  box-shadow: var(--btn-rim), var(--btn-shadow); transition: background 0.2s var(--ease), transform 0.25s var(--ease);
}
a.button:hover { background: var(--btn-face-hover); }
a.button:active { transform: scale(0.97); }
.status { color: var(--muted); font-size: 0.85rem; min-height: 1.2em; }
.error { color: var(--danger); }
.status.ok, .hint.ok, p.ok { color: var(--ok); }
.warn, .hint.warn { color: var(--warn); }
.hint.danger, p.danger { color: var(--danger); font-weight: 600; }

/* ── Fields ── */
form { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1.5rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  background: var(--field); border: 1px solid var(--border); color: var(--ink);
  min-height: 50px; padding: 0.75rem 1rem; border-radius: var(--radius); box-sizing: border-box;
  font: inherit; font-size: 16px; box-shadow: var(--field-shadow);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--ink-mute); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: color-mix(in srgb, var(--ink) 35%, transparent); box-shadow: var(--field-shadow), 0 0 0 3px var(--focus-ring);
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center; background-size: 16px;
}
textarea { width: 100%; min-height: 7rem; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--platinum); }

/* ── Cards ── */
.panel, .status-card, .draft-card, .feed-url, .answer {
  background-color: var(--surface); background-image: var(--sheen), var(--grain); border: 1px solid transparent;
  border-radius: var(--radius-lg); padding: 1.15rem 1.2rem; box-shadow: inset 0 1px 0 var(--rim-top), var(--float);
}
/* The edge: a hairline that catches light at 135°, the way glass does. */
.panel, .status-card, .draft-card, .list-group, .fact-tiles > div, .device-card { position: relative; }
.panel::after, .status-card::after, .draft-card::after, .list-group::after, .fact-tiles > div::after, .device-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.next-step::after, .list-group::after { inset: 0; }
.panel { margin: 0 0 1rem; }
.panel p { margin: 0.25rem 0 0.75rem; color: var(--ink-soft); }
.panel .label-caps { margin-bottom: 0.15rem; }
.status-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.status-card h2 { margin: 0 0 0.75rem; }
.stat { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.big { font-family: var(--font-display); font-size: 1.8rem; color: var(--ink) !important; margin: 0.25rem 0 1rem !important; }

/* Disclosures: no browser triangles anywhere; a chevron that turns. */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details.fold > summary, details.more > summary, details.more-fields > summary {
  display: flex; align-items: center; gap: 0.6rem; min-height: 48px; font-weight: 600; color: var(--ink);
}
details.fold > summary::after, details.more > summary::after, details.more-fields > summary::after {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 0.35rem 0 auto;
  border-right: 1.75px solid var(--muted); border-bottom: 1.75px solid var(--muted);
  transform: rotate(-45deg); transition: transform 0.2s var(--ease);
}
details.fold[open] > summary::after, details.more[open] > summary::after, details.more-fields[open] > summary::after { transform: rotate(45deg); }
details.fold { margin: 0.75rem 0; }
details.more { border-top: 1px solid var(--hairline); }
details.panel.more { padding-top: 0; padding-bottom: 0; }
details.panel.more[open] { padding-bottom: 1rem; }
details.more-fields > summary { color: var(--ink-soft); }
details.more-fields[open] > summary { margin-bottom: 6px; }

/* Grouped lists: iOS inset rows with an icon tile and a chevron. */
.list-group {
  background-color: var(--surface); background-image: var(--sheen), var(--grain); border-radius: var(--radius-lg);
  overflow: hidden; margin: 0 0 1.25rem; padding: 0; list-style: none; box-shadow: inset 0 1px 0 var(--rim-top), var(--float);
}
.list-group > * + * { border-top: 1px solid var(--hairline); }
.list-row {
  display: flex; align-items: center; gap: 0.85rem; width: 100%; box-sizing: border-box;
  padding: 0.7rem 1rem; min-height: 60px; color: var(--ink); text-decoration: none;
  background: none; border-radius: 0; font-weight: 400; font-size: inherit; text-align: left; justify-content: flex-start;
}
.list-row { transition: background 0.2s var(--ease); }
button.list-row:hover, a.list-row:hover, summary.list-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
a.list-row:active, summary.list-row:active, button.list-row:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
button.list-row:active { transform: none; }
.row-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--tile-face); color: var(--ink); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 1px var(--hairline), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.row-icon .icon { width: 18px; height: 18px; }
.row-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.row-title { font-weight: 500; font-size: 0.95rem; }
.row-sub { font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
.row-chevron { width: 18px; height: 18px; color: var(--ink-mute); transition: transform 0.2s var(--ease); }
.list-row.danger, .list-row.danger .row-icon { color: var(--danger); }
details.row-fold[open] > summary .row-chevron { transform: rotate(90deg); }
.row-fold-body { padding: 0.25rem 1rem 1rem; }

/* Older lists, still used by a few panels */
.inbox-list, .draft-list, .property-list, .device-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.inbox-row, .property-row, .device-row { padding: 0.9rem 0; border-bottom: 1px solid var(--hairline); }
.property-row, .device-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; }
.property-name, .device-name { font-weight: 500; }
.property-city, .device-vendor, .device-address { color: var(--muted); font-size: 0.88rem; }
.property-row .link-button { margin-left: auto; }
.inbox-property { margin-top: 0.35rem; }
.chevron { margin-left: auto; color: var(--ink-mute); font-size: 1.3rem; }
.back { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--muted); font-size: 0.875rem; margin-bottom: 1rem; }
a:has(.back) { text-decoration: none; }
ul.plain { list-style: none; padding: 0; margin: 0 0 0.75rem; }
ul.plain li { padding: 0.35rem 0; color: var(--ink-soft); }
.prewrap { white-space: pre-wrap; }
code.copy {
  display: block; word-break: break-all; user-select: all; font-size: 0.82rem;
  background: var(--field); border: 1px solid var(--border); border-radius: 0.7rem;
  padding: 0.65rem 0.85rem; margin: 0.25rem 0 0.75rem; color: var(--ink-soft);
}
.row-actions { display: flex; justify-content: flex-end; margin: 0.6rem 0 0; }

/* Segmented controls */
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.2rem; background: var(--surface-high); border-radius: 12px; padding: 0.2rem; box-shadow: var(--field-shadow); }
.segmented button {
  background: transparent !important; color: var(--ink-soft) !important; min-height: 38px; border-radius: 10px;
  font-weight: 500; font-size: 0.875rem; padding: 0 0.6rem; white-space: nowrap;
}
.segmented button { transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.segmented button.active { background: var(--thumb) !important; color: var(--ink) !important; box-shadow: inset 0 1px 0 var(--rim-top), 0 1px 3px rgba(0, 0, 0, 0.25); font-weight: 600; }

/* ── Sign in ── */
.auth-page { max-width: 400px; margin: 0 auto; padding: 4.5rem 1.25rem 3rem; }
.auth-logo { width: 64px; height: 64px; border-radius: 16px; display: block; margin: 0 0 1.5rem; box-shadow: 0 0 0 1px var(--photo-rim), 0 18px 40px -12px rgba(0, 0, 0, 0.7); }
.auth-page h1 { margin-bottom: 0.6rem; }
.auth-page .greeting { margin: 0 0 1.75rem; }
.auth-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }
.auth-form label { margin-top: 0.6rem; }
.auth-form button { margin-top: 0.75rem; }
.auth-form button.secondary { margin-top: 0; }
.or { display: flex; align-items: center; gap: 0.75rem; color: var(--ink-mute); font-size: 0.78rem; margin: 0.6rem 0 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.auth-links { margin-top: 1.5rem; font-size: 0.9rem; color: var(--ink-mute); display: flex; gap: 1.25rem; flex-wrap: wrap; }
.auth-links a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.auth-links a:hover { color: var(--ink); }

/* ── Home ── */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.home-head .label-caps { display: block; margin-bottom: 0.4rem; }
.home-head h1 { margin: 0; }
.curator-page h2 { font-size: 1.35rem; margin: 2rem 0 0.85rem; }

.next-step { padding: 0; overflow: hidden; }
.next-photo { position: relative; overflow: hidden; aspect-ratio: 2.7 / 1; background: var(--surface-high); }
.next-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 58%, var(--surface) 100%); }
.next-place {
  position: absolute; left: 1.15rem; bottom: 0.9rem; z-index: 1; color: #fff;
  font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.01em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.next-body { display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem 1.2rem 1.2rem; }
.next-step h2 { margin: 0; font-size: 1.4rem; line-height: 1.18; }
.next-step p { margin: -0.35rem 0 0; color: var(--ink-soft); }
.next-step.first input { font-size: 16px; }
.all-set { margin: 0.5rem 0 1rem; }

/* Setup progress: four stops on a line, in a fixed order. */
.track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0 0 0.15rem; }
.track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 500; color: var(--muted); text-align: center; }
.track li + li::before { content: ""; position: absolute; top: 17px; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--surface-high); }
.track li.done::before, .track li.now::before { background: var(--band-face); }
.track .node {
  position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--tile-face); color: var(--muted); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 1px var(--hairline);
}
.track .node .icon { width: 18px; height: 18px; }
.track li.done .node { background: var(--band-face); color: var(--on-accent); box-shadow: var(--band-rim), 0 2px 8px -2px rgba(0, 0, 0, 0.4); }
.track li.now .node { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--platinum); }
.track li.done, .track li.now { color: var(--ink); }

/* Speak first: one big, quiet button. */
.speak { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 1.5rem 0 1.25rem; }
.mic-button {
  position: relative; width: 78px; height: 78px; min-height: 78px; padding: 0; border-radius: 50%;
  background: var(--btn-face); color: var(--on-accent);
  box-shadow: var(--btn-rim), 0 0 0 10px color-mix(in srgb, var(--platinum) 8%, transparent), 0 0 0 22px color-mix(in srgb, var(--platinum) 4%, transparent), 0 18px 40px -12px rgba(0, 0, 0, 0.6);
}
/* A slow breath around the mic: the one moving thing on Home. */
.mic-button::after {
  content: ""; position: absolute; inset: -24px; border-radius: 50%; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--platinum) 22%, transparent);
  animation: breathe 4.2s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { transform: scale(0.92); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 0.1; } }
.mic-button.listening::after { animation: none; opacity: 0; }
.mic-button .icon { width: 32px; height: 32px; }
.mic-button.listening { animation: listen 1.5s var(--ease) infinite; }
@keyframes listen {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--platinum) 30%, transparent), 0 0 0 0 color-mix(in srgb, var(--platinum) 15%, transparent); }
  100% { box-shadow: 0 0 0 18px transparent, 0 0 0 34px transparent; }
}
.speak-label { margin: 0.75rem 0 0; font-size: 1rem; font-weight: 600; color: var(--ink); }
.speak .link-button { justify-content: center; gap: 0.4rem; min-height: 40px; }
.speak .link-button .icon { width: 18px; height: 18px; }

/* Curator chat */
.suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1.25rem; }
button.suggestion {
  width: auto; min-height: 44px; padding: 0.55rem 0.95rem; border-radius: 999px; text-align: left;
  background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); font-weight: 400; font-size: 0.92rem;
}
button.suggestion:hover { background: var(--surface-high); color: var(--ink); }
.thread { display: flex; flex-direction: column; gap: 1rem; margin: 0.5rem 0 1rem; }
.msg { max-width: 100%; line-height: 1.55; overflow-wrap: anywhere; }
.msg.mine {
  align-self: flex-end; max-width: 85%;
  background: var(--surface-high); color: var(--ink);
  padding: 0.7rem 1rem; border-radius: 1.2rem 1.2rem 0.35rem 1.2rem; white-space: pre-wrap;
}
.msg.curator { align-self: stretch; color: var(--ink); }
.msg.working { color: var(--muted); }
.md p { margin: 0 0 0.7rem; }
.md ul, .md ol { margin: 0 0 0.7rem; padding-left: 1.25rem; }
.md li { margin: 0.2rem 0; }
.md h3.md-h { font-size: 1.05rem; margin: 0.9rem 0 0.4rem; }
.md strong { color: var(--ink); font-weight: 600; }
.md a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.md code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; background: var(--surface); padding: 0.05rem 0.3rem; border-radius: 0.35rem; }
.md pre.md-code { background: var(--surface); border: 1px solid var(--border); border-radius: 0.8rem; padding: 0.75rem; overflow-x: auto; font-size: 0.85rem; }
.md blockquote { margin: 0 0 0.7rem; padding: 0.6rem 0.9rem; border-left: 3px solid var(--surface-higher); background: var(--surface); border-radius: 0 0.8rem 0.8rem 0; color: var(--ink-soft); }
.md-table { overflow-x: auto; margin: 0 0 0.8rem; -webkit-overflow-scrolling: touch; }
.md-table table { border-collapse: collapse; font-size: 0.88rem; min-width: 100%; }
.md-table th, .md-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.md-table th { color: var(--muted); font-weight: 500; }
.md a.md-img { display: block; margin: 0.5rem 0; }
.md a.md-img img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
details.steps { margin-top: 0.2rem; font-size: 0.85rem; color: var(--muted); }
details.steps summary { min-height: 32px; display: inline-flex; align-items: center; }
details.steps ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
details.steps li.failed { text-decoration: line-through; opacity: 0.6; }
.sources { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.sources a {
  font-size: 0.78rem; color: var(--ink-soft); text-decoration: none; padding: 0.25rem 0.65rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.working-line { display: flex; align-items: center; gap: 0.4rem; }
ul.live-steps { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.85rem; }
ul.live-steps li { padding: 0.15rem 0 0.15rem 1.2rem; position: relative; }
ul.live-steps li::before { content: "○"; position: absolute; left: 0; }
ul.live-steps li.done::before { content: "✓"; color: var(--ink-soft); }
ul.live-steps li.failed { opacity: 0.55; }
ul.live-steps li.failed::before { content: "×"; }
.live-steps .why, details.steps .why { display: block; font-size: 0.78rem; color: var(--ink-mute); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.thinking { margin-top: 1rem; color: var(--muted); }
.thinking summary { font-size: 0.85rem; }
.thinking pre { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--border); padding: 1rem 1.25rem; border-radius: var(--radius); margin-top: 0.6rem; font-size: 0.82rem; }
.composer {
  position: sticky; bottom: 0.75rem; z-index: 20; display: flex; gap: 0.4rem; align-items: flex-end;
  background: var(--composer);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--border); border-radius: 1.6rem; padding: 0.35rem 0.35rem 0.35rem 1rem; margin-bottom: 2rem;
  box-shadow: var(--shadow-soft); flex-wrap: nowrap;
}
.composer textarea {
  flex: 1; min-height: 44px; max-height: 9rem; resize: none; border: 0; background: transparent; padding: 0.65rem 0;
  field-sizing: content; color: var(--ink); box-shadow: none !important;
}
.composer textarea:focus { outline: none; }
.composer button { width: 44px !important; min-height: 44px; height: 44px; padding: 0; border-radius: 50%; flex: 0 0 auto; }
.composer button .icon { width: 20px; height: 20px; }
.composer .mic { background: var(--surface-high); color: var(--ink); }
.composer button:disabled { opacity: 0.35; }
.composer.hidden { display: none; }

/* Drafts waiting for the host's OK */
.draft-card { margin-bottom: 0.85rem; }
.draft-target { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.35rem; }
.draft-body { white-space: pre-wrap; margin: 0.8rem 0 1rem; font-family: var(--font-editorial); font-size: 1.05rem; line-height: 1.6; }
.draft-actions { display: flex; gap: 0.6rem; }
.draft-actions button { flex: 1; }
.feed-url { margin-top: 1.25rem; }
.feed-url code { display: block; word-break: break-all; margin-bottom: 0.75rem; color: var(--ink-soft); }
.answer { white-space: pre-wrap; margin-top: 1.25rem; font-family: var(--font-editorial); font-size: 1.05rem; line-height: 1.65; }

/* What the Curator knows and how it works */
ul.memory-list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
ul.memory-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--hairline); }
.memory-text { color: var(--ink); }
.memory-meta { grid-row: 2; font-size: 0.78rem; color: var(--muted); }
.memory-meta a { color: var(--muted); }
ul.memory-list .link-button { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: auto !important; }
ul.memory-list .memory-text, ul.memory-list .memory-meta { overflow-wrap: anywhere; min-width: 0; }
ul.ways li { grid-template-columns: minmax(0, 1fr); }
ul.ways .memory-meta { grid-row: auto; }
ul.ways li.dead .memory-text { color: var(--ink-mute); text-decoration: line-through; text-decoration-color: var(--ink-mute); }
.memory-add { display: flex; gap: 0.5rem; margin: 0.5rem 0 0; flex-wrap: nowrap; }
.memory-add input { flex: 1; min-width: 0; }
.memory-add button { width: auto !important; padding: 0 1.1rem; }

/* ── Properties: photo first ── */
.property-cards { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.property-card { display: block; color: inherit; text-decoration: none; }
.property-card .cover {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden;
  background: var(--surface-high); color: var(--ink-mute); box-shadow: var(--shadow-photo);
}
.property-card .cover::after, .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--photo-rim);
}
.property-card:hover .photo.loaded { transform: scale(1.035); }
.property-card .cover { transition: transform 0.35s var(--ease); }
.property-card:active .cover { transform: scale(0.985); }
.property-card .cover .icon { width: 40px; height: 40px; }
.property-card .meta { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.15rem 0; }
.property-card .meta > span:first-child { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.property-card .name { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1.2; }
.property-card .city { color: var(--muted); font-size: 0.9rem; }
.property-card .row-chevron { width: 20px; height: 20px; }
.add-button { min-height: 40px; padding: 0 1rem 0 0.8rem; font-size: 0.875rem; }
.add-button .icon { width: 18px; height: 18px; }

.photo { display: block; opacity: 0; transition: opacity 0.7s var(--ease), transform 1.4s var(--ease); background: var(--surface-high); }
.photo.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.photo.loaded { opacity: 1; transform: none; }

/* A property: its photo, then its tabs */
.hero {
  position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; margin: 0 0 1rem;
  border-radius: 24px; overflow: hidden; background: var(--surface-high); box-shadow: var(--shadow-photo);
}
.hero::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.hero-text { position: relative; z-index: 3; padding: 1.2rem 1.25rem 1.15rem; color: #fff; }
.hero h1 { color: #fff; margin: 0 0 0.2rem; font-size: 2.1rem; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3); }
.hero-city { display: flex; align-items: center; gap: 0.35rem; color: rgba(255, 255, 255, 0.86); font-size: 0.95rem; }
.hero-city .icon { width: 16px; height: 16px; }
.hero-back {
  position: absolute; top: 0.75rem; inset-inline-start: 0.75rem; z-index: 3; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; color: #fff; text-decoration: none;
  background: rgba(20, 20, 22, 0.34); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
}
.hero-back .icon { width: 22px; height: 22px; }
.property-head { margin-bottom: 0.5rem; }
.property-head h1 { margin-bottom: 0.25rem; }
.property-page h2 { font-size: 1.35rem; margin: 2rem 0 0.5rem; }
.tabs { display: flex; gap: 1.4rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--hairline); margin: 0 0 1.25rem; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  position: relative; flex: none; background: none; color: var(--muted); padding: 0; min-height: 46px; border-radius: 0;
  font-size: 0.95rem; font-weight: 500;
}
.tabs button:hover { background: none; color: var(--ink); }
.tabs button:active { transform: none; }
.tabs button.active { color: var(--ink); font-weight: 600; }
.tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink);
  transform: scaleX(0); transition: transform 0.45s var(--ease);
}
.tabs button.active::after { transform: scaleX(1); }
.tabs button { transition: color 0.25s var(--ease); }

/* What the listing says */
.listing { margin: 0 0 1.5rem; }
.fact-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 1rem; }
.fact-tiles > div {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.8rem 0.25rem 0.7rem;
  background-color: var(--surface); background-image: var(--sheen), var(--grain); border-radius: 16px; text-align: center;
  box-shadow: inset 0 1px 0 var(--rim-top), var(--float);
}
.fact-tiles .icon { width: 20px; height: 20px; color: var(--muted); margin-bottom: 0.25rem; }
.fact-tiles strong { font-family: var(--font-display); font-variation-settings: "SOFT" 50; font-size: 1.45rem; font-weight: 380; line-height: 1.1; }
.fact-tiles span:last-child { font-size: 0.7rem; color: var(--muted); }
.standing { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.9rem; }
.standing > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.standing .icon { width: 16px; height: 16px; }
.standing .star { color: var(--ink); }
.listing .facts { margin: 0.75rem 0 0.15rem; color: var(--ink); }
.listing .hint { margin: 0.15rem 0; }
.photo-strip {
  display: flex; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0.5rem -1rem 0.25rem; padding: 0 1rem 0.25rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip img {
  flex: 0 0 auto; width: min(68vw, 300px); aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 16px; scroll-snap-align: start; outline: 1px solid var(--photo-rim); outline-offset: -1px;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }
.chips span, .chips a { padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.82rem; color: var(--ink-soft); background: var(--tile-face); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 1px var(--hairline); }
.listing-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.listing-actions .button, .listing-actions button { flex: 1; min-height: 44px; font-size: 0.875rem; }
.section-label { margin: 1.5rem 0 0.25rem; }

/* ── The calendar: free nights are empty, booked nights a solid band ── */
.month { padding: 1rem 0.85rem 1.1rem; }
.month-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.6rem; }
.month-head h2 { margin: 0; font-size: 1.35rem; white-space: nowrap; }
.month-head h2 .year { color: var(--muted); }
.month .month-head button {
  width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; flex: none;
  background: var(--btn2-face); color: var(--ink); box-shadow: var(--btn2-rim), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.month .month-head button:hover { background: var(--btn2-face-hover); }
.month-head button .icon { width: 20px; height: 20px; }
.weekdays, .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekdays span { text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--muted); padding: 0.2rem 0 0.45rem; }
.days { row-gap: 4px; }
.day {
  position: relative; display: grid; place-items: center; height: 44px; min-height: 0; min-width: 0; padding: 0;
  background: none; border: 0; border-radius: 0; color: var(--ink); font: 500 0.92rem/1 var(--font-ui);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.day:hover { background: none; }
.day:active { transform: none; }
.day .num { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.day.free:not(:disabled):hover .num { background: var(--surface-high); }
.day.empty { pointer-events: none; }
.day.past { color: var(--ink-mute); cursor: default; }
.day:disabled { opacity: 1; cursor: default; }
.day.today .num { box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 700; }
.day.picked .num { background: var(--ink); color: var(--canvas); }
.day.booked { color: var(--on-accent); }
.day.booked::before { content: ""; position: absolute; top: 4px; bottom: 4px; inset-inline: 0; background: var(--band-face); box-shadow: var(--band-rim); }
.day.booked.start::before { inset-inline-start: 3px; border-start-start-radius: 999px; border-end-start-radius: 999px; }
.day.booked.end::before { inset-inline-end: 3px; border-start-end-radius: 999px; border-end-end-radius: 999px; }
.day.booked.past::before { opacity: 0.45; }
.day.booked.today .num { box-shadow: inset 0 0 0 1.5px var(--on-accent); }
.day .pf { position: absolute; z-index: 2; top: 7px; left: 50%; margin-left: 9px; width: 6px; height: 6px; border-radius: 50%; }
.pf.airbnb, .chip.airbnb::before { background: #ff5a5f; }
.pf.bookingcom, .chip.bookingcom::before { background: #3b82f6; }
.pf.vrbo, .chip.vrbo::before { background: #8b5cf6; }
.pf.direct, .chip.direct::before { background: #34c759; }
.month-stat { display: flex; align-items: baseline; gap: 0.4rem; margin: 1rem 0.2rem 0.45rem; }
.month-stat strong { font-family: var(--font-display); font-variation-settings: "SOFT" 50; font-size: 1.8rem; font-weight: 380; line-height: 1; font-variant-numeric: tabular-nums; }
.month-stat span { color: var(--muted); font-size: 0.9rem; }
.fill-bar { height: 5px; border-radius: 999px; background: var(--surface-high); overflow: hidden; margin: 0 0.2rem 0.5rem; box-shadow: var(--field-shadow); }
.fill-bar i { display: block; height: 100%; border-radius: 999px; background: var(--band-face); box-shadow: var(--band-rim); transform-origin: left center; animation: fill 1.1s var(--ease) both 0.2s; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[dir="rtl"] .fill-bar i { transform-origin: right center; }
.stays { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.stays li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 0.05rem 0.75rem; padding: 0.7rem 0.2rem; border-top: 1px solid var(--hairline); }
.stays .who-badge { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tile-face); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 1px var(--hairline); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em; }
.stay-who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stay-when { grid-column: 2; font-size: 0.82rem; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.stays .chip { grid-column: 3; grid-row: 1 / span 2; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.add-stay { border-top: 1px solid var(--hairline); margin: 0.75rem 0 0; padding-top: 1rem; }
.add-stay .row { display: flex; gap: 0.75rem; }
.add-stay .row label { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; font-size: 0.8rem; color: var(--muted); }
details.fold.connect > summary { min-height: 56px; }

/* Calendars to connect, rules, the market around */
.rules p, .market p { margin: 0; }
.rules .facts, .market .facts { color: var(--ink); }
ul.rule-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
ul.rule-list li { padding: 0.7rem 0; border-bottom: 1px solid var(--hairline); display: grid; gap: 0.25rem; }
ul.rule-list li:last-child { border-bottom: 0; }
.rule-head { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.rule-status {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.1rem 0.55rem; border-radius: 999px;
  background: var(--surface-high); color: var(--ink-soft); white-space: nowrap;
}
.rule-status.met { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.rule-status.todo { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.rule-status.check { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.rule-action { color: var(--ink); }
.rule-action::before { content: "→ "; color: var(--muted); }
.market-median { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; color: var(--ink); }
.market-median .hint { font-family: var(--font-ui); font-size: 0.85rem; margin-left: 0.4rem; }
ul.comp-list { list-style: none; padding: 0; margin: 0.5rem 0 0; }
ul.comp-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hairline); }
ul.comp-list li a { overflow-wrap: anywhere; }
ul.comp-list .comp-price { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
ul.comp-list .hint { grid-column: 1 / -1; }
.how-to { font-size: 0.85rem; color: var(--muted); text-decoration: none; margin-left: 0.25rem; }
.page-head .how-to { align-self: center; }

/* WiFi & devices */
ol.steps { margin: 0.25rem 0 0.75rem; padding-left: 1.25rem; color: var(--ink-soft); }
ol.steps li { padding: 0.3rem 0; }
.panel.found { border-color: var(--lift); }
.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.12em; font-size: 1.8rem; margin: 0.25rem 0; }
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; margin: 0.75rem 0 1rem; }
.device-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem;
}
.device-card.on { background: var(--surface-high); border-color: var(--lift); }
.device-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.device-head .device-name { font-weight: 500; color: var(--ink); }
.device-head .device-state { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.device-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.device-controls button.toggle { width: auto; flex: 1 1 auto; min-height: 44px; padding: 0 1rem; }
.device-card.on .device-controls button.toggle { background: var(--ink); color: var(--canvas); }
.stepper { display: flex; align-items: center; gap: 0.5rem; }
.stepper button { width: 44px !important; min-height: 44px; padding: 0; background: var(--surface-high); color: var(--ink); font-size: 1.25rem; }
.stepper span { min-width: 3ch; text-align: center; font-variant-numeric: tabular-nums; }
input.slider { width: 100%; min-height: 32px; accent-color: var(--platinum); background: none; border: 0; padding: 0; }

/* Account, help, supplies, regions */
.toggle-row { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft); }
.toggle-row input { width: 22px; height: 22px; flex: none; margin-top: 0.15rem; }
ul.more-list { list-style: none; padding: 0; margin: 1rem 0; }
ul.more-list li { position: relative; }
ul.more-list li a { display: grid; gap: 0.15rem; padding: 0.95rem 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink); }
ul.supply-list { list-style: none; padding: 0; margin: 1rem 0; }
ul.supply-list li { padding: 0.85rem 0; border-bottom: 1px solid var(--hairline); display: grid; gap: 0.2rem; }
ul.supply-list li p { margin: 0; }
ul.supply-list li.low strong::before { content: "● "; color: var(--warn); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.field { display: grid; gap: 0.25rem; }
.add-line { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem auto; gap: 0.5rem; }
input.qty { width: 4.5rem; text-align: right; }
.add-line button { width: auto !important; padding: 0 1rem; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.stat-row > div { display: grid; gap: 0.1rem; }
.stat-row .stat { font-size: 1.5rem; }
.guide ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.55rem; color: var(--ink-soft); }
.guide h2 { margin: 0; font-size: 1.25rem; }
.help-page .chips a { text-decoration: none; }

/* Reach more guests: platform rows open to their steps. */
.channel-list li { border-top: 1px solid var(--hairline); padding: 10px 0; }
.channel-list li:first-child { border-top: 0; }
.link-row { width: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; justify-content: flex-start; }
.link-row:hover { background: none; }
fieldset.stack { border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin: 0; }
fieldset legend { padding: 0 6px; font-weight: 600; }

/* Government console */
.segmented.tabs-row { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 0; }
.segmented.tabs-row button { min-width: 0; }
.segmented.tabs-row.four { grid-template-columns: repeat(4, 1fr); }
.segmented.tab-strip { display: flex; overflow-x: auto; scrollbar-width: none; margin: 12px 0; -webkit-overflow-scrolling: touch; }
.segmented.tab-strip::-webkit-scrollbar { display: none; }
.segmented.tab-strip button { flex: 0 0 auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-2 > * { min-width: 0; }
.grid-2 input { width: 100%; }
.chip-check { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; }
.sub-row { padding-left: 12px; }
.scan-button { display: flex; justify-content: center; align-items: center; gap: 6px; cursor: pointer; }
.scan-button.busy { opacity: 0.6; pointer-events: none; }
.row-between.gap { gap: 8px; }
.row-between.gap input { flex: 1; min-width: 0; }
.sub-block { padding-left: 12px; border-left: 2px solid var(--border); }
.doc-row { padding: 6px 0; }
ul.plain li.inner-card, .inner-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin: 10px 0; overflow-wrap: break-word; }
.inner-card .row-between > .hint { white-space: nowrap; flex-shrink: 0; margin-left: 8px; }
.gov-map { height: 360px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); margin: 8px 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.85rem; color: var(--ink-soft); }
.map-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--dot); }
.bars { width: 100%; height: auto; display: block; }
.bars .bar { fill: var(--data-1); cursor: pointer; }
.bars .bar.dim { opacity: 0.45; }
.bars .axis { stroke: var(--ink-mute); stroke-width: 1; }
.bars text { fill: var(--ink-soft); font-size: 11px; font-family: inherit; }
.bars text.value { fill: var(--ink); font-weight: 600; }
.chart-caption { min-height: 1.4em; color: var(--ink); font-weight: 600; }
.alarm-banner { border: 2px solid var(--danger); }
.alarm-banner strong { color: var(--danger); }

/* ── Footers ── */
.site-footer { border-top: 1px solid var(--hairline); padding: 2.5rem 1.5rem 2rem; width: 100%; box-sizing: border-box; max-width: 960px; margin: 3rem auto 0; font-size: 0.85rem; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.footer-brand { max-width: 22rem; color: var(--muted); }
.footer-brand p { margin: 0.25rem 0; }
.footer-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.footer-small { font-size: 0.75rem; color: var(--ink-mute); }
.footer-google { margin-top: 1rem; min-height: 1px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 2rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.footer-col .label-caps { margin-bottom: 0.25rem; }
.footer-col a { color: var(--ink-soft); text-decoration: none; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: var(--ink-mute); }
.app-footer { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: center; padding: 1.5rem 16px 2rem; font-size: 0.75rem; color: var(--ink-mute); }
.app-footer a { color: inherit; text-decoration: none; }
.app-footer a:hover { color: var(--ink-soft); }

/* ── Phones: tabs at the thumb, every edge clear of the notch and home bar,
   16px fields so iOS never zooms, 44px targets. ── */
@media (max-width: 640px) {
  form > * { flex: 1 1 100%; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .site-footer { padding: 2rem 1rem 1.5rem; }
}
@media (max-width: 820px) {
  .top-nav {
    gap: 0.75rem;
    padding: calc(env(safe-area-inset-top, 0px) + 0.55rem) calc(env(safe-area-inset-right, 0px) + 1rem) 0.55rem calc(env(safe-area-inset-left, 0px) + 1rem);
  }
  .top-nav-user { gap: 0.6rem; }
  .top-nav-tabs {
    position: fixed; z-index: 60; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem;
    left: calc(env(safe-area-inset-left, 0px) + 12px); right: calc(env(safe-area-inset-right, 0px) + 12px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    padding: 0.35rem; border-radius: 30px;
    background-color: var(--glass-tint); background-image: var(--sheen);
    -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
    box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px var(--hairline), var(--glass-shadow);
  }
  .top-nav-tabs a {
    flex-direction: column; justify-content: center; gap: 0.15rem; min-height: 52px; padding: 0.2rem 0;
    font-size: 0.66rem; font-weight: 500; letter-spacing: 0.01em; border-radius: 24px; background: none;
    transition: color 0.25s var(--ease), background 0.35s var(--ease);
  }
  .top-nav-tabs a .icon { width: 24px; height: 24px; transition: transform 0.35s var(--ease); }
  .top-nav-tabs a:active .icon { transform: scale(0.9); }
  .top-nav-tabs a[aria-current="page"] { font-weight: 600; background: var(--glass-active); box-shadow: inset 0 1px 0 var(--rim-top); }
  main { padding: 1.25rem calc(env(safe-area-inset-right, 0px) + 1rem) 2rem calc(env(safe-area-inset-left, 0px) + 1rem); }
  body:has(.top-nav-tabs) { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
  .composer { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); }
  h1 { font-size: 2.1rem; }
  .row-actions button, .panel > button, .stack button, .panel > a.button, .stack a.button { width: 100%; }
  .stack .link-button, .panel > .link-button { width: auto; }
  .auth-page { padding: calc(env(safe-area-inset-top, 0px) + 3rem) 1.25rem 2rem; }
  .hero { margin: -1.25rem -1rem 1rem; border-radius: 0 0 26px 26px; aspect-ratio: 1 / 0.92; }
  .property-cards { gap: 1.75rem; }
}

/* Icons inside row chevrons and buttons fill their box. */
.row-chevron { display: inline-flex; flex: none; }
.row-chevron .icon { width: 100%; height: 100%; }
.home-head .add-button { flex: none; }
.memory-add > input { flex: 1 1 auto; }
.memory-add > button { flex: 0 0 auto; }
ul.plain a { text-decoration: none; font-weight: 500; }

/* Wider screens: a shorter photo, and Home in one calm column. */
@media (min-width: 821px) {
  .hero { aspect-ratio: 21 / 8; }
  .curator-page { max-width: 640px; margin: 0 auto; }
}

/* Right-to-left languages: arrows point the way the page reads. */
[dir="rtl"] .row-chevron .icon, [dir="rtl"] .hero-back .icon, [dir="rtl"] .back .icon, [dir="rtl"] .month-head .icon { transform: scaleX(-1); }
[dir="rtl"] details.row-fold[open] > summary .row-chevron { transform: rotate(-90deg); }

/* ── Choreography: each screen's parts rise into place in turn, once. ── */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.curator-page > *, .properties-page > *, .property-page > *, .more-page > *, .regions-page > *, .auth-page > *, .property-cards > li {
  animation: rise 0.75s var(--ease) both;
}
.curator-page > :nth-child(2), .properties-page > :nth-child(2), .property-page > :nth-child(2), .more-page > :nth-child(2), .auth-page > :nth-child(2), .property-cards > li:nth-child(2) { animation-delay: 0.07s; }
.curator-page > :nth-child(3), .properties-page > :nth-child(3), .property-page > :nth-child(3), .more-page > :nth-child(3), .auth-page > :nth-child(3), .property-cards > li:nth-child(3) { animation-delay: 0.14s; }
.curator-page > :nth-child(4), .property-page > :nth-child(4), .more-page > :nth-child(4), .auth-page > :nth-child(4), .property-cards > li:nth-child(n + 4) { animation-delay: 0.2s; }
.curator-page > :nth-child(n + 5), .property-page > :nth-child(n + 5), .auth-page > :nth-child(n + 5) { animation-delay: 0.26s; }
.curator-page > .thread, .curator-page > .composer { animation: none; }

/* ── Loading: the shape of what's coming, shimmering, instead of a word. ── */
.skeleton {
  border-radius: 14px;
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-high) 50%, var(--surface) 70%) var(--surface);
  background-size: 300% 100%; animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk-photo { aspect-ratio: 4 / 3; border-radius: 20px; }
.sk-title { height: 26px; width: 55%; margin: 0.9rem 0 0.5rem; }
.sk-line { height: 14px; width: 30%; }
.sk-hero { aspect-ratio: 4 / 3; border-radius: 24px; margin-bottom: 1rem; }
.sk-tabs { height: 22px; width: 70%; margin: 1.1rem 0 1.4rem; }
.sk-block { height: 220px; border-radius: 22px; }
.sk-next { height: 430px; border-radius: 22px; }
.sk-grid { height: 300px; margin: 0.5rem 0; }
@media (max-width: 820px) { .sk-hero { margin: -1.25rem -1rem 1rem; border-radius: 0 0 26px 26px; aspect-ratio: 1 / 0.92; } }
@media (min-width: 821px) { .sk-hero { aspect-ratio: 21 / 8; } }