/* ============================================================
   Vaxa Idea Flow, Floating card
   Visual spec: docs/frontend-build-brief.md section 3B, node 177:2931.
   Behaviour: R-CARD-1 to R-CARD-16 in functionality-v3.md.

   Every value below is cited to its source in the end-of-step list, per
   CLAUDE.md "Design values: follow, never create". 1B's named spacing
   and radius scale (--space-xs/-sm/-md/-lg/-xl/-2xl, --radius-sm/-md/
   -lg/-xl/-pill) lives in css/tokens.css; used by name below.
   The 10px side padding on the shell has no 1B token, so it stays a
   literal, cited to 3B directly.

   Two sizes (3B, "Two sizes", updated 2026-09-16): desktop (`_dt`) is
   the default, built for launch. Mobile (`_m`) is the .card--m modifier
   below. They differ in exactly three values (card width, content
   width, title size), carried as two custom properties, --card-width
   and --card-content-width, scoped per size; everything else in this
   file is identical between sizes and untouched by the modifier.
   ============================================================ */

.card {
  --card-width: 240px; /* 3B "Two sizes": desktop (default) */
  --card-content-width: 218px; /* 3B "Two sizes": desktop (default) */
  position: relative;
  box-sizing: border-box;
  width: var(--card-width);
  min-height: 106px; /* 3B, "No description" shape, same both sizes */
  padding: var(--space-3) 10px var(--space-sm); /* 3B: 12 top, 10 sides (literal, no 1B token), 8 bottom */
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 3B: gap between content block and author */
  border-radius: var(--radius-lg); /* 3B */
  background: color-mix(in srgb, var(--scrim) 20%, transparent); /* 3B fill, default */
  border: 1px solid color-mix(in srgb, var(--text-on-dark) 22%, transparent); /* 3B border, priority off */
  /* 3B: outer shadow + two inset edges, same in every state (hover and
     priority never touch these, only fill and border do). Plain black
     values are literal, 3B gives no token for them. */
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 color-mix(in srgb, var(--text-on-dark) 18%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px); /* 3B */
  cursor: pointer; /* 3B, "Not designed, filled in": pointer over the card */
  transition: background 150ms; /* 3B: "Transition the fill... 150ms, per R-CARD-7" */
}

/* Mobile size, kept for the future mobile layout, not used on any page yet. */
.card--m {
  --card-width: 188px; /* 3B "Two sizes": mobile */
  --card-content-width: 166px; /* 3B "Two sizes": mobile */
}

/* R-CARD-9: hover lifts the fill only, never the border. .force-hover
   is a test-only hook (card-test.html) so a state that only exists on
   :hover can still be shown statically, alongside every other state,
   without duplicating these rules in the test page. */
.card:hover,
.card.force-hover {
  background: color-mix(in srgb, var(--scrim) 40%, transparent); /* 3B fill, hover */
}

.card[data-priority='true'] {
  border-color: var(--color-brand-accnet-B); /* 3B border, priority on */
}

.card-content {
  width: var(--card-content-width); /* 3B: fills the content width, both sizes */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* 3B */
}

/* R-CARD-2: height driven by the star, never the label, so priority
   and default cards of the same content shape stay the same height. */
.card-priority-row {
  width: var(--card-content-width); /* 3B: fills the content width, both sizes */
  max-width: 100%;
  height: 16px; /* 3B */
  display: flex;
  align-items: center;
  gap: var(--space-xs); /* 3B */
}

.card-star {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
}

.card-star svg {
  width: 100%;
  height: 100%;
}

/* R-CARD-7: on a default card at rest, the star sits at zero opacity,
   fading in on hover, opacity only, nothing reflows. Colours per 3B's
   three named variants (default/hover/selected). */
.card-star-outline {
  fill: var(--color-text-muted); /* 3B: default variant, #6b7f78 */
  opacity: 0;
  transition: opacity 150ms, fill 150ms;
}

.card-star-fill {
  fill: var(--color-brand-accnet-B); /* 3B: selected variant, #57cda8 */
  opacity: 0; /* only ever shown when priority is on */
}

.card:hover .card-star-outline,
.card.force-hover .card-star-outline {
  opacity: 1; /* 3B: priority off, card hovered, default variant at opacity 1 */
}

/* 3B: priority off, pointer on the star itself: hover variant colour.
   A real :hover, not force-hoverable, since it's a pointer-precision
   state the four test rows don't need to fake. */
.card-star:hover .card-star-outline {
  opacity: 1;
  fill: var(--color-brand-accnet-B); /* 3B: hover variant, #57cda8 */
}

/* 3B: priority on, both card states, selected variant, always visible,
   independent of hover. */
.card[data-priority='true'] .card-star-outline,
.card[data-priority='true'] .card-star-fill {
  opacity: 1;
  fill: var(--color-brand-accnet-B);
}

.card-priority-label {
  font-family: var(--type-priority-label-family); /* Geist Mono, tokens.css */
  font-size: var(--type-priority-label-size); /* 10px, tokens.css */
  font-weight: var(--type-priority-label-weight); /* 600, tokens.css */
  line-height: 1; /* 3B */
  letter-spacing: -0.2px; /* 3B tracking */
  text-transform: uppercase; /* 3B */
  color: var(--color-brand-accnet-B); /* 3B override, see file header */
}

/* R-CARD-11/R-CARD-13: clamp by line box, not character count. Figma
   draws a second text node 4px below the first; built as one clamped
   element instead, per 3B's explicit instruction not to add that 4px. */
.card-title {
  margin: 0;
  width: var(--card-content-width); /* 3B "Conflicts" #4: the 135px box is gone, fills the content width */
  max-width: 100%;
  font-family: var(--type-card-title-family); /* Outfit, tokens.css */
  font-size: var(--type-card-title-size); /* 20px desktop, tokens.css */
  font-weight: var(--type-card-title-weight); /* 600, tokens.css */
  line-height: 1.2; /* 3B */
  letter-spacing: 0; /* 3B */
  color: var(--color-text-warm); /* 3B */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card--m .card-title {
  font-size: var(--type-card-title-size-mobile); /* 3B "Two sizes": 16px mobile, tokens.css */
}

/* R-CARD-4/R-CARD-12: present only when populated (removed from the DOM
   entirely by floating-card.js, not hidden here), clamped to 2 lines. */
.card-description {
  margin: 0;
  width: var(--card-content-width); /* 3B: fills the content width, both sizes */
  max-width: 100%;
  font-family: var(--font-geist); /* Geist Regular, tokens.css font stack */
  font-size: 12px; /* 3B, no dedicated token for this role */
  font-weight: 400; /* 3B: Geist Regular */
  line-height: 1.2; /* 3B */
  letter-spacing: -0.12px; /* 3B */
  color: var(--card-description); /* 3B, tokens.css */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* R-CARD-16: never truncated. No white-space/overflow/ellipsis here on
   purpose, it must wrap rather than clip if it's ever long. */
.card-author {
  margin: 0;
  width: var(--card-content-width); /* 3B: "Full width", fills the content width, both sizes */
  max-width: 100%;
  font-family: var(--type-meta-family); /* Geist Mono, tokens.css */
  font-weight: var(--type-meta-weight); /* 400, tokens.css */
  font-size: 10px; /* 3B override: section 2's Meta is 11, card uses 10 */
  line-height: 15px; /* 3B */
  letter-spacing: 0.6px; /* 3B */
  text-transform: uppercase; /* 3B */
  color: var(--text-on-dark); /* 3B */
}