/* ============================================================
   Orbixia — newspaper editorial (Semafor-inspired).
   Warm newsprint paper, serif masthead & headlines (Fraunces),
   sans for metadata. Hairline rules, numbered "at a glance" list,
   a rotating-globe live clock. Heat ramp colors the data.
   ============================================================ */

:root {
  --paper:  oklch(0.965 0.040 96);      /* #f8f5d7 warm newsprint */
  --paper-2:oklch(0.945 0.044 96);
  --ink:    oklch(0.245 0.012 80);      /* #1f1d1a warm near-black */
  --ink-2:  oklch(0.45 0.012 80);
  --ink-3:  oklch(0.58 0.012 86);
  --rule:   color-mix(in oklch, var(--ink) 22%, transparent);
  --rule-2: color-mix(in oklch, var(--ink) 55%, transparent);

  /* Semafor-ish soft pastels for section tints */
  --peach:  oklch(0.90 0.060 64);       /* #ffe1be */
  --mint:   oklch(0.93 0.040 165);      /* #d8eee2 */
  --gold:   oklch(0.83 0.110 78);       /* #faca6e */

  --accent: oklch(0.55 0.18 40);        /* per-element heat, set by JS */
  --accent-soft: color-mix(in oklch, var(--accent) 24%, transparent);
  --clock-second: oklch(0.50 0.17 32);

  --up:   oklch(0.48 0.14 150);
  --down: oklch(0.50 0.19 27);

  --serif: "Fraunces", Georgia, "Times New Roman", Times, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  --pad: clamp(16px, 3.2vw, 44px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1120px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font-family: var(--serif); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.masthead, main, footer { max-width: var(--maxw); margin-inline: auto; }

/* ---- Masthead ------------------------------------------------------ */
.masthead { padding: 14px var(--pad) 0; }
.m-utility {
  display: flex; align-items: center; justify-content: center;
  min-height: 22px; font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.02em;
}
.clock { justify-self: start; display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-transform: uppercase; }
.clock-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.clock-date { color: var(--ink-3); }
.m-tagline { margin: 0; justify-self: center; font-family: var(--serif); font-size: 11px; line-height: 1; color: var(--ink-2); white-space: nowrap; }
.m-actions { justify-self: end; display: inline-flex; align-items: center; gap: 14px; }
.regime { color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.regime b { color: var(--ink); }

/* rotating Earth globe */
.globe { width: 24px; height: 24px; flex: none; display: inline-block; color: #3f5575; }
.globe-img, .globe-static { width: 100%; height: 100%; display: block; }
.globe-img { object-fit: contain; }
.globe-static { display: none; overflow: visible; }

.btn {
  font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink-2); background: transparent; border: 1px solid var(--rule); border-radius: 2px;
  padding: 3px 8px; cursor: pointer; text-transform: uppercase;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 150ms;
}
.btn:hover { color: var(--ink); background: var(--paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn[disabled] { opacity: 0.5; cursor: progress; }
.btn.is-busy .btn-label::after { content: "…"; }

.m-brand { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3.8vw, 46px); padding: 3px 0 7px; border-bottom: 1px solid var(--rule); }
.worldclocks { display: flex; gap: clamp(8px, 1.1vw, 14px); }
.dial { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dial .city { font-family: var(--sans); font-size: 8px; font-weight: 700; letter-spacing: 0.05em; color: var(--ink-3); text-transform: uppercase; }
.dial svg { width: 30px; height: 30px; display: block; }
.dial .face { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.dial .hh { stroke: var(--ink); stroke-width: 1.7; }
.dial .mh { stroke: var(--ink); stroke-width: 1.15; }
.dial .sh { stroke: var(--clock-second); stroke-width: 1.05; stroke-linecap: round; }
.dial .pin { fill: var(--ink); }
.logo { display: inline-block; text-decoration: none; color: var(--ink); font-weight: 700; font-size: clamp(46px, 6vw, 68px); line-height: 0.82; letter-spacing: 0.005em; text-transform: uppercase; }

.m-timebar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 34px; padding: 2px 0 6px; border-bottom: 1.5px solid var(--ink);
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.035em;
}

/* ---- Front page (3 columns) ---------------------------------------- */
main { padding: 0 var(--pad); }
.market-pulse {
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(0, 2.08fr);
  gap: clamp(14px, 2.6vw, 30px);
  padding: 18px 0 16px;
  border-bottom: 1.5px solid var(--ink);
}
.pulse-head {
  display: grid;
  align-content: start;
  gap: 8px;
}
.pulse-kicker {
  display: block;
  margin-bottom: 5px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pulse-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.pulse-head p {
  max-width: 52ch;
  margin: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.pulse-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px dotted var(--rule-2);
  border-bottom: 1px dotted var(--rule-2);
}
.pulse-meter {
  min-width: 0;
  padding: 10px 12px 11px;
  border-right: 1px dotted var(--rule-2);
  font-family: var(--sans);
}
.pulse-meter:last-child { border-right: none; }
.pulse-meter.is-up { --meter: var(--up); }
.pulse-meter.is-flat { --meter: var(--gold); }
.pulse-meter.is-down { --meter: var(--down); }
.pulse-top, .pulse-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pulse-top span {
  color: var(--ink-3);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.pulse-top b {
  color: var(--meter);
  font-size: 13px;
  line-height: 1;
}
.meter-track {
  position: relative;
  height: 10px;
  margin: 11px 0 8px;
  border: 1px solid var(--rule);
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in oklch, var(--ink) 18%, transparent) 7px 8px),
    color-mix(in oklch, var(--paper-2) 68%, transparent);
}
.meter-track i {
  display: block;
  height: 100%;
  background: color-mix(in oklch, var(--meter) 78%, transparent);
}
.pulse-bottom {
  color: var(--ink-3);
  font-size: 10px;
  line-height: 1.2;
}
.pulse-bottom span:first-child {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.front { display: grid; grid-template-columns: minmax(218px, 0.88fr) minmax(380px, 1.72fr) minmax(220px, 0.9fr); }
.glance { padding: 20px 20px 18px 0; border-right: 1px dotted var(--rule-2); }
.feature { padding: 20px 24px 18px; border-right: 1px dotted var(--rule-2); }
.secondary { padding: 20px 0 18px 20px; }

.rule-h { font-family: var(--serif); font-weight: 650; font-size: 22px; line-height: 0.98; letter-spacing: -0.015em; margin: 0 0 14px; padding-bottom: 9px; border-bottom: 1.5px solid var(--ink); }

/* glance list */
.glance-list { list-style: none; counter-reset: g; margin: 0; padding: 0; }
.glance-list li {
  counter-increment: g;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0 11px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px dotted var(--rule-2);
}
.glance-list li::before { content: counter(g); align-self: start; padding-top: 2px; font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--ink-3); }
.glance-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 11px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.glance-btn:hover .g-name { color: var(--accent); }
.glance-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.glance-list li.is-active { background: color-mix(in oklch, var(--accent) 9%, transparent); }
.glance-list li.is-active::before { color: var(--accent); }
.glance-list li.is-active .g-name { color: var(--accent); }
.g-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.g-name { font-family: var(--serif); font-weight: 650; font-size: 15.5px; line-height: 1.06; letter-spacing: -0.01em; }
.g-meta { font-family: var(--sans); font-size: 10.5px; line-height: 1.35; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.g-meta .up { color: var(--up); } .g-meta .down { color: var(--down); }
.g-right { display: flex; align-items: flex-start; justify-content: flex-end; min-width: 28px; padding-top: 1px; }
.g-heat { font-family: var(--sans); font-weight: 800; font-size: 15px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }

/* charts */
.spark-wrap { position: relative; width: 100%; height: 100%; }
.spark { display: block; width: 100%; height: 100%; overflow: visible; }
.feat-chart {
  margin: 18px 0 0; padding: 14px 14px 8px;
  border-top: 1px dotted var(--rule-2); border-bottom: 1px dotted var(--rule-2);
  background:
    radial-gradient(circle at 18px 18px, color-mix(in oklch, var(--ink) 10%, transparent) 1px, transparent 1.3px) 0 0 / 28px 28px,
    color-mix(in oklch, var(--chart) 5%, var(--paper));
}
.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-family: var(--sans);
  text-align: left;
}
.chart-toolbar > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.chart-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chart-key {
  width: 22px;
  height: 0;
  border-top: 2px solid var(--chart);
  border-radius: 99px;
}
.chart-range-label {
  color: var(--ink-3);
  font-size: 10px;
}
.range-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  border: 1px solid var(--rule);
  background: color-mix(in oklch, var(--paper) 70%, transparent);
}
.range-btn {
  min-width: 30px;
  min-height: 22px;
  padding: 2px 6px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 800;
  cursor: pointer;
}
.range-btn:hover { color: var(--ink); background: color-mix(in oklch, var(--ink) 7%, transparent); }
.range-btn.is-active { color: var(--paper); background: var(--ink); }
.interactive-chart {
  position: relative;
  height: 232px;
  outline: none;
  cursor: crosshair;
}
.interactive-chart:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.interactive-spark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--ink-3);
}
.chart-gridline line {
  stroke: currentColor;
  stroke-width: 0.65;
  stroke-opacity: 0.24;
  stroke-dasharray: 2 5;
}
.chart-gridline text, .chart-xlabels text {
  fill: var(--ink-3);
  font-family: var(--sans);
  font-size: 9.5px;
}
.chart-baseline line {
  stroke: var(--ink);
  stroke-width: 0.8;
  stroke-opacity: 0.34;
  stroke-dasharray: 4 4;
}
.chart-baseline text {
  fill: var(--ink-2);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chart-area { fill-opacity: 0.07; }
.chart-line {
  fill: none;
  stroke-width: 1.45;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.chart-crosshair {
  stroke: var(--ink);
  stroke-width: 1.05;
  stroke-opacity: 0.58;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
.chart-tip {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 40%;
  min-width: 126px;
  padding: 7px 8px;
  border: 1px solid var(--rule-2);
  background: color-mix(in oklch, var(--paper) 94%, var(--chart));
  box-shadow: 0 8px 20px color-mix(in oklch, var(--ink) 14%, transparent);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.35;
  text-align: left;
  transform: translate(-50%, calc(-100% - 10px));
  pointer-events: none;
}
.chart-tip b, .chart-tip span { display: block; }
.chart-tip b { color: var(--ink); font-size: 10.5px; }
.chart-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 7px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  text-align: left;
}
.chart-stats span {
  min-width: 0;
  padding: 7px 8px 0;
  border-right: 1px dotted var(--rule);
  color: var(--ink-3);
  font-size: 10px;
  line-height: 1.25;
}
.chart-stats span:last-child { border-right: none; }
.chart-stats b {
  display: block;
  color: var(--ink);
  font-size: 12px;
}
.feat-chart .spark { width: 100%; height: 210px; color: var(--ink); }
.feat-chart .spark-wrap { height: 210px; }
.feat-chart figcaption { font-family: var(--sans); font-size: 10px; color: var(--ink-3); margin-top: 7px; letter-spacing: 0.02em; text-align: left; }
.sec-chart { margin: 9px 0 11px; height: 56px; color: var(--ink); }

/* feature (#1) */
.feature > div { text-align: center; }
.feat-kicker { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.feat-headline { font-family: var(--serif); font-weight: 650; font-size: clamp(30px, 4vw, 46px); line-height: 0.98; letter-spacing: -0.025em; margin: 0 auto; max-width: 12ch; }
.feat-dek { font-family: var(--serif); font-size: clamp(14px, 1.45vw, 17px); line-height: 1.35; color: var(--ink-2); margin: 10px auto 0; max-width: 46ch; }
.source-note {
  margin: 12px auto 0;
  max-width: 46ch;
  padding-top: 9px;
  border-top: 1px dotted var(--rule-2);
  text-align: left;
  font-family: var(--sans);
}
.source-note p { margin: 0 0 7px; color: var(--ink-2); font-size: 11px; line-height: 1.42; }
.source-links { display: flex; flex-wrap: wrap; gap: 6px; }
.source-links a {
  display: inline-flex;
  max-width: 100%;
  min-height: 20px;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-2);
  background: color-mix(in oklch, var(--mint) 24%, transparent);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.source-links a:hover { color: var(--ink); border-color: var(--rule-2); background: color-mix(in oklch, var(--mint) 42%, transparent); }
.feat-strip { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; margin-top: 13px; padding: 10px 0 0; text-align: left; font-family: var(--sans); border-top: 1px solid var(--rule); }
.feat-score { display: inline-flex; align-items: baseline; gap: 8px; color: var(--accent); font-variant-numeric: tabular-nums; }
.feat-score span { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.feat-score b { font-size: 30px; line-height: 1; }
.feat-stats { font-size: 11.5px; line-height: 1.45; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.feat-stats b { color: var(--ink); }
.feat-movers { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
/* skeletons (mirror the loaded layout so loading never looks broken) */
.feat-skel { display: flex; flex-direction: column; gap: 14px; padding: 2px 0; }
.g-skel, .sk-line, .sk-block, .sec-skel, .pulse-skel {
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--ink) 7%, transparent), transparent);
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: 3px;
}
.g-skel { height: 50px; border-bottom: 1px dotted var(--rule); }
.pulse-skel { min-height: 66px; }
.sk-line { height: 16px; }
.sk-line.tall { height: 38px; } .sk-line.w40 { width: 40%; } .sk-line.w90 { width: 90%; } .sk-line.w70 { width: 70%; }
.sk-block { height: 190px; margin-top: 6px; }
.sec-skel { height: 150px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }

/* secondary (#2, #3) */
.sec-item { padding: 0 0 17px; margin-bottom: 17px; border-bottom: 1px dotted var(--rule-2); }
.sec-item:last-child { border-bottom: none; }
.sec-kicker { font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; display: flex; justify-content: space-between; align-items: baseline; }
.sec-kicker .sec-heat { font-size: 16px; color: var(--accent); }
.sec-headline { font-family: var(--serif); font-weight: 650; font-size: clamp(18px, 2vw, 22px); line-height: 1.02; letter-spacing: -0.015em; margin: 0 0 9px; }
.sec-dek { margin: -2px 0 9px; font-family: var(--serif); font-size: 13.5px; line-height: 1.28; color: var(--ink-2); }
.source-note.is-compact {
  margin: 8px 0 9px;
  max-width: none;
  padding-top: 7px;
}
.source-note.is-compact p { font-size: 10.5px; line-height: 1.36; margin-bottom: 6px; }
.source-note.is-compact .source-links a { font-size: 9px; }
.sec-stats { font-family: var(--sans); font-size: 11px; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sec-stats b { color: var(--ink); }
.sec-movers { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }

/* movers chip (shared) */
.mv { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--sans); font-size: 10.5px; padding: 2px 6px; border: 1px solid var(--rule-2); border-radius: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; background: color-mix(in oklch, var(--paper) 58%, transparent); }
.mv-t { color: var(--ink-2); font-weight: 600; }
.mv b.up { color: var(--up); } .mv b.down { color: var(--down); } .mv b.flat { color: var(--ink-3); }
.runner { color: var(--accent); font-family: var(--sans); font-size: 11px; }
.found { color: var(--ink-3); font-family: var(--sans); font-size: 11px; }

/* ---- Footer -------------------------------------------------------- */
footer { padding: 26px var(--pad) 56px; border-top: 2.5px solid var(--ink); margin-top: 8px; display: grid; gap: 12px; }
.foot-logo { font-family: var(--serif); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; }
.method { margin: 0; font-family: var(--sans); font-size: 12px; line-height: 1.6; color: var(--ink-3); max-width: 96ch; }
.method b { color: var(--ink-2); }

/* ---- Error overlay ------------------------------------------------- */
.errbox { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: color-mix(in oklch, var(--paper) 75%, transparent); backdrop-filter: blur(3px); }
.errbox-inner { text-align: center; max-width: 400px; padding: 30px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); }
.err-title { font-family: var(--serif); font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.err-msg { font-family: var(--sans); font-size: 12.5px; color: var(--ink-2); margin: 0 0 18px; word-break: break-word; }

@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 920px) {
  .market-pulse { grid-template-columns: 1fr; }
  .pulse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse-meter:nth-child(2) { border-right: none; }
  .pulse-meter:nth-child(-n+2) { border-bottom: 1px dotted var(--rule-2); }
  .front { grid-template-columns: 1fr; }
  .glance, .feature { border-right: none; border-bottom: 1px solid var(--rule); padding: 22px 0; }
  .secondary { padding: 22px 0; }
  .feature { order: -1; }
  .chart-toolbar { align-items: flex-start; flex-direction: column; }
  .interactive-chart { height: 214px; }
  .chart-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-stats span:nth-child(2) { border-right: none; }
  .chart-stats span:nth-child(-n+2) { border-bottom: 1px dotted var(--rule); padding-bottom: 7px; }
  .worldclocks { display: none; }
  .m-utility { gap: 7px; }
  .m-timebar { flex-wrap: wrap; justify-content: center; padding-top: 6px; }
  .m-actions { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 1ms !important; }
  .globe-img { display: none; }
  .globe-static { display: block; }
}