/* =========================================================================== * builder-opt.css — "optimized builder" prototype (gated by .builder-opt) * Inert unless builder-opt-gate.js adds `.builder-opt` to . Scoped under * that class + layered over builder-v2.css, so gate-off = current builder. * * Suggestion #2 — progressive disclosure: the "More options" toggle the JS * injects, and the collapsible group it reveals. * =========================================================================== */ html.builder-opt .bv2-more-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; padding: 0.4rem 0.55rem; background: transparent; border: none; border-radius: 8px; color: var(--bv2-muted); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: color 0.15s var(--bv2-ease), background 0.15s var(--bv2-ease); } html.builder-opt .bv2-more-toggle:hover { color: var(--bv2-onyx); background: rgba(0, 0, 0, 0.03); } html.builder-opt .bv2-more-caret { font-size: 0.78rem; transition: transform 0.2s var(--bv2-ease); } html.builder-opt .bv2-more-toggle.is-open .bv2-more-caret { transform: rotate(180deg); } html.builder-opt .bv2-more-wrap { margin-top: 0.5rem; padding-top: 0.85rem; border-top: 1px solid var(--bv2-line-soft); } /* --- Consistent, clean containers --------------------------------------- */ /* Flatten the cream sub-group boxes AND the bordered feature cards so a module * reads as one calm surface instead of boxes-inside-boxes. Grouping comes from * headers + spacing, not nested colored panels. Tint is RESERVED for state: an * enabled toggle gets a subtle fill, so color now means "on" (not decoration). * v2 sets these without !important + we load after it, so equal-specificity * rules win on source order (hover needs !important to beat builder.css's * `.field-item:hover { border-color: ... !important }`). */ html.builder-opt .builder-sub-group { background: transparent; border: none; border-radius: 0; padding: 0; } html.builder-opt .field-item { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0.55rem 0; margin-bottom: 0.25rem; transition: background 0.15s var(--bv2-ease), padding 0.15s var(--bv2-ease); } html.builder-opt .field-item:hover { background: transparent; border-color: transparent !important; transform: none; box-shadow: none; } /* Tint = state: an ENABLED feature gets a subtle fill so color means "on". */ html.builder-opt .field-item:has(.field-item-header .form-check-input:checked) { background: var(--bv2-gold-pale); border-radius: var(--bv2-radius-sm); padding: 0.7rem 0.85rem; } /* --- Add a question (Form Fields) --------------------------------------- */ /* Un-added question cards (toggle off) are hidden; the grid below offers them. * A visible card = an added question, so presence is the signal — no gold "on" * tint here, and the category headers are dropped (the grid replaces them). */ html.builder-opt #fieldOptionsSection .field-item:not(:has(.field-item-header .form-check-input:checked)) { display: none; } html.builder-opt #fieldOptionsSection .field-item:has(.field-item-header .form-check-input:checked) { background: transparent; padding: 0.55rem 0; } html.builder-opt #fieldOptionsSection .builder-sub-group-header { display: none; } html.builder-opt .bv2-addq-label { display: flex; align-items: center; gap: 0.4rem; /* Vertically centered: equal gap above (the section's 24px body padding) and * below (this margin; it collapses with the grid's top margin, so it must * reach 24px on its own) so the header sits exactly between the top border and * the question tiles (task #81). */ margin-top: 0; margin-bottom: 1.5rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; /* Brand brown-ish gold so the header matches the section's gold icon and the * overall layout accent, instead of near-black onyx (task #81). */ color: var(--bv2-gold, #BC9B5D); } html.builder-opt .bv2-addq-label i { color: var(--bv2-gold); } /* Symmetrical, always-visible grid of equal-size question tiles. * grid-auto-rows: 1fr equalizes row heights so a 1-line tile matches a * 2-line one (the labels wrap), keeping every tile the same height. */ html.builder-opt .bv2-addq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); grid-auto-rows: 1fr; gap: 0.6rem; margin: 0.6rem 0 0.25rem; } html.builder-opt .bv2-addq-tile { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.85rem; background: var(--bv2-card); border: 1px solid var(--bv2-line); border-radius: var(--bv2-radius-sm); color: var(--bv2-charcoal); font-size: 0.88rem; font-weight: 500; text-align: start; cursor: pointer; transition: border-color 0.15s var(--bv2-ease), background 0.15s var(--bv2-ease), color 0.15s var(--bv2-ease); } html.builder-opt .bv2-addq-tile:hover { border-color: var(--bv2-gold); background: var(--bv2-gold-pale); color: var(--bv2-onyx); } html.builder-opt .bv2-addq-tile i { color: var(--bv2-gold); font-size: 1rem; flex-shrink: 0; } /* Inline SVG tile icon (e.g. Meal Choice's fork-and-knife) — match the font * icons: same gold (via currentColor) and ~1rem box. */ html.builder-opt .bv2-addq-tile .bv2-tile-svg { width: 1rem; height: 1rem; color: var(--bv2-gold); flex-shrink: 0; } html.builder-opt .bv2-addq-tile[hidden] { display: none; } /* Added question (task #107): the tile STAYS in the grid, highlighted in the * brand pink (elegant-rose) so the host can see at a glance which questions are * already on the form. Clicking it again removes the question. */ html.builder-opt .bv2-addq-tile.is-added { border-color: var(--elegant-rose, #E8B4A8) !important; background: rgba(232, 180, 168, 0.16) !important; color: var(--bv2-onyx); } html.builder-opt .bv2-addq-tile.is-added:hover { border-color: var(--elegant-rose, #E8B4A8) !important; background: rgba(232, 180, 168, 0.26) !important; } html.builder-opt .bv2-addq-tile.is-added i, html.builder-opt .bv2-addq-tile.is-added .bv2-tile-svg { color: var(--elegant-rose, #E8B4A8); } /* "Write your own" = the create action, set apart with a dashed edge. */ html.builder-opt .bv2-addq-tile-custom { border-style: dashed; } /* Standalone Custom Fields module hidden until "Write your own" (or if it * already holds custom fields). */ html.builder-opt .bv2-custom-hidden { display: none; } /* --- Preset field (e.g. Meal Choice) presented in the Questions section --- */ /* It's a real custom field under the hood, so hide the controls that don't * apply to a fixed-shape question — field type, the attending/not-attending + * conditional visibility (it's attending-only by design), per-attendee, and * placeholder. Label, description, the options editor + per-guest quantities * stay. */ html.builder-opt .bv2-preset-field .form-floating:has(.custom-field-type), html.builder-opt .bv2-preset-field .form-floating:has(.custom-field-label) .form-text, html.builder-opt .bv2-preset-field .form-check:has(.custom-field-attendance), html.builder-opt .bv2-preset-field .form-check:has(.custom-field-not-attending), html.builder-opt .bv2-preset-field .custom-field-conditional, html.builder-opt .bv2-preset-field .custom-field-per-attendee-container, html.builder-opt .bv2-preset-field .custom-field-placeholder-container { display: none !important; } /* --- Additional features (Event Info) ----------------------------------- */ /* The optional feature modules become one always-visible tile grid (reusing the * add-a-question tile look). Their accordion headers are hidden — the tiles are * the trigger; config still expands in place. Unlike question tiles, feature * tiles STAY and show on/off via the gold "enabled" tint. */ html.builder-opt .bv2-feature-tiled > .accordion-header { display: none; } /* A collapsed (tiled) feature must take NO visual space — strip the card chrome * so it doesn't render as an empty box below the tiles (the messy layers). */ /* Scoped to #formBuilderAccordion to beat builder-v2's id-level * `.accordion-item { border: 1px solid !important }`. */ html.builder-opt #formBuilderAccordion .bv2-feature-tiled { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; } /* When a feature is open, its config reads as one clean panel below the tiles. */ html.builder-opt #formBuilderAccordion .bv2-feature-tiled:has(.accordion-collapse.show) { background: var(--bv2-card) !important; border: 1px solid var(--bv2-line-soft) !important; border-radius: var(--bv2-radius-sm) !important; margin: 0.75rem 0 0 !important; } /* Separate the features row from Event Details above it, and pad the section's * sides so the label/tiles line up with the form content (the accordion-body * inset) instead of sitting flush against the pane edge. */ html.builder-opt #group-event-info > .bv2-addq-label { margin-top: 1.1rem; } html.builder-opt #group-event-info > .bv2-addq-label, html.builder-opt #group-event-info > .bv2-addq-grid { padding-left: 1.75rem; padding-right: 1.75rem; } /* Persistent "selected" state — the feature's enable switch is on. Shown even * when its config is collapsed: gold fill + border + a check badge. */ html.builder-opt .bv2-feature-tile { position: relative; } html.builder-opt #formBuilderAccordion .bv2-feature-tile.is-enabled { background: var(--bv2-gold-pale) !important; border-color: var(--bv2-gold) !important; color: var(--bv2-onyx) !important; } html.builder-opt .bv2-feature-check { position: absolute; top: 0.45rem; inset-inline-end: 0.55rem; /* end = right in LTR, left in RTL — opposite the start-aligned icon */ color: var(--bv2-gold); font-size: 0.95rem; display: none; } html.builder-opt #formBuilderAccordion .bv2-feature-tile.is-enabled .bv2-feature-check { display: block !important; } /* Task #111 — mobile: an expanded feature's config panel moves INTO the tile grid, right under its own tile. The panel spans the full row, and the open tile does too, so the pairing reads unambiguously. (The JS only relocates panels on <768px; these spans are harmless if a resize strands one.) */ html.builder-opt .bv2-addq-grid > .bv2-feature-tiled { grid-column: 1 / -1; } @media (max-width: 767px) { html.builder-opt .bv2-addq-grid > .bv2-feature-tile.is-open { grid-column: 1 / -1; } /* Task #166 — rows must size to content on mobile: with a config panel moved into the grid, grid-auto-rows:1fr stretched EVERY row (so every tile) to the panel's height — the selected tile ballooned into a giant empty card. Tiles are full-width single-column here anyway, so equal heights buy nothing. */ html.builder-opt .bv2-addq-grid { grid-auto-rows: auto; } } /* While a feature's config is open, its tile keeps the compact size and shows the same gold "active" treatment as an enabled feature (task #166). */ html.builder-opt #formBuilderAccordion .bv2-feature-tile.is-open { border-color: var(--bv2-gold) !important; background: var(--bv2-gold-pale) !important; color: var(--bv2-onyx) !important; }