/* The intake with Buddy's proposals and the growing site (editor/intake.js, editor/live.js). Only classes under .live,
   .intake-*, .palette-choice, .swatch-* and .font-* live here; the house style's tokens and the layout are editor.css (mybitbuddy-83).
   Mobile first: one column with the tabs "Gesprek" and "Je site"; from 1000 pixels the two side by side. Every target
   at least 44 pixels high. */

/* The intake with the site beside it. */
.intake-split { display: grid; gap: 16px; min-width: 0; }
.intake-split > * { min-width: 0; }
.intake-tabs { display: flex; gap: 8px; position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 4px 0; }
.intake-tabs button { flex: 1; min-height: 44px; border-radius: var(--radius-small); border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.intake-tabs button[aria-pressed='true'] { background: var(--orange); border-color: var(--orange); color: var(--on-orange); font-weight: 600; }
.intake-split[data-pane='gesprek'] > .live-pane { display: none; }
.intake-split[data-pane='site'] > .intake-pane { display: none; }
/* Before the build, Buddy's proposal beside the conversation (the overseer's walkthrough of 7 November 2026, finding
   13); on a phone under it, and its waiting place only on a laptop. */
.proposal-pane > .intake-choices:first-child { margin-top: 0; }
.proposal-waiting { display: none; }
.proposal-waiting h2 { margin-top: 0; }
.proposal-waiting .skeleton-block { margin-top: 12px; }
/* "Buddy werkt" only while he works, or when a step failed (finding 14): resting or done, it says nothing new. */
.intake-pane > .activity:not([data-state='working']):not([data-state='failed']) { display: none; }
@media (min-width: 1000px) {
  .intake-split.has-site { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .intake-tabs { display: none; }
  .intake-split[data-pane] > .live-pane, .intake-split[data-pane] > .intake-pane { display: block; }
  .live-pane, .proposal-pane { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
  .proposal-waiting { display: block; }
}
/* During the intake the menu and Buddy's column have nothing to show (Buddy talks in the middle): they fold away, and
   the conversation and the site get the width (the overseer, 7 November 2026). */
@media (min-width: 700px) {
  body[data-screen="intake"] .layout { grid-template-columns: minmax(0, 1fr); }
  body[data-screen="intake"] #tabs, body[data-screen="intake"] aside#buddy { display: none; }
}
/* The site beside the conversation needs the room of the whole column, not the 40rem of a screen of text (editor.css). */
@media (min-width: 1000px) {
  body[data-screen="intake"] main:has(.intake-split.has-site) { max-width: 1320px; width: 100%; margin: 0 auto; box-sizing: border-box; }
  body[data-screen="intake"] .screen:has(.intake-split.has-site) { max-width: none; }
}
/* While Buddy builds, the growing site is what to look at: the conversation steps back a little (Buddy's narration
   stays clear), and the site's frame lights up. */
@media (min-width: 1000px) {
  .intake-split[data-building] > .intake-pane > :not(.activity) { opacity: 0.7; transition: opacity 0.3s; }
  .intake-split[data-building] > .intake-pane:hover > *, .intake-split[data-building] > .intake-pane:focus-within > * { opacity: 1; }
}
.intake-split[data-building] .live .stage-frame { box-shadow: 0 0 0 3px var(--orange-soft), var(--shadow); }

/* Buddy's questions, findings and proposal. */
.intake-choices { margin: 12px 0; }
.intake-choices h2 { font-size: 1.05rem; margin: 0 0 4px; }
.intake-choices h3 { font-size: 0.95rem; margin: 12px 0 6px; }
.intake-question { margin: 8px 0; }
.intake-options { display: flex; flex-wrap: wrap; gap: 8px; }
.intake-options button { min-height: 44px; }
.intake-findings ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.intake-findings li { border-top: 1px solid var(--line); padding-top: 8px; overflow-wrap: anywhere; }
.intake-findings li p { margin: 0 0 4px; }

.intake-swatches, .intake-fonts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.palette-choice, .font-choice { display: grid; gap: 6px; min-height: 44px; padding: 8px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.palette-choice[aria-pressed='true'], .font-choice[aria-pressed='true'] { border-color: var(--orange); box-shadow: var(--shadow); }
.palette-choice:focus-visible, .font-choice:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 2px; }
.swatch-card { --sw-primary: #4e4e4e; --sw-accent: #ff914d; --sw-bg: #ffffff; --sw-text: #2f2f2f; display: grid; gap: 4px; padding: 0 0 8px; border-radius: var(--radius-small); overflow: hidden; background: var(--sw-bg); color: var(--sw-text); border: 1px solid var(--line); font-family: var(--sw-body, inherit); }
.swatch-bar { height: 10px; background: var(--sw-primary); }
.swatch-title { padding: 0 8px; font-weight: 700; font-family: var(--sw-heading, inherit); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swatch-line { display: block; height: 5px; margin: 0 8px; border-radius: 3px; background: var(--sw-text); opacity: 0.25; }
.swatch-line-short { width: 55%; }
.swatch-button { justify-self: start; margin: 2px 8px 0; padding: 2px 8px; border-radius: 999px; background: var(--sw-accent); color: var(--sw-bg); font-size: 0.75rem; }
.swatch-name { font-weight: 600; }
.font-sample { display: flex; align-items: baseline; gap: 8px; }
.font-heading { font-family: var(--sw-heading, inherit); font-size: 1.6rem; font-weight: 700; }
.font-body { font-family: var(--sw-body, inherit); }
.intake-pages fieldset { border: 0; padding: 0; margin: 12px 0 0; }
.intake-pages legend { font-weight: 600; margin-bottom: 6px; }
.intake-pages .check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; }
.intake-pages input[type='checkbox'] { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.intake-sketch { --sw-primary: #4e4e4e; --sw-accent: #ff914d; --sw-bg: #ffffff; --sw-text: #2f2f2f; display: grid; gap: 8px; padding: 10px; border-radius: var(--radius); background: var(--sw-bg); color: var(--sw-text); border: 1px solid var(--line); font-family: var(--sw-body, inherit); overflow-wrap: anywhere; }
.intake-sketch > div { padding: 8px; border-radius: var(--radius-small); border: 1px dashed color-mix(in srgb, var(--sw-text) 25%, transparent); }
.intake-sketch strong { font-family: var(--sw-heading, inherit); }
.intake-sketch .sketch-hero { background: color-mix(in srgb, var(--sw-primary) 12%, var(--sw-bg)); border-style: solid; border-color: var(--sw-primary); }
.intake-sketch .sketch-cta { border-color: var(--sw-accent); }
.intake-sketch p, .intake-sketch ul { margin: 4px 0 0; }

/* The growing site. */
.live { display: grid; gap: 10px; min-width: 0; }
.live-hello { display: flex; align-items: center; gap: 10px; }
.live-status { font-weight: 600; margin: 0; }
.live-label { margin: 0; font-size: 0.85rem; }
.live-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.live-steps li { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 0.85rem; }
.live-steps li[data-state='done'] { border-color: var(--ok); }
.live-steps li[data-state='busy'] { border-color: var(--orange); background: var(--orange-soft); }
.live-steps li[data-state='failed'] { border-color: var(--warn); }
.live .row button { min-height: 44px; }

.live-schets {
  --live-primary: #4e4e4e; --live-accent: #ff914d; --live-bg: #ffffff; --live-text: #2f2f2f;
  --live-heading-font: inherit; --live-body-font: inherit;
  display: grid; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--live-bg); color: var(--live-text);
  border: 1px solid var(--line); box-shadow: var(--shadow); font-family: var(--live-body-font); overflow-wrap: anywhere; min-width: 0;
}
.live-schets h2, .live-schets h3, .live-schets h4, .live-head strong { font-family: var(--live-heading-font); }
.live-head { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 4px solid var(--live-primary); }
.live-head strong { font-size: 1.1rem; }
.live-menu { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.85rem; }
.live-menu span { border-bottom: 2px solid var(--live-accent); }
.live-page { display: grid; gap: 8px; padding: 10px; border-radius: var(--radius-small); border: 1px dashed color-mix(in srgb, var(--live-text) 20%, transparent); }
.live-page h2 { margin: 0; font-size: 1.15rem; }
.live-page[data-state='busy'] { border-style: solid; border-color: var(--live-accent); }
.live-page[data-state='wait'] { opacity: 0.6; }
.live-page[data-state='failed'] { border-color: var(--warn); }
.live-page p, .live-page ul, .live-page dl, .live-page blockquote { margin: 0; }
.live-hero { display: grid; gap: 8px; padding: 10px; border-radius: var(--radius-small); background: color-mix(in srgb, var(--live-primary) 12%, var(--live-bg)); }
.live-photo { display: grid; place-items: center; min-height: 72px; border-radius: var(--radius-small); border: 2px dashed color-mix(in srgb, var(--live-text) 35%, transparent); color: color-mix(in srgb, var(--live-text) 70%, transparent); font-size: 0.85rem; text-align: center; padding: 8px; }
/* A starter's photo, there before the text (the overseer's walkthrough of 7 November 2026). */
.live-photo.has-photo { padding: 0; border: 0; overflow: hidden; aspect-ratio: 16 / 9; min-height: 0; }
.live-photo.has-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.live-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 6px; }
.live-gallery-grid .live-photo.has-photo { aspect-ratio: 1; }
.live-hero h3, .live-cta h3, .live-features h3, .live-faq h3, .live-gallery h3 { margin: 0; }
.live-features ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.live-features li { padding: 8px; border-radius: var(--radius-small); border: 1px solid color-mix(in srgb, var(--live-text) 15%, transparent); }
.live-cta { padding: 10px; border-radius: var(--radius-small); border: 2px solid var(--live-accent); }
.live-button { display: inline-block; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: var(--live-accent); color: var(--live-bg); font-size: 0.85rem; }
.live-quote { padding-left: 10px; border-left: 4px solid var(--live-accent); }
.live-faq dt { font-weight: 600; margin-top: 6px; }
.live-faq dd { margin: 0; }
.live-stats h3 { margin: 0; }
.live-stats ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.live-stats strong { display: block; font-size: 1.4em; color: var(--site-primary, inherit); }
.live-question { background: var(--orange-soft); color: var(--ink); border-radius: 4px; padding: 0 4px; }
.live-writing { font-style: italic; }
.live-page[data-state='busy'] .live-writing { animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: 0.4; } }
/* A block, heading or page that just arrived falls into place once: the customer sees the site being built. */
.live-new { animation: live-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes live-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.live-photo { background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--live-bg) 60%, transparent) 50%, transparent 70%) 0 0 / 200% 100%, color-mix(in srgb, var(--live-primary) 8%, var(--live-bg)); animation: live-shimmer 2.4s linear infinite; }
@keyframes live-shimmer { to { background-position: -200% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .live-page[data-state='busy'] .live-writing, .live-new, .live-photo { animation: none; }
}

/* The sketch in the stage's frame (editor/stage.js): the frame draws the edge, the canvas only the page. */
.stage .live-schets { border: 0; border-radius: 0; box-shadow: none; }