/* The client kit CRM: one app for every client, in the client's look.
   Structure ported from the Saltvig demo (website-next/demo/stay/stay.css v3.8, the owner's view block); it reads only --crm-* tokens.
   The tokens are filled at runtime from clients.theme (crm.js › skin()); the values below are the neutral default.
   Mr. Brightside appears only as the small signature in the bar. Fonts: Hanken Grotesk, Big Shoulders, IBM Plex Mono (OFL, fonts/). */

@font-face { font-family: "Kit Display"; src: url("fonts/kit-display.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Kit Sans"; src: url("fonts/kit-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Kit Mono"; src: url("fonts/kit-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kit Mono"; src: url("fonts/kit-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--crm-bg); color: var(--crm-ink); font-family: var(--crm-font-ui); font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

:root {
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --crm-bg: #F3F1EC;
  --crm-surface: #FAF9F6;
  --crm-ink: #1C1F22;
  --crm-muted: #4E5257;
  --crm-line: color-mix(in srgb, #1C1F22 18%, transparent);
  --crm-band-bg: #E2DED4;
  --crm-band-ink: #1C1F22;
  --crm-band-grain: none;
  --crm-rail-bg: #1C1F22;
  --crm-rail-ink: #E4E2DC;
  --crm-rail-sel: #E9E4D6;
  --crm-rail-sel-ink: #1C1F22;
  --crm-primary-bg: #1C1F22;
  --crm-primary-ink: #F3F1EC;
  --crm-req: #E9E4D6;
  --crm-req-line: #1C1F22;
  --crm-booked: radial-gradient(#1C1F22 1px, transparent 1.25px) 0 0 / 4px 4px, color-mix(in srgb, #1C1F22 10%, transparent);
  --crm-clash: repeating-linear-gradient(135deg, #8E2A17 0 2px, transparent 2px 5px);
  --crm-err: #8E2A17;
  --crm-span: #DDD8CB;
  --crm-block: repeating-linear-gradient(135deg, color-mix(in srgb, #1C1F22 40%, transparent) 0 1.5px, transparent 1.5px 6px), color-mix(in srgb, #1C1F22 5%, #FAF9F6);
  --crm-heat: #1C1F22;
  --crm-font-name: "Kit Sans", "Helvetica Neue", Arial, sans-serif;
  --crm-font-ui: "Kit Sans", "Helvetica Neue", Arial, sans-serif;
  --crm-font-data: "Kit Mono", ui-monospace, Menlo, monospace;
  --crm-name-weight: 800;
  --crm-name-case: none;
  --crm-radius: 0px;
  --crm-radius-btn: 2px;
}

/* Structure: reads only --crm-* tokens. */
/* Structure: reads only --crm-* tokens. */
.sv-owner { min-height: 100vh; background: var(--crm-bg); color: var(--crm-ink); font-family: var(--crm-font-ui); outline: none; }
.crm-data { font-family: var(--crm-font-data); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.crm-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.crm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 12px 20px; background: var(--crm-rail-bg); color: var(--crm-rail-ink); border-bottom: 1px solid color-mix(in srgb, var(--crm-rail-ink) 16%, transparent); }
.crm-brand { display: flex; align-items: baseline; gap: 10px; }
.crm-brand__logo { display: block; height: 30px; width: auto; max-width: 160px; object-fit: contain; }
.crm-brand__mark { font-family: var(--crm-font-name); font-weight: var(--crm-name-weight); text-transform: var(--crm-name-case); font-size: 1.5rem; line-height: 1; }
.crm-tabs { display: flex; gap: 4px; margin-right: auto; }
.crm-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; font: inherit; font-size: 0.9375rem; font-weight: 600; color: inherit; background: none; border: 0; border-radius: var(--crm-radius-btn); cursor: pointer; opacity: 0.8; transition: background-color 180ms ease, opacity 180ms ease; }
.crm-tab:hover { opacity: 1; background: color-mix(in srgb, var(--crm-rail-ink) 8%, transparent); }
.crm-tab[aria-current="page"] { opacity: 1; background: var(--crm-rail-sel); color: var(--crm-rail-sel-ink); }
.crm-tab:focus-visible { outline: 2px solid var(--crm-rail-sel); outline-offset: 2px; }
.crm-tab__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--crm-rail-sel); }
.crm-top .crm-sig { margin: 0; padding: 0; }
.crm-switch { display: flex; padding: 2px; font-size: 0.8125rem; font-weight: 600; border: 1px solid color-mix(in srgb, var(--crm-rail-ink) 30%, transparent); border-radius: 999px; }
.crm-switch > * { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; color: inherit; text-decoration: none; border-radius: 999px; }
.crm-switch a:hover { background: color-mix(in srgb, var(--crm-rail-ink) 10%, transparent); }
.crm-switch a:focus-visible { outline: 2px solid var(--crm-rail-sel); outline-offset: 2px; }
.crm-switch [aria-current] { background: var(--crm-rail-sel); color: var(--crm-rail-sel-ink); }
/* The rail's colour belongs to the grid's first column, so it runs the full height of the view at any length;
   the list inside is sticky and scrolls on its own when it is longer than the screen. */
.crm-panes { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100vh - 65px); background: linear-gradient(to right, var(--crm-rail-bg) 300px, transparent 300px); }
.crm-list { position: sticky; top: 0; align-self: start; max-height: 100dvh; min-height: calc(100vh - 65px); box-sizing: border-box; overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; background: var(--crm-rail-bg); color: var(--crm-rail-ink); }
.crm-group { display: flex; align-items: center; gap: 8px; margin: 12px 6px 4px; font-size: 0.75rem; font-weight: 600; opacity: 0.75; }
.crm-group:first-child { margin-top: 0; }
.crm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; padding: 12px; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: var(--crm-radius); cursor: pointer; transition: background-color 180ms ease; }
.crm-row:hover { background: color-mix(in srgb, var(--crm-rail-ink) 8%, transparent); }
.crm-row[aria-current="true"] { background: var(--crm-rail-sel); color: var(--crm-rail-sel-ink); }
.crm-row:focus-visible { outline: 2px solid var(--crm-rail-sel); outline-offset: 2px; }
.crm-row__n { display: flex; align-items: center; gap: 8px; }
.crm-row__s { grid-column: 1 / -1; font-size: 0.8125rem; opacity: 0.8; }
.crm-row__w { grid-row: 1; grid-column: 2; font-size: 0.75rem; opacity: 0.75; }
.crm-row.is-sample { opacity: 0.72; }
.crm-row.is-sample[aria-current="true"] { opacity: 1; }
.crm-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; font-size: 0.6875rem; font-weight: 600; border: 1px solid currentColor; border-radius: var(--crm-radius-btn); }
.crm-tag--new { background: var(--crm-primary-bg); color: var(--crm-primary-ink); border-color: var(--crm-primary-bg); }
.crm-list .crm-tag--new { background: var(--crm-rail-sel); color: var(--crm-rail-sel-ink); border-color: var(--crm-rail-sel); }
.crm-row[aria-current="true"] .crm-tag--new { background: var(--crm-rail-sel-ink); color: var(--crm-rail-sel); }
.crm-slot { margin: 0 2px; padding: 14px; border: 1px dashed color-mix(in srgb, var(--crm-rail-ink) 40%, transparent); font-size: 0.875rem; display: grid; gap: 8px; }
.crm-slot__t { font-weight: 700; }
.crm-link { padding: 0; font: inherit; font-weight: 600; color: inherit; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.crm-link { font-size: 0.875rem; min-height: 32px; }
.crm-sig { margin-top: auto; padding: 18px 6px 0; display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-size: 0.6875rem; opacity: 0.6; }
.crm-sig img { height: 12px; width: auto; }
.crm-detail { min-width: 0; outline: none; }
.crm-empty { padding: 64px 40px; max-width: 34rem; display: grid; gap: 10px; }
.crm-empty__t { font-family: var(--crm-font-name); font-weight: var(--crm-name-weight); text-transform: var(--crm-name-case); font-size: 3rem; line-height: 0.9; }

.crm-band { padding: 26px 40px 30px; background: var(--crm-band-grain), var(--crm-band-bg); color: var(--crm-band-ink); }
.crm-back { display: none; align-items: center; gap: 6px; margin-bottom: 14px; padding: 8px 0; font: inherit; font-size: 0.875rem; color: inherit; background: none; border: 0; cursor: pointer; }
.crm-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.8125rem; }
.crm-name { margin: 14px 0 10px; font-family: var(--crm-font-name); font-weight: var(--crm-name-weight); text-transform: var(--crm-name-case); font-size: 5.5rem; line-height: 0.84; letter-spacing: -0.005em; }
.crm-mask { display: inline-block; overflow: clip; overflow-clip-margin: 0.04em; vertical-align: bottom; }
.crm-mask > span { display: inline-block; }
.crm-sub { font-size: 1.0625rem; }
.crm-acts { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 22px; }
.crm-call { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 24px 0 18px; background: var(--crm-primary-bg); color: var(--crm-primary-ink); border-radius: var(--crm-radius-btn); text-decoration: none; transition: transform 160ms var(--expo); }
.crm-call b { display: block; font-size: 1rem; }
.crm-call small { display: block; font-size: 0.8125rem; opacity: 0.85; }
.crm-call:active { transform: scale(0.98); }
.crm-call.is-off { opacity: 0.45; cursor: not-allowed; }
.crm-mail { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; font-weight: 600; text-underline-offset: 4px; }
.crm-called { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.875rem; }

.crm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 24px; padding: 24px 40px 48px; }
.crm-box { min-width: 0; padding: 24px; background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: var(--crm-radius); }
.crm-box--cal { grid-column: 1 / -1; }
.crm-box__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.crm-h { font-size: 0.8125rem; font-weight: 700; line-height: 24px; margin-bottom: 16px; }
.crm-box__head { margin-bottom: 16px; min-height: 24px; }
.crm-box__head .crm-h { margin-bottom: 0; }
.crm-muted { color: var(--crm-muted); font-size: 0.875rem; }
.crm-k { font-size: 0.75rem; color: var(--crm-muted); }
.crm-next { font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 8px; text-wrap: pretty; }
.crm-sent { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--crm-line); }
.crm-sent summary { cursor: pointer; font-weight: 600; font-size: 0.9375rem; }
.crm-sent__s { margin-top: 12px; font-weight: 600; }
.crm-mailpv { display: block; margin-top: 8px; max-height: 34rem; overflow: auto; border: 1px solid var(--crm-line); border-radius: var(--crm-radius); }
.crm-sent__b { margin-top: 8px; white-space: pre-line; font-size: 0.875rem; line-height: 1.55; max-height: 22rem; overflow: auto; }
.crm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0; }
.crm-facts div { display: grid; gap: 2px; min-width: 0; }
.crm-facts .is-wide { grid-column: 1 / -1; }
.crm-facts dt { font-size: 0.75rem; color: var(--crm-muted); }
.crm-facts dt .crm-tag { margin-left: 6px; }
.crm-facts dd { margin: 0; display: grid; }
.crm-facts small { font-size: 0.875rem; color: var(--crm-muted); }
.crm-price { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--crm-line); }
.crm-total { font-size: 1.75rem; line-height: 1.1; white-space: nowrap; }
.crm-price__n { font-size: 0.875rem; }
.crm-msg { margin: 18px 0 0; font-size: 1.0625rem; }
.crm-msg cite { display: block; margin-top: 4px; font-style: normal; font-size: 0.8125rem; color: var(--crm-muted); }
.crm-terms { display: grid; gap: 4px; margin-bottom: 16px; }
.crm-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font: inherit; font-weight: 600; color: var(--crm-ink); background: none; border: 1px solid var(--crm-ink); border-radius: var(--crm-radius-btn); cursor: pointer; transition: background-color 180ms ease; }
.crm-btn:hover { background: color-mix(in srgb, var(--crm-ink) 6%, transparent); }
.crm-btn[aria-expanded="true"] { background: var(--crm-ink); color: var(--crm-surface); }
.crm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.crm-pay__preview { margin-top: 16px; display: grid; gap: 10px; }
.crm-pay__flag { justify-self: start; padding: 3px 8px; font-size: 0.75rem; font-weight: 600; border: 1px dashed var(--crm-ink); }
.crm-pay__mail { display: grid; gap: 8px; padding: 18px; background: var(--crm-bg); border: 1px solid var(--crm-line); }
.crm-pay__t { font-weight: 700; font-size: 1.125rem; }
.crm-pay__btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; margin-top: 4px; background: var(--crm-primary-bg); color: var(--crm-primary-ink); border-radius: var(--crm-radius-btn); opacity: 0.55; cursor: not-allowed; }

.crm-tl__scroll { overflow-x: auto; margin: 6px -4px 0; padding: 0 4px 4px; }
.crm-tl { display: grid; gap: 3px; min-width: 560px; }
.crm-tl__row { display: grid; grid-template-columns: 96px repeat(21, minmax(0, 1fr)); gap: 3px; align-items: center; }
.crm-tl__head { align-items: end; padding-bottom: 4px; }
.crm-tl__d { display: grid; justify-items: center; font-size: 0.6875rem; color: var(--crm-muted); line-height: 1.3; }
.crm-tl__d b { font-weight: 500; color: var(--crm-ink); }
.crm-tl__d.is-mon { box-shadow: inset 1px 0 0 var(--crm-line); }
.crm-tl__h { font-weight: 600; font-size: 0.875rem; }
.crm-n { display: block; height: 30px; border: 1px solid var(--crm-line); border-radius: calc(var(--crm-radius) / 2); }
.crm-n.is-booked { background: var(--crm-booked); border-color: transparent; }
.crm-n.is-req { background: var(--crm-req); border: 1.5px solid var(--crm-req-line); }
.crm-n.is-clash { background: var(--crm-clash), var(--crm-req); border: 1.5px solid var(--crm-err); }
.crm-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 0.8125rem; color: var(--crm-muted); }
.crm-legend span { display: inline-flex; align-items: center; gap: 8px; }
.crm-legend .crm-n { width: 18px; height: 12px; }
.crm-dock { display: none; }

/* Enquiries: a queue you can empty */
.crm-mstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 6px 12px; font-size: 0.75rem; opacity: 0.85; }
.crm-filter { display: flex; gap: 6px; margin-bottom: 8px; padding: 2px 0 6px; background: var(--crm-rail-bg); }
.crm-fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; font: inherit; font-size: 0.8125rem; font-weight: 600; color: inherit; background: none; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 999px; cursor: pointer; }
.crm-fchip .crm-data { opacity: 0.8; }
.crm-fchip[aria-pressed="true"] { color: var(--crm-rail-sel-ink); background: var(--crm-rail-sel); border-color: var(--crm-rail-sel); }
.crm-fchip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.crm-st--new { color: var(--crm-rail-sel-ink); background: var(--crm-rail-sel); border-color: var(--crm-rail-sel); }
.crm-band .crm-st--new, .crm-page .crm-st--new { color: var(--crm-primary-ink); background: var(--crm-primary-bg); border-color: var(--crm-primary-bg); }
.crm-row__n { flex-wrap: wrap; }
.crm-row__w { font-size: 0.8125rem; opacity: 0.9; }
.crm-row__m { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.75rem; opacity: 0.85; }
.crm-sig2 { display: inline-flex; align-items: center; gap: 6px; }
.crm-sig2::before { content: ""; width: 8px; height: 8px; background: var(--crm-rail-sel); }
.crm-sig2.is-taken::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.crm-row[aria-current="true"] .crm-sig2::before { background: currentColor; }
.crm-row[aria-current="true"] .crm-sig2.is-taken::before { background: none; }
.crm-done { display: grid; gap: 4px; margin: 10px 2px; padding: 18px 14px; border: 1px solid color-mix(in srgb, var(--crm-rail-ink) 25%, transparent); font-size: 0.9375rem; }
.crm-done__t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.0625rem; }
.crm-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.crm-col > :last-child { flex: 1; }
.crm-grid--wide { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
.crm-btn { gap: 8px; text-decoration: none; }
.crm-btn--solid { color: var(--crm-primary-ink); background: var(--crm-primary-bg); border-color: var(--crm-primary-bg); }
.crm-btn--solid:hover { background: var(--crm-primary-bg); opacity: 0.92; }
.crm-btn.is-done { cursor: default; }
.crm-band .crm-btn { min-height: 60px; padding: 0 18px; }
.crm-band .crm-btn--quiet { border-color: color-mix(in srgb, var(--crm-band-ink) 45%, transparent); }
.crm-ask { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-ask p { font-weight: 600; margin-right: 4px; }
.crm-band .crm-fchip { border-color: color-mix(in srgb, var(--crm-band-ink) 45%, transparent); }
.crm-acts .crm-form__msg { flex-basis: 100%; }
.crm-acts .crm-form__msg:empty { display: none; }
.crm-box--stay .crm-terms { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--crm-line); }
.crm-sched--strip { min-width: 640px; }
.crm-sched__free.is-quiet { cursor: default; }
.crm-sched__free.is-quiet:hover { background: none; }
.crm-sched__lane { margin-top: -3px; }
.crm-sched__h--lane { font-size: 0.75rem; font-weight: 600; color: var(--crm-muted); }
.crm-sched__h { margin: 0; }
.crm-span.is-req > span { justify-self: end; }
.crm-span.is-req { display: grid; align-items: center; cursor: default; background: var(--crm-req); box-shadow: inset 0 0 0 1.5px var(--crm-req-line); }
.crm-sched__clash { grid-row: 1; z-index: 1; height: 30px; margin: 5px 0; background: var(--crm-clash); pointer-events: none; }
.crm-key.is-clash { background: var(--crm-clash), var(--crm-req); }

/* Settings */
.crm-page--set { max-width: 880px; }
.crm-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.crm-set__sub { margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--crm-line); }
.crm-logo { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; }
.crm-file { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.crm-set__noun { max-width: 280px; margin-bottom: 16px; }

/* v3.4: Today, the month at a glance, availability, unit cards, Insights */
.crm-sect { margin-top: 10px; font-size: 1rem; font-weight: 700; }
.crm-figs.crm-figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm-fig__go { justify-self: start; margin-top: 4px; font-size: 0.8125rem; }
.crm-occ--s > span { font-size: 0.8125rem; }
.crm-occ--s b { font-size: 0.875rem; }
.crm-today__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.crm-today__c .crm-h { display: flex; align-items: center; gap: 8px; }
.crm-today__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; font-size: 0.8125rem; color: var(--crm-primary-ink); background: var(--crm-primary-bg); border-radius: 999px; }
.crm-today__l { display: grid; margin: 0; padding: 0; list-style: none; }
.crm-today__l li + li { border-top: 1px solid var(--crm-line); }
.crm-mini__g { display: grid; gap: 3px; overflow-x: auto; }
.crm-mini__row { display: grid; grid-template-columns: 104px repeat(var(--days), minmax(8px, 1fr)); gap: 2px; align-items: center; min-width: 420px; }
.crm-mini__h { font-size: 0.8125rem; font-weight: 600; }
.crm-mini__c { height: 18px; background: color-mix(in srgb, var(--crm-ink) 5%, var(--crm-surface)); box-shadow: inset 0 0 0 1px var(--crm-line); }
.crm-mini__c.is-booking { background: var(--crm-span); box-shadow: none; }
.crm-mini__c.is-block { background: var(--crm-block); }
.crm-mini__c.is-mine { background: var(--crm-req); box-shadow: inset 0 0 0 1px var(--crm-req-line); }
.crm-mini__c.is-past { opacity: 0.55; }
.crm-mini__c.is-today { outline: 2px solid var(--crm-ink); outline-offset: 1px; }
.crm-mini__days span { font-size: 0.6875rem; color: var(--crm-muted); }
.crm-mini__days .is-today { color: var(--crm-ink); font-weight: 700; }
.crm-av__verdict { margin-bottom: 10px; font-size: 1.0625rem; font-weight: 700; }
.crm-av__scroll { overflow-x: auto; padding-bottom: 4px; }
.crm-av { display: grid; gap: 4px; min-width: calc(var(--days) * 30px); }
.crm-av__days, .crm-av__lane { display: grid; grid-template-columns: repeat(var(--days), minmax(26px, 1fr)); column-gap: 2px; }
.crm-av__days span { display: grid; justify-items: center; font-size: 0.6875rem; line-height: 1.3; color: var(--crm-muted); }
.crm-av__days span b { font-weight: 500; color: var(--crm-ink); }
.crm-av__days span.is-req b { font-weight: 700; }
.crm-av__lane > * { grid-row: 1; }
.crm-av__cell { height: 66px; border: 1px solid var(--crm-line); }
.crm-av__cell.is-clash { background: var(--crm-clash); border-color: transparent; opacity: 0.55; }
.crm-av__b { align-self: start; margin: 5px 0 0; height: 26px; }
.crm-av__r { align-self: end; margin: 0 0 5px; height: 26px; display: grid; align-items: center; cursor: default; }
.crm-av__others { display: grid; gap: 6px; margin: 14px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--crm-line); font-size: 0.9375rem; }
.crm-offer { width: 100%; box-sizing: border-box; padding: 12px; font: inherit; font-size: 0.9375rem; line-height: 1.5; color: var(--crm-ink); background: var(--crm-bg); border: 1px solid var(--crm-line); border-radius: var(--crm-radius-btn); resize: vertical; }
.crm-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 0 0 14px; padding: 0; list-style: none; }
.crm-unit { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--crm-bg); border: 1px solid var(--crm-line); border-radius: var(--crm-radius); }
.crm-unit__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; align-self: start; object-fit: cover; background: var(--crm-band-bg); }
.crm-unit__img--none { display: grid; place-items: center; font-family: var(--crm-font-name); font-weight: var(--crm-name-weight); font-size: 3rem; text-transform: var(--crm-name-case); color: var(--crm-band-ink); }
.crm-unit__body { display: grid; align-content: start; gap: 6px; padding: 14px 16px 16px; }
.crm-unit__n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.0625rem; }
.crm-unit__s, .crm-unit__x { font-size: 0.875rem; color: var(--crm-muted); }
.crm-unit__p { font-size: 0.9375rem; }
.crm-unit__body .crm-btn { justify-self: start; margin-top: 6px; }
.crm-unit--add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; min-height: 160px; font: inherit; font-weight: 700; color: var(--crm-ink); background: none; border: 1.5px dashed color-mix(in srgb, var(--crm-ink) 40%, transparent); cursor: pointer; }
.crm-unit--add:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
.crm-fine { margin-top: 12px; max-width: 60ch; font-size: 0.8125rem; line-height: 1.5; color: var(--crm-muted); }
.crm-period { display: flex; gap: 6px; }
.crm-period .crm-fchip { color: var(--crm-ink); }
.crm-period .crm-fchip[aria-pressed="true"] { color: var(--crm-primary-ink); background: var(--crm-primary-bg); border-color: var(--crm-primary-bg); }
.crm-ins__top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.crm-ins__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.crm-ins__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.crm-look ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.crm-look li { padding-left: 14px; border-left: 2px solid var(--crm-ink); font-size: 0.9375rem; line-height: 1.45; }
.crm-ins__meta { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--crm-muted); }
.crm-bars { position: relative; }
.crm-bars.is-v { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.crm-bars.is-v .crm-bars__i { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1.3em 180px auto; min-width: 0; }
.crm-bars.is-v .crm-bars__track { position: relative; border-bottom: 1px solid var(--crm-line); }
.crm-bars.is-v .crm-bars__m { position: absolute; left: 0; right: 0; bottom: 0; height: var(--v); min-height: 2px; border-radius: 4px 4px 0 0; }
.crm-bars.is-v .crm-bars__k { padding-top: 6px; font-size: 0.75rem; text-align: center; color: var(--crm-muted); }
.crm-bars.is-v .crm-bars__v { order: -1; align-self: end; font-size: 0.75rem; text-align: center; white-space: nowrap; }
.crm-bars.is-h { display: grid; gap: 10px; }
.crm-bars.is-h .crm-bars__i { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.crm-bars.is-h .crm-bars__k { font-size: 0.875rem; }
.crm-bars.is-h .crm-bars__track { position: relative; height: 18px; }
.crm-bars.is-h .crm-bars__m { display: block; width: var(--v); min-width: 2px; height: 100%; border-radius: 0 4px 4px 0; }
.crm-bars.is-h .crm-bars__v { font-size: 0.8125rem; text-align: right; }
.crm-bars__m { position: relative; display: block; background: var(--crm-ink); outline: none; }
.crm-bars__i.is-dim .crm-bars__m { background: color-mix(in srgb, var(--crm-ink) 32%, var(--crm-surface)); }
.crm-bars__m:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
.crm-bars__tip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 3; width: max-content; max-width: 260px; padding: 6px 9px; font-size: 0.75rem; line-height: 1.35; color: var(--crm-rail-ink); background: var(--crm-rail-bg); border-radius: var(--crm-radius-btn); transform: translateX(-50%); pointer-events: none; display: none; }
.crm-bars.is-h .crm-bars__tip { left: auto; right: 0; transform: none; }
.crm-bars__i:hover .crm-bars__tip, .crm-bars__m:focus .crm-bars__tip { display: block; }
.crm-tbl { margin-top: 12px; font-size: 0.875rem; }
.crm-tbl summary { cursor: pointer; font-weight: 600; }
.crm-tbl table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.crm-tbl th, .crm-tbl td { padding: 6px 8px 6px 0; text-align: left; border-bottom: 1px solid var(--crm-line); }

/* v3.5: Now, What happened (who did it), the owner's photo, house pages, the site preview, Insights */
.crm-now.is-waiting { background: var(--crm-req); border-color: var(--crm-req-line); }
.crm-now__w { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; font-size: 1.25rem; line-height: 1.3; }
.crm-now__k { font-size: 0.75rem; font-weight: 700; }
.crm-now__t { font-size: 0.875rem; color: var(--crm-muted); }
.crm-now__act { margin-top: 16px; }
.crm-now__act .crm-call { min-height: 56px; }
.crm-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.crm-steps > li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; }
.crm-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; background: var(--crm-line); }
.crm-steps__dot { width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--crm-ink); background: var(--crm-surface); }
.crm-steps > li.is-auto.is-done .crm-steps__dot { background: var(--crm-primary-bg); border-color: var(--crm-primary-bg); }
.crm-steps > li.is-you.is-done .crm-steps__dot { background: var(--crm-req); border-color: var(--crm-req-line); }
.crm-steps > li:is(.is-todo, .is-coming, .is-skip) { color: var(--crm-muted); }
.crm-steps > li:is(.is-todo, .is-coming, .is-skip) .crm-steps__dot { border-color: color-mix(in srgb, var(--crm-ink) 30%, transparent); border-style: dashed; }
.crm-steps > li.is-skip .crm-steps__x { text-decoration: line-through; }
.crm-steps__b { min-width: 0; }
/* Who | what (wraps in its own column) | when | status: the chip and the title never part, and the time and its tag stay on one line. */
.crm-steps__x { font-weight: 600; }
.crm-steps__t { font-size: 0.8125rem; color: var(--crm-muted); white-space: nowrap; }
.crm-steps__t small { font-size: inherit; }
.crm-steps__d { margin-top: 4px; font-size: 0.875rem; color: var(--crm-muted); }
details.crm-steps__d > summary { cursor: pointer; }
details.crm-steps__d > summary:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
.crm-steps__full { margin-top: 8px; padding: 12px 16px; color: var(--crm-ink); background: var(--crm-bg); border: 1px solid var(--crm-line); }
.crm-steps__ul { margin: 0; padding-left: 18px; }
.crm-steps__key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -8px 0 16px; font-size: 0.8125rem; color: var(--crm-muted); }
.crm-who { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; font-size: 0.6875rem; font-weight: 700; border-radius: 999px; white-space: nowrap; }
.crm-who.is-auto { color: var(--crm-primary-ink); background: var(--crm-primary-bg); }
.crm-who.is-auto .crm-ic { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.crm-who.is-you { padding-left: 2px; color: var(--crm-ink); background: var(--crm-req); box-shadow: inset 0 0 0 1px var(--crm-req-line); }
.crm-who.is-guest { color: var(--crm-muted); box-shadow: inset 0 0 0 1px var(--crm-line); }
.crm-av8 { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; overflow: hidden; border-radius: 50%; object-fit: cover; font-size: 0.5625rem; font-weight: 700; line-height: 1; color: var(--crm-band-ink); background: var(--crm-band-bg); }
.crm-av8--l { width: 72px; height: 72px; font-size: 1.5rem; }
.crm-me .crm-av8 { width: 32px; height: 32px; font-size: 0.75rem; box-shadow: 0 0 0 2px var(--crm-rail-sel); }
.crm-me { display: inline-flex; }
.crm-avrow { display: flex; align-items: flex-start; gap: 16px; }
.crm-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.crm-pics:empty { display: none; }
.crm-pics li { position: relative; display: grid; gap: 4px; }
.crm-pics li.is-drag { opacity: 0.5; }
.crm-pics img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--crm-radius); cursor: grab; }
.crm-pics__cover { position: absolute; top: 6px; left: 6px; color: var(--crm-primary-ink); background: var(--crm-primary-bg); border-color: var(--crm-primary-bg); }
.crm-hl { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.crm-hl legend { margin-bottom: 8px; padding: 0; }
.crm-hl input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 12px; font: inherit; color: var(--crm-ink); background: var(--crm-bg); border: 1px solid color-mix(in srgb, var(--crm-ink) 45%, transparent); border-radius: var(--crm-radius-btn); }
.crm-hl input:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 1px; }
.crm-term { font-size: 0.75rem; line-height: 1.5; color: var(--crm-muted); }
.crm-ins__big { margin-bottom: 16px; font-size: 0.9375rem; }
.crm-ins__big b { margin-right: 8px; font-size: 1.75rem; font-weight: 500; }
.crm-gaps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.crm-gaps li { padding-bottom: 8px; border-bottom: 1px solid var(--crm-line); }
.crm-gaps__more { margin-top: 8px; font-size: 0.875rem; }
section:has(#in-p) .crm-bars.is-h { gap: 16px; }
.crm-cmp__scroll { overflow-x: auto; }
.crm-cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9375rem; }
.crm-cmp th, .crm-cmp td { padding: 12px 16px 12px 0; text-align: right; border-bottom: 1px solid var(--crm-line); }
.crm-cmp th:first-child, .crm-cmp tbody th { text-align: left; }
.crm-cmp tbody th { font-weight: 600; }
.crm-cmp tbody th .crm-tag { margin-left: 8px; }
.crm-cmp__sort { padding: 0; font: inherit; font-size: 0.8125rem; font-weight: 700; color: var(--crm-ink); background: none; border: 0; cursor: pointer; text-align: inherit; }
.crm-cmp__sort:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
.crm-cmp thead th { vertical-align: bottom; }
.crm-fig__n { display: grid; gap: 4px; }
.crm-fig__next { font-size: 0.8125rem; color: var(--crm-muted); }
.crm-occ-line { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.875rem; }
.crm-occ-line b { font-weight: 500; }
@media (min-width: 1100px) { .crm-arrivals--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .crm-arrivals--2 li + li { border-top: 0; } .crm-arrivals--2 li { border-bottom: 1px solid var(--crm-line); } }
.crm-fig .crm-term { margin-top: auto; padding-top: 8px; }
/* Cards in a row are equal height; a card's closing note or table sits at its foot. */
:is(.crm-cols, .crm-ins__top, .crm-ins__pair, .crm-ins__row) > .crm-box { display: flex; flex-direction: column; }
:is(.crm-cols, .crm-ins__top, .crm-ins__pair, .crm-ins__row) > .crm-box > :is(.crm-term, .crm-tbl):last-child { margin-top: auto; padding-top: 16px; }

/* v3.6: reminders, the calendar connection, the board */
.crm-btn--s { min-height: 36px; padding: 0 12px; font-size: 0.875rem; }
.crm-remind__act { margin-top: 8px; }
.crm-remind__note { margin-top: 8px; }
.crm-steps > li.is-remind.is-todo { color: var(--crm-ink); }
.crm-steps > li.is-remind.is-todo .crm-steps__x { color: var(--crm-muted); }
.crm-set__lede { margin: -8px 0 16px; }
.crm-sendby { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-bottom: 8px; }
.crm-toggle.is-off { color: var(--crm-muted); cursor: default; }
.crm-tag--skip { margin-top: 4px; color: var(--crm-muted); }
.crm-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin-bottom: 16px; }
.crm-toggle { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.crm-toggle input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--crm-ink); }
.crm-toggle input:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
.crm-toggle__t { display: grid; gap: 2px; }
.crm-toggle__t small { font-size: 0.8125rem; color: var(--crm-muted); }
.crm-conn { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 0.9375rem; }
.crm-conn__dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--crm-muted); }
.crm-conn__dot.is-on { background: var(--crm-ink); box-shadow: none; }
.crm-reads { margin-top: 4px; }
.crm-vswitch { display: flex; gap: 6px; margin-bottom: 12px; }
.crm-list .crm-vswitch .crm-fchip[aria-pressed="true"], .crm-list .crm-filter .crm-fchip[aria-pressed="true"] { color: var(--crm-rail-sel-ink); }
.crm-page--board .crm-vswitch .crm-fchip { color: var(--crm-ink); }
.crm-page--board .crm-vswitch .crm-fchip[aria-pressed="true"] { color: var(--crm-primary-ink); background: var(--crm-primary-bg); border-color: var(--crm-primary-bg); }
@media (max-width: 899px) {
  .crm-toggles { grid-template-columns: minmax(0, 1fr); }
}

/* v3.7: the Enquiries header, the journey board and its panel, "Can you say yes?", the message editors */
.crm-enqhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 16px 40px; background: var(--crm-bg); border-bottom: 1px solid var(--crm-line); }
.crm-enqhead > div:first-child { margin-right: auto; }
.crm-enqhead__t { font-family: var(--crm-font-name); font-weight: var(--crm-name-weight); text-transform: var(--crm-name-case); font-size: 2rem; line-height: 1; }
.crm-enqhead__m { margin-top: 4px; font-size: 0.8125rem; color: var(--crm-muted); }
.crm-enqhead .crm-note { flex-basis: 100%; order: 3; }
.crm-vswitch { display: inline-flex; margin: 0; padding: 3px; border: 1px solid var(--crm-ink); border-radius: var(--crm-radius-btn); }
.crm-seg2 { min-height: 36px; min-width: 72px; padding: 0 14px; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--crm-ink); background: none; border: 0; border-radius: var(--crm-radius-btn); cursor: pointer; }
.crm-seg2[aria-pressed="true"] { color: var(--crm-surface); background: var(--crm-ink); }
.crm-seg2:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
.crm-panes { min-height: calc(100vh - 65px - 77px); }
.crm-filter { flex-wrap: wrap; }
.crm-filter .crm-fchip { white-space: nowrap; }
.crm-sheet.crm-sheet--panel { width: min(880px, 100vw); }
.crm-panel { min-height: 100%; background: var(--crm-bg); }
.crm-panel__top { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; background: var(--crm-surface); border-bottom: 1px solid var(--crm-line); }
.crm-panel__mv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-right: auto; font-size: 0.875rem; }
.crm-panel__x { margin: 0; }
.crm-panel__in .crm-grid { grid-template-columns: minmax(0, 1fr); padding: 24px; }
.crm-panel__in .crm-band { padding: 24px; }
.crm-panel__in .crm-name { font-size: 3.5rem; }
.crm-panel__in .crm-back { display: none; }
.crm-av__nb { margin: -4px 0 16px; font-size: 0.9375rem; }
.crm-av__label { margin-bottom: 8px; font-size: 0.8125rem; font-weight: 700; }
.crm-av__legend { margin-top: 8px; }
.crm-key.is-req { background: var(--crm-req); border-color: var(--crm-req-line); }
.crm-av__others { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--crm-line); }
.crm-av__others ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.crm-av__one { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--crm-line); }
.crm-msg-ed { border-top: 1px solid var(--crm-line); }
.crm-msg-ed > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; }
.crm-msg-ed > summary:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
.crm-msg-ed__g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 8px 0 24px; }
.crm-msg-ed__f { display: grid; gap: 12px; align-content: start; }
.crm-msg-ed__f .crm-btn { justify-self: start; }
.crm-ph { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-fchip--s { min-height: 28px; padding: 0 8px; font-family: var(--crm-font-data); font-size: 0.75rem; font-weight: 500; color: var(--crm-ink); }
.crm-msgpv { align-self: start; padding: 16px; background: var(--crm-bg); border: 1px solid var(--crm-line); border-radius: var(--crm-radius); }
.crm-msgpv__s { margin: 4px 0 12px; font-weight: 700; }
@media (max-width: 899px) {
  .crm-enqhead { padding: 12px 16px; }
  .crm-enqhead__t { font-size: 1.5rem; }
  .crm-msg-ed__g { grid-template-columns: minmax(0, 1fr); }
  .crm-sheet.crm-sheet--panel { width: 100vw; }
  .crm-panel__in .crm-name { font-size: 2.5rem; }
  .crm-panel__in .crm-grid { padding: 16px 16px 120px; }
  /* Phones: the journey reads top to bottom, one stage under the next; no sideways scroll and no half-hidden column.
     An empty stage shrinks to its header line. */
}
/* In the narrow booking sheet the step header wraps as a line (who, what, then when and status), so the text is never squeezed
   to one word per line by the four-column grid. */
/* The phone tab bar: five tabs fit at 360 px, nothing cut off. */
@media (max-width: 480px) {
  .crm-top .crm-tabs { overflow: visible; gap: 2px; }
  .crm-top .crm-tab { flex: 1 1 auto; min-width: 0; padding: 0 4px; font-size: 0.75rem; }
}

@media (max-width: 899px) {
  .crm-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Phones: time and status drop under the title, in the title's column. */
}

/* Overview and Calendar pages */
.crm-page { max-width: 1240px; margin: 0 auto; padding: 32px 40px 96px; display: grid; gap: 24px; }
.crm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.crm-title { font-family: var(--crm-font-name); font-weight: var(--crm-name-weight); text-transform: var(--crm-name-case); font-size: 4.5rem; line-height: 0.88; }
.crm-date { margin-top: 10px; font-size: 0.875rem; color: var(--crm-muted); }
.crm-head .crm-muted { margin-top: 10px; }
.crm-head__acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.crm-note { margin-top: 6px; font-size: 0.875rem; font-weight: 600; }
.crm-note:empty { display: none; }
.crm-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px 0 16px; font: inherit; font-weight: 700; color: var(--crm-primary-ink); background: var(--crm-primary-bg); border: 0; border-radius: var(--crm-radius-btn); text-decoration: none; cursor: pointer; transition: transform 160ms var(--expo); }
.crm-primary:active { transform: scale(0.98); }
.crm-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.crm-primary--wide { width: 100%; }
.crm-btn--quiet { border-color: color-mix(in srgb, var(--crm-ink) 35%, transparent); }
.crm-btn--icon { width: 44px; padding: 0; justify-content: center; }
.crm-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--crm-line); border: 1px solid var(--crm-line); border-radius: var(--crm-radius); }
.crm-fig { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 24px; background: var(--crm-surface); }
.crm-fig > dd:last-child:has(.crm-fig__go) { margin-top: auto; padding-top: 8px; }
.crm-fig dt { font-size: 0.8125rem; font-weight: 700; }
.crm-fig dd { margin: 0; }
.crm-fig dd > b { font-size: 2.25rem; line-height: 1.05; font-weight: 500; }
.crm-fig__n { font-size: 0.8125rem; color: var(--crm-muted); }
.crm-fig__tag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crm-figs.crm-figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crm-occ { display: grid; gap: 4px; }
.crm-occ > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.9375rem; }
.crm-occ b { font-size: 1.125rem; font-weight: 500; }
.crm-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.crm-arrivals { list-style: none; margin: 0; padding: 0; display: grid; }
.crm-arrivals li + li { border-top: 1px solid var(--crm-line); }
.crm-line { display: grid; gap: 2px; width: calc(100% + 16px); margin: 0 -8px; padding: 12px 8px; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: var(--crm-radius); cursor: pointer; transition: background-color 180ms ease; }
.crm-line:hover { background: color-mix(in srgb, var(--crm-ink) 5%, transparent); }
.crm-line:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 0; }
.crm-line--b { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.crm-line__amt { font-size: 0.9375rem; white-space: nowrap; }
.crm-line__body { display: grid; gap: 2px; min-width: 0; }
.crm-line__n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-line__s { font-size: 0.875rem; color: var(--crm-muted); }
.crm-dateblock { display: grid; justify-items: center; padding: 6px 0; line-height: 1.1; border: 1px solid var(--crm-ink); border-radius: var(--crm-radius-btn); }
.crm-dateblock small { font-size: 0.6875rem; text-transform: uppercase; }
.crm-dateblock b { font-size: 1.375rem; font-weight: 500; }
.crm-slot--light { margin: 0; border-color: color-mix(in srgb, var(--crm-ink) 30%, transparent); }

/* Calendar: one row per unit, one column per night. Bookings are spans; a booking inside a closed period sits on top of its hatch. */
.crm-calnav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.crm-calnav__t { min-width: 15ch; text-align: center; font-size: 0.9375rem; }
.crm-sched__scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 6px; }
.crm-sched { display: grid; gap: 6px; min-width: 840px; }
.crm-sched__row { display: grid; grid-template-columns: 104px repeat(var(--days), minmax(0, 1fr)); column-gap: 2px; }
.crm-sched__head { align-items: end; }
.crm-sched__d { display: grid; justify-items: center; font-size: 0.6875rem; line-height: 1.3; color: var(--crm-muted); }
.crm-sched__d b { font-weight: 500; color: var(--crm-ink); }
.crm-sched__d.is-mon { box-shadow: inset 1px 0 0 var(--crm-line); }
.crm-sched__d.is-first span { font-weight: 700; color: var(--crm-ink); }
.crm-sched__h { grid-column: 1; grid-row: 1; align-self: center; font-size: 0.875rem; font-weight: 600; }
.crm-sched__free { grid-row: 1; height: 40px; border: 1px solid var(--crm-line); cursor: cell; }
.crm-sched__d.is-today b { text-decoration: underline; text-underline-offset: 3px; }
.crm-sched__free.is-past { cursor: default; background: color-mix(in srgb, var(--crm-ink) 4%, transparent); }
.crm-sched__free:not(.is-past):hover { background: color-mix(in srgb, var(--crm-ink) 6%, transparent); }
.crm-sched__list { grid-column: 2 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); column-gap: 2px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.crm-sched__list li { grid-row: 1; display: grid; min-width: 0; }
.crm-span { pointer-events: auto; min-width: 0; height: 30px; margin: 5px 0; padding: 0 6px; font: inherit; font-size: 0.75rem; font-weight: 600; text-align: left; color: var(--crm-ink); background: var(--crm-span); border: 0; border-radius: var(--crm-radius-btn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crm-ink) 28%, transparent); cursor: pointer; transform-origin: left center; }
.crm-span > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.crm-span.is-mine { background: var(--crm-req); box-shadow: inset 0 0 0 1.5px var(--crm-req-line); }
.crm-span.is-block { height: 40px; margin: 0; background: var(--crm-block); }
.crm-span.is-block > span { justify-self: end; width: fit-content; max-width: 100%; padding: 1px 4px; background: var(--crm-surface); }
.crm-span:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 1px; z-index: 1; }
.crm-key { display: inline-block; width: 18px; height: 12px; border: 1px solid var(--crm-line); }
.crm-key.is-booking { background: var(--crm-span); }
.crm-key.is-block { background: var(--crm-block); }
.crm-key.is-mine { background: var(--crm-req); border-color: var(--crm-req-line); }

/* Phone calendar: unit chips, then one month, Monday first. Nights are buttons; stays are bars under the dates. */
.crm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.crm-chip { min-height: 40px; padding: 0 14px; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--crm-ink); background: none; border: 1px solid color-mix(in srgb, var(--crm-ink) 35%, transparent); border-radius: var(--crm-radius-btn); cursor: pointer; }
.crm-chip[aria-pressed="true"] { color: var(--crm-surface); background: var(--crm-ink); border-color: var(--crm-ink); }
.crm-chip:focus-visible, .crm-day:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 1px; z-index: 2; }
.crm-month { display: grid; gap: 3px; }
.crm-month__wk, .crm-month__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 3px; }
.crm-month__wk span { padding-bottom: 4px; font-size: 0.6875rem; text-align: center; color: var(--crm-muted); }
.crm-day { grid-row: 1; display: flex; min-width: 0; min-height: 70px; padding: 4px 5px; font: inherit; font-size: 0.8125rem; color: var(--crm-ink); background: none; border: 1px solid var(--crm-line); border-radius: var(--crm-radius); cursor: pointer; }
.crm-day.is-out { border: 0; }
.crm-day.is-past { color: var(--crm-muted); background: color-mix(in srgb, var(--crm-ink) 4%, transparent); }
.crm-day:disabled { cursor: default; }
.crm-day.is-today span { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.crm-bar { grid-row: 1; z-index: 1; align-self: end; display: flex; align-items: center; min-width: 0; min-height: 40px; margin-bottom: 3px; padding: 3px 5px; font-size: 0.6875rem; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; color: var(--crm-ink); background: var(--crm-span); border-radius: var(--crm-radius-btn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crm-ink) 28%, transparent); pointer-events: none; transform-origin: left center; }
.crm-bar.is-mine { background: var(--crm-req); box-shadow: inset 0 0 0 1.5px var(--crm-req-line); }
.crm-bar.is-block { background: var(--crm-block); }
.crm-bar.is-block > span { padding: 0 3px; background: var(--crm-surface); }
.crm-rest__add { margin-top: 14px; }
.crm-rest__add .crm-primary { width: 100%; }

/* Busiest months: a table, tinted in four steps */
.crm-heat__scroll { overflow-x: auto; margin-top: 4px; }
.crm-heat { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: separate; border-spacing: 3px; font-size: 0.875rem; }
.crm-heat thead th:first-child { width: 104px; text-align: left; }
.crm-heat th { padding: 4px 2px; font-size: 0.8125rem; font-weight: 600; text-align: center; }
.crm-heat th small { font-size: 0.6875rem; font-weight: 400; color: var(--crm-muted); }
.crm-heat tbody th { padding-right: 10px; text-align: left; white-space: nowrap; }
.crm-heat__c { height: 40px; text-align: center; background: color-mix(in srgb, var(--crm-heat) var(--mix), var(--crm-surface)); }
/* Four steps, checked with the dataviz validator (ordinal, light end 2.04:1 on the surface); text 5.2:1 or more on each. */
.crm-heat__c.is-h0 { --mix: 32%; }
.crm-heat__c.is-h1 { --mix: 48%; }
.crm-heat__c.is-h2 { --mix: 66%; color: var(--crm-surface); }
.crm-heat__c.is-h3 { --mix: 90%; color: var(--crm-surface); }
.crm-legend .crm-key { width: 18px; height: 12px; }
.crm-heat--t { min-width: 0; }
.crm-heat--t thead th:first-child { width: 72px; }
.crm-heat--t tbody th { text-align: left; }

/* The sheet: a native dialog, on the right on a desktop, the whole screen on a phone */
.crm-sheet { position: fixed; inset: 0 0 0 auto; width: min(460px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; overflow: auto; color: var(--crm-ink); font-family: var(--crm-font-ui); background: var(--crm-surface); border: 0; border-left: 1px solid var(--crm-line); box-shadow: -18px 0 48px color-mix(in srgb, var(--crm-ink) 18%, transparent); }
.crm-sheet::backdrop { background: color-mix(in srgb, var(--crm-ink) 35%, transparent); }
.crm-sheet__in { display: flex; flex-direction: column; gap: 18px; min-height: 100%; padding: 22px 24px calc(24px + env(safe-area-inset-bottom)); }
.crm-sheet__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.crm-sheet__t { font-family: var(--crm-font-name); font-weight: var(--crm-name-weight); text-transform: var(--crm-name-case); font-size: 2.75rem; line-height: 0.92; overflow-wrap: anywhere; }
.crm-sheet__x { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -10px 0 0; color: inherit; background: none; border: 0; border-radius: var(--crm-radius-btn); cursor: pointer; }
.crm-sheet__x:focus-visible, .crm-btn:focus-visible, .crm-primary:focus-visible, .crm-link:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
.crm-sheet__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.9375rem; }
.crm-sheet__sec { padding-top: 16px; border-top: 1px solid var(--crm-line); }
.crm-sheet__foot { display: grid; gap: 10px; margin-top: auto; padding-top: 8px; }
.crm-saved .crm-ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; }
.crm-saved .crm-ic--check { color: var(--crm-primary-ink); background: var(--crm-primary-bg); stroke-width: 2.4; }
.crm-saved { display: flex; align-items: flex-start; gap: 10px; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.crm-box .crm-saved { margin-top: 4px; font-size: 1rem; }
.crm-form { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.crm-seg { display: grid; grid-template-columns: 1fr 1fr; min-width: 0; margin: 0; padding: 3px; border: 1px solid var(--crm-ink); border-radius: var(--crm-radius-btn); }
.crm-seg label { position: relative; }
.crm-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.crm-seg span { display: grid; place-items: center; min-height: 40px; font-size: 0.9375rem; font-weight: 600; border-radius: var(--crm-radius-btn); }
.crm-seg input:checked + span { color: var(--crm-surface); background: var(--crm-ink); }
.crm-seg input:focus-visible + span { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
.crm-field { display: grid; gap: 6px; min-width: 0; }
.crm-field__l { font-size: 0.8125rem; font-weight: 700; }
.crm-field__h { font-size: 0.8125rem; color: var(--crm-muted); }
.crm-field input, .crm-field select { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 46px; padding: 0 12px; font: inherit; font-size: 1rem; color: var(--crm-ink); background: var(--crm-bg); border: 1px solid color-mix(in srgb, var(--crm-ink) 45%, transparent); border-radius: var(--crm-radius-btn); }
.crm-field input[type="date"] { -webkit-appearance: none; appearance: none; max-width: 100%; line-height: 44px; text-align: left; }
.crm-field input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.4em; }
.crm-field input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }
.crm-field input:focus-visible, .crm-field select:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 1px; }
.crm-form__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 12px; }
.crm-sheet__foot .crm-btn { justify-content: center; min-height: 48px; }
.crm-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.9375rem; cursor: pointer; }
.crm-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--crm-ink); }
.crm-form__msg { min-height: 1.3em; font-size: 0.875rem; }
.crm-form__msg:empty { min-height: 0; }
.crm-form__msg.is-err { color: var(--crm-err); font-weight: 600; }
.crm-flag { padding: 8px 10px; font-size: 0.875rem; font-weight: 600; border: 1px dashed var(--crm-ink); }

@media (max-width: 1099px) {
  .crm-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .crm-top { padding: 10px 14px 8px; }
  .crm-top .crm-sig { margin-left: auto; }
  .crm-top .crm-sig span { display: none; }
  .crm-figs.crm-figs--2 { grid-template-columns: minmax(0, 1fr); }
  .crm-line--b { grid-template-columns: 48px minmax(0, 1fr); }
  .crm-line__amt { grid-column: 2; }
  .crm-tabs { order: 3; width: 100%; margin: 0; }
  .crm-tabs { overflow-x: auto; scrollbar-width: none; }
  .crm-tab { flex: none; justify-content: center; padding: 0 12px; font-size: 0.875rem; }
  .crm-figs.crm-figs--3, .crm-today__g, .crm-ins__top, .crm-ins__row, .crm-ins__pair { grid-template-columns: minmax(0, 1fr); }
  .crm-bars.is-v { gap: 3px; }
  .crm-bars.is-v .crm-bars__i { grid-template-rows: 1.3em 140px auto; }
  .crm-bars.is-v .crm-bars__v { font-size: 0.625rem; }
  .crm-bars.is-v .crm-bars__k { font-size: 0.625rem; }
  .crm-bars.is-h .crm-bars__i { grid-template-columns: 6rem minmax(0, 1fr) auto; }
  .crm-set, .crm-logo { grid-template-columns: minmax(0, 1fr); }
  .crm-page { padding: 24px 16px 120px; gap: 16px; }
  .crm-title { font-size: 3.25rem; }
  .crm-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .crm-sheet { width: 100vw; border-left: 0; }
  .crm-sheet__in { padding: 16px 18px calc(20px + env(safe-area-inset-bottom)); }
  .crm-sheet__t { font-size: 2.25rem; }
}
@media (max-width: 559px) {
  .crm-figs { grid-template-columns: minmax(0, 1fr); }
  .crm-fig { padding: 16px; }
  .crm-fig dd > b { font-size: 1.875rem; }
}
@media (max-width: 899px) {
  .crm-panes { grid-template-columns: minmax(0, 1fr); }
  .crm-panes { background: none; }
  .crm-list { position: static; height: auto; max-height: none; min-height: calc(100vh - 65px); }
  .crm[data-open="detail"] .crm-list, .crm[data-open="list"] .crm-detail { display: none; }
  .crm-back { display: inline-flex; }
  .crm-band { padding: 16px 18px 22px; }
  .crm-name { font-size: 3.5rem; }
  .crm-band .crm-acts .crm-call, .crm-band .crm-acts .crm-act-confirm { display: none; }
  .crm-band .crm-btn { min-height: 44px; }
  .crm-filter { position: sticky; top: 0; z-index: 5; margin-inline: -14px; padding-inline: 14px; }
  .crm-dock .crm-btn { min-height: 60px; flex: 1; justify-content: center; }
  .crm-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 16px 120px; }
  .crm-grid:not(.crm-grid--wide) { padding-bottom: 120px; }
  .crm-col { gap: 16px; }
  .crm-box { padding: 16px; }
  .crm-dock { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--crm-bg); border-top: 1px solid var(--crm-line); }
  .crm-dock .crm-call { flex: 1; justify-content: center; }
  .crm-dock .crm-mail { padding: 0 16px; min-height: 60px; border: 1px solid var(--crm-ink); border-radius: var(--crm-radius-btn); text-decoration: none; }
}

/* The arrival: the row slides into place, the name rises, the asked-for nights fill in order. Once, then still.
   Everything else is feedback, not a moment: a new booking grows along its nights, the sheet slides in. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.still) :is(.crm-span, .crm-bar).is-new { animation: crm-grow 360ms var(--expo) both; }
  html:not(.still) .crm-sheet[open] { animation: crm-sheet 280ms var(--expo) both; }
  html:not(.still) .crm-sheet[open]::backdrop { animation: crm-fade 200ms ease-out both; }
  @keyframes crm-grow { from { transform: scaleX(0); } }
  @keyframes crm-sheet { from { transform: translateX(24px); opacity: 0; } }
  @keyframes crm-fade { from { opacity: 0; } }
  @keyframes crm-in { from { transform: translateY(-14px); opacity: 0; clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
  @keyframes crm-fill { from { transform: scaleY(0.2); opacity: 0; } }
  @keyframes crm-up { from { transform: translateY(12px); opacity: 0; } }
}

/* ================= The client kit: login, closed, not found, the bar's own controls ================= */
.crm-gate { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; background: var(--crm-bg); color: var(--crm-ink); }
.crm-gate__in { align-self: center; width: 100%; max-width: 520px; margin: 0 auto; padding: 48px 24px; display: grid; gap: 20px; }
.crm-gate__logo { max-width: 220px; max-height: 72px; width: auto; height: auto; }
.crm-gate__t { font-family: var(--crm-font-name); font-weight: var(--crm-name-weight); text-transform: var(--crm-name-case); font-size: clamp(2.5rem, 9vw, 4rem); line-height: 0.9; overflow-wrap: anywhere; }
.crm-gate__lede { font-size: 1.0625rem; color: var(--crm-muted); }
.crm-gate form { display: grid; gap: 14px; }
.crm-gate .crm-field input { width: 100%; }
.crm-gate__msg { font-size: 0.9375rem; }
.crm-gate__msg.is-err { color: var(--crm-err); font-weight: 600; }
.crm-gate__msg.is-ok { padding: 14px 16px; background: var(--crm-surface); border: 1px solid var(--crm-line); }
.crm-gate__foot { display: flex; justify-content: center; padding: 20px 24px calc(20px + env(safe-area-inset-bottom)); background: var(--crm-rail-bg); color: var(--crm-rail-ink); }
.crm-gate__foot .crm-sig { margin: 0; }
.crm-brand__logo { display: block; max-height: 32px; width: auto; }
.crm-ro { display: grid; gap: 4px; }
.crm-ro b { font-weight: 600; overflow-wrap: anywhere; }
.crm-set__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.crm-unit__img--photo { object-fit: cover; }
/* The boot shell (2 Oct): the client's bar on their paper, no words, until the app is built (boot.js paints the remembered colours first). */
.crm-loading { min-height: 100vh; }
.crm-loading__bar { height: 64px; background: var(--crm-rail-bg); }
@media (prefers-reduced-motion: no-preference) { #app.is-boot > :not(.crm-loading) { animation: crm-in 180ms ease-out; } @keyframes crm-in { from { opacity: 0; } } }
.crm-mini__days span { white-space: nowrap; }
.crm-facts > div { min-width: 0; } .crm-facts dd, .crm-facts b { overflow-wrap: anywhere; }
/* Phase 4: unit cards carry an Edit button; it sits at the foot of every card, so a row's buttons line up. */
.crm-unit__body { display: flex; flex-direction: column; }
.crm-unit__body > .crm-btn { margin-top: auto; align-self: flex-start; }
.crm-unit__body > :nth-last-child(2) { margin-bottom: 8px; }
.crm-units > li:not(.crm-unit) { display: grid; }

/* ================= Phase 6: the owner's own details, the account, photos as the site shows them ================= */
/* Who is signed in, in the bar: the name and photo open a small menu with the login email and Sign out. */
.crm-me { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: inherit; font: inherit; font-size: 0.875rem; font-weight: 600; }
.crm-me__n { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-mewrap { position: relative; }
.crm-me--btn { padding: 0 10px 0 4px; background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: background-color 180ms ease; }
.crm-me--btn:hover, .crm-me--btn[aria-expanded="true"] { background: color-mix(in srgb, var(--crm-rail-ink) 10%, transparent); }
.crm-me--btn:focus-visible { outline: 2px solid var(--crm-rail-sel); outline-offset: 2px; }
.crm-me__chev { width: 7px; height: 7px; margin: -3px 2px 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; opacity: 0.8; }
.crm-me--btn[aria-expanded="true"] .crm-me__chev { rotate: 225deg; margin-top: 3px; }
.crm-memenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: grid; gap: 2px; width: max-content; min-width: 260px; max-width: min(340px, calc(100vw - 24px)); padding: 8px; color: var(--crm-ink); background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: var(--crm-radius-btn); box-shadow: none; transform-origin: top right; }
@media (prefers-reduced-motion: no-preference) { .crm-memenu:not([hidden]) { animation: crm-menu-in 160ms ease-out; } @keyframes crm-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } } }
.crm-memenu__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crm-memenu__who { padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--crm-line); }
.crm-memenu__who > div { display: grid; min-width: 0; }
.crm-memenu__who small { margin-top: 2px; font-size: 0.75rem; color: var(--crm-muted); }
.crm-memenu__mail { font-size: 0.875rem; overflow-wrap: anywhere; }
.crm-memenu__i { display: flex; align-items: center; min-height: 44px; padding: 0 10px; font: inherit; font-size: 0.9375rem; font-weight: 600; text-align: left; color: inherit; background: none; border: 0; border-radius: var(--crm-radius-btn); cursor: pointer; }
.crm-memenu__i:hover { background: color-mix(in srgb, var(--crm-ink) 6%, transparent); }
.crm-memenu__i:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: -2px; }
.crm-av8--m { width: 44px; height: 44px; font-size: 1rem; }
@media (max-width: 699px) { .crm-me__n, .crm-me__chev { display: none; } .crm-me--btn { padding: 0; } }

/* Settings: editable fields in the business and terms boxes */
.crm-set__wide { grid-column: 1 / -1; }
.crm-set__hint { margin-top: 10px; }
.crm-field input[type="time"] { max-width: 180px; }
@media (max-width: 699px) { .crm-set { grid-template-columns: minmax(0, 1fr); } }

/* The unit editor's photos, at the site's crop (4:3, centred); the cover first and marked */
.crm-pics li.is-cover img { box-shadow: 0 0 0 2px var(--crm-ink); }
.crm-steps__more { padding-left: 34px; list-style: none; }
.crm-file { left: 0; top: 0; }
.crm-gone__h { margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--crm-line); }
.crm-gone .crm-line__n b, .crm-gone .crm-line__amt { text-decoration: line-through; text-decoration-thickness: 1px; }
.crm-tag--gone { color: var(--crm-muted); }
.crm-heat__c.is-none { background: none; box-shadow: inset 0 0 0 1px var(--crm-line); color: var(--crm-muted); }  /* a month with nothing booked reads as empty, not as low */
.crm-st--cancelled { text-decoration: line-through; text-decoration-thickness: 1px; }
.crm-canc__g { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px 40px; align-items: start; }
@media (max-width: 899px) { .crm-canc__g { grid-template-columns: minmax(0, 1fr); } }

/* ================= Round 2: the apartment editor, a split view ================= */
/* Wide sheet: the form on the left, a live preview of the guest's page on the right; one column with Edit / Preview on a phone. */
.crm-sheet.crm-sheet--unit { width: min(1180px, 100vw); }
.crm-ued { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; align-items: start; }
.crm-ued__tabs { display: none; }
.crm-ued__side { position: sticky; top: 0; align-self: start; }
.crm-ued__pv { display: grid; gap: 12px; padding: 20px; background: var(--crm-bg); border: 1px solid var(--crm-line); }
@media (max-width: 899px) {
  .crm-ued { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .crm-ued__tabs { display: flex; justify-self: start; }
  .crm-ued[data-show="edit"] .crm-ued__side, .crm-ued[data-show="preview"] .crm-ued__form { display: none; }
  .crm-ued__side { position: static; }
}
/* The preview, in the site's own vocabulary: the name in condensed caps, a mono line, the gallery at 4:3 (wide first, then pairs). */
.crm-pv__name { font-family: "Kit Display", "Arial Narrow", Impact, sans-serif; font-weight: 900; text-transform: uppercase; font-size: 2.75rem; line-height: 0.88; overflow-wrap: anywhere; }
.crm-pv__glance { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--crm-muted); }
.crm-pv__gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.crm-pv__gal li.is-wide { grid-column: 1 / -1; }
.crm-pv__gal img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.crm-pv__none { display: grid; place-items: center; aspect-ratio: 4 / 3; font-size: 0.875rem; color: var(--crm-muted); background: var(--crm-band-bg); }
.crm-pv__price { padding-bottom: 10px; border-bottom: 2px solid var(--crm-ink); font-size: 0.875rem; }
.crm-pv__price b { font-size: 1.5rem; font-weight: 500; }
.crm-pv__desc { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.crm-pv__desc.is-empty { font-weight: 400; color: var(--crm-muted); }
.crm-pv__hl { display: grid; gap: 2px; font-size: 0.875rem; }
.crm-pv__hl li::before { content: "✳ "; color: var(--crm-muted); }

/* Photo tiles: drag to reorder; the cover marked; one small ••• menu per photo, no rows of arrow buttons. */
.crm-pics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm-pics li { position: relative; display: block; }
.crm-pics li.is-over img { outline: 2px dashed var(--crm-ink); outline-offset: 2px; }
.crm-pics__n { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; font-size: 0.75rem; color: var(--crm-ink); background: color-mix(in srgb, var(--crm-surface) 88%, transparent); border-radius: 999px; }
.crm-pics__more { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; font: inherit; font-size: 0.625rem; letter-spacing: 0.08em; color: var(--crm-ink); background: color-mix(in srgb, var(--crm-surface) 92%, transparent); border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 1px 4px color-mix(in srgb, var(--crm-ink) 25%, transparent); }
.crm-pics__more:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
@media (hover: hover) { .crm-pics__more { opacity: 0; transition: opacity 150ms ease; } .crm-pics li:hover .crm-pics__more, .crm-pics__more:focus-visible, .crm-pics__more[aria-expanded="true"] { opacity: 1; } }
.crm-pics__menu { position: absolute; top: 42px; right: 6px; z-index: 5; display: grid; min-width: 150px; padding: 4px; background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: var(--crm-radius-btn); box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--crm-ink) 45%, transparent); }
.crm-pics__mi { min-height: 36px; padding: 0 10px; font: inherit; font-size: 0.875rem; font-weight: 600; text-align: left; color: var(--crm-ink); background: none; border: 0; border-radius: var(--crm-radius-btn); cursor: pointer; }
.crm-pics__mi:hover:not(:disabled) { background: color-mix(in srgb, var(--crm-ink) 6%, transparent); }
.crm-pics__mi:disabled { opacity: 0.4; cursor: default; }
.crm-pics__mi:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: -2px; }
.crm-pics__add { display: block; }
.crm-pics__addb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 4 / 3; font-size: 0.8125rem; font-weight: 600; text-align: center; color: var(--crm-ink); border: 1.5px dashed color-mix(in srgb, var(--crm-ink) 40%, transparent); cursor: pointer; }
.crm-pics__addb:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
@media (max-width: 899px) { .crm-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crm-steps .crm-steps__more { display: block; padding-left: 34px; } .crm-steps__more .crm-link { white-space: nowrap; }

/* ================= Round 3: the board, redesigned ================= */
/* Seven stages side by side, each as tall as the view: a header (name, count, the money in it), then cards. A card is the place
   (its cover), the guest, the dates, the amount and what happens next. The owner's own stages (New, Waiting) carry the accent;
   dated stages are quieter; Cancelled is the quietest. Every rule reads --crm-* tokens only, so the dark set works here too. */
.crm-page.crm-page--board { max-width: none; padding: 20px 24px 32px; grid-template-rows: minmax(0, 1fr) auto; min-height: calc(100dvh - 65px - 77px); gap: 14px; }
.crm-board { display: grid; grid-template-columns: repeat(7, minmax(184px, 1fr)); gap: 10px; align-items: stretch; overflow-x: auto; padding: 0 0 6px; margin: 0; scroll-snap-type: x proximity; }
.crm-kcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 0 12px; background: color-mix(in srgb, var(--crm-ink) 3.5%, var(--crm-bg)); border: 0; border-top: 3px solid var(--crm-line); border-radius: var(--crm-radius); scroll-snap-align: start; }
.crm-kcol.is-dated { background: color-mix(in srgb, var(--crm-ink) 2%, var(--crm-bg)); border-style: solid; }
.crm-kcol--new, .crm-kcol--waiting { border-top-color: var(--crm-ink); }
.crm-kcol--confirmed { border-top-color: color-mix(in srgb, var(--crm-ink) 55%, transparent); }
.crm-kcol--cancelled { background: transparent; border-top-style: dashed; box-shadow: inset 0 0 0 1px var(--crm-line); }
.crm-kcol.is-over { outline: 2px dashed var(--crm-ink); outline-offset: -2px; }
.crm-kcol__top { position: sticky; top: 0; z-index: 1; display: grid; gap: 2px; padding: 12px 12px 10px; background: inherit; border-bottom: 1px solid var(--crm-line); }
.crm-kcol__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.875rem; font-weight: 700; line-height: 24px; }
.crm-kcol__n { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; font-size: 0.75rem; font-weight: 500; color: var(--crm-ink); background: color-mix(in srgb, var(--crm-ink) 9%, transparent); border-radius: 999px; }
.crm-kcol--new:not(.is-empty) .crm-kcol__n, .crm-kcol--waiting:not(.is-empty) .crm-kcol__n { color: var(--crm-primary-ink); background: var(--crm-primary-bg); }
.crm-kcol__sum { min-height: 1.4em; font-size: 0.75rem; color: var(--crm-muted); white-space: pre; }
.crm-kcol__l { display: grid; align-content: start; gap: 8px; margin: 0; padding: 0 8px; list-style: none; }
.crm-kcol__empty { margin: 2px 8px 0; padding: 14px 12px; font-size: 0.8125rem; line-height: 1.4; color: var(--crm-muted); border: 1px dashed var(--crm-line); border-radius: var(--crm-radius); }
.crm-kcard { display: block; padding: 0; background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: var(--crm-radius); box-shadow: 0 1px 0 color-mix(in srgb, var(--crm-ink) 6%, transparent); cursor: default; }
.crm-kcard[draggable="true"] { cursor: grab; }
.crm-kcard.is-yours { box-shadow: inset 3px 0 0 var(--crm-ink), 0 1px 0 color-mix(in srgb, var(--crm-ink) 6%, transparent); }
.crm-kcard.is-drag { opacity: 0.5; }
.crm-kcard__b { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; width: 100%; padding: 10px 12px 12px; font: inherit; color: var(--crm-ink); text-align: left; background: none; border: 0; border-radius: var(--crm-radius); cursor: pointer; transition: background-color 160ms ease; }
.crm-kcard__b > * { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; }
.crm-kcard__b:hover { background: color-mix(in srgb, var(--crm-ink) 4%, transparent); }
.crm-kcard__b:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
.crm-kcard__u { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-family: var(--crm-font-data); font-size: 0.6875rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--crm-muted); }
.crm-kcard__img { flex: none; display: grid; place-items: center; width: 40px; height: 30px; object-fit: cover; border-radius: 1px; background: var(--crm-band-bg); color: var(--crm-ink); font-family: var(--crm-font-ui); font-weight: 700; font-size: 0.875rem; text-transform: none; }
.crm-kcard__unit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-kcard__n { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.crm-kcard__d { font-size: 0.8125rem; line-height: 1.4; color: var(--crm-muted); }
.crm-kcard__dt { color: var(--crm-ink); font-weight: 600; }
.crm-kcard__v { font-size: 0.875rem; }
.crm-kcard__next { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding-top: 8px; font-size: 0.8125rem; line-height: 1.35; border-top: 1px solid var(--crm-line); }
.crm-kcard__next .crm-ic { width: 14px; height: 14px; margin-top: 2px; }
.crm-kcard.is-yours .crm-kcard__next { font-weight: 600; }
.crm-kcard__next.is-ok { font-weight: 600; }
.crm-kcard.is-cancelled { background: transparent; box-shadow: none; }
.crm-kcard.is-cancelled .crm-kcard__dt { color: var(--crm-muted); text-decoration: line-through; }
.crm-kcard.is-cancelled .crm-kcard__v { color: var(--crm-muted); text-decoration: line-through; }
.crm-kcard.is-cancelled .crm-kcard__img { filter: grayscale(1); opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .crm-kcard__b { transition: none; } }
@media (max-width: 899px) {
  /* Phones and small tablets: the journey top to bottom, one stage under the next. An empty stage is one line: its name and
     what "empty" means there, never a hollow box. */
  .crm-page.crm-page--board { padding: 12px 12px 120px; min-height: 0; grid-template-rows: none; }
  .crm-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: visible; scroll-snap-type: none; }
  .crm-kcol, .crm-board .crm-kcol:has(.crm-kcol__empty) { display: flex; flex-direction: column; align-items: stretch; padding-block: 0 10px; }
  .crm-kcol__top { position: static; }
  .crm-kcol.is-empty { padding-bottom: 0; }
  .crm-kcol.is-empty .crm-kcol__top { border-bottom: 0; padding-bottom: 4px; }
  .crm-kcol.is-empty .crm-kcol__sum { display: none; }
  .crm-board .crm-kcol:has(.crm-kcol__empty) .crm-kcol__empty { display: block; margin: 0 12px 12px; padding: 0; border: 0; }
}

/* ================= Round 3: Your look, and the compact photo rows ================= */
.crm-file { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.crm-mini__ctl label:has(+ .crm-file:focus-visible) { outline: 2px solid var(--crm-ink); outline-offset: 2px; }
/* A compact row: the small picture, what it is, Change / Remove. */
.crm-mini { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; }
.crm-mini__t { display: grid; gap: 2px; min-width: 0; }
.crm-mini__t b { font-size: 0.9375rem; }
.crm-mini__t small { font-size: 0.8125rem; color: var(--crm-muted); }
.crm-mini__ctl { position: relative; display: flex; gap: 8px; }
.crm-mini > .crm-form__msg { grid-column: 1 / -1; }
.crm-mini > .crm-form__msg:empty { display: none; }
.crm-mini-logo { display: grid; place-items: center; width: 88px; height: 48px; padding: 6px; background: var(--crm-rail-bg); color: var(--crm-rail-ink); border-radius: var(--crm-radius); }
.crm-mini-logo img { max-width: 100%; max-height: 36px; object-fit: contain; }
.crm-mini-logo__name { font-family: var(--crm-font-name); font-weight: var(--crm-name-weight); text-transform: var(--crm-name-case); font-size: 1rem; }
/* "Your name" with the round photo in the same row: label above, then photo · name · Change / Remove. Same height as its neighbour. */
.crm-namerow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px; }
.crm-namerow > .crm-field, .crm-namerow > .crm-mini { display: contents; }
.crm-namerow .crm-field__l { grid-column: 1 / -1; grid-row: 1; }
.crm-namerow input { grid-column: 2; grid-row: 2; }
.crm-namerow .crm-av8 { grid-column: 1; grid-row: 2; }
.crm-namerow .crm-mini__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.crm-namerow .crm-mini__ctl { grid-column: 3; grid-row: 2; }
.crm-namerow .crm-form__msg { grid-column: 1 / -1; grid-row: 3; }
/* Your look, round 6 (3 Oct, "like choosing a theme on an iPhone"): every choice is a live miniature of this booking system, painted with
   the real tokens (crm.js tokens()). The colours: five side by side, large; Light / Dark / Follow my device: three, in the colours in use;
   the logo a compact row under them. The current one: a 2 px ink outline round its picture and "In use". Flat: no tints, no shadows. */
.crm-lookset .crm-look { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: 'pal pal' 'sys logo'; gap: 28px 40px; align-items: start; }
.crm-look__pal { grid-area: pal; display: grid; gap: 10px; }
.crm-look__pal > .crm-field__h { margin-top: -4px; max-width: 62ch; }
.crm-look__sys { display: contents; }
.crm-look__sys > .crm-field__l, .crm-look__sys > .crm-seg3, .crm-look__sys > .crm-seg3 + .crm-saveline { grid-area: sys; }
.crm-look__sys > .crm-field__l { align-self: start; }
.crm-look__sys > .crm-seg3 { margin-top: 30px; }
.crm-look__sys > .crm-seg3 + .crm-saveline { align-self: end; margin-top: 0; }
.crm-look__sys > .crm-mini { grid-area: logo; align-self: start; margin-top: 30px; }
.crm-themes { display: grid; gap: 16px; margin-top: 6px; }
.crm-themes--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.crm-themes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 28px; }
.crm-theme { position: relative; display: grid; gap: 10px; align-content: start; cursor: pointer; }
.crm-theme input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.crm-theme__pic { display: block; padding: 3px; border: 1px solid var(--crm-line); border-radius: calc(var(--crm-radius) + 3px); }
.crm-theme:has(input:checked) .crm-theme__pic { border-color: var(--crm-ink); box-shadow: inset 0 0 0 1px var(--crm-ink); }   /* 2 px, no layout shift */
.crm-theme:has(input:focus-visible) .crm-theme__pic { outline: 2px solid var(--crm-ink); outline-offset: 3px; }
@media (hover: hover) { .crm-theme:hover:not(:has(input:checked)) .crm-theme__pic { border-color: color-mix(in srgb, var(--crm-ink) 50%, transparent); } }
.crm-theme__t { display: grid; gap: 1px; min-width: 0; }
.crm-pal__n { font-size: 0.9375rem; font-weight: 700; }
.crm-theme__t small { font-size: 0.8125rem; color: var(--crm-muted); }
.crm-pal__now { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; visibility: hidden; }
.crm-pal__now .crm-ic { width: 16px; height: 16px; }
.crm-theme:has(input:checked) .crm-pal__now { visibility: visible; }   /* its room is kept, so the rows never jump */

/* The miniature: the booking system at about 1/7 size. Every colour is a --crm-* token set on .crm-tv itself (crm.js paintMini).
   Its parts are sized in cqw, so a narrow one (three across on a phone) is the same picture, smaller, never cut. */
.crm-tv { position: relative; container-type: inline-size; display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 9% 1fr; aspect-ratio: 4 / 3; overflow: hidden; background: var(--crm-bg); border-radius: var(--crm-radius); }
.crm-tv i, .crm-tv b { display: block; }
.crm-tv__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 7%; background: var(--crm-rail-bg); }
.crm-tv__mark { width: 22%; height: 32%; background: var(--crm-rail-ink); opacity: 0.85; }
.crm-tv__chip { width: 9%; height: 42%; border-radius: 999px; background: var(--crm-rail-sel); }
.crm-tv__rail { display: grid; align-content: start; gap: 2.4cqw; padding: 9% 7%; background: var(--crm-rail-bg); }
.crm-tv__sel, .crm-tv__row { display: grid; gap: 1.4cqw; padding: 8% 9%; }
.crm-tv__sel { background: var(--crm-rail-sel); }
.crm-tv__sel b, .crm-tv__row b { height: 1.4cqw; background: var(--crm-rail-sel-ink); }
.crm-tv__row b { background: var(--crm-rail-ink); opacity: 0.7; }
.crm-tv__sel b + b, .crm-tv__row b + b { width: 60%; opacity: 0.6; }
.crm-tv__main { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.crm-tv__band { display: grid; gap: 2.4cqw; padding: 9% 9% 8%; background: var(--crm-band-grain), var(--crm-band-bg); }
.crm-tv__name { width: 62%; height: 4.2cqw; background: var(--crm-band-ink); }
.crm-tv__line { width: 46%; height: 1.4cqw; background: var(--crm-muted); }
.crm-tv__acts { display: flex; gap: 6%; margin-top: 1.4cqw; }
.crm-tv__btn { width: 36%; height: 5.2cqw; background: var(--crm-primary-bg); border-radius: min(var(--crm-radius-btn), 3px); }
.crm-tv__ghost { width: 26%; height: 5.2cqw; box-shadow: inset 0 0 0 1px var(--crm-ink); border-radius: min(var(--crm-radius-btn), 3px); }
.crm-tv__box { display: grid; align-content: start; gap: 3.3cqw; margin: 7% 9% 0; padding: 8%; background: var(--crm-surface); box-shadow: inset 0 0 0 1px var(--crm-line); }
.crm-tv__box > .crm-tv__line { width: 40%; background: var(--crm-ink); }
.crm-tv__cal { display: grid; grid-template-columns: 1fr 2.4fr 1fr 1.2fr 1fr; gap: 1cqw; height: 4.2cqw; }
.crm-tv__cal i { background: color-mix(in srgb, var(--crm-ink) 5%, var(--crm-surface)); box-shadow: inset 0 0 0 1px var(--crm-line); }
.crm-tv__cal .crm-tv__span { background: var(--crm-span); box-shadow: none; }
.crm-tv__cal .crm-tv__blk { background: var(--crm-block); box-shadow: none; }
/* Follow my device: the light one, with the dark one over it cut on the diagonal. */
.crm-tv-split { position: relative; display: block; }
.crm-tv-split > .crm-tv + .crm-tv { position: absolute; inset: 0; aspect-ratio: auto; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Language: two words, each in its own language, as one segmented control. The current one in ink. */
.crm-langset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; align-items: start; }
.crm-langset > .crm-h { grid-column: 1 / -1; }
.crm-langset__g { display: grid; gap: 10px; justify-items: start; grid-row: 2 / span 4; grid-template-rows: subgrid; }   /* label, help, switch, save line on shared rows: the switches line up */
.crm-langset__g > .crm-field__h { max-width: 52ch; margin-top: -4px; }
@media (max-width: 899px) { .crm-langset { grid-template-columns: minmax(0, 1fr); } .crm-langset__g { grid-row: auto; grid-template-rows: none; } }
.crm-langs { display: inline-flex; gap: 0; padding: 3px; border: 1px solid var(--crm-ink); border-radius: var(--crm-radius-btn); }
.crm-langs .crm-seg3__o { position: relative; }
.crm-langs input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.crm-langs span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; font-size: 0.9375rem; font-weight: 600; border-radius: var(--crm-radius-btn); }
.crm-langs input:checked + span { color: var(--crm-surface); background: var(--crm-ink); }
.crm-langs input:focus-visible + span { outline: 2px solid var(--crm-ink); outline-offset: 2px; }

/* A pick re-themes the whole tool in place: every colour fades for 280 ms (crm.js adds html.crm-retheme for 340 ms). Not with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html.crm-retheme, html.crm-retheme *, html.crm-retheme *::before, html.crm-retheme *::after {
    transition-property: background-color, color, border-color, fill, stroke, outline-color, box-shadow !important; transition-duration: 280ms !important; transition-timing-function: ease !important; transition-delay: 0s !important; }
}

@media (max-width: 1099px) {
  .crm-lookset .crm-look { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'pal' 'sys' 'logo'; }
  .crm-look__sys > .crm-mini { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--crm-line); }
}
@media (max-width: 899px) {
  /* A phone or a narrow window: the colours scroll sideways, each about half the width, snapping (the way iOS lists themes). */
  .crm-themes--5 { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 8px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .crm-themes--5::-webkit-scrollbar { display: none; }
  .crm-themes--5 > .crm-theme { flex: 0 0 min(46%, 220px); scroll-snap-align: start; }
}
@media (max-width: 699px) {
  .crm-themes--3 { gap: 10px; }
  .crm-themes--3 .crm-pal__n { font-size: 0.8125rem; }
  .crm-namerow .crm-mini__ctl .crm-btn { padding: 0 10px; }
}

/* ================= Round 4–5: saves that say so ================= */
/* "Fjord saved · 21:58": plain small muted text under the control it confirms (round 5: no pill, no glow). The time changes on every
   save, so a second save is visible; an error turns it red (.crm-form__msg.is-err). */
.crm-saveline { justify-self: start; max-width: 100%; font-size: 0.8125rem; font-weight: 400; color: var(--crm-muted); }

/* ================= Round 6: the timeline as one grid; the account menu, flat ================= */
/* Each row: who · what on the first line, then the meta pair, time and status, in two fixed columns (empty cells kept), so times line up
   with times and badges with badges down the whole list. Narrow (the enquiry column, the booking sheet, phones): the pair sits under the
   title. Wide (≥ 640 px of timeline): the pair moves to the right. */
.crm-steps { container-type: inline-size; }
.crm-steps__h { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 8px; font-size: 0.9375rem; line-height: 24px; }
.crm-steps__m { grid-column: 1 / -1; display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); align-items: start; justify-items: start; gap: 8px; }
.crm-steps__m.is-empty { display: none; }
.crm-steps__m .crm-tag { white-space: normal; text-align: left; line-height: 1.3; padding-block: 2px; }
.crm-steps__t { font-size: 0.8125rem; color: var(--crm-muted); white-space: nowrap; }
@container (min-width: 640px) {
  .crm-steps__h { grid-template-columns: auto minmax(0, 1fr) 11.5rem 13rem; }
  .crm-steps__m, .crm-steps__m.is-empty { display: contents; }
}
/* The account menu: a flat panel with a 1px line like every other CRM surface; two actions, each with its line icon and a plain row state. */
.crm-me--btn, .crm-me--btn:active { box-shadow: none; }
.crm-me .crm-av8 { box-shadow: none; border: 2px solid var(--crm-rail-sel); }
.crm-memenu__i { gap: 10px; }
.crm-memenu__i .crm-ic { width: 18px; height: 18px; color: var(--crm-muted); }
.crm-memenu__i:hover, .crm-memenu__i:focus-visible { background: color-mix(in srgb, var(--crm-ink) 8%, transparent); }
.crm-memenu__i:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: -2px; }
.crm-memenu__i:hover .crm-ic, .crm-memenu__i:focus-visible .crm-ic { color: var(--crm-ink); }
.crm-steps__h > .crm-steps__m > *, .crm-steps__h .crm-tag { justify-self: start; }
.crm-steps__m .crm-tag { display: inline-block; max-width: 100%; height: auto; min-height: 22px; }
@container (max-width: 420px) { .crm-steps__m { grid-template-columns: 10.5rem minmax(0, 1fr); } }

/* The demo (013, only when public_client says is_demo): one flat line above the bar. No pill, no tint. */
.crm-demo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; padding: 8px 20px; font-size: 0.8125rem; color: var(--crm-muted); background: var(--crm-bg); border-bottom: 1px solid var(--crm-line); }
.crm-demo b { font-family: var(--crm-font-data); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crm-ink); }

/* The Guest | Owner switch (the old demo's demo-pill, ported 2 Oct): demo chrome, plain system type, not the client's brand. Flat: a
   1 px border, no shadow. It never covers the end of the page (the footer keeps room) and an open sheet is in the top layer, over it. */
.demo-pill { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 90; display: flex; padding: 3px; background: #fff; border: 1px solid rgb(0 0 0 / 0.18); border-radius: 999px; font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
.demo-pill a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; color: #222; text-decoration: none; border-radius: 999px; }
.demo-pill a[aria-current="page"] { background: #222; color: #fff; }
.demo-pill a:focus-visible { outline: 2px solid #222; outline-offset: 2px; }
.demo-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: #d23a1e; }
.demo-pill__dot[hidden] { display: none; }
@media (max-width: 899px) { .demo-pill { font-size: 12px; padding: 2px; } .demo-pill a { min-height: 32px; padding: 0 12px; } }
html.is-demo .crm, html.is-demo .crm-gate__foot { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
html.is-demo .demo-pill { bottom: max(calc(14px + env(safe-area-inset-bottom)), calc(var(--dock-h, 0px) + 10px)); }
@media (max-width: 899px) { html.is-demo .crm-grid, html.is-demo .crm-grid:not(.crm-grid--wide) { padding-bottom: 180px; } }
.crm-demo__s { display: none; }
@media (max-width: 699px) { .crm-demo { flex-wrap: nowrap; } .crm-demo__l { display: none; } .crm-demo__s { display: inline; } }