/*
 * Friends' two tabs, Amigos and Grupos (friends/_band): the same band with
 * its own colour and drawing for each (--tab: blue for friends, orange for
 * groups), the pills to switch, and the news as cards that take turns. Below,
 * the tab's content beside a card of what waits for an answer (requests or
 * invites). Amigos: the next birthdays and a row per friend. Grupos: a panel
 * per group with its secret friend's steps.
 */
.app {
  /* Each tab's colour. Ameixa's blue and orange are bright: toned down with
     its grey here (the white on the current pill stays as readable). Vinho's
     are already soft. */
  --friends-tint: var(--second); --groups-tint: var(--fourth);
  :root:not([data-theme="vinho"]) & {
    --friends-tint: color-mix(in srgb, var(--second) 60%, #6E7781); --groups-tint: color-mix(in srgb, var(--fourth) 60%, #6E7781);
  }
  .people-band.people-friends { --tab: var(--friends-tint); }
  .people-band.people-groups { --tab: var(--groups-tint); }
  /* The band's own colours (home.css reads them, keeping its default otherwise) */
  .people-band { --band-bg: color-mix(in srgb, var(--tab) 9%, var(--paper)); --band-line: color-mix(in srgb, var(--tab) 25%, var(--line)); }

  /* The pills: Amigos and Grupos */
  .people-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 18px; }
  .people-tabs a { display: inline-flex; gap: 6px; align-items: center; padding: 7px 15px; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--muted); text-decoration: none; }
  .people-tabs a:hover { color: var(--ink); text-decoration: none; }
  .people-tabs a small { font-size: 12px; padding: 0 7px; border-radius: 999px; background: var(--soft-bg); }
  .people-tabs a[aria-current="page"] { background: var(--tab); color: #FFFFFF; }
  .people-tabs a[aria-current="page"] small { background: rgba(255, 255, 255, .25); }

  /* The drawing beside the title */
  .people-band .title-row { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
  .people-band .title-row .hello { margin: 0; font-weight: 500; }
  .people-art { flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--tab) 16%, var(--paper)); }
  .people-art svg { width: 48px; height: 48px; }
  .people-art .a { fill: var(--tab); }
  .people-art .b { fill: color-mix(in srgb, var(--tab) 55%, var(--paper)); }
  .people-art .gift { fill: var(--ribbon); }
  .people-art .bow { fill: color-mix(in srgb, var(--ribbon) 70%, #000000); }

  /* Below the band: the tab's content and the card of what waits */
  .people-below { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
  .people-main { display: grid; gap: 22px; min-width: 0; }
  .people-main h2 { font-size: 22px; margin-bottom: 12px; }
  .people-side { position: sticky; top: 84px; }
  .side-card .title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .people-side .side-card .title-row h2 { font-size: 18px; }
  .side-card .title-row > a { white-space: nowrap; }
  .side-card .people li { grid-template-columns: 36px minmax(0, 1fr); }
  .side-card .people .btn-row { grid-column: 2; }

  /* Amigos: the next birthdays, then a row per friend */
  .birthday-pills { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 10px; overflow-x: auto; }
  .birthday-pills a { display: grid; grid-template-columns: 34px auto; gap: 0 10px; align-items: center; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; white-space: nowrap; }
  .birthday-pills a:hover { box-shadow: inset 0 0 0 1.5px var(--friends-tint); text-decoration: none; }
  .birthday-pills .avatar { width: 34px; height: 34px; grid-row: span 2; }
  .birthday-pills b { font-size: 14px; }
  .birthday-pills small { font-size: 12px; font-weight: 700; color: var(--muted); }
  .contacts { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
  .contact { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
  .contact:first-child { border-top: 0; }
  .contact .avatar { width: 44px; height: 44px; }
  .contact .name { font-weight: 800; font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
  .contact .detail { font-size: 14px; font-weight: 600; color: var(--muted); }
  .contact .btn-row { flex-wrap: nowrap; }

  /* Grupos: a panel per group, its secret friend's steps beside */
  .group-panels { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .group-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px 26px; align-items: center; padding: 20px 22px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
  .group-panel:not(:has(.draw-steps)) { grid-template-columns: minmax(0, 1fr); }
  .group-info { display: grid; gap: 10px; justify-items: start; min-width: 0; }
  .group-info h3 { font-size: 22px; }
  .group-info h3 a { color: var(--ink); }
  .group-info .faces { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
  .group-info .faces .avatar { margin-right: -14px; box-shadow: 0 0 0 2px var(--paper); }
  .group-info .faces .small { margin-left: 18px; }
  .draw-steps { display: grid; gap: 6px; min-width: 0; }
  .stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .stage { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--soft-bg); }
  .stage b { font-size: 14px; }
  .stage small { font-size: 12px; font-weight: 700; color: var(--muted); }
  .stage.done { background: color-mix(in srgb, var(--ok) 12%, var(--paper)); }
  .stage.now { background: color-mix(in srgb, var(--groups-tint) 12%, var(--paper)); box-shadow: inset 0 0 0 2px var(--groups-tint); }

  /* Adicionar amigo, in the modal: the page's cards without their frame */
  .modal .add-friend .grid2 { grid-template-columns: minmax(0, 1fr); }
  .flash-inline { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; background: color-mix(in srgb, var(--ok) 12%, var(--paper)); }
  .flash-inline.alert { background: color-mix(in srgb, var(--danger) 12%, var(--paper)); }
}

@media (max-width: 900px) {
  .app {
    .people-below { grid-template-columns: minmax(0, 1fr); }
    .people-side { position: static; order: -1; }
    .group-panel { grid-template-columns: minmax(0, 1fr); }
  }
}

@media (max-width: 600px) {
  .app {
    .people-tabs { display: flex; }
    .people-tabs a { flex: 1; justify-content: center; }
    .people-art { width: 48px; height: 48px; border-radius: 14px; }
    .people-art svg { width: 36px; height: 36px; }
    .contact { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
    .contact .avatar { grid-row: span 2; width: 40px; height: 40px; }
    .contact .detail:last-of-type { display: none; }
    .contact .btn-row { grid-column: 1 / -1; }
    .stage { padding: 8px; }
    .stage b { font-size: 13px; overflow-wrap: anywhere; }
  }
}