[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: linear-gradient(135deg, #eef2ff 0%, #f3f4f6 60%, #e0f2fe 100%);
}

#page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* Before a questionnaire is loaded, center the start card on screen */
#page.empty {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.toolbar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
}

.btn {
  display: inline-block;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible,
#fileInput:focus-visible + .btn {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

.btn-primary { background: #2563eb; }
.btn-primary:hover { background: #1d4ed8; }

.error {
  color: #b00020;
  text-align: center;
}

.btn-secondary { background: #4b5563; }
.btn-secondary:hover { background: #374151; }

.survey-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.survey-header h1 {
  margin: 0;
  font-size: 28px;
  color: #111827;
}

/* Start screen shows only the picker card; a loaded questionnaire shows header + survey. */
#page.empty .survey-header,
#page.empty #surveyContainer,
#page.empty #afterSubmit { display: none; }

#page:not(.empty) .picker { display: none; }

/* ---------- start screen ---------- */

.picker-card {
  width: min(440px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 40px 32px 32px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.12);
  text-align: center;
}

.picker-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  background: #eff6ff;
  border-radius: 50%;
}

.app-title { margin: 0 0 8px; font-size: 34px; letter-spacing: -0.5px; color: #111827; }
.picker-text { margin: 0 0 28px; font-size: 16px; line-height: 1.5; color: #6b7280; }

.btn-large { padding: 14px 40px; font-size: 17px; }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 20px;
  color: #9ca3af;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }

.templates {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.template-link {
  display: inline-block;
  background: none;
  font-family: inherit;
  cursor: pointer;
  padding: 10px 20px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.template-link:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }

/* ---------- admin panel ---------- */

.admin { position: relative; }

.icon { width: 18px; height: 18px; flex: none; }

.admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #374151;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s, background 0.15s;
}
.admin-toggle:hover { border-color: #9ca3af; background: #f9fafb; }
.admin-toggle[aria-expanded="true"] { border-color: #2563eb; color: #2563eb; }
.admin-toggle:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.admin-toggle .chevron { width: 16px; height: 16px; transition: transform 0.2s; }
.admin-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.admin-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.18);
  z-index: 10;
}

.admin-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: #111827;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.admin-menu button .icon { color: #6b7280; }
.admin-menu button:hover { background: #f3f4f6; }
.admin-menu button:hover .icon { color: #2563eb; }
.admin-menu button:focus-visible { outline: 2px solid #93c5fd; }

.admin-menu button.danger,
.admin-menu button.danger .icon { color: #dc2626; }
.admin-menu button.danger:hover { background: #fee2e2; }

.admin-menu button:disabled { color: #9ca3af; cursor: not-allowed; background: none; }
.admin-menu button:disabled .icon { color: #d1d5db; }

.menu-sep { height: 1px; margin: 6px 4px; background: #e5e7eb; }

/* ---------- wide matrices (e.g. 21-column NASA TLX) ---------- */

/* SurveyJS gives every matrix column a large minimum width, which pushes wide
   rating scales off-screen. Let the answer columns shrink to fit instead. */
.sd-matrix__table {
  --sd-table-cell-min-width: 32px;
}

.sd-matrix__table .sd-table__cell {
  padding-inline: 2px;
  text-align: center;
}

.sd-matrix__table .sd-table__cell--row-text {
  min-width: 180px;
  text-align: start;
  padding-inline: 8px;
}

/* On wide scales, let a header label (e.g. "Perfect") overflow its narrow column instead of
   stretching the column and misaligning the radios against other matrices. The first label
   grows to the right and the last to the left, so neither is clipped at the card edge. */
.sd-matrix__table:has(thead th:nth-child(11)) thead .sd-table__cell--header > .sv-string-viewer {
  display: flex;
  justify-content: center;
  width: 0;
  margin-inline: auto;
  overflow: visible;
  white-space: nowrap;
}

.sd-matrix__table:has(thead th:nth-child(11)) thead th:nth-child(2) > .sv-string-viewer {
  justify-content: flex-start;
  margin-inline: 0 auto;
}

.sd-matrix__table:has(thead th:nth-child(11)) thead th:last-child > .sv-string-viewer {
  justify-content: flex-end;
  margin-inline: auto 0;
}