/* Two-Clock Session Globe (globe-section.js). Everything is scoped under .globe-section. */
/* --globe-small: caption-size copy; --globe-cards: session cards per row. */
.globe-section{--globe-small:12px;--globe-cards:2;position:relative;padding-block:clamp(64px,8vw,110px)}
/* Arabic-script copy needs a size up to stay legible at caption sizes. */
[dir=rtl] .globe-section{--globe-small:13px}
.globe-section .globe-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-areas:"head head" "stage board";column-gap:clamp(28px,4.5vw,72px);row-gap:clamp(26px,3vw,44px);align-items:start}
.globe-section .globe-head{grid-area:head;max-width:760px}
.globe-section .globe-head .lede{max-width:620px}
.globe-section .globe-board{grid-area:board;display:grid;gap:14px;min-width:0}
/* A number never breaks inside itself, nor away from its unit or weekday. */
.globe-section :is(.num,.globe-keep){white-space:nowrap}

/* Home page: the journey director draws the globe behind the page and frames it in the inline-start
   half (framePose side 'start'); head and board share one dark glass panel in the inline-end half,
   so every line has a backing whatever the globe shows behind it. */
.globe-section[data-stage=journey] .globe-layout{display:block}
.globe-section .globe-panel{display:grid;gap:clamp(22px,2.4vw,30px);width:min(100%,620px);margin-inline-start:auto;padding:clamp(22px,2.6vw,34px);border:1px solid rgba(210,234,229,.16);border-radius:24px;background:rgba(9,15,18,.84);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);box-shadow:0 40px 90px -30px rgba(0,0,0,.65)}
.globe-section .globe-panel>:is(.globe-head,.globe-board){grid-area:auto}
.globe-section .globe-panel .globe-head{max-width:none}
.globe-section .globe-panel .globe-head h2{font-size:clamp(28px,2.7vw,40px)}
.globe-section .globe-panel .globe-head .lede{max-width:none}
/* No globe on screen: 3D is off or unavailable (data-stage=static: the visitor's space dimension, no
   WebGL2, or the owner's 3D switch), or the local globe could not start (stage-state off/unavailable).
   Head and board sit on the page at full width: the two clocks in one row, the four session cards in
   one row (two at ≤1000px, one at ≤700px), then the weekend box beside the note, so no line of prose
   runs the whole width. */
.globe-section[data-stage=static],.globe-section[data-stage-state=off],.globe-section[data-stage-state=unavailable]{--globe-cards:4}
.globe-section[data-stage=static] .globe-layout,.globe-section[data-stage-state=off] .globe-layout,.globe-section[data-stage-state=unavailable] .globe-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "board"}
.globe-section[data-stage-state=off] .globe-stage,.globe-section[data-stage-state=unavailable] .globe-stage{display:none}
.globe-section[data-stage=static] .globe-board,.globe-section[data-stage-state=off] .globe-board,.globe-section[data-stage-state=unavailable] .globe-board{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
.globe-section[data-stage=static] .globe-board>*,.globe-section[data-stage-state=off] .globe-board>*,.globe-section[data-stage-state=unavailable] .globe-board>*{grid-column:1/-1}
.globe-section[data-stage=static] .globe-board>.globe-weekend,.globe-section[data-stage=static] .globe-board>.notice,.globe-section[data-stage-state=off] .globe-board>.globe-weekend,.globe-section[data-stage-state=off] .globe-board>.notice,.globe-section[data-stage-state=unavailable] .globe-board>.globe-weekend,.globe-section[data-stage-state=unavailable] .globe-board>.notice{grid-column:auto}
/* Beside the weekend box the note is as tall as it, its line centred. */
.globe-section[data-stage=static] .globe-board>.notice,.globe-section[data-stage-state=off] .globe-board>.notice,.globe-section[data-stage-state=unavailable] .globe-board>.notice{display:flex;align-items:center}
/* Without a globe the two clocks are the picture. */
@media(min-width:701px){
  .globe-section[data-stage=static] .globe-clock-time,.globe-section[data-stage-state=off] .globe-clock-time,.globe-section[data-stage-state=unavailable] .globe-clock-time{font-size:clamp(40px,4.3vw,60px)}
  .globe-section[data-stage=static] .globe-clock,.globe-section[data-stage-state=off] .globe-clock,.globe-section[data-stage-state=unavailable] .globe-clock{padding:24px 28px 22px}
}
/* The local stage's lede names the globe; its plain twin stands in when no globe can be drawn. */
.globe-section .globe-lede-plain,.globe-section[data-stage-state=off] .globe-lede-globe,.globe-section[data-stage-state=unavailable] .globe-lede-globe{display:none}
.globe-section[data-stage-state=off] .globe-lede-plain,.globe-section[data-stage-state=unavailable] .globe-lede-plain{display:inline}

/* ---- the interactive globe (market-hours page) ---- */
.globe-section .globe-stage{grid-area:stage;position:sticky;top:104px;min-width:0}
.globe-section .globe-viewport{position:relative;width:min(100%,76vh,720px);aspect-ratio:1/1;margin-inline:auto;border-radius:28px;cursor:grab;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;outline:none}
.globe-section .globe-viewport::before{content:'';position:absolute;inset:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(127,200,187,.07),rgba(127,200,187,0) 72%);pointer-events:none}
.globe-section .globe-viewport:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--lime)}
.globe-section .globe-viewport.is-dragging{cursor:grabbing}
.globe-section .globe-viewport canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s ease}
.globe-section[data-stage-state=loading] .globe-viewport canvas{opacity:0}
.globe-section .globe-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
/* Labels follow projected 3D points, which are measured from the physical top-left corner in every direction. */
.globe-section .globe-label{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden;will-change:transform,opacity}
.globe-section .globe-label-pill{position:absolute;bottom:13px;left:0;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:3px 10px 3px 9px;border-radius:999px;white-space:nowrap;font-size:12px;line-height:1.7;color:var(--text);background:rgba(9,15,18,.76);border:1px solid rgba(210,234,229,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[dir=rtl] .globe-section .globe-label-pill{font-size:13px}
.globe-section .globe-label-time{font-size:11.5px;color:var(--muted)}
.globe-section .globe-label-time::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;margin-inline-end:6px;vertical-align:middle;background:rgba(158,174,176,.6)}
.globe-section .globe-label[data-open=true] .globe-label-pill{border-color:rgba(181,228,135,.4)}
.globe-section .globe-label[data-open=true] .globe-label-time{color:var(--text)}
.globe-section .globe-label[data-open=true] .globe-label-time::before{background:var(--lime);box-shadow:0 0 0 2px rgba(181,228,135,.18)}
.globe-section .globe-label[data-kind=home] .globe-label-pill{color:var(--ink);background:var(--lime);border-color:transparent;font-weight:500}
/* An open centre near or behind the limb rides the rim of the disc: globe-section.js sets how far it has
   slid there (--edge 0..1) and the outward direction (--edge-x, --edge-y). The pill turns inward over the
   globe, so it never leaves the viewport, and a small arrow points past the rim (--edge-angle). */
.globe-section .globe-label[data-edge] .globe-label-pill{transform:translate(calc(-50% - 50% * var(--edge-x) * var(--edge)),calc((13px + 50% - 50% * var(--edge-y)) * var(--edge)))}
.globe-section .globe-label[data-edge]::after{content:'';position:absolute;left:0;top:0;width:6px;height:6px;border:solid var(--lime);border-width:2px 2px 0 0;opacity:calc((var(--edge) - .6) * 2.5);transform:translate(-50%,-50%) rotate(var(--edge-angle)) translateX(9px) rotate(45deg)}
.globe-section .globe-stage-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-top:16px}
.globe-section .globe-caption{font-size:var(--globe-small);line-height:1.9;color:var(--muted);max-width:54ch}
.globe-section .globe-reset{flex:none;font-size:12px;line-height:1.5;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text)}
.globe-section .globe-reset:hover{border-color:rgba(181,228,135,.5)}

/* ---- two clocks ---- */
.globe-section .globe-clocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.globe-section .globe-clock{display:grid;align-content:start;gap:6px;padding:20px 22px 18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008))}
.globe-section .globe-clock-label{font-size:var(--globe-small);color:var(--muted)}
.globe-section .globe-clock-time{font-size:clamp(30px,3.3vw,44px);line-height:1.15;font-weight:500;letter-spacing:-.02em;color:var(--text)}
.globe-section .globe-clock-home .globe-clock-time{color:var(--lime)}
.globe-section .globe-clock-sub{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12.5px;line-height:1.8;color:var(--muted)}
[dir=rtl] .globe-section .globe-clock-sub{font-size:13px}
.globe-section .globe-fx-state{color:var(--text)}
/* "Opens Monday 01:00 · in 30 min": the dot sits in the gap before the countdown; when the countdown
   wraps onto its own line the dot falls outside the clipped box, so no line ends on a dangling dot. */
.globe-section .globe-fx-next{display:flex;flex-wrap:wrap;column-gap:14px;overflow:hidden}
.globe-section .globe-fx-countdown{position:relative;white-space:nowrap}
.globe-section .globe-fx-countdown::before{content:'·';position:absolute;inset-inline-start:-9px}
.globe-section .globe-fx-countdown[hidden]{display:none}
.globe-section .globe-clock-market[data-fx-open=true] .globe-fx-state{color:var(--lime)}
.globe-section .globe-live{display:flex;align-items:baseline;gap:9px;font-size:var(--globe-small);line-height:1.8;color:var(--muted)}
.globe-section .globe-live-mark{flex:none;width:6px;height:6px;border-radius:50%;transform:translateY(-1px);background:var(--lime);box-shadow:0 0 0 3px rgba(181,228,135,.14)}

/* ---- clock-change banner ---- */
.globe-section .globe-shear{padding:14px 18px;border:1px solid rgba(227,160,98,.32);border-inline-start:3px solid #e3a062;border-radius:10px;background:rgba(227,160,98,.07)}
.globe-section .globe-shear[hidden]{display:none}
.globe-section .globe-shear strong{display:block;font-size:13px;font-weight:500;color:#f2c693}
.globe-section .globe-shear p{margin-top:2px;font-size:13px;line-height:1.95;color:#ddd2c4}

/* ---- session cards ---- */
.globe-section .globe-sessions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--globe-cards),minmax(0,1fr));gap:12px}
.globe-section .globe-session{min-width:0;padding:18px 20px 16px;border:1px solid var(--line);border-radius:14px;background-color:rgba(255,255,255,.012);transition:border-color .35s ease,background-color .35s ease}
/* Longhand on purpose: a `background` shorthand here would reset the card's background-color. */
.globe-section .globe-session[data-open=true]{border-color:rgba(181,228,135,.32);background-image:linear-gradient(180deg,rgba(181,228,135,.065),rgba(181,228,135,.012))}
.globe-section .globe-session[data-focus]{border-color:rgba(181,228,135,.62)}
.globe-section .globe-session:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.globe-section .globe-session-top{display:grid;gap:2px}
.globe-section .globe-session h3{margin:0;font-size:18px;line-height:1.5}
.globe-section .globe-session-status{display:flex;align-items:center;gap:8px;font-size:var(--globe-small);line-height:1.7;color:var(--muted)}
.globe-section .globe-session-status::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:rgba(158,174,176,.55)}
.globe-section .globe-session[data-status=open] .globe-session-status{color:var(--lime)}
.globe-section .globe-session[data-status=open] .globe-session-status::before{background:var(--lime);box-shadow:0 0 0 3px rgba(181,228,135,.16)}
/* In its typical hours but held by the FX weekend: warm, like the clock-change banner. */
.globe-section .globe-session[data-status=held] .globe-session-status{color:#f2c693}
.globe-section .globe-session[data-status=held] .globe-session-status::before{background:#e3a062}
.globe-section .globe-session-clock{display:flex;align-items:baseline;gap:10px;margin-top:6px;font-size:var(--globe-small);color:var(--muted)}
.globe-section .globe-session-clock strong{font-size:26px;line-height:1.3;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.globe-section .globe-session-window{display:grid;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:var(--globe-small);color:var(--muted)}
.globe-section .globe-session-window-value{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 12px;font-size:14px;color:var(--text)}
.globe-section .globe-dayline{margin-top:14px}
.globe-section .globe-dayline-track{position:relative;display:block;height:6px;border-radius:99px;background:rgba(210,234,229,.08)}
.globe-section .globe-dayline-track i{position:absolute;top:0;bottom:0;border-radius:99px;background:rgba(158,174,176,.42)}
.globe-section .globe-session[data-open=true] .globe-dayline-track i{background:var(--lime)}
/* The bar shows a later day's window: quieter, and without a now-marker. */
.globe-section .globe-session[data-later] .globe-dayline-track i{background:rgba(158,174,176,.26)}
.globe-section .globe-dayline-track b{position:absolute;top:-4px;bottom:-4px;width:2px;margin-inline-start:-1px;border-radius:2px;background:var(--text);box-shadow:0 0 0 2px var(--bg)}
.globe-section .globe-dayline-scale{display:flex;justify-content:space-between;margin-top:6px;font-size:11.5px;line-height:1.4;color:var(--muted)}
.globe-section .globe-session-next{margin-top:10px;font-size:12.5px;line-height:1.8;color:var(--muted)}
[dir=rtl] .globe-section .globe-session-next{font-size:13px}
.globe-section .globe-session[data-open=true] .globe-session-next{color:var(--text)}

/* ---- overlap, weekend, note ---- */
.globe-section .globe-overlap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13px;color:var(--muted)}
.globe-section .globe-overlap-value{font-size:14px;color:var(--text)}
.globe-section .globe-overlap-now{color:var(--lime)}
.globe-section .globe-weekend{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.015)}
.globe-section .globe-weekend strong{display:block;margin-bottom:4px;font-size:14px;font-weight:500;color:var(--text)}
.globe-section .globe-weekend p{font-size:13px;line-height:2}
.globe-section .globe-board>.notice{margin:0}

@media(max-width:1250px){
  .globe-section .globe-clock{padding:18px}
  .globe-section .globe-session{padding:16px 16px 14px}
}
/* Beside the sticky globe the board column is narrow here: one card per row reads better than four squeezed ones. */
@media(min-width:1001px) and (max-width:1250px){
  .globe-section[data-stage=local]:not([data-stage-state=off]):not([data-stage-state=unavailable]){--globe-cards:1}
}
@media(max-width:1000px){
  .globe-section .globe-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "board"}
  .globe-section .globe-stage{position:relative;top:auto}
  .globe-section .globe-viewport{width:min(100%,560px)}
  .globe-section .globe-panel{width:100%}
  .globe-section[data-stage=static],.globe-section[data-stage-state=off],.globe-section[data-stage-state=unavailable]{--globe-cards:2}
  .globe-section[data-stage=static] .globe-board>.globe-weekend,.globe-section[data-stage=static] .globe-board>.notice,.globe-section[data-stage-state=off] .globe-board>.globe-weekend,.globe-section[data-stage-state=off] .globe-board>.notice,.globe-section[data-stage-state=unavailable] .globe-board>.globe-weekend,.globe-section[data-stage-state=unavailable] .globe-board>.notice{grid-column:1/-1}
}
@media(max-width:700px){
  .globe-section,.globe-section[data-stage=static],.globe-section[data-stage-state=off],.globe-section[data-stage-state=unavailable]{--globe-cards:1}
  .globe-section .globe-stage-foot{flex-direction:column;gap:10px}
  .globe-section .globe-viewport{border-radius:20px}
}
@media(max-width:520px){
  .globe-section .globe-clocks{grid-template-columns:minmax(0,1fr)}
  .globe-section .globe-clock-time{font-size:34px}
  .globe-section .globe-panel{padding:22px 16px;border-radius:20px}
}
@media(prefers-reduced-motion:reduce){
  .globe-section .globe-session,.globe-section .globe-viewport canvas{transition:none}
}