/* * The chart page's skin. * * Every id and class in here is a contract with index.html, agent/chat.js, * agent/overlay.js, measure.js and snapshot.js - rename nothing without * reading those. * The canvas reads the same tokens (index.html's T()), and snapshot.js paints * the DOM layer from computed styles: keep overlay and strip backgrounds as * plain colours, because a gradient there comes out transparent in the picture. * * Two temperatures. Everything the user does is gold: the price axis, focus * rings, the active timeframe, their bubble in the chat, their drawings. * Everything the agent does is cool ice blue: the pill that says it is * connected, its tool calls, its name, its marks. A chart marked up by both should read as two hands at a glance. * Gold owns yellow, so warnings are orange. */ @font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(./vendor/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(./vendor/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(./vendor/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(./vendor/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(./vendor/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans Hebrew";font-weight:400;font-style:normal;font-display:swap;src:url(./vendor/fonts/ibm-plex-sans-hebrew-hebrew-400-normal.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans Hebrew";font-weight:500;font-style:normal;font-display:swap;src:url(./vendor/fonts/ibm-plex-sans-hebrew-hebrew-500-normal.woff2) format("woff2")} /* THE TEACHER'S HANDWRITING, AND IT HAD TO HAVE HEBREW (docs/מצב-לימוד.md §7: "גופן כתב יד מאוחסן אצלנו כמו IBM Plex"). Playpen Sans Hebrew, SIL Open Font License 1.1 - the licence text sits beside the file in vendor/fonts/. The VARIABLE font, so the board's 700 and the heading's 800 are real weights (the static 400 it replaced on 2026-10-03, §34, made them a synthesised bold), and its HEBREW half only, 53KB: its figures and Latin are deliberately not loaded, so every number on the board stays in the chrome's own face and is read as a number, never as handwriting - and a line in English is written in that face too. */ @font-face{font-family:"Playpen Hand";font-weight:100 800;font-style:normal;font-display:swap;src:url(./vendor/fonts/playpen-sans-hebrew-var-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F} :root{ /* BLACK GLASS, GOLD AND ICE (2026-09-27). The identity is Dor's and does not move: a black ground, gold for the user's hand, ice blue for the analyst's. What this pass changed is how the chrome AROUND the candles carries it: the candles are the light source and everything else is matte - depth by elevation rather than by outline, gold spent like jewellery (thin, precise, sparse), and every figure typeset in Plex Sans rather than printed in a monospace face. Three surfaces step up from the ground, each a little lighter, and a raised one carries a lit top edge (`--hi`) instead of a border on all four sides. */ --bg:#090b10; /* the chart ground: black glass, a breath of blue */ --bg-deep:#060709; /* the ground's lower edge, for a little depth */ --panel:#0d1016; /* header, rail, footer, chat */ --panel2:#131821; /* popovers and windows */ --raise:#1a202b; /* hover and the selected segment */ --well:#07090c; /* a field or a track, a step BELOW the panel it sits in */ --hover:rgba(214,222,235,.055); /* a resting control under the pointer */ --press:rgba(214,222,235,.09); /* ...and pressed */ --hi:rgba(255,255,255,.05); /* the lit top edge of anything raised */ --line:rgba(148,163,184,.11); --line2:rgba(148,163,184,.2); --text:#e7eaf0; --muted:#949eae; --dim:#5e6778; /* THE GREEN IS EXACTLY WHAT IT ALWAYS WAS; THE RED WAS LIFTED ONE STEP (2026-09-27). Three brighter palettes were built, rendered on the frozen fixture at two densities and rejected on 2026-09-15: *"they all look worse than what was there before - I want something much more subtle, the same kind of candles, just slightly more lit"*. The answer then was the EMA stack coming down (`web/indicators/trend.js`) and a whisper of wick here. On 2026-09-27 Dor reopened the candle itself for the look pass ("if you think there is a candle that reads better"), and the one change that stays inside "much more subtle" is the imbalance the measurement had already named: green is intrinsically the brightest hue and red the dimmest, so the pair sat at 1.57:1 and every falling day was drawn in the weaker ink. The red keeps its hue (OKLCH 16) and gains one step of lightness, .696 to .715 - luminance .303 to .332, the pair now 1.43:1 - so a red day reads as clearly as a green one while nothing turns pink. `docs/skin.md` has the side-by-side it was chosen from. `--up-wick` / `--down-wick` are the whisper: ONE STEP of lightness over the body and nothing else. The wick is the only lever v4 has - the whole of CandlestickStyleOptions is ten colour and boolean fields, no width, no shadow, no glow - and at 1px against black a step that small is the difference between an edge you can see and one you cannot. */ --up:#2fd08a; --down:#ff6b7c; --up-wick:#48d598; --down-wick:#ff818c; --up-soft:rgba(47,208,138,.13); --down-soft:rgba(255,107,124,.13); --up-vol:rgba(47,208,138,.38); --down-vol:rgba(255,107,124,.38); /* bars from IBKR's overnight venue: the same two colours, dimmed */ --up-night:rgba(47,208,138,.42); --down-night:rgba(255,107,124,.42); --up-vol-night:rgba(47,208,138,.16); --down-vol-night:rgba(255,107,124,.16); --vol-avg:rgba(226,232,240,.6); /* the average line through the volume */ /* Gold is the user's hand and the page's own chrome. --accent is an alias for it, so every control that used to be blue follows without a rename. */ --gold:#e4c778; --gold-hi:#f8e7b0; --gold-lo:#b3902f; --gold-soft:rgba(228,199,120,.13); --gold-line:rgba(228,199,120,.42); --gold-sheen:linear-gradient(135deg,#f9ecbf 0%,#e4c778 38%,#b9942f 62%,#f2dc98 100%); --accent:var(--gold); --accent-soft:var(--gold-soft); --accent-line:var(--gold-line); /* A GLOSSARY TERM IS GOLD AND A LITTLE HEAVIER, and the second value is the one under the finger. The full gold rather than the dim one: it is the user's own colour, and a term nobody notices is a definition nobody opens. */ --gl-term:var(--gold); --gl-term-on:var(--gold-hi); --agent:#6ea9ff; --agent-hi:#d7e7ff; --agent-soft:rgba(110,169,255,.11); --agent-line:rgba(110,169,255,.4); /* Frozen structure is the agent's hand at half voice. It is the scaffolding the thesis stands on and there can be forty pieces of it, so it has to sit under the four marks that are the argument without disappearing. */ --agent-dim:rgba(110,169,255,.45); --agent-dim-soft:rgba(110,169,255,.06); --agent-dim-line:rgba(110,169,255,.22); /* Frozen structure - the scaffolding a thesis is read against. This has been round the houses: the agent's blue at half voice, then gold at .45, then back to the agent's blue AT FULL STRENGTH - and that last one was the same value as `--agent`, so structure and thesis stopped separating by colour at all. Dor, 2026-09-14, looking at AEHR with the words off (T): eight pieces of structure, three thesis levels, a trigger, a target and an invalidation were ONE BLUE and nothing on the chart said which was which. SO THE HUE IS BACK, DESATURATED RATHER THAN DIMMED. Alpha is the lever that was already tried here and reverted - .45 was too faint to follow a line across a year of bars - and a slate blue is FULLY OPAQUE while still reading as the grid's own family rather than as a claim. Gold was tried too and is not available: it is the user's hand and the gaps. The WIDTH lever (the claim at 2, the scaffolding at 1) is still in reserve and is still the next one, ahead of dimming. */ --struct:#8aa0bf; --struct-soft:rgba(138,160,191,.09); --struct-line:rgba(138,160,191,.35); /* THE TWO PRICES THAT MEAN GOOD AND BAD, AND THIS IS THE SECOND DELIBERATE * EXCEPTION TO THE TWO TEMPERATURES (after --alert; docs/skin.md). The two * temperatures answer WHOSE, and in front of six identical blue horizontals * the question is WHICH ONE - a price to sell into, a price that says you * were wrong, or a price to read the chart against. The role already carries * the LINE STYLE (target dashed, invalidation dotted), so colour and style * say the same thing twice, which is what makes it readable with the words * off - and off is how Dor reads it. * * THEY ARE NOT THE CANDLES' OWN GREEN AND RED, AND THAT IS THE POINT. * They were, byte-for-byte, from 2026-09-14: this chart already had a word * for better and worse, a hue was argued to collide only with something * drawn in the SAME SHAPE, and a candle body is not a line. Dor, 2026-09-17, * reading a marked US 30 daily on the phone: *"the analyst drew lines in * green and red - I don't want drawing lines in that colour, it is the * candles' colour and it is confusing."* A body is not a line, but on a * chart that is five hundred green and red bodies the EYE sorts by hue * first and by shape second, and every dotted red horizontal read as * something the tape had done rather than something the analyst claimed. * So the pair moves off both candle hues for good. * * THE WHEEL IS FULL AND THAT IS WHY THIS PAIR. Spent already: gold 45 (the * user's hand, the gaps, EMA 50), the up candle 154, `--shape` cyan 192, * the agent's blue 216 (and EMA 20 at 218, and `--struct` desaturated on * the same hue), EMA 100 at 271, `--formation` 254, `--alert` magenta 320, * the down candle 352. Every remaining arc of the circle is inside 25 * degrees of one of those, so ONE strong slot is left - the orange at ~22, * which clears the down candle by 30 and is vivid where the gold is pale - * and the second colour has to come off the hue axis entirely. * * SO: INVALIDATION IS THE ORANGE, because *where you were wrong* is the one * of the three that is literally a warning, and TARGET IS A NEAR-WHITE * SILVER - no hue at all, so it collides with nothing on the circle and * cannot be read as a candle, a hand or a measurement. It is the brightest * ink on the chart and it is ALLOWED to be: a claim may be as loud as the * price (tests/skin.test.mjs exempts the hands for exactly this reason), and * of the ten marks a thesis gets there is at most ONE target. Dor's call, * 2026-09-17, picked against three alternatives (cyan/orange, muted * green/red, and everything back in one blue). * * The TRIGGER is deliberately NOT a third colour. It is the one of the three * that is neither good nor bad - it is where the argument starts - so it * stays the analyst's own blue, and the chart says: blue is what I think, * silver is where I am right, orange is where I am wrong. */ --target:#dfe7f2; --target-soft:rgba(223,231,242,.10); --target-line:rgba(223,231,242,.42); --stop:#ff8b3c; --stop-soft:rgba(255,139,60,.10); --stop-line:rgba(255,139,60,.42); /* A SHAPE IS NOT A PRICE, AND THE BOX AT 101.00 IS WHY THIS EXISTS. Dor, * 2026-09-14, on an AEHR band 101.00-101.62: a range 0.62 wide on a chart * spanning 20 to 160 paints as a 2px box, so by SHAPE it is a line, and in * the analyst's blue it was a line among six others. What it actually says * is different in kind - a region of price rather than a price - and that is * the thing the colour now carries. * * IT SHIPPED FOR AN HOUR AS THE TEAL THE PROMPT WAS ALREADY PRESCRIBING - * `agent/MEMORY.md` told the analyst to pass `#3fd9d0` by hand on "a shape * carrying the argument - an arc, a neckline, compression boundaries", and * that literal appeared in NO stylesheet and NO module: the one colour on * this chart the code had never heard of, kept alive by the model * remembering to type it (rule 2). Promoting it to a token was right; the * VALUE was not. Dor, looking at it: *"green is one of the two candle * colours"* - and at 176 degrees that teal is 21 from the up candle, which * on a chart whose whole background language is green and red is a hue * nobody can spend. The prompt had been asking for it since before there was * anything to compare it against. * * IT WAS AMETHYST FOR AN HOUR AND THAT WAS THE SAME MISTAKE AGAIN. "A box * collides only with another box" was the rule applied, and it is wrong for * exactly this mark: the whole premise here is that a band 0.4% of the scale * PAINTS AS A LINE, so it has to clear the LINES. The violet was 14 degrees * from EMA 100 (#a855f7), which is a line, on the chart Dor reads every day. * * THE CHART IS FULL, AND THE EMA STACK IS WHY. The four moving averages hold * 45, 218, 271 and near-white - which puts EMA 50 ONE degree off the user's * gold and EMA 20 TWO degrees off the agent's blue. They are a measurement * rather than a hand or a claim, so they have the weakest title to any of * it, and re-colouring them as one family would free the violet and end both * of those collisions. DOR'S CALL, 2026-09-14: THE EMA COLOURS DO NOT MOVE. * They are what he reads the chart with. So they are immovable, and what is * left to place around is 45, 154, 217, 271, 320, 352 and white. * * WHICH LEAVES EXACTLY ONE GOOD SLOT, and it is arithmetic rather than * taste: the widest gap on the circle is 154 (up candle) to 217 (agent * blue), and its middle is 190. Every other gap caps at 27 degrees or less - * indigo 244 is 27 from both blues, orchid 295 is 24 from EMA 100, and the * 100-degree slot between gold and the up candle is GREEN, which is the one * thing this cannot be (Dor: *"green is one of the two candle colours"*). * At 190 and 88% saturation this is 36 from the up candle and 27 from the * agent's blue. * * IT IS NOT THE MINT THAT WAS REJECTED, and the difference is not a * technicality: that was 176 at 67% saturation, where G 217 > B 208 and the * thing reads as turquoise. Here B 240 > G 205, which is a cyan - the same * axis that separates the up candle (G 208, B 138) from anything blue. * Gold and aqua on black is deco, and it is the pairing left standing. */ --shape:#35cdf0; --shape-soft:rgba(53,205,240,.12); --shape-line:rgba(53,205,240,.5); /* A formation the detector found is neither hand: not the user's gold and not the agent's blue, because nobody drew it - it was measured. One colour for every boundary of it, so a cup, its handle and its rails read as one object, and direction green/red is spent only on the pole. */ --formation:#9a8cc7; --formation-soft:rgba(154,140,199,.10); --formation-line:rgba(154,140,199,.55); /* An open gap is not a hand either - nobody drew it, the tape left it. Dor's call is that it reads in gold rather than in the agent's blue: a price nobody traded through is a fact about the chart, closer to the user's own furniture than to anything the analyst argued for. Its own token rather than var(--gold) so it can be pulled apart from the user's hand later without hunting for which gold meant what. */ /* A gap is measured rather than argued, so it is gold - and this exact value is what `agent/MEMORY.md` tells the analyst to pass for a gap box it draws by hand, so a box the layer painted and a box the analyst drew are one colour. It was briefly moved to the lighter `#f8e7b0` on a misreading of "lighter" as paler when it meant weaker, and put back: the weight is set by width and alpha, never by washing out the hue. `.nwtick` and `.mtick` share this token. */ /* THE FILL WAS .13 AND NOBODY COULD SEE THE BOX. Dor, 2026-09-18, off an AVGO daily carrying three gap boxes: "the gold there is very thin, almost transparent". The hue did not move - it is the same #e4c778 the chrome wears, and washing it out or brightening it was the mistake made once already (above). What moved is the ALPHA: .28 for the fill, which is the midpoint between what it was and the .42 at which the candles inside the box stop being readable (BAND_MAX in drawings.js), and a fully opaque edge. The box has to be seen THROUGH - that is the whole reason a gap is a box and not a level - so louder than this is a different bug. These two are read by nothing but the draw palette (index.html), so this is the one place that changes it for every gap box on every chart. */ --gap:#e4c778; --gap-soft:rgba(228,199,120,.28); --gap-line:#e4c778; /* The Fibonacci grid. Its own amber, and neither hand: a fib is a reading of a leg the pivots found, not a mark the user or the agent made. The bands alternate between two alphas so the grid reads as rungs rather than as one wash, and only the 0.618 is given full voice. */ --fib:rgba(234,179,8,.5); --fib-key:rgba(234,179,8,.95); --fib-anchor:rgba(125,136,150,.8); --fib-soft:rgba(234,179,8,.055); --fib-soft2:rgba(234,179,8,.018); --fib-ext:rgba(234,179,8,.3); --warn:#f0a03c; --warn-soft:rgba(240,160,60,.1); --warn-line:rgba(240,160,60,.34); /* AN ARMED ALERT IS ITS OWN COLOUR, AND THAT IS A DELIBERATE EXCEPTION TO * THE TWO TEMPERATURES (docs/skin.md). Gold is the user's hand and ice blue * is the analyst's, and an alert line took its hand's colour for exactly one * afternoon: Dor read the chart and said *"put the alert in a different * colour so it will be easy to notice that it's an alert and not a * support/resistance line"*. He is right, and the reason is that the two * temperatures answer WHOSE, while the question in front of a horizontal * dashed line at 2,510 is WHAT KIND - a level somebody believes in, or a * promise to interrupt you when price gets there. Those are different * objects, and on this chart the hand is the smaller fact: the `A` window * and `get_chart` both still name the author. * * MAGENTA BECAUSE IT IS THE ONE HUE THIS CHART DOES NOT ALREADY SPEND, and * every alternative is adjacent to something drawn in the SAME SHAPE. Orange * sits 13 degrees of hue from gold, which is the user's own levels - the * exact confusion this exists to end. Cyan sits beside the agent's blue, * which is also horizontal lines. Magenta's only neighbour is the down * candle, and a candle body is not a line. */ --alert:#ff5ec8; --alert-soft:rgba(255,94,200,.12); --alert-line:rgba(255,94,200,.45); /* ---- THE TEACHER'S THREE INKS (docs/מצב-לימוד.md §7, §17 decision 6) ---- * * The board is the analyst's HAND, so ink 0 is its own blue and nothing * else. The other two were picked by the `--shape` method (docs/skin.md, "A * census of every hue drawn on the pane" and the section *The board's two * other inks* below it), and that census answered: THE HUE WHEEL IS SPENT. * Every arc left is inside 25 degrees of something, and the two names that * are free - lime and chartreuse - are the two this chart cannot say: the up * candle owns green and gold owns yellow. * * So the board does what `--target` did when the census ran out on it: one * ink comes OFF the hue axis entirely. `--ink-1` is WORKING LIGHT, a cool * white - since the board draws with light (docs/מצב-לימוד.md §34, Dor's * pick, 2026-10-03). It was a warm chalk until then, chosen so it could not * be read as a target's cool silver; that collision is not one the screen * can show, because every performance plays on a BARE chart (`bare()` in * web/lesson/page.js) and no target is up beside the ink. `--ink-2` takes * the widest arc that is left, at dE 35.7 from its nearest neighbour - wider * than `--shape`'s own 30.5 - and pays for the one collision it has, the * alert's magenta 17 degrees away, with the four signals nothing else on * this chart carries: it is a THICK lit stroke, it is drawn in front of you * at a hand's pace, it never lies flat as a price line, and it is gone in * three seconds. That is the "second signal, not another hue" the census * itself says is the next lever. * * ⚠ AND THE BOARD IS A DELIBERATE EXCEPTION TO "THE CANDLE IS THE BRIGHTEST * INK ON THE CHART" (§7). Its light is brighter than any candle - a white-hot * core and a bloom. It is the analyst's hand, it lives three seconds, and * drawing the eye is its whole job - the same exemption the two hands * already have in tests/skin.test.mjs, which measures the EMA stack and * nothing else. * * NONE OF THE THREE CARRIES A VERDICT. A check says it held and a cross says * it broke; the ink says which pen, never good or bad. That is why neither * of these is a green or a red, beyond the hue argument. */ --ink-0:var(--agent); --ink-1:#cfe2ff; /* working light, a cool white (it was chalk, #f2eede) */ --ink-2:#ff33f1; /* the widest arc left: 304, dE 35.7 */ /* ...each drawn as a WHITE-HOT CORE inside a sheath of itself (web/sketch.js, `paintStroke`), the spark at the pen's tip and the eraser's edge in `--sketch-sheen`. */ --ink-0-core:#eaf3ff; /* the agent's blue, white-hot */ --ink-1-core:#ffffff; --ink-2-core:#ffe2fc; --sketch-sheen:#ffffff; /* ...and the SENTENCE is the white of that core, with the analyst's blue glowing round it, because it is read rather than glanced at and it is the one piece of the board made of small shapes. Dor, 2026-09-20: "הכתב... יכול להיות פשוט גם יותר זוהר ובהיר, ואז ככה לא יהיה בעיה של הבנה." */ --say:#ffffff; --say-glow:rgba(110,169,255,.62); --hand:"Playpen Hand","IBM Plex Sans Hebrew",var(--sans); /* the canvas */ --grid:rgba(148,163,184,.055); --axis:rgba(148,163,184,.16); --axis-text:#cdb168; /* the price and the clock, set in gold */ --cross:rgba(148,163,184,.35); --cross-label:#dcbf66; /* the crosshair tag; its text contrasts on its own */ /* THE SAME CROSSHAIR, HELD. A finger that stays still opens the crosshair as a READING - what price is this point at - and a reading is the user's own question, exactly as the ruler is, so it wears the user's gold rather than the hover line's slate. Its own token rather than var(--gold-line): this is brighter than anything the user DREW, on purpose, because it is under a fingertip for a second and then gone, and .35 alpha of slate is not legible there at all. Nothing else may use it - a mark this colour would read as a reading somebody is taking. */ --read:rgba(228,199,120,.8); --watermark:rgba(228,199,120,.05); /* The two weights of overlay ground. Flat colours on purpose: snapshot.js paints the DOM layer by reading backgroundColor and nothing else, so a gradient on either of these comes out of the picture transparent. */ --ovl-box:rgba(9,11,16,.9); /* a sentence, in its own box */ --ovl-tag:rgba(9,11,16,.74); /* a price or a count, out of the way */ --aura-top:rgba(228,199,120,.13); /* the wash under the close line */ --aura-bottom:rgba(228,199,120,0); /* the same wash in the colour of the session the bar traded in: sky for the pre-market, pale gold after hours, slate overnight */ --aura-pre:rgba(56,189,248,.32); --aura-pre-bottom:rgba(56,189,248,.07); --aura-after:rgba(248,231,176,.3); --aura-after-bottom:rgba(248,231,176,.06); --aura-night:rgba(148,163,184,.22); --aura-night-bottom:rgba(148,163,184,.05); --sans:"IBM Plex Sans","IBM Plex Sans Hebrew",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* THE DESK SPEAKS SANS; THE SCALE SPEAKS MONO. Every figure in the chrome - the strip, the rail, the windows, the panels - is `--num`, which is Plex Sans: its digits are already tabular at 0.6em, the same advance as Plex Mono's, so a column of prices lines up exactly as it did while the words around it stop reading like a terminal log. `--mono` stays for code and for everything painted ON the pane beside the price axis (the axis itself, the caption tags, the ruler, the countdown, the tick rows), because the canvas axis is mono and `paintedRects()` measures a caption in it. */ --num:var(--sans); --fs-cap:10.5px; --fs-meta:11.5px; --fs-sm:12.5px; --fs-body:13px; --fs-title:15px; /* Radius follows elevation: the smaller and lower a thing is, the tighter its corner - a chip 4, a control 6, a row or a field 8, a popover 12, a window 16. */ --r-xs:4px; --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px; /* HOW BIG A CARD ON THE RAIL IS, AS ONE NUMBER. Every type size and every pad on the four home-screen cards - All stocks, the account, a folder, a list - is `calc(base * --card-scale)`, so the whole block grows together and the proportions inside it cannot drift apart. 1 is the desktop, whose rail is a narrow COLUMN (`--rail-w`) and has no room to give; the phone's drawer is the width of the screen and sets its own, at the end of this file. A card is the only thing on that screen, so it is sized for the screen it is on. */ --card-scale:1; /* HOW WIDE THE RAIL IS ON A DESKTOP, AS ONE NUMBER - `#watch` and the rail fixture both read it. It was 216px, and at 216 the rail cut its own words (Dor, 2026-09-24: *the lists bar on the computer is cut*): measured on his fifteen lists, a folder called Macro read `...`, both Hebrew folder names lost their ends, the meta line read `2 li…` and eleven of twenty-two company names in IGV were clipped. At 264 the home screen was whole; 280 is that plus a margin for a longer leader or a two-digit move, and leaves one company name short by a pixel. The phone never reads it: its drawer is the width of the screen. ...AND 328 SINCE THE EXTENDED PRICE (Dor, 2026-10-06): `pre 240.97` beside its percent took ~48px out of the company name, NVIDIA CO... down to NVI..., and his word was to widen the rail rather than lose it. */ --rail-w:328px; /* Shadows are plain rgba over the ground, never a colour: a lit top edge and two soft falls - a near one that seats the thing, a far one that lifts it. */ --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-pop:inset 0 1px 0 var(--hi),0 16px 38px -8px rgba(0,0,0,.66),0 3px 10px rgba(0,0,0,.36); --shadow:inset 0 1px 0 var(--hi),0 30px 72px -12px rgba(0,0,0,.74),0 10px 28px rgba(0,0,0,.42); --ring:0 0 0 3px var(--gold-soft); --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-1:.12s; --dur-2:.18s; --dur-3:.28s; } *{box-sizing:border-box} /* Author-level display on .pill would otherwise beat the browser's own rule for [hidden], and "not saving" would show while every write succeeds. */ [hidden]{display:none!important} /* CHROME ON ANDROID INFLATES TEXT AND SAFARI DOES NOT, WHICH IS WHY THE TWO PHONES DISAGREE. Chrome's Text Autosizing is `auto` by default: it grows the text of a "text block" by a factor it derives from the layout width and the device's own font-scale setting, so a page authored at 11px can arrive at 14 or 16 on one device and 11 on another - and nothing in the page says so. Reported from Chrome on a phone, 2026-09-13, against an iPhone that looked right. `100%` means "render what I asked for": it does not stop the user zooming, it stops the browser second-guessing the size. */ html{-webkit-text-size-adjust:100%; text-size-adjust:100%} /* ...AND THE SAME TWO PHONES FLASH A DIFFERENT COLOUR ON EVERY TAP. The tap highlight is the browser's, not ours: Chrome paints a translucent BLUE box (rgba(51,181,229,.4)) over whatever was pressed and Safari a grey one, on top of the `.on` and `:active` states this sheet already draws. Inherited, so one declaration on the root takes it off everything; the per-control `transparent`s further down predate it and are left as they were. */ html{-webkit-tap-highlight-color:transparent} html,body{height:100%} /* THE PAGE IS HELD UNTIL ITS FIRST FRAME IS ITS FINAL ONE - a phone since 2026-10-03, the desktop since 2026-10-06 (`booting`, set at parse time after `#wrap` and taken off by the boot function once every surface is in place). The ground stays; if the wait is long enough to be noticed, the app's own mark fades in at its middle - a launch, not a page being assembled in front of you. */ html.booting{background:var(--bg)} html.booting body{visibility:hidden} html.booting::before{ content:''; position:fixed; left:50%; top:50%; z-index:1; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:17px; background:url(icon-192.png) center/cover; box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(228,199,120,.14); opacity:0; animation:bootmark .45s ease-out .25s forwards; } @keyframes bootmark{from{opacity:0; transform:scale(.92)} to{opacity:1; transform:none}} body{ margin:0; background:var(--bg); color:var(--text); overflow-x:hidden; /* nothing on this page may widen the window */ font:13px/1.4 var(--sans); font-variant-numeric:tabular-nums; /* every figure on the page lines up */ display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } ::selection{background:rgba(228,199,120,.3); color:#fff} button,input,textarea,select{font-family:inherit} *{scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.2) transparent} ::-webkit-scrollbar{width:8px; height:8px} ::-webkit-scrollbar-thumb{background:rgba(148,163,184,.18); border-radius:4px; border:2px solid transparent; background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.3); background-clip:padding-box} ::-webkit-scrollbar-track{background:transparent} :focus-visible{outline:1.5px solid var(--accent); outline-offset:2px} #q:focus-visible,textarea:focus-visible,input[type=number]:focus-visible{outline:none} @keyframes spin{to{transform:rotate(360deg)}} /* THE LIVE DOT'S BREATH, ON THE COMPOSITOR. It was a box-shadow growing 3px -> 6px at .18 -> .06 alpha, which is a style pass and a paint on every frame for as long as the feed is live - i.e. forever, on a ticking chart, under the finger of every gesture. The same ring is a 20px disc of the same green scaled .7 -> 1 (14px -> 20px, the dot's 8px plus the 3px -> 6px spread) and faded .18 -> .06: opacity and transform only. Under the dot, as the shadow was: z-index -1 inside `.status`, which `isolation` makes the context, so it goes behind the dot and not behind the header. */ @keyframes breathe{0%,100%{transform:scale(.7); opacity:.18}50%{transform:scale(1); opacity:.06}} @keyframes blink{50%{opacity:.35}} @keyframes pop{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}} @keyframes drop{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}} /* The same entrance for something that is CENTRED by a transform of its own: `drop` ends at `transform:none`, which would drag a translateX(-50%) box off its own centre for the length of the animation. */ @keyframes dropx{ from{opacity:0; transform:translate(-50%,-6px)} to{opacity:1; transform:translate(-50%,0)} } @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}} /* ---- header ---- */ header{ position:relative; display:flex; align-items:center; gap:8px; flex-wrap:nowrap; height:44px; padding:0 12px; background:var(--panel); } /* A gold hairline under the controls, fading before it reaches either edge: the one rule on the page that is not slate. */ /* A piece of the header that had to give way for the row to fit; see fitHeader(). */ header .yield{display:none!important} header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none; background:linear-gradient(90deg,rgba(228,199,120,0),rgba(228,199,120,.55) 14%,rgba(228,199,120,.55) 86%,rgba(228,199,120,0)); } .brand{ display:flex; align-items:center; gap:9px; flex:none; margin-right:4px; font:600 14px/1 var(--sans); letter-spacing:.01em; white-space:nowrap; } .brand .mark{width:20px; height:20px; display:block} .brand>span{ background:var(--gold-sheen); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } /* A FIELD SITS A STEP BELOW WHAT IT IS IN (the look pass, 2026-09-27): the well, one hairline, and the gold only once it has the focus. */ select{ background:var(--well); color:var(--text); border:1px solid var(--line); border-radius:var(--r); padding:6px 8px; font:inherit; outline:none; min-width:190px; transition:border-color var(--dur-1), box-shadow var(--dur-1); } select:hover{border-color:var(--line2)} select:focus{border-color:var(--gold-line); box-shadow:var(--ring)} .finder{position:relative; flex:0 1 250px; min-width:150px} .finder::before{ content:""; position:absolute; left:12px; top:50%; width:14px; height:14px; margin-top:-7px; pointer-events:none; opacity:.55; z-index:1; transition:opacity var(--dur-1); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat; } /* Asked, the magnifier is the user's gold: the box is a search now. */ .finder:focus-within::before{ opacity:1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4c778' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); } /* THE SYMBOL IS THE TITLE OF THE PAGE, AND A PLACE TO SEARCH FROM - BOTH AT ONCE, AT REST (Dor, 2026-10-05: *"it was maybe not good"*). It was a bare title with a grey magnifier floating beside it (2026-09-28) - nothing said the name could be tapped, and asked, it changed size, grew a well and a double gold ring at once. Now: a quiet pill at rest - a hairline and a breath of ground, the name in the title's weight - and, asked, the same pill at the same size and the same type, its edge gold and its magnifier gold. Nothing about the text moves between the two; only the box answers. */ #q{ width:100%; min-width:0; height:30px; padding:0 12px 0 33px; background:var(--well); color:var(--text); border:1px solid var(--gold-line); border-radius:10px; font:500 15px var(--sans); letter-spacing:-.005em; outline:none; box-shadow:0 0 0 3px rgba(228,199,120,.07); transition:border-color var(--dur-1), box-shadow var(--dur-1), background-color var(--dur-1); } #q::placeholder{color:var(--dim); font-weight:400} #q::selection{background:rgba(228,199,120,.28); color:#fff} #q:not(:focus){background:rgba(214,222,235,.03); border-color:var(--line); box-shadow:none; font-weight:600; cursor:pointer} #q:not(:focus):hover{background:var(--hover); border-color:var(--line2)} #results{ overscroll-behavior:contain; touch-action:pan-y; position:absolute; top:calc(100% + 6px); left:0; z-index:20; width:400px; max-height:440px; overflow-y:auto; padding:6px; background:var(--panel2); border:1px solid var(--line2); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); animation:pop var(--dur-2) var(--ease-out); } #results .grp{padding:10px 10px 5px; font:600 11.5px/1 var(--sans); letter-spacing:.01em; color:var(--muted)} #results .row{ display:flex; align-items:baseline; gap:10px; padding:8px 10px; border-radius:var(--r); cursor:pointer; transition:background-color var(--dur-1); } #results .row:hover{background:var(--hover)} #results .row.sel{background:var(--raise)} #results .row .sym{font:500 13px var(--num); color:var(--text)} #results .row .sub{font:12.5px var(--sans); color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1} /* Where a row comes from is a fact about it, not a control: a quiet chip. */ #results .row .tag{font:500 10.5px/1 var(--sans); color:var(--dim); background:var(--hover); border-radius:var(--r-xs); padding:4px 6px} #results .row .tag.delayed{color:var(--warn); background:var(--warn-soft)} #results .grp.filling{color:var(--dim); opacity:.75} #results .empty{padding:14px; color:var(--muted); font-size:12.5px; text-align:center} /* THE ONE SEGMENTED TRACK IN THE HEADER: a well, a hairline drawn inside it, and items with no edge of their own. The on-item wears the page's single on-treatment - gold, a soft gold fill and the one inset line a control ever gets - which every other segmented control on the page repeats. */ .tfs{ flex:none; display:flex; gap:2px; height:28px; padding:2px; background:var(--well); border:0; border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line); } .tfs button{ background:none; border:0; color:var(--muted); cursor:pointer; padding:0 9px; border-radius:var(--r-sm); font:500 12px var(--num); transition:color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1); } .tfs button:hover{color:var(--text); background:var(--hover)} .tfs button.on{background:var(--gold-soft); color:var(--gold); box-shadow:inset 0 0 0 1px rgba(228,199,120,.3)} /* THE ACTIVE TIMEFRAME LIGHTS THE HAIRLINE (2026-09-28). On a desktop the row is text rather than a track of boxes - the nine read as one ruler of choices - and the chosen one is gold with a 2px underline standing exactly on the header's own gold hairline, so the one line on the page that is not slate brightens where the chart's clock is set. The row stretches to the header's height for that; nothing about its width changed, which is all `fitHeader()` measures. On a phone the row is the dock's key and keeps its own rules. */ body:not(.phone) .tfs{align-self:stretch; height:auto; padding:0; gap:0; background:none; box-shadow:none; border-radius:0} body:not(.phone) .tfs button{border-radius:0} body:not(.phone) .tfs button:hover{background:none; color:var(--text)} body:not(.phone) .tfs button.on{background:none; color:var(--gold-hi); box-shadow:inset 0 -2px 0 var(--gold)} /* A RESTING CONTROL HAS NO EDGE. The glyph sits on the panel in the muted ink; the pointer brings a fill, a press a deeper one, and `.on` is the only state that draws a line - inside the button, never around it. The border stays, transparent, so every box keeps the size it had and a state that colours one (the phone's dock) still has a border to colour. */ .ind{position:relative} .ind>button{ width:28px; height:28px; padding:0; display:grid; place-items:center; background:transparent; color:var(--muted); border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer; font:500 13px var(--sans); transition:color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1), border-color var(--dur-1); } .ind>button svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round} .ind>button:hover{color:var(--text); background:var(--hover)} .ind>button:active{background:var(--press)} .ind>button.on{color:var(--gold); background:var(--gold-soft); box-shadow:inset 0 0 0 1px rgba(228,199,120,.3)} #chatBtn.on{color:var(--agent); background:var(--agent-soft); box-shadow:inset 0 0 0 1px rgba(110,169,255,.3)} /* THE ANALYST'S KEY, OVER ITS OWN PANEL (index.html, `.chatkey`): its ice at rest rather than the muted ink, because it is what the product is for, and its name beside the glyph. A pill and not a square, the one control in the row that carries a word. */ header .chatkey{margin-left:4px} header #chatBtn{ width:auto; padding:0 11px 0 9px; display:flex; align-items:center; gap:6px; color:var(--agent); font:500 12.5px/1 var(--sans); letter-spacing:.01em; box-shadow:inset 0 0 0 1px rgba(110,169,255,.22); } header #chatBtn:hover{color:var(--agent); background:var(--agent-soft)} header #chatBtn.on{box-shadow:inset 0 0 0 1px rgba(110,169,255,.42)} #dock #chatLbl{display:none} /* Hidden marks are a thing you should notice you are not seeing. */ /* The two eyes share one cell and cross over - the open one shrinks away as the shut one arrives - so the key says what changed instead of swapping a picture under the thumb. */ #marksBtn svg{grid-area:1/1; transition:opacity .2s, transform .26s cubic-bezier(.3,1.6,.5,1)} #marksBtn .eye-off{opacity:0; transform:scale(.5) rotate(-25deg)} #marksBtn.on .eye{opacity:0; transform:scale(.5)} #marksBtn.on .eye-off{opacity:1; transform:none} /* The fullscreen key's four corners turn inward while it is the way OUT - the one picture for "leave fullscreen" every app has, reached by motion rather than by a second icon. Each corner turns about its own middle. */ #fsBtn path{transform-box:fill-box; transform-origin:center; transition:transform .32s cubic-bezier(.3,1.4,.5,1)} #fsBtn.on path{transform:rotate(180deg)} #marksBtn.on{color:var(--warn); background:var(--warn-soft); box-shadow:inset 0 0 0 1px rgba(240,160,60,.3)} /* ...and on the rail, among the axis's own glyphs, it says so in the same colour without a box: the rail has no chrome of its own (see #zoom). */ #zoom #marksBtn.on{color:var(--warn); opacity:1; background:none; box-shadow:none} /* THE SWITCHER IS A PHONE'S CONTROL (web/switcher.js). On a desktop the lists are a column beside the chart already; chrome.js carries it into the dock, and the phone block below is the only place it is drawn. */ .ind.sym{display:none} /* THE HEADER READS IN GROUPS, BY PROXIMITY RATHER THAN BY BOXES. With the edges gone, thirteen controls at one even pitch are one long row; pulled together where they are neighbours, the lists-calendar-bell trio and the seven chart tools read as two groups either side of the search and the timeframes. A desktop's alone: the phone's header is its own layout. */ @media (min-width:701px){ header > .ind + .ind{margin-left:-4px} } .spacer{flex:1} .up{color:var(--up)} .down{color:var(--down)} /* THE FEED'S READOUTS ARE WORDS, NOT CAPSULES. What the latency, the history and the source ARE is in their text and its colour; a ring round each one was four more boxes in a row that already had thirteen. The border stays, transparent, so the row keeps its measured width. */ /* DEV-SWITCH - the source pill as the TWS/Intrinio switch (paintStocksSwitch). */ .pill.switch{cursor:pointer} .pill.switch::after{content:" ⇄"; color:var(--gold)} .pill.switch:hover{color:var(--text); border-color:var(--gold)} /* When the row is short the switch keeps the source and drops the contract code (fitHeader), and if it is still short it stands beside the search box rather than at the end of the row that falls off the screen. */ #src.short .sc{display:none} header.sw-front > .finder ~ *{order:1} header.sw-front > #src{order:0} /* ...and in that last state the search box is the one that gives: at 320px the row was still 20px over, and what fell off was the bell. */ header.sw-front > .finder{min-width:36px} .pill{ display:inline-flex; align-items:center; height:22px; padding:0 6px; white-space:nowrap; font:500 11.5px/1 var(--num); font-variant-numeric:tabular-nums; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:var(--r-sm); } .lat{min-width:70px; justify-content:center} .lat.good{color:var(--up)} .lat.mid{color:var(--warn)} .lat.bad{color:var(--down)} /* The two that are STATES rather than readouts keep a soft fill - the analyst present, and the one warning in the row - on the resting-control pattern. */ .pill.agent{color:var(--agent); background:var(--agent-soft); box-shadow:inset 0 0 0 1px rgba(110,169,255,.3)} .pill.unsaved{color:var(--down); background:var(--down-soft); box-shadow:inset 0 0 0 1px rgba(255,93,115,.3)} .status{display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11.5px; font-weight:500; white-space:nowrap} .dot{width:8px; height:8px; border-radius:50%; background:var(--dim); transition:background .2s} .dot.live{background:var(--up); position:relative} .status{isolation:isolate} .dot.live::after{ content:""; position:absolute; z-index:-1; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; background:rgb(47,208,138); opacity:.18; transform:scale(.7); animation:breathe 2.4s ease-in-out infinite; pointer-events:none; } .dot.connecting{background:var(--warn); animation:blink 1s ease-in-out infinite} .dot.delayed{background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft)} .dot.error{background:var(--down); box-shadow:0 0 0 3px var(--down-soft)} /* The header holds a lot; when the window is narrow the least important figures step aside rather than pushing the feed status off the edge. */ @media (max-width:1440px){ #span{display:none} } @media (max-width:1280px){ .finder{flex-basis:180px} .tfs button{padding:0 7px} .status #statusTxt{display:none} } @media (max-width:1120px){ .lat{display:none} .brand span{display:none} } /* ---- the chart ---- */ #wrap{position:relative; flex:1; min-height:0; background:var(--bg)} #chart{position:absolute; inset:0} #legend{ position:absolute; top:10px; left:12px; z-index:3; pointer-events:none; /* IT STOPS AT THE PRICE AXIS, ON EVERY SCREEN. The phone got this on 2026-09-13 and the desktop did not, which left the desktop legend with NO right bound at all: it is positioned from the LEFT and grows with its content, so a long instrument name, a compared symbol or a wider price ran it under the axis labels AND under the rail at the top of the scale - the fit, copy and FULLSCREEN buttons. Reported from the desktop, 2026-09-13: "the price high low volume window is outside the full screen button". `--pad-right` is the scale's real width, published by repositionOverlay() because only it knows - the number changes with the digits in it - and the rail is exactly that column, so one bound keeps the legend off both. Wide enough and nothing changes: the legend is far short of it. WHAT IT LOOKED LIKE, because the mechanism is not the obvious one: `#zoom` is one node LATER in the markup at the SAME z-index, and its patch is opaque for its first 34px. The legend is at top:10px and about 30px tall, so the overlap hid y=10..34 and left the strip from 34..40 showing - "I can see only the bottom part of him". Not a clipped box: a box painted over. Raising the legend above the rail would be the WRONG fix - the rail holds the way out of fullscreen, and a control that leaves a mode must stay visible and hittable from inside it. They must not overlap at all. The fallback is 74px and NOT 0: `--pad-right` is published by the first repositionOverlay(), and until then `#zoom` is already 74px wide by its own fallback. Two fallbacks that disagree is the same overlap for the first few frames of every load. */ max-width:calc(100% - var(--pad-left,0px) - var(--pad-right,74px) - 24px); font:12px/1.6 var(--num); font-variant-numeric:tabular-nums; color:var(--muted); /* The frame is transparent rather than gone, so the box keeps its size and `--lights-top` still lands under it. A readout lying on the pane needs a ground to be read against, not an edge to be noticed by. */ background:rgba(11,14,19,.78); padding:6px 11px; border-radius:8px; border:1px solid transparent; box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } /* ---- the stage, on the pane ------------------------------------------------ What is on the price surface and what is folded off it. Under the legend, sharing its two bounds for the reasons written over it: positioned from the LEFT and stopped at the price axis by `--pad-right`, so a long list can never run under the axis labels or the rail at the top of the scale. A CHIP, NOT A PANEL, and that is the feature taking its own advice. This exists because a setup drawn under a dozen support lines cannot be read; a permanent list of switches standing over the top-left candles is the same complaint in a different place. Closed it is one row, ~120px, saying what is NOT on screen. It opens on a press and closes on the next one. `pointer-events` is the one thing it does NOT inherit from the legend: the legend is a readout and lets every gesture through to the chart under it, and this is the one piece of furniture in the corner that has to take a press. It is bounded to its own content width so the pane either side of it still pans. */ /* THE TOP IS THE LEGEND'S BOTTOM, AND IT IS A VARIABLE BECAUSE THE LEGEND IS NOT THE SAME HEIGHT ON EVERY SCREEN. 42px is the desktop legend (one 12/1.6 row plus `.row2`, plus its 6px padding and its own top:10px) with a few pixels under it. The phone clamps the legend to TWO 11/1.5 lines and hides `.row2`, which is 41px of box from a top of 10 - so a 42px chip sat across the legend's second line, over the Close and the Volume (reported from the phone, 2026-09-22). One name, set beside each legend rule, rather than a second hard-coded number that the next change to the legend will not know about. */ #lights{ position:absolute; z-index:4; top:var(--lights-top,42px); left:12px; max-width:calc(100% - var(--pad-right,74px) - 24px); display:flex; flex-direction:column; align-items:flex-start; gap:4px; font:500 11px var(--sans); } #lights[hidden]{display:none} /* THE COLUMN IS AS WIDE AS ITS WIDEST ROW, AND ITS EMPTY PART IS CHART. Open, the reading's name is ~650px wide on a phone and the parts under it are short, so the box beside them was a dead patch a finger could not pan or pinch through (reported from the phone, 2026-10-06). Only what is drawn takes a touch; the gaps fall through to the candles. */ #lights{pointer-events:none} #lights button, #lights input, #lights select, #lights .lrow, #lights .lbox{pointer-events:auto} /* IN FULLSCREEN `#wrap` STARTS AT y=0, UNDER THE NOTCH. The header stands in that band in every other layout and carries the inset for everything below it; take the header away and anything anchored to the top of the pane is anchored to the hardware. `#zoom` paid for this once and `#legend` paid for it again - this is the third, and it is global because `--sat` is 0 on a screen with no notch. `tests/phone.test.mjs` holds the general form. */ body.fs #lights{top:calc(var(--lights-top,42px) + var(--sat,0px))} #lights button{ display:flex; align-items:center; gap:6px; cursor:pointer; background:rgba(13,16,22,.84); color:var(--muted); border:1px solid transparent; border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.3); padding:0 9px; height:24px; white-space:nowrap; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } #lights button:hover{color:var(--text); background:rgba(26,32,43,.9)} #lights .head svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8} /* The chevron turns rather than swapping glyph: one node, and the direction is the state. */ #lights .head .cv{ width:0; height:0; margin-left:1px; border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:4px solid currentColor; transition:transform .12s ease; } #lights.open .head .cv{transform:rotate(180deg)} #lights .rows{display:flex; flex-direction:column; align-items:flex-start; gap:3px} /* A ROW SAYS ITS STATE THREE WAYS, and none of them is colour alone: the dot is filled or hollow, the text is bright or dim, and the count is always there. A folded group whose only signal was a dimmer grey would be a mark stored and not drawn with nothing saying so (rule 1). */ #lights .lt i{ width:7px; height:7px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); } #lights .lt:not(.on) i{background:none !important; box-shadow:inset 0 0 0 1.5px var(--dim)} #lights .lt.on{color:var(--text); border-color:var(--line2)} #lights .lt b{font:500 10px var(--num); color:var(--dim); font-variant-numeric:tabular-nums} #lights .lt.on b{color:var(--muted)} /* TWO LEVELS, AND THE INDENT IS WHAT SAYS SO. The outer row is the READING - one analysis, one name - and the inner ones are its parts. A reading's own dot is the agent's blue filled or a hollow ring, because the question it answers is "is this one on", not "what colour is it drawn in"; its parts carry their own ink. */ #lights .lt.an{font-weight:600; max-width:280px} #lights .lt.an i{background:var(--agent)} #lights .lt.an span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #lights .lt.sub{margin-left:16px; font-size:10.5px; height:22px; padding:0 8px} /* THE READING AND THE WAY TO BE RID OF IT, IN ONE ROW. The cross is a sibling of the switch rather than a corner of it - two questions, two controls - and it is the width of one glyph until it is ARMED, at which point it says what it is about to do and how much of it. Dim until the row is under the pointer on a desktop; on a phone there is no hover, so it is simply always visible and the arming is what stands in for the hesitation a hover buys. */ #lights .anrow{display:flex; align-items:center; gap:3px} #lights .del{ width:24px; padding:0; justify-content:center; flex:none; color:var(--dim); font-size:11px; line-height:1; opacity:.55; transition:opacity .12s ease; } #lights .anrow:hover .del{opacity:1} #lights .del:hover{color:var(--stop); border-color:var(--stop)} /* ARMED IT IS THE ONE ORANGE THING ON THE CHIP, and it is wider because it now carries words: a second press on something that looks identical to the first would be the confirmation saying nothing. */ #lights .del.armed{ width:auto; padding:0 9px; opacity:1; color:var(--stop); border-color:var(--stop); font-weight:600; } /* The reading's name can be a whole sentence, so it is the one thing here allowed to be elided - and `dir:auto` because half of what the analyst writes is Hebrew and a name measured left-to-right reads backwards. */ #lights .lt.an span, #lights .head .nm{direction:ltr; unicode-bidi:plaintext} #lights .head .nm{max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #lights .head b{font:500 10px var(--num); color:var(--warn); font-variant-numeric:tabular-nums} #lights .all{display:flex; gap:3px; margin-top:1px} #lights .all button{height:20px; padding:0 7px; font-size:10px; color:var(--dim)} #lights .all button:disabled{opacity:.4; cursor:default} /* THE LIST OF INDICATORS: what the I panel has on the chart, a row each, each line in its own ink - the key to the colours and the list of what is on (paintLayRow()). A head that folds it, then rows: the NAME with its bulb (picture out and back), the line numbers (a press lights one), a gear (the layer's settings, inside the list) and a cross (off). Quiet by default: the word muted, the numbers in their ink, the gear and the cross dim until the row is under a pointer. */ /* BOUNDED BY THE PANE, AND IT SCROLLS INSIDE IT. On a phone on its side the pane is ~220px, and Pearson's settings opened under their row ran past its foot - two buttons nobody could reach (measured in WebKit, 2026-10-05). The stage chip's column is capped at the room under its own top, and the list is the part that gives way, so the readings' head under it keeps its size. */ #lights{max-height:calc(100% - var(--lights-top,42px) - 8px)} #lights .layrow{display:flex; flex-direction:column; align-items:flex-start; gap:3px; max-width:100%; flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding-bottom:2px} #lights .layrow::-webkit-scrollbar{display:none} #lights .layrow .lhead .cv{ width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin:-3px 1px 0 2px; opacity:.7; transition:transform .15s} #lights .layrow .lhead[aria-expanded="true"] .cv{transform:rotate(225deg); margin-top:3px} #lights .layrow .lhead svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8} #lights .layrow .lrows{display:flex; flex-direction:column; align-items:flex-start; gap:3px} #lights .layrow .lrow{ display:flex; align-items:center; gap:1px; height:24px; padding:0 3px 0 2px; border-radius:999px; background:rgba(13,16,22,.84); box-shadow:0 1px 2px rgba(0,0,0,.3); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font:500 11px var(--num); font-variant-numeric:tabular-nums; white-space:nowrap; } #lights .layrow .lrow button{ height:20px; padding:0 5px; border-radius:999px; border:0; box-shadow:none; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; font:inherit; } #lights .layrow .lrow button.lname{gap:6px; padding:0 7px 0 6px; color:var(--text); font:500 11px var(--sans)} #lights .layrow .lrow .bulb{ width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 6px rgba(228,199,120,.55); transition:background .15s, box-shadow .15s} #lights .layrow .lrow.dark .lname{color:var(--dim)} #lights .layrow .lrow.dark .bulb{background:none; box-shadow:inset 0 0 0 1.5px var(--dim)} #lights .layrow .lrow em{font:500 10.5px var(--sans); font-style:normal; color:var(--dim); margin:0 3px 0 6px} #lights .layrow .lrow em.idle{opacity:.6; margin:0 4px 0 2px} #lights .layrow button.ll{color:var(--c); opacity:.9; padding:0 4px; transition:background .15s, opacity .15s} #lights .layrow button.ll.sw i{width:14px; height:2px; border-radius:1px; background:var(--c)} #lights .layrow button.ll:hover{background:rgba(255,255,255,.06); color:var(--c); opacity:1} #lights .layrow button.ll.on{ opacity:1; font-weight:600; background:color-mix(in srgb, var(--c) 24%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); } #lights .layrow button.ll.off{opacity:.35} #lights .layrow .lv{font:500 10.5px var(--num); color:var(--text); margin:0 3px 0 4px} #lights .layrow .lrow button.ledit,#lights .layrow .lrow button.ldel{ width:22px; padding:0; justify-content:center; color:var(--dim); opacity:0; transition:opacity .15s, color .15s} #lights .layrow .lrow:hover button.ledit,#lights .layrow .lrow:hover button.ldel, #lights .layrow .lrow button.ledit.on{opacity:1} #lights .layrow .lrow button.ledit{margin-left:4px} #lights .layrow .lrow button.ledit svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8} #lights .layrow .lrow button.ledit:hover,#lights .layrow .lrow button.ledit.on{color:var(--gold)} #lights .layrow .lrow button.ldel{font-size:10px} #lights .layrow .lrow button.ldel:hover{color:var(--stop)} /* The settings, inside the list, under their row: the I panel's own controls on the I panel's ground - a box that grows with them, never a window. */ #lights .layrow .lbox{ margin:0 0 2px 10px; padding:5px 8px; border-radius:10px; min-width:240px; max-width:340px; background:rgba(16,20,27,.95); box-shadow:0 4px 14px rgba(0,0,0,.45), inset 0 0 0 1px var(--line); display:flex; flex-direction:column; gap:2px; } #lights .layrow .lbox .ctl{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; padding:2px 0; font:11px var(--sans); color:var(--muted); } #lights .layrow .lbox .ctl .lbl{min-width:64px} #lights .layrow .lbox .ctl button{ height:22px; padding:0 8px; border-radius:var(--r-sm); border:1px solid transparent; box-shadow:none; background:var(--hover); color:var(--muted); font:500 11px var(--sans); -webkit-backdrop-filter:none; backdrop-filter:none; } #lights .layrow .lbox .ctl button:hover{color:var(--text); background:var(--press)} #lights .layrow .lbox .ctl button.armed{color:var(--warn); background:var(--warn-soft)} #lights .layrow .lbox .ctl .chips{display:flex; flex-wrap:wrap; gap:4px} #lights .layrow .lbox .ctl .chips button.pick{ /* `.pick` is also the drawing-pick overlay's class (absolute, inset 0, no pointer) - undone here, or the chips lie stacked and take no press. RELATIVE and never static: on a finger every `#lights button` carries an `::after` grown 5px round it, and a static button hands that box to the nearest positioned ancestor - so the LAST chip's grew over the whole list and every tap in it landed on that one chip (Dor, on the iPhone: the chips took no press, the lines changed anyway). */ position:relative; inset:auto; z-index:auto; pointer-events:auto; overflow:visible; color:var(--dim); background:var(--raise); font:500 11px var(--num)} #lights .layrow .lbox .ctl .chips button.pick.on{ color:var(--gold); background:linear-gradient(var(--gold-soft),var(--gold-soft)),var(--raise); box-shadow:inset 0 0 0 1px rgba(228,199,120,.3)} #lights .layrow .lbox .ctl input[type=number]{ height:22px; width:66px; padding:0 6px; background:var(--well); color:var(--text); border:1px solid var(--line); border-radius:var(--r-sm); font:11.5px var(--num)} #lights .layrow .lbox .ctl input[type=number]:focus{border-color:var(--gold-line); box-shadow:var(--ring); outline:none} #lights .layrow .lbox .ctl select{ height:22px; min-width:84px; padding:0 4px; line-height:20px; background:var(--well); color:var(--text); border:1px solid var(--line); border-radius:var(--r-sm); font:11px var(--sans)} #lights .layrow .lbox .ctl .cur{color:var(--dim); font:10.5px var(--num); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%} /* THE STAGE ROWS IN THE D PANEL wear the marks ladder's own shape, because they are read in the same glance as it - `.mk` is that row, and only the state word and the dot differ. */ #drawPanel .marks.stage .mk em{color:var(--dim); text-transform:uppercase; letter-spacing:.04em} #drawPanel .marks.stage .mk.on em{color:var(--agent)} #drawPanel .marks.stage .mk:not(.on){opacity:.62} #drawPanel .marks.stage .mk:not(.on) i{background:none !important; box-shadow:inset 0 0 0 1.5px var(--dim)} #legend b{color:var(--text); font-weight:500} #legend .lid>b{font:600 13px var(--sans); color:#fff} /* The company's mark before its name - the rail's own face, a step smaller than the name's cap height allows to look heavy. Inline, so the legend's two clamped lines on a phone still clamp; its letter keeps its own colour rather than the legend's `b`. */ #legend .lmark:empty{display:none} /* CENTRED ON THE NAME'S CAPITALS, MEASURED (2026-10-05, Dor: "a little below the word"). An inline grid sits on the baseline of the letter INSIDE it, so its own offset moved nothing and the mark's middle sat on the name's baseline, 4.5px under the middle of the word. The wrapper is an inline-block with overflow hidden, whose baseline is its BOTTOM edge - so the offset is exact: 16px tall, 13px name, cap height 0.7em, middle of the capitals 4.5px over the baseline -> bottom 3.5px under it. */ #legend .lmark{display:inline-block; overflow:hidden; width:16px; height:16px; vertical-align:-3.5px; margin-right:6px} #legend .wlogo{width:16px; height:16px} #legend .wlogo b{font:600 8.5px/1 var(--sans); color:hsl(var(--lh,210) 45% 82%)} #legend b.up{color:var(--up)} #legend b.down{color:var(--down)} #legend .avg{font-style:normal; color:var(--dim); font-size:11px} #legend .sess{font:500 10px var(--sans); font-style:normal; color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:1px 6px; margin-left:4px; vertical-align:middle} #legend .sess.pre{color:rgba(56,189,248,.9); border-color:rgba(56,189,248,.35)} #legend .sess.after{color:rgba(248,231,176,.95); border-color:rgba(248,231,176,.4)} #legend .sess.overnight{color:rgba(148,163,184,.9); border-color:rgba(148,163,184,.35)} /* a continuous futures bar from before its contract was the front month */ #legend .sess.deferred{color:rgba(148,163,184,.9); border-color:rgba(148,163,184,.35)} #legend .cl{display:inline-flex; align-items:center; gap:5px; margin-left:12px} #legend .cl:first-of-type{margin-left:0} #legend .row2{display:block; margin-top:2px} /* THE CHEVRON THAT PUTS BOTH ROWS UNDER THE LEGEND AWAY (paintTuck). It is the FIRST thing on the legend's own line and costs no row: in the flow, so it is as wide as its count and pushes the numbers along rather than sitting on them, and at the start, so neither a clamp nor an ellipsis can take it and the distance tags at the line's right end never cover it. The legend lets every gesture through to the chart; this one button takes a press. */ #legend .tuck{ display:inline-flex; align-items:center; justify-content:center; gap:4px; vertical-align:middle; height:20px; min-width:24px; padding:0 6px; margin-right:8px; pointer-events:auto; cursor:pointer; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:999px; } #legend .tuck[hidden]{display:none} #legend .tuck:hover{color:var(--text); background:rgba(255,255,255,.09)} /* `middle` sits a box on the baseline plus half an x-height, a hair under the middle of the figures (which are capitals' height), so it is lifted by that hair - measured, so the chevron is centred on the text beside it. */ #legend .tuck{position:relative; top:-1.9px} #legend .tuck .cv{ width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(225deg); margin-top:3px; transition:transform .15s} #legend .tuck[aria-expanded="false"] .cv{transform:rotate(45deg); margin-top:-3px} .sw{display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-right:5px} #msg{ position:absolute; inset:0; display:none; place-items:center; z-index:4; padding:24px; background:rgba(11,14,19,.86); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } #msg .box{max-width:520px; text-align:center; color:var(--muted); line-height:1.7} /* A NOTE IS NOT A CURTAIN. The scrim, the blur and the spinner belong to a chart that cannot be looked at yet; a remark about the gesture you just made must leave the chart visible and must not eat the next tap - the whole point of it is that you carry on drawing. It sits under the strip rather than in the middle of the pane, and it takes itself down (`NOTE_MS`). */ #msg.note{ background:none; backdrop-filter:none; -webkit-backdrop-filter:none; place-items:start center; padding:12px; pointer-events:none; } #msg.note .box{ max-width:min(340px,100%); padding:8px 12px; border-radius:var(--r-lg); background:rgba(11,14,19,.94); border:1px solid var(--gold-line); color:var(--text); font-size:12.5px; line-height:1.5; /* `drop`, not `dropx`: this box is centred by the grid rather than by a transform of its own, so the -50% one would shove it off its own centre. */ box-shadow:0 6px 18px rgba(0,0,0,.5); animation:drop .16s var(--ease); } #msg.loading .box::before{ content:""; display:block; width:22px; height:22px; margin:0 auto 14px; border-radius:50%; border:2px solid var(--line2); border-top-color:var(--accent); animation:spin .8s linear infinite; } #msg .t{color:var(--text); font-weight:600; font-size:14px} #msg .acts{display:flex; gap:8px; justify-content:center; margin-top:16px} #msg .acts a,#msg .acts button{ display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:var(--r-sm); font:500 12.5px var(--sans); cursor:pointer; text-decoration:none; background:var(--gold-soft); color:var(--gold); border:1px solid transparent; box-shadow:inset 0 0 0 1px rgba(228,199,120,.3); } #msg .acts button{background:var(--hover); color:var(--text); box-shadow:none} #msg .acts button.strong{background:var(--gold-sheen); color:#1a1408; border-color:transparent; font-weight:600} #msg .hint{margin-top:10px; font-size:12px; color:var(--dim)} #msg .acts a:hover,#msg .acts button:hover{filter:brightness(1.15)} #msg code{ display:inline-block; background:var(--panel2); border:1px solid var(--line2); padding:6px 10px; border-radius:5px; color:var(--text); font:12px var(--mono); margin-top:8px; user-select:all; } /* ---- the strip: the quote bar ---- ONE LINE, and that is the design. The strip sits between the header and the candles, so every pixel of it is a pixel off the chart: the caption, the figure and the basis it was measured from run along a single 28px row, the caption INLINE before its number rather than stacked over it. Stacked, each tile was three lines tall and a chart carrying the session, the volatility, a gap and a chain stood two rows deep - eighty pixels of quote bar over a chart that wanted them. The price and the day's change lead it, the market cap follows, then one tile per layer that has something to say, in a fixed order, so the same number is in the same place on every chart. Tiles are ruled off from each other; the rule at the start of the row is clipped away, because a rule to nothing is noise. The row never wraps and the page never scrolls sideways: when the tiles run past the edge, fitStrip() hides them from the right - the least important end, by stripRank - and counts them into the `+n` chip, exactly as fitHeader() makes the header give way. `S` puts everything back: `.full` is the one state ON SCREEN allowed to be more than one line deep, and it wraps into thin rows rather than growing tall ones. Flat backgrounds only: snapshot.js paints this row into the exported picture. */ #strip{ display:flex; align-items:center; flex:none; height:28px; padding:0 12px; background:var(--panel); border-bottom:1px solid var(--line); font:11.5px/1.2 var(--num); font-variant-numeric:tabular-nums; color:var(--muted); } /* Two states may be more than one line deep, and only two: `.full`, which is the user asking for every number (S), and `.wrapped`, the copy snapshot.js lays out at the picture's width - a picture has no `+n` to click, so what is in it wraps rather than being cut off at the edge. */ #strip.full,#strip.wrapped{ height:auto; min-height:28px; padding-top:2px; padding-bottom:2px; /* the price belongs on the first of the wrapped rows, not floating in the middle of them */ align-items:flex-start; } #layers{ display:flex; flex:1; align-items:center; flex-wrap:nowrap; min-width:0; overflow:hidden; margin-left:-1px; clip-path:inset(0 0 0 1px); } #strip.full #layers,#strip.wrapped #layers{flex-wrap:wrap; overflow:visible; row-gap:1px} /* A tile is one line: the caption, the figure, then the quieter half of it - the percentile, the points, the close the move was measured from - inline after the figure rather than under it. `flex:none` is load-bearing: a tile that shrinks spills its own text instead of overflowing the row, and fitStrip() would then never see that it does not fit. */ #strip .t{ display:flex; align-items:baseline; gap:6px; flex:none; padding:3px 10px; white-space:nowrap; } /* The class rule above outranks the browser's own [hidden], so say it again. */ #strip .t[hidden]{display:none} /* THE RULES BETWEEN TILES ARE SHORT, NOT FULL HEIGHT (the look pass): a rule the height of the row is a column of boxes; a short one centred on the type is punctuation. The border keeps its width - fitStrip() measures tiles with it - and only its ink is drawn shorter. snapshot.js paints a border only from its TOP edge, so a left or right rule was never in the picture and still is not. */ #strip .t.vital{padding-left:0; padding-right:11px; border-right:1px solid var(--line); border-image:linear-gradient(to bottom, transparent 24%, var(--line2) 24%, var(--line2) 76%, transparent 76%) 1} #strip .t.vital + .t.vital{padding-left:10px} #layers .t{border-left:1px solid var(--line); border-image:linear-gradient(to bottom, transparent 24%, var(--line2) 24%, var(--line2) 76%, transparent 76%) 1} #strip .t em{ font:500 10.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); font-style:normal; } #strip .t .v{display:flex; align-items:baseline; gap:8px; line-height:1.2} #strip .t small{font:10.5px/1.2 var(--num); color:var(--dim)} /* An empty second half is not a gap: the tile's own `gap` would still hold space open for it. */ #strip .t small:empty{display:none} #strip .t small.up{color:var(--up)} #strip .t small.down{color:var(--down)} /* The price leads: the one figure in the row set larger than the rest. */ #strip .t.px .v b{font:600 17px/1 var(--num); color:var(--text); letter-spacing:-.015em} #strip .t.px .v b.up{color:var(--up)} #strip .t.px .v b.down{color:var(--down)} /* THE BLINK A TICK GETS (`tickClass()` in index.html): a wash of the move's own colour under the price, held for a third of a second so the eye can catch it and then settled to nothing - the rail's tick flash told at the size of the one number the page exists to show. Padding paid back by margin, so the figure's width - which fitStrip() measures - does not move. */ /* ...AND THE WASH IS ITS OWN LAYER, FADED, not the figure's background recoloured: a tick arrives every quarter second on a live coin, so the background-color animation never stopped and cost a style pass and a paint every frame. A colour fading to transparent IS that colour fading in opacity, so the look is the same; `isolation` keeps the wash behind the digits and in front of nothing else. ⚠ ONE PICTURE DOES CHANGE: snapshot.js clones the strip and paints each node's own background, so with the wash on `background-color` every exported picture froze a fresh flash under the price (the clone restarts the animation at its 0% - measured, rgba .34 on the clone with nothing on the screen). A pseudo-element is not painted there, so the picture now shows the price as the screen does at rest. */ #last{border-radius:4px; padding:0 3px; margin:0 -3px; position:relative; isolation:isolate} #last::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--tick, transparent); opacity:0; pointer-events:none; } @keyframes tickA{0%,30%{opacity:1}100%{opacity:0}} @keyframes tickB{0%,30%{opacity:1}100%{opacity:0}} #last.tick-up-a,#last.tick-up-b{--tick:rgba(47,208,138,.34)} #last.tick-down-a,#last.tick-down-b{--tick:rgba(255,107,124,.34)} #last.tick-up-a::before,#last.tick-down-a::before{animation:tickA 1.1s ease-out} #last.tick-up-b::before,#last.tick-down-b::before{animation:tickB 1.1s ease-out} .chg{ white-space:nowrap; padding:3px 6px; border-radius:var(--r-xs); font:500 11.5px/1 var(--num); font-variant-numeric:tabular-nums; color:var(--muted); } .chg.up{background:var(--up-soft); color:var(--up)} .chg.down{background:var(--down-soft); color:var(--down)} #strip .t.cap .v b{font-weight:500; color:var(--text)} /* The share count and the filing it came off fold on the one line, and only here: the day's move changes every tick and the close it is measured from is what makes it checkable, while a share count moves once a quarter and its filing date is a thing you go and look at when you care. The tile's own tooltip carries both, and `S` puts them back on the row. */ #strip:not(.full) .t.cap small{display:none} /* The hours around the session ride on the price tile's own line, small and after the day's move rather than under it: the figure is honestly +0.00% on a stock that had no overnight prints, and a number that is usually zero must not be set as loud as the one that never is. The word is dim, the percent takes its own sign's colour - which is not always the day's. */ #strip .t small i.sess{font-style:normal; color:var(--dim)} #strip .t small b{font-weight:500} #strip .t small b.up{color:var(--up)} #strip .t small b.down{color:var(--down)} #strip .t small b.xpx{color:var(--text)} #strip .t small .sw{display:none} /* Exactly zero is neither, on this figure only: most stocks do not trade after the bell, so it is 0.00% most evenings and a nightly green would stop the colour meaning anything. */ #strip .t small b.flat{color:var(--dim)} #strip .s{white-space:nowrap} #strip .s b{font-weight:500; color:var(--text); font-size:12.5px} #strip .s.up b{color:var(--up)} #strip .s.down b{color:var(--down)} #strip .s.warn b{color:var(--warn)} /* A triggered formation is neither up nor down - the direction is in the label - it is "this one is live", which is what the agent's own colour says. */ #strip .s.good b{color:var(--agent)} #strip .s i{font-style:normal; color:var(--dim); margin-left:3px; font-size:10.5px} #strip .s .sw{margin-right:4px; position:relative; top:-1px} /* Warnings and hints, never folded - so they are bounded rather than dropped: a third of the row at most, cut with an ellipsis, and the whole sentence in the tooltip. Bounded rather than shrinking to nothing, or a long warning would squeeze every tile out of the row and never look like it overflowed. */ #strip .note{ flex:none; max-width:34%; align-self:center; padding:0 0 0 12px; color:var(--dim); font:11px/1.3 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #strip.full .note,#strip.wrapped .note{max-width:100%; white-space:normal} /* The one control in the row: how much is folded, and the way in. */ #strip .fold{ flex:none; align-self:center; margin:0 0 0 auto; height:17px; padding:0 7px; min-width:30px; border-radius:var(--r-xs); cursor:pointer; background:var(--hover); border:1px solid transparent; color:var(--muted); font:500 10.5px/1 var(--num); letter-spacing:.02em; transition:color var(--dur-1), background-color var(--dur-1); } #strip .fold:hover{color:var(--text); background:var(--press)} #strip .fold.less{font-family:var(--sans)} /* ---- a glossary term, and the definition behind it ---- The app defines and the model interprets (rule 7 extended, docs/פרופיל-הקורא.md §7): these are decorations the page adds over text nothing has changed, in the strip's captions and in the analyst's answer. A DOTTED UNDERLINE AND NOTHING ELSE. Colour is spoken for on this page - the two temperatures say WHOSE a mark is, and the roles say what it claims - so a term takes the colour of whatever it is sitting in and says "there is more here" with a line that is dimmer than the words it is under. It is also why this never reaches the chart surface: nothing the code adds may compete with the candles (root CLAUDE.md, The skin), and the strip is chrome. */ .gl-term{ cursor:pointer; /* THE WORD ITSELF IS THE MARK - gold letters, a little heavier, and nothing behind them (Dor, 2026-09-19, twice: first "the dotted line underneath does not look good", then "make the letters of the word gold and bold"). A dotted underline is a footnote's manner - it says there is more about this somewhere else - and a wash behind the word is a marker pen through a paragraph nobody asked to have marked up. Gold because opening a definition is something the USER does (the two temperatures), and the weight is what carries it at 13px where colour alone would not. */ color:var(--gl-term); font-weight:600; transition:color .12s ease; } .gl-term:hover,.gl-term.on{color:var(--gl-term-on)} .gl-term:focus-visible{outline:1px solid var(--accent-line); outline-offset:1px; border-radius:3px} /* The definition itself: one box for the whole page, fixed to the VIEWPORT so nothing it was opened from can clip it - the windows' own lesson. Above the spine (the dock is 13, a window 8000) and under #signin's 9000. A POPOVER, AND IT READS AS A PAGE OF A GLOSSARY: the word in the user's gold at title weight, a hairline, and the definition in the body face at the page's own white, a step down - the reader opened this to read it. */ #glpop{ position:fixed; z-index:8500; width:min(340px, calc(100vw - 16px)); padding:14px 16px 16px; border-radius:14px; /* A warmth at the head that fades by the first line of words, and an edge touched with the same gold: opening a definition is the USER's act, the same temperature the word that opened it is written in. */ background:linear-gradient(180deg, color-mix(in oklab, var(--panel2) 92%, var(--gold) 8%) 0, var(--panel2) 64px); border:1px solid color-mix(in oklab, var(--line2) 70%, var(--gold) 30%); box-shadow:0 18px 50px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.35); font:13px/1.65 var(--sans); color:var(--text); animation:pop var(--dur-2) var(--ease-out); } #glpop[hidden]{display:none} /* A gold rule across the top that opens from the middle each time the card does - the drawing's own manner, one line long. */ #glpop::before{content:""; position:absolute; top:0; left:12%; right:12%; height:1.5px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent); opacity:.85; animation:glLine .7s var(--ease-out) both} @keyframes glLine{from{transform:scaleX(0); opacity:0}to{transform:scaleX(1); opacity:.85}} #glpop .gl-head{display:flex; align-items:flex-start; gap:10px; margin-bottom:10px} #glpop .gl-title{flex:1; min-width:0} #glpop .gname{display:block; font-size:16px; font-weight:650; line-height:1.25; letter-spacing:.005em; color:var(--gold)} #glpop .gl-alt{display:block; margin-top:3px; font:500 11px/1.2 var(--sans); letter-spacing:.04em; color:var(--dim)} #glpop .gl-alt[hidden]{display:none} #glpop[dir=rtl] .gl-alt{text-align:right} #glpop .gl-tag{flex:none; margin-top:2px; padding:3px 8px; border-radius:999px; border:1px solid var(--line2); background:rgba(255,255,255,.02); font:600 10px/1.2 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)} #glpop .gl-tag:empty{display:none} #glpop .gl-x{flex:none; width:24px; height:24px; margin:-3px -6px 0 0; padding:0; border:0; border-radius:7px; background:none; color:var(--dim); font:16px/24px var(--sans); cursor:pointer} #glpop[dir=rtl] .gl-x{margin:-3px 0 0 -6px} #glpop .gl-x:hover{color:var(--text); background:rgba(255,255,255,.05)} /* 24px to the eye and 36px to a finger: the target grows, the mark does not. */ #glpop .gl-x{position:relative} #glpop .gl-x::after{content:""; position:absolute; inset:-6px} #glpop .gdef{margin:0; color:color-mix(in oklab, var(--text) 74%, var(--muted))} #glpop .gl-lead{display:block; font-weight:500; color:var(--text)} #glpop .gl-rest{display:block; margin-top:6px} #glpop .gl-rest:empty{display:none} /* A FORMATION, DRAWN SMALL, between its name and its words (web/glossary-shape.js). The chart's two inks - the price in the page's white, the formation's lines in `--shape` cyan - so the card teaches the picture the chart will paint. It draws itself once, price first and the lines after it, the way a hand would; reduced motion takes the animation off and leaves the finished drawing. And it is drawn IN LIGHT, the board's own look (docs/מצב-לימוד.md §34): on a dark plate ruled in the analyst's blue, every line glowing (`gs-glow`, an SVG filter - WebKit ignores a CSS drop-shadow inside an SVG), and a spark riding the price as it is drawn. */ #glpop .gshape{display:flex; gap:8px; margin:0 0 12px; padding:8px 8px 6px; border:1px solid rgba(110,169,255,.28); border-radius:10px; background: radial-gradient(120% 95% at 50% 0, rgba(110,169,255,.16), transparent 70%), repeating-linear-gradient(90deg, rgba(110,169,255,.07) 0 1px, transparent 1px 14px), repeating-linear-gradient(0deg, rgba(110,169,255,.05) 0 1px, transparent 1px 14px), #070a10} #glpop .gshape figure{flex:1 1 0; min-width:0; margin:0} #glpop .gs-pic{position:relative; width:100%; max-width:calc(var(--gs-max, 136px) * 120 / 52); aspect-ratio:120 / 52; margin:0 auto} #glpop .gs-pic svg{display:block; width:100%; height:100%} #glpop .gshape figcaption{margin-top:2px; text-align:center; font:500 11px/1.3 var(--sans); color:var(--muted)} #glpop .gs-price{fill:none; stroke:#eef5ff; stroke-width:.95; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1; animation:gsDraw .9s var(--ease-out) both; filter:url(#gs-glow)} #glpop .gs-line{fill:none; stroke:var(--shape); stroke-width:.8; stroke-linecap:round; stroke-dasharray:1; animation:gsDraw .5s .75s var(--ease-out) both; filter:url(#gs-glow)} #glpop .gs-label{position:absolute; transform:translate(-50%, -100%); white-space:nowrap; font:500 11px/1 var(--sans); letter-spacing:.02em; color:#e4eeff; pointer-events:none; text-shadow:0 0 6px rgba(110,169,255,.9), 0 0 2px #000; animation:gsFade .3s 1.1s both} /* The spark is SMIL, which the reduced-motion switch above does not reach - so it goes with the rest of the motion, and the finished drawing stays. */ #glpop .gs-spark{color:#ffffff; filter:url(#gs-glow)} @media (prefers-reduced-motion: reduce){ #glpop .gs-spark{display:none} } /* Two side by side are each drawn at half the width, so the same pixels need twice the units - or the lines go hairline and the names unreadable. */ #glpop .gshape.two .gs-price{stroke-width:1.3} #glpop .gshape.two .gs-line{stroke-width:1.05} #glpop .gshape.two .gs-label{font-size:10px} @keyframes gsDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes gsFade{from{opacity:0}to{opacity:1}} /* ---- the agent layer ---- Text, vertical rules and shaded spans are DOM because v4 has no primitive for any of them. Nothing here takes the mouse: a note must never be the thing you grab when you meant to drag the chart. */ .ovl{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden} .ovl>div{position:absolute} .o-note,.o-label{ max-width:250px; padding:4px 8px; border:1px solid; border-radius:6px; background:var(--ovl-box); font:11.5px/1.45 var(--sans); white-space:pre-wrap; box-shadow:0 4px 14px rgba(0,0,0,.45); } /* A label that is not a sentence. It loses the border, the shadow and most of the padding, and keeps just enough ground to stay legible over a candle. Mono and tabular, because a tag is almost always a number. Never wrapped: a tag is short by definition, and one that wraps has become a box again. */ .o-note.tag,.o-label.tag{ /* A CAPTION IS NEVER WIDER THAN THE COLUMN IT LIVES IN. This was `max-width:none`, and the note said so on purpose: capped at 180px the ground stopped where the box did and the text ran on past it over the candles, while offsetWidth still measured 180 so the tag was centred on the wrong bar. That bug was a cap WITHOUT a clip - the pair below is what makes a cap safe, and the whole of what was missing. `--cap-tag` is computed by capTagPx() and published by repositionOverlay(): the caption column applyGutter() buys, or a share of the pane on a phone where that column is narrower than the words are worth - AND SLID BY THE ZOOM, down to about two words once a bar is getting less than a couple of pixels, because a zoomed-out chart is a texture with no quiet part left for a word to sit on. Measured on SOFI's daily: a 344px context caption, the only thing left sitting on the candles once every other rule had done its work. */ max-width:var(--cap-tag, 9999px); overflow:hidden; text-overflow:ellipsis; padding:1px 4px; border:0; border-radius:3px; background:var(--ovl-tag); font:500 10px/1.3 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; box-shadow:none; } /* A CAPTION THE READER OPENED - a click on a clipped one, wired in index.html. It is the one caption here that is deliberately IN FRONT of whatever is under it: the placement routes every other one around its neighbours, and this one was asked for, so it takes the box's own ground back and sits above them. A sentence read through another sentence is not read. It lasts until the chart moves. */ .o-note.tag.open,.o-label.tag.open{ z-index:4; background:var(--ovl-box); box-shadow:0 4px 14px rgba(0,0,0,.45); } /* THE HAIRLINE FROM A CAPTION BACK TO ITS OWN LINE. It exists to buy off the constraint every placement rule here is fighting - a caption may only move so far before it stops saying which line it belongs to - so that the words can go where the candles are not. 1px, its mark's own colour, half strength: it has to be followable and it must not read as another drawing. Two of them make an elbow; both are axis-aligned, because snapshot.js paints this layer from bounding boxes and a rotated hairline would export as a filled rectangle. */ .o-lead{ opacity:.5; border-radius:0 } /* ---- a mark's words, as a symbol ---- The words left the chart (web/pinread.js, asPins() in index.html): what stands in for them is the mark's ROLE as a glyph, ringed in the role's own colour, on the mark's own line. Always the same size - nothing here slides with the zoom, which is the whole point - and a press opens the sentence in the card below. `div.pin` and `.ovl>` are specificity, not decoration: the phone block restyles `.o-note.tag` and `.o-board` further down this file, and a symbol must not inherit a caption's ground, padding or width from it. Background, border, radius and a text glyph are all `snapshot.js` can paint, so a symbol is made of nothing else and exports as itself. */ .ovl>div.pin{ box-sizing:border-box; width:20px; height:20px; min-width:0; max-width:none; max-height:none; padding:0; display:flex; align-items:center; justify-content:center; border:1.5px solid; border-radius:50%; background:var(--ovl-box); box-shadow:0 1px 5px rgba(0,0,0,.55); font:600 11px/1 var(--sans); font-variant-numeric:normal; white-space:nowrap; overflow:hidden; text-overflow:clip; -webkit-line-clamp:unset; } /* The scaffolding is read AGAINST the claims, so its symbol is a size down - the same ranking the slate colour already makes. */ .ovl>div.pin[data-role="structure"]{width:16px; height:16px; font-size:9px; border-width:1px} /* The board is the one symbol that takes the pointer itself (it always has - see `.o-board`); it keeps that and gives up everything that made it a box. A rounded SQUARE and not a circle: it is a page about the whole chart, not a bead on one line, and it must not be read as belonging to whatever line it happens to have been parked on. */ .ovl>div.o-board.pin{cursor:pointer; overflow:hidden; padding:0; border-radius:5px} /* `▸` is drawn small in every face that has it; a size up so it reads as a triangle at a glance rather than as a dot. */ .ovl>div.pin[data-role="trigger"]{font-size:14px} /* A finger's symbols are a size up: in the coarse-pointer block, with every other target this page grows for a fingertip. */ /* ---- the card a symbol opens ---- The sentence, big: the half of the pane the symbol is NOT in, the role's colour along its top edge so it is plain which kind of line it is about, and up/down to walk the rest. No scrim - the line it is about has to stay lit beside it, and the chart is never out of play (the analyst's sheet makes the same choice). Inside `#wrap`, so it sits over the candles and under every surface that is not the chart. */ .pinread{ position:absolute; z-index:6; left:12px; right:calc(var(--pad-right, 60px) + 12px); margin:0 auto; max-width:540px; max-height:min(62%, 460px); display:flex; flex-direction:column; background:var(--panel2); color:var(--text); border:1px solid var(--line2); border-top:3px solid var(--c); border-radius:var(--r-lg); box-shadow:var(--shadow); pointer-events:auto; touch-action:pan-y; animation:prIn .16s var(--ease); } .pinread[hidden]{display:none} .pinread[data-side="top"]{top:12px} .pinread[data-side="bottom"]{bottom:calc(max(var(--pad-bottom, 28px), var(--pr-floor, 0px)) + 12px)} /* Never taller than what is in view, whatever the share says. */ .pinread{max-height:min(62%, 460px, calc(var(--pr-room, 100vh) - 24px))} .pinread.stepped{animation:none} @keyframes prIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}} .pr-head{display:flex; align-items:center; gap:10px; padding:10px 8px 4px 14px} .pinread[dir="rtl"] .pr-head{padding:10px 14px 4px 8px} .pr-pin{ flex:none; box-sizing:border-box; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--c); color:var(--c); background:var(--ovl-box); font:600 14px/1 var(--sans); } .pr-role{flex:1; min-width:0; font:600 13px/1.2 var(--sans); color:var(--c); letter-spacing:.02em} .pr-who{color:var(--muted); font-weight:500} .pr-meta{flex:none; font:500 12px/1 var(--num); color:var(--muted); font-variant-numeric:tabular-nums} .pr-x{ flex:none; width:34px; height:34px; border:0; border-radius:8px; background:transparent; color:var(--muted); font:400 22px/1 var(--sans); cursor:pointer; } .pr-x:hover{color:var(--text); background:var(--hover)} .pr-body{ padding:4px 16px 14px; font:400 16px/1.6 var(--sans); white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto; overscroll-behavior:contain; user-select:text; -webkit-user-select:text; } .pr-nav{ display:flex; align-items:center; justify-content:center; gap:16px; padding:8px 10px 10px; border-top:1px solid var(--line); } .pr-nav button{ width:48px; height:34px; border:1px solid transparent; border-radius:var(--r); background:var(--hover); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background-color var(--dur-1), box-shadow var(--dur-1); } .pr-nav button:hover{background:var(--press); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent)} .pr-count{font:500 12px/1 var(--num); color:var(--muted); min-width:44px; text-align:center} .pr-steps{display:flex; align-items:center; gap:16px} .pr-nav.has-rm{justify-content:space-between} .pr-nav .pr-rm{width:auto; padding:0 14px; color:var(--warn); font:500 13px/1 var(--sans)} /* THE PICTURE'S KEY - the marks' words under an exported chart (snapshot.js), laid out offscreen at the picture's width and painted from these styles, so it is made of what that painter reads: a ground, a border, a radius, text. */ .snapkey{padding:8px 14px 12px; background:var(--bg); border-top:1px solid var(--line)} .sk-row{display:flex; align-items:flex-start; gap:10px; padding:4px 0} .sk-pin{ flex:none; box-sizing:border-box; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid; background:var(--ovl-box); font:600 11px/1 var(--sans); } .sk-text{flex:1; min-width:0; font:400 13px/1.5 var(--sans); color:var(--text); white-space:pre-wrap} /* The pinned board: a paragraph ABOUT the chart rather than at a point on it. The one thing in this layer that takes the mouse, because it is the one thing here you are meant to pick up and put somewhere else - .ovl stays pointer-events:none and this opts back in. Capped in width and height, and that is not decoration: the whole request was a box that does not hide the chart, so it may not grow to fill it. The text cap in normalize() is what keeps the content inside these bounds, so overflow:hidden here is a backstop and never the normal case. Flat ground and no backdrop-filter - snapshot.js reads backgroundColor and nothing else, and a board missing from the export is the argument missing from it. */ .o-board{ max-width:min(300px, 34%); max-height:38%; overflow:hidden; padding:7px 10px; border:1px solid; border-radius:8px; background:var(--ovl-box); color:var(--text); font:12px/1.55 var(--sans); white-space:pre-wrap; box-shadow:0 6px 18px rgba(0,0,0,.5); pointer-events:auto; cursor:grab; user-select:none; /* A DRAGGABLE THING HAS TO OWN ITS TOUCHES. `touch-action` computed to `auto` here - `#chart,#chart canvas{touch-action:none}` does not reach `.ovl` - and `body` IS a scroll container on a phone (setting `overflow-x:hidden` makes the other axis compute to `auto`, the same trap `#watch` hit from the other side). So a vertical drag on the board panned the page instead, the browser took the pointer back with a `pointercancel`, and the box snapped home: THE BOARD COULD NOT BE MOVED ON A PHONE AT ALL. preventDefault on pointerdown does not stand in for this - scrolling is not that event's default action. `-webkit-touch-callout` stops iOS offering to copy the text under a long press, which is now the gesture that holds it. */ touch-action:none; -webkit-touch-callout:none; } .o-board.drag{cursor:grabbing; box-shadow:0 10px 26px rgba(0,0,0,.6); will-change:transform} /* ---- the board, folded ---- Ten lines of prose is a box 165px tall. On a phone that is a fifth of the chart - "the text is almost the entire screen", from the device - which is why the phone has opened it folded since that layout was built. It is a SWITCH ON EVERY SCREEN now (Dor, 2026-09-13): 165px is less of a 1,100px pane and it is still the largest thing the analysis draws, and it is prose you have already read. `Full board` in the D panel, or B. It is a FOLD and not a truncation, which is the whole difference: the chip says how it is folded and the words are one gesture away, so nothing is stored and not drawn (rule 1). The same trade the strip's `+n` makes. TWO WHOLE LINES, AND `max-height` CANNOT SAY THAT. The first attempt was a bare `3.5em`, which `*{box-sizing:border-box}` spends on padding before the text sees it; the second was `calc(3.1em + 21px)`, arithmetic for two lines plus the padding - and it still showed two and a half, because `padding-bottom` does not stop content PAINTING into it. It reserves space AFTER the content; content taller than the box runs straight through it and `overflow:hidden` clips wherever the border box happens to end, which is mid-letter. `-webkit-line-clamp` is the property that means what this rule wants: TWO LINES, an ellipsis, and the 14px the chip needs left under them. Same tool the phone's legend uses, for the same reason. OUTSIDE THE MEDIA QUERIES ON PURPOSE - it is true of the STATE, not of the screen, and the state is the page's now rather than chrome.js's. */ body.boardfold .o-board{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; /* ZERO, and it is the whole fix. `overflow:hidden` clips at the PADDING box, so every pixel of padding-bottom is a pixel of the NEXT line that gets shown: at 14px (what the `more` chip was reserved) three-quarters of line three was drawn through it and out over the board's own bottom border; at the base 7px a sliver of it still was. The clamp was never the problem - it stops the text and places the ellipsis correctly - the clip was in the wrong place. The gap under the last line is the line-height's own half-leading, which is what was doing most of that work anyway. */ overflow:hidden; padding-bottom:0; } /* THE `more` CHIP IS GONE, AND THE ELLIPSIS IS THE FOLD'S OWN VOICE. The chip was reserved its room with `padding-bottom:14px`, and that could never have worked: `overflow:hidden` clips at the PADDING box, and padding is INSIDE it - so `-webkit-line-clamp` stopped the text at two lines and put its ellipsis there, and the third line went on painting straight through the reserved strip and out over the board's own bottom border, with the chip sitting on top of the middle of it. It read as two lines and a chip; it was two lines, a chip, and half a sentence underneath. Shipping on the phone since the fold was built, and only unmistakable on a desktop where the box is 295px wide. With the padding gone the clamp is exact, and there is then nowhere in the box for a chip to stand that is not on top of a word - the bottom is line two, whose right end IS the ellipsis, and the top is line one. So it goes. `…` is what an ellipsis means and it is already how every folded caption on this chart says it (`.o-note.tag`); the ways to the rest are the tap, `B`, the `Full board` row and the Marks list, and three of those exist at a keyboard where a click on the board means select rather than open. */ .o-vline{top:0; bottom:0; width:0} .o-vline i{position:absolute; top:0; bottom:0; width:1px; background:var(--c); opacity:.65} .o-vline b{ position:absolute; top:6px; left:6px; white-space:nowrap; font:500 10px var(--mono); color:var(--c); background:rgba(11,14,19,.85); padding:2px 5px; border-radius:4px; } /* A rule near the right edge would hang its caption off the chart - 80px of a 390px pane is the price axis, and the caption is wider than what is left. overlay.js measures once and flips it to the other side of its own rule, which is the one place there is always room. */ .o-vline.flip b{left:auto; right:6px} /* One side of one strike: a bar in the right margin, growing leftward, at the strike's own price. Flat colours - snapshot.js reads backgroundColor and nothing else. */ .o-oibar{height:4px} .o-oibar i{ position:absolute; inset:0; background:var(--c); border-radius:1px; } .o-span{top:0; bottom:0} .o-span b{ position:absolute; top:6px; left:6px; white-space:nowrap; font:500 10px var(--mono); color:var(--agent); background:rgba(11,14,19,.8); padding:2px 5px; border-radius:4px; } /* ---- the board, and the pen (docs/מצב-לימוד.md §7) ---- Ink that lives three seconds and goes: not a mark, not stored, no author, no budget - the ruler's standing, in a canvas rather than in divs, because this one draws at a hand's pace and a hundred trembling strokes as DOM nodes is the animation the chart is not allowed to cost (rule 5). ABOVE EVERYTHING ELSE IN THE PANE, and that is the spotlight's doing: "כל השאר מתעמעם" has to include the marks and the readings, so a dim that the overlay drew over would dim the candles and leave the words at full voice. `pointer-events:none` is what makes that safe - it is over the zoom rail and the legend and takes no press off either. The ONE exception is the student's pen (§8), which is an explicit mode and has to have the pointer while it is armed; index.html turns the mode on, and web/sketch.js is what sets this inline while it lasts. No transition and no animation property: every frame of this layer is drawn in JS, so `prefers-reduced-motion` is read there (matchMedia) rather than here - the global rule at the top of this file cannot reach a canvas. */ .sketch{position:absolute; inset:0; z-index:6; pointer-events:none} /* The pen's crosshair, on the chart under the board: the board's canvas never * takes a press (sketch.js armPen), and the library writes its own cursor * inline, hence the weight. */ .sketch-armed #chart, .sketch-armed #chart *{cursor:crosshair !important} /* THE STUDENT'S PACE (§7, "שלבים"): two controls and where you are, in the analyst's blue, at the foot of the pane and clear of the date row - which is the page's own `--pad-bottom`, published on the wrap by index.html, rather than a guess at how tall an axis is. A FLOATING CONTROL WEARS THE FLOATING SURFACE: the popover ground, a neutral hairline and the popover's shadow, with the analyst's ice in the glyphs and the timeline rather than round the edge - the performance is the analyst's, the pill it is played from is the page's. Flat colours only: it sits on the pane. */ .sketch-pace{ position:absolute; z-index:7; left:50%; transform:translateX(-50%); bottom:calc(var(--pad-bottom, 0px) + 12px); display:flex; align-items:center; gap:6px; padding:4px 6px; border:1px solid var(--line2); border-radius:999px; background:var(--panel2); box-shadow:var(--shadow-pop); } .sketch-pace button{ width:30px; height:30px; padding:0; cursor:pointer; display:grid; place-items:center; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--agent); font:600 17px/1 var(--sans); transition:background var(--dur-1), color var(--dur-1); } .sketch-pace button:hover:not(:disabled){background:var(--agent-soft); color:var(--agent-hi)} .sketch-pace button:active:not(:disabled){background:rgba(110,169,255,.2)} .sketch-pace button:disabled{color:var(--dim); cursor:default} /* THE WAY OUT, on every performance and not only a paced one. Its own colour because it is the one control here that is not the lesson's - the steppers move the board on, this ends it - and a separator so it reads as a second thing rather than a third arrow. `--warn`, not `--stop`: nothing was wrong, the reader has simply had enough. */ .sketch-pace button.stop{ color:var(--warn); font-size:10px; border-left:1px solid var(--line2); border-radius:0 999px 999px 0; } .sketch-pace button.stop:hover{background:var(--warn-soft); color:var(--warn)} .sketch-pace.solo button.stop{border-left:0; border-radius:999px} .sketch-pace span{ min-width:38px; text-align:center; color:var(--muted); font:500 var(--fs-meta)/1 var(--num); font-variant-numeric:tabular-nums; } /* A PERFORMANCE THAT RUNS IS A VIDEO (Dor, 2026-09-23): pause, and the timeline under the finger, between it and the stop. The pill takes the width the bar needs and never more than the pane has. The two icons are drawn with borders rather than glyphs - a pause sign is an emoji on iOS. */ .sketch-pace.video{width:min(560px, calc(100% - 32px))} .sketch-pace button.play::before{ content:''; box-sizing:border-box; width:10px; height:12px; border-left:3.5px solid currentColor; border-right:3.5px solid currentColor; } .sketch-pace button.play.paused::before{ width:0; height:0; margin-left:3px; border-right:0; border-left:11px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent; } .sketch-pace .scrub{ position:relative; flex:1; min-width:0; height:30px; cursor:pointer; touch-action:none; } .sketch-pace .scrub::before, .sketch-pace .scrub .fill{ content:''; position:absolute; left:0; top:50%; height:4px; margin-top:-2px; border-radius:2px; pointer-events:none; } .sketch-pace .scrub::before{right:0; background:rgba(110,169,255,.2)} .sketch-pace .scrub .fill{width:0; background:var(--agent)} .sketch-pace .scrub .knob{ position:absolute; left:0; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--agent-hi); pointer-events:none; box-shadow:0 0 0 3px var(--panel2), 0 0 0 4px rgba(110,169,255,.35); } /* ⚠ UNDER THE CHART, NOT ON IT (docs/מצב-לימוד.md §29, Dor 2026-09-24). The foot of the pane is the volume band, and the pill above hid it for every performance. So the board docks its controls over chrome that is already there (`dockPace` in web/sketch.js; the page says where): the status row on a desktop, the dock's row of buttons on a phone - left to right under the PANE only, never over the licence credit - and the chart is not one pixel smaller. The rules above are the look they had on the pane; these undo the floating half of it: it lies flat in the row it covers, the row's own ground, with a hairline at each end where it meets the rest of the row. */ #foot{position:relative} .sketch-pace.docked{ top:0; bottom:0; transform:none; border-radius:0; box-shadow:none; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); background:var(--panel); padding:0 8px; gap:4px; } .sketch-pace.docked button.stop{border-radius:0} .sketch-pace.docked:not(.video){justify-content:center} #foot > .sketch-pace.docked button{width:24px; height:24px; font-size:14px} #foot > .sketch-pace.docked button.stop{font-size:9px} #foot > .sketch-pace.docked span{min-width:34px; font-size:var(--fs-cap)} #foot > .sketch-pace.docked .scrub{height:26px} #foot > .sketch-pace.docked .scrub::before, #foot > .sketch-pace.docked .scrub .fill{height:3px; margin-top:-1.5px} #foot > .sketch-pace.docked .scrub .knob{width:10px; height:10px; margin:-5px 0 0 -5px; box-shadow:0 0 0 2px var(--panel), 0 0 0 3px rgba(110,169,255,.35)} /* the row the controls are laid over takes no tap while they are up */ .under-pace > :not(.sketch-pace){pointer-events:none} #dock > .sketch-pace.docked{top:1px; bottom:auto; height:41px; padding:0 4px} #dock > .sketch-pace.docked button{width:40px; height:40px; font-size:18px} #dock > .sketch-pace.docked .scrub{height:40px} #dock > .sketch-pace.docked .scrub .knob{box-shadow:0 0 0 3px var(--panel), 0 0 0 4px rgba(110,169,255,.35)} /* ...and with nowhere to go - a desktop in fullscreen has no status row - a THIN line over the date row, not over the volume: a pointer or a tap opens the controls there, and they fold again (`openThin`). Folded, everything but the line keeps its place and is simply not seen, so the line does not move when they open. */ .sketch-pace.thin{ bottom:0; height:var(--pad-bottom, 26px); padding:0 6px; gap:4px; border:0; border-radius:0; box-shadow:none; background:transparent; } .sketch-pace.thin.open{background:rgba(13,16,22,.94); border-top:1px solid var(--line2)} .sketch-pace.thin button{width:22px; height:22px; font-size:13px} .sketch-pace.thin button.stop{font-size:9px} .sketch-pace.thin .scrub{height:100%} .sketch-pace.thin .scrub .knob{box-shadow:0 0 0 2px var(--panel), 0 0 0 3px rgba(110,169,255,.35)} .sketch-pace.thin:not(.open) > :not(.scrub), .sketch-pace.thin:not(.open) .scrub .knob{visibility:hidden} .sketch-pace.thin:not(.open) .scrub::before, .sketch-pace.thin:not(.open) .scrub .fill{top:auto; bottom:2px; height:3px; margin-top:0} /* THE SPEED (Dor, 2026-10-06): four chips beside the pause, the one playing lit. Numbers, so the number face, and small enough to sit in the status row. */ .sketch-pace .speeds{display:flex; align-items:center; gap:2px; flex:none} .sketch-pace .speeds[hidden]{display:none} .sketch-pace button.speed{ width:auto; min-width:34px; height:24px; padding:0 6px; border-radius:6px; color:var(--muted); font:600 11px/1 var(--num); font-variant-numeric:tabular-nums; } .sketch-pace button.speed.on{ color:var(--agent-hi); background:var(--agent-soft); border-color:rgba(110,169,255,.45); } /* ⚠ THE BAR HAS TO BE SEEN (Dor, 2026-10-06: on a desktop "the bar is not clear and you do not see play and pause"). In the 27px status row it was a 3px line at a fifth of its colour beside a 24px glyph with no ground. Still the same row and not one pixel of chart: a hairline of the analyst's ice along its top says the row has become the player, the pause is a FILLED disc, and the track is twice as thick and twice as bright. */ #foot > .sketch-pace.docked.video{ background:var(--panel2); box-shadow:inset 0 1px 0 rgba(110,169,255,.55); gap:8px; padding:0 10px; } #foot > .sketch-pace.docked.video button.play{ width:22px; height:22px; background:var(--agent); color:var(--panel); } #foot > .sketch-pace.docked.video button.play:hover{background:var(--agent-hi); color:var(--panel)} #foot > .sketch-pace.docked.video button.play::before{width:8px; height:9px; border-left-width:2.5px; border-right-width:2.5px} #foot > .sketch-pace.docked.video button.play.paused::before{width:0; height:0; margin-left:2px; border-left-width:8px; border-top-width:5px; border-bottom-width:5px} #foot > .sketch-pace.docked.video .scrub::before, #foot > .sketch-pace.docked.video .scrub .fill{height:5px; margin-top:-2.5px; border-radius:3px} #foot > .sketch-pace.docked.video .scrub::before{background:rgba(110,169,255,.32)} #foot > .sketch-pace.docked.video .scrub .knob{width:13px; height:13px; margin:-6.5px 0 0 -6.5px} #foot > .sketch-pace.docked button.speed{width:auto; height:20px; font-size:11px} #dock > .sketch-pace.docked.video button.play{ width:34px; height:34px; margin:0 3px; background:var(--agent); color:var(--panel); } #dock > .sketch-pace.docked.video button.play::before{width:10px; height:12px; border-left-width:3.5px; border-right-width:3.5px} #dock > .sketch-pace.docked.video button.play.paused::before{width:0; height:0; margin-left:3px; border-left-width:11px; border-top-width:7px; border-bottom-width:7px} #dock > .sketch-pace.docked.video .scrub::before{background:rgba(110,169,255,.32)} #dock > .sketch-pace.docked button.speed{width:auto; height:32px; min-width:48px; font-size:13px} /* WHERE EACH STOCK BEGINS, on a lesson that walks several (`acts`): a notch across the bar, so the reader can put a finger on the next stock. */ .sketch-pace .scrub .act{ position:absolute; top:50%; width:2px; height:12px; margin:-6px 0 0 -1px; border-radius:1px; background:var(--agent-hi); opacity:.55; pointer-events:none; } /* ---- the lesson's sentence ---- docs/מצב-לימוד.md §21, decision 8. ONE live sentence at a time, written ON the board over the ink it belongs to - `placeCaption()` in web/sketch.js puts it there and nothing here has an opinion about the corner. It began as a strip owning its own row; a strip is what Dor kept reporting ("עדיין יש כתב שנכתב בתוך חלון למטה, ולא הכל על הגרף"), and one sentence to place is arithmetic rather than the solver docs/caption-placement.md is about. The rule below is the LOOK; where it goes is the board's. */ .sketch-say{ /* The board places it (`placeCaption`); this is only where it sits for the frame before that, and it is ON the board rather than along its top rim for the same reason the placement is. */ position:absolute; z-index:7; top:26%; left:50%; transform:translateX(-50%); max-width:min(92%, 620px); padding:0; color:var(--say, #ffffff); text-align:center; text-wrap:balance; /* WRITING ON A BOARD, NOT A CAPTION BAR (Dor, 2026-09-20: "אני רוצה שכל הגרף יהיה כמו לוח, שהוא יכתב כמו בכתב יד"). No panel, no border, no ground - a box under the words is the thing that made it read as a strip bolted under the chart. The HAND face, and the same DARK HALO the board paints behind a numeral, because the rule that made handwriting legible over candles is the one that makes a whole sentence legible over them: the background under one glyph is not one colour, so no colour fixes it (CLAUDE.md, "The skin"; docs/skin.md). */ font:700 17px/1.42 var(--hand, var(--sans)); /* ⚠ AND THE HALO IS THE BRIGHTNESS, NOT THE COLOUR. The white is already at the top of the scale, so "יותר זוהר ובהיר" is bought where it is actually lost: a sentence written over candles reads against a ground that changes colour under every glyph (docs/skin.md). A tight dark ring separates it, and the analyst's blue glowing outside it (`--say-glow`) is what makes it read as LIT - the board draws with light (§34) - rather than as pasted on. */ text-shadow: 0 0 2px var(--bg-deep), 0 0 5px var(--bg-deep), 1px 1px 0 var(--bg-deep), -1px 1px 0 var(--bg-deep), 1px -1px 0 var(--bg-deep), -1px -1px 0 var(--bg-deep), 0 0 9px var(--say-glow), 0 0 22px var(--say-glow), 0 0 44px rgba(110,169,255,.28); opacity:0; transition:opacity .18s ease; pointer-events:none; } /* ...AND IT IS WRITTEN IN LIGHT, in the direction it is read: a soft edge sweeps across it as it arrives - the window slides along a mask whose far side is clear, so a Hebrew line comes up from its right edge and a Latin one from its left. */ .sketch-say.in{opacity:1; -webkit-mask-image:linear-gradient(to left, #000 42%, transparent 58%); mask-image:linear-gradient(to left, #000 42%, transparent 58%); -webkit-mask-size:260% 100%; mask-size:260% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; animation:sayWrite .75s cubic-bezier(.3,.7,.3,1) both; } .sketch-say.in:dir(ltr){ -webkit-mask-image:linear-gradient(to right, #000 42%, transparent 58%); mask-image:linear-gradient(to right, #000 42%, transparent 58%); animation-name:sayWriteL; } @keyframes sayWrite{ from{-webkit-mask-position:0 0; mask-position:0 0} to{-webkit-mask-position:100% 0; mask-position:100% 0} } @keyframes sayWriteL{ from{-webkit-mask-position:100% 0; mask-position:100% 0} to{-webkit-mask-position:0 0; mask-position:0 0} } /* It is placed by the board now, over the ink of the step it belongs to, so there is no corner for the paced controls to collide with. */ .sketch-say.over-pace{} /* With the motion off, the words are simply there: a mask the animation never moved would hide a Hebrew line whole. */ @media (prefers-reduced-motion: reduce){ .sketch-say{transition:none} .sketch-say.in, .sketch-say.in:dir(ltr){animation:none; -webkit-mask-image:none; mask-image:none} } /* THE CHAPTER'S NAME AT THE TOP OF THE PANE (Dor, 2026-10-02): when each chapter of a lesson IS - "נגיעה 2/3 · 11.11.25 · שעה". The sentence's own look (the hand, the dark halo and the blue glow, no panel), one size up and heavier, on one line. The board places it under the legend (`placeHead`). */ .sketch-head{ position:absolute; z-index:7; top:8px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:0; color:var(--say, #ffffff); font:800 23px/1.25 var(--hand, var(--sans)); text-shadow: 0 0 2px var(--bg-deep), 0 0 5px var(--bg-deep), 1px 1px 0 var(--bg-deep), -1px 1px 0 var(--bg-deep), 1px -1px 0 var(--bg-deep), -1px -1px 0 var(--bg-deep), 0 0 9px var(--say-glow), 0 0 22px var(--say-glow), 0 0 44px rgba(110,169,255,.28); opacity:0; transition:opacity .2s ease; pointer-events:none; } .sketch-head.in{opacity:1} @media (prefers-reduced-motion: reduce){ .sketch-head{transition:none} } /* THE LIGHT UNDER THE INK (web/sketch.js, `bloom`): the board's own picture, small, blurred by the compositor and SCREENED onto the chart, so the glow lands on the candles as light and never as paint. Off the page while the board is empty. */ .sketch-glow{position:absolute; inset:0; z-index:6; pointer-events:none; filter:blur(7px) brightness(1.55) saturate(1.35); mix-blend-mode:screen; opacity:.92} .sketch-glow[hidden]{display:none} /* ---- the ruler ---- Not a mark and not stored: two points the user is asking about, answered while the mouse is still moving. Divs rather than SVG, because snapshot.js paints backgrounds, borders and text and would drop anything else. The frame is the user's gold; the fill is the direction the move went. */ .rule{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden} .rule>div{position:absolute} .r-box{border:1px solid var(--gold-line); background:var(--gold-soft); border-radius:2px} .r-box.up{border-color:rgba(47,208,138,.5); background:var(--up-soft)} .r-box.down{border-color:rgba(255,93,115,.5); background:var(--down-soft)} .r-tag{ padding:5px 9px; border:1px solid var(--gold-line); border-radius:6px; background:rgba(11,14,19,.92); box-shadow:0 4px 14px rgba(0,0,0,.45); white-space:nowrap; text-align:center; } .r-tag b{ display:block; color:var(--text); font:600 12.5px/1.25 var(--mono); font-variant-numeric:tabular-nums; } .r-tag.up b{color:var(--up)} .r-tag.down b{color:var(--down)} /* The two prices it ran between, then how long - stepping down in weight, so the percent is what you read first and the rest is there to check it. */ .r-tag span{ display:block; margin-top:3px; color:var(--text); font:500 11px/1.25 var(--mono); font-variant-numeric:tabular-nums; } .r-tag i{ display:block; margin-top:2px; color:var(--muted); font-style:normal; font:500 10.5px/1.25 var(--mono); font-variant-numeric:tabular-nums; } /* THE START, WAITING TO BE PUT WHERE THE MOVE BEGAN. The phone's stage before the measurement: not a box of zero width but a ring, because nothing has been measured yet and a box with a label on it says something has. A ring rather than a disc so the candle it is standing on can be seen THROUGH it - the whole gesture is aiming at a bar, and a solid dot under a fingertip hides exactly the thing being aimed at. NINE PIXELS, not thirteen: it is a point on a chart where 1px is several cents, so it has to be small enough to say WHICH bar and which price - at 13 it was a marker rather than a point (Dor, 2026-09-22: *"make the dot smaller and nicer, it is a bit too big"*). It gives up no reach by being small: the handle is the whole pane, not the ring, so what you aim with is the drag and never the dot. The user's own gold, like everything else the hand does; `translate(-50%,-50%)` is what makes the point it claims the point it is drawn at. It is never exported - the aim is gone by the time there is anything worth a picture. */ .r-dot{ width:9px; height:9px; margin:0; border-radius:50%; border:1.5px solid var(--gold); background:rgba(11,14,19,.55); box-shadow:0 0 0 1px rgba(11,14,19,.75), 0 0 6px rgba(0,0,0,.5); transform:translate(-50%,-50%); } /* ...AND IT IS FILLED ONCE THE START IS SET. Two stages draw a dot and neither draws a reading, so the dot is the only thing that can say which one the hand is in: hollow while it still moves with the finger, solid once a tap has committed it and the next drag is the measurement. */ .r-dot.set{background:var(--gold); border-color:var(--gold-hi)} /* THE RING IS 9px AND THE HANDLE IS THE WHOLE PANE, which is why it can be this small: the dot is never a target to hit - a drag anywhere moves it by what the finger did (`rulerPressMeans` in `index.html`). `.rule` takes no pointer events at all, and none of this is exported: the aim is gone by the time there is anything worth a picture. */ /* THE CROSSHAIR A FINGER MEASURES WITH, and the two readings it points at. A crosshair is a hover and a finger has none, so this is the phone's only way to be told which price and which bar it is standing on - and it is ours rather than the library's because `setCrosshairPosition` takes a time and v4 resolves it to a bar it HOLDS, while a measurement runs on past the last candle (`web/measure.js`). Dashed and in the user's own gold, like the held reading: it is the same hand asking the same question, and a solid gold line would read as a level somebody drew. Borders rather than a background because a dash is the point; `snapshot.js` reads `backgroundColor` and the top border, so the vertical would be missing from an export - which cannot happen, since the cross exists only while a finger is down on the glass and the camera is a second gesture. */ .r-vl{width:0; border-left:1px dashed var(--read)} .r-hl{height:0; border-top:1px dashed var(--read)} /* ON the axis, where the scale's own numbers are: the question is which price and which bar, and an answer floating in the pane is one more thing over the candles. The library's crosshair labels are this colour, so the two inputs read the same. */ .r-xt, .r-yt{ height:15px; line-height:15px; padding:0 3px; border-radius:2px; background:var(--cross-label); color:var(--bg-deep); text-align:center; white-space:nowrap; font:600 10.5px var(--mono); font-variant-numeric:tabular-nums; } /* A HELD READING, KEPT AFTER THE LIFT: the vertical on the bar it locked onto, that bar's date on the time axis, and a + beside the price label that arms an alert or draws a level there. The layer takes no pointer; the + and its menu do, and are named in PANE_CHROME_BASE. Same gold and the same tag as the ruler's crosshair (its own two classes) - one hand asking one question. */ .readpin{position:absolute; inset:0; pointer-events:none; z-index:5} .readpin[hidden], .readpin [hidden]{display:none} .readpin .r-vl{position:absolute; top:0} .readpin .r-xt{position:absolute} .rp-plus{position:absolute; width:26px; height:26px; padding:0; border-radius:50%; pointer-events:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; background:var(--bg); border:1px solid var(--gold-line); color:var(--gold); font:600 18px/24px var(--mono); text-align:center} .rp-plus:active{background:var(--ovl-tag)} .rp-menu{position:absolute; display:flex; flex-direction:column; gap:4px; padding:5px; pointer-events:auto; border-radius:var(--r-lg); background:rgba(11,14,19,.93); border:1px solid var(--gold-line); box-shadow:0 6px 18px rgba(0,0,0,.5)} .rp-menu button{min-height:36px; padding:0 12px; white-space:nowrap; text-align:left; border-radius:var(--r); background:var(--hover); border:1px solid transparent; color:var(--text); font:500 13px var(--sans); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent} .rp-menu button:active{background:var(--gold-soft); color:var(--gold)} .rp-menu b{font-variant-numeric:tabular-nums} /* THE BAR THAT SAYS A DRAWING IS BEING MADE. A mode has to be visible from inside it, and it has to carry the way OUT of itself on a device with no Esc key - the same rule the selection halo's `×` follows. At the TOP of the pane on purpose: the bottom half of a phone screen is where the thumb draws, and a control there is a control you press by accident mid-gesture. It is named in PANE_CHROME_BASE so the pick, the ruler and the grabs all know a press on it is not a press on the candles. */ .drawbar{ position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:6; display:flex; align-items:center; gap:8px; max-width:calc(100% - 24px); padding:5px 6px 5px 11px; border-radius:var(--r-lg); background:rgba(11,14,19,.93); border:1px solid var(--gold-line); box-shadow:0 6px 18px rgba(0,0,0,.5); animation:dropx .16s var(--ease); pointer-events:auto; touch-action:none; -webkit-tap-highlight-color:transparent; } .drawbar .nm{ color:var(--gold); font:600 12px var(--sans); letter-spacing:.01em; white-space:nowrap; } .drawbar .step{color:var(--muted); font:11.5px var(--sans); white-space:nowrap} .drawbar button{ min-width:28px; height:28px; padding:0 8px; border-radius:var(--r-sm); background:var(--hover); border:1px solid transparent; color:var(--text); font:500 12px var(--sans); cursor:pointer; transition:color var(--dur-1), background-color var(--dur-1); } .drawbar button:hover{background:var(--press); color:var(--gold)} .drawbar button:active{background:var(--gold-soft)} /* The magnet's switch - here and in the D panel's Draw heading. Lit is gold, the hand's colour, because it changes where the hand's points land. */ button.magnet{display:inline-grid; place-items:center; padding:0 5px} button.magnet svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round} button.magnet.on{color:var(--gold); border-color:var(--gold-line); background:var(--gold-soft)} .panel .grp button.magnet{margin-left:6px; width:26px; height:22px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--hover); color:var(--muted); cursor:pointer} .panel .grp button.magnet.on{color:var(--gold); border-color:var(--gold-line); background:var(--gold-soft)} .drawbar input[type=text]{ width:190px; height:28px; padding:0 8px; border-radius:var(--r); background:var(--well); border:1px solid var(--line); color:var(--text); font:12.5px var(--sans); } .drawbar input[type=text]:focus{outline:none; border-color:var(--gold-line); box-shadow:var(--ring)} /* While the ruler is waiting for a point, the pointer says so everywhere in the pane - the canvas sets its own cursor, so it is named too. */ #wrap.measuring, #wrap.measuring canvas{cursor:crosshair} /* ---- the lists, down the left ---- The chart is the message, so the rail is narrow and every row is one line with a number on the end. Gold, because these are the user's own lists and their own holdings - an agent-made group is marked, not recoloured. */ #watch{ position:relative; flex:0 0 var(--rail-w); display:flex; flex-direction:column; min-width:0; background:var(--panel); overflow-y:auto; /* ⚠ `none`, NOT `contain` — THEY STOP DIFFERENT THINGS. `contain` stops the scroll CHAINING to whatever is behind the rail, which was the reason it was here and is still wanted. It does not stop the BOUNCE: pulling a short list down still drags the whole column with it and lets it spring back, which on a list is the pull-to-refresh gesture and this rail refreshes nothing. Reported from the device inside a folder of three lists: *"I can pull down and the whole list goes down, as if I am loading something — and there is no reason for it, and not from the bottom either when there is nowhere to scroll."* `none` is `contain` plus the bounce, so nothing that was wanted is lost. */ overscroll-behavior:none; } /* A hairline, not a slab. The rail is a narrow column and the page's default 4px thumb in --raise reads as a third column beside the numbers; here it is a faint rule that only asserts itself while the pointer is in the rail. */ #watch{scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.13) transparent} #watch::-webkit-scrollbar{width:6px} #watch::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.13); border:1px solid transparent; background-clip:padding-box; border-radius:3px; transition:background .18s var(--ease); } #watch:hover{scrollbar-color:rgba(148,163,184,.3) transparent} #watch:hover::-webkit-scrollbar-thumb{background:rgba(148,163,184,.3); background-clip:padding-box} #watch::-webkit-scrollbar-track{background:transparent} /* ONE SCROLLBAR, NOT TWO. Chrome ignores every ::-webkit-scrollbar rule the moment scrollbar-width or scrollbar-color is set, and on a Mac whose scrollbars are "when scrolling" it then draws the SYSTEM overlay bar - a wide grey track with a white thumb - which came and went over the hairline above (Dor, 2026-10-05, off the installed app). Where the pseudo-elements exist they are the whole styling; the standard pair stays for Firefox. */ @supports selector(::-webkit-scrollbar){ #watch, #watch:hover{scrollbar-width:auto; scrollbar-color:auto} } #watch[hidden]{display:none} /* The rail's edge is the header's hairline stood on end, mirrored from the analyst panel's so the two read as a pair. */ #watch::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:1px; pointer-events:none; background:linear-gradient(180deg,rgba(228,199,120,.5),rgba(228,199,120,.16) 55%,rgba(228,199,120,0)); } #watchBtn.on{color:var(--gold); background:var(--gold-soft); box-shadow:inset 0 0 0 1px rgba(228,199,120,.3)} /* ======================================================================= THE LISTS: FOUR SCREENS, ONE LEVEL EACH ======================================================================= This was an accordion until 2026-09-18 and the accordion is why it is not one now. Measured on the store it is actually used against: FOURTEEN lists, 131 rows, 115 unique symbols, twelve of the fourteen made by the analyst. Folded, that is fourteen headers you scroll to read; opened, one of them is twenty-two rows and the other thirteen are gone off the bottom. Reported as "it is just long, and it is hard to manage". So: folders over lists over symbols, one level on screen at a time, and a fourth screen that cuts across all of it - every symbol once, sorted by what moved. `web/folders.js` is the model; this is the surface. ⚠ EVERYTHING THAT MOVES HERE MOVES ON `transform` OR `opacity`, AND NOTHING ELSE. The rail repaints about once a second all day with the price poll behind it, so anything that can make the browser lay the row out again is a cost on a path the eye is already on (rule 5). That is why the tick flash is a child with a colour rather than a background on the row, why the breadth bar is a gradient behind the row rather than a sized element, and why `will-change` is worn by a screen only while it is sliding. */ /* ---- the head every screen wears ---- A way back, where you are, and what this place is. The crumb names the FOLDER above a list, because "SOXX" on its own does not say which of fourteen lists you walked into. */ .whead{ display:flex; align-items:center; gap:2px; min-height:38px; padding:6px 6px 6px 4px; position:sticky; top:0; z-index:6; background:var(--panel); border-bottom:1px solid var(--line); } /* The hairline under the head is gold at the leading edge and gone by the far one - the same fade the rail's own edge and the analyst panel's use, turned on its side, so the three read as one piece of furniture. */ .whead::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,var(--gold-line),rgba(228,199,120,.10) 60%,transparent); pointer-events:none; } .wback{ flex:none; width:26px; height:26px; display:grid; place-items:center; background:none; border:0; border-radius:var(--r-sm); cursor:pointer; color:var(--muted); transition:color var(--dur-1), background-color var(--dur-1), transform .16s var(--ease); } .wback svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round} .wback:hover{color:var(--text); background:var(--hover); transform:translateX(-2px)} .wback:active{transform:translateX(-3px)} .wcrumb{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; padding-left:2px} .wtitle{ font:600 13px var(--sans); color:var(--text); letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wsub{ font:400 11px var(--sans); color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wact{ flex:none; min-width:24px; height:24px; padding:0 5px; background:none; border:0; border-radius:var(--r-sm); cursor:pointer; color:var(--muted); font:400 13px var(--sans); line-height:1; transition:color var(--dur-1), background-color var(--dur-1); } .wact:hover{color:var(--text); background:var(--hover)} .wact.on{color:var(--gold); background:var(--gold-soft); box-shadow:inset 0 0 0 1px rgba(228,199,120,.3)} /* THE WAY BACK TO THE CHART IS THE PHONE'S ALONE (it replaced the ✕, which was too). On a desktop the rail is a column with a button in the header and a `w` key on top of it; a third way to close one thing is two ways too many. It is turned back on in the coarse-pointer block, where the drawer is the whole screen and the chart behind it cannot be tapped. */ .wact.tochart{display:none} /* The way back to the chart (watchlist.js, `chartBtnHtml`): a small gold line chart in a gold frame - the user's colour, and the one framed key in the head, so it reads as the door rather than as one more action on the list. */ .whead .wact.tochart{ place-items:center; flex:none; width:34px; height:28px; margin-left:4px; padding:0; color:var(--gold); background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:var(--r); box-shadow:inset 0 1px 0 var(--hi), 0 0 10px rgba(228,199,120,.10); } /* THE PLUS IN A HEAD IS THE SIZE OF THE KEY BESIDE IT (Dor, 2026-10-06: *the plus is very small*): a 13px glyph in a 24px box was the smallest target in the head, and it is the one that makes things. Framed in slate, so the gold frame still says which key is the door. */ .whead .wact.gnew,.whead .wact.add{ display:grid; place-items:center; flex:none; width:34px; height:28px; padding:0; font:300 22px/1 var(--sans); color:var(--text); background:rgba(255,255,255,.045); border:1px solid rgba(148,163,184,.22); border-radius:var(--r); } .whead .wact.gnew:active,.whead .wact.add:active{background:var(--raise)} /* A list being made on Glance: its title IS the field (16px, or iOS zooms). */ .gphead.gdraft{cursor:default} .gdraft input{ grid-area:1/1/2/3; width:100%; min-width:0; padding:2px 0 3px; margin:0; font:600 16px var(--sans); color:var(--text); background:transparent; border:0; border-bottom:1px dashed var(--gold-line); border-radius:0; outline:none; } .gdraft input::placeholder{color:var(--dim); font-weight:500} .gdraft input:focus{border-bottom-style:solid; border-bottom-color:var(--gold)} /* The add box on Glance, with its Done beside it and the hits under both. */ .wadd.withdone{display:flex; flex-wrap:wrap; gap:6px; align-items:center} .wadd.withdone input{flex:1; min-width:0} .wadd.withdone .whits{flex-basis:100%} .gpin .wadd{padding:8px 8px 4px} .whead .wact.tochart svg{width:18px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round} .whead .wact.tochart svg .ax{stroke-width:1.2; opacity:.45} .whead .wact.tochart svg .ln{stroke-width:1.9} .whead .wact.tochart:active{color:var(--gold-hi); background:var(--raise)} /* ---- the two tabs: Glance and Folders ---- A segmented control on its own line under the title, the whole width of the rail, so both are a thumb's width wide on a phone. The lit pill is ONE element that glides from the tab you left to the one you pressed (glideTab) while the head holds still and only the body slides underneath. */ /* ⚠ `height:auto`, because the page's own `header{height:44px}` reaches this one on a desktop (a phone's block already lifts it) and the tab row would hang out of a 44px head over the first list. */ .whead.tabbed{flex-wrap:wrap; row-gap:8px; padding-bottom:8px; height:auto} .wtabs{ flex:1 0 100%; display:flex; gap:2px; padding:3px; margin:0 2px; background:rgba(255,255,255,.035); border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px rgba(148,163,184,.07); } .wtab{ position:relative; flex:1; height:30px; display:flex; align-items:center; justify-content:center; gap:6px; background:none; border:0; cursor:pointer; border-radius:calc(var(--r-lg) - 3px); color:var(--muted); font:600 12.5px var(--sans); letter-spacing:.01em; transition:color .2s var(--ease); -webkit-tap-highlight-color:transparent; } .wtab .tl,.wtab .tn{position:relative; z-index:1} .wtab .tn{ font:500 10.5px var(--num); font-variant-numeric:tabular-nums; color:var(--dim); min-width:16px; height:16px; padding:0 4px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.05); transition:color .2s var(--ease), background-color .2s var(--ease); } .wtab:hover{color:var(--text)} .wtab:active .tl{transform:scale(.97)} .wtab.on{color:var(--gold-hi)} .wtab.on .tn{color:var(--gold); background:rgba(228,199,120,.14)} .wtab .ind{ position:absolute; inset:0; z-index:0; border-radius:inherit; background:linear-gradient(180deg,rgba(228,199,120,.16),rgba(228,199,120,.08)); box-shadow:inset 0 0 0 1px rgba(228,199,120,.30), 0 1px 10px -3px rgba(228,199,120,.45); transition:transform 240ms var(--ease); } /* ---- Glance: the pinned lists, open and live ---- */ .wbody[data-screen="glance"]{padding-bottom:10px} .gpin{ margin:10px 6px 0; border-radius:var(--r-lg); background:rgba(255,255,255,.022); box-shadow:inset 0 0 0 1px rgba(148,163,184,.075); overflow:hidden; } .gphead{ width:100%; display:grid; grid-template-columns:1fr auto auto; grid-template-rows:auto auto; align-items:center; gap:0 6px; padding:9px 8px 6px 11px; text-align:left; background:none; border:0; cursor:pointer; color:inherit; border-bottom:1px solid rgba(148,163,184,.07); transition:background-color .14s; } .gphead:hover{background:rgba(255,255,255,.03)} /* A list's name is a card too, so the trail lights it the way it lights every other: gold to the frame in 70ms, back over 700ms. It is inside a section that clips, so the glow is drawn INWARD. */ .gphead{border-radius:var(--r-lg) var(--r-lg) 0 0; transition:background-color .14s, box-shadow 700ms cubic-bezier(.22,.61,.36,1)} .gphead.lit{ box-shadow:inset 0 0 0 1px var(--gold), inset 0 0 14px -7px var(--gold); transition:background-color .14s, box-shadow 70ms linear; } .gphead:active{background:rgba(255,255,255,.05)} .gpname{grid-area:1/1/2/2; font:600 12.5px var(--sans); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .gpmeta{grid-area:2/1/3/2; font:400 10.5px var(--num); color:var(--dim)} .gppct{grid-area:1/2/3/3; font:500 12px var(--num); font-variant-numeric:tabular-nums} .gphead .wchev{grid-area:1/3/3/4} .gpin .gbody{padding:2px 4px 4px; gap:0} /* ---- MINIMISE: the arrow in a pinned list's head ---- The arrow points down while the list is open and turns to point right when it is folded; the press sends out the eye's ring. The fold is animated in watchlist.js on transforms (see the comment over `.gfold`'s handler). */ .gpin{position:relative} .gphead{padding-right:46px} .gfold{ position:absolute; top:9px; right:6px; width:34px; height:34px; z-index:2; display:grid; place-items:center; border:0; border-radius:10px; cursor:pointer; background:rgba(255,255,255,.04); color:var(--muted); box-shadow:inset 0 0 0 1px rgba(148,163,184,.1); transition:background-color .14s, color .14s; -webkit-tap-highlight-color:transparent; } .gfold:hover{color:var(--text); background:rgba(255,255,255,.07)} .gfold svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .34s cubic-bezier(.2,.7,.2,1)} .gpin.folded .gfold svg,.gfold.turned svg{transform:rotate(-90deg)} .gpin.folded .gfold{color:var(--gold-hi)} /* No pop on the arrow: it fired in the same frame as the fold began and read as a jolt on top of the motion. The ring is the press; the turn is the answer. */ .gfold:active{transform:scale(.94)} .gfold.pop::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; animation:eyering 650ms ease-out forwards; } /* The fold itself is a film in watchlist.js (transforms and a clip, layout once at the end); folded, the body is simply not laid out. */ /* The head and its arrow, as one card top: it clips the blocks a swipe uncovers (watchlist.js, `.gtop`) to the list's own top corners. */ .gtop{position:relative; overflow:hidden; border-radius:var(--r-xl) var(--r-xl) 0 0} .gfoldable{overflow:hidden} .gpin.folded .gfoldable{display:none} .gpin.folded .gphead{border-bottom-color:transparent} @media (prefers-reduced-motion:reduce){ .gfold svg{transition:none} .gfold.pop::after{animation:none} } /* A GLANCE ROW IS ONE LINE: the name, then the price and the day side by side. The list screen's two-line row is a target you work with; this is a column you read down, so the rows are hairlines in one card rather than cards. */ /* ⚠ THE BORDER STAYS, TRANSPARENT - the trail lights a card by its FRAME (`.lit` turns `border-color` gold), so a row with no border is a row the finger cannot light. The hairline between rows is a pseudo-element for the same reason: as a `box-shadow` it outranked `.wrow.lit`'s glow. */ .rows1 .wrow{border-color:transparent; border-radius:var(--r); padding:7px 8px 7px 9px} .rows1 .wrow + .wrow::before{ content:""; position:absolute; left:9px; right:8px; top:-2px; height:1px; background:rgba(148,163,184,.06); pointer-events:none; } .rows1 .wrow.lit + .wrow::before,.rows1 .wrow.lit::before{opacity:0} .rows1 .wrow .r{flex-direction:row; align-items:center; gap:10px} /* ONE ROW, EVERYWHERE A SYMBOL IS LISTED (Dor, 2026-10-05: *"the cards in Glance look different from the ones inside a folder - should they match?"*). A row is one line: the name, then the price and the day side by side. It takes a second line ONLY for what it carries beyond that - a company name or a position under the symbol, and on the right a position's worth and P&L, an option's own move or the hours around the session - and then the figures stack as they always did, so nothing is squeezed and nothing is dropped. `.wx` is written by the rail on exactly the rows holding a `.val`, `.xch` or `.och` - it was `:has(.val, .xch, .och)`, which every styling pass re-asked of every row's subtree. */ .rows1 .wrow.wx .r{flex-direction:column; align-items:flex-end; gap:2px} .rows1 .wrow .fx{top:50%; bottom:auto; margin-top:-8.5px} .rows1 .wrow.wx .fx{top:auto; margin-top:0; bottom:7px} /* The list screen's rows sit in ONE card, as Glance's do - a column you read down, hairlines between - rather than a stack of separate frames. */ .wbody[data-screen="list"] .gbody.rows1{ margin:8px 6px 10px; padding:2px 4px 4px; gap:0; border-radius:var(--r-xl); background:linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.014) 40%, rgba(255,255,255,.01)); box-shadow:inset 0 1px 0 rgba(255,255,255,.055), inset 0 0 0 1px rgba(148,163,184,.075), 0 12px 28px -20px rgba(0,0,0,.9); } .wbody[data-screen="list"] .gbody.rows1.over{box-shadow:inset 0 0 0 1px var(--gold-line)} /* What the list is NOT showing, and the two ways to change it: the stepper (how many of its first rows are live here) and the rest of it, one tap. */ .gmore{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 8px 7px 9px; font:400 11px var(--num); color:var(--dim); } .gpin.bare .gmore{padding-top:7px} .gstep{ display:inline-flex; align-items:center; gap:2px; height:24px; padding:0 2px; border-radius:12px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(148,163,184,.08); } .gstep b{min-width:18px; text-align:center; font:500 11.5px var(--num); font-variant-numeric:tabular-nums; color:var(--text)} .gstep button{ width:24px; height:20px; border:0; border-radius:10px; background:none; cursor:pointer; color:var(--muted); font:500 14px/1 var(--sans); transition:color .14s, background-color .14s, transform .12s var(--ease); -webkit-tap-highlight-color:transparent; } .gstep button:hover:not(:disabled){color:var(--text); background:var(--hover)} .gstep button:active:not(:disabled){transform:scale(.88); color:var(--gold-hi)} .gstep button:disabled{opacity:.3; cursor:default} .grest{ background:none; border:0; cursor:pointer; padding:4px 2px 4px 8px; font:500 11.5px var(--sans); color:var(--muted); transition:color .14s; } .grest:hover{color:var(--gold-hi)} .gall{font:400 11px var(--sans); color:var(--dim)} .gnote{ margin:0 9px 9px; padding:7px 9px; border-radius:var(--r); font:400 11px/1.45 var(--sans); color:var(--muted); background:rgba(228,199,120,.05); box-shadow:inset 2px 0 0 rgba(228,199,120,.45); } /* The hold: the held list lifts and follows the finger; the others step aside on a transition so the place is already open under it. */ #watch.pinlift{user-select:none; -webkit-user-select:none; touch-action:none} #watch.pinlift .gpin{transition:transform .18s var(--ease)} #watch.pinlift .gpin.held{ transition:none; position:relative; z-index:5; box-shadow:inset 0 0 0 1px rgba(228,199,120,.35), 0 14px 32px -10px rgba(0,0,0,.7); } .ghint{margin-left:auto; color:var(--dim); opacity:.8} .gphead{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none} .gfoot{ display:flex; align-items:center; gap:8px; margin:14px 12px 4px; font:400 10.5px var(--num); color:var(--dim); } .gmeter{position:relative; width:46px; height:3px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden} .gmeter i{position:absolute; inset:0 auto 0 0; width:calc(var(--used) * 100%); background:var(--gold); border-radius:2px; box-shadow:0 0 6px var(--gold-line)} .gempty{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:18px 12px; font:400 12px var(--sans); color:var(--muted); line-height:1.45; } .gempty b{color:var(--text); font-weight:600} .cpinned{ display:inline-block; width:5px; height:5px; margin-left:6px; vertical-align:middle; border-radius:50%; background:var(--gold); box-shadow:0 0 6px var(--gold-line); } .mact.mpin.on{color:var(--gold-hi); box-shadow:inset 0 0 0 1px rgba(228,199,120,.35)} @media (prefers-reduced-motion:reduce){ .wtab .ind{transition:none} } /* ---- the company's mark, beside its ticker ---- A round mark the way TradingView draws one: the logo where `logos.py` has one, the ticker's first letter on a colour of its own where it has not (a future, an index, a yield, a logo that failed). The letter is ALWAYS drawn and the image sits over it, so a failed load leaves the letter rather than a hole, and nothing jumps when the image arrives. The colour is the ticker's hash, held dark and desaturated so twelve of them down a list do not outshout the green and red they sit beside. */ .wlogo{ position:relative; flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; overflow:hidden; isolation:isolate; background:hsl(var(--lh,210) 28% 26%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); } .wlogo b{font:600 10px/1 var(--sans); color:hsl(var(--lh,210) 45% 82%); letter-spacing:0} .wlogo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; background:#fff; } .wrow .wlogo{margin-right:2px} /* ---- GLANCE, FINISHED: the surface a person opens to read and close ---- Restraint over decoration, and every touch is one the rail already speaks: - a section is a card lifted off the panel by a hairline of light along its top edge and a soft shadow under it, not a frame drawn round it; - each list's name carries the breadth baseline the folders carry - how much of it is green and how much red, at a glance, before a number; - the list's median is a quiet outlined chip, so the eye reads the rows' solid pills as the figures and the header's as the summary; - the folder it lives in is a small-caps label rather than a second name; - the pills get an inner edge in their own colour, which is the difference between a tint and a lozenge; - "live" earns a breathing dot, and only while the tape is open. */ .whead.tab-glance .wtitle{font-size:15px; letter-spacing:.005em} /* ⚠ THE BREATH IS TWO COMPOSITED LAYERS, NOT A BOX-SHADOW. It was one `::before` animating `box-shadow` (0 → 4px of rgba(47,208,138,.12)) beside its opacity, for ever - and a box-shadow cannot be composited, so while the lists were open the main thread restyled, repainted and committed the head EVERY frame: measured at 390x844 under x4 CPU, 359 paints and commits in 3s and 484ms of main-thread tasks, against 22 and 157ms this way. Same picture: the dot (`.gdot`, the old pseudo's box exactly) breathes its opacity, and the ring is its `::before` - inset by the 4px the shadow spread to, so a scale of 6/14 is a spread of 0 - growing and fading on the same clock, under the dot's opacity as the shadow was, and clipped by `.wsub` as it was. `::after` is the dot's own disc, painted after the ring. */ .whead.live .wsub .gdot{ position:relative; display:inline-block; width:6px; height:6px; margin:0 6px 1px 1px; border-radius:50%; vertical-align:middle; opacity:.75; animation:gbreathe 2.4s ease-in-out infinite; } .whead.live .wsub .gdot::before,.whead.live .wsub .gdot::after{ content:""; position:absolute; border-radius:50%; } .whead.live .wsub .gdot::before{ inset:-4px; background:rgba(47,208,138,.12); opacity:0; transform:scale(.4286); animation:gring 2.4s ease-in-out infinite; } .whead.live .wsub .gdot::after{inset:0; background:var(--up)} @keyframes gbreathe{0%,100%{opacity:.75} 50%{opacity:1}} @keyframes gring{ 0%,100%{opacity:0; transform:scale(.4286)} 50%{opacity:1; transform:scale(1)} } .wbody[data-screen="glance"]{ background:radial-gradient(120% 40% at 50% 0, rgba(228,199,120,.035), transparent 70%); } .gpin{ border-radius:var(--r-xl); background:linear-gradient(180deg, rgba(255,255,255,.034), rgba(255,255,255,.014) 40%, rgba(255,255,255,.01)); box-shadow:inset 0 1px 0 rgba(255,255,255,.055), inset 0 0 0 1px rgba(148,163,184,.075), 0 12px 28px -20px rgba(0,0,0,.9); } .gphead{border-radius:var(--r-xl) var(--r-xl) 0 0; border-bottom-color:rgba(148,163,184,.06)} .gphead::before{inset:auto 13px 3px 13px; opacity:.75} .gpmeta{text-transform:uppercase; letter-spacing:.08em; font-size:9.5px; font-weight:500} .gppct{ justify-self:end; padding:2px 8px; border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px currentColor; background:transparent; } .gppct.up{color:var(--up); box-shadow:inset 0 0 0 1px rgba(47,208,138,.35)} .gppct.down{color:var(--down); box-shadow:inset 0 0 0 1px rgba(255,107,124,.35)} .gppct.flat,.gppct.none{color:var(--dim); box-shadow:inset 0 0 0 1px rgba(148,163,184,.2)} .rows1 .wrow .ch.up{box-shadow:inset 0 0 0 1px rgba(47,208,138,.16)} .rows1 .wrow .ch.down{box-shadow:inset 0 0 0 1px rgba(255,107,124,.16)} .rows1 .wrow .px{font-weight:500; letter-spacing:.01em} .rows1 .wrow .sym{font-weight:600} @media (prefers-reduced-motion:reduce){ .whead.live .wsub .gdot{animation:none; opacity:1} .whead.live .wsub .gdot::before{animation:none; opacity:0} } /* ---- the screen itself ---- `--dir` is +1 walking deeper and -1 coming back, written by render(). A repaint that did not change screen gets neither and does not move - an account refresh every thirty seconds must not re-play the journey. */ .wbody{display:flex; flex-direction:column; min-width:0} /* ---- the back-drag: two screens, and the one behind is real ---- The screen behind is DRAWN and dragged in rather than merely arrived at. The first version nudged the current screen 28px and jumped, and a gesture that shows you where you are going while you decide is the difference between a shortcut and a transition you can change your mind in the middle of. Both layers move on `transform` alone; the one behind travels at 35% of the finger, which is the parallax that makes the eye read it as UNDER rather than beside. No transition while a finger is on it — a transition racing a thumb is what "not smooth" means (rule 5) — and one on release, which is what finishes the journey. */ /* ⚠ PROMOTED WHILE THE RAIL IS OPEN, not on the frame it starts moving. Building the composited layer is a first-run cost paid on the frame the eye is most on - reported as a jump on the very first navigation and on no other. `.wscreen` exists only while the drawer is open, and it is exactly the thing that moves on every navigation, so it costs nothing the rest of the time. The same argument `#watch`'s own `will-change` already makes one level up. */ .wscreen{transition:transform 200ms var(--ease), opacity 200ms var(--ease); will-change:transform} .wscreen.backing{transition:none; will-change:transform} .wunder{ position:absolute; left:0; right:0; z-index:2; overflow:hidden; background:var(--panel); pointer-events:none; transition:transform 200ms var(--ease), opacity 200ms var(--ease); } .wunder.backing{transition:none; will-change:transform, opacity} /* The one you are on rides above it, and casts an edge so the two do not read as one long sheet sliding. */ #watch .wscreen{position:relative; z-index:3; background:var(--panel)} /* ...and a screen `slide()` turned into the layer behind, in place: under the one arriving and clipped to the band on screen - what the `.wunder` wrapper was, without the wrapper - and `.wblock` over it is what makes it untouchable, because `pointer-events` would restyle all of it. */ #watch .wscreen.leaving{z-index:2; overflow:hidden} #watch .wblock{position:absolute; left:0; right:0; z-index:2} .wscreen.backing{box-shadow:-8px 0 24px rgba(0,0,0,.45)} /* ⚠ THERE IS NO ENTRY ANIMATION, AND THAT WAS THE BLINK. The body used to come in from `opacity:0` with every card and row rising 7px behind it on a stagger - right when a navigation simply swapped the markup, and wrong the moment `slide()` existed: both ran on every navigation, so the screen came in from the side WHILE everything on it faded up from transparent. Two animations over one event, and what the eye reads is not two movements, it is a flash. The screen travelling IS the transition; what is on it has already arrived. `wrise` survives for the two things that genuinely APPEAR - the ⋯ menu and the new-list form - because a popover opening is one object arriving, not a whole screen of them. */ @keyframes wrise{ from{opacity:0; transform:translate3d(0,7px,0)} to{opacity:1; transform:none} } /* ---- THE BREADTH BAR ---- How much of a folder is green, as a shape rather than as a number. The specification this was built from asked for a ghost SPARKLINE behind each folder row. It was costed and dropped: a folder's sparkline is an intraday series for every symbol in it, aggregated - one fetch per symbol per folder, which is exactly the traffic the redesign exists to stop, and on a cold rail it draws nothing for ten seconds. This says the thing the sparkline was wanted for and is free: it is the quotes already on the row. `--gup` is the green share and `--gdn` the point where red stops; what is left is unpriced, and stays dark on purpose - a folder nobody has quoted must not look like a flat one (rule 6). IT IS A 3px BAND ALONG THE FOOT, NOT A WASH BEHIND THE ROW, and the shape was decided the first time anybody SAW it (2026-09-18 - it had never painted once, see below). Full height it was a hard vertical seam across the middle of every card with the red half sitting directly under the figures - the one thing this block's own note said it must never do, which it had been getting away with by being invisible. A band touches no text, so it can be read at 0.6 instead of hidden at 0.085, and a hard edge is CORRECT for a bar where it was an artefact in a wash. ⚠ THE SHARES ARE `--gup`/`--gdn` AND MAY NEVER GO BACK TO `--up`/`--down`, WHICH IS WHAT THEY WERE UNTIL 2026-09-18. The palette's two tokens, set inline on the very card the figures sit in: a custom property INHERITS, so every `color:var(--up)` underneath resolved to `0.688` - invalid at computed-value time, which for an inherited property means `color` takes its PARENT's value, the UA button colour. Black here, iOS blue on the phone it was reported from, on every figure of the home screen at once. And the bar itself never painted: the name is read below as a COLOUR and as a POSITION, so whichever meaning arrived, the other one made the whole declaration invalid and `background` fell back to none. One collision, four symptoms, and it looked like four unrelated bugs. */ .wuniverse,.wpin,.wfolder,.wcard,.wsum,.gphead{position:relative; isolation:isolate} .wuniverse::before,.wpin::before,.wfolder::before,.wcard::before,.wsum::before,.gphead::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; opacity:.6; background-image:linear-gradient(90deg, var(--up) 0, var(--up) calc(var(--gup,0) * 100%), var(--down) calc(var(--gup,0) * 100%), var(--down) calc(var(--gdn,0) * 100%), transparent calc(var(--gdn,0) * 100%)); background-repeat:no-repeat; background-position:bottom left; background-size:100% var(--breadth-h,3px); transition:opacity .3s var(--ease); } .wfolder:hover::before,.wcard:hover::before,.wuniverse:hover::before,.wpin:hover::before{ opacity:.9; } /* ...AND IT IS A BASELINE RATHER THAN THE CARD'S FLOOR (the look pass, 2026-09-27). The same shares on the same host, drawn as a 2px rule with rounded ends, inset from both edges and lifted off the corner radius, over a faint track - so the unpriced remainder still reads as dark rather than as a flat day (rule 6). The rule above is left exactly as it was, because `BAR_HOSTS` is asserted against its selector text. */ .wuniverse::before,.wpin::before,.wfolder::before,.wcard::before,.wsum::before,.gphead::before{ inset:auto 12px 4px 12px; height:2px; border-radius:2px; background-color:rgba(255,255,255,.035); background-size:100% 100%; } /* ---- screen 1: the folders ---- TWO LINES, AND THE SECOND ONE IS WHY. The rail is 216px on a desktop - the chart is the message, so the column is narrow and that is not negotiable - and a folder row wants a name, a count, its loudest mover, a percentage and a chevron. On one line the leader squeezed the percentage off the end: measured at 216px, "Indices & breadth 3 lists · 25 +2…" with the figure clipped mid-digit, which is the one thing on the row that must never be half-read. So the row is a grid: what it IS on top, what it is DOING underneath. The name and the percentage lead, because those are the two things a glance is for; the count and the loudest name are the second read. It also gives the breadth bar a body tall enough to be a shape rather than a stripe. ⚠ EVERY CHILD IS PLACED EXPLICITLY, AND THAT IS NOT TIDINESS. Grid places items with a definite ROW and an indefinite COLUMN in a pass of their own, after the auto-flow cursor has already moved - so `.uname` (auto) and `.upct` (`grid-row:1`) came out in the opposite order and the whole rail rendered right-to-left: the percentage first, then the name, then the chevron. It looks exactly like a direction bug and is not one. Naming both axes on every child removes the pass. */ .wuniverse,.wpin,.fgo{ display:grid; align-items:center; gap:0 6px; text-align:left; grid-template-columns:auto 1fr auto auto; grid-template-rows:auto auto; } .wuniverse,.wpin{ width:calc(100% - 12px); margin:8px 6px 0; padding:calc(8px * var(--card-scale)) calc(8px * var(--card-scale)) calc(8px * var(--card-scale)) calc(10px * var(--card-scale)); border-radius:var(--r-lg); cursor:pointer; background:rgba(255,255,255,.025); border:1px solid transparent; transition:border-color .14s, transform .14s var(--ease); } /* A TILE, NOT A FRAME: a faint lift off the panel and no edge at rest - the edge is the trail's to light, and a hover lifts the fill instead. */ .wuniverse:hover,.wpin:hover{background:rgba(255,255,255,.045)} /* The glow owns the lift; `:hover` owns nothing but the press, or the two transforms take turns overriding each other on a desktop. */ .wuniverse:active,.wpin:active{transform:translateY(0) scale(.995)} /* col 1 is the dot's, and only the account has one - everything else starts at col 2 so the three cards line up down their names. */ .pdot{grid-area:1/1/3/2; width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold-line)} .uname,.pname,.fname{ grid-area:1/2/2/3; font:600 calc(12.5px * var(--card-scale)) var(--sans); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .uname,.fname{color:var(--text)} .pname{color:var(--gold-hi)} .upct,.ppct,.fpct{ grid-area:1/3/2/4; justify-self:end; font:500 calc(11.5px * var(--card-scale)) var(--num); font-variant-numeric:tabular-nums; } .umeta,.pmeta,.fmeta{ grid-area:2/2/3/3; font:400 calc(10.5px * var(--card-scale)) var(--num); color:var(--dim); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* The account is the one list you did not choose to watch, so it is gold - the rail's whole vocabulary for "this is yours". The dot is a pin without a glyph: a pin points somewhere and this is not pointing, it is saying first. */ /* ...AND THE GOLD IS A LEADING EDGE AND A TINT, NOT A FRAME: one thin line down the left of the tile and a whisper of gold under it (the look pass). */ .wpin{background:rgba(228,199,120,.055); box-shadow:inset 2px 0 0 var(--gold)} .wpin:hover{background:rgba(228,199,120,.085)} /* ---- the two sections, and their verbs ---- The home screen holds folders AND loose lists, and until it said so the model was unreadable: *"I do not understand how I make a list only of stocks and not a list of lists"*. A hairline said they were different and did not say HOW. Two words say it, and the `+` sits ON the heading, which puts the verb exactly where the thing it makes will appear. */ /* A heading in the words it is written in, with its count as a quiet number and no rule running to the edge: the spacer that held the rule still pushes the `+` to the end of the line, and now draws nothing. */ .whead2{ display:flex; align-items:center; gap:6px; padding:14px 10px 5px; font:600 11.5px var(--sans); letter-spacing:.01em; color:var(--muted); } .whead2 span{font:500 11.5px var(--num); color:var(--dim)} .whead2::after{content:""; flex:1; height:1px; background:none; order:1} .wadd2{ order:2; width:22px; height:22px; flex:none; display:grid; place-items:center; background:none; border:1px solid transparent; border-radius:var(--r-sm); color:var(--muted); cursor:pointer; font:400 16px/1 var(--sans); transition:color var(--dur-1), background-color var(--dur-1); } .wadd2:hover{color:var(--text); background:var(--hover)} .wadd2:active{background:var(--press)} /* One line, once, when there is nothing in the section to explain it. It is the only prose on the rail and it earns its place by being the answer to the question that produced the section. */ .whint{ margin:2px 8px 4px; padding:8px 10px; border-radius:var(--r); background:rgba(255,255,255,.02); border:1px solid transparent; font:400 11px/1.5 var(--sans); color:var(--dim); } .whint b{color:var(--muted); font-weight:600} /* ---- the card in the hand ---- A copy of the carried list, on `body` at `position:fixed` — the only place immune to BOTH the rail's scrolling and the screen being replaced under it, and being replaced is the point: taking the card to the leading edge turns the screen while the hand keeps holding it. `pointer-events:none`, so the hit test for what is UNDERNEATH keeps working through it. It is lifted off the surface rather than merely moved — a real shadow and the gold edge — and NOTHING about it transitions, because it is under a finger (rule 5). */ /* ⚠ `.wcard.wfloat`, NOT `.wfloat`, AND THAT ONE SELECTOR COST AN EVENING. The float carries `.wcard` too, for the look - and `.wcard{position:relative}` (added to anchor the ⋯) sits LATER in this file at equal specificity, so it won: the card computed to `relative`, flowed to the bottom of `` at offsetTop 774, and the per-frame translate moved it from THERE. It tracked the finger horizontally and sat seven hundred pixels below it, which is exactly what *"I do not understand where the list is"* looked like from the other side. Nothing about the maths was ever wrong. */ .wcard.wfloat{ position:fixed; left:0; top:0; z-index:60; pointer-events:none; will-change:transform; opacity:.97; /* IT IS SEEN TO LEAVE THE SURFACE. The copy is drawn exactly over the card it came from, so without this nothing visibly happens on the press at all - the only cue was a ghost the float was sitting on top of. */ animation:wpick 150ms var(--ease) both; border-radius:var(--r-lg); background:var(--panel2); border:1px solid var(--gold); overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 0 1px var(--gold-line); } .wfloat .cmore,.wfloat .x{display:none} /* ...and at the leading edge, saying the screen is about to give way. The rule grows over exactly the wait — the promise `GRAB_HOLD_MS` already makes over the chart, because a wait that does not say how long it is feels broken. */ .wfloat.atedge::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--gold); animation:wspring 240ms linear both; } @keyframes wspring{from{transform:scaleY(0)} to{transform:scaleY(1)}} /* ⚠ SCALE ONLY, NEVER `transform`. The float's own transform is written per frame by `moveFloat`, so an animation on the same property would fight it - the card would twitch back to where the keyframe says it is, once a frame. `scale` is its own property and composes with it. */ /* ⚠ NO SCALE IN THE KEYFRAMES. The offset that keeps the grab point under the finger is computed FOR `PICK_SCALE`, so a scale that animates from 1 means the card is the wrong size for its own offset for the first 150ms - it starts somewhere else and slides into place, under a finger that has not moved. The shadow alone says it has been picked up. */ @keyframes wpick{ from{box-shadow:0 0 0 rgba(0,0,0,0)} to{box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 0 1px var(--gold-line)} } /* ⚠ NO `scale` PROPERTY HERE. It is applied AFTER `transform`, so it would multiply the per-frame translate as well - the card moving 0.62px for every pixel of finger, and starting a hundred and nineteen away from it. The scale is written inside the transform by `paintFloat`, after the translate. */ /* ...and it is PUT DOWN on what took it, rather than vanishing at the moment the list rebuilds underneath. */ .wfloat.settling{ animation:none; transition:transform 160ms var(--ease), opacity 160ms var(--ease), scale 160ms var(--ease); } /* JUST LANDED. One beat of the gold it was carried in, so the eye finds it without anything moving - the card is already where it belongs and this only says which one it is. */ .wcard.landed{animation:wland 900ms var(--ease) both} @keyframes wland{ 0%{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 22px -4px var(--gold)} 60%{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold-line), 0 0 14px -6px var(--gold)} 100%{border-color:transparent; box-shadow:none} } /* WHERE IT CAME FROM, left in place and dimmed. A gap that simply closed would say the card had already gone; the ghost says it is still yours until you put it down, and it is where Escape puts it back. */ /* ⚠ FADED, NOT SNAPPED. Both of these changed in a single frame at the moment of pick-up - the card to a quarter and its chips to nothing - which is one more thing flashing on a surface that already has a card leaving it. */ .wcard.ghost{opacity:.25} .wcard.ghost .cchips{opacity:0} .wcard .cchips{transition:opacity 140ms var(--ease)} /* ...and once the screen has turned, every folder says it will take it. This is the one time the rail shows more than one gold edge, and it is right: they are not a selection, they are a set of answers. */ /* ⚠ AND THE TARGETS COME UP, THEY DO NOT SWITCH ON. Every folder gaining a dashed outline and a gold name in the same frame is five or six cards changing at once, which is the blink the entry animation was - the same mistake one layer along. `outline-color` from transparent rather than `outline` from none, because a width appearing is a paint either way. */ #watch .wfolder{outline:1px dashed transparent; outline-offset:-1px; transition:outline-color 160ms var(--ease)} #watch.filing .wfolder{outline-color:var(--gold-line)} #watch .wfolder .fname{transition:color 160ms var(--ease)} #watch.filing .wfolder .fname{color:var(--gold-hi)} /* Where a dragged list will land. Gold, because filing is the user's own — and a folder is the only thing that can be landed ON: putting a list down anywhere else means out here, on the main screen. */ .wfolder.over{ border-color:var(--gold); background:var(--gold-soft); box-shadow:0 0 0 1px var(--gold); } .wcard.drag{opacity:.4} /* A FOLDER HAS TO LOOK LIKE ONE, now that a plain list sits beside it. Both are cards on the same screen, and the only thing saying which is which was the meta line — "4 lists · 53" against "21". A 9px outline of a folder in front of the name is the whole distinction, drawn in the dim ink so it reads as a KIND rather than as an ornament. */ .wfolders{display:flex; flex-direction:column; padding:8px 6px 0} .wfolder .fname::before{ content:""; display:inline-block; width:11px; height:9px; margin-right:6px; vertical-align:baseline; border:1.2px solid var(--dim); border-radius:2px; border-top-width:3px; border-top-color:transparent; box-shadow:inset 0 2px 0 -1px var(--dim); } .wfolder.lit .fname::before,.wfolder:hover .fname::before{border-color:var(--gold)} /* ...and the loose lists get a hairline above them, so the home screen reads as two kinds of thing rather than one long column. */ .wcards.loose{margin-top:0} /* THE LISTS STEP ASIDE to open a place for something being put down among them, the same answer the rows give one level down. `SETTLE_MS` is the same 160ms the row gap uses, so the two read as one behaviour at two sizes. */ #watch.filing .wcards.loose .wcard{transition:transform 160ms var(--ease)} .wfolders{gap:4px} /* The row is the container - it carries the border, the breadth bar and the red block - and `.fgo` inside it is the button that opens the folder. Same arrangement as `.wcard`/`.cgo`, for the same reason: a