/* Admin — insights feature styles (loaded after admin.css; use its tokens)
 *
 * Charts here are pure CSS widths — no library, no SVG. The palette is a
 * single accent hue: `--accent` for the primary series, `--accent-mid` for the
 * lighter second tone, `--line`/`--surface-soft` for the recessive track.
 * `--accent-mid` sits below 3:1 against the surface, which is exactly why every
 * bar prints its value as text and every two-tone chart carries a legend —
 * colour is never the only signal here. */

/* ---------- Head controls ---------- */

.ins-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#panel-insights .plain-head { flex-wrap: wrap; }

/* ---------- Active-now strip ---------- */

.ins-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}
.ins-active strong { color: var(--ink); font-weight: 650; }
.ins-active a { color: var(--accent); font-weight: 600; text-decoration: none; }
.ins-active a:hover { text-decoration: underline; }
.ins-active-sep { color: var(--ink-faint); }
.ins-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  flex: 0 0 auto;
}

/* ---------- Tiles ---------- */

.ins-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.ins-tile {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 15px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.ins-tile-label {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ins-tile-value {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}
.ins-tile-nil { color: var(--ink-faint); font-weight: 600; }

/* Deltas are deliberately NEUTRAL — this dashboard has no opinion about which
   direction is good, and colour is reserved for "needs action" everywhere else
   in the admin. The arrow plus the signed number carries the direction. */
.ins-delta {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink-soft);
}
.ins-delta.is-flat { font-weight: 500; color: var(--ink-faint); }
.ins-delta-arrow { font-size: 0.66rem; }
.ins-delta-note { font-weight: 500; color: var(--ink-faint); }

/* ---------- Panels ---------- */

.ins-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}
.ins-col { display: grid; gap: 14px; align-content: start; }
.ins-panel {
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.ins-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.ins-panel-title {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ins-panel-sub,
.ins-panel-note {
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.ins-panel-note { margin: 12px 0 0; }
.ins-none {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.ins-muted { color: var(--ink-faint); font-weight: 500; }

/* ---------- Legend ---------- */

.ins-legend {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.ins-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.ins-sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.ins-sw.is-enq { background: var(--accent); }
.ins-sw.is-chk { background: var(--accent-mid); }

/* ---------- Horizontal bars ---------- */

.ins-bars,
.ins-funnel {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ins-bar-row,
.ins-funnel-row {
  display: grid;
  grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.ins-bar-label,
.ins-funnel-name {
  font-size: 0.82rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ins-funnel-name { font-weight: 600; }

/* The track is the recessive one-step-off-surface gray; no dashes, no border. */
.ins-bar-track {
  position: relative;
  height: 14px;
  border-radius: 4px;
  background: var(--surface-soft);
  overflow: hidden;
}
.ins-bar-fills {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  /* The 2px surface gap that separates two touching fills — never a stroke. */
  gap: 2px;
  min-width: 0;
  border-radius: 0 4px 4px 0; /* square at the baseline, rounded data-end */
  overflow: hidden;
}
.ins-fill { display: block; height: 100%; }
.ins-fill.is-enq { background: var(--accent); }
.ins-fill.is-chk { background: var(--accent-mid); }

.ins-bar-value,
.ins-funnel-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.ins-funnel-value { font-weight: 650; }
.ins-bar-split {
  grid-column: 2 / -1;
  margin-top: -4px;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

/* ---------- Ranked lists ---------- */

.ins-rank {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ins-rank;
}
.ins-rank-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  font-size: 0.85rem;
}
.ins-rank-n {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.ins-rank-link {
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.ins-rank-link:hover { color: var(--accent); text-decoration: underline; }
.ins-rank-value {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ins-rank-unit { font-weight: 500; color: var(--ink-faint); }

/* ---------- Skeleton ---------- */

.ins-sk {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-soft) 25%, var(--line-soft) 37%, var(--surface-soft) 63%);
  background-size: 400% 100%;
  animation: ins-shimmer 1.3s ease-in-out infinite;
}
.ins-sk-label { width: 62%; height: 9px; margin-bottom: 9px; }
.ins-sk-value { width: 44%; height: 24px; margin-bottom: 9px; }
.ins-sk-sub { width: 72%; height: 9px; }
.ins-sk-title { width: 42%; height: 10px; margin-bottom: 16px; }
.ins-sk-bar { width: 100%; height: 14px; margin-bottom: 10px; }
.ins-sk-bar:nth-child(3) { width: 84%; }
.ins-sk-bar:nth-child(4) { width: 61%; }
.ins-sk-bar:nth-child(5) { width: 43%; }
@keyframes ins-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ins-sk { animation: none; }
}

/* ---------- iPad portrait / narrow ---------- */

@media (max-width: 1100px) {
  .ins-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  /* Five tiles into auto-fit columns lands on 4 + 1 orphan at iPad portrait.
     Three columns gives 3 + 2, which reads as a block rather than a mistake. */
  .ins-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ins-tiles { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; }
  .ins-tile { padding: 12px 13px; }
  .ins-tile-value { font-size: 1.5rem; }
  .ins-panel { padding: 14px; }
  /* Label above the bar — 96px of label plus a bar plus a value does not fit
     at 390px, and an ellipsised source name is worse than a wrapped row. */
  .ins-bar-row,
  .ins-funnel-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
  }
  .ins-bar-label,
  .ins-funnel-name { grid-column: 1; white-space: normal; }
  .ins-bar-value,
  .ins-funnel-value { grid-column: 2; grid-row: 1; }
  .ins-bar-track { grid-column: 1 / -1; grid-row: 2; }
  .ins-bar-split { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
  .ins-active { border-radius: var(--radius); }
}