/* =============================================================================
   Component — Forms (admin + content editing)
   -----------------------------------------------------------------------------
   The .edit-form pattern is used for any data-editing surface — admin tables,
   inline editors, configuration panels. It uses a 2-column grid by default
   with .full spanning both, and groups visually separated by .group with
   a small uppercase .group-label.

   Markup pattern:

     <form class="edit-form">
       <label class="full">Title
         <input type="text" name="title" value="...">
       </label>

       <label>Eyebrow
         <input type="text" name="eyebrow" value="...">
       </label>
       <label>Slug
         <input type="text" name="slug" value="...">
       </label>

       <div class="group">
         <div class="group-label">Headline (split)</div>
         <div class="row">
           <label>Lead <input type="text" ...></label>
           <label>Italic <input type="text" ...></label>
         </div>
       </div>

       <div class="edit-actions">
         <span class="edit-saved" data-saved>saved</span>
         <button type="button" class="btn ghost">Discard</button>
         <button type="submit" class="btn brass">Save changes</button>
       </div>
     </form>

   The .btn.brass and .btn.ghost variants are SMALLER, RECTANGULAR utility
   buttons sized to inline forms — distinct from the primary .btn pill in
   components/buttons.css. Both naming conventions live side by side because
   the contexts don't collide.
============================================================================= */

.edit-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  padding: 24px 28px;
  background: var(--paper);
  border-top: 1px solid var(--ink-hairline);
}
.edit-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--caps-tight);
  color: var(--ink-faint);
}
.edit-form label.full { grid-column: 1 / -1; }

.edit-form input[type="text"],
.edit-form input[type="number"],
.edit-form input[type="email"],
.edit-form input[type="url"],
.edit-form input[type="search"],
.edit-form select,
.edit-form textarea {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 12px;
  border: 1px solid var(--ink-hairline);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 160ms var(--ease-button);
}
.edit-form textarea { min-height: 88px; resize: vertical; }
.edit-form input:focus,
.edit-form select:focus,
.edit-form textarea:focus {
  outline: none;
  border-color: var(--brass);
}

/* Mobile: bump form fields to 16px so iOS Safari doesn't auto-zoom on focus.
   Stays at 14px on tablet+ where desktop information density matters more. */
@media (max-width: 740px) {
  .edit-form input[type="text"],
  .edit-form input[type="number"],
  .edit-form input[type="email"],
  .edit-form input[type="url"],
  .edit-form input[type="search"],
  .edit-form select,
  .edit-form textarea {
    font-size: 16px;
  }
}

/* ----- Groups + rows ---------------------------------------------------- */

.edit-form .group {
  grid-column: 1 / -1;
  border-top: 1px solid var(--ink-hairline);
  padding-top: 18px;
}
.edit-form .group-label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--caps-track);
  color: var(--ink);
  margin-bottom: 12px;
}
.edit-form .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 14px;
}
.edit-form .row label.full { grid-column: 1 / -1; }

/* ----- Action bar at the bottom of a form ------------------------------- */

.edit-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--ink-hairline);
  margin-top: 8px;
}
.edit-saved {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--caps-tight);
  color: var(--brass);
  opacity: 0;
  transition: opacity 200ms var(--ease-button);
}
.edit-saved.show { opacity: 1; }

/* ----- Utility buttons used inside forms (smaller, rectangular) -------- */

.edit-form .btn,
.btn.brass,
.btn.ghost,
.btn.danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 160ms var(--ease-button),
              border-color 160ms var(--ease-button),
              color 160ms var(--ease-button);
}
.btn.brass {
  /* Deeper brass for the bg so bone text on it clears AA — bone on the
     original --brass is 2.89:1. Falls back to --brass when brass-deep is
     undefined (older consumers). */
  background: var(--brass-deep, var(--brass));
  color: var(--bone);
}
.btn.brass:hover { background: var(--navy-rich); }

.btn.ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--ink-hairline);
}
.btn.ghost:hover {
  color: var(--ink);
  border-color: var(--ink-quiet);
}

.btn.danger {
  background: transparent;
  /* Deeper terracotta for AA contrast — original on bone is 3.15:1. */
  color: var(--terracotta-deep, var(--terracotta));
  border-color: var(--ink-hairline);
}
.btn.danger:hover {
  background: rgba(201, 118, 80, 0.08);
  border-color: var(--terracotta);
}

/* ----- Variant-row pattern — repeating sub-records inside a form ------- */
/* Used for arrays-of-objects: specs, stats, filters, chapter items, etc. */

.specs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.variant-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bone);
  border: 1px solid var(--ink-hairline);
  border-radius: 8px;
}
.variant-row-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}
.variant-row-fields label.full { grid-column: 1 / -1; }
.variant-row-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid var(--ink-hairline);
}
.move-row {
  display: flex;
  gap: 6px;
}
.move-row button,
.variant-row-actions button {
  background: transparent;
  border: 1px solid var(--ink-hairline);
  border-radius: 5px;
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 160ms var(--ease-button), color 160ms var(--ease-button);
}
.move-row button:hover,
.variant-row-actions button:hover {
  color: var(--ink);
  border-color: var(--ink-quiet);
}
.variant-row-actions button.danger {
  color: var(--terracotta);
}
.variant-row-actions button.danger:hover {
  border-color: var(--terracotta);
}

.variant-add-btn {
  background: transparent;
  border: 1px dashed var(--ink-quiet);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 160ms var(--ease-button), border-color 160ms var(--ease-button);
}
.variant-add-btn:hover {
  color: var(--brass);
  border-color: var(--brass);
}