/* ===== SAFE Labs Handbook Generator ===== */

.generator-page .content-inner { max-width: 940px; }

/* Shift+Tab scrolls the focused control only just into view, which put it
 * under the fixed site header and the sticky step bar. Reserve their height.
 * This stylesheet loads on the generator page only. */
html { scroll-padding-top: 15rem; }
@media (max-width: 640px) { html { scroll-padding-top: 6rem; } }
.generator-page .content-inner p { text-align: left; }

.gen-noscript {
  padding: 1rem 1.2rem; background: #fff4d6; border: 1px solid #e0c98a; border-radius: 8px;
}

.gen-intro-box {
  background: #f4f9ff; border: 1px solid #d6e8fa; border-radius: 10px;
  padding: 1.2rem 1.4rem; margin: 0 0 2rem;
}
.gen-intro-box p { margin-bottom: 0.5rem; }
.gen-intro-box p:last-child { margin-bottom: 0; }

.gen-hint { color: #5c6470; font-size: 0.92rem; }
.gen-hint-small { font-size: 0.85rem; margin-top: 0.6rem; }

/* ----- profile ----- */
.gen-profile {
  border: 1px solid #e3e7ee; border-radius: 10px; padding: 1.4rem; margin-bottom: 1.6rem;
}
.gen-profile h2 { margin-top: 0; }
.gen-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem; margin: 1rem 0 0;
}
.gen-grid-inline { margin: 0 0 1rem; }
.gen-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.gen-field span { font-weight: 600; color: #27348b; }
.gen-field input {
  font: inherit; font-size: 0.95rem; padding: 0.5rem 0.6rem;
  border: 1px solid #ccd4e0; border-radius: 6px; background: #fff; color: #333;
}
.gen-field input:focus-visible,
.gen-note:focus-visible,
.gen-override:focus-visible,
.gen-reason:focus-visible { outline: 2px solid #27348b; outline-offset: 1px; }

.gen-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.gen-voice-label { font-weight: 600; color: #27348b; font-size: 0.9rem; }
.gen-radio { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; cursor: pointer; }

/* ----- stepper nav ----- */
.gen-nav {
  position: sticky; top: 64px; z-index: 20;
  background: #fff; border: 1px solid #e3e7ee; border-radius: 10px;
  padding: 0.7rem 1rem; margin-bottom: 1.6rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.gen-progress-track { height: 6px; background: #eef1f6; border-radius: 999px; overflow: hidden; }
.gen-progress-fill { height: 100%; width: 0; background: #27348b; transition: width 0.25s ease; }
.gen-nav-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 0.6rem;
}
.gen-nav-mid { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.gen-nav-label { font-size: 0.9rem; font-weight: 600; color: #27348b; }
.gen-progress-text { font-size: 0.82rem; color: #5c6470; }
.gen-nav .gen-btn { min-width: 6.5rem; }

.gen-jump-select {
  font: inherit; font-size: 0.85rem; width: 100%; margin-top: 0.6rem;
  padding: 0.35rem 0.5rem; border: 1px solid #d6dbe4; border-radius: 6px;
  background: #fff; color: #5c6470;
}
.gen-jump-select:focus-visible { outline: 2px solid #27348b; outline-offset: 1px; }

/* Which of the three parts of the handbook you are in. It was a faint grey
 * caption and read as decoration. */
.gen-step-section {
  font-size: 0.92rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: #27348b; margin: 0 0 0.5rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.gen-step-section::after {
  content: ''; flex: 1; height: 2px; background: #dbe3f2; border-radius: 2px;
}
.gen-step[hidden] { display: none; }

/* ----- save / load ----- */
.gen-utility {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e3e7ee;
  font-size: 0.85rem;
}
/* The hint grey: the paler #8a929c was 3.15:1, on the line that says
 * whether the page is saving. */
.gen-utility-note { color: #5c6470; }
.gen-utility-error { color: #a33a29; font-weight: 600; }
.gen-reset { margin-left: auto; }

.gen-gaps {
  background: #fdf6e9; border: 1px solid #e6dcc2; border-radius: 8px;
  padding: 0.9rem 1.1rem; margin: 1rem 0;
}
.gen-gaps p { margin: 0 0 0.5rem; font-size: 0.92rem; }
.gen-gap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.gen-gap-list li { margin: 0; }
.gen-gap-inline { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
/* A button centres its label, so a heading that wrapped on a phone sat in the
 * middle of the list, and the theme justifies text inside a <details>. */
.gen-gap-list .gen-link-btn, .gen-gap-more summary, .gen-gap-more > *:not(summary) { text-align: left; }

/* ----- buttons ----- */
.gen-btn {
  font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  border: 1px solid #27348b; background: #fff; color: #27348b;
  transition: background 0.15s, color 0.15s;
}
.gen-btn:hover:not(:disabled) { background: #eef1fb; }
.gen-btn-primary { background: #27348b; color: #fff; }
.gen-btn-primary:hover:not(:disabled) { background: #1d2769; }
.gen-btn-ghost { border-color: #ccd4e0; color: #5c6470; }
.gen-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.gen-btn:focus-visible { outline: 2px solid #27348b; outline-offset: 2px; }

.gen-link-btn {
  font: inherit; font-size: 0.85rem; background: none; border: none; cursor: pointer;
  color: #27348b; text-decoration: underline; padding: 0;
  /* The 24 px minimum target (WCAG 2.5.8); the line box alone gave 23. */
  min-height: 24px;
}
.gen-link-btn:focus-visible { outline: 2px solid #27348b; outline-offset: 2px; }

/* ----- commitment cards ----- */
.gen-card {
  border: 1px solid #e3e7ee; border-radius: 10px;
  margin: 1rem 0; overflow: hidden; background: #fff;
}
.gen-card.is-notyet { background: #fcfbf7; border-color: #e6dcc2; }

.gen-card-head {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 0.7rem 1.1rem; background: #f7f9fc; border-bottom: 1px solid #e3e7ee;
}
.gen-card.is-notyet .gen-card-head { background: #f8f4e9; border-bottom-color: #e6dcc2; }
.gen-num {
  font-variant-numeric: tabular-nums; font-weight: 700; color: #5a6d94;
  font-size: 0.95rem; padding-top: 0.15rem;
}
/* The page sets line-height 1.7, which spaces three short lines like three
 * paragraphs. The header is a label, not prose. */
.gen-titles { flex: 1; min-width: 0; line-height: 1.3; }
.gen-titles h3 { margin: 0; font-size: 1.08rem; color: #27348b; line-height: 1.25; }
/* Two classes deep on purpose: the theme's `.content-inner p` sets a 1rem
 * bottom margin and outranks a single class, which put a paragraph break
 * between the commitment and its examples link. */
.gen-titles .gen-commit-line {
  margin: 0.15rem 0 0; font-size: 0.9rem; font-weight: 700;
  font-style: italic; color: #27348b;
}

.gen-badge {
  flex-shrink: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.2rem 0.6rem; border-radius: 999px; text-transform: uppercase;
}
.gen-badge-todo { background: #fdece9; color: #a33a29; }
.gen-badge-done { background: #e6f4ea; color: #1d6b38; }
.gen-badge-gap { background: #f3ead2; color: #7a5f1c; }

.gen-card-body { padding: 0.85rem 1.1rem 1rem; }

.gen-status { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.gen-chip {
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
  font-size: 0.85rem; font-weight: 600; padding: 0.2rem 0.65rem;
  border: 1px solid #d6dbe4; border-radius: 999px;
}
.gen-chip:has(input:checked) { background: #eef1fb; border-color: #27348b; color: #27348b; }

.gen-pane-notyet { display: none; }
.gen-card.is-notyet .gen-pane-adopted { display: none; }
.gen-card.is-notyet .gen-pane-notyet { display: block; }

/* ----- questions with one answer ----- */
.gen-questions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.4rem 1.1rem; margin: 0 0 0.7rem;
}
.gen-q { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; min-width: 0; }
.gen-q-label { color: #27348b; font-weight: 600; flex-shrink: 0; }
.gen-q-select {
  font: inherit; font-size: 0.88rem; flex: 1; min-width: 0; color: #333;
  border: 1px solid #ccd4e0; border-radius: 6px; background: #fff;
  padding: 0.22rem 0.3rem; cursor: pointer;
}
.gen-q-select:focus-visible { outline: 2px solid #27348b; outline-offset: 1px; }

.gen-opts { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0; }
/* A class-level display beats the user-agent [hidden] rule, so restate it. */
.gen-opts[hidden] { display: none; }

/* Two columns once there is room for them. Multi-column rather than a grid so
 * the list still reads down one column and then the next. The per-role blocks
 * are already narrow, so they stay single. [hidden] is restated after, or the
 * display here would outrank it. */
@media (min-width: 860px) {
  .gen-opts { display: block; columns: 2; column-gap: 1.6rem; }
  .gen-opt { break-inside: avoid; }
  .gen-roles-editor .gen-opts { columns: 1; }
  .gen-opts[hidden] { display: none; }
}
.gen-opt label {
  display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer;
  font-size: 0.93rem; line-height: 1.3; padding: 0.16rem 0.3rem; border-radius: 4px;
}
.gen-opt label:hover { background: #f5f8fd; }
.gen-opt input { margin-top: 0.16rem; flex-shrink: 0; }

/* Ticked to start with because almost every handbook says it. Green rather
 * than the usual ink, so what was assumed is distinguishable at a glance from
 * what was chosen. */
.gen-opt-common label { color: #1d6b38; }
.gen-opt-common input { accent-color: #2f7a4a; }
.gen-opt-common label:hover { background: #eef7f1; }
.gen-req {
  font-size: 0.7rem; font-style: normal; font-weight: 700; text-transform: uppercase;
  color: #a33a29; background: #fdece9; padding: 0.05rem 0.4rem; border-radius: 999px;
  margin-left: 0.3rem; white-space: nowrap;
}

/* ----- role table editor ----- */
.gen-table-editor { margin: 0 0 1rem; }
.gen-table-label {
  margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #5a6d94;
}
.gen-roles { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.7rem; }
.gen-role {
  display: inline-flex; align-items: center; gap: 0.2rem;
  border: 1px solid #ccd4e0; border-radius: 999px; padding: 0.1rem 0.2rem 0.1rem 0.6rem;
  background: #fff;
}
.gen-role input {
  font: inherit; font-size: 0.85rem; font-weight: 600; color: #27348b;
  border: none; background: none; padding: 0.15rem 0; min-width: 6rem;
}
.gen-role input:focus-visible { outline: 2px solid #27348b; outline-offset: 1px; border-radius: 3px; }
.gen-role-remove {
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
  border: none; background: none; color: #5a6d94; padding: 0;
  /* A phone target, right beside the name being typed. */
  min-width: 24px; min-height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
.gen-role-remove:hover { color: #a33a29; }
.gen-role-add { font-size: 0.82rem; padding: 0.25rem 0.75rem; }

.gen-roles-block { margin-bottom: 0.4rem; }

.gen-roles-editor .gen-role-block {
  border: 1px solid #e8ecf2; border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 0.6rem;
  background: #fcfdfe;
}
.gen-role-title { font-size: 0.95rem; font-weight: 700; color: #27348b; text-align: left; }
.gen-role-duration { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.gen-role-duration > span {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #5a6d94;
}
.gen-role-duration .gen-cell-choice {
  width: auto; min-width: 9rem; border: 1px solid #ccd4e0; border-radius: 6px;
}
.gen-roles-editor .gen-opts { margin-bottom: 0; }

.gen-table-scroll { overflow-x: auto; }
.gen-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.gen-table th, .gen-table td { border: 1px solid #e3e7ee; padding: 0.25rem 0.4rem; text-align: left; }
.gen-table thead th { background: #f7f9fc; color: #27348b; font-size: 0.8rem; white-space: nowrap; }
.gen-table tbody th {
  background: #fbfcfe; color: #5c6470; font-weight: 600;
  min-width: 11rem; vertical-align: top;
}
.gen-table td { padding: 0; }
.gen-table td input {
  font: inherit; font-size: 0.85rem; width: 100%; min-width: 8rem;
  border: none; background: none; padding: 0.35rem 0.4rem; color: #333;
}
.gen-table td input:focus-visible { outline: 2px solid #27348b; outline-offset: -2px; }
.gen-cell-choice {
  font: inherit; font-size: 0.85rem; width: 100%; min-width: 7.5rem;
  border: none; background: none; padding: 0.3rem 0.35rem; color: #333; cursor: pointer;
}
.gen-cell-choice:focus-visible { outline: 2px solid #27348b; outline-offset: -2px; }

.gen-note, .gen-override, .gen-reason {
  font: inherit; font-size: 0.92rem; width: 100%; padding: 0.55rem 0.7rem;
  border: 1px solid #ccd4e0; border-radius: 6px; resize: vertical; color: #333; background: #fff;
}
.gen-override { margin-top: 0.5rem; }
.gen-override-note {
  margin: 0.4rem 0 0; font-size: 0.8rem; font-style: italic; color: #7a5f1c;
}

.gen-preview {
  margin-top: 0.8rem; padding: 0.8rem 1rem;
  background: #f7f9fc; border-left: 3px solid #8ed1fc; border-radius: 0 6px 6px 0;
}
.gen-preview-label {
  display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #5a6d94; margin-bottom: 0.35rem;
}
.gen-preview-text { margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.65; }
.gen-preview-text p { margin: 0 0 0.5rem; }
.gen-preview-text p:last-child { margin-bottom: 0; }
.gen-preview-text ul { margin: 0.3rem 0 0.5rem 1.2rem; }
.gen-preview-text li { margin-bottom: 0.15rem; }

/* ----- output ----- */
.gen-output {
  border: 2px solid #27348b; border-radius: 10px; padding: 1.4rem;
}
.gen-output h2 { margin-top: 0; }
.gen-output-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0; }

.gen-doc {
  margin-top: 1.6rem; padding: 1.6rem; background: #fff;
  border: 1px solid #e3e7ee; border-radius: 8px;
}
.gen-doc h1 { font-size: 1.7rem; color: #27348b; margin-bottom: 0.3rem; }
.gen-doc h2 { font-size: 1.3rem; color: #27348b; margin: 2rem 0 0.6rem; text-align: left; }
.gen-doc h3 { font-size: 1.05rem; color: #27348b; margin: 1.4rem 0 0.3rem; }
.gen-doc p { margin-bottom: 0.8rem; text-align: left; }
.doc-meta { color: #6b7480; font-style: italic; }
.doc-commit { font-size: 0.86rem; color: #6b7480; font-style: italic; margin-bottom: 0.4rem; }
.doc-gap { color: #7a5f1c; background: #f8f4e9; padding: 0.5rem 0.7rem; border-radius: 5px; }
.doc-small { font-size: 0.82rem; color: #5c6470; }

.doc-table-wrap { overflow-x: auto; margin: 0.6rem 0 1rem; }
.doc-table { border-collapse: collapse; font-size: 0.88rem; min-width: 100%; }
.doc-table th, .doc-table td {
  border: 1px solid #d9dfe8; padding: 0.4rem 0.6rem; text-align: left; vertical-align: top;
}
.doc-table thead th { background: #eef2f8; color: #27348b; white-space: nowrap; }
.doc-table tbody th { background: #f8fafc; color: #5c6470; font-weight: 600; }

.gen-preview-text .doc-table-wrap { margin: 0.5rem 0; }

/* ----- print ----- */
.gen-print { display: none; }

@media print {
  body > *:not(.gen-print) { display: none !important; }
  .gen-print { display: block !important; }
  .gen-print h1 { font-size: 20pt; margin-bottom: 2pt; }
  .gen-print h2 { font-size: 14pt; margin: 18pt 0 6pt; page-break-after: avoid; }
  .gen-print h3 { font-size: 11.5pt; margin: 12pt 0 3pt; page-break-after: avoid; }
  .gen-print p { font-size: 10.5pt; line-height: 1.5; orphans: 3; widows: 3; }
  .gen-print .doc-commit { font-style: italic; color: #555; font-size: 9.5pt; }
  .gen-print .doc-gap { border: 1pt solid #999; padding: 4pt 6pt; }
  .gen-print hr { border: none; border-top: 1pt solid #ccc; margin: 14pt 0; }
  .gen-print .doc-table-wrap { overflow: visible; }
  /* "For every role, we set out:" stays on the page with its table. */
  .gen-print p:has(+ .doc-table-wrap) { page-break-after: avoid; break-after: avoid; }
  .gen-print .doc-table {
    width: 100%; font-size: 9pt; page-break-inside: avoid; border-collapse: collapse;
  }
  .gen-print .doc-table th, .gen-print .doc-table td {
    border: 0.5pt solid #999; padding: 3pt 4pt;
  }
  .gen-print .doc-table thead th { background: #eee; white-space: normal; }
}

@media (max-width: 640px) {
  .gen-nav { position: static; }
  .gen-nav .gen-btn { min-width: 0; padding: 0.5rem 0.8rem; }
  .gen-card-head { flex-wrap: wrap; }
  .gen-output-actions .gen-btn { flex: 1 1 auto; }
}

/* Examples from other labs, folded below the questions. The theme styles every
 * <details> as a padded grey accordion; nested inside a card, that filled a
 * phone screen with boxes before the first control, so here they are flattened
 * to a plain disclosure list. */
.gen-examples { margin: 0.2rem 0 1rem; border: none; border-radius: 0; background: none; }
/* The review step's folded list of commitments that answer no question. */
.gen-gap-more { margin: 0.4rem 0 0; border: none; border-radius: 0; background: none; }
.gen-examples[open], .gen-examples-body details[open], .gen-gap-more[open] { background: none; }
.gen-examples summary, .gen-gap-more summary {
  padding: 0.25rem 0; justify-content: flex-start; gap: 0.45rem; font-size: 0.92rem;
}
.gen-examples summary::before, .gen-gap-more summary::before {
  display: inline-block; content: "\25B8"; transition: transform 0.15s;
}
.gen-examples[open] > summary::before,
.gen-examples-body details[open] > summary::before,
.gen-gap-more[open] > summary::before { transform: rotate(90deg); }
.gen-examples > *:not(summary),
.gen-examples-body details > *:not(summary),
.gen-gap-more > *:not(summary) { padding: 0 0 0 1.1rem; animation: none; }
.gen-examples-body { margin-top: 0.2rem; font-size: 0.92rem; }
.gen-examples-body details { border: none; border-radius: 0; background: none; margin: 0; }
.content-inner .gen-examples-body p { text-align: left; }
.content-inner .gen-examples-body blockquote {
  margin: 0.4rem 0; padding: 0.2rem 0 0.2rem 0.8rem; border-left: 3px solid #e3e7ee; text-align: left;
}
.content-inner .gen-examples-body blockquote p { text-align: left; }
.content-inner .gen-examples-body h4 { padding: 0.4rem 0 0 !important; }

/* The editable opening sentences */
.gen-lead { margin-bottom: 1rem; }
.gen-lead label { display: block; }
.gen-lead-text { width: 100%; box-sizing: border-box; font: inherit; padding: 0.5rem; }
.gen-lead-reset { margin-top: 0.3rem; }

/* Confirm the pre-ticked suggestion without changing anything */
.gen-confirm { margin-top: 1rem; }
.gen-confirm .gen-hint { margin-top: 0.4rem; }
.gen-confirm-ask[hidden], .gen-confirm-done[hidden], .gen-confirm-required[hidden] { display: none; }
.gen-confirm-required {
  margin: 0; padding: 0.5rem 0.7rem; font-size: 0.88rem; color: #a33a29;
  background: #fdece9; border-radius: 6px;
}

/* Back and Next again under the card, so a long card does not end in a scroll
 * back up to the nav bar. */
.gen-nav-foot {
  display: flex; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 0;
}
.gen-nav-foot .gen-btn { min-width: 6.5rem; }
.gen-nav-foot .gen-btn[hidden] { display: none; }

/* Focus is moved to the heading on each step for keyboard and screen-reader
 * users; a ring around a heading nobody clicked would only puzzle everyone
 * else. */
.gen-step-focus:focus { outline: none; }

.gen-gap-why { font-size: 0.85rem; color: #5c6470; }

.gen-conflict {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
  background: #fdece9; border: 1px solid #e8b9b0; border-radius: 8px;
  padding: 0.8rem 1rem; margin: 0 0 1rem;
  position: sticky; top: 64px; z-index: 50;
}
.gen-conflict[hidden] { display: none; }
.gen-conflict p { margin: 0; flex: 1 1 18rem; font-size: 0.92rem; color: #7a2a1d; }


/* Spoken, not shown: the "Copied" announcement. */
.gen-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* One folding block per role on the ambitions card, flattened like the
 * examples so the theme's grey accordion does not stack up inside the card. */
.gen-roles-editor details.gen-role-block[open] { background: #fcfdfe; }
.gen-roles-editor .gen-role-block summary {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start;
  gap: 0.2rem 0.6rem; padding: 0.15rem 0; background: none; cursor: pointer;
}
.gen-roles-editor .gen-role-block summary::before {
  display: inline-block; content: "\25B8"; color: #27348b; transition: transform 0.15s;
}
.gen-roles-editor .gen-role-block[open] > summary::before { transform: rotate(90deg); }
.gen-roles-editor .gen-role-block > *:not(summary) { padding: 0; animation: none; }
.gen-role-count { font-size: 0.85rem; font-weight: 400; color: #5c6470; }
.gen-role-fields { border: none; margin: 0.5rem 0 0; padding: 0; min-width: 0; text-align: left; }

/* What to do with the finished draft */
.gen-next {
  margin: 1.2rem 0 0; padding: 0.9rem 1.1rem; border: 1px solid #e3e7ee; border-radius: 8px;
  background: #f6f8fb;
}
.gen-next h3 { margin: 0 0 0.4rem; font-size: 1rem; text-align: left; }

/* ----- feedback and mailing list forms ----- */
.gen-contact {
  display: flex; flex-direction: column; gap: 0.7rem;
  margin: 1.6rem 0 0; padding: 0.9rem 1.1rem; border: 1px solid #e3e7ee; border-radius: 8px;
}
.gen-contact h3 { margin: 0; font-size: 1rem; text-align: left; }
.content-inner .gen-contact p { margin: 0; text-align: left; }
.gen-contact textarea {
  font: inherit; font-size: 0.95rem; padding: 0.5rem 0.6rem; resize: vertical;
  border: 1px solid #ccd4e0; border-radius: 6px; background: #fff; color: #333;
}
.gen-contact textarea:focus-visible { outline: 2px solid #27348b; outline-offset: 1px; }
.gen-contact-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.gen-contact-row .gen-field { flex: 1 1 12rem; min-width: 0; }
.gen-contact .gen-btn { align-self: flex-start; }
.gen-contact-status:empty { display: none; }
.content-inner .gen-contact .gen-contact-status { color: #2e7d4f; font-weight: 600; }
.gen-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.content-inner .gen-next p { margin: 0; font-size: 0.92rem; text-align: left; }