/* Layout for the anonymous builder at /. Tokens, buttons, inputs, and the link
   card live in tokens.css (linked first from index.html) and are shared with the
   Next surfaces. */

body {
  display: flex;
  flex-direction: column;
  padding: var(--space-7) var(--space-4) var(--space-6);
}

.shell {
  width: min(100%, 520px);
  margin: 0 auto;
}

.empty-state,
.builder {
  padding: var(--space-6);
}

.benefits {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  color: var(--muted);
  font-size: var(--text-base);
  list-style: none;
}

.benefits li {
  padding-inline-start: var(--space-5);
  position: relative;
}

.benefits li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  inset-inline-start: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.link-list {
  display: grid;
  gap: var(--space-3);
}

.builder {
  margin-top: var(--space-4);
}

.builder-head {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.language-control {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.language-control label {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
}

.link-fields {
  display: grid;
  gap: var(--space-3);
}

.link-field {
  display: grid;
  gap: var(--space-3);
  background: var(--surface-2);
}

.field-actions,
.builder-actions,
.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.builder-actions {
  margin-top: var(--space-5);
  align-items: center;
}

/* the submit button is the one primary action in the row */
.builder-actions .button[type="submit"] {
  margin-inline-start: auto;
}

.output-label {
  margin-top: var(--space-6);
}

.share-row {
  align-items: stretch;
}

.share-url {
  flex: 1 1 220px;
  background: var(--surface-2);
  font-size: var(--text-sm);
  text-align: left;
}

.qr-actions {
  margin-top: var(--space-3);
}

.qr-wrap {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--surface-2);
}

.qr-image {
  width: min(100%, 240px);
  height: auto;
  border-radius: var(--radius-sm);
  background: #fff;
}

.qr-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
}

.footer {
  display: flex;
  width: min(100%, 520px);
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  justify-content: center;
  margin: auto auto 0;
  padding: var(--space-6) var(--space-4) 0;
  text-align: center;
}

.footer-action {
  flex-basis: 100%;
}

.footer a,
.footer-button {
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.footer-button {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.footer a:hover,
.footer-button:hover {
  color: var(--accent-text);
  text-decoration: underline;
}

@media (max-width: 520px) {
  body {
    padding: var(--space-5) var(--space-3) var(--space-6);
  }

  .empty-state,
  .builder {
    padding: var(--space-4);
  }

  .builder-head,
  .share-row {
    flex-direction: column;
  }

  .field-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .builder-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .builder-actions .button[type="submit"] {
    grid-column: 1 / -1;
    margin-inline-start: 0;
  }

  .button {
    width: 100%;
  }

  .builder-head .button {
    width: auto;
    align-self: flex-start;
  }
}