/* ============================================================================
   Sidebar / Right — the To-Dos rail
   Built from the FE Client home screenshot. 400px wide; the layout bands in
   layout.css own the width and when it appears.

   Two cards:
     1. the Telehealth CTA, with a "Provided by" BigHeart Health lockup
     2. To-Dos for Today — header, a list of `Row / To-Do`, a last-updated line

   Card treatment matches the left rail: `surface/raised` on a sunken page,
   `shape/radius/card`, no stroke and no shadow — the surface pair carries the
   edge in both modes. See menu.css for why.

   TODO(tokens): every bare px length in this file is a SIZE.
   ========================================================================== */

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* Same rule as the left rail: fills the viewport, matching the Figma frames
     (`Sidebar / Right` is 912 tall in a 960 wrapper at 1440). The To-Dos card
     takes the slack; the CTA card stays its own height. */
  position: sticky;
  inset-block-start: calc(64px + var(--layout-gutter));
  block-size: calc(100dvh - 64px - var(--layout-gutter) * 2);
  overflow: visible;
}

.rail__card {
  background: var(--color-surface-raised);
  border-radius: var(--shape-radius-card);
  padding: var(--space-md);
  flex: none;
}

/* --- Telehealth CTA ------------------------------------------------------ */
.rail__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.rail__provided {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.rail__provided-label {
  color: var(--color-content-secondary);
  font-size: var(--font-body-xs-size);
  line-height: var(--font-body-xs-line-height);
}

/* ASSETS.md §5 rule 4: `BigHeart Health` has logos only — no token ramp — so
   the lockup is swapped and nothing else. Rule 2: logos do not inherit colour,
   so this is an <img>, never a mask. */
.rail__provided-logo {
  /* TODO(tokens): size not built. 24px keeps the sub-brand subordinate to the
     BigHeart lockup in the navbar, which sits at 32px. */
  block-size: 24px;
  inline-size: auto;
}

/* --- To-Dos card --------------------------------------------------------- */
.rail__todos {
  padding: var(--space-md) var(--space-xs) var(--space-xs);
  /* Grows into the remaining height, and lays its own children out so the
     header and the last-updated line stay put while only the list scrolls. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-block-size: 0;
}

.rail__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-inline: var(--space-xs);
  padding-block-end: var(--space-sm);
}

.rail__title {
  margin: 0;
  color: var(--color-content-headline);
  font-family: var(--font-family-display);
  font-size: var(--font-heading-sm-size);
  line-height: var(--font-heading-sm-line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing-default);
}

.rail__date {
  flex: none;
  color: var(--color-content-secondary);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}

.rail__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  /* `0 1 auto`, not `1 1 auto`: the list takes its natural height and shrinks
     only when it has to. With a few to-dos the last-updated line sits directly
     under them; with many, the list scrolls and the line pins to the bottom. */
  flex: 0 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.rail__updated {
  margin: 0;
  padding-block-start: var(--space-sm);
  text-align: center;
  color: var(--color-content-secondary);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
}

/* --- Below 1024 — the rail is out of the column row (layout.css hides it) --
   Kept here so that if it is ever shown at narrow widths it does not try to
   stick to a viewport it is taller than. */
@media (max-width: 1023px) {
  .rail {
    position: static;
    block-size: auto;
  }
  .rail__todos {
    flex: none;
  }
  .rail__list {
    flex: none;
    overflow: visible;
  }
}