/* =========================================================
   The interactive globe (globe.js; markup app/views/partials/globe.php) on the public pages:
   Country Profiles' Jurisdictions page — under both its looks, v5 and the CRCGS kit — and the
   Knowledge Hub homepage. The admin dashboard styles its own copy in admin-crcgs.css (section 7).
   Every colour is a --gl- token in the block below, taken from the design kit's --ck- tokens where
   the kit is loaded and falling back to the same values where it is not (Country Profiles' v5 look).
   globe.js reads the map colours from these tokens too, so the canvas and the legend always agree.
   Freshness (owner, 2026-10-27; the block at the end of this file): green, blue, yellow, orange, red by how long ago an
   editor verified the country, stripes for "not yet verified", light grey for "not yet covered" — the colour is never the
   only clue (the card and the legend say it in words). Light grey is also the plain land Country Profiles has no row for
   (no card there).
   ========================================================= */
.gl{
  --gl-c-profile:#1F6FBF;
  --gl-c-none:#D3DAE2;
  --gl-f-none:#D3DAE2;
  --gl-neutral:#CBD3DC;
  --gl-ocean-hi:#FFFFFF;
  --gl-ocean:#EAF6FB;
  --gl-ocean-lo:#CDEAF4;
  --gl-grat:rgba(3,4,94,.08);
  --gl-border:rgba(255,255,255,.9);
  --gl-coast:rgba(3,4,94,.22);
  --gl-select:var(--ck-orange,#FF9F1C);
  --gl-halo:rgba(0,180,216,.22);
  --gl-shade:rgba(3,4,94,.24);
  --gl-rim:rgba(3,4,94,.2);
  --gl-focus:var(--ck-navy,#03045E);
  --gl-navy:var(--ck-navy,#03045E);
  --gl-text:var(--ck-text,#1F2937);
  --gl-muted:var(--ck-muted,#4B5563);
  --gl-link:var(--ck-blue-text,#0077B6);
  --gl-line:var(--ck-line,#E2E8F0);
  --gl-card:#FFFFFF;
  --gl-sw-edge:rgba(3,4,94,.18);
  --gl-shadow:0 12px 32px rgba(3,4,94,.16),0 2px 6px rgba(3,4,94,.08);
  --gl-font-head:var(--ck-font-head,var(--font-display,Georgia,serif));
  display:grid;gap:24px 48px;align-items:center;margin:0 0 32px;color:var(--gl-text)
}
.gl--split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.gl__stage{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin:0 auto}
.gl__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y pinch-zoom;cursor:grab;
  -webkit-tap-highlight-color:transparent;outline:none}
/* Its focus ring is drawn by globe.js around the sphere itself (a square box round a round globe looks broken). */
.gl .gl__canvas:focus,.gl .gl__canvas:focus-visible{outline:none;box-shadow:none}
.gl__canvas.is-over{cursor:pointer}
.gl.is-dragging .gl__canvas{cursor:grabbing}
/* No JavaScript, or no map: the canvas would be an empty box, so only the list link remains. */
.gl:not(.is-js) .gl__canvas,.gl.is-failed .gl__canvas{display:none}
.gl:not(.is-js) .gl__stage:not(.gl__stage--keep),.gl.is-failed .gl__stage:not(.gl__stage--keep){display:none}
.gl:not(.is-ready) .gl__hint{display:none}
/* The Knowledge Hub's globe can be turned only once its tiles have handed over to it (hub-globe.js). */
.gl[data-globe-manual]:not(.is-revealed) .gl__hint{visibility:hidden}

/* ---- The card ---- */
.gl__card{position:absolute;left:0;top:0;z-index:3;box-sizing:border-box;width:max-content;max-width:min(280px,calc(100% - 16px));
  padding:12px 16px 13px;background:var(--gl-card);color:var(--gl-text);border:1px solid var(--gl-line);border-radius:10px;
  box-shadow:var(--gl-shadow);font-size:.9rem;line-height:1.4;text-align:left;
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.gl__card.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .16s ease,transform .16s ease}
.gl__card p{margin:0}
.gl__card-name{font-family:var(--gl-font-head);font-weight:700;font-size:1.08rem;line-height:1.25;color:var(--gl-navy);margin:0 0 6px}
.gl__card-status{display:flex;align-items:center;gap:8px;font-weight:600}
.gl__card-meta{margin-top:3px;color:var(--gl-muted);font-size:.84rem}
.gl__card .gl__card-links{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px}
.gl__card-link{color:var(--gl-link);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.gl__card-link:hover{color:var(--gl-navy)}
.gl__card-link::after{content:" \2192"}
.gl__card-link:focus-visible{outline:3px solid var(--gl-focus);outline-offset:2px;border-radius:2px}

/* ---- Beside or under the globe: legend, notes, the list link ---- */
.gl__aside{min-width:0}
.gl__title{margin:0 0 6px;font-family:var(--gl-font-head);font-weight:700;font-size:1.35rem;line-height:1.25;color:var(--gl-navy)}
.gl__intro{margin:0 0 16px;color:var(--gl-muted);max-width:44ch}
.gl__legend{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px;max-width:340px}
.gl__legend-item{display:flex;align-items:center;gap:10px;margin:0;font-size:.95rem}
.gl__legend-count{margin-left:auto;padding-left:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--gl-navy)}
.gl__sw{display:inline-block;width:14px;height:14px;flex:none;border-radius:4px;box-shadow:inset 0 0 0 1px var(--gl-sw-edge)}
.gl__note{margin:0 0 12px;color:var(--gl-muted);font-size:.88rem}
.gl__hint{margin:0 0 14px;color:var(--gl-muted);font-size:.88rem}
.gl__browse{display:inline-block;font-weight:600;color:var(--gl-link);text-decoration:underline;text-underline-offset:3px}
.gl__browse::after{content:" \2192"}
.gl__browse:hover{color:var(--gl-navy)}
.gl__browse:focus-visible{outline:3px solid var(--gl-focus);outline-offset:2px;border-radius:2px}

/* Stacked (the Knowledge Hub): the legend runs in one centred line under the globe. */
.gl--stack{gap:18px;justify-items:center;text-align:center}
.gl--stack .gl__aside{display:flex;flex-direction:column;align-items:center}
.gl--stack .gl__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;max-width:none}
.gl--stack .gl__legend-item{font-size:.9rem;gap:8px}
.gl--stack .gl__legend-count{margin-left:0;padding-left:0}
.gl--stack .gl__hint{max-width:48ch;text-wrap:balance}

@media (max-width:760px){
  .gl--split{grid-template-columns:minmax(0,1fr);gap:16px}
  .gl--split .gl__legend{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .gl__card,.gl__card.is-open{transition:none;transform:none}
}


/* ---------- Tiers removed 2026-10-27 ---------- */
/* One palette for the freshness scale (the same values as app.css --fr-* and admin-crcgs.css): the globe colours a
   published country by how long ago an editor verified it, "not yet verified" with stripes (drawn on the canvas by
   globe.js, and as the stripes of a legend swatch), "not yet covered" light grey. */
.gl{
  --gl-c-profile:#1F6FBF;
  --gl-f-green:#3FAE6A;
  --gl-f-blue:#1F6FBF;
  --gl-f-yellow:#EAC02E;
  --gl-f-orange:#F28C28;
  --gl-f-red:#C0392B;
  --gl-f-unverified:#A9BAD0;
  --gl-f-unverified-line:#566B8B;
}


/* ---------- Public colours 2026-10-27 ---------- */
/* The public globe's palette (the same values as app.css --fr-fresh / recent / ageing / stale; globe.js reads these):
   green, blue, orange, and a striped grey for "over 12 months, or not yet verified"; plain light grey stays "not yet
   covered". The card's three record counts sit in one wrapping row. */
.gl{
  --gl-f-fresh:#3FAE6A;
  --gl-f-recent:#1F6FBF;
  --gl-f-ageing:#F28C28;
  --gl-f-stale:#B4BCC7;
  --gl-f-stale-line:#6B7686;
}
.gl__card .gl__card-counts{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:8px;padding-top:8px;border-top:1px solid var(--gl-line);font-size:.84rem;line-height:1.35;color:var(--gl-text)}
.gl__card-count{white-space:nowrap;font-variant-numeric:tabular-nums}
.gl__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:480px){
  .gl__card .gl__card-counts{flex-direction:column;gap:1px}
}