/* The open house flyer maker (components/flyer-maker/flyer-maker.tsx) on
   /open-house-flyers/. Built on styles.css (tokens, .wide, .sr-only, focus
   rings) and the contact page's form styling; no colours of its own: every
   value below is a token or a colour the redesign already uses.
   Layout: the design strip on top, then the form on the left and the live
   preview on the right; one column on phones with the preview first. */
.fm { padding:12px 0 72px; scroll-margin-top:var(--header); }
.fm-head h2 { font-size:clamp(1.75rem,2.6vw,2.4rem); line-height:1.15; letter-spacing:-.04em; }
.fm-head p { margin-top:12px; max-width:640px; font-size:1.0625rem; line-height:1.75; }

/* Design picker: a strip of thumbnails, scrolling sideways when it doesn't fit. */
.fm-picker { border:0; padding:0; margin:28px 0 0; min-width:0; }
.fm-picker legend, .fm-group legend { padding:0; }
.fm-picker legend { font-size:.9375rem; font-weight:610; color:#343d52; margin-bottom:12px; }
.fm-picker-strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(104px,1fr); gap:14px; overflow-x:auto; padding:4px 4px 14px; margin:-4px -4px 0; scroll-snap-type:x proximity; overscroll-behavior-x:contain; }
.fm-design { position:relative; display:block; scroll-snap-align:start; cursor:pointer; padding:7px 7px 9px; border:1px solid var(--line); border-radius:12px; background:#fff; transition:border-color .16s,box-shadow .16s; }
.fm-design:hover { border-color:#c0b5d6; }
.fm-design:has(input:checked) { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple), 0 9px 24px -14px #6335ed33; }
.fm-design:has(input:focus-visible) { outline:3px solid #8864ff; outline-offset:3px; }
.fm-design img { width:100%; height:auto; border-radius:3px; box-shadow:0 8px 18px -14px #29213799; }
.fm-design span { display:block; margin-top:8px; font-size:.8125rem; line-height:1.3; font-weight:600; text-align:center; color:var(--ink); }
.fm-design:has(input:checked) span { color:var(--purple-deep); }

/* Work area: form left, preview right (the preview stays in view while the form scrolls). */
.fm-work { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,500px); grid-template-areas:"form preview"; gap:52px; margin-top:30px; align-items:start; }
.fm-form { grid-area:form; min-width:0; }
.fm-preview { grid-area:preview; position:sticky; top:calc(var(--header) + 20px); min-width:0; }

/* The preview box keeps the Letter shape, so the canvas replaces the picture without moving anything. */
.fm-preview-box { position:relative; aspect-ratio:1200/1553; border-radius:4px; overflow:hidden; background:#eee9f6; box-shadow:0 30px 55px -24px #292137b3, 0 2px 8px #29213726; }
.fm-preview-box img, .fm-preview-box canvas { position:absolute; inset:0; display:block; width:100%!important; height:100%!important; }
.fm-preview-box canvas { visibility:hidden; }
.fm-preview-box canvas[data-front] { visibility:visible; }
.fm-preview-notes p { margin-top:12px; font-size:.875rem; line-height:1.6; }

/* Form groups and fields (as on the contact page). */
.fm-group { border:0; padding:0; margin:0 0 30px; min-width:0; }
.fm-group legend { font-size:1.125rem; line-height:1.35; font-weight:650; letter-spacing:-.2px; color:var(--ink); margin-bottom:14px; }
.fm-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.fm-row-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fm-field { min-width:0; margin-bottom:16px; }
.fm-field>label:not(.fm-pick), .fm-label { display:block; font-size:.875rem; font-weight:610; line-height:1.5; color:#343d52; margin-bottom:6px; }
.fm-optional { margin-left:6px; font-size:.8125rem; font-weight:400; color:var(--muted); }
.fm-field input:not([type=color]):not([type=file]):not([type=radio]), .fm-field textarea { display:block; width:100%; min-height:47px; padding:11px 12px; font:inherit; font-size:1rem; line-height:1.5; color:#29334a; background:#fff; border:1px solid #cfd5e2; border-radius:8px; transition:border-color .16s,box-shadow .16s; }
.fm-field textarea { resize:vertical; min-height:96px; }
.fm-field input:hover, .fm-field textarea:hover { border-color:#b0abc1; }
.fm-field input:focus, .fm-field textarea:focus { outline:2px solid #9679df; outline-offset:2px; border-color:#9679df; }
.fm-field input[aria-invalid], .fm-field textarea[aria-invalid] { border-color:#805335; }
.fm-hint { margin-top:6px; font-size:.8125rem; line-height:1.55; color:var(--muted); }
.fm-error { margin-top:6px; font-size:.8125rem; line-height:1.55; color:#805335; }
.fm-error p { margin-top:4px; color:inherit; }
.fm-preview-notes .fm-error { padding:10px 12px; border:1px solid #e8d1c2; border-radius:8px; background:#fff8f3; }

/* Photos: thumbnails with a remove button, and an "Add photos" tile. */
.fm-photos { position:relative; margin:10px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; }
.fm-photo { position:relative; min-width:0; }
.fm-photos>.fm-error { grid-column:1/-1; margin-top:0; }
.fm-photos img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; background:var(--soft); }
.fm-photo>span { display:block; margin-top:4px; font-size:.75rem; line-height:1.4; color:var(--muted); }
.fm-pick { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; aspect-ratio:4/3; padding:8px; border:1px dashed #c0b5d6; border-radius:8px; background:var(--soft); color:var(--purple-deep); font-size:.8125rem; line-height:1.3; font-weight:610; text-align:center; cursor:pointer; transition:border-color .16s; }
.fm-pick:hover { border-color:var(--purple); }
.fm-pick .icon { width:20px; height:20px; }
.fm-file:focus-visible+.fm-pick { outline:3px solid #8864ff; outline-offset:3px; }
.fm-pick[aria-busy] { cursor:progress; opacity:.7; }
.fm-remove { position:absolute; top:6px; right:6px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:#fff; color:var(--ink); box-shadow:0 2px 6px #2921371f; }
.fm-remove .icon { width:16px; height:16px; }
.fm-remove:hover { color:var(--purple-deep); }
.fm-privacy { margin-top:12px; font-size:.8125rem; line-height:1.55; }

/* Headshot and logo: one image each, picked from a row tile. */
.fm-image { position:relative; }
.fm-pick-one { flex-direction:row; justify-content:flex-start; aspect-ratio:auto; min-height:64px; padding:10px 48px 10px 12px; gap:12px; text-align:left; color:#343d52; }
.fm-pick-one .icon { color:var(--purple-deep); }
.fm-pick-one img { flex:none; width:44px; height:44px; object-fit:contain; border-radius:6px; background:#fff; }
.fm-pick-one .fm-optional { display:block; margin:0; }
.fm-image .fm-remove { top:16px; right:10px; }

.fm-color input[type=color] { display:block; width:64px; height:44px; padding:4px; border:1px solid #cfd5e2; border-radius:8px; background:#fff; cursor:pointer; }
.fm-color input[type=color]:focus-visible { outline:2px solid #9679df; outline-offset:2px; }

/* Downloads and the signup offer, under the form. */
.fm-download { position:relative; max-width:700px; margin-top:6px; padding-top:30px; border-top:1px solid var(--line); }
.fm-actions { display:flex; flex-wrap:wrap; gap:14px; }
.fm-actions .button { min-width:230px; }
.fm-actions .button:disabled { opacity:.5; transform:none; box-shadow:none; }
.fm-actions .button.primary:disabled:hover { background:var(--purple); }
.fm-actions .button[aria-busy] { opacity:1; cursor:progress; }
.fm-download-note, .fm-download-hint { margin-top:12px; font-size:.875rem; line-height:1.6; }
.fm-download-hint { margin-top:6px; color:#343d52; }
.fm-offer { margin-top:34px; padding:26px 28px 28px; border:1px solid var(--line); border-radius:16px; background:var(--soft); }
.fm-offer h3 { font-size:1.3rem; line-height:1.25; letter-spacing:-.025em; }
.fm-offer>p { margin-top:10px; font-size:1rem; line-height:1.7; }
.fm-offer .button { margin-top:20px; }
.fm-offer .fm-offer-note { margin-top:12px; font-size:.875rem; line-height:1.5; }

@media (max-width:1100px) { .fm-work { grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:36px; } }
@media (max-width:850px) {
  .fm { padding-bottom:56px; }
  .fm-work { grid-template-columns:minmax(0,1fr); grid-template-areas:"preview" "form"; gap:28px; margin-top:22px; }
  .fm-preview { position:static; width:100%; max-width:460px; margin-inline:auto; }
  .fm-picker-strip { grid-auto-columns:96px; gap:10px; }
}
@media (max-width:560px) {
  .fm-row { grid-template-columns:minmax(0,1fr); }
  .fm-row-3 { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 10px; }
  .fm-group .fm-row-3:has(.fm-date) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fm-date { grid-column:1/-1; }
  .fm-design { padding:5px 5px 7px; }
  .fm-actions .button { width:100%; min-width:0; }
  .fm-offer { padding:22px 20px 24px; }
  .fm-offer .button { width:100%; }
}
.fm-tool-link { margin-top:18px; font-size:.95rem; line-height:1.5; }