/* Match workspace: scoped surfaces, shared navigation and report links. */
.navbar { flex-wrap:wrap; gap:16px; }
.nav-links { flex-wrap:wrap; gap:14px; }
.nav-links a[aria-current="page"] { color:var(--color-primary-light); }
.match-app { --match-accent:var(--color-primary-light); --match-orange:var(--color-opponent); --match-line:var(--color-border); max-width:1480px; margin:auto; padding:12px 0 48px; }
.match-app a { color:inherit; }
.match-app button,.match-app input,.match-app select,.match-app textarea { font:inherit; }
.match-app button:not(:disabled),.match-app summary { cursor:pointer; }
.match-app button:disabled { opacity:.45; cursor:default; }
.match-app :focus-visible { outline:2px solid var(--match-accent); outline-offset:4px; }
.match-app .btn { border-radius:7px; font-weight:600; white-space:normal; text-align:center; }
.match-app .btn-primary { background:var(--color-primary); color:var(--color-on-primary); border:1px solid var(--color-primary); }
.match-app .btn-primary:hover { background:var(--color-primary-hover); }
.match-app .btn-secondary { background:var(--color-bg-elevated); border:1px solid var(--color-border-hover); color:var(--color-text-primary); }
.match-eyebrow { display:block; font-size:10px; font-weight:750; letter-spacing:1.7px; color:var(--color-text-secondary); margin-bottom:8px; }
.match-page-heading,.match-detail-heading { display:flex; justify-content:space-between; align-items:center; gap:28px; margin:24px 0 30px; }
.match-page-heading h1 { font-size:clamp(28px,3vw,42px); letter-spacing:-1.5px; line-height:1.15; }
.match-page-heading p { color:var(--color-text-secondary); margin-top:12px; max-width:650px; }
.match-actions { display:flex; gap:10px; flex-shrink:0; }
.match-filterbar { display:flex; align-items:end; flex-wrap:wrap; gap:12px; padding:18px; border:1px solid var(--match-line); border-radius:10px; background:var(--color-bg-surface); margin:30px 0; }
.match-filterbar label { flex:1; min-width:130px; }
.match-filterbar .match-search { flex:2; min-width:180px; }
.match-filterbar label span { display:block; font-size:11px; color:var(--color-text-secondary); margin-bottom:6px; }
.match-app input:not([type="checkbox"]),.match-app select,.match-app textarea { display:block; width:100%; min-width:0; padding:11px 12px; color:var(--color-text-primary); background:var(--color-bg-base); border:1px solid var(--color-border-hover); border-radius:6px; }
.match-app input[type="checkbox"] { accent-color:var(--match-accent); width:16px; height:16px; flex-shrink:0; }
.match-section-title { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:22px 0 18px; }
.match-section-title h2 { font-size:22px; letter-spacing:-.5px; }
.match-section-title h2>span,.match-goals-heading h2>span { font-size:12px; color:var(--color-text-secondary); margin-left:8px; padding:3px 7px; background:var(--color-border); border-radius:5px; vertical-align:middle; }
.match-section-title>a { color:var(--color-text-secondary); font-size:12px; text-decoration:none; }
.match-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.match-card { display:block; border:1px solid var(--match-line); background:var(--color-bg-surface); border-radius:10px; overflow:hidden; text-decoration:none; transition:border-color .15s,transform .15s; }
.match-card:hover { border-color:var(--color-primary-border); transform:translateY(-2px); }
.match-card-image { aspect-ratio:16/8; position:relative; background:var(--color-bg-elevated); overflow:hidden; }
.match-card-image img { width:100%; height:100%; object-fit:cover; }
.match-card-image:after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,var(--color-scrim)); }
.match-card-duration,.match-clean { position:absolute; bottom:12px; z-index:1; border-radius:4px; padding:3px 8px; font-size:10px; font-weight:650; background:var(--color-scrim); }
.match-card-duration { right:12px; font-variant-numeric:tabular-nums; }
.match-clean { left:12px; color:var(--match-accent); }
.match-no-image { display:flex; align-items:center; justify-content:center; height:100%; font-size:20px; letter-spacing:6px; color:var(--color-text-secondary); }
.match-card-body { padding:19px; }
.match-card-meta { display:flex; justify-content:space-between; align-items:center; color:var(--color-text-secondary); font-size:11px; margin-bottom:10px; }
.match-status { font-size:11px; color:var(--color-text-secondary); }
.match-status:before { content:""; display:inline-block; width:6px; height:6px; background:var(--color-text-secondary); border-radius:50%; margin-right:6px; }
.match-status.in_progress:before { background:var(--color-warning-text); }.match-status.reviewed:before { background:var(--color-success); }
.match-card h3 { font-size:17px; letter-spacing:-.3px; overflow-wrap:anywhere; }
.match-session-name { font-size:11px; margin:6px 0 18px; color:var(--color-text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.match-card-score { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:15px 0; border-top:1px solid var(--color-border); }
.match-card-score>span { font-size:12px; font-weight:650; overflow-wrap:anywhere; }.match-card-score>span:last-child { text-align:right; }
.match-card-score strong { font-size:30px; font-variant-numeric:tabular-nums; letter-spacing:-1px; }.match-card-score i { font-size:20px; font-style:normal; color:var(--color-text-muted); margin:0 5px; }
.match-card-bottom { padding-top:12px; display:flex; justify-content:space-between; align-items:center; font-size:10px; color:var(--color-text-secondary); border-top:1px solid var(--color-border); }.match-card-bottom b { font-size:18px; color:var(--match-accent); margin-left:5px; }
.match-breadcrumb { display:flex; gap:10px; flex-wrap:wrap; font-size:11px; color:var(--color-text-secondary); margin:14px 0 25px; }.match-breadcrumb a { text-decoration:none; }
.match-detail-heading { margin:0 0 24px; }.match-detail-heading h1 { font-size:clamp(22px,2.5vw,32px); letter-spacing:-1px; line-height:1.2; }
.match-scoreboard { position:relative; display:grid; grid-template-columns:1fr auto 1fr; gap:35px; align-items:center; padding:28px 45px; background:radial-gradient(ellipse at 10% 0%,var(--color-primary-soft),transparent 50%),radial-gradient(ellipse at 90% 100%,var(--color-bg-surface),transparent 55%),var(--color-bg-surface); border:1px solid var(--match-line); border-radius:12px; }
.match-team-side { font-size:9px; font-weight:700; letter-spacing:1.4px; color:var(--color-text-secondary); }.match-team h2 { font-size:clamp(20px,2.5vw,34px); line-height:1.15; margin:8px 0; overflow-wrap:anywhere; }.match-team>span:last-child { font-size:11px; color:var(--color-text-secondary); }.match-team.away { text-align:right; }.match-team.home h2 { color:var(--match-accent); }.match-team.away h2 { color:var(--match-orange); }
.match-result { text-align:center; }.match-result strong { display:flex; align-items:center; justify-content:center; gap:24px; font-size:clamp(48px,5vw,76px); font-weight:750; letter-spacing:-3px; line-height:1.1; font-variant-numeric:tabular-nums; }.match-result i { font-size:36px; font-style:normal; font-weight:400; color:var(--color-text-muted); }.match-result>span { display:block; font-size:10px; color:var(--color-text-secondary); margin-top:10px; }
.match-facts { display:flex; flex-wrap:wrap; gap:24px; padding:17px 3px; font-size:11px; color:var(--color-text-secondary); }.match-facts b { color:var(--color-text-primary); font-weight:650; }.match-clean-inline { color:var(--match-accent); }
.match-tabs { display:flex; gap:28px; border-bottom:1px solid var(--match-line); margin:8px 0 25px; overflow:auto; }.match-tabs a { white-space:nowrap; text-decoration:none; font-size:12px; padding:13px 0; color:var(--color-text-secondary); }.match-tabs a:first-child { color:var(--match-accent); border-bottom:2px solid var(--match-accent); }.match-tabs span { margin-left:5px; opacity:.7; }
.match-review { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr); align-items:start; gap:24px; scroll-margin-top:20px; }.match-player-column { min-width:0; }
.match-player-shell { aspect-ratio:16/9; background:var(--color-media); border:1px solid var(--match-line); border-radius:9px; overflow:hidden; }.match-player-shell video { width:100%; height:100%; display:block; }
.match-player-caption { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 0; }.match-player-caption h3 { font-size:16px; line-height:1.35; }.match-player-caption .match-eyebrow { margin-bottom:4px; font-size:9px; }
.match-timeline { position:relative; height:34px; margin:28px 15px 0; }.match-timeline:before { content:""; position:absolute; top:13px; left:0; right:0; height:3px; background:var(--color-border-hover); }.match-timeline-dot { position:absolute; top:0; transform:translateX(-50%); border:2px solid var(--color-bg-surface); border-radius:50%; width:25px; height:25px; font-size:9px!important; font-weight:750!important; color:var(--color-bg-base); background:var(--match-accent); padding:0; }.match-timeline-dot.side-1 { background:var(--match-orange); }.match-timeline-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--color-text-secondary); gap:12px; }.match-timeline-labels span:nth-child(2) { text-align:center; }
.match-goals-panel { border:1px solid var(--match-line); background:var(--color-bg-surface); border-radius:10px; overflow:hidden; }.match-goals-heading { padding:20px 20px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }.match-goals-heading h2 { font-size:18px; }.match-goals-heading label { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--color-text-secondary); }
.match-goal-filters { display:flex; gap:5px; padding:0 20px 16px; }.match-goal-filters button { border:1px solid var(--color-border-hover); background:transparent; color:var(--color-text-secondary); border-radius:5px; padding:6px 9px; font-size:10px; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.match-goal-filters button.active { background:var(--color-primary-soft); border-color:var(--color-primary-border); color:var(--color-primary-light); }
.match-goal-list { max-height:465px; overflow-y:auto; scrollbar-color:var(--color-border-hover) transparent; }.match-goal-row { display:flex; align-items:center; gap:10px; padding:0 16px; border-top:1px solid var(--color-border); border-left:3px solid transparent; }.match-goal-row.playing { background:var(--color-primary-soft); border-left-color:var(--match-accent); }.match-goal-row.side-1.playing { border-left-color:var(--match-orange); }
.match-goal-check { display:flex; }.match-goal-play { display:flex; align-items:center; flex:1; gap:14px; border:0; color:inherit; background:transparent; text-align:left; padding:13px 0; min-width:0; }.match-goal-number { color:var(--color-text-secondary); font-size:10px; font-variant-numeric:tabular-nums; }.match-goal-description { display:grid; grid-template-columns:auto 1fr; gap:0 12px; align-items:center; min-width:0; flex:1; }.match-goal-description>strong { grid-row:1 / 3; font-size:25px; min-width:54px; font-variant-numeric:tabular-nums; letter-spacing:-1px; }.match-goal-description i { font-style:normal; font-size:18px; color:var(--color-text-secondary); margin:0 4px; }.match-goal-description>span { font-size:11px; color:var(--color-text-primary); overflow-wrap:anywhere; }.match-goal-description>small { font-size:10px; color:var(--color-text-secondary); }.side-0 .match-goal-play-icon { color:var(--match-accent); }.side-1 .match-goal-play-icon { color:var(--match-orange); }.match-goal-play-icon { font-size:12px; }.match-goal-jump { border:0; background:transparent; color:var(--color-text-secondary); padding:12px 0 12px 5px; font-size:18px; }
.match-goal-row[hidden] { display:none; }
.match-report-selection { border-top:1px solid var(--color-border-hover); background:var(--color-bg-elevated); padding:16px 20px; display:flex; flex-direction:column; gap:9px; }.match-report-selection>span { font-size:11px; color:var(--color-text-secondary); }.match-report-selection .btn { font-size:12px; padding:10px; }
.match-section { border-top:1px solid var(--match-line); margin-top:38px; padding-top:10px; scroll-margin-top:20px; }.match-muted { font-size:12px; color:var(--color-text-secondary); line-height:1.7; }.match-muted a { color:var(--match-accent); }.match-report-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }.match-report-card { border:1px solid var(--match-line); border-radius:8px; background:var(--color-bg-surface); padding:22px; }.match-report-card h3 { font-size:17px; margin-bottom:8px; }.match-report-card a { text-decoration:none; }.match-report-card p { color:var(--color-text-secondary); font-size:12px; margin-bottom:18px; }.match-report-card>a:last-child { font-size:12px; color:var(--match-accent); }
.match-edit-form { display:grid; grid-template-columns:1.2fr 1fr; gap:24px; padding:26px; border:1px solid var(--match-line); border-radius:10px; background:var(--color-bg-surface); }.match-edit-form label { display:block; font-size:12px; color:var(--color-text-secondary); margin-bottom:16px; }.match-edit-form input,.match-edit-form select,.match-edit-form textarea { margin-top:6px; }.match-form-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.match-participant { border:1px solid var(--color-border-hover); border-radius:8px; padding:14px 18px 0; margin-bottom:16px; }.match-participant legend { padding:0 8px; color:var(--match-accent); font-size:11px; font-weight:650; }.match-participant.away legend { color:var(--match-orange); }.match-form-footer { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid var(--color-border-hover); padding-top:20px; font-size:12px; }
.match-panel { border:1px solid var(--match-line); border-radius:8px; padding:16px 20px; margin-top:25px; font-size:12px; }.match-panel summary { font-weight:650; color:var(--color-text-secondary); }.match-panel p { margin:14px 0; color:var(--color-text-secondary); }.match-panel a { color:var(--match-accent); }.match-other-clips { margin-top:15px; }.match-other-clips>div { display:flex; gap:15px; align-items:center; padding:10px 0; }.match-other-clips label { display:flex; gap:8px; align-items:center; font-size:10px; }.match-text-button { background:none; border:0; color:var(--color-text-secondary); text-align:left; overflow-wrap:anywhere; }
.match-empty { padding:28px; border:1px dashed var(--color-border-hover); border-radius:9px; color:var(--color-text-secondary); grid-column:1 / -1; }.match-empty h2,.match-empty h3 { font-size:17px; color:var(--color-text-primary); margin-bottom:8px; }.match-empty p { font-size:12px; line-height:1.8; margin-bottom:15px; }.match-empty-inline p { margin:0; }.match-goal-list .match-empty { border:0; padding:22px; }.match-guide { max-width:900px; }.match-guide h2 { font-size:23px; margin:28px 0 12px; }.match-guide p,.match-guide li { color:var(--color-text-secondary); font-size:14px; line-height:1.8; }.match-guide ol,.match-guide ul { padding-left:24px; margin:18px 0; }.match-guide li { margin:12px 0; }.match-guide a { color:var(--match-accent); }.match-guide pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:18px; margin:15px 0; background:var(--color-bg-surface); border:1px solid var(--color-border-hover); border-radius:8px; color:var(--color-text-secondary); }.match-import { max-width:800px; }.match-import form { padding:25px; border:1px solid var(--match-line); border-radius:10px; background:var(--color-bg-surface); }.match-import label { display:block; margin-bottom:18px; }.match-import input { margin:12px 0; }.match-import progress { width:100%; accent-color:var(--match-accent); margin:18px 0; }.match-import-result { padding:22px 0; }.match-import-result a { color:var(--match-accent); display:block; margin:10px 0; }
.report-match-banner { margin:12px 0 20px; border:1px solid var(--color-border-hover); border-radius:7px; padding:10px 14px; background:var(--color-bg-elevated); color:var(--color-text-secondary); font-size:12px; }.report-match-banner a { color:var(--color-primary-light); text-decoration:none; }.report-match-link { display:block; font-size:11px; color:var(--color-primary-light); margin:0 18px 15px; text-decoration:none; }
@media(min-width:1600px) { .match-goal-list { max-height:550px; } }
@media(max-width:1150px) { .match-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.match-page-heading { align-items:flex-start; flex-direction:column; }.match-scoreboard { padding:25px; gap:20px; }.match-review { grid-template-columns:minmax(0,1.4fr) minmax(310px,1fr); gap:18px; }.match-detail-heading { align-items:flex-start; flex-direction:column; gap:18px; } }
@media(max-width:800px) { .match-review { grid-template-columns:1fr; }.match-goal-list { max-height:440px; }.match-report-grid { grid-template-columns:1fr 1fr; }.match-edit-form { grid-template-columns:1fr; }.match-team-side { font-size:8px; letter-spacing:.5px; }.match-result strong { gap:15px; }.match-scoreboard { gap:15px; padding:20px; }.match-result>span { max-width:130px; }.match-facts { gap:14px; }.match-goal-description { grid-template-columns:70px 1fr; } }
@media(max-width:520px) { .match-app { padding-top:0; }.match-grid,.match-report-grid { grid-template-columns:1fr; }.match-actions { width:100%; flex-wrap:wrap; }.match-actions .btn { flex:1; font-size:12px; }.match-scoreboard { padding:18px 12px; gap:9px; }.match-team h2 { font-size:20px; }.match-team-side { display:none; }.match-team>span:last-child { display:block; font-size:9px; }.match-result strong { font-size:46px; gap:10px; }.match-result i { font-size:24px; }.match-result>span { font-size:8px; max-width:110px; }.match-tabs { gap:20px; }.match-section-title { align-items:flex-start; flex-wrap:wrap; }.match-section-title h2 { font-size:20px; }.match-section-title>a { max-width:125px; text-align:right; }.match-edit-form { padding:18px; }.match-form-pair { gap:10px; }.match-participant { padding:12px 12px 0; }.match-timeline-labels { font-size:8px; }.match-player-caption h3 { font-size:14px; }.match-detail-heading h1 { overflow-wrap:anywhere; }.match-breadcrumb { font-size:10px; }.match-facts { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .match-card { transition:none; }.match-card:hover { transform:none; } }