/* ---------- Fonts, served from this site so a venue network cannot block them ---------- */
@font-face { font-family: "DM Sans"; src: url(/fonts/dm-sans-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(/fonts/dm-sans-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(/fonts/dm-sans-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(/fonts/dm-sans-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* Arabic text uses IBM Plex Sans Arabic, which sits well beside DM Sans. It only loads where Arabic appears. */
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(/fonts/plex-arabic-500.woff2) format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url(/fonts/plex-arabic-600.woff2) format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Instrument Serif"; src: url(/fonts/instrument-serif-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Theme: navy first, then teal, violet, petrol and blue ---------- */
:root {
  color-scheme: dark;
  --navy: #002060;
  --teal: #32A89A;
  --violet: #4C00D5;
  --petrol: #095988;
  --blue: #2E5FA3;

  --ground: #002060;      /* page */
  --deep: #00184a;        /* bars and wells, one step darker */
  --raised: #0b2c70;      /* panels, one step lighter */
  --raised-2: #123784;    /* hover and nested panels */

  --text: #ffffff;
  --muted: #c3cfeb;       /* 8.4:1 on panels */
  --faint: #9fb2dc;       /* 6.1:1 on panels, meta only */
  --teal-ink: #5fd1c2;    /* teal for text on navy, 7.1:1 on panels */
  --blue-ink: #9cc0f0;
  --violet-ink: #b9a3ff;
  --petrol-ink: #7fc4e8;
  --danger: #c4242a;
  --line: rgba(195, 207, 235, 0.18);
  --blank-line: rgba(255, 255, 255, 0.6);

  --font: "DM Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; }
@media (pointer: fine) { html { overscroll-behavior: none; } }
body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(50, 168, 154, 0.25);
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
a { color: inherit; touch-action: manipulation; }
input, textarea, select { font: inherit; }
img { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 64px; padding: 0 30px; border-radius: 16px; border: 0;
  font-size: 23px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease, opacity .15s ease;
}
.btn svg { width: 24px; height: 24px; flex: none; }
.btn:active:not([disabled]) { transform: scale(0.98); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover:not([disabled]) { background: #5d14ea; }
.btn-teal { background: var(--teal); color: var(--navy); }
.btn-teal:hover:not([disabled]) { background: #3cbcad; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover:not([disabled]) { background: #e7eefb; }
.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.55); }
.btn-outline:hover:not([disabled]) { border-color: #fff; background: rgba(255, 255, 255, 0.07); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not([disabled]) { background: #d83038; }

.icon-btn {
  height: 52px; min-width: 52px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 19px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.55); }
.icon-btn svg { width: 22px; height: 22px; flex: none; }
.icon-btn.square { padding: 0; width: 52px; }

/* ---------- 16:9 stage for TV screens ---------- */
.stage-viewport { position: fixed; inset: 0; overflow: hidden; background: var(--ground); }
.stage {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; overflow: hidden; background: var(--ground);
}
.stage-viewport.flow { position: static; overflow: visible; }
.stage.flow { position: relative; width: auto; height: auto; min-height: 100vh; transform: none !important; overflow: visible; }

/* ---------- The statement and its blanks ---------- */
.statement { line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; }
.statement .para { margin: 0 0 0.55em; }
.statement .para:last-child { margin-bottom: 0; }
.blank {
  outline: none;               /* replaced by the tint and the solid line below */
  color: var(--teal-ink); font-weight: 600; caret-color: var(--teal-ink);
  border-radius: 4px; transition: background-color .2s ease;
  text-decoration: underline; text-decoration-color: var(--teal);
  text-decoration-thickness: 2px; text-underline-offset: 0.18em;
}
.blank:empty {
  display: inline-block; min-width: 6.5em; height: 1.1em; vertical-align: -0.22em;
  border-bottom: 3px dotted var(--blank-line); cursor: text; text-decoration: none;
}
.blank[contenteditable]:hover { background-color: rgba(95, 209, 194, 0.08); }
.blank[contenteditable]:focus { background-color: rgba(95, 209, 194, 0.16); box-shadow: 0 0 0 2px rgba(95, 209, 194, 0.6); }
.blank[contenteditable]:focus:empty { border-bottom: 3px solid var(--teal-ink); box-shadow: none; }
.blank.flash { animation: flash .8s ease; }
@keyframes flash { from { background-color: rgba(95, 209, 194, 0.35); } to { background-color: transparent; } }

/* ---------- Word cloud ---------- */
/* isolation keeps the words' z-index inside the cloud, so a cloud never paints over sticky bars or overlays */
.cloud { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; }
.cloud .word {
  position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; background: none;
  white-space: nowrap; line-height: 1; font-weight: 700; letter-spacing: -0.01em;
  border-radius: 6px; cursor: pointer;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.cloud .word:hover { opacity: 0.75; }
.cloud .word.new { animation: fadein .6s ease both; }
.cloud .word.gone { opacity: 0; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Pledge cards (sentence answers) ---------- */
/* Each answer is its own card. The set sits in the middle of the space, cards size to their text,
   and the whole set reflows and scales down as more answers arrive. */
.wall { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pledges {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: stretch; gap: 0.6em var(--gap);
}
.pledges { --cols: 1; --gap: 0.65em; }
.pledges li { display: flex; flex: 0 1 auto; max-width: min(100%, 19em); }
.pledges.multi li { flex: 1 1 auto; max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
.pledges li > .pledge { flex: 1; }
.pledges li[hidden] { display: none; }
.pledge {
  display: block; margin: 0; padding: 0.62em 0.95em 0.68em; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.075); border-radius: 0.75em;
  box-shadow: 0 0.5em 1.4em rgba(0, 10, 40, 0.28);
  text-align: center; color: var(--text); line-height: 1.32; font-weight: 400;
  cursor: pointer; overflow-wrap: anywhere; text-wrap: balance;
  transition: background-color .15s ease, border-color .15s ease;
}
.pledge:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); }
.pledge b { color: var(--teal-ink); font-weight: 600; }
.pledge .times { color: var(--faint); font-weight: 600; font-size: 0.8em; margin-inline-start: 0.35em; white-space: nowrap; }
/* Spotlight: the newest answer is a large card across the top, the others are smaller pills below it */
.pledges.style-spotlight li:first-child { flex: 1 1 100%; max-width: 100%; justify-content: center; margin-bottom: 0.25em; }
.pledges.style-spotlight li:first-child .pledge {
  flex: 0 1 auto; max-width: 24em; font-size: 1.55em; padding: 0.7em 1.1em 0.75em; border-radius: 0.6em;
  background: rgba(95, 209, 194, 0.1); border-color: rgba(95, 209, 194, 0.45); box-shadow: 0 0.6em 1.8em rgba(0, 10, 40, 0.35);
}
.pledges.style-spotlight li:not(:first-child) { flex: 0 1 auto; max-width: 100%; }
.pledges.style-spotlight li:not(:first-child) .pledge {
  font-size: 0.9em; padding: 0.42em 0.95em 0.46em; border-radius: 1.4em; box-shadow: none; background: rgba(255, 255, 255, 0.06);
}
.pledge.new { animation: pop .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wall .more { position: absolute; right: 0; bottom: 0; line-height: 1.4; font-size: 16px; color: var(--faint); font-variant-numeric: tabular-nums; }

.empty-state {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; color: var(--faint); font-size: 24px; text-align: center; pointer-events: none; padding: 0 16px;
}
.dots span { display: inline-block; width: 11px; height: 11px; margin: 0 5px; border-radius: 50%; background: var(--faint); animation: bounce 1.2s infinite ease-in-out; }
.dots span:nth-child(2) { animation-delay: .15s; }
.dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* ---------- Confirm dialog ---------- */
dialog.dlg {
  border: 0; padding: 0; border-radius: 20px; background: var(--raised); color: var(--text);
  width: min(600px, calc(100vw - 32px)); overscroll-behavior: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
dialog.dlg::backdrop { background: rgba(0, 10, 36, 0.65); }
.dlg form { padding: 30px 30px 26px; }
.dlg h2 { margin: 0 0 12px; font-size: 26px; font-weight: 600; line-height: 1.25; }
.dlg p { margin: 0 0 26px; font-size: 19px; line-height: 1.5; color: var(--muted); }
.dlg .dlg-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.dlg .btn { height: 54px; font-size: 19px; padding: 0 24px; border-radius: 12px; }

/* ---------- Image viewer ---------- */
dialog.viewer { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; overscroll-behavior: contain; }
dialog.viewer::backdrop { background: rgba(0, 10, 36, 0.92); }
dialog.viewer img { display: block; max-width: 94vw; max-height: 86vh; width: auto; height: auto; border-radius: 12px; }
dialog.viewer .cap { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; color: #fff; font-size: 20px; font-weight: 600; }

/* ---------- Toasts ---------- */
.toast-region {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; width: max-content; max-width: calc(100vw - 32px);
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 16px;
  background: #fff; color: var(--navy); padding: 14px 18px; border-radius: 14px;
  font-weight: 600; font-size: 17px; line-height: 1.4; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: none; }
.toast.error { background: #ffe2e2; color: #7a1010; }
.toast button { border: 0; background: var(--navy); color: #fff; padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 16px; }

/* ---------- Glass logo layer (design 4) ---------- */
.glass-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.glass-layer svg { position: absolute; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* An Arabic line under an English question: right to left, same colour and weight */
.ar-line { display: block; direction: rtl; text-align: right; font-family: "IBM Plex Sans Arabic", var(--font); line-height: 1.5; }