/* resume console: panel padding */
.resume-console > .panel,
.resume-console-grid > .panel {
  padding: 20px;
}

.resume-console > .panel > .section-head,
.resume-console-grid > .panel > .section-head {
  flex-wrap: wrap;
  margin-top: 0;
}

.resume-console .section-head .muted {
  font-size: 12px;
  line-height: 1.6;
}

/* resume console: form controls follow the design system (.input) */
.resume-console .field input,
.resume-console .field select,
.resume-console .field textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--slate-300);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.resume-console .field textarea {
  min-height: 112px;
  padding: 10px 12px;
  line-height: 1.65;
  resize: vertical;
}

.resume-console .field input:focus,
.resume-console .field select:focus,
.resume-console .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #0f766e1f;
}

.resume-console .field input::placeholder,
.resume-console .field textarea::placeholder {
  color: var(--slate-400);
}

.resume-console .resume-check input {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--accent);
}

/* resume console: file picker */
.resume-console .resume-upload input[type=file] {
  padding: 8px;
  font-size: 12px;
  color: var(--slate-500);
}

.resume-console .resume-upload input[type=file]::file-selector-button {
  height: 30px;
  margin-right: 10px;
  padding: 0 12px;
  border: 1px solid var(--slate-300);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.resume-console .resume-upload input[type=file]::file-selector-button:hover {
  background: var(--slate-100);
}

.resume-console .resume-upload input[type=file]:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.resume-console .panel > .empty {
  padding: 36px 0;
}

/* resume console: responsive */
@media (max-width: 1080px) {
  .resume-console-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .resume-console {
    gap: 12px;
  }

  .resume-console > .panel,
  .resume-console-grid > .panel {
    padding: 14px;
  }

  .resume-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .resume-template-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .resume-actions .btn {
    flex: 1 1 auto;
  }
}