/* Phase D: role + surface tokens (extends refine.css). Navy surfaces read tokens so Liquid Glass can swap them. */
:root{--fs-page:var(--fs-h1);--fs-section:var(--fs-h2);--fs-card:var(--fs-h3);--fs-name:15px;--fs-score:clamp(28px,8vw,34px);--fs-statv:var(--fs-stat);--fs-meta:12px;--fs-btn:var(--fs-button);--fs-nav:11px;--fw-heavy:800;--lh-meta:1.35;--pad-card:12px 16px;--gap-section:12px}
[data-theme=navy]{--s-page:#071A5A;--s-card:#1D306F;--s-raised:rgba(142,192,255,.12);--s-header:#071A5A;--s-nav:#1D306F;--s-line:rgba(142,192,255,.22);--s-divider:rgba(195,205,235,.18);--s-elev:none;--s-blur:none;--s-strong:#8EC0FF}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Surfaces (navy): one card style, no nested cards */
[data-theme=navy] body>header{background:var(--s-header)}
[data-theme=navy] #app :is(.card,.club-section,.live-spotlight,.no-match,.account-page,.series-score,.wizard-content,.score-hero,fieldset){background:var(--s-card);border:1px solid var(--s-line);box-shadow:var(--s-elev);-webkit-backdrop-filter:var(--s-blur);backdrop-filter:var(--s-blur)}
#app :is(.club-section,.card,.account-page,.score-hero) :is(.card,.club-section,fieldset){box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
[data-theme=navy] #app :is(.club-section,.card) .card{background:transparent;border-color:var(--s-divider)}
@media(max-width:768px){[data-theme=navy] #tabbar{background:var(--s-nav);border-top-color:var(--s-line)}}

/* Club teal must not leak into navy */
[data-theme=navy] #app :is(.lp-row.is-striker strong,.ball-status.saved,.profile-ranks strong){color:var(--s-strong)}
[data-theme=navy] #app .bowler-panel{border-color:#4C9BFF}
[data-theme=navy] #app .innings-break{border-left-color:#4C9BFF}
[data-theme=navy] #app .mm-filters button.active{background:#4C9BFF;border-color:#4C9BFF;color:#071A5A}
[data-theme=navy] #app .initials{background:rgba(142,192,255,.12);color:#fff}

/* Type roles */
#app .card-title,#app .club-section h3{font-size:var(--fs-card);font-weight:var(--fw-semibold)}
#app .meta,#app .club-section small{font-size:var(--fs-meta);line-height:var(--lh-meta)}
#app .section-heading{margin:0 0 var(--sp-2);align-items:baseline}
#app .section-heading h2{margin:0}
#app .section-heading>a{flex:none;font-size:13px;font-weight:var(--fw-semibold)}
#app .club-section{margin:0 0 var(--gap-section)}

/* Home */
#app .club-title{margin-bottom:var(--sp-3);align-items:center}
#app .club-title h1{font-size:18px;margin:0;line-height:1.25}
#app .club-title .eyebrow{margin:0 0 2px}
#app .club-title>div{flex:1 1 150px}
#app .club-title .club-primary{min-height:40px;padding:0 14px;font-size:13px}
#app .live-spotlight{padding:var(--pad-card)}
#app .live-spotlight h2{font-size:var(--fs-card);margin:4px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .live-spotlight .live-score{font-size:var(--fs-score);font-weight:var(--fw-heavy);line-height:1.1;margin:2px 0 6px}
#app .live-spotlight .live-score small{font-size:15px;font-weight:var(--fw-semibold);margin-left:6px}
#app .live-spotlight p{margin:4px 0 0}
#app .no-match{padding:var(--pad-card)}
#app .club-section .h-scroll{margin:0 -16px;padding:4px 16px 10px;scroll-padding-inline:16px;gap:10px}
#app .club-section .h-scroll>.club-match-row{flex:0 0 78%;max-width:300px;scroll-snap-align:start;padding:12px;border-radius:var(--radius-card);margin:0;box-shadow:none}
[data-theme=navy] #app .h-scroll>.club-match-row{background:var(--s-raised);border:1px solid var(--s-line);color:#fff}
[data-theme=navy] #app .h-scroll>.club-match-row p{color:#C3CDEB}
#app .h-scroll>.club-match-row h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0}
#app .h-scroll>.club-match-row p{margin:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .h-scroll>.club-match-row>span{display:none}
#app .series-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;margin:0;border:0;border-top:1px solid var(--s-divider,var(--line));border-radius:0;background:transparent;box-shadow:none;text-decoration:none;color:inherit}
#app .section-heading+.series-row,#app .series-row:first-child{border-top:0}
#app .series-row>div{min-width:0;flex:1}
#app .series-row h3{margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .series-row p{margin:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .series-status{flex:none;font-size:12px;white-space:nowrap}
#app .feed-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--s-divider,var(--line))}
#app .section-heading+.feed-row,#app .feed-row:first-child{border-top:0}
#app .feed-icon{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--s-raised,var(--surface-raised));color:var(--s-strong,var(--green))}
#app .feed-icon svg{width:18px;height:18px}
#app .feed-row strong{display:block;font-size:14px;font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .feed-row small{display:block;color:var(--muted)}
#app [data-testid=home-season] .club-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#app [data-testid=home-season] .club-columns section{padding:0;margin:0;border:0;background:transparent}
#app [data-testid=home-season] .club-columns h3{font-size:13px;margin:0 0 4px}
#app [data-testid=home-season] .club-leaders{margin:0;padding:0}
#app [data-testid=home-season] .club-leaders li:nth-child(n+4){display:none}
#app [data-testid=home-season] .club-leaders li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:6px;align-items:baseline;padding:2px 0;font-size:13px}
#app [data-testid=home-season] .club-leaders li a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app [data-testid=home-season] .big-figure{font-size:var(--fs-stat);margin:0}

/* Rankings page */
#app .seg-row{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-2) 0 0}
#app .seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--radius-pill);border:1px solid var(--s-line,var(--line))}
#app .seg-btn{min-height:32px;height:32px;padding:0 14px;border-radius:var(--radius-pill);border:0;background:transparent;color:inherit;font-size:13px;font-weight:var(--fw-semibold);line-height:32px}
[data-theme] #app .seg-btn.active{background:var(--accent,var(--green));color:var(--accent-ink,#fff);border:0}
#app .ranking-explainer{display:flex;gap:8px;align-items:baseline;margin:var(--sp-2) 0;padding:0;font-size:12px}
#app .ranking-explainer strong{font-size:13px}
#app .professional-rankings{table-layout:fixed;width:100%}
#app .professional-rankings :is(th,td):nth-child(1){width:48px;padding-left:4px;padding-right:4px;text-align:center}
#app .professional-rankings :is(th,td):nth-child(2){width:auto}
#app .professional-rankings :is(th,td):nth-child(3){width:64px;text-align:right}
#app .professional-rankings :is(th,td):nth-child(4){width:42px;text-align:right}
#app .professional-rankings td{padding:11px 6px;vertical-align:middle}
#app .professional-rankings th{padding:8px 6px;font-size:10px;letter-spacing:.06em;white-space:nowrap}
#app .professional-rankings .rank-player-cell{display:flex;align-items:center;gap:10px;min-width:0}
#app .professional-rankings .rank-player-cell>div{min-width:0;flex:1}
#app .professional-rankings .rank-player-cell :is(a,strong,small){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .professional-rankings .rank-avatar{flex:none;width:32px;height:32px}
#app .professional-rankings .rank-number{font-size:17px;font-weight:var(--fw-bold)}
#app .professional-rankings .rating-number{font-size:17px;font-weight:var(--fw-heavy)}
#app .professional-rankings td small{margin-top:2px}

/* Match centre / live */
[data-theme] #app details.match-actions{background:transparent;border:1px solid var(--s-line,var(--line));border-radius:var(--radius-control);padding:0;margin:var(--sp-3) 0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;width:100%;max-width:none;grid-column:1/-1}
[data-theme] #app details.match-actions>summary{color:inherit;min-height:44px;display:flex;align-items:center;padding:0 var(--sp-4);font-weight:var(--fw-semibold);font-size:14px;cursor:pointer}
[data-theme] #app details.match-actions[open]{padding:0 var(--sp-3) var(--sp-3)}

/* Controls: one height, >=16px text */
body :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),select){height:var(--btn-h);font-size:var(--fs-control)}

/* AA contrast on navy surfaces: accent text uses the light accent, no faded labels */
[data-theme=navy] #app .club-primary{color:#071A5A!important}
[data-theme=navy] #app :is(.series-status,.mm-card-link strong){color:#8EC0FF}
[data-theme=navy] #app .mm-filters button span{opacity:1}
[data-theme] #app .cmp-tabs button{opacity:1}
#app .theme-preview[aria-pressed=true]{outline:3px solid #4C9BFF;outline-offset:2px}

/* Navy + Glass: palette-only colours (status green #5EE29A / red #e5484d are the existing status tokens) */
[data-theme=navy]{--cmp-a:#4C9BFF;--cmp-b:#071A5A}
[data-theme=navy] .home-top3{--t3-line:rgba(142,192,255,.35)}
[data-theme=navy] #app .chart-grid{stroke:rgba(142,192,255,.22)}
[data-theme=navy] #app .chart-line{stroke:#4C9BFF}
[data-theme=navy] #app .chart-dot{fill:#4C9BFF}
[data-theme=navy] #app .form-dot{background:rgba(142,192,255,.12);color:#C3CDEB}
[data-theme=navy] #app .form-dot.win{background:#5EE29A;color:#071A5A}
[data-theme=navy] #app .form-dot.loss{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #e5484d}
[data-theme=navy] #app .mm-status.mm-s-paused{color:#8EC0FF;background:#1D306F;border:1px solid #8EC0FF;border-radius:999px;padding:1px 8px}
[data-theme=navy] #app .live-dock .boundary,[data-theme=navy] #app .runs .boundary{border-color:#4C9BFF}
[data-theme=navy] #app .event-buttons .wicket-action{background:#fff;color:#071A5A;border:2px solid #e5484d}
[data-theme=navy] #app .empty-ball{background:transparent;color:#C3CDEB;box-shadow:inset 0 0 0 1px rgba(142,192,255,.35)}
[data-theme=navy] #app .scorecard-total{background:rgba(7,26,90,.08);color:#071A5A}
[data-theme=navy] #app .professional-rankings :is(th,td){background:#fff;border-color:rgba(7,26,90,.12)}
[data-theme=navy] #app .professional-rankings th{color:#1D306F;border-bottom:1px solid rgba(7,26,90,.12)}
[data-theme=navy] #app .professional-rankings :is(small,.muted,.rank-number){color:#1D306F}
[data-theme=navy] #app .movement.new{color:#1D306F;background:rgba(7,26,90,.08)}
[data-theme=navy] #app .movement.up{color:#071A5A;background:#5EE29A;border-radius:6px;padding:2px 4px}
[data-theme=navy] #app .movement.down{color:#071A5A;background:#fff;box-shadow:inset 0 0 0 1px #e5484d;border-radius:6px;padding:2px 4px}
[data-theme=navy] #app :is(.cmp-body){background:#fff}
[data-theme=navy] #app .cmp-seg{background:rgba(7,26,90,.08)}
[data-theme=navy] #app :is(.cmp-empty,.cmp-label,.cmp-body small){color:#1D306F}
[data-theme=navy] #app .cmp-axis{fill:#1D306F}
[data-theme=navy] #app .cmp-grid{stroke:rgba(7,26,90,.12)}
[data-theme=navy] #app .cmp-dot1{background:#4C9BFF}
[data-theme=navy] #app .cmp-dot2{background:#071A5A}
[data-theme=navy] #app .professional-rankings tbody tr:nth-child(even) td{background:#fff}
[data-theme=navy] #app .cmp-tabs{border-bottom-color:rgba(7,26,90,.12)}
[data-theme=navy] #app .cmp-tabs button.on{border-bottom-color:#4C9BFF}
[data-theme=navy] #app .cmp-card-title{border-bottom-color:rgba(7,26,90,.12)}
[data-theme=navy] #app .cmp-row{border-bottom-color:rgba(7,26,90,.12)}
[data-theme=navy] #app .cmp-head{background:#1D306F;border:1px solid var(--s-line)}
[data-theme=navy] #app :is(.cmp-body,.cmp-duel-head){background:#fff}
[data-theme=navy] #app :is(.cmp-seg,.cmp-x,.cmp-list button:hover,.cmp-list button.on){background:rgba(7,26,90,.08)}
[data-theme=navy] #app :is(.cmp-v small,.cmp-label,.cmp-list small,.cmp-chart figcaption small){color:#1D306F}
[data-theme=navy] #app .cmp-sheet input{border-color:#C3CDEB}
[data-theme=navy] .cmp-sheet input{border-color:#C3CDEB}
[data-theme=navy] .cmp-list button.on,[data-theme=navy] .cmp-list button:hover{background:rgba(7,26,90,.08)}
[data-theme=navy] #app .cmp-grid{fill:none}
[data-theme=navy] #app :is(.initials,.rank-avatar.initials){background:#1D306F;color:#fff;box-shadow:inset 0 0 0 1px rgba(142,192,255,.35)}
[data-theme=navy] #app :is(.rating-history-panel svg,.cmp-chart svg){fill:none}
[data-theme=navy] #app .big-figure{color:#8EC0FF}
/* Links inside white tables stay navy; season numbers use the light accent */
[data-theme=navy] #app :is(table,.innings-scorecard,.scorecard,.cmp-body) td a{color:#1D306F}
[data-theme=navy] #app [data-testid=home-season] :is(strong,b,.big-figure){color:#8EC0FF}

/* Scoring v2: innings-break / match-completed popups, change-bowler control */
#app .lp-bowler-actions{display:flex;justify-content:flex-end;margin-top:6px}
#app .lp-change{min-height:36px;height:36px;margin-left:0;padding:0 10px;font-size:12px;font-weight:700;border-radius:999px}
.mp-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(7,26,90,.72)}
.mp-card{width:min(420px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px 20px 20px;border-radius:24px;background:#1D306F;color:#FFFFFF;border:1px solid rgba(142,192,255,.35);box-shadow:0 16px 40px rgba(7,26,90,.6);text-align:center;animation:mp-in .28s ease-out}
.mp-pill{display:inline-block;padding:4px 12px;border-radius:999px;background:rgba(94,226,154,.16);color:#5EE29A;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mp-card h2{margin:12px 0 4px;font-size:24px;font-weight:800;color:#FFFFFF}
.mp-sub{margin:4px 0;color:#C3CDEB;font-size:14px}
.mp-score{display:flex;justify-content:center;align-items:baseline;gap:10px;margin:14px 0;padding:12px;border-radius:16px;background:rgba(142,192,255,.12)}
.mp-score strong{font-size:32px;font-weight:800}.mp-score span{color:#C3CDEB}
.mp-target{margin:4px 0 14px;font-size:18px;font-weight:700}.mp-target b{display:block;font-size:44px;font-weight:800;line-height:1.1;color:#8EC0FF}
.mp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.mp-tiles div{padding:12px;border-radius:14px;background:rgba(142,192,255,.12)}.mp-tiles small{display:block;color:#C3CDEB;font-size:12px}.mp-tiles strong{font-size:22px;font-weight:800}
.mp-lead{font-size:18px;font-weight:700;color:#8EC0FF}
.mp-scores{display:grid;gap:8px;margin:14px 0}.mp-scores div{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(142,192,255,.12)}
.mp-scores small{color:#C3CDEB}
[data-theme] .mp-primary{width:100%;min-height:52px;border:0;border-radius:14px;background:#4C9BFF;color:#071A5A;font-size:17px;font-weight:800;cursor:pointer}
[data-theme] .mp-quiet{width:100%;min-height:44px;margin-top:8px;border:1px solid rgba(142,192,255,.35);border-radius:14px;background:transparent;color:#FFFFFF;font-weight:700;cursor:pointer}
@keyframes mp-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mp-card{animation:none}}
[data-theme] #app :is(.runs,.event-buttons,.scoring-tools) button:not(.boundary):not(.wicket-action),[data-theme] #app .lp-change{background:#1D306F;border:1px solid rgba(142,192,255,.35);color:#fff;opacity:1}
[data-theme] #app :is(.runs,.event-buttons,.scoring-tools) button:not(.boundary):not(.wicket-action):hover,[data-theme] #app .lp-change:hover{background:#1D306F;border-color:#4C9BFF}
[data-theme] #app .scoring-tools button:disabled{opacity:1;color:#8EC0FF;cursor:not-allowed}
[data-theme] #app .runs .boundary,[data-theme] #app .runs .boundary:hover{background:#4C9BFF;color:#071A5A;border-color:#4C9BFF;opacity:1}
[data-theme] #app .event-buttons .wicket-action,[data-theme] #app .event-buttons .wicket-action:hover{background:#fff;color:#071A5A;border:2px solid #e5484d;opacity:1}
[data-theme] .scoring-sheet .advanced summary,[data-theme] #app .advanced summary{color:inherit;font-size:13px;font-weight:600}