/* embed.css — the /chart page as a GRID PANE (?embed=1). ============================================================================================ EVERY rule here is prefixed `html[data-embed="1"]`, and that is not cosmetic. The attribute is stamped on PRE-PAINT by the inline script in index.html (a class on from chart.js would land ~1MB of blocking JS later, so every pane would flash its full-height 48px bar once on load), and the prefix gives each rule (1,1,x) specificity — enough to beat plain `#stage` / `#topbar` / `.tb-tools` (0,1,0)-(1,0,0) WHATEVER the source order. That is what lets this whole mode exist as an extra stylesheet with ZERO edits to chart.css: nothing here can be lost to a cascade accident, and a page loaded without ?embed=1 never matches a single selector in it. WHAT IS BORROWED FROM `body.mobile` AND WHAT IS NOT. That block (chart.css ~1104-1330) already solved this exact problem — the topbar's tool cluster has a min-content width of ~870-900px and simply does not fit a narrow viewport — so its LAYOUT half is mirrored here rule for rule: the disclosure panel, the floated .tb-hint, the stacked Indicators dialog, the widened drawers. Its TOUCH half is deliberately NOT copied: 40px targets, hidden tooltips, 16px inputs, --kb keyboard offsets and the bottom sheets all exist because a finger has no hover and iOS zooms a small input. A PANE IS A MOUSE SURFACE. It is small, not touched. Inside an iframe `vw`/`vh` and @media widths resolve against the PANE's viewport, not the window's — which is exactly why the mobile viewport-relative rules can be reused verbatim here. ============================================================================================ */ /* ---- bar + stage geometry ---- 34px instead of 48px. Four panes stacked 2x2 pay this twice down the screen, so the bar is the one piece of chrome worth shrinking; #stage's height is calc()'d off the same number and the two MUST move together (chart.css:290 hardcodes 48). Gap/padding shrink with it: 16px gaps cost 48px of a ~480px bar, which is a whole timeframe chip. */ html[data-embed="1"] #topbar { height: 34px; gap: 8px; padding: 0 8px; } html[data-embed="1"] #stage { height: calc(100% - 34px); } /* ---- identity block ---- .tb-left reserves 140px and never shrinks; in a pane that is a third of the bar. The 24h change is the one part of the block that is decoration rather than identity (the coin and the price are not), so it is what goes below ~560px — before the block can wrap and take the bar with it. */ html[data-embed="1"] .tb-left { min-width: 0; } @media (max-width: 560px) { html[data-embed="1"] #chg24 { display: none; } } /* ---- timeframe strip ---- Seven chips + the identity block do not fit ~480px, and flex items shrink by default — which here means CLIPPED LABELS, not a smaller row. Make the strip the pane's one horizontal scroller instead, exactly as the phone-width block does. `flex-start`, because centred content that overflows makes the LEADING chips unreachable. */ html[data-embed="1"] #tf-row { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; justify-content: flex-start; scrollbar-width: none; } html[data-embed="1"] #tf-row::-webkit-scrollbar { display: none; } html[data-embed="1"] .tf-btn { flex: 0 0 auto; padding: 4px 8px; } /* ---- the header IS the cell's legend row 1 (review2 #21) ---- ~60 of a 389 px cell went to chrome: this header, then the price legend's row 1 (O H L C ±chg) and the "N indicators ▸" row under it. panes-legend.js moves row 1's VALUES into #tb-ohlc here, right after the TF, and shows row 1 itself (▾ + name + buttons) only while the indicator list is unfolded (#ind-chips.lg0-r1-off). The TF row shows ONLY the active timeframe until the header is hovered (or a keyboard focus is inside it): the row keeps its content width instead of growing, the values take the room after it (clipped, never wrapped, while the hovered row opens), and the pane chrome is pushed right by #tool-more's auto margin — so a page without #tb-ohlc still right-aligns it. */ html[data-embed="1"] #tf-row { flex: 0 1 auto; } html[data-embed="1"] #topbar:not(:hover):not(:has(:focus-visible)) .tf-btn:not(.active) { display: none; } html[data-embed="1"] #tool-more { margin-left: auto; } html[data-embed="1"] #tb-ohlc { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--fg); font: 500 11px/16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; } html[data-embed="1"] #tb-ohlc .lg0-vals { gap: 6px; } html[data-embed="1"] #ind-chips.lg0-r1-off > .lg0-ohlc { display: none; } /* A narrow cell (a 2 x 2 at 1440, three across) keeps the close and the change — clipping from the right would cut the change first — and drops O / H / L / V, the phone's rule (panes.css body.mobile). */ @media (max-width: 720px) { html[data-embed="1"] #tb-ohlc .lg0-o, html[data-embed="1"] #tb-ohlc .lg0-h, html[data-embed="1"] #tb-ohlc .lg0-l, html[data-embed="1"] #tb-ohlc .lg0-v { display: none; } } /* ---- the tool cluster becomes a disclosure panel ---- Same mechanism as mobile, same reason (the cluster is off-screen entirely below ~870px), same markup: #tool-more is the trigger (display:none by default at chart.css:174) and .tb-tools is re-anchored under the bar. chart.js's `if (MOBILE || EMBED)` block already wires the trigger, the click-through close and the outside-press dismissal — this file only decides where the panel sits. #topbar is position:relative (chart.css:53), so `top:100%` anchors to the bar. `flex-end` rather than the phone's `space-around`: the panel drops from a trigger pinned to the right, and a mouse travels to where it was clicked, not to a spread row. */ html[data-embed="1"] #tool-more { display: inline-flex; } html[data-embed="1"] .tb-tools { position: absolute; top: 100%; left: 0; right: 0; z-index: 32; /* over .tb-hint (31) and #stage */ display: none; /* .tools-open restores the flex row it already is */ justify-content: flex-end; gap: 4px; padding: 6px 8px; background: var(--panel); border-bottom: 1px solid var(--border); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); } html[data-embed="1"] #topbar.tools-open .tb-tools { display: flex; } /* .tb-hint is a DOM CHILD of .tb-tools, and it reserves a fixed 132px slot (chart.css:180). Left in flow it drops that 132px block INTO the disclosure panel — and worse, it then only appears while the panel is open, so mid-draw guidance ("Click the second point") is invisible exactly when you are drawing. Float it out of the panel, over the chart, as the phone build does. setTool keeps writing textContent + toggling .idle against a still-laid-out element, so no JS changes. */ html[data-embed="1"] .tb-hint { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 0; padding: 3px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); pointer-events: none; z-index: 31; } /* ---- what a pane cannot offer ---- Both of these navigate the whole document with location.href, which inside a pane replaces the pane with a full-page app: Bookmap swaps the series for 5s cells, and #tool-grid would nest a grid inside a grid. The trainer (#tool-game) USED to be in this set — game.js navigated the page into ?game=1 — but it now opens its own named tab (chart.js openGameTab) and never touches the pane, so a pane offers it like any other chart. */ html[data-embed="1"] #tool-bookmap, html[data-embed="1"] #tool-grid { display: none; } /* The vertical drawing rail floats over the chart's left edge and is ~40px of a ~480px pane; every tool on it is reachable from the disclosure panel's keyboard shortcuts and from the rail in the full-size window, so a pane spends its width on candles instead. */ html[data-embed="1"] #toolrail { display: none; } /* The One Box readout is sized for a window; a pane gets the phone's footprint, and its left corners come back to the edge — the 60px that clears the toolrail on a full chart is dead width in a pane that has no toolrail (hidden above). */ html[data-embed="1"] #onebox-panel { max-width: 180px; font-size: 10px; } /* The fired-alert toast (fastalerts.js) sits top-centre, exactly where the floated .tb-hint above lands while a draw tool is armed, so in a pane it starts below the hint; a narrower card suits it. */ html[data-embed="1"] #pa-toasts { top: 36px; } html[data-embed="1"] .pa-toast { min-width: 0; padding: 6px 10px; } html[data-embed="1"] #onebox-panel.pos-bl, html[data-embed="1"] #onebox-panel.pos-tl { left: 8px; } /* ---- pane chrome: the maximize / close buttons gridlink.js injects into #topbar ---- They are ordinary `.tool` buttons (so hover/active/focus come free) but carry a text glyph rather than an SVG, and .tool sizes `svg` only. */ html[data-embed="1"] #pane-max, html[data-embed="1"] #pane-close { font-size: 14px; line-height: 1; } /* ---- drawers + the Indicators dialog ---- #setup-drawer and #snap-drawer are 280px fixed right docks and .ind-modal-box is min(580px, 100vw - 32px) — all three sized for a window, all three oversized in a ~480px pane. Full-bleed the two drawers rather than shrinking them: a 280px dock in a 480px pane leaves a 200px sliver of chart, which is neither a chart nor a drawer. */ html[data-embed="1"] #setup-drawer, html[data-embed="1"] #snap-drawer { left: 0; width: auto; } /* chart.css:722 clears a 280px RIGHT dock the pane no longer has. */ html[data-embed="1"] #stage.drawer-open #inspector { right: 0; } /* …and with the drawer full-bleed it would otherwise COVER the inspector (drawer z12 vs inspector z10), which is how you land on the inspector in the first place — by clicking a row inside the open drawer. The inspector wins; its ✕ reveals the drawer again. */ html[data-embed="1"] #inspector { z-index: 13; } /* The two-pane Indicators dialog has no @media rule of its own, so in a pane the 200px list and the detail pane share ~460px and both become unusable. Stack them — list on top, selected pane beneath, each scrolling on its own — mirroring body.mobile (chart.css:1115-1131). */ html[data-embed="1"] .ind-modal-box { width: calc(100vw - 16px); max-height: calc(100vh - 24px); } html[data-embed="1"] .ind-modal-body { flex-direction: column; max-height: calc(100vh - 92px); /* leaves the header (its own drag handle) always visible */ } html[data-embed="1"] #ind-list { flex: 0 1 auto; max-height: 42vh; /* the list keeps a predictable share; the pane takes the rest */ border-right: none; border-bottom: 1px solid var(--border); } html[data-embed="1"] #ind-detail { flex: 1 1 auto; padding: 10px 12px; } /* The header is the dialog's drag handle. A dialog that already fills the pane can only be dragged out of it, so drop the grab affordance (the JS drag stays harmless — it just has nowhere to go). */ html[data-embed="1"] .ind-modal-head { cursor: default; } /* Tape S/R's pinned card is sized for a window; a pane gets a narrower one (the ✕ and Esc still close it). */ html[data-embed="1"] .tz-card { max-width: 220px; } /* …and its ◈ wall widget packs into that 220px: a smaller % and bar, tighter rows. The chart row's own bar is already the 36px one in a pane (tapezones.js passes `small` under ?embed=1). */ html[data-embed="1"] .tz-hp { padding: 4px 5px; } html[data-embed="1"] .tz-hp-head { gap: 1px 4px; } html[data-embed="1"] .tz-hp-noun { font-size: 10px; letter-spacing: 0; } html[data-embed="1"] .tz-hp-word { font-size: 9.5px; } html[data-embed="1"] .tz-hp-pct { font-size: 13px; } html[data-embed="1"] .tz-hp-bar { height: 8px; margin: 4px 0 3px; } html[data-embed="1"] .tz-hp-q::after { line-height: 8px; font-size: 8px; } html[data-embed="1"] .tz-hp-hit, html[data-embed="1"] .tz-hp-net, html[data-embed="1"] .tz-hp-note, html[data-embed="1"] .tz-hp-cav { font-size: 10px; } html[data-embed="1"] .tz-hp-pips i { width: 7px; height: 4px; } html[data-embed="1"] .tz-fx-f { font-size: 10px; }