/* Tenderlots layout, loaded after the prototype's app.css (which stays as
   delivered). The prototype lays every page out for its sidebar shell: a
   full-width header and content pinned to the left. Pages without the sidebar
   (the public site, sign-in, onboarding) are centred here instead, with the
   header lined up to the same column, so wide screens are not lopsided. */

:root {
  --tb-public-max: 1320px;
  /* Side margin that grows with the screen (16px on a phone, 96px on a wide
     one) instead of jumping from a fixed gutter to a wide empty band. */
  --tb-side: clamp(16px, 6vw, 96px);
}

/* Pages without the sidebar: one centred column, header aligned to it. */
.shell.bare .main,
body:has(.shell.bare) .hdr-in {
  max-width: calc(var(--tb-public-max) + 2 * var(--tb-side));
  margin-inline: auto;
  padding-inline: max(var(--tb-side), env(safe-area-inset-left, 0px)) max(var(--tb-side), env(safe-area-inset-right, 0px));
}

/* The prototype's design controls (sample-data toggles, "Reset prototype")
   and its "Prototype: …" shortcuts are for the design team, not customers. */
.proto, .proto-note { display: none !important; }

/* Inside the app, the content column sits centred in the space beside the
   sidebar once the screen is wider than the column. */
@media (min-width: 1700px) {
  .shell:not(.bare) .main { margin-inline: auto; }
}

/* Public home: balance the hero and keep long lines readable. */
.hero { gap: clamp(var(--tb-space-6), 5vw, var(--tb-space-9)); }
.hero .sample { width: 100%; max-width: 560px; justify-self: end; }
.mk-sec > .h3 { max-width: 40ch; }
.feats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1055px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Tablets: the three steps and the feature grid wrap before they cramp. */
@media (max-width: 860px) {
  .hero .sample { justify-self: stretch; max-width: none; }
  .how { grid-template-columns: minmax(0, 1fr); }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
  .cta-band .btn { justify-self: start; }
}

/* Phones: full-width actions, nothing wider than the screen. */
@media (max-width: 671px) {
  .hero { padding-block: var(--tb-space-6); }
  .hero-copy .row { flex-wrap: wrap; }
  .cta-band { padding: var(--tb-space-5); }
  .cta-band .btn { justify-self: stretch; text-align: center; }
  .feats { grid-template-columns: minmax(0, 1fr); }
  .main { overflow-wrap: break-word; }
}

/* Server-rendered pages without the app shell (the superadmin page). */
body > .main { margin-inline: auto; }
body:not(:has(.shell)) .hdr-in { max-width: var(--tb-page-max); margin-inline: auto; }