/* P1 + QA-1119 (Oct 24 2026 ~12:00 PM MST) */
/* ?demo=1: no mark-up marker */
html.mk-demo .mk-mfab, html.mk-demo .mk-mbar { display: none !important; }
/* the single-subject filter sheet: 64 pt rows, name 17/600, example line 15 serif muted, tick on the chosen row */
.p1-lens { display: flex; flex-direction: column; padding: 0 0 max(12px, env(safe-area-inset-bottom)); }
.p1-lrow { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 20px; border: 0; border-top: 1px solid var(--u-line); background: none; color: var(--u-ink); text-align: left; width: 100%; font: inherit; }
.p1-lrow span { flex: 1; min-width: 0; display: block; }
.p1-lrow b { display: block; font-size: 17px; font-weight: 600; line-height: 22px; }
.p1-lrow small { display: block; font-family: var(--u-serif, Georgia, serif); font-size: 15px; line-height: 20px; color: var(--u-mut); }
.p1-tick { width: 22px; height: 22px; flex: none; }
.p1-lrow[aria-checked="true"] .p1-tick { background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center/22px no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center/22px no-repeat; color: var(--u-accent, #c4553a); }
.p1-lensline { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin: 4px 16px 8px; padding: 0 0 0 14px; border-radius: 16px; background: var(--u-card, rgba(127,127,127,.12)); font-size: 14px; font-weight: 600; color: var(--u-ink); }
.p1-lensx { min-width: 44px; min-height: 44px; margin: -6px 0; border: 0; background: none; color: inherit; font-size: 15px; }
.feed-filter-trigger.p1-on, .discover-filter-trigger.p1-on { color: var(--u-accent, #c4553a); }
[data-lens-empty] .u-btn + .u-btn, .u-nbtns .u-btn + .u-btn { margin-left: 8px; }
/* Discover search results */
.u-none .u-nbtns { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.u-qres:empty { display: none; }
/* D1 live bug: the Original's Discover page has no .u-app reset (updated.css:19), so the Circles / Posts search rows were UA-blue underlined links. Same ink, fonts and row look as .u-prow elsewhere in the Updated shell (the --u-* tokens are on :root). */
.u-qres { margin-bottom: 8px; color: var(--u-ink); font: 400 16px/1.4 var(--u-f-b); }
.u-qres a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.u-qres h2 { margin: 0; }
/* composer: Photo or video */
.p1-rec-dot { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--u-mut); position: relative; }
.p1-rec-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #e0352b; }
.u-sheet .u-row > span.p1-rec-dot { flex: none; width: 22px; height: 22px; } /* D1 live bug: beats updated.css:113 '.u-row>span:not(.u-face){flex:1;display:block}', which stretched the dot to 170×22 */
.p1-rec { padding: 8px 20px max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.p1-vf { position: relative; width: 100%; max-width: 280px; aspect-ratio: 9/14; border-radius: 14px; overflow: hidden; background: #000; }
/* D1 live bug (Grok, Oct 25): the sticky Close (exits.css) covered "Recording you… tap to stop" because the 280×436 viewfinder made the sheet scroll. The viewfinder now shrinks with the screen height (same 9:14 shape) so finder + Stop + line + Close fit inside the 92% sheet at 375/390/430: no scrolling, Close stays sticky and in reach, the line is never under it. 250 px = grabber + Stop + line + Close + paddings. */
.p1-recsheet .p1-vf { max-width: min(280px, calc((92dvh - 250px) * 9 / 14)); }
.p1-vf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: .9; }
.p1-rd { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; background: rgba(0,0,0,.55); color: #fff; font: 600 14px/1 system-ui, sans-serif; }
.p1-rd i { width: 9px; height: 9px; border-radius: 50%; background: #e0352b; animation: p1blink 1s steps(2, start) infinite; }
@keyframes p1blink { to { visibility: hidden; } }
.p1-stop { width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--u-ink); background: none; display: grid; place-items: center; }
.p1-stop i { width: 24px; height: 24px; border-radius: 5px; background: #e0352b; }
/* POST-MEDIA: the attachment is the feed card's shape (16:9, centred), so what you see is what the feed shows */
.p1-att { position: relative; width: calc(100% - 32px); max-width: 520px; aspect-ratio: 16 / 9; margin: 8px 16px; border-radius: 12px; overflow: hidden; background: #0E1110; }
.p1-att.p1-vert { aspect-ratio: 1 / 1; } /* VERT-34: same upright frame as the feed card */
.p1-att.p1-vert img { object-position: 50% 40%; }
.p1-att img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.p1-att[data-busy] img { opacity: 0; }
.p1-att[data-busy]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid rgba(255,255,255,.28); border-top-color: #fff; animation: p1spin .8s linear infinite; }
@keyframes p1spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .p1-att[data-busy]::after { animation: none; border-top-color: rgba(255,255,255,.28); } }
.p1-att-t { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.6); color: #fff; font: 600 13px/18px system-ui, sans-serif; }
.p1-att-x { position: absolute; top: 2px; right: 2px; color: #fff; background: rgba(0,0,0,.45); border-radius: 50%; }
.p1-vbadge { position: absolute; left: 12px; bottom: 12px; padding: 3px 10px; border-radius: 12px; background: rgba(0,0,0,.62); color: #fff; font: 600 14px/20px system-ui, sans-serif; pointer-events: none; }
.feed-media { position: relative; }
/* Jim's voice card in the feed: a visible ▶ and "14 s" */
.u-vn.feedvn { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; min-height: 44px; }
.u-vn.feedvn b { font-size: 15px; font-weight: 600; color: var(--u-mut); }
.u-vn.feedvn svg.u-wave, .u-vn.feedvn .u-wave { flex: 1; max-width: 160px; }
@media (prefers-reduced-motion: reduce) { .p1-rd i { animation: none; } }
/* C19 cat=A: the composer's one-line category ("Life ✓ · change"), 44 pt; the 5 chips open inline */
.p1-catrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 0 16px; }
.p1-cat, .p1-catchg { min-height: 44px; border: 0; background: none; color: var(--u-ink); font: 600 15px/20px var(--u-f-b, system-ui); padding: 0 4px; }
.p1-catchg { color: var(--u-mut); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.p1-catopts { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; padding-bottom: 6px; }
.p1-catopts[hidden] { display: none; }
.p1-copt { min-height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--u-line); background: none; color: var(--u-ink); font: 500 14px/20px var(--u-f-b, system-ui); position: relative; }
.p1-copt::after { content: ""; position: absolute; inset: -6px -4px; }
.p1-copt[hidden] { display: none; }
/* the category in the name row's time slot (hidden for Life, and while a filter is on) */
.u-catl { color: inherit; font-size: inherit; }
.u-stream:has(> [data-lensline]) .u-catl { display: none; }
.u-globe { display: inline-block; vertical-align: -3px; margin-right: 3px; } /* C21 resume: global svg{display:block} broke the Following "Anywhere" chip onto 3 lines (57 px tall) */
.u-capwarn { margin: 8px 16px; }
/* C21: camera flip in the fake recorder, "N left today" under Posting as */
.p1-flip { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; }
.p1-rec[data-cam="env"] .p1-recline { color: var(--u-text, inherit); font-weight: 600; }
.u-left { margin: 2px 16px 0; font-size: 13px; line-height: 18px; color: var(--u-sub, #6b6b6b); }
.u-left.none { color: #b3261e; }
html.dark .u-left.none, [data-theme="dark"] .u-left.none { color: #ff8a80; }
/* QA m3 */
.ev-nowrap{white-space:nowrap}.ev-lock{margin-left:4px;flex:none;opacity:.8}
/* QA m10 */
.fs-endin p.fs-endq{font:500 15px/1.4 var(--u-f-b,system-ui);opacity:.72}
.u-mocklab{margin-top:18px}
/* QA m2 (contrast ≥ 4.5:1): "More around" meta on the light page; the no-date band in dark */
html:not([data-theme=dark]) body[data-mk-side=updated] .u-mf-t small, html:not([data-theme=dark]) body[data-mk-side=updated] .u-mf-h svg { color: #454C48; }
@media (prefers-color-scheme: dark) { html:not([data-theme=light]) body[data-mk-side=updated] .u-mf-t small, html:not([data-theme=light]) body[data-mk-side=updated] .u-mf-h svg { color: var(--u-mut); } }
html[data-theme=dark] .su-prev.no-date .db-band { background: #4A4F4C; }
@media (prefers-color-scheme: dark) { html:not([data-theme=light]) .su-prev.no-date .db-band { background: #4A4F4C; } }
/* QA m15: at 375 the map card's status goes under the kind line instead of squeezing the name */
@media (max-width: 389px) { .u-mapcard { flex-wrap: wrap; row-gap: 2px; } .u-mapcard .u-mc-l { flex-basis: 100%; } .u-mapcard .u-mc-l b, .u-mapcard .u-mc-l small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .u-mapcard > :not(.u-mc-l) { margin-left: 56px; } }
/* POST-TITLE: "Add a title" (picture posts only) sits right above the words */
.p1-tl { padding: 0 20px; }
.p1-tadd { display: block; min-height: 44px; padding: 0; border: 0; background: none; color: var(--u-mut); font: 500 16px/20px var(--u-f-b, system-ui); text-decoration: underline; text-underline-offset: 3px; -webkit-tap-highlight-color: transparent; }
.p1-ti { display: block; width: 100%; min-height: 48px; padding: 6px 0 2px; border: 0 !important; border-radius: 0; background: none !important; outline: 0 !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; color: var(--u-ink); font: 600 20px/1.3 var(--u-f-d); letter-spacing: -.005em; }
.p1-ti::placeholder { color: var(--u-mut); opacity: .85; font-weight: 500; }
.p1-tc { margin: 0; text-align: right; min-height: 16px; line-height: 16px; } /* the row is reserved, so "N left" never pushes the words down */
.p1-tl + .u-text { padding-top: 4px; min-height: 60px; }
/* the mock-up's draggable markup button (marker.js) is parked on the left edge and covered the photo preview: while a picture is attached in the composer it waits in the empty top-right of the header instead (review tool only, not part of Marla) */
body[data-mk-side=updated][data-mk-screen^=compose]:has(.p1-att) .mk-mfab { left: calc(100vw - 54px) !important; top: calc(4px + env(safe-area-inset-top)) !important; }