* { box-sizing: border-box; }
:root { font-family: Arial, sans-serif; color: #27392e; background: #f8f5ef; line-height: 1.5; }
body { margin: 0; }
.shell { width: min(100%, 35rem); margin: auto; padding-inline: clamp(.75rem, 4vw, 1.5rem); }
.top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-block: 1.25rem; border-block-end: 1px solid #e5ded2; margin-block-end: .85rem; }
a { color: inherit; }
.brand { font-size: 1.15rem; font-weight: bold; text-decoration: none; }
.badge { background: #f5e4bd; padding: .25rem .65rem; border-radius: 2rem; font-size: .8rem; }
.panel { background: #fffdf9; border: 1px solid #e5ded2; border-radius: 1.15rem; padding: 1rem; margin-block: .65rem; }
.projection { background: #efe6f6; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.7rem, 7vw, 2.35rem); line-height: 1.15; margin-block: .25rem .5rem; }
h2 { font-size: 1rem; margin-block-end: .3rem; }
.muted, footer { color: #526055; font-size: .875rem; }
.summary, .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.summary div { background: #ffffffa6; border-radius: .7rem; padding: .55rem; }
.summary strong { display: block; font-size: 1.12rem; }
.back { display: inline-flex; min-height: 44px; align-items: center; }
.row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem .65rem; padding-block: .55rem; }
.row + .row { border-block-start: 1px solid #eee7db; }
.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.filters label { display: grid; gap: .25rem; font-size: .875rem; font-weight: bold; }
.filters label:first-child { grid-column: 1 / -1; }
.filters input, .filters select { min-width: 0; width: 100%; min-height: 44px; border: 1px solid #b6bfb2; border-radius: .65rem; padding: .5rem; background: #fff; color: inherit; font: inherit; }
.document-card { display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-decoration: none; border-inline-start: .3rem solid #9aaa94; }
.document-card:hover { background: #f2f5ee; }
details { padding-block: .35rem; }
details + details { border-block-start: 1px solid #eee7db; }
summary { cursor: pointer; padding-block: .55rem; }
footer { padding-block: 1rem; }
:focus-visible { outline: 2px solid #48624f; outline-offset: 3px; }

/* Shared layout and controls */
:root { background: #f3efe7; }
body { min-height: 100vh; background: radial-gradient(ellipse at top right, #e2eaf8, transparent 34rem); }
.shell { width: min(100%, 57rem); padding-block-end: 5.75rem; }
.top { min-height: 4.8rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; line-height: 1.12; }
.brand small { display: block; color: #526055; font-size: .72rem; margin-block-start: .32rem; font-weight: normal; }
.brand-mark { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; border-radius: .85rem; background: #203657; color: #f9dc99; font-size: 1.45rem; }
.panel { box-shadow: 0 3px 12px #293f3609; }
.app-nav { position: fixed; z-index: 1; inset: auto 0 0; margin-inline: auto; width: min(100%, 57rem); display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .25rem; padding: .35rem .35rem max(.35rem,env(safe-area-inset-bottom)); background: #fffdf8; border: 1px solid #ded7ca; box-shadow: 0 -4px 20px #263e3510; }
.app-nav a { display: grid; place-items: center; min-height: 44px; border-radius: .55rem; text-decoration: none; font-size: clamp(.68rem, 2.9vw, .95rem); }
.app-nav a[aria-current] { background: #dce7f8; font-weight: bold; }
.archive-intro { display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: #2d5042; color: #fff; border: 0; border-radius: .65rem; padding: .55rem .85rem; font: inherit; font-weight: bold; text-decoration: none; cursor: pointer; }
.action:hover { background: #214237; }
.action:disabled { opacity: .65; cursor: wait; }
.archive-form { margin-block: .8rem; }
.archive-form .action { align-self: end; }
.archive-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-block-start: .85rem; }
.archive-preview { display: block; width: 100%; max-height: 32rem; object-fit: contain; margin-block-start: 1rem; }
.archive-remove { background: transparent; border: 0; color: #87352d; font: inherit; cursor: pointer; padding-inline: 0; text-decoration: underline; }
.document-card > div { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 44rem) {
  .app-nav { border-radius: 1rem 1rem 0 0; }
}

:root { font-family: Heebo, Arial, sans-serif; }
.mail-sources { margin-block: 1.25rem; }
.source-card > span { font-size: .85rem; flex-shrink: 0; }
.archive-form input[type="file"] { overflow: hidden; }

.calendar { color: #203657; }
.calendar-heading { display: flex; justify-content: space-between; align-items: center; margin-block: .5rem; }
.calendar-heading a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: .7rem; background: #eaf0fa; text-decoration: none; }
.calendar-grid { width: 100%; table-layout: fixed; border-spacing: 3px; margin-block-end: .7rem; }
.calendar-grid td { padding: 0; }
.calendar-grid th { font-size: .8rem; }
.calendar-weekday, .calendar-day { display: grid; place-items: center; }
.calendar-weekday { font-size: .8rem; font-weight: bold; }
.calendar-day { min-height: 44px; border-radius: .45rem; text-decoration: none; }
.calendar-day.reserved { background: #dae7fc; color: #193b71; font-weight: bold; }
.calendar-day.pending { background: #fff0c9; color: #684b10; font-weight: bold; }
.calendar-day.reference { box-shadow: inset 0 0 0 1px #7c96bf; }
.calendar-day[href]:hover { box-shadow: inset 0 0 0 2px #3a649c; }
.payout-note { margin-block-start: .75rem; }

:root {
  --ink: #372620; --wash: #f2ded0; --accent: #7f3829; --deep: #56261e;
  --mark: #ffe0a8; --chip: #f5e1d5; --surface: #fffaf4;
}
:root[data-palette="plum"] {
  --ink: #302337; --wash: #e9dcec; --accent: #644273; --deep: #3d2748;
  --mark: #f3defb; --chip: #eedff2; --surface: #fffbff;
}
:root[data-palette="graphite"] {
  --ink: #2a2825; --wash: #ede4cf; --accent: #4c4a45; --deep: #272624;
  --mark: #ffe2a1; --chip: #eee2c8; --surface: #fffdf7;
}
:root { color: var(--ink); background: var(--surface); }
body { background: radial-gradient(ellipse at top right, var(--wash), transparent 36rem); }
.brand-mark, .action { background: var(--deep); color: var(--mark); }
.action:hover { background: var(--accent); }
.panel, .app-nav { background: var(--surface); }
.app-nav a[aria-current], .calendar-heading a { background: var(--chip); color: var(--ink); }
.top-settings { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }
.palette-picker { display: grid; gap: .12rem; color: var(--ink); font-size: .75rem; }
.palette-picker select { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--accent); border-radius: .5rem; padding: .38rem; }
.metric-link { position: relative; border: 1px solid #fff5; background: #fff1; border-radius: .7rem; padding: .75rem; text-decoration: none; font-size: .8rem; }
.metric-link:hover { background: #fff2; }
.metric-link span { display: block; color: var(--mark); }
.report-row { display: block; padding-inline: .55rem; border-block-end: 1px solid var(--chip); text-decoration: none; }
.report-row:hover { background: var(--chip); }
.calendar { color: var(--ink); }
.calendar-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .8rem; padding: 0; margin: .7rem 0; list-style: none; font-size: .78rem; }
.calendar-legend li { display: flex; align-items: center; gap: .28rem; }
.calendar-legend span { width: .7rem; height: .7rem; border-radius: .2rem; }
.calendar .available { background: #f2f0eb; color: #544e45; }
.calendar .occupied { background: #385648; color: #fff; }
.calendar .reserved { background: #ded9f7; color: #3e3068; }
.calendar .pending { background: #f9e6ac; color: #6d490e; }
.calendar-day.occupied { font-weight: bold; }
@media (max-width: 27rem) {
  .top-settings { flex-direction: column; align-items: flex-end; }
}

:root[data-palette="stone"] {
  --ink: #252842; --wash: #eae5dc; --accent: #464b70; --deep: #292d49;
  --mark: #fff0ca; --chip: #ececf5; --surface: #fffdf8;
}
:root { scroll-padding-block-end: calc(4.5rem + env(safe-area-inset-bottom)); }
.shell { padding-block-end: calc(5rem + env(safe-area-inset-bottom)); }
.home-report { padding: clamp(.8rem, 4vw, 1.5rem); }
.report-heading { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; margin-block-end: .25rem; }
.report-heading h2 { font-size: 1.25rem; margin: 0; }
.report-period { background: var(--chip); padding: .15rem .5rem; border-radius: .35rem; font-size: .85rem; }
.report-metrics { margin-block-start: .75rem; }
.home-report .metric-link { color: var(--ink); background: var(--chip); border-color: transparent; min-width: 0; font-size: .85rem; }
.home-report .metric-link strong { font-size: clamp(1.05rem, 4.7vw, 1.6rem); font-variant-numeric: tabular-nums; }
.home-report .metric-link span { color: inherit; }
.home-report .primary-metric { background: var(--deep); color: #fff; }
.home-report .metric-link:hover { border-color: var(--accent); }
.home-report .primary-metric:hover { border-color: var(--mark); }
.calendar-month { display: grid; text-align: center; }
.calendar-month small { font-size: .78rem; }
.calendar .reserved { box-shadow: inset 0 -3px #574480; }
.calendar .pending { border-block-end: 2px dashed #795715; }
.calendar .occupied { border-block-end: 3px double #fff; }
.calendar-legend span { box-sizing: border-box; }
.calendar-day, .app-nav a { overflow-wrap: anywhere; }
.expense-months { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .75rem; }
.expense-months a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .65rem; border: 1px solid var(--line); border-radius: .55rem; text-decoration: none; }
.expense-months a[aria-current] { background: var(--deep); color: #fff; }
.invoice-preview { display: block; width: 100%; height: clamp(26rem, 74vh, 52rem); border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); }
@media (min-width: 44rem) {
  .report-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

:root {
  --muted: #535768; --line: #d8d0c6; --field: #fff; --error: #862823;
  --ring: #465a87; --forecast: #f1ebf7;
}
:root[data-palette="dark"] {
  color-scheme: dark;
  --ink: #f7f1e9; --wash: #282d45; --accent: #ccd0fa; --deep: #3e456d;
  --mark: #ffe3a8; --chip: #343953; --surface: #1d2030;
  --muted: #d3cede; --line: #616780; --field: #262a3d; --error: #ffb4aa;
  --ring: #d2d6ff; --forecast: #343047;
}
.top, .panel, .app-nav, .filters input, .filters select, .row + .row, details + details { border-color: var(--line); }
.badge, .summary div { color: var(--ink); background: var(--chip); }
.muted, .brand small { color: var(--muted); }
.filters input, .filters select { background: var(--field); font-size: 1rem; }
.projection { background: var(--forecast); }
.document-card { border-inline-start-color: var(--accent); }
.document-card:hover { background: var(--chip); }
:focus-visible { outline-color: var(--ring); }
#archive-error, .archive-remove { color: var(--error); }
#archive-error:empty { margin: 0; }
.palette-picker, .brand small, .calendar-legend { font-size: .8125rem; }
.palette-picker select, summary { min-height: 44px; }
.visually-hidden, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; inset: .75rem .75rem auto auto; z-index: 3; background: var(--surface); color: var(--ink); padding: .65rem; }
.top { padding-block-start: max(1.25rem, env(safe-area-inset-top)); }
.report-row:active, .calendar-day[href]:active, .metric-link:active, .action:active, .app-nav a:active { opacity: .75; }
a, button { touch-action: manipulation; }
@media (prefers-reduced-motion: no-preference) {
  a, button { transition: background-color 140ms, opacity 140ms; }
}
@media (min-width: 64rem) {
  .shell { width: min(100%, 70rem); }
  .app-nav { position: sticky; grid-template-columns: 1fr; width: 10rem; inset: 1rem auto auto; align-self: start; margin: 0; border-radius: .8rem; }
  .shell { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0 1rem; padding-inline-start: 1.5rem; }
  .top { grid-column: 1 / -1; }
  #view { grid-column: 2; grid-row: 2; }
  .app-nav { grid-column: 1; grid-row: 2; }
}

/* Home banner and property photo */
:root { --terra: #b86042; --terra-text: #a2492e; --honey: #dc994d; --sand: #c2a17f; }
:root[data-palette="dark"] { --terra-text: #ffb29a; }
.banner { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin-block: 1rem .75rem; padding: 1.1rem 1.4rem; padding-inline-start: 1.6rem; border-radius: 1.1rem; background: var(--banner-bg, var(--chip)); border: 1px solid var(--line); }
.banner::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: .55rem; background: var(--terra); }
.banner h1 { margin-block: .1rem .3rem; font-size: clamp(1.5rem, 6.5vw, 3rem); font-weight: 800; letter-spacing: -.02em; color: var(--deep); }
.banner-kicker { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--terra-text); }
.banner-meta { margin: 0; font-size: .9rem; color: var(--muted); }
.banner a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
.banner-art { display: block; width: clamp(6rem, 30vw, 12rem); height: auto; }
.property-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: 15rem; object-fit: cover; border-radius: .85rem; margin-block-end: .75rem; }
:root[data-palette="olive"] .app-nav a[aria-current] { box-shadow: inset 0 -3px var(--terra); }

/* Simplified home: month, four numbers, two-state calendar, stay card */
.top-actions { display: flex; align-items: center; gap: .4rem; }
.gear { display: grid; place-items: center; width: 44px; height: 44px; border-radius: .7rem; color: var(--ink); }
.home-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 1.15rem; margin-block: .25rem .75rem; }
.month-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block: .25rem .6rem; }
.month-head a { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: .7rem; background: var(--chip); color: var(--ink); text-decoration: none; font-size: 1.1rem; }
.month-title { display: grid; text-align: center; gap: .1rem; }
.month-title h1 { margin: 0; font-size: clamp(1.4rem, 6vw, 1.9rem); font-weight: 700; color: var(--ink); }
.month-title small { font-size: .8125rem; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-block-end: .75rem; }
.kpi { display: block; min-width: 0; padding: .7rem .9rem; border-radius: .95rem; background: var(--chip); color: var(--ink); text-decoration: none; }
.kpi span { display: block; font-size: .8125rem; color: var(--muted); }
.kpi strong { display: block; font-size: clamp(1.3rem, 6vw, 1.7rem); font-variant-numeric: tabular-nums; }
.kpi.primary { background: var(--deep); color: #fff; }
.kpi.primary span { color: var(--mark); }
@media (min-width: 44rem) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.month-cal { padding: .75rem; }
.day { display: grid; place-items: center; min-height: 44px; border-radius: .55rem; text-decoration: none; color: var(--ink); font-size: .95rem; }
.day.free { background: var(--field); border: 1px solid var(--line); }
.day.booked { background: var(--deep); color: #fff; font-weight: 700; }
.day.today { box-shadow: inset 0 0 0 2px var(--terra); font-weight: 700; }
.day.selected { box-shadow: inset 0 0 0 3px var(--mark); }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: .35rem; }
.swatch { width: .8rem; height: .8rem; border-radius: .25rem; box-sizing: border-box; }
.swatch.booked { background: var(--deep); }
.swatch.free { background: var(--field); border: 1px solid var(--line); }
.swatch.today { border: 2px solid var(--terra); }
.stay-card { margin-block-start: .75rem; }
.stay-kicker { margin: 0 0 .15rem; font-size: .8125rem; font-weight: 700; color: var(--terra-text); }
.stay-card h2 { margin: 0; font-size: 1.15rem; }
.stay-chip { background: var(--chip); padding: .15rem .55rem; border-radius: .4rem; font-size: .8125rem; }
.stay-hint { margin-block: .75rem; }
@media (max-width: 63.999rem) { .app-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Olive and cream palette (default) */
:root[data-palette="olive"] {
  --ink: #26372c; --wash: #eadfca; --accent: #26372c; --deep: #375542;
  --mark: #f0d29b; --chip: #ece3d2; --surface: #f6f0e6;
  --muted: #5a5f54; --line: #ddd2bd; --field: #fffdf8; --error: #862823;
  --ring: #375542; --forecast: #f3e6c8; --banner-bg: var(--surface);
}