/* SIMUL8OR — CONTACT MODAL (prototype), mockup "Option C · Topic first".
   S8 skin over the production #contactModal contract (same ids/JS reused).
   Load AFTER s8-tokens.css + s8-ui.css (uses their tokens, keyframes, kit classes). */

/* ── entrance: match the other prototype modals (fade + drop-in) ── */
#contactModal.is-open{animation:s8-modal-fade-in .15s linear both}
#contactModal.is-closing{display:grid;animation:s8-modal-fade-out .15s linear both;pointer-events:none}
#contactModal .s8-modal{transform:translateY(-50px)}
#contactModal.is-open .s8-modal{animation:s8-modal-drop-in .3s ease-out both}
@media (prefers-reduced-motion:reduce){
  #contactModal.is-open,#contactModal.is-closing,#contactModal.is-open .s8-modal{animation:none}
  #contactModal .s8-modal{transform:none}
}

/* ── Option C layout ── */
.c8{position:relative}
#contactModal .s8-modal{max-height:calc(100dvh - var(--s8-6));overflow-y:auto}
.w540{max-width:544px}
.c8__x{position:absolute;right:10px;top:10px;z-index:2}
.c8__head{display:grid;gap:var(--s8-2);padding:var(--s8-5) var(--s8-5) var(--s8-4);border-bottom:1px solid var(--s8-line)}
.c8__head h2{margin:0;font-size:var(--s8-fs-2xl);line-height:1.15;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff}
.c8__head p{margin:0;max-width:46ch;font-size:var(--s8-fs-md);color:var(--s8-fg-2);text-wrap:pretty}
.c8__form{display:grid;gap:var(--s8-4);padding:var(--s8-5)}
.c8__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8-4)}
.c8 .s8-field{gap:8px}
.c8 .s8-input{height:var(--s8-h-lg);padding:0 12px;font-size:var(--s8-fs-md);background:var(--s8-inset)}
.c8 .s8-textarea{min-height:108px;padding:10px 12px;font-size:var(--s8-fs-md);background:var(--s8-inset)}
.c8__lab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s8-3)}
.c8__opt{font-size:var(--s8-fs-xs);color:var(--s8-fg-4);letter-spacing:0;text-transform:none;font-weight:500}

/* subject: topic tile grid drives a visually-hidden (but validatable) select */
.c8__topics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8-2)}
.c8__topic{display:grid;gap:5px;padding:11px 12px;border:1px solid var(--s8-line-2);border-radius:var(--s8-r);background:var(--s8-inset);color:var(--s8-fg-2);text-align:left;font:inherit;cursor:pointer;transition:background var(--s8-t-fast) var(--s8-ease),border-color var(--s8-t-fast) var(--s8-ease),color var(--s8-t-fast) var(--s8-ease)}
.c8__topic svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.c8__topic b{font-size:var(--s8-fs-sm);font-weight:600;color:var(--s8-fg)}
.c8__topic:hover{background:var(--s8-hover);border-color:var(--s8-line-3)}
.c8__topic[aria-pressed="true"]{background:var(--s8-accent-tint);border-color:var(--s8-accent-line);color:var(--s8-accent-fg)}
.c8__topic[aria-pressed="true"] b{color:#fff}
.c8__subject{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* footer + send button (production JS toggles .btn-text/.btn-loading via .d-none) */
.c8__foot{display:flex;align-items:center;gap:var(--s8-4);padding:var(--s8-4) var(--s8-5);border-top:1px solid var(--s8-line);background:var(--s8-inset)}
.c8__foot .s8-body-sm{flex:1;min-width:0}
.c8__send{min-width:158px;height:var(--s8-h-lg)}
.d-none{display:none!important}

/* production honeypot / status / success states */
.contact-honeypot{position:absolute!important;left:-5000px;width:1px;height:1px;overflow:hidden}
.c8 .contact-status{display:none;color:var(--s8-down);font-size:var(--s8-fs-sm);line-height:1.4}
.c8 .contact-status.is-visible{display:block}
.c8 .success-message{display:none;text-align:center;padding:var(--s8-7) var(--s8-5)}
.c8 .success-message svg{width:44px;height:44px;margin:0 auto var(--s8-3);stroke:var(--s8-up);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.c8 .success-message h5{margin:0 0 6px;font-size:var(--s8-fs-xl);font-weight:600;color:#fff}
.c8 .success-message p{margin:0;color:var(--s8-fg-2);font-size:var(--s8-fs-md)}

@media (max-width:560px){
  .c8__topics{grid-template-columns:repeat(2,1fr)}
  .c8__row{grid-template-columns:1fr}
}