/* ==========================================================================
   NDF — submit.html: the contributor submission form.
   Colours only through site tokens (classic / editorial skins).
   ========================================================================== */

.sub-head{ padding-bottom:var(--s3); border-bottom:1px solid var(--rule); }
.sub-head h1{ font-size:clamp(38px,6vw,72px); line-height:1; margin:var(--s1) 0 var(--s2); }
.sub-head .hero-lede{ max-width:66ch; margin:0; color:var(--ink-2); }
/* "Only have an idea so far? Send us a proposal" -> contact.html?type=proposal */
.sub-alt{ margin:var(--s2) 0 0; font-size:15.5px; color:var(--ink-3); }
.sub-alt a{ color:var(--stamp); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.sub-alt a:hover{ color:var(--stamp-hi); }

.sub-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:var(--s5); margin-top:var(--s4); align-items:start; }
.sub-main{ min-width:0; }
.sub-form{ display:grid; gap:var(--s4); }
.sub-set{ margin:0; padding:var(--s3); border:1px solid var(--rule-soft); background:var(--paper); display:grid; gap:var(--s3); min-width:0; }
.sub-set legend{
  padding:0 8px; margin-left:-8px;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--stamp);
}
.sub-row2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.sub-field{ display:grid; gap:6px; min-width:0; align-content:start; }
.sub-field-narrow{ max-width:360px; }
.sub-field > label:not(.sub-check), .sub-label-row label{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); font-weight:500; }
.sub-label-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.req{ color:var(--stamp); }
.opt{ text-transform:none; letter-spacing:0; color:var(--ink-3); font-weight:400; font-size:12px; }
.sub-field input[type="text"], .sub-field input[type="email"], .sub-field select, .sub-field textarea{
  width:100%; min-width:0; font:inherit; font-size:17px; color:var(--ink); background:var(--ground);
  border:1px solid var(--rule); border-radius:0; padding:11px 13px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.sub-field select{ appearance:auto; }
.sub-field textarea{ resize:vertical; line-height:1.55; }
#subBody{ font-family:var(--mono); font-size:15px; line-height:1.65; min-height:320px; }
.sub-field input:focus, .sub-field select:focus, .sub-field textarea:focus{ outline:none; border-color:var(--stamp); box-shadow:0 0 0 3px color-mix(in srgb, var(--stamp) 18%, transparent); }
.sub-field.is-invalid input, .sub-field.is-invalid select, .sub-field.is-invalid textarea{ border-color:var(--stamp); border-width:2px; }
.sub-hint{ margin:0; font-size:14px; color:var(--ink-3); line-height:1.45; }
.sub-count{ font-family:var(--mono); font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.sub-err{ margin:0; font-size:14px; color:var(--stamp); font-weight:600; }
.sub-err:empty{ display:none; }
.sub-error{
  margin:0; padding:14px 16px; background:var(--paper); color:var(--ink);
  border:1px solid var(--stamp); border-left:4px solid var(--stamp); font-weight:600;
}
.sub-error:focus{ outline:none; }

/* images */
.sub-drop{ position:relative; border:1.5px dashed var(--rule); background:var(--ground); padding:var(--s3); text-align:center; transition:border-color .18s var(--ease), background .18s var(--ease); }
.sub-drop.is-over{ border-color:var(--stamp); background:var(--paper-2); }
.sub-drop.is-full{ opacity:.6; }
.sub-file{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.sub-drop-label{ display:inline-flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; color:var(--ink-2); }
.sub-drop-label svg{ width:30px; height:30px; fill:none; stroke:var(--stamp); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sub-drop-label b{ color:var(--stamp); text-decoration:underline; text-underline-offset:3px; }
.sub-file:focus-visible + .sub-drop-label{ outline:2px solid var(--stamp); outline-offset:4px; }
.sub-drop.is-full .sub-drop-label{ cursor:not-allowed; }
.sub-drop .sub-hint{ margin-top:10px; }
#subFilesErr{ color:var(--ink-2); font-weight:400; }
#subFilesErr.is-bad{ color:var(--stamp); font-weight:600; }
.sub-previews{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--s2); }
.sub-previews:empty{ display:none; }
.sub-preview{ display:flex; flex-direction:column; border:1px solid var(--rule-soft); background:var(--ground); min-width:0; }
.sub-preview-img{ aspect-ratio:4/3; background:var(--paper-2); overflow:hidden; }
.sub-preview-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sub-preview-meta{ padding:8px 10px 0; display:grid; gap:2px; min-width:0; }
.sub-preview-name{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sub-preview-x{
  margin:8px 10px 10px; align-self:flex-start; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--rule); background:var(--paper); color:var(--ink-2); padding:5px 10px; cursor:pointer;
}
.sub-preview-x:hover, .sub-preview-x:focus-visible{ border-color:var(--stamp); color:var(--stamp); }

/* honeypot: out of sight and out of the tab order */
.sub-hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

.sub-check{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; align-items:start; cursor:pointer; font-size:15.5px; color:var(--ink-2); line-height:1.5; }
.sub-check input{ width:20px; height:20px; margin:2px 0 0; accent-color:var(--stamp); }
.sub-consent.is-invalid .sub-check span{ color:var(--ink); }

.sub-actions{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.sub-actions .btn[disabled]{ opacity:.6; cursor:progress; transform:none; }
.sub-progress{ margin:0; color:var(--ink-3); }

.sub-done{ padding:var(--s4); background:var(--paper); border:1px solid var(--rule-soft); border-top:4px solid var(--stamp); }
.sub-done:focus{ outline:none; }
.sub-done h2{ font-size:clamp(26px,3.2vw,38px); line-height:1.12; margin:var(--s1) 0 var(--s2); }
.sub-done p{ color:var(--ink-2); max-width:62ch; }
.sub-done-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s3); }

/* sidebar */
.sub-side{ display:grid; gap:var(--s3); position:sticky; top:100px; min-width:0; }
.sub-box{ background:var(--paper); border:1px solid var(--rule-soft); border-top:3px solid var(--ink); padding:var(--s3); font-size:15.5px; color:var(--ink-2); }
.sub-box p{ margin:0 0 12px; }
.sub-box-h{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--stamp); margin:0 0 var(--s2); }
.sub-fmt{ margin:0 0 12px; display:grid; }
.sub-fmt > div{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:10px; padding:7px 0; border-top:1px solid var(--rule-soft); align-items:baseline; }
.sub-fmt dt{ min-width:0; }
.sub-fmt code{ font-family:var(--mono); font-size:12.5px; color:var(--ink); background:var(--paper-2); padding:1px 5px; overflow-wrap:anywhere; }
.sub-fmt dd{ margin:0; font-size:14.5px; }
.sub-list{ margin:0; padding-left:1.1em; display:grid; gap:6px; }

@media (max-width:1080px){
  .sub-grid{ grid-template-columns:minmax(0,1fr); gap:var(--s4); }
  .sub-side{ position:static; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
}
@media (max-width:620px){
  .sub-row2{ grid-template-columns:1fr; }
  .sub-set{ padding:var(--s2); }
  .sub-previews{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}