/* The two teams' figures before the match: the Preview's "Season Figures" section since 2026-11-05 (Stats tab locked; mockup 7 version 3): panels with the lime diamond, the label centred on a skewed
   dark pill with the two values either side and the bars below from the centre out (lime: home, sky: away), the
   league as a white tick. Greys brighter than the rest of the app had them (owner, 2026-10-31). */
.ms { --ms-h: #d1fe17; --ms-a: #9ce6f3; --ms-tx: #f2f3f5; --ms-mu: #b3b4b8; --ms-dim: #9a9ca1; --ms-ln: rgba(255,255,255,.07);
  --ms-mono: "Space Mono", ui-monospace, monospace; display: flex; flex-direction: column; gap: 14px; color: var(--ms-tx); }
.ms-lead { margin: 2px 0 0; color: var(--ms-mu); font-size: 13px; }
.ms-pnl { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: linear-gradient(180deg, rgba(24,25,28,.96), rgba(19,21,23,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; }
.ms-pnl.focus { border-color: rgba(209,254,23,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 36px -18px rgba(209,254,23,.35); }
.ms-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--ms-ln); }
.ms-ph h3 { display: flex; align-items: center; gap: 9px; margin: 0; font: 700 13px/1 "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: .01em; color: var(--ms-tx); }
.ms-ph h3::before { content: ""; width: 6px; height: 6px; background: var(--ms-h); transform: rotate(45deg); box-shadow: 0 0 8px var(--ms-h); }
.ms-sl { font: 400 10.5px var(--ms-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ms-dim); }
.ms-sl.h { color: var(--ms-h); margin: 0 0 8px; } .ms-sl.a { color: var(--ms-a); margin: 0 0 8px; }
.ms-rt { margin-left: auto; }
.ms-cap { margin: 0; padding: 9px 16px; border-bottom: 1px solid var(--ms-ln); color: var(--ms-mu); font-size: 12.5px; }
.ms-body { padding: 12px 16px 14px; }
.ms-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.035); border: 1px solid var(--ms-ln); }
.ms-seg button { border: 0; background: none; color: var(--ms-mu); font: 600 11px Inter, sans-serif; letter-spacing: .02em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.ms-seg button[aria-pressed="true"] { background: #1f2124; color: var(--ms-tx); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
/* the strip */
.ms-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border: 1px solid var(--ms-ln); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.015); }
.ms-strip > div { padding: 10px 14px; border-right: 1px solid var(--ms-ln); min-width: 0; }
.ms-strip > div > span { display: block; font: 600 9px/1.2 var(--ms-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ms-dim); }
.ms-strip b, .ms-kp b { display: block; margin-top: 7px; font: 700 italic 15px/1 var(--ms-mono); letter-spacing: -.02em; white-space: nowrap; }
.ms-strip small { display: block; margin-top: 5px; font: 400 10px var(--ms-mono); color: var(--ms-dim); }
.ms b .h, .ms .ms-v.h { color: var(--ms-h); } .ms b .a, .ms .ms-v.a { color: var(--ms-a); } .ms b i { color: var(--ms-dim); font-style: normal; font-weight: 400; }
.ms-kp { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--ms-ln); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.ms-kp > div { padding: 9px 13px; border-right: 1px solid var(--ms-ln); }
.ms-kp > div > span { display: block; font: 600 9px/1.2 var(--ms-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ms-dim); }
/* one figure */
.ms-keys { display: flex; justify-content: center; gap: 20px; margin: 0 0 4px; font: 600 9.5px var(--ms-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ms-dim); }
.ms-keys .h { color: var(--ms-h); } .ms-keys .a { color: var(--ms-a); } .ms-keys i { display: inline-block; width: 2px; height: 9px; background: rgba(255,255,255,.6); margin-right: 6px; vertical-align: -1px; }
.ms-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 30px; }
.ms-m { padding: 8px 0 10px; border-bottom: 1px solid var(--ms-ln); }
.ms-t { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.ms-v { font: 700 italic 14.5px var(--ms-mono); letter-spacing: -.02em; }
.ms-v.h { text-align: right; }
.ms-pill { justify-self: center; max-width: 230px; padding: 5px 11px 4px; border-radius: 4px; transform: skewX(-14deg); background: #222428;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.04); font: 600 11.5px/1.25 Inter, sans-serif; color: #dcdde0; text-align: center; }
.ms-pill > span { display: block; transform: skewX(14deg); }
.ms-pill em { display: block; margin-top: 2px; font: 400 9.5px var(--ms-mono); font-style: normal; color: var(--ms-dim); letter-spacing: .05em; }
.ms-b { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 7px; height: 8px; }
.ms-b > i { position: relative; display: block; height: 100%; border-radius: 2px; background: rgba(255,255,255,.04); overflow: hidden; }
.ms-b > i > u { position: absolute; top: 0; bottom: 0; display: block; }
.ms-b > i:first-child > u { right: 0; background: linear-gradient(270deg, var(--ms-h), rgba(209,254,23,.2)); box-shadow: 0 0 12px -2px rgba(209,254,23,.6); }
.ms-b > i:last-child > u { left: 0; background: linear-gradient(90deg, var(--ms-a), rgba(156,230,243,.2)); box-shadow: 0 0 12px -2px rgba(156,230,243,.6); }
.ms-b > i > u::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.28) 0 2px, transparent 2px 6px); }
.ms-b > i > s { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.6); border-radius: 1px; }
.ms-form { max-width: 560px; margin: 0 auto 8px; border: 0; }
.ms-r { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0 2px; border-radius: 4px; transform: skewX(-12deg); font: 700 11px var(--ms-mono); font-style: normal; color: #111; }
.ms-r.W { background: #d1fe17; } .ms-r.D { background: #ffbe4c; } .ms-r.L { background: #ff5c8f; color: #fff; }
/* head to head */
.ms-lcdc { display: flex; justify-content: center; margin: 2px 0 12px; }
.ms-lcd { min-width: 230px; text-align: center; padding: 9px 14px 11px; border-radius: 10px; border: 1px solid rgba(209,254,23,.45); background: rgba(209,254,23,.04);
  box-shadow: 0 0 30px -10px rgba(209,254,23,.55), inset 0 0 20px -10px rgba(209,254,23,.4); }
.ms-lcd small { display: block; font: 400 9.5px var(--ms-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--ms-dim); }
.ms-lcd b { display: block; margin-top: 4px; font: 700 36px/1 var(--ms-mono); letter-spacing: -.05em; color: var(--ms-h); text-shadow: 0 0 22px rgba(209,254,23,.45), 0 0 2px rgba(255,255,255,.5); }
.ms-lcd em { display: block; margin-top: 6px; font: 400 10.5px var(--ms-mono); font-style: normal; color: var(--ms-mu); }
.ms-wdl { display: flex; height: 12px; gap: 3px; margin: 0 0 12px; } .ms-wdl i { display: block; border-radius: 2px; transform: skewX(-14deg); }
.ms-wdl .h { background: var(--ms-h); box-shadow: 0 0 14px -3px var(--ms-h); } .ms-wdl .d { background: #5c5e62; } .ms-wdl .a { background: var(--ms-a); box-shadow: 0 0 14px -3px var(--ms-a); }
.ms-meet { display: grid; grid-template-columns: 76px 1fr auto 1fr 70px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--ms-ln); font-size: 13px; color: var(--ms-mu); }
.ms-meet .dt, .ms-meet .ht { font: 400 11px var(--ms-mono); color: var(--ms-dim); } .ms-meet .ht { text-align: right; } .ms-meet .hm { text-align: right; } .ms-meet .w { color: var(--ms-tx); font-weight: 600; }
.ms-meet .sc { display: flex; gap: 4px; font: 700 14px var(--ms-mono); color: var(--ms-tx); } .ms-meet .sc span { padding: 2px 7px; border-radius: 4px; transform: skewX(-8deg); background: rgba(255,255,255,.07); }
.ms-more { margin: 10px 0 0; text-align: center; }
/* half time to full time: every case in words (owner, 2026-11-05) */
.ms-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; } .ms-sec { margin-top: 0; } .ms-sec > .ms-pnl { min-width: 0; }
.ms-hfh { margin: 16px 0 0; }
.ms-hf p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--ms-ln); }
.ms-hft { flex: 1 1 160px; font: 600 13px Inter, sans-serif; color: var(--ms-tx); }
.ms-hft em { margin-left: 6px; font: 400 11px Inter, sans-serif; font-style: normal; color: var(--ms-dim); }
.ms-hfo { font: 400 12.5px Inter, sans-serif; color: var(--ms-dim); }
.ms-hfo b { font: 700 italic 14px var(--ms-mono); color: var(--ms-dim); }
.ms-hf.h .ms-hfo.on b { color: var(--ms-h); } .ms-hf.a .ms-hfo.on b { color: var(--ms-a); } .ms-hfo.on { color: var(--ms-mu); }
/* a percentage's count, under it */
.ms-v .ms-n { display: block; margin-top: 1px; font: 400 10.5px Inter, sans-serif; font-style: normal; letter-spacing: 0; color: var(--ms-dim); }
/* one switch above Corners and Cards */
.ms-setsw { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 2px 2px -4px; }
/* minute chart */
.ms-chart svg { display: block; width: 100%; height: auto; }
.ms-chart .ax { fill: #9a9ca1; font: 11px "Space Mono", monospace; letter-spacing: 1px; }
.ms-chart .vh { fill: #d1fe17; font: italic 700 12px "Space Mono", monospace; } .ms-chart .va { fill: #9ce6f3; font: italic 700 12px "Space Mono", monospace; }
.ms-gam, .ms-note { margin: 4px 0 0; font: 400 11px/1.6 var(--ms-mono); color: var(--ms-dim); }
@media (max-width: 760px) {
  .ms-g2 { grid-template-columns: 1fr; } .ms-g { grid-template-columns: 1fr; }
  .ms-pill { max-width: 170px; font-size: 11px; } .ms-ph .ms-rt { margin-left: 0; flex-basis: 100%; }
  .ms-meet { grid-template-columns: 58px 1fr auto 1fr; gap: 6px; font-size: 12.5px; } .ms-meet .ht { display: none; }
  .ms-body, .ms-ph, .ms-cap { padding-left: 12px; padding-right: 12px; }
}
/* light theme (owner 2026-11-05, option A built): the same panels on white, home in olive, away in teal */
html.lt .ms { --ms-h: var(--lt-olive); --ms-a: #2f97ab; --ms-tx: var(--lt-ink); --ms-mu: var(--lt-ink2); --ms-dim: var(--lt-muted); --ms-ln: var(--lt-line); }
html.lt .ms-pnl { background: #ffffff; border-color: var(--lt-line); box-shadow: none; }
html.lt .ms-pnl.focus { border-color: rgba(75,115,0,.35); box-shadow: none; }
html.lt .ms-ph h3::before { box-shadow: none; }
html.lt .ms-seg { background: var(--lt-box); }
html.lt .ms-seg button[aria-pressed="true"] { background: #ffffff; color: var(--lt-ink); box-shadow: inset 0 0 0 1px var(--lt-line); }
html.lt .ms-pill { background: var(--lt-box); box-shadow: inset 0 0 0 1px var(--lt-line); color: var(--lt-ink); }
html.lt .ms-b > i { background: var(--lt-soft); }
html.lt .ms-b > i:first-child > u { background: linear-gradient(270deg, var(--lt-olive), rgba(75,115,0,.25)); box-shadow: none; }
html.lt .ms-b > i:last-child > u { background: linear-gradient(90deg, #2f97ab, rgba(47,151,171,.25)); box-shadow: none; }
html.lt .ms-b > i > u::after { background: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 2px, transparent 2px 6px); }
html.lt .ms-b > i > s, html.lt .ms-keys i { background: rgba(16,20,24,.6); }
html.lt .ms-chart .ax { fill: var(--lt-muted); } html.lt .ms-chart .vh { fill: var(--lt-olive); } html.lt .ms-chart .va { fill: #2f97ab; }
html.lt .ms-chart line { stroke: rgba(16,20,24,.12); }
html.lt .ms-chart rect[stroke="#d1fe17"] { stroke: var(--lt-olive); } html.lt .ms-chart rect[stroke="#9ce6f3"] { stroke: #2f97ab; }