/* v1.4.0: optional signals are compact disclosure rows, not three cards.
 * Input/model hooks and the previously approved illustration assets remain. */
.sw-app-page .body-signals-calm .body-signals-heading {
  margin-block-end: 12px;
}

.sw-app-page .body-signals-calm .body-signals-heading h3 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.sw-app-page .body-signals-calm .body-signal-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-inline-size: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.sw-app-page .body-signals-calm .body-signal-card,
.sw-app-page .body-signals-calm .body-signal-card.is-open {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-block-end: 1px solid var(--v2-line, rgba(62, 91, 83, .16));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sw-app-page .body-signals-calm .body-signal-row-heading {
  margin: 0;
  font: inherit;
}

.sw-app-page .body-signals-calm .body-signal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 56px;
  margin: 0;
  padding: 14px 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--v2-ink, #303735);
  font: inherit;
  text-align: start;
  white-space: normal;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  touch-action: manipulation;
}

.sw-app-page .body-signals-calm .body-signal-row:focus-visible {
  outline: 3px solid var(--v2-plum, #5b405c);
  outline-offset: 3px;
}

.sw-app-page .body-signals-calm .body-signal-heading-copy {
  display: grid;
  gap: 4px;
  min-inline-size: 0;
}

.sw-app-page .body-signals-calm .body-signal-title {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.sw-app-page .body-signals-calm .body-signal-row-arrow {
  inline-size: 1.25em;
  color: var(--v2-sage-deep, #3e5b53);
  font-size: 21px;
  line-height: 1;
  text-align: center;
}

.sw-app-page .body-signals-calm .body-signal-summary {
  margin: 0;
  color: var(--v2-muted, #626960);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sw-app-page .body-signals-calm .body-signal-details {
  min-inline-size: 0;
  padding-block: 4px 18px;
}

.sw-app-page .body-signals-calm .body-signal-panel {
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.sw-app-page .body-signals-calm :is(.body-signal-input-panel, .body-temperature-panel) {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.sw-app-page .body-signals-calm .body-signal-actions {
  margin-block-start: 8px;
  padding: 0;
  border: 0;
}

.sw-app-page .body-signals-calm :is(.body-signal-action-secondary, .body-signal-info-bottom) {
  min-block-size: 48px;
  padding: 12px 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
}

.sw-app-page .body-signals-calm .body-signal-explanation {
  padding-block-start: 14px;
}

/* The legacy three-track arrow phrase leaves too little space at large text
 * sizes. Keep the existing words and sequence, with a full-width second line. */
.sw-app-page .body-signals-calm .body-lh-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
}

.sw-app-page .body-signals-calm .body-lh-flow > span:last-child {
  grid-column: 1 / -1;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.sw-app-page .body-signals-calm .body-temperature-example figcaption {
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
}

.sw-app-page .body-signals-calm .body-temperature-example figcaption > :is(span, strong),
.sw-app-page .body-signals-calm .body-signal-info-body p {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.sw-app-page .body-signals-calm .body-signal-context-link {
  margin-block: 20px 4px;
}

.sw-app-page .body-signals-calm .body-signal-context-link a {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-block-size: 44px;
  max-inline-size: 100%;
  padding-block: 8px;
  color: var(--v2-sage-deep, #3e5b53);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* WebKit may let its native selected-text renderer contribute an intrinsic
 * width beyond an otherwise correctly sized select at 200% text. Bound only
 * this single-line control; never clip its parent, the section or the page.
 * The native option text and the wrapping committed summary stay unchanged. */
.sw-app-page .body-signals-calm select[data-field="mucus-state"] {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sw-app-page .body-signals-calm .body-signals-boundary {
  margin-block: 14px 0;
  padding: 0;
  border: 0;
  color: var(--v2-muted, #626960);
  font-size: 17px;
  line-height: 1.5;
}

.sw-app-page .body-signals-calm [hidden] {
  display: none !important;
}