/* KF Crafts — "See it in your garden": the AI garden visualiser (js/visualiser.js), prefix .kv.
   Ink and champagne like the rest of the site; the photo is the only colour. Every control ≥ 44 px. */

.kv { display: grid; gap: 1.25rem; color: var(--text); }
.kv [hidden] { display: none !important; }

/* ---------- steps: 01 Photo · 02 Place · 03 Make it real · 04 Bring it to life ---------- */
.kv__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.kv__steps li {
  display: grid;
  gap: 0.3rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  transition: color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.kv__step-n { font-family: var(--seal); font-size: 0.625rem; letter-spacing: 0.2em; }
.kv__steps li.is-done { color: var(--text-dim); border-top-color: var(--line); }
.kv__steps li.is-on { color: var(--champagne); border-top-color: var(--champagne); }

/* ---------- 1 · upload ---------- */
.kv__file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.kv__drop {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 7.5rem;
  padding: 1.25rem 1.25rem;
  border: 1px dashed var(--line-strong);
  background: linear-gradient(180deg, rgba(216, 199, 156, 0.05), rgba(216, 199, 156, 0));
  cursor: pointer;
  transition: border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.kv__file:focus-visible + .kv__drop { outline: 2px solid var(--champagne); outline-offset: 3px; }
@media (hover: hover) {
  .kv__drop:hover { border-color: var(--champagne); background-color: rgba(216, 199, 156, 0.04); }
}
.kv__drop-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  color: var(--champagne);
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1;
}
.kv__drop-text { display: grid; gap: 0.3rem; }
.kv__drop-title { color: var(--text-strong); font-size: 1.0625rem; }
.kv__drop-hint { color: var(--text-dim); font-size: 0.875rem; line-height: 1.5; }
.kv__consent { margin-top: 0.75rem; color: var(--text-dim); font-size: 0.8125rem; line-height: 1.55; }

/* ---------- the stage: photo + transparent 3D + result + film ---------- */
.kv__stage {
  --kv-split: 50%;
  --kv-hor: 42%;
  position: relative;
  width: min(100%, calc(72svh * var(--kv-arn, 1.3333)));
  aspect-ratio: var(--kv-ar, 4 / 3);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.kv__stage:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
@media (min-width: 1000px) {
  .kv__stage { width: min(100%, calc(66vh * var(--kv-arn, 1.3333))); }
}
.kv__photo,
.kv__gl,
.kv__after,
.kv__after-img,
.kv__film {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.kv__photo, .kv__after-img, .kv__film { object-fit: cover; }
.kv__gl { pointer-events: none; }
.kv__film { z-index: 3; background: var(--ink); }

/* drag target over the building: the only place a touch moves it (the rest of the photo scrolls the page) */
.kv__handle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  touch-action: none;
  cursor: grab;
}
.kv__handle.is-off { pointer-events: none; }
.kv__handle::before,
.kv__handle::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(216, 199, 156, 0.75);
  border-style: solid;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.kv__handle::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.kv__handle::after { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.kv__stage.is-dragging .kv__handle { cursor: grabbing; }
.kv__stage.is-dragging .kv__handle::before,
.kv__stage.is-dragging .kv__handle::after { opacity: 1; }
@media (hover: hover) {
  .kv__handle:hover::before, .kv__handle:hover::after { opacity: 1; }
}
@media (pointer: fine) {
  .kv__stage:not(.is-dragging) { cursor: grab; }
}

.kv__horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--kv-hor);
  z-index: 5;
  height: 0;
  border-top: 1px dashed rgba(216, 199, 156, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.kv__horizon span {
  position: absolute;
  left: 0.6rem;
  top: -1.4rem;
  color: var(--champagne);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.kv__horizon.is-on { opacity: 1; }

.kv__hint {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  z-index: 5;
  max-width: calc(100% - 1.2rem);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.62);
  color: var(--text-strong);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.kv__hint:empty { display: none; }

/* before / after */
.kv__after { z-index: 2; clip-path: inset(0 0 0 var(--kv-split)); }
.kv__knob {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--kv-split);
  z-index: 4;
  width: 1px;
  background: var(--champagne);
  pointer-events: none;
}
.kv__knob::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55) no-repeat center / 18px 10px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M5 1 1 5l4 4M13 1l4 4-4 4' fill='none' stroke='%23d8c79c' stroke-width='1.2'/%3E%3C/svg%3E");
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.kv.is-comparing .kv__stage { cursor: ew-resize; }
.kv__compare {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.kv__compare:focus-visible ~ .kv__knob::after,
.kv__stage:has(.kv__compare:focus-visible) .kv__knob::after { outline: 2px solid var(--champagne); outline-offset: 3px; }
.kv__tags {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.kv__tags span {
  padding: 0.3rem 0.6rem;
  background: rgba(10, 10, 10, 0.55);
  color: var(--text-strong);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.kv__cgi { z-index: 6; }

/* busy: a thin champagne line runs, the words say what is happening */
.kv__busy {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-content: end center;
  gap: 0.9rem;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.1), rgba(10, 10, 10, 0.72));
  text-align: center;
}
.kv__busy-line {
  display: block;
  width: min(14rem, 60vw);
  height: 1px;
  margin-inline: auto;
  overflow: hidden;
  background: rgba(216, 199, 156, 0.25);
}
.kv__busy-line::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: var(--champagne);
  animation: kv-run 1.6s var(--ease-in-out) infinite;
}
.kv__busy-text { color: var(--text-strong); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
@keyframes kv-run {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
.kv.is-busy .kv__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: linear-gradient(100deg, transparent 35%, rgba(227, 206, 146, 0.08) 50%, transparent 65%) 0 0 / 250% 100%;
  animation: kv-sheen 2.4s linear infinite;
  pointer-events: none;
}
@keyframes kv-sheen {
  from { background-position: 150% 0; }
  to { background-position: -100% 0; }
}

/* ---------- 2 · controls ---------- */
.kv__controls { display: grid; gap: 1rem; }
.kv__sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1.25rem; }
@media (min-width: 720px) {
  .kv__sliders { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.kv__ctl { display: grid; min-width: 0; }
.kv__lbl {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kv__val { color: var(--champagne); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.kv__range {
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}
.kv__range:focus { outline: none; }
.kv__range::-webkit-slider-runnable-track { height: 1px; background: var(--line-strong); }
.kv__range::-moz-range-track { height: 1px; background: var(--line-strong); }
.kv__range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.6);
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.25s, transform 0.25s var(--ease-out);
}
.kv__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  background: var(--ink);
}
.kv__range:active::-webkit-slider-thumb { background: var(--champagne); transform: scale(1.1); }
.kv__range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--champagne); outline-offset: 3px; }
.kv__range:focus-visible::-moz-range-thumb { outline: 2px solid var(--champagne); outline-offset: 3px; }

.kv__tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kv__tool {
  min-width: 44px;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text-strong);
  font: 400 0.8125rem/1 var(--sans);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.kv__tool:disabled { color: var(--muted); cursor: default; opacity: 0.55; }
.kv__tool:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
@media (hover: hover) {
  .kv__tool:not(:disabled):hover { border-color: var(--champagne); color: var(--champagne); }
}

/* ---------- 3 · actions ---------- */
.kv__actions { display: grid; gap: 0.75rem; }
.kv__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.kv__design {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}
.kv__design-line { color: var(--text-strong); font-size: 0.9375rem; }
.kv__design-price { color: var(--champagne); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.kv__design-edit { margin-left: auto; font-size: 0.8125rem; }
.kv__note { color: var(--text-dim); font-size: 0.8125rem; line-height: 1.55; }
.kv__make[disabled], .kv button[disabled].btn { opacity: 0.6; pointer-events: none; }
.kv__fallback { padding: 1rem 1.1rem; border: 1px solid var(--line); border-left-color: var(--champagne); background: var(--ink-2); }
.kv__status { min-height: 1.4em; color: var(--text-dim); font-size: 0.875rem; line-height: 1.5; }
.kv__status:empty { min-height: 0; }

/* ---------- 4 · the film: a short lead form ---------- */
.kv__lead { display: grid; gap: 1rem; padding: 1.25rem; border: 1px solid var(--line); background: var(--ink-2); }
.kv__lead-lead { color: var(--text); font-size: 0.9375rem; line-height: 1.6; }
.kv__grid { display: grid; gap: 0.25rem 1.25rem; }
@media (min-width: 640px) {
  .kv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kv__check { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; color: var(--text); font-size: 0.875rem; cursor: pointer; }
.kv__check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--champagne); }
.kv__err { color: var(--error); font-size: 0.875rem; }

@media (prefers-reduced-motion: reduce) {
  .kv__busy-line::after, .kv.is-busy .kv__stage::after { animation: none; }
  .kv__steps li, .kv__drop, .kv__horizon { transition: none; }
}

/* =========================================================================
   "Check your address" — the postcode planning check (js/planning.js), prefix .kpc.
   Lives in this file so one stylesheet carries both trust tools.
   ========================================================================= */
.kpc { display: grid; gap: 1rem; color: var(--text); }
.kpc [hidden] { display: none !important; }
.kpc__form { display: grid; gap: 0.4rem; }
.kpc__bar { display: flex; gap: 0.75rem; align-items: stretch; }
.kpc__input { flex: 1 1 auto; min-width: 0; min-height: 48px; text-transform: uppercase; letter-spacing: 0.08em; }
.kpc__input::placeholder { text-transform: none; letter-spacing: 0.02em; }
.kpc__go { flex: none; }
.kpc__go[disabled] { opacity: 0.6; pointer-events: none; }
.kpc__help { color: var(--muted); font-size: 0.8125rem; }
.kpc__out { display: grid; gap: 0.9rem; }
.kpc__out:empty { display: none; }
.kpc__wait { color: var(--text-dim); font-size: 0.9375rem; }
.kpc__where { color: var(--champagne); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
.kpc__points { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.kpc__point {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  background: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  animation: kpc-in 0.7s var(--ease-out) both;
}
.kpc__point:nth-child(2) { animation-delay: 0.06s; }
.kpc__point:nth-child(3) { animation-delay: 0.12s; }
.kpc__point:nth-child(n + 4) { animation-delay: 0.18s; }
.kpc__dot { width: 0.5rem; height: 0.5rem; margin-top: 0.55rem; border-radius: 50%; background: var(--champagne); }
.kpc__point.is-clear .kpc__dot { background: var(--water); }
.kpc__point-title { color: var(--text-strong); font-weight: 500; }
.kpc__mine { display: grid; gap: 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-size: 0.9375rem; line-height: 1.6; }
.kpc__h { color: var(--text-strong); }
.kpc__rules { display: grid; gap: 0.35rem; margin: 0; padding-left: 1.1rem; color: var(--text); }
.kpc__rules li::marker { color: var(--champagne); }
.kpc__small { color: var(--text-dim); font-size: 0.8125rem; }
.kpc__source { color: var(--muted); font-size: 0.75rem; }
.kpc__confirm { color: var(--champagne); font-size: 0.9375rem; }
.kpc__err { color: var(--error); font-size: 0.9375rem; }
@keyframes kpc-in {
  from { opacity: 0; transform: translate3d(0, 0.5rem, 0); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kpc__point { animation: none; }
}
.kv:not([data-state="place"]) .kv__horizon { display: none; }

/* Round 4 fix (judge 26.09): Turn and Size up front; camera height and horizon behind "Fine-tune". */
.kv__controls > .kv__sliders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kv__fine { grid-column: 1 / -1; margin-top: 0.25rem; border-top: 1px solid var(--line, rgba(216, 199, 156, 0.26)); }
.kv__fine-sum {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  color: var(--muted, #8a8a86);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kv__fine-sum::-webkit-details-marker { display: none; }
.kv__fine-sum::after { content: "+"; margin-left: auto; color: var(--champagne, #d8c79c); font-size: 1rem; letter-spacing: 0; }
.kv__fine[open] > .kv__fine-sum::after { content: "–"; }
.kv__fine-sum:focus-visible { outline: 2px solid var(--champagne, #d8c79c); outline-offset: 3px; }
@media (hover: hover) { .kv__fine-sum:hover { color: var(--paper, #f4f1ea); } }
.kv__fine > .kv__sliders { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 0.5rem; }