/* builder.css, the form screen at /buat/. Built on the site.css tokens, DESIGN.md section 2.
   The only literals are the five invitation palettes from DESIGN.md section 4, used for the
   theme swatches. */

:root {
  --t-modern-bg: #FAF8F5;
  --t-modern-ink: #22201C;
  --t-modern-accent: #A16207;

  --t-batik-bg: #F5EFE6;
  --t-batik-ink: #2B1D12;
  --t-batik-accent: #8C5A2B;

  --t-islami-bg: #F3F7F3;
  --t-islami-ink: #12281C;
  --t-islami-accent: #B08A2E;

  --t-floral-bg: #FDF7F7;
  --t-floral-ink: #3A2A31;
  --t-floral-accent: #A4566E;

  --t-ceria-bg: #FFFBF2;
  --t-ceria-ink: #20262E;
  --t-ceria-accent: #1F6FB2;
}

/* several builder blocks set display, which would otherwise beat the hidden attribute */
[hidden] { display: none !important; }

/* page head, compact */
.b-head { padding-block: var(--s-24) var(--s-48); }
.b-head h1 { max-width: 20ch; }
.b-head h1 .display { color: var(--janur); }
.b-head .lead { margin-top: var(--s-16); max-width: 60ch; }

/* two columns from 1040px: form, then the sticky phone */
.b-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-48); padding-block: var(--s-48) var(--s-96); }
.b-main { min-width: 0; max-width: 760px; }

/* step list */
.b-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-4); }
.b-steps button {
  display: grid; align-content: start; justify-items: start; gap: var(--s-4);
  width: 100%; height: 100%; min-height: var(--tap); padding: var(--s-8) var(--s-8) var(--s-12);
  border: 0; border-radius: var(--r-control); background: var(--mist); color: var(--muted);
  font-size: var(--t-label); font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.b-steps button:hover { color: var(--ink); }
.b-steps-num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1; }
.b-steps button[data-done] { color: var(--ink); }
.b-steps button[aria-current="step"] { background: var(--plum); color: var(--on-plum); }
.b-steps button[aria-current="step"] .b-steps-num { color: var(--janur); }
.b-progress { margin-top: var(--s-12); font-size: 14px; color: var(--muted); }

/* steps and groups */
.b-form { margin-top: var(--s-32); }
.b-step > * + *, .b-sub > * + * { margin-top: var(--s-24); }
.b-step-head { margin-bottom: var(--s-32); }
.b-step-head p { margin-top: var(--s-12); color: var(--muted); max-width: 56ch; }

.b-group { display: grid; gap: var(--s-24); min-width: 0; margin: 0; border: 0; }
.b-group > * + * { margin-top: 0; }
.b-group > legend { float: left; width: 100%; padding: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.b-group .field { gap: var(--s-8); }
.b-group .hint { margin: 0; }
.b-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); }
.b-add { display: grid; justify-items: start; gap: var(--s-8); }

.b-err { font-size: 14px; font-weight: 600; color: var(--danger); }
.b-err:empty { display: none; }
.b-form input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
.b-form textarea[aria-invalid="true"] { border-color: var(--danger); }

.b-check { display: flex; align-items: center; gap: var(--s-12); min-height: var(--tap); cursor: pointer; }
.b-check input { flex: none; margin: 0; }

/* radio cards: occasion, theme, gift method */
.b-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-12); }
.b-cards-compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.b-card {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); align-content: start; gap: var(--s-8) var(--s-12);
  min-height: var(--tap); padding: var(--s-16); background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-control); cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.b-card:hover { border-color: var(--muted); }
.b-card input { grid-row: 1; margin: 4px 0 0; }
.b-card > span { grid-column: 2; }
.b-card-name { font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.1; color: var(--plum); }
.b-card-label { font-weight: 600; align-self: center; }
.b-card-desc { font-size: 14px; line-height: 1.5; color: var(--muted); }
.b-card:has(input:checked) { background: var(--plum); border-color: var(--plum); color: var(--on-plum); }
.b-card:has(input:checked) .b-card-name { color: var(--janur); }
.b-card:has(input:checked) .b-card-desc { color: var(--on-plum-muted); }
.b-card input:checked { accent-color: var(--janur); }
.b-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.b-card input:focus-visible { outline: none; }

.b-swatch {
  display: flex; align-items: center; gap: var(--s-12); grid-row: 1; height: 64px; padding-inline: var(--s-16);
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--sw-bg); color: var(--sw-ink);
  font-family: var(--font-display); font-style: italic; font-size: 28px; line-height: 1;
}
.b-swatch::after { content: ""; flex: 1 1 auto; height: 2px; background: var(--sw-accent); }
.b-swatch[data-swatch="modern"] { --sw-bg: var(--t-modern-bg); --sw-ink: var(--t-modern-ink); --sw-accent: var(--t-modern-accent); }
.b-swatch[data-swatch="batik"] { --sw-bg: var(--t-batik-bg); --sw-ink: var(--t-batik-ink); --sw-accent: var(--t-batik-accent); }
.b-swatch[data-swatch="islami"] { --sw-bg: var(--t-islami-bg); --sw-ink: var(--t-islami-ink); --sw-accent: var(--t-islami-accent); }
.b-swatch[data-swatch="floral"] { --sw-bg: var(--t-floral-bg); --sw-ink: var(--t-floral-ink); --sw-accent: var(--t-floral-accent); }
.b-swatch[data-swatch="ceria"] { --sw-bg: var(--t-ceria-bg); --sw-ink: var(--t-ceria-ink); --sw-accent: var(--t-ceria-accent); }

/* file inputs */
.b-form input[type="file"] { width: 100%; min-height: var(--tap); padding: var(--s-8); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-control); font-size: 15px; }
.b-form input[type="file"]::file-selector-button { min-height: 40px; margin-right: var(--s-12); padding: 0 var(--s-16); border: 0; border-radius: var(--r-control); background: var(--plum); color: var(--on-plum); font: inherit; font-weight: 600; cursor: pointer; }

/* gallery */
.b-gallery { list-style: none; padding: 0; display: grid; gap: var(--s-12); }
.b-gallery:empty { display: none; }
.b-photo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-16); padding: var(--s-16); background: var(--paper); border-radius: var(--r-control); }
.b-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-control); background: var(--mist); }
.b-photo-body { display: grid; align-content: start; gap: var(--s-8); }
.b-photo-size { font-size: 14px; color: var(--muted); }
.b-photo-body label { font-size: 15px; font-weight: 600; }
.b-photo-body .btn { justify-self: start; }

/* share */
.b-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); }
.b-copy-row .muted { font-size: 14px; }

/* back and next */
.b-nav { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-32); padding-top: var(--s-24); border-top: 1px solid var(--line); }
.b-nav .btn-primary { margin-left: auto; min-width: 160px; }

/* preview */
.b-preview { display: grid; justify-items: center; align-content: start; gap: var(--s-16); }
.b-frame { display: block; width: 100%; height: 100%; border: 0; }
.b-preview-note { max-width: 30ch; font-size: 14px; text-align: center; color: var(--muted); }
.b-preview-toggle { width: 100%; margin-top: var(--s-32); }

@media (min-width: 1040px) {
  .b-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-64); align-items: start; }
  .b-preview { position: sticky; top: var(--s-24); }
  .b-preview-toggle { display: none; }
}
@media (max-width: 1039.98px) {
  .b-main { margin-inline: auto; width: 100%; }
  .b-preview:not([data-open]) { display: none; }
}
@media (max-width: 720px) {
  .b-steps { gap: 0; margin-inline: -8px; background: var(--mist); border-radius: var(--r-control); }
  .b-steps button { justify-items: center; align-content: center; padding: 0; }
  .b-steps-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .b-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .b-head { padding-bottom: var(--s-32); }
  .b-layout { padding-top: var(--s-32); }
  .b-step-head { margin-bottom: var(--s-24); }
  .b-nav .btn { flex: 1 1 0; min-width: 0; }
  .b-photo { grid-template-columns: 72px minmax(0, 1fr); }
  .b-thumb { width: 72px; height: 72px; }
}