/* Vision board maker — loaded only on /vision-board-maker/. Uses the site tokens from site.css. */
.vbm { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .vbm { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); } }

.vbm-board { position: sticky; top: 5.5rem; display: grid; gap: .9rem; }
@media (max-width: 899px) { .vbm-board { position: static; } }
/* No backdrop of its own: the canvas is the card. */
.vbm-stage { display: flex; justify-content: center; align-items: flex-start; min-height: 320px; }
#vbm-canvas { display: block; border-radius: var(--r-md); box-shadow: var(--shadow-3); touch-action: none; cursor: pointer; max-width: 100%; }
.vbm-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.vbm-actions .btn { min-height: 44px; }
.vbm-hint { font-size: .8125rem; color: var(--ink-muted); text-align: center; margin: 0; }

.vbm-panel { display: grid; gap: 1rem; }
.vbm-group {
  background: var(--glass-2); border: 1px solid rgba(255,255,255,.85); border-radius: var(--r-lg);
  padding: 1rem 1.1rem; box-shadow: var(--shadow-1);
}
.vbm-group h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-variant); margin: 0 0 .7rem; }
.vbm-row { display: flex; flex-wrap: wrap; gap: .45rem; }

.vbm-chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; min-height: 40px;
  border-radius: 999px; border: 1px solid var(--outline-variant); background: var(--surface-lowest);
  font: 500 .875rem/1.1 'Plus Jakarta Sans', sans-serif; color: var(--ink-strong); cursor: pointer;
}
.vbm-chip small { color: var(--ink-muted); font-size: .72rem; font-weight: 500; }
.vbm-chip--sm { min-height: 34px; padding: .35rem .7rem; font-size: .8125rem; }
.vbm-chip.is-on { border-color: var(--primary); background: var(--primary-fixed); color: var(--on-primary-fixed-variant); }
.vbm-chip:focus-visible, .vbm-layout:focus-visible, .vbm-thumb:focus-visible, .vbm-swatch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.vbm-shape { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; }
.vbm-shape--portrait { width: 9px; height: 15px; }
.vbm-shape--landscape { width: 15px; height: 10px; }
.vbm-shape--square { width: 12px; height: 12px; }

.vbm-layouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.vbm-layout {
  display: grid; gap: .35rem; justify-items: center; padding: .5rem .3rem; border-radius: var(--r-md);
  border: 1px solid transparent; background: var(--surface-lowest); cursor: pointer;
  font: 500 .72rem/1.2 'Plus Jakarta Sans', sans-serif; color: var(--ink-variant);
}
.vbm-layout.is-on { border-color: var(--primary); background: var(--primary-fixed); }
.vbm-mini { position: relative; display: block; background: var(--surface-container); border-radius: 3px; }
.vbm-mini--portrait { width: 30px; height: 50px; }
.vbm-mini--landscape { width: 52px; height: 34px; }
.vbm-mini--square { width: 40px; height: 40px; }
.vbm-mini i { position: absolute; box-sizing: border-box; border: 1.5px solid var(--surface-lowest); background: var(--primary-fixed-dim); border-radius: 2px; }

.vbm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; max-height: 420px; overflow-y: auto; padding-right: .2rem; }
@media (min-width: 560px) and (max-width: 899px) { .vbm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vbm-thumb { padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; cursor: pointer; background: var(--surface-container); aspect-ratio: 1; }
.vbm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.vbm-thumb:hover img { transform: scale(1.04); }

.vbm-upload { position: relative; display: inline-flex; }
.vbm-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.vbm-swatch { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--outline-variant); cursor: pointer; }
.vbm-swatch.is-on { box-shadow: 0 0 0 2px var(--surface-lowest), 0 0 0 4px var(--primary); }

.vbm-field { display: grid; gap: .35rem; font-size: .875rem; color: var(--ink-variant); }
.vbm-field input[type=text] {
  min-height: 44px; padding: .55rem .8rem; border-radius: var(--r-md); border: 1px solid var(--outline-variant);
  font: 400 1rem 'Plus Jakarta Sans', sans-serif; background: var(--surface-lowest); color: var(--ink);
}
.vbm-field input[type=range] { width: 100%; accent-color: var(--primary); }
.vbm-check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--ink-variant); min-height: 32px; }
.vbm-check input { accent-color: var(--primary); width: 18px; height: 18px; }
.vbm-small-btn {
  min-height: 36px; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--outline-variant);
  background: transparent; font: 500 .8125rem 'Plus Jakarta Sans', sans-serif; color: var(--ink-variant); cursor: pointer;
}
.vbm-small-btn:disabled { opacity: .45; cursor: default; }

.vbm-next {
  margin-top: 1.5rem; padding: 1.5rem; border-radius: var(--r-xl); text-align: center;
  background: linear-gradient(135deg, var(--primary-fixed), var(--orchid)); box-shadow: var(--shadow-2);
}
.vbm-next h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.vbm-next ol { text-align: left; max-width: 520px; margin: 1rem auto; color: var(--ink-variant); }

.vbm-label { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; color: var(--ink-strong); }
.vbm-label span { font-weight: 400; color: var(--ink-muted); }

.vbm-canvas-wrap { position: relative; }
.vbm-overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
.vbm-cellbtn {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto;
  display: inline-flex; align-items: center; gap: .3rem; min-height: 30px; padding: .3rem .65rem;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--on-primary-fixed-variant);
  font: 600 .75rem/1 'Plus Jakarta Sans', sans-serif; box-shadow: 0 2px 10px rgba(28,27,32,.18); cursor: pointer;
  white-space: nowrap;
}
/* Empty spaces always show Upload; a filled space shows Replace only while it's selected. */
.vbm-cellbtn.is-filled:not(.is-sel) { display: none; }
.vbm-cellbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.vbm-sub { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--surface-high); }
.vbm-tstyles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.vbm-tstyle {
  display: grid; justify-items: center; gap: .3rem; padding: .55rem .3rem; border-radius: var(--r-md);
  border: 1px solid var(--outline-variant); background: var(--surface-lowest); cursor: pointer;
  font: 500 .75rem/1.1 'Plus Jakarta Sans', sans-serif; color: var(--ink-variant);
}
.vbm-tstyle span { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 6px;
  font: italic 600 1.05rem/1 'Playfair Display', Georgia, serif; background: linear-gradient(135deg, #e9cfa9, #a98bb0); color: #fff; }
.vbm-tstyle--card span { color: #2b2a2f; background: linear-gradient(rgba(252,248,255,.92), rgba(252,248,255,.92)) center / 40px 22px no-repeat, linear-gradient(135deg, #e9cfa9, #a98bb0); }
.vbm-tstyle--outline span { -webkit-text-stroke: 3px #1c1b20; paint-order: stroke fill; }
.vbm-tstyle--shadow span { text-shadow: 0 2px 5px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.5); }
.vbm-tstyle.is-on { border-color: var(--primary); background: var(--primary-fixed); color: var(--on-primary-fixed-variant); }
.vbm-tstyle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.vbm-font--elegant { font-family: 'Playfair Display', Georgia, serif; font-style: italic; }
.vbm-font--classic { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; }
.vbm-font--modern { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .72rem; }
.vbm-colors { display: grid; gap: .5rem; }
.vbm-colorrow { display: flex; align-items: center; gap: .6rem; }
.vbm-colorrow[hidden] { display: none; }
.vbm-colorname { min-width: 6.5rem; font-size: .875rem; color: var(--ink-variant); }


.vbm-mini--blank { display: grid; place-items: center; border: 1.5px dashed var(--primary-fixed-dim); background: var(--surface-lowest); }
.vbm-mini--blank b { font: 500 1rem/1 'Plus Jakarta Sans', sans-serif; color: var(--primary); }
.vbm-customsize { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.vbm-customsize[hidden] { display: none; }
.vbm-customsize label { display: grid; gap: .25rem; font-size: .8125rem; color: var(--ink-variant); }
.vbm-customsize input { width: 6.5rem; min-height: 40px; padding: .35rem .6rem; border-radius: var(--r-md); border: 1px solid var(--outline-variant);
  font: 500 .9375rem 'Plus Jakarta Sans', sans-serif; background: var(--surface-lowest); color: var(--ink); }
.vbm-customsize input.is-bad { border-color: #c4314b; }
.vbm-customsize > span { padding-bottom: .6rem; color: var(--ink-muted); }
.vbm-msg { flex-basis: 100%; margin: 0; font-size: .8125rem; color: #c4314b; min-height: 0; }
.vbm-msg:empty { display: none; }

.vbm-check[hidden] { display: none; }

/* Colour picker */
.vbm-swatches { align-items: center; }
.vbm-swatchlist { display: contents; }
.vbm-cp { position: relative; flex: none; }
.vbm-cp-btn { width: 34px; height: 34px; border-radius: 50%; padding: 2px; border: 0; cursor: pointer;
  background: conic-gradient(#ff6b6b, #ffd93d, #6bcb77, #4d96ff, #b06bff, #ff6b6b); }
.vbm-cp-btn span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--surface-lowest); }
.vbm-cp-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.vbm-cp-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 236px; padding: .75rem;
  display: grid; gap: .6rem; background: var(--surface-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
.vbm-cp-pop[hidden] { display: none; }
.vbm-cp-sv { position: relative; height: 140px; border-radius: var(--r-sm); cursor: crosshair; touch-action: none; }
.vbm-cp-sv i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }
.vbm-cp-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 6px; margin: 0;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.vbm-cp-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-strong); cursor: pointer; }
.vbm-cp-hue::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-strong); cursor: pointer; }
.vbm-cp-hex { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font: 600 .75rem 'Plus Jakarta Sans', sans-serif; color: var(--ink-variant); }
.vbm-cp-hex input { width: 9rem; min-height: 32px; padding: .25rem .5rem; border-radius: var(--r-sm); border: 1px solid var(--outline-variant);
  font: 500 .875rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; color: var(--ink); background: var(--surface-lowest); }
.vbm-cp-hex input.is-bad { border-color: #c4314b; }
.vbm-cp-rgb { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.vbm-cp-rgb label { display: grid; gap: .2rem; justify-items: center; font: 600 .72rem 'Plus Jakarta Sans', sans-serif; color: var(--ink-variant); }
.vbm-cp-rgb input { width: 100%; min-height: 32px; padding: .25rem .3rem; text-align: center; border-radius: var(--r-sm); border: 1px solid var(--outline-variant);
  font: 500 .8125rem 'Plus Jakarta Sans', sans-serif; color: var(--ink); background: var(--surface-lowest); -moz-appearance: textfield; }
.vbm-cp-rgb input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vbm-colorrow .vbm-cp-pop { left: auto; }

/* Remove buttons on the board */
.vbm-rm { position: absolute; transform: translate(calc(-100% - 6px), 6px); pointer-events: auto;
  width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(17,16,20,.62); color: #fff; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.vbm-rm:hover { background: rgba(17,16,20,.82); }
.vbm-rm:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.vbm-swatch--sm { width: 28px; height: 28px; }
.vbm-colorrow { align-items: flex-start; }
.vbm-colorrow .vbm-colorname { padding-top: .3rem; }
.vbm-colorrow .vbm-swatches { gap: .4rem; }
.vbm-colorrow .vbm-cp-btn { width: 28px; height: 28px; }
.vbm-colorrow .vbm-cp-pop { left: auto; right: 0; }
/* The tool sits right under the heading: no CTA, tight spacing. */
/* The hero sits under the breadcrumb (which overlaps it by --crumb-h), so the top padding is crumb + gap. */
.band.band--hero-page.vbm-hero { padding-top: calc(var(--crumb-h) + clamp(1.75rem, 1rem + 2vw, 2.75rem)); padding-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.vbm-hero h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.vbm-hero .lede { margin-top: .5rem; }
.band.vbm-band { padding-top: 0; }

/* Custom-colour button: a full rainbow disc, so it never reads as another preset. */
.vbm-cp-btn { padding: 0; background: none; box-shadow: 0 0 0 1px rgba(28,27,32,.12); }
.vbm-cp-btn span { border: 0; background: conic-gradient(from 0deg, #ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #5856d6, #af52de, #ff2d55, #ff3b30); }
.vbm-cp-btn.is-on { box-shadow: 0 0 0 2px var(--surface-lowest), 0 0 0 4px var(--primary); }

.vbm-apply { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid var(--primary); background: var(--primary); color: #fff; cursor: pointer; }
.vbm-apply:hover { background: var(--on-primary-fixed-variant); }
.vbm-apply.is-saved { background: var(--primary-fixed); color: var(--on-primary-fixed-variant); border-color: var(--primary-fixed-dim); cursor: default; }
.vbm-apply:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.vbm-customsize > .vbm-apply { align-self: flex-end; }

.vbm-applink { margin: .25rem 0 0; text-align: center; font-size: .875rem; color: var(--ink-variant); }
.vbm-applink a { color: var(--primary); font-weight: 600; }