/* Shared CTM components. Marketing artwork keeps its own layout; controls,
   focus treatment and status colours share the same accessible foundation. */
.sr-only {
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; clip-path:inset(50%)!important;
  white-space:nowrap!important; border:0!important;
}
:root {
  --ctm-ink:#071d50; --ctm-muted:#60708c; --ctm-pink:#e90061;
  --ctm-blue:#008fee; --ctm-line:#dce7f4; --ctm-surface:#fff;
  --ctm-card-radius:18px; --ctm-field-radius:11px; --ctm-pill-radius:99px;
  --ctm-target:44px; --ctm-focus:3px solid var(--ctm-pink);
  --ctm-success-ink:#226343; --ctm-success-fill:#eefaf4;
  --ctm-error-ink:#972b45; --ctm-error-fill:#fff2f5;
  --ctm-warning-ink:#97571b; --ctm-warning-fill:#fff7e7;
  --ctm-motion:180ms;
  --ctm-active-ink:#00639d; --ctm-active-fill:#eaf6ff; --ctm-active-line:#bddbee;
  --ctm-space-1:4px; --ctm-space-2:8px; --ctm-space-3:12px; --ctm-space-4:16px;
  --ctm-space-6:24px; --ctm-space-8:32px;
  --ctm-body-font:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ctm-heading-font:'Baloo 2','Arial Rounded MT Bold',sans-serif;
  --ctm-panel-padding:24px; --ctm-control-target:44px;
  --ctm-control-fill:#fff; --ctm-control-line:#bdcde0; --ctm-control-ink:#071d50;
  --ctm-control-soft:#f3f7fc; --ctm-secondary-ink:#52627a;
  --ctm-review-ink:#9e4218; --ctm-review-fill:#fff0e6; --ctm-review-line:#e5b59a;
  --ctm-review-dot:#c35b20; --ctm-hold-dot:#b88700;
  --ink:var(--ctm-ink); --navy:var(--ctm-ink); --muted:var(--ctm-muted); --pink:var(--ctm-pink);
  --blue:var(--ctm-blue); --line:var(--ctm-line); --surface:var(--ctm-surface);
}
html[data-portal-theme=dark] {
  --ctm-active-ink:var(--portal-blue,#67bfff);
  --ctm-active-fill:var(--portal-blue-soft,#17364f);
  --ctm-active-line:var(--portal-blue,#67bfff);
  --ctm-control-fill:var(--portal-input,#0c192c); --ctm-control-line:var(--portal-control-line,#7b8ca6);
  --ctm-control-ink:var(--portal-text,#f3f7ff); --ctm-control-soft:var(--portal-raised,#1d2b46);
  --ctm-secondary-ink:var(--portal-muted,#b6c4d9);
  --ctm-review-ink:#ffd0ad; --ctm-review-fill:#42291b; --ctm-review-line:#a46a43;
  --ctm-review-dot:#ffab70; --ctm-hold-dot:#f1cf61;
}
/* A single selected-navigation treatment across Owner, Staff and customer tools. */
body :is(.reports-tabs>.button[aria-selected=true],.accounting-tabs>.button[aria-current=page],.cost-tabs>.button[aria-current=page],.customer-nav>button[aria-current=page]) {
  color:var(--ctm-active-ink); background:var(--ctm-active-fill); border-color:var(--ctm-active-line);
}
details.ctm-disclosure>summary {
  display:flex; align-items:center; gap:12px; min-height:var(--ctm-target);
  cursor:pointer; list-style:none; overflow-wrap:anywhere;
}
details.ctm-disclosure>summary::-webkit-details-marker { display:none; }
details.ctm-disclosure>summary::marker { content:''; }
/* An existing icon or CSS cue replaces the native browser marker as well. */
details.ctm-disclosure-custom>summary { list-style:none; }
details.ctm-disclosure-custom>summary::-webkit-details-marker { display:none; }
details.ctm-disclosure-custom>summary::marker { content:''; }
details.ctm-disclosure>summary::after {
  content:''; display:block; box-sizing:border-box; width:9px; height:9px;
  flex:0 0 9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  margin:0 4px 4px auto; transform:rotate(45deg);
}
details.ctm-disclosure[open]>summary::after { transform:rotate(225deg); margin-block:4px 0; }
.ctm-responsive-table .ctm-table-label { display:none; }
.ctm-responsive-table :is(th,td) { font-variant-numeric:tabular-nums; }
.ctm-responsive-table th.ctm-table-number,.ctm-table-number>.ctm-table-value { text-align:right; }
.ctm-table-number>.ctm-table-value { display:block; }
.ctm-table-label { text-align:left; }
@media(max-width:760px) {
  .ctm-responsive-table,.ctm-responsive-table tbody { display:block; width:100%; }
  .ctm-responsive-table thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); }
  .ctm-responsive-table tbody { display:grid; gap:12px; }
  .ctm-responsive-table tbody>tr { display:block; padding:12px; border:1px solid var(--ctm-line); border-radius:12px; }
  .ctm-responsive-table tbody td { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:12px; border:0; padding:7px 0; min-width:0; }
  .ctm-responsive-table .ctm-table-label { display:block; color:var(--ctm-muted); font-size:12px; font-weight:800; }
  .ctm-responsive-table .ctm-table-value { min-width:0; overflow-wrap:anywhere; }
}
@media(max-width:380px) {
  .ctm-responsive-table tbody td { grid-template-columns:minmax(0,1fr); gap:3px; }
  .ctm-table-number>.ctm-table-value { text-align:left; }
}
/* Two-column statements already fit a phone. Keep their shared column labels
   once, reserving repeated mobile labels for genuinely wider reports. */
@media(max-width:760px) {
  .ctm-responsive-table[data-columns="2"] { display:table; table-layout:fixed; }
  .ctm-responsive-table[data-columns="2"] thead { display:table-header-group; position:static; width:auto; height:auto; margin:0; padding:0; overflow:visible; clip-path:none; }
  .ctm-responsive-table[data-columns="2"] tbody { display:table-row-group; }
  .ctm-responsive-table[data-columns="2"] :is(thead,tbody)>tr { display:table-row; padding:0; border:0; }
  .ctm-responsive-table[data-columns="2"] :is(th,td) { display:table-cell; width:58%; padding:10px 8px; border-bottom:1px solid var(--ctm-line); }
  .ctm-responsive-table[data-columns="2"] :is(th,td):last-child { width:42%; }
  .ctm-responsive-table[data-columns="2"] .ctm-table-label { display:none; }
  .ctm-responsive-table[data-columns="2"] .ctm-table-number>.ctm-table-value { text-align:right; }
}
:is(button,a,summary,input,select,textarea):focus-visible,.availability-day:focus-visible {
  outline:var(--ctm-focus); outline-offset:3px;
}
input:focus,select:focus,textarea:focus {
  outline:var(--ctm-focus); outline-offset:2px; border-color:var(--ctm-pink);
}
.button { border-radius:var(--ctm-pill-radius); }
.button:disabled { cursor:not-allowed; }
.button .icon { flex-shrink:0; }
.card { border-radius:var(--ctm-card-radius); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea {
  border-radius:var(--ctm-field-radius);
}
.notice.success { color:var(--ctm-success-ink); background:var(--ctm-success-fill); }
.notice.error,.form-error { color:var(--ctm-error-ink); background:var(--ctm-error-fill); }
.action-row { gap:10px; flex-wrap:wrap; }
.detail-dialog,.dialog { overscroll-behavior:contain; }
.close-button,.icon-button { min-width:var(--ctm-target); min-height:var(--ctm-target); }
.ctm-date-entry { display:block; position:relative; min-width:0; width:100%; }
.ctm-date-entry[hidden] { display:none; }
.ctm-date-entry input.ctm-date-native {
  position:absolute; right:4px; top:50%; transform:translateY(-50%); z-index:1;
  width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important;
  padding:0!important; margin:0!important; border:0!important; font-size:16px!important;
  opacity:0; cursor:pointer;
}
.ctm-date-entry input.ctm-date-native::-webkit-calendar-picker-indicator {
  position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0; cursor:pointer;
}
.ctm-date-without-picker input.ctm-date-native {
  width:1px!important; min-width:0!important; height:1px!important; min-height:0!important; pointer-events:none;
}
.ctm-date-entry input.ctm-date-display { width:100%; min-width:0; box-sizing:border-box; padding-right:54px; }
.ctm-date-entry.ctm-date-without-picker input.ctm-date-display { padding-right:12px; }
.ctm-date-picker {
  position:absolute; right:4px; top:50%; transform:translateY(-50%); width:44px; height:44px;
  min-width:44px; min-height:44px; display:grid; place-items:center; padding:10px;
  border:0; border-radius:var(--ctm-field-radius); background:transparent; color:inherit; pointer-events:none;
}
.ctm-date-picker svg { width:22px; height:22px; }
.ctm-date-picker[hidden] { display:none; }
.ctm-date-entry:has(input.ctm-date-native:hover) .ctm-date-picker { color:var(--ctm-pink); }
.ctm-date-entry:has(input.ctm-date-native:focus-visible) .ctm-date-picker { outline:3px solid var(--ctm-blue,#008fee); outline-offset:2px; }
.ctm-date-picker-disabled { opacity:.45; }
@media(max-width:760px) {
  .admin-panel .button,.staff-main .button,.detail-dialog .button,.quote-dialog .button {
    min-height:var(--ctm-target); white-space:normal; overflow-wrap:anywhere;
  }
  .detail-dialog input,.detail-dialog select,.detail-dialog textarea,
  .staff-main input,.staff-main select,.admin-panel input,.admin-panel select,
  .quote-dialog input,.quote-dialog select,.quote-dialog textarea { font-size:16px; }
  .action-row>.button { max-width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}
.ctm-crew-picker { min-width:0; margin:0; padding:16px; border:1px solid var(--ctm-line,#d6dfeb); border-radius:var(--ctm-field-radius,16px); }
.ctm-crew-picker legend { max-width:100%; padding:0 6px; font-weight:800; }
.ctm-crew-summary { margin:0 0 12px; overflow-wrap:anywhere; }
.ctm-crew-options { display:grid; gap:8px; max-height:290px; overflow:auto; overscroll-behavior:contain; }
.ctm-crew-option { display:flex!important; flex-direction:row!important; align-items:center; gap:12px; min-height:44px; min-width:0; margin:0; padding:8px; border-radius:10px; cursor:pointer; text-align:left; }
.ctm-crew-option[hidden] { display:none!important; }
.ctm-crew-option input[type=checkbox] { flex:0 0 22px; width:22px; min-height:22px; margin:0; accent-color:var(--ctm-pink,#e90061); }
.ctm-crew-person { min-width:0; display:grid; gap:2px; overflow-wrap:anywhere; }
.ctm-crew-search { margin:0 0 10px; }
.ctm-crew-picker>.button { margin-top:12px; }
.ctm-crew-option:has(input:checked) { background:color-mix(in srgb,var(--ctm-blue,#00a6e9) 10%,transparent); }
.ctm-crew-option:focus-within { outline:3px solid var(--ctm-pink,#e90061); outline-offset:-2px; }
.ctm-crew-picker-compact { padding:0; border:0; border-radius:0; min-width:0; width:100%; }
.ctm-crew-picker-compact>legend { padding:0; font-size:14px; margin-bottom:7px; }
.ctm-crew-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; min-width:0; }
.ctm-crew-heading>.ctm-crew-summary { margin:0; font-size:13px; line-height:1.5; }
.ctm-crew-heading>.ctm-crew-toggle { min-width:0; white-space:nowrap; overflow-wrap:normal; }
.ctm-crew-panel { min-width:0; margin-top:12px; padding:12px; border:1px solid var(--ctm-line); border-radius:var(--ctm-field-radius); background:var(--ctm-surface); }
.ctm-crew-panel[hidden] { display:none; }
.ctm-crew-actions { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ctm-crew-actions .button { min-width:0; white-space:nowrap; overflow-wrap:normal; }
.work-task-crew { position:relative; }
.work-task-crew>legend { font-size:13px; margin-bottom:5px; }
.work-task-crew>.ctm-crew-heading { grid-template-columns:minmax(0,1fr); gap:0; }
.work-task-crew>.ctm-crew-heading>.ctm-crew-summary { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.work-task-crew>.ctm-crew-heading>.ctm-crew-toggle { width:100%; border-radius:var(--ctm-field-radius); justify-content:space-between; text-align:left; font-size:13px; white-space:normal; overflow-wrap:normal; }
.work-task-crew>.ctm-crew-heading>.ctm-crew-toggle::after { content:'⌄'; flex:0 0 auto; margin-left:8px; }
.work-task-crew>.work-task-use-default { margin-top:4px; padding:4px 0; min-height:44px; font-size:12px; }
.work-task-crew>.work-task-use-default[hidden] { display:none; }
@media(max-width:620px) {
 .ctm-crew-heading { grid-template-columns:minmax(0,1fr); gap:8px; }
 .ctm-crew-heading>.ctm-crew-toggle { justify-self:start; width:auto; }
 .ctm-crew-panel { padding:10px; }
}

/* Wrap complete portal actions before their labels become cramped. */
:is(.admin-panel,.detail-dialog,.quote-dialog,.staff-main) .workspace-tabs { flex-wrap:wrap; }
:is(.admin-panel,.detail-dialog,.quote-dialog,.staff-main) .action-row>.button,
:is(.admin-panel,.detail-dialog,.quote-dialog,.staff-main) .workspace-tabs>.button,
.billing-workspace-tabs>.button {
 flex-basis:max-content; min-width:0; max-width:100%;
 white-space:normal; overflow-wrap:normal;
}

.ctm-handover-checklist{display:grid;gap:1rem}.ctm-handover-rows{display:grid;gap:.75rem}.ctm-handover-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:1rem;padding:.75rem;border:1px solid var(--border,#64748b66);border-radius:12px}.ctm-handover-row label{min-width:0;overflow-wrap:anywhere}.ctm-handover-row input:not([type=checkbox]),.ctm-handover-checklist select{width:100%;min-width:0;box-sizing:border-box}.ctm-handover-check{display:flex;align-items:center;gap:.75rem;min-height:44px}.ctm-handover-check input[type=checkbox]{width:24px;height:24px;flex:0 0 24px}.ctm-handover-checklist .action-row{display:flex;flex-wrap:wrap;gap:.75rem}@media(max-width:600px){.ctm-handover-row{grid-template-columns:minmax(0,1fr)}.ctm-handover-checklist .action-row button{flex:1;white-space:normal}}

.ctm-handover-row>label.ctm-handover-check{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.75rem}.ctm-handover-row>label.ctm-handover-check input[type=checkbox]{width:24px;min-width:24px;height:24px;min-height:24px;margin:0;flex:0 0 24px}

/* One component contract, loaded after page-specific styles. The public hero
   keeps its approved illustration scale; the same controls, focus, spacing and
   semantic states are shared by every interactive CTM surface. */
body[data-ctm-surface] { --ctm-focus:3px solid var(--ctm-active-ink); }
body[data-ctm-surface] :is(.button,.payment-button) {
  box-sizing:border-box; min-height:44px; min-width:44px; max-width:100%;
  font-family:var(--ctm-body-font); font-weight:800; line-height:1.4;
  border-radius:var(--ctm-pill-radius); gap:var(--ctm-space-2); text-align:center;
  touch-action:manipulation; overflow-wrap:normal;
}
body:is([data-ctm-surface=admin],[data-ctm-surface=staff],[data-ctm-surface=customer]) :is(.button,.payment-button):not(.portal-theme-toggle) {
  padding:10px 18px; font-size:14px; white-space:normal;
}
body[data-ctm-surface] :is(.button,.payment-button):disabled { cursor:not-allowed; opacity:.55; }
body[data-ctm-surface] :is(.button,.payment-button)[aria-busy=true] { cursor:progress; }
body[data-ctm-surface] :is(.button,.payment-button,.close-button,.icon-button):focus-visible {
  outline:var(--ctm-focus); outline-offset:3px;
}
body[data-ctm-surface] :is(.close-button,.icon-button) {
  display:inline-flex; align-items:center; justify-content:center; padding:8px;
  min-width:44px; min-height:44px; flex-shrink:0; line-height:1;
}
body:is([data-ctm-surface=admin],[data-ctm-surface=staff],[data-ctm-surface=customer]) {
  font-family:var(--ctm-body-font); font-size:15px; line-height:1.55;
}
body:is([data-ctm-surface=admin],[data-ctm-surface=staff],[data-ctm-surface=customer]) :is(h1,h2,h3) {
  font-family:var(--ctm-heading-font); line-height:1.2; overflow-wrap:break-word;
}
body:is([data-ctm-surface=admin],[data-ctm-surface=staff],[data-ctm-surface=customer]) h1 { font-size:clamp(30px,3.2vw,42px); }
body:is([data-ctm-surface=admin],[data-ctm-surface=staff],[data-ctm-surface=customer]) h2 { font-size:24px; }
body:is([data-ctm-surface=admin],[data-ctm-surface=staff],[data-ctm-surface=customer]) h3 { font-size:20px; }
body[data-ctm-surface] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not(.ctm-date-native),select,textarea) {
  box-sizing:border-box; min-width:0; max-width:100%; min-height:44px;
  font-family:var(--ctm-body-font); font-size:16px; font-weight:600; line-height:1.5;
  border-radius:var(--ctm-field-radius);
}
body:is([data-ctm-surface=admin],[data-ctm-surface=staff],[data-ctm-surface=customer]) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not(.ctm-date-native),select,textarea) {
  background-color:var(--ctm-control-fill); color:var(--ctm-control-ink); border-color:var(--ctm-control-line);
}
body[data-ctm-surface] :is(input,select,textarea):focus {
  outline:var(--ctm-focus); outline-offset:2px; border-color:var(--ctm-active-ink);
}
body[data-ctm-surface] :is(input[type=checkbox],input[type=radio]) { accent-color:var(--ctm-pink); }
body[data-ctm-surface] :is(input[type=checkbox],input[type=radio]):focus-visible { outline:var(--ctm-focus); outline-offset:3px; }
body:is([data-ctm-surface=admin],[data-ctm-surface=staff],[data-ctm-surface=customer]) label { font-size:13px; font-weight:800; line-height:1.5; }
body:is([data-ctm-surface=admin],[data-ctm-surface=staff],[data-ctm-surface=customer]) :is(.field-help,.small-text,.help,.report-note,.cost-note) {
  font-size:13px; line-height:1.6;
}
body[data-ctm-surface] :is(input[type=file])::file-selector-button {
  font:800 14px/1.4 var(--ctm-body-font); color:var(--ctm-control-ink); background:var(--ctm-control-soft);
  border:1px solid var(--ctm-control-line); border-radius:8px; padding:8px 12px; margin-right:12px; cursor:pointer;
}
body:is([data-ctm-surface=admin],[data-ctm-surface=staff],[data-ctm-surface=customer]) .card {
  padding:var(--ctm-panel-padding); border-radius:var(--ctm-card-radius);
}
body[data-ctm-surface] :is(.card-heading,.dialog-heading,.workspace-heading) {
  min-width:0; gap:var(--ctm-space-4);
}
body[data-ctm-surface] .card-heading { margin-bottom:var(--ctm-space-4); }
body[data-ctm-surface] .card-heading>div { min-width:0; }
body[data-ctm-surface] :is(.stack,.form-grid,.flow-grid,.cost-form,.accounting-form) { gap:var(--ctm-space-4); }
body[data-ctm-surface] :is(.action-row,.flow-actions,.billing-actions) { gap:var(--ctm-space-2); flex-wrap:wrap; }
body[data-ctm-surface] :is(.action-row,.flow-actions,.billing-actions)>.button { max-width:100%; }
body[data-ctm-surface] :is(.dialog-heading,.card-heading)>:is(h1,h2,h3) { margin:0; }
body[data-ctm-surface] :is(.detail-dialog,.dialog,.staff-account-dialog) {
  border-radius:var(--ctm-card-radius); max-width:calc(100vw - 24px);
}
body[data-ctm-surface] :is(.metric-card,.reports-metric,.accounting-metric,.finance-metric) strong { font-variant-numeric:tabular-nums; }

/* Secondary page navigation shares one selected state. Primary workspace rails
   retain their own hierarchy and all saved navigation/density preferences. */
body[data-ctm-surface] :is(.inventory-tabs,.finance-tabs,.reports-tabs,.accounting-tabs,.cost-tabs,.flow-subtabs) {
  gap:var(--ctm-space-2); flex-wrap:wrap;
}
html body[data-ctm-surface] :is(.inventory-tabs,.finance-tabs,.reports-tabs,.accounting-tabs,.cost-tabs,.flow-subtabs)>.button {
  font-size:14px; min-height:44px; padding:10px 16px;
}
html[data-portal-theme] body[data-ctm-surface] :is(.inventory-tabs,.finance-tabs,.reports-tabs,.accounting-tabs,.cost-tabs,.flow-subtabs,.staff-job-tabs,.customer-nav)>:is(button,.button):is([aria-selected=true],[aria-current=page],[aria-pressed=true]) {
  color:var(--ctm-active-ink); background:var(--ctm-active-fill); border-color:var(--ctm-active-line);
}
body[data-ctm-surface] :is(.booking-display-tabs,.staff-job-tabs,.customer-nav) {
  display:flex; gap:4px; padding:4px; border:1px solid var(--ctm-control-line);
  border-radius:14px; background:var(--ctm-control-soft); align-items:stretch; flex-wrap:wrap;
}
body[data-ctm-surface] :is(.booking-display-tabs,.staff-job-tabs,.customer-nav)>:is(button,.button) {
  flex:1 1 110px; min-width:0; margin:0; border:1px solid transparent; border-radius:10px;
  background:transparent; color:var(--ctm-secondary-ink); font:800 14px/1.4 var(--ctm-body-font);
  min-height:44px; padding:10px 14px;
}
body[data-ctm-surface] .booking-display-tabs { width:min(100%,380px); margin:0 0 var(--ctm-space-4); }
body[data-ctm-surface] .customer-nav { margin:var(--ctm-space-4) 0 var(--ctm-space-6); }
body[data-ctm-surface] .booking-calendar-controls { gap:var(--ctm-space-4); margin:var(--ctm-space-4) 0; }
body[data-ctm-surface] .booking-calendar-controls>.action-row { display:grid; grid-template-columns:44px minmax(120px,1fr) 44px; gap:8px; flex:1; max-width:460px; align-items:end; }
body[data-ctm-surface] .booking-calendar-controls>.action-row>label { grid-column:1/-1; grid-row:1; width:100%; min-width:0; }
body[data-ctm-surface] #calendar-previous { grid-column:1; grid-row:2; }
body[data-ctm-surface] #calendar-next { grid-column:3; grid-row:2; }
body[data-ctm-surface] #calendar-today {
  grid-column:2; grid-row:2; justify-self:stretch; margin:0; font-size:14px;
  border:1px solid var(--ctm-control-line); border-radius:var(--ctm-field-radius);
  background:var(--ctm-control-soft); color:var(--ctm-control-ink);
}
body[data-ctm-surface] :is(#calendar-previous,#calendar-next) { border-radius:var(--ctm-field-radius); padding:8px; }
body[data-ctm-surface] #booking-month { width:100%; }
body[data-ctm-surface] .booking-calendar-controls>label { width:auto; flex:1 1 230px; max-width:420px; }
body[data-ctm-surface] .booking-legend { gap:10px 18px; margin:var(--ctm-space-4) 0; font-size:12px; line-height:1.5; }
body[data-ctm-surface] .booking-dot { width:9px; height:9px; flex:0 0 9px; }
body[data-ctm-surface] .booking-dot.held { background:var(--ctm-hold-dot); }
body[data-ctm-surface] .booking-dot.review { background:var(--ctm-review-dot); border-radius:2px; transform:rotate(45deg); }
body[data-ctm-surface] :is(.calendar-mark.review,.badge.closeout_review,.badge.review) {
  color:var(--ctm-review-ink); background:var(--ctm-review-fill); border-color:var(--ctm-review-line);
}
/* At compact V3 sizes a calendar still needs the same physical touch target as
   every other control. Variables are consumed by the existing size preference. */
@media(pointer:coarse),(max-width:850px) {
  html[data-ctm-display-size="75"] { --ctm-control-target:58.667px; }
  html[data-ctm-display-size="80"] { --ctm-control-target:55px; }
  html[data-ctm-display-size="90"] { --ctm-control-target:48.89px; }
}
body[data-ctm-surface] .ctm-date-entry input.ctm-date-native {
  width:var(--ctm-control-target)!important; min-width:var(--ctm-control-target)!important;
  height:var(--ctm-control-target)!important; min-height:var(--ctm-control-target)!important;
}
body[data-ctm-surface] .ctm-date-picker { width:var(--ctm-control-target); height:var(--ctm-control-target); }
body[data-ctm-surface] .ctm-date-display { padding-right:calc(var(--ctm-control-target) + 10px); }
body[data-ctm-surface] .ctm-date-without-picker input.ctm-date-native { width:1px!important; min-width:0!important; height:1px!important; min-height:0!important; }
body[data-ctm-surface] .ctm-date-without-picker input.ctm-date-display { padding-right:12px; }
body[data-ctm-surface=public] :is(.header-quote,.mobile-bottom .button,.quote-dialog .button) { min-height:44px; }
body[data-ctm-surface=public] :is(.quote-dialog,.detail-dialog) .button { font-size:14px; }
body[data-ctm-surface=public] .flavour-quantity-control input { min-width:44px!important; }
body[data-ctm-surface=payment] .payment-card { border-radius:var(--ctm-card-radius); padding:var(--ctm-panel-padding); }
@media(max-width:760px) {
  :root { --ctm-panel-padding:16px; }
  /* flex-basis:180px belongs to a horizontal desktop heading. In a stacked
     heading it becomes an empty 180px block. Let every mobile heading fit text. */
  body[data-ctm-surface] .card-heading { flex-direction:column; align-items:stretch; gap:var(--ctm-space-3); }
  body[data-ctm-surface] .card-heading>div { flex:0 1 auto; }
  body[data-ctm-surface] .card-heading>.button { align-self:flex-start; }
  body[data-ctm-surface] .booking-calendar-controls { align-items:stretch; flex-direction:column; }
  body[data-ctm-surface] .booking-calendar-controls>.action-row { max-width:none; width:100%; }
  body[data-ctm-surface] .booking-calendar-controls>label { max-width:none; width:100%; flex:0 1 auto; }
  body[data-ctm-surface] :is(.booking-display-tabs,.customer-nav) { width:100%; }
  body[data-ctm-surface] .booking-calendar-card .card-heading>.button { width:100%; }
  body[data-ctm-surface] :is(.detail-dialog,.dialog) { padding:20px 16px; }
}

/* Public panels with their own header/body spacing must not inherit an extra
   dialog inset. Small pickers remain centered; the mobile party builder fills
   the screen so a shared max-width cannot leave a one-sided backdrop strip. */
@media screen {
  body[data-ctm-surface=public] .dialog { margin-inline:auto; }
  body[data-ctm-surface=public] :is(.quote-dialog,.service-dialog) { padding:0; }
}
@media screen and (max-width:759px) {
  body[data-ctm-surface=public] .quote-dialog {
    width:100%; max-width:100vw; margin:0; border-radius:0;
  }
}