:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --line: #d9dee7;
  --text: #17202f;
  --muted: #657084;
  --accent: #0f766e;
  --accent-dark: #115e59;
  --danger: #b42318;
}

* {
  box-sizing: border-box;
}

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

.form-shell {
  width: min(1200px, calc(100% - 20px));
  margin: 0 auto;
  padding: 12px 0 22px;
}

.intro {
  margin-bottom: 8px;
}

h1,
p {
  margin: 0;
}

h1 {
  font-size: 20px;
}

.intro .brand {
  margin-top: 3px;
  color: var(--accent-dark);
  font-weight: 700;
}

.intro p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.form-card {
  display: grid;
  gap: 12px;
}

/* Sections packed into columns so the whole form fits without scrolling.
   The horizontal column gap and the vertical gap between sections are kept
   equal (12px) so all three columns share the same rhythm. */
.sections {
  column-count: 2;
  column-gap: 12px;
}

/* Section blocks */
.group {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  box-shadow: 0 3px 10px rgba(24, 39, 75, 0.04);
  break-inside: avoid;
}

.group > legend {
  float: left;
  width: 100%;
  margin-bottom: 2px;
  padding: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.group > legend + * {
  clear: both;
}

/* Two-up field rows (collapse on small screens) */
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  align-items: start;
}

/* Stacked labelled field */
.field {
  display: grid;
  align-content: start;
  gap: 4px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
}

.field > span {
  color: var(--text);
}

.field em,
.consent em {
  color: var(--danger);
  font-style: normal;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

input,
select {
  min-height: 34px;
  padding: 0 8px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

input[readonly] {
  background: #f1f4f8;
  color: var(--muted);
}

textarea {
  min-height: 44px;
  padding: 7px 9px;
  resize: vertical;
}

.hint {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
}

/* Phone with country code */
.phone-group {
  display: flex;
  gap: 6px;
}

.phone-group select {
  width: auto;
  flex: 0 0 auto;
  padding: 0 6px;
}

.phone-group input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Radio / checkbox groups — flat (no card) and inline, so every legend and
   label lines up with the section's left edge and stays compact. */
.choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.choice > legend {
  flex-basis: 100%;
  padding: 0;
  margin-bottom: 1px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
}

.opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.opt input {
  width: auto;
  min-height: auto;
  margin: 0;
  accent-color: var(--accent);
}

.inline-other {
  flex-basis: 100%;
  margin-top: 2px;
}

.inline-other > span {
  font-size: 11.5px;
  font-weight: 650;
}

/* Day-of-week checkboxes packed onto a single even row */
.choice.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: 3px 6px;
}

.choice.days > legend {
  grid-column: 1 / -1;
}

.choice.days .opt {
  gap: 5px;
}

/* 1-5 scale */
.scale-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.scale-end {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.scale-opt {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.scale-opt input {
  width: auto;
  min-height: auto;
  margin: 3px 0 0;
  accent-color: var(--accent);
}

/* Voice recorder */
.voice-field {
  gap: 6px;
}

.voice-recorder {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: #fbfcfe;
}

.voice-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.voice-btn {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  font-weight: 700;
  cursor: pointer;
}

.voice-btn.recording {
  border-color: var(--danger);
  background: #fee4e2;
  color: var(--danger);
}

.voice-timer {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.voice-preview {
  width: 100%;
  height: 34px;
}

.upload-label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}

.voice-status {
  min-height: 16px;
  color: var(--accent-dark);
  font-size: 11.5px;
  font-weight: 650;
}

.hidden {
  display: none;
}

/* Consent */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.consent input {
  width: auto;
  min-height: auto;
  margin-top: 3px;
  accent-color: var(--accent);
}

.submit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

button[type="submit"] {
  min-height: 38px;
  padding: 0 20px;
  width: auto;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: default;
}

.status {
  flex: 1;
  min-width: 0;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 650;
}

/* Wide screens: three columns of sections (paired fields stay side by side) */
@media (min-width: 1280px) {
  .sections {
    column-count: 3;
  }
}

/* Phones: single column (scrolling is unavoidable here) */
@media (max-width: 760px) {
  .sections {
    column-count: 1;
  }

  .cols {
    grid-template-columns: 1fr;
  }
}