/* ClockRadio theme — dark slate + amber (user theme: terminals amber #FFB000 on #0B0F17) */ :root { --bg: #0B0F17; --panel: #121826; --panel-2: #182136; --line: #263046; --text: #d7dee8; --muted: #8b96a8; --amber: #FFB000; --amber-dim: #b57f00; --good: #34d399; --bad: #f87171; --warn: #fbbf24; } * { box-sizing: border-box; } html { font-size: 16px; } /* pin rem — Chrome & Chromium render identically no matter each profile's default-font-size setting (2026-09-09, Mike) */ html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column; overflow: hidden; } /* ── top bar ─────────────────────────────── */ #topbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .3rem .7rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #101624, #0b0f17); flex-shrink: 0; flex-wrap: nowrap; /* ONE line always — never a fatter header (2026-09-09, Mike) */ /* height is FIXED (2026-09-09, Mike: “the pane repositioning is due to fitting the headers and footer above the main content”): the bar's natural height depended on its tallest child, so the fit cascade hiding the brand/links could shorten the bar AFTER boot and shift every pane down/up. A pinned height means nothing above the workspace can ever move it — the cascade may only hide items horizontally. */ height: 2.25rem; min-height: 2.25rem; } .brand { font-size: 1.02rem; white-space: nowrap; } .brand b { color: var(--amber); letter-spacing: .02em; } .tagline { color: var(--muted); font-size: .76rem; margin-left: .45rem; } /* the chips row FILLS the bar, and the profile chip owns every spare pixel of it (Mike 2026-09-13: "the header controls can fill the width — longer user names than 'Mike' will need extra space, so put all spare pixels there"). So a long user name grows into the bar's slack instead of pushing a control into the sacrifice cascade. Safe for the cascade: flex-GROW only ever spends FREE space, and the overflow test in js/app.js `fitTopbar()` (`#topbar` scrollWidth > clientWidth) is driven by SHRINK, which is unchanged — each chip still refuses to shrink past its own content (`min-width: auto`). `#topbar.measuring` pins every chip back to `flex: 0 0 auto !important` during the natural-width read, so the duplicate-Creator-Support measurement still sees true intrinsic widths. */ .chips { display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; } #profile-chip { flex: 1 1 auto; } /* header sacrifice cascade — JS hides the lowest-value items until the topbar fits on one line; nothing is trimmed or wrapped (2026-09-09) */ .fit-hid { display: none !important; } /* content-based hide (2026-09-12) — deliberately a SEPARATE class from .fit-hid: the width cascade strips .fit-hid off every element on each fit, so riding on it would resurrect the element on the next resize. */ .moot { display: none !important; } /* Creator Support link in the topbar (styled like the old inline pill) */ .ko-fi-top { font-variant: small-caps; font-weight: normal; font-size: .78rem; color: #FFB000; text-decoration: none; border: 1px solid #263046; border-radius: 999px; padding: .14rem .6rem; white-space: nowrap; } .ko-fi-top:hover { border-color: #FFB000; } /* dev-only chrome: templates/layouts button + the display-size reference rectangles — production screens never show them (?dev enables) */ .dev-only { display: none; } .canvas-display-references { display: none; } body.dev .dev-only { display: inline-block; } /* the modal's dev block is a layout container, not an inline control */ body.dev .dev-only.lmod-devblock { display: block; } /* the save row is a flex ROW (input + button); inline-block would break it */ body.dev .dev-only.lmod-save-row { display: flex; } body.dev .canvas-display-references { display: block; } /* no speech API (open-source Chromium): the mic button is pointless */ body.no-voice #btn-mic { display: none !important; } .chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: .14rem .6rem; font-size: .76rem; color: var(--text); } .chip-btn { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: .14rem .6rem; font-size: .76rem; cursor: pointer; } .chip-btn:hover { color: var(--amber); border-color: var(--amber-dim); } .chip-btn.on { border-color: var(--amber-dim); color: var(--amber); background: rgba(255, 176, 0, .1); } .range-seg { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; line-height: 1; } .range-seg .range-btn { background: transparent; border: 0; border-right: 1px solid var(--line); color: var(--muted); font-size: .72rem; padding: .1rem .5rem; cursor: pointer; } .range-seg .range-btn:last-child { border-right: 0; } .range-seg .range-btn:hover { color: var(--amber); } .range-seg .range-btn.on { color: var(--amber); background: rgba(255, 176, 0, .12); } #range-chip { padding: .1rem .3rem .1rem .5rem; } /* ── body: tray + workspace ──────────────── */ .app-body { display: flex; flex: 1; overflow: hidden; position: relative; } .pane-tray { width: 168px; min-width: 168px; background: #0d1320; border-right: 1px solid var(--line); padding: .5rem .35rem; overflow-y: auto; flex-shrink: 0; } .pane-tray-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: .15rem .3rem .3rem; } .pane-tray-item { display: flex; align-items: center; gap: .4rem; padding: .26rem .45rem; border-radius: 6px; cursor: pointer; color: var(--text); font-size: .82rem; border: 1px solid transparent; user-select: none; } .pane-tray-item:hover { background: var(--panel-2); } .pane-tray-item.active { background: var(--panel-2); border-color: var(--line); } .pane-tray-item .check { width: 1rem; color: var(--amber); } .workspace { flex: 1; overflow: auto; padding: 3px; } /* uniform 3px frame — GridStack's margin opt is a no-op in this static-column build, so the outer gap IS this padding (09-09: was .5rem/1rem/.55rem/6px → first grid point now sits at (3,3)) */ /* Fixed-cell canvas (2026-09-09, Mike: “the grid should NOT resize with the window, it should just get more columns and/or rows”): width is set in JS to columns × cell (so a wider window ADDS columns at the same cell size), and the min-height keeps the canvas filling the viewport so there is always empty grid below the panes to drop more into. */ .grid-stack { min-height: 100%; } /* ── `?noscroll=1` — NO PAGE SCROLLERS, ON ANY DISPLAY (Mike 2026-09-13) ────── "Create no-scrollbar localhost URLs with 480x800 device targets ... that I can add bannerless panes (from the tray) to while staying within rectangles that subtract out the header and footer." The phone tier gets this automatically (see the small-display media query), but 800x480 and 480x800 are NOT that tier — the gate needs BOTH axes — so they would keep a scrollbar, and an authoring session that can scroll can slide the canvas out from under its own guide. Applied at load by js/app.js urlChromeSwitches() and deliberately NOT remembered: it belongs to the link, not to the browser. The Live pane keeps its own scroller — this is only the page. */ body.noscroll main.workspace { overflow: hidden; } body.tray-hidden .pane-tray { display: none; } /* ── panes (gridstack widgets) ───────────── */ .grid-stack-item { display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; z-index: 1; } .grid-stack-item-content { display: flex; flex-direction: column; height: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .grid-stack-item:hover .grid-stack-item-content { border-color: var(--amber-dim); } /* pane header = pill; default hugs content (markets + live stretch full-width below); 2026-09-09: tighter gaps + 4px slimmer (padding 0 + hit 24) */ .pane-header { display: inline-flex; width: max-content; max-width: calc(100% - .4rem); align-self: flex-start; align-items: center; gap: .28rem; margin: .14rem 0 .06rem .14rem; padding: 0 .5rem; /* The banner is the ONLY grab surface (banner-only movement, 2026-09-12), so it must win the press where the resize zones overlap it. GridStack sets its own handles to z-index 100 (computed, set by the library — not in our CSS), and its NW handle (28x28 at the corner) + N/W strips otherwise cover the pill's leading edge, turning a "grab the banner" press into a resize: the measured symptom was a pane drag that also shrank the pane by the drag delta. 101 keeps the pill above the handles while staying inside this item's own stacking context (the item carries the raise() z-index), so it can never jump above a neighbouring pane. Resizing stays available on the S/E/W edges and the SE/SW corners. */ position: relative; z-index: 101; cursor: grab; user-select: none; flex-shrink: 0; background: linear-gradient(180deg, #1a2233, #141b2c); border: 1px solid var(--line); border-radius: 999px; } /* banner-hosted controls (2026-09-09): news scope select + watchlist symbol box — styled to sit inside the slim pill without bloating it */ .pane-header select, .pane-header input[type="text"], .pane-header input[type="number"], .pane-header input[type="date"] { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-size: .72rem; padding: .06rem .3rem; height: 22px; } .pane-header .scope-sel { max-width: 8.6em; } /* News scope — 'Regional' must show fully (2026-09-09) */ .pane-header .wl-sym { width: 7.2em; } /* markets + Live + Watchlist/Portfolio/Links: pill spans the pane like the tile borders, controls right (Watchlist/Portfolio/Links joined 2026-09-09) */ #pane-markets-us .pane-header, #pane-markets-global .pane-header, #pane-live .pane-header, #pane-watchlist .pane-header, #pane-favorites .pane-header, #pane-links .pane-header { width: calc(100% - .14rem); max-width: calc(100% - .14rem); } #pane-markets-us .pane-header .pane-actions, #pane-markets-global .pane-header .pane-actions { margin-left: auto; } /* Portfolio add-row and Links '+ new group' ride right, tight against the window controls (their pills are full width); 2026-09-09, Mike */ #pane-favorites .pane-header .pane-actions, #pane-links .pane-header .pane-actions { margin-left: 0; } #pane-favorites .pane-header .ctl-row { margin: 0 0 0 auto; flex-wrap: nowrap; } #pane-links .pane-header .cr-add { margin-left: auto; } #pane-watchlist .pane-header .wl-sym { margin-left: auto; } /* symbol box rides with the window buttons, right side */ #pane-live .pane-header .act-n-wrap { margin-left: auto; } .pane-header:active { cursor: grabbing; } .pane-label { font-size: .78rem; font-weight: 600; color: var(--amber); letter-spacing: .02em; flex-shrink: 0; } .pane-note { flex: 0 1 auto; min-width: 0; text-align: center; font-size: .64rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; margin: 0 .1rem; } .pane-note:empty { display: none; } .pane-actions { display: flex; gap: .05rem; align-items: center; flex-shrink: 0; } .pane-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: .72rem; line-height: 1; padding: .1rem .26rem; border-radius: 999px; } .pane-btn:hover { color: var(--amber); background: rgba(255, 176, 0, .12); } .pane-btn.danger:hover { color: #f85149; background: rgba(248, 81, 73, .12); } .pane-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: .38rem .55rem .5rem; position: relative; } .pane-empty { color: var(--muted); font-size: .82rem; padding: .4rem 0; } .pane-err { color: var(--bad); font-size: .78rem; padding: .3rem 0; } /* moon + clocks: content is fit to the pane — NEVER scrollbars (2026-09-09: hard invariant for these panes — oversized content clips, it does not scroll) */ #pane-moon .pane-body, #pane-clock-analog .pane-body, #pane-clock-digital .pane-body { overflow: hidden !important; scrollbar-width: none; -ms-overflow-style: none; } #pane-moon .pane-body::-webkit-scrollbar, #pane-clock-analog .pane-body::-webkit-scrollbar, #pane-clock-digital .pane-body::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Moon image runs to the pane's LEFT edge; the facts text below keeps its own inset (2026-09-09, Mike) */ #pane-moon .pane-body { padding-left: 0; } #pane-moon .moon-facts { padding-left: .55rem; } /* analog clock: face anchored top-left (no left border), grows with the pane */ #pane-clock-analog .pane-body { display: flex; flex-direction: column; padding: .3rem 0 0; } #pane-clock-analog .ctl-row { padding: 0 0 0 8px; margin: 0 0 .1rem; } /* sec/zoom ~8px in (2026-09-09: +2 from 6) */ #pane-clock-analog .pane-fill { flex: 1 1 auto; min-height: 0; justify-content: flex-start; margin-top: -2px; } #pane-clock-analog .ana-slot { flex: 1 1 auto; min-height: 0; } /* Pane bodies do NOT move panes any more (banner-only movement, 2026-09-12), so a pane body must not advertise a grab. The 2026-09-06 body-drag rule (`.pane-body, .pane-body * { cursor: grab }`) was NOT removed along with the behaviour it described, so it went on painting a hand over every pane body — a move affordance for a gesture that no longer exists. Mike caught it on 🗺 Metros (2026-09-12): the hand is indistinguishable from the map's own pan cursor, so the pane looked like it was claiming the gesture. Panes that legitimately own a pointer gesture set their OWN cursor — `.pane-header` for the move grab, `.mz-svg` for the map. */ .pane-body { cursor: default; } .pane-body :is(a, button, .fold-bar) { cursor: pointer; } /* ── pane internals ──────────────────────── */ .ctl-row { display: flex; gap: .4rem; align-items: center; margin-bottom: .3rem; flex-wrap: wrap; } .ctl-row select, .ctl-row button, .pane-body select { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: .14rem .4rem; font-size: .78rem; } .ctl-row button { cursor: pointer; } .ctl-row button.on { border-color: var(--amber-dim); color: var(--amber); } /* ── CLOCK SIZE: REVERTED TO MIKE'S ORIGINAL (2026-09-13) ──────────────────── An earlier pass today made these pane-relative (`21cqw`) to stop a pinned canvas clipping the clock. Mike: "You changed the digital clock and main temperature font sizes, go back, please." Reverted to the original viewport clamps. The pane-relative form is not lost knowledge — if the clock ever has to fit a slot too narrow for it, CAP it instead of shrinking it: .digital-clock { font-size: min(clamp(1.6rem, 6vw, 3.4rem), 21cqw); } which is the old size everywhere it fit and shrinks only where it would clip. NO cqw IS LEFT IN THIS FILE — the same pass also shrank `.date-line` to `clamp(.62rem, 4.3cqw, 1.5rem)` behind a `#pane-date .pane-body` container; both are reverted with it, so the container-type declaration went too. */ .digital-clock { font-variant-numeric: tabular-nums; font-size: clamp(1.6rem, 6vw, 3.4rem); letter-spacing: .04em; text-align: left; line-height: 1.1; color: var(--amber); } .digital-sec { color: var(--muted); font-size: .6em; } .pane-fill { display: flex; flex-direction: column; justify-content: center; } /* clock face mode: both — analog + digital side by side */ .ana-slot, .digi-slot { width: 100%; } .pane-fill.clock-both { flex-direction: row; align-items: center; justify-content: space-evenly; gap: .8rem; flex-wrap: wrap; } .pane-fill.clock-both .ana-slot { width: 46%; min-width: 110px; } .pane-fill.clock-both .digi-slot { width: auto; flex: 1; min-width: 150px; text-align: center; } .pane-fill.clock-both .digital-clock { font-size: clamp(1.4rem, 3.4vw, 2.6rem); } .date-line { font-size: clamp(1rem, 2.6vw, 1.5rem); color: var(--text); text-align: center; } .date-sub { color: var(--muted); font-size: .85rem; text-align: center; margin-top: .3rem; } /* ── weather pane — today-only summary ───────────────────── */ /* header row: big temp on the left, then a STACKED pair on its right — "feels 76°" over the condition word (2026-09-13, Mike). align-items:center (not baseline) so the two-line column is centred against the temp box and the row height stays the temp's. ⚠️ SIZE + WEIGHT ARE MIKE'S (2026-09-13: "You changed the digital clock and main temperature font sizes, go back, please. Also remove bold on both, if present."). `.wx-t` is back to its original 2rem and is explicitly NOT bold — the original carried `font-weight: 700`; `normal` is stated rather than omitted so no ancestor can re-bold it. `align-items: center` (not baseline) means the temp box no longer has to cover the pair's height, so the 2.4rem that was raised for that reason is gone. NO flex-wrap: the pair must stay to the RIGHT of the temp at every width, so the column shrinks (min-width:0) and a long condition word wraps inside itself instead of the whole pair dropping below the temp. */ .wx-now { display: flex; align-items: center; gap: .5rem; } .wx-t { font-size: 2rem; font-weight: normal; color: var(--amber); font-variant-numeric: tabular-nums; line-height: 1.05; } .wx-side { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; min-width: 0; } /* the two lines are ONE visual block, so they get explicit tight leading (Mike 2026-09-13: "I'd prefer we removed ~2px of leading between feels like and Clear"). Measured ink-to-ink from real pixels: the gap was 9.75px at the inherited line-height (~1.45 — 18.56px box around 9.75px of glyph for a 12.8px font, i.e. ~4.4px of leading above AND below each line). line-height 1.3 shrinks each box by ~1.95px, i.e. ~1px off each side of the shared edge, for a ~2px tighter gap. Do NOT set a negative gap instead — that would overlap the boxes rather than remove the leading. */ .wx-feels { font-size: .8rem; line-height: 1.3; color: var(--muted); white-space: nowrap; } .wx-c { font-size: .82rem; line-height: 1.3; color: var(--muted); } .wx-feels b { color: #4d80c3; font-weight: 600; font-variant-numeric: tabular-nums; } .wx-line { font-size: .8rem; color: var(--muted); line-height: 1.35; } .wx-line b { color: #4d80c3; font-weight: 600; font-variant-numeric: tabular-nums; } /* Hi/Lo/feels/% values — dim blue, same as Live genre + Moon dates (2026-09-09, Mike) */ .wx-sep { color: #3a455c; margin: 0 .25rem; } .moon-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex-wrap: nowrap; } /* figure on top, facts ALWAYS underneath; 3px air between figure and text (Mike 2026-09-09) */ /* ⚠️ NO PIXEL FLOOR ON THE FIGURE (Mike 2026-09-13: "Nothing left clipped"). This was `clamp(110px, 62%, 300px)`, and 110px is a floor the pane cannot always honor: in the landscape cut's moon pane (101px wide) the figure alone was the overflow — measured `.moon-wrap` 91.9 wide needing 110, i.e. exactly the 9px of horizontal clip, plus 110px of height from `aspect-ratio: 1` on a square figure (the card wanted 243px in a 192px pane). `min()` keeps the same size wherever 62% is the winner (any pane ≥178px wide is untouched — the floor never bound there) and lets the disk shrink instead of being cut off in a narrow pane. */ .moon-fig { width: min(62%, 300px); aspect-ratio: 1; flex-shrink: 0; } .moon-fig img.nasa-moon { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #000; display: block; } .moon-facts { flex: 0 0 auto; width: 100%; min-width: 0; line-height: 1.2; } .moon-facts .big { font-size: 1.4rem; line-height: 1.2; color: var(--amber); } .moon-facts .row { font-size: .8rem; line-height: 1.15; color: var(--muted); margin-top: .06rem; } .moon-facts .row b { color: var(--muted); font-weight: 600; } /* phase dimmed to the facts tier (2026-09-09, Mike) */ .moon-facts .row b.moon-date { color: #4d80c3; } /* next full/new dates — dim blue, same as Live genre (2026-09-09, Mike) */ .live-wrap { display: flex; flex-direction: column; gap: .35rem; } .live-group-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: .12rem; } .live-grid { display: flex; flex-wrap: wrap; gap: .3rem; } .live-stack { display: flex; flex-direction: column; gap: .18rem; } .live-station { display: flex; align-items: center; gap: .3rem; } .live-btn .lv-call { color: var(--amber); } /* call + frequency — News title amber (2026-09-09) */ .live-btn .lv-desc { color: #4d80c3; } /* format/network — dimmed steel blue, matches .news-src (2026-09-09) */ .live-btn { font-size: .78rem; color: var(--text); background: #131a26; border: 1px solid #263046; border-radius: 6px; padding: .16rem .5rem; text-decoration: none; white-space: nowrap; } .live-btn:hover { border-color: var(--amber); color: var(--amber); } .live-btn.on { border-color: var(--amber); color: var(--amber); } .live-play { width: 2rem; text-align: center; padding: .16rem .15rem; flex-shrink: 0; color: #3fb950; } /* play arrows green, not muted white (2026-09-09, Mike) */ /* Links: names in the same dim cyan as the rest of the app (2026-09-09) */ #pane-links .live-btn { color: #4d80c3; } #pane-links .live-btn:hover { color: var(--amber); } .live-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; } .live-status { font-size: .7rem; color: var(--muted); margin-bottom: .15rem; min-height: 1em; } .live-status:empty { display: none; margin: 0; } .vol-row { display: flex; align-items: center; gap: .4rem; margin: 0 0 .18rem; font-size: .72rem; color: var(--muted); } /* volume slider: EW/PW/SM-style thumb — amber disc with a white ring (2026-09-09) */ .vol-row input[type="range"] { flex: 1; min-width: 0; /* ⚠️ `min-width: auto` floors a range input at its ~129px intrinsic width, so a narrow Live pane (194px in Mike's portrait cut) could not fit [Frequency][vol][slider]: the row needed 239px and the slider's tail was clipped. With min-width 0 the track simply gets shorter (2026-09-13). */ -webkit-appearance: none; appearance: none; background: transparent; height: 20px; margin: 0; cursor: pointer; } .vol-row input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #334155; border-radius: 3px; } .vol-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--amber); border-radius: 50%; border: 2px solid #4d80c3; margin-top: -5px; /* ring — dim cyan (2026-09-09, Mike) */ box-shadow: 0 0 4px rgba(0, 0, 0, .5); } .vol-row input[type="range"]::-moz-range-track { height: 4px; background: #334155; border-radius: 3px; } .vol-row input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: var(--amber); border-radius: 50%; border: 2px solid #4d80c3; box-shadow: 0 0 4px rgba(0, 0, 0, .5); } /* ── finance pane ─────────────────────────────────────────── */ #pane-finance .pane-body { padding-top: .16rem; } /* tighten banner → first fold gap */ #pane-finance .live-scroll > :first-child .fold-bar { margin-top: 0; } /* ~2px tighter: banner → 'Indices · US' */ .up { color: #3fb950; } .down { color: #f85149; } .flat { color: var(--muted); } .fin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; margin-bottom: .2rem; } .fin-tile { background: #131a26; border: 1px solid #263046; border-radius: 6px; padding: .3rem .45rem .24rem; display: flex; flex-direction: column; min-width: 0; } .fin-tile-head { display: flex; align-items: center; justify-content: space-between; gap: .3rem; } .fin-name { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fin-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .85rem; line-height: 1; padding: 0 .1rem; opacity: 0; transition: opacity .12s; } .fin-tile:hover .fin-del, .fin-del:focus-visible { opacity: 1; } .fin-del:hover { color: #f85149; } .fin-add { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: .8rem; line-height: 1; padding: .02rem .3rem; border-radius: 999px; opacity: 1; transition: opacity .12s; } .fold-bar:hover .fin-add, .fin-add:focus-visible { opacity: 1; } .fin-add:hover { color: var(--amber); } .fin-price { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: .06rem; } .fin-chg { font-size: .72rem; font-variant-numeric: tabular-nums; } .fin-spark { width: 100%; height: 24px; display: block; margin-top: .2rem; } .fin-spark-empty { height: 24px; } .fin-sym { font-size: .6rem; color: var(--muted); margin-top: .05rem; } .fin-actives { display: flex; flex-direction: column; margin-bottom: .2rem; } .fin-row { display: grid; grid-template-columns: 54px 1fr 70px 70px 76px; gap: .4rem; font-size: .78rem; padding: .12rem 0; border-bottom: 1px dashed #1c2333; align-items: baseline; } #pane-actives .fin-row { padding: 0; } /* Most Active: no padding above entries (2026-09-09, Mike) */ #pane-actives .pane-body { padding-top: .25rem; } /* banner → first entry ~2px tighter (2026-09-09, Mike) */ .fin-a-sym { color: var(--amber); font-weight: 600; } .fin-a-name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fin-a-price { text-align: right; font-variant-numeric: tabular-nums; color: #4d80c3; } /* share prices — dim cyan (2026-09-09, Mike) */ .fin-a-chg { text-align: right; font-variant-numeric: tabular-nums; } .fin-a-vol { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } /* ── foldable finance sections ───────────────────────────── */ .fold-bar { display: flex; align-items: center; gap: .3rem; cursor: pointer; user-select: none; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: .14rem 0 .1rem; margin-top: .14rem; border-bottom: 1px dashed #1c2333; } .fold-bar:hover { color: var(--amber); } .fold-caret { width: .8rem; color: var(--amber); flex-shrink: 0; } /* community harvest sections (Live + Links panes) */ .cm-hdr { border-top: 1px dashed #1c2333; margin-top: .3rem; padding-top: .22rem; } .cm-title { color: var(--amber); font-weight: 600; } .cm-cat { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: #55617a; margin: .3rem 0 .05rem; } /* Top-N count control lives in the banner pill (Most Active) */ .act-n-wrap { display: inline-flex; align-items: center; gap: .18rem; color: var(--muted); font-size: .64rem; margin-left: .15rem; } .act-n { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; font-size: .64rem; padding: .05rem .18rem; cursor: pointer; } .fin-input { background: #0d1320; border: 1px solid #263046; color: var(--text); border-radius: 6px; padding: .14rem .45rem; font-size: .78rem; width: 9rem; } .fin-input::placeholder { color: #55617a; } /* ── My Stocks pane — positions table + watchlist ────────── */ .pos-wrap { min-width: 560px; } .pos-grid { display: grid; grid-template-columns: 52px minmax(0, 1fr) 56px 52px 96px 68px 104px 18px; gap: .35rem; align-items: center; font-size: .74rem; } .pos-head { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .1rem 0; border-bottom: 1px dashed #1c2333; } .pos-row { padding: .12rem 0; border-bottom: 1px dashed #1c2333; } .pos-sym { color: var(--amber); font-weight: 600; font-size: .78rem; font-variant-numeric: tabular-nums; } /* same symbol size as Most Active (2026-09-09, Mike) */ .pos-name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .7rem; } .pos-price, .pos-val, .pos-pl { text-align: right; font-variant-numeric: tabular-nums; } .pos-val { color: #4d80c3; } /* position value — dim cyan (2026-09-09, Mike) */ .pos-pl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pos-sh-cell input, .pos-d-cell input { width: 100%; min-width: 0; } .fin-sh { width: 4.8rem; } .fin-d { width: 8.6rem; } .pos-sym-in { width: 6.6rem; } .ctl-row .fin-sh, .ctl-row .fin-d, .pane-body .fin-sh, .pane-body .fin-d { background: var(--panel-2); color: #4d80c3; border: 1px solid var(--line); /* shares + bought-date text — dim cyan (2026-09-09, Mike) */ border-radius: 6px; padding: .14rem .4rem; font-size: .78rem; } input[type="date"] { color-scheme: dark; } .pos-total { display: flex; justify-content: flex-end; gap: 1.1rem; font-size: .74rem; padding: .3rem 0 .05rem; border-top: 1px solid var(--line); color: var(--muted); font-variant-numeric: tabular-nums; } /* portfolio history chart — full width of the positions list feeding it */ .perf-cap { display: flex; justify-content: flex-end; gap: 1.1rem; font-size: .74rem; padding: .25rem 0 .1rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* the portfolio VALUE figure in the chart caption — dim cyan, same as the Positions value column (.pos-val): never red/green, the P/L span carries that (2026-09-09, Mike) */ .perf-val { color: #4d80c3; } .perf-svg { display: block; width: 100%; min-width: 560px; height: 132px; } .perf-line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; } .perf-line-cost { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .85; } .perf-line-value { stroke: var(--amber); } .perf-grid { stroke: #2b3550; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .8; } .perf-axis { position: relative; width: 100%; height: 1.2em; font-size: .68rem; color: var(--muted); padding-top: .12rem; font-variant-numeric: tabular-nums; } /* Line box must fit INSIDE the axis box: the default line-height (~1.45) overflows the 1.2em-high axis by ~2.7px, and .pf-pin's overflow:hidden clipped the bottom of the date labels exactly where the Positions bar starts (2026-09-09, Mike). Tighter leading = labels fully visible with no layout shift anywhere else. */ .perf-axis span { position: absolute; top: 0; white-space: nowrap; line-height: 1.15; } .news-chips { display: flex; gap: .35rem; flex-wrap: wrap; } .news-chips button { font-size: .74rem; padding: .12rem .5rem; } .news-list { list-style: none; margin: .3rem 0 0; padding: 0; } .news-list li { padding: .2rem 0; border-bottom: 1px dashed var(--line); } /* ~1px less each side ≈ 2px tighter between entries (2026-09-09) */ .news-list li:last-child { border-bottom: none; } .news-list a { color: var(--amber); text-decoration: none; font-size: .84rem; line-height: 1.3; display: block; } .news-list a:hover { color: var(--amber); text-decoration: underline; } .news-src { color: #4d80c3; font-size: .72rem; } /* original source — dimmed steel blue, matches .lv-desc in Live */ .news-meta { color: var(--muted); font-size: .72rem; margin-top: .15rem; } /* News: tighter banner → first-item gap (2026-09-09, Mike) */ #pane-news .pane-body { padding-top: .18rem; } #pane-news .news-list { margin-top: 0; } /* ── footer ──────────────────────────────── */ #foot { flex-shrink: 0; border-top: 1px solid var(--line); padding: .14rem .7rem; color: var(--muted); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3rem; /* pinned too — the bottom edge of the content area is as fixed as the top */ } /* footer dev toggle (2026-09-10, Mike) — the switch for dev chrome: ON shows the display-size reference rectangles on the canvas PLUS the device-resolution selection; OFF is plain production. Two states only, the chip is amber while on (.chip-btn.on). */ #foot { display: flex; align-items: center; gap: .6rem; } #foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .foot-dev { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; } .foot-dev .chip-btn { font-size: .68rem; padding: .1rem .55rem; } .dev-select { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; font-size: .68rem; padding: .1rem .4rem; max-width: 13rem; } .dev-select:hover { color: var(--amber); border-color: var(--amber-dim); } /* ── responsive: small screens stack the tray ── */ @media (max-width: 720px) { .app-body { flex-direction: column; } .pane-tray { width: 100%; min-width: 0; max-height: 130px; border-right: none; border-bottom: 1px solid var(--line); } .pane-tray-items { display: flex; flex-wrap: wrap; } #tray-items { display: flex; flex-wrap: wrap; } .tagline { display: none; } } /* ── on a genuinely SMALL DISPLAY the Panes bar is not offered AT ALL ─────── Mike 2026-09-13: "in these small displays, the user won't get that at all." Below 720px wide the tray stops being a sidebar and stacks, so it starts costing VERTICAL space instead of horizontal — and on the 320x480 phone tier that is 130px of a 480px screen: 27% of the display, measured (`F:/tmp/cr_mike2/chrome320.js`: canvas 282.1px with it, 412.1px without). Height is what makes it fatal, so the gate needs BOTH axes: a 700x780 window — one Mike actually tests in — keeps its Panes bar, because the tray is affordable there; a 320x480 or 480x320 display does not. The toggle goes with the panel: a control that cannot do anything is a lie. The arrangement is already open and complete on such a display, so nothing is lost — panes come back from the saved layout, not from the tray. */ @media (max-width: 720px) and (max-height: 600px) { /* ── NO PAGE SCROLLBARS ON A REAL DEVICE (Mike 2026-09-13) ──────────────── "On a real device we're not going to provide/enable page scroll bars, only the Live pane will have a vert scroller." The canvas IS the display, so on the display there is nothing legitimate to scroll to: what does not fit is CLIPPED. A layout that overflows is a design error the band guides exist to prevent, not something the user should have to pan around for. The Live pane keeps its own vertical scroller (`.live-scroll`) — that one is INSIDE the pane and untouched here. DEV KEEPS THE SCROLL, deliberately: the authoring view must be able to reach a device box taller/wider than the window (a 1:1 phone pin in a small window) and to reach whatever a pane bleed pushed past the edge. Authoring pans; the product does not. SCOPE: the phone tier only. `800x480`/`480x800` are the FULL chrome tier (the small gate needs BOTH ≤720 wide and ≤600 tall), so they still scroll if a layout overflows — that is a tier decision for Mike, not an oversight. */ body:not(.dev) main.workspace { overflow: hidden; } .pane-tray { display: none; } #btn-tray { display: none; } /* ── exactly TWO controls survive in the top bar: the user name and the location. Mike 2026-09-13: "at 320 width, there are only two controls: user name and location." Everything else here is chrome a finished small-display dashboard has no use for. This is STATED, not left to the sacrifice cascade: `#profile-chip` sits 4th in FIT_ORDER, so the cascade would eat the user name itself once the bar got tight, and `#loc-chip` is not in FIT_ORDER at all (it survives by accident, not by design). Both are pinned visible; the rest are pinned away. */ #topbar .brand, #topbar .tagline, #btn-mic, #btn-layouts, #range-chip, .ko-fi-top { display: none !important; } /* PINNED VISIBLE — this was documented but never written, so both chips were surviving on luck (the bar happened to be empty enough that the sacrifice cascade never fired). With `#btn-min` back in play below, luck is no longer enough: the cascade would reach `#profile-chip` (4th) long before it reaches the minimal button (last) and eat the user's NAME. */ #topbar #profile-chip, #topbar #loc-chip { display: inline-flex !important; } /* `#btn-min` is deliberately NOT in the list above. It is the control whose whole job is this screen ("no banner, no pane controls"), and pinning it away made minimal mode unreachable on the displays it was designed for — the exact symptom Mike hit 2026-09-13 ("I lost the button that removes pane banners and within-pane controls"). Left to the normal machinery instead: · `.moot` hides it when the dashboard holds panes outside the small set · the sacrifice cascade hides it ONLY when the row is genuinely too tight (it is last in FIT_ORDER), which is what keeps 320-wide down to two */ /* IN PRODUCTION it is also `.moot` on the small tier, and that is the point (Mike 2026-09-13): "you're showing the layout with pane banners and internal controls. Not something we'd ever ship." Minimal chrome is FORCED on a small display in production (js/app.js `refreshMinimal`: `small && !DEV`), so a toggle for it would be a control with nothing to toggle — the bar is back to exactly the two controls (name, location) this display ships with. DEV mode (footer switch / ?dev) keeps the button, because the banner is the only DRAG surface: a 320x480 cut is arranged in dev mode and ships bannerless. */ #topbar #btn-min.moot { display: none !important; } /* and the footer keeps no buttons — "we wouldn't show ... any of the buttons in the footer" (Mike 2026-09-13). The attribution line stays; only controls go. This also covers the dev-only footer controls: there is no room for a dev switch on a phone canvas, and the ?dev URL still crosses over. HIDE THE GROUPS, NOT THEIR CHILDREN (Mike 2026-09-13: "Also no need for undo in this mode"). The old rule hid `#foot .chip-btn` and left the undo badge behind — `#undo-depth` is a plain span (js/app.js paintUndo writes `1/30` into it), so a shipped 320x480 screenshot showed a stranded "1/30" in the footer with no button to explain it. Every one of these groups is meaningless without its button/slider, so the group is the unit that goes. */ #foot .foot-dev, #foot .foot-undo, #foot .foot-savelayout, #foot .chip-btn, #foot .dev-select { display: none !important; } } /* ── PANE BEHAVIOUR FOLLOWS THE CANVAS, NOT THE WINDOW (2026-09-13) ────────── These rules are about a PANE being narrow, and a pane's width comes from the CANVAS. Keyed to the window they were silently wrong the moment the two differ — which is exactly the dev workflow for a small-display cut: a 320x480 device pinned inside a 1500x950 window. There the media query did NOT fire, so Live kept `overflow: auto` + `white-space: nowrap` and the pinned preview showed a horizontal scrollbar with 272px of station rows in a 194px pane: the very defect this block fixed for a real small window, still present in every preview of it. A small window has a small canvas (the canvas is the window minus its chrome), so these fire identically there — nothing is lost by moving them here. `container: canvas / inline-size` is safe on the grid: GridStack already makes `.grid-stack` `position: relative`, so layout containment cannot move the items' containing block, and the width is set by JS, never derived from the children. */ .grid-stack { container: canvas / inline-size; } @container canvas (max-width: 720px) { /* Live: no horizontal scrollbar (Mike 2026-09-13: "In these minimal displays, we can forego the horizontal scrollbar in Live"). `.live-scroll` is `overflow: auto` and `.live-btn` is `white-space: nowrap`, so a narrow pane grows a horizontal scrollbar — measured **78px** of overflow in the 194px-wide portrait Live (content 272px). The ▶ play and ✕ delete are separate flex items and keep their space; the link shrinks and ellipsizes its tail instead, so no control becomes unreachable and only the tail of a long station name is clipped (the full name and URL are still in the link's title and href). */ .live-scroll { overflow-x: hidden; } .live-station { min-width: 0; } /* BOTH scrollers: the radio rows AND the TV/links chip grid. The chip grid was the actual culprit (240px in a 194px box): it is `flex-wrap: wrap`, but a single chip is `white-space: nowrap`, so one long station/link name still pushed the row past the pane. The ✕ delete rides the chip as a SIBLING of the anchor (.cr-inline), so ellipsizing the anchor cannot hide it. */ .live-station > a.live-btn, .live-grid .live-btn { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* ⚠️ the TV/links chips are NOT direct children of .live-grid — each is wrapped in `` (linkChip(), panes/live.js), so a `> a.live-btn` selector silently matches nothing and the overflow stays. The wrapper needs the cap too. */ .live-grid > .cr-inline { min-width: 0; max-width: 100%; } } /* ── the TOP Creator Support link goes when the header is under real pressure (2026-09-12, Mike: "On small displays, the top Creator Support link can go (we still have the bottom one)"). The footer carries the same link (clockradio.html), so nothing is lost — this stops the topbar spending its scarcest resource on a duplicate. BREAKPOINT IS MEASURED, NOT INHERITED. First attempt used 1331px (the canvas-fit "small display" line) and Mike pushed back: "1332px sounds large. If you just have had the site controls left after squeezing out ClockRadio and the image line, it looks a lot less than that." He was right — measured intrinsic widths (Playwright, viewport 2600, nothing hidden): bar padding+border 22.40px brand block (+tagline) 256.72px (tagline alone 142.86px) bar gap 9.60px chips gap 5.60px chips (site controls) 644.63px -> profile 67.5, loc 207.8, layouts 33.4, panes 70.0, range 111.0, ko-fi 127.0 FULL ROW 933.35px controls only 667.03px controls minus ko-fi 540.03px So the row has no pressure at all above ~934px; at 1331 the link was being dropped with 366px of slack to spare — and the width cascade below never fired at ANY width >=720 (nothing was ever .fit-hid). 933 = the point where the complete row stops fitting, i.e. where giving something up is actually required rather than premature. Two further measurements, so the constant is bracketed rather than lucky: the loc chip is a FIXED width (.loc-sel max-width 9.5em + ellipsis, so the chosen city never changes the row — verified Home / Phoenix / longest label all 933.34), but the city FILTER grows 4.2em -> 7em on focus (css 1568), making the row 967.39px while it has the caret. Nothing is hidden in that band and nothing overflows: #topbar is flex and `.chips` can shrink, so the row COMPRESSES instead of overflowing — that is also why the cascade is almost never seen above ~700px and this media query is the only thing hiding the link in 700-1332px. 933 is the idle fit line; 967.39 is the focused-filter worst case (raise the query to 967 if the duplicate should yield first even while the caret is in the city box). ── WHERE THE DUPLICATE LINK YIELDS IS NOW MEASURED AT RUNTIME (2026-09-13) ── History first, because the numbers still explain the size of the saving. The range chip is content-hidden (`.moot`, js/app.js rangeMoot) whenever no Indices / Watchlist / Portfolio pane is open, and re-measured 2026-09-13 at viewport 2600 it costs **116.60px of the row** (111.00 chip + its 5.60px chips-gap): the row is 933.35px with the picker and 816.75px without it (22.40 pad + 256.72 brand + 9.60 gap + chips 644.63 / 528.03). That was encoded as two constants: <=933px with the picker, <=816px without. THE CONSTANTS WERE THE WRONG SHAPE and went stale the same day. `#btn-min` (minimal mode, below) is a third CONTENT-dependent item, and it lengthens the quote-less row by ~96px — so the static rule was hiding the link with ~96px of slack to spare, which is precisely the complaint Mike raised about the inherited 1331. There is no fixed list of states to enumerate here, so the line is no longer a constant: `js/app.js applyKofiLine()` measures the row's NATURAL width (`#topbar.measuring`, one synchronous read with compression off) and toggles `body.kofi-yield` whenever the row's contents change or the window resizes. The 816px rule below stays as the no-JS floor — the narrowest full row this chrome can have — so without JS the bar still sheds the duplicate rather than letting it sit in a row that cannot hold it. Below its own line, further pressure is still FIT_ORDER (tagline next); and because the row COMPRESSES rather than overflows, a few px of font-metric drift costs at most a few px of slack either way. ── */ body.kofi-yield .ko-fi-top { display: none; } @media (max-width: 816px) { .ko-fi-top { display: none; } } /* the natural-width probe: `flex: 0 0 auto` stops the .chips compression that would otherwise make a measured child report less than its content, and the link is forced shown so the row is measured WITH it (measuring a row that already excludes the link reports a row that fits — self-confirming). Added and removed inside one synchronous block, so nothing paints with it applied. */ #topbar.measuring, #topbar.measuring .chips, #topbar.measuring .chips > * { flex: 0 0 auto !important; } #topbar.measuring .ko-fi-top { display: inline-block !important; } /* ── MINIMAL mode (2026-09-13, Mike) ───────────────────────────────────────── "the smallest possible top bar ... leaving JUST user, location, and a button that can remove the panes button, pane banners, and controls within (except Live's controls) when the layout contains no more than {analog, digital, moon, weather, Live}". Engaged by `body.minimal`, set in js/app.js `refreshMinimal()` ONLY while every open pane is one of those five (so a dashboard with a Markets pane in it never gets banner-stripped), and only when the per-browser preference is on. Content-based hiding is always its own class — see the `.moot` note above. The bar: brand → gone, so the ◷ mark and the word ClockRadio (and the tagline) are what "exclude {'ClockRadio', image-id}" means. Mic/layouts/ Panes/range/Creator Support also go, leaving profile + location + #btn-min. !important because two of these get display values from other rules (`body.no-voice #btn-mic`, the ko-fi media query above, `#btn-tray.on`). ⚠️ DEV KEEPS THE TRAY IN MINIMAL (Mike 2026-09-13): "I'd like to stick with the current no banners, no internal controls digital/analog panes for the next couple of layouts, but I'll need the tray, so I can see what combos of panes I can get to fit." Bannerless is how a small display SHIPS, so authoring in it is the only way to judge a fit — and with the tray gone the author cannot add or remove a pane to test a combination. Both production rules below are therefore scoped `:not(.dev)`; the shipped view still drops the tray and its toggle. */ body.minimal .brand { display: none; } body.minimal #btn-mic, body.minimal #btn-layouts, body.minimal #range-chip, body.minimal .ko-fi-top { display: none !important; } body.minimal:not(.dev) #btn-tray { display: none !important; } /* the Panes bar itself — same rule the tray toggle uses, so the workspace widens by the tray's 186px and the canvas simply gains COLUMNS (cell size is fixed; no pane moves or rescales) */ body.minimal:not(.dev) .pane-tray { display: none; } /* banners: label + note + ▁ ✕ pill. `.grid-stack-item` is a flex column of header + body, so the body takes the whole box and the pane's content shifts up into the reclaimed strip. The pane BOX is untouched — the user's size and placement are never auto-changed. (The 2026-09-13 trade — "these panes can still be RESIZED but not dragged until minimal mode is exited" — is gone: in this mode the pane's CONTENT is the grab surface, so a bannerless pane is still arrangeable. See `.pane-body { cursor: grab }` below.) */ body.minimal .pane-header { display: none; } /* controls INSIDE the panes. Live is the exception (Mike): its volume + station-order line is `.vol-row`, which is NOT in this list and stays. */ body.minimal .ctl-row { display: none; } /* keep the pin ✕/▁ row out of the way if a pane re-adds one in its body */ body.minimal .pane-actions { display: none; } /* ── the footer's UNDO control goes in this mode (Mike 2026-09-13: "Also no need for undo in this mode"). Undo exists to take back an ARRANGEMENT mistake, and minimal chrome is the finished-arrangement view — the same reasoning that drops the Panes bar. Scoped to the MODE, not the small tier, so it holds at desktop size too (a small display already loses the whole group, css 493). `.foot-undo` is hidden as a UNIT because the depth badge is a plain span: hiding the button alone leaves "1/30" stranded, which is exactly what Mike saw. */ body.minimal .foot-undo { display: none !important; } /* ── ALWAYS SOMETHING TO DRAG (2026-09-13, Mike) ────────────────────────────── With the banner gone the pill's grab surface is gone too, so in minimal mode the pane's CONTENT is the grab surface (js/app.js wireMinimalBodyDrag → minBodyDown). The edge strips cannot be used for it: measured with the pointer over a pane, GridStack's autohidden handles un-hide at z-index 100 and claim the whole top edge (`.ui-resizable-nw` 28x28 corner, `.ui-resizable-n` from x=25 to w-25), plus e/w/s — a strip there would fight the resize. The cursor is the affordance, and it is honest: this is the one mode where a body drag really moves the pane. (2026-09-12 removed `cursor: grab` from pane bodies precisely because no such gesture existed any more — this re-instates it exactly where the gesture does exist.) Controls keep their own cursor so the hand does not advertise a drag over Live's slider / select / buttons. */ body.minimal .pane-body { cursor: grab; } body.minimal .pane-body:active { cursor: grabbing; } body.minimal .pane-body input, body.minimal .pane-body select, body.minimal .pane-body button, body.minimal .pane-body a { cursor: pointer; } /* ── the Metros MAP's empty area is the pane's grab surface in this mode (2026-09-15): js/app.js mapYieldsToPane hands the press to the pane, so the cursor must say PANE, not the map's `.mz-nopan` no-pan `default` — that would be the same lie Mike caught on 2026-09-12 ("cursor is a hand over a map that would not move"), just mirrored. A press on a DOT still belongs to the map, so `.near` keeps its pointer. */ body.minimal .mz-svg.mz-nopan:not(.near) { cursor: grab; } body.minimal .mz-svg.mz-nopan:not(.near):active { cursor: grabbing; } /* while a content drag is actually running, don't smear a text selection */ body.pane-dragging, body.pane-dragging * { user-select: none !important; } /* A native image drag beats a pane drag (it cancels pointer events), so in minimal mode images inside a pane are not natively draggable — otherwise the moon pane's NASA is the one pane you cannot move. Paired with the `dragstart` guard in js/app.js, which the engines that ignore this honour. */ body.minimal .pane-body img { -webkit-user-drag: none; user-drag: none; } /* ── fixed-cell grid geometry (2026-09-09, Mike: “the grid should NOT resize with the window, it should just get more columns and/or rows”) ── One column = var(--cellw) PIXELS (set from js/app.js, remembered per browser), so a pane's pixel size never depends on the window width and widening the window simply provides MORE columns of the same size. These rules are count-agnostic on purpose: the previous gs-240-only block silently stopped matching the moment the column count changed, which collapsed every pane to content width. Columns 0–400. (v11 ships 12-column CSS only, hence this table.) */ .grid-stack > .grid-stack-item[gs-w="1"]{width:calc(var(--cellw, 6px)*1)} .grid-stack > .grid-stack-item[gs-w="2"]{width:calc(var(--cellw, 6px)*2)} .grid-stack > .grid-stack-item[gs-w="3"]{width:calc(var(--cellw, 6px)*3)} .grid-stack > .grid-stack-item[gs-w="4"]{width:calc(var(--cellw, 6px)*4)} .grid-stack > .grid-stack-item[gs-w="5"]{width:calc(var(--cellw, 6px)*5)} .grid-stack > .grid-stack-item[gs-w="6"]{width:calc(var(--cellw, 6px)*6)} .grid-stack > .grid-stack-item[gs-w="7"]{width:calc(var(--cellw, 6px)*7)} .grid-stack > .grid-stack-item[gs-w="8"]{width:calc(var(--cellw, 6px)*8)} .grid-stack > .grid-stack-item[gs-w="9"]{width:calc(var(--cellw, 6px)*9)} .grid-stack > .grid-stack-item[gs-w="10"]{width:calc(var(--cellw, 6px)*10)} .grid-stack > .grid-stack-item[gs-w="11"]{width:calc(var(--cellw, 6px)*11)} .grid-stack > .grid-stack-item[gs-w="12"]{width:calc(var(--cellw, 6px)*12)} .grid-stack > .grid-stack-item[gs-w="13"]{width:calc(var(--cellw, 6px)*13)} .grid-stack > .grid-stack-item[gs-w="14"]{width:calc(var(--cellw, 6px)*14)} .grid-stack > .grid-stack-item[gs-w="15"]{width:calc(var(--cellw, 6px)*15)} .grid-stack > .grid-stack-item[gs-w="16"]{width:calc(var(--cellw, 6px)*16)} .grid-stack > .grid-stack-item[gs-w="17"]{width:calc(var(--cellw, 6px)*17)} .grid-stack > .grid-stack-item[gs-w="18"]{width:calc(var(--cellw, 6px)*18)} .grid-stack > .grid-stack-item[gs-w="19"]{width:calc(var(--cellw, 6px)*19)} .grid-stack > .grid-stack-item[gs-w="20"]{width:calc(var(--cellw, 6px)*20)} .grid-stack > .grid-stack-item[gs-w="21"]{width:calc(var(--cellw, 6px)*21)} .grid-stack > .grid-stack-item[gs-w="22"]{width:calc(var(--cellw, 6px)*22)} .grid-stack > .grid-stack-item[gs-w="23"]{width:calc(var(--cellw, 6px)*23)} .grid-stack > .grid-stack-item[gs-w="24"]{width:calc(var(--cellw, 6px)*24)} .grid-stack > .grid-stack-item[gs-w="25"]{width:calc(var(--cellw, 6px)*25)} .grid-stack > .grid-stack-item[gs-w="26"]{width:calc(var(--cellw, 6px)*26)} .grid-stack > .grid-stack-item[gs-w="27"]{width:calc(var(--cellw, 6px)*27)} .grid-stack > .grid-stack-item[gs-w="28"]{width:calc(var(--cellw, 6px)*28)} .grid-stack > .grid-stack-item[gs-w="29"]{width:calc(var(--cellw, 6px)*29)} .grid-stack > .grid-stack-item[gs-w="30"]{width:calc(var(--cellw, 6px)*30)} .grid-stack > .grid-stack-item[gs-w="31"]{width:calc(var(--cellw, 6px)*31)} .grid-stack > .grid-stack-item[gs-w="32"]{width:calc(var(--cellw, 6px)*32)} .grid-stack > .grid-stack-item[gs-w="33"]{width:calc(var(--cellw, 6px)*33)} .grid-stack > .grid-stack-item[gs-w="34"]{width:calc(var(--cellw, 6px)*34)} .grid-stack > .grid-stack-item[gs-w="35"]{width:calc(var(--cellw, 6px)*35)} .grid-stack > .grid-stack-item[gs-w="36"]{width:calc(var(--cellw, 6px)*36)} .grid-stack > .grid-stack-item[gs-w="37"]{width:calc(var(--cellw, 6px)*37)} .grid-stack > .grid-stack-item[gs-w="38"]{width:calc(var(--cellw, 6px)*38)} .grid-stack > .grid-stack-item[gs-w="39"]{width:calc(var(--cellw, 6px)*39)} .grid-stack > .grid-stack-item[gs-w="40"]{width:calc(var(--cellw, 6px)*40)} .grid-stack > .grid-stack-item[gs-w="41"]{width:calc(var(--cellw, 6px)*41)} .grid-stack > .grid-stack-item[gs-w="42"]{width:calc(var(--cellw, 6px)*42)} .grid-stack > .grid-stack-item[gs-w="43"]{width:calc(var(--cellw, 6px)*43)} .grid-stack > .grid-stack-item[gs-w="44"]{width:calc(var(--cellw, 6px)*44)} .grid-stack > .grid-stack-item[gs-w="45"]{width:calc(var(--cellw, 6px)*45)} .grid-stack > .grid-stack-item[gs-w="46"]{width:calc(var(--cellw, 6px)*46)} .grid-stack > .grid-stack-item[gs-w="47"]{width:calc(var(--cellw, 6px)*47)} .grid-stack > .grid-stack-item[gs-w="48"]{width:calc(var(--cellw, 6px)*48)} .grid-stack > .grid-stack-item[gs-w="49"]{width:calc(var(--cellw, 6px)*49)} .grid-stack > .grid-stack-item[gs-w="50"]{width:calc(var(--cellw, 6px)*50)} .grid-stack > .grid-stack-item[gs-w="51"]{width:calc(var(--cellw, 6px)*51)} .grid-stack > .grid-stack-item[gs-w="52"]{width:calc(var(--cellw, 6px)*52)} .grid-stack > .grid-stack-item[gs-w="53"]{width:calc(var(--cellw, 6px)*53)} .grid-stack > .grid-stack-item[gs-w="54"]{width:calc(var(--cellw, 6px)*54)} .grid-stack > .grid-stack-item[gs-w="55"]{width:calc(var(--cellw, 6px)*55)} .grid-stack > .grid-stack-item[gs-w="56"]{width:calc(var(--cellw, 6px)*56)} .grid-stack > .grid-stack-item[gs-w="57"]{width:calc(var(--cellw, 6px)*57)} .grid-stack > .grid-stack-item[gs-w="58"]{width:calc(var(--cellw, 6px)*58)} .grid-stack > .grid-stack-item[gs-w="59"]{width:calc(var(--cellw, 6px)*59)} .grid-stack > .grid-stack-item[gs-w="60"]{width:calc(var(--cellw, 6px)*60)} .grid-stack > .grid-stack-item[gs-w="61"]{width:calc(var(--cellw, 6px)*61)} .grid-stack > .grid-stack-item[gs-w="62"]{width:calc(var(--cellw, 6px)*62)} .grid-stack > .grid-stack-item[gs-w="63"]{width:calc(var(--cellw, 6px)*63)} .grid-stack > .grid-stack-item[gs-w="64"]{width:calc(var(--cellw, 6px)*64)} .grid-stack > .grid-stack-item[gs-w="65"]{width:calc(var(--cellw, 6px)*65)} .grid-stack > .grid-stack-item[gs-w="66"]{width:calc(var(--cellw, 6px)*66)} .grid-stack > .grid-stack-item[gs-w="67"]{width:calc(var(--cellw, 6px)*67)} .grid-stack > .grid-stack-item[gs-w="68"]{width:calc(var(--cellw, 6px)*68)} .grid-stack > .grid-stack-item[gs-w="69"]{width:calc(var(--cellw, 6px)*69)} .grid-stack > .grid-stack-item[gs-w="70"]{width:calc(var(--cellw, 6px)*70)} .grid-stack > .grid-stack-item[gs-w="71"]{width:calc(var(--cellw, 6px)*71)} .grid-stack > .grid-stack-item[gs-w="72"]{width:calc(var(--cellw, 6px)*72)} .grid-stack > .grid-stack-item[gs-w="73"]{width:calc(var(--cellw, 6px)*73)} .grid-stack > .grid-stack-item[gs-w="74"]{width:calc(var(--cellw, 6px)*74)} .grid-stack > .grid-stack-item[gs-w="75"]{width:calc(var(--cellw, 6px)*75)} .grid-stack > .grid-stack-item[gs-w="76"]{width:calc(var(--cellw, 6px)*76)} .grid-stack > .grid-stack-item[gs-w="77"]{width:calc(var(--cellw, 6px)*77)} .grid-stack > .grid-stack-item[gs-w="78"]{width:calc(var(--cellw, 6px)*78)} .grid-stack > .grid-stack-item[gs-w="79"]{width:calc(var(--cellw, 6px)*79)} .grid-stack > .grid-stack-item[gs-w="80"]{width:calc(var(--cellw, 6px)*80)} .grid-stack > .grid-stack-item[gs-w="81"]{width:calc(var(--cellw, 6px)*81)} .grid-stack > .grid-stack-item[gs-w="82"]{width:calc(var(--cellw, 6px)*82)} .grid-stack > .grid-stack-item[gs-w="83"]{width:calc(var(--cellw, 6px)*83)} .grid-stack > .grid-stack-item[gs-w="84"]{width:calc(var(--cellw, 6px)*84)} .grid-stack > .grid-stack-item[gs-w="85"]{width:calc(var(--cellw, 6px)*85)} .grid-stack > .grid-stack-item[gs-w="86"]{width:calc(var(--cellw, 6px)*86)} .grid-stack > .grid-stack-item[gs-w="87"]{width:calc(var(--cellw, 6px)*87)} .grid-stack > .grid-stack-item[gs-w="88"]{width:calc(var(--cellw, 6px)*88)} .grid-stack > .grid-stack-item[gs-w="89"]{width:calc(var(--cellw, 6px)*89)} .grid-stack > .grid-stack-item[gs-w="90"]{width:calc(var(--cellw, 6px)*90)} .grid-stack > .grid-stack-item[gs-w="91"]{width:calc(var(--cellw, 6px)*91)} .grid-stack > .grid-stack-item[gs-w="92"]{width:calc(var(--cellw, 6px)*92)} .grid-stack > .grid-stack-item[gs-w="93"]{width:calc(var(--cellw, 6px)*93)} .grid-stack > .grid-stack-item[gs-w="94"]{width:calc(var(--cellw, 6px)*94)} .grid-stack > .grid-stack-item[gs-w="95"]{width:calc(var(--cellw, 6px)*95)} .grid-stack > .grid-stack-item[gs-w="96"]{width:calc(var(--cellw, 6px)*96)} .grid-stack > .grid-stack-item[gs-w="97"]{width:calc(var(--cellw, 6px)*97)} .grid-stack > .grid-stack-item[gs-w="98"]{width:calc(var(--cellw, 6px)*98)} .grid-stack > .grid-stack-item[gs-w="99"]{width:calc(var(--cellw, 6px)*99)} .grid-stack > .grid-stack-item[gs-w="100"]{width:calc(var(--cellw, 6px)*100)} .grid-stack > .grid-stack-item[gs-w="101"]{width:calc(var(--cellw, 6px)*101)} .grid-stack > .grid-stack-item[gs-w="102"]{width:calc(var(--cellw, 6px)*102)} .grid-stack > .grid-stack-item[gs-w="103"]{width:calc(var(--cellw, 6px)*103)} .grid-stack > .grid-stack-item[gs-w="104"]{width:calc(var(--cellw, 6px)*104)} .grid-stack > .grid-stack-item[gs-w="105"]{width:calc(var(--cellw, 6px)*105)} .grid-stack > .grid-stack-item[gs-w="106"]{width:calc(var(--cellw, 6px)*106)} .grid-stack > .grid-stack-item[gs-w="107"]{width:calc(var(--cellw, 6px)*107)} .grid-stack > .grid-stack-item[gs-w="108"]{width:calc(var(--cellw, 6px)*108)} .grid-stack > .grid-stack-item[gs-w="109"]{width:calc(var(--cellw, 6px)*109)} .grid-stack > .grid-stack-item[gs-w="110"]{width:calc(var(--cellw, 6px)*110)} .grid-stack > .grid-stack-item[gs-w="111"]{width:calc(var(--cellw, 6px)*111)} .grid-stack > .grid-stack-item[gs-w="112"]{width:calc(var(--cellw, 6px)*112)} .grid-stack > .grid-stack-item[gs-w="113"]{width:calc(var(--cellw, 6px)*113)} .grid-stack > .grid-stack-item[gs-w="114"]{width:calc(var(--cellw, 6px)*114)} .grid-stack > .grid-stack-item[gs-w="115"]{width:calc(var(--cellw, 6px)*115)} .grid-stack > .grid-stack-item[gs-w="116"]{width:calc(var(--cellw, 6px)*116)} .grid-stack > .grid-stack-item[gs-w="117"]{width:calc(var(--cellw, 6px)*117)} .grid-stack > .grid-stack-item[gs-w="118"]{width:calc(var(--cellw, 6px)*118)} .grid-stack > .grid-stack-item[gs-w="119"]{width:calc(var(--cellw, 6px)*119)} .grid-stack > .grid-stack-item[gs-w="120"]{width:calc(var(--cellw, 6px)*120)} .grid-stack > .grid-stack-item[gs-w="121"]{width:calc(var(--cellw, 6px)*121)} .grid-stack > .grid-stack-item[gs-w="122"]{width:calc(var(--cellw, 6px)*122)} .grid-stack > .grid-stack-item[gs-w="123"]{width:calc(var(--cellw, 6px)*123)} .grid-stack > .grid-stack-item[gs-w="124"]{width:calc(var(--cellw, 6px)*124)} .grid-stack > .grid-stack-item[gs-w="125"]{width:calc(var(--cellw, 6px)*125)} .grid-stack > .grid-stack-item[gs-w="126"]{width:calc(var(--cellw, 6px)*126)} .grid-stack > .grid-stack-item[gs-w="127"]{width:calc(var(--cellw, 6px)*127)} .grid-stack > .grid-stack-item[gs-w="128"]{width:calc(var(--cellw, 6px)*128)} .grid-stack > .grid-stack-item[gs-w="129"]{width:calc(var(--cellw, 6px)*129)} .grid-stack > .grid-stack-item[gs-w="130"]{width:calc(var(--cellw, 6px)*130)} .grid-stack > .grid-stack-item[gs-w="131"]{width:calc(var(--cellw, 6px)*131)} .grid-stack > .grid-stack-item[gs-w="132"]{width:calc(var(--cellw, 6px)*132)} .grid-stack > .grid-stack-item[gs-w="133"]{width:calc(var(--cellw, 6px)*133)} .grid-stack > .grid-stack-item[gs-w="134"]{width:calc(var(--cellw, 6px)*134)} .grid-stack > .grid-stack-item[gs-w="135"]{width:calc(var(--cellw, 6px)*135)} .grid-stack > .grid-stack-item[gs-w="136"]{width:calc(var(--cellw, 6px)*136)} .grid-stack > .grid-stack-item[gs-w="137"]{width:calc(var(--cellw, 6px)*137)} .grid-stack > .grid-stack-item[gs-w="138"]{width:calc(var(--cellw, 6px)*138)} .grid-stack > .grid-stack-item[gs-w="139"]{width:calc(var(--cellw, 6px)*139)} .grid-stack > .grid-stack-item[gs-w="140"]{width:calc(var(--cellw, 6px)*140)} .grid-stack > .grid-stack-item[gs-w="141"]{width:calc(var(--cellw, 6px)*141)} .grid-stack > .grid-stack-item[gs-w="142"]{width:calc(var(--cellw, 6px)*142)} .grid-stack > .grid-stack-item[gs-w="143"]{width:calc(var(--cellw, 6px)*143)} .grid-stack > .grid-stack-item[gs-w="144"]{width:calc(var(--cellw, 6px)*144)} .grid-stack > .grid-stack-item[gs-w="145"]{width:calc(var(--cellw, 6px)*145)} .grid-stack > .grid-stack-item[gs-w="146"]{width:calc(var(--cellw, 6px)*146)} .grid-stack > .grid-stack-item[gs-w="147"]{width:calc(var(--cellw, 6px)*147)} .grid-stack > .grid-stack-item[gs-w="148"]{width:calc(var(--cellw, 6px)*148)} .grid-stack > .grid-stack-item[gs-w="149"]{width:calc(var(--cellw, 6px)*149)} .grid-stack > .grid-stack-item[gs-w="150"]{width:calc(var(--cellw, 6px)*150)} .grid-stack > .grid-stack-item[gs-w="151"]{width:calc(var(--cellw, 6px)*151)} .grid-stack > .grid-stack-item[gs-w="152"]{width:calc(var(--cellw, 6px)*152)} .grid-stack > .grid-stack-item[gs-w="153"]{width:calc(var(--cellw, 6px)*153)} .grid-stack > .grid-stack-item[gs-w="154"]{width:calc(var(--cellw, 6px)*154)} .grid-stack > .grid-stack-item[gs-w="155"]{width:calc(var(--cellw, 6px)*155)} .grid-stack > .grid-stack-item[gs-w="156"]{width:calc(var(--cellw, 6px)*156)} .grid-stack > .grid-stack-item[gs-w="157"]{width:calc(var(--cellw, 6px)*157)} .grid-stack > .grid-stack-item[gs-w="158"]{width:calc(var(--cellw, 6px)*158)} .grid-stack > .grid-stack-item[gs-w="159"]{width:calc(var(--cellw, 6px)*159)} .grid-stack > .grid-stack-item[gs-w="160"]{width:calc(var(--cellw, 6px)*160)} .grid-stack > .grid-stack-item[gs-w="161"]{width:calc(var(--cellw, 6px)*161)} .grid-stack > .grid-stack-item[gs-w="162"]{width:calc(var(--cellw, 6px)*162)} .grid-stack > .grid-stack-item[gs-w="163"]{width:calc(var(--cellw, 6px)*163)} .grid-stack > .grid-stack-item[gs-w="164"]{width:calc(var(--cellw, 6px)*164)} .grid-stack > .grid-stack-item[gs-w="165"]{width:calc(var(--cellw, 6px)*165)} .grid-stack > .grid-stack-item[gs-w="166"]{width:calc(var(--cellw, 6px)*166)} .grid-stack > .grid-stack-item[gs-w="167"]{width:calc(var(--cellw, 6px)*167)} .grid-stack > .grid-stack-item[gs-w="168"]{width:calc(var(--cellw, 6px)*168)} .grid-stack > .grid-stack-item[gs-w="169"]{width:calc(var(--cellw, 6px)*169)} .grid-stack > .grid-stack-item[gs-w="170"]{width:calc(var(--cellw, 6px)*170)} .grid-stack > .grid-stack-item[gs-w="171"]{width:calc(var(--cellw, 6px)*171)} .grid-stack > .grid-stack-item[gs-w="172"]{width:calc(var(--cellw, 6px)*172)} .grid-stack > .grid-stack-item[gs-w="173"]{width:calc(var(--cellw, 6px)*173)} .grid-stack > .grid-stack-item[gs-w="174"]{width:calc(var(--cellw, 6px)*174)} .grid-stack > .grid-stack-item[gs-w="175"]{width:calc(var(--cellw, 6px)*175)} .grid-stack > .grid-stack-item[gs-w="176"]{width:calc(var(--cellw, 6px)*176)} .grid-stack > .grid-stack-item[gs-w="177"]{width:calc(var(--cellw, 6px)*177)} .grid-stack > .grid-stack-item[gs-w="178"]{width:calc(var(--cellw, 6px)*178)} .grid-stack > .grid-stack-item[gs-w="179"]{width:calc(var(--cellw, 6px)*179)} .grid-stack > .grid-stack-item[gs-w="180"]{width:calc(var(--cellw, 6px)*180)} .grid-stack > .grid-stack-item[gs-w="181"]{width:calc(var(--cellw, 6px)*181)} .grid-stack > .grid-stack-item[gs-w="182"]{width:calc(var(--cellw, 6px)*182)} .grid-stack > .grid-stack-item[gs-w="183"]{width:calc(var(--cellw, 6px)*183)} .grid-stack > .grid-stack-item[gs-w="184"]{width:calc(var(--cellw, 6px)*184)} .grid-stack > .grid-stack-item[gs-w="185"]{width:calc(var(--cellw, 6px)*185)} .grid-stack > .grid-stack-item[gs-w="186"]{width:calc(var(--cellw, 6px)*186)} .grid-stack > .grid-stack-item[gs-w="187"]{width:calc(var(--cellw, 6px)*187)} .grid-stack > .grid-stack-item[gs-w="188"]{width:calc(var(--cellw, 6px)*188)} .grid-stack > .grid-stack-item[gs-w="189"]{width:calc(var(--cellw, 6px)*189)} .grid-stack > .grid-stack-item[gs-w="190"]{width:calc(var(--cellw, 6px)*190)} .grid-stack > .grid-stack-item[gs-w="191"]{width:calc(var(--cellw, 6px)*191)} .grid-stack > .grid-stack-item[gs-w="192"]{width:calc(var(--cellw, 6px)*192)} .grid-stack > .grid-stack-item[gs-w="193"]{width:calc(var(--cellw, 6px)*193)} .grid-stack > .grid-stack-item[gs-w="194"]{width:calc(var(--cellw, 6px)*194)} .grid-stack > .grid-stack-item[gs-w="195"]{width:calc(var(--cellw, 6px)*195)} .grid-stack > .grid-stack-item[gs-w="196"]{width:calc(var(--cellw, 6px)*196)} .grid-stack > .grid-stack-item[gs-w="197"]{width:calc(var(--cellw, 6px)*197)} .grid-stack > .grid-stack-item[gs-w="198"]{width:calc(var(--cellw, 6px)*198)} .grid-stack > .grid-stack-item[gs-w="199"]{width:calc(var(--cellw, 6px)*199)} .grid-stack > .grid-stack-item[gs-w="200"]{width:calc(var(--cellw, 6px)*200)} .grid-stack > .grid-stack-item[gs-w="201"]{width:calc(var(--cellw, 6px)*201)} .grid-stack > .grid-stack-item[gs-w="202"]{width:calc(var(--cellw, 6px)*202)} .grid-stack > .grid-stack-item[gs-w="203"]{width:calc(var(--cellw, 6px)*203)} .grid-stack > .grid-stack-item[gs-w="204"]{width:calc(var(--cellw, 6px)*204)} .grid-stack > .grid-stack-item[gs-w="205"]{width:calc(var(--cellw, 6px)*205)} .grid-stack > .grid-stack-item[gs-w="206"]{width:calc(var(--cellw, 6px)*206)} .grid-stack > .grid-stack-item[gs-w="207"]{width:calc(var(--cellw, 6px)*207)} .grid-stack > .grid-stack-item[gs-w="208"]{width:calc(var(--cellw, 6px)*208)} .grid-stack > .grid-stack-item[gs-w="209"]{width:calc(var(--cellw, 6px)*209)} .grid-stack > .grid-stack-item[gs-w="210"]{width:calc(var(--cellw, 6px)*210)} .grid-stack > .grid-stack-item[gs-w="211"]{width:calc(var(--cellw, 6px)*211)} .grid-stack > .grid-stack-item[gs-w="212"]{width:calc(var(--cellw, 6px)*212)} .grid-stack > .grid-stack-item[gs-w="213"]{width:calc(var(--cellw, 6px)*213)} .grid-stack > .grid-stack-item[gs-w="214"]{width:calc(var(--cellw, 6px)*214)} .grid-stack > .grid-stack-item[gs-w="215"]{width:calc(var(--cellw, 6px)*215)} .grid-stack > .grid-stack-item[gs-w="216"]{width:calc(var(--cellw, 6px)*216)} .grid-stack > .grid-stack-item[gs-w="217"]{width:calc(var(--cellw, 6px)*217)} .grid-stack > .grid-stack-item[gs-w="218"]{width:calc(var(--cellw, 6px)*218)} .grid-stack > .grid-stack-item[gs-w="219"]{width:calc(var(--cellw, 6px)*219)} .grid-stack > .grid-stack-item[gs-w="220"]{width:calc(var(--cellw, 6px)*220)} .grid-stack > .grid-stack-item[gs-w="221"]{width:calc(var(--cellw, 6px)*221)} .grid-stack > .grid-stack-item[gs-w="222"]{width:calc(var(--cellw, 6px)*222)} .grid-stack > .grid-stack-item[gs-w="223"]{width:calc(var(--cellw, 6px)*223)} .grid-stack > .grid-stack-item[gs-w="224"]{width:calc(var(--cellw, 6px)*224)} .grid-stack > .grid-stack-item[gs-w="225"]{width:calc(var(--cellw, 6px)*225)} .grid-stack > .grid-stack-item[gs-w="226"]{width:calc(var(--cellw, 6px)*226)} .grid-stack > .grid-stack-item[gs-w="227"]{width:calc(var(--cellw, 6px)*227)} .grid-stack > .grid-stack-item[gs-w="228"]{width:calc(var(--cellw, 6px)*228)} .grid-stack > .grid-stack-item[gs-w="229"]{width:calc(var(--cellw, 6px)*229)} .grid-stack > .grid-stack-item[gs-w="230"]{width:calc(var(--cellw, 6px)*230)} .grid-stack > .grid-stack-item[gs-w="231"]{width:calc(var(--cellw, 6px)*231)} .grid-stack > .grid-stack-item[gs-w="232"]{width:calc(var(--cellw, 6px)*232)} .grid-stack > .grid-stack-item[gs-w="233"]{width:calc(var(--cellw, 6px)*233)} .grid-stack > .grid-stack-item[gs-w="234"]{width:calc(var(--cellw, 6px)*234)} .grid-stack > .grid-stack-item[gs-w="235"]{width:calc(var(--cellw, 6px)*235)} .grid-stack > .grid-stack-item[gs-w="236"]{width:calc(var(--cellw, 6px)*236)} .grid-stack > .grid-stack-item[gs-w="237"]{width:calc(var(--cellw, 6px)*237)} .grid-stack > .grid-stack-item[gs-w="238"]{width:calc(var(--cellw, 6px)*238)} .grid-stack > .grid-stack-item[gs-w="239"]{width:calc(var(--cellw, 6px)*239)} .grid-stack > .grid-stack-item[gs-w="240"]{width:calc(var(--cellw, 6px)*240)} .grid-stack > .grid-stack-item[gs-w="241"]{width:calc(var(--cellw, 6px)*241)} .grid-stack > .grid-stack-item[gs-w="242"]{width:calc(var(--cellw, 6px)*242)} .grid-stack > .grid-stack-item[gs-w="243"]{width:calc(var(--cellw, 6px)*243)} .grid-stack > .grid-stack-item[gs-w="244"]{width:calc(var(--cellw, 6px)*244)} .grid-stack > .grid-stack-item[gs-w="245"]{width:calc(var(--cellw, 6px)*245)} .grid-stack > .grid-stack-item[gs-w="246"]{width:calc(var(--cellw, 6px)*246)} .grid-stack > .grid-stack-item[gs-w="247"]{width:calc(var(--cellw, 6px)*247)} .grid-stack > .grid-stack-item[gs-w="248"]{width:calc(var(--cellw, 6px)*248)} .grid-stack > .grid-stack-item[gs-w="249"]{width:calc(var(--cellw, 6px)*249)} .grid-stack > .grid-stack-item[gs-w="250"]{width:calc(var(--cellw, 6px)*250)} .grid-stack > .grid-stack-item[gs-w="251"]{width:calc(var(--cellw, 6px)*251)} .grid-stack > .grid-stack-item[gs-w="252"]{width:calc(var(--cellw, 6px)*252)} .grid-stack > .grid-stack-item[gs-w="253"]{width:calc(var(--cellw, 6px)*253)} .grid-stack > .grid-stack-item[gs-w="254"]{width:calc(var(--cellw, 6px)*254)} .grid-stack > .grid-stack-item[gs-w="255"]{width:calc(var(--cellw, 6px)*255)} .grid-stack > .grid-stack-item[gs-w="256"]{width:calc(var(--cellw, 6px)*256)} .grid-stack > .grid-stack-item[gs-w="257"]{width:calc(var(--cellw, 6px)*257)} .grid-stack > .grid-stack-item[gs-w="258"]{width:calc(var(--cellw, 6px)*258)} .grid-stack > .grid-stack-item[gs-w="259"]{width:calc(var(--cellw, 6px)*259)} .grid-stack > .grid-stack-item[gs-w="260"]{width:calc(var(--cellw, 6px)*260)} .grid-stack > .grid-stack-item[gs-w="261"]{width:calc(var(--cellw, 6px)*261)} .grid-stack > .grid-stack-item[gs-w="262"]{width:calc(var(--cellw, 6px)*262)} .grid-stack > .grid-stack-item[gs-w="263"]{width:calc(var(--cellw, 6px)*263)} .grid-stack > .grid-stack-item[gs-w="264"]{width:calc(var(--cellw, 6px)*264)} .grid-stack > .grid-stack-item[gs-w="265"]{width:calc(var(--cellw, 6px)*265)} .grid-stack > .grid-stack-item[gs-w="266"]{width:calc(var(--cellw, 6px)*266)} .grid-stack > .grid-stack-item[gs-w="267"]{width:calc(var(--cellw, 6px)*267)} .grid-stack > .grid-stack-item[gs-w="268"]{width:calc(var(--cellw, 6px)*268)} .grid-stack > .grid-stack-item[gs-w="269"]{width:calc(var(--cellw, 6px)*269)} .grid-stack > .grid-stack-item[gs-w="270"]{width:calc(var(--cellw, 6px)*270)} .grid-stack > .grid-stack-item[gs-w="271"]{width:calc(var(--cellw, 6px)*271)} .grid-stack > .grid-stack-item[gs-w="272"]{width:calc(var(--cellw, 6px)*272)} .grid-stack > .grid-stack-item[gs-w="273"]{width:calc(var(--cellw, 6px)*273)} .grid-stack > .grid-stack-item[gs-w="274"]{width:calc(var(--cellw, 6px)*274)} .grid-stack > .grid-stack-item[gs-w="275"]{width:calc(var(--cellw, 6px)*275)} .grid-stack > .grid-stack-item[gs-w="276"]{width:calc(var(--cellw, 6px)*276)} .grid-stack > .grid-stack-item[gs-w="277"]{width:calc(var(--cellw, 6px)*277)} .grid-stack > .grid-stack-item[gs-w="278"]{width:calc(var(--cellw, 6px)*278)} .grid-stack > .grid-stack-item[gs-w="279"]{width:calc(var(--cellw, 6px)*279)} .grid-stack > .grid-stack-item[gs-w="280"]{width:calc(var(--cellw, 6px)*280)} .grid-stack > .grid-stack-item[gs-w="281"]{width:calc(var(--cellw, 6px)*281)} .grid-stack > .grid-stack-item[gs-w="282"]{width:calc(var(--cellw, 6px)*282)} .grid-stack > .grid-stack-item[gs-w="283"]{width:calc(var(--cellw, 6px)*283)} .grid-stack > .grid-stack-item[gs-w="284"]{width:calc(var(--cellw, 6px)*284)} .grid-stack > .grid-stack-item[gs-w="285"]{width:calc(var(--cellw, 6px)*285)} .grid-stack > .grid-stack-item[gs-w="286"]{width:calc(var(--cellw, 6px)*286)} .grid-stack > .grid-stack-item[gs-w="287"]{width:calc(var(--cellw, 6px)*287)} .grid-stack > .grid-stack-item[gs-w="288"]{width:calc(var(--cellw, 6px)*288)} .grid-stack > .grid-stack-item[gs-w="289"]{width:calc(var(--cellw, 6px)*289)} .grid-stack > .grid-stack-item[gs-w="290"]{width:calc(var(--cellw, 6px)*290)} .grid-stack > .grid-stack-item[gs-w="291"]{width:calc(var(--cellw, 6px)*291)} .grid-stack > .grid-stack-item[gs-w="292"]{width:calc(var(--cellw, 6px)*292)} .grid-stack > .grid-stack-item[gs-w="293"]{width:calc(var(--cellw, 6px)*293)} .grid-stack > .grid-stack-item[gs-w="294"]{width:calc(var(--cellw, 6px)*294)} .grid-stack > .grid-stack-item[gs-w="295"]{width:calc(var(--cellw, 6px)*295)} .grid-stack > .grid-stack-item[gs-w="296"]{width:calc(var(--cellw, 6px)*296)} .grid-stack > .grid-stack-item[gs-w="297"]{width:calc(var(--cellw, 6px)*297)} .grid-stack > .grid-stack-item[gs-w="298"]{width:calc(var(--cellw, 6px)*298)} .grid-stack > .grid-stack-item[gs-w="299"]{width:calc(var(--cellw, 6px)*299)} .grid-stack > .grid-stack-item[gs-w="300"]{width:calc(var(--cellw, 6px)*300)} .grid-stack > .grid-stack-item[gs-w="301"]{width:calc(var(--cellw, 6px)*301)} .grid-stack > .grid-stack-item[gs-w="302"]{width:calc(var(--cellw, 6px)*302)} .grid-stack > .grid-stack-item[gs-w="303"]{width:calc(var(--cellw, 6px)*303)} .grid-stack > .grid-stack-item[gs-w="304"]{width:calc(var(--cellw, 6px)*304)} .grid-stack > .grid-stack-item[gs-w="305"]{width:calc(var(--cellw, 6px)*305)} .grid-stack > .grid-stack-item[gs-w="306"]{width:calc(var(--cellw, 6px)*306)} .grid-stack > .grid-stack-item[gs-w="307"]{width:calc(var(--cellw, 6px)*307)} .grid-stack > .grid-stack-item[gs-w="308"]{width:calc(var(--cellw, 6px)*308)} .grid-stack > .grid-stack-item[gs-w="309"]{width:calc(var(--cellw, 6px)*309)} .grid-stack > .grid-stack-item[gs-w="310"]{width:calc(var(--cellw, 6px)*310)} .grid-stack > .grid-stack-item[gs-w="311"]{width:calc(var(--cellw, 6px)*311)} .grid-stack > .grid-stack-item[gs-w="312"]{width:calc(var(--cellw, 6px)*312)} .grid-stack > .grid-stack-item[gs-w="313"]{width:calc(var(--cellw, 6px)*313)} .grid-stack > .grid-stack-item[gs-w="314"]{width:calc(var(--cellw, 6px)*314)} .grid-stack > .grid-stack-item[gs-w="315"]{width:calc(var(--cellw, 6px)*315)} .grid-stack > .grid-stack-item[gs-w="316"]{width:calc(var(--cellw, 6px)*316)} .grid-stack > .grid-stack-item[gs-w="317"]{width:calc(var(--cellw, 6px)*317)} .grid-stack > .grid-stack-item[gs-w="318"]{width:calc(var(--cellw, 6px)*318)} .grid-stack > .grid-stack-item[gs-w="319"]{width:calc(var(--cellw, 6px)*319)} .grid-stack > .grid-stack-item[gs-w="320"]{width:calc(var(--cellw, 6px)*320)} .grid-stack > .grid-stack-item[gs-w="321"]{width:calc(var(--cellw, 6px)*321)} .grid-stack > .grid-stack-item[gs-w="322"]{width:calc(var(--cellw, 6px)*322)} .grid-stack > .grid-stack-item[gs-w="323"]{width:calc(var(--cellw, 6px)*323)} .grid-stack > .grid-stack-item[gs-w="324"]{width:calc(var(--cellw, 6px)*324)} .grid-stack > .grid-stack-item[gs-w="325"]{width:calc(var(--cellw, 6px)*325)} .grid-stack > .grid-stack-item[gs-w="326"]{width:calc(var(--cellw, 6px)*326)} .grid-stack > .grid-stack-item[gs-w="327"]{width:calc(var(--cellw, 6px)*327)} .grid-stack > .grid-stack-item[gs-w="328"]{width:calc(var(--cellw, 6px)*328)} .grid-stack > .grid-stack-item[gs-w="329"]{width:calc(var(--cellw, 6px)*329)} .grid-stack > .grid-stack-item[gs-w="330"]{width:calc(var(--cellw, 6px)*330)} .grid-stack > .grid-stack-item[gs-w="331"]{width:calc(var(--cellw, 6px)*331)} .grid-stack > .grid-stack-item[gs-w="332"]{width:calc(var(--cellw, 6px)*332)} .grid-stack > .grid-stack-item[gs-w="333"]{width:calc(var(--cellw, 6px)*333)} .grid-stack > .grid-stack-item[gs-w="334"]{width:calc(var(--cellw, 6px)*334)} .grid-stack > .grid-stack-item[gs-w="335"]{width:calc(var(--cellw, 6px)*335)} .grid-stack > .grid-stack-item[gs-w="336"]{width:calc(var(--cellw, 6px)*336)} .grid-stack > .grid-stack-item[gs-w="337"]{width:calc(var(--cellw, 6px)*337)} .grid-stack > .grid-stack-item[gs-w="338"]{width:calc(var(--cellw, 6px)*338)} .grid-stack > .grid-stack-item[gs-w="339"]{width:calc(var(--cellw, 6px)*339)} .grid-stack > .grid-stack-item[gs-w="340"]{width:calc(var(--cellw, 6px)*340)} .grid-stack > .grid-stack-item[gs-w="341"]{width:calc(var(--cellw, 6px)*341)} .grid-stack > .grid-stack-item[gs-w="342"]{width:calc(var(--cellw, 6px)*342)} .grid-stack > .grid-stack-item[gs-w="343"]{width:calc(var(--cellw, 6px)*343)} .grid-stack > .grid-stack-item[gs-w="344"]{width:calc(var(--cellw, 6px)*344)} .grid-stack > .grid-stack-item[gs-w="345"]{width:calc(var(--cellw, 6px)*345)} .grid-stack > .grid-stack-item[gs-w="346"]{width:calc(var(--cellw, 6px)*346)} .grid-stack > .grid-stack-item[gs-w="347"]{width:calc(var(--cellw, 6px)*347)} .grid-stack > .grid-stack-item[gs-w="348"]{width:calc(var(--cellw, 6px)*348)} .grid-stack > .grid-stack-item[gs-w="349"]{width:calc(var(--cellw, 6px)*349)} .grid-stack > .grid-stack-item[gs-w="350"]{width:calc(var(--cellw, 6px)*350)} .grid-stack > .grid-stack-item[gs-w="351"]{width:calc(var(--cellw, 6px)*351)} .grid-stack > .grid-stack-item[gs-w="352"]{width:calc(var(--cellw, 6px)*352)} .grid-stack > .grid-stack-item[gs-w="353"]{width:calc(var(--cellw, 6px)*353)} .grid-stack > .grid-stack-item[gs-w="354"]{width:calc(var(--cellw, 6px)*354)} .grid-stack > .grid-stack-item[gs-w="355"]{width:calc(var(--cellw, 6px)*355)} .grid-stack > .grid-stack-item[gs-w="356"]{width:calc(var(--cellw, 6px)*356)} .grid-stack > .grid-stack-item[gs-w="357"]{width:calc(var(--cellw, 6px)*357)} .grid-stack > .grid-stack-item[gs-w="358"]{width:calc(var(--cellw, 6px)*358)} .grid-stack > .grid-stack-item[gs-w="359"]{width:calc(var(--cellw, 6px)*359)} .grid-stack > .grid-stack-item[gs-w="360"]{width:calc(var(--cellw, 6px)*360)} .grid-stack > .grid-stack-item[gs-w="361"]{width:calc(var(--cellw, 6px)*361)} .grid-stack > .grid-stack-item[gs-w="362"]{width:calc(var(--cellw, 6px)*362)} .grid-stack > .grid-stack-item[gs-w="363"]{width:calc(var(--cellw, 6px)*363)} .grid-stack > .grid-stack-item[gs-w="364"]{width:calc(var(--cellw, 6px)*364)} .grid-stack > .grid-stack-item[gs-w="365"]{width:calc(var(--cellw, 6px)*365)} .grid-stack > .grid-stack-item[gs-w="366"]{width:calc(var(--cellw, 6px)*366)} .grid-stack > .grid-stack-item[gs-w="367"]{width:calc(var(--cellw, 6px)*367)} .grid-stack > .grid-stack-item[gs-w="368"]{width:calc(var(--cellw, 6px)*368)} .grid-stack > .grid-stack-item[gs-w="369"]{width:calc(var(--cellw, 6px)*369)} .grid-stack > .grid-stack-item[gs-w="370"]{width:calc(var(--cellw, 6px)*370)} .grid-stack > .grid-stack-item[gs-w="371"]{width:calc(var(--cellw, 6px)*371)} .grid-stack > .grid-stack-item[gs-w="372"]{width:calc(var(--cellw, 6px)*372)} .grid-stack > .grid-stack-item[gs-w="373"]{width:calc(var(--cellw, 6px)*373)} .grid-stack > .grid-stack-item[gs-w="374"]{width:calc(var(--cellw, 6px)*374)} .grid-stack > .grid-stack-item[gs-w="375"]{width:calc(var(--cellw, 6px)*375)} .grid-stack > .grid-stack-item[gs-w="376"]{width:calc(var(--cellw, 6px)*376)} .grid-stack > .grid-stack-item[gs-w="377"]{width:calc(var(--cellw, 6px)*377)} .grid-stack > .grid-stack-item[gs-w="378"]{width:calc(var(--cellw, 6px)*378)} .grid-stack > .grid-stack-item[gs-w="379"]{width:calc(var(--cellw, 6px)*379)} .grid-stack > .grid-stack-item[gs-w="380"]{width:calc(var(--cellw, 6px)*380)} .grid-stack > .grid-stack-item[gs-w="381"]{width:calc(var(--cellw, 6px)*381)} .grid-stack > .grid-stack-item[gs-w="382"]{width:calc(var(--cellw, 6px)*382)} .grid-stack > .grid-stack-item[gs-w="383"]{width:calc(var(--cellw, 6px)*383)} .grid-stack > .grid-stack-item[gs-w="384"]{width:calc(var(--cellw, 6px)*384)} .grid-stack > .grid-stack-item[gs-w="385"]{width:calc(var(--cellw, 6px)*385)} .grid-stack > .grid-stack-item[gs-w="386"]{width:calc(var(--cellw, 6px)*386)} .grid-stack > .grid-stack-item[gs-w="387"]{width:calc(var(--cellw, 6px)*387)} .grid-stack > .grid-stack-item[gs-w="388"]{width:calc(var(--cellw, 6px)*388)} .grid-stack > .grid-stack-item[gs-w="389"]{width:calc(var(--cellw, 6px)*389)} .grid-stack > .grid-stack-item[gs-w="390"]{width:calc(var(--cellw, 6px)*390)} .grid-stack > .grid-stack-item[gs-w="391"]{width:calc(var(--cellw, 6px)*391)} .grid-stack > .grid-stack-item[gs-w="392"]{width:calc(var(--cellw, 6px)*392)} .grid-stack > .grid-stack-item[gs-w="393"]{width:calc(var(--cellw, 6px)*393)} .grid-stack > .grid-stack-item[gs-w="394"]{width:calc(var(--cellw, 6px)*394)} .grid-stack > .grid-stack-item[gs-w="395"]{width:calc(var(--cellw, 6px)*395)} .grid-stack > .grid-stack-item[gs-w="396"]{width:calc(var(--cellw, 6px)*396)} .grid-stack > .grid-stack-item[gs-w="397"]{width:calc(var(--cellw, 6px)*397)} .grid-stack > .grid-stack-item[gs-w="398"]{width:calc(var(--cellw, 6px)*398)} .grid-stack > .grid-stack-item[gs-w="399"]{width:calc(var(--cellw, 6px)*399)} .grid-stack > .grid-stack-item[gs-w="400"]{width:calc(var(--cellw, 6px)*400)} .grid-stack > .grid-stack-item[gs-x="0"]{left:0} .grid-stack > .grid-stack-item[gs-x="1"]{left:calc(var(--cellw, 6px)*1)} .grid-stack > .grid-stack-item[gs-x="2"]{left:calc(var(--cellw, 6px)*2)} .grid-stack > .grid-stack-item[gs-x="3"]{left:calc(var(--cellw, 6px)*3)} .grid-stack > .grid-stack-item[gs-x="4"]{left:calc(var(--cellw, 6px)*4)} .grid-stack > .grid-stack-item[gs-x="5"]{left:calc(var(--cellw, 6px)*5)} .grid-stack > .grid-stack-item[gs-x="6"]{left:calc(var(--cellw, 6px)*6)} .grid-stack > .grid-stack-item[gs-x="7"]{left:calc(var(--cellw, 6px)*7)} .grid-stack > .grid-stack-item[gs-x="8"]{left:calc(var(--cellw, 6px)*8)} .grid-stack > .grid-stack-item[gs-x="9"]{left:calc(var(--cellw, 6px)*9)} .grid-stack > .grid-stack-item[gs-x="10"]{left:calc(var(--cellw, 6px)*10)} .grid-stack > .grid-stack-item[gs-x="11"]{left:calc(var(--cellw, 6px)*11)} .grid-stack > .grid-stack-item[gs-x="12"]{left:calc(var(--cellw, 6px)*12)} .grid-stack > .grid-stack-item[gs-x="13"]{left:calc(var(--cellw, 6px)*13)} .grid-stack > .grid-stack-item[gs-x="14"]{left:calc(var(--cellw, 6px)*14)} .grid-stack > .grid-stack-item[gs-x="15"]{left:calc(var(--cellw, 6px)*15)} .grid-stack > .grid-stack-item[gs-x="16"]{left:calc(var(--cellw, 6px)*16)} .grid-stack > .grid-stack-item[gs-x="17"]{left:calc(var(--cellw, 6px)*17)} .grid-stack > .grid-stack-item[gs-x="18"]{left:calc(var(--cellw, 6px)*18)} .grid-stack > .grid-stack-item[gs-x="19"]{left:calc(var(--cellw, 6px)*19)} .grid-stack > .grid-stack-item[gs-x="20"]{left:calc(var(--cellw, 6px)*20)} .grid-stack > .grid-stack-item[gs-x="21"]{left:calc(var(--cellw, 6px)*21)} .grid-stack > .grid-stack-item[gs-x="22"]{left:calc(var(--cellw, 6px)*22)} .grid-stack > .grid-stack-item[gs-x="23"]{left:calc(var(--cellw, 6px)*23)} .grid-stack > .grid-stack-item[gs-x="24"]{left:calc(var(--cellw, 6px)*24)} .grid-stack > .grid-stack-item[gs-x="25"]{left:calc(var(--cellw, 6px)*25)} .grid-stack > .grid-stack-item[gs-x="26"]{left:calc(var(--cellw, 6px)*26)} .grid-stack > .grid-stack-item[gs-x="27"]{left:calc(var(--cellw, 6px)*27)} .grid-stack > .grid-stack-item[gs-x="28"]{left:calc(var(--cellw, 6px)*28)} .grid-stack > .grid-stack-item[gs-x="29"]{left:calc(var(--cellw, 6px)*29)} .grid-stack > .grid-stack-item[gs-x="30"]{left:calc(var(--cellw, 6px)*30)} .grid-stack > .grid-stack-item[gs-x="31"]{left:calc(var(--cellw, 6px)*31)} .grid-stack > .grid-stack-item[gs-x="32"]{left:calc(var(--cellw, 6px)*32)} .grid-stack > .grid-stack-item[gs-x="33"]{left:calc(var(--cellw, 6px)*33)} .grid-stack > .grid-stack-item[gs-x="34"]{left:calc(var(--cellw, 6px)*34)} .grid-stack > .grid-stack-item[gs-x="35"]{left:calc(var(--cellw, 6px)*35)} .grid-stack > .grid-stack-item[gs-x="36"]{left:calc(var(--cellw, 6px)*36)} .grid-stack > .grid-stack-item[gs-x="37"]{left:calc(var(--cellw, 6px)*37)} .grid-stack > .grid-stack-item[gs-x="38"]{left:calc(var(--cellw, 6px)*38)} .grid-stack > .grid-stack-item[gs-x="39"]{left:calc(var(--cellw, 6px)*39)} .grid-stack > .grid-stack-item[gs-x="40"]{left:calc(var(--cellw, 6px)*40)} .grid-stack > .grid-stack-item[gs-x="41"]{left:calc(var(--cellw, 6px)*41)} .grid-stack > .grid-stack-item[gs-x="42"]{left:calc(var(--cellw, 6px)*42)} .grid-stack > .grid-stack-item[gs-x="43"]{left:calc(var(--cellw, 6px)*43)} .grid-stack > .grid-stack-item[gs-x="44"]{left:calc(var(--cellw, 6px)*44)} .grid-stack > .grid-stack-item[gs-x="45"]{left:calc(var(--cellw, 6px)*45)} .grid-stack > .grid-stack-item[gs-x="46"]{left:calc(var(--cellw, 6px)*46)} .grid-stack > .grid-stack-item[gs-x="47"]{left:calc(var(--cellw, 6px)*47)} .grid-stack > .grid-stack-item[gs-x="48"]{left:calc(var(--cellw, 6px)*48)} .grid-stack > .grid-stack-item[gs-x="49"]{left:calc(var(--cellw, 6px)*49)} .grid-stack > .grid-stack-item[gs-x="50"]{left:calc(var(--cellw, 6px)*50)} .grid-stack > .grid-stack-item[gs-x="51"]{left:calc(var(--cellw, 6px)*51)} .grid-stack > .grid-stack-item[gs-x="52"]{left:calc(var(--cellw, 6px)*52)} .grid-stack > .grid-stack-item[gs-x="53"]{left:calc(var(--cellw, 6px)*53)} .grid-stack > .grid-stack-item[gs-x="54"]{left:calc(var(--cellw, 6px)*54)} .grid-stack > .grid-stack-item[gs-x="55"]{left:calc(var(--cellw, 6px)*55)} .grid-stack > .grid-stack-item[gs-x="56"]{left:calc(var(--cellw, 6px)*56)} .grid-stack > .grid-stack-item[gs-x="57"]{left:calc(var(--cellw, 6px)*57)} .grid-stack > .grid-stack-item[gs-x="58"]{left:calc(var(--cellw, 6px)*58)} .grid-stack > .grid-stack-item[gs-x="59"]{left:calc(var(--cellw, 6px)*59)} .grid-stack > .grid-stack-item[gs-x="60"]{left:calc(var(--cellw, 6px)*60)} .grid-stack > .grid-stack-item[gs-x="61"]{left:calc(var(--cellw, 6px)*61)} .grid-stack > .grid-stack-item[gs-x="62"]{left:calc(var(--cellw, 6px)*62)} .grid-stack > .grid-stack-item[gs-x="63"]{left:calc(var(--cellw, 6px)*63)} .grid-stack > .grid-stack-item[gs-x="64"]{left:calc(var(--cellw, 6px)*64)} .grid-stack > .grid-stack-item[gs-x="65"]{left:calc(var(--cellw, 6px)*65)} .grid-stack > .grid-stack-item[gs-x="66"]{left:calc(var(--cellw, 6px)*66)} .grid-stack > .grid-stack-item[gs-x="67"]{left:calc(var(--cellw, 6px)*67)} .grid-stack > .grid-stack-item[gs-x="68"]{left:calc(var(--cellw, 6px)*68)} .grid-stack > .grid-stack-item[gs-x="69"]{left:calc(var(--cellw, 6px)*69)} .grid-stack > .grid-stack-item[gs-x="70"]{left:calc(var(--cellw, 6px)*70)} .grid-stack > .grid-stack-item[gs-x="71"]{left:calc(var(--cellw, 6px)*71)} .grid-stack > .grid-stack-item[gs-x="72"]{left:calc(var(--cellw, 6px)*72)} .grid-stack > .grid-stack-item[gs-x="73"]{left:calc(var(--cellw, 6px)*73)} .grid-stack > .grid-stack-item[gs-x="74"]{left:calc(var(--cellw, 6px)*74)} .grid-stack > .grid-stack-item[gs-x="75"]{left:calc(var(--cellw, 6px)*75)} .grid-stack > .grid-stack-item[gs-x="76"]{left:calc(var(--cellw, 6px)*76)} .grid-stack > .grid-stack-item[gs-x="77"]{left:calc(var(--cellw, 6px)*77)} .grid-stack > .grid-stack-item[gs-x="78"]{left:calc(var(--cellw, 6px)*78)} .grid-stack > .grid-stack-item[gs-x="79"]{left:calc(var(--cellw, 6px)*79)} .grid-stack > .grid-stack-item[gs-x="80"]{left:calc(var(--cellw, 6px)*80)} .grid-stack > .grid-stack-item[gs-x="81"]{left:calc(var(--cellw, 6px)*81)} .grid-stack > .grid-stack-item[gs-x="82"]{left:calc(var(--cellw, 6px)*82)} .grid-stack > .grid-stack-item[gs-x="83"]{left:calc(var(--cellw, 6px)*83)} .grid-stack > .grid-stack-item[gs-x="84"]{left:calc(var(--cellw, 6px)*84)} .grid-stack > .grid-stack-item[gs-x="85"]{left:calc(var(--cellw, 6px)*85)} .grid-stack > .grid-stack-item[gs-x="86"]{left:calc(var(--cellw, 6px)*86)} .grid-stack > .grid-stack-item[gs-x="87"]{left:calc(var(--cellw, 6px)*87)} .grid-stack > .grid-stack-item[gs-x="88"]{left:calc(var(--cellw, 6px)*88)} .grid-stack > .grid-stack-item[gs-x="89"]{left:calc(var(--cellw, 6px)*89)} .grid-stack > .grid-stack-item[gs-x="90"]{left:calc(var(--cellw, 6px)*90)} .grid-stack > .grid-stack-item[gs-x="91"]{left:calc(var(--cellw, 6px)*91)} .grid-stack > .grid-stack-item[gs-x="92"]{left:calc(var(--cellw, 6px)*92)} .grid-stack > .grid-stack-item[gs-x="93"]{left:calc(var(--cellw, 6px)*93)} .grid-stack > .grid-stack-item[gs-x="94"]{left:calc(var(--cellw, 6px)*94)} .grid-stack > .grid-stack-item[gs-x="95"]{left:calc(var(--cellw, 6px)*95)} .grid-stack > .grid-stack-item[gs-x="96"]{left:calc(var(--cellw, 6px)*96)} .grid-stack > .grid-stack-item[gs-x="97"]{left:calc(var(--cellw, 6px)*97)} .grid-stack > .grid-stack-item[gs-x="98"]{left:calc(var(--cellw, 6px)*98)} .grid-stack > .grid-stack-item[gs-x="99"]{left:calc(var(--cellw, 6px)*99)} .grid-stack > .grid-stack-item[gs-x="100"]{left:calc(var(--cellw, 6px)*100)} .grid-stack > .grid-stack-item[gs-x="101"]{left:calc(var(--cellw, 6px)*101)} .grid-stack > .grid-stack-item[gs-x="102"]{left:calc(var(--cellw, 6px)*102)} .grid-stack > .grid-stack-item[gs-x="103"]{left:calc(var(--cellw, 6px)*103)} .grid-stack > .grid-stack-item[gs-x="104"]{left:calc(var(--cellw, 6px)*104)} .grid-stack > .grid-stack-item[gs-x="105"]{left:calc(var(--cellw, 6px)*105)} .grid-stack > .grid-stack-item[gs-x="106"]{left:calc(var(--cellw, 6px)*106)} .grid-stack > .grid-stack-item[gs-x="107"]{left:calc(var(--cellw, 6px)*107)} .grid-stack > .grid-stack-item[gs-x="108"]{left:calc(var(--cellw, 6px)*108)} .grid-stack > .grid-stack-item[gs-x="109"]{left:calc(var(--cellw, 6px)*109)} .grid-stack > .grid-stack-item[gs-x="110"]{left:calc(var(--cellw, 6px)*110)} .grid-stack > .grid-stack-item[gs-x="111"]{left:calc(var(--cellw, 6px)*111)} .grid-stack > .grid-stack-item[gs-x="112"]{left:calc(var(--cellw, 6px)*112)} .grid-stack > .grid-stack-item[gs-x="113"]{left:calc(var(--cellw, 6px)*113)} .grid-stack > .grid-stack-item[gs-x="114"]{left:calc(var(--cellw, 6px)*114)} .grid-stack > .grid-stack-item[gs-x="115"]{left:calc(var(--cellw, 6px)*115)} .grid-stack > .grid-stack-item[gs-x="116"]{left:calc(var(--cellw, 6px)*116)} .grid-stack > .grid-stack-item[gs-x="117"]{left:calc(var(--cellw, 6px)*117)} .grid-stack > .grid-stack-item[gs-x="118"]{left:calc(var(--cellw, 6px)*118)} .grid-stack > .grid-stack-item[gs-x="119"]{left:calc(var(--cellw, 6px)*119)} .grid-stack > .grid-stack-item[gs-x="120"]{left:calc(var(--cellw, 6px)*120)} .grid-stack > .grid-stack-item[gs-x="121"]{left:calc(var(--cellw, 6px)*121)} .grid-stack > .grid-stack-item[gs-x="122"]{left:calc(var(--cellw, 6px)*122)} .grid-stack > .grid-stack-item[gs-x="123"]{left:calc(var(--cellw, 6px)*123)} .grid-stack > .grid-stack-item[gs-x="124"]{left:calc(var(--cellw, 6px)*124)} .grid-stack > .grid-stack-item[gs-x="125"]{left:calc(var(--cellw, 6px)*125)} .grid-stack > .grid-stack-item[gs-x="126"]{left:calc(var(--cellw, 6px)*126)} .grid-stack > .grid-stack-item[gs-x="127"]{left:calc(var(--cellw, 6px)*127)} .grid-stack > .grid-stack-item[gs-x="128"]{left:calc(var(--cellw, 6px)*128)} .grid-stack > .grid-stack-item[gs-x="129"]{left:calc(var(--cellw, 6px)*129)} .grid-stack > .grid-stack-item[gs-x="130"]{left:calc(var(--cellw, 6px)*130)} .grid-stack > .grid-stack-item[gs-x="131"]{left:calc(var(--cellw, 6px)*131)} .grid-stack > .grid-stack-item[gs-x="132"]{left:calc(var(--cellw, 6px)*132)} .grid-stack > .grid-stack-item[gs-x="133"]{left:calc(var(--cellw, 6px)*133)} .grid-stack > .grid-stack-item[gs-x="134"]{left:calc(var(--cellw, 6px)*134)} .grid-stack > .grid-stack-item[gs-x="135"]{left:calc(var(--cellw, 6px)*135)} .grid-stack > .grid-stack-item[gs-x="136"]{left:calc(var(--cellw, 6px)*136)} .grid-stack > .grid-stack-item[gs-x="137"]{left:calc(var(--cellw, 6px)*137)} .grid-stack > .grid-stack-item[gs-x="138"]{left:calc(var(--cellw, 6px)*138)} .grid-stack > .grid-stack-item[gs-x="139"]{left:calc(var(--cellw, 6px)*139)} .grid-stack > .grid-stack-item[gs-x="140"]{left:calc(var(--cellw, 6px)*140)} .grid-stack > .grid-stack-item[gs-x="141"]{left:calc(var(--cellw, 6px)*141)} .grid-stack > .grid-stack-item[gs-x="142"]{left:calc(var(--cellw, 6px)*142)} .grid-stack > .grid-stack-item[gs-x="143"]{left:calc(var(--cellw, 6px)*143)} .grid-stack > .grid-stack-item[gs-x="144"]{left:calc(var(--cellw, 6px)*144)} .grid-stack > .grid-stack-item[gs-x="145"]{left:calc(var(--cellw, 6px)*145)} .grid-stack > .grid-stack-item[gs-x="146"]{left:calc(var(--cellw, 6px)*146)} .grid-stack > .grid-stack-item[gs-x="147"]{left:calc(var(--cellw, 6px)*147)} .grid-stack > .grid-stack-item[gs-x="148"]{left:calc(var(--cellw, 6px)*148)} .grid-stack > .grid-stack-item[gs-x="149"]{left:calc(var(--cellw, 6px)*149)} .grid-stack > .grid-stack-item[gs-x="150"]{left:calc(var(--cellw, 6px)*150)} .grid-stack > .grid-stack-item[gs-x="151"]{left:calc(var(--cellw, 6px)*151)} .grid-stack > .grid-stack-item[gs-x="152"]{left:calc(var(--cellw, 6px)*152)} .grid-stack > .grid-stack-item[gs-x="153"]{left:calc(var(--cellw, 6px)*153)} .grid-stack > .grid-stack-item[gs-x="154"]{left:calc(var(--cellw, 6px)*154)} .grid-stack > .grid-stack-item[gs-x="155"]{left:calc(var(--cellw, 6px)*155)} .grid-stack > .grid-stack-item[gs-x="156"]{left:calc(var(--cellw, 6px)*156)} .grid-stack > .grid-stack-item[gs-x="157"]{left:calc(var(--cellw, 6px)*157)} .grid-stack > .grid-stack-item[gs-x="158"]{left:calc(var(--cellw, 6px)*158)} .grid-stack > .grid-stack-item[gs-x="159"]{left:calc(var(--cellw, 6px)*159)} .grid-stack > .grid-stack-item[gs-x="160"]{left:calc(var(--cellw, 6px)*160)} .grid-stack > .grid-stack-item[gs-x="161"]{left:calc(var(--cellw, 6px)*161)} .grid-stack > .grid-stack-item[gs-x="162"]{left:calc(var(--cellw, 6px)*162)} .grid-stack > .grid-stack-item[gs-x="163"]{left:calc(var(--cellw, 6px)*163)} .grid-stack > .grid-stack-item[gs-x="164"]{left:calc(var(--cellw, 6px)*164)} .grid-stack > .grid-stack-item[gs-x="165"]{left:calc(var(--cellw, 6px)*165)} .grid-stack > .grid-stack-item[gs-x="166"]{left:calc(var(--cellw, 6px)*166)} .grid-stack > .grid-stack-item[gs-x="167"]{left:calc(var(--cellw, 6px)*167)} .grid-stack > .grid-stack-item[gs-x="168"]{left:calc(var(--cellw, 6px)*168)} .grid-stack > .grid-stack-item[gs-x="169"]{left:calc(var(--cellw, 6px)*169)} .grid-stack > .grid-stack-item[gs-x="170"]{left:calc(var(--cellw, 6px)*170)} .grid-stack > .grid-stack-item[gs-x="171"]{left:calc(var(--cellw, 6px)*171)} .grid-stack > .grid-stack-item[gs-x="172"]{left:calc(var(--cellw, 6px)*172)} .grid-stack > .grid-stack-item[gs-x="173"]{left:calc(var(--cellw, 6px)*173)} .grid-stack > .grid-stack-item[gs-x="174"]{left:calc(var(--cellw, 6px)*174)} .grid-stack > .grid-stack-item[gs-x="175"]{left:calc(var(--cellw, 6px)*175)} .grid-stack > .grid-stack-item[gs-x="176"]{left:calc(var(--cellw, 6px)*176)} .grid-stack > .grid-stack-item[gs-x="177"]{left:calc(var(--cellw, 6px)*177)} .grid-stack > .grid-stack-item[gs-x="178"]{left:calc(var(--cellw, 6px)*178)} .grid-stack > .grid-stack-item[gs-x="179"]{left:calc(var(--cellw, 6px)*179)} .grid-stack > .grid-stack-item[gs-x="180"]{left:calc(var(--cellw, 6px)*180)} .grid-stack > .grid-stack-item[gs-x="181"]{left:calc(var(--cellw, 6px)*181)} .grid-stack > .grid-stack-item[gs-x="182"]{left:calc(var(--cellw, 6px)*182)} .grid-stack > .grid-stack-item[gs-x="183"]{left:calc(var(--cellw, 6px)*183)} .grid-stack > .grid-stack-item[gs-x="184"]{left:calc(var(--cellw, 6px)*184)} .grid-stack > .grid-stack-item[gs-x="185"]{left:calc(var(--cellw, 6px)*185)} .grid-stack > .grid-stack-item[gs-x="186"]{left:calc(var(--cellw, 6px)*186)} .grid-stack > .grid-stack-item[gs-x="187"]{left:calc(var(--cellw, 6px)*187)} .grid-stack > .grid-stack-item[gs-x="188"]{left:calc(var(--cellw, 6px)*188)} .grid-stack > .grid-stack-item[gs-x="189"]{left:calc(var(--cellw, 6px)*189)} .grid-stack > .grid-stack-item[gs-x="190"]{left:calc(var(--cellw, 6px)*190)} .grid-stack > .grid-stack-item[gs-x="191"]{left:calc(var(--cellw, 6px)*191)} .grid-stack > .grid-stack-item[gs-x="192"]{left:calc(var(--cellw, 6px)*192)} .grid-stack > .grid-stack-item[gs-x="193"]{left:calc(var(--cellw, 6px)*193)} .grid-stack > .grid-stack-item[gs-x="194"]{left:calc(var(--cellw, 6px)*194)} .grid-stack > .grid-stack-item[gs-x="195"]{left:calc(var(--cellw, 6px)*195)} .grid-stack > .grid-stack-item[gs-x="196"]{left:calc(var(--cellw, 6px)*196)} .grid-stack > .grid-stack-item[gs-x="197"]{left:calc(var(--cellw, 6px)*197)} .grid-stack > .grid-stack-item[gs-x="198"]{left:calc(var(--cellw, 6px)*198)} .grid-stack > .grid-stack-item[gs-x="199"]{left:calc(var(--cellw, 6px)*199)} .grid-stack > .grid-stack-item[gs-x="200"]{left:calc(var(--cellw, 6px)*200)} .grid-stack > .grid-stack-item[gs-x="201"]{left:calc(var(--cellw, 6px)*201)} .grid-stack > .grid-stack-item[gs-x="202"]{left:calc(var(--cellw, 6px)*202)} .grid-stack > .grid-stack-item[gs-x="203"]{left:calc(var(--cellw, 6px)*203)} .grid-stack > .grid-stack-item[gs-x="204"]{left:calc(var(--cellw, 6px)*204)} .grid-stack > .grid-stack-item[gs-x="205"]{left:calc(var(--cellw, 6px)*205)} .grid-stack > .grid-stack-item[gs-x="206"]{left:calc(var(--cellw, 6px)*206)} .grid-stack > .grid-stack-item[gs-x="207"]{left:calc(var(--cellw, 6px)*207)} .grid-stack > .grid-stack-item[gs-x="208"]{left:calc(var(--cellw, 6px)*208)} .grid-stack > .grid-stack-item[gs-x="209"]{left:calc(var(--cellw, 6px)*209)} .grid-stack > .grid-stack-item[gs-x="210"]{left:calc(var(--cellw, 6px)*210)} .grid-stack > .grid-stack-item[gs-x="211"]{left:calc(var(--cellw, 6px)*211)} .grid-stack > .grid-stack-item[gs-x="212"]{left:calc(var(--cellw, 6px)*212)} .grid-stack > .grid-stack-item[gs-x="213"]{left:calc(var(--cellw, 6px)*213)} .grid-stack > .grid-stack-item[gs-x="214"]{left:calc(var(--cellw, 6px)*214)} .grid-stack > .grid-stack-item[gs-x="215"]{left:calc(var(--cellw, 6px)*215)} .grid-stack > .grid-stack-item[gs-x="216"]{left:calc(var(--cellw, 6px)*216)} .grid-stack > .grid-stack-item[gs-x="217"]{left:calc(var(--cellw, 6px)*217)} .grid-stack > .grid-stack-item[gs-x="218"]{left:calc(var(--cellw, 6px)*218)} .grid-stack > .grid-stack-item[gs-x="219"]{left:calc(var(--cellw, 6px)*219)} .grid-stack > .grid-stack-item[gs-x="220"]{left:calc(var(--cellw, 6px)*220)} .grid-stack > .grid-stack-item[gs-x="221"]{left:calc(var(--cellw, 6px)*221)} .grid-stack > .grid-stack-item[gs-x="222"]{left:calc(var(--cellw, 6px)*222)} .grid-stack > .grid-stack-item[gs-x="223"]{left:calc(var(--cellw, 6px)*223)} .grid-stack > .grid-stack-item[gs-x="224"]{left:calc(var(--cellw, 6px)*224)} .grid-stack > .grid-stack-item[gs-x="225"]{left:calc(var(--cellw, 6px)*225)} .grid-stack > .grid-stack-item[gs-x="226"]{left:calc(var(--cellw, 6px)*226)} .grid-stack > .grid-stack-item[gs-x="227"]{left:calc(var(--cellw, 6px)*227)} .grid-stack > .grid-stack-item[gs-x="228"]{left:calc(var(--cellw, 6px)*228)} .grid-stack > .grid-stack-item[gs-x="229"]{left:calc(var(--cellw, 6px)*229)} .grid-stack > .grid-stack-item[gs-x="230"]{left:calc(var(--cellw, 6px)*230)} .grid-stack > .grid-stack-item[gs-x="231"]{left:calc(var(--cellw, 6px)*231)} .grid-stack > .grid-stack-item[gs-x="232"]{left:calc(var(--cellw, 6px)*232)} .grid-stack > .grid-stack-item[gs-x="233"]{left:calc(var(--cellw, 6px)*233)} .grid-stack > .grid-stack-item[gs-x="234"]{left:calc(var(--cellw, 6px)*234)} .grid-stack > .grid-stack-item[gs-x="235"]{left:calc(var(--cellw, 6px)*235)} .grid-stack > .grid-stack-item[gs-x="236"]{left:calc(var(--cellw, 6px)*236)} .grid-stack > .grid-stack-item[gs-x="237"]{left:calc(var(--cellw, 6px)*237)} .grid-stack > .grid-stack-item[gs-x="238"]{left:calc(var(--cellw, 6px)*238)} .grid-stack > .grid-stack-item[gs-x="239"]{left:calc(var(--cellw, 6px)*239)} .grid-stack > .grid-stack-item[gs-x="240"]{left:calc(var(--cellw, 6px)*240)} .grid-stack > .grid-stack-item[gs-x="241"]{left:calc(var(--cellw, 6px)*241)} .grid-stack > .grid-stack-item[gs-x="242"]{left:calc(var(--cellw, 6px)*242)} .grid-stack > .grid-stack-item[gs-x="243"]{left:calc(var(--cellw, 6px)*243)} .grid-stack > .grid-stack-item[gs-x="244"]{left:calc(var(--cellw, 6px)*244)} .grid-stack > .grid-stack-item[gs-x="245"]{left:calc(var(--cellw, 6px)*245)} .grid-stack > .grid-stack-item[gs-x="246"]{left:calc(var(--cellw, 6px)*246)} .grid-stack > .grid-stack-item[gs-x="247"]{left:calc(var(--cellw, 6px)*247)} .grid-stack > .grid-stack-item[gs-x="248"]{left:calc(var(--cellw, 6px)*248)} .grid-stack > .grid-stack-item[gs-x="249"]{left:calc(var(--cellw, 6px)*249)} .grid-stack > .grid-stack-item[gs-x="250"]{left:calc(var(--cellw, 6px)*250)} .grid-stack > .grid-stack-item[gs-x="251"]{left:calc(var(--cellw, 6px)*251)} .grid-stack > .grid-stack-item[gs-x="252"]{left:calc(var(--cellw, 6px)*252)} .grid-stack > .grid-stack-item[gs-x="253"]{left:calc(var(--cellw, 6px)*253)} .grid-stack > .grid-stack-item[gs-x="254"]{left:calc(var(--cellw, 6px)*254)} .grid-stack > .grid-stack-item[gs-x="255"]{left:calc(var(--cellw, 6px)*255)} .grid-stack > .grid-stack-item[gs-x="256"]{left:calc(var(--cellw, 6px)*256)} .grid-stack > .grid-stack-item[gs-x="257"]{left:calc(var(--cellw, 6px)*257)} .grid-stack > .grid-stack-item[gs-x="258"]{left:calc(var(--cellw, 6px)*258)} .grid-stack > .grid-stack-item[gs-x="259"]{left:calc(var(--cellw, 6px)*259)} .grid-stack > .grid-stack-item[gs-x="260"]{left:calc(var(--cellw, 6px)*260)} .grid-stack > .grid-stack-item[gs-x="261"]{left:calc(var(--cellw, 6px)*261)} .grid-stack > .grid-stack-item[gs-x="262"]{left:calc(var(--cellw, 6px)*262)} .grid-stack > .grid-stack-item[gs-x="263"]{left:calc(var(--cellw, 6px)*263)} .grid-stack > .grid-stack-item[gs-x="264"]{left:calc(var(--cellw, 6px)*264)} .grid-stack > .grid-stack-item[gs-x="265"]{left:calc(var(--cellw, 6px)*265)} .grid-stack > .grid-stack-item[gs-x="266"]{left:calc(var(--cellw, 6px)*266)} .grid-stack > .grid-stack-item[gs-x="267"]{left:calc(var(--cellw, 6px)*267)} .grid-stack > .grid-stack-item[gs-x="268"]{left:calc(var(--cellw, 6px)*268)} .grid-stack > .grid-stack-item[gs-x="269"]{left:calc(var(--cellw, 6px)*269)} .grid-stack > .grid-stack-item[gs-x="270"]{left:calc(var(--cellw, 6px)*270)} .grid-stack > .grid-stack-item[gs-x="271"]{left:calc(var(--cellw, 6px)*271)} .grid-stack > .grid-stack-item[gs-x="272"]{left:calc(var(--cellw, 6px)*272)} .grid-stack > .grid-stack-item[gs-x="273"]{left:calc(var(--cellw, 6px)*273)} .grid-stack > .grid-stack-item[gs-x="274"]{left:calc(var(--cellw, 6px)*274)} .grid-stack > .grid-stack-item[gs-x="275"]{left:calc(var(--cellw, 6px)*275)} .grid-stack > .grid-stack-item[gs-x="276"]{left:calc(var(--cellw, 6px)*276)} .grid-stack > .grid-stack-item[gs-x="277"]{left:calc(var(--cellw, 6px)*277)} .grid-stack > .grid-stack-item[gs-x="278"]{left:calc(var(--cellw, 6px)*278)} .grid-stack > .grid-stack-item[gs-x="279"]{left:calc(var(--cellw, 6px)*279)} .grid-stack > .grid-stack-item[gs-x="280"]{left:calc(var(--cellw, 6px)*280)} .grid-stack > .grid-stack-item[gs-x="281"]{left:calc(var(--cellw, 6px)*281)} .grid-stack > .grid-stack-item[gs-x="282"]{left:calc(var(--cellw, 6px)*282)} .grid-stack > .grid-stack-item[gs-x="283"]{left:calc(var(--cellw, 6px)*283)} .grid-stack > .grid-stack-item[gs-x="284"]{left:calc(var(--cellw, 6px)*284)} .grid-stack > .grid-stack-item[gs-x="285"]{left:calc(var(--cellw, 6px)*285)} .grid-stack > .grid-stack-item[gs-x="286"]{left:calc(var(--cellw, 6px)*286)} .grid-stack > .grid-stack-item[gs-x="287"]{left:calc(var(--cellw, 6px)*287)} .grid-stack > .grid-stack-item[gs-x="288"]{left:calc(var(--cellw, 6px)*288)} .grid-stack > .grid-stack-item[gs-x="289"]{left:calc(var(--cellw, 6px)*289)} .grid-stack > .grid-stack-item[gs-x="290"]{left:calc(var(--cellw, 6px)*290)} .grid-stack > .grid-stack-item[gs-x="291"]{left:calc(var(--cellw, 6px)*291)} .grid-stack > .grid-stack-item[gs-x="292"]{left:calc(var(--cellw, 6px)*292)} .grid-stack > .grid-stack-item[gs-x="293"]{left:calc(var(--cellw, 6px)*293)} .grid-stack > .grid-stack-item[gs-x="294"]{left:calc(var(--cellw, 6px)*294)} .grid-stack > .grid-stack-item[gs-x="295"]{left:calc(var(--cellw, 6px)*295)} .grid-stack > .grid-stack-item[gs-x="296"]{left:calc(var(--cellw, 6px)*296)} .grid-stack > .grid-stack-item[gs-x="297"]{left:calc(var(--cellw, 6px)*297)} .grid-stack > .grid-stack-item[gs-x="298"]{left:calc(var(--cellw, 6px)*298)} .grid-stack > .grid-stack-item[gs-x="299"]{left:calc(var(--cellw, 6px)*299)} .grid-stack > .grid-stack-item[gs-x="300"]{left:calc(var(--cellw, 6px)*300)} .grid-stack > .grid-stack-item[gs-x="301"]{left:calc(var(--cellw, 6px)*301)} .grid-stack > .grid-stack-item[gs-x="302"]{left:calc(var(--cellw, 6px)*302)} .grid-stack > .grid-stack-item[gs-x="303"]{left:calc(var(--cellw, 6px)*303)} .grid-stack > .grid-stack-item[gs-x="304"]{left:calc(var(--cellw, 6px)*304)} .grid-stack > .grid-stack-item[gs-x="305"]{left:calc(var(--cellw, 6px)*305)} .grid-stack > .grid-stack-item[gs-x="306"]{left:calc(var(--cellw, 6px)*306)} .grid-stack > .grid-stack-item[gs-x="307"]{left:calc(var(--cellw, 6px)*307)} .grid-stack > .grid-stack-item[gs-x="308"]{left:calc(var(--cellw, 6px)*308)} .grid-stack > .grid-stack-item[gs-x="309"]{left:calc(var(--cellw, 6px)*309)} .grid-stack > .grid-stack-item[gs-x="310"]{left:calc(var(--cellw, 6px)*310)} .grid-stack > .grid-stack-item[gs-x="311"]{left:calc(var(--cellw, 6px)*311)} .grid-stack > .grid-stack-item[gs-x="312"]{left:calc(var(--cellw, 6px)*312)} .grid-stack > .grid-stack-item[gs-x="313"]{left:calc(var(--cellw, 6px)*313)} .grid-stack > .grid-stack-item[gs-x="314"]{left:calc(var(--cellw, 6px)*314)} .grid-stack > .grid-stack-item[gs-x="315"]{left:calc(var(--cellw, 6px)*315)} .grid-stack > .grid-stack-item[gs-x="316"]{left:calc(var(--cellw, 6px)*316)} .grid-stack > .grid-stack-item[gs-x="317"]{left:calc(var(--cellw, 6px)*317)} .grid-stack > .grid-stack-item[gs-x="318"]{left:calc(var(--cellw, 6px)*318)} .grid-stack > .grid-stack-item[gs-x="319"]{left:calc(var(--cellw, 6px)*319)} .grid-stack > .grid-stack-item[gs-x="320"]{left:calc(var(--cellw, 6px)*320)} .grid-stack > .grid-stack-item[gs-x="321"]{left:calc(var(--cellw, 6px)*321)} .grid-stack > .grid-stack-item[gs-x="322"]{left:calc(var(--cellw, 6px)*322)} .grid-stack > .grid-stack-item[gs-x="323"]{left:calc(var(--cellw, 6px)*323)} .grid-stack > .grid-stack-item[gs-x="324"]{left:calc(var(--cellw, 6px)*324)} .grid-stack > .grid-stack-item[gs-x="325"]{left:calc(var(--cellw, 6px)*325)} .grid-stack > .grid-stack-item[gs-x="326"]{left:calc(var(--cellw, 6px)*326)} .grid-stack > .grid-stack-item[gs-x="327"]{left:calc(var(--cellw, 6px)*327)} .grid-stack > .grid-stack-item[gs-x="328"]{left:calc(var(--cellw, 6px)*328)} .grid-stack > .grid-stack-item[gs-x="329"]{left:calc(var(--cellw, 6px)*329)} .grid-stack > .grid-stack-item[gs-x="330"]{left:calc(var(--cellw, 6px)*330)} .grid-stack > .grid-stack-item[gs-x="331"]{left:calc(var(--cellw, 6px)*331)} .grid-stack > .grid-stack-item[gs-x="332"]{left:calc(var(--cellw, 6px)*332)} .grid-stack > .grid-stack-item[gs-x="333"]{left:calc(var(--cellw, 6px)*333)} .grid-stack > .grid-stack-item[gs-x="334"]{left:calc(var(--cellw, 6px)*334)} .grid-stack > .grid-stack-item[gs-x="335"]{left:calc(var(--cellw, 6px)*335)} .grid-stack > .grid-stack-item[gs-x="336"]{left:calc(var(--cellw, 6px)*336)} .grid-stack > .grid-stack-item[gs-x="337"]{left:calc(var(--cellw, 6px)*337)} .grid-stack > .grid-stack-item[gs-x="338"]{left:calc(var(--cellw, 6px)*338)} .grid-stack > .grid-stack-item[gs-x="339"]{left:calc(var(--cellw, 6px)*339)} .grid-stack > .grid-stack-item[gs-x="340"]{left:calc(var(--cellw, 6px)*340)} .grid-stack > .grid-stack-item[gs-x="341"]{left:calc(var(--cellw, 6px)*341)} .grid-stack > .grid-stack-item[gs-x="342"]{left:calc(var(--cellw, 6px)*342)} .grid-stack > .grid-stack-item[gs-x="343"]{left:calc(var(--cellw, 6px)*343)} .grid-stack > .grid-stack-item[gs-x="344"]{left:calc(var(--cellw, 6px)*344)} .grid-stack > .grid-stack-item[gs-x="345"]{left:calc(var(--cellw, 6px)*345)} .grid-stack > .grid-stack-item[gs-x="346"]{left:calc(var(--cellw, 6px)*346)} .grid-stack > .grid-stack-item[gs-x="347"]{left:calc(var(--cellw, 6px)*347)} .grid-stack > .grid-stack-item[gs-x="348"]{left:calc(var(--cellw, 6px)*348)} .grid-stack > .grid-stack-item[gs-x="349"]{left:calc(var(--cellw, 6px)*349)} .grid-stack > .grid-stack-item[gs-x="350"]{left:calc(var(--cellw, 6px)*350)} .grid-stack > .grid-stack-item[gs-x="351"]{left:calc(var(--cellw, 6px)*351)} .grid-stack > .grid-stack-item[gs-x="352"]{left:calc(var(--cellw, 6px)*352)} .grid-stack > .grid-stack-item[gs-x="353"]{left:calc(var(--cellw, 6px)*353)} .grid-stack > .grid-stack-item[gs-x="354"]{left:calc(var(--cellw, 6px)*354)} .grid-stack > .grid-stack-item[gs-x="355"]{left:calc(var(--cellw, 6px)*355)} .grid-stack > .grid-stack-item[gs-x="356"]{left:calc(var(--cellw, 6px)*356)} .grid-stack > .grid-stack-item[gs-x="357"]{left:calc(var(--cellw, 6px)*357)} .grid-stack > .grid-stack-item[gs-x="358"]{left:calc(var(--cellw, 6px)*358)} .grid-stack > .grid-stack-item[gs-x="359"]{left:calc(var(--cellw, 6px)*359)} .grid-stack > .grid-stack-item[gs-x="360"]{left:calc(var(--cellw, 6px)*360)} .grid-stack > .grid-stack-item[gs-x="361"]{left:calc(var(--cellw, 6px)*361)} .grid-stack > .grid-stack-item[gs-x="362"]{left:calc(var(--cellw, 6px)*362)} .grid-stack > .grid-stack-item[gs-x="363"]{left:calc(var(--cellw, 6px)*363)} .grid-stack > .grid-stack-item[gs-x="364"]{left:calc(var(--cellw, 6px)*364)} .grid-stack > .grid-stack-item[gs-x="365"]{left:calc(var(--cellw, 6px)*365)} .grid-stack > .grid-stack-item[gs-x="366"]{left:calc(var(--cellw, 6px)*366)} .grid-stack > .grid-stack-item[gs-x="367"]{left:calc(var(--cellw, 6px)*367)} .grid-stack > .grid-stack-item[gs-x="368"]{left:calc(var(--cellw, 6px)*368)} .grid-stack > .grid-stack-item[gs-x="369"]{left:calc(var(--cellw, 6px)*369)} .grid-stack > .grid-stack-item[gs-x="370"]{left:calc(var(--cellw, 6px)*370)} .grid-stack > .grid-stack-item[gs-x="371"]{left:calc(var(--cellw, 6px)*371)} .grid-stack > .grid-stack-item[gs-x="372"]{left:calc(var(--cellw, 6px)*372)} .grid-stack > .grid-stack-item[gs-x="373"]{left:calc(var(--cellw, 6px)*373)} .grid-stack > .grid-stack-item[gs-x="374"]{left:calc(var(--cellw, 6px)*374)} .grid-stack > .grid-stack-item[gs-x="375"]{left:calc(var(--cellw, 6px)*375)} .grid-stack > .grid-stack-item[gs-x="376"]{left:calc(var(--cellw, 6px)*376)} .grid-stack > .grid-stack-item[gs-x="377"]{left:calc(var(--cellw, 6px)*377)} .grid-stack > .grid-stack-item[gs-x="378"]{left:calc(var(--cellw, 6px)*378)} .grid-stack > .grid-stack-item[gs-x="379"]{left:calc(var(--cellw, 6px)*379)} .grid-stack > .grid-stack-item[gs-x="380"]{left:calc(var(--cellw, 6px)*380)} .grid-stack > .grid-stack-item[gs-x="381"]{left:calc(var(--cellw, 6px)*381)} .grid-stack > .grid-stack-item[gs-x="382"]{left:calc(var(--cellw, 6px)*382)} .grid-stack > .grid-stack-item[gs-x="383"]{left:calc(var(--cellw, 6px)*383)} .grid-stack > .grid-stack-item[gs-x="384"]{left:calc(var(--cellw, 6px)*384)} .grid-stack > .grid-stack-item[gs-x="385"]{left:calc(var(--cellw, 6px)*385)} .grid-stack > .grid-stack-item[gs-x="386"]{left:calc(var(--cellw, 6px)*386)} .grid-stack > .grid-stack-item[gs-x="387"]{left:calc(var(--cellw, 6px)*387)} .grid-stack > .grid-stack-item[gs-x="388"]{left:calc(var(--cellw, 6px)*388)} .grid-stack > .grid-stack-item[gs-x="389"]{left:calc(var(--cellw, 6px)*389)} .grid-stack > .grid-stack-item[gs-x="390"]{left:calc(var(--cellw, 6px)*390)} .grid-stack > .grid-stack-item[gs-x="391"]{left:calc(var(--cellw, 6px)*391)} .grid-stack > .grid-stack-item[gs-x="392"]{left:calc(var(--cellw, 6px)*392)} .grid-stack > .grid-stack-item[gs-x="393"]{left:calc(var(--cellw, 6px)*393)} .grid-stack > .grid-stack-item[gs-x="394"]{left:calc(var(--cellw, 6px)*394)} .grid-stack > .grid-stack-item[gs-x="395"]{left:calc(var(--cellw, 6px)*395)} .grid-stack > .grid-stack-item[gs-x="396"]{left:calc(var(--cellw, 6px)*396)} .grid-stack > .grid-stack-item[gs-x="397"]{left:calc(var(--cellw, 6px)*397)} .grid-stack > .grid-stack-item[gs-x="398"]{left:calc(var(--cellw, 6px)*398)} .grid-stack > .grid-stack-item[gs-x="399"]{left:calc(var(--cellw, 6px)*399)} .grid-stack > .grid-stack-item[gs-x="400"]{left:calc(var(--cellw, 6px)*400)} /* ── markets pane scrollbars (vert + horiz, always visible) ─── */ #pane-finance .live-scroll { overflow: scroll; scrollbar-width: thin; scrollbar-color: #39445f transparent; } #pane-finance .live-scroll::-webkit-scrollbar { width: 10px; height: 10px; } #pane-finance .live-scroll::-webkit-scrollbar-track { background: rgba(11, 15, 23, .55); border-radius: 6px; } #pane-finance .live-scroll::-webkit-scrollbar-thumb { background: #2b3550; border-radius: 6px; border: 2px solid var(--panel); } #pane-finance .live-scroll::-webkit-scrollbar-thumb:hover { background: var(--amber-dim); } #pane-finance .live-scroll::-webkit-scrollbar-corner { background: transparent; } /* keep fold sections a readable width — a narrow Markets pane scrolls horizontally instead of crushing the tiles */ #pane-finance .fold-sec { min-width: 620px; } /* the same thin, theme-matched scrollbars on other pane scroll areas (auto) */ .pane-body, .live-scroll { scrollbar-width: thin; scrollbar-color: #39445f transparent; } .pane-body::-webkit-scrollbar, .live-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .pane-body::-webkit-scrollbar-thumb, .live-scroll::-webkit-scrollbar-thumb { background: #2b3550; border-radius: 6px; border: 2px solid var(--panel); } .pane-body::-webkit-scrollbar-thumb:hover, .live-scroll::-webkit-scrollbar-thumb:hover { background: var(--amber-dim); } .pane-body::-webkit-scrollbar-track, .live-scroll::-webkit-scrollbar-track { background: transparent; } .pane-body::-webkit-scrollbar-corner, .live-scroll::-webkit-scrollbar-corner { background: transparent; } /* ── user-editable content panes (links + live) ──────────────── */ .cr-hdr { display: flex; align-items: center; gap: .3rem; margin-top: .12rem; } .cr-hdr .live-group-title { flex: 1; margin: 0; } .cr-hdr .cr-add, .pane-foot .cr-add { flex-shrink: 0; line-height: 1.1; font-size: .8rem; } .link-row { display: flex; align-items: center; gap: .22rem; } .link-row .live-btn { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .live-station .cr-del { margin-left: auto; } .cr-del { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: .66rem; padding: .14rem .2rem; opacity: 0; transition: opacity .12s; flex-shrink: 0; } .link-row:hover .cr-del, .live-station:hover .cr-del { opacity: 1; } .cr-del:hover { color: #ff7a6e; } .cr-form { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin: .2rem 0 .35rem; } .cr-form input, .cr-form select { background: #0d1420; border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: .18rem .4rem; font-size: .76rem; } .cr-form input { min-width: 0; } .cr-form input:focus, .cr-form select:focus { outline: none; border-color: var(--amber-dim); } .cr-form .fname { flex: 0 1 7rem; } .cr-form .furl { flex: 2 1 11rem; } .cr-form .fgrp { flex: 0 1 8rem; } .cr-form .fstream { flex: 1 1 12rem; } .cr-actions { display: flex; gap: .25rem; } .cr-actions .chip-btn { font-size: .72rem; padding: .16rem .5rem; } .pane-foot { display: flex; align-items: center; gap: .45rem; margin-top: .2rem; flex-wrap: wrap; } .pane-foot .pane-empty { margin: 0; } .cr-inline { display: inline-flex; align-items: center; gap: .18rem; } .cr-inline:hover .cr-del { opacity: 1; } /* ── in-dashboard viewer (links open here instead of a new tab) ── */ .emb { position: absolute; inset: 0; z-index: 200; display: flex; flex-direction: column; background: var(--bg); } .emb.hidden { display: none; } .emb-bar { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; padding: .28rem .55rem; border-bottom: 1px solid var(--line); background: #101624; font-size: .78rem; } .emb-title { color: var(--amber); font-weight: 600; white-space: nowrap; max-width: 26%; overflow: hidden; text-overflow: ellipsis; } .emb-url { color: var(--muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emb-btn { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: .1rem .55rem; cursor: pointer; font-size: .76rem; line-height: 1.25; flex-shrink: 0; } .emb-btn:hover { color: var(--amber); border-color: var(--amber-dim); } .emb-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; } /* ── suggestions widget (fleet pattern; ClockRadio amber) ── */ .suggest-btn { position: fixed; right: 1rem; bottom: 1.4rem; z-index: 1501; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); font-size: 1.15rem; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.4); line-height: 1; } .suggest-btn:hover { border-color: var(--amber); transform: scale(1.1); } .suggest-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.6); align-items: center; justify-content: center; } .suggest-overlay.active { display: flex; } .suggest-popup { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; width: min(420px, 92vw); position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.5); } .suggest-close { position: absolute; top: .5rem; right: .7rem; background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; line-height: 1; } .suggest-close:hover { color: var(--text); } .suggest-title { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; color: var(--text); } .suggest-sub { font-size: .75rem; color: var(--muted); margin-bottom: 1rem; } .suggest-textarea { width: 100%; min-height: 90px; background: #0d1420; border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: .5rem; font: inherit; resize: vertical; } .suggest-textarea:focus { outline: none; border-color: var(--amber); } .suggest-submit { margin-top: .6rem; border: none; border-radius: 6px; padding: .45rem 1rem; font-weight: 600; font-size: .85rem; cursor: pointer; background: linear-gradient(to right, var(--amber), #d97706); color: #0B0F17; } .suggest-submit:hover { opacity: .9; } .suggest-thanks { display: none; text-align: center; padding: 2rem 0; color: var(--amber); font-size: .9rem; } /* 📍 location chip select (Task A 2026-09-08) — blends into the chips row */ .loc-sel { background: transparent; border: none; color: inherit; font: inherit; cursor: pointer; max-width: 9.5em; text-overflow: ellipsis; padding: 0 .15rem; } .loc-sel:focus { outline: none; } .loc-sel option { background: #0d1420; color: var(--text); } /* 📈 Markets symbol-search dock (2026-09-08) — ＋ now opens a search field */ .fin-dock { display: none; padding: .35rem .45rem .45rem; border-bottom: 1px solid var(--line); background: var(--panel-2); } .fin-dock.open { display: block; } .fin-dock .fd-title { color: var(--muted); font-size: .64rem; margin-bottom: .28rem; } .fin-dock input { width: 100%; box-sizing: border-box; background: var(--panel-1); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: .24rem .4rem; font-size: .72rem; } .fin-dock input:focus { outline: none; border-color: var(--amber); } .fin-res { margin-top: .3rem; max-height: 140px; overflow: auto; } .fin-res .fr { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: .7rem; padding: .24rem .3rem; border-radius: 6px; cursor: pointer; } .fin-res .fr:hover, .fin-res .fr:focus-visible { background: rgba(255, 176, 0, .08); color: var(--amber); } .fin-res .fr .fr-sym { color: var(--muted); font-size: .62rem; } /* dock result states (2026-09-09): exact-index quick-map row + already-in-group */ .fin-res .fr.fr-idx { box-shadow: inset 2px 0 0 rgba(255, 176, 0, .6); } .fin-res .fr.fr-have { color: var(--muted); } .fin-res .fr.fr-have:hover, .fin-res .fr.fr-have:focus-visible { background: rgba(255, 176, 0, .05); color: var(--muted); } .fin-res .fr.fr-have .fr-sym { color: #3fb950; } .fin-res .empty { color: var(--muted); font-size: .66rem; padding: .2rem .3rem; } /* 📻 Live pane banner order select + mic state (2026-09-08) */ .live-sort { max-width: 6.4em; } .live-mic.on { border-color: var(--amber); color: var(--amber); background: rgba(255, 176, 0, .12); } .live-mic.on::after { content: ''; display: inline-block; width: .4rem; height: .4rem; margin-left: .18rem; border-radius: 50%; background: #f87171; animation: cr-blink 1.2s ease-in-out infinite; vertical-align: .05rem; } @keyframes cr-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* Markets split (2026-09-08): US and Global are separate panes now; each may sit as a narrow 1-2-tile column (the old combined pane's 620px fold-sec minimum is NOT applied to the split pane ids). */ #pane-markets-us .pane-body, #pane-markets-global .pane-body { padding: .06rem 0 .5rem; } /* no left/right air: charts run to the pane edges (Mike 2026-09-09) */ #pane-markets-us .live-scroll > :first-child .fold-bar, #pane-markets-global .live-scroll > :first-child .fold-bar { margin-top: 0; } /* banner → 'Indices' ~3px tighter (2026-09-09, Mike) */ #pane-markets-us .fold-sec, #pane-markets-global .fold-sec { min-width: 0; } /* Watchlist tile borders / Live controls / Portfolio rows / Links chips run flush to the pane's left+right edges like the Markets panes — inter-element gaps untouched (2026-09-09, Mike) */ #pane-watchlist .pane-body, #pane-live .pane-body { padding: .38rem 0 .5rem; } #pane-favorites .pane-body, #pane-links .pane-body { padding: .12rem 0 .5rem; } /* 2px more out under the banner (2026-09-09, Mike) */ /* Portfolio: history chart pinned at the top — keeps its space (flex:0 0 auto); the Positions list below lives in .live-scroll and gets its own vertical scrollbar when rows overflow (2026-09-09, Mike) */ #pane-favorites .pf-pin { flex: 0 0 auto; overflow: hidden; } /* Portfolio: a couple more px of air above the Positions bar so the chart's date row never crowds it (2026-09-09, Mike — after the leading fix the labels cleared the clip edge but still read tight). */ #pane-favorites .live-scroll > :first-child .fold-bar { margin-top: .34rem; } /* Live: volume control → first group (~2px tighter per pass) */ #pane-live .vol-row { margin-bottom: 0; } #pane-live .live-scroll > :first-child.cr-hdr { margin-top: .06rem; } /* 🎙 Voice monitor pane (2026-09-08) — signal meter + heard + action */ .voice-state { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .voice-state.on { color: var(--amber); } .voice-meter { height: .5rem; background: #0d1420; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex-shrink: 0; } .voice-meter-fill { width: 0; height: 100%; background: #39445f; border-radius: 999px; transition: width .06s linear; } .voice-meter-fill.live { background: linear-gradient(to right, #3fb950, var(--amber)); } .voice-cap { font-size: .56rem; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; } .voice-heard { font-size: .74rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: .9rem; } .voice-action { font-size: .72rem; color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: .9rem; } .voice-actrow { display: flex; align-items: center; justify-content: space-between; gap: .4rem; } .voice-copy { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .68rem; padding: .05rem .35rem; border-radius: 4px; line-height: 1; } .voice-copy:hover { color: var(--amber); background: rgba(255, 176, 0, .08); } .voice-hist { overflow-y: scroll; font-size: .62rem; color: var(--muted); flex: 1 1 3rem; min-height: 2.2rem; max-height: 40%; border-top: 1px dashed #1c2333; padding-top: .18rem; scrollbar-width: thin; scrollbar-color: #39445f transparent; user-select: text; cursor: text; } .voice-hist::-webkit-scrollbar { width: 8px; } .voice-hist::-webkit-scrollbar-thumb { background: #39445f; border-radius: 4px; } .voice-hist::-webkit-scrollbar-track { background: transparent; } .voice-hist.no-scroll { scrollbar-width: none; } .voice-hist.no-scroll::-webkit-scrollbar { width: 0; } .voice-row { white-space: normal; overflow-wrap: anywhere; padding: .06rem 0; user-select: text; cursor: text; } /* whole-page voice (2026-09-08): brief amber ring on the pane voice just opened / brought to front ("show news" etc) */ .pane-ping { animation: cr-ping 1.5s ease-out 2; border-radius: 10px; } @keyframes cr-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 176, 0, .5); } 100% { box-shadow: 0 0 0 16px rgba(255, 176, 0, 0); } } /* ── header control hit targets (2026-09-08, Mike) ───────────── The pill banner is deliberately thin, which made the — ▢ ✕ window controls (and the restore-size ▢) hard to hit. Instead of sizing them relative to the banner (font/line-height), each button now gets a FIXED pixel hit box — tune ONE number (--pane-btn-hit), not banner-relative units. */ :root { --pane-btn-hit: 26px; } /* banner 2px shorter top & bottom — 30→26 (2026-09-09, Mike); title font/centering untouched */ .pane-actions .pane-btn { min-width: var(--pane-btn-hit); min-height: var(--pane-btn-hit); display: inline-flex; align-items: center; justify-content: center; padding: 0 .2rem; font-size: .86rem; } .pane-actions .pane-btn + .pane-btn { margin-left: -.3rem; } /* ✕ pulls under the toggle's right pad: glyph gap shrinks (~22→~12px), boxes only overlap on hover */ /* markets: just-added tile confirmation (2026-09-08) — brief amber pulse */ .fin-tile.fin-new { animation: cr-finnew 1.1s ease-out 2; } @keyframes cr-finnew { 0% { background: rgba(255, 176, 0, .35); box-shadow: 0 0 0 1px rgba(255, 176, 0, .55); } 100% { background: #131a26; box-shadow: 0 0 0 1px transparent; } } /* 🎙 Voice pane visualizers (2026-09-08) */ .voice-wave, .voice-spec, .voice-specg { display: block; width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #0a1018; flex-shrink: 0; } .voice-specg { margin-top: .05rem; } /* display-resolution reference layer — all native-size outlines share the workspace's active zoom transform; they are behind panes and inert */ #workspace { position: relative; } .canvas-display-references { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: hidden; width: 0; height: 0; } .canvas-display-rect { position: absolute; left: 0; top: 0; border: 1px solid rgba(126, 146, 190, .16); border-radius: 2px; box-sizing: border-box; } .foot-undo { display: inline-flex; align-items: center; gap: .3rem; margin-left: .35rem; } .foot-undo .chip-btn:disabled { opacity: .38; cursor: default; } .foot-savelayout { display: inline-flex; align-items: center; margin-left: .35rem; } .foot-savelayout .chip-btn.saved { border-color: #FFB000; color: #FFB000; } .undo-depth { color: var(--muted); font-size: .7rem; min-width: 2.2rem; } .canvas-display-rect.largest { border-color: rgba(155, 171, 211, .22); } /* small-screen AUTHORING guides (2026-09-13) — a SEPARATE layer above the panes, because the outlines above live at z-index 0 and `.grid-stack-item` is z-index 1, so a small outline is buried the moment a pane covers it. Clipped to the canvas so it can never draw over the header or the footer. 150 clears the grid items (1) and GridStack's drag raise (~100) while staying under the modals (2100). */ .canvas-screen-guides { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; overflow: hidden; display: none; } body.dev .canvas-screen-guides { display: block; } .screen-guide { position: absolute; left: 0; top: 0; box-sizing: border-box; border: 1px dashed rgba(157, 171, 204, .34); border-radius: 3px; } .screen-guide-band { position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; border: 1px dashed rgba(198, 214, 255, .55); border-radius: 3px; } .screen-guide-tag { position: absolute; left: 2px; top: 1px; white-space: nowrap; color: rgba(206, 218, 240, .78); background: rgba(11, 15, 23, .82); padding: 0 .3em; font: 500 11px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; } .screen-guide-band .screen-guide-tag { top: auto; bottom: 1px; color: rgba(222, 232, 252, .9); } .canvas-display-label { position: absolute; color: rgba(157, 171, 204, .30); padding: 0 .15em; background: #0b0f17; font: 500 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 1px 2px #0b0f17, 1px 0 2px #0b0f17, -1px 0 2px #0b0f17; } .canvas-display-label-h { left: 50%; bottom: -1px; transform: translate(-50%, 50%); } .canvas-display-label-v { right: -1px; top: 50%; transform: translate(50%, -50%) rotate(-90deg); transform-origin: center center; } /* ── VIOLATION OVERLAY (2026-09-13, Mike) ───────────────────────────────────── "can you add a transparent overlay showing where the violations occur (so I can fix them intelligently)?" A THIRD reference layer, ABOVE the panes: the display references (z 0) sit behind them and the authoring guides (z 150) are thin dashed outlines, but a violation has to be LOUD, so it paints over the pane edge it describes. z 155 clears the grid items (1) and GridStack's drag raise (~100) while staying under the modals (2100) and the guides' own tags. Everything here is TRANSPARENT (10-22% alpha fills) and inert — the marks are annotations, not UI. Red = content lost (under the footer, off the top/left edge, text cut by a pane). Amber = off-display or only-window-relative (a deliberate bleed, a `vw` font) — see paintViolations() in js/templates.js. */ .canvas-violations { position: fixed; left: 0; top: 0; z-index: 155; pointer-events: none; overflow: hidden; display: none; } body.dev .canvas-violations { display: block; } .viol-mark { position: absolute; box-sizing: border-box; border-radius: 2px; } .viol-under { background: rgba(255, 64, 64, .22); border: 1px solid rgba(255, 96, 96, .95); } .viol-off { background: rgba(255, 64, 64, .30); border: 1px solid rgba(255, 96, 96, .95); } .viol-text { background: rgba(255, 64, 64, .16); border: 1px dashed rgba(255, 120, 120, .95); } /* reachable only by SCROLLING a pane body — amber, and the Live pane never gets one (its own scroller is by design: js/templates.js paintViolations) */ .viol-scroll { background: rgba(255, 176, 0, .10); border: 1px dashed rgba(255, 176, 0, .7); } .viol-vw { background: rgba(255, 176, 0, .16); border: 1px dashed rgba(255, 176, 0, .95); } .viol-bleed { background: rgba(255, 176, 0, .22); border: 1px solid rgba(255, 176, 0, .9); } .viol-reserved { background: repeating-linear-gradient(45deg, rgba(255, 64, 64, .16) 0 4px, rgba(255, 64, 64, .04) 4px 8px); border: none; border-top: 1px solid rgba(255, 96, 96, .9); border-radius: 0; } .viol-past { background: rgba(255, 176, 0, .10); border: none; border-left: 1px solid rgba(255, 176, 0, .55); border-radius: 0; } .viol-tag { position: absolute; left: 2px; top: -1px; white-space: nowrap; color: #ffe4e4; background: rgba(22, 6, 8, .88); padding: 0 .3em; border-radius: 2px; font: 600 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; } /* a mark whose own box is only the sliver past the display: the label has to grow INWARD (leftward) or it would be clipped away by the layer's own overflow */ .viol-tag-left { left: auto; right: 2px; } .viol-vw .viol-tag { color: #fff1d4; background: rgba(32, 23, 6, .88); } .viol-bleed .viol-tag { color: #fff1d4; background: rgba(32, 23, 6, .88); } .viol-legend { position: absolute; white-space: nowrap; padding: .05em .4em; color: #ffd9d9; background: rgba(22, 6, 8, .9); border: 1px solid rgba(255, 96, 96, .55); border-radius: 3px; font: 600 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; } .viol-legend.ok { color: #cdeccd; background: rgba(8, 20, 10, .9); border-color: rgba(120, 220, 130, .5); } .lmod-overlay { position: fixed; inset: 0; z-index: 2100; background: rgba(5, 8, 14, .72); display: flex; align-items: center; justify-content: center; } .lmod-overlay[hidden] { display: none; } .lmod-popup { background: #0d1420; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem 1.2rem; width: min(560px, 94vw); max-height: 88vh; overflow: auto; position: relative; box-shadow: 0 10px 40px rgba(0, 0, 0, .55); } .lmod-close { position: absolute; top: .5rem; right: .7rem; background: none; border: none; color: var(--muted); font-size: 1.25rem; cursor: pointer; line-height: 1; } .lmod-close:hover { color: var(--text); } .lmod-title { font-size: 1rem; font-weight: 700; margin-bottom: .15rem; color: var(--text); } .lmod-sub { font-size: .72rem; color: var(--muted); margin-bottom: .9rem; } .lmod-sec { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin: .8rem 0 .35rem; } .lmod-select { width: 100%; background: #0a1018; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .4rem; font-size: .78rem; } .lmod-sizes { display: flex; flex-wrap: wrap; gap: .45rem .9rem; } .tpl-size-row { display: flex; align-items: flex-start; gap: .55rem; } .tpl-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; } .tpl-rect { border: 1px solid #93a7d6; border-radius: 3px; background: #31405f; flex-shrink: 0; padding: 0; box-sizing: content-box; box-shadow: 0 1px 5px rgba(0, 0, 0, .45); } .tpl-cap { font-size: .66rem; color: #cdd9f0; white-space: nowrap; text-align: center; } .lmod-list { display: flex; flex-direction: column; gap: .3rem; max-height: 30vh; overflow: auto; } .tpl-item { display: flex; align-items: center; gap: .5rem; background: #101725; border: 1px solid var(--line); border-radius: 8px; padding: .3rem .45rem; } .tpl-item.tpl-exact { border-color: rgba(255, 176, 0, .55); } .tpl-mini { border: 1px solid #39445f; border-radius: 2px; background: #1a2233; flex-shrink: 0; } .tpl-meta { flex: 1; min-width: 0; } .tpl-name { font-size: .78rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tpl-sub { font-size: .62rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tpl-go { flex-shrink: 0; } .tpl-del { flex-shrink: 0; color: var(--muted); } .tpl-del:hover { color: #f85149; } .lmod-save-row { display: flex; gap: .4rem; margin-top: .9rem; } .lmod-save-row input { flex: 1; background: #0a1018; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .45rem; font-size: .78rem; } .lmod-msg { font-size: .7rem; color: var(--amber); margin-top: .35rem; min-height: .9rem; } /* ── account sync modal (2026-09-09) — sign in on the 👤 chip ── */ .auth-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 900; } .auth-modal.hidden { display: none; } .auth-box { background: #0d1420; border: 1px solid #263046; border-radius: 10px; padding: 1.1rem 1.2rem; width: min(360px, 92vw); position: relative; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); } .auth-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .2rem; } .auth-sub { font-size: .72rem; color: var(--muted); margin-bottom: .7rem; line-height: 1.35; } .auth-text { width: 100%; box-sizing: border-box; background: var(--panel-1); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .45rem; font-size: .8rem; color: var(--text); margin: .22rem 0; } .auth-text:focus { outline: none; border-color: var(--amber-dim); } .auth-msg { font-size: .72rem; color: var(--amber); min-height: 1.05em; margin: .2rem 0 .15rem; } .auth-msg.err { color: #f85149; } .auth-actions { display: flex; gap: .4rem; margin-top: .3rem; } /* ── 🗺 Metros pane (2026-09-12) — the catalogue as a clickable map ────────── A navigation tool for the database, NOT a mapping app: no tiles, no map library, no external calls. Self-hosted CONUS outlines (data/geo/us-states.json) + one dot per catalogue metro; click a dot to visit that city (CR.setLocation), wheel zoom / drag pan / ⟲ reset / ⌖ here. */ #pane-metros .pane-body { padding: 0; display: flex; } .mz-svg { flex: 1 1 auto; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; } .mz-svg.dragging { cursor: grabbing; } .mz-svg.mz-nopan { cursor: default; } /* at FULL EXTENT clampView() pins view.x/y to 0, so there is genuinely nothing to pan — do not advertise a grab the map cannot honour (2026-09-12). Placed BEFORE .near so a dot still wins with its click cursor. */ .mz-svg.near { cursor: pointer; } /* within a dot's click disc: the click affordance, not the map's grab cursor — the whole map grabbed look-alike was half of why the dots felt unreachable (2026-09-12) */ .mz-state { fill: #131a27; stroke: #2b3550; stroke-width: .8; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .mz-dot { fill: var(--amber); cursor: pointer; } .mz-dot:hover, .mz-dot-g.hover .mz-dot { fill: var(--text); } /* Ambiguity cues (2026-09-12): when one press covers more than one metro the view zooms in and each candidate gets a ring. Static rings show the whole candidate SET; the `.live` ring is recreated every 500 ms so its outline replays as a drawn circle around the next candidate in turn — the signal that a decisive click is still pending. */ .mz-cand { fill: none; stroke: var(--amber); stroke-width: 1.4; opacity: .38; vector-effect: non-scaling-stroke; pointer-events: none; } .mz-cand.live { opacity: 1; stroke-width: 2; animation: mz-ring-draw .42s ease-out both; } .mz-dot.cand { fill: var(--text); } @keyframes mz-ring-draw { from { stroke-dashoffset: var(--mz-c, 80); opacity: .25; } to { stroke-dashoffset: 0; opacity: 1; } } .mz-dot.cur { fill: var(--text); stroke: var(--amber); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .mz-ctl { display: inline-flex; align-items: center; gap: .15rem; margin-right: .3rem; } .mz-ctl .mz-btn { background: transparent; border: 1px solid transparent; border-radius: 5px; color: var(--muted); font: inherit; font-size: .86rem; line-height: 1; padding: 0 .2rem; cursor: pointer; } .mz-ctl .mz-btn:hover { color: var(--amber); border-color: var(--line); } /* 🔎 city filter in the 📍 chip (2026-09-12) — the catalogue passed 20 metros and a bare nearest-first list stopped being usable. Grows on focus, so the topbar stays compact when it is not in use. */ .loc-find { background: transparent; border: none; border-bottom: 1px solid transparent; color: inherit; font: inherit; width: 4.2em; padding: 0 .1rem; } .loc-find::placeholder { color: var(--muted); opacity: .7; } .loc-find:focus { outline: none; width: 7em; border-bottom-color: var(--amber-dim); } .loc-find.nomatch { color: var(--muted); border-bottom-color: var(--amber); }