/**
 * The record editor, styled once for two very different hosts.
 *
 * The admin is a dense spreadsheet; the customer portal is a roomy card layout
 * with its own typeface. This file picks neither: it reads THE TOKEN NAMES BOTH
 * HOSTS ALREADY USE, so it follows whatever theme it is dropped into, light or
 * dark, without either host having to know it exists. Nothing here sets a font
 * family — both set one on `body`, and inheriting is what makes the same markup
 * look native in both.
 *
 * 🔴 THE NAMES MUST BE THEIRS, NOT ONES INVENTED HERE. The first version read
 * `var(--ink, …)`, `var(--card, #fff)` and `var(--field, #fff)` — three
 * variables that exist in neither stylesheet. Every one of them fell through to
 * its light fallback, so in the customer portal's DARK theme the editor drew a
 * white slab of light-mode form inside a dark page. It looked deliberate and
 * was not, which is the failure mode of a fallback that is a real colour rather
 * than something obviously wrong.
 *
 * The shared vocabulary, defined in both `app.css` and `portal.css` and
 * re-derived under `prefers-color-scheme: dark` in each:
 *
 *   --text  --dim  --line  --panel  --panel2  --accent  --text-on-accent
 *   --success  --danger
 */

.rec-editor {
  --rec-fg: var(--text, #1a1d23);
  --rec-muted: var(--dim, #5b6270);
  --rec-line: var(--line, #dfe3ea);
  /* Sunken, because this sits INSIDE a card in both hosts and a section the
     same colour as its container reads as no section at all. */
  --rec-bg: var(--panel2, #f2f5fa);
  /* …and the fields sit on the card colour, so they separate from the section
     in both directions: lighter than it in light mode, darker in dark. */
  --rec-field-bg: var(--panel, #fff);
  --rec-accent: var(--accent, #3d7bff);
  /* 🔴 NOT `#fff`. In dark the portal moves --accent to a bright blue and says
     so in its own comment: "Bright fill, dark text — white on these hues fails
     on a dark page." It publishes the right ink as --text-on-accent. */
  --rec-on-accent: var(--text-on-accent, #fff);
  --rec-ok: var(--success, #1a7f4b);
  --rec-bad: var(--danger, #b42318);
  --rec-radius: 10px;

  color: var(--rec-fg);
}

.rec-loading,
.rec-error {
  padding: 1.25rem;
  color: var(--rec-muted);
}
.rec-error { color: var(--rec-bad); }

/* ------------------------------------------------------------- sections */

.rec-section {
  border: 1px solid var(--rec-line);
  border-radius: var(--rec-radius);
  background: var(--rec-bg);
  padding: 1rem 1.1rem 1.2rem;
  margin: 0 0 1rem;
}

.rec-section-hd h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rec-blurb {
  margin: 0.3rem 0 0.9rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--rec-muted);
  max-width: 60ch;
}

/* --------------------------------------------------------------- fields */

.rec-field { margin: 0 0 0.9rem; }
.rec-field:last-child { margin-bottom: 0; }

.rec-field > label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0 0 0.28rem;
}

.rec-field input,
.rec-field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.88rem;
  color: var(--rec-fg);
  background: var(--rec-field-bg);
  border: 1px solid var(--rec-line);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  /* The portal's global `input[type=text]` rule carries margin-bottom:14px and
     matches at the same specificity as this one. This file loads after it so
     the rest is won on source order, but a margin it never sets would survive
     and space every row out by 14px. */
  margin: 0;
}

.rec-field textarea { resize: vertical; min-height: 4.5rem; }

/* A visible focus ring, in both hosts. The admin's pipeline card lost its
   focus ring for weeks to a clip-path; this one is not going to inherit that
   sort of accident, so it is stated here rather than assumed. */
.rec-field input:focus-visible,
.rec-field textarea:focus-visible,
.rec-add:focus-visible,
.rec-save:focus-visible,
.rec-row-x:focus-visible {
  outline: 2px solid var(--rec-accent);
  outline-offset: 1px;
}

.rec-hint {
  margin: 0.3rem 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--rec-muted);
  max-width: 60ch;
}

/* ----------------------------------------------------------------- rows */

.rec-row {
  display: grid;
  gap: 0.4rem;
  align-items: center;
  margin: 0 0 0.4rem;
}

.rec-row-head {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rec-muted);
}

.rec-row-x {
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--rec-muted);
  cursor: pointer;
}
.rec-row-x:hover { color: var(--rec-bad); border-color: var(--rec-line); }
.rec-row-head .rec-row-x { cursor: default; }

.rec-empty {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  color: var(--rec-muted);
}

.rec-add {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rec-accent);
  background: none;
  border: 1px dashed var(--rec-line);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.rec-add:hover { border-color: var(--rec-accent); }

/* ----------------------------------------------------------------- foot */

.rec-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0 0;
}

.rec-note {
  margin: 0;
  flex: 1 1 18ch;
  font-size: 0.78rem;
  color: var(--rec-muted);
}

.rec-status { margin: 0; font-size: 0.8rem; }
.rec-status.ok { color: var(--rec-ok); }
.rec-status.bad { color: var(--rec-bad); }

.rec-save {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--rec-on-accent);
  background: var(--rec-accent);
  border: 0;
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
}
.rec-save[disabled] { opacity: 0.45; cursor: default; }

/* --------------------------------------------------------------- phones */

@media (max-width: 620px) {
  /* The grid collapses rather than scrolling sideways: a row of three inputs at
     360px is three unusable inputs. Each cell gets its own line and keeps the
     aria-label it already carries, so the header row is the only thing lost. */
  .rec-row { grid-template-columns: 1fr !important; gap: 0.3rem; }
  .rec-row-head { display: none; }
  .rec-row { padding: 0.5rem; border: 1px solid var(--rec-line); border-radius: 8px; }
  .rec-row-x { justify-self: end; }
}