:root { --business-home-max: 880px; }

html { min-height: 100%; scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { min-height: 100vh; min-height: 100svh; padding-bottom: 82px; overflow-x: hidden; }
button { color: inherit; }

.business-home-hero { min-height: 245px; padding: calc(18px + env(safe-area-inset-top)) 22px 42px; }
.business-home-hero::before { bottom: -30px; height: 35px; }
.business-home-hero .dusk-disc { right: max(34px, calc((100vw - var(--business-home-max)) / 2 + 34px)); top: 72px; width: 52px; height: 52px; box-shadow: 0 0 34px rgba(242,181,126,.72); }
.business-home-hero-inner { position: relative; z-index: 4; width: 100%; max-width: var(--business-home-max); margin: 0 auto; }
.business-home-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.business-home-wordmark { color: var(--sky-ink); font: 600 18px/1 'Source Serif 4',serif; letter-spacing: .115em; text-transform: uppercase; white-space: nowrap; }
.business-home-topline p { margin-top: 8px; color: rgba(248,238,231,.9); font-size: 11px; }
.business-home-actions { display: flex; align-items: center; gap: 9px; }
.business-home-icon,.business-home-avatar { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; color: var(--sky-ink); background: rgba(255,255,255,.08); }
.business-home-icon:disabled { opacity: .55; cursor: not-allowed; }
.business-home-icon .material-symbols-rounded { font-size: 19px; }
.business-home-avatar { overflow: hidden; padding: 2px; border-color: rgba(255,255,255,.62); background: #fff8f0; box-shadow: 0 0 0 2px rgba(231,161,120,.28); }
.business-home-avatar img { width: 100%; height: 100%; object-fit: contain; }
.business-home-avatar .business-admin-initials { color: #70549a; font: 600 12px/1 'Source Serif 4',serif; }
.business-home-copy { margin-top: 25px; padding-right: 70px; }
.business-home-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,241,231,.94); background: rgba(255,255,255,.1); font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.business-home-badge .material-symbols-rounded { font-size: 13px; }
.business-home-badge .filled { font-variation-settings: 'FILL' 1,'wght' 430; }
.business-home-copy h1 { margin-top: 13px; color: var(--sky-ink); font: 600 38px/1 'Source Serif 4',serif; letter-spacing: -.025em; }
.business-home-copy > p { margin-top: 8px; color: rgba(248,238,231,.92); font-size: 12px; }
.business-home-privacy { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: rgba(248,238,231,.82); font-size: 9.5px; }
.business-home-privacy .material-symbols-rounded { font-size: 14px; }

.business-home-main { position: relative; z-index: 5; width: 100%; max-width: var(--business-home-max); margin: 0 auto; padding: 0 18px 38px; }
.business-home-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.business-home-card { border: 1px solid var(--dusk-line); border-radius: 19px; background: var(--dusk-card-2); box-shadow: 0 14px 34px -28px rgba(58,45,39,.5); }
.business-eyebrow { color: #a08070; font-size: 8.5px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.business-home-card h2 { font: 600 18px/1.08 'Source Serif 4',serif; }

.business-overview { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 128px; gap: 12px 24px; padding: 20px 22px 17px; overflow: hidden; }
.business-overview-copy { position: relative; z-index: 2; }
.business-overview-copy h2 { margin-top: 7px; font-size: 28px; }
.business-overview-copy > p:not(.business-eyebrow) { max-width: 510px; margin-top: 8px; color: var(--dusk-copy); font-size: 10.5px; line-height: 1.45; }
.business-overview-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.business-overview-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; color: #6d5a50; background: #f4ece5; font-size: 8px; font-weight: 700; text-transform: capitalize; }
.business-overview-tags i { width: 6px; height: 6px; border-radius: 50%; background: #65a06b; }
.business-overview-art { position: relative; width: 118px; height: 118px; align-self: center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 55% 40%,rgba(247,211,166,.35),rgba(247,238,228,.92) 52%,rgba(236,226,241,.88)); }
.business-overview-art > span { position: absolute; z-index: 2; left: 45px; top: 29px; width: 35px; height: 35px; border-radius: 50%; background: radial-gradient(circle at 38% 35%,#fff1d7,#f2b96f 76%); box-shadow: 0 0 22px rgba(235,177,107,.42); }
.business-overview-art i { position: absolute; left: -10px; bottom: -27px; width: 145px; height: 76px; display: block; border-radius: 50% 50% 0 0; }
/* With a mark in it, the circle is a plate rather than a picture. */
.business-overview-art.has-logo { display: grid; place-items: center; padding: 16px; }
.business-overview-art.has-logo img { width: 100%; height: 100%; object-fit: contain; }
.business-hill-one { z-index: 2; background: rgba(150,122,176,.29); transform: rotate(-7deg); }
.business-hill-two { z-index: 3; left: 25px!important; bottom: -39px!important; background: rgba(121,94,159,.22); transform: rotate(8deg); }
.business-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; padding-top: 14px; border-top: 1px solid var(--dusk-line); }
.business-metrics article { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 0 8px; padding: 8px 10px; border: 1px solid var(--dusk-line); border-radius: 12px; }
.business-metric-icon { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.business-metric-icon .material-symbols-rounded { font-size: 18px; }
.business-metric-icon.purple { color: #6c57a0; background: rgba(123,104,170,.13); }
.business-metric-icon.green { color: #558157; background: rgba(91,141,84,.13); }
.business-metric-icon.amber { color: #d97920; background: rgba(232,142,50,.13); }
.business-metric-icon.coral { color: #b85b45; background: rgba(201,103,78,.12); }
.business-metrics strong { color: var(--dusk-ink); font: 600 19px/1 'Source Serif 4',serif; }
.business-metrics small { margin-top: 2px; color: var(--dusk-muted); font-size: 7.5px; white-space: nowrap; }

.business-home-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 11px; margin-top: 11px; }
.business-attention,.business-capacity,.business-setup,.business-quick-actions { padding: 16px; }
.business-attention header,.business-capacity header,.business-setup header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.business-attention header h2,.business-capacity header h2,.business-setup header h2 { margin-top: 4px; }
.business-count-badge { min-width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #956026; background: #fbefd9; font-size: 10px; font-weight: 800; }
.business-attention-list { display: grid; gap: 7px; margin-top: 12px; }
.business-attention-row { min-height: 51px; display: grid; grid-template-columns: 35px minmax(0,1fr) auto 15px; align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid var(--dusk-line); border-radius: 12px; color: inherit; text-decoration: none; }
.business-attention-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #6b5799; background: rgba(123,104,170,.13); }
.business-attention-icon.warning { color: #b85b45; background: rgba(201,103,78,.12); }
.business-attention-icon .material-symbols-rounded { font-size: 18px; }
.business-attention-row > span:nth-child(2) { min-width: 0; }
.business-attention-row strong,.business-attention-row small { display: block; }
.business-attention-row strong { color: var(--dusk-ink); font-size: 9.5px; }
.business-attention-row small { margin-top: 3px; color: var(--dusk-muted); font-size: 8px; line-height: 1.3; }
.business-attention-row b { color: #745b9f; font: 600 20px/1 'Source Serif 4',serif; }
.business-attention-row > .material-symbols-rounded { color: #a08a7f; font-size: 15px; }
.business-attention-clear { padding: 18px; border: 1px dashed #d9cdbf; border-radius: 12px; color: var(--dusk-muted); text-align: center; font-size: 9px; }

.business-capacity header > .material-symbols-rounded { color: #66845d; font-size: 23px; }
.business-capacity-number { display: flex; align-items: baseline; gap: 7px; margin-top: 17px; }
.business-capacity-number strong { color: #5c8158; font: 600 38px/1 'Source Serif 4',serif; }
.business-capacity-number span { color: var(--dusk-muted); font-size: 9px; }
.business-capacity-track { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: #eee4dc; }
.business-capacity-track span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#9a82b4,#76599f); transition: width .45s ease; }
.business-capacity dl { display: grid; gap: 7px; margin-top: 14px; }
.business-capacity dl > div { display: flex; justify-content: space-between; gap: 12px; padding-top: 7px; border-top: 1px solid var(--dusk-line); font-size: 8.5px; }
.business-capacity dt { color: var(--dusk-muted); }
.business-capacity dd { color: var(--dusk-ink); font-weight: 750; }

.business-setup { margin-top: 11px; }
.business-setup header > span { color: #725b9a; font-size: 9px; font-weight: 750; }
.business-setup-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.business-setup-item { min-height: 62px; display: grid; grid-template-columns: 29px minmax(0,1fr); align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--dusk-line); border-radius: 12px; }
.business-setup-item > .material-symbols-rounded { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #9a6d45; background: #faeedf; font-size: 16px; }
.business-setup-item.complete > .material-symbols-rounded { color: #548159; background: #edf5ec; }
.business-setup-item strong,.business-setup-item small { display: block; }
.business-setup-item strong { color: var(--dusk-ink); font-size: 8.5px; }
.business-setup-item small { margin-top: 3px; color: var(--dusk-muted); font-size: 7.5px; }
.business-card-link { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--dusk-line); color: #725b9a; font-size: 8.5px; font-weight: 700; text-decoration: none; }
.business-card-link .material-symbols-rounded { font-size: 16px; }

.business-quick-actions { margin-top: 11px; }
.business-quick-actions > h2 { margin-bottom: 11px; }
.business-quick-actions > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.business-quick-actions a { min-width: 0; display: grid; grid-template-columns: 35px minmax(0,1fr) 15px; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--dusk-line); border-radius: 12px; color: inherit; text-decoration: none; }
.business-quick-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; }
.business-quick-icon .material-symbols-rounded { font-size: 18px; }
.business-quick-icon.purple { color: #6b5799; background: rgba(123,104,170,.13); }
.business-quick-icon.green { color: #558157; background: rgba(91,141,84,.13); }
.business-quick-icon.coral { color: #b85b45; background: rgba(201,103,78,.12); }
.business-quick-actions a > span:nth-child(2) { min-width: 0; }
.business-quick-actions strong,.business-quick-actions small { display: block; }
.business-quick-actions strong { color: var(--dusk-ink); font-size: 8.5px; }
.business-quick-actions small { margin-top: 3px; color: var(--dusk-muted); font-size: 7.4px; line-height: 1.25; }
.business-quick-actions a > .material-symbols-rounded { color: #a08a7f; font-size: 15px; }

.business-home-boundary { display: flex; align-items: flex-start; gap: 10px; margin-top: 11px; padding: 13px 15px; border: 1px solid #ded1e7; border-radius: 15px; color: #644f70; background: #f6f1f8; }
.business-home-boundary > .material-symbols-rounded { color: #795d9f; font-size: 20px; }
.business-home-boundary strong,.business-home-boundary span { display: block; }
.business-home-boundary strong { font-size: 8.5px; }
.business-home-boundary span { margin-top: 3px; color: #806f87; font-size: 7.8px; line-height: 1.35; }

.business-home-dock { position: fixed; z-index: 70; left: 50%; bottom: calc(9px + env(safe-area-inset-bottom) + var(--ed-preview-banner-h, 0px)); width: calc(100% - 22px); max-width: 618px; min-height: 49px; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 5px; border: 1px solid var(--dusk-line); border-radius: 999px; background: rgba(255,252,248,.96); box-shadow: 0 13px 34px -18px rgba(58,45,39,.45); transform: translateX(-50%); backdrop-filter: blur(12px); }
.business-home-dock a,.business-home-dock > span { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border-radius: 999px; color: #9a7f70; font-size: 10px; font-weight: 700; text-decoration: none; }
.business-home-dock > span { opacity: .5; cursor: not-allowed; }
.business-home-dock .material-symbols-rounded { font-size: 17px; }
.business-home-dock .active { color: var(--dusk-pill-text); background: var(--dusk-pill); }
.business-home-dock .active .material-symbols-rounded { color: var(--dusk-pill-icon); font-variation-settings: 'FILL' 1,'wght' 450; }

html.dark .business-home-card,html.dark .business-home-dock { background: rgba(33,30,44,.96); }
html.dark .business-overview-tags span,html.dark .business-capacity-track { background: #332d3b; }
html.dark .business-home-boundary { color: #d8cce0; border-color: #41384d; background: #2b2534; }
html.dark .business-home-boundary span { color: #b7aabd; }

/* ── Desktop: one screen, no scrolling ──────────────────────────
   The shell is built phone-first, so on a laptop it was an 880px
   column with five stacked cards running 330px past the fold. From
   1080px up it widens and splits: the account narrative down the
   left, the two counting cards down the right. An administrator
   opening this should see the whole account without scrolling.

   Every card is placed explicitly. Auto-placement walks the DOM in
   order and will not backfill a column it has already passed, which
   drops cards into rows of their own. */
@media (min-width: 1080px) {
  :root { --business-home-max: 1160px; }

  /* Trimmed to absorb the preview back link, which adds a row under
     the wordmark. This screen is meant to open without scrolling. */
  .business-home-hero { min-height: 0; padding-bottom: 5px; }
  .business-home-copy { margin-top: 2px; }
  .business-home-copy h1 { font-size: 26px; }
  .business-home-copy > p { margin-top: 4px; }

  .business-home-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .56fr);
    gap: 8px;
    align-items: start;
    padding-bottom: 6px;
  }
  /* The inner wrapper has to stop being a box of its own so its two
     cards can be placed in the same grid as everything else. */
  .business-home-grid { display: contents; }

  .business-home-status  { grid-area: 1 / 1 / 2 / -1; }
  .business-overview     { grid-area: 2 / 1 / 3 / 2; }
  .business-capacity     { grid-area: 2 / 2 / 3 / 3; }
  .business-setup        { grid-area: 3 / 1 / 4 / 2; }
  .business-attention    { grid-area: 3 / 2 / 4 / 3; }
  .business-quick-actions{ grid-area: 4 / 1 / 5 / -1; }
  .business-home-boundary{ grid-area: 5 / 1 / 6 / -1; padding-block: 9px; }
  .business-home-grid > *, .business-home-card, .business-home-boundary { margin-top: 0; }
}

@media (max-width: 700px) {
  :root { --business-home-max: 640px; }
  .business-home-hero { min-height: 224px; padding-inline: 16px; }
  .business-home-copy { margin-top: 18px; }
  .business-home-copy h1 { font-size: 32px; }
  .business-home-main { padding-inline: 12px; }
  .business-overview { grid-template-columns: minmax(0,1fr) 92px; padding: 16px; }
  .business-overview-art { width: 88px; height: 88px; }
  .business-overview-art > span { left: 33px; top: 23px; width: 28px; height: 28px; }
  .business-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .business-home-grid { grid-template-columns: 1fr; }
  .business-setup-list,.business-quick-actions > div { grid-template-columns: 1fr; }
}

@media (max-width: 410px) {
  .business-home-wordmark { font-size: 15px; }
  .business-home-topline p { max-width: 190px; font-size: 9px; }
  .business-home-icon,.business-home-avatar { width: 34px; height: 34px; }
  .business-home-copy { padding-right: 10px; }
  .business-home-copy h1 { font-size: 29px; }
  .business-overview { grid-template-columns: 1fr; }
  .business-overview-art { display: none; }
  .business-metrics article { grid-template-columns: 29px minmax(0,1fr); padding-inline: 7px; }
  .business-metric-icon { width: 28px; height: 28px; }
  .business-home-dock a,.business-home-dock > span { gap: 4px; padding-inline: 5px; font-size: 9px; }
}

/* Keep the business workspace at the same readable desktop scale as Clinic. */
@media (min-width: 701px) {
  :root { --business-home-max: min(1540px, calc(100vw - 48px)); }
  .business-home-hero-inner { padding-inline: 20px; }
  .business-home-main { padding-inline: 20px; }
  .business-home-topline p, .business-home-copy > p { font-size: 14px; }
  .business-home-privacy { font-size: 12px; }
  .business-home-badge { font-size: 10px; }
  .business-home-card h2 { font-size: 21px; }
  .business-eyebrow { font-size: 11px; }
  .business-overview-copy h2 { font-size: 28px; }
  .business-overview-copy > p:not(.business-eyebrow) { max-width: 680px; font-size: 14px; }
  .business-overview-tags span { font-size: 11px; }
  .business-metrics article { min-height: 70px; }
  .business-metrics strong { font-size: 22px; }
  .business-metrics small { font-size: 11px; white-space: normal; }
  .business-attention-row { min-height: 64px; }
  .business-attention-row strong, .business-setup-item strong,
  .business-quick-actions strong { font-size: 13px; }
  .business-attention-row small, .business-setup-item small,
  .business-quick-actions small { font-size: 11px; }
  .business-attention-clear, .business-capacity-number span,
  .business-capacity dl > div, .business-setup header > span,
  .business-card-link { font-size: 12px; }
  .business-home-boundary strong { font-size: 13px; }
  .business-home-boundary span { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .business-capacity-track span { transition: none; }
}