/* Page — fullscreen overlay with pinned header and scrollable content.
   Supports two layouts: hero (default) and compact. */

.detail-fullscreen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  z-index: var(--z-page);
}

.detail-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-header {
  flex-shrink: 0;

  &.detail-header--bordered {
    border-bottom: 1px solid var(--color-border);
  }
}

.detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--content-padding);

  .back-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .action-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;

    &.danger {
      color: var(--color-danger);
    }
  }

  .edit-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--color-bg-secondary);
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    svg {
      width: 16px;
      height: 16px;
    }
  }
}

.detail-hero {
  display: flex;
  flex-direction: column;
  padding: 4px var(--content-padding) var(--content-padding);
  gap: 4px;
  text-align: left;

  h1 {
    font-size: var(--text-x-large);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
  }

  .hero-title {
    --heading-lh: 1.3;
    display: flex;
    align-items: flex-start;
    gap: 8px;

    .hero-icon {
      display: flex;
      align-items: center;
      height: calc(var(--text-x-large) * var(--heading-lh));
      flex-shrink: 0;
      color: var(--color-primary);
    }

    h1 {
      line-height: var(--heading-lh);
    }
  }
}

.detail-eyebrow {
  font-size: var(--text-xx-small);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-subtitle {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.detail-description {
  font-size: var(--text-small);
  color: var(--color-muted);
}

.detail-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Compact layout — title centered in topbar */

.detail-topbar--compact {
  justify-content: space-between;

  .back-link, .detail-topbar-spacer {
    width: 20px;
    flex-shrink: 0;
  }

  .detail-topbar-title {
    flex: 1;
    text-align: center;
    font-size: var(--text-normal);
    font-weight: 600;
    color: var(--color-text);
  }
}

/* Field edit page — single-field edit layout */

.field-edit-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 var(--content-padding);
}

.field-edit-subtitle {
  font-size: var(--text-body);
  color: var(--color-muted);
  margin-bottom: 24px;
}

.field-edit-input {
  flex: 1;

  .form-input {
    font-size: var(--text-normal);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: 12px 0;

    &:focus {
      border-bottom-color: var(--color-primary);
      outline: none;
    }
  }
}

.field-edit-password {
  margin-top: 24px;
}

.field-edit-actions {
  padding: 20px 0;
}