/* schwangerwerden.org LIVE 1.0.3 — bounded UI stabilization. */

html {
  box-sizing: border-box;
  min-width: 0;
  max-inline-size: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body.sw-app-page {
  min-width: 0;
  max-inline-size: 100%;
  overflow-x: clip;
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

:where(.sw-app-page) :where(header, main, footer, section, article, aside, form, fieldset, div, nav, ul, ol, li, label, details, summary),
:where(.sw-app-page) :where(.v2-shell, .container, [class*="grid"], [class*="layout"], [class*="card"], [class*="workspace"], [class*="panel"]) {
  min-width: 0;
  max-width: 100%;
}

.sw-app-page :where(h1, h2, h3, h4, p, li, label, legend, summary, strong, small, span, a, button) {
  overflow-wrap: anywhere;
  word-break: normal;
}

.sw-app-page :where(h1, h2, h3, h4) {
  hyphens: auto;
}

.sw-app-page :where(img, svg, video, canvas) {
  max-inline-size: 100%;
  height: auto;
}

.sw-app-page :where(input, select, textarea, button) {
  min-width: 0;
  max-width: 100%;
}

.sw-app-page :where(input, select, textarea) {
  font-size: max(16px, 1em);
}

/* iOS form controls keep their native content-box/font defaults unless both
   values are explicit. Scope the correction to actual data-entry controls. */
.sw-app-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  box-sizing: border-box !important;
  min-height: 44px !important;
  font-size: 16px !important;
}

/* Keep the select rule separate for WebKit's native form-control cascade. */
.sw-app-page select {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  font-size: 16px !important;
}

.sw-app-page :where(button, a, summary) {
  white-space: normal;
}

.sw-app-page :where(button, [role="button"], summary, .sw-header-action, .sw-app-global-footer a) {
  min-height: 44px;
}

.sw-app-page a[href] {
  min-width: 44px;
  min-height: 44px;
}

.sw-app-page .v2-trust-strip .v2-shell {
  flex-wrap: wrap;
}

.sw-app-page .v2-trust-strip a {
  max-width: 100%;
  flex: 0 1 auto;
  white-space: normal;
}

.sw-app-page :where(p, li, article, .sw-app-legal-content) > a[href] {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  vertical-align: middle;
}

.sw-site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  padding-top: env(safe-area-inset-top);
  background: #f8f4ee;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sw-site-header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  min-height: 72px;
}

.site-brand {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  align-items: center;
  text-decoration: none;
}

.site-brand-lockup {
  display: block;
  width: 188px;
  height: 40px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.sw-site-header-nav,
.sw-site-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.sw-site-header-nav a,
.sw-header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--rc-primary, #3e5b53);
  font-weight: 720;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.sw-header-action {
  border: 1px solid rgba(62, 91, 83, 0.18);
  background: rgba(255, 253, 248, 0.74);
}

.sw-local-status {
  color: var(--rc-text-muted, #626b68);
  font-size: 14px;
}

.sw-local-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--rc-orientation, #8fa296);
}

.sw-app-global-footer {
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

.sw-app-global-footer nav a {
  display: inline-flex;
  align-items: center;
}

.fs-workspace-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(47, 53, 52, 0.12);
}

.fs-workspace-footer .fs-clear-button {
  margin: 0;
}

.sw-app-legal-main h1,
.sw-app-page .heading-long,
.sw-app-page .heading-very-long {
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (min-width: 981px) {
  /* Keep the explanatory half of the calculator present while long optional
     signal guidance is open, so the desktop composition remains intentional. */
  .calculator-page:not(.has-result) .context-panel {
    position: sticky;
    top: 96px;
  }

  /* Preserve the full editorial card while enforcing a calm legal reading
     measure of roughly 60–75 characters per line. */
  .sw-app-legal-content > * {
    max-inline-size: 68ch;
  }
}

@media (max-width: 1100px) {
  /* At tablet/compact-desktop widths both components otherwise create very
     narrow text columns inside an already split outer layout. */
  .v2-age-distinction-grid,
  .v2-partner-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Submit controls stay in document flow on touch-sized layouts. */
@media (max-width: 760px) {
  .pc-page .pc-view:not([hidden]) form:not([hidden]),
  .v2-concern-page,
  .v2-trying-page {
    padding-bottom: 0;
  }

  .pc-page .pc-view:not([hidden]) form:not([hidden]) > .pc-primary-action,
  .v2-concern-card form:not([hidden]) > .v2-submit,
  .v2-trying-card form:not([hidden]) > .v2-submit {
    position: static;
    inset: auto;
    width: 100%;
    margin-top: 18px;
    box-shadow: none;
  }
}

@media (max-width: 720px) {
  .sw-site-header {
    position: static;
  }

  .sw-site-header-inner {
    min-height: 66px;
  }

  .site-brand-lockup {
    width: clamp(164px, 44vw, 178px);
    height: clamp(35px, 9.5vw, 38px);
  }

  .sw-site-header-nav {
    display: none;
  }

  .sw-header-action {
    max-width: 132px;
    padding-inline: 9px;
    font-size: 13px;
  }

  .sw-local-status {
    display: none;
  }

  .v2-shell,
  .container {
    width: calc(100% - 32px);
    max-width: none;
    margin-inline: auto;
  }

  .sw-app-legal-main {
    padding-block: 44px 56px;
  }

  .sw-app-legal-main h1 {
    margin-bottom: 22px;
    font-size: clamp(2.45rem, 12vw, 3.55rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
  }

  .sw-app-legal-content {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .sw-app-page :where(
    .v2-hero-copy h1,
    .v2-choice-main h1,
    .v2-journal-heading h1,
    .v2-trying-intro h1,
    .v2-age-hero-copy h1,
    .v2-evidence-intro h1,
    .pc-page .pc-intro h1,
    .fs-entry-copy h1
  ) {
    max-width: 100%;
    font-size: clamp(2.5rem, 12.4vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
  }

  .sw-app-page :where(.v2-age-section-heading h2, .v2-age-selector h2, .pc-result h2, .fs-section-heading h2) {
    font-size: clamp(2rem, 9.5vw, 2.75rem);
    line-height: 1.06;
  }

  .sw-app-page .heading-very-long {
    font-size: clamp(1.9rem, 8.7vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -0.032em;
  }

  .sw-app-page :where(.pc-field-grid, .calculator-layout, .v2-age-help-grid, .v2-age-personal-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  .sw-app-global-footer-inner {
    width: calc(100% - 32px);
    gap: 18px;
  }

  .sw-app-global-footer nav {
    width: 100%;
    gap: 0 16px;
  }
}

@media (max-width: 360px) {
  .v2-shell,
  .container,
  .sw-app-global-footer-inner {
    width: calc(100% - 28px);
  }

  .sw-site-header-inner {
    gap: 6px;
  }

  .site-brand-lockup {
    width: 158px;
    height: 35px;
  }

  .sw-header-action {
    max-width: 116px;
    padding-inline: 7px;
    font-size: 12px;
  }

  .sw-app-page :where(
    .v2-hero-copy h1,
    .v2-choice-main h1,
    .v2-journal-heading h1,
    .v2-trying-intro h1,
    .v2-age-hero-copy h1,
    .v2-evidence-intro h1,
    .pc-page .pc-intro h1,
    .fs-entry-copy h1
  ) {
    font-size: clamp(2.35rem, 12.2vw, 2.75rem);
    letter-spacing: -0.038em;
  }

  .sw-app-legal-content {
    padding-inline: 16px;
  }
}

/* UI stabilization: use natural German wrapping in headlines and reserve
   emergency wrapping for actual long body copy, never compact controls. */
.sw-app-page :where(h1, h2, h3, h4) {
  overflow-wrap: normal;
  word-break: normal;
}

.sw-app-page :where(p, li, label, legend, summary, strong, small, span, button) {
  overflow-wrap: normal;
  word-break: normal;
}

.sw-app-page :where(.v2-tab-list button, .fs-switcher button) {
  overflow-wrap: normal;
  hyphens: none;
  word-break: normal;
}

.sw-app-page :where(.v2-evidence-badge, .fs-action-label) {
  width: fit-content;
  max-width: 100%;
  line-height: 1.25;
  white-space: normal;
}

/* Legal pages can contain email addresses, URLs or test sentinels with no
   natural break point. Break only those genuinely overlong tokens. */
.sw-app-legal-content :where(p, li, a, strong, span) {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (min-width: 981px) {
  .sw-app-page :where(h1, h2) {
    hyphens: none;
  }
}

@media (max-width: 700px) {
  /* Home: one primary action, then one quiet grouped list instead of four
     competing card silhouettes. */
  .v2-page .v2-intent-list {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--v2-line);
    border-radius: 16px;
    background: rgba(255, 253, 248, 0.72);
  }

  .v2-page .v2-intent-card {
    min-height: 64px;
    padding: 9px 11px;
    border: 0;
    border-radius: 0;
    background: transparent;
    transform: none;
  }

  .v2-page .v2-intent-card + .v2-intent-card {
    border-top: 1px solid var(--v2-line);
  }

  .v2-page .v2-intent-card:hover,
  .v2-page .v2-intent-card:focus-visible {
    border-color: var(--v2-line);
    background: var(--v2-sage-wash);
    transform: none;
  }

  .v2-page .v2-home-age-link {
    margin-top: 6px;
    padding-inline: 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  /* The five-band accordion already conveys the complete age structure.
     Removing the duplicate miniature timeline is the calmer mobile model. */
  .v2-age-track {
    display: none;
  }

  .v2-age-band-list summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px;
    align-items: center;
  }

  .v2-age-band-list summary > strong,
  .v2-age-band-list summary > span {
    min-width: 0;
    grid-column: 1;
  }

  .v2-age-band-list summary::after {
    grid-row: 1 / 3;
    grid-column: 2;
  }

  /* Shared three-way control contract for support and evidence pages. */
  .fs-switcher,
  .v2-tab-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 15px;
  }

  .fs-switcher button,
  .v2-tab-list button {
    min-width: 0;
    min-height: 52px;
    padding: 7px 4px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  /* Evidence key: badge and explanation remain one readable pair; the long
     myth label never competes with a second text column. */
  .v2-evidence-key {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 14px;
  }

  .v2-evidence-key .v2-evidence-badge {
    min-height: 32px;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 11px;
    font-size: 13px;
    overflow-wrap: normal;
    hyphens: auto;
  }

  .v2-evidence-key .v2-evidence-badge:first-child {
    margin-top: 0;
  }

  .v2-evidence-key p {
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 1.42;
  }

  .v2-evidence-grid .v2-evidence-badge {
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 11px;
    overflow-wrap: normal;
    hyphens: auto;
  }

  /* Support entry: three compact rows replace three cramped mini-cards. */
  .fs-path-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--fs-line);
    border-radius: 16px;
    background: var(--fs-paper);
  }

  .fs-path {
    display: grid;
    min-height: 68px;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    transform: none;
  }

  .fs-path + .fs-path {
    border-top: 1px solid var(--fs-line);
  }

  .fs-path:hover,
  .fs-path:focus-visible {
    border-color: var(--fs-line);
    background: var(--v2-sage-wash);
    transform: none;
  }

  .fs-path > span {
    width: 32px;
    height: 32px;
    grid-row: 1 / 3;
    margin: 0;
  }

  .fs-path strong,
  .fs-path small {
    grid-column: 2;
  }

  .fs-path strong {
    align-self: end;
    font-size: 16px;
  }

  .fs-path small {
    align-self: start;
    margin-top: 2px;
    font-size: 13px;
  }

  .fs-next-actions button:last-child {
    min-height: 44px;
    border-color: transparent;
    background: transparent;
  }

  /* Pregnancy concern: a single choice group and grouped answer rows remove
     card-inside-card noise without changing order, state or logic. */
  .pc-page .pc-path-list {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--v2-line);
    border-radius: 15px;
    background: var(--v2-paper);
  }

  .pc-page .pc-path-choice {
    grid-template-columns: 31px minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .pc-page .pc-path-choice + .pc-path-choice {
    border-top: 1px solid var(--v2-line);
  }

  .pc-page .pc-path-choice.is-time-sensitive {
    border: 0;
    background: var(--v2-clay-wash);
  }

  .pc-page .pc-path-arrow {
    display: none;
  }

  .pc-page .pc-radio-stack {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--v2-line);
    border-radius: 13px;
    background: var(--v2-paper);
  }

  .pc-page .pc-radio-stack span {
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-wrap: normal;
    hyphens: auto;
  }

  .pc-page .pc-radio-stack label + label span {
    border-top: 1px solid var(--v2-line);
  }

  .pc-page .pc-add-event {
    width: fit-content;
    max-width: 100%;
    margin: -3px 0 14px;
    padding-inline: 0;
    border: 0;
    background: transparent;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 0.22em;
  }

  /* Body-signal teaching graphics: consistent comparison rows, then a full-
     width finger illustration and explanation. */
  .body-mucus-visual-sequence {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .body-mucus-visual-sequence li {
    padding-inline: 4px;
  }

  .body-mucus-visual-sequence strong,
  .body-mucus-visual-sequence span,
  .body-finger-grid strong,
  .body-finger-grid span {
    overflow-wrap: normal;
    hyphens: auto;
  }

  .body-finger-check {
    padding: 14px 12px;
    border: 0;
    border-radius: 12px;
  }

  .body-finger-grid article {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 6px;
    padding: 16px 0;
  }

  .body-finger-grid article img,
  .body-finger-art {
    width: min(100%, 220px);
    grid-row: auto;
    margin-bottom: 2px;
  }

  .body-finger-grid strong,
  .body-finger-grid span {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .fs-switcher button,
  .v2-tab-list button {
    padding-inline: 2px;
    font-size: 13px;
  }

  .v2-page .v2-primary-action small {
    font-size: 11px;
    letter-spacing: 0.035em;
  }

  .fs-audience-choice {
    grid-template-columns: minmax(0, 1fr);
  }

  .sw-header-action {
    max-width: 122px;
    font-size: 13px;
    overflow-wrap: normal;
    hyphens: none;
  }

  .pattern-choice span {
    padding-inline: 3px;
    font-size: 12px;
  }

  .v2-age-distinction-grid article {
    display: block;
  }

  .v2-age-distinction-grid article > span {
    width: 34px;
    height: 34px;
    margin-bottom: 7px;
  }

  .v2-age-distinction-grid p {
    font-size: 14px;
  }

  .v2-age-risk-list details > p {
    font-size: 15px;
  }
}