/* neverlogoff/lens.css — /lens (lenses v0).
   Light theme (site.css tokens), logical properties only, every tap target ≥ 44 px, no horizontal scroll at 390 px. */
.lens-main { inline-size: min(1180px, 100%); margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }
.lens-main h1 { margin-block: 1rem 0.25rem; }
.lens-main .lede { color: var(--dim); max-inline-size: 60ch; }
.lens-main button, .lens-main .btn, .lens-main select, .lens-main input[type="search"], .lens-main input[type="text"], .lens-main input[type="number"] { min-block-size: 44px; box-sizing: border-box; }
.lens-main .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 8px; border: 1px solid var(--line); padding-inline: 0.9rem; color: var(--ink); background: var(--field); }
.lens-main .btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.lhead { display: grid; gap: 0.5rem; margin-block: 1rem; }
.lhead h1 { margin: 0; overflow-wrap: anywhere; }
.lhead .by, .lhead .credit { margin: 0; color: var(--dim); font-size: 0.9rem; }
.sortline { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding-block: 0.5rem; padding-inline: 0.75rem; }
.sortline strong { font-weight: 600; }
.sortline details { flex: 1 1 100%; color: var(--dim); font-size: 0.9rem; }
.sortline summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; }
.chips.lens-tags { margin-block: 0; }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0.75rem; margin-block: 1rem; }
.lcard { display: flex; flex-direction: column; background: var(--field); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-inline-size: 0; }
.lcard .thumb { aspect-ratio: 4 / 3; background: var(--bg2); display: block; inline-size: 100%; object-fit: cover; }
.lcard .body { padding: 0.75rem; display: grid; gap: 0.35rem; }
.lcard p { margin: 0; overflow-wrap: anywhere; }
.src { display: inline-flex; gap: 0.3rem; align-items: center; font-size: 0.8rem; color: var(--dim); }
.src b { font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding-inline: 0.45rem; background: var(--bg2); }
.rwhy { font-size: 0.8rem; color: var(--dim); }
.lenslist { display: grid; gap: 0.5rem; list-style: none; padding: 0; margin-block: 0.5rem 1.5rem; }
.lenslist a { display: grid; gap: 0.15rem; text-decoration: none; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem; min-block-size: 44px; }
.lenslist small { color: var(--dim); }
.client-side { border: 1px dashed var(--line); border-radius: 10px; padding: 0.75rem; color: var(--dim); font-size: 0.9rem; margin-block: 0.5rem; }

/* builder */
.builder { display: grid; gap: 1rem; max-inline-size: 760px; margin-block: 1rem; }
.builder fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem; display: grid; gap: 0.5rem; min-inline-size: 0; }
.builder legend { font-weight: 600; padding-inline: 0.25rem; }
.builder label { display: grid; gap: 0.25rem; }
.builder label.check { display: flex; gap: 0.5rem; align-items: center; min-block-size: 44px; }
.builder input[type="checkbox"] { inline-size: 22px; block-size: 22px; }
.builder textarea { min-block-size: 4rem; }
.pickbox { position: relative; }
.suggest { list-style: none; margin: 0; padding: 0; position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 5; background: var(--field); border: 1px solid var(--line); border-radius: 8px; max-block-size: 260px; overflow: auto; }
.suggest button { inline-size: 100%; text-align: start; background: var(--field); color: var(--ink); border: 0; border-radius: 0; min-block-size: 44px; }
.suggest button small { color: var(--dim); }
.chips.edit li { min-block-size: 32px; }
.chips.edit .x { min-inline-size: 44px; min-block-size: 44px; }
.explain { color: var(--dim); font-size: 0.9rem; margin: 0; }

/* swipe: one item per screen, vertical snap */
body.swiping { overflow: hidden; }
body.swiping #chrome { display: none; }
.swipe { position: fixed; inset: 0; background: #0a0a0a; color: #fafafa; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; }
.slide { block-size: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: grid; grid-template-rows: auto 1fr auto; box-sizing: border-box; padding-block: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-bottom)); padding-inline: 0.75rem; }
.slide .stage { display: grid; place-items: center; min-block-size: 0; overflow: hidden; }
.slide .stage img, .slide .stage video { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; border-radius: 8px; background: #000; }
.slide .stage .textcard { max-inline-size: 36rem; font-size: clamp(1.1rem, 4vw, 1.6rem); line-height: 1.4; overflow-wrap: anywhere; }
.slide .stage .fedcard { max-inline-size: 36rem; display: grid; gap: 0.75rem; }
.slide .stage a { color: #fafafa; }
.slide .top { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; min-block-size: 44px; }
.slide .top .src b { color: #fafafa; background: #222; border-color: #333; }
.slide .top .src { color: #d4d4d8; }
.slide .meta { color: #d4d4d8; font-size: 0.9rem; margin: 0; }
.slide .meta.why { font-family: var(--mono); font-size: 0.8rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; padding-block: 0.5rem; }
.actions button { min-inline-size: 44px; min-block-size: 44px; background: #1c1c1f; color: #fafafa; border: 1px solid #3f3f46; border-radius: 999px; padding-inline: 0.85rem; font-size: 0.9rem; }
.actions button[aria-pressed="true"] { background: #fafafa; color: #0a0a0a; border-color: #fafafa; }
.swipe .exit { background: #1c1c1f; color: #fafafa; border: 1px solid #3f3f46; border-radius: 999px; min-block-size: 44px; min-inline-size: 44px; }
.swipe .hint { color: #a1a1aa; font-size: 0.8rem; text-align: center; margin: 0; }
.swipe .endslide { display: grid; place-items: center; text-align: center; }
@media (min-width: 900px) {
  .slide { grid-template-columns: 1fr minmax(0, 720px) 1fr; }
  .slide > * { grid-column: 2; }
}

/* dialogs + toast */
dialog.lsheet { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; inline-size: min(28rem, calc(100vw - 2rem)); box-sizing: border-box; }
dialog.lsheet::backdrop { background: rgba(0,0,0,0.45); }
dialog.lsheet form { display: grid; gap: 0.75rem; }
dialog.lsheet input[readonly] { inline-size: 100%; }
.toast { position: fixed; inset-inline: 1rem; inset-block-end: 1rem; z-index: 50; background: var(--ink); color: var(--paper); border-radius: 10px; padding: 0.75rem 1rem; text-align: center; }