/* ─────────────────────────────────────────────────────────────────────────
   2for22 — the CCP stylesheet.

   THE ONLY STYLESHEET A CCP PAGE LOADS since the restyle (2026-09-20).
   ccp/_base.html extends ccp/_site.html, not base.html, so style.css,
   mobile-fixes.css and fantasy_assist.css are no longer on any CCP page.
   Every rule CCP used to inherit from them is carried over in section B
   below; anything CCP needs from the site's CSS has to be HERE.

   A. Tokens — colours, type, radii, shadows — as CSS variables. Change the
      look by changing these; nothing below names a raw colour it could
      name a token for. The prefix is ccp- so nothing collides if the
      sheet is ever loaded beside another.
   B. Base — the reset, body, the chrome (top bar, page frame, footer), the
      table defaults and the .table-responsive scroll shadows from
      style.css, and the [hidden] guard.
   C. Everything else, in the order it was written.

   THE COLOUR RULE (CLAUDE.md section 10) holds under this palette: green is
   better for the batting side and red worse on anything that reads the
   match; a block headed with a bowler's name is read from his side. So
   --ccp-good and --ccp-bad are SEMANTIC and are never used for decoration,
   which is why the brand accent is indigo and the live dot is the one
   place green means "now" rather than "good".

   All class names are prefixed `ccp-`, for the same reason the Python
   names are prefixed `ccp_`. app.py puts a 7-day browser cache on
   /static/, so bump the ?v= number in ccp/_base.html when this changes.
   ───────────────────────────────────────────────────────────────────────── */

/* ── A. Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --ccp-bg:          #f6f7f9;   /* the page */
  --ccp-surface:     #ffffff;   /* cards, panels, tables */
  --ccp-surface-2:   #f8fafc;   /* a tinted inset: tiles, table heads, hovers */
  --ccp-surface-3:   #f1f5f9;   /* chips and pills */
  --ccp-line:        #e5e7eb;   /* borders and dividers */
  --ccp-line-strong: #d1d5db;   /* control borders */

  /* Text */
  --ccp-text:        #111827;   /* headings, figures, names */
  --ccp-text-2:      #334155;   /* body copy that must read as text */
  --ccp-text-3:      #475569;   /* labels, secondary controls */
  --ccp-muted:       #6b7280;   /* captions, overs, sub-lines */
  --ccp-faint:       #94a3b8;   /* small caps labels, hints */
  --ccp-faintest:    #cbd5e1;   /* placeholders, dashes, inert icons */

  /* Brand accent: indigo. Links, active tabs, primary buttons, the score.
     Deliberately neither green nor red (see the head of this file). */
  --ccp-accent:      #4f46e5;
  --ccp-accent-dark: #4338ca;
  --ccp-accent-soft: #eef2ff;
  --ccp-accent-line: #c7d2fe;

  /* Blue: the second team colour, the upcoming badge, a four, the batting
     tint on the squads table. Informational, not a verdict. */
  --ccp-info:        #1d4ed8;
  --ccp-info-light:  #3b82f6;
  --ccp-info-soft:   #dbeafe;
  --ccp-info-softer: #eff6ff;
  --ccp-info-line:   #bfdbfe;

  /* Green: better for the batting side; also the LIVE dot. */
  --ccp-good:        #16a34a;
  --ccp-good-strong: #15803d;
  --ccp-good-deep:   #14532d;
  --ccp-good-soft:   #dcfce7;
  --ccp-good-softer: #f0fdf4;
  --ccp-good-line:   #a7f3d0;

  /* Red: worse for the batting side; a wicket; OUT. */
  --ccp-bad:         #dc2626;
  --ccp-bad-strong:  #b91c1c;
  --ccp-bad-deep:    #7f1d1d;
  --ccp-bad-soft:    #fee2e2;
  --ccp-bad-softer:  #fef2f2;
  --ccp-bad-line:    #fecaca;

  /* Amber: a warning, a chase note, the fantasy star, the second team. */
  --ccp-warn:        #d97706;
  --ccp-warn-strong: #b45309;
  --ccp-warn-deep:   #92400e;
  --ccp-warn-soft:   #fef3c7;
  --ccp-warn-softer: #fffbeb;
  --ccp-warn-line:   #fde68a;
  --ccp-star:        #f59e0b;

  /* Shape */
  --ccp-radius:      12px;
  --ccp-radius-sm:   8px;
  --ccp-shadow:      0 1px 2px rgba(17,24,39,.05);
  --ccp-shadow-hover:0 10px 24px rgba(17,24,39,.10);
  --ccp-shadow-pop:  0 20px 50px rgba(15,23,42,.25);

  /* Type */
  --ccp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── B. Base ────────────────────────────────────────────────────────────── */
/* The reset style.css gave every page. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ccp-font); font-size: 15px; line-height: 1.55;
  color: var(--ccp-text); background: var(--ccp-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ccp-accent); }
h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.01em; }
button, input, select { font-family: inherit; }

/* The chrome: a slim white top bar, the page frame, a quiet footer.
   Markup in ccp/_site.html. */
.ccp-top {
  background: var(--ccp-surface); border-bottom: 1px solid var(--ccp-line);
  position: sticky; top: 0; z-index: 50;
}
.ccp-top-in {
  max-width: 1100px; margin: 0 auto; padding: 0 20px; height: 58px;
  display: flex; align-items: center; gap: 22px;
}
.ccp-brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--ccp-text); font-weight: 800; font-size: 19px; letter-spacing: -.02em;
}
.ccp-brand-mark { width: 32px; height: 32px; display: block; }
/* A national side's flag before its name (2026-09-20): the card, and the
   big title on every per-match page. 4:3, a hairline so a white stripe
   still has an edge. */
.ccp-flag {
  width: 20px; height: 15px; border-radius: 2px; object-fit: cover;
  box-shadow: 0 0 0 1px var(--ccp-line); vertical-align: -2px; margin-right: 7px;
}
.ccp-mh-title .ccp-flag { width: 28px; height: 21px; vertical-align: -2px; margin-right: 9px; }
.ccp-nav { display: flex; gap: 4px; }
.ccp-nav a {
  padding: 7px 12px; border-radius: 9px; font-weight: 600; font-size: 14px;
  color: var(--ccp-muted); text-decoration: none; white-space: nowrap;
}
.ccp-nav a:hover { color: var(--ccp-text); background: var(--ccp-surface-3); }
.ccp-nav a.is-on { background: var(--ccp-accent-soft); color: var(--ccp-accent); }

.ccp-page { max-width: 1100px; margin: 0 auto; padding: 24px 20px 48px; }

.ccp-foot {
  border-top: 1px solid var(--ccp-line); margin-top: 24px;
}
.ccp-foot-in {
  max-width: 1100px; margin: 0 auto; padding: 18px 20px 28px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  color: var(--ccp-faint); font-size: 13px;
}
.ccp-foot a { color: var(--ccp-muted); text-decoration: none; }
.ccp-foot a:hover { color: var(--ccp-accent); text-decoration: underline; }

@media (max-width: 640px) {
  .ccp-top-in { height: 52px; gap: 12px; padding: 0 14px; }
  /* The word stays beside the mark on a phone (asked for 2026-09-20
     evening; the restyle had hidden it to make room for a nav that is
     now one item). */
  .ccp-nav a { padding: 6px 10px; font-size: 13.5px; }
  .ccp-page { padding: 16px 14px 40px; }
  .ccp-foot-in { padding: 14px; }
}

/* The table defaults CCP inherited from style.css. Every CCP table sat on
   these - the full width, the collapsed borders, the cell padding, the
   rule under each row, the hover - and several (.ccp-sc-table, .ccp-bowl-t,
   .ccp-os-tbl) explicitly shed the margin, shadow and radius, so those are
   kept here for the ones that did not. ONE CHANGE from the site's: the
   thead is no longer the site's solid blue; it is the light head the
   scorecard and squads tables already gave themselves, so every table on
   the site reads the same way. */
table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  background: var(--ccp-surface); border-radius: var(--ccp-radius-sm);
  overflow: hidden; box-shadow: var(--ccp-shadow);
}
thead { background: var(--ccp-surface-2); color: var(--ccp-text-3); }
th, td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--ccp-line); }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--ccp-surface-2); }

/* .table-responsive: base.html's script wraps every bare <table> in one
   (ccp/_site.html carries the same script) and it scrolls sideways on a
   phone with a shadow at whichever edge has more. From style.css. */
.table-responsive {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  position: relative; border-radius: var(--ccp-radius-sm);
}
/* The scroll box (2026-09-20 evening): ccp/_site.html's script wraps every
   .table-responsive and .ccp-os-tblwrap in one and toggles these classes.
   A fade at whichever edge has more, and a "Swipe" pill until the first
   scroll - the old shadows appeared only AFTER a scroll, so an unscrolled
   table on a phone gave no sign that columns were cut off. The box is a
   separate element because a scroller's own pseudo-elements scroll away
   with its content. */
.ccp-scrollbox { position: relative; }
.ccp-scrollbox::before, .ccp-scrollbox::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34px;
  pointer-events: none; z-index: 30; opacity: 0; transition: opacity .2s;
}
.ccp-scrollbox::before { left: 0; background: linear-gradient(to right, rgba(24,26,32,.14), rgba(24,26,32,0)); }
.ccp-scrollbox::after { right: 0; background: linear-gradient(to left, rgba(24,26,32,.16), rgba(24,26,32,0)); }
.ccp-scrollbox.has-more-left::before, .ccp-scrollbox.has-more-right::after { opacity: 1; }
.ccp-swipe-hint {
  display: none; position: absolute; right: 8px; bottom: 8px; z-index: 31;
  padding: .25rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--ccp-accent);
  box-shadow: 0 2px 8px rgba(24,26,32,.25); pointer-events: none;
  animation: ccp-swipe-nudge 1.4s ease-in-out infinite;
}
.ccp-swipe-hint i { font-size: .8em; }
.ccp-scrollbox.has-more-right:not(.has-scrolled) > .ccp-swipe-hint { display: inline-flex; align-items: center; gap: .3rem; }
@keyframes ccp-swipe-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@media (prefers-reduced-motion: reduce) { .ccp-swipe-hint { animation: none; } }
@media (max-width: 768px) {
  /* mobile-fixes.css gave every cell this under 768px; the wide CCP tables
     were checked at 375px with it on, so it stays. */
  th, td { padding: .5rem .4rem; white-space: nowrap; }
  .table-responsive { border: 1px solid var(--ccp-line); margin-bottom: .5rem; }
}

/* The browser's own [hidden] loses to any author rule that sets display
   (CLAUDE.md section 7). This is the general guard; the per-class ones
   below stay as belt and braces where a rule sets display explicitly. */
[hidden] { display: none !important; }

/* ── C. The pages ───────────────────────────────────────────────────────── */
/* ── Page shell ─────────────────────────────────────────────────────────── */
.ccp-wrap { max-width: 1100px; margin: 0 auto; }

.ccp-back { margin-bottom: 1rem; }
.ccp-back a {
  color: var(--ccp-muted); text-decoration: none; font-weight: 600; font-size: .9rem;
  display: inline-flex; align-items: center; gap: .4rem; opacity: .9;
}
.ccp-back a:hover { opacity: 1; color: var(--ccp-accent); }

.ccp-panel {
  background: var(--ccp-surface); border: 1px solid var(--ccp-line);
  border-radius: var(--ccp-radius); box-shadow: var(--ccp-shadow);
  padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
.ccp-panel h2 {
  margin: 0; color: var(--ccp-accent); font-size: 1.3rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.ccp-panel .ccp-sub { color: var(--ccp-muted); font-weight: 400; font-size: .9rem; }

/* ── The match board (the landing page) and the match card ──────────────
   Rebuilt 2026-09-20 for 2for22. The card is ccp/_match_card.html, shared
   with the Fantasy Assist list; data-status carries its shape. */
.ccp-board-head { margin: .25rem 0 1.25rem; }
.ccp-board-head h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.ccp-lede { color: var(--ccp-muted); margin-top: .2rem; font-size: .95rem; }

.ccp-board-group { margin-top: 1.6rem; }
.ccp-board-group:first-of-type { margin-top: .5rem; }
.ccp-board-h {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ccp-muted); display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem;
}
.ccp-board-live .ccp-board-h { color: var(--ccp-good-strong); }
.ccp-board-n {
  background: var(--ccp-surface-3); color: var(--ccp-muted); border-radius: 999px;
  padding: 0 .55rem; font-size: .72rem; letter-spacing: 0; line-height: 1.5;
}
.ccp-board-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
/* The Fantasy Assist list still stacks its cards in one column, each with
   its pill beneath. */
.ccp-match-list { max-width: 760px; margin: 1.25rem auto 0; display: grid; gap: 1rem; }

.ccp-match-card {
  display: block; background: var(--ccp-surface); border: 1px solid var(--ccp-line);
  border-radius: var(--ccp-radius); padding: 1rem 1.2rem .9rem;
  text-decoration: none; color: inherit; box-shadow: var(--ccp-shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ccp-match-card:hover {
  transform: translateY(-2px); box-shadow: var(--ccp-shadow-hover);
  border-color: var(--ccp-line-strong);
}
.ccp-match-card[data-status="live"] {
  border-color: var(--ccp-good);
  box-shadow: 0 0 0 3px var(--ccp-good-softer), var(--ccp-shadow);
}
.ccp-match-card[data-status="live"]:hover { box-shadow: 0 0 0 3px var(--ccp-good-softer), var(--ccp-shadow-hover); }

.ccp-match-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.ccp-comp {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ccp-muted); font-weight: 600;
}

/* The two teams as ONE grid (2026-09-20 evening): flag | name | score |
   overs. The score column is left-aligned so the leading digits line up
   (126/2 over 124/10); the overs column is right-aligned so the card keeps
   a straight right edge. An empty flag slot costs no width, so a card
   with no flags reads exactly as before. */
.ccp-teams {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline; row-gap: .45rem; padding: .2rem 0;
}
.ccp-team-row { display: contents; }
.ccp-teams .ccp-flag { margin-right: 11px; }
.ccp-team-name { font-weight: 600; color: var(--ccp-text); font-size: 1.1rem; min-width: 0; padding-right: 1rem; }
.ccp-team-score {
  font-weight: 800; color: var(--ccp-text); font-size: 1.2rem; letter-spacing: -.01em;
  white-space: nowrap; font-variant-numeric: tabular-nums; text-align: left;
}
.ccp-team-overs {
  color: var(--ccp-muted); font-size: .8rem; font-weight: 500; padding-left: .4rem;
  white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right;
}
.ccp-team-tbd { grid-column: 3 / 5; text-align: right; color: var(--ccp-faintest); font-weight: 500; }

.ccp-match-foot {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--ccp-line);
  font-size: .88rem;
}
.ccp-note { display: block; min-width: 0; font-weight: 600; color: var(--ccp-text); }
.ccp-note-time { color: var(--ccp-info); }
.ccp-countdown { font-weight: 700; }
.ccp-startdate { display: block; color: var(--ccp-faint); font-weight: 400; font-size: .88em; margin-top: .1rem; }
.ccp-since { font-weight: 500; }
.ccp-note-live { color: var(--ccp-text); }
/* Finished matches: the result reads as a fact, not as a call to look now. */
.ccp-note-result { color: var(--ccp-text); }
.ccp-open { color: var(--ccp-accent); font-weight: 600; white-space: nowrap; flex-shrink: 0; font-size: .85rem; }
.ccp-open i { font-size: .8em; margin-left: .15rem; transition: transform .15s; }
.ccp-match-card:hover .ccp-open i { transform: translateX(2px); }

@media (max-width: 640px) {
  .ccp-board-grid { grid-template-columns: 1fr; }
  .ccp-board-head h1 { font-size: 1.5rem; }
  .ccp-team-name { font-size: 1.02rem; }
  .ccp-match-foot { flex-wrap: wrap; }
}

/* ── Status badges ──────────────────────────────────────────────────────── */
.ccp-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px;
}
.ccp-badge-live { background: var(--ccp-good-soft); color: var(--ccp-good-strong); }
.ccp-badge-upcoming { background: var(--ccp-info-soft); color: var(--ccp-info); }
.ccp-badge-result { background: var(--ccp-line); color: var(--ccp-text-2); }
/* A badge served `hidden` MUST stay hidden: inline-flex above outranks the
   browser's own [hidden] rule, so the state and reduced-overs badges showed
   on every match ("Reduced to 20 overs") for the hour v608 was up without
   this. Same trap as .ccp-sc-innings and .ccp-os-over below. */
.ccp-badge[hidden] { display: none !important; }
.ccp-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ccp-good);
  animation: ccp-pulse 1.3s ease-in-out infinite;
}
@keyframes ccp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ── Empty state ────────────────────────────────────────────────────────── */
.ccp-empty {
  max-width: 640px; margin: 2rem auto; background: var(--ccp-surface);
  border: 1px solid var(--ccp-line); border-radius: var(--ccp-radius);
  padding: 2rem; text-align: center; color: var(--ccp-muted);
}
.ccp-empty i { font-size: 2rem; color: var(--ccp-faintest); display: block; margin-bottom: .75rem; }
.ccp-empty-sub { margin-top: .5rem; color: var(--ccp-text-2); font-weight: 600; }

/* ── Card grid (shared by the hub and the per-match screens) ────────────── */
.ccp-card-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.ccp-card {
  padding: 1.2rem 1.25rem; border-radius: var(--ccp-radius);
  background: var(--ccp-surface); box-shadow: var(--ccp-shadow);
  border: 1px solid var(--ccp-line); text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex; flex-direction: column; gap: .5rem; min-height: 160px;
}
a.ccp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ccp-shadow-hover);
  border-color: var(--ccp-line-strong);
}
.ccp-card.is-placeholder { background: var(--ccp-surface-2); border-style: dashed; box-shadow: none; cursor: default; }
.ccp-card-icon {
  width: 42px; height: 42px; border-radius: var(--ccp-radius-sm);
  background: var(--ccp-accent-soft); color: var(--ccp-accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.ccp-card.is-placeholder .ccp-card-icon { background: var(--ccp-surface-3); color: var(--ccp-faint); }
.ccp-card h3 { margin: 0; font-size: 1.1rem; color: var(--ccp-text); }
.ccp-card.is-placeholder h3 { color: var(--ccp-muted); }
.ccp-card p { margin: 0; color: var(--ccp-muted); font-size: .9rem; line-height: 1.4; flex: 1; }
.ccp-card-arrow { color: var(--ccp-accent); font-weight: 600; font-size: .9rem; margin-top: .25rem; }
.ccp-card-soon {
  color: var(--ccp-faint); font-weight: 600; font-size: .8rem; margin-top: .25rem;
  text-transform: uppercase; letter-spacing: .05em;
}

@media (max-width: 640px) {
  .ccp-card-grid { grid-template-columns: 1fr; }
}

/* ── Live scorecard ─────────────────────────────────────────────────────── */
.ccp-live-head { display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:1rem; }

/* The match head on the live screen (2026-09-20): the landing-page card's
   shape, bigger. .ccp-live-head above is what the other five match screens
   still use until their own restyle pass. */
.ccp-mh-panel { padding-top: 1rem; }
.ccp-mh { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem 1.5rem; flex-wrap: wrap; }
.ccp-mh-main { min-width: 0; flex: 1 1 18rem; }
.ccp-mh-top { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .6rem; margin-bottom: .45rem; }
.ccp-mh-top .ccp-comp { flex: 0 1 auto; white-space: normal; }
.ccp-mh-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; color: var(--ccp-text); line-height: 1.2; }
.ccp-mh-v { color: var(--ccp-faint); font-weight: 500; margin: 0 .1rem; }
.ccp-mh-score { text-align: right; flex-shrink: 0; }
/* The chase line or the result under the live screen's head. */
.ccp-mh-panel > .ccp-note { margin-top: .6rem; }
/* The per-match PAGES' head (ccp/_match_head.html): what the page is, and
   the start time at the right. */
.ccp-mh-label { font-size: 1.05rem; font-weight: 700; color: var(--ccp-text-2); line-height: 1.3; margin-top: .35rem; }
.ccp-mh-side { flex-shrink: 0; text-align: right; padding-top: .15rem; }
.ccp-mh-date { font-size: .85rem; font-weight: 500; color: var(--ccp-muted); white-space: nowrap; }
.ccp-mh-date i { color: var(--ccp-faint); margin-right: .2rem; }
.ccp-mh-note { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--ccp-line); font-size: .95rem; }
.ccp-mh-note .ccp-startdate { display: inline; margin-left: .4rem; }
.ccp-score { font-size: 2.6rem; font-weight: 800; color: var(--ccp-accent); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ccp-score-overs { font-size: .85rem; color: var(--ccp-muted); font-weight: 500; margin-top: .3rem; }
@media (max-width: 640px) {
  .ccp-mh { flex-wrap: nowrap; align-items: flex-end; }
  .ccp-mh-title { font-size: 1.3rem; }
  .ccp-score { font-size: 2.1rem; }
  /* The date goes under the label on a phone rather than squeezing the title. */
  .ccp-mh:has(.ccp-mh-side) { flex-wrap: wrap; }
  .ccp-mh-side { text-align: left; padding-top: 0; margin-top: -.25rem; }
}
.ccp-batting-team { font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ccp-muted); font-weight:600; }

/* Numbers block: projection and win probability */
.ccp-metrics { display:grid; gap:1rem; margin-top:1rem;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.ccp-metric { background:var(--ccp-surface-2); border:1px solid var(--ccp-line); border-radius:10px;
  padding:.9rem 1rem; }
.ccp-metric-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ccp-muted); font-weight:700; }
.ccp-metric-value { font-size:1.75rem; font-weight:800; color:var(--ccp-text); line-height:1.2; }
.ccp-metric-range { font-size:.85rem; color:var(--ccp-muted); margin-top:.1rem; }
/* Change since the previous completed over sits BENEATH the block. */
.ccp-metric-delta { font-size:.8rem; font-weight:700; margin-top:.35rem;
  padding-top:.35rem; border-top:1px dashed var(--ccp-line); color:var(--ccp-muted); }
.ccp-up { color:var(--ccp-good); }
.ccp-down { color:var(--ccp-bad); }
.ccp-flat { color:var(--ccp-faint); }

/* Current partnership */
.ccp-stand { margin-top:1.25rem; background: var(--ccp-surface); border:1px solid var(--ccp-line);
  border-radius:10px; padding:1rem 1.1rem; }
.ccp-stand-top { display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; flex-wrap:wrap; margin-bottom:.6rem; }
.ccp-stand-total { font-weight:800; color:var(--ccp-accent); font-size:1.15rem; }
.ccp-stand-batters { display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
.ccp-stand-batter { display:flex; justify-content:space-between; align-items:baseline;
  gap:.75rem; padding:.45rem .6rem; background:var(--ccp-surface-2); border-radius:8px; }
.ccp-stand-name { font-weight:600; color:var(--ccp-text); min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ccp-stand-fig { font-weight:700; color:var(--ccp-text); flex-shrink:0; }
.ccp-stand-extras { font-size:.82rem; color:var(--ccp-muted); margin-top:.5rem; }
.ccp-approx { font-size:.78rem; color:var(--ccp-warn-strong); margin-top:.4rem; }

/* Earlier partnerships, behind a toggle */
.ccp-toggle { background:none; border:1px solid var(--ccp-line-strong); color:var(--ccp-text-3);
  padding:.45rem .85rem; border-radius:8px; font-size:.85rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; }
.ccp-toggle:hover { background:var(--ccp-surface-3); border-color:var(--ccp-faint); }
.ccp-stand-list { margin-top:.75rem; display:none; }
.ccp-stand-list.is-open { display:block; }
.ccp-stand-row { display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem .6rem; border-bottom:1px solid var(--ccp-surface-3); font-size:.9rem; }
.ccp-stand-row:last-child { border-bottom:none; }
.ccp-stand-row-n { color:var(--ccp-muted); font-weight:600; flex-shrink:0; min-width:2.5rem; }
.ccp-stand-row-who { flex:1; min-width:0; color:var(--ccp-text); }
.ccp-stand-row-fig { font-weight:700; color:var(--ccp-accent); flex-shrink:0; }

/* Crease + yet to bat */
.ccp-section-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ccp-muted); font-weight:700; margin:1.25rem 0 .5rem; }
.ccp-tobat { display:flex; flex-wrap:wrap; gap:.4rem; }
.ccp-tobat span { background:var(--ccp-surface-3); color:var(--ccp-text-3); border-radius:999px;
  padding:.25rem .7rem; font-size:.85rem; }
.ccp-tobat-none { color:var(--ccp-faint); font-style:italic; font-size:.9rem; }

/* Sits at the TOP of the live panel since 2026-09-07, not at its foot. */
.ccp-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:.25rem 0 1rem; }
.ccp-action { background:var(--ccp-surface); color:var(--ccp-accent); text-decoration:none;
  border:1px solid var(--ccp-accent-line);
  padding:.5rem .9rem; border-radius:var(--ccp-radius-sm); font-size:.88rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem; }
.ccp-action:hover { background:var(--ccp-accent-soft); border-color:var(--ccp-accent); }
.ccp-action.is-disabled { background:var(--ccp-line); color:var(--ccp-faint); cursor:default; }

/* Brief highlight when a number changes on refresh. */
@keyframes ccp-flash { 0% { background:var(--ccp-warn-soft); } 100% { background:transparent; } }
.ccp-changed { animation:ccp-flash 1.2s ease-out; }

/* ── At the crease, and the bowler ──────────────────────────────────────────
   Appended for Requirement A. .ccp-crease-figs is shared by both panels so a
   batter's row and a bowler's row line up on the same rhythm.
   Remember to bump ?v= in templates/ccp/_base.html.
   ───────────────────────────────────────────────────────────────────────── */
.ccp-crease { display:grid; gap:.6rem; }
.ccp-crease-row { background:var(--ccp-surface-2); border:1px solid var(--ccp-line); border-radius:10px;
  padding:.65rem .8rem; }
.ccp-crease-top { display:flex; justify-content:space-between; align-items:baseline;
  gap:.75rem; flex-wrap:wrap; }
.ccp-crease-name { font-weight:600; color:var(--ccp-text); min-width:0; }
.ccp-crease-figs { display:flex; gap:1rem; flex-shrink:0; }

.ccp-fig { text-align:right; }
.ccp-fig-v { font-weight:700; color:var(--ccp-text); font-size:.95rem; line-height:1.1; }
.ccp-fig-l { font-size:.62rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ccp-faint); font-weight:700; }

.ccp-bowler { background: var(--ccp-surface); border:1px solid var(--ccp-line); border-radius:10px;
  padding:.65rem .8rem; display:flex; justify-content:space-between;
  align-items:baseline; gap:.75rem; flex-wrap:wrap; }
.ccp-bowler-name { font-weight:600; color:var(--ccp-text); min-width:0; }

/* On a narrow screen the figures wrap under the name rather than squeezing it. */
@media (max-width: 480px) {
  .ccp-crease-figs { gap:.75rem; width:100%; justify-content:space-between; }
  .ccp-fig { text-align:left; }
}

/* ── Tabs: Live | Scorecard ─────────────────────────────────────────────── */
.ccp-tabs { display:flex; gap:.15rem; border-bottom:1px solid var(--ccp-line);
  margin:1rem 0 1.1rem; flex-wrap:wrap; }
.ccp-tab { background:none; border:none; text-decoration:none; cursor:pointer;
  padding:.55rem .85rem; font-size:.9rem; font-weight:600; color:var(--ccp-muted);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.45rem; border-radius: 6px 6px 0 0; }
.ccp-tab i { font-size: .85em; opacity: .8; }
.ccp-tab:hover { color:var(--ccp-text); background: var(--ccp-surface-2); }
.ccp-tab.is-active { color:var(--ccp-accent); border-bottom-color:var(--ccp-accent); }
.ccp-tab.is-active i { opacity: 1; }
/* On a phone the bar is one strip that scrolls sideways (2026-09-20) rather
   than seven tabs over four rows; the tab cut off at the right edge is the
   sign there are more. The scrollbar is hidden, the touch scroll is native. */
@media (max-width: 640px) {
  /* Every tab visible, in as many rows as it takes (2026-09-20 evening;
     the one strip that scrolled sideways hid the tabs past the edge and
     nothing said so). Icons go and the padding tightens so eight tabs
     make two or three rows on a 375px phone. */
  .ccp-tabs { flex-wrap: wrap; gap: 0 .1rem; }
  .ccp-tab { padding: .45rem .5rem; font-size: .8rem; }
  .ccp-tab i { display: none; }
}
.ccp-tabpanel[hidden] { display:none; }

/* ── Standard scorecard ─────────────────────────────────────────────────── */
.ccp-sc-innings { margin-bottom:1.75rem; }
.ccp-sc-innings:last-child { margin-bottom:0; }
.ccp-sc-head { display:flex; justify-content:space-between; align-items:flex-end;
  gap:1rem; flex-wrap:wrap; padding-bottom:.6rem; margin-bottom:.75rem; }
.ccp-sc-tag { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ccp-faint); font-weight:700; }
.ccp-sc-team { margin:.15rem 0 0; font-size:1.2rem; font-weight:800; letter-spacing:-.01em; color:var(--ccp-text); }
.ccp-sc-score { font-size:1.35rem; font-weight:800; color:var(--ccp-accent); font-variant-numeric:tabular-nums; }
.ccp-sc-overs { font-size:.85rem; font-weight:500; color:var(--ccp-muted); }

/* The two tables wear the card's border and radius (2026-09-20); the
   wrapper IS the .table-responsive, so the phone border the base rules give
   that class is turned off here to avoid a double edge. */
/* overflow-x: auto, NOT overflow: hidden (fixed 2026-09-20 evening): this
   rule came after .table-responsive's and overrode it, so on a phone the
   results table and the scorecard CLIPPED and could not be touch-scrolled
   at all - a script could still move them, which is why it passed every
   driven check. overflow-y: hidden keeps the corners clipped. */
.ccp-sc-wrap { margin-bottom:1rem; border:1px solid var(--ccp-line); border-radius:var(--ccp-radius-sm);
  overflow-x:auto; overflow-y:hidden; background:var(--ccp-surface); }
@media (max-width: 768px) { .ccp-sc-wrap.table-responsive { border:1px solid var(--ccp-line); margin-bottom:1rem; } }
.ccp-sc-table { width:100%; border-collapse:collapse; margin:0;
  background:transparent; box-shadow:none; border-radius:0; font-variant-numeric:tabular-nums; }
.ccp-sc-table th, .ccp-sc-table td { padding:.55rem .6rem; text-align:left;
  border-bottom:1px solid var(--ccp-line); vertical-align:top; }
.ccp-sc-table thead th { background:var(--ccp-surface-2); color:var(--ccp-muted); font-weight:600;
  font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.ccp-sc-table tbody tr:last-child td { border-bottom:none; }
.ccp-sc-table tbody tr:hover { background:var(--ccp-surface-2); }
.ccp-sc-table .ccp-n { text-align:right; white-space:nowrap; }
/* The name cell wraps (the dismissal beneath it can be long); everything
   else stays on one line. */
.ccp-sc-player { font-weight:600; color:var(--ccp-text); white-space:normal; min-width:9rem; }
.ccp-sc-out { display:block; color:var(--ccp-muted); font-style:normal; font-weight:400;
  font-size:.8rem; line-height:1.3; margin-top:.1rem; }
.ccp-sc-runs { color:var(--ccp-accent); }
.ccp-sc-table tfoot td { border-top:1px solid var(--ccp-line); border-bottom:none;
  background:var(--ccp-surface-2); color:var(--ccp-text-3); }
.ccp-sc-table tfoot tr:first-child td { border-top:2px solid var(--ccp-line); }
.ccp-sc-total td { color:var(--ccp-text); }
.ccp-sc-total td .ccp-sc-out { display:inline; margin-left:.35rem; }
@media (max-width: 480px) {
  .ccp-sc-table th, .ccp-sc-table td { padding:.5rem .35rem; }
  .ccp-sc-table th:first-child, .ccp-sc-table td:first-child { padding-left:.6rem; }
  .ccp-sc-table th:last-child, .ccp-sc-table td:last-child { padding-right:.6rem; }
  .ccp-sc-player { min-width:7.5rem; font-size:.92rem; }
}
.ccp-sc-now { font-size:.62rem; text-transform:uppercase; letter-spacing:.06em;
  font-weight:700; color:var(--ccp-warn-strong); background:var(--ccp-warn-soft); border-radius:999px;
  padding:.1rem .45rem; margin-left:.4rem; }
.ccp-sc-empty { color:var(--ccp-faint); font-style:italic; font-size:.9rem; margin:.4rem 0 1rem; }

/* ── Fall of wickets ────────────────────────────────────────────────────── */
.ccp-fow { display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); }
.ccp-fow-pill { background:var(--ccp-surface-2); border:1px solid var(--ccp-line); border-radius:8px;
  padding:.5rem .65rem; }
.ccp-fow-score { font-weight:800; color:var(--ccp-accent); font-size:.95rem; }
.ccp-fow-meta { display:flex; justify-content:space-between; gap:.5rem;
  font-size:.8rem; color:var(--ccp-muted); margin-top:.15rem; }
.ccp-fow-ov { flex-shrink:0; }

/* ── Ball strips and the last-two-overs boxes ───────────────────────────── */
.ccp-strip { display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;
  margin-top:.5rem; }
.ccp-strip-l { font-size:.62rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ccp-faint); font-weight:700; margin-right:.15rem; }
.ccp-ball { min-width:1.5rem; height:1.5rem; padding:0 .35rem; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.74rem; font-weight:700; background:var(--ccp-line); color:var(--ccp-text-2);
  border:1px solid var(--ccp-faintest); }
.ccp-ball-dot { background:var(--ccp-surface-3); color:var(--ccp-faint); }
.ccp-ball-4   { background:var(--ccp-info-soft); color:var(--ccp-info); border-color:var(--ccp-info-line); }
.ccp-ball-6   { background:var(--ccp-good-soft); color:var(--ccp-good-strong); border-color:var(--ccp-good-line); }
.ccp-ball-w   { background:var(--ccp-bad); color:#fff;    border-color:var(--ccp-bad); }
.ccp-ball-x   { background:var(--ccp-warn-soft); color:var(--ccp-warn-deep); border-color:var(--ccp-warn-line); }

.ccp-overs { display:grid; gap:1rem; margin-top:.6rem;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); }
.ccp-over { border:1px solid var(--ccp-line); border-radius:10px; background: var(--ccp-surface);
  overflow:hidden; display:flex; flex-direction:column; }
.ccp-over-head { display:flex; justify-content:space-between; align-items:baseline;
  gap:.5rem; padding:.55rem .8rem; background:var(--ccp-surface-2); border-bottom:1px solid var(--ccp-line); }
.ccp-over-n { font-weight:800; color:var(--ccp-text); font-size:.95rem; }
.ccp-over-bowler { font-size:.8rem; color:var(--ccp-muted); text-align:right; }
.ccp-over-body { padding:.2rem .35rem; flex:1; }
.ccp-over-row { display:grid; grid-template-columns:2.6rem 1fr auto; gap:.5rem;
  align-items:center; padding:.3rem .45rem; border-bottom:1px solid var(--ccp-surface-3); }
.ccp-over-row:last-child { border-bottom:none; }
.ccp-over-bn { color:var(--ccp-faint); font-weight:600; font-size:.78rem; }
.ccp-over-who { color:var(--ccp-text); font-size:.88rem; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ccp-over-who small { color:var(--ccp-faint); font-size:.75rem; }
.ccp-over-res { display:flex; align-items:center; gap:.4rem; justify-self:end; }
.ccp-over-res em { font-style:normal; color:var(--ccp-muted); font-size:.76rem; }
.ccp-over-foot { display:flex; justify-content:space-between; gap:.5rem; flex-wrap:wrap;
  padding:.5rem .8rem; background:var(--ccp-surface-2); border-top:1px solid var(--ccp-line);
  font-size:.82rem; color:var(--ccp-muted); }
.ccp-over-foot b { color:var(--ccp-text); font-weight:700; }

/* ── Squads card ────────────────────────────────────────────────────────── */
.ccp-controls { display:flex; flex-wrap:wrap; gap:1.25rem; margin:1.1rem 0 .75rem; }
.ccp-control { display:flex; flex-direction:column; gap:.35rem; }
.ccp-control-label { font-size:.66rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ccp-faint); font-weight:700; }
.ccp-seg { display:inline-flex; border:1px solid var(--ccp-line-strong); border-radius:var(--ccp-radius-sm);
  overflow:hidden; background: var(--ccp-surface); }
.ccp-seg-btn { padding:.4rem .8rem; font-size:.85rem; font-weight:600; color:var(--ccp-text-3);
  text-decoration:none; border-right:1px solid var(--ccp-line); white-space:nowrap; }
.ccp-seg-btn:last-child { border-right:none; }
.ccp-seg-btn:hover { background:var(--ccp-surface-3); }
.ccp-seg-btn.is-on { background:var(--ccp-accent-soft); color:var(--ccp-accent); }

.ccp-caption { color:var(--ccp-muted); font-size:.85rem; line-height:1.5; margin:.4rem 0 1rem; }
.ccp-dash { color:var(--ccp-faintest); }

.ccp-sq-wrap { margin-top:.5rem; border:1px solid var(--ccp-line); border-radius:var(--ccp-radius-sm);
  overflow-x:auto; overflow-y:hidden; background:var(--ccp-surface); }   /* same fix as .ccp-sc-wrap */
@media (max-width: 768px) { .ccp-sq-wrap.table-responsive { border:1px solid var(--ccp-line); } }
.ccp-sq-table { width:100%; border-collapse:collapse; margin:0; border-radius:0;
  background:transparent; box-shadow:none; font-size:.88rem; font-variant-numeric:tabular-nums; }
.ccp-sq-table th, .ccp-sq-table td { padding:.5rem .55rem; text-align:left;
  border-bottom:1px solid var(--ccp-line); white-space:nowrap; }
.ccp-sq-table tbody tr:last-child td { border-bottom:none; }
.ccp-sq-table thead th { background:var(--ccp-surface-2); color:var(--ccp-muted); font-weight:600;
  font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  cursor:pointer; user-select:none; position:relative; }
.ccp-sq-table thead th[data-sort]:hover { background:var(--ccp-surface-3); color:var(--ccp-text); }
.ccp-sq-table thead th.is-asc::after  { content:' \25B2'; font-size:.6em; }
.ccp-sq-table thead th.is-desc::after { content:' \25BC'; font-size:.6em; }
.ccp-sq-table .ccp-n { text-align:right; }
.ccp-sq-table tbody tr:hover { background:var(--ccp-surface-2); }

/* The two disciplines get their own tint so the eye can find the split. */
.ccp-sq-group th { text-align:center; font-size:.68rem; cursor:default; }
.ccp-sq-bat  { background:var(--ccp-info-softer) !important; color:var(--ccp-info) !important; }
.ccp-sq-bowl { background:var(--ccp-good-softer) !important; color:var(--ccp-good-strong) !important; }
.ccp-sq-split { border-left:2px solid var(--ccp-line); }

/* The name column stays put while the figures scroll sideways. */
.ccp-sq-name { position:sticky; left:0; z-index:2; background: var(--ccp-surface);
  font-weight:600; color:var(--ccp-text); min-width:9.5rem; white-space:nowrap; }
.ccp-sq-table thead .ccp-sq-name { background:var(--ccp-surface-2); z-index:3; }
.ccp-sq-table tbody tr:hover .ccp-sq-name { background:var(--ccp-surface-2); }
.ccp-sq-name a { color:inherit; text-decoration:none; }
.ccp-sq-name a:hover { color:var(--ccp-accent); text-decoration:underline; }

.ccp-sq-key { font-weight:700; color:var(--ccp-text); }
.ccp-sq-xi .ccp-sq-name { border-left:3px solid var(--ccp-accent); }
.ccp-sq-badge { font-size:.6rem; font-weight:800; letter-spacing:.06em;
  background:var(--ccp-info-soft); color:var(--ccp-info); border-radius:4px; padding:.1rem .3rem;
  margin-left:.35rem; vertical-align:middle; }

@media (max-width: 640px) {
  .ccp-controls { gap:.9rem; }
  .ccp-sq-table { font-size:.82rem; }
  .ccp-sq-name { min-width:7.5rem; }
}

/* A segmented control can hold buttons as well as links (team selection is
   client-side, the others are real links), so reset the button chrome. */
button.ccp-seg-btn { background:none; border:none; border-right:1px solid var(--ccp-line);
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; }
button.ccp-seg-btn:last-child { border-right:none; }
button.ccp-seg-btn.is-on { background:var(--ccp-accent-soft); color:var(--ccp-accent); }

/* Tabs that navigate to another page rather than switching a panel. */
.ccp-tab-link { cursor:pointer; }
span.ccp-tab-link { cursor:default; }

/* ── Clickable forecast blocks, and the chart popup ─────────────────────── */
button.ccp-metric { font:inherit; text-align:left; width:100%; cursor:pointer;
  position:relative; transition:border-color .15s, box-shadow .15s; }
button.ccp-metric:hover { border-color:var(--ccp-accent);
  box-shadow:0 4px 12px rgba(0,0,0,.08); }
button.ccp-metric:focus-visible { outline:2px solid var(--ccp-accent);
  outline-offset:2px; }
.ccp-metric-more { position:absolute; top:.6rem; right:.7rem; color:var(--ccp-faintest);
  font-size:.8rem; }
button.ccp-metric:hover .ccp-metric-more { color:var(--ccp-accent); }

.ccp-modal { position:fixed; inset:0; z-index:200; display:flex;
  align-items:center; justify-content:center; padding:1rem; }
.ccp-modal[hidden] { display:none; }
.ccp-modal-back { position:absolute; inset:0; background:rgba(15,23,42,.55); }
.ccp-modal-box { position:relative; background: var(--ccp-surface); border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.3); width:100%; max-width:820px;
  max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.ccp-modal-head { display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--ccp-line);
  background:var(--ccp-surface-2); }
.ccp-modal-head h3 { margin:0; font-size:1.05rem; color:var(--ccp-accent); }
.ccp-modal-x { background:none; border:none; cursor:pointer; color:var(--ccp-muted);
  font-size:1.1rem; padding:.25rem .4rem; border-radius:6px; }
.ccp-modal-x:hover { background:var(--ccp-line); color:var(--ccp-text); }
.ccp-modal-body { padding:1rem 1.1rem 1.25rem; overflow-y:auto; }
/* A fixed height is required: Chart.js with maintainAspectRatio:false grows
   without bound inside a flex column otherwise. */
.ccp-modal-canvas { position:relative; height:min(58vh, 420px); }
.ccp-modal-canvas canvas { display:block !important; }
.ccp-modal-note { margin:.75rem 0 0; color:var(--ccp-muted); font-size:.82rem;
  text-align:center; }
/* Stop the page behind scrolling while the popup is open. */
body.ccp-modal-open { overflow:hidden; }

@media (max-width: 640px) {
  .ccp-modal { padding:.5rem; }
  .ccp-modal-canvas { height:min(52vh, 320px); }
}

/* ── Live panel: two columns on desktop ─────────────────────────────────── */
.ccp-live-grid { display:grid; gap:1rem 1.5rem; margin-top:.25rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
.ccp-col { min-width:0; }
/* The right-hand column is a flex column since 2026-09-12 so the over story
   at its foot can grow to the foot of the partnership on the left: one box
   filling the space beneath the batting order, which is what was asked for.
   align-items went from start to stretch for the same reason. */
.ccp-col-fill { display:flex; flex-direction:column; }
.ccp-sec-os { flex:1; display:flex; flex-direction:column; }
#ccp-overs-story { flex:1; display:flex; flex-direction:column; }
.ccp-col .ccp-section-title { margin-top:1rem; }
/* The titles sit inside .ccp-sec wrappers since 2026-09-12. */
.ccp-col > .ccp-sec:first-child > .ccp-section-title { margin-top:.75rem; }

/* Half the width means the figures must not shove the name out. */
.ccp-live-grid .ccp-crease-figs { gap:.7rem; }
.ccp-live-grid .ccp-crease-top { gap:.5rem; }

/* Which wicket ended an earlier stand. */
.ccp-stand-out { display:block; color:var(--ccp-faint); font-size:.75rem; margin-top:.1rem; }

/* Bowler figures sit in the over box header. */
.ccp-over-head { align-items:flex-start; }
.ccp-over-figs { gap:.7rem; flex-shrink:0; }
.ccp-over-figs .ccp-fig-v { font-size:.85rem; }
.ccp-over-figs .ccp-fig-l { font-size:.56rem; }

@media (max-width: 900px) {
  .ccp-live-grid { grid-template-columns:1fr; gap:0; }
  .ccp-over-head { flex-wrap:wrap; }
  /* One column: the two columns dissolve and their sections stack, the
     over story straight after the crease rather than at the foot. */
  .ccp-col { display:contents; }
  .ccp-sec-crease { order:1; }
  .ccp-sec-os { order:2; }
  .ccp-sec-stand { order:3; }
  .ccp-sec-tobat { order:4; }
}

/* ── Player popup ────────────────────────────────────────────────────────
   Any player name on the page opens a pair of radars. The affordance is
   deliberately quiet: the ball-by-ball section repeats the same two or three
   names a dozen times, and full link styling turned that panel into a wall of
   blue. A dotted underline reads as "there is more here" without shouting. */
.ccp-player { cursor:pointer; border-bottom:1px dotted var(--ccp-faint); }
.ccp-player:hover, .ccp-player:focus { color:var(--ccp-accent); border-bottom-color:var(--ccp-accent); }
.ccp-player:focus-visible { outline:2px solid var(--ccp-accent); outline-offset:2px; }

.ccp-pmodal-box { max-width:min(980px, 94vw); }
.ccp-pmodal-controls { display:flex; align-items:center; gap:.5rem; margin-bottom:.65rem; }
.ccp-pmodal-controls label { font-size:.8rem; color:var(--ccp-text-3); font-weight:600; }
.ccp-pmodal-controls select { padding:.3rem .5rem; border:1px solid var(--ccp-faintest);
  border-radius:6px; font-size:.85rem; background: var(--ccp-surface); }
.ccp-pmodal-charts { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.ccp-pmodal-chart h4 { margin:0 0 .4rem; font-size:.85rem; color:var(--ccp-text-2); font-weight:600; }
.ccp-pmodal-chart .ccp-modal-canvas { height:min(42vh, 320px); }
.ccp-pmodal-key { margin:.4rem 0 0; font-size:.72rem; color:var(--ccp-muted);
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }

/* The radar's legend marks. The career stats page keeps its own copies inline;
   these are six declarations of colour, not logic, so they are restated rather
   than a stylesheet being shared between two unrelated pages. */
.ccp-pmodal-key .ps-note-dir { font-weight:600; color:var(--ccp-text-3); }
.ccp-pmodal-key .ps-key { display:inline-flex; align-items:center; gap:.25rem; }
.ccp-pmodal-key .ps-key-mark { width:.6rem; height:.6rem; border-radius:50%; display:inline-block; }
.ccp-pmodal-key .ps-key-good { background:var(--ccp-good); }
.ccp-pmodal-key .ps-key-bad  { background:var(--ccp-bad); }

@media (max-width: 760px) {
  .ccp-pmodal-charts { grid-template-columns:1fr; }
  .ccp-pmodal-chart .ccp-modal-canvas { height:min(38vh, 260px); }
}

/* ── Match-ups: the matrix ───────────────────────────────────────────────
   A batter per row, a phase per column, and in each cell the bowlers with a
   real edge, named and shaded, plus a count of the ones that came out even.

   COLOUR IS ALWAYS FROM THE BATTER'S SIDE — green good for him, red bad —
   because a page that switched perspective by row would be unreadable. Five
   steps, and the two extremes are solid while the two inner steps are tinted:
   depth then reads as strength without the text contrast depending on which
   band a name lands in. */
.ccp-mu-matrix { table-layout:auto; }
.ccp-mu-matrix thead th { text-align:left; vertical-align:bottom; }
.ccp-mu-matrix tbody tr:hover { background:var(--ccp-surface-2); }
.ccp-mu-matrix td, .ccp-mu-matrix th { vertical-align:top; }

/* The batter column is frozen, exactly as the squads table freezes its name
   column: four columns fit a phone only by scrolling, and scrolling the row
   label out of view would make the colours meaningless. */
.ccp-mu-bat {
  position:sticky; left:0; z-index:2; background: var(--ccp-surface);
  text-align:left; font-weight:600; color:var(--ccp-text); min-width:8.5rem;
}
.ccp-mu-matrix thead .ccp-mu-bat { background:var(--ccp-surface-3); z-index:3; }
.ccp-mu-matrix tbody tr:hover .ccp-mu-bat { background:var(--ccp-surface-2); }
.ccp-mu-order {
  display:inline-block; min-width:1.1rem; margin-right:.15rem;
  color:var(--ccp-faint); font-weight:700; font-size:.72rem;
}
.ccp-mu-bat .ccp-player { font-weight:600; }
.ccp-mu-chip { display:block; font-size:.68rem; color:var(--ccp-faint); margin-top:.1rem; }

.ccp-mu-cell { min-width:9.5rem; }
.ccp-mu-bowl {
  display:flex; justify-content:space-between; align-items:baseline; gap:.4rem;
  padding:.2rem .45rem; border-radius:6px; margin-bottom:.22rem;
  font-size:.82rem; line-height:1.25;
}
.ccp-mu-bowl:last-child { margin-bottom:0; }
.ccp-mu-bowl .ccp-player { font-weight:600; color:inherit; }
/* A shared chip carries several names; they wrap, the number does not. */
.ccp-mu-bowl-names { min-width:0; }
.ccp-mu-bowl-pct { font-weight:700; font-size:.74rem; opacity:.85; flex-shrink:0; }

/* The five steps. */
.sh-vgood { background:var(--ccp-good-strong); color:#fff; }
.sh-good  { background:var(--ccp-good-soft); color:var(--ccp-good-deep); }
.sh-neutral { background:var(--ccp-surface-3); color:var(--ccp-muted); }
.sh-bad   { background:var(--ccp-bad-soft); color:var(--ccp-bad-deep); }
.sh-vbad  { background:var(--ccp-bad-strong); color:#fff; }

/* An even bowler is NAMED, in the neutral step, and carries no percentage:
   he is inside the bar we set for "not worth calling", and a number beside
   him invites it to be read as a small edge. .ccp-mu-bowl is a flex row with
   space-between, so a chip with only a name simply sits left. */
.ccp-mu-bowl.sh-neutral .ccp-player { font-weight:500; }

/* The ones nobody could read. Counted rather than named - there is nothing to
   name them WITH - and deliberately quiet: it is the other half of "every
   bowler here is accounted for", not something to read. */
.ccp-mu-unread {
  display:inline-block; font-size:.7rem; color:var(--ccp-faint);
  padding:.12rem .35rem; margin-top:.15rem; font-style:italic;
}

/* A reading taken from the BATTER alone, the bowler having too little against
   this hand in these overs. Marked rather than hidden, and marked QUIETLY: it
   sorts outcomes as well as a full pair does, so it is worth reading - it is
   simply a claim resting on one man rather than two. A dotted underside says
   "there is something to know here" without competing with the shading, which
   is what carries the actual verdict. */
/* A WEAKER reading - one-sided or shrunk (2026-09-14) - wears a dotted
   underside and the degree mark; the two are told apart on hover. */
.ccp-mu-bowl.is-weak { border-bottom: 1px dotted currentColor; }
.ccp-mu-one { font-weight: 700; opacity: .75; margin-left: .1rem; }

/* ── Talking points ──────────────────────────────────────────────────────
   A button beside the board, opening the shared .ccp-modal. The points are a
   reading OF the matrix, so they sit behind a control rather than above it -
   a reader who wants the grid should not scroll past a summary to reach it. */
.ccp-mu-talk-open {
  margin-left: auto; background: var(--ccp-surface); border: 1px solid var(--ccp-line-strong);
  color: var(--ccp-text-2); border-radius: 8px; padding: .35rem .7rem; cursor: pointer;
  font-size: .8rem; font-weight: 600; font-family: inherit;
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
}
.ccp-mu-talk-open:hover { background: var(--ccp-surface-3); border-color: var(--ccp-faint); }
.ccp-mu-talk-open i { color: var(--ccp-muted); }
.ccp-talk-lead { margin: 0 0 .25rem; }
.ccp-talk-head { margin: 1.1rem 0 .35rem; }
.ccp-talk-head:first-of-type { margin-top: .6rem; }
.ccp-talk-list { margin: 0; padding-left: 1.1rem; }
.ccp-talk-list li {
  margin: 0 0 .45rem; font-size: .88rem; line-height: 1.45; color: var(--ccp-text);
}
.ccp-talk-list li:last-child { margin-bottom: 0; }
.ccp-talk-list strong { color: var(--ccp-text); }

/* The key. Reads as a scale left to right, worst to best for the batter. */
.ccp-mu-key {
  display:flex; flex-wrap:wrap; gap:.3rem; align-items:center;
  font-size:.78rem; color:var(--ccp-text-3); margin:.2rem 0 1.1rem;
}
.ccp-mu-key-label { color:var(--ccp-faint); font-weight:700; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.06em; margin-right:.3rem; }
.ccp-mu-key .ccp-mu-swatch {
  font-size:.66rem; font-weight:700; padding:.15rem .45rem; border-radius:5px;
}
.ccp-mu-legend-note { color:var(--ccp-faint); margin-left:.4rem; }

.ccp-mu-basis { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin:.6rem 0 .2rem; }
.ccp-mu-basis-item { font-size:.82rem; color:var(--ccp-text-3); display:inline-flex;
  align-items:center; gap:.4rem; }
.ccp-mu-basis-item i { color:var(--ccp-faint); }
.ccp-mu-basis-item strong { color:var(--ccp-text); }

.ccp-mu-overs { font-weight:500; opacity:.7; font-size:.85em; }

.ccp-mu-innings { margin-bottom:1.75rem; }
.ccp-mu-innings[hidden] { display:none !important; }
.ccp-mu-teams { margin:.25rem 0 .9rem; }
.ccp-mu-innings:last-of-type { margin-bottom:.5rem; }
.ccp-mu-head { display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem; }
.ccp-mu-title { margin:0; font-size:1rem; color:var(--ccp-text-2); font-weight:600;
  min-width:0; }
.ccp-mu-bat-team  { color:var(--ccp-accent); font-weight:800; }
.ccp-mu-bowl-team { color:var(--ccp-text); font-weight:800; }
.ccp-mu-v { color:var(--ccp-faint); font-weight:400; margin:0 .15rem; }
/* WRAPS, AND SHRINKS. flex-shrink:0 with nowrap pills inside meant two long
   team names - "29 for Antigua and Barbuda Falcons" beside "1 for Guyana
   Amazon Warriors" - forced this row to 430px, which dragged the panel and
   the whole page sideways on a phone. The pills still never break mid-phrase;
   they stack instead. */
.ccp-mu-counts { display:flex; gap:.4rem; flex-wrap:wrap; min-width:0; }

/* Named by SIDE, never "3 strong": the cells grade magnitude, so one word
   must not mean a direction here and a size there. */
.ccp-mu-pill { font-size:.62rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:.15rem .45rem; border-radius:999px;
  white-space:nowrap; }
.ccp-mu-pill.is-good { background:var(--ccp-good-soft); color:var(--ccp-good-strong); }
.ccp-mu-pill.is-bad  { background:var(--ccp-bad-soft); color:var(--ccp-bad-strong); }
.ccp-mu-pill.is-none { background:var(--ccp-surface-3); color:var(--ccp-faint); }

.ccp-mu-none { color:var(--ccp-muted); font-size:.85rem; line-height:1.5;
  background:var(--ccp-surface-2); border:1px dashed var(--ccp-line); border-radius:10px;
  padding:.75rem .9rem; }

/* The "numbers" view that used to sit behind ?view=detailed is GONE, and its
   styles with it. It did not simplify anything, and the only thing it alone
   could show — how much of a cell is the batter and how much the bowler — is
   now in the cell's tooltip. If it ever comes back, it comes back as its own
   page, not as a second rendering of this one. */

@media (max-width: 760px) {
  .ccp-mu-matrix { font-size:.8rem; }
  .ccp-mu-bat { min-width:7rem; }
  .ccp-mu-cell { min-width:8.5rem; }
  .ccp-mu-bowl { font-size:.76rem; }
  .ccp-mu-head { flex-direction:column; align-items:flex-start; }
}

/* "rarely bats here" — an empty cell that is empty for a reason, and a
   different reason from the dash beside it. Quiet, because it is an
   explanation rather than a finding. */
.ccp-mu-away { font-size:.7rem; color:var(--ccp-faintest); font-style:italic; }

/* ── Live header: the batting side and the score ─────────────────────────
   The two things a reader opens this page for, and they were the same size as
   everything around them. The team name deliberately does NOT reuse
   .ccp-batting-team: that class is the small grey caption under the title on
   the squads and match-ups pages ("Squads", "Match-ups"), and restyling it
   would enlarge those too. */
.ccp-live-team {
  font-size: 1.05rem; font-weight: 700; color: var(--ccp-text-2);
  line-height: 1.3; margin-top: .35rem;
}
.ccp-live-team-inn { font-size: .85rem; font-weight: 500; color: var(--ccp-faint); }

/* ── How the forecast moved across a partnership ─────────────────────────
   Green is better for the BATTING side, red worse — the same reading as the
   arrows on the metric blocks above, and reusing their .ccp-up / .ccp-down
   colours rather than a second green and red that could drift apart.

   The swing spans one fall of wicket to the next, so it INCLUDES the wicket
   that ended the stand. A long partnership can close negative, and that is
   correct: it is the net movement over that passage, not a scorecard. */
.ccp-stand-swing { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.ccp-swing {
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: .08rem .35rem; border-radius: 5px; background: var(--ccp-surface-3);
  white-space: nowrap;
}
.ccp-swing.ccp-up   { background: var(--ccp-good-soft); }
.ccp-swing.ccp-down { background: var(--ccp-bad-soft); }
.ccp-swing.ccp-flat { background: var(--ccp-surface-3); }

/* ── Match-ups: the overall scoreboard ───────────────────────────────────
   Four numbers that are the same edges as the matrices below, counted from
   both ends. Deliberately plain: it sits above two colour-coded grids and
   would fight them if it were coloured too. The only colour is the amber on a
   concentrated count, which is the one thing a reader might otherwise miss. */
.ccp-mu-board {
  border: 1px solid var(--ccp-line); border-radius: 12px; background: var(--ccp-surface-2);
  padding: .8rem .95rem; margin: .2rem 0 1.4rem;
}
.ccp-mu-board-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: .5rem; margin-bottom: .35rem;
}
.ccp-mu-board-lead { font-size: .9rem; color: var(--ccp-text-2); }
.ccp-mu-board-wait { color: var(--ccp-faint); font-style: italic; }
.ccp-mu-board-lead strong { color: var(--ccp-accent); }
.ccp-mu-board-table { background: transparent; }
.ccp-mu-board-table th, .ccp-mu-board-table td { vertical-align: top; }
.ccp-mu-board-team { text-align: left; font-weight: 700; color: var(--ccp-text); }
.ccp-mu-board-n { font-size: 1.25rem; font-weight: 800; color: var(--ccp-text);
  display: block; line-height: 1.15; }
.ccp-mu-board-total { font-weight: 800; color: var(--ccp-accent); }
.ccp-mu-board-total, .ccp-mu-board-table td { white-space: nowrap; }
/* The concentration note. Quiet by default; amber once a third or more of a
   count sits with one player, which is when the count is really about him. */
.ccp-mu-board-top { display: block; font-size: .68rem; color: var(--ccp-faint);
  font-weight: 600; margin-top: .1rem; }
.ccp-mu-board-top.is-narrow { color: var(--ccp-warn-strong); }
.ccp-mu-board-note { font-size: .76rem; margin: .5rem 0 0; }

/* ── The match-up in progress, on the live page ──────────────────────────
   COLOUR HERE IS READ PER PLAYER: green means it is going well for the man it
   is on. So the two names in one pair carry opposite colours, and that is the
   OPPOSITE convention to the match-ups page, where green always means good for
   the batter. Both pages state which they are using. Do not unify them without
   deciding which one wins — a bowler highlighted "good for the batter" reads
   as praise for the wrong man.

   Two intensities, matching the five-step scale: solid at 25%+ from par, a
   tint at 15-25%. The neutral step is never drawn - an uncoloured name is the
   normal state and the page would be a wall of colour otherwise. */
.ccp-mu-live { padding: .05rem .35rem; border-radius: 5px; }
.ccp-mu-live.mu-vgood { background: var(--ccp-good-strong); color: #fff; }
.ccp-mu-live.mu-good  { background: var(--ccp-good-soft); color: var(--ccp-good-deep); }
.ccp-mu-live.mu-bad   { background: var(--ccp-bad-soft); color: var(--ccp-bad-deep); }
.ccp-mu-live.mu-vbad  { background: var(--ccp-bad-strong); color: #fff; }
/* The name stays a popup trigger, so keep the affordance visible on the solid
   steps where the default dotted underline disappears into the background. */
.ccp-mu-live.mu-vgood, .ccp-mu-live.mu-vbad { text-decoration-color: #ffffff88; }

/* ── Match-up results on the scorecard ──────────────────────────────────
   The innings summary only, since 2026-09-07. The per-player "Batting by
   match-up" and "Bowling by match-up" tables were removed, and .ccp-mu-res-b,
   -w, -nil (the cell macro) and -sub, -side (their headings) went with them. */
.ccp-mu-res-note { max-width: 70ch; }
.ccp-mu-res-key {
  display: inline-block; padding: .1rem .4rem; border-radius: 4px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
/* The two no-verdict columns MUST NOT look like the neutral one. CLAUDE.md:
   a pair that cannot be read is absent, which is a different claim from even,
   and the page must not conflate them. .sh-neutral is a solid slate tint, so
   these are hollow with a broken border - the same "nothing here" language as
   the placeholder cards on the hub. */
.sh-noread, .sh-lost { background: var(--ccp-surface); color: var(--ccp-faint); border-color: var(--ccp-faintest); }
.sh-noread { border-style: dashed; }
.sh-lost   { border-style: dotted; font-style: italic; }

/* ── The "info" button and its source, 2026-09-11 ───────────────────────
   The two explanatory captions moved off the page and behind this. The
   popup itself is _info_modal.html, which reuses the .ccp-modal styles
   above, so nothing about the dialog is styled here - only the button and
   the hidden source it copies from. */
.ccp-info-open {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--ccp-surface); border: 1px solid var(--ccp-faintest); border-radius: 999px;
  color: var(--ccp-accent); font: inherit; font-size: .78rem; font-weight: 600;
  padding: .2rem .65rem; cursor: pointer; line-height: 1.4;
  vertical-align: middle;
}
.ccp-info-open:hover { background: var(--ccp-accent-soft); border-color: var(--ccp-accent-line); }
.ccp-info-open:focus-visible { outline: 2px solid var(--ccp-accent); outline-offset: 2px; }
.ccp-info-open .fa-circle-info { font-size: .9em; }
/* Icon-only form, used beside a section title. */
.ccp-section-title-info {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.ccp-section-title-info .ccp-info-open {
  padding: .1rem .4rem; font-size: .72rem; text-transform: none;
  letter-spacing: 0;
}
/* The row on the match-ups page: the button, then the one status line
   that stays visible. Wraps on a phone. */
.ccp-info-row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin: .5rem 0 .75rem;
}
.ccp-info-row .ccp-mu-status { margin: 0; }
.ccp-info-row .ccp-sq-basis { margin: 0; }
/* The source is never shown in place - ccp_info.js copies it into the
   popup - so belt and braces on the hidden attribute, for the same reason
   the drill-down rows have it. */
.ccp-info-src[hidden] { display: none !important; }
.ccp-info-body .ccp-caption { max-width: none; font-size: .9rem; line-height: 1.55; }

/* ── The per-row drill-down, 2026-09-10 ─────────────────────────────────
   The label opens the row: which bowlers those balls came from and what
   they went for. The button is a bare wrapper round the existing key pill,
   so an open row and a row with nothing to open read the same until the
   caret; nothing about the summary's own look changes. */
.ccp-mu-res-open {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.ccp-mu-res-open:hover .ccp-mu-res-key { filter: brightness(.96); }
.ccp-mu-res-open:focus-visible { outline: 2px solid var(--ccp-accent); outline-offset: 2px; }
.ccp-mu-res-caret { font-size: .6rem; color: var(--ccp-faint); }

/* A <tr> needs this said explicitly: a bare [hidden] is display:none, but a
   table row carries display:table-row from the UA sheet and some resets put
   it back. Belt and braces, because a drill-down stuck open on load would
   be the whole feature failing loudly. */
.ccp-mu-res-det[hidden] { display: none !important; }
.ccp-mu-res-det > td { padding: 0; border-top: 0; background: var(--ccp-surface-2); }
.ccp-mu-res-det-in { padding: .5rem .6rem .6rem; }
.ccp-mu-res-sub-t { width: 100%; border-collapse: collapse; font-size: .78rem; }
.ccp-mu-res-sub-t th {
  font-size: .68rem; font-weight: 700; color: var(--ccp-muted);
  text-transform: uppercase; letter-spacing: .04em;
  padding: .2rem .4rem; border-bottom: 1px solid var(--ccp-line); text-align: left;
}
.ccp-mu-res-sub-t th.ccp-n, .ccp-mu-res-sub-t td.ccp-n { text-align: right; }
.ccp-mu-res-sub-t td { padding: .25rem .4rem; border-bottom: 1px solid var(--ccp-line); }
.ccp-mu-res-sub-t tr:last-child td { border-bottom: 0; }
/* The three tables in an opened row - pairs, by batter, by bowler
   (2026-09-12) - one shown. A table is display:table from the UA sheet, so
   the hidden attribute needs saying, as the detail row's does. */
.ccp-mu-res-tbl[hidden] { display: none !important; }
.ccp-mu-res-tbl-note { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ccp-faint); }
/* The view control on the title line: the squads page's segmented control
   at title size, pushed to the right on a wide screen and wrapping under
   the title on a phone. */
.ccp-mu-view { margin-left: auto; }
.ccp-mu-view .ccp-seg-btn { padding: .2rem .55rem; font-size: .72rem; }
@media (max-width: 640px) { .ccp-mu-view { margin-left: 0; } }
/* Balls in the row above with no bowler to file them under. A NOTE, not a
   row of figures - it is a statement about the list, not a member of it. */
.ccp-mu-res-det-rest td {
  color: var(--ccp-faint); font-size: .72rem; font-style: italic; padding-top: .35rem;
}

/* The two total rows. The subtotal is the three readable rows, where every
   column is measured on the same balls; the grand total is everything, and
   its expected column is deliberately blank. Quieter than the grand total so
   the eye lands on the bottom line first. */
.ccp-mu-res-sub-row td { border-top: 1px solid var(--ccp-line); background: var(--ccp-surface-2); }
.ccp-mu-res-subtotal {
  font-size: .72rem; font-weight: 700; color: var(--ccp-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ccp-mu-res-total td { border-top: 2px solid var(--ccp-faintest); font-weight: 700; }
/* The row's label stays put while the figures scroll (2026-09-20 evening),
   the squads' and the matrix's rule: on a phone the table shows Balls,
   Runs and Wkts and scrolls to Expected and vs expected, and a label
   that scrolled away would leave the numbers meaningless. Section rows
   span the table and are left alone. */
.ccp-mu-res th:first-child, .ccp-mu-res td:first-child:not([colspan]) {
  position: sticky; left: 0; z-index: 2; background: var(--ccp-surface);
}
/* .ccp-sc-table's overflow: hidden (its corners) would make the TABLE the
   sticky cell's scroll container, and the cell would stick to a table
   that never moves. The wrapper clips the corners here instead. */
.ccp-mu-res.ccp-sc-table { overflow: visible; }
.ccp-mu-res thead th:first-child { z-index: 3; }
.ccp-mu-res .ccp-mu-res-det > td:first-child { position: static; }

/* Balls the derivation could not place. Deliberately NOT a pill: it is not a
   delivery in the sequence, it is a statement about the sequence. */
.ccp-strip-gap {
  margin-left: .4rem; font-size: .7rem; font-weight: 600;
  color: var(--ccp-warn-strong); cursor: help; white-space: nowrap;
}


/* ── Partnerships: batters against the bowlers they faced ─────────────────
   Full width, below the crease/yet-to-bat row rather than filling the whole
   right-hand column as they used to. Each stand is ONE ROW with two cells, so
   the bowlers of the third stand are always level with the batters of the
   third stand — which two independent columns could not promise, since the
   left one starts lower than the right. Asked for 2026-09-07. */
.ccp-stand-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .5rem 1.5rem; align-items: start;
}
/* The CURRENT stand is no longer a pair (2026-09-12): it sits under the
   crease, half the page wide, with its bowlers inside its own card beneath
   the batters. The two batters stack, as they did in the half-width cell. */
.ccp-stand-now { margin-top: 0; }
.ccp-stand-now .ccp-stand-batters { grid-template-columns: 1fr; }
.ccp-stand-now .ccp-stand-bowl {
  margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--ccp-surface-3);
}

/* The left cell of an earlier stand keeps the three-part line it always had;
   only its container changed from a flex row to a grid cell. */
.ccp-stand-bat {
  display: flex; justify-content: space-between; gap: 1rem; min-width: 0;
}

/* The right cell. R / B / W, headed on every stand: three bare numbers beside
   a bowler's name read as O-M-R to anyone who has just looked at a scorecard,
   and this screen has one vocabulary collision on record already. */
.ccp-stand-bowl { min-width: 0; }
.ccp-bowl-t {
  width: 100%; border-collapse: collapse; margin: 0; font-size: .85rem;
  background: transparent; box-shadow: none;
}
.ccp-bowl-t th {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ccp-faint); font-weight: 700; text-align: left;
  padding: 0 .4rem .15rem; border: none; background: none;
}
.ccp-bowl-t th.ccp-n, .ccp-bowl-t td.ccp-n { text-align: right; }
.ccp-bowl-t td {
  padding: .18rem .4rem; border: none; border-top: 1px solid var(--ccp-surface-3);
  color: var(--ccp-text);
}
.ccp-bowl-t tbody tr:first-child td { border-top: none; }
.ccp-bowl-name { max-width: 0; }        /* let the numbers keep their width */
.ccp-bowl-w { color: var(--ccp-bad-strong); font-weight: 800; }
.ccp-stand-bowl-none {
  color: var(--ccp-faint); font-style: italic; font-size: .8rem;
}

/* The innings picker on the Scorecard tab. Both innings are in the fragment;
   all but one carry `hidden`. The rule is explicit rather than left to the
   browser's own [hidden] because .ccp-sc-innings is a <section> and any later
   display rule on it would beat the UA stylesheet silently. */
.ccp-sc-innings[hidden] { display: none !important; }
/* A segmented control since 2026-09-20 - the same language as the squads
   page's filters and the outlined "View innings" on the Summary tab. */
.ccp-sc-picks {
  display: inline-flex; margin: 0 0 1.25rem; border: 1px solid var(--ccp-line-strong);
  border-radius: var(--ccp-radius-sm); overflow: hidden; background: var(--ccp-surface);
}
.ccp-sc-pick {
  background: none; border: none; border-right: 1px solid var(--ccp-line);
  padding: .45rem .9rem; cursor: pointer; text-align: left; line-height: 1.25;
  color: var(--ccp-text-3); font-family: inherit;
}
.ccp-sc-pick:last-child { border-right: none; }
.ccp-sc-pick:hover { background: var(--ccp-surface-2); }
.ccp-sc-pick.is-active { background: var(--ccp-accent-soft); color: var(--ccp-accent); }
.ccp-sc-pick-n { display: block; font-size: .85rem; font-weight: 700; }
.ccp-sc-pick-s { display: block; font-size: .72rem; opacity: .8; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  /* One column, and the bowlers sit under their own batters rather than
     under the whole list — which is the point of them being one row. */
  .ccp-stand-row { grid-template-columns: 1fr; gap: .4rem; }
}

/* ── The over story, 2026-09-12 ──────────────────────────────────────────
   The last completed over in bullets, beneath the batting order; the two
   arrows step back through every earlier over, all of which are in the
   block and hidden. The marker carries the tone — green better for the
   batting side, red worse, the reading every chip on the screen uses — and
   a line with no verdict keeps a plain dot. */
.ccp-os {
  flex: 1; background: var(--ccp-surface); border: 1px solid var(--ccp-line); border-radius: 10px;
  padding: .85rem 1rem;
}
.ccp-os-over[hidden] { display: none !important; }
.ccp-os-head { display: flex; align-items: center; gap: .5rem; }
.ccp-os-step {
  background: none; border: 1px solid var(--ccp-line-strong); color: var(--ccp-text-3);
  border-radius: 7px; width: 1.7rem; height: 1.7rem; line-height: 1;
  font-size: 1.1rem; cursor: pointer; flex-shrink: 0; padding: 0;
  font-family: inherit;
}
.ccp-os-step:hover:not(:disabled) { background: var(--ccp-surface-3); border-color: var(--ccp-faint); }
.ccp-os-step:disabled { opacity: .3; cursor: default; }
.ccp-os-title {
  flex: 1; min-width: 0; display: flex; justify-content: space-between;
  align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.ccp-os-n { font-weight: 800; color: var(--ccp-text); font-size: .95rem; }
.ccp-os-n small { font-weight: 500; color: var(--ccp-faint); font-size: .78rem; }
.ccp-os-bowler { font-size: .8rem; color: var(--ccp-muted); }
.ccp-os-line {
  display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  font-size: .84rem; color: var(--ccp-muted); margin: .45rem 0 .6rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--ccp-surface-3);
}
.ccp-os-line b { color: var(--ccp-text); font-weight: 700; }
.ccp-os-score { font-weight: 800; color: var(--ccp-accent); }
/* THE TABLE AND TILES (2026-09-20), in place of the bullets. The box has
   to hold all of it in the space the bullets had, on a phone too, so the
   table is small type with tabular figures, the two tiles sit side by side
   and the economy bars are one line each. */
.ccp-os-tblwrap { overflow-x: auto; }
/* style.css gives every table a margin, a shadow and a radius; the stand's
   bowler table (.ccp-bowl-t) sheds them the same way. The blue thead is
   the site's and that table's too, so it stays. */
.ccp-os-tbl {
  width: 100%; border-collapse: collapse; font-size: .78rem; color: var(--ccp-text);
  font-variant-numeric: tabular-nums; line-height: 1.3;
  margin: 0; background: transparent; box-shadow: none; border-radius: 4px;
}
.ccp-os-tbl th, .ccp-os-tbl td { padding: .22rem .25rem; text-align: right; white-space: nowrap; }
.ccp-os-tbl th:last-child, .ccp-os-tbl td:last-child { padding-right: .45rem; }
.ccp-os-tbl th:first-child, .ccp-os-tbl td:first-child { padding-left: .45rem; }
.ccp-os-tbl th {
  font-size: .64rem; font-weight: 600; color: var(--ccp-faint); text-transform: uppercase;
  letter-spacing: .03em; line-height: 1.1; vertical-align: top;
  border-bottom: 1px solid var(--ccp-line); cursor: default;
}
/* Every head sits on the top line, so "Inns" cannot read as a heading over
   the one-line columns beside it; the two S/R heads are "Over S/R" and
   "Inns S/R" for the same reason (asked for 2026-09-20 evening). */
.ccp-os-tbl .ccp-os-tbl-name { text-align: left; width: 100%; white-space: normal; }
.ccp-os-tbl td b { font-weight: 700; color: var(--ccp-text); }
.ccp-os-tbl td.ccp-os-nil { color: var(--ccp-faintest); }
.ccp-os-tbl td.ccp-os-hit { color: var(--ccp-accent); font-weight: 700; }
.ccp-os-tbl .ccp-os-tbl-inns { color: var(--ccp-muted); }
.ccp-os-outrow td { color: var(--ccp-bad-deep); }
.ccp-os-outrow td b { color: var(--ccp-bad-strong); }
.ccp-os-out {
  display: inline-block; font-size: .58rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #fff; background: var(--ccp-bad); border-radius: 4px;
  padding: .05rem .3rem; margin-left: .25rem; vertical-align: 1px; cursor: default;
}
.ccp-os-extras td { color: var(--ccp-muted); border-top: 1px dashed var(--ccp-line); }
.ccp-os-extras td small { font-size: .68rem; color: var(--ccp-faint); }
.ccp-os-total td { border-top: 1px solid var(--ccp-line); color: var(--ccp-text-3); font-weight: 600; }
.ccp-os-total td b { color: var(--ccp-accent); }

.ccp-os-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .7rem;
}
.ccp-os-tile {
  background: var(--ccp-surface-2); border: 1px solid var(--ccp-line); border-radius: 8px;
  padding: .5rem .6rem .45rem; min-width: 0;
}
.ccp-os-tile-l {
  font-size: .64rem; font-weight: 600; color: var(--ccp-faint); text-transform: uppercase;
  letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccp-os-tile-v {
  font-size: 1.35rem; font-weight: 800; line-height: 1.15; color: var(--ccp-text);
  margin-top: .1rem; white-space: nowrap;
}
.ccp-os-tile-s {
  font-size: .72rem; color: var(--ccp-muted); margin-top: .3rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.ccp-os-tile-s b { color: var(--ccp-text); font-weight: 700; }
.ccp-os-tile-s small { font-size: .66rem; color: var(--ccp-faint); }
.ccp-os-arrow { color: var(--ccp-faint); }

/* The centred meter: a track, a zero line in the middle, ticks at the
   calibration cuts either side, and the bar running out from the centre
   the way the figure moved. Widths are inline, from the Python. */
.ccp-os-meter {
  position: relative; height: 8px; margin-top: .4rem; border-radius: 4px;
  background: var(--ccp-line); overflow: hidden;
}
.ccp-os-meter b { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ccp-faint); }
.ccp-os-meter s { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ccp-faintest); text-decoration: none; }
.ccp-os-meter i { position: absolute; top: 0; bottom: 0; background: var(--ccp-faint); border-radius: 4px; }
.ccp-os-meter-up i   { background: var(--ccp-good); }
.ccp-os-meter-down i { background: var(--ccp-bad); }

.ccp-os-econ { margin-top: .7rem; padding-top: .55rem; border-top: 1px solid var(--ccp-surface-3); }
.ccp-os-econ-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  font-size: .76rem; color: var(--ccp-text-3); margin-bottom: .3rem;
}
.ccp-os-econ-h .ccp-player { font-weight: 700; color: var(--ccp-text); }
.ccp-os-econ-same { font-size: .7rem; color: var(--ccp-faint); }
.ccp-os-bar-row {
  display: grid; grid-template-columns: 4.2rem 1fr auto; align-items: center;
  gap: .5rem; font-size: .74rem; color: var(--ccp-muted); margin-top: .22rem;
  font-variant-numeric: tabular-nums;
}
.ccp-os-bar-l { white-space: nowrap; }
.ccp-os-bar { height: 8px; background: var(--ccp-line); border-radius: 4px; overflow: hidden; }
.ccp-os-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ccp-faint); }
.ccp-os-bar-over { background: var(--ccp-accent); }
.ccp-os-bar-up   { background: var(--ccp-good); }
.ccp-os-bar-down { background: var(--ccp-bad); }
.ccp-os-bar-match { background: var(--ccp-faintest); }
.ccp-os-bar-v { white-space: nowrap; min-width: 5.6rem; text-align: right; }
.ccp-os-bar-v b { color: var(--ccp-text); font-weight: 700; }
.ccp-os-bar-v small { color: var(--ccp-faint); font-size: .66rem; }

@media (max-width: 420px) {
  .ccp-os { padding: .7rem .7rem; }
  .ccp-os-tbl { font-size: .72rem; }
  .ccp-os-tbl th, .ccp-os-tbl td { padding: .2rem .18rem; }
  .ccp-os-tile-v { font-size: 1.15rem; }
  .ccp-os-bar-v small { display: none; }
  .ccp-os-bar-v { min-width: 2.2rem; }
}
.ccp-os-note { margin-top: .55rem; font-size: .75rem; color: var(--ccp-faint); font-style: italic; }

/* ── Pre-match forecast, 2026-09-11 ──────────────────────────────────────
   The 500-match simulation between the two named XIs, run in the browser
   and watched as it runs: the two sides with their percentages, a tug-of-war
   bar between them, then the verdict. (A ticker, a histogram and a
   statistics grid shipped with it and were trimmed the same evening at my
   request.) Side 1 is the match row's team1 and is
   blue; side 2 is amber. Ties are slate. The arena carries data-state
   (loading / running / done / error), data-lead while it runs and
   data-verdict once it is done, and the colours key off those. */
.ccp-fc-arena { --fc1: var(--ccp-info); --fc2: var(--ccp-warn-strong); --fc1-soft: var(--ccp-info-soft); --fc2-soft: var(--ccp-warn-soft); }
.ccp-fc-status { color: var(--ccp-muted); font-size: .85rem; margin: .25rem 0 .9rem; min-height: 1.2em; }
.ccp-fc-arena[data-state="done"] .ccp-fc-status { color: var(--ccp-good-strong); }
.ccp-fc-arena[data-state="error"] .ccp-fc-status { color: var(--ccp-bad-strong); }

.ccp-fc-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem;
  align-items: center; }
.ccp-fc-side { border-radius: 12px; padding: .9rem 1rem; text-align: center;
  border: 2px solid var(--ccp-line); background: var(--ccp-surface-2);
  transition: border-color .3s, background .3s, box-shadow .3s; }
.ccp-fc-side-name { font-weight: 700; color: var(--ccp-text); font-size: 1rem; line-height: 1.25;
  min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
.ccp-fc-side-pct { font-size: 2.6rem; font-weight: 800; line-height: 1.05; margin-top: .3rem;
  font-variant-numeric: tabular-nums; }
.ccp-fc-t1 .ccp-fc-side-pct { color: var(--fc1); }
.ccp-fc-t2 .ccp-fc-side-pct { color: var(--fc2); }
.ccp-fc-side-wins { color: var(--ccp-muted); font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
/* The side ahead glows its own colour while the run is on; once the
   verdict is in only the favourite keeps it, and "even" lights neither. */
.ccp-fc-arena[data-lead="t1"]:not([data-state="done"]) .ccp-fc-t1,
.ccp-fc-arena[data-verdict="t1"] .ccp-fc-t1 {
  border-color: var(--fc1); background: var(--fc1-soft); box-shadow: 0 6px 18px rgba(30,64,175,.15); }
.ccp-fc-arena[data-lead="t2"]:not([data-state="done"]) .ccp-fc-t2,
.ccp-fc-arena[data-verdict="t2"] .ccp-fc-t2 {
  border-color: var(--fc2); background: var(--fc2-soft); box-shadow: 0 6px 18px rgba(180,83,9,.15); }

.ccp-fc-mid { text-align: center; min-width: 7.5rem; }
.ccp-fc-count { font-size: 1.35rem; font-weight: 800; color: var(--ccp-text); font-variant-numeric: tabular-nums; }
.ccp-fc-of { color: var(--ccp-faint); font-weight: 600; font-size: .95rem; }
.ccp-fc-count-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ccp-muted); font-weight: 600; }
.ccp-fc-ties { margin-top: .3rem; font-size: .78rem; color: var(--ccp-muted); }
.ccp-fc-ties[hidden] { display: none; }

/* The tug of war. Two fills, one from each end, widths in percent of the
   matches played so far, meeting in the middle with the ties as the gap. */
.ccp-fc-tug { position: relative; height: 18px; border-radius: 9px; background: var(--ccp-line);
  margin: 1rem 0 .25rem; overflow: hidden; }
.ccp-fc-tug-fill { position: absolute; top: 0; bottom: 0; transition: width .25s ease-out; }
.ccp-fc-tug-1 { left: 0; background: linear-gradient(90deg, var(--fc1), var(--ccp-info-light)); border-radius: 9px 0 0 9px; }
.ccp-fc-tug-2 { right: 0; background: linear-gradient(270deg, var(--fc2), var(--ccp-star)); border-radius: 0 9px 9px 0; }
.ccp-fc-tug-mid { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 0;
  border-left: 2px dashed rgba(255,255,255,.9); }

/* The verdict, once the run is done. */
.ccp-fc-verdict { margin: 1.1rem 0 .5rem; padding: .9rem 1.1rem; border-radius: 12px;
  border: 1px solid var(--ccp-line); background: var(--ccp-surface-2); text-align: center; }
.ccp-fc-verdict[hidden] { display: none; }
.ccp-fc-verdict-h { font-size: 1.35rem; font-weight: 800; color: var(--ccp-text); line-height: 1.25; }
.ccp-fc-verdict-s { color: var(--ccp-text-3); font-size: .92rem; margin-top: .25rem; }
.ccp-fc-arena[data-verdict="t1"] .ccp-fc-verdict { border-color: var(--fc1); background: var(--fc1-soft); }
.ccp-fc-arena[data-verdict="t1"] .ccp-fc-verdict-team { color: var(--fc1); }
.ccp-fc-arena[data-verdict="t2"] .ccp-fc-verdict { border-color: var(--fc2); background: var(--fc2-soft); }
.ccp-fc-arena[data-verdict="t2"] .ccp-fc-verdict-team { color: var(--fc2); }
.ccp-fc-foot { margin-top: 1rem; display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ccp-fc-run { background: var(--ccp-accent); color: #fff; border: none; border-radius: 9px;
  padding: .55rem 1rem; font-weight: 600; font-size: .92rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem; font-family: inherit; }
.ccp-fc-run:hover { background: var(--ccp-accent-dark); }
.ccp-fc-run:disabled { background: var(--ccp-faintest); cursor: default; }
.ccp-fc-known { flex: 1; min-width: 12rem; color: var(--ccp-muted); font-size: .8rem; line-height: 1.45; }

/* Waiting on an XI: the same panel, nothing loaded. */
.ccp-fc-wait { text-align: center; padding: 1.5rem 1rem 1rem; }
.ccp-fc-wait-icon { font-size: 1.8rem; color: var(--ccp-faint); margin-bottom: .4rem; }
.ccp-fc-wait h3 { margin: 0 0 .25rem; color: var(--ccp-text); font-size: 1.15rem; }
.ccp-fc-wait .ccp-caption { max-width: 32rem; margin: 0 auto .9rem; }
.ccp-fc-wait-list { list-style: none; margin: 0 auto; padding: 0; max-width: 24rem; text-align: left; }
.ccp-fc-wait-list li { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem;
  border: 1px solid var(--ccp-line); border-radius: 9px; margin-bottom: .4rem; background: var(--ccp-surface-2); }
.ccp-fc-wait-list li.is-named { border-color: var(--ccp-good); background: var(--ccp-good-softer); }
.ccp-fc-wait-list li.is-named i { color: var(--ccp-good); }
.ccp-fc-wait-list li.is-waiting i { color: var(--ccp-faint); }
.ccp-fc-wait-team { font-weight: 600; color: var(--ccp-text); flex: 1; }
.ccp-fc-wait-state { color: var(--ccp-muted); font-size: .85rem; }

@media (max-width: 640px) {
  /* The sides stack over the count on a phone; the tug bar still reads
     left-to-right beneath them, so nothing about the direction changes. */
  .ccp-fc-sides { grid-template-columns: 1fr 1fr; }
  .ccp-fc-mid { grid-column: 1 / -1; order: 3; }
  .ccp-fc-side-pct { font-size: 2rem; }
}

/* ── Fantasy Assist (2026-09-12) ────────────────────────────────────────── */
/* The list page: the shared match card with a fantasy pill beneath it, in
   the landing page's grid since 2026-09-20 (was one column). The card
   stretches so every pill in a row sits level. */
.ccp-fa-grid { margin-top: .25rem; }
.ccp-fa-card { display: flex; flex-direction: column; }
.ccp-fa-card .ccp-match-card { flex: 1; border-radius: var(--ccp-radius) var(--ccp-radius) 0 0; }
.ccp-fa-card .ccp-match-card:hover { transform: none; }
.ccp-fa-pill {
  display: flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem;
  background: var(--ccp-surface-2); border: 1px solid var(--ccp-line); border-top: none;
  border-radius: 0 0 var(--ccp-radius) var(--ccp-radius);
  color: var(--ccp-text-2); font-size: .88rem; font-weight: 600; text-decoration: none;
}
.ccp-fa-pill:hover { background: var(--ccp-accent-soft); color: var(--ccp-accent); }
.ccp-fa-pill i.fa-star { color: var(--ccp-star); }
.ccp-fa-pill.is-warn { background: var(--ccp-warn-softer); color: var(--ccp-warn-deep); }
.ccp-fa-pill.is-warn i.fa-star { color: var(--ccp-warn-strong); }
.ccp-fa-pill.is-own { background: var(--ccp-accent-soft); color: var(--ccp-accent); }
.ccp-fa-pill.is-locked { color: var(--ccp-muted); }
.ccp-fa-pill.is-none { color: var(--ccp-faint); }
.ccp-fa-pill-go { margin-left: auto; color: var(--ccp-accent); white-space: nowrap; }

/* The fantasy page. */
.ccp-fa-link { color: var(--ccp-accent); font-size: .85rem; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.ccp-fa-link:hover { text-decoration: underline; }
.ccp-fa-msg { padding: .55rem .8rem; border-radius: 8px; font-size: .88rem; margin: .5rem 0 .8rem; }
.ccp-fa-msg[hidden] { display: none; }
.ccp-fa-msg.is-ok { background: var(--ccp-good-softer); border: 1px solid var(--ccp-good-line); color: var(--ccp-good-deep); }
.ccp-fa-msg.is-warn { background: var(--ccp-warn-softer); border: 1px solid var(--ccp-warn-line); color: var(--ccp-warn-deep); }

.ccp-fa-status { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem;
  border-radius: 10px; border: 1px solid var(--ccp-line); background: var(--ccp-surface-2); margin: .6rem 0 1rem;
  font-size: .92rem; line-height: 1.5; color: var(--ccp-text-2); }
.ccp-fa-status > i { font-size: 1.15rem; margin-top: .15rem; flex-shrink: 0; }
.ccp-fa-status.is-info > i { color: var(--ccp-muted); }
.ccp-fa-status.is-ok { border-color: var(--ccp-good-line); background: var(--ccp-good-softer); }
.ccp-fa-status.is-ok > i { color: var(--ccp-good); }
.ccp-fa-status.is-warn { border-color: var(--ccp-warn-line); background: var(--ccp-warn-softer); color: var(--ccp-warn-deep); }
.ccp-fa-status.is-warn > i { color: var(--ccp-warn); }
.ccp-fa-status.is-locked { border-color: var(--ccp-faintest); background: var(--ccp-surface-3); color: var(--ccp-text-3); }
.ccp-fa-status.is-locked > i { color: var(--ccp-muted); }
.ccp-fa-warn-text { display: block; margin-top: .2rem; color: var(--ccp-warn-strong); }
.ccp-fa-status .ccp-fa-btn { margin-top: .4rem; }

.ccp-fa-btn { display: inline-flex; align-items: center; gap: .4rem; font: inherit;
  font-size: .85rem; font-weight: 600; padding: .4rem .8rem; border-radius: 8px;
  border: 1px solid var(--ccp-accent); background: var(--ccp-surface); color: var(--ccp-accent);
  cursor: pointer; }
.ccp-fa-btn:hover { background: var(--ccp-accent); color: #fff; }
.ccp-fa-actions { margin: .6rem 0 1.2rem; }
.ccp-fa-countdown { font-weight: 700; }
.ccp-fa-fill { border-color: var(--ccp-warn); color: var(--ccp-warn-deep); }
.ccp-fa-fill:hover { background: var(--ccp-warn); color: #fff; }
.ccp-fa-reset { border-color: var(--ccp-line-strong); color: var(--ccp-text-3); }
.ccp-fa-reset:hover { background: var(--ccp-surface-3); color: var(--ccp-text); }

.ccp-fa-scores { display: flex; gap: .75rem; flex-wrap: wrap; margin: .2rem 0 .3rem; }
.ccp-fa-score { flex: 1; min-width: 7.5rem; text-align: center; padding: .7rem .5rem;
  border-radius: 10px; border: 1px solid var(--ccp-line); background: var(--ccp-surface-2); }
.ccp-fa-score.is-mine { border-color: var(--ccp-accent); background: var(--ccp-accent-soft); }
.ccp-fa-score-v { font-size: 1.6rem; font-weight: 800; color: var(--ccp-text); font-variant-numeric: tabular-nums; }
.ccp-fa-score.is-mine .ccp-fa-score-v { color: var(--ccp-accent); }
.ccp-fa-score-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ccp-muted); font-weight: 600; }
.ccp-fa-scores-note { margin-top: .3rem; }

.ccp-fa-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin: .8rem 0 .4rem; }
.ccp-fa-head h3 { margin: 0; font-size: 1.05rem; color: var(--ccp-text); display: flex; align-items: center; gap: .45rem; }
.ccp-fa-head h3 i { color: var(--ccp-star); }
.ccp-fa-head-pool h3 i { color: var(--ccp-accent); }
.ccp-fa-count { font-size: .8rem; font-weight: 700; color: var(--ccp-text-3); background: var(--ccp-line);
  border-radius: 999px; padding: .1rem .5rem; }
.ccp-fa-basis { color: var(--ccp-muted); font-size: .82rem; }

.ccp-fa-xi, .ccp-fa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.ccp-fa-row { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem;
  border: 1px solid var(--ccp-line); border-radius: 8px; background: var(--ccp-surface-2); min-height: 2.4rem; }
.ccp-fa-row.is-out { border-color: var(--ccp-bad-line); background: var(--ccp-bad-softer); }
.ccp-fa-row.is-gap { border-style: dashed; background: var(--ccp-surface); color: var(--ccp-faint); }
.ccp-fa-pos { flex: 0 0 1.4em; text-align: right; color: var(--ccp-faint); font-weight: 700; font-size: .8rem; }
.ccp-fa-who { flex: 1; min-width: 0; font-weight: 600; color: var(--ccp-text); display: flex;
  align-items: center; gap: .4rem; flex-wrap: wrap; }
.ccp-fa-who .ccp-player { cursor: pointer; }
.ccp-fa-who .ccp-player:hover { color: var(--ccp-accent); text-decoration: underline; }
.ccp-fa-gap { font-weight: 500; font-style: italic; }
.ccp-fa-team { color: var(--ccp-faint); font-weight: 500; font-size: .78rem; }
.ccp-fa-tag { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  padding: .08rem .35rem; border-radius: 999px; text-transform: uppercase; }
.ccp-fa-tag.is-c { background: var(--ccp-info-soft); color: var(--ccp-info); }
.ccp-fa-tag.is-vc { background: var(--ccp-accent-soft); color: var(--ccp-accent-dark); }
.ccp-fa-tag.is-out { background: var(--ccp-bad-soft); color: var(--ccp-bad-strong); }
.ccp-fa-tag.is-doubt { background: var(--ccp-warn-soft); color: var(--ccp-warn-deep); text-transform: none; }
.ccp-fa-nums { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.ccp-fa-pts { font-weight: 800; color: var(--ccp-text); font-variant-numeric: tabular-nums; }
.ccp-fa-proj { color: var(--ccp-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.ccp-fa-x { flex: 0 0 auto; width: 28px; height: 28px; border: none; border-radius: 50%;
  background: var(--ccp-surface-3); color: var(--ccp-text-3); cursor: pointer; font: inherit; font-size: 1.15rem;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.ccp-fa-remove:hover { background: var(--ccp-bad-soft); color: var(--ccp-bad-strong); }
.ccp-fa-add { background: var(--ccp-accent-soft); color: var(--ccp-accent); font-weight: 800; }
.ccp-fa-add:hover:not(:disabled) { background: var(--ccp-accent); color: #fff; }
.ccp-fa-x:disabled { opacity: .35; cursor: not-allowed; }
.ccp-fa-none { color: var(--ccp-faint); font-style: italic; padding: .4rem .2rem; }

.ccp-fa-pools { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.ccp-fa-pool h4 { margin: 0 0 .4rem; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ccp-muted); }

/* The squads page: a star beside every resolved name, hidden until the
   state arrives, and a strip above the table. */
.ccp-fa-tog { border: none; background: none; padding: 0 .3rem 0 0; margin: 0;
  color: var(--ccp-faintest); cursor: pointer; font-size: .95rem; line-height: 1; vertical-align: middle; }
.ccp-fa-tog[hidden] { display: none; }
.ccp-fa-tog:hover { color: var(--ccp-star); }
.ccp-fa-tog.is-in { color: var(--ccp-star); }
.ccp-fa-tog.is-in.is-out { color: var(--ccp-bad); }
.ccp-fa-tog:disabled { cursor: not-allowed; color: var(--ccp-line); }
.ccp-fa-tog.is-in:disabled { color: var(--ccp-warn-line); }
.ccp-fa-strip { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .55rem .8rem; border-radius: 8px; border: 1px solid var(--ccp-warn-line); background: var(--ccp-warn-softer);
  color: var(--ccp-warn-deep); font-size: .88rem; margin: .6rem 0 .2rem; }
.ccp-fa-strip[hidden] { display: none; }
.ccp-fa-strip i.fa-star { color: var(--ccp-star); }
.ccp-fa-strip-n { font-weight: 700; }
.ccp-fa-strip-note { color: var(--ccp-muted); }
.ccp-fa-strip-note.is-warn { color: var(--ccp-warn-strong); font-weight: 600; }
.ccp-fa-strip-go { margin-left: auto; color: var(--ccp-accent); font-weight: 600;
  text-decoration: none; white-space: nowrap; }
.ccp-fa-strip-go:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .ccp-fa-pools { grid-template-columns: 1fr; }
  .ccp-fa-scores { gap: .5rem; }
  .ccp-fa-score { min-width: 5.5rem; padding: .5rem .3rem; }
  .ccp-fa-score-v { font-size: 1.3rem; }
  .ccp-fa-team { display: none; }
}

/* ── Arrows inside the over story's text (2026-09-13) ─────────────────
   A {'move'} part: green up, red down — the marker's own reading, better
   for the batting side. */
.ccp-os-mv { font-weight: 600; white-space: nowrap; }
.ccp-os-mv-up   { color: var(--ccp-good); }
.ccp-os-mv-down { color: var(--ccp-bad); }

/* ── The match story (2026-09-13; rebuilt 2026-09-20) ────────────────
   Per innings two charts on one over axis, then a row per over, latest
   first, opening on a tap to the over's batter table (.ccp-os-tbl, the
   Live tab's), the partnership blocks and the bowler's line. The strip
   rules (.ccp-story-ps / -seg / -detail / -hint) are the Live tab's popup
   charts' now - the story page no longer draws a strip. */
.ccp-story-inn { margin: 1rem 0 1.75rem; }
.ccp-story-h {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .75rem;
  margin: 0 0 .5rem; font-size: 1.05rem; color: var(--ccp-accent);
}
.ccp-story-team { font-weight: 700; }
.ccp-story-score { font-weight: 700; color: var(--ccp-text); }
.ccp-story-sub { font-size: .8rem; color: var(--ccp-muted); font-weight: 400; }
.ccp-story-result { font-size: .8rem; color: var(--ccp-good-strong); font-weight: 600; }
.ccp-story-chart { position: relative; height: 280px; margin-bottom: .35rem; }
.ccp-story-chart-rr { height: 210px; margin-bottom: .9rem; }
/* The popup chart's strip and line (2026-09-15): the story's old strip, inside the modal. */
.ccp-story-ps { position: relative; height: 26px; margin: -.35rem 0 .35rem; }
.ccp-story-seg {
  position: absolute; top: 2px; height: 22px; box-sizing: border-box;
  border-right: 2px solid #fff; border-radius: 3px; cursor: pointer;
  font-size: .72rem; font-weight: 700; line-height: 22px; text-align: center;
  overflow: hidden; white-space: nowrap; transition: filter .12s;
}
.ccp-story-seg.on, .ccp-story-seg:hover, .ccp-story-seg:focus-visible { filter: brightness(.85); outline: none; }
.ccp-story-detail {
  min-height: 2.2rem; padding: .45rem .6rem; border-radius: 8px; background: var(--ccp-surface-2);
  border: 1px solid var(--ccp-line); font-size: .92rem; line-height: 1.5; color: var(--ccp-text);
}
.ccp-story-hint { color: var(--ccp-faint); font-size: .82rem; }
.ccp-modal-ps-detail { margin-top: .1rem; font-size: .84rem; }
.ccp-modal-ps-detail[hidden] { display: none !important; }

/* The rows: a grid, one line each, the head row in small caps. */
.ccp-story-overs { border: 1px solid var(--ccp-line); border-radius: 10px; background: var(--ccp-surface); overflow: hidden; }
.ccp-story-orow {
  display: grid; align-items: center; gap: .4rem;
  grid-template-columns: 2.6rem minmax(5rem, 1.4fr) 4.2rem 3.6rem minmax(4.6rem, 1fr) minmax(5rem, 1fr) 1.2rem;
  padding: .42rem .6rem; font-size: .84rem; color: var(--ccp-text);
  font-variant-numeric: tabular-nums;
}
.ccp-story-orow > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccp-story-ohead {
  font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ccp-faint); background: var(--ccp-surface-2); border-bottom: 1px solid var(--ccp-line); padding-top: .35rem; padding-bottom: .35rem;
}
.ccp-story-over + .ccp-story-over { border-top: 1px solid var(--ccp-surface-3); }
.ccp-story-obtn { cursor: pointer; user-select: none; }
.ccp-story-obtn:hover, .ccp-story-obtn:focus-visible { background: var(--ccp-surface-2); outline: none; }
.ccp-story-over.is-open > .ccp-story-obtn { background: var(--ccp-accent-soft); }
.ccp-story-on b { font-weight: 800; color: var(--ccp-text); }
.ccp-story-on small { display: block; color: var(--ccp-faint); font-size: .62rem; line-height: 1.1; }
.ccp-story-or b { font-weight: 800; color: var(--ccp-text); }
.ccp-story-wk { font-style: normal; color: var(--ccp-bad-strong); font-weight: 700; font-size: .72rem; }
.ccp-story-os { font-weight: 700; color: var(--ccp-accent); }
.ccp-story-op, .ccp-story-ow { font-weight: 600; }
.ccp-story-op b, .ccp-story-ow b { font-weight: inherit; }   /* the <b> is for the phone layout */
.ccp-story-op small, .ccp-story-ow small { font-size: .7rem; font-weight: 700; }
.ccp-story-need { color: var(--ccp-muted); font-weight: 500 !important; }
.ccp-story-lbl { display: none; }
.ccp-story-oc { color: var(--ccp-faint); font-size: .7rem; text-align: right; transition: transform .15s; }
.ccp-story-over.is-open .ccp-story-oc { transform: rotate(180deg); }
.ccp-story-od { padding: .5rem .6rem .7rem; background: var(--ccp-surface-2); border-top: 1px dashed var(--ccp-line); }
.ccp-story-od[hidden] { display: none !important; }
.ccp-story-od .ccp-os-tbl { margin-bottom: .4rem; }
.ccp-story-od-l {
  font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ccp-faint); margin: .5rem 0 .25rem;
}
.ccp-story-stands { margin-top: .2rem; }
.ccp-story-stand {
  border: 1px solid var(--ccp-line); border-left: 3px solid var(--ccp-accent); border-radius: 6px;
  padding: .35rem .55rem; background: var(--ccp-surface); margin-bottom: .35rem; font-size: .82rem;
}
.ccp-story-stand-ended { border-left-color: var(--ccp-bad); }
.ccp-story-stand-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; }
.ccp-story-stag {
  font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ccp-text-3); background: var(--ccp-surface-3); border-radius: 999px; padding: .08rem .45rem;
}
.ccp-story-stand-ended .ccp-story-stag { color: var(--ccp-bad-strong); background: var(--ccp-bad-soft); }
.ccp-story-stand-v b { font-size: .95rem; font-weight: 800; color: var(--ccp-text); }
.ccp-story-stand-v small { color: var(--ccp-muted); }
.ccp-story-stand-sc { margin-left: auto; color: var(--ccp-muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.ccp-story-stand-b { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .25rem; color: var(--ccp-text); }
.ccp-story-stand-bat b { font-weight: 700; }
.ccp-story-stand-bat.is-out { color: var(--ccp-bad-deep); }
.ccp-story-stand-ex { color: var(--ccp-muted); }
.ccp-story-obowl { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .8rem; font-size: .82rem; margin-top: .3rem; }
.ccp-story-obowl .ccp-story-od-l { margin: 0; }
.ccp-story-obowl .ccp-player { font-weight: 700; color: var(--ccp-text); }
.ccp-story-obowl-f { color: var(--ccp-muted); }
.ccp-story-obowl-f b { color: var(--ccp-text); }
@media (max-width: 600px) {
  .ccp-story-chart { height: 240px; }
  .ccp-story-chart-rr { height: 180px; }
  /* Two lines per over (2026-09-20 evening; one line had dropped the
     moves, the "need" and the chevron to fit, and a reader could not see
     that a row opened). Line one: over, bowler, runs, score, chevron.
     Line two, under the bowler: the forecast / required rate and the win
     % with their arrows, each with a small label of its own since the
     head row no longer sits over them. */
  .ccp-story-orow {
    grid-template-columns: 1.8rem minmax(0, 1fr) 3rem 3.2rem 1rem;
    grid-template-areas: "on ob or os oc" "on op ow ow ow";
    gap: .1rem .3rem; padding: .4rem .5rem; font-size: .78rem;
  }
  .ccp-story-on { grid-area: on; overflow: visible; }
  .ccp-story-ob { grid-area: ob; }
  .ccp-story-or { grid-area: or; white-space: normal; line-height: 1.15; }
  .ccp-story-os { grid-area: os; }
  .ccp-story-oc { grid-area: oc; }
  .ccp-story-op { grid-area: op; }
  .ccp-story-ow { grid-area: ow; }
  .ccp-story-orow > .ccp-story-op, .ccp-story-orow > .ccp-story-ow {
    font-size: .72rem; font-weight: 500; color: var(--ccp-muted); overflow: visible; white-space: normal;
  }
  .ccp-story-orow > .ccp-story-op b, .ccp-story-orow > .ccp-story-ow b { color: var(--ccp-text); font-weight: 700; }
  .ccp-story-lbl { display: inline; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ccp-faint); margin-right: .2rem; }
  .ccp-story-ohead { grid-template-areas: "on ob or os oc"; }
  .ccp-story-ohead > .ccp-story-op, .ccp-story-ohead > .ccp-story-ow { display: none; }
  .ccp-story-ohead > span { white-space: normal; line-height: 1.1; font-size: .58rem; letter-spacing: 0; }
  .ccp-story-wk { display: block; }
}

/* ── The state-of-play badges (2026-09-14) ────────────────────────────
   "Rain Delay" / "Inning Break" from the feed, and the innings' length when
   the feed has cut it. Beside the Live badge in the header; the story's
   innings heading carries the second. */
.ccp-badge-state { background: var(--ccp-warn-soft); color: var(--ccp-warn-deep); }
.ccp-badge-short { background: var(--ccp-info-soft); color: var(--ccp-info); }

/* ── The weaker readings' section in the results block (2026-09-14) ─── */
.ccp-mu-res-sec td { padding-top: .55rem; border-top: 1px solid var(--ccp-line); background: var(--ccp-surface-2); }
.ccp-mu-res-sec-title { font-weight: 700; font-size: .82rem; color: var(--ccp-text-2); }
.ccp-mu-res-sec-note { font-size: .74rem; color: var(--ccp-muted); margin-left: .4rem; }
.ccp-mu-res-key.is-weak { border-bottom: 1px dotted currentColor; }