/* ── Project page additions (batch 2C, "premium and fast" pass): hero badges and chips, trust strip,
   device note, the description-tab sections (technical details, compatibility, changelog),
   the flat creator row, mobile hero actions and the mobile sticky download bar.
   Builds on pack-view.css and the components.css primitives (badge, chip, notice, steps, kv-list,
   list-divided, data-table) with tokens only, so dark and light themes follow tokens.css.
   One surface per section, status as a badge or icon tone (never a side border), 150ms motion. */

/* Page rhythm: hero and tabs sit one gap apart (was two stacked section paddings, about 160px) */
.section.project-hero-section { padding-top: var(--space-4); padding-bottom: min(var(--space-12), var(--section-pad)); }
.section.project-body-section { padding-top: 0; }

/* Hero: category and "Reviewed" badges (a fact, so neutral; only the icon carries the success tone) */
.project-hero-badges { margin-bottom: var(--space-3); }
.project-reviewed-badge .material-icons-round { color: var(--success); }
.project-summary { margin: 0; max-width: 70ch; font-size: var(--text-body-lg); line-height: 1.6; color: var(--on-surface-variant); }

/* Compatibility chips (static facts, so no hover or press feedback) */
.project-compat-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.project-compat-chips .chip { cursor: default; user-select: text; }
.project-compat-chips .chip:hover { background: var(--surface-container-high); border-color: var(--outline-variant); color: var(--on-surface-variant); }
.project-compat-chips .chip:active { transform: none; }
.project-compat-chips .chip .material-icons-round { font-size: 16px; color: var(--on-surface-variant); }
.project-chip-version { color: var(--on-surface); font-weight: 600; }
.project-compat-chips .project-chip-version:hover { color: var(--on-surface); }
.project-compat-chips .project-chip-version .material-icons-round { color: var(--primary); }
.project-chip-sep { margin: 0 2px; color: var(--on-surface-variant); font-weight: 400; }
.project-chip-kind { color: var(--on-surface-variant); font-weight: 500; }

/* Download count help link in the meta row */
.project-count-help { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); color: var(--on-surface-variant); transition: color var(--duration-short); }
.project-count-help:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.project-count-help .material-icons-round { font-size: 16px; }

/* Trust strip under the main download button: at most four facts, muted icons */
.project-trust-strip { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.project-trust-strip li { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; font-family: var(--font-sans); font-size: var(--text-label-lg); line-height: 1.4; color: var(--on-surface-variant); }
.project-trust-strip .material-icons-round { flex-shrink: 0; font-size: 16px; color: var(--on-surface-variant); }
.project-trust-strip .is-reviewed .material-icons-round { color: var(--success); }
.project-trust-strip .is-caution .material-icons-round { color: var(--warning); }
.project-trust-strip a,
.project-older-versions a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.project-trust-sep { color: var(--on-surface-variant); }
.project-older-versions { margin: var(--space-3) 0 0; font-size: var(--text-label-lg); color: var(--on-surface-variant); }

/* Report link next to Share (same shape as .share-btn) */
.project-report-link { text-decoration: none; }
.project-report-link .icon { font-size: 18px; }

/* Device note: the shared .notice (warning tone); shown by the page script on unsupported devices */
.project-platform-note { margin-top: var(--space-4); }
.project-platform-note .notice-body > strong { display: block; font-family: var(--font-sans); font-size: var(--text-body); font-weight: 600; color: var(--on-surface); }
.project-platform-note .notice-body p + p { margin-top: var(--space-2); }

/* Description tab: section titles, then one surface per section */
.project-section-title { margin: var(--space-10) 0 var(--space-4); font-family: var(--font-display); font-size: var(--text-title-lg); font-weight: 600; color: var(--on-surface); scroll-margin-top: calc(88px + var(--announcement-bar-visible-height)); }
.project-panel { padding: var(--space-6); background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); }
.project-panel--rows { padding-top: var(--space-1); padding-bottom: var(--space-1); border-radius: var(--radius-lg); }


/* Compatibility table (values in on-surface, "Not stated" muted at AA contrast) */
.project-compat-wrap .data-table th[scope="row"] { white-space: nowrap; }
.project-compat-version { display: inline-flex; align-items: center; gap: var(--space-2); }
.project-table-sub { display: block; margin-top: 2px; font-size: var(--text-label); font-weight: 400; color: var(--on-surface-variant); }
.project-muted { color: var(--on-surface-variant); }

/* Changelog: one surface, one divided row per version */
.project-changelog-version { font-family: var(--font-display); font-size: var(--text-title); font-weight: 700; line-height: 1.2; color: var(--on-surface); }
.project-changelog-date { margin-left: auto; font-size: var(--text-label-lg); font-weight: 400; white-space: nowrap; color: var(--on-surface-variant); }
.project-changelog-body { margin-top: var(--space-2); font-size: var(--text-body); line-height: 1.65; color: var(--on-surface-variant); white-space: pre-wrap; overflow-wrap: anywhere; }
.project-changelog-more { margin-top: var(--space-3); }

/* Sidebar: the flat creator row (no box inside the card) */
.project-creator { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.project-creator-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.project-creator-name { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 600; color: var(--on-surface); overflow-wrap: anywhere; }
.project-creator-sub { font-size: var(--text-label-lg); color: var(--on-surface-variant); }
.project-creator-chevron { margin-left: auto; color: var(--on-surface-variant); transition: transform var(--duration-short) var(--easing-standard); }
.project-creator:hover .project-creator-name { color: var(--primary); }
.project-creator:hover .project-creator-chevron { transform: translateX(2px); }

/* Mobile and tablet sticky download bar: only while no other download button is on screen.
   It sits under the navbar (100), the modals (500, 600) and the cookie banner (8400),
   and the page script hides it while the cookie banner is open. */
.project-sticky-dl { display: none; }
@media (max-width: 1024px) {
  .project-sticky-dl { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--surface-container-high); border-top: 1px solid var(--outline-variant); box-shadow: 0 -8px 24px color-mix(in srgb, var(--scrim) 30%, transparent); transform: translateY(110%); transition: transform var(--duration-short) var(--easing-standard); }
  .project-sticky-dl.is-visible { transform: translateY(0); }
  body.project-sticky-active { padding-bottom: 76px; }
}
.project-sticky-dl-inner { display: flex; align-items: center; gap: var(--space-3); max-width: 1280px; margin: 0 auto; }
.project-sticky-dl-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.project-sticky-dl-name { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 600; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-sticky-dl-meta { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-label-lg); color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; }
.project-sticky-dl .btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .project-trust-strip { flex-direction: column; gap: var(--space-2); }
  .project-platform-note .notice-actions .btn { flex: 1 1 auto; justify-content: center; }
  .project-section-title { margin-top: var(--space-8); }
  .project-panel { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
  .project-panel--rows { padding-top: var(--space-1); padding-bottom: var(--space-1); }
  .project-changelog-date { margin-left: 0; width: 100%; }

  /* Compatibility table: stacked rows inside one contained surface, each value labelled */
  .project-compat-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .project-compat-table,
  .project-compat-table tbody,
  .project-compat-table tr,
  .project-compat-table th,
  .project-compat-table td { display: block; width: 100%; }
  .project-compat-table tbody tr { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--outline-variant); }
  .project-compat-table tbody tr:first-child { border-top: 0; }
  .project-compat-table tbody tr:hover { background: transparent; }
  .project-compat-wrap .project-compat-table th[scope="row"] { padding: 0 0 var(--space-2); border: 0; white-space: normal; }
  .project-compat-table td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-1) 0; border: 0; text-align: right; }
  .project-compat-table td::before { content: attr(data-label); flex-shrink: 0; text-align: left; font-family: var(--font-sans); font-weight: 500; color: var(--on-surface-variant); }
}

/* Small phones: Download keeps the full width; heart, share and report become one row of 48px
   icon buttons (labels stay for screen readers). Overrides the stacked full-width rule in pack-view.css. */
@media (max-width: 480px) {
  .pack-hero .pack-actions { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
  .pack-hero .pack-actions .btn { flex: 1 1 100%; justify-content: center; }
  .pack-hero .pack-actions .heart-btn,
  .pack-hero .pack-actions .share-btn { flex: 0 0 auto; width: auto; min-width: 48px; height: 48px; padding: 0 var(--space-4); justify-content: center; }
  .pack-hero .pack-actions .share-btn { position: relative; width: 48px; padding: 0; }
  .pack-hero .pack-actions .share-btn > span:not(.icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .project-sticky-dl,
  .project-creator-chevron { transition: none; }
  .project-creator:hover .project-creator-chevron { transform: none; }
}