/* Amazon Keywords/ranking.css — what is left of this page's own looks after the design was redone from the shared file (owners, 2026-09-13: "redo their page's design from the shared file ... convert everything and delete the page's own styling for each part you convert"). 77 rules were deleted. The page frame, the menu, the top bar, the notices, the filter bar, the cards, the table's title bar, the heading row, the rows, the hover, the tick boxes, the archived block, the searchable model picker and every button now come from Shared Data/shell.css and nowhere else — change the look THERE and this page changes with every other page carrying the design. Three of those parts did not exist in the shared file before today and were moved into it: the searchable one-pick drop-down, the title-bar button's blue/red/count variants, and a card's bottom gap. WHAT IS STILL HERE, and it is a short list on purpose (RULEBOOK Rule 6 — "the only things a page's own stylesheet may hold: its accent colour, and a colour that MEANS something in that page's own data"): · every WIDTH — the shared file says in writing that how wide a column is is the page's own call; · the frozen Keyword column and its tick column; · colours that MEAN something: the rank badge (how good the rank is), the SQP-blue and PPC-violet tags, the charted-row tint; · the rank breakdown panel, the graph's hover card and the cell pop-up — the shared file's explanation card carries plain text, and these carry lists, pictures and links, so converting them would take something away rather than tidy it. Written down here so the next session does not "discover" it again. Loaded BEFORE shell.css on purpose (House Standard: the shell's rules win over a page's). Split out of keywords.html on 2026-09-03; the page itself was split in two on 2026-09-13 — its other half is search-volume.css. */ /* ⚠ HOW WIDE THE TABLE IS, IS THE PAGE'S OWN CALL, AND IT HAS TO BE SAID HERE. The shared file sets a table's type and its cell padding but deliberately NOT its width — a `min-width: 100%` default was written into the shell and thrown away the same hour, because on a wide monitor it stretched every column of a table that scrolls sideways. Its comment says so in as many words: "a table that should fill its card says `width: 100%` in its own page's stylesheet". This line was deleted in the redesign along with the rest of the old `table` rule and the /break pass caught it within the minute: the table stopped filling its card and every column shrank — Keyword 199px → 187px here, and on the search-volume page 232px → 137px. The numbers were all still right and still in the same order; the table had simply gone narrow. A width is not something the design owns. */ table { width: 100%; } /* the "Potential missing keywords" tab's list (topbar tab, 2026-09-03) — the page's own popover look (.ssel-pop, the model picker), anchored under the tab instead of fixed */ /* ⚠ `.ssel-pop.pmk-pop`, not `.pmk-pop`: the shared `.ssel-pop` rule (`:where(html…) .ssel-pop` — still one class's weight) loads AFTER this file and said `position: fixed`, so the list opened 6px below the bottom of the WINDOW, off screen. Found 2026-10-02 when the "left search" tab reused it. */ .ssel-pop.pmk-pop { position: absolute; top: calc(100% + 6px); right: 0; left: auto; min-width: 380px; max-width: 520px; padding: 6px 12px 8px; } .pmk-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #636e72; padding: 8px 0 2px; } .pm-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; border-top: 1px solid #eef0f3; } .pm-row:first-child { border-top: 0; } .pm-row .kw-tag { margin-left: 0; flex: 0 0 auto; } .pm-row .pm-kw { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .pm-row .pm-why { flex: 0 0 auto; color: #636e72; font-size: 12px; white-space: nowrap; } .pm-row .pmk-add { flex: 0 0 auto; padding: 2px 9px; font-size: 11px; } .pm-note { font-size: 11px; color: #98a1b0; padding: 8px 0 0; } /* on a phone the tab wraps to the left edge, so its list opens rightwards and never wider than the screen */ @media (max-width: 900px) { .ssel-pop.pmk-pop { left: 0; right: auto; min-width: 0; width: calc(100vw - 90px); } } /* the chart's date range — two native date boxes in the house input look */ .trend-range { display: flex; align-items: center; gap: 6px; } .trend-date { min-width: 0; padding: 4px 7px; font-size: 12.5px; } .model-select { border: 1px solid #cbd5e0; border-radius: 7px; padding: 5px 9px; font-size: 13px; font-family: inherit; color: #2d3436; background: #fff; min-width: 220px; } .period-pill { display: inline-block; margin-left: 10px; padding: 3px 11px; border-radius: 999px; background: #eaf1fe; color: #1d4ed8; font-size: 12px; font-weight: 700; vertical-align: 1px; cursor: help; } /* Keyword column: left-aligned, never wraps the search term, gets room */ th.kw-col, td.kw-col { text-align: left; white-space: nowrap; min-width: 160px; } /* The ticks have their own column, frozen at the left edge with the keyword beside it. 28px = the house tick cell (2px + 15px box + 2px) with room to breathe; the keyword column starts where it ends. */ th.kw-tickcol, td.kw-tickcol { width: 28px; min-width: 28px; } th.kw-tickcol, td.kw-tickcol { position: sticky; left: 0; background: #fff; z-index: 12; } th.kw-col, td.kw-col { position: sticky; left: 28px; background: #fff; z-index: 12; } /* Frozen-column separators (2026-08-05): collapsed borders don't travel with sticky cells, so the frozen Keyword column lost its lines when the table scrolled sideways. Inset shadows are painted by the cell itself. */ tbody td.kw-col { box-shadow: inset 0 1px 0 #eef0f3, inset -1px 0 0 #dfe4ea; } /* the frozen column's own header — above the headers that slide under it */ thead th.kw-col, thead th.kw-tickcol { --cg-th-z: 21; } tbody tr:hover td.kw-col, tbody tr:hover td.kw-tickcol { background: #f7f9fc; } /* "top 5 by units sold" tags, inside the keyword cell. Two colours because they are two different facts: SQP = what Amazon's shoppers bought, PPC = what our ads sold. A keyword can wear both. */ .kw-tag { display: inline-block; vertical-align: 1px; margin-left: 5px; padding: 1px 5px; border-radius: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; cursor: help; } .kw-tag-sqp { background: #e0ecfd; color: #1d4ed8; } .kw-tag-ppc { background: #f1e6fd; color: #7c3aed; } tbody tr.kw-row.cg-archived td.kw-col .fname { color: #98a1b0; } tbody tr.kw-row.cg-archived td.kw-col .kw-term { text-decoration: line-through; text-decoration-color: #c5cdd8; } .kw-src { color: #b0b8c4; font-size: 10px; margin-left: 5px; } tbody tr.kw-row.charted td.kw-col, tbody tr.kw-row.charted td.kw-tickcol { background: #eaf1fe; } tbody tr.kw-row.charted:hover td.kw-col, tbody tr.kw-row.charted:hover td.kw-tickcol { background: #dfeafd; } tbody tr.kw-row.charted { background: #eaf1fe; } tbody tr.kw-row.charted:hover { background: #dfeafd; } td .fname { font-weight: 600; color: #1a1d23; } td.nowrap, th.nowrap { white-space: nowrap; } td.gray, .gray { color: #98a1b0; } /* Marketplace badge — the shared house convention (SQP dashboard): US grey, CA yellow/purple */ .marketplace-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; } .badge-us { background: #dfe6e9; color: #2d3436; } .badge-ca { background: #ffeaa7; color: #6c5ce7; } /* THE BOX'S OWN GAP. The house draws the tick boxes (shell.css, data-table "v3") and gives them margin: 0, which left the box touching the word next to it. The gap belongs to the wrapper, so it survives whatever the house does to the box itself. The wrapper is also what keeps the KEYWORD heading out of shell.css's tick-only-column rule (th:has(> input)) — that rule centres the cell and drops its padding to 2px, which is right for a column holding nothing but a tick and wrong for one holding a tick AND a word: it put the heading's box in a different place from every box below it. */ /* How long a picture column covers, under its name — small and grey, so the name still reads as the name. */ thead th .th-when { display: block; font-weight: 500; font-size: 10px; color: #98a1b0; letter-spacing: 0; } .loading, .empty { padding: 28px; text-align: center; color: #98a1b0; font-size: 13px; line-height: 1.6; } .spark { display: block; margin: 0 auto; } .spark polyline { fill: none; stroke: #2563eb; stroke-width: 1.5; } .spark circle { fill: #2563eb; } .spark-rank polyline { stroke: #f59e0b; } /* rank trend: amber, flipped axis (up = better) */ .spark-rank circle { fill: #f59e0b; } /* Organic-rank cell — smart average across states, coloured by strength */ .rank-badge { display: inline-block; min-width: 34px; text-align: center; padding: 2px 7px; border-radius: 6px; font-weight: 700; font-size: 12.5px; cursor: help; } /* ⚠ A PLACE ON PAGE 1 HAS NO COLOUR CLASS HERE ANY MORE (owners 2026-09-14: "the color coding should be a scale, and that scale should be defined in the shared files, app standard"). .good / .mid / .low were three hard steps at 8 and 20, typed into this page; they are one smooth ramp now, mixed in Shared Data/shell.js (cgGoodBadLowOn) and put on the pill as an inline style. Do not bring the classes back — the map tab would then carry a second, slightly different copy of the same meaning. Not on page 1 at all ("50+") is not on the scale either: it wears the scale's own next step past the bad end (cgRankOffPage / CG_SCALE_BEYOND in Shared Data/scales.js), inline, the same as the Rank map. Its old page-local red (.rank-badge.bad, #fdecec) was removed 2026-09-26. The grey dash stays: no answer is not a place. */ .rank-badge.none { background: #eef0f3; color: #98a1b0; font-weight: 600; } /* "· 1 of 4" — the states we ranked in, out of the ones this marketplace has. Lighter and smaller than the rank itself: it qualifies the number, it is not a second number. */ .rank-cov { font-weight: 600; font-size: 11px; opacity: .72; } /* "See the page we read" — one button per state, under the ranking panel. Quiet by default: it is evidence you reach for, not a thing to click by accident. */ .rk-pages { margin: 8px 0 2px; padding-left: 2px; font-size: 12px; color: #667; } /* .rk-page-btn itself lives in Shared Data/shell.css since 2026-10-16 — the Google keyword ranking page's saved-page button is the same one. */ .rk-pages-note { display: block; margin: 3px 0 0; color: #98a1b0; font-size: 11px; } /* One line of proof per day the table counted (the 7-day panel lists seven). The day-picker strip that used to live here is gone: the figure is no longer one chosen day, so there is no day to choose. */ .rk-pages-lbl { display: block; font-weight: 700; color: #7a828e; margin-bottom: 3px; } .rk-pages-day { margin: 2px 0; } .rk-pages-day b { display: inline-block; min-width: 52px; color: #556; font-weight: 700; } /* The night the reader just clicked, among the others we still hold. Every night is offered (owners 2026-09-15: "the date map show only the latest day, can you elegantly show all of them"), so the one they came from has to be findable at a glance without shouting. */ .rk-pages-day.is-here { background: #eef4ff; border-radius: 4px; padding: 1px 4px; margin-left: -4px; } .rk-pages-day.is-here b { color: #2f5fd0; } .rk-pages-kw { margin-top: 2px; color: #98a1b0; font-size: 11px; font-style: italic; } /* ONE LINE PER KEYWORD, in columns. The date and product views hold a NIGHT still, so the list is every keyword of that night — twenty of them down a single column would push the page; three columns keep it to a few rows and still read left to right. The keyword is given a fixed width so the state buttons line up in a straight edge instead of ragging. */ .rk-pages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1px 18px; margin-top: 2px; } .rk-pages-kwline b { min-width: 150px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .rank-date { border: 1px solid #cbd5e0; border-radius: 7px; padding: 5px 9px; font-size: 13px; font-family: inherit; color: #2d3436; background: #fff; } /* Rank breakdown — click the rank to expand who ranks for the keyword (house pattern: Sales dashboard sku-subrow expandables) */ .rank-cell { cursor: pointer; } .rank-cell:hover .rank-badge { box-shadow: 0 0 0 2px #ffe0b2; } tr.rank-breakdown > td { background: #f7fafc; padding: 0; border-top: 1px dashed #e2e8f0; text-align: left; } .rk-wrap { padding: 10px 14px 12px 28px; cursor: default; } /* no text (I-beam) cursor over the breakdown */ .rk-wrap a { cursor: pointer; } .rk-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5b6472; margin-bottom: 7px; } .rk-list { display: flex; flex-direction: column; max-width: 680px; border-top: 1px solid #edf2f7; } .rk-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 6px 8px; border-bottom: 1px solid #edf2f7; } /* mild separators, like the Sales sub-rows */ .rk-row:last-child { border-bottom: 0; } .rk-row.ours { background: #eaf1fe; font-weight: 600; } /* The two ★ summary lines are a separate info box — amber frame, distinct from the blue "ours" product rows below (they were blending together). */ .rk-row.rk-usline { background: #fff8ea; border: 1px solid #f2ddab; border-bottom: 1px solid #f2ddab; border-radius: 7px; margin: 2px 0; } .rk-row.top3 .rk-pos { color: #b7791f; } .rk-row.rk-unranked .rk-who { color: #98a1b0; font-style: italic; } .rk-pos { min-width: 34px; text-align: center; font-weight: 700; color: #2d3436; flex: none; padding: 2px 6px; border-radius: 5px; } /* soft red when the ASIN is missing from some states (rank is from where it shows); deepens with more missing, never dark */ .rk-pos.miss1 { background: #fdeeee; } .rk-pos.miss2 { background: #fadcdc; } .rk-pos.miss3 { background: #f6cccc; } .rk-medal { width: 18px; text-align: center; flex: none; } .rk-asin { font-family: 'IBM Plex Mono', monospace; flex: none; } .rk-asin a { color: #2563eb; text-decoration: none; } .rk-asin a:hover { text-decoration: underline; } .rk-who { color: #636e72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The ★ lines carry the model name, the ASIN holding the figure and every state. On one nowrap line that got cut mid-ASIN — "CA #1 (B0CW6LQ..." — which is the one thing the owners asked to be able to read (2026-09-11: "asins can't be read"). They wrap instead, and the states sit on their own line underneath so nothing is ever clipped. */ .rk-usline .rk-who { white-space: normal; overflow: visible; text-overflow: clip; } .rk-usline .rk-states { display: block; margin-left: 0; margin-top: 2px; font-size: 12px; color: #7a828e; font-variant-numeric: tabular-nums; } .rk-usline .rk-pos { flex: none; } .rk-states { color: #98a1b0; font-size: 11px; margin-left: 8px; font-weight: 400; font-variant-numeric: tabular-nums; } .rk-ourtag { color: #1a1d1f; font-weight: 700; } .rk-star { color: #f1c40f; } .rk-empty, .rk-loading { font-size: 12px; color: #98a1b0; padding: 6px 8px; } .rk-retry { color: #2563eb; text-decoration: none; font-weight: 600; margin-left: 4px; } .rk-retry:hover { text-decoration: underline; } .rk-note { font-size: 11px; color: #98a1b0; padding: 2px 8px 6px; line-height: 1.5; } /* Copy-ASIN chip + "check & search on Amazon" toolbar (shared house look — same as the Market page). Copy chip uses the house ⧉→✓ convention. */ /* the copy chip's look moved to Shared Data/shell.css on 2026-08-30 */ .rk-checkcell { width: 16px; flex: none; text-align: center; } .amz-check, .amz-check-all { cursor: pointer; margin: 0; vertical-align: middle; } /* the shell DRAWS the tick box (data-table v3), so an accent-color here would do nothing */ .rk-tools { display: flex; align-items: center; gap: 14px; padding: 2px 8px 10px; flex-wrap: wrap; } .rk-foot { padding: 10px 8px 2px; } .rk-selall { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #5b6472; cursor: pointer; user-select: none; } .amz-search-btn { background: #2563eb; color: #fff; border: 0; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; } .amz-search-btn:hover:not(:disabled) { background: #ff9900; color: #131a22; } .amz-search-btn:disabled { opacity: .45; cursor: default; } /* Chart card */ .chart-wrap { position: relative; height: 280px; padding: 12px 18px 8px; } #trendHost { overflow: hidden; } /* the graph's hover card (HTML, so it can carry a product picture) — WHITE, the house card's colours (owners 2026-10-01: "remove the dark version") */ .trend-tip { position: absolute; z-index: 3000; pointer-events: none; opacity: 0; transition: opacity .08s; background: #fff; color: #344054; border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 14px 34px -10px rgba(16,24,40,.26), 0 0 0 1px rgba(16,24,40,.07); max-width: 340px; } .trend-tip .tt-title { font-weight: 700; margin-bottom: 4px; color: #0b1220; } .trend-tip .tt-row { display: flex; align-items: center; gap: 7px; padding: 3px 0; white-space: nowrap; } .trend-tip .tt-row img, .trend-tip .tt-noimg { width: 28px; height: 28px; border-radius: 4px; object-fit: contain; background: #fff; flex: 0 0 auto; } .trend-tip .tt-noimg { background: #eef0f3; } .trend-tip .tt-sw { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; } .trend-tip .tt-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } /* the little i beside "Charts" — the shell's click-card opens on it */ .kw-info { display: inline-block; vertical-align: 2px; width: 15px; height: 15px; line-height: 15px; margin-left: 4px; border-radius: 50%; background: var(--cg-th-chip, #dbe6fb); color: var(--cg-th-fg, #5b6a85); font-size: 10px; font-weight: 700; font-style: normal; text-align: center; } .chart-empty { padding: 40px 18px; text-align: center; color: #98a1b0; font-size: 13px; } /* Click-to-open cell popups (replace hover tooltips in the table) */ .haspop, .cellpop { cursor: pointer; } .cellpop { text-decoration: underline dotted #cbd5e0; text-underline-offset: 3px; } thead th.haspop:hover, .cellpop:hover { color: #2563eb; } /* Sortable headers: the house look — a caret pinned in the corner so the header text keeps its own two lines and never jumps as sorting changes. */ /* The look of a sortable heading — the blue line under the sorted one, the arrow, the hover colour — is the HOUSE table design now (data-table="v3", Shared Data/shell.css). Only "it is clickable" is left here. The ⓘ is gone with it: the explanation opens on HOVER, so there is no icon to hunt for and the whole heading is free to sort. */ thead th.sortable { cursor: pointer; user-select: none; position: sticky; } /* The figures in these columns are 1–4 digits, so the column would be sized far under its own two-line header and clip it ("SQP our purchases" showed as "SQP our purcha…"). This is a WIDTH floor, not table geometry. */ thead th.num { min-width: 84px; } #cellPopup { position: fixed; z-index: 3000; display: none; background: #fff; border: 1px solid #cbd5e0; border-radius: 9px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 11px 13px; font-size: 12.5px; color: #2d3436; line-height: 1.5; max-width: 340px; } #cellPopup .pop-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5b6472; margin: 0 18px 6px 0; } #cellPopup .pop-sub { font-size: 11.5px; color: #98a1b0; margin-bottom: 6px; } #cellPopup .pop-row { padding: 2px 0; } /* Help text is written in short lines with real line breaks (owners, 2026-09-12: the old one-paragraph help was "a pile of words"), so the popup must keep them. pre-line keeps the breaks and still wraps. */ #cellPopup .pop-help { color: #4a5568; white-space: pre-line; } /* sectioned help: a short bold label, then its line — never one long blob */ #cellPopup .pop-sec { margin-bottom: 9px; } #cellPopup .pop-sec:last-child { margin-bottom: 0; } #cellPopup .pop-sec > b { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #98a1b0; margin-bottom: 2px; } #cellPopup .pop-sec > div { color: #2d3436; line-height: 1.45; } #cellPopup .pop-list { max-height: 260px; overflow: auto; margin-top: 2px; } #cellPopup .pop-close { position: absolute; top: 7px; right: 9px; cursor: pointer; color: #b0b8c0; font-size: 13px; line-height: 1; } #cellPopup .pop-close:hover { color: #5b6472; } /* ═══ THE RANK MAP TAB (rankmap.js) ═════════════════════════ ONLY what RULEBOOK Rule 6 leaves to a page: the WIDTHS (the shared file says in writing that how wide a column is is the page's own call), the FROZEN first columns, and the colours that MEAN something in this page's own data — which here is just "this product is ours". Everything else — the heading row, its blue, the card, the pane, the hover card, the sort arrow — comes from Shared Data/shell.css and is deliberately not repeated here. ★ IT IS A COMPACT TABLE ON PURPOSE (owners 2026-09-14: "the columns width are way too wide for no reason, we want a super compact table"). Every figure in it is TWO OR THREE CHARACTERS — a place on page one — so a column has no business being wider than that, and a 14-night grid has to fit on one screen or the whole point of a grid is lost. Measured on Wood carving kit before and after: 1,224px → 776px across, and the row height 34px → 25px, so 14 rows fit where 10 did. House Standard §5.3 is the rule being obeyed here: a column is only as wide as its FIGURES need, and if a label does not fit you SHORTEN THE LABEL, never widen the column. */ /* ⚠ THE TABLE IS FIXED-LAYOUT, AND WITHOUT THAT LINE EVERY WIDTH BELOW IS IGNORED. On a normal (auto-layout) table the browser treats `width` and `max-width` on a cell as a SUGGESTION and sizes the columns from their contents and the space available — so `min-width: 100%` handed all the slack back to the columns and they came out 96px each however narrow this file asked them to be. Measured on Wood carving kit at 1440: asked for 46, got 96. `table-layout: fixed` makes the first row's widths the law. It still fills its card, because the LAST column (.rm-fill) has no width of its own and a fixed-layout table gives such a column whatever is left — so the figures stay compact and there is no empty card beside them. */ #rmWrap table { width: 100%; table-layout: fixed; } #rmWrap th.rm-fill, #rmWrap td.rm-fill { padding: 0; border-left: 0; } /* THE CELL'S OWN ROOM. The shell sets 7px 8px as a :where() default, which carries no weight, so this wins — and how much room a cell takes has always been the page's call, never the design's (RULEBOOK Rule 6: "a look may not change how much room a thing takes"). */ #rmWrap table tbody td, #rmWrap table tfoot td { padding: 5px 4px; } /* The shell pads every heading 15px each side to leave room for the little `i`. On a 46px column that leaves 16px and splits the date over two lines. The map's headings carry no `i` — they open on hover — so they need no room for one. (Same trim, same reason, as th.flag on Listing keywords.) */ #rmWrap thead th { padding: 5px 4px; } #rmWrap thead th .cg-th-label { word-break: keep-all; } /* Column 1 — the keyword (or the product). Frozen at the left edge so the name is still there when you have scrolled out to the 14th night. */ /* ── THE FROZEN COLUMNS ───────────────────────────────────── Keyword · Screenshot · Importance · the row's own figure. Which of them are drawn depends on the view, so their left offsets cannot be four fixed numbers — rmBuild writes them onto the table as --rm-* and every rule below reads them. It used to be a .rm-second-3 class meaning "the same column, but 76px further along", which was one hard-coded sum and could only ever describe one combination. The keyword column is 160px since 2026-09-15 (owners: "make the kws colum narrower, it's a bit too wide") — it was 200. */ #rmWrap th.rm-ident, #rmWrap td.rm-ident { position: sticky; left: 0; background: #fff; z-index: 12; text-align: left; white-space: nowrap; padding-left: 9px; width: 160px; overflow: hidden; text-overflow: ellipsis; } /* THE PAGE WE READ, as part of the table (owners 2026-09-15: "add a column after the kw called 'screenshot' and have the 4 squares in a compact way, so part of the table instead the text at the bottom"). Four two-letter buttons, no gaps to speak of: 124px for the lot — measured, because 104px clipped "NY" to "N". */ #rmWrap th.rm-shot-col, #rmWrap td.rm-shot-col { position: sticky; left: var(--rm-shot-l, 160px); background: #fff; z-index: 12; width: 124px; text-align: left; padding-left: 6px; white-space: nowrap; } .rm-shots { display: inline-flex; gap: 2px; } #rmWrap td.rm-shot-col .rk-page-btn.rm-shot { font-size: 9px; padding: 2px 3px; min-width: 21px; line-height: 1.1; border-radius: 3px; } /* The Screenshot ROW: the two views whose columns are NIGHTS carry the pages along the bottom instead of in a column, so they move with the dates (owners 2026-09-15: "in the product view it stays stuck on 1 date ... it needs to adjust to the date" and "in the keyword view maybe add a screenshot row not a column, and in the end of the table"). */ #rmWrap tr.rm-shot-row td { background: #fafbfc; box-shadow: inset 0 1px 0 #e6eaef; padding-top: 4px; padding-bottom: 4px; } #rmWrap tr.rm-shot-row td.rm-ident { white-space: normal; line-height: 1.2; } .rm-shot-lbl { display: block; font-weight: 700; color: #556; font-size: 11px; } /* THE KEYWORD THE PAGES BELONG TO, said as loudly as the rows above it (owners 2026-09-28: "make the kw at the bottom much more obvious, we can hardly see which KW the screenshot relates to"). It was 9.5px light grey, cut to one line. Now the row's own keyword size and weight, dark, on the header tint, and it wraps to a second line rather than being cut. */ .rm-shot-kw { display: block; margin-top: 3px; padding: 2px 5px; border-radius: 4px; background: var(--cg-th-bg, #eef4ff); color: #1f2a44; font-size: 12px; font-weight: 700; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; } #rmWrap td.rm-shot-cell { text-align: center; padding: 3px 2px; } #rmWrap td.rm-shot-cell .rm-shots { display: inline-flex; flex-wrap: wrap; gap: 1px; justify-content: center; } #rmWrap td.rm-shot-cell .rk-page-btn.rm-shot, #rmWrap td.rm-shot-cell .rm-shot-none { font-size: 8px; padding: 1px 2px; min-width: 17px; } .rm-shot-none { font-size: 9px; padding: 2px 3px; min-width: 21px; line-height: 1.1; display: inline-block; text-align: center; color: #c8cdd5; border: 1px solid #eef0f3; border-radius: 3px; } /* IMPORTANCE. How big the keyword is, 0–10, the same figure the Listing keywords page carries. Frozen beside the name, because it is the column the table is sorted by and a sort order you cannot see is no order. Drawn only on the two keyword views (rmBuild's hasImp). 76px, because "Importance" is ONE word: the house heading wraps at spaces and never inside a word, so the column has to be as wide as the label. */ #rmWrap th.rm-imp-col, #rmWrap td.rm-imp-col { position: sticky; left: var(--rm-imp-l, 160px); background: #fff; z-index: 12; width: 76px; font-size: 11.5px; } /* The one figure that belongs to the ROW rather than to a cell (Amazon's search volume, or how many nights it held page 1). Frozen too. WIDER since 2026-09-14 (owners: "s.v column should be slightly wider by default") — 56px fitted "27,712" exactly, with nothing left for the sort arrow the heading carries; 74px holds a seven-figure volume as well. */ #rmWrap th.rm-second, #rmWrap td.rm-second { position: sticky; left: var(--rm-sec-l, 160px); background: #fff; z-index: 12; width: 74px; font-size: 11.5px; } /* A collapsed border does not travel with a sticky cell — it vanishes the moment you scroll sideways, which is the one moment the line matters. The frozen cells draw their own edge with an inset shadow (House Standard §7). */ #rmWrap tbody td.rm-second { box-shadow: inset 0 1px 0 #eef0f3, inset -1px 0 0 #dfe4ea; } #rmWrap tbody td.rm-imp-col, #rmWrap tbody td.rm-shot-col { box-shadow: inset 0 1px 0 #eef0f3; } /* the frozen columns' own headers are corners: they must sit ABOVE the headers that slide under them. The shell owns the z-index; a page states the value through this variable and never writes z-index on a th. */ #rmWrap thead th.rm-ident, #rmWrap thead th.rm-second, #rmWrap thead th.rm-imp-col, #rmWrap thead th.rm-shot-col { --cg-th-z: 21; } #rmWrap tbody tr:hover td.rm-ident, #rmWrap tbody tr:hover td.rm-second, #rmWrap tbody tr:hover td.rm-imp-col { background: #f7f9fc; } #rmWrap td.rm-ident { font-size: 12.5px; } /* A place column holds two or three characters, so the FIGURE wants ~30px. The one thing in it that cannot be shortened is the ASIN. Measured in this page's own mono at 8.5px a 10-character ASIN is 48px, plus the 3px each side the heading pads — 54. At 46px it came out as “B0FKZY1NL…”, and half an ASIN identifies nothing. House Standard §5.3 says shorten the label rather than widen the column; an ASIN has no short form, so the picture above it does that job and the column is the smallest width that still prints the name whole. 2026-09-22: the ASIN now carries the house copy chip on its line (owners: "copy icon after asin"): 48px of ASIN, a 2px gap and a 10px chip is 60, plus the heading's 4px each side — 68. Measured in a browser: at 66 the line overflowed the cell by 1px. Thirteen columns cost 130px; the chip has nowhere else to go without leaving the ASIN it copies. */ #rmWrap th.rm-col, #rmWrap td.rm-col { width: 68px; } /* A product column's heading: the picture, the ASIN, and "ours" when it is. The ASIN is 10 characters of monospace and it is what sets this column's width, so it is set in the smallest size that still reads. */ .rm-phead { display: flex; flex-direction: column; align-items: center; gap: 2px; } .rm-phead img.rm-pimg { width: 28px; height: 28px; object-fit: contain; max-width: 100%; border: 1px solid #eef0f3; border-radius: 4px; background: #fff; } .rm-pasin { font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: -.04em; } a.rm-pasin { color: #2563eb; text-decoration: none; } a.rm-pasin:hover { text-decoration: underline; } /* The ASIN and its copy chip on ONE line (owners 2026-09-22: "copy icon after asin"). The chip is the house .copy-btn from shell.css; only its size and gap are this page's, because it sits beside 8.5px type. */ .rm-pasin-line { display: inline-flex; align-items: center; max-width: 100%; } /* The chip's smaller size is the shell's .cg-copy-tight modifier on that line — a page may not write a .copy-btn rule of its own (a first cut did, and the suite's one-chip test caught it; a plain class pair would also have lost to shell.css's own rule, measured: the line overflowed). */ /* The three slots under the ASIN — brand · variations · ours — are always drawn, one fixed height each, so every heading is the same height and the "#" over every column sits on one line (owners 2026-09-22: "align the numbers of the best sellers"). An empty slot costs the same 11px as a full one; the tallest heading already had all three, so nothing grew. */ .rm-pmeta { display: block; height: 11px; line-height: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* THE PLACE, 1 = best across this model's keywords (owners 2026-09-14: "rank them like in the market kw table, from 1 to the last"). Quiet on purpose — it labels the column, it is not one of the figures in it. */ .rm-place { font-size: 9px; font-weight: 700; color: #8a94a6; letter-spacing: .02em; } /* the brand, because nobody remembers an ASIN. Clipped rather than wrapped: a second line here would grow every heading on the page. */ .rm-pbrand { font-size: 8.5px; color: #98a1b0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the same product as a ROW (the "hold the keyword still" setting) */ .rm-prow { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .rm-prow img.rm-rimg { width: 22px; height: 22px; object-fit: contain; border: 1px solid #eef0f3; border-radius: 3px; } .rm-prow .rm-pasin { font-size: 11px; letter-spacing: -.02em; } .rm-prow .rm-pbrand { font-size: 10.5px; } .rm-noimg { width: 22px; height: 22px; border: 1px dashed #e6e8ec; border-radius: 3px; display: inline-block; flex: none; } /* ── The product picker (the house .ssel; shell.css owns its look) ── Only the picture sizes and the row's packing are this page's. */ /* ⚠ THE PICKED PRODUCT IS THE SUBJECT OF THE WHOLE TABLE, so it is drawn at a size you can actually recognise (owners 2026-09-15: "when choosing product view the product image and title are too small"). The picture is 38px instead of 20, the ASIN reads at 11px instead of 8.5, and the brand sits under it rather than beside it — a picture you can see and a name you can read, in the same chip, without making the filter bar taller than the other pickers. */ #rmAsinBtn .ssel-lbl { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } #rmAsinBtn img.rm-btnimg { width: 38px; height: 38px; object-fit: contain; border: 1px solid #eef0f3; border-radius: 5px; background: #fff; flex: none; } #rmAsinBtn .rm-btnwho { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; } #rmAsinBtn .rm-btnwho .rm-pasin { font-size: 11px; letter-spacing: -.02em; color: #111; } #rmAsinBtn .rm-btnwho .ssel-brand { font-size: 10.5px; font-weight: 600; color: #5b6472; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; } #rmAsinBtn .rm-btntags { display: inline-flex; align-items: center; gap: 5px; flex: none; } .rm-asin-pop .ssel-opt.rm-aopt { display: flex; align-items: center; gap: 8px; } .rm-asin-pop img.rm-optimg { width: 26px; height: 26px; object-fit: contain; flex: none; border: 1px solid #eef0f3; border-radius: 4px; background: #fff; } .rm-asin-pop .rm-aopt .ssel-brand { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; } .rm-asin-pop .rm-aopt .rm-place { min-width: 18px; text-align: right; flex: none; } /* ── THE ONE COLOUR THIS PAGE OWNS: our own product. Same blue the Keywords table uses for a charted row, so "ours" means one thing on both tabs. ── */ .rm-pours { font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1d4ed8; } /* OURS. The heading and the totals line keep the blue fill; in the body the fill only shows where there is no place to colour, because a real figure's colour is worth more than the reminder that this column is ours. The blue EDGES run the whole way down either way, so the column still reads as one band (owners: "do it for the entire row column"). */ #rmWrap th.rm-ours, #rmWrap td.rm-ours { background: #eaf1fe; } #rmWrap tbody td.rm-ours { box-shadow: inset 2px 0 0 #9cc0fb, inset -2px 0 0 #9cc0fb; } #rmWrap tbody tr:hover td.rm-ours { background: #dfeafd; } /* ⚠ OUR ROW IS BLUE ALL THE WAY ACROSS, not just its first cells (owners 2026-09-14: "when it's our product and you color the beginning of the row or column, do it for the entire row column, not just the beginning"). It used to tint only the frozen cells, so on the Keyword view our own row started blue and turned white the moment the figures began — which reads as a drawing fault, not as "this one is us". The frozen cells still need their own rule: they paint white to hide the rows sliding under them, and that white would otherwise win. */ #rmWrap tbody tr.rm-ours-row td { background: #eaf1fe; box-shadow: inset 0 2px 0 #9cc0fb, inset 0 -2px 0 #9cc0fb; } #rmWrap tbody tr.rm-ours-row:hover td { background: #dfeafd; } /* The chip inside a 58px cell: no min-width of its own, just enough padding to read as a chip. The COLOUR is not here — a place and an Importance both wear the house .cg-scale pill, whose colour is mixed in Shared Data/shell.js (cgGoodBadLowOn / cgGoodBadOn). This page only says how big the pill is. .rank-badge is still used for the grey dash: an absence is not a place on a scale, so it must never be given a colour off it. */ #rmWrap .rank-badge { min-width: 0; padding: 2px 6px; font-size: 12px; border-radius: 5px; } #rmWrap .cg-scale { min-width: 0; padding: 2px 6px; font-size: 12px; border-radius: 5px; } /* ⚠ THE PLACE IS THE CELL, NOT A PILL IN IT (owners 2026-09-14: "color the cells, not just the number … now we can't see the color difference between 1, 2 or 3"). The background is written onto the by rmCellStyle, off the house rank scale (cgRankScale in Shared Data/shell.js) — no colour of it is typed here. All this says is how the figure sits in the painted cell. */ #rmWrap tbody td.cg-num { text-align: center; } .rm-pl { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; } /* AN OLDER NIGHT IS A RED DATE (owners 2026-09-15: "if the marking of the old dates is the dotted line under it's terrible, mark it by swapping the date fonts to red"). It is read with the old page reader, where a state the product was missing from is left out of the average instead of counting against it — RANK_CLEAN_FROM in rank.js, and the heading's own card says it in one red line. The MARK IS ON THE DATE ONLY: marking every figure in the column said the same thing hundreds of times. */ .rm-d1.rm-old { color: #c62828; } #rmWrap th .rm-d1.rm-old + .rm-d2 { color: #e57373; } /* A night still being scraped (rankNightCoverage): amber, count on the hover. A colour that MEANS something in this page's data, so it lives here. */ .rm-d1.rm-scraping { color: #b7791f; } #rmWrap th .rm-d1.rm-scraping + .rm-d2 { color: #d4a24c; } .rm-dash { color: #b7bec9; font-weight: 600; } /* THE ADS MAP'S CELL (owners 2026-10-21: "the cell will say 2,7,45"). Every place is printed, so a long list may break onto a second line — after a comma only ( in rmAdsCell), never inside a number. A touch smaller than an organic place so three places fit the 68px column on one line. */ .rm-pl.rm-adl { font-size: 11px; white-space: normal; overflow-wrap: normal; line-height: 1.25; } /* Read by the backup service on at least one state: ad cards only. */ .rm-pl.rm-adpart { text-decoration: underline dotted; text-underline-offset: 2px; } /* Read, and no ad: an answer, quieter than a figure (like .rm-sv-low). */ .rm-noad { color: #98a1b0; font-size: 10px; font-style: italic; white-space: nowrap; } /* S.V: too few searches to be in Amazon's weekly list — an answer, quieter than a figure. */ .rm-sv-low { color: #98a1b0; font-style: italic; } /* A cell we painted must keep its own colour when the row is hovered, or the heat map flickers grey under the cursor. */ #rmWrap tbody tr:hover td.cg-num[style] { filter: brightness(0.97); } /* The ramp shown in the legend: the same three stops, drawn as one strip so a reader can see it IS a scale rather than three named steps. The colours are read from the shared file at draw time, never typed here. */ /* "4 var." — how many variations sit behind a column. Quiet: it qualifies the product above it, it is not a figure to read. */ /* A PPC cell nobody has asked for yet: it offers, so it has to look like it can be clicked. The word is tiny because it is an offer, not a figure. */ td.ppc-ask { cursor: pointer; font-size: 10px; font-weight: 600; text-decoration: underline dotted; } td.ppc-ask:hover { color: #2563eb; } .rm-pkids { font-size: 8.5px; font-weight: 700; color: #7a8698; background: #eef1f5; border-radius: 3px; padding: 0 3px; letter-spacing: .01em; } /* a night's heading: the date, and the weekday small under it */ .rm-d1 { display: block; font-size: 11px; } .rm-d2 { display: block; font-size: 9.5px; font-weight: 500; color: #98a1b0; letter-spacing: 0; } /* The legend row was removed on 2026-09-14 (owners: "it's obvious"), and its rules went with it — a stylesheet that keeps dressing something nobody draws is how the next person re-adds it by accident. */ /* THE TIME-OF-DAY FLAG (owners 2026-11-10, rankmap-recheck.js): the second scrape at another hour disagrees with the night's. Colours that MEAN something on this page — 1 place yellow, 2 orange, 3+ red. It sits in the cell's corner, out of the flow, so it takes no room: the cell keeps exactly its width and height (RULEBOOK Rule 6, a look may not move anything). */ #rmWrap tbody td.rm-rc { position: relative; } #rmWrap .rm-rcflag { position: absolute; top: 1px; right: 2px; font-size: 13px; line-height: 1; pointer-events: none; text-shadow: 0 0 2px #fff, 0 0 2px #fff; } #rmWrap .rm-rc1 { color: #ca8a04; } #rmWrap .rm-rc2 { color: #ea580c; } #rmWrap .rm-rc3 { color: #dc2626; }