/* MSAL Results – styled to match the Game Results Submission Form mockup */
.msal-results{
 --msal-orange:#f15a38; --msal-orange-dark:#d9472a; --msal-ink:#111; --msal-text:#1a1a1a;
 --msal-muted:#8a8a8a; --msal-placeholder:#b3b3b3; --msal-line:#c9c9c9; --msal-radius:10px;
 --msal-font:"Brandon Grotesque","Outfit","Helvetica Neue",Arial,sans-serif;
 max-width:490px; margin:24px auto; border:2px solid var(--msal-ink); border-radius:18px; overflow:hidden;
 background:#fff; color:var(--msal-text); font-family:var(--msal-font); font-size:16px; line-height:1.35; text-align:left;
}
.msal-results,.msal-results *{box-sizing:border-box}

/* Header */
.msal-results .msal-header{display:flex; align-items:center; gap:30px; padding:26px 30px 26px 26px; background:var(--msal-ink)}
.msal-results .msal-logo{flex:0 0 auto; width:104px; height:104px; object-fit:contain; border-radius:50%; margin:0}
.msal-results .msal-header h2{margin:0; padding:0; color:#fff; font-family:var(--msal-font); font-size:32px; font-weight:700; line-height:1.05; letter-spacing:-.01em; text-transform:none}

/* Body */
.msal-results .msal-body{padding:32px 36px 38px}
.msal-results .msal-howto{margin:0 0 2px; font-family:var(--msal-font); font-size:18px; font-weight:700; color:var(--msal-text); text-transform:none; letter-spacing:0}
.msal-results .msal-intro{margin:0 0 30px; font-size:15.5px; line-height:1.4; color:var(--msal-text)}
.msal-results form{margin:0}
.msal-results label{display:block; margin:0}
.msal-results .msal-sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Dropdowns */
.msal-results .msal-select{position:relative; margin-bottom:20px}
.msal-results .msal-select::after{content:""; position:absolute; right:26px; top:50%; margin-top:-6px; border-left:14px solid transparent; border-right:14px solid transparent; border-top:13px solid #bdbdbd; pointer-events:none}
.msal-results select{
 display:block; width:100%; height:78px; margin:0; padding:0 64px 0 32px;
 border:1px solid var(--msal-line); border-radius:var(--msal-radius); background:#fff; box-shadow:none;
 font-family:var(--msal-font); font-size:19px; font-weight:500; color:var(--msal-text);
 -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;
}
.msal-results select:invalid,.msal-results select:has(option[value=""]:checked){color:var(--msal-placeholder)}
.msal-results select option{color:var(--msal-text)}
.msal-results select:disabled{background:#fff; cursor:not-allowed}

/* Games table */
.msal-results .msal-games{padding:8px 32px 0; margin-bottom:22px}
.msal-results .msal-row{display:grid; grid-template-columns:1fr 72px 72px; align-items:center; column-gap:0}
.msal-results .msal-head{margin-bottom:10px}
.msal-results .msal-head span{font-size:18px; font-weight:600; color:var(--msal-text)}
.msal-results .msal-head span:not(:first-child){text-align:center}
.msal-results .msal-list .msal-row{min-height:30px; padding:2px 0}
.msal-results .msal-game{display:flex; flex-direction:column; min-width:0; padding-right:10px}
.msal-results .msal-sport{font-size:16px; color:var(--msal-muted)}
.msal-results .msal-detail{font-size:12.5px; color:#a8a8a8; line-height:1.25; overflow-wrap:anywhere}
.msal-results .msal-empty{margin:4px 0 0; font-size:15px; color:var(--msal-muted)}
.msal-results .msal-box{display:flex; justify-content:center; align-items:center; cursor:pointer}

/* Square check boxes (radio inputs so only Won OR Lost can be picked) */
.msal-results .msal-box input{
 -webkit-appearance:none; -moz-appearance:none; appearance:none;
 width:25px; height:25px; margin:0; padding:0; border:1px solid var(--msal-line); border-radius:5px;
 background:#fff center/16px 16px no-repeat; cursor:pointer; transition:background-color .15s,border-color .15s;
}
.msal-results .msal-box input:hover{border-color:var(--msal-orange)}
.msal-results .msal-box input:checked{
 background-color:var(--msal-orange); border-color:var(--msal-orange);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.msal-results .msal-box input:disabled{cursor:not-allowed; opacity:.6}

/* Notes */
.msal-results .msal-notes{margin-bottom:18px}
.msal-results textarea{
 display:block; width:100%; min-height:186px; margin:0; padding:26px 32px; resize:vertical;
 border:1px solid var(--msal-line); border-radius:var(--msal-radius); background:#fff; box-shadow:none;
 font-family:var(--msal-font); font-size:19px; font-weight:500; color:var(--msal-text);
}
.msal-results textarea::placeholder{color:var(--msal-placeholder); opacity:1}

/* Submit */
.msal-results button{
 display:block; width:100%; height:76px; margin:0; padding:0 24px; border:0; border-radius:6px;
 background:var(--msal-orange); color:#fff; font-family:var(--msal-font); font-size:20px; font-weight:600;
 letter-spacing:0; text-transform:none; box-shadow:none; cursor:pointer; transition:background-color .15s;
}
.msal-results button:hover:not(:disabled){background:var(--msal-orange-dark)}
.msal-results button:disabled{opacity:.55; cursor:not-allowed}

.msal-results :focus-visible{outline:3px solid var(--msal-orange); outline-offset:2px}
.msal-results select:focus,.msal-results textarea:focus{border-color:#888; outline:none}
.msal-results select:focus-visible,.msal-results textarea:focus-visible{outline:3px solid var(--msal-orange); outline-offset:2px}
.msal-results .msal-trap{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.msal-message{min-height:1.5em; margin:14px 0 0; font-size:14px; color:#555; text-align:center}

@media (max-width:500px){
 .msal-results{margin:12px auto; border-radius:14px}
 .msal-results .msal-header{gap:18px; padding:20px}
 .msal-results .msal-logo{width:80px; height:80px}
 .msal-results .msal-header h2{font-size:25px}
 .msal-results .msal-body{padding:24px 20px 28px}
 .msal-results select{height:64px; padding-left:20px; font-size:17px}
 .msal-results .msal-select::after{right:20px}
 .msal-results .msal-games{padding:6px 12px 0}
 .msal-results .msal-row{grid-template-columns:1fr 58px 58px}
 .msal-results textarea{padding:18px 20px; font-size:17px; min-height:150px}
 .msal-results button{height:64px; font-size:18px}
}