@font-face {
    font-family: "Hiragino Kaku Gothic Pro";
    src: url("https://boysare.moe/assets/fonts/HiraginoKakuGo_Pro_latin.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Hiragino Kaku Gothic Pro";
    src: url("https://boysare.moe/assets/fonts/HiraginoKakuGo_Pro_Bold_latin.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

/* variable names deliberately match the main site's theme.css */
:root {
    color-scheme: light dark;

    /* fallback palette (light) for browsers lacking light-dark() */
    --text-color: #333;
    --bg-color: #fff;
    --highlight-color: #dbe6ff;
    --link-color: #4c7bef;
    --link-hover-color: #2952c0;
    --muted-color: #888;
    --surface-color: #f5f5f7;
    --border-color: #e0e0e0;
    --danger-color: #c0392b;

    --font-family: "Hiragino Kaku Gothic Pro", system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono-font: "JetBrains Mono", "Cascadia Code", FMono-Regular, Consolas,
        "DejaVu Sans Mono", "Liberation Mono", Menlo, monospace;

    /* dufs's SVGs are filled, not stroked, so tint them with a muted ink */
    --svg-fill: #8a94a6;
}

@supports (color: light-dark(#fff, #000)) {
    :root {
        --text-color: light-dark(#333, #e6e2e8);
        --bg-color: light-dark(#fff, #0d0d0d);
        --highlight-color: light-dark(#dbe6ff, #33324a);
        --link-color: light-dark(#4c7bef, #a9b8f0);
        --link-hover-color: light-dark(#2952c0, #cdd6f7);
        --muted-color: light-dark(#888, #9d99a6);
        --surface-color: light-dark(#f5f5f7, #16151a);
        --border-color: light-dark(#e0e0e0, #222);
        --danger-color: light-dark(#c0392b, #e0776a);

        --svg-fill: light-dark(#7d8590, #6f6d7a);
    }
}

/* ------------------------------------------------------------------- base */
html {
    font-family: var(--font-family);
    line-height: 1.5;
    color: var(--text-color);
}

body {
    /* prevent premature breadcrumb wrapping on mobile */
    min-width: 538px;
    margin: 0;
    background: var(--bg-color);
}

::selection {
    background-color: var(--highlight-color);
    color: var(--text-color);
}

a:link,
a:visited {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
}

.hidden {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 1px;
}

/* dufs's icons are inline <svg> with no fill attribute, so they default to
 * black and vanish on the dark background. `fill` does NOT follow `color`
 * unless it is currentColor, so setting a text colour on a button is not
 * enough on its own - this makes every icon inherit its text colour by
 * default, and the specific rules below can still override it. */
svg {
    fill: currentColor;
}

/* ------------------------------------------------------------------- head */
.head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.6em 1em;
    position: sticky;
    top: 0;
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb {
    font-size: 1.25em;
    padding-right: 0.6em;
    word-break: break-all;
}

.breadcrumb>a {
    color: var(--link-color);
    text-decoration: none;
}

.breadcrumb>a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* final breadcrumb */
.breadcrumb>b {
    color: var(--text-color);
}

.breadcrumb>.separator {
    color: var(--muted-color);
    padding: 0 0.25em;
}

.breadcrumb svg {
    height: 100%;
    fill: var(--svg-fill);
}

.toolbox {
    display: flex;
    margin-right: 10px;
}

.toolbox>a,
.toolbox>div {
    /* vertically align with breadcrumb text */
    height: 1.1rem;
}

.toolbox .control {
    cursor: pointer;
    padding-left: 0.25em;
    color: var(--muted-color);
}

.toolbox .control:hover {
    color: var(--link-color);
}

.toolbox .control svg {
    fill: currentColor;
}

.upload-file input {
    display: none;
}

.upload-file label {
    cursor: pointer;
}

input {
    font-family: var(--font-family);
}

/* -------------------------------------------------------------- searchbar */
.searchbar {
    display: flex;
    flex-wrap: nowrap;
    width: 246px;
    height: 22px;
    background-color: var(--bg-color);
    transition: all .15s;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    margin-bottom: 2px;
}

.searchbar #search {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    font-size: 16px;
    line-height: 16px;
    padding: 1px;
    background-color: transparent;
    border: none;
    outline: none;
    color: var(--text-color);
}

.searchbar .icon {
    color: var(--muted-color);
    padding: 3px 3px;
    cursor: pointer;
}

.searchbar .icon svg {
    fill: currentColor;
}

.main {
    padding: 0 1em;
}

.empty-folder {
    font-style: italic;
    color: var(--muted-color);
}

/* ----------------------------------------------------------------- tables */
.uploaders-table th,
.paths-table th {
    text-align: left;
    font-weight: unset;
    color: var(--muted-color);
    white-space: nowrap;
}

.uploaders-table td,
.paths-table td {
    white-space: nowrap;
}

.uploaders-table .cell-status {
    width: 80px;
    padding-left: 0.6em;
}

.cell-status span {
    display: inline-block;
}

.paths-table thead a {
    color: unset;
    text-decoration: none;
}

.paths-table thead a>span {
    padding-left: 2px;
}

.paths-table tbody tr:hover {
    background-color: var(--highlight-color);
}

.paths-table .cell-actions {
    width: 90px;
    display: flex;
    padding-left: 0.5em;
}

.paths-table .cell-mtime {
    width: 120px;
    padding-left: 0.5em;
    color: var(--muted-color);
    font-family: var(--mono-font);
    font-variant-numeric: tabular-nums;
}

.paths-table .cell-size {
    text-align: right;
    width: 70px;
    padding-left: 0.5em;
    color: var(--muted-color);
    font-family: var(--mono-font);
    font-variant-numeric: tabular-nums;
}

.path svg {
    height: 16px;
    fill: var(--svg-fill);
    padding-right: 0.5em;
    vertical-align: text-top;
}

.path {
    list-style: none;
}

.path a {
    color: var(--link-color);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    text-decoration: none;
    max-width: calc(100vw - 375px);
    min-width: 170px;
}

.path a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

.action-btn {
    padding-right: 0.3em;
    cursor: pointer;
    color: var(--muted-color);
}

.action-btn svg {
    fill: currentColor;
}

.action-btn:hover {
    color: var(--link-color);
}

.uploaders-table {
    padding: 0.5em 0;
}

.uploader {
    padding-right: 1em;
}

/* ----------------------------------------------------------------- editor */
.editor {
    width: 100%;
    height: calc(100vh - 5rem);
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
    font-family: var(--mono-font);
    outline: none;
    padding: 5px;
}

.toolbox-right {
    margin-left: auto;
    margin-right: 2em;
}

.login-btn {
    cursor: pointer;
}

.save-btn {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.logout-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.user-name {
    padding-left: 3px;
    color: var(--muted-color);
}

.not-editable {
    font-style: italic;
    color: var(--muted-color);
}

.retry-btn {
    cursor: pointer;
}

@media (min-width: 768px) {
    .path a {
        min-width: 400px;
    }
}