/* Hive Book styles. Every value comes from tokens.css (loaded first); this
   file holds no colors of its own. Patterns are described in DESIGN.md. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: var(--font-size-base)/var(--line-height) var(--font);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
::selection { background: var(--primary-container); color: var(--on-primary-container); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--primary); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
h1 { font-size: var(--font-size-h1); font-weight: 400; line-height: 1.25; margin: 0 0 var(--space-2); }
h2 { font-size: var(--font-size-h2); font-weight: 500; line-height: 1.35; margin: 0 0 var(--space-3); }
h3 { font-size: var(--font-size-h3); font-weight: 500; margin: var(--space-5) 0 var(--space-2); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4); }
main.wrap { flex: 1; padding-top: var(--space-6); padding-bottom: var(--space-7); }
.skip { position: absolute; left: -999px; top: var(--space-2); background: var(--surface); padding: var(--space-2) var(--space-3); z-index: 10; border-radius: var(--radius-s); }
.skip:focus { left: var(--space-2); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Progressive parts: shown only when hours.js / forms.js are running. */
.js-only { display: none !important; }
.js .js-only { display: inline-flex !important; }
.js .no-js-only { display: none; }
.js-only-block, label.js-only-block { display: none; }
.js .js-only-block, .js label.js-only-block { display: flex; }

/* ---------- Top bar and footer ---------- */
.topbar { background: var(--bg); }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 4rem; flex-wrap: wrap; padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-2); text-decoration: none;
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 400;
}
.brand img { width: 2rem; height: 2rem; display: block; }
.nav { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; align-items: center; }
.nav a, .link-button {
  display: inline-flex; align-items: center; min-height: var(--control-h-small); padding: 0 var(--space-3);
  border-radius: var(--radius-pill); color: var(--text-2); text-decoration: none;
  font: 500 var(--font-size-small) var(--font-display);
}
.nav a:hover, .link-button:hover { background: var(--hover); color: var(--text); }
.nav a[aria-current="page"] { background: var(--selected); color: var(--on-primary-container); }
.link-button { background: none; border: 0; cursor: pointer; }
.footer { color: var(--text-3); font-size: var(--font-size-small); padding: var(--space-5) 0; }
.footer .by { margin-left: var(--space-1); }

/* ---------- Building blocks ---------- */
.card {
  background: var(--surface); border-radius: var(--radius-m); padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.narrow { max-width: 28rem; margin-left: auto; margin-right: auto; }
.page-head { margin-bottom: var(--space-5); }
.page-head p { margin: 0; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.center { text-align: center; }
.muted { color: var(--text-3); }
.small { font-size: var(--font-size-small); }
.pre { white-space: pre-wrap; }
.empty {
  color: var(--text-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-m);
  background: var(--surface-dim); margin: 0;
}
.notice {
  background: var(--selected); color: var(--on-primary-container); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-s); margin-bottom: var(--space-5);
}
.alert {
  background: var(--error-container); color: var(--error); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-s); margin: 0 0 var(--space-4);
}
.badge {
  display: inline-block; font-size: 0.75rem; font-weight: 500; padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--hover); color: var(--text-2); vertical-align: middle;
}
.badge.ok { background: var(--success-container); color: var(--on-success-container); }
.hero { text-align: center; padding: var(--space-7) 0; }
.hero-mark { width: 4rem; height: 4rem; margin: 0 auto var(--space-4); display: block; }
.lead { font-size: 1.125rem; color: var(--text-2); max-width: 32rem; margin: 0 auto var(--space-5); }

/* ---------- Form fields ---------- */
label { display: block; font-weight: 500; font-size: var(--font-size-small); color: var(--text-2); margin: var(--space-4) 0 var(--space-2); }
input:where(:not([type=checkbox], [type=radio], [type=hidden])), select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: var(--border-w) solid var(--outline); border-radius: var(--radius-field);
  padding: var(--space-2) var(--space-3); min-height: var(--control-h);
}
input:where(:not([type=checkbox], [type=radio], [type=hidden])):hover, select:hover, textarea:hover { border-color: var(--text-2); }
input:where(:not([type=checkbox], [type=radio], [type=hidden])):focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary);
}
select {
  -webkit-appearance: none; appearance: none; padding-right: var(--space-6);
  background-image: var(--chevron); background-repeat: no-repeat;
  background-position: right var(--space-2) center; background-size: 1rem; cursor: pointer;
}
textarea { resize: vertical; }
::placeholder { color: var(--text-3); opacity: 1; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); }
.field-error { color: var(--error); font-size: var(--font-size-small); margin: var(--space-2) 0 0; }
.hint { color: var(--text-3); font-size: var(--font-size-small); margin: var(--space-2) 0 0; }
label.check { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; font-size: var(--font-size-base); color: var(--text); }
input[type=checkbox], input[type=radio] { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--primary); flex: none; }
fieldset { border: 0; border-top: var(--border-w) solid var(--divider); margin: 0 0 var(--space-2); padding: var(--space-5) 0 var(--space-2); }
fieldset:first-of-type { border-top: 0; padding-top: 0; }
legend { font-family: var(--font-display); font-weight: 500; font-size: var(--font-size-h2); color: var(--text); padding: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.grid-2 .form-actions { grid-column: 1 / -1; }
.form-actions { margin-top: var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.prefixed { display: flex; align-items: stretch; }
.prefixed span {
  display: flex; align-items: center; padding: 0 var(--space-3); background: var(--surface-dim);
  border: var(--border-w) solid var(--outline); border-right: 0; border-radius: var(--radius-field) 0 0 var(--radius-field);
  color: var(--text-3); font-size: var(--font-size-small); white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis;
}
.prefixed input { border-radius: 0 var(--radius-field) var(--radius-field) 0 !important; }
.indent { margin-left: var(--space-6); }
.inline, .inline-form { display: inline; margin: 0; }
.inline-form { display: block; margin: calc(-1 * var(--space-2)) 0 var(--space-5); }

/* ---------- Buttons (pills, as Hive mail) ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.5rem; padding: 0 var(--space-5); border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--outline); background: transparent; color: var(--primary);
  font: 500 var(--font-size-small) var(--font-display); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--motion), box-shadow var(--motion);
}
.button:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.button.primary:hover { background: var(--primary-hover); box-shadow: var(--shadow-1); }
.button.danger { color: var(--error); }
.button.danger:hover { background: var(--error-container); }
.button.small { min-height: var(--control-h-small); padding: 0 var(--space-4); }
.button.full { width: 100%; margin-top: var(--space-5); min-height: var(--control-h); font-size: var(--font-size-base); }

/* Round icon buttons (+, copy, x, up, down). */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: var(--icon-btn); height: var(--icon-btn);
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer;
  list-style: none;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn:disabled { opacity: 0.3; cursor: default; background: transparent; }
.js .range .icon-btn.js-only { display: inline-flex !important; }
summary.icon-btn::-webkit-details-marker { display: none; }

/* ---------- Switch (a real checkbox underneath, role="switch") ---------- */
input.switch {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
  width: 2.75rem; height: 1.5rem; border-radius: var(--radius-pill);
  border: 2px solid var(--outline); background: var(--hover);
  transition: background-color var(--motion), border-color var(--motion);
}
input.switch::before {
  content: ""; position: absolute; top: 50%; left: 0.25rem; width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--outline); transform: translateY(-50%);
  transition: left var(--motion), width var(--motion), height var(--motion), background-color var(--motion);
}
input.switch:checked { background: var(--primary); border-color: var(--primary); }
input.switch:checked::before { left: 1.3rem; width: 1rem; height: 1rem; background: var(--on-primary); }

/* ---------- Hours editor: one compact row per day ---------- */
.week { margin-top: var(--space-5); border-top: var(--border-w) solid var(--divider); }
.day-row {
  display: grid; grid-template-columns: 3rem 7.5rem auto auto 1fr; column-gap: var(--space-3); row-gap: var(--space-1);
  align-items: start; padding: var(--space-3) 0; border-bottom: var(--border-w) solid var(--divider);
}
.day-row > .switch { grid-column: 1; grid-row: 1; margin-top: 0.6rem; }
.day-name { grid-column: 2; grid-row: 1; margin: 0; padding-top: 0.6rem; font-size: var(--font-size-base); font-weight: 500; color: var(--text); cursor: pointer; }
.day-ranges { grid-column: 3; grid-row: 1; display: grid; gap: var(--space-2); }
.day-tools { grid-column: 4; grid-row: 1; display: flex; gap: var(--space-1); align-items: center; min-height: 2.5rem; }
.unavailable { grid-column: 3 / 5; grid-row: 1; display: none; margin: 0; padding-top: 0.6rem; color: var(--text-3); }
.day-error { grid-column: 3 / -1; grid-row: 2; margin: var(--space-1) 0 0; }
.switch:not(:checked) ~ .day-ranges, .switch:not(:checked) ~ .day-tools { display: none; }
.switch:not(:checked) ~ .unavailable { display: block; }
.range { display: flex; align-items: center; gap: var(--space-2); }
.range-dash { color: var(--text-3); }
.range select.time, select.time { width: auto; min-width: 0; min-height: 2.5rem; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.override-form { margin-top: var(--space-3); }
.override-form .day-row { border-bottom: 0; padding-bottom: 0; }
.override-form .week, .override-form .day-row { border-top: 0; }
.override-form input[type=date], input.short, select.short { max-width: 14rem; }
.field-label { font-weight: 500; font-size: var(--font-size-small); color: var(--text-2); margin: var(--space-4) 0 0; }
.detail-fields .hint { margin-top: var(--space-1); }
.detail-list { list-style: none; margin: var(--space-2) 0 var(--space-5); padding: 0; display: grid; gap: var(--space-1); }
.detail-list li { display: flex; align-items: center; gap: var(--space-3); min-height: 2rem; }
.detail-list .check { margin: 0; }
.detail-list input:disabled { cursor: default; }
.detail-note { color: var(--text-3); font-size: var(--font-size-small); }
.setting-check { margin: 0 0 var(--space-4); }
.setting-check .check { margin: 0; }
.setting-check .hint { margin: var(--space-1) 0 0 calc(1.125rem + var(--space-2)); }  /* lined up with the label's text */

details.copy { position: relative; }
details.copy[open] > summary { background: var(--hover); color: var(--text); }
.copy-pop {
  position: absolute; top: 2.75rem; left: 0; z-index: 20; width: 13rem; padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--surface); border-radius: var(--radius-s); box-shadow: var(--overlay-shadow);
}
.copy-title { margin: 0 0 var(--space-2); font-size: var(--font-size-tiny); font-weight: 500; color: var(--text-3); }
.copy-pop .check { margin: 0; padding: var(--space-1) 0; }
.copy-pop .button { width: 100%; margin-top: var(--space-3); }

/* ---------- One-line choice rows: control, then "Label - description" ---------- */
.choice-list { border: 0; padding: 0; margin: var(--space-4) 0 0; }
.choice-list legend { font-family: var(--font); font-weight: 500; font-size: var(--font-size-small); color: var(--text-2); margin-bottom: var(--space-1); }
.choice-list .check { margin: var(--space-2) 0; }
.option {
  display: flex; gap: var(--space-3); align-items: flex-start; margin: var(--space-2) 0 0; padding: var(--space-3);
  font-size: var(--font-size-base); font-weight: 400; color: var(--text); line-height: 1.4;
  border: var(--border-w) solid var(--divider); border-radius: var(--radius-s); background: var(--surface); cursor: pointer;
}
.option:hover { background: var(--hover); }
.option:has(input:checked) { border-color: var(--primary); background: var(--selected); }
.option input { margin-top: 0.1rem; }
.loc-name { font-weight: 500; }
.loc-desc { color: var(--text-3); }
.option:has(input:checked) .loc-desc { color: var(--text-2); }
.option-detail { margin: var(--space-2) 0 var(--space-1) var(--space-6); }
.option-detail label { margin-top: var(--space-1); }
.loc-list .field-error { margin-top: var(--space-2); }
.where-one { margin: var(--space-5) 0 0; }
.where-label { font-weight: 500; }

/* ---------- Booking questions builder ---------- */
.questions { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.question-row { border: var(--border-w) solid var(--divider); border-radius: var(--radius-s); padding: var(--space-2) var(--space-4) var(--space-4); background: var(--surface); }
.q-head { display: flex; justify-content: space-between; align-items: center; min-height: var(--icon-btn); }
.q-title { font-family: var(--font-display); font-weight: 500; }
.q-tools { gap: var(--space-1); }
.q-grid { display: grid; grid-template-columns: 1fr 13rem auto; gap: 0 var(--space-3); align-items: end; }
.q-grid label { margin-top: var(--space-2); }
.q-req { margin: 0 0 var(--space-3); }
.q-choices label { margin-top: var(--space-3); }
.question-add { align-items: center; gap: var(--space-3); margin-top: var(--space-4); }

/* ---------- Lists, tables, facts ---------- */
.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius-m); }
.card .list { background: none; border-radius: 0; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: var(--border-w) solid var(--divider); }
.card .list-row { padding-left: 0; padding-right: 0; }
.list-row:first-child { border-top: 0; }
.row-title { font-weight: 500; }
.row-when { text-align: right; font-size: var(--font-size-small); color: var(--text-2); }
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-4); }
.narrow-list { max-width: 35rem; margin: 0 auto; grid-template-columns: 1fr; }
.type-card { margin: 0; border: var(--border-w) solid var(--divider); }
.type-card h2 { margin-bottom: var(--space-1); }
.type-card p { margin: var(--space-1) 0; }
.table-wrap { overflow-x: auto; padding: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: var(--border-w) solid var(--divider); }
th { font-size: var(--font-size-small); color: var(--text-3); font-weight: 500; }
tr:last-child td { border-bottom: 0; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0; }
dl.facts dt { color: var(--text-3); font-weight: 500; }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
dl.facts .guest-list { list-style: none; margin: 0; padding: 0; }
.booking-row { border-top: var(--border-w) solid var(--divider); padding: var(--space-3) 0; }
.booking-row:first-child { border-top: 0; }
.booking-row summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; }

/* ---------- Public booking pages ---------- */
.booking-layout { display: grid; grid-template-columns: 18.75rem 1fr; background: var(--surface); border-radius: var(--radius-m); overflow: hidden; }
.summary {
  padding: var(--space-5); border-right: var(--border-w) solid var(--divider);
  align-self: start; position: sticky; top: 0;  /* stays beside a long list of times */
}
.meta { list-style: none; padding: 0; margin: var(--space-3) 0; color: var(--text-2); }
.meta li { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-1) 0; }
.meta svg { flex: none; margin-top: 0.2rem; color: var(--text-3); }
.meta a { color: var(--text-2); }
.desc { white-space: pre-wrap; color: var(--text-2); }
.picker { padding: var(--space-5); min-width: 0; border-left: var(--border-w) solid var(--divider); margin-left: calc(-1 * var(--border-w)); }
/* Scheduler: month calendar (step one) beside the day's times (step two). */
.scheduler { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-5); min-width: 0; border-left: var(--border-w) solid var(--divider); margin-left: calc(-1 * var(--border-w)); }
.scheduler.has-day { grid-template-columns: minmax(0, 1fr) 12.5rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.cal-month { margin: 0; font-size: var(--font-size-h3); font-weight: 500; }
.cal-nav { display: flex; gap: var(--space-1); }
.cal-nav [aria-disabled="true"] { opacity: 0.3; cursor: default; background: transparent; }
.cal { width: 100%; border-collapse: separate; border-spacing: var(--space-1); table-layout: fixed; }
.cal th, .cal td { padding: 0; border: 0; text-align: center; }
.cal th { font-size: var(--font-size-tiny); font-weight: 500; color: var(--text-3); padding-bottom: var(--space-2); }
.cal abbr { text-decoration: none; }
.cal-day {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h); height: var(--control-h); border-radius: 50%; color: var(--text-3); text-decoration: none;
}
.cal-day.open { background: var(--primary-container); color: var(--primary); font-weight: 500; cursor: pointer; transition: background-color var(--motion); }
.cal-day.open:hover { background: var(--selected); }
.cal-day.chosen, .cal-day.chosen:hover { background: var(--primary); color: var(--on-primary); }
.cal-day.today::after { content: ""; position: absolute; bottom: 0.3rem; left: 50%; width: 0.25rem; height: 0.25rem; margin-left: -0.125rem; border-radius: 50%; background: currentColor; }
.cal-empty { color: var(--text-3); font-size: var(--font-size-small); margin: var(--space-3) 0 0; }
.tz-form { margin-top: var(--space-5); }
.tz-form label { margin-top: 0; }
.tz-row { display: flex; gap: var(--space-2); }
.tz-row select { flex: 1; min-width: 0; }
.times-pane { min-width: 0; }
.times-pane h2 { margin-bottom: var(--space-1); }
.times-day { margin: 0; font-weight: 500; }
.times-meta { margin: 0 0 var(--space-4); color: var(--text-3); font-size: var(--font-size-small); }
.time-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); max-height: 26rem; overflow-y: auto; }
.time-btn {
  display: flex; align-items: center; justify-content: center; min-height: 3rem; border-radius: var(--radius-s);
  border: var(--border-w) solid var(--primary); color: var(--primary); font-weight: 500; text-decoration: none;
  transition: background-color var(--motion);
}
.time-btn:hover { background: var(--selected); }
.back-link { display: none; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); text-decoration: none; font-weight: 500; }
.chosen-time { background: var(--selected); color: var(--on-primary-container); border-radius: var(--radius-s); padding: var(--space-3) var(--space-4); margin-top: 0; }
.confirm { text-align: center; }
.confirm dl.facts { text-align: left; }
.check-mark { width: 3.25rem; height: 3.25rem; margin: 0 auto var(--space-3); border-radius: 50%; background: var(--success); display: grid; place-items: center; color: var(--on-primary); }
.qr { width: 12.5rem; max-width: 100%; margin: var(--space-3) 0; }
.qr svg { width: 100%; height: auto; display: block; }
.secret { word-break: break-all; }

/* ---------- Phones ---------- */
@media (max-width: 45rem) {
  h1 { font-size: var(--font-size-h1-phone); }
  .booking-layout { grid-template-columns: 1fr; }
  .summary { border-right: 0; border-bottom: var(--border-w) solid var(--divider); position: static; }
  .picker, .scheduler { border-left: 0; margin-left: 0; }
  .scheduler { padding: var(--space-5) var(--space-4); }
  .scheduler.has-day { grid-template-columns: minmax(0, 1fr); }
  .scheduler.has-day .cal-pane { display: none; }
  .back-link { display: inline-flex; }
  .time-list { max-height: none; }
  .cal-day { width: 2.5rem; height: 2.5rem; }
  dl.facts { grid-template-columns: 1fr; gap: 0; }
  dl.facts dd { margin-bottom: var(--space-3); }
  .summary, .picker { padding: var(--space-5) var(--space-4); }
  .grid-2 { grid-template-columns: 1fr; }
  .day-row { grid-template-columns: 3rem 1fr auto; }
  .day-tools { grid-column: 3; grid-row: 1; }
  .day-ranges { grid-column: 1 / -1; grid-row: 2; }
  .unavailable { grid-column: 3; grid-row: 1; text-align: right; }
  .day-error { grid-column: 1 / -1; grid-row: 3; }
  .range select.time { flex: 1; }
  .copy-pop { left: auto; right: 0; }
  .list-row { flex-direction: column; align-items: flex-start; }
  .row-when { text-align: left; }
  .card { padding: var(--space-5) var(--space-4); }
  .q-grid { grid-template-columns: 1fr; }
  .q-req { margin: var(--space-3) 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Calendars page ---------- */
.provider-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.provider-head h2 { margin: 0; }
.badge.warn { background: var(--error-container); color: var(--error); }
.plain-list { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-5); color: var(--text-2); }
.plain-list li { margin: var(--space-1) 0; }
.connected-as { margin: var(--space-3) 0 var(--space-4); color: var(--text-2); }
.calendar-row { gap: var(--space-3); }
.cal-swatch { width: 0.875rem; height: 0.875rem; border-radius: var(--radius-field); background: var(--swatch, var(--outline)); flex: none; }
select.calendar-select { max-width: 28rem; }
.provider-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-w) solid var(--divider); }
.alert p { margin: 0; }
.alert p + p, .alert p + form { margin-top: var(--space-2); }

/* ---------- Add guests (booking form) ---------- */
details.add-guests { margin-top: var(--space-4); }
details.add-guests > summary { list-style: none; width: fit-content; }
details.add-guests > summary::-webkit-details-marker { display: none; }
details.add-guests[open] > summary { display: none; }  /* the box replaces the button, as Calendly's does */
details.add-guests label { margin-top: 0; }

/* ---------- Confirm in place (no browser dialogs) ---------- */
details.confirm-inline { margin-top: var(--space-5); }
details.confirm-inline > summary { list-style: none; width: fit-content; }
details.confirm-inline > summary::-webkit-details-marker { display: none; }
.confirm-panel { margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-s); background: var(--error-container); }
.confirm-panel p { margin: 0 0 var(--space-3); color: var(--text); }
.button.primary.danger-fill { background: var(--error); border-color: var(--error); color: var(--on-primary); }
.button.primary.danger-fill:hover { background: var(--error); box-shadow: var(--shadow-1); }
.confirm-panel label { margin-top: 0; }
.confirm-panel .form-actions { margin-top: var(--space-3); }

/* ---------- Changing a booking (reschedule, cancel) ---------- */
.booking-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-5); }
.booking-actions details.confirm-inline { margin-top: 0; }
.booking-actions details.confirm-inline[open] { flex-basis: 100%; }  /* the panel gets the full width, under Reschedule */
.moving { background: var(--selected); color: var(--on-primary-container); border-radius: var(--radius-s); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0 0; }
.moving-label { font-size: var(--font-size-small); font-weight: 500; }
.move-facts dd s, .confirm s { color: var(--text-3); }
.move-back { margin: var(--space-4) 0 0; text-align: center; }
.section-gap { margin-top: var(--space-6); }

/* ---------- Embedded in another site (/embed/...) ---------- */
body.embed { min-height: 0; background: transparent; }
body.embed main.wrap { padding-top: 0; padding-bottom: 0; max-width: none; padding-left: 0; padding-right: 0; }
body.embed .booking-layout, body.embed .card { margin-bottom: 0; }
body.embed .notice { margin-bottom: var(--space-3); }
.booking-layout.no-summary { grid-template-columns: minmax(0, 1fr); }
.booking-layout.no-summary .picker, .booking-layout.no-summary .scheduler { border-left: 0; margin-left: 0; }

/* ---------- Reminder list (meeting type form) ---------- */
.reminder-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.reminder-row { display: flex; align-items: center; gap: var(--space-2); }
.reminder-row select { max-width: 20rem; }
.reminder-add { margin-top: var(--space-3); }
.reminder-empty { color: var(--text-3); margin: var(--space-3) 0 0; }

/* ---------- Share, embed and webhooks ---------- */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--font-size-small); }
.copy-row { display: flex; gap: var(--space-2); align-items: flex-start; }
.copy-row input, .copy-row textarea { flex: 1; min-width: 0; }
.copy-row .button { flex: none; margin-top: var(--space-1); }
.share label { margin-top: var(--space-3); }
details.snippets { margin-top: var(--space-4); }
details.snippets > summary { cursor: pointer; color: var(--primary); font-weight: 500; width: fit-content; }
.secret-panel { background: var(--selected); color: var(--on-primary-container); border-radius: var(--radius-s); padding: var(--space-4); margin-bottom: var(--space-5); }
.secret-panel p { margin: 0 0 var(--space-3); }
.hook-url { overflow-wrap: anywhere; }
.hook-on { margin-top: var(--space-4); }
.provider-actions details.inline-confirm { margin-top: 0; }
.provider-actions details.inline-confirm[open] { flex-basis: 100%; order: 3; }
.delivery-table td { vertical-align: top; }
.delivery-table .field-error { margin-top: var(--space-1); }
.card .table-wrap { margin: 0 calc(-1 * var(--space-4)); }
.event-choice { align-items: flex-start; }
.event-choice input { margin-top: 0.2rem; }
.event-desc { display: block; color: var(--text-3); font-size: var(--font-size-small); }
@media (max-width: 45rem) {
  .card .table-wrap { margin: 0; }
  .delivery-table thead { display: none; }
  .delivery-table, .delivery-table tbody, .delivery-table tr, .delivery-table td { display: block; }
  .delivery-table tr { padding: var(--space-3) 0; border-bottom: var(--border-w) solid var(--divider); }
  .delivery-table tr:last-child { border-bottom: 0; }
  .delivery-table td { padding: var(--space-1) 0; border: 0; }
  .delivery-table td[data-label="Tries"]::before, .delivery-table td[data-label="Time"]::before {
    content: attr(data-label) ": "; color: var(--text-3);
  }
}

/* ---------- Floating button builder (Share and embed) ---------- */
.launcher-form .grid-2 { margin-top: var(--space-1); }
.color-row { display: flex; align-items: center; gap: var(--space-3); }
.color-row input[type=color] { width: var(--control-h); height: var(--control-h); padding: var(--space-1); border: var(--border-w) solid var(--outline); border-radius: var(--radius-field); background: var(--surface); cursor: pointer; }
.launcher-phones { margin-top: var(--space-4); }
.launcher-form .no-js-only { margin-top: var(--space-3); }
/* A small plain stand-in for a web page, with the button in its corner. */
.launcher-stage { position: relative; height: 9rem; margin-top: var(--space-2); border: var(--border-w) solid var(--divider); border-radius: var(--radius-s); background: var(--bg); overflow: hidden; }
.launcher-preview { position: absolute; bottom: var(--space-4); max-width: calc(100% - 2 * var(--space-4)); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); font: 600 var(--font-size-base)/1.25 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow-2); }
.launcher-preview.right { right: var(--space-4); }
.launcher-preview.left { left: var(--space-4); }

/* ---------- Calendars with two providers ---------- */
.calendar-name { overflow-wrap: anywhere; }
.calendar-group { margin: var(--space-4) 0 var(--space-1); font-weight: 500; font-size: var(--font-size-small); color: var(--text-2); overflow-wrap: anywhere; }
.narrow-wide { max-width: 40rem; margin-left: auto; margin-right: auto; }
.steps { padding-left: var(--space-5); }
.steps li { margin: var(--space-3) 0; }
.admin-link { margin: var(--space-2) 0; }