/* ===================================================================
   B-roll library — the only page that needs a dense grid of shots.
   Everything structural (colours, type, pills, cards, footer) comes
   from shared.css; this adds the filter bar, the grid and the sheet.
=================================================================== */

/* The library is the point of the page, so the opening band is trimmed until the filter bar
   and the first row of shots are in the first screen. Only this page's hero is affected. */
.lib-hero{ padding-bottom:76px; }   /* room for the bar to sit into — see .lib-bar */
.lib-hero .hero-inner{ padding-top:18px; }
.lib-hero .eyebrow{ margin-bottom:10px; font-size:12px; }
.lib-hero h1{ font-size:clamp(28px, 3.1vw, 40px); max-width:900px; }
.lib-hero .lede{ font-size:15px; margin-top:9px; max-width:78ch; }
.lib-hero .stat-row.on-hero{ margin-top:16px; gap:24px; }
.lib-hero .stat b{ font-size:18px; }
.lib-hero .stat span{ font-size:11.5px; }
@media (max-width:760px){
  .lib-hero{ padding-bottom:64px; }
  .lib-hero .hero-inner{ padding-top:16px; }
  .lib-hero h1{ font-size:clamp(26px, 7vw, 34px); }
  .lib-hero .lede{ font-size:15px; }
  .lib-hero .stat-row.on-hero{ gap:18px 22px; margin-top:18px; }
}

/* The bar scrolls away with the page rather than following it down: pinned, it ate a sixth of
   the screen on every scroll and sat over the shots it is meant to help you look at.

   It does sit into the hero, though. Parked below it, a white card on a white page read as a
   second, unrelated band; lifted a third of its height onto the colour, it reads as the handle
   on the panel above it, and the shadow finally has something to fall on. The hero's own
   padding-bottom is what keeps the figures clear of it. */
.lib-bar{
  position:relative; z-index:2;
  background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-m);
  box-shadow:0 18px 40px -22px rgba(11,11,12,.35); padding:10px; margin-top:-60px;
}
@media (max-width:760px){ .lib-bar{ margin-top:-52px; } }
.lib-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.lib-search{ flex:1 1 320px; position:relative; display:flex; align-items:center; }
.lib-search svg{ position:absolute; left:14px; width:16px; height:16px; opacity:.45; pointer-events:none; }
.lib-bar input[type=search]{
  width:100%; font:inherit; font-size:15px; font-weight:500; color:var(--ink);
  padding:12px 14px 12px 40px; border:1.5px solid var(--line); border-radius:999px;
  background:#fff; -webkit-appearance:none; appearance:none;
}
.lib-bar input[type=search]:focus{ outline:none; border-color:var(--pink); }
.lib-bar select{
  font:inherit; font-size:14px; font-weight:600; color:var(--ink);
  padding:11px 34px 11px 14px; border:1.5px solid var(--line); border-radius:999px;
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M.5.5 4.5 4.5 8.5.5' fill='none' stroke='%230B0B0C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  -webkit-appearance:none; appearance:none; cursor:pointer; max-width:100%;
}
.lib-bar select:focus{ outline:none; border-color:var(--pink); }
.lib-toggle{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  color:var(--ink-dim); cursor:pointer; padding:0 4px;
}
.lib-toggle input{ width:16px; height:16px; accent-color:var(--pink); cursor:pointer; }
.lib-meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  flex-wrap:wrap; margin:14px 0 14px;
}
.lib-count{ font-size:14px; font-weight:600; color:var(--ink-dim); }
.lib-count b{ color:var(--ink); font-weight:800; }
.lib-clear{
  font-size:13.5px; font-weight:700; color:var(--pink); background:none; border:none;
  padding:0; cursor:pointer;
}

/* ---------- the grid ---------- */
.lib-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(258px, 1fr));
}
.shot{
  border:1px solid var(--line); border-radius:var(--radius-m); background:#fff;
  overflow:hidden; display:flex; flex-direction:column; text-align:left;
  font:inherit; color:inherit; padding:0; cursor:pointer;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.shot:hover, .shot:focus-visible{
  border-color:var(--pink); box-shadow:0 22px 46px -30px rgba(245,47,134,.45);
  transform:translateY(-2px); outline:none;
}
.shot .frame{
  position:relative; aspect-ratio:16/9; background:var(--paper-2); overflow:hidden;
}
.shot .frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.shot .frame.none{
  display:flex; align-items:center; justify-content:center; padding:16px;
  background:linear-gradient(135deg, var(--cream) 0%, var(--cream-2) 100%);
  font-size:12.5px; font-weight:700; color:var(--ink); text-align:center; line-height:1.3;
}
.shot .kind{
  position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:5px;
  background:rgba(11,11,12,.76); color:#fff; font-size:11.5px; font-weight:700;
  padding:4px 9px; border-radius:999px; backdrop-filter:blur(4px);
}
.shot .secs{
  position:absolute; right:10px; bottom:10px; background:rgba(11,11,12,.76); color:#fff;
  font-size:11.5px; font-weight:700; padding:4px 8px; border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.shot .body{ padding:11px 14px 13px; display:flex; flex-direction:column; gap:6px; flex:1; }
.shot .seen{
  font-size:13.5px; font-weight:600; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.shot .pack{ font-size:12px; font-weight:700; color:var(--pink); }
.tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:auto; padding-top:4px; }
.tags span{
  font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-faint); white-space:nowrap;
}
.tags span.flag{ border-color:transparent; background:#FFF3E0; color:#9A6A12; }
.tags span.stop{ border-color:transparent; background:#FDE7E2; color:#B0412E; }
.shot.muted{ opacity:.55; }

.lib-empty{
  grid-column:1/-1; text-align:center; padding:70px 20px; color:var(--ink-dim);
  border:1px dashed var(--line); border-radius:var(--radius-m);
}
.lib-empty b{ display:block; font-size:19px; color:var(--ink); margin-bottom:8px; }
.lib-more{ display:flex; justify-content:center; margin:34px 0 0; }
.lib-loading{ grid-column:1/-1; padding:60px 20px; text-align:center; color:var(--ink-dim); font-weight:600; }

/* ---------- the sheet one shot opens in ---------- */
.sheet{
  border:none; padding:0; width:min(960px, calc(100vw - 32px)); max-width:none;
  border-radius:var(--radius-l); box-shadow:var(--shadow-card); background:#fff;
  color:var(--ink); overflow:hidden;
}
.sheet::backdrop{ background:rgba(11,11,12,.55); backdrop-filter:blur(3px); }
.sheet-grid{ display:grid; grid-template-columns:1.25fr 1fr; }
.sheet-media{
  background:var(--dark); display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/9; position:relative;
}
.sheet-media img, .sheet-media video{ width:100%; height:100%; object-fit:contain; display:block; }
.sheet-media .locked{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; background:rgba(11,11,12,.55); color:#fff;
  font-size:13.5px; font-weight:600; text-align:center; padding:24px;
}
.sheet-body{ padding:26px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; max-height:70vh; }
.sheet-body h3{ font-size:20px; font-weight:800; letter-spacing:-.01em; line-height:1.2; }
.sheet-body .pack{ font-size:12.5px; font-weight:700; color:var(--pink); }
.facts{ display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:13.5px; margin-top:2px; }
.facts dt{ color:var(--ink-faint); font-weight:600; }
.facts dd{ margin:0; font-weight:600; }
.facts dd.mono{ font-family:var(--font-mono); font-size:12.5px; word-break:break-all; font-weight:500; }
.sheet-act{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.sheet-note{ font-size:12.5px; color:var(--ink-faint); line-height:1.5; }
.sheet-close{
  position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%;
  border:none; background:rgba(255,255,255,.92); color:var(--ink); font-size:17px; cursor:pointer;
  box-shadow:var(--shadow-soft); line-height:1;
}
@media (max-width:760px){
  .sheet-grid{ grid-template-columns:1fr; }
  .sheet-body{ max-height:none; }
}

/* ---------- the free-account panel ---------- */
.gate{ display:none; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:14px; }
.gate.on{ display:flex; }
.gate label{ font-size:12.5px; font-weight:700; color:var(--ink-dim); }
.gate input{
  font:inherit; font-size:15px; padding:11px 14px; border:1.5px solid var(--line);
  border-radius:var(--radius-s); background:#fff; color:var(--ink); width:100%;
}
.gate input:focus{ outline:none; border-color:var(--pink); }
.gate .msg{ font-size:13px; font-weight:600; }
.gate .msg.bad{ color:#B0412E; }
.gate .msg.good{ color:var(--good); }
.who{ font-size:13px; font-weight:600; color:var(--ink-dim); }
.who b{ color:var(--ink); }