:root {
  --ground: #141C17;      /* olive-black: night over the groves */
  --ground-2: #1D2821;
  --linen: #ECE5D3;       /* undyed linen */
  --linen-dim: #B9B19C;
  --stone: #B9AE92;       /* hillside limestone */
  --tatreez: #CF3B3B;     /* embroidery red: Israeli-controlled land */
  --olive: #8C9A5B;       /* Palestinian civil control */
  --line: rgba(236, 229, 211, 0.16);

  --display: "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --body: "IBM Plex Sans Arabic", system-ui, sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-3: 2.375rem;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ground);
  color: var(--linen);
  font: 400 var(--step-0)/1.55 var(--body);
  overflow: hidden;
}

#globe { position: fixed; inset: 0; }

a { color: var(--linen); text-decoration-color: var(--tatreez); text-underline-offset: 3px; }

button {
  font: 500 var(--step--1)/1 var(--body);
  color: var(--linen);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.6rem 1rem;
  cursor: pointer;
}
button:hover { border-color: var(--linen-dim); }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--linen); outline-offset: 2px; }
button.primary { background: var(--linen); color: var(--ground); border-color: var(--linen); }
button.primary:hover { background: #fff; }
button[disabled] { opacity: 0.35; cursor: default; }

/* --- top bar --- */

.bar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem;
  pointer-events: none;
  z-index: 3;
}
.bar > * { pointer-events: auto; }
.brand {
  font: 700 var(--step-1)/1.1 var(--display);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.bar nav { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.bar nav button { background: rgba(20, 28, 23, 0.7); backdrop-filter: blur(6px); }
.bar nav button[aria-pressed="true"] { border-color: var(--linen); }

/* --- chapter card --- */

.card {
  position: fixed;
  left: 1.5rem; top: 5rem; bottom: 6.5rem;
  width: min(26rem, calc(100vw - 3rem));
  display: flex; flex-direction: column;
  padding: 1.75rem 1.75rem 1.25rem;
  background: rgba(20, 28, 23, 0.86);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-y: auto;
  z-index: 2;
}
.card-year {
  margin: 0 0 0.5rem;
  font: 500 var(--step-1)/1 var(--display);
  color: var(--tatreez);
}
.card h1 {
  margin: 0 0 1rem;
  font: 700 var(--step-3)/1.08 var(--display);
  text-wrap: balance;
}
.card-body p { margin: 0 0 0.9rem; max-width: 62ch; color: var(--linen); }
.card-body .note { font-size: var(--step--1); color: var(--linen-dim); }
.card-actions { margin-top: auto; padding-top: 1rem; display: flex; justify-content: space-between; gap: 0.5rem; }
.card[data-mode="explore"] .card-actions { display: none; }

/* figure: the share, drawn as a row of cross-stitches */
.share { margin: 0.25rem 0 1.1rem; }
.share-num { font: 700 3.5rem/1 var(--display); color: var(--tatreez); }
.share-label { display: block; margin-top: 0.35rem; color: var(--linen-dim); font-size: var(--step--1); }
.stitch-bar {
  --pct: 50%;
  height: 12px; margin-top: 0.75rem;
  background:
    linear-gradient(90deg, transparent var(--pct), var(--ground) var(--pct)),
    repeating-linear-gradient(45deg, var(--tatreez) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, var(--tatreez) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px var(--line);
}

.compare-controls { display: grid; gap: 0.75rem; margin: 0.25rem 0 1rem; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { flex: 1; border: 0; padding: 0.5rem 0.75rem; }
.seg button[aria-pressed="true"] { background: var(--linen); color: var(--ground); }
label.field { display: grid; gap: 0.35rem; font-size: var(--step--1); color: var(--linen-dim); }
select {
  font: 500 var(--step-0)/1.2 var(--body);
  color: var(--linen); background: var(--ground-2);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0.55rem 0.6rem;
}
.regions { font-size: var(--step--1); color: var(--linen-dim); }

.mini { display: block; height: 7rem; width: auto; max-width: 100%; margin: 0.25rem 0 0.75rem; }

/* --- legend --- */

.legend {
  position: fixed; right: 1.5rem; bottom: 6.5rem;
  max-width: 17rem;
  padding: 0.85rem 1rem;
  background: rgba(20, 28, 23, 0.86);
  border: 1px solid var(--line); border-radius: 6px;
  font-size: var(--step--1);
  z-index: 2;
}
.legend:empty { display: none; }
.legend summary { cursor: pointer; font-weight: 500; color: var(--linen-dim); }
.legend details[open] summary { margin-bottom: 0.6rem; }
.legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.legend label { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.legend input { accent-color: var(--linen); margin: 0; }
.swatch { width: 14px; height: 14px; flex: none; border-radius: 2px; }
.swatch.line { height: 3px; border-radius: 0; }
.swatch.dashed { height: 0; border-top: 3px dashed; background: none !important; }

/* --- timeline: one cross-stitch per chapter --- */

.timeline {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 0.9rem 1.5rem 1.2rem;
  background: linear-gradient(to top, var(--ground) 40%, transparent);
  z-index: 2;
}
.timeline ol {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 62rem;
  display: flex; justify-content: space-between; gap: 0.25rem;
  position: relative;
}
.timeline ol::before {
  content: ""; position: absolute; left: 0; right: 0; top: 13px;
  border-top: 1px dashed var(--line);
}
.timeline button {
  position: relative;
  display: grid; justify-items: center; gap: 0.4rem;
  border: 0; border-radius: 0; padding: 0 0.25rem;
  color: var(--linen-dim);
  font: 500 var(--step--1)/1 var(--body);
}
.timeline .x {
  width: 26px; height: 26px;
  background: var(--ground);
  position: relative;
}
.timeline .x::before, .timeline .x::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 3px; margin: -1.5px 0 0 -9px;
  background: var(--linen-dim);
  border-radius: 1px;
}
.timeline .x::before { transform: rotate(45deg); }
.timeline .x::after { transform: rotate(-45deg); }
.timeline .done .x::before, .timeline .done .x::after { background: var(--stone); }
.timeline [aria-current="step"] { color: var(--linen); }
.timeline [aria-current="step"] .x::before,
.timeline [aria-current="step"] .x::after { background: var(--tatreez); width: 22px; margin-left: -11px; }
body[data-mode="explore"] .timeline { display: none; }

/* --- loading --- */

.loading {
  position: fixed; inset: 0; z-index: 5;
  display: grid; place-content: center; justify-items: center; gap: 1rem;
  background: var(--ground);
  font: 500 var(--step-1)/1.3 var(--display);
  text-align: center; padding: 1rem;
}
.loading[hidden] { display: none; }

/* --- about dialog --- */

dialog {
  width: min(44rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 2rem 2rem 1.5rem;
  color: var(--linen); background: var(--ground-2);
  border: 1px solid var(--line); border-radius: 6px;
}
dialog::backdrop { background: rgba(10, 14, 11, 0.7); }
dialog h2 { font: 700 var(--step-2)/1.15 var(--display); margin: 0 0 1rem; }
dialog h3 { font: 500 var(--step-1)/1.2 var(--display); margin: 1.5rem 0 0.5rem; }
dialog p, dialog li { max-width: 68ch; }
dialog ul { padding-left: 1.2rem; }
dialog li { margin-bottom: 0.4rem; }
dialog .close { position: absolute; top: 0.75rem; right: 0.75rem; font-size: 1.25rem; padding: 0.3rem 0.7rem; }
.small { font-size: var(--step--1); color: var(--linen-dim); }

/* --- small screens: card becomes a bottom sheet --- */

@media (max-width: 720px) {
  .bar { padding: 0.75rem 1rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .brand { font-size: var(--step-0); }
  .bar nav button { padding: 0.45rem 0.75rem; }
  .card {
    left: 0; right: 0; bottom: 4.25rem; top: auto;
    width: auto; max-height: 52vh;
    border-radius: 6px 6px 0 0; border-left: 0; border-right: 0;
    padding: 1.25rem 1rem 1rem;
  }
  .card h1 { font-size: var(--step-2); }
  .share-num { font-size: 2.75rem; }
  .legend { top: 6.25rem; bottom: auto; right: 1rem; left: auto; max-width: 15rem; padding: 0.6rem 0.8rem; }
  body[data-mode="story"] .legend { display: none; }
  .timeline { padding: 0.6rem 1rem 0.8rem; }
  .timeline button { padding: 0; }
  .timeline .x { width: 22px; height: 22px; }
  .timeline ol::before { top: 11px; }
  .timeline .label { visibility: hidden; }
  .timeline [aria-current="step"] .label { visibility: visible; }
  body[data-mode="explore"] .card { max-height: 34vh; bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}