<!--TPCC Style Theme-->
@font-face{
  font-family:"Captain Nelson";
  src:url("https://static1.squarespace.com/static/5346bb2de4b051e49e685f01/t/6853404b33c5824418507f82/1750286411491/CaptainNelson-f") format("opentype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

/* ---------- Design System ---------- */

:root{
--bg:#f7fbfd;
--card:#ffffff;
--border:#cfe5d6;

--accent:#2f6f4e;
--accent2:#2b5f8a;

--text:#102030;
--muted:rgba(16,32,48,.65);

--shadow:0 10px 24px rgba(0,0,0,.08);
--radius:18px;
}

/* ---------- Page ---------- */

body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background:var(--bg);
color:var(--text);
}

.wrap{
max-width:1120px;
margin:0 auto;
padding:18px;
}

/* ---------- Header ---------- */

header{
background:linear-gradient(135deg,rgba(47,111,78,.10),rgba(43,95,138,.08));
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:16px;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:16px;
}

.brand{
display:flex;
gap:14px;
align-items:center;
}

.logo{
width:64px;
height:64px;
border-radius:16px;
background:#fff;
border:1px solid var(--border);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.logo img{
width:100%;
height:100%;
object-fit:cover;
}

.titles h1{
margin:0;
font-family:"Captain Nelson",system-ui,sans-serif;
font-size:34px;
color:var(--accent);
}

.titles .sub{
margin-top:6px;
color:var(--muted);
font-size:14px;
}

/* ---------- Group Pill ---------- */

.pill{
border:1px solid var(--border);
background:#fff;
border-radius:999px;
padding:10px 12px;
font-size:13px;
color:var(--muted);
display:flex;
gap:8px;
align-items:center;
}

.pill strong{
color:var(--text);
}

.dot{
width:10px;
height:10px;
border-radius:50%;
background:var(--accent2);
}

/* ---------- Card ---------- */

.card{
margin-top:16px;
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:20px;
}

/* ---------- Sections ---------- */

.section-title{
font-family:"Captain Nelson",system-ui,sans-serif;
font-size:26px;
color:var(--accent2);
margin-bottom:12px;
}

/* ---------- Inputs ---------- */

label{
display:block;
font-size:13px;
color:var(--muted);
margin-bottom:6px;
}

input,
select,
textarea{
width:100%;
padding:12px;
border-radius:14px;
border:1px solid var(--border);
font-size:15px;
box-sizing:border-box;
background:#fff;
}

/* ---------- Buttons ---------- */

.btn{
border:1px solid var(--border);
background:#fff;
border-radius:14px;
padding:10px 14px;
cursor:pointer;
font-size:14px;
}

.btn.primary{
background:var(--accent);
border-color:var(--accent);
color:#fff;
}

/* ---------- Helpers ---------- */

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.titles .sub{
white-space: nowrap;
}

.question-label{
display:block;
margin-top:12px;
margin-bottom:6px;
font-weight:600;
color:#2b5f8a;
}

.radio-group{
display:flex;
flex-direction:column;
gap:6px;
margin-top:6px;
}

.radio-inline{
display:flex;
gap:24px;
align-items:center;
margin-top:4px;
}

.radio-option{
display:flex;
align-items:center;
gap:6px;
}

.radio-option input{
width:auto;
margin:0;
}

.checkbox-option{
display:flex;
align-items:flex-start;
gap:10px;
margin-top:10px;
cursor:pointer;
}

.checkbox-option input{
width:auto;
margin-top:3px;
}

.medical-section{
background:#e7dfc7;
padding:20px 24px;
border-radius:10px;
margin-top:20px;
}


/* Medical confirmation panel (inline, not a popup) */
#medReqWrap{
  position: static;
  left: auto;
  top: auto;
  transform: none;
  z-index: auto;
  max-width: none;
  width: auto;
  background: #fff;
  border: 2px solid #375a7f;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: none;
  margin-top: 14px;
}

/* (No backdrop needed; this is no longer a modal popup) */
@media(max-width:860px){
.grid{grid-template-columns:1fr;}
}

.divider{
height:1px;
background:var(--border);
margin:16px 0;
}

.notice{
border:1px dashed rgba(43,95,138,.35);
background:rgba(43,95,138,.06);
border-radius:14px;
padding:10px 12px;
font-size:13px;
color:var(--muted);
}

/* Dropdown box inside the yellow Medical section */
.med-dropdown{
  margin-top:14px;
  background:#ffffff;
  border:2px solid #375a7f;
  border-radius:12px;
  padding:14px 16px;
}

.med-dropdown-title{
  color:#375a7f;
  font-weight:700;
  margin-bottom:10px;
}

/* Align checkbox nicely */
.checkbox-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
}
.checkbox-option input{
  width:auto !important;
  margin-top:3px;
}