/* Cosa Cena v2 — Dinner Circle person card (Friends 4a — feed grouped by
   person), spec-friends-4a-build.md.

   Reuses .card / .card-wrap / .card-main / .swatch / .card-body /
   .card-name / .card-meta / .card-actions / .card-heart / .card-plan from
   shared.css unchanged, exactly like the recipe-keyed card this replaces
   did. Below is what's genuinely new: the person-card header/rows anatomy,
   the overlap-card cooks row, and the two pill variants still used here
   (Add friend / Requested). */

/* ── Person card header ──────────────────────────────────────────────── */

/* Person card -- overrides the inherited .card:active scale-down (shared.css)
   entirely. Direct user report: tapping the header (avatar/name, which has
   no action) still showed the whole-card press animation, since .card:active
   applies to the entire element regardless of which child was actually
   pressed -- a false affordance, implying an action that doesn't exist.
   Dinner rows already have their own, separate press feedback
   (.person-card-row:active below, a background highlight), so removing the
   card-level scale here loses nothing real: a row tap still visibly
   responds, a header tap now correctly shows nothing, matching that it
   does nothing. */
.person-card:active {
  transform: none;
}

.person-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 10px 14px;
}

/* 32px -- one size up from the old single-row card's 24px avatar, since
   this is now the card's own primary identity element, not a small
   secondary row. Friends render their assigned palette color (set inline
   by friend-cards.js from avatarColor -- README.md's 4-color rotation);
   this rule is the shared shape/type, not the fill. */
.person-card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  object-fit: cover; /* only affects the <img> (real photo) case */
}

/* Non-friend: neutral chip, never the palette colors -- those are reserved
   for people you've actually added (README.md's avatar spec). */
.person-card-avatar--non-friend {
  background: var(--sand-border);
  color: var(--brown-mid);
}

.person-card-name {
  font-family: 'Lora', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--brown);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Same teal-dark-on-teal-pale pairing already used elsewhere in this app
   for a "ready/tonight" signal (skill-design-system.md's Badges table) --
   reused deliberately, not a new color pair. */
.person-card-tonight-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: var(--teal-pale);
  border-radius: 8px;
  padding: 3px 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.person-card-spacer {
  flex: 1;
  min-width: 4px;
}

/* README.md's "Secondary pill" geometry, 96px width variant ("on a person
   row"), reusing the shared .pill/.pill-secondary/.pill-toggle-on base
   below rather than a one-off button. */
.person-card-add-friend {
  flex-shrink: 0;
  min-width: 96px;
}

/* ── Dinner rows -- "the card is the week" (README.md) ───────────────── */

.person-card-rows {
  display: flex;
  flex-direction: column;
}

.person-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-top: 1px solid var(--sand);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.person-card-row:active {
  background: var(--sand);
}

/* 30px, matching Friends-by-person_dc.html's own real value exactly, not
   an approximation -- also what makes .person-card-row-text (below) align
   the time line under the dish name rather than under this column,
   without a magic-number offset. */
.person-card-row-day {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  width: 30px;
  flex-shrink: 0;
}

/* var(--teal), not var(--teal-dark) -- direct user report: the darker
   value read as too dark a blue against the card background. --teal is
   the same existing token already used for this same "tonight" concept
   elsewhere (the COOKING TONIGHT chip's background, the day-row's own
   teal identity generally); no new color introduced. As of this session,
   this is the ONLY signal that a row is tonight -- the day text itself
   stays the real day (direct UX decision: "TONIGHT" no longer replaces
   it), so this color plus the row tint below are what carry it now. */
.person-card-row-day.is-tonight {
  color: var(--teal);
}

/* Direct UX feedback: every dinner row read with identical visual weight,
   burying the one fact that's actually most relevant to "what's for
   dinner" -- which dish is tonight. Same --teal-pale tint the header's own
   COOKING TONIGHT chip already uses, applied to the whole row instead of
   just the day label, so the row itself carries the hierarchy rather than
   one small piece of colored text. No new color introduced. */
.person-card-row--tonight {
  background: var(--teal-pale);
}

.person-card-row--tonight:active {
  background: var(--sand);
}

.person-card-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.person-card-row-name {
  font-family: 'Lora', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--brown);
  min-width: 0;
  /* Reverted to single-line truncation, direct UX decision this session --
     the wrap-when-needed version (previous chat) is out; back to the
     original reference's own nowrap/ellipsis treatment. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* var(--teal), matching Home's own .card-meta-time exactly (shared.css) --
   direct user request. Now the only thing in this line (protein/effort
   dropped in the same pass), so the whole line takes the color, not just
   a "time" segment split out of a longer string. */
.person-card-row-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--teal);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.person-card-row-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── COOKING THE SAME THING (spec §2) ─────────────────────────────────── */
/* Matches Friends-by-person_dc.html's actual markup: one row (swatch +
   content), content is a single column so the heart/plan buttons -- row-
   level siblings of that column, not nested inside it -- center against
   all three lines (name, meta, avatars+names) together. The original
   version of this card reused .card-main/.card-body/.card-actions (the
   single-line recipe-card component), which only ever centered its icons
   against 2 lines, leaving the 3rd line (avatars+names) outside that
   calculation entirely -- confirmed against a real screenshot showing the
   icons floating near the meta line instead of anchored to the whole card. */

.overlap-card {
  display: flex;
  align-items: stretch;
  /* Faint teal-tinted outline instead of the standard card's neutral one --
     matches the reference file's own box-shadow exactly, reinforcing this
     section as a different kind of thing from the person cards below it. */
  box-shadow: 0 1px 4px rgba(46,31,18,0.07), 0 0 0 1px rgba(62,113,131,0.18);
}

/* 4px specifically for this card (the reference's own value) -- distinct
   from the 5px .swatch used elsewhere and the 4px person-card row swatch,
   which is a coincidence of README.md's "4-5px" range, not the same rule. */
.overlap-swatch {
  width: 4px;
  flex-shrink: 0;
  background: var(--teal);
}

.overlap-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
}

.overlap-text-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.overlap-name {
  font-family: 'Lora', serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--brown);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* One uniform muted color, no teal time-prefix highlight -- unlike the
   single-line recipe card's .card-meta-time, the reference never
   distinguishes the time segment by color on this card. */
.overlap-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.overlap-cooks-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.overlap-avatar-stack {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.overlap-avatar-stack-item {
  display: block;
  margin-left: -7px;
}

.overlap-avatar-stack-item:first-child {
  margin-left: 0;
}

/* 22px per README.md's overlap-section avatar spec (smaller than the
   32px person-card header avatar -- this is a supporting signal, not the
   card's own primary identity). */
.overlap-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--white);
  box-sizing: content-box;
  flex-shrink: 0;
  object-fit: cover;
}

.overlap-avatar--non-friend {
  background: var(--sand-border);
  color: var(--brown-mid);
}

.overlap-cook-names {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── Pills (Secondary / Toggle-on) ────────────────────────────────────── */
/* 44px minimum tap target (skill-design-system.md), same rule every other
   pill in this app already follows. */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  min-width: 110px;
  padding: 7px 12px;
  border-radius: 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s, border-color 0.1s;
  flex-shrink: 0;
}

.pill:active {
  opacity: 0.85;
}

.pill:disabled {
  opacity: 0.6;
  pointer-events: none;
}

.pill-secondary {
  background: transparent;
  border: 1.5px solid var(--sand-mid);
  color: var(--brown);
}

/* "A filled neutral pill always means this state is currently true"
   (design's own words) -- Requested here, Mute/Requested elsewhere once
   4b (the roster) is built. */
.pill-toggle-on {
  background: var(--sand);
  border: none;
  color: var(--brown-mid);
}

/* ── Local toast (add-to-plan-full message, invite-acceptance landing) ── */

.friend-card-toast {
  position: fixed;
  bottom: calc(var(--tab-bar-height, 60px) + 16px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  max-width: 380px;
  width: calc(100% - 40px);
  background: var(--brown);
  color: var(--white);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  padding: 12px 16px;
  border-radius: 12px;
  text-align: center;
  z-index: 250;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.friend-card-toast.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}