/* ==========================================================================
   NDF — contact.html: the Contact & submissions form (assets/contact.js).
   Builds on submit.css (fieldsets, labels, errors, consent, done panel, side
   box); what is new here is the topic picker and the form head. Colours only
   through site tokens, so it follows every skin in light and dark.
   ========================================================================== */

/* the section that holds the form follows the page's opening, so it starts closer */
.ct{ padding-top:var(--s5); }
/* jumps to the form (route cards, #message, the sent panel): a little air above; the masthead
   only stays in view with reduced motion, so leave room for it there */
.ct, .ct .sub-done{ scroll-margin-top:var(--s2); }
@media (prefers-reduced-motion: reduce){ .ct, .ct .sub-done{ scroll-margin-top:96px; } }
.ct-head{ padding-bottom:var(--s3); border-bottom:1px solid var(--rule); }
.ct-head .eyebrow{ margin:0; }
.ct-head h2{ font-size:clamp(28px,3.4vw,44px); line-height:1.08; margin:var(--s1) 0 0; }
.ct-head .blk-intro{ margin:var(--s2) 0 0; }
.ct-head .blk-intro:empty{ display:none; }

/* ---------- topic picker: radio tiles ---------- */
.ct .ct-choices{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(156px,1fr)); gap:10px;
}
.ct-choice{ position:relative; display:flex; min-width:0; cursor:pointer; }
.ct-choice input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.ct-choice-box{
  flex:1; display:flex; flex-direction:column; gap:5px; min-width:0;
  padding:14px 36px 14px 14px; position:relative;
  background:var(--ground); border:1px solid var(--rule); color:var(--ink-2);
  transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.ct-choice-box b{ font-size:15.5px; line-height:1.25; color:var(--ink); font-weight:600; }
.ct-choice-box small{ font-size:13.5px; line-height:1.4; color:var(--ink-3); }
/* the round marker in the corner */
.ct-choice-box::after{
  content:""; position:absolute; top:14px; right:12px; width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--rule); background:var(--paper);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.ct-choice:hover .ct-choice-box{ border-color:var(--ink-3); }
.ct-choice input:checked + .ct-choice-box{
  border-color:var(--stamp); background:color-mix(in srgb, var(--stamp) 9%, var(--paper));
  box-shadow:inset 0 0 0 1px var(--stamp);
}
.ct-choice input:checked + .ct-choice-box::after{ border-color:var(--stamp); box-shadow:inset 0 0 0 3.5px var(--paper), inset 0 0 0 8px var(--stamp); }
.ct-choice input:focus-visible + .ct-choice-box{ outline:2px solid var(--stamp); outline-offset:2px; }
.ct-choices.is-invalid .ct-choice-box{ border-color:var(--stamp); }

/* the line under the topics: the role picker / the note pointing finished articles to submit.html */
.ct-note{
  margin:0; padding:12px 14px; font-size:15px; line-height:1.5; color:var(--ink-2);
  background:var(--paper-2); border-left:3px solid var(--stamp);
}
.ct-note a{ color:var(--stamp); text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.ct-note a:hover{ color:var(--stamp-hi); }

/* inputs submit.css doesn't list */
.sub-field input[type="url"]{
  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 input[type="url"]: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[type="url"]{ border-color:var(--stamp); border-width:2px; }
#ctMessage{ min-height:200px; }

/* side box: numbered steps */
.ct-steps{ margin:0; padding:0; list-style:none; counter-reset:ct; display:grid; gap:12px; }
.ct-steps li{ counter-increment:ct; display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:baseline; line-height:1.5; }
.ct-steps li::before{
  content:counter(ct, decimal-leading-zero); font-family:var(--mono); font-size:12px; font-weight:500;
  color:var(--stamp); letter-spacing:.04em;
}
.ct .sub-side{ top:110px; }

/* Signal (v3): labels in the grotesque, the side box heading too (v3 sets every h2 in the display serif) */
html[data-skin="v3"] .ct .sub-box-h,
html[data-skin="v3"] .ct .sub-set legend{ font-family:var(--sans); font-weight:600; letter-spacing:.16em; }
html[data-skin="v3"] .ct-choice-box b{ font-family:var(--sans); font-weight:600; font-size:15px; }
html[data-skin="v3"] .ct-choice input:checked + .ct-choice-box{ background:var(--amber-soft); }
html[data-skin="v3"] .ct-head h2{ font-weight:800; letter-spacing:-.02em; }
html[data-skin="v3"] .ct-head{ border-bottom:2px solid var(--ink); position:relative; }
html[data-skin="v3"] .ct-head::after{ content:""; position:absolute; left:0; bottom:-2px; width:68px; height:2px; background:var(--stamp); }
html[data-skin="v3"] .sub-field input[type="url"]:focus{ box-shadow:0 0 0 3px var(--amber-soft); }

@media (max-width:620px){
  .ct{ padding-top:var(--s4); }
  .ct .ct-choices{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .ct-choice-box{ padding:12px 40px 12px 14px; }
  .ct-choice-box::after{ top:50%; margin-top:-7px; }
}