/* Downloads: list, resource page, versions, upload bar. Built on the Float tokens in float.css. */

/* category tile */
.dl-tile { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); font-size: 1.6rem;
  background: color-mix(in oklab, var(--c) 18%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 30%, transparent); }
.dl-tile-lg { width: 88px; height: 88px; border-radius: var(--r-lg); font-size: 2.6rem; }
.dl-cat-mods { --c: #8b5cf6; } .dl-cat-maps { --c: #22c55e; } .dl-cat-tools { --c: #f59e0b; }
.dl-cat-builds { --c: #0ea5e9; } .dl-cat-assets { --c: #ec4899; } .dl-cat-other { --c: #64748b; }
.dl-chip { background: color-mix(in oklab, var(--c, var(--accent)) 16%, transparent); color: color-mix(in oklab, var(--c, var(--accent)) 80%, var(--text)); }
.dl-chip-mods { --c: #8b5cf6; } .dl-chip-maps { --c: #16a34a; } .dl-chip-tools { --c: #d97706; }
.dl-chip-builds { --c: #0284c7; } .dl-chip-assets { --c: #db2777; } .dl-chip-other { --c: #64748b; }
.dl-game, .dl-ver { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font: 600 11px/1 var(--font-ui);
  color: var(--text-muted); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.dl-ver { font-family: var(--font-mono); }

/* list */
/* head: title + Share; then one row with category tabs left, search and sort right */
.dl-filter { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin: var(--s-5) 0; }
.dl-seg { min-width: 0; justify-self: start; }
.dl-find { display: flex; gap: 8px; min-width: 0; }
.dl-find input[type=search] { flex: 1 1 auto; width: auto; min-width: 0; }
.dl-find select { flex: none; width: auto; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--gap-float); }
.dl-card { display: flex; gap: var(--s-4); padding: var(--s-4) var(--s-5); color: inherit; text-decoration: none; }
.dl-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.dl-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dl-card h3 { margin: 2px 0 0; font: 700 var(--fs-lg, 1.15rem)/1.2 var(--font-display); letter-spacing: var(--track-tight); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.dl-card p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dl-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.dl-by { min-width: 0; overflow-wrap: anywhere; }
.dl-nums { margin-left: auto; display: flex; gap: 12px; white-space: nowrap; }

/* resource page */
.dl-hero { display: flex; gap: var(--s-5); align-items: center; padding: var(--s-6); margin: var(--s-5) 0 max(var(--gap-float, 10px), var(--s-4)); border-radius: var(--r-xl); }
.dl-hero-main { min-width: 0; flex: 1; }
.dl-hero h1 { margin: 6px 0 0; font: 800 clamp(1.7rem, 4vw, 2.6rem)/1.08 var(--font-display); letter-spacing: var(--track-tight); }
.dl-tag { margin: 6px 0 0; color: var(--text-muted); font-size: var(--fs-md, 1.05rem); }
.dl-hero-by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-muted); }
.dl-get { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; height: auto; padding: 14px 26px; font-size: var(--fs-md, 1.05rem);
  transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-liquid); }
.dl-get span { font: 500 var(--fs-xs)/1 var(--font-ui); opacity: .85; }
.dl-get:hover { transform: translateY(-2px); }
.dl-get:active { transform: scale(.97); }
@media (max-width: 760px) { .dl-hero { flex-wrap: wrap; padding: var(--s-5); } .dl-hero-get, .dl-get { width: 100%; } .dl-tile-lg { width: 64px; height: 64px; font-size: 2rem; } }
.dl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-4); }
.dl-watch { width: 100%; }
.dl-watch[aria-pressed="true"] { color: var(--accent); }
.dl-note { margin-top: 10px; }
.dl-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: var(--fs-sm); }
.dl-dl dt { color: var(--text-faint); }
.dl-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dl-sha { font: 500 var(--fs-xs)/1 var(--font-mono); }
.dl-tcat { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dl-tcat .btn { text-transform: none; letter-spacing: 0; }
.dl-v { border-top: 1px solid var(--border); }
.dl-v:first-of-type { border-top: 0; }
.dl-v summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px var(--s-5); cursor: pointer; list-style: none; }
.dl-v summary::-webkit-details-marker { display: none; }
.dl-v summary:hover { background: var(--surface-2); }
.dl-v-name { font: 700 var(--fs-md, 1.05rem)/1.2 var(--font-mono); }
.dl-v-get { margin-left: auto; }
.dl-log { padding: 0 var(--s-5) var(--s-4); }
.dl-v[open] .dl-log { animation: float-in var(--t-med) var(--ease-liquid) both; }
.dl-v-tools { padding: 0 var(--s-5) var(--s-3); text-align: right; }

/* upload */
.dl-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.dl-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width var(--t-med) var(--ease-liquid); }
.dl-form.is-sending button.primary { opacity: .6; }
.dl-vin { max-width: 160px; font-family: var(--font-mono); }

/* list head and empty state (MUR158) */
.dl-head { align-items: center; }
.dl-head > :first-child { min-width: 0; }
.dl-empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.dl-empty p { margin: 0; }

/* page head: the buttons and tabs sit on the title's centre line and the subtitle runs under the title;
   on phones the tools take their own row under the subtitle */
.dl-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-4); row-gap: 6px; }
.dl-head > div:first-child { display: contents; }
.dl-head h1 { flex: 1 1 auto; min-width: 0; margin: 0; }
.dl-head > div:first-child > :not(h1) { order: 2; flex-basis: 100%; min-width: 0; }
.dl-head > .greet-tools { order: 1; margin-left: auto; width: auto; min-width: 0; }
.dl-head > .greet-tools > * { max-width: 100%; }
@media (max-width: 600px) { .dl-head > .greet-tools { order: 3; flex-basis: 100%; margin-left: 0; margin-top: var(--s-2); } }