/* Build Your Own Deck — the step-by-step designer. Uses the site's own colours, type and buttons. */

.builder { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.builder h2 { max-width: 22ch; }
#build, #dbTop { scroll-margin-top: 84px; }
.db { margin-top: 40px; }
.db[hidden], .db-result[hidden], .db-design[hidden] { display: none; }
.db-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Progress pills */
.db-progress { list-style: none; padding: 0; margin: 0 0 22px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.db-progress::-webkit-scrollbar { display: none; }
.db-progress button {
  font: inherit; font-size: .84rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--muted);
}
.db-progress button span {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-alt); color: var(--ink); font-size: .78rem;
}
.db-progress button.done span { background: var(--koa-soft); color: #1a120b; }
.db-progress button[aria-current="step"] { border-color: var(--koa); color: var(--ink); background: var(--surface); }
.db-progress button[aria-current="step"] span { background: var(--koa); color: #fff; }

/* Layout: options on the left, live preview on the right (on top on phones) */
.db-grid { display: grid; gap: 24px; }
.db-preview { order: -1; }
@media (min-width: 960px) {
  .db-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: start; }
  .db-preview { order: 0; position: sticky; top: 92px; }
}
@media (max-width: 959px) {
  .db-preview { position: sticky; top: 76px; z-index: 5; }
  .db-preview .db-canvas { height: min(34vh, 260px); }
  .db-preview.collapsed .db-canvas, .db-preview.collapsed .db-facts, .db-preview.collapsed .db-caption { display: none; }
}

.db-step { outline: none; }
.db-step h3 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: 6px; }
.db-step-intro { color: var(--muted); margin-bottom: 20px; max-width: 56ch; }
.db-group { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.db-group > legend { font-weight: 600; font-size: 1rem; padding: 0; margin-bottom: 4px; }
.db-group > .db-help { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }

/* Option tiles: picture + plain-English explanation */
.db-options { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.db-options.compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.db-opt { position: relative; display: block; cursor: pointer; }
.db-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.db-opt-inner {
  display: grid; height: 100%; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--bg); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.db-opt:hover .db-opt-inner { border-color: var(--koa-soft); }
.db-opt input:checked + .db-opt-inner { border-color: var(--koa); box-shadow: 0 0 0 2px var(--koa) inset, 0 14px 30px -20px rgba(168, 98, 46, .9); }
.db-opt input:focus-visible + .db-opt-inner { outline: 3px solid var(--koa-soft); outline-offset: 3px; }
.db-opt input:disabled + .db-opt-inner { opacity: .45; cursor: not-allowed; }
.db-opt-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-alt); display: grid; place-items: center; overflow: hidden; }
.db-opt-media svg { width: 100%; height: 100%; display: block; }
.db-opt-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.db-opt-media .db-photo-tag {
  position: absolute; left: 8px; bottom: 8px; font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  background: rgba(10, 22, 22, .7); color: #f6f1e8; padding: 3px 7px; border-radius: 6px;
}
.db-opt-body { padding: 12px 14px 14px; display: grid; gap: 4px; align-content: start; }
.db-opt-body strong { font-size: .98rem; }
.db-opt-body .db-desc { font-size: .86rem; color: var(--muted); line-height: 1.45; }
.db-opt-body .db-why { font-size: .84rem; color: var(--ink); line-height: 1.4; }
.db-opt-body .db-why b { color: var(--koa); font-weight: 600; }
.db-check {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--koa); color: #fff; display: none; place-items: center; z-index: 2;
}
.db-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.db-opt input:checked ~ .db-check { display: grid; }

/* Colour swatches */
.db-swatch .db-opt-media { aspect-ratio: 3 / 2; }

/* Sliders */
.db-range { display: grid; gap: 8px; margin-bottom: 18px; }
.db-range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.db-range-head label { font-size: .95rem; }
.db-range-head output { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--koa); white-space: nowrap; }
.db-range input[type="range"] { padding: 0; border: 0; background: transparent; accent-color: var(--koa); height: 32px; }
.db-range .db-help { color: var(--muted); font-size: .86rem; margin: 0; }
.db-sub { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 2px; margin-bottom: 22px; }
.db-sub-title { font-weight: 600; margin: 0 0 10px; }

/* Checkbox rows */
.db-checks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.db-checkrow {
  display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--bg); cursor: pointer; font-weight: 500; font-size: .92rem;
}
.db-checkrow input { width: 20px; height: 20px; accent-color: var(--koa); flex: none; margin: 0; padding: 0; }
.db-checkrow:has(input:checked) { border-color: var(--koa); }
.db-checkrow:has(input:disabled) { opacity: .5; cursor: not-allowed; }

.db-note {
  font-size: .88rem; border-radius: 12px; padding: 12px 14px; margin: 0 0 18px;
  background: rgba(217, 160, 102, .16); border: 1px solid rgba(168, 98, 46, .35); color: var(--ink);
}
.db-note.info { background: var(--bg); border-color: var(--line); color: var(--muted); }

/* Back / next */
.db-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.db-nav .db-count { font-size: .85rem; color: var(--muted); }
.db-nav .btn[disabled] { opacity: .4; pointer-events: none; }
.db-nav .btn { padding: 14px 22px; }

/* Preview */
.db-preview { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); }
.db-tabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.db-tabs [role="tab"], .db-tool {
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; padding: 8px 12px; border-radius: 8px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--muted);
}
.db-tabs [role="tab"][aria-selected="true"] { border-color: var(--koa); color: var(--ink); background: var(--bg-alt); }
.db-tool { margin-left: auto; }
.db-tool + .db-tool { margin-left: 0; }
.db-collapse { display: none; }
@media (max-width: 959px) { .db-collapse { display: inline-block; } }
.db-canvas { position: relative; height: clamp(300px, 46vh, 460px); background: var(--surface); border-radius: 12px; overflow: hidden; }
.db-canvas svg { width: 100%; height: 100%; display: block; }
.db-caption { font-size: .78rem; color: var(--muted); margin: 8px 2px 0; }
.db-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.db-facts span { font-size: .78rem; font-weight: 600; background: var(--bg-alt); border-radius: 999px; padding: 5px 10px; color: var(--ink); }
.db-warn { font-size: .82rem; color: #a3341f; margin: 8px 2px 0; font-weight: 600; }
@media (prefers-color-scheme: dark) { .db-warn { color: #f2a08e; } }

/* SVG drawing classes (shared by plan, 3D and option pictures) */
.dbs-ink { stroke: var(--ink); }
.dbs-muted { fill: var(--muted); }
.dbs-text { fill: var(--ink); font-family: var(--sans); font-weight: 600; }
.dbs-dim { stroke: var(--muted); stroke-width: 1; fill: none; }
.dbs-dimtext { fill: var(--muted); font-family: var(--sans); font-weight: 600; }
.dbs-house { fill: var(--bg-alt); stroke: var(--muted); }
.dbs-ground { fill: var(--bg-alt); }
.dbs-koa { fill: var(--koa); }
.dbs-koa-s { stroke: var(--koa); fill: none; }
.dbs-soft { fill: var(--koa-soft); }
.dbs-ocean { fill: var(--ocean-2); }
.dbs-line { stroke: var(--line); fill: none; }
.dbs-bg { fill: var(--surface); }

/* Results: Your Custom Deck */
.db-result-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.db-result-head h3 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0; }
.db-result-head p { color: var(--muted); margin: 6px 0 0; max-width: 56ch; }
.db-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.db-actions .btn { padding: 12px 18px; }
.db-views { display: grid; gap: 16px; }
@media (min-width: 860px) { .db-views { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; } .db-views .db-view-main { grid-row: span 2; } }
.db-view { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin: 0; }
.db-view svg { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; background: var(--surface); }
.db-view-main svg { aspect-ratio: auto; height: 100%; min-height: 320px; }
.db-view-main { display: grid; grid-template-rows: 1fr auto; }
.db-view figcaption { font-size: .82rem; color: var(--muted); padding: 10px 14px; border-top: 1px solid var(--line); }
.db-summary-wrap { display: grid; gap: 28px; margin-top: 32px; }
@media (min-width: 900px) { .db-summary-wrap { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } }
.db-summary { margin: 0; display: grid; gap: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.db-summary > div { display: grid; grid-template-columns: 9.5em 1fr auto; gap: 12px; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.db-summary > div:last-child { border-bottom: 0; }
.db-summary dt { font-weight: 600; font-size: .88rem; color: var(--muted); }
.db-summary dd { margin: 0; font-size: .95rem; }
.db-summary button { font: inherit; font-size: .82rem; font-weight: 600; color: var(--koa); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
@media (prefers-color-scheme: dark) { .db-summary button { color: var(--koa-soft); } }
@media (max-width: 520px) { .db-summary > div { grid-template-columns: 1fr auto; } .db-summary dd { grid-column: 1 / -1; grid-row: 2; } }
.db-disclaimer { font-size: .85rem; color: var(--muted); margin-top: 12px; }

/* Quote form inside the results */
.db-quote { background: linear-gradient(160deg, var(--ocean) 0%, var(--ocean-2) 100%); color: var(--on-dark); border-radius: 22px; padding: clamp(20px, 4vw, 32px); }
.db-quote h4 { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 6px; }
.db-quote > p { opacity: .88; margin-bottom: 18px; }
.db-quote .quote-form { box-shadow: none; }
.db-two { display: grid; gap: 16px; }
@media (min-width: 560px) { .db-two { grid-template-columns: 1fr 1fr; } }
.db-req { color: var(--koa); }
.db-err { color: #b3361f; font-size: .84rem; margin: 0; }
.db-err:empty { display: none; }
@media (prefers-color-scheme: dark) { .db-err { color: #f2a08e; } }
.db-file {
  display: grid; place-items: center; gap: 4px; text-align: center; padding: 18px; border: 1.5px dashed var(--line);
  border-radius: 12px; background: var(--bg); cursor: pointer; font-weight: 500; color: var(--muted); font-size: .9rem;
}
.db-file:hover { border-color: var(--koa-soft); }
.db-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.db-file:focus-within { outline: 3px solid var(--koa-soft); outline-offset: 3px; }
.db-file strong { color: var(--ink); }
.db-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.db-thumbs:empty { display: none; }
.db-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg-alt); margin: 0; }
.db-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-thumb button {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(10, 22, 22, .75); color: #fff; font-size: 16px; line-height: 1; display: grid; place-items: center;
}
.db-sent { display: grid; gap: 12px; }
.db-sent[hidden] { display: none; }
.db-sent .send-buttons { grid-template-columns: 1fr; }
@media (min-width: 520px) { .db-sent .send-buttons.three { grid-template-columns: 1fr 1fr; } .db-sent .send-buttons.three .btn:first-child { grid-column: 1 / -1; } }
.db-sent .send-preview { max-height: 260px; overflow: auto; }
.db-fallback { font-size: .88rem; color: var(--muted); margin: 0; }
.db-fallback a { color: inherit; font-weight: 600; }

.db-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.db-h4 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 12px; }
.db .label-like { display: block; font-size: .9rem; margin-bottom: 6px; }
.db .btn[hidden], .db .db-note[hidden], .db .db-fallback[hidden] { display: none; }

.db-hero-link { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .db-opt-inner { transition: none; } }