/* ========================================================================
   downloads.css -- ScribeHold downloads page

   Component layer of the modular CSS bundle. Drives /downloads:
     - .downloads-current        latest-release feature card (hero of the page)
     - .downloads-history        previous-versions section + table
     - .downloads-table          semantic version-history table
     - .btn--compact             smaller per-row download button
     - .visually-hidden          screen-reader-only utility (table <caption>)

   Mobile-first: base styles target the smallest viewport; the current-release
   card stacks meta over actions and switches to a two-column row at >= 768px.
   The version table is wrapped in a horizontal-scroll container so columns keep
   readable width on narrow screens (mirrors comparison.css Decision 2).

   All color, type, spacing, radius, shadow values come from tokens.css via
   var(...). Fallbacks provided so the file degrades gracefully if tokens.css
   is missing or reordered.

   Bundle order: tokens -> base -> layout -> components/* -> pages/*
   ======================================================================== */

/* ------------------------------------------------------------------------
   0. Utility -- screen-reader-only
   ------------------------------------------------------------------------ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* ------------------------------------------------------------------------
   1. .downloads-current -- latest-release feature card
   ------------------------------------------------------------------------ */

.downloads-current {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 20px);
    margin-top: var(--space-6, 24px);
    border-top: 4px solid var(--color-accent, #9b6822);
}

@media (min-width: 768px) {
    .downloads-current {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-8, 32px);
    }
}

.downloads-current__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

.downloads-current__eyebrow {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--letter-spacing-wide, 0.02em);
    text-transform: uppercase;
    color: var(--color-accent-ink, #6a4514);
}

.downloads-current__version {
    margin: 0;
    font-size: var(--font-size-3xl, 1.875rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height-tight, 1.15);
    color: var(--color-ink, #1f2024);
}

.downloads-current__date {
    margin: 0;
    font-size: var(--font-size-base, 1rem);
    color: var(--color-muted, #5a5d66);
}

.downloads-current__note {
    margin-top: var(--space-1, 4px);
}

.downloads-current__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    align-items: stretch;
}

@media (min-width: 768px) {
    .downloads-current__actions {
        align-items: flex-end;
        flex-shrink: 0;
    }
}

.downloads-current__notes-link {
    align-self: center;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-link, #6a4514);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.downloads-current__notes-link:hover {
    color: var(--color-link-hover, #9b6822);
}

/* ------------------------------------------------------------------------
   2. .downloads-history -- previous-versions section
   ------------------------------------------------------------------------ */

.downloads-history {
    margin-top: var(--space-12, 48px);
}

.downloads-history__heading {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-snug, 1.3);
    color: var(--color-ink, #1f2024);
}

.downloads-history__intro {
    margin: 0 0 var(--space-5, 20px);
    color: var(--color-muted, #5a5d66);
}

/* Mobile horizontal-scroll wrapper -- a no-op on wider viewports. */
.downloads-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--color-border, #e6e2d6);
    border-radius: var(--radius-md, 8px);
}

/* ------------------------------------------------------------------------
   3. .downloads-table -- version-history table
   ------------------------------------------------------------------------ */

.downloads-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base, 1rem);
}

.downloads-table th,
.downloads-table td {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    text-align: left;
    border-bottom: 1px solid var(--color-border, #e6e2d6);
    white-space: nowrap;
}

.downloads-table thead th {
    background: var(--color-bg-manila, #f4f1e8);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--letter-spacing-wide, 0.02em);
    text-transform: uppercase;
    color: var(--color-muted, #5a5d66);
}

.downloads-table tbody tr:last-child td {
    border-bottom: 0;
}

.downloads-table__version {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-ink, #1f2024);
}

.downloads-table__date {
    color: var(--color-muted, #5a5d66);
}

.downloads-table__action {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

.downloads-table__notes-link {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-link, #6a4514);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.downloads-table__notes-link:hover {
    color: var(--color-link-hover, #9b6822);
}

/* ------------------------------------------------------------------------
   4. .btn--compact -- smaller per-row download button

   Relaxes the page-level .btn 48px floor for dense table rows. Keeps a
   44px minimum hit area (WCAG 2.5.5) via min-height while trimming the
   horizontal padding and font size so the button reads as a row action.
   ------------------------------------------------------------------------ */

.btn--compact {
    min-height: 2.75rem; /* 44px floor (WCAG 2.5.5) */
    min-width: 0;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--font-size-sm, 0.875rem);
}

/* ------------------------------------------------------------------------
   5. .downloads-help -- closing help line
   ------------------------------------------------------------------------ */

.downloads-help {
    margin-top: var(--space-10, 40px);
}

/* ------------------------------------------------------------------------
   6. .downloads-os-notice -- Windows-only notice for non-Windows visitors

   Hidden by default (rendered with [hidden]); os-detect.js reveals it and
   hides the Windows download UI when a non-Windows OS is detected. Soft
   panel surface with a navy spine to read as informational, not an error.
   ------------------------------------------------------------------------ */

.downloads-os-notice {
    margin-top: var(--space-6, 24px);
    padding: var(--space-6, 24px);
    background: var(--color-bg-manila, #f4f1e8);
    border: 1px solid var(--color-border, #e6e2d6);
    border-left: 4px solid var(--color-cta, #1b2a4e);
    border-radius: var(--radius-md, 8px);
}

.downloads-os-notice__heading {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-snug, 1.3);
    color: var(--color-ink, #1f2024);
}

.downloads-os-notice__body {
    margin: 0 0 var(--space-3, 12px);
    color: var(--color-muted, #5a5d66);
}

.downloads-os-notice__body:last-child {
    margin-bottom: 0;
}