/* App-level additions that the static prototype did not need. tokens.css and
   components.css stay verbatim copies of design/assets. */

/* Owner avatars: the image covers the initials, which remain the fallback. */
.avatar { position: relative; overflow: hidden; }
.avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* htmx request indicators reuse the design's loading button state. */
.htmx-request.btn, .htmx-request .btn[type="submit"] { pointer-events: none; opacity: .7; }
[aria-busy="true"] { cursor: progress; }

/* EthicalAds text unit inside the design's sponsor shell. */
.sponsor .sponsor__text [data-ea-publisher], .sponsor [data-ea-publisher] { display: block; }

/* Server-rendered README: images never overflow the panel. */
.readme__body img { max-width: 100%; height: auto; }

/* Legal and confirmation pages. */
.doc-page { padding-block: var(--sp-8) var(--sp-16); }
.doc-page .prose { margin-top: var(--sp-6); max-width: 72ch; }

/* Explore trending strip: anchor the tiles' .sr-only text inside the scrolling
   strip; otherwise it is positioned against the page and widens it below 390px
   (the prototype has the same overflow). */
.trend-tile { position: relative; }

/* Repo page: the discreet "Report this repo" link and its form page. */
.side-report { margin: 0; font-size: var(--fs-12); text-align: right; }
.side-report a { color: var(--muted); }
.side-report a:hover { color: var(--text); }
.report-form { margin-top: var(--sp-6); max-width: 36rem; display: grid; gap: var(--sp-4); }
.report-form .textarea { width: 100%; }
.report-form__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Repository health (scoring.HealthLevel): a dot on repo cards whose label shows
   on hover or tap (focus), a badge and the "Health signals" panel on repo pages,
   and the topic list's health filter. Colours are the design's status tokens. */
:is(.health-dot, .health-badge).is-healthy { --health: var(--rise); }
:is(.health-dot, .health-badge).is-mixed { --health: var(--warning); }
:is(.health-dot, .health-badge).is-low { --health: var(--faint); }
:is(.health-dot, .health-badge).is-new { --health: var(--info); }
:is(.health-dot, .health-badge).is-archived { --health: var(--danger); }
.health-dot { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 4px; border-radius: var(--r-chip); color: var(--muted); font-size: var(--fs-12); font-weight: var(--fw-medium); white-space: nowrap; cursor: default; }
.health-dot__mark { width: 8px; height: 8px; border-radius: 50%; background: var(--health, var(--faint)); flex: none; }
.health-dot__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.health-dot:focus { outline: none; }
.health-dot:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.health-dot:focus .health-dot__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
@media (hover: hover) {
  .health-dot:hover .health-dot__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .health-panel__disclaimer a:hover, .list-filters__how:hover { color: var(--text); }
}
.health-badge { color: var(--text); background: var(--raised); }
.health-panel .panel__head { justify-content: flex-start; }
.health-panel__checked { margin-left: auto; }
.health-panel__note { margin: 0 0 var(--sp-3); font-size: var(--fs-13); color: var(--muted); }
.health-facts { display: grid; margin: 0; }
.health-facts > div { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: 2px var(--sp-4); padding: var(--sp-2) 0; border-top: 1px solid var(--border); font-size: var(--fs-13); }
.health-facts > div:first-child { border-top: 0; padding-top: 0; }
.health-facts dt { color: var(--muted); }
.health-facts dd { margin: 0; display: grid; gap: 2px; min-width: 0; }
.health-facts__value { color: var(--text); }
a.health-facts__value { text-decoration: underline; text-underline-offset: 3px; }
.health-facts__detail { color: var(--muted); font-size: var(--fs-12); }
.health-panel__disclaimer { margin: var(--sp-4) 0 0; font-size: var(--fs-12); color: var(--muted); }
.health-panel__disclaimer a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.list-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.list-filters .tb-field { display: inline-flex; align-items: center; gap: var(--sp-2); }
.list-filters .tb-label { font-size: var(--fs-13); color: var(--muted); }
.list-filters .select { height: 34px; width: auto; min-width: 150px; font-size: var(--fs-13); }
.list-filters__how { margin-left: auto; font-size: var(--fs-12); color: var(--muted); }
@media (max-width: 767px) {
  .health-facts > div { grid-template-columns: minmax(0, 1fr); }
  .list-filters .tb-field { flex: 1 1 100%; }
  .list-filters .tb-label { min-width: 2.5rem; }
  .list-filters .select { flex: 1 1 auto; }
  .list-filters__how { margin-left: 0; }
}

/* Landing preview: topic tabs (one active, the design's chips), "All topics" link
   and the visitor subtitle in the title row. */
.preview__sub { color: var(--muted); font-weight: var(--fw-regular); font-size: var(--fs-13); }
.preview__tabs { display: flex; gap: var(--od-gap, 8px); }
.preview__all { color: var(--muted); text-decoration: none; gap: 4px; }
/* The tab row scrolls sideways: a fade on each overflowing edge, arrow buttons
   for mice without horizontal scrolling; the row's rule moves to the wrapper so
   the fade does not eat it. */
.preview__rail { position: relative; border-bottom: 1px solid var(--border); }
.preview__rail .preview__chips { border-bottom: 0; }
.preview__chips.is-fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); }
.preview__chips.is-fade-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 72px), transparent); }
.preview__chips.is-fade-start.is-fade-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.preview__scroll { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; box-shadow: var(--shadow-pop); }
.preview__scroll--prev { left: var(--sp-2); }
.preview__scroll--next { right: var(--sp-2); }
@media (hover: none) { .preview__scroll { display: none; } }
.preview__caption a { display: inline-flex; align-items: center; gap: 4px; }

/* Section separators span the content column, not the viewport: the design's
   full-bleed border-top on landing blocks and the footer read as stray lines
   crossing the page (and the footer's legal rule overhung the text). */
section.block, footer.site-footer, div.site-footer__legal { border-top: 0; position: relative; }
section.block::before, footer.site-footer::before, div.site-footer__legal::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(min(100%, var(--container)) - 2 * var(--sp-6)); border-top: 1px solid var(--border); pointer-events: none;
}
@media (max-width: 767.98px) {
  section.block::before, footer.site-footer::before, div.site-footer__legal::before { width: calc(min(100%, var(--container)) - 2 * var(--sp-4)); }
}

/* Sticky headers share the page background, so their bottom rule read as a
   stray line crossing the page over the content scrolled under them. The rule
   is gone; once the page scrolls (app.js adds .is-scrolled) the bar lifts with a
   translucent blurred background and a soft shadow instead. */
.site-header, .topbar { border-bottom-color: transparent; transition: box-shadow var(--dur-fast) var(--ease-out); }
.site-header.is-scrolled, .topbar.is-scrolled {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 10px 24px -14px rgb(0 0 0 / 0.55);
}