:root{
      --line:#1f1f1f;
      --muted:#666;
      --bg:#fff;
      --pad:10px;
      --gap:10px;
      --radius:6px;
      --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }
    
    
    header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
    header .title{ text-align:center; flex: 1; }
    h1{ margin:0; font-size: 24px; letter-spacing:.2px; }
    .sub{ margin-top:4px; font-size: 13px; color: var(--muted); }
    .meta{ font-size: 12px; color: var(--muted); white-space:nowrap; }

    fieldset{
      border: 2px solid var(--line);
      border-radius: var(--radius);
      padding: 12px;
      margin: 14px 0;
    }
    legend{
      font-weight: 700;
      padding: 0 8px;
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--gap);
    }
    .box{
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 8px;
      background:#fff;
    }
    .box label{
      display:block;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .box input[type="text"],
    .box input[type="email"],
    .box input[type="tel"],
    .box input[type="date"],
    .box textarea,
    .box select{
      width:100%;
      box-sizing:border-box;
      border:1px solid #bbb;
      border-radius: 6px;
      padding: 8px 10px;
      font-size: 14px;
      background:#fff;
    }
    .box textarea{ 
     width: 100%;
     min-height: 100px; /* pick what looks right */
     padding: 10px; 
     box-sizing: border-box;
     resize: vertical;  /* Chrome/desktop will show grip, iOS may ignore/grip hidden */
      -webkit-appearance: none;
     border-radius: 0;   /* optional, helps avoid iOS oddities */
    }

    .inline{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      align-items:center;
      margin-top: 2px;
    }
    .inline .opt{ display:flex; gap:8px; align-items:center; font-size: 14px; }
    .inline small{ color: var(--muted); }

    .note{
      font-size: 12px;
      color: var(--muted);
      margin-top: 10px;
      line-height: 1.35;
    }

    /* Column helpers */
    .c1{grid-column: span 1;}
    .c2{grid-column: span 2;}
    .c3{grid-column: span 3;}
    .c4{grid-column: span 4;}
    .c5{grid-column: span 5;}
    .c6{grid-column: span 6;}
    .c7{grid-column: span 7;}
    .c8{grid-column: span 8;}
    .c9{grid-column: span 9;}
    .c10{grid-column: span 10;}
    .c11{grid-column: span 11;}
    .c12{grid-column: span 12;}

    .actions{
      display:flex;
      gap:10px;
      justify-content:flex-end;
      margin-top: 16px;
    }
    button{
      border: 1px solid #111;
      border-radius: 10px;
      padding: 8px 8px;
      font-size: 12px;
      background:#111;
      color:#fff;
      cursor:pointer;
    }
    button.secondary{
      background:#fff;
      color:#111;
    }



    @media (max-width: 760px){
      body{ padding: 12px; }
      header{ flex-direction:column; }
      .meta{ align-self:flex-end; }
      .grid{ grid-template-columns: repeat(6, 1fr); }
      .c7,.c8,.c9,.c10,.c11,.c12{ grid-column: span 6; }
      .c6{ grid-column: span 6; }
      .c5{ grid-column: span 6; }
      .c4{ grid-column: span 6; }
      .c3{ grid-column: span 6; }
      .c2{ grid-column: span 6; }
      .c1{ grid-column: span 6; }
    }
    
    
   .error-summary{
    border:2px solid #b00020;
    background:#fff;
    border-radius:10px;
    padding:12px 14px;
    margin: 10px 0 14px;
  }
  .error-summary h2{ margin:0 0 8px; font-size:16px; }
  .error-summary ul{ margin:0; padding-left:18px;text-align: left;}
  .field-error{
    border-color:#b00020 !important;
    outline: 2px solid rgba(176,0,32,.15);
  }
  .help-error{
    color:#b00020;
    font-size:12px;
    margin-top:6px;
  }
  
  
/* Force the remove wrapper to span the full member width */
.member-remove-wrap{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  grid-column: 1 / -1;   /* KEY LINE */
  width: 100%;
  margin-top: 8px;
  margin-bottom: 12px;
}

/* Button sizing */
/* Remove button: visible, but clearly secondary/destructive */
.member-remove-wrap .removeMemberBtn{
  background-color: #f3f5f7;   /* neutral light gray-blue */
  border: 1px solid #8b2e2e;   /* muted nautical red */
  color: #7a1f1f;              /* deep, non-alarmist red */

  font-size: 0.9em;            /* Option B */
  padding: 8px 16px;           /* Option B */
  min-width: 220px;
  text-align: center;
}


/* Hover: subtle emphasis, not aggressive */
.member-remove-wrap .removeMemberBtn:hover{
  background-color: #f8eaea;
  border-color: #a63a3a;
  color: #8b0000;
}