/* MRMCK. Library (prototype). Loaded after style.css and doesn't override it except where noted.
   Mobile-first. Desktop uses the same u(n) scale and 821px breakpoint as style.css.
   Contrast (all WCAG AA or better): black #0B0B0B on paper #F4F4F1 17.9:1, grey #4A4A4A on paper 8.0:1,
   paper on black 17.9:1, black on orange #FF4D00 5.9:1. Orange is never used for small text on paper. */

/* Vault-only copy of the shop-build palette change: live css/style.css still has --black: #000000.
   This file is only loaded by /library/ pages, so the override never reaches the rest of the site. */
:root { --concrete: #D0D0D0; --black: #0B0B0B; }

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--black);
  color: var(--paper);
  font-weight: 700;
}
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--paper);
}
main:focus { outline: none; }
[hidden] { display: none !important; }

/* ---------- Example-data banner ---------- */
.lib-banner {
  margin: 0;
  padding: 12px 20px;
  background: var(--black);
  color: var(--paper);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.02em;
}
.lib-banner strong { color: var(--orange); font-weight: 700; } /* orange on black: 5.9:1 (bold 14px) */

/* ---------- Hero ---------- */
.lib-hero { padding: 40px 20px 32px; border-bottom: 2px solid var(--black); }
.lib-hero__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 17vw;
  line-height: 0.93;
  letter-spacing: -0.019em;
  margin-top: 18px;
}
.lib-hero__body { font-size: 17px; line-height: 1.5; margin-top: 24px; max-width: 40em; }
.lib-link { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Section headings ---------- */
.lib-featured, .lib-browse { padding: 40px 20px 0; }
.lib-browse { padding-bottom: 64px; }
.lib-h2 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.01em;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--black);
  margin-bottom: 24px;
}

/* ---------- Filters ---------- */
.lib-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  margin-bottom: 32px;
}
/* .lib-field, its label/input/select and .lib-btn now live in css/signup.css (shared with The Stack). */
.lib-field--search { grid-column: 1 / -1; }
.lib-field--sort, .lib-field--wide { grid-column: 1 / -1; }
.lib-filters__bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}
.lib-count { font-size: 15px; font-weight: 500; }


/* ---------- States ---------- */
.lib-state { padding: 8px 0 40px; }
.lib-state:empty { display: none; }
.lib-state__text { font-size: 17px; line-height: 1.5; max-width: 36em; }
.lib-state__title { font-family: "Anton", sans-serif; font-size: 28px; line-height: 1.05; margin-bottom: 10px; }
.lib-state .lib-btn { margin-top: 18px; }

/* ---------- Grid + cards ---------- */
.lib-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 24px;
}
.lib-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.lib-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--black);
}
.lib-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; /* hqdefault is 4:3 with letterbox bars; cover crops them off */
}
/* On-brand fallback, sitting under the image. Shown for sample rows and whenever the thumbnail fails. */
.lib-thumb__fallback {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 16px 14px;
  background: var(--black);
  color: var(--paper);
}
.lib-thumb__co {
  font-family: "Anton", sans-serif;
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  max-width: 72%; /* clear of the duration chip, bottom right */
}
.lib-thumb__mark { position: absolute; right: 14px; top: 10px; font-family: "Anton", sans-serif; font-size: 16px; color: var(--orange); }
.lib-thumb__dur {
  position: absolute; right: 8px; bottom: 8px;
  padding: 3px 7px;
  background: var(--black);
  color: var(--paper);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.lib-thumb__play {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: var(--orange);
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity .15s;
}
.lib-thumb__play::before {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--black);
}
.lib-card:hover .lib-thumb__play, .lib-card:focus-within .lib-thumb__play { opacity: 1; }
.lib-badge {
  position: absolute; left: 8px; top: 8px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  background: var(--orange);
  color: var(--black);
}
.lib-badge--under { background: var(--paper); color: var(--black); }

.lib-card__body { display: flex; flex-direction: column; flex: 1; padding-top: 12px; }
.lib-card__meta {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--grey);
}
.lib-card__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
/* The title button is the card's one control; its ::after stretches over the whole card so
   the thumbnail is clickable too. The teardown link sits above it. */
.lib-card__play {
  all: unset;
  cursor: pointer;
  text-align: left;
}
.lib-card__play::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lib-card__play:focus-visible { outline: none; box-shadow: none; text-decoration: underline; text-decoration-thickness: 2px; }
.lib-card:has(.lib-card__play:focus-visible) {
  outline: 3px solid var(--black);
  outline-offset: 4px;
}
.lib-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.lib-card__tags {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--grey);
}
.lib-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  margin-top: auto;
  padding-top: 12px;
}
.lib-card__stats + .lib-card__foot { margin-top: 12px; border-top: 1px solid var(--concrete); }
.lib-audit { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--grey); text-transform: uppercase; }
.lib-teardown {
  position: relative; z-index: 2;
  display: inline-flex; gap: 8px; align-items: center;
  min-height: 32px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.lib-teardown:hover { text-decoration-color: var(--orange); }

/* Featured: same card, a heavier frame */
.lib-grid--featured .lib-card { border-top: 6px solid var(--orange); padding-top: 12px; }

/* ---------- Method line ---------- */
.lib-method {
  margin-top: 56px;
  padding-top: 14px;
  border-top: 2px solid var(--black);
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey);
}

/* ---------- Player dialog ---------- */
html.lib-noscroll { overflow: hidden; }
.lib-player {
  width: min(960px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  background: var(--black);
  color: var(--paper);
  overflow: auto;
}
.lib-player::backdrop { background: rgba(11, 11, 11, 0.85); }
.lib-player__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 14px 12px 18px;
}
.lib-player__title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.lib-player__close {
  flex: none;
  width: 44px; height: 44px;
  border: 2px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-size: 18px;
  cursor: pointer;
}
.lib-player__close:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }
.lib-player :focus-visible { outline-color: var(--orange); box-shadow: 0 0 0 3px var(--black); }
.lib-player__frame { position: relative; aspect-ratio: 16 / 9; background: var(--black); }
.lib-player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lib-player__sample {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 20px 24px;
  background: var(--orange);
  color: var(--black);
}
.lib-player__sample strong { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(28px, 7vw, 64px); line-height: 0.95; }
.lib-player__sample span { margin-top: 12px; font-size: 15px; line-height: 1.45; max-width: 30em; }
.lib-player__meta, .lib-player__links { padding: 0 18px; font-size: 14px; line-height: 1.5; }
.lib-player__meta { padding-top: 14px; color: var(--concrete); }
.lib-player__tags { padding-top: 2px; font-size: 13px; } /* #D0D0D0 on #0B0B0B: 12.8:1 */
.lib-player__links { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 6px; padding-bottom: 18px; }
.lib-player__links:empty { padding-bottom: 8px; }
.lib-player__links a { text-decoration: underline; text-underline-offset: 0.2em; font-weight: 600; }


@media (prefers-reduced-motion: reduce) {
  .lib-btn, .lib-thumb__play { transition: none; }
}

/* ---------- Two columns ---------- */
@media (min-width: 600px) {
  .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lib-field--sort, .lib-field--wide { grid-column: auto; }
  .lib-banner { padding-inline: 20px; }
}

/* ---------- Desktop ---------- */
@media (min-width: 821px) {
  .lib-banner { padding: 12px var(--margin); font-size: 15px; }
  .lib-hero {
    margin-left: var(--margin);
    padding: calc(var(--u) * 26) var(--margin) calc(var(--u) * 64) 0;
  }
  .lib-hero__title {
    font-size: calc(var(--u) * 131);
    line-height: calc(var(--u) * 121);
    margin-top: calc(var(--u) * 33);
    margin-left: calc(var(--u) * 3);
  }
  .lib-hero__body {
    font-size: calc(var(--u) * 20.4);
    line-height: calc(var(--u) * 29);
    margin-top: calc(var(--u) * 40);
    margin-left: calc(var(--u) * 3);
    max-width: 52em;
  }
  .lib-featured, .lib-browse { padding: calc(var(--u) * 64) var(--margin) 0; }
  .lib-browse { padding-bottom: calc(var(--u) * 110); }
  .lib-h2 { font-size: max(28px, calc(var(--u) * 40)); margin-bottom: calc(var(--u) * 32); }
  .lib-filters { gap: 16px calc(var(--u) * 24); }
  .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 56) calc(var(--u) * 36); }
  .lib-card__title { font-size: max(20px, calc(var(--u) * 24)); }
  .lib-player__title { font-size: 26px; }
}
@media (min-width: 1024px) {
  .lib-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lib-field--search { grid-column: span 2; }
}

/* ---------- Measures, paging, "How we measure" (live-data build) ---------- */
.lib-linkbtn {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 2px;
}
.lib-linkbtn:hover { text-decoration-color: var(--orange); }
.lib-hero__how { margin-top: 14px; font-size: 15px; }
.lib-card__measures { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lib-pill {
  display: inline-block; padding: 3px 7px; border: 1px solid var(--black); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; color: var(--black); background: transparent;
}
.lib-pill[title] { cursor: help; }
.lib-pill--paid { background: var(--black); color: var(--paper); } /* 17.9:1 */
.lib-more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 28px 0 8px; }
.lib-more__count { font-size: 14px; color: var(--grey); }
.lib-howto { width: min(640px, calc(100vw - 24px)); }
.lib-howto__body { padding: 4px 18px 22px; color: var(--paper); font-size: 15px; line-height: 1.5; }
.lib-howto__list > div { margin-top: 14px; }
.lib-howto__list dt { font-family: "Anton", sans-serif; font-weight: 400; font-size: 20px; letter-spacing: 0.02em; color: var(--paper); }
.lib-howto__list dd { margin: 2px 0 0; color: var(--concrete); }
.lib-howto__note { margin-top: 18px; padding-top: 14px; border-top: 1px solid #4A4A4A; font-size: 14px; color: var(--concrete); }

/* Quiet "Book a call" line at the end of the Vault. Styled here too (not only in style.css) so it still looks
   right when the Vault is uploaded on its own next to the older live style.css. */
.lib-callline { margin-top: 28px; font-size: 15px; line-height: 1.45; color: var(--grey); }
.lib-callline a { color: var(--black); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (min-width: 821px) { .lib-callline { margin-top: calc(var(--u) * 32); font-size: max(15px, calc(var(--u) * 17)); } }

/* ---------- "Show low-confidence" toggle (one click, sits with the Paid filter) ---------- */
.lib-toggle__head { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey); }
.lib-field .lib-toggle {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px;
  border: 2px solid var(--black); background: var(--paper); color: var(--black);
  font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer;
}
.lib-field .lib-toggle input { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--black); cursor: pointer; }
.lib-field .lib-toggle:has(input:checked) { background: var(--black); color: var(--paper); }
.lib-field .lib-toggle:has(input:checked) input { accent-color: var(--orange); }
.lib-field .lib-toggle:has(input:disabled) { cursor: default; opacity: 0.85; }
.lib-field .lib-toggle:has(input:focus-visible) { outline: 3px solid var(--black); outline-offset: 2px; }
.lib-toggle__note { font-size: 13px; color: var(--grey); margin: 0; }