:root { /* "Gilded & Obsidian" — deep warm obsidian blacks with champagne-gold accents in place of the old electric SaaS blue. The warmth is subtle (a few degrees toward brown, not sepia); the gold accent ties the chrome to the app's existing wealth identity (gold buys, favorites, Members) instead of fighting it. */ --bg-base: #0C0B09; --bg-chart: #131110; --bg-panel: #1B1815; --bg-input: #282320; --border-main: #2B2621; --border-light: #3C352B; --border-active: #C9A64D; /* Structural panels (top bar, chart, sidebar, rating box) already read as "raised" against --bg-base from background contrast alone — the old --border-main outline on top of that was redundant, and with borders on every single panel nothing got to look "active." This near-invisible hairline replaces those outlines; real borders are now reserved for things that are actually selected/active (Target Sell when it's the active side, a highlighted favorites row, etc). */ --border-hair: rgba(255, 255, 255, 0.05); --accent-bright: #E5C158; --accent-ink: #1C1300; --text-main: #D9D3C7; --text-muted: #8A8274; /* Structural chrome — section headers and the like. Deliberately NOT an accent: a header's job is to name a region, and when every one of them was gold the colour stopped meaning "signal" anywhere on the page. The section's identity still shows, in the 3px accent stripe beside it. Muted parchment, not the cool slate (#8A8D9B) this was. That slate was the only blue-leaning hue on a page of warm obsidian and gold, so five headers in it read as imported chrome sitting on top of the UI rather than part of it. This is the same VALUE — measured at 5.2:1 on the panel against the slate's 5.4:1, so it stays exactly as secondary as it was — just turned warm. It has to stay a value match: the whole point of this token is that headers sit under the data they label. */ --text-structural: #948A78; --buy-color: #E5B842; --sell-color: #26A9AB; --vol-buy: rgba(229, 184, 66, 0.35); --vol-sell: rgba(38, 169, 171, 0.35); --positive: #10B981; --negative: #EF5350; --fav-gold: #FFB300; --shadow: rgba(0, 0, 0, 0.5); /* RuneScape accent palette — used for favorite highlights and headline callouts. Picked to read as "in-game GE" without overwhelming the dark trading-style chrome. THREE roles, one hue each. Gold is the buy side, teal is the sell side, and green means profit or opportunity — never a side. Sell was briefly merged into green, which did remove a near-duplicate but cost the thing that mattered more: with highs, Target Sell AND every positive number all green, "green" stopped saying which of those it meant, and Target Buy vs Target Sell no longer separated at a glance. Teal earns its keep by being the one colour that only ever means "sell side". The teal is pulled COOL, but only just past neutral. Three points on that axis got tested and the middle one won: #26A69A hue 174 green-leaning teal dE 27 from the profit green #26A9AB hue 181 green == blue dE 35 <- this one #22A5B8 hue 188 blue-leaning cyan dE 45 174 is too close: fourteen degrees is not enough separation for two colours that land in the same glance (a green profit figure beside a teal Target Sell, teal high dots over a green +change). 188 separates cleanly but goes dim and cold on this background — blue carries almost no luminance, so a bluer teal at the same computed brightness reads weaker, and it stops feeling native beside the gold. 181 sits where the green and blue channels are within two points of each other: still unmistakably not the profit green, still warm enough to hold up on obsidian. Luminance is +5.7% on the original, and that is the one number that had to move UP rather than stay put — it buys back the crispness the bluer version lost. The chart repaints ~289 high dots a frame in this colour and their intensity has been tuned three separate times, so treat that figure as a ceiling, not a starting point. If this is ever retuned: stay inside hue 178-184. Below is the too-close-to-green failure, above is the cold-and-dim one. The two greens left are split by JOB, not taste: --rs-green is the bright signal green for things that are shouting (a 5-day-high badge, a row accent, a Prime Flip band), and --rs-green-deep is the same emerald as --positive, for green that is just stating a number (profit figures, a live dot, a fresh timestamp). Keep it to those two — a third mid-green buys nothing and makes "which green means what" unanswerable again. */ --rs-green: #4FFF8E; --rs-green-deep: #10B981; --rs-gold: #FFD24D; --rs-gold-deep: #C8841C; --rs-parchment: #F2D49B; /* ONE section-header recipe. Potential Profit, Analyst Rating, Recommended Flip, Favorites, Find Opportunities and the 30-Day Range meter are peers — sections of equal rank — but they had drifted to four different sizes (9 / 10.5 / 11 / 13px), two colours, two weights and three tracking values, with icons on only three of the five. Read top to bottom that looked like a hierarchy nobody designed. These tokens are the single source; change them here, not at the call sites. No leading glyphs: five 12px line icons stacked down a 330px column read as decoration competing with the accent stripe that already names each section, so the stripe does that job alone. 700, not 800: at 11px uppercase with 0.7px tracking a label is already unmistakably a header, and at 800 these five were the heaviest text in the sidebar — heavier than the item names and prices they exist to label. On a 3x phone screen that overshoot is where "everything is bold" comes from; structural chrome should sit under its data, not on top of it. */ --hdr-size: 11px; --hdr-weight: 700; --hdr-track: 0.7px; } * { box-sizing: border-box; } /* Body is allowed to scroll naturally so the footer (with the suggest-a- feature link, FAQ jump, etc.) and the long-form About section below the app viewport are reachable. .wrap stays at 100dvh so the app dashboard fills the initial paint — anything below sits past the fold. */ html, body { width: 100%; } body { margin: 0; min-height: 100dvh; background: var(--bg-base); color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif; -webkit-font-smoothing: antialiased; } button, input { touch-action: manipulation; } /* Themed scrollbars — the browser default light/grey bars looked out of place on the dark UI. WebKit (Chrome / Safari / Edge / Brave / Opera) uses the ::-webkit-scrollbar pseudo-elements; Firefox uses the scrollbar-width / scrollbar-color properties. Mobile native scrollers ignore both, which is fine — they're invisible by default anyway. */ * { scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 6px; border: 2px solid var(--bg-base); transition: background 0.15s ease; } ::-webkit-scrollbar-thumb:hover { background: var(--border-active); } ::-webkit-scrollbar-corner { background: transparent; } /* Visually-hidden but readable to screen readers and search-engine crawlers. Used for the page H1 so the app keeps its dense dashboard layout without sacrificing semantic structure. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* About-PocketGE section — sits below the app viewport. Visible to anyone who scrolls past the dashboard, and crawler-indexable for organic search. */ .about-section { max-width: 880px; margin: 32px auto 64px; padding: 0 20px; color: var(--text-muted); font-size: 13px; line-height: 1.65; } /* The SEO/about content is thousands of laid-out nodes below the fold — skip its render work until scrolled near (crawlers still see it all). Big intrinsic-size placeholder keeps the scrollbar honest. */ .about-section, .site-footer { content-visibility: auto; contain-intrinsic-size: auto 3000px; } .about-section h2 { color: var(--text-main); font-size: 18px; margin: 28px 0 8px; font-weight: 700; } .about-section h2:first-of-type { margin-top: 0; } .about-section p { margin: 0 0 12px; } .about-section a { color: var(--border-active); text-decoration: none; } .about-section a:hover { text-decoration: underline; } /* Sits in the band between the terminal and the about copy, styled as the quiet lead-in to that copy rather than as a fifth panel of the app. No card, no border, no colour of its own — this is prose for a reader who scrolled past the chart, and a crawler that never sees the chart at all. */ .item-seo { max-width: 900px; margin: 0 auto; padding: 18px 20px 0; } .item-seo .is-sum { font-size: 13.5px; line-height: 1.62; color: var(--text-main); margin: 0; } .item-seo .is-sum b { color: #fff; font-weight: 700; } /* Two questions people actually type. Dim, small, and one line each — they earn their place on relevance, not attention. */ .item-seo .is-qa { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; } .item-seo .is-qa p { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin: 0; } .item-seo .is-qa b { color: var(--text-main); font-weight: 700; } /* Real anchors, not JS handlers: the point of this row is that a crawler can follow it. Nothing on the site linked one item page to another before, so the long tail was reachable only through the sitemap. */ .item-seo .is-rel { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); } .item-seo .is-rel a { color: var(--border-active); text-decoration: none; } .item-seo .is-rel a:hover { text-decoration: underline; color: #fff; } .item-seo .is-rel .is-sep { color: rgba(217,211,199,0.34); margin: 0 6px; } @media (max-width: 640px) { .item-seo { padding: 14px 14px 0; } } .about-section .about-intro { font-size: 14px; color: var(--text-main); padding-bottom: 12px; border-bottom: 1px solid var(--border-main); margin-bottom: 20px; } /* A human aside, not more SEO copy — quieter and slightly set apart so it reads as a personal note rather than continuing the product description above it. */ .about-section .about-intro-2 { font-size: 13.5px; color: var(--text-main); margin-bottom: 20px; } .about-section .about-questions { font-size: 13px; margin-bottom: 6px; color: var(--text-main); } .about-section .about-qlist { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 6px; } .about-section .about-qlist li { padding-left: 14px; position: relative; } .about-section .about-qlist li::before { content: "→"; position: absolute; left: 0; color: var(--border-active); } .about-section .about-qlist b { color: var(--text-main); } /* Live component figures rather than screenshots. These reuse the app's own classes (.wl-item, .price-box, .flip-card …) exactly as the landing demo does, so they restyle with the product instead of going stale the moment the UI moves — which, at the rate this thing changes, a PNG would. They also cost no image bytes, stay sharp at any zoom, and are real text for a screen reader. Purely illustrative: nothing here is interactive. */ .about-section .ex { margin: 14px 0 22px; } .about-section .ex-frame { border: 1px solid var(--border-main); border-radius: 10px; overflow: hidden; background: var(--bg-panel); max-width: 460px; pointer-events: none; user-select: none; } .about-section .ex-frame-pad { padding: 10px; } .about-section .ex figcaption { font-size: 11.5px; color: var(--text-muted); margin-top: 7px; max-width: 460px; } /* The app sizes these against its own containers; inside a prose column they need their own footing. */ .about-section .ex .price-strip { display: flex; gap: 6px; padding: 8px; } .about-section .ex .price-box { flex: 1 1 0; min-width: 0; } .about-section .ex .wl-item { cursor: default; } .about-section .ex .flip-card { margin: 0; } /* ── The workflow walkthrough ──────────────────────────────────────────── Numbered steps rather than more prose, because the point of the section is that these four things happen in an ORDER and most people arriving have no idea what that order is. */ .about-section .flow { list-style: none; counter-reset: flowstep; padding: 0; margin: 18px 0 26px; } .about-section .flow > li { counter-increment: flowstep; position: relative; padding: 0 0 22px 42px; } .about-section .flow > li::before { content: counter(flowstep); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(201,166,77,0.13); border: 1px solid rgba(201,166,77,0.45); color: var(--border-active); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; } /* The spine joining the steps — makes it read as one path rather than four unrelated tips. Stops at the last one. */ .about-section .flow > li::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; background: linear-gradient(180deg, rgba(201,166,77,0.35), rgba(201,166,77,0.05)); } .about-section .flow > li:last-child { padding-bottom: 0; } .about-section .flow > li:last-child::after { display: none; } .about-section .flow h3 { margin: 2px 0 6px; font-size: 14.5px; color: var(--text-main); font-weight: 700; } .about-section .flow p { margin: 0 0 10px; } .about-section .flow .ex { margin: 12px 0 4px; } /* Drawn figures. Schematic on purpose: a screenshot of a chart states prices that will be wrong within the hour and stale UI within the month, while the thing being taught — the SHAPE of a setup — is the part that does not change. Inline SVG also themes with the page and costs no extra request. */ /* Capped to the same 460px the component figures use. Without a cap an SVG just takes the whole prose column, and at 840px wide the volume-profile diagram was bigger than the chart it describes. */ .about-section .fig-svg { display: block; width: 100%; max-width: 460px; height: auto; border-radius: 10px; border: 1px solid var(--border-main); background: var(--bg-panel); } /* The three buy / sell / skip setups sit side by side where there is room and stack on a phone — they are meant to be COMPARED, which needs them in one eyeful. */ .about-section .scenarios { display: grid; gap: 16px; margin: 14px 0 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .about-section .scenarios figure { margin: 0; } .about-section .scenarios figcaption { font-size: 11.5px; color: var(--text-muted); margin-top: 7px; } .about-section .scenarios .verdict { display: block; font-weight: 800; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 2px; } .about-section .verdict.v-buy { color: var(--buy-color); } .about-section .verdict.v-sell { color: var(--sell-color); } .about-section .verdict.v-skip { color: var(--text-muted); } /* ── Screenshots ───────────────────────────────────────────────────────── Portrait and landscape are genuinely different layouts, so they are genuinely different shapes on the page: a narrow column beside a wide one. The PNGs already carry their own handset bezel and rounded corners, with real transparency outside them — so there is deliberately no drawn shell here. A CSS frame around an image that already has one reads as a phone inside a phone. For the same reason the shadow is a drop-shadow FILTER rather than a box-shadow: the filter follows the alpha silhouette, so it hugs the rounded corners instead of casting a rectangle behind them. */ .about-section .shots { display: grid; gap: 22px; margin: 16px 0 22px; align-items: start; } @media (min-width: 680px) { .about-section .shots { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 26px; } } .about-section .shot { margin: 0; } .about-section .shot figcaption { font-size: 11.5px; color: var(--text-muted); margin-top: 9px; } .about-section .device { position: relative; } .about-section .device img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 26px rgba(0,0,0,0.55)); } .about-section .device-portrait { max-width: 210px; } .about-section .device-landscape { max-width: 500px; } .about-section .about-devnote { font-size: 12.5px; color: var(--text-muted); padding-left: 12px; border-left: 2px solid var(--border-active); margin-bottom: 24px; } .about-section .faq { margin-top: 4px; } .about-section .faq details { border: 1px solid var(--border-main); border-radius: 6px; margin-bottom: 8px; background: var(--bg-panel); overflow: hidden; } .about-section .faq summary { cursor: pointer; padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--text-main); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .about-section .faq summary::-webkit-details-marker { display: none; } .about-section .faq summary::after { content: "+"; color: var(--text-muted); font-size: 18px; font-weight: 400; flex-shrink: 0; } .about-section .faq details[open] summary::after { content: "−"; } .about-section .faq details[open] summary { border-bottom: 1px solid var(--border-main); } .about-section .faq p { margin: 0; padding: 11px 14px; font-size: 12.5px; } .about-section .popular { margin-top: 24px; } .about-section .popular h3 { color: var(--text-main); font-size: 13px; font-weight: 700; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.5px; } .about-section .popular .item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 14px; } .about-section .popular .item-grid a { display: block; padding: 3px 0; font-size: 12.5px; color: var(--border-active); text-decoration: none; } .about-section .popular .item-grid a:hover { text-decoration: underline; color: #fff; } .wrap { max-width: 1800px; margin: 0 auto; padding: 8px; height: 100dvh; display: flex; flex-direction: column; gap: 8px; } .content-area { display: flex; flex-direction: row; flex: 1; gap: 8px; min-height: 0; min-width: 0; } .main-column { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 8px; } /* Second query container, tracking the same width as .ticker-header inside it. Needed because a @container rule can style a container's DESCENDANTS but never the container element itself — so `@container tickerhdr` could set the toolbar's flex (a child) while `flex-wrap` on .ticker-header was silently dropped, which is a failure with no error and no warning. Querying the wrapper puts .ticker-header back in scope. */ .top-row-wrapper { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; container-type: inline-size; container-name: tickerrow; } /* No card chrome — the search input carries its own border, and that's the one control in this row that actually needs a boundary. Everything else reads fine as controls floating on the page background. */ .top-panel { padding: 4px 2px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 8px; } .panel-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } #logoBtn { font-weight: 800; color: #fff; cursor: pointer; margin-right: 6px; font-size: 16px; letter-spacing: -0.5px; user-select: none; transition: opacity 0.15s; display: flex; align-items: center; } #logoBtn img { width: 18px; height: 18px; image-rendering: pixelated; margin-right: 4px; } #logoBtn:hover { opacity: 0.8; } .search-group { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; } /* Search fills whatever room the row has (up to a sane cap so it doesn't sprawl on an ultrawide monitor) instead of sitting at a fixed width with dead space beside it — the search box is the single most-used control on the page, so it should get first claim on the row. Gold-tinted border so it's findable at a glance instead of blending into the toolbar chrome. */ .sbar { position: relative; flex: 1 1 220px; min-width: 0; max-width: 640px; } .sbar input { width: 100%; background: var(--bg-input); border: 1px solid rgba(201,166,77,0.45); color: var(--text-main); border-radius: 4px; padding: 5px 8px 5px 28px; font-size: 16px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .sbar input:hover { border-color: rgba(201,166,77,0.7); } .sbar input:focus { border-color: var(--border-active); box-shadow: 0 0 0 2px rgba(201,166,77,0.18); } /* Desktop: keep the whole top panel on ONE row when a maxed sidebar narrows the column. Placed after the base .panel-left / .sbar rules so these overrides win on source order. */ @media (min-width: 1024px) { .top-panel { flex-wrap: nowrap; } .panel-left { min-width: 0; flex-wrap: nowrap; } .search-group { min-width: 0; } .sbar { min-width: 0; } /* keeps its clamp width, but may shrink when tight */ /* Menu leads the row, left of the logo — same place YouTube and TradingView put theirs, and consistent with mobile now that the button is a real DOM sibling of the logo rather than nested in .search-group. Its bare-glyph + hover-fill treatment lives in the base rules, so there's nothing breakpoint-specific left to say about it here. */ .search-group { flex: 1 1 auto; } } #itemIcon { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; image-rendering: pixelated; } /* Combined search+item+wiki overlay — off by default, enabled in landscape (see the landscape media query) where the standalone search is too narrow and the ticker name would otherwise duplicate the item. */ .sbar-item, .sbar-wiki { display: none; } /* Primary "Save" affordance — lives inside the ticker header next to the item name, so it reads as "save THIS item". Bigger than the old top-panel pill, with a filled gold star + "Saved" label once active so state reads at a glance. The .fav-label / .fav-label-active spans swap via .active. */ /* Quiet by default, exactly like .qf-refresh beside it — transparent fill, hairline border, muted text. Gold is a STATE here, not a decoration: an unsaved item has nothing to report, so the button has no business being the brightest thing in the header. It was gold at rest, which spent the colour before it meant anything and left the saved state with nowhere louder to go. #btnShare wears this class too and never gets .active, so it is permanently in the quiet look — which is the right weight for a control that is always available and never a status. */ .fav-btn { background: transparent; border: 1px solid var(--border-main); border-radius: 6px; padding: 7px 14px 7px 11px; cursor: pointer; color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-weight: 800; font-size: 13px; letter-spacing: 0.35px; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease; flex-shrink: 0; } .fav-btn:hover { color: #fff; border-color: var(--border-active); } .fav-btn:active { transform: translateY(1px); } /* Saved is a STATE, not an action. A high-brightness glow and a thick lit border belong to primary actions — the thing you are being urged to press — and once this button has been pressed it is a passive indicator that should sit quietly while you read the chart. The saved state used to stack four escalations on top of the unsaved one: a 3.5x stronger gradient background, the border going to full gold, paler text, AND two shadows (a hard 3px ring plus a 20px bloom). Every one of them shouted, and none of them was the actual signal. It now keeps the same card and changes only the two things that mean "on": the star fills, and the label reads Saved. The border firms up a step because that is a state change you can see without it being a light source. */ .fav-btn.active { color: var(--fav-gold); border-color: rgba(255, 179, 0, 0.72); background: rgba(255, 179, 0, 0.10); } .fav-btn.active:hover { color: #FFD98A; border-color: var(--fav-gold); } .fav-btn .fav-star { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* Outline, not filled. The gold already says "saved" — it is on the star, the label, the border and the fill tint — so filling the glyph as well was a fourth statement of the same fact, and a solid star is a heavier mark than anything else in that header. The outline keeps the button's silhouette identical between states, which is what makes the colour change read as a state rather than a different control. */ .fav-btn.active .fav-star { fill: none; } .fav-btn .fav-label-active { display: none; } .fav-btn.active .fav-label { display: none; } .fav-btn.active .fav-label-active { display: inline; } /* Button text labels only appear when the row truly has room. At 1024–1279px the sidebar squeezes the main column enough that labeled buttons wrap the top panel onto 2–3 rows (with "Live" stranded on its own line) — icon-only buttons keep it to a single row in that band. */ .icon-btn { background: var(--bg-input); border: 1px solid var(--border-light); border-radius: 4px; padding: 4px 7px; cursor: pointer; color: var(--text-muted); font-size: 14px; line-height: 1; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 5px; } .icon-btn .icon-label { display: none; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; } @media (min-width: 1280px) { .icon-btn .icon-label { display: inline; } } .icon-btn:hover { color: var(--text-main); border-color: var(--border-active); } .icon-btn.active { background: rgba(201, 166, 77, 0.16); border-color: var(--border-active); color: #F4E3B0; } /* Overflow menu — Alerts/Bank/Help collapse into a ⋯ dropdown at every width (not just mobile) so the header stays to one clean row and the search bar — the one control people actually reach for on every visit — gets the room instead of splitting it three ways with icon buttons used far less often. */ .more-wrap { display: inline-flex; position: relative; flex: 0 0 auto; } /* Bare glyph, no chip — a secondary control shouldn't carry the same boxed weight as the search field it sits beside. Hover/open still fill so losing the border doesn't cost the "this is clickable" affordance. The 3 lines are an SVG rather than the ☰ character on purpose: text glyphs carry font-specific baseline offsets and won't reliably centre. */ .more-toggle { display: inline-flex; background: transparent; border-color: transparent; padding: 4px 8px; min-width: 34px; min-height: 30px; align-items: center; justify-content: center; } .more-toggle:hover, .more-toggle[aria-expanded="true"] { background: var(--bg-input); border-color: var(--border-light); color: var(--text-main); } /* Slide-in nav drawer rather than a small dropdown. A dropdown anchored to a far-left button would open off-screen, and the menu is worth more than four icons in a popover — this gives room to actually navigate the site. Kept in flow and moved with transform (not display:none) so it animates; visibility keeps it out of the tab order and away from pointer events while closed, which offscreen-but-visible content would not. */ .more-actions { display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1100; width: min(290px, 84vw); flex-direction: column; gap: 2px; padding: 10px; background: var(--bg-panel); border-right: 1px solid var(--border-light); box-shadow: 8px 0 34px rgba(0,0,0,0.6); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); visibility: hidden; transition: transform 0.22s ease, visibility 0.22s; } .more-actions.open { transform: translateX(0); visibility: visible; } .drawer-backdrop { position: fixed; inset: 0; z-index: 1090; background: rgba(5,7,12,0.6); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s; } .drawer-backdrop.open { opacity: 1; visibility: visible; } /* Close control is a second hamburger sitting where the one that opened the drawer was, not an × in the far corner — the same button in the same place toggling both ways is how every major nav drawer behaves, and it means the pointer never has to travel across the panel to undo the tap it just made. Padding here mirrors .more-toggle's so the two land on the same spot. */ .drawer-head { display: flex; align-items: center; gap: 4px; padding: 0 0 10px; } .drawer-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text-main); font-size: 15px; } .drawer-brand img { width: 20px; height: 20px; image-rendering: pixelated; } .drawer-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 34px; min-height: 30px; background: transparent; border: none; color: var(--text-main); cursor: pointer; padding: 4px 8px; border-radius: 6px; } .drawer-close .ui-ic { width: 18px; height: 18px; vertical-align: 0; } .drawer-close:hover { color: #fff; background: var(--bg-input); } .drawer-sep { height: 1px; background: var(--border-main); margin: 8px 4px; flex: 0 0 auto; } .drawer-label { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; padding: 4px 10px; } .drawer-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; color: var(--text-main); text-decoration: none; font-size: 13.5px; } .drawer-link:hover { background: var(--bg-input); text-decoration: none; } .drawer-link.drawer-rsn b { color: var(--fav-gold); font-weight: 800; } /* content-visibility on .about-section means the anchor target may still be skipped at jump time; scroll-margin keeps it clear of nothing in particular, but the highlight is what proves the jump landed. */ #meet-the-dev { scroll-margin-top: 24px; outline: none; transition: background 0.4s ease, border-left-color 0.4s ease; } #meet-the-dev.jump-flash { background: rgba(201,166,77,0.10); border-left-color: var(--fav-gold); } .more-actions .icon-btn { width: 100%; justify-content: flex-start; gap: 10px; padding: 9px 10px; font-size: 14px; border-color: transparent; background: transparent; } .more-actions .icon-btn:hover, .more-actions .icon-btn:active { background: var(--bg-input); } .more-actions .icon-label { display: inline; font-size: 13px; } .modal-overlay { position: fixed; inset: 0; background: rgba(5, 7, 12, 0.75); backdrop-filter: blur(3px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; overscroll-behavior: contain; } .modal-card { background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: 8px; width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px var(--shadow); overflow: hidden; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-main); flex-shrink: 0; } .modal-header h3 { margin: 0; font-size: 16px; color: #fff; font-weight: 800; } .modal-close { background: transparent; border: none; color: var(--text-muted); font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px; } .modal-close:hover { color: #fff; } .modal-body { padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .glossary-section { margin-top: 14px; margin-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 4px; border-bottom: 1px solid var(--border-main); } .glossary-section:first-of-type { margin-top: 0; } .glossary-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 4px; font-size: 12px; color: var(--text-main); align-items: center; line-height: 1.4; } .glossary-row > :first-child { justify-self: start; } /* RuneLite bridge section inside the Bank modal. */ .bk-rl { margin: 10px 0 12px; } .bk-rl-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .rl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); margin-right: 7px; vertical-align: 1px; } .rl-dot.on { background: var(--rs-green-deep); box-shadow: 0 0 6px rgba(16,185,129,0.7); } .rl-body { margin-top: 8px; font-size: 12px; } .rl-hint { color: var(--text-muted); line-height: 1.5; } .rl-hint a { color: var(--border-active); } .rl-profit { font-weight: 800; font-size: 14px; margin-bottom: 6px; } .rl-flip { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 6px; border-bottom: 1px solid rgba(60,53,43,0.4); cursor: pointer; border-radius: 3px; } .rl-flip:hover { background: var(--bg-input); } .rl-flip .rl-name { color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rl-flip .rl-nums { flex-shrink: 0; color: var(--text-muted); font-variant-numeric: tabular-nums; } .rl-flip .pos { color: var(--rs-green-deep); font-weight: 700; } .rl-flip .neg { color: var(--negative); font-weight: 700; } /* Small "Linked" pill on the sidebar's Favorites title when the RuneLite bridge is actively merging in plugin favorites — reuses .rl-dot so the same green pulse means the same thing in both places. */ .rl-linked-badge { display: inline-flex; align-items: center; margin-left: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--rs-green-deep); } .rl-linked-badge .rl-dot { margin-right: 4px; } /* Bank of Gielinor — shared form / stats / row scaffolding (the `bk-` prefix is used across this whole feature; CSS reused by the modal header etc.). */ .bk-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; } .bk-stat { background: var(--bg-input); border: 1px solid var(--border-main); border-radius: 4px; padding: 8px 10px; text-align: center; } .bk-stat.headline { grid-column: 1 / -1; padding: 14px 12px; background: linear-gradient(135deg, rgba(255,179,0,0.18), rgba(255,210,77,0.08)); border-color: rgba(255,179,0,0.5); } .bk-stat-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .bk-stat-val { font-size: 18px; font-weight: 900; margin-top: 2px; letter-spacing: -0.5px; } .bk-stat.headline .bk-stat-val { font-size: 28px; color: #FFD24D; letter-spacing: -1px; } .bk-totalpl-pos { color: var(--positive); } .bk-totalpl-neg { color: var(--negative); } .bk-item-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg-input); border: 1px solid var(--border-main); border-radius: 4px; margin-bottom: 8px; } .bk-item-icon { width: 18px; height: 18px; image-rendering: pixelated; flex-shrink: 0; } .bk-item-icon:not([src]), .bk-item-icon[src=""] { display: none; } .bk-item-name { font-size: 13px; font-weight: 600; color: var(--text-main); } .bk-form input { background: var(--bg-input); border: 1px solid var(--border-light); color: var(--text-main); border-radius: 4px; padding: 6px 8px; font-size: 13px; outline: none; font-family: inherit; min-width: 0; } .bk-form input:focus { border-color: var(--border-active); } .bk-form-grid { display: grid; grid-template-columns: 1fr 1fr 0.7fr auto; gap: 6px; align-items: stretch; } .bk-submit { background: var(--border-active); border: none; color: var(--accent-ink); border-radius: 4px; padding: 6px 12px; font-weight: 700; font-size: 12px; cursor: pointer; } .bk-submit:hover { background: var(--accent-bright); } .bk-hint { font-size: 10px; color: var(--text-muted); margin-top: 4px; min-height: 14px; } .bk-hint.error { color: var(--negative); } .bk-section-title { margin-top: 16px; margin-bottom: 6px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } /* Notification Center modal */ .nc-section { margin-bottom: 18px; } .nc-section-title { font-size: 13px; font-weight: 800; color: #fff; margin: 0 0 4px; } .nc-section-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin: 0 0 8px; } .nc-master { background: var(--bg-input); border: 1px solid var(--border-main); border-radius: 6px; padding: 12px 14px; } .nc-master-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .nc-master-label { font-size: 13px; font-weight: 700; color: var(--text-main); } .nc-master-state { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .nc-master-state.granted { color: var(--positive); } .nc-master-state.denied { color: var(--negative); } .nc-test-btn { margin-top: 10px; background: transparent; border: 1px solid var(--border-light); color: var(--text-main); padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; } .nc-test-btn:hover:not(:disabled) { border-color: var(--border-active); color: #fff; } .nc-test-btn:disabled { opacity: 0.4; cursor: not-allowed; } .nc-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .nc-toggle input { opacity: 0; width: 0; height: 0; } .nc-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg-input); border: 1px solid var(--border-main); transition: 0.2s; border-radius: 24px; } .nc-toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; top: 2px; background: var(--text-muted); transition: 0.2s; border-radius: 50%; } .nc-toggle input:checked + .nc-toggle-slider { background: rgba(0, 200, 100, 0.25); border-color: var(--positive); } .nc-toggle input:checked + .nc-toggle-slider:before { transform: translateX(20px); background: var(--positive); } .nc-list { border: 1px solid var(--border-main); border-radius: 4px; overflow: hidden; } .nc-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border-main); background: var(--bg-input); font-size: 12px; } .nc-row:last-child { border-bottom: none; } .nc-row img { width: 22px; height: 22px; image-rendering: pixelated; flex-shrink: 0; } .nc-row-name { font-weight: 700; color: var(--text-main); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nc-row-caption { font-size: 10px; color: var(--text-muted); margin-top: 1px; } .nc-row-name-stack { display: flex; flex-direction: column; flex: 1; min-width: 0; } .nc-pct-input { width: 56px; background: var(--bg-input); border: 1px solid var(--border-light); color: var(--text-main); border-radius: 3px; padding: 4px 6px; font-size: 12px; outline: none; text-align: right; } .nc-pct-input:focus { border-color: var(--border-active); } .nc-pct-suffix { font-size: 11px; color: var(--text-muted); } .nc-empty { padding: 12px; font-size: 12px; color: var(--text-muted); text-align: center; background: var(--bg-input); border: 1px dashed var(--border-main); border-radius: 4px; } .bk-holdings { border: 1px solid var(--border-main); border-radius: 4px; overflow: hidden; } .bk-row { display: grid; grid-template-columns: 24px 1fr auto auto auto; gap: 8px; padding: 8px 10px; font-size: 12px; border-bottom: 1px solid rgba(60,53,43,0.5); align-items: center; cursor: pointer; } .bk-row:hover { background: var(--bg-input); } .bk-row:last-child { border-bottom: none; } .bk-row img { width: 20px; height: 20px; image-rendering: pixelated; } .bk-row .bk-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-row .bk-sub { font-size: 9px; color: var(--text-muted); } .bk-row .bk-val { text-align: right; font-weight: 800; } .bk-row .bk-pl { text-align: right; font-weight: 800; min-width: 64px; font-size: 11px; } .bk-row .bk-pl.pos { color: var(--positive); } .bk-row .bk-pl.neg { color: var(--negative); } .bk-row .bk-del { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 0 4px; font-size: 14px; } .bk-row .bk-del:hover { color: var(--negative); } .bk-row.empty { display: block; text-align: center; color: var(--text-muted); padding: 12px; cursor: default; } .bk-row.empty:hover { background: transparent; } .bk-icon { display: inline-block; vertical-align: middle; } @media screen and (max-width: 640px) { .bk-form-grid { grid-template-columns: 1fr 1fr; } .bk-form-grid .bk-submit, .bk-form-grid button[type="submit"] { grid-column: 1 / -1; padding: 8px; } .bk-row { grid-template-columns: 22px 1fr auto auto; } .bk-row .bk-val { display: none; } } .suggest { margin-top: 4px; border: 1px solid var(--border-light); border-radius: 4px; max-height: 200px; overflow-y: auto; background: var(--bg-panel); position: absolute; z-index: 100; width: 260px; box-shadow: 0 8px 16px var(--shadow); } .suggest div { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-main); cursor: pointer; font-size: 13px; } .suggest div:last-child { border-bottom: none; } .suggest div:hover { background: var(--bg-input); color: #fff; } .suggest img { width: 16px; height: 16px; image-rendering: pixelated; } .suggest .suggest-header { padding: 4px 10px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-muted); text-transform: uppercase; background: rgba(0,0,0,0.25); cursor: default; } .suggest .suggest-header:hover { background: rgba(0,0,0,0.25); color: var(--text-muted); } /* Compact mode pill (mobile top panel — desktop hides this and uses the sidebar version). Both sides share ONE active treatment, gold — see the note on the shared .active rule below. */ /* No shell around the pair — the active side's tinted text plus its 2px underline already reads as a tab group, and the box was competing with the search field beside it. The underline is what keeps this from looking like two unrelated labels, so it stays load-bearing here. */ .mode-pill { display: flex; background: transparent; border: none; border-radius: 6px; padding: 2px; height: 30px; flex-shrink: 0; gap: 2px; } .mode-pill button { background: transparent; border: none; color: var(--text-muted); padding: 0 8px; cursor: pointer; font-weight: 800; font-size: 11px; border-radius: 4px; height: 100%; letter-spacing: 0.4px; text-transform: uppercase; transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .mode-pill button:active { transform: translateY(1px); } /* One active treatment for BOTH sides, gold. F2P used to light up green, which collides with what green already means on this page: it is the profit/positive colour and the 5D-high badge, so a green chip sitting in the header read for a beat like price action rather than a filter. Gold is the app's existing "you selected this" colour — the favourites star, active borders, the timeframe pills — so using it for both keeps the header to one idea: gold means chosen. Which side is which is carried by the F2P / P2P labels and the underline, not by hue, exactly as a two-tab segmented control normally works. Shared by the compact and sidebar pills so the two can't drift apart. */ .mode-pill .mp-f2p.active, .mode-pill .mp-p2p.active, .mode-pill-side .mp-f2p.active, .mode-pill-side .mp-p2p.active { background: linear-gradient(180deg, rgba(255,179,0,0.16) 0%, rgba(255,179,0,0.06) 100%); color: #FFD97A; box-shadow: inset 0 -2px 0 var(--fav-gold); } /* Sidebar item-list filter — the primary control on desktop. Hidden by default; the desktop media query below shows it (and hides the small top-panel pill). Sleek segmented control: one pill shell, split by the two buttons; the active side gets a subtle gold fill (shared rule above) so state reads at a glance without shouting. */ .mode-pill-side { display: none; } .mode-pill-side .mps-btn { flex: 1 1 0; min-width: 0; padding: 8px 10px; background: transparent; border: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .mode-pill-side .mps-btn:hover { color: var(--text-main); } /* Keep this row lean — every px of chrome here is a px the chart loses. nowrap, deliberately. This row used to wrap, on the theory that a long item name plus the toolbar might not fit and dropping the timeframes to their own line beat clipping them. In practice the wrap wasn't a last-resort at all: the container query below set the toolbar to flex-basis 100%, which FORCES a second line whenever the header is narrow, whether or not the content would have fitted. Measured, the toolbar rendered 653px wide at a 661px header and 266px at a 738px one — same six buttons. So the "unavoidable" wrap was self-inflicted. Now the row stays one row and the overflow story is explicit: the item name truncates first (it has the most redundant width — it's also in the search box and the tab title), and only if that isn't enough does the toolbar scroll horizontally. A wrapped row costs ~48px of vertical space that comes straight out of the chart. */ /* No card here either (see .top-panel) — the item name/price is its own visual anchor and the timeframe pills carry their own selected-state highlight, so a wrapping box was just doubling up on both. */ /* Packed left, never space-between. space-between sets the Save button adrift: it's spaced against whatever else shares its flex line, so its distance from the item name is a function of viewport width — and once the header wraps and the timeframe toolbar drops to its own line, Save is the only thing left to push, so it flies to the far right edge. Measured before this change, the name-to-Save gap ran 372px at 1023w, 249px at 900w and 49px at 700w, versus a flat 12px above 1024. Packing left makes it the same 12px everywhere, so Save always reads as belonging to the item name it saves — TradingView-style symbol+star. */ /* Asymmetric padding on purpose. Above the header there is only the search row and its own 4px; below it are the Target boxes, and the .main-column flex gap already puts 8px there. 6px of padding-bottom on top of that gap measured 16px of empty band between the timeframe pills and the boxes — the widest unexplained space on the page. 2px leaves 10px total, which still separates them without reading as a hole. */ .ticker-header { padding: 6px 4px 2px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; gap: 4px 12px; flex-shrink: 0; container-type: inline-size; container-name: tickerhdr; } /* Shrink factor 8 vs the toolbar's 1: both CAN shrink, but the name gives up width roughly eight times faster, so it ellipsizes long before the pills start scrolling. The name is the cheapest thing on this row to lose — it's also in the search box, the tab title and the chart's own header. The floor is min-width:AUTO, not a pixel number. A flex item with min-width:0 collapses to zero no matter what its children declare, and the children then paint straight over the next item — but a fixed floor is just as wrong, because it can't know how wide the content is: 120px held a 650gp price fine and let a 59,930,778 one spill 21px over the Save button. auto resolves to the content-based minimum, which is exactly "as narrow as this can get without overlapping". The name still ellipsizes inside it: an element with overflow:hidden contributes zero to that minimum, so the floor ends up being the price row's width and nothing more. */ .ticker-title-group { display: flex; align-items: center; gap: 10px; min-width: auto; flex: 0 8 auto; } /* min-width:0 is what lets a flex item shrink below its content size at all; without it the toolbar would refuse to shrink and push the row wide. The buttons themselves stay rigid (flex:0 0 auto) so shrinking scrolls the group rather than squashing six pills into unreadable slivers. */ .ticker-header .toolbar { flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; } .ticker-header .toolbar::-webkit-scrollbar { display: none; } .ticker-header .toolbar button { flex: 0 0 auto; } /* A scroll strip with no scrollbar and no cut-off pill looks like a strip that simply ends — 5Y would just appear not to exist. Fade the edge that still has content behind it. Class-driven because CSS can't ask "am I overflowing"; JS toggles these (see keepActiveViewVisible) on load, resize and scroll. */ .ticker-header .toolbar.tb-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%); } .ticker-header .toolbar.tb-more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to left, #000 calc(100% - 22px), transparent 100%); } .ticker-header .toolbar.tb-more-left.tb-more-right { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); } @media (min-width: 1024px) { /* TradingView's company page gives the logo real presence — a sizeable mark in its own rounded chip beside the name, not a small inline icon. Match that proportion: a bigger backdrop chip (item sprites are small, irregular pixel art, not square logos, so they get a panel behind them rather than just scaling the raw image) with the sprite centered inside, still pixelated so it stays crisp at the larger size. */ #tickerHeaderIconLink { width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-input); border: 1px solid var(--border-main); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 4px rgba(0,0,0,0.35); } /* 34 -> 40 inside the same 48px plate. The plate is what makes a dark icon legible, but it only helps in proportion to how much of it the icon fills; 34px in a 48px chip is mostly empty plate. 40 keeps a 4px margin so it still reads as a slot rather than a cropped image. */ #tickerHeaderIconLink img { width: 40px; height: 40px; max-width: 40px; max-height: 40px; } .ticker-title-group { gap: 12px; } } .ticker-title-group img { width: 34px; height: 34px; image-rendering: pixelated; } .ticker-wiki-link { display: inline-flex; color: inherit; text-decoration: none; line-height: 0; cursor: pointer; } .ticker-name-link { line-height: normal; min-width: 0; max-width: 100%; } /* auto, so the live price sets the floor — see .ticker-title-group. The h2 above it has overflow:hidden and so still contributes zero, keeping its ellipsis. */ .ticker-info { min-width: auto; } .ticker-name-link:hover h2 { text-decoration: underline; text-decoration-color: var(--text-muted); text-underline-offset: 3px; } .ticker-wiki-link:focus-visible { outline: 2px solid var(--border-active); outline-offset: 2px; border-radius: 4px; } .ticker-info h2 { margin: 0; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* The item name has always linked to the OSRS wiki, but it rendered as plain white heading text, so nothing suggested it was clickable — the underline only showed once you were already hovering it. This glyph is the standing affordance: muted enough to stay out of the way of the name, and it picks up the gold alongside the underline on hover so the whole title reads as one control. Sits OUTSIDE the h2 on purpose — inside, the h2's text-overflow would clip the glyph away on exactly the long item names where a wiki link is most useful. Only the desktop header carries it: both mobile layouts hide .ticker-title-group entirely and surface the wiki through .sbar-wiki instead. */ .wiki-hint { flex: 0 0 auto; align-self: center; width: 13px; height: 13px; margin-left: 6px; color: var(--text-muted); transition: color .12s ease; } .ticker-name-link:hover .wiki-hint { color: var(--border-active); } /* Hero live price + timeframe change, left-aligned under the item name — the familiar TradingView symbol-header treatment. Kept medium so it frames the live quote without competing with the Target Buy/Sell boxes (our actual hero). Desktop-only; mobile hides .ticker-title-group. */ .ticker-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 1px; } .ticker-price-row .price { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.4px; line-height: 1; } .ticker-price-row .price .tlp-gp { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; } .ticker-price-row .change { font-size: 13px; font-weight: 700; } /* Empty for every normal item now, and an empty flex child would still eat the row's 8px gap after the price. */ .ticker-price-row .change:empty { display: none; } .change.positive { color: var(--positive); } .change.negative { color: var(--negative); } .change.neutral { color: var(--text-muted); } /* No pill-strip background — the active button's own highlight (below) is enough to show selection without a second nested box. */ .toolbar { display: flex; padding: 2px 0; gap: 4px; } .toolbar button { background: transparent; border: none; color: var(--text-muted); border-radius: 3px; padding: 4px 10px; cursor: pointer; font-weight: 600; font-size: 12px; transition: all 0.15s; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 45px; } /* Desktop time-range buttons: wide enough to stay a primary affordance, but short — vertical space here comes straight out of the chart's height. */ @media (min-width: 1024px) { .toolbar { padding: 4px 0; gap: 6px; } .toolbar button { padding: 4px 18px; font-size: 14px; min-width: 72px; font-weight: 700; letter-spacing: 0.5px; } .toolbar button .pct-chg { font-size: 10px; margin-top: 1px; } /* F2P/Members lives next to the search bar at every width — it reads as "what am I searching" and belongs beside the search box, not off in the sidebar. .mode-pill-side stays available (same markup/JS, shared .mp-f2p/.mp-p2p classes) but is never shown. */ } .toolbar button:hover { color: var(--text-main); } .toolbar button.active { background: var(--border-light); color: #fff; } .pct-chg { font-size: 9px; font-weight: normal; margin-top: 2px; } .pct-chg.positive { color: var(--positive); } .pct-chg.negative { color: var(--negative); } .pct-chg.neutral { color: var(--text-muted); } /* No stroke — the chart is the hero, it gets contained by its own background contrast (--bg-chart vs. the page), not a drawn edge. */ .chart-container { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-chart); border-radius: 6px; position: relative; overflow: hidden; } .chart { flex: 1; min-height: 0; width: 100%; display: block; touch-action: none; } /* On a touch device the page MUST stay scrollable through the chart. touch-action:none hands every gesture to the canvas, which is right on desktop (the wheel still scrolls the page) and a trap on a phone: with the chart filling the screen there was no way to reach anything below it — reported as "can't scroll past the chart", and there is no visible cue that the canvas is why. pan-y gives vertical drags back to the browser. The cost is real and worth naming: one-finger vertical panning and the y-axis scale drag are no longer available on touch, because the browser consumes those gestures now. Horizontal panning, taps, and the double-tap resets all still work. Being unable to scroll the page is a dead end; losing a gesture is not. */ @media (pointer: coarse) { .chart { touch-action: pan-y; } } /* The price strip lives above the chart now (not as an overlay) so the target / grade boxes can never cover chart data. The flex-row puts buy + sell side by side; on narrow widths they wrap and the chart simply moves down a little. */ .price-strip { display: flex; gap: 8px; padding: 0; flex-shrink: 0; flex-wrap: wrap; } .price-strip .price-box { flex: 1 1 0; min-width: 0; } /* ── Activity bar ──────────────────────────────────────────────────────── Indeterminate, not a progress bar: we genuinely do not know how far along a fetch is, and a bar that fills 0->100% would be inventing that. This is the Material two-segment motion — a long segment that accelerates across, then a short one chasing it — which reads as "working" rather than "23% done". The track keeps its 3px at all times and only the paint changes, so starting or finishing a load never shifts the chart underneath it. Placed on the seam between the target numbers and the chart because those are the two things the fetch is about to change; put anywhere else it would be decoration. */ .load-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 6; pointer-events: none; /* never steals a drag from the chart */ overflow: hidden; background: transparent; transition: background 0.2s ease; } .load-bar span { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform-origin: left center; background: linear-gradient(90deg, rgba(229,184,66,0.35), var(--border-active) 45%, #FFD98A 70%, rgba(229,184,66,0.35)); will-change: transform; transform: scaleX(0); } .load-bar.is-active { background: rgba(229,184,66,0.10); } /* The two cubic-beziers and the 2.1s cycle are Material's — the shape of the easing is the whole effect, and eyeballing an approximation reads as a generic slider instead. */ .load-bar.is-active span:nth-child(1) { animation: lb-long 2.1s cubic-bezier(0.65,0.815,0.735,0.395) infinite; } .load-bar.is-active span:nth-child(2) { animation: lb-short 2.1s cubic-bezier(0.165,0.84,0.44,1) 1.15s infinite; } @keyframes lb-long { 0% { transform: translateX(-35%) scaleX(0.35); } 60% { transform: translateX(100%) scaleX(0.9); } 100% { transform: translateX(100%) scaleX(0.9); } } @keyframes lb-short { 0% { transform: translateX(-100%) scaleX(0.12); } 70% { transform: translateX(110%) scaleX(0.6); } 100% { transform: translateX(110%) scaleX(0.6); } } /* Motion is the entire point here, so with reduced-motion the honest substitute is a static presence, not a slower slide. */ @media (prefers-reduced-motion: reduce) { .load-bar.is-active span:nth-child(1) { animation: none; transform: scaleX(1); opacity: 0.5; } .load-bar.is-active span:nth-child(2) { animation: none; transform: scaleX(0); } } /* Target Buy / Target Sell are the hero of the app — these are the actual recommendation. Side-tinted background, a colored accent stripe on the left, and a soft glow on the number itself so the eye lands here first instead of having to scan past the chart and sidebar. Buy / Sell color identity (gold / teal) stays consistent with the rest of the app. The 3-side border is deliberately faint (not "light") — .selected below is the one that should visibly pop, not both boxes equally. */ .price-box { position: relative; background: rgba(32, 28, 22, 0.85); border: 1px solid var(--border-hair); border-left-width: 3px; border-radius: 5px; padding: 7px 12px; min-width: 140px; pointer-events: auto; cursor: pointer; backdrop-filter: blur(4px); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .price-box.low { border-left-color: var(--buy-color); background: linear-gradient(90deg, rgba(255,184,0,0.10), rgba(32,28,22,0.85) 35%); } .price-box.high { border-left-color: var(--sell-color); background: linear-gradient(90deg, rgba(38, 169, 171,0.12), rgba(32,28,22,0.85) 35%); } /* Same white the favorites row uses for ITS selection — rgba(255,255,255,0.42) rather than solid #fff. Two controls that both mean "this is the one you picked" were shouting at different volumes, and the louder of the two sat directly above the chart where it competed with the data. The coloured left edge and the glow below still carry the buy/sell identity; only the white outline calms down. */ .price-box.selected { border-color: rgba(255,255,255,0.42); border-left-width: 3px; } .price-box.low.selected { border-left-color: var(--buy-color); box-shadow: 0 0 0 1px rgba(255,184,0,0.25), 0 4px 12px rgba(255,184,0,0.10); } .price-box.high.selected { border-left-color: var(--sell-color); box-shadow: 0 0 0 1px rgba(38, 169, 171,0.30), 0 4px 12px rgba(38, 169, 171,0.12); } .price-label { font-size: 10px; color: var(--text-muted); font-weight: bold; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 8px; letter-spacing: 0.4px; } .live-val { font-weight: normal; color: #E0D9CB; font-size: 10px; text-transform: none; letter-spacing: 0; } .live-age { color: var(--text-muted); } .price-box.low .price-val { color: var(--buy-color); text-shadow: 0 0 12px rgba(255,184,0,0.30); } .price-box.high .price-val { color: var(--sell-color); text-shadow: 0 0 12px rgba(38, 169, 171,0.30); } .price-val { font-size: 19px; font-weight: 900; margin-top: 2px; letter-spacing: -0.4px; display: flex; align-items: center; gap: 6px; } /* Long-price fit — see pvFit(). em, so one rule covers all six breakpoint sizes of .price-val; min-width:0 lets the span actually shrink inside the flex row rather than forcing the overflow it is trying to avoid. */ .price-val .pv-num { min-width: 0; } .price-val .pv-num.pv-md { font-size: 0.86em; letter-spacing: -0.3px; } .price-val .pv-num.pv-sm { font-size: 0.70em; letter-spacing: -0.2px; } .price-val .pv-num.pv-xs { font-size: 0.58em; letter-spacing: 0; } /* Nudge the target price gp-by-gp without opening the Potential Profit breakdown. These used to be two 16x11 arrows stacked in the corner of a card with plenty of room to spare — a sniper shot for a 1 gp change, and the wrong side of Fitts's law. Now they flank the numeral as square buttons, sized up with the card at each breakpoint, tinted to their own side (gold buys, teal sells) so the pair reads as part of the box rather than generic browser chrome. Still hidden below 641px: a phone price box is 3px-padded and 17px-tall text, with no room for a target big enough to be worth tapping, and the calculator already offers a fine-grained input there. */ .price-step { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid transparent; background: rgba(255,255,255,0.06); font: 900 15px/1 inherit; color: var(--text-muted); cursor: pointer; user-select: none; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .price-box.low .price-step { color: rgba(229, 184, 66,0.75); } .price-box.high .price-step { color: rgba(38, 169, 171,0.85); } .price-box.low .price-step:hover { background: rgba(255,184,0,0.18); border-color: rgba(255,184,0,0.5); color: var(--buy-color); box-shadow: 0 0 10px rgba(255,184,0,0.22); } .price-box.high .price-step:hover { background: rgba(38, 169, 171,0.18); border-color: rgba(38, 169, 171,0.5); color: var(--sell-color); box-shadow: 0 0 10px rgba(38, 169, 171,0.22); } .price-step:active { transform: translateY(1px); } .price-step:focus-visible { outline: 2px solid var(--border-active); outline-offset: 1px; } @media (max-width: 640px) { .price-step { display: none; } } .chart-footer { background: var(--bg-panel); border-top: 1px solid var(--border-main); padding: 3px 10px; display: flex; gap: 10px; font-size: 9px; color: var(--text-muted); align-items: center; flex-shrink: 0; flex-wrap: wrap; } /* Dropped on compact screens. It's a colour key you read once and then never again, but it costs 17px in landscape and 37px in portrait (where it wraps to two lines) — more than the volume pane did, out of the same budget the chart is short of. The information stays reachable two ways that don't cost permanent height: tapping any marker on the chart names it in the tooltip, and the glossary (Menu → Help) has the full key. Desktop keeps it. */ @media (max-width: 640px), (max-height: 600px) and (orientation: landscape) { .chart-footer.legend { display: none; } } .legend-item { display: flex; align-items: center; gap: 4px; } .legend-dash { width: 10px; height: 2px; display: inline-block; } .legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .legend-ring { width: 8px; height: 8px; border-radius: 50%; display: inline-block; border: 2px solid; box-sizing: border-box; } .legend .low .legend-dash, .legend .low .legend-dot { background: var(--buy-color); } .legend .high .legend-dash, .legend .high .legend-dot { background: var(--sell-color); } .legend .rlow .legend-ring { border-color: var(--buy-color); } .legend .rhigh .legend-ring { border-color: var(--sell-color); } /* pg-* type styles are kept for the GLOSSARY rows and the Analyst gauge (.pg-help "?" chip); the per-box grade badges themselves were removed. */ .pg-num { font-size: 17px; font-weight: 900; letter-spacing: -0.5px; line-height: 1; } .pg-verdict { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; } .pg-ctx { font-size: 8px; color: var(--text-muted); line-height: 1; letter-spacing: 0.4px; } /* Desktop (≥1024px): lay each price box out horizontally so Target Buy / Sell read as compact quote bars that use the full width. */ @media screen and (min-width: 1024px) { .price-strip { gap: 10px; } .price-box { display: flex; align-items: center; gap: 18px; padding: 10px 18px 10px 20px; } .price-label { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; flex-shrink: 0; } .price-val { font-size: 28px; margin-top: 0; flex-shrink: 0; white-space: nowrap; letter-spacing: -0.7px; margin-left: auto; gap: 12px; } /* The hero cards were sharing .main-column's flat 8px gap with everything else in the column; a few px more separates the recommendation from the evidence for it. Only on the layout with height to spare. */ .price-strip { margin-bottom: 5px; } /* The card this sits in is the roomiest one — take the space. */ .price-step { width: 30px; height: 30px; font-size: 18px; border-radius: 7px; } } /* Tablet/narrow-window gap (641px–1023px): the phone-portrait rule below handles ≤640px and the desktop rule above handles ≥1024px, but this band in between fell through to the base (stacked label-then-value) styles, which put the value on its own row under the box's label — the exact "big number drops under Target Buy/Sell" layout shift that's unwanted at any width. Same horizontal single-row treatment here, just tuned tighter. */ @media screen and (min-width: 641px) and (max-width: 1023px) { .price-box { display: flex; align-items: center; gap: 10px; padding: 6px 12px; overflow: hidden; } /* Same inversion the phone block further down already fixes, which this band never got: label flex-shrink:0 + value flex-shrink:1 means the caption ("Insta-sell: 58,412,684 · 3m ago") takes what it wants and the number absorbs every pixel of the shortfall. Measured in a 225px box it left the target a clientWidth of ZERO — fitPriceNums had ground the font down to 9px and it still clipped, because no font size can fit into no space. The caption shrinks and ellipsises; the number never does. */ .price-label { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; flex-shrink: 1; min-width: 0; } .price-label .live-val { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .price-val { font-size: 20px; margin-top: 0; flex-shrink: 0; white-space: nowrap; letter-spacing: -0.5px; margin-left: auto; } } /* Medium-desktop band: viewports between the mobile breakpoint (1024px) and a comfortable wide-desktop width were overflowing for items with very large prices (e.g. Gilded platebody at 10.6M — 8-digit numbers at 28px overflowed the price box and clipped the grade chip). Cap the hero font at 22px and tighten gaps/padding in this band; everything above 1280px keeps the full 28px hero size. */ @media screen and (min-width: 1024px) and (max-width: 1279px) { .price-box { gap: 12px; padding: 8px 14px 8px 16px; } .price-val { font-size: 22px; letter-spacing: -0.4px; } } /* Compact timeframe pills, keyed to the HEADER's own width rather than the viewport's. Same six buttons, ~266px instead of ~462px — enough that they still share the name/Save row on a narrow window instead of needing a second line. It has to be a container query, not a media query: the header also gets narrow on a wide screen when the sidebar is dragged out, and a viewport breakpoint can't see that. 860px is the threshold because the widest measured title group (300px) plus Save, Share, gaps and the full-size 462px toolbar needs about that much; below it, shrink the pills rather than the name. */ @container tickerhdr (max-width: 860px) { .ticker-header .toolbar { padding: 3px; gap: 4px; } .ticker-header .toolbar button { padding: 4px 6px; font-size: 13px; min-width: 0; } .ticker-header .toolbar button .pct-chg { font-size: 9px; } } /* Near-opaque (it lands on top of the scatter, and 0.95 let dots show through the numbers), warm-black to match the app rather than the old blue-grey, and tabular figures so prices don't jitter as the cursor moves along the series. */ .chart-tip { position: absolute; display: none; background: rgba(10, 9, 8, 0.97); color: var(--text-main); padding: 7px 9px; border-radius: 5px; font-size: 10px; line-height: 1.5; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; border: 1px solid var(--border-light); box-shadow: 0 6px 18px rgba(0,0,0,0.6); z-index: 50; } @media (min-width: 1024px) { .chart-tip { font-size: 11.5px; padding: 8px 11px; } } .chart-tip strong { display: block; margin-bottom: 4px; padding-bottom: 4px; color: #fff; font-size: 0.92em; letter-spacing: .2px; border-bottom: 1px solid var(--border-main); } .chart-tip .tip-marker { font-weight: 800; letter-spacing: 0.2px; } /* align-self:flex-start + max-height:100% instead of the default stretch. Stretched, the panel was always the full height of the chart column, so a short favourites list left the panel drawn — border, background and all — over ~180px of nothing below Find Opportunities. Now the panel ends where its content ends, and only grows to the column's height when it has the content to fill it. max-height keeps the internal scrolling: at full height the list still shrinks and scrolls rather than overflowing. NOTE: this makes the panel's height indefinite, which is exactly what the splitter's `max-height: var(--opps-h, 46%)` resolves against — see the note on .find-opps-host. */ .watchlist-container { width: var(--wl-width, 330px); flex-shrink: 0; align-self: flex-start; max-height: 100%; background: var(--bg-panel); border: 1px solid var(--border-hair); border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; } /* Draggable divider between chart and sidebar. Hidden by default (real phones, where the sidebar stacks below the chart instead of beside it); shown any time the layout is the side-by-side row, which since the min-width:1024px gate isn't the only place that happens anymore (a wide-but-<1024px window falls into this same row layout on its base styles) starts at 640px, not 1024px. Explicitly re-hidden inside the short-landscape breakpoint below, where the sidebar is a fixed compact width rather than the --wl-width variable this drags. */ .wl-resize { display: none; } /* Height counterpart to .wl-resize, on the two layouts where the chart's height is a fixed budget worth handing over: desktop (a viewport-derived min/max) and portrait phones (a flat 52vh, and on a phone the chart is exactly the thing you want more of). Coarse landscape is left out — the whole viewport is ~390px tall there, so there is nothing to trade. .user-sized replaces whichever rule that layout used. touch-action:none is what stops a drag from scrolling the page instead of resizing, which is the entire gesture on a phone. */ .ch-resize { display: none; } .ch-resize::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 2px; width: 38px; background: var(--border-light); border-radius: 2px; transition: background 0.15s, width 0.15s; } .ch-resize:hover::before, .ch-resize.dragging::before { background: var(--border-active); width: 64px; } /* Only applied once the handle has actually been dragged, so the default sizing keeps working untouched for everyone else. */ .chart-container.user-sized { flex: 0 0 auto; height: var(--chart-h); min-height: 0; max-height: none; } /* 641px, not 1024. The side-by-side row layout starts at 640 — .wl-resize, the WIDTH handle, already says so in its own comment — but the height handle was gated at 1024, so every window between the two had no way to resize the chart at all. Reported from an 878x842 window: display computed to `none` and there was nothing to drag. The landscape-phone rule further down is later in source and keeps its own 14px sizing, so this does not reach it. */ @media (min-width: 641px) { .ch-resize { display: block; flex: 0 0 10px; height: 10px; margin: -4px 0; cursor: row-resize; position: relative; z-index: 6; touch-action: none; } } /* …and the band needs the same two supports the other layouts already have, or the handle would be present and useless. .wrap is a fixed 100dvh here (the min-height:100dvh variant is >=1024 only), so a hand-sized chart would be clipped rather than pushing what is under it down. height:auto once user-sized, with no floor, so growing the chart grows the page AND shrinking it closes the gap up — the same net effect as the >=1024 rule, reached with one declaration because this band has no min-height to cancel. Reset drops .user-sized and 100dvh returns. The sidebar cap has to stop being a percentage for the same reason it did in every other layout: with .wrap's height indefinite, `max-height: 100%` resolves to `none` and a long favourites list grows the page instead of scrolling inside itself. */ @media (min-width: 641px) and (max-width: 1023.98px) { .wrap:has(.chart-container.user-sized) { height: auto; } } /* HEIGHT, not max-height: the panel is exactly as tall as the main column, so it always reaches the row the column ends on rather than stopping wherever its own content happens to run out. Capped by the viewport for the case where the column is taller than the screen. --main-h is measured in JS; see sidebarCap. >=641px, matching .ch-resize and .wl-resize rather than the 1024 this started at. The band between was the one place the sidebar could still be the taller column: measured at 878x842, shrinking the chart left the panel 198px past the main column's last row — the same blank band the desktop rule exists to prevent. */ /* max(): the column's height is the TARGET, --fav-floor is the FLOOR. Slimmer rows alone cannot deliver "15 favourites before it scrolls" — measured, a 900px window would need 30.8px rows and a 720px one 18.8px, which is a row shorter than the icon in it. The panel has to be allowed past the column instead, and only by as much as the rows actually present require: the floor is measured as chrome + min(favourites, 15) rows, so a short list still ends where its content ends and nothing re-opens the blank band the height rule exists to close. Desktop only; --fav-floor is unset elsewhere and max() then ignores it. */ @media (min-width: 641px) { .watchlist-container { height: max(min(calc(100dvh - 16px), var(--main-h, 100dvh)), var(--fav-floor, 0px)); } } /* Both touch layouts — portrait AND landscape phone. Landscape used to be the one band with no handle at all, on the reasoning that a ~390px-tall viewport has nothing to trade. That is true only while the app is pinned to one screen: the ask is to trade the quick-facts row and the 30-Day Range for chart, pushing them below the fold, which is exactly what the portrait handle already does. So the band gets the same handle and, in its own block further down, the same `height: auto` on .wrap that lets a taller chart grow the page instead of overflowing a fixed box. */ @media (max-width: 640px), screen and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) { /* Taller than the desktop handle: a 10px strip is a fine mouse target and a poor thumb one. The pill inside stays 2px, so it costs 8px of layout and reads the same. */ .ch-resize { display: block; flex: 0 0 20px; height: 20px; margin: -6px 0; cursor: row-resize; position: relative; z-index: 6; touch-action: none; } .ch-resize::before { width: 46px; height: 3px; } .ch-resize.dragging::before { width: 72px; } } /* ── Tap to maximise, alongside the drag ───────────────────────────────── Every touch layout gets the toggle: it offers the two heights that actually matter — the layout's default, and the same ceiling a full drag would reach — in one tap, which is a better gesture for "make this bigger" than a precise grab on a thin strip and a steady pull. It ADDS to the strip rather than replacing it. Hiding the strip on every coarse pointer was too wide a cut: portrait's handle sits 365px above the bottom edge and never collided with anything, and losing the fine control there was a straight loss. A mouse gets no button: a cursor drag is fine, and it already covers every height between the two the button offers. LAST of the .ch-resize rules on purpose — same specificity as the blocks above, so the one below wins on order. */ .ct-tall { display: none; } @media (pointer: coarse) { .ct-tall { display: inline-flex; align-items: center; } } /* The one layout where the strip goes. Short landscape puts it ~48px above the bottom edge, inside iOS's home-indicator swipe band — reported as not being able to grab the handle without dismissing the app. Moving the grip left of the indicator made it reachable without making it pleasant, so the strip gives way to the button here and the off-centre pill that went with it is gone too: a 390px-tall screen also had the least room to spend 14px on chrome. Portrait and desktop keep the drag. */ @media screen and (max-height: 600px) and (orientation: landscape) and (pointer: coarse) { .ch-resize { display: none; } } @media (min-width: 640px) { .wl-resize { display: block; flex: 0 0 8px; align-self: stretch; cursor: col-resize; position: relative; margin: 0 -4px; z-index: 6; touch-action: none; } .wl-resize::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 30px; background: var(--border-light); border-radius: 2px; transition: background 0.15s, height 0.15s; } .wl-resize:hover::before, .wl-resize.dragging::before { background: var(--border-active); height: 52px; } } @media (min-width: 1024px) { /* Desktop: let the page grow a hair past the viewport so the 30-day insight + description sit BELOW the chart instead of stealing its height. The chart is floored to fill the first screen down to the quick-facts strip (which then aligns with the sidebar's Favorites section); the insight lands just under the fold. Landscape/portrait keep their own height rules. The floor is what keeps the chart filling the first screen, and it only works because the chart's `flex: 1` has something to expand into. Drag the chart resizer and that stops being true — .chart-container takes an explicit --chart-h and leaves the flex sizing, so nothing in the column stretches any more. The floor then holds a full viewport open that nothing can fill, and the whole band between the app and the description goes blank. Measured at 1440x900 with the chart dragged to 190px and a short favourites list: content ended at 459, the description started at 932 — 473px of nothing. See the :has() rule at the end of this block, which drops the floor in exactly that state. */ .wrap { height: auto; min-height: 100dvh; } .content-area { align-items: stretch; } /* Cap the chart so header + price strip + chart + quick-facts fill the first screen; the insight/description card then starts just past the fold. min-height is a short-viewport safety floor only. (The card's own desktop styling lives after the base .ins-* rules so source order wins.) */ /* The 248/320 pair left the 30-Day Range bar 80px below the fold at every desktop size measured — 1280x720 through 2560x1440, the same 80 every time, because the chart is the only elastic element and it was sized to end exactly at the fold with the range bar following it. That bar is the one thing on the page answering "is this cheap right now", and a new visitor had to scroll to discover it existed. 88px more (80 plus a little air) buys it back out of the chart, which has the most pixels to spare. Both numbers move together: min-height is a short-viewport safety floor and would win over max-height if it were left above it. */ .chart-container { min-height: calc(100dvh - 408px); max-height: calc(100dvh - 336px); } } /* Just above the desktop breakpoint the quick-facts strip runs out of width and wraps, which costs another ~40px that the 336 above does not know about — measured at 1024x768, where the range bar still sat 38px under the fold while every wider size cleared it by 8. Narrower band, deeper cut. */ @media (min-width: 1024px) and (max-width: 1200px) { .chart-container { min-height: calc(100dvh - 456px); max-height: calc(100dvh - 384px); } } @media (min-width: 1024px) { /* Without this, a long favorites list had nothing to bound it against — .wrap's height is auto (that's what lets the insight card sit just past the fold above), so align-items:stretch just grew the WHOLE page to fit every favorite instead of scrolling the list internally. That pushed "Find Opportunities" (and the tail of a long list) below the viewport, reachable only by scrolling past the chart entirely. Capping the sidebar to ~one screen makes .watchlist-content's existing overflow-y:auto actually engage once the list runs long, so it scrolls on its own while the chart stays put. */ /* --main-h is the MAIN COLUMN's content height, measured in JS (see sidebarCap). The viewport figure is the fallback and the hard ceiling: before this, an expanded Find Opportunities grew the sidebar to a full screen while the main column ended well above it — the panel ran ~180px past the "VOL 1.47M/day" row it sits beside, and expanding a scanner shoved the whole page down. Capped to the column, the scanner scrolls inside its own box instead and nothing else moves. */ /* The panel's own height rule moved to its own >=641px block below, so the 641-1023 band gets it too — see there. */ /* Who absorbs the difference, and who gives it back. The favourites list GROWS into whatever the panel has spare — so a short list simply has room under its rows, which is what a watchlist looks like, rather than leaving a hole between two panels. Find Opportunities takes what it needs and yields 100x faster, so when the two together overflow it is the scanner that scrolls, not the list: "my favourite list shouldn't scroll and shorten like that, just the Find Opportunities". min-height keeps its title bar from being squashed to nothing when it is the one giving ground. Only once it is down to that bar does the list start to scroll, which with a long enough list is unavoidable. */ /* .wrap is `height: 100dvh` so the chart's `flex: 1` has a definite screen to fill — the app deliberately occupies exactly one viewport. Drag the chart resizer, though, and .chart-container leaves that flex sizing for an explicit `--chart-h`: nothing in the column stretches any more, both columns end at their content, and the leftover shows as a blank band between the app and the about-section that nothing can move into. Measured at 1589x526 with the chart dragged to 190px: the quick-facts row ended at 420 while .main-column ran to 518, so ~98px of empty column inside a .wrap that still claimed the whole screen. At 900 tall it was 172px. Shrinking the wrap in exactly that state is the honest reading of the gesture: making the chart smaller should mean less app on screen, not the same screen with a hole in it. Everything else keeps 100dvh, so the default layout is untouched. Safe here specifically because the sidebar's cap above is viewport-based (calc(100dvh - 16px)) rather than a percentage — with nothing definite to resolve against, a `max-height: 100%` would compute to `none` and a long favourites list would grow the page instead of scrolling internally. min-height, NOT height: `height` is already `auto` two rules up, so setting it again does nothing — the floor is the whole mechanism, and the first version of this change set the wrong one and measured no difference at all. :has() is unsupported on very old browsers, where this simply doesn't match and the behaviour is what it is today. */ .wrap:has(.chart-container.user-sized) { min-height: 0; } } .calc-container { background: var(--bg-panel); border-bottom: 1px solid var(--border-main); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .calc-headline { display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 8px; border-radius: 4px; padding: 2px; margin: -2px; transition: background 0.15s ease; -webkit-tap-highlight-color: rgba(201,166,77,0.2); } /* Row-level hover/press, shared by all three section headers. Only Potential Profit had this, because only its row was clickable — so hovering near its chevron lit the whole row while the identical-looking Analyst Rating and Recommended Flip headers did nothing. The other two are click targets now (see wireHeaderToggle), which makes the highlight honest as well as consistent, and turns two 22px chevrons into full-width targets on a phone. */ .calc-headline:hover, .rg-top.is-toggle:hover, .fc-head.is-toggle:hover { background: rgba(255,255,255,0.04); } .calc-headline:active, .rg-top.is-toggle:active, .fc-head.is-toggle:active { background: rgba(201,166,77,0.12); } .rg-top.is-toggle, .fc-head.is-toggle { cursor: pointer; border-radius: 4px; padding: 2px; margin: -2px; transition: background 0.15s ease; -webkit-tap-highlight-color: rgba(201,166,77,0.2); } .calc-headline-left { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } /* Structural, same as the other section labels — it names the block, the green figure beside it carries the signal. Shares the ONE sidebar-header recipe (see --hdr-* below): every section label in the sidebar is 11px / 800 / 0.7px / --text-structural / upper, They used to be four different sizes (9, 10.5, 11, 13) in two colours, which made a column of equal-rank section names read like a ranking. */ .calc-headline-label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--hdr-size); font-weight: var(--hdr-weight); color: var(--text-structural); text-transform: uppercase; letter-spacing: var(--hdr-track); } .calc-headline-sub { font-size: 9px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calc-headline-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .calc-headline .res-profit { font-size: 16px; font-weight: bold; white-space: nowrap; } @media (min-width: 1024px) { .calc-headline { padding: 4px; } .calc-headline-sub { font-size: 10px; } .calc-headline .res-profit { font-size: 22px; letter-spacing: -0.5px; } } /* The three section expanders — Potential Profit, Analyst Rating and Recommended Flip — all wear this class, so the hover and press live HERE rather than on each one. They had drifted to three different behaviours: Analyst Rating had its own :hover, Potential Profit only lit up because its whole header row does, and the flip card's chevron had nothing at all, which is what made it feel broken rather than merely quiet. */ .calc-caret { font-size: 13px; color: var(--border-active); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(201,166,77,0.12); flex-shrink: 0; cursor: pointer; transition: background .15s ease, color .15s ease, transform .12s ease; } .calc-caret:hover { background: rgba(201,166,77,0.26); color: #FFD98A; } .calc-caret:active { transform: translateY(1px); } .calc-body { margin-top: 10px; } .calc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .calc-container input { width: 100%; background: var(--bg-input); border: 1px solid var(--border-light); color: var(--text-main); border-radius: 4px; padding: 6px 8px; font-size: 12px; outline: none; font-family: inherit; } .calc-input label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; } .calc-container input:focus { border-color: var(--border-active); } /* Compact breakdown, not a block of body text. Every row used to be 10px/400 in the same muted colour — measured identical, 11px tall each — so label and number carried exactly the same weight and the whole thing read as four lines of prose you had to parse end to end to find the one number you came for. Three tiers now: labels 9px, muted, letterspaced — row keys, not sentences numbers 11px, --text-main, tabular — the thing you actually read asides the repeated "gp" and the "2%, cap 5M" / "x10,000" qualifiers, dimmer than either, because they say the same thing on every row and carry no value on their own Row gaps drop 3px -> 1px so the working rows sit as a tight block, and that reclaimed space goes to the two rows that aren't part of the subtraction: Capital needed above, Net profit below, each cut off by a hairline. Net profit also takes a size step, so it terminates the breakdown rather than being the last of several identical lines distinguished only by colour. Rows carry an explicit 13px line box so mixing 9px and 11px inside one row doesn't let the taller glyph push the row height around. */ .calc-breakdown { margin-top: 8px; color: var(--text-muted); display: flex; flex-direction: column; gap: 1px; background: rgba(0,0,0,0.25); padding: 6px 10px 7px; border-radius: 4px; border: 1px solid var(--border-main); } /* align-items:center, not baseline: the label span needs overflow:hidden for its ellipsis on narrow phones, and an overflow-clipped flex item synthesises its baseline from the bottom margin edge instead of its text, which would drop the label below the number. Both spans share the row's explicit line box, so centring the equal-height boxes is stable. */ .calc-breakdown .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; line-height: 12px; } .calc-breakdown .row > span:first-child { font-size: 9px; letter-spacing: 0.2px; color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calc-breakdown .row > span:last-child { font-size: 11px; color: var(--text-main); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; } /* Qualifier inside a label, and the unit after a number. Both are dimmer than the muted label tint — decorative repetition, present for the reader who wants it and invisible to the one who doesn't. */ .calc-breakdown .bd-q { color: rgba(217,211,199,0.34); letter-spacing: 0; } .calc-breakdown .bd-u { font-size: 9px; color: rgba(217,211,199,0.34); margin-left: 3px; font-weight: 400; } /* The stake sits above its own hairline for the same reason Net profit sits below one: neither is a term in the margin-minus-tax sum between them, and an unsigned 2.4B parked in a column of signed numbers otherwise invites the reader to add or subtract it. */ .calc-breakdown .bd-stake { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border-light); } .calc-breakdown .bd-net { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border-light); line-height: 15px; } .calc-breakdown .bd-net > span:first-child { font-size: 10px; letter-spacing: 0.3px; color: var(--text-main); } .calc-breakdown .bd-net > span:last-child { font-size: 13px; font-weight: 700; } /* Content-sized, not greedy. `flex: 1` made this list claim every spare pixel of the column, so a short favourites list padded itself out with empty scroll area and pushed the splitter and Find Opportunities to the floor — measured on an 11-item list in a 936px column, 568px of nothing between the last row and the divider. The list is as tall as its rows now and Find Opportunities sits directly under them. shrink:100 rather than 1, so when the column IS over-full this is the thing that gives. Its siblings (the flip card, the two headers) are all `0 1 auto` and would otherwise squash proportionally — a half-height flip card to save a list that can simply scroll. min-height:0 is what lets it shrink below content at all; overflow-y:auto is what it does then. */ /* shrink:1, and the modules above are pinned instead — see .flip-finder et al below. Was shrink:100, from when this list was the only thing that could give: with the panel now capped to the main column, expanding a scanner made the list yield ALL of it and the favourites vanished entirely. Equal shrink lets the two lists give ground in proportion to their content, so both stay visible and both scroll, and the splitter is still there to override the split deliberately. */ /* GROWS into whatever the panel has spare, and is the LAST thing to give it back. A short list simply has room under its rows — which is what a watchlist looks like — rather than leaving a hole between two panels, and a list that fits is never scrolled just because the scanner below it is open. Pair this with .find-opps-host's shrink:100 below; the two together are the whole rule, and changing one without the other is what made the favourites collapse to a single row. */ /* min-height is the list's RESERVE, not zero, whenever the floor is in play (see sidebarCap). The panel's height already sets aside chrome + up to 15 rows, but reserving it in the panel is not the same as the list keeping it: flex hands the scanner shrink:100 against the list's shrink:1, and proportional shrink still took ~3px off the list — enough to clip the eleventh row and start it scrolling while the scanner sat 3px above its own floor. With the reserve declared, the scanner yields all of it and scrolls, which is the rule everywhere else on this panel. Defaults to 0, so every layout that does not set --fav-min is exactly as it was. */ .watchlist-content { flex: 1 1 auto; overflow-y: auto; min-height: var(--fav-min, 0px); max-height: var(--fav-h, none); } /* The fixed-content siblings do NOT shrink. This is what shrink:100 on the list was really protecting against — a half-height Recommended Flip to save a list that can simply scroll — and pinning them says it directly instead of encoding it as a ratio between two other numbers. */ .flip-finder, .fav-head-host, .col-header { flex: 0 0 auto; } /* ── Splitter between Favorites and Find Opportunities ─────────────────── The two lists share one fixed-height column, so every px one gains the other loses — which is exactly the case a draggable divider exists for. Hidden by default and switched on only where the column's height is actually constrained (see the desktop block): on phone portrait the whole sidebar scrolls, so there is no fixed budget to divide and a splitter would be a control that does nothing. The hit area is 11px but the visible line is 3px — a 3px drag target is a fiddly one, and the padding costs nothing because it sits in the gap the two sections already had between them. */ .wl-splitter { display: none; } @media (min-width: 1024px) and (pointer: fine) { .wl-splitter { display: flex; align-items: center; justify-content: center; height: 11px; flex: 0 0 auto; cursor: row-resize; touch-action: none; /* we own the gesture; don't scroll */ background: transparent; border: 0; padding: 0; } .wl-splitter span { display: block; height: 3px; width: 46px; border-radius: 2px; background: rgba(255,255,255,0.13); transition: background 0.12s ease, width 0.12s ease; } .wl-splitter:hover span, .wl-splitter:focus-visible span, .wl-splitter.is-dragging span { background: var(--border-active); width: 64px; } .wl-splitter:focus-visible { outline: none; } /* Sized by the drag, scrolls its own overflow, and never grows past the column. max-height rather than height so a COLLAPSED Find Opportunities stays the height of its own title bar instead of being padded out to a size the user picked for the expanded state. */ /* No max-height of its own any more. This element used to carry the splitter's cap (--opps-h); the splitter sizes the favourites list directly now, and this simply follows it up the column. `0 1 auto` with min-height:0 so that when both lists together exceed the panel it can still give ground — the list shrinks 100x faster (see .watchlist-content), so this only yields once the list is already at its floor. */ /* Takes what it needs and yields 100x faster than the list, so when the two together overflow the panel it is the SCANNER that scrolls. The floor keeps its title bar intact while it is the one giving ground — measured without one, a 60-item list squeezed this to 7px, i.e. the section header itself was sliced. Only once it is down to that bar does the list start to scroll, which with a long enough list is unavoidable. That floor was a flat 32px while the bar measures 35px plus its 1px rule, so the scanner was squeezed 4px past its own header: the closed bar got a scrollbar of its own and a sliced header — a control with nothing inside it offering to scroll. 36px is the measured height, not another guess. `min-height: min-content` looked like the way to stop guessing altogether, and is not: heights have no min-content/max-content distinction the way widths do, so it resolves to the FULL content height and the scanner grew to 1431px and swallowed the whole panel. The number stays; what makes it safe is the rule below. */ .find-opps-host { flex: 0 100 auto; min-height: 36px; overflow-y: auto; overscroll-behavior: contain; } /* Closed, the floor stops mattering: content-sized and unshrinkable, so the host is exactly the bar however tall the bar happens to be. The state that has nothing to scroll can no longer be squeezed into scrolling it, whatever --hdr-size does at some future breakpoint — which is the half of this that isn't a magic number. */ .find-opps-host:has(.find-opps-body.collapsed) { flex: 0 0 auto; overflow: hidden; } /* While dragging, kill text selection and pointer noise across the whole page — without this a fast drag selects list rows behind the cursor. */ body.wl-resizing { user-select: none; cursor: row-resize; } } .category-group { border-bottom: 1px solid var(--border-main); } /* Category title — sticky at top of the scroll container AND visually distinct from the dense colored rows below. Previous attempt went darker than the panel and kept colored text; both blended into the data. Now: LIGHTER bg than rows (clear "this is a different layer" contrast), always-bright white text (doesn't compete with the colored row badges), and a fat 3px colored accent stripe on the left so each section is still identifiable by color WITHOUT making the title text itself harder to read. */ .category-title { --cat-accent: var(--border-active); position: sticky; top: 0; z-index: 4; padding: 6px 12px 6px 13px; font-size: var(--hdr-size); font-weight: var(--hdr-weight); letter-spacing: var(--hdr-track); text-transform: uppercase; color: var(--text-structural); /* Flat panel fill, NOT a raised chip. This used to be a top-lit gradient (#312b23 -> #231e18) with a bevel highlight and a drop shadow, which made Favorites and Find Opportunities read as bolder and more important than Potential Profit, Analyst Rating and Recommended Flip — three headers of identical rank that are plain text on the panel. Same font the whole time; the weight people saw was the chrome around it. The fill has to stay OPAQUE because this header is sticky and list rows scroll underneath it, but it can be the panel's own colour, which is exactly what sits behind the other three. Section identity now rides entirely on the left accent stripe. */ background: var(--bg-panel); border-left: 3px solid var(--cat-accent); border-bottom: 1px solid #141210; cursor: pointer; display: flex; justify-content: space-between; align-items: center; box-shadow: inset 6px 0 20px -15px var(--cat-accent); transition: background 0.15s ease, box-shadow 0.15s ease; } /* Per-section accent colour drives the left stripe AND the left-edge glow. */ .category-title.high-title { --cat-accent: var(--sell-color); } .category-title.low-title { --cat-accent: var(--buy-color); } /* Parchment, not fav-gold. Gold is the app's "you chose this / act on this" colour — the saved star, the active timeframe, hover states. Spending it on a section stripe that is permanently there made the loudest accent in the sidebar mean nothing in particular. Parchment says "section" without claiming to be a signal. Find Opportunities takes the same one below, so the two headers read as siblings rather than as two unrelated colour codes. */ .category-title.fav-title { --cat-accent: var(--rs-parchment, #F2D49B); } .category-title.lose-title { --cat-accent: var(--negative); } .category-title.rec-title { --cat-accent: #FF9800; } /* Muted sage greens — the old #2ECC71/#7FE3A6 limes read neon-cool against the warm obsidian panels. */ .category-title.margin-title { --cat-accent: #57B87B; } .category-title.marginlo-title { --cat-accent: #9BD4AE; } .category-title.steady-title { --cat-accent: var(--rs-parchment); } .category-title.fall-title { --cat-accent: var(--negative); } /* "Find Opportunities" wrapper — same title chrome as any other section, just with a neutral accent (it's a container for six differently- accented sections, not a signal of its own). */ .category-title.find-opps-title { --cat-accent: var(--rs-parchment, #F2D49B); } /* Nested scanner titles (inside "Find Opportunities") are visually subordinate to it: smaller, indented, and NOT sticky — the outer wrapper's title already stays pinned while scrolling, so a second sticky header one level down would just fight it for the same top:0 slot. ONE quiet row style for all six, and no per-row accent stripe. Each scanner used to carry its own colour (sage, mint, parchment, red, teal, gold), which is right for a top-level section and wrong here: six coloured bars stacked under one header read as six competing sections rather than one menu, and they out-shouted Favorites directly above them despite ranking below it. The section accent on "Find Opportunities" is the one that carries identity; these are its contents. The stripe is kept as a transparent 3px so the text stays on the same left edge as every other title — collapsing the border would shift all six sideways relative to the header they sit under. */ .category-title.nested { position: static; padding: 6px 12px 6px 24px; font-size: 10px; --cat-accent: transparent; border-left-color: transparent; box-shadow: none; color: var(--text-muted); } .category-title.nested:hover { background: var(--bg-input); box-shadow: none; color: var(--text-main); } /* Quieter chevron to match — same idiom, one step down in contrast, so the hierarchy reads on the control as well as the label. */ .category-title.nested .cat-chevron { width: 20px; height: 20px; background: rgba(201,166,77,0.07); color: rgba(201,166,77,0.75); } .category-title.nested:hover .cat-chevron { background: rgba(201,166,77,0.2); color: #FFD98A; } .category-title.nested .cat-chevron .ui-ic { width: 12px; height: 12px; } .category-title:hover { background: linear-gradient(180deg, #3b342a 0%, #2a241d 100%); box-shadow: inset 8px 0 24px -15px var(--cat-accent), inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px -3px rgba(0,0,0,0.6); } /* Chevron rendered as a clearly tappable button so users can find "close" without aiming at a tiny glyph. Inverts when the section is collapsed so it's even more obvious the title is interactive. */ /* Same chrome as .calc-caret, deliberately. The note below claims one chevron idiom everywhere, but that only ever covered the GLYPH and its rotation — the chrome had quietly forked into two: a gold-tinted borderless chip on Potential Profit / Analyst Rating / Recommended Flip, and a white-tinted bordered box on the category headers. Both sit in the same sidebar, inches apart, doing the identical job, so the difference read as an accident rather than a distinction. Standardised on the gold chip: three of the five already used it, and gold is the app's interactive accent everywhere else. */ .cat-chevron { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 13px; color: var(--border-active); background: rgba(201,166,77,0.12); border: 0; border-radius: 4px; flex-shrink: 0; transition: background 0.12s ease, color 0.12s ease; } .category-title:hover .cat-chevron { background: rgba(201,166,77,0.26); color: #FFD98A; } /* ONE chevron idiom everywhere something expands/collapses (category headers, Potential Profit, flip-card): the same SVG chevron-down that rotates -90° when closed, in the same gold chip — glyph, rotation AND chrome, since matching only the first two still looked like two systems. The one chevron that stays different is .fls-caret on the Favorites title, and that is on purpose: it does not collapse anything, it opens the watchlist switcher. Bare glyph, no chip, and it rotates 180° rather than -90°, so the two roles stay distinguishable at a glance. */ .cat-chevron .ui-ic, .calc-caret .ui-ic { width: 13px; height: 13px; transition: transform 0.15s ease; } .cat-chevron.closed .ui-ic, .calc-caret.closed .ui-ic { transform: rotate(-90deg); } .category-list { display: block; } .category-list.collapsed { display: none; } .wl-page-link { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 11.5px; color: var(--text-muted); text-decoration: none; border-top: 1px solid var(--border-light); } .wl-page-link:hover { color: var(--accent-bright); } .wl-page-link .ui-ic { width: 12px; height: 12px; } /* Favorites list-switcher — TradingView-watchlist-header style: lives INSIDE the section title itself (no separate row, no collapse chevron — there's never a reason to collapse Favorites, only to switch which list is showing). The title carries a "[list name] ⌄" button that opens a dropdown of every list; a "+" replaces the chevron slot on the right to create one. */ /* Its dropdown menu can visually overflow below the title's own box, into where the next sticky section title sits. Both this title and that one are position:sticky + z-index (each forms its own stacking context), so a high z-index on the MENU alone can't win — it's trapped inside this title's stacking context. Raising the title's own z-index above the default 4 makes the whole context (title + its overflowing menu) paint above the next title instead of losing to it on DOM order. */ .category-title.fav-title { cursor: default; z-index: 10; } /* Plain text, not a pill-in-a-pill — matches every other section title's size/weight/tracking exactly (13px read oversized and heavy next to "HIGH VOL MARGINS" etc. below it), with only a color shift + caret to signal it's interactive. */ .fls-current { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 200px; background: none; border: none; padding: 0; margin: 0; /* The header TOKENS, not hand-copied values. This is the FAVORITES title, one of six section headers that are meant to be identical — and it was the only one at weight 800, because it is a