/* FINE MARGINS — Test scores (30 Oct redo): the hub (/scores) and the match page (/scorecard/<id>). The T20 scores' shapes in the Test
   side's paper: hairlines, Fraunces for the big numbers, Plex Mono for labels. The side that batted first is green, the other ochre
   (in the lead chart, the sparklines, the scorecard tabs). */
.ts { --ca: #15803D; --ca-rgb: 21,128,61; --cb: #B86E0B; --cb-rgb: 184,110,11;
  max-width: 1180px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); color: var(--ink); }
.ts a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ts-head { display: grid; gap: 6px; margin-bottom: 16px; }
.ts-crumb { margin: 0; font-family: var(--mono); font-size: .74rem; color: var(--ink-faint); } .ts-crumb a { text-decoration: none; color: var(--ink-soft); } .ts-crumb a:hover { color: var(--green); }
.ts-kick { margin: 4px 0 0; font-family: var(--mono); font-size: .74rem; color: var(--ink-faint); }
.ts-h1 { font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.02; letter-spacing: -.025em; font-weight: 640; margin: 2px 0 0; }
.ts-lede { margin: 6px 0 0; max-width: 64ch; color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }
.ts-h2 { font-family: var(--serif); font-size: 1.4rem; font-weight: 620; margin: 0 0 10px; letter-spacing: -.01em; }
.ts-h3 { font-family: var(--serif); font-size: 1.12rem; font-weight: 620; margin: 0 0 4px; }
.ts-sub, .ts-note { font-size: .8rem; color: var(--ink-faint); margin: 2px 0 10px; line-height: 1.5; }
.ts-sec { margin-top: 36px; scroll-margin-top: 80px; }
.ts-jump { display: flex; gap: 8px; margin: 14px 0 0; }
.ts-jump { gap: 20px; } .ts-jump a { font-size: .86rem; text-decoration: none; color: var(--ink-soft); } .ts-jump a::after { content: ' ↓'; color: var(--ink-faint); } .ts-jump a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* ── the hub ── */
.ts-ctl { position: sticky; top: 62px; z-index: 20; margin: 8px -16px 0; padding: 10px 16px 12px; background: rgba(244,240,230,.985); border-bottom: 1px solid var(--line); }
.ts-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .ts-chips::-webkit-scrollbar { display: none; }
.ts-chips { gap: 20px; border-bottom: 1px solid var(--line); }
.ts-chip { all: unset; box-sizing: border-box; cursor: pointer; flex: none; padding: 7px 0 9px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: .88rem; color: var(--ink-faint); white-space: nowrap; transition: color .15s, border-color .15s; }
.ts-chip small { color: var(--ink-faint); font-size: .72rem; margin-left: 4px; font-variant-numeric: tabular-nums; opacity: .8; }
.ts-chip:hover { color: var(--ink); } .ts-chip[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--green); }
.ts-chip:focus-visible, .ts-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ts-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.ts-q { flex: 0 1 380px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-faint); }
.ts-q svg { width: 16px; height: 16px; flex: none; } .ts-q input { all: unset; flex: 1; min-width: 0; font-size: .9rem; color: var(--ink); } .ts-q input::placeholder { color: var(--ink-faint); }
.ts-q:focus-within { box-shadow: inset 0 0 0 1px var(--green); }
.ts-y select { height: 38px; padding: 0 30px 0 12px; border-radius: 8px; border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong); font: inherit; font-size: .88rem; color: var(--ink); appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%); background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.ts-clear { all: unset; cursor: pointer; font-size: .84rem; color: var(--green); padding: 6px 4px; } .ts-clear[hidden] { display: none; }
.ts-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; margin-top: 6px; }
.ts-count { margin: 14px 0 0; font-size: .82rem; color: var(--ink-faint); } .ts-count:empty { display: none; }
.ts-ser { margin-top: 26px; }
.ts-sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); }
.ts-sn { font-family: var(--serif); font-size: 1.22rem; font-weight: 620; text-decoration: none; letter-spacing: -.01em; } .ts-sn:hover { color: var(--green); }
.ts-sr { font-size: .84rem; font-weight: 600; color: var(--green); }
.ts-sd { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); }
.ts a.ts-m { display: grid; grid-template-columns: 9.5rem minmax(0, 19rem) 112px minmax(0, 1fr); align-items: center; gap: 4px 22px; padding: 11px 6px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color .15s; }
.ts a.ts-m:hover { background: rgba(255,255,255,.45); }
.ts-ml { display: grid; gap: 2px; min-width: 0; } .ts-ml b { font-size: .86rem; font-weight: 600; } .ts-ml small { font-size: .74rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-tt { display: grid; gap: 3px; min-width: 0; }
.ts-t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .94rem; }
.ts-t > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; padding-left: 13px; }
.ts-t > span::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--ca); } .ts-tb > span::before { background: var(--cb); }
.ts-t b { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; font-family: var(--mono); font-size: .84rem; }
.ts-t.is-w { font-weight: 650; } .ts-t.is-w b { font-weight: 700; } .ts-t.is-l { color: var(--ink-soft); } .ts-t.is-l b { font-weight: 500; }
.ts-inn { display: grid; gap: 3px; width: 112px; align-content: center; } .ts-inn i { display: block; height: 5px; min-width: 2px; border-radius: 1px; background: var(--ca); } .ts-inn i.ts-i2 { background: var(--cb); }
.ts-sa { fill: rgba(var(--ca-rgb), .22); } .ts-sb { fill: rgba(var(--cb-rgb), .24); } .ts-s0 { stroke: var(--line-strong); stroke-width: .6; } .ts-sl { fill: none; stroke: var(--ink-soft); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.ts-res { font-size: .84rem; color: var(--ink-soft); }
.ts-more { margin: 24px 0 0; } .ts-more[hidden] { display: none; }
.ts-btn { all: unset; cursor: pointer; padding: 9px 15px; border-radius: 8px; font-size: .86rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-strong); } .ts-btn:hover { background: var(--card); }
.ts-none { color: var(--ink-faint); margin: 24px 0; }
.ts-rail { position: sticky; top: 150px; align-self: start; padding-top: 26px; } .ts-h3b, .ts-otd + .ts-h3 { margin-top: 26px; } .ts-otd[hidden] { display: none; }
.ts-rl { list-style: none; margin: 0; padding: 0; }
.ts-rl li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.ts-rl li a span { font-size: .9rem; color: var(--ink-soft); } .ts-rl li a b { color: var(--ink); font-weight: 600; } .ts-rl li a small { grid-row: 2; font-size: .74rem; color: var(--ink-faint); }
.ts-rl li a em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-family: var(--serif); font-weight: 650; font-size: 1.2rem; color: var(--green); font-variant-numeric: tabular-nums; }
.ts-rl li a:hover span { color: var(--ink); }
.ts-src { margin-top: 22px; }
@media (max-width: 1100px) { .ts a.ts-m { grid-template-columns: minmax(0, 19rem) 112px minmax(0, 1fr); } .ts-ml { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; } }
@media (max-width: 960px) { .ts-body { grid-template-columns: minmax(0, 1fr); } .ts-rail { position: static; border-top: 1px solid var(--line-strong); margin-top: 24px; } }
@media (max-width: 768px) { .ts-ctl { top: 0; } }
@media (max-width: 640px) {
  .ts a.ts-m { grid-template-columns: minmax(0, 1fr) 88px; padding: 12px 2px; gap: 6px 14px; } .ts-inn { width: 88px; } .ts-res { grid-column: 1 / -1; font-size: .8rem; }
  .ts-sd { margin-left: 0; width: 100%; } .ts-q { flex: 1 1 100%; }
}

/* ── the match page ── */
.tm-ca, .tm-ca a { color: var(--ca); } .tm-cb { color: var(--cb); } .tm-v { color: var(--ink-faint); font-weight: 400; font-size: .55em; vertical-align: middle; }
.tm-board { margin-top: 8px; padding: 20px 22px; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tm-team { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 18px; padding: 4px 0 4px 12px; border-left: 3px solid var(--ca); margin-bottom: 8px; } .tm-team.tm-b { border-left-color: var(--cb); }
.tm-tn { font-size: 1.06rem; font-weight: 600; }
.tm-sc { font-family: var(--serif); font-size: 1.9rem; font-weight: 640; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .tm-sc small { font-family: var(--sans); font-size: .9rem; font-weight: 400; color: var(--ink-faint); letter-spacing: 0; } .tm-sc i { font-style: normal; font-weight: 400; color: var(--ink-faint); font-size: .7em; margin: 0 .35em; }
.tm-team.is-l { opacity: .78; } .tm-team.is-l .tm-sc { font-weight: 500; color: var(--ink-soft); }
.tm-res { margin: 12px 0 0; font-size: 1.04rem; font-weight: 650; }
.tm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 22px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.tm-facts dt, .tm-stats dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 3px; }
.tm-facts dd { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.45; } .tm-facts a { text-decoration: none; border-bottom: 1px solid var(--line-strong); color: var(--ink); } .tm-facts a:hover { border-color: var(--green); }
.tm-cond { grid-column: 1 / -1; } .tm-cond dd { display: grid; gap: 3px; } .tm-ca b, b.tm-ca { color: var(--ca); } b.tm-cb { color: var(--cb); }
.tm-cv { font-size: .86rem; } .tm-t-2, .tm-t-1 { color: #9A3B1E; } .tm-t2, .tm-t1 { color: var(--green); }
.tm-cv b { font-weight: 650; margin-right: 4px; }
@media (min-width: 900px) { .tm-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 0 34px; }
  .tm-facts { grid-template-columns: 1fr 1fr; align-content: start; margin: 0; padding: 2px 0 0 30px; border-top: 0; border-left: 1px solid var(--line); } }
.tm-lede { font-size: 1.04rem; color: var(--ink-soft); margin: 0 0 12px; max-width: 70ch; }
.tm-chart { position: relative; }
.tm-bands { position: relative; height: 38px; }
.tm-band { position: absolute; top: 0; bottom: 0; display: grid; align-content: end; gap: 0; padding: 0 6px 6px; box-sizing: border-box; overflow: hidden; white-space: nowrap; border-left: 1px solid var(--line-strong); }
.tm-band:first-child { border-left: 0; } .tm-band b { font-family: var(--mono); font-size: .76rem; font-weight: 600; } .tm-band small { font-size: .68rem; color: var(--ink-faint); }
.tm-band b.tm-ca { color: var(--ca); } .tm-band b.tm-cb { color: var(--cb); }
.tm-plot { position: relative; height: clamp(220px, 32vw, 330px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tm-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: crosshair; }
.tm-grid { stroke: var(--line); stroke-width: 1; } .tm-zero { stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 4 4; } .tm-div { stroke: var(--line-strong); stroke-width: 1; }
.tm-aa { fill: rgba(var(--ca-rgb), .14); } .tm-ab { fill: rgba(var(--cb-rgb), .16); }
.tm-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; } .tm-cur { stroke: var(--ink-soft); stroke-width: 1; }
.tm-wk { position: absolute; width: 8px; height: 8px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ca); pointer-events: none; } .tm-wk.tm-wb { border-color: var(--cb); } .tm-wk.is-2 { width: 11px; height: 11px; margin: -6.5px 0 0 -6.5px; }
.tm-tick { position: absolute; left: 4px; transform: translateY(-50%); font-family: var(--mono); font-size: .66rem; color: var(--ink-faint); background: var(--paper); padding: 0 3px; pointer-events: none; }
.tm-side-a { top: 6px; } .tm-side-b { bottom: 6px; }
.tm-side { position: absolute; right: 6px; font-size: .74rem; color: var(--ink-faint); pointer-events: none; background: var(--paper); padding: 0 4px; }
.tm-tip { min-height: 1.5em; margin: 10px 0 0; font-size: .9rem; font-variant-numeric: tabular-nums; } .tm-hint { color: var(--ink-faint); font-size: .82rem; }
.tm-three { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 30px; margin-top: 26px; }
.tm-big { margin: 6px 0; } .tm-big span { font-family: var(--serif); font-size: 2.5rem; font-weight: 650; letter-spacing: -.02em; } .tm-big small { color: var(--ink-soft); font-size: .88rem; }
.tm-big .tm-ca { color: var(--ca); } .tm-big .tm-cb { color: var(--cb); }
.tm-p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; } .tm-p a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.tm-val, .tm-bowl { list-style: none; margin: 0; padding: 0; }
.tm-val li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 3.2em; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.tm-vn small, .tm-bowl small { display: block; font-size: .72rem; color: var(--ink-faint); margin-top: 1px; } .tm-val a, .tm-bowl a { text-decoration: none; } .tm-val a:hover, .tm-bowl a:hover { color: var(--green); }
.tm-vb { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .tm-vb i { display: block; height: 100%; background: var(--ca); border-radius: 3px; } .tm-b .tm-vb i { background: var(--cb); }
.tm-val b { text-align: right; font-variant-numeric: tabular-nums; } .tm-val .tm-a b { color: var(--ca); } .tm-val .tm-b b { color: var(--cb); }
.tm-bowl li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; } .tm-bowl b { font-family: var(--mono); font-size: .9rem; }
.tm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 30px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.tm-stats > div { padding: 12px 14px 12px 0; } .tm-stats > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.tm-stats dd { margin: 0; font-size: .86rem; color: var(--ink-soft); } .tm-stats dd b { font-family: var(--serif); font-size: 1.4rem; font-weight: 650; color: var(--ink); margin-right: 4px; } .tm-stats small { color: var(--ink-faint); }
.tm-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .tm-tabs::-webkit-scrollbar { display: none; }
.tm-tab { all: unset; box-sizing: border-box; cursor: pointer; flex: none; padding: 9px 0 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: .92rem; color: var(--ink-faint); white-space: nowrap; }
.tm-tab small { font-family: var(--mono); font-size: .76rem; margin-left: 4px; } .tm-tab:hover { color: var(--ink); } .tm-tab[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--green); }
.tm-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.tm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: var(--ca); } .tm-dot.tm-db { background: var(--cb); }
.tm-inn { max-width: 900px; } .tm-inn[hidden] { display: none; }
.tm-innh { margin: 14px 0 0; font-size: .88rem; color: var(--ink-soft); }
.tm-tb { width: 100%; border-collapse: collapse; margin-top: 10px; font-variant-numeric: tabular-nums; }
.tm-tb th, .tm-tb td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: right; font-size: .9rem; color: var(--ink-soft); vertical-align: top; }
.tm-tb thead th { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: 7px; border-bottom-color: var(--line-strong); }
.tm-tb th[scope], .tm-tb thead th:first-child { text-align: left; padding-left: 0; }
.tm-tb td.tm-r { color: var(--ink); font-weight: 650; }
.tm-pn { display: block; color: var(--ink); font-weight: 500; font-size: .95rem; } .tm-pn a { text-decoration: none; } .tm-pn a:hover { color: var(--green); }
.tm-how { display: block; font-size: .78rem; font-weight: 400; color: var(--ink-faint); margin-top: 1px; } .tm-how.is-no { color: var(--green); } .tm-how.tm-inl { display: inline; margin-left: 8px; }
.tm-hv.is-hi { color: var(--green); font-weight: 600; } .tm-hv.is-neg { color: var(--ink-faint); }
.tm-tot th, .tm-tot td { color: var(--ink) !important; font-weight: 650; border-bottom-color: var(--line-strong) !important; } .tm-tot td.tm-r { font-family: var(--serif); font-size: 1.15rem; white-space: nowrap; }
.tm-line { margin: 12px 0 0; font-size: .86rem; line-height: 1.65; color: var(--ink-soft); } .tm-line > b { font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-right: 8px; }
.tm-line span { white-space: nowrap; } .tm-line small { color: var(--ink-faint); }
.tm-tbw { margin-top: 22px; }
.ts-pn { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 42px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.ts-pn a { text-decoration: none; } .ts-pv, .ts-nx { display: grid; gap: 1px; min-width: 0; } .ts-nx { text-align: right; }
.ts-pv small, .ts-nx small { font-size: .72rem; color: var(--ink-faint); } .ts-pv span, .ts-nx span { font-size: .92rem; color: var(--ink); } .ts-pv em, .ts-nx em { font-style: normal; font-size: .76rem; color: var(--ink-faint); }
.ts-pv:hover span, .ts-nx:hover span { color: var(--green); }
.ts-all { font-size: .86rem; color: var(--ink-soft); white-space: nowrap; } .ts-all::after { content: ' →'; } .ts-all:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .tm-three { grid-template-columns: 1fr; gap: 26px; } .tm-stats { grid-template-columns: 1fr 1fr; } .tm-stats > div:nth-child(3) { padding-left: 0; border-left: 0; } .tm-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) {
  .tm-board { padding: 14px; margin: 8px -4px 0; } .tm-sc { font-size: 1.5rem; } .tm-team { flex-direction: column; align-items: flex-start; }
  .tm-tb th, .tm-tb td { padding: 8px 4px; font-size: .85rem; } .tm-hsr { display: none; }
  .tm-band small { display: none; } .tm-band b { font-size: .66rem; } .tm-bands { height: 26px; }
  .ts-pn { grid-template-columns: 1fr 1fr; } .ts-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* innings by innings (30 Oct, replaces the lead line): each innings a bar as long as its total, split into its partnerships */
.tm-ib { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.tm-ir { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 6.5rem; grid-template-areas: "l t v" "sit s s"; align-items: center; column-gap: 18px; row-gap: 4px; padding: 14px 0 12px; border-bottom: 1px solid var(--line); }
.tm-il { grid-area: l; margin: 0; font-size: .95rem; } .tm-il b { font-weight: 650; } .tm-il small { display: block; font-size: .76rem; color: var(--ink-faint); }
.tm-a .tm-il b { color: var(--ca); } .tm-b .tm-il b { color: var(--cb); }
.tm-it { grid-area: t; min-width: 0; }
.tm-bar { display: flex; gap: 2px; height: 30px; min-width: 6px; }
.tm-bar i { display: grid; place-items: center; min-width: 3px; font-style: normal; font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.95); background: rgba(var(--c-rgb), .32); cursor: default; outline: none; transition: filter .12s, box-shadow .12s; overflow: hidden; }
.tm-a .tm-bar i { --c-rgb: var(--ca-rgb); } .tm-b .tm-bar i { --c-rgb: var(--cb-rgb); }
.tm-bar i.is-m { background: rgba(var(--c-rgb), .5); } .tm-bar i.is-l { background: rgba(var(--c-rgb), .75); } .tm-bar i.is-c { background: rgb(var(--c-rgb)); }
.tm-bar i:not(.is-m):not(.is-l):not(.is-c) { color: var(--ink-soft); }
.tm-bar i:first-child { border-radius: 3px 0 0 3px; } .tm-bar i:last-child { border-radius: 0 3px 3px 0; } .tm-bar i:only-child { border-radius: 3px; }
.tm-bar i:hover, .tm-bar i.is-on, .tm-bar i:focus-visible { filter: brightness(.88); box-shadow: inset 0 0 0 2px rgba(22,33,26,.55); }
.tm-iv { grid-area: v; margin: 0; text-align: right; } .tm-iv b { font-family: var(--serif); font-size: 1.45rem; font-weight: 650; letter-spacing: -.01em; } .tm-iv small { display: block; font-size: .72rem; color: var(--ink-faint); }
.tm-is { grid-area: s; margin: 0; font-size: .82rem; color: var(--ink-soft); }
.tm-sit { grid-area: sit; margin: 0; font-size: .8rem; font-weight: 600; color: var(--ink); }
@media (max-width: 760px) {
  .tm-ir { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t" "s s" "sit sit"; }
  .tm-sit { text-align: left; } .tm-bar { height: 26px; }
}

/* ── 1 Nov: the innings bars pick the card beneath them; the analysis points into the card ── */
.tm-ir[data-k] { cursor: pointer; border-radius: 8px; transition: background-color .15s, box-shadow .15s; outline: none; }
.tm-ir[data-k]:hover { background: rgba(127,127,127,.06); }
.tm-ir[data-k].is-sel { background: rgba(127,127,127,.09); box-shadow: inset 3px 0 0 var(--ink-soft); }
.tm-ir[data-k]:focus-visible { box-shadow: 0 0 0 2px var(--ink-soft); }
.tm-cardin { margin-top: 18px; }
.tm-cardin .tm-inn { animation: tm-fade .2s ease-out; }
@keyframes tm-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tm-tb tr.is-cost th .tm-pn { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.tm-costtag { font-style: normal; color: var(--ink-soft); }
.tm-val li[data-n], .tm-bowl li[data-n] { cursor: pointer; }
.tm-val li[data-n]:hover .tm-vn, .tm-bowl li[data-n]:hover span { text-decoration: underline; text-decoration-color: var(--line-strong, rgba(127,127,127,.4)); text-underline-offset: 3px; }
.tm-tb tr.is-flash { animation: tm-flash 1.6s ease-out; }
@keyframes tm-flash { 0%, 30% { background: rgba(232,163,60,.16); } 100% { background: transparent; } }
.tm-ir[data-k] { padding-left: 12px; padding-right: 12px; margin-left: -12px; margin-right: -12px; }
@media (max-width: 760px) { .tm-ir[data-k] { padding-left: 10px; padding-right: 10px; margin-left: -10px; margin-right: -10px; } }

/* ── 1 Nov: a Test over by over, as a map: a square per over, and a panel that explains the one you pick ── */
.to-lede { color: var(--ink-soft); max-width: 760px; margin: 0 0 18px; }
.to-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.to-grids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; align-content: start; }
.tq-inn { min-width: 0; } .tq-inn.tm-a { --c-rgb: var(--ca-rgb); --c: var(--ca); } .tq-inn.tm-b { --c-rgb: var(--cb-rgb); --c: var(--cb); }
.tq-h { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .tq-h b { font-family: var(--serif); font-size: 1.08rem; color: var(--c); } .tq-h span { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; } .tq-h small { color: var(--ink-faint); font-size: .76rem; }
.tq-r { display: grid; grid-template-columns: 26px minmax(0, 1fr) 40px; gap: 8px; align-items: center; height: 29px; }
.tq-on { font-size: .66rem; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
.tq-cs { display: flex; gap: 3px; }
.tq { appearance: none; width: 25px; height: 25px; flex: 0 0 auto; border: 0; border-radius: 5px; padding: 0; display: grid; place-items: center; cursor: pointer; font: inherit; font-size: .64rem; font-weight: 650; font-variant-numeric: tabular-nums;
  background: rgba(var(--c-rgb), var(--a)); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); transition: transform .12s ease, box-shadow .12s ease, opacity .25s ease; }
.tq:hover { transform: translateY(-1px) scale(1.08); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.tq.is-w { color: #fff; background: #b5452f; font-size: .62rem; letter-spacing: -.5px; }
.tq.is-cur { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); transform: scale(1.06); }
.tq.is-flash { animation: tq-pop .5s ease-out; } @keyframes tq-pop { 0% { transform: scale(1.35); } 100% { transform: scale(1.06); } }
.to-grids.is-following .tq.is-dim { opacity: .14; }
.tq-ru { font-size: .76rem; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; } .tq-ru small { color: #b5452f; font-weight: 600; }
.tq-key { grid-column: 1 / -1; margin: 0; font-size: .74rem; color: var(--ink-faint); }
/* the panel */
.to-now { position: sticky; top: 80px; padding: 14px 16px; border-radius: 14px; background: var(--card, #fbf9f3); box-shadow: inset 0 0 0 1px var(--line); font-size: .86rem; color: var(--ink-soft); }
.to-pc { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; }
.to-ic { appearance: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-strong, rgba(127,127,127,.35)); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: background-color .15s; }
.to-ic:hover { background: rgba(127,127,127,.08); } .to-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.to-play { width: 42px; height: 42px; background: var(--ink); border-color: var(--ink); color: var(--paper); } .to-play:hover { background: var(--ink-soft); }
.to-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; } .to-play .i-pa, .is-playing .to-play .i-pl { display: none; } .is-playing .to-play .i-pa { display: block; }
.to-pl { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); }
.tp-ov { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tp-x { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-weight: 750; font-size: 1.1rem; color: var(--ink); background: rgba(127,127,127,.1); } .tp-x.is-w { background: #b5452f; color: #fff; }
.tp-t b { display: block; color: var(--ink); font-size: .98rem; } .tp-t small { font-weight: 600; font-size: .82rem; } .tp-t small.tm-ca { color: var(--ca); } .tp-t small.tm-cb { color: var(--cb); }
.tp-k { margin: 12px 0 4px; font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.tp-big { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; } .tp-big b { font-family: var(--serif); font-size: 2rem; line-height: 1; font-weight: 650; } .tp-big b.tm-ca { color: var(--ca); } .tp-big b.tm-cb { color: var(--cb); } .tp-big span { font-size: .78rem; }
.tp-bar { position: relative; height: 10px; border-radius: 5px; background: rgba(127,127,127,.1); margin: 4px 0 4px; }
.tp-sc { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: rgba(127,127,127,.45); transition: width .3s cubic-bezier(.2,.8,.2,1); }
.tp-exm { position: absolute; top: -4px; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); transition: left .3s cubic-bezier(.2,.8,.2,1); }
.tp-fin { position: absolute; top: -2px; width: 0; height: 14px; border-left: 1.5px dashed var(--ink-faint); }
.tp-bl { display: flex; justify-content: space-between; margin: 0; font-size: .72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tp-w { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(181,69,47,.07); font-size: .84rem; line-height: 1.45; } .tp-w b { color: var(--ink); } .tp-w small { color: var(--ink-faint); } .tp-w small b { color: #b5452f; }
.tp-st { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .tp-sc + .to-pd { margin-top: 8px; }
.tp-st .tp-sc { position: static; background: none; margin: 0; } .tp-st .tp-sc b { color: var(--ink); }
.to-pd { margin: 8px 0 0; display: grid; gap: 8px; } .to-pd dt { font-family: var(--mono); font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); } .to-pd dd { margin: 1px 0 0; line-height: 1.5; } .to-pd small { color: var(--ink-faint); } .to-pd b { color: var(--ink); }
.to-n { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(127,127,127,.35); text-underline-offset: 3px; } .to-n:hover { text-decoration-color: var(--ink); }
.to-fol { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .8rem; line-height: 1.5; } .to-fol b { color: var(--ink); }
.to-unf { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.to-more { display: none; } .to-keys { margin: 12px 0 0; font-size: .7rem; color: var(--ink-faint); } @media (hover: none) { .to-keys { display: none; } }
/* the wickets that cost most, the stands that built it */
.to-dec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 30px; }
.to-k { margin: 0 0 8px; font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); } .to-k small { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: .74rem; margin-left: 4px; }
.to-dl { list-style: none; margin: 0; padding: 0; }
.to-dj { appearance: none; width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 8px 4px; color: var(--ink-soft); font: inherit; cursor: pointer; transition: background-color .15s; }
.to-dj:hover { background: rgba(127,127,127,.06); } .to-dn { font-family: var(--serif); font-size: 1.05rem; color: var(--ink-faint); text-align: center; }
.to-dt { font-size: .86rem; min-width: 0; } .to-dt b { color: var(--ink); font-weight: 600; } .to-dt small { display: block; font-size: .74rem; color: var(--ink-faint); }
.to-dv { font-family: var(--serif); font-weight: 650; font-size: 1.2rem; font-variant-numeric: tabular-nums; } .to-dv.tm-ca { color: var(--ca); } .to-dv.tm-cb { color: var(--cb); }
@media (max-width: 1180px) { .to-grids { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .to-wrap, .to-dec { grid-template-columns: minmax(0, 1fr); }
  .tq { width: 27px; height: 27px; } .tq-r { height: 31px; grid-template-columns: 22px minmax(0, 1fr) 36px; gap: 6px; } .tq-cs { gap: 3px; }
  .to-now { position: fixed; left: 6px; right: 6px; bottom: 6px; top: auto; z-index: 40; max-height: 74vh; overflow: auto; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--line), 0 -10px 40px -12px rgba(0,0,0,.35); transform: translateY(130%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .to.is-in .to-now { transform: none; }
  .to-now:not(.is-open) .tp-ex, .to-now:not(.is-open) .tp-st, .to-now:not(.is-open) .to-fol { display: none; }
  .to-more { display: inline; appearance: none; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: .76rem; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0 0; cursor: pointer; }
  .tp-ov { padding-bottom: 6px; border-bottom: 0; } .to-pc { margin-bottom: 8px; } .to-ic { width: 30px; height: 30px; } .to-play { width: 36px; height: 36px; }
  .to-grids { padding-bottom: 150px; }
}