main{margin-bottom:var(--space-6xl)}main h2{font-weight:var(--fw-semibold);font-size:var(--fs-xl);letter-spacing:var(--ls-wide);margin-bottom:var(--space-sm)}main>section{margin-bottom:var(--space-4xl)}main>p:nth-of-type(2){outline:var(--bw-medium) solid var(--quaternary);border-radius:var(--br-xl);padding:var(--space-lg) var(--space-xl);width:var(--container-outside);box-shadow:var(--shadow-md);color:var(--gray-950);background:color-mix(in srgb,var(--quaternary-light) 25%,var(--gray-50));font-size:var(--fs-md);line-height:var(--lh-normal);text-align:center;margin:0 auto var(--space-2xl) auto}main>section:nth-of-type(1){padding:0;outline:var(--bw-medium) solid var(--secondary);margin-bottom:var(--space-2xl);details{border-radius:var(--br-xl);overflow:hidden;summary{display:grid;grid-template-columns:1fr auto;align-items:center;cursor:pointer;padding:var(--space-lg) var(--space-xl);transition-duration:var(--transition-base);font-size:var(--fs-base);color:var(--gray-800);&:hover{background:var(--gray-200)}h2{color:var(--secondary-dark)}svg{width:var(--fs-xl);height:auto;fill:var(--secondary);transition-duration:var(--transition-base)}}&[open]{summary{svg{transform:rotate(180deg)}}}p{font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--gray-800);padding:var(--space-sm) var(--space-xl);&:first-of-type{padding-top:var(--space-lg)}}h3{font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--secondary-hover);padding:var(--space-sm) var(--space-xl)}a{display:block;width:calc(100% - 2 * var(--space-xl));text-align:center;margin:var(--space-md) var(--space-xl);padding:var(--space-sm);outline:var(--bw-xl) solid var(--secondary-dark);background:var(--secondary-dark);color:var(--white);border-radius:var(--br-xs);text-decoration:none;font-size:var(--fs-md);transition-duration:var(--transition-base);&:hover{outline-color:var(--secondary);color:var(--secondary)}}ol{list-style-position:inside;padding:var(--space-sm) var(--space-xl) var(--space-lg);li{font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--gray-800);margin-bottom:var(--space-sm);&::marker,strong{color:var(--secondary-hover);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide)}}}}}main>section:nth-of-type(2){h2{color:var(--quinary-dark)}>p{margin:var(--space-sm) 0;font-size:var(--fs-base)}form{fieldset{border:none;margin-bottom:var(--space-lg);legend{font-size:var(--fs-lg);padding:var(--space-md) 0}input[type=radio]{display:none}&:nth-of-type(1){>div{position:relative;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;width:var(--container-inside);overflow:hidden;border-radius:var(--br-xl);border:var(--bw-xl) solid transparent;background-image:linear-gradient(var(--white),var(--white)),linear-gradient(to right,var(--primary),var(--quaternary));background-clip:padding-box,border-box,border-box,border-box;background-origin:border-box;label{display:flex;justify-content:center;align-items:center;padding:var(--space-lg) 0;cursor:pointer;font-size:var(--fs-lg);z-index:1;&:has(input:checked){color:var(--white)}&:nth-of-type(1):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{position:absolute;height:100%;width:calc(100% / 3);transition-duration:var(--transition-fast)}}}&:nth-of-type(2){>div{position:relative;display:grid;grid-template-columns:repeat(5,1fr);border-radius:var(--br-xl);overflow:hidden;border:var(--bw-xl) solid transparent;background:linear-gradient(#fff,#fff) 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-clip:padding-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box;background-origin:border-box;@media(max-width:650px){grid-template-columns:repeat(2,1fr);background:linear-gradient(#fff,#fff) 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-clip:padding-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box,border-box;background-origin:border-box}label{display:flex;justify-content:center;align-items:center;padding:var(--space-lg) 0;cursor:pointer;font-size:var(--fs-md);z-index:1;&.disabled{color:var(--gray-700);background:var(--gray-300);cursor:not-allowed;opacity:.6;transition-duration:var(--transition-fast)}&:has(input:checked){font-weight:var(--fw-medium)}&:nth-of-type(1):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(max-width:650px){&:nth-of-type(1):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{position:absolute;height:50%;width:20%;transition-duration:var(--transition-fast);@media(max-width:650px){width:50%;height:20%}}}}&:nth-of-type(3){select{font-size:var(--fs-md);width:100%;background:var(--tertiary);border:none;border-radius:var(--br-xs);padding:var(--space-sm);transition-duration:var(--transition-base);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){display:flex;flex-direction:column;gap:var(--space-md);>div{&:first-of-type{position:relative;display:grid;grid-template-columns:repeat(2,1fr);width:var(--container-inside-sm);overflow:hidden;border-radius:var(--br-md);border:var(--bw-xl) solid transparent;background-image:linear-gradient(var(--white),var(--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;&: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:var(--gray-800);font-size:var(--fs-md);padding:var(--space-sm) 0;z-index:1;&:has(input:checked){color:var(--white)}&: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{position:absolute;height:100%;width:50%;transition-duration:var(--transition-fast)}}&:nth-of-type(2),&:last-of-type{display:none;label{span{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);color:var(--secondary-hover)}input{font-size:var(--fs-lg);width:100%;margin-top:var(--space-sm);padding:var(--space-sm);border-radius:var(--br-xs);border:var(--bw-medium) solid var(--gray-300);font-family:var(--font-primary);outline:none;transition:all .5s cubic-bezier(.19,1,.22,1);-moz-appearance:textfield;appearance:textfield;&::-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{margin-top:var(--space-md);font-size:var(--fs-sm);letter-spacing:var(--ls-medium);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(--fs-lg);color:var(--gray-50);border-radius:var(--br-xs);margin-bottom:var(--space-lg);padding:var(--space-sm);background:color-mix(in srgb,var(--error) 75%,transparent);transition-duration:var(--transition-fast)}button{font-size:var(--fs-xl);width:100%;padding:var(--space-sm);background:var(--secondary);color:var(--white);border:none;border-radius:var(--br-xs);font-family:var(--font-primary);cursor:pointer;transition-duration:var(--transition-base);&: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)}}}}main>section:nth-of-type(3){padding:0;margin-bottom:var(--space-6xl);header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);padding-bottom:0;h2{color:var(--quinary-dark)}button{font-size:var(--fs-md);padding:var(--space-md) var(--space-lg);background:var(--error);color:var(--white);border:none;border-radius:var(--br-md);cursor:pointer;transition-duration:var(--transition-base);&:hover{background:var(--error-hover)}}}table{border-top:var(--bw-thick) solid var(--gray-300);width:100%;table-layout:fixed;border-radius:var(--br-xl);background:var(--white);border-collapse:collapse;overflow:hidden;caption{font-size:var(--fs-sm);text-align:left;padding:0 0 var(--space-md) var(--space-lg);color:var(--gray-800)}thead{tr{&.pace-mode th{background:var(--senary-light);cursor:pointer}th{background-color:var(--quinary);text-align:center;margin:0;font-size:var(--fs-lg);font-weight:var(--fw-normal);padding:var(--space-md) 0;cursor:pointer}}}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(--gray-300);text-align:center;padding:var(--space-md) 0;font-size:var(--fs-lg);font-weight:var(--fw-normal);cursor:pointer;transition-duration:var(--transition-fast);&.pace-cell{color:var(--senary)}}}}}>button{position:absolute;background:var(--error);color:var(--white);padding:var(--space-sm);border-radius:var(--br-md);border:none;display:none;cursor:pointer;overflow:visible;transition-duration:var(--transition-slow);&:hover{background:var(--error-hover)}&:hover:after{border-color:transparent var(--error-hover) transparent transparent}&:after{content:"";position:absolute;top:50%;right:100%;margin-top:-8px;border-width:8px;border-style:solid;border-color:transparent var(--error) transparent transparent;transition-duration:var(--transition-slow)}svg{fill:var(--white);width:var(--fs-xl);height:auto}}}dialog#deleteTable{position:fixed;inset:0;margin:auto;padding:var(--space-3xl);border:none;border-radius:var(--br-lg);background:var(--white);max-width:var(--container-outside-sm);text-align:center;box-shadow:var(--shadow-lg);font-family:var(--font-primary);&::backdrop{background:var(--shadow-lg);backdrop-filter:blur(2px)}h2{font-size:var(--fs-xl);margin-bottom:var(--space-md);font-weight:var(--fw-semibold);letter-spacing:var(--ls-medium)}p{font-size:var(--fs-base);color:var(--gray-800);line-height:var(--lh-normal)}menu{margin-top:var(--space-xl);display:flex;justify-content:space-between;gap:var(--space-md);button{flex:1;padding:var(--space-md);border:none;border-radius:var(--br-sm);background:var(--gray-300);color:var(--gray-900);font-size:var(--fs-base);cursor:pointer;transition-duration:var(--transition-base);&:hover{background:color-mix(in srgb,var(--gray-300) 92.5%,var(--black))}&:last-of-type{background:var(--error);color:var(--white);&:hover{background:var(--error-hover)}}}}}
