@font-face {
  font-family: WHIU Chart Inter;
  src: url(vendor/inter-latin.woff2) format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: WHIU Chart Saira;
  src: url(vendor/saira-latin.woff2) format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.whiu-chart, .whiu-chart-document {
  --whiu-chart-surface: var(--color-bg-light, #f5f5f5);
  --whiu-chart-ink: var(--color-text-primary, #0a0a0a);
  --whiu-chart-muted: var(--color-text-secondary, #454545);
  --whiu-chart-rule: var(--color-divider, #d7d7d7);
  --whiu-chart-accent: var(--whiu-accent, #ff00fc);
  --whiu-chart-accent-ink: #9b007d;
  --whiu-chart-wash: rgb(255 0 252 / 9%);
  --whiu-chart-series-1: #b0008f;
  --whiu-chart-series-2: #3b5995;
  --whiu-chart-series-3: #006c60;
  --whiu-chart-series-4: #a4491a;
  --whiu-chart-series-5: #75409e;
  --whiu-chart-series-6: #514b6a;
  --whiu-chart-heading: var(--font-serif, "WHIU Chart Saira", "Arial Narrow", sans-serif);
  --whiu-chart-body: var(--font-sans, "WHIU Chart Inter", system-ui, sans-serif);
}

html.dark .whiu-chart, [data-theme="dark"] .whiu-chart {
  --whiu-chart-surface: var(--color-bg-light, #111);
  --whiu-chart-ink: var(--color-text-primary, #fff);
  --whiu-chart-muted: var(--color-text-secondary, #d4d4d4);
  --whiu-chart-rule: var(--color-divider, #333);
  --whiu-chart-accent-ink: #ff80f0;
  --whiu-chart-series-1: #ff66ed;
  --whiu-chart-series-2: #9ebcff;
  --whiu-chart-series-3: #76d8bf;
  --whiu-chart-series-4: #ffb485;
  --whiu-chart-series-5: #c6a2f0;
  --whiu-chart-series-6: #ddd1f0;
}

@media (prefers-color-scheme: dark) {
  html:not(.light):not([data-theme="light"]) .whiu-chart-document,
  html:not(.light):not([data-theme="light"]) .whiu-chart-document .whiu-chart {
    color-scheme: dark;
    --whiu-chart-surface: #111;
    --whiu-chart-ink: #fff;
    --whiu-chart-muted: #d4d4d4;
    --whiu-chart-rule: #333;
    --whiu-chart-accent-ink: #ff80f0;
    --whiu-chart-series-1: #ff66ed;
    --whiu-chart-series-2: #9ebcff;
    --whiu-chart-series-3: #76d8bf;
    --whiu-chart-series-4: #ffb485;
    --whiu-chart-series-5: #c6a2f0;
    --whiu-chart-series-6: #ddd1f0;
  }
}

figure.whiu-chart {
  box-sizing: border-box;
  width: 100%;
  max-width: 48rem;
  min-width: 0;
  position: relative;
  margin: 2rem auto;
  padding: clamp(1rem, 3vw, 2.25rem);
  border: 1px solid var(--whiu-chart-rule);
  border-radius: var(--radius-lg, 16px);
  background: linear-gradient(135deg, var(--whiu-chart-wash), transparent 42%), var(--whiu-chart-surface);
  box-shadow: 0 18px 50px rgb(0 0 0 / 8%);
  color: var(--whiu-chart-ink);
  font: 400 .95rem/1.55 var(--whiu-chart-body);
  overflow-wrap: anywhere;
}
figure.whiu-chart::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: inherit;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  background: var(--whiu-chart-accent);
}
.whiu-chart .whiu-chart__header { margin: 0 0 .65rem; }
.whiu-chart .whiu-chart__kicker,
.whiu-chart-document__brand span {
  font: 700 .7rem/1.4 var(--whiu-chart-body);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--whiu-chart-muted);
}
.whiu-chart .whiu-chart__kicker { color: var(--whiu-chart-accent-ink); letter-spacing: .2em; }
.whiu-chart .whiu-chart__title {
  margin: .35rem 0 .4rem;
  font: 700 clamp(1.55rem, 4.2vw, 2.7rem)/1.06 var(--whiu-chart-heading);
  color: var(--whiu-chart-ink);
}
.whiu-chart p { margin: .4rem 0; color: inherit; font: inherit; }
.whiu-chart .whiu-chart__period, .whiu-chart .whiu-chart__subtitle, .whiu-chart__period { color: var(--whiu-chart-muted); }
.whiu-chart .whiu-chart__period { font-size: .84rem; }
.whiu-chart__visual { margin: .75rem 0; min-width: 0; }
.whiu-chart__canvas-wrap { position: relative; }
.whiu-chart__stage { width: 100%; aspect-ratio: 16 / 9; min-height: 235px; }
.whiu-chart__placeholder { position: absolute; inset: auto 0 45%; text-align: center; color: var(--whiu-chart-muted); }
.whiu-chart__controls {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  visibility: hidden;
}
.whiu-chart__controls[data-ready="true"] { visibility: visible; }
.whiu-chart button {
  appearance: none;
  border: 1px solid var(--whiu-chart-rule);
  border-radius: 6px;
  background: transparent;
  color: var(--whiu-chart-ink);
  padding: .35rem .6rem;
  min-height: 34px;
  font: 400 .78rem/1.25 var(--whiu-chart-body);
  cursor: pointer;
}
.whiu-chart button[aria-pressed="true"] { border-color: var(--whiu-chart-key, var(--whiu-chart-series-1)); }
.whiu-chart button[data-whiu-series]:nth-child(6n+1) { --whiu-chart-key: var(--whiu-chart-series-1); }
.whiu-chart button[data-whiu-series]:nth-child(6n+2) { --whiu-chart-key: var(--whiu-chart-series-2); }
.whiu-chart button[data-whiu-series]:nth-child(6n+3) { --whiu-chart-key: var(--whiu-chart-series-3); }
.whiu-chart button[data-whiu-series]:nth-child(6n+4) { --whiu-chart-key: var(--whiu-chart-series-4); }
.whiu-chart button[data-whiu-series]:nth-child(6n+5) { --whiu-chart-key: var(--whiu-chart-series-5); }
.whiu-chart button[data-whiu-series]:nth-child(6n+6) { --whiu-chart-key: var(--whiu-chart-series-6); }
.whiu-chart__key { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--whiu-chart-key); margin-inline-end: .35rem; }
.whiu-chart button[aria-pressed="false"] { text-decoration: line-through; color: var(--whiu-chart-muted); }
.whiu-chart a, .whiu-chart-document a { color: inherit; text-underline-offset: .19em; text-decoration: underline; }
.whiu-chart a:hover, .whiu-chart-document a:hover { text-decoration-color: var(--whiu-chart-accent); }
.whiu-chart :focus-visible, .whiu-chart-document :focus-visible { outline: 2px solid var(--whiu-chart-series-1); outline-offset: 3px; }
.whiu-chart .whiu-chart__credits {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  border-top: 1px solid var(--whiu-chart-rule);
  padding-top: .65rem;
  margin: 0 0 .65rem;
  color: var(--whiu-chart-muted);
  font-size: .8rem;
}
.whiu-chart .whiu-chart__note, .whiu-chart .whiu-chart__method p { white-space: pre-line; }
.whiu-chart details { margin: .6rem 0; }
.whiu-chart summary { cursor: pointer; font-weight: 700; }
.whiu-chart summary::marker { color: var(--whiu-chart-accent-ink); }
.whiu-chart .whiu-chart__embed summary { color: var(--whiu-chart-accent-ink); }
.whiu-chart__table-wrap { overflow: auto; max-height: 28rem; }
.whiu-chart table { width: 100%; border-collapse: collapse; margin: .45rem 0; font-size: .84rem; }
.whiu-chart caption { text-align: left; padding: .35rem 0; color: var(--whiu-chart-muted); }
.whiu-chart th, .whiu-chart td { border: 1px solid var(--whiu-chart-rule); padding: .35rem .45rem; text-align: left; }
.whiu-chart td { font-variant-numeric: tabular-nums; }
.whiu-chart textarea { box-sizing: border-box; width: 100%; color: var(--whiu-chart-ink); background: var(--whiu-chart-surface); }
.whiu-chart .whiu-chart__embed-html { white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
/* An older cached article can still contain the retired download control. */
.whiu-chart a[href^="https://whatshotinuae.com/charts/csv/"], .whiu-chart a[href^="/charts/csv/"] { display: none; }
.whiu-chart .whiu-chart__frame { display: block; width: 100%; height: auto; min-height: 295px; border: 0; aspect-ratio: 16 / 10; }
.whiu-chart-document { margin: 0; background: var(--whiu-chart-surface); color: var(--whiu-chart-ink); font: 400 1rem/1.65 var(--whiu-chart-body); }
.whiu-chart-document__main { max-width: 48rem; margin: auto; padding: 1rem; }
.whiu-chart-document__brand { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--whiu-chart-rule); padding-bottom: .7rem; }
.whiu-chart-document__brand a { font: 700 1.6rem/1.2 var(--whiu-chart-heading); }
.whiu-chart-document__context h2 { font-family: var(--whiu-chart-heading); }
.whiu-chart-document--frame .whiu-chart-document__main { padding: 0; max-width: none; }
.whiu-chart-document--frame .whiu-chart { margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; }
@media (pointer: coarse) { .whiu-chart button { min-height: 44px; } }

html[data-theme="dark"] .whiu-chart-document {
  color-scheme: dark;
  --whiu-chart-surface: #111;
  --whiu-chart-ink: #fff;
  --whiu-chart-muted: #d4d4d4;
  --whiu-chart-rule: #333;
}

/* The parent magazine article already provides the editorial text and data. */
html[data-whiu-inline="true"] .whiu-chart-document--article-frame .whiu-chart {
  padding: .2rem 0;
  background: transparent;
}
html[data-whiu-inline="true"] .whiu-chart-document--article-frame { background: transparent; }
html[data-whiu-inline="true"] .whiu-chart-document--article-frame .whiu-chart::before,
html[data-whiu-inline="true"] .whiu-chart-document--article-frame .whiu-chart > :not(.whiu-chart__header, .whiu-chart__visual) {
  display: none;
}
html[data-whiu-inline="true"] .whiu-chart-document--article-frame .whiu-chart__header {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
html[data-whiu-inline="true"] .whiu-chart-document--article-frame .whiu-chart__visual { margin: 0; }