/* neverlogoff/posts.css — /posts views.
   Light theme (site.css tokens). Logical properties only (RTL-ready). No horizontal scroll at 390 px. */
.posts-main { inline-size: min(1180px, 100%); }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fine { color: var(--dim); font-size: 0.85rem; }
.linkish { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; font: inherit; }
button.small, .small { font-size: 0.85rem; padding-block: 0.25rem; padding-inline: 0.6rem; }
button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding-block: 0.5rem; padding-inline: 0.9rem; }
button.ghost, .ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button:disabled { opacity: 0.55; cursor: default; }
img, video, iframe { max-inline-size: 100%; }

.psearch { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1rem 0.75rem; }
.psearch input { flex: 1 1 14rem; min-inline-size: 0; font: inherit; padding-block: 0.6rem; padding-inline: 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.viewbar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-end: 0.75rem; }
.viewbar button { background: var(--field); color: var(--ink); border-color: var(--line); }
.viewbar button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pfilters { margin-block-end: 0.75rem; }
.pfilters summary { cursor: pointer; color: var(--dim); }
.frow { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-block-start: 0.5rem; }
.frow label, .pdialog label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; min-inline-size: 0; }
label.check { flex-direction: row; align-items: center; gap: 0.4rem; }
input, select, textarea { font: inherit; max-inline-size: 100%; border: 1px solid var(--line); border-radius: 8px; padding-block: 0.35rem; padding-inline: 0.5rem; background: var(--field); color: var(--ink); }
.parsed { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; margin-block-end: 0.75rem; }
.parsed p { margin: 0; }
.count { font-weight: 600; }
.empty { color: var(--dim); padding-block: 2rem; }
.wants { border: 1px solid var(--line); background: var(--bg2); border-radius: 10px; padding: 0.75rem; margin-block-end: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.wants p { margin: 0; flex: 1 1 100%; }
[hidden] { display: none !important; }

/* cards */
.pcard { background: var(--field); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pbody { padding-block: 0.6rem 0.75rem; padding-inline: 0.85rem; }
.pmeta { margin: 0; color: var(--dim); font-size: 0.85rem; }
.pmeta a { color: var(--ink); }
.vis { border: 1px solid var(--line); border-radius: 999px; padding-inline: 0.4rem; }
.ptext-body { margin-block: 0.35rem; overflow-wrap: anywhere; }
.ptext-tools, .ptext-note { margin: 0; font-size: 0.85rem; color: var(--dim); }
.plink { margin-block: 0.25rem; overflow-wrap: anywhere; }
.why { margin-block: 0.35rem 0; font-size: 0.8rem; color: var(--dim); font-family: var(--mono); overflow-wrap: anywhere; }
.ptools { margin-block: 0.4rem 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; padding: 0; margin-block: 0.4rem 0; }
.chips li a, .chips.edit li { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; text-decoration: none; color: var(--ink); background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding-block: 0.1rem; padding-inline: 0.55rem; }
.chips .x { background: none; border: 0; color: var(--dim); padding: 0; }
.pmedia { position: relative; background: var(--bg2); }
.pmedia img { display: block; inline-size: 100%; block-size: auto; }
.pmedia video { display: block; inline-size: 100%; aspect-ratio: 16 / 9; background: #000; }
.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; }
.carousel img { flex: 0 0 100%; scroll-snap-align: center; }
.count-badge { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; background: rgba(10,10,10,0.75); color: #fff; border-radius: 999px; font-size: 0.75rem; padding-inline: 0.45rem; }
.embed { display: block; inline-size: 100%; aspect-ratio: 16 / 9; border: 0; }
.embed.tall { aspect-ratio: 9 / 16; max-block-size: 80vh; }

/* grid (Instagram-like) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30%, 220px), 1fr)); gap: 4px; }
.tile { padding: 0; border: 0; border-radius: 0; background: var(--bg2); aspect-ratio: 1; overflow: hidden; }
.tile .pmedia, .tile .single, .tile .carousel { block-size: 100%; }
.tile img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 480px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; } }

/* read (Reddit-like) */
.thread, .timeline ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.thread .pcard { border-inline-start: 3px solid var(--ink); }

/* watch (YouTube-like) */
.watch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 1rem; align-items: start; }
.upnext h2 { font-size: 1rem; margin-block: 0 0.5rem; }
.upnext ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.next-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0.5rem; inline-size: 100%; text-align: start; background: transparent; color: var(--ink); border: 0; padding: 0; }
.next-item img, .next-ph { inline-size: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--bg2); }
.next-text { font-size: 0.9rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
@media (max-width: 860px) { .watch { grid-template-columns: minmax(0, 1fr); } }
.feed { display: grid; gap: 1rem; max-inline-size: 560px; margin-inline: auto; }
.feed-card { background: var(--field); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.feed-slot { aspect-ratio: 16 / 9; }

/* timeline */
.tl-month h2 { font-size: 1rem; margin-block: 1rem 0.5rem; position: sticky; inset-block-start: 64px; background: var(--bg); padding-block: 0.25rem; }
.timeline .pcard { max-inline-size: 640px; }

/* map */
.map { block-size: min(60vh, 480px); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg2); }
.svgmap { inline-size: 100%; block-size: 100%; }
.svgmap line { stroke: var(--line); stroke-width: 0.3; }
.svgmap circle { fill: var(--ink); }
.map-list { font-size: 0.9rem; padding-inline-start: 1.2rem; }

/* dialogs */
.pdialog { inline-size: min(720px, calc(100vw - 1.5rem)); max-block-size: calc(100vh - 2rem); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.pdialog.narrow { inline-size: min(440px, calc(100vw - 1.5rem)); }
.pdialog::backdrop { background: rgba(10,10,10,0.45); }
.pdialog form { display: grid; gap: 0.6rem; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.dialog-head h2 { margin: 0; font-size: 1.1rem; }
.ac { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.ac button { inline-size: 100%; text-align: start; background: var(--bg2); color: var(--ink); border-color: var(--line); }
.sug ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.sug textarea { inline-size: 100%; font-family: var(--mono); font-size: 0.8rem; }
.status { min-block-size: 1.2em; color: var(--dim); margin: 0; }
.actions { display: flex; gap: 0.5rem; margin: 0; }
fieldset { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 0.3rem; }
.pdialog { overflow-x: hidden; box-sizing: border-box; margin-inline: auto; }
.pdialog input:not([type="checkbox"]):not([type="radio"]), .pdialog select, .pdialog textarea { inline-size: 100%; min-inline-size: 0; }
.pdialog .frow > label { flex: 1 1 10rem; }
/* feed: one video per screen, so "in view" means one video at a time */
.feed-card { min-block-size: calc(100svh - 96px); display: flex; flex-direction: column; justify-content: center; scroll-snap-align: center; }
html:has(.feed) { scroll-snap-type: y proximity; }

/* page builder (feat/page-builder-v0): /page-wall = this page embedded as a block on someone's /@name.
   Only the views show; the owner's toggle decides whether visitors get the view buttons. */
.nlo-embed body { background: transparent; }
.nlo-embed .top, .nlo-embed .hero, .nlo-embed .psearch, .nlo-embed .pfilters, .nlo-embed #parsed, .nlo-embed #wants, .nlo-embed .skip { display: none; }
.nlo-embed .viewbar { display: none; }
.nlo-embed.nlo-embed-views .viewbar { display: flex; }
.nlo-embed .viewbar button { min-block-size: 44px; }
.nlo-embed .posts-main { inline-size: 100%; padding-block: 0.25rem; padding-inline: 0.25rem; margin: 0; }
.nlo-embed[data-density="compact"] .pcard { padding: 0.5rem; }
.nlo-embed[data-density="compact"] .grid { gap: 2px; }
.nlo-embed[data-density="compact"] .thread, .nlo-embed[data-density="compact"] .timeline { font-size: 0.92rem; }

/* feat/reach-v0 */
.remix-credit{font-size:.85rem;color:#3d4757;margin:.15rem 0}
.signed-badge { color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding-inline: 0.45rem; font-size: 0.8rem; white-space: nowrap; }
.signed-badge:hover, .signed-badge:focus-visible { text-decoration: underline; }

/* R3 (feat/clearer-landing-post-v0): type buttons, "More options", the access sentence and picker, the AI door */
.ptypes { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.ptypes legend { padding: 0; margin-block-end: 0.4rem; font-weight: 600; }
.pdialog label.ptype { position: relative; flex-direction: row; align-items: center; justify-content: center; gap: 0.4rem; min-block-size: 56px; padding-inline: 0.5rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--field); font-size: 1rem; font-weight: 600; cursor: pointer; text-align: center; }
.ptype input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; }
.pdialog label.ptype:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.pdialog label.ptype:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (max-width: 420px) { .ptypes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pmore { border: 1px solid var(--line); border-radius: 10px; padding-block: 0.1rem; padding-inline: 0.75rem; }
.pmore[open] { display: grid; gap: 0.6rem; padding-block-end: 0.75rem; }
.pmore summary { display: flex; align-items: center; min-block-size: 44px; cursor: pointer; font-weight: 600; }
.pvis { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.pvis .linkish { min-block-size: 44px; min-inline-size: 44px; padding-inline: 0.25rem; }
.pvis-picker .ap { border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem; margin: 0; display: grid; gap: 0.6rem; min-inline-size: 0; }
.pvis-picker .ap legend { font-weight: 700; padding-inline: 0.25rem; }
.pvis-picker .ap-radios { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pdialog .pvis-picker label.ap-radio { flex-direction: row; align-items: center; gap: 0.45rem; min-block-size: 44px; padding-block: 0.25rem; padding-inline: 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--field); cursor: pointer; font-size: 0.95rem; }
.pdialog .pvis-picker label.ap-radio:has(input:checked) { border-color: var(--ink); }
.pvis-picker .ap-radio input { inline-size: 1.1rem; block-size: 1.1rem; margin: 0; }
.actions { flex-wrap: wrap; }
.actions button { min-block-size: 44px; }