/* ============================================================
SEEING MARKETS — RESPONSIVE / MOBILE OVERRIDES
============================================================
PURPOSE
All mobile adaptations for the site live in this single file.
No existing CSS file is ever modified for mobile — this file
is loaded LAST in the of every page (index.html,
chapter-1.html, chapter-2.html) so its rules win over any
earlier stylesheet at equal specificity.
HOW IT WORKS
Every rule is wrapped in @media (max-width: 768px), so nothing
here has any effect on desktop. Desktop rendering is untouched
by design. To disable ALL mobile behavior at once, comment out
the to this file in the HTML pages.
CONTENTS
1. TOP NAV (landing + chapters)
- Hides the language selector (.stx-lang) — no space at 390px.
- Hides the ticker label "EU DAY-AHEAD" and its date; the
live scrolling prices remain, compacted into the space
left of the nav links (flex: 1 + overflow hidden).
2. VIZ FRAME (chapter pages)
- .viz-frame is the sticky white card that hosts every viz
panel. Desktop gives it a small fixed height with
overflow: hidden, which CLIPS stacked mobile content
(this was the "invisible chart" bug — content rendered
below the 320px cut line). On mobile the frame grows to
72vh and .viz-panel (position: absolute inside it) fills
it at 100%.
- Collapsible: js/viz-mobile-toggle.js injects a round
button (.viz-collapse-btn) on mobile only. Toggling adds
.viz-collapsed on the frame → height 52px, panel faded
and click-through, so the reader gets the text back.
Viz state (values, animations) survives collapse.
3. VIZ 1.2 — SOCIAL WELFARE (see-it animation)
- SVG gets a FIXED height (260px): with height:auto inside
a flex container with min-height:0, Safari collapses the
SVG to 0px. Fixed height + viewBox handles scaling.
- The +/- editor is kept interactive but compacted; buttons
are ENLARGED to 24px (touch targets need to grow on
mobile even as everything else shrinks).
- Story text slightly smaller so the chart dominates.
RELATED NON-CSS MOBILE CHANGES (for the full picture)
- js/network.js: below 768px the landing grid uses smaller
minDist (55 vs 85) and edge margins (14 vs 30) so the
network fills a narrow screen.
- js/viz-mobile-toggle.js: the collapse button (see above).
CONVENTIONS
- One section per feature, commented.
- Prefer hiding/compacting over restructuring.
- Fixed heights only where flex collapse forces it (SVGs).
- Touch targets ≥ 24px even when shrinking everything else.
Tested at 390 × 844 (Safari Responsive Design Mode) and on
a real iPhone via Live Server (http://:5501).
============================================================ */
@media (max-width: 768px) {
/* --- Top nav: mobile --- */
.stx-lang {
display: none;
}
/* Compact ticker: no date, smaller label, prices keep scrolling */
.stx-ticker-date {
display: none;
}
.stx-ticker {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
}
.stx-ticker-label {
display: none;
}
.stx-nav {
gap: 8px;
}
.stx-nav-links {
gap: 10px;
flex-shrink: 0;
}
.stx-nav-links button {
font-size: 13px;
}
/* --- Viz 1.2 welfare: simplified on mobile --- */
/* Compact +/- editor on mobile (kept interactive) */
.viz12x-editor {
gap: 8px 14px;
padding: 2px 0;
}
.viz12x-ed-name {
width: 44px;
font-size: 10px;
}
.viz12x-ed-val {
min-width: 40px;
font-size: 10px;
}
.viz12x-ed-btn {
width: 24px;
height: 24px;
font-size: 15px;
}
/* Let the chart use the freed space */
.viz12x-welfare-svg {
width: 100%;
height: 260px;
max-height: none;
}
/* Slightly tighter header/story so the chart dominates */
.viz12x-story {
font-size: 11px;
min-height: 0;
}
/* Taller viz frame on mobile so stacked content fits */
.viz-frame {
height: 72vh !important;
}
.viz-panel {
height: 100% !important;
}
/* --- Collapsible viz frame on mobile --- */
.viz-collapse-btn {
position: absolute;
top: 8px;
right: 8px;
z-index: 20;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--rule);
background: var(--bg-card);
color: var(--text-soft);
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(26, 36, 54, 0.15);
}
.viz-frame.viz-collapsed {
height: 52px !important;
}
.viz-frame.viz-collapsed .viz-panel {
opacity: 0;
pointer-events: none;
}
.viz-frame {
transition: height 0.35s ease;
}
}