/* Business quick actions, scoped to the six fictional sample websites. */
body.has-mobile-actions:not([data-brand="done48"]) {
  --ma-paper: #f7f4ee;
  --ma-card: #fffdf9;
  --ma-ink: #5b1c35;
  --ma-muted: #755962;
  --ma-accent: #983454;
  --ma-accent-ink: #fffdf9;
  --ma-soft: #eee4e4;
  --ma-line: #d6c6c9;
  --ma-dock: #fffdf9;
  --ma-dock-ink: #5b1c35;
  --ma-dock-line: #d6c6c9;
  --ma-focus: #983454;
  --ma-dock-focus: #983454;
  --ma-radius: 20px;
  --ma-button-radius: 100px;
  --ma-heading: Inter, Arial, sans-serif;
  --ma-heading-weight: 500;
  --ma-heading-spacing: -.045em;
}
body.has-mobile-actions[data-brand="torque"] {
  --ma-paper: #f3f1eb;
  --ma-card: #fffdf7;
  --ma-ink: #171b18;
  --ma-muted: #53604c;
  --ma-accent: #ff643d;
  --ma-accent-ink: #171b18;
  --ma-soft: #e6e8df;
  --ma-line: #c9ccc2;
  --ma-dock: #171b18;
  --ma-dock-ink: #f3f1eb;
  --ma-dock-line: #42493e;
  --ma-focus: #171b18;
  --ma-dock-focus: #ffb198;
  --ma-radius: 10px;
  --ma-button-radius: 6px;
  --ma-heading-weight: 750;
  --ma-heading-spacing: -.05em;
}
body.has-mobile-actions[data-brand="kinetiq"] {
  --ma-paper: #f7f4ee;
  --ma-card: #fffdf9;
  --ma-ink: #5b1c35;
  --ma-muted: #755962;
  --ma-accent: #983454;
  --ma-accent-ink: #fffdf9;
  --ma-soft: #eee4e4;
  --ma-line: #d6c6c9;
  --ma-radius: 24px;
}
body.has-mobile-actions[data-brand="northline"] {
  --ma-paper: #f2f0e8;
  --ma-card: #fffdf7;
  --ma-ink: #173c3a;
  --ma-muted: #576a62;
  --ma-accent: #d9a67b;
  --ma-accent-ink: #173c3a;
  --ma-soft: #e9e5d9;
  --ma-line: #c8d0c5;
  --ma-dock: #f2f0e8;
  --ma-dock-ink: #173c3a;
  --ma-dock-line: #c8d0c5;
  --ma-focus: #173c3a;
  --ma-dock-focus: #173c3a;
  --ma-radius: 16px;
  --ma-button-radius: 10px;
  --ma-heading-weight: 600;
}
body.has-mobile-actions[data-brand="arcfield"] {
  --ma-paper: #f2efe8;
  --ma-card: #fffdf6;
  --ma-ink: #202620;
  --ma-muted: #58634f;
  --ma-accent: #63715a;
  --ma-accent-ink: #fffdf6;
  --ma-soft: #e8e8df;
  --ma-line: #d0cbbf;
  --ma-dock: #fffdf6;
  --ma-dock-ink: #202620;
  --ma-dock-line: #d0cbbf;
  --ma-focus: #63715a;
  --ma-dock-focus: #63715a;
  --ma-radius: 12px;
  --ma-button-radius: 7px;
  --ma-heading: ArcSerif, Georgia, serif;
  --ma-heading-weight: 400;
  --ma-heading-spacing: -.025em;
}
body.has-mobile-actions[data-brand="casa-soli"] {
  --ma-paper: #f7f0e5;
  --ma-card: #fffaf2;
  --ma-ink: #50252d;
  --ma-muted: #765158;
  --ma-accent: #50252d;
  --ma-accent-ink: #f7f0e5;
  --ma-soft: #e8d4ca;
  --ma-line: #d0b8b5;
  --ma-dock: #f7f0e5;
  --ma-dock-ink: #50252d;
  --ma-dock-line: #d0b8b5;
  --ma-focus: #50252d;
  --ma-dock-focus: #50252d;
  --ma-radius: 13px;
  --ma-button-radius: 8px;
  --ma-heading: CasaSerif, Georgia, serif;
  --ma-heading-weight: 500;
  --ma-heading-spacing: -.025em;
}
body.has-mobile-actions[data-brand="stillgrove"] {
  --ma-paper: #f4f1e8;
  --ma-card: #fffdf7;
  --ma-ink: #1c3429;
  --ma-muted: #536052;
  --ma-accent: #1c3429;
  --ma-accent-ink: #f4f1e8;
  --ma-soft: #d8dfc9;
  --ma-line: #c5cdbd;
  --ma-dock: #1c3429;
  --ma-dock-ink: #f4f1e8;
  --ma-dock-line: #53664f;
  --ma-focus: #1c3429;
  --ma-dock-focus: #d8dfc9;
  --ma-radius: 22px;
  --ma-button-radius: 100px;
  --ma-heading: SGSerif, Georgia, serif;
  --ma-heading-weight: 400;
  --ma-heading-spacing: -.035em;
}
/* A pale primary action keeps the forest dock distinct and easy to read. */
body[data-brand="stillgrove"] .mobile-action-primary {
  --ma-action-background: #d8dfc9;
  --ma-action-ink: #1c3429;
}

.mobile-action-dock { display: none; }
body[data-brand="done48"] .mobile-action-dock,
body[data-brand="done48"] .mobile-contact-sheet { display: none !important; }
.mobile-action-dock *, .mobile-contact-sheet *,
.mobile-action-dock *::before, .mobile-contact-sheet *::before { box-sizing: border-box; }

/* Native dialog stays in the top layer. Only its content body scrolls. */
body.has-mobile-actions dialog.mobile-contact-sheet {
  position: fixed;
  inset: 0;
  width: min(500px, calc(100vw - 36px));
  max-width: 500px;
  max-height: min(820px, calc(100vh - 48px));
  max-height: min(820px, calc(100dvh - 48px));
  height: auto;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ma-line);
  border-radius: calc(var(--ma-radius) + 6px);
  background: var(--ma-paper);
  color: var(--ma-ink);
  box-shadow: 0 24px 90px #080c163b;
  font: 400 15px/1.65 Inter, Arial, sans-serif;
  text-align: left;
}
body.has-mobile-actions dialog.mobile-contact-sheet[open] { display: flex; flex-direction: column; }
.mobile-contact-sheet::backdrop { background: #101610a8; backdrop-filter: blur(5px); }
body.has-mobile-actions:has(dialog.mobile-contact-sheet[open]) { overflow: hidden; }
body.has-mobile-actions .mobile-sheet-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 26px 21px;
  border-bottom: 1px solid var(--ma-line);
  background: var(--ma-paper);
}
.mobile-sheet-header > div { min-width: 0; }
body.has-mobile-actions .mobile-sheet-kicker {
  display: block;
  margin: 0 0 8px;
  color: var(--ma-muted);
  font: 500 10px/1.6 Inter, Arial, sans-serif;
  letter-spacing: .035em;
  text-transform: none;
}
body.has-mobile-actions .mobile-sheet-header h2 {
  margin: 0;
  color: var(--ma-ink);
  font-family: var(--ma-heading);
  font-size: clamp(27px, 6.8vw, 36px);
  font-weight: var(--ma-heading-weight);
  line-height: 1.12;
  letter-spacing: var(--ma-heading-spacing);
  text-transform: none;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
body.has-mobile-actions .mobile-sheet-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 11px;
  border: 1px solid var(--ma-line);
  border-radius: 50%;
  background: var(--ma-card);
  color: var(--ma-ink);
  cursor: pointer;
  font: 500 19px/1 Inter, Arial, sans-serif;
}
.mobile-sheet-close svg { display: block; width: 20px; height: 20px; pointer-events: none; }
body.has-mobile-actions .mobile-sheet-close:hover { background: var(--ma-soft); }
body.has-mobile-actions .mobile-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px 26px 29px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding: 24px;
}
.mobile-sheet-body [hidden] { display: none !important; }
.mobile-sheet-body > section, .mobile-sheet-body form, .mobile-sheet-body fieldset { min-width: 0; }
body.has-mobile-actions .mobile-sheet-body :is(p, h3, dl, figure) { margin: 0; }
body.has-mobile-actions .mobile-sheet-body p + p { margin-top: 12px; }
body.has-mobile-actions .mobile-sheet-body h3 {
  color: var(--ma-ink);
  font: 500 19px/1.3 Inter, Arial, sans-serif;
  letter-spacing: -.025em;
  text-transform: none;
  margin: 0 0 12px;
}
body.has-mobile-actions .mobile-sheet-lead {
  font: 400 17px/1.6 Inter, Arial, sans-serif;
  letter-spacing: -.02em;
  color: var(--ma-ink);
  margin-bottom: 20px;
  overflow-wrap: anywhere;
}
body.has-mobile-actions .mobile-demo-note {
  display: block;
  padding: 13px 15px;
  border: 1px solid var(--ma-line);
  border-radius: max(8px, calc(var(--ma-radius) - 6px));
  background: var(--ma-soft);
  color: var(--ma-ink);
  font: 400 11px/1.7 Inter, Arial, sans-serif;
  letter-spacing: 0;
  margin: 0 0 19px;
}
body.has-mobile-actions .mobile-demo-note strong { font-weight: 650; }
body.has-mobile-actions .mobile-contact-card {
  padding: 20px;
  border: 1px solid var(--ma-line);
  border-radius: var(--ma-radius);
  background: var(--ma-card);
  color: var(--ma-ink);
  font: 400 13px/1.7 Inter, Arial, sans-serif;
  overflow-wrap: anywhere;
}
.mobile-contact-card + .mobile-contact-card { margin-top: 14px; }
.mobile-sheet-lead + .mobile-contact-card { margin-top: 20px; }
.mobile-contact-card + .mobile-demo-note { margin-top: 18px; }
.mobile-sheet-body .mobile-contact-card :is(p, small) { color: var(--ma-muted); }
.mobile-contact-card > svg { width: 29px; height: 29px; color: var(--ma-accent); margin-bottom: 14px; }
body.has-mobile-actions .mobile-sheet-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px 19px; margin-top: 22px; }
body.has-mobile-actions .mobile-sheet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  max-width: 100%;
  padding: 13px 19px;
  border: 1px solid var(--ma-accent);
  border-radius: var(--ma-button-radius);
  background: var(--ma-accent);
  color: var(--ma-accent-ink);
  cursor: pointer;
  font: 500 12px/1.6 Inter, Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
body.has-mobile-actions .mobile-sheet-button:hover { filter: brightness(.94); }
body.has-mobile-actions .mobile-sheet-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--ma-ink);
  cursor: pointer;
  font: 500 12px/1.6 Inter, Arial, sans-serif;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}
.mobile-sheet-actions svg, .mobile-sheet-button svg, .mobile-sheet-link svg { width: 17px; height: 17px; flex-shrink: 0; }
body.has-mobile-actions .mobile-details { padding: 0; }
body.has-mobile-actions .mobile-details > div { padding: 13px 0; border-bottom: 1px solid var(--ma-line); }
body.has-mobile-actions .mobile-details > div:first-child { padding-top: 0; }
body.has-mobile-actions .mobile-details > div:last-child { border-bottom: 0; padding-bottom: 0; }
body.has-mobile-actions .mobile-details dt { color: var(--ma-muted); font: 400 11px/1.6 Inter, Arial, sans-serif; margin: 0 0 4px; }
body.has-mobile-actions .mobile-details dd { color: var(--ma-ink); font: 500 14px/1.6 Inter, Arial, sans-serif; margin: 0; overflow-wrap: anywhere; }
body.has-mobile-actions .mobile-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
body.has-mobile-actions svg.mobile-area-map { display: block; width: 100%; height: auto; max-height: 250px; border: 1px solid var(--ma-line); border-radius: var(--ma-radius); background: var(--ma-soft); color: var(--ma-ink); margin-top: 18px; }
.mobile-area-map text { font-family: Inter, Arial, sans-serif; }
body.has-mobile-actions .mobile-map-caption { color: var(--ma-muted); font: 400 10px/1.7 Inter, Arial, sans-serif; margin: 10px 0 21px; }
body.has-mobile-actions .mobile-hours { padding: 0; margin: 20px 0 0; font: 400 12px/1.7 Inter, Arial, sans-serif; }
body.has-mobile-actions .mobile-hours > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 7px 20px; padding: 10px 0; border-bottom: 1px solid var(--ma-line); }
.mobile-hours > div:last-child { border-bottom: 0; }
body.has-mobile-actions .mobile-hours :is(dt, dd) { margin: 0; }
body.has-mobile-actions .mobile-hours dt { color: var(--ma-muted); }
body.has-mobile-actions .mobile-hours dd { color: var(--ma-ink); }
body.has-mobile-actions .mobile-message-form { margin-top: 21px; }
body.has-mobile-actions .mobile-message-form label { display: block; color: var(--ma-ink); font: 500 12px/1.6 Inter, Arial, sans-serif; margin: 17px 0 8px; }
body.has-mobile-actions .mobile-message-form :is(select, textarea, input:not([type="checkbox"]):not([type="radio"])) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ma-muted);
  border-radius: max(8px, calc(var(--ma-radius) - 9px));
  background: var(--ma-card);
  color: var(--ma-ink);
  font: 400 16px/1.6 Inter, Arial, sans-serif;
}
body.has-mobile-actions .mobile-message-form select { padding-right: 30px; }
body.has-mobile-actions .mobile-message-form textarea { min-height: 126px; max-height: 42dvh; resize: vertical; }
.mobile-message-form textarea::placeholder, .mobile-message-form input::placeholder { color: var(--ma-muted); opacity: 1; }
body.has-mobile-actions .mobile-message-form > .mobile-sheet-button { margin-top: 20px; }
body.has-mobile-actions .mobile-message-result:not([hidden]) { display: block; margin-top: 20px; padding: 18px; border: 1px solid var(--ma-line); border-radius: var(--ma-radius); background: var(--ma-soft); color: var(--ma-ink); font: 400 13px/1.75 Inter, Arial, sans-serif; overflow-wrap: anywhere; }
body.has-mobile-actions .mobile-sheet-footer {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 12px 26px 16px;
  border-top: 1px solid var(--ma-line);
  background: var(--ma-paper);
  color: var(--ma-ink);
}
body.has-mobile-actions .mobile-sheet-footer > .mobile-sheet-link {
  gap: 8px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 11px;
  text-decoration: none;
}
body.has-mobile-actions .mobile-sheet-footer > .mobile-sheet-link:hover { text-decoration: underline; }
body.has-mobile-actions .mobile-sheet-footer > p {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  color: var(--ma-muted);
  font: 400 11px/1.7 Inter, Arial, sans-serif;
  overflow-wrap: anywhere;
}
.mobile-sheet-footer > p:empty { display: none; }
body.has-mobile-actions .mobile-sheet-footer input[readonly] {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin-top: 7px;
  padding: 9px 12px;
  border: 1px solid var(--ma-muted);
  border-radius: 8px;
  background: var(--ma-card);
  color: var(--ma-ink);
  font: 400 16px/1.5 Inter, Arial, sans-serif;
}
body.has-mobile-actions .mobile-contact-sheet :is(button, a, select, input, textarea, [tabindex]):focus-visible { outline: 3px solid var(--ma-focus); outline-offset: 4px; }
body.has-mobile-actions .mobile-contact-sheet :is(button, a, select, input, textarea) { touch-action: manipulation; }

@media (max-width: 820px) {
  body.has-mobile-actions:not([data-brand="done48"]) {
    /* JS measures the dock so text zoom and wrapped labels retain clearance. */
    padding-bottom: calc(var(--mobile-dock-clearance, calc(80px + env(safe-area-inset-bottom, 0px))) + 16px);
  }
  body.has-mobile-actions .mobile-action-dock {
    position: fixed;
    z-index: 100;
    inset: auto 0 0;
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px max(8px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--ma-dock-line);
    background: var(--ma-dock);
    color: var(--ma-dock-ink);
    box-shadow: 0 -5px 24px #080c1610;
    font: 400 11px/1.3 Inter, Arial, sans-serif;
    transition: opacity .15s, visibility .15s;
  }
  body.has-mobile-actions .mobile-action-items {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: 3px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
  }
  body.has-mobile-actions .mobile-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 63px;
    margin: 0;
    padding: 8px 3px;
    border: 1px solid transparent;
    border-radius: min(13px, var(--ma-button-radius));
    background: transparent;
    color: var(--ma-dock-ink);
    cursor: pointer;
    font: 500 10px/1.3 Inter, Arial, sans-serif;
    letter-spacing: 0;
    text-decoration: none;
    text-align: center;
    text-transform: none;
    touch-action: manipulation;
  }
  .mobile-action > svg, .mobile-action > .site-icon { display: block; width: 22px; height: 22px; max-width: none; margin: 0; flex-shrink: 0; pointer-events: none; }
  .mobile-action > span { display: block; max-width: 100%; overflow-wrap: anywhere; }
  body.has-mobile-actions .mobile-action:hover { border-color: var(--ma-dock-line); }
  body.has-mobile-actions .mobile-action-primary {
    background: var(--ma-action-background, var(--ma-accent));
    color: var(--ma-action-ink, var(--ma-accent-ink));
    border-color: var(--ma-action-background, var(--ma-accent));
  }
  body.has-mobile-actions .mobile-action-primary:hover { filter: brightness(.94); border-color: currentColor; }
  body.has-mobile-actions .mobile-action:focus-visible { outline: 3px solid var(--ma-dock-focus); outline-offset: 1px; }
  body.has-mobile-actions.mobile-field-active .mobile-action-dock { opacity: 0; visibility: hidden; pointer-events: none; }
  body.has-mobile-actions dialog.mobile-contact-sheet {
    inset: auto 0 0;
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 18px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 18px);
    margin: 0;
    border: 0;
    border-top: 1px solid var(--ma-line);
    border-radius: 25px 25px 0 0;
  }
  body.has-mobile-actions .mobile-sheet-header {
    gap: 17px;
    padding: 23px max(22px, env(safe-area-inset-right, 0px)) 19px max(22px, env(safe-area-inset-left, 0px));
  }
  body.has-mobile-actions .mobile-sheet-body {
    padding: 22px max(22px, env(safe-area-inset-right, 0px)) 26px max(22px, env(safe-area-inset-left, 0px));
    scroll-padding-bottom: 24px;
  }
  body.has-mobile-actions .mobile-sheet-footer { padding: 11px max(22px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px)); }
  body.has-mobile-actions .mobile-contact-sheet .mobile-sheet-header h2 { font-size: clamp(27px, 7.5vw, 37px); }
}
@media (max-width: 360px) {
  body.has-mobile-actions .mobile-action-dock { padding-left: max(5px, env(safe-area-inset-left, 0px)); padding-right: max(5px, env(safe-area-inset-right, 0px)); }
  body.has-mobile-actions .mobile-action-items { gap: 1px; }
  body.has-mobile-actions .mobile-action { padding-inline: 2px; font-size: 9px; }
  body.has-mobile-actions .mobile-sheet-header { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); gap: 13px; }
  body.has-mobile-actions .mobile-sheet-body { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
  body.has-mobile-actions .mobile-sheet-footer { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); gap: 0 13px; }
  body.has-mobile-actions .mobile-contact-card { padding: 17px; }
  body.has-mobile-actions .mobile-sheet-lead { font-size: 16px; }
  body.has-mobile-actions .mobile-info-grid { grid-template-columns: 1fr; }
  body.has-mobile-actions .mobile-sheet-button { font-size: 11px; padding: 13px 17px; }
}
@media (max-height: 450px) and (max-width: 820px) {
  body.has-mobile-actions .mobile-action { min-height: 52px; gap: 3px; padding-top: 5px; padding-bottom: 5px; }
  body.has-mobile-actions .mobile-action > svg { width: 19px; height: 19px; }
  body.has-mobile-actions .mobile-sheet-header { padding-top: 14px; padding-bottom: 14px; }
  body.has-mobile-actions .mobile-contact-sheet .mobile-sheet-header h2 { font-size: 24px; }
  body.has-mobile-actions .mobile-sheet-kicker { margin-bottom: 5px; }
  body.has-mobile-actions .mobile-sheet-body { padding-top: 16px; padding-bottom: 18px; }
  body.has-mobile-actions .mobile-sheet-footer { padding-top: 6px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  body.has-mobile-actions dialog.mobile-contact-sheet { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-action-dock, .mobile-action-dock *, .mobile-contact-sheet, .mobile-contact-sheet * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .mobile-action-dock, dialog.mobile-contact-sheet { display: none !important; }
  body.has-mobile-actions { padding-bottom: 0 !important; }
}