/* Cosa Cena v2 — Friend's Week screen (Dinner Circle, Flow B: 1d/1l) */

.friend-week-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--sand);
}

/* 44px, not 32px (Chat 111 bug audit) -- was below skill-design-system.md's
   tap-target minimum. Shared by manage-friends.js's own back button too. */
.friend-week-back {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.friend-week-back:active {
  opacity: 0.7;
}

.friend-week-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.friend-week-context {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.friend-week-title {
  font-family: 'Lora', serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--brown);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-week-title-accent {
  color: var(--teal);
  font-style: italic;
}

.friend-week-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 -- also
                         covers .manage-friends-avatar, which only overrides
                         size/font on top of this rule, not this property */
}

.friend-week-body {
  /* Bottom padding was a flat 24px -- nowhere near enough to clear the
     fixed tab bar (both this screen and manage-friends.js, which shares
     this class, keep the tab bar visible per §3.9). Matches
     .tab-bar-spacer's own calc exactly rather than duplicating a spacer
     element, since this class already owns the content area's padding. */
  padding: 12px 20px calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + 24px);
}

/* ── Ask row (Add friend / Copy this week) ───────────────────────────── */

.friend-week-ask {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.friend-week-ask-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--brown-light);
  margin: 0;
}

.friend-week-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;
}

.friend-week-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.friend-week-btn-primary {
  color: var(--white);
  background: var(--terracotta);
  border: none;
}

.friend-week-btn-primary:active {
  opacity: 0.85;
}

.friend-week-btn-secondary {
  color: rgba(182, 77, 50, 0.9);
  background: var(--white);
  border: 1.5px solid var(--terracotta);
}

.friend-week-btn-secondary:active {
  background: var(--terracotta-pale);
}

/* ── Day rows ─────────────────────────────────────────────────────────── */

.friend-week-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.friend-week-row {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(46,31,18,0.06);
  display: flex;
  align-items: stretch;
}

.friend-week-row-body {
  flex: 1;
  min-width: 0;
  padding: 11px 12px 11px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Side by side, not stacked (Chat 111, confirmed with the user via a real
   mockup) -- this row has no description line, so it's noticeably shorter
   than a full card, and a vertical icon stack would make every row taller
   than it needs to be. Reuses .card-heart/.card-plan from shared.css
   unchanged; only their container differs from a full card's. */
.friend-week-row-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.friend-week-row-day {
  width: 28px;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.friend-week-row-name {
  font-family: 'Lora', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--brown);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-week-row-name-inert {
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
}

.friend-week-row-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.friend-week-empty {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  padding: 24px 12px;
}