/* Lovetts Tables booking. Base tokens/components copied verbatim from
   lovetts-workspace/web/styles.css ("same CSS as the desk booking app") -
   warm stone neutrals, heavy Archivo wordmark, Hanken Grotesk UI,
   thin black architectural lines, green = available, terracotta = booked.
   New rules for this app's own components (party stepper, time pills, demo
   banner, fee/no-show admin badges) are appended at the end, below the
   original file unchanged - see the marker comment. */

:root {
  --bg:        #dcdcdc;   /* page (client-specified rgb 220,220,220) */
  --ink:       #1c1a17;   /* text, lines, primary buttons */
  --card:      #e6e6e6;   /* cards, panels, rows (neutral, lifts off the grey page) */
  --floor:     #d2d2d2;   /* floor-plan room fill (neutral, sits under the page) */
  --muted:     #857f74;   /* eyebrows, secondary */
  --body2:     #4f4a42;   /* paragraph copy */
  --hair:      #cfcfcf;
  --hair2:     #d4d4d4;
  --hair3:     #cacaca;
  --avail:     #6db494;   /* available; text #13352a */
  --avail-tx:  #13352a;
  --booked:    #bb5e48;   /* booked; text #fbf1ec */
  --booked-tx: #fbf1ec;
  --free-dot:  #3f7d62;
  --dog:       #a8a29a;
  --ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --display: 'Archivo', var(--ui);
  --maxw: 1120px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { background: var(--bg); color: var(--ink); font-family: var(--ui);
  -webkit-font-smoothing: antialiased; min-height: 100vh; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
select, input { font-family: inherit; }
a { color: inherit; }
.wrap { min-height: 100vh; display: flex; flex-direction: column; }

/* Entrance animations are transform-only so content is never left semi-opaque
   if a frame is missed (also avoids flaky screenshots). Overlays keep a fade. */
@keyframes slideIn { from { transform: translateX(28px) } to { transform: none } }
@keyframes sheetUp { from { transform: translateY(30px) } to { transform: none } }
@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise    { from { transform: translateY(12px) } to { transform: none } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

.eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* ── header ──────────────────────────────────────────────────────────────── */
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(20px,5vw,56px); border-bottom: 1px solid var(--ink); flex-wrap: wrap; }
.hdr__brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hdr__brand img { height: 40px; display: block; position: relative; top: 1px; }
.hdr__brand img.hdr__us { height: 44px; top: 0; }
.hdr__divider { width: 1px; height: 30px; background: rgba(28,26,23,0.2); align-self: center; flex: none; }
.hdr__label { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.hdr__links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: flex-end; }
.hdr__links a { font-size: 13px; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; white-space: nowrap; }
.pill { font-size: 13px; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px;
  padding: 8px 16px; white-space: nowrap; background: none; }
.pill:hover { background: var(--ink); color: var(--card); }
.signed { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* ── step rail ───────────────────────────────────────────────────────────── */
.rail { display: flex; align-items: center; gap: 18px; padding: 14px clamp(20px,5vw,56px);
  border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.rail__step { display: flex; align-items: center; gap: 9px; opacity: 0.4; }
.rail__step.on { opacity: 1; }
.rail__num { font-family: var(--display); font-weight: 700; font-size: 12px; width: 24px; height: 24px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #b8b2a6; }
.rail__step.active .rail__num { background: var(--ink); color: var(--card); border: none; }
.rail__label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.rail__step.active .rail__label { font-weight: 700; }

main { flex: 1; }

/* ── step 1: duration ────────────────────────────────────────────────────── */
.dur { display: flex; flex-wrap: wrap; gap: clamp(28px,5vw,72px);
  padding: clamp(32px,5vw,64px) clamp(20px,5vw,56px); max-width: var(--maxw); margin: 0 auto; animation: rise .4s ease; }
.dur__intro { flex: 1 1 300px; max-width: 440px; }
.dur__intro h1 { font-size: clamp(30px,4vw,46px); font-weight: 600; line-height: 1.04;
  letter-spacing: -0.01em; margin: 0 0 20px; }
.dur__intro p { font-size: 16px; line-height: 1.6; color: var(--body2); margin: 0 0 18px; max-width: 380px; }
.dur__intro p.fine { font-size: 13px; color: var(--muted); }
.card { flex: 1 1 360px; max-width: 460px; background: var(--card); border: 1px solid var(--ink);
  border-radius: 4px; padding: clamp(22px,3vw,32px); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 24px; }
.seg__btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: 16px; border-radius: 3px; background: #fff; color: var(--ink); border: 1px solid var(--ink); transition: .15s; }
.seg__btn.on { background: var(--ink); color: var(--card); }
.seg__btn b { font-size: 17px; font-weight: 700; }
.seg__btn span { font-size: 13px; opacity: .7; margin-top: 3px; }
.field { margin-top: 18px; }
.field > label { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; }
.field select, .field input { width: 100%; padding: 13px 14px; border: 1px solid var(--ink); border-radius: 3px;
  background: #fff; font-size: 15px; color: var(--ink); appearance: none; }
.field select { cursor: pointer; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn { width: 100%; margin-top: 26px; padding: 16px; background: var(--ink); color: var(--card);
  border-radius: 3px; font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn .arr { font-size: 17px; }
.btn:hover { opacity: .92; }

/* ── step 2: desk picker ─────────────────────────────────────────────────── */
.desk-wrap { padding: clamp(20px,3vw,32px) clamp(20px,5vw,56px) 90px; max-width: var(--maxw); margin: 0 auto; animation: rise .4s ease; }
.toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 26px; }
.toolbar .slot-summary { font-size: 15px; color: var(--body2); }
.picker { display: flex; flex-wrap: wrap; gap: clamp(24px,4vw,48px); align-items: flex-start; justify-content: center; }
.picker > * { min-width: 0; }
.scene-wrap { flex: 1 1 380px; max-width: 660px; }
.scene { position: relative; width: 100%; max-width: 620px; aspect-ratio: 8 / 5; margin: 0 auto; }
.room { position: absolute; left: 2%; top: 8%; width: 60%; height: 86%; background: var(--floor);
  border: 1.5px solid var(--ink); border-radius: 3px; }
.room2 { position: absolute; left: 62%; top: 8%; width: 32%; height: 34%; background: var(--floor);
  border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); }
.opening { position: absolute; left: 60.7%; top: 60%; width: 2.6%; height: 20%; background: var(--floor); z-index: 3; }
.jamb { position: absolute; left: 60.7%; width: 2.6%; border-top: 1.5px solid var(--ink); z-index: 4; }
.win { position: absolute; display: flex; align-items: center; gap: 8px; z-index: 7; }
.win__line { flex: 1; height: 1px; background: var(--muted); }
.win__label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.desk { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border-radius: 3px; text-align: center; padding: 4px; line-height: 1.1; transition: .18s; }
.desk b { font-size: clamp(12px,1.5vw,15px); font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.desk .sub { font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; opacity: .65; }
.desk .badge { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; opacity: .85; }
/* Hover: bookable desks tint to the rose pink. !important overrides the inline
   per-desk background set in app.js; booked desks carry [disabled] so only the
   available (and currently selected) desks react. */
/* Pink hover only on true pointing devices - on touch it sticks after a tap. */
@media (hover: hover) {
  .desk:not([disabled]):hover { background: #d9a3bd !important; color: #1c1a17 !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.22); }
}
.seat { position: absolute; background: var(--ink); z-index: 4; }
.legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 22px; justify-content: center; }
.legend > div { display: flex; align-items: center; gap: 8px; }
.legend__sw { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(28,26,23,.18); }
.legend span.t { font-size: 12px; letter-spacing: 0.04em; color: var(--body2); }

/* desk list */
.desk-list { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; gap: 10px; }
.desk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-radius: 3px; text-align: left; width: 100%;
  border: 1px solid var(--hair3); background: var(--card); color: var(--ink); transition: .15s; }
.desk-row.sel { border-color: var(--ink); background: var(--ink); color: var(--card); }
.desk-row.booked { opacity: .55; cursor: not-allowed; }
/* Hover: list rows tint to the same rose pink (skip booked + already-selected). */
@media (hover: hover) {
  .desk-row:not(.booked):not(.sel):hover { background: #d9a3bd; border-color: var(--ink); }
}
.desk-row__main { display: flex; align-items: center; gap: 14px; }
.chip { width: 38px; height: 38px; border-radius: 5px; flex: none; border: 1px solid rgba(28,26,23,.12); }
.desk-row__name { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; white-space: nowrap; }
.desk-row__sub { font-size: 12px; letter-spacing: 0.04em; }
.row-tag { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; }
.divider { display: flex; align-items: center; gap: 10px; margin: 8px 2px 2px; }
.divider span.l { flex: 1; height: 1px; background: var(--hair); }
.divider span.t { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.dog { position: absolute; z-index: 5; display: block; }
.dog-mini { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; flex: none; }

/* ── booking panel ───────────────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(28,26,23,.38); z-index: 40; animation: fadeIn .25s ease; }
.panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(430px,92vw); overflow-y: auto;
  background: var(--card); box-shadow: -14px 0 44px rgba(0,0,0,.18); padding: 34px 32px; z-index: 50; animation: slideIn .3s ease; }
.panel.sheet { top: auto; right: 0; left: 0; height: auto; width: auto; max-height: 90vh;
  border-radius: 20px 20px 0 0; box-shadow: 0 -14px 44px rgba(0,0,0,.22); padding: 24px 22px 28px; animation: sheetUp .3s ease; }
.panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel__close { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--hair); color: var(--ink); font-size: 17px; flex: none; }
.panel h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.01em; margin: 6px 0 4px; }
.chip-tag { display: inline-block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--body2); border: 1px solid #c7c2b6; border-radius: 999px; padding: 4px 11px; }
.rule { height: 1px; background: var(--hair2); margin: 22px 0; }
.pline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pline .k { font-size: 13px; color: var(--muted); } .pline .k.big { font-size: 14px; color: var(--body2); }
.pline .v { font-size: 15px; font-weight: 600; } .pline .v.sm { font-size: 14px; font-weight: 400; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--ink); }
.total .k { font-size: 16px; font-weight: 700; } .total .v { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.panel .fine { font-size: 12px; color: var(--muted); margin: 14px 0 0; text-align: center; line-height: 1.6; }
.panel .err { color: #9a2d18; font-size: 13px; margin-top: 10px; text-align: center; }

/* ── step 3: confirm ─────────────────────────────────────────────────────── */
.confirm { max-width: 560px; margin: 0 auto; padding: clamp(36px,6vw,72px) clamp(20px,5vw,56px) 90px; animation: rise .4s ease; }
.confirm__top { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.check { width: 44px; height: 44px; border-radius: 999px; background: var(--ink); color: var(--card);
  display: flex; align-items: center; justify-content: center; font-size: 20px; }
.confirm h1 { font-size: clamp(28px,4vw,40px); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 6px; }
.confirm p { font-size: 15px; color: var(--body2); margin: 0 0 32px; }
.receipt { background: var(--card); border: 1px solid var(--ink); border-radius: 4px; overflow: hidden; }
.receipt__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hair2); }
.receipt__row:last-child { border-bottom: none; }
.receipt__row .k { font-size: 13px; letter-spacing: 0.04em; color: var(--muted); }
.receipt__row .v { font-size: 15px; font-weight: 600; text-align: right; }
.confirm__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.btn--inline { flex: 1 1 200px; width: auto; margin: 0; padding: 15px; }
.btn--ghost { flex: 1 1 140px; text-align: center; padding: 15px; border: 1px solid var(--ink); border-radius: 3px;
  font-size: 15px; text-decoration: none; color: var(--ink); display: flex; align-items: center; justify-content: center; }

/* ── admin ───────────────────────────────────────────────────────────────── */
.admin { max-width: var(--maxw); margin: 0 auto; padding: clamp(24px,4vw,40px) clamp(20px,5vw,56px) 90px; animation: rise .4s ease; }
.admin__head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 6px; }
.admin__head h1 { font-size: clamp(26px,3.5vw,38px); font-weight: 600; letter-spacing: -0.01em; margin: 6px 0 0; }
.admin__nav { display: flex; align-items: center; gap: 8px; }
.admin__nav .rnd { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--ink); font-size: 16px; color: var(--ink); }
.admin__jump { height: 40px; border: 1px solid var(--ink); border-radius: 999px; padding: 0 14px;
  font: inherit; font-size: 13px; color: var(--ink); background: var(--card); cursor: pointer; }
.admin__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.pill.add { background: var(--ink); color: var(--card); }
.pill.add:hover { opacity: .92; }
.add-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; margin: 2px 0; }
.add-check input { width: 16px; height: 16px; }
/* T&Cs consent: checkbox + agree sentence on one unbroken line, the
   "open to enable" hint stacked directly beneath it for clarity on mobile. */
.tc-check { align-items: flex-start; }
.tc-check input { margin-top: 2px; flex: 0 0 auto; }
.tc-text { display: flex; flex-direction: column; line-height: 1.3; }
.tc-agree, .tc-agree a { white-space: nowrap; }
.tc-hint { color: var(--muted); font-size: 12px; margin-top: 3px; }
@media (max-width: 380px) { .panel.sheet { padding-left: 18px; padding-right: 18px; } .tc-agree { font-size: 13px; } }
.modal__card { max-height: 90vh; overflow-y: auto; }
/* admin: Schedule / Bookings tabs + the bookings export table */
.admin__tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.bk-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.bk-controls .field { margin: 0; }
.bk-controls .field input { width: auto; }
.bk-summary { font-size: 14px; color: var(--body2); margin: 0 0 16px; }
.bk-note { color: var(--muted); font-size: 12px; margin-left: 8px; }
.bk-table-wrap { overflow-x: auto; border: 1px solid var(--hair2); border-radius: 6px; }
.bk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bk-table th, .bk-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.bk-table th { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bk-table tbody tr:last-child td { border-bottom: none; }
.req { color: #bb5e48; }
.hold-timer { text-align: center; font-size: 13px; letter-spacing: 0.04em; color: var(--muted); margin: 6px 0 12px; }
.hold-timer.expired { color: #bb5e48; font-weight: 600; }
.modal__logo { display: block; height: 44px; width: auto; margin: 2px 0 14px; }
.admin__date { font-size: 17px; color: var(--body2); margin: 0 0 28px; }
.admin__date b { color: var(--free-dot); font-weight: 600; }
.admin__closed { background: var(--card); border: 1px solid var(--hair2); border-radius: 6px; padding: 48px; text-align: center; color: var(--muted); font-size: 16px; }
/* Schedule tab: flags a day that's blocked for a private event (EVENT_BLOCKS
   in _worker.js) - same warm callout colour as .badge--warn so it reads as
   "needs attention", not just informational. One line per blocked service;
   the note (customer-facing "contact us" copy) sits on its own line below. */
.admin__event-banner { background: #f0d789; color: #4a3a06; border-radius: 6px; padding: 12px 16px;
  font-size: 14px; margin-bottom: 18px; }
.admin__event-banner span { display: block; font-weight: 400; margin-top: 2px; font-size: 13px; }
/* Event tab: read-only cards, one per configured EVENT_BLOCKS/EVENT_OVERRIDES entry. */
.admin__event-card { background: var(--card); border: 1px solid var(--hair2); border-radius: 6px;
  padding: 20px 22px; margin-bottom: 14px; }
.admin__event-card__dates { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.admin__event-card__note { color: var(--body2); font-size: 14px; }
.admin__event-card__sittings { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; color: var(--body2); }
.admin__event-card__sittings li { margin-bottom: 2px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-bottom: 30px; }
.scard { background: var(--card); border: 1px solid var(--hair2); border-radius: 6px; padding: 16px 18px; }
.scard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.scard__top b { font-size: 15px; font-weight: 700; }
.dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.scard__status { font-size: 13px; color: var(--body2); }
.sched { background: var(--card); border: 1px solid var(--hair2); border-radius: 6px; padding: clamp(16px,2.5vw,26px); overflow-x: auto; }
.sched__inner { min-width: 560px; }
.sched__axis { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sched__axis .pad { width: 96px; flex: none; }
.sched__ticks { position: relative; flex: 1; height: 14px; }
.tick { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.srow { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.srow__label { width: 96px; flex: none; display: flex; flex-direction: column; }
.srow__label b { font-size: 14px; font-weight: 700; }
.srow__label span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.track { position: relative; flex: 1; height: 52px; background: #ececec; border-radius: 5px; border: 1px solid var(--hair2); overflow: hidden;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), #e3ded4 calc(12.5% - 1px), #e3ded4 12.5%); }
.block { position: absolute; top: 5px; bottom: 5px; background: var(--booked); color: var(--booked-tx);
  border-radius: 4px; padding: 5px 9px; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  cursor: pointer; transition: filter .12s; }
.block:hover { filter: brightness(1.07); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.block b { font-size: 12px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.block span { font-size: 11px; opacity: .85; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); z-index: 6; }
.sched__legend { display: flex; align-items: center; gap: 8px; margin: 18px 0 0 110px; }

/* ── modal ───────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; background: rgba(28,26,23,.45); z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 24px; animation: fadeIn .25s ease; }
.modal__card { background: var(--card); border-radius: 6px; width: min(380px,100%); padding: clamp(26px,4vw,34px);
  box-shadow: 0 24px 60px rgba(0,0,0,.32); animation: rise .3s ease; }
.modal__card h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; margin: 6px 0 4px; }
.modal__card p.sub { font-size: 13px; color: var(--muted); margin: 0 0 22px; line-height: 1.6; }

.foot { border-top: 1px solid var(--hair); padding: 22px clamp(20px,5vw,56px); font-size: 12px;
  letter-spacing: 0.04em; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Lovetts Tables — this app's own components (base tokens above are shared
   verbatim with lovetts-workspace/web/styles.css; nothing above this line
   was edited).
   ═══════════════════════════════════════════════════════════════════════ */

/* Page background + left/right insets: this app matches
   lovetts-newlyn.co.uk/reservations (white page, tighter gutters) rather
   than lovetts-workspace's client-specified grey - everything else about
   the shared tokens/components above is untouched. */
:root { --bg: #fff; }
/* Reservations layout: .dur-row is this app's own flex row (undocumented
   in the shared base above - lovetts-workspace has no equivalent), holding
   .dur__intro and .card as flat siblings - NOT .card nested inside .dur the
   way the shared "step 1: duration" pattern above has it (that
   .dur/.dur__intro/.card grouping is lovetts-workspace's own markup,
   untouched; this app's app.js simply never emits a `.dur` element, so that
   shared rule is inert here).
   This used to also carry a third sibling, .dur__photo (an interior shot,
   shown only from 1150px up), with .card's height/overflow-y locked to
   match the photo's bottom edge and a hidden-scrollbar fallback so the
   card's own content could still scroll internally without visibly
   clipping past the photo. Both the photo and that height-matching/
   internal-scroll machinery were removed on the client's request
   (2026-08) - the desktop view no longer has a photo, and .card now just
   flows in the page like every other block, relying on ordinary
   whole-page scrolling instead of its own scrollable box. Recoverable
   from git history if the photo ever comes back, but don't resurrect the
   height-matching approach without checking this note is stale. */
.dur-row { display: flex; flex-wrap: wrap;
  padding: clamp(32px,5vw,64px) clamp(16px,4vw,44px); gap: clamp(28px,5vw,72px); }
.hdr, .rail, .foot { padding-left: clamp(16px,4vw,44px); padding-right: clamp(16px,4vw,44px); }
.dur__intro { flex: 1 1 300px; max-width: 440px; }
.card { flex: 1 1 360px; max-width: 460px; }

.dur__intro h1 { font-weight: 500; }

/* hours summary under each service's own heading in the time-picker - one
   line each for the hours range, the Sunday note (brunch only), the "at the
   table" duration, and the italic "Last sitting" line. This used to also
   render (minus the bold name) in the left intro column via a shared
   .hours-list/.hours-block wrapper - dropped from there as a duplicate of
   what's here (see viewBook's comment), so those two wrapper classes went
   with it; the hb-* line classes below are still used, just from .svc-sub
   alone now. */
.svc-block p.svc-sub { display: flex; flex-direction: column; font-size: 15px; line-height: 1.5; color: var(--body2); }
.hb-sitting { font-style: italic; }

/* party-size stepper */
.stepper__note { font-size: 12px; color: var(--muted); margin-top: 8px; }
#party-select { max-width: 220px; font-family: var(--display); font-weight: 700; font-size: 17px; }

/* .card (shared base rule, from the desk-booking app) is a flex item with no
   min-width set, so by default a flex item won't shrink below its content's
   min-content size. lovetts-workspace never hit this because nothing inside
   its .card is wider than the viewport; the date-strip below IS (by design -
   it's meant to scroll sideways *within itself*), and without this override
   that forced .card - and the whole page - wider than the viewport on
   mobile instead of just the strip scrolling. min-width: 0 lets .card shrink
   to the available width again so only .date-strip scrolls, not the page. */
.card { min-width: 0; }

/* date strip - horizontally scrollable day picker */
.date-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 14px 0 6px; }
.date-chip { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 14px; border-radius: 8px; border: 1px solid var(--hair3); background: var(--card); color: var(--ink); }
.date-chip b { font-size: 15px; font-weight: 700; }
.date-chip span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.date-chip.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.date-chip.on span { color: rgba(246,243,236,.7); }

/* time picker - grouped by service, pill buttons like a real reservation grid */
.svc-block { margin-top: 24px; }
.svc-block h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.svc-block p.svc-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.time-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.time-pill { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ink); font-size: 14px;
  font-weight: 600; color: var(--ink); background: #fff; transition: .15s; }
.time-pill.sel { background: var(--ink); color: var(--card); }
.time-pill[disabled] { border-color: var(--hair3); color: var(--muted); background: var(--floor);
  cursor: not-allowed; text-decoration: line-through; opacity: .7; }
@media (hover: hover) { .time-pill:not([disabled]):not(.sel):hover { background: #d9a3bd; border-color: var(--ink); } }
.time-empty { font-size: 14px; color: var(--muted); padding: 10px 0; }
/* Private-event override (see EVENT_BLOCKS in _worker.js): reads as a
   deliberate notice, not a generic "nothing available today" empty state -
   left border + darker ink so it doesn't get skimmed past as the same muted
   copy as .time-empty's ordinary case. */
.time-empty--event { color: var(--body2); border-left: 2px solid var(--ink); padding: 8px 0 8px 12px; }
/* Event sittings (EVENT_OVERRIDES in _worker.js): a couple of fixed
   seatings, not a dense grid of many close-together start times, so each
   gets its own full-width row with room for the time range + arrival note
   stacked, rather than the normal .time-pill's single short label. */
.time-grid--event { flex-direction: column; }
.time-pill--event { border-radius: 8px; padding: 14px 18px; text-align: left; display: flex;
  flex-direction: column; gap: 2px; }
.time-pill--event b { font-size: 15px; }
.time-pill--event span { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.time-pill--event.sel span { color: rgba(246,243,236,.7); }

/* details panel additions */
.field textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--ink); border-radius: 3px;
  background: #fff; font-size: 15px; color: var(--ink); font-family: inherit; resize: vertical; min-height: 70px; }
.policy-box { background: #fff; border: 1px solid var(--hair3); border-radius: 4px; padding: 14px 16px;
  font-size: 13px; line-height: 1.6; color: var(--body2); margin-top: 18px; }
.policy-box b { color: var(--ink); }

/* admin: place/status/fee badges */
.badge { display: inline-flex; align-items: center; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.badge--muted { background: var(--floor); color: var(--body2); }
.badge--ok { background: var(--avail); color: var(--avail-tx); }
.badge--warn { background: #f0d789; color: #4a3a06; }
.badge--danger { background: var(--booked); color: var(--booked-tx); }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* admin: bookings table row action buttons (charge/waive/no-show/cancel) */
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn--tiny { font-size: 11.5px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--ink);
  color: var(--ink); background: #fff; white-space: nowrap; }
.btn--tiny:hover { background: var(--ink); color: var(--card); }
.btn--tiny.danger { border-color: #9a2d18; color: #9a2d18; }
.btn--tiny.danger:hover { background: #9a2d18; color: #fff; }
.btn--tiny[disabled] { opacity: .35; cursor: not-allowed; }
.btn--tiny[disabled]:hover { background: #fff; color: var(--ink); }