/* ==========================================================================
   AI Household Manager — one stylesheet, no build step, no framework.

   Maison Monaco palette: sun-bleached limestone ground, harbour-water accent,
   brass wherever a number carries value. Every colour below comes from a token,
   so light and dark stay consistent and a rebrand is a five-line edit.
   ========================================================================== */

:root {
  /* Sun-bleached limestone, harbour water, Belle-Époque brass. */
  --ground:    #eef0ec;
  --surface:   #ffffff;
  --surface-2: #e5e9e4;
  --sunk:      #e8ebe6;

  --ink:    #14201f;
  --ink-2:  #3b4947;
  --muted:  #6c7a77;
  --faint:  #95a09d;

  --rule:      #d5dbd6;
  --rule-soft: #e3e7e2;

  /* Harbour water. The one saturated colour the interface leans on. */
  --brand:      #0b4f63;
  --brand-dark: #083a4a;
  --brand-tint: #dfeaee;

  /* Money, ratings, anything with a value attached. */
  --brass:      #a8802c;
  --brass-tint: #f4ecd9;

  /* Reserved for the mark itself. Never a UI colour. */
  --monaco: #ce1126;

  --ok:    #0f6b47;  --ok-tint:    #dcefe4;
  --warn:  #8a6100;  --warn-tint:  #f8ecd0;
  --bad:   #9e1f27;  --bad-tint:   #f8e1e2;
  --info:  #1d4ed8;  --info-tint:  #e0e8fd;
  --purple:#6b21a8;  --purple-tint:#f0e2fb;
  --indigo:#3730a3;  --indigo-tint:#e4e3fc;

  --radius:    10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(20,32,31,.05), 0 12px 32px -24px rgba(20,32,31,.45);
  --shadow-lift: 0 2px 4px rgba(20,32,31,.06), 0 18px 40px -26px rgba(20,32,31,.5);

  --display: "Bodoni Moda", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #0d1214;
    --surface:   #141b1d;
    --surface-2: #1b2426;
    --sunk:      #111719;

    --ink:   #e6ece9;
    --ink-2: #c0c9c6;
    --muted: #8b9793;
    --faint: #6b7773;

    --rule:      #26312f;
    --rule-soft: #1d2624;

    --brand:      #6fb6c9;
    --brand-dark: #9ad3e0;
    --brand-tint: #0f2b33;

    --brass:      #d3a850;
    --brass-tint: #2b2314;

    --monaco: #e8434f;

    --ok:    #4fc088;  --ok-tint:    #0f2419;
    --warn:  #d8b25a;  --warn-tint:  #271f12;
    --bad:   #ef8080;  --bad-tint:   #2a1516;
    --info:  #86a8f5;  --info-tint:  #151c31;
    --purple:#c79bef;  --purple-tint:#221930;
    --indigo:#9d99f0;  --indigo-tint:#191831;

    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 12px 32px -24px rgba(0,0,0,.95);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 18px 44px -26px rgba(0,0,0,1);
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* A component with its own `display` beats the user-agent rule for [hidden],
   which silently breaks every JavaScript toggle in the app. Restore it once,
   here, rather than remembering it on each component. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); padding: 10px 14px; z-index: 20;
}
.skip-link:focus { left: 8px; top: 8px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar { background: var(--surface); border-bottom: 1px solid var(--rule); }
.topbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-top: 10px; padding-bottom: 10px; }
.brand { font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.topbar__account { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar__who { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .topbar__who { display: none; } }

.nav { display: flex; flex-wrap: wrap; gap: 2px; }
.nav__link {
  padding: 6px 10px; border-radius: var(--radius);
  font-size: 14px; color: var(--ink-2); text-decoration: none;
}
.nav__link:hover { background: var(--surface-2); }
.nav__link.is-active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }

.main { padding-top: 24px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }

.footer { border-top: 1px solid var(--rule); background: var(--surface); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 14px; padding-bottom: 14px; font-size: 12px; color: var(--muted); }
.footer__inner a { color: var(--muted); text-decoration: none; }
.footer__inner a:hover { color: var(--ink); }
.footer__spacer { flex: 1; }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1 { font-size: 22px; line-height: 1.2; letter-spacing: -.015em; margin: 0; }
h2 { font-size: 15px; margin: 0; }
h3 { font-size: 14px; margin: 0 0 6px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.page-head__sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.prose { max-width: 68ch; }
.prose p { margin: 0 0 1em; }
.prose h2 { font-size: 16px; margin: 28px 0 8px; }
.prose ul { margin: 0 0 1em; padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }
.todo { color: var(--muted); font-size: 13px; font-style: italic; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); }
.card__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--rule);
}
.card__title { font-size: 14px; font-weight: 600; }
.card__sub { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.card__body { padding: 18px; }
.card--accent { border-color: var(--brand); background: var(--brand-tint); }

.grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .grid--sidebar { grid-template-columns: minmax(0,1fr) 370px; } }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; }
.stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stat__value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat__hint { font-size: 11px; color: var(--muted); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--brand); color: #fff; font: inherit; font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--brand-dark); color: #fff; }
.btn--sm { padding: 5px 10px; font-size: 12.5px; }
.btn--secondary { background: var(--surface); color: var(--ink-2); border-color: var(--rule); }
.btn--secondary:hover { background: var(--surface-2); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--muted); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--danger { background: var(--bad); }
.btn--danger:hover { background: var(--bad); filter: brightness(.92); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.inline { display: inline; }

@media (prefers-color-scheme: dark) {
  .btn, .btn:hover { color: #08110f; }
  .btn--secondary, .btn--ghost { color: var(--ink-2); }
  .btn--secondary:hover, .btn--ghost:hover { color: var(--ink); }
  .btn--danger, .btn--danger:hover { color: #180a0a; }
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field__label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field__req { color: var(--bad); margin-left: 2px; }
.field__hint { margin: 0; font-size: 12px; color: var(--muted); }
.field__error { margin: 0; font-size: 12px; font-weight: 500; color: var(--bad); }

.input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px;
}
.input--auto { width: auto; }
.input.is-invalid { border-color: var(--bad); }
.input::placeholder { color: var(--faint); }

.row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.row--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 560px) { .row, .row--3 { grid-template-columns: 1fr; } }

.check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink-2); }
.check input { margin-top: 3px; flex: none; }
.fieldset {
  display: flex; flex-direction: column; gap: 12px; margin: 0;
  padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sunk);
}
.fieldset legend { padding: 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }

.picker { display: flex; align-items: center; gap: 8px; }
.picker__label { font-size: 12px; color: var(--muted); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert { padding: 10px 14px; border: 1px solid; border-radius: var(--radius); font-size: 14px; }
.alert--success { border-color: var(--ok);    background: var(--ok-tint);    color: var(--ok); }
.alert--error   { border-color: var(--bad);   background: var(--bad-tint);   color: var(--bad); }
.alert--warning { border-color: var(--warn);  background: var(--warn-tint);  color: var(--warn); }
.alert--info    { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.badge--neutral { background: var(--surface-2); color: var(--ink-2); }
.badge--muted   { background: var(--surface-2); color: var(--faint); }
.badge--ok      { background: var(--ok-tint);     color: var(--ok); }
.badge--warn    { background: var(--warn-tint);   color: var(--warn); }
.badge--bad     { background: var(--bad-tint);    color: var(--bad); }
.badge--info    { background: var(--info-tint);   color: var(--info); }
.badge--brand   { background: var(--brand-tint);  color: var(--brand); }
.badge--purple  { background: var(--purple-tint); color: var(--purple); }
.badge--indigo  { background: var(--indigo-tint); color: var(--indigo); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; padding: 9px 12px; background: var(--sunk);
  border-bottom: 1px solid var(--rule);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); white-space: nowrap;
}
table.data td { padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; color: var(--ink-2); }
table.data tr:last-child td { border-bottom: 0; }
table.data td strong { color: var(--ink); font-weight: 600; }
.cell-actions { text-align: right; white-space: nowrap; }

/* ── Lists ───────────────────────────────────────────────────────────────── */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.list > li:first-child { padding-top: 0; }
.list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.list__main { flex: 1; min-width: 0; }
.list__title { font-weight: 500; }
.list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.list__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.done-title { color: var(--faint); text-decoration: line-through; }

.empty {
  border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: 28px 16px; text-align: center;
}
.empty__title { font-weight: 500; }
.empty__hint { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* ── AI plan ─────────────────────────────────────────────────────────────── */
.plan { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan > li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.plan__pos {
  flex: none; width: 22px; height: 22px; border-radius: 999px;
  background: var(--surface); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.plan__reason { display: block; font-size: 12px; color: var(--muted); }
.source-tag { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--rule); }
.tab {
  padding: 8px 12px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: 14px; color: var(--ink-2); text-decoration: none; cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.is-active { border-bottom-color: var(--brand); color: var(--brand); font-weight: 600; }
.tab__count { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--warn-tint); color: var(--warn); font-size: 11px; }

.stars { display: inline-flex; gap: 1px; }
.star { border: 0; background: none; padding: 0 1px; font-size: 16px; line-height: 1; color: var(--faint); cursor: pointer; }
.star.is-on { color: #e2a52b; }

.auth { max-width: 460px; margin: 48px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 18px; }
.auth__head h1 { margin-bottom: 4px; }

/* ==========================================================================
   Marketplace
   ========================================================================== */

/* Monaco red. Used for the identity only — the interface accent stays teal,
   so brand and interaction never compete for the same meaning. */
:root { --monaco: #ce1126; --monaco-ink: #a30d1e; }
@media (prefers-color-scheme: dark) { :root { --monaco: #f2606f; --monaco-ink: #ff8a95; } }

.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand__mark { width: 26px; height: 26px; border-radius: 7px; flex: none; display: block; }
.brand__name { font-weight: 600; letter-spacing: -.01em; }

.hero {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.hero h1 { font-size: 24px; }
.hero__lead { margin: 0; max-width: 62ch; color: var(--ink-2); }
.hero__split { display: flex; flex-wrap: wrap; gap: 10px; }

/* Category chips */
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); font-size: 13px; text-decoration: none;
}
.cat:hover { border-color: var(--brand); color: var(--brand); }
.cat.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }
@media (prefers-color-scheme: dark) { .cat.is-active { color: #08110f; } }
.cat__count { font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }
.cat__icon { font-size: 15px; line-height: 1; }

/* Listing + request cards */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  padding: 16px; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
a.tile:hover { border-color: var(--brand); transform: translateY(-1px); }
.tile__head { display: flex; align-items: flex-start; gap: 10px; }
.tile__icon {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.tile__title { font-weight: 600; line-height: 1.3; }
.tile__cat { font-size: 12px; color: var(--muted); }
.tile__body { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.tile__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule-soft);
  font-size: 12px; color: var(--muted);
}
.tile__price { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Trust signals */
.trust { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.trust--verified { color: var(--ok); font-weight: 500; }
.rating { color: #d99a1f; font-variant-numeric: tabular-nums; }

/* Offers */
.offer { border: 1px solid var(--rule); border-radius: 8px; padding: 14px; background: var(--surface); }
.offer + .offer { margin-top: 12px; }
.offer--accepted { border-color: var(--ok); background: var(--ok-tint); }
.offer--declined { opacity: .55; }
.offer__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.offer__who { font-weight: 600; }
.offer__price { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.offer__msg { margin: 8px 0 0; font-size: 14px; white-space: pre-wrap; }
.offer__contact {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--surface); border: 1px dashed var(--ok); font-size: 13.5px;
}

.meta-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.meta-row strong { color: var(--ink); font-weight: 500; }

.notice-inline {
  display: flex; gap: 10px; align-items: flex-start;
  border-left: 3px solid var(--brand); padding: 2px 0 2px 12px;
  font-size: 13px; color: var(--muted);
}

/* ==========================================================================
   Messaging
   ========================================================================== */

.thread-wrap { display: grid; gap: 20px; }
@media (min-width: 900px) { .thread-wrap { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } }

.convs { list-style: none; margin: 0; padding: 0; }
.conv {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-bottom: 1px solid var(--rule-soft);
  text-decoration: none; color: inherit;
}
.conv:last-child { border-bottom: 0; }
.conv:hover { background: var(--surface-2); }
.conv.is-active { background: var(--brand-tint); }
.conv__avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; text-transform: uppercase;
}
@media (prefers-color-scheme: dark) { .conv__avatar { color: #08110f; } }
.conv__main { flex: 1; min-width: 0; }
.conv__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.conv__name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv__time { font-size: 11px; color: var(--faint); white-space: nowrap; }
.conv__preview {
  margin: 2px 0 0; font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv__unread {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) { .conv__unread { color: #08110f; } }

/* The conversation itself */
.chat { display: flex; flex-direction: column; min-height: 420px; }
.chat__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--rule);
}
.chat__body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; max-height: 58vh; overflow-y: auto;
  background: var(--sunk);
}
.bubble { max-width: min(78%, 520px); display: flex; flex-direction: column; gap: 4px; }
.bubble--in  { align-self: flex-start; }
.bubble--out { align-self: flex-end; }
.bubble__body {
  padding: 9px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.bubble--in .bubble__body {
  background: var(--surface); border: 1px solid var(--rule);
  border-bottom-left-radius: 4px;
}
.bubble--out .bubble__body {
  background: var(--brand); color: #fff; border-bottom-right-radius: 4px;
}
@media (prefers-color-scheme: dark) { .bubble--out .bubble__body { color: #08110f; } }
.bubble__meta { font-size: 11px; color: var(--faint); padding: 0 4px; }
.bubble--out .bubble__meta { text-align: right; }
.bubble__img {
  display: block; max-width: 100%; border-radius: 12px; border: 1px solid var(--rule);
  background: var(--surface-2);
}
.bubble__file {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--rule);
  font-size: 13.5px; text-decoration: none; color: var(--ink);
}
.day-sep {
  align-self: center; padding: 3px 12px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); font-size: 11.5px;
}

/* Composer */
.composer { border-top: 1px solid var(--rule); padding: 12px 14px; background: var(--surface); }
.composer__row { display: flex; align-items: flex-end; gap: 8px; }
.composer textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 160px;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 20px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px;
}
.icon-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink-2);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn--send { background: var(--brand); border-color: var(--brand); color: #fff; }
.icon-btn--send:hover { background: var(--brand-dark); }
@media (prefers-color-scheme: dark) { .icon-btn--send, .icon-btn--send:hover { color: #08110f; } }

.emoji-panel {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
  margin-bottom: 10px; padding: 8px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-2);
  max-height: 168px; overflow-y: auto;
}
@media (max-width: 520px) { .emoji-panel { grid-template-columns: repeat(8, 1fr); } }
.emoji-panel button {
  border: 0; background: none; font-size: 19px; line-height: 1;
  padding: 5px 0; border-radius: 6px; cursor: pointer;
}
.emoji-panel button:hover { background: var(--surface); }

.attach-preview {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-2);
  font-size: 13px;
}
.attach-preview img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; }
.attach-preview button { margin-left: auto; }

/* ==========================================================================
   Profiles, orders, payments
   ========================================================================== */

.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.profile-avatar {
  flex: none; width: 62px; height: 62px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 600; text-transform: uppercase;
}
@media (prefers-color-scheme: dark) { .profile-avatar { color: #08110f; } }

.money { font-variant-numeric: tabular-nums; font-weight: 600; }
.money--in  { color: var(--ok); }
.money--due { color: var(--warn); }

.pay-box {
  border: 1px solid var(--rule); border-radius: 8px; padding: 16px;
  background: var(--sunk);
}
.pay-ref {
  font-family: var(--mono); font-size: 17px; letter-spacing: .04em;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 8px 12px; display: inline-block; user-select: all;
}
.iban {
  font-family: var(--mono); font-size: 15px; letter-spacing: .06em;
  user-select: all; word-break: break-all;
}
.pay-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.pay-step {
  flex: 1 1 120px; padding: 10px 12px; border-top: 3px solid var(--rule);
  font-size: 12.5px; color: var(--muted);
}
.pay-step.is-done { border-top-color: var(--ok); color: var(--ok); font-weight: 500; }
.pay-step.is-now  { border-top-color: var(--brand); color: var(--brand); font-weight: 600; }

.fee-note {
  display: flex; gap: 8px; align-items: flex-start;
  border: 1px solid var(--ok); background: var(--ok-tint); color: var(--ok);
  border-radius: var(--radius); padding: 10px 12px; font-size: 13px;
}

/* ── Reviews ─────────────────────────────────────────────────────────────── */
.rating-big { font-size: 34px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.bars { display: flex; flex-direction: column; gap: 5px; }
.bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.bar-row__track { flex: 1; height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-row__fill { height: 100%; background: #d99a1f; border-radius: 999px; }
.bar-row__n { width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }

.review { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.review:last-child { border-bottom: 0; }
.review__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: baseline; }
.review__body { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; }

/* Star picker — radio buttons underneath, so it works without JavaScript. */
.star-pick { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-pick label {
  font-size: 30px; line-height: 1; color: var(--rule); cursor: pointer;
  transition: color .1s;
}
.star-pick input:checked ~ label,
.star-pick label:hover,
.star-pick label:hover ~ label { color: #d99a1f; }
.star-pick input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.sealed {
  display: flex; gap: 8px; align-items: flex-start;
  border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: 12px 14px; font-size: 13px; color: var(--muted); background: var(--sunk);
}

/* ==========================================================================
   Maison layer — typography, refinements and the components added for
   locations, languages and address disclosure. Appended last so it wins
   without any selector arms race above.
   ========================================================================== */

/* ── Typography ──────────────────────────────────────────────────────────── */
body { font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }

h1, h2, h3, .card__title, .brand__name, .stat__value, .empty__title {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem); line-height: 1.12; text-wrap: balance; }
h2 { font-size: 1.06rem; line-height: 1.25; }
h3 { font-size: .98rem; }
.card__title { font-size: 1.02rem; font-weight: 500; }
.page-head__sub, .card__sub { font-family: var(--font); }
.page-head { padding-bottom: 4px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 4px; }
.page-head__sub { max-width: 62ch; }

/* Anything with a value attached reads in the utility face. */
.num, .money, .rating, .stat__value, .tile__price, .offer__price, .iban, .pay-ref, .bar-row__n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.money, .tile__price, .offer__price { color: var(--brass); font-weight: 500; }
.rating, .star.is-on, .stars { color: var(--brass); }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
}
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand__name { font-size: 1.04rem; letter-spacing: -.01em; }
.brand__mark { border-radius: var(--radius-sm); }
.topbar__who {
  font-size: 12px; color: var(--muted);
  padding-right: 10px; border-right: 1px solid var(--rule-soft);
}

.nav__link { border-radius: 999px; }

/* ── Language switcher ───────────────────────────────────────────────────── */
.langs {
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 2px; background: var(--sunk);
}
.langs__opt {
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--muted); text-decoration: none;
}
.langs__opt:hover { color: var(--ink); }
.langs__opt.is-active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }
@media (max-width: 520px) { .langs { order: 3; } }

/* ── Cards, tiles, hero ──────────────────────────────────────────────────── */
.tile__cat { display: block; margin-top: 2px; }
.hero > div > h1 { margin-bottom: 12px; }
.card { border-radius: var(--radius); }
.card__head { padding: 14px 18px; }
.card__count { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: -.02em; }

.hero {
  border-radius: var(--radius);
  padding: 30px 28px;
  background:
    radial-gradient(120% 140% at 92% 0%, var(--brand-tint) 0%, transparent 58%),
    var(--surface);
}
.hero h1 { font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.5rem); max-width: 22ch; }
.hero__lead { font-size: 1.02rem; max-width: 58ch; }

.tile { border-radius: var(--radius); }
a.tile:hover { border-color: var(--brand); box-shadow: var(--shadow-lift); }
.tile__title { font-family: var(--display); font-size: 1.02rem; font-weight: 500; }

.cat { font-size: 13px; }
.cat.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.cat.is-active .cat__count { color: rgba(255,255,255,.75); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { border-radius: 999px; font-weight: 500; }
/* Ghost + danger is a quiet destructive action: red label, no red slab. */
.btn--ghost.btn--danger,
.btn--secondary.btn--danger { background: transparent; color: var(--bad); border-color: transparent; }
.btn--ghost.btn--danger:hover,
.btn--secondary.btn--danger:hover { background: var(--bad-tint); color: var(--bad); }

/* ── Pills ───────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--rule); color: var(--muted); background: var(--surface-2);
  vertical-align: middle;
}
.pill--brass { border-color: var(--brass); color: var(--brass); background: var(--brass-tint); }
.pill--brand { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }

/* ── Checkboxes that sit on their own line ───────────────────────────────── */
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.check input { width: 16px; height: 16px; accent-color: var(--brand); }

.input--file { padding: 8px 10px; font-size: 13px; background: var(--sunk); }
.field__hint--standalone {
  margin: 0 0 4px; padding: 12px 14px;
  background: var(--sunk); border: 1px dashed var(--rule); border-radius: var(--radius-sm);
}

/* ── Locations list ──────────────────────────────────────────────────────── */
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
/* Photo beside the details, actions on their own row underneath — so a long
   button label in French or German never squeezes the address into a column
   one word wide. */
.place {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 8px 16px; align-items: start;
  padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface);
}
.place--default { border-color: var(--brass); background: linear-gradient(0deg, var(--brass-tint), var(--brass-tint)) padding-box, var(--surface); }

.place__photo {
  width: 108px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--sunk); border: 1px solid var(--rule-soft);
  display: flex; align-items: center; justify-content: center;
}
.place__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place__glyph { font-size: 30px; opacity: .55; }

.place__name { font-family: var(--display); font-size: 1.08rem; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.place__address { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.place__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--muted); }
.place__access { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.place__accessLabel {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brass); margin-right: 6px;
}
.place__side {
  grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  padding-top: 4px; border-top: 1px solid var(--rule-soft); margin-top: 4px;
}
.place__side .btn-row { gap: 6px; }

@media (max-width: 720px) {
  .place { grid-template-columns: 84px minmax(0, 1fr); }
  .place__photo { width: 84px; }
  .place__side { grid-column: 1 / -1; }
}

.photo-current { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.photo-current img {
  width: 92px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--rule);
}

/* ── Location picker on the request form ─────────────────────────────────── */
.locpick { border: 0; padding: 0; margin: 0 0 4px; }
.locpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 8px 0 6px; }
.locpick__opt { display: block; cursor: pointer; }
.locpick__opt input { position: absolute; opacity: 0; width: 0; height: 0; }

.locpick__card {
  display: flex; align-items: center; gap: 11px;
  padding: 9px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.locpick__opt:hover .locpick__card { border-color: var(--brand); }
.locpick__opt input:checked + .locpick__card {
  border-color: var(--brand); background: var(--brand-tint); box-shadow: var(--shadow);
}
.locpick__opt input:focus-visible + .locpick__card { outline: 2px solid var(--brand); outline-offset: 2px; }

.locpick__photo {
  flex: 0 0 auto; width: 52px; height: 44px; border-radius: 5px; overflow: hidden;
  background: var(--sunk); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.locpick__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.locpick__text { display: flex; flex-direction: column; min-width: 0; }
.locpick__name { font-weight: 600; font-size: 13.5px; }
.locpick__sub {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Address disclosure box ──────────────────────────────────────────────── */
.locbox {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--brand); border-radius: var(--radius-sm);
  background: var(--brand-tint);
}
.locbox--quiet { border-color: var(--rule); background: var(--sunk); }
.locbox__photo {
  flex: 0 0 auto; width: 104px; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 6px; border: 1px solid var(--rule-soft);
}
.locbox__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.locbox__body { min-width: 0; }
.locbox__label {
  margin: 0 0 6px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
}
.locbox--quiet .locbox__label { color: var(--muted); }
.locbox__address { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.locbox__access { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }
.locbox__accessLabel {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brass); margin-right: 6px;
}
.locbox__note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .locbox { flex-direction: column; } .locbox__photo { width: 100%; } }

/* ── Focus, motion ───────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, .input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   The Monaco scene — colours for the drawing in partials/skyline.php.
   Tokens, so one vector serves both grounds. The values are picked for value
   separation first: sky lightest, headlands mid, rock and old town darkest,
   so the silhouette still reads at thumbnail size.
   ========================================================================== */
:root {
  --sky-top:   #a9c7d4;
  --sky-mid:   #dfd9c8;
  --sky-low:   #f6dcb4;
  --glow:      #f7c583;
  --disc:      #fdeac4;

  --hill-far:  #8fa8ad;
  --hill-mid:  #6c878e;
  --rock:      #3f5860;
  --build-far: #5b757d;
  --build-near:#2f464e;
  --roof:      #b4674a;
  --window:    #ffd98f;

  --sea-far:   #4f7580;
  --sea-near:  #86a7ae;
  --sun-track: #ffe0ab;
  --shimmer:   #ffffff;
  --hull:      #f4f6f3;
  --rigging:   #2b3f46;
  --flag:      #ce1126;

  --hero-ink:   #12262c;
  --hero-ink-2: #2c4a52;
  --hero-wash:  rgba(238, 240, 236, .94);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-top:   #081119;
    --sky-mid:   #14313f;
    --sky-low:   #3d5361;
    --glow:      #e08a45;
    --disc:      #ffcf94;

    --hill-far:  #16303b;
    --hill-mid:  #0f232c;
    --rock:      #060f14;
    --build-far: #123039;
    --build-near:#050d12;
    --roof:      #7a4630;
    --window:    #ffcd7d;

    --sea-far:   #071a23;
    --sea-near:  #030c11;
    --sun-track: #d99552;
    --shimmer:   #6fb0c2;
    --hull:      #1f353d;
    --rigging:   #476a75;
    --flag:      #e8434f;

    --hero-ink:   #eef5f4;
    --hero-ink-2: #b7cdd1;
    --hero-wash:  rgba(13, 18, 20, .92);
  }
}

.scene { position: relative; isolation: isolate; }
.scene__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
.scene__mast   { stroke: var(--rigging); stroke-width: 1.8; stroke-linecap: round; }
.scene__flag   { fill: var(--flag); }
.scene__lights { opacity: .8; }
.roof          { fill: var(--roof); }

/* ── The hero the scene sits behind ──────────────────────────────────────── */
.hero--scene {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
  /* Matches the fade at the foot of the drawing, so the picture dissolves
     into the panel instead of stopping at an edge. */
  background: var(--ground);
  min-height: 430px;
  /* The base .hero stacks in a column; this variant puts the words beside the
     picture, so the direction has to be restated or the text ends up centred. */
  display: flex; flex-direction: row;
  align-items: center;
}
/* Anchored to the right at its natural proportions: the Rock and the palace
   are always whole, and it is the background towers that give way on a narrow
   screen rather than the subject. */
.hero--scene .scene__svg {
  position: absolute; top: 0; right: 0; bottom: 0; left: auto;
  height: 100%; width: auto; max-width: none;
}
.hero--scene .hero__inner {
  position: relative; z-index: 1;
  width: min(58%, 660px);
  padding: 40px 0 40px 38px;
  display: flex; flex-direction: column; gap: 14px;
}
/* The words sit on their own side of the picture: a horizontal wash from the
   left, so the drawing stays visible instead of being blanketed. */
.hero--scene .hero__inner::before {
  content: "";
  position: absolute; inset: -200px -140px -200px -400px;
  background: linear-gradient(to right,
              var(--hero-wash) 0%, var(--hero-wash) 62%, transparent 100%);
  z-index: -1;
}
.hero--scene h1 {
  font-size: clamp(1.85rem, 1.1rem + 2.4vw, 3.1rem);
  line-height: 1.05;
  max-width: 17ch;
  margin: 0;
  color: var(--hero-ink);
  text-wrap: balance;
}
.hero--scene .hero__lead {
  max-width: 44ch;
  font-size: 1.02rem;
  color: var(--hero-ink-2);
  margin: 0;
}
.hero--scene .hero__split { margin-top: 6px; }

.hero__eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand);
}

/* On a narrow screen the picture goes above the words rather than behind. */
@media (max-width: 860px) {
  .hero--scene { min-height: 0; display: block; }
  .hero--scene .scene__svg {
    position: relative; right: auto; height: 200px; width: 100%;
  }
  .hero--scene .hero__inner { width: 100%; padding: 22px 20px 26px; }
  .hero--scene .hero__inner::before {
    inset: -40px -20px -20px -20px;
    background: var(--hero-wash);
  }
  .hero--scene h1 { max-width: 18ch; }
}

/* ── The short band used at the top of the sign-in pages ─────────────────── */
.scene--band { position: relative; height: 210px; overflow: hidden; }

/* ── Sign in and sign up ─────────────────────────────────────────────────── */
.authbody { background: var(--ground); }
/* Centred in the viewport on a tall screen, still scrollable on a short one. */
.authbody { display: flex; align-items: center; justify-content: center; }
.authshell {
  width: 100%;
  max-width: 560px; margin: 0 auto; padding: 26px 20px 40px;
}
.authshell--wide { max-width: 680px; }
.authshell__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.authshell__bar .brand { text-decoration: none; }

/* The drawing fades into --ground at its foot; here the card below is the
   surface colour, so the token is redefined locally and the two meet cleanly. */
.authshell__scene {
  --ground: var(--surface);
  height: 210px;
  border: 1px solid var(--rule);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  overflow: hidden;
  background: var(--ground);
}

/* The card tucks under the picture, so the two read as one panel. */
.authcard {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 26px 24px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.authcard > * { margin: 0; }
.authcard .auth__head h1 { margin: 0 0 4px; }
.authcard .card {
  border: 0; box-shadow: none; background: none; padding: 0 !important;
}

@media (max-width: 560px) {
  .authshell { padding: 18px 14px 40px; }
  .authshell__scene { height: 150px; }
  .authcard { padding: 20px 18px 20px; }
}

.footer { position: relative; }
.footer__inner { position: relative; z-index: 1; padding-top: 26px; padding-bottom: 26px; }

/* ==========================================================================
   The ground the whole app sits on.

   A flat fill leaves a dead slab either side of the content on a wide screen —
   worse in the dark theme, where flat reads as switched-off. So the page gets
   a shallow atmosphere instead: a vertical lift towards the top, and two very
   soft light sources that echo the sunset in the hero. It is deliberately
   quiet; you should feel depth without being able to point at a gradient.
   ========================================================================== */
:root {
  --ground-lift:   #f8f9f5;
  --ground-mid:    #eef1ec;
  --ground-base:   #e4e8e2;
  --ground-deep:   #dde3dd;
  --aura-warm:     rgba(243, 201, 140, .34);
  --aura-cool:     rgba(150, 190, 205, .30);
  --aura-horizon:  rgba(158, 196, 208, .26);
  --coast-ink:     #14201f;
  --coast-opacity: .045;
  --grain-opacity: .030;
  --grain-blend:   multiply;
  --vignette:      rgba(20, 32, 31, .07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground-lift:   #0f2029;
    --ground-mid:    #0a161d;
    --ground-base:   #070e12;
    --ground-deep:   #050a0d;
    --aura-warm:     rgba(214, 141, 74, .20);
    --aura-cool:     rgba(58, 122, 145, .34);
    --aura-horizon:  rgba(46, 106, 130, .42);
    --coast-ink:     #cfe3ea;
    --coast-opacity: .10;
    --grain-opacity: .045;
    --grain-blend:   overlay;
    --vignette:      rgba(0, 0, 0, .38);
  }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* A solid floor under the fixed layer, so nothing shows through on a
     browser that will not paint the decoration. */
  background: var(--ground-base);
}

/*
 * The atmosphere, fixed to the viewport so it stays put while the page scrolls.
 *
 * A flat fill reads as switched-off, particularly on a wide dark screen. This
 * gives the page depth you can feel and not quite point at: a vertical lift
 * that carries all the way down instead of dying a third of the way, two soft
 * light sources echoing the sunset in the hero, the Monaco coastline as a
 * watermark along the bottom, and a fine grain over the lot so a large area of
 * near-black does not band into visible steps.
 */
.ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    /* Sunset side, high and to the right, as in the hero. */
    radial-gradient(62rem 38rem at 88% -10%, var(--aura-warm) 0%, transparent 62%),
    /* Sea light, mid-left, where the page is otherwise emptiest. */
    radial-gradient(58rem 46rem at  4% 34%,  var(--aura-cool) 0%, transparent 66%),
    /* The horizon the coastline sits on. */
    radial-gradient(88rem 44rem at 50% 112%, var(--aura-horizon) 0%, transparent 72%),
    linear-gradient(to bottom,
      var(--ground-lift)  0%,
      var(--ground-mid)  42%,
      var(--ground-base) 82%,
      var(--ground-deep) 100%);
}

/* The coastline, low along the bottom of the viewport. */
.ground__coast {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 168px;
  fill: var(--coast-ink);
  opacity: var(--coast-opacity);
}
@media (max-width: 620px) { .ground__coast { height: 92px; } }

/*
 * Grain. Rendered once as a tiled turbulence and laid over everything at very
 * low opacity — the cheapest honest way to stop a large dark gradient banding
 * into visible steps on an 8-bit panel.
 */
.ground::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
}

/* A vignette settles the edges, so the corners do not read as a hard wall. */
.ground::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 52%, var(--vignette) 100%);
}
/* The main column grows so a short page still pins its footer to the bottom
   instead of leaving a bar of empty ground under it. */
.main { flex: 1 0 auto; }
.footer { flex: 0 0 auto; }

/* The masthead and footer float on that ground rather than sealing it off. */
.topbar {
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
}
@supports not (backdrop-filter: blur(2px)) {
  .topbar { background: var(--surface); }
}
.footer {
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}

/* ── Room to breathe on a large screen ───────────────────────────────────── */
.wrap { max-width: 1280px; padding-left: 24px; padding-right: 24px; }
@media (min-width: 1700px) { .wrap { max-width: 1420px; } }
@media (max-width: 560px)  { .wrap { padding-left: 16px; padding-right: 16px; } }

/* The sign-in pages sit on the same ground — the same fixed `.ground` layer,
   so there is one atmosphere in the application and not two that drift apart. */
.authbody {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ground-base);
}

/* The hero is one panel: the drawing fills it edge to edge, so the panel's own
   background only ever shows as a sliver and is set to the scene's own sky.
   The wash behind the words is drawn from the same sky, which is why it reads
   as haze over the water rather than a grey card laid on top of the picture. */
.hero--scene { background: var(--sky-top); }
:root { --hero-wash: rgba(233, 240, 240, .90); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hero-wash: rgba(7, 16, 23, .90); }
}

/* A fixed background attachment is expensive to composite on touch devices and
   is the usual cause of a scroll that stutters, so small screens get the same
   gradient painted normally. */
@media (max-width: 900px), (hover: none) {
  body, .authbody { background-attachment: scroll; background-size: 100% 100vh; }
}

/* ── Choosing a trade ────────────────────────────────────────────────────── */
.trades { border: 0; padding: 0; margin: 0 0 4px; }
.trades__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin: 8px 0 14px;
}
.trades__opt { display: block; cursor: pointer; }
.trades__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.trades__card {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 13.5px; line-height: 1.25;
  transition: border-color .15s, background .15s;
}
.trades__opt:hover .trades__card { border-color: var(--brand); }
.trades__opt input:checked + .trades__card {
  border-color: var(--brand); background: var(--brand-tint); font-weight: 600;
}
.trades__opt input:focus-visible + .trades__card { outline: 2px solid var(--brand); outline-offset: 2px; }
.trades__icon { font-size: 17px; flex: 0 0 auto; }
.trades__name { min-width: 0; }

/* A single column that still respects the reading width of a form. */
.grid--single { grid-template-columns: minmax(0, 640px); justify-content: start; }

/* ── A photograph in place of the drawing ────────────────────────────────── */
.scene__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* Two scrims, not one. A flat overlay dims the whole picture to make a corner
   of it readable; this darkens the side the words are on and leaves the rest
   of the photograph alone. --dim is set per-install from the settings page. */
.scene__scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(6, 14, 18, calc(var(--dim, .38) + .34)) 0%,
      rgba(6, 14, 18, calc(var(--dim, .38) + .18)) 38%,
      rgba(6, 14, 18, 0) 78%),
    linear-gradient(to top,
      rgba(6, 14, 18, calc(var(--dim, .38) * .6)) 0%,
      rgba(6, 14, 18, 0) 46%);
}

.scene__credit {
  position: absolute; right: 12px; bottom: 10px; z-index: 2;
  font-size: 10.5px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  pointer-events: none;
}

/* Over a photograph the headline is always light: the scrim guarantees a dark
   ground behind it, in both themes, whatever the picture is. */
.hero--scene:has(.scene__photo) .hero__inner::before { display: none; }
.hero--scene:has(.scene__photo) h1,
.hero--scene:has(.scene__photo) .hero__lead { color: #f4f8f7; }
.hero--scene:has(.scene__photo) h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .4); }
.hero--scene:has(.scene__photo) .hero__eyebrow { color: #9fd8e6; }
.hero--scene:has(.scene__photo) .btn--secondary {
  background: rgba(255, 255, 255, .92); color: #10242a; border-color: transparent;
}
.hero--scene:has(.scene__photo) .btn--ghost { color: #dcebe9; }
.hero--scene:has(.scene__photo) .btn--ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* :has() is recent. Without it the wash stays and the text keeps the page ink,
   which is still readable — the layout just loses a little contrast. */
@supports not selector(:has(img)) {
  .scene__scrim { background: linear-gradient(to right,
      rgba(6, 14, 18, .55) 0%, rgba(6, 14, 18, .2) 52%, rgba(6, 14, 18, 0) 84%); }
}

.authshell__scene .scene__photo { border-radius: inherit; }

/* The upload block on the settings page. */
.heroset { display: flex; flex-direction: column; gap: 14px; }
.heroset__preview {
  position: relative; height: 190px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--rule); background: var(--sunk);
}
.heroset__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.heroset__empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 13px; color: var(--muted); text-align: center; padding: 0 24px;
}

/* On a narrow screen the words run the full width of the picture, so the
   left-to-right scrim is no use — the whole thing gets an even wash instead. */
@media (max-width: 860px) {
  .scene__scrim {
    background:
      linear-gradient(to bottom,
        rgba(6, 14, 18, calc(var(--dim, .38) + .22)) 0%,
        rgba(6, 14, 18, calc(var(--dim, .38) + .40)) 100%);
  }
  .hero--scene:has(.scene__photo) .hero__inner { padding-top: 26px; }
}

.verifybar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.verifybar span { flex: 1 1 320px; }

.review--hidden { opacity: .62; }
.review--hidden .review__body { text-decoration: line-through; text-decoration-color: var(--faint); }

/* ── Shared access: who else may see a location ──────────────────────────── */
.stack { display: grid; gap: 18px; align-content: start; }

.place__owner { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }

.card--share { border-color: var(--brand); }
.card--share .card__head { background: var(--brand-tint); border-radius: 8px 8px 0 0; }
.card__close {
  margin-left: auto; text-decoration: none; color: var(--muted);
  font-size: 20px; line-height: 1; padding: 0 4px; border-radius: var(--radius-sm);
}
.card__close:hover { background: var(--surface-2); color: var(--ink); }

.people { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 8px; }
.person {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface);
}
.person--pending { border-style: dashed; background: transparent; }
.person__body { flex: 1 1 auto; min-width: 0; }
.person__name { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.person__meta {
  margin: 3px 0 0; font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere;
}
.person form { flex: 0 0 auto; }

.empty--tight { padding: 14px 0; }
.form--tight { border-top: 1px solid var(--rule); padding-top: 16px; }

/* ── A short notice above a form ─────────────────────────────────────────── */
.notice {
  border: 1px solid var(--rule); border-left: 3px solid var(--brand);
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 16px;
}
.notice--invite { border-left-color: var(--brass); background: var(--brass-tint); }
.notice__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.notice__body { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* ── The monthly report ──────────────────────────────────────────────────── */
.report {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: var(--shadow); padding: 28px 30px 22px;
}
.report__head {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
  justify-content: space-between; padding-bottom: 18px; border-bottom: 2px solid var(--ink);
}
.report__eyebrow {
  margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.report__title { font-family: var(--display); font-size: 1.7rem; margin: 4px 0 2px; line-height: 1.15; }
.report__where { margin: 0; font-size: 13px; color: var(--muted); }
.report__period { text-align: right; }
.report__month { font-family: var(--display); font-size: 1.15rem; margin: 0; }
.report__issued { margin: 2px 0 0; font-size: 12px; color: var(--muted); }

.report__alert, .report__within {
  margin: 18px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px;
}
.report__alert  { background: var(--bad-tint); color: var(--bad); border: 1px solid var(--bad); }
.report__within { background: var(--ok-tint);  color: var(--ok);  border: 1px solid var(--ok); }

.report__figures {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin: 20px 0 0; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  overflow: hidden;
}
.figure { background: var(--surface); padding: 14px 16px; }
.figure__label { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.figure__value {
  margin: 6px 0 3px; font-family: var(--display); font-size: 1.5rem;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.figure__value--due { color: var(--brass); }
.figure__hint { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.budgetline { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; }
.budgetbar {
  flex: 1; height: 10px; background: var(--surface-2);
  border-radius: 999px; overflow: hidden;
}
.budgetbar__fill { height: 100%; background: var(--brand); border-radius: 999px; }
.budgetbar--over .budgetbar__fill { background: var(--bad); }
.budgetline__caption {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums;
}
.budgetline--over .budgetline__caption { color: var(--bad); }

.report__block { margin: 26px 0 0; }
.report__h {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--rule);
}
.report__two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.report__foot {
  margin: 26px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: 11px; color: var(--muted); text-align: center;
}

.spendbars {
  display: flex; flex-direction: row; align-items: flex-end;
  gap: 6px; height: 110px;
}
.spendbars__col { flex: 1 1 0; display: flex; flex-direction: column; align-items: stretch; height: 100%; min-width: 0; }
.spendbars__slot { flex: 1 1 auto; display: flex; align-items: flex-end; }
.spendbars__bar {
  width: 100%; background: var(--brand-tint); border: 1px solid var(--brand);
  border-radius: 3px 3px 0 0; margin-top: auto;
}
.spendbars__bar--zero { background: var(--rule); border-color: transparent; border-radius: 999px; }
.spendbars__col--now .spendbars__bar { background: var(--brand); }
.spendbars__tick { font-size: 10px; color: var(--muted); margin-top: 4px; text-align: center; }

.tick { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.tick > li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--rule-soft);
}
.tick > li:last-child { border-bottom: 0; }
.tick__what { color: var(--ink-2); }
.tick__when { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tick--open .tick__what::before { content: '○ '; color: var(--muted); }
.tick:not(.tick--open) .tick__what::before { content: '✓ '; color: var(--ok); }

td.right, th.right { text-align: right; }

@media (max-width: 760px) {
  .report { padding: 20px 16px 16px; }
  .report__figures { grid-template-columns: 1fr 1fr; }
  .report__two { grid-template-columns: 1fr; gap: 18px; }
  .report__period { text-align: left; }
}

/* ── Print: the report alone, on white ───────────────────────────────────── */
@media print {
  .no-print, .topbar, .nav, .footer, .skip-link, .flash, .verify-banner, .hero,
  .budget-alert, .ground { display: none !important; }
  body { background: #fff; }
  .report {
    border: 0; box-shadow: none; padding: 0;
    background: #fff; color: #000;
  }
  .report__block, .report__two { break-inside: avoid; }
  table.data { font-size: 11pt; }
  a[href]::after { content: ''; }
}

/* ── Over-budget notice ──────────────────────────────────────────────────── */
.budget-alert {
  border: 1px solid var(--brass); border-left: 3px solid var(--brass);
  background: var(--brass-tint); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 18px;
}
.budget-alert__head { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.budget-alert__list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.budget-alert__list a { color: var(--ink); font-weight: 600; }

/* ── Equipment and papers ────────────────────────────────────────────────── */
.pill--bad { border-color: var(--bad); color: var(--bad); background: var(--bad-tint); }

.kit { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kit__item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface);
}
.kit__body { flex: 1 1 auto; min-width: 0; }
.kit__name {
  margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.kit__meta, .kit__dates {
  margin: 3px 0 0; font-size: 12.5px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.kit__dates strong { color: var(--ink-2); font-weight: 600; }
.kit__notes { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.kit__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 5px; }

.papers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.paper {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.paper__glyph { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.paper__body { flex: 1 1 auto; min-width: 0; }
.paper__title {
  margin: 0; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.paper__title a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.paper__title a:hover { text-decoration: underline; }
.paper__meta { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.paper__notes { margin: 5px 0 0; font-size: 13px; color: var(--ink-2); }

@media (max-width: 760px) {
  .kit__item { flex-direction: column; }
  .kit__side { flex-direction: row; flex-wrap: wrap; }
}
.evidence { list-style: none; margin: 0 0 8px; padding: 0; font-size: 12.5px; }
.evidence > li { margin-bottom: 3px; }
.evidence a { color: var(--brand); }
.evidence .small { display: block; }
.verifyform { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }