/* Pittsburgh Health Connect form refinement
   Keeps the participation workflow calm, legible, and accessible while
   making the controls feel intentional rather than browser-default. */

.network-form{
  color-scheme:dark;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(22px,3vw,34px);
  border-color:rgba(107,227,207,.28);
  background:
    radial-gradient(circle at 8% 0%,rgba(107,227,207,.10),transparent 30rem),
    linear-gradient(180deg,rgba(13,36,30,.94),rgba(7,23,19,.96));
  box-shadow:
    0 28px 80px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease;
}
.network-form:focus-within{
  border-color:rgba(107,227,207,.48);
  box-shadow:
    0 34px 88px rgba(0,0,0,.28),
    0 0 0 1px rgba(107,227,207,.07),
    0 0 42px rgba(107,227,207,.07);
}
.network-form::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 0 32%,rgba(107,227,207,.035) 48%,transparent 64%);
}
.network-form h3{
  margin-bottom:6px;
  font-size:clamp(22px,3vw,30px);
  letter-spacing:-.025em;
}
.network-form .privacy-boundary{margin:18px 0 24px}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 20px;
}
.form-field{display:grid;gap:8px;min-width:0}
.form-field.full{grid-column:1/-1}
.form-field label,.fieldset-title{
  font-size:13px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.025em;
  color:#e7f4ef;
}
.form-field .source,.fieldset-title .source{font-weight:650;color:#9fb7ae}
.form-field input:not([type="checkbox"]),
.form-field select,
.form-field textarea{
  width:100%;
  min-height:52px;
  border:1px solid rgba(86,145,128,.66);
  border-radius:15px;
  background:
    linear-gradient(180deg,rgba(8,30,24,.94),rgba(5,23,18,.98));
  color:var(--text);
  padding:13px 15px;
  font:inherit;
  font-size:15px;
  line-height:1.35;
  caret-color:var(--aqua);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 18px rgba(0,0,0,.08);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}
.form-field input::placeholder,.form-field textarea::placeholder{color:#76978c;opacity:1}
.form-field select{
  appearance:none;
  padding-right:46px;
  cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,#6be3cf 50%),
    linear-gradient(135deg,#6be3cf 50%,transparent 50%),
    linear-gradient(180deg,rgba(8,30,24,.94),rgba(5,23,18,.98));
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%,
    0 0;
  background-size:6px 6px,6px 6px,100% 100%;
  background-repeat:no-repeat;
}
.form-field option{background:#071713;color:#f4fbf8}
.form-field textarea{min-height:118px;resize:vertical}
.form-field input:not([type="checkbox"]):hover,
.form-field select:hover,
.form-field textarea:hover{border-color:rgba(107,227,207,.54)}
.form-field input:not([type="checkbox"]):focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible{
  outline:none;
  border-color:var(--aqua);
  background:
    linear-gradient(180deg,rgba(10,38,30,.98),rgba(5,24,19,.99));
  box-shadow:
    0 0 0 3px rgba(107,227,207,.15),
    0 12px 26px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.04);
  transform:translateY(-1px);
}
.choices{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:9px;
}
.choice{
  position:relative;
  display:flex;
  align-items:center;
  min-height:48px;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(73,120,107,.56);
  border-radius:14px;
  background:rgba(8,31,25,.76);
  color:#bfd2cb;
  font-size:12px;
  font-weight:750;
  line-height:1.2;
  cursor:pointer;
  user-select:none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}
.choice:hover{
  border-color:rgba(107,227,207,.48);
  background:rgba(11,43,34,.86);
  color:#e8f6f1;
  transform:translateY(-1px);
}
.choice:has(input:focus-visible){
  outline:3px solid rgba(107,227,207,.16);
  outline-offset:2px;
}
.choice:has(input:checked){
  border-color:rgba(107,227,207,.8);
  background:linear-gradient(135deg,rgba(107,227,207,.15),rgba(107,227,207,.065));
  color:#f3fbf8;
  box-shadow:0 9px 22px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.035);
}
.choice input[type="checkbox"],
.consent-row input[type="checkbox"]{
  appearance:none;
  flex:0 0 auto;
  width:19px;
  height:19px;
  margin:0;
  border:1px solid rgba(157,199,186,.78);
  border-radius:6px;
  background:#061913;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background 150ms ease,border-color 150ms ease,box-shadow 150ms ease,transform 150ms ease;
}
.choice input[type="checkbox"]::after,
.consent-row input[type="checkbox"]::after{
  content:"";
  width:9px;
  height:5px;
  border-left:2px solid #052019;
  border-bottom:2px solid #052019;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform 130ms ease;
}
.choice input[type="checkbox"]:checked,
.consent-row input[type="checkbox"]:checked{
  border-color:var(--aqua);
  background:var(--aqua);
  box-shadow:0 0 0 3px rgba(107,227,207,.12);
}
.choice input[type="checkbox"]:checked::after,
.consent-row input[type="checkbox"]:checked::after{transform:rotate(-45deg) scale(1)}
.consent-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:10px;
  padding:14px 15px;
  border:1px solid rgba(73,120,107,.42);
  border-radius:14px;
  background:rgba(7,27,22,.72);
  color:#bbcec7;
  font-size:13px;
  line-height:1.55;
  cursor:pointer;
  transition:border-color 160ms ease,background 160ms ease,box-shadow 160ms ease;
}
.consent-row:hover{border-color:rgba(107,227,207,.42);background:rgba(9,35,28,.78)}
.consent-row:has(input:checked){
  border-color:rgba(107,227,207,.56);
  background:rgba(107,227,207,.07);
}
.consent-row:has(input:focus-visible){
  outline:3px solid rgba(107,227,207,.16);
  outline-offset:2px;
}
.consent-row strong{color:#edf8f4}
#networkSubmit{
  min-height:46px;
  margin-top:14px;
  padding-inline:20px;
  box-shadow:0 10px 24px rgba(107,227,207,.10);
  transition:transform 160ms ease,box-shadow 160ms ease,filter 160ms ease;
}
#networkSubmit:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(107,227,207,.16);
  filter:brightness(1.035);
}
.network-form .source{line-height:1.55}
@media(max-width:850px){
  .form-grid{grid-template-columns:1fr}
  .form-field.full{grid-column:auto}
  .choices{grid-template-columns:repeat(auto-fit,minmax(138px,1fr))}
}
@media(max-width:520px){
  .network-form{padding:19px 16px}
  .choices{grid-template-columns:1fr 1fr}
  .choice{min-height:50px;padding:10px;font-size:11px}
}
@media(max-width:380px){.choices{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .network-form,
  .form-field input,
  .form-field select,
  .form-field textarea,
  .choice,
  .choice input,
  .consent-row,
  #networkSubmit{transition:none!important;transform:none!important}
}