/* ---------- MODAL ---------- */
dialog.modal{
  padding:0;
  border:none;
  border-radius:4px;
  background:var(--paper);
  color:var(--ink);
  width:calc(100% - 32px);
  max-width:680px;
  max-height:min(88vh, 900px);
  overflow:hidden;
  box-shadow:0 24px 64px rgba(11,20,36,0.4);
}
dialog.modal::backdrop{background:rgba(11,20,36,0.72);}
.modal-inner{display:flex; flex-direction:column; max-height:inherit;}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:26px 28px 20px;
  background:var(--ink);
  color:var(--paper);
  border-bottom:3px solid var(--amber);
  flex:none;
}
.modal-head h2{color:var(--white); font-size:23px; max-width:24ch;}
.modal-head p{margin:10px 0 0; font-size:14.5px; color:#C9CEC1; max-width:46ch;}
.modal-close{
  background:transparent;
  border:1px solid var(--line-dark);
  border-radius:3px;
  color:var(--paper);
  cursor:pointer;
  padding:7px 9px;
  line-height:0;
  flex:none;
}
.modal-close:hover{border-color:var(--amber); color:var(--amber);}
.modal-body{padding:26px 28px; overflow-y:auto; flex:1 1 auto;}
.modal-foot{
  padding:18px 28px 24px;
  border-top:1px solid var(--line);
  background:var(--paper-dim);
  flex:none;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.modal-foot .fine{font-size:12.5px; color:var(--muted); margin:0;}
@media (max-width:640px){
  .modal-head{padding:20px 20px 16px;}
  .modal-body{padding:20px;}
  .modal-foot{padding:16px 20px 20px;}
}

/* ---------- FORM ---------- */
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px;}
@media (max-width:600px){ .field-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:6px;}
.field.span-2{grid-column:1 / -1;}
.field label{
  font-size:13px;
  font-weight:600;
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.4px;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.field .req{color:var(--red); margin-left:3px;}
.field .hint{font-size:12.5px; color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0; font-family:'IBM Plex Sans',sans-serif;}
.field input,
.field select,
.field textarea{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  padding:11px 12px;
  width:100%;
}
.field textarea{resize:vertical; min-height:96px;}
.field input:focus,
.field select:focus,
.field textarea:focus{border-color:var(--amber-deep);}
.field .err{
  font-size:13px;
  color:var(--red);
  font-family:'IBM Plex Sans',sans-serif;
  min-height:0;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{border-color:var(--red); background:#FDF5F4;}

.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.pane[hidden]{display:none !important;}
.form-status{
  font-size:14.5px;
  padding:14px 16px;
  border-radius:3px;
  border:1px solid var(--line);
  background:var(--white);
  margin:0 0 20px;
}
.form-status[data-tone="error"]{border-color:var(--red); background:#FDF5F4; color:#7C241B;}

.result{text-align:left;}
.result-mark{
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  flex:none;
}
.result-mark.ok{background:var(--green);}
.result-mark.bad{background:var(--red);}
.result h3{font-size:22px; margin-bottom:12px;}
.result p{color:var(--muted); margin:0 0 14px; max-width:48ch;}
.result .ref{
  font-family:'IBM Plex Mono', monospace;
  font-size:13.5px;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:3px;
  padding:10px 12px;
  display:inline-block;
  color:var(--ink-soft);
}
.result-actions{margin-top:24px; display:flex; gap:12px; flex-wrap:wrap;}

.spinner{
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid rgba(15,27,51,0.28);
  border-top-color:var(--ink);
  border-radius:50%;
  animation:spin 0.7s linear infinite;
  margin-right:9px;
  vertical-align:-2px;
}
@keyframes spin{to{transform:rotate(360deg);}}


/* The dialog only becomes a flex column once open, so the closed [display:none]
   state that <dialog> relies on is left intact. */
dialog.modal[open]{display:flex; flex-direction:column;}
.modal-inner{flex:1 1 auto; min-height:0;}
.pane{display:flex; flex-direction:column; flex:1 1 auto; min-height:0;}
#enquiry-form{display:flex; flex-direction:column; flex:1 1 auto; min-height:0;}
#success-heading:focus{outline:none;}