@font-face {
  font-family: "DIN Condensed";
  src: url("../fonts/DIN Condensed Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Helvetica Light";
  src: url("../fonts/Helvetica-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src: url("../fonts/Helvetica-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Intl Light";
  src: url("../fonts/WOFF2/SuisseIntlTrial-Light.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Intl Thin";
  src: url("../fonts/WOFF2/SuisseIntlTrial-Thin.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Intl Bold";
  src: url("../fonts/WOFF2/SuisseIntlTrial-Bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

[lang="fa"] {
  font-family: "Vazirmatn", sans-serif;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("../fonts/WOFF2/SuisseIntlTrial-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("../fonts/WOFF2/SuisseIntlTrial-Light.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OT2049";
  src: url("../fonts/OT2049-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

:root {
  --sidebar-width: 28rem;
  --sidebar-section-border: 2px solid var(--color-brown);
  --color-brown: #442c28;
  --color-text: var(--color-brown);
  --slider-brown: var(--color-brown);
  --slider-scale: 1.5;
  --slider-track-height: calc(1.25rem * var(--slider-scale));
  --slider-input-height: calc(2.5rem * var(--slider-scale));
  --slider-arrow-height: calc(3px * var(--slider-scale));
  --slider-arrow-width: calc(4px * var(--slider-scale));
  --slider-split-gap: 3px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Hide native scrollbars site-wide; wheel / touch / trackpad scrolling still works */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, sans-serif;
  background: #fff;
  color: var(--color-brown);
}

body {
  display: flex;
  flex-direction: column;
}

.app-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

#design-controls-bridge {
  display: none !important;
}

.main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.sidebar {
  flex-shrink: 0;
  width: var(--sidebar-width);
  padding: 0;
  background: #fff;
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

.sidebar__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem 0.75rem;
  counter-reset: sidebar-section;
}

.sidebar__section {
  counter-increment: sidebar-section;
  position: relative;
  padding: 0.85rem 1rem 1rem;
  border: var(--sidebar-section-border);
  background: #fff;
  transition: opacity 0.35s ease;
}

.sidebar__section.is-dimmed {
  opacity: 0.38;
}

.sidebar__section.is-dimmed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.sidebar__section.is-locked {
  opacity: 0.45;
  pointer-events: none;
}

.sidebar__section.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.65);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar__section {
    transition: none;
  }
}

.sidebar__section > .sidebar__title {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem;
  column-gap: 0.5rem;
  margin: 0 0 0.65rem;
}

.sidebar__section > .sidebar__title::before {
  content: counter(sidebar-section) ".";
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-brown);
  text-align: right;
  line-height: 1.2;
}

.sidebar__section--bg {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar__btn--file {
  display: block;
  text-align: center;
  cursor: pointer;
}

.sidebar__hint--compact {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--color-brown);
}

.sidebar__section--identity {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar__identity-fields {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  counter-reset: profile-question;
}

.sidebar__identity-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  counter-increment: profile-question;
}

.sidebar__identity-heading {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-brown);
  white-space: nowrap;
}

.sidebar__identity-heading--wrap {
  white-space: normal;
  line-height: 1.35;
}

.sidebar__identity-heading::before {
  content: counter(profile-question, upper-alpha) ". ";
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-brown);
}

.sidebar__identity-slot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.sidebar__identity-living-toggle {
  width: 100%;
}

.sidebar__identity-name-mode-toggle {
  width: 100%;
}

.sidebar__identity-home-toggle,
.sidebar__identity-living-duration-toggle {
  width: 100%;
}

.sidebar__identity-home-toggle .sidebar__toggle-btn,
.sidebar__identity-living-duration-toggle .sidebar__toggle-btn {
  font-size: 0.625rem;
  line-height: 1.25;
  padding: 0.4rem 0.3rem;
  text-align: center;
  white-space: normal;
  hyphens: auto;
}

.sidebar__identity-input {
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.sidebar__identity-input--english {
  text-transform: uppercase;
}

.sidebar__identity-regime {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.sidebar__identity-regime-slider-wrap {
  position: relative;
  width: 100%;
  height: 1.25rem;
}

.sidebar__identity-regime-segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  height: 0.5rem;
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
}

.sidebar__identity-regime-segment {
  background: #e0e0e0;
  border-radius: 2px;
  transition: background 0.15s ease;
}

.sidebar__identity-regime-segment.is-active {
  background: #333;
}

.sidebar__identity-regime-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
}

.sidebar__identity-regime-slider:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
  border-radius: 4px;
}

.sidebar__identity-regime-slider::-webkit-slider-runnable-track {
  height: 0.5rem;
  background: transparent;
}

.sidebar__identity-regime-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.sidebar__identity-regime-slider::-moz-range-track {
  height: 0.5rem;
  background: transparent;
  border: none;
}

.sidebar__identity-regime-slider::-moz-range-thumb {
  width: 0;
  height: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.sidebar__identity-regime-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2rem;
  width: 100%;
}

.sidebar__identity-regime-label {
  font: inherit;
  font-size: 0.625rem;
  line-height: 1.25;
  text-align: center;
  color: var(--color-brown);
  background: none;
  border: none;
  padding: 0.1rem 0.05rem;
  cursor: pointer;
  transition: color 0.15s ease, font-weight 0.15s ease;
}

.sidebar__identity-regime-label:hover {
  color: var(--color-brown);
}

.sidebar__identity-regime-label.is-active {
  color: var(--color-brown);
  font-weight: 600;
}

.sidebar__section--grid-choose {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar__section--body-autonomy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar__section--body-autonomy-wear {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar__wear-autonomy {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.sidebar__wear-autonomy-question {
  display: block;
}

.sidebar__wear-autonomy-sliders {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar__wear-control-range {
  width: 100%;
  justify-content: stretch;
}

.sidebar__wear-control-range input[type="range"] {
  width: 100%;
  flex: 1;
  min-width: 0;
}

.sidebar__fan-tuning-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sidebar__fan-tuning-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.sidebar__fan-tuning-label {
  font-size: 0.8125rem;
  color: var(--color-brown);
  line-height: 1.2;
}

.sidebar__body-autonomy-control {
  width: 100%;
  justify-content: stretch;
}

.sidebar__body-autonomy-control input[type="range"] {
  width: 100%;
  flex: 1;
  min-width: 0;
}

.sidebar__body-autonomy-control.sidebar__item-control {
  width: 100%;
  justify-content: stretch;
}

.sidebar__body-autonomy-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar__body-autonomy-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.sidebar__body-autonomy-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.sidebar__section--feelings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar__hope-mode-toggle {
  width: 100%;
}

#feelings-hope-slot .sidebar__btn {
  width: 100%;
}

#feelings-hope-slot .sidebar__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sidebar__section--colors-export {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar__section--colors-export .sidebar__numbered {
  margin-top: 0.15rem;
}

.sidebar__section--colors-export .sidebar__item {
  grid-template-columns: minmax(0, 1fr) auto;
}

.sidebar__palette-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.sidebar__palette-swatch {
  display: block;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  flex: 0 0 auto;
}

.sidebar__sheet-live-status {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--color-brown);
}

.sidebar__sheet-palette-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.sidebar__label-tag-row {
  margin-top: 0.85rem;
  margin-bottom: 0;
}

.sidebar__sheet-palette-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sidebar__palette-btn {
  min-width: 2.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
}

.sidebar__palette-btn:hover {
  border-color: rgba(0, 0, 0, 0.35);
}

.sidebar__palette-btn--active {
  border-color: var(--color-brown);
  background: var(--color-brown);
  color: #fff;
}

.sidebar__palette-btn--dice {
  min-width: 2.5rem;
}

.sidebar__palette-btn--label {
  min-width: auto;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
  white-space: nowrap;
}

.sidebar__palette-shuffle-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sidebar__palette-active-label {
  font-size: 0.85rem;
  color: var(--color-brown);
  white-space: nowrap;
}

.sidebar__hint--combo-note {
  margin-top: 0;
  font-size: 0.78rem;
  opacity: 0.85;
}

.sidebar__combo-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.sidebar__combo-btn {
  font: inherit;
  min-width: 2.25rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.sidebar__combo-btn:hover {
  background: #fffef8;
}

.sidebar__combo-btn.is-active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

.sidebar__canvas-bg-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.sidebar__canvas-bg-swatch {
  display: block;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.sidebar__canvas-bg-swatch:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.sidebar__canvas-bg-swatch.is-active {
  border-color: #333;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.sidebar__canvas-bg-swatch:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}

.sidebar__feelings-control {
  width: 100%;
  justify-content: stretch;
}

.sidebar__feelings-control input[type="range"] {
  width: 100%;
  flex: 1;
  min-width: 0;
}

.sidebar__feelings-emotions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sidebar__feelings-emotion {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sidebar__feelings-emotion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sidebar__feelings-heading {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-brown);
}

.sidebar__feelings-slot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}

.sidebar__feelings-slot .sidebar__feelings-control {
  width: 100%;
}

.sidebar__feelings-randomize-btn {
  width: 100%;
}

.sidebar__grid-choose-btns {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sidebar__grid-btn {
  width: 100%;
  font-size: 0.875rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: var(--color-brown);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

button.sidebar__grid-btn {
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.sidebar__grid-btn:hover {
  background: #f0f0f0;
}

.sidebar__grid-btn.is-active {
  background: #333;
  color: #fff;
}

.sidebar__grid-btn.is-active:hover {
  background: #444;
}

.sidebar__grid-choose-sliders {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

.sidebar__grid-density {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.65rem;
}

.sidebar__grid-density-label {
  font-size: 0.875rem;
  line-height: 1.35;
  white-space: nowrap;
}

.sidebar__grid-density--long-label {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0.35rem;
}

.sidebar__grid-density--long-label .sidebar__grid-density-label {
  white-space: normal;
}

.sidebar__grid-density--long-label .sidebar__grid-density-range-label {
  white-space: normal;
  max-width: 48%;
}

.sidebar__grid-density-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}

.sidebar__grid-density-range-labels {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.sidebar__grid-density-range-label {
  flex: 0 1 auto;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--color-brown);
  white-space: nowrap;
}

.sidebar__grid-density-range-label:last-child {
  text-align: right;
}

.sidebar__grid-density--long-label .sidebar__grid-density-control {
  justify-content: stretch;
}

.sidebar__grid-density--long-label .sidebar__grid-density-control input[type="range"] {
  flex: 1;
  width: auto;
  min-width: 0;
}

.sidebar__grid-density-control {
  justify-content: flex-end;
}

.sidebar__grid-density-control input[type="range"] {
  width: 8rem;
  flex-shrink: 1;
  min-width: 3.5rem;
}

.sidebar__numbered {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar__item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.65rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid #eee;
  font-size: 0.875rem;
}

.sidebar__item--action .sidebar__item-control {
  justify-content: flex-end;
}

.sidebar__num {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-brown);
  text-align: right;
  line-height: 1.2;
}

.sidebar__item-label {
  text-align: left;
  line-height: 1.3;
}

.sidebar__item-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  min-width: 0;
}

.sidebar__item-control input[type="range"] {
  width: 6.5rem;
  flex-shrink: 1;
  min-width: 3.5rem;
}

.sidebar__item-control output {
  min-width: 2.25rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--color-brown);
}

.sidebar__item-control input[type="text"] {
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.sidebar__item-control button {
  font-size: 0.8125rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.sidebar__item-control button:hover {
  background: #f0f0f0;
}

.sidebar__item-control button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sidebar__hint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--color-brown);
}

.sidebar__hint--mode {
  color: var(--color-brown);
  font-style: italic;
}

.sidebar__item .sidebar__toggle {
  width: 100%;
}

.sidebar__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brown);
}

.sidebar__btn {
  width: 100%;
  font-size: 0.875rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.sidebar__btn:hover {
  background: #f0f0f0;
}

.sidebar__btn.is-active {
  background: #333;
  color: #fff;
}

.sidebar__btn.is-active:hover {
  background: #444;
}

.sidebar__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.875rem;
}

.sidebar__label {
  font-size: 0.875rem;
}

.sidebar__field input[type="range"] {
  width: 100%;
}

.sidebar__field output {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--color-brown);
}

.sidebar__toggle {
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.sidebar__toggle-btn {
  flex: 1;
  font-size: 0.75rem;
  padding: 0.35rem 0.5rem;
  border: none;
  border-right: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

.sidebar__toggle-btn:last-child {
  border-right: none;
}

.sidebar__toggle-btn:hover {
  background: #f0f0f0;
}

.sidebar__toggle-btn.is-active {
  background: #333;
  color: #fff;
}

.sidebar__toggle-btn.is-active:hover {
  background: #444;
}

.app-shell--standalone {
  width: 100%;
}

.app-shell--standalone .main {
  flex: 1;
  width: 100%;
}

.stage-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--page2-space-20, 1.25rem) * 1.2);
  overflow: auto;
}

#design-svg {
  display: block;
  vertical-align: top;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Color-division tiles H1–H4: exclusion with the painted grid (not flat opacity) */
#layer-color-divisions rect.color-division-tile {
  mix-blend-mode: exclusion;
}

/* H5 area: color dodge (inline style on SVG also sets this for export) */
#layer-color-divisions rect.color-division-tile--h5 {
  mix-blend-mode: color-dodge;
}

/* Hope drawing mode: the pointer becomes a pen while the "pen" toggle is on.
   Inline SVG data-URI cursor (white body, black outline) with the hotspot at
   the pen tip (bottom-left, 2 22). Falls back to crosshair if unsupported. */
#design-svg.is-hope-merge-mode {
  cursor:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17%203a2.85%202.83%200%201%201%204%204L7.5%2020.5%202%2022l1.5-5.5Z'%20fill='white'%20stroke='black'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3Cpath%20d='M15%205l4%204'%20stroke='black'%20stroke-width='1.5'/%3E%3C/svg%3E")
      2 22,
    crosshair;
  touch-action: none;
}

#design-svg.is-fan-drag-hover,
#design-svg.is-fan-drag-active {
  cursor: ns-resize;
  touch-action: none;
}

.stage-wrap.is-dragging,
.stage-wrap.is-fan-dragging {
  user-select: none;
}

/* ── Design section canvas — page 2 grid columns 9–10 (3rd & 4th from right) ── */

#page2 #section-design > .app-shell {
  position: absolute;
  top: var(
    --page2-header-band-height,
    calc(4 * var(--page2-space-20, 1.25rem))
  );
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  min-height: 0;
  pointer-events: none;
}

#page2 #section-design .main {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--page2-gutter, 1.25rem);
  box-sizing: border-box;
  padding-inline: var(--page2-margin-inline, 1.25rem);
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}

#page2 #section-design .stage-wrap {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  height: 100%;
  min-height: 100%;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}

#page2 #section-design .stage-wrap #design-svg {
  position: absolute;
  top: 0;
  bottom: auto;
  transform: none;
  max-width: none;
  pointer-events: auto;
}

#page2 #section-design .stage-wrap.is-questionnaire-focus-zoom {
  overflow: hidden;
}

/* ── Design section start gate (before questionnaire) ── */

.design-start {
  --design-intro-step-height: calc(
    100vh - var(
      --page2-header-band-height,
      calc(4 * var(--page2-space-20, 1.25rem))
    )
  );
  --design-intro-scroll-peek: calc(
    var(--page2-space-50, clamp(2rem, 2.894vw, 4.5rem)) * 1.5
  ); /* 75px @ ref — next intro panel peeks above fold */
  --design-intro-panel-2-lift: calc(
    var(--page2-space-50, clamp(2rem, 2.894vw, 4.5rem)) * 2
  ); /* 100px @ ref — panel 2 text block sits higher */
  position: absolute;
  top: var(
    --page2-header-band-height,
    calc(4 * var(--page2-space-20, 1.25rem))
  );
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--page2-bg, #fff);
  pointer-events: auto;
  container-type: size;
  container-name: design-intro;
}

.design-intro {
  display: contents;
}

.design-intro__panel {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  height: var(--design-intro-step-height);
  min-height: var(--design-intro-step-height);
  height: 100cqh;
  min-height: 100cqh;
}

.design-intro__panel:nth-child(1) {
  z-index: 1;
  /* Full-height first intro panel so the hero image reaches the bottom of the
     screen (no white peek of the next panel at the bottom of page 1). Panel 2
     keeps its top offset, so its top peek of this image is preserved. */
  height: var(--design-intro-step-height);
  min-height: var(--design-intro-step-height);
  height: 100cqh;
  min-height: 100cqh;
}

.design-intro__panel:nth-child(2) {
  z-index: 2;
  top: var(--design-intro-scroll-peek);
  height: calc(
    var(--design-intro-step-height) - var(--design-intro-scroll-peek)
  );
  min-height: calc(
    var(--design-intro-step-height) - var(--design-intro-scroll-peek)
  );
}

.design-intro__panel--light:not(.design-intro__panel--headscarf) {
  background: var(--page2-bg, #fff);
  color: var(--color-brown);
}

.design-intro__panel:nth-child(1).design-intro__panel--light:not(
    .design-intro__panel--headscarf
  ) {
  background-color: var(--page2-bg, #fff);
}

.design-intro__panel--headscarf.design-intro__panel--light {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--page2-bg, #fff);
  background: var(--page2-bg, #fff) url("../website/design/1.webp") center / cover
    no-repeat;
}

/* 3D headscarf slot — hidden for now; re-enable via DESIGN_INTRO_HEADSCARF_3D_ENABLED */
.design-intro__panel--headscarf .design-intro__headscarf-3d {
  display: none;
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 0;
  isolation: isolate;
  pointer-events: none;
  overflow: hidden;
}

.design-intro__panel--headscarf .design-intro__panel-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--page2-gutter, 1.25rem);
  align-content: start;
  height: 100%;
  min-height: 100%;
  padding-top: calc(var(--page2-space-50, clamp(2rem, 2.894vw, 4.5rem)) * 2); /* 100px @ ref */
  padding-inline: var(--page2-margin-inline, 1.25rem);
  color: inherit;
}

.design-intro__panel--headscarf .design-intro__text:not(.design-intro__text--fa) {
  grid-column: 2 / span 3; /* columns 2–4 from the left */
  text-align: left;
  justify-self: stretch;
  width: auto;
  max-width: none;
  color: inherit;
}

.design-intro__panel--headscarf .design-intro__text--fa {
  grid-column: 9 / span 3; /* columns 2–4 from the right */
  text-align: right;
  justify-self: stretch;
  width: auto;
  max-width: none;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 300;
  color: inherit;
}

/* Bottom-pinned "scroll" hint, snapped to the site's 12-column grid */
.design-intro__panel--headscarf .design-intro__scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--page2-space-30);
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--page2-gutter);
  padding-inline: var(--page2-margin-inline);
  box-sizing: border-box;
  pointer-events: none;
}

/* Center the label + arrow on the 4th column from the right (col 9 of 12). */
.design-intro__scroll-group {
  grid-column: 9;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.design-intro__scroll-label {
  font-family: "Suisse Intl", sans-serif;
  font-weight: 200;
  /* Same size as .design-intro__text--secondary: base intro text * 0.5 */
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 1.2 * 1.5 * 0.5
  );
  line-height: 1.15;
  color: var(--page2-bg, #fff);
  margin-bottom: var(--page2-space-4);
  text-align: center;
  pointer-events: none;
}

.design-intro__scroll-arrow-mask {
  --design-intro-scroll-arrow-size: calc(var(--page2-space-20, 1.25rem) * 1.5);
  overflow: hidden;
  /* Match rendered SVG height (viewBox 24×24, stem+chevron ≈ 75% of width) */
  height: calc(var(--design-intro-scroll-arrow-size) * 0.75);
}

/* White arrow — 3× base size */
.design-intro__scroll-arrow {
  display: inline-flex;
  color: var(--page2-bg, #fff);
  pointer-events: none;
  opacity: 1;
  animation: design-intro-scroll-arrow-slide 1.6s ease-in-out infinite;
}

.design-intro__scroll-arrow svg {
  width: var(--design-intro-scroll-arrow-size);
  height: auto;
}

@keyframes design-intro-scroll-arrow-slide {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .design-intro__scroll-arrow {
    animation: none;
    transform: none;
  }
}

/* Large studio display (2048×1152 physical @ dpr2 = 1024×576 CSS px): a wide,
   short viewport where the first-stage intro text gets pushed too far down.
   Pull the text block up by a fixed 50px on this screen only — first stage only.
   If your screen is NOT Retina (so CSS really is 2048×1152, i.e. wide AND tall),
   change "max-height: 620px" below to "min-height: 1000px" to target that case. */
@media (min-width: 1000px) and (max-height: 620px) {
  .design-intro__panel--headscarf .design-intro__panel-inner {
    padding-top: calc(
      var(--page2-space-50, clamp(2rem, 2.894vw, 4.5rem)) * 2 - 50px
    );
  }
}

/* Keep design canvas from painting over the intro gate */
#section-design:not(.section-design--questionnaire-started) > .app-shell {
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

.design-intro__panel--light .design-intro__panel-inner,
.design-intro__panel--brown .design-intro__panel-inner {
  position: relative;
  z-index: 1;
}

.design-intro__panel--brown {
  background: var(--color-brown);
  color: var(--page2-bg, #fff);
}

.design-intro__panel-inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  height: 100%;
  min-height: 100%;
  padding-inline: var(--page2-margin-inline, 1.25rem);
  text-align: center;
  transform-origin: center center;
}

.design-intro__panel--light .design-intro__panel-inner {
  color: inherit;
}

.design-intro__panel--light:not(.design-intro__panel--headscarf)
  .design-intro__panel-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--page2-gutter, 1.25rem);
  row-gap: 1.25rem;
  align-content: center;
}

.design-intro__panel--light:not(.design-intro__panel--headscarf)
  .design-intro__text:not(.design-intro__text--secondary) {
  grid-column: 1 / -1;
  justify-self: center;
}

.design-intro__panel:nth-child(2) .design-intro__panel-inner {
  transform: translateY(calc(-1 * var(--design-intro-panel-2-lift)));
}

.design-intro__panel--brown .design-intro__panel-inner {
  color: inherit;
}

.design-intro__text {
  margin: 0;
  max-width: 42rem;
  font-family: "Suisse Intl", sans-serif;
  font-weight: 200;
  --design-intro-text-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 1.2 * 1.5
  );
  font-size: var(--design-intro-text-size);
  line-height: 1.15;
  color: inherit;
}

.design-intro__panel--light:not(.design-intro__panel--headscarf)
  .design-intro__text--secondary {
  font-size: calc(var(--design-intro-text-size) * 0.5);
  max-width: none;
  grid-column: 6 / span 2;
}

.design-intro__shop-link {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  background: transparent;
  border: none;
  cursor: pointer;
}

.design-intro__panel--light .design-intro__shop-link:hover,
.design-intro__panel--light .design-intro__shop-link:focus-visible {
  color: var(--color-brown);
  opacity: 0.75;
}

.design-intro__panel--light .design-intro__shop-link:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
}

.design-intro__panel--brown .design-intro__shop-link:hover,
.design-intro__panel--brown .design-intro__shop-link:focus-visible {
  opacity: 0.75;
}

.design-intro__panel--brown .design-intro__shop-link:focus-visible {
  outline: 2px solid var(--page2-bg, #fff);
  outline-offset: 2px;
}

.design-intro__panel .design-start__btn {
  margin-top: 0.5rem;
}

.design-start__lang-btns {
  display: contents;
}

.design-start__lang-btns .design-start__btn {
  width: 100%;
  min-width: 0;
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
  text-align: center;
  justify-self: stretch;
}

#design-start-btn-en {
  grid-column: 6;
}

#design-start-btn-fa {
  grid-column: 7;
}

#questionnaire-scroll[lang="fa"] {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

#questionnaire-scroll[lang="fa"] .questionnaire-madlibs-blank--english {
  direction: ltr;
  unicode-bidi: isolate;
}

/* FA: a Latin (LTR) city/name blank is forced direction:ltr so typed Latin
   values read correctly, but that left-aligns the Persian placeholder hint.
   While the field is still empty (:placeholder-shown), right-align it so the
   hint reads from the RTL side of the sentence. Typed values stay LTR. */
#questionnaire-scroll[lang="fa"]
  .questionnaire-madlibs-blank--english:placeholder-shown {
  text-align: right;
}

/* Spatial controls: keep left-to-right order/behavior like English even in FA UI */
#questionnaire-scroll[lang="fa"] :is(
  .questionnaire-slider-wrap,
  .questionnaire-feelings-spider,
  .questionnaire-palette-picker
) {
  direction: ltr;
}

/* FA: the pen (merge) + undo buttons follow the questionnaire's RTL flow, so
   they pack/align to the right and their order mirrors the English layout.
   The SVG glyphs are unaffected by text direction, so the icons stay upright. */
#questionnaire-scroll[lang="fa"] .questionnaire-feelings-hope-options {
  direction: rtl;
}

/* Handkerchief canvas — always LTR / English layout regardless of questionnaire locale */
.questionnaire-panel__canvas,
#questionnaire-canvas-host,
.questionnaire-panel__canvas .stage-wrap {
  direction: ltr;
}

/* Persian (fa) only: swap sides — questionnaire text on the right, handkerchief
   canvas on the left. Position-only override of the default grid columns. */
.questionnaire-panel--locale-fa .questionnaire-panel__scroll {
  grid-column: 7 / -1;
  /* Mirror the full-bleed to the right edge (default bleeds left) */
  margin-left: 0;
  margin-right: calc(-1 * var(--page2-margin-inline, 1.25rem));
}

.questionnaire-panel--locale-fa .questionnaire-panel__canvas {
  grid-column: 1 / span 6;
}

@media (prefers-reduced-motion: reduce) {
  .design-intro__panel-inner {
    transform: none !important;
    opacity: 1 !important;
  }
}

#design-start-btn-fa {
  font-family: "Vazirmatn", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  font-size: clamp(0.805rem, 0.932vw, 1.006rem); /* 1.15× — match EN btn visual size */
}

.design-start__btn {
  box-sizing: border-box;
  flex-shrink: 0;
  padding: clamp(0.35rem, 0.486vw, 0.525rem)
    clamp(0.875rem, 1.215vw, 1.3125rem); /* match product-order-btn */
  font-family: "Suisse Intl Light", sans-serif;
  font-size: clamp(0.7rem, 0.81vw, 0.875rem);
  font-weight: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-brown);
  border: 1px solid var(--color-brown);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.design-start__btn:hover:not(:disabled) {
  background: #fff;
  color: var(--color-brown);
}

.design-start__btn:disabled {
  cursor: default;
  opacity: 0.65;
}

.design-start__btn:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
}

/* "start again" button, pinned to the bottom-left of the questionnaire.
   Styled to match the filled brand buttons (e.g. "add to cart" / product-order-btn).
   The parent panel disables pointer events, so re-enable them here. */
.questionnaire-start-again {
  position: absolute;
  left: var(--page2-margin-inline, 1.25rem);
  bottom: var(--page2-space-20, 1.25rem);
  z-index: 3;
  margin: 0;
  padding: clamp(0.35rem, 0.486vw, 0.525rem)
    clamp(0.875rem, 1.215vw, 1.3125rem); /* match product-order-btn */
  font-family: "Suisse Intl Light", sans-serif;
  font-size: clamp(0.7rem, 0.81vw, 0.875rem);
  font-weight: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-brown);
  border: 1px solid var(--color-brown);
  border-radius: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.2s ease, color 0.2s ease;
}

.questionnaire-start-again:hover,
.questionnaire-start-again:focus-visible {
  background: #fff;
  color: var(--color-brown);
}

.questionnaire-start-again:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
}

#section-design.section-design--intro-slide {
  overflow: hidden;
}

#section-design.section-design--intro-slide .questionnaire-panel {
  z-index: 4;
  background: var(--page2-bg, #fff);
  pointer-events: auto;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

#section-design.section-design--intro-slide
  .design-intro__panel:nth-child(2)
  .design-intro__panel-inner {
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

#section-design.section-design--intro-slide-prep .questionnaire-panel {
  transform: translateY(100%);
}

#section-design.section-design--intro-slide-active
  .design-intro__panel:nth-child(2)
  .design-intro__panel-inner {
  transform: translateY(calc(-1 * var(--design-intro-panel-2-lift))) scale(0.94);
  opacity: 0.75;
}

#section-design.section-design--intro-slide-active .questionnaire-panel {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  #section-design.section-design--intro-slide .questionnaire-panel {
    transition: none;
  }

  #section-design.section-design--intro-slide
    .design-intro__panel:nth-child(2)
    .design-intro__panel-inner {
    transition: none;
  }
}

#section-design.section-design--questionnaire-started > .design-start {
  display: none;
}

#section-design.section-design--questionnaire-started > .questionnaire-panel {
  display: block;
}

#section-design:not(.section-design--questionnaire-started):not(
    .section-design--intro-slide
  )
  > .questionnaire-panel {
  display: none !important;
}

#section-design.section-design--intro-slide > .questionnaire-panel {
  display: block !important;
}

#section-design.section-design--questionnaire-started > .app-shell {
  visibility: hidden;
  pointer-events: none;
}

/* ── Profile questionnaire overlay (design section, grid columns 2–5) ── */

.questionnaire-panel {
  position: absolute;
  top: var(
    --page2-header-band-height,
    calc(4 * var(--page2-space-20, 1.25rem))
  );
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  --questionnaire-text-scale: 1.5;
  /* Section folder titles (PROFILE, GRID, …): may shrink separately from body
     text when the feelings chart is taller than the panel (see JS sync). */
  --questionnaire-card-title-text-scale: 1.5;
  /* Uniform small-label size (slider ends, sublabels, etc.): base 0.65, −30%, +20% */
  --questionnaire-small-text-multiplier: 0.546;
  /* Unified, fixed question + small-text sizes (do NOT scale with
     --questionnaire-text-scale). 1.3125rem = 21px, 0.875rem = 14px @ 16px root. */
  --questionnaire-question-size: 1.3125rem;
  --questionnaire-small-size: 0.875rem;
  --questionnaire-vertical-inset: var(--page2-space-20, 1.25rem); /* 20px @ ref */
  /* Fixed breathing room above/below each question divider line, shared by all
     multi-question sections (Community, Family) and the Feelings/Hope line. */
  --questionnaire-divider-gap: var(--page2-space-20, 1.25rem); /* 20px @ ref */
  /* Extra reserve below profile mad-libs for homeAt dropdown (base rem, × text-scale) */
  --questionnaire-profile-answers-bottom-pad: clamp(2.375rem, 2.894vw, 2.75rem); /* 38px @ 1728 — was 32px (2rem) */
  /* Set by syncQuestionnaireCardHeights() from longest header/body content */
  --questionnaire-card-header-height: auto;
  --questionnaire-card-expanded-header-height: auto;
  --questionnaire-card-expanded-height: auto;
  --questionnaire-card-border-width: 1px;
  /* Optical vertical-centering nudge for section folder titles (COMMUNITY,
     FAMILY, …). Uppercase DIN Condensed glyphs have no lower tails, so they sit
     high inside their line box and read slightly ABOVE the true center even
     though the box itself is perfectly centered. This value pushes all header
     content (number, square, title) DOWN by a hair to optically re-center it.
     It is expressed in `em`, so it scales with the title font and is applied to
     the header's CHILDREN only — that means it never changes the measured
     rectangle height or the font size (the JS measures the header element, not
     its transformed children). Tune to taste: larger = lower, 0 = off. */
  --questionnaire-card-title-optical-shift: 0.12em;
  /* Extra downward nudge for closed red folders only (PROFILE, GRID, … at rest).
     Open-section headers use --questionnaire-card-title-optical-shift alone.
     Applied via transform on header children — does not affect measured height. */
  --questionnaire-card-closed-title-optical-extra: 0.025em;
  /* Persian (Vazirmatn) section titles: counter the Latin optical shift on the
     title span only (numbers and square keep their existing nudge). Negative = up. */
  --questionnaire-card-title-fa-optical-nudge: -0.12em;
  --questionnaire-card-title-fa-closed-optical-extra: -0.025em;
  /* Slight size trim so Persian folder titles sit comfortably in the red band. */
  --questionnaire-card-title-fa-scale: 0.95;
  /* The separator square is already perfectly centered by flexbox, but it rides
     the same downward optical shift as the (top-heavy) uppercase text, which
     leaves it sitting a touch LOW. This raises just the square back toward the
     true vertical center. Negative = up. Applied via position offset so it
     stacks on top of the shared transform without overriding it, and in `em` so
     it scales with the square/text. Tune to taste. */
  --questionnaire-card-dot-nudge: -0.09em;
  /* Widest collapsed section number; keeps open headers aligned when title scale grows */
  --questionnaire-card-num-column-width: auto;
  /* Duration of the folder drop-down open animation; matches the section
     canvas transition (SCROLL_SNAP_ANIM_MS in js/questionnaire.js). */
  --questionnaire-open-anim: 420ms;
}

.questionnaire-panel--measuring .questionnaire-card,
.questionnaire-panel--measuring .questionnaire-card.is-expanded {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.questionnaire-panel--measuring .questionnaire-card__header {
  height: auto !important;
  min-height: 0 !important;
}

.questionnaire-panel--measuring .questionnaire-card__num {
  width: auto !important;
  min-width: 0 !important;
}

.questionnaire-panel--measuring .questionnaire-card__body {
  flex: none !important;
  overflow: visible !important;
}

/* During syncQuestionnaireCardHeights() only — couples spider to text-scale so
   the feelings overflow model stays accurate while display size stays fixed. */
.questionnaire-panel--measure-spider-coupled .questionnaire-feelings-spider {
  max-width: calc(
    clamp(18.4rem, 48.3vw, 29.9rem) *
      (var(--questionnaire-text-scale, 1.5) / 1.5)
  );
}

/* Measuring must ignore display-only pull-up margins or the feelings body
   height understates and section folder titles grow (header-budget math).
   Both the top and bottom pull-ups are reset here so the measured height is
   identical whether or not the visual pull-ups are applied. */
.questionnaire-panel--measuring
  .questionnaire-step--feelings-all
  .questionnaire-feelings-spider {
  margin-top: 0;
  margin-bottom: 0;
}

.questionnaire-panel__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: var(--page2-gutter, 1.25rem);
  box-sizing: border-box;
  position: relative;
  height: 100%;
  min-height: 100%;
  padding-inline: var(--page2-margin-inline, 1.25rem);
  align-items: stretch;
}

.questionnaire-panel__remaining {
  margin: 0;
  font-family: "Suisse Intl", sans-serif;
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 0.75 *
      var(--questionnaire-text-scale, 1)
  );
  font-weight: 200;
  line-height: 1.2;
  color: var(--color-brown);
}

.questionnaire-panel__scroll {
  grid-column: 1 / span 6;
  grid-row: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
  padding-top: var(--questionnaire-vertical-inset); /* 20px @ ref — top inset above stack */
  padding-bottom: var(--questionnaire-vertical-inset); /* 20px @ ref — bottom inset below stack (outside border) */
  /* Left full-bleed: extend scroll column to viewport edge without shifting content outside its box */
  margin-left: calc(-1 * var(--page2-margin-inline, 1.25rem));
  width: calc(100% + var(--page2-margin-inline, 1.25rem));
}

.questionnaire-panel__canvas {
  grid-column: 7 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--page2-bg, #fff);
  z-index: 3;
  pointer-events: none;
}

/* Family section answers — circles match questionnaire section progress dots (13px) */
.family-dot-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  width: 100%;
  margin: 0;
  padding: 0;
}

.sidebar__family-dot-options {
  margin-top: 0.35rem;
}

.questionnaire-family-dot-options {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--page2-gutter, 1.25rem);
  row-gap: 0.65rem;
  /* Reclaim the card body's right gutter so the 6 tracks line up exactly
     with page grid columns 1-6 (content box is otherwise 1 gutter short). */
  width: calc(100% + var(--page2-gutter, 1.25rem));
  max-width: none;
}

/* Family / friends in Iran page (questionnaire): left-align each answer so the
   radio circle sits at the left edge of its option instead of being centered. */
.questionnaire-family-dot-options .family-dot-option {
  align-items: flex-start;
  text-align: left;
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* RTL: fill columns right-to-left so options pack from the right and align to
   page columns 6-1 (mirrors .questionnaire-options--grid-type). */
#questionnaire-scroll[lang="fa"] .questionnaire-family-dot-options {
  direction: rtl;
}

/* RTL scroll: flex-start = inline-start = right edge (flex-end would align left). */
#questionnaire-scroll[lang="fa"] .questionnaire-family-dot-options .family-dot-option {
  align-items: flex-start;
  text-align: right;
}

#questionnaire-scroll[lang="fa"]
  .questionnaire-family-dot-options
  .family-dot-option__label {
  width: 100%;
  text-align: right;
}

.family-dot-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 4.25rem;
  min-width: 4.25rem;
  max-width: 7.5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: center;
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.family-dot-option__circle {
  width: var(--page2-progress-dot, clamp(0.6875rem, 0.752vw, 0.9375rem));
  height: var(--page2-progress-dot, clamp(0.6875rem, 0.752vw, 0.9375rem));
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid var(--color-brown);
  background: transparent;
  flex-shrink: 0;
  display: block;
}

.family-dot-option.is-selected .family-dot-option__circle {
  background: var(--color-brown);
}

.family-dot-option:hover .family-dot-option__circle,
.family-dot-option:focus-visible .family-dot-option__circle {
  outline: 2px solid var(--color-brown);
  outline-offset: 3px;
}

.family-dot-option:focus-visible {
  outline: none;
}

.family-dot-option__label {
  font-size: 0.625rem;
  line-height: 1.25;
  hyphens: auto;
  color: inherit;
}

.questionnaire-family-dot-options .family-dot-option__label {
  font-family: "Suisse Intl", sans-serif;
  font-weight: 200;
  font-size: var(--questionnaire-small-size);
}

.questionnaire-panel__canvas .stage-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: visible;
  pointer-events: none;
}

.questionnaire-panel__canvas .stage-wrap #design-svg {
  pointer-events: auto;
}

.questionnaire-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* No outer frame: the open section keeps only a single inner separator line
     (see .questionnaire-card.is-expanded); closed red folders fill full-width. */
  border: none;
  /* Closed folders overlap each other by this fraction of a header's height, so
     the stack reads like a set of physical folders. The hover "push" distance is
     the same amount, so hovering fully separates a folder from the one above it. */
  --questionnaire-card-overlap: 0.3;
  --questionnaire-card-hover-push: calc(
    var(--questionnaire-card-header-height) * var(--questionnaire-card-overlap)
  );
}

.questionnaire-card {
  box-sizing: border-box;
  border: none;
  overflow: hidden;
  /* Needed so --card-z (set per card in JS) controls which folder paints on top.
     transform transition drives the "flip through" push on hover (same 0.25s
     ease timing as the color-palette circles). */
  position: relative;
  z-index: var(--card-z, 0);
  transition: transform 0.25s ease;
}

/* The open section always sits in front of the closed folders around it. */
.questionnaire-card.is-expanded {
  z-index: 100;
}

/* Overlap: pull every closed folder up so its top tucks under whatever sits
   above it (a closed folder OR the open section). This keeps all closed folders
   at the same small visible size at rest; a folder only "grows" when hovered
   (see the flip-through rule below). The very first card in the stack has nothing
   above it, so it is excluded — otherwise it would be pulled off the top edge. */
.questionnaire-card:not(.is-expanded):not(:first-child) {
  margin-top: calc(var(--questionnaire-card-hover-push) * -1);
}

/* Flip-through hover for COVERED folders (every folder except the first): the
   hovered (or keyboard-focused) folder and every folder after it slide down
   together via transform, opening a gap that reveals the hovered folder from
   under the one above it. The first card is handled separately below because it
   has no folder above to slide out from. */
.questionnaire-card:not(.is-expanded):not(:first-child):hover,
.questionnaire-card:not(.is-expanded):not(:first-child):focus-within,
.questionnaire-card:not(.is-expanded):not(:first-child):hover ~ .questionnaire-card,
.questionnaire-card:not(.is-expanded):not(:first-child):focus-within ~ .questionnaire-card {
  transform: translateY(var(--questionnaire-card-hover-push));
}

/* First closed folder: nothing sits above it to tuck under, so it is made small
   by trimming its height from the BOTTOM (top edge stays static) while its text
   is nudged UP to stay centered in the trimmed rectangle. On hover it grows back
   to full height downward (pushing the folders below via layout), so it behaves
   like the others: small at rest, grown on hover. */
.questionnaire-card:not(.is-expanded):first-child {
  height: calc(
    var(--questionnaire-card-header-height) *
      (1 - var(--questionnaire-card-overlap))
  );
  min-height: calc(
    var(--questionnaire-card-header-height) *
      (1 - var(--questionnaire-card-overlap))
  );
  transition: transform 0.25s ease, height 0.25s ease, min-height 0.25s ease;
}

.questionnaire-card:not(.is-expanded):first-child .questionnaire-card__header > * {
  transition: transform 0.25s ease;
  transform: translateY(
    calc(
      var(--questionnaire-card-header-height) *
        var(--questionnaire-card-overlap) / -2 +
        var(--questionnaire-card-title-optical-shift, 0px) +
        var(--questionnaire-card-closed-title-optical-extra, 0px)
    )
  );
}

.questionnaire-card:not(.is-expanded):first-child:hover,
.questionnaire-card:not(.is-expanded):first-child:focus-within {
  height: var(--questionnaire-card-header-height);
  min-height: var(--questionnaire-card-header-height);
}

.questionnaire-card:not(.is-expanded):first-child:hover .questionnaire-card__header > *,
.questionnaire-card:not(.is-expanded):first-child:focus-within .questionnaire-card__header > * {
  /* Hover grows the first folder back to full height, so drop the overlap
     re-centering but keep the optical nudge so the title stays consistent. */
  transform: translateY(
    calc(
      var(--questionnaire-card-title-optical-shift, 0px) +
        var(--questionnaire-card-closed-title-optical-extra, 0px)
    )
  );
}

/* Respect reduced-motion: keep the static overlap/size but drop the animation. */
@media (prefers-reduced-motion: reduce) {
  .questionnaire-card,
  .questionnaire-card:not(.is-expanded):first-child,
  .questionnaire-card:not(.is-expanded):first-child .questionnaire-card__header > * {
    transition: none;
  }
  .questionnaire-card:not(.is-expanded):not(:first-child):hover,
  .questionnaire-card:not(.is-expanded):not(:first-child):focus-within,
  .questionnaire-card:not(.is-expanded):not(:first-child):hover ~ .questionnaire-card,
  .questionnaire-card:not(.is-expanded):not(:first-child):focus-within ~ .questionnaire-card {
    transform: none;
  }
}

.questionnaire-card:not(.is-expanded) {
  height: var(--questionnaire-card-header-height);
  min-height: var(--questionnaire-card-header-height);
  /* Closed section folders use the same red as the site footer/header banner */
  background: var(--page2-header-shop-banner-surface, #ec2f1e);
  color: #fff;
  border-bottom: 1px solid #fff;
}

.questionnaire-card:not(.is-expanded):last-child {
  border-bottom: none;
}

.questionnaire-card.is-expanded {
  display: flex;
  flex-direction: column;
  height: var(--questionnaire-card-expanded-height);
  min-height: var(--questionnaire-card-expanded-height);
  max-height: var(--questionnaire-card-expanded-height);
  background: var(--page2-bg, #fff);
  color: var(--color-brown);
  /* Open section keeps only the inner separator line toward the canvas.
     English (default): questionnaire is on the left, so the line sits on the right. */
  border: none;
  border-right: 1px solid var(--color-brown);
}

/* Persian: the questionnaire moves to the right and the canvas to the left,
   so the separator line moves to the left edge of the open section. */
.questionnaire-panel--locale-fa .questionnaire-card.is-expanded {
  border-right: none;
  border-left: 1px solid var(--color-brown);
}

/* Cap the open stack: when the FIRST section is open it also gets a brown line
   along its top edge, and when the LAST section is open it gets one along its
   bottom edge. This closes off the top/bottom of the questionnaire so the open
   panel reads as a framed column rather than an open-ended strip. */
.questionnaire-card.is-expanded:first-child {
  border-top: 1px solid var(--color-brown);
}

.questionnaire-card.is-expanded:last-child {
  border-bottom: 1px solid var(--color-brown);
}

/* Drop-down reveal when a section folder opens. `is-opening` is added by JS
   only on a genuine closed -> open transition (and skipped under reduced
   motion), so the animation plays on every folder open but never replays while
   already inside a section. The card grows from its collapsed header height to
   its expanded height; because the card clips its overflow, the body content is
   progressively revealed as it slides down. */
.questionnaire-card.is-opening {
  animation: questionnaire-card-drop var(--questionnaire-open-anim, 420ms)
    cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* While the card is still shorter than its content during the grow, keep the
   body from briefly flashing its own scrollbar. */
.questionnaire-card.is-opening .questionnaire-card__body {
  overflow: hidden;
}

/* Only a `from` keyframe is given: the implicit `to` uses the card's live
   expanded height, so the animation always lands on the correct per-section
   height set by syncQuestionnaireCardHeights(). */
@keyframes questionnaire-card-drop {
  from {
    height: var(--questionnaire-card-header-height);
    min-height: var(--questionnaire-card-header-height);
    max-height: var(--questionnaire-card-header-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  .questionnaire-card.is-opening {
    animation: none;
  }
}

.questionnaire-card--light {
  background: var(--page2-bg, #fff);
  color: var(--color-brown);
}

.questionnaire-card--brown {
  background: var(--color-brown);
  color: var(--page2-bg, #fff);
}

.questionnaire-card__header {
  display: flex;
  align-items: center;
  gap: var(--page2-gutter, 1.25rem);
  width: 100%;
  box-sizing: border-box;
  min-height: var(--questionnaire-card-header-height);
  height: var(--questionnaire-card-header-height);
  padding-block: var(--page2-space-4, 0.25rem);
  /* Left inset matches grid margin so text stays aligned while brown folders bleed left */
  padding-inline: var(--page2-margin-inline, 1.25rem) var(--page2-gutter, 1.25rem);
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Base optical re-center for header content (see --questionnaire-card-title-
   optical-shift). Applies to the open section header and any state without its
   own transform. Closed folders override this with a compound transform that
   ADDS the same optical shift on top of their overlap re-centering, so the
   nudge is identical in every state. Transforming the children (not the header)
   keeps the measured rectangle height untouched. */
.questionnaire-card__header > * {
  transform: translateY(var(--questionnaire-card-title-optical-shift, 0));
}

.questionnaire-card.is-expanded .questionnaire-card__header {
  cursor: default;
  min-height: var(--questionnaire-card-expanded-header-height);
  height: var(--questionnaire-card-expanded-header-height);
  /* Card border insets content; tuck padding so num/title match collapsed folders */
  padding-inline-start: calc(
    var(--page2-margin-inline, 1.25rem) - var(--questionnaire-card-border-width, 1px)
  );
  padding-inline-end: calc(
    var(--page2-gutter, 1.25rem) - var(--questionnaire-card-border-width, 1px)
  );
}

.questionnaire-card.is-locked .questionnaire-card__header {
  cursor: default;
  opacity: 0.45;
}

.questionnaire-card__header:disabled {
  cursor: default;
}

.questionnaire-card__header:not(:disabled):hover,
.questionnaire-card__header:not(:disabled):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* The closed-folder overlap hides the TOP `overlap` fraction of every COVERED
   folder (the folder above paints over it). The header text is centered in the
   FULL rectangle, so within the visible red band it would look too high. Nudging
   the text down by half the overlap re-centers it inside the visible band.
   Every covered folder is targeted (any closed folder that is not the first card
   in the stack tucks under the element above it). The first card is trimmed and
   re-centered separately above (its text is nudged UP instead of down). The
   transform shifts the text only and never affects the measured rectangle height. */
.questionnaire-card:not(.is-expanded):not(:first-child)
  .questionnaire-card__header
  > * {
  transform: translateY(
    calc(
      var(--questionnaire-card-header-height) * var(--questionnaire-card-overlap) / 2 +
        var(--questionnaire-card-title-optical-shift, 0px) +
        var(--questionnaire-card-closed-title-optical-extra, 0px)
    )
  );
}

.questionnaire-card__num,
.questionnaire-card__title {
  font-family: "DIN Condensed", sans-serif;
  /* Section/folder title size: enlarged to 1.3, then reduced 30% -> 0.91
     (base multiplier was 0.65). Controls PROFILE, GRID, etc. heading size.
     Closed folders now use the same 1.5 scale as the open section, so their
     titles read at the open-section size. */
  --questionnaire-card-title-scale: 1.5;
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 0.91 *
      var(--questionnaire-card-title-scale, 1) *
      var(--questionnaire-card-title-text-scale, 1.5)
  );
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.questionnaire-card.is-expanded .questionnaire-card__num,
.questionnaire-card.is-expanded .questionnaire-card__title {
  --questionnaire-card-title-scale: 1.5;
}

.questionnaire-card__num {
  flex-shrink: 0;
  width: var(--questionnaire-card-num-column-width, auto);
  min-width: var(--questionnaire-card-num-column-width, auto);
  text-align: start;
}

/* Small square marker between the number and the title. Sized in em so it grows
   with the header text (and its expanded scale). `currentColor` makes it white
   on closed red folders and brown when the section is open — matching the text. */
.questionnaire-card__dot {
  flex-shrink: 0;
  width: 0.28em;
  height: 0.28em;
  background: currentColor;
  /* Raise the square back to true center (see --questionnaire-card-dot-nudge).
     `top` stacks on top of the shared header transform, so every folder state
     keeps its re-centering. */
  position: relative;
  top: var(--questionnaire-card-dot-nudge, 0);
  /* Match the closed title's 1.5 scale so the square grows with the larger text. */
  --questionnaire-card-title-scale: 1.5;
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 0.91 *
      var(--questionnaire-card-title-scale, 1) *
      var(--questionnaire-card-title-text-scale, 1.5)
  );
}

.questionnaire-card.is-expanded .questionnaire-card__dot {
  --questionnaire-card-title-scale: 1.5;
}

.questionnaire-card__title {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.questionnaire-card__body {
  /* Right gutter clears canvas; left inset matches grid margin (scroll column bleeds left) */
  padding-inline: var(--page2-margin-inline, 1.25rem) var(--page2-gutter, 1.25rem);
  /* Symmetric 20px top/bottom inset so an open section has equal breathing room
     above and below its content. Measured height must match the live padding,
     so this base rule (used during measuring) mirrors the expanded rule below. */
  padding-block: var(--page2-space-20, 1.25rem) var(--page2-space-20, 1.25rem);
  min-height: 0;
}

.questionnaire-card.is-expanded .questionnaire-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Equal top/bottom inset (20px @ ref) around the section's content. */
  padding-block: var(--page2-space-20, 1.25rem) var(--page2-space-20, 1.25rem);
  padding-inline-start: calc(
    var(--page2-margin-inline, 1.25rem) - var(--questionnaire-card-border-width, 1px)
  );
  padding-inline-end: calc(
    var(--page2-gutter, 1.25rem) - var(--questionnaire-card-border-width, 1px)
  );
  container-type: inline-size;
}

/* Short desktop windows (16″ not-maximized, 14″, …): open folder grows to
   content; no inner scrollbar. JS toggles .questionnaire-panel--expand-to-content. */
@media (min-width: 1000px) and (max-height: 1020px) {
  .questionnaire-panel--expand-to-content .questionnaire-card.is-expanded {
    height: auto;
    min-height: var(--questionnaire-card-expanded-height);
    max-height: none;
  }

  .questionnaire-panel--expand-to-content
    .questionnaire-card.is-expanded
    .questionnaire-card__body {
    overflow: visible;
    overflow-y: visible;
    flex: 0 0 auto;
  }
}

/* The question content grows to fill the free space inside the body, which
   pushes the "Next" footer down so the button always rests at the bottom of
   the section (a fixed gap above the separator) instead of floating just below
   the last question. flex-grow only; never shrink, so content is never clipped
   (the body can still scroll if a section ever overflows). */
.questionnaire-card.is-expanded .questionnaire-card__body > .questionnaire-step {
  flex: 1 0 auto;
}

/* "Next"-button sections keep the same equal 20px bottom inset as every other
   section (the next-footer's own margin-top provides the gap above the button),
   so the open section has symmetric top/bottom spacing around its content. */
.questionnaire-card__body:has(.questionnaire-card__next-footer) {
  padding-bottom: var(--page2-space-20, 1.25rem);
}

.questionnaire-card.is-expanded
  .questionnaire-card__body:has(.questionnaire-card__next-footer) {
  padding-bottom: var(--page2-space-20, 1.25rem);
}

.questionnaire-card[data-section-key="profile"].is-expanded
  .questionnaire-card__body:has(.questionnaire-card__next-footer) {
  padding-bottom: calc(var(--page2-space-20, 1.25rem) + var(--page2-space-4, 0.25rem) * 2.5);
  /* 20px + 10px = 30px @ ref — subtle gap for the Next arrow above COMMUNITY */
}

#section-design.section-design--questionnaire-started > .app-shell > .main:empty {
  min-height: 0;
}

.questionnaire-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  pointer-events: auto;
}

.questionnaire-step__anim-upper,
.questionnaire-step__anim-lower {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .questionnaire-card__body {
    scroll-behavior: auto;
  }
}

.questionnaire-step__heading {
  margin: 0;
  font-family: "Suisse Intl", sans-serif;
  font-size: var(--questionnaire-question-size);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-brown);
}

.questionnaire-step__heading::before {
  content: attr(data-letter) ". ";
  color: var(--color-brown);
}

.questionnaire-step__heading:not([data-letter])::before,
.questionnaire-step__heading[data-letter=""]::before {
  content: none;
}

.questionnaire-step__heading--wrap {
  white-space: normal;
}

.questionnaire-step__answers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.questionnaire-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.questionnaire-options--row {
  flex-direction: row;
  flex-wrap: wrap;
}

.questionnaire-options--row .questionnaire-option {
  flex: 1 1 auto;
  min-width: 0;
}

.questionnaire-option {
  padding: 0.5rem 0.75rem;
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 0.75 *
      var(--questionnaire-text-scale, 1)
  );
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-brown);
  text-align: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.questionnaire-option:hover {
  background: #f5f5f5;
  border-color: #999;
}

.questionnaire-option:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
}

.questionnaire-option.is-selected {
  background: var(--color-brown);
  border-color: var(--color-brown);
  color: #fff;
}

.questionnaire-options--multi .questionnaire-option {
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) *
      var(--questionnaire-small-text-multiplier, 0.546) *
      var(--questionnaire-text-scale, 1)
  );
  padding: 0.45rem 0.4rem;
  white-space: normal;
  hyphens: auto;
}

/* One page-grid column wide; row spans page columns 1–6.
   EN (LTR grid): tracks 1–4. FA (RTL grid): same tracks, anchored right → cols 6–3. */
.questionnaire-options--grid-type {
  --q-page-col: calc(
    (100vw - 2 * var(--page2-margin-inline, 1.25rem) - 11 * var(--page2-gutter, 1.25rem)) /
      12
  );
  display: grid;
  grid-template-columns: repeat(6, var(--q-page-col));
  column-gap: var(--page2-gutter, 1.25rem);
  width: calc(6 * var(--q-page-col) + 5 * var(--page2-gutter, 1.25rem));
}

.questionnaire-options--grid-type .questionnaire-option--grid-icon {
  flex: none;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.questionnaire-options--grid-type .questionnaire-option--grid-icon:nth-child(1) {
  grid-column: 1;
}

.questionnaire-options--grid-type .questionnaire-option--grid-icon:nth-child(2) {
  grid-column: 2;
}

.questionnaire-options--grid-type .questionnaire-option--grid-icon:nth-child(3) {
  grid-column: 3;
}

.questionnaire-options--grid-type .questionnaire-option--grid-icon:nth-child(4) {
  grid-column: 4;
}

/* FA questionnaire: RTL grid so tracks 1–4 map to page columns 6→3 (right-aligned with questions). */
#questionnaire-scroll[lang="fa"] .questionnaire-options--grid-type {
  direction: rtl;
}

.questionnaire-option--grid-icon {
  flex: 1 1 0;
  aspect-ratio: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  direction: ltr; /* keep icon geometry upright inside RTL questionnaire rows */
  font-size: 0;
  white-space: normal;
  hyphens: auto;
  /* No white box around each grid example: drop the background, border and
     rounded corners so the pattern reads as a bare icon. The selected state
     (brown fill) still comes from .questionnaire-option.is-selected below. */
  background: transparent;
  border: none;
  border-radius: 0;
}

/* Keep the hover free of the white/grey frame too. */
.questionnaire-option--grid-icon:hover {
  background: transparent;
  border-color: transparent;
}

/* When a grid icon is already selected, hovering must NOT strip its brown
   background. Otherwise the white lines vanish against the page and only the
   star's brown center fill is left floating. Re-assert the selected look so all
   four grid examples behave the same on hover. */
.questionnaire-option--grid-icon.is-selected:hover {
  background: var(--color-brown);
  border-color: var(--color-brown);
}

/* On hover, thicken just the outer square frame of each grid example to 2× its
   normal width (base stroke is 1.25 → 2.5). The CSS stroke-width here overrides
   the inline SVG attribute set in gridUnitIcons.js. */
.questionnaire-option--grid-icon .grid-unit-icon__frame {
  transition: stroke-width 0.15s ease;
}

.questionnaire-option--grid-icon:hover .grid-unit-icon__frame {
  stroke-width: 2.5;
}

.questionnaire-option--grid-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--color-brown);
  /* Junction dots sit on the frame edges; allow them to spill past the SVG
     bounds instead of being clipped in half. */
  overflow: visible;
}

.questionnaire-option--grid-icon.is-selected svg {
  color: #fff;
}

.questionnaire-option--grid-icon.is-selected .grid-unit-icon__bg-fill {
  fill: var(--color-brown);
}

.questionnaire-input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 0.85 *
      var(--questionnaire-text-scale, 1)
  );
  font-weight: 700;
  color: var(--color-brown);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.questionnaire-input:focus {
  outline: 2px solid var(--color-brown);
  outline-offset: 1px;
  border-color: #999;
}

.questionnaire-input--english {
  text-transform: uppercase;
}

.questionnaire-input::placeholder {
  color: var(--color-brown);
  font-weight: 700;
  text-transform: none;
}

/* ── Profile Mad Libs (section 1) ── */

.questionnaire-profile-madlibs.is-typewriting
  .questionnaire-madlibs-blank:not(.is-typewriter-revealed),
.questionnaire-profile-madlibs.is-typewriting
  .questionnaire-madlibs-dropdown:not(.is-typewriter-revealed),
.questionnaire-profile-madlibs.is-typewriting
  .questionnaire-madlibs-field:not(.is-typewriter-revealed) {
  visibility: hidden;
  pointer-events: none;
}

.questionnaire-typewriter-chunk.is-active::after {
  content: "|";
  animation: questionnaire-typewriter-caret 0.5s step-end infinite;
}

.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline
  .questionnaire-madlibs-field__icon,
.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline
  .questionnaire-madlibs-blank
  > :not(.questionnaire-madlibs-blank-sizer),
.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline.questionnaire-madlibs-blank
  > :not(.questionnaire-madlibs-blank-sizer) {
  visibility: hidden;
  pointer-events: none;
}

.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline
  .questionnaire-madlibs-blank,
.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline.questionnaire-madlibs-blank {
  visibility: visible;
  pointer-events: none;
  border-bottom-color: transparent;
  background-image: none;
  position: relative;
}

.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline.questionnaire-madlibs-dropdown {
  background-image: none;
}

.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline
  .questionnaire-madlibs-blank::after,
.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline.questionnaire-madlibs-blank::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--madlibs-underline-thickness, 3px);
  background: var(--color-brown);
  transform: scaleX(var(--typewriter-underline-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline.is-active:not(
    .questionnaire-madlibs-blank
  )::after {
  content: "|";
  position: static;
  display: inline;
  height: auto;
  background: none;
  transform: none;
  animation: questionnaire-typewriter-caret 0.5s step-end infinite;
}

.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline.is-active.questionnaire-madlibs-blank::before {
  content: "|";
  animation: questionnaire-typewriter-caret 0.5s step-end infinite;
}

.questionnaire-profile-madlibs.is-typewriting
  .questionnaire-madlibs-field.is-typewriter-revealed:not(
    .is-typewriter-drawing-underline
  )
  .questionnaire-madlibs-blank,
.questionnaire-profile-madlibs.is-typewriting
  .questionnaire-madlibs-field.is-typewriter-revealed:not(
    .is-typewriter-drawing-underline
  )
  .questionnaire-madlibs-dropdown {
  visibility: visible;
  pointer-events: auto;
}

@keyframes questionnaire-typewriter-caret {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .questionnaire-typewriter-chunk.is-active::after,
  .questionnaire-profile-madlibs.is-typewriting
    .is-typewriter-drawing-underline.is-active:not(
      .questionnaire-madlibs-blank
    )::after,
  .questionnaire-profile-madlibs.is-typewriting
    .is-typewriter-drawing-underline.is-active.questionnaire-madlibs-blank::before {
    display: none;
  }
}

.questionnaire-panel__grid:has(.questionnaire-step--profile-madlibs)
  .questionnaire-panel__remaining {
  text-transform: none;
}

.questionnaire-step--profile-madlibs .questionnaire-step__answers {
  gap: 1rem;
  text-transform: none;
  /* Reserve room below the last mad-libs line ("I feel most at home") so its
     downward-opening dropdown panel has space to show. The PROFILE folder card
     has overflow:hidden and auto-sizes to its content, so this extra space also
     grows the folder — pushing COMMUNITY down instead of clipping the panel.
     Scales with the questionnaire text zoom so it stays correct at any size. */
  padding-bottom: calc(
    var(--questionnaire-profile-answers-bottom-pad, 2.375rem) *
      var(--questionnaire-text-scale, 1)
  );
}

.questionnaire-profile-madlibs {
  margin: 0;
  /* Full row span: question line-height (top) + answer underline band (bottom) */
  --profile-madlibs-icon-height: calc(
    1.2em + var(--madlibs-underline-gap) + var(--madlibs-underline-thickness)
  );
  /* Equal breathing room between every question line (scales with question size) */
  --madlibs-line-gap: calc(0.65em * 1.3); /* +30% row spacing */
  --madlibs-underline-gap: 3px;
  --madlibs-underline-thickness: 2px;
  /* Trailing slot so the open-panel caret always sits above the underline,
     even when punctuation (e.g. ".") follows the field in the sentence. */
  --madlibs-caret-size: 0.35em;
  --madlibs-caret-gap: 0.35em;
  --madlibs-caret-slot: calc(var(--madlibs-caret-size) + var(--madlibs-caret-gap));
  --madlibs-caret-lift: 0.35em;
  display: flex;
  flex-direction: column;
  gap: var(--madlibs-line-gap);
  font-family: "Suisse Intl", sans-serif;
  font-size: var(--questionnaire-question-size);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-brown);
}

.questionnaire-profile-madlibs input.questionnaire-madlibs-blank,
.questionnaire-profile-madlibs .questionnaire-madlibs-dropdown__label:not(.is-placeholder),
.questionnaire-profile-madlibs .questionnaire-madlibs-name-mode__input {
  font-family: "DIN Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.questionnaire-profile-madlibs input.questionnaire-madlibs-blank::placeholder,
.questionnaire-profile-madlibs .questionnaire-madlibs-name-mode__input::placeholder {
  font-family: "Suisse Intl Light", sans-serif;
  font-weight: normal;
  text-transform: none;
  color: color-mix(in srgb, var(--color-brown) 45%, transparent);
}

.questionnaire-profile-madlibs .questionnaire-madlibs-blank--english::placeholder {
  text-transform: none;
}

.questionnaire-profile-madlibs .questionnaire-madlibs-blank:not(.questionnaire-madlibs-dropdown),
.questionnaire-profile-madlibs .questionnaire-madlibs-dropdown__trigger,
.questionnaire-profile-madlibs .questionnaire-madlibs-name-mode__surface {
  line-height: 1;
  padding-bottom: calc(
    var(--madlibs-underline-gap) + var(--madlibs-underline-thickness)
  );
}

.questionnaire-profile-madlibs .questionnaire-madlibs-dropdown__trigger,
.questionnaire-profile-madlibs .questionnaire-madlibs-name-mode__surface {
  position: relative;
  align-items: flex-end;
}

.questionnaire-profile-madlibs
  .questionnaire-madlibs-dropdown:not(.questionnaire-madlibs-name-mode)
  .questionnaire-madlibs-dropdown__trigger::after,
.questionnaire-profile-madlibs .questionnaire-madlibs-name-mode__surface::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--madlibs-underline-thickness);
  background: var(--madlibs-underline-color, var(--color-brown));
  pointer-events: none;
}

.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline
  .questionnaire-madlibs-dropdown__trigger::after,
.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline
  .questionnaire-madlibs-name-mode__surface::after {
  display: none;
}

.questionnaire-profile-madlibs .questionnaire-madlibs-name-mode__input,
.questionnaire-profile-madlibs .questionnaire-madlibs-name-mode__caret-btn {
  line-height: 1;
  padding-bottom: 0;
}

.questionnaire-profile-madlibs .questionnaire-madlibs-name-mode__caret-btn {
  position: absolute;
  inset-inline-end: 0;
  bottom: calc(
    var(--madlibs-underline-gap) + var(--madlibs-underline-thickness) +
      var(--madlibs-caret-lift)
  );
  margin: 0;
  padding: 0 0.15em 0 0;
}

.questionnaire-profile-madlibs
  .questionnaire-madlibs-dropdown__trigger
  > .questionnaire-madlibs-dropdown__caret {
  position: absolute;
  inset-inline-end: 0.15em;
  bottom: calc(
    var(--madlibs-underline-gap) + var(--madlibs-underline-thickness) +
      var(--madlibs-caret-lift)
  );
  margin: 0;
  align-self: auto;
}

.questionnaire-profile-madlibs .questionnaire-madlibs-dropdown__option {
  font-family: "DIN Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0;
}

.questionnaire-madlibs-line {
  margin: 0 0 0.85rem;
  display: block;
}

.questionnaire-profile-madlibs .questionnaire-madlibs-line {
  margin: 0;
  /* Uniform row floor — matches icon span so gaps stay even at any width. */
  min-height: var(--profile-madlibs-icon-height);
}

.questionnaire-madlibs-line:last-of-type {
  margin-bottom: 0;
}

.questionnaire-madlibs-field {
  display: inline;
  white-space: nowrap;
}

/* Profile: question text + blanks on baseline; sign spans row top → underline. */
.questionnaire-profile-madlibs .questionnaire-madlibs-field {
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
  white-space: nowrap;
}

.questionnaire-madlibs-field__icon {
  display: inline-block;
  height: 1.15em;
  width: auto;
  vertical-align: -0.12em;
  margin-inline: 0 0.2em;
  color: inherit;
  flex-shrink: 0;
}

.questionnaire-profile-madlibs .questionnaire-madlibs-field__icon {
  height: var(--profile-madlibs-icon-height);
  width: auto;
  vertical-align: unset;
  align-self: flex-end;
  /* The sign fills the tall field row, so it was visually anchored down at the
     answer underline band. Lift it so its vertical center sits on the question
     text instead (~0.25em ≈ half the offset between the underline and the text
     line). Uses a transform so the answer input/underline layout is untouched,
     and em keeps it aligned at any questionnaire text scale. */
  transform: translateY(-0.25em);
  margin-inline: 0 0.2em;
  flex-shrink: 0;
}

.questionnaire-madlibs-field__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.questionnaire-madlibs-field__icon svg,
.questionnaire-madlibs-field__icon svg * {
  fill: currentColor;
}

.questionnaire-profile-madlibs .questionnaire-madlibs-blank:not(.questionnaire-madlibs-dropdown) {
  padding: 0 0.15em
    calc(var(--madlibs-underline-gap) + var(--madlibs-underline-thickness));
}

.questionnaire-madlibs-blank:not(.questionnaire-madlibs-dropdown) {
  --madlibs-underline-color: var(--color-brown);
  display: inline-block;
  vertical-align: baseline;
  box-sizing: border-box;
  margin: 0 0.1em;
  padding: 0 0.15em
    calc(var(--madlibs-underline-gap, 3px) + var(--madlibs-underline-thickness, 1.5px));
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(
    var(--madlibs-underline-color),
    var(--madlibs-underline-color)
  );
  background-size: 100% var(--madlibs-underline-thickness, 1.5px);
  background-position: left bottom;
  background-repeat: no-repeat;
  border: none;
  border-radius: 0;
  outline: none;
  width: auto;
  min-width: 2ch;
  max-width: 100%;
  field-sizing: content;
}

.questionnaire-madlibs-dropdown.questionnaire-madlibs-blank {
  background-image: none;
}

.questionnaire-madlibs-blank--short {
  min-width: 2.5ch;
}

.questionnaire-madlibs-blank--medium {
  min-width: 4ch;
}

.questionnaire-madlibs-blank--long {
  min-width: 5ch;
}

.questionnaire-madlibs-blank-sizer {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  white-space: pre;
  pointer-events: none;
}

.questionnaire-madlibs-blank--english {
  text-transform: none;
}

.questionnaire-madlibs-blank:not(.questionnaire-madlibs-dropdown):focus {
  --madlibs-underline-color: color-mix(in srgb, var(--color-brown) 55%, black);
}

.questionnaire-madlibs-dropdown {
  --madlibs-underline-color: var(--color-brown);
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0.1em;
  padding: 0;
  cursor: pointer;
  vertical-align: baseline;
  border: none;
}

.questionnaire-madlibs-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--madlibs-underline-thickness, 1.5px);
  background: var(--madlibs-underline-color);
  pointer-events: none;
  display: none;
}

.questionnaire-profile-madlibs.is-typewriting
  .is-typewriter-drawing-underline.questionnaire-madlibs-dropdown::after {
  display: block;
}

.questionnaire-madlibs-dropdown:has(
    .questionnaire-madlibs-dropdown__trigger:focus-visible
  ),
.questionnaire-madlibs-dropdown:has(
    .questionnaire-madlibs-dropdown__menu:not([hidden])
  ) {
  --madlibs-underline-color: color-mix(in srgb, var(--color-brown) 55%, black);
}

.questionnaire-profile-madlibs .questionnaire-madlibs-dropdown__trigger {
  justify-content: flex-start;
  padding-top: 0;
  padding-inline-end: var(--madlibs-caret-slot);
  padding-bottom: calc(
    var(--madlibs-underline-gap) + var(--madlibs-underline-thickness)
  );
  padding-inline-start: 0.15em;
}

.questionnaire-profile-madlibs .questionnaire-madlibs-name-mode__surface {
  padding-inline-end: var(--madlibs-caret-slot);
}

.questionnaire-profile-madlibs
  .questionnaire-madlibs-dropdown.is-profile-blank-empty
  .questionnaire-madlibs-dropdown__trigger,
.questionnaire-profile-madlibs
  .questionnaire-madlibs-name-mode.is-profile-blank-empty
  .questionnaire-madlibs-name-mode__surface {
  width: 100%;
}

.questionnaire-profile-madlibs
  .questionnaire-madlibs-dropdown:not(.is-profile-blank-empty)
  .questionnaire-madlibs-dropdown__trigger {
  width: auto;
}

/* Name/mode field: underline lives on __surface; keep it tied to the wrap width
   set by JS (profile inputs use field-sizing: fixed and would otherwise stay
   at the default input box width). */
.questionnaire-profile-madlibs
  .questionnaire-madlibs-name-mode:not(.is-profile-blank-empty)
  .questionnaire-madlibs-name-mode__surface {
  width: 100%;
}

/* Filled name field: shrink-wrap to content (override blank--medium 4ch floor). */
.questionnaire-profile-madlibs
  .questionnaire-madlibs-name-mode:not(.is-profile-blank-empty) {
  min-width: 0;
}

.questionnaire-profile-madlibs .questionnaire-madlibs-name-mode__input {
  min-width: 0;
}

.questionnaire-profile-madlibs input.questionnaire-madlibs-blank:not(.questionnaire-madlibs-dropdown),
.questionnaire-profile-madlibs .questionnaire-madlibs-name-mode__input {
  field-sizing: fixed;
}

.questionnaire-profile-madlibs .questionnaire-madlibs-dropdown__label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* Profile answers: underline stays brown (no darkening on focus/open). */
.questionnaire-profile-madlibs
  .questionnaire-madlibs-blank:not(.questionnaire-madlibs-dropdown):focus {
  --madlibs-underline-color: var(--color-brown);
}

.questionnaire-profile-madlibs .questionnaire-madlibs-dropdown:has(
    .questionnaire-madlibs-dropdown__trigger:focus-visible
  ),
.questionnaire-profile-madlibs .questionnaire-madlibs-dropdown:has(
    .questionnaire-madlibs-dropdown__menu:not([hidden])
  ),
.questionnaire-profile-madlibs .questionnaire-madlibs-dropdown:has(
    .questionnaire-madlibs-name-mode__input:focus-visible
  ),
.questionnaire-profile-madlibs .questionnaire-madlibs-dropdown:has(
    .questionnaire-madlibs-name-mode__caret-btn:focus-visible
  ) {
  --madlibs-underline-color: var(--color-brown);
}

.questionnaire-madlibs-dropdown__trigger {
  display: inline-flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.35em;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 1.1em
      calc(var(--madlibs-underline-gap, 3px) + var(--madlibs-underline-thickness, 1.5px))
    0.15em;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  outline: none;
}

.questionnaire-madlibs-dropdown__trigger:focus-visible {
  outline: none;
}

.questionnaire-madlibs-dropdown__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.questionnaire-madlibs-dropdown__label.is-placeholder {
  color: color-mix(in srgb, var(--color-brown) 45%, transparent);
}

.questionnaire-madlibs-dropdown__caret {
  flex: 0 0 auto;
  width: 0.35em;
  height: 0.35em;
  margin-top: 0;
  margin-bottom: 0.06em;
  align-self: flex-end;
  border-right: 1.5px solid var(--color-brown);
  border-bottom: 1.5px solid var(--color-brown);
  transform: rotate(45deg);
  opacity: 0.85;
}

.questionnaire-profile-madlibs .questionnaire-madlibs-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 30;
  min-width: 100%;
  width: max-content;
  max-width: min(22rem, 92vw);
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  font-family: "DIN Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-brown);
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* FA profile dropdowns: in RTL the panel sits on the right with a viewport bleed.
   Anchor menus to the trigger's right edge so long Persian options grow leftward
   into the card instead of overflowing off the right edge of the screen. */
#questionnaire-scroll[lang="fa"] .questionnaire-profile-madlibs .questionnaire-madlibs-dropdown__menu {
  left: auto;
  right: 0;
  /* English caps at 22rem; FA needs the full card width so long options (e.g.
     homeAt) stay on one line while the panel expands left from the trigger. */
  max-width: 100cqw;
  text-align: right;
  direction: rtl;
}

/* FA profile dropdown answers: right-align selected value + options so long
   Persian text does not run into the caret (inline-end in RTL). */
#questionnaire-scroll[lang="fa"] .questionnaire-profile-madlibs :is(
  .questionnaire-madlibs-dropdown__trigger,
  .questionnaire-madlibs-dropdown__label,
  .questionnaire-madlibs-dropdown__option
) {
  text-align: right;
}

/* FA profile dropdown options: keep each answer on a single line; width grows
   leftward via the right-anchored menu rule above. */
#questionnaire-scroll[lang="fa"] .questionnaire-profile-madlibs .questionnaire-madlibs-dropdown__option {
  white-space: nowrap;
}

.questionnaire-madlibs-dropdown__option {
  padding: 0.5rem 0.75rem;
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 0.75 *
      var(--questionnaire-text-scale, 1)
  );
  line-height: 1.25;
  color: var(--color-brown);
  background: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: normal;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.questionnaire-madlibs-dropdown__option:hover {
  background: #f5f5f5;
}

.questionnaire-madlibs-dropdown__option.is-selected {
  background: var(--color-brown);
  color: #fff;
}

.questionnaire-madlibs-name-mode__surface {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.1em;
  width: 100%;
  box-sizing: border-box;
}

.questionnaire-madlibs-name-mode.is-anonymous-mode .questionnaire-madlibs-name-mode__input {
  cursor: pointer;
}

.questionnaire-madlibs-name-mode.is-name-editing .questionnaire-madlibs-name-mode__input {
  cursor: text;
}

.questionnaire-madlibs-name-mode__input {
  flex: 1 0 auto;
  min-width: 3ch;
  margin: 0;
  padding: 0 0 0 0.15em;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  width: auto;
  max-width: 100%;
  field-sizing: content;
}

.questionnaire-madlibs-name-mode__input:read-only {
  caret-color: transparent;
}

.questionnaire-madlibs-name-mode__input::placeholder {
  color: color-mix(in srgb, var(--color-brown) 45%, transparent);
}

.questionnaire-madlibs-name-mode__caret-btn {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0.35em 0 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  outline: none;
}

.questionnaire-madlibs-name-mode__caret-btn:focus-visible {
  outline: none;
}

.questionnaire-madlibs-dropdown:has(
    .questionnaire-madlibs-name-mode__input:focus-visible
  ),
.questionnaire-madlibs-dropdown:has(
    .questionnaire-madlibs-name-mode__caret-btn:focus-visible
  ) {
  --madlibs-underline-color: color-mix(in srgb, var(--color-brown) 55%, black);
}

.questionnaire-archive-btn {
  align-self: flex-end;
  margin-top: 0.25rem;
  padding: clamp(0.35rem, 0.486vw, 0.525rem)
    clamp(0.875rem, 1.215vw, 1.3125rem); /* match product-order-btn */
  font-family: "Suisse Intl Light", sans-serif;
  font-size: clamp(0.7rem, 0.81vw, 0.875rem);
  font-weight: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-brown);
  border: 1px solid var(--color-brown);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.questionnaire-archive-btn:hover:not(:disabled) {
  background: #fff;
  color: var(--color-brown);
}

.questionnaire-archive-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.questionnaire-archive-btn:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
}

/* "Order" submit button as an outlined circle with a checkmark. Matches the
   Next button exactly: transparent background with a brown outline + brown
   checkmark by default, filling brown (white checkmark) on hover. Shares the
   Next button's circular size (see --questionnaire-next-btn-size) and thin
   0.7 stroke so the two buttons read as one family. */
.questionnaire-archive-btn--circle {
  box-sizing: border-box;
  width: var(--questionnaire-next-btn-size, clamp(2rem, 2.315vw, 2.5rem));
  height: var(--questionnaire-next-btn-size, clamp(2rem, 2.315vw, 2.5rem));
  padding: 0;
  border-radius: 50%;
  color: var(--color-brown);
  background: transparent;
  border: 1px solid var(--color-brown);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hover: fill brown so the checkmark (currentColor) reads white — same
   interaction as the Next arrow button. Overrides the base archive-btn hover. */
.questionnaire-archive-btn--circle:hover:not(:disabled) {
  background: var(--color-brown);
  color: #fff;
}

.questionnaire-archive-btn--circle .questionnaire-archive-btn__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.questionnaire-archive-btn--circle .questionnaire-archive-btn__icon {
  width: 100%;
  height: 100%;
  display: block;
}

.questionnaire-archive-btn--circle .questionnaire-archive-btn__check {
  stroke: currentColor;
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* "Next" button — circular outline with arrow, bottom-right of each section. */
.questionnaire-card__next-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--page2-space-20, 1.25rem);
}

/* Feelings content is shorter than the expanded card — don't stretch the step
   or the Next button floats far below the Hope pen/undo controls. */
.questionnaire-card[data-section-key="feelings"].is-expanded
  .questionnaire-card__body
  > .questionnaire-step {
  flex: 0 0 auto;
}

.questionnaire-card[data-section-key="feelings"] .questionnaire-card__next-footer {
  margin-top: 0.5rem;
}

/* Feelings body is shorter than the JS-expanded height — shrink the open card so
   the Next button sits the same distance above the section bottom as elsewhere
   (body padding-bottom only, no extra empty flex space). */
.questionnaire-card[data-section-key="feelings"].is-expanded {
  height: auto;
  min-height: var(--questionnaire-card-expanded-header-height);
  max-height: none;
}

.questionnaire-card__next {
  box-sizing: border-box;
  width: var(--questionnaire-next-btn-size, clamp(2rem, 2.315vw, 2.5rem));
  height: var(--questionnaire-next-btn-size, clamp(2rem, 2.315vw, 2.5rem));
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--color-brown);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.questionnaire-card__next-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.questionnaire-card__next-icon {
  width: 100%;
  height: 100%;
  display: block;
}

.questionnaire-card__next-icon circle,
.questionnaire-card__next-icon path {
  stroke: currentColor;
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.questionnaire-card__next:hover {
  background: var(--color-brown);
  color: #fff;
}

/* On hover the filled circle already provides the shape, so drop the ring
   outline and keep only the arrow visible. */
.questionnaire-card__next:hover .questionnaire-card__next-icon circle {
  stroke: none;
}

.questionnaire-card__next:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
}

/* On brown-background cards invert outline/arrow to white for contrast. */
.questionnaire-card--brown .questionnaire-card__next {
  color: var(--page2-bg, #fff);
  background: transparent;
}

.questionnaire-card--brown .questionnaire-card__next:hover {
  background: var(--page2-bg, #fff);
  color: var(--color-brown);
}

#questionnaire-scroll[lang="fa"] .questionnaire-card__next-icon-wrap {
  transform: scaleX(-1);
}

.questionnaire-step--complete .questionnaire-step__heading {
  color: var(--color-brown);
}

.questionnaire-step--complete .questionnaire-step__heading::before {
  content: none;
}

.questionnaire-step__complete-text {
  margin: 0;
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 0.9 *
      var(--questionnaire-text-scale, 1)
  );
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-brown);
}

.questionnaire-step--complete .questionnaire-archive-btn {
  margin-top: 0.75rem;
}

/* Lay the final "order" section on a 6-column grid so the button can occupy a
   single column at the right. The button and confirmation live inside the
   .questionnaire-step__anim-lower wrapper (added by prepareStepAnimationLayers),
   so the grid goes on that wrapper — the button is not a direct child of the
   step itself.
   Note: the grid keeps its natural 100% width (no right-gutter reclaim) so its
   right edge lands on the card body content edge — exactly where the circular
   "Next" button sits (its footer is also content-width, right-aligned). This
   makes the order button share the same distance from the section's right edge
   as the Next button. */
.questionnaire-step--complete .questionnaire-step__anim-lower {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--page2-gutter, 1.25rem);
  align-content: start;
}

/* Button occupies the single right-most column (column 6). In Persian the
   questionnaire scroll is dir="rtl", so the grid fills right-to-left and this
   same column 6 becomes the left-most column — mirroring the Next button. */
.questionnaire-step--complete .questionnaire-archive-btn {
  grid-column: 6 / span 1;
  align-self: start; /* override the flex-end from the base rule (now a grid item) */
  width: 100%;
}

/* The circular variant keeps its fixed diameter (not stretched to the full
   column) and sits at the column's end edge — mirroring in RTL like the Next
   button. */
.questionnaire-step--complete .questionnaire-archive-btn--circle {
  width: var(--questionnaire-next-btn-size, clamp(2rem, 2.315vw, 2.5rem));
  justify-self: end;
}

/* Confirmation message spans the full 6-column width, below the button. */
.questionnaire-step--complete .questionnaire-archive-confirm {
  grid-column: 1 / -1;
}

/* Last section ("Submit & Order") only: this card has almost no content, so the
   shared uniform card height leaves a large empty gap between the button and the
   bottom divider line. Let this one card shrink to its content instead. The
   bottom padding matches every other section's bottom inset (--page2-space-20),
   so the gap below the order button equals the gap below the circular "Next"
   button in the other sections. Only affects this section. */
.questionnaire-card[data-section-key="submitOrder"].is-expanded {
  height: auto;
  min-height: var(--questionnaire-card-expanded-header-height);
  max-height: none;
}

.questionnaire-card[data-section-key="submitOrder"].is-expanded
  .questionnaire-card__body {
  padding-block: 1.5rem var(--page2-space-20, 1.25rem);
}

.questionnaire-archive-confirm {
  margin: 0.5rem 0 0;
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 0.75 *
      var(--questionnaire-text-scale, 1)
  );
  font-weight: 700;
  color: var(--color-brown);
}

.archive-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.signs-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.signs-section__title {
  margin: 0 0 1.25rem;
  font-family: "Suisse Intl Light", sans-serif;
  font-size: calc((var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 1.4);
  font-weight: normal;
  color: var(--color-brown);
  text-transform: none;
}

.signs-section__intro {
  margin: 0;
  font-family: "Suisse Intl Light", sans-serif;
  font-size: calc((var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 0.9);
  font-weight: normal;
  color: var(--color-brown);
}

.archive-section__title {
  margin: 0 0 1.25rem;
  font-family: "Suisse Intl Light", sans-serif;
  font-size: calc((var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 1.4);
  font-weight: normal;
  color: var(--color-brown);
  text-transform: none;
}

.archive-section__empty {
  margin: 0;
  font-family: "Suisse Intl Light", sans-serif;
  font-size: calc((var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 0.9);
  font-weight: normal;
  color: var(--color-brown);
}

.archive-grid {
  display: grid;
  /* 12-column system: each card spans 2 columns => 6 cards per row */
  grid-template-columns: repeat(12, 1fr);
  /* Use the page2 reference grid gutter for the column gaps so a 2-column card
     lines up exactly with two grid columns. A fixed gap (was 1rem) is narrower
     than --page2-gutter, which widened each column and pushed each handkerchief
     past the right grid line. */
  column-gap: var(--page2-gutter);
  row-gap: 1rem;
}

.archive-card {
  /* Each handkerchief occupies 2 of the 12 columns (6 per row, wraps left-to-right) */
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.archive-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
  margin-top: 0.5rem;
}

.archive-card__thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 70 / 182;
  width: 100%;
  overflow: visible;
}

.archive-card__figure {
  position: relative;
  height: 100%;
  width: auto;
  max-width: 100%;
  /* Match exported handkerchief proportions (803×2126) */
  aspect-ratio: 803 / 2126;
}

.archive-card__thumbnail img,
.archive-card__thumbnail .archive-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.archive-card__title {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.4em;
  margin: 0;
  font-family: "DIN Condensed", sans-serif;
  font-size: var(--page2-product-spec-body-size);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-brown);
  text-align: left;
}

.archive-card__title .shop-card__name-part {
  flex: 0 0 auto;
}

.archive-card__title .shop-card__name-sep {
  flex: 0 0 auto;
  width: 0.21em;
  height: 0.21em;
  background: currentColor;
  transform: translateY(-0.06em);
}

.archive-card__title .shop-card__num {
  font-weight: 100;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

.archive-card__date {
  margin: 0;
  font-family: "Suisse Intl Shop", sans-serif;
  font-size: calc(var(--page2-product-spec-body-size) * 0.8);
  font-weight: 300;
  font-synthesis: none;
  line-height: 1.25;
  color: var(--color-brown);
  text-align: left;
}

.archive-card__actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.archive-card__btn {
  flex: 1;
  padding: 0.35rem 0.5rem;
  font-family: "Suisse Intl Light", sans-serif;
  font-size: calc((var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 0.65);
  font-weight: normal;
  border-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #fff;
  color: var(--color-brown);
}

.archive-card__btn--delete {
  background: #222;
  border-color: #222;
  color: #fff;
}

.archive-card__btn--delete:hover {
  background: #444;
}

.archive-card__btn:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}

.questionnaire-slider-wrap {
  --q-page-col: calc(
    (100vw - 2 * var(--page2-margin-inline, 1.25rem) - 11 * var(--page2-gutter, 1.25rem)) /
      12
  );
  --questionnaire-slider-track-span: calc(
    3 * var(--q-page-col) + 2 * var(--page2-gutter, 1.25rem)
  );
  /* Same absolute stroke as grid-type icon outer frame:
     gridUnitIcons STROKE_WIDTH (1.25) × icon width / UNIT_SIZE (100). */
  --slider-track-border: calc(var(--q-page-col) * 0.0125);
  display: grid;
  grid-template-columns: var(--questionnaire-slider-track-span) auto;
  column-gap: 0.65rem;
  row-gap: 0.35rem;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}

.questionnaire-slider-wrap:not(:has(.questionnaire-slider-output)) {
  grid-template-columns: var(--questionnaire-slider-track-span);
}

.questionnaire-slider-range-labels {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  /* Pull labels ~30% closer to the visible slider bar. The slider input is
     taller than its visible track, leaving transparent space beneath the bar;
     this negative margin lifts the labels up into that space. */
  margin-top: -0.4rem;
  width: 100%;
  min-width: 0;
}

.questionnaire-slider-range-label {
  font-size: var(--questionnaire-small-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-brown);
  /* Cap each end label at one page-grid column */
  max-width: var(--q-page-col, 33%);
  overflow-wrap: break-word;
}

.questionnaire-slider-range-label:not(.questionnaire-slider-range-label--end) {
  text-align: left;
}

.questionnaire-slider-range-label--end {
  text-align: right;
}

.questionnaire-slider-control {
  display: contents;
}

.questionnaire-slider-track {
  --bar-fill: 0%;
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.questionnaire-slider-handle {
  position: absolute;
  top: 50%;
  left: var(--bar-fill);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
}

.questionnaire-slider-handle__arrow--left {
  position: absolute;
  top: 50%;
  right: var(--slider-split-gap);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: var(--slider-arrow-height) solid transparent;
  border-bottom: var(--slider-arrow-height) solid transparent;
  border-right: var(--slider-arrow-width) solid #fff;
}

.questionnaire-slider-handle__arrow--right {
  position: absolute;
  top: 50%;
  left: var(--slider-split-gap);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: var(--slider-arrow-height) solid transparent;
  border-bottom: var(--slider-arrow-height) solid transparent;
  border-left: var(--slider-arrow-width) solid var(--slider-brown);
}

.questionnaire-slider-track.is-at-min .questionnaire-slider-handle,
.questionnaire-slider-track.is-at-max .questionnaire-slider-handle {
  display: none;
}

.questionnaire-slider {
  --bar-fill: 0%;
  width: 100%;
  height: var(--slider-input-height);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.questionnaire-slider:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
}

.questionnaire-slider::-webkit-slider-runnable-track {
  height: var(--slider-track-height);
  border: none;
  border-radius: 0;
  /* inset box-shadow renders more reliably than border on range tracks (WebKit). */
  box-shadow: inset 0 0 0 var(--slider-track-border) var(--slider-brown);
  background: linear-gradient(
    to right,
    var(--slider-brown) var(--bar-fill),
    #fff var(--bar-fill)
  );
}

.questionnaire-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.questionnaire-slider::-moz-range-track {
  height: var(--slider-track-height);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--slider-track-border) var(--slider-brown);
  background: #fff;
}

.questionnaire-slider::-moz-range-progress {
  height: var(--slider-track-height);
  background: var(--slider-brown);
  border-radius: 0;
}

.questionnaire-slider::-moz-range-thumb {
  width: 0;
  height: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.questionnaire-slider-output {
  grid-column: 2;
  grid-row: 1;
  flex-shrink: 0;
  min-width: 1.5rem;
  font-size: var(--questionnaire-small-size);
  color: var(--color-brown);
  text-align: right;
}

.questionnaire-palette-picker {
  --palette-dot-count: 9;
  --palette-dot-overlap: 0.25;
  --q-page-col: calc(
    (100vw - 2 * var(--page2-margin-inline, 1.25rem) - 11 * var(--page2-gutter, 1.25rem)) /
      12
  );
  /* 9 overlapping circles occupy `count - (count-1) * overlap` dot-widths.
     Row width = 5 page-grid columns (5 tracks + 4 gutters). Dot size is derived
     from that span so overlap stays 0.25 and circles shrink proportionally. */
  --palette-dot-span: calc(
    var(--palette-dot-count) - (var(--palette-dot-count) - 1) *
      var(--palette-dot-overlap)
  );
  --palette-dot-size: calc(100% / var(--palette-dot-span));
  --palette-dot-gap-default: calc(
    var(--palette-dot-size) * var(--palette-dot-overlap) * -1
  );
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: center;
  width: calc(5 * var(--q-page-col) + 4 * var(--page2-gutter, 1.25rem));
  max-width: 100%;
  align-self: flex-start;
}

.questionnaire-palette-dot {
  width: var(--palette-dot-size);
  /* height via aspect-ratio (not a % of the container's indefinite height,
     which would collapse to 0 and hide the dots). */
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
  isolation: isolate;
  background-color: #ccc;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.questionnaire-palette-dot__base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: inherit;
  pointer-events: none;
}

.questionnaire-palette-dot__fill {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ccc;
  transform-origin: center center;
  pointer-events: none;
}

.questionnaire-palette-dot__fill--mesh {
  filter: blur(7.5px);
  transform: scale(1.3);
}

.questionnaire-palette-dot + .questionnaire-palette-dot {
  margin-inline-start: var(--palette-dot-gap-default);
}

/* The hover "reveal" is driven by translateX in js/questionnaire.js so the row
   keeps a fixed total width. EN pins the first circle; FA pins the last (mirror).
   Transforms don't reflow layout, so nothing gets pushed past the edges. */
.questionnaire-palette-dot {
  transition: transform 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .questionnaire-palette-dot {
    transition: none;
  }
}

.questionnaire-palette-dot.is-selected {
  box-shadow: 0 0 0 2px var(--color-brown);
  z-index: 13;
}

.questionnaire-palette-dot:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
}

.questionnaire-step--feelings-all {
  --feelings-spider-width: min(100%, clamp(18.4rem, 48.3vw, 29.9rem));
  /* Match spider handle r=5 in VIEW_SIZE 480 → diameter / 48 of chart width. */
  --feelings-spider-handle-size: calc(var(--feelings-spider-width) / 48);
  /* Display-only pull-ups that close the empty whitespace bands inside the
     square SVG so the chart reads closer to the legend above and the Hope
     separator below. IMPORTANT: these are neutralised during height
     measurement (see .questionnaire-panel--measuring override) so the measured
     feelings body height is unchanged and the red section titles never grow. */
  --feelings-spider-pull-top: -2.5rem;
  --feelings-spider-pull-bottom: -2rem;
}

.questionnaire-step--feelings-all .questionnaire-step__answers {
  /* Flex gap between intro and chart block — −30% vs default 0.5rem */
  gap: calc(0.5rem * 0.7);
  padding-right: 0.25rem;
}

/* Double the space between the intro question and the scale legend row. */
.questionnaire-step--feelings-all .questionnaire-feelings-scale-legend {
  margin-top: calc(0.5rem * 0.7);
}

.questionnaire-step--feelings-all .questionnaire-feelings-spider {
  margin-top: var(--feelings-spider-pull-top, 0);
  margin-bottom: var(--feelings-spider-pull-bottom, 0);
}

.questionnaire-feelings-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.questionnaire-feelings-emotion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.questionnaire-feelings-emotion-heading {
  margin: 0;
  font-family: "Suisse Intl", sans-serif;
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 1.2 *
      var(--questionnaire-text-scale, 1)
  );
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-brown);
}

.questionnaire-feelings-emotion-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.questionnaire-feelings-sublabel {
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) *
      var(--questionnaire-small-text-multiplier, 0.546) *
      var(--questionnaire-text-scale, 1)
  );
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-brown);
}

.questionnaire-feelings-hope-options {
  width: 100%;
}

.questionnaire-feelings-spider {
  display: flex;
  justify-content: center;
  width: 100%;
  /* Spider chart: +15% over the pre-boost base (~26rem max), fixed size — not
     tied to --questionnaire-text-scale (see syncQuestionnaireCardHeights). */
  max-width: var(--feelings-spider-width, clamp(18.4rem, 48.3vw, 29.9rem));
  margin-inline: auto;
  touch-action: none;
}

.questionnaire-feelings-spider__svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  touch-action: none;
  user-select: none;
}

.questionnaire-feelings-spider__ring {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Concentric step-lines in warm brown, lightest at the outer edge (step 1) to
   darkest at the center (step 4 = full --color-brown). Shades are mixed toward
   a warm caramel (#ddc4a8) instead of white, so every line stays brown rather
   than turning gray. Step 5 sits at radius 0 (a center point with no length),
   so it is invisible; the innermost visible line is step 4.
   The dash length stays constant (3); only the gap changes, growing toward the
   edge: the outer (minimum) line has large gaps, the inner (maximum) line has a
   tiny gap so it reads almost solid. */
.questionnaire-feelings-spider__ring[data-ring-step="1"] {
  stroke: #ddc4a8;
  stroke-dasharray: 3 10;
}
.questionnaire-feelings-spider__ring[data-ring-step="2"] {
  stroke: color-mix(in srgb, var(--color-brown) 33%, #ddc4a8);
  stroke-dasharray: 3 6;
}
.questionnaire-feelings-spider__ring[data-ring-step="3"] {
  stroke: color-mix(in srgb, var(--color-brown) 67%, #ddc4a8);
  stroke-dasharray: 3 3;
}
.questionnaire-feelings-spider__ring[data-ring-step="4"] {
  stroke: var(--color-brown);
  stroke-dasharray: 3 1;
}
.questionnaire-feelings-spider__ring[data-ring-step="5"] {
  stroke: var(--color-brown);
}

.questionnaire-feelings-spider__axis {
  stroke: rgba(92, 64, 51, 0.14);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.questionnaire-feelings-spider__axis-hit {
  stroke: transparent;
  stroke-linecap: round;
  cursor: grab;
  pointer-events: stroke;
}

.questionnaire-feelings-spider__polygon {
  fill: none;
  stroke: var(--color-brown);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.questionnaire-feelings-spider__label {
  font-family: "Suisse Intl", sans-serif;
  /* font-size set in JS (feelingsSpiderChart.js) — CSS font-size on SVG text
     overrides the presentation attribute and renders in user units (~9px). */
  font-weight: 400;
  fill: var(--color-brown);
  pointer-events: none;
}

.questionnaire-feelings-spider__handle {
  fill: var(--color-brown);
  stroke: #fff;
  stroke-width: 1.5;
  cursor: grab;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
}

.questionnaire-feelings-spider__handle:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
}

.questionnaire-feelings-spider__handle-hit {
  fill: transparent;
  cursor: grab;
  pointer-events: all;
}

.questionnaire-feelings-spider__handle:active,
.questionnaire-feelings-spider__handle-hit:active,
.questionnaire-feelings-spider__axis-hit:active {
  cursor: grabbing;
}

/* ---- Intro overlay -----------------------------------------------------
   While the chart first appears it explains the scale directly on the graph:
   the real graph is dimmed to 20% and its emotion labels are hidden, while
   an intro layer shows the top-left axis with "Very much" (center) and "Not at
   all" (outer vertex) plus a dark dot sliding between them. Any interaction
   removes the --intro class (see feelingsSpiderChart.js exitIntro). */
.questionnaire-feelings-spider--intro .questionnaire-feelings-spider__grid,
.questionnaire-feelings-spider--intro .questionnaire-feelings-spider__data,
.questionnaire-feelings-spider--intro .questionnaire-feelings-spider__handles {
  opacity: 0.2;
}

.questionnaire-feelings-spider--intro .questionnaire-feelings-spider__labels {
  opacity: 0;
  pointer-events: none;
}

.questionnaire-feelings-spider__intro-axis {
  stroke: color-mix(in srgb, var(--color-brown) 55%, #ddc4a8);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.questionnaire-feelings-spider__intro-dot,
.questionnaire-feelings-spider__intro-demo {
  fill: var(--color-brown);
  stroke: #fff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* The static center dot is only a faint reference point, so it stays dimmed
   (matching the 20% dimmed graph) while the demo dot animates at full opacity. */
.questionnaire-feelings-spider__intro-dot {
  opacity: 0.2;
}

.questionnaire-feelings-spider__intro-label {
  fill: var(--color-brown);
}

.questionnaire-feelings-spider__intro-demo {
  animation: questionnaire-feelings-spider-intro-demo 3s ease-in-out infinite
    alternate;
}

@keyframes questionnaire-feelings-spider-intro-demo {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(var(--demo-dx, 0), var(--demo-dy, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .questionnaire-feelings-spider__intro-demo {
    animation: none;
    transform: translate(
      calc(var(--demo-dx, 0) / 2),
      calc(var(--demo-dy, 0) / 2)
    );
  }
}

@media (max-width: 640px) {
  .questionnaire-step--feelings-all {
    --feelings-spider-width: min(100%, 23rem);
  }

  .questionnaire-feelings-spider {
    /* +15% larger spider chart vs previous; fixed size (not text-scale linked). */
    max-width: var(--feelings-spider-width, min(100%, 23rem));
  }

}

.questionnaire-feelings-hope-block.questionnaire-section-question {
  width: 100%;
  /* Pull up into the empty bottom of the square chart (below the lowest
     labels) to close the gap between the graph and Hope. */
  margin-top: -1.5rem;
  padding-top: var(--questionnaire-divider-gap, 1.25rem);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Hope: shrink heading to the emotion-label size and tighten its buttons so the
   whole feelings card fits without scrolling. */
.questionnaire-feelings-hope-block .questionnaire-section-question-heading {
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) *
      var(--questionnaire-small-text-multiplier, 0.546) *
      var(--questionnaire-text-scale, 1)
  );
}

/* Short activating sentence shown above the Hope heading. Matches the size of
   the other questionnaire questions (the feelings intro / question size). */
.questionnaire-feelings-hope-intro {
  margin: 0 0 0.4rem;
  font-family: "Suisse Intl", sans-serif;
  font-size: var(--questionnaire-question-size);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-brown);
  white-space: pre-line;
}

/* Hope pen (merge) + undo: circular outline buttons — same diameter and ring
   stroke as the section "Next" arrow (see --questionnaire-next-btn-size). */
.questionnaire-feelings-hope-options .questionnaire-option {
  box-sizing: border-box;
  width: var(--questionnaire-next-btn-size, clamp(2rem, 2.315vw, 2.5rem));
  height: var(--questionnaire-next-btn-size, clamp(2rem, 2.315vw, 2.5rem));
  flex: 0 0 auto;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: var(--color-brown);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.questionnaire-feelings-hope-options .questionnaire-option:hover:not(:disabled) {
  background: var(--color-brown);
  color: #fff;
}

.questionnaire-feelings-hope-options .questionnaire-option.is-selected {
  background: var(--color-brown);
  color: #fff;
}

.questionnaire-feelings-hope-options .questionnaire-option:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 2px;
}

.questionnaire-feelings-hope-btn__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.questionnaire-feelings-hope-btn__icon {
  width: 100%;
  height: 100%;
  display: block;
}

.questionnaire-feelings-hope-btn__icon .questionnaire-feelings-hope-btn__ring {
  stroke: currentColor;
  stroke-width: 0.7;
  fill: none;
}

.questionnaire-feelings-hope-btn__icon .questionnaire-feelings-hope-btn__glyph path {
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Filled circle on hover/selected — hide the ring, keep only the glyph. */
.questionnaire-feelings-hope-options
  .questionnaire-option:hover:not(:disabled)
  .questionnaire-feelings-hope-btn__ring,
.questionnaire-feelings-hope-options
  .questionnaire-option.is-selected
  .questionnaire-feelings-hope-btn__ring {
  stroke: none;
}

.questionnaire-feelings-scale-legend {
  --q-page-col: calc(
    (100vw - 2 * var(--page2-margin-inline, 1.25rem) - 11 * var(--page2-gutter, 1.25rem)) /
      12
  );
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  width: calc(4 * var(--q-page-col) + 3 * var(--page2-gutter, 1.25rem));
  max-width: 100%;
  align-self: flex-start;
  margin: 0;
  direction: ltr;
  color: var(--color-brown);
}

.questionnaire-feelings-scale-legend__label--min {
  order: 1;
  text-align: left;
}

.questionnaire-feelings-scale-legend__track {
  position: relative;
  order: 2;
  flex: 7 1 0;
  min-width: 1.25rem;
  width: 100%;
  margin-inline: 0.3125rem; /* 5px @ 16 — inset from label edges */
  overflow: visible;
}

.questionnaire-feelings-scale-legend::after {
  content: "";
  order: 4;
  flex: 3 1 0;
  min-width: 0;
}

.questionnaire-feelings-scale-legend__label {
  flex: 0 1 auto;
  min-width: 0;
  font-family: "Suisse Intl", sans-serif;
  font-size: var(--questionnaire-small-size);
  font-weight: 400;
  line-height: 1.3;
}

.questionnaire-feelings-scale-legend__label--max {
  order: 3;
  text-align: right;
}

.questionnaire-feelings-scale-legend__line {
  height: 0.25rem;
  display: block;
  overflow: visible;
  width: 100%;
}

.questionnaire-feelings-scale-legend__line line {
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.questionnaire-feelings-scale-legend__demo {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--color-brown);
  box-shadow: 0 0 0 1.5px #fff;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  animation: questionnaire-feelings-scale-legend-demo 6s ease-in-out infinite
    alternate;
}

@keyframes questionnaire-feelings-scale-legend-demo {
  0%,
  100% {
    left: 0%;
  }
  50% {
    left: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .questionnaire-feelings-scale-legend__demo {
    animation: none;
    left: 50%;
  }
}

/* FA scroll is RTL; anchor legend to physical page columns 1–4 (left). */
#questionnaire-scroll[lang="fa"] .questionnaire-feelings-scale-legend {
  align-self: flex-end;
}

.questionnaire-feelings-intro {
  margin: 0;
  font-family: "Suisse Intl", sans-serif;
  font-size: var(--questionnaire-question-size);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-brown);
}

.questionnaire-step--grid-all .questionnaire-step__answers,
.questionnaire-step--family-all .questionnaire-step__answers {
  gap: 1rem;
  padding-right: 0.25rem;
}

/* Pixel-perfect grid alignment: remove the answers inset in the family section
   so the dot-option grid's 100% equals the full card-body content width. This
   makes each track exactly one page column wide (col 1 left → col 6 right). */
.questionnaire-step--family-all .questionnaire-step__answers {
  padding-inline: 0;
}

.questionnaire-section-list {
  display: flex;
  flex-direction: column;
  /* 2× the divider gap so the hairline centers with an equal --questionnaire-divider-gap
     of space on each side (see the :not(:first-child) rule below). */
  gap: calc(var(--questionnaire-divider-gap, 1.25rem) * 2);
  width: 100%;
}

.questionnaire-section-question {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

/* Thin separator between consecutive questions in multi-question sections
   (Community, Family), matching the hairline above the Feelings/Hope block.
   The line is centered inside the list gap: pull the block up by one
   divider-gap and pad it down by one divider-gap, leaving exactly
   --questionnaire-divider-gap of space above and below the line. */
.questionnaire-section-list .questionnaire-section-question:not(:first-child) {
  margin-top: calc(var(--questionnaire-divider-gap, 1.25rem) * -1);
  padding-top: var(--questionnaire-divider-gap, 1.25rem);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.questionnaire-section-question-heading {
  margin: 0;
  font-family: "Suisse Intl", sans-serif;
  font-size: var(--questionnaire-question-size);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-brown);
}

.questionnaire-panel__grid :is(
  .questionnaire-panel__remaining,
  .questionnaire-step__heading,
  .questionnaire-option,
  .questionnaire-input,
  .questionnaire-input::placeholder,
  .questionnaire-profile-madlibs,
  .questionnaire-madlibs-dropdown__menu,
  .questionnaire-madlibs-dropdown__option,
  .questionnaire-step__complete-text,
  .questionnaire-archive-confirm,
  .questionnaire-slider-range-label,
  .questionnaire-feelings-emotion-heading,
  .questionnaire-feelings-sublabel,
  .questionnaire-feelings-intro,
  .questionnaire-feelings-scale-legend__label,
  .questionnaire-feelings-hope-intro,
  .questionnaire-feelings-spider__label,
  .questionnaire-section-question-heading
) {
  font-family: "Suisse Intl", sans-serif;
  font-weight: 200;
}

/* Questionnaire answers only — Suisse Intl Light */
.questionnaire-panel__grid :is(
  .questionnaire-input,
  .questionnaire-option,
  .questionnaire-madlibs-dropdown__option,
  .questionnaire-family-dot-options .family-dot-option__label
) {
  font-family: "Suisse Intl Light", sans-serif;
  font-weight: normal;
}

/* Profile madlibs answers — DIN Condensed (bold is its only shipped weight) */
.questionnaire-panel__grid :is(
  .questionnaire-profile-madlibs input.questionnaire-madlibs-blank,
  .questionnaire-profile-madlibs
    .questionnaire-madlibs-dropdown__label:not(.is-placeholder),
  .questionnaire-profile-madlibs .questionnaire-madlibs-name-mode__input,
  .questionnaire-profile-madlibs .questionnaire-madlibs-dropdown__menu,
  .questionnaire-profile-madlibs .questionnaire-madlibs-dropdown__option
) {
  font-family: "DIN Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.questionnaire-panel__grid
  .questionnaire-profile-madlibs
  input.questionnaire-madlibs-blank::placeholder,
.questionnaire-panel__grid
  .questionnaire-profile-madlibs
  .questionnaire-madlibs-name-mode__input::placeholder,
.questionnaire-panel__grid
  .questionnaire-profile-madlibs
  .questionnaire-madlibs-dropdown__label.is-placeholder {
  font-family: "Suisse Intl Light", sans-serif;
  font-weight: normal;
}

.questionnaire-panel__grid .questionnaire-input::placeholder {
  font-family: "Suisse Intl", sans-serif;
  font-weight: 200;
}

/* Persian questionnaire — Vazirmatn overrides the Latin questionnaire stack.
   Note: #questionnaire-scroll sits inside .questionnaire-panel__grid (not the
   other way around), so selectors must descend from #questionnaire-scroll. */
#questionnaire-scroll[lang="fa"] :is(
  .questionnaire-panel__remaining,
  .questionnaire-step__heading,
  .questionnaire-option,
  .questionnaire-input,
  .questionnaire-input::placeholder,
  .questionnaire-profile-madlibs,
  .questionnaire-madlibs-line,
  .questionnaire-madlibs-dropdown__menu,
  .questionnaire-madlibs-dropdown__option,
  .questionnaire-madlibs-dropdown__label,
  .questionnaire-madlibs-dropdown__trigger,
  .questionnaire-step__complete-text,
  .questionnaire-archive-confirm,
  .questionnaire-slider-range-label,
  .questionnaire-feelings-emotion-heading,
  .questionnaire-feelings-sublabel,
  .questionnaire-feelings-intro,
  .questionnaire-feelings-scale-legend__label,
  .questionnaire-feelings-hope-intro,
  .questionnaire-feelings-spider__label,
  .questionnaire-section-question-heading,
  .family-dot-option__label
) {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Questionnaire slider value digits — Helvetica Regular (from Helvetica.ttc) */
.questionnaire-panel__grid .questionnaire-slider-output,
#questionnaire-scroll[lang="fa"] .questionnaire-slider-output {
  font-family: "Helvetica", sans-serif;
  font-weight: normal;
  font-synthesis: none;
}

#questionnaire-scroll[lang="fa"] :is(
  .questionnaire-card__title,
  .questionnaire-option,
  .questionnaire-feelings-sublabel,
  .questionnaire-step__complete-text,
  .questionnaire-archive-confirm
) {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#questionnaire-scroll[lang="fa"] .questionnaire-card__num {
  font-family: "DIN Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Persian section folder titles: the shared header optical shift is tuned for
   uppercase DIN Condensed and leaves Vazirmatn sitting low. Lift the title
   only — numbers and the square marker keep their existing transforms. */
#questionnaire-scroll[lang="fa"] .questionnaire-card__title {
  position: relative;
  top: var(--questionnaire-card-title-fa-optical-nudge, -0.12em);
  font-size: calc(
    (var(--page2-space-20, 1.25rem) - var(--page2-space-4)) * 0.91 *
      var(--questionnaire-card-title-scale, 1) *
      var(--questionnaire-card-title-text-scale, 1.5) *
      var(--questionnaire-card-title-fa-scale, 0.95)
  );
}

#questionnaire-scroll[lang="fa"]
  .questionnaire-card:not(.is-expanded)
  .questionnaire-card__title {
  top: calc(
    var(--questionnaire-card-title-fa-optical-nudge, -0.12em) +
      var(--questionnaire-card-title-fa-closed-optical-extra, -0.025em)
  );
}

#questionnaire-scroll[lang="fa"] :is(
  .questionnaire-archive-btn,
  .questionnaire-start-again
) {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* English fill-in fields keep Latin typefaces inside the FA questionnaire */
#questionnaire-scroll[lang="fa"] :is(
  .questionnaire-profile-madlibs .questionnaire-madlibs-blank--english,
  .questionnaire-madlibs-blank--english,
  .questionnaire-input--english,
  [lang="en"].questionnaire-madlibs-blank,
  [lang="en"].questionnaire-input
) {
  font-family: "DIN Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

#questionnaire-scroll[lang="fa"]
  .questionnaire-profile-madlibs
  .questionnaire-madlibs-blank--english::placeholder {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 400;
  text-transform: none;
}

/* Profile madlibs answers — Vazirmatn (name mode, dropdowns, age, etc.) */
#questionnaire-scroll[lang="fa"] .questionnaire-profile-madlibs :is(
  input.questionnaire-madlibs-blank,
  .questionnaire-madlibs-dropdown__label,
  .questionnaire-madlibs-dropdown__option,
  .questionnaire-madlibs-name-mode__input
) {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* NOTE: ::placeholder is a pseudo-element and is NOT allowed inside :is().
   Putting it there invalidates the whole rule, so these must be written as a
   plain comma-separated list to actually apply Vazirmatn to FA placeholders. */
#questionnaire-scroll[lang="fa"]
  .questionnaire-profile-madlibs
  input.questionnaire-madlibs-blank::placeholder,
#questionnaire-scroll[lang="fa"]
  .questionnaire-profile-madlibs
  .questionnaire-madlibs-name-mode__input::placeholder,
#questionnaire-scroll[lang="fa"]
  .questionnaire-profile-madlibs
  .questionnaire-madlibs-dropdown__label.is-placeholder {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 400;
  text-transform: none;
}

/* Re-assert DIN for Latin city/year blanks after the profile answer rule above */
#questionnaire-scroll[lang="fa"]
  .questionnaire-profile-madlibs
  .questionnaire-madlibs-blank--english {
  font-family: "DIN Condensed", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

/* Brown stack panels — invert text/controls for contrast */
.questionnaire-card--brown .questionnaire-profile-madlibs,
.questionnaire-card--brown .questionnaire-step__heading,
.questionnaire-card--brown .questionnaire-feelings-intro,
.questionnaire-card--brown .questionnaire-feelings-scale-legend,
.questionnaire-card--brown .questionnaire-feelings-scale-legend__label,
.questionnaire-card--brown .questionnaire-feelings-scale-legend__demo {
  color: var(--page2-bg, #fff);
}

.questionnaire-card--brown .questionnaire-feelings-scale-legend__demo {
  background-color: var(--page2-bg, #fff);
  box-shadow: 0 0 0 1.5px var(--color-brown);
}

.questionnaire-card--brown .questionnaire-feelings-hope-intro,
.questionnaire-card--brown .questionnaire-feelings-emotion-heading,
.questionnaire-card--brown .questionnaire-section-question-heading,
.questionnaire-card--brown .questionnaire-slider-range-label,
.questionnaire-card--brown .questionnaire-slider-output,
.questionnaire-card--brown .family-dot-option__label {
  color: var(--page2-bg, #fff);
}

.questionnaire-card--brown .family-dot-option__circle {
  border-color: var(--page2-bg, #fff);
}

.questionnaire-card--brown .family-dot-option.is-selected .family-dot-option__circle {
  background: var(--page2-bg, #fff);
}

.questionnaire-card--brown .questionnaire-option {
  color: var(--page2-bg, #fff);
  border-color: var(--page2-bg, #fff);
}

.questionnaire-card--brown .questionnaire-profile-madlibs {
  --madlibs-underline-color: var(--page2-bg, #fff);
}