/* THE FOOT (Steven 2026-10-14, the dark Gathering side on the deck: "the
   Details should have a chevron. Then rather than tap card, it should say
   tap to flip, and the share should be in the bottom right corner").

   templates/cards/_card.html _foot, the one foot every face of the one card
   draws, links this file itself, so every page that draws a card reads it
   (outside the CSS bundles, the way agent-side.css rides the dark side).
   Design tokens only.

   - Details keeps its chevron and "Tap to flip" its arrows, on every card,
     with the fail dot on the page or not: the share has left the row, so
     the row keeps one line without dropping them (card.css hid both icons
     while the share shared the row beside the dot);
   - the share sits ON ITS OWN in the card's bottom right corner: absolute
     at the foot's right edge, the row's words centred clear of it. On a
     page that carries the fail dot it stays left of the dot's room
     (--tb-dot-room, card.css): a panel's foot already stops short of that
     room, and a face's own foot (the dark side as the front) puts its share
     at the room's edge. */
.tb-card .tb-card__foot { position: relative; }
.tb-card .tb-card__foot:has(> .tb-card__share--foot) {
    gap: var(--space-1);
    padding-left: calc(var(--size-8) + var(--space-1));
    padding-right: calc(var(--size-8) + var(--space-1));
}
.tb-card .tb-card__foot:has(> .tb-card__share--foot) > :is(.tb-card__details, .tb-card__fliptap) {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
}
.tb-card .tb-card__foot > .tb-card__share--foot {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
/* a face's own foot runs edge to edge: the share keeps the card's inset */
.tb-card .tb-card__face > .tb-card__foot:has(> .tb-card__share--foot) {
    padding-left: calc(var(--size-8) + var(--space-4));
    padding-right: calc(var(--size-8) + var(--space-4));
}
.tb-card .tb-card__face > .tb-card__foot > .tb-card__share--foot { right: var(--space-3); }
/* the fail dot on the page: the row is short of the dot's room, so the
   words take the room left of the share (a panel's foot already stops
   short of the dot, card.css; a face's own foot puts its share at the
   room's edge) */
body:has(.fail-dot) .tb-card--full .tb-card__panel > .tb-card__foot:has(> .tb-card__share--foot) { padding-left: 0; }
body:has(.fail-dot) .tb-card--full .tb-card__face > .tb-card__foot:has(> .tb-card__share--foot) {
    padding-left: var(--space-3);
    padding-right: calc(var(--tb-dot-room) + var(--size-8) + var(--space-1));
}
body:has(.fail-dot) .tb-card--full .tb-card__face > .tb-card__foot > .tb-card__share--foot { right: var(--tb-dot-room); }
body:has(.fail-dot) .tb-card--full .tb-card__foot:has(.tb-card__share--foot) :is(.tb-card__details, .tb-card__fliptap) > iconify-icon {
    display: inline-block;
}
/* a narrow phone (375 and under): the row's words a step smaller and
   tighter, so "Refined plan · Tap to flip" still clears the share */
@media (max-width: 380px) {
    .tb-card .tb-card__foot:has(> .tb-card__share--foot) { font-size: var(--text-sm); }
    .tb-card .tb-card__foot:has(> .tb-card__share--foot) > :is(.tb-card__details, .tb-card__fliptap) {
        gap: var(--space-1);
        padding-left: 0;
        padding-right: 0;
    }
}