/* GII collection map (owner page, noindex) — /he/gii/collected/, /en/gii/collected/.
   Loaded after pages.css + map.css. Same palette; the count scale reuses the map's gold ramp
   (lightness rises with the count, so it reads with every colour-vision type). Mobile-first:
   under 760px the table comes before the map. */

.gii-collected-page {
  /* tokens map.css expects from the homepage's styles.css (pages.css does not define them) */
  --line-field: rgba(255, 255, 255, 0.28);
  --bg-a9: rgba(18, 51, 57, 0.96);
  --accent-50: rgba(201, 162, 107, 0.5);
  --gii-0: #A0703A;   /* 1 */
  --gii-1: #B88A4C;   /* 2–4 */
  --gii-2: #D2A867;   /* 5–9 */
  --gii-3: #FCEBC4;   /* 10+ = published */
  --gii-none: #22494F;
  --gii-low: #8A9799;
  --gii-zuza-0: #4F8F8C;
  --gii-zuza-1: #68A49D;
  --gii-zuza-2: #86BDB0;
  --gii-zuza-3: #C4E4D8;
}

.c-wrap { max-width: 72rem; }
.c-head { margin-bottom: 1.25rem; }
.c-head h1 { margin: 0; font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.1; }
.c-gloss { margin: .35rem 0 0; color: var(--accent); font-size: 1.05rem; }
.c-lead { margin: .6rem 0 0; color: var(--text-3); font-size: .92rem; max-width: 44rem; }

.gii-collected { display: flex; flex-direction: column; }
.gii-collected button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
.gii-collected .gii-chip { border: 1px solid var(--line-field); border-radius: 0; }
.c-bar { justify-content: flex-start; gap: .6rem 1.5rem; }
.c-totals { margin: .5rem 0 0; }
.c-near { margin: .35rem 0 0; color: var(--text-2); font-size: .92rem; }
.c-near strong { color: var(--accent); font-weight: 600; }
.c-near__item { white-space: nowrap; }
.c-key { margin: .35rem 0 0; color: var(--text-3); font-size: .84rem; }
.c-key.is-ok { color: var(--gii-zuza-3); }
.c-key.is-bad { color: #F2B8A0; }
.c-numlabel { margin: .2rem 0 .5rem; color: var(--text-3); font-size: .84rem; }

/* map: count bins */
.gii-collected .gii-world [data-state="c0"] { fill: var(--gii-0); }
.gii-collected .gii-world [data-state="c1"] { fill: var(--gii-1); }
.gii-collected .gii-world [data-state="c2"] { fill: var(--gii-2); }
.gii-collected .gii-world [data-state="c3"] { fill: var(--gii-3); }
.gii-collected .gii-world.is-zuza [data-state="c0"] { fill: var(--gii-zuza-0); }
.gii-collected .gii-world.is-zuza [data-state="c1"] { fill: var(--gii-zuza-1); }
.gii-collected .gii-world.is-zuza [data-state="c2"] { fill: var(--gii-zuza-2); }
.gii-collected .gii-world.is-zuza [data-state="c3"] { fill: var(--gii-zuza-3); }
.gii-collected .gii-countries path[data-state="c3"] { stroke: var(--text); stroke-width: 1; }

/* legend */
.c-legend { max-width: none; }
.c-legend__keys { gap: .35rem 1rem; }
.c-key-bin::before { border: 1px solid rgba(255, 255, 255, 0.35); }
.c-key-bin[data-bin="c0"]::before { background: var(--gii-0); }
.c-key-bin[data-bin="c1"]::before { background: var(--gii-1); }
.c-key-bin[data-bin="c2"]::before { background: var(--gii-2); }
.c-key-bin[data-bin="c3"]::before { background: var(--gii-3); border-color: var(--text); }
.gii-collected:has(.is-zuza) .c-key-bin[data-bin="c0"]::before { background: var(--gii-zuza-0); }
.gii-collected:has(.is-zuza) .c-key-bin[data-bin="c1"]::before { background: var(--gii-zuza-1); }
.gii-collected:has(.is-zuza) .c-key-bin[data-bin="c2"]::before { background: var(--gii-zuza-2); }
.gii-collected:has(.is-zuza) .c-key-bin[data-bin="c3"]::before { background: var(--gii-zuza-3); }
.c-legend__note { margin: .4rem 0 0; color: var(--text-3); font-size: .8rem; }

/* tooltip extras */
.c-tip { max-width: 18rem; }
.c-tip__prov { color: var(--accent); font-style: italic; }
.c-tip__pub { color: var(--accent); font-weight: 600; }
.c-tip__muted { color: var(--text-3); font-size: .82rem; }
.c-tip__src { display: flex; flex-wrap: wrap; gap: .1rem .6rem; margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--text-2); }
.c-tip__srch { color: var(--text-3); }
.c-tip__srci { white-space: nowrap; unicode-bidi: isolate; }
.c-tip__srci.is-zero { color: var(--text-3); }

/* table */
.c-table { margin-top: 1.25rem; }
.c-table__scroll { overflow-x: auto; border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.c-table__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-tbl { font-size: .88rem; min-width: 100%; }
.c-tbl th, .c-tbl td { padding: .45rem .55rem; white-space: nowrap; }
.c-tbl tbody th { white-space: normal; min-width: 7rem; }
.c-tbl td.gii-num { text-align: end; }
.c-tbl thead th { padding: 0; }
.c-sort {
  display: inline-flex; align-items: center; gap: .25rem; width: 100%; min-height: 40px;
  padding: .45rem .55rem; color: var(--text-2); font-weight: 600; font-size: .8rem; text-align: inherit;
  justify-content: flex-end;
}
.c-tbl thead th:first-child .c-sort { justify-content: flex-start; }
.c-sort:hover { color: var(--text); }
.c-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.c-sort__arrow { font-size: .65rem; color: var(--accent); min-width: .7rem; }
.c-prov bdi { font-style: italic; text-decoration: underline dashed var(--accent); text-underline-offset: 3px; }
.c-pub { text-align: end !important; color: var(--text-3); }
.c-pub.is-yes { color: var(--accent); font-weight: 700; }
.c-tbl tr.is-pub th a { font-weight: 700; }
.c-table__note { margin: .5rem 0 0; color: var(--text-3); font-size: .8rem; }

.c-back { margin-top: 2rem; font-size: .9rem; }

/* phones: totals → table → map → legend */
@media (max-width: 759px) {
  .gii-collected .c-table { order: 1; }
  .gii-collected .c-stage { order: 2; margin-top: 1.25rem; }
  .gii-collected .c-legend { order: 3; }
  .gii-collected .gii-map__zuza { order: 4; }
  .gii-collected .gii-map__meta { order: 5; }
  .c-bar { flex-direction: column; align-items: flex-start; }
}