:root {
  --brand: #1f5f5b;
  --brand-dark: #154340;
  --brand-soft: #e3efee;
  --brand-soft: color-mix(in srgb, var(--brand) 13%, #ffffff);
  --bg: #fbf7f0;
  --card: #ffffff;
  --ink: #2a211c;
  --muted: #6f625a;
  --line: #e6dccf;
  --ok: #2f6b3a;
  --ok-bg: #e4f2e6;
  --warn: #8a5a00;
  --warn-bg: #fff3d6;
  --block: #a1261a;
  --block-bg: #fde6e3;
  --info-bg: #eef1f6;
  --shadow: 0 1px 2px rgba(42, 33, 28, .08), 0 2px 8px rgba(42, 33, 28, .06);
  --nav-h: 64px;
  --brand-ink: var(--brand); /* the brand color when it is used for words, links and focus rings */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-soft: color-mix(in srgb, var(--brand) 30%, #221c19);
    --brand-ink: color-mix(in srgb, var(--brand) 35%, #ffffff);
    --bg: #171311; --card: #221c19; --ink: #f3ece6; --muted: #b3a69c; --line: #3a312c;
    --ok: #7fc48c; --ok-bg: #1f3324; --warn: #f0c060; --warn-bg: #3a2f14;
    --block: #ff8f80; --block-bg: #3d1d19; --info-bg: #232a35;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand-soft: color-mix(in srgb, var(--brand) 30%, #221c19);
  --brand-ink: color-mix(in srgb, var(--brand) 35%, #ffffff);
  --bg: #171311; --card: #221c19; --ink: #f3ece6; --muted: #b3a69c; --line: #3a312c;
  --ok: #7fc48c; --ok-bg: #1f3324; --warn: #f0c060; --warn-bg: #3a2f14;
  --block: #ff8f80; --block-bg: #3d1d19; --info-bg: #232a35;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}
a { color: var(--brand-ink); }
h1 { font-size: 1.6rem; margin: 0; line-height: 1.15; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: .8rem 0 .4rem; }
p { margin: .3rem 0; }
.muted { color: var(--muted); font-size: .9rem; }
.small { font-size: .82rem; }

#topline {
  display: flex; align-items: center; gap: .4rem; padding: calc(6px + env(safe-area-inset-top)) 16px 4px;
  font-size: .75rem; color: var(--muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }
.dot.off { background: var(--warn); }
.demo-flag { margin-left: auto; background: var(--warn-bg); color: var(--warn); padding: 1px 8px; border-radius: 99px; font-weight: 600; }

#view { padding: 4px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; outline: none; }
body.has-sticky #view { padding-bottom: calc(var(--nav-h) + 150px + env(safe-area-inset-bottom)); }

.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: 6px 0 12px; }
.page-h .sub { color: var(--muted); margin: 2px 0 0; font-size: .95rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 0 0 12px; box-shadow: var(--shadow); }
.card.flat { box-shadow: none; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--block); border-color: var(--block); background: transparent; }
.btn-xl { width: 100%; min-height: 58px; font-size: 1.1rem; margin-bottom: 12px; }
.btn-sm { min-height: 44px; padding: 0 12px; font-size: .9rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 8px; }
.btn-row { display: flex; gap: 8px; }
.btn-row > .btn { flex: 1; }

/* forms */
label.f { display: block; margin: 0 0 12px; }
label.f > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=time], input[type=password], input[type=search], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-ink); outline-offset: 1px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-bottom: 12px; }
.check input { width: 26px; height: 26px; flex: 0 0 auto; margin: 0; accent-color: var(--brand); }
.req { color: var(--block); }
.field-err { color: var(--block); font-size: .85rem; margin-top: 4px; }

/* segmented */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  flex: 1 1 auto; min-height: 48px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.seg button.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* package cards */
.pkg { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; margin-bottom: 8px; cursor: pointer; min-height: 56px; }
.pkg.on { border-color: var(--brand-ink); background: var(--brand-soft); }
.pkg b { display: block; }

/* stepper */
.stepper { display: grid; grid-template-columns: 52px 52px 1fr 52px 52px; gap: 6px; }
.stepper button { min-height: 52px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.stepper input { text-align: center; font-size: 1.3rem; font-weight: 700; min-height: 52px; }

/* toggles */
.toggle { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); min-height: 56px; }
.toggle:first-of-type { border-top: 0; }
.switch { position: relative; width: 54px; height: 32px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 99px; transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(22px); }

/* pills */
.pill { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: .03em; background: var(--info-bg); color: var(--ink); white-space: nowrap; }
.pill.lead { background: var(--info-bg); }
.pill.toured { background: #ece4f7; color: #4b2c7a; }
.pill.quoted { background: var(--warn-bg); color: var(--warn); }
.pill.booked { background: var(--ok-bg); color: var(--ok); }
.pill.lost { background: var(--block-bg); color: var(--block); }
.pill.demo { background: var(--warn-bg); color: var(--warn); }
.pill.ph { background: var(--warn-bg); color: var(--warn); text-transform: none; font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.toured { background: #2d2440; color: #cdb8f0; } }

/* lists */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; }
.li-link { display: flex; align-items: center; gap: 10px; padding: 12px 2px; color: var(--ink); text-decoration: none; min-height: 60px; }
.li-link .name { font-weight: 600; }
.li-right { margin-left: auto; text-align: right; flex: 0 0 auto; }

.fu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.fu:first-of-type { border-top: 0; }
.fu .who { flex: 1 1 180px; min-width: 0; }
.fu .acts { display: flex; gap: 6px; margin-left: auto; }
.count { display: inline-block; min-width: 26px; padding: 0 7px; border-radius: 99px; background: var(--brand); color: #fff; font-size: .85rem; text-align: center; margin-left: 4px; }

.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: none; }
.chips a { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.chips a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.statgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.statgrid a { text-decoration: none; color: var(--ink); text-align: center; padding: 8px 2px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.statgrid b { display: block; font-size: 1.3rem; }
.statgrid span { font-size: .7rem; text-transform: uppercase; color: var(--muted); }

/* alerts */
.alerts { margin: 0 0 10px; padding: 0; list-style: none; }
.alerts li { padding: 8px 12px; border-radius: 10px; margin-bottom: 6px; font-size: .92rem; }
.alerts .block { background: var(--block-bg); color: var(--block); font-weight: 600; }
.alerts .warn { background: var(--warn-bg); color: var(--warn); }
.alerts .info { background: var(--info-bg); }

/* quote lines */
table.lines { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.lines td { padding: 6px 0; border-top: 1px solid var(--line); vertical-align: top; }
table.lines td:last-child { text-align: right; white-space: nowrap; padding-left: 8px; }
table.lines tr.total td { font-weight: 800; font-size: 1.1rem; }

table.inv { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.inv th, table.inv td { padding: 8px 4px; border-top: 1px solid var(--line); text-align: right; }
table.inv th:first-child, table.inv td:first-child { text-align: left; }
table.inv th { font-size: .75rem; text-transform: uppercase; color: var(--muted); border-top: 0; }
td.short { color: var(--block); font-weight: 800; }

/* sticky total bar */
#sticky { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 20; }
#sticky:empty { display: none; }
.totalbar { max-width: 640px; margin: 0 auto; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(0,0,0,.08); padding: 10px 16px; }
.totalbar .big { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.totalbar .big.incomplete { color: var(--block); font-size: 1.15rem; }
.totalbar .btn-row { margin-top: 8px; }

/* nav */
#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--card); border-top: 1px solid var(--line);
}
#tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 600; -webkit-tap-highlight-color: transparent; }
#tabs a .ti { font-size: 1.25rem; line-height: 1; }
#tabs a.on { color: var(--brand-ink); }
#tabs a.tab-new .plus { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 400; }

/* sheet */
#sheet-wrap { position: fixed; inset: 0; z-index: 50; }
#sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
#sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; background: var(--card); border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }
#sheet h2 { font-size: 1.2rem; }
.preview { white-space: pre-wrap; }

#toast { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%) translateY(-80px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 99px; font-weight: 600; font-size: .9rem; z-index: 60; transition: transform .2s; pointer-events: none; max-width: 90vw; }
#toast.show { transform: translateX(-50%) translateY(0); }

details > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.ratetbl { width: 100%; border-collapse: collapse; }
.ratetbl th { font-size: .72rem; color: var(--muted); text-transform: uppercase; text-align: left; padding: 2px; }
.ratetbl td { padding: 2px; }
.ratetbl input { min-height: 44px; padding: 6px; font-size: .95rem; }
.settings-item { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.settings-item:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.note { background: var(--info-bg); border-radius: 10px; padding: 8px 10px; font-size: .85rem; margin: 6px 0 10px; }
.note.ph { background: var(--warn-bg); color: var(--warn); }
.empty { color: var(--muted); padding: 8px 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .95rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* ---------- v0.2 screens ---------- */
.lbl { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 6px; }
.datebar { display: grid; grid-template-columns: 52px 1fr 52px; gap: 6px; }
.datebar .btn { padding: 0; font-size: 1.4rem; }
.datebar input { font-size: 1.1rem; font-weight: 700; text-align: center; }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pill.peak { background: var(--brand-soft); color: var(--brand-ink); }
.pill.off { background: var(--info-bg); color: var(--ink); }
.pill.held { background: #e3ecfb; color: #234a8a; }
.pkg span { display: block; }
.pkg.greyed { opacity: .5; border-style: dashed; }
.ladder { display: flex; width: 100%; align-items: center; gap: 8px; min-height: 52px; padding: 6px 2px; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; flex-wrap: wrap; }
.ladder.cur { font-weight: 700; cursor: default; }
.ladder.cur .grow::before { content: "\25B8 "; color: var(--brand-ink); }
.save { color: var(--ok); font-weight: 700; font-size: .9rem; }
.linenbtn { width: 100%; justify-content: flex-start; }
.sw { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(0,0,0,.2); display: inline-block; flex: 0 0 auto; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.mchip { min-height: 48px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .95rem; cursor: pointer; }
.mchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.monthnav { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; text-align: center; gap: 6px; margin-bottom: 10px; }
.monthnav .btn { padding: 0; font-size: 1.4rem; }
.cal { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px; margin-bottom: 8px; }
.calhead, .calrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calhead span { text-align: center; font-size: .72rem; color: var(--muted); font-weight: 700; padding: 4px 0; }
.calrow { margin-top: 3px; }
.calcell { min-height: 46px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); font-size: .9rem; }
.calcell small { font-size: .6rem; line-height: 1; }
.calcell.empty { background: none; }
.calcell.open.peak { background: var(--brand-soft); }
.calcell.open.off { background: var(--info-bg); }
.calcell.booked { background: var(--brand); color: #fff; }
.calcell.held { background: repeating-linear-gradient(45deg, #cddcf6, #cddcf6 5px, #eef3fc 5px, #eef3fc 10px); color: #1d3d75; }
.calcell.past { opacity: .4; }
.calcell.today { outline: 2px solid var(--ink); }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-left: 6px; }
.key.booked { background: var(--brand); } .key.held { background: #cddcf6; } .key.peak { background: var(--brand-soft); border: 1px solid var(--line); } .key.off { background: var(--info-bg); border: 1px solid var(--line); }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { border-top: 1px solid var(--line); }
.checklist li:first-child { border-top: 0; }
.checklist label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; min-height: 52px; }
.checklist input { width: 26px; height: 26px; margin: 0; flex: 0 0 auto; accent-color: var(--ok); }
.checklist small { display: block; font-size: .8rem; }
.checklist li.short span { color: var(--block); font-weight: 700; }
.checklist li.unknown small { color: var(--muted); }
.checklist input:checked + span { text-decoration: line-through; opacity: .6; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; min-height: 80px; }
.swatch .sw { width: 34px; height: 34px; border-radius: 50%; }
.swatch .nm { font-size: .8rem; font-weight: 600; text-align: center; line-height: 1.1; }
.swatch small { font-size: .7rem; color: var(--muted); }
.swatch.short { border-color: var(--block); }
.swatch.short small { color: var(--block); font-weight: 700; }
.swatch.unset { opacity: .7; }
.f .lbl { margin-top: 0; }
.seg.src button { flex: 1 1 40%; font-size: .88rem; }

/* hand-the-phone mode and couple page: no owner chrome */
body.handoff #tabs, body.handoff #topline, body.couple #tabs, body.couple #topline { display: none; }
body.handoff #view, body.couple #view { padding-bottom: 40px; padding-top: 16px; }
.handoff-h, .couple-h { text-align: center; margin: 10px 0 16px; }
.handoff-h h1, .couple-h h1 { font-size: 1.8rem; color: var(--brand-ink); }
.holdcard { text-align: center; border-color: var(--brand); }
.holdcard .big { font-size: 1.4rem; font-weight: 800; color: var(--brand-ink); }

@media print {
  #tabs, #topline, #sticky, .noprint, #toast { display: none !important; }
  body { background: #fff; color: #000; }
  #view { padding: 0; }
  .card { box-shadow: none; border: 1px solid #999; }
}

/* ---------- event types, radar, readiness ---------- */
.radar-link { display: block; text-decoration: none; color: var(--ink); }
.radar-link b { display: block; color: var(--brand-ink); }
.radar-month { font-weight: 800; font-size: .8rem; text-transform: uppercase; color: var(--muted); padding: 12px 0 4px; }
.fits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pill.fit { background: var(--ok-bg); color: var(--ok); text-transform: none; font-weight: 600; }
.pill.stage { background: var(--brand-soft); color: var(--brand-ink); }
details.settings-item > summary { font-weight: 700; }

/* ---------- supplies count (one hand, storeroom) ---------- */
.seg .segbtn { flex: 1 1 auto; min-height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 600; text-decoration: none; }
.seg .segbtn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.card.sup { padding: 10px 12px; }
.suprow { border-top: 1px solid var(--line); padding: 10px 0; }
.suprow:first-of-type { border-top: 0; }
.supname { font-weight: 600; margin-bottom: 6px; }
.suprow.need .supname { color: var(--block); }
.supctl { display: grid; grid-template-columns: 56px 1fr 48px 72px; gap: 6px; align-items: stretch; }
.sbtn { min-height: 56px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 1.6rem; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.sbtn.small { font-size: 1rem; }
.scount { min-height: 56px; border-radius: 12px; border: 2px solid var(--brand); background: var(--brand-soft); color: var(--ink); font: inherit; font-size: 1.8rem; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.scount.blank { color: var(--muted); border-style: dashed; }
.needbtn { min-height: 56px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.needbtn.on { background: var(--block); border-color: var(--block); color: #fff; }
.parrow { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .85rem; color: var(--muted); }
.parrow input { width: 90px; min-height: 44px; }

/* ---------- owner review mode ---------- */
#review-banner { position: sticky; top: 0; z-index: 41; display: flex; align-items: center; gap: 10px; background: #fff3c4; color: #5c4300; font-size: .82rem; font-weight: 700; padding: 6px 8px 6px 16px; }
#review-banner[hidden] { display: none; }
#review-banner span { flex: 1; }
#fb-btn { flex: 0 0 auto; min-height: 44px; min-width: 76px; padding: 0 12px; border-radius: 99px; border: 0; background: #2a211c; color: #fff; font-size: 1.15rem; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
#tour-card { position: sticky; top: 58px; z-index: 40; margin: 0 16px 8px; background: #2a211c; color: #fff; border-radius: 14px; padding: 12px 14px; font-size: .95rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
#tour-card .muted { color: #d8cfc7; }
#tour-card .btn-row { margin-top: 10px; }
#tour-card .btn:not(.btn-primary) { background: transparent; color: #fff; border-color: #6b5f57; }
.tour-hl { outline: 4px solid #f0b400 !important; outline-offset: 3px; animation: tourpulse 1.2s ease-in-out infinite; position: relative; z-index: 5; }
@keyframes tourpulse { 50% { outline-color: rgba(240, 180, 0, .35); } }
@media (prefers-reduced-motion: reduce) { .tour-hl { animation: none; } }
.thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.thumb { min-height: 72px; font-size: 2rem; border-radius: 14px; border: 2px solid var(--line); background: var(--card); cursor: pointer; }
.thumb.on { border-color: var(--brand-ink); background: var(--brand-soft); }
pre.preview { white-space: pre-wrap; background: var(--bg); padding: 8px; border-radius: 8px; }
body.couple #review-banner, body.couple #fb-btn, body.couple #tour-card, body.handoff #fb-btn, body.handoff #review-banner { display: none !important; }
@media print { #review-banner, #fb-btn, #tour-card { display: none !important; } }

/* ---------- supplies: two sheets, collapsible groups ---------- */
.sheethead { margin: 16px 0 10px; }
.sheethead h2 { margin-bottom: 8px; }
.grouphead { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 4px 2px; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.grouphead .chev { font-size: .9rem; color: var(--muted); }
.grouphead[aria-expanded="true"] { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.needtxt { color: var(--block); }

/* review mode: toast moves to the bottom (above the nav and any sticky bar) so it never covers the review banner or the tour card */
body.review #toast { top: auto; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(0); opacity: 0; transition: opacity .2s; }
body.review.has-sticky #toast { bottom: calc(var(--nav-h) + 240px + env(safe-area-inset-bottom)); }
body.review #toast.show { opacity: 1; }


/* ---------- product build: plain words, bigger text, owner tools ---------- */
.small { font-size: .875rem; }
.pill { font-size: .8rem; }
.pill.plain { text-transform: none; letter-spacing: 0; }
#tabs a { font-size: .8rem; }
.statgrid span { font-size: .8rem; text-transform: none; }
.calcell small { font-size: .68rem; }
.backbar { display: flex; align-items: center; min-height: 48px; margin: 0 -4px 6px; padding: 0 4px; font-weight: 700; text-decoration: none; color: var(--brand-ink); }
.li-link, .fu .who a { min-height: 48px; }
.fu .who a { display: inline-flex; align-items: center; }
.actgap { display: inline-block; width: 14px; }
.venue-line { font-weight: 700; color: var(--brand-ink); margin: 0; }
.logo-sm { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; display: block; margin-bottom: 4px; }
.logo-prev { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); vertical-align: middle; }
.setup-nudge { display: block; text-decoration: none; color: var(--ink); border-color: var(--brand); }
.setup-nudge b { display: block; color: var(--brand-ink); }
.totalbar.unsure { border-top: 4px solid #d99a00; }
.unsure-note { background: var(--warn-bg); color: var(--warn); font-weight: 700; font-size: .9rem; padding: 6px 10px; border-radius: 8px; margin-top: 6px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; text-decoration: underline; color: var(--block); }
.totalbar .big.incomplete.linkish { font-size: 1.15rem; font-weight: 800; min-height: 44px; }
.btn.looks-off { opacity: .55; }
#toast.undo { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
#toast button { min-height: 44px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--bg); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.needbtn.on { background: #a1261a; border-color: #a1261a; color: #fff; }
.danger-zone { border-color: var(--block); }
.wiz-hero { margin: 18px 0 16px; }
.wiz-hero h1 { color: var(--brand-ink); }
.wiz-dots { color: var(--muted); font-weight: 700; margin: 10px 0 4px; }
.wiz-nav { margin: 6px 0 24px; }
body.wizard #tabs, body.wizard #review-banner, body.wizard #tour-card { display: none !important; }
body.wizard #view { padding-bottom: 40px; }
details.card > summary { min-height: 48px; }

/* ---------- polish pass 2026-10-04 ---------- */
/* keyboard and switch users can always see where they are */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, label.btn:focus-within { outline: 3px solid var(--brand-ink); outline-offset: 2px; }
#view:focus { outline: none; }
/* audit M2: a package that does not fit the guest count stays readable (no fading), with a dashed edge */
.pkg.greyed { opacity: 1; border-style: dashed; background: var(--bg); }
.pkg.greyed .muted { color: var(--warn); font-weight: 700; }
#toast button { min-height: 44px; }
button.backbar.linkish { color: var(--brand-ink); text-decoration: none; background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.guestnote { margin: 8px 0 0; }
.note.restored { background: var(--warn-bg); color: var(--warn); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 600; }
.note.restored .btn { color: var(--ink); }
.helper-btn { width: 100%; margin: 0 0 12px; border-style: dashed; }
.answer { background: var(--info-bg); border-radius: 10px; padding: 12px; margin: 10px 0; font-size: 1rem; line-height: 1.45; white-space: pre-wrap; }
.answer:empty { display: none; }
.chips button { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; }
.install { border-color: var(--brand); }
.install b { display: block; color: var(--brand-ink); }
.card .install { border: 0; padding: 0; margin: 0 0 8px; }
#sheet .stack .btn + .btn { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* a message never covers the buttons of an open sheet: it moves to the top */
body.sheet-open #toast, body.review.sheet-open #toast, body.review.has-sticky.sheet-open #toast { top: calc(10px + env(safe-area-inset-top)); bottom: auto; }
#new-lead .field-err { margin: -4px 0 12px; font-weight: 600; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--block); border-width: 2px; }

/* ---- Round 2 (2026-10-04): accessibility and phone polish ---- */
::placeholder { color: var(--muted); opacity: 1; } /* placeholders were 3.6:1 in dark mode */
input[type=color] { min-height: 44px; min-width: 64px; padding: 2px; }
input[type=file] { max-width: 100%; min-height: 44px; }
.seeall { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* Notched phones held sideways: keep words away from the notch and the rounded corners */
#view { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
#topline { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
#tabs { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.totalbar, #sheet { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
/* Big text or 200% zoom: nothing may push the page sideways */
.page-h { flex-wrap: wrap; }
.btn-row { flex-wrap: wrap; }
.btn-row > .btn { min-width: 0; }
.datebar { grid-template-columns: 52px minmax(0, 1fr) 52px; }
.datebar input { min-width: 0; width: 100%; }
.monthnav { grid-template-columns: 52px minmax(0, 1fr) 52px; }
#tabs a { min-width: 0; overflow: hidden; }
#tabs a > span:last-child { max-width: 100%; overflow-wrap: anywhere; text-align: center; line-height: 1.1; }
@media (max-width: 340px) {
  .pill { white-space: normal; }
  .row { flex-wrap: wrap; }
  .statgrid { grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); }
  .datebar { grid-template-columns: 1fr 1fr; }
  .datebar input { grid-column: 1 / -1; grid-row: 1; font-size: 1rem; }
  .stepper { grid-template-columns: 1fr 1fr; } /* guest count on top, then -10 -1, then +1 +10: still 44 px+ to tap */
  .stepper input { grid-column: 1 / -1; grid-row: 1; }
}
/* ---- Round 3 (2026-10-04): data-safety messages ---- */
#store-warn { position: sticky; top: 0; z-index: 45; background: #8f1d14; color: #fff; padding: 10px 16px; font-size: .92rem; line-height: 1.35; }
#store-warn .btn { display: flex; width: fit-content; margin: 8px 0 0; background: #fff; color: #8f1d14; border-color: #fff; }
.card.problem { border: 2px solid #b3261e; }
.card.problem h1, .card.problem h2 { color: #8f1d14; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card.problem h1, :root:not([data-theme="light"]) .card.problem h2 { color: #ffb4ab; } }
/* Round 3: bars on short phones. Measured before this fix: on a 360x640 phone the feedback banner, the
   tour card, the tab bar and the total bar covered 62% of the price screen (243 px left to read), 70% on
   320x568. Now the tour INVITE scrolls away on every phone (only a running tour step stays pinned, it is
   the instruction), and on phones up to 740 px tall the banner scrolls away and the pinned parts are tighter. */
#tour-card:not(.step) { position: static; }
@media (max-height: 740px) {
  #review-banner { position: static; }
  #tour-card { top: 0; padding: 8px 12px; font-size: .88rem; }
  #tour-card .btn-row { margin-top: 6px; }
  .totalbar { padding-top: 6px; padding-bottom: 6px; }
  .totalbar .big { font-size: 1.35rem; }
  .totalbar .btn-row { margin-top: 4px; }
}
/* Short screens (a phone held sideways, or 200% zoom): the banner, the tour card and the total bar
   would cover almost the whole page, so they scroll with the page instead. Normal phones held upright
   are taller than 520 px and keep the total bar fixed at the bottom. */
@media (max-height: 520px) {
  #review-banner, #tour-card { position: static; }
  #sticky { position: static; margin-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  body.has-sticky #view { padding-bottom: 12px; }
  #tabs a { font-size: .62rem; }
  .totalbar .btn-row > .btn { flex: 1 1 100%; }
}
/* Round 4 (2026-10-04): one quote's note and terms, budget and date chips, offered tour times, what is new. */
ul.qextra { margin: 10px 0 0; padding-left: 18px; }
ul.qextra li { margin: 2px 0; }
dl.qextra { margin-top: 10px; }
#q-extra .btn-sm { margin-left: 4px; }
.chiprow2 { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.chiprow2 button { min-height: 44px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; }
.chiprow2 button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pill.budget, .pill.dates { background: var(--info-bg); color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 600; }
.offer .stack .btn { text-align: left; }
.card.whatsnew { border-color: var(--brand); }
.card.whatsnew ul { margin: 6px 0 10px; padding-left: 18px; }
.slotrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.slotrow select, .slotrow input { flex: 1 1 120px; }
#qt-count { margin-left: 6px; }

/* ======================================================================================================
   v0.9.1 VISUAL POLISH (2026-10-04, look only). One calm design layer on top of everything above.
   Nothing above was removed, so every earlier fix (44 px targets, AA contrast, 200% zoom, short phones)
   still applies; this layer only changes color, type, spacing, radius and depth.
   Palette idea: white walls, black doors, warm pine inside, lantern brass. The venue color
   (Settings, Brand color) still drives --brand; --brand-fill and --on-brand let dark mode use a light
   tint of it for filled buttons, so a very dark brand color still reads as a button on a dark page.
   ====================================================================================================== */
:root {
  --line: #ebe3d8;
  --line-strong: #d6cab9;
  --accent: #b07d3e;          /* warm pine and lantern brass: lines and dots only, never small words */
  --accent-ink: #84592a;      /* brass for small words: 6.1:1 on white, 5.7:1 on the page */
  --brand-soft: #eef2f1;
  --brand-soft: color-mix(in srgb, var(--brand) 9%, #fbf6ef);
  --brand-fill: var(--brand);
  --on-brand: #ffffff;
  --r-card: 18px;
  --r-ctl: 14px;
  --shadow: 0 1px 2px rgba(52, 38, 24, .05), 0 6px 18px rgba(52, 38, 24, .06);
  --shadow-lift: 0 2px 6px rgba(52, 38, 24, .08), 0 14px 32px rgba(52, 38, 24, .12);
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
  --banner-bg: #f2e9da;
  --banner-ink: #4b3a24;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --line: #382f29; --line-strong: #4b4038;
    --accent: #d2a160; --accent-ink: #dcb27a;
    --brand-ink: color-mix(in srgb, var(--brand) 35%, #fff6ea);
    --brand-soft: #2f3634;
    --brand-soft: color-mix(in srgb, var(--brand-ink) 14%, #221c19);
    --brand-fill: var(--brand-ink);
    --on-brand: #1c1714;
    --shadow: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-lift: 0 10px 30px rgba(0, 0, 0, .45);
    --banner-bg: #2a231d; --banner-ink: #ecdfcc;
  }
}
:root[data-theme="dark"] {
  --line: #382f29; --line-strong: #4b4038;
  --accent: #d2a160; --accent-ink: #dcb27a;
  --brand-ink: color-mix(in srgb, var(--brand) 35%, #fff6ea);
  --brand-soft: #2f3634;
  --brand-soft: color-mix(in srgb, var(--brand-ink) 14%, #221c19);
  --brand-fill: var(--brand-ink);
  --on-brand: #1c1714;
  --shadow: 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, .45);
  --banner-bg: #2a231d; --banner-ink: #ecdfcc;
}

/* type: one sans for reading, one serif for page titles and big money (system fonts only, nothing downloaded) */
body { font-family: var(--font-ui); line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -.005em; line-height: 1.1; }
h2 { font-size: 1.07rem; font-weight: 700; letter-spacing: -.004em; margin: 0 0 .7rem; }
#sheet h2 { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0; }
.page-h { margin: 10px 0 16px; }
.page-h .sub { font-size: .95rem; }
.venue-line { font-weight: 700; color: var(--accent-ink); text-transform: uppercase; letter-spacing: .13em; font-size: .74rem; }

/* cards: soft depth, one radius */
.card { border-radius: var(--r-card); padding: 16px; margin: 0 0 14px; border-color: var(--line); box-shadow: var(--shadow); }
.card.flat { box-shadow: none; background: transparent; }
.cal { border-radius: var(--r-card); padding: 8px; border-color: var(--line); box-shadow: var(--shadow); }

/* buttons: calm, one radius, filled only for the main action */
.btn { border-radius: var(--r-ctl); border-color: var(--line-strong); font-weight: 650; letter-spacing: .005em; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.btn-primary { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); box-shadow: 0 1px 2px rgba(30, 20, 10, .16), 0 3px 10px rgba(30, 20, 10, .10); }
.btn-danger { border-color: var(--block); }
.fu .acts .btn-primary, .row .btn-primary.btn-sm { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-ink); box-shadow: none; }
.seg button, .seg .segbtn, .stepper button, .datebar .btn, .monthnav .btn, .sbtn, .needbtn, .mchip, .chips a, .chips button, .chiprow2 button { border-color: var(--line-strong); }
.seg button, .seg .segbtn, .stepper button { border-radius: 12px; }
.seg button.on, .seg .segbtn.on, .mchip.on, .chiprow2 button.on { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); }
.switch input:checked + span { background: var(--brand-fill); }
.count { background: var(--brand-fill); color: var(--on-brand); font-weight: 700; font-size: .8rem; padding: 1px 8px; vertical-align: 2px; }
#tabs a.tab-new .plus { background: var(--brand-fill); color: var(--on-brand); }
.calcell.booked, .key.booked { background: var(--brand-fill); color: var(--on-brand); }
.card.whatsnew, .setup-nudge, .install, .holdcard { border-color: var(--brand-ink); }

/* forms */
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=time], input[type=password], input[type=search], select, textarea { border-color: var(--line-strong); border-radius: 12px; }
.check { border-color: var(--line); border-radius: var(--r-ctl); }
.pkg { border-radius: 16px; border-color: var(--line); padding: 14px 16px; }
.pkg.on { border-color: var(--brand-ink); background: var(--brand-soft); }

/* pills: status stays readable, practice tags go quiet */
.pill { border-radius: 99px; padding: 3px 9px; vertical-align: 2px; letter-spacing: .04em; }
.pill.demo { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); font-size: .68rem; font-weight: 700; letter-spacing: .08em; padding: 1px 7px; }

/* rows */
.fu { padding: 14px 0; border-top-color: var(--line); }
.fu .who a { text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.list > li, .suprow, .checklist li, .toggle, .settings-item { border-top-color: var(--line); }
.li-link .name { font-weight: 650; }
.statgrid a { border-radius: 14px; border-color: var(--line); }
.statgrid b { font-family: var(--font-display); font-size: 1.45rem; }
.alerts li, .note { border-radius: 12px; }

/* empty states: a soft dashed box instead of a lone grey line */
p.empty { margin: 4px 0 0; padding: 14px 12px; text-align: center; color: var(--muted); border: 1.5px dashed var(--line-strong); border-radius: 14px; font-size: .95rem; }

/* the money */
.totalbar { border-top-color: var(--line); box-shadow: 0 -10px 30px rgba(40, 28, 16, .09); border-radius: 22px 22px 0 0; }
.totalbar .big { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
table.lines tr.total td { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }

/* the bottom bar: clean line icons, a soft pill behind the open tab */
#tabs { border-top-color: var(--line); box-shadow: 0 -6px 20px rgba(40, 28, 16, .05); }
#tabs a { gap: 2px; }
#tabs a .ti { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 54px; height: 30px; border-radius: 99px; transition: background-color .15s; }
#tabs a .ti svg { width: 23px; height: 23px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#tabs a .ti svg .fill { fill: currentColor; stroke: none; }
#tabs a.on { font-weight: 700; }
#tabs a.on .ti { background: var(--brand-soft); }
#tabs a.tab-new .plus { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 4px 14px rgba(30, 20, 10, .22); }
#tabs a.tab-new .plus svg { width: 22px; height: 22px; stroke-width: 2.2; }

/* the top line and the demo banner: smaller and quieter (the thumbs button stays 44 px) */
#topline { font-size: .74rem; }
.demo-flag { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); font-weight: 600; font-size: .7rem; padding: 1px 8px; }
#review-banner { background: var(--banner-bg); color: var(--banner-ink); font-size: .8rem; font-weight: 600; gap: 8px; padding: 4px 8px 4px 16px; border-bottom: 1px solid var(--line); }
#fb-btn { min-width: 64px; padding: 0 10px; background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; font-size: 1rem; }

/* the guided tour card */
#tour-card { background: #2a2420; border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--r-card); box-shadow: 0 10px 30px rgba(20, 14, 8, .28); }
#tour-card .btn-primary { background: #fbf3e6; border-color: #fbf3e6; color: #241e1a; box-shadow: none; }
#tour-card .btn:not(.btn-primary) { border-color: rgba(255, 255, 255, .3); }
.tour-hl { outline-color: #e0a73a !important; }

/* sheets */
#sheet-backdrop { background: rgba(20, 14, 8, .5); }
#sheet { border-radius: 24px 24px 0 0; padding-top: 24px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); }
#sheet::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 99px; background: var(--line-strong); }
pre.preview, #cmp-body { border-radius: 14px; }

/* calendar */
.calcell { border-radius: 10px; font-weight: 600; }
.calcell.today { outline-offset: -2px; }

/* ---- the top of Today: venue name, the day, and the venue's own photo when the app has one ---- */
.hero { position: relative; margin: 8px 0 16px; border-radius: 22px; overflow: hidden; background-color: var(--brand-soft); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero-body { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px; }
.hero-txt { min-width: 0; }
.hero h1 { font-size: 2.15rem; }
.hero .venue-line { margin: 0 0 4px; }
.hero .hero-date { margin: 4px 0 0; color: var(--muted); }
.hero .logo-sm { margin-bottom: 8px; }
.hero.has-photo { min-height: 224px; display: flex; flex-direction: column; justify-content: flex-end; background-color: #1f1a16; border: 0; box-shadow: var(--shadow-lift); }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.hero.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 14, 10, .10) 0%, rgba(18, 14, 10, .06) 30%, rgba(18, 14, 10, .55) 58%, rgba(18, 14, 10, .88) 100%); }
.hero.has-photo .hero-body { position: static; padding: 0 18px 16px; }
.hero.has-photo .hero-txt { position: relative; z-index: 1; }
.hero.has-photo h1 { color: #ffffff; text-shadow: 0 1px 14px rgba(0, 0, 0, .4); }
.hero.has-photo .venue-line { color: #f7e6c8; letter-spacing: .11em; }
.hero.has-photo .hero-date { color: #efe9e2; }
/* on the photo the button sits top right, over the sky, so the words get the full width */
.hero.has-photo .btn-primary { position: absolute; z-index: 2; top: 12px; right: 12px; min-height: 44px; padding: 0 14px; font-size: .95rem; background: #fffaf3; border-color: #fffaf3; color: #231e1a; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
@media (max-height: 740px) {
  .hero.has-photo { min-height: 188px; }
  .hero h1 { font-size: 1.9rem; }
}
@media (max-width: 340px) {
  .hero-body { padding: 14px; }
  .hero h1 { font-size: 1.7rem; }
}
@media print { .hero-photo, .hero.has-photo::after { display: none; } .hero.has-photo { min-height: 0; background: #fff; } .hero.has-photo h1, .hero.has-photo .venue-line, .hero.has-photo .hero-date { color: #000; text-shadow: none; } }
/* Demo build (a prospect's copy): a banner that can not be missed or scrolled away. Hidden on every real build. */
#demo-banner { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 7px 12px; color: #ffd24a; font-size: 12.5px; line-height: 1.3; background: repeating-linear-gradient(135deg, #141414 0 14px, #202020 14px 28px); border-bottom: 2px solid #ffd24a; }
#demo-banner[hidden] { display: none; }
#demo-banner b { letter-spacing: .08em; color: #fff; }
#demo-banner p { flex-basis: 100%; margin: 0; color: #ffe9a6; }
#demo-banner a { margin-left: auto; padding: 6px 10px; border-radius: 8px; background: #ffd24a; color: #141414; font-weight: 700; text-decoration: none; }
/* More than one venue on a phone: the venue name on Today opens the list of venues. */
.venue-switch { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -10px 0 -6px; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.venue-switch .caret { opacity: .8; font-size: .85em; }
.venue-list { margin: 8px 0; }
.venue-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.venue-row .grow { min-width: 0; }
.venue-now { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #e7f1ec; color: #1f5f5b; }

/* 2026-10-05: inventory tracking (stock rows, outlook, adjust sheet, return check) */
.stockrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.stockrow:first-of-type { border-top: 0; }
.stockrow .btn { min-height: 44px; min-width: 76px; }
.olrow { padding: 10px 0; border-top: 1px solid var(--line); }
.olrow:first-of-type { border-top: 0; }
.olrow .small { margin-top: 2px; }
.whol { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.okline { color: var(--ok); font-weight: 600; margin: 0; }
.problem-soft { border-left: 4px solid var(--block); }
.stock-alert { display: block; text-decoration: none; color: var(--block); background: var(--block-bg); border-color: var(--block); }
.stock-alert b { display: block; }
.stock-alert .muted { color: var(--ink); }
td.maybe { color: var(--warn); font-weight: 700; }
.parrow { flex-wrap: wrap; }
.parrow label { display: flex; align-items: center; gap: 6px; }
.retrow { padding: 10px 0; border-top: 1px solid var(--line); }
.retgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.retf { margin: 0; }
.retf input { min-height: 44px; width: 100%; }