/* ============================================================
   TLV Medical — Incident Reporting · Brand System
   Clean · calm · clinical · white with subtle teal
   ============================================================ */
:root{
  /* surfaces */
  --bg:#EAF2F3;
  --bg-2:#F2F8F9;
  --surface:#FFFFFF;
  --fill:#F4FAFB;          /* subtle teal-tint for inputs / options */
  --fill-hover:#ECF6F7;
  /* brand teal (sampled from the heart logo) */
  --brand-700:#00697A;
  --brand-600:#00859A;
  --brand-500:#009AAE;
  --brand-400:#00B1BF;
  --grad:linear-gradient(135deg,#00B6C4 0%,#007E8D 60%,#00697A 100%);
  --grad-soft:linear-gradient(135deg,#E4F4F6,#F2FAFB);
  /* ink + text */
  --ink:#0B3942;           /* headings, deep teal */
  --ink-2:#13525D;
  --text:#234A50;          /* body */
  --muted:#6E9098;         /* secondary */
  --on-brand:#F4FBFC;
  /* lines */
  --line:#DDEAEC;
  --line-2:#C2D6D9;
  /* status */
  --danger:#C2453F;
  --ok:#1C8A6B;
  --gold:#C8923D;
  /* type */
  --fh:'Frank Ruhl Libre',serif;
  --fb:'Heebo',sans-serif;
  /* shape */
  --r-card:20px;
  --r:12px;
  --r-sm:9px;
  --shadow:0 1px 2px rgba(11,57,66,.05),0 10px 34px rgba(11,57,66,.07);
  --shadow-sm:0 1px 3px rgba(11,57,66,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--fb);
  background:var(--bg);
  background-image:radial-gradient(120% 90% at 50% -10%,#F4FAFB 0%,var(--bg) 60%);
  color:var(--text);
  min-height:100vh;
  padding:30px 16px 56px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:780px;margin:0 auto}

/* ---------- card shell ---------- */
.card{
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.card::before{                       /* slim brand accent at the very top */
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--grad);z-index:2;
}

/* ---------- header (logo + wordmark + contact) ---------- */
.head{
  padding:34px 40px 22px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:58px;width:auto;display:block}
.brand .word{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.brand .word .name{
  font-family:var(--fh);font-weight:700;font-size:27px;color:var(--brand-600);letter-spacing:.2px;white-space:nowrap;
}
.brand .word .name span{color:var(--brand-600)}
.brand .word .sub{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.22em;text-transform:uppercase;margin-top:6px;white-space:nowrap}
.head .contact{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.7;white-space:nowrap}
.head .contact strong{color:var(--ink-2);font-weight:600}

/* ---------- title band ---------- */
.titlebar{
  background:var(--grad-soft);
  padding:22px 40px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.titlebar .eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;color:var(--brand-700);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:8px;
}
.titlebar .eyebrow::before{content:"";width:18px;height:1.5px;background:var(--brand-500);border-radius:2px}
.titlebar .eyebrow::after{content:"";width:18px;height:1.5px;background:var(--brand-500);border-radius:2px}
.titlebar h1{font-family:var(--fh);font-weight:700;font-size:26px;color:var(--ink)}
.titlebar p{color:var(--ink-2);font-size:13.5px;font-weight:300;margin-top:5px}

/* ---------- body ---------- */
.body{padding:32px 40px 36px}

/* ---------- section ---------- */
.sec{margin-bottom:30px}
.sec:last-of-type{margin-bottom:8px}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sec-head .num{
  flex-shrink:0;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fb);font-weight:700;font-size:13px;
  color:#fff;background:var(--grad);box-shadow:0 3px 8px rgba(0,126,141,.25);
}
.sec-head h2{font-family:var(--fh);font-weight:700;font-size:19px;color:var(--ink)}
.sec-head .hint{font-size:11px;color:var(--muted);font-weight:400;margin-right:auto;background:var(--fill);padding:3px 10px;border-radius:20px}
.divider{border:none;border-top:1px solid var(--line);margin:0 0 24px}

/* ---------- layout helpers ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field:last-child{margin-bottom:0}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field label .req{color:var(--danger);margin-right:3px;font-size:10px;vertical-align:middle}
input[type=text],input[type=number],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--fb);font-size:14.5px;color:var(--ink);
  background:var(--fill);outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand-500);background:#fff;
  box-shadow:0 0 0 3.5px rgba(0,154,174,.13);
}
input::placeholder,textarea::placeholder{color:#A9C2C6;font-weight:300}
textarea{resize:vertical;min-height:96px;line-height:1.6}
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300859A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center;padding-left:34px;
}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--danger);background:#FCF4F3}
.note{font-size:11.5px;color:var(--muted);font-weight:300}

/* ---------- inline rows ---------- */
.inline-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.inline-label{font-size:12.5px;font-weight:600;color:var(--ink-2)}

/* ---------- date / time ---------- */
.time-inputs{display:flex;align-items:center;gap:5px;direction:ltr;width:fit-content}
.time-inputs input{width:58px;text-align:center;font-size:15.5px;font-weight:600;padding:10px 6px}
.time-sep{font-weight:700;font-size:18px;color:var(--muted)}
.now-btn{
  padding:0 14px;height:42px;background:var(--fill);color:var(--brand-700);
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  font-family:var(--fb);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:all .14s;white-space:nowrap;
}
.now-btn:hover{background:var(--brand-600);color:#fff;border-color:var(--brand-600)}

/* ---------- option cards (checkbox/radio grid) ---------- */
.opts{display:grid;gap:9px}
.opts.cols-1{grid-template-columns:1fr}
.opts.cols-2{grid-template-columns:1fr 1fr}
.opts.cols-3{grid-template-columns:1fr 1fr 1fr}
.opt{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--fill);cursor:pointer;font-size:13.5px;color:var(--ink-2);
  transition:all .13s;user-select:none;
}
.opt:hover{border-color:var(--line-2);background:var(--fill-hover)}
.opt.checked{border-color:var(--brand-500);background:#fff;box-shadow:inset 0 0 0 1px var(--brand-500);font-weight:600;color:var(--ink)}
.opt input{display:none}
.opt .box{
  width:18px;height:18px;border:1.5px solid var(--line-2);border-radius:5px;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:#fff;transition:all .13s;
}
.opt.checked .box{background:var(--grad);border-color:transparent;color:#fff;font-size:11px;font-weight:700}
.opt.checked .box::after{content:"✓"}
.opt.radio .box{border-radius:50%}
.opt.radio.checked .box{background:var(--grad)}
.opt.radio.checked .box::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}

/* ---------- pills ---------- */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:22px;border:1.5px solid var(--line);
  background:var(--fill);cursor:pointer;font-size:13px;color:var(--muted);
  font-weight:500;transition:all .13s;user-select:none;
}
.pill:hover{border-color:var(--line-2);color:var(--ink-2)}
.pill.checked{background:var(--grad);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 3px 9px rgba(0,126,141,.22)}
.pill input{display:none}

/* ---------- conditional block ---------- */
.cond{margin-top:11px;padding-right:15px;border-right:2px solid var(--line)}

/* ---------- upload ---------- */
.upload{
  display:flex;align-items:center;gap:15px;padding:20px;
  border:2px dashed var(--line-2);border-radius:var(--r);
  background:var(--fill);cursor:pointer;transition:all .15s;
}
.upload:hover{border-color:var(--brand-500);background:var(--fill-hover)}
.upload .ic{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:var(--grad-soft);display:flex;align-items:center;justify-content:center;
  color:var(--brand-600);
}
.upload .ic svg{width:22px;height:22px;stroke:var(--brand-600);fill:none;stroke-width:1.7}
.upload .copy b{display:block;font-size:13.5px;color:var(--ink-2);font-weight:600}
.upload .copy span{font-size:11.5px;color:var(--muted);font-weight:300}
.upload input{display:none}
.fname{font-size:12.5px;color:var(--ok);font-weight:600;margin-top:8px}

/* ---------- signature ---------- */
.sig-card{position:relative;border:1.5px solid var(--line-2);border-radius:var(--r);background:#fff;overflow:hidden}
.sig-card.signed{border-color:var(--ok);box-shadow:0 0 0 2px rgba(28,138,107,.16)}
.sig-canvas{display:block;width:100%;height:128px;cursor:crosshair;touch-action:none}
.sig-x{position:absolute;top:50%;right:24px;left:24px;border-top:1.5px dashed var(--line-2);transform:translateY(10px);pointer-events:none}
.sig-tools{position:absolute;top:10px;left:12px;display:flex;align-items:center;gap:9px}
.sig-tools .label{font-size:11.5px;color:var(--muted);font-weight:600}
.sig-card.signed .sig-tools .label{color:var(--ok)}
.sig-clear{background:#fff;border:1px solid var(--line-2);border-radius:6px;font-size:11px;color:var(--muted);padding:3px 10px;cursor:pointer;font-family:var(--fb)}
.sig-clear:hover{border-color:var(--danger);color:var(--danger)}

/* ---------- submit ---------- */
.submit{
  width:100%;padding:16px;margin-top:6px;
  background:var(--grad);color:#fff;border:none;border-radius:14px;
  font-family:var(--fh);font-size:18px;font-weight:700;cursor:pointer;
  box-shadow:0 8px 22px rgba(0,126,141,.26);
  transition:transform .18s,box-shadow .18s,filter .18s;
}
.submit:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,126,141,.32);filter:saturate(1.08)}
.submit:active{transform:translateY(0)}
.submit:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- footer ---------- */
.foot{
  background:var(--bg-2);color:var(--muted);
  text-align:center;padding:15px;font-size:12px;font-weight:300;
  border-top:1px solid var(--line);
}
.foot strong{color:var(--ink-2);font-weight:600}

/* ---------- success overlay ---------- */
.overlay{display:none;position:fixed;inset:0;background:rgba(11,57,66,.55);z-index:99;align-items:center;justify-content:center;backdrop-filter:blur(5px);padding:20px}
.overlay.show{display:flex}
.ovbox{background:#fff;border-radius:22px;padding:42px 38px;text-align:center;max-width:400px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.25);animation:pop .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.ovbox .check{width:66px;height:66px;margin:0 auto 16px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center}
.ovbox .check svg{width:34px;height:34px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ovbox h2{font-family:var(--fh);font-size:24px;color:var(--ink);margin-bottom:7px}
.ovbox p{color:var(--muted);font-size:14px;font-weight:300;margin-bottom:6px}
.ovbox .ref{font-family:'Heebo',monospace;font-size:13px;color:var(--brand-700);background:var(--fill);padding:8px 14px;border-radius:9px;display:inline-block;margin:10px 0 20px;font-weight:600;letter-spacing:.05em}
.ovbox button{padding:11px 32px;background:var(--ink);color:#fff;border:none;border-radius:10px;font-family:var(--fb);font-size:15px;font-weight:600;cursor:pointer;transition:background .15s}
.ovbox button:hover{background:var(--ink-2)}

/* ---------- responsive ---------- */
@media(max-width:600px){
  body{padding:16px 10px 40px}
  .head{padding:26px 22px 18px}
  .brand img{height:50px}
  .brand .word .name{font-size:23px}
  .titlebar{padding:18px 22px}
  .titlebar h1{font-size:22px}
  .body{padding:24px 20px 28px}
  .grid-2,.grid-3,.opts.cols-2,.opts.cols-3{grid-template-columns:1fr}
  .sec-head h2{font-size:17px}
}