/* Cosa Cena v2 — Friends landing screen (Dinner Circle, Flow A) */

.friends-body {
  padding: 16px 16px 24px;
}

.friends-intro-wrap {
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Was entirely missing -- the screen only ever rendered the sub-line below,
   with no headline above it. */
.friends-intro-headline {
  font-family: 'Lora', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--brown);
  line-height: 1.3;
  margin: 0;
}

.friends-intro {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: var(--brown-mid);
  line-height: 1.55;
  margin: 0;
}

.friends-signin-link {
  color: var(--terracotta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Eyebrow group headers -- exact geometry from the design's own
   rendered markup (Friends.dc.html) ─────────────────────────────────── */
.friends-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 0;
  margin: 24px 0 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* Spacing/density pass: a label with no preceding section to separate
   from (the first eyebrow after the header), or whose predecessor
   already carries its own bottom margin (.friends-intro-wrap's 16px) --
   the base 24px above is for a LATER eyebrow that comes after a fully-rendered
   section (cards and all), a real, different transition. Collapsing both
   to the same value would have fixed the reported "accidental" gap above
   FROM YOUR FRIENDS while quietly breaking the real separation before
   WHAT ELSE IS COOKING -- kept as two values, not one. */
.friends-eyebrow--first {
  margin-top: 4px;
}

/* Dinner Circle sharing-model transparency (Chat 126) -- permanent, not
   dismissible, unlike Plan's own sharing nudge. Sits right where someone
   would look if confused about who these dinners belong to, which a
   one-time toast can't offer once it's gone. */
.friends-community-subtext {
  margin: -4px 2px 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  color: var(--muted);
}

.friends-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sand-mid);
}

.friends-card-list {
  display: flex;
  flex-direction: column;
}

.friends-empty-group {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: var(--muted);
  padding: 12px 4px;
}

/* ── Request banner -- exact geometry from Friends.dc.html's own
   rendered component, not the looser prose description elsewhere in the
   same file (see friends.js's comment on why). ─────────────────────── */
.friends-request-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 2px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--sand);
}

.friends-request-banner-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.friends-request-banner-row + .friends-request-banner-row {
  gap: 8px;
}

.friends-request-avatar {
  width: 24px;
  height: 24px;
  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;
  flex-shrink: 0;
  object-fit: cover; /* only affects the <img> (real photo) case */
}

.friends-request-text {
  flex: 1;
  min-width: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: var(--brown);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* min-height changed from a flat 34px (Chat 111 bug audit) -- below
   skill-design-system.md's 44px minimum tap-target rule, same gap as
   friend-cards.css's own .pill fixed in the same pass. */
.pill-accept {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  background: var(--terracotta);
  border: none;
  border-radius: 20px;
  padding: 7px 12px;
  min-height: 44px;
  min-width: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.pill-accept:active {
  opacity: 0.85;
}

.pill-accept:disabled,
.text-btn-quiet:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Quiet text button -- Decline here, reused for 1h's link rows once
   Manage Friends (checkpoint 10) exists, and for Cancel request (Chat 111).
   min-height changed from 34px to 44px in the same Chat 111 bug audit that
   fixed .pill-accept and .pill above -- same underlying gap. */
.text-btn-quiet {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--brown-light);
  background: none;
  border: none;
  padding: 0 2px;
  min-height: 44px;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}

/* ── Invite-friend pill (v960, direct user request + confirmed mockup):
   text pill, terracotta-pale/terracotta, replaces the icon-only button
   below. Only rendered when signed in (see friends.js's mount()) --
   signed-out visitors see no invite affordance at all now, reversing the
   prior "present in every state, gate the tap" decision on purpose.

   SIZE HISTORY, worth keeping: this exact button's original Chat 111
   design mock also showed 38px. Whoever built it then deliberately
   overrode that to 44px specifically citing skill-design-system.md's D6
   tap-target rule (see the comment this one replaces, right below).
   v960 reverts to 38px again anyway -- a real, informed, explicitly
   confirmed decision after being flagged multiple times during the
   mockup process, not a repeat of the same mistake unknowingly. Flagging
   here for whoever reads this next, same as the comment before it tried
   to do. ──────────────────────────────────────────────────────────────── */
.friends-invite-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 20px;
  background: var(--terracotta-pale);
  color: var(--terracotta);
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.friends-invite-btn:active { background: var(--terracotta); color: var(--white); }

/* ── Feed invite prompt -- restored (direct user report; had been dropped
   during the Friends 4a rebuild with no call to remove it). Sits at the
   end of the friends section, before WHAT ELSE IS COOKING, only in the
   has-friends steady state -- the no-friends-yet state has its own
   separate intro copy (.friends-intro-wrap) and doesn't need this too. */
.friends-feed-invite-prompt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px 18px;
}

.friends-feed-invite-prompt-text {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--brown-light);
  line-height: 1.5;
  margin: 0;
}

/* Reuses .friends-invite-btn's exact geometry (the header's own Invite
   button) rather than a new button style -- "make that feel like a
   button" means matching the one real button this screen already has,
   not inventing a second button language. */
.friends-feed-invite-prompt-btn {
  align-self: flex-start;
}

/* ── Friend-count link (Friends 4a) -- a "N friends ›" navigational row
   above the content, NOT part of the header hero (direct user correction:
   the hero always shows "Your Dinner Circle," unconditionally -- this is a
   separate element entirely, moved here so it doesn't crowd out or replace
   that copy). Bridges to the existing Manage Friends screen until 4b (its
   own spec) replaces it -- see friends.js's own comment. */
.friends-count-link {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--sand);
  padding: 10px 2px;
  margin: 0 0 8px;
  min-height: 44px;
  cursor: pointer;
  text-align: left;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(182,77,50,0.9);
  -webkit-tap-highlight-color: transparent;
}

.friends-count-link:active {
  opacity: 0.7;
}

/* ── TRENDING DINNERS -- teal, not terracotta, so the section reads
   as a genuinely different kind of thing from the person cards below it
   (spec §2: "Teal left strip and hairline, teal section label"). ────── */
.friends-eyebrow--overlap {
  color: var(--teal-dark);
}

.friends-eyebrow--overlap::after {
  background: var(--teal);
  opacity: 0.35;
}

/* ── Load more people (Friends 4a) -- community-only pagination, full
   width to match the primary-full-width button geometry the rest of this
   design uses for a bottom-of-list action. ──────────────────────────── */
.friends-load-more {
  width: 100%;
  margin-top: 4px;
}

.friends-load-more:disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* ── Invite-acceptance landing highlight (spec §6) -- a brief accent ring
   on the friend's card after a fresh accept, ~1.5s then fades. Transition
   on box-shadow only, so this never fights the base .card box-shadow
   (shared.css) when the class is removed. */
.card-wrap.is-just-connected .card {
  box-shadow: 0 0 0 2px var(--terracotta), 0 1px 4px rgba(46,31,18,0.07);
  transition: box-shadow 0.3s ease;
}

/* ── Loading skeleton -- #EDE4D8, no spinner ─────────────────────────── */
.friends-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.friends-skeleton-card {
  height: 128px;
  border-radius: 12px;
  background: var(--sand);
}

/* ── Error state ──────────────────────────────────────────────────────── */
.friends-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 40px 20px;
}

.friends-error-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: var(--muted);
}

.friends-error-retry {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--terracotta);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 44px;
}