/* Host app layout. Colors and type come from /assets/tokens.css; this file only arranges them. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-size: 1rem;
  -webkit-text-size-adjust: 100%;
}

.host {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(1rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem) 3rem;
  overflow-wrap: anywhere;
}

/* Wide screens: two columns of cards so 1280–1920px desktops are not one thin strip. */
@media (min-width: 64rem) {
  .host {
    max-width: 72rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .host > .host-header,
  .host > .host-card--wide,
  .host > .host-notice {
    grid-column: 1 / -1;
  }
  /* The create screen is one focused form: a single readable column. */
  .host.host--focus {
    max-width: 48rem;
    grid-template-columns: minmax(0, 1fr);
  }
}

.host-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--zl-border);
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.host-header h1 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--zl-accent);
}

.host-card {
  min-width: 0;
  background: var(--zl-surface);
  border: 1px solid var(--zl-border);
  border-radius: var(--zl-radius);
  padding: clamp(1rem, 3vw, 1.5rem);
}

.host-card > :first-child { margin-block-start: 0; }
.host-card > :last-child { margin-block-end: 0; }

.host h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.host p {
  margin: 0.5rem 0;
  max-width: 65ch;
}

.host-lede { color: var(--zl-muted); }

.host-hint {
  font-size: 0.875rem;
  color: var(--zl-muted);
}

.host .host-blurb {
  margin: 0;
  flex-basis: 100%;
  font-size: 1.0625rem;
  color: var(--zl-muted);
}

.host .host-signed-in {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--zl-muted);
}

/* Language menu (round 5, D5): on every screen, at the end of the header. */
.host-lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}
.host-lang label {
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--zl-muted);
}
.host-lang select {
  min-height: 44px;
  max-width: 12rem;
  font-size: 1rem; /* 16px: no iOS zoom on focus */
}
.host .host-blurb + .host-lang {
  margin-inline-start: 0;
}

.host-disclosure {
  padding: 0.75rem 1rem;
  background: var(--zl-surface-alt);
  border-radius: calc(var(--zl-radius) - 2px);
  font-size: 0.9375rem;
}

/* Forms */
.host-form {
  display: grid;
  gap: 1rem;
  margin-block: 1rem 0;
}

.host-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.host-row > .host-field { flex: 1 1 14rem; }

.host-field {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.host-field label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.host input:not([type="checkbox"]):not([type="radio"]),
.host textarea,
.host select {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS Safari from zooming on focus */
  color: var(--zl-fg);
  background: var(--zl-surface);
  border: 1px solid var(--zl-border-strong);
  border-radius: calc(var(--zl-radius) - 2px);
}

.host textarea {
  min-height: 6rem;
  resize: vertical;
}

.host-check {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}

.host-check input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--zl-accent);
}

.host-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}

.host-form .host-actions { margin-block-start: 0; }

/* Buttons: one primary, one secondary style, shared by every section. */
.host-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.625rem 1.125rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  background: var(--zl-accent);
  border: 1px solid var(--zl-accent);
  border-radius: calc(var(--zl-radius) - 2px);
  cursor: pointer;
}

.host-btn:hover { background: var(--zl-accent-hover); border-color: var(--zl-accent-hover); }
.host-btn:active { transform: translateY(1px); }

.host-btn--secondary {
  color: var(--zl-accent);
  background: transparent;
}

.host-btn--secondary:hover {
  color: var(--zl-accent-hover);
  background: var(--zl-surface-alt);
}

.host :focus-visible,
.host input[type="date"]:focus-within {
  outline: 3px solid var(--zl-accent);
  outline-offset: 2px;
}

/* Template picker: three tiles with a colour swatch of each launch template. */
.host-templates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.host-template {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.625rem;
  font: inherit;
  font-weight: 600;
  text-align: start;
  color: var(--zl-fg);
  background: var(--zl-surface);
  border: 1px solid var(--zl-border-strong);
  border-radius: calc(var(--zl-radius) - 2px);
  cursor: pointer;
}

.host-template:hover { border-color: var(--zl-accent); background: var(--zl-surface-alt); }

.host-swatch {
  display: block;
  height: 2.75rem;
  border-radius: calc(var(--zl-radius) - 4px);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-template="modern-minimal"] .host-swatch { background: linear-gradient(90deg, #3f3f46 0 34%, #78716c 34% 62%, #f6f3ee 62%); }
[data-template="garden-botanical"] .host-swatch { background: linear-gradient(90deg, #215c32 0 34%, #9a5b63 34% 62%, #f4f7f1 62%); }
[data-template="traditional-red-gold"] .host-swatch { background: linear-gradient(90deg, #9b1b2e 0 34%, #c9a24a 34% 62%, #faf6ee 62%); }

/* Lists */
.host-chips,
.host-roles,
.host-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.host-chips:empty,
.host-list:empty { display: none; }

.host-chips li,
.host-roles [data-role] {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--zl-accent);
  background: var(--zl-surface-alt);
  border-radius: 999px;
}

.host-roles [data-member-role] {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-block: 0.625rem;
  border-block-start: 1px solid var(--zl-border);
}

.host-roles [data-role] + [data-member-role] { margin-block-start: 0.5rem; }

.host-member-id { min-width: 0; overflow-wrap: anywhere; }

.host-member-role {
  color: var(--zl-muted);
  font-size: 0.875rem;
}

/* Notices: inline, next to the section that caused them. */
.host .host-notice {
  margin: 1rem 0 0;
  max-width: none;
  padding: 0.75rem 1rem;
  border-inline-start: 4px solid var(--zl-accent);
  border-radius: calc(var(--zl-radius) - 4px);
  background: var(--zl-surface-alt);
  white-space: pre-line;
}

.host .host-notice--ok { border-color: var(--zl-success); background: var(--zl-success-bg); }
.host .host-notice--error { border-color: var(--zl-danger); background: var(--zl-danger-bg); }

.host-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Card heading with an action on the right (wraps under on phones). */
.host-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-block-end: 0.5rem;
}
.host-card-head h2 { margin: 0; }

/* Focus moves to the page heading (or a status line) after navigation so screen readers announce it;
   these are not controls, so no visible ring. */
.host [tabindex="-1"]:not(a, button, input, select, textarea):focus,
.host [tabindex="-1"]:not(a, button, input, select, textarea):focus-visible { outline: none; }

.host h3.host-subhead {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
  line-height: 1.3;
}

/* Weddings list */
.host-wedding-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.host-wedding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-block: 1rem;
  border-block-start: 1px solid var(--zl-border);
}

.host-wedding-main { min-width: 0; flex: 1 1 16rem; }
.host .host-wedding-main p { margin: 0; }

.host .host-wedding-title {
  font-family: var(--zl-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.host .host-wedding-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-block: 0.125rem 0.5rem;
  font-size: 0.9375rem;
  color: var(--zl-muted);
}

.host .host-wedding-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  margin: 0.25rem 0 0;
}

.host-url { overflow-wrap: anywhere; font-variant-ligatures: none; }

.host-status,
.host-tag {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 999px;
  white-space: nowrap;
}

.host-status { color: var(--zl-fg); background: var(--zl-surface-alt); border: 1px solid var(--zl-border-strong); }
.host-status--live,
.host-status--published { color: var(--zl-success); background: var(--zl-success-bg); border-color: var(--zl-success); }
.host-tag { color: var(--zl-muted); border: 1px solid var(--zl-border); }

.host-date { font-weight: 600; margin-inline-end: 0.25rem; }

.host-empty {
  padding: 1.25rem;
  border: 1px dashed var(--zl-border-strong);
  border-radius: calc(var(--zl-radius) - 2px);
  background: var(--zl-bg);
}
.host .host-empty-title { margin: 0; font-weight: 600; font-size: 1.0625rem; }

/* Create form */
.host-row--pair > .host-field { flex: 1 1 15rem; }
.host-row--pair { align-items: flex-start; }

.host .host-field-error,
.host .host-field-status {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}
.host .host-field-error,
.host .host-field-status--error { color: var(--zl-danger); }
.host .host-field-status--ok { color: var(--zl-success); font-weight: 400; }
.host .host-field-status--info { color: var(--zl-muted); font-weight: 400; }
.host .host-field-status--none { display: none; }

.host [aria-invalid="true"] {
  border-color: var(--zl-danger);
  box-shadow: inset 0 0 0 1px var(--zl-danger);
}

.host .host-hint { margin: 0; }
.host-slug-preview { color: var(--zl-muted); }
.host-slug-preview .host-url { color: var(--zl-fg); font-weight: 600; }

.host-alternatives { display: grid; gap: 0.375rem; }
.host-chips--actions { margin: 0; }

.host-chip-btn {
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--zl-accent);
  background: var(--zl-surface);
  border: 1px solid var(--zl-border-strong);
  border-radius: 999px;
  cursor: pointer;
}
.host-chip-btn:hover { background: var(--zl-surface-alt); border-color: var(--zl-accent); }

.host-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.5rem;
}

.host-fieldset legend {
  padding: 0;
  margin-block-end: 0.375rem;
  font-weight: 600;
  font-size: 0.9375rem;
}

.host-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.host-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.875rem 1rem;
  background: var(--zl-surface);
  border: 1px solid var(--zl-border-strong);
  border-radius: calc(var(--zl-radius) - 2px);
  cursor: pointer;
}

.host-choice:hover { border-color: var(--zl-accent); }
.host-choice.is-selected,
.host-template--choice.is-selected {
  border-color: var(--zl-accent);
  box-shadow: inset 0 0 0 1px var(--zl-accent);
  background: var(--zl-surface-alt);
}

.host-choice input,
.host-template-name input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--zl-accent);
}

.host-choice-text { display: grid; gap: 0.125rem; min-width: 0; }
.host-choice-title { font-weight: 600; }
.host-choice-desc { font-size: 0.9375rem; color: var(--zl-muted); }

.host-templates--choice { margin: 0; }
.host-template--choice { cursor: pointer; }
.host-template-name { display: flex; align-items: center; gap: 0.5rem; }
.host-template-name input { margin: 0; }

/* A radio inside a tile shows the focus ring on the whole tile. */
.host-choice:has(input:focus-visible),
.host-template--choice:has(input:focus-visible) {
  outline: 3px solid var(--zl-accent);
  outline-offset: 2px;
}

.host-disclosure-toggle summary {
  display: list-item;
  padding-block: 0.625rem;
  min-height: 44px;
  box-sizing: border-box;
  font-weight: 600;
  color: var(--zl-accent);
  cursor: pointer;
}
.host-disclosure-toggle[open] summary { margin-block-end: 0.5rem; }

.host .host-submit-status { margin: 0; font-weight: 600; color: var(--zl-muted); }
.host .host-submit-status:empty { display: none; }

.host-btn[disabled] { opacity: 0.7; cursor: progress; }
.host-btn[disabled]:active { transform: none; }
.host-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.host-btn[aria-disabled="true"]:active { transform: none; }

form[aria-busy="true"] input,
form[aria-busy="true"] select { background: var(--zl-bg); }

/* Dashboard */
.host-back { margin: 0 0 0.5rem; }
.host-link-btn {
  display: inline-flex;
  align-items: center;
  /* A flex item trims the arrow span's trailing space ("←All weddings"); the gap puts it back. */
  gap: 0.25em;
  min-height: 44px;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--zl-accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.host-dashboard h2 { font-size: 1.5rem; }
.host-guest-link { margin-block-start: 1.25rem; }
.host-row--tight { gap: 0.5rem; align-items: stretch; flex-wrap: nowrap; }
.host-row--tight input { flex: 1 1 auto; min-width: 0; }
.host .host-guest-link input[readonly] { background: var(--zl-bg); }
a.host-btn { text-decoration: none; }

.host-steps {
  margin: 0;
  padding-inline-start: 1.25rem;
  display: grid;
  gap: 0.375rem;
}
.host-steps li { padding-inline-start: 0.25rem; }

@media (prefers-reduced-motion: reduce) {
  .host-btn:active { transform: none; }
}

/* Round 2 fixes */
.host-chips--actions li { padding: 0; background: none; border-radius: 0; }
.host-row--tight .host-btn { flex: 0 0 auto; white-space: nowrap; }

/* Template choice: one row per template on phones, three tiles side by side from 40rem. */
@media (max-width: 39.99rem) {
  .host-templates--choice { grid-template-columns: minmax(0, 1fr); }
  .host-template--choice { flex-direction: row; align-items: center; gap: 0.75rem; }
  .host-template--choice .host-swatch { flex: 0 0 4.5rem; height: 2.25rem; }
}

/* ---- Round 4: editor screens (Seating, Day-of banner, Guest features) ---- */
.host-tools { margin-block-start: 1.5rem; }
.host-tool-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.host-tool {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  padding: 0.75rem;
  border: 1px solid var(--zl-border);
  border-radius: calc(var(--zl-radius) - 2px);
  background: var(--zl-bg);
}
.host-tool-btn { justify-content: flex-start; text-align: start; width: 100%; }
.host .host-tool p { margin: 0; }
.host .host-editor-for { margin: 0 0 0.25rem; }
.host h3.host-subhead--flush { margin-block-start: 0; }
.host-editor-head .host-wedding-chips { gap: 0.375rem 0.75rem; }
.host-editor-head .host-actions { margin-block-start: 0.25rem; }
/* Loading placeholder rows (text status above them is what assistive tech reads). */
.host-skeleton { display: grid; gap: 0.625rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.host-skeleton li {
  height: 2.75rem;
  border-radius: calc(var(--zl-radius) - 4px);
  background: linear-gradient(90deg, var(--zl-surface-alt) 0%, var(--zl-bg) 50%, var(--zl-surface-alt) 100%) 0 0 / 200% 100%;
  animation: host-shimmer 1.4s ease-in-out infinite;
}
@keyframes host-shimmer { to { background-position: -200% 0; } }
.host-btn--danger { background: var(--zl-danger); border-color: var(--zl-danger); }
.host-btn--danger:hover { background: #7f1d24; border-color: #7f1d24; }
.host .host-notice--info { border-color: var(--zl-border-strong); }
/* Plan read failed (round 8): the line, then Check again under it. */
.host .host-plan-failed { white-space: normal; }
.host .host-plan-failed p { margin: 0; }
.host .host-plan-failed .host-btn { margin-block-start: 0.75rem; }
.host-confirm {
  margin-block-start: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--zl-danger);
  border-radius: calc(var(--zl-radius) - 2px);
  background: var(--zl-danger-bg);
}
.host .host-confirm p { margin-block-start: 0; font-weight: 600; }
/* Segmented radio row (filters, preview template). Each option is a 44px label. */
.host-segment-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.host-segment {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--zl-border-strong);
  border-radius: 999px;
  background: var(--zl-surface);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.host-segment input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--zl-accent); }
.host-segment.is-selected { border-color: var(--zl-accent); background: var(--zl-surface-alt); box-shadow: inset 0 0 0 1px var(--zl-accent); }
.host-segment:has(input:focus-visible) { outline: 3px solid var(--zl-accent); outline-offset: 2px; }
/* Seating */
.host .host-seat-summary { font-weight: 600; margin-block: 0 0.75rem; }
.host-seat-tools { display: grid; gap: 0.75rem; }
.host-seat-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-block-start: 0.75rem;
  padding-block: 0.5rem;
  border-block: 1px solid var(--zl-border);
}
.host-seat-bulk .host-hint { flex-basis: 100%; }
.host-seat-group .host-subhead { margin-block: 1.25rem 0.25rem; }
.host-seats { margin: 0; padding: 0; list-style: none; }
.host-seat {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: start;
  gap: 0 0.5rem;
  padding-block: 0.625rem;
  border-block-start: 1px solid var(--zl-border);
}
.host-seat-pick { justify-content: center; min-width: 44px; min-height: 44px; }
.host .host-seat-name { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.host-seat-field { gap: 0.25rem; }
.host-seat-save { padding-inline: 0.875rem; }
.host .host-seat-status { margin: 0; font-size: 0.875rem; min-height: 1.25rem; }
.host .host-seat-status--ok { color: var(--zl-success); }
.host .host-seat-status--info { color: var(--zl-muted); }
.host .host-seat-status--error { color: var(--zl-danger); font-weight: 600; }
.host-seat--unseated .host-seat-name::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline-start: 0.5rem;
  border-radius: 50%;
  background: var(--zl-border-strong);
  vertical-align: middle;
}
/* CSV import */
.host input[type="file"] { padding: 0.5rem; cursor: pointer; }
.host input[type="file"]::file-selector-button {
  min-height: 2rem;
  margin-inline-end: 0.75rem;
  padding: 0.25rem 0.75rem;
  font: inherit;
  font-weight: 600;
  color: var(--zl-accent);
  background: var(--zl-surface-alt);
  border: 1px solid var(--zl-border-strong);
  border-radius: calc(var(--zl-radius) - 4px);
  cursor: pointer;
}
.host-csv-preview,
.host-csv-result {
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 2px solid var(--zl-border);
}
.host-csv-preview h4,
.host-csv-result h4 { margin: 0 0 0.5rem; font-size: 1.0625rem; }
.host-table-wrap { overflow-x: auto; margin-block: 0.5rem; }
.host-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.host-table th,
.host-table td { padding: 0.5rem 0.375rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--zl-border); overflow-wrap: anywhere; }
.host-table th { font-weight: 600; color: var(--zl-muted); }
.host-table .host-table-num { width: 3rem; font-variant-numeric: tabular-nums; }
.host-csv-problems {
  margin-block: 0.75rem;
  padding: 0.75rem 1rem;
  border-inline-start: 4px solid var(--zl-danger);
  border-radius: calc(var(--zl-radius) - 4px);
  background: var(--zl-danger-bg);
}
.host-csv-problems h5 { margin: 0 0 0.25rem; font-size: 1rem; }
.host-csv-problems ul { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; }
/* Banner */
.host-choices--severity { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.host-choice--change { border-inline-start: 4px solid #8a5a00; }
.host-choice--urgent { border-inline-start: 4px solid var(--zl-danger); }
.host-counter-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; }
.host-counter-row .host-field-error { order: -1; flex: 1 1 12rem; }
.host .host-counter { margin: 0 0 0 auto; font-size: 0.875rem; color: var(--zl-muted); font-variant-numeric: tabular-nums; }
.host .host-counter--near,
.host .host-counter--last { color: var(--zl-fg); font-weight: 600; }
.host .host-counter--full,
.host .host-counter--over { color: var(--zl-danger); font-weight: 700; }
.host .host-field-error:empty,
.host .host-dirty:empty { display: none; }
.host .host-dirty { font-weight: 600; }
.host-banner-preview {
  margin-block-start: 0.75rem;
  padding: 1rem;
  min-height: 6rem;
  border: 1px dashed var(--zl-border-strong);
  border-radius: calc(var(--zl-radius) - 2px);
  background: var(--zl-canvas, var(--zl-bg));
  color: var(--zl-ink, var(--zl-fg));
  font-family: var(--zl-font-body);
  font-size: var(--zl-text-body, 1rem);
  line-height: var(--zl-lh-normal, 1.5);
  overflow-wrap: anywhere;
}
.host-banner-preview .zl-banner { margin-block: 0; }
/* Round 9 (sweep #11): room between the preview hint and the Template group. */
.host-banner-preview-card .host-fieldset { margin-block-start: 1rem; }
.host .host-banner-preview-empty { margin: 0; color: var(--zl-muted); font-family: var(--zl-font-body); }
.host-banner-preview-slot:empty { display: none; }
/* Guest features: a switch is a checkbox (role=switch) drawn as a 44px-high track. */
.host-modules { margin: 0; padding: 0; list-style: none; }
.host-module {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1rem;
  border-block-start: 1px solid var(--zl-border);
}
.host-module-text { flex: 1 1 16rem; min-width: 0; }
.host .host-module-text p { margin: 0.25rem 0 0; }
.host .host-module-name { font-weight: 700; font-size: 1.0625rem; }
.host .host-module-status { font-weight: 600; font-size: 0.9375rem; }
.host .host-module-status--ok { color: var(--zl-success); }
.host .host-module-status--error { color: var(--zl-danger); }
.host-module-control { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
/* Plan and features (round 6). The state is words, not only colour. */
.host-segment-tag { font-weight: 500; font-size: 0.8125rem; color: var(--zl-muted); }
.host-plan-features { margin: 0; padding: 0; list-style: none; }
.host-plan-feature { padding: 0.75rem 0; border-block-start: 1px solid var(--zl-border); }
.host-plan-feature:first-child { border-block-start: 0; }
.host .host-plan-feature p { margin: 0.125rem 0 0; }
.host .host-plan-feature-name { font-weight: 700; }
.host .host-plan-feature-state { font-weight: 600; font-size: 0.9375rem; }
.host .host-plan-feature--included .host-plan-feature-state, .host .host-plan-feature--includedLater .host-plan-feature-state { color: var(--zl-success); }
.host-switch { display: inline-flex; align-items: center; gap: 0.5rem; }
.host-switch input {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 2.75rem;
  margin: 0;
  padding: 0.375rem 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background:
    radial-gradient(circle closest-side, #ffffff 92%, transparent 100%) no-repeat left 0.25rem center / 1.5rem 1.5rem,
    linear-gradient(var(--zl-border-strong), var(--zl-border-strong)) content-box;
  transition: background-position 150ms ease;
}
.host-switch input:checked {
  background:
    radial-gradient(circle closest-side, #ffffff 92%, transparent 100%) no-repeat right 0.25rem center / 1.5rem 1.5rem,
    linear-gradient(var(--zl-accent), var(--zl-accent)) content-box;
}
.host-switch input:disabled { opacity: 0.5; cursor: not-allowed; }
.host-switch input[aria-busy="true"] { opacity: 0.75; cursor: progress; }
.host-switch-text { min-width: 2rem; font-weight: 700; }
@media (forced-colors: active) {
  .host-switch input { -webkit-appearance: auto; appearance: auto; width: 1.5rem; height: 1.5rem; padding: 0; }
  /* Round 8 sweep: the swatches are the template's colours, the only thing they show; keep them. */
  .host-swatch { forced-color-adjust: none; }
}
@media (prefers-reduced-motion: reduce) {
  .host-skeleton li { animation: none; }
  .host-switch input { transition: none; }
}
/* Two columns from 64rem: seating list | CSV import, banner form | preview. */
@media (min-width: 64rem) {
  .host.host--editor[data-view="seating"] { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .host-banner-preview-card { position: sticky; top: 1rem; }
  .host-seat-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* ==== Round 11: elevation. The brand's red-gold voice, set in EB Garamond and Be Vietnam Pro. ==== */
body {
  background-color: var(--zl-bg);
  background-image: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%);
  background-repeat: no-repeat;
}

.host { gap: 1.5rem; padding-block-start: 0; }
@media (min-width: 64rem) { .host { gap: 1.75rem; } }

/* Header: a full-bleed paper bar with a hairline, the lotus wordmark, where you are, and the language. */
.host-header {
  position: relative;
  gap: 0.5rem 1.5rem;
  padding-block: 1rem;
  margin-block-end: 0.5rem;
  background: var(--zl-surface);
  border-block-end: 0;
  /* Full-bleed bar and hairline without widening the page: a border-image painted 100vmax past each side
     (outset never adds scroll width). No clip-path, so the account menu can open below the bar. */
  border-image: linear-gradient(var(--zl-surface) calc(100% - 1px), var(--zl-border) 0) fill 0 / 0 / 0 100vmax;
  z-index: 10;
}
.host-header h1 {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}
.host-header h1::before {
  content: "";
  width: 2.125rem;
  height: 0.875rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 34'%3E%3Cg fill='%238a6c2e' fill-opacity='.92'%3E%3Cpath transform='rotate(-66 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(-40 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(-20 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(20 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(40 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(66 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath d='M44 3C49 11 49 20 44 30C39 20 39 11 44 3Z'/%3E%3C/g%3E%3Cpath d='M30 29c4 4 24 4 28 0' fill='none' stroke='%238a6c2e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.host .host-signed-in { font-size: 0.875rem; }
.host-lang label { font-size: 0.8125rem; }
.host-lang select { min-width: 9rem; }

.host-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-width: 0;
  font-size: 0.9375rem;
}
.host .host-nav-link {
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  color: var(--zl-fg);
  background: none;
  border: 0;
  border-radius: 0;
  font-weight: 400;
  box-shadow: inset 0 -1px 0 transparent;
}
.host .host-nav-link:hover { color: var(--zl-accent); background: none; box-shadow: inset 0 -1px 0 var(--zl-accent); }
.host .host-nav-link[aria-current="page"] { color: var(--zl-accent); box-shadow: inset 0 -2px 0 var(--zl-accent); }
.host-nav-sep { color: var(--zl-border-strong); }
.host-nav-here { font-weight: 700; color: var(--zl-fg); max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cards: paper on paper, a hairline and a long soft shadow; display headings. */
.host-card {
  border-color: var(--zl-border);
  border-radius: var(--zl-radius);
  padding: clamp(1.25rem, 3.5vw, 2rem);
  box-shadow: var(--zl-shadow, none);
}
.host h2 {
  margin-block-end: 0.375rem;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
}
.host-dashboard h2 { font-size: clamp(1.875rem, 4vw, 2.5rem); }
.host h3.host-subhead {
  font-family: var(--zl-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  /* No text-transform: Chrome puts the uppercase into the accessible name ("FEATURES"). */
  color: var(--zl-muted);
}
.host :lang(ja) h3.host-subhead, .host :lang(ko) h3.host-subhead, .host :lang(zh) h3.host-subhead, .host :lang(th) h3.host-subhead,
:lang(ja) .host h3.host-subhead, :lang(ko) .host h3.host-subhead, :lang(zh) .host h3.host-subhead, :lang(th) .host h3.host-subhead { letter-spacing: 0; font-size: 0.875rem; }
.host-lede { font-size: 0.9375rem; }

/* Buttons and fields. */
.host-btn {
  padding: 0.6875rem 1.25rem;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  border-radius: calc(var(--zl-radius) - 2px);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.host-btn:not(.host-btn--secondary):not(.host-nav-link):not(.host-btn--danger) { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 14px -8px rgba(125, 20, 36, 0.55); }
.host-btn--secondary { border-color: var(--zl-border-strong); color: var(--zl-fg); }
.host-btn--secondary:hover { border-color: var(--zl-accent); color: var(--zl-accent); background: var(--zl-surface); }
.host input:not([type="checkbox"]):not([type="radio"]),
.host textarea,
.host select {
  min-height: 48px;
  padding: 0.6875rem 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.host input:not([type="checkbox"]):not([type="radio"]):focus,
.host textarea:focus,
.host select:focus { border-color: var(--zl-accent); box-shadow: 0 0 0 4px rgba(155, 27, 46, 0.12); }
.host-field label, .host-fieldset legend { font-size: 0.875rem; }

/* Status chips: a dot and a word. */
.host-status, .host-tag { padding: 0.1875rem 0.6875rem; font-size: 0.75rem; letter-spacing: 0.02em; }
.host-status { display: inline-flex; align-items: center; gap: 0.375rem; background: var(--zl-surface); border-color: var(--zl-border); }
.host-status::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--zl-gold-soft, var(--zl-border-strong)); }
.host-status--live::before, .host-status--published::before { background: var(--zl-success); }
.host-tag { background: var(--zl-bg); }
.host-tag--current { color: var(--zl-accent); border-color: var(--zl-accent); background: var(--zl-surface); }

/* Weddings list: each wedding a row you can open, its names in the display face. */
.host-wedding { padding-block: 1.25rem; border-block-start-color: var(--zl-border); }
.host .host-wedding-title { font-size: 1.375rem; font-weight: 500; }
.host .host-wedding-meta { font-size: 0.875rem; }

/* Empty state: a lotus, a title, one action. */
.host-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 3rem 1.5rem;
  border: 1px solid var(--zl-border);
  background: var(--zl-bg);
}
.host-empty::before { content: ""; width: 3.5rem; height: 1.5rem; margin-block-end: 0.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 34'%3E%3Cg fill='%238a6c2e' fill-opacity='.92'%3E%3Cpath transform='rotate(-66 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(-40 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(-20 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(20 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(40 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(66 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath d='M44 3C49 11 49 20 44 30C39 20 39 11 44 3Z'/%3E%3C/g%3E%3Cpath d='M30 29c4 4 24 4 28 0' fill='none' stroke='%238a6c2e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.host .host-empty-title { font-family: var(--zl-font-display); font-size: 1.5rem; font-weight: 500; }
.host-empty .host-actions { justify-content: center; }

/* Template picker: a miniature of each template's guest hero; the current one says so. */
.host-templates { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; }
.host-template { padding: 0.5rem 0.5rem 0.75rem; gap: 0.625rem; border-color: var(--zl-border); background: var(--zl-surface); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.host-template:hover { border-color: var(--zl-border-strong); background: var(--zl-surface); box-shadow: 0 10px 24px -16px rgba(42, 24, 16, 0.4); }
.host-template.is-current { border-color: var(--zl-accent); box-shadow: inset 0 0 0 1px var(--zl-accent); }
.host-template-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.5rem; padding-inline: 0.25rem; font-size: 0.875rem; }
.host-preview {
  position: relative;
  display: grid;
  place-items: center;
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--zl-radius) - 3px);
}
.host-preview-names { position: relative; z-index: 1; font-family: var(--zl-font-display); font-size: 1.375rem; line-height: 1; white-space: nowrap; }
[data-template="traditional-red-gold"] .host-preview {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23e0b85a'%3E%3Ccircle cx='200' cy='200' r='198' stroke-opacity='.34'/%3E%3Ccircle cx='200' cy='200' r='188' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") center / 78% auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M0 14L14 0L28 14L14 28Z' fill='none' stroke='%23e0b85a' stroke-opacity='.14'/%3E%3C/svg%3E") center / 14px 14px repeat, radial-gradient(ellipse at 50% 40%, #a71d32 0%, #9b1b2e 46%, #510e18 100%);
}
[data-template="traditional-red-gold"] .host-preview::before { content: ""; position: absolute; inset: 0.375rem; border: 1px solid rgba(224, 184, 90, 0.55); outline: 1px solid rgba(224, 184, 90, 0.28); outline-offset: -3px; }
[data-template="traditional-red-gold"] .host-preview::after { content: ""; position: absolute; top: 0.625rem; right: 0.625rem; width: 0.75rem; height: 0.75rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e0b85a' d='M24.17 6.6V17.45H7.21L7.95 20.05H24.17V27.93H8.78L9.52 30.62H47.91C49.21 30.62 50.14 30.16 50.42 29.14C46.99 26.08 41.33 21.62 41.33 21.62L36.32 27.93H34.56V20.05H49.4L50.32 19.96H64.79V27.93H50.97L51.72 30.62H90.38C91.68 30.62 92.61 30.16 92.89 29.14C89.46 26.08 83.8 21.62 83.8 21.62L78.89 27.93H75.27V19.96H91.4C92.7 19.96 93.63 19.49 93.91 18.47C90.38 15.32 84.63 10.78 84.63 10.78L79.63 17.36H75.27V10.13C77.4 9.76 78.05 8.92 78.24 7.72L64.79 6.6V17.36H50.51C47.08 14.39 42.63 10.87 42.63 10.87L37.62 17.45H34.56V10.13C36.79 9.76 37.34 8.92 37.53 7.72ZM12.49 36V52.78H13.79C14.9 52.78 16.01 52.6 17.03 52.32C18.15 54.82 18.7 58.35 18.24 61.41C19.35 62.61 20.65 63.26 21.86 63.45H6L6.74 66.13H49.3H49.58H91.5C92.79 66.13 93.72 65.67 94 64.65C90.75 61.59 85.38 57.23 85.38 57.23L80.55 63.45H74.53C77.31 60.94 80.37 58.07 82.41 55.84C84.45 55.93 85.47 55.1 85.75 53.99L73.88 51.02C73.41 54.73 72.77 59.83 72.21 63.45H64.6C69.24 62.61 71.84 55.66 60.34 51.58C61.82 51.02 62.84 50.37 62.84 50H79.16V51.95H80.93C84.08 51.95 89.18 50.19 89.27 49.63V39.71C90.75 39.43 91.77 38.78 92.24 38.22L82.87 31.27L78.33 36H63.31L53.29 32.01V52.78H54.59C55.7 52.78 56.91 52.6 58.02 52.32C59.13 54.82 59.69 58.35 59.23 61.41C60.34 62.61 61.64 63.26 62.84 63.45H50.51C47.45 60.57 43.46 57.42 43.46 57.42L38.83 63.45H33.54C36.32 61.03 39.29 58.16 41.33 55.93C43.37 56.03 44.48 55.19 44.76 54.08L32.89 51.11C32.43 54.73 31.69 59.83 31.13 63.45H23.62C28.35 62.61 30.85 55.66 19.45 51.58C20.84 51.02 21.86 50.37 21.86 50H37.34V51.95H39.01C42.07 51.95 46.89 50.28 46.99 49.63V39.71C48.56 39.43 49.58 38.78 50.05 38.22L40.87 31.45L36.51 36H22.32L12.49 32.01ZM62.84 47.31V38.59H79.16V47.31ZM53.38 71.23V93.4H54.68C58.58 93.4 62.84 91.26 62.84 90.52V87.74H78.61V92.38H80.37C83.43 92.38 88.44 90.52 88.53 89.97V75.22C90.11 74.94 91.31 74.2 91.77 73.55L82.32 66.51L77.77 71.23H63.31L53.38 67.43ZM62.84 85.14V73.92H78.61V85.14ZM21.86 47.31V38.59H37.34V47.31ZM12.58 71.23V93.4H13.88C17.68 93.4 21.86 91.36 21.86 90.52V87.74H37.81V92.38H39.38C42.54 92.38 47.36 90.62 47.45 89.97V75.22C49.12 74.94 50.23 74.2 50.79 73.55L41.33 66.6L36.97 71.23H22.32L12.58 67.34ZM21.86 85.05V73.92H37.81V85.05Z'/%3E%3C/svg%3E") no-repeat center / contain; }
[data-template="traditional-red-gold"] .host-preview-names { color: #faf6ee; font-weight: 500; }
[data-template="garden-botanical"] .host-preview { background: linear-gradient(180deg, #eef3ea, #f7f9f4); }
[data-template="garden-botanical"] .host-preview::before {
  content: "";
  position: absolute;
  inset: 0.625rem 22% -1px;
  border: 1px solid rgba(154, 91, 99, 0.5);
  border-block-end: 0;
  border-radius: 10rem 10rem 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 28'%3E%3Cpath d='M10 15C30 12 66 12 86 15' fill='none' stroke='%23215c32' stroke-width='1.1' stroke-linecap='round'/%3E%3Cg fill='%23215c32'%3E%3Cpath d='M0 0C4-5 11-5 14 0C11 5 4 5 0 0Z' transform='translate(44 13.4) rotate(-150)'/%3E%3Cpath d='M0 0C4-5 11-5 14 0C11 5 4 5 0 0Z' transform='translate(44 13.4) rotate(150)'/%3E%3Cpath d='M0 0C4-5 11-5 14 0C11 5 4 5 0 0Z' transform='translate(30 13.8) rotate(-155) scale(.85)'/%3E%3Cpath d='M0 0C4-5 11-5 14 0C11 5 4 5 0 0Z' transform='translate(30 13.8) rotate(155) scale(.85)'/%3E%3Cpath d='M0 0C4-5 11-5 14 0C11 5 4 5 0 0Z' transform='translate(52 13.4) rotate(-30)'/%3E%3Cpath d='M0 0C4-5 11-5 14 0C11 5 4 5 0 0Z' transform='translate(52 13.4) rotate(30)'/%3E%3Cpath d='M0 0C4-5 11-5 14 0C11 5 4 5 0 0Z' transform='translate(66 13.8) rotate(-25) scale(.85)'/%3E%3Cpath d='M0 0C4-5 11-5 14 0C11 5 4 5 0 0Z' transform='translate(66 13.8) rotate(25) scale(.85)'/%3E%3C/g%3E%3Ccircle cx='48' cy='13.2' r='2.4' fill='%23215c32'/%3E%3C/svg%3E") center 0.75rem / 2rem auto no-repeat, linear-gradient(180deg, #e2ebdd, rgba(226, 235, 221, 0));
}
[data-template="garden-botanical"] .host-preview-names { color: #142016; font-size: 1.25rem; margin-block-start: 0.75rem; }
[data-template="modern-minimal"] .host-preview { background: #f6f3ee; box-shadow: inset 0 0 0 1px #e7e5e4; }
[data-template="modern-minimal"] .host-preview-names { color: #1c1917; font-family: var(--zl-font-body); font-weight: 700; letter-spacing: -0.04em; font-size: 1.5rem; }
[data-template="modern-minimal"] .host-preview::after { content: ""; position: absolute; left: 50%; bottom: 26%; width: 1.25rem; height: 2px; margin-left: -0.625rem; background: #1c1917; }
/* The create form reuses the swatch row; give its tiles the same miniatures without names. */
.host-template--choice .host-preview-names { font-size: 1.125rem; }
@media (max-width: 39.99rem) {
  .host-template--choice .host-preview { flex: 0 0 5.5rem; height: auto; aspect-ratio: 4 / 3; }
  .host-template--choice .host-preview-names { font-size: 0.8125rem; }
  [data-template="garden-botanical"] .host-template--choice .host-preview::before { background-size: 1.25rem auto, auto; background-position: center 0.25rem, 0 0; inset: 0.25rem 18% -1px; }
}

/* Signed out: an invitation panel beside sign-in (pure ornament, aria-hidden). */
.host-showcase {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 9rem;
  overflow: hidden;
  border-radius: var(--zl-radius);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23e0b85a'%3E%3Ccircle cx='200' cy='200' r='198' stroke-opacity='.34'/%3E%3Ccircle cx='200' cy='200' r='188' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") center / min(26rem, 80%) auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M0 14L14 0L28 14L14 28Z' fill='none' stroke='%23e0b85a' stroke-opacity='.14'/%3E%3C/svg%3E") center / 22px 22px repeat, radial-gradient(ellipse at 50% 40%, #a71d32 0%, #9b1b2e 46%, #510e18 100%);
  box-shadow: var(--zl-shadow, none);
}
.host-showcase::before { content: ""; position: absolute; inset: 0.75rem; border: 1px solid rgba(224, 184, 90, 0.55); outline: 1px solid rgba(224, 184, 90, 0.28); outline-offset: -5px; }
.host-showcase-card { width: 4.5rem; height: 2rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 34'%3E%3Cg fill='%23c9a24a' fill-opacity='.92'%3E%3Cpath transform='rotate(-66 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(-40 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(-20 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(20 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(40 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath transform='rotate(66 44 30)' d='M44 5C50.5 12 51.8 19 44 30C36.2 19 37.5 12 44 5Z'/%3E%3Cpath d='M44 3C49 11 49 20 44 30C39 20 39 11 44 3Z'/%3E%3C/g%3E%3Cpath d='M30 29c4 4 24 4 28 0' fill='none' stroke='%23c9a24a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.host-showcase::after { content: ""; position: absolute; top: 1.375rem; right: 1.375rem; width: 1.5rem; height: 1.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23e0b85a' d='M24.17 6.6V17.45H7.21L7.95 20.05H24.17V27.93H8.78L9.52 30.62H47.91C49.21 30.62 50.14 30.16 50.42 29.14C46.99 26.08 41.33 21.62 41.33 21.62L36.32 27.93H34.56V20.05H49.4L50.32 19.96H64.79V27.93H50.97L51.72 30.62H90.38C91.68 30.62 92.61 30.16 92.89 29.14C89.46 26.08 83.8 21.62 83.8 21.62L78.89 27.93H75.27V19.96H91.4C92.7 19.96 93.63 19.49 93.91 18.47C90.38 15.32 84.63 10.78 84.63 10.78L79.63 17.36H75.27V10.13C77.4 9.76 78.05 8.92 78.24 7.72L64.79 6.6V17.36H50.51C47.08 14.39 42.63 10.87 42.63 10.87L37.62 17.45H34.56V10.13C36.79 9.76 37.34 8.92 37.53 7.72ZM12.49 36V52.78H13.79C14.9 52.78 16.01 52.6 17.03 52.32C18.15 54.82 18.7 58.35 18.24 61.41C19.35 62.61 20.65 63.26 21.86 63.45H6L6.74 66.13H49.3H49.58H91.5C92.79 66.13 93.72 65.67 94 64.65C90.75 61.59 85.38 57.23 85.38 57.23L80.55 63.45H74.53C77.31 60.94 80.37 58.07 82.41 55.84C84.45 55.93 85.47 55.1 85.75 53.99L73.88 51.02C73.41 54.73 72.77 59.83 72.21 63.45H64.6C69.24 62.61 71.84 55.66 60.34 51.58C61.82 51.02 62.84 50.37 62.84 50H79.16V51.95H80.93C84.08 51.95 89.18 50.19 89.27 49.63V39.71C90.75 39.43 91.77 38.78 92.24 38.22L82.87 31.27L78.33 36H63.31L53.29 32.01V52.78H54.59C55.7 52.78 56.91 52.6 58.02 52.32C59.13 54.82 59.69 58.35 59.23 61.41C60.34 62.61 61.64 63.26 62.84 63.45H50.51C47.45 60.57 43.46 57.42 43.46 57.42L38.83 63.45H33.54C36.32 61.03 39.29 58.16 41.33 55.93C43.37 56.03 44.48 55.19 44.76 54.08L32.89 51.11C32.43 54.73 31.69 59.83 31.13 63.45H23.62C28.35 62.61 30.85 55.66 19.45 51.58C20.84 51.02 21.86 50.37 21.86 50H37.34V51.95H39.01C42.07 51.95 46.89 50.28 46.99 49.63V39.71C48.56 39.43 49.58 38.78 50.05 38.22L40.87 31.45L36.51 36H22.32L12.49 32.01ZM62.84 47.31V38.59H79.16V47.31ZM53.38 71.23V93.4H54.68C58.58 93.4 62.84 91.26 62.84 90.52V87.74H78.61V92.38H80.37C83.43 92.38 88.44 90.52 88.53 89.97V75.22C90.11 74.94 91.31 74.2 91.77 73.55L82.32 66.51L77.77 71.23H63.31L53.38 67.43ZM62.84 85.14V73.92H78.61V85.14ZM21.86 47.31V38.59H37.34V47.31ZM12.58 71.23V93.4H13.88C17.68 93.4 21.86 91.36 21.86 90.52V87.74H37.81V92.38H39.38C42.54 92.38 47.36 90.62 47.45 89.97V75.22C49.12 74.94 50.23 74.2 50.79 73.55L41.33 66.6L36.97 71.23H22.32L12.58 67.34ZM21.86 85.05V73.92H37.81V85.05Z'/%3E%3C/svg%3E") no-repeat center / contain; }
@media (min-width: 64rem) {
  .host.host--signed-out { max-width: 68rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .host.host--signed-out > .host-header, .host.host--signed-out > .host-notice { grid-column: 1 / -1; }
  .host.host--signed-out > .host-showcase { grid-column: 1; min-height: 28rem; }
  .host.host--signed-out > [data-host="sign-in"] { grid-column: 2; align-self: center; }
  .host-showcase-card { width: 7rem; height: 3rem; }
}
.host--signed-out [data-host="sign-in"] h2 { font-size: 2rem; }
.host--signed-out .host-blurb { font-family: var(--zl-font-display); font-size: 1.1875rem; }

/* Notices: the brand red edge, a calmer panel. */
.host .host-notice { border-inline-start-width: 3px; background: var(--zl-surface-alt); }
.host-disclosure { background: var(--zl-bg); border: 1px solid var(--zl-border); }

@media (forced-colors: active) {
  .host-preview, .host-showcase { forced-color-adjust: none; }
}
/* The template miniatures get the full row on desktop so the three sit side by side. */
@media (min-width: 64rem) {
  .host > [data-host="templates"] { grid-column: 1 / -1; }
  .host > [data-host="templates"] .host-templates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phones: wordmark and language on one line, then where you are, then who is signed in. */
@media (max-width: 39.99rem) {
  .host-header { row-gap: 0.25rem; }
  .host-header h1 { order: 0; font-size: 1.625rem; }
  .host-header .host-lang { order: 1; margin-inline-start: auto; }
  .host-header .host-lang label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .host-header .host-lang select { min-width: 0; width: auto; max-width: 10rem; }
  .host-header .host-nav { order: 2; flex: 1 1 100%; }
  .host-header .host-signed-in, .host-header .host-blurb { order: 3; flex: 1 1 100%; }
  /* Three small miniatures side by side. */
  .host-templates:not(.host-templates--choice) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .host-templates:not(.host-templates--choice) .host-template { padding: 0.375rem 0.375rem 0.5rem; }
  .host-templates:not(.host-templates--choice) .host-preview { aspect-ratio: 3 / 4; }
  .host-templates:not(.host-templates--choice) .host-preview-names { font-size: 1rem; }
  .host-templates:not(.host-templates--choice) .host-template-label { font-size: 0.75rem; line-height: 1.3; padding-inline: 0.125rem; }
}
@media (min-width: 64rem) {
  .host--signed-out .host .host-blurb, .host.host--signed-out .host-blurb { flex-basis: auto; }
  .host.host--signed-out .host-blurb + .host-lang { margin-inline-start: auto; }
}

/* ---- Round 12: polish after the live staging review ---- */

/* Signed out: the invitation panel holds a miniature guest page and fills the row; nothing is clipped. */
.host-showcase { min-height: 15rem; padding: 2rem 1.5rem; background-size: auto 92%, 22px 22px, auto; }
.host-showcase-card { position: relative; z-index: 1; width: 3.5rem; height: 1.5rem; }
.host-showcase { grid-template-rows: auto auto; align-content: center; gap: 0.75rem; }
.host-showcase-invite { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0.625rem; color: #fbf4e6; text-align: center; }
.host-showcase-eyebrow { width: 5.5rem; height: 1px; background: linear-gradient(90deg, rgba(224, 184, 90, 0), #e0b85a, rgba(224, 184, 90, 0)); }
.host-showcase-names { font-family: var(--zl-font-display); font-size: 2.5rem; font-weight: 500; line-height: 1.1; letter-spacing: 0.02em; }
.host-showcase-date { font-size: 0.75rem; letter-spacing: 0.28em; color: #e8c97c; }
.host-showcase-reply { display: flex; gap: 0.5rem; margin-block-start: 0.5rem; }
.host-showcase-reply span { width: 4.5rem; height: 1.5rem; border: 1px solid rgba(232, 201, 124, 0.7); border-radius: 2px; }
.host-showcase-reply span:first-child { background: rgba(250, 244, 230, 0.92); border-color: transparent; }
@media (min-width: 64rem) {
  .host.host--signed-out { min-height: calc(100vh - 2rem); grid-template-rows: auto 1fr; align-content: stretch; }
  .host.host--signed-out > .host-showcase { min-height: min(38rem, calc(100vh - 10rem)); gap: 1.25rem; background-size: min(30rem, 88%) auto, 22px 22px, auto; }
  .host.host--signed-out > [data-host="sign-in"] { padding: clamp(2rem, 4vw, 3rem); }
  .host-showcase-card { width: 5rem; height: 2.25rem; }
  .host-showcase-names { font-size: clamp(3.25rem, 5vw, 4.5rem); }
  .host-showcase-date { font-size: 0.8125rem; }
  .host-showcase-reply span { width: 6rem; height: 2rem; }
}
.host--signed-out [data-host="sign-in"] .host-lede { max-width: 30rem; }

/* Dashboard: the current template as a row with its palette; wedding tools as cards you open. */
[data-host="current-template"] .host-template.is-current { flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.875rem; width: 100%; padding: 0.625rem 0.875rem 0.625rem 0.625rem; text-align: start; }
[data-host="current-template"] .host-template.is-current::before { content: ""; flex: 0 0 3.25rem; height: 2.25rem; border-radius: 2px; background: #e9e4dc; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
[data-host="current-template"] .host-template.is-current[data-template="traditional-red-gold"]::before { background: radial-gradient(ellipse at 50% 40%, #a71d32, #6e1220); box-shadow: inset 0 0 0 3px #9b1b2e, inset 0 0 0 4px #c9a24a; }
[data-host="current-template"] .host-template.is-current[data-template="garden-botanical"]::before { background: linear-gradient(180deg, #eef3ea, #f9faf6); box-shadow: inset 0 0 0 1px #9fb59f; }
[data-host="current-template"] .host-template.is-current[data-template="modern-minimal"]::before { background: linear-gradient(180deg, #f6f3ee 60%, #2a2622 60% 64%, #f6f3ee 64%); }
[data-host="current-template"] .host-template-label { flex: 1 1 auto; font-size: 1rem; font-weight: 600; }
/* Round 14: the card's label is a quiet tracked eyebrow, like the subheads; the name in the display face. */
.host [data-host="current-template"] > .host-subhead { margin: 1.25rem 0 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--zl-muted); }
:lang(ja) .host [data-host="current-template"] > .host-subhead, :lang(ko) .host [data-host="current-template"] > .host-subhead,
:lang(zh) .host [data-host="current-template"] > .host-subhead, :lang(th) .host [data-host="current-template"] > .host-subhead { letter-spacing: 0; font-size: 0.875rem; }
[data-host="current-template"] .host-template.is-current { padding-block: 0.75rem; }
[data-host="current-template"] .host-template.is-current::before { flex-basis: 4rem; height: 2.75rem; }
[data-host="current-template"] .host-template-label > span:first-child { font-family: var(--zl-font-display); font-size: 1.25rem; font-weight: 500; }
.host-tool-list { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.host-tool { position: relative; gap: 0.5rem; padding: 1.125rem 1.25rem 1.25rem; background: var(--zl-surface); border-color: var(--zl-border); border-radius: var(--zl-radius); box-shadow: 0 10px 24px -22px rgba(42, 24, 16, 0.55); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.host-tool:hover, .host-tool:focus-within { border-color: var(--zl-accent); box-shadow: 0 14px 28px -20px rgba(125, 20, 36, 0.45); }
.host .host-tool-btn { min-height: 44px; padding: 0.25rem 0; border: 0; background: none; box-shadow: none; color: var(--zl-fg); font-family: var(--zl-font-display); font-size: 1.375rem; font-weight: 500; letter-spacing: 0; justify-content: space-between; gap: 0.75rem; }
.host .host-tool-btn::after { content: "\2192" / ""; font-family: var(--zl-font-body); font-size: 1rem; color: var(--zl-accent); transition: transform 0.2s ease; }
.host .host-tool-btn:hover { color: var(--zl-accent); background: none; }
.host .host-tool-btn:hover::after { transform: translateX(0.1875rem); }
/* The whole card is the target: the button's box stretches over it (the description stays readable text). */
.host .host-tool-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.host .host-tool .host-hint { position: relative; pointer-events: none; font-size: 0.875rem; line-height: 1.55; }

/* Record screens (Guests, Events, Guest link): round 14 moved their layout to host-editors.css, which
   loads with the record and editor chunks instead of the first load. */

@media (prefers-reduced-motion: reduce) {
  /* Same selectors (and specificity) as the rules that add the transitions. */
  .host-btn, .host-template,
  .host input:not([type="checkbox"]):not([type="radio"]),
  .host textarea,
  .host select { transition: none; }
  /* And anything added later: no transition survives reduced motion in the host app. */
  .host *, .host *::before, .host *::after { transition: none !important; }
  /* Round 12: the wedding-tool arrow does not slide either. */
  .host .host-tool-btn:hover::after { transform: none; }
}

/* ==== Round 13: one control scale, aligned rows, a considered picker, designed states ==== */
/* One control-height scale for every input, select, button and segmented option.
   --zl-control-h: the default (48px); --zl-control-h-compact: header and inline tools (44px, the
   target minimum). Rows of field + button share the height and the vertical centre. */
:root {
  --zl-control-h: 48px;
  --zl-control-h-compact: 44px;
  --zl-control-pad-x: 0.875rem;
  --zl-control-radius: calc(var(--zl-radius) - 2px);
  --zl-control-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232a1810' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Single-line fields and selects: exactly the control height (a date field no longer grows to 51px,
   a Thai label no longer grows a select). */
.host input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.host select:not([multiple]):not([size]) {
  height: var(--zl-control-h);
  min-height: var(--zl-control-h);
  padding-block: 0;
  line-height: 1.3;
}
.host input[type="file"] { min-height: var(--zl-control-h); padding-block: 0.375rem; }

/* Buttons: the same height as a field; primary and secondary differ in emphasis only. */
.host-btn {
  min-height: var(--zl-control-h);
  padding-block: 0.5rem;
  border-radius: var(--zl-control-radius);
}
.host-btn:not(.host-btn--secondary):not(.host-nav-link):not(.host-btn--danger) { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset; }
.host-btn:not(.host-btn--secondary):not(.host-nav-link):not(.host-btn--danger):hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 14px -10px rgba(125, 20, 36, 0.55); }
.host-chip-btn, .host-segment { min-height: var(--zl-control-h-compact); }
.host .host-link-btn { min-height: var(--zl-control-h-compact); }
/* A link inside a sentence keeps the sentence's line height (inline targets are exempt from the 44px size). */
.host .host-hint > .host-link-btn { min-height: 0; display: inline; }

/* Selects: drawn by us everywhere (no platform menulist): chevron, padding for it, the field height. */
.host select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-inline: var(--zl-control-pad-x) 2.75rem;
  background-image: var(--zl-control-chevron);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem auto;
  text-overflow: ellipsis;
  cursor: pointer;
}
[dir="rtl"] .host select:not([multiple]):not([size]) { background-position: left 1rem center; }

/* The language picker: where the browser can style the list itself (customizable select), it opens
   under the trigger at the trigger's width in the app's type, instead of the platform list laid over
   the trigger. Only here: in a customizable select ArrowDown opens the list instead of changing the
   value, and form selects keep the platform keyboard model (the a11y walk checks it). Elsewhere the
   styled select above opens the platform list. */
@supports (appearance: base-select) {
  .host .host-lang select:not([multiple]):not([size]),
  .host .host-lang select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  .host .host-lang select:not([multiple]):not([size]) { display: inline-flex; align-items: center; }
  .host .host-lang select:not([multiple]):not([size])::picker-icon { display: none; }
  .host .host-lang select:not([multiple]):not([size])::picker(select) {
    min-inline-size: anchor-size(inline);
    max-block-size: min(29rem, 70vh);
    margin-block: 0.25rem;
    padding: 0.25rem;
    color: var(--zl-fg);
    background: var(--zl-surface);
    border: 1px solid var(--zl-border-strong);
    border-radius: var(--zl-control-radius);
    box-shadow: 0 18px 36px -18px rgba(42, 24, 16, 0.38);
  }
  .host .host-lang select:not([multiple]):not([size]) option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: var(--zl-control-h-compact);
    padding: 0.5rem 0.75rem;
    font-family: var(--zl-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    border-radius: calc(var(--zl-control-radius) - 2px);
    cursor: pointer;
  }
  .host .host-lang select:not([multiple]):not([size]) option::checkmark { order: 1; margin-inline-start: auto; color: var(--zl-accent); font-weight: 700; }
  .host .host-lang select:not([multiple]):not([size]) option:hover,
  .host .host-lang select:not([multiple]):not([size]) option:focus-visible { background: var(--zl-surface-alt); outline: none; }
  .host .host-lang select:not([multiple]):not([size]) option:checked { color: var(--zl-accent); font-weight: 600; }
}

/* The language picker (header): compact height, a fixed width that holds the longest native name
   ("Português (Brasil)"), so the open list is the trigger's width and the trigger never jumps. */
.host .host-lang select:not([multiple]):not([size]) {
  height: var(--zl-control-h-compact);
  min-height: var(--zl-control-h-compact);
  inline-size: 13rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  font-size: 1rem;
}
.host-lang label { color: var(--zl-muted); }

/* Disabled, invalid, out of range. */
.host input:disabled, .host select:disabled, .host textarea:disabled {
  color: var(--zl-muted);
  background-color: var(--zl-surface-alt);
  border-style: dashed;
  cursor: not-allowed;
  opacity: 1;
}
.host-btn:disabled:not([aria-busy="true"]):not(.is-pending) { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.host input:user-invalid, .host select:user-invalid, .host textarea:user-invalid {
  border-color: var(--zl-danger);
  box-shadow: inset 0 0 0 1px var(--zl-danger);
}

/* Date and time: same box as any field; the picker icon is a quiet 44px-wide target at the end. */
.host input[type="date"], .host input[type="time"], .host input[type="datetime-local"] {
  font-variant-numeric: tabular-nums;
  padding-inline-end: 0.5rem;
}
.host input[type="date"]::-webkit-datetime-edit,
.host input[type="time"]::-webkit-datetime-edit,
.host input[type="datetime-local"]::-webkit-datetime-edit { padding: 0; line-height: 1.3; }
.host input[type="date"]::-webkit-calendar-picker-indicator,
.host input[type="time"]::-webkit-calendar-picker-indicator,
.host input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  padding: 0.25rem;
  margin-inline-start: 0.25rem;
  border-radius: 4px;
  opacity: 0.7;
  cursor: pointer;
}
.host input[type="date"]::-webkit-calendar-picker-indicator:hover,
.host input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: var(--zl-surface-alt); }

/* Sign in: Email / Send code and Code / Verify code on one grid, so both fields share one width and
   both buttons one width; each button sits on its field's line at the field's height. */
.host-form--sign-in {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  row-gap: 1rem;
  align-items: end;
}
.host-form--sign-in > .host-row { display: contents; }
.host-form--sign-in .host-btn { min-inline-size: 9.5rem; white-space: nowrap; }
@media (max-width: 29.99rem) {
  .host-form--sign-in .host-btn { min-inline-size: 7.5rem; padding-inline: 1rem; }
}
@media (max-width: 22.5rem) {
  .host-form--sign-in { grid-template-columns: minmax(0, 1fr); }
  .host-form--sign-in .host-btn { inline-size: 100%; }
}

/* Template tiles (create and dashboard): one size per row whatever the label; the name keeps two
   lines' room from 40rem, where three tiles sit side by side. */
.host-templates > li { display: grid; min-inline-size: 0; }
.host-templates > li > * { min-inline-size: 0; }
.host-templates .host-template { block-size: 100%; }
@media (min-width: 40rem) {
  .host-template--choice .host-template-name { min-block-size: calc(2 * 1.3em); align-items: flex-start; line-height: 1.3; text-wrap: balance; }
  .host-template--choice .host-template-name input { margin-block-start: 0.05em; }
}
.host-template--choice.is-selected { background: var(--zl-surface-alt); }
.host-templates:not(.host-templates--choice) .host-template-label { align-items: flex-start; align-content: flex-start; }

/* Event format (Western / Vietnamese): equal cards, the text on one start line. */
.host-choices { align-items: stretch; }
.host-choice { block-size: 100%; }
.host-choice input { margin-block-start: 0.1875rem; }

/* Pending, success and error. Hooks for the behaviour code (see docs/UX-POLISH-CHECKLIST.md):
   - a busy button: aria-busy="true" (and disabled) or .is-pending: a ring before the label;
   - a busy form: aria-busy="true" or .is-pending on the form: fields dim, nothing moves;
   - a status line: <p class="host-form-status" role="status" data-state="pending|ok|error">;
     errors use role="alert". .host-submit-status[aria-busy="true"] gets the same pending ring. */
.host-btn[aria-busy="true"], .host-btn.is-pending {
  position: relative;
  gap: 0.5rem;
  cursor: progress;
  opacity: 1;
}
.host-btn[aria-busy="true"]::before, .host-btn.is-pending::before,
.host .host-form-status[data-state="pending"]::before, .host .host-submit-status[aria-busy="true"]::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 1em;
  block-size: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .host-btn[aria-busy="true"]::before, .host-btn.is-pending::before,
  .host .host-form-status[data-state="pending"]::before, .host .host-submit-status[aria-busy="true"]::before { animation: host-spin 0.8s linear infinite; }
}
@keyframes host-spin { to { transform: rotate(1turn); } }
.host form[aria-busy="true"], .host form.is-pending { cursor: progress; }
.host form[aria-busy="true"] :is(input, select, textarea), .host form.is-pending :is(input, select, textarea) { background-color: var(--zl-bg); }
.host .host-form-status, .host .host-submit-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  min-block-size: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--zl-muted);
}
.host .host-form-status:empty, .host .host-submit-status:empty { display: none; }
.host .host-form-status[data-state="ok"] { color: var(--zl-success); }
.host .host-form-status[data-state="error"] { color: var(--zl-danger); }
.host .host-form-status[data-state="ok"]::before,
.host .host-form-status[data-state="error"]::before {
  content: "";
  flex: 0 0 1.125rem;
  block-size: 1.125rem;
  background: currentColor;
  -webkit-mask: var(--zl-status-icon) no-repeat center / contain;
  mask: var(--zl-status-icon) no-repeat center / contain;
}
.host .host-form-status[data-state="ok"] { --zl-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.host .host-form-status[data-state="error"] { --zl-status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10 5.8v5.4' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.2' r='1.1'/%3E%3C/svg%3E"); }
.host .host-field-error:not(:empty) { display: flex; align-items: flex-start; gap: 0.375rem; }

/* Round 15. Who is signed in is a header line, not prose: no 65ch measure (it made "end" land mid-bar),
   and a long address breaks rather than overflowing. */
.host .host-header .host-signed-in { max-width: none; overflow-wrap: break-word; }
@media (max-width: 39.99rem) {
  /* No side inset on phones: the link (and its underline) lines up with the signed-in line under it. */
  .host .host-header .host-nav-link { padding-inline: 0; }
}
/* Agent tokens: the revoke note is a note on the list, not a caption glued to Mint token. */
.host [data-host="tokens"] [data-host="token-revoke"] { margin-block-start: 1rem; }
/* One line from 64rem (the grid below takes 40–64rem): wordmark, where you are, who is signed in (quiet,
   ending on a hairline), then the language. The signed-in line keeps 12rem and a longer address wraps
   inside it; a very long nav moves it and the picker down together, still at the end. The bar packs
   from the start, so a wrapped line never flings the nav to the far end. */
@media (min-width: 40rem) {
  .host-header { justify-content: flex-start; }
  .host-header .host-nav { order: 1; flex: 0 1 auto; }
  .host .host-header .host-signed-in { order: 2; flex: 1 1 12rem; min-width: 12rem; margin-block: 0; padding-inline-end: 1.5rem; border-inline-end: 1px solid var(--zl-border); line-height: 1.35; text-align: end; }
  .host-header .host-lang { order: 3; margin-inline-start: auto; }
}
/* 40–64rem: two rows that cannot come apart: wordmark and where you are, then who is signed in and the
   picker together at the end. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .host .host-header:has(.host-signed-in) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .host-header:has(.host-signed-in) > h1 { grid-area: 1 / 1; }
  .host-header:has(.host-signed-in) > .host-nav { grid-area: 1 / 2 / auto / -1; }
  .host .host-header .host-signed-in { grid-area: 2 / 1 / auto / 3; justify-self: end; min-width: 0; }
  .host-header:has(.host-signed-in) > .host-lang { grid-area: 2 / 3; }
}
/* Under 80rem the picker's "Language" label is visually hidden, as on phones (it still names the
   select), so the signed-in line has room at 1024. */
@media (min-width: 40rem) and (max-width: 79.99rem) {
  .host-header .host-lang label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Round 19: Settings and Help sit in their own small nav after "where you are"; at 40–64rem they take
   the end of the first row instead of sharing the breadcrumb's grid cell. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .host-header:has(.host-signed-in) > .host-nav:not(.host-nav--account) { grid-area: 1 / 2; }
  .host-header:has(.host-signed-in) > .host-nav--account { grid-area: 1 / 3; justify-self: end; }
}
@media (min-width: 64rem) { .host-header .host-nav--account { margin-inline-start: 0.5rem; } }
/* 64–80rem: the extra nav needs room, so a long signed-in address wraps inside a narrower line. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .host .host-header .host-signed-in { min-width: 11rem; flex-basis: 11rem; padding-inline-end: 1rem; }
  .host .host-header .host-lang select:not([multiple]):not([size]) { width: 9.5rem; min-width: 0; }
}
/* Round 19: the Describe your look button takes the row on phones, so a long label never wraps it off the 48px scale. */
@media (max-width: 39.99rem) { .host [data-host="look"] .host-actions .host-btn { width: 100%; } }

/* Account entry (taste polish): the signed-in email is a button that opens Account and Sign out. */
.host .host-account { position: relative; }
.host .host-account-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; min-height: 44px; padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border: 1px solid transparent; border-radius: var(--zl-radius); background: none; color: inherit; font: inherit; font-size: 0.875rem; cursor: pointer;
}
.host .host-account-btn:hover, .host .host-account-btn[aria-expanded="true"] { border-color: var(--zl-border); background: var(--zl-surface-alt); }
.host .host-account-btn:focus-visible { outline: 3px solid var(--zl-accent); outline-offset: 2px; }
.host .host-avatar {
  display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--zl-accent); color: var(--zl-surface); font-weight: 600; line-height: 1;
}
.host .host-account-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host .host-account-menu {
  position: absolute; z-index: 20; inset-inline-end: 0; top: calc(100% + 0.25rem); min-width: 12rem; margin: 0; padding: 0.375rem;
  list-style: none; background: var(--zl-surface); border: 1px solid var(--zl-border); border-radius: var(--zl-radius); box-shadow: var(--zl-shadow);
  text-align: start;
}
.host .host-account-menu[hidden] { display: none; }
.host .host-account-item {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 44px; padding: 0 0.75rem; border: 0; border-radius: calc(var(--zl-radius) - 2px); box-shadow: none;
  background: none; color: var(--zl-fg); font: inherit; font-weight: 600; text-decoration: none; text-align: start; cursor: pointer;
}
.host .host-account-item:hover { background: var(--zl-surface-alt); }
.host .host-account-item:focus-visible { outline: 3px solid var(--zl-accent); outline-offset: -3px; }

/* Prime-time: on phones Settings and Help share their row with the account button (one row less above every screen). */
@media (max-width: 39.99rem) {
  .host-header .host-nav--account { order: 3; flex: 0 0 auto; }
  .host .host-header .host-signed-in { order: 3; flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; }
}

/* Plan price next to a buy button: flex trims the leading space, so space it here. */
.host-price { margin-inline-start: 0.3em; font-weight: 400; }