/* ============================================================================
   rankings.css - additive rules for the /rankings pages only. Linked through
   the chrome's {{head_extra}} slot, AFTER overhaul.css (additive CSS goes last,
   AUGMENTATION-LAW §2a-5). Only the owner's var(--ds-*) tokens; no raw colour.
   Nothing here restyles one of his components: every selector below is either
   a class of ours (rk-*), or one of his elements scoped to a class of ours, or
   a property his rules never set (overflow-wrap on long store names).

   THE RANK GRID RAMP. Eagle Eyes' bands (1-3, 4-7, 8-10, 11-15, 16-20) are an
   ORDINAL scale, so they take one hue in monotone steps (dataviz skill), here
   the brand violet, mixed from his tokens:
     r1 #e6d7fd  r2 #ccacf8  r3 #ae76ef  r4 #8d3fe8  r5 #7731c8   (OKLab mixes)
   Validated with the skill's validator (--ordinal, --mode dark) against his
   three dark grounds #15161A / #1B1D22 / #222429: lightness monotone, every
   adjacent step >= 0.06 L apart, darkest step 2.63 / 2.46 / 2.26 : 1 (>= 2),
   hue spread 4 deg. Brighter = better on the dark page. Labels: dark ink on
   r1-r3 (13.35 / 9.32 / 5.71 : 1), white on r4-r5 (5.24 / 6.87 : 1).
   Past 20 is not a rank (Eagle Eyes): the neutral surface, labelled "20+".
   ========================================================================== */

/* ---- long display titles never push the page wider than the screen ------- */
.tc-head__title,
.rs-head__title,
.hw-head__title{overflow-wrap:break-word}

/* ---- the rank grid ------------------------------------------------------- */
.rk-grid{
  --rk-r1:color-mix(in oklab,var(--ds-accent-light) 30%,var(--ds-bg-light));
  --rk-r2:color-mix(in oklab,var(--ds-accent-light) 62%,var(--ds-bg-light));
  --rk-r3:var(--ds-accent-light);
  --rk-r4:var(--ds-accent);
  --rk-r5:color-mix(in oklab,var(--ds-accent) 72%,var(--ds-accent-deep));
  --rk-ink-on-light:var(--ds-bg-surface);
  --rk-ink-on-deep:var(--ds-ink-heading);
  margin:var(--ds-space-lg) 0 0}
.rk-grid__plate{
  position:relative;max-width:520px;
  padding:clamp(10px,2.2vw,var(--ds-space-md));
  background:var(--ds-bg-warm);border:1px solid var(--ds-line);border-radius:var(--ds-r-surface)}
.rk-grid__plate:focus-visible{outline:2px solid var(--ds-accent-ink);outline-offset:3px}
.rk-grid__cells{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:2px}
/* cells rankings.js draws from the page's island (2026-10-28): the square they fill (11 square cells, 11 rows, the same
   gap both ways) is kept while it is empty, so nothing below moves when they appear */
.rk-grid__cells[data-rk-draw]{aspect-ratio:1/1}
.rk-cell{
  aspect-ratio:1/1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ds-font-display);font-weight:700;font-size:clamp(11px,1.05vw,12px);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  background:var(--ds-bg-surface-2);color:var(--ds-ink-soft);
  cursor:default;user-select:none}
.rk-cell--r1{background:var(--rk-r1);color:var(--rk-ink-on-light)}
.rk-cell--r2{background:var(--rk-r2);color:var(--rk-ink-on-light)}
.rk-cell--r3{background:var(--rk-r3);color:var(--rk-ink-on-light)}
.rk-cell--r4{background:var(--rk-r4);color:var(--rk-ink-on-deep)}
.rk-cell--r5{background:var(--rk-r5);color:var(--rk-ink-on-deep)}
.rk-cell--x,
.rk-cell--err{background:var(--ds-bg-surface-2);color:var(--ds-ink-soft)}
/* across the state line: drawn in a dashed ring of the cell's own ink, the number at full contrast (counted on the
   store's own grid only). UX-08: the old 45% fade put those numbers at 2.28:1. */
.rk-cell--out{outline:1.5px dashed currentColor;outline-offset:-1.5px}
/* the store's pin: a surface ring, then an ink ring (dataviz: a ring, never a border) */
.rk-cell--pin{box-shadow:0 0 0 2px var(--ds-bg-warm),0 0 0 3px var(--ds-ink-heading)}
.rk-cell.is-active{box-shadow:0 0 0 2px var(--ds-bg-warm),0 0 0 4px var(--ds-accent-ink)}

.rk-grid__cap{margin-top:var(--ds-space-sm);max-width:520px}
.rk-legend{display:flex;flex-wrap:wrap;gap:var(--ds-space-xs) var(--ds-space-md);margin:0;padding:0;list-style:none}
.rk-legend__i{display:inline-flex;align-items:center;gap:var(--ds-space-xs);
  font-family:var(--ds-font-body);font-size:var(--ds-step-micro);line-height:1.4;color:var(--ds-ink-soft)}
.rk-legend__i b{color:var(--ds-ink);font-weight:700}
.rk-chip{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%}
.rk-chip.rk-cell--x,
.rk-chip.rk-cell--err{box-shadow:inset 0 0 0 1px var(--ds-line)}
.rk-grid__note{margin:var(--ds-space-xs) 0 0;font-size:var(--ds-step-micro);line-height:1.5;color:var(--ds-ink-soft)}

/* hover / keyboard detail (rankings.js); every value is also printed in the cell and the legend */
.rk-grid__tip{
  position:absolute;left:0;top:0;z-index:var(--ds-z-raised);
  width:max-content;max-width:min(280px,calc(100% - 16px));
  padding:var(--ds-space-sm) var(--ds-space-md);
  background:var(--ds-bg-surface-2);border:1px solid var(--ds-line);border-radius:var(--ds-r-control);
  box-shadow:var(--ds-shadow-card);
  font-family:var(--ds-font-body);font-size:14px;line-height:1.45;color:var(--ds-ink-soft);
  pointer-events:none}
.rk-grid__tip[hidden]{display:none}
.rk-grid__tip strong{display:block;font-family:var(--ds-font-display);font-size:16px;font-weight:800;color:var(--ds-ink-heading)}
.rk-tip__where,.rk-tip__h{display:block;margin-top:var(--ds-space-2xs);font-size:var(--ds-step-micro)}
.rk-tip__h{font-family:var(--ds-font-display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-accent-ink)}
.rk-grid__tip ol{margin:var(--ds-space-2xs) 0 0;padding-left:1.25em;color:var(--ds-ink)}
.rk-grid__tip li em{font-style:normal;color:var(--ds-ink-soft)}

/* ---- board tables: his K11 table with column widths for our boards (his own
   modifier pattern, like .mc-table--loc). Desktop only: at <=767px his rule
   turns every row into a card and every cell full width, untouched here. ---- */
.rk-sub{display:block;margin-top:var(--ds-space-2xs);font-size:var(--ds-step-micro);line-height:1.5;color:var(--ds-ink-soft)}
@media (min-width:768px){
  .mc-table.rk-board th:nth-child(1),.mc-table.rk-board td:nth-child(1){width:37%}
  .mc-table.rk-board th:nth-child(n+2),.mc-table.rk-board td:nth-child(n+2){width:15.75%}
  .mc-table.rk-board--door th:nth-child(1),.mc-table.rk-board--door td:nth-child(1){width:19%}
  .mc-table.rk-board--door th:nth-child(n+2),.mc-table.rk-board--door td:nth-child(n+2){width:27%}
  .mc-table.rk-board thead th{white-space:normal}
}

/* ---- the map band's placeholder (until build:explorer is integrated) ------ */
.rk-mapph{
  width:min(100% - 48px,var(--ds-container-max));margin-inline:auto;
  min-height:clamp(260px,38vw,520px);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--ds-space-xs);
  padding:var(--ds-space-lg);
  background-color:var(--ds-bg-warm);background-image:var(--ds-grid);background-size:var(--ds-grid-size);
  border:1px solid var(--ds-line);border-radius:var(--ds-r-surface)}
.rk-mapph__title{margin:0;font-family:var(--ds-font-display);font-size:var(--ds-step-sub);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--ds-ink-heading)}
.rk-mapph__lead{margin:0;max-width:var(--ds-measure);font-size:var(--ds-step-body);line-height:1.6;color:var(--ds-ink-soft)}
.rk-mapph .mc-eyebrow{margin:0}

/* show-more (lib/site-blocks.mjs more()): a native <details>; the summary is his ghost button, the rows behind it
   stay in the HTML. Added after the owner's hands-on test, 2026-10-24 (the boards ran 10,102 px / 44,190 px). */
.rk-more{margin-top:var(--ds-space-md)}
.rk-more>summary{list-style:none;cursor:pointer;width:max-content;max-width:100%}
.rk-more>summary::-webkit-details-marker{display:none}
.rk-more[open]>summary{margin-bottom:var(--ds-space-md)}
.rk-more:not([open]) .rk-more__hide,.rk-more[open] .rk-more__show{display:none}

/* ============================================================================
   v2 (2026-10-24): the directory, trends, websites and agencies.
   ========================================================================== */

/* ---- a neutral tag beside a listing's name (the lead-gen flag) ----------- */
.rk-tag{display:inline-block;margin:var(--ds-space-2xs) 0 0 var(--ds-space-xs);padding:0 var(--ds-space-xs);
  border:1px solid var(--ds-line);border-radius:var(--ds-r-pill);
  font-family:var(--ds-font-body);font-size:var(--ds-step-micro);font-weight:400;line-height:1.6;letter-spacing:0;
  text-transform:none;color:var(--ds-ink-soft);vertical-align:middle;white-space:nowrap}
.mc-table .rk-tag{margin-left:var(--ds-space-xs)}

/* text for a screen reader only (a change's words beside its arrow) */
.rk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- a change with its arrow: the arrow carries the direction in his status
   tokens (green up, gold down: icon + sign + words, never colour alone; text
   contrast 8.8 / 8.6 : 1 on #1B1D22); the number stays in the text ink ------ */
.rk-move{white-space:nowrap;color:var(--ds-ink);font-variant-numeric:tabular-nums}
.rk-move__a{display:inline-block;margin-right:var(--ds-space-2xs);font-weight:700}
.rk-move--up .rk-move__a{color:var(--ds-success)}
.rk-move--down .rk-move__a{color:var(--ds-warning)}
.rk-move--flat .rk-move__a{color:var(--ds-ink-soft)}

/* ---- the round switch above the store grids (his .ad-choices pills) ------ */
.rk-rounds{margin:var(--ds-space-md) 0 0;padding:0;border:0;min-width:0}
.rk-rounds[hidden]{display:none}
.rk-rounds .ad-choices{margin-top:var(--ds-space-xs)}
.rk-rounds .ad-choice__label{min-height:44px;font-size:15px}
.rk-short{display:none}
@media (max-width:767px){
  .rk-rounds .ad-choices{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--ds-space-2xs);scrollbar-width:thin}
  .rk-rounds .ad-choice{flex:none}
  .rk-long{display:none}
  .rk-short{display:inline}
  /* a store or city link in a board or table is a finger target: at least 24 px tall (WCAG 2.2 target size, AA); the
     audit's UX-07 board part (verifier r2, 2026-10-25: all 170 on Hudson County were 18-39 px at 375 px) */
  .mc-table td a{display:inline-block;min-height:24px;padding-block:3px;line-height:18px}
}
.rk-grid__round{margin:0 0 var(--ds-space-xs);font-size:var(--ds-step-micro);line-height:1.5;color:var(--ds-ink)}

/* ---- trend charts (lib/site-chart.mjs; dataviz skill). Series = the
   explorer's validated categorical set in fixed slot order (README §4:
   validator, dark, on #15161A and #1B1D22, adjacent and all-pairs PASS, worst
   CVD dE 8.1, normal-vision 16.5, every slot >= 3:1), each slot also its own
   marker shape; raw values only where his tokens have no hue (slot 1 is his
   accent). 2px round lines, rings in the plate colour, hairline solid grid,
   text in his ink tokens. ---------------------------------------------- */
.rk-trend{
  --rk-s1:var(--ds-accent);--rk-s2:#c27503;--rk-s3:#0fa181;--rk-s4:#cf2845;--rk-s5:#0f92f7;
  margin:var(--ds-space-lg) 0 0;max-width:760px}
.rk-trend__cap{margin:0 0 var(--ds-space-sm)}
.rk-trend__title{margin:0;font-family:var(--ds-font-display);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-ink-heading)}
.rk-trend__legend{display:flex;flex-wrap:wrap;gap:var(--ds-space-xs) var(--ds-space-md);margin:var(--ds-space-xs) 0 0;padding:0;list-style:none}
.rk-trend__li{display:inline-flex;align-items:center;gap:var(--ds-space-xs);font-size:14px;line-height:1.4;color:var(--ds-ink-soft);max-width:100%}
.rk-trend__ln{overflow-wrap:anywhere}
.rk-trend__li b{color:var(--ds-ink);font-weight:700;font-variant-numeric:tabular-nums}
.rk-trend__plate{position:relative;display:flex;align-items:flex-start;
  padding:var(--ds-space-sm) var(--ds-space-md) var(--ds-space-xs) var(--ds-space-xs);
  background:var(--ds-bg-warm);border:1px solid var(--ds-line);border-radius:var(--ds-r-surface)}
.rk-trend__plate:focus-visible{outline:2px solid var(--ds-accent-ink);outline-offset:3px}
.rk-trend__axis{flex:none;overflow:visible}
.rk-trend__svg{flex:1 1 auto;min-width:0;overflow:visible}
.rk-trend__axis text,.rk-trend__x{font-family:var(--ds-font-body);font-size:12px;fill:var(--ds-ink-soft);font-variant-numeric:tabular-nums}
.rk-trend__grid{stroke:var(--ds-line);stroke-width:1}
.rk-trend__base{stroke:var(--ds-ink-soft);stroke-opacity:.45;stroke-width:1}
.rk-trend__cross{stroke:var(--ds-ink-soft);stroke-width:1}
.rk-trend__s line{stroke-width:2;stroke-linecap:round;fill:none}
.rk-trend__s use{stroke:var(--ds-bg-warm);stroke-width:2;paint-order:stroke}
.rk-s1 line,.rk-key.rk-s1 line{stroke:var(--rk-s1)} .rk-s1 use,.rk-key.rk-s1 :not(line){fill:var(--rk-s1)}
.rk-s2 line,.rk-key.rk-s2 line{stroke:var(--rk-s2)} .rk-s2 use,.rk-key.rk-s2 :not(line){fill:var(--rk-s2)}
.rk-s3 line,.rk-key.rk-s3 line{stroke:var(--rk-s3)} .rk-s3 use,.rk-key.rk-s3 :not(line){fill:var(--rk-s3)}
.rk-s4 line,.rk-key.rk-s4 line{stroke:var(--rk-s4)} .rk-s4 use,.rk-key.rk-s4 :not(line){fill:var(--rk-s4)}
.rk-s5 line,.rk-key.rk-s5 line{stroke:var(--rk-s5)} .rk-s5 use,.rk-key.rk-s5 :not(line){fill:var(--rk-s5)}
.rk-key{flex:none;overflow:visible}
.rk-key line{stroke-width:2;stroke-linecap:round}
.rk-trend__s.is-dim{opacity:.35}
/* direct end labels (4 or fewer series): the latest value in the text ink beside its line's end marker; the plate
   keeps room on the right so a label never runs past it */
.rk-trend__end{font-family:var(--ds-font-body);font-size:12px;font-weight:700;fill:var(--ds-ink);font-variant-numeric:tabular-nums}
.rk-trend__plate--ends{padding-right:52px}
@media (max-width:600px){ .rk-trend__x--mid{display:none} }
/* the hover / keyboard readout: values lead, names follow, line keys (rankings.js) */
.rk-trend__tip{position:absolute;left:0;top:0;z-index:var(--ds-z-raised);width:max-content;max-width:min(300px,calc(100% - 16px));
  padding:var(--ds-space-sm) var(--ds-space-md);background:var(--ds-bg-surface-2);border:1px solid var(--ds-line);border-radius:var(--ds-r-control);
  box-shadow:var(--ds-shadow-card);font-family:var(--ds-font-body);font-size:14px;line-height:1.45;color:var(--ds-ink-soft);pointer-events:none}
.rk-trend__tip[hidden]{display:none}
.rk-trend__tip strong{display:block;margin-bottom:var(--ds-space-2xs);font-family:var(--ds-font-display);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-accent-ink)}
.rk-trend__tip ul{margin:0;padding:0;list-style:none}
.rk-trend__tip li{display:flex;align-items:center;gap:var(--ds-space-xs);margin-top:2px}
.rk-trend__tip li b{color:var(--ds-ink-heading);font-weight:700;font-variant-numeric:tabular-nums;min-width:4.2em}

/* ---- wide tables of ours: the directory (4 columns) and the firms (7-8) --- */
@media (min-width:768px){
  .mc-table.rk-board--dir th:nth-child(1),.mc-table.rk-board--dir td:nth-child(1){width:30%}
  .mc-table.rk-board--dir th:nth-child(2),.mc-table.rk-board--dir td:nth-child(2){width:28%}
  .mc-table.rk-board--dir th:nth-child(3),.mc-table.rk-board--dir td:nth-child(3){width:24%;overflow-wrap:anywhere}
  .mc-table.rk-board--dir th:nth-child(4),.mc-table.rk-board--dir td:nth-child(4){width:18%}
  .mc-table.rk-board--agency{min-width:960px}
  .mc-table.rk-board--agency th:nth-child(1),.mc-table.rk-board--agency td:nth-child(1){width:19%}
  .mc-table.rk-board--agency th:nth-child(n+2),.mc-table.rk-board--agency td:nth-child(n+2){width:auto}
  .mc-table.rk-board--agency th:nth-last-child(-n+2),.mc-table.rk-board--agency td:nth-last-child(-n+2){width:17%}
}
/* the K13 rows of a store page carry links out (website, Google Maps): long addresses wrap inside the card */
.tc-rows__v a{overflow-wrap:anywhere}