/* schwangerwerden.org LIVE 1.0.8 -- real-mobile form hardening.
   Additive presentation layer only: no model, medical copy, storage or route
   behavior changes. The rules deliberately include every ancestor in a form
   sizing chain because native Safari controls otherwise retain an intrinsic
   width even when the input itself declares width: 100%. */

html,
body.sw-app-page {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: clip;
}

.sw-app-page,
.sw-app-page *,
.sw-app-page *::before,
.sw-app-page *::after {
  box-sizing: border-box;
}

/* Every layout participant surrounding a public form can shrink to its real
   content track. This is intentionally more defensive than styling only the
   control: a min-content grid track is the source of the observed iOS spill. */
.sw-app-page :where(
  main,
  .container,
  .v2-shell,
  form,
  fieldset,
  .calculator-layout,
  .calculator-form-panel,
  .field-group,
  .pattern-fields,
  .pattern-options,
  .input-wrap,
  .two-fields,
  .v2-field-row,
  .v2-input-suffix,
  .v2-signal-fields,
  .v2-signal-fields > label,
  .v2-quick-age-optional,
  .v2-add-period,
  .v2-add-period > div,
  .v2-add-period-controls,
  .sw-control-wrap,
  .v2-observation-form,
  .v2-age-selector,
  .v2-age-selector form,
  .v2-age-input-row,
  .v2-trying-primary-grid,
  .v2-trying-primary-grid > label,
  .v2-trying-month-input,
  .v2-trying-detail-grid,
  .v2-trying-detail-grid > label,
  .body-signal-entry-section,
  .body-signal-input-panel,
  .body-signal-select,
  .body-signal-extra,
  .body-temperature-panel,
  .body-temperature-rows,
  .body-temperature-row,
  .body-temperature-row > label,
  .pc-layout,
  .pc-workspace,
  .pc-view,
  .pc-events,
  .pc-event,
  .pc-event > label,
  .pc-fieldset,
  .pc-field,
  .pc-field-grid,
  .pc-field-grid > label,
  .pc-segmented,
  .pc-radio-stack,
  #performed-test-fields,
  #negative-follow-up
) {
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  max-inline-size: 100%;
}

.sw-app-page :where(form, .field-group, .pattern-fields, .v2-field-row, .v2-observation-form, .pc-events, .pc-field, .sw-control-wrap) {
  inline-size: 100%;
  width: 100%;
}

.sw-app-page :where(
  form,
  fieldset,
  .calculator-layout,
  .two-fields,
  .pattern-options,
  .v2-add-period > div,
  .v2-add-period-controls,
  .v2-signal-fields,
  .v2-age-input-row,
  .v2-trying-primary-grid,
  .v2-trying-detail-grid,
  .body-signal-options,
  .body-temperature-row,
  .pc-layout,
  .pc-field-grid,
  .pc-segmented
) > * {
  min-width: 0;
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Control wrappers own the available width. minmax(0, 1fr) prevents native
   date/time content from enlarging the visible card. */
.sw-app-page :where(div.field-group, .v2-field-row) {
  display: grid;
  inline-size: 100%;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.sw-app-page :where(.input-wrap, .sw-control-wrap, .body-signal-select, .body-signal-extra, .pc-field, .pc-event > label, .pc-field-grid > label) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  inline-size: 100%;
  width: 100%;
  max-inline-size: 100%;
}

.sw-app-page .v2-input-suffix {
  display: grid;
  inline-size: 100%;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
}

.sw-app-page :where(.v2-add-period > div, .v2-add-period-controls) {
  display: grid;
  inline-size: 100%;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
}

/* One contract for all data-entry controls. Checkbox/radio controls remain in
   their owned custom-choice layouts. */
.sw-app-page :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
) {
  display: block;
  box-sizing: border-box !important;
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  margin-inline: 0;
  font-size: 16px !important;
}

.sw-app-page :where(input[type="date"], input[type="time"], input[type="number"]) {
  display: block;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
}

.sw-app-page :where(input[type="date"], input[type="time"])::-webkit-date-and-time-value {
  min-inline-size: 0;
  margin: 0;
  text-align: start;
}

.sw-app-page :where(input[type="date"], input[type="time"])::-webkit-datetime-edit {
  min-inline-size: 0;
  padding: 0;
}

/* Segmented choices use shrinkable tracks at normal mobile widths. */
.sw-app-page :where(.pattern-options, .v2-segmented, .body-signal-options-three) {
  inline-size: 100%;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sw-app-page .pc-segmented {
  inline-size: 100%;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sw-app-page :where(.pattern-choice, .v2-segmented label, .body-signal-options label, .pc-segmented label) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.sw-app-page :where(.pattern-choice span, .v2-segmented span, .body-signal-options span, .pc-segmented span) {
  min-inline-size: 0;
  max-inline-size: 100%;
  line-height: 1.25;
  white-space: normal;
}

/* The skip link is physically hidden until it receives focus. This retains a
   keyboard/assistive route while preventing a stale touch focus from leaving
   the control visible during normal Safari use. */
.sw-app-page .skip-link:not(:focus):not(:focus-visible) {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  inset-block-start: 0 !important;
  inset-inline-start: 0 !important;
  inset-block-end: auto !important;
  inset-inline-end: auto !important;
  inline-size: 1px !important;
  width: 1px !important;
  block-size: 1px !important;
  height: 1px !important;
  min-inline-size: 1px !important;
  min-width: 1px !important;
  min-block-size: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
  transform: none !important;
}

.sw-app-page .skip-link:focus,
.sw-app-page .skip-link:focus-visible {
  position: fixed !important;
  z-index: 1000;
  inset-block-start: max(12px, env(safe-area-inset-top));
  inset-inline-start: max(12px, env(safe-area-inset-left));
  inline-size: auto !important;
  width: auto !important;
  block-size: auto !important;
  height: auto !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  min-block-size: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  transform: none !important;
}

/* Keep the final legal navigation above Safari's bottom chrome and the device
   home indicator. The inner footer rhythm remains unchanged. */
.sw-app-page .sw-app-global-footer {
  padding-block-end: max(20px, env(safe-area-inset-bottom));
}

@media (max-width: 430px) {
  /* Date + time and other tight paired-control layouts become one column.
     The journal date/button pair also stacks, avoiding Safari's intrinsic date
     width competing with a fixed-width submit button. */
  .sw-app-page :where(
    .pc-field-grid,
    .two-fields,
    .v2-add-period > div,
    .v2-add-period-controls,
    .v2-age-input-row,
    .v2-trying-primary-grid,
    .v2-trying-detail-grid,
    .body-temperature-row
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sw-app-page :where(
    .v2-add-period button,
    .v2-age-input-row button,
    .body-temperature-row [data-remove-temperature]
  ) {
    inline-size: 100%;
    width: 100%;
    max-inline-size: 100%;
  }

  .sw-app-page .body-temperature-row :where(label, [data-remove-temperature]) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  /* Real usable inner widths at 320--390 CSS px. */
  .sw-app-page .calculator-form-panel {
    padding-inline: 16px;
  }

  .sw-app-page :where(.v2-journal-workspace, .v2-quick-card, .v2-trying-card) {
    padding-inline: 16px;
  }

  .sw-app-page .v2-add-period {
    padding: 16px;
  }

  .pc-page .pc-workspace {
    padding-inline: 14px;
  }

  .pc-page :where(.pc-event, .pc-optional-timing, .pc-follow-up, #performed-test-fields, #negative-follow-up) {
    padding: 16px;
  }
}

/* LIVE 1.0.8 premium render system. Each state is a local raster master with
   one responsive WebP derivative. Mobile keeps one complete specimen per row;
   larger canvases become intentional editorial comparisons. */
.body-mucus-visual-sequence {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.body-mucus-visual-sequence > li,
.body-mucus-visual-sequence > li + li {
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid rgba(62, 91, 83, 0.16);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 14px 34px rgba(48, 55, 53, 0.045);
}

.body-mucus-sample {
  overflow: hidden;
  align-content: start;
  background: rgba(255, 253, 248, 0.94);
}

.body-visual-media {
  display: grid;
  inline-size: 100%;
  width: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.body-visual-fallback {
  display: grid;
  gap: 7px;
  min-block-size: 150px;
  margin: 0 !important;
  padding: 20px;
  place-content: center start;
  border-bottom: 1px solid rgba(62, 91, 83, 0.14);
  background: linear-gradient(135deg, rgba(232, 238, 233, 0.72), rgba(255, 253, 248, 0.96));
  color: var(--v2-ink, #303735) !important;
}

.body-visual-fallback[hidden] {
  display: none !important;
}

.body-visual-fallback strong,
.body-visual-fallback span {
  display: block;
}

.body-visual-fallback strong {
  color: var(--v2-sage-deep, #3e5b53);
  font-size: 14px;
}

.body-visual-fallback span {
  max-inline-size: 42ch;
  font-size: 14px;
  line-height: 1.45;
}

.body-mucus-state-art,
.body-mucus-visual-sequence > li img {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  margin: 0 auto !important;
  border-radius: 0;
  background: #f7f3ea;
  object-fit: cover;
}

.body-mucus-sample figcaption {
  padding: 16px 18px 19px;
}

.body-mucus-sample figcaption,
.body-finger-grid figcaption,
.body-mucus-sample figcaption > *,
.body-finger-grid figcaption > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.body-finger-check {
  padding: clamp(15px, 3vw, 24px);
  background: linear-gradient(180deg, rgba(238, 225, 221, 0.24), rgba(255, 253, 248, 0.58));
}

.body-finger-grid {
  gap: 16px;
  border: 0;
}

.body-finger-grid > figure,
.body-finger-grid > figure + figure {
  overflow: hidden;
  border: 1px solid rgba(109, 72, 98, 0.16);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.92);
}

.body-finger-art,
.body-finger-grid > figure img {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  margin: 0 auto !important;
  border-radius: 0;
  background: #faf6ee;
  object-fit: cover;
}

.body-finger-grid figcaption {
  padding: 14px 16px 17px;
}

@media (min-width: 768px) {
  .body-mucus-visual-sequence {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  }

  .body-finger-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    align-items: stretch;
  }

  .body-finger-grid > figure,
  .body-finger-grid > figure + figure {
    border-top: 1px solid rgba(109, 72, 98, 0.16);
  }
}

/* The calculator's normal desktop balance stays unchanged. While the visual
   teaching unit is open, its comparison becomes the primary task and receives
   enough real track width for all three finger states in one readable row. */
@media (min-width: 1200px) {
  .sw-app-page .calculator-layout:has(
    #calculator-body-signals [data-signal-panel="mucus"]:not([hidden])
  ) {
    grid-template-columns: minmax(720px, 0.62fr) minmax(0, 0.38fr);
  }
}

/* Preserve the approved option text while giving WebKit's native disclosure
   marker enough space at the narrow emergency-event width. */
@media (max-width: 430px) {
  .sw-app-page .pc-event select {
    padding-inline: 6px;
    letter-spacing: -0.01em;
  }
}

/* At the former 1020 px layout edge, the long emergency heading was forced
   into a track narrower than its longest German word. Keep the composed
   single-column layout until both editorial columns have honest room, then
   use a bounded desktop headline rather than breaking the medical term. */
@media (min-width: 1021px) and (max-width: 1180px) {
  .sw-app-page .pc-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sw-app-page .pc-intro {
    position: static;
  }
}

@media (min-width: 1181px) {
  .sw-app-page .pc-intro h1 {
    min-inline-size: 0;
    max-inline-size: 100%;
    font-size: clamp(3.25rem, 5vw, 4.65rem);
    white-space: normal;
  }
}

@media (max-width: 360px) {
  /* At the narrowest required widths words remain whole and choices become
     full-width targets instead of shrinking their labels. */
  .sw-app-page :where(.pattern-options, .v2-segmented, .body-signal-options-three, .pc-segmented) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sw-app-page :where(.pattern-choice span, .v2-segmented span, .body-signal-options span, .pc-segmented span) {
    justify-content: start;
    padding-inline: 13px;
    text-align: start;
  }
}