/* Amazon Market/v2/keywords.css — how the "Market keywords" table looks
   (keywords.js). MOVED OUT OF styles.css ON 2026-09-19, unchanged, because a
   second page draws the very same table: /amazon/asin-keywords ("Keywords per
   ASIN") loads keywords.js and this file beside it. One copy, two pages —
   RULEBOOK Rule 6: a second, slightly different version of a thing that
   exists is a bug, and a copy is how it would have become one.

   Loaded by the Markets page (after styles.css) and by the Keywords per ASIN
   page (as its table's own looks). Both load Shared Data/shell.css AFTER it,
   so the house table look still wins on anything it also sets.

   WHAT IS IN HERE is the table's own: the card's head line, the tools on it,
   where the frozen tick and keyword columns sit, the ASIN column heads (the
   picture, the rank, the ASIN, the brand), the green place cells, and the
   pop-ups behind a figure. Colour, type and the heading row come from the
   shell (the notes below say what was deleted when). */
/* ── Market keywords (keywords.js, 2026-09-06) — the folded row under the charts ── */
/* Its own card (#keywordsCard) under the charts card, the same one-line
   head shape as the charts row (.cw-bar) so it reads as "another collapsed row". */
.mk-card { padding: 11px 18px; }
.mk-card > .mk-sec > h3.mk-head { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; user-select: none; font-size: 14px; }
.mk-head .mk-meta { font-size: 12px; font-weight: 500; color: #636e72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tools { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; }
.mk-btn { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border: 1px solid #d7dbe2; border-radius: 8px; background: #fff; color: #5b6472; cursor: pointer; }
.mk-btn:hover { background: #e9f0fb; border-color: #c9d9f0; }
.mk-btn.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.mk-btn:disabled { opacity: .5; cursor: default; }
/* ── THE PERIOD IS THE HOUSE CHIPS NOW (2026-09-13) ──────────────────────
   Five rules here drew three joined buttons — a control I invented on this
   page on 12 September and never said so. The shared file already had the
   answer and says it in words: "a group of one-click choices is
   `.filter-chips` + `.filter-chip`, never a page-local pill". A period is
   exactly that, so it wears those and this file says nothing about how they
   look. The ONE line left is where the group sits on this row. */
.mk-per { margin-right: 10px; }
/* The line under the table when only part of the list is drawn. The count
   is there so "Show 200 more" can never be mistaken for the whole list. */
.mk-more { display: flex; align-items: center; gap: 10px; padding: 8px 2px 0; }
.mk-more-n { font-size: 11.5px; color: #98a1b0; }
.mk-host { padding: 12px 0 4px; }
.mk-scroll { border: 1px solid #eef0f3; border-radius: 8px; }
.mk-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
/* ONLY WHERE THIS TABLE SITS AND HOW WIDE IT IS. Its colour, its type and
   its line under the heading came out on 2026-09-13 — five declarations
   the shared file already sets, kept here as a second opinion nobody
   could see. */
.mk-table th { position: sticky; top: 0; z-index: 3; padding: 6px 8px; text-align: center;
               white-space: nowrap; cursor: pointer; user-select: none; vertical-align: bottom; }
/* The three rules that drew this table's OWN sorted column were deleted
   2026-09-13. The shared file draws it now — same blue heading, same arrow,
   as every other table in the app. */
.mk-table td { padding: 5px 8px; border-bottom: 1px solid #eef0f3; text-align: center; font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-table th.mk-kw, .mk-table td.mk-kw { text-align: left; font-family: inherit; position: sticky; left: 34px; background: #fff; z-index: 2; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.mk-table th.mk-tick, .mk-table td.mk-tick { position: sticky; left: 0; width: 34px; min-width: 34px; background: #fff; z-index: 2; cursor: default; }
.mk-table th.mk-kw { z-index: 4; } .mk-table th.mk-tick { z-index: 4; }
.mk-table td.mk-kw .mk-term { font-weight: 500; }
.mk-table td.mk-cap { font-weight: 700; }
.mk-table tbody tr:hover td { background: #f3f6fb; }
.mk-table .mk-tech { display: none; }
.mk-table.tech .mk-tech { display: table-cell; border-left: 1px solid #eef0f3; }
.mk-table th.mk-ours-col, .mk-table td.mk-ours-col { border-left: 1px solid #eef0f3; }
.mk-sub { display: block; font-size: 10px; color: #98a1b0; line-height: 1; margin-top: 2px; }
.mk-click { cursor: pointer; border-bottom: 1px dashed #b8c0cc; }
.mk-click:hover { border-bottom-color: #2563eb; color: #2563eb; }
/* one family = one column: picture, market rank, ASIN, brand. No coloured rule over the
   picture (owners 2026-09-06: "weird color bar above the products images"); ours are told
   apart by the market table's blue tint on the whole column, nothing else. */
.mk-table th.mk-fam { min-width: 100px; padding: 6px 4px 4px; }
.mk-table th.mk-fam.ours, .mk-table td.mk-fam-td.ours { background: color-mix(in srgb, var(--fam) 9%, #fff); }
.mk-fam-pic { display: block; width: 34px; height: 34px; margin: 0 auto 2px; cursor: pointer; }
.mk-fam-pic img { width: 34px; height: 34px; object-fit: contain; border-radius: 4px; background: #f5f6fa; display: block; }
.mk-fam-pic .pic-ph { display: block; width: 34px; height: 34px; border-radius: 4px; background: #f1f3f7; }
.mk-fam-rank { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; color: #2d3436; }
.mk-fam-asin { display: block; font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; font-weight: 600; color: #2d3436; letter-spacing: .01em; }
.mk-fam-asin small { font-size: 9px; font-weight: 500; color: #8a94a6; margin-left: 2px; }
.mk-fam-lbl { display: block; font-size: 10px; font-weight: 500; color: #98a1b0; max-width: 100px; overflow: hidden; text-overflow: ellipsis; margin: 0 auto; }
/* the place cell: 1st → 3rd among Amazon's most-clicked, coloured by mkPlaceColor */
.mk-place { display: inline-block; min-width: 34px; padding: 1px 6px; border-radius: 6px; color: #2d3436; font-weight: 500; }
.mk-place.mk-click { border-bottom: 0; }
.mk-place.mk-click:hover { color: #2563eb; }
.mk-pop { position: fixed; z-index: 240; background: #fff; border: 1px solid #d7dbe2; border-radius: 10px; box-shadow: 0 10px 30px rgba(20,30,50,.18); padding: 12px 14px; width: min(460px, 92vw); font-size: 12.5px; color: #2d3436; }
.mk-pop h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; padding-right: 20px; }
.mk-pop .mk-pop-sub { color: #636e72; font-size: 12px; margin-bottom: 8px; }
.mk-pop .mk-pop-x { position: absolute; top: 6px; right: 10px; border: 0; background: none; font: inherit; font-size: 16px; color: #98a1b0; cursor: pointer; }
.mk-pop-t { border-collapse: collapse; width: 100%; font-size: 12px; max-height: 300px; }
.mk-pop-t th { text-align: center; font-weight: 600; color: #636e72; padding: 4px 6px; border-bottom: 1px solid #d7dbe2; white-space: nowrap; }
.mk-pop-t td { text-align: center; padding: 4px 6px; border-bottom: 1px solid #eef0f3; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.mk-pop-t th.l, .mk-pop-t td.l { text-align: left; font-family: inherit; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-pop-t tr.tot td { font-weight: 700; border-top: 2px solid #d7dbe2; }
.mk-pop-note { font-size: 11px; color: #98a1b0; margin-top: 8px; line-height: 1.4; }
/* The one-line notice inside the table's host — "Reading…", "Could not read…",
   "None … won a top-3 slot". On the Markets page it also wears .trend-empty,
   which that page's own stylesheet draws the same way for its trend chart;
   this rule is what draws it on the Keywords per ASIN page, which loads no
   Market stylesheet. Same values, so nothing moves on either page. */
.mk-host .mk-empty { padding: 14px 18px 16px; color: #98a1b0; font-size: 12.5px; }