:root {
    /* Mostly from FlatWhite theme */
    /* --bg-nullary: hsl(30, 30%, 98%); */
    --bg-nullary: #E4DDD2;
    --bg-primary: #F6F3EE;
    --bg-secondary: #E4DDD2; 
    --fg-primary: #5F5B53;
    --bd-primary: #5F5B53;

    --bg-red: #F7C9C3;
    --bg-orange: #F7E0C3;
    --bg-yellow: #F4EFC2; /* manually picked */
    --bg-green: #E2E9C1;
    --bg-cyan: #D2EBE3;
    --bg-blue: #DDE4F2;
    --bg-violet: #F1DDF1;

    --fg-red: var(--fg-primary);
    --fg-orange: var(--fg-primary);
    --fg-yellow: var(--fg-primary);
    --fg-green: var(--fg-primary);
    --fg-cyan: var(--fg-primary);
    --fg-blue: var(--fg-primary);
    --fg-violet: var(--fg-primary);
}

@media(prefers-color-scheme: dark) {
    :root {
        --bg-nullary: #1c1717;
        --bg-primary: #2B2525;
        --bg-secondary: #362F2F;
        --fg-primary: #FDF1F3;
        --bd-primary: #908E8F;

        --bg-red: var(--bg-primary);
        --bg-orange: var(--bg-primary);
        --bg-yellow: var(--bg-primary);
        --bg-green: var(--bg-primary);
        --bg-blue: var(--bg-primary);
        --bg-cyan: var(--bg-primary);
        --bg-violet: var(--bg-primary);

        --fg-red: #ED6C89;
        --fg-orange: #EE9D70;
        --fg-yellow: #F7D877;
        --fg-green: #ADD47E;
        --fg-cyan: #8DD4E0;
        --fg-blue: #7E99F1;
        --fg-violet: #A79CE9;
    }
}

@media print {
    :root {
        --bg-nullary: white;
        --bd-primary: black;
        --fg-primary: black;
        --bg-primary: white;
        --bg-secondary: white;
    }
}

.secondary { background-color: var(--bg-secondary); }

.red { color: var(--fg-red) !important; background-color: var(--bg-red) !important; }
.orange { color: var(--fg-orange) !important; background-color: var(--bg-orange) !important; }
.yellow { color: var(--fg-yellow) !important; background-color: var(--bg-yellow) !important; }
.green { color: var(--fg-green) !important; background-color: var(--bg-green) !important; }
.cyan { color: var(--fg-cyan) !important; background-color: var(--bg-cyan) !important; }
.blue { color: var(--fg-blue) !important; background-color: var(--bg-blue) !important; }
.violet { color: var(--fg-violet) !important; background-color: var(--bg-violet) !important; }

body { 
    font-size: 14px;
    font-family: system-ui, 
                 -apple-system, BlinkMacSystemFont, 
                 "Segoe UI", 
                 "Roboto", 
                 "Oxygen", 
                 "Ubuntu", 
                 "Cantarell", 
                 "Fira Sans", 
                 "Droid Sans", 
                 "Helvetica Neue", 
                 Arial, sans-serif;
    color: var(--fg-primary);
    background-color: var(--bg-nullary);
}

.hover-show { display: none; }
*:hover > .hover-show { display: inline-block; }

.pointer:hover {
    cursor: pointer;
}

.compendium-potential, .compendium-present {
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 0 5px;
    /* position: relative; */
    /* margin-left: -5px; */
}

.compendium-present:hover {
    color: var(--fg-yellow); 
    background-color: var(--bg-yellow);
    border-color: var(--bd-primary);
}

.mono {
    font-family: ui-monospace, 
                 Menlo, Monaco, 
                 "Cascadia Mono", "Segoe UI Mono", 
                 "Roboto Mono", 
                 "Oxygen Mono", 
                 "Ubuntu Monospace", 
                 "Source Code Pro",
                 "Fira Mono", 
                 "Droid Sans Mono", 
                 "Courier New", monospace;
}

hr {
    height: 0;
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
    border-top: 1px solid var(--bd-primary);
    width: 100%;
}


button.checkbox {
    background: none;
    border: 1px solid var(--bd-primary);
    border-radius: 5px;
    width: 20px;
    height: 20px;
    appearance: initial;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

button.checkbox > * {
    width: 15px;
    height: 15px;
    display: block;
    border-radius: 3px;
    line-height: 15px;
    font-size: 13px;
    color: var(--fg-primary);
}

button.checkbox:not(:disabled) > .checkmark {
    /* box-shadow: inset 0 0 0 10px var(--fg-primary); */
    background-color: var(--fg-primary);
    color: var(--bg-primary);
}

button.checkbox:not(:disabled) {
    cursor: pointer;
}

button.checkbox:not(:disabled) > .disablemark { display: none; }
button.checkbox:disabled > * { display: none; }
button.checkbox:disabled > .disablemark { display: inline; }

button.checkbox:disabled { opacity: 0.25; }

body {
    padding: 0 0.5em;
}

.main-grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1em;
    column-gap: 1em;
}

.span2 { /* */ }

.compendium-columns { columns: 1; column-fill: balance; }

@media screen and (min-width: calc(22em + 22em + 4em)) {
    body {
        padding: 0 2rem;
    }

    .main-grid {
        grid-template-columns: 1fr 1fr;
    }

    .span2 {
        grid-column: span 2;
    }

    .compendium-columns { columns: 2; }
}

@media screen and (min-width: calc(22em + 4em + 22em + 4em + 22em)) {
    .main-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .span2 {
        grid-column: span 2;
    }

    .if-3-col-then-row-1-column-3 {
        grid-row: 1;
        grid-column: 3;
    }

    .compendium-columns { columns: 3; }
}

@media screen {
    .only-printed { display: none !important; }
}

@media print {
    .only-printed { display: block !important; }
}

@media print {
    /* hr { page-break-after: always; display: none; } */
  
    .do-not-print { display: none !important; }

    body {
        font-size: 12px;
        background-color: none;
        color-adjust: exact;
    }
}

.break-page { break-before: page; }

@media print and (orientation: portrait) {
    .main-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 1em;
        column-gap: 1em;
    }

    .span2 {
        grid-column: span 2;
    }

    .compendium-columns { columns: 2; }
}

@media print and (orientation: landscape) {
    .main-grid {
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 1em;
        column-gap: 1em;
    }

    .span2 {
        grid-column: span 2;
    }

    .if-3-col-then-row-1-column-3 {
        grid-row: 1;
        grid-column: 3;
    }

    .compendium-columns { columns: 3; }
}

.bouncing {
    animation-name: bouncing;
    animation-duration: 0.25s;
    animation-iteration-count: infinite;
}

@keyframes bouncing {
    0% { transform: translate(0, 0); }
    25% { transform: translate(5px, 0); }
    50% { transform: translate(0, 0); }
    75% { transform: translate(-5px, 0); }
    100% { transform: translate(0, 0); }
  }

.anchor, .anchor hr {
    transition: 1s background-color, 
                1s border-color;
}

.anchor.target, .anchor.target hr {
    transition: 0s;
}

.anchor.target {
    border-color: var(--fg-yellow) !important;
    background-color: var(--bg-yellow);
}

.anchor.target hr {
    border-color: var(--fg-yellow) !important;
}

.box {
    padding: 4px 1em;
    border: 1px solid;
    border-radius: 4px;
    background-color: var(--bg-primary);
    color: var(--fg-primary);
    border-color: var(--bd-primary);
    position: relative;
    /* box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); */
}

@media print {
    .box.no-box-border-on-print {
        border-color: transparent;
    }
}

.tag {
    color: var(--fg-primary);
    border-color: var(--bd-primary);
    background-color: var(--bg-secondary);
}


@media print {
    .inventory-history {
        grid-template-columns: 1fr !important;
        gap: 0.5em !important;
    }

    .inventory-history div {
        text-indent: 1em hanging each-line;
    }

    .inventory-history hr {
        margin: 0 !important;
    }
}

table.attacks { 
    border-collapse: separate;
    text-align: center;
    margin: 1em;
    margin-top: 0;
    width: calc(100% - 2em);
}

.attacks tr {
    background-color: var(--bg-secondary);
}

.attacks tr:nth-of-type(4n+1):hover,
.attacks tr:nth-of-type(4n+1):hover + tr,
.attacks tr:nth-of-type(4n+1):hover + tr + tr,

.attacks tr:has( + tr:nth-of-type(4n+2):hover),
.attacks tr:nth-of-type(4n+2):hover,
.attacks tr:nth-of-type(4n+2):hover + tr,

.attacks tr:has( + tr + tr:nth-of-type(4n+3):hover),
.attacks tr:has( + tr:nth-of-type(4n+3):hover),
.attacks tr:nth-of-type(4n+3):hover {
    cursor: pointer;
    color: var(--fg-green) !important; 
    background-color: var(--bg-green) !important;
}

.attacks td {
    border: 0px;
    padding-inline: 0.5em;
}

.attacks td:first-of-type {
    padding-left: 1em;
    text-align: left;
    border-left: 1px solid var(--bd-primary); 
    width: 100%;
}

.attacks td:last-of-type {
    padding-right: 1em;
    border-right: 1px solid var(--bd-primary);
}

.attacks tr:nth-of-type(4n+1) td:first-of-type {
    border-top-left-radius: 5px;
}

.attacks tr:nth-of-type(4n+1) td {
    border-top: 1px solid var(--bd-primary);
}

.attacks tr:nth-of-type(4n+1) td:last-of-type {
    border-top-right-radius: 5px;
}

.attacks tr:nth-of-type(4n+3) td:first-of-type {
    border-bottom-left-radius: 5px;
}

.attacks tr:nth-of-type(4n+3) td {
    border-bottom: 1px solid var(--bd-primary);
}

.attacks tr:nth-of-type(4n+3) td:last-of-type {
    border-bottom-right-radius: 5px;
}