.criclens-site-nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg,#fff) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line,#e5e7eb)}
.criclens-site-nav .nav-inner{max-width:1180px;margin:0 auto;padding:.7rem 1rem;display:flex;align-items:center;gap:1rem}.criclens-site-nav .nav-brand{font-weight:800;text-decoration:none;color:var(--text,#111827);letter-spacing:-.03em}.criclens-site-nav nav{display:flex;gap:.2rem;flex-wrap:wrap}.criclens-site-nav nav a{padding:.45rem .62rem;border-radius:.55rem;text-decoration:none;color:var(--muted,#667085);font-size:.92rem}.criclens-site-nav nav a:hover,.criclens-site-nav nav a[aria-current="page"]{background:var(--soft,#f2f4f7);color:var(--text,#111827)}
.analytics-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1.25rem}.analytics-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line,#e5e7eb);border-radius:1rem;padding:1rem;background:var(--card,#fff);transition:transform .15s ease,border-color .15s ease}.analytics-card:hover{transform:translateY(-2px);border-color:var(--muted,#98a2b3)}.analytics-card h2{margin:.25rem 0 .75rem;font-size:1.12rem}.card-kicker,.metric-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted,#667085)}.mini-metrics{display:grid;gap:.35rem;color:var(--muted,#667085);font-size:.9rem}.mini-metrics b{color:var(--text,#111827)}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin:1rem 0 1.5rem}.metric-grid.compact{grid-template-columns:repeat(auto-fit,minmax(125px,1fr))}.metric-card{border:1px solid var(--line,#e5e7eb);border-radius:.85rem;padding:.85rem;background:var(--card,#fff)}.metric-value{font-size:1.5rem;font-weight:750;letter-spacing:-.035em;margin-top:.2rem}.metric-hint{font-size:.78rem;color:var(--muted,#667085);margin-top:.25rem}.analytics-section{margin:1.6rem 0}.analytics-section h2{margin:.2rem 0 .7rem}.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.table-wrap{overflow-x:auto;border:1px solid var(--line,#e5e7eb);border-radius:.9rem}.analytics-table{width:100%;border-collapse:collapse;min-width:620px}.analytics-table th,.analytics-table td{padding:.72rem .8rem;text-align:left;border-bottom:1px solid var(--line,#e5e7eb);vertical-align:middle}.analytics-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#667085);background:var(--soft,#f8fafc)}.analytics-table tr:last-child td,.analytics-table tr:last-child th{border-bottom:0}.analytics-table a{color:inherit;font-weight:650}.form-strip{display:flex;gap:.28rem;align-items:center;flex-wrap:wrap}.form-pill{display:inline-grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:50%;font-size:.75rem;font-weight:800;background:var(--soft,#eef2f6);color:var(--muted,#475467)}.form-W{background:#e8f7ef;color:#157347}.form-L{background:#fcecec;color:#b42318}.form-T{background:#fff4dd;color:#9a6700}.form-N{background:#eef2f6;color:#667085}.analytics-disclaimer{margin:1.5rem 0;color:var(--muted,#667085);font-size:.85rem;line-height:1.5}
@media(max-width:760px){.two-col{grid-template-columns:1fr}.criclens-site-nav .nav-inner{align-items:flex-start;flex-direction:column;gap:.35rem}.criclens-site-nav nav{overflow-x:auto;max-width:100%;flex-wrap:nowrap}.criclens-site-nav nav a{white-space:nowrap}}

/* ==========================================================================
   CricLens v0.9.3 — Player-style cards for Teams & Competitions
   Reuses the site's existing theme variables instead of introducing a new
   colour palette. The goal is visual consistency with Player Explorer.
   ========================================================================== */

/* Explorer cards --------------------------------------------------------- */
.analytics-card {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  padding: 1.15rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 1rem;
  color: var(--text, var(--ink, inherit));
  background: var(--panel, var(--bg, transparent));
  box-shadow: none;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background-color .15s ease;
}

.analytics-card:hover {
  transform: translateY(-2px);
  border-color: var(--muted, #98a2b3);
}

.analytics-card .card-kicker {
  color: var(--muted, #98a2b3);
  font-size: .73rem;
  font-weight: 750;
  letter-spacing: .075em;
}

.analytics-card h2 {
  margin: .35rem 0 .9rem;
  color: var(--text, var(--ink, inherit));
  font-size: 1.12rem;
  line-height: 1.18;
  letter-spacing: -.025em;
}

.analytics-card .form-strip {
  margin-bottom: .9rem;
}

/* Like Player Explorer: the secondary metrics live in compact inset cells. */
.analytics-card .mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  margin-top: auto;
  color: var(--muted, #98a2b3);
  font-size: .76rem;
}

.analytics-card .mini-metrics span {
  min-width: 0;
  padding: .62rem .65rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: .72rem;
  background: var(--soft, color-mix(in srgb, var(--panel, transparent) 88%, transparent));
  line-height: 1.2;
}

.analytics-card .mini-metrics b {
  display: block;
  margin-bottom: .14rem;
  color: var(--text, var(--ink, inherit));
  font-size: .94rem;
  line-height: 1.1;
}

/* Competition cards have no form strip, so keep the same vertical rhythm. */
.competition-card .mini-metrics {
  margin-top: auto;
}

/* Detail-page metric cards ---------------------------------------------- */
.metric-grid {
  gap: .65rem;
}

.metric-card {
  min-width: 0;
  padding: .78rem .82rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: .8rem;
  color: var(--text, var(--ink, inherit));
  background: var(--soft, transparent);
  box-shadow: none;
}

.metric-label {
  color: var(--muted, #98a2b3);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .065em;
}

.metric-value {
  margin-top: .25rem;
  color: var(--text, var(--ink, inherit));
  font-size: 1.35rem;
  font-weight: 760;
  line-height: 1.1;
}

.metric-hint {
  color: var(--muted, #98a2b3);
  font-size: .72rem;
  line-height: 1.35;
}

/* Each analytical block on a team/competition detail page now behaves like
   one of the larger Player Page cards. */
body[data-team-id] .analytics-section,
body[data-competition-key] .analytics-section {
  margin: 1rem 0;
  padding: 1.15rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 1rem;
  color: var(--text, var(--ink, inherit));
  background: var(--panel, var(--bg, transparent));
}

body[data-team-id] .analytics-section h2,
body[data-competition-key] .analytics-section h2 {
  margin: .25rem 0 .85rem;
  color: var(--text, var(--ink, inherit));
  font-size: 1.15rem;
  letter-spacing: -.025em;
}

/* The two-column Batting / Bowling cards should be symmetrical. */
body[data-team-id] .two-col,
body[data-competition-key] .two-col {
  gap: .8rem;
  align-items: stretch;
}

body[data-team-id] .two-col .analytics-section,
body[data-competition-key] .two-col .analytics-section {
  margin: 0;
}

/* Tables remain data-dense, but sit inside the same dark/light panel surface
   instead of looking like a separate white component. */
.table-wrap {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: .8rem;
  color: var(--text, var(--ink, inherit));
  background: var(--soft, transparent);
}

.analytics-table {
  color: var(--text, var(--ink, inherit));
}

.analytics-table th,
.analytics-table td {
  border-bottom-color: var(--line, #e5e7eb);
}

.analytics-table th {
  color: var(--muted, #98a2b3);
  background: transparent;
}

.analytics-table tbody tr:hover {
  background: color-mix(
    in srgb,
    var(--soft, transparent) 72%,
    transparent
  );
}

.analytics-table a {
  color: var(--text, var(--ink, inherit));
  text-underline-offset: .15em;
}

/* Form pills are intentionally retained: they are useful semantic signals,
   but made slightly more compact to match Player Explorer density. */
.form-pill {
  width: 1.55rem;
  height: 1.55rem;
  font-size: .69rem;
}

/* The top summary metrics on detail pages should read as one compact band. */
body[data-team-id] #teamDetail > .metric-grid,
body[data-competition-key] #competitionDetail > .metric-grid {
  margin: 1rem 0;
}

/* Keep the descriptive disclaimer visually subordinate. */
.analytics-disclaimer {
  padding: .2rem .1rem 0;
  color: var(--muted, #98a2b3);
}

/* Responsive behaviour -------------------------------------------------- */
@media (max-width: 860px) {
  .analytics-card .mini-metrics {
    grid-template-columns: 1fr;
  }

  .analytics-card {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  body[data-team-id] .analytics-section,
  body[data-competition-key] .analytics-section {
    padding: 1rem;
  }

  .metric-card {
    padding: .72rem .75rem;
  }
}

/* ==========================================================================
   CricLens v0.9.4 — adaptive secondary-text contrast
   Do not use a fixed grey such as #98a2b3 on analytics cards. Secondary copy
   is derived from the same foreground colour as the primary text, so it stays
   readable on both light and dark CricLens surfaces.
   ========================================================================== */

.analytics-card,
body[data-team-id] .analytics-section,
body[data-competition-key] .analytics-section,
.metric-card,
.table-wrap {
  --analytics-fg: var(--text, var(--ink, #f5f7fa));
  --analytics-muted: color-mix(
    in srgb,
    var(--analytics-fg) 74%,
    transparent
  );
  --analytics-muted-strong: color-mix(
    in srgb,
    var(--analytics-fg) 84%,
    transparent
  );
}

/* Explorer cards */
.analytics-card .card-kicker,
.analytics-card .mini-metrics {
  color: var(--analytics-muted);
}

.analytics-card .mini-metrics span {
  color: var(--analytics-muted);
}

.analytics-card .mini-metrics b,
.analytics-card h2 {
  color: var(--analytics-fg);
}

/* Detail cards */
.metric-label,
.metric-hint {
  color: var(--analytics-muted);
}

.metric-value {
  color: var(--analytics-fg);
}

body[data-team-id] .analytics-section h2,
body[data-competition-key] .analytics-section h2 {
  color: var(--analytics-fg);
}

/* Tables */
.analytics-table {
  color: var(--analytics-fg);
}

.analytics-table th {
  color: var(--analytics-muted-strong);
}

.analytics-table td {
  color: var(--analytics-fg);
}

.analytics-table a {
  color: var(--analytics-fg);
}

/* Supporting copy */
.analytics-disclaimer,
body[data-team-id] .section-copy,
body[data-competition-key] .section-copy {
  color: var(--analytics-muted);
}

/* Slightly stronger weight improves legibility without making secondary
   information compete with the primary values. */
.analytics-card .card-kicker,
.metric-label,
.analytics-table th {
  font-weight: 700;
}

/* ==========================================================================
   CricLens v0.9.5 — dark inset stat tiles
   The analytics panels are dark. Their nested stats should stay in the same
   visual family instead of switching to the light --soft surface.
   ========================================================================== */

/* Competition + Team Explorer: the three stats at the bottom of each card. */
.analytics-card .mini-metrics span {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .12);
  color: rgba(245, 248, 251, .72);
}

.analytics-card .mini-metrics b {
  color: #f8fafc;
}

/* Team / Competition detail pages: summary and section metric tiles. */
.metric-card {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .12);
  color: #f8fafc;
}

.metric-card .metric-value {
  color: #f8fafc;
}

.metric-card .metric-label {
  color: rgba(245, 248, 251, .72);
}

.metric-card .metric-hint {
  color: rgba(245, 248, 251, .64);
}

/* The nested metric tiles should feel like Player-style inset panels,
   without looking like independent pale cards. */
.analytics-card .mini-metrics span,
.metric-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

/* Slightly stronger secondary text on small screens, where thin type
   loses more contrast. */
@media (max-width: 760px) {
  .analytics-card .mini-metrics span,
  .metric-card .metric-label {
    color: rgba(245, 248, 251, .78);
  }
}