@layer layout, text, appearance, text, other,animation;

@layer layout {
    ::-moz-placeholder {
        text-align: center;
    }
    ::placeholder {
        text-align: center;
    }
    table{
        inline-size: 100%;
        border-spacing: var(--size-1);
    }
    form > * {
        -webkit-margin-after: var(--size-block-fluid-3);
                margin-block-end: var(--size-block-fluid-3);
    }
    button[type="submit"]{
        margin-inline:auto;
        display: block;
    }
    button.add-remove{
        padding: 0;
        display: flex;
        inline-size: var(--size-9);
    }
    td{
        vertical-align: middle;
        text-align: center;
    }
        .action:is(col){
           
        }
        .action > button{
            padding: 0;
            display: flex;
            inline-size: var(--size-8);
        }

    @media (max-width: 767.98px) {
            .action:is(col){
                inline-size: var(--size-5);
            }
            .action > button{
                inline-size: var(--size-5);
            }
        
    }
    .action{
        text-align: center;
    }
    :has(> .error) {
        outline: 1px solid red;
    }
    table.results {
        border-collapse: collapse;
    }
    table.results td, table.results th {
        border: 1px solid black;
        padding:var(--size-000);
    }
    #fill-button-panel {
        display: flex;
        justify-content: space-evenly;
        *{
            inline-size: var(--size-12);
        }
    
        margin: var(--size-5);
    }
    
}
@layer appearance {
    [aria-current="page"] {
        --link-border-color: var(--color-highlight);
        --link: var(--color-highlight);
      }
     
}
@layer text{
    @media (max-width: 767.98px) {
        ::-moz-placeholder{
            font-size:0.8em;
        }
        input[type='text'],th, ::placeholder{
            font-size:0.8em;
        }
        ::-moz-placeholder{
            font-size:0.6em;
        }
        ::placeholder{
            font-size:0.6em;
        }
    }
}

@layer other {
    a {
        -webkit-border-after: 3px solid var(--border-color, transparent);
                border-block-end: 3px solid var(--border-color, transparent);
    } 
}

.results button{
    margin-block:var(--size-1);
}