/* New design, included on every page. */
.nd-prog { position: fixed; z-index: 40; left: 8px; right: 8px; top: calc(6px + var(--sat)); height: 2px; border-radius: 1px; background: rgba(255,255,255,.35); pointer-events: none; }
.nd-prog i { display: block; height: 100%; width: 0; background: var(--sun); border-radius: 1px; }
.nd .nd-who { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; color: var(--card); text-decoration: none; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.nd .nd-who .avi { flex: none; border-radius: 50%; }
.nd .nd-who .nd-id { min-width: 0; }
.nd .nd-who b { display: block; font: var(--t-headline) var(--sf); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd .nd-when { display: block; font-size: 13px; line-height: 18px; font-weight: 400; color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-rail { position: fixed; z-index: 30; right: 6px; bottom: calc(28px + var(--sab)); width: 48px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.nd-spark, .nd-railbtn { position: relative; width: 48px; height: 52px; min-height: 52px; padding: 0; border: 0; background: none; color: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.nd-spark svg, .nd-railbtn svg { fill: none; stroke: currentColor; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.nd-spark.on { color: var(--sun); }
.nd-spark.on svg { fill: var(--sun); stroke: var(--sun); filter: drop-shadow(0 0 8px rgba(255,201,51,.9)); }
.nd-spark b, .nd-railbtn b { min-height: 18px; font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nd-railshare b { display: none; }
.nd .viewfoot.strip, .nd .scard .vfoot { padding-right: 72px; }
.nd-pause { position: fixed; z-index: 20; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 37px; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; opacity: 0; background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: opacity .32s ease; }
.nd-pause.on { opacity: 1; }
.nd-pause i { width: 7px; height: 26px; border-radius: 4px; background: var(--card); box-shadow: 0 1px 6px rgba(0,0,0,.28); }
.nd-aura { position: fixed; inset: 0; z-index: 60; }
.nd-aura[hidden] { display: none; }
.nd-aura-bg { position: absolute; inset: 0; border: 0; background: rgba(20,19,17,.35); }
.nd-aura-card { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--sab)); padding: 18px 18px 8px; border-radius: 28px; background: rgba(250,246,239,.9); color: var(--ink); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.7); }
.nd-aura-h { font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -.4px; margin-bottom: 8px; }
.nd-aura-name { font: var(--t-headline) var(--sf); padding: 8px 0; border-top: .5px solid rgba(27,26,23,.12); }
.nd-aura-anon { font-size: 15px; line-height: 20px; color: rgba(27,26,23,.62); padding: 8px 0; }
.nd-comments { position: fixed; inset: 0; z-index: 55; }
.nd-comments[hidden], .nd-gate[hidden], .nd-share[hidden] { display: none; }
.nd-comments-bg { position: absolute; left: 0; right: 0; top: 0; bottom: 50%; border: 0; background: rgba(20,19,17,.30); }
.nd-comments-card { position: absolute; left: 0; right: 0; bottom: 0; top: 50%; display: flex; flex-direction: column; border-radius:var(--r36) var(--r36) 0 0; color: var(--ink); background: transparent; box-shadow: 0 -16px 40px rgba(27,26,23,.18); }
/* A real layer, not ::before. WKWebView skips backdrop-filter on a pseudo and paints the fill flat, and it also paints a white bar behind an input that lives inside the filtered element. */
.nd-glass { position: absolute; z-index: 0; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(255,255,255,.40); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.55); }
.nd-comments-card > *:not(.nd-glass):not(.nd-compose) { position: relative; z-index: 1; }
.nd-comments-head { flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 8px 4px 8px; }
.nd-comments-head h2 { flex: 1; margin: 0; text-align: center; font: var(--t-headline) var(--sf); letter-spacing: -.4px; text-shadow: 0 1px 0 rgba(255,255,255,.9); }
.nd-n { font-weight: 400; margin-left: 4px; font-variant-numeric: tabular-nums; }
.nd-n:empty { display: none; }
.nd-side, .nd-x { width: 44px; height: 44px; flex: none; }
.nd-x { border: 0; border-radius:var(--r22); background: rgba(118,104,80,.12); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.nd-comments-list { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 16px; margin-bottom: calc(60px + var(--sab)); }
.nd-comments-card.lift .nd-comments-list { margin-bottom: 60px; }
.nd-comments-empty { text-align: center; padding: 36px 32px 12px; color: var(--ink); }
.nd-mark { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 28px; background: var(--sun); display: flex; align-items: center; justify-content: center; box-shadow:var(--shadow-press-inset); }
.nd-comments-empty b { display: block; font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -.4px; }
.nd-comments-empty p { margin: 6px 0 0; font-size: 15px; line-height: 20px; font-weight: 400; }
.nd-c { position: relative; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.nd-c-more { position: absolute; top: 4px; right: 4px; width: 36px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--stone); padding: 0; }
.nd-c .nd-main { padding-right: 24px; }
.nd-c { display: flex; gap: 10px; align-items: flex-start; margin: 8px 12px; padding: 10px 12px; background: var(--card); border-radius: 18px; }
.nd-av { width: 36px; height: 36px; margin-top: 2px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--sun); font-size: 15px; font-weight: 700; }
.nd-av-img { background-size: cover; background-position: center; }
.nd-main { flex: 1; min-width: 0; }
.nd-c b { display: block; min-width: 0; font: var(--t-headline) var(--sf); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-c p { margin: 2px 0 0; font: var(--t-body) var(--sf); letter-spacing: -.3px; }
.nd-c img { width: 72px; height: 96px; object-fit: cover; border-radius: 12px; margin-top: 8px; }
.nd-replyvid { position: relative; display: block; width: 72px; height: 96px; margin-top: 8px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--ink); }
.nd-replyvid img { width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; display: block; }
.nd-replyvid-play { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius:var(--r14); background: rgba(20,19,17,.45); color: var(--card); display: flex; align-items: center; justify-content: center; }
/* Pinned to the sheet, not a flex footer. A footer after the scrolling list is what iOS lifts into its own white bar. */
.nd-compose { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px; box-sizing: border-box; padding: 8px 12px calc(8px + var(--sab)); margin: 0; background: transparent; background-color: transparent; border-top: .5px solid rgba(27,26,23,.12); }
.nd-comments-card.lift .nd-compose { padding-bottom: 8px; }
.nd-compose input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 44px; border: 0; border-radius:var(--r22); background: rgba(255,255,255,.45); background-color: rgba(255,255,255,.45); padding:0 var(--m); font: 400 17px/22px var(--sf); color: var(--ink); }
.nd-reply { position: fixed; inset: 0; z-index: 65; background: var(--black); touch-action: none; }
.nd-reply video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--black); pointer-events: none; }
.nd-reply-x { position: absolute; z-index: 2; top: calc(8px + var(--sat)); left: 12px; width: 44px; height: 44px; border: 0; border-radius:var(--r22); background: rgba(20,19,17,.55); color: var(--card); display: flex; align-items: center; justify-content: center; }
.nd-compose input::placeholder { color: rgba(27,26,23,.62); }
/* Longhands, not the font shorthand: iOS WebKit does not apply a shorthand font to a button, and a link's text node does not match a button's <b>. */
.nd-share-card .target,
.nd-share-card .target .t-caption {
  font-family: var(--sf);
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  line-height: 16px;
  letter-spacing: -.2px;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.nd-share-card .target .t-caption { display: block; text-align: center; }
.nd-post { border: 0; background: var(--sun); color: var(--ink); font: 600 17px/1 var(--sf); height: 44px; padding:0 var(--m); border-radius:var(--r22); box-shadow:var(--shadow-press-inset); }
.nd-share { position: fixed; inset: 0; z-index: 60; }
.nd-share-bg { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(20,19,17,.35); }
.nd-share-card { position: absolute; left:var(--m); right:var(--m); bottom: calc(12px + var(--sab)); z-index: 1; max-height: calc(100% - 24px - var(--sab)); overflow: auto; border-radius:var(--r36); padding:4px var(--m) 16px; color: var(--ink); background: rgba(250,246,239,.92); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.7), 0 12px 40px rgba(27,26,23,.2); }
.nd-share-h { margin: 4px 0 14px; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -.6px; }
.nd-share-card .targets { margin-top: 4px; }
.nd-share-card .target { background: none; border: 0; padding: 0; color: var(--ink); appearance: none; -webkit-appearance: none; }
.nd-share-go { margin-top: 16px; }
.nd-gate { position: fixed; inset: 0; z-index: 70; background: rgba(20,19,17,.18); }
/* Logged-out Post: the Comments sheet stays up behind "Sign up to post", the rail hides, the comment waits greyed at the top */
.nd-gating .nd-rail { display: none; }
.nd-pend { opacity: .6; }
.nd-pend .nd-av { background: #d9d6cf; }
.nd-pend b span { font-weight: 500; font-size: 12px; opacity: .75; }
.nd-gate-card { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--sab)); padding: 22px 20px 28px; border-radius: 28px; background: rgba(250,246,239,.92); color: var(--ink); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); }
.nd-gate-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 18px; background: rgba(27,26,23,.06); color: var(--ink); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.nd-gate-h { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.5px; padding-right: 36px; }
.nd-gate-card p { margin: 8px 0 0; font: var(--t-body) var(--sf); letter-spacing: -.3px; color: rgba(27,26,23,.72); }
.nd-grab { height: 28px; flex: none; position: relative; pointer-events: none; }
.nd-grab::before { content: ""; position: absolute; left: 50%; top: 8px; margin-left: -18px; }
.nd-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 10px; border: 0; border-radius:var(--r26); font: 600 17px/1 var(--sf); letter-spacing: -.3px; text-decoration: none; box-sizing: border-box; }
.nd-btn.sun { background: var(--sun); color: var(--ink); }
.nd-btn.apple { background: var(--black); color: var(--card); margin-top: 16px; }
.nd-btn.google { background: var(--card); color: var(--ink); margin-top: 8px; box-shadow: inset 0 0 0 .5px rgba(27,26,23,.12); }
.nd-gate-h + .nd-btn.google { margin-top: 16px; }
.nd-phone-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 4px; border: 0; background: transparent; color: var(--ink); font: 600 17px/1 var(--sf); }
.nd-err { min-height: 0; }
.nd-err:empty { display: none; }
.nd-own { position: fixed; inset: 0; z-index: 75; }
.nd-own[hidden] { display: none; }
.nd .sheet { background: rgba(250,246,239,.9); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.7), 0 -10px 30px rgba(0,0,0,.25); }
/* Inline comment error (bad-words filter etc.), above the compose box */
.nd-cmt-err { padding: 0 var(--m) 8px; }