/* --- Secure form: light, flat, PaperMod-native -------------------------- */

/* Card */
.pm-card {
  max-width: 760px;
  margin: 1.25rem auto;
  background: var(--entry);
  color: var(--content);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

/* Header */
.pm-card__header {
  padding: .4rem 1.2rem .2rem;
}
.pm-card__title {
  margin: .3rem 0 .2rem;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--content);
}

/* Body / footer */
.pm-card__body   { padding: .6rem 1.2rem .4rem; }
.pm-card__footer { padding: .6rem 1.2rem 1rem; display:flex; justify-content:flex-end; }

/* Fields */
.pm-field { margin: .9rem 0; }
.pm-label {
  display:block;
  margin: 0 0 .45rem;
  font-size: .95rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--content) 82%, transparent);
}
.pm-help {
  margin:.4rem 0 0;
  font-size:.86rem;
  color: color-mix(in oklab, var(--content) 58%, transparent);
}

/* Inputs */
.pm-input, .pm-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--theme);
  color: var(--content);
  padding: .7rem .85rem;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pm-textarea {
  min-height: 2.2rem;       /* smaller initial height */
  height: 4rem;
  resize: vertical;         /* user can still expand */ 
}

.pm-input::placeholder, .pm-textarea::placeholder {
  color: color-mix(in oklab, var(--content) 55%, transparent);
}

/* Focus */
.pm-input:focus, .pm-textarea:focus {
  outline: none;
  background: var(--entry);
  border-color: color-mix(in oklab, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 18%, transparent);
}

/*.pm-textarea::placeholder {
  opacity: 1;
  transition: opacity 0.2s ease;
}*/

/* When focused, fade placeholder away */
.pm-input:focus::placeholder, .pm-textarea:focus::placeholder {
  opacity: 0;
}

/* Button */
.pm-btn {
  border: 1px solid var(--border);
  background: var(--entry);
  color: var(--content);
  border-radius: 10px;
  padding: .55rem .95rem;
  font-weight: 600;
  font-size: .98rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, filter .12s ease;
}
.pm-btn:hover { background: color-mix(in oklab, var(--entry) 85%, var(--theme)); }
.pm-btn:active { filter: brightness(.98); }

.pm-btn--primary {
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 14%, transparent);
}
.pm-btn--sent {
  border-color: color-mix(in oklab, var(--primary) 60%, var(--border));
  background: color-mix(in oklab, var(--entry) 88%, var(--primary));
}
.pm-btn:disabled { opacity:.7; cursor:not-allowed; box-shadow:none; }

/* --- Dark mode --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .pm-card {
    background: var(--entry);
    border-color: var(--border);
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
  }

  .pm-label { color: color-mix(in oklab, var(--content) 88%, transparent); }
  .pm-help  { color: color-mix(in oklab, var(--content) 62%, transparent); }

  /* Make field edges clearly visible */
  .pm-input, .pm-textarea {
    background: color-mix(in oklab, var(--entry) 90%, #0b0d10);
    border-color: color-mix(in oklab, var(--content) 22%, var(--border));
    color: var(--content);
  }

  .pm-input:hover, .pm-textarea:hover {
    border-color: color-mix(in oklab, var(--primary) 28%, var(--border));
  }

  .pm-input:focus, .pm-textarea:focus {
    background: color-mix(in oklab, var(--entry) 94%, #0b0d10);
    border-color: color-mix(in oklab, var(--primary) 55%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 26%, transparent);
  }

  .pm-textarea {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  }

  .pm-btn {
    background: color-mix(in oklab, var(--entry) 94%, transparent);
    color: var(--content);
    border-color: var(--border);
  }

  .pm-btn--primary {
    border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 16%, transparent);
  }

  .pm-btn--sent {
    background: color-mix(in oklab, var(--entry) 86%, var(--primary));
  }
}

/* --- Fallback for browsers without color-mix support ------------------- */
@supports not (color: color-mix(in oklab, white 50%, black)) {
  @media (prefers-color-scheme: dark) {
    .pm-input, .pm-textarea {
      background: #1b1f24;
      border-color: #3a3f46;
    }
    .pm-input:hover, .pm-textarea:hover { border-color: #5c6670; }
    .pm-input:focus, .pm-textarea:focus {
      border-color: #7aa2ff;
      box-shadow: 0 0 0 2px rgba(122,162,255,.25);
    }
  }
}

/* Remove extra top gap */
.pm-secure .pm-card__header { padding-top: .3rem; }