/* =========================================================
   every point — globe section
   ========================================================= */
#globe-sec {
  --g-panel: rgba(20, 13, 9, 0.72);
  --g-solid: #17100b;
  --g-line: rgba(244, 239, 233, 0.1);
  --g-muted: #a2968a;
  --g-dim: #62574d;
  --g-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --g-gut: 16px;
  --g-top: 58px;
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: var(--ink);
}
#globe { position: absolute; inset: 0; z-index: 0; isolation: isolate; }   /* keeps dots under the cards */
/* touch: vertical swipes scroll the page, sideways swipes / two fingers turn the globe */
#globe canvas { touch-action: pan-y !important; }

.g-glass {
  background: var(--g-panel);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--g-line);
  border-radius: 12px;
}
#globe-sec button { font-family: inherit; color: inherit; }

/* ---------- top bar ---------- */
.g-top {
  position: absolute; top: 0; left: 0; right: 0; height: var(--g-top);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--g-gut); z-index: 4; pointer-events: none;
  background: linear-gradient(rgba(10, 7, 5, 0.7), transparent);
}
.g-top > * { pointer-events: auto; }
.g-top .byline--sm { font-size: .85rem; }
.g-top-actions { display: flex; gap: 1.2rem; font-size: .85rem; white-space: nowrap; }
.g-zoom { font-size: 18px; line-height: 1; }

/* ---------- left column: HUD + card ---------- */
#g-left {
  position: absolute; top: var(--g-top); left: var(--g-gut); bottom: var(--g-gut); width: 310px;
  display: flex; flex-direction: column; gap: 12px; pointer-events: none; z-index: 2;
}
#g-left > * { pointer-events: auto; }

/* ---------- list ---------- */
#g-panel {
  position: absolute; top: var(--g-top); right: var(--g-gut); bottom: var(--g-gut); width: 320px;
  display: flex; flex-direction: column; overflow: hidden; z-index: 2;
}
#g-panel header { padding: 13px 16px 10px; border-bottom: 1px solid var(--g-line); display: flex; justify-content: space-between; align-items: baseline; }
#g-panel header h2 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .02em; }
#g-listClose { display: none; background: none; border: 0; color: var(--g-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
#g-panel header span { font-family: var(--g-mono); font-size: 11px; color: var(--g-muted); }
#g-list { overflow-y: auto; flex: 1; padding: 4px 0 8px; scrollbar-width: thin; scrollbar-color: #3a2c22 transparent; overscroll-behavior: contain; }
#g-list .year { position: sticky; top: 0; background: var(--g-solid); padding: 8px 16px 4px; font-family: var(--g-mono); font-size: 11px; color: var(--g-muted); z-index: 1; }
#g-list .row {
  width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid transparent;
  display: grid; grid-template-columns: 10px 34px 1fr; gap: 10px; align-items: center;
  padding: 7px 16px; cursor: pointer;
}
#g-list .row:hover { background: rgba(255,255,255,.05); }
#g-list .row.sel { background: rgba(255,106,43,.1); border-left-color: var(--ember); }
#g-list .row.future { opacity: .3; }
#g-list .sw { width: 8px; height: 8px; border-radius: 50%; }
#g-list .id { font-family: var(--g-mono); font-size: 13px; font-weight: 500; }
#g-list .meta { font-family: var(--g-mono); font-size: 10.5px; color: var(--g-muted); line-height: 1.5; min-width: 0; }
.sealed-line { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.lock { width: 10px; height: 10px; color: var(--g-dim); flex: none; }

/* redaction bars */
.redact {
  display: inline-block; height: 9px; border-radius: 2px; vertical-align: middle;
  background: repeating-linear-gradient(90deg, #3b2e25 0 5px, #33271f 5px 7px);
}
.redact--lg { height: 13px; }

/* ---------- sealed card ---------- */
#g-detail { margin-top: auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3a2c22 transparent; }
#g-detail .head { padding: 14px 16px 10px; border-bottom: 1px solid var(--g-line); position: relative; flex: none; }
.g-title { font-family: var(--g-mono); font-size: 14px; display: flex; align-items: center; gap: 8px; padding-right: 26px; }
.g-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ember); border: 1px solid rgba(255,106,43,.4); border-radius: 999px; padding: 1px 7px;
}
.g-badge .lock { color: var(--ember); width: 9px; height: 9px; }
#g-detail .sub { font-size: 12px; color: var(--g-muted); margin-top: 4px; }
#g-detail .close { position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; border: 0; background: transparent; color: var(--g-muted); cursor: pointer; font-size: 18px; border-radius: 6px; }
#g-detail .close:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.g-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--g-line); border-bottom: 1px solid var(--g-line); flex: none; }
.g-quad > div { background: var(--g-solid); padding: 8px 12px; }
.g-quad .k, .g-field .k, .g-others .k { font-size: 10px; color: var(--g-muted); text-transform: uppercase; letter-spacing: .08em; }
.g-quad .v { font-family: var(--g-mono); font-size: 12px; margin-top: 2px; }
.g-quad .m { color: var(--g-muted); }
.g-quad-wide { grid-column: 1 / -1; }
.g-quad i, #g-list i { color: var(--g-dim); font-style: normal; }
/* coordinates that exist but are encrypted — the text keeps changing */
.scramble {
  color: #d8b89a; letter-spacing: .02em; pointer-events: none;
  display: inline-block; vertical-align: top; overflow: hidden; white-space: nowrap;
  width: calc(var(--n) * 1ch + 2px); max-width: 100%; height: 1.5em; line-height: 1.5em;
}
.g-enc-block { flex: 1; min-width: 0; }
.g-enc-block .scramble { display: block; width: 100%; height: 3em; white-space: normal; word-break: break-all; }
#g-list .sw--enc { background: transparent; box-shadow: 0 0 0 1px var(--g-muted); }
.g-sealed { padding: 12px 16px 14px; display: grid; gap: 10px; }
.g-field { display: flex; align-items: center; gap: 12px; }
.g-field .k { width: 52px; flex: none; }
.g-soon { font-size: 13px; color: var(--g-muted); }
.g-soon b { color: var(--ember); font-weight: 500; }
.g-others { padding: 0 16px 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.g-others .k { width: 100%; }
.g-others button { font-family: var(--g-mono) !important; font-size: 12px !important; background: rgba(255,255,255,.05); border: 1px solid var(--g-line); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.g-others button:hover { border-color: var(--ember); }
.g-others button.future { opacity: .4; }


/* ---------- zoom (desktop) ---------- */
.g-zoomctl { position: absolute; right: calc(320px + var(--g-gut) * 2); bottom: var(--g-gut); display: flex; gap: 6px; z-index: 2; }
.g-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--g-line); background: var(--g-panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; display: grid; place-items: center; }
.g-btn:hover { background: rgba(60,40,28,.8); }

/* ---------- condensed list (phones only) ---------- */
#g-peek { display: none; }

/* globe tooltip */
.g-tip { font-family: var(--g-mono, monospace); font-size: 12px; background: rgba(15,10,7,.94); border: 1px solid rgba(244,239,233,.12); border-radius: 8px; padding: 8px 10px; color: #f4efe9; line-height: 1.5; }
.g-tip span { color: #a2968a; }
.g-tip b { font-weight: 500; }

/* scroll cue */
.g-more {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1;
  font-size: 11px; letter-spacing: .14em; text-transform: lowercase; color: var(--g-muted); text-decoration: none;
  padding: 6px 12px; border-radius: 999px; background: rgba(10,7,5,.4);
}
.g-more:hover { color: var(--ember); }

#globe-sec.globe-failed #globe::after {
  content: "the globe couldn't load — check your connection and refresh.";
  position: absolute; top: 45%; left: 0; right: 0; text-align: center; color: var(--g-muted); font-size: .9rem;
}

/* ---------- phones ---------- */
@media (max-width: 820px) {
  #globe-sec { --g-gut: 10px; --g-top: 48px; --g-peek: 124px; }
  .g-top .byline--sm { font-size: .72rem; }
  .g-top-actions { gap: .9rem; font-size: .78rem; }
  #g-left { right: var(--g-gut); width: auto; bottom: calc(var(--g-peek) + var(--g-gut) * 2); }
  #g-detail { max-height: 50svh; background: rgba(20,13,9,.97); }          /* solid: no dots showing through */
  .g-zoomctl, .g-more { display: none; }

  /* condensed list pinned to the bottom */
  #g-peek {
    display: flex; flex-direction: column; position: absolute; left: var(--g-gut); right: var(--g-gut); bottom: var(--g-gut);
    height: var(--g-peek); padding: 0; z-index: 3; background: rgba(20,13,9,.95); overflow: hidden;
  }
  .g-peek-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex: none;
    font-size: 13px; font-weight: 500; text-align: left; cursor: pointer;
    background: none; border: 0; border-bottom: 1px solid var(--g-line); padding: 11px 14px 8px;
  }
  .g-peek-open { font-size: 11px; color: var(--ember); font-weight: 400; white-space: nowrap; }
  /* scrolls on its own; the fade at the bottom hints there's more */
  #g-peekRows {
    flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 0 6px;
    -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent);
  }
  .g-peek-row {
    width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 3px 14px;
    display: grid; grid-template-columns: 8px 30px auto 1fr; gap: 8px; align-items: center;
    font-family: var(--g-mono) !important; font-size: 11px; color: var(--g-muted);
  }
  .g-peek-row:active { background: rgba(255,255,255,.06); }
  .g-peek-row .sw--enc { background: transparent; box-shadow: 0 0 0 1px var(--g-muted); }
  .g-peek-row .sw--tree { background: #f5a623; }
  .g-peek-row--tree b { color: #f5a623; }
  .g-peek-row b { color: var(--ink); font-weight: 500; }
  .g-peek-row .sw { width: 7px; height: 7px; border-radius: 50%; }
  .g-peek-where { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* full list: slides up over everything */
  #g-panel {
    top: var(--g-top); left: var(--g-gut); right: var(--g-gut); bottom: var(--g-gut); width: auto; height: auto;
    background: rgba(20,13,9,.98); z-index: 6;
    transform: translateY(calc(100% + 80px)); transition: transform .28s ease;
  }
  #g-panel.open { transform: none; }
  #g-listClose { display: block; }
  #globe-sec.has-card #g-peek { display: none; }                       /* card takes the bottom while it's open */
  #globe-sec.has-card #g-left { bottom: var(--g-gut); }
}
@media (max-width: 420px) {
  .g-top .byline--sm { font-size: .64rem; letter-spacing: .06em; }
  .g-top-actions a:not(.g-req) { display: none; }
}
@media (pointer: coarse) {
  .g-zoom { display: none; }
}

/* ---------- the tree (000) ---------- */
.g-tree {
  pointer-events: auto; cursor: pointer; background: none; border: 0; padding: 8px;
  display: flex; align-items: center; gap: 5px; transform: translate(-50%, -50%);
}
.g-tree-dot {
  width: 11px; height: 11px; border-radius: 50%; background: #f5a623;
  box-shadow: 0 0 0 2px rgba(20,13,9,.9), 0 0 0 3px #f5a623, 0 0 16px 4px rgba(255,120,40,.55);
}
.g-tree-id {
  font-family: "Archivo Black", sans-serif; font-size: 12px; letter-spacing: .04em; color: #f5a623;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.g-tree.is-sel .g-tree-dot { background: #fff; }
#g-list .sw--tree { background: #f5a623; box-shadow: 0 0 0 2px var(--g-solid), 0 0 0 3px #f5a623; }
#g-list .row--tree .id { color: #f5a623; }
.tree-name { font-family: "Archivo Black", sans-serif; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #f5a623; }
.g-badge--tree { color: #f5a623; border-color: rgba(245,166,35,.45); }
.g-soon a { color: var(--ink); }
.g-soon a:hover { color: var(--ember); }

/* ---------- interaction dots (pulse style) ---------- */
.g-dot {
  pointer-events: auto; cursor: pointer; position: relative; padding: 0; border: 0;
  width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--c); box-shadow: 0 0 0 1px rgba(10,7,5,.9), 0 0 5px 0 var(--c);
  transition: opacity .25s;
}
.g-dot::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }   /* easier to hit than it looks */
.g-dot.future { opacity: 0; pointer-events: none; }
.g-dot:hover, .g-dot:focus-visible { z-index: 5; outline: none; box-shadow: 0 0 0 1px rgba(10,7,5,.9), 0 0 0 3px rgba(244,239,233,.45), 0 0 8px 1px var(--c); }
.g-dot.is-sel { z-index: 4; background: #fff; box-shadow: 0 0 0 1px rgba(10,7,5,.9), 0 0 0 3px rgba(255,255,255,.35), 0 0 10px 2px var(--c); }
.g-dot-tip {
  display: none; position: absolute; left: 11px; top: -9px; white-space: nowrap; text-align: left;
  font-family: var(--g-mono, monospace); font-size: 11.5px; line-height: 1.5; color: #f4efe9;
  background: rgba(15,10,7,.94); border: 1px solid rgba(244,239,233,.12); border-radius: 8px; padding: 6px 9px;
}
.g-dot-tip b { font-weight: 500; }
@media (hover: hover) { .g-dot:hover .g-dot-tip { display: block; } }
@media (pointer: coarse) { .g-dot::before { inset: -10px; } }

/* ---------- recap card (top of the list panel) ---------- */
.g-recap { padding: 14px 16px 12px; border-bottom: 1px solid var(--g-line); flex: none; }
.g-recap-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.g-goal { margin: 0; font-family: "EB Garamond", Georgia, serif; font-size: 1.28rem; line-height: 1.2; }
.g-goal b, .g-goalN { font-weight: 500; color: var(--ember); }
.g-progress { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); margin: 12px 0 12px; overflow: hidden; }
.g-progress i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #cc3a1e, var(--ember), #ffc233); }
.g-counters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.g-counters dt { font-size: 10.5px; color: var(--g-muted); text-transform: uppercase; letter-spacing: .08em; }
.g-counters dd { margin: 2px 0 0; font-family: var(--g-mono); font-size: 13px; line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-counters dd small { color: var(--g-muted); font-size: 11px; }
#g-cWit { font-size: 17px; }
#g-panel .g-list-head { border-top: 0; }
#g-detail .g-place { font-size: 13px; color: var(--ink); margin-top: 4px; }

@media (max-width: 820px) {
  .g-goal { font-size: 1.2rem; padding-right: 4px; }
  /* condensed header: count + mini progress bar */
  .g-peek-head { display: grid; grid-template-columns: 1fr auto; row-gap: 7px; align-items: baseline; }
  .g-peek-head b { color: var(--ember); font-weight: 500; }
  .g-progress--mini { grid-column: 1 / -1; margin: 0; height: 3px; }
}

/* row you jumped to from the condensed list */
#g-list .row.flash { animation: g-flash 1.4s ease-out; }
@keyframes g-flash { 0%, 30% { background: rgba(255,106,43,.22); } 100% { background: transparent; } }

@media (max-width: 820px) {
  /* the recap header doubles as a "fold down" handle */
  .g-recap-top { cursor: pointer; position: relative; padding-top: 10px; touch-action: none; }
  .g-recap-top::before { content: ''; position: absolute; top: -4px; left: 50%; width: 38px; height: 4px; border-radius: 2px; background: rgba(244,239,233,.25); transform: translateX(-50%); }
}

/* recap title: "5D experiment" */
.g-exp { margin: 0 0 4px; font-family: "Archivo Black", sans-serif; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--flame, #ffc233); }

/* header: request button (hidden on the minimal ch5 version) */
.g-top-actions { align-items: center; }
.g-req {                                       /* ember pill, lettered like the header line */
  display: inline-block; padding: 8px 15px 7px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-family: "Archivo Black", "Inter", system-ui, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: .8rem; letter-spacing: .09em; background: var(--ember); color: #1a0c05;
  transition: background .2s, transform .2s;
}
.g-req:hover { background: var(--flame); transform: translateY(-1px); }
body.v-minimal .v-full-only { display: none; }
@media (max-width: 480px) {
  .g-long { display: none; }                   /* "↺ teaser" on narrow phones */
  .g-req { font-size: .7rem; padding: 7px 12px 6px; }
}

.g-tagline { min-width: 0; }
@media (max-width: 480px) { .g-tagline { max-width: 42vw; line-height: 1.25; } }   /* wraps to two lines next to the buttons */

/* recap: four quadrants under the progress bar */
.g-recap-top { justify-content: flex-end; min-height: 0; }
.g-recap-top #g-listClose { margin-top: -4px; }
#g-cGoal { color: var(--g-muted); }
.g-counters { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--g-line); border: 1px solid var(--g-line); border-radius: 10px; overflow: hidden; }
.g-counters > div { background: rgba(20,13,9,.92); padding: 10px 12px; min-height: 64px; }
.g-counters dt { line-height: 1.3; }
#g-cLast { white-space: normal; font-size: 12px; }
/* header tagline links down to "request an interaction" */
a.g-tagline { text-decoration: none; transition: color .2s; }
a.g-tagline:hover { color: var(--ember); }

/* "last seen" can be a long region name: let it wrap */
#g-cLast { white-space: normal; }


/* ---------- "device" version (?device) ---------- */
.v-device-only { display: none; }
body.v-device .v-device-only { display: block; }
body.v-device .g-recap-top { justify-content: space-between; }
.g-used { margin: -2px 0 12px; font-family: "EB Garamond", Georgia, serif; font-size: 1.15rem; }
.g-used b, body.v-device .g-goal b { color: var(--ember); font-weight: 500; }
body.v-device #g-cGoal { display: none; }          /* "times used 136", no "/ 600" */

body.v-device .gate-q { font-size: clamp(1.15rem, 4.2vw, 2rem); max-width: 22ch; margin-left: auto; margin-right: auto; }
.g-see { display: inline-block; margin-top: 6px; color: var(--ember); text-decoration: none; border-bottom: 1px solid rgba(255,106,43,.45); }
.g-see:hover { color: var(--flame, #ffc233); border-color: currentColor; }
body.v-device .g-counters { display: none; }        /* device version: just the sentences, no quadrants */

/* main version: "136 have used it" heads the card; times used is just the number */
body.v-device .v-main-only { display: none; }
.g-recap-top .v-main-only { margin: 0; }
body:not(.v-device) .g-recap-top { justify-content: space-between; }
body:not(.v-device) #g-cGoal { display: none; }
#g-cSince { font-variant-numeric: tabular-nums; }

.g-goal .g-seenN, .g-used .g-seenN { color: var(--ember); font-weight: 500; }
.g-goal .g-goalN { color: var(--g-muted); }
.g-nextN, .g-leftN { color: var(--ember); }
body.v-device .v-see-only { display: none; }

/* "last seen": exactly two lines — date, then a short place */
#g-cLast { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }