/* Vakna survey theme, layered over Fruity TwentyThree. Tokens come from vakna-tokens.css. */
:root {
  --bs-primary: var(--primary);
  --bs-secondary: var(--muted);
  --bs-body-color: var(--text);
  --bs-body-bg: var(--paper);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);
  --bs-danger: var(--danger);
  --bs-border-color: var(--line-strong);
  --bs-border-radius: var(--radius);
}

html body,
html body.fruity_twentythree {
  background: var(--paper) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: 1.0625rem;
  line-height: 1.55;
  padding-top: 0 !important;
}
body * { font-family: inherit; }
html body, html body * { hyphens: manual !important; }
html, body { overflow-x: clip; }
a { color: var(--primary); text-underline-offset: 0.15em; }
a:hover { color: var(--primary-hover); }
:focus-visible,
.form-control:focus,
.btn:focus,
.btn:focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--focus-halo) !important;
}

.skip-link { position: absolute; top: 8px; left: 8px; z-index: 1000; padding: 10px 16px; background: var(--surface); color: var(--primary); font-weight: 700; }

/* Header: white, logo left. */
.vakna-survey-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 10px max(16px, calc((100% - 828px) / 2));
}
.vakna-survey-header__brand { display: inline-flex; min-height: 44px; align-items: center; }
.vakna-logo { display: block; height: 32px; width: auto; }
.vakna-logo--dark { display: none; }
:root[data-theme="dark"] .vakna-logo--dark { display: block; }
:root[data-theme="dark"] .vakna-logo--light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="contrast"]) .vakna-logo--dark { display: block; }
  :root:not([data-theme="light"]):not([data-theme="contrast"]) .vakna-logo--light { display: none; }
}

/* Layout */
.row { --bs-gutter-x: 0; margin-inline: 0; }
.container-fluid { --bs-gutter-x: 0; padding-inline: 0; }
.top-container,
#outerframeContainer,
.outerframe { background: transparent !important; }
.top-container { padding-top: 12px !important; margin-top: 0 !important; }
.top-container .row > .top-content,
.group-container,
#main-col,
.question-container { max-width: 100%; }
.top-content { width: min(860px, 100%) !important; flex: none !important; padding-inline: 16px; }
#main-col, .group-outer-container { width: min(860px, 100%) !important; flex: none !important; margin-inline: auto; }
.group-outer-container, #outerframeContainer { padding-inline: 0; }

/* Progress */
.ls-progress-container .progress { height: 8px; background: var(--surface-2); border-radius: 0; outline: 1px solid var(--line-strong); }
.ls-progress-container .progress-bar { background: var(--primary); border-radius: 0; }

/* Group and question headings */
.group-title {
  font-family: var(--font-display) !important;
  font-weight: 800;
  color: var(--ink);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  line-height: 1.15;
  margin: 28px 0 12px;
  padding: 0;
}
.group-description { color: var(--text); font-size: 1.0625rem; margin-bottom: 8px; }
.group-container { padding-inline: 16px; }

.question-container {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none !important;
  padding: 22px clamp(16px, 3vw, 28px) !important;
  margin: 16px 0 !important;
  color: var(--text);
}
.question-title-container { padding: 0 !important; margin-bottom: 6px; }
.question-text, .ls-label-question, .question-text p { font-family: var(--font-display) !important; color: var(--ink) !important; font-size: 1.1875rem; font-weight: 700; line-height: 1.35; }
.question-valid-container, .ls-question-message, .ls-questionhelp, .ls-question-help { color: var(--muted) !important; font-size: 1rem; font-style: normal !important; }
.ls-question-mandatory, .asterisk { color: var(--danger) !important; }
.text-info, .text-muted { color: var(--muted) !important; }
.ls-question-help, .question-help-container { padding-inline: 0 !important; margin-left: 0 !important; }
.ls-questionhelp { padding-left: 0 !important; }

/* Info text reads as normal text, not a heading. */
.boilerplate .question-text, .boilerplate .question-text p, .boilerplate .question-text li, .boilerplate .ls-label-question { font-family: var(--font-body) !important; font-weight: 400; font-size: 1.0625rem; color: var(--text) !important; }
.boilerplate .question-text strong { font-weight: 700; color: var(--ink); }
.boilerplate .question-text, .boilerplate .ls-label-question { line-height: 1.55; }
.boilerplate .answer-container { display: none; }
.boilerplate .question-text ul { padding-left: 1.3em; }
.boilerplate .question-text li { margin-block: 6px; }

/* Links in running text must not rely on colour alone. */
.question-text a, .group-description a, .boilerplate a, .vakna-codes a, .completed-text a { text-decoration: underline; }

/* Choices: large targets with a whole-row click area. */
.answer-container { padding: 6px 0 0 !important; }
.answer-item label, .ls-label-xs-visibility { color: var(--text) !important; }
li.radio-item, li.checkbox-item, div.radio-item, div.checkbox-item, li.answer-item.radio-text-item, li.answer-item.checkbox-text-item {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  margin: 2px 0;
  padding-block: 4px;
}
.radio-item label, .checkbox-item label { font-weight: 400 !important; color: var(--text) !important; font-size: 1.0625rem !important; line-height: 1.35; cursor: pointer; opacity: 1 !important; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--primary); }
.radio-item input + label::before, .checkbox-item input + label::before {
  border-color: var(--line-strong) !important;
  background: var(--surface) !important;
}
.radio-item input:checked + label::before, .checkbox-item input:checked + label::before { border-color: var(--primary) !important; }
.radio-item input:checked + label::after { background: var(--primary) !important; }
.checkbox-item input:checked + label::after { color: var(--primary) !important; }
.radio-item input:focus-visible + label::before, .checkbox-item input:focus-visible + label::before {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.other-text-item, .checkbox-text-item .text-item { margin-inline-start: 8px; }
.checkbox-text-item label, .radio-text-item label { margin-inline-end: 8px; }

/* Text inputs */
.form-control, .form-select, textarea.form-control, input[type="text"], input[type="number"], select {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 2px solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  min-height: 48px;
  font-size: 1.0625rem;
}
textarea.form-control { min-height: 120px; }
.form-control::placeholder { color: var(--muted); opacity: 1; }
/* Labels above fields: easier to follow and works at any width. */
.text-item.row > label, .multiple-short-txt .control-label, .numeric-item.row > label { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; text-align: left !important; }
.text-item.row > div, .numeric-item.row > div { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; padding-inline: 0; }

/* Date: typed value, with the calendar as a pointer option. */
.date-timepicker-group .btn, .input-group-addon.btn { border-radius: var(--radius) !important; min-height: 48px; padding: 10px 16px !important; }
.date-item .help-block, .date-item .tip { color: var(--muted) !important; font-weight: 400; font-size: 1rem; margin: 4px 0 0; }

/* Yes/no: only the chosen button is filled, so the state is visible. */
.yes-no label.btn, .yes-no .btn-check + .btn { background: var(--surface) !important; color: var(--primary) !important; border: 2px solid var(--primary) !important; padding: 10px 20px !important; }
.yes-no label.btn *, .yes-no .btn-check + .btn * { color: inherit !important; }
.yes-no .btn-check:checked + .btn { background: var(--primary) !important; color: var(--on-primary) !important; }
.yes-no .btn-check:focus-visible + .btn { outline: 3px solid var(--focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px var(--focus-halo) !important; }

/* Navigation */
.navigator, #navigator-container { padding-inline: 16px; margin-top: 16px !important; }
.navigator .row, #navigator-container .row, .navigator-buttons { flex-wrap: nowrap; }
.btn { font-weight: 700 !important; border-radius: var(--radius) !important; min-height: 48px; padding: 10px 24px !important; font-size: 1.0625rem !important; white-space: nowrap; box-shadow: none; }
.btn-primary, .btn.btn-primary, button.action--ls-button-submit, #ls-button-submit {
  background: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  color: var(--on-primary) !important;
}
.btn-primary:hover, #ls-button-submit:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; color: var(--on-primary) !important; }
.btn-outline-secondary, .btn-default, #ls-button-previous, .btn.action--ls-button-previous {
  background: transparent !important;
  border: 2px solid var(--ink) !important;
  color: var(--ink) !important;
}
.btn-outline-secondary:hover, #ls-button-previous:hover { background: var(--surface-2) !important; color: var(--ink) !important; }

/* Validation */
.ls-em-error, .text-danger, .em_val_error, .ls-question-mandatory-initial { color: var(--danger) !important; font-weight: 600; }
.input-error, .has-error .form-control { border-color: var(--danger) !important; }
.alert-danger, .ls-questions-have-errors { background: var(--danger-soft) !important; color: var(--danger) !important; border: 1px solid var(--danger) !important; border-radius: var(--radius); }
.error-content, .error-content p, .error-content h1, .error-content h2, h2.error-title { color: var(--text) !important; }

/* Array (matrix): real table cells; wraps to rows on small screens. */
table.ls-answers { width: 100%; border-collapse: collapse; background: var(--surface); }
table.ls-answers th, table.ls-answers td { color: var(--text) !important; background: transparent !important; border-color: var(--line) !important; font-weight: 400; }
table.ls-answers thead th { font-weight: 700; font-size: 0.875rem; line-height: 1.25; vertical-align: bottom; text-align: center; padding: 0 3px 8px; overflow-wrap: normal; word-break: normal; }
table.ls-answers tbody tr, table.ls-answers tbody tr > * { background: transparent !important; }
table.ls-answers td.answer-item, table.ls-answers td.radio-item { display: table-cell; text-align: center; vertical-align: middle; padding: 10px 4px; }
table.ls-answers th.answertext, table.ls-answers .answertext { text-align: left; padding: 10px 8px 10px 0; }
table.ls-answers tbody tr { border-top: 1px solid var(--line); }
@media (max-width: 768px) {
  table.ls-answers td.answer-item, table.ls-answers td.radio-item { display: block; text-align: left; }
}

/* Ranking: keyboard and button controls added by vakna.js. */
.vakna-ranking-selects { display: none !important; }
.sortable-subtitle { display: block !important; font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.sortable-list { background: var(--surface-2) !important; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 6px; min-height: 64px; gap: 6px; }
.ls-choice.sortable-item, .sortable-item { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius) !important; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 6px 10px !important; min-height: 48px !important; font-size: 1.0625rem; margin: 0; }
.sortable-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.selector__dragHandle { display: none !important; }
.sortable-item::before, .sortable-item::after { content: none !important; display: none !important; }
.ranking-available-items, .ranking-sorted-items, .ls-answers .answers-list { background: transparent !important; }
.ranking-available-items { padding-inline-end: 8px !important; }
.ranking-sorted-items { padding-inline-start: 8px !important; }
.vakna-rank-actions { display: inline-flex; gap: 4px; margin-inline-start: auto; }
.vakna-rank-btn { appearance: none; font: inherit; font-size: 0.9375rem; font-weight: 700; min-width: 40px; min-height: 40px; padding: 4px 8px; background: var(--surface); color: var(--primary); border: 2px solid var(--primary); border-radius: var(--radius); cursor: pointer; }
.vakna-rank-btn:hover { background: var(--primary); color: var(--on-primary); }
.vakna-rank-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-halo); }
.sortable-choice .vakna-rank-btn--move, .sortable-choice .vakna-rank-btn--remove { display: none; }
.sortable-rank .vakna-rank-btn--add { display: none; }
.vakna-rank-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) {
  .ranking-available-items, .ranking-sorted-items { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin-bottom: 12px; }
}

/* Slider, in follow-up evaluations and the slider question type */
.vakna-slider .question-text { font-size: 1.25rem; }
.vakna-slider .ls-answers ul,
.vakna-slider .multiplenumeric ul { list-style: none; margin: 0; padding: 0; }
.vakna-slider .question-item.answer-item,
.vakna-slider .numeric-item { display: block !important; margin: 0 0 22px; padding: 0; }
.vakna-slider .control-label,
.vakna-slider label.vakna-dim-label { display: block !important; width: 100% !important; max-width: 100%; font-weight: 700 !important; font-size: 1.0625rem !important; color: var(--ink) !important; margin-bottom: 6px; padding: 0 !important; text-align: left !important; flex: none !important; }
.vakna-range { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 4px 16px; align-items: center; }
.vakna-range__slider { grid-column: 1; }
.vakna-range__number { grid-column: 2; grid-row: 1; }
.vakna-range__number input { width: 100% !important; text-align: center; padding-inline: 4px; }
.vakna-range__ends { grid-column: 1; display: flex; justify-content: space-between; gap: 12px; font-size: 0.9375rem; color: var(--muted); }
.vakna-range__status { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--muted); margin: 0; min-height: 1.4em; }
.vakna-range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.vakna-range input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  background: linear-gradient(to right, var(--primary) var(--pct, 0%), var(--surface-2) var(--pct, 0%));
  border: 1px solid var(--line-strong);
}
.vakna-range input[type="range"]::-moz-range-track { height: 10px; background: var(--surface-2); border: 1px solid var(--line-strong); }
.vakna-range input[type="range"]::-moz-range-progress { height: 10px; background: var(--primary); }
.vakna-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 2px var(--primary);
}
.vakna-range input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 2px var(--primary);
}
/* Not answered yet: a hollow thumb, so nothing looks already chosen. */
.vakna-range[data-unset="true"] input[type="range"]::-webkit-slider-thumb { background: var(--surface); }
.vakna-range[data-unset="true"] input[type="range"]::-moz-range-thumb { background: var(--surface); }
.vakna-range input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 480px) {
  .vakna-range { grid-template-columns: minmax(0, 1fr) 72px; gap: 4px 10px; }
}

/* Codes on the thank-you page */
.vakna-codes { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--primary); padding: 22px; margin: 20px 0; }
.vakna-codes h2 { font-family: var(--font-display) !important; font-weight: 800; font-size: 1.5rem; color: var(--ink); margin: 0 0 8px; }
.vakna-codes dt { font-weight: 700; margin-top: 14px; color: var(--ink); }
.vakna-codes dd { margin: 4px 0 0; }
.vakna-codes, .vakna-codes span, .vakna-codes p, .vakna-codes dd, .completed-wrapper span, .completed-text span { color: var(--text) !important; }
.vakna-codes a { color: var(--primary) !important; }
.vakna-codes code { display: block; font-family: ui-monospace, Consolas, monospace !important; font-size: 1.25rem; color: var(--ink) !important; background: var(--surface-2); padding: 8px 12px; overflow-wrap: anywhere; margin-bottom: 4px; }
.completed-text, .completed-wrapper { color: var(--text); }

/* Hide what Vakna surveys do not use. */
.question-number, .ls-question-number { display: none !important; }

@media (forced-colors: active) {
  .vakna-range input[type="range"] { forced-color-adjust: auto; appearance: auto; -webkit-appearance: auto; }
}

/* LimeSurvey's own rules for these are very specific, so these need to be too. */
html body .question-container .sortable-item .selector__dragHandle { display: none !important; }
html body .question-container li.sortable-item:focus-visible,
html body .question-container li.sortable-item:focus {
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--focus-halo) !important;
}

/* LimeSurvey sets a dark 2px focus outline on everything, which nearly vanishes in dark mode. */
html:not(.ls-pointer-nav) body :focus-visible,
html:not(.ls-pointer-nav) body .form-control:focus-visible,
html:not(.ls-pointer-nav) body .form-select:focus-visible,
html:not(.ls-pointer-nav) body .btn:focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--focus-halo) !important;
}
html:not(.ls-pointer-nav) body .vakna-legal :focus-visible { outline-color: var(--footer-text) !important; box-shadow: 0 0 0 2px var(--footer-bg) !important; }