/* ═══ §7 · SHARED · MODALS ════════════════════════════════════════════════════════════ Three chassis, and every modal in the app is one of them: .modal a bottom sheet with a grabber — ticker · scanner · replay .composite-modal a centred card — statik · why · session plan · brain · regime .council-modal the round table — the Fusion §7.1 is the sheet chrome; §7.2–§7.9 are the individual modals in that order. */ /* ── §7.1 the bottom-sheet chassis ── */ .modal { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; z-index: 10001; gap: var(--sp-md); /* side padding only — the content owns its own top/bottom so the sheet can sit flush */ padding-left: var(--sp-md); padding-right: var(--sp-md); padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-bottom: 0; } /* ★ TICKER OVER REPLAY (operator 2026-08-20): ticker · scanner · replay all inherit the same base z-index above, so two of them open at once stack by DOM ORDER, not open order — and #replay-modal sits AFTER #ticker-modal in system.html, so replay always won the tie. Scanner never exposed this because showTickerModalFromScanner closes the scanner modal before opening the ticker (see modal-scanner.js) — only one .modal is ever visible at a time on that path. Replay's ticker row (modal-replay.js _paintReplayFrame → openTickerModalByTicker) does NOT close replay first, by design — the operator wants the ticker to open OVER an untouched replay session so closing the ticker lands back exactly where playback was, with no reload. Dropping replay one step below the shared base (rather than raising ticker) is the minimal fix: it changes nothing about ticker-modal's own stacking against anything else (statik-sheet, chart-fullscreen), only its order relative to replay specifically. */ #replay-modal { z-index: 10000; } /* ★★★ AND HERE IS THE MECHANISM THE COMMENT ABOVE ONLY HALF-NAMED — MEASURED 2026-08-22, after a z-index written in this file did nothing at all. The note above says these sheets "stack by DOM ORDER, not open order"; that is true, and the REASON is that `#app` computes `position: relative; z-index: 1`. #app is a STACKING CONTEXT, so ticker · scanner · replay are sealed at z-index 1 against the document: their z-indices only ever compare with each OTHER. A sheet inside #app can never out-paint one of the seven host-pattern modals (analytics · why · brain · regime · engram · session-plan · council), whose hosts are appended to — no matter what number it carries. `#grades-modal { z-index: 10002 }` was written here first, and the sheet opened INVISIBLY under the Analytics sheet while getComputedStyle reported exactly 10002. The number was honoured; it was honoured inside the wrong context. ⚠ SO WHERE A SHEET'S HOST IS ATTACHED IS THE REAL CONTROL, and it is chosen per sheet in JS (`_overlayHost(id, parent)`), not here. The two rules below only order sheets WITHIN their own context, which is all a z-index can ever do: ★ THE SIGNALS SHEET takes replay's rule for replay's reason — its host is attached inside #app, so this drop below the shared base lets `#ticker-modal` (10001) open OVER it. A signal row does NOT close this sheet first, so closing the ticker lands back on the same day of the same list. */ #signals-modal { z-index: 10000; } /* ★ THE NEWS SHEET takes the same rule for the same reason — its host is attached inside #app and every one of its rows opens a ticker, which must paint over it. */ #news-modal { z-index: 10000; } /* ★ THE GRADES SHEET is attached to , beside the Analytics host it opens from, which is the only place its z-index can beat that host's 10001 at all. */ #grades-modal { z-index: 10002; } /* ★★ THE TICKER SHEET IS THE DETAIL EVERY OTHER SURFACE LINKS INTO — a race row, a scan row, a replayed minute, a signal, a grade — so it sits above all of them. modal-ticker.js MOVES this node to for exactly that reason: inside #app the number below is unreachable by anything at body level, and the sheet opened behind the Analytics and Grades sheets (operator 2026-08-22: "it opens behind the current two modals so i have to close out of both to see the ticker"). ⚠ THE ORDER BELOW IS THE WHOLE LADDER — read it as one thing, not six separate rules: 10000 replay · signals (inside #app — a ticker may open over them) 10001 scanner (in #app) · the six overlay-host modals (at ) 10002 grades (at , above the analytics sheet it opens from) 10003 ticker (at , above every surface that links INTO it) 10004 why (at , above ticker — the one link going the OTHER way) A sheet's ADDRESS decides which of these numbers it can even be compared against; see `_overlayHost`'s own header. Adding a sheet means choosing both, deliberately. */ #ticker-modal { z-index: 10003; } /* ★★ WHY IS THE ONE SHEET THAT OPENS *OUT* OF THE TICKER SHEET, and that edge is new (operator 2026-08-25: "when i press the grade in chart modal, the grade modal opens behind the chart modal when it should be above"). This rule's predecessor said ticker was "the top of the ladder, ALWAYS — there is no arrangement in which something should cover it." That was true while every arrow pointed INTO the ticker sheet; the Statik-says grade strip added the first arrow pointing out of it, so the claim expired the moment the strip shipped. ⚠ IT NEEDED AN ID TO BE ADDRESSABLE AT ALL. modal-why.js built a bare `

`, so it took §7.1's shared 10001 and the ticker sheet's 10003 painted straight over it — the number was honoured, there was simply no selector that could raise it. The id is added in that card in the same edit; a rule here matching nothing would have looked like a fix and changed nothing. */ #why-modal { z-index: 10004; } .modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal-content { position: relative; width: 100%; max-width: 400px; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; /* flush to the viewport bottom (the sheet covers the nav while open); max-height keeps the TOP edge where it was before the sheet was allowed to extend down. */ max-height: calc(100vh - env(safe-area-inset-top, 0px) - 20px); /* ★ THE BLACK-GAP BUG (operator 2026-08-20: "not a single modal scrolls off page. they all have black gaps... doesn't fit the came from bottom theme"). Same defect shell.css already names for #app/.view-container: a bare `100vh` is computed against the LARGEST possible iOS Safari viewport (toolbar hidden), not what is actually visible at the scroll state the sheet opens at — so the sheet's own max-height (and therefore its bottom edge) sits below the true visible bottom, leaving dead space under it instead of a flush fill. `100dvh` tracks the ACTUAL visible height; `modal-chart-scroll.is-fullscreen` below already proves it live in this same file. The `100vh` line above stays as the fallback for engines that do not understand `dvh` — this line only overrides it where dvh is understood. */ max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 20px); margin-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); overflow-y: auto; animation: slideUp 0.32s cubic-bezier(0.32, 0.72, 0, 1); will-change: transform; } /* ── EVERY SHEET RISES FROM THE BOTTOM EDGE (operator 2026-08-12: "every modal needs to come from the bottom of the page (rewind/chart/chat/scanner/contact)") ── It was `translateY(100px)` — a 100px HOP that starts with most of the sheet already painted, which is not the same gesture as a sheet coming up off the edge. `100%` is the card's OWN height, so it starts entirely below the viewport bottom whatever the content's length; a pixel constant cannot do that because the sheets are three different heights. ★★ AND THE EASING HAD TO CHANGE WITH IT, WHICH IS NOT A STYLE PREFERENCE — IT IS THE GEOMETRY. `cubic-bezier(0.34, 1.56, 0.64, 1)` is a SPRING: its second control point is 1.56, so it travels PAST its destination and settles back. Over a 100px hop the overshoot lands harmlessly inside the card. Over a full-height rise the destination is `translateY(0)` — flush to the viewport bottom — so overshooting means NEGATIVE y: the sheet lifts OFF the bottom edge and the dimmed page shows through the gap underneath it, every single time it opens. The one curve that was right for a hop is wrong for a rise. `cubic-bezier(0.32, 0.72, 0, 1)` is monotone — it decelerates into the edge and stops there. ⚠ THE NAME IS KEPT DELIBERATELY. Renaming to something like `sheetRise` would orphan any other card that animates with `slideUp` without my having read it; keeping the name means every existing user inherits the bottom rise, which is exactly what was asked for. */ @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-grabber { width: 52px; height: 5px; background: rgba(255, 255, 255, 0.42); border-radius: 3px; margin: 10px auto 6px; cursor: grab; flex-shrink: 0; transition: background 0.15s ease, transform 0.15s ease; } /* ★★ THE HOVER LAW, AND IT GOVERNS EVERY `:hover` IN THIS FILE — NOT JUST THIS ONE. iOS Safari LATCHES `:hover` on the last-tapped element and never releases it: there is no pointer to leave, so the state persists until some other element is tapped. A hover rule that paints a colour therefore reads as a control that stayed switched on. ⚠ THIS GUARD WAS WRITTEN FOR THE GRABBER AND APPLIED TO NOTHING ELSE, and that is the whole of the operator's 2026-08-11 report: "unless pressed off the tool/fullscreen/fileupload all stay gold… after trigger they need to go back to the original grey colour". Every control on the chat sheet carried a bare `:hover { color: var(--accent-gold) }`, so one tap gilded it permanently. Every hover in this file is now inside `@media (hover: hover)`. ★ AND A STATE CLASS MUST NEVER RIDE INSIDE THE GUARD. Where a rule read `.x:hover, .x.is-open { … }` the two halves are SPLIT: `.is-open` / `.is-on` / `.active` are FACTS the organism sets (this pop is open, the web read is armed) and must paint on every device. Folding them into a hover-capable media query would have traded a stuck highlight for a state nobody can see — the repaired-checker trap, in CSS. */ @media (hover: hover) { .modal-grabber:hover { background: rgba(255, 255, 255, 0.65); transform: scaleX(1.1); } } .modal-grabber:active { cursor: grabbing; background: rgba(255, 255, 255, 0.75); } .modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--sp-lg); border-bottom: 1px solid var(--glass-border); } .modal-title { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--accent-gold); } .modal-subtitle { font-size: 0.9rem; color: var(--text-secondary); margin-top: 4px; } .modal-subtitle.positive { color: var(--accent-green); } .modal-subtitle.negative { color: var(--accent-red); } /* ⚠ `.modal-close` IS DELETED, NOT COMMENTED (R3b). The replay sheet was its LAST site (operator 2026-08-12: "the rewind modal needs its X removed too"); ticker and scanner never had one. Proven dead two independent ways rather than by reading seven more JS cards: · system.html read WHOLE, line 1 -> 1,061: the class occurred EXACTLY ONCE, and that ✕ is gone · the LIVE DOM at 390px after opening all three sheets + statik · council · brain · session-plan · regime · engram · why -> `.modal-close` 0, while `.composite-modal-close` 4, `.council-close` 1 and `.modal-grabber` 4 in the same query. The census DISCRIMINATES, so the zero is a fact about this class and not about the probe. The centred cards keep `.composite-modal-close` and the round table keeps `.council-close`; those are different rules and are untouched. */ .modal-body { padding: var(--sp-lg); padding-bottom: calc(var(--sp-lg) + 24px); display: flex; flex-direction: column; gap: var(--sp-lg); flex: 1; overflow-y: auto; /* ★ THE SCROLLBAR'S ROOM IS RESERVED WHETHER OR NOT IT IS THERE. Without this the gutter appears only once the content overflows, so a child that measured itself against the full width — the `.discover-stats` grid in the Brain modal — ends up with its last column underneath the bar. READ off the 390px shot. A stable gutter makes the content width one number instead of two. */ scrollbar-gutter: stable; /* a flex column's items default to `stretch`; this stops one wide child from widening the box */ min-width: 0; } /* and every direct child is free to SHRINK rather than force the body wider — the other half of the same rule, because a flex item's default `min-width: auto` is its own content's width. */ .modal-body > * { min-width: 0; } .modal-section { display: flex; flex-direction: column; gap: var(--sp-md); } .modal-section-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .modal-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); } .modal-stat { padding: var(--sp-md); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); border-radius: 12px; text-align: center; } .modal-stat-label { font-size: 0.65rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .modal-stat-value { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--accent-gold); } .modal-footer { padding: var(--sp-lg); border-top: 1px solid var(--glass-border); display: flex; gap: var(--sp-sm); } .modal-btn { flex: 1; padding: 10px; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; color: var(--accent-gold); background: rgba(212, 175, 55, 0.08); border: 1px solid rgba(212, 175, 55, 0.2); border-radius: 10px; cursor: pointer; transition: all 0.2s; } .modal-btn:active { transform: scale(0.97); } /* ── §7.2 the TICKER modal — the score breakdown block it owns ── */ .score-breakdown { display: flex; flex-direction: column; gap: var(--sp-sm); padding: var(--sp-md); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); border-radius: 12px; } .score-breakdown-formula { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent-gold); letter-spacing: 0.02em; } .score-breakdown-note { font-size: 0.7rem; color: var(--text-dim); line-height: 1.4; } .score-breakdown-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-xs); font-family: var(--font-mono); font-size: 0.75rem; } .score-breakdown-grid .kv { display: flex; justify-content: space-between; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); } .score-breakdown-grid .kv .k { color: var(--text-dim); } .score-breakdown-grid .kv .v { color: var(--text-primary); } .score-breakdown-grid .kv .v.pending { color: var(--text-dim); font-style: italic; } /* ── §7.3 the CHART, inside the ticker modal, and its FULLSCREEN ────────────────────── The chart is not a modal of its own: it is a section of the ticker sheet, and pressing it takes the whole viewport the same way the theater does. */ /* the timeframe toolbar — one scrolling row, never two wrapped ones on a phone */ .modal-chart-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 2px; } .modal-chart-toolbar::-webkit-scrollbar { height: 4px; } .modal-chart-toolbar::-webkit-scrollbar-thumb { background: rgba(192, 192, 192, 0.25); border-radius: 2px; } .modal-chart-toolbar .tf-btn { flex: 0 0 auto; } .tf-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); color: var(--text-dim); font: 600 0.7rem/1 var(--font-mono); padding: 6px 10px; border-radius: 10px; cursor: pointer; transition: all 0.15s ease; } @media (hover: hover) { .tf-btn:hover { color: var(--text-primary); background: rgba(212, 175, 55, 0.12); } } .tf-btn.active { color: var(--accent-gold); background: rgba(212, 175, 55, 0.18); border-color: rgba(212, 175, 55, 0.55); box-shadow: 0 0 14px rgba(212, 175, 55, 0.18) inset; } .tf-rth { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--text-dim); font: 600 0.65rem/1 var(--font-mono); cursor: pointer; user-select: none; } .tf-rth input { accent-color: var(--accent-gold); } /* the crosshair OHLCV readout — absolutely placed inside the chart wrapper, pointer-events off so the SVG underneath still receives movement */ .chart-crosshair-wrap { touch-action: none; } .chart-crosshair-legend { position: absolute; pointer-events: none; min-width: 118px; padding: 6px 8px; background: var(--glass-bg-heavy); border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 6px; color: var(--ink-panel); font: 500 0.68rem/1.25 var(--font-mono); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); z-index: 4; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .chart-crosshair-legend.up { border-color: rgba(46, 204, 113, 0.55); } .chart-crosshair-legend.down { border-color: rgba(232, 93, 42, 0.55); } .chart-crosshair-legend .xh-time { font-size: 0.62rem; color: var(--text-dim); margin-bottom: 3px; letter-spacing: 0.04em; } .chart-crosshair-legend .xh-grid { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 1px; } .chart-crosshair-legend .xh-k { color: var(--text-dim); font-weight: 700; } .chart-crosshair-legend .xh-v { text-align: right; font-variant-numeric: tabular-nums; } /* the session legend under the chart (pre / RTH / after-hours / overnight) — operator 2026-08-12: "properly add color divides for pre-intra-after-overnight". The swatch shape was already here, unwired to any colour or any JS; these four are the same phases app/system/js/chart.js now paints as background bands behind the candles, and the same hex values (read off these tokens into chart.js's own colour map, since an SVG fill cannot read a CSS custom property set on a DIFFERENT element's font shorthand the way `currentColor` can) — legend and chart cannot show two different colours for the same session because there is only one set of values, used twice. */ #modal-chart-legend .sess-swatch.overnight { background: var(--accent-violet); } #modal-chart-legend .sess-swatch.pre { background: var(--accent-cyan); } #modal-chart-legend .sess-swatch.regular { background: var(--text-dim); } #modal-chart-legend .sess-swatch.post { background: var(--accent-orange); } #modal-chart-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; padding: 0 2px; font-size: 0.58rem; color: var(--text-dim); font-family: var(--font-mono); letter-spacing: 0.02em; } #modal-chart-legend .sess-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; opacity: 0.7; } #modal-chart-legend > span { display: inline-flex; align-items: center; gap: 2px; letter-spacing: 0.02em; } /* ★★ THE SCROLL BOX IS THE CHART'S SIZE, AND IT IS DECLARED HERE — that is what makes the fullscreen chart possible at all. `chart.js` MEASURES this box and draws into the measurement, so the strip's height is a CSS fact and the fullscreen rule below is the only thing that changes it. 216px is the BORDER box (`box-sizing: border-box`, reset.css §1): 214px of drawing between two 1px borders — the exact height the renderer used to bake into the SVG as a constant. ⚠ THE BORDER, THE RADIUS AND THE SURFACE LIVE HERE, NOT ON THE ELEMENT. They were inline styles written by the renderer, which is why the fullscreen rule below needed `!important` to repaint the box. An inline style loses nothing by moving here and the override disappears with it. */ #modal-chart-scroll { position: relative; height: 216px; overflow-x: auto; /* the drawing is exactly as tall as this box, so there is never a vertical axis to scroll — and a classic 4px horizontal scrollbar must not be allowed to invent one. */ overflow-y: hidden; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--bg-void); scrollbar-width: thin; /* iOS Safari needs `pan-x` to allow horizontal panning inside a fixed-height overflow box nested in a sheet; without it the parent's vertical pan handler captures the touch — TRUE for a box the browser is allowed to pan natively. It stops being true the moment a gesture needs to become something else mid-touch (a hold that turns into "drag the crosshair, don't scroll the chart"), because the Pointer Events spec fixes the touch-action decision at `pointerdown` and ignores any change made afterward (verified against the spec and Chromium's own bug tracker, 2026-08-14 — dynamically toggling this value once a hold fires does nothing; the browser already decided). `none` hands the WHOLE gesture to chart.js's own `_chartWireCursor`, which now implements panning, momentum-free drag, and the hold itself by hand — the only way to get "quick drag pans, held-still-then-drag inspects" without the browser's own gesture recognizer occasionally winning the race and firing `pointercancel` out from under it. */ touch-action: none; overscroll-behavior-x: contain; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } #modal-chart-scroll::-webkit-scrollbar { height: 4px; } #modal-chart-scroll::-webkit-scrollbar-thumb { background: rgba(192, 192, 192, 0.25); border-radius: 2px; } /* ★★ THE FRAME AND ITS TOGGLE — and their ABSENCE from this file was the entire defect (operator 2026-08-11: "fullscreen charts are still not available in any chart modal in the ui"). `chart.js` has emitted `.modal-chart-frame` and `.modal-chart-full` all along, with the handler, the icon, the Escape release and state that survives a timeframe re-render. modals.css styled NEITHER class — 0 lines each. An unstyled