/* reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    line-height: 1.25;
    -webkit-font-smoothing: antialiased;
    font-family: "Noto Sans", "Noto Sans TC", sans-serif;
    font-weight: 400;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
    padding-bottom: 1rem;
    line-height: 1.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    font-family: "Noto Sans", "Noto Sans TC", sans-serif;
    font-weight: 600;
}

*,
html {
    font-size: 15px;
}

body {
    padding: 0rem;
    font-family: "Noto Sans", "Noto Sans TC", sans-serif;
}

/* setup */

:root {
    --background: var(--light-light);
    --text: var(--dark-mid);
    --border: color-mix(in srgb, var(--dark-light) 5%, var(--light-dark));

    --border-top-color: color-mix(in srgb,
            var(--background) 50%,
            var(--border));
    --border-top-width: 1px;
    --border-side-color: color-mix(in srgb,
            var(--background) 50%,
            var(--border));
    --border-side-width: 1px;
    --border-bottom-color: var(--border);
    --border-bottom-width: 1px;
    --accent-text: var(--accent);

    --button-highlight: #ffffff;
    --bg-mid: var(--light-mid);
    --lightest: var(--accent-lightest);
    --light: var(--accent-light);
    --dark: var(--accent-dark);
    --darkest: var(--accent-darkest);
    --accent-navbar: var(--accent-light);
    --highlight: var(--highlight-light);
    --highlight-text: var(--text-color);
    --radius: 0.25rem;
}

:lang(zh), [lang^="zh"] {
    font-family: 'Songti TC', serif;
  }

[data-theme="dark"] {
    --background: var(--dark-dark);
    --text: var(--light-mid);
    --border: var(--dark-light);

    --border-top-color: color-mix(in srgb,
            var(--background) 50%,
            var(--border));
    --border-top-width: 0.0625rem;
    --border-side-color: color-mix(in srgb,
            var(--background) 75%,
            var(--dark-light));
    --border-side-width: 0.0625rem;
    --border-bottom-color: color-mix(in srgb, var(--background) 50%, #000000);
    --border-bottom-width: 0.125rem;

    --button-highlight: color-mix(in srgb,
            var(--light-dark) 50%,
            var(--bg-color));
    --accent-text: var(--accent-light);
    --bg-mid: var(--dark-mid);
    --accent-navbar: var(--accent-dark);
    --highlight: var(--bg-color);
    --highlight-text: var(--highlight-mid);
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--background);
    color: var(--text);
}

main {
    padding: 1rem 2rem;
}

header {
    padding: 1rem 2rem;
    padding-bottom: 0rem;
}

.wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

footer {
    background: color-mix(in srgb, var(--background) 75%, var(--border));
    /*background: var(--light-mid);*/
    padding: 1rem 2rem;
    padding-bottom: 2rem;
}

footer p {
    padding: 0;
}

header>div,
main>div,
footer>div {
    max-width: 120rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* buttons */
select {
    appearance: none;
}

button,
select,
input[type="text"],
input[type="checkbox"],
textarea {
    line-height: 1.25rem;
    padding: 0.25rem 0.5rem;
    padding-bottom: 0.125rem;
    min-height: 1.875rem;
    background-color: var(--background);
    cursor: pointer;
    color: var(--text);
    border-top: var(--border-top-width) solid var(--border-top-color);
    border-radius: var(--radius);
    border-bottom: var(--border-bottom-width) solid var(--border-bottom-color);
    border-left: var(--border-side-width) solid var(--border-side-color);
    border-right: var(--border-side-width) solid var(--border-side-color);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14), 
    inset 0 -1px 1px 0px rgba(0, 0, 0, 0.075),
    inset 0 1px 1px 0px rgba(255, 255, 255, 0.25);
}

input[type="checkbox"] {
    accent-color: var(--accent);
    padding: 0;
    margin: 0;
    line-height: 1rem;
    min-height: 1rem;
}

input[type="text"],
textarea {
    box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.075),
        0 1px 1px rgba(255, 255, 255, 0.075);
    background: var(--background);
    border-radius: var(--radius);
    border-bottom: var(--border-top-width) solid var(--border-side-color);
    border-radius: var(--radius);
    border-top: var(--border-bottom-width) solid var(--border-bottom-color);
    border-left: var(--border-side-width) solid var(--border-side-color);
    border-right: var(--border-side-width) solid var(--border-side-color);
}

/* navbar */

nav>div {
    display: inline-block;
}

nav>div {
    padding-right: 1rem;
}

nav>div:last-of-type {
    padding-right: 0rem;
}

nav>div>a:first-of-type>button {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

nav>div>a>button {
    border-right-width: 0;
}

nav>div>a:last-of-type>button {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    border-right-width: 1px;
}

nav button {
    padding: 0.35rem 0.65rem;
    background-color: var(--accent);
    border-bottom: 2px solid var(--accent-dark);
    border-left: 1px solid color-mix(in srgb, var(--accent-dark) 75%, var(--accent));
    border-right: 1px solid color-mix(in srgb, var(--accent-dark) 75%, var(--accent));
    color: var(--light-light);
    border-radius: 0;
    border-top: 1px solid color-mix(in srgb, var(--accent) 75%, var(--accent-light));
    text-shadow: 0px 1px 0px var(--accent-dark);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14), 
    inset 0 -1px 1px rgba(0, 0, 0, 0.075),
    inset 0 2px 1px var(--accent-light)
    /* box-shadow: inset 0 2px 0px var(--accent-light); */
    /* box-shadow:
        0 2px 1px rgba(0, 0, 0, 0.1),
        inset 0 -1px 1px var(--accent-dark),
        inset 0 2px 1px var(--accent-light) */
}

/* column classes */

.col-title {
    font-weight: 700;
}

strong,
b {
    font-weight: 600 !important;
}

.col-keywords {
    font-weight: 200;
}

div.cols {
    column-gap: 2rem;
    column-count: 1;
    box-sizing: border-box;
}

div.cols>* {
    display: block;
    width: auto;
    box-sizing: border-box;
    break-inside: avoid;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
    /* text-align: justify;
    text-justify: inter-word; */
}

div.cols>* {
    /* border: 1px dashed var(--border); */
}

@media (min-width: 700px) {
    div.cols {
        column-count: 2;
    }
}

@media (min-width: 1300px) {
    div.cols {
        column-count: 3;
    }
}

.disabled {
    opacity: 0.5;
    cursor: default;
}

.col-keywords {
    font-size: 0.75rem;
    background: var(--highlight);
    margin: 0 0.25rem;
    padding: 0 0.25rem;
    border-radius: 0.25rem;
}

.highlight {
    background: var(--highlight);
    margin: 0 0.25rem;
    padding: 0 0.25rem;
    border-radius: 0.25rem;
}

p.cv span {
    margin-right: 0.5rem;
}

/* p.journal .col-outlet {font-style: oblique;} */
div.sec-reviewing p {
    padding-bottom: 0.25rem;
}

h1 span.smallcaps {
    font-variant: small-caps;
    font-weight: 800;
}

h1 strong {
    font-weight: 800;
}

span.theme {
    cursor: pointer;
    color: var(--accent);
}

.pagination-controls {
    padding: 0;
    /* padding-bottom: 0.5rem; */
    margin: 0.75rem 0;
    margin-top: 0.25rem;
}

.pagination-controls>* {
    margin-right: 0.5rem;
}

.pagination-controls select {
    padding-right: 1.15rem;
    background-image: url("data:image/svg+xml;utf8,<svg height='10' viewBox='0 0 10 6' width='10' xmlns='http://www.w3.org/2000/svg'><path fill='currentColor' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 0.65rem auto;
}

a {
    text-decoration: none;
    color: var(--accent-text);
}

h1,
h1 * {
    font-size: 1.5rem;
    text-decoration: none;
}

h1>small * {
    font-size: 1rem;
    padding-left: 1rem;
    font-weight: 200;
}

h2,
h2 * {
    font-size: 1.25rem;
    text-decoration: none;
    color: var(--accent-text);
}

h3,
h3 * {
    font-size: 1.125rem;
    text-decoration: none;
    color: var(--accent-text);
}

h4,
h4 * {
    font-size: 1rem;
    text-decoration: none;
    font-weight: 800;
    /*color: var(--accent-text);*/
}

pn {
    padding: 0rem;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--accent-light);
    display: inline;
    text-underline-offset: 0.25rem;
}

@media print {
    .page, .page-break { break-after: page; }
    html,
    body,
    * {
        font-size: 12px;
    }

    div.cols {
        column-count: 2;
        box-sizing: border-box;
    }

    div.cols p, h1, h2, h3, h4 {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .col-keywords,
    .col-file,
    .col-link, .keyword,
    footer, header {
        display: none
    }

    p.col {
        padding: 0;
        margin: 0;
        display: inline-block;
        padding-bottom: 1.5rem;
        line-height: 1.5rem;
        line-break: loose;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        max-width: 100%;
    }
}


.table-container {
    display: table;
    border: 1px solid var(--border);
    width: 100%;
    border-radius: var(--radius);
}

.table-row {
    display: table-row;
    border-radius: var(--radius);
    padding: 0;
    margin: 0;
}

.table-row button {
    padding: 0rem;
    width: 1.5rem;
    background: none;
    box-shadow: none;
    border: none;
    margin: 0;
}

.table-row:nth-child(even) {
    display: table-row;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--background) 75%, var(--border));
    padding: 0;
    margin: 0;
}

.table-cell {
    display: table-cell;
    padding: 0;
    line-height: 1.25;
    padding: 0.125rem;
    break-inside: avoid;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
    /* line-height: 1; */
    /* padding-top: 0; */
    /* vertical-align: top; */
}

.table-header {
    display: table-cell;
    font-weight: 600;
    padding: 0.25rem;
    padding-right: 1rem;
}

.table-header:last-of-type {
    padding-right: 0rem;
}

.filter-row .table-header {
    padding: 0.25rem 0;
}