/* 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; }
.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 photo), holding
   .dur__intro, .card and .dur__photo as three 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). Flat siblings, rather than
   .dur wrapping intro+card, is what lets .card sit flush against the
   photo and the header divider on desktop while .dur__intro keeps its own
   padded inset - a shared parent's padding can only apply to all of its
   children alike, and intro/card/photo each need a different inset. */
.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__photo { display: none; }
@media (min-width: 1150px) {
  /* Desktop: .card sheds its container's padding/gap and the shared .card
     rule's border+radius (above) to become a second full-bleed panel
     matching the photo's height, flush under the header divider, no
     border. .dur-row's OWN padding/gap is zeroed so nothing is inset by
     default; .dur__intro's inset (top, bottom, and the gap before .card)
     is re-added on itself alone, since that's the only column that still
     wants one. Left gutter stays on .dur-row (only .dur__intro starts
     there, so putting it on the shared container - rather than on
     .dur__intro's own padding-left - is equivalent and simpler).
     .card and .dur__photo did briefly sit fully flush against each other
     too (no gap at all), per an earlier ask - reverted on request in
     favour of card's own margin-right below, a plain white gutter back
     between them, matching the intro-to-card gap's value.
     --photo-h (defined once here so .card and .dur__photo can't drift
     apart) is header height (~82px) - .dur-row has no top padding at this
     breakpoint, so .card and .dur__photo, having none of their own
     either, sit flush under it.
     .card gets height (a hard match to the photo's base, not a min-height
     floor it's free to grow past) plus overflow-y:auto as the safety
     valve: a min-height version let the card run past the photo's bottom
     edge - and past the footer divider below it - whenever its own
     content needed more room than one screen-height, which looked like a
     bug even though nothing was clipped. Fixed height keeps the card's
     bottom edge pinned to the photo's (and, since .dur-row's own height
     then can't be pushed taller by either child, to the footer divider
     right after it too) in the normal case where content fits; on a
     viewport short enough that it doesn't, the card scrolls internally
     rather than pushing its own border down past the photo - the
     scrollbar-hiding rules below keep that fallback invisible so it
     doesn't read as a stray UI element on the ordinary case where nothing
     is actually cut off; the content is still fully reachable by wheel/
     touch/keyboard scroll either way, just without the visible track. */
  .dur-row { padding: 0 0 0 clamp(16px,4vw,44px); gap: 0; }
  .dur-row { --photo-h: calc(100vh - 82px); }
  .dur__intro { padding: clamp(32px,5vw,64px) clamp(28px,5vw,72px) clamp(32px,5vw,64px) 0; }
  .card { border: none; border-radius: 0; height: var(--photo-h); overflow-y: auto;
    margin-right: clamp(28px,5vw,72px); scrollbar-width: none; -ms-overflow-style: none; }
  .card::-webkit-scrollbar { display: none; }
  /* .dur__photo's only child is a single <img>, which can't overflow
     (object-fit:cover just crops to whatever box it's given) - height is
     also what the img's own height:100% below needs to resolve against. */
  .dur__photo { display: block; flex: 1 1 300px; min-width: 220px; max-width: 33vw;
    height: var(--photo-h); }
  .dur__photo img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
}

.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; }

/* 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); }