/* CMS additions on top of the demo's theme.css + app.css. Only theme variables, no new colours.
   Sized for owners on phones: 44px touch targets, 16px inputs (no iOS zoom), one column on small screens. */

.brand { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: 1.125rem; padding: 4px 8px 6px; }
.boot { min-height: 60vh; display: grid; place-items: center; color: var(--ink-3); }
.mobile-only { display: none; }
.pswitch__btn--static { cursor: default; }
.sidebar .demo-chip { align-self: flex-start; margin-left: 8px; }
.pswitch__btn--static:hover { background: var(--surface); }
.acct { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.acct__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.acct__txt b { font-size: var(--text-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__txt span { font-size: var(--text-micro); color: var(--ink-3); }
.form-err { color: var(--bad); font-size: var(--text-small); font-weight: 600; }
.field input, .field textarea { font-size: 16px; }
.field__hint--left { align-self: flex-start; }
.btn--danger { background: var(--bad); border-color: var(--bad); color: var(--on-accent); }
.btn--danger:hover { background: var(--bad); filter: brightness(.92); }
.btn--danger-quiet { border-color: transparent; background: transparent; color: var(--bad); }
.btn--danger-quiet:hover { background: var(--bad-soft); }
.sheet__spacer { flex: 1; }
.card--row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- publish bar: always visible ---------- */
.pub { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-7)) var(--space-5); padding: 10px var(--space-7);
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.pub__state { margin-right: auto; font-size: var(--text-small); color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.pub__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.pub.is-dirty .pub__state::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pub.is-warn .pub__state { color: var(--bad); font-weight: 600; }
.pub.is-warn .pub__state::before { background: var(--bad); }

/* ---------- toasts with an action ---------- */
.toast { align-items: center; pointer-events: auto; }
.toast--error .ico { color: var(--warn); }
.toast__act { margin-left: auto; border: 0; background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 4px; white-space: nowrap; }

/* ---------- home ---------- */
.home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.status { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.status__line { display: flex; align-items: center; gap: 6px; font-size: 1.0625rem; }
.status__changes { font-size: var(--text-small); color: var(--ink-2); padding-top: var(--space-3); border-top: 1px solid var(--border); align-self: stretch; margin-top: var(--space-2); }
.status .btn { margin-top: var(--space-2); }
.todo { display: flex; flex-direction: column; margin-top: var(--space-3); }
.todo li + li { border-top: 1px solid var(--border); }
.todo a { display: flex; align-items: center; gap: 10px; padding: 12px 2px; text-decoration: none; font-size: var(--text-small); min-height: 44px; }
.todo a .ico:first-child { color: var(--warn); }
.todo a .ico:last-child { margin-left: auto; color: var(--ink-3); }
.todo a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.todo__ok { display: flex; gap: 8px; align-items: center; color: var(--good); font-weight: 600; font-size: var(--text-small); margin-top: var(--space-3); }
.tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.tile { display: flex; align-items: center; gap: 12px; padding: 16px; min-height: 72px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); text-decoration: none; }
.tile:hover { border-color: var(--border-strong); background: var(--surface-sunken); }
.tile > .ico:first-child { color: var(--accent-ink); }
.tile > span { display: flex; flex-direction: column; min-width: 0; }
.tile > span span { font-size: var(--text-micro); color: var(--ink-3); }
.tile > .ico:last-child { margin-left: auto; color: var(--ink-3); }

/* ---------- website editor ---------- */
.site__edit { overflow: visible; }
.site__edit .tabs { position: sticky; top: 58px; z-index: 5; background: var(--surface); border-radius: var(--radius-l) var(--radius-l) 0 0; }
.tab { min-height: 44px; }
.pair { display: flex; flex-direction: column; gap: 8px; }
.pair__label { font-size: var(--text-small); font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.pair__hint { font-weight: 400; color: var(--ink-3); font-size: var(--text-micro); }
.pair__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.field__lang { font-size: var(--text-micro); color: var(--ink-3); font-weight: 600; letter-spacing: .02em; }
.row-fields { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.row-fields .field--short { flex: 1 1 180px; max-width: 260px; }
.row-fields .field:not(.field--short) { flex: 2 1 260px; }
.add-btn { align-self: flex-start; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; margin-bottom: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--text-small); font-weight: 500; }
.chip input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chip input:focus-visible + span { box-shadow: var(--focus); }
.rrow__img { object-fit: cover; }
.rrow__img--empty { display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink-3); }
.rrow__main { min-height: 60px; }
.rrow__edit { gap: var(--space-4); }
.rrow__foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: var(--space-3); }

/* photo picker (rooms, area) */
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 4px; }
.pick__b { position: relative; display: block; width: 100%; padding: 0; border: 2px solid transparent; border-radius: var(--radius-s); overflow: hidden; background: var(--surface-sunken); cursor: pointer; aspect-ratio: 4 / 3; }
.pick__b img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.pick__b.is-on { border-color: var(--accent); }
.pick__b.is-on img { opacity: 1; }
.pick__n { position: absolute; top: 4px; left: 4px; min-width: 22px; height: 22px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: var(--text-micro); font-weight: 700; display: grid; place-items: center; padding: 0 6px; }

/* ---------- photos ---------- */
.drop { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--space-6) var(--space-4); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-l); text-align: center; transition: background .15s, border-color .15s; }
.drop.is-over { background: var(--accent-soft); border-color: var(--accent); }
.drop__hint { color: var(--ink-2); font-size: var(--text-small); max-width: 44ch; }
.upq { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-m); }
.upq__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 10px 12px; font-size: var(--text-small); }
.upq__row + .upq__row { border-top: 1px solid var(--border); }
.upq__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upq__state { color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; text-align: right; }
.upq__row.is-done .upq__state { color: var(--good); font-weight: 600; }
.upq__row.is-error .upq__state { color: var(--bad); font-weight: 600; white-space: normal; }
.pgrid--cms { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pgrid--cms .ph { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ph__open { display: block; width: 100%; padding: 0; border: 0; background: var(--surface-sunken); cursor: pointer; aspect-ratio: 4 / 3; }
.ph__open img { width: 100%; height: 100%; object-fit: cover; }
.ph__cat { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--ink); pointer-events: none; }
.ph__grip { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--ink-2); pointer-events: none; }
@media (pointer: coarse) { .ph__grip { width: 40px; height: 40px; pointer-events: auto; touch-action: none; } }
.ph--ghost { opacity: .35; }
.psheet__img { width: 100%; max-height: 46vh; object-fit: contain; border-radius: var(--radius-m); background: var(--surface-sunken); }

/* ---------- preview ---------- */
.sheet--full { width: min(1400px, 100%); height: min(94vh, 100%); max-height: none; }
.pv-head { align-items: center; padding-top: var(--space-4); padding-bottom: var(--space-3); }
.pv-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.pv-stage { flex: 1; min-height: 0; background: var(--surface-sunken); display: grid; place-items: stretch; padding: var(--space-3); overflow: auto; }
.pv-frame { width: 100%; height: 100%; min-height: 60vh; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-pop); background: var(--surface); justify-self: center; transition: width .25s; }
.pv-frame.is-phone { width: 390px; max-width: 100%; border-radius: 28px; border: 8px solid var(--ink); }
.pv-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- history ---------- */
.vlist { display: flex; flex-direction: column; }
.vrow { display: flex; align-items: center; gap: var(--space-3); padding: 12px 0; }
.vrow + .vrow { border-top: 1px solid var(--border); }
.vrow__n { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-sunken); display: grid; place-items: center; font-size: var(--text-micro); font-weight: 700; color: var(--ink-2); flex: none; }
.vrow.is-current .vrow__n { background: var(--accent); color: var(--on-accent); }
.vrow__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vrow__txt span { font-size: var(--text-micro); color: var(--ink-3); }

/* ---------- phone ---------- */
@media screen and (max-width: 1000px) {
  .pub { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4); padding: 10px var(--space-5); }
}
@media screen and (max-width: 860px) {
  .mobile-only { display: block; margin-bottom: var(--space-3); }
  .home { grid-template-columns: 1fr; }
  .pair__cols { grid-template-columns: 1fr; gap: var(--space-2); }
  .pub { position: fixed; top: auto; bottom: calc(64px + env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0; padding: 8px var(--space-4); border-bottom: 0; border-top: 1px solid var(--border); background: var(--surface); }
  .pub__state { flex: 1 1 100%; font-size: var(--text-micro); }
  .pub .btn { flex: 1; height: 44px; }
  .main, .is-collapsed .main { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
  #toasts { bottom: calc(160px + env(safe-area-inset-bottom)); }
  .bnav { grid-template-columns: repeat(3, 1fr); }
  .site__edit .tabs { position: static; }
  .vrow { flex-wrap: wrap; }
  .vrow__txt { flex: 1 1 calc(100% - 48px); }
  .vrow .btn, .vrow .badge { margin-left: 44px; }
  .tab span { font-size: var(--text-small); }
  .drop { padding: var(--space-5) var(--space-3); }
  .drop__btn { width: 100%; }
  .pgrid--cms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sheet--full { height: 100%; border-radius: 0; }
  .pv-stage { padding: 0; }
  .pv-frame, .pv-frame.is-phone { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .pv-tools .seg__txt { display: none; }
  .sheet__foot { flex-wrap: wrap; }
  .sheet__foot .btn { flex: 1 1 auto; height: 44px; }
  .sheet__spacer { display: none; }
}

/* ---------- phase 2: booking, services, invite ---------- */
.row-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.field--inline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); align-items: center; gap: var(--space-3); }
.bk-cms { max-width: 760px; }
.plan { display: flex; flex-direction: column; gap: var(--space-2); }
.plan s { margin-left: 6px; }
.wz__one { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); max-width: 680px; }
.wz__extra { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-2); }
.wz__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); }
.copyfield { display: flex; flex-direction: column; gap: 6px; }
.copyfield > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copyfield code { font-size: 1.125rem; font-weight: 600; letter-spacing: .04em; padding: 6px 10px; background: var(--surface-sunken); border-radius: var(--radius-s); user-select: all; }
.radio { align-items: flex-start; line-height: 1.4; min-height: 44px; }
.radio input { margin-top: 2px; }
.summary { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-m); }
.summary li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 12px 14px; }
.summary li + li { border-top: 1px solid var(--border); }
.summary span { color: var(--ink-2); }
.invite { grid-column: 1 / -1; }
.inv-link { display: inline-block; margin-top: 6px; padding: 6px 8px; background: var(--surface-sunken); border-radius: var(--radius-s); word-break: break-all; font-size: var(--text-micro); user-select: all; }
@media screen and (max-width: 860px) {
  .bnav { grid-template-columns: repeat(5, 1fr); }
  .bnav__item { font-size: 10.5px; }
  .field--inline { grid-template-columns: 1fr; gap: 6px; }
  .wz__one { padding: var(--space-4); }
  .wz__foot { padding: var(--space-3) var(--space-4); }
  .wz__foot .btn--lg { flex: 1; }
}

/* Draft promises (services): visible to admins only, see views/services.js D() */
.draft-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: 1px; background: #fff3cd; color: #6b4e00; box-shadow: inset 0 0 0 1px #e6c86a; white-space: nowrap; }
.tip--draft { margin-bottom: var(--space-4); }