/* Demo system shared styles. Extends styles.css tokens. */

.demo-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: baseline;
  justify-content: space-between;
  margin: -0.9rem -1.15rem 1.1rem;
  padding: 0.55rem 1.15rem;
  background: #141516;
  color: #eef1f3;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.demo-banner b { font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.demo-banner a { color: #eef1f3; text-decoration: underline; text-underline-offset: 0.14em; }
.demo-banner .num { font-weight: 500; white-space: nowrap; }

.vert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin: 0.15rem 0 0.4rem;
}
.vert-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 0.9rem 1.05rem;
  border: 1px solid var(--ink);
  background: #f6f8f9;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
}
.vert-card b { font-weight: 500; font-size: clamp(17px, 4.6vw, 20px); letter-spacing: -0.03em; }
.vert-card span { color: var(--mute); font-size: 13px; line-height: 1.3; }
.vert-card:hover b { color: var(--accent); }

.demo-shell {
  border: 1px solid var(--ink);
  background: #f6f8f9;
  margin: 0.3rem 0 1.3rem;
}
.demo-status {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--ink);
  font-size: 13px;
}
.demo-status b { font-weight: 500; font-size: 14.5px; }
.demo-status .dark { color: #7a2e2e; }
.demo-status .open { color: #155e75; }

.chat-log {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0.9rem 0.2rem;
  min-height: 8rem;
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.chat-log li {
  max-width: 82%;
  padding: 0.5rem 0.7rem;
  font-size: 14.5px;
  line-height: 1.4;
  border: 1px solid var(--line);
}
.chat-log li.them { align-self: flex-start; background: #fff; border-color: var(--ink); }
.chat-log li.me { align-self: flex-end; background: #155e75; color: #eef1f3; border-color: #155e75; }
.chat-log li .who { display: block; font-size: 11px; color: var(--mute); margin-bottom: 0.15rem; text-transform: uppercase; letter-spacing: 0.05em; }
.chat-log li.me .who { color: #cfe6ec; }
.chat-log li.sms { align-self: center; max-width: 92%; background: #eef1f3; border-style: dashed; font-size: 13px; color: var(--mute); text-align: center; }

.chat-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 0.9rem 1rem;
  border-top: 1px solid var(--line);
}
.chat-form label { font-size: 13px; color: var(--mute); }
.chat-form input, .chat-form textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
}
.chat-form textarea { resize: vertical; min-height: 3.2rem; }
.chat-form button.go {
  align-self: flex-start;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #eef1f3;
  cursor: pointer;
}
.chat-form button.go:hover { background: var(--accent); border-color: var(--accent); }

.slot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.15rem 0.9rem 1rem;
}
.slot-btn {
  font: inherit;
  font-size: 14px;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--ink);
  background: #fff;
  cursor: pointer;
}
.slot-btn:hover { border-color: var(--accent); color: var(--accent); }
.slot-btn:disabled { color: var(--mute); border-color: var(--line); text-decoration: line-through; cursor: not-allowed; }

.demo-summary {
  padding: 0;
  border-top: 1px solid var(--ink);
}
.demo-summary:empty { display: none; border: 0; }
.demo-summary .row {
  display: grid;
  grid-template-columns: 7.2rem 1fr;
  gap: 0.4rem;
  padding: 0.38rem 0;
  font-size: 14.5px;
}
.demo-summary .row b { font-weight: 600; color: var(--mute); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

.confirm-card {
  padding: 1.05rem 1rem 1.15rem;
  background: color-mix(in srgb, var(--paper) 70%, #fff);
}
.confirm-kicker {
  margin: 0 0 0.35rem;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.confirm-title {
  margin: 0;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.confirm-lead {
  margin: 0.45rem 0 0.85rem;
  font-size: 15.5px;
  line-height: 1.4;
  max-width: 34ch;
}
.confirm-num {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 13px;
}
.confirm-num b { font-size: 1.15rem; letter-spacing: 0.04em; }
.confirm-recap {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}
.confirm-recap-kicker {
  margin: 0 0 0.45rem;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.morning-recap {
  margin: 0 0 0.9rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 14%, var(--paper));
}
.morning-recap-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.2rem;
}
.morning-recap-head b {
  font-size: 13px;
  letter-spacing: 0.02em;
}
.morning-recap-count {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.cleared-stamp {
  display: block;
  margin-top: 0.18rem;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.35;
}
.cleared-stamp[hidden] {
  display: none;
}
.morning-follow-cue {
  display: block;
  margin-top: 0.1rem;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.35;
}
.morning-follow-cue[hidden] {
  display: none;
}
.morning-follow-cue.is-board-clear {
  font-weight: 700;
  letter-spacing: 0.06em;
}
.morning-recap-note {
  margin: 0.2rem 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--mute);
}
.afternoon-wrap {
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
}
.afternoon-wrap[hidden] {
  display: none;
}
.afternoon-wrap-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.afternoon-wrap-head b {
  font-size: 13px;
  letter-spacing: 0.02em;
}
.afternoon-wrap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-top: 0.15rem;
  flex-wrap: wrap;
}
.afternoon-wrap-line {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.afternoon-wrap-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1 1 100%;
  min-width: 0;
  flex-wrap: wrap;
}
.afternoon-wrap-jump,
.afternoon-wrap-call {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.afternoon-wrap-call[hidden] {
  display: none;
}
.afternoon-wrap-call-3rd {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-call-4th {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-call-5th {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-call-6th {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-call-7th {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-call-8th {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-call-9th {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-call-10th {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-call-11th {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-call-12th {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-call-13th {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-call-14th {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-jump {
  background: var(--accent);
  color: #1a1208;
}
.afternoon-wrap-call {
  background: transparent;
  color: var(--ink);
}
.afternoon-wrap-note {
  margin: 0.15rem 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--mute);
}
.open-leftovers {
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 78%, #fff);
}
.open-leftovers[hidden] {
  display: none;
}
.open-leftovers-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.open-leftovers-head b {
  font-size: 13px;
  letter-spacing: 0.02em;
}
.open-leftovers-names {
  margin: 0.15rem 0 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.open-leftovers-note {
  margin: 0.15rem 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--mute);
}
.callback-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.45rem 0 0;
}
.callback-row {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 82%, #fff);
}
.callback-row.is-jump-target {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.callback-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.callback-row-head b {
  font-size: 13px;
  letter-spacing: -0.01em;
}
.callback-row-line {
  display: block;
  margin-top: 0.12rem;
  font-size: 12px;
  color: var(--mute);
}
.called-stamp {
  display: block;
  margin-top: 0.2rem;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--accent);
}
.called-stamp[hidden] {
  display: none;
}
.owner-next-cue {
  display: block;
  margin-top: 0.08rem;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--accent);
}
.owner-next-cue[hidden] {
  display: none;
}
.callback-note {
  margin: 0.3rem 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--mute);
}
.owner-board {
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.75rem;
  border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.owner-board-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}
.owner-board-head b { font-size: 13px; letter-spacing: 0.02em; }
.owner-board-shop {
  margin: 0 0 0.45rem;
  font-size: 13px;
  color: var(--mute);
}
.owner-board-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.7rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 70%, #fff);
  font-size: 13.5px;
}
.owner-board-row .ob-id {
  grid-column: 1 / -1;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.owner-board-row .ob-name { font-weight: 600; }
.owner-board-row .ob-job { grid-column: 1 / -1; }
.owner-board-row .ob-slot { color: var(--mute); }
.owner-board-row .ob-status {
  justify-self: end;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.owner-board-tonight-kicker {
  margin: 0.7rem 0 0.4rem;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
.owner-board-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.owner-board-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem 0.6rem;
  width: 100%;
  font: inherit;
  text-align: left;
  padding: 0.65rem 0.7rem;
  cursor: pointer;
  color: inherit;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 78%, #fff);
}
.owner-board-action .called-stamp {
  flex: 1 0 100%;
  margin-top: 0.05rem;
}
.owner-board-action b {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.owner-board-action:hover,
.owner-board-action:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.owner-board-action.is-shown {
  border-style: dashed;
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
}
.owner-board-action.is-done .confirm-stub-badge {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 22%, var(--paper));
  padding: 0.18rem 0.42rem;
}
.owner-board-honest {
  margin: 0.45rem 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 600;
}
.owner-board-note {
  margin: 0.45rem 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--mute);
}
.confirm-window {
  margin: 0 0 0.7rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}
.confirm-window b { display: block; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.25rem; }
.confirm-window p { margin: 0; font-size: 14.5px; line-height: 1.4; }
.confirm-wa {
  margin: 0 0 0.85rem;
  font-size: 13px;
  color: var(--mute);
  line-height: 1.4;
}
.confirm-stubs {
  margin: 0 0 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.confirm-stubs-kicker {
  margin: 0 0 0.1rem;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.confirm-stub {
  padding: 0.55rem 0.65rem;
  border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.confirm-stub-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.2rem;
}
.confirm-stub-head b {
  font-size: 13px;
  letter-spacing: 0.02em;
}
.confirm-stub-badge {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.confirm-stub p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mute);
}
.confirm-line {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: inherit;
  margin: 0 0 0.7rem;
}
.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
}
.confirm-call,
.demo-summary .again {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  text-decoration: none;
}
.confirm-call {
  background: var(--accent);
  color: #1a1408;
  border: 1px solid var(--accent);
}
.demo-summary .again {
  background: transparent;
  color: inherit;
  border: 1px solid var(--line);
}
.confirm-never {
  margin: 0;
  font-size: 12px;
  color: var(--mute);
  line-height: 1.4;
}

/* After book: the card is the screen. Chat would push the test line off a phone. */
.book-skin.is-confirmed .chat-log,
.book-skin.is-confirmed .chat-form,
.book-skin.is-confirmed .slot-grid { display: none; }
body.embed .book-actions { display: none; }
body.embed.is-confirmed .demo-banner { display: none; }
body.embed .confirm-card { padding: 0.8rem 0.75rem 1rem; }
body.embed .confirm-title { font-size: 1.55rem; }
body.embed .confirm-lead { margin: 0.3rem 0 0.55rem; }
body.embed .confirm-num { margin-bottom: 0.55rem; }

/* Plumbing: copper work-order ticket */
[data-skin="plumbing"] .confirm-card {
  background:
    repeating-linear-gradient(180deg, transparent, transparent 27px, rgba(184,115,51,0.08) 28px),
    #fffaf3;
  box-shadow: 4px 5px 0 rgba(184,115,51,0.14);
  border: 1px dashed #c4a484;
}
[data-skin="plumbing"] .confirm-title { font-family: Archivo, ui-sans-serif, sans-serif; color: #8a4f1f; }
[data-skin="plumbing"] .confirm-num { border-color: #c4a484; background: #f3ebe2; }
[data-skin="plumbing"] .confirm-stub { border-color: #c4a484; background: #f3ebe2; }
[data-skin="plumbing"] .confirm-call { color: #2a1c14; }

/* Restaurant: reservation stub */
[data-skin="restaurant"] .confirm-card {
  background: #3a1418;
  color: #f7f0e4;
}
[data-skin="restaurant"] .confirm-kicker,
[data-skin="restaurant"] .confirm-wa,
[data-skin="restaurant"] .confirm-stubs-kicker,
[data-skin="restaurant"] .confirm-recap-kicker,
[data-skin="restaurant"] .morning-recap-note,
[data-skin="restaurant"] .afternoon-wrap-note,
[data-skin="restaurant"] .open-leftovers-note,
[data-skin="restaurant"] .callback-note,
[data-skin="restaurant"] .callback-row-line,
[data-skin="restaurant"] .owner-board-shop,
[data-skin="restaurant"] .owner-board-note,
[data-skin="restaurant"] .owner-board-honest,
[data-skin="restaurant"] .confirm-stub-badge,
[data-skin="restaurant"] .confirm-stub p,
[data-skin="restaurant"] .confirm-never,
[data-skin="restaurant"] .demo-summary .row b { color: #d8c8b0; }
[data-skin="restaurant"] .confirm-recap,
[data-skin="restaurant"] .morning-recap,
[data-skin="restaurant"] .afternoon-wrap,
[data-skin="restaurant"] .open-leftovers,
[data-skin="restaurant"] .callback-row,
[data-skin="restaurant"] .owner-board,
[data-skin="restaurant"] .owner-board-row,
[data-skin="restaurant"] .owner-board-action { background: #2c0c12; border-color: rgba(201,161,91,0.35); }
[data-skin="restaurant"] .owner-board-tonight-kicker,
[data-skin="restaurant"] .called-stamp,
[data-skin="restaurant"] .cleared-stamp,
[data-skin="restaurant"] .morning-follow-cue,
[data-skin="restaurant"] .afternoon-wrap-line,
[data-skin="restaurant"] .owner-next-cue { color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-jump { background: #c9a15b; color: #3a1418; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-2nd { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-3rd { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-4th { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-5th { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-6th { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-7th { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-8th { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-9th { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-10th { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-11th { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-12th { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-13th { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .afternoon-wrap-call-14th { background: transparent; color: #c9a15b; border-color: #c9a15b; }
[data-skin="restaurant"] .owner-board-action.is-shown { background: #4a1a20; }
[data-skin="restaurant"] .owner-board-action.is-done .confirm-stub-badge { color: #3a1418; background: #c9a15b; }
[data-skin="restaurant"] .confirm-stub { border-color: rgba(201,161,91,0.35); background: #2c0c12; }
[data-skin="restaurant"] .confirm-title { font-family: "Libre Baskerville", Georgia, serif; color: #f7f0e4; }
[data-skin="restaurant"] .confirm-num { border-color: rgba(201,161,91,0.45); background: #4a1a20; }
[data-skin="restaurant"] .confirm-window { background: #2c0c12; border-color: rgba(201,161,91,0.45); }
[data-skin="restaurant"] .confirm-call { background: #c9a15b; color: #3a1418; border-color: #c9a15b; }
[data-skin="restaurant"] .demo-summary .again { color: #f7f0e4; border-color: rgba(247,240,228,0.35); }

/* HVAC: thermal dispatch slip */
[data-skin="hvac"] .confirm-card {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(126,224,214,0.06) 12px),
    #0b1c24;
  color: #e8f6f6;
  border: 1px dashed #3aa8a0;
  box-shadow: inset 0 0 0 5px #082028;
}
[data-skin="hvac"] .confirm-title { font-family: "Barlow Condensed", ui-sans-serif, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #7ee0d6; }
[data-skin="hvac"] .confirm-kicker,
[data-skin="hvac"] .confirm-wa,
[data-skin="hvac"] .confirm-stubs-kicker,
[data-skin="hvac"] .confirm-recap-kicker,
[data-skin="hvac"] .morning-recap-note,
[data-skin="hvac"] .afternoon-wrap-note,
[data-skin="hvac"] .open-leftovers-note,
[data-skin="hvac"] .callback-note,
[data-skin="hvac"] .callback-row-line,
[data-skin="hvac"] .owner-board-shop,
[data-skin="hvac"] .owner-board-note,
[data-skin="hvac"] .owner-board-honest,
[data-skin="hvac"] .confirm-stub-badge,
[data-skin="hvac"] .confirm-stub p,
[data-skin="hvac"] .confirm-never,
[data-skin="hvac"] .demo-summary .row b { color: #9bb8be; }
[data-skin="hvac"] .confirm-recap,
[data-skin="hvac"] .morning-recap,
[data-skin="hvac"] .afternoon-wrap,
[data-skin="hvac"] .open-leftovers,
[data-skin="hvac"] .callback-row,
[data-skin="hvac"] .owner-board,
[data-skin="hvac"] .owner-board-row,
[data-skin="hvac"] .owner-board-action { background: #082028; border-color: #2a6b6a; }
[data-skin="hvac"] .owner-board-tonight-kicker,
[data-skin="hvac"] .called-stamp,
[data-skin="hvac"] .cleared-stamp,
[data-skin="hvac"] .morning-follow-cue,
[data-skin="hvac"] .afternoon-wrap-line,
[data-skin="hvac"] .owner-next-cue { color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-jump { background: #7ee0d6; color: #0b1c24; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-2nd { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-3rd { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-4th { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-5th { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-6th { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-7th { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-8th { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-9th { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-10th { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-11th { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-12th { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-13th { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .afternoon-wrap-call-14th { background: transparent; color: #7ee0d6; border-color: #7ee0d6; }
[data-skin="hvac"] .owner-board-action.is-shown { background: #0b3034; }
[data-skin="hvac"] .owner-board-action.is-done .confirm-stub-badge { color: #0b1c24; background: #7ee0d6; }
[data-skin="hvac"] .confirm-stub { border-color: #2a6b6a; background: #082028; }
[data-skin="hvac"] .confirm-num { border-color: #3aa8a0; background: #082028; }
[data-skin="hvac"] .confirm-window { background: #082028; border-color: #2a6b6a; }
[data-skin="hvac"] .confirm-call { background: #7ee0d6; color: #0b1c24; border-color: #7ee0d6; }
[data-skin="hvac"] .demo-summary .again { color: #e8f6f6; }

/* Construction: title-block stamp */
[data-skin="construction"] .confirm-card {
  background:
    linear-gradient(90deg, #d4a017 0 10px, transparent 10px),
    #e8edf2;
  border: 2px solid #142033;
  box-shadow: 0 0 0 6px #0b2238, 0 0 0 8px #d4a017;
}
[data-skin="construction"] .confirm-title { font-family: Anton, "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; font-size: 1.55rem; letter-spacing: 0.02em; }
[data-skin="construction"] .confirm-num { background: #d4a017; color: #1a1404; border-style: solid; border-color: #142033; }
[data-skin="construction"] .confirm-window { background: #dce6ee; border-color: #142033; }
[data-skin="construction"] .confirm-stub { border-color: #142033; background: #dce6ee; }
[data-skin="construction"] .confirm-call { background: #d4a017; color: #1a1404; border-color: #142033; }

/* Auto: night bay work order */
[data-skin="auto"] .confirm-card {
  background:
    linear-gradient(180deg, #ff6a00 0 8px, #111 8px);
  color: #f3efe8;
  border: 1px solid #3a3a3a;
}
[data-skin="auto"] .confirm-title { font-family: Oswald, ui-sans-serif, sans-serif; color: #ff6a00; letter-spacing: 0.06em; text-transform: uppercase; font-size: 1.45rem; }
[data-skin="auto"] .confirm-kicker,
[data-skin="auto"] .confirm-wa,
[data-skin="auto"] .confirm-stubs-kicker,
[data-skin="auto"] .confirm-recap-kicker,
[data-skin="auto"] .morning-recap-note,
[data-skin="auto"] .afternoon-wrap-note,
[data-skin="auto"] .open-leftovers-note,
[data-skin="auto"] .callback-note,
[data-skin="auto"] .callback-row-line,
[data-skin="auto"] .owner-board-shop,
[data-skin="auto"] .owner-board-note,
[data-skin="auto"] .owner-board-honest,
[data-skin="auto"] .confirm-stub-badge,
[data-skin="auto"] .confirm-stub p,
[data-skin="auto"] .confirm-never,
[data-skin="auto"] .demo-summary .row b { color: #b8b0a4; }
[data-skin="auto"] .confirm-recap,
[data-skin="auto"] .morning-recap,
[data-skin="auto"] .afternoon-wrap,
[data-skin="auto"] .open-leftovers,
[data-skin="auto"] .callback-row,
[data-skin="auto"] .owner-board,
[data-skin="auto"] .owner-board-row,
[data-skin="auto"] .owner-board-action { background: #1a1a1a; border-color: #3a3a3a; }
[data-skin="auto"] .owner-board-tonight-kicker,
[data-skin="auto"] .called-stamp,
[data-skin="auto"] .cleared-stamp,
[data-skin="auto"] .morning-follow-cue,
[data-skin="auto"] .afternoon-wrap-line,
[data-skin="auto"] .owner-next-cue { color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-jump { background: #ff6a00; color: #141414; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-2nd { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-3rd { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-4th { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-5th { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-6th { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-7th { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-8th { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-9th { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-10th { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-11th { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-12th { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-13th { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .afternoon-wrap-call-14th { background: transparent; color: #ff6a00; border-color: #ff6a00; }
[data-skin="auto"] .owner-board-action.is-shown { background: #2a160c; }
[data-skin="auto"] .owner-board-action.is-done .confirm-stub-badge { color: #141414; background: #ff6a00; }
[data-skin="auto"] .confirm-stub { border-color: #3a3a3a; background: #1a1a1a; }
[data-skin="auto"] .confirm-num { border-color: #ff6a00; background: #1a120c; }
[data-skin="auto"] .confirm-window { background: #1a1a1a; border-color: #3a3a3a; }
[data-skin="auto"] .confirm-call { background: #ff6a00; color: #141414; border-color: #ff6a00; }
[data-skin="auto"] .demo-summary .again { color: #f3efe8; }

/* Dental: appointment card */
[data-skin="dental"] .confirm-card {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(107,143,113,0.12) 11px 12px),
    #fff;
  border-radius: 18px;
  border: 1px solid #d5ddd6;
  box-shadow: 0 10px 28px rgba(36,48,42,0.10);
}
[data-skin="dental"] .confirm-title { font-family: Literata, Georgia, serif; font-weight: 500; color: #3d5a44; }
[data-skin="dental"] .confirm-num { background: #eef4ef; border-color: #c5d4c8; }
[data-skin="dental"] .confirm-window { background: #f3f7f3; border-color: #d5ddd6; }
[data-skin="dental"] .confirm-stub { border-color: #d5ddd6; background: #f3f7f3; }
[data-skin="dental"] .confirm-call { background: #3d5a44; color: #f6f3ee; border-color: #3d5a44; }
[data-skin="dental"] .book-actions .call { background: #3d5a44; color: #f6f3ee; }

/* Laundry: night board slip */
[data-skin="laundry"] .confirm-card {
  background:
    repeating-linear-gradient(180deg, transparent, transparent 27px, rgba(232,241,246,0.08) 28px),
    #16324a;
  color: #e8f1f6;
  border: 2px solid #7aa0c2;
}
[data-skin="laundry"] .confirm-title { font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: -0.02em; }
[data-skin="laundry"] .confirm-kicker,
[data-skin="laundry"] .confirm-wa,
[data-skin="laundry"] .confirm-stubs-kicker,
[data-skin="laundry"] .confirm-recap-kicker,
[data-skin="laundry"] .morning-recap-note,
[data-skin="laundry"] .afternoon-wrap-note,
[data-skin="laundry"] .open-leftovers-note,
[data-skin="laundry"] .callback-note,
[data-skin="laundry"] .callback-row-line,
[data-skin="laundry"] .owner-board-shop,
[data-skin="laundry"] .owner-board-note,
[data-skin="laundry"] .owner-board-honest,
[data-skin="laundry"] .confirm-stub-badge,
[data-skin="laundry"] .confirm-stub p,
[data-skin="laundry"] .confirm-never,
[data-skin="laundry"] .demo-summary .row b { color: #b7c9d6; }
[data-skin="laundry"] .confirm-recap,
[data-skin="laundry"] .morning-recap,
[data-skin="laundry"] .afternoon-wrap,
[data-skin="laundry"] .open-leftovers,
[data-skin="laundry"] .callback-row,
[data-skin="laundry"] .owner-board,
[data-skin="laundry"] .owner-board-row,
[data-skin="laundry"] .owner-board-action { background: #102536; border-color: #3a6180; }
[data-skin="laundry"] .owner-board-tonight-kicker,
[data-skin="laundry"] .called-stamp,
[data-skin="laundry"] .cleared-stamp,
[data-skin="laundry"] .morning-follow-cue,
[data-skin="laundry"] .afternoon-wrap-line,
[data-skin="laundry"] .owner-next-cue { color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-jump { background: #7aa0c2; color: #102536; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-2nd { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-3rd { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-4th { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-5th { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-6th { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-7th { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-8th { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-9th { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-10th { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-11th { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-12th { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-13th { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .afternoon-wrap-call-14th { background: transparent; color: #7aa0c2; border-color: #7aa0c2; }
[data-skin="laundry"] .owner-board-action.is-shown { background: #1a3a52; }
[data-skin="laundry"] .owner-board-action.is-done .confirm-stub-badge { color: #102536; background: #7aa0c2; }
[data-skin="laundry"] .confirm-stub { border-color: #3a6180; background: #102536; }
[data-skin="laundry"] .confirm-num { background: #102536; border-color: #7aa0c2; }
[data-skin="laundry"] .confirm-window { background: #102536; border-color: #3a6180; }
[data-skin="laundry"] .confirm-call { background: #7aa0c2; color: #102536; border-color: #7aa0c2; }
[data-skin="laundry"] .demo-summary .again { color: #e8f1f6; }

/* Law: pine + brass docket */
[data-skin="law"] .confirm-card {
  background: #0e1c19;
  color: #efe8d6;
  border: 1px solid rgba(201,162,74,0.45);
  box-shadow: 0 0 0 6px #12241f, 0 0 0 7px rgba(201,162,74,0.4);
}
[data-skin="law"] .confirm-title { font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif; color: #c9a24a; letter-spacing: -0.03em; }
[data-skin="law"] .confirm-kicker,
[data-skin="law"] .confirm-wa,
[data-skin="law"] .confirm-stubs-kicker,
[data-skin="law"] .confirm-recap-kicker,
[data-skin="law"] .morning-recap-note,
[data-skin="law"] .afternoon-wrap-note,
[data-skin="law"] .open-leftovers-note,
[data-skin="law"] .callback-note,
[data-skin="law"] .callback-row-line,
[data-skin="law"] .owner-board-shop,
[data-skin="law"] .owner-board-note,
[data-skin="law"] .owner-board-honest,
[data-skin="law"] .confirm-stub-badge,
[data-skin="law"] .confirm-stub p,
[data-skin="law"] .confirm-never,
[data-skin="law"] .demo-summary .row b { color: #9aada4; }
[data-skin="law"] .confirm-recap,
[data-skin="law"] .morning-recap,
[data-skin="law"] .afternoon-wrap,
[data-skin="law"] .open-leftovers,
[data-skin="law"] .callback-row,
[data-skin="law"] .owner-board,
[data-skin="law"] .owner-board-row,
[data-skin="law"] .owner-board-action { background: #173028; border-color: rgba(201,162,74,0.35); }
[data-skin="law"] .owner-board-tonight-kicker,
[data-skin="law"] .called-stamp,
[data-skin="law"] .cleared-stamp,
[data-skin="law"] .morning-follow-cue,
[data-skin="law"] .afternoon-wrap-line,
[data-skin="law"] .owner-next-cue { color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-jump { background: #c9a24a; color: #2a210c; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-2nd { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-3rd { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-4th { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-5th { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-6th { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-7th { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-8th { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-9th { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-10th { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-11th { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-12th { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-13th { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .afternoon-wrap-call-14th { background: transparent; color: #c9a24a; border-color: #c9a24a; }
[data-skin="law"] .owner-board-action.is-shown { background: #1f3c32; }
[data-skin="law"] .owner-board-action.is-done .confirm-stub-badge { color: #2a210c; background: #c9a24a; }
[data-skin="law"] .confirm-stub { border-color: rgba(201,162,74,0.35); background: #173028; }
[data-skin="law"] .confirm-num { background: #173028; border-color: rgba(201,162,74,0.45); color: #efe8d6; }
[data-skin="law"] .confirm-window { background: #173028; border-color: rgba(201,162,74,0.35); }
[data-skin="law"] .confirm-call { background: #c9a24a; color: #2a210c; border-color: #c9a24a; }
[data-skin="law"] .demo-summary .again { color: #efe8d6; border-color: rgba(239,232,214,0.35); }

.tabs { display: flex; gap: 0.4rem; margin: 0.15rem 0 0.9rem; }
.tab-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--ink);
  background: #fff;
  cursor: pointer;
}
.tab-btn.on { background: var(--ink); color: #eef1f3; }
.tab-panel { display: none; }
.tab-panel.on { display: block; }

.menu-list { margin: 0 0 1rem; }
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}
.menu-item:first-child { border-top: 0; }
.menu-item b { font-weight: 500; display: block; }
.menu-item span { color: var(--mute); font-size: 13px; }
.menu-item button {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--ink);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.menu-item button:hover { border-color: var(--accent); color: var(--accent); }

.cart-box {
  border: 1px solid var(--ink);
  background: #f6f8f9;
  padding: 0.85rem 0.9rem 1rem;
  margin: 0 0 1rem;
}
.cart-box .row { display: flex; justify-content: space-between; padding: 0.3rem 0; font-size: 14.5px; }
.cart-box .total { border-top: 1px solid var(--line); margin-top: 0.4rem; padding-top: 0.5rem; font-weight: 500; }
.cart-box .empty { color: var(--mute); font-size: 14px; }
.pay-btn {
  margin-top: 0.7rem;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 0.55rem 1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #eef1f3;
  cursor: pointer;
}
.pay-btn:hover { background: var(--accent); border-color: var(--accent); }
.pay-btn:disabled { background: #fff; color: var(--mute); border-color: var(--line); cursor: not-allowed; }

.test-line {
  margin: 0 0 1.1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--ink);
  background: #f6f8f9;
  font-size: 14.5px;
}
.test-line b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mute); margin-bottom: 0.15rem; }
.test-line .num { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }

@media (max-width: 440px) {
  .vert-grid { grid-template-columns: 1fr; }
  .demo-banner { margin: -0.9rem -1.15rem 1rem; }
  .afternoon-wrap-actions { gap: 0.18rem; max-width: 100%; }
  .afternoon-wrap-jump,
  .afternoon-wrap-call {
    font-size: 11px;
    padding: 0.26rem 0.32rem;
    min-height: 44px;
  }
}

/* ── Embed / iPhone chrome ── */
body.embed .shop-only,
body.embed .cycle-nav,
body.embed .shop-hero,
body.embed .shop-main { display: none !important; }
body.embed { background: var(--paper, #f4f1ea); }
body.embed .demo-banner { margin: 0; position: sticky; }
body.embed .book-wrap { margin: 0; max-width: none; padding: 0.85rem; }

.book-wrap {
  --ink: #1a1c1a;
  --paper: #f4f1ea;
  --mute: #5c625c;
  --accent: #c27a2e;
  --line: rgba(26,28,26,0.14);
  color: var(--ink);
}

.book-skin {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, #fff);
  border-radius: 12px;
  overflow: hidden;
}

.book-skin .demo-status {
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
}

.book-skin .chat-log li.me {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.book-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1rem;
}
.book-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.book-actions .call {
  background: var(--accent);
  color: #1a1408;
}
.book-actions .ghost {
  border: 1px solid var(--line);
  color: var(--ink);
}

/* Vertical skins for the shared booking chrome */
[data-skin="plumbing"] {
  --ink: #2a1c14; --paper: #f3ebe2; --mute: #6d5648; --accent: #b87333; --line: rgba(42,28,20,0.14);
}
[data-skin="hvac"] {
  --ink: #0d2433; --paper: #eef4f8; --mute: #4d6673; --accent: #0b7a8a; --line: rgba(13,36,51,0.14);
}
[data-skin="construction"] {
  --ink: #142033; --paper: #e8edf2; --mute: #4d5d70; --accent: #d4a017; --line: rgba(20,32,51,0.16);
}
[data-skin="auto"] {
  --ink: #141414; --paper: #1a1a1a; --mute: #b8b0a4; --accent: #ff6a00; --line: rgba(255,255,255,0.12);
  color: #f3efe8;
}
[data-skin="auto"] .book-skin { background: #111; }
[data-skin="auto"] .chat-log li.them { background: #1d1d1d; color: #f3efe8; border-color: #333; }
[data-skin="auto"] .chat-form input,
[data-skin="auto"] .chat-form textarea,
[data-skin="auto"] .slot-btn { background: #161616; color: #f3efe8; border-color: #3a3a3a; }
[data-skin="restaurant"] {
  --ink: #3a241c; --paper: #f7f0e4; --mute: #5c3f32; --accent: #6b1d2a; --line: rgba(58,36,28,0.14);
}
[data-skin="restaurant"] .book-actions .call { color: #f7f0e4; }
[data-skin="dental"] {
  --ink: #24302a; --paper: #f6f3ee; --mute: #5d6b64; --accent: #6b8f71; --line: rgba(36,48,42,0.12);
}
[data-skin="laundry"] {
  --ink: #16324a; --paper: #eef3f7; --mute: #4d6475; --accent: #1e6b9f; --line: rgba(22,50,74,0.14);
}
[data-skin="law"] {
  --ink: #efe8d6; --paper: #12241f; --mute: #c9d4cc; --accent: #c9a24a; --line: rgba(201,162,74,0.28);
}
[data-skin="law"] .book-skin { background: #0e1c19; color: #efe8d6; }
[data-skin="law"] .book-skin .demo-status {
  background: #173028; color: #efe8d6; border-color: rgba(201,162,74,0.28);
}
[data-skin="law"] .demo-status .dark { color: #e4c36a; }
[data-skin="law"] .chat-log li.them { background: #173028; color: #efe8d6; border-color: rgba(201,162,74,0.28); }
[data-skin="law"] .chat-log li.sms { background: #173028; color: #c9d4cc; border-color: rgba(201,162,74,0.35); }
[data-skin="law"] .chat-form input,
[data-skin="law"] .chat-form textarea,
[data-skin="law"] .slot-btn { background: #173028; color: #efe8d6; border-color: rgba(201,162,74,0.35); }
[data-skin="law"] .book-actions .call,
[data-skin="law"] .book-skin .chat-log li.me { color: #2a210c; }
[data-skin="law"] .book-actions .ghost { color: #efe8d6; border-color: rgba(239,232,214,0.35); }
[data-skin="law"] .demo-summary { color: #efe8d6; }