/* 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 brand switcher, top of the sidebar ---------------------------- */
.rrank-switch{ position:relative; margin:0 12px 14px; }
.rrank-switch summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:var(--radius-sm); background:var(--navy-soft);
  color:#fff; font-size:13.5px; font-weight:600;
}
.rrank-switch summary::-webkit-details-marker{ display:none; }
.rrank-switch summary:after{ content:'⌄'; margin-left:auto; color:var(--navy-text); font-size:15px; line-height:1; }
.rrank-switch[open] summary:after{ content:'⌃'; }
.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:320px; overflow:auto;
}
.rrank-switch-list button{
  display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  padding:7px 9px; border-radius:6px; font:inherit; font-size:13.5px; color:var(--ink);
}
.rrank-switch-list button:hover{ background:var(--accent-tint); }
.rrank-switch-list button[aria-current="true"]{ font-weight:640; color:var(--accent); }
.rrank-switch-foot{ border-top:1px solid var(--line); margin-top:5px; padding-top:5px; }

/* ---- 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);
}

/* ---- filter bar ------------------------------------------------------- */
.rrank-filters{
  display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:14px;
  padding:12px; 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:4px; }
.rrank-filters input, .rrank-filters select{
  padding:7px 9px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  font:inherit; font-size:13.5px; background:var(--surface); color:var(--ink); min-width:120px;
}
.rrank-filters .grow{ flex:1 1 220px; }

/* ---- 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{ flex-direction:column; align-items:stretch; }
}