:root{
    --warrior-white-label-navy:rgb(11, 17, 32);
    --warrior-white-label-amber:rgb(217, 119, 6);
    --warrior-white-label-emerald:rgb(5, 150, 105);
    --warrior-white-label-warm-white:rgb(250, 250, 249);
}

html[data-white-label="warrior-spirit"] body{
    background:var(--background);
    color:var(--text-color);
}

html[data-white-label="warrior-spirit"] html-import.nav {
    grid-column: 1;
    grid-row: 2;
    min-block-size: 0;
    min-inline-size: 0;
    overflow: auto;
    --app-bar-text: var(--text-color);
    --app-bar-accent: var(--secondary-color);
    --app-bar-active-text: var(--text-color);
}

html[data-white-label="warrior-spirit"] html-import.nav::part(nav) {
    align-items: stretch;
    background: linear-gradient(180deg, var(--modal-background), var(--background));
    border-block-end: 0;
    border-inline-end: 1px solid rgba(217, 119, 6, .42);
    box-shadow: .35rem 0 1.4rem var(--shadow-color);
    box-sizing: border-box;
    color: var(--text-color);
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1rem;
    min-block-size: 100%;
    padding: .75rem .5rem;
}

html[data-white-label="warrior-spirit"] html-import.nav::part(brand) {
    flex-direction: column;
    text-align: center;
}

html[data-white-label="warrior-spirit"] html-import.nav::part(brand-mark) {
    background: transparent;
    border: 0;
    block-size: 3rem;
    inline-size: 3rem;
}

.warrior-navigation-logo {
    block-size: 3rem;
    inline-size: 3rem;
    object-fit: contain;
}

html[data-white-label="warrior-spirit"] html-import.nav::part(routes) {
    flex: none;
    inline-size: 100%;
    min-inline-size: 0;
    overflow: visible;
}

.warrior-navigation {
    /* Let the shared slot fit the sidebar while complete labels wrap. */
    contain: inline-size;
    background: transparent;
    border: 0;
    box-sizing: border-box;
    display: grid;
    gap: .35rem;
    inline-size: 100%;
    list-style: none;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
}

.warrior-navigation a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: var(--text-color);
    display: grid;
    gap: .4rem;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    line-height: 1.4;
    overflow-wrap: anywhere;
    padding: .65rem .4rem;
    text-decoration: none;
    white-space: normal;
}

.warrior-navigation a:hover,
.warrior-navigation a[aria-current="page"] {
    background: var(--secondary-color);
    border-color: var(--warrior-white-label-amber);
}

.warrior-navigation a[aria-current="page"] {
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.warrior-navigation-icon {
    color: var(--accent-color);
    font-size: .75rem;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 48em) {
    html[data-white-label="warrior-spirit"] body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(20rem, 1fr);
        height: auto;
        min-block-size: 100vh;
        overflow: visible;
    }

    html[data-white-label="warrior-spirit"] body > main {
        grid-column: 1;
        grid-row: 3;
        height: auto;
        min-inline-size: 0;
    }

    html[data-white-label="warrior-spirit"] html-import.nav::part(nav) {
        border-block-end: 1px solid var(--warrior-white-label-amber);
        border-inline-end: 0;
    }

    html[data-white-label="warrior-spirit"] html-import.nav::part(brand) {
        flex-direction: row;
        text-align: start;
    }

    .warrior-navigation {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    }
}

html[data-white-label="warrior-spirit"] html-import.header::part(header){
    border-block-end:2px solid var(--warrior-white-label-amber);
}

html[data-white-label="warrior-spirit"] html-import.header{
    --warrior-header-icon-filter:brightness(0) saturate(100%);
}

html[data-white-label="warrior-spirit"][data-color-scheme="dark"] html-import.header{
    --warrior-header-icon-filter:brightness(0) invert(1);
}

@media (prefers-color-scheme:dark){
    html[data-white-label="warrior-spirit"]:not([data-color-scheme]) html-import.header{
        --warrior-header-icon-filter:brightness(0) invert(1);
    }
}

html[data-white-label="warrior-spirit"] main.contents{
    background:var(--background);
}

html[data-white-label="warrior-spirit"] button,
html[data-white-label="warrior-spirit"] input[type="button"],
html[data-white-label="warrior-spirit"] input[type="submit"]{
    border-color:var(--warrior-white-label-emerald);
}

html[data-white-label="warrior-spirit"] button:focus-visible,
html[data-white-label="warrior-spirit"] a:focus-visible,
html[data-white-label="warrior-spirit"] input:focus-visible,
html[data-white-label="warrior-spirit"] select:focus-visible,
html[data-white-label="warrior-spirit"] textarea:focus-visible{
    outline:3px solid var(--warrior-white-label-amber);
    outline-offset:2px;
}

html[data-white-label="warrior-spirit"] section.color-table{
    display:none !important;
}

html[data-white-label="warrior-spirit"] #chat,
html[data-white-label="warrior-spirit"] #journalEditor{
    --accent-color:var(--warrior-white-label-amber);
    --focus-color:var(--warrior-white-label-amber);
}

html[data-white-label="warrior-spirit"] .dashboard-heading,
html[data-white-label="warrior-spirit"] .data-header{
    border-block-start:.3rem solid var(--warrior-white-label-amber);
    padding-block-start:1rem;
}

@media (prefers-reduced-motion:reduce){
    html[data-white-label="warrior-spirit"] *,
    html[data-white-label="warrior-spirit"] *::before,
    html[data-white-label="warrior-spirit"] *::after{
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
}