/* Contact is form-focused, so it can use the wider shared workspace measure
   without changing the width of the marketing pages. Its spacing still uses
   the shared public marketing tokens below. */
.contact-page-content > .site-page-shell {
  max-width: var(--workspace-shell-max-width);
}

.contact-main__grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.46fr) minmax(0, 1.54fr);
  align-items: start;
  gap: var(--marketing-section-content-gap);
}

.contact-topics,
.contact-form-panel {
  min-width: 0;
}

.contact-topics {
  gap: var(--side-nav-header-nav-gap);
  width: 100%;
}

.contact-topics__heading,
.contact-form-panel__heading {
  display: grid;
  gap: var(--space-2);
}

.contact-topics__heading {
  margin-bottom: var(--space-5);
}

.contact-topics__heading h2,
.contact-form-panel__heading h2 {
  margin: 0;
  color: var(--app-text);
  font-family: var(--font-ui);
  font-size: var(--workspace-panel-title-size);
  line-height: var(--workspace-panel-title-line-height);
}

.contact-topics__heading h2 {
  font-size: var(--side-nav-title-size);
  line-height: var(--side-nav-title-line-height);
}

.contact-topics__heading p,
.contact-form-panel__heading p {
  margin: 0;
  color: var(--app-text-secondary);
  font-size: var(--workspace-panel-copy-size);
  line-height: var(--workspace-panel-copy-line-height);
}

.contact-form-panel {
  padding: var(--marketing-card-padding);
  background: transparent;
}

.contact-form-panel__heading {
  margin-bottom: var(--space-6);
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: var(--space-4);
}

.contact-form > .ui-field:nth-of-type(3),
.contact-form > .ui-field:nth-of-type(4),
.contact-attachment-row,
.contact-attachment-preview,
.contact-form-footer {
  grid-column: 1 / -1;
}

.contact-identity {
  display: grid;
  gap: var(--space-2);
}

.contact-message {
  min-height: 172px;
  max-height: 280px;
  resize: vertical;
}

.contact-attachment-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.contact-attachment-hint {
  color: var(--app-text-muted);
  font-size: var(--type-meta);
  line-height: var(--line-height-relaxed);
}

.contact-attachment-preview {
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--app-divider-soft);
  border-radius: 0;
  background: transparent;
}

.contact-attachment-preview[hidden] {
  display: none !important;
}

.contact-attachment-list {
  display: grid;
  gap: 0;
}

.contact-attachment-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--app-divider-soft);
}

.contact-attachment-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px 70px;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.contact-attachment-name,
.contact-attachment-type,
.contact-attachment-size {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--type-meta);
  line-height: var(--line-height-relaxed);
}

.contact-attachment-name {
  color: var(--app-text);
  font-weight: var(--font-weight-semibold);
}

.contact-attachment-type,
.contact-attachment-size {
  color: var(--app-text-muted);
}

.contact-attachment-size {
  text-align: right;
}

.contact-form-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-2);
}

@media (max-width: 820px) {
  .contact-main__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .contact-topics {
    position: static;
  }

  .contact-topics__list {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--app-divider-soft);
  }

  .contact-topics .content-side-nav-item.is-active {
    box-shadow: none;
  }

  .contact-topics .content-side-nav-item.is-active::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 1;
    height: var(--side-nav-active-marker-width);
    background: var(--color-champagne);
    content: "";
  }
}

@media (max-width: 640px) {
  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-form > .ui-field,
  .contact-form > .ui-field:nth-of-type(3),
  .contact-form > .ui-field:nth-of-type(4),
  .contact-attachment-row,
  .contact-attachment-preview,
  .contact-form-footer {
    grid-column: auto;
  }

  .contact-attachment-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .contact-attachment-meta {
    grid-template-columns: minmax(0, 1fr) 56px 64px;
  }

  .contact-attachment-remove {
    justify-self: start;
  }

  .contact-form-footer {
    display: block;
  }

  .contact-submit-button {
    width: 100%;
  }
}