/* /for-nurseries/demo (internal/demo, content_demo.html): the form, the picker and the demo screen. */

/* ---- form and picker ---- */
.dm-page { display: grid; gap: var(--sp-10); padding-block: var(--sp-10) var(--sp-16); }
@media (min-width: 960px) { .dm-page:not(.dm-narrow) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: var(--sp-16); padding-block: var(--sp-16) var(--sp-24); } }
.dm-narrow { max-width: calc(44rem + 2 * var(--gutter)); }
.dm-kicker { display: inline-flex; align-items: center; gap: var(--sp-1_5); margin: 0 0 var(--sp-4); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); background: var(--brand-soft); color: var(--primary); font-size: var(--text-sm); font-weight: 600; }
.dm-page h1 { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--leading-4xl); font-weight: 600; text-wrap: balance; }
.dm-lead { margin: 0 0 var(--sp-6); max-width: var(--measure); font-size: var(--text-lg); line-height: var(--leading-lg); color: var(--muted-foreground); }
.dm-steps { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.dm-steps li { display: flex; gap: var(--sp-3); align-items: flex-start; line-height: var(--leading-base); }
.dm-step-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--foreground); color: var(--background); font-size: var(--text-sm); font-weight: 600; }
.dm-form { display: grid; gap: var(--sp-5); padding: var(--sp-6); box-shadow: var(--shadow-md); }
@media (min-width: 640px) { .dm-form { padding: var(--sp-8); } }
.dm-form-h { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: 600; }
.dm-form .alert { margin: 0; }
.dm-row { display: grid; gap: var(--sp-5); }
@media (min-width: 480px) { .dm-row { grid-template-columns: 1fr 1fr; } }
.dm-form input { width: 100%; }
.dm-err { margin: 0; font-size: var(--text-sm); color: var(--bad-ink); }
.dm-form [aria-invalid="true"] { border-color: var(--bad-solid); }
.dm-submit { width: 100%; }
.dm-consent { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted-foreground); }
.dm-search { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-6); }
.dm-search input { flex: 1; min-width: 0; }
.dm-list { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.dm-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 64px; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); color: var(--foreground); text-decoration: none; }
a.dm-item:hover { border-color: var(--input); box-shadow: var(--shadow-xs); }
.dm-item-t { display: grid; gap: var(--sp-0_5); min-width: 0; }
.dm-item-t span { font-size: var(--text-sm); color: var(--muted-foreground); }
.dm-item-off { background: var(--muted); }

/* ---- the demo screen ---- */
.dm-banner { border-bottom: 1px solid var(--border); background: var(--card); }
.dm-banner-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); flex-wrap: wrap; padding-block: var(--sp-3); }
.dm-banner-t { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.dm-banner-t strong { color: var(--foreground); font-weight: 600; }
.dm-live { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--ok-solid); box-shadow: 0 0 0 4px var(--ok-soft); }
.dm-get { flex: none; }
.dm-stage { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-16); }
.dm-browser { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--card); box-shadow: var(--shadow-lg); }
.dm-bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: var(--sp-3); height: 46px; padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); background: var(--muted); }
.dm-dots { display: flex; gap: 7px; }
.dm-dots i { width: 11px; height: 11px; border-radius: var(--radius-full); background: var(--coral); }
.dm-dots i:nth-child(2) { background: var(--sun); }
.dm-dots i:nth-child(3) { background: var(--mint-deep); }
.dm-addr { justify-self: center; display: flex; align-items: center; gap: var(--sp-2); max-width: 100%; width: min(440px, 100%); min-height: 28px; padding: 0 var(--sp-3);
  border-radius: var(--radius-full); background: var(--card); border: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted-foreground); white-space: nowrap; overflow: hidden; }
.dm-addr .i { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.dm-tag { margin-left: auto; padding: 0 var(--sp-2); border-radius: var(--radius-full); background: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.dm-view { position: relative; height: clamp(560px, 74vh, 820px); }
.dm-site { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.dm-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--card); }
.dm-widget { position: absolute; right: var(--sp-5); bottom: var(--sp-5); width: 384px; height: min(640px, calc(100% - 2 * var(--sp-5)));
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--card); box-shadow: var(--shadow-lg); }
.dm-chat { display: block; width: 100%; height: 100%; border: 0; }
.dm-try { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.dm-try-h { margin: 0 var(--sp-1) 0 0; font-size: var(--text-sm); font-weight: 600; }
.dm-chip { min-height: var(--h-control-sm); padding: 0 var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card);
  color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.dm-chip:hover { border-color: var(--input); background: var(--muted); }
.dm-chip:disabled, .dm-sample .btn:disabled { opacity: .55; cursor: default; }
.dm-chip:focus-visible, .dm-get:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.dm-more { display: grid; gap: var(--sp-4); max-width: var(--measure); margin-top: var(--sp-10); line-height: var(--leading-base); color: var(--muted-foreground); }
.dm-more p { margin: 0; }
.dm-more strong { color: var(--foreground); }

/* the sample page: a small nursery website from the listing */
.dm-sample { min-height: 100%; padding: 0 var(--sp-6) var(--sp-8); background: var(--background); }
@media (min-width: 1024px) { .dm-sample { padding-right: calc(384px + 2 * var(--sp-6)); } }
.dm-s-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 64px; border-bottom: 1px solid var(--border); }
.dm-s-logo { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.dm-s-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-lg); background: var(--sun-soft); color: var(--sun-deep); font-family: var(--font-sans); font-size: var(--text-sm); }
.dm-s-links { display: none; gap: var(--sp-5); font-size: var(--text-sm); color: var(--muted-foreground); }
@media (min-width: 720px) { .dm-s-links { display: flex; } }
.dm-s-hero { display: grid; gap: var(--sp-6); align-items: center; padding-block: var(--sp-10); }
@media (min-width: 720px) { .dm-s-hero-photo { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); } }
.dm-s-kick { margin: 0 0 var(--sp-2); font-size: var(--text-sm); font-weight: 600; color: var(--primary); }
.dm-s-h { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-3xl); font-weight: 600; text-wrap: balance; }
.dm-s-lead { margin: 0 0 var(--sp-5); max-width: 34rem; line-height: var(--leading-base); color: var(--muted-foreground); }
.dm-s-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
.dm-s-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-2xl); }
.dm-s-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.dm-s-fact { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); }
.dm-s-fact p { margin: 0; line-height: var(--leading-sm); }
.dm-s-l { margin-bottom: var(--sp-1) !important; font-size: var(--text-xs); font-weight: 600; color: var(--muted-foreground); }
.dm-s-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-6); }
.dm-s-photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.dm-s-foot { margin: var(--sp-8) 0 var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted-foreground); }
.dm-s-note { margin: 0; font-size: var(--text-xs); color: var(--subtle-foreground); }

/* phones and small tablets: the frame goes full width; the chat sits under the site, never over the banner */
@media (max-width: 760px) {
  .dm-banner-in { flex-direction: column; align-items: stretch; }
  .dm-get { width: 100%; }
  .dm-stage { padding: var(--sp-4) 0 var(--sp-12); }
  .dm-browser { border-radius: 0; border-inline: 0; box-shadow: none; }
  .dm-bar { grid-template-columns: auto minmax(0, 1fr); }
  .dm-bar::after { content: none; }
  .dm-view { height: auto; display: flex; flex-direction: column; }
  .dm-site { position: relative; inset: auto; height: 52vh; min-height: 300px; }
  .dm-widget { position: relative; right: auto; bottom: auto; width: auto; height: 560px; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
  .dm-try, .dm-more { padding-inline: var(--gutter); }
  .dm-sample { padding-inline: var(--sp-4); }
}
@media (prefers-reduced-motion: no-preference) {
  .dm-live { animation: dm-pulse 2.4s var(--ease-out) infinite; }
  @keyframes dm-pulse { 50% { box-shadow: 0 0 0 7px var(--ok-soft); } }
}