/* Ospito app components, "Warm Boutique". Uses only the tokens in tokens.css (load that first; it also loads the fonts).
   Rules of the road
   - Colours, radii and fonts come from tokens.css variables. No hex values in screens.
   - Body text is --ink / --ink-2. Do not put coloured (--accent, --good ...) text on soft panels except links and numerals that pass 4.5:1.
   - 44px minimum tap targets, visible focus, no motion without a prefers-reduced-motion fallback.
   - Headings use --font-display (Fraunces, regular weight); everything else Hanken Grotesk.
   Class names from the earlier version are kept; new boutique pieces are at the end of each section. */

:root {
  --ui-icon: 20px;
  --ui-topbar: 60px;
  --ui-tabbar: 64px;
  --ui-measure: 44rem;
  --ui-wide: 1160px;
  --ui-gutter: 40px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ui-topbar) + 16px); background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--text)/1.55 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }
#page-title:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--ink-2); }
.small { font-size: var(--text-sm); }
.num { font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; }
.italic { font-style: italic; }
.stack { display: grid; gap: var(--space-4); }
.stack--lg { display: grid; gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.icon { display: inline-flex; flex: none; width: var(--icon, 20px); height: var(--icon, 20px); }
.icon svg { display: block; }

/* Small uppercase label above a heading ("Extra revenue this month") */
.label, .eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.label--muted { color: var(--ink-2); }

/* Smooth theme change, only while the lamp is being pulled (added/removed by theme-init.js) */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease, fill .6s ease, stroke .6s ease !important;
}

/* ------------------------------------------------------------------ shell */
.skip-link {
  position: fixed; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-3) var(--space-4);
  background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

.shell { min-height: 100vh; min-height: 100dvh; }

/* Header: wordmark left, language / account right, lamp hanging from the top edge.
   Desktop adds a nav row under it (.topnav); phones use the bottom .tabbar instead. */
.topbar {
  position: sticky; top: 0; z-index: 20; min-height: calc(var(--ui-topbar) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--space-4), env(safe-area-inset-right)) 0 max(var(--space-4), env(safe-area-inset-left));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-3);
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__end { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin-right: 52px; font-size: var(--text-sm); color: var(--ink-2); }
@media (max-width: 899.98px) { .topbar__end .demo-badge { display: none; } } /* phones show the demo strip instead */

.brand {
  flex: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none;
  font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -.01em; color: var(--ink);
}
.brand__mark { display: none; } /* the old ring mark: the logo is plain "Ospito" text now */

.topnav { display: none; }

.view { width: 100%; max-width: var(--ui-measure); margin: 0 auto; padding: var(--space-5) var(--space-4) calc(var(--ui-tabbar) + var(--space-7) + env(safe-area-inset-bottom)); }
.view--wide { max-width: var(--max-w); }
.view--narrow { max-width: var(--ui-measure); }
.view:focus { outline: none; }

.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(max-content, 1fr));
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--ui-tabbar); padding: var(--space-2) 2px; text-decoration: none; color: var(--ink-2);
  font-size: 14px; line-height: 1.2; font-weight: 500; min-width: 0;
}
.tab__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 339px) { .tab { font-size: 13px; } } /* the longest words (PT "Alojamentos", "Calendários") only fit five across at 13px on the smallest phones */
.tab[aria-current="page"] { color: var(--ink); font-weight: 600; }
.tab[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 16%; right: 16%; height: 2px; background: var(--ink); }
.tab__badge {
  position: absolute; top: 8px; left: calc(50% + 14px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--terra); color: var(--bg); font-size: 12px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums;
}

.content-col { min-width: 0; }

@media (min-width: 900px) {
  .topbar {
    padding-inline: max(var(--space-4), env(safe-area-inset-left), calc((100% - var(--ui-wide)) / 2 + var(--ui-gutter))) max(var(--space-4), env(safe-area-inset-right), calc((100% - var(--ui-wide)) / 2 + var(--ui-gutter)));
    padding-top: calc(var(--space-3) + env(safe-area-inset-top)); border-bottom: 0;
    background: var(--bg); backdrop-filter: none;
  }
  .topbar__end { margin-right: 64px; gap: var(--space-5); }
  .topnav {
    display: flex; flex-wrap: wrap; gap: 0 32px; flex: 1 0 100%; margin-top: var(--space-2); border-bottom: 1px solid var(--line);
  }
  .topnav__link {
    min-height: var(--tap); display: inline-flex; align-items: center; margin-bottom: -1px; text-decoration: none;
    font-size: 15px; font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent;
  }
  .topnav__link:hover { color: var(--ink); }
  .topnav__link[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
  .tabbar { display: none; }
  .view { max-width: var(--ui-wide); padding: var(--space-6) var(--ui-gutter) var(--space-7); }
  .view--wide { max-width: var(--ui-wide); }
  .view--narrow { max-width: calc(var(--ui-measure) + 2 * var(--ui-gutter)); }
}

/* Notch on the side of a phone held sideways: page content keeps out from behind it. env() is 0 without a notch, so nothing moves. */
@media (max-width: 899.98px) { .view { padding-inline: max(var(--space-4), env(safe-area-inset-left)) max(var(--space-4), env(safe-area-inset-right)); } }
@media (min-width: 900px) { .view { padding-inline: max(var(--ui-gutter), env(safe-area-inset-left)) max(var(--ui-gutter), env(safe-area-inset-right)); } }

/* A phone held sideways (short screen): shorter top and bottom bars so more of the page shows. Both stay at least 44px to press
   and keep the notch margins above. A wide sideways phone (900px and up) gets the laptop header, two rows tall: it scrolls away
   instead of staying pinned. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --ui-topbar: 48px; --ui-tabbar: 44px; }
  .tab { padding-block: 0; }
}
@media (max-height: 500px) and (orientation: landscape) and (min-width: 900px) {
  .topbar { position: static; }
  html { scroll-padding-top: var(--space-4); }
}

/* Focused screens (sign in, set-up): no nav, just the page */
.shell--minimal .tabbar, .shell--minimal .topnav { display: none; }
.shell--minimal { display: block; }
.shell--minimal .topbar { display: flex; }
.shell--minimal .view { padding-bottom: var(--space-7); }

/* The pull-cord lamp: hangs from the top edge of the page, inside the header. */
.lamp {
  position: absolute; top: -18px; right: max(6px, env(safe-area-inset-right)); z-index: 25; width: 44px; height: 58px; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; display: flex; justify-content: center;
}
.lamp svg { display: block; overflow: visible; width: 22px; height: 56px; }
.lamp:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 14px; }
.lamp * { transition: opacity .45s ease, fill .6s ease, stroke .6s ease; }
.lamp .cord { transition: transform .2s ease; }
.lamp:hover .cord { transform: translateY(5px); }
.lamp .flame { animation: lamp-flicker 1.6s ease-in-out infinite; }
.lamp .smoke { animation: lamp-smoke 2.8s ease-out infinite; }
.lamp .cordA { animation: lamp-cord .55s ease-out; }
.lamp .cordB { animation: lamp-cord2 .55s ease-out; }
.lamp .swayA { animation: lamp-sway .95s ease-out; }
.lamp .swayB { animation: lamp-sway2 .95s ease-out; }
@keyframes lamp-cord { 0% { transform: translateY(0) } 35% { transform: translateY(18px) } 62% { transform: translateY(-3px) } 100% { transform: translateY(0) } }
@keyframes lamp-cord2 { 0% { transform: translateY(0) } 35% { transform: translateY(18px) } 62% { transform: translateY(-3px) } 100% { transform: translateY(0) } }
@keyframes lamp-sway { 0% { transform: rotate(0deg) } 30% { transform: rotate(5deg) } 62% { transform: rotate(-3deg) } 100% { transform: rotate(0deg) } }
@keyframes lamp-sway2 { 0% { transform: rotate(0deg) } 30% { transform: rotate(5deg) } 62% { transform: rotate(-3deg) } 100% { transform: rotate(0deg) } }
@keyframes lamp-flicker { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(.93, 1.07) } }
@keyframes lamp-smoke { 0% { opacity: 0 } 25% { opacity: .6 } 100% { opacity: 0 } }
@media (min-width: 900px) {
  .lamp { top: -22px; height: 72px; right: max(6px, env(safe-area-inset-right), calc((100% - var(--ui-wide)) / 2 + var(--ui-gutter) - 8px)); }
  .lamp svg { width: 28px; height: 70px; }
}

/* Language menu: opens on a click, tap, Enter, Space or a resting mouse. Not on Tab focus alone. */
.lang { position: relative; display: inline-block; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap); min-width: var(--tap); justify-content: center; padding: 0 4px; background: none; border: 0; color: inherit; cursor: pointer; white-space: nowrap; }
.lang-menu {
  display: none; position: absolute; right: 0; top: 100%; min-width: 200px; padding: 6px; z-index: 40;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop);
}
.lang.is-open .lang-menu { display: block; } /* opened by brand.js (click, tap, Enter, Space, or a resting mouse): never by Tab focus alone */
.lang-menu__item {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--tap); padding: 0 12px;
  border: 0; border-radius: 9px; background: none; color: var(--ink); font-size: 15px; text-align: left; text-decoration: none; cursor: pointer;
}
.lang-menu__item:hover, .lang-menu__item:focus-visible { background: var(--sage); }
.lang-menu__item[aria-current="true"] { font-weight: 600; }
.lang-menu__item[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.lang-menu__item[aria-disabled="true"]:hover { background: none; }
.lang-menu__code { font-size: var(--text-xs); letter-spacing: .08em; color: var(--ink-3); }

/* Language switcher (segmented) and account button, kept for screens that still use them */
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 2px; border: 1px solid var(--line); }
.seg__btn {
  min-width: 44px; min-height: 44px; padding: 0 var(--space-2); border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.seg__btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.icon-btn {
  display: inline-grid; place-items: center; flex: none; width: var(--tap); min-width: var(--tap); height: var(--tap); border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 600; font-size: var(--text-sm); }

.demo-badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-2); border-radius: 999px;
  background: var(--warn-soft); color: var(--ink); font-size: 12px; font-weight: 600; font-style: italic; white-space: nowrap;
}

/* --------------------------------------------------------------- headings */
.page-head { margin-bottom: var(--space-6); display: grid; gap: var(--space-3); }
.page-head__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.page-title { font-family: var(--font-display); font-size: clamp(28px, 3vw + 12px, 38px); line-height: 1.1; font-weight: 400; letter-spacing: -.02em; text-wrap: balance; }
.page-lead { margin-top: var(--space-2); color: var(--ink-2); font-size: var(--text-lg); line-height: 1.4; max-width: 34rem; text-wrap: pretty; }
.back-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); margin-left: -4px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.back-link:hover { color: var(--ink); }
.section { margin-top: var(--space-7); }
.section:first-of-type { margin-top: 0; }
.section__title { font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 400; letter-spacing: -.015em; margin-bottom: var(--space-3); }
.section__lead { color: var(--ink-2); margin: calc(var(--space-2) * -1) 0 var(--space-4); }

/* --------------------------------------------------------- buttons, chips */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 10px 20px; border-radius: var(--radius-btn); border: 1.5px solid transparent;
  font-weight: 600; font-size: var(--text); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn--secondary { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn--secondary:hover:not(:disabled) { background: var(--accent-soft); }
.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.btn--danger { background: var(--bad); color: var(--bad-ink); }
.btn--homie { background: var(--hg); color: var(--hg-ink); }
.btn--block { width: 100%; }
.btn--small { min-height: var(--tap); padding: 8px var(--space-4); font-size: var(--text-sm); }
.btn.is-busy .btn__label { opacity: .7; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 12px 2px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); background: var(--sand); white-space: normal;
}
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.chip--good { background: var(--good-soft); } .chip--good .icon { color: var(--good); }
.chip--warn { background: var(--warn-soft); } .chip--warn .icon { color: var(--warn); }
.chip--bad { background: var(--bad-soft); } .chip--bad .icon { color: var(--bad); }
.chip--accent { background: var(--sage); } .chip--accent .icon { color: var(--accent); }
.chip--neutral { background: var(--sand); }
.chip--paper { background: var(--paper); }
.chip--solid { background: var(--accent); color: var(--accent-ink); }
.chip--hg { background: var(--hg); color: var(--hg-ink); }
.chip--hg .icon { color: var(--hg-ink); }
.chip--good .chip__dot { background: var(--good); }
.chip--warn .chip__dot { background: var(--warn); }
.chip--bad .chip__dot { background: var(--terra); }
a.chip { text-decoration: none; min-height: 36px; }

.badge {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px;
  background: var(--sand); color: var(--ink-2); font-size: 12px; font-weight: 600;
}
.badge--lang { letter-spacing: .02em; }

/* ------------------------------------------------------------------ cards and panels */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow); }
.card--flat { box-shadow: none; }
.card--soft { background: var(--sage); border-color: transparent; box-shadow: none; }
@media (min-width: 600px) { .card { padding: var(--space-5); } }

/* Coloured panels: sage = calm/good, clay = needs you, sand = neutral, deep = dark green banner */
.panel { border-radius: var(--radius); padding: var(--space-5); border: 1px solid transparent; }
.panel--sage { background: var(--sage); }
.panel--clay { background: var(--clay); }
.panel--sand { background: var(--sand); }
.panel--paper { background: var(--paper); border-color: var(--line); }
.panel--deep { background: var(--deep); color: var(--deep-ink); }
.panel--deep .muted, .panel--deep .small { color: var(--deep-ink-2); }
.panel--deep .label { color: var(--deep-ink-2); }
.panel--deep .btn--primary { background: var(--deep-ink); color: var(--deep); }
.panel--deep .btn--secondary { border-color: var(--deep-line); color: var(--deep-ink); }
.panel--deep .btn--secondary:hover:not(:disabled) { background: var(--deep-line); }

/* Homie tile: Homie art on the warm cream square, identical in light and dark */
.homie-tile {
  --tile: 52px; flex: none; width: var(--tile); height: var(--tile); display: inline-flex; align-items: center; justify-content: center;
  background: var(--homie-tile); border-radius: calc(var(--tile) * .28);
}
.homie-tile img { display: block; width: 84%; height: 84%; object-fit: contain; }
.homie { display: block; object-fit: contain; flex: none; }

/* Banner: Homie + a title and one line. Used for empty states, "Homie says" notes, section intros. */
.banner {
  display: flex; align-items: center; gap: var(--space-4); padding: 14px 22px 14px 14px; border-radius: var(--radius); background: var(--sage); color: var(--ink);
}
.banner--clay { background: var(--clay); }
.banner--sand { background: var(--sand); }
.banner--deep { background: var(--deep); color: var(--deep-ink); }
.banner--deep .banner__sub { color: var(--deep-ink-2); }
.banner__text { min-width: 0; flex: 1 1 10rem; display: grid; gap: 2px; }
.banner__title { font-family: var(--font-display); font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
.banner__sub { font-size: 14px; color: var(--ink-2); }
.banner__action { margin-left: auto; flex: none; }
@media (max-width: 599px) { .banner { align-items: flex-start; flex-wrap: wrap; } .banner__action { margin-left: 0; width: 100%; } }

/* A ledger is one card with hairline-separated rows: calmer than a stack of cards. */
.ledger { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ledger > * + * { border-top: 1px solid var(--line); }
.row {
  display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding: var(--space-3) var(--space-4);
  text-decoration: none; color: inherit; min-width: 0;
}
a.row:hover { background: var(--sage); }
.row__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row__title { font-weight: 600; }
.row__sub { color: var(--ink-2); font-size: var(--text-sm); }
.row__end { color: var(--ink-3); display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.row__end .icon { color: var(--ink-3); }

/* -------------------------------------------------------------- empty etc */
.empty { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding: var(--space-7) var(--space-4); max-width: 28rem; margin: 0 auto; }
.empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--sage); color: var(--accent); display: grid; place-items: center; }
.empty--error .empty__icon { background: var(--bad-soft); color: var(--bad); }
.empty__homie { margin-bottom: var(--space-1); }
.empty__title { font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 400; letter-spacing: -.015em; }
.skeleton { display: grid; gap: var(--space-3); }
.skeleton__line { display: block; height: 18px; border-radius: 8px; background: linear-gradient(90deg, var(--sand) 25%, var(--line) 50%, var(--sand) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.loading-homie { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-7) 0; color: var(--ink-2); font-style: italic; font-family: var(--font-display); }
.loading-homie .homie-tile { animation: homie-bob 1.6s ease-in-out infinite; }
@keyframes homie-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--ui-tabbar) + var(--space-4) + env(safe-area-inset-bottom)); z-index: 60;
  max-width: min(92vw, 28rem); padding: var(--space-3) var(--space-5); border-radius: 14px; background: var(--ink); color: var(--bg);
  font-weight: 500; text-align: center; opacity: 0; transform: translate(-50%, 8px); pointer-events: none; visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
@media (min-width: 900px) { .toast { bottom: var(--space-5); } }

/* ------------------------------------------------------------------ forms */
.field { display: grid; gap: var(--space-2); }
.field__label { font-weight: 600; }
.field__hint { color: var(--ink-2); font-size: var(--text-sm); }
.field__error { color: var(--bad); font-size: var(--text-sm); font-weight: 500; }
.input, .select, .textarea {
  width: 100%; min-height: var(--tap); padding: 10px 14px; background: var(--paper); border: 1px solid var(--field-line);
  border-radius: var(--radius-sm); color: var(--ink);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: 1; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.form-grid { display: grid; gap: var(--space-4); }
@media (min-width: 600px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

.slider { display: grid; gap: var(--space-2); }
.slider__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.slider__label { font-weight: 600; }
.slider__value { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.slider__input {
  -webkit-appearance: none; appearance: none; width: 100%; height: var(--tap); margin: 0; background: transparent; cursor: pointer;
  --fill: 50%;
}
.slider__input::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--fill), var(--line) var(--fill)); }
.slider__input::-moz-range-track { height: 8px; border-radius: 4px; background: var(--line); }
.slider__input::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--accent); }
.slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--paper); border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(31, 38, 32, .25); }
.slider__input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 3px solid var(--accent); }

.choices { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
.choices__legend { font-weight: 600; margin-bottom: var(--space-3); padding: 0; }
.choice { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; min-height: var(--tap); }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice__mark { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--field-line); display: grid; place-items: center; }
.choice__text { display: grid; gap: 2px; min-width: 0; }
.choice__title { font-weight: 600; }
.choice__body { color: var(--ink-2); font-size: var(--text-sm); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--sage); box-shadow: 0 0 0 1px var(--accent); }
.choice:has(input:checked) .choice__mark { border-color: var(--accent); }
.choice:has(input:checked) .choice__mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.choice:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.subnav { display: flex; gap: 2px; padding: 3px; background: var(--sand); border-radius: 999px; width: 100%; max-width: 30rem; }
.subnav__link { flex: 1; min-height: 44px; display: grid; place-items: center; padding: 0 var(--space-3); border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: var(--text-sm); text-align: center; }
.subnav__link[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

/* ------------------------------------------------------------------ sheet */
.sheet { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: none; max-height: none; width: 100%; margin: auto 0 0; }
.sheet::backdrop { background: var(--scrim); }
.sheet__panel { background: var(--paper); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); max-height: 90vh; overflow: auto; border: 1px solid var(--line); border-bottom: 0; animation: rise .22s var(--ease); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.sheet__title { font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 400; letter-spacing: -.015em; }
.sheet__body { display: grid; gap: var(--space-4); }
.sheet__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
@media (min-width: 700px) {
  .sheet { margin: auto; width: min(30rem, 92vw); }
  .sheet--wide { width: min(40rem, 92vw); }
  .sheet__panel { border-radius: var(--radius-lg); border-bottom: 1px solid var(--line); padding: var(--space-5); box-shadow: var(--shadow-pop); }
}

/* ============================================================== screens */

/* --- Home */
.hero { margin-bottom: 0; }
.hero__date { color: var(--ink-2); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.hero__sentence { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; letter-spacing: -.02em; font-weight: 400; text-wrap: balance; max-width: 16em; }
.hero__sentence em { font-style: italic; }
.hero__chip { margin-top: var(--space-4); }
@media (min-width: 700px) { .hero__sentence { font-size: var(--text-big); } }
.need { display: flex; align-items: center; gap: var(--space-4); min-height: 76px; padding: var(--space-3) var(--space-4); text-decoration: none; color: inherit; }
a.need:hover { background: var(--sage); }
.need__count {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--sand); color: var(--ink-2);
  font-family: var(--font-display); font-style: italic; font-size: 17px; font-variant-numeric: tabular-nums;
}
.need--zero .need__count { color: var(--ink-3); }
.need--zero .need__count .icon { color: var(--good); }
.need--attn { background: var(--clay); }
.need__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.need__title { font-weight: 600; }
.need__sub { color: var(--ink-2); font-size: var(--text-sm); }
.home-grid { display: grid; gap: var(--space-6); }
@media (min-width: 1000px) { .home-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: var(--space-7); } }
.earn { padding: var(--space-5); border-radius: var(--radius); background: var(--sage); display: grid; gap: var(--space-2); }
.earn__label { color: var(--ink); font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.earn__figure { font-family: var(--font-display); font-size: var(--text-big); line-height: 1; font-weight: 400; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.earn__note { color: var(--ink-2); font-size: var(--text-sm); }
.stay { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); min-height: 60px; }
.stay__kind { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; color: var(--ink-2); }

/* --- Pricing */
.big-figure { font-family: var(--font-display); font-size: var(--text-big); line-height: 1; font-weight: 400; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pricing-hero { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.pricing-hero__sentence { font-size: var(--text-lg); line-height: 1.35; color: var(--ink-2); max-width: 30rem; text-wrap: pretty; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-4); margin: 0; }
.facts dt { color: var(--ink-2); font-size: var(--text-sm); }
.facts dd { margin: 2px 0 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; font-variant-numeric: tabular-nums; }
.suggest { display: grid; gap: var(--space-4); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.suggest.is-leaving { opacity: 0; transform: translateX(16px); }
.suggest__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.suggest__when { font-weight: 600; }
.suggest__where { color: var(--ink-2); font-size: var(--text-sm); }
.price-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.price-change__old { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1.5px; font-variant-numeric: tabular-nums; font-size: var(--text-lg); }
.price-change__new { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.suggest__reason { color: var(--ink); max-width: 34rem; text-wrap: pretty; }
.suggest__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (min-width: 600px) { .suggest__actions { grid-template-columns: auto auto; justify-content: start; } }
.pill-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.cal { display: grid; gap: var(--space-3); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cal__month { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); }
.cal__month::first-letter { text-transform: uppercase; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
@media (min-width: 600px) { .cal__grid { gap: 4px; } }
.cal__dow { text-align: center; color: var(--ink-2); font-size: 12px; font-weight: 600; padding: 4px 0; text-transform: capitalize; }
.cal__day {
  position: relative; min-height: var(--tap); aspect-ratio: 1 / 1; max-height: 56px; width: 100%; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; display: grid; place-items: center;
}
.cal__day:hover:not(:disabled) { border-color: var(--ink-3); }
.cal__day:disabled { background: transparent; border-color: transparent; color: var(--ink-2); opacity: .5; cursor: default; }
.cal__day[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.cal__day[aria-pressed="true"] .icon { position: absolute; top: 3px; right: 3px; color: var(--accent-ink); }
.cal__day.is-today { box-shadow: inset 0 0 0 2px var(--ink); }
.cal__day.is-busy { opacity: .6; }
.cal__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--ink-2); font-size: var(--text-sm); }
.cal__key { display: inline-flex; align-items: center; gap: var(--space-2); }
.cal__swatch { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line); background: var(--paper); }
.cal__swatch--locked { background: var(--accent); border-color: var(--accent); }

.report-total { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.report-prop { display: grid; gap: var(--space-3); padding: var(--space-4); }
.report-prop__name { font-family: var(--font-display); font-size: 18px; font-weight: 400; }

/* --- Inbox */
.inbox { display: grid; gap: var(--space-5); }
.inbox__list { min-width: 0; }
.thread { display: grid; gap: 6px; padding: var(--space-3) var(--space-4); min-height: 76px; text-decoration: none; color: inherit; position: relative; }
a.thread:hover { background: var(--sand); }
.thread[aria-current="true"] { background: var(--sage); }
.thread__top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.thread__name { font-family: var(--font-display); font-size: 17px; display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.thread.is-unread .thread__name { font-weight: 600; }
.thread__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.thread__time { color: var(--ink-3); font-size: 12px; flex: none; font-variant-numeric: tabular-nums; }
.thread__snippet { color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thread.is-unread .thread__snippet { color: var(--ink); }
.thread__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.filter { min-height: var(--tap); padding: 0 var(--space-4); border-radius: 999px; border: 0; background: var(--sage); color: var(--ink); font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.filter:hover { background: color-mix(in srgb, var(--sage) 80%, var(--ink)); }
.filter[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.thread-view { display: grid; gap: var(--space-4); min-width: 0; }
.thread-head { display: grid; gap: var(--space-2); }
.thread-head__name { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: -.01em; }
.msgs { display: grid; gap: var(--space-3); }
.msg { display: grid; gap: 4px; max-width: min(88%, 34rem); }
.msg__who { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.msg__bubble { padding: var(--space-3) var(--space-4); border-radius: 16px; background: var(--sand); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg--out { justify-self: end; }
.msg--out .msg__who { justify-self: end; }
.msg--out .msg__bubble { background: var(--sage); border-bottom-right-radius: 4px; }
.msg--in .msg__bubble { border-bottom-left-radius: 4px; }
.msg--homie .msg__bubble { background: var(--hg); color: var(--hg-ink); border-bottom-right-radius: 4px; }
.msg--draft .msg__bubble { border: 1.5px dashed var(--ink-3); background: transparent; }
.composer { display: grid; gap: var(--space-3); padding: var(--space-4); }
.composer__note { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--ink); font-size: var(--text-sm); background: var(--sage); padding: var(--space-3); border-radius: var(--radius-sm); }
.composer__note .icon { color: var(--accent); margin-top: 1px; }
.composer__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
@media (min-width: 1000px) {
  .inbox--split { grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); align-items: start; gap: var(--space-6); }
  .inbox--split .inbox__list { position: sticky; top: var(--space-5); max-height: calc(100vh - 3rem); overflow: auto; }
}
@media (max-width: 999.98px) { .inbox--thread-open .inbox__list { display: none; } }
@media (min-width: 1000px) { .view--inbox { max-width: 1280px; } }

/* --- Sync */
.sync-banner { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--radius); margin-bottom: var(--space-6); }
.sync-banner--ok { background: var(--sage); } .sync-banner--warning { background: var(--warn-soft); } .sync-banner--error { background: var(--clay); }
.sync-banner__icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); }
.sync-banner--ok .sync-banner__icon { color: var(--good); } .sync-banner--warning .sync-banner__icon { color: var(--warn); } .sync-banner--error .sync-banner__icon { color: var(--bad); }
.sync-banner__title { font-family: var(--font-display); font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; }
.channel { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); min-height: 64px; }
.channel__state { flex: none; margin-top: 2px; }
.channel__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.channel__name { font-weight: 600; }
.channel__ago { color: var(--ink-2); font-size: var(--text-sm); }
.status-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.conflict { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--clay); border-radius: var(--radius); }
.conflict__title { font-weight: 600; }
.prop-block { display: grid; gap: var(--space-3); }
.prop-block__name { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: -.01em; }

/* --- Properties */
.prop-grid { display: grid; gap: var(--space-4); }
.prop-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); text-decoration: none; color: inherit; min-height: 76px; }
a.prop-row:hover { background: var(--sage); }
.prop-row__rate { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; flex: none; }
.photo-ph { background: var(--photo); color: var(--photo-ink); border-radius: var(--radius-sm); font-size: 12px; font-style: italic; display: flex; align-items: flex-end; padding: 8px 10px; }
.def-list { display: grid; gap: 0; margin: 0; }
.def-list > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); min-height: 52px; align-items: center; }
.def-list > div + div { border-top: 1px solid var(--line); }
.def-list dt { color: var(--ink-2); }
.def-list dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Onboarding */
.onb { max-width: 34rem; margin: 0 auto; }
.onb-progress { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.onb-progress__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.onb-progress__seg { height: 6px; border-radius: 3px; background: var(--line); }
.onb-progress__seg.is-done { background: var(--accent); }
.onb-progress__label { color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; }
.onb-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); align-items: center; }
.onb-actions .btn--primary { flex: 1 1 12rem; }
.onb-note { padding: var(--space-4); border-radius: var(--radius-sm); background: var(--sand); color: var(--ink); font-size: var(--text-sm); }
.authcard { max-width: 26rem; margin: var(--space-6) auto 0; }

/* --- Boost */
.plan { display: grid; gap: var(--space-5); }
.plan__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.plan__list { display: grid; gap: var(--space-3); }
.plan__list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.plan__list .icon { color: var(--good); margin-top: 2px; }
.calm-note { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--sand); }
.calm-note .icon { color: var(--ink-2); margin-top: 2px; }

/* -------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .lamp .flame, .lamp .smoke { animation: none; }
}
@media (forced-colors: active) {
  .chip, .badge, .btn--secondary, .card, .ledger { border: 1px solid CanvasText; }
  .cal__day[aria-pressed="true"] { outline: 3px solid Highlight; }
}

/* --- shared bits added with the screens */
.chip-link { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; border-radius: 999px; }
.chip-link:hover .chip { filter: brightness(.97); }
.text-link { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; justify-self: start; align-self: start; }
.text-link:hover { text-decoration-thickness: 2.5px; }
/* Visual fix: a link inside a sentence must not be 44px tall (it stretched the line spacing of the sign-up terms line to 33px) */
p .text-link, li .text-link, .small .text-link { display: inline; min-height: 0; }
.hero__question { font-size: var(--text-lg); font-weight: 500; color: var(--ink-2); letter-spacing: -.01em; margin-bottom: var(--space-2); }
.lead-italic { font-family: var(--font-display); font-style: italic; color: var(--ink-2); font-size: var(--text-lg); line-height: 1.4; }

.disclosure { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.disclosure > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 600; list-style: none; gap: var(--space-2); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); margin-left: auto; margin-right: 4px; transition: transform .15s var(--ease); }
.disclosure[open] > summary::after { transform: rotate(-135deg); }
.disclosure > *:not(summary) { margin-top: var(--space-3); }

/* inbox: on phones, hide the page title while a thread is open (the thread has its own heading) */
@media (max-width: 999.98px) { .page-head--thread { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.inbox__pick { padding: var(--space-6) 0; }
@media (max-width: 999.98px) { .inbox__pick { display: none; } }
@media (min-width: 1000px) { .inbox .back-link { display: none; } }

/* Demo strip: on phones the badge sits on its own thin line so the header never crowds */
.demo-strip { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); background: var(--sand); font-size: 13px; color: var(--ink); }
@media (min-width: 900px) { .demo-strip { display: none; } }
.shell--minimal .demo-strip { display: flex; }

/* ------------------------------------------------------------------ generic switch, progress bar, callout (core)
   .ui-switch  : on/off control. Two ways to build it, both 44px high:
                 <label class="ui-switch"><input type="checkbox" class="ui-switch__input"><span class="ui-switch__track"></span><span class="ui-switch__text">Label</span></label>
                 <button type="button" class="ui-switch" role="switch" aria-checked="false"><span class="ui-switch__track"></span></button>
   (the older local .switch in ext.css and calendar.css is left as it is)
   .progress   : <div class="progress" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="--p:40%"><span></span></div>
   .callout    : sage note with a chip and text; --clay for "needs attention", --sand for neutral.
                 <div class="callout callout--clay"><span class="chip chip--warn">To confirm</span><div>Text</div></div> */
.ui-switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap); min-width: 56px; padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.ui-switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-switch__track { position: relative; flex: none; width: 52px; height: 30px; border-radius: var(--radius-btn); background: var(--ink-3); transition: background-color .2s ease; pointer-events: none; }
.ui-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); transition: transform .2s ease; }
.ui-switch__input:checked + .ui-switch__track,
.ui-switch[aria-checked="true"] .ui-switch__track { background: var(--accent); }
.ui-switch__input:checked + .ui-switch__track::after,
.ui-switch[aria-checked="true"] .ui-switch__track::after { transform: translateX(22px); }
.ui-switch__input:focus-visible + .ui-switch__track,
.ui-switch:focus-visible .ui-switch__track { outline: 3px solid var(--accent); outline-offset: 3px; }
.ui-switch__input:disabled + .ui-switch__track,
.ui-switch[disabled] .ui-switch__track,
.ui-switch[aria-disabled="true"] .ui-switch__track { opacity: .5; }
.ui-switch__input:disabled ~ .ui-switch__text { color: var(--ink-2); }
.ui-switch__text { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .ui-switch__track, .ui-switch__track::after { transition: none; } }

.progress { height: 10px; border-radius: var(--radius-btn); background: var(--sand); overflow: hidden; }
.progress > span { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); }
.progress--slim { height: 6px; }

.callout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-5); border-radius: var(--radius); background: var(--sage); color: var(--ink); font-size: 14.5px; }
.callout--clay { background: var(--clay); }
.callout--sand { background: var(--sand); }
.callout .chip { flex: none; }
.callout > div, .callout > span:last-child { flex: 1 1 260px; min-width: 0; }
.callout strong { font-weight: 600; }

/* ------------------------------------------------------------------ property picture (Home tiles, Properties list)
   A photo when the property has one; otherwise a colour block (one of four calm tokens, steady per property) with its first
   letter and, when there is room, the town. No stock pictures. Built by shared/propertyPhoto.js. */
.pimg {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 2px; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-sm); background-color: var(--sage); color: var(--accent); text-align: center;
  background-image: radial-gradient(110% 90% at 88% 8%, color-mix(in srgb, currentColor 11%, transparent), transparent 62%);
}
.pimg--c1 { background-color: var(--sand); color: var(--ink-2); }
.pimg--c2 { background-color: var(--clay); color: var(--terra); }
.pimg--c3 { background-color: var(--photo); color: var(--photo-ink); }
.pimg__initial { font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 400; letter-spacing: -.02em; }
.pimg__town { display: none; max-width: 90%; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pimg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.pimg--lg .pimg__initial { font-size: 56px; }
.pimg--lg .pimg__town { display: block; }