/*
 * Form layer — styles for the {% field %} renderer, the dense form grid,
 * Django's default error output, and form-widget utility classes that
 * Python code already assigns (w-full, monospace).
 * Tokens come from tokens.css; no :root declarations here.
 */

/* ---- Field unit (rendered by ui/field.html) ---- */
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{display:flex;flex-direction:column;gap:6px;margin:0;font-size:var(--fs-1);color:var(--muted)}
.field .field-label{display:inline-flex;align-items:center;gap:6px}
.field .req{color:var(--danger);font-weight:700}
.field .field-lock{font-size:11px;opacity:.7}
.field .field-value{padding:8px 10px;border-radius:var(--r-2);border:1px solid var(--border);background:var(--panel);color:var(--ink);min-height:1.4em}

/* Editability is encoded as FILL: readonly fields sit on panel grey. */
.field--readonly input,
.field--readonly textarea,
.field--readonly select{background:var(--panel);color:var(--muted)}

.field--error input,
.field--error textarea,
.field--error select{border-color:var(--danger)}
.field-error{margin:0;font-size:var(--fs-1);color:var(--danger-ink)}

.field--check label{flex-direction:row;align-items:center;gap:8px}
.field--check input{width:auto}

.help{display:block;margin:0;font-size:var(--fs-1);color:var(--muted)}

/* ---- Dense form grid ---- */
.form-grid{display:grid;gap:var(--space-2) var(--space-3);grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.form-grid.cols-2{--cols:2}
.form-grid.cols-3{--cols:3}
.form-grid.cols-6{--cols:6}
.field.span-2{grid-column:span 2}
.field.span-3{grid-column:span 3}
.field.span-full{grid-column:1/-1}
@media(max-width:880px){
  .form-grid{--cols:2}
  .field.span-3{grid-column:span 2}
}
@media(max-width:560px){
  .form-grid{--cols:1}
  .form-grid .field{grid-column:1/-1}
}

/* Email field + inline Change-e-mail button. The verified/unverified badge
   lives in the field label (small badge), so this side column holds only the
   button, bottom-aligned to sit level with the input and matched to its height
   — keeping the email field's label in line with the other fields' labels. */
.email-with-action{grid-column:span 2;display:grid;grid-template-columns:1fr auto;gap:var(--space-2);align-items:stretch}
.email-with-action > .field{min-width:0}
.email-action{display:flex;align-items:flex-end}
.email-action .btn{min-height:38px}
@media(max-width:560px){.email-with-action{grid-column:1/-1}}

/* ---- Narrow create-form pages ---- */
.create-form{display:grid;gap:var(--space-3);max-width:800px}
.create-form h2{margin:var(--space-2) 0 0}
.create-actions{display:flex;gap:var(--space-2)}

/* ---- Sticky form actions bar ---- */
.form-actions{position:sticky;bottom:0;z-index:20;display:flex;gap:var(--space-2);align-items:center;justify-content:flex-end;padding:var(--space-2) var(--space-3);background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border-top:1px solid var(--border)}
.form-actions .dirty-note{margin-right:auto;font-size:var(--fs-1);color:var(--muted)}

/* ---- Error output ---- */
/* Styles Django's default errorlist so unconverted as_p pages improve for free. */
ul.errorlist{list-style:none;margin:0 0 4px;padding:0}
ul.errorlist li{margin:2px 0;padding:6px 8px;border:1px solid var(--danger);border-radius:var(--r-1);background:var(--danger-soft);color:var(--danger-ink);font-size:var(--fs-1)}
.form-errors{margin:0 0 var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--danger);border-radius:var(--r-2);background:var(--danger-soft);color:var(--danger-ink)}
.form-errors ul{margin:0;padding-left:18px}

/* ---- Widget utility classes already set by Python form code ---- */
.w-full{width:100%}
.monospace{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}