1 files changed, 46 insertions, 11 deletions
diff --git a/src/style.css b/src/style.css
index f26fac3..ec9fd18 100644
--- a/src/style.css
+++ b/src/style.css
@@ -95,6 +95,8 @@
 * { box-sizing: border-box; }
 
 html {
+  /* a post scrolled into view lands below the sticky top bar */
+  scroll-padding-top: 72px;
   /* Reserve the scrollbar's gutter always, so it doesn't appear the instant
      the history list fills the page and shrink the viewport — that width
      change re-centered the balance carousel's snapped card, the "slight move
@@ -176,6 +178,17 @@ input { scroll-margin-top: 12px; }
 .logo-full { height: 40px; flex: none; color: var(--ink); display: grid; place-items: center; }
 .logo-full svg { height: 40px; width: auto; display: block; }
 .brand h1 { font-size: 19px; }
+/* The top bar (logo, search, settings, avatar) stays on screen while the
+   page scrolls under it (Adam, 2026-11-12). A frosted strip the width of the
+   column, padded out by the same amount it's pulled in, so the layout at
+   rest doesn't move; the safe-area inset keeps it clear of a notch. */
+.brand-header {
+  position: sticky; top: 0; z-index: 30;
+  margin: -8px -16px; padding: 8px 16px;
+  padding-top: max(8px, env(safe-area-inset-top));
+  background: color-mix(in srgb, var(--bg) 84%, transparent);
+  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
+}
 
 .badge {
   font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
@@ -344,6 +357,10 @@ textarea.send-dest::placeholder { font-family: var(--sans); }
    eight-letter word ("resemble") pushed the third column out past the
    card's padding. The cells are a touch tighter so every BIP-39 word (eight
    letters at most) still fits whole in a third of a narrow card. */
+/* The one-word check after the phrase: four of its words, tap the right one. */
+.quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.quiz-opt { font-family: var(--mono); font-size: 16px; padding: 14px 8px; }
+.quiz-opt.wrong { border-color: var(--red); color: var(--red); background: var(--red-soft); }
 .words { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
 .words .w {
   display: flex; align-items: baseline; gap: 5px; background: var(--surface2); min-width: 0;
@@ -575,6 +592,9 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; }
   border: none; background: none; padding: 11px 8px; font-weight: 550; border-radius: 10px;
 }
 .msg-sheet-item:hover { background: var(--surface2); }
+.msg-sheet-item.danger, .msg-sheet-item.danger .msg-sheet-ico { color: var(--red); }
+.msg-sheet-item.danger.armed { background: color-mix(in srgb, var(--red) 12%, transparent); }
+.chat-removed-head { padding: 10px 4px 2px; }
 .msg-sheet-ico { width: 20px; text-align: center; color: var(--muted); flex-shrink: 0; }
 /* the quoted message a reply carries, and the composer's replying-to bar */
 .chat-quote {
@@ -1035,17 +1055,11 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 .feed-compose-icon { display: flex; flex-shrink: 0; }
 .feed-compose-icon .compose-pen { stroke: #14935a; }
 .feed-compose-icon .compose-pen-fill { fill: #14935a; opacity: .18; }
-.feed-page .feed-new-pill {
-  bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
-}
-/* a phone is too narrow for it beside the Post button: it rides above */
-@media (max-width: 480px) {
-  .feed-page .feed-new-pill { bottom: calc(env(safe-area-inset-bottom, 0px) + 142px); }
-}
 .feed-new-pill {
-  /* Rides at the bottom of the window, where a thumb already is; the tap
-     takes the reader up to the new posts. */
-  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
+  /* Rides at the bottom of the window, where a thumb already is, above the
+     nav; the tap takes the reader up to the new posts. (Painted beside the
+     page, not inside it: see page-floaters in app.js.) */
+  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
   left: 50%; transform: translateX(-50%);
   z-index: 30; width: auto; padding: 12px 24px; border-radius: 999px;
   background: var(--fill); color: var(--fill-fg); border: none;
@@ -1054,6 +1068,10 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
   box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
   animation: pill-in .18s ease-out;
 }
+/* a phone is too narrow for it beside the Post button: it rides above */
+@media (max-width: 480px) {
+  .feed-new-pill { bottom: calc(env(safe-area-inset-bottom, 0px) + 142px); }
+}
 /* the generic button hover (a light surface) and press (a 1px drop, which
    REPLACED the centring transform and threw the pill half its width to the
    right, out from under the pointer, so the tap never landed) stay off it */
@@ -1119,6 +1137,9 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 /* over a playing clip: a tap takes it full screen; YouTube's control bar
    along the bottom is left uncovered, and full screen it all is */
 .yt-shield { position: absolute; left: 0; right: 0; top: 0; bottom: 52px; z-index: 1; cursor: pointer; }
+/* a mouse reaches the player's own buttons (pause in the middle, full screen
+   in the corner): while one is over the box its clicks go to the player */
+.yt-embed.by-mouse .yt-shield { display: none; }
 .yt-embed:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; }
 .yt-embed:fullscreen .yt-shield { display: none; }
 .yt-embed:fullscreen iframe { object-fit: contain; }
@@ -1846,6 +1867,7 @@ body::after {
   color: #fff; font-size: 14px; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
 }
 .vid-nopic a { color: #fff; text-decoration: underline; pointer-events: auto; }
+.note-video-box.gone .note-video { max-height: 160px !important; aspect-ratio: 16 / 9; }
 .media-tile-cost {
   position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
   color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 600; background: #16181d;
@@ -1893,7 +1915,7 @@ body::after {
     min-height: 48px; padding: 8px 14px; font-size: 16px;
   }
   .feed-post-fab { right: calc(50% - var(--col-edge) + 16px); bottom: 24px; }
-  .feed-new-pill, .feed-page .feed-new-pill { left: calc(50% + var(--col-mid)); bottom: 24px; }
+  .feed-new-pill { left: calc(50% + var(--col-mid)); bottom: 24px; }
   .toast { left: calc(50% + var(--col-mid)); }
 }
 @media (min-width: 1220px) {
@@ -1948,6 +1970,8 @@ body::after {
 /* a reply shown with the post it answers above it (Conversations, a profile's Replies) */
 .note-context { margin-bottom: 6px; }
 .note-context-label { margin-bottom: 2px; }
+.note-scope .note-context-label { display: inline-block; text-decoration: none; }
+.note-scope .note-context-label:hover { text-decoration: underline; }
 .note-context .quote-card { margin-top: 0; }
 .note-context .quote-card .note-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
 /* attach + GIF inside the composer's field, bottom right; the field keeps
@@ -2086,3 +2110,14 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut
   font-style: italic; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere;
 }
 .gift-note-input { width: 100%; min-height: 0; font-family: var(--sans); }
+
+/* pull to refresh, where the browser has none (src/pull-refresh.js) */
+.ptr {
+  position: fixed; top: env(safe-area-inset-top, 0px); left: 50%; z-index: 2147483000;
+  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
+  background: var(--paper); color: var(--muted); box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
+  transform: translate(-50%, -48px); opacity: 0; pointer-events: none;
+}
+.ptr.ready { color: var(--ink); }
+.ptr.spin svg { animation: ptr-spin .8s linear infinite; }
+@keyframes ptr-spin { to { transform: rotate(360deg); } }