/* Free audit entry points shared by every page: the nav button and its live card, the footer button and count,
   and the sixth line in the home page's "The gap" list. Live numbers come from /api/audit-stats (js/verdikt-live.js). */

/* The block glyph: six squares in the audit's grade colours, a tiny piece of the wall */
.audit-glyph { display: inline-grid; grid-template-columns: repeat(3, .28em); grid-auto-rows: .28em; gap: .1em; flex-shrink: 0; }
.audit-glyph i { display: block; background-color: rgba(255, 255, 255, .85); }
.audit-glyph i:nth-child(1), .audit-glyph i:nth-child(5) { background-color: #ff4da0; }
.audit-glyph i:nth-child(3), .audit-glyph i:nth-child(4) { background-color: rgba(255, 255, 255, .35); }
.audit-glyph.is-dark i { background-color: rgba(10, 10, 10, .75); }
.audit-glyph.is-dark i:nth-child(1), .audit-glyph.is-dark i:nth-child(5) { background-color: #ad0052; }
.audit-glyph.is-dark i:nth-child(3), .audit-glyph.is-dark i:nth-child(4) { background-color: rgba(10, 10, 10, .22); }

/* Nav: an outline button where "Available for work" used to be, with a card on hover or focus */
.audit-nav { position: relative; }
.audit-nav_btn { display: flex; align-items: center; column-gap: .7vw; padding: .8vw 1.1vw; color: inherit; text-decoration: none; font-family: var(--font-body); border: 1px solid color-mix(in srgb, currentColor 40%, transparent); transition: background-color .25s ease, border-color .25s ease; }
.audit-nav_btn:hover, .audit-nav:focus-within .audit-nav_btn { background-color: color-mix(in srgb, currentColor 10%, transparent); border-color: color-mix(in srgb, currentColor 75%, transparent); }
.audit-nav_btn:focus-visible { outline: 2px solid #ff4da0; outline-offset: 3px; }
.audit-nav_btn.is-simple { padding: .55vw .8vw; }
.audit-nav_card { position: absolute; right: 0; top: 100%; z-index: 20; width: 22vw; padding-top: .7vw; opacity: 0; visibility: hidden; transform: translateY(-.4vw); transition: opacity .2s ease, transform .25s ease, visibility 0s .25s; }
.audit-nav:hover .audit-nav_card, .audit-nav:focus-within .audit-nav_card { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s ease; }
.audit-nav_inner { display: flex; flex-direction: column; gap: .85vw; padding: 1.05vw 1.1vw 1.15vw; background-color: #15000b; color: #fff; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 1vw 2.6vw rgba(0, 0, 0, .35); text-align: left; }
.audit-nav_row { display: flex; justify-content: space-between; margin: 0; font-size: .6vw; color: #ffd0e4; }
.audit-nav_row span + span { color: #a68b98; }
.audit-nav_count { display: flex; align-items: baseline; gap: .55vw; margin: 0; }
.audit-nav_count b { font-weight: 400; font-size: 2.7vw; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.audit-nav_count span { font-size: .6vw; color: #ff4da0; }
.audit-nav_pitch { margin: 0; font-size: .9vw; line-height: 1.45; color: #e9d6df; }
.audit-nav_go { display: flex; justify-content: space-between; align-items: center; padding-top: .8vw; border-top: 1px solid rgba(255, 255, 255, .1); color: #fff; text-decoration: none; font-size: .85vw; transition: color .25s ease; }
.audit-nav_go:hover, .audit-nav_go:focus-visible { color: #ff4da0; }
.audit-nav_go span:last-child { color: #ff4da0; transition: transform .25s ease; }
.audit-nav_go:hover span:last-child { transform: translate(.15vw, -.15vw); }
html:not(.has-audit-live) [data-live-only], html.has-audit-live [data-live-off] { display: none !important; }

/* Walls: one block per site audited, coloured by grade. Dark version in the nav card, light version in the footer */
.audit-wall { display: grid; gap: 2px; }
.audit-wall i { aspect-ratio: 1; box-sizing: border-box; border: 1px dashed rgba(255, 255, 255, .2); }
.audit-wall i.is-poor { border: 0; background-color: rgba(255, 77, 160, .8); }
.audit-wall i.is-needs-work { border: 0; background-color: rgba(255, 255, 255, .28); }
.audit-wall i.is-good { border: 0; background-color: rgba(255, 255, 255, .85); }
.audit-wall i.is-new { background-color: #ff4da0; outline: 1px solid #fff; outline-offset: 1px; }
.audit-nav_wall { grid-template-columns: repeat(36, 1fr); }
/* Footer wall: as wide as the button above it; the script fills exactly two rows of however many columns fit */
.footer_live-wall { grid-template-columns: repeat(auto-fill, minmax(.36vw, 1fr)); gap: .12vw; }
.footer_live-wall i { border-color: rgba(10, 10, 10, .15); }
.footer_live-wall i.is-poor { background-color: #ad0052; }
.footer_live-wall i.is-needs-work { background-color: rgba(10, 10, 10, .18); }
.footer_live-wall i.is-good { background-color: rgba(10, 10, 10, .72); }
.footer_live-wall i.is-new { background-color: #ff4da0; outline-color: #ad0052; }

/* Footer: the studio button and a quieter outline button side by side.
   Hovering (or focusing) the outline button shows the wall just under it, set a little apart, with the count */
.footer_buttons { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .8vw; }
.btn_component.is-outline { background-color: transparent; color: #0a0a0a; border: 1px solid rgba(10, 10, 10, .3); transition: border-color .25s ease, background-color .25s ease; }
.btn_component.is-outline:hover { border-color: #0a0a0a; background-color: rgba(10, 10, 10, .04); }
.btn_component.is-outline .audit-glyph { margin-right: -.2vw; }
.footer_audit { position: relative; }
.footer_live { position: absolute; left: 0; right: 0; top: calc(100% + .9vw); display: flex; flex-direction: column; gap: .55vw; opacity: 0; visibility: hidden; transform: translateY(-.35vw); transition: opacity .25s ease, transform .3s ease, visibility 0s .3s; pointer-events: none; }
.footer_live[hidden] { display: none; }
.footer_audit:hover .footer_live, .footer_audit:focus-within .footer_live { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s ease; }
.footer_live-text { margin: 0; font-size: .7vw; color: rgba(10, 10, 10, .6); }

/* Nav backdrop: once the page has scrolled, the nav sits on a soft tint that blurs what's behind it and fades out downwards.
   The tint follows the nav's ink: dark behind light text, light behind dark text (set by verdikt-live.js as --nav-tint). */
.nav_fixed::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: linear-gradient(to bottom, var(--nav-tint, rgba(21, 0, 11, .72)) 0%, var(--nav-tint, rgba(21, 0, 11, .72)) 45%, transparent 100%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%); }
.nav_fixed.has-backdrop::before { opacity: 1; }
.nav_fixed.is-hidden::before { opacity: 0; }

/* Home, "The gap": a sixth line that hands the reader a way to check their own site */
.gap_item.is-audit { color: inherit; text-decoration: none; cursor: pointer; }
.gap_item.is-audit .gap_num { background-color: transparent; color: #ff4da0; box-shadow: inset 0 0 0 1px #ad0052; }
.gap_item.is-audit .gap_text { color: #fff; }
.gap_item.is-audit .gap_text span { color: #ff4da0; text-decoration: underline; text-decoration-color: rgba(255, 77, 160, .45); text-underline-offset: .2em; transition: text-decoration-color .25s ease; }
.gap_item.is-audit:hover .gap_text span { text-decoration-color: #ff4da0; }
.gap_item.is-audit .gap_mark { color: #ff4da0; transition: transform .25s ease; }
.gap_item.is-audit:hover .gap_mark { transform: translate(.15vw, -.15vw); }
.gap_item.is-audit:focus-visible { outline: 2px solid #ff4da0; outline-offset: 4px; }

/* Mobile menu: the audit link sits where the status line was */
.mobile-menu_audit { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 14px; }

@media screen and (max-width: 991px) {
  .audit-nav_btn.is-simple { padding: 8px 12px; column-gap: 8px; font-size: 14px; }
  .footer_buttons { gap: 10px; }
  /* Phones have no hover, so the footer wall doesn't show there */
  .footer_live { display: none !important; }
  /* The mobile nav already paints its own solid background when scrolled */
  .nav_fixed::before { display: none; }
  .gap_item.is-audit .gap_mark { width: 4.5vw; height: 4.5vw; }
}
@media (prefers-reduced-motion: reduce) {
  .audit-nav_card, .audit-nav_go span:last-child, .gap_item.is-audit .gap_mark, .footer_live, .nav_fixed::before { transition: none; }
}