/* The Week Ahead · styles
 * 1 Tokens  2 Base  3 Background and top bar  4 Intro  5 Days  6 Event cards  7 Clash beams
 * 8 Summary and footer  9 Date dock  10 Sheet  11 Full list  12 Larger and foldable screens
 */

/* ===== 1 Tokens: dark is the default theme ===== */

:root {
  --base: #050807;
  --base-2: #0a100d;
  --text: #edf3f0;
  --muted: #b9c6c0;
  --faint: #9aa8a1;
  --line: rgb(220 255 235 / 10%);
  --card: #0d1412;
  --card-b: rgb(200 255 225 / 9%);
  --panel: color-mix(in srgb, var(--card) 70%, transparent);
  --panel-b: var(--card-b);
  --panel-shadow: none;
  --dock: rgb(10 16 13 / 80%);
  --accent: #8fe8c0;
  --fill: #6fddaa;
  --on-fill: #03130c;
  --auh: #8fe8c0;
  --dxb: #a6d2f5;
  --auh-g: rgb(90 220 160 / 22%);
  --dxb-g: rgb(110 175 235 / 18%);
  --warm-c: rgb(240 165 60 / 20%);
  --clash: #f6c064;
  --clash-l: #f6c064;
  --comp: #8fe8c0;
  --auh-s1: #f2fff8;
  --auh-s2: #a9f0cf;
  --auh-s3: #5fd8a2;
  --dxb-s1: #f3f9ff;
  --dxb-s2: #bbddfa;
  --dxb-s3: #6fb4ee;
  --lead-auh: color-mix(in srgb, var(--auh) 12%, transparent);
  --lead-auh-b: color-mix(in srgb, var(--auh) 30%, transparent);
  --lead-dxb: color-mix(in srgb, var(--dxb) 12%, transparent);
  --lead-dxb-b: color-mix(in srgb, var(--dxb) 30%, transparent);
  --shadow: 0 20px 50px -22px rgb(0 0 0 / 75%);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --top-bar: 70px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --base: #fff;
  --base-2: #fbfcfb;
  --text: #0f1613;
  --muted: #4e5a54;
  --faint: #66716b;
  --line: rgb(15 22 19 / 9%);
  --card: #fff;
  --card-b: rgb(15 22 19 / 8%);
  --panel: #fff;
  --panel-b: rgb(15 22 19 / 9%);
  --panel-shadow: 0 1px 2px rgb(15 22 19 / 4%), 0 8px 24px -18px rgb(15 22 19 / 22%);
  --dock: rgb(255 255 255 / 86%);
  --accent: #0b7350;
  --fill: #7fe2b4;
  --auh: #0b7350;
  --dxb: #2d5f86;
  --auh-g: rgb(120 225 175 / 16%);
  --dxb-g: rgb(130 185 235 / 12%);
  --warm-c: rgb(240 170 70 / 12%);
  --clash: #8f5200;
  --clash-l: #e08a10;
  --comp: #0b7350;
  --lead-auh: #eaf6f0;
  --lead-auh-b: #bfe3d0;
  --lead-dxb: #eaf2fa;
  --lead-dxb-b: #c3d8ec;
  --shadow: 0 1px 2px rgb(15 22 19 / 4%), 0 10px 28px -18px rgb(15 22 19 / 25%);

  color-scheme: light;
}

/* ===== 2 Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  line-height: 1.5;
  color: var(--text);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
}

:root[lang="ar"] body {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
}

svg {
  flex: none;
}

:focus-visible {
  border-radius: 10px;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

.noscript {
  padding-block: 120px;
  font-size: 17px;
  color: var(--muted);
}

/* Category, counter and status chips share one shape */
.chip,
.tag {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding-block: 5px;
  padding-inline: 7px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid;
  border-radius: 999px;
}

.chip svg,
.tag svg {
  width: 12px;
  height: 12px;
}

.chip {
  color: #fff;
  background: rgb(6 16 12 / 74%);
  border-color: rgb(255 255 255 / 14%);
}

.tag {
  color: var(--muted);
  background: var(--base-2);
  border-color: var(--card-b);
}

/* ===== 3 Background and top bar ===== */

/*
 * Each city glows on its own side; app.js sets each glow's opacity to follow the day.
 * Every glow is a viewport-sized layer whose opacity is animated, so the GPU only blends
 * finished layers and never repaints them.
 */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--base);
}

.sky i {
  position: absolute;
  inset: 0;
  transition: opacity 1.4s var(--ease-io);
}

.glow-base {
  background: radial-gradient(60vmax 37.5vmax at 35vmax calc(100% + 4.5vmax), var(--base-2), transparent);
  opacity: 0.6;
}

.glow-auh {
  background: radial-gradient(55vmax 42.5vmax at 3vmax 16.5vmax, var(--auh-g), transparent);
  opacity: 0.66;
}

.glow-dxb {
  background: radial-gradient(55vmax 42.5vmax at calc(100% - 3vmax) calc(18vh + 30.5vmax), var(--dxb-g), transparent);
  opacity: 0.66;
}

.glow-warm {
  background: radial-gradient(38vmax 31vmax at 50% calc(30vh + 20vmax), var(--warm-c), transparent);
  opacity: 0;
}

.glow-cool {
  background: radial-gradient(38vmax 31vmax at 50% calc(40vh + 20vmax), var(--auh-g), transparent);
  opacity: 0;
}

.prog {
  position: fixed;
  inset: 0 0 auto;
  z-index: 41;
  height: 2px;
  background: linear-gradient(90deg, var(--auh), var(--dxb));
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

:root[dir="rtl"] .prog {
  transform-origin: 100% 50%;
}

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  transition: background 0.4s, backdrop-filter 0.4s;
}

.bar.solid {
  background: color-mix(in srgb, var(--base) 70%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.brand {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s, transform 0.4s var(--ease);
}

.bar.solid .brand {
  opacity: 1;
  transform: none;
}

.controls {
  display: flex;
  gap: 6px;
  margin-inline-start: auto;
}

.icon-btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  font-size: 13px;
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border: 1px solid var(--card-b);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.3s var(--ease);
}

.icon-btn:active {
  transform: scale(0.92);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

/* ===== 4 Intro ===== */
@keyframes grow {
  from { transform: scaleX(0); }
}

@keyframes fade {
  to { opacity: 1; }
}

@keyframes rise-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.intro {
  display: flex;
  flex-direction: column;
  padding-block: calc(64px + env(safe-area-inset-top)) 190px;
}

.kicker {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.kicker-line {
  width: 28px;
  height: 1px;
  background: currentcolor;
  transform-origin: 0 50%;
  animation: grow 1s var(--ease) 0.2s both;
}

.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 24px;
  direction: ltr; /* Abu Dhabi stays on the left in both languages */
}

.stat {
  position: relative;
  padding: 20px 16px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--panel-b);
  border-radius: 24px;
  box-shadow: var(--panel-shadow);
  opacity: 0;
  transform: translateY(22px);
  animation: rise-in 0.9s var(--ease) both;
}

:root[dir="rtl"] .stat,
:root[dir="rtl"] .side {
  direction: rtl;
}

.stat.c-auh {
  animation-delay: 0.3s;
}

.stat.c-dxb {
  animation-delay: 0.45s;
}

.stat::before {
  position: absolute;
  top: -55%;
  width: 110%;
  aspect-ratio: 1;
  pointer-events: none;
  content: "";
  border-radius: 50%;
  opacity: 0.7;
}

.stat.c-auh::before {
  left: -45%;
  background: radial-gradient(closest-side, var(--auh-g), transparent);
}

.stat.c-dxb::before {
  right: -45%;
  background: radial-gradient(closest-side, var(--dxb-g), transparent);
}

:root[data-theme="light"] .stat::before {
  display: none;
}

.stat > * {
  position: relative;
}

.c-auh {
  --city: var(--auh);
  --lead: var(--lead-auh);
  --lead-b: var(--lead-auh-b);
  --s1: var(--auh-s1);
  --s2: var(--auh-s2);
  --s3: var(--auh-s3);
  --from: -1;
}

.c-dxb {
  --city: var(--dxb);
  --lead: var(--lead-dxb);
  --lead-b: var(--lead-dxb-b);
  --s1: var(--dxb-s1);
  --s2: var(--dxb-s2);
  --s3: var(--dxb-s3);
  --from: 1;
}

.stat-city,
.city {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
  color: var(--city);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.stat-city {
  font-size: 13px;
}

.stat-city i,
.city i {
  height: 2px;
  background: currentcolor;
  border-radius: 2px;
}

.stat-city i {
  width: 18px;
}

.leads {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 14px;
}

.leads-label {
  flex-basis: 100%;
  margin-bottom: 2px;
  font-size: 11px;
  color: var(--faint);
}

.lead {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding-block: 3px;
  padding-inline: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--city);
  background: var(--lead);
  border: 1px solid var(--lead-b);
  border-radius: 999px;
}

.lead svg {
  width: 13px;
  height: 13px;
}

.kpi {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
}

.kpi b {
  font-size: clamp(40px, 11vw, 72px);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.kpi-sm b {
  font-size: clamp(28px, 8vw, 44px);
}

.kpi span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.kpi span svg {
  width: 12px;
  height: 12px;
  color: var(--city);
  vertical-align: -1px;
}

.stat p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

:root[data-theme="light"] .stat p {
  color: #26312c;
}

.stat hr {
  height: 1px;
  margin: 18px 0 0;
  background: var(--line);
  border: 0;
}

.signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  opacity: 0;
  animation: fade 0.8s var(--ease) 0.8s both;
}

.signals span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--panel-b);
  border-radius: 999px;
  box-shadow: var(--panel-shadow);
}

.signals b {
  font-weight: 600;
  color: var(--text);
}

.signals i {
  width: 7px;
  height: 7px;
  background: var(--faint);
  border-radius: 50%;
}

.signals .competing i {
  background: var(--clash-l);
  box-shadow: 0 0 8px var(--clash-l);
}

.signals .complementary i {
  background: var(--comp);
}

.why-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 4px;
  margin-top: 16px;
  margin-inline-start: -4px;
  font-size: 15px;
  color: var(--accent);
  opacity: 0;
  animation: fade 0.8s var(--ease) 1.25s both;
}

.why-link span {
  padding-bottom: 2px;
  background: linear-gradient(currentcolor, currentcolor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--ease);
}

.why-link:hover span {
  background-size: 100% 1px;
}

.why-link svg {
  width: 16px;
  height: 16px;
}

/* ===== 5 Days ===== */
.day {
  position: relative;
  padding-block: 48px;
  overflow-x: clip;
}

.day-head {
  display: grid;
  gap: 8px;
  margin-bottom: 28px;
}

.day-week {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

.day-head h2 {
  font-size: clamp(28px, 7vw, 48px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.day-head h2 b {
  font-weight: 600;
}

.day-line {
  max-width: 36em;
  font-size: 15px;
  color: var(--muted);
  text-wrap: pretty;
}

.flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.flag {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--panel-b);
  border-radius: 999px;
  box-shadow: var(--panel-shadow);
}

.flag svg {
  width: 13px;
  height: 13px;
}

.flag.competing {
  color: var(--clash);
  background: color-mix(in srgb, var(--clash-l) 12%, var(--card));
  border-color: color-mix(in srgb, var(--clash-l) 45%, transparent);
}

.flag.complementary {
  color: var(--comp);
  background: color-mix(in srgb, var(--comp) 10%, var(--card));
  border-color: color-mix(in srgb, var(--comp) 35%, transparent);
}

.note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  margin-bottom: 28px;
  font-size: 15px;
  color: var(--muted);
  background: var(--panel);
  border: 1px dashed var(--panel-b);
  border-radius: 18px;
}

.note svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--faint);
}

.note b {
  font-weight: 600;
  color: var(--text);
}

.stage {
  position: relative;
}

.split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  direction: ltr; /* Abu Dhabi stays on the left in both languages */
}

.seam {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, var(--line) 12%, var(--line) 88%, transparent);
  transform: scaleY(0);
  transform-origin: 50% 0;
  translate: -0.5px 0;
  transition: transform 1.2s var(--ease);
}

.day.in .seam {
  transform: scaleY(1);
}

.side {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.city {
  position: sticky;
  top: calc(var(--top-bar) + env(safe-area-inset-top));
  z-index: 6;
  padding: 8px 10px;
  margin-inline: -6px;
  font-size: 15.5px;
  background: var(--base);
  border-radius: 14px;
  transition: box-shadow 0.3s;
}

.city.stuck {
  box-shadow: 0 0 0 1px var(--card-b), 0 10px 24px -14px rgb(0 0 0 / 45%);
}

.city i {
  width: 22px;
}

.city-count {
  display: none;
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--faint);
  text-transform: none;
  letter-spacing: 0;
}

.day.has-clash .city {
  margin-bottom: 40px;
}

.empty {
  padding: 34px 14px;
  text-align: center;
  border: 1px dashed var(--card-b);
  border-radius: 22px;
  opacity: 0;
  transition: opacity 1s var(--ease) 0.3s;
}

.day.in .empty {
  opacity: 1;
}

.empty-ring {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.empty-ring::after {
  position: absolute;
  inset: -1px;
  content: "";
  border: 1px solid var(--dxb);
  border-radius: 50%;
  opacity: 0.5;
}

.empty b {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.empty-text {
  font-size: 13px;
  color: var(--muted);
}

/* ===== 6 Event cards: photo on top, text below; each card enters from its city's side ===== */
@keyframes shine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes spin {
  to { rotate: 360deg; }
}

.ev {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  text-align: start;
  isolation: isolate;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: 22px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateX(calc(var(--from) * 28px)) scale(0.96);
  transition: opacity 0.55s var(--ease), transform 0.7s var(--ease), box-shadow 0.4s;
  transition-delay: calc(var(--i) * 60ms);
}

.day.in .ev {
  opacity: 1;
  transform: none;
}

.ev.tilt {
  transition: transform 0.2s ease-out, box-shadow 0.4s;
}

.ev:hover {
  box-shadow: var(--shadow), 0 0 0 1px var(--card-b);
}

.ev.competing {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--clash-l) 70%, transparent), 0 0 36px -6px var(--clash-l), var(--shadow);
}

.ev.competing:hover {
  box-shadow: 0 0 0 1.5px var(--clash-l), 0 0 44px -4px var(--clash-l);
}

.ev.complementary {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--comp) 55%, transparent), 0 0 30px -10px var(--comp), var(--shadow);
}

.ev-media {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  color: var(--accent);
  background: color-mix(in srgb, var(--auh) 14%, var(--card));
}

.ev-icon svg {
  stroke-width: 1.6;
  width: 64px;
  height: 64px;
  opacity: 0.7;
}

.ev-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  transition: transform 1.6s var(--ease);
  transition-delay: calc(var(--i) * 90ms);
}

.day.in .ev-media img {
  transform: scale(1.02);
}

.ev:hover .ev-media img {
  transform: scale(1.07);
  transition-duration: 0.9s;
  transition-delay: 0s;
}

.ev-top {
  position: absolute;
  inset: 10px 10px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ev-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 14px 16px;
}

.ev-body .chip {
  margin-bottom: 6px;
  color: var(--muted);
  background: var(--base-2);
  border-color: var(--card-b);
}

.ev-new {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--clash);
}

.ev-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.ev-detail {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* signature seal: city colour, one shine on arrival */
.seal {
  position: relative;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 24px;
  padding-inline: 7px 9px;
  margin-inline-start: auto;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  color: #05150e;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: linear-gradient(120deg, var(--s1) 0%, var(--s2) 45%, var(--s3) 100%);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 50%) inset, 0 6px 18px -4px color-mix(in srgb, var(--s3) 80%, transparent);
}

.c-dxb .seal {
  color: #05121e;
}

.seal svg {
  width: 12px;
  height: 12px;
}

.seal::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 85%) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: shine 1.6s ease-in-out 1.4s;
}

.day:not(.vis) .seal::after {
  animation-play-state: paused;
}

/*
 * Signature card: a slowly turning light around the border while on screen.
 * A conic gradient larger than the card rotates behind a 1.5px gap around the content.
 * Rotating a finished layer is GPU work only, so nothing is repainted per frame.
 */
.ev.is-sig {
  padding: 1.5px;
}

.ev.is-sig::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 200%;
  aspect-ratio: 1;
  pointer-events: none;
  content: "";
  background: conic-gradient(transparent, color-mix(in srgb, var(--s2) 95%, transparent), color-mix(in srgb, var(--s3) 25%, transparent), transparent 60%);
  translate: -50% -50%;
  animation: spin 6s linear infinite paused;
}

.ev.is-sig.vis::before {
  animation-play-state: running;
}

.ev.is-sig .ev-media {
  border-radius: 20.5px 20.5px 0 0;
}

.ev.is-sig .ev-body {
  flex: 1;
  background: var(--card);
  border-radius: 0 0 20.5px 20.5px;
}

/* ===== 7 Clash beams ===== */
@keyframes ring {
  from {
    opacity: 0.7;
    transform: scale(0.6);
  }

  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

.beam {
  --tone: var(--clash-l);

  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  overflow: visible;
  pointer-events: none;
}

.beam.complementary,
.knot.complementary {
  --tone: var(--comp);
}

.beam path {
  fill: none;
  stroke: var(--tone);
}

.beam circle {
  fill: var(--tone);
}

.beam-glow {
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.18;
}

.beam-line {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.4s var(--ease) 0.5s;
}

.beam.on .beam-line {
  stroke-dashoffset: 0;
}

.beam-ends,
.beam-dot {
  opacity: 0;
}

.beam-ends {
  transition: opacity 0.4s 0.4s;
}

.beam-dot {
  transition: opacity 0.4s 1.6s;
}

.beam.on .beam-ends,
.beam.on .beam-dot {
  opacity: 1;
}

.beam .end {
  stroke: var(--base);
  stroke-width: 2.5;
}

.beam .ring {
  fill: none;
  stroke: var(--tone);
  stroke-width: 1.5;
  opacity: 0.5;
  transform-origin: center;
  transform-box: fill-box;
  animation: ring 2.4s ease-out infinite;
}

.day:not(.vis) .beam .ring {
  animation-play-state: paused;
}

.knot {
  position: absolute;
  z-index: 7;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 600;
  color: var(--clash);
  white-space: nowrap;
  background: var(--base);
  border: 1px solid color-mix(in srgb, var(--tone, var(--clash-l)) 60%, transparent);
  border-radius: 999px;
  box-shadow: 0 0 20px -4px var(--clash-l);
  opacity: 0;
  translate: -50% -50%;
  scale: 0.6;
  transition: opacity 0.5s var(--ease) 1.5s, scale 0.6s var(--spring) 1.5s;
}

.knot.complementary {
  color: var(--comp);
  box-shadow: none;
}

.knot::before {
  position: absolute;
  inset: -12px -4px; /* enlarges the touch target to 56px tall */
  content: "";
}

.knot svg {
  width: 13px;
  height: 13px;
}

.knot.on {
  opacity: 1;
  scale: 1;
}

/* ===== 8 Summary and footer ===== */
.summary {
  padding-block: 88px 48px;
}

.summary h2 {
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 300;
  letter-spacing: -0.03em;
}

.lede {
  max-width: 34em;
  margin-top: 16px;
  font-size: clamp(17px, 4.4vw, 21px);
  font-weight: 300;
  line-height: 1.5;
}

.points {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}

.point {
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--panel-b);
  border-radius: 20px;
  box-shadow: var(--panel-shadow);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i) * 80ms);
}

.summary.in .point {
  opacity: 1;
  transform: none;
}

.point b {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 8px;
  background: var(--accent);
  border-radius: 50%;
}

.point.competing .dot {
  background: var(--clash-l);
}

.point.complementary .dot {
  background: var(--comp);
}

.point.quiet .dot {
  background: var(--faint);
}

.to-list {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px 22px;
  margin-top: 28px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--auh) 18%, var(--card)), color-mix(in srgb, var(--dxb) 18%, var(--card)));
  border: 1px solid var(--card-b);
  border-radius: 22px;
  transition: transform 0.4s var(--ease);
}

:root[data-theme="light"] .to-list {
  background: #fff;
  box-shadow: var(--panel-shadow);
}

.to-list:active {
  transform: scale(0.98);
}

.to-list b {
  display: block;
  font-size: 17px;
  font-weight: 600;
}

.to-list span span {
  font-size: 13px;
  color: var(--muted);
}

.to-list-arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  color: var(--on-fill);
  background: var(--fill);
  border-radius: 50%;
  transition: transform 0.4s var(--ease);
}

.to-list:hover .to-list-arrow {
  transform: translateX(4px);
}

:root[dir="rtl"] .to-list:hover .to-list-arrow {
  transform: translateX(-4px);
}

.to-list-arrow svg {
  width: 20px;
  height: 20px;
}

:root[dir="rtl"] .to-list-arrow svg,
:root[dir="rtl"] .back-link svg,
:root[dir="rtl"] .row > svg {
  transform: scaleX(-1);
}

.foot {
  display: grid;
  padding-block: 40px calc(130px + env(safe-area-inset-bottom));
}

.foot button {
  justify-self: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ===== 9 Date dock: floats under the intro, then docks in the thumb zone ===== */
@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }
}

@keyframes halo {
  0% { box-shadow: var(--dock-shadow), 0 0 0 0 color-mix(in srgb, var(--accent) 28%, transparent); }
  70% { box-shadow: var(--dock-shadow), 0 0 0 8px transparent; }
  100% { box-shadow: var(--dock-shadow), 0 0 0 0 transparent; }
}

@keyframes drip {
  0% {
    opacity: 0.7;
    transform: scale(0.82);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes nod {
  0%,
  24%,
  100% { transform: none; }
  12% { transform: translateY(-3px); }
}

@keyframes bump {
  0% { transform: none; }
  60% { transform: translateY(-7px) scale(1.1); }
  100% { transform: translateY(-4px) scale(1.06); }
}

.dock {
  --dock-shadow: 0 18px 40px -16px rgb(0 0 0 / 45%);

  position: fixed;
  inset-inline: 0;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 45;
  width: min(560px, calc(100vw - 20px));
  padding: 10px 6px 6px;
  margin-inline: auto;
  background: var(--dock);
  border: 1px solid var(--card-b);
  border-radius: 26px;
  box-shadow: var(--dock-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  translate: 0 var(--off, 0);
  transition: translate 0.9s cubic-bezier(0.34, 1.35, 0.64, 1), padding 0.6s var(--ease), width 0.6s var(--ease), border-radius 0.6s var(--ease);
  animation: enter 1s cubic-bezier(0.34, 1.45, 0.64, 1) 0.9s both;
}

.dock.follow {
  transition: padding 0.6s var(--ease), width 0.6s var(--ease);
}

.dock.hero {
  width: min(640px, calc(100vw - 16px));
  padding: 14px 6px 12px;
  border-radius: 30px;
  animation: enter 1s cubic-bezier(0.34, 1.45, 0.64, 1) 0.9s both, halo 2.8s ease-out 2s infinite;
}

/* lets app.js read the final hero height without waiting for transitions */
.dock.measuring,
.dock.measuring .dt,
.dock.measuring .drow {
  transition: none;
}

.drow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  touch-action: pan-y;
  transition: gap 0.6s var(--ease);
}

.dock.hero .drow {
  gap: 3px;
}

.hint {
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% + 20px);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.5s var(--ease);
}

.dock.hero .hint {
  opacity: 1;
  transform: none;
  transition-delay: 1.6s;
}

.hint svg {
  width: 13px;
  height: 13px;
  margin-inline-end: 4px;
  color: var(--accent);
  vertical-align: -2px;
}

/* the sliding pill behind the active day */
.ind {
  position: absolute;
  top: -11px;
  bottom: -9px;
  left: -3px;
  width: calc(100% / 7 + 6px);
  background: linear-gradient(160deg, var(--fill), color-mix(in srgb, var(--fill) 60%, #000));
  border-radius: 22px;
  box-shadow: 0 6px 18px -6px var(--fill);
  opacity: var(--indo, 1);
  transform: translateX(calc(var(--k, 0) * (100% - 6px)));
  transition: transform 0.6s var(--ease), opacity 0.4s;
}

:root[dir="rtl"] .ind {
  right: -3px;
  left: auto;
  transform: translateX(calc(var(--k, 0) * (-100% + 6px)));
}

.dt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 6px 2px 8px;
  border-radius: 20px;
  transition: color 0.4s, transform 0.5s var(--spring), min-height 0.6s var(--ease);
}

.dt:active {
  transform: scale(0.92);
}

.dock.hero .dt {
  min-height: 70px;
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border: 1px solid var(--card-b);
}

:root[data-theme="light"] .dock.hero .dt {
  background: #fff;
  border-color: var(--panel-b);
  box-shadow: var(--panel-shadow);
}

.dock.hero .dt::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  border: 1.5px solid var(--accent);
  border-radius: 20px;
  opacity: 0;
  animation: drip 2.8s ease-out infinite;
  animation-delay: calc(var(--i) * 0.16s + 2s);
}

.dt-w,
.dt-m {
  font-size: 11px;
  color: var(--faint);
  transition: color 0.4s;
}

.dt-w {
  font-weight: 600;
}

:root[lang="ar"] .dt-w {
  font-size: 10px;
  white-space: nowrap;
}

.dt-n {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.dock.hero .dt-n {
  font-size: 17px;
  animation: nod 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.16s + 2s);
}

.dt-x {
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--comp);
  border-radius: 50%;
  translate: -50% 0;
}

.dt-x.competing {
  background: var(--clash-l);
  box-shadow: 0 0 8px var(--clash-l);
}

.dt[aria-current="true"] {
  color: var(--on-fill);
  transform: translateY(-4px) scale(1.06);
  animation: bump 0.5s var(--spring);
}

.dt[aria-current="true"] .dt-n {
  font-size: 17px;
}

.dt[aria-current="true"] .dt-w,
.dt[aria-current="true"] .dt-m {
  color: color-mix(in srgb, var(--on-fill) 80%, transparent);
}

.dt[aria-current="true"] .dt-x {
  opacity: 0;
}

/* scrubbing: drag along the bar to preview days */
.dock.scrub .dt {
  transition: color 0.15s;
}

.dock.scrub .ind {
  transition: transform 0.18s var(--ease), opacity 0.2s;
}

/* ===== 10 Sheet ===== */
@keyframes sheet-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.sheet {
  position: fixed;
  inset: auto 0 0;
  width: min(600px, 100vw);
  max-width: 100vw;
  max-height: 92svh;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  color: var(--text);
  background: var(--base);
  border: 0;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -20px 60px -20px rgb(0 0 0 / 60%);
}

.sheet::backdrop {
  background: rgb(2 12 8 / 55%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sheet-scroll {
  max-height: inherit;
  overflow: auto;
  overscroll-behavior: contain;
}

.grab,
.sheet-hero {
  touch-action: none;
}

.grab {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 4;
  width: 40px;
  height: 5px;
  background: rgb(255 255 255 / 55%);
  border-radius: 3px;
  translate: -50% 0;
}

.sheet-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgb(8 20 15 / 55%);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.sheet-close svg {
  width: 18px;
  height: 18px;
}

.sheet-hero {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--card);
}

.sheet-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  view-transition-name: hero;
}

.sheet-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgb(4 18 13 / 35%), transparent 35%, rgb(4 18 13 / 85%));
}

.sheet-cap {
  position: absolute;
  inset: auto 18px 16px;
  z-index: 2;
  color: #fff;
}

.sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.sheet h2 {
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sheet-content {
  display: grid;
  gap: 14px;
  padding: 20px 20px 28px;
}

.sheet-content > * {
  opacity: 0;
  transform: translateY(10px);
  animation: sheet-in 0.6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms + 180ms);
}

.facts {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--card-b);
  border-radius: 18px;
}

.facts div {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 12px 14px;
  font-size: 15px;
}

.facts div + div {
  border-top: 1px solid var(--card-b);
}

.facts dt {
  padding-top: 2px;
  font-size: 13px;
  color: var(--faint);
}

.block {
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.6;
  border-radius: 18px;
}

.block h3 {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.plain-block {
  background: var(--panel);
  border: 1px solid transparent;
}

:root[data-theme="light"] .plain-block {
  border-color: var(--panel-b);
  box-shadow: var(--panel-shadow);
}

.plain-block h3 {
  color: var(--faint);
}

.block.new {
  background: color-mix(in srgb, var(--clash-l) 12%, transparent);
}

.block.competing {
  background: color-mix(in srgb, var(--clash-l) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--clash-l) 40%, transparent);
}

.block.new h3,
.block.competing h3 {
  color: var(--clash);
}

.block.complementary {
  background: color-mix(in srgb, var(--comp) 12%, transparent);
}

.block.complementary h3 {
  color: var(--comp);
}

.sheet-text {
  display: grid;
  gap: 14px;
  padding: 56px 22px 28px;
}

.sheet-text h2 {
  padding-inline-end: 40px;
}

.sheet-text .sheet-close {
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--card-b);
}

.sheet-sub {
  margin-top: -8px;
  font-size: 15px;
  color: var(--muted);
}

.sheet-text ul {
  display: grid;
  gap: 12px;
  list-style: none;
}

.sheet-text li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.sheet-text li::before {
  width: 8px;
  height: 8px;
  margin-top: 8px;
  content: "";
  background: var(--accent);
  border-radius: 50%;
}

.sheet-text li b {
  color: var(--text);
}

::view-transition-group(hero) {
  animation-duration: 0.55s;
  animation-timing-function: var(--ease);
}

::view-transition-old(hero),
::view-transition-new(hero) {
  height: 100%;
  object-fit: cover;
  animation-duration: 0.55s;
  animation-timing-function: var(--ease);
}

/* ===== 11 Full list ===== */
#list .wrap {
  max-width: 860px;
}

/* the list title takes focus when the view opens; the move itself is the cue, so no ring */
.list-head h1:focus {
  outline: none;
}

.list-head {
  padding: calc(80px + env(safe-area-inset-top)) 0 8px;
}

.list-head h1 {
  font-size: clamp(32px, 8vw, 48px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.list-head p {
  max-width: 38em;
  margin-top: 10px;
  font-size: 15px;
  color: var(--muted);
}

.back-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px 16px;
  margin-bottom: 20px;
  font-size: 15px;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: 999px;
}

.back-link svg {
  width: 16px;
  height: 16px;
}

.filters {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: 14px;
}

.seg button {
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 10px;
  transition: background 0.3s, color 0.3s;
}

.seg button[aria-pressed="true"] {
  color: var(--on-fill);
  background: var(--fill);
}

.seg [data-city="auh"][aria-pressed="true"] {
  color: var(--base);
  background: var(--auh);
}

.seg [data-city="dxb"][aria-pressed="true"] {
  color: var(--base);
  background: var(--dxb);
}

.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cats button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: 999px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.cats svg {
  width: 14px;
  height: 14px;
}

.cats button[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--text);
}

.group {
  margin-top: 32px;
}

.group > summary {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px 0 12px;
  margin-bottom: 10px;
  list-style: none;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}

.group > summary::-webkit-details-marker {
  display: none;
}

.group > summary > svg {
  width: 18px;
  height: 18px;
  color: var(--faint);
  transition: transform 0.3s var(--ease);
}

:root[dir="rtl"] .group > summary > svg {
  transform: scaleX(-1);
}

.group[open] > summary > svg,
:root[dir="rtl"] .group[open] > summary > svg {
  transform: rotate(90deg);
}

.group-num {
  min-width: 1.3em;
  font-size: 40px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
}

.group-name b {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.group-name span {
  font-size: 13px;
  color: var(--faint);
}

.group-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-inline-start: auto;
}

.group-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: 50%;
}

.group-icon svg {
  width: 18px;
  height: 18px;
}

.group-icon + .group-name {
  margin-inline-end: auto;
}

.rows {
  display: grid;
  gap: 10px;
}

.row {
  --bar: var(--faint);

  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding-block: 14px;
  padding-inline: 18px 16px;
  overflow: hidden;
  text-align: start;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: 18px;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}

.row::before {
  position: absolute;
  inset-block: 12px;
  inset-inline-start: 0;
  width: 3px;
  content: "";
  background: var(--bar);
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
}

.row.c-auh {
  --bar: var(--auh);
}

.row.c-dxb {
  --bar: var(--dxb);
}

.row.c-both {
  --bar: linear-gradient(var(--auh), var(--dxb));
}

button.row:hover {
  border-color: color-mix(in srgb, var(--text) 25%, transparent);
}

button.row:active {
  transform: scale(0.985);
}

.row.is-pending {
  background: transparent;
  border-style: dashed;
}

.row > svg {
  width: 18px;
  height: 18px;
  color: var(--faint);
}

.avatar {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  color: var(--muted);
  background: var(--base-2);
  border: 1px solid var(--card-b);
  border-radius: 50%;
}

.avatar svg {
  width: 20px;
  height: 20px;
}

.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.row-text {
  flex: 1;
  min-width: 0;
}

.row-text > b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: pretty;
}

.row-place {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

.row-city {
  font-weight: 600;
  color: var(--city, var(--text));
}

.row-note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--faint);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tag.sig {
  color: #05150e;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: linear-gradient(120deg, var(--s1), var(--s3));
  border-color: transparent;
}

.c-dxb .tag.sig {
  color: #05121e;
}

.no-results {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 30px 10px;
  font-size: 15px;
  color: var(--muted);
  text-align: center;
}

.no-results button {
  min-height: 44px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: 999px;
}

.outlook {
  display: grid;
  gap: 12px;
  margin-top: 48px;
}

.outlook > div {
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: 20px;
}

.outlook h2 {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}

.outlook li {
  margin-top: 6px;
  margin-inline-start: 18px;
  font-size: 13px;
  color: var(--muted);
}

/* ===== Arabic: no letter-spacing or capitals on joined script ===== */
:root[lang="ar"] :is(.stat-city, .city, .seal, .tag, .day-head h2, .summary h2, .list-head h1) {
  text-transform: none;
  letter-spacing: 0;
}

:root[lang="ar"] .day-head h2 {
  font-weight: 400;
}

:root[lang="ar"] .stat-city {
  font-size: 15px;
}

:root[lang="ar"] .city {
  font-size: 18px;
}

/* ===== 12 Larger and foldable screens ===== */
@media (hover: none) and (pointer: coarse) and (max-width: 759px) {
  .dock {
    bottom: calc(26px + env(safe-area-inset-bottom));
  }
}

/* iPhone Duo inner screen held like a book (about 626px wide): the hinge falls on the city divide */
@media (min-width: 600px) and (max-width: 759px) {
  .wrap {
    padding-inline: 24px;
  }

  .split,
  .stats {
    column-gap: 28px;
  }

  .dock {
    width: min(560px, calc(100vw - 32px));
  }
}

@media (min-width: 600px) {
  .ev-title {
    font-size: 17px;
  }

  .city-count {
    display: inline;
  }
}

@media (min-width: 760px) {
  .wrap {
    padding-inline: 32px;
  }

  .stat {
    padding: 28px 28px 26px;
  }

  .stat p {
    font-size: 15px;
  }

  .leads-label {
    font-size: 13px;
  }

  .day {
    padding-block: 72px;
  }

  .split {
    gap: 28px;
  }

  .side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .side > :is(.city, .empty) {
    grid-column: 1 / -1;
  }

  .points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dock.hero .drow {
    gap: 12px;
  }

  .dock.hero .dt {
    min-height: 78px;
  }

  .sheet {
    inset: 0;
    max-height: 86vh;
    margin: auto;
    border-radius: 28px;
  }

  .grab {
    display: none;
  }

  .outlook {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* short screens: Duo outer screen (about 466 x 678), Duo inner held sideways (about 890 x 626) */
@media (max-height: 720px) {
  .intro {
    padding-block: calc(56px + env(safe-area-inset-top)) 150px;
  }

  .stats {
    margin-top: 18px;
  }

  .stat {
    padding: 16px 14px;
  }

  .stat p {
    margin-top: 6px;
    font-size: 13px;
  }

  .stat hr {
    margin-top: 14px;
  }

  .leads {
    margin-top: 10px;
  }

  .kpi {
    margin-top: 14px;
  }

  .signals {
    margin-top: 18px;
  }

  .kpi b {
    font-size: clamp(36px, 9vw, 56px);
  }

  .kpi-sm b {
    font-size: clamp(26px, 6vw, 38px);
  }

  .day {
    padding-block: 44px;
  }

  .dock.hero {
    padding: 10px 6px 8px;
  }

  .dock.hero .dt {
    min-height: 60px;
  }
}

/* when the browser reports two screen segments, the gap becomes the hinge */
@media (horizontal-viewport-segments: 2) {
  .split,
  .stats {
    column-gap: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px) + 24px);
  }
}