/* ======================= Custom Party (page-scoped) ======================= */
/* Uses your site tokens: --surface, --card, --card-2, --ring, --shadow-1/2,
   --r-sm/md/lg, --aqua, --muted, etc. No token re-definitions here.       */

main.snap { scroll-snap-type: y proximity; }
.snap-section { scroll-snap-align: start; }

/* Wizard container: evenly spaced sections */
.wizard{
  display: block;                  /* continuous page layout */
  width:min(900px, 100%);
  margin: 0 auto;
  padding: 0 24px 8px;
}
.wizard > *{ margin: 0 !important; }

/* Question cards */
.chapter{
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--surface) 92%, black 8%);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-1);
  overflow: hidden;                /* clip inputs/counters to rounded edge */
}
.chapter h1{ margin:.15rem 0 .35rem; }
.chapter h2{ margin:.15rem 0 .35rem; }
.lead{ color: var(--muted); margin:.25rem 0 .75rem; }

/* Fields always fit container */
.chapter .field input,
.chapter .field select,
.chapter .field textarea,
.modal-card .field input,
.modal-card .field select,
.modal-card .field textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Field layout (forms already styled globally) */
.fields{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 800px){
  .fields{ grid-template-columns: 1fr; }
}

/* LEGO hint block */
.lego-addon{
  background: color-mix(in srgb, var(--aqua) 12%, white);
  border: 1px solid color-mix(in srgb, var(--aqua) 28%, white);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.lego-label{ font-weight:700; }
.hint.small{ font-size:.925rem; color: var(--muted); margin:.25rem 0 0; }

/* Review card */
.review-wrap{ width:min(960px,100%); margin: 10px auto; }
.plan-card{
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--card) 80%, black 8%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 16px;
  width:min(780px, 100%);
  margin-inline:auto;
}

/* Plan body (final structure + look) */
.plan-body{
  display:flex; flex-direction:column; gap:6px;
  text-align:center;
  white-space: normal;
  background: var(--card-2);
  border: 1px solid color-mix(in srgb, var(--card-2) 85%, #000 15%);
  padding: 12px;
  font-size:.985rem;
}

/* Clickable lines */
.preview-line{
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}
.preview-line:focus{ outline: none; box-shadow: var(--ring); }
.preview-line:hover,
.preview-line:focus{
  background: color-mix(in srgb, #000 7%, var(--card-2));
}
.preview-line:active{ transform: scale(0.997); }

.plan-actions{ display:flex; gap:.6rem; margin:.8rem 0; }
.edit-hint{ color: var(--muted); font-size:.95rem; }
.review-page .review-wrap{ justify-items:center; }

/* Spacer & back-to-top */
.bottom-spacer{ height:48px; }
.to-top{
  position:fixed; right:16px; bottom:16px;
  width:42px; height:42px; display:grid; place-items:center;
  text-decoration:none; color:#001225;
  background: var(--surface);
  border:1px solid color-mix(in srgb, var(--surface) 80%, black 14%);
  border-radius:999px;
  box-shadow: var(--shadow-1);
}

/* ======================= Modal ======================= */
.modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition: opacity .2s ease;
  padding: 18px; z-index: 1000;
}
.modal.is-open{ opacity:1; pointer-events:auto; }

.modal-card{
  width:min(760px,100%);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--surface) 82%, black 12%);
  border-radius: 18px;
  box-shadow: var(--shadow-2);
  padding: 18px 18px 14px;
  position: relative;
  overflow:hidden;                 /* clip fields inside */
}
.modal-intro{ margin:.25rem 0 .8rem; color: var(--muted); }

.modal-close{
  position:absolute; top:.6rem; right:.6rem;
  text-decoration:none; color:inherit;
  background: color-mix(in srgb, var(--cloud) 60%, white);
  border:1px solid color-mix(in srgb, var(--surface) 70%, black 18%);
  border-radius: 999px;
  padding: .25rem .5rem; line-height:1;
}

/* Form bits inside modal */
.form-status{ min-height:1.2rem; color: crimson; font-weight:700; margin-bottom:.25rem; }
.success-screen{ text-align:center; }
.success-screen h3{ margin-top:0; }

/* Highlight current card (visual focus aid) */
.chapter.current{
  outline: 2px dashed color-mix(in srgb, var(--aqua) 70%, white);
  outline-offset: 2px;
}

/* === Modal form grid & actions (latest copy only) === */
#enquiryModal .fields{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 820px){
  #enquiryModal .fields{ grid-template-columns: 1fr; }
}
#enquiryModal .fields .field[style*="grid-column:1/-1"]{ grid-column:1 / -1; }
#enquiryModal .form-actions{ display:flex; justify-content:flex-start; gap:10px; }

/* Hide the honeypot cleanly + generic hidden */
#enquiryModal .hp{
  position:absolute !important;
  left:-9999px !important;
  width:0 !important; height:0 !important;
  opacity:0 !important; pointer-events:none !important;
  border:0 !important; padding:0 !important; margin:0 !important;
}
#enquiryModal [hidden]{ display:none !important; }

/* Keep the plan area present even before JS fills it (single copy) */
#planBody{ min-height: 140px; }

/* ===== Blush off-white panel (leave for chapter/card only) ===== */
:root{ --panel-blush: #fdf4f4; }
.wizard .chapter,
.plan-card{
  background: var(--panel-blush);
  border: 1px solid color-mix(in srgb, var(--panel-blush) 82%, #000 18%);
}

/* Dark theme counterparts */
[data-theme="dark"] .plan-body{
  background: var(--card-2);
  border: 1px solid color-mix(in srgb, var(--card-2) 70%, #fff 30%);
}
[data-theme="dark"] .plan-body .preview-line:hover,
[data-theme="dark"] .plan-body .preview-line:focus{
  background: color-mix(in srgb, #fff 10%, transparent);
}
[data-theme="dark"] .wizard .chapter,
[data-theme="dark"] .plan-card{
  background: color-mix(in srgb, var(--surface) 90%, #fff 10%);
  border: 1px solid color-mix(in srgb, var(--surface) 76%, #fff 24%);
}

/* --- Textarea with inline counter --- */
.textarea-wrapper { position: relative; width: 100%; }
.textarea-wrapper textarea {
  width: 100%;
  box-sizing: border-box;
  display: block;
  min-height: 120px;
  padding: 12px 44px 30px 12px;
  border-radius: 12px;
}
.char-counter {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 0.85rem;
  color: inherit;
  transition: color 0.2s;
  pointer-events: none;
}
.char-counter.warn   { color: rgb(248, 168, 18); }
.char-counter.danger { color: red; }

/* === Restore continuous page layout (ignore page wrappers) === */
.wizard > section,
.wizard .snap-section{
  padding:0 !important;
  margin:0 !important;
  background:transparent;
  border:0;
}
.wizard > .snap-section:has(> .chapter){ display:block; } /* keep DOM, no extra spacing */

/* Card spacing source of truth */
.wizard .chapter{ margin:12px 0 !important; }
@media (max-width:800px){
  .wizard .chapter{ margin:10px 0 !important; }
}

/* ======================= Characters / Options grid ======================= */
.options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem 1rem; /* row-gap, column-gap */
}
@media (max-width: 900px) {
  .options { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .options { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .options { grid-template-columns: 1fr; }
}
.options label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap; /* keeps names like "Ash Ketchum" together */
}

/* ======================= iOS Safari fix for character checkboxes ======================= */
/* Force native controls in this section so there’s no double-rendering */
#q-character .options input[type="checkbox"]{
  -webkit-appearance: checkbox;   /* iOS Safari */
  appearance: auto;
  accent-color: var(--aqua);      /* brand tint */
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  transform: none;
  background: initial;
  border: initial;
  box-shadow: none;
  position: static;
}

/* Some global styles may add fake boxes via pseudos — cancel them here */
#q-character .options input[type="checkbox"]::before,
#q-character .options input[type="checkbox"]::after{
  content: none !important;
}

/* Make the whole label a comfy tap target in the character list */
#q-character .options label{
  padding:.5rem .6rem;
  border-radius:.6rem;
}