/* ══════════════════════════════════════════════════════════════════════
   /world-indices-chart, every major index on one chart
   Loaded by that page only, after content-v2.css, whose tokens and light
   theme it builds on. MD3 Expressive: tonal surfaces instead of outlines,
   large rounded shapes, a segmented range control that morphs, and switches
   whose handle springs. Rem throughout; px only for hairlines.

   On a desktop it is one screen, like the dashboard: the sixteen markets are a
   menu down the left, and the chart takes every row the header and the four
   headline cards leave. On a phone it stacks and scrolls.
══════════════════════════════════════════════════════════════════════ */

/* ── Series colours ───────────────────────────────────────────────────────
   One per market, in families by region, so the chart reads by geography before
   it reads by name: blues for the Americas, greens for Europe, warm hues and
   purples for Asia-Pacific. The four a first visit sees are one of each
   (blue, green, orange, purple). Explicit hex rather than MD3 roles, the way the
   temperature scale does it: these are data colours and must not follow the
   brand tint. The script reads them from here, so this is the only copy. */
.gm-page [data-key="SPX"]    { --gm-c: #4da3ff; }
.gm-page [data-key="NDX"]    { --gm-c: #22d3ee; }
.gm-page [data-key="DJI"]    { --gm-c: #818cf8; }
.gm-page [data-key="RUT"]    { --gm-c: #bae6fd; }
.gm-page [data-key="SX5E"]   { --gm-c: #34d399; }
.gm-page [data-key="UKX"]    { --gm-c: #a3e635; }
.gm-page [data-key="DAX"]    { --gm-c: #2dd4bf; }
.gm-page [data-key="CAC"]    { --gm-c: #86efac; }
.gm-page [data-key="N225"]   { --gm-c: #fb923c; }
.gm-page [data-key="NIFTY"]  { --gm-c: #c084fc; }
.gm-page [data-key="HSI"]    { --gm-c: #f87171; }
.gm-page [data-key="SSE"]    { --gm-c: #facc15; }
.gm-page [data-key="KOSPI"]  { --gm-c: #f472b6; }
.gm-page [data-key="TAIEX"]  { --gm-c: #fdba74; }
.gm-page [data-key="ASX200"] { --gm-c: #e879f9; }
.gm-page [data-key="STI"]    { --gm-c: #d8b4fe; }

/* Same hues, taken down to the 600-700 range, which holds its contrast on white. */
html[data-theme="light"] .gm-page [data-key="SPX"]    { --gm-c: #1d6fd8; }
html[data-theme="light"] .gm-page [data-key="NDX"]    { --gm-c: #0891b2; }
html[data-theme="light"] .gm-page [data-key="DJI"]    { --gm-c: #4f46e5; }
html[data-theme="light"] .gm-page [data-key="RUT"]    { --gm-c: #0369a1; }
html[data-theme="light"] .gm-page [data-key="SX5E"]   { --gm-c: #059669; }
html[data-theme="light"] .gm-page [data-key="UKX"]    { --gm-c: #4d7c0f; }
html[data-theme="light"] .gm-page [data-key="DAX"]    { --gm-c: #0f766e; }
html[data-theme="light"] .gm-page [data-key="CAC"]    { --gm-c: #16a34a; }
html[data-theme="light"] .gm-page [data-key="N225"]   { --gm-c: #ea580c; }
html[data-theme="light"] .gm-page [data-key="NIFTY"]  { --gm-c: #9333ea; }
html[data-theme="light"] .gm-page [data-key="HSI"]    { --gm-c: #dc2626; }
html[data-theme="light"] .gm-page [data-key="SSE"]    { --gm-c: #a16207; }
html[data-theme="light"] .gm-page [data-key="KOSPI"]  { --gm-c: #db2777; }
html[data-theme="light"] .gm-page [data-key="TAIEX"]  { --gm-c: #c2410c; }
html[data-theme="light"] .gm-page [data-key="ASX200"] { --gm-c: #c026d3; }
html[data-theme="light"] .gm-page [data-key="STI"]    { --gm-c: #7c3aed; }

/* ── Page ───────────────────────────────────────────────────────────────── */
.gm-page {
  /* MD3 motion: the emphasized curve for things that move into place, and a spring
     with a little overshoot for the switch handle, which is the expressive touch. */
  --gm-ease:   cubic-bezier(0.2, 0, 0, 1);
  --gm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* The card surface every section sits on, one tonal step above the page. */
  --gm-card:   var(--md-surf-1);
  --gm-card-2: color-mix(in srgb, var(--md-on-surface) 5%, var(--md-surf-2));

  color: var(--md-on-surface);
}

/* The tool itself. Everything else on the page is the chart's text alternative, which
   is off screen and takes no height, so this is the whole visible page. */
.gm-app {
  display: flex;
  flex-direction: column;
  gap: var(--cs-md);
}

.gm-dot-sep { color: var(--md-outline); padding: 0 0.15rem; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.gm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-md);
  flex-wrap: wrap;
}
.gm-head-text { min-width: 0; }

.gm-eyebrow {
  margin: 0 0 0.25rem;
  font-size: var(--ct-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--md-primary);
}

/* MD3 Headline, fluid. The page is a tool, like the dashboard, so the title names it
   without taking the chart's height. */
.gm-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--ct-xl);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--md-on-surface);
}

.gm-sub {
  margin: 0.25rem 0 0;
  font-size: var(--ct-sm);
  line-height: 1.45;
  color: var(--md-on-surface-var);
}

/* ── Range control ──────────────────────────────────────────────────────────
   Connected buttons on a tonal track. The selected one fills and morphs from a
   pill to a rounded square, MD3 Expressive's shape change on selection. Label
   Large type, 2.5rem tall. */
.gm-ranges {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 1.625rem;
  background: var(--gm-card-2);
}
.gm-range {
  min-width: 3.25rem;
  height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 1.25rem;
  background: transparent;
  color: var(--md-on-surface-var);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-radius 280ms var(--gm-ease), background-color 200ms var(--gm-ease),
              color 200ms var(--gm-ease), transform 200ms var(--gm-ease);
  -webkit-tap-highlight-color: transparent;
}
.gm-range:hover  { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.gm-range:active { transform: scale(0.96); }
.gm-range:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.gm-range.is-active {
  border-radius: 0.75rem;
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.gm-range.is-active:hover { background: color-mix(in srgb, var(--md-on-primary) 8%, var(--md-primary)); }

/* ── Headline cards ───────────────────────────────────────────────────────
   Two short lines each: name and status, then the move and where it trades. */
.gm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--cs-sm);
}

.gm-card {
  position: relative;
  overflow: hidden;
  padding: 0.6rem 0.9rem 0.65rem;
  border-radius: 1.125rem;
  background: var(--gm-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* A wash of the market's own colour from the corner: the card says which line it is
   before the name is read, the way the Nano concept's tinted cards do. */
.gm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 110% at 0% 0%, color-mix(in srgb, var(--gm-c) 16%, transparent), transparent 62%);
  pointer-events: none;
}
.gm-card > * { position: relative; }

.gm-card-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.gm-dot {
  flex-shrink: 0;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--gm-c);
  box-shadow: 0 0 0.55rem color-mix(in srgb, var(--gm-c) 60%, transparent);
}

.gm-card-name {
  margin: 0;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--ct-sm);
  font-weight: 600;
  color: var(--md-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A status chip: tonal, and pulsing only while the market is actually trading. */
.gm-status {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  font-size: var(--ct-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-on-surface-var);
  background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}
.gm-status.is-open {
  color: var(--gain);
  background: color-mix(in srgb, var(--gain) 14%, transparent);
}
.gm-status.is-open::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  animation: gm-pulse 1.8s ease-in-out infinite;
}
@keyframes gm-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.gm-card-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.3rem;
  min-width: 0;
}

.gm-card-chg {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--ct-lg);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.gm-card-meta {
  margin: 0;
  min-width: 0;
  font-size: var(--ct-xs);
  color: var(--md-on-surface-var);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-card-meta [data-role="price"] { font-family: var(--font-mono); }

/* Direction, carried by colour and by the sign in the text, never by colour alone. */
.gm-page .is-up   { color: var(--gain); }
.gm-page .is-down { color: var(--loss); }
.gm-page .is-flat { color: var(--md-on-surface-var); }

/* ── Chart ────────────────────────────────────────────────────────────── */
.gm-chart-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.9rem 1.1rem 1rem;
  border-radius: 1.5rem;
  background: var(--gm-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.gm-chart-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cs-sm);
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

/* MD3 Title Medium. */
.gm-chart-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--ct-md);
  font-weight: 600;
  color: var(--md-on-surface);
}

.gm-updated {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--ct-xs);
  color: var(--md-on-surface-var);
}

/* Chart.js sizes the canvas to this box, so the box owns the height. A fixed height on
   a phone, where the page scrolls; on a desktop the one-screen layout below replaces it
   with whatever height is left. */
.gm-chart-wrap {
  position: relative;
  height: 20rem;
}

/* ── Market menu ──────────────────────────────────────────────────────── */
.gm-toggles {
  padding: 0.9rem 0.9rem 1rem;
  border-radius: 1.5rem;
  background: var(--gm-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.gm-toggles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-sm);
  padding-left: 0.25rem;
}

/* MD3 Title Medium. */
.gm-toggles-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--ct-md);
  font-weight: 600;
  color: var(--md-on-surface);
}

/* MD3 text button, Label Large. */
.gm-reset {
  height: 2.5rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 1.25rem;
  background: transparent;
  color: var(--md-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.gm-reset:hover  { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.gm-reset:active { background: color-mix(in srgb, var(--md-primary) 12%, transparent); }
.gm-reset:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

.gm-region + .gm-region { margin-top: 0.6rem; }

.gm-region-title {
  margin: 0.4rem 0 0.4rem 0.25rem;
  font-size: var(--ct-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-on-surface-var);
}

.gm-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.3rem;
}

/* The whole row is the switch: one big target, not a small thumb to aim at. */
.gm-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.4rem 0.6rem 0.4rem 0.85rem;
  border: 0;
  border-radius: 1.125rem;
  background: var(--gm-card-2);
  color: var(--md-on-surface);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color 200ms var(--gm-ease), border-radius 280ms var(--gm-ease);
  -webkit-tap-highlight-color: transparent;
}
.gm-toggle:hover  { background: color-mix(in srgb, var(--md-on-surface) 8%, var(--gm-card-2)); }
.gm-toggle:active { background: color-mix(in srgb, var(--md-on-surface) 12%, var(--gm-card-2)); }
.gm-toggle:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

/* On: the row takes a tint of its line and squares its corners a little, the same
   shape language as the selected range. */
.gm-toggle[aria-checked="true"] {
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--gm-c) 12%, var(--gm-card-2));
}
.gm-toggle[aria-checked="false"] .gm-dot { box-shadow: none; opacity: 0.55; }

/* A trading market's dot carries a ring that breathes, so the menu shows who is open
   without spending a line of text on it. The words are still there for a screen reader. */
.gm-toggle[data-open="true"] .gm-dot {
  outline: 0.125rem solid color-mix(in srgb, var(--gm-c) 45%, transparent);
  outline-offset: 0.15rem;
  animation: gm-pulse 1.8s ease-in-out infinite;
}

.gm-t-text { display: flex; flex-direction: column; min-width: 0; }

.gm-t-name {
  font-size: var(--ct-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-t-sub {
  font-size: var(--ct-xs);
  color: var(--md-on-surface-var);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gm-t-chg {
  font-family: var(--font-mono);
  font-size: var(--ct-sm);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* MD3 switch: 3.25 x 2rem track. The handle is small and outlined when off and grows
   when on, springing across. The track takes the market's colour when on, so the
   switch is also the legend swatch. */
.gm-switch {
  --gm-sw-w: 3.25rem;
  --gm-sw-h: 2rem;
  --gm-sw-off: 1rem;
  --gm-sw-on: 1.5rem;
  position: relative;
  width: var(--gm-sw-w);
  height: var(--gm-sw-h);
  border-radius: calc(var(--gm-sw-h) / 2);
  border: 0.125rem solid var(--md-outline);
  background: var(--md-surf-3);
  transition: background-color 200ms var(--gm-ease), border-color 200ms var(--gm-ease);
}
.gm-switch-handle {
  position: absolute;
  top: 50%;
  left: calc((var(--gm-sw-h) - 0.25rem - var(--gm-sw-off)) / 2);
  width: var(--gm-sw-off);
  height: var(--gm-sw-off);
  border-radius: 50%;
  background: var(--md-outline);
  transform: translateY(-50%);
  transition: left 300ms var(--gm-spring), width 300ms var(--gm-spring),
              height 300ms var(--gm-spring), background-color 200ms var(--gm-ease);
}
.gm-toggle[aria-checked="true"] .gm-switch {
  border-color: var(--gm-c);
  background: var(--gm-c);
}
.gm-toggle[aria-checked="true"] .gm-switch-handle {
  left: calc(var(--gm-sw-w) - 0.25rem - var(--gm-sw-on) - (var(--gm-sw-h) - 0.25rem - var(--gm-sw-on)) / 2);
  width: var(--gm-sw-on);
  height: var(--gm-sw-on);
  background: #ffffff;
}

/* ── Note ─────────────────────────────────────────────────────────────── */
.gm-note {
  margin: 0.9rem 0.25rem 0;
  font-size: var(--ct-2xs);
  line-height: 1.55;
  color: var(--md-on-surface-var);
}

/* ── Light theme ────────────────────────────────────────────────────────
   The tokens flip through content-v2.css. Only the lifted shadow needs softening,
   and the card surfaces gain a hairline so white cards do not dissolve into the
   near-white page. */
html[data-theme="light"] .gm-page .gm-card,
html[data-theme="light"] .gm-page .gm-chart-card,
html[data-theme="light"] .gm-page .gm-toggles {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--md-outline-var);
}

/* ══ Desktop: one screen ═══════════════════════════════════════════════════
   The layout shell is a grid built for the dashboard, and content pages release it
   so they can scroll. This page takes it back: the shell is pinned to the viewport,
   the top bar keeps its row and main gets the rest, so nothing below the fold.

   Inside, two columns. The market menu runs down the left the full height and
   scrolls on its own if a short screen cannot hold all sixteen; the header, the
   cards and the chart stack on the right, and the chart takes whatever is left.

   Only on a screen tall enough to leave the chart real height. A very short window
   (a laptop with the browser's own bars open, a desktop window dragged small) keeps
   the stacked, scrolling layout rather than squeezing the chart to a strip. */
@media (min-width: 60rem) and (min-height: 36rem) {
  html:has(body.gm-body),
  body.gm-body { height: 100%; overflow: hidden; }

  body.gm-body .shell {
    height: 100dvh;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }
  body.gm-body .shell > .top-bar { grid-row: 1; }
  body.gm-body .shell > main {
    grid-row: 2;
    overflow: hidden;
    padding: var(--cs-md) var(--cs-lg) var(--cs-lg);
  }

  .gm-page { height: 100%; }

  .gm-app {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "side head"
      "side cards"
      "side chart";
    gap: var(--cs-sm) var(--cs-md);
  }

  .gm-head       { grid-area: head; }
  .gm-cards      { grid-area: cards; }
  .gm-chart-card { grid-area: chart; }

  .gm-chart-wrap { flex: 1; min-height: 0; height: auto; }

  .gm-toggles {
    grid-area: side;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .gm-toggle-grid { grid-template-columns: 1fr; }

  /* A menu row is one line on a desktop: dot, name, move, switch. The country and the
     open or closed state stay in the row for a screen reader (the breathing ring says
     "open" to the eye), which is what lets all sixteen fit a 1080p screen. */
  /* 2.25rem rows: sixteen of them, three region labels and the heading come to about
     50rem, which a 1080p screen holds with room to spare under the browser's own bars.
     A pointer target, not a thumb target, so the desktop can afford it. */
  .gm-toggle-grid { gap: 0.25rem; }
  .gm-toggle {
    min-height: 2.25rem;
    padding: 0.25rem 0.45rem 0.25rem 0.75rem;
    gap: 0.55rem;
  }
  .gm-t-sub {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* A denser switch for a denser menu, same shape and motion. */
  .gm-switch {
    --gm-sw-w: 2.5rem;
    --gm-sw-h: 1.5rem;
    --gm-sw-off: 0.7rem;
    --gm-sw-on: 1.05rem;
  }
}

/* ── Phones ─────────────────────────────────────────────────────────────
   Header stacks and the range control spans the width as three equal buttons.
   Two headline cards to a row. Menu rows keep their second line, since the page
   scrolls here and the target should stay large. */
@media (max-width: 48rem) {
  .gm-page { padding-bottom: var(--cs-xl); }
  .gm-head { align-items: stretch; }
  .gm-ranges { width: 100%; }
  .gm-range  { flex: 1; }

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

  .gm-chart-card, .gm-toggles { padding: 0.8rem 0.7rem 0.9rem; border-radius: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-status.is-open::before,
  .gm-toggle[data-open="true"] .gm-dot { animation: none; }
  .gm-range, .gm-toggle, .gm-switch, .gm-switch-handle { transition: none; }
}