/* ReplaRank's own pieces. Everything shared lives in admin.css and the family
   tokens; this file is only what a rank tracker needs and the others do not.
   Product-local names start rrank- (BRAND.md's naming table). */

/* ---- the switcher, top of the sidebar ---------------------------------- */
/* Says what you are looking at, and lets you change it. One website or all. */
.rrank-switch{ position:relative; margin:0 12px 14px; }
.rrank-switch summary, .rrank-switch-still{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:9px 11px; border-radius:var(--radius-sm); background:var(--navy-soft);
  color:#fff; min-width:0;
}
.rrank-switch-still{ cursor:default; }
.rrank-switch summary::-webkit-details-marker{ display:none; }
.rrank-switch summary:after{
  content:''; margin-left:auto; flex:none; width:7px; height:7px;
  border-right:2px solid var(--navy-text); border-bottom:2px solid var(--navy-text);
  transform:rotate(45deg) translate(-2px,-2px);
}
.rrank-switch[open] summary:after{ transform:rotate(225deg) translate(-2px,-2px); }
.rrank-switch-text{ display:flex; flex-direction:column; min-width:0; }
.rrank-switch-name{
  font-size:13.5px; font-weight:640; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rrank-switch-sub{
  font-size:11.5px; color:var(--navy-text); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rrank-switch-list{
  position:absolute; z-index:30; left:0; right:0; margin-top:4px; padding:5px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); max-height:60vh; overflow:auto;
}
.rrank-switch-brands{ position:static; margin-top:5px; box-shadow:none; }
.rrank-switch-label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); padding:6px 9px 4px;
}
.rrank-switch-list button{
  display:flex; flex-direction:column; width:100%; text-align:left; border:0;
  background:none; cursor:pointer; padding:7px 9px; border-radius:6px; font:inherit;
}
.rrank-switch-list button .rrank-switch-name{ color:var(--ink); }
.rrank-switch-list button .rrank-switch-sub{ color:var(--ink-soft); }
.rrank-switch-list button:hover{ background:var(--accent-tint); }
.rrank-switch-list button[aria-current="true"] .rrank-switch-name{ color:var(--accent); }
.rrank-switch-list button[aria-current="true"]{ background:var(--accent-tint); }
.rrank-switch-foot{ border-top:1px solid var(--line); margin-top:5px; padding:7px 9px 3px; }

/* What the page is scoped to, shown where the numbers are. */
.rrank-scope{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  padding:2px 9px; border-radius:999px; background:var(--accent-tint);
  color:var(--accent); border:1px solid var(--accent-line); white-space:nowrap;
}
.rrank-scope a{ color:inherit; text-decoration:underline; }

/* ---- position pills ---------------------------------------------------- */
/* The number itself never sits on a coloured fill unless that fill passes 4.5
   against white text. Top three is the only solid one; the rest are tinted. */
.rrank-pos{
  display:inline-flex; align-items:center; justify-content:center; min-width:34px;
  padding:2px 7px; border-radius:999px; font-variant-numeric:tabular-nums;
  font-weight:640; font-size:13px; border:1px solid transparent;
}
.rrank-pos-top3{ background:var(--green); color:#fff; }
.rrank-pos-top10{ background:var(--green-tint); color:var(--green); }
.rrank-pos-top30{ background:var(--amber-tint); color:var(--amber); }
.rrank-pos-deep{ background:var(--surface-2); color:var(--ink-soft); border-color:var(--line); }
.rrank-pos-none{ background:var(--red-tint); color:var(--red); }

/* ---- movement --------------------------------------------------------- */
.rrank-move{ font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rrank-move-up{ color:var(--green); }
.rrank-move-down{ color:var(--red); }
.rrank-move-flat{ color:var(--muted); }
.rrank-move-new{ color:var(--accent); }

/* ---- charts ----------------------------------------------------------- */
.rrank-chart{ display:block; width:100%; height:auto; }
.rrank-spark{ display:block; }
.rrank-chart-legend{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:12.5px; color:var(--ink-soft); }
.rrank-chart-legend span{ display:inline-flex; align-items:center; gap:6px; }
.rrank-swatch{ width:10px; height:10px; border-radius:3px; display:inline-block; }

/* ---- the keyword table ------------------------------------------------ */
.rrank-kw-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.rrank-kw-table th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; color:var(--ink-soft); background:var(--surface-2);
  padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.rrank-kw-table th a{ color:inherit; text-decoration:none; }
.rrank-kw-table th a:hover{ color:var(--accent); }
.rrank-kw-table td{ padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.rrank-kw-table tbody tr:hover{ background:var(--accent-tint); }
.rrank-kw-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.rrank-phrase{ font-weight:600; color:var(--ink); text-decoration:none; }
.rrank-phrase:hover{ color:var(--accent); text-decoration:underline; }
.rrank-url{ font-size:12px; color:var(--ink-soft); word-break:break-all; }
.rrank-tagrow{ display:flex; gap:4px; flex-wrap:wrap; margin-top:3px; }
.rrank-tag{
  font-size:11px; padding:1px 7px; border-radius:999px;
  background:var(--accent-tint); color:var(--accent); border:1px solid var(--accent-line);
}

/* ---- when a keyword was last looked at -------------------------------- */
.rrank-checked{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
/* Past its due time. Amber, not red: nothing is broken, it is just waiting. */
.rrank-checked.is-due{ color:var(--amber); font-weight:600; }
.rrank-checked.is-due:after{ content:' · due'; font-weight:400; }

/* ---- filter bar ------------------------------------------------------- */
/* A grid, not a wrapping flex row.
   With flex the search box took the leftover space and shoved the last control
   onto a line of its own, which read as a broken layout rather than a wrap.
   A grid keeps every control the same width and the labels on one line. */
.rrank-filters{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px; align-items:end; margin-bottom:14px;
  padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.rrank-filters label{ font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-soft); display:block; margin-bottom:5px; white-space:nowrap; }
.rrank-filters input, .rrank-filters select{
  padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  font:inherit; font-size:13.5px; background:var(--surface); color:var(--ink);
  width:100%; min-width:0;
}
/* The search box earns two columns; everything else gets one. */
.rrank-filters .grow{ grid-column:span 2; }
.rrank-filters .rrank-filters-go{ display:flex; align-items:flex-end; }
.rrank-filters .rrank-filters-go .btn{ width:100%; }

/* ---- "check everything that matches" ---------------------------------- */
.rrank-checkall{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 12px; margin-bottom:10px; font-size:13px;
  background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--radius);
}
.rrank-checkall .muted{ font-size:12.5px; }

/* ---- bulk action bar -------------------------------------------------- */
.rrank-bulk{
  display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:10px;
  background:var(--accent-tint); border:1px solid var(--accent-line); border-radius:var(--radius);
  font-size:13.5px;
}
.rrank-bulk[hidden]{ display:none; }

/* ---- the demo-data banner -------------------------------------------- */
/* Loud on purpose. Nobody should ever mistake invented numbers for real ones. */
.rrank-demo{
  display:flex; gap:10px; align-items:flex-start; padding:11px 14px; margin-bottom:16px;
  background:var(--amber-tint); border:1px solid var(--amber); border-left-width:4px;
  border-radius:var(--radius); font-size:13.5px; color:var(--ink);
}
.rrank-demo strong{ color:var(--amber); }

/* ---- SERP preview ---------------------------------------------------- */
.rrank-serp{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.rrank-serp-row{ display:flex; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); font-size:13px; }
.rrank-serp-row:last-child{ border-bottom:0; }
.rrank-serp-row.is-ours{ background:var(--accent-tint); }
.rrank-serp-row.is-rival{ background:var(--surface-2); }
.rrank-serp-n{ width:26px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right; flex:none; }
.rrank-serp-main{ min-width:0; }
.rrank-serp-title{ font-weight:600; }
.rrank-serp-url{ font-size:12px; color:var(--ink-soft); word-break:break-all; }
.rrank-who{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:1px 6px; border-radius:999px; align-self:center; flex:none; }
.rrank-who-ours{ background:var(--accent); color:#fff; }
.rrank-who-rival{ background:var(--surface); color:var(--ink-soft); border:1px solid var(--line-strong); }

/* ---- features --------------------------------------------------------- */
.rrank-features{ display:flex; gap:5px; flex-wrap:wrap; }
.rrank-feature{
  font-size:11px; padding:1px 7px; border-radius:999px; background:var(--surface-2);
  color:var(--ink-soft); border:1px solid var(--line);
}
.rrank-feature-won{ background:var(--green-tint); color:var(--green); border-color:transparent; }

/* ---- a site card on the dashboard ------------------------------------ */
.rrank-site-card{
  display:block; padding:16px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); text-decoration:none; color:inherit;
}
.rrank-site-card:hover{ border-color:var(--accent-line); }
.rrank-site-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.rrank-site-name{ font-weight:640; font-size:15.5px; color:var(--ink); }
.rrank-site-domain{ font-size:12.5px; color:var(--ink-soft); }
.rrank-site-nums{ display:flex; gap:18px; margin-top:12px; }
.rrank-site-num{ font-variant-numeric:tabular-nums; }
.rrank-site-num b{ display:block; font-size:20px; font-weight:640; line-height:1.2; }
.rrank-site-num span{ font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); font-weight:700; }

/* ---- a plain report, for printing or sharing ------------------------- */
.rrank-report{ max-width:900px; margin:0 auto; padding:32px 20px 64px; }
.rrank-report-head{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; border-bottom:2px solid var(--navy); padding-bottom:14px; margin-bottom:22px; }
@media print{
  .sidebar, .page-actions, .rrank-filters, .rrank-bulk{ display:none !important; }
  .main{ padding:0 !important; }
  body{ background:#fff; }
}

@media (max-width: 760px){
  .rrank-site-nums{ gap:12px; }
  .rrank-filters{ grid-template-columns:1fr; }
  .rrank-filters .grow{ grid-column:span 1; }
}