/* The globe page and everything laid over it. In order: the page and its
   font, the canvas and its fallbacks, the hover callout, the four corners
   (counter, address, credit, select toggle), the cards and the menu, the
   editor's tools and brush, the pages that open as modals with the charity
   ballot, and the phone layout last. */

:root {
  --bg: #000;
  --panel: rgba(16, 24, 44, 0.62);
  --line: rgba(170, 190, 230, 0.2);
  --line-strong: rgba(255, 255, 255, 0.4);
  --ink: #dfe3e8;
  --muted: #6c727b;
  --ui: "Saira", system-ui, sans-serif;
}

/* Saira, served from here (variable weight 200–500). SIL Open Font License;
   the licence text is in OFL.txt beside the font files. */
@font-face {
  font-family: "Saira";
  font-weight: 200 500;
  font-display: swap;
  src: url("/assets/saira-latin-f12edb3f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Saira";
  font-weight: 200 500;
  font-display: swap;
  src: url("/assets/saira-latin-ext-031ccdad.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

[hidden] {
  display: none !important;
}

.turbo-progress-bar {
  height: 1px;
  background: var(--ink);
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 300 14px/1.4 var(--ui);
  letter-spacing: 0.02em;
  font-feature-settings: "tnum";
  overflow: hidden;
}

p {
  margin: 0;
}

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}

/* The globe fills the window. The cursor says what a drag will do. */
#globe {
  display: block;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#globe.selecting {
  cursor: crosshair;
}

#globe.drawing {
  cursor: cell;
}

#globe.picking {
  cursor: copy;
}

/* The rubber-band box while selecting. */
#marquee {
  position: fixed;
  pointer-events: none;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
}

/* No JavaScript or no WebGL2: a picture of the globe and a note. */
.fallback {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 72px;
  background: #000 url("/og.jpg") center / contain no-repeat;
}

.fallback p {
  max-width: 340px;
  padding: 14px 18px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* For screen readers and search engines only. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hover callout: a label beside the cursor with a line back to the pixel. */
#leader {
  position: fixed;
  z-index: 20;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#leader line, #leader circle {
  stroke: var(--ink);
  stroke-width: 1;
  fill: none;
}

#callout {
  position: fixed;
  z-index: 20;
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  pointer-events: none;
  transform-origin: bottom left;
  animation: pop 0.16s ease-out;
}

#callout .host {
  font-weight: 400;
}

#callout .meta {
  font-size: 12px;
  color: var(--muted);
}

/* A callout pinned by a tap on touch screens can itself be tapped. */
#callout.pinned {
  pointer-events: auto;
  cursor: pointer;
}

@keyframes pop {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Visitor counter, top right. */
#visitors {
  position: fixed;
  top: 18px;
  right: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}

#visitors .digits {
  display: flex;
  font-size: 30px;
  font-weight: 200;
  line-height: 1;
}

#visitors .digit {
  position: relative;
  height: 1em;
  width: 0.56em;
  overflow: hidden;
}

#visitors .digit span {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#visitors .digit i {
  display: block;
  height: 1em;
  font-style: normal;
}

#visitors .comma {
  width: 0.25em;
  text-align: center;
}

#visitors .caption {
  font-size: 12px;
  color: var(--muted);
}

#visitors .free {
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted);
  opacity: 0.8;
}

/* Bottom middle: the contact address, which also puts the domain in screenshots. */
#address {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.7;
}

/* Bottom right: who runs the site. */
#credit {
  position: fixed;
  right: 22px;
  bottom: 20px;
  font-size: 11px;
  line-height: 24px; /* links big enough to tap */
  text-align: right;
  color: var(--muted);
  opacity: 0.5;
}

#credit a {
  color: inherit;
  text-decoration: none;
}

/* Bottom left: the select toggle. */
#legend {
  position: fixed;
  left: 22px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#select-toggle {
  align-self: flex-start;
  padding: 6px 14px;
  font-weight: 400;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
}

#select-toggle[aria-pressed="true"] {
  color: #000;
  background: var(--ink);
  border-color: var(--ink);
}

/* Above the credit: the coordinates under the pointer. */
#hud {
  position: fixed;
  right: 22px;
  bottom: 60px;
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}

/* Cards: the claim card and the owner's card, top left. Modals centre
   theirs over the dimmed globe. */
.card {
  position: fixed;
  z-index: 10;
  top: 56px;
  left: 22px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.modal {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.card.centered {
  position: relative;
  z-index: auto;
  top: auto;
  left: auto;
  width: 300px;
  padding: 24px 26px;
  font-size: 15px;
}

.card.centered p + p {
  margin-top: 10px;
}

.card.centered .lead {
  font-size: 18px;
  font-weight: 400;
}

.close {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 4px 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
}

.close:hover {
  color: var(--ink);
}

/* The big number at the top of a card: pixels, and the price beside it. */
.figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 34px;
  font-weight: 200;
  line-height: 1;
}

.figure .unit {
  font-size: 14px;
  color: var(--muted);
}

.figure .price {
  margin-left: auto;
  padding-right: 8px;
  font-size: 18px;
  font-weight: 300;
  color: var(--muted);
}

.status, .line {
  font-size: 12px;
  color: var(--muted);
}

.error {
  font-size: 12px;
  color: #ff7b6b;
}

.head {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.head .figure {
  flex: 1;
}

.icon {
  padding: 2px 5px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 3px;
}

.icon:hover:not(:disabled) {
  color: var(--ink);
}

/* Menu: a faint burger top left, a tiny list, and the language picker in it. */
#menu-button {
  position: fixed;
  z-index: 30;
  top: 18px;
  left: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 4px;
  background: none;
  border: 0;
  opacity: 0.45;
}

#menu-button:hover, #menu-button[aria-expanded="true"] {
  opacity: 1;
}

#menu-button i {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--ink);
}

#menu-button i:nth-child(2) {
  width: 10px;
}

#menu {
  position: fixed;
  z-index: 30;
  top: 44px;
  left: 22px;
  display: flex;
  flex-direction: column;
  min-width: 110px;
  padding: 4px 0;
  background: rgba(16, 24, 44, 0.96);
  border: 1px solid var(--line);
  border-radius: 4px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

#menu button {
  padding: 7px 14px;
  text-align: left;
  color: var(--muted);
  background: none;
  border: 0;
}

#menu button:hover, #menu button[aria-pressed="true"] {
  color: var(--ink);
}

.language-picker {
  margin-top: 4px;
  padding: 8px 10px 4px;
  border-top: 1px solid var(--line);
}

.language-picker input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  font-size: 16px; /* smaller makes iOS zoom in on focus */
  letter-spacing: inherit;
}

.language-picker input:focus {
  outline: none;
  border-color: var(--line-strong);
}

.language-picker ul {
  max-height: 40vh;
  margin: 4px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.language-picker a {
  display: block;
  padding: 6px 4px;
  color: var(--muted);
  text-decoration: none;
}

.language-picker a:hover, .language-picker a[aria-current="true"] {
  color: var(--ink);
}

.language-picker a[aria-current="true"]::after {
  content: "✓";
  margin-left: 8px;
}

/* The editor: the toolbar, the selection row, the buttons and fields. */
.tools {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toolbar {
  display: flex;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.tool {
  display: grid;
  place-items: center;
  width: 32px;
  height: 30px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.tool svg {
  width: 17px;
  height: 17px;
}

.tool:hover {
  color: var(--ink);
}

.tool[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--line-strong);
}

.toolbar .icon[data-action="undo"] {
  margin-left: auto;
}

.selection-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.selection-row > span {
  margin-right: auto;
}

.selection-row button, .selection-row .import {
  padding: 0;
  font-size: 12px;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}

.links a + a {
  margin-left: 12px;
}

.actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;
}

.primary {
  padding: 9px 16px;
  font-weight: 400;
  color: #000;
  background: var(--ink);
  border: 0;
  border-radius: 3px;
}

.primary .amount {
  margin-left: 8px;
  opacity: 0.6;
}

.primary.busy .amount {
  display: none;
}

.primary:hover:not(:disabled) {
  background: #fff;
}

.secondary {
  padding: 8px 16px;
  font-weight: 400;
  color: var(--ink);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}

.secondary:hover {
  border-color: var(--ink);
}

.ghost {
  align-self: flex-start;
  padding: 0;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ghost:hover {
  color: var(--ink);
}

.card button:disabled {
  opacity: 0.3;
  cursor: default;
}

.card input[type="url"], .card input[type="text"] {
  min-width: 0;
  padding: 8px 10px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  letter-spacing: inherit;
}

.card input:focus {
  outline: none;
  border-color: var(--line-strong);
}

.card a:not(.button) {
  color: var(--ink);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

a.button {
  display: block;
  text-align: center;
  text-decoration: none;
}

.note-above {
  margin-bottom: -6px;
  text-align: right;
}

/* The claim button while the reservation is being made. */
.primary.busy {
  position: relative;
  overflow: hidden;
  opacity: 1 !important;
  cursor: progress !important;
}

.primary.busy::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 40%;
  background: rgba(0, 0, 0, 0.55);
  animation: progress 0.9s ease-in-out infinite;
}

@keyframes progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

/* The brush: swatches, the colour picker and hex field, glow and blink. */
.brush {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid #000;
  outline: 1px solid var(--line);
  border-radius: 50%;
}

.swatch.active {
  outline-color: var(--ink);
}

.picker {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(#ff465a, #ffd23c, #46e08c, #3ca0ff, #a070ff, #ff465a);
  overflow: hidden;
}

.picker input {
  position: absolute;
  inset: -8px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.brush-hex, .brush-hex2 {
  width: 70px;
}

.effects {
  display: flex;
  gap: 14px;
  font-size: 13px;
}

.effects label {
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}

.blink-options {
  display: flex;
  gap: 7px;
  align-items: center;
}

.card select {
  padding: 4px 6px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  letter-spacing: inherit;
}

.card select option {
  background: #10182c;
}

.ms {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.card input[type="number"] {
  width: 64px;
  padding: 4px 6px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  letter-spacing: inherit;
  -moz-appearance: textfield;
}

.card input[type="number"]::-webkit-inner-spin-button,
.card input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.card input[type="number"]:focus {
  outline: none;
  border-color: var(--line-strong);
}

/* Checkboxes: a thin square that fills with a small inner block. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s;
}

input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--ink);
  transform: scale(0);
  transition: transform 0.12s ease-out;
}

input[type="checkbox"]:checked {
  border-color: var(--ink);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

/* The pages (charity, terms, privacy): reading cards over the globe. */
.card.page {
  display: block;
  position: relative;
  z-index: auto;
  top: auto;
  left: auto;
  width: min(640px, calc(100vw - 32px));
  max-height: min(85vh, calc(100% - 32px));
  padding: 26px 28px 28px;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.6;
}

.card.page h1 {
  margin: 0 0 10px;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
}

.card.page h2 {
  margin: 24px 0 6px;
  font-weight: 400;
  font-size: 16px;
}

/* :where() keeps this rule light, so the ballot's own lines below win. */
.card.page :where(p, ul) {
  margin: 0 0 10px;
  color: #b8bec7;
}

.card.page .lead {
  color: var(--ink);
}

.card.page strong {
  font-weight: 400;
  color: var(--ink);
}

.card.page a {
  color: var(--ink);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.card.page .updated, .card.page .line {
  color: var(--muted);
}

/* The charity ballot: a poll, one row per charity with its share of the
   votes as a bar. The width comes from the ballot controller (CSS can't
   read it off the markup, and the style attribute is barred by the CSP). */
.ballot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.ballot .pot {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 200;
  color: var(--ink);
}

.ballot form {
  display: contents;
}

.ballot .row {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  text-align: left;
  background: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)) left / var(--share, 0%) 100% no-repeat;
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: background-size 0.5s ease-out;
}

.ballot button.row {
  cursor: pointer;
}

.ballot button.row:hover, .ballot .row[aria-pressed="true"] {
  border-color: var(--line-strong);
}

.ballot .row[aria-pressed="true"] .name::after {
  content: " ✓";
}

.ballot .share {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ballot .line {
  margin: 4px 0 0;
}

.ballot .suggest {
  font-size: 13px;
  color: var(--muted);
}

.ballot .suggest summary {
  cursor: pointer;
  width: fit-content;
}

.ballot .suggest form {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.ballot .suggest input {
  flex: 1;
  min-width: 0;
}

.card.page .paid-out {
  color: var(--ink);
}

/* Phones: the corners pull in, the HUD goes, and cards become a sheet
   along the bottom. */
@media (max-width: 640px) {
  #legend {
    left: 14px;
    bottom: 14px;
  }

  #hud {
    display: none;
  }

  #credit {
    right: 14px;
    bottom: 36px; /* above the address */
    font-size: 10px;
  }

  #address {
    bottom: 14px;
    font-size: 11px;
  }

  #visitors {
    top: 12px;
    right: 14px;
  }

  #visitors .digits {
    font-size: 24px;
  }

  .card {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 60vh;
    overflow: auto;
    border-radius: 6px 6px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}