/* ============ GUESTS PAGE (guest world map) ============
   Migrated 2026-08-24 from the intermediate site's guests-map.html, rebuilt on this design
   system. Redesigned same day per Nico: green glowing hero title, .stat-row for the numbers,
   FLAT full-width map straight on the page ground (no card, no graticule, no Antarctica),
   pop-up tooltip that scales from the cursor, and the by-country section as full-width
   ACCORDIONS (triangle + name + lime count pill; guest cards inside, 5 per row).
   Page: guests.html (generated by generator/generate_guests_page.py). */

/* ---- map ---- */
.gm-map-zone{position:relative;}
#gm-map{display:block;width:100%;height:auto;}
#gm-map .gm-country{stroke:#152234;stroke-width:.5;transition:filter var(--dur) var(--ease);}
#gm-map .gm-country.has-guests{cursor:pointer;}
#gm-map .gm-country.has-guests:hover{filter:brightness(1.3);}
#gm-map .gm-country.active{stroke:var(--itg-lime-dark);stroke-width:1.4;}

/* the hover pop-up: scales up FROM THE CURSOR (transform-origin is set by JS to the corner
   anchored at the mouse) and scales back down on leave */
.gm-tooltip{position:absolute;background:var(--itg-surface);border:1px solid var(--itg-lime-dark);color:var(--fg);padding:10px 14px;border-radius:8px;font-size:var(--t-small);pointer-events:none;max-width:250px;z-index:10;
  opacity:0;transform:scale(.55);transform-origin:top left;
  transition:transform .18s var(--ease),opacity .14s ease;}
.gm-tooltip.show{opacity:1;transform:scale(1);}
.gm-tooltip .tt-country{font-weight:var(--w-strong);color:var(--accent-text);}
.gm-tooltip .tt-count{color:var(--fg-muted);font-size:var(--t-label);}
.gm-tooltip .tt-names{color:var(--fg-muted);font-size:var(--t-meta);margin-top:4px;line-height:1.45;}

.gm-legend{display:flex;align-items:center;gap:7px;font-size:var(--t-meta);color:var(--fg-muted);margin-top:10px;}
.gm-legend .boxes{display:flex;gap:2px;}
.gm-legend .box{width:18px;height:11px;border-radius:2px;}

/* the "click a country" hint reads as an eyebrow: italic cyan */
.gm-hint{font-family:var(--font);font-weight:var(--w-strong);font-style:italic;font-size:var(--t-eyebrow);color:var(--itg-cyan);margin-top:18px;}

/* ---- country accordions (light zone, full 1280 width, stacked) ---- */
.gm-acc-list{display:flex;flex-direction:column;gap:16px;margin-top:8px;}
.gm-acc{background:#fff;border:1px solid rgba(15,53,87,.14);border-radius:var(--r-card);overflow:hidden;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease);}
.gm-acc:hover{border-color:var(--itg-lime-light);}
.gm-acc.flash{border-color:var(--itg-lime-light);box-shadow:0 0 0 3px rgba(142,216,0,.35);}
.gm-acc-head{display:flex;align-items:center;gap:16px;width:100%;background:none;border:0;cursor:pointer;padding:20px 26px;font-family:var(--font);text-align:left;
             transition:background-color var(--dur) var(--ease);}
.gm-acc-tri{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid var(--itg-near-black);flex-shrink:0;transition:transform var(--dur) var(--ease),border-left-color var(--dur) var(--ease);}
.gm-acc.open .gm-acc-tri{transform:rotate(90deg);}
.gm-acc-name{font-size:var(--t-term);font-weight:var(--w-strong);color:var(--itg-near-black);flex:1;transition:color var(--dur) var(--ease);}
.gm-acc-pill{font-size:var(--t-label);font-weight:var(--w-strong);color:var(--itg-near-black);background:var(--itg-lime-light);border-radius:var(--r-badge);padding:4px 14px;white-space:nowrap;
             transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);}

/* ---- HOVER: same full inversion as the topics rows (Nico, 2026-08-25) -------------------
   The header fills lime, its type and triangle go to ink, and the count pill flips to an ink
   chip with a lime label. Identical gesture to .tp-row and to the episode pages' Connect
   pills, so "clickable" reads the same everywhere on the site.

   THE WHOLE CARD FILLS, INCLUDING BEHIND THE EXPANDED GUEST GRID. This was first built scoped
   to .gm-acc-head only, reasoning that filling the card would wash lime behind the guest cards
   while open. Nico's call was the opposite: "cuando se abre todo el badge debe estar verde
   inclusive detras de las card grises".

   That forces one companion change. The guest cards carry `background:rgba(15,53,87,.035)`, a
   3.5% wash tuned to read as a faint card on WHITE; over lime it is all but invisible and the
   grid dissolves into the fill. On hover they take an OPAQUE near-white instead, so they stay
   the grey cards Nico is describing, now floating on green.

   AND IT STAYS ON WHEN OPEN. This deliberately reverses an earlier same-day rule that
   neutralized the hover once expanded (`.gm-acc.open:hover{border-color:...}`), on the theory
   that a lime border on an open card read as "still active". Nico's call after seeing the fill
   version: "al abrirse el toggle sigue verde en hover". The fill makes the distinction the old
   rule was worried about, because the open state is now carried by the rotated triangle and the
   revealed body rather than by the border alone. The old rule is deleted, not commented out.

   The two limes differ for the reason documented in topics.css: the fill is --accent (#8ed800,
   the light-band lime, since this zone is .itg-light) and the pill's label is --itg-lime-dark
   (#96ff00), because the pill has become a dark ground. */
.gm-acc:hover{background:var(--accent);border-color:var(--accent);}
.gm-acc:hover .gm-acc-name{color:var(--itg-ink);}
.gm-acc:hover .gm-acc-tri{border-left-color:var(--itg-ink);}
.gm-acc:hover .gm-acc-pill{background:var(--itg-ink);color:var(--itg-lime-dark);}
.gm-acc:hover .gm-guest{background:#f2f5f7;border-color:rgba(15,53,87,.20);}
/* ...but a guest card's OWN blue hover must still win inside the lime accordion.
   `.gm-acc:hover .gm-guest` is (0,3,0) and the base `a.gm-guest:hover` is only (0,2,1), so the
   fill rule above was silently beating it and the blue border disappeared once the accordion
   lit up (Nico: "cuando hago hover en las cards pequenas debe seguir poniendose el borde azul
   q tenia antes"). This selector is (0,4,1), so it wins.
   The fill is an OPAQUE #e4ecf2 rather than the base rule's rgba(6,97,170,.06): that 6% wash was
   computed against a white band, and left translucent here it would let the lime show through.
   #e4ecf2 is that same blue wash pre-composited over the card's new #f2f5f7. */
.gm-acc:hover a.gm-guest:hover{border-color:var(--itg-blue);background:#e4ecf2;}

/* open/close animation: the 0fr -> 1fr grid row trick, no height measuring needed */
.gm-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease);}
.gm-acc.open .gm-acc-body{grid-template-rows:1fr;}
.gm-acc-inner{overflow:hidden;min-height:0;}
.gm-guests{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:2px 26px 24px;}

/* guest cards inside an accordion */
.gm-guest{display:block;background:rgba(15,53,87,.035);border:1px solid rgba(15,53,87,.12);border-radius:10px;padding:10px 14px;text-decoration:none;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
/* blue hover, not lime (Nico, 2026-08-25) - matches .g-eps and the link-accent convention:
   lime is reserved for the count pills and the map, blue is the "this is a link" signal */
a.gm-guest:hover{border-color:var(--itg-blue);background:rgba(6,97,170,.06);}
.gm-guest .g-name{font-size:var(--t-ui);font-weight:var(--w-strong);color:var(--itg-near-black);line-height:1.3;}
.gm-guest .g-sub{font-size:var(--t-meta);color:rgba(27,36,42,.62);margin-top:2px;line-height:1.35;}
.gm-guest .g-eps{color:var(--itg-blue);font-weight:var(--w-strong);}

@media (max-width:1000px){
  .gm-guests{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:720px){
  .gm-guests{grid-template-columns:minmax(0,1fr);padding:2px 18px 18px;}
  .gm-acc-head{padding:16px 18px;}
}