/* The SUBJECT sheet (js/subject.js). An overlay, never a reflow -- appended to , so opening it moves no rect on the card behind it (AGENTS.md rule 25's text, and rule 16's shape: an overlay, not a layout change). */ /* No transition, on purpose -- an animated slide-in was not asked for, and the timing has nothing to key off (this sheet has no clock, unlike a card's own entrance). Bare bones: the overlay is simply there or not. */ .subjectsheet{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end; font-family:"IBM Plex Sans",system-ui,sans-serif;color:var(--ink)} .subjectsheet[hidden]{display:none} .subjectsheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.6)} /* Send-back, session 46: "this should be more up and take up most of the screen." The old panel had a CEILING (`max-height:80vh`) and no floor, so its actual height was whatever the content came to -- a graph plus a couple of rows never reached 80vh, and the sheet read as a half-screen card, not "more up." `height` here is not a ceiling: it is most of the screen regardless of how little a given subject has to show, which is the actual fix -- a sheet a reader has to scroll a little is the tradeoff for one that does not look like it stopped at the middle of the phone. The 28px gap at the top keeps the scrim visible, the same "this is a sheet over something, not a new screen" cue TikTok's and Robinhood's own profile sheets both keep. Session 46, the reviewer on CRCL, live: "None of the cards contain a grey box." The panel was `--panel` with an `--edge` border -- the one surface in the app drawn as a lit grey slab. A card's ground is black and its detail view (js/open.js) opens on that same black; the sheet is the same kind of page and takes the same ground, no border. */ .subjectsheet-panel{position:relative;width:100%;max-width:480px;margin:0 auto; height:calc(100dvh - 28px);display:flex;flex-direction:column; background:var(--ground); border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding-bottom:env(safe-area-inset-bottom,0px);overflow:hidden} /* Session 46, the reviewer: "do you think the back carrot should be on the same line? ... let's add the matching bar too." The bar is the detail view's rail (shell.css `.rail`: chevron, then the subject, 14px apart, the chevron in the muted ink) with the sheet's identity block as the subject. One line, no dead row above the name. The rule under it is the open card's own (`.card.open .rail`, 1px `--line`, 11px below the row) -- the reviewer, on the two side by side: "where's the bar?" */ .subjectsheet-bar{flex:none;display:flex;align-items:center;gap:14px;padding:14px 18px 11px; border-bottom:1px solid var(--line)} .subjectsheet-back{appearance:none;background:none;border:0;padding:8px;margin:-8px; color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center} .subjectsheet-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} /* The body is the one thing that scrolls -- the bar above stays put, so the back control is always reachable no matter how far down "In today's feed" runs. `min-height:0` is load-bearing on a flex child asked to scroll: the default `min-height:auto` on a flex item sizes it to its content first and only THEN clips, which is no clip at all with a tall feed list. */ .subjectsheet-body{flex:1;min-height:0;overflow-y:auto;padding:18px 18px 18px} /* Session 46 (lane-subject-feel), reviewer on WING: "wing needs to be top left (maybe a small componet) with the acutal company name too." The centred TikTok-profile hero this replaces read as the whole page's identity, which is more than a subject overview inside a sheet needs to claim -- the sheet already knows whose page it is (the back chevron above it came from a tap on THIS subject). A small top-left block instead: the ticker in its mark, the company name under it, the same reading order a card's own masthead and a Swings row use. The lettered avatar circle that sat beside them came out the same session ("Remove this C thing" -- no card draws one, and no card draws a grey box). `brand(card)`/`palette(card)` (js/subject.js) still set the class and the custom properties the mark reads; a subject nothing could be named for still draws `brand-none`, the same neutral every other uncoloured surface in the renderer falls back to. */ .subjectsheet-id{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center; gap:10px;margin:0;text-align:left} /* Session 46, the reviewer on CAI: "let's put this all on one line and make it bigger." Ticker and name on one baseline, the way a Swings row reads them left to right; the ticker at the size a card's own masthead symbol draws (--fs-22), the name a step under it in the muted ink. */ .subjectsheet-idtext{display:flex;flex-direction:row;align-items:baseline;gap:12px;min-width:0} /* The ticker mark itself -- `.hooktick.stamptick` (shell.css), the same mono face and weight a card's own structural marks (a Swings row, the Index Change's stamp) already draw a ticker in, not a bespoke size typed here a second time (docs/design-system.md's "the ticker mark, everywhere a ticker appears, gets the one mark"). No `data-subject` on this one -- it names the page the reader is already on, so it is not wired to reopen itself. */ .subjectsheet-sym{font-size:var(--fs-22);white-space:nowrap} .subjectsheet-name{font-size:var(--fs-15);color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Robinhood's own hero price -- the loudest number on the page, not a line of muted text beside a chip. The price itself is `--fs-29`, the same size `.card.solo .rdprice` already reads at (shell.css), so a figure copied verbatim off a card's own readout does not suddenly look like a different kind of number here; the change beside it stays sentence-sized, the way a stock app's own delta reads smaller than the price it qualifies. */ .subjectsheet-figure{display:flex;flex-direction:column;align-items:center;gap:2px; font-family:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace; font-size:var(--fs-15);color:var(--muted);text-align:center; margin-bottom:16px;min-height:2.4em} .subjectsheet-figure b{display:block;font-size:var(--fs-29);font-weight:700; line-height:1.05;letter-spacing:var(--ls-n02);color:var(--ink)} .subjectsheet-figure .up{color:var(--up)} .subjectsheet-figure .dn{color:var(--down)} /* Session 46 (lane-subject-feel), reviewer: "A graph that looks closer our our graph style (smaller)." js/viz.js's shared `lineChart`, called the way The Move (`js/forms/reaction.js`) and The Poll (`js/forms/poll.js`) both call it now -- default `sides` (the two-tone up/dn clip, styled below the same way `.rp-line.up`/`.dn` are in css/replay.css) and a `baseline` ruled at the series' own first point. `position:relative` because `lineChart` positions its own `.subj-ref` child against this box, same convention as every card form's own chart wrapper (css/replay.css's `.pathwrap`). Sized in real px, not the 393-design-px `.cardface` system -- this sheet is plain page layout, not a scaled card, and `preserveAspectRatio="none"` on the svg (js/viz.js) stretches to whatever box this rule gives it. Send-back, PR #69: the fixed height used to live on THIS box, with the svg at height:100% of it -- so `.subj-axis` (a normal-flow sibling AFTER the svg, not one of `lineChart`'s absolutely-positioned children) rendered past the box's own bottom edge with nothing to reserve room for it, straight into "IN TODAY'S FEED" below. The fixed height moves to the svg itself; the axis row is back in ordinary flow beneath it, the same way `.rp-axis` (css/replay.css) sits below The Move's own plot rather than inside a box sized to exclude it -- this container is left with no explicit height, so it grows to fit both. */ .subjectsheet-chart{position:relative;margin-bottom:14px} /* 92 -- matches js/subject.js's own CHART_H; the two change together. Down from 148 -- "smaller," a fraction of the sheet rather than the dominant surface Robinhood's own page gave it in the prior pass. */ .subj-svg{width:100%;height:92px;display:block;overflow:visible} .subj-line{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; vector-effect:non-scaling-stroke} /* Up/down, cut at the baseline -- the same split every other chart in the renderer draws (css/replay.css's `.rp-line.up`/`.dn`), not the single uncoloured stroke this sheet used to fall back to under `sides:false`. */ .subj-line.up{stroke:var(--up)} .subj-line.dn{stroke:var(--down)} /* The baseline rule `lineChart` draws under `o.baseline` -- css/replay.css's own `.rp-ref`, same shape: a dashed line at the anchor, unlabelled here (js/subject.js's own comment on why the label is left blank). */ .subj-ref{position:absolute;left:0;right:0;border-top:1px dashed var(--edge)} .subj-ref span{position:absolute;left:0;top:5px;font-size:var(--fs-11);color:var(--dim)} .subj-axis{display:flex;justify-content:space-between;gap:8px;margin-top:6px; font-size:var(--fs-10);line-height:1.2;color:var(--dim);letter-spacing:.04em; font-variant-numeric:tabular-nums} .subjectsheet-feedhead{font-size:var(--fs-10-5);letter-spacing:var(--ls-22); text-transform:uppercase;color:var(--dim);margin-bottom:8px} .subjectsheet-feedlist{display:flex;flex-direction:column;border-top:1px solid var(--line)} .subjectsheet-row{appearance:none;background:none;border:0;border-bottom:1px solid var(--line); color:var(--ink);text-align:left;font:inherit;line-height:1.35; display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:11px 0;cursor:pointer;width:100%} .subjectsheet-row:active{opacity:.6} .subjectsheet-row-head{font-size:var(--fs-13-5);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .subjectsheet-row-when{font-size:var(--fs-11);color:var(--dim);flex:none;white-space:nowrap} /* A SAMPLE row (session 46, "sample cards"): the real row's furniture and tap, plus the chip that says what it is. The chip is the app's own label voice (docs/design-system.md: labels and chips, uppercase, tracked). */ .subjectsheet-row--sample .subjectsheet-row-head{color:var(--muted)} .subjectsheet-chip{flex:none;font-family:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace; font-size:var(--fs-9);letter-spacing:var(--ls-16);text-transform:uppercase; color:var(--dim);border:1px solid var(--line);border-radius:var(--radius-pill); padding:2px 7px;line-height:1.2} /* The TICKER feed's one piece of chrome (js/subject.js `enterTickerFeed`): a pill at the top of the screen, the symbol in its mark, a count, a cross. `z-index` under the sheet (100) and over the feed. `--brand` comes from the brand class and palette style js/subject.js sets on it, the same pair the sheet's own identity block reads. */ .tickerfeed{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%; transform:translateX(-50%);z-index:90;appearance:none;border:1px solid var(--edge); background:var(--panel);color:var(--ink);border-radius:var(--radius-pill); display:flex;align-items:center;gap:8px;padding:6px 10px 6px 12px; font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:var(--fs-12);cursor:pointer} .tickerfeed[hidden]{display:none} .tickerfeed .hooktick{color:var(--brand);font-size:var(--fs-12-5)} .tickerfeed-n{color:var(--dim)} .tickerfeed-x{color:var(--dim);font-size:var(--fs-14);line-height:1;padding-left:2px} /* The tap target's own affordance -- shell.css declares `.hooktick{color:...}` only; this adds cursor, a different property on the same selector, which is not the duplicate-declaration collision AGENTS rule 17 guards against (no overlapping property, so pipeline/selftest.mjs's dup sweep does not flag it). */ .hooktick{cursor:pointer}