/* ShareHome v96 — responsive cycle management. Screen-only; all changes scoped
   to the cycle management page so other forms/calendars/print remain intact. */
@media screen {
  .app-shell .page-content .cycle85-page,
  .app-shell .page-content .cycle85-page :is(.settings-hero,.settings-section-card,.cycle85-create,.cycle85-item,.cycle85-actions) {
    min-width: 0;
  }
  .app-shell .page-content .cycle85-page .settings-section-head { margin-bottom: 16px; padding-bottom: 14px; }
  .app-shell .page-content .cycle85-page .settings-section-head h2 { margin: 0 0 4px; }
  .app-shell .page-content .cycle85-page .settings-section-head p {
    margin: 0; line-height: 1.7 !important; overflow-wrap: break-word;
  }
  .app-shell .page-content .cycle85-create > .settings-field {
    min-width: 0; display: grid; gap: 7px; align-content: start;
  }
  .app-shell .page-content .cycle85-create > .settings-field > span {
    display: block; line-height: 1.5 !important;
  }
  .app-shell .page-content .cycle85-create > .settings-field > input,
  .app-shell .page-content .cycle85-create .hm-date-field-v57 {
    min-width: 0 !important; width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .app-shell .page-content .cycle85-create .hm-date-field-v57 > input.hm-date-input-v57 {
    min-width: 0 !important; box-sizing: border-box !important;
    padding-left: 54px !important; padding-right: 10px !important;
    font-variant-numeric: tabular-nums;
  }
  .app-shell .page-content .cycle85-create > .cycle85-check {
    display: flex !important; flex-direction: row !important; justify-content: flex-start !important;
    align-items: center !important; gap: 10px !important;
    min-width: 0; margin: 0; line-height: 1.6;
  }
  .app-shell .page-content .cycle85-create > .cycle85-check > input[type="checkbox"] {
    width: 20px !important; height: 20px !important;
    min-width: 20px !important; flex: 0 0 20px !important; margin: 0 !important;
  }
  .app-shell .page-content .cycle85-create > .cycle85-check > span { min-width: 0; }
  .app-shell .page-content .cycle85-item > div:first-child { min-width: 0; }
  .app-shell .page-content .cycle85-item b { line-height: 1.5; }
  .app-shell .page-content .cycle85-item small { line-height: 1.7 !important; overflow-wrap: break-word; }
  .app-shell .page-content .cycle85-actions { min-width: 0; }
  .app-shell .page-content .cycle85-actions form { min-width: 0; }
  .app-shell .page-content .cycle85-actions input { box-sizing: border-box; min-width: 0; }
  .app-shell .page-content .cycle85-links a { line-height: 1.6; }

  @media (max-width: 640px) {
    .app-shell .page-content .cycle85-page { gap: 12px; }
    .app-shell .page-content .cycle85-page .settings-hero {
      padding: 15px !important; border-radius: 17px !important; gap: 10px;
    }
    .app-shell .page-content .cycle85-page .settings-hero h1 { font-size: 22px !important; line-height: 1.45 !important; }
    .app-shell .page-content .cycle85-page .settings-hero p { font-size: 14px !important; line-height: 1.7 !important; }
    .app-shell .page-content .cycle85-page .settings-section-card {
      padding: 14px !important; border-radius: 17px !important;
    }
    .app-shell .page-content .cycle85-page .settings-section-head { margin-bottom: 12px; padding-bottom: 12px; }
    .app-shell .page-content .cycle85-page .settings-section-head h2 { font-size: 21px !important; line-height: 1.5 !important; }
    .app-shell .page-content .cycle85-page .settings-section-head p { font-size: 14px !important; }
    /* Every date field gets the full available width, even at 390–430px. */
    .app-shell .page-content .cycle85-create {
      display: grid !important; grid-template-columns: minmax(0,1fr) !important;
      gap: 11px !important; align-items: stretch !important;
    }
    .app-shell .page-content .cycle85-create > * { grid-column: 1 / -1 !important; min-width: 0; }
    .app-shell .page-content .cycle85-create > .settings-field {
      padding: 11px !important; border-radius: 12px !important;
    }
    .app-shell .page-content .cycle85-create > .settings-field > span { font-size: 14px !important; }
    .app-shell .page-content .cycle85-create > .cycle85-check {
      padding: 5px 2px; font-size: 14px !important; min-height: 34px !important;
    }
    .app-shell .page-content .cycle85-create > .button {
      width: 100% !important; min-height: 46px !important; justify-self: stretch;
      font-size: 15px !important;
    }
    .app-shell .page-content .cycle85-list { gap: 10px; }
    .app-shell .page-content .cycle85-item {
      display: grid !important; grid-template-columns: minmax(0,1fr) !important;
      gap: 12px !important; padding: 13px !important; border-radius: 14px;
    }
    .app-shell .page-content .cycle85-item b { font-size: 18px !important; }
    .app-shell .page-content .cycle85-item small { font-size: 14px !important; }
    .app-shell .page-content .cycle85-actions {
      display: grid !important; grid-template-columns: minmax(0,1fr) !important;
      gap: 8px !important; width: 100% !important;
    }
    .app-shell .page-content .cycle85-actions form:first-child {
      display: grid !important; grid-template-columns: minmax(0,1fr) auto !important;
      gap: 8px !important; width: 100% !important; align-items: stretch !important;
    }
    .app-shell .page-content .cycle85-actions form:first-child input {
      width: 100% !important; max-width: 100% !important; min-width: 0 !important;
      min-height: 44px !important; padding: 7px 10px !important;
    }
    .app-shell .page-content .cycle85-actions form:first-child button { white-space: nowrap; min-height: 44px; }
    .app-shell .page-content .cycle85-actions form:not(:first-child) { justify-self: start; }
    .app-shell .page-content .cycle85-actions form:not(:first-child) button { min-height: 42px; }
    .app-shell .page-content .cycle85-note { line-height: 1.75 !important; margin-bottom: 0; }
    .app-shell .page-content .cycle85-links { gap: 7px 15px; margin-top: 12px; }
  }
  @media (max-width: 350px) {
    .app-shell .page-content .cycle85-actions form:first-child {
      grid-template-columns: minmax(0,1fr) !important;
    }
    .app-shell .page-content .cycle85-actions form:first-child button { width: 100%; }
  }
}