/*
 * The redesigned /downloads (#429) in the ICR Core shell: tabs by category, each a short list. Tokens only,
 * checked by HelpCssTokensTest. Each row: icon, name and one line; its files and store badges on the right.
 * The visitor's own platform's button is filled ([data-os] from the page script); the rest are outlined.
 */
.d { padding-top: 0; }
.d h2, .d h3 { font-family: var(--icr-font-display); color: var(--icr-color-heading); margin: 0; }

/* The photo band: the banner photo, darkened from the left, the title and one line over it. */
.d-hero { position: relative; display: flex; align-items: center; min-height: 220px; overflow: hidden; background: var(--icr-ink-900); }
.d-hero picture, .d-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.d-hero-img { object-fit: cover; object-position: 60% 50%; }
.d-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--icr-scrim) 0%, var(--icr-scrim) 35%, transparent 85%); }
.d-hero-in { position: relative; z-index: 1; padding-top: var(--icr-space-8); padding-bottom: var(--icr-space-8); }
.d-hero h1 { margin: 0; color: var(--icr-white); font: 700 var(--icr-text-48)/1.1 var(--icr-font-display); }
.d-hero p { max-width: 52ch; margin: var(--icr-space-2) 0 0; color: var(--icr-white); font-size: var(--icr-text-18); }

/* Tabs: a row of links; the open one underlined in red. Scrolls sideways on its own on a narrow phone. */
.d-tabs { display: flex; gap: var(--icr-space-1); margin-top: var(--icr-space-6); border-bottom: 1px solid var(--icr-line); overflow-x: auto; scrollbar-width: none; }
.d-tabs::-webkit-scrollbar { display: none; }
.d-tab { flex: none; display: flex; align-items: center; min-height: var(--icr-space-12); padding: 0 var(--icr-space-4); color: var(--icr-ink-500) !important; font: 700 var(--icr-text-16) var(--icr-font-display); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.d-tab:hover { color: var(--icr-color-heading) !important; }
.d-tab[aria-selected="true"] { color: var(--icr-color-heading) !important; box-shadow: inset 0 -3px 0 var(--icr-color-primary); }
.d-panel { padding-top: var(--icr-space-5); }
.d-panel:focus-visible { outline-offset: var(--icr-space-1); }
.d-intro { margin: 0; color: var(--icr-color-text-muted); font-size: var(--icr-text-16); }
.d-group { margin-top: var(--icr-space-8) !important; color: var(--icr-color-text-muted) !important; font-size: var(--icr-text-14); text-transform: uppercase; letter-spacing: .08em; }

/* Rows. */
.d-items { margin: var(--icr-space-4) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--icr-line-subtle); }
.d-group + .d-items { margin-top: var(--icr-space-2); }
.d-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--icr-space-2) var(--icr-space-6); align-items: center; padding: var(--icr-space-4) 0; border-bottom: 1px solid var(--icr-line-subtle); }
.d-item.has-icon { grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--icr-space-2) var(--icr-space-4); }
.d-item-icon { width: 48px; height: 48px; border-radius: 22.5%; box-shadow: var(--icr-shadow-1); }
.d-item-name { font-size: var(--icr-text-18); line-height: 1.25; }
.d-item-name a { color: inherit; text-decoration: none; }
.d-item-name a:hover { color: var(--icr-color-primary); text-decoration: underline; }
.d-line { margin: var(--icr-space-1) 0 0; color: var(--icr-color-text-muted); font-size: var(--icr-text-16); line-height: 1.4; }
.d-meta { display: flex; flex-wrap: wrap; gap: 0 var(--icr-space-4); margin: var(--icr-space-1) 0 0; color: var(--icr-color-text-muted); font-size: var(--icr-text-14); }
.d-meta span { font-variant-numeric: tabular-nums; }
/* The actions: one fixed-width column (320 px fits "Download for Windows" with "from splashtop.com") on every row, so buttons line up down the list. Each file button fills
   it (label left, type and size right); two store badges fill the same width edge to edge. */
.d-item-get { display: flex; flex-direction: column; gap: var(--icr-space-2); width: 320px; }
.d-badges { display: flex; justify-content: space-between; gap: var(--icr-space-3); }
.d-badges:has(> :only-child) { justify-content: flex-start; }
.d-badge { display: block; line-height: 0; }
/* On a phone the store badges are the way in: put them first. */
[data-os="ios"] .d-badges, [data-os="android"] .d-badges { order: -1; }
.d-badge img { display: block; width: auto; height: 40px; }

/* Download buttons: outlined; the visitor's platform filled (not on the Tools tab: one primary per app). */
.d-dl { display: flex; align-items: center; gap: var(--icr-space-2); width: 100%; min-height: var(--icr-control-height); padding: 0 var(--icr-space-4); border: 1px solid var(--icr-ink-700); border-radius: var(--icr-radius-md); background: var(--icr-white); color: var(--icr-ink-900) !important; font: 500 var(--icr-text-16) var(--icr-font-body); text-decoration: none; white-space: nowrap; }
.d-dl:hover { border-color: var(--icr-color-primary); color: var(--icr-color-primary) !important; }
.d-dl small { margin-left: auto; color: var(--icr-color-text-muted); font-size: var(--icr-text-14); font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-mark { width: var(--icr-space-5); height: var(--icr-space-5); flex: none; }
[data-os="windows"] .d-panel:not(#d-panel-tools) .d-dl[data-platform="windows"], [data-os="mac"] .d-panel:not(#d-panel-tools) .d-dl[data-platform="mac"] { background: var(--icr-color-primary); border-color: var(--icr-color-primary); color: var(--icr-color-on-primary) !important; }
[data-os="windows"] .d-panel:not(#d-panel-tools) .d-dl[data-platform="windows"] small, [data-os="mac"] .d-panel:not(#d-panel-tools) .d-dl[data-platform="mac"] small { color: var(--icr-color-on-primary); }

/* Older software, folded. */
.d-older { margin-top: var(--icr-space-6); }
.d-older > summary { display: inline-flex; align-items: center; gap: var(--icr-space-2); min-height: var(--icr-control-height); color: var(--icr-color-heading); font-weight: 500; cursor: pointer; list-style: none; }
.d-older > summary::-webkit-details-marker { display: none; }
.d-older > summary::before { content: ""; width: var(--icr-space-2); height: var(--icr-space-2); border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
.d-older[open] > summary::before { transform: rotate(45deg); }
.d-older > summary span { color: var(--icr-color-text-muted); font-size: var(--icr-text-14); font-weight: var(--icr-weight-regular); }
.d-older .d-items { margin-top: var(--icr-space-2); }
.d-help { margin: var(--icr-space-12) 0 0; color: var(--icr-color-text-muted); font-size: var(--icr-text-16); }
.d-legal { margin: var(--icr-space-4) 0 0; color: var(--icr-color-text-muted); font-size: var(--icr-text-12); }

@media (max-width: 767px) {
  .d-hero { min-height: 160px; }
  .d-hero::after { background: var(--icr-scrim); }
  .d-hero h1 { font-size: var(--icr-text-36); }
  .d-hero p { font-size: var(--icr-text-16); }
  .d-tabs { margin-top: var(--icr-space-5); margin-left: calc(-1 * var(--icr-space-4)); margin-right: calc(-1 * var(--icr-space-4)); padding: 0 var(--icr-space-2); }
  .d-tab { padding: 0 var(--icr-space-3); }
  .d-item, .d-item.has-icon { grid-template-columns: minmax(0, 1fr); }
  .d-item.has-icon { grid-template-columns: 48px minmax(0, 1fr); }
  .d-item.has-icon .d-item-get { grid-column: 1 / -1; }
  .d-item-get { width: 100%; max-width: 400px; }
}