/* ─────────────────────────────────────────────────────────────
   SERP Tracker — design system (sitechecker-style).
   All pages inherit it via render_header/footer + the classes below.
   Edit the tokens here to restyle the whole interface.
   ───────────────────────────────────────────────────────────── */
:root {
  /* palette */
  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --ink:       #111827;
  --ink-soft:  #4b5563;
  --muted:     #8a94a6;
  --line:      #e9ebf0;
  --line-soft: #f1f2f6;

  --brand:     #5b5bf0;   /* indigo accent */
  --brand-d:   #4848d4;
  --brand-50:  #eeeefe;
  --brand-100: #e0e0fc;

  --green:   #16a34a; --green-50: #ecfdf5;
  --amber:   #d97706; --amber-50: #fffbeb;
  --red:     #e5484d; --red-50:   #fef2f2;
  --sky:     #2563eb;

  /* shape */
  --r-sm: 7px; --r: 10px; --r-lg: 14px;
  --sh-sm: 0 1px 2px rgba(17,24,39,.05);
  --sh:    0 1px 3px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
  --sh-md: 0 4px 16px rgba(17,24,39,.08);
  --sidebar-w: 232px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--ink);
  font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); }

/* ── shell: sidebar + content ── */
.layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 18px 14px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand), #8b7bff);
  color: #fff; font-weight: 800; font-size: 16px;
  display: grid; place-items: center; box-shadow: var(--sh-sm);
}
.brand-txt { font-weight: 700; font-size: 15px; letter-spacing: .2px; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-sm);
  color: var(--ink-soft); text-decoration: none; font-weight: 500;
  transition: background .12s, color .12s;
}
.side-nav a .ico { width: 19px; height: 19px; flex: 0 0 auto; color: var(--muted); transition: color .12s; }
.side-nav a:hover { background: var(--line-soft); color: var(--ink); }
.side-nav a:hover .ico { color: var(--ink-soft); }
.side-nav a.active { background: var(--brand-50); color: var(--brand-d); font-weight: 600; }
.side-nav a.active .ico { color: var(--brand); }
/* signed-in user block, pinned to the bottom of the sidebar */
.navuser { margin-top: auto; border-top: 1px solid var(--line-soft); padding-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.navuser-id { display: flex; align-items: center; gap: 6px; min-width: 0; }
.navuser-n { font-weight: 600; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.navuser-r { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted); background: var(--line-soft); border-radius: 999px; padding: 1px 7px; }
.navuser-r.admin { color: var(--brand-d); background: var(--brand-50); }
.navuser-out { font-size: 12px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.navuser-out:hover { color: var(--red); text-decoration: underline; }
/* collapsed sidebar: hide the user text, keep just "out" affordance */
.nav-collapsed .navuser { justify-content: center; }
.nav-collapsed .navuser-id, .nav-collapsed .navuser-out span { display: none; }
/* sign-in screen */
.page-login { display: grid; place-items: center; min-height: 100vh; background: var(--bg); }
.login-wrap { width: 100%; max-width: 360px; padding: 24px; }
.login-card { display: flex; flex-direction: column; gap: 10px; }
.loginf { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
/* role-access checkbox grid (Users page) */
.rolegrid { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; }
.roleopt { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.roleopt input { width: 16px; height: 16px; flex: 0 0 auto; }

.main-col { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 60px; display: flex; align-items: center; padding: 0 28px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 9;
}
.page-title { margin: 0; font-size: 18px; font-weight: 700; }
/* breadcrumb parent segment in the topbar title (e.g. "Status" in "Status · URL") */
.page-title .crumb { color: var(--muted); text-decoration: none; }
.page-title .crumb:hover { color: var(--brand-d); text-decoration: underline; }
/* collapsible left nav — hamburger in the topbar hides the sidebar to free horizontal space */
.navtoggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  margin-right: 14px; flex: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-soft); font-size: 15px; line-height: 1; cursor: pointer; }
.navtoggle:hover { border-color: var(--brand); color: var(--brand-d); background: var(--brand-50); }
.nav-collapsed .layout { grid-template-columns: 1fr; }
.nav-collapsed .sidebar { display: none; }
main { padding: 24px 28px 40px; max-width: 1160px; width: 100%; }

/* ── cards ── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px; margin-bottom: 18px;
  box-shadow: var(--sh-sm);
}
h2 { margin: 0 0 16px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.muted { color: var(--muted); font-size: 13px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

.flash {
  background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-d);
  padding: 12px 16px; border-radius: var(--r); margin-bottom: 18px; font-weight: 500;
}

/* ── stat cards ── */
.grid-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.stat { padding: 18px 20px; }
.stat .num { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stat .lbl { color: var(--muted); font-size: 12.5px; margin-top: 6px; }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 9px 15px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--line-soft); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--sh-sm); }
.btn.primary:hover { background: var(--brand-d); border-color: var(--brand-d); }
.btn.small { padding: 6px 11px; font-size: 12px; }
.btn.danger { color: var(--red); border-color: #f3c9ca; }
.btn.danger:hover { background: var(--red-50); }
/* small external-link glyph (open a domain's live home page in a new tab) */
.extlnk { flex: 0 0 auto; font-size: 11px; text-decoration: none; opacity: .5; color: var(--ink); }
.extlnk:hover { opacity: 1; color: var(--brand); }
/* keyword priority star (Keywords page): gray = off, amber = priority */
.star-btn { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  padding: 2px 6px; color: var(--line); transition: color .12s, transform .12s; }
.star-btn:hover { color: var(--amber); transform: scale(1.2); }
.star-btn.on { color: var(--amber); }

/* ── forms ── */
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inline-form input[type=text], .inline-form input[type=url] { flex: 1; min-width: 220px; }
input[type=text], input[type=url], input[type=number], input[type=password] {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 14px; width: 100%; background: var(--surface);
  color: var(--ink); transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-50);
}
.form { display: flex; flex-direction: column; gap: 16px; max-width: 540px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.form label small { font-weight: 400; color: var(--muted); }
select {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 14px; width: 100%; background: var(--surface); color: var(--ink);
}
.form label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.form label.check input { width: auto; }
.card h2 code { font-size: 12px; font-weight: 400; color: var(--muted); }

/* ── tables ── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.detcell { white-space: pre-wrap; word-break: break-word; }
.detmore > summary { cursor: pointer; white-space: pre-wrap; word-break: break-word; list-style: none; }
.detmore > summary::-webkit-details-marker { display: none; }
.detmore:not([open]) > summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.detmore[open] > summary { color: var(--muted); }
.tbl thead th { font-size: 11.5px; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; font-weight: 600; }
.tbl tbody tr:hover { background: var(--line-soft); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tr.off td { opacity: .5; }
/* sub-section header row inside a .tbl (e.g. Targeting: "Page declares (HTML)" vs "Where it ranks") */
.tbl tr.tgrp > td { background: var(--line-soft); font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; }
.tbl tr.tgrp:hover > td { background: var(--line-soft); }
.actions { display: flex; gap: 8px; }
.actions form { margin: 0; }

.badge { color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; display: inline-block; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
        background: var(--line-soft); color: var(--ink-soft); }
.pill.brand { background: var(--brand-50); color: var(--brand-d); }
/* geo lens: a tie seen only in another geo (geo-0 home/general lane, or another market) folded into
   a geo-union Connections view — muted, informational ("home" / "geo N"). */
.pill.home0, .pill.geoelse { background: var(--line-soft); color: var(--muted); border: 1px dashed var(--line); font-weight: 600; }
.pill.up   { background: var(--green-50); color: var(--green); }
.pill.down { background: var(--red-50);   color: var(--red); }
.pill.warn { background: var(--amber-50); color: var(--amber); }
.err { color: var(--red); }

/* ── period-delta cells (Status L2: position / backlinks / change-events over
   1·3·7·14·30 days). Layout = headline "now" value + a fixed 5-column grid so
   the look-back windows line up under one shared label row and the eye scans
   straight down a column. Colour encodes direction; data only crosses the line. */
.dcell { min-width: 150px; }
.dcell .now { font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.1; white-space: nowrap; }
.dcell .now small { font-weight: 600; font-size: 11px; color: var(--muted); margin-left: 3px; }
.dcell .now.out { font-weight: 600; font-size: 13px; color: var(--muted); }
/* today's rank as a coloured pill (vs the most-recent prior ranked day) + trend arrow */
.dcell .now.nowpos { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 6px; font-size: 14px; }
.dcell .now.nowpos.up   { background: var(--green-50); color: var(--green); }
.dcell .now.nowpos.down { background: var(--red-50);   color: var(--red); }
.dcell .now.nowpos.flat { background: var(--line-soft); color: var(--ink); }
.dgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 8px; max-width: 200px; }
.dgrid .hd { font-size: 9px; font-weight: 700; letter-spacing: .2px; color: var(--muted);
             text-align: center; text-transform: uppercase; padding-bottom: 1px; }
.dgrid .v  { text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.5;
             border-radius: 5px; background: var(--line-soft); color: var(--muted); }
.dgrid .v.up   { background: var(--green-50); color: var(--green); }
.dgrid .v.down { background: var(--red-50);   color: var(--red); }
.dgrid .v.flat { background: var(--line-soft); color: var(--ink-soft); }
.dgrid .v.warn { background: var(--amber-50); color: var(--amber); }
.dgrid .v.none { background: var(--line-soft); color: var(--muted); opacity: .7; }

/* daily SERP-position breakdown: one cell per day (date + exact position) */
.dstrip { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
.dday { display: flex; flex-direction: column; align-items: center; min-width: 30px;
        padding: 3px 4px; border-radius: 6px; background: var(--line-soft); cursor: help; }
.dday .dd-d { font-size: 8.5px; font-weight: 700; color: var(--muted); letter-spacing: .2px; }
.dday .dd-p { font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--ink-soft); }
.dday.up   { background: var(--green-50); } .dday.up   .dd-p { color: var(--green); }
.dday.down { background: var(--red-50); }   .dday.down .dd-p { color: var(--red); }
.dday.flat { background: var(--line-soft); } .dday.flat .dd-p { color: var(--ink-soft); }
.dday.na   { background: transparent; opacity: .4; } .dday.na .dd-p { color: var(--muted); font-weight: 600; }
.dday.pre  { background: transparent; opacity: .2; } .dday.pre .dd-p { color: var(--muted); font-weight: 600; }
/* dropped from the SERP that day (scanned, this URL absent) — the "blink"/disappearance signal */
.dday.out  { background: var(--red-50); border: 1px dashed var(--red); }
.dday.out  .dd-p { color: var(--red); font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }

/* related-URL block: succession / cluster grouping on the URL detail page */
.relblk { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.relblk .relhdr { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.relblk .relurl { font-weight: 600; word-break: break-all; }
.relblk .tbl { margin-bottom: 0; }

/* sub-row beneath a keyword-history row carrying the daily + Δ views */
.tbl tr.sub > td { padding-top: 2px; border-top: 0; }
.subwrap { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.subblk { display: flex; flex-direction: column; gap: 2px; }

/* ── redirect/canonical/hreflang maneuver flags (Status L2) ──
   Chips sit under the URL; a forecast sub-row (.fcast) carries the plain-language
   "likely next move". A maneuvering row gets a tinted left edge so it stands out. */
.mvchips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.mvchips .pill { font-size: 11px; padding: 1px 7px; cursor: help; }
.tbl tr.hasmv > td { background: color-mix(in srgb, var(--amber-50) 35%, transparent); }
.tbl tr.hasmv > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.tbl tr.fcast > td { padding-top: 0; padding-bottom: 8px; border-top: 0; cursor: pointer; }
.fcline { display: flex; gap: 9px; align-items: baseline; font-size: 12.5px; line-height: 1.45;
          color: var(--ink-soft); background: var(--line-soft); border-left: 3px solid var(--muted);
          border-radius: 0 7px 7px 0; padding: 7px 11px; }
.fcline .pill { flex: none; text-transform: uppercase; letter-spacing: .3px; font-size: 10px; }
.fcline.warn  { background: var(--amber-50); border-left-color: var(--amber); }
.fcline.down  { background: var(--red-50);   border-left-color: var(--red); }
.fcline.brand { background: var(--brand-50); border-left-color: var(--brand); }
/* keyword-level maneuver banner */
.mvbanner { border-left: 3px solid var(--amber); }
.rdrcard { border-left: 3px solid var(--brand); background: color-mix(in srgb, var(--brand-50) 45%, transparent); }
/* SERP-day movement headline (the radar read) — merged into the header card */
.mvbar { border-top: 1px solid var(--line-soft); margin: 12px 0 11px; }
.mvhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.mvstat { white-space: nowrap; flex: 0 0 auto; }
/* display:inline + padding:0 NEUTRALISE the global .brand layout class (display:flex; padding) that a
   <b class="brand"> here would otherwise inherit — that made the "1 rotation" stat stack vertically. */
.mvstat b { display: inline; padding: 0; font-size: 17px; font-weight: 800; margin-right: 4px; }
.mvstat b.up { color: var(--green); } .mvstat b.down { color: var(--red); }
.mvstat b.warn { color: var(--amber); } .mvstat b.brand { color: var(--brand); }
.mvstat b.muted { color: var(--muted); }
.mvstat.market .pill { font-size: 12px; }
.mvverb { font-size: 12px; }
/* keyword-page header meta line — discrete nowrap segments (no mid-phrase wrap) */
.kwmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); margin-top: 5px; }
.kwmeta > span { white-space: nowrap; }
.kwmeta b { font-weight: 700; color: var(--ink); }
.kwmeta .kwhi { color: var(--brand-d); }
.kwmeta .kwsep { color: var(--line); }
.kwmeta .kwfetch { display: inline-flex; align-items: center; gap: 6px; }
.mvlink { text-decoration: none; color: inherit; border-bottom: 1px dashed transparent; }
.mvlink:hover { border-bottom-color: var(--line); }
.mvwin { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.mvwin .mvwinopt { text-decoration: none; color: var(--ink-soft); padding: 1px 7px; border-radius: 999px; background: #f1f3f6; font-weight: 600; }
.mvwin .mvwinopt:hover { background: var(--line); }
.mvwin .mvwinopt.on { background: var(--brand); color: #fff; }
/* muted (non-contestable) full-SERP rows, collapsed */
.mutedwrap > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); padding: 4px 0; user-select: none; }
.mutedwrap > summary:hover { color: var(--ink-soft); }
.mutedwrap[open] > summary { margin-bottom: 4px; }

/* resolved forwarding chain: clickable URL nodes joined by labelled method arrows */
.fchain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 4px 0 2px; padding: 9px 11px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 9px; }
.fnode { font-size: 12.5px; word-break: break-all; padding: 3px 9px; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
  text-decoration: none; transition: border-color .12s, background .12s; }
.fnode:hover { border-color: var(--brand); background: var(--brand-50); }
.fnode.cur { border-color: var(--brand); background: var(--brand-50); color: var(--brand-d); font-weight: 600; }
.fnode.final { border-color: var(--green); background: var(--green-50); color: var(--green); font-weight: 600; }
/* equity-leak final = cross-domain canonical podkleyka: red, not the healthy-resolve green */
.fnode.final.danger { border-color: var(--red); background: var(--red-50); color: var(--red); }
/* cross-domain bridge: amber final node (chain lands on a DIFFERENT registrable domain) with a CSS
   hover bubble naming it — replaces the old separate red "cross-domain bridge" chip. */
.fnode.final.bridge { border-color: var(--amber, #c70); background: var(--amber-50, #fff7e6);
  color: var(--amber-ink, #9a6b00); position: relative; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--amber, #c70); text-underline-offset: 2px; }
/* keep the amber palette on hover (override the base .fnode:hover brand-blue) + signal clickable */
.fnode.final.bridge:hover { border-color: var(--amber-ink, #9a6b00); background: var(--amber-50, #fff7e6); }
.fnode.final.bridge:hover .wtip { opacity: 1; visibility: visible; }
.fnode .ftag { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; opacity: .8; }
.fnode .ftag.danger { color: var(--red); opacity: 1; }
.fstep { display: inline-flex; align-items: center; gap: 8px; }
.farrow { display: inline-flex; align-items: center; gap: 5px; color: var(--muted);
  font-size: 12px; white-space: nowrap; }
/* "first observed on" stamp next to a connection (forwarding step / related URL) */
/* compact "first seen" = calendar glyph; the date shows in a CSS hover bubble (.fsd), NOT the native
   `title` tooltip (slow/unreliable on a stroke-only icon). The transparent full-box <rect fill> in the
   SVG makes the whole icon a hover target so :hover fires anywhere over it. */
.fsince { font-size: 10.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;
  cursor: help; position: relative; display: inline-block; padding: 0 2px; }
.fsince svg { width: 11px; height: 11px; vertical-align: -2px; display: inline-block; opacity: .8; }
.fsince .fsd { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--ink, #1c2230); color: #fff; padding: 3px 7px; border-radius: 5px; font-size: 10.5px;
  line-height: 1.3; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.18); opacity: 0;
  visibility: hidden; transition: opacity .1s; z-index: 20; pointer-events: none; }
.fsince:hover .fsd, .fsince:focus .fsd { opacity: 1; visibility: visible; }
/* onward redirect of a related URL, shown inline on its cluster row: the related
   URL is not the end of the line — it forwards on to a real destination, rendered
   on its own indented line so it reads as "…and then it goes here (final)". */
.rowonward { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 4px 0 0 6px; padding-left: 10px; border-left: 2px solid var(--line); }
.rostep { display: inline-flex; align-items: center; gap: 6px; }
.roarrow { color: var(--muted); font-size: 11px; }

/* ── Demo widget: competitor-network reader ──────────────────────────────── */
.pill.grey  { background: var(--line-soft); color: var(--ink-soft); }
.pill.amber { background: var(--amber-50); color: var(--amber); }

/* dots = relation severity colour */
.rddot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ink-soft); vertical-align: middle; }
.rddot.brand { background: var(--brand); }
.rddot.grey  { background: var(--muted); }
.rddot.amber { background: var(--amber); }

/* Read tab */
.demoread { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.demoread li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px; font-size: 13.5px; line-height: 1.45; }
.demoread li .rddot { margin-top: 5px; }
.demoread li.rd-brand { background: var(--brand-50); border-color: var(--brand-100); }
.demoread li.rd-amber { background: var(--amber-50); border-color: #fde9c8; }
.demolegend { margin: 12px 0 0; font-size: 12px; }

/* Map tab — equity-flow zones */
.demoflow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 16px; }
/* arrow + the zone it points INTO travel together on wrap (no dangling ⟶ into empty space) */
.flowstep { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.flowstep .flowarr { align-self: center; }
.flowzone { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0;
  display: flex; flex-direction: column; gap: 6px; }
.flowzone.self { background: var(--brand-50); border-color: var(--brand-100); }
.flowcap { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.flownode { font-size: 12.5px; word-break: break-all; padding: 3px 9px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; display: block; }
a.flownode:hover { border-color: var(--brand); background: var(--brand-50); }
.flownode.cur { border-color: var(--brand); background: #fff; color: var(--brand-d); font-weight: 600; }
.flowarr { align-self: center; color: var(--muted); font-size: 18px; }
.selfmeta { display: flex; flex-wrap: wrap; gap: 4px; }
.selfmeta .pill { font-size: 11px; }

/* Map tab — domain groups */
.demodoms { display: flex; flex-direction: column; gap: 8px; }
.domgrp { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
/* риск-иерархия: кросс-доменная карточка (hreflang/canonical-зеркало на ЧУЖОМ
   регистрируемом домене = член сети оператора) — явная янтарная боковая полоса, чтобы
   глаз цеплялся. Same-domain (локаль того же домена) — без полосы, тихо. */
.domgrp.cross { border-color: #fde9c8; background: var(--amber-50); border-left: 3px solid var(--amber, #c70); }
.domgrp > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; font-weight: 600; }
.domgrp > summary::-webkit-details-marker { display: none; }
.domgrp > summary::before { content: '▸'; color: var(--muted); font-size: 11px; }
.domgrp[open] > summary::before { content: '▾'; }
.domgrp .domname { font-weight: 700; word-break: break-all; }
.domgrp .domtot { font-size: 10.5px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; }
.demlegend { font-size: 11.5px; margin: 0 0 8px; line-height: 1.5; }
.domurls { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; padding-left: 4px; }
.domurl { border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 8px; background: var(--surface); }
.connflow { flex-basis: 100%; margin: 6px 0 2px; display: flex; flex-direction: column; gap: 4px;
  padding: 7px 9px; border-left: 2px solid var(--line); background: var(--bg); border-radius: 4px; }
.cstep { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11.5px; line-height: 1.4; }
.cnode { font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 7px; overflow-wrap: anywhere; max-width: 100%; }
.cnode.cur { color: var(--ink); border-color: var(--brand); background: var(--brand-soft, var(--surface)); }
/* final node of a funnel: green marker replaces the old "final" word (parity with .fnode.final) */
.cnode.fin { border-color: var(--green); background: var(--green-50); color: var(--green); }
/* compact-row direction anchor: "this page →" originating a single tie. Muted + dashed so it
   reads as the SUBJECT of the connection, never confused with the solid brand .cur "this page"
   chip (which means "this row IS the page you're viewing"). */
.cnode.src { color: var(--muted); border-style: dashed; background: var(--bg); font-weight: 600; }
.durlhd .carrow { margin: 0 1px 0 -1px; }
/* anchor arrow (the direction glyph right after «this page»: → out · ← in · ⇄ loop · ↔ sibling ·
   ↻ self) sits in a fixed centered column so the arrows line up vertically row-to-row. The
   per-direction prefix arrows inside a loop keep the plain .carrow flow width. */
.durlhd .canchor { display: inline-block; min-width: 17px; text-align: center; position: relative; }
/* non-reciprocal (1-way) hreflang: amber arrow + a small ⚠ badge OVERLAID on it (position:absolute →
   no layout shift, so the first-pill column stays aligned). The tooltip carries the full explanation. */
.carrow.warn { color: var(--amber-ink, #c70); font-weight: 700; cursor: help; position: relative; }
.carrow.canchor.warn::after { content: "⚠"; position: absolute; top: -7px; right: -6px; font-size: 9px;
  line-height: 1; color: var(--amber, #c70); }
/* same amber ⚠ overlay on the ⇄ between-marker for an ASYMMETRIC reciprocal loop (different method
   each way) — the loop arrow IS the asymmetry, so it's flagged in place instead of a separate chip. */
.carrow.loopwarn { position: relative; }
.carrow.loopwarn::after { content: "⚠"; position: absolute; top: -7px; right: -4px; font-size: 9px;
  line-height: 1; color: var(--amber, #c70); }
/* RED ⚠ overlay on the ⇄ for a cross-domain canonical EQUITY loop ($lm_danger) — the loop arrow
   carries the danger inline; the red "equity loop" chip still names the money-site target. */
.carrow.loopdanger { color: var(--red, #c00); font-weight: 700; cursor: help; position: relative; }
.carrow.loopdanger::after { content: "⚠"; position: absolute; top: -7px; right: -4px; font-size: 9px;
  line-height: 1; color: var(--red, #c00); }
/* instant CSS bubble for the warned-arrow tooltips: native `title` is unreliable here, AND the ⚠
   ::after sits ABOVE the glyph, so hovering the warning symbol resolved no title. The bubble shows on
   hover of the whole warned arrow (glyph + ⚠) — no native-tooltip dependency. */
.wtip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--ink, #1c2230); color: #fff; padding: 6px 9px; border-radius: 6px; font-size: 11px;
  font-weight: 400; line-height: 1.4; white-space: normal; width: max-content; max-width: 300px;
  text-align: left; box-shadow: 0 3px 12px rgba(0,0,0,.25); opacity: 0; visibility: hidden;
  transition: opacity .1s; z-index: 40; pointer-events: none; }
.carrow.warn:hover .wtip, .carrow.loopdanger:hover .wtip, .kwcount.dropped:hover .wtip, .kwcount.partial:hover .wtip { opacity: 1; visibility: visible; }
/* redirect pill → hover bubble with the full hop-by-hop chain (URL —code→ URL …). Monospace +
   pre-wrap so the newlines render and long URLs wrap; left-anchored under the pill. */
.pill.rcwrap { position: relative; cursor: help; }
.rctip { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  background: var(--ink, #1c2230); color: #fff; padding: 8px 10px; border-radius: 7px;
  font-size: 11px; font-weight: 400; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.55; white-space: pre-wrap; word-break: break-all; text-align: left;
  min-width: 240px; max-width: 480px; width: max-content; box-shadow: 0 4px 16px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; transition: opacity .1s; pointer-events: none; }
.pill.rcwrap:hover .rctip { opacity: 1; visibility: visible; }
/* the KW count sits at the row's right edge → right-anchor its bubble so it can't overflow rightward */
.kwcount.dropped .wtip, .kwcount.partial .wtip { left: auto; right: 0; transform: none; }
/* тип связи (hreflang/canonical) во флоу — чип, как .pill в компактном виде, чтобы
   одна сущность выглядела одинаково. Заливка-чип (без рамки) ↔ узлы .cnode с рамкой. */
.cvia { font-size: 10.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--line-soft); padding: 1px 8px; border-radius: 999px; }
.carrow { color: var(--muted); font-size: 11px; }
.cmuted { font-size: 10.5px; font-style: italic; color: var(--muted); }
.cmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 1px; }
.looptag { font-size: 10.5px; font-weight: 700; color: var(--amber-ink, #9a6b00); background: var(--amber-soft, #fff5e0);
  border: 1px solid var(--amber-line, #f0d9a0); border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
/* malign loop = cross-domain canonical equity consolidation; hot red, above the calm locale loop */
.looptag.danger { color: var(--red); background: var(--red-50); border-color: #f3c9ca; }
/* reciprocal loops: the normal case shows NO tag (the ⇄ anchor already says "reciprocal"); only the
   warnings render — base/.warn (amber, ASYMMETRIC — different method each way) and .danger (red,
   cross-domain equity). */
.connsince { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.simul { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 5px;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--bg);
  position: relative; vertical-align: middle; }
.simul::before { content: "at once"; position: absolute; top: -7px; left: 7px; font-size: 8.5px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  background: var(--surface); padding: 0 3px; border-radius: 3px; }
.simjoin { font-size: 11px; font-weight: 700; color: var(--muted); }
.domurl > summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 7px; flex-wrap: wrap; font-size: 12.5px; }
.domurl > summary::-webkit-details-marker { display: none; }
.domurl > summary::before { content: '▸'; color: var(--muted); font-size: 10px; align-self: center; }
.domurl[open] > summary::before { content: '▾'; }
.domurl > summary a { word-break: break-all; }
.domurl > summary .kwcount { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ink-soft);
  background: var(--line-soft); border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
/* dropped from SERP: red KW count + hover bubble (replaces the old "dropped from SERP Nd ago" pill) */
.domurl > summary .kwcount.dropped { color: var(--red); background: var(--red-50, #fdeaea);
  position: relative; cursor: help; }
/* partial drop: ranked for N keywords, some no longer rank → amber badge + red "M↓" gone-count */
.domurl > summary .kwcount.partial { color: var(--amber); background: var(--amber-50);
  position: relative; cursor: help; }
.domurl > summary .kwcount .kwgone { color: var(--red); font-weight: 800; }
.domurl .tbl { margin: 6px 0 2px; }

/* Changes — de-noised connection history (shown only when informative) */
.demochanges { margin-top: 12px; }

/* Timeline */
.demotime { list-style: none; margin: 0; padding: 0; }
.tlday { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.tldate { flex: 0 0 110px; font-weight: 700; font-size: 12.5px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
.tlitems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tlitems li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.4; }
.tlitems li .rddot { align-self: center; }
/* de-noised timeline group: count summary that EXPANDS to the specific doorway URLs/paths */
.tlgrp { min-width: 0; }
.tlgrp > summary { cursor: pointer; list-style: none; }
.tlgrp > summary::-webkit-details-marker { display: none; }
.tlgrp > summary::before { content: '▸'; color: var(--muted); font-size: 10px; margin-right: 4px; }
.tlgrp[open] > summary::before { content: '▾'; }
.tlsub { list-style: none; margin: 4px 0 2px; padding-left: 16px; display: flex; flex-direction: column; gap: 2px; }
.tlsub li { font-size: 12px; display: block; }
.tlsub a { word-break: break-all; }

/* ── Demo v2 — always-visible Verdict + Structure ─────────────────────────── */
/* Verdict panel: role / topology / one-line read, tinted by risk band */
.demoverdict { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px;
  padding: 12px 14px; margin: 2px 0 14px; background: var(--surface); }
.demoverdict.risk-high  { border-left-color: var(--red);   background: var(--red-50); }
.demoverdict.risk-watch { border-left-color: var(--amber); background: var(--amber-50); }
.demoverdict.risk-low   { border-left-color: var(--brand); background: var(--brand-50); }
.vhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.vrole { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px; background: var(--line-soft); color: var(--ink); white-space: nowrap; }
.vrole.sm { font-size: 9.5px; padding: 1px 6px; }
.vrole.brand { background: var(--brand); color: #fff; }
.vrole.amber { background: var(--amber); color: #fff; }
.vrole.grey  { background: var(--muted); color: #fff; }
.vtopo { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-soft);
  background: var(--surface); cursor: help; }
.vsent { font-size: 14px; font-weight: 600; color: var(--ink); flex: 1 1 240px; min-width: 0; }
.vrisk { display: flex; gap: 8px; align-items: baseline; margin-top: 9px;
  font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.vrisk .rddot { align-self: center; }
.demoverdict .demoread { margin-top: 11px; }
/* geo / language targeting line */
.vgeo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); font-size: 12.5px; }
.vgeo .vgeok { font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); }
.vgeo .vgeourl { font-size: 12px; font-weight: 600; color: var(--ink-soft); word-break: break-all;
  flex-basis: 100%; }
.vgeoseg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.vgeoseg .vgeolbl { font-size: 10.5px; font-weight: 600; color: var(--muted); }

/* Structure strip: equity-flow lanes + cluster-by-domain */
.structwrap { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; }
.structcap { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
  color: var(--ink-soft); margin-bottom: 10px; }
.structcap .muted { font-weight: 500; text-transform: none; letter-spacing: 0; }
/* each inbound doorway = a small sub-card: node + last-hop method on one line,
   its upstream feeders (who else points at this hub) clearly nested below */
.flowedge { display: flex; flex-direction: column; gap: 5px; padding: 7px 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.edgehead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.edgehead .flownode { display: inline-block; }
.emeth { font-size: 11px; }
.emeth .farrow { font-size: 11px; }
.zonenote { font-size: 11px; color: var(--muted); }
/* hreflang funnel: language alternates resolved to their final master */
.demofunnel { margin-top: 14px; }
.capnote { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.demofunnel .fchain { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px;
  margin-top: 7px; background: var(--surface); }
.demofunnel .fchain.bridge { border-color: var(--amber); background: var(--amber-50); }
/* САМЫЙ горячий сигнал: цепочка уводит на ЕЩЁ один регистрируемый домен (дорвей →
   money-сайт, утечка ссылочного веса). Красный — выше янтаря (член сети) и петли. */
.bridgetag { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 6px; background: var(--red, #d22); color: #fff; white-space: nowrap; cursor: help; }
/* upstream feeders of an inbound hub (who else points at this doorway) */
.feeders { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.feedlbl { font-size: 10px; color: var(--muted); font-weight: 600; }
.feednode { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; text-decoration: none;
  padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); word-break: break-all; }
.feednode:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand-d); }
.feedwrap { display: inline-flex; align-items: baseline; gap: 5px; }
.fmeta { font-size: 10px; color: var(--muted); white-space: nowrap; }

/* tiny HTTP-status dot shown next to a URL (hover for the full status) */
.sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
        background: var(--muted); vertical-align: middle; margin-right: 5px; cursor: help; }
.sdot.ok  { background: var(--green); }
.sdot.bad { background: var(--red); }
.sdot.na  { background: var(--line); border: 1px solid var(--muted); box-sizing: border-box; }

/* whole row is a link into the URL's data tab */
.tbl tr.clk { cursor: pointer; }
.tbl tr.clk:hover { background: var(--brand-50); }

/* ── ratio donut (conic ring + caption) — Status "Pages parsed", coverage, … ──
   Component lives here; pages pass only data: the class (full/mid/low) for the
   colour band and the numeric --pct for the arc. No per-page styling. */
.ratio { display: inline-flex; align-items: center; gap: 9px; }
.ratio .cap { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.ratio .cap small { font-weight: 500; color: var(--muted); }
.ring {
  --pct: 0; --ring-c: var(--brand);
  width: 34px; height: 34px; flex: 0 0 auto; position: relative;
  border-radius: 50%; display: inline-grid; place-items: center;
  background: conic-gradient(var(--ring-c) calc(var(--pct) * 3.6deg), var(--line) 0);
}
.ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface); }
.ring > b { position: relative; font-size: 10px; font-weight: 700; line-height: 1; color: var(--ink); }
.ring.full { --ring-c: var(--green); }
.ring.mid  { --ring-c: var(--amber); }
.ring.low  { --ring-c: var(--red); }

/* ── bars (volatility) ── */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 10px; }
.bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar { width: 64%; background: var(--brand); border-radius: 5px 5px 0 0; min-height: 2px; transition: background .12s; }
.bar.alert { background: var(--red); }
.bar-lbl { font-size: 11px; color: var(--muted); margin-top: 7px; }

/* ── two-column layout (reports/trends) ── */
.two-col { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list a { display: block; padding: 8px 11px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink-soft); font-weight: 500; }
.sidebar-list a:hover { background: var(--line-soft); color: var(--ink); }
.sidebar-list a.active { background: var(--brand-50); color: var(--brand-d); font-weight: 600; }

/* ── three distribution columns (trends) ── */
.three-dist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 16px; }
.three-dist h3 { margin-bottom: 6px; }
.three-dist .tbl td { padding: 7px 8px; }

/* ── report (markdown) ── */
.report { font-size: 14px; color: var(--ink-soft); }
.report h2 { font-size: 18px; margin-top: 24px; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.report h3 { font-size: 15px; margin-top: 18px; color: var(--ink); }
.report blockquote { margin: 6px 0; padding: 8px 14px; border-left: 3px solid var(--brand-100); color: var(--muted); background: var(--brand-50); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.report ul { margin: 6px 0; padding-left: 20px; }
.report br { line-height: .4; }

.log {
  background: #0e1116; color: #d1d5db; padding: 16px; border-radius: var(--r);
  font-size: 12.5px; overflow-x: auto; white-space: pre-wrap; max-height: 520px; overflow-y: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
code { background: var(--line-soft); padding: 1.5px 6px; border-radius: 5px; font-size: 12.5px;
       font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ── responsive ── */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 6px; overflow-x: auto; padding: 10px 14px;
  }
  .brand { padding: 0 8px 0 0; }
  .brand-txt { display: none; }
  .side-nav { flex-direction: row; }
  .side-nav a span { display: none; }
  .side-nav a { padding: 9px 11px; }
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .three-dist { grid-template-columns: 1fr; }
  main { padding: 18px; }
}

/* ── inline help "?" chip with native-title tooltip ── */
.info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; vertical-align: middle;
  border-radius: 50%; background: var(--brand-50); color: var(--brand-d);
  font-size: 10.5px; font-weight: 700; line-height: 1; cursor: help;
  border: 1px solid var(--brand-100); user-select: none;
}
.info:hover, .info:focus { background: var(--brand-100); outline: none; }
th .info { font-weight: 700; }

/* ── git-style line diff (Status · URL: HTML / headers history) ── */
.diff {
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: auto; max-height: 80vh; background: #fff;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.55;
}
.diff table { border-collapse: collapse; width: 100%; }
.diff td { padding: 0 8px; vertical-align: top; white-space: pre-wrap; word-break: break-word; }
.diff td.ln {
  width: 1%; text-align: right; white-space: nowrap; user-select: none;
  color: var(--muted); background: #fafbfc; border-right: 1px solid var(--line);
  padding: 0 8px; font-size: 11px;
}
.diff tr.add td { background: var(--green-50); }
.diff tr.add td.sign, .diff tr.add td.body { color: #11823b; }
.diff tr.del td { background: var(--red-50); }
.diff tr.del td.sign, .diff tr.del td.body { color: #c0353a; }
/* intra-line (word/char-level) highlight — the actual changed tokens within a changed line */
.diff .dchg { background: #f7a8ad; border-radius: 2px; box-shadow: 0 0 0 1px #f7a8ad; }
.diff .achg { background: #91e3b4; border-radius: 2px; box-shadow: 0 0 0 1px #91e3b4; }
/* collapsed "unchanged version in full" under a no-change section */
.difffull > summary { cursor: pointer; font-size: 12px; color: var(--muted); list-style: none; user-select: none; margin-top: 2px; }
.difffull > summary::-webkit-details-marker { display: none; }
.difffull > summary::before { content: '▸ '; }
.difffull[open] > summary::before { content: '▾ '; }
.difffull > summary:hover { color: var(--ink-soft); }
/* side-by-side (split) version diff modal */
.vdiffpanel { max-width: 1400px; width: 96vw; }
.vdiffhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vdiffctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: 8px; }
.vdifflbl { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.vdifflbl select { margin-left: 4px; }
.vdifflbl .d { color: #c0353a; font-weight: 800; } .vdifflbl .a { color: #11823b; font-weight: 800; }
.vdiffwhat { display: inline-flex; gap: 4px; }
.vdiffw.on { background: var(--brand-50, #eef2ff); border-color: var(--brand, #6366f1); color: var(--brand-d, #4338ca); }
.diffsx { overflow: auto; }
.diffsx table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.diffsx td.ln { width: 48px; min-width: 48px; text-align: right; padding: 0 8px; color: var(--muted); user-select: none; background: #fafbfc; border-right: 1px solid var(--line-soft); vertical-align: top; }
.diffsx td.sx { padding: 0 8px; white-space: pre-wrap; word-break: break-all; vertical-align: top; }
.diffsx td.sx.del { background: var(--red-50); color: #c0353a; }
.diffsx td.sx.add { background: var(--green-50); color: #11823b; }
.diffsx td.sx.empty { background: #fbfbfc; }
.diffsx .dchg { background: #f7a8ad; border-radius: 2px; }
.diffsx .achg { background: #91e3b4; border-radius: 2px; }
.diff tr.skip td { background: #f6f7f9; color: var(--muted); text-align: center; font-style: italic; }
.diff td.sign { width: 1%; text-align: center; user-select: none; padding: 0 4px; }
.diff-legend { font-size: 12px; color: var(--muted); }
.diff-legend .a { color: #11823b; } .diff-legend .d { color: #c0353a; }
.diff-none { color: var(--muted); font-size: 13px; padding: 6px 2px; }

/* ── Status L3 (URL) rebuild: hero health chips, sticky section nav,
      collapsible technical groups ───────────────────────────────────── */
.l3hero h2 { word-break: break-all; }
/* hero DOMAIN band: domain-level identity facts on the left, per-URL actions pushed right as a
   distinct group (a thin divider sets them apart so they don't read as more facts). */
.herometa { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 7px 0 0;
  font-size: 13px; color: var(--ink-soft); }
.herometa b { font-weight: 700; color: var(--ink); }
.hmlbl { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: var(--line-soft); border-radius: 5px; padding: 2px 7px; }
.hmsep { color: var(--line); }
/* "Open ↗" inline after the URL headline, and "Home ↗" next to the domain — quiet action links */
.hurlopen { font-size: 13px; font-weight: 600; margin-left: 8px; vertical-align: middle; white-space: nowrap; }
.hmhome { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* clickable "URL N" header label → opens the domain URL inventory popup */
.hmurls { font-size: 11px; font-weight: 700; color: var(--brand-d); background: var(--brand-50);
  border: 1px solid transparent; border-radius: 999px; padding: 1px 9px; cursor: pointer;
  white-space: nowrap; font-family: inherit; }
.hmurls:hover { background: var(--brand-100, var(--brand-50)); text-decoration: underline; }
/* ⚙ actions menu (native <details> dropdown) sitting with the Country/Date view controls */
.gearmenu { position: relative; }
.gearmenu > summary { list-style: none; cursor: pointer; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); font-size: 17px; }
.gearmenu > summary::-webkit-details-marker { display: none; }
.gearmenu > summary:hover { background: var(--line-soft); }
.gearmenu[open] > summary { border-color: var(--brand); color: var(--ink); }
.gearmenu-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 6px; min-width: 190px; }
.gearitem { display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 9px 11px; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--ink); white-space: nowrap; }
.gearitem:hover { background: var(--line-soft); color: var(--brand-d); }
/* PAGE band: same scope-label chip as the domain band, tinted to read as the page snapshot scope;
   .hchip-spacer pushes the ⚠ problem chips to the right edge ("facts … | problems"). */
.hchip-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: var(--line-soft); border-radius: 5px; padding: 4px 7px;
  align-self: center; }
.hchip-spacer { margin-left: auto; }
.hchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
/* On-page keyword-placement accordion: one expandable <details> per tracked keyword (geo-independent
   audit). Summary = keyword + market scope + optional "as of" + placement score + ▸ marker. */
.kwacc { border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; overflow: hidden; }
.kwacc > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  flex-wrap: wrap; gap: 9px; padding: 11px 14px; }
.kwacc > summary::-webkit-details-marker { display: none; }
.kwacc-kw { font-size: 14px; }
.kwacc-score { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.kwacc[open] > summary { border-bottom: 1px solid var(--line-soft); }
.kwacc .kwacc-body { padding: 4px 14px 14px; }
.kwacc .sideacc-mark::before { content: '▸'; color: var(--muted); font-size: 12px; }
.kwacc[open] .sideacc-mark::before { content: '▾'; }
.hchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); }
.hchip .k { color: var(--muted); font-weight: 600; }
.hchip.ok    { background: var(--green-50); border-color: transparent; color: var(--green); }
.hchip.warn  { background: var(--amber-50); border-color: transparent; color: var(--amber); }
.hchip.bad   { background: var(--red-50);   border-color: transparent; color: var(--red); }
.hchip.brand { background: var(--brand-50);  border-color: transparent; color: var(--brand-d); }

.secnav { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px;
  padding: 9px 11px; margin-bottom: 18px;
  background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-sm); }
.secnav a { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  padding: 4px 11px; border-radius: 999px; }
.secnav a:hover { background: var(--line-soft); color: var(--ink); }
.secnav a.active { background: var(--brand-50); color: var(--brand-d); }
.secnav-lbl { font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 4px 10px 4px 2px; white-space: nowrap; }
.secnav a .tn { display: inline-flex; min-width: 18px; justify-content: center; margin-left: 6px;
  padding: 0 6px; border-radius: 999px; background: var(--brand-50); color: var(--brand-d);
  font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.secnav a:hover .tn { background: var(--brand-100); }
.secnav a.active .tn { background: var(--brand); color: #fff; }
.secjump { scroll-margin-top: 108px; }

/* Full-ranking muted rows: dimmed but kept in their real position; checkbox hides them */
.muted-row { opacity: .5; }
#sec-full:has(.mutetoggle:not(:checked)) .muted-row { display: none; }
.mutechk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; user-select: none; }
.mutechk input { cursor: pointer; margin: 0; }

/* New / Dropped widgets: collapse to first 3 URLs, "Show all" reveals the rest (pure-CSS :has) */
.moretoggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
tr.xrow { display: none; }
.card:has(.moretoggle:checked) tr.xrow { display: table-row; }
.morebtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; cursor: pointer;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--brand-d); font-size: 12.5px; font-weight: 600; user-select: none; }
.morebtn:hover { border-color: var(--brand); background: var(--brand-50); }
.morebtn .lbl-less { display: none; }
.card:has(.moretoggle:checked) .morebtn .lbl-more { display: none; }
.card:has(.moretoggle:checked) .morebtn .lbl-less { display: inline; }

/* v2 Changes facet filter bar (Cluster / URL tabs): URL · type · exact-event selects with counts */
.ce2filter { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  padding: 8px 2px 9px; margin-bottom: 4px; background: var(--surface); border-bottom: 1px solid var(--line); }
.ce2filter .ce2f { max-width: 230px; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg, #fff); color: var(--ink); font-size: 12px; cursor: pointer; }
.ce2filter .ce2f:hover { border-color: var(--brand); }
.ce2filter .ce2clear { padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--brand-d); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.ce2filter .ce2clear:hover { border-color: var(--brand); background: var(--brand-50); }
/* ⤓ export (CSV/JSON) — right edge of the facet bar; downloads the FULL filtered set (no DOM cap) */
.ce2filter .ce2exp { margin-left: auto; display: inline-flex; gap: 5px; }
.ce2filter .ce2expbtn { padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--brand-d); font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ce2filter .ce2expbtn:hover { border-color: var(--brand); background: var(--brand-50); }

.l3sec { scroll-margin-top: 60px; }
.sec-h { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; }
.sec-h h2 { margin: 0; }
.sec-h .sec-n { color: var(--muted); font-weight: 700; font-size: 13px; }

details.tgroup { border: 1px solid var(--line); border-radius: var(--r); margin: 8px 0; overflow: hidden; }
details.tgroup > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; font-weight: 700; font-size: 13.5px; user-select: none; }
details.tgroup > summary::-webkit-details-marker { display: none; }
details.tgroup > summary::before { content: '▸'; color: var(--muted); font-size: 11px; transition: transform .15s; }
details.tgroup[open] > summary::before { transform: rotate(90deg); }
details.tgroup > summary:hover { background: var(--line-soft); }
details.tgroup > summary .sg-meta { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
details.tgroup[open] > summary { border-bottom: 1px solid var(--line-soft); }
details.tgroup .tgbody { padding: 2px 14px 8px; }
details.tgroup .tgbody .tbl { margin-bottom: 0; }

/* ── domain browser (domain_browser.php) ──
   Sticky toolbar over a collapsible group → domains accordion. All filtering,
   sorting and search happen client-side, so the volume (thousands of domains)
   stays responsive. Crawl-freshness is encoded with three badge colours. */
.dbar { position: sticky; top: 60px; z-index: 5; display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; padding: 13px 18px; background: var(--surface);
  border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
/* ── STICKY-HEADER LAYOUT (Domain Browser only): the page fills the viewport and does NOT scroll —
   the toolbar card (#dbcard) is a flex column that fills the space under the topbar, and #droot is
   the ONE scroll container. So the sticky thead (top:0) + frozen Domain column (left:0) stick
   relative to #droot while only the rows scroll. This avoids the "sticky thead inside an overflow-x
   wrapper pins to the wrapper, not the viewport" trap AND the "two sticky top:0 collide" trap —
   nothing here is page-sticky, the whole chrome is just fixed by the flex layout.
   🔒 Scoped to `body.page-domain_browser:has(#dbcard)` — page=domain_browser is ALSO the L2 dossier
   (?domain=, no #dbcard) which must keep normal document scroll, and the embed popup (body.embed).
   :has(#dbcard) hits ONLY the L1 list. Old browsers w/o :has fall back to normal scroll. */
body.page-domain_browser:has(#dbcard) { height: 100vh; overflow: hidden; }
body.page-domain_browser:has(#dbcard) .layout,
body.page-domain_browser:has(#dbcard) .main-col { height: 100vh; min-height: 0; }
body.page-domain_browser:has(#dbcard) main { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 16px 24px 8px; }
/* the toolbar card's default .card margin-bottom (18px) + main's bottom padding left a dead band
   under the table in the fixed layout — drop both so #droot fills to the viewport bottom. */
body.page-domain_browser:has(#dbcard) #dbcard { margin-bottom: 0; }
body.page-domain_browser:has(#dbcard) #dbcard { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
body.page-domain_browser:has(#dbcard) #dbcard .dbar { position: static; }   /* the flex card pins it; page-sticky would re-introduce the topbar collision */
body.page-domain_browser:has(#dbcard) #droot { flex: 1; min-height: 0; overflow: auto; padding: 0; }   /* THE scroll container (both axes); padding:0 — .dbrowser's 6px top padding left a band where scrolling rows bled ABOVE the sticky thead */
/* registry meta relocated into the .topbar (next to the "Domain Browser" title), right-aligned */
.topbar-meta { margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--muted); white-space: nowrap; }
.dbar-search { position: relative; display: flex; align-items: center; }
.dbar-search svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.dbar-search input { width: 200px; padding: 9px 12px 9px 34px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
  transition: border-color .12s, box-shadow .12s; }
.dbar-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.dbar-f { display: inline-flex; flex-direction: column; gap: 3px; margin: 0;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.dbar-f select { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); }
.dbar .btn { align-self: flex-end; }
.dbar-count { margin-left: auto; align-self: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* domain_browser: "Today pos" checkbox band filter — label on top (.dbar-f column), checkboxes in a row */
.dbar-tp-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.dbar-tp-row { display: inline-flex; align-items: center; gap: 9px; padding: 6px 2px 0; }
.dbar-tp-row label { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; white-space: nowrap; }
.dbar-tp-row input { margin: 0; cursor: pointer; }

.dbrowser { padding: 6px 0 4px; }
.dgroup { border-top: 1px solid var(--line-soft); }
.dgroup:first-child { border-top: none; }
.dghead { display: flex; align-items: center; gap: 9px; padding: 11px 18px; cursor: pointer; user-select: none; }
.dghead:hover { background: var(--line-soft); }
.dgcaret { color: var(--muted); font-size: 11px; width: 12px; flex: none; }
.dgname { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.dgn { font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--line-soft); padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.dgtable { margin: 0; }
.dgtable th, .dgtable td { padding-left: 18px; }
.dgtable td:last-child, .dgtable th:last-child { padding-right: 18px; }
/* freeze the Domain column when the wide L1 table scrolls horizontally (position:sticky against
   the .overflow-x:auto wrapper). Opaque background covers the columns sliding underneath; a right
   inset shadow marks the frozen edge; the hover rule keeps the frozen cell matching its row. */
.dgtable th:first-child, .dgtable td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface); box-shadow: inset -1px 0 0 var(--line); }
/* STICKY HEADER: the column-name row stays put while the rows scroll. Needs the wrapper to be a
   scroll container on BOTH axes (overflow:auto + max-height) — an overflow-x-only wrapper makes
   the header stick to the wrapper, not the scrollport. Opaque bg covers rows sliding under; the
   corner cell (frozen first column × header) sits above BOTH the row-freeze and the header. */
.dgtable thead th { position: sticky; top: 0; z-index: 3;
  background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.dgtable thead th:first-child { left: 0; z-index: 4; box-shadow: inset -1px -1px 0 var(--line); }
.dgtable tbody tr:hover td:first-child { background: var(--line-soft); }
.dname { font-weight: 600; word-break: break-all; }
.dname mark { background: var(--brand-100); color: var(--brand-d); border-radius: 3px; padding: 0 1px; }
.dage { font-size: 11px; white-space: nowrap; }

.cbadge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 600; font-variant-numeric: tabular-nums; }
.cbadge.cnever { background: var(--line-soft); color: var(--muted); }
.cbadge.cstale { background: var(--amber-50); color: var(--amber); }
.cbadge.cfresh { background: var(--green-50); color: var(--green); }
.drow-grp { margin: 0; }
.drow-grp select { font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); }
.dmore { padding: 10px 18px; font-size: 12.5px; color: var(--muted);
  background: var(--line-soft); border-top: 1px solid var(--line-soft); }
.dempty { padding: 40px 18px; text-align: center; color: var(--muted); font-size: 14px; }

/* group chips on the Domains page that deep-link into the browser */
.dgr-chip { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 10px 15px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--sh-sm); transition: border-color .12s, box-shadow .12s; }
.dgr-chip:hover { border-color: var(--brand); box-shadow: var(--sh); }
.dgr-chip-n { font-size: 19px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.dgr-chip-l { font-size: 13px; font-weight: 600; color: var(--ink-soft); }

/* crawl-policy group editor (domains.php): inline-edit row + labeled new-group form */
.grp-tbl td { vertical-align: middle; }
.grp-tbl input, .grp-tbl select { font-size: 13px; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.grp-tbl input:focus, .grp-tbl select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.grp-new { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.grp-new-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.ge-f { display: inline-flex; flex-direction: column; gap: 4px; margin: 0;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.ge-f input, .ge-f select { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); }
.ge-f input:focus, .ge-f select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.grp-new-form .btn { align-self: flex-end; }

/* Domain Browser — the L1 radar is a very wide multi-column table (+ Keitaro + the frozen
   Domain column), so opt it out of the 1160 cap and let it fill the viewport (width:100% still
   keeps it fitting on narrow screens). Removes the large empty gutter on wide monitors. */
.page-domain_browser main { max-width: none; }

/* ═══ Status·URL — two-column L3: content + global Changes sidebar ═══ */
/* opt out of the 1160 cap ONLY when the 2-col wrapper is present (L3), so L1/L2 stay capped */
.page-status main:has(.l3wrap) { max-width: 1560px; }
.l3wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.l3main { min-width: 0; }
.l3side { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow: auto; }
.l3side .chcard { margin: 0; }
/* changes log */
.chlog { margin-top: 10px; display: flex; flex-direction: column; }
.chday { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.chday:first-child { border-top: none; }
.chday.more { display: none; }
.chday.cur { background: var(--brand-50); border-radius: var(--r-sm); padding: 8px 10px; margin: 0 -10px; border-top-color: transparent; }
.chdate { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--ink); text-decoration: none; }
.chdate:hover .chd { color: var(--brand-d); text-decoration: underline; }
.chday.cur .chdate { color: var(--brand-d); }
.chviewing { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--brand-d); background: #fff; border: 1px solid var(--brand-100); border-radius: 999px; padding: 0 6px; }
.chn { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--line-soft); border-radius: 999px; padding: 0 7px; }
.chevs { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* each event: one-line preview, click ▸ to expand the full detail into a boxed panel.
   importance tiers — maneuver = amber, content churn = quiet grey, other = neutral. */
.chev { font-size: 12px; line-height: 1.4; border-radius: var(--r-sm); }
.chev > summary, .chev.nodet { padding: 4px 7px 4px 19px; position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev > summary { list-style: none; cursor: pointer; }
.chev > summary::-webkit-details-marker { display: none; }
.chev > summary::before { content: "\25B8"; position: absolute; left: 6px; top: 4px; color: var(--muted); font-size: 10px; }
.chev[open] > summary { white-space: normal; }
.chev[open] > summary::before { content: "\25BE"; }
.chev.nodet::before { content: "\00B7"; position: absolute; left: 8px; top: 3px; color: var(--muted); }
.chev > summary:hover { background: var(--line-soft); border-radius: var(--r-sm); }
.chev-l { font-weight: 600; color: var(--ink-soft); }
.chev-p { color: var(--muted); margin-left: 5px; }
.chev[open] .chev-p { display: block; margin: 5px 0 2px; padding: 7px 9px; word-break: break-word;
  color: var(--ink-soft); background: var(--line-soft); border-radius: var(--r-sm); font-size: 11.5px; white-space: pre-wrap; }
.chev.k-man { background: var(--amber-50); }
.chev.k-man .chev-l { color: var(--amber); }
.chev.k-content .chev-l { color: var(--muted); font-weight: 500; }
.chday.hasman .chd::after { content: "\26A1"; color: var(--amber); margin-left: 6px; font-size: 11px; }
.chmore { margin-top: 10px; width: 100%; }
@media (max-width: 1200px) {
  .page-status main:has(.l3wrap) { max-width: 1160px; }
  .l3wrap { grid-template-columns: 1fr; }
  .l3side { position: static; max-height: none; overflow: visible; }
}

/* ═══ Status·URL — Link history (in & out edges over all dates) ═══ */
.lhgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 10px; }
.lhcol { min-width: 0; }
.lhrow { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.lhtop { display: flex; align-items: flex-start; gap: 8px; }
.lhurl { flex: 1 1 auto; min-width: 0; word-break: break-all; color: var(--brand-d); text-decoration: none; font-size: 13px; font-weight: 500; }
.lhurl:hover { text-decoration: underline; }
.lhurl.cross { color: var(--amber); }
.lhtop .pill { flex: none; }
.lhmeta { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.lhtag { color: var(--ink-soft); font-weight: 600; }
.lhtag.hdr { color: var(--amber); }
.lhlegend { margin-top: 8px; font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.lhlegend .hdr { color: var(--amber); } .lhlegend .up { color: var(--green); } .lhlegend .warn { color: var(--amber); }
@media (max-width: 760px) { .lhgrid { grid-template-columns: 1fr; } }
.lhwarn { margin-top: 10px; padding: 8px 12px; border-radius: var(--r-sm); font-size: 12.5px;
  background: var(--amber-50); border: 1px solid #fde9c8; color: var(--amber); }
.lhwarn.bad { background: var(--red-50); border-color: #f3c9ca; color: var(--red); }
/* Link-history partner cards (grouped by partner domain) */
.lhcards { display: grid; gap: 10px; margin-top: 12px; }
.lhcard { border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px 12px; }
.lhcard.cross { border-color: #fde9c8; background: color-mix(in srgb, var(--amber-50) 30%, transparent); }
.lhcard-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lhcard-s { font-size: 12px; color: var(--ink-soft); margin: 4px 0 8px; }
.lhcard-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 3px 0; }
.lhcard-dir { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; min-width: 86px; }
.lhchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--line-soft); cursor: default; }
.lhchip .lhchip-st { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; opacity: .8; }
.lhchip.up   { background: var(--green-50); color: var(--green); border-color: #bbf0cf; }
.lhchip.warn { background: var(--amber-50); color: var(--amber); border-color: #fde9c8; }
.lhchip.bad  { background: var(--red-50);   color: var(--red);   border-color: #f3c9ca; }
.lhchip.muted { color: var(--muted); opacity: .72; }
/* Link-history CHANGE TIMELINE (which dates a canonical/hreflang/redirect changed target) */
.lhtl { display: flex; flex-direction: column; }
.lhtl-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; padding: 7px 8px;
  border-top: 1px solid var(--line-soft); font-size: 13px; }
.lhtl-row:first-child { border-top: 0; }
/* invisible per-row date prefix: takes no visual space (font-size:0) and the negative margin cancels the flex
   gap, but the text (date + TAB) is in the DOM so a mouse-select + copy of the popup carries the date on every
   row. */
/* invisible per-row date prefix, copyable when the log is selected. font-size:0 makes it zero-width
   (no visual gap, so NO negative margin — the old margin-right:-9px pulled the visible mech text OVER
   the cpdate, so a mouse-selection starting on the first row's text anchored PAST the date and dropped
   it from the copy; rows 2+ were fine because the selection already spanned them). Keep it in normal
   line flow (no line-height:0) so the first row's date is captured too. */
.cpdate { font-size: 0; user-select: text; }
.lhtl-row.bad  { background: color-mix(in srgb, var(--red-50) 55%, transparent); border-radius: var(--r-sm); }
/* causality_violation in-body banner — an unmissable strip above a flagged day's rows: the within-day
   phase order is not causal here (the real cause is on an earlier day). */
.ce2-cvbanner {
  display: block; margin: 2px 0 6px; padding: 7px 10px;
  font-size: 12px; line-height: 1.45; font-weight: 500;
  color: var(--amber-700, #9a6700);
  background: color-mix(in srgb, var(--amber-50, #fff7e6) 80%, transparent);
  border: 1px solid var(--amber-300, #f0c36d); border-left: 3px solid var(--amber-500, #e0a82e);
  border-radius: var(--r-sm);
}
/* SERP relay strip — the landing baton-pass (#1 → drop → #1 → drop → #2) stitched across days, above the log. */
.ce2-relay { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--brand-50, #eef4ff) 70%, transparent);
  border: 1px solid var(--border, #e3e8ef); border-left: 3px solid var(--brand-500, #3b6fe0); }

/* AGGREGATE operator-level signals (daily_aggregate.py — synchronized markup edits / cluster-delta / shared
   embed). Sits atop the cluster change log; the PBN fingerprint, so it reads loud. */
.aggsig-wrap { margin: 0 0 10px; display: flex; flex-direction: column; gap: 7px; }
.aggsig { padding: 8px 10px; border-radius: var(--r-sm); font-size: 12px; line-height: 1.45;
  border: 1px solid var(--border, #e3e8ef); border-left: 3px solid var(--muted, #8a94a6);
  background: color-mix(in srgb, var(--bg-soft, #f7f9fc) 70%, transparent); }
.aggsig.sync { border-left-color: var(--red, #d23f3f);
  background: color-mix(in srgb, var(--red-50, #fdeceb) 60%, transparent); }
.aggsig.join { border-left-color: var(--brand-500, #3b6fe0); }
.aggsig.embed { border-left-color: var(--amber-500, #e0a82e); }
.aggsig-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.aggsig-date { color: var(--muted, #8a94a6); font-size: 11px; font-weight: 600; }
.aggsig-b { color: var(--text, #1f2733); }
.aggsig-dates { margin-top: 4px; color: var(--muted, #8a94a6); font-size: 11px; }
.aggsig-doms { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.aggsig-dom { font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--chip-bg, #eef1f6); color: var(--text, #1f2733); border: 1px solid var(--border, #e3e8ef); }
.aggsig-dom.me { background: var(--red-50, #fdeceb); border-color: var(--red, #d23f3f); color: var(--red, #d23f3f); font-weight: 700; }
.aggsig-dom.join { background: var(--brand-50, #eef4ff); border-color: var(--brand-500, #3b6fe0); color: var(--brand-d, #2a52b0); }
.ce2-relay-h { font-size: 11px; font-weight: 600; margin-bottom: 5px; }
.ce2-relay-line { font-size: 12px; line-height: 1.7; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.ce2-relay-line + .ce2-relay-line { margin-top: 3px; padding-top: 3px; border-top: 1px dashed var(--border, #e3e8ef); }
.ce2-relay-kw { font-weight: 600; margin-right: 4px; }
.ce2-relay-u { color: var(--brand-700, #2952b3); text-decoration: none; font-weight: 500; }
.ce2-relay-u:hover { text-decoration: underline; }
.ce2-relay-pos { font-weight: 700; color: var(--green-700, #1a7f4b); }
.ce2-relay-ret { font-weight: 700; color: var(--green-700, #1a7f4b); }   /* ↩ re-entry marker (payload returned) */
.ce2-relay-drop { font-weight: 600; color: var(--red-600, #d83a52); }
.ce2-relay-dt { color: var(--text-muted, #8a93a3); font-size: 11px; }
.ce2-relay-arr { color: var(--text-muted, #8a93a3); }
.lhtl-row.warn { background: color-mix(in srgb, var(--amber-50) 45%, transparent); border-radius: var(--r-sm); }
.lhtl-date { font-weight: 800; color: var(--brand-d); text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums; min-width: 56px; }
.lhtl-date:hover { text-decoration: underline; }
.lhtl-mech { font-weight: 700; color: var(--ink); white-space: nowrap; }
/* cluster-row url prefix: cap width + ellipsis so it never pushes the event off-screen (↗ stays visible) */
.lhtl-u { display: inline-flex; align-items: baseline; gap: 2px; max-width: 420px; min-width: 0; flex: 0 1 auto; }
.lhtl-u .lhtl-ut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lhtl-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 700; }
.lhtl-body { color: var(--ink-soft); }
/* list-diff chips (hreflang code sets etc.): + added (green), − removed (red, struck) */
.lhtl-add { color: var(--green); font-weight: 700; background: var(--green-50); border-radius: 4px; padding: 0 5px; margin: 1px 1px; display: inline-block; }
.lhtl-rem { color: var(--red); text-decoration: line-through; background: var(--red-50); border-radius: 4px; padding: 0 5px; margin: 1px 1px; display: inline-block; }
.lhtl-arr { color: var(--muted); padding: 0 2px; }
.lhtl-x { color: var(--red); font-weight: 700; font-size: 11px; }
.lhtl-old { text-decoration: line-through; text-decoration-color: var(--muted); opacity: .6; }
.lhtl-old .lhtgt { color: var(--muted); font-weight: 400; }
.cldrop-kw { display: inline-block; margin-right: 12px; font-size: 12px; }
.lhtl-v { margin-left: 2px; }
.lhtgt { color: var(--brand-d); text-decoration: none; word-break: break-all; }
.lhtgt:hover { text-decoration: underline; }
.lhtgt.bad { color: var(--red); font-weight: 600; }
/* Connections History sidebar mini-list (recent change preview) */
.lhminis { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 2px; }
.lhmini { font-size: 11.5px; color: var(--ink-soft); padding: 2px 6px; border-radius: var(--r-sm);
  border-left: 2px solid var(--line); }
.lhmini.bad  { background: var(--red-50);   border-left-color: var(--red); }
.lhmini.warn { background: var(--amber-50); border-left-color: var(--amber); }
.lhmini-d { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-d); margin-right: 4px; }
.lhmini-k { color: var(--muted); }
/* Connections History sidebar — date-digest preview (mirrors the modal) */
.chside-list { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 2px; }
.chside-date { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; width: 100%; text-align: left;
  background: #fafbfc; border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 6px 8px; cursor: pointer; }
.chside-date:hover { background: #f1f4f8; }
.chside-date.bad { background: var(--red-50); border-color: #f3c9ca; }
.chside-d { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-d); white-space: nowrap; }
.chside-dig { display: inline-flex; gap: 5px; flex-wrap: wrap; }
/* Connections History — scope toggle + cluster (date-grouped) view */
.chscope { display: inline-flex; gap: 4px; margin-left: 10px; }
.chsc.on, .chsc2.on { background: var(--brand-50, #eef2ff); border-color: var(--brand, #6366f1); color: var(--brand-d, #4338ca); }
.cldate { border: 1px solid var(--line-soft); border-radius: var(--r-sm); margin-bottom: 8px; }
.cldate > summary { cursor: pointer; list-style: none; user-select: none; padding: 9px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cldate > summary::-webkit-details-marker { display: none; }
.cldate > summary::before { content: '▸'; color: var(--muted); font-size: 11px; }
.cldate[open] > summary::before { content: '▾'; }
.cldate[open] > summary { border-bottom: 1px solid var(--line-soft); }
.cldate > summary:hover { background: #fafbfc; }
.cltl-date { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.cldig-wrap { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cldig { font-size: 11px; font-weight: 600; color: var(--ink-soft); background: #f1f3f6; border-radius: 999px; padding: 1px 8px; }
.cldig.drop { background: var(--amber-50); color: var(--amber); }
.cldig.new  { background: var(--brand-50, #eef2ff); color: var(--brand-d, #4338ca); }
.cldig.serpin { background: var(--green-50); color: var(--green); }
.cldig.man   { background: var(--amber-50); color: var(--amber); }     /* operator maneuver bucket (redirect/canonical/hreflang/infra/links/status) */
.cldig.muted { background: #f1f3f6; color: var(--muted); font-weight: 500; }  /* routine content churn */
.cldate.cur > summary { background: var(--brand-50); }                  /* the date currently loaded on the left */
.cldate.cur > summary .cltl-date { color: var(--brand-d); }
.lhtl-row.up { background: color-mix(in srgb, var(--green-50) 50%, transparent); border-radius: var(--r-sm); }
.cldate-body { padding: 4px 12px 8px; }
.cltl-url { font-weight: 700; color: var(--brand-d); text-decoration: none; white-space: nowrap; min-width: 150px; font-size: 12px; }
.cltl-url:hover { text-decoration: underline; }
/* collapsible L3 section (click the header to expand/collapse; collapsed by default when .sec-collapsed) */
.sec-collapse > .sec-h { cursor: pointer; user-select: none; }
.sec-collapse > .sec-h h2::after { content: '▾'; color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 7px; }
.sec-collapse.sec-collapsed > .sec-h h2::after { content: '▸'; }
.sec-collapse.sec-collapsed > :not(.sec-h) { display: none !important; }
.lhrow.lh-flapping { background: color-mix(in srgb, var(--amber-50) 55%, transparent); border-radius: var(--r-sm); }
.lhrow.lh-gone { opacity: .62; }
.lhrow.lh-elsewhere { opacity: .55; }
.lhtag.div { color: var(--amber); font-weight: 700; }
.lhmore { margin-top: 12px; border-top: 1px dashed var(--line-soft); padding-top: 8px; }
.lhmore > summary { cursor: pointer; font-size: 12px; color: var(--muted); list-style: none; user-select: none; }
.lhmore > summary::-webkit-details-marker { display: none; }
.lhmore > summary::before { content: '▸ '; }
.lhmore[open] > summary::before { content: '▾ '; }
.lhmore > summary:hover { color: var(--ink-soft); }
/* per-scan log: inline click-to-expand <details> (was an absolute hover tooltip — clipped by
   the modal's overflow containers). Roomy modal → inline reads better and never clips. */
.lhlog { margin-top: 5px; }
.lhlog > summary { cursor: pointer; font-size: 11px; color: var(--muted); list-style: none; user-select: none; }
.lhlog > summary::-webkit-details-marker { display: none; }
.lhlog > summary::before { content: '▸ '; }
.lhlog[open] > summary::before { content: '▾ '; }
.lhlog > summary:hover { color: var(--ink-soft); }
.lhlog pre { margin: 5px 0 0; background: var(--ink); color: #fff; font-size: 11px; line-height: 1.55;
  white-space: pre; padding: 9px 12px; border-radius: var(--r-sm); overflow: auto; max-height: 340px; }
/* ── Link history in the right sidebar: Links accordion + "View all" modal ── */
.l3side .chcard { margin: 0 0 16px; }
.l3side .chcard:last-child { margin-bottom: 0; }
.sideacc { padding: 0; overflow: hidden; }
.sideacc > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; padding: 16px 18px; }
.sideacc > summary::-webkit-details-marker { display: none; }
.sideacc > summary h2 { margin: 0; }
.sideacc-mark::before { content: '▸'; color: var(--muted); font-size: 12px; }
.sideacc[open] .sideacc-mark::before { content: '▾'; }
.sideacc[open] > summary { border-bottom: 1px solid var(--line-soft); }
.sideacc-body { padding: 12px 18px 16px; }
/* collapsed-header "as of <date>" caption for the Domain/server + Off-page sidebar accordions —
   tells the user the data is present and WHEN it was resolved, without expanding (the data is
   domain-level, from a separate stream — NOT scoped to the date picker). */
.sideacc-asof { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* the as-of date moved into the status pill's hover title (a CSS bubble would be clipped by the
   accordion's overflow:hidden) — cursor:help hints there's more on hover. */
.asofpill { cursor: help; display: inline-flex; }
/* [data-tip] JS tooltip — single position:fixed node (escapes the sidebar overflow that clips a
   CSS bubble, and works where the native title doesn't). Positioned in JS; just styled here. */
.uitip { position: fixed; z-index: 9999; background: var(--ink, #1c2230); color: #fff;
  padding: 7px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 500; line-height: 1.45;
  max-width: 300px; box-shadow: 0 6px 24px rgba(0,0,0,.22); pointer-events: none;
  white-space: pre-line; /* \n in data-tip = a line break (multi-line tips, e.g. Keitaro windows) */
  opacity: 0; transition: opacity .1s; }
.uitip.show { opacity: 1; }
/* the narrow (340px) sidebar clips long unbroken values (nameserver lists, resolve timestamps,
   redirect-header lines) — wrap them instead of overflowing under the accordion's overflow:hidden. */
.sideacc-body .tbl td { word-break: break-word; }
.lhsum { font-size: 12.5px; margin: 7px 0; line-height: 1.5; }
.lhsum-l { font-weight: 600; }
.lhsum.muted { font-size: 11.5px; }
.lhwarn.sm { margin: 8px 0; padding: 7px 10px; font-size: 11.5px; }
.lhviewall { margin-top: 12px; width: 100%; }
.lhmodal { display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(17,24,39,.5); padding: 2vh 2vw; }
.lhmodal.show { display: flex; align-items: stretch; justify-content: center; }
.lhmodal-panel { background: var(--surface); border-radius: var(--r-lg);
  box-shadow: 0 24px 70px rgba(17,24,39,.35); width: 100%; max-width: 1800px; max-height: 96vh;
  display: flex; flex-direction: column; overflow: hidden; }
.lhmodal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--line); flex: none; }
.lhmodal-x { background: none; border: 0; font-size: 17px; line-height: 1; cursor: pointer;
  color: var(--muted); padding: 4px 9px; border-radius: var(--r-sm); }
.lhmodal-x:hover { color: var(--ink); background: var(--line-soft); }
.lhmodal-body { padding: 16px 22px 22px; overflow: auto; }
/* link-styled submit button (for inline actions like Re-fetch in the L3 hero meta) */
.linkbtn { background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: var(--brand); }
.linkbtn:hover { text-decoration: underline; color: var(--brand-d); }

/* ── collapsible card widget (accordion via native <details>) — the ONE shared chrome.
   Born in work.php (TZ-05), moved here 2026-07-10 for reuse (domain_browser dossier).
   Usage: <details class="card work-widget" [open]><summary><h2>Title</h2>
   <span class="sec-n">…count/pills…</span></summary><div class="wbody">…</div></details>.
   Links inside <summary> need onclick="event.stopPropagation()" or they toggle the widget. */
.work-widget { padding: 0; overflow: hidden; }
.work-widget > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; padding: 14px 16px; margin: 0; user-select: none; }
.work-widget > summary::-webkit-details-marker { display: none; }
.work-widget > summary::before { content: "▸"; color: var(--muted, #8a8a8a); font-size: 12px;
  transition: transform .15s; flex: 0 0 auto; }
.work-widget[open] > summary::before { transform: rotate(90deg); }
/* explicit collapse: some engines don't hide the body of a block <details> reliably when a
   child sets its own layout — force it, so "collapsed by default" is deterministic. */
.work-widget:not([open]) > .wbody { display: none; }
.work-widget > summary h2 { margin: 0; font-size: 17px; }
.work-widget > summary .sec-n { margin-left: auto; font-weight: 400; }
.work-widget > .wbody { padding: 0 16px 16px; }