/* Cosa Cena v2 — Manage Friends screen (Dinner Circle, Flow D: 1h) */

.manage-friends-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manage-friends-row {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(46,31,18,0.06);
  padding: 12px 14px;
}

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

/* 24px here -- "feed and list rows" per the design's avatar spec, not the
   32px friend-week.js's header hero uses. Overrides .friend-week-avatar's
   own size rather than duplicating its other properties. */
.manage-friends-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

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

/* ── Meta (Friends 4b, revised same session) -- inline on the name row,
   not a second line below it (the two-line version made cards noticeably
   taller than needed for one short fact, direct UX feedback). Doubles as
   the tap target for a COOKING THIS WEEK row (--link modifier); a QUIET
   THIS WEEK row's plain <span> version is inert, same non-tappable
   behavior the old NOTHING PLANNED text had. The trailing chevron
   (added in the same feedback pass) is the actual "this is tappable"
   signal -- color alone wasn't enough on its own. */
.manage-friends-meta {
  flex-shrink: 1;
  min-width: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manage-friends-meta--link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(182,77,50,0.9);
  -webkit-tap-highlight-color: transparent;
}

.manage-friends-meta--link:active {
  opacity: 0.7;
}

/* Dimmed card, no shadow -- QUIET THIS WEEK's own treatment (spec's exact
   words), so a quiet friend visually recedes against a cooking one
   without needing a second read of the meta line to tell them apart. */
.manage-friends-row--quiet {
  background: #F1EADE;
  box-shadow: none;
}

/* Requests and Sent rows still use these two (Accept/Decline, Cancel
   request) -- only the FRIENDS section's own actions row was removed
   (compact single-line redesign, direct user request, Chat 146). */
.manage-friends-row-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

/* README.md's "96px on a person row" pill-width spec -- the same
   Requested pill 4a's non-friend cards use (.pill/.pill-toggle-on,
   friend-cards.css), just narrower here to match this row's own
   proportions. */
.manage-friends-requested-pill {
  min-width: 96px;
}

/* One-line friend row: avatar + name + status/link + kebab. Replaces the
   old second action row (Mute + Remove friend pills, ~140px per card) --
   both actions now live behind the kebab's row-actions sheet, reusing
   shared.css's .sheet-opts/.opt (the same "list of tappable options in a
   sheet" pattern the sentence builder's own pickers already use), not a
   new component. Chat 146, direct user report + confirmed mockup. */
.manage-friends-kebab {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--brown-light);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-right: -10px; /* visually align the icon to the card's own edge without shrinking the 44px tap target */
}

.manage-friends-kebab:active {
  opacity: 0.6;
}

/* Shown next to the name when a friend is muted -- the only visual cue
   for mute state now that the Mute/Unmute pill moved into the sheet
   (previously the inline pill's own "Muted" label + filled style was that
   cue). */
.manage-friends-muted-tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}

/* Row-actions sheet: reuses .sheet-head/.sheet-title (friend's name, same
   role as "On the table in..." on Home's own sheets) and .sheet-opts/.opt
   (Mute or Unmute). .opt-danger is this screen's own modifier -- same
   color pair as .manage-friends-confirm-remove/-block below, so Remove
   friend reads consistently whether it's reached from the row menu or (for
   Requests/Sent, unchanged) directly. */
.opt-danger {
  color: #8A2020;
}

.opt-danger:active {
  background: #FCF0F0;
}

/* ── Remove-friend confirm sheet ──────────────────────────────────────── */

.manage-friends-confirm-body {
  padding: 4px 20px max(env(safe-area-inset-bottom), 20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manage-friends-confirm-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--brown);
  text-align: center;
  margin: 0 0 6px;
}

.manage-friends-confirm-btn {
  width: 100%;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  padding: 14px;
  height: 48px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Destructive pill's color pair (checkpoint 3's audit: near-match reuse of
   .hdr-text-btn-danger's colors, this feature's own .4 border alpha per the
   design bundle rather than the existing header button's .5 -- see that
   audit's own note on why the two shouldn't be silently unified). */
.manage-friends-confirm-remove,
.manage-friends-confirm-block {
  color: #8A2020;
  background: var(--white);
  border: 1.5px solid rgba(138,32,32,0.4);
}

.manage-friends-confirm-remove:active,
.manage-friends-confirm-block:active {
  background: #FCF0F0;
}

.manage-friends-confirm-cancel {
  color: var(--brown-mid);
  background: none;
  border: none;
}