/*
 * OSN Dropbox — styles. Colours/fonts come from the oldskoolnerd-terminal
 * theme's --osn-* variables (with fallbacks so it still renders elsewhere).
 *
 * KNOBS — the things worth tweaking live here:
 */
.osn-dropbox {
    --dbx-lock-top:     12vh;    /* gap between the Finn line and the code box */
    --dbx-lock-width:   34rem;   /* max width of the lock screen */
    --dbx-prompt-size:  1.15rem; /* the Finn line */
    --dbx-prompt-align: center;  /* left | center */
    --dbx-prompt-gap:   1.6rem;  /* space under the Finn line */
    --dbx-code-size:    1.1rem;  /* text typed into the code box */
    --dbx-row-pad:      7px;     /* listing row height */
    --dbx-accent:       var(--osn-green, #5fd068);
    --dbx-dim:          var(--osn-green-dim, rgba(95, 208, 104, 0.6));
    --dbx-faint:        var(--osn-green-faint, rgba(95, 208, 104, 0.4));
    --dbx-border:       var(--osn-border, #1f3d20);
    --dbx-panel:        var(--osn-bg-elevated, #0d140d);
    --dbx-warn:         var(--osn-amber, #fbbf24);
    --dbx-crit:         var(--osn-danger, #f87171);
    --dbx-folder:       var(--osn-cyan, #67e8f9);

    font-family: var(--osn-mono, monospace);
    color: var(--osn-text, #e6e6e6);
}

/* ---------- lock screen ---------- */
.osn-dbx-lock {
    max-width: var(--dbx-lock-width);
    margin: var(--dbx-lock-top) auto 22vh;
    text-align: center;
}
/* ---------- page title ----------
 * The theme prints the amber "/downloads" section head AND a green
 * "Downloads" <h1>. Here the second one is just a repeat, so it is hidden
 * visually. It stays in the page for screen readers (a page with no heading
 * is hard to navigate by ear) — this is the standard "visually hidden" recipe,
 * which takes up no space at all, unlike visibility:hidden.
 */
.osn-dropbox-page .osn-post-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- the Finn line (top of page, always shown) ---------- */
.osn-dropbox .osn-dbx-epigraph {
    margin: 0 0 var(--dbx-prompt-gap);
    padding: 0;
    border: 0;
    background: none;
    text-align: var(--dbx-prompt-align);
    font-style: normal;
}
.osn-dropbox .osn-dbx-epigraph p {
    margin: 0;
    font-size: var(--dbx-prompt-size);
    color: var(--dbx-accent);
}
.osn-dropbox .osn-dbx-epigraph p::before { content: "\201C"; color: var(--dbx-faint); }
.osn-dropbox .osn-dbx-epigraph p::after  { content: "\201D"; color: var(--dbx-faint); }
.osn-dropbox .osn-dbx-epigraph cite {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    font-style: normal;
    color: var(--dbx-faint);
}
.osn-dbx-lock-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.osn-dbx-code {
    flex: 1 1 16rem;
    min-width: 0;
    font: inherit;
    font-size: var(--dbx-code-size);
    padding: 10px 12px;
    text-align: center;
    color: var(--dbx-accent);
    background: var(--dbx-panel);
    border: 1px solid var(--dbx-border);
    border-radius: 0;
    outline: none;
    caret-color: var(--dbx-accent);
}
.osn-dbx-code:focus,
.osn-dbx-input:focus {
    border-color: var(--dbx-accent);
    box-shadow: 0 0 0 1px var(--dbx-faint);
}
.osn-dbx-msg {
    min-height: 1.4em;
    margin: 0.9rem 0 0;
    color: var(--dbx-warn);
    font-size: 0.9rem;
}

/* ---------- buttons ---------- */
.osn-dbx-btn {
    font: inherit;
    font-size: 0.9rem;
    padding: 8px 10px;
    color: var(--dbx-accent);
    background: transparent;
    border: 1px solid var(--dbx-border);
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
}
.osn-dbx-btn:hover:not(:disabled),
.osn-dbx-btn:focus-visible {
    background: var(--dbx-panel);
    border-color: var(--dbx-accent);
    outline: none;
}
.osn-dbx-btn:disabled {
    color: var(--dbx-faint);
    cursor: default;
}

/* ---------- browser ---------- */
.osn-dbx-browser {
    border: 1px solid var(--dbx-border);
    background: var(--dbx-panel);
    padding: 14px;
}
.osn-dbx-browser.is-dragover {
    border-color: var(--dbx-accent);
    border-style: dashed;
    box-shadow: inset 0 0 0 2px var(--dbx-faint);
}
.osn-dbx-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.osn-dbx-crumbs {
    overflow-wrap: anywhere;
}
.osn-dbx-crumb {
    color: var(--dbx-accent);
    text-decoration: none;
}
a.osn-dbx-crumb:hover { text-decoration: underline; }
.osn-dbx-crumb.is-current { color: var(--osn-text, #e6e6e6); }
.osn-dbx-sep { color: var(--dbx-faint); margin: 0 2px; }

.osn-dbx-usage {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--dbx-dim);
}
.osn-dbx-meter {
    display: inline-block;
    width: 110px;
    height: 8px;
    border: 1px solid var(--dbx-border);
    flex: none;
}
.osn-dbx-meter-fill {
    display: block;
    height: 100%;
    background: var(--dbx-accent);
}
.osn-dbx-meter-fill.is-warn { background: var(--dbx-warn); }
.osn-dbx-meter-fill.is-crit { background: var(--dbx-crit); }

.osn-dbx-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.osn-dbx-logout { margin-left: auto; }

.osn-dbx-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px;
    border: 1px dashed var(--dbx-border);
    font-size: 0.9rem;
    color: var(--dbx-dim);
    overflow-wrap: anywhere;
}
.osn-dbx-input {
    flex: 1 1 14rem;
    min-width: 0;
    font: inherit;
    padding: 7px 9px;
    color: var(--osn-text, #e6e6e6);
    background: var(--osn-bg, #0a0f0a);
    border: 1px solid var(--dbx-border);
    border-radius: 0;
    outline: none;
}

/* ---------- listing ---------- */
.osn-dbx-tablewrap { overflow-x: auto; }
.osn-dbx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.osn-dbx-table th {
    text-align: left;
    font-weight: normal;
    color: var(--dbx-faint);
    border-bottom: 1px solid var(--dbx-border);
    padding: var(--dbx-row-pad) 8px;
}
.osn-dbx-table td {
    padding: var(--dbx-row-pad) 8px;
    border-bottom: 1px solid var(--dbx-border);
    vertical-align: middle;
}
.osn-dbx-table tbody tr:hover { background: rgba(95, 208, 104, 0.05); }
.osn-dbx-c-check { width: 28px; }
.osn-dbx-c-name { overflow-wrap: anywhere; }
.osn-dbx-c-size,
.osn-dbx-c-date {
    white-space: nowrap;
    text-align: right;
    color: var(--dbx-dim);
}
.osn-dbx-table th.osn-dbx-c-size,
.osn-dbx-table th.osn-dbx-c-date { text-align: right; }
.osn-dbx-table input[type="checkbox"] { accent-color: var(--dbx-accent); width: 16px; height: 16px; }
.osn-dbx-dir { color: var(--dbx-folder); text-decoration: none; }
.osn-dbx-file { color: var(--osn-text, #e6e6e6); text-decoration: none; }
.osn-dbx-dir:hover,
.osn-dbx-file:hover { text-decoration: underline; }
.osn-dbx-flag {
    margin-left: 10px;
    padding: 1px 6px;
    font-size: 0.75rem;
    color: var(--dbx-warn);
    border: 1px solid var(--dbx-warn);
    white-space: nowrap;
}
tr.is-flagged .osn-dbx-file,
tr.is-flagged .osn-dbx-dir { opacity: 0.6; }
.osn-dbx-empty {
    text-align: center;
    color: var(--dbx-faint);
    padding: 28px 8px !important;
}

/* ---------- uploads ---------- */
.osn-dbx-uploads:not(:empty) { margin-top: 14px; }
.osn-dbx-up {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 6px 0;
    font-size: 0.85rem;
    border-top: 1px dashed var(--dbx-border);
}
.osn-dbx-btn-small { padding: 2px 8px; font-size: 0.8rem; }
.osn-dbx-up.is-cancelled .osn-dbx-up-status { color: var(--dbx-warn); }
.osn-dbx-up-name { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.osn-dbx-up-status { color: var(--dbx-dim); }
.osn-dbx-up.is-done .osn-dbx-up-status { color: var(--dbx-accent); }
.osn-dbx-up.is-failed .osn-dbx-up-status { color: var(--dbx-crit); }

.osn-dbx-limits {
    list-style: none;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px dashed var(--dbx-border);
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--dbx-dim);
}
.osn-dbx-limits li::before { content: "> "; color: var(--dbx-faint); }
.osn-dbx-limits li.is-warn { color: var(--dbx-warn); }
.osn-dbx-limits li.is-crit { color: var(--dbx-crit); }
.osn-dbx-up-summary { border-top: 1px solid var(--dbx-border); color: var(--dbx-accent); }

/* ---------- phones ---------- */
@media (max-width: 600px) {
    .osn-dbx-c-date { display: none; }
    .osn-dbx-logout { margin-left: 0; }
    .osn-dbx-browser { padding: 10px; }
}