:root{--p:#1f4e79;--d:#173a59;--l:#ddebF7;--g:#70ad47;--bg:#f6f8fb;--line:#d9e2f3;--red:#b42318}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:#20242a}.hero{background:linear-gradient(135deg,var(--p),var(--d));color:#fff;padding:34px 5vw;display:flex;justify-content:space-between;gap:20px;align-items:center}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.78rem;opacity:.85}h1{font-size:clamp(2rem,4vw,3.25rem);margin:.2rem 0}.hero p{max-width:780px}.card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 14px 30px rgba(31,78,121,.12);padding:24px}main{width:min(1500px,94vw);margin:28px auto 60px;display:grid;gap:22px}.grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(340px,.8fr);gap:22px;align-items:start}.fields,.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.notes{grid-template-columns:1fr 1fr 220px;margin-top:18px}label{display:grid;gap:7px;font-weight:700;color:var(--d)}input,select,textarea{border:1px solid #bdc8d8;border-radius:12px;padding:11px 12px;font:inherit;width:100%;background:white}textarea{min-height:80px}.scale,.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.scale span,.kpis div{background:var(--l);border:1px solid var(--line);border-radius:14px;padding:14px}.kpis{grid-template-columns:repeat(4,1fr)}.kpis span{display:block;color:#667085;font-weight:700}.kpis b{display:block;color:var(--p);font-size:1.6rem;margin-top:8px}.row{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px}.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer;background:#e2f0d9;color:#2f5f1d}.primary{background:var(--p);color:#fff}.light{background:white;color:var(--p);margin-right:10px}.danger{background:#fef3f2;color:var(--red)}.wide{width:100%;margin-top:18px}.question{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin-bottom:10px}.question p{margin:0;line-height:1.35}.radios{display:flex;gap:10px}.radios label{display:inline-flex;align-items:center;gap:4px;color:#20242a}.radios input{width:auto}.score-row{display:grid;grid-template-columns:1fr 44px;gap:10px;align-items:center;margin:8px 0}.bar{background:#eef2f7;border-radius:99px;height:12px;overflow:hidden}.fill{background:var(--g);height:100%}.charts{display:grid;grid-template-columns:1.5fr .8fr;gap:24px;margin-top:28px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:820px}th{background:var(--p);color:white;text-align:left;padding:12px}td{border-bottom:1px solid var(--line);padding:12px}tr:nth-child(even) td{background:#fafcff}.delete{border:1px solid #ffd0d0;background:#fff0f0;color:var(--red);border-radius:10px;padding:7px 10px;cursor:pointer}@media(max-width:1100px){.grid,.charts{grid-template-columns:1fr}.fields,.notes,.scale,.kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.fields,.notes,.scale,.kpis{grid-template-columns:1fr}.question{grid-template-columns:1fr}.radios{flex-wrap:wrap}.hero{flex-direction:column;align-items:flex-start}}
.hero a.btn { text-decoration: none; }
.hero > div:last-child { display: flex; gap: 10px; flex-wrap: wrap; }
.notice { background:#e2f0d9; border:1px solid #9ccc83; color:#2f5f1d; border-radius:12px; padding:12px; font-weight:700; }
.form-preview { margin-top:20px; }


/* =========================================================
   Mobile + Tablet Responsive Upgrade
   ========================================================= */

html {
  scroll-behavior: smooth;
}

img,
canvas,
svg {
  max-width: 100%;
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.hero {
  flex-wrap: wrap;
}

.hero-actions,
.hero > div:last-child {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-actions .btn,
.hero > div:last-child .btn {
  justify-content: center;
}

.card {
  overflow: hidden;
}

#questionsContainer {
  display: grid;
  gap: 10px;
}

.question {
  min-width: 0;
}

.question p {
  overflow-wrap: anywhere;
}

.radios {
  align-items: center;
  justify-content: flex-end;
}

.radios label {
  min-width: 36px;
  justify-content: center;
}

canvas {
  width: 100% !important;
  max-height: 430px;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}

.table-wrap table {
  margin-bottom: 0;
}

/* Tablet */
@media (max-width: 1100px) {
  main {
    width: min(96vw, 980px);
  }

  .hero {
    align-items: flex-start;
  }

  .hero-actions,
  .hero > div:last-child {
    width: 100%;
  }

  .hero-actions .btn,
  .hero > div:last-child .btn {
    flex: 1 1 190px;
  }

  .charts,
  .form-preview-grid {
    grid-template-columns: 1fr;
  }

  .fields,
  .notes,
  .scale,
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .radios {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Phones */
@media (max-width: 700px) {
  body {
    font-size: 15px;
  }

  .hero {
    padding: 24px 18px;
  }

  h1 {
    font-size: 2rem;
    line-height: 1.1;
  }

  h2 {
    font-size: 1.35rem;
  }

  h3 {
    font-size: 1.05rem;
  }

  main {
    width: 94vw;
    margin: 18px auto 36px;
    gap: 16px;
  }

  .card {
    border-radius: 16px;
    padding: 18px;
  }

  .fields,
  .notes,
  .scale,
  .kpis {
    grid-template-columns: 1fr;
  }

  .row {
    display: grid;
    gap: 10px;
    align-items: stretch;
  }

  .row .btn,
  .btn,
  .hero-actions .btn,
  .hero > div:last-child .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  input,
  select,
  textarea {
    font-size: 16px; /* prevents iOS zoom */
    min-height: 44px;
  }

  textarea {
    min-height: 110px;
  }

  .scale span,
  .kpis div {
    padding: 12px;
  }

  .kpis b {
    font-size: 1.35rem;
  }

  .question {
    padding: 14px;
  }

  .question p {
    font-size: 0.96rem;
  }

  .radios {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: 100%;
  }

  .radios label {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 6px;
    background: #fff;
  }

  .radios input {
    transform: scale(1.15);
  }

  .score-row {
    grid-template-columns: 1fr 38px;
  }

  canvas {
    max-height: 360px;
  }

  table {
    min-width: 760px;
    font-size: 0.9rem;
  }

  th,
  td {
    padding: 10px;
  }
}

/* Small phones */
@media (max-width: 420px) {
  .hero {
    padding: 22px 14px;
  }

  h1 {
    font-size: 1.72rem;
  }

  main {
    width: 96vw;
  }

  .card {
    padding: 14px;
  }

  .question {
    padding: 12px;
  }

  .radios {
    gap: 6px;
  }

  .radios label {
    padding: 8px 4px;
    font-size: 0.9rem;
  }

  table {
    min-width: 700px;
  }
}

/* Better embedded iframe behavior */
@media (max-width: 900px) {
  body.embedded main,
  main.embedded {
    width: 100%;
    margin: 0;
  }
}


/* Saveable pastoral fields in dashboard rows */
.row-note {
  min-width: 220px;
  min-height: 88px;
  resize: vertical;
}

.save-row-btn {
  white-space: nowrap;
  justify-content: center;
}

#responsesTable input[type="date"] {
  min-width: 150px;
}

@media (max-width: 700px) {
  .row-note {
    min-width: 240px;
  }

  .save-row-btn {
    width: 100%;
  }
}

/* Sticky Directions + Progress + Top Gifts + Autosave */
.sticky-reference{position:sticky;top:0;z-index:60;border:2px solid var(--p)}
.sticky-topline{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sticky-topline h2{margin:0}.compact-toggle,.tiny{padding:8px 12px;font-size:.9rem}
.mini-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}
.mini-scale span{background:var(--l);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;font-size:.9rem}
.progress-block{display:grid;gap:8px;margin:12px 0}.progress-label{display:flex;justify-content:space-between;gap:12px;color:var(--d)}
.progress-shell{height:12px;background:#eef2f7;border-radius:999px;overflow:hidden}.progress-bar{width:0%;height:100%;background:var(--g);transition:width .25s ease}
.top-gifts-preview{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:12px;margin:12px 0}.top-gifts-preview ol{margin:8px 0 0 22px;padding:0}.top-gifts-preview li{margin:4px 0}
.autosave-status{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#667085;font-size:.92rem}
@media(min-width:1000px){.sticky-reference{top:10px}}
@media(max-width:700px){.sticky-reference{top:0;border-radius:0 0 16px 16px;margin-left:-3vw;margin-right:-3vw}.mini-scale{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.mini-scale span{padding:7px 4px;font-size:.75rem}.progress-label,.autosave-status{display:grid;gap:6px}.autosave-status .btn{width:100%}}


/* Better offline mode + true sticky directions header */
.sticky-reference {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  border-radius: 0 0 18px 18px !important;
  border: 2px solid var(--p) !important;
  box-shadow: 0 12px 28px rgba(31,78,121,.22) !important;
}

.sticky-reference .mini-scale {
  align-items: stretch;
}

#offlineSubmitStatus {
  display: inline-block;
  color: var(--p);
  font-weight: 700;
}

#offlineStatus.notice {
  display: block;
}

@media (min-width: 900px) {
  .sticky-reference {
    top: 0 !important;
  }
}

@media (max-width: 700px) {
  .sticky-reference {
    margin-left: -3vw;
    margin-right: -3vw;
    max-height: 72vh;
    overflow-y: auto;
  }

  #stickyPanelBody[hidden] {
    display: none;
  }
}


/* Required responses + Row ID display */
.question:has(input:required) {
  scroll-margin-top: 260px;
}

#responsesTable td:first-child,
#responsesTable th:first-child {
  max-width: 190px;
  overflow-wrap: anywhere;
  font-size: 0.86rem;
}

input:invalid,
select:invalid {
  border-color: #b42318;
}


/* =========================================================
   Sticky Directions + Scrollable Responses Layout
   ========================================================= */

body {
  overflow-x: hidden;
}

.sticky-directions-card {
  position: sticky !important;
  top: 0 !important;
  z-index: 1200 !important;
  border: 2px solid var(--p) !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 14px 30px rgba(31,78,121,.22) !important;
  max-height: 42vh;
  overflow-y: auto;
}

.responses-scroll-card {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 18px;
}

.responses-scroll-card .question {
  scroll-margin-top: 24px;
}

label:has(select[required])::after,
label:has(input[required])::after {
  content: "Required";
  color: #b42318;
  font-size: 0.78rem;
  font-weight: 800;
  justify-self: start;
}

select:required:invalid,
input:required:invalid {
  border-color: #b42318;
  background: #fffafa;
}

@media (min-width: 1000px) {
  .sticky-directions-card {
    top: 0 !important;
  }

  .responses-scroll-card {
    max-height: calc(100vh - 245px);
  }
}

@media (max-width: 900px) {
  .sticky-directions-card {
    max-height: 48vh;
  }

  .responses-scroll-card {
    max-height: calc(100vh - 260px);
  }
}

@media (max-width: 700px) {
  .sticky-directions-card {
    margin-left: -3vw;
    margin-right: -3vw;
    max-height: 50vh;
  }

  .responses-scroll-card {
    max-height: none;
    overflow-y: visible;
  }
}


/* Red asterisk before first radio option */
.radios label:first-child::before {
  content: "*";
  color: #b42318;
  font-weight: 800;
  margin-right: 4px;
}


/* Dashboard-only pastoral follow-up fields */
.row-note {
  min-width: 220px;
  min-height: 88px;
  resize: vertical;
}

.save-row-btn {
  white-space: nowrap;
  justify-content: center;
}

#responsesTable input[type="date"] {
  min-width: 150px;
}


/* =========================================================
   Embeddable Website Mode
   ========================================================= */

body.embedded-dashboard,
body.embedded-survey-form {
  background: transparent;
}

body.embedded-dashboard main,
body.embedded-survey-form main {
  width: min(1500px, 100%);
  margin: 0 auto 40px;
  padding: 18px;
}

body.embedded-dashboard .hero,
body.embedded-survey-form .hero {
  border-radius: 0 0 18px 18px;
}

@media (max-width: 700px) {
  body.embedded-dashboard main,
  body.embedded-survey-form main {
    width: 100%;
    padding: 10px;
  }
}


/* Email + Membership Status update */
.kpis {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

#responsesTable td:nth-child(3),
#responsesTable th:nth-child(3) {
  min-width: 190px;
}

/* Row ID tools + search + confirmation */
.assessment-search-wrap { margin: 14px 0 18px; max-width: 520px; }
.row-id-cell { width: 190px; min-width: 190px; max-width: 190px; vertical-align: top; }
.row-id-text { white-space: normal; overflow-wrap: anywhere; word-break: break-word; font-family: Consolas, Monaco, monospace; font-size: .85rem; line-height: 1.25; }
.copy-row-id-btn, .tiny { padding: 7px 10px; font-size: .82rem; margin-top: 8px; margin-right: 6px; }
.submission-confirmation { border: 2px solid var(--g); }
.confirmation-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.confirmation-grid div { background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.confirmation-grid p { margin: 6px 0 0; }
.confirmation-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media(max-width:700px){ .confirmation-grid{grid-template-columns:1fr;} .row-id-cell{min-width:180px;} }
@media print { .hero, .directions-card, #surveyForm, .confirmation-actions { display:none !important; } .submission-confirmation { display:block !important; box-shadow:none; border:0; } }