/* =====================================================================
   VA Diagnostic Code Translator – global styles
   ===================================================================== */

:root{
  --w-max:480px;
  --gap:1.1rem;

  --h-ctl:3.1rem;      /* desktop */
  --h-ctl-m:2.6rem;      /* phones (<480 px) */

  --fs-ctl:1.20rem;
  --fs-btn:1.25rem;
}

body{
  margin:0;
  background:#f3f5f8;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

#app{
  max-width:var(--w-max);
  margin:2.7rem auto;
  padding:0 1rem;
  text-align:center;
}

h1{
  margin-bottom:2.4rem;
  line-height:1.2;
}

/* ---------- text inputs (names + symptoms) ---------- */
input[type=text]{
  width:100%;
  height:var(--h-ctl);
  font-size:var(--fs-ctl);
  padding:0 .85rem;
  border:1px solid #c8c8c8;
  border-radius:4px;
  box-sizing:border-box;
}

.field{
  margin-bottom:var(--gap);
}

/* ---------- symptom rows ---------- */
.sym-row{
  display:flex;
  gap:.7rem;
  margin-bottom:var(--gap);
  align-items:center;
  position:relative;
}

.sym-row input[type=text],
.sym-row input[list]{
  flex:1 1 auto;
  min-width:0; /* allows shrinking on phones */
}

/* delete button (hidden on first row) */
.del{
  flex:0 0 var(--h-ctl);
  height:var(--h-ctl);
  border:0;
  border-radius:4px;
  background:#d63030;
  color:#fff;
  font-size:1.15rem;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0;
}

.del:hover{
  background:#b71c1c;
}

/* first row has no bin button */
.sym-row:first-child .del{
  display:none;
}

/* ---------- action buttons ---------- */
.btn{
  width:100%;
  height:var(--h-ctl);
  line-height:var(--h-ctl);
  margin-bottom:var(--gap);
  border:0;
  border-radius:4px;
  font-size:var(--fs-btn);
  font-weight:600;
  color:#fff;
  cursor:pointer;
}

.green{ 
  background:#19953b;
}
.green:hover{
  background:#14802d;
}
.blue{
  background:#0067ff;
}
.blue:hover{
  background:#0059e3;
}
.blue.light{
  background:#7eb7ff;
}
.blue.light:hover{
  background:#6aa4ec;
}
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* ---------- results + helper text ---------- */
#results{
  margin:1.3rem 0 .6rem;
  text-align:left;
  font-size:1.15rem;
}
#results label{ cursor:pointer; }
.msg{
  color:#c01616;
  font-size:1.05rem;
  margin-top:1rem;
}

/* ---------- layman section ---------- */
#layman-section input[type="text"]{
  box-sizing: border-box;
}

#layman-section .field{
  margin-bottom: var(--gap);
}

/* ---------- autocomplete dropdown ---------- */
.autocomplete-dropdown{
  max-height: 500px;
  overflow-y: auto;
}

/* ---------- mobile tweaks ---------- */
@media(max-width:480px){
  :root{
    --h-ctl:var(--h-ctl-m);
    --fs-ctl:1.08rem;
    --fs-btn:1.15rem;
  }
  .del{
    flex-basis:var(--h-ctl-m);
    height:var(--h-ctl-m);
    font-size:1rem;
  }
}