/* Sundial site glue (after d12/styles.css and the header include; before components and the page-type CSS).
   d12 tokens only: no new colours, fonts or shadows. Blue only for actions. */

/* ---- header include: the wrapper takes no box, so the menu bar still sticks to the top */
.sbh { display: contents; }
html { scroll-padding-top: 88px; }
@media (max-width: 1023px) { html { scroll-padding-top: 80px; } }
html.is-signedin { scroll-padding-top: 136px; }
@media (max-width: 720px) { html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); } }

/* ---- client bar: sits under the menu bar and sticks with it (d12 styles it; these rules place it) */
.sb-cbar { position: sticky; top: 72px; z-index: 95; }
@media (max-width: 1023px) { .sb-cbar { top: 64px; } }
.cbar__link[aria-current="page"] { color: var(--on-d); }
.cbar__link[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 2px; border-radius: 2px; background: var(--on-d); }
@media (max-width: 720px) { .cbar__link[aria-current="page"]::after { left: 14px; right: 14px; bottom: 0; } }
.cbar__menu a[aria-current="page"] { font-weight: 600; }

/* ---- the phone Call/Book bar hides while the phone menu is open */
body.menu-open .mbar { visibility: hidden; }

/* ---- [owner to confirm: ...] marks (previews only; the live site may not have any) */
.sb-otc { padding: 0 .25em; border-radius: 4px; background: var(--sun-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 500; }

/* ---- footer */
.footer__regions a { color: inherit; text-decoration: none; }
.footer__regions a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.sb-footer__h2 { margin-top: 28px; }

/* ---- placeholder pages ("This page is being written") */
.sb-ph { padding-top: 48px; padding-bottom: 64px; }
.sb-ph__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.sb-ph__copy { display: grid; gap: 16px; justify-items: start; }
.sb-ph__note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
.sb-ph__media { margin: 0; border-radius: var(--r-l); overflow: hidden; background: var(--mist); }
.sb-ph__media img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .sb-ph__grid { grid-template-columns: 1fr; } .sb-ph__media { order: -1; } }

/* ---- product pages without specialty shapes: the rooms + fit pair starts the section */
.pt3-tail.sb-tail--solo { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- hubs: card grid, product-list filter, highlights */
/* the v3 card rules (.pt-rel*, from the product design) for every hub: rooms, solutions and inspiration load no product.css */
.pt-rel { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
.pt-rel > li { display: flex; }
.pt-rel[hidden], .pt-rel > li[hidden] { display: none; }
.pt-rel__card { display: flex; flex-direction: column; width: 100%; border-radius: var(--r); border: 1px solid var(--line); background: var(--white); overflow: hidden; color: inherit; text-decoration: none; }
a.pt-rel__card:hover { border-color: var(--line-strong); }
.pt-rel__media { position: relative; aspect-ratio: 4 / 3; background: var(--mist); overflow: hidden; }
.pt-rel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pt-rel__body { display: grid; gap: 6px; padding: 16px 18px 18px; align-content: start; flex: 1; grid-template-rows: auto 1fr auto; }
.pt-rel__h { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.pt-rel__h .i { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
.pt-rel__body p { font-size: 15px; color: var(--ink-2); line-height: 1.5; max-width: 31em; }
.pt-rel__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--iris-text, var(--iris-h)); }
.sb-cards.sb-cards--2 { --n: 2; max-width: 880px; }
@media (min-width: 1025px) { .sb-cards.sb-cards--4 { --n: 4; } }
@media (max-width: 720px) {
  .pt-rel { grid-template-columns: 1fr; gap: 8px; }
  .pt-rel__card { display: grid; grid-template-columns: 120px 1fr; align-items: stretch; min-height: 100px; border-radius: 14px; }
  .pt-rel__media { aspect-ratio: auto; height: 100%; min-height: 100px; }
  .pt-rel__body { padding: 12px 14px; gap: 2px; align-content: center; grid-template-rows: none; }
  .pt-rel__h { font-size: 16px; }
  .pt-rel__more { margin-top: 2px; }
}
@media (max-width: 380px) { .pt-rel__card { grid-template-columns: 96px 1fr; } }
.sb-cards { margin-top: 8px; }
.sb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.sb-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-filter__chips .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.sb-filter__sel { display: none; gap: 6px; width: 100%; }
.sb-filter__sel span { font-size: 15px; font-weight: 600; }
@media (max-width: 720px) { .sb-filter__chips { display: none; } .sb-filter__sel { display: grid; } }
.sb-grid-note { margin-top: 20px; }
.sb-hls { display: grid; gap: 24px; }
.sb-hl .h3 { margin-top: 6px; }

/* ---- info: legal/about sections use the stepper's tabs, text only */
.sb-sections .sb-sec-panel { grid-template-columns: minmax(0, 1fr); }
.sb-sections .pt-st__body { max-width: 44em; }
.sb-sections .pt-st__p, .sb-sections .sb-list { max-width: 34em; }
/* a linked question (faq.html#tilt-turn) opens and clears the sticky header */
details[id], [id^="faq-"] { scroll-margin-top: 104px; }
html.is-signedin details[id] { scroll-margin-top: 152px; }
details.sb-hit > summary { background: var(--sun-soft); border-radius: 8px; }
/* FAQ page: one section, topic chips (a drop-down on phones), compact topic headings */
.sb-faqall .sec__head { margin-bottom: 20px; }
.sb-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.sb-topics a.chip { text-decoration: none; }
.sb-topics__sel { display: none; gap: 6px; max-width: 420px; margin: 0 0 24px; }
.sb-topics__sel span { font-size: 15px; font-weight: 600; }
.sb-faqgroup + .sb-faqgroup { margin-top: 40px; }
.sb-faqgroup__h { margin-bottom: 12px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; scroll-margin-top: 104px; }
@media (max-width: 720px) { .sb-topics { display: none; } .sb-topics__sel { display: grid; } .sb-faqgroup + .sb-faqgroup { margin-top: 32px; } }
/* reviews page: the honest empty state as a card on a white band */
.t-info .pt-reviews { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; align-items: center; max-width: 720px;
  padding: 22px 24px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--white); }
.t-info .pt-reviews__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--deco-soft); color: var(--deco); }
.t-info .pt-reviews__txt { display: grid; gap: 4px; }
.t-info .pt-reviews__h { font-size: 19px; letter-spacing: -0.015em; line-height: 1.3; }
.t-info .pt-reviews p { font-size: 16px; color: var(--ink-2); line-height: 1.5; max-width: 34em; }
@media (max-width: 560px) { .t-info .pt-reviews { grid-template-columns: 1fr; gap: 12px; padding: 18px; } }
/* imported Home and Book: long grey notes keep a reading width */
.t-home main .note, .t-book main .note, .t-home main .cta__meta, .t-book main .muted { max-width: 34em; }
.sb-list { display: grid; gap: 8px; margin: 4px 0 8px; padding-left: 20px; list-style: disc; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.sb-list--links { padding-left: 0; list-style: none; }
.sb-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .sb-contact { grid-template-columns: 1fr; } }
.sb-form { display: grid; justify-items: start; }
.sb-form__card { display: grid; gap: 16px; width: min(100%, 460px); padding: 24px; border-radius: var(--r-l); background: var(--white); border: 1px solid var(--line); }
.sb-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.sb-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; }

/* ---- account tiles (sizes for the pages that are not My estimates) */
.pt-bento .sb-t--wide { grid-column: span 8; }
.pt-bento .sb-t--half { grid-column: span 6; }
.pt-bento .sb-t--third { grid-column: span 4; }
.pt-bento .sb-t--full, .pt-bento .sb-t--row { grid-column: 1 / -1; }
/* round 1 check: a tall tile takes two rows and the thirds beside it fill in (no card stretched with an empty inside) */
@media (min-width: 1024px) {
  .pt-bento:has(.sb-t--tall) { grid-auto-flow: row dense; }
  .pt-bento .sb-t--tall { grid-row: span 2; }
  .pt-bento .sb-t--row .callbox { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto auto; column-gap: 40px; row-gap: 2px; align-items: center; padding: 22px 28px; }
  .pt-bento .sb-t--row .callbox > h3 { grid-column: 1; grid-row: 1; }
  .pt-bento .sb-t--row .callbox__sub { grid-column: 1; grid-row: 2; margin-top: 0; }
  .pt-bento .sb-t--row .callbox__help { grid-column: 1; grid-row: 3; margin-top: 4px; }
  .pt-bento .sb-t--row .callbox__big { grid-column: 2; grid-row: 1 / span 3; }
  .pt-bento .sb-t--row .callbox__hours { grid-column: 3; grid-row: 1 / span 3; }
}
@media (max-width: 1023px) {   /* matches the v3 grid in account.css (12 columns down to 1024px, then 2) */
  .pt-bento .sb-t--wide, .pt-bento .sb-t--full { grid-column: 1 / -1; }
  .pt-bento .sb-t--half, .pt-bento .sb-t--third, .pt-bento .sb-t--row { grid-column: span 1; }
}
/* the install-time picker: the picked day and time are marked; even rows on phones */
[data-sb-chips] .chip[aria-pressed="true"] { background: var(--iris-soft); border-color: var(--iris); color: var(--iris-text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--iris); }
.sb-chips__l { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--ink); }
@media (max-width: 600px) { [data-sb-chips] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } [data-sb-chips] .chip { justify-content: center; width: 100%; } }
.sb-demo-msg--warn { color: var(--ink); font-weight: 600; }
/* settings: the form as a v3 tile, two columns on computers */
.sb-setform { display: grid; gap: 16px; }
.sb-setform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.sb-setform__grid .field--full { grid-column: 1 / -1; }
@media (max-width: 720px) { .sb-setform__grid { grid-template-columns: 1fr; } }
.sb-compose { display: grid; gap: 12px; }
.sb-compose textarea { min-height: 120px; resize: vertical; }
/* the client bar's "What's next" label: readable size, sentence case */
.cbar__next-k { font-family: var(--font) !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; }
@media (max-width: 720px) { .cbar__next-k { font-size: 12px !important; } }
@media (max-width: 720px) { .pt-bento .sb-t { grid-column: auto; } }
.sb-dl { display: grid; gap: 10px; margin: 0; }
.sb-dl div { display: grid; gap: 2px; }
.sb-dl dt { font-size: 14px; color: var(--ink-3); }
.sb-dl dd { margin: 0; font-size: 16px; font-weight: 600; }
.sb-saved { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sb-saved__a { display: flex; gap: 12px; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.sb-saved__a strong { display: block; font-size: 16px; }
.sb-saved__a span span { display: block; font-size: 14px; color: var(--ink-3); }

/* ---- area hub map */
.sb-regionmap { max-width: 420px; }

/* ---- the local band: region names are links */
.local p a.sb-local__a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---- samples: the See-all link on its own line */
.sb-seeall { margin: 0; }