/* Download page — platform tabs + the Linux card (2026-09-29).
   Loaded after dl2-*.css; only adds, never restyles the Windows card.
   The segmented control follows the vibefarsi.ir "segmented" tabs: a pill
   container, muted labels, and a capsule that slides under the active tab
   (measured from the button's offsetLeft/offsetWidth, so it is RTL-safe). */

.d2-platform { margin-top: 26px; position: relative; z-index: 2; }
.d2-platform-title { font-size: 15px; font-weight: 800; color: var(--fg); margin: 0 0 12px; }
.d2-tabs {
    position: relative; display: inline-flex; align-items: center; gap: 4px;
    padding: 4px; border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 6%, var(--card));
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 #fff8;
}
.d2-tab {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 800;
    transition: color .18s ease;
}
.d2-tab:hover { color: var(--fg); }
.d2-tab[aria-selected="true"] { color: var(--primary); }
.d2-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.d2-tab svg { width: 17px; height: 17px; flex-shrink: 0; }
.d2-tab-cap {
    position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px;
    background: var(--card); box-shadow: 0 2px 10px var(--ring), 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1);
    will-change: transform, width;
}
.d2-tabs.is-ready .d2-tab-cap { opacity: 1; }
.d2-tab-cap { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .d2-tab-cap, .d2-tab { transition: none; } }
.d2-os-panel[hidden] { display: none; }

/* The Linux card reuses the Windows card's classes; only the extras are here. */
.d2-linux-beta-tag { margin-inline-start: 2px; }
.d2-cmd {
    margin: 0 30px 24px; padding: 16px 18px; border-radius: 14px;
    border: 1px solid var(--border); background: var(--bg2);
}
.d2-cmd-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.d2-cmd-head strong { font-size: 14px; }
.d2-cmd-head small { color: var(--muted); font-size: 12.5px; flex-basis: 100%; }
.d2-cmd-row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border: 1px solid var(--border); border-radius: 11px;
    background: color-mix(in srgb, var(--fg) 4%, var(--card));
}
.d2-cmd-row code {
    flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.6; color: var(--fg);
    white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.d2-cmd-row .d2-copy { align-self: flex-start; }
.d2-linux-note { margin: 0 30px 24px; }
.d2-linux-note p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--muted); }
.d2-linux-note .d2-mono { font-size: 12px; }
@media (max-width: 560px) {
    .d2-tab { height: 38px; padding: 0 14px; font-size: 13.5px; }
    .d2-cmd, .d2-linux-note { margin-inline: 18px; }
}