@import 'unset.less';
@import 'colors.less';

@import 'parts/site-header.less';
@import 'parts/site-nav.less';
@import 'parts/site-footer.less';
@import 'parts/page-header.less';
@import 'parts/page-body.less';
@import 'parts/page-toc.less';
@import 'parts/infobox.less';
@import 'parts/sitenotice.less';
@import 'parts/dropmenu.less';
@import 'parts/specialpage.less';
@import 'parts/table.less';
@import 'parts/images.less';
@import 'parts/versions.less';

@font-face {
    font-family: "Libre Caslon";
    src: url('assets/fonts/LibreCaslonText-Regular.ttf');
}

@font-face {
    font-family: "Shippori Mincho";
    src: url('assets/fonts/ShipporiMincho-Regular.ttf');
}


#grid {
    margin-bottom: 0;
    min-height: 100vh;
}

@media (min-width: 1201px) {

    .layout-touch {
        display: none;
    }

    #grid {
        display: grid;
        grid-template-columns:
            [startgap] minmax(var(--space), 1.5fr)
            [navstart] var(--sidebar-width)
            [navgap] minmax(var(--space), .5fr)
            [pagestart] minmax(auto, 78em)
            [pageend] var(--sidebar-width)
            [endgap] minmax(var(--space), 2fr)
        ;
        grid-template-rows:
            [topstart] 3.6em
            [sitenotice] auto
            [title] auto
            [toc] auto
            [pagebody] 1fr
            [bottomstart] auto
        ;
        height: 100%;
        padding-top: calc(6vw - 6vh);
        box-sizing: border-box;
    }
}

@media (max-width: 1200px) {

    .layout-mouse {
        display: none;
    }

    #grid {
        display: grid;
        grid-template-rows:
            [topstart] 7.8em
            [sitenotice] auto
            [title] auto
            [toc] auto
            [pagebody] 1fr
            [bottomstart] auto
        ;
        // padding: var(--space);
        padding-bottom: 0;
    }
}

@media (max-width: 720px) {

}

:root {
    --sidebar-width: 12em;
    --space: .6em;
    --pi-width: 24em;
}

body {
    margin: 0;
    background-color: var(--0);
    background:
        linear-gradient(100deg, transparent 70%, var(--blue-2)),
        radial-gradient(circle farthest-corner at 100% 100%, var(--0) 80%, var(--blue-2) 100%)
    ;
    background-attachment: fixed, local;
    // color: var(--8);
}

@media (prefers-color-scheme: dark) {
    body {
        background:
            linear-gradient(95deg, transparent 70%, var(--0) 140%),
            radial-gradient(circle farthest-corner at 160% 100%, var(--blue-1) 90%, var(--0) 120%)
        ;
        background-attachment: fixed, local;
    }
}

body::selection {
    background-color: var(--blue-4);
}

button {
    cursor: pointer;
}

fieldset {
    margin-top: calc(var(--space) * 3);
}

.mw-list-item.selected {
    display: none;
}

#t-print, #t-upload {
    display: none;
}

*:focus {
    z-index: 60;
}

.mwe-popups-extract a:link, .mwe-popups-extract a:visited {
    color: black;
}

// border-image: linear-gradient(90deg, transparent 5%, var(--gold-7) 30%, var(--gold-7) 70%, transparent 95%) 30;
// @media (prefers-color-scheme: dark) {
//     border-image: linear-gradient(90deg, transparent 5%, var(--gold-3) 30%, var(--gold-3) 70%, transparent 95%) 30; 
// }

    // border-image: linear-gradient(127deg, transparent 5%, var(--gold-3) 40%, var(--gold-3) 60%, transparent 95%) 1;
// border-bottom: 2px solid;
// border-left: 2px solid;
    // border-left: 2px solid;

// border-image: linear-gradient(127deg, transparent 5%, var(--gold-3) 40%, var(--gold-3) 60%, transparent 95%) 1;
// border-image: linear-gradient(90deg, transparent 5%, var(--gold-7) 40%, var(--gold-7) 60%, transparent 95%) 30;
// @media (prefers-color-scheme: dark) {
//     border-image: linear-gradient(90deg, transparent 5%, var(--gold-3) 40%, var(--gold-3) 60%, transparent 95%) 30; 
// }

// .site-header-user button, #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
//     font-size: 1em;
//     overflow: clip;
//     text-overflow: ellipsis;

//     background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));
//     // border-radius: calc(var(--space) / 2 );
//     // box-shadow: inset 0 0 3px 3px var(--blue-1);
//     color: var(--blue-7);
//     gap: calc(var(--space) * 2);
// }

// #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
//     padding: calc(var(--space));
// }

// #site-header-user-links {
//     position: absolute;
//     margin-top: calc(var(--space) / 2);
//     display: none;
//     z-index: 12;
//     // border-top: 3px solid var(--blue-6);
//     border-width: 3px 0 0 0;
//     box-shadow: 0 0 2px .5px var(--blue-7), inset 0 0 3px 3px var(--blue-1);
//     right: 0;
// }

// #site-header-user-links ul {
//     display: flex; 
//     flex-direction: column;
//     width: max-content;
//     gap: var(--space);
// }




    // background:
    //     linear-gradient(300deg, #9fb7ff 0% 40%, #ffffff 40% 100%),
    //     linear-gradient(330deg, #9fb7ff 0% 80%, #ffffff 80% 100%),
    //     linear-gradient(30deg, #9fb7ff 0% 50%, #ffffff 50% 100%),
    //     radial-gradient(circle farthest-corner at 50% 50%, #ecf2ff 0%, #dae4ff 93%);
    // background-blend-mode: color-burn;
    
    // display: flex;
    // flex-direction: column-reverse;
    // align-items: center;
    // 
    // padding: 3em;
    // // border-color: blue;
    // justify-content: center;
    // background: var(--blue-5);
    // color: var(--gold-1);
    // text-shadow: 0 0 2px var(--black);
// background:
//     conic-gradient(from 251deg at 100% 0%, #000000 0% 30%, #667fda 51%, #000000 100% 30%),
//     linear-gradient(to top, #ffffff 0% 0%, #333333 20%, #060606 40%, #060606 60%, #333333 80%, #ffffff 100% 0%),
//     linear-gradient(to right, #ffffff 0% 0%, #151515 10%, #060606 50%, #151515 90%, #ffffff 100% 0%),
//     radial-gradient(circle farthest-corner at 50% 50%, var(--blue-6) 60%, var(--blue-5) 91%, #000000 100% 0%);
//     background-blend-mode: color-dodge;



//     border-style: solid;
//     border-image: linear-gradient(150deg, var(--blue-5), white 30%) 1;
//     background-image: linear-gradient(150deg, var(--blue-5) 0%, var(--blue-3) 6%, var(--blue-2) 12%, white 30%)
// }


// #page-menu:focus-within {
//     border-style: solid;
//     border-image: linear-gradient(102deg, var(--blue-5),white 30%) 1;
//     background-image: linear-gradient(102deg, var(--blue-5) 0%, var(--blue-3) 6%, var(--blue-2) 12%, white 30%)
// }