/**
 * Site-wide node create / edit form layout — editorial chrome shared
 * across every bundle. The poem form's bespoke pieces (field-group
 * sectioning, radio chips for poemstage/content_level) stay in
 * node-poem-form.css; this file gives every other create flow
 * (blog, forum, site_news, contest, workshop) the same shell.
 *
 * Token-only. No bundle-specific selectors here; bundle-specific
 * polish belongs in a per-bundle file or in an entity_form_display
 * + field_group config commit.
 */

/* ---- Form shell -------------------------------------------------- */
form[id^="node-"][id$="-form"],
form[id^="node-"][id$="-edit-form"] {
  max-width: var(--np-container-narrow);
  margin: var(--np-space-6) auto;
  padding: var(--np-space-6);
  background: var(--np-bg-primary);
  border: var(--np-border-width) solid var(--np-border-tertiary);
  border-radius: var(--np-radius-lg);
  box-shadow: var(--np-shadow-xs);
}

/* ---- Title field — serif headline input ------------------------ */
form[id^="node-"][id$="-form"] .field--name-title input,
form[id^="node-"][id$="-edit-form"] .field--name-title input {
  font-family: var(--np-font-serif);
  font-size: var(--np-text-2xl);
  font-weight: var(--np-weight-medium);
  letter-spacing: var(--np-tracking-snug);
  line-height: var(--np-leading-tight);
  padding: var(--np-space-3) var(--np-space-4);
  border: var(--np-border-width) solid var(--np-border-tertiary);
  border-radius: var(--np-radius-md);
  background: var(--np-bg-primary);
  color: var(--np-text-primary);
  width: 100%;
}
form[id^="node-"][id$="-form"] .field--name-title input:focus,
form[id^="node-"][id$="-edit-form"] .field--name-title input:focus {
  outline: 0;
  border-color: var(--np-border-focus);
  box-shadow: var(--np-shadow-focus);
}

/* ---- Body textarea — generous, line-preserving ----------------- */
form[id^="node-"][id$="-form"] .field--name-body textarea,
form[id^="node-"][id$="-edit-form"] .field--name-body textarea {
  font-family: var(--np-font-serif);
  font-size: var(--np-text-md);
  line-height: var(--np-leading-relaxed);
  color: var(--np-text-primary);
  padding: var(--np-space-5);
  border: var(--np-border-width) solid var(--np-border-tertiary);
  border-radius: var(--np-radius-md);
  background: var(--np-bg-primary);
  min-height: 18em;
  resize: vertical;
  white-space: pre-wrap;
  tab-size: 4;
  width: 100%;
}
form[id^="node-"][id$="-form"] .field--name-body textarea:focus,
form[id^="node-"][id$="-edit-form"] .field--name-body textarea:focus {
  outline: 0;
  border-color: var(--np-border-focus);
  box-shadow: var(--np-shadow-focus);
}

/* ---- Text-format help block (the Drupal "Allowed HTML" bullet
 * list under every textarea) — quiet it down. The list is informational
 * chrome, not editorial; it shouldn't compete with the body field. */
form[id^="node-"][id$="-form"] .filter-wrapper,
form[id^="node-"][id$="-edit-form"] .filter-wrapper {
  padding: 0;
  margin-top: var(--np-space-2);
  background: transparent;
  border: 0;
}
form[id^="node-"][id$="-form"] .filter-wrapper .filter-help,
form[id^="node-"][id$="-form"] .filter-wrapper .filter-guidelines,
form[id^="node-"][id$="-edit-form"] .filter-wrapper .filter-help,
form[id^="node-"][id$="-edit-form"] .filter-wrapper .filter-guidelines {
  display: none;
}
form[id^="node-"][id$="-form"] .filter-wrapper select,
form[id^="node-"][id$="-edit-form"] .filter-wrapper select {
  font-size: var(--np-text-xs);
  color: var(--np-text-tertiary);
  border: var(--np-border-width) solid var(--np-border-tertiary);
  border-radius: var(--np-radius-md);
  padding: var(--np-space-1) var(--np-space-3);
  background: var(--np-bg-primary);
}
form[id^="node-"][id$="-form"] .filter-wrapper label,
form[id^="node-"][id$="-edit-form"] .filter-wrapper label {
  font-size: var(--np-text-xs);
  color: var(--np-text-tertiary);
  font-weight: var(--np-weight-regular);
}

/* ---- Generic field cleanup (selects, text inputs, textareas) --- */
form[id^="node-"][id$="-form"] select,
form[id^="node-"][id$="-form"] input[type="text"]:not(.field--name-title input):not([type="submit"]),
form[id^="node-"][id$="-form"] input[type="email"],
form[id^="node-"][id$="-form"] textarea:not(.field--name-body textarea),
form[id^="node-"][id$="-edit-form"] select,
form[id^="node-"][id$="-edit-form"] input[type="text"]:not(.field--name-title input):not([type="submit"]),
form[id^="node-"][id$="-edit-form"] input[type="email"],
form[id^="node-"][id$="-edit-form"] textarea:not(.field--name-body textarea) {
  border: var(--np-border-width) solid var(--np-border-tertiary);
  border-radius: var(--np-radius-md);
  padding: var(--np-space-2) var(--np-space-3);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-base);
  background: var(--np-bg-primary);
}

/* ---- Action row — primary submit lands as near-black ink button --- */
form[id^="node-"][id$="-form"] .form-actions,
form[id^="node-"][id$="-edit-form"] .form-actions {
  margin: var(--np-space-6) calc(-1 * var(--np-space-6)) calc(-1 * var(--np-space-6));
  padding: var(--np-space-4) var(--np-space-6);
  background: var(--np-bg-primary);
  border-top: var(--np-border-hairline) solid var(--np-border-tertiary);
  border-radius: 0 0 var(--np-radius-lg) var(--np-radius-lg);
  display: flex;
  gap: var(--np-space-3);
  align-items: center;
  flex-wrap: wrap;
}

/* ---- CKEditor 5 chrome — match the editorial palette ----------- */
form[id^="node-"][id$="-form"] .ck.ck-toolbar,
form[id^="node-"][id$="-edit-form"] .ck.ck-toolbar {
  border-color: var(--np-border-tertiary);
  background: var(--np-bg-secondary);
  border-radius: var(--np-radius-md) var(--np-radius-md) 0 0;
}
form[id^="node-"][id$="-form"] .ck.ck-toolbar .ck-button,
form[id^="node-"][id$="-edit-form"] .ck.ck-toolbar .ck-button {
  border: 0;
  color: var(--np-text-secondary);
}
form[id^="node-"][id$="-form"] .ck.ck-toolbar .ck-button:hover,
form[id^="node-"][id$="-edit-form"] .ck.ck-toolbar .ck-button:hover {
  background: var(--np-bg-tertiary);
  color: var(--np-text-primary);
}
form[id^="node-"][id$="-form"] .ck.ck-toolbar .ck-button.ck-on,
form[id^="node-"][id$="-edit-form"] .ck.ck-toolbar .ck-button.ck-on {
  background: var(--np-bg-primary);
  color: var(--np-text-primary);
}
form[id^="node-"][id$="-form"] .ck.ck-editor__main > .ck-editor__editable,
form[id^="node-"][id$="-edit-form"] .ck.ck-editor__main > .ck-editor__editable {
  border-color: var(--np-border-tertiary);
  border-radius: 0 0 var(--np-radius-md) var(--np-radius-md);
  background: var(--np-bg-primary);
  font-family: var(--np-font-serif);
  font-size: var(--np-text-md);
  line-height: var(--np-leading-relaxed);
  color: var(--np-text-primary);
  padding: var(--np-space-5);
  min-height: 18em;
}
form[id^="node-"][id$="-form"] .ck.ck-editor__main > .ck-editor__editable:focus,
form[id^="node-"][id$="-edit-form"] .ck.ck-editor__main > .ck-editor__editable:focus {
  border-color: var(--np-border-focus);
  box-shadow: var(--np-shadow-focus);
}

/* ---- Hide drag-weight admin chrome on create/edit ---------------- *
 * Drupal's tabledrag toggle is exposed by default in admin contexts;
 * shouts for attention in writer mode. Demote to ghost styling. */
form[id^="node-"][id$="-form"] input.tabledrag-toggle-weight,
form[id^="node-"][id$="-edit-form"] input.tabledrag-toggle-weight {
  background: transparent;
  color: var(--np-text-tertiary);
  border: var(--np-border-hairline) solid var(--np-border-tertiary);
  font-size: var(--np-text-xs);
  font-weight: var(--np-weight-regular);
  padding: var(--np-space-1) var(--np-space-3);
}

/* ---- Mobile — full-width form, less breathing room -------------- */
@media (max-width: 640px) {
  form[id^="node-"][id$="-form"],
  form[id^="node-"][id$="-edit-form"] {
    max-width: 100%;
    margin: var(--np-space-3) var(--np-space-2);
    padding: var(--np-space-4);
    border-radius: var(--np-radius-md);
  }
  form[id^="node-"][id$="-form"] .field--name-title input,
  form[id^="node-"][id$="-edit-form"] .field--name-title input {
    font-size: var(--np-text-xl);
  }
}