/* The public directory of zbory and the incident map (2026-10-26).
   Page-scoped classes (rc-dir-*), coloured through the --raidcall-* tokens so
   both looks and both themes follow; the hero keeps its own fire gradient. */

.rc-dir { --dir-green: 18 148 96; --dir-green-tint: 220 250 230; }
[data-theme="modern"] .rc-dir { --dir-green: 63 185 80; --dir-green-tint: 23 48 33; }

.rc-dir-card {
  background: rgb(var(--raidcall-surface));
  border: 1px solid rgb(var(--raidcall-border));
  border-radius: 1.25rem;
  box-shadow: var(--raidcall-shadow-sm);
}
.rc-dir-muted { color: rgb(var(--raidcall-muted)); }
.rc-dir-h2 { font-weight: 800; font-size: 1.125rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.rc-dir-section { margin-top: 2rem; }
.rc-dir-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.rc-dir-link { color: rgb(var(--raidcall-fire)); font-weight: 700; font-size: .875rem; white-space: nowrap; }
.rc-dir-link:hover { text-decoration: underline; }

/* ---- hero ------------------------------------------------------------------ */
.rc-dir-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  padding: 1.75rem 1.5rem 1.5rem;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 166, 77, .55) 0%, rgba(255, 166, 77, 0) 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(80, 0, 10, .55) 0%, rgba(80, 0, 10, 0) 60%),
    linear-gradient(135deg, #C62828 0%, #8E1B1B 100%);
  box-shadow: 0 18px 40px -18px rgba(142, 27, 27, .6);
}
.rc-dir-hero::after {
  /* a slow heat shimmer over the gradient - stops for reduced motion */
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(closest-side, rgba(255, 210, 120, .22), rgba(255, 210, 120, 0));
  animation: rc-dir-glow 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes rc-dir-glow { from { transform: translate(-18%, 10%); } to { transform: translate(22%, -12%); } }
.rc-dir-hero > * { position: relative; z-index: 1; }
.rc-dir-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255, 255, 255, .16); padding: .3rem .7rem; border-radius: 999px;
}
.rc-dir-hero h1 { font-size: 2rem; line-height: 1.1; font-weight: 900; letter-spacing: -.02em; margin: .75rem 0 .35rem; color: #fff; }
.rc-dir-hero p { margin: 0; color: rgba(255, 255, 255, .86); max-width: 34rem; }
.rc-dir-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1.25rem; }
@media (min-width: 640px) {
  .rc-dir-hero { padding: 2.25rem 2rem 2rem; }
  .rc-dir-hero h1 { font-size: 2.5rem; }
  .rc-dir-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rc-dir-stat {
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 1rem;
  padding: .8rem .9rem;
}
.rc-dir-stat b { display: block; font-size: 1.75rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.rc-dir-stat span { display: block; margin-top: .35rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .85); }

.rc-live-dot { width: .5rem; height: .5rem; border-radius: 999px; background: #7CF29A; box-shadow: 0 0 0 0 rgba(124, 242, 154, .7); animation: rc-live 1.8s infinite; flex: none; }
@keyframes rc-live { 0% { box-shadow: 0 0 0 0 rgba(124, 242, 154, .7); } 70% { box-shadow: 0 0 0 8px rgba(124, 242, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(124, 242, 154, 0); } }

/* ---- the latest call-outs, swiped sideways ------------------------------------ */
.rc-dir-feed { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem .75rem; margin: 0 -.25rem; scrollbar-width: none; }
.rc-dir-feed::-webkit-scrollbar { display: none; }
.rc-feed-card {
  flex: 0 0 15rem; scroll-snap-align: start;
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.rc-feed-card:hover { transform: translateY(-2px); box-shadow: var(--raidcall-shadow-lg); }
.rc-feed-top { height: 5.5rem; position: relative; display: flex; align-items: center; justify-content: center; font-size: 2.25rem; }
.rc-feed-top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-feed-ago {
  position: absolute; left: .6rem; top: .6rem; z-index: 1;
  font-size: .7rem; font-weight: 800; background: rgba(0, 0, 0, .55); color: #fff; padding: .15rem .5rem; border-radius: 999px;
}
.rc-feed-body { padding: .7rem .85rem .85rem; min-width: 0; }
.rc-feed-type { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-feed-sub { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-feed-more {
  flex: 0 0 10rem; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  text-align: center; font-weight: 800; color: rgb(var(--raidcall-fire)); background: rgb(var(--raidcall-fire-light));
  border-radius: 1.25rem; padding: 1rem;
}

/* ---- map + the most active ------------------------------------------------------ */
.rc-dir-split { display: grid; gap: 1rem; }
@media (min-width: 900px) { .rc-dir-split { grid-template-columns: 3fr 2fr; } }
.rc-dir-split > .rc-dir-card { padding: 1rem; min-width: 0; }
#rc-dir-map { height: 300px; border-radius: 1rem; overflow: hidden; }
.rc-dir-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .78rem; margin-top: .6rem; }
.rc-dir-legend i { display: inline-block; width: .65rem; height: .65rem; border-radius: 999px; margin-right: .35rem; vertical-align: -1px; }

.rc-top { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; }
.rc-top-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-radius: .9rem; transition: background .15s; }
.rc-top-row:hover { background: rgb(var(--raidcall-surface-2)); }
.rc-medal { width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 900; flex: none; color: #fff; }
.rc-medal--1 { background: linear-gradient(135deg, #F5C451, #C98A12); }
.rc-medal--2 { background: linear-gradient(135deg, #C9D1DB, #8A96A6); }
.rc-medal--3 { background: linear-gradient(135deg, #E3A574, #A8622D); }
.rc-top-bar { height: .4rem; border-radius: 999px; background: rgb(var(--raidcall-fire-light)); overflow: hidden; margin-top: .3rem; }
.rc-top-bar > span { display: block; height: 100%; border-radius: 999px; background: rgb(var(--raidcall-fire)); width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }

/* ---- the list ---------------------------------------------------------------------- */
.rc-dir-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.rc-dir-search { flex: 1 1 16rem; position: relative; }
.rc-dir-search input {
  width: 100%; border-radius: .9rem; border: 1px solid rgb(var(--raidcall-border)); background: rgb(var(--raidcall-field));
  color: rgb(var(--raidcall-ink)); padding: .7rem .9rem .7rem 2.4rem; font-size: .9rem; outline: none;
}
.rc-dir-search input:focus { border-color: rgb(var(--raidcall-fire)); box-shadow: 0 0 0 3px rgb(var(--raidcall-fire) / .18); }
.rc-dir-search > span { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: rgb(var(--raidcall-muted)); display: flex; }
.rc-seg { display: inline-flex; padding: .2rem; border-radius: .9rem; background: rgb(var(--raidcall-surface-2)); border: 1px solid rgb(var(--raidcall-border)); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rc-seg a { padding: .45rem .8rem; border-radius: .7rem; font-size: .82rem; font-weight: 700; color: rgb(var(--raidcall-muted)); white-space: nowrap; }
.rc-seg a[aria-current="true"] { background: rgb(var(--raidcall-surface)); color: rgb(var(--raidcall-ink)); box-shadow: var(--raidcall-shadow); }

.rc-kraje { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: .75rem; scrollbar-width: none; }
.rc-kraje::-webkit-scrollbar { display: none; }
.rc-kraje a {
  flex: none; border-radius: 999px; border: 1px solid rgb(var(--raidcall-border)); background: rgb(var(--raidcall-surface));
  padding: .35rem .8rem; font-size: .82rem; font-weight: 700; white-space: nowrap;
}
.rc-kraje a:hover { border-color: rgb(var(--raidcall-fire)); }
.rc-kraje a span { color: rgb(var(--raidcall-muted)); }
.rc-kraj { margin-bottom: 1.5rem; scroll-margin-top: 80px; }
.rc-kraj > summary { list-style: none; display: flex; align-items: baseline; justify-content: space-between; font-weight: 800; margin-bottom: .6rem; cursor: pointer; user-select: none; }
.rc-kraj > summary::-webkit-details-marker { display: none; }
.rc-kraj .rc-kraj-arrow { display: inline-block; transition: transform .15s; color: rgb(var(--raidcall-muted)); margin-right: .4rem; }
.rc-kraj:not([open]) .rc-kraj-arrow { transform: rotate(-90deg); }

.rc-zgrid { display: grid; gap: .6rem; }
@media (min-width: 640px) { .rc-zgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rc-zcard {
  display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem .7rem .7rem; min-width: 0;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.rc-zcard:hover { transform: translateY(-2px); box-shadow: var(--raidcall-shadow-md); border-color: rgb(var(--raidcall-fire) / .5); }
.rc-zav {
  width: 3.25rem; height: 3.25rem; border-radius: 1rem; flex: none; position: relative;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.05rem; color: #fff;
}
.rc-zav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; }
.rc-zav-live { position: absolute; right: -2px; bottom: -2px; width: .8rem; height: .8rem; border-radius: 999px; background: rgb(var(--dir-green)); border: 2px solid rgb(var(--raidcall-surface)); }
.rc-zname { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-zplace { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-zmeta { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin-top: .3rem; font-size: .74rem; font-weight: 700; color: rgb(var(--raidcall-muted)); }
.rc-pill { padding: .05rem .45rem; border-radius: 999px; }
.rc-pill--live { background: rgb(var(--dir-green-tint)); color: rgb(var(--dir-green)); }
.rc-pill--kind { background: rgb(var(--raidcall-surface-2)); border: 1px solid rgb(var(--raidcall-border)); }
.rc-spark { flex: none; display: block; }
.rc-spark rect { fill: rgb(var(--raidcall-fire) / .2); }
.rc-spark rect.on { fill: rgb(var(--raidcall-fire)); }

/* ---- the incident map's insight row --------------------------------------------- */
.rc-insight { display: grid; gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 720px) { .rc-insight { grid-template-columns: 3fr 2fr; } }
.rc-insight .rc-dir-card { padding: 1rem 1.1rem; min-width: 0; }
.rc-months { display: flex; align-items: flex-end; gap: 4px; height: 96px; margin-top: .6rem; }
.rc-months div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
.rc-months i { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: rgb(var(--raidcall-fire)); min-height: 2px; transform-origin: bottom; animation: rc-grow .6s cubic-bezier(.2, .8, .2, 1) both; }
.rc-months i.zero { background: rgb(var(--raidcall-border)); }
.rc-months small { font-size: .62rem; color: rgb(var(--raidcall-muted)); font-weight: 700; }
.rc-months b { font-size: .62rem; font-weight: 800; }
@keyframes rc-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.rc-types { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.rc-type { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; font-size: .82rem; font-weight: 700; cursor: pointer; border: 0; background: none; color: inherit; text-align: left; padding: 0; }
.rc-type[aria-pressed="true"] { color: rgb(var(--raidcall-fire)); }
.rc-type-bar { grid-column: 1 / -1; height: .45rem; border-radius: 999px; background: rgb(var(--raidcall-surface-2)); overflow: hidden; }
.rc-type-bar span { display: block; height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  .rc-dir-hero::after, .rc-live-dot, .rc-months i { animation: none; }
  .rc-zcard, .rc-feed-card, .rc-top-bar > span, .rc-type-bar span { transition: none; }
}

/* ---- one country at a time (2026-11-07) ------------------------------------- */
/* the country switch in the hero: the visitor's own country first, all of
   Europe last; scrolls sideways on a phone instead of wrapping into a wall */
.rc-countries { display: flex; gap: .4rem; overflow-x: auto; margin-top: 1rem; padding-bottom: .15rem; scrollbar-width: none; }
.rc-countries::-webkit-scrollbar { display: none; }
.rc-countries a {
  flex: none; border-radius: 999px; padding: .35rem .8rem; font-size: .82rem; font-weight: 700; white-space: nowrap;
  color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
}
.rc-countries a:hover { background: rgba(255, 255, 255, .2); }
.rc-countries a span { opacity: .75; font-weight: 600; margin-left: .15rem; }
.rc-countries a[aria-current="true"] { background: #fff; color: #8E1B1B; border-color: #fff; }

/* a country nobody uses yet: an invitation instead of zeros */
.rc-dir-invite { padding: 1.5rem; text-align: center; }
.rc-dir-invite .rc-dir-h2 { justify-content: center; }
.rc-dir-invite p { max-width: 32rem; margin: .5rem auto 1rem; }
.rc-dir-invite-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: .6rem;
  border-radius: 1rem; background: rgb(var(--raidcall-fire) / .1); color: rgb(var(--raidcall-fire));
}
.rc-dir-invite-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; }
.rc-dir-invite-btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1.2rem; border-radius: .9rem;
  background: rgb(var(--raidcall-fire)); color: #fff; font-weight: 800;
}
.rc-dir-invite-btn:hover { filter: brightness(1.08); }