/* Native shelf styling, kept separate from the editorial marketing page. */
.shelf {
  --left-inset: 32px;
  --base: #181818;
  --surface: #242424;
  --text: #f5f5f5;
  --secondary: #b3b3b3;
  --metadata: #a0a0a0;
  --border: #404040;
  --accent: var(--text);
  border-radius: 0;
  font-family: var(--sans);
}
.shelf.light {
  --base: #f0f0f0;
  --surface: #fff;
  --text: #181818;
  --secondary: #606060;
  --metadata: #737373;
  --border: #dcdcdc;
  --accent: var(--text);
}
.shelf .shelf-header { border-bottom: 1px solid var(--border); padding: 14px 20px; font-family: var(--sans); }
.shelf .shelf-brand { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.shelf .shelf-subtitle, .shelf .local-active { display: none; }
.shelf .search { border-radius: 8px; padding: 9px 10px; }
.shelf .search input { width: 200px; font: 11px var(--sans); }
.shelf .shelf-tabs { margin-top: 8px; margin-bottom: 16px; }
.shelf .shelf-tabs > div { gap: 4px; }
.shelf .tab { border: 0; border-radius: 0; padding: 10px 12px; font: 11px var(--sans); }
.shelf .tab.active { font-weight: 600; }
.shelf .cards { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.shelf .cards::-webkit-scrollbar { display: none; }
.shelf .clip { flex: 0 0 248px; border-radius: 0; overflow: hidden; scroll-snap-align: start; }
.shelf .clip:hover { transform: none; }
.shelf .clip.selected { border-color: var(--text); }
.shelf .clip.selected::before { content: none; }
.shelf .clip-top { border-bottom: 0; padding: 11px 14px; font: 10px var(--sans); color: var(--secondary); }
.shelf .clip-top > span { border: 0; padding-left: 0; }
.shelf .clip-top::after { content: ''; margin-left: auto; width: 32px; height: 12px; opacity: .65; background: var(--secondary); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12' fill='none' stroke='black' stroke-width='.8'%3E%3Ccircle cx='3' cy='3' r='1.5'/%3E%3Cpath d='M7 2h5M7 4h5M1 7h11M1 10h11M24 1h5l-1 4 2 2h-7l2-2zM26.5 7v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.shelf .clip-top .pin { margin-left: auto; color: var(--text); }
.shelf .clip-body { height: 162px; padding: 18px; }
.shelf .text-preview { font-size: 16px; line-height: 1.45; letter-spacing: 0; }
.shelf .link-preview strong { font: 500 18px var(--sans); }
.shelf .link-preview small { font-size: 11px; }
.shelf .code-preview { font-size: 11px; line-height: 1.8; }
.shelf .code-preview > span { color: var(--text); }
.shelf .clip-footer { padding: 11px 16px; font: 10px var(--sans); color: var(--metadata); border-top-color: color-mix(in srgb, var(--border) 50%, transparent); }
.shelf .clip-footer::before { content: ''; flex: 0 0 17px; height: 13px; background: var(--text); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='none' stroke='black'%3E%3Cpath d='M1 4V2h5l2 2h7v8H1zM1 6h14M16 6l1 1 1-1'/%3E%3C/svg%3E") center / contain no-repeat; }
.shelf .clip-footer > span { margin-left: auto; white-space: nowrap; }
.shelf .shelf-footer { padding: 13px 20px; font: 10px var(--sans); border-top: 1px solid var(--border); }
.shelf .footer-shortcut { margin-left: 18px; padding-left: 16px; border-left: 1px solid var(--border); }
.shelf .file-preview { display: flex; flex-direction: column; gap: 12px; }
.shelf .file-preview svg { width: 22px; height: 26px; color: var(--secondary); }
.shelf .file-preview strong { font: 500 16px var(--sans); }
.shelf :is(button, input):focus-visible { outline-color: var(--text); outline-offset: -3px; }
.shelf :is(.shelf-header, .shelf-tabs, .cards, .shelf-footer) { padding-left: var(--left-inset); }
.shelf .cards { scroll-padding-left: var(--left-inset); }
@media (max-width: 700px) {
  .shelf { --left-inset: 24px; }
  .shelf .shelf-brand { font-size: 12px; }
  .shelf .search input { width: 100%; }
  .shelf .tab { padding: 8px; font-size: 11px; }
  .shelf .clip { flex-basis: min(248px, 82vw); }
  .shelf .shelf-footer { font-size: 10px; }
}