:root {
  font-family: system-ui, sans-serif;

  --header-footer-bg: #281029;
  --title-color: #ba744c;
  --radio-checked-bg: #f9b85d;
  --radio-focus-ring: #e0a453;
  --submit-button-bg: #b00c0c;
  --submit-button-hover-bg: #9c0a0a;
  --download-button-bg: #205d15;
  --download-button-hover-bg: #1a4d11;
  --warning-sign-bg: #b98600;
  --donate-button-hover-bg: #9c7100;
  --form-panel-bg: #f7f6f6;
  --form-panel-gradient-start: #f4fbfa;
  --form-panel-border: #99f6e4; /* teal-200 */
  --image-placeholder-bg: #cddcec; /* muted light-blue result placeholder */

  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-600: #4b5563;
  --radio-checked-text: #134e4a;
  --suggestion-active-bg: #dcfce7;
  --suggestion-border: #86efac;
  --suggestion-accent: #22c55e;
  --tooltip-bg: #fef9c3;
  --help-trigger-bg: #64748b;

  --color-white: #fff;
  --page-bg: #f4f4f4;
  --body-text: #222;
  --nav-link-hover: #facc15;
  --tooltip-text: #000;
  --reset-button-hover-bg: #c3c7cd;
  --input-disabled-bg: #f3f4f6;
  --about-divider: #0d9488;
  --error-color: #c62828;
  --error-bg: #fdecea;
  --error-border: #f3b4ad;
  --hint-text: #555;

  --element-wood: #3abe5b;
  --element-fire: #c81d24;
  --element-water: #3e7dc6;
  --element-earth: #fbd448;
  --element-metal: #f9f7f8;
}

/* ---- Vendored fonts (no Google Fonts CDN) ---- */
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Alegreya-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Alegreya-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/AlegreyaSC-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Alegreya SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/AlegreyaSC-Bold.ttf") format("truetype");
}

* {
  box-sizing: border-box;
}
[x-cloak] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

html {
  background: var(--page-bg) url("/static/img/clouds_bg.svg") repeat;
}

body {
  margin: 0;
  color: var(--body-text);
}

.container {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 1rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--header-footer-bg);
  color: var(--color-white);
}
.skip-link:focus {
  left: 0;
}

/* ---- Header / footer ---- */
header,
footer {
  background: var(--header-footer-bg);
  color: var(--color-white);
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  font-size: 1.125rem;
}
.header-bar {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
}
header img.logo,
footer img.logo {
  height: 2.5rem;
  margin: 0.25rem;
}
.header-bar > a {
  flex: none;
}

/* "Namkha Calculator by Namkha Encyclopedia" — caps stay upright, lowercase
   runs go italic (per-letter spans in the markup); "by" is greyed out. */
.nav-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "Alegreya", serif;
  font-size: 1.35rem;
  color: var(--color-white);
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #000;
}
.nav-title .cap {
  font-style: normal;
}
.nav-title .ital {
  font-style: italic;
}
.nav-title .by {
  color: #aaaaaa;
}

/* Hamburger toggle: hidden on desktop, shown once the nav needs to collapse. */
.nav-toggle {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-white);
}

header nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1rem;
}
header nav a {
  color: var(--color-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
header nav a:hover {
  color: var(--nav-link-hover);
}
.external-link-icon {
  width: 0.8rem;
  height: 0.8rem;
  flex: none;
}
header nav li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.nav-diamond {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  transform: rotate(45deg);
}
.nav-diamond--wood {
  background: var(--element-wood);
}
.nav-diamond--fire {
  background: var(--element-fire);
}
.nav-diamond--water {
  background: var(--element-water);
}
.nav-diamond--earth {
  background: var(--element-earth);
}
.nav-diamond--metal {
  background: var(--element-metal);
}

/* Below this width the title + 3 links no longer fit one row: collapse the
   nav into a hamburger-triggered dropdown instead of wrapping/squeezing. */
@media (max-width: 640px) {
  .nav-title {
    font-size: 1.05rem;
  }
  .nav-toggle {
    display: flex;
  }
  header nav {
    display: none;
    flex-basis: 100%;
    order: 1;
  }
  header nav.is-open {
    display: block;
  }
  header nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 1rem;
  }
}

footer {
  margin-top: 2rem;
  padding: 1rem;
}
footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
footer a {
  color: var(--color-white);
  text-decoration: none;
}
footer a:hover {
  color: var(--nav-link-hover);
}
.footer-legal {
  margin: 0;
  font-size: 0.8rem;
  color: var(--gray-300);
}
.footer-legal a {
  text-decoration: underline;
}

/* ---- Title ---- */
h1.title {
  display: inline-block;
  font-family: "Alegreya SC", serif;
  font-size: 2.75rem;
  line-height: 1.1;
  color: var(--title-color);
  margin: 1.5rem 0 0;
  /* tabindex="-1" skip-link target: not Tab-reachable, so suppress the
     click-focus ring; user-select:none avoids a Firefox caret-on-focus quirk. */
  outline: none;
  user-select: none;
}
/* Flat GitHub-readme-style version badges: a two-segment label|value pill plus
   a single-segment pre-release flag, stacked one row per component. */
.version-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin-top: 0.6rem;
}
.badge-row {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.badge {
  display: inline-flex;
  border-radius: 0.25rem;
  overflow: hidden;
}
.badge-key,
.badge-val,
.badge-flag {
  padding: 0.12rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--color-white);
  white-space: nowrap;
}
.badge-key {
  background: var(--header-footer-bg);
}
.badge-val {
  background: var(--about-divider);
}
.badge-flag {
  display: inline-flex;
  border-radius: 0.25rem;
  background: var(--title-color);
}

/* ---- Application two-column layout ---- */
.application {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
}
.form-container {
  width: 100%;
}
.result {
  width: 100%;
}

@media (min-width: 768px) {
  .application,
  h1.title,
  .version-badges {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .application {
    flex-direction: row;
  }
  .form-container {
    max-width: 24rem;
  }
  .result {
    margin-left: 2.5rem;
  }
}

/* ---- Form ---- */
.calculator-form {
  padding-top: 1rem;
}

.form-mains {
  display: grid;
  grid-auto-flow: row;
  gap: 1.5rem;
  margin: 0 0 2rem;
}

.form-actions {
  gap: 0.75rem;
}
.form-actions .input-columns {
  margin-top: 0;
}

.label-major {
  font-weight: 500;
}

/* Dev-only fixture picker (NAMKHA_TEST_MODE=1): floats top-right, below the
   header's own height (5rem clears logo + padding) so it never overlaps the
   navbar. Drops back into normal flow on narrow screens, where the header
   can grow taller (hamburger dropdown) and a fixed offset can't track that. */
.test-mode-picker {
  position: fixed;
  top: 5rem;
  right: 1rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gray-200);
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.test-mode-picker select.input-text {
  margin: 0;
  width: auto;
}
.test-mode-picker button {
  white-space: nowrap;
}
.test-mode-close {
  padding: 0 0.4rem;
  line-height: 1;
  font-size: 1.1rem;
  color: var(--gray-600);
  background: none;
  border: none;
}
.test-mode-close:hover {
  color: inherit;
}
@media (max-width: 640px) {
  .test-mode-picker {
    position: static;
    margin: 0 0 1rem;
  }
}

.namkha-data-by-type {
  background: linear-gradient(
    180deg,
    var(--form-panel-gradient-start),
    var(--form-panel-bg)
  );
  border: 1px solid var(--form-panel-border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 14px rgba(19, 78, 74, 0.1);
  display: grid;
  grid-auto-flow: row;
  gap: 2.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.input-text {
  margin-top: 0.25rem;
  display: block;
  width: 100%;
  /* Selects would otherwise take the browser's own grey and read as a
     different kind of field from the text inputs beside them. */
  background: var(--color-white);
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  padding: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 0.95rem;
}
.input-text:focus {
  outline: none;
  border-color: var(--gray-400);
  box-shadow: 0 0 0 3px rgba(249, 184, 93, 0.5);
}
.input-text:disabled {
  background: var(--input-disabled-bg);
  color: var(--gray-600);
}

/* ---- Radio toggle group ---- */
.radio-toggle {
  display: flex;
  align-items: stretch;
  background: var(--gray-200);
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 0.25rem;
  overflow: hidden;
}
.radio-button {
  flex: 1 1 0;
  display: flex;
  position: relative;
}
.radio-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-400);
  color: #fff;
  font-size: 0.75rem;
  border-radius: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.radio-button:hover .radio-cover {
  opacity: 1;
}
.radio-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio-label {
  width: 100%;
  text-align: center;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 0.5rem;
  user-select: none;
}
.radio-toggle input[type="radio"]:checked + .radio-label {
  background: var(--radio-checked-bg);
  color: var(--radio-checked-text);
}
/* overflow:hidden on .radio-toggle clips a normal outline, use inset ring */
.radio-toggle input[type="radio"]:focus-visible + .radio-label {
  box-shadow: inset 0 0 0 3px var(--radio-focus-ring);
}
.radio-toggle input[type="radio"]:disabled + .radio-label {
  color: var(--gray-400);
  cursor: default;
}

/* ---- 2-col input rows ---- */
.input-columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1rem;
  margin-top: 0.75rem;
}

.additional-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ---- Time zone modes ---- */
.timezone-detected {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--gray-600);
  font-style: italic;
}
.timezone-search {
  position: relative;
  margin-top: 0.5rem;
}
.timezone-list {
  position: relative;
  margin: 0.5rem 0 0;
  list-style: none;
  padding: 0;
  background: var(--color-white);
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  max-height: 15rem;
  overflow-y: auto;
}
.timezone-group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.35rem 1rem;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.timezone-suggestion.is-selected {
  background: var(--suggestion-active-bg);
  box-shadow: inset 0.25rem 0 0 var(--suggestion-accent);
  font-weight: 600;
}
.timezone-empty {
  padding: 0.5rem 1rem;
  color: var(--gray-600);
  font-style: italic;
}
.utc-offset-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.utc-offset-prefix {
  color: var(--gray-600);
}
.utc-offset-sign {
  width: auto;
  margin-top: 0;
}
.utc-offset-time {
  width: 6rem;
  margin-top: 0;
}

/* ---- Summer-time (DST) tri-state row ---- */
.summer-time-field {
  margin-top: 0.75rem;
}

/* ---- Place autocomplete ---- */
.place-field {
  position: relative;
}
.input-with-spinner {
  position: relative;
}
.place-spinner {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
}
.suggestion-list {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  margin-top: -0.25rem;
  list-style: none;
  padding: 0;
  background: var(--color-white);
  border: 1px solid var(--suggestion-accent);
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 16rem;
  overflow-y: auto;
}
.place-suggestion,
.timezone-suggestion {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--suggestion-border);
  font-weight: 500;
  cursor: pointer;
}
.place-suggestion:last-child,
.timezone-suggestion:last-child {
  border-bottom: none;
}
.place-suggestion:hover,
.place-suggestion.is-active,
.timezone-suggestion:hover,
.timezone-suggestion.is-active {
  background: var(--suggestion-active-bg);
}
.place-suggestion small {
  display: block;
  color: var(--gray-600);
  font-weight: 400;
  font-style: italic;
}
.place-status {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* ---- Warning box ---- */
.inline-tooltip {
  border-radius: 0.375rem;
  background: var(--tooltip-bg);
  border: 1px solid var(--form-panel-border);
  color: var(--tooltip-text);
  font-size: 0.875rem;
  margin-top: 0.75rem;
  padding: 0.75rem;
}

/* ---- Notes about the entered birth details ---- */
/* Same text the sheet prints, shown while the form is still being filled in.
   The thick left edge carries the severity, so the two kinds are told apart
   by more than background color alone. */
.input-notes {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.input-note {
  border-radius: 0.375rem;
  border: 1px solid var(--gray-300);
  border-left: 4px solid var(--gray-400);
  color: var(--body-text);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}
.input-note--caution {
  background: var(--tooltip-bg);
  border-color: var(--warning-sign-bg);
  color: var(--tooltip-text);
}

/* ---- Hover help tooltip ---- */
/* trigger is a real <button>; tip text is a real role="tooltip" element kept in the
   a11y tree (opacity, not display:none) so aria-describedby always exposes it. */
.help-tip {
  position: relative;
  display: inline-block;
  margin-left: 0.25rem;
}
.help-trigger {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid var(--gray-400);
  background: var(--help-trigger-bg);
  color: var(--color-white);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  cursor: help;
}
.help-text {
  position: absolute;
  left: 0;
  top: 1.5rem;
  z-index: 60;
  display: block;
  width: max-content;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
  color: var(--tooltip-text);
  background: var(--tooltip-bg);
  border: 1px solid var(--gray-400);
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.15s ease;
  pointer-events: none;
}
/* triggers near the right edge: anchor the box to the right so it grows leftward */
.help-text--end {
  left: auto;
  right: 0;
}
.help-tip:hover .help-text,
.help-tip:focus-within .help-text {
  opacity: 1;
  transform: scale(1);
}

/* small screens: trigger-anchored box overflows, show it as a fixed bottom banner */
@media (max-width: 480px) {
  .help-text,
  .help-text--end {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: var(--tip-top, 50%); /* set by positionTip() to the trigger's level */
    bottom: auto;
    width: auto;
    max-width: none;
    transform-origin: top center;
  }
}

/* ---- Buttons ---- */
button[type="submit"],
button.button-reset {
  /* 1px more above than below. Neither label has a descender, so the empty
     space under the baseline makes equal padding look top-heavy. */
  padding: calc(0.85rem + 1px) 1rem calc(0.85rem - 1px);
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
}
button[type="submit"] {
  background: var(--submit-button-bg);
  color: var(--color-white);
}
button[type="submit"]:hover {
  background: var(--submit-button-hover-bg);
}
button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: wait;
}
button.button-reset {
  background: var(--gray-300);
  color: var(--gray-600);
}
button.button-reset:hover {
  background: var(--reset-button-hover-bg);
}
button > img {
  width: 1rem;
  height: 1rem;
  display: inline;
  vertical-align: -2px;
  margin-right: 0.25rem;
}
.htmx-indicator {
  display: none;
}
.htmx-request .icon-calculate {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 0.25rem;
}
.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.place-spinner {
  border-color: rgba(0, 0, 0, 0.15);
  border-top-color: var(--suggestion-accent);
}

/* ---- Result column ---- */
/* CSS animations (unlike transitions) run automatically on element insertion,
   so freshly-swapped-in result content fades in with no JS needed. */
#result > * {
  animation: result-fade-in 0.4s ease both;
}
@keyframes result-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.download {
  display: flex;
  margin-top: 2rem;
}
.download-link,
button.download-link {
  display: inline-block;
  width: 100%;
  scroll-margin-top: 1.5rem;
  text-align: center;
  color: var(--color-white);
  font-weight: 500;
  background: var(--download-button-bg);
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
}
.download-link:hover,
button.download-link:hover {
  background: var(--download-button-hover-bg);
}
@media (min-width: 768px) {
  .download-link {
    width: auto;
  }
}

.diagrams {
  margin-top: 1rem;
}

.image-holder {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Match the A4 portrait proportion of a rendered .page so the placeholder
     doesn't jump in size once the real result swaps in. */
  aspect-ratio: 210 / 297;
  padding: 2.5rem;
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  background: var(--image-placeholder-bg);
}
.image-holder img {
  display: block;
  width: auto;
  max-width: 80%;
  height: auto;
  opacity: 0.85;
}

/* ---- About ---- */
.about {
  padding: 2rem 1.25rem;
  margin-top: 2rem;
  background: var(--color-white);
  border-radius: 0.75rem;
  box-shadow:
    0 1px 2px rgba(40, 16, 41, 0.06),
    0 6px 16px rgba(40, 16, 41, 0.08);
  line-height: 1.7;
}

.about > * {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

.about p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.about ul {
  margin: 0 auto 1rem;
  padding-left: 1.5rem;
}

.about li {
  margin-bottom: 0.25rem;
}

.about .warning-text {
  border-left: 4px solid var(--submit-button-bg);
  padding-left: 1rem;
  color: var(--submit-button-bg);
}

.about h2 {
  position: relative;
  isolation: isolate;
  max-width: none;
  margin: 0 0 1.5rem;
  font-family: "Alegreya", serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

.about h3 {
  margin: 2.5rem auto 0.75rem;
  font-family: "Alegreya", serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
}

.heading-cloud {
  position: absolute;
  z-index: -1;
  top: -1.6rem;
  left: -0.5rem;
  width: 9rem;
  height: auto;
  color: var(--image-placeholder-bg);
}

.about .to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  max-width: none;
  margin: 2.5rem 0 0 auto;
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  color: var(--gray-600);
  text-decoration: none;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.about .to-top:hover {
  border-color: var(--title-color);
  background: var(--page-bg);
  color: var(--title-color);
}

.about .to-top:focus-visible {
  outline: 3px solid var(--radio-focus-ring);
  outline-offset: 2px;
}

.to-top-icon {
  width: 1.1rem;
  height: 1.1rem;
}

@media (min-width: 768px) {
  .about {
    padding: 3.5rem 3rem;
  }

  .heading-cloud {
    left: -1.25rem;
  }
}

.donate-button {
  display: inline-block;
  text-align: center;
  color: var(--color-white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background:
    url("/static/img/endless_knot.svg") left 0.6rem center / auto 115% no-repeat,
    var(--title-color);
  border: none;
  border-radius: 0.5rem;
  padding: calc(0.8rem + 1px) 1.75rem calc(0.8rem - 1px) 3.9rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  font-size: 1.0625rem;
  cursor: pointer;
}

.donate-button .external-link-icon {
  margin-left: 0.5rem;
}
.donate-button:hover {
  background-color: var(--donate-button-hover-bg);
}

/* ---- Result sheet ---- */
/* Each rendered page is a separate sheet card with a subtle border, echoing
   the form panels (same radius, soft shadow). */
.sheet {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* Each page is a button: tap/click (or Enter/Space) opens the zoom lightbox.
   The A4 sheet always fits the column width now; the lightbox is the reading
   path when the fitted text gets small (see #lightbox below). */
.page {
  display: block;
  width: 100%;
  padding: 0;
  text-align: inherit;
  background: var(--color-white);
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  box-shadow:
    0 1px 2px rgba(40, 16, 41, 0.06),
    0 6px 16px rgba(40, 16, 41, 0.08);
  overflow: hidden;
  cursor: zoom-in;
}
.page:focus-visible {
  outline: 3px solid var(--radio-focus-ring);
  outline-offset: 2px;
}
.page svg {
  display: block;
  width: 100%;
  height: auto;
}

.sheet-scroll-hint {
  margin-bottom: 0.75rem;
}

.error {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: 0.5rem;
  color: var(--error-color);
  font-weight: bold;
}
.hint {
  font-size: 0.85rem;
  color: var(--hint-text);
}