/* ipv4-transfer-statistics.css
 * Standalone stylesheet for the /ipv4-transfer-statistics/ page.
 * Shares the visual language of ipv4-transfers.css (same fonts/colours,
 * already loaded site-wide) but this file and its page are otherwise fully
 * independent — nothing here is referenced by the transfer-log page.
 */

.ipts-page {
  --ipts-border:  #e5e7eb;
  --ipts-text-1:  #111827;
  --ipts-text-2:  #6b7280;
  --ipts-text-3:  #9ca3af;
  --ipts-accent:  #425ad6;
  --ipts-accent-ink: #3548ab;
  --ipts-accent-soft: #eef1fc;
  --ipts-surface-2: #f9fafc;
  --ipts-grid: #eef0f6;
  --ipts-good: #0a8f0a;

  /* validated categorical chart palette, fixed order */
  --ipts-c1: #2a78d6; /* blue */
  --ipts-c2: #4a3aa7; /* violet */
  --ipts-c3: #1baf7a; /* aqua */
  --ipts-c4: #eb6834; /* orange */
  --ipts-c5: #eda100; /* yellow */
  --ipts-c6: #e87ba4; /* magenta */

  /* single-hue sequential ramp (light -> dark) for magnitude encodings */
  --ipts-seq-1: #cde2fb;
  --ipts-seq-2: #6da7ec;
  --ipts-seq-3: #256abf;
  --ipts-seq-4: #0d366b;

  box-sizing: border-box;
  max-width: 100rem;
  width: 100%;
  margin: 0 auto;
  padding: 2.25rem clamp(1rem, 3vw, 2.5rem) 4rem;
  background: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ipts-text-1);
}
.ipts-page *{ box-sizing:border-box; }

/* ── hero ── */
.ipts-hero { margin-bottom: 1.5rem; }
.ipts-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ipts-accent-ink); background:var(--ipts-accent-soft);
  padding:.3rem .6rem; border-radius:99px; margin-bottom:.85rem;
}
.ipts-hero h1 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: var(--ipts-text-1);
  margin: 0 0 0.6rem;
  line-height: 1.25;
}
.ipts-hero p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ipts-text-2);
  max-width: 52rem;
}
.ipts-hero-meta{
  display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1rem;
  font-size:.82rem; color:var(--ipts-text-3);
}
.ipts-hero-meta b{ color:var(--ipts-text-2); font-weight:600; }
.ipts-hero a{ color:var(--ipts-accent-ink); font-weight:600; text-decoration:none; border-bottom:1px solid #c7cff2; }

/* ── marketplace CTA banner ── */
.ipts-cta{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  background:var(--ipts-accent-soft); border:1px solid #d9deF7; border-radius:.85rem;
  padding:1.35rem 1.6rem;
}
@media (max-width:700px){ .ipts-cta{ flex-direction:column; align-items:flex-start; } }
.ipts-cta h2{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:1.05rem; font-weight:700;
  color:var(--ipts-text-1); margin:0 0 .3rem;
}
.ipts-cta p{ margin:0; font-size:.88rem; color:var(--ipts-text-2); max-width:34rem; line-height:1.55; }
.ipts-cta .btn-primary, .ipts-cta .btn-outline{ flex:none; white-space:nowrap; }

/* ── kpi row ── */
.ipts-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; margin-bottom:1.75rem; }
@media (max-width:800px){ .ipts-kpis{ grid-template-columns:repeat(2,1fr);} }
.ipts-kpi{
  background:#fff; border:1px solid var(--ipts-border); border-radius:.75rem;
  padding:1rem 1.1rem;
}
.ipts-kpi-label{ font-size:.72rem; font-weight:600; color:var(--ipts-text-3); text-transform:uppercase; letter-spacing:.045em; }
.ipts-kpi-value{ font-size:1.65rem; font-weight:700; color:var(--ipts-text-1); margin-top:.35rem; font-family:'Plus Jakarta Sans',sans-serif; }
.ipts-kpi-sub{ font-size:.78rem; color:var(--ipts-text-2); margin-top:.25rem; }

/* ── period toggle ── */
.ipts-filters-row{
  display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.4rem;
  position:sticky; top:5rem; z-index:30; max-width:100%;
  background:#fff; padding-block:.85rem; border-bottom:1px solid var(--ipts-border);
  transition:padding-block .15s ease;
}
/* subtle lift once actually pinned against the site header, so it reads as
   "floating over" the content scrolling beneath rather than just static;
   also tighten the bar once it's persistently on screen, so it costs less
   scroll real-estate than the roomier first-view spacing. */
.ipts-filters-row.is-stuck{ box-shadow:0 4px 10px -6px rgba(17,24,39,.12); padding-block:.55rem; }
.ipts-filter-label{ font-size:.78rem; font-weight:600; color:var(--ipts-text-3); text-transform:uppercase; letter-spacing:.04em; margin-right:.15rem; flex:none; }

/* Each filter group scrolls horizontally on its own rather than wrapping or
   overflowing the viewport — a RIR row of 6 pills never fits a phone width,
   and wrapping it would make the sticky bar tall on every scroll position. */
.ipts-period{
  display:flex; gap:.5rem; align-items:center; margin-bottom:1.1rem;
  max-width:100%; overflow-x:auto; flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  /* headroom so a reserved (even if invisible) scrollbar gutter never
     clips the bottom edge of the pills */
  padding-bottom:4px; margin-bottom:calc(1.1rem - 4px);
}
.ipts-period::-webkit-scrollbar{ display:none; height:0; }
/* Fade the trailing edge, but only once JS has confirmed the row actually
   overflows — a permanent fade on a row that already fits would fade out
   a pill for no reason, implying hidden content that isn't there. */
.ipts-period.is-scrollable{
  mask-image:linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
}
.ipts-pill{
  font:inherit; font-size:.82rem; font-weight:600; color:var(--ipts-text-2);
  background:var(--ipts-surface-2); border:1px solid var(--ipts-border); border-radius:99px;
  padding:.4rem .9rem; cursor:pointer; flex:none;
  transition:padding .15s ease, font-size .15s ease;
}
.ipts-filters-row.is-stuck .ipts-pill{ padding:.3rem .75rem; font-size:.78rem; }
.ipts-pill.active{ background:var(--ipts-accent); border-color:var(--ipts-accent); color:#fff; }

/* ── cards ── */
.ipts-section{ margin-bottom:1.75rem; }
.ipts-card{
  background:#fff; border:1px solid var(--ipts-border); border-radius:.85rem; overflow:hidden;
}
.ipts-card-head{ padding:1.15rem 1.3rem .9rem; }
.ipts-card-head h2{ font-family:'Plus Jakarta Sans',sans-serif; font-size:1.02rem; font-weight:700; color:var(--ipts-text-1); margin:0; }
.ipts-card-head p{ margin:.35rem 0 0; font-size:.85rem; color:var(--ipts-text-2); max-width:40rem; line-height:1.55; }
.ipts-card-body{ padding:0 1.3rem 1.3rem; }
.ipts-toolbar-row{ display:flex; gap:.5rem; flex-wrap:wrap; padding:0 1.3rem 1rem; }

.ipts-split{ display:grid; grid-template-columns:1.3fr 1fr; gap:1.5rem; align-items:center; }
@media (max-width:760px){ .ipts-split{ grid-template-columns:1fr; } }
.ipts-split-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:760px){ .ipts-split-2{ grid-template-columns:1fr; } }

/* ── table ── */
.ipts-card table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.ipts-card thead th{
  text-align:left; font-size:.7rem; font-weight:700; color:var(--ipts-text-3);
  text-transform:uppercase; letter-spacing:.04em; padding:.5rem .5rem; border-bottom:1px solid var(--ipts-border);
}
.ipts-card thead th.num, .ipts-card td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.ipts-card tbody td{ padding:.55rem .5rem; border-bottom:1px solid var(--ipts-border); color:var(--ipts-text-2); }
.ipts-card tbody tr:last-child td{ border-bottom:none; }
.ipts-org{ color:var(--ipts-text-1); font-weight:600; display:flex; align-items:center; }
.ipts-rank{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.3rem; height:1.3rem; border-radius:.4rem; background:var(--ipts-surface-2);
  color:var(--ipts-text-2); font-size:.7rem; font-weight:700; margin-right:.5rem; flex:none;
}
.ipts-dot{ display:inline-block; width:.55rem; height:.55rem; border-radius:99px; margin-right:.45rem; flex:none; }
.ipts-drill-hint{ font-size:.78rem; color:var(--ipts-text-3); margin-top:.7rem; line-height:1.6; }
.ipts-drill-hint a{ color:var(--ipts-accent-ink); font-weight:600; text-decoration:none; }
.ipts-org-link{ color:inherit; text-decoration:none; }
.ipts-org-link:hover{ color:var(--ipts-accent-ink); text-decoration:underline; }

/* ── matrix heatmap ── */
.ipts-matrix-wrap{ overflow-x:auto; }
.ipts-matrix{ border-collapse:separate; border-spacing:3px; font-size:.74rem; min-width:28rem; }
.ipts-matrix th{ font-weight:600; color:var(--ipts-text-3); font-size:.66rem; text-transform:uppercase; letter-spacing:.03em; padding:.25rem .4rem; }
.ipts-matrix th.rowh{ text-align:right; }
.ipts-matrix td{ text-align:center; padding:.5rem .3rem; border-radius:.4rem; font-variant-numeric:tabular-nums; font-weight:600; min-width:3.6rem; }
.ipts-matrix td.diag{ outline:1.5px dashed var(--ipts-accent); outline-offset:-1.5px; }
.ipts-cap{ font-size:.76rem; color:var(--ipts-text-3); margin-top:.6rem; }

/* ── stacked split bar ── */
.ipts-splitbar{ display:flex; height:1.5rem; border-radius:.4rem; overflow:hidden; margin:.9rem 0 .6rem; }
.ipts-splitbar-labels{ display:flex; justify-content:space-between; font-size:.85rem; color:var(--ipts-text-2); }
.ipts-splitbar-labels b{ font-size:1.15rem; display:block; font-family:'Plus Jakarta Sans',sans-serif; color:var(--ipts-text-1); }
.ipts-legend{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin-top:.9rem; font-size:.8rem; color:var(--ipts-text-2); }
.ipts-legend b{ color:var(--ipts-text-1); font-variant-numeric:tabular-nums; }

/* ── market concentration (inside Top Organisations card) ── */
.ipts-concentration{ grid-column:1 / -1; margin-top:.3rem; padding-top:1.1rem; border-top:1px solid var(--ipts-border); }
.ipts-concentration h3{ font-size:.85rem; font-weight:700; color:var(--ipts-text-1); margin:0 0 .6rem; }
.ipts-conc-label{ font-weight:500; color:var(--ipts-text-3); text-transform:none; }
.ipts-legend span.ipts-dot{ margin-right:.4rem; }

/* ── charts ── */
.ipts-chart-label{ font-size:.66rem; fill:var(--ipts-text-3); font-family:'Inter',sans-serif; }
.ipts-chart-val{ font-size:.68rem; fill:var(--ipts-text-2); font-family:'Inter',sans-serif; font-weight:600; }
.ipts-axis{ stroke:var(--ipts-grid); stroke-width:1; }

.ipts-flag{ font-size:.9rem; margin-right:.3rem; }
.ipts-footnote{ font-size:.78rem; color:var(--ipts-text-3); line-height:1.6; margin-top:.5rem; }

.ipts-state{ padding:2.5rem 1rem; text-align:center; color:var(--ipts-text-2); font-size:.88rem; }
.ipts-empty-cell{ padding:1.75rem 1rem !important; text-align:center; color:var(--ipts-text-3) !important; font-style:italic; }