/* resume.css — Resume Converter page: notice, form, and before/after result. */

.resume { padding-block: var(--space-6); }
.resume__lead { max-width: 60ch; margin-block: var(--space-2) var(--space-4); }

/* Privacy / usage notice */
.notice {
  border: 1px solid #e6e6e6;
  border-left: 4px solid var(--color-accent);
  background: #fafafa;
  padding: var(--space-3);
  margin-bottom: var(--space-5);
}
.notice__title { font-size: var(--text-h2); margin-bottom: var(--space-2); }
.notice ul { margin: 0; padding-left: 1.25rem; }
.notice li { margin-bottom: var(--space-1); }

/* Form */
.resume-form { display: grid; gap: var(--space-4); max-width: 60rem; }
.field { display: grid; gap: var(--space-1); }
.field label, .field--row label { font-weight: var(--weight-medium); }

.field--row { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .field--row { grid-template-columns: 1fr 1fr; } }

.field--check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: start; }
.field--check label { font-weight: var(--weight-regular); font-size: 0.95rem; }

textarea,
input[type="text"],
input[type="file"] {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid #cccccc;
  background: var(--color-white);
  font-family: inherit;
}
textarea { resize: vertical; }

.resume-form__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.convert-status { color: #555555; }

.pii-warning {
  border: 1px solid #c0392b;
  background: #fdecea;
  color: #7a1f16;
  padding: var(--space-2);
}

.button--small { padding: var(--space-1) var(--space-2); font-size: var(--text-caption); }

/* Result */
.result { margin-top: var(--space-6); }
.result__panes { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 800px) { .result__panes { grid-template-columns: 1fr 1fr; } }
.result__pane { border: 1px solid #e6e6e6; padding: var(--space-2); }
.result__pane-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.result__pane-title {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666666;
  margin-bottom: var(--space-1);
}
.result__text {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9rem;
  background: #fafafa;
  padding: var(--space-2);
  max-height: 32rem;
  overflow: auto;
}
.result__note { margin-top: var(--space-2); }