body>main{margin-bottom:var(--space-12);& h2,& h3{border:none;margin:0;padding:0}&>p:nth-of-type(2){outline:var(--bw-medium) solid var(--quaternary);border-radius:var(--radius-2xl);padding:var(--space-4);width:var(--container-section);box-shadow:var(--shadow-md);color:var(--neutral-900);background:color-mix(in srgb, var(--quaternary-light) 25%, var(--neutral-50));font-size:var(--text-md);line-height:var(--lh-normal);text-align:center;margin:0 auto var(--space-6) auto}& section[aria-labelledby=about-calculator]{outline:var(--bw-medium) solid var(--secondary);margin-bottom:var(--space-6);& details{&[open]{& summary{& svg{transform:rotate(180deg)}}}& summary{cursor:pointer;transition-duration:var(--duration-normal);color:var(--neutral-800);grid-template-columns:1fr auto;align-items:center;display:grid;& h2{color:var(--secondary-dark)}& svg{width:var(--text-xl);height:auto;fill:var(--secondary);transition-duration:var(--duration-normal);margin-bottom:var(--space-3)}}& p{margin-top:var(--space-4)}& a{line-height:var(--lh-normal);border-bottom:var(--bw-medium) solid var(--secondary-light);transition:var(--duration-fast);margin-bottom:var(--space-4);display:inline-block;&:hover{color:var(--secondary-dark);border-color:var(--secondary-hover)}}& h3{color:var(--secondary-hover)}& ol{padding-top:var(--space-2);list-style-position:inside;& li{font-size:var(--text-base);line-height:var(--lh-normal);color:var(--neutral-800);margin-bottom:var(--space-2);&::marker,& strong{color:var(--secondary-hover);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wider)}}}}}& section[aria-labelledby=form-calculator]{& h2{color:var(--quinary-dark)}& p{margin:0}& form{& fieldset{margin-bottom:var(--space-2);& legend{font-size:var(--text-lg);padding:var(--space-2) 0 var(--space-3)}&:first-of-type{&>div{border-radius:var(--radius-2xl);border:var(--bw-xl) solid transparent;background-image:linear-gradient(white, white), linear-gradient(to right, var(--primary), var(--quaternary));background-origin:border-box;background-clip:padding-box,border-box,border-box,border-box;grid-template-columns:repeat(3,1fr);align-items:center;width:min(400px,100%);display:grid;position:relative;overflow:hidden;& label{font-weight:var(--fw-medium);padding:var(--space-4) 0;cursor:pointer;font-size:var(--text-lg);z-index:1;justify-content:center;align-items:center;display:flex;&:first-of-type:has(input:checked)~span{background:var(--primary);transform:translate(0)}&:nth-of-type(2):has(input:checked)~span{background:linear-gradient(to right, var(--primary), var(--quaternary));transform:translate(100%)}&:nth-of-type(3):has(input:checked)~span{background:var(--quaternary);transform:translate(200%)}}& span{width:33.3333%;height:100%;transition-duration:var(--duration-fast);position:absolute}}}&:nth-of-type(2){&>div{border-radius:var(--radius-2xl);border:var(--bw-xl) solid transparent;background:linear-gradient(white, white) padding-box, radial-gradient(24% 50% at 5% 20%, var(--sprint) 0 45%, transparent 100%), radial-gradient(24% 50% at 25% 20%, var(--middle) 0 45%, transparent 100%), radial-gradient(24% 50% at 45% 20%, var(--long) 0 45%, transparent 100%), radial-gradient(24% 50% at 65% 20%, var(--hurdles) 0 45%, transparent 100%), radial-gradient(24% 50% at 85% 20%, var(--road) 0 45%, transparent 100%), radial-gradient(24% 50% at 5% 80%, var(--walk-road) 0 45%, transparent 100%), radial-gradient(24% 50% at 25% 80%, var(--walk-track) 0 45%, transparent 100%), radial-gradient(24% 50% at 45% 80%, var(--field) 0 45%, transparent 100%), radial-gradient(24% 50% at 65% 80%, var(--combined) 0 45%, transparent 100%), radial-gradient(24% 50% at 85% 80%, var(--relays) 0 45%, transparent 100%);background-origin:border-box;background-clip:padding-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box;grid-template-columns:repeat(5,1fr);display:grid;position:relative;overflow:hidden;@media (width<=650px){background:linear-gradient(white, white) padding-box, radial-gradient(40% 18% at 25% 10%, var(--sprint) 0 45%, transparent 100%), radial-gradient(40% 18% at 75% 10%, var(--middle) 0 45%, transparent 100%), radial-gradient(40% 18% at 25% 30%, var(--long) 0 45%, transparent 100%), radial-gradient(40% 18% at 75% 30%, var(--hurdles) 0 45%, transparent 100%), radial-gradient(40% 18% at 25% 50%, var(--road) 0 45%, transparent 100%), radial-gradient(40% 18% at 75% 50%, var(--walk-road) 0 45%, transparent 100%), radial-gradient(40% 18% at 25% 70%, var(--walk-track) 0 45%, transparent 100%), radial-gradient(40% 18% at 75% 70%, var(--field) 0 45%, transparent 100%), radial-gradient(40% 18% at 25% 90%, var(--combined) 0 45%, transparent 100%), radial-gradient(40% 18% at 75% 90%, var(--relays) 0 45%, transparent 100%);background-origin:border-box;background-clip:padding-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box;grid-template-columns:repeat(2,1fr)}& label{font-weight:var(--fw-medium);padding:var(--space-4) 0;cursor:pointer;font-size:var(--text-md);z-index:1;justify-content:center;align-items:center;display:flex;&.disabled{color:var(--neutral-700);background:var(--neutral-300);cursor:not-allowed;opacity:.6;transition-duration:var(--duration-fast)}&:first-of-type:has(input:checked)~span{background:var(--sprint);transform:translate(0)translateY(0)}&:nth-of-type(2):has(input:checked)~span{background:var(--middle);transform:translate(100%)translateY(0)}&:nth-of-type(3):has(input:checked)~span{background:var(--long);transform:translate(200%)translateY(0)}&:nth-of-type(4):has(input:checked)~span{background:var(--hurdles);transform:translate(300%)translateY(0)}&:nth-of-type(5):has(input:checked)~span{background:var(--road);transform:translate(400%)translateY(0)}&:nth-of-type(6):has(input:checked)~span{background:var(--walk-road);transform:translate(0)translateY(100%)}&:nth-of-type(7):has(input:checked)~span{background:var(--walk-track);transform:translate(100%)translateY(100%)}&:nth-of-type(8):has(input:checked)~span{background:var(--field);transform:translate(200%)translateY(100%)}&:nth-of-type(9):has(input:checked)~span{background:var(--combined);transform:translate(300%)translateY(100%)}&:nth-of-type(10):has(input:checked)~span{background:var(--relays);transform:translate(400%)translateY(100%)}@media (width<=650px){&:first-of-type:has(input:checked)~span{transform:translate(0)}&:nth-of-type(2):has(input:checked)~span{transform:translate(100%)}&:nth-of-type(3):has(input:checked)~span{transform:translateY(100%)}&:nth-of-type(4):has(input:checked)~span{transform:translate(100%,100%)}&:nth-of-type(5):has(input:checked)~span{transform:translateY(200%)}&:nth-of-type(6):has(input:checked)~span{transform:translate(100%,200%)}&:nth-of-type(7):has(input:checked)~span{transform:translateY(300%)}&:nth-of-type(8):has(input:checked)~span{transform:translate(100%,300%)}&:nth-of-type(9):has(input:checked)~span{transform:translateY(400%)}&:nth-of-type(10):has(input:checked)~span{transform:translate(100%,400%)}}}& span{width:20%;height:50%;transition-duration:var(--duration-fast);position:absolute;@media (width<=650px){width:50%;height:20%}}}}&:nth-of-type(3){& label[for=eventOptions]{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}& select{font-weight:var(--fw-medium);font-size:var(--text-md);background:var(--tertiary);border-radius:var(--radius-lg);width:100%;padding:var(--space-2);cursor:pointer;transition-duration:var(--duration-normal);& option.empty{background:var(--tertiary)}&.sprint,& option.sprint{background:var(--sprint)}&.middle,& option.middle{background:var(--middle)}&.long,& option.long{background:var(--long)}&.hurdles,& option.hurdles{background:var(--hurdles)}&.road,& option.road{background:var(--road)}&.field,& option.field{background:var(--field)}&.combined,& option.combined{background:var(--combined)}&.walk-road,& option.walk-road{background:var(--walk-road)}&.walk-track,& option.walk-track{background:var(--walk-track)}&.relays,& option.relays{background:var(--relays)}}}&:nth-of-type(4){gap:var(--space-3);flex-direction:column;display:flex;&>div{&:first-of-type{border-radius:var(--radius-xl);border:var(--bw-xl) solid transparent;background-image:linear-gradient(white, white), linear-gradient(to right, var(--secondary) 47.5%, color-mix(in srgb, var(--septenary) 70%, transparent) 52.5%);background-origin:border-box;background-clip:content-box,border-box;grid-template-columns:repeat(2,1fr);width:min(250px,100%);display:grid;position:relative;overflow:hidden;&:has(label:first-of-type input:checked)~div:nth-of-type(2),&:has(label:last-of-type input:checked)~div:last-of-type{display:block}& label{text-align:center;cursor:pointer;color:#000;font-size:var(--text-md);font-weight:var(--fw-medium);padding:var(--space-2) 0;z-index:1;&:first-of-type:has(input:checked)~span{background:var(--secondary);transform:translate(0)}&:last-of-type:has(input:checked)~span{background:color-mix(in srgb, var(--septenary) 70%, transparent);transform:translate(100%)}}& span{width:50%;height:100%;transition-duration:var(--duration-fast);position:absolute}}&:nth-of-type(2),&:last-of-type{display:none;& label{& span{font-size:var(--text-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-wider);color:var(--secondary-hover)}& input{font-size:var(--text-lg);width:100%;margin-top:var(--space-2);padding:var(--space-2);border-radius:var(--radius-sm);border:var(--bw-medium) solid var(--neutral-300);-moz-appearance:textfield;appearance:textfield;outline:none;transition:all .5s cubic-bezier(.19,1,.22,1);&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}&:hover{border-color:var(--secondary-light)}&:focus{border-color:var(--secondary-hover);background:color-mix(in srgb, var(--secondary-hover) 5%, transparent)}&:active{transform:scale(.98)}&:invalid{border-color:var(--error);background:color-mix(in srgb, var(--error) 5%, transparent)}}}& small{padding-top:var(--space-3);font-size:var(--text-sm);letter-spacing:var(--ls-wide);color:var(--secondary-hover)}}&:last-of-type{& label{& span{color:var(--septenary)}& input{&:hover{border-color:var(--septenary-light)}&:focus{border-color:var(--septenary);background:color-mix(in srgb, var(--septenary) 5%, transparent)}}}& small{color:var(--septenary)}}}}}& p{font-size:var(--text-lg);color:var(--neutral-50);border-radius:var(--radius-sm);margin-bottom:var(--space-4);padding:var(--space-2);background:color-mix(in srgb, var(--error) 75%, transparent);transition-duration:var(--duration-fast)}& button{font-weight:var(--fw-medium);font-size:var(--text-xl);width:100%;padding:var(--space-2);background:var(--secondary);border-radius:var(--radius-lg);cursor:pointer;transition-duration:var(--duration-normal);letter-spacing:var(--ls-wider);&:hover{background:var(--secondary-hover)}}&:has(fieldset:nth-of-type(4) div:first-of-type label:last-of-type input:checked) button{background:color-mix(in srgb, var(--septenary) 70%, transparent);&:hover{background:var(--septenary)}}}}& section[aria-labelledby=results-calculator]{margin-bottom:var(--space-10);padding:0;& header{padding:var(--space-4);justify-content:space-between;align-items:center;padding-bottom:0;display:flex;& h2{color:var(--quinary-dark)}& button{font-size:var(--text-md);padding:var(--space-2) var(--space-3);background:var(--senary);color:var(--neutral-50);border-radius:var(--radius-lg);cursor:pointer;transition-duration:var(--duration-normal);&:hover{background:var(--senary-hover)}}}& table{border-top:var(--bw-thick) solid var(--neutral-300);table-layout:fixed;border-radius:0 0 var(--radius-2xl) var(--radius-2xl);border-collapse:collapse;background:#fff;width:100%;overflow:hidden;& caption{font-size:var(--text-sm);text-align:left;padding:0 0 var(--space-3) var(--space-4);color:var(--neutral-800)}& thead{& tr{&.pace-mode th{background:var(--senary-light);cursor:pointer}& th{background-color:var(--quinary);text-align:center;font-size:var(--text-lg);font-weight:var(--fw-regular);padding:var(--space-3) 0;cursor:pointer;margin:0}}}& tbody{&.pace-mode tr:hover td{background:color-mix(in srgb, var(--senary-light) 25%, transparent)}& tr{&:hover td{background:color-mix(in srgb, var(--quinary) 25%, transparent)}& td{border-top:var(--bw-medium) solid var(--neutral-300);text-align:center;padding:var(--space-3) 0;font-size:var(--text-lg);font-weight:var(--fw-regular);cursor:pointer;transition-duration:var(--duration-fast);&.pace-cell{color:var(--senary)}}}}}&>button{background:var(--senary);padding:var(--space-2);border-radius:var(--radius-lg);cursor:pointer;transition-duration:var(--duration-slow);display:none;position:absolute;overflow:visible;&:hover{background:var(--senary-hover)}&:hover:after{border-color:transparent var(--senary-hover) transparent transparent}&:after{content:"";border-style:solid;border-width:8px;border-color:transparent var(--error) transparent transparent;transition-duration:var(--duration-slow);margin-top:-8px;position:absolute;top:50%;right:100%}& svg{fill:#fff;width:var(--text-xl);height:auto}}}& section[aria-labelledby=scoring-tables]{outline:var(--bw-medium) solid var(--secondary);background:color-mix(in srgb, var(--secondary-light) 3.5%, var(--neutral-50));line-height:var(--lh-normal);& h2{margin-bottom:var(--space-2);text-align:center}& a{width:fit-content;margin:var(--space-3) auto;padding:var(--space-2) var(--space-5);font-size:var(--text-md);font-weight:var(--fw-medium);color:var(--secondary-dark);border-radius:var(--radius-lg);outline:var(--bw-medium) solid var(--secondary);transition:var(--duration-slow);z-index:1;text-decoration:none;display:block;position:relative;&:before{content:"";border-radius:var(--radius-lg);width:5%;height:100%;transition:var(--duration-slow);background:var(--secondary);z-index:-1;position:absolute;top:0;left:0}&:hover:before{width:100%}&:hover{color:var(--neutral-900);animation:shake;& svg{transform:scale(1.1)}}}}& dialog#deleteTable{padding:var(--space-4) var(--space-6);border-radius:var(--radius-xl);max-width:var(--container-dialog);text-align:center;box-shadow:var(--shadow-lg);outline:var(--bw-medium) solid var(--senary);background:#fff;margin:auto;position:fixed;inset:0;&::backdrop{background:var(--shadow-lg);backdrop-filter:blur(2px)}& h2{color:var(--senary-dark);margin-bottom:var(--space-2)}& menu{margin-top:var(--space-5);justify-content:space-between;gap:var(--space-3);padding:0;display:flex;& button{padding:var(--space-3);border-radius:var(--radius-md);background:var(--neutral-300);color:var(--neutral-800);font-size:var(--text-lg);cursor:pointer;transition-duration:var(--duration-normal);flex:1;&:hover{background:color-mix(in srgb, var(--neutral-300) 95%, black)}&:last-of-type{background:var(--senary);color:#fff;&:hover{background:var(--senary-hover)}}}}}}
