/* downloads.vendaa.app — download cards. Tokens only; everything else comes from css/style.css. */
.dl-grid { display: grid; gap: var(--sp-4); }
.dl-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .dl-grid--2 { grid-template-columns: 1fr; } }
.dl-card { position: relative; display: flex; flex-direction: column; padding: var(--sp-5); border-radius: var(--radius-card);
  background: var(--color-surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.dl-card--featured { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-1); }
.dl-card--plain { box-shadow: none; background: transparent; border-style: dashed; }
.dl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.dl-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--color-primary-soft); color: var(--color-primary); }
.dl-tag { font-size: var(--step--2); font-weight: 600; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); }
.dl-card--featured .dl-tag { background: var(--color-primary); color: var(--color-text-on-primary); }
.dl-card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.dl-card > p { color: var(--color-text-muted); margin-bottom: var(--sp-4); flex: 1; }
.dl-card code, .dl-steps-box code, .dl-cmd { font-size: 0.86em; padding: 1px 6px; border-radius: 6px; background: var(--color-primary-soft); color: var(--color-text); word-break: break-word; }
.dl-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dl-btn .dl-size { font-weight: 500; opacity: .8; font-size: var(--step--1); }
.dl-sha { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--line); font-size: var(--step--1); color: var(--color-text-muted); }
.dl-sha summary { cursor: pointer; font-weight: 500; }
.dl-sha summary:hover { color: var(--color-primary); }
.dl-sha-row { margin-top: var(--sp-2); }
.dl-sha-row span { display: block; font-size: var(--step--2); }
.dl-sha-row code { display: block; font-size: 12px; line-height: 1.5; word-break: break-all; user-select: all; background: none; padding: 0; color: var(--color-text); }
.dl-older { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); color: var(--color-text-muted); }
.dl-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 960px) { .dl-split { grid-template-columns: 1fr; } }
.dl-steps-box { padding: var(--sp-5); border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--line); position: sticky; top: calc(var(--header-h) + var(--sp-3)); }
@media (max-width: 960px) { .dl-steps-box { position: static; } }
.dl-box-h { font-size: var(--step-1); margin: 0; }
.dl-stack { display: grid; gap: var(--sp-3); }
.dl-stack .dl-card { padding: var(--sp-4); }
.dl-cmd { display: block; padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
.dl-fine { font-size: var(--step--1); color: var(--color-text-muted); margin: 0; }
.dl-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
/* --- tabs: All + one per section. Without JS every section shows (the links still jump). --- */
.dl-tabs { position: sticky; top: var(--header-h); z-index: 20; background: var(--color-bg); border-bottom: 1px solid var(--line); }
.dl-tab-list { display: flex; gap: 8px; list-style: none; margin: 0; padding: var(--sp-3) 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dl-tab-list::-webkit-scrollbar { display: none; }
.dl-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  background: var(--color-surface); color: var(--color-text); text-decoration: none; font-weight: 500; white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.dl-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dl-tab[aria-current="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); }
.dl-tab:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.dl-anchor { position: relative; top: calc(-1 * (var(--header-h) + 80px)); }
[data-tab-panel] { scroll-margin-top: calc(var(--header-h) + 80px); }
[data-tab-panel][hidden] { display: none; }

@media (max-width: 820px) { .dl-footer-grid { grid-template-columns: 1fr; } }