/*!
 * designer.css — "Design Your New Garage Door".
 *
 * Plain CSS, mobile-first. Most people open this standing in their own driveway
 * on a phone in daylight, so: big targets, high contrast, the photo as the hero,
 * controls within thumb reach. Desktop promotes the controls to a side rail.
 *
 * No framework and no CDN beyond the Google Fonts link in index.php.
 */

/* ───────────────────────── tokens ───────────────────────── */

:root {
  --accent: #dd2034;
  --accent-hover: #b81a2b;
  --accent-soft: #fef2f2;
  --deep: #1a0608;
  --ink: #1a1a1a;
  --muted: #6b7280;
  --paper: #fafafa;
  --line: #e5e7eb;
  --white: #ffffff;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(26, 6, 8, .06), 0 2px 6px rgba(26, 6, 8, .05);
  --shadow: 0 2px 6px rgba(26, 6, 8, .07), 0 10px 26px rgba(26, 6, 8, .09);
  --shadow-lg: 0 8px 20px rgba(26, 6, 8, .12), 0 28px 60px rgba(26, 6, 8, .18);

  --display: 'Bebas Neue', 'Barlow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --bar-h: 72px;
  /* A cap on the photo's HEIGHT, so it is never expressed in vw: a portrait
     shot from the driveway has to be allowed to fill the viewport width, and
     72vw once pinned a 3:4 photo to ~212px wide on a 393px phone. */
  --stage-max: min(62vh, 520px);
}

*, *::before, *::after { box-sizing: border-box; }

/* The whole app hides things with the `hidden` attribute — screens, drawers,
   the coach mark, the busy overlay. Every one of those also carries a display
   rule below, which would out-specify the UA's [hidden] { display: none }, so
   pin it once here instead of remembering it at a dozen call sites. */
[hidden] { display: none !important; }

html.gdd-html { -webkit-text-size-adjust: 100%; }

body.gdd-body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
  margin: 0 0 .4em;
}

img, svg { max-width: 100%; }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.gdd-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gdd-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--deep);
  color: #fff;
  padding: 12px 18px;
  font-weight: 700;
}
.gdd-skip:focus { left: 8px; top: 8px; }

/* ───────────────────────── header ───────────────────────── */

.gdd-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--deep);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.gdd-brand { display: inline-flex; line-height: 0; }
.gdd-brand img { height: 32px; width: auto; display: block; }

.gdd-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.gdd-call:hover { background: var(--accent-hover); color: #fff; }
.gdd-call svg { width: 17px; height: 17px; fill: currentColor; }

/* ───────────────────────── shared bits ───────────────────────── */

.gdd-main { min-height: 60vh; }

.gdd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .1s ease;
}
.gdd-btn:active { transform: translateY(1px); }

.gdd-btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.gdd-btn-primary:hover { background: var(--accent-hover); color: #fff; }

.gdd-btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
.gdd-btn-ghost:hover { border-color: var(--muted); color: var(--ink); }

.gdd-btn-small { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.gdd-btn-small:hover { border-color: var(--muted); }

.gdd-btn-block { width: 100%; }
.gdd-btn[disabled] { opacity: .6; cursor: progress; }

.gdd-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.gdd-fineprint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 18px 0 0;
}

.gdd-note {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 0;
}

.gdd-empty {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
  padding: 10px 0;
}
.gdd-empty-sm { font-size: 13px; padding: 4px 0; }

.gdd-err {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-hover);
}
.gdd-err-form {
  margin-top: 12px;
  background: var(--accent-soft);
  border: 1px solid #f6c9ce;
  border-radius: var(--r-sm);
  padding: 10px 12px;
}

.gdd-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: gdd-spin .7s linear infinite;
}
.gdd-spinner-lg { width: 28px; height: 28px; border-width: 3px; border-color: rgba(255,255,255,.3); border-top-color: #fff; display: block; }
.is-busy .gdd-spinner { display: block; }
@keyframes gdd-spin { to { transform: rotate(360deg); } }

/* ───────────────────────── noscript ───────────────────────── */

.gdd-noscript {
  margin: 24px auto;
  max-width: 620px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.gdd-noscript h1 { font-size: 30px; }

/* ───────────────────────── screen 1: start ───────────────────────── */

.gdd-hero {
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 20px 48px;
  text-align: center;
}

.gdd-eyebrow {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.gdd-hero h1 {
  font-size: clamp(34px, 9vw, 54px);
  color: var(--deep);
  margin-bottom: 14px;
}

.gdd-lede {
  margin: 0 auto 26px;
  max-width: 48ch;
  font-size: 16.5px;
  color: #3f3f46;
}

.gdd-pickers { display: grid; gap: 12px; }

.gdd-drop {
  display: block;
  padding: 30px 20px;
  border: 2px dashed #d6a3aa;
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .1s ease;
}
.gdd-drop:hover, .gdd-drop.is-over { border-color: var(--accent); background: #fde9eb; }
.gdd-drop:active { transform: translateY(1px); }
.gdd-drop:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }

.gdd-drop-icon { display: block; margin: 0 auto 10px; width: 42px; height: 42px; }
.gdd-drop-icon svg { width: 100%; height: 100%; fill: var(--accent); }

.gdd-drop-title {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 26px;
  color: var(--deep);
  line-height: 1.05;
}
.gdd-drop-sub { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }

.gdd-demo-btn { width: 100%; }

.gdd-trust {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  text-align: left;
}
.gdd-trust li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #3f3f46;
}
.gdd-trust svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; fill: var(--accent); }

/* ───────────────────────── screen 2: the gate ───────────────────────── */

.gdd-gate {
  max-width: 540px;
  margin: 24px auto 56px;
  padding: 22px;
}
.gdd-gate h2 { font-size: 36px; color: var(--deep); }

.gdd-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 10px -8px;
  padding: 8px;
  min-height: 40px;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.gdd-back:hover { color: var(--ink); }
.gdd-back svg { width: 18px; height: 18px; fill: currentColor; }

.gdd-gate-why {
  margin: -4px 0 8px;
  font-size: 14.5px;
  color: var(--muted);
}
/* The second "why" line earns darker ink: we are asking for a house address
   now, and the reason for that should not read as fine print. */
.gdd-gate-why-address {
  margin: 0 0 20px;
  font-weight: 600;
  color: #3f3f46;
}

.gdd-field { margin-bottom: 16px; }
.gdd-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.gdd-req { color: var(--accent); }
.gdd-opt { font-weight: 500; color: var(--muted); text-transform: none; }

.gdd-field input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;            /* 16px stops iOS zooming the viewport on focus */
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.gdd-field input:hover { border-color: #cfd3da; }
/* Keep the global focus ring: this is the one form in the app, and a 14%-alpha
   halo is invisible on a phone in sunlight. The shadow is decoration only. */
.gdd-field input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(221, 32, 52, .35);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
/* A red hairline alone is easy to miss on a phone in daylight, so a rejected
   input also takes the soft accent wash the form-level error uses. */
.gdd-field input[aria-invalid="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* City / State / ZIP on one row.
   State and ZIP get fixed columns sized to what they actually hold (two letters
   and five digits), so city takes whatever is left and the row still fits a
   320px phone: 276px of card interior, minus 56 + 86 + two 8px gaps, leaves
   city 118px. Each cell keeps its own label, input and error paragraph, so a
   message stays under the field it belongs to. */
.gdd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 86px;
  gap: 8px;
  margin-bottom: 16px;
}
.gdd-row .gdd-field { margin-bottom: 0; }
.gdd-row .gdd-field input { padding: 0 10px; }
.gdd-row .gdd-err { font-size: 13px; }
/* Keep "ZIP" from wrapping its required star onto a second line in a column
   this narrow — the labels would then stop lining up across the row. */
.gdd-row .gdd-field label { white-space: nowrap; }
#gdd-state { text-transform: uppercase; }

@media (min-width: 420px) {
  .gdd-row { grid-template-columns: minmax(0, 1fr) 76px 112px; gap: 10px; }
  .gdd-row .gdd-field input { padding: 0 14px; }
}

.gdd-consent {
  display: flex;
  flex-wrap: wrap;          /* the consent error sits in this block, on its own row */
  align-items: flex-start;
  gap: 11px;
  margin: 20px 0 6px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.gdd-consent input {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}
.gdd-consent label { flex: 1 1 0; min-width: 0; font-size: 14px; line-height: 1.5; color: #3f3f46; }
.gdd-consent .gdd-err { flex: 1 0 100%; margin: 0; }

.gdd-gate form > .gdd-btn { margin-top: 18px; }

/* ───────────────────────── screen 3: designer ───────────────────────── */

.gdd-designer { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }

.gdd-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0405;
  overflow: hidden;
  /* Scrolling the page and pinching to zoom have to survive over the photo —
     zooming in is how you see whether a corner is on the jamb. The handles set
     `touch-action: none` themselves, and setPointerCapture keeps a drag alive
     once it has started, so the stage only reserves horizontal drags. */
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.gdd-frame {
  position: relative;
  display: block;
  line-height: 0;
  max-width: 100%;
}

.gdd-photo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--stage-max);
  aspect-ratio: var(--gdd-ar, 1.5);
  object-fit: cover;
  -webkit-user-drag: none;
}

.gdd-door {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
  transition: opacity .14s ease;
}
.gdd-door > svg { display: block; width: 100%; height: 100%; }
.gdd-peek .gdd-door { opacity: 0; }
.gdd-peek .gdd-handles { opacity: .25; }

.gdd-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}

.gdd-handle {
  position: absolute;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  padding: 0;
  background: none;
  border: 0;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
.gdd-handle::before, .gdd-handle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(26, 6, 8, .35);
}
.gdd-handle::before { width: 26px; height: 2px; transform: translate(-50%, -50%); }
.gdd-handle::after { width: 2px; height: 26px; transform: translate(-50%, -50%); }

.gdd-handle-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  transition: transform .12s ease, background .12s ease;
}
.gdd-handle:hover .gdd-handle-dot,
.gdd-handle:focus-visible .gdd-handle-dot { transform: scale(1.22); }
.gdd-handle.is-active { cursor: grabbing; }
.gdd-handle.is-active .gdd-handle-dot { transform: scale(1.38); background: #fff; border-color: var(--accent); }

/* Sits at the top of the stage, not over the opening — the whole point is to
   watch the door while you drag. */
.gdd-coach {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 20px);
  padding: 5px 5px 5px 14px;
  border-radius: 999px;
  background: rgba(26, 6, 8, .92);
  color: #fff;
  box-shadow: var(--shadow-lg);
  z-index: 3;
}
.gdd-coach p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.25; }
.gdd-coach .gdd-btn-small {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.gdd-stage-busy {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(13, 4, 5, .72);
  color: #fff;
}
.gdd-stage-busy p { margin: 0; font-weight: 700; }

.gdd-stage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.gdd-current {
  flex: 1 1 100%;
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 21px;
  line-height: 1.1;
  color: var(--deep);
}

.gdd-stage-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.gdd-hold-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.gdd-saved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #15803d;
  opacity: 0;
  transition: opacity .2s ease;
}
.gdd-saved.is-on { opacity: 1; }
.gdd-saved svg { width: 15px; height: 15px; fill: currentColor; }

/* ── the rail ── */

.gdd-rail { padding: 18px 16px 24px; }

.gdd-group { margin-bottom: 26px; }
.gdd-group h3 {
  font-size: 19px;
  color: var(--deep);
  margin-bottom: 10px;
}

.gdd-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.gdd-group-head h3 { margin-bottom: 8px; }

.gdd-brandchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

.gdd-chip {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.gdd-chip:hover { border-color: var(--muted); color: var(--ink); }
.gdd-chip[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }
.gdd-chip-tool { min-height: 38px; color: var(--ink); }

/* style cards: a scroll rail on phones, a grid on desktop */
.gdd-styles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 148px;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 16px 10px;
  margin: 0 -16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.gdd-style {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--r);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.gdd-style:hover { border-color: #cfd3da; box-shadow: var(--shadow-sm); }
.gdd-style.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(221, 32, 52, .12); }
.gdd-style:active { transform: translateY(1px); }

.gdd-style-thumb {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-sm);
  background: #f1f2f4;
  overflow: hidden;
  margin-bottom: 6px;
  line-height: 0;
}
.gdd-style-thumb svg, .gdd-style-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gdd-style-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.gdd-style-brand {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* colour swatches — White, Almond, Sandtone and Desert Tan are within a few
   percent of each other, so the name is always visible rather than a tooltip:
   a phone has no hover, and tapping to find out is tapping blind. */
.gdd-swatches { display: flex; flex-wrap: wrap; gap: 10px 8px; }

.gdd-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 68px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.gdd-swatch-dot {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sw, #ccc);
  box-shadow: inset 0 0 0 1px rgba(26, 6, 8, .14), var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.gdd-swatch:hover .gdd-swatch-dot { transform: scale(1.08); }
.gdd-swatch.is-on .gdd-swatch-dot {
  box-shadow: inset 0 0 0 1px rgba(26, 6, 8, .14), 0 0 0 3px var(--white), 0 0 0 6px var(--accent);
}

.gdd-swatch-name {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--muted);
  pointer-events: none;
}
.gdd-swatch.is-on .gdd-swatch-name { color: var(--accent-hover); }

/* window / hardware / insulation */
.gdd-options { display: flex; flex-wrap: wrap; gap: 8px; }
.gdd-options-2 .gdd-option { flex: 1 1 140px; justify-content: center; }

.gdd-option {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.gdd-option:hover { border-color: #cfd3da; }
.gdd-option.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }

.gdd-rail-fineprint { margin-top: 4px; }

/* ── action bar ── */

.gdd-actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(26, 6, 8, .08);
}
body:not([data-screen="designer"]) .gdd-actionbar { display: none; }

.gdd-heart {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 62px;
  min-height: 52px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.gdd-heart svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gdd-heart:hover { border-color: var(--accent); color: var(--accent); }
.gdd-heart.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.gdd-heart.is-on svg { fill: var(--accent); stroke: var(--accent); }
.gdd-heart.is-pop svg { animation: gdd-pop .34s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes gdd-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.32); }
  100% { transform: scale(1); }
}

.gdd-favs-btn { flex: 0 1 auto; min-height: 52px; }
.gdd-share-btn { flex: 1 1 auto; min-height: 52px; }

.gdd-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* ───────────────────────── drawers ───────────────────────── */

.gdd-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(26, 6, 8, .45);
  backdrop-filter: blur(2px);
}

.gdd-drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
.gdd-drawer.is-open { transform: translateY(0); }

.gdd-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.gdd-drawer-head h2 { margin: 0; font-size: 26px; color: var(--deep); }

.gdd-drawer-body {
  padding: 16px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gdd-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
}
.gdd-x:hover { background: var(--line); }
.gdd-x svg { width: 20px; height: 20px; fill: var(--ink); }
.gdd-x-sm { width: 38px; height: 38px; background: none; }
.gdd-x-sm svg { width: 17px; height: 17px; fill: var(--muted); }
.gdd-x-sm:hover svg { fill: var(--accent); }

/* favourites list */
.gdd-fav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.gdd-fav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
}
.gdd-fav-thumb {
  flex: 0 0 auto;
  width: 78px;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #f1f2f4;
  line-height: 0;
}
.gdd-fav-thumb svg, .gdd-fav-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gdd-fav-meta { flex: 1 1 auto; min-width: 0; display: block; }
.gdd-fav-meta strong { display: block; font-size: 14.5px; line-height: 1.3; }
.gdd-fav-meta small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

.gdd-fav-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }

/* share drawer */
.gdd-share-blurb { margin: 0 0 16px; font-size: 15px; color: #3f3f46; }

.gdd-linkrow {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.gdd-linkrow input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.gdd-linkrow .gdd-btn-small { min-height: 46px; }

.gdd-share-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.gdd-share-actions .gdd-btn { flex: 1 1 150px; }

/* ── "Send to Affordable for a free bid" ──────────────────────────────────
   The one action in this drawer that starts a conversation rather than
   producing a file, so it gets its own block and its own colour: the red is
   already spent on Share, and two reds side by side make neither one mean
   anything. Dark on paper reads as the deliberate choice it is. */
.gdd-bid {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.gdd-bid-h {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .02em;
  color: var(--ink);
}
.gdd-bid-p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: #3f3f46; }

.gdd-btn-bid { background: var(--deep); color: #fff; border-color: var(--deep); gap: 9px; }
.gdd-btn-bid:hover { background: #2d0d11; color: #fff; }
.gdd-btn-bid svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.gdd-btn-bid[disabled] { opacity: .6; cursor: default; }

.gdd-bid-done {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 14px;
  line-height: 1.5;
}
.gdd-bid-done.is-bad { background: var(--accent-soft); border-color: #fecaca; color: #991b1b; }

/* ── Welcome back ─────────────────────────────────────────────────────────
   Shown instead of an empty gate when this browser has designed here before.
   Their work is one tap away; starting over is the quieter option. */
.gdd-welcome {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.gdd-welcome-h { margin: 0 0 4px; font-family: var(--display); font-size: 26px; letter-spacing: .02em; }
.gdd-welcome-p { margin: 0 0 14px; font-size: 15px; color: #3f3f46; }
.gdd-welcome-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gdd-welcome-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.gdd-welcome-list a:hover { border-color: var(--muted); }
.gdd-welcome-thumb {
  width: 64px; height: 44px; flex: none;
  border-radius: 6px; object-fit: cover; background: var(--line);
}
.gdd-welcome-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gdd-welcome-meta b { font-size: 15px; }
.gdd-welcome-meta span { font-size: 13px; color: var(--muted); }
.gdd-welcome-new {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.gdd-welcome-new button {
  background: none; border: 0; padding: 0;
  color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer;
}

.gdd-progress { margin-bottom: 16px; }
.gdd-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.gdd-progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .25s ease;
}
.gdd-progress p { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }

/* ───────────────────────── toast ───────────────────────── */

.gdd-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom));
  z-index: 60;
  transform: translate(-50%, 8px);
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--r);
  background: var(--deep);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.gdd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ───────────────────────── desktop ───────────────────────── */

@media (min-width: 900px) {
  :root { --stage-max: min(72vh, 52vw); }

  .gdd-header { padding: 12px 28px; }
  .gdd-brand img { height: 36px; }

  .gdd-hero { padding: 56px 24px 72px; }
  .gdd-trust { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .gdd-trust li { flex-direction: column; gap: 6px; font-size: 14px; }

  .gdd-gate { padding: 32px; margin-top: 44px; }

  .gdd-designer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: start;
    gap: 0;
    padding-bottom: 0;
    min-height: calc(100vh - 60px);
  }

  .gdd-stage-col {
    position: sticky;
    top: 60px;
  }
  .gdd-stage { min-height: 50vh; }

  .gdd-rail {
    border-left: 1px solid var(--line);
    background: var(--white);
    padding: 22px 24px 24px;
    min-height: calc(100vh - 60px);
  }

  /* styles become a grid once there is room to see them all at once */
  .gdd-styles {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin: 0;
    padding: 2px 0;
  }

  .gdd-actionbar {
    position: sticky;
    left: auto; right: auto;
    grid-column: 2;
    bottom: 0;
    border-top: 1px solid var(--line);
    padding: 12px 24px;
    background: rgba(255, 255, 255, .98);
  }

  .gdd-drawer {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 460px;
    max-height: calc(100vh - 100px);
    border-radius: var(--r-lg);
    transform: translateY(16px);
    opacity: 0;
  }
  .gdd-drawer.is-open { transform: translateY(0); opacity: 1; }

  .gdd-toast { bottom: 24px; }
}

@media (min-width: 1280px) {
  .gdd-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ───────────────────────── reduced motion ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}