/* ============================================================================
   Row / To-Do  (+ / Category, / Actions)     COMPONENTS.md §22.3
   Figma: DS file, node 3261:12779 — variant TODO PLATFORM=Social

   apps/fe-client/CLAUDE.md names the social variants of `Row / To-Do` as an
   FE.C surface, so Social is the variant. EHR is 134 tall against Social's 118
   and is not built.

   Structure, straight off the Figma frame:
     Top row   category label | LIVE chip | timing chip | points chip
     Content   title (bold) + optional description
     Bottom    actions

   Not reproduced from the frame:
     · `Tag / Points` — fill RAW #e6fffb, text RAW #002329, both off-palette
       (§12.2). The points/gamification surface was dropped from the navbar for
       the same reason, and the screenshot's rail has no points chips.
     · the LIVE chip's `content/inverse` foreground — see tag.css.

   TODO(tokens): every bare px length in this file is a SIZE.
   DESIGN.md §12.4 records size as not built.
   ========================================================================== */

.todo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  background: var(--color-surface-raised);
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color 100ms ease;
}

/* §22.3: `surface/raised` → `soft/neutral/default` on hover. */
.todo:hover {
  background: var(--color-soft-neutral-default);
}

/* Observed in the FE.C screenshot, not in the DS recipe: the Post-type to-do
   renders inside a hairline frame, presumably because its body is a preview of
   the post rather than a description. Flagged in the README. */
.todo--framed {
  border-color: var(--color-border-default);
  border-radius: var(--shape-radius-card);
  padding: var(--space-sm);
}

/* --- Top row ------------------------------------------------------------- */
.todo__top {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Row / To-Do / Category — the category label. Takes the free space so the
   timing chip and LIVE sit at the inline end, as in the frame. */
.todo__category {
  flex: 1 1 auto;
  min-inline-size: 0;
  color: var(--color-content-primary);
}

/* Row / To-Do / Category — the timing prefix (At / By / In / Now / Overdue).
   §22 F3: `Overdue` only renders in `content/danger` when `V2=On`; with V2=Off
   it is indistinguishable from a normal item. Not reproduced — `.is-overdue`
   below always carries the status colour, and pairs it with a weight step so
   the state does not rest on colour alone. */
.todo__timing {
  flex: none;
  color: var(--color-content-primary);
}

.todo__timing.is-overdue {
  color: var(--color-content-danger);
  font-weight: var(--font-weight-medium);
}

/* --- Content ------------------------------------------------------------- */
.todo__content {
  display: flex;
  flex-direction: column;
}

/* ⚠️ The DS title is an UNBOUND text style — the Figma frame emits
   `font-['Roboto:Bold'] text-[14px] leading-[22px]` with no variable behind any
   of the three. Those values ARE Body/MD at weight bold, so they are bound
   here. Same class of defect as Navbar §8 F6. See the README. */
.todo__title {
  margin: 0;
  color: var(--color-content-headline);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing-default);
}

.todo__desc {
  margin: 0;
  color: var(--color-content-primary);
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The frame's `noDesc` empty state. Italic + `content/secondary`; the DS leaves
   its text style unbound too, so it is bound here. */
.todo__empty {
  margin: 0;
  color: var(--color-content-secondary);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-style: italic;
}

/* --- Bottom row — Row / To-Do / Actions ---------------------------------- */
.todo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding-block-start: var(--space-2xs);
}