@layer modules {
  /* Full-height flex layout for the farrowing list page
  /* ========================================================================
     Mobile-first: base styles are for mobile (natural scroll, no flex growth).
     Desktop enhancements (side-by-side columns, independent scroll) are added
     via @media (min-width: 640px).
  /* ======================================================================== */

  .farrowing-list {
    display: flex;
    flex-direction: column;
  }

  .page:has(.farrowing-list) {
    display: flex;
    flex-direction: column;
    max-inline-size: 60rem;
  }

  @media (min-width: 640px) {
    .page:has(.farrowing-list) {
      overflow: hidden;
      padding-block-end: calc(var(--footer-height) + env(safe-area-inset-bottom));
    }

    .page:has(.farrowing-list) > .page-content {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-block-size: 0;
    }

    .page-content > .farrowing-list {
      flex: 1;
      min-block-size: 0;
    }
  }

  /* Header: search (pinned at top, never scrolls)
  /* ------------------------------------------------------------------------ */

  .farrowing-list__header {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: var(--block-space-half);
    margin-block-end: var(--block-space);
  }

  /* Two-column layout (observations left, pregnant right)
  /* ------------------------------------------------------------------------ */

  .farrowing-list__columns {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .farrowing-list__column {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  @media (min-width: 640px) {
    .farrowing-list__columns {
      flex: 1;
      flex-direction: row;
      min-block-size: 0;
    }

    .farrowing-list__column {
      flex: 1;
      min-block-size: 0;
    }
  }

  /* Scrollable table area (one per column)
  /* ------------------------------------------------------------------------ */

  .farrowing-list__scroll {
    -webkit-overflow-scrolling: touch;
  }

  @media (min-width: 640px) {
    .farrowing-list__scroll {
      flex: 1;
      min-block-size: 0;
      overflow-y: auto;
      padding-block-end: var(--block-space);
    }

    .farrowing-list__scroll thead {
      background: var(--color-canvas);
      position: sticky;
      inset-block-start: 0;
      z-index: 1;
    }
  }

  /* Section headings between the two tables
  /* ------------------------------------------------------------------------ */

  .farrowing-list__section-heading {
    color: var(--color-ink-darker);
    font-size: var(--text-small);
    font-weight: 700;
    margin-block: var(--block-space) var(--block-space-half);
    padding-inline: var(--main-padding);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .farrowing-list__section-heading:first-child {
    margin-block-start: var(--block-space-half);
  }

  /* Urgency coloring for observed rows
  /* ------------------------------------------------------------------------ */

  [style*="--urgency-bg"] td {
    background-color: var(--urgency-bg);
  }

  [style*="--urgency-bg"] td:first-child {
    border-radius: 0.375rem 0 0 0.375rem;
  }

  [style*="--urgency-bg"] td:last-child {
    border-radius: 0 0.375rem 0.375rem 0;
  }

  /* Urgency pulse for overdue observations — pulses only the background,
     leaving text and links at full opacity.
  /* ------------------------------------------------------------------------ */

  @keyframes farrowing-pulse {
    0%, 100% { background-color: var(--urgency-bg); }
    50% { background-color: transparent; }
  }

  .farrowing-urgency-pulse td {
    animation: farrowing-pulse 2s ease-in-out infinite;
  }
}