/* Presentation for the shared "todo card" primitive (`<x-platform::todo-card>`) and the grid it lays out in —
   the ONE roomy-card look used by BOTH the todos inbox (`/todos`) and the homepage's "Top todos"
   (coding-standards §3). Platform-owned: extracted from the todos module (M-171) so the homepage can reuse the
   exact M-153 + M-161 visuals without the always-on kernel depending on the optional todos module.

   Content-only: page chrome (`.platform-page__*`, `.platform-empty`, `.platform-meta`), the card box
   (`.platform-card`), the badge (`.platform-badge`) and the buttons (`.platform-btn*`) all come from the other
   platform sheets — this sheet keeps ONLY the card's inner structure + the responsive grid. Colors, spacing,
   radii and type come from the design tokens (tokens.css) — themeable without touching markup (§4 and §12).
   Mobile-first; no inline styles. */

/* ---- The grid: a responsive grid of roomy todo cards -------------------------------------------- */
/* Each todo is a roomy, roughly-square card; the list is a mobile-first grid that starts at ONE column on the
   narrowest screens and steps up to a full row on a wide desktop. The column count is a single knob
   (`--platform-todo-columns`) so the density is trivial to nudge; each breakpoint below overrides only that one
   value. An unstyled list: the cards carry the visual box. */
.platform-todo-list {
    /* Mobile-first base: a single column. The min-width steps below widen it toward the desktop target. */
    --platform-todo-columns: 1;

    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--platform-todo-columns), minmax(0, 1fr));
    gap: var(--platform-space-md, 0.75rem);
}

@media (min-width: 30rem) {
    .platform-todo-list {
        --platform-todo-columns: 2;
    }
}

@media (min-width: 48rem) {
    .platform-todo-list {
        --platform-todo-columns: 3;
    }
}

@media (min-width: 62rem) {
    .platform-todo-list {
        --platform-todo-columns: 4;
    }
}

/* KNOB — cards per row on a wide desktop. Start at 6; change this one number to make the grid
   denser/roomier (the steps above only cover narrower widths). */
@media (min-width: 75rem) {
    .platform-todo-list {
        --platform-todo-columns: 6;
    }
}

/* Each cell's card fills the track height so a row of cards aligns, content stacked top-to-bottom. */
.platform-todo-list__item {
    display: flex;
}

.platform-todo-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Roomy, roughly-square box: a floor height so a short todo still reads as a proper card rather than a
       thin strip, letting the title/meta breathe and the actions sit at the bottom. Tune alongside the
       column knob above if the aspect drifts. */
    min-height: 9rem;
}

/* Reconnect the flex chain — SCOPED to the todo card, never the shared `.platform-card__body` globally.
   The shared card primitive always wraps its slot in a plain-block `.platform-card__body`, which breaks the
   `.platform-todo-card__body { flex:1 }` pin (its parent isn't a flex column). Make just THIS card's body a
   full-height flex column so the body grows and the footer bar lands on the same bottom line every time. */
.platform-todo-card .platform-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;   /* fill the card's stretched height */
    min-height: 0;    /* let the clamped title/text shrink correctly */
}

/* ---- One todo card ------------------------------------------------------------------------------ */
.platform-todo-card__body {
    margin: 0;
    /* Take the slack so the actions row sits at the bottom of an unevenly-filled card. */
    flex: 1 1 auto;
}

/* The heading holds the title alone (the source badge lives in the pinned bottom bar, M-161), so its position
   never shifts with the badge; it keeps the small gap down to the note/meta below. */
.platform-todo-card__heading {
    margin: 0 0 var(--platform-space-xs, 0.25rem);
}

/* Keep every card compact regardless of title length: clamp the title to two lines with an ellipsis so a
   long title can't stretch one card taller than its neighbours (the full text stays available via the
   title="" tooltip on the heading). overflow-wrap guards a single very long unbroken word. */
.platform-todo-card__title {
    margin: 0;
    font-size: var(--platform-font-size-md, 1rem);
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Same compact-card guard for the note: clamp to three lines with an ellipsis. */
.platform-todo-card__text {
    margin: 0 0 var(--platform-space-xs, 0.25rem);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* The meta line carries the priority, due date and created date as inline chips separated by a gap. */
.platform-todo-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--platform-space-sm, 0.5rem);
    margin: 0;
}

/* The pinned bottom bar: source (or terminal-state) badge on the left, action icons on the right, always at
   the same height at the card's bottom. `.platform-todo-card__body` above takes the slack (flex:1) so this bar
   sits on the bottom line regardless of the title length or whether the card has a description. */
.platform-todo-card__footer {
    display: flex;
    flex-wrap: wrap;   /* let the actions group drop to its own line when the card is too narrow for one row */
    align-items: center;
    justify-content: space-between;   /* badge left, icons right */
    gap: var(--platform-space-sm, 0.5rem);
    margin-top: var(--platform-space-md, 0.75rem);   /* breathing room above the bar */
}

/* The action row: the deep-link + Edit/Delete + Done/Dismiss controls. Lives on the right of the footer. On a
   card too narrow to hold badge + icons on one line, the whole group wraps to the line below the badge (never
   crushed to 1-icon-wide) thanks to flex-shrink:0; its own flex-wrap only kicks in if even a full card line
   can't hold all icons. */
.platform-todo-card__actions {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;   /* keep the icons a tidy horizontal group instead of being squeezed into a vertical stack */
    justify-content: flex-end;
    gap: var(--platform-space-sm, 0.5rem);
}

/* ---- Incoming-highlight variant (M-175) -------------------------------------------------------- */
/* When the user clicks a homepage "Top todos" card and lands on the inbox, the todo-highlight controller
   adds this modifier to that one card so it is instantly spottable (then clears it on the next click / does
   not re-apply on reload). A token-driven accent ring + an accent tint — the same "look at me" cue vocabulary
   as the M-164 group-tree drop cues — so it reads clearly in BOTH light and dark without a single hardcoded
   colour. The ring is drawn with box-shadow so it never shifts layout.

   The highlighted card keeps the ORDINARY card background — the opaque `--platform-color-surface` every other
   card on the page uses, inherited straight from `.platform-card`, which is why this rule sets no background at
   all. It used to tint the surface with `color-mix(… , transparent)`, and mixing with `transparent` yields a
   SEMI-TRANSPARENT colour: the page background (a photo, in most themes) showed straight through the one card
   the user was meant to be looking at, while every card around it stayed opaque — the highlight read as a hole
   in the list. Don't reintroduce a tint here: the ring alone is the cue, and it cannot go see-through. Only the
   "recently closed" cards are meant to look faded (below). */
.platform-todo-card--highlighted {
    border-color: var(--platform-color-accent);
    box-shadow: 0 0 0 2px var(--platform-color-accent);
}

/* ---- The footer's badge group ------------------------------------------------------------------ */
/* The bottom bar's left-hand slot can hold more than one badge (the source marker + an Overdue marker), so
   they travel as ONE group: the footer's space-between then keeps reading as "badges left, actions right"
   instead of spreading loose badges across the whole bar. Wraps to a second line on a narrow card. */
.platform-todo-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--platform-space-xs, 0.25rem);
}

/* ---- Faded "recently closed" variant (M-154) --------------------------------------------------- */
/* Fade the closed cards so they read as "done" — theme-aware via the muted-surface token (flips with
   `data-theme`, so it never becomes a white haze on dark), plus a light opacity for Dude's "~75%" feel.
   The Reactivate icon stays legible/clickable at 0.75 in both light and dark. */
.platform-todo-list--closed .platform-todo-card {
    background: var(--platform-color-surface-muted, #ecf0f1);
    opacity: 0.75;
}