/* filedrop, minimal: black and white, one typeface, few sizes, almost no lines. Loads after app.css and only overrides it. */

/* Neutral tokens for every stored theme. Dark unless the theme is a light one. */
:root, :root[data-theme] {
  color-scheme: dark;
  --bg: #0a0a0a;
  --surface: #0a0a0a;
  --raised: #171717;
  --tint: #121212;
  --line: #262626;
  --line-soft: #1a1a1a;
  --dash: #333;
  --text: #e6e6e6;
  --soft: #a6a6a6;
  --faint: #7d7d7d;
  --accent: #e6e6e6;
  --on-accent: #0a0a0a;
  --warm: #e6e6e6;
  --warm-tint: #121212;
  --glow: transparent;

  --ui: 'Funnel Sans', system-ui, sans-serif;
  --alt: var(--ui);
  --radius: 4px;
  --header: 56px;
}
:root[data-scheme="light"] {
  color-scheme: light;
  --bg: #fff;
  --surface: #fff;
  --raised: #f2f2f2;
  --tint: #f7f7f7;
  --line: #e6e6e6;
  --line-soft: #efefef;
  --dash: #ccc;
  --text: #111;
  --soft: #444;
  --faint: #707070;
  --accent: #111;
  --on-accent: #fff;
  --warm: #111;
  --warm-tint: #f7f7f7;
  --shadow: #0000001a;
}

/* base */
body { font-size: 15px; }
h1, h2, h3 { font-family: var(--body); font-weight: 500; letter-spacing: 0; }
.scene, body::after { display: none; }
:focus-visible { border-radius: 2px; }
.drag-frame { inset: 8px; border: 1px dashed var(--faint); border-radius: 4px; }
.is-dragging .drag-frame { opacity: 1; }

/* buttons: outlined text, no icons, no lift */
.button { gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 4px; font: 400 .875rem var(--body); transition: background-color .2s, border-color .2s, color .2s, opacity .2s; }
.button .icon, .text-button .icon { display: none; }
.button:active, .round:active { transform: none; }
.button-primary { background: none; color: var(--text); border-color: var(--text); font-weight: 500; box-shadow: none; }
.button-primary:hover { background: var(--text); color: var(--bg); border-color: var(--text); transform: none; box-shadow: none; }
.button-primary:active { transform: none; box-shadow: none; }
.button-small { min-height: 32px; padding: 0 10px; }
.button-danger:hover { background: none; }
.text-button { min-height: 32px; font: 400 .875rem var(--body); text-decoration-color: var(--line); }
.round { width: 32px; height: 32px; border: 0; border-radius: 4px; color: var(--soft); }
.round:hover { background: var(--raised); color: var(--text); }
.round .icon { width: 16px; height: 16px; }

/* form controls */
.input, .select { min-height: 36px; border-radius: 4px; }
.textarea { border-radius: 4px; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--soft); box-shadow: none; }
.check { border-radius: 2px; border-width: 1px; }
.segmented { gap: 16px; padding: 0; border: 0; background: none; }
.segmented span { min-height: 32px; padding: 0; border-radius: 0; font: 400 .8125rem var(--body); color: var(--faint); }
.segmented input:checked + span { background: none; color: var(--text); text-decoration: underline; text-underline-offset: .4em; }

/* header: name left, two links right, same on phones */
.site-header.is-scrolled { background: var(--bg); border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand { gap: 6px; }
.wordmark, .app-name { font: 400 .9375rem/1 var(--body); letter-spacing: 0; color: var(--text); }
.wordmark span { color: inherit; }
.wordmark:hover span { transform: none; }
.app-name { color: var(--faint); }
.app-name:hover { color: var(--text); }
.nav-link, .account-button { min-height: 40px; padding: 0 8px; border: 0; border-radius: 0; font: 400 .9375rem var(--body); color: var(--faint); }
.nav-link:hover, .nav-link[aria-current="page"], .account-button:hover { color: var(--text); }
.account-button.is-signed-in { font: 400 .9375rem var(--body); }
.account-button .icon { display: none; }
.menu-button, .nav-pill { display: none !important; }
.upload-chip { background: none; color: var(--soft); }
.header-controls { gap: 0; }
@media (min-width: 900px) { .nav { padding: 0; border: 0; background: none; } }
@media (max-width: 899px) {
  .js .nav { position: static; flex-direction: row; padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .js .nav .nav-link { min-height: 40px; font-size: .9375rem; border-radius: 0; }
  .js .nav .nav-link[aria-current="page"] { background: none; }
  .account-button { display: inline-flex; }
}
@media (max-width: 359px) { .app-name { display: inline; } .brand .wordmark { display: none; } }

/* page frame */
main { padding-bottom: 48px; }
.page-head { padding-top: clamp(32px, 6vw, 56px); margin-bottom: 28px; }
.page-head h1, .gone h1, .file-title { font: 500 1.25rem/1.3 var(--body); letter-spacing: 0; }
.page-head p, .gone p { margin-top: 6px; font-size: .9375rem; }
.section-title, .panel h2, .empty h2 { font-size: 1rem; letter-spacing: 0; }
.panel { padding: 20px 0 0; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; }
.panel + .panel, .split + .panel { margin-top: 32px; }
.split { gap: 32px; }
.plan, .tile, .wallet { border-radius: 4px; background: none; }
.plan-price { font: 500 1.25rem/1.2 var(--body); letter-spacing: 0; }
.callout, .empty, .table-wrap, .faq-item, .code, .toc a, .bulkbar, .badge, dialog, .toast, .token-box code { border-radius: 4px; }
.callout .icon { display: none; }
.empty { border: 0; padding: 48px 0; }
.empty .drop-icon { display: none; }
.figures { border-color: var(--line-soft); }
.figure dd { font: 400 1.5rem/1.1 var(--body); letter-spacing: 0; }

/* footer: small, no rule */
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding: 24px 0 32px; border: 0; font-size: .8125rem; }
.footer-brand { display: block; max-width: none; }
.footer-brand a { color: var(--faint); text-decoration: none; }
.footer-brand a:hover, .footer-cols a:hover { color: var(--text); }
.footer-cols { gap: 0 16px; flex-wrap: wrap; }
.footer-cols a { display: inline-flex; align-items: center; min-height: 32px; color: var(--faint); text-decoration: none; transition: color .2s; }
@media (max-width: 599px) { .footer-cols a { min-height: 40px; } }

/* upload: a prompt, the lifetimes and a button, centred in empty space. The heading stays for screen readers. */
.upload { padding-top: clamp(56px, 20vh, 200px); }
.upload-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.upload-sub { order: 1; margin-top: 32px; color: var(--faint); font-size: .8125rem; }

.drop-card { width: min(480px, 100%); margin-top: 0; padding: 0; border: 0; border-radius: 4px; background: none; box-shadow: none; text-align: center; }
.drop-card.is-over { transform: none; box-shadow: none; }
/* No outline to fill, so progress shows only in the per-file bars and the total line. */
.trace { display: none; }

.card-top { justify-content: center; margin: 0 0 4px; }
.tabs { gap: 16px; padding: 0; background: none; }
.tab { min-height: 32px; padding: 0; border-radius: 0; font: 400 .8125rem var(--body); color: var(--faint); }
.tab[aria-selected="true"] { background: none; color: var(--text); text-decoration: underline; text-underline-offset: .4em; }
.card-limit { display: none; }

.drop-field { min-height: 136px; padding: 24px; border: 0; border-radius: 4px; background: none; transition: background-color .2s; }
.drop-field:hover { background: var(--tint); }
.drop-card.is-over .drop-field { background: var(--tint); }
.drop-field .drop-icon { display: none; }
.drop-field b { font: 400 1.125rem/1.4 var(--body); letter-spacing: 0; }
.drop-field small { margin-top: 4px; font-size: .8125rem; }
.drop-field kbd { padding: 0; border: 0; font: inherit; }
.drop-card.has-files .drop-field { min-height: 56px; padding: 12px; }
.drop-card.has-files .drop-field b { font-size: .9375rem; }

.paste-panel { padding-top: 8px; }
.paste-panel .textarea { min-height: 136px; }

.queue { margin: 8px 0 0; padding: 0; text-align: left; }
.q-item { grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-color: var(--line-soft); }
.q-glyph { display: none; }
.q-name { font-weight: 400; }
.q-meta { grid-column: 1; }
.q-action { grid-column: 2; }
.q-bar { grid-column: 1 / 3; height: 1px; }

.card-controls { justify-content: center; gap: 16px 28px; padding: 20px 0 0; }
.card-controls .left { justify-content: center; }
.card-controls .select { min-height: 32px; }
.go { min-height: 36px; padding: 0 16px; font-size: .875rem; }
@media (max-width: 560px) {
  .card-controls, .card-controls .left { align-items: center; }
  .card-controls .segmented { display: inline-flex; }
  .card-controls .segmented label { flex: none; }
  .card-controls .segmented span { width: auto; padding: 0; }
  .go { width: auto; }
}
.turnstile-slot { padding-top: 16px; }
.card-error { margin: 12px 0 0; border-radius: 4px; }
.upload-total { padding: 10px 0 0; }
.upload-status { padding: 0; }
.upload-status .icon, .ticket-title .icon { display: none; }

.ticket { padding: 0; text-align: left; }
.ticket-title { justify-content: center; font: 400 .9375rem/1.4 var(--body); color: var(--faint); letter-spacing: 0; }
.ticket-link { margin: 12px 0 4px; text-align: center; font-size: clamp(1rem, 2.6vw, 1.125rem); font-weight: 400; }
.ticket-meta { text-align: center; }
.ticket-actions { justify-content: center; gap: 8px; margin-top: 20px; }
.ticket-list li { border-color: var(--line-soft); }
.ticket-list .t-name { font-weight: 400; }
.keybox { margin-top: 24px; padding: 16px 0 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; font-size: .8125rem; }
.keybox strong { font-weight: 500; }
.keybox code { border-radius: 4px; background: var(--raised); }

/* file page */
.file-page { padding-top: clamp(24px, 5vw, 48px); }
.preview { border-color: var(--line-soft); border-radius: 4px; background: var(--surface); }
.glyph-tile .drop-icon { width: 40px; height: 40px; border-radius: 0; background: none; color: var(--faint); }
.file-title { margin-top: 20px; }
.file-meta { border-color: var(--line-soft); }
.file-meta dt { font-weight: 400; }
.file-meta dd { font-weight: 400; }
.file-actions { gap: 8px; }
.file-actions .button-primary { min-width: 0; }
.reasons span { min-height: 32px; border-radius: 4px; }

/* motion: fades only */
.wordmark span, .theme-button svg { transition: none; }